*,*:before,*:after{box-sizing:border-box}body{background:#0a0a0a;margin:0;font-family:Courier New,Courier,monospace;color:#ccc;min-height:100vh}.demo-header{position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 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__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:14px;color:#0fc;letter-spacing:.5px;white-space:nowrap}.demo-header__nav{display:flex;align-items:center;gap:18px}.demo-header__link{font-size:12px;color:#0fc;text-decoration:none;border:1px solid rgba(0,255,204,.4);padding:5px 12px;border-radius:3px;transition:background .18s,border-color .18s,box-shadow .18s}.demo-header__link:hover{background:#00ffcc14;border-color:#0fc;box-shadow:0 0 8px #00ffcc59}.demo-header__copy{font-size:11px;color:#aaa}.demo-wip-badge{display:inline-flex;align-items:center;gap:7px;margin-top:6px;padding:5px 14px;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:15px;color:#ffb400;line-height:1;text-shadow:0 0 8px rgba(255,180,0,.5)}.demo-wip-badge__text{font-size:12px;font-weight:700;letter-spacing:1.5px;color:#ffb400;text-transform:uppercase;text-shadow:0 0 6px rgba(255,180,0,.35)}.demo-version{margin-top:10px;font-size:10px;color:#777}@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-header__demo-badge{position:absolute;left:50%;transform:translate(-50%);font-family:Courier New,Courier,monospace;font-size:13px;font-weight:700;letter-spacing:4px;color:#0fc;text-transform:uppercase;border:1px solid rgba(0,255,204,.45);border-radius:3px;padding:4px 16px;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}.demo-main{display:flex;flex-direction:column;align-items:center;padding:20px 16px 64px;gap:20px}.demo-hero{text-align:center;max-width:580px}.demo-title{font-size:clamp(26px,5vw,44px);font-weight:900;color:#0fc;text-shadow:0 0 12px rgba(0,255,204,.55),0 0 32px rgba(0,255,204,.25);letter-spacing:5px;text-transform:uppercase;margin:0}.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}.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;aspect-ratio:1000 / 700;display:block}.demo-controls{display:flex;flex-direction:column;align-items:center;gap:12px}.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:#666;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:manipulation;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:#666;margin:0;text-align:center;max-width:380px;line-height:1.5}.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}.demo-theme-select{-moz-appearance:none;appearance:none;-webkit-appearance:none;padding:7px 32px 7px 14px;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-theme-select option{background:#111;color:#e0e0e0}.demo-theme-select:hover{border-color:#0fc;color:#0fc;box-shadow:0 0 8px #00ffcc59}.demo-theme-select:focus{border-color:#0fc;color:#0fc;box-shadow:0 0 8px #00ffcc59;outline:none}.demo-theme-arrow{position:absolute;right:10px;pointer-events:none;color:#00ffccb3;font-size:11px;line-height:1}.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{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}.qs-rules-text{font-size:12px;color:#bbb;line-height:1.7;margin:0 0 10px}.qs-rules-list{margin:0 0 4px;padding:0 0 0 18px;font-size:12px;color:#bbb;line-height:1.7}.qs-rules-list li{margin-bottom:7px}.qs-rules-list code{background:#1a1a1a;border:1px solid #333;border-radius:3px;padding:1px 5px;color:#e6e990;font-size:11px}.key-inline{display:inline-block;width:20px;height:20px;line-height:20px;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:#00ffccd9;font-family:Courier New,Courier,monospace;vertical-align:middle;margin:0 1px}.qs-field-item{border:1px solid #2a2a2a;border-radius:4px;padding:14px 16px;margin-bottom:14px;background:#00000040}.qs-field-item__header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.qs-field-item__header h4{font-size:12px;color:#0fc;margin:0;letter-spacing:.5px}.qs-field-item__config{font-size:10px;color:#666;font-weight:400;letter-spacing:0}.qs-field-item__config code{background:#1a1a1a;border:1px solid #333;border-radius:3px;padding:1px 5px;color:#999;font-size:10px}.qs-field-item p{font-size:12px;color:#999;line-height:1.6;margin:0}.qs-icon-canvas{flex-shrink:0;border-radius:3px;background:#0006;display:block}.qs-legend{margin-top:4px}.qs-legend__section{margin-bottom:18px}.qs-legend__title{font-size:11px;margin:0 0 10px;letter-spacing:1px;text-transform:uppercase}.qs-legend__title--up{color:#62cb31}.qs-legend__title--down{color:#e84040}.qs-legend__grid{display:flex;flex-direction:column;gap:10px}.qs-legend-item{display:flex;align-items:center;gap:12px;background:#00000040;border:1px solid #2a2a2a;border-radius:4px;padding:10px 12px}.qs-legend-canvas{flex-shrink:0;display:block}.qs-legend-item__info{display:flex;flex-direction:column;gap:3px}.qs-legend-item__name{font-size:11px;color:#ddd;font-weight:700;letter-spacing:.3px}.qs-legend-item__desc{font-size:11px;color:#888;line-height:1.5}@media (max-width: 680px){.demo-header{height:auto;flex-wrap:wrap;padding:6px 10px;gap:0}.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__nav{gap:8px}.demo-header__link{padding:5px 10px;font-size:11px}.demo-header__copy{display:none}.demo-header__demo-badge{display:block;position:static;transform:none;width:100%;text-align:center;font-size:11px;letter-spacing:3px;padding:5px 0;border-left:none;border-right:none;border-bottom:none;border-radius:0;border-top:1px solid rgba(0,255,204,.2);margin-top:5px;background:transparent}}