*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,sans-serif;background:#0f172a;color:#e2e8f0;font-size:18px}
.nav{display:flex;gap:1rem;flex-wrap:wrap;padding:.8rem 1.2rem;background:#1e293b}
.nav a{color:#cbd5e1;text-decoration:none}.nav a:hover{color:#fff}
main{max-width:1100px;margin:0 auto;padding:1.2rem}
h1{margin:.2em 0}
.muted{color:#94a3b8}.small{font-size:.8rem}.center{text-align:center}.big{font-size:1.4rem}
.card{background:#1e293b;border-radius:14px;padding:1.2rem;margin:1rem 0}
.card.ok{border:2px solid #22c55e}.card.err{border:2px solid #ef4444}.err-text{color:#f87171}
label{display:block;margin:.8rem 0 .3rem;color:#cbd5e1}
input,textarea{width:100%;padding:.7rem;border-radius:8px;border:1px solid #475569;background:#0f172a;color:#fff;font:inherit;margin-top:.3rem}
.radio{display:flex;align-items:center;gap:.5rem;margin:.2rem 0}.radio input{width:auto;margin:0}
.story-in{border-left:4px solid #6366f1;padding-left:1rem;margin:1rem 0}
.btn{display:inline-block;background:#6366f1;color:#fff;border:0;border-radius:10px;padding:.8rem 1.4rem;font:inherit;cursor:pointer;text-decoration:none;margin-top:.8rem}
.btn:hover{background:#4f46e5}.btn.ghost{background:#334155}
.story{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;width:100%;text-align:left;background:#1e293b;color:#e2e8f0;border:3px solid #334155;border-radius:14px;padding:1rem;margin:.8rem 0;font:inherit;cursor:pointer}
.story.mine{border-color:#6366f1;background:#312e81}
.story.fake,.pstory.fake{border-color:#ef4444;background:#450a0a}
.story.fact,.pstory.fact{border-color:#22c55e}
.letter{background:#6366f1;border-radius:50%;width:2.4rem;height:2.4rem;display:grid;place-items:center;font-weight:bold;flex:none;position:relative;z-index:1}
.txt{flex:1;min-width:60%;position:relative;z-index:1}
.badge{font-weight:bold;position:relative;z-index:1}
.layout{display:grid;grid-template-columns:260px 1fr;gap:1.2rem}
@media(max-width:800px){.layout{grid-template-columns:1fr}}
.grp{display:flex;gap:.3rem;margin:.3rem 0}
.gname{flex:1;text-align:left;background:#334155;color:#fff;border:0;border-radius:8px;padding:.6rem;font:inherit;cursor:pointer}
.grp.on .gname{background:#6366f1}.x{background:none;border:0;color:#f87171;cursor:pointer}
.pstory{position:relative;overflow:hidden;display:flex;gap:1rem;align-items:center;border:3px solid #334155;border-radius:14px;padding:1.1rem;margin:.9rem 0;font-size:1.3rem;background:#1e293b}
.pstory .bar{position:absolute;inset:0 auto 0 0;background:#4338ca88;transition:width .6s}
.beamer-btn{margin:0 0 .5rem;padding:.4rem .9rem;font-size:.85rem}
body.beamer{font-size:26px}
body.beamer .nav,body.beamer #side{display:none}
body.beamer .layout{grid-template-columns:1fr}
body.beamer main{max-width:1600px}
body.beamer .beamer-btn{position:fixed;top:.5rem;right:.5rem;opacity:.25;z-index:5}
body.beamer .beamer-btn:hover{opacity:1}
body.beamer h1{font-size:2.6rem}
body.beamer .pstory{font-size:2rem;padding:1.6rem}
body.beamer .letter{width:3.6rem;height:3.6rem;font-size:2rem}
body.beamer .big{font-size:2.2rem}