:root{--bg:#15100c;--panel:#1f1712;--panel2:#271d16;--line:#3a2b20;--ink:#efe2cc;--dim:#a8957a;--gold:#d9a85b;--ember:#e0703f;--co:#9fd39a;--inner:#d6c2a0;
--serif:Georgia,'Iowan Old Style','Palatino Linotype',serif;--sans:'Segoe UI',system-ui,-apple-system,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:radial-gradient(1200px 600px at 50% -10%,var(--glow1) 0%,transparent 60%),radial-gradient(800px 500px at 100% 110%,var(--glow2) 0,transparent 60%),var(--bg);color:var(--ink);font:14px/1.5 var(--sans);overflow:hidden}
body:after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
#app{height:100vh;height:100dvh;display:flex;flex-direction:column}
header{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid var(--line);background:linear-gradient(var(--hdr1),var(--hdr2));flex:none;min-width:0}
.logo{font:italic 21px var(--serif);color:var(--gold);white-space:nowrap;background:none;border:0}.logo b{font-style:normal;font-size:13px;margin-right:6px}
.crumb{color:var(--dim);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.crumb em{color:var(--ink);font-family:var(--serif)}
select.crumbsel{background:transparent;border:0;color:var(--ink);font:italic 14px var(--serif);max-width:260px}
select.crumbsel option{background:var(--panel)}
.sp{flex:1}
.btn{border:1px solid var(--line);background:var(--panel2);color:var(--ink);padding:7px 13px;border-radius:8px;font-size:13px;white-space:nowrap}
.btn:hover{border-color:var(--line2)}.btn.sm{padding:3px 9px;font-size:12px;border-radius:6px}
.btn.gold{background:linear-gradient(var(--g1),var(--g2));color:#1b120a;border:0;font-weight:600;box-shadow:0 0 18px #d9a85b40}
.btn.ghost{background:none;border-color:transparent;color:var(--dim)}
.icon{background:none;border:0;color:var(--dim);font-size:15px;padding:4px 6px;border-radius:6px}.icon:hover{color:var(--ink);background:#ffffff0d}
.main{flex:1;display:flex;min-height:0}
.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px #0006}
h2{font:italic 26px var(--serif)}h3{font:600 11px var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.dim{color:var(--dim)}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;flex:none}
.scroll{overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
/* chat */
.chatcol{display:flex;flex-direction:column;gap:10px;min-height:0}
.msgs{flex:1;min-height:0;display:flex;flex-direction:column;gap:9px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding-right:2px}
.msg{max-width:90%;padding:8px 12px;border-radius:14px;font-size:13.5px;white-space:pre-wrap}
.msg.me{align-self:flex-end;background:var(--me);border:1px solid var(--line2);border-bottom-right-radius:4px}
.msg.ai{background:var(--well2);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.inner{font-style:italic;font-family:var(--serif);font-size:14.5px}
.msg .acts{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}.msg .acts button{font-size:11px;padding:2px 8px;border-radius:10px;border:1px solid var(--line);background:var(--well);color:var(--dim)}
.msg .acts button:hover{color:var(--ink)}
.who{font-size:11px;font-weight:600;margin-bottom:2px;letter-spacing:.5px;text-transform:uppercase;font-style:normal;font-family:var(--sans)}
.mem{font-size:11.5px;color:var(--dim);border:1px dashed var(--line);border-radius:10px;padding:6px 9px}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{font-size:12px;padding:4px 10px;border-radius:20px;border:1px solid var(--line);color:var(--dim);background:var(--well2);white-space:nowrap}
button.chip:hover{color:var(--ink);border-color:var(--line2)}
.input{display:flex;gap:6px;align-items:flex-end;border:1px solid var(--line);border-radius:12px;padding:6px 8px;background:var(--well)}
.input textarea{flex:1;background:none;border:0;outline:0;resize:none;font-size:13.5px;max-height:120px;padding:4px}
.tabs{display:flex;gap:3px;background:var(--well);padding:4px;border-radius:10px;overflow-x:auto;scrollbar-width:none;flex:none}
.tabs button{flex:1;padding:6px 9px;border-radius:7px;font-size:12px;color:var(--dim);background:none;border:0;white-space:nowrap}
.tabs button.on{background:var(--panel2);box-shadow:inset 0 0 0 1px var(--c,var(--line2));color:var(--c,var(--ink))}
.typingdots:after{content:'…';animation:td 1s infinite}@keyframes td{50%{opacity:.2}}
/* setup */
.rail{width:200px;padding:24px 16px;border-right:1px solid var(--line);flex:none}
.step{display:flex;gap:10px;align-items:center;padding:9px 0;color:var(--dim);background:none;border:0;width:100%;text-align:left}
.step i{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font:normal 11px var(--sans);flex:none}
.step.done i{background:var(--line2);border-color:var(--gold);color:var(--gold)}.step.now{color:var(--ink);font-weight:600}.step.now i{background:var(--gold);color:#1b120a;border-color:var(--gold);box-shadow:0 0 12px var(--gold)}
.field{margin-bottom:11px}.field label{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);display:block}.field p{font-family:var(--serif);font-size:15px;margin-top:1px;white-space:pre-wrap}
.field p.empty{color:var(--faint);font-style:italic;font-size:13.5px}.field.live p{border-right:2px solid var(--gold);animation:blink 1s infinite;display:inline-block}@keyframes blink{50%{border-color:transparent}}
.field.live label{color:var(--gold)}
.rel{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px dashed var(--line);font-size:13px}
.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:600 14px var(--serif);color:#1b120a;flex:none}
/* writing */
.side{width:250px;padding:16px 14px;border-right:1px solid var(--line);flex:none}
.chatp{width:350px;padding:14px;border-left:1px solid var(--line);flex:none;display:flex;flex-direction:column;gap:10px;min-height:0}
.page{flex:1;overflow:auto;padding:28px 56px 80px;font:16.5px/1.75 var(--serif);background:radial-gradient(600px 400px at 50% 0,var(--glow3),transparent);scrollbar-width:thin;scrollbar-color:var(--line) transparent;min-width:0}
.page .inner{max-width:680px;margin:0 auto}
.ch{font-size:11.5px;letter-spacing:3px;color:var(--gold);text-transform:uppercase;font-family:var(--sans)}
.page h1{font:italic 30px var(--serif);margin:4px 0 4px}
.page .scene-t{font:13px var(--sans);color:var(--dim);margin-bottom:18px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.page p{margin-bottom:12px;color:var(--text);position:relative}.nar{color:var(--text2)!important}
.dl{border-left:3px solid var(--c);padding-left:14px;margin-left:-17px}.dl .s{font:600 10.5px var(--sans);letter-spacing:1.5px;text-transform:uppercase;margin-right:7px;color:var(--c)}
.dl.innerv{font-style:italic;color:var(--inner)!important;border-left-style:dotted;background:linear-gradient(90deg,#d6c2a010,transparent 60%)}
.spk{background:none;border:0;font-size:12px;opacity:.35;margin-left:5px;vertical-align:middle}.spk:hover,.spk.on{opacity:1}
p.speaking{background:#d9a85b14;border-radius:4px}
textarea.draft{width:100%;min-height:60vh;background:var(--well);border:1px solid var(--line);border-radius:10px;padding:16px;font:16px/1.75 var(--serif);color:var(--ink);outline:0;resize:vertical}
.mini{padding:10px 11px;margin-bottom:9px;border-left:3px solid var(--c)}.mini .n{font:15.5px var(--serif);display:flex;align-items:center;gap:6px}
.mini .k{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-top:5px}
.mini input{width:100%;background:none;border:0;border-bottom:1px dashed transparent;outline:0;font-size:12.5px;padding:1px 0}.mini input:focus{border-bottom-color:var(--line)}
.mood{margin-left:auto;font-size:11px;padding:1px 7px;border-radius:10px;background:var(--well);border:1px solid var(--line);max-width:110px;text-align:center}
.beat{font-size:12.5px;color:var(--dim);display:flex;gap:6px;align-items:center;padding:2px 0;background:none;border:0;text-align:left;width:100%}.beat.miss{color:var(--ember)}.beat.got{color:var(--ink)}
.scenes a{display:block;padding:4px 8px;border-radius:6px;color:var(--dim);font-size:12.5px;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.scenes a.on{background:var(--hover);color:var(--ink)}
/* editors */
.note{padding:11px 13px;margin-bottom:10px;border-left:3px solid var(--c)}.note .t{font-size:12px;font-weight:600;display:flex;gap:6px;align-items:center}
.note p{font-size:13px;margin:4px 0 8px}.note .q{font:italic 12.5px var(--serif);color:var(--dim);border-left:2px solid var(--line);padding-left:8px}
.note .sug{font:13px var(--serif);color:var(--co);margin-bottom:8px}
.note.done{opacity:.55}.note .a{display:flex;gap:6px;flex-wrap:wrap}
.note .rep{font-size:12.5px;margin:4px 0;padding:5px 9px;border-radius:9px;background:var(--well)}
mark{background:linear-gradient(transparent 55%,var(--m,#d9a85b55) 55%);color:inherit}
.pin{font:600 10px var(--sans);padding:0 5px;border-radius:4px;color:#1b120a;background:var(--c)}
/* home */
.home{max-width:900px;margin:0 auto;padding:40px 24px;width:100%}
.story{padding:20px;margin-bottom:14px;cursor:pointer}.story h2{font-size:24px}
/* modal */
#modal:not(:empty){position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:50;padding:16px}
.dlg{width:min(560px,100%);max-height:90vh;overflow:auto;padding:22px}
.dlg label{display:block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);margin:12px 0 4px}
.dlg input,.dlg select,.dlg textarea{width:100%;background:var(--well);border:1px solid var(--line);border-radius:8px;padding:8px 10px;outline:0}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:60}
#toast div{background:var(--panel2);border:1px solid var(--line2);padding:8px 16px;border-radius:10px;margin-top:6px;box-shadow:0 10px 30px #000a}
.foot{font-size:11px;color:var(--dim)}
/* mobile */
.only-m{display:none}
@media (max-width:820px){
 header{padding:9px 12px;gap:8px}.hide-m{display:none!important}.only-m{display:flex}
 .side,.rail{display:none}.page{padding:16px 18px 50vh;font-size:15.5px}.dl{margin-left:0}
 .castchips{display:flex;gap:6px;padding:7px 12px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;flex:none}
 .chatp{position:fixed;left:0;right:0;bottom:0;width:auto;height:46%;background:linear-gradient(var(--panel2),var(--panel));border:0;border-top:1px solid var(--line2);border-radius:22px 22px 0 0;box-shadow:0 -20px 40px #000a;z-index:20;transition:height .25s;padding:8px 14px 14px}
 .chatp.min{height:62px;overflow:hidden}.chatp.max{height:88%}
 .grab{width:40px;height:4px;border-radius:2px;background:var(--line2);margin:0 auto 2px;flex:none;border:0}
 .setupwrap{flex-direction:column}.setupwrap .chatcol{border:0!important}
 .cardcol{width:auto!important;max-height:40%;padding:10px 14px!important;border-top:1px solid var(--line)}
 .mrail{display:flex;gap:4px;padding:8px 12px;border-bottom:1px solid var(--line);overflow-x:auto}
 .notesp{position:fixed;left:0;right:0;bottom:0;height:52%;width:auto!important;background:var(--panel);border-top:1px solid var(--line2);border-radius:20px 20px 0 0;z-index:20}
}
@media (min-width:821px){.castchips,.mrail,.grab{display:none}}
html,body{max-width:100vw;overflow-x:hidden}
@media (max-width:820px){select.crumbsel{flex:1 1 auto;min-width:0;max-width:none;width:0}header .logo{font-size:18px}header .logo b{display:none}.notesp .btn.sm{padding:3px 7px}}
/* ===== v2 layout: writing first ===== */
.sm{font-size:12.5px}.xs{font-size:11px}
.side{width:212px;padding:14px 10px;border-right:1px solid var(--line);flex:none;background:var(--side)}
.side details{margin-bottom:6px;border-bottom:1px solid var(--rule);padding-bottom:6px}
.side summary{cursor:pointer;list-style:none;font:600 10.5px var(--sans);letter-spacing:1.8px;text-transform:uppercase;color:var(--gold);padding:6px 4px}
.side summary::-webkit-details-marker{display:none}.side summary:before{content:'▸ ';color:var(--faint)}.side details[open] summary:before{content:'▾ '}
.side a{display:block;padding:4px 8px;border-radius:6px;color:var(--dim);font-size:12.5px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side a.on{background:var(--hover);color:var(--ink)}.side a.scn{padding-left:18px;font-size:12px}.side a.add{color:var(--gold);font-size:12px}
.side .mini{padding:6px 8px;margin:4px 0;border-left:2px solid var(--c);background:var(--well2);border-radius:6px}
.navl{margin-top:10px;display:flex;flex-direction:column;gap:1px}.navl a{color:var(--ink);opacity:.8}.navl a:hover{opacity:1;background:var(--hover)}
.clip{font:12.5px/1.4 var(--serif);color:var(--dim);padding:5px 6px;border-left:2px solid var(--line);margin:4px 0;display:flex;gap:4px;align-items:flex-start}
.page{padding:22px 48px 120px;position:relative}.page .inner{max-width:740px}
.tools{display:flex;align-items:center;gap:4px;margin-bottom:16px;padding-bottom:10px;border-bottom:1px dashed var(--rule);flex-wrap:wrap}
.tools .icon small{font-size:9px;vertical-align:super;color:var(--gold)}.btn.on{border-color:var(--line2)}
.watch{font-size:12px;color:var(--dim);display:flex;align-items:center;gap:3px}.watch select{background:var(--well);border:1px solid var(--line);border-radius:6px;padding:2px 4px;font-size:12px}
.scene-t{margin-bottom:14px!important}
textarea.draft{min-height:62vh;background:transparent;border:0;border-left:1px dashed var(--rule);border-radius:0;padding:4px 0 4px 18px;font-size:17px;color:var(--text)}
textarea.draft:focus{border-left-color:var(--line2)}
.drafwrap{position:relative}
#nudge{position:absolute;top:120px;right:18px;width:220px;z-index:5}
@media (max-width:1180px){#nudge{position:fixed;top:auto;bottom:90px;right:20px;width:260px}}
.nudge{padding:11px 13px;border-left:3px solid var(--co);animation:nin .4s ease;transition:opacity 4s}.nudge p{font-size:13px;margin:4px 0 8px;font-family:var(--sans);color:var(--ink)}
.nudge.fade{opacity:0}@keyframes nin{from{opacity:0;transform:translateX(10px)}}
.acts{display:flex;gap:5px;flex-wrap:wrap}.nudge .acts button,.msg .acts button{font-size:11px;padding:2px 8px;border-radius:10px;border:1px solid var(--line);background:var(--well);color:var(--dim)}
.bubble{position:fixed;right:22px;bottom:22px;width:54px;height:54px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,var(--g1),var(--g2));color:#1b120a;font-size:22px;box-shadow:0 8px 24px #000a,0 0 0 1px var(--line2);z-index:30}
.bubble.glow{animation:glow 1.6s ease-in-out infinite}@keyframes glow{50%{box-shadow:0 0 0 6px #9fd39a55,0 0 30px #9fd39a88}}
#pop{display:none}#pop.open{display:flex;flex-direction:column;gap:9px;position:fixed;right:22px;bottom:88px;width:380px;height:min(560px,72vh);padding:12px;z-index:31;background:linear-gradient(var(--panel2),var(--panel));border:1px solid var(--line2);border-radius:16px;box-shadow:0 20px 50px #000c}
.pophead{display:flex;gap:6px;align-items:center}.pophead .tabs{flex:1;min-width:0}
#rp{position:fixed;z-index:40}.rpbox{width:320px;padding:12px}.alt{display:block;width:100%;text-align:left;background:var(--well);border:1px solid var(--line);border-radius:8px;padding:7px 10px;margin-bottom:6px;font:14px var(--serif)}.alt:hover{border-color:var(--gold)}
.chip.sel{border-color:var(--gold);color:var(--ink)}
.pe{background:none;border:0;opacity:0;font-size:12px;color:var(--dim);margin-left:4px}p:hover .pe{opacity:.6}.pe:hover{opacity:1!important}
.diff{padding:12px 14px;margin:-4px 0 14px;border-left:3px solid var(--co)}.dtext{font:15.5px/1.7 var(--serif);white-space:pre-wrap}
del{color:#e98a7a;text-decoration:line-through;background:#e0703f14}ins{color:var(--co);text-decoration:none;background:#9fd39a18;border-bottom:1px solid #9fd39a66}
.hunk{cursor:pointer;border-radius:3px}.hunk.off ins{opacity:.35;text-decoration:line-through}.hunk.off del{text-decoration:none;color:inherit;background:none}
.offer{margin-top:8px;border-color:#9fd39a55;color:var(--co)}
.tag{font:600 9.5px var(--sans);letter-spacing:1px;padding:1px 6px;border-radius:4px;white-space:nowrap}
.t-LOCKED{background:#d9a85b;color:#1b120a}.t-LEANING{background:#8fc3e833;color:#8fc3e8;border:1px solid #8fc3e866}.t-OPEN{background:#9fd39a22;color:#9fd39a;border:1px dashed #9fd39a88}.t-REJECTED{background:#e0703f22;color:#e98a7a;text-decoration:line-through}.t-NOTE{background:#ffffff10;color:var(--dim)}
.bsec{margin-bottom:12px}.bsec summary{cursor:pointer;font:italic 19px var(--serif);color:var(--ink);padding:4px 0}.bitem{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--rule);font:14.5px/1.55 var(--serif)}.bitem .tag{flex:none;width:72px;text-align:center}
.brun{padding:14px 16px;margin:12px 0}.btext{font:15.5px/1.7 var(--serif);margin:8px 0}.btext p{cursor:copy}.btext p:hover{background:#d9a85b0d}.btext p.stolen{background:#9fd39a14}
.scrim{display:none}
@media (max-width:820px){
 .side{display:block;position:fixed;top:0;bottom:0;left:0;width:250px;z-index:45;background:var(--hdr2);transform:translateX(-105%);transition:transform .25s;box-shadow:10px 0 30px #000a}
 body.drawer .side{transform:none}body.drawer .scrim{display:block;position:fixed;inset:0;background:#0008;z-index:44}
 .page{padding:14px 18px 120px}.tools{gap:2px}
 #pop.open{left:0;right:0;bottom:0;width:auto;height:62%;border-radius:20px 20px 0 0;border-width:1px 0 0}
 #nudge{left:14px;right:84px;width:auto;bottom:18px}.bubble{right:14px;bottom:16px}
 .grab{display:block}.rpbox{width:min(320px,92vw)}.fbar{flex-wrap:wrap;max-width:92vw}
 textarea.draft{padding-left:10px;font-size:16px}
}
@media (min-width:821px){.pophead .grab{display:none}}
.page button,.page .tools,.page .xs,.page .dim.xs,.diff .xs,.brun .xs{font-family:var(--sans)}
@media (max-width:820px){#pop.open{padding-top:18px}.pophead .grab{position:absolute;top:6px;left:50%;transform:translateX(-50%);margin:0}}

/* ===== themes (per device) ===== */
:root{--bg:#1C1A18;--panel:#23201d;--panel2:#2a2622;--line:#3a342e;--line2:#54493d;--ink:#E8E2D6;--text:#D9D2C5;--text2:#CBC3B4;--dim:#A99D8A;--faint:#6f665a;--gold:#c4a06a;--g1:#d2b07c;--g2:#a8834a;--ember:#d77a52;--co:#9fcf98;
 --well:#171513;--well2:#1f1c19;--rule:#2e2a25;--hdr1:#211e1b;--hdr2:#1C1A18;--me:#3a3128;--glow1:#2a231c;--glow2:#231e22;--glow3:#24201b;--side:#1a181680;--hover:#ffffff0a;--fs:17px;--mw:740px}
body.paper{--bg:#F4EEE1;--panel:#EDE5D5;--panel2:#E8DFCC;--line:#D6CAB3;--line2:#BFAE90;--ink:#2F241A;--text:#3B2E22;--text2:#4A3B2C;--dim:#76664F;--faint:#A8987E;--gold:#8E6A33;--g1:#C9A46A;--g2:#A9844A;--ember:#B5552F;--co:#3F7A3A;
 --well:#FBF7EE;--well2:#F7F1E5;--rule:#E0D5C1;--hdr1:#F1E9DA;--hdr2:#ECE3D2;--me:#E6D9C1;--glow1:#F9F3E6;--glow2:#F1EADB;--glow3:#F7F0E2;--side:#EFE7D8;--hover:#0000000a;--inner:#6d5a3c}
body.paper:after{opacity:.025}
body.paper .card,body.paper #pop.open,body.paper .bubble{box-shadow:0 6px 20px #6b553522}
body.paper .msg.ai{background:var(--well)}body.paper .dl .s{filter:brightness(.62) saturate(1.3)}body.paper .dl{--c2:1}
body.paper .tabs button.on,body.paper .mini .n span,body.paper .who{filter:brightness(.7) saturate(1.3)}
body{background:radial-gradient(1200px 600px at 50% -10%,var(--glow1) 0%,transparent 60%),radial-gradient(800px 500px at 100% 110%,var(--glow2) 0,transparent 60%),var(--bg)}
.page .inner{max-width:var(--mw)}.page p,.page .btext{font-size:var(--fs)}
/* write view: mirrored highlight overlay behind a real textarea (IME/undo/dictation untouched) */
.edwrap{position:relative;display:grid}
.edwrap>textarea.draft,.edwrap>.mirror{grid-area:1/1;font:var(--fs)/1.75 var(--serif);padding:4px 0 4px 18px;margin:0;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;letter-spacing:normal;border-left:1px dashed var(--rule)}
.edwrap>textarea.draft{background:transparent;position:relative;z-index:1;overflow:hidden;resize:none;min-height:55vh;caret-color:var(--gold);color:var(--text)}
.mirror{color:transparent;pointer-events:none;user-select:none;border-left-color:transparent!important}
.mirror .h{border-radius:3px;background:color-mix(in srgb,var(--c) 13%,transparent);box-shadow:-14px 0 0 -11px var(--c)}
.mirror .h.inner{background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--c) 14%,transparent) 0 6px,transparent 6px 9px)}
.mirror .h.unk{background:color-mix(in srgb,var(--dim) 9%,transparent)}
.wlegend{display:flex;gap:10px;flex-wrap:wrap;font:11px var(--sans);color:var(--dim);margin:4px 0 8px}.wlegend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.dl.unk .s{color:var(--dim)}
@media (max-width:820px){
 .tools{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap;margin-left:-18px;margin-right:-18px;padding:0 18px 10px}.tools::-webkit-scrollbar{display:none}.tools .sp{display:none}
 .page{padding-bottom:160px}body.typing .bubble{display:none}body.typing #nudge{right:14px}
 .edwrap>textarea.draft,.edwrap>.mirror{padding-left:10px}
}
/* formatting marks in the mirror: keep glyph widths identical */
.mirror .mk{font:inherit;text-decoration:none}
.mirror b.mk{background:color-mix(in srgb,var(--gold) 16%,transparent)}.mirror i.mk{border-bottom:1px dotted var(--gold)}.mirror u.mk{border-bottom:1.5px solid var(--dim)}.mirror s.mk{background:linear-gradient(transparent 46%,var(--ember) 46%,var(--ember) 56%,transparent 56%);opacity:.6}
.fmt{display:inline-flex;gap:0;border-left:1px solid var(--rule);border-right:1px solid var(--rule);padding:0 4px;margin:0 2px}.fmt[hidden]{display:none}
.fmt .icon{font-family:var(--serif);min-width:26px}
.fbar{display:flex;gap:2px;align-items:center;padding:4px 6px;border-radius:10px}.fbar .icon{font-family:var(--serif);min-width:26px}
/* avatars & photos */
.avi{border-radius:50%;object-fit:cover;vertical-align:middle;flex:none;display:inline-grid;place-items:center;color:#1b120a;font-family:var(--serif);font-weight:600;box-shadow:0 0 0 1.5px var(--line2)}
.avb{background:none;border:0;padding:0;display:inline-flex}
.tabs button .avi{margin-right:3px}
.castrow{display:flex;gap:14px;align-items:flex-start;margin:8px 0 12px;flex-wrap:wrap}
.photo{width:132px;height:132px;border-radius:14px;overflow:hidden;border:1.5px dashed var(--line2);display:grid;place-items:center;text-align:center;font-size:12px;color:var(--dim);cursor:pointer;flex:none}
.photo img{width:100%;height:100%;object-fit:cover}
.moodb{flex:1;min-width:180px}.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:4px}
.mslot{aspect-ratio:1;border-radius:8px;border:1px dashed var(--line2);display:grid;place-items:center;position:relative;overflow:hidden}.mslot img{width:100%;height:100%;object-fit:cover}.mslot .x{position:absolute;top:2px;right:2px;background:#0008;color:#fff;font-size:10px;padding:1px 4px}
[data-drop].over{outline:2px solid var(--gold);outline-offset:2px}
.dlg{width:min(640px,100%)}
.linger{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px;padding:10px;border:1px dashed var(--line2);border-radius:12px;font-family:var(--sans)}.linger .xs{width:100%}
.lchip{font:13.5px/1.4 var(--serif);color:var(--text);text-align:left;white-space:normal;max-width:100%}
.seed{display:flex;gap:4px;align-items:flex-start;margin:3px 0}.seed a{white-space:normal!important;flex:1;font-size:12px!important;padding:4px 6px!important;border-left:2px solid var(--co);border-radius:0 6px 6px 0!important}.seed a span{font-family:var(--serif);color:var(--faint)}.seed.paid a{border-left-color:var(--faint);opacity:.6}
.heat{position:absolute;left:14px;top:150px;bottom:60px;width:12px;display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--sans)}
.heatbar{position:relative;flex:1;width:4px;border-radius:2px;background:var(--rule)}.heatbar i{position:absolute;left:-2px;right:-2px;min-height:4px;border-radius:2px;background:var(--inner);opacity:.85}
.heatn{font-size:10px;color:var(--faint)}
.diary{padding:8px 10px;border-left:2px solid var(--line2);margin-bottom:8px;font-family:var(--serif)}.diary.quiet{opacity:.6}.diary p{margin-top:2px}
#trbar{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:35;display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:14px;width:min(560px,calc(100vw - 110px))}#trbar select{background:var(--well);border:1px solid var(--line);border-radius:6px;font-size:12px;padding:2px}
.page p.speaking{background:color-mix(in srgb,var(--gold) 12%,transparent);border-radius:4px;box-shadow:-10px 0 0 color-mix(in srgb,var(--gold) 12%,transparent)}
@media (max-width:820px){.heat{left:3px;width:8px}#trbar{left:8px;right:76px;transform:none;width:auto;bottom:16px}}
.nudge p{font-size:13px!important;line-height:1.45}.lchip{font-family:var(--serif)!important}
#trbar .xs{white-space:nowrap}@media (max-width:820px){#trbar .xs{display:none}#trbar{bottom:84px;right:14px}}