*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:Courier New,Courier,monospace;color:#ccc;min-height:100vh;background:#0a0a0a}.demo-header{position:sticky;top:0;z-index:200;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;min-height:68px;padding:8px 20px;background:#080808f5;border-bottom:1px solid rgba(0,255,204,.25);box-shadow:0 2px 16px #00ffcc14;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.demo-header__identity{grid-column:2;grid-row:1;display:flex;align-items:center;min-width:0}.demo-header__title{display:inline-block;text-align:center;white-space:nowrap}@keyframes demo-badge-pulse{0%,to{box-shadow:0 0 6px #00ffcc4d;text-shadow:0 0 6px rgba(0,255,204,.4)}50%{box-shadow:0 0 14px #00ffccb3;text-shadow:0 0 12px rgba(0,255,204,.8)}}.demo-badge{grid-column:1;grid-row:1;justify-self:end;display:inline-flex;align-items:center;gap:7px;flex-shrink:0;font-family:Courier New,Courier,monospace;font-size:11px;font-weight:700;letter-spacing:3px;color:#0fc;text-transform:uppercase;border:1px solid rgba(0,255,204,.45);border-radius:3px;padding:4px 12px;background:#00ffcc0d;animation:demo-badge-pulse 2.4s ease-in-out infinite;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap;contain:layout style}.demo-badge__npm{width:26px;height:10px;flex-shrink:0;object-fit:contain}.demo-header__nav{grid-column:3;grid-row:1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.demo-header__brand{display:flex;align-items:center;gap:10px;text-decoration:none;padding:5px 12px;border-radius:3px;border:1px solid rgba(0,255,204,.4);transition:border-color .18s,background .18s,box-shadow .18s;cursor:pointer}.demo-header__brand:hover{border-color:#0fc;background:#00ffcc14;box-shadow:0 0 8px #00ffcc59}.demo-header__npm-icon{width:38px;height:15px;flex-shrink:0;object-fit:contain}.demo-header__pkg-name{font-size:13px;color:#0fc;letter-spacing:.5px;white-space:nowrap}.demo-header__link{font-size:12px;color:#0fc;text-decoration:none;border:1px solid rgba(0,255,204,.4);padding:6px 12px;border-radius:3px;white-space:nowrap;transition:background .18s,border-color .18s,box-shadow .18s}.demo-header__link--main{display:inline-flex;align-items:center;gap:6px;background:#00ffcc1a;border-color:#0fc9}.demo-header__link:hover{background:#00ffcc14;border-color:#0fc;box-shadow:0 0 8px #00ffcc59}.demo-status{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px}.demo-install{display:inline-flex;align-items:center;gap:9px;padding:4px 10px 4px 12px;font-family:inherit;font-size:12px;color:#ccc;background:#00ffcc0a;border:1px solid rgba(0,255,204,.35);border-radius:3px;cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s}.demo-install:hover{border-color:#0fc;background:#00ffcc17;box-shadow:0 0 8px #00ffcc4d}.demo-install__prompt{color:#0fc9}.demo-install__cmd{font-family:inherit;color:#eee;white-space:nowrap}.demo-install__copy{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#0fc;border-left:1px solid rgba(0,255,204,.25);padding-left:9px}.demo-install--copied{border-color:#0fc;animation:demo-copied .9s ease}@keyframes demo-copied{0%{box-shadow:0 0 #00ffcc80}30%{box-shadow:0 0 14px 1px #00ffcc80}to{box-shadow:0 0 #0fc0}}.demo-intro{max-width:680px;margin:0 auto;font-size:13px;line-height:1.65;color:#aaa;text-align:center}.demo-intro code{color:#0fc;background:#00ffcc12;padding:1px 5px;border-radius:3px}.demo-intro a{color:#0fc;text-decoration:none;border-bottom:1px solid rgba(0,255,204,.4)}.demo-intro a:hover{border-bottom-color:#0fc}@media (prefers-reduced-motion: reduce){.demo-badge,.demo-install--copied{animation:none}}.demo-wip-badge{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;background:#ffb40014;border:1px solid rgba(255,180,0,.5);border-radius:4px;animation:wip-pulse 2.2s ease-in-out infinite}@keyframes wip-pulse{0%,to{border-color:#ffb40073;box-shadow:0 0 6px #ffb40026}50%{border-color:#ffb400cc;box-shadow:0 0 14px #ffb40059}}.demo-wip-badge__icon{font-size:14px;color:#ffb400;line-height:1;text-shadow:0 0 8px rgba(255,180,0,.5)}.demo-wip-badge__text{font-size:11px;font-weight:700;letter-spacing:1.5px;color:#ffb400;text-transform:uppercase;text-shadow:0 0 6px rgba(255,180,0,.35)}.demo-version{font-size:11px;color:#888;letter-spacing:.5px}.demo-main{display:flex;flex-direction:column;align-items:center;padding:20px 16px 64px;gap:20px}.demo-quote{max-width:580px;background:#00ffcc0a;border-left:3px solid rgba(0,255,204,.45);border-radius:0 4px 4px 0;padding:14px 20px}.demo-description{font-size:13px;line-height:1.8;color:#999;margin:0;text-align:left}.demo-footer{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px;font-size:11px;letter-spacing:1px;color:#6a6a6a;text-transform:uppercase}.demo-footer a{color:#00ffccbf;text-decoration:none;border-bottom:1px solid rgba(0,255,204,.25)}.demo-footer a:hover{color:#0fc;border-bottom-color:#0fc}.pong-game-wrapper{position:relative;flex-shrink:0;padding:1rem;border-radius:5px;border:1.5px solid #00ffcc;box-shadow:0 0 12px #0fc,0 0 32px #00ffcc38}#pong-game-demo{width:min(90vw,900px);min-width:380px;min-height:266px;aspect-ratio:1000 / 700;display:block}@media (max-width: 520px){.pong-game-wrapper{align-self:stretch;padding:.5rem}#pong-game-demo{width:100%;min-width:0;min-height:0}}.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}.demo-admin{display:flex;flex-direction:column;align-items:center;gap:8px}.demo-admin-btn{padding:7px 18px;background:transparent;border:1px solid rgba(0,255,204,.45);border-radius:4px;color:#0fcc;font-size:13px;font-family:inherit;cursor:pointer;letter-spacing:.3px;transition:border-color .15s,color .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}.demo-admin-btn:hover{border-color:#0fc;color:#0fc;box-shadow:0 0 8px #00ffcc59}.demo-admin-btn--active{border-color:#fc0;color:#fc0;box-shadow:0 0 8px #ffcc0059}.demo-admin-btn--active:hover{border-color:#fd4;color:#fd4;box-shadow:0 0 12px #ffcc0080}.demo-admin__hint{font-size:11px;color:#999;margin:0;text-align:center;max-width:620px;line-height:1.6}.demo-admin__hint code{color:#999;background:#1e1e1e;padding:1px 4px;border-radius:3px;font-size:10px}.demo-players{display:flex;justify-content:center;margin:0 auto 4px}.demo-players__name{font-size:14px;color:#0fc;font-family:Courier New,Courier,monospace;letter-spacing:.5px;text-shadow:0 0 8px rgba(0,255,204,.35)}.demo-admin-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}.demo-theme-wrapper{position:relative;display:inline-flex;align-items:center}.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-header{grid-template-columns:1fr;justify-items:center;gap:8px;padding:8px 10px}.demo-header__identity,.demo-badge,.demo-header__nav{grid-column:1;grid-row:auto;justify-self:center}.demo-header__identity{gap:10px}.demo-header__nav{gap:8px;justify-content:center}.demo-header__brand{padding:5px 8px;gap:7px}.demo-header__pkg-name{font-size:12px;letter-spacing:0}.demo-header__npm-icon{width:30px;height:12px}.demo-header__link{padding:5px 10px;font-size:11px}.demo-badge{font-size:10px;letter-spacing:2px;padding:3px 9px}}@media (max-width: 560px){.demo-header__pkg-name{font-size:11px}}.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)}