:root{--bg: #d9d7d2;--slab: #e6e4df;--fg: #1c1c1a;--muted: #5f5d58;--line: #1c1c1a;--hairline: #b9b6af;--invert-bg: #1c1c1a;--invert-fg: #e6e4df;--rust: #9a3b1f;--error: #9a3b1f;--rust-on-invert: #e8956f;--scrim: rgb(28 28 26 / .5);--mono: "IBM Plex Mono", "Noto Sans JP", ui-monospace, monospace}@media (prefers-color-scheme: dark){:root{--bg: #1a1a19;--slab: #252523;--fg: #e3e1dc;--muted: #97948e;--line: #e3e1dc;--hairline: #3d3c39;--invert-bg: #e3e1dc;--invert-fg: #1a1a19;--rust: #d0724f;--error: #d0724f;--rust-on-invert: #9a3b1f;--scrim: rgb(0 0 0 / .6)}}*{box-sizing:border-box;border-radius:0}body{margin:0;background:var(--bg);color:var(--fg);-webkit-tap-highlight-color:transparent;font-family:var(--mono);font-size:15px;line-height:1.55}main{max-width:640px;margin:0 auto;padding:0 16px calc(88px + env(safe-area-inset-bottom))}h1,h2,h3,p{margin:0}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;white-space:nowrap}button:disabled{cursor:default;opacity:.4}:focus-visible{outline:2px solid var(--fg);outline-offset:2px}.grow{flex:1;min-width:0}.muted{color:var(--muted)}.small{font-size:.82rem}.error{color:var(--error);font-size:.85rem;margin-top:8px}button.primary,button.outlined,button.tonal{border:2px solid var(--line);padding:8px 18px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--slab)}button.primary{background:var(--invert-bg);color:var(--invert-fg)}button.primary.small{padding:6px 14px}button.outlined.small{padding:3px 12px;font-size:.78rem;border-width:1.5px;flex:none}button.tonal{padding:4px 12px;font-size:.8rem}button.primary:not(:disabled):hover,button.outlined:not(:disabled):hover,button.tonal:not(:disabled):hover{background:var(--fg);color:var(--bg)}button.text{padding:10px 12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;text-decoration:underline;text-underline-offset:4px}button.text.danger{color:var(--error)}button.text:hover{background:var(--fg);color:var(--bg);text-decoration:none}button.icon{width:48px;height:48px;display:grid;place-items:center;font-size:1.2rem}button.icon:hover{background:var(--fg);color:var(--bg)}.top{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:0;margin:0 -16px 20px;padding:8px 8px 8px 16px;background:var(--bg);border-bottom:2px solid var(--line)}.top h1{font-size:1.5rem;font-weight:700;text-transform:lowercase;letter-spacing:.02em;display:flex;align-items:baseline;position:relative;top:2px}.top h1 .handle{color:var(--muted);font-size:.9rem;font-weight:500;margin-left:8px;text-transform:none}.top small{display:block;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}.logo{height:48px;padding:0;margin-right:14px;color:var(--fg);display:grid;place-items:center;flex:none}.logo:hover{background:none;color:var(--fg);opacity:.7}.selection{display:flex;align-items:center;gap:12px;width:100%}.selection small{display:block}.composer{background:var(--slab);border:2px solid var(--line);padding:14px 16px 12px;cursor:text}.composer textarea{width:100%;border:0;outline:none;resize:none;background:transparent;color:var(--fg);font:inherit;font-size:1.05rem;min-height:2.6em}.composer textarea::placeholder{color:var(--muted)}.composer-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding-top:10px;border-top:1px solid var(--hairline)}.offline{margin-top:12px;padding:10px 14px;border:2px dashed var(--muted);font-size:.85rem}.tabs{display:grid;grid-template-columns:repeat(5,1fr);margin:20px 0 16px;border:2px solid var(--line)}.tabs button{padding:10px 2px 8px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;border-left:2px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tabs button:first-child{border-left:0}.tabs button .count,.tabs button .over{font-size:1.15rem;margin:0}.tabs button .over{color:var(--rust)}.tabs button:hover,.tabs button.active{background:var(--invert-bg);color:var(--invert-fg)}.tabs button:hover .over,.tabs button.active .over{color:var(--rust-on-invert)}.items{list-style:none;margin:0;padding:0}.card-wrap{position:relative;margin-bottom:18px}.card{background:var(--slab);border:2px solid var(--line);padding:14px 16px}.item{position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:pan-y;transition:transform .2s ease-out,opacity .2s ease-out}.item.pending{border-style:dashed}.item.selected{background:var(--invert-bg);color:var(--invert-fg)}.item.selected .meta,.item.selected .note-preview{color:inherit;opacity:.75}.title-row{display:flex;align-items:flex-start;gap:10px}.item-text{flex:1;white-space:pre-wrap;word-break:break-word;font-size:1rem}.badge{flex:none;min-width:26px;height:26px;padding:0 5px;border:2px solid currentColor;font-size:.8rem;font-weight:700;display:grid;place-items:center}.note-preview{margin-top:6px;color:var(--muted);font-size:.85rem;white-space:pre-wrap;word-break:break-word;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;padding-left:10px;border-left:2px solid var(--hairline)}.meta{color:var(--muted);font-size:.75rem;margin-top:8px;letter-spacing:.04em}.swipe-bg{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;padding:0 24px;background:var(--invert-bg);color:var(--invert-fg);font-weight:700;text-transform:uppercase;letter-spacing:.06em}.swipe-bg.start:before{content:"→ ";white-space:pre}.swipe-bg.end{justify-content:flex-end}.swipe-bg.end:after{content:" ←";white-space:pre}.swipe-bg.dropped,.swipe-bg.delete{background:var(--rust);color:#f3efe9}.empty{color:var(--muted);text-align:center;padding:56px 0;border:2px dashed var(--hairline)}.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translate(-50%);width:max-content;max-width:calc(100% - 32px);display:flex;align-items:center;gap:16px;background:var(--invert-bg);color:var(--invert-fg);padding:12px 16px;font-size:.88rem;animation:rise .15s ease-out;z-index:10}.toast button{font-weight:700;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px}@keyframes rise{0%{opacity:0;transform:translate(-50%,8px)}}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--scrim);display:grid;place-items:center;padding:16px;z-index:5}.dialog{background:var(--bg);color:var(--fg);border:2px solid var(--line);padding:24px;width:100%;max-width:560px;max-height:calc(100dvh - 32px);overflow-y:auto}.dialog h2{font-size:1.1rem;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--line);text-transform:uppercase;letter-spacing:.04em}.dialog p{line-height:1.6}.dialog-actions{display:flex;justify-content:flex-end;gap:4px;margin-top:16px}.dialog-actions:empty{display:none}@media (max-width: 600px){.backdrop{place-items:end stretch;padding:0}.dialog{border-width:2px 0 0;max-height:92dvh;padding-bottom:calc(24px + env(safe-area-inset-bottom))}}.code{font-size:1.1rem;font-weight:700;margin:16px 0 12px;word-break:break-all;-webkit-user-select:all;user-select:all}.code.small{font-size:.95rem;margin:4px 0 8px}.qr{display:block;margin:16px auto;background:#fff;padding:8px;border:2px solid var(--line);image-rendering:pixelated}.sheet-title{width:100%;border:0;outline:none;background:transparent;color:var(--fg);font:inherit;font-size:1.1rem;font-weight:700;padding:4px 0}.note-box{position:relative;margin:12px 0 16px}.note-box textarea{width:100%;min-height:140px;padding:14px 14px 56px;border:2px solid var(--line);background:var(--slab);color:var(--fg);font:inherit;resize:none;overflow:hidden}.note-box textarea:focus{outline:none;box-shadow:inset 0 0 0 1px var(--line)}.note-box button{position:absolute;right:10px;bottom:14px}.tiles{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--line)}.tile{white-space:normal;background:var(--slab);padding:16px;text-align:left;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-right:2px solid var(--line);border-bottom:2px solid var(--line)}.tile:nth-child(2n){border-right:0}.tile:nth-last-child(-n+2):nth-child(odd),.tile:last-child{border-bottom:0}.tile:before{content:"→ "}.tile:hover{background:var(--fg);color:var(--bg)}.tile.dropped,.tile.delete{color:var(--rust)}.tile.dropped:hover,.tile.delete:hover{background:var(--rust);color:#f3efe9}section h3{font-size:.82rem;margin:28px 0 0;padding-bottom:6px;text-transform:uppercase;letter-spacing:.08em}.group{background:var(--slab);border:2px solid var(--line)}.row{white-space:normal;display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px;border-bottom:1px solid var(--hairline)}.row:last-child{border-bottom:0}button.row:hover{background:var(--fg);color:var(--bg)}button.row:hover .row-subtitle{color:inherit;opacity:.75}.row-title{display:block;font-size:.95rem;font-weight:600;overflow-wrap:anywhere}.row-subtitle{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}.row-title.danger{color:var(--rust)}.switch{flex:none;width:44px;height:24px;border:2px solid var(--line);position:relative}.switch:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--line);transition:transform .15s}.switch.on{background:var(--fg)}.switch.on:after{background:var(--bg);transform:translate(20px)}.choices{display:flex;flex-direction:column}.choice{display:flex;align-items:center;gap:12px;padding:12px 4px;cursor:pointer;border-bottom:1px solid var(--hairline)}.choice:last-child{border-bottom:0}.choice input{width:18px;height:18px;accent-color:var(--fg)}.link-qr{display:flex;flex-direction:column;align-items:center;margin:12px 0 4px}.qr.placeholder{width:256px;height:256px;background:var(--slab)}.steps{align-self:stretch;margin:8px 0 0;padding-left:1.6em;line-height:1.8;font-size:.9rem}.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.78rem;margin:16px 0 12px;text-transform:uppercase;letter-spacing:.08em}.or:before,.or:after{content:"";flex:1;border-top:2px solid var(--hairline)}button.wide{width:100%;padding:10px 16px;margin-top:8px}.account-code{font-weight:700;letter-spacing:.08em}.about{padding:14px 16px;border-bottom:1px solid var(--hairline);font-size:.85rem;line-height:1.7}.about p+p{margin-top:10px}
