:root{--bg: #0a0b0c;--surface: #111416;--surface-raised: #161a1d;--line: rgba(0, 255, 204, .16);--line-strong: rgba(0, 255, 204, .42);--accent: #00ffcc;--accent-soft: rgba(0, 255, 204, .1);--text: #dbe6e3;--text-muted: #9aaba7;--text-faint: #7d8c89;--warn: #ffb400;--code: #e6e990;--font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono: "Courier New", Courier, monospace;--s1: 4px;--s2: 8px;--s3: 12px;--s4: 16px;--s5: 24px;--s6: 32px;--s7: 48px;--s8: 64px;--radius: 6px;--header-h: 64px;--ease-out: cubic-bezier(.16, 1, .3, 1)}*,*:before,*:after{box-sizing:border-box}html{scroll-padding-top:calc(var(--header-h) + var(--s4))}body{margin:0;font-family:var(--font-body);font-size:15px;line-height:1.6;color:var(--text);min-height:100vh;background:var(--bg)}::selection{background:#00ffcc47;color:#fff}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}code{font-family:var(--font-mono);font-size:.92em;color:var(--accent);background:var(--accent-soft);padding:1px 5px;border-radius:3px}.demo-icon{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.demo-header{position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:var(--header-h);padding:var(--s2) var(--s5);background:#0a0b0ceb;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.demo-header__identity{display:flex;align-items:center;gap:var(--s3);min-width:0;text-decoration:none}.demo-header__title{display:inline-block;white-space:nowrap}.demo-header .chrome-title{font-size:clamp(1.25rem,3vw,1.75rem)}.demo-header__nav{display:flex;align-items:center;gap:var(--s2)}.demo-header__link{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--s3);font-size:14px;color:var(--text);text-decoration:none;border:1px solid transparent;border-radius:var(--radius);white-space:nowrap;transition:color .18s,border-color .18s,background .18s}.demo-header__link:hover{color:var(--accent);background:var(--accent-soft)}.demo-header__link--outline{color:#fff;border-color:#ffffff8c}.demo-header__link--outline:hover{color:#fff;border-color:#fff;background:#ffffff14}.demo-header__npm{width:34px;height:13px;object-fit:contain}.demo-header__link--main{color:var(--accent);border-color:var(--line-strong)}.demo-header__link--main:hover{border-color:var(--accent)}.demo-tag{display:inline-flex;align-items:center;gap:6px;padding:2px var(--s2);font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:4px;white-space:nowrap}.demo-tag--version{gap:0;padding:0;overflow:hidden;border:1px solid var(--accent)}.demo-tag--version>span{padding:3px var(--s2)}.demo-tag__key{color:var(--text);background:#2a3134}#demo-version-number{color:var(--bg);background:var(--accent)}.demo-tag--dev{color:var(--warn);background:#ffb40014;border:1px solid rgba(255,180,0,.45);padding-block:3px}.demo-tag__icon{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.demo-main{width:min(100%,1320px);margin:0 auto;padding:var(--s7) var(--s5) var(--s8)}.demo-hero{grid-column:1;grid-row:1;max-width:760px}.demo-hero__title{margin:0 0 var(--s3);font-size:clamp(1.6rem,3.2vw,2.25rem);line-height:1.15;letter-spacing:-.02em;font-weight:700;color:#fff;text-wrap:balance}.demo-hero__lead{margin:0 0 var(--s5);max-width:68ch;font-size:16px;color:var(--text-muted)}.demo-hero__lead strong{color:var(--text)}.demo-status{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3)}.demo-install{display:inline-flex;align-items:center;gap:var(--s3);min-height:40px;padding:0 var(--s3) 0 var(--s4);font-family:var(--font-mono);font-size:14px;color:var(--text);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);cursor:pointer;transition:border-color .18s,background .18s}.demo-install:hover{border-color:var(--accent);background:var(--surface-raised)}.demo-install__prompt{color:var(--accent)}.demo-install__cmd{padding:0;background:none;color:#fff;white-space:nowrap}.demo-install__copy{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);border-left:1px solid var(--line);padding-left:var(--s3)}.demo-install--copied{border-color:var(--accent);animation:demo-copied .9s var(--ease-out)}@keyframes demo-copied{0%{box-shadow:0 0 #00ffcc80}30%{box-shadow:0 0 0 4px #00ffcc2e}to{box-shadow:0 0 #0fc0}}.demo-bench{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto 1fr;column-gap:var(--s6);row-gap:var(--s6);align-items:start}.demo-panel{grid-column:2;grid-row:1 / span 2}.demo-stage{grid-column:1;grid-row:2;display:flex;flex-direction:column;align-items:center;gap:var(--s4);min-width:0}.paddle-game-wrapper{position:relative;width:100%;padding:var(--s3);background:#050606;border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 18px 50px -20px #00ffcc59,0 2px 8px #0009}#paddle-game-demo{width:100%;aspect-ratio:1000 / 700;display:block}.demo-panel{padding:var(--s5);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}.demo-panel__title{margin:0 0 var(--s1);font-size:18px;font-weight:700;color:#fff}.demo-panel__intro{margin:0 0 var(--s5);font-size:14px;color:var(--text-muted)}.demo-steps{counter-reset:step;list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.demo-step{counter-increment:step;position:relative;padding:0 0 var(--s5) 36px}.demo-step+.demo-step{padding-top:var(--s5);border-top:1px solid var(--line)}.demo-step:before{content:counter(step);position:absolute;left:0;width:24px;height:24px;display:grid;place-items:center;font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--accent);border:1px solid var(--line-strong);border-radius:50%}.demo-step:last-child{padding-bottom:0}.demo-step__title{margin:1px 0 var(--s1);font-size:15px;font-weight:600;color:#fff}.demo-step__text{margin:0 0 var(--s3);font-size:14px;line-height:1.55;color:var(--text-muted)}.demo-step__text strong{color:var(--text)}.demo-step__actions{display:flex;flex-wrap:wrap;gap:var(--s2)}.demo-test{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s3)}.demo-test__label{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--text-muted)}.demo-check{display:inline-flex;align-items:center;gap:var(--s2);font-size:14px;color:var(--text);cursor:pointer}.demo-check input{width:16px;height:16px;margin:0;accent-color:var(--accent);cursor:pointer}.demo-snippet{margin:0 0 var(--s3);padding:var(--s3);overflow-x:auto;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);font-size:13px}.demo-snippet code{padding:0;background:none;color:var(--code);white-space:pre}.demo-btn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 var(--s4);font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--bg);background:var(--accent);border:1px solid var(--accent);border-radius:var(--radius);cursor:pointer;transition:background .18s,color .18s,border-color .18s;-webkit-tap-highlight-color:transparent}.demo-btn:hover{background:#6effe0;border-color:#6effe0}.demo-btn--quiet{color:var(--accent);background:transparent;border-color:var(--line-strong)}.demo-btn--quiet:hover{background:var(--accent-soft);border-color:var(--accent)}.demo-btn--on{color:var(--warn);background:#ffb4001a;border-color:#ffb40099}.demo-btn--on:hover{background:#ffb4002e;border-color:var(--warn)}.demo-theme-wrapper{position:relative;display:inline-flex;align-items:center}.demo-players{display:flex;justify-content:center}.demo-players__name{font-family:var(--font-mono);font-size:14px;color:var(--accent)}.demo-about{max-width:68ch;margin:var(--s8) auto 0;padding-top:var(--s6);border-top:1px solid var(--line);text-align:center}.demo-description{margin:0 0 var(--s4);font-size:14px;color:var(--text-muted)}.demo-footer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--s4);font-size:13px;color:var(--text-faint)}.demo-footer a{color:var(--accent);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}.demo-footer a:hover{text-decoration-color:var(--accent)}@media (prefers-reduced-motion: reduce){.demo-install--copied{animation:none}html{scroll-behavior:auto}}.demo-controls{display:flex;flex-direction:column;align-items:center;gap:12px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.key-clusters{display:flex;gap:16px;align-items:flex-end;justify-content:center}.key-cluster{display:flex;flex-direction:column;align-items:center;gap:5px}.key-cluster__label{font-size:9px;color:#999;font-family:Courier New,Courier,monospace;letter-spacing:1px;text-transform:uppercase;margin-bottom:2px}.key-row{display:flex;gap:5px}.key{width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:linear-gradient(170deg,#2e2e2e,#1d1d1d);border:1px solid #3e3e3e;border-bottom:4px solid #050505;border-radius:6px;color:#00ffccd9;font-size:15px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-touch-callout:none;box-shadow:inset 0 1px #ffffff17,0 0 7px #00ffcc24;transition:background .06s,border-color .06s,box-shadow .06s,transform .06s;outline:none;font-family:inherit;-webkit-tap-highlight-color:transparent;position:relative}.key--disabled{background:linear-gradient(170deg,#222,#181818);border-color:#333;border-bottom-color:#070707;color:#555;box-shadow:inset 0 1px #ffffff0a;opacity:1}.key--active{background:linear-gradient(170deg,#1a1a1a,#222);border-color:#0fc9;border-bottom-width:1px;color:#0fc;box-shadow:inset 0 2px 4px #0009,0 0 12px #00ffccbf,0 0 26px #00ffcc4d;transform:translateY(3px)}.demo-controls__hint{font-size:12px;color:#999;margin:0;letter-spacing:.4px}.key__icon{width:14px;height:14px;fill:currentColor}.qs-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:500;display:flex;align-items:center;justify-content:center}.qs-modal[hidden]{display:none}.qs-modal__backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000c7;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer}.qs-modal__box{position:relative;display:flex;flex-direction:column;background:#111;border:1.5px solid #00ffcc;box-shadow:0 0 28px #00ffcc47,0 0 70px #00ffcc14;border-radius:6px;width:min(540px,92vw);max-height:82vh;overflow:hidden;z-index:1;font-family:Courier New,Courier,monospace}.qs-modal__header{position:sticky;top:0;z-index:2;flex-shrink:0;background:#111;padding:30px 32px 0}.qs-modal__close{position:absolute;top:12px;right:14px;background:none;border:none;color:#666;font-size:24px;cursor:pointer;line-height:1;padding:0;transition:color .15s}.qs-modal__close:hover{color:#0fc}.qs-modal__title{font-size:18px;color:#0fc;text-shadow:0 0 10px rgba(0,255,204,.4);margin:0 0 22px;letter-spacing:3px;text-transform:uppercase}.qs-modal__body{flex:1;min-height:0;overflow-x:auto;overflow-y:auto;padding:0 32px 28px}.qs-modal__body::-webkit-scrollbar{width:4px;height:4px}.qs-modal__body::-webkit-scrollbar-thumb{background:#00ffcc8c;border-radius:2px}.qs-step{margin-bottom:20px}.qs-step h3,.qs-step__title{font-size:12px;color:#0fc;opacity:.75;margin:0 0 7px;letter-spacing:1px;text-transform:uppercase}.qs-tip{font-size:13px;color:#62cb31;margin:0 0 8px}.qs-tip code{background:#1a1a1a;border:1px solid #333;border-radius:3px;padding:1px 5px;color:#e6e990}.qs-tip-sub{font-size:12px;color:#aaa;margin:6px 0 14px}.qs-tip-sub strong{color:#ccc}.qs-tip-sub code{background:#1a1a1a;border:1px solid #333;border-radius:3px;padding:1px 5px;color:#e6e990}.qs-tip-alt{font-size:12px;color:#777;margin:14px 0 6px}.qs-step pre{background:#0a0a0a;border:1px solid #2a2a2a;border-radius:4px;padding:12px 14px;margin:0;overflow:visible;white-space:pre;min-width:max-content;font-size:12px;line-height:1.7}.qs-step pre code{color:#e6e990;font-family:Courier New,Courier,monospace}.qs-tabs{display:flex;border-bottom:1px solid #2a2a2a;margin:0 0 22px}.qs-tab{padding:9px 20px;background:none;border:none;border-bottom:2px solid transparent;color:#999;font-family:Courier New,Courier,monospace;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;margin-bottom:-1px;transition:color .15s,border-color .15s,text-shadow .15s}.qs-tab:hover{color:#0fc}.qs-tab--active{color:#0fc;border-bottom-color:#0fc;text-shadow:0 0 8px rgba(0,255,204,.45)}.qs-panel--hidden{display:none}.qs-links{margin-top:24px;display:flex;gap:10px}.qs-btn{display:inline-block;padding:8px 18px;border:1.5px solid rgba(0,255,204,.45);border-radius:4px;color:#0fc;text-decoration:none;font-size:12px;font-family:Courier New,Courier,monospace;transition:background .18s,border-color .18s,box-shadow .18s}.qs-btn:hover{background:#00ffcc14;border-color:#0fc;box-shadow:0 0 10px #00ffcc4d}@media (max-width: 1080px){.demo-bench{grid-template-columns:minmax(0,1fr);grid-template-rows:none}.demo-hero,.demo-stage,.demo-panel{grid-column:1;grid-row:auto}}@media (max-width: 640px){:root{--header-h: 56px}.demo-header{padding:var(--s2) var(--s4)}.demo-header__link{padding:0 var(--s2);font-size:13px}#btn-quickstart{display:none}.demo-main{padding:var(--s5) var(--s4) var(--s7)}.demo-panel{padding:var(--s4)}.paddle-game-wrapper{padding:var(--s1)}}.chrome-title{position:relative;display:inline-block;font-size:clamp(1.7rem,6vw,2.9rem);font-family:Arial Black,Arial Bold,Impact,Haettenschweiler,system-ui,sans-serif;font-weight:900;letter-spacing:.08em;text-transform:uppercase;line-height:1.05;color:#3a1a7a;text-shadow:1px 1px 0 #35176e,2px 2px 0 #2e1461,3px 3px 0 #271152,4px 4px 0 #200e43,5px 5px 0 #190b34,6px 7px 10px rgba(0,0,0,.55);filter:drop-shadow(0 1px 12px rgba(150,90,255,.55)) drop-shadow(0 0 34px rgba(0,190,255,.28))}.chrome-title:before{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;color:transparent;text-shadow:none;background-image:repeating-linear-gradient(180deg,rgba(0,0,0,.34) 0,rgba(0,0,0,.34) 1px,transparent 1px,transparent 3px),linear-gradient(180deg,#ffe9fb,#f6a9ff 14%,#b96bff 34%,#7a4bf0 49.4%,#fff,#6fe4ff 50.6%,#2fa8f5 68%,#2f4fd8 86%,#23268f);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:.6px rgba(216,240,255,.5)}.chrome-title:after{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;color:transparent;text-shadow:none;-webkit-text-stroke:0;background-image:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.9) 47%,rgba(255,255,255,.9) 50%,transparent 59%);background-size:260% 100%;background-position:190% 0;-webkit-background-clip:text;background-clip:text;animation:chrome-title-sheen 9s ease-in-out infinite}@keyframes chrome-title-sheen{0%{background-position:190% 0}28%,to{background-position:-70% 0}}.chrome-title__tag{display:block;margin-top:.3rem;font-family:system-ui,sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.42em;text-indent:.42em;color:#ff5fd2;text-shadow:0 0 10px rgba(255,60,200,.75),0 0 22px rgba(255,60,200,.35)}@media (prefers-reduced-motion: reduce){.chrome-title:after{content:none}}.guide{--guide-accent: #00ffcc;--guide-text: #bbb;--guide-text-dim: #888;--guide-heading: #ddd;--guide-line: #2a2a2a;--guide-panel: rgba(0, 0, 0, .25);--guide-code: #e6e990;--guide-up: #62cb31;--guide-down: #e84040;--guide-font: "Courier New", Courier, monospace;font-family:var(--guide-font);color:var(--guide-text)}.guide__section{margin-bottom:22px}.guide__section:last-child{margin-bottom:0}.guide__title{font-size:14px;color:var(--guide-accent);margin:0 0 10px;letter-spacing:1px}.guide__text{font-size:12px;line-height:1.7;margin:0 0 10px}.guide__list{margin:0 0 4px;padding:0 0 0 18px;font-size:12px;line-height:1.7}.guide__list li{margin-bottom:7px}.guide code{background:#ffffff0a;border:1px solid var(--guide-line);border-radius:3px;padding:1px 5px;color:var(--guide-code);font-size:11px;font-family:var(--guide-font)}.guide__key{display:inline-block;min-width:20px;height:20px;line-height:19px;padding:0 4px;text-align:center;font-size:10px;background:linear-gradient(170deg,#2e2e2e,#1d1d1d);border:1px solid #3e3e3e;border-bottom:3px solid #050505;border-radius:3px;color:var(--guide-accent);font-family:var(--guide-font);vertical-align:middle;margin:0 1px}.guide__item{border:1px solid var(--guide-line);border-radius:4px;padding:14px 16px;margin-bottom:12px;background:var(--guide-panel)}.guide__item:last-child{margin-bottom:0}.guide__item-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}.guide__item-head h4{font-size:12px;color:var(--guide-accent);margin:0;letter-spacing:.5px}.guide__item-config{font-size:10px;color:var(--guide-text-dim);font-weight:400;letter-spacing:0}.guide__item-config code{color:var(--guide-text-dim);font-size:10px}.guide__item p{font-size:12px;color:var(--guide-text-dim);line-height:1.6;margin:0}.guide__canvas{flex-shrink:0;display:block;border-radius:3px;background:#0006}.guide__legend{margin-bottom:18px}.guide__legend:last-child{margin-bottom:0}.guide__legend-title{font-size:11px;margin:0 0 10px;letter-spacing:1px;text-transform:uppercase}.guide__legend-title--up{color:var(--guide-up)}.guide__legend-title--down{color:var(--guide-down)}.guide__legend-grid{display:flex;flex-direction:column;gap:10px}.guide__entry{display:flex;align-items:center;gap:12px;background:var(--guide-panel);border:1px solid var(--guide-line);border-radius:4px;padding:10px 12px}.guide__entry canvas{flex-shrink:0;display:block}.guide__entry-info{display:flex;flex-direction:column;gap:3px}.guide__entry-name{font-size:11px;color:var(--guide-heading);font-weight:700;letter-spacing:.3px}.guide__entry-desc{font-size:11px;color:var(--guide-text-dim);line-height:1.5}.theme-picker{--picker-accent: var(--accent, #00ffcc);position:relative;display:inline-block;text-align:left;font:inherit}.theme-picker__button{display:flex;align-items:center;gap:.6rem;width:100%;padding:.4rem .6rem;background:#131313;color:inherit;border:1px solid rgba(255,255,255,.18);border-radius:4px;font:inherit;cursor:pointer;text-align:left}.theme-picker__button:hover,.theme-picker__button[aria-expanded=true]{border-color:var(--picker-accent)}.theme-picker__button:focus-visible,.theme-picker__option:focus-visible{outline:2px solid var(--picker-accent);outline-offset:1px}.theme-picker__name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.theme-picker__caret{color:var(--picker-accent);font-size:.8em}.theme-picker__thumb{display:block;flex-shrink:0;border:1px solid rgba(255,255,255,.22);border-radius:2px}.theme-picker__list{position:absolute;z-index:20;top:calc(100% + 4px);left:0;width:max-content;min-width:100%;max-width:min(90vw,22rem);max-height:17rem;overflow-y:auto;overflow-x:hidden;margin:0;padding:4px;list-style:none;background:#0f0f0f;border:1px solid var(--picker-accent);border-radius:4px;box-shadow:0 8px 24px #0009}.theme-picker__list[hidden]{display:none}.theme-picker__option{display:flex;align-items:center;gap:.6rem;width:100%;padding:.35rem .5rem;background:transparent;color:inherit;border:1px solid transparent;border-radius:3px;font:inherit;text-align:left;cursor:pointer;white-space:nowrap}.theme-picker__option:hover,.theme-picker__option[data-current=true]{background:#ffffff0f;border-color:var(--picker-accent)}.theme-picker__option[aria-selected=true] .theme-picker__label{color:var(--picker-accent)}