/* Packs: Sound design (.sd-) and Render pipeline (.rp-). Keyframes k-sd-* / k-rp-*. Sizes in stage pixels. */

/* ================= Sound design ================= */
.sd-root{position:absolute;inset:0;padding:120px 70px 110px;display:flex;flex-direction:column;gap:34px;z-index:2}
.land .sd-root{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);padding:70px 90px 80px;gap:36px 56px}
.land .sd-hd{grid-column:1/-1}
.sd-hd{display:flex;align-items:center;gap:26px}
.sd-id{font:600 30px/1 'JetBrains Mono',monospace;background:var(--ac);color:#fff;padding:14px 18px;border-radius:14px;flex:none}
.sd-tt{min-width:0;flex:1}
.sd-tt b{display:block;font-size:60px;font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
.sd-tt small{display:block;margin-top:10px;font:500 24px/1.3 'JetBrains Mono',monospace;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-play{flex:none;display:inline-flex;align-items:center;gap:14px;background:#fff;color:#0A1130;font:700 34px/1 'Inter Tight',sans-serif;padding:22px 34px 22px 28px;border-radius:999px;cursor:pointer;pointer-events:auto;position:relative;z-index:5;user-select:none}
.sd-play svg{width:34px;height:34px;fill:#0A1130}
.sd-play:focus-visible{outline:4px solid var(--ac2);outline-offset:4px}

.sd-demo{position:relative;flex:1;min-height:0;border-radius:40px;background:var(--card);overflow:hidden;display:grid;place-items:center}
.sd-demo>*{grid-area:1/1}
.sd-side{display:flex;flex-direction:column;gap:30px;min-height:0}
.land .sd-side{justify-content:center}

/* waveform + envelope */
.sd-wave{position:relative;height:290px;border-radius:30px;background:var(--soft);overflow:hidden;flex:none}
.land .sd-wave{height:300px}
.sd-bars{position:absolute;inset:34px 30px;display:flex;align-items:center;gap:6px}
.sd-bars i{flex:1;height:100%;border-radius:6px;background:var(--ac);transform:scaleY(.04)}
.sd-env{position:absolute;inset:34px 30px;width:calc(100% - 60px);height:calc(100% - 68px);overflow:visible}
.sd-env polyline{fill:none;stroke:var(--ac2);stroke-width:3;vector-effect:non-scaling-stroke;stroke-linejoin:round;opacity:.9}
.sd-sweep{position:absolute;inset:20px 30px}
.sd-sweep i,.sd-phw i{position:absolute;right:0;top:0;bottom:0;width:4px;border-radius:2px;background:#fff}

/* mini timeline */
.sd-tl{position:relative;height:218px;margin-left:66px;flex:none}
.sd-ticks{position:absolute;left:0;right:0;top:0;height:44px}
.sd-tk{position:absolute;top:0;width:2px;height:12px;background:var(--line)}
.sd-tk em{position:absolute;top:14px;left:0;transform:translateX(-50%);font:600 21px/1 'JetBrains Mono',monospace;font-style:normal;color:var(--mute);white-space:nowrap}
.sd-trk{position:absolute;left:0;right:0;height:52px;border-radius:12px;background:var(--soft)}
.sd-lbl{position:absolute;left:-60px;top:6px;width:40px;height:40px;color:var(--mute)}
.sd-lbl svg{width:40px;height:40px}
.sd-blkm,.sd-blks{position:absolute;top:8px;bottom:8px;border-radius:8px;min-width:10px}
.sd-blkm{background:var(--ac)}
.sd-blks{background:var(--ac2)}
.sd-mk0,.sd-mko{position:absolute;top:46px;height:136px;width:3px;margin-left:-1px;background:#fff}
.sd-mko{background:var(--ac2)}
.sd-mk0 em,.sd-mko em{position:absolute;top:140px;font:700 24px/1 'JetBrains Mono',monospace;font-style:normal;color:#fff;white-space:nowrap}
.sd-mko em{color:var(--ac2)}
.sd-mk0.l em,.sd-mko.l em{right:8px}
.sd-mk0.r em,.sd-mko.r em{left:8px}
.sd-phc{position:absolute;left:0;right:0;top:46px;height:136px;overflow:hidden;pointer-events:none}
.sd-phw{position:absolute;inset:0}
.sd-phw i{background:#FF6A45}

.sd-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;flex:none}
.sd-stats div{background:var(--soft);border-radius:24px;padding:22px 26px}
.sd-stats small{display:block;font:600 22px/1 'JetBrains Mono',monospace;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
.sd-stats b{display:block;margin-top:12px;font-size:40px;font-weight:800;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* demo elements */
.sd-card{width:560px;padding:36px;border-radius:32px;background:#fff;color:#111113;display:grid;grid-template-columns:auto 1fr;gap:20px 24px;align-items:center;box-sizing:border-box}
.sd-card b{display:block;font-size:36px;font-weight:700;letter-spacing:-.02em}
.sd-card small{display:block;font-size:24px;color:#8A8A90;margin-top:4px}
.sd-sq{width:84px;height:84px;border-radius:22px;background:var(--ac);color:#fff;display:grid;place-items:center}
.sd-sq svg{width:44px;height:44px}
.sd-b .sd-sq{background:#FF6A45}
.sd-ln{grid-column:1/-1;display:block;height:18px;border-radius:9px;background:#ECECEA}
.sd-persp{perspective:1400px}
.sd-word{font-size:120px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink);text-align:center}
.sd-big{font-size:280px}
.sd-b2{font-size:140px;white-space:nowrap}
.sd-gl{display:grid}
.sd-gl>span{grid-area:1/1}
.sd-gr{color:#FF3D6E;mix-blend-mode:screen}
.sd-gb{color:#00C2FF;mix-blend-mode:screen}
.sd-meter{position:absolute;left:60px;right:60px;bottom:50px;height:14px;border-radius:7px;background:var(--soft);overflow:hidden}
.sd-meter i{display:block;height:100%;background:var(--ac2);transform-origin:0 50%;transform:scaleX(0)}
.sd-panel{position:absolute;inset:0;background:var(--ac);transform:translateX(-100%)}
.sd-btn{position:relative;z-index:1;background:var(--ac);color:#fff;font-size:48px;font-weight:700;padding:36px 80px;border-radius:999px}
.sd-ripple{width:240px;height:240px;border-radius:50%;border:6px solid var(--ac2);box-sizing:border-box;opacity:0}
.sd-cur{position:relative;z-index:2;width:90px;height:90px}
.sd-dot{width:220px;height:220px;border-radius:50%;background:var(--ac);color:#fff;display:grid;place-items:center}
.sd-dot svg{width:110px;height:110px}
.sd-dk{background:var(--ac2);color:#111113;transform-origin:50% 12%}
.sd-badge{position:relative;left:86px;top:-86px;width:84px;height:84px;border-radius:50%;background:#FF3D6E;color:#fff;font-size:44px;font-weight:800;display:grid;place-items:center}
.sd-field{display:flex;align-items:center;gap:22px;background:#fff;color:#111113;border-radius:28px;padding:34px 44px;min-width:640px;box-sizing:border-box;font-size:48px;font-weight:600}
.sd-field svg{width:50px;height:50px;color:var(--ac);flex:none}
.sd-typ{display:inline-block;overflow:hidden;white-space:nowrap;width:0;font-family:'JetBrains Mono',monospace;font-weight:600}
.sd-caret{width:5px;height:60px;background:var(--ac);animation:k-sd-blink 1s steps(2) infinite}
.sd-err span:nth-child(2){flex:1}
.sd-x{width:60px;height:60px;border-radius:50%;background:#E5484D;color:#fff;display:grid;place-items:center}
.sd-x svg{width:36px;height:36px;color:#fff}
.sd-chat{display:flex;flex-direction:column;gap:22px;width:680px}
.sd-msg{padding:26px 34px;border-radius:30px;font-size:36px;font-weight:600;max-width:80%}
.sd-msg.u{align-self:flex-end;background:var(--soft);color:var(--ink)}
.sd-msg.a{align-self:flex-start;background:#fff;color:#111113;transform-origin:0 100%}
.sd-row{display:flex;align-items:center;gap:26px;background:#fff;color:#111113;border-radius:30px;padding:34px 40px;font-size:40px;font-weight:700}
.sd-row svg{width:52px;height:52px;color:var(--ac)}
.sd-sw{position:relative;width:132px;height:74px;border-radius:37px;background:#D6D6D2;margin-left:20px}
.sd-sw i{position:absolute;left:8px;top:8px;width:58px;height:58px;border-radius:50%;background:#fff}
.sd-ring{width:300px;height:300px;border-radius:50%;border:8px solid var(--ac2);box-sizing:border-box;opacity:0}
.sd-logo{width:220px;height:220px;border-radius:60px;background:var(--ac);color:#fff;display:grid;place-items:center;position:relative;z-index:1}
.sd-logo svg{width:120px;height:120px}
.sd-stack{display:flex;flex-direction:column;align-items:center;gap:24px}
.sd-blk{position:relative;padding:0 30px}
.sd-blk span{position:absolute;inset:0;background:var(--ac);transform:scaleX(0)}
.sd-blk b{position:relative;display:block;font-size:110px;font-weight:800;letter-spacing:-.04em;line-height:1.1;color:var(--ink);opacity:0}
.sd-star{position:absolute;width:70px;height:70px;margin:-35px 0 0 -35px;color:var(--ac2)}
.sd-star svg{width:70px;height:70px;fill:currentColor}
.sd-words{font-size:92px;font-weight:800;letter-spacing:-.03em;line-height:1.12;text-align:center;max-width:820px;color:var(--ink)}
.sd-words span{display:inline-block}
.sd-mk span{position:relative;display:inline-block}
.sd-mk i{position:absolute;left:-14px;right:-14px;top:8%;bottom:4%;border-radius:12px;background:var(--ac);transform-origin:0 50%;transform:scaleX(0)}
.sd-mk b{position:relative}
.sd-st{position:relative;color:var(--mute)}
.sd-st i{position:absolute;left:-12px;right:-12px;top:50%;height:14px;margin-top:-4px;border-radius:7px;background:#FF3D6E;transform-origin:0 50%;transform:scaleX(0)}
.sd-new{font-size:150px;color:var(--ac2)}
.sd-cnt{font-size:190px;font-variant-numeric:tabular-nums;display:flex;align-items:flex-start;line-height:1}
.sd-reel{display:inline-block;height:1em;overflow:hidden}
.sd-reel>span{display:flex;flex-direction:column}
.sd-reel b{display:block;height:1em;line-height:1}
.sd-coin{color:var(--ac2);width:220px;height:220px}
.sd-coin svg{width:220px;height:220px}
.sd-plus{position:relative;left:230px;top:-150px;font-size:70px;font-weight:800;color:#3DDC97}
.sd-tray{position:relative;top:140px;width:380px;height:18px;border-radius:9px;background:var(--soft)}
.sd-chart{width:760px;height:380px;overflow:visible}
.sd-chart path,.sd-ok path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.sd-chart path{stroke:var(--ac2);stroke-width:12}
.sd-ok{width:240px;height:240px;border-radius:50%;background:#0FA37F;display:grid;place-items:center}
.sd-ok svg{width:160px;height:160px}
.sd-ok path{stroke:#fff;stroke-width:10}
.sd-chip{display:inline-flex;align-items:center;gap:16px;background:var(--soft);color:var(--ink);font-size:40px;font-weight:700;padding:22px 34px;border-radius:999px;opacity:0}
.sd-chip svg{width:44px;height:44px;color:var(--ac2)}
.sd-lg{display:flex;align-items:center;gap:34px}
.sd-lg .sd-logo{width:170px;height:170px;border-radius:46px}
.sd-lg .sd-logo svg{width:96px;height:96px}
.sd-lg b{font-size:120px;font-weight:800;letter-spacing:-.04em;color:var(--ink)}

@keyframes k-sd-barh{from{transform:scaleY(.04)}to{transform:scaleY(var(--h))}}
@keyframes k-sd-ph{from{transform:translateX(-100%)}to{transform:none}}
@keyframes k-sd-outL{from{transform:none}to{transform:translateX(-150%)}}
@keyframes k-sd-inR{from{transform:translateX(150%)}to{transform:none}}
@keyframes k-sd-whipOut{from{transform:none;filter:none}to{transform:translateX(-170%);filter:blur(26px)}}
@keyframes k-sd-whipIn{from{transform:translateX(170%);filter:blur(26px)}to{transform:none;filter:none}}
@keyframes k-sd-up{from{transform:translateY(120%);opacity:0}to{transform:none;opacity:1}}
@keyframes k-sd-down{from{transform:none}to{transform:translateY(260%) rotate(10deg)}}
@keyframes k-sd-zoomOut{from{transform:none;opacity:1}to{transform:scale(3);opacity:0}}
@keyframes k-sd-zoomIn{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes k-sd-glitch{0%{opacity:0}10%{opacity:1;transform:skewX(-14deg) translateX(-12px)}30%{transform:skewX(9deg) translateX(14px)}50%{transform:translateX(-6px)}70%,100%{opacity:1;transform:none}}
@keyframes k-sd-glR{0%{opacity:0}10%{opacity:1;transform:translate(-16px,5px);clip-path:inset(0 0 55% 0)}30%{transform:translate(18px,-6px);clip-path:inset(40% 0 20% 0)}50%{transform:translate(-8px,0);clip-path:inset(10% 0 60% 0)}70%{transform:translate(8px,4px);clip-path:none}90%,100%{opacity:0;transform:none}}
@keyframes k-sd-glB{0%{opacity:0}10%{opacity:1;transform:translate(16px,-4px);clip-path:inset(50% 0 0 0)}30%{transform:translate(-14px,6px);clip-path:inset(0 0 45% 0)}50%{transform:translate(10px,0);clip-path:inset(60% 0 5% 0)}70%{transform:translate(-6px,-3px);clip-path:none}90%,100%{opacity:0;transform:none}}
@keyframes k-sd-flip{from{transform:rotateY(-100deg);opacity:0}40%{opacity:1}to{transform:none;opacity:1}}
@keyframes k-sd-meter{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes k-sd-panel{0%{transform:translateX(-100%)}50%{transform:none}100%{transform:translateX(100%)}}
@keyframes k-sd-hide{from{opacity:1}to{opacity:0}}
@keyframes k-sd-fade{from{opacity:0}to{opacity:1}}
@keyframes k-sd-press{0%,100%{transform:none}40%{transform:scale(.9)}}
@keyframes k-sd-ripple{0%{transform:scale(.3);opacity:0}10%{opacity:1}100%{transform:scale(2.4);opacity:0}}
@keyframes k-sd-cur{from{transform:translate(320px,300px)}to{transform:translate(90px,60px)}}
@keyframes k-sd-pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:none;opacity:1}}
@keyframes k-sd-type{from{width:0}to{width:11ch}}
@keyframes k-sd-blink{50%{opacity:0}}
@keyframes k-sd-bub{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
@keyframes k-sd-swing{0%,100%{transform:none}15%{transform:rotate(18deg)}30%{transform:rotate(-14deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(3deg)}}
@keyframes k-sd-flash{0%{opacity:0}12%{opacity:.95}100%{opacity:0}}
@keyframes k-sd-knob{from{transform:none}to{transform:translateX(58px)}}
@keyframes k-sd-swbg{from{background:#D6D6D2}to{background:#0FA37F}}
@keyframes k-sd-shake{0%,100%{transform:none}15%{transform:translateX(-26px)}30%{transform:translateX(22px)}45%{transform:translateX(-14px)}60%{transform:translateX(10px)}75%{transform:translateX(-5px)}}
@keyframes k-sd-red{from{box-shadow:0 0 0 0 #E5484D}to{box-shadow:0 0 0 6px #E5484D}}
@keyframes k-sd-slam{0%{opacity:0;transform:scale(3);filter:blur(10px)}60%{opacity:1;transform:scale(.94);filter:none}100%{opacity:1;transform:none}}
@keyframes k-sd-ring{0%{transform:scale(.2);opacity:0}10%{opacity:1}100%{transform:scale(2.6);opacity:0}}
@keyframes k-sd-bar{0%{transform:scaleX(0);transform-origin:0 50%}50%{transform:scaleX(1);transform-origin:0 50%}51%{transform-origin:100% 50%}100%{transform:scaleX(0);transform-origin:100% 50%}}
@keyframes k-sd-twinkle{0%{transform:scale(0) rotate(-90deg);opacity:0}60%{transform:scale(1.3) rotate(10deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes k-sd-word{from{opacity:0;filter:blur(12px);transform:translateY(26px)}to{opacity:1;filter:none;transform:none}}
@keyframes k-sd-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes k-sd-reel{from{transform:none}to{transform:translateY(calc(var(--n) * -1em))}}
@keyframes k-sd-drop{0%{transform:translateY(-700px)}60%{transform:none}78%{transform:translateY(-44px)}100%{transform:none}}
@keyframes k-sd-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes k-sd-wm{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}

/* ================= Render pipeline ================= */
.rp-root{position:absolute;inset:0;padding:120px 70px 110px;display:flex;flex-direction:column;gap:34px;z-index:2}
.land .rp-root{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);padding:70px 90px 80px;gap:30px 50px}
.land .rp-term{grid-column:2;grid-row:1/-1}
.land .rp-tl{align-self:start}
.rp-hd{display:flex;align-items:center;gap:26px}
.rp-id{font:600 30px/1 'JetBrains Mono',monospace;background:var(--ac);color:#fff;padding:14px 18px;border-radius:14px;flex:none}
.rp-hd b{display:block;font-size:60px;font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
.rp-hd small{display:block;margin-top:10px;font:500 24px/1 'JetBrains Mono',monospace;color:var(--mute)}
.rp-q{background:var(--card);border-radius:36px;padding:30px 34px 14px;flex:none}
.rp-qh{display:flex;align-items:center;gap:16px;font-size:32px;font-weight:700;color:var(--ink);padding-bottom:18px}
.rp-qh svg{width:38px;height:38px;color:var(--ac)}
.rp-live{margin-left:auto;display:flex;align-items:center;gap:12px;font:600 22px/1 'JetBrains Mono',monospace;color:#3DDC97}
.rp-live i{width:14px;height:14px;border-radius:50%;background:#3DDC97;animation:k-rp-blink 1s steps(2) infinite}
.rp-job{display:flex;align-items:center;gap:24px;padding:20px 0;border-top:2px solid var(--line)}
.rp-sq{width:76px;height:76px;border-radius:20px;background:var(--soft);color:var(--ac2);display:grid;place-items:center;flex:none}
.rp-sq svg{width:40px;height:40px}
.rp-jt{flex:1;min-width:0}
.rp-jt b{display:block;font:600 30px/1.2 'JetBrains Mono',monospace;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-jt small{display:block;margin-top:6px;font:500 22px/1.2 'JetBrains Mono',monospace;color:var(--mute)}
.rp-bar{display:block;height:14px;border-radius:7px;background:var(--soft);margin-top:14px;overflow:hidden}
.rp-bar i{display:block;height:100%;background:var(--ac);transform-origin:0 50%;transform:scaleX(0)}
.rp-ok{width:56px;height:56px;border-radius:50%;background:#0FA37F;color:#fff;display:grid;place-items:center;flex:none;opacity:0}
.rp-ok svg{width:32px;height:32px}
.rp-tl{position:relative;height:150px;border-radius:28px;background:var(--card);padding:24px;display:flex;align-items:stretch;overflow:hidden;flex:none;box-sizing:border-box}
.rp-clip{display:flex;align-items:center;padding:0 22px;border-radius:14px;color:#fff;font-size:28px;font-weight:700;min-width:0;white-space:nowrap;overflow:hidden}
.rp-xf{width:56px;height:56px;margin:0 -28px;align-self:center;border-radius:50%;background:var(--card);color:var(--ac2);display:grid;place-items:center;position:relative;z-index:2;flex:none}
.rp-xf svg{width:34px;height:34px}
.rp-film span{flex:1;margin:0 4px;border-radius:10px;background:var(--soft);border:3px solid var(--line)}
.rp-film span:nth-child(4n+1){background:var(--ac);border-color:var(--ac)}
.rp-au{flex-direction:column;gap:12px;justify-content:center}
.rp-xf+.rp-clip{padding-left:40px}
.rp-trk{height:45px;flex:none;display:flex;align-items:center;gap:16px}
.rp-trk>span{width:36px;height:36px;color:var(--mute);flex:none}
.rp-trk>span svg{width:36px;height:36px}
.rp-wv{flex:1;height:45px;display:flex;align-items:center;gap:4px}
.rp-wv i{flex:1;border-radius:3px;background:var(--ac)}
.rp-duck .rp-wv i{background:var(--ac2)}
.rp-duck .rp-wv i:nth-child(n+10):nth-child(-n+48){transform:scaleY(.35)}
.rp-ph{position:absolute;inset:0 24px;pointer-events:none}
.rp-ph i{position:absolute;right:0;top:12px;bottom:12px;width:4px;border-radius:2px;background:#FF6A45}
.rp-term{flex:1;min-height:0;background:#07080B;border-radius:30px;padding:28px 34px;overflow:hidden;font:500 25px/1.5 'JetBrains Mono',monospace;color:#D8DAE5}
.land .rp-term{font-size:22px}
.rp-tb{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.rp-tb i{width:16px;height:16px;border-radius:50%;background:#2A2B31}
.rp-tb span{margin-left:12px;font-size:22px;color:#6B6F80}
.rp-cl{white-space:pre-wrap;word-break:break-all;margin-bottom:16px}
.rp-cl .p{color:#3DDC97}
.rp-cl.c{color:#6B6F80}

@keyframes k-rp-in{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes k-rp-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes k-rp-pop{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:none}}
@keyframes k-rp-ph{from{transform:translateX(-100%)}to{transform:none}}
@keyframes k-rp-fade{from{opacity:0}to{opacity:1}}
@keyframes k-rp-blink{50%{opacity:.2}}