*{margin:0;padding:0;box-sizing:border-box}body{background:#1a1a1a;font-family:system-ui,sans-serif;min-height:100dvh;display:flex;align-items:center;justify-content:center}#root{width:100%}:root{--bg-btn: #282828;--bg-btn-hover: #333;--bg-surface: #222;--bg-input: #1a1a1a;--text-muted: #666;--text-default: #999;--text-hover: #fff;--accent: #88f;--accent-text: #aaf;--danger: #e77;--danger-bg: #3a2020}.app *{-webkit-user-select:none;user-select:none}.app button{user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}.app{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;padding:16px;gap:12px}@media(min-width:400px){.app{padding:32px}}.top-row{position:fixed;top:16px;left:50%;transform:translate(-50%);display:flex;justify-content:space-between;width:calc(100% - 32px);max-width:480px;z-index:10}@media(min-width:400px){.top-row{top:32px;width:calc(100% - 64px)}}.corner-pill{padding:6px 16px;border:none;border-radius:10px;background:var(--bg-btn);color:var(--text-default);font-size:11px;font-weight:600;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;line-height:1.4;transition:background .15s,color .15s,opacity .15s}@media(hover:hover){.corner-pill:hover{background:var(--bg-btn-hover);color:var(--text-hover)}}.corner-pill:disabled{opacity:.3;cursor:default}.grid-name{font-size:16px;color:#aaa;letter-spacing:.04em}.rename-btn{background:none;border:none;color:#888;cursor:pointer;padding:2px 4px;line-height:1;opacity:.5;transition:opacity .15s}@media(hover:hover){.rename-btn:hover{opacity:1}}.board{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;max-width:480px}.pad{position:relative;aspect-ratio:1;border:none;border-radius:10px;cursor:pointer;font-size:20px;font-weight:700;text-transform:uppercase;transition:background .15s;color:#fff}.key-label{color:transparent}@media screen and (pointer:fine)and (hover:hover){.key-label{color:#ffffff4d}}.pad:active{transform:scale(.95)}.pad-delete{position:absolute;top:4px;right:6px;font-size:22px;font-weight:800;line-height:1;color:#ffffffb3;pointer-events:none}.toolbar{display:flex;gap:6px;width:100%;max-width:480px;margin-top:4px}.toolbar-btn{flex:1;padding:10px;border:none;border-radius:8px;background:var(--bg-btn);color:var(--text-muted);font-size:12px;font-weight:600;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;transition:background .15s,color .15s}@media(hover:hover){.toolbar-btn:hover{background:var(--bg-btn-hover);color:var(--text-hover)}}.toolbar-btn.active{color:var(--accent-text)}.toolbar-btn.on,.corner-pill.on{background:var(--danger-bg);color:var(--danger)}.modal-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:100}.panel{background:var(--bg-surface);border-radius:14px;padding:20px 24px;width:320px;max-height:80vh;overflow-y:auto}.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.panel-header h2{font-size:13px;color:#888;text-transform:uppercase;letter-spacing:.08em}.panel-close{background:none;border:none;color:#555;font-size:20px;cursor:pointer;padding:0 4px;line-height:1}@media(hover:hover){.panel-close:hover{color:#fff}}.new-grid-btn{width:100%;padding:8px;margin-bottom:10px;border:1px dashed #444;border-radius:6px;background:none;color:#777;font-size:12px;font-weight:600;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;transition:border-color .15s,color .15s}@media(hover:hover){.new-grid-btn:hover{border-color:#888;color:#ccc}}.saved-list{display:flex;flex-direction:column;gap:3px}.saved-list .empty{font-size:13px;color:#555}.saved-item{display:flex;align-items:center;gap:2px}.saved-name{flex:1;text-align:left;background:var(--bg-btn);border:none;border-radius:4px;color:var(--text-default);padding:8px 10px;font-size:13px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(hover:hover){.saved-name:hover{background:var(--bg-btn-hover);color:var(--text-hover)}}.saved-delete{background:none;border:none;color:#444;font-size:16px;cursor:pointer;padding:4px 6px;line-height:1}@media(hover:hover){.saved-delete:hover{color:#f55}}.saved-item.active .saved-name{color:var(--accent-text)}.active-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:middle}.rename-form{flex:1}.rename-form input{width:100%;background:var(--bg-input);border:1px solid #555;border-radius:4px;color:var(--text-hover);padding:7px 9px;font-size:13px;outline:none}.rename-form input:focus{border-color:var(--accent)}.controls{display:flex;flex-direction:column;gap:12px}.slider-label,.select-label,.toggle-label{display:flex;flex-direction:column;font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}.slider-label{gap:6px}.select-label{gap:3px;flex:1}.toggle-label{flex-direction:row;align-items:center;gap:8px;cursor:pointer}.toggle-label input[type=checkbox]{accent-color:var(--accent)}.slider-label input[type=range]{width:100%;accent-color:var(--text-muted)}.scale-controls{display:flex;gap:8px}.select-label select{background:var(--bg-btn);border:1px solid var(--bg-btn-hover);border-radius:4px;color:var(--text-default);padding:6px;font-size:12px;cursor:pointer}@media(hover:hover){.select-label select:hover{border-color:var(--text-muted)}}.modal{background:var(--bg-surface);border-radius:16px;padding:40px 48px;text-align:center;max-width:360px}.modal h1{font-size:22px;color:#eee;margin-bottom:16px}.modal p{font-size:14px;color:#888;line-height:1.5;margin-bottom:4px}.modal-error{color:var(--danger)!important;font-size:13px!important}.modal-start{margin-top:20px;padding:12px 40px;border:none;border-radius:10px;background:#fff;color:#111;font-size:16px;font-weight:700;cursor:pointer;transition:opacity .15s}@media(hover:hover){.modal-start:hover{opacity:.85}}