html,body{touch-action:pan-x pan-y}
:root{color-scheme:dark;--gold:#d9c3a1;--muted:#8992a9;--line:#d6c7aa22}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#050711;color:#f1e9db;font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif}button,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,summary:focus-visible{outline:1px solid #e6cf9f;outline-offset:5px}#app{display:grid;grid-template-columns:minmax(0,1fr) 350px;height:100dvh}.viewer{position:relative;min-width:0;overflow:hidden;background:#04060d}#c{display:block;width:100%;height:100%;touch-action:none}.brand{position:absolute;left:34px;top:29px;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:.27em;color:var(--gold)}h1{font:400 34px/1 Georgia,serif;letter-spacing:.13em;margin:11px 0}.render-badge{position:absolute;right:26px;top:29px;color:#97afbd;font-size:9px;letter-spacing:.06em}.render-badge:before{content:'●';color:#94c8b1;font-size:7px;margin-right:7px}.caption{position:absolute;left:34px;bottom:30px;pointer-events:none}h2{font:400 23px/1.3 Georgia,'Apple SD Gothic Neo',serif;margin:12px 0 8px}.caption p{font-size:11px;color:#9198ad;margin:0}.view-controls{position:absolute;bottom:30px;right:26px;display:flex;gap:3px}.view-controls button{background:#090d18b3;color:#b6bbcc;border:1px solid var(--line);padding:8px 10px;font-size:10px;border-radius:3px}.panel{overflow-y:auto;background:linear-gradient(160deg,#111622,#090d16);padding:26px 27px 24px;border-left:1px solid var(--line)}h3{font-size:25px;font-weight:400;line-height:1.5;letter-spacing:-.05em;margin:21px 0 15px}.under{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.under button{padding:10px 16px;color:#cfc8bd;background:transparent;border:1px solid #c9b99944;border-radius:4px;font-size:11px}
.under .left{display:flex;gap:8px}.under #historyBtn{padding:10px 14px}
.linklike{background:none;border:0;padding:2px 0;color:var(--gold);font-size:11px;text-decoration:underline;cursor:pointer}
.sheet{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;background:#02030acc}
.sheet[hidden]{display:none}
.sheet-box{width:100%;max-width:560px;max-height:78dvh;overflow-y:auto;padding:16px 16px calc(20px + env(safe-area-inset-bottom));background:#0c1120;border:1px solid var(--line);border-radius:14px 14px 0 0}
@media(min-width:761px){.sheet{align-items:center}.sheet-box{border-radius:14px;max-height:80vh}}
.sheet-head{display:flex;align-items:center;gap:10px;font-size:14px}.sheet-head b{font-weight:600;color:var(--gold)}.sheet-head #historyCount{flex:1;font-size:11px;color:#78839b}
.sheet-head #historyClose{background:none;border:0;color:#cfc8bd;font-size:18px;padding:4px 8px;cursor:pointer}
.sheet-note{margin:6px 0 12px;font-size:11px;color:#78839b}
.hgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hitem{position:relative;display:flex;flex-direction:column;gap:6px;padding:0 0 8px;text-align:left;color:#cfc8bd;background:#d9c3a108;border:1px solid #c9b99944;border-radius:8px;overflow:hidden;font-size:10px;line-height:1.4;cursor:pointer}
.hitem .pic{aspect-ratio:1;width:100%;background:#050711;display:flex;align-items:center;justify-content:center}
.hitem .pic img{width:100%;height:100%;object-fit:cover;display:block}
.hitem .dots{display:flex;gap:4px}.hitem .dots i{width:14px;height:14px;border-radius:50%;display:block}
.hitem .t,.hitem .n{padding:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hitem .t{color:#e6dfd0}.hitem .n{color:#78839b}
.redeem{margin:18px 0 0;font-size:12px;color:var(--muted)}.redeem summary{cursor:pointer}.redeem .hint{margin:8px 0;font-size:11px;line-height:1.6;color:#78839b}
.redeem .rrow{display:flex;gap:8px}.redeem input{flex:1;min-width:0;padding:10px;font:inherit;font-size:13px;color:#f2eadb;background:#070c16;border:1px solid #b0b8c333;border-radius:5px}.redeem button{padding:10px 14px;color:#cfc8bd;background:transparent;border:1px solid #c9b99944;border-radius:4px;font-size:11px}
@media(max-width:760px){.redeem input{font-size:16px}}
.hitem .own{position:absolute;top:6px;right:6px;padding:2px 7px;border-radius:10px;border:1px solid #d8c29b;background:#1c2230d9;color:#d8c29b;font-size:9px}
.hitem.now{border-color:#d8c29b}.hitem .badge{position:absolute;top:6px;left:6px;padding:2px 6px;border-radius:10px;background:#d8c29b;color:#1c2230;font-size:9px}
#historyEmpty{margin:18px 0;font-size:12px;color:#78839b;text-align:center}
.count{font-size:10px;color:#6e7890;white-space:nowrap}
.desc{font-size:12px;line-height:1.9;color:var(--muted);margin:12px 0 0}
#captionTitle{white-space:pre-line}label{display:block;font-size:11px;color:#d5cbbd;margin-bottom:12px}textarea{width:100%;height:84px;resize:vertical;padding:15px;line-height:1.8;font-size:13px;background:#070c16;border:1px solid #b0b8c333;color:#f2eadb;border-radius:5px;outline:none}textarea:focus{border-color:#d8bd8b99}textarea::placeholder{color:#596174}.note{font-size:10px;line-height:1.8;color:#78839b;margin:10px 0 0}.progress{margin:18px 0 0}
.keep.note{margin:12px 0 28px}.row{display:flex;justify-content:space-between;font-size:10px;color:#c5b99f;margin-bottom:10px}.track{height:2px;background:#273047}.track span{display:block;width:0;height:100%;background:linear-gradient(90deg,#80cce4,#ba98de,#e6c997)}.tone-label{margin-top:0}.palettes{display:flex;gap:7px}.tone{flex:1;background:transparent;color:#818aa1;border:1px solid transparent;border-radius:4px;font-size:9px;padding:10px 1px}.tone i{display:block;width:25px;height:25px;margin:0 auto 9px;background:var(--sw);border-radius:50%;box-shadow:inset 0 0 5px #ffffff77}.tone.active{border-color:#e0c39055;background:#ceb79108;color:#f0e2cb}.actions{display:flex;gap:9px;margin-top:25px}.actions button{flex:1;padding:13px 5px;color:#cfc8bd;background:transparent;border:1px solid #c9b99944;border-radius:4px;font-size:11px}.actions .primary{background:#d8c29b;color:#1c2230;border-color:#d8c29b}.meta{border-top:1px solid var(--line);padding-top:22px;margin:27px 0 0;font-size:10px;line-height:2.3}.meta div{display:flex;justify-content:space-between;gap:12px}dt{color:#707c94}dd{margin:0;color:#bbb9bd;overflow-wrap:anywhere;text-align:right;max-width:180px}.gesture{font-size:10px;color:#657087;margin:25px 0}.diagnostics{font-size:10px;color:#68778e;line-height:1.8}.diagnostics pre{white-space:pre-wrap;word-break:break-all;font-size:9px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#161d2d;border:1px solid var(--line);color:#e3d5bb;padding:12px 20px;font-size:12px;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .2s}#toast.show{opacity:1}#fatal{position:absolute;left:15%;right:15%;top:45%;text-align:center;line-height:1.8;color:#d6bcb5;font-size:13px}#exportLink{font-size:10px;color:#b9b5b1;display:block;margin-top:10px}#exportLink[hidden]{display:none}@media(max-width:760px){#app{display:flex;flex-direction:column;height:auto;min-height:100dvh}.viewer{height:64dvh;min-height:440px}.panel{padding:18px 26px 30px;border-top:1px solid var(--line);border-left:0;overflow:visible}.brand{left:22px;top:22px}h1{font-size:26px}.brand .eyebrow{font-size:7px}.render-badge{top:22px;right:17px;font-size:8px}.caption{left:22px;bottom:23px}h2{font-size:18px}.caption p{max-width:200px;font-size:10px}.view-controls{right:17px;bottom:23px}.view-controls button{font-size:9px;padding:7px}textarea{font-size:16px;height:92px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.sentence-palette{display:flex;align-items:center;gap:12px;font-size:13px;color:#e1cfaf;margin:12px 0 8px}#colorSwatches{display:flex;gap:4px}#colorSwatches i{display:block;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff30}

.view-controls button[aria-pressed=true]{color:#f1e9db;border-color:#d9c3a1;background:#1a1f33d9}

.seal-result{margin:14px 0 4px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#d9c3a10d;font-size:13px;line-height:1.55}
.seal-result[hidden]{display:none}
.seal-result .sr-head{color:var(--gold);font-size:11px;letter-spacing:.08em;margin:0 0 6px}
.seal-result .sr-text{margin:0 0 8px;white-space:pre-wrap;word-break:break-word;max-height:7.5em;overflow:auto;color:#f1e9db}
.seal-result .sr-note{margin:0 0 8px;color:var(--muted);font-size:12px}
.seal-result .sr-note a{color:var(--gold)}
.seal-result button{font:inherit;font-size:12px;padding:6px 12px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--gold);cursor:pointer}
.seal-result .sr-rec+.sr-rec{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}

.actions .button-link{flex:1;padding:13px 5px;color:#cfc8bd;border:1px solid #c9b99944;border-radius:4px;font-size:11px;display:flex;align-items:center;justify-content:center;text-decoration:none}

.keep a{color:var(--gold)}