.aurora{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.aurora i{filter:blur(90px);opacity:.55;border-radius:50%;position:absolute}.aurora .a1{background:#1d6b67;width:620px;height:620px;top:-120px;left:-160px}.aurora .a2{opacity:.45;background:#3a3d93;width:560px;height:560px;top:40px;right:-140px}.aurora .a3{opacity:.18;background:#8ea866;width:520px;height:380px;top:420px;left:35%}.btn{white-space:nowrap;border-radius:12px;justify-content:center;align-items:center;gap:8px;font-size:15px;font-weight:600;transition:transform .15s,background .15s,border-color .15s;display:inline-flex}.btn:active{transform:translateY(1px)}.btn-sage{background:var(--sage);color:#151a10;padding:12px 20px;box-shadow:inset 0 0 0 1px #ffffff40,0 10px 30px -10px #d5e2b38c}.btn-sage:hover{background:#e2edc3}.btn-ghost{color:var(--fg);border:1px solid var(--glass-edge);background:var(--glass);padding:12px 18px}.btn-ghost:hover{border-color:#ecf4de47}.app{background:#111317;border:1px solid #ecf4de1f;border-radius:18px;overflow:hidden;box-shadow:inset 0 1px #ffffff0f,0 60px 120px -40px #000000d9,0 0 0 1px #0009}.app-top{border-bottom:1px solid var(--line);align-items:center;gap:12px;height:48px;padding:0 14px;font-size:13px;display:flex}.pill{font:500 10px/1 var(--font-code), monospace;letter-spacing:.12em;color:var(--muted-fg);border:1px solid var(--line);border-radius:6px;padding:5px 7px}.app-body{grid-template-columns:64px minmax(0,1fr) 264px;grid-template-areas:"rail stage panel";display:grid}.rail{border-right:1px solid var(--line);flex-direction:column;grid-area:rail;gap:4px;padding:10px 6px;display:flex}.rail button{color:var(--muted-fg);border-radius:10px;flex-direction:column;align-items:center;gap:4px;padding:9px 0;font-size:10.5px;display:flex}.rail button[aria-selected=true]{color:var(--fg);background:#ecf4de12}.rail svg{width:18px;height:18px}.stage{flex-direction:column;grid-area:stage;gap:12px;min-width:0;padding:16px;display:flex}.panel{border-left:1px solid var(--line);flex-direction:column;grid-area:panel;gap:18px;padding:16px;font-size:13px;display:flex}.canvas{aspect-ratio:16/9;perspective:1400px;border-radius:10px;max-width:100%;transition:background .6s;position:relative;overflow:hidden;container-type:inline-size}.frame{transform-origin:50% 60%;background:#f6f7f4;transition:inset .35s,border-radius .35s,box-shadow .35s,transform .6s;position:absolute;overflow:hidden;container-type:inline-size}.frame.tilt{transform:rotateX(14deg)rotateY(-16deg)rotate(3deg)scale(.92)}.frame.b-hairline{outline:1px solid #ffffffbf}.frame.b-glow{box-shadow:0 0 0 1.5px #d5e2b3e6,0 0 28px 4px #d5e2b38c!important}.border-spec{border-radius:inherit;z-index:5;pointer-events:none;background:conic-gradient(from var(--spin,0deg), #ff6b6b, #ffd36b, #8be38b, #6bc9ff, #b28bff, #ff6b6b);-webkit-mask-composite:xor;padding:2px;display:none;position:absolute;inset:-2px;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.frame.b-spectrum .border-spec{display:block}.cam{transform-origin:0 0;will-change:transform;position:absolute;inset:0}.scr{color:#20251c;font-size:1.55cqw;font-family:var(--font-body), system-ui, sans-serif;position:absolute;inset:0}.scr .side{background:#eceee8;border-right:.1em solid #dfe2d8;flex-direction:column;gap:.5em;width:20%;padding:1.4em 1em;display:flex;position:absolute;top:0;bottom:0;left:0}.scr .brand{align-items:center;gap:.5em;margin-bottom:1em;font-size:1.05em;font-weight:700;display:flex}.scr .brand b{background:#2b4f6f;border-radius:.35em;width:1.3em;height:1.3em;display:inline-block}.scr .nav-i{color:#5b6255;border-radius:.5em;padding:.45em .7em}.scr .nav-i.on{color:#1d2219;background:#fff;font-weight:600;box-shadow:0 .1em .3em #00000012}.scr .abs{position:absolute}.scr h4{letter-spacing:-.02em;font-size:1.7em;font-weight:700}.scr .lbl{color:#4f5649;font-size:.85em;font-weight:600}.scr .box{background:#fff;border:.1em solid #d6dacf;border-radius:.55em;justify-content:space-between;align-items:center;padding:0 .9em;display:flex}.scr .box.focus{border-color:#2b4f6f;box-shadow:0 0 0 .25em #2b4f6f26}.scr .save{color:#fff;background:#2b4f6f;border-radius:.55em;justify-content:center;align-items:center;font-weight:600;transition:transform .12s,background .12s;display:flex}.scr .save.down{background:#1f3d57;transform:scale(.95)}.scr .card{background:#fff;border:.1em solid #e1e4db;border-radius:.8em;padding:1em 1.1em}.scr table{border-collapse:collapse;width:100%;font-size:.85em}.scr td{border-top:.1em solid #eceee8;padding:.45em .2em}.scr .paid{color:#46602a;background:#e6f0d5;border-radius:99em;padding:.1em .6em;font-size:.85em;font-weight:600}.scr .bar{background:#eceee8;border-radius:99em;height:.5em;overflow:hidden}.scr .bar i{border-radius:inherit;background:#2b4f6f;height:100%;display:block}.caret{vertical-align:middle;background:#20251c;width:.08em;height:1.1em;margin-left:.05em;display:inline-block}.toast{color:#fff;background:#20251c;border-radius:.6em;align-items:center;gap:.6em;padding:.7em 1em;font-size:1.55cqw;transition:opacity .3s,transform .3s;display:flex;position:absolute;top:4%;right:4%}.toast.off{opacity:0;transform:translateY(-.6em)}.cursor{z-index:4;pointer-events:none;filter:drop-shadow(0 .2cqw .3cqw #00000059);width:2.4cqw;height:2.4cqw;margin:-.15cqw 0 0 -.3cqw;position:absolute}.ripple{pointer-events:none;opacity:0;z-index:3;background:#2b4f6f26;border:.3cqw solid #2b4f6fb3;border-radius:50%;width:5cqw;height:5cqw;margin:-2.5cqw 0 0 -2.5cqw;position:absolute}.webcam{aspect-ratio:1;z-index:6;background:radial-gradient(circle at 50% 38%,#e7b98f 0 17%,#0000 17.5%),radial-gradient(at 50% 100%,#3d5b4a 0 42%,#0000 42.5%),linear-gradient(160deg,#c8cfbf,#8d9a86);border-radius:50%;width:15%;transition:opacity .3s,transform .3s;animation:4s ease-in-out infinite breathe;position:absolute;bottom:5%;left:3%;overflow:hidden;box-shadow:0 0 0 .35cqw #ffffffd9,0 1cqw 2.4cqw #00000059}.webcam:after{content:"";background:#3b2c22;border-radius:50% 50% 30% 30%;width:34%;height:15%;position:absolute;top:16%;left:33%}@keyframes breathe{50%{transform:translateY(-1.5%)scale(1.01)}}.caption{text-align:center;z-index:7;color:#fff;max-width:70%;font:600 1.9cqw/1.3 var(--font-display), sans-serif;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0c0e11c7;border-radius:1cqw;padding:.8cqw 1.6cqw;transition:opacity .25s;position:absolute;bottom:6%;left:50%;transform:translate(-50%)}.caption span{opacity:.45;transition:opacity .15s}.caption span.lit{opacity:1}.keys{z-index:7;gap:.7cqw;transition:opacity .2s,transform .2s;display:flex;position:absolute;bottom:7%;right:4%}.keys kbd{font:600 1.7cqw/1 var(--font-body), sans-serif;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(#ffffff38,#ffffff14);border:1px solid #ffffff59;border-radius:.9cqw;padding:1cqw 1.4cqw;box-shadow:0 .4cqw 1cqw #00000040}.hide{pointer-events:none;opacity:0!important}.transport{font:500 12px/1 var(--font-code), monospace;color:var(--muted-fg);align-items:center;gap:10px;display:flex}.play{background:var(--fg);width:32px;height:32px;color:var(--ink);border-radius:9px;place-items:center;display:grid}.tl{border-top:1px solid var(--line);color:var(--muted-fg);cursor:pointer;-webkit-user-select:none;user-select:none;padding-top:10px;font-size:11px;position:relative}.track{grid-template-columns:58px 1fr;align-items:center;height:24px;display:grid}.lane{height:18px;position:relative}.seg{white-space:nowrap;border-radius:5px;align-items:center;padding:0 6px;font-size:10px;display:flex;position:absolute;top:2px;bottom:2px;overflow:hidden}.seg.clip{color:var(--sage);background:#a7bb7f3d;border:1px solid #a7bb7f73}.seg.zoom{color:#b9c8f4;background:#6e8cdc38;border:1px solid #6e8cdc73}.seg.cap{border:1px solid var(--line);color:var(--muted-fg);background:#ecf4de14}.playhead{background:var(--sage);pointer-events:none;width:2px;margin-left:57px;position:absolute;top:4px;bottom:0}.playhead:before{content:"";background:var(--sage);border-radius:3px;width:10px;height:10px;position:absolute;top:-4px;left:-4px}.p-h{font:500 10px/1 var(--font-code), monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}.swatches{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.sw{aspect-ratio:1.45;border:1px solid #ffffff14;border-radius:9px;position:relative}.sw span{text-align:center;color:#ffffffe6;text-shadow:0 1px 2px #00000080;font-size:10px;position:absolute;bottom:4px;left:0;right:0}.sw[aria-pressed=true]{outline:2px solid var(--sage);outline-offset:2px}.row{justify-content:space-between;align-items:center;gap:10px;display:flex}.row output{font:500 11px/1 var(--font-code), monospace;color:var(--muted-fg);font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:var(--sage);height:18px}.tog{background:#ecf4de24;border-radius:99px;flex:none;width:34px;height:20px;transition:background .2s;position:relative}.tog:after{content:"";background:#fff;border-radius:50%;width:14px;height:14px;transition:transform .2s;position:absolute;top:3px;left:3px}.tog[aria-checked=true]{background:var(--sage-deep)}.tog[aria-checked=true]:after{transform:translate(14px)}.seg-btns{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.seg-btns button{border:1px solid var(--line);color:var(--muted-fg);border-radius:8px;padding:7px 0;font-size:11px}.seg-btns button[aria-pressed=true]{border-color:var(--sage-deep);color:var(--fg);background:#d5e2b314}.panel>*{animation:.28s ease-out both panel-in}@keyframes panel-in{0%{opacity:0;transform:translateY(6px)}}.hint{color:var(--faint);font-size:11.5px;line-height:1.45}.script{resize:vertical;border:1px solid var(--line);width:100%;min-height:110px;color:var(--fg);background:#ecf4de0a;border-radius:10px;padding:9px 10px;font-size:12.5px;line-height:1.5}.script:focus-visible{outline:2px solid var(--sage-deep);outline-offset:1px}.gen{background:var(--sage);color:#151a10;border-radius:10px;padding:9px 12px;font-size:12.5px;font-weight:600;transition:opacity .2s}.gen:disabled{opacity:.45;cursor:default}.ripple.ring{background:0 0;border-width:.45cqw;border-color:#fffffff2;box-shadow:0 0 0 .25cqw #2b4f6f8c}.cursor{transform-origin:15% 10%;transition:opacity .35s}.spot{z-index:2;pointer-events:none;border-radius:.9cqw;transition:left .5s,top .5s,width .5s,height .5s,opacity .35s;position:absolute;box-shadow:0 0 0 200vmax #0a0c0f80,0 0 0 .25cqw #d5e2b3e6}.arrow{z-index:3;pointer-events:none;fill:none;stroke:#e0574f;stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round;opacity:0;width:18%;transition:opacity .2s;position:absolute;top:46%;left:38%;overflow:visible}.arrow.on{opacity:1}.arrow path{stroke-dasharray:1;stroke-dashoffset:1px;transition:stroke-dashoffset .6s ease-out}.arrow path+path{transition-duration:.2s;transition-delay:.45s}.arrow text{fill:#e0574f;stroke:#fff;stroke-width:3px;paint-order:stroke;font:700 9px var(--font-display), sans-serif;opacity:0;transition:opacity .3s .3s}.arrow.on path{stroke-dashoffset:0}.arrow.on text{opacity:1}.step{z-index:7;color:#fff;font:600 1.5cqw/1 var(--font-display), sans-serif;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff29;border:1px solid #ffffff4d;border-radius:99px;padding:.7cqw 1.3cqw;transition:opacity .3s;position:absolute;top:4%;left:3%}.keys.left{left:4%;right:auto}.caption.top{top:5%;bottom:auto}.caption.c-boxed span{opacity:1}.caption.c-boxed{color:#151a10;background:#fffffff0}.caption.c-minimal{-webkit-backdrop-filter:none;backdrop-filter:none;text-shadow:0 .15cqw .5cqw #000000d9,0 0 .2cqw #0009;background:0 0}.caption.c-minimal span{opacity:.7}.caption.c-minimal span.lit{opacity:1}.webcam{transition:opacity .3s,width .3s,border-radius .3s}.export{z-index:10;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#080a0c8c;place-items:center;animation:.25s ease-out both panel-in;display:grid;position:absolute;inset:0}.export-card{background:#14171beb;border:1px solid #ecf4de24;border-radius:14px;flex-direction:column;gap:8px;width:min(320px,82%);padding:18px;font-size:13px;display:flex}.ex-bar{background:#ecf4de1a;border-radius:99px;height:6px;overflow:hidden}.ex-bar i{background:var(--sage);height:100%;transition:width 70ms linear;display:block}.ex-ok{background:var(--sage);color:#151a10;border-radius:50%;place-items:center;width:28px;height:28px;font-weight:700;display:grid}.tl{touch-action:none}.tl:focus-visible{outline:2px solid var(--sage-deep);outline-offset:4px;border-radius:4px}.track>span{transition:color .2s}.track.active>span{color:var(--sage)}.track.off .lane{opacity:.3}.lane .mark{background:#fff;border-radius:50%;width:6px;height:6px;margin:-3px 0 0 -3px;position:absolute;top:50%;box-shadow:0 0 0 2px #2b4f6fe6}.wave .bars{align-items:center;gap:1px;display:flex;position:absolute;inset:1px 0}.wave .bars i{background:#f0a46b59;border-radius:1px;flex:1;min-height:1px}.wave .bars.done i{background:#f0a46b}.wave.busy .bars{animation:.8s ease-in-out infinite alternate wave-busy}@keyframes wave-busy{to{opacity:.25}}@media (max-width:1020px){.app-body{grid-template-columns:64px minmax(0,1fr);grid-template-areas:"rail stage""panel panel"}.panel{border-left:0;border-top:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));display:grid}}@media (max-width:640px){.app-body{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage""rail""panel"}.app-top .hide-sm{display:none}.rail{border-right:0;border-top:1px solid var(--line);scrollbar-width:none;flex-direction:row;padding:8px 10px;overflow-x:auto}.rail button{flex:none;min-width:62px}.panel{align-content:start;min-height:300px}.stage{padding:10px}.track{grid-template-columns:44px 1fr}.playhead{margin-left:43px}}.fcard{border-radius:20px;flex-direction:column;gap:14px;min-width:0;padding:22px;display:flex}.demo{aspect-ratio:16/10;border:1px solid var(--line);background:#0f1215;border-radius:12px;position:relative;overflow:hidden}.fcard h3{font-size:19px;font-weight:700}.fcard p{color:var(--muted-fg);font-size:15px}.d-zoom .inner{transform-origin:70% 65%;background:#eef0ea;border-radius:8px;animation:6s cubic-bezier(.65,0,.35,1) infinite dz;position:absolute;inset:14% 12%;overflow:hidden}.d-zoom .inner:before{content:"";background:#dde1d6;height:14%;position:absolute;inset:0 0 auto}.d-zoom .inner i{background:#cfd4c7;border-radius:3px;position:absolute}.d-zoom .btnx{background:#2b4f6f;border-radius:4px;width:18%;height:12%;position:absolute;top:58%;left:62%}.d-zoom .ptr{width:14px;height:14px;animation:6s cubic-bezier(.65,0,.35,1) infinite dp;position:absolute;top:30%;left:30%}@keyframes dz{0%,18%{transform:scale(1)}38%,70%{transform:scale(2)}88%,to{transform:scale(1)}}@keyframes dp{0%{top:30%;left:30%}25%,80%{top:65%;left:70%}to{top:30%;left:30%}}.d-cam{background:linear-gradient(135deg,#253a3f,#2c2f5e)}.d-cam .scrn{background:#eef0ea;border-radius:8px;position:absolute;inset:12% 10%}.d-cam .bub{aspect-ratio:1;background:radial-gradient(circle at 50% 38%,#e7b98f 0 17%,#0000 17.5%),radial-gradient(at 50% 100%,#3d5b4a 0 42%,#0000 42.5%),linear-gradient(160deg,#c8cfbf,#8d9a86);width:30%;animation:6s ease-in-out infinite shape;position:absolute;bottom:8%;right:6%;overflow:hidden;box-shadow:0 0 0 3px #ffffffd9,0 10px 30px #0006}@keyframes shape{0%,28%{border-radius:50%;width:30%}36%,61%{border-radius:18%;width:34%}69%,94%{border-radius:50%;width:22%;right:70%}to{border-radius:50%;width:30%}}.d-cap{background:radial-gradient(120% 90% at 50% 0,#22343a,#0f1215);place-items:center;display:grid}.d-cap p{font:700 clamp(16px, 2.2vw, 22px)/1.35 var(--font-display), sans-serif;color:#fff;text-align:center;padding:0 10%}.d-cap span{opacity:.3;animation:6s infinite lit}@keyframes lit{0%{opacity:.3}4%,85%{opacity:1}95%,to{opacity:.3}}.d-keys{background:linear-gradient(135deg,#2a2440,#1a2b2e);place-items:center;display:grid}.d-keys .k{gap:8px;display:flex}.d-keys kbd{font:600 15px/1 var(--font-body), sans-serif;color:#fff;background:linear-gradient(#ffffff38,#ffffff12);border:1px solid #ffffff4d;border-radius:10px;padding:12px 15px;animation:3s infinite press}.d-keys kbd:nth-child(2){animation-delay:.25s}.d-keys kbd:nth-child(3){animation-delay:.5s}.d-keys small{text-align:center;font:500 10px/1 var(--font-code), monospace;letter-spacing:.14em;color:#ffffff8c;position:absolute;bottom:10px;left:0;right:0}@keyframes press{0%,to{transform:translateY(0)}8%{box-shadow:none;transform:translateY(3px)}16%{transform:translateY(0)}}.d-3d{perspective:700px;background:linear-gradient(135deg,#bf6a5e,#6d4c8f 55%,#2d3f73)}.d-3d .t{background:#eef0ea;border-radius:10px;animation:7s ease-in-out infinite tilt;position:absolute;inset:18% 16%}.d-3d .t:before{content:"";background:conic-gradient(from var(--spin,0deg), #ff6b6b, #ffd36b, #8be38b, #6bc9ff, #b28bff, #ff6b6b);-webkit-mask-composite:xor;border-radius:12px;padding:2px;animation:4s linear infinite spin;position:absolute;inset:-2px;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}@keyframes tilt{0%,to{transform:rotateX(16deg)rotateY(-20deg)rotate(3deg)}50%{transform:rotateX(6deg)rotateY(14deg)rotate(-2deg)}}@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes spin{to{--spin:360deg}}.frame.b-spectrum .border-spec{animation:4s linear infinite spin}.d-exp{background:radial-gradient(120% 90% at 50% 0,#26301f,#0f1215);flex-direction:column;justify-content:center;gap:14px;padding:0 9%;display:flex}.d-exp .fmt{flex-wrap:wrap;gap:6px;display:flex}.d-exp .fmt span{font:500 11px/1 var(--font-code), monospace;border:1px solid var(--line);color:var(--muted-fg);border-radius:6px;padding:6px 8px}.d-exp .fmt span.on{color:#151a10;background:var(--sage);border-color:var(--sage)}.d-exp .pb{background:#ecf4de1a;border-radius:99px;height:8px;overflow:hidden}.d-exp .pb i{background:linear-gradient(90deg, var(--sage-deep), var(--sage));width:0;height:100%;animation:4s ease-in-out infinite fill;display:block}.d-exp .meta{font:500 11px/1 var(--font-code), monospace;color:var(--muted-fg);justify-content:space-between;display:flex}@keyframes fill{0%{width:0}80%,to{width:100%}}.beam{position:relative}.beam:before{content:"";border-radius:inherit;pointer-events:none;background:conic-gradient(from var(--spin,0deg), transparent 0 70%, var(--sage) 80%, transparent 90%);-webkit-mask-composite:xor;padding:1px;animation:6s linear infinite spin;position:absolute;inset:-1px;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.switch{border-radius:12px;gap:4px;padding:4px;display:inline-flex}.switch button{color:var(--muted-fg);border-radius:9px;padding:8px 16px;font-size:14px;font-weight:600}.switch button[aria-pressed=true]{background:var(--fg);color:var(--ink)}.check{align-items:flex-start;gap:10px;display:flex}.check svg{flex:none;margin-top:4px}details{border-bottom:1px solid var(--line)}details summary{cursor:pointer;justify-content:space-between;gap:16px;padding:18px 0;font-size:17px;font-weight:600;list-style:none;display:flex}details summary::-webkit-details-marker{display:none}details summary:after{content:"+";color:var(--sage-deep);font-size:22px;line-height:1;transition:transform .2s}details[open] summary:after{transform:rotate(45deg)}details p{color:var(--muted-fg);max-width:65ch;padding-bottom:18px}
