:root{--bg:#14161a;--panel:#1d2026;--line:#2c313a;--text:#e6e8eb;--dim:#9aa3ad;--pick:#2b3a55;--bad:#ff8a80;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (prefers-color-scheme:light){:root{--bg:#f5f6f8;--panel:#fff;--line:#d9dde3;--text:#1b1f24;--dim:#5d6772;--pick:#dbe7ff;--bad:#b3261e}}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font:15px/1.45 system-ui,sans-serif}main{max-width:1100px;margin:0 auto;padding:12px 16px 40px}h1{margin:0 0 8px;font-size:20px}h2{align-items:center;gap:8px;margin:20px 0 8px;font-size:16px;display:flex}h3{margin:14px 0 4px;font-size:14px}input,button{font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:6px;padding:8px 10px}button{cursor:pointer}button svg{display:block}button.quiet{color:var(--dim);background:0 0;border-color:#0000}header{align-items:center;gap:8px;display:flex}header form{flex:1;gap:8px;min-width:0;display:flex}header input{flex:1;min-width:0}.login{gap:12px;max-width:320px;margin:15vh auto 0;padding:16px;display:grid}.login label{color:var(--dim);gap:4px;display:grid}.problem{color:var(--bad)}.dim,small{color:var(--dim);font-size:13px}ul{margin:0;padding:0;list-style:none}.box{border:1px solid var(--line);background:var(--panel);border-radius:10px;overflow:hidden}.box li{border-top:1px solid var(--line);padding:10px 12px}.results li:first-child{border-top:0}.results li,.player li.row{cursor:pointer}.player li.on{background:var(--pick)}.player li.row:focus-visible{outline:2px solid var(--dim);outline-offset:-2px}.given{float:right;margin-left:12px}.feedback{background:var(--bg);flex-wrap:wrap;align-items:center;gap:8px;display:flex}.feedback .quality{flex:0 0 25%;align-items:center;gap:8px;display:flex}.feedback .quality input{flex:1;min-width:0;padding:0}.feedback .quality b{text-align:right;width:2ch}.feedback textarea{min-width:0;font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--text);resize:vertical;border-radius:6px;flex:200px;padding:8px 10px}.feedback button{align-items:center;height:36px;display:inline-flex}@media (width<=600px){.feedback .quality{flex-basis:100%}}button.icon{padding:2px 9px;font-size:16px;line-height:1.3}.steps{flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;display:flex}.steps button,.steps input[type=number]{height:36px;padding-top:0;padding-bottom:0}.steps button{justify-content:center;align-items:center;display:inline-flex}.steps input[type=number]{text-align:right;width:84px;font-size:13px}.steps label{align-items:center;gap:6px;margin-left:auto;line-height:1;display:inline-flex}.steps input[type=checkbox]{flex:none;width:16px;height:16px;margin:0;padding:0}.results li:hover,.results li.on{background:var(--pick)}nav{align-items:center;gap:8px;margin-top:12px;display:flex}.stage{background:#000;position:relative}.stage video{width:100%;height:100%;display:block}.stage canvas{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.dot{border-radius:50%;width:10px;height:10px;margin-right:6px;display:inline-block}.steps input[type=number]{appearance:textfield}.steps input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}.steps input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}
