:root{--bg: #faf9f5;--surface: #ffffff;--text: #1a1a18;--muted: #6b6a64;--border: #d8d6cc;--hint: #b5b2a4;--cell: 64px;color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--bg: #1c1c1a;--surface: #262624;--text: #f0efea;--muted: #a09e96;--border: #44423c;--hint: #56544c}}*{box-sizing:border-box}body{margin:0 auto;max-width:780px;padding:24px 16px 48px;background:var(--bg);color:var(--text);font-family:system-ui,sans-serif}header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}h1{font-size:24px;font-weight:600;margin:0;letter-spacing:.02em}main{display:flex;gap:32px;flex-wrap:wrap;align-items:flex-start}.board{display:flex;flex-direction:column;gap:10px}#grid{display:grid;gap:8px;touch-action:none;user-select:none;-webkit-user-select:none}.cell{width:var(--cell);height:var(--cell);border-radius:10px;border:1px solid var(--border);background:var(--surface);position:relative;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;padding:0;cursor:pointer;touch-action:none}.cell.legal{outline:2px solid var(--hint);outline-offset:2px}.cell:focus-visible{outline:3px solid #378add;outline-offset:2px}.piece{position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:50%;border:3px solid var(--text);background:var(--bg);pointer-events:none}.cell span{pointer-events:none}.panel{display:flex;flex-direction:column;gap:16px;min-width:210px}.label{font-size:13px;color:var(--muted);margin:0 0 6px}.cycle{display:flex;align-items:center;gap:6px}.target{display:grid;gap:4px}.mini{width:22px;height:22px;border-radius:5px;border:1px solid var(--border);background:var(--surface);display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:#fff}.c1{background:#1d9e75;border-color:#1d9e75}.c2{background:#d85a30;border-color:#d85a30}.c3{background:#7f77dd;border-color:#7f77dd}.c4{background:#ef9f27;border-color:#ef9f27}.muted{color:var(--muted);font-size:13px}#message{font-weight:600;min-height:22px;margin:0}#hint{min-height:18px;margin:0}#progress,#best{margin:0}.actions{display:flex;gap:8px}button,select{font:inherit;padding:8px 14px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer}button:hover,select:hover{border-color:var(--muted)}.symbols-toggle{font-size:13px;color:var(--muted);display:flex;gap:6px;align-items:center}.splash{text-align:center;padding-top:8vh}.logo{display:inline-flex;align-items:center;gap:8px}.logo-mark{display:grid;grid-template-columns:repeat(2,11px);gap:2px}.logo-mark span{width:11px;height:11px;border-radius:3px;border:1px solid var(--border);background:var(--surface)}.logo-mark span.c1{background:#1d9e75;border-color:#1d9e75}.logo-mark span.c2{background:#d85a30;border-color:#d85a30}.logo-word{font-size:19px;font-weight:600;letter-spacing:.01em;color:var(--text)}.logo-cw{color:#1d9e75}.logo-lg{gap:14px}.logo-lg .logo-mark{grid-template-columns:repeat(2,24px);gap:4px}.logo-lg .logo-mark span{width:24px;height:24px;border-radius:6px}.logo-lg .logo-word{font-size:52px}.say-hint{margin:2px 0 0}.spacer{flex:1}.menu{display:flex;flex-direction:column;gap:10px;max-width:280px;margin:28px auto}.menu button{padding:12px;font-size:16px}.menu button:disabled{opacity:.5;cursor:default}.screen-header h1{font-size:20px}.screen-header [data-back]{padding:6px 12px}.levels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.level-card{display:flex;flex-direction:column;gap:4px;align-items:flex-start;padding:12px;text-align:left}.level-num{font-size:12px;color:var(--muted)}.stats-list{display:flex;flex-direction:column;max-width:380px}.stat-row{display:flex;justify-content:space-between;border-bottom:1px solid var(--border);padding:8px 0}.reset-zone{margin-top:24px}.menu-left{margin:20px 0}input{font:inherit;padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text)}.share-code{font-family:ui-monospace,monospace;font-size:17px;letter-spacing:1px;-webkit-user-select:all;user-select:all;margin:0 0 8px}#share-link{width:100%;font-size:12px;margin-bottom:8px}.load-form{display:flex;flex-direction:column;gap:10px;max-width:380px}.help{max-width:560px;line-height:1.6}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}footer{margin-top:32px}