:root{--bg:#fff;--bg-elevated:#f6f7f9;--bg-sunken:#eef0f3;--border:#d8dce0;--text:#1b1f24;--text-muted:#5b6470;--accent:#2563eb;--accent-text:#fff;--pass:#1a7f37;--pass-bg:#e6f4ea;--fail:#cf222e;--fail-bg:#fbe9e9;--code-bg:#f0f2f5;--log-warn:#9a6700;--log-error:#cf222e}:root[data-theme=dark]{--bg:#0f1216;--bg-elevated:#171b21;--bg-sunken:#1d222a;--border:#2b313a;--text:#e6e9ee;--text-muted:#9aa4b2;--accent:#4c8dff;--accent-text:#0f1216;--pass:#4ac26b;--pass-bg:#102a18;--fail:#ff7b72;--fail-bg:#2c1414;--code-bg:#11151b;--log-warn:#e3b341;--log-error:#ff7b72}body{background:var(--bg);color:var(--text)}.app{flex-direction:column;height:100%;display:flex}.app-header{border-bottom:1px solid var(--border);background:var(--bg-elevated);flex-shrink:0;justify-content:flex-start;align-items:center;padding:.6rem 1rem;display:flex}.app-header h1{margin:0;font-size:1.1rem}.nav-toggle{border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;margin-right:.6rem;padding:.25rem .55rem;font-size:1.1rem;line-height:1;display:inline-flex}.app-body{flex:1;min-height:0;display:flex}.app-body>*{min-height:0}.sidebar{z-index:30;border-right:1px solid var(--border);background:var(--bg-elevated);flex-shrink:0;width:80%;max-width:300px;padding:.5rem;transition:transform .2s;position:fixed;top:0;bottom:0;left:0;overflow-y:auto;transform:translate(-100%);box-shadow:2px 0 12px #00000040}.sidebar.is-open{transform:translate(0)}.nav-backdrop{z-index:20;background:#0006;position:fixed;inset:0}.cat-name{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin:.8rem .5rem .3rem;font-size:.75rem}.sidebar ul{margin:0;padding:0;list-style:none}.prob{text-align:left;width:100%;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:6px;align-items:center;gap:.4rem;padding:.4rem .5rem;font-size:.9rem;display:flex}.prob:hover{background:var(--bg-sunken)}.prob.is-current{background:var(--accent);color:var(--accent-text)}.prob-status{width:1em;color:var(--pass)}.prob.is-current .prob-status{color:var(--accent-text)}.description{flex:var(--desc-ratio) 1 0;min-width:240px;padding:1.25rem 1.5rem;overflow-y:auto}.col-resizer{cursor:col-resize;touch-action:none;background:var(--bg-elevated);border-left:1px solid var(--border);border-right:1px solid var(--border);flex-shrink:0;width:8px;position:relative}.col-resizer:before{content:"";background:var(--border);border-radius:3px;width:3px;height:40px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.col-resizer:hover:before{background:var(--text-muted)}.editor-pane{flex:calc(1 - var(--desc-ratio)) 1 0;flex-direction:column;min-width:320px;display:flex}.editor-toolbar{border-bottom:1px solid var(--border);background:var(--bg-elevated);flex-shrink:0;align-items:center;gap:.5rem;padding:.5rem .75rem;display:flex}.editor-toolbar button{cursor:pointer;border:1px solid var(--border);border-radius:6px;padding:.4rem 1rem;font-size:.9rem}.editor-toolbar .run{background:var(--accent);color:var(--accent-text);border-color:#0000;font-weight:600}.editor-toolbar button:disabled{opacity:.6;cursor:default}.editor-toolbar .format{background:var(--bg);color:var(--text)}.format-error{color:var(--fail);font-size:.78rem}.editor-wrap{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.editor-wrap>div{flex:1;min-height:0}.editor-wrap .cm-editor{height:100%}.editor-wrap .cm-scroller{overflow:auto}.drawer{background:var(--bg-elevated);border-top:1px solid var(--border);flex-direction:column;flex-shrink:0;min-height:0;display:flex;overflow:hidden}.drawer-handle{cursor:row-resize;touch-action:none;background:var(--bg-sunken);border-bottom:1px solid var(--border);flex-shrink:0;height:10px;position:relative}.drawer-handle:before{content:"";background:var(--border);border-radius:3px;width:40px;height:3px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.drawer-handle:hover:before{background:var(--text-muted)}.drawer-headerbar{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:.35rem .5rem .35rem .75rem;display:flex}.drawer-title{color:var(--text-muted);font-size:.8rem;font-weight:600}.drawer-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:.2rem .4rem;font-size:.9rem;line-height:1}.drawer-close:hover{background:var(--bg-sunken);color:var(--text)}.drawer-content{flex:1;min-height:0;padding:.75rem;overflow-y:auto}.result-status{color:var(--text-muted);margin:0}.result-summary{margin:0 0 .75rem;font-weight:600}.result-summary.is-solved{color:var(--pass)}.result-summary.is-failed{color:var(--fail)}.case-list{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.case-list li{border:1px solid var(--border);border-radius:6px;padding:.5rem .6rem}.case-list li.is-pass{background:var(--pass-bg)}.case-list li.is-fail{background:var(--fail-bg)}.case-head{align-items:center;gap:.5rem;display:flex}.case-summary{cursor:pointer;align-items:flex-start;gap:.5rem;list-style:none;display:flex}.case-summary::-webkit-details-marker{display:none}.case-summary:before{content:"▶";color:var(--text-muted);flex-shrink:0;margin-top:.25rem;font-size:.6rem;transition:transform .12s}details[open]>.case-summary:before{transform:rotate(90deg)}.case-summary-body{flex-direction:column;flex:1;gap:.4rem;min-width:0;display:flex}.case-badge{color:#fff;border-radius:4px;padding:.1rem .4rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;font-weight:700}.is-pass .case-badge{background:var(--pass)}.is-fail .case-badge{background:var(--fail)}.case-name{font-family:ui-monospace,monospace;font-size:.85rem}.case-tag{color:var(--text-muted);border:1px solid var(--border);border-radius:4px;padding:0 .3rem;font-size:.7rem}.case-error,.case-logs pre{background:var(--code-bg);white-space:pre-wrap;word-break:break-word;border-radius:4px;margin:0;padding:.5rem;font-size:.82rem;display:block;overflow-x:auto}.case-logs pre{margin-top:.4rem}.case-logs summary{cursor:pointer;color:var(--text-muted);margin-top:.4rem;font-size:.82rem}.log-line{display:block}.log-level{text-align:right;text-transform:uppercase;opacity:.7;-webkit-user-select:none;user-select:none;min-width:3.5em;margin-right:.6rem;font-size:.7rem;display:inline-block}.log-warn{color:var(--log-warn,#b8860b)}.log-error{color:var(--log-error,#d33)}.solution{border-top:1px solid var(--border);margin-top:1rem;padding-top:.5rem}.next-problem{background:var(--accent);color:var(--accent-text);cursor:pointer;border:1px solid #0000;border-radius:6px;margin-top:1.5rem;padding:.6rem 1.2rem;font-size:.9rem;font-weight:600;display:block}.next-problem:hover{opacity:.9}.code-block{border:1px solid var(--border);border-radius:6px;margin:.6rem 0;font-size:.85rem;overflow:hidden}.code-block .cm-editor.cm-focused{outline:none}.loading{min-height:8rem;color:var(--muted,#888);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.6rem;padding:1rem;font-size:.85rem;display:flex}.loading-spinner{border:2px solid var(--border,#ccc);border-top-color:var(--muted,#888);border-radius:50%;width:1.5rem;height:1.5rem;animation:.7s linear infinite loading-spin}@keyframes loading-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.loading-spinner{animation-duration:1.6s}}.code-block-loading{background:var(--code-bg);border:1px solid var(--border);white-space:pre-wrap;border-radius:6px;margin:.6rem 0;padding:.6rem;font-family:ui-monospace,monospace;font-size:.85rem;overflow-x:auto}.markdown :first-child{margin-top:0}.markdown pre{border-radius:6px;padding:.75rem;overflow-x:auto}.markdown pre:not(.shiki){background:var(--code-bg)}:root[data-theme=dark] .markdown .shiki,:root[data-theme=dark] .markdown .shiki span{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important}.markdown code{font-family:ui-monospace,monospace;font-size:.88em}.markdown :not(pre)>code{background:var(--code-bg);border-radius:4px;padding:.1rem .3rem}.markdown table{border-collapse:collapse}.markdown th,.markdown td{border:1px solid var(--border);padding:.3rem .6rem}@media (width<=768px){.app-body{flex-direction:column;overflow-y:auto}.description{flex:none;width:auto;min-width:0;overflow-y:visible}.col-resizer{display:none}.editor-pane{border-top:1px solid var(--border);flex:none;min-width:0;height:70vh}}:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}