:root{--bg:#f6f4ef;--card:#fff;--ink:#1d1d1b;--muted:#6b6b66;--line:#e3e0d8;--accent:#b23a3a;--ok:#2f7d4f;--soft:#f0ede5;
    --host:#c2410c;--host-bg:#fff1e6;--you:#0f766e;--you-bg:#e6f6f3;--yes:#15803d;--yes-bg:#e8f5ec;--no:#b91c1c;--no-bg:#fdecec;
    --ask:#1d4ed8;--ask-bg:#e8eefc;--other:#6b7280;--other-bg:#eef0f3;--scene:#7e22ce;--scene-bg:#f3e8fb;--own:#a16207;--own-bg:#fdf6e3;--pat:#b45309;--pat-bg:#fdf1dc}
  @media (prefers-color-scheme:dark){:root{--bg:#161614;--card:#222220;--ink:#eeece6;--muted:#9a9891;--line:#33332f;--accent:#e06a6a;--ok:#5fbf85;--soft:#2a2a27;
    --host:#fb923c;--host-bg:#33241a;--you:#5eead4;--you-bg:#15302c;--yes:#4ade80;--yes-bg:#17301f;--no:#f87171;--no-bg:#3a1d1d;
    --ask:#93c5fd;--ask-bg:#1c2740;--other:#9ca3af;--other-bg:#2a2d33;--scene:#d8b4fe;--scene-bg:#2c1f3a;--own:#fcd34d;--own-bg:#33290f;--pat:#fbbf24;--pat-bg:#332810}}
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 -apple-system,"Hiragino Sans","Noto Sans JP",Segoe UI,sans-serif}
  header{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:2}
  header .logo{font-size:26px;line-height:1;align-self:center;padding:0 4px}
  header button{flex:1;padding:10px 4px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;font-size:14px;white-space:nowrap}
  header button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  main{max-width:640px;margin:0 auto;padding:16px 16px 80px}
  .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
  .phrase{font-size:34px;line-height:1.3;font-weight:600;margin:0}
  .kana{color:var(--muted);font-size:18px;margin-top:6px}
  .romaji{color:var(--muted);font-style:italic}
  .meaning{font-size:22px;margin:14px 0 4px;font-weight:600}
  .literal{color:var(--muted);font-size:14px}
  h4{margin:18px 0 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .tokens{display:flex;flex-wrap:wrap;gap:6px}
  .tok{background:var(--soft);border-radius:8px;padding:6px 10px;font-size:14px;line-height:1.25}
  .tok b{display:block;font-size:18px;font-weight:600}
  .tok small{color:var(--muted)}
  .gram{margin:8px 0;padding:10px 12px;border-left:3px solid var(--accent);background:var(--soft);border-radius:0 8px 8px 0;font-size:15px}
  .gram b{display:block;font-size:17px;margin-bottom:2px}
  .ex{margin:6px 0;font-size:15px}.ex b{font-size:18px;font-weight:600}.ex > span{color:var(--muted);display:block;font-size:14px}
  .row{display:flex;gap:10px;margin-top:16px}
  .row button{flex:1;padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:16px}
  .row .again{border-color:var(--accent);color:var(--accent)}.row .ok{border-color:var(--ok);color:var(--ok)}
  .row .flip{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .tiny{font-size:13px;color:var(--muted)}
  .rel{display:flex;gap:8px;align-items:baseline;padding:8px 10px;margin:6px 0;border-radius:8px;background:var(--soft);cursor:pointer}
  .rel b{font-size:17px;font-weight:600}.rel > span{color:var(--muted);font-size:13px;flex:1}
  .thread{font-size:13px;color:var(--accent)}
  .sec{border-radius:14px;padding:12px 14px;margin:12px 0;border:1px solid var(--line)}
  .sec h4{margin:0 0 8px;display:flex;align-items:center;gap:8px}
  .sec.host{background:var(--host-bg);border-color:transparent}.sec.host h4{color:var(--host)}
  .sec.you{background:var(--you-bg);border-color:transparent}.sec.you h4{color:var(--you)}
  .sec.own{background:var(--own-bg);border-color:transparent}.sec.own h4{color:var(--own)}
  .sec.scene{background:var(--scene-bg);border-color:transparent}.sec.scene h4{color:var(--scene)}
  .sec.fromcard{background:var(--ask-bg);border-color:transparent}.sec.fromcard h4{color:var(--ask)}
  .sec.pat{background:var(--pat-bg);border-color:transparent}.sec.pat h4{color:var(--pat)}
  .sec.keep{background:var(--yes-bg);border-color:transparent}.sec.keep h4{color:var(--yes)}
  .tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px;color:#fff}
  .tag.host{background:var(--host)}.tag.you{background:var(--you)}.tag.yes{background:var(--yes)}.tag.no{background:var(--no)}.tag.ask{background:var(--ask)}.tag.other{background:var(--other)}
  .msg-row{display:flex;gap:8px;align-items:flex-end;margin:10px 0}
  .msg-row.you{flex-direction:row-reverse}
  .avatar{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;background:var(--host-bg);border:2px solid var(--host)}
  .msg-row.you .avatar{background:var(--you-bg);border-color:var(--you)}
  .bub{max-width:80%;padding:10px 14px;border-radius:18px 18px 18px 4px;background:var(--host-bg);border:none}
  .bub.you{border-radius:18px 18px 4px 18px;background:var(--you-bg)}
  .bub.pic{padding:0;overflow:hidden;max-width:80%;background:transparent}
  .bub.pic img{display:block;width:100%;border-radius:18px}
  .typing{display:inline-flex;gap:4px;padding:12px 16px;border-radius:18px 18px 18px 4px;background:var(--host-bg)}
  .typing i{width:7px;height:7px;border-radius:50%;background:var(--host);opacity:.4;animation:blink 1.2s infinite}
  .typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
  @keyframes blink{50%{opacity:1}}
  .chat{padding:6px 2px 4px}
  .composer{position:sticky;bottom:0;background:var(--bg);padding:10px 0 12px;margin-top:8px;border-top:1px solid var(--line)}
  .composer .row{margin:0}
  .composer input{padding:12px 14px;border-radius:999px}
  .composer .btn{border-radius:999px}
  .quick{display:flex;flex-direction:column;gap:6px;margin:6px 0 10px}
  .quick .choice{margin:0;border-radius:18px}
  .banner{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;display:block;margin:6px 0 10px;background:var(--soft)}
  .avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
  .people{display:flex;flex-wrap:wrap;gap:8px}
  .pchip{display:flex;flex-direction:column;align-items:center;gap:4px;width:72px;padding:6px 4px;border-radius:12px;border:2px solid transparent;background:var(--card);font-size:12px;color:var(--ink);position:relative}
  .pchip img,.pchip .ph{width:52px;height:52px;border-radius:50%;object-fit:cover;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:26px}
  .pchip.on{border-color:var(--you)}.pchip.onhost{border-color:var(--host)}
  .pchip .x{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;border:none;background:var(--no);color:#fff;font-size:12px;line-height:20px;padding:0}
  .chips{display:flex;flex-wrap:wrap;gap:6px}
  .chip{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:14px}
  .chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .sec input,.sec textarea{margin-top:8px;font-size:16px}
  .sec input[type=checkbox],.sec input[type=file]{width:auto;margin:0 6px 0 0;display:inline}
  .scenebtn.on{border-color:var(--scene);background:var(--scene-bg);box-shadow:inset 0 0 0 1px var(--scene)}
  .sec.fromcard .scenebtn.on{border-color:var(--ask);background:var(--ask-bg);box-shadow:inset 0 0 0 1px var(--ask)}
  .go{position:sticky;bottom:0;padding:10px 0 14px;background:linear-gradient(transparent,var(--bg) 30%)}
  .go button{width:100%;padding:16px;border-radius:16px;border:none;background:var(--scene);color:#fff;font-size:19px;font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.18)}
  .go .tiny{display:block;text-align:center;margin-top:6px}
  .nudge{background:var(--pat-bg);color:var(--pat);border-radius:12px;padding:8px 12px;font-size:14px;margin:6px 0;animation:pop .3s}
  @keyframes pop{from{transform:scale(.96);opacity:0}}
  .counter{font-size:12px;color:var(--you);font-weight:600}
  .k{cursor:pointer;border-bottom:2px dotted var(--ask);border-radius:2px}
  .att{text-align:center}
  .att .q{font-size:46px;font-weight:600;line-height:1.2;margin:18px 0 6px;min-height:60px}
  .att .q.small{font-size:26px}
  .att .sub{color:var(--muted);font-size:14px;min-height:20px}
  .timer{height:8px;background:var(--soft);border-radius:4px;overflow:hidden;margin:10px 0}
  .timer i{display:block;height:100%;background:var(--you);transition:width .1s linear}
  .opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
  .opts button{padding:16px 10px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:17px;min-height:64px}
  .opts button.right{background:var(--yes-bg);border-color:var(--yes);color:var(--yes);font-weight:600}
  .opts button.wrong{background:var(--no-bg);border-color:var(--no);color:var(--no)}
  .opts button:disabled{opacity:.9}
  .hud{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}
  .hud b{color:var(--ink);font-size:16px}
  .stk{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line)}
  .stk b{font-size:20px;font-weight:600}.stk > span{flex:1;color:var(--muted);font-size:13px}
  .stk .x{border:none;background:var(--soft);border-radius:999px;width:28px;height:28px;color:var(--muted)}
  .big{font-size:40px;font-weight:700;margin:6px 0}
  .map{position:relative;width:100%;border-radius:14px;overflow:hidden;background:var(--soft)}
  .map img.base{display:block;width:100%}
  .pin{position:absolute;transform:translate(-50%,-100%);width:44px;height:44px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35);overflow:hidden;cursor:pointer;background:var(--card)}
  .pin img{width:100%;height:100%;object-fit:cover}
  .pin.place{width:30px;height:30px;background:var(--scene);display:flex;align-items:center;justify-content:center;font-size:15px;transform:translate(-50%,-50%)}
  .pin.on{outline:3px solid var(--host)}
  .pin.met{border-color:var(--ok)}
  .world{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
  .world:first-of-type{border-top:none}
  .world .em{font-size:30px;line-height:1;flex:0 0 auto}
  .world b{font-size:17px}
  .world.locked{opacity:.85}
  .req{margin-top:6px}
  .req div{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin:3px 0}
  .req i{flex:1;height:6px;background:var(--line);border-radius:3px;overflow:hidden;display:block}
  .req i b{display:block;height:100%;background:var(--you);border-radius:3px;font-size:0}
  .req .done{color:var(--yes)}
  .ticket{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--yes-bg);color:var(--yes);font-size:12px;font-weight:600}
  .chap{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line)}
  .chap:first-of-type{border-top:none}
  .chap .n{flex:0 0 26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;background:var(--line);color:var(--muted)}
  .chap.done .n{background:var(--yes);color:#fff}.chap.now .n{background:var(--host);color:#fff}
  .chap.locked{opacity:.55}
  .chap b{font-size:15px}.chap .tiny{display:block}
  .tour{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:30;display:flex;align-items:center;justify-content:center;padding:20px}
  .tour>div{background:var(--bg);color:var(--ink);border-radius:20px;padding:24px 22px 18px;max-width:420px;width:100%;text-align:center}
  .tour .ico{font-size:56px;line-height:1;margin-bottom:10px}
  .tour h3{margin:0 0 8px;font-size:22px}
  .tour p{margin:0 0 14px;font-size:16px;line-height:1.5}
  .tour .dots{display:flex;justify-content:center;gap:6px;margin:6px 0 14px}
  .tour .dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}.tour .dots i.on{background:var(--ink)}
  .tour .row{margin:0}
  .k:active{background:var(--ask-bg)}
  .sheet{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:20;display:flex;align-items:flex-end;justify-content:center}
  .sheet>div{background:var(--bg);color:var(--ink);width:100%;max-width:640px;max-height:88vh;overflow:auto;border-radius:20px 20px 0 0;padding:16px 16px 28px}
  .kbig{font-size:64px;line-height:1;font-weight:600;margin-right:14px}
  .krow{display:flex;align-items:center;gap:8px;margin-bottom:8px}
  .kread b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .sec .btn{margin-top:10px}
  .bub b{font-size:21px;font-weight:600;display:block;line-height:1.35;margin-top:4px}
  .bub .rd{display:block;font-size:13px;color:var(--muted)}
  .bub .mn{display:block;font-size:15px;margin-top:2px}
  .bub .nt{display:block;font-size:12px;color:var(--muted);font-style:italic;margin-top:2px}
  .bub .speak{margin-top:6px}
  .legend{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
  .choice{display:block;width:100%;text-align:left;padding:10px 12px;margin:8px 0;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;border-left:5px solid var(--other)}
  .choice.yes{border-left-color:var(--yes)}.choice.no{border-left-color:var(--no)}.choice.ask{border-left-color:var(--ask)}.choice.bye{border-left-color:var(--scene)}.tag.bye{background:var(--scene)}
  .choice b{font-size:20px;font-weight:600;display:block;margin-top:4px}.choice small{color:var(--muted);font-size:13px;display:block}
  .choice:disabled{opacity:.5}
  .scenebtn{display:block;width:100%;text-align:left;padding:11px 14px;margin:6px 0;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:16px}
  .scenebtn .tiny{display:block}
  .recap{margin-top:14px}
  .mic{border:none;background:var(--soft);border-radius:999px;padding:6px 12px;color:var(--ink);font-size:14px;margin-top:8px;margin-left:6px}
  .mic.rec{background:var(--accent);color:#fff;animation:pulse 1s infinite}
  @keyframes pulse{50%{opacity:.6}}
  .coach{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--soft);font-size:14px}
  .coach b{font-size:15px}.coach .stars{color:var(--accent);letter-spacing:2px}
  .pic{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;display:block;margin:-6px 0 14px;background:var(--soft)}
  .speak{border:none;background:var(--soft);border-radius:999px;padding:6px 12px;color:var(--ink);font-size:14px;margin-top:8px}
  ul.list{list-style:none;padding:0;margin:0}
  ul.list li{padding:12px 4px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:baseline;cursor:pointer}
  ul.list li b{font-size:20px;font-weight:600}
  ul.list li > span{color:var(--muted);font-size:14px;flex:1}
  ul.list li i{font-size:12px;color:var(--muted);font-style:normal}
  textarea,input{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:18px}
  textarea{min-height:120px}
  .btn{padding:12px 18px;border-radius:10px;border:none;background:var(--ink);color:var(--bg);font-size:16px;margin-top:10px}
  .btn.sec{background:var(--soft);color:var(--ink)}
  .msg{margin-top:10px;font-size:14px;color:var(--muted);white-space:pre-wrap}
  .empty{text-align:center;color:var(--muted);padding:40px 0}
  .hidden{display:none}
  .bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
  a{color:var(--accent)}

/* furigana */
ruby{ruby-position:over;ruby-align:center;margin:0 .04em}
rt{font-size:.48em;color:var(--muted);opacity:.85;font-weight:400;letter-spacing:.02em;line-height:1;white-space:nowrap;text-align:center}
.phrase,.bub b,.choice b,.ex b,.stk b,.att .q,ul.list li b{line-height:1.75}
.nofuri rt{display:none}
  body.norj .bub .rd,body.norj .choice .rd{display:none}body.noen .bub .mn,body.noen .choice .mn{display:none}
  .bub.peek .rd,.bub.peek .mn,.choice.peek .rd,.choice.peek .mn{display:block!important}
  body:not(.norj) .peeklink{display:none}
  .kvg{margin:0 10px 0 0;flex:0 0 auto}.kvg path.sk{animation:draw .55s ease-out forwards;animation-delay:calc(var(--i)*.6s)}.kvg text.sn{opacity:0;animation:appear .2s forwards;animation-delay:calc(var(--i)*.6s + .3s)}
  @keyframes draw{to{stroke-dashoffset:0}}@keyframes appear{to{opacity:1}}
  .badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}.badges.mini{display:flex;gap:6px;font-size:22px;flex-wrap:wrap}
  .badge{text-align:center;padding:8px 4px;border:1px solid var(--line);border-radius:12px;background:var(--card)}.badge.locked{opacity:.4;filter:grayscale(1)}.badge .e{font-size:28px}.badge .bn{font-weight:600;font-size:13px}
  .choice.right{border-color:var(--ok);border-left-color:var(--ok);background:var(--keep-bg,var(--card))}.choice.wrong{border-color:var(--accent);border-left-color:var(--accent)}.choice.dim{opacity:.5}

  @media (max-width:430px){header button{padding:10px 2px;font-size:13px}header button#furi,header button#trans,header button#acct{padding:10px 5px}}

/* tips: explanatory lines that can be hidden; auto-hidden after the first finished story */
.notips .tip{display:none}

/* form selects match inputs */
.sec select,#talk select{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:16px;margin-top:6px}