:root{color-scheme:light dark;--bg-primary: #313338;--bg-elevated: #2b2d31;--bg-subtle: #1e1f22;--border-subtle: #3f4147;--accent: #5865f2;--accent-soft: rgba(88, 101, 242, .16);--accent-strong: rgba(88, 101, 242, .9);--text-primary: #f2f3f5;--text-muted: #b5bac1;--danger: #ed4245;--success: #23a55a;--shadow-soft: 0 8px 16px rgba(0, 0, 0, .35)}[data-theme=light]{--bg-primary: #f2f3f5;--bg-elevated: #ffffff;--bg-subtle: #e3e5e8;--border-subtle: #d4d7dc;--accent: #5865f2;--accent-soft: rgba(88, 101, 242, .08);--accent-strong: #4752c4;--text-primary: #060607;--text-muted: #4f5660;--danger: #d83c3e;--success: #248046;--shadow-soft: 0 8px 16px rgba(0, 0, 0, .08)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:radial-gradient(circle at top left,#404eed 0,#1e1f22 45%,#000);color:var(--text-primary)}#app{min-height:100vh;display:flex;align-items:stretch;justify-content:center;padding:16px}.app-root{flex:1;max-width:1120px;background:linear-gradient(135deg,#313338fa,#1e1f22fa);border-radius:16px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;overflow:hidden}[data-theme=light] .app-root{background:linear-gradient(135deg,#f2f3f5fa,#e3e5e8fa)}.app-shell{display:flex;flex-direction:column;height:100%}.app-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border-subtle);background:linear-gradient(90deg,rgba(0,0,0,.12),transparent)}.app-header__title{display:flex;flex-direction:column;gap:4px}.app-header__badge{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.app-header h1{margin:0;font-size:18px}.app-header__actions{display:flex;align-items:center;gap:8px}.app-main{flex:1;display:grid;grid-template-columns:minmax(0,2.1fr) minmax(260px,.9fr);gap:12px;padding:12px 16px 16px}@media(max-width:900px){.app-main{grid-template-columns:minmax(0,1fr)}}.panel{background:var(--bg-elevated);border-radius:12px;border:1px solid var(--border-subtle);display:flex;flex-direction:column}.panel--primary{box-shadow:var(--shadow-soft)}.panel__header{padding:10px 12px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;gap:8px}.panel__title{margin:0;font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.panel__meta{display:flex;align-items:center;gap:6px}.panel__body{padding:12px;font-size:14px;color:var(--text-muted)}.panel__footer{padding:10px 12px;border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;gap:8px}.footer-left,.footer-right{display:flex;align-items:center;gap:8px}.btn{border-radius:6px;border:none;padding:6px 12px;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:background .12s ease,box-shadow .12s ease,transform 60ms ease;white-space:nowrap}.btn:active{transform:translateY(1px)}.btn--primary{background:var(--accent);color:#fff}.btn--primary:hover{background:var(--accent-strong)}.btn--secondary{background:var(--bg-subtle);color:var(--text-primary);border:1px solid var(--border-subtle)}.btn--secondary:hover{background:#ffffff0a}.btn--ghost{background:transparent;color:var(--text-muted);border-radius:999px;padding-inline:10px}.btn--ghost:hover{background:#ffffff0f}.btn__icon{font-size:16px}.pill{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}.pill--muted{background:#0000005c;color:var(--text-muted)}.pill--success{background:#23a55a33;color:var(--success)}.pill--danger{background:#ed424533;color:var(--danger)}.grid-root{flex:1;padding:16px;display:flex;align-items:center;justify-content:center;position:relative}.progress-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#000000b3;border-radius:12px;z-index:10}.progress-overlay[hidden]{display:none}.progress-overlay__content{min-width:200px;padding:16px}.progress-overlay__label{margin:0 0 10px;font-size:14px;color:var(--text-primary)}.progress-bar{height:8px;background:var(--bg-subtle);border-radius:999px;overflow:hidden}.progress-bar__fill{height:100%;width:0%;background:var(--accent);border-radius:999px;transition:width .15s ease-out}.grid{display:grid;gap:4px;background:var(--bg-subtle);padding:10px;border-radius:12px;border:1px solid var(--border-subtle);box-shadow:inset 0 0 0 1px #0000004d;touch-action:none}.grid-cell{width:42px;height:42px;border-radius:9px;border:1px solid rgba(0,0,0,.4);background:radial-gradient(circle at 30% 20%,#ffffff2e,#000c);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px;color:var(--text-primary);position:relative;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none}.grid-cell--number{background:radial-gradient(circle at 20% 10%,#ffffff4d,#5865f2e6);border-color:#5865f2e6}.grid-cell--number-start{box-shadow:0 0 0 2px var(--accent-soft),0 0 20px #5865f2cc}.grid-cell--wall-south{border-bottom-width:4px;border-bottom-color:var(--text-muted);border-bottom-style:solid}.grid-cell--wall-east{border-right-width:4px;border-right-color:var(--text-muted);border-right-style:solid}.grid-cell--path{background:linear-gradient(135deg,var(--accent),var(--accent-strong));border-color:#000c;box-shadow:0 0 0 2px var(--accent-soft)}.grid-cell--path-ghost{background:radial-gradient(circle at 30% 20%,#5865f24d,#000c);border-color:var(--accent-soft)}.grid-cell__label{position:relative;z-index:1}.grid-cell__dot{position:absolute;top:10px;right:10px;bottom:10px;left:10px;border-radius:999px;background:#00000047}.grid-cell--number .grid-cell__dot{background:#0000002e}.grid-path-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.grid-path-line{stroke:var(--accent-strong);stroke-width:10;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(0,0,0,.9))}.grid-path-line--ghost{stroke:#5865f299;stroke-dasharray:6 6}.rules-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}.rules-list li{margin-inline-start:4px}.rules-meta{margin-top:10px;font-size:12px;color:var(--text-muted)}.hint-text{font-size:12px;color:var(--text-muted)}.hint-text--success{color:var(--success)}.hint-text--error{color:var(--danger)}