:root{--accent:#7aa2f7;--ink:#e6e9ef;--ink-muted:#e6e9efb8}html,body{color:#e6e9ef;background:#0b0e14;height:100%;margin:0;font:14px system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}body{overscroll-behavior:none;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;width:100%;height:100dvh;position:fixed;inset:0}#root{position:fixed;inset:0;overflow:hidden}canvas{position:fixed;inset:0}.panel{width:min(520px,90vw);margin:0;position:fixed;left:50%;transform:translate(-50%)}.panel-bottom{bottom:28px}.panel-top{opacity:.55;width:min(320px,70vw);transition:opacity .12s;top:16px}.panel-top:focus-within{opacity:1}input,textarea,button{font:inherit;color:inherit}input[type=number]{appearance:textfield}input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.panel input,.detail input,.detail textarea{box-sizing:border-box;background:#141820f0;border:1px solid #ffffff26;border-radius:8px;outline:none;width:100%;padding:9px 12px}.panel input:focus,.detail input:focus,.detail textarea:focus{border-color:#fff6}input[type=search]::-webkit-search-cancel-button{display:none}.offline{top:calc(8px + env(safe-area-inset-top,0px));color:#0b0e14;z-index:5;pointer-events:none;background:#e0af68;border-radius:999px;margin:0;padding:6px 12px;font-size:12px;position:fixed;left:50%;transform:translate(-50%)}.hint,.error{color:#ffffff59;pointer-events:none;-webkit-user-select:none;user-select:none;margin:0;font-size:12px;position:fixed;bottom:8px;left:12px}.error{color:#f7768e;left:auto;right:12px}.detail{background:#141820f5;border:1px solid #ffffff1f;border-radius:12px;flex-direction:column;gap:10px;width:min(400px,94vw);max-height:calc(100vh - 24px);padding:12px;display:flex;position:fixed;top:12px;right:12px;overflow-y:auto}.detail header{align-items:flex-start;gap:8px;display:flex}.detail .status{background:#ffffff0a;border:1px solid #ffffff1a;border-radius:10px;flex-direction:column;flex:1;gap:2px;padding:7px 10px;display:flex}.detail .status strong{font-size:15px}.detail .status span{color:var(--ink-muted);font-size:12px}.detail .status-late{background:#f7768e1f;border-color:#f7768e99}.detail .status-late strong{color:#f7768e}.detail .status-due{background:#e0af681f;border-color:#e0af6899}.detail .status-due strong{color:#e0af68}.detail .status-done strong{color:#9ece6a}.detail .save-state{color:var(--ink-muted);text-align:right;min-width:52px;padding-top:6px;font-size:11px}.detail .save-state.saved{color:#9ece6a}.detail .field{flex-direction:column;gap:4px;display:flex}.detail .field>span,.detail h3,.composer h3{text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted);font-size:11px}.detail h3,.composer h3{border-bottom:1px solid #ffffff1a;margin:0 0 5px;padding-bottom:3px}.detail section,.composer section{flex-direction:column;display:flex}.detail .detail-title{font-size:15px;font-weight:600}.detail dl{grid-template-columns:80px 1fr;align-items:start;gap:4px 10px;margin:0;font-size:13px;display:grid}.detail dt{color:var(--ink-muted);padding-top:6px}.detail dd{min-width:0;margin:0}.detail dd.readout{color:var(--ink);padding-top:6px}.detail .muted{color:var(--ink-muted);margin:4px 0 0;font-size:12px}.detail dd input[type=date]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;border-radius:999px;min-height:30px;padding:4px 8px;font-size:12px}.detail textarea{resize:vertical;min-height:40px}.detail footer{border-top:1px solid #ffffff1a;flex-wrap:wrap;gap:6px;padding-top:4px;display:flex}.detail button{cursor:pointer;background:#ffffff0f;border:1px solid #ffffff2e;border-radius:8px;min-height:34px;padding:5px 12px}.detail button:hover:not(:disabled){background:#ffffff1f}.detail button:focus-visible,.detail input:focus-visible,.detail textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.detail button:disabled{opacity:.4;cursor:default}.detail button.primary{color:#0b0e14;background:#9ece6a;border-color:#9ece6a;font-weight:600}.detail button.undo{color:#0b0e14;background:#f7768e;border-color:#f7768e;font-weight:600}.detail button.danger{color:#f7768e;margin-left:auto}.detail button.danger.confirm{color:#0b0e14;background:#f7768e;font-weight:600}.detail .chips,.composer .chips{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.detail button.chip,.composer button.chip{min-height:30px;color:var(--ink);background:#ffffff1a;border:1px solid #ffffff1f;border-radius:999px;padding:3px 10px;font-size:12px}.detail button.chip:hover,.composer button.chip:hover{color:var(--ink);background:#ffffff2e;border-color:#ffffff4d}.detail button.chip.on,.composer button.chip.on{background:var(--accent);border-color:var(--accent);color:#0b0e14;font-weight:600}.detail button.ghost{background:0 0;border-color:#0000;min-height:0;padding:4px 9px;font-size:18px;line-height:1}.modal-backdrop{z-index:10;background:#0000008c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:#141820fa;border:1px solid #ffffff24;border-radius:12px;flex-direction:column;gap:12px;width:min(360px,92vw);padding:14px;display:flex}.modal header{justify-content:space-between;align-items:center;display:flex}.symbol-grid{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.symbol-cell{cursor:pointer;background:#ffffff0a;border:1px solid #ffffff24;border-radius:10px;min-height:44px;font-size:22px}.symbol-cell:hover{background:#ffffff1f}.symbol-cell.on{background:#7aa2f740;border-color:#7aa2f7}.symbol-cell:focus-visible{outline:2px solid #7aa2f7}.detail button.symbol-tile,.composer button.symbol-tile{background:#ffffff0f;border:1px solid #ffffff38;border-radius:10px;width:40px;min-height:40px;padding:0;font-size:22px;line-height:1}.detail button.symbol-tile.empty,.composer button.symbol-tile.empty{color:#e6e9ef80;background:0 0;border-style:dashed;font-size:20px}.detail button.symbol-tile:hover,.composer button.symbol-tile:hover{border-color:#7aa2f7}.legend{flex-direction:column;gap:4px;max-height:70vh;display:flex;position:fixed;top:50%;left:12px;overflow-y:auto;transform:translateY(-50%)}.legend-item{color:#e6e9ef99;cursor:pointer;text-align:left;background:0 0;border:1px solid #0000;border-radius:999px;align-items:center;gap:8px;padding:4px 10px 4px 6px;font-size:12px;display:flex}.legend-item:hover{color:#e6e9efe6;background:#ffffff0d}.legend-item.on{color:#e6e9ef;background:#141820f0;border-color:#ffffff40}.legend .dot{border-radius:50%;flex:none;width:10px;height:10px}.detail dd input.category{width:100%;padding:3px 6px}.cup-view{z-index:5;background:#0b0e14;position:fixed;inset:0}.cup-view canvas{cursor:default;display:block;position:fixed;inset:0}.cup-header{background:#141820f0;border:1px solid #ffffff1f;border-radius:10px;align-items:center;gap:10px;padding:6px 6px 6px 12px;display:flex;position:fixed;top:16px;left:16px}.cup-header span{color:#e6e9ef99;font-size:13px}.cup-header button.ghost{cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;padding:2px 9px;font-size:18px;line-height:1}.tune{background:#141820f0;border:1px solid #ffffff1f;border-radius:10px;width:260px;padding:10px 12px;font-size:11px;position:fixed;top:16px;bottom:60px;left:16px;overflow-y:auto}.tune header{align-items:center;gap:6px;margin-bottom:6px;display:flex}.tune header strong{flex:1;font-size:12px}.tune button{cursor:pointer;background:#ffffff0f;border:1px solid #ffffff26;border-radius:6px;padding:3px 8px;font-size:11px}.tune h4{text-transform:uppercase;letter-spacing:.04em;color:#e6e9ef80;margin:10px 0 4px;font-size:11px}.tune label{grid-template-columns:1fr auto;gap:0 8px;margin:4px 0;display:grid}.tune label span{color:#e6e9efbf}.tune label output{font-variant-numeric:tabular-nums;color:#e6e9efe6}.tune label input[type=range]{grid-column:1/-1;width:100%;margin:0}.tune .tune-toggle{align-items:center;gap:6px;display:flex}.toolbar{gap:8px;display:flex;position:fixed;top:16px;left:16px}.settings-toggle{color:#e6e9ef;cursor:pointer;background:#141820f0;border:1px solid #ffffff2e;border-radius:8px;min-height:36px;padding:8px 16px;font-size:14px;font-weight:500;line-height:1}.settings-toggle:hover{background:#ffffff1f;border-color:#ffffff59}.add-toggle{background:var(--accent);border-color:var(--accent);color:#0b0e14;font-weight:600}.add-toggle:hover{background:#8fb3ff}.settings{background:#141820f0;border:1px solid #ffffff1f;border-radius:10px;flex-direction:column;gap:10px;width:min(280px,90vw);padding:12px;display:flex;position:fixed;top:60px;left:16px}.settings header{justify-content:space-between;align-items:center;display:flex}.settings input{box-sizing:border-box;background:#0b0e14cc;border:1px solid #ffffff26;border-radius:8px;outline:none;width:100%;padding:8px 10px}.settings input:focus{border-color:#fff6}.settings .muted{color:#e6e9ef80;margin:0;font-size:12px}.settings .category-list{flex-direction:column;gap:4px;max-height:50vh;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.settings .category-list li{align-items:center;gap:8px;font-size:13px;display:flex}.settings .category-list .name{flex:1}.settings .swatch{border-radius:50%;width:10px;height:10px}.settings button.ghost{cursor:pointer;color:#e6e9ef99;background:0 0;border:1px solid #0000;border-radius:6px;padding:2px 7px;font-size:16px;line-height:1}.settings button.ghost:hover{color:#f7768e}.composer{opacity:.85;background:#141820f0;border:1px solid #ffffff1f;border-radius:10px;flex-direction:column;gap:12px;width:min(272px,90vw);max-height:calc(100vh - 72px);padding:12px;transition:opacity .12s;display:flex;position:fixed;top:56px;left:16px;overflow-y:auto}.composer:focus-within,.composer:hover{opacity:1}.composer input{box-sizing:border-box;background:#0b0e14cc;border:1px solid #ffffff26;border-radius:8px;outline:none;width:100%;padding:9px 12px}.composer input:focus{border-color:#fff6}.composer button{font:inherit;color:inherit;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff26;border-radius:8px}.composer .muted{color:#e6e9ef80;margin:0;font-size:12px}.composer button.primary{background:var(--accent);border-color:var(--accent);color:#0b0e14;padding:8px 12px;font-weight:600}.composer button.primary:disabled{opacity:.35;cursor:default}.legend{max-height:30vh;top:auto;bottom:16px;transform:none}.hint{white-space:nowrap;left:50%;transform:translate(-50%)}.settings{z-index:5}@media (width<=600px),(pointer:coarse) and (width<=900px){.composer{top:auto;left:0;right:0;bottom:var(--kb,0px);width:auto;max-height:min(70vh,560px);padding:12px 14px calc(14px + env(safe-area-inset-bottom,0px));opacity:1;border-bottom:none;border-radius:16px 16px 0 0;transition:bottom .12s;box-shadow:0 -8px 32px #00000073}.composer input{font-size:16px}.composer button.primary{min-height:44px}}