:root{
  --bg:#E8EDF5; --paper:#F7F9FC; --ink:#1C2742; --muted:#5A6683;
  --cue:#17705C; --cue-bg:rgba(23,112,92,.10); --lamp:#C4860F; --lamp-bg:#F8ECCF; --line:#D0D8E6;
  --serif:"Literata", Georgia, "Times New Roman", serif;
  --round:"Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#10162A; --paper:#172037; --ink:#E3E7F2; --muted:#98A3C1;
    --cue:#7CD6BF; --cue-bg:rgba(124,214,191,.12); --lamp:#F2C45A; --lamp-bg:rgba(242,196,90,.15); --line:#28324F;
  }
}
:root[data-theme="dark"]{
  --bg:#10162A; --paper:#172037; --ink:#E3E7F2; --muted:#98A3C1;
  --cue:#7CD6BF; --cue-bg:rgba(124,214,191,.12); --lamp:#F2C45A; --lamp-bg:rgba(242,196,90,.15); --line:#28324F;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--round); line-height:1.5}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:3px solid var(--lamp); outline-offset:2px; border-radius:.3em}

main{max-width:40rem; margin:0 auto; padding:1.5rem 1.25rem 3rem}

/* setup */
h1{font-family:var(--round); font-weight:700; font-size:clamp(2.3rem,8vw,3.5rem); line-height:1.02; margin:1.5rem 0 1rem; letter-spacing:-.01em}
.demo{font-family:var(--serif); font-size:1.3rem; line-height:1.75; margin:0 0 .4rem}
.demo-hint{color:var(--muted); font-size:.95rem; margin:0 0 2rem}
label.big{display:block; font-weight:700; font-size:1.1rem; margin-bottom:.4rem}
textarea{width:100%; min-height:14rem; resize:vertical; font-family:var(--serif); font-size:1.05rem; line-height:1.6;
  color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:1rem; padding:1rem}
textarea:focus{outline:none; border-color:var(--cue)}
.row{display:flex; flex-wrap:wrap; gap:.25rem 1.25rem; margin:.5rem 0 1.5rem}
.link{background:none; border:0; padding:.25rem 0; color:var(--cue); font-weight:500; text-decoration:underline; text-underline-offset:.2em}
.primary{display:inline-flex; align-items:center; gap:.5rem; background:var(--ink); color:var(--paper); border:0; border-radius:999px;
  padding:.8rem 1.6rem; font-weight:700; font-size:1.1rem}
.primary:disabled{opacity:.5; cursor:default}
.note{color:var(--muted); font-size:.95rem; margin:.8rem 0 0}

/* bar */
.bar{position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:var(--bg); border-bottom:1px solid var(--line)}
.bar-in{max-width:40rem; margin:0 auto; display:flex; align-items:center; gap:.4rem; padding:.5rem .9rem}
.tbtn{background:none; border:0; padding:.4rem .6rem; border-radius:.6rem; font-weight:500; font-size:1rem}
.tbtn:hover{background:var(--lamp-bg)}
.tbtn.on{background:var(--ink); color:var(--paper)}
.spacer{flex:1}
.chip{display:inline-flex; align-items:center; gap:.4rem; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:.3rem .8rem .3rem .6rem; font-size:.95rem; max-width:52vw; white-space:nowrap; overflow:hidden}
.chip.live{background:var(--lamp-bg); border-color:transparent}
.chip.live #ambIcon{animation:breathe 3s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.15)}}
.chip small{color:var(--muted); font-size:.8rem}

/* reader */
.tip{background:var(--paper); border:1px solid var(--line); border-radius:1rem; padding:1rem 1.1rem; margin:0 0 2rem; font-size:1rem}
.tip p{margin:0 0 .5rem}
.tip .warn{color:var(--muted)}
.tip[hidden]{display:none}
#editHint{background:var(--lamp-bg); border-radius:1rem; padding:.8rem 1rem; margin:0 0 1.5rem}
#storyOut{font-family:var(--serif); font-size:1.3rem; line-height:1.8}
.para{position:relative; margin:0 0 1.3em; padding-left:.9rem; margin-left:-1rem; border-left:3px solid transparent; transition:border-color .5s}
.para.active{border-left-color:var(--lamp)}
.para p{margin:0}
.amb-pill{display:inline-flex; align-items:center; gap:.35rem; font-family:var(--round); font-size:.9rem; line-height:1.2;
  background:var(--lamp-bg); color:var(--ink); border:1px solid transparent; border-radius:999px; padding:.25rem .75rem; margin:0 0 .4rem}
.amb-pill.empty{background:transparent; border:1px dashed var(--line); color:var(--muted)}
.amb-pill .t{color:var(--muted)}
.cue{color:var(--cue); background:var(--cue-bg); border-radius:.4em; padding:.02em .22em; margin:0 -.04em; cursor:pointer;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  text-decoration:underline wavy var(--cue); text-decoration-thickness:1.5px; text-underline-offset:.28em; -webkit-tap-highlight-color:transparent}
.cue .g{display:inline-block; font-size:.68em; margin-left:.2em; vertical-align:.15em; text-decoration:none}
.cue.ring{animation:ring .9s ease-out}
@keyframes ring{0%{box-shadow:0 0 0 0 var(--cue); background:var(--lamp-bg)}100%{box-shadow:0 0 0 .7em transparent}}
.editing .w{cursor:pointer; border-radius:.2em}
.editing .w:hover,.editing .w:focus{background:var(--lamp-bg)}
.end{font-family:var(--round); color:var(--muted); padding-bottom:45vh}

/* sheet */
#scrim{position:fixed; inset:0; background:rgba(8,12,26,.45); z-index:10}
.sheet{position:fixed; left:0; right:0; bottom:0; z-index:11; max-width:40rem; margin:0 auto; max-height:78vh; overflow:auto;
  background:var(--paper); border-radius:1.3rem 1.3rem 0 0; padding:1.1rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom,0px));
  box-shadow:0 -10px 40px rgba(8,12,26,.25)}
.sheet[hidden],#scrim[hidden]{display:none}
.sheet-head{display:flex; align-items:center; gap:.5rem; margin-bottom:.8rem}
.sheet-head h2{font-size:1.2rem; margin:0; flex:1; line-height:1.25}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(8.6rem,1fr)); gap:.5rem}
.opt{display:flex; align-items:center; gap:.5rem; text-align:left; padding:.55rem .7rem; border:1.5px solid var(--line); border-radius:.9rem; background:var(--bg); font-size:.95rem; line-height:1.2}
.opt .oi{font-size:1.25rem}
.opt.on{border-color:var(--cue)}
.danger{margin-top:1rem; background:none; border:1.5px solid var(--line); border-radius:999px; padding:.55rem 1.2rem; color:#B3261E}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .danger{color:#FF8A80} }
:root[data-theme="dark"] .danger{color:#FF8A80}
.set{display:grid; gap:1.1rem}
.set label{display:grid; gap:.3rem; font-weight:500}
.set input[type=range]{width:100%; accent-color:var(--cue)}
.set .chk{display:flex; gap:.6rem; align-items:flex-start; font-weight:400}
.set .chk input{width:1.2rem; height:1.2rem; accent-color:var(--cue); margin-top:.15rem; flex:none}
.sizes{display:flex; gap:.5rem}
.sizes button{border:1.5px solid var(--line); background:var(--bg); border-radius:.7rem; padding:.3rem .9rem; font-family:var(--serif)}
.small{color:var(--muted); font-size:.88rem; margin:0}

.live-card{background:var(--paper); border:1px solid var(--line); border-radius:1.2rem; padding:1.2rem 1.2rem 1.3rem; margin:0 0 2.5rem}
.live-card h2,h2.sub{font-size:1.4rem; margin:0 0 .4rem; line-height:1.2}
.live-card p{margin:0 0 1rem}
h2.sub{margin-bottom:.8rem}
.mic{display:flex; align-items:center; justify-content:center; gap:.8rem; width:100%; padding:1.1rem; border-radius:1.2rem; border:1.5px solid transparent; background:var(--ink); color:var(--paper); font-weight:700; font-size:1.15rem}
.mic .dot{width:.9rem; height:.9rem; border-radius:50%; background:#E5484D; animation:pulse 1.6s infinite; flex:none}
.mic.off{background:var(--paper); color:var(--ink); border-color:var(--line)}
.mic.off .dot{background:var(--muted); animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}100%{box-shadow:0 0 0 .9rem rgba(229,72,77,0)}}
.heard{font-family:var(--serif); font-size:1.2rem; line-height:1.75; min-height:8rem; margin:1.2rem 0; padding:1rem 1.1rem; background:var(--paper); border:1px solid var(--line); border-radius:1rem}
.heard[hidden]{display:none}
.heard .int{color:var(--muted)}
.heard .ph{color:var(--muted); font-family:var(--round); font-size:1rem; margin:0}
.log{list-style:none; padding:0; margin:0; display:grid; gap:.4rem}
.log li{display:flex; gap:.6rem; align-items:baseline}
.log .lw{color:var(--muted); font-size:.92rem}
h3{font-size:1.05rem; margin:1.6rem 0 .5rem}
details{margin-top:1.4rem}
details summary{cursor:pointer; color:var(--cue); font-weight:500}
details textarea{min-height:6rem; margin:.6rem 0 .3rem}
.sizes button.on{border-color:var(--cue); background:var(--cue-bg)}
@media (prefers-reduced-motion: reduce){
  .mic .dot{animation:none}

  .cue.ring{animation:none; background:var(--lamp-bg)}
  .chip.live #ambIcon{animation:none}
}
@media (max-width:480px){ #storyOut{font-size:1.2rem} .chip{max-width:44vw} }
.update{position:sticky; top:0; z-index:20; background:var(--lamp-bg); text-align:center; padding:.6rem 1rem; font-size:.95rem}
.update[hidden]{display:none}
.own{list-style:none; padding:0; margin:0 0 .5rem; display:grid; gap:.2rem}
.own li{display:flex; align-items:center; gap:.5rem}
.own li .lw{color:var(--muted); flex:1}
.own-add{display:flex; gap:.4rem; flex-wrap:wrap}
.own-add input,.own-add select{font:inherit; color:var(--ink); background:var(--bg); border:1.5px solid var(--line); border-radius:.7rem; padding:.35rem .6rem; min-width:0}
.own-add input{flex:1 1 7rem}
.own-add select{flex:1 1 9rem}
.snd{list-style:none; padding:0; margin:0; display:grid; gap:.15rem}
.snd li{display:flex; align-items:center; gap:.25rem; padding:.2rem 0; border-bottom:1px solid var(--line)}
.snd .oi{font-size:1.25rem; width:1.8rem; text-align:center; flex:none}
.snd .nm{flex:1; display:grid; line-height:1.2; min-width:0}
.snd .nm small{color:var(--muted); font-size:.8rem}
.snd .tbtn{padding:.35rem .45rem; flex:none}
.snd .tbtn[hidden]{display:none}
.snd label.file{cursor:pointer}
#credits a{color:var(--cue)}