@view-transition{navigation:auto}@property --g1{syntax:"<color>";inherits:true;initial-value:#7f52f5}@property --g2{syntax:"<color>";inherits:true;initial-value:#e95c9d}@property --accent{syntax:"<color>";inherits:true;initial-value:#a27dff}@property --accent-2{syntax:"<color>";inherits:true;initial-value:#ff5fa8}@property --fx-t{syntax:"<color>";inherits:true;initial-value:#ffb3d6}@property --fx-m{syntax:"<color>";inherits:true;initial-value:#ff6fb0}@property --fx-b{syntax:"<color>";inherits:true;initial-value:#f0479b}@property --fx-base{syntax:"<color>";inherits:true;initial-value:#cc3c91}@property --fx-near{syntax:"<color>";inherits:true;initial-value:#c23a90}@property --fx-far{syntax:"<color>";inherits:true;initial-value:#4c1e78}:root,.hero[data-face=drumfx],[data-app=drumfx]{--g1:#7f52f5;--g2:#e95c9d;--accent:#a27dff;--accent-2:#ff5fa8;--fx-t:#ffb3d6;--fx-m:#ff6fb0;--fx-b:#f0479b;--fx-base:#cc3c91;--fx-near:#c23a90;--fx-far:#4c1e78;--grad:linear-gradient(90deg, var(--g1), var(--g2))}.page-beatfx,.hero[data-face=beatfx],[data-app=beatfx]{--g1:#5b7cff;--g2:#ff5bd2;--accent:#8d9eff;--accent-2:#ff6bd6;--fx-t:#dfe5ff;--fx-m:#93a3ff;--fx-b:#6f72ff;--fx-base:#6670ee;--fx-near:#5b66ea;--fx-far:#1f1c6a;--grad:linear-gradient(90deg, var(--g1), var(--g2))}.hero{transition:--g1 .9s,--g2 .9s,--accent .9s,--accent-2 .9s,--fx-t .9s,--fx-m .9s,--fx-b .9s,--fx-base .9s,--fx-near .9s,--fx-far .9s}:root{--bg:#0a0b0e;--ink:#eef0f4;--ink-2:#b4b9c3;--ink-3:#7c828e;--line:#ffffff14;--line-2:#ffffff24;--ease:cubic-bezier(.16, 1, .3, 1);--pad:clamp(20px, 4vw, 40px);--display:"Jost Variable", "Pretendard Variable", system-ui, sans-serif;--text:"Pretendard Variable", system-ui, -apple-system, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:72px}body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;overflow-x:hidden}a{color:inherit}img,video{max-width:100%;height:auto;display:block}button{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}.wrap{width:100%;max-width:calc(1200px + 2 * var(--pad));padding:0 var(--pad);margin:0 auto}.skip{z-index:100;background:var(--ink);color:var(--bg);border-radius:8px;padding:10px 14px;font-weight:600;text-decoration:none;position:fixed;top:12px;left:12px;translate:0 -200%}.skip:focus{translate:none}.eyebrow{font:600 13px/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}h2{font:600 clamp(32px, 4.2vw, 52px) / 1.08 var(--display);letter-spacing:-.02em;text-wrap:balance;margin:0}h3{font:600 clamp(24px, 2.4vw, 32px) / 1.15 var(--display);letter-spacing:-.01em;text-wrap:balance;margin:0 0 14px}p{text-wrap:pretty}.wordmark{font-family:var(--display);white-space:nowrap}.wordmark i{font-style:italic;font-weight:700}.wordmark b{color:var(--accent);letter-spacing:-.02em;font-weight:650}.glow,.title .wordmark i{color:#fff;text-shadow:0 0 18px color-mix(in srgb, var(--accent) 38%, transparent), 0 0 48px color-mix(in srgb, var(--accent) 20%, transparent)}em.glow{text-shadow:0 0 18px color-mix(in srgb, var(--accent-2) 38%, transparent), 0 0 48px color-mix(in srgb, var(--accent-2) 20%, transparent)}.title .wordmark b{letter-spacing:-.01em;text-transform:lowercase;color:var(--fx-base);text-shadow:.0045em .0065em 0 var(--fx-near), .009em .013em 0 color-mix(in oklab, var(--fx-near) 86%, var(--fx-far)), .0135em .0195em 0 color-mix(in oklab, var(--fx-near) 71%, var(--fx-far)), .018em .026em 0 color-mix(in oklab, var(--fx-near) 57%, var(--fx-far)), .0225em .0325em 0 color-mix(in oklab, var(--fx-near) 43%, var(--fx-far)), .027em .039em 0 color-mix(in oklab, var(--fx-near) 29%, var(--fx-far)), .0315em .0455em 0 color-mix(in oklab, var(--fx-near) 14%, var(--fx-far)), .036em .052em 0 var(--fx-far), .05em .085em .06em #08041299, 0 0 .45em color-mix(in srgb, var(--accent-2) 28%, transparent);margin-left:.03em;font-size:1.5em;font-style:italic;font-weight:700;line-height:.7;position:relative}.title .wordmark b:before{content:"FX";background:linear-gradient(180deg, var(--fx-t) 18%, var(--fx-m) 50%, var(--fx-b) 82%);color:#0000;text-shadow:none;pointer-events:none;-webkit-background-clip:text;background-clip:text;padding:.4em .2em;position:absolute;inset:-.4em -.2em}em.glow{font-style:normal}.pulse{transform:perspective(700px) translate3d(0, calc(var(--k,0) * -3px), 0) rotateX(calc(var(--k,0) * 9deg)) scale(calc(1 + var(--k,0) * .02));transform-origin:50% 85%;will-change:transform;display:inline-block}h2.pulse{display:block}.title .wordmark b.pulse{transform:scale(calc(1 + var(--k,0) * .05));transform-origin:50% 62%;position:relative}.title .wordmark b.pulse:after{content:"FX";color:#0000;text-shadow:0 0 10px #ffffffb3, 0 0 26px var(--flare), 0 0 64px color-mix(in srgb, var(--flare) 70%, transparent);opacity:var(--k,0);pointer-events:none;--flare:var(--accent);padding:.4em .2em;position:absolute;inset:-.4em -.2em}.title .wordmark b.pulse[data-down]:after{--flare:var(--accent-2)}.mark{flex:none;width:24px;height:24px;display:block}.mark rect{fill:var(--ink);opacity:.22}.mark rect.lit{fill:var(--accent);opacity:1}.btn{background:var(--grad);height:48px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb, color-mix(in srgb, var(--accent) 45%, #fff) 55%, transparent), inset 0 1px 0 #ffffff4d, 0 0 0 3px #0c0a18e6, 0 6px 18px color-mix(in srgb, var(--g1) 28%, transparent);color:#fff;font:600 16px/1 var(--display);cursor:pointer;transition:filter .2s, transform .2s var(--ease);border:0;border-radius:12px;align-items:center;gap:10px;padding:0 20px;text-decoration:none;display:inline-flex}.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(1px)}.btn svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}.btn svg .solid{fill:currentColor;stroke:none}.btn-quiet{box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink);background:#ffffff0a}.btn-quiet:hover{filter:none;background:#ffffff14}.btn .dur{border-left:1px solid var(--line-2);color:var(--ink-3);font-variant-numeric:tabular-nums;padding-left:10px;font-weight:500}.btn-small{border-radius:10px;height:36px;padding:0 14px;font-size:14px}.nav{z-index:20;height:64px;padding:0 var(--pad);border-bottom:1px solid #0000;align-items:center;gap:28px;transition:background .3s,border-color .3s;display:flex;position:fixed;inset:0 0 auto}.nav.scrolled{border-bottom-color:var(--line);-webkit-backdrop-filter:blur(16px)saturate(140%);backdrop-filter:blur(16px)saturate(140%);background:#0a0b0ed1}.brand{align-items:center;gap:10px;text-decoration:none;display:flex}.brand .wordmark{font-size:20px;line-height:1}.app-links{border-left:1px solid var(--line-2);align-items:center;gap:4px;margin-left:-8px;padding-left:18px;display:flex}.app-link{height:32px;color:var(--ink-2);border-radius:8px;align-items:center;padding:0 10px;text-decoration:none;transition:background .2s,color .2s;display:inline-flex}.app-link .wordmark{font-size:16px;line-height:1}.app-link:hover,.app-link:focus-visible{background:color-mix(in srgb, var(--g1) 14%, transparent);color:var(--ink)}.links{gap:24px;margin-right:auto;font-size:15px;display:flex}.links a{color:var(--ink-2);text-decoration:none;transition:color .2s}.links a:hover{color:var(--ink)}.nav-end{align-items:center;gap:10px;display:flex}.music-key{height:36px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2);font:600 14px/1 var(--display);cursor:pointer;background:#ffffff0a;border:0;border-radius:10px;align-items:center;gap:8px;padding:0 12px;transition:background .2s,color .2s;display:inline-flex}.whoami{height:36px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2);font:600 14px/1 var(--display);letter-spacing:.02em;background:#ffffff0a;border-radius:10px;align-items:center;gap:8px;padding:0 14px 0 6px;text-decoration:none;transition:background .2s,color .2s,box-shadow .2s;display:inline-flex}.maker{object-fit:cover;width:24px;height:24px;box-shadow:0 0 0 1px var(--line-2);border-radius:50%;flex:none;display:block}.whoami:hover,.whoami:focus-visible{background:color-mix(in srgb, var(--g1) 12%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, color-mix(in srgb, var(--accent) 70%, #fff) 50%, transparent);color:var(--ink)}.music-key:hover,.music-key[aria-pressed=true]{color:var(--ink);background:#ffffff14}.eq{align-items:flex-end;gap:2px;width:16px;height:14px;display:inline-flex}.eq i{transform-origin:50% 100%;height:100%;transform:scaleY(var(--rest));background:currentColor;border-radius:1px;flex:1;transition:transform .12s linear}.eq i:first-child{--rest:.45}.eq i:nth-child(2){--rest:.85}.eq i:nth-child(3){--rest:.6}.eq i:nth-child(4){--rest:.3}[aria-pressed=true] .eq i{background:var(--accent)}.hero{--hero-p:0;--beat:0;isolation:isolate;align-items:center;min-height:min(100svh,1000px);padding:120px 0 96px;display:flex;position:relative;overflow:hidden}.hero:before{content:"";z-index:-2;background:radial-gradient(40% 45% at 72% 62%, color-mix(in srgb, var(--accent-2) calc((.07 + var(--beat) * .07) * 100%), transparent), transparent 70%), radial-gradient(50% 55% at 60% 50%, color-mix(in srgb, var(--g1) calc((.13 + var(--beat) * .1) * 100%), transparent), transparent 70%);position:absolute;inset:-10% -20% -10% 25%}.hero:after{content:"";z-index:-1;background:linear-gradient(transparent, var(--bg));pointer-events:none;height:28%;position:absolute;inset:auto 0 0}.hero-stage{z-index:-1;perspective:2400px;perspective-origin:70% 45%;pointer-events:none;transform:translateY(calc(var(--hero-p) * -60px));position:absolute;inset:0}.hero-rig{transform-style:preserve-3d;transform-origin:40%;transform:rotateY(var(--tilt-y,0deg)) rotateX(var(--tilt-x,0deg));position:absolute;inset:0}.hero-screen{aspect-ratio:1440/900;width:min(64vw,1088px);box-shadow:0 0 0 1px var(--line-2), 0 80px 140px -40px #000000e6;transform-origin:0;transition:transform 1.8s var(--ease), opacity 1.2s ease, filter 1.2s ease;background:#0c0e12;border-radius:16px;position:absolute;top:50%;left:40%;overflow:hidden;transform:translateY(-50%)rotateY(-24deg)rotateX(9deg)rotate(2deg);-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 16% 72%,#00000073 100%);mask-image:linear-gradient(90deg,#0000 0,#000 16% 72%,#00000073 100%)}.hero-screen.back{opacity:.5;filter:brightness(.55)saturate(.7);pointer-events:auto;cursor:pointer;transform:translate3d(12%,-66%,-420px)rotateY(-24deg)rotateX(9deg)rotate(2deg)}.hero-screen.back:hover{opacity:.68;filter:brightness(.7)saturate(.85)}.hero-screen video{object-fit:cover;width:100%;height:100%}.hero-copy{opacity:calc(1 - var(--hero-p) * 1.1);position:relative}.hero-copy>*{max-width:540px}.title{letter-spacing:-.015em;transition:clip-path 1.3s var(--ease) .2s;clip-path:inset(-45% -12% -45% -6%);margin:0 0 18px;font-size:clamp(52px,6.4vw,92px);line-height:1}.eyebrow+.title{padding-top:.22em}.tagline{font:500 clamp(22px, 2.3vw, 30px) / 1.25 var(--display);letter-spacing:-.01em;color:var(--ink);margin:0 0 22px}.tagline em{font-style:normal}.lede{color:var(--ink-2);margin:0 0 34px;font-size:18px;line-height:1.65}.actions{flex-wrap:wrap;gap:12px;display:flex}.sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.eyebrow a{color:var(--ink-2);text-decoration:none}.eyebrow a:hover{color:var(--ink)}.app-switch{isolation:isolate;box-shadow:inset 0 0 0 1px var(--line);background:#ffffff09;border-radius:14px;gap:4px;margin:0 0 32px;padding:4px;display:inline-flex;position:relative}@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}.app-switch:before,.app-switch:after{content:"";background:conic-gradient(from var(--spin), transparent 0 52%, var(--g1) 70%, var(--g2) 84%, transparent 96%);pointer-events:none;border-radius:15px;animation:4.8s linear infinite switch-spin;position:absolute;inset:-1px}.app-switch:before{-webkit-mask-composite:xor;padding:1px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor,source-over;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}.app-switch:after{z-index:-1;filter:blur(14px);-webkit-mask-composite:xor;opacity:.35;background-origin:content-box;background-clip:content-box;border-radius:54px;padding:40px;animation:4.8s linear infinite switch-spin,2.4s ease-in-out infinite alternate switch-breathe;inset:-41px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor,source-over;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}@keyframes switch-spin{to{--spin:360deg}}@keyframes switch-breathe{0%{opacity:.18}to{opacity:.5}}.app-switch button{--run:0;isolation:isolate;min-width:132px;color:var(--ink-3);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:10px;gap:3px;padding:8px 14px 10px;transition:background .3s,color .3s,box-shadow .3s;display:grid;position:relative;overflow:hidden}.app-switch button:hover{color:var(--ink-2)}.app-switch button.pulse{will-change:auto;transform:none}.app-switch [aria-selected=true].pulse{transform:translateY(calc(var(--k,0) * -1.5px))}.app-switch button:before{content:"";z-index:-1;border-radius:inherit;pointer-events:none;position:absolute;inset:0}.app-switch [aria-selected=true]:before{background:radial-gradient(120% 140% at 20% 0%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent);opacity:calc(.25 + var(--k,0) * .75)}.app-switch [aria-selected=false]:before{animation:key-sheen 3.8s var(--ease) 1.6s infinite;background:linear-gradient(105deg,#0000 30%,#ffffff29 48%,#ffffff0a 56%,#0000 70%);transform:translate(-110%)}@keyframes key-sheen{0%{transform:translate(-110%)}40%,to{transform:translate(110%)}}.app-switch [aria-selected=true] .wordmark b{transform:scale(calc(1 + var(--k,0) * .14));transform-origin:30% 70%;text-shadow:0 0 calc(var(--k,0) * 14px) var(--accent);display:inline-block}.app-switch .wordmark{font-size:17px;line-height:1}.app-switch .wordmark b{color:var(--ink-3);transition:color .3s}.app-switch [data-face=drumfx] .wordmark b{--accent:#a27dff}.app-switch [data-face=beatfx] .wordmark b{--accent:#8d9eff}.app-switch [aria-selected=true] .wordmark b,.app-switch button:hover .wordmark b{color:var(--accent)}.app-switch small{letter-spacing:.01em;font-size:12px;line-height:1.2}.app-switch [aria-selected=true]{box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink);background:#ffffff12}.app-switch button:after{content:"";background:var(--grad);transform-origin:0;height:2px;transform:scaleX(var(--run));opacity:0;transition:transform var(--beat-s,.6s) linear, opacity .4s;border-radius:1px;position:absolute;bottom:4px;left:12px;right:12px}.hero[data-auto]:not(.picked) .app-switch [aria-selected=true]:after{opacity:.9}.hero.holding .app-switch button:after{opacity:.35!important}.app-switch [aria-selected=false]:after{transition:opacity .2s}.title .roll.pulse{vertical-align:baseline;perspective:600px;transition:width .8s var(--ease);justify-items:start;display:inline-grid}.title .roll i{transform-origin:50% 50% -.3em;opacity:0;transition:transform .8s var(--ease), opacity .45s ease;grid-area:1/1;transform:translateY(.55em)rotateX(-70deg)}.title .roll i.on{opacity:1;transition-delay:.12s;transform:none}.title .roll i.left{transform:translateY(-.55em)rotateX(70deg)}.faces{display:grid}.face{transition:opacity .6s var(--ease) .15s, transform .8s var(--ease) .15s, visibility 0s linear .15s;grid-area:1/1}.face:not(.on){opacity:0;visibility:hidden;transition:opacity .35s ease, transform .5s var(--ease), visibility 0s linear .35s;transform:translateY(14px)}.face .lede{margin-bottom:30px}.tracks-note [data-face]:not(.on){display:none}.more{color:var(--ink-2);font:600 15px/1.2 var(--display);align-items:center;gap:6px;margin-top:16px;text-decoration:none;transition:color .2s;display:inline-flex}.more svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:16px;height:16px;transition:transform .3s var(--ease)}.more:hover,a:hover .more{color:var(--ink)}.more:hover svg,a:hover .more svg{transform:translate(3px)}.plays{height:48px;color:var(--ink-3);font:500 14px/1.2 var(--display);align-items:center;gap:8px;padding:0 4px;display:inline-flex}.plays svg{fill:none;width:20px;height:20px;stroke:var(--accent);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}.tour-key[data-face]{transition:background .2s, transform .3s var(--ease), opacity .5s ease, visibility 0s linear 0s}.tour-key[data-face]:not(.on){opacity:0;visibility:hidden;transition:opacity .3s ease, transform .3s var(--ease), visibility 0s linear .3s;transform:translateY(10px)}a.tour-key{color:inherit;text-decoration:none}.drop{cursor:pointer;height:48px;transition:background .2s, transform .2s var(--ease);border-radius:12px;align-items:center;gap:10px;padding:0 16px 0 14px;display:inline-flex;position:relative}.drop:before{content:"";pointer-events:none;border:1.5px dashed #ffffff57;border-radius:12px;transition:border-color .2s;position:absolute;inset:0}.drop:hover,.drop:focus-within,.dragging .drop{background:color-mix(in srgb, var(--g1) 10%, transparent)}.drop:hover:before,.drop:focus-within:before,.dragging .drop:before{border-color:var(--accent)}.drop:focus-within{outline:2px solid var(--accent);outline-offset:3px}.drop svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px;color:var(--accent);flex:none}.drop-text{text-align:left;gap:1px;display:grid}.drop-text b{font:600 15px/1.15 var(--display)}.drop-text small{color:var(--ink-3);font-size:12px;line-height:1.2}.drop-input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.drop.busy{cursor:progress}.drop.busy svg{animation:rise-up .9s var(--ease) infinite}.drop.wrong:before{border-color:#ff8a7a}.drop.wrong small{color:#ffb4a8}@keyframes rise-up{0%{opacity:.4;transform:translateY(4px)}}.dropzone{z-index:60;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;pointer-events:none;background:#08090cb8;place-items:center;padding:24px;transition:opacity .2s,visibility 0s linear .2s;display:grid;position:fixed;inset:0}.dragging .dropzone{opacity:1;visibility:visible;transition:opacity .2s}.dropzone>div{border:2px dashed var(--accent);background:color-mix(in srgb, var(--g1) 8%, transparent);text-align:center;width:min(560px,100%);transition:transform .3s var(--ease);border-radius:20px;justify-items:center;gap:10px;padding:56px 32px;display:grid;transform:scale(.97)}.dragging .dropzone>div{transform:none}.dropzone svg{fill:none;width:40px;height:40px;stroke:var(--accent);stroke-width:1.4px;stroke-linecap:round;stroke-linejoin:round}.dropzone b{font:600 26px/1.2 var(--display)}.dropzone span{color:var(--ink-2)}.tracks{max-width:420px;margin-top:30px}.tracks-cap{font:600 12px/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px 10px}.track-list{gap:2px;margin:0;padding:0;list-style:none;display:grid}.track{--progress:0;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:10px;grid-template-columns:36px minmax(0,1fr) auto 18px;align-items:center;gap:12px;width:100%;padding:7px 12px 7px 7px;transition:background .2s;display:grid;position:relative}.track:hover{background:#ffffff0a}.track[aria-current=true]{box-shadow:inset 0 0 0 1px var(--line);background:#ffffff0f}.track img{object-fit:cover;border-radius:6px;width:36px;height:36px;transition:box-shadow .1s linear}.track[aria-pressed=true] img{box-shadow:0 0 0 calc(1px + var(--beat) * 3px) color-mix(in srgb, var(--g1) 55%, transparent)}.track-name{font:600 15px/1.25 var(--display);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.track-time{color:var(--ink-3);font-variant-numeric:tabular-nums;font-size:13px}.track-icon{color:var(--ink-2);place-items:center;display:grid}.track-icon svg{fill:currentColor;width:16px;height:16px}.track .i-pause,.track[aria-pressed=true] .i-play{display:none}.track[aria-pressed=true] .i-pause{display:inline}.track[aria-pressed=true] .track-icon{color:var(--accent)}.track-bar{background:var(--grad);transform-origin:0;height:2px;transform:scaleX(var(--progress));opacity:0;border-radius:1px;position:absolute;bottom:2px;left:12px;right:12px}.track[aria-current=true] .track-bar{opacity:1}.tracks-note{color:var(--ink-3);margin:10px 0 0 10px;font-size:13px}.hero-screen video{transition:opacity .35s}.hero-screen.switching video{opacity:.25}.tour-key{box-shadow:inset 0 0 0 1px var(--line-2), 0 20px 40px -12px #000000b3;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);text-align:left;cursor:pointer;transition:background .2s, transform .3s var(--ease);background:#0a0b0ea8;border:0;border-radius:999px;align-items:center;gap:12px;padding:8px 18px 8px 8px;display:flex;position:absolute;bottom:15%;left:51%}.tour-key:hover{background:#0a0b0ed1;transform:translateY(-2px)}.tour-play{width:44px;height:44px;color:var(--bg);transition:transform .3s var(--ease);background:#fff;border-radius:50%;place-items:center;display:grid}.tour-key:hover .tour-play{transform:scale(1.06)}.tour-play svg{fill:currentColor;width:18px;height:18px;margin-left:2px}.tour-text{gap:2px;display:grid}.tour-text b{font:600 15px/1.2 var(--display)}.tour-text small{color:var(--ink-3);font-size:13px}.motion-key{right:var(--pad);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-3);cursor:pointer;background:#0a0b0e99;border:0;border-radius:999px;padding:6px 12px;font-size:13px;position:absolute;bottom:28px}.motion-key:hover{color:var(--ink)}.enter{transition:opacity .9s var(--ease) calc(var(--d) * 70ms + .15s), transform 1s var(--ease) calc(var(--d) * 70ms + .15s)}.js:not(.is-ready) .enter{opacity:0;transform:translateY(18px)}.js:not(.is-ready) .title{clip-path:inset(-45% 100% -45% -6%)}.js:not(.is-ready) .hero-screen{opacity:0;transform:translateY(-50%)translate(8vw)rotateY(-40deg)rotateX(16deg)rotate(5deg)}.section-head{max-width:760px;margin-bottom:clamp(40px,7vh,72px)}.section-head>p:not(.eyebrow){color:var(--ink-2);margin:18px 0 0;font-size:18px}.reveal{transition:opacity .9s var(--ease), transform 1s var(--ease)}.js .reveal:not(.shown){opacity:0;transform:translateY(24px)}.story{padding-top:clamp(96px,16vh,180px);padding-bottom:clamp(64px,10vh,120px)}.story-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start;gap:clamp(32px,5vw,80px);display:grid}.chapters{margin:0;padding:0;list-style:none}.chapter{opacity:.3;flex-direction:column;justify-content:center;min-height:74vh;padding:6vh 0;transition:opacity .5s;display:flex}.chapter.on{opacity:1}.chapter .step{font:600 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 12px}.chapter p:not(.step){max-width:44ch;color:var(--ink-2);margin:0}.chapter-shot{display:none}.story-stage{perspective:2400px;position:sticky;top:calc(50vh - min(24vw,290px))}.story-screen{aspect-ratio:16/10;box-shadow:0 0 0 1px var(--line-2), 0 50px 100px -40px #000000e6;transform-origin:0;transform:rotateY(calc(-5deg + var(--ry,0deg))) rotateX(calc(2deg + var(--rx,0deg)));background:#0c0e12;border-radius:14px;position:relative;overflow:hidden}.story-screen img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .7s var(--ease), transform 1.4s var(--ease);position:absolute;inset:0;transform:scale(1.025)}.story-screen img.on{opacity:1;transform:none}.story-rail{gap:6px;margin:18px 0 0;padding:0;list-style:none;display:flex}.story-rail li{background:var(--line-2);border-radius:1px;flex:1;height:2px;transition:background .4s}.story-rail li.on{background:var(--grad)}.modes-note{max-width:760px;color:var(--ink-2);margin:clamp(48px,10vh,120px) 0 0;font-size:18px;line-height:1.65}.modes-note b{color:var(--ink);font-weight:600}.phones{--p:.5;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(32px,5vw,80px);padding-top:clamp(64px,12vh,140px);padding-bottom:clamp(64px,12vh,140px);display:grid}.phones-copy p:not(.eyebrow){max-width:40ch;color:var(--ink-2);margin:18px 0 0;font-size:18px}.phones-pair{justify-content:center;align-items:flex-start;gap:clamp(16px,3vw,40px);display:flex}.phone img{width:100%}.phone{width:min(250px,38vw);box-shadow:0 0 0 1px var(--line-2), 0 40px 80px -30px #000000e6;transform:perspective(1200px) translateY(calc((.5 - var(--p)) * 40px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));background:#000;border-radius:30px;margin:0;position:relative;overflow:hidden}.phone+.phone{transform:translateY(calc((.5 - var(--p)) * -40px));margin-top:12vh}.watch{padding-top:clamp(64px,12vh,140px);padding-bottom:clamp(64px,10vh,120px)}.poster{aspect-ratio:16/9;width:100%;box-shadow:0 0 0 1px var(--line-2), 0 50px 100px -40px #000000e6;cursor:pointer;transform:perspective(1800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));background:#000;border:0;border-radius:16px;padding:0;display:block;position:relative;overflow:hidden}.poster img{object-fit:cover;width:100%;height:100%;transition:transform 1.6s var(--ease), filter .6s}.poster:hover img{filter:brightness(1.08);transform:scale(1.02)}.poster .play{z-index:2;width:64px;height:64px;color:var(--bg);transition:transform .4s var(--ease);background:#fff;border-radius:50%;place-items:center;display:grid;position:absolute;bottom:28px;left:28px}.poster:hover .play{transform:scale(1.06)}.poster .play svg{fill:currentColor;width:24px;height:24px;margin-left:3px}.poster-cap{z-index:2;font:600 14px/1 var(--display);letter-spacing:.04em;color:var(--ink);position:absolute;bottom:50px;left:106px}.player{aspect-ratio:16/9;width:min(1200px,92vw);max-height:90vh;color:var(--ink);background:#000;border:0;border-radius:16px;padding:0;overflow:visible;box-shadow:0 60px 140px -30px #000000e6}.player[open]{animation:rise .5s var(--ease)}.player::backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#050608d6}@keyframes rise{0%{opacity:0;transform:translateY(16px)scale(.98)}}.player-frame,.player-frame iframe{border:0;border-radius:16px;width:100%;height:100%}.player-close{cursor:pointer;background:#ffffff1f;border:0;border-radius:50%;place-items:center;width:36px;height:36px;display:grid;position:absolute;top:-48px;right:0}.player-close svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;width:16px;height:16px}.close{text-align:center;padding-top:clamp(80px,16vh,180px);padding-bottom:clamp(80px,16vh,180px)}.close h2{font-size:clamp(36px,5vw,64px)}.close p{color:var(--ink-2);margin:18px auto 32px;font-size:18px}.foot{border-top:1px solid var(--line);padding:40px 0 max(40px, env(safe-area-inset-bottom));color:var(--ink-3);font-size:14px}.foot-grid{grid-template-columns:1.2fr 1fr 2fr;align-items:start;gap:32px;display:grid}.foot-brand p{margin:12px 0 0}.foot nav{gap:10px;display:grid}.foot a{text-decoration:none}.foot nav a:hover{color:var(--ink)}.credits{margin:0;line-height:1.6}.glass:after{content:"";z-index:1;border-radius:inherit;pointer-events:none;background:radial-gradient(60% 50% at var(--gx,30%) var(--gy,0%), #ffffff0f, transparent 70%), linear-gradient(115deg, transparent calc(var(--gx,30%) - 22%), #ffffff0d calc(var(--gx,30%) - 6%), #ffffff03 var(--gx,30%), transparent calc(var(--gx,30%) + 14%)), linear-gradient(180deg, #ffffff06, transparent 40%);mix-blend-mode:screen;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff0f,inset 0 1px #ffffff24}[data-tilt]{will-change:transform}.reveal.tilt-live{transition:opacity .9s var(--ease)}img.chapter-shot[data-tilt]{transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}.apps{padding-top:clamp(40px,8vh,96px);padding-bottom:clamp(24px,4vh,48px)}.app-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin:0;padding:0;list-style:none;display:grid}.app-card{box-shadow:inset 0 0 0 1px var(--line), 0 40px 80px -40px #000000e6;transform:perspective(1600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));background:linear-gradient(#ffffff0d,#ffffff04);border-radius:20px;flex-direction:column;display:flex;position:relative;overflow:hidden}.app-shot{aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid var(--line);width:100%}.app-copy{z-index:2;flex-direction:column;flex:1;align-items:flex-start;padding:clamp(20px,2.4vw,32px);display:flex;position:relative}.app-name{margin:0 0 6px;font-size:clamp(28px,2.8vw,36px)}.app-what{color:var(--ink);font:500 18px/1.4 var(--display);margin:0}.app-facts{color:var(--ink-2);gap:8px;margin:16px 0 24px;padding:0;font-size:15.5px;line-height:1.5;list-style:none;display:grid}.app-facts li{padding-left:18px;position:relative}.app-facts li:before{content:"";background:var(--accent);border-radius:2px;width:6px;height:6px;position:absolute;top:.62em;left:0}.app-copy .btn{margin-top:auto}.close-keys{flex-wrap:wrap;justify-content:center;gap:14px;display:inline-flex}.flow{padding-top:clamp(40px,8vh,96px);padding-bottom:clamp(64px,12vh,140px)}.flow-steps{perspective:1400px;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px);margin:0;padding:0;list-style:none;display:grid;position:relative}.flow-steps:before,.flow-steps:after{content:"";background:var(--line-2);border-radius:1px;height:2px;position:absolute;top:-18px;left:4%;right:4%}.flow-steps:after{width:calc(92% * var(--run,0));background:var(--grad);box-shadow:0 0 14px color-mix(in srgb, var(--accent) 70%, transparent);transition:width .9s var(--ease);right:auto}.flow-step{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));position:relative}.flow-card{width:100%;height:100%;box-shadow:inset 0 0 0 1px var(--line), 0 30px 60px -30px #000c;color:var(--ink-2);font:inherit;text-align:left;cursor:pointer;transition:box-shadow .5s var(--ease), background .5s, transform .5s var(--ease);background:linear-gradient(#ffffff0d,#ffffff04);border:0;border-radius:18px;flex-direction:column;gap:8px;padding:20px 20px 22px;display:flex;position:relative;overflow:hidden}.flow-step.on .flow-card{background:linear-gradient(180deg, color-mix(in srgb, var(--g1) 14%, transparent), color-mix(in srgb, var(--accent-2) 4%, transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb, color-mix(in srgb, var(--accent) 70%, #fff) 45%, transparent), 0 0 40px -6px color-mix(in srgb, var(--g1) 45%, transparent), 0 30px 60px -30px #000c;transform:translateY(-6px)}.flow-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.flow-card b{z-index:2;color:var(--ink);font:600 19px/1.25 var(--display);position:relative}.flow-card small{z-index:2;font-size:14.5px;line-height:1.5;position:relative}.flow-num{z-index:2;width:24px;height:24px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2);font:700 12px/1 var(--display);background:#1a1830;border-radius:50%;place-items:center;transition:background .4s,color .4s,box-shadow .4s;display:grid;position:relative}.flow-step.on .flow-num,.flow-step.done .flow-num{background:var(--grad);box-shadow:0 0 12px color-mix(in srgb, var(--accent-2) 55%, transparent);color:#fff}.flow-or{z-index:2;background:color-mix(in srgb, var(--accent-2) 14%, transparent);color:#ff9ccb;font:600 11px/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:4px 9px;position:absolute;top:20px;right:18px}.flow-art{z-index:2;background:#00000047;border-radius:12px;flex-direction:column;justify-content:center;gap:8px;height:128px;margin:8px 0 10px;padding:12px;display:flex;position:relative;box-shadow:inset 0 0 0 1px #ffffff0d}.wave{align-items:center;gap:2px;height:34px;display:flex}.wave i{min-width:2px;height:calc(var(--h) * 100%);transform:scaleY(calc(.55 + var(--b,0) * .45));background:linear-gradient(#c2acff,#7f52f5);border-radius:1px;flex:1;transition:transform .18s ease-out}.wave.dim i{background:#ffffff38}.wave.hot i{background:linear-gradient(#ff9ccb,#e95c9d)}.file-chip{box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink);font:600 12px/1 var(--display);background:#ffffff12;border-radius:8px;align-self:flex-start;align-items:center;gap:8px;padding:6px 10px 6px 6px;display:inline-flex}.file-chip i{background:var(--grad);border-radius:3px;width:18px;height:22px}.flow-step.on .file-chip{animation:drop-in 1.6s var(--ease) infinite}@keyframes drop-in{0%{opacity:0;transform:translateY(-26px)}30%,80%{opacity:1;transform:none}to{opacity:0;transform:translateY(6px)}}.lane,.track-lane{grid-template-columns:44px 1fr;align-items:center;gap:8px;display:grid}.track-lane{grid-template-columns:72px 1fr}.lane em,.track-lane em{font:600 10px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-style:normal}.lane .wave{height:22px}.staff{background:repeating-linear-gradient(#ffffff29 0 1px,#0000 1px 6px);height:26px;margin-top:2px;position:relative}.staff i{left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);opacity:.25;background:#fff;border-radius:50%;width:8px;height:6px;margin:-3px 0 0 -4px;transition:opacity .3s,box-shadow .3s;position:absolute;transform:rotate(-20deg)}.staff i.lit{opacity:1;box-shadow:0 0 8px color-mix(in srgb, var(--accent-2) 90%, transparent)}.grid{grid-template-columns:repeat(8,1fr);gap:4px;display:grid}.grid i{aspect-ratio:1.5;transition:background .25s, box-shadow .25s, transform .25s var(--ease);background:#ffffff0f;border-radius:3px}.grid i.on{background:linear-gradient(#b69cff,#7f52f5)}.grid i.on.sn{background:linear-gradient(#ff9ccb,#e95c9d)}.grid i.head{box-shadow:0 0 0 1px #ffffff80}.grid i.on.head{transform:scale(1.12);box-shadow:0 0 14px #fff9}.grid i.tap{box-shadow:0 0 0 2px #fff}.grid i.flip{animation:flip .45s var(--ease)}@keyframes flip{0%{transform:rotateX(90deg)}}.style-tag{background:color-mix(in srgb, var(--accent) 16%, transparent);color:#cdb9ff;font:600 11px/1.2 var(--display);letter-spacing:.06em;border-radius:6px;align-self:flex-start;padding:3px 8px}.flow-finale{background:linear-gradient(90deg, color-mix(in srgb, var(--g1) 16%, transparent), color-mix(in srgb, var(--g2) 10%, transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb, color-mix(in srgb, var(--accent) 70%, #fff) 28%, transparent), 0 30px 60px -30px #000c;transform:perspective(1600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));border-radius:18px;grid-template-columns:minmax(200px,1fr) 2fr auto;align-items:center;gap:clamp(16px,3vw,40px);margin-top:clamp(20px,3vw,32px);padding:22px clamp(20px,3vw,32px);display:grid;position:relative;overflow:hidden}.flow-finale.on{box-shadow:inset 0 0 0 1px color-mix(in srgb, color-mix(in srgb, var(--accent-2) 55%, #fff) 50%, transparent), 0 0 50px -10px color-mix(in srgb, var(--accent-2) 50%, transparent), 0 30px 60px -30px #000c}.finale-copy,.finale-tracks,.finale-kit{z-index:2;position:relative}.finale-copy .eyebrow{margin:0 0 6px}.finale-title{color:#fff;font:600 clamp(20px, 2vw, 26px) / 1.2 var(--display);text-shadow:0 0 18px color-mix(in srgb, var(--accent) 40%, transparent);margin:0}.finale-tracks{gap:8px;display:grid}.finale-tracks .wave{height:24px}.finale-head{top:-4px;bottom:-4px;left:calc(80px + (100% - 80px) * var(--at,0));background:#fff;border-radius:1px;width:2px;position:absolute;box-shadow:0 0 10px #fff}.finale-kit{gap:8px;display:flex}.finale-kit i{width:40px;height:40px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-3);font:700 10px/1 var(--display);transition:background .3s, box-shadow .3s, color .3s, transform .3s var(--ease);background:#ffffff0d;border-radius:50%;place-items:center;font-style:normal;display:grid}.finale-kit i.hit{background:var(--grad);box-shadow:0 0 18px color-mix(in srgb, var(--accent-2) 70%, transparent);color:#fff;transition-duration:40ms;transform:scale(1.1)}.app-kind{color:var(--accent);font:600 12px/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;margin:0 0 4px}.app-keys{flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:auto;display:flex}.app-keys .more{margin:0}.app-copy .app-keys .btn{margin-top:0}.together{padding-top:clamp(64px,12vh,140px);padding-bottom:clamp(32px,6vh,64px)}.pair{perspective:1600px;grid-template-columns:minmax(0,1fr) clamp(80px,10vw,140px) minmax(0,1fr);align-items:center;display:grid}.pair-shot{box-shadow:0 0 0 1px var(--line-2), 0 40px 80px -40px #000000e6;transform:rotateX(var(--rx,0deg)) rotateY(calc(var(--ry,0deg) + var(--lean,0deg)));background:#0c0e12;border-radius:16px;margin:0;position:relative;overflow:hidden}.pair-shot:first-child{--lean:6deg;transform-origin:100%}.pair-shot:last-child{--lean:-6deg;transform-origin:0}.pair-shot img{aspect-ratio:16/10;object-fit:cover;width:100%}.pair-shot figcaption{z-index:2;box-shadow:inset 0 0 0 1px var(--line-2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink-2);background:#0a0b0ec7;border-radius:10px;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:10px 14px;font-size:14px;line-height:1.3;display:flex;position:absolute;bottom:12px;left:12px;right:12px}.pair-shot figcaption .wordmark{color:var(--ink);font-size:16px}.pair-link{place-items:center;height:100%;display:grid;position:relative}.pair-line{opacity:.7;background:linear-gradient(90deg,#a27dff,#8d9eff);border-radius:1px;height:2px;position:absolute;top:50%;left:-8px;right:-8px;box-shadow:0 0 12px #a28cff99}.score-chip{color:var(--ink);font:600 12px/1 var(--display);white-space:nowrap;animation:carry 4s var(--ease) infinite;background:#15132a;border-radius:999px;align-items:center;gap:6px;padding:7px 11px 7px 9px;display:inline-flex;position:relative;box-shadow:inset 0 0 0 1px #baaaff73,0 0 24px #8c6eff59}.score-chip svg{fill:none;stroke:#c7b6ff;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:14px;height:14px}@keyframes carry{0%{opacity:0;transform:translate(-60%)}20%,80%{opacity:1}to{opacity:0;transform:translate(60%)}}.promises{border-top:1px solid var(--line);grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin:clamp(56px,9vh,96px) 0 0;padding:28px 0 0;list-style:none;display:grid}.promises li{gap:6px;display:grid}.promises b{color:var(--ink);font:600 18px/1.25 var(--display)}.promises span{color:var(--ink-3);font-size:15px;line-height:1.5}.sibling{padding-top:clamp(48px,8vh,96px)}.sibling-card{background:linear-gradient(100deg, color-mix(in srgb, var(--g1) 14%, transparent), color-mix(in srgb, var(--g2) 6%, transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 40px 80px -40px #000000e6;color:inherit;transform:perspective(1600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));border-radius:22px;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(20px,3vw,48px);padding:clamp(14px,1.6vw,20px);text-decoration:none;display:grid;position:relative}.sibling-card img{aspect-ratio:16/10;object-fit:cover;width:100%;box-shadow:0 0 0 1px var(--line-2);border-radius:12px}.sibling-copy{z-index:2;justify-items:start;gap:10px;padding-right:clamp(0px,2vw,24px);display:grid;position:relative}.sibling-copy .eyebrow{margin:0}.sibling-name{font-size:clamp(30px,3.2vw,44px);line-height:1}.sibling-what{max-width:46ch;color:var(--ink-2)}.sibling-copy .more{margin-top:6px}.run .flow-art{overflow:hidden}.art-pick{justify-content:center;gap:4px}.pick-row{color:var(--ink-3);font:600 11.5px/1.3 var(--display);border-radius:6px;grid-template-columns:6px 1fr auto;align-items:center;gap:8px;padding:4px 8px;transition:background .25s,color .25s;display:grid}.pick-row i{background:var(--line-2);border-radius:2px;width:6px;height:6px}.pick-row em{letter-spacing:.08em;text-transform:uppercase;opacity:.7;font-size:10px;font-style:normal}.pick-row.lit{background:color-mix(in srgb, var(--g1) 22%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);color:var(--ink)}.pick-row.lit i{background:var(--grad)}.art-fall{flex-direction:row;justify-content:space-around;align-items:stretch;gap:6px;padding:0 12px}.fall-lane{border-left:1px solid #ffffff0d;border-right:1px solid #ffffff0d;flex:1;position:relative}.fall-lane i{background:var(--lane);height:8px;box-shadow:0 0 10px var(--lane);border-radius:4px;animation:2.4s linear infinite fall;position:absolute;left:12%;right:12%}.fall-lane i:nth-child(2){animation-delay:-1.2s}.fall-lane:nth-child(2) i{animation-duration:3s}.fall-lane:nth-child(3) i{animation-duration:3.6s;animation-delay:-.6s}.fall-lane:nth-child(3) i:nth-child(2){animation-delay:-2.4s}.fall-lane:nth-child(4) i{animation-duration:2.7s;animation-delay:-1.8s}[data-lane=hh]{--lane:#7fe3ff}[data-lane=sn]{--lane:#ff8ad8}[data-lane=t1]{--lane:#ffd36b}[data-lane=kk]{--lane:#9d8cff}@keyframes fall{0%{top:-10%}to{top:100%}}.fall-line{opacity:.8;background:#fff;border-radius:1px;height:2px;position:absolute;bottom:26px;left:8px;right:8px;box-shadow:0 0 10px #fff}.fall-lane:after{content:"";background:radial-gradient(closest-side, var(--lane), transparent);opacity:0;border-radius:50%;height:18px;position:absolute;bottom:18px;left:0;right:0}.fall-lane.land:after{animation:.45s ease-out land}@keyframes land{0%{opacity:.9;transform:scale(1.3)}}.art-play{align-items:center;gap:12px}.verdict{font:700 italic 22px/1 var(--display);letter-spacing:.02em;color:#4dffc3;text-shadow:0 0 16px #4dffc38c;opacity:.35}.verdict[data-verdict=early]{color:#7fc8ff;text-shadow:0 0 16px #7fc8ff8c}.verdict[data-verdict=late]{color:#ffb36b;text-shadow:0 0 16px #ffb36b8c}.flow-step.on .verdict{opacity:1}.verdict.pop{animation:pop .35s var(--ease)}@keyframes pop{0%{transform:scale(1.25)}}.pads{gap:8px;display:flex}.pads i{width:40px;height:40px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-3);font:700 10px/1 var(--display);transition:background .3s, box-shadow .3s, color .3s, transform .3s var(--ease);background:#ffffff0d;border-radius:50%;place-items:center;font-style:normal;display:grid}.pads i.hit{background:var(--grad);box-shadow:0 0 18px color-mix(in srgb, var(--accent-2) 70%, transparent);color:#fff;transition-duration:40ms;transform:scale(1.1)}.art-grade{flex-direction:row;align-items:center;gap:18px;padding-left:18px}.grade{font:800 italic 64px/1 var(--display);background:linear-gradient(#fff3b0,#ffc24a 55%,#ff8a3d);color:#0000;filter:drop-shadow(0 0 14px #ffbe5073);-webkit-background-clip:text;background-clip:text}.grade-counts{gap:8px;display:grid}.grade-counts span{gap:2px;display:grid}.grade-counts em{color:var(--ink-3);font:600 10px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;font-style:normal}.grade-counts b{color:var(--ink);font:700 18px/1 var(--display);font-variant-numeric:tabular-nums}.levels{padding-top:clamp(64px,10vh,120px);padding-bottom:clamp(32px,6vh,64px)}.level-list{gap:2px;margin:0;padding:0;list-style:none;display:grid}.level{background:#ffffff06;border-radius:12px;grid-template-columns:110px minmax(160px,1fr) 220px minmax(0,1.2fr);align-items:center;gap:24px;padding:18px 20px;display:grid}.level b{color:var(--ink);font:600 20px/1 var(--display)}.level-bar{background:#ffffff0d;border-radius:5px;height:10px;position:relative}.level-bar:before,.level-bar i{border-radius:5px;position:absolute;top:0;bottom:0;left:50%;translate:-50%}.level-bar:before{content:"";width:calc(var(--window) / 190 * 100%);background:color-mix(in srgb, var(--g1) 45%, transparent)}.level-bar i{width:calc(var(--perfect) / 190 * 100%);background:#4dffc3;box-shadow:0 0 12px #4dffc399}.level-ms{color:var(--ink-2);font-variant-numeric:tabular-nums;font-size:14.5px}.level small{color:var(--ink-3);font-size:14.5px;line-height:1.45}.ways{padding-top:clamp(64px,10vh,120px);padding-bottom:clamp(32px,6vh,64px)}.way-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin:0;padding:0;list-style:none;display:grid}.way{box-shadow:inset 0 0 0 1px var(--line), 0 30px 60px -30px #000c;transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));background:linear-gradient(#ffffff0d,#ffffff04);border-radius:18px;align-content:start;gap:10px;padding:24px;display:grid;position:relative}.way>svg{fill:none;width:52px;height:52px;stroke:var(--accent);stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 50%, transparent));margin-bottom:6px}.way h3{margin:0;font-size:22px}.way p{color:var(--ink-2);margin:0;font-size:15.5px;line-height:1.55}.keycaps{flex-wrap:wrap;gap:6px;min-height:58px;margin-bottom:6px;display:flex}.keycaps>span{justify-items:center;gap:4px;display:grid}.keycaps kbd{width:32px;height:32px;box-shadow:inset 0 0 0 1px var(--line-2), 0 2px 0 #0009;color:var(--ink);font:600 14px/1 var(--display);background:linear-gradient(#ffffff1f,#ffffff0a);border-radius:7px;place-items:center;display:grid}.keycaps small{color:var(--ink-3);font-size:10.5px}@media (width<=960px){.links{display:none}.nav{justify-content:space-between}.hero{padding:104px 0 88px}.hero-copy>*{max-width:min(540px,54vw)}.hero-screen{width:77vw;left:52%}.tour-key{left:auto;right:var(--pad);bottom:76px}.flow-steps{grid-template-columns:repeat(2,1fr)}.flow-steps:before,.flow-steps:after{display:none}.flow-finale,.story-grid,.phones,.app-cards,.way-cards,.sibling-card{grid-template-columns:1fr}.sibling-copy{padding:0 6px 8px}.pair{grid-template-columns:1fr;gap:0}.pair-link{height:72px}.pair-line{width:2px;height:auto;inset:-8px auto -8px 50%}.pair-shot:first-child,.pair-shot:last-child{--lean:0deg}.promises{grid-template-columns:repeat(2,minmax(0,1fr))}.level{grid-template-columns:90px minmax(0,1fr);gap:10px 18px}.level-ms,.level small{grid-column:1/-1}.story-screen{transform:none}.story-stage{display:none}.chapter{opacity:1;min-height:0;padding:0 0 72px}.chapter-shot{width:100%;height:auto;box-shadow:0 0 0 1px var(--line-2);border-radius:12px;margin-top:24px;display:block}.foot-grid{grid-template-columns:1fr}}@media (width<=560px){.music-key .music-state{display:none}.music-key{padding:0 10px}.hero-copy>*{max-width:none}.hero-screen{opacity:.4;width:104vw;left:40%}.hero-screen.back{opacity:0;pointer-events:none}.app-switch button{min-width:0;padding:7px 12px 9px}.whoami{padding:0 6px}.whoami span{display:none}.app-links{gap:0;margin-left:-10px;padding-left:10px}.app-link{padding:0 7px}.app-link .wordmark{font-size:15px}.nav{gap:16px}.promises{grid-template-columns:1fr}.plays{height:auto}.tour-key .tour-text{display:none}.flow-steps{grid-template-columns:1fr}.tour-key{padding:8px;bottom:64px}.btn{height:46px;padding:0 18px}.phone{border-radius:22px;width:44vw}.phone+.phone{margin-top:8vh}.poster .play{width:52px;height:52px;bottom:16px;left:16px}.poster-cap{bottom:34px;left:80px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.enter,.title,.hero-screen,.reveal,.story-screen img,.poster img{transition:none!important}.hero-stage,.phone,.phone+.phone{transform:none}.hero-copy{opacity:1}.app-switch:before,.app-switch:after,.app-switch button:before{animation:none}}