:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--bg: #0a0a0a;--surface: #161616;--surface-hover: #1e1e1e;--border: #2a2a2a;--border-thick: #555;--text: #fafafa;--text-dim: rgba(255, 255, 255, .5);--accent: #4a9eff;--accent-dim: rgba(74, 158, 255, .15);--highlight: rgba(74, 158, 255, .08);--conflict: #ff4a4a;--conflict-bg: rgba(255, 74, 74, .12);--given: #c0d8f0;--user: #82b1ff;--success: #4caf50;--success-bg: rgba(76, 175, 80, .15);--note-color: rgba(255, 255, 255, .45)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}.app{display:flex;flex-direction:column;align-items:center;padding:1.5rem 1rem;max-width:540px;margin:0 auto;min-height:100vh}.title{font-size:1.8rem;font-weight:700;letter-spacing:-.03em;margin-bottom:1rem;color:var(--text)}.top-bar{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:440px;margin-bottom:1rem}.difficulty-selector{display:flex;gap:.4rem}.diff-btn{background:var(--surface);border:1px solid var(--border);color:var(--text-dim);padding:.35rem .75rem;border-radius:.5rem;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .15s}.diff-btn:hover{background:var(--surface-hover);color:var(--text)}.diff-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.timer{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.1rem;font-weight:600;color:var(--text-dim);min-width:3.5rem;text-align:right}.win-banner{background:var(--success-bg);color:var(--success);border:1px solid var(--success);padding:.6rem 1.2rem;border-radius:.5rem;font-weight:600;font-size:1rem;margin-bottom:1rem;text-align:center}.board{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);width:100%;max-width:440px;aspect-ratio:1;border:2px solid var(--border-thick);border-radius:.5rem;overflow:hidden;background:var(--surface)}.cell{display:flex;align-items:center;justify-content:center;border:1px solid var(--border);cursor:pointer;position:relative;transition:background .1s;-webkit-user-select:none;user-select:none}.cell:hover{background:var(--surface-hover)}.cell.border-top{border-top:2px solid var(--border-thick)}.cell.border-left{border-left:2px solid var(--border-thick)}.cell.border-bottom{border-bottom:2px solid var(--border-thick)}.cell.border-right{border-right:2px solid var(--border-thick)}.cell.highlight-line{background:var(--highlight)}.cell.highlight-box{background:#4a9eff0f}.cell.highlight-same{background:var(--accent-dim)}.cell.selected{background:#4a9eff40!important;box-shadow:inset 0 0 0 2px var(--accent);z-index:1}.cell.conflict{background:var(--conflict-bg)!important}.cell.conflict .cell-value{color:var(--conflict)}.cell-value{font-size:clamp(1rem,3.5vw,1.5rem);font-weight:600;line-height:1}.cell.given .cell-value{color:var(--given)}.cell:not(.given) .cell-value{color:var(--user)}.cell-notes{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:100%;height:100%;padding:1px}.note{display:flex;align-items:center;justify-content:center;font-size:clamp(.45rem,1.4vw,.65rem);color:transparent;line-height:1}.note.active{color:var(--note-color)}.controls{width:100%;max-width:440px;margin-top:1rem}.numpad{display:grid;grid-template-columns:repeat(9,1fr);gap:.35rem;margin-bottom:.75rem}.num-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);border-radius:.5rem;padding:.5rem 0;cursor:pointer;transition:all .15s;gap:.1rem}.num-btn:hover:not(:disabled){background:var(--accent-dim);border-color:var(--accent)}.num-btn:disabled{opacity:.3;cursor:default}.num-btn.done{opacity:.2}.num-value{font-size:1.2rem;font-weight:700;color:var(--text)}.num-count{font-size:.6rem;color:var(--text-dim)}.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem}.action-btn{display:flex;flex-direction:column;align-items:center;gap:.25rem;background:var(--surface);border:1px solid var(--border);border-radius:.5rem;padding:.55rem .3rem;color:var(--text-dim);font-size:.7rem;font-weight:500;cursor:pointer;transition:all .15s}.action-btn:hover:not(:disabled){background:var(--surface-hover);color:var(--text)}.action-btn:disabled{opacity:.3;cursor:default}.action-btn.active{background:var(--accent-dim);color:var(--accent);border-color:var(--accent)}@media(max-width:480px){.app{padding:1rem .5rem}.board,.top-bar,.controls{max-width:100%}.num-btn{padding:.4rem 0}.action-btn{padding:.45rem .2rem;font-size:.65rem}}