:root{--bg: #1e1f22;--panel: #24262a;--border: #000000;--text: #e5e6e8;--accent: #33937F;--danger: #C41E3A;--radius: 6px;--transition: .12s ease-in-out}*{box-sizing:border-box}body{margin:0;font-family:system-ui,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}h1{font-size:1.25rem;margin:0 0 .75rem}.layout-row{display:flex;justify-content:center}.main-column{flex:0 0 auto}.app-container{padding:1rem 1.25rem 2rem;max-width:1200px;margin:0 auto}.layout-row{display:flex;gap:1rem;align-items:flex-start}.main-column{flex:3 1 0}.sidebar{flex:1 1 0;background:var(--panel);border:1px solid #2e3136;border-radius:var(--radius);padding:.5rem .75rem;font-size:.8rem}.sidebar h2{margin:0 0 .5rem;font-size:.9rem}.sidebar ol{margin:0;padding-left:1.1rem}.sidebar li{margin-bottom:.25rem}.controls{display:flex;flex-wrap:wrap;gap:.75rem;background:var(--panel);padding:.75rem 1rem;border:1px solid #2e3136;border-radius:var(--radius);margin-bottom:1rem;justify-content:center}.controls label{display:flex;flex-direction:column;font-size:.75rem;gap:.25rem}.controls select,.controls input,.controls button{background:#2e3136;color:var(--text);border:1px solid #3a3d42;border-radius:var(--radius);padding:.4rem .5rem;font-size:.85rem}.controls button{cursor:pointer;font-weight:600}.controls button:hover{background:#36393f}.controls-inner{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem;width:100%;max-width:1100px}.controls .stats{display:flex;align-items:center;gap:.75rem;font-size:.7rem;margin-left:auto;padding-left:.75rem}.controls .stats span{white-space:nowrap}.grid{display:grid;gap:8px;justify-content:center;margin:0 auto}.frame{position:relative;display:flex;justify-content:center;padding:4px;border:3px solid var(--border);border-radius:4px;font-size:.85rem;font-weight:700;line-height:1.15;text-align:center;overflow:hidden;-webkit-user-select:none;user-select:none}.frame.highlight{outline:3px solid var(--accent);outline-offset:-3px}.frame .name{margin:0;-webkit-text-stroke:.5px #000;text-shadow:0 0 2px #000;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%}.result-panel .pass{color:#00ff98;font-weight:700}.result-panel .fail{color:#c41e3a;font-weight:700}.controls .session-average{font-size:.75rem;opacity:.8;align-self:flex-end}.frame .dispel-icon{position:absolute;top:calc(50% + 16px);left:50%;transform:translate(-50%);width:25px;height:25px;border-radius:4px}.footer{margin-top:1.5rem;font-size:.65rem;opacity:.6}
