:root{--bg: #0f1115;--text: #e7e7e7;--muted: #9aa1a9;--accent: #3a7afe;--border: #252932;--sidebar-bg: #151821;--panel-bg: #0e1117;--timer-color: #e7e7e7;--trainer-bg: white;--trainer-panel: white;--trainer-irrel: white;--radius: 14px;--space: 12px;--sidebar-w: 300px;--scroll-track: #0d1117;--scroll-thumb: #2a2f3a;--scroll-thumb-hover: #3a4150;--dock-h: 160px;--sidebar-h: 160px;--stack-max: 70vh}*{box-sizing:border-box}html,body,#root{height:100%;overflow:hidden}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}button,input,select{font:inherit;color:inherit}a{color:inherit;text-decoration:none}.app{display:flex;height:100vh}.main-container{display:flex;flex-direction:row}.training-panel{max-width:30vw;width:30vw;background-color:var(--trainer-bg);justify-content:center}.training-panel h1{text-align:center;margin:2px}.training-panel .tabs{margin-top:20px;justify-content:center;gap:20px;margin-bottom:50px}.training-panel .tabs button{width:80px;font-size:1.2rem}.cases{display:flex;flex-direction:column;gap:50px;justify-content:flex-start;overflow:auto;height:80vh;box-sizing:border-box}.case{align-items:center;display:flex;flex-direction:column;justify-content:center}.case-drawing{display:flex;flex-direction:column;width:15vw;max-width:200px;aspect-ratio:1 / 1;gap:1px}.row{display:flex;gap:1px;flex:1}.cell{flex:1;border:1px solid black;border-radius:25%;height:100%}.edge-cell-vertical{max-height:1vw}.edge-cell-horizontal{max-width:1vw}.edge-cell-vertical,.edge-cell-horizontal{flex:1;border:1px solid black;border-radius:20px}.sidebar{position:sticky;top:0;height:100vh;overflow:hidden;width:var(--sidebar-w);background:var(--sidebar-bg);border-right:1px solid var(--border);padding:var(--space);display:flex;flex-direction:column;gap:var(--space)}.sidebar .row{display:flex;gap:8px;align-items:center}.sidebar select,.sidebar input[type=text]{width:100%;background:var(--panel-bg);border:1px solid var(--border);border-radius:10px;padding:10px}.sidebar button,.mobile-choice,.training-button{background:var(--panel-bg);border:1px solid var(--border);border-radius:10px;padding:10px;cursor:pointer}.highlighted{border:1px solid var(--text)}.sidebar button:hover{filter:brightness(1.1)}.session-header{display:flex;align-items:center;gap:8px}.session-delete{margin-left:auto;background:#261d1d}.times{flex:1;min-height:0;overflow:auto;border:1px solid var(--border);border-radius:12px;padding:6px;background:var(--panel-bg)}.times,.bottomdock,.modal-body{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) var(--scroll-track)}.times::-webkit-scrollbar,.bottomdock::-webkit-scrollbar,.modal-body::-webkit-scrollbar,.modal-wide-settings::-webkit-scrollbar,.cases::-webkit-scrollbar{width:10px;height:10px}.times::-webkit-scrollbar-track,.bottomdock::-webkit-scrollbar-track,.modal-body::-webkit-scrollbar-track,.modal-wide-settings::-webkit-scrollbar-track,.cases::-webkit-scrollbar-track{background:var(--scroll-track);border-radius:999px}.times::-webkit-scrollbar-thumb,.bottomdock::-webkit-scrollbar-thumb,.modal-body::-webkit-scrollbar-thumb,.modal-wide-settings::-webkit-scrollbar-thumb,.cases::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:999px;border:2px solid var(--scroll-track)}.times::-webkit-scrollbar-thumb:hover,.bottomdock::-webkit-scrollbar-thumb:hover,.modal-body::-webkit-scrollbar-thumb:hover,.modal-wide-settings::-webkit-scrollbar-thumb:hover,.cases::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}.time-item{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:10px;cursor:pointer}.time-item:hover{background:#ffffff08}.time-meta{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:.9rem}.time-index{font-weight:800;font-size:1.15rem;margin-right:6px}.main{flex:1;display:flex;flex-direction:column;overflow:hidden}.topbar{display:flex;justify-content:space-between;padding:var(--space);border-bottom:1px solid var(--border)}.icon-btn{background:transparent;border:1px solid var(--border);border-radius:10px;padding:8px 10px;cursor:pointer}.timer-wrap{flex:1;display:flex;flex-direction:column;padding:var(--space)}.scramble{order:0;color:var(--text);text-align:center;max-width:1400px;line-height:1.4;padding:0 var(--space);margin:8px auto 0;font-weight:600;font-size:clamp(1.4rem,3vw,2.2rem);word-spacing:clamp(8px,1.2vw,18px)}.timer-center{order:1;flex:1;display:flex;align-items:center;justify-content:center}.timer{font-size:clamp(3.5rem,10vw,7rem);line-height:1;letter-spacing:1px;color:var(--timer-color);-webkit-user-select:none;user-select:none;transition:color .15s ease}.timer.holding{color:#f59e0b}.timer.ready{color:#22c55e}.bottombar{min-height:140px;border-top:1px solid var(--border);display:flex;align-items:stretch;justify-content:flex-start;padding:12px var(--space);gap:18px;flex-wrap:wrap}.bottombar .stat{border:1px solid var(--border);border-radius:14px;padding:14px 18px;min-width:180px;flex:1 1 260px;background:var(--panel-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.bottombar .stat .k{font-size:1rem;color:var(--muted)}.bottombar .stat .v{font-weight:700;font-size:1.25rem;line-height:1.4}.settings-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding-bottom:10px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;align-items:center;justify-content:center}.modal{color:var(--text);background:var(--panel-bg);border:1px solid var(--border);border-radius:14px;max-width:520px;width:92%;padding:16px;display:flex;flex-direction:column;gap:12px;z-index:100000}.modal .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.badge{border:1px solid var(--border);padding:6px 10px;border-radius:10px;font-size:.9rem;background:var(--panel-bg);color:#fff;cursor:pointer}.badge:hover{filter:brightness(1.08)}.status-OK{color:#8dffb0}.status-PLUS2{color:#ffd27f}.status-DNF{color:#ff8f8f}.modal-body{min-height:420px;max-height:60vh;overflow:auto}.tabs{display:flex;gap:6px}.tab{padding:8px 12px;border:1px solid var(--border);background:var(--panel-bg);color:#fff;border-radius:10px;cursor:pointer}.tab.active{outline:2px solid #3a7afe}.data-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.data-row{display:flex;align-items:center;gap:8px;background:var(--panel-bg);border:1px solid var(--border);border-radius:10px;padding:8px}.data-row .abbr{font-weight:600}.data-row .qm{margin-left:auto;border:1px solid var(--border);border-radius:999px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;opacity:.8;cursor:help;background:var(--panel-bg)}.modal-wide{max-width:90vw;max-height:60vh}.modal-wide-settings{max-width:1056px;height:70vh;overflow-y:scroll}.data-grid.wide{grid-template-columns:1fr 1fr}.data-row .spacer{flex:1}.statline{opacity:.9}.bestline{margin:6px 0 8px}.stat[draggable]{cursor:grab}.stat[draggable]:active{cursor:grabbing}.modal select{color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px;width:100%;appearance:none;-webkit-appearance:none;-moz-appearance:none}.modal option{color:var(--text);background:var(--bg)}.modal select:focus{outline:2px solid var(--accent);outline-offset:0}.bottomdock-wrap{width:100%}.resize-handle{height:12px;cursor:ns-resize;background:linear-gradient(to right,transparent 0,rgba(255,255,255,.15) 50%,transparent 100%);border-top:1px solid var(--border);border-bottom:1px solid var(--border);user-select:none;-webkit-user-select:none;touch-action:none}.bottomdock{height:var(--dock-h);min-height:60px;overflow:auto;background:var(--panel-bg);border:1px solid var(--border);border-radius:12px 12px 0 0}@media (max-width:900px){:root{--sidebar-w: 220px }.timer{font-size:4rem}}@media (max-width:680px){.app{flex-direction:column;height:100vh;overflow:hidden}.sidebar{height:auto;max-height:var(--sidebar-h);min-height:60px;position:relative;order:1;width:100%;overflow:hidden;border-right:none;border-bottom:1px solid var(--border);padding:0;z-index:2}.sidebar-resize{position:sticky;top:0;left:0;right:0;height:14px;cursor:ns-resize;background:linear-gradient(to right,transparent 0,rgba(255,255,255,.15) 50%,transparent 100%);border-bottom:1px solid var(--border);z-index:10;user-select:none;-webkit-user-select:none;touch-action:none}.main{order:0;flex:1;overflow:hidden;display:flex;flex-direction:column}.bottomdock{position:relative;z-index:1;height:var(--dock-h);min-height:60px}}@media (max-width:680px){.sidebar{height:auto!important;max-height:var(--sidebar-h, 160px);min-height:60px;overflow:hidden;padding:0;position:relative;z-index:2;width:100%;border-right:none;border-bottom:1px solid var(--border)}.sidebar-resize{display:block;height:12px;min-height:12px;cursor:ns-resize;padding-bottom:4px;background:linear-gradient(to right,transparent 0,rgba(255,255,255,.22) 50%,transparent 100%);border-bottom:1px solid var(--border);user-select:none;-webkit-user-select:none;touch-action:none;position:relative;z-index:10}.sidebar>.session-header,.sidebar>.times{padding-left:var(--space);padding-right:var(--space)}.sidebar>.session-header{padding-top:var(--space)}}.typing-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%}.typing-input{width:min(480px,92%);background:var(--panel-bg);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:16px 18px;font-size:clamp(2rem,8vw,4rem);text-align:center;outline:none}.typing-input::placeholder{color:var(--muted)}.typing-hint{color:var(--muted);font-size:.95rem;text-align:center}