*{box-sizing:border-box}body{font-family:Arial,sans-serif;max-width:600px;margin:0 auto;padding:20px;background:linear-gradient(135deg,#4a5568,#2d3748);min-height:100vh}#app{background:#1a202c;padding:24px;border-radius:16px;box-shadow:0 4px 20px #0000004d}h1{text-align:center;color:#fbbf24;margin-bottom:24px;font-size:2rem}#controls{display:flex;gap:12px;justify-content:center;align-items:center;margin-bottom:20px;flex-wrap:wrap}#controls label{font-weight:500;color:#e2e8f0}#controls select{padding:8px 12px;font-size:14px;border:2px solid #4a5568;border-radius:6px;background:#2d3748;color:#e2e8f0;cursor:pointer}#controls select:focus{outline:none;border-color:#fbbf24}#controls button{padding:10px 20px;font-size:14px;font-weight:700;border:none;border-radius:6px;cursor:pointer;transition:transform .15s,box-shadow .15s}#controls button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}#new-game{background:#fbbf24;color:#1a202c}#new-game:hover{background:#f59e0b}#solve{background:#4a5568;color:#e2e8f0;border:2px solid #60a5fa}#solve:hover{background:#60a5fa;color:#1a202c}.checkbox-label{display:flex;align-items:center;gap:6px;color:#e2e8f0;cursor:pointer;font-size:14px}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#fbbf24}#status{text-align:center;padding:12px;margin-bottom:20px;border-radius:8px;font-weight:500;color:#a0aec0}#status:empty{display:none;margin-bottom:0}.status-win{background:#4ade8033;color:#4ade80;border:1px solid #4ade80}.status-error{background:#f8717133;color:#f87171;border:1px solid #f87171}.status-progress{background:#60a5fa33;color:#60a5fa;border:1px solid #60a5fa}#puzzle-container{display:flex;justify-content:center}#puzzle-container:not(:empty){margin-bottom:24px}.puzzle-grid{border-collapse:separate;border-spacing:3px;background:#2d3748;padding:8px;border-radius:12px}.puzzle-grid th,.puzzle-grid td{width:50px;height:50px;text-align:center;vertical-align:middle;font-size:20px;font-weight:700}.header-cell{background:transparent;color:#fbbf24;font-size:18px}.constraint-cell{background:#4a5568;color:#a0aec0;font-size:18px;border-radius:6px}.corner-cell{background:#4a5568;border-radius:6px}.x-count{color:#60a5fa}.o-count{color:#a78bfa}.grid-cell{background:#1a202c;border:2px solid #4a5568;border-radius:8px;cursor:pointer;transition:all .15s;-webkit-user-select:none;user-select:none}.grid-cell:hover{border-color:#fbbf24;transform:scale(1.05)}.cell-x{color:#60a5fa;background:#60a5fa26;border-color:#60a5fa}.cell-o{color:#a78bfa;background:#a78bfa26;border-color:#a78bfa}.cell-blank{color:#4a5568}.cell-error{background:#ef44444d;border-color:#ef4444;animation:pulse-error 1s ease-in-out infinite}@keyframes pulse-error{0%,to{box-shadow:0 0 #ef444466}50%{box-shadow:0 0 0 4px #ef444400}}#rules{background:#2d3748;padding:16px;border-radius:8px;border:1px solid #4a5568}#rules h3{margin-top:0;color:#fbbf24;font-size:1rem}#rules ul{margin:0;padding-left:20px;color:#a0aec0}#rules li{margin-bottom:6px;line-height:1.4}@media (max-width: 480px){.puzzle-grid th,.puzzle-grid td{width:40px;height:40px;font-size:16px}#controls{flex-direction:column}h1{font-size:1.5rem}}