/* Invitation maker (/tools). Prefix tl-. Templates are drawn by invite-engine.js (fonts below). */
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/instrument-serif-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/instrument-serif-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/assets/fonts/cormorant-garamond-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/assets/fonts/cormorant-garamond-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Cinzel";src:url(/assets/fonts/cinzel-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Italiana";src:url(/assets/fonts/italiana-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Pinyon Script";src:url(/assets/fonts/pinyon-script-400.woff2) format("woff2");font-weight:400;font-display:swap}
.tl-page{background:#f4f1ec}
.tl-wrap{max-width:1360px;margin:0 auto;padding:110px 24px 60px}
.tl-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.tl-hd h1{font-size:clamp(40px,5vw,64px);line-height:1;margin:12px 0 0}
.tl-hd h1 em{color:#ff5a1f}
.tl-hd p{color:#6b6575;font-size:16px;max-width:620px;margin:10px 0 0}
.tl-tabs{display:flex;gap:4px;background:#fff;border:1px solid #e8e2d8;border-radius:14px;padding:5px;flex-wrap:wrap}
.tl-tabs button,.tl-cats button,.tl-chips button{border:0;background:none;font:600 14px/1 inherit;font-family:inherit;color:#6b6575;padding:10px 14px;border-radius:10px;cursor:pointer}
.tl-tabs button.on{background:#1d1b22;color:#fff}
.tl-cats{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.tl-cats button,.tl-chips button{background:#fff;border:1px solid #e8e2d8;border-radius:99px;padding:8px 14px;font-size:13px}
.tl-cats button.on,.tl-chips button.on{background:#ff5a1f;border-color:#ff5a1f;color:#fff}
.tl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px;margin-bottom:40px}
.tl-item{text-decoration:none!important;color:inherit;display:block}
.tl-item[hidden]{display:none}
.tl-thumb{position:relative;display:block;aspect-ratio:9/16;border-radius:14px;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.14);transition:transform .25s}
.tl-item:hover .tl-thumb{transform:translateY(-4px)}
.tl-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tl-play{position:absolute;left:10px;top:10px;font:700 11px/1 system-ui,sans-serif;font-style:normal;background:rgba(0,0,0,.6);color:#fff;border-radius:99px;padding:5px 9px}
.tl-meta{display:flex;justify-content:space-between;gap:8px;margin-top:8px;align-items:baseline}
.tl-meta b{font-size:13.5px}.tl-meta small{font-size:11.5px;color:#6b6575;white-space:nowrap}
/* editor */
.tl-ed{display:grid;grid-template-columns:380px minmax(0,1fr) 320px;min-height:100vh;padding-top:84px}
.tl-form{background:#fff;padding:22px;border-right:1px solid #e8e2d8}
.tl-form h1{font-size:30px;margin:10px 0 0}
.tl-back{display:inline-block;font-size:13px;color:#6b6575;margin-bottom:10px;text-decoration:none}
.tl-sub,.tl-hint,.tl-dim{color:#6b6575;font-size:12.5px;margin:4px 0 8px}
.tl-f{display:block;font-size:12.5px;font-weight:600;color:#475569;margin:10px 0 0}
.tl-f input{display:block;width:100%;margin-top:6px;padding:10px 12px;border:1px solid #e2e8f0;border-radius:10px;font:500 14px/1.2 inherit;font-family:inherit;background:#fff;box-sizing:border-box}
.tl-f input[type=file]{padding:8px}
.tl-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tl-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tl-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px}
.tl-phone{width:min(330px,80vw);border-radius:40px;background:#0b0b0f;padding:12px;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.tl-stage{position:relative;aspect-ratio:9/16;border-radius:30px;overflow:hidden;background:#222}
.tl-layer{position:absolute;inset:0;width:100%;height:100%}
.tl-replay{border:0;background:#1d1b22;color:#fff;border-radius:99px;padding:10px 18px;font:600 14px/1 inherit;font-family:inherit;cursor:pointer}
/* preview motion = server video: background slow push-in, layers come in one by one */
.tl-anim .tl-layer:first-child{animation:tlZoom 12s linear both}
.tl-anim .tl-layer:not(:first-child){animation:tlIn .8s ease-out both;animation-delay:calc(.5s + (var(--i) - 1) * .9s)}
.tl-anim.tl-m-rise .tl-layer:not(:first-child){animation-name:tlRise}
.tl-anim.tl-m-drop .tl-layer:not(:first-child){animation-name:tlDrop}
.tl-anim.tl-m-fade .tl-layer:not(:first-child){animation-duration:1.2s}
@keyframes tlZoom{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes tlIn{from{opacity:0}to{opacity:1}}
@keyframes tlRise{from{opacity:0;transform:translateY(3.6%)}to{opacity:1;transform:none}}
@keyframes tlDrop{from{opacity:0;transform:translateY(-3.6%)}to{opacity:1;transform:none}}
.tl-side{background:#fff;border-left:1px solid #e8e2d8;padding:22px}
.tl-side h2{font-size:17px;margin:0 0 10px}
.tl-opt{border:1px solid #ff5a1f;box-shadow:0 0 0 1px #ff5a1f;border-radius:14px;padding:14px}
.tl-opt b{display:flex;justify-content:space-between;font-size:14px}.tl-opt b span{color:#047857}
.tl-opt small{display:block;color:#6b6575;font-size:12.5px;line-height:1.45;margin-top:4px}
.tl-go{display:flex!important;justify-content:center;width:100%;margin-top:14px;box-sizing:border-box;border:0;cursor:pointer}
.tl-go[hidden]{display:none!important}
.tl-go:disabled{opacity:.6}
.tl-video{width:100%;border-radius:14px;margin-top:14px;background:#000}
.tl-video[hidden]{display:none}
@media (max-width:1080px){
  .tl-ed{grid-template-columns:minmax(0,1fr)}
  .tl-form,.tl-side{border:0}
  .tl-mid{order:-1;padding-top:16px}
}
/* working overlay */
.tl-ld{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(11,11,15,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;text-align:center}
.tl-ld[hidden]{display:none}
.tl-ld-in{width:min(360px,86vw)}
.tl-ld-logo{height:64px;display:flex;justify-content:center}
.tl-ld-logo img{height:64px;width:auto}
.tl-ld-step{font:400 26px/1.2 "Instrument Serif",Georgia,serif;margin:22px 0 14px;min-height:32px}
.tl-ld-step.in{animation:tlStep .4s ease-out}
@keyframes tlStep{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tl-ld-bar{height:5px;border-radius:9px;background:rgba(255,255,255,.14);overflow:hidden}
.tl-ld-bar i{display:block;height:100%;width:0;background:#ff5a1f;border-radius:9px;transition:width .3s}
.tl-ld small{display:block;margin-top:14px;color:#a19fac;font-size:12.5px}
html.tl-busy{overflow:hidden}
@media (prefers-reduced-motion:reduce){.tl-anim .tl-layer{animation:none!important}}