*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#1a1a2e;color:#e0e0e0;min-height:100vh}#app{max-width:1100px;margin:0 auto;padding:16px}header{text-align:center;margin-bottom:16px}header h1{font-size:1.5rem;color:#fff;margin-bottom:4px}#date-display{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:4px}#date-text{font-size:1.1rem;color:#ccc}#btn-settings,#btn-help{background:none;border:none;color:#888;font-size:1.1rem;cursor:pointer;padding:2px 4px;border-radius:4px}#btn-settings:hover,#btn-help:hover{color:#ccc;background:#3a3a5a}#btn-help{font-weight:700}main{display:flex;gap:20px;align-items:flex-start}#grid-container{flex:1;max-width:600px}#grid{width:100%;height:auto}.hex-cell{fill:#2a2a4a;stroke:#444;stroke-width:1;cursor:pointer;transition:fill .1s}.hex-cell:hover:not(.placed):not(.hole){fill:#3a3a5a}.hex-cell.hole{fill:#1a1a1a;stroke:#666}.hex-cell.placed{stroke:#fff;stroke-width:1.5}.hex-cell.placed.dimmed{opacity:.4}.hex-cell.preview{opacity:.5}.hex-cell.invalid-preview{fill:red;opacity:.3}.cell-label{fill:#666;font-size:8px;text-anchor:middle;dominant-baseline:central;pointer-events:none}.hex-label{fill:#999;font-size:9px;font-weight:500;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.piece-hole{fill:#1a1a1a}.piece-blue{fill:#4a90d9}.piece-cyan{fill:#00bcd4}.piece-mauve{fill:#9c6ade}.piece-pink{fill:#e91e8c}.piece-yellow{fill:#ffd600}.piece-white{fill:#e0e0e0}#sidebar{width:260px;flex-shrink:0}#piece-preview{background:#2a2a4a;border-radius:6px;padding:12px;margin-bottom:12px;text-align:center;min-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center}#preview-svg-container{width:100%;display:flex;justify-content:center;align-items:center;min-height:50px}#preview-svg{width:120px;height:60px}#preview-controls{display:flex;gap:8px;margin-top:8px}#preview-controls button{padding:4px 12px;border:1px solid #666;background:transparent;color:#ccc;cursor:pointer;border-radius:4px;font-size:.8rem}#preview-controls button:hover{background:#3a3a5a}#controls{margin-bottom:12px}#solution-count{background:#2a2a4a;padding:12px;border-radius:6px;text-align:center}#count-toggle{display:flex;border-radius:4px;overflow:hidden;border:1px solid #555;margin-bottom:8px}.mode-btn{flex:1;padding:4px 8px;border:none;background:transparent;color:#888;cursor:pointer;font-size:.75rem;transition:background .15s,color .15s}.mode-btn:hover{color:#ccc}.mode-btn.active{background:#4a90d9;color:#fff}#count-value{display:block;font-size:2rem;font-weight:700;color:#4a90d9;margin-top:4px}#count-value.solving{color:#ffd600;font-size:1rem}#piece-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}.piece-entry{display:flex;flex-direction:column;align-items:center;position:relative;padding:6px;background:#2a2a4a;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:border-color .1s}.piece-entry:hover{border-color:#555}.piece-entry.selected{border-color:#4a90d9}.piece-entry.exhausted{opacity:.4;cursor:not-allowed}.piece-count{position:absolute;top:2px;right:4px;font-size:.7rem;color:#888}.piece-mini-svg{width:60px;height:40px}kbd{background:#333;padding:1px 4px;border-radius:3px;border:1px solid #555;font-size:.7rem}#modal-overlay,#help-modal-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100}#modal-overlay.hidden,#help-modal-overlay.hidden{display:none}#modal,#help-modal{background:#2a2a4a;border:1px solid #555;border-radius:8px;padding:24px;min-width:260px;text-align:center}#modal h2,#help-modal h2{font-size:1.1rem;color:#ccc;margin-bottom:16px}#date-input{width:100%;padding:8px;border:1px solid #555;border-radius:4px;background:#1a1a2e;color:#e0e0e0;font-size:1rem;margin-bottom:16px}#modal-buttons{display:flex;gap:8px}#modal-buttons button{flex:1;padding:8px;border:1px solid #666;background:transparent;color:#ccc;cursor:pointer;border-radius:4px;font-size:.85rem}#modal-buttons button:hover{background:#3a3a5a}#help-modal dl{text-align:left;margin-bottom:16px}#help-modal dt{display:inline;margin-right:8px}#help-modal dd{display:inline;color:#aaa;font-size:.85rem}#help-modal dt,#help-modal dd{margin-bottom:8px}#help-modal dl>dt{display:block;float:left;clear:left;width:50px;margin-bottom:8px}#help-modal dl>dd{display:block;margin-left:50px;margin-bottom:8px}#btn-help-close{padding:6px 16px;border:1px solid #666;background:transparent;color:#ccc;cursor:pointer;border-radius:4px;font-size:.85rem}#btn-help-close:hover{background:#3a3a5a}