*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#0b0b12;overflow:hidden;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
body.cap{background:transparent}
#stage{position:fixed;inset:0;display:grid;place-items:center;padding:56px 8px 8px}
body.cap #stage{padding:0}
#frame{position:relative;container-type:size;overflow:hidden;border-radius:14px;box-shadow:0 20px 60px #0008;background:var(--bg)}
body.cap #frame{border-radius:0;box-shadow:none}
#frame svg.scene{position:absolute;inset:0;width:100%;height:100%;display:block}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* top bar outside the animation */
#bar{position:fixed;top:0;left:0;right:0;height:52px;display:flex;align-items:center;gap:8px;padding:0 10px;z-index:50;background:#0b0b12e6;color:#fff;font-size:13px}
#bar .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
#bar button,#bar a{flex:none;height:40px;min-width:40px;padding:0 12px;border-radius:20px;border:1px solid #ffffff40;background:#ffffff14;color:#fff;font:600 14px system-ui;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
#exit{background:#fff!important;color:#111!important}
#bar button:focus-visible,#bar a:focus-visible{outline:3px solid #ffd54a}
body.cap #bar,body.cap #edit{display:none}
/* text overlay */
.ov{position:absolute;left:6cqw;right:6cqw;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.4cqmin;pointer-events:none;padding:2.4cqmin;border-radius:3cqmin;background:var(--ovbg);backdrop-filter:blur(3px)}
.ov>*{opacity:0}
.ov>.on{opacity:1;transform:none}
.hl{font-weight:900;font-size:var(--hls,9cqmin);line-height:1;letter-spacing:-.02em;color:var(--hc);text-shadow:var(--hsh)}
.biz{font-weight:800;font-size:5.6cqmin;color:var(--bc);background:var(--bbg);padding:.5cqmin 2.4cqmin;border-radius:99px}
.off{font-weight:800;font-size:4.6cqmin;color:var(--oc);background:var(--obg);padding:1.2cqmin 3cqmin;border-radius:2cqmin;border:var(--obd,0)}
.ph{font-weight:700;font-size:4cqmin;color:var(--pc);pointer-events:auto;text-decoration:none}
.demo{font:700 2.3cqmin system-ui;letter-spacing:.08em;color:#fff;background:#d32f2fdd;padding:.4cqmin 1.4cqmin;border-radius:99px;text-transform:uppercase}
#badge{position:absolute;right:2.4cqmin;bottom:2.4cqmin;font:600 2.5cqmin system-ui;padding:1cqmin 2cqmin;border-radius:99px;background:var(--bdgbg);color:var(--bdgc);text-decoration:none;z-index:5;border:1px solid var(--bdgb,#fff3);white-space:nowrap}
#badge i{font-style:normal;font-weight:900}
/* end card */
#end{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:var(--endbg);opacity:0;visibility:hidden}
#end.on{opacity:1;visibility:visible}
#end .in{text-align:center;color:var(--endc);padding:4cqmin;display:flex;flex-direction:column;gap:1.8cqmin;align-items:center;max-width:92cqw}
#end h2{font-size:7.2cqmin;line-height:1.05;font-weight:900}
#end .brand{font-size:4.4cqmin;font-weight:800;letter-spacing:.02em;color:var(--acc)}
#end .c{display:flex;flex-direction:column;gap:.8cqmin;font-size:3.6cqmin}
#end .c a{color:inherit}
#end .cta{background:var(--acc);color:var(--accc);font-weight:800;font-size:4cqmin;padding:1.8cqmin 4.5cqmin;border-radius:99px;text-decoration:none}
#end button{background:transparent;border:2px solid currentColor;color:inherit;border-radius:99px;font:700 3.4cqmin system-ui;padding:1.2cqmin 3.6cqmin;cursor:pointer}
/* motion */
.bob{animation:bob 2.4s ease-in-out infinite}.sway{animation:sway 3s ease-in-out infinite}
.wave{animation:wave 1.1s ease-in-out infinite}.blink{animation:blink 4s infinite}
.flick{animation:flick 1.7s infinite}.spin{animation:spin 6s linear infinite}.float{animation:float 4s ease-in-out infinite}
.glow{animation:glow 1.6s ease-in-out infinite}.pulse{animation:pulse 1.4s ease-in-out infinite}
.roll{animation:roll 2.2s ease-in-out infinite}.lift{animation:liftup 4s ease-in-out infinite}
.bob,.sway,.wave,.blink,.flick,.spin,.float,.glow,.pulse,.roll,.lift{transform-box:fill-box}
.sway{transform-origin:50% 100%}.wave{transform-origin:10% 10%}.blink{transform-origin:50% 50%}.spin{transform-origin:50% 50%}.pulse{transform-origin:50% 50%}
@keyframes bob{50%{transform:translateY(-4%)}}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes wave{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(22deg)}}
@keyframes blink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}}
@keyframes flick{0%,100%{opacity:1}40%{opacity:.75}60%{opacity:.95}80%{opacity:.6}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{50%{transform:translateY(-8%) rotate(3deg)}}
@keyframes glow{50%{opacity:.45}}
@keyframes pulse{50%{transform:scale(1.08)}}
@keyframes roll{50%{transform:translateY(35%)}}
@keyframes liftup{0%,15%{transform:translateY(0)}45%,70%{transform:translateY(-14%)}100%{transform:translateY(0)}}
#edit{position:fixed;left:8px;bottom:8px;z-index:40}
#edit summary{cursor:pointer;background:#fff;color:#111;border-radius:99px;padding:8px 12px;font:600 13px system-ui;list-style:none}
#edit form{background:#fff;color:#111;padding:10px;border-radius:12px;margin-top:6px;display:grid;gap:6px;width:min(280px,90vw);font:13px system-ui}
#edit input{padding:7px;border:1px solid #bbb;border-radius:8px;font:14px system-ui}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
#cnt{flex:none;font:600 13px system-ui;min-width:44px;text-align:center}#prev,#next{font-size:22px!important;padding:0!important;justify-content:center}
@media (max-width:700px){#bar .t{display:none}#bar{gap:6px;padding:0 6px}#bar button,#bar a{padding:0 10px;min-width:40px}}@media (max-width:420px){#bar .xl{display:none}}

#tap{position:fixed;left:50%;top:64px;transform:translateX(-50%);z-index:49;border:0;border-radius:999px;padding:12px 22px;font:700 16px system-ui;background:#ffd54a;color:#161616;box-shadow:0 6px 24px #0006;cursor:pointer;animation:tp 2s ease-in-out infinite}#tap[hidden],#vol[hidden]{display:none}#tap:focus-visible{outline:3px solid #fff}@keyframes tp{50%{transform:translateX(-50%) scale(1.06)}}@media (prefers-reduced-motion:reduce){#tap{animation:none}}body.cap #tap{display:none}
#vol{flex:none;width:84px;accent-color:#ffd54a}@media (max-width:420px){#vol{width:56px}}
@media (max-width:380px){#bar{gap:3px;padding:0 4px}#bar button,#bar a{min-width:34px;padding:0 7px}#cnt{min-width:34px;font-size:12px}#vol{width:46px}}
/* editorial photo mode */
@font-face{font-family:Fraunces;src:url(fonts/fraunces.woff2) format("woff2");font-weight:300 600;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url(fonts/fraunces-i.woff2) format("woff2");font-weight:300 600;font-style:italic;font-display:swap}
.ed #frame{background:#0d0c0b}
.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 50%;will-change:transform}
.scrim{position:absolute;inset:0;background:linear-gradient(180deg,#0000 30%,#0b0a0966 58%,#0b0a09e6 100%),linear-gradient(0deg,#0000 82%,#0b0a0955)}
.grain{position:absolute;inset:-50%;opacity:.07;mix-blend-mode:overlay;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ed .ov{top:auto!important;bottom:9cqh;left:7cqw;right:7cqw;align-items:flex-start;text-align:left;gap:0;padding:0;backdrop-filter:none;border-radius:0}
.ed .kick{font:600 2.5cqmin/1 ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--acc);margin-bottom:2.6cqmin}
.ed .hl{font-family:Fraunces,Georgia,serif;font-weight:350;font-size:var(--hls,11.5cqmin);line-height:.98;letter-spacing:-.025em;font-variation-settings:"opsz" 144}
.ed .hl em{font-style:italic;font-weight:300;color:var(--acc)}
.ed .rule{display:block;width:12cqmin;height:1px;background:var(--acc);margin:3.4cqmin 0 2.8cqmin;transform-origin:0 50%}
.ed .biz{font:600 2.7cqmin/1.2 ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;padding:0;border-radius:0;background:none;margin-bottom:1.6cqmin}
.ed .off{font-family:Fraunces,Georgia,serif;font-weight:400;font-size:4.2cqmin;line-height:1.25;padding:0;border:0;border-radius:0;background:none;margin-bottom:2.4cqmin;max-width:80cqw}
.ed .ph{font:500 3.2cqmin ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;letter-spacing:.04em;border-bottom:1px solid var(--acc);padding-bottom:.4cqmin;margin-bottom:2.6cqmin}
.ed .demo{font:600 1.9cqmin ui-sans-serif,-apple-system,Arial,sans-serif;letter-spacing:.2em;background:none;color:#f6f1e7b3;border:1px solid #f6f1e74d;padding:.6cqmin 1.4cqmin}
.ed #badge{font:500 2.1cqmin ui-sans-serif,-apple-system,Arial,sans-serif;letter-spacing:.06em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0003}
.ed #badge i{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:400;letter-spacing:0}
.ed #end{-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
.ed #end h2{font-family:Fraunces,Georgia,serif;font-weight:350;letter-spacing:-.02em;font-size:8cqmin}
.ed #end .brand{font:600 2.6cqmin ui-sans-serif,-apple-system,Arial,sans-serif;letter-spacing:.28em;text-transform:uppercase}
.ed #end .c{font:400 3.2cqmin ui-sans-serif,-apple-system,Arial,sans-serif;opacity:.85}
.ed #end .cta{font:600 3.4cqmin ui-sans-serif,-apple-system,Arial,sans-serif;letter-spacing:.04em;padding:2cqmin 5cqmin}
.ed #end .cta+.cta{background:transparent;color:var(--endc);border:1px solid #f6f1e766}
.ed #end button{border-width:1px;font:500 3cqmin ui-sans-serif,-apple-system,Arial,sans-serif}
.ed .scrim{background:linear-gradient(180deg,#0b0a0940 0%,#0000 22%,#0000 34%,#0b0a0999 60%,#0b0a09f0 100%)}
.ed .kick,.ed .biz,.ed .demo{text-shadow:0 1px 6px #000a}
.ed .ov{bottom:7cqh}
html.ed #tap{background:#f6f1e7e6;color:#14110d;font:600 15px ui-sans-serif,-apple-system,system-ui;letter-spacing:.02em;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:none}
html.ed #exit{background:#f6f1e7!important}
html.ed #vol{accent-color:#d9b779}