@font-face{font-family:Roboto;src:url('./assets/Roboto.ttf') format('truetype');font-display:swap}
:root{--navy:#032854;--coral:#fd554c;--accent:#fd766a;--scale:1;--frame-w:1080px;--frame-h:1350px;color-scheme:dark}
*{box-sizing:border-box}
html{background:#020f23;scrollbar-color:#34506d #020f23}
body{margin:0;color:#f4f6f6;font-family:Roboto,Arial,sans-serif;background:radial-gradient(ellipse at 50% 20%,#133858,#020f23 65%)}
.scroll-track{height:440vh;min-height:var(--frame-h)}
.frame-slot{position:sticky;top:0;width:var(--frame-w);height:var(--frame-h);margin:auto}
.frame{position:absolute;inset:0 auto auto 0;width:1080px;height:1350px;transform:scale(var(--scale));transform-origin:top left;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 62% 47%,#194c6b 0,#092b4b 36%,#031b37 65%,#02162f 100%)}
.frame:after{content:"";position:absolute;inset:0;border:1px solid #9cc3d116;pointer-events:none;z-index:10}
.brand{position:absolute;left:58px;top:45px;display:flex;align-items:center;gap:14px;z-index:4;font-size:21px;font-weight:800;line-height:1.05;letter-spacing:.6px}
.brand img{width:48px;height:48px;object-fit:contain}.brand em{font-style:normal;color:var(--coral)}
.edition{position:absolute;right:58px;top:63px;font-size:15px;font-weight:500;letter-spacing:3px;color:#a8bdcb}
.eyebrow{position:absolute;top:143px;left:60px;margin:0;font-size:16px;letter-spacing:5px;color:var(--accent);font-weight:700}
h1{position:absolute;top:177px;left:55px;right:35px;margin:0;font-size:86px;line-height:1.03;letter-spacing:-3.8px;font-weight:850;z-index:3}h1 span{color:var(--accent)}
.product-heading{position:absolute;left:60px;right:60px;top:295px;display:flex;align-items:baseline;gap:22px;z-index:3;pointer-events:none}
h2{font-size:30px;letter-spacing:-.5px;font-weight:700;margin:0}.product-heading>span{font-size:21px;font-weight:400;color:#b5cad5}
.large-number{position:absolute;left:42px;top:420px;font-size:340px;font-weight:800;letter-spacing:-25px;color:#b1d5e906;line-height:1;z-index:0;pointer-events:none}
#stage{position:absolute;left:0;top:287px;width:1080px;height:810px;z-index:1;pointer-events:none}
#stage canvas{display:block;width:100%;height:100%}
.scene-caption{position:absolute;left:60px;right:60px;top:1000px;display:flex;justify-content:space-between;font-size:17px;color:#a7c2d1;letter-spacing:.5px;z-index:2;pointer-events:none}
#shot{font-variant-numeric:tabular-nums;color:var(--accent);letter-spacing:2px}
.products{position:absolute;left:60px;right:60px;top:1042px;display:flex;padding:6px;gap:4px;border:1px solid #65829950;border-radius:20px;background:#03182f88;z-index:4}
button{font:600 23px Roboto,Arial,sans-serif;color:#f4f6f6;cursor:pointer;border:1px solid #6e8eaa65;background:#0a3553;border-radius:16px;transition:background .18s,border-color .18s}
.products button{flex:1;white-space:nowrap;border:1px solid transparent;background:transparent;padding:17px 12px;font-size:23px;font-weight:500}
.products button span{margin-right:11px;font-size:15px;color:#87a7ba;font-variant-numeric:tabular-nums}
.products button[aria-pressed=true]{background:#214761;border-color:#a5c9d557;color:white}.products button[aria-pressed=true] span{color:var(--accent)}
button:hover:enabled{background:#28546d;border-color:#a1cadf}button:disabled{cursor:default;opacity:.5}.products button:disabled[aria-pressed=true]{opacity:.8}
button:focus-visible,input:focus-visible{outline:3px solid #f5f4ec;outline-offset:5px}
.controls{position:absolute;left:60px;right:60px;top:1140px;z-index:4}
.progress-label{display:flex;justify-content:space-between;align-items:center;font-size:19px;line-height:1;margin-bottom:13px;color:#b5cad5}.progress-label output{font-size:20px;color:var(--accent);font-variant-numeric:tabular-nums}
input[type=range]{display:block;width:100%;height:15px;margin:0 0 23px;padding:0;background:transparent;accent-color:var(--accent);cursor:ew-resize;touch-action:pan-y}
.actions{display:flex;align-items:center;gap:13px}.actions button{height:61px;padding:0 23px;font-size:22px;display:flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap}
.actions button svg{width:20px;height:20px;fill:currentColor;flex:none}.actions .primary{background:var(--coral);border-color:var(--coral);color:#061f39;font-weight:750;padding-right:26px}.actions .primary:hover:enabled{background:#ff7a72;border-color:#ff7a72}
.actions .record{background:#dce8e9;color:#092840;border-color:#dce8e9}.actions .record:hover:enabled{background:white;border-color:white}.actions .reset{margin-left:auto;background:transparent;color:#bad0de;font-size:20px;padding:0 19px}
.status{font-size:16px;margin:14px 0 0;min-height:22px;color:#b2c7d5}.is-recording .record svg{color:#c9332d;animation:pulse 1s infinite}
footer{position:absolute;left:60px;right:60px;bottom:24px;display:flex;justify-content:space-between;font-size:14px;color:#7996ab;letter-spacing:.5px}footer span:first-child{color:#b7cbd6}
.load-error{position:absolute;left:95px;right:95px;top:650px;background:#092b4bef;padding:28px;font-size:27px;text-align:center;z-index:6;border-radius:18px}.load-error:empty{display:none}
.capture .scroll-track{height:var(--frame-h);min-height:0}.capture .frame-slot{position:relative}
@keyframes pulse{50%{opacity:.3}}
@media(max-width:600px){
  .scene-caption{top:898px;font-size:24px}
  .products{top:940px;padding:7px;border-radius:24px}
  .products button{height:112px;padding:12px 4px;font-size:32px}
  .products button span{font-size:20px;margin-right:8px}
  .controls{top:1095px}.progress-label{font-size:30px;margin-bottom:12px}.progress-label output{font-size:30px}
  input[type=range]{height:30px;margin-bottom:18px}
  .actions{gap:13px}.actions button{height:102px;font-size:31px;padding:0 18px;gap:10px;border-radius:21px}
  .actions button svg{width:25px;height:25px}.actions .primary{padding:0 20px}.actions .reset{font-size:28px;padding:0 12px}
  .status{font-size:22px;margin-top:10px;min-height:27px}
  .product-heading>span{font-size:24px}.edition{font-size:19px}
}
@media(prefers-reduced-motion:reduce){button{transition:none}.is-recording .record svg{animation:none}}