@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/Inter.woff2) format("woff2")}@font-face{font-family:Playfair Display;font-style:normal;font-weight:600 800;font-display:swap;src:url(/fonts/Playfair.woff2) format("woff2")}@font-face{font-family:Playfair Display;font-style:italic;font-weight:600;font-display:swap;src:url(/fonts/Playfair-italic.woff2) format("woff2")}:root{--ink:#050507;--lacquer:#0b0b10;--lacquer-2:#12121a;--panel:rgba(20,20,30,.62);--line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.16);--ivory:#f5f0e6;--ivory-dim:#c9c3b8;--muted:#9a95a3;--gold:#e2bd6f;--gold-2:#f6dfa4;--gold-deep:#a8823a;--violet:#8b6cff;--aqua:#3fe0ff;--rose:#ff6fae;--ok:#5be3a1;--bad:#ff6b6b;--lh:#7a8cff;--rh:#f2c46b;--display:"Playfair Display",Georgia,"Times New Roman",serif;--body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--radius:18px;--radius-s:12px;--wrap:1180px;--shadow:0 30px 80px -30px rgba(0,0,0,.8),0 2px 0 rgba(255,255,255,.04) inset;--grain: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='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{margin:0;background:var(--ink);color:var(--ivory);font:400 17px/1.7 var(--body);overflow-x:hidden;min-height:100vh}body:before{content:"";position:fixed;top:-50%;right:-50%;bottom:-50%;left:-50%;z-index:-2;pointer-events:none;background:radial-gradient(40% 35% at 20% 15%,rgba(139,108,255,.16),transparent 60%),radial-gradient(35% 30% at 85% 10%,rgba(63,224,255,.1),transparent 60%),radial-gradient(45% 40% at 70% 90%,rgba(226,189,111,.1),transparent 60%);animation:aurora 28s ease-in-out infinite alternate}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background-image:var(--grain);opacity:.06;mix-blend-mode:overlay}@keyframes aurora{0%{transform:translateZ(0) rotate(0)}50%{transform:translate3d(4%,-3%,0) rotate(8deg)}to{transform:translate3d(-3%,4%,0) rotate(-6deg)}}img,svg,canvas,video{max-width:100%}a{color:var(--gold-2);text-decoration-color:#f6dfa459;text-underline-offset:3px;transition:color .2s}a:hover{color:#fff;text-decoration-color:var(--gold)}:focus-visible{outline:2px solid var(--aqua);outline-offset:3px;border-radius:6px}::selection{background:#e2bd6f59;color:#fff}.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gold);color:#000;padding:10px 14px;border-radius:10px;font-weight:700}.skip:focus{top:12px}.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(16px,4vw,32px)}[hidden]{display:none!important}h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.08;letter-spacing:-.01em;margin:0 0 .5em;color:#fff;text-wrap:balance}h1{font-size:clamp(2.4rem,6.2vw,5.2rem)}h2{font-size:clamp(1.8rem,3.6vw,2.9rem)}h3{font-size:clamp(1.2rem,2vw,1.45rem);font-weight:700}p{margin:0 0 1.1em}.eyebrow{display:inline-flex;align-items:center;gap:.6em;font:700 .74rem/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem}.eyebrow:before{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}.lede{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--ivory-dim);max-width:60ch}.shine{background:linear-gradient(100deg,#fff 0%,#fff 38%,var(--gold-2) 46%,#fff 54%,#fff 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sweep 6s ease-in-out infinite}.gold{background:linear-gradient(180deg,var(--gold-2),var(--gold) 55%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}@keyframes sweep{0%,20%{background-position:100% 0}60%,to{background-position:0 0}}.site-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);background:linear-gradient(180deg,#050507db,#05050799);border-bottom:1px solid var(--line)}.site-header .wrap{display:flex;align-items:center;gap:20px;height:70px}.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font:800 1.15rem/1 var(--display);letter-spacing:.01em;white-space:nowrap}.brand img{width:38px;height:38px;border-radius:10px;box-shadow:0 0 0 1px var(--line-2),0 8px 24px -8px #e2bd6f80}.brand em{font-style:italic;color:var(--gold)}.nav{display:flex;align-items:center;gap:4px;margin-left:auto}.nav a{color:var(--ivory-dim);text-decoration:none;font:500 .95rem/1 var(--body);padding:10px 14px;border-radius:999px;transition:background .2s,color .2s}.nav a:hover,.nav a[aria-current=page]{color:#fff;background:#ffffff12}.nav .btn{margin-left:8px}.nav a.btn{color:#120d02;padding:11px 18px;background:linear-gradient(180deg,var(--gold-2),var(--gold) 60%,var(--gold-deep))}.nav a.btn:hover{color:#120d02}.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line-2);color:#fff;border-radius:12px;width:44px;height:44px;font-size:1.2rem;cursor:pointer}@media (max-width:900px){.menu-btn{display:block}.nav{position:fixed;inset:70px 0 auto 0;flex-direction:column;align-items:stretch;padding:16px;gap:4px;background:#050507f7;border-bottom:1px solid var(--line);transform:translateY(-120%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}.nav.open{transform:none}.nav a{padding:14px 16px;font-size:1.05rem}.nav .btn{margin:8px 0 0}}.btn{--b:var(--gold);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em;padding:14px 24px;border-radius:999px;border:0;cursor:pointer;font:700 .98rem/1 var(--body);letter-spacing:.01em;color:#120d02;text-decoration:none;background:linear-gradient(180deg,var(--gold-2),var(--gold) 60%,var(--gold-deep));box-shadow:0 10px 30px -10px #e2bd6fb3,inset 0 1px #fff9;transition:transform .2s,box-shadow .2s,filter .2s;overflow:hidden;isolation:isolate}.btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%);transform:translate(-120%);transition:transform .7s;z-index:-1}.btn:hover{transform:translateY(-2px);color:#120d02;box-shadow:0 16px 40px -12px #e2bd6fd9,inset 0 1px #fff9}.btn:hover:after{transform:translate(120%)}.btn.ghost{background:#ffffff0a;color:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}.btn.ghost:hover{background:#ffffff17;color:#fff}.btn.small{padding:10px 16px;font-size:.88rem}.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}.btn .ico{width:18px;height:18px}section{position:relative}.band{padding:clamp(64px,10vw,130px) 0}.band.tight{padding:clamp(40px,6vw,72px) 0}.center{text-align:center}.center .lede{margin-inline:auto}.center .eyebrow:after{content:"";width:28px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}.grid{display:grid;gap:22px}.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}.card{position:relative;background:linear-gradient(180deg,#ffffff0d,#ffffff04);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s}.card:before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--a,0deg),transparent 0 70%,var(--gold) 80%,var(--violet) 88%,transparent 95%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s}.card:hover{transform:translateY(-4px);border-color:transparent}.card:hover:before{opacity:1;animation:spin 3.5s linear infinite}@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes spin{to{--a:360deg}}.card h3{margin-top:.2em}.card p:last-child{margin-bottom:0}.card .ico-badge{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#f6dfa459,#e2bd6f14);border:1px solid rgba(226,189,111,.35);margin-bottom:18px;color:var(--gold-2)}.card .ico-badge svg{width:26px;height:26px}a.card{text-decoration:none;color:inherit;display:block}.muted{color:var(--muted)}.tag{display:inline-block;font:600 .72rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(226,189,111,.35);border-radius:999px;padding:6px 10px}.hero{position:relative;min-height:min(92vh,900px);display:grid;align-items:center;overflow:hidden;isolation:isolate;padding:80px 0 40px}.hero canvas.fx{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:-1}.hero:after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,transparent,var(--ink));z-index:-1}.hero .lacquer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;background:linear-gradient(115deg,transparent 0 40%,rgba(255,255,255,.05) 46%,transparent 52%) 0 0/300% 100%,radial-gradient(120% 80% at 50% 0%,#17151f,#07070b 55%,#040406);animation:lacquer 9s ease-in-out infinite}@keyframes lacquer{0%{background-position:120% 0,0 0}to{background-position:-60% 0,0 0}}.hero h1{max-width:14ch}.hero .ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}.hero .proof{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;color:var(--ivory-dim);font-size:.92rem}.hero .proof span:before{content:"\2726  ";color:var(--gold)}.hero-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}.grid>*,.hero-inner>*{min-width:0}@media (max-width:980px){.hero-inner{grid-template-columns:1fr}.hero{min-height:auto;padding-top:56px}}.device{position:relative;border-radius:26px;padding:18px;background:linear-gradient(160deg,#1a1824,#09090d 60%);border:1px solid var(--line-2);box-shadow:0 60px 120px -40px #000000e6,0 0 0 1px #ffffff08 inset,0 0 120px -40px #8b6cff80;transform:perspective(1400px) rotateX(8deg) rotateY(-8deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)}.device:hover{transform:perspective(1400px) rotateX(2deg) rotateY(-2deg)}.device .screen{border-radius:16px;overflow:hidden;background:#06060a;border:1px solid var(--line)}.device .bar{display:flex;align-items:center;gap:8px;padding:10px 14px;font:600 .78rem/1 var(--body);color:var(--muted);border-bottom:1px solid var(--line)}.device .bar i{width:9px;height:9px;border-radius:50%;background:#2a2833;display:inline-block}.device .bar b{margin-left:auto;color:var(--gold)}.mini-roll{height:220px;display:block;width:100%}.marquee{overflow:hidden;border-block:1px solid var(--line);background:#ffffff05;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}.marquee .track{display:flex;gap:56px;width:max-content;padding:18px 0;animation:marq 40s linear infinite;font:600 italic 1.2rem/1 var(--display);color:var(--ivory-dim);white-space:nowrap}.marquee .track span:after{content:"\266a";margin-left:56px;color:var(--gold);font-style:normal}@keyframes marq{to{transform:translate(-50%)}}.steps{counter-reset:s;display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}.steps .card:after{counter-increment:s;content:"0" counter(s);position:absolute;right:22px;top:14px;font:800 3.6rem/1 var(--display);color:#ffffff0d}.video{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-2);background:#000 center/cover no-repeat;box-shadow:var(--shadow);cursor:pointer}.video:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#0000001a,#000000a6)}.video button{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:84px;height:84px;border-radius:50%;border:0;cursor:pointer;background:linear-gradient(180deg,var(--gold-2),var(--gold));box-shadow:0 0 0 12px #e2bd6f2e,0 20px 50px -10px #000c;transition:transform .25s}.video button:before{content:"";position:absolute;left:34px;top:26px;border-style:solid;border-width:16px 0 16px 26px;border-color:transparent transparent transparent #120d02}.video:hover button{transform:scale(1.08)}.video .cap{position:absolute;left:20px;right:20px;bottom:16px;font:600 .95rem/1.4 var(--body);color:#fff}.video iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0}.yt-list{display:grid;gap:12px}.yt-list a{display:flex;gap:14px;align-items:center;padding:12px;border-radius:14px;border:1px solid var(--line);text-decoration:none;color:var(--ivory);background:#ffffff05;transition:background .2s,border-color .2s}.yt-list a:hover{background:#ffffff0f;border-color:var(--line-2)}.yt-list img{width:120px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;flex:none}.yt-list small{display:block;color:var(--muted);font-size:.8rem}.faq details{border:1px solid var(--line);border-radius:var(--radius-s);background:#ffffff05;margin-bottom:12px;overflow:hidden}.faq summary{cursor:pointer;list-style:none;padding:20px 54px 20px 22px;font:600 1.05rem/1.4 var(--body);position:relative;color:#fff}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font:400 1.6rem/1 var(--body);color:var(--gold);transition:transform .3s}.faq details[open] summary:after{transform:translateY(-50%) rotate(45deg)}.faq details>div{padding:0 22px 20px;color:var(--ivory-dim)}.cta{position:relative;border-radius:28px;padding:clamp(36px,6vw,72px);overflow:hidden;text-align:center;border:1px solid rgba(226,189,111,.3);background:radial-gradient(80% 120% at 50% 0%,rgba(226,189,111,.18),transparent 60%),linear-gradient(180deg,#14121b,#08080c)}.cta:before{content:"";position:absolute;inset:auto 0 0 0;height:56px;background:repeating-linear-gradient(90deg,#f5f0e6 0 38px,#0b0b10 38px 40px);opacity:.08}.site-footer{border-top:1px solid var(--line);margin-top:40px;padding:60px 0 30px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.02))}.site-footer .cols{display:grid;gap:32px;grid-template-columns:1.4fr repeat(3,1fr)}@media (max-width:820px){.site-footer .cols{grid-template-columns:1fr 1fr}}@media (max-width:520px){.site-footer .cols{grid-template-columns:1fr}}.site-footer h4{font:700 .78rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:6px 0 16px}.site-footer ul{list-style:none;margin:0;padding:0}.site-footer li{margin:0 0 10px}.site-footer a{color:var(--ivory-dim);text-decoration:none}.site-footer a:hover{color:#fff}.site-footer .legal{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;border-top:1px solid var(--line);margin-top:40px;padding-top:24px;color:var(--muted);font-size:.86rem}.keys-divider{height:22px;background:repeating-linear-gradient(90deg,#f5f0e6e6 0 30px,#000 30px 32px);opacity:.06}.article-head{padding:clamp(48px,8vw,96px) 0 28px;border-bottom:1px solid var(--line);background:radial-gradient(70% 120% at 20% 0%,rgba(139,108,255,.12),transparent 60%)}.article-head h1{font-size:clamp(2.1rem,5vw,3.8rem);max-width:20ch}.crumbs{font-size:.86rem;color:var(--muted);margin-bottom:18px}.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:#fff}.meta-line{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:.9rem;margin-top:14px}.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;padding-top:44px}@media (max-width:1000px){.article-layout{grid-template-columns:1fr}.toc{display:none}}.prose{max-width:72ch}.prose h2{font-size:clamp(1.55rem,2.6vw,2.1rem);margin-top:1.8em;scroll-margin-top:90px}.prose h3{margin-top:1.5em;scroll-margin-top:90px}.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.2em}.prose li{margin:.35em 0}.prose li::marker{color:var(--gold)}.prose strong{color:#fff}.prose blockquote{margin:1.6em 0;padding:18px 22px;border-left:3px solid var(--gold);background:#e2bd6f0f;border-radius:0 12px 12px 0;color:var(--ivory)}.prose table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.95rem;display:block;overflow-x:auto}.prose th,.prose td{border:1px solid var(--line-2);padding:10px 14px;text-align:left;vertical-align:top}.prose th{background:#ffffff0d;color:#fff}.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:#ffffff12;padding:2px 6px;border-radius:6px}.prose kbd{font:600 .82em/1 var(--body);padding:4px 7px;border-radius:6px;border:1px solid var(--line-2);border-bottom-width:3px;background:#16151d;color:#fff}.prose .callout{margin:1.8em 0;padding:22px 24px;border-radius:16px;border:1px solid rgba(226,189,111,.35);background:linear-gradient(180deg,#e2bd6f17,#e2bd6f05)}.prose .callout p:last-child{margin:0}.toc{position:sticky;top:96px;align-self:start;display:grid;gap:18px}.toc nav{border:1px solid var(--line);border-radius:16px;padding:20px;background:#ffffff05}.toc nav b{display:block;font:700 .75rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}.toc nav a{display:block;color:var(--ivory-dim);text-decoration:none;font-size:.9rem;border-left:2px solid transparent;padding:6px 0 6px 10px;margin-left:-12px}.toc nav a:hover,.toc nav a.on{color:#fff;border-left-color:var(--gold)}.progress{position:fixed;left:0;top:0;height:3px;width:0;z-index:60;background:linear-gradient(90deg,var(--violet),var(--aqua),var(--gold))}.post-card .tag{margin-bottom:14px}.post-card h3{font-size:1.3rem}.post-card .more{color:var(--gold);font-weight:600;font-size:.92rem}.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}.reveal.in{opacity:1;transform:none}.tool-head{padding:26px 0 14px}.tool-head .lede{font-size:1.02rem;margin-bottom:0}.tool-head h1{font-size:clamp(1.9rem,3.8vw,3rem);margin-bottom:.2em}.studio{border:1px solid var(--line-2);border-radius:24px;background:linear-gradient(180deg,#121119,#07070a);box-shadow:0 50px 120px -50px #000000f2,0 0 80px -40px #8b6cff73;overflow:hidden}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px 16px;border-bottom:1px solid var(--line);background:#ffffff05}.toolbar .grp{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.toolbar .sep{width:1px;height:28px;background:var(--line)}.toolbar label{font:600 .78rem/1 var(--body);letter-spacing:.06em;color:var(--muted);text-transform:uppercase}.ctl{-webkit-appearance:none;appearance:none;background:#17161f;border:1px solid var(--line-2);color:#fff;border-radius:10px;padding:9px 12px;font:500 .9rem/1 var(--body);cursor:pointer;min-height:40px}.ctl:hover{border-color:#e2bd6f80}.ctl.on{background:linear-gradient(180deg,#e2bd6f4d,#e2bd6f1f);border-color:var(--gold);color:var(--gold-2)}.ctl.rec.on{background:#ff50502e;border-color:#ff6b6b;color:#ffb3b3;animation:pulse 1.2s infinite}@keyframes pulse{50%{box-shadow:0 0 0 6px #ff6b6b26}}select.ctl{padding-right:30px;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;background-size:5px 5px;background-repeat:no-repeat}input[type=range]{accent-color:var(--gold);width:110px}.status{font-size:.86rem;color:var(--muted);margin-left:auto}.status b{color:var(--gold-2)}.stage{position:relative;height:clamp(200px,34vh,400px);background:radial-gradient(90% 120% at 50% 100%,rgba(139,108,255,.14),transparent 60%),linear-gradient(180deg,#07070b,#0c0b12)}.stage canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.stage .hint{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;text-align:center;color:var(--muted);padding:20px;pointer-events:none}.stage .hint b{display:block;font:700 1.4rem/1.2 var(--display);color:#fff;margin-bottom:6px}.kb-scroll{position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#333 transparent;background:#000;border-top:1px solid #000;box-shadow:inset 0 10px 18px -10px #000000e6}.kb{position:relative;display:flex;height:clamp(150px,22vw,220px);min-width:100%;user-select:none;-webkit-user-select:none;touch-action:none;padding:0 2px 6px;background:linear-gradient(180deg,#000,#0a0a0d)}.kb:before{content:"";position:absolute;left:0;right:0;top:0;height:10px;z-index:3;background:linear-gradient(180deg,#5a0d1d,#2a050c);box-shadow:0 2px 6px #000000b3}.key{position:relative;flex:1 0 auto;cursor:pointer}.key.w{width:var(--kw,40px);margin:0 1px;border-radius:0 0 8px 8px;background:linear-gradient(180deg,#e8e2d6,#fbf8f1 12%,#fffdf8 70%,#ebe5d9);box-shadow:inset 0 -6px #d6cfc1,inset 0 0 0 1px #00000040,0 4px 6px #0006;transition:background .08s,box-shadow .08s,transform .08s}.key.b{position:absolute;top:0;z-index:2;width:calc(var(--kw,40px)*.62);height:62%;border-radius:0 0 6px 6px;background:linear-gradient(180deg,#26252b,#0b0b0e 75%,#1d1c22);box-shadow:inset 0 -5px #000,inset 1px 0 #ffffff14,0 6px 8px #000000b3;transition:background .08s,box-shadow .08s}.key.w.down{background:linear-gradient(180deg,#d9d0bf,#efe8db);box-shadow:inset 0 -2px #c7bfae,inset 0 0 0 1px #00000040,0 0 30px 4px var(--glow,rgba(226,189,111,.65));transform:translateY(2px)}.key.b.down{background:linear-gradient(180deg,#3a3446,#1a1722);box-shadow:inset 0 -2px #000,0 0 26px 4px var(--glow,rgba(139,108,255,.8))}.key.w.down:after,.key.b.down:after{content:"";position:absolute;left:12%;right:12%;bottom:10px;height:5px;border-radius:4px;background:var(--glowc,var(--gold));box-shadow:0 0 14px var(--glowc,var(--gold))}.key.scale.w{background:linear-gradient(180deg,#e8e2d6,#fff4d6 60%,#f3e2b5)}.key.scale.b{background:linear-gradient(180deg,#3b3220,#1b160b)}.key.scale:before{content:"";position:absolute;left:50%;bottom:30px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}.key.b.scale:before{bottom:18px;width:7px;height:7px;margin-left:-3.5px}.key.root:before{background:var(--rose);box-shadow:0 0 12px var(--rose)}.key.expect.w{background:linear-gradient(180deg,#dff7ff,#bfeeff);box-shadow:inset 0 -6px #8fd6ee,0 0 24px 2px #3fe0ff99}.key.expect.b{background:linear-gradient(180deg,#1c4b5a,#0b2a33);box-shadow:0 0 20px 2px #3fe0ffb3}.key .lbl{position:absolute;left:0;right:0;bottom:16px;text-align:center;font:600 11px/1.15 var(--body);color:#6b6455;pointer-events:none}.key.b .lbl{bottom:10px;color:#a29db0;font-size:9.5px}.key .lbl small{display:block;font-size:9.5px;font-weight:500;color:#9c9484}.key.b .lbl small{color:#77727f}.kb.no-labels .lbl,.kb.no-names .lbl small{display:none}.panel-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));margin-top:26px}.drop{border:1.5px dashed rgba(226,189,111,.45);border-radius:20px;padding:34px 22px;text-align:center;background:radial-gradient(80% 100% at 50% 0%,rgba(226,189,111,.08),transparent 70%);transition:background .2s,border-color .2s}.drop.over{border-color:var(--aqua);background:radial-gradient(80% 100% at 50% 0%,rgba(63,224,255,.12),transparent 70%)}.drop b{display:block;font:700 1.25rem/1.3 var(--display);color:#fff;margin-bottom:6px}.drop .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px}.meter{height:10px;border-radius:999px;background:#ffffff14;overflow:hidden;margin:14px 0 6px}.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--aqua),var(--gold));transition:width .2s}.scoreboard{display:flex;gap:18px;flex-wrap:wrap;font-size:.92rem;color:var(--ivory-dim)}.scoreboard b{font:800 1.4rem/1 var(--display);color:#fff;display:block}.timeline{flex:1 1 220px;display:flex;align-items:center;gap:10px;min-width:200px}.timeline input{flex:1;width:auto}.timeline span{font:600 .82rem/1 ui-monospace,monospace;color:var(--muted);min-width:86px;text-align:right}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%) translateY(120px);z-index:90;background:#16151d;border:1px solid var(--line-2);color:#fff;padding:14px 20px;border-radius:14px;box-shadow:var(--shadow);transition:transform .35s cubic-bezier(.2,.8,.2,1);max-width:min(92vw,560px)}.toast.show{transform:translate(-50%)}.kbd-help{display:flex;flex-wrap:wrap;gap:8px 18px;padding:14px 16px;color:var(--muted);font-size:.86rem;border-top:1px solid var(--line)}.kbd-help kbd{font:600 .78rem/1 var(--body);padding:4px 7px;border-radius:6px;border:1px solid var(--line-2);border-bottom-width:3px;background:#16151d;color:#fff}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}@media (max-width:700px){.studio{border-radius:18px;margin-inline:-6px}.studio>.toolbar:first-child{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:10px 12px;gap:8px}.studio>.toolbar:first-child::-webkit-scrollbar{display:none}.studio>.toolbar:first-child>*{flex:none}.studio>.toolbar:first-child .grp{flex-wrap:nowrap}.studio>.toolbar:first-child .status{display:none}.studio>.toolbar:first-child .timeline{min-width:220px}.tool-head .lede{font-size:.95rem}.kbd-help{display:none}}