| :root{ |
| --cyan:#50dcff; --mag:#ff5aaa; --gold:#ffcf4a; --ink:#06030d; |
| --v:0; |
| } |
| *{box-sizing:border-box;margin:0;padding:0} |
| html,body{height:100%;background:var(--ink);color:#fff;overflow:hidden; |
| font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;} |
| .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;opacity:.8} |
| .hidden{display:none!important} |
| #stage{position:fixed;inset:0} |
| .screen{position:absolute;inset:0} |
|
|
| |
| #mirror{position:absolute;inset:0} |
| #cam,#draw{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)} |
| #cam{filter:saturate(.7) brightness(.62) contrast(1.05)} |
| #session::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; |
| background:radial-gradient(120% 90% at 50% 18%,transparent 38%,rgba(6,3,13,.78) 100%)} |
|
|
| |
| #topbar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between; |
| align-items:center;padding:18px 22px} |
| .logo{font-weight:800;letter-spacing:.16em;font-size:20px;color:#fff;text-shadow:0 0 18px rgba(80,220,255,.6)} |
| .logo span{color:var(--mag);text-shadow:0 0 18px rgba(255,90,170,.7)} |
| .logo.big{font-size:54px;letter-spacing:.2em;margin-bottom:18px} |
| .badges{display:flex;gap:10px;align-items:center} |
| .badges>span{padding:6px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px; |
| background:rgba(255,255,255,.05);backdrop-filter:blur(8px);font-size:13px} |
| #state{color:var(--gold);font-weight:600} |
|
|
| |
| #rack{position:absolute;bottom:26px;left:0;right:0;z-index:5;display:flex;gap:18px; |
| justify-content:center;padding:0 20px} |
| .knob{width:104px;max-width:22vw} |
| .knob .bar{height:10px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;position:relative} |
| .knob .bar::after{content:"";position:absolute;inset:0;width:calc(var(--v)*100%); |
| background:linear-gradient(90deg,var(--cyan),#bff);box-shadow:0 0 14px var(--cyan); |
| transition:width .05s linear} |
| .knob .bar.mag::after{background:linear-gradient(90deg,var(--mag),var(--gold));box-shadow:0 0 14px var(--mag)} |
| .knob label{display:block;text-align:center;margin-top:7px;font-size:12px;letter-spacing:.05em;opacity:.85} |
|
|
| |
| #source{position:absolute;top:58px;left:0;right:0;z-index:6;display:flex;gap:10px; |
| align-items:center;justify-content:center;flex-wrap:wrap;padding:0 16px} |
| .src{font-size:13px;font-weight:600;color:#cbd2e0;cursor:pointer; |
| padding:7px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.18); |
| background:rgba(255,255,255,.06);backdrop-filter:blur(8px)} |
| .src.on{color:#06030d;border-color:transparent;background:linear-gradient(90deg,var(--cyan),var(--mag))} |
| .srcnote{font-size:12px;color:var(--gold);opacity:.92;max-width:62vw;text-align:center} |
|
|
| |
| #start{display:grid;place-items:center; |
| background:radial-gradient(110% 80% at 50% 0%,#1a0a2e 0%,var(--ink) 70%)} |
| .card{max-width:520px;width:90%;text-align:center;padding:8px 24px 30px} |
| .tag{font-size:18px;line-height:1.5;color:#cbd2e0;margin-bottom:22px} |
| .tag b{color:#fff} |
| .moves{list-style:none;text-align:left;display:grid;gap:10px;margin:0 auto 26px;max-width:430px} |
| .moves li{padding:12px 16px;border:1px solid rgba(255,255,255,.1);border-radius:14px; |
| background:rgba(255,255,255,.04);font-size:14.5px;line-height:1.4} |
| .moves b{color:var(--cyan)} |
| button#go{font-size:18px;font-weight:700;letter-spacing:.04em;color:#06030d;cursor:pointer; |
| padding:15px 40px;border:0;border-radius:999px; |
| background:linear-gradient(90deg,var(--cyan),var(--mag)); |
| box-shadow:0 8px 30px rgba(255,90,170,.45),0 0 0 1px rgba(255,255,255,.15) inset} |
| button#go:disabled{opacity:.7;cursor:wait} |
| #hint{margin-top:16px} |
|
|
