*,*: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{border:1.5px solid #00ffcc;box-shadow:0 0 12px #0fc,0 0 32px #00ffcc38;position:relative;border-radius:5px;flex-shrink:0}#pong-game-demo{width:min(90vw,850px);min-width:380px;height:55vh;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;background:#111;border:1.5px solid #00ffcc;box-shadow:0 0 28px #00ffcc47,0 0 70px #00ffcc14;border-radius:6px;padding:30px 32px 28px;width:min(540px,92vw);max-height:82vh;overflow-y:auto;z-index:1;font-family:Courier New,Courier,monospace}.qs-modal__box::-webkit-scrollbar{width:4px}.qs-modal__box::-webkit-scrollbar-thumb{background:#333;border-radius:2px}.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-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-x:auto;font-size:12px;line-height:1.7}.qs-step pre::-webkit-scrollbar{height:6px}.qs-step pre::-webkit-scrollbar-track{background:#111}.qs-step pre::-webkit-scrollbar-thumb{background:#555;border-radius:3px}.qs-step pre::-webkit-scrollbar-thumb:hover{background:#888}.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: 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}}