.stage { position:relative; overflow:hidden; background:var(--bg-stage); color:var(--text); font-family:var(--body) }
.stage.desktop { width:100%; height:100vh; min-height:640px }
.stage.phone { width:390px; height:844px; border-radius:24px }
.st-media { position:absolute; inset:0 } .st-media img, .st-media video { width:100%; height:100%; object-fit:cover; display:block }
.st-placeholder { position:absolute; inset:0; background:radial-gradient(120% 80% at 30% 20%,#2a1f2e 0%,#0b0b10 60%),#050507 }
.st-grain { position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 3px); pointer-events:none }
.st-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,5,7,.55) 0%,rgba(5,5,7,0) 18%,rgba(5,5,7,0) 45%,rgba(5,5,7,.88) 100%); pointer-events:none }
.st-top { position:absolute; left:40px; right:40px; top:96px; display:flex; align-items:center; gap:12px }
.st-chips { display:flex; align-items:center; gap:12px }
.st-viewers { display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 12px; border-radius:999px; background:rgba(22,22,29,.7); border:1px solid var(--line); font-size:13px; font-weight:600; color:var(--text-2) } .st-viewers b { color:var(--text) }
.st-bottom { position:absolute; left:40px; right:40px; bottom:120px; display:flex; align-items:flex-end; justify-content:space-between; gap:32px }
.st-body { display:flex; flex-direction:column; gap:20px; max-width:760px; min-width:0; flex:1 }
.st-clockrow { display:flex; align-items:baseline; gap:20px }
.st-clock { font-size:160px; line-height:.9; letter-spacing:-0.04em; color:var(--text) }
.st-clockmeta { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--text-2); font-weight:600 }
.st-headline { font-family:var(--display); font-weight:700; font-size:32px; line-height:1.15; letter-spacing:-0.02em; text-wrap:pretty }
.st-message { font-size:17px; color:var(--text-2); max-width:640px }
.st-holder { display:flex; align-items:center; gap:12px } .st-holdercol { display:flex; flex-direction:column; line-height:1.3 }
.st-name { display:flex; align-items:center; gap:6px; font-weight:700 } .st-name svg { stroke:var(--gold); stroke-width:2 }
.st-actions { display:flex; flex-direction:column; align-items:flex-end; gap:12px; flex:none }
.st-actrow { display:flex; gap:8px } .st-actrow .btn.secondary { background:rgba(30,30,40,.8) }
.st-foot { position:absolute; left:40px; right:40px; bottom:40px; display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--text-2) }
.st-next { display:flex; align-items:center; gap:12px } .st-sound { display:flex; align-items:center; gap:8px }
.st-bar { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.08); overflow:hidden }
/* Filled by a compositor animation, not by JavaScript: the clock ticks four times a
 * second and setting a width on each tick stepped visibly. One 60 s linear animation is
 * started per minute at the minute's true offset (negative delay) and runs off-thread. */
.st-barfill { position:absolute; inset:0; width:100%; background:var(--accent); transform-origin:left center; transform:scaleX(0); will-change:transform }
.st-barfill.run { animation:st-fill 60s linear both }
@keyframes st-fill { from { transform:scaleX(0) } to { transform:scaleX(1) } }
@media (prefers-reduced-motion:reduce){ .st-barfill.run { animation-duration:60s } }
.st-dots { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; gap:6px; z-index:3 } .st-dots i { display:block; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.28) } .st-dots i.on { background:#fff; width:18px; border-radius:3px }
.st-ownlink { max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.stage .brand { position:absolute; left:40px; top:24px } .stage .st-links { position:absolute; right:40px; top:24px; display:flex; align-items:center; gap:20px; font-size:14px; font-weight:600 } .st-links a { color:var(--text-2) } .st-links a:hover { color:var(--text) }
/* phone + narrow */
.stage.phone .st-top, .stage.phone .st-bottom, .stage.phone .st-foot, .stage.phone .brand, .stage.phone .st-links { left:20px; right:20px }
.stage.phone .st-bottom { flex-direction:column; align-items:stretch; gap:16px; bottom:100px }
.stage.phone .st-top { top:56px } .stage.phone .st-body { gap:12px } .stage.phone .st-clock { font-size:96px } .stage.phone .st-headline { font-size:22px } .stage.phone .st-message { font-size:14px }
.stage.phone .st-actions { align-items:stretch } .stage.phone .st-actions .btn.lg { width:100% } .stage.phone .st-foot { bottom:56px } .stage.phone .st-links { display:none } .stage.phone .st-clockmeta { display:none }
@media (max-width:1100px) { .stage.desktop .st-bottom { flex-direction:column; align-items:stretch; gap:20px } .stage.desktop .st-actions { align-items:stretch; flex-direction:row; flex-wrap:wrap; justify-content:space-between } }
@media (max-width:820px) { .stage.desktop .st-top, .stage.desktop .st-bottom, .stage.desktop .st-foot, .stage.desktop .brand, .stage.desktop .st-links { left:20px; right:20px }
  .stage.desktop .st-bottom { bottom:96px } .stage.desktop .st-body { gap:12px } .stage.desktop .st-clock { font-size:88px } .stage.desktop .st-headline { font-size:22px } .stage.desktop .st-clockmeta { display:none }
  .stage.desktop .st-actions { flex-direction:column; align-items:stretch } .stage.desktop .st-actions .btn.lg { width:100% } .stage.desktop .st-actrow { display:none } .stage.desktop .st-foot { bottom:48px } .stage.desktop .st-links { display:none } .stage.desktop .brand { top:20px; left:20px } }
/* content layouts (content.layout) */
.stage.st-layout-top-left .st-bottom { top:150px; bottom:auto; align-items:flex-start }
.stage.st-layout-center .st-bottom, .stage.st-layout-bottom-center .st-bottom { flex-direction:column; align-items:center; text-align:center }
.stage.st-layout-center .st-bottom { top:50%; bottom:auto; transform:translateY(-50%) }
.stage.st-layout-center .st-body, .stage.st-layout-bottom-center .st-body { align-items:center }
.stage.st-layout-center .st-clockrow, .stage.st-layout-bottom-center .st-clockrow { justify-content:center }
.stage.st-layout-center .st-holder, .stage.st-layout-bottom-center .st-holder { justify-content:center }
.stage.st-layout-center .st-actions, .stage.st-layout-bottom-center .st-actions { align-items:center }
.stage.phone.st-layout-top-left .st-bottom { top:110px }
/* ── the document: layers inside the safe frame ── */
.st-doc { position:absolute; inset:0; z-index:1; pointer-events:none } .st-doc .st-layer { pointer-events:auto }
.st-safe { position:absolute; border:1px dashed rgba(232,184,74,.45); border-radius:4px; pointer-events:none; z-index:0 }
.st-safe::after { content:"safe frame · visible on every phone"; position:absolute; left:8px; top:-18px; font-family:var(--mono); font-size:9px; letter-spacing:.04em; color:var(--gold); white-space:nowrap }
.st-layer { position:absolute; box-sizing:border-box; transform-origin:center center }
.st-l-text { white-space:pre-wrap; overflow-wrap:break-word; font-family:var(--display); color:#fff } .st-l-text.shadow { text-shadow:0 2px 24px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4) }
.st-l-text.grad { -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent } .st-l-text.pill { padding:.25em .6em; border-radius:.35em; display:inline-block }
.st-l-image, .st-l-video { overflow:hidden; background:rgba(255,255,255,.04) } .st-l-image img, .st-l-video video { width:100%; height:100%; display:block; object-fit:cover }
.st-l-image.empty, .st-l-video.empty { border:1px dashed rgba(255,255,255,.25) }
.st-l-image.cropped { position:absolute } .st-l-image.cropped img { position:absolute; max-width:none }
.st-hidden-here { opacity:.25 !important; outline:1px dashed rgba(255,255,255,.4) }
.st-l-shape.st-shape-circle { border-radius:50% } .st-l-shape.st-shape-blob { border-radius:42% 58% 55% 45% / 48% 40% 60% 52% } .st-l-shape.st-shape-line { border-radius:2px }
.st-l-sticker { display:grid; place-items:center } .st-l-sticker svg { width:100%; height:100%; display:block; filter:drop-shadow(0 6px 16px rgba(0,0,0,.35)) } .st-l-sticker span { position:absolute; inset:0; display:grid; place-items:center; text-align:center; font-family:var(--display); font-weight:800; color:#0e0e13; font-size:1.2em; line-height:1; letter-spacing:-.02em; white-space:pre-wrap; padding:14% }
.st-l-button { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .st-l-button.white { background:#fff; color:#0e0e13 }
.st-l-countdown .st-cd-label { font-family:var(--body); font-weight:700; font-size:.32em; letter-spacing:.12em; text-transform:uppercase; opacity:.8; margin-bottom:.15em } .st-l-countdown .st-cd-digits { font-variant-numeric:tabular-nums; letter-spacing:-.03em; line-height:1 }
/* compact chrome when a document is on the stage: the layers are the page */
.stage.doc .st-clock { font-size:72px } .stage.doc .st-bottom { bottom:40px; align-items:flex-end; z-index:2 } .stage.doc .st-top { z-index:2 } .stage.doc .st-foot { bottom:12px; z-index:2 } .stage.doc .st-body { gap:8px } .stage.doc .st-clockmeta { display:none }
.stage.doc.phone .st-clock { font-size:44px } .stage.doc.phone .st-bottom { bottom:64px }
/* entrances: presets with a delay, nothing to learn */
.st-in { animation-duration:.7s; animation-fill-mode:both; animation-timing-function:cubic-bezier(.2,.7,.2,1) }
@keyframes st-fade { from { opacity:0 } to { opacity:1 } } .st-in-fade { animation-name:st-fade }
@keyframes st-rise { from { opacity:0; translate:0 28px } to { opacity:1; translate:0 0 } } .st-in-rise { animation-name:st-rise }
@keyframes st-pop { 0% { opacity:0; scale:.7 } 70% { scale:1.04 } 100% { opacity:1; scale:1 } } .st-in-pop { animation-name:st-pop }
@keyframes st-slide { from { opacity:0; translate:-40px 0 } to { opacity:1; translate:0 0 } } .st-in-slide { animation-name:st-slide }
@keyframes st-type { from { clip-path:inset(0 100% 0 0) } to { clip-path:inset(0 0 0 0) } } .st-in-type { animation-name:st-type; animation-timing-function:steps(24,end); animation-duration:1.2s }
@keyframes st-scene-fade { from { opacity:0 } to { opacity:1 } } .st-scene-fade { animation:st-scene-fade .5s ease both }
@keyframes st-scene-push { from { translate:6% 0; opacity:0 } to { translate:0 0; opacity:1 } } .st-scene-push { animation:st-scene-push .5s cubic-bezier(.2,.7,.2,1) both }
@media (prefers-reduced-motion: reduce) { .st-in, .st-scene-fade, .st-scene-push { animation:none } }