/* Studio Ⅱ website. Plain CSS, no frameworks, nothing loaded from other sites. */
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
:root{--violet:#7A4FC4;--gold:#f2b544;--ink:#1b1e23;--muted:#6b717b;--night:#0e1013}
body{font:17px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
.name{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.01em;white-space:nowrap}
.mark{display:block}
.btn{display:inline-flex;align-items:center;gap:.6em;background:var(--gold);color:#2b1c00;font-weight:700;font-size:clamp(18px,1.6vw,21px);padding:1.05em 1.9em;border-radius:999px;text-decoration:none;box-shadow:0 12px 32px rgba(20,8,50,.28);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(20,8,50,.36)}
.btn svg{width:1.05em;height:1.05em}
.need{font-size:14px;opacity:.78;margin-top:14px}

.film{position:relative;border-radius:22px;overflow:hidden;background:#0e1013;aspect-ratio:16/9;box-shadow:0 30px 80px rgba(20,8,50,.45)}
.film video{width:100%;height:100%;display:block;object-fit:cover}
.film .snd{position:absolute;right:12px;bottom:12px;border:0;border-radius:999px;padding:.6em 1em;font:600 13px/1 inherit;font-family:inherit;color:#fff;background:rgba(20,20,26,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer}


/* ---------- the scene ---------- */
.stage{position:relative;width:100%;aspect-ratio:4/3;container-type:inline-size;overflow:hidden;
  --p1:0;--p2:0;--p3:0;--st-ink:#fff;--st-muted:rgba(255,255,255,.55);--st-card:#171a1f;--st-line:#2b3038;--cable:#fff;--st-soft:rgba(183,156,242,.14);--st-accent:#b79cf2}
.stage.light{--st-ink:#1b1e23;--st-muted:#6b717b;--st-card:#fff;--st-line:#e1e3e8;--cable:#2a2d33;--st-soft:rgba(122,79,196,.09);--st-accent:#7a4fc4}
.rig,.cable,.cable i,.drive,.drive i,.count,.beam,.panel,.ph,.wd,.wd>*,.print,.pills{position:absolute}
.rig{inset:0;transform:translateY(calc(var(--p2)*19cqw))}
.stage.fade .rig{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%);mask-image:linear-gradient(90deg,transparent 0,#000 10%)}
.cable{left:-70cqw;top:36.2cqw;width:109.5cqw;height:2.6cqw;transform:translateX(calc((var(--p1) - 1)*28cqw))}
.cable .wire{left:0;right:6.4cqw;top:.95cqw;height:.7cqw;background:var(--cable);border-radius:1cqw}
.cable .plug{right:1.5cqw;top:0;width:5.2cqw;height:2.6cqw;border-radius:.8cqw;background:var(--cable)}
.cable .tip{right:0;top:.6cqw;width:1.7cqw;height:1.4cqw;border-radius:.3cqw;background:#aeb4bd}
.drive{left:38cqw;top:30.5cqw;width:24cqw;height:14cqw;border-radius:2.6cqw;background:linear-gradient(#31353c,#1c1f24);border:1px solid rgba(255,255,255,.08);box-shadow:0 2cqw 5cqw rgba(0,0,0,.3),inset 0 .2cqw 0 rgba(255,255,255,.14)}
.drive .dots{left:2.4cqw;bottom:2.5cqw;width:7cqw;height:.5cqw;background:repeating-linear-gradient(90deg,#5d626c 0 .5cqw,transparent .5cqw 1.1cqw)}
.drive .led{right:2.4cqw;bottom:2.2cqw;width:1.1cqw;height:1.1cqw;border-radius:50%;background:#4a4f58}
.drive .led::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--gold);box-shadow:0 0 1.8cqw .5cqw rgba(242,181,68,.7);opacity:clamp(0,calc((var(--p1) - .92)*14),1)}

.count{left:0;right:0;top:2.5cqw;text-align:center;color:var(--st-ink);font-weight:800;font-size:7.5cqw;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  opacity:calc(clamp(0,calc(var(--p2)*5 - .4),1) - clamp(0,calc(var(--p3)*5),1))}
.count small{font-size:.38em;font-weight:600;color:var(--st-accent);margin-left:.4em;letter-spacing:0}
.beam{left:0;top:12cqw;width:.9cqw;height:36cqw;border-radius:1cqw;background:linear-gradient(transparent,var(--st-accent),transparent);box-shadow:0 0 5cqw 1.4cqw rgba(160,120,240,.45);
  transform:translateX(calc((24 + var(--p2)*52)*1cqw));opacity:calc(4*var(--p2)*(1 - var(--p2)))}

.print{left:0;top:0;width:12cqw;height:9cqw;padding:.55cqw;background:#fff;border-radius:.9cqw;box-shadow:0 .6cqw 1.8cqw rgba(0,0,0,.26);
  --q:clamp(0,calc(var(--p2)*2 - var(--i)*.11),1);--r:clamp(0,calc(var(--p3)*1.8 - var(--i)*.08),1);
  opacity:clamp(0,calc(var(--q)*5),1);
  transform:translate(calc((44 + (var(--x) - 44)*var(--q) + (var(--gx) - var(--x))*var(--r))*1cqw),calc((52 + (var(--y) - 52)*var(--q) + (var(--gy) - var(--y))*var(--r))*1cqw)) rotate(calc(var(--rot)*(var(--q) - var(--r))*1deg)) scale(calc(.3 + .7*var(--q) - .12*var(--r)))}
.print b{display:block;width:100%;height:100%;border-radius:.5cqw}
.sun{background:radial-gradient(circle at 50% 64%,#ffe9a3 0 13%,transparent 14%),linear-gradient(#f6a561 0 64%,#31717f 64%)}
.day{background:radial-gradient(circle at 74% 28%,#fff6c4 0 9%,transparent 10%),linear-gradient(168deg,transparent 0 58%,#3f9a68 58.5%),linear-gradient(#86c9f4,#cfeafb)}
.night{background:radial-gradient(circle at 76% 28%,#f5f0d6 0 8%,transparent 9%),radial-gradient(circle at 22% 22%,#fff 0 2%,transparent 3%),radial-gradient(circle at 44% 40%,#fff 0 1.6%,transparent 2.6%),radial-gradient(circle at 60% 16%,#fff 0 1.4%,transparent 2.4%),linear-gradient(#22306a 0 70%,#111a3a 70%)}
.hill{background:linear-gradient(196deg,transparent 0 60%,#2f7d5b 60.5%),linear-gradient(164deg,transparent 0 52%,#4fae7a 52.5%),linear-gradient(#f7c9a0,#fbe6cf)}
.sea{background:radial-gradient(circle at 30% 30%,#fff 0 9%,transparent 10%),linear-gradient(#7fd3e6 0 55%,#1f88a8 55% 80%,#f1d9a7 80%)}

.panel{left:6cqw;top:2cqw;width:88cqw;height:45cqw;border-radius:3cqw;background:var(--st-card);border:1px solid var(--st-line);box-shadow:0 3cqw 8cqw rgba(0,0,0,.22);
  --a:clamp(0,calc(var(--p3)*3),1);opacity:var(--a);transform:scale(calc(.94 + .06*var(--a)))}
.ph{left:2.6cqw;right:2.8cqw;top:2cqw;height:4cqw;display:flex;align-items:center;gap:1.3cqw;color:var(--st-ink)}
.ph svg{width:3.6cqw;height:3.6cqw}
.ph b{font-size:2.6cqw;font-weight:700}
.ph em{margin-left:auto;font-style:normal;font-size:2.1cqw;font-weight:600;color:var(--st-muted)}
.wd{left:44cqw;width:41cqw;height:9.6cqw;border-radius:1.6cqw;background:var(--st-soft);
  --w:clamp(0,calc(var(--p3)*2.4 - .6 - var(--i)*.25),1);opacity:var(--w);transform:translateY(calc((1 - var(--w))*2cqw))}
.wd span{left:1.8cqw;top:50%;transform:translateY(-50%);font-size:2.1cqw;font-weight:600;color:var(--st-muted)}
.bars{left:14cqw;right:1.8cqw;top:1.7cqw;bottom:1.7cqw;display:flex;align-items:flex-end;gap:.9cqw}
.bars i{flex:1;background:var(--st-accent);border-radius:.4cqw .4cqw 0 0;transform-origin:bottom;transform:scaleY(var(--w))}
.map{left:14cqw;right:1.8cqw;top:1.5cqw;bottom:1.5cqw;background:radial-gradient(circle,var(--st-muted) 0 .2cqw,transparent .27cqw) 0 0/1.3cqw 1.3cqw}
.map i{position:absolute;width:1.5cqw;height:1.5cqw;border-radius:50%;background:var(--gold);box-shadow:0 0 0 .5cqw rgba(242,181,68,.28)}
.map i:nth-child(1){left:18%;top:26%}.map i:nth-child(2){left:47%;top:56%}.map i:nth-child(3){left:76%;top:30%}
.bar{left:14cqw;right:1.8cqw;top:4.05cqw;height:1.5cqw;border-radius:1cqw;background:var(--st-line)}
.bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--w)*64%);border-radius:1cqw;background:var(--st-accent)}
.pills{left:0;right:0;top:66.5cqw;display:flex;justify-content:center;gap:1.6cqw}
.pills span{--i:0;font-size:2.3cqw;font-weight:600;line-height:1;color:var(--st-ink);border:1px solid var(--st-line);background:var(--st-card);padding:1.1cqw 2.3cqw;border-radius:9cqw;
  --w:clamp(0,calc(var(--p3)*3 - 1.6 - var(--i)*.2),1);opacity:var(--w);transform:translateY(calc((1 - var(--w))*1.5cqw))}
.pills span:nth-child(2){--i:1}.pills span:nth-child(3){--i:2}


/* ---------- page: one violet page, a white cable drawn through white cards ---------- */
html{scroll-behavior:smooth}
body{background:linear-gradient(180deg,#7A4FC4 0,#7A4FC4 20%,#5a36a4 100%);color:#fff;min-height:100vh}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.stage:empty{display:none}

.hero{text-align:center;padding:clamp(18px,3.2vh,36px) 20px 0}
.brand{display:inline-flex;align-items:center;gap:.26em;font-size:clamp(40px,5.2vw,64px);line-height:1;text-decoration:none}
.brand .mark{width:.84em;height:.84em}
.line{font-size:clamp(18px,2vw,23px);font-weight:500;margin:8px auto clamp(16px,2.4vh,22px)}
.need.soon{opacity:1;font-weight:600}
/* the second, quieter download and the one line about the add-on */
.alt{font-size:14px;margin-top:6px}
.alt a{color:#fff;opacity:.92;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.55)}
.alt a:hover{opacity:1;text-decoration-color:#fff}
.note{font-size:13px;line-height:1.45;opacity:.72;max-width:46em;margin:8px auto 0}
.note+.note{margin-top:2px}
/* the trailer is sized so it fits inside the first screen, under the name and the button */
.film{width:min(100%,1040px,max(300px,calc((100vh - 395px)*16/9)));margin:clamp(20px,3.2vh,34px) auto 0;box-shadow:0 0 0 1px rgba(255,255,255,.22),0 30px 80px rgba(20,8,50,.45)}
@supports(height:100svh){.film{width:min(100%,1040px,max(300px,calc((100svh - 395px)*16/9)))}}

.run{position:relative;max-width:1080px;margin:0 auto;padding:clamp(90px,12vw,160px) 20px 0}
.cab{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cab path{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round}
.cab .ghost{stroke:rgba(255,255,255,.17)}
.cab circle{fill:#fff}
.station{position:relative;display:flex;justify-content:center;margin-bottom:clamp(90px,12vw,170px)}
.station.l{justify-content:flex-start}
.station.r{justify-content:flex-end}
.card{position:relative;z-index:1;width:min(520px,100%);background:#fff;color:var(--ink);border-radius:32px;padding:14px 14px 30px;box-shadow:0 30px 70px rgba(30,10,70,.36)}
.card .stage{border-radius:22px;background:#f5f2fb}
.card.step h2{font-size:clamp(42px,5vw,60px);letter-spacing:-.04em;line-height:1;font-weight:800;margin:22px 16px 8px}
.card.step p{color:var(--muted);margin:0 16px}
.roman{position:absolute;top:50%;transform:translateY(-50%);font:400 clamp(200px,30vw,380px)/1 Georgia,serif;color:rgba(255,255,255,.13);pointer-events:none}
.station.l .roman{right:9%}.station.r .roman{left:9%}

.card.wide{width:100%;padding:clamp(28px,5vw,60px)}
.card.wide h2{font-size:clamp(30px,4.2vw,48px);letter-spacing:-.035em;line-height:1.05;font-weight:800;margin-bottom:clamp(22px,3.4vw,40px)}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin-bottom:10px}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,4vw,56px);list-style:none;padding:0}
.cols h3{font-size:21px;letter-spacing:-.01em;margin-bottom:8px}
.feat ul{list-style:none;padding:0}
.feat li{padding:11px 0;border-top:1px solid #e6e3ee;font-size:15px;line-height:1.4;color:var(--muted)}
.feat li b{display:block;color:var(--ink);font-size:16px}
.prom li{border-top:1px solid #e6e3ee;padding-top:14px;color:var(--muted);font-size:16px}
.prom .num{display:block;font-family:Georgia,serif;font-size:22px;color:var(--violet);margin-bottom:4px}
.prom h3{color:var(--ink)}
.needs{margin-top:clamp(26px,4vw,44px);padding-top:22px;border-top:1px solid #e6e3ee;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.needs .eyebrow{margin:0 8px 0 0}
.chip{font-size:15px;font-weight:600;padding:.5em 1em;border-radius:999px;background:#f5f2fb;color:var(--ink)}
/* .todo marks every placeholder that is not final yet */
.todo{border:1.5px dashed #c79a2e;background:rgba(242,181,68,.16);color:#7a5200;border-radius:999px;padding:.2em .8em;font-weight:600}
.chip.todo{padding:.42em 1em}
footer .todo{color:#ffe2a0;background:rgba(242,181,68,.12);border-color:rgba(242,181,68,.7)}

/* wide cards fade their contents in when the cable reaches them */
.js .card.wide>*{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .card.wide>:nth-child(2){transition-delay:.08s}.js .card.wide>:nth-child(3){transition-delay:.18s}.js .card.wide>:nth-child(4){transition-delay:.28s}
.js .card.wide.in>*{opacity:1;transform:none}

.get{text-align:center;position:relative;z-index:1;padding-bottom:clamp(50px,8vw,100px)}
.get .btn{font-size:clamp(20px,2vw,24px);transition:transform .3s,box-shadow .3s}
.get .btn.live{box-shadow:0 0 0 10px rgba(242,181,68,.25),0 18px 50px rgba(20,8,50,.4);transform:scale(1.04)}
/* the pre-launch state: looks deliberate, never looks clickable */
.pending{display:inline-flex;align-items:center;border:2px solid rgba(255,255,255,.55);border-radius:999px;padding:.85em 1.8em;font-weight:700;font-size:clamp(17px,1.5vw,20px);color:#fff;letter-spacing:.01em}
.get .btn.pending,.get .btn.pending:hover{background:none;color:#fff;box-shadow:none;cursor:default;transform:none}
.get .btn.pending.live{box-shadow:0 0 0 10px rgba(255,255,255,.13)}
footer{font-size:14px;padding:26px 20px 44px;color:rgba(255,255,255,.82);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 20px}
footer .name{font-size:19px;color:#fff}
/* the trademark line: small, full width, under the rest of the footer */
.legal{flex:1 0 100%;max-width:62em;margin:10px auto 0;font-size:12px;line-height:1.5;text-align:center;opacity:.75}

.doc main{max-width:760px;margin:0 auto;padding:28px 20px 60px}
.doc .brand{font-size:30px;color:#fff;margin-bottom:26px}
.doc h1{font-size:clamp(30px,5vw,44px);letter-spacing:-.03em;line-height:1.1;margin-bottom:14px}
.doc .card p{color:var(--muted);margin-bottom:12px}
.doc .card a{color:var(--violet);font-weight:600}

@media(max-width:820px){.station.l,.station.r{justify-content:center}.roman{display:none}.cols{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.get .btn{transition:none}.js .card.wide>*{opacity:1;transform:none;transition:none}}

/* .doc pages: headings and the small print */
.doc .card h3{font-size:19px;letter-spacing:-.01em;margin:26px 0 6px;color:var(--ink)}
.doc .card .meta{font-size:13px;color:var(--muted);margin-top:28px}