:root{--bg:#ffeaf2;--panel:#fff;--bgs:#fff4f8;--ink:#4a3548;--mute:#8e7384;--line:#f6d3e1;--acc:#ec7fa3;--ok:#8fd3b6;--flag:#ffd98a;--hl1:#fff0a8;--hl2:#bff0cf;color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
:root[data-theme="dark"]{--bg:#2e2236;--panel:#3a2c45;--bgs:#46364f;--ink:#f6e9f3;--mute:#c4aabd;--line:#573f60;--acc:#f3a3c0;--ok:#6cc3a0;--flag:#f5cf7a;--hl1:#c9b44a;--hl2:#5fb98a;color-scheme:dark}
html,body{height:100%;margin:0}
body{background-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg opacity='.75'%3E%3Cpath fill='%23ffc9dc' d='M12 21s-8-5.5-8-11a4.5 4.5 0 0 1 8-2.5A4.5 4.5 0 0 1 20 10c0 5.5-8 11-8 11z' transform='translate(14 18)'/%3E%3Cpath fill='%23ffe6a8' d='M12 2l2.6 6.6 7 .5-5.4 4.5 1.7 6.9L12 17l-5.9 3.5 1.7-6.9L2.4 9.1l7-.5z' transform='translate(96 22) scale(.8)'/%3E%3Cpath fill='%23ffd6e6' d='M12 21s-8-5.5-8-11a4.5 4.5 0 0 1 8-2.5A4.5 4.5 0 0 1 20 10c0 5.5-8 11-8 11z' transform='translate(100 92) scale(.7)'/%3E%3Cpath fill='%23fff' d='M12 2l2.6 6.6 7 .5-5.4 4.5 1.7 6.9L12 17l-5.9 3.5 1.7-6.9L2.4 9.1l7-.5z' transform='translate(30 98) scale(.7)'/%3E%3Ccircle cx='70' cy='60' r='3' fill='%23fff'/%3E%3Ccircle cx='140' cy='140' r='3' fill='%23ffc9dc'/%3E%3Ccircle cx='10' cy='140' r='2.5' fill='%23ffe6a8'/%3E%3C/g%3E%3C/svg%3E");color:var(--ink);font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:15px}
:root[data-theme="dark"] body{background-image:none}
#app{height:100%;display:flex;flex-direction:column}
header{background:var(--panel);border-bottom:3px solid #ffbcd3}
.pane{background:var(--panel);overflow:auto}
.btn{padding:.4rem .85rem;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);font-weight:500;cursor:pointer;transition:border-color .15s}
.btn:hover{border-color:var(--ink)}
.pri{background:var(--acc);color:#3b2a38;border-color:var(--acc)}
.doc{font-family:'Newsreader',Georgia,serif;font-size:1.13rem;line-height:1.8;max-width:68ch;margin:0 auto;padding:2rem 2.2rem}
.doc h2{font-size:1.6rem;font-weight:600;margin:0 0 1rem}
.doc p{margin:0 0 1rem}
mark.y{background:var(--hl1);color:#111}
mark.g{background:var(--hl2);color:#111}
mark.nt{background:#bfdcff;color:#111;border-bottom:2px dotted #2563eb;cursor:pointer}
#tb{position:fixed;display:none;gap:4px;padding:5px;background:#6b4a5e;border-radius:8px;z-index:40;box-shadow:0 6px 20px rgba(0,0,0,.35)}
#tb button{color:#fff;font-size:12px;padding:4px 8px;border-radius:5px;display:flex;align-items:center;gap:5px;cursor:pointer}
#tb button:hover{background:#38475a}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block}
#np{position:fixed;display:none;width:270px;z-index:45;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
#np textarea,.f input,.f select,.f textarea,.ti{width:100%;border:1px solid var(--line);background:var(--bgs);color:var(--ink);border-radius:12px;padding:.45rem .6rem;font:inherit}
.f{display:flex;flex-direction:column;gap:4px;font-weight:500;font-size:13px;color:var(--mute)}
.f textarea{font-family:ui-monospace,Menlo,monospace;font-size:12.5px}
.ti:focus,.f input:focus,.f textarea:focus,#np textarea:focus{outline:2px solid var(--acc);outline-offset:-1px}
.navp{padding:.8rem 1rem;border-bottom:1px solid var(--line);background:var(--panel)}
.nb{width:2.15rem;height:2.15rem;border-radius:6px;border:1px solid var(--line);background:var(--bgs);color:var(--ink);font-weight:600;cursor:pointer}
.nb.ok{background:var(--ok);border-color:var(--ok);color:#14402c}
.nb.fl{background:var(--flag);border-color:var(--flag);color:#4a3500}
.nb.ok.fl{box-shadow:inset 0 -5px 0 var(--ok)}
.nb.cu{outline:2px solid var(--ink);outline-offset:2px}

.q{padding:1rem;border:1px solid var(--line);border-radius:16px;background:var(--panel);margin-bottom:.8rem}
.q.cur{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.num{flex:none;width:1.9rem;height:1.9rem;border-radius:50%;background:#f08fb0;color:#fff;display:grid;place-items:center;font-weight:600;font-size:13px}
.hd{white-space:pre-line;background:var(--bgs);border-left:4px solid var(--acc);padding:.7rem .9rem;margin:1rem 0 .8rem;border-radius:4px;font-size:14px}
.qimg{display:block;max-width:100%;border-radius:12px;margin:0 0 .8rem;border:1px solid var(--line)}
.op{display:flex;gap:.6rem;align-items:center;padding:.45rem .6rem;border:1px solid var(--line);border-radius:12px;margin-bottom:.35rem;cursor:pointer}
.op:hover{background:var(--bgs)}
.op:has(input:checked){border-color:var(--acc);background:var(--bgs)}
.fb{flex:none;align-self:flex-start;font-size:18px;color:var(--mute);cursor:pointer;padding:0 .3rem}
.fb.on{color:var(--flag)}
#dlg{position:fixed;inset:0;background:rgba(255,170,200,.4);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:60;padding:1rem}
.box{background:var(--panel);width:100%;max-width:52rem;max-height:92vh;overflow:auto;border-radius:16px;padding:1.5rem;border:2px solid #ffd3e2;box-shadow:0 12px 40px rgba(236,127,163,.28)}
.rv{margin-top:.8rem;padding-top:.6rem;border-top:1px dashed var(--line);font-size:14px}
.rex{display:none;margin-top:.5rem;padding:.6rem .8rem;background:var(--bgs);border-radius:6px}
.rex.open,.show-rex .rex{display:block}
.hide-rans .rans{display:none}
.q.rok{border-color:var(--ok)}
.q.rbad{border-color:var(--acc)}
.ex{display:none}
.ex.open,.showex .ex{display:table-row}
.hide-ans .ca{visibility:hidden}
table{width:100%;border-collapse:collapse;font-size:14px}
td,th{padding:.4rem .6rem;border-bottom:1px solid var(--line);text-align:left}
.chip{display:inline-block;padding:.25rem .8rem;border-radius:99px;font-weight:600;font-size:14px}
.card2{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem}
.leg{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--mute)}
.leg i{width:12px;height:12px;border-radius:3px;display:inline-block;border:1px solid var(--line)}
.lsec{border-radius:18px;padding:1rem 1.1rem 1.2rem;margin-bottom:1rem;background:rgba(255,150,185,.16);border:1px solid var(--line)}
.lsec[data-t=listening]{background:rgba(130,195,240,.2)}
.lsec h3{font-size:1.05rem;font-weight:600;margin:0 0 .8rem;display:flex;align-items:center;gap:.6rem}
.lsec h3 span{font-size:12px;font-weight:500;color:var(--mute)}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:.8rem}

.tile{aspect-ratio:1/1;border:0;border-radius:16px;padding:.9rem;text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:.35rem;overflow:hidden;cursor:pointer;transition:transform .15s,box-shadow .15s;font:inherit}
.tile:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.14)}
.tile svg{flex:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.08))}
.tile b{font-size:.95rem;line-height:1.3;font-weight:600;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tile small{display:block;opacity:.8;margin-bottom:.35rem}
.tile em{display:inline-block;font-style:normal;font-size:12px;background:rgba(255,255,255,.7);padding:.1rem .55rem;border-radius:99px}
.lempty{color:var(--mute);font-size:14px;margin:0}
.mascot{flex:none;animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px)}}