:root{
  --bg:#12100e; --card:#1b1815; --line:#2e2823; --ink:#f0e9e1; --dim:#a2968a;
  --accent:#d9a441; --accent-ink:#241a08; --player:#20211f; --danger:#e2705f;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f7f4ef; --card:#fff; --line:#e6ded2; --ink:#241f1a; --dim:#77695c;
         --accent:#a86b12; --accent-ink:#fff; --player:#f0ece5; --danger:#b53f2e; }
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:16px/1.6 ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
     padding:32px 20px 96px;-webkit-font-smoothing:antialiased}
.wrap{max-width:720px;margin:0 auto}
.head{margin-bottom:24px}
h1{font-size:22px;letter-spacing:-.01em;margin:0 0 4px}
.sub{margin:0;color:var(--dim);font-size:14px}
.card,.feed>div,.profile{background:var(--card);border:1px solid var(--line);border-radius:14px}
.intro{padding:20px 22px}
.intro p{margin:0 0 12px;font-weight:600}
.intro ul{margin:0 0 20px;padding-left:20px;color:var(--dim)}
.intro li{margin-bottom:8px}
.intro li b{color:var(--ink);font-weight:600}
.feed{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.feed>div{padding:18px 20px;white-space:pre-wrap;animation:in .25s ease}
.feed .player{background:var(--player);border-style:dashed;color:var(--dim)}
.feed .player b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;color:var(--dim)}
.feed .context{background:transparent;border-style:dashed;color:var(--dim)}
.feed .context::before{content:"Контекст";display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;color:var(--dim);opacity:.75}
.feed .thinking{color:var(--dim);font-style:italic;border-style:dashed}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.composer{position:sticky;bottom:0;background:var(--bg);padding-top:8px}
textarea{width:100%;background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;font:inherit;resize:vertical;min-height:84px}
textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.row{display:flex;align-items:center;gap:10px;margin-top:10px}
.spacer{flex:1}
.hint{color:var(--dim);font-size:13px}
.btn{font:inherit;font-weight:600;border-radius:10px;padding:10px 18px;cursor:pointer;border:1px solid transparent}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);display:inline-flex;align-items:center;gap:8px}
.btn.ghost.rec{border-color:var(--danger);color:var(--danger)}
.btn:disabled{opacity:.45;cursor:default}
.dot{width:9px;height:9px;border-radius:50%;background:var(--dim);display:inline-block}
.btn.ghost.rec .dot{background:var(--danger);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.25}}
.error{background:color-mix(in srgb,var(--danger) 14%,transparent);border:1px solid var(--danger);
  color:var(--danger);border-radius:12px;padding:12px 16px;margin-bottom:14px;font-size:14px}
.profile{padding:24px}
.profile h2{font-size:19px;margin:0 0 10px}
.profile h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin:26px 0 10px}
.profile p{margin:0 0 8px}
.profile ul{margin:0;padding-left:20px}
.profile li{margin-bottom:10px}
.pat{border-left:2px solid var(--accent);padding-left:14px;margin-bottom:18px}
.pat b{display:block;margin-bottom:4px}
.pat span{display:block;color:var(--dim);font-size:14px;margin-top:6px}
.pat span.try{color:var(--ink);border-left:2px solid var(--accent);padding-left:10px;margin-top:12px}
.pat span.lbl{color:var(--ink);font-size:12px;text-transform:uppercase;letter-spacing:.07em;margin-top:12px;opacity:.7}
.pat ul{margin:4px 0 0;padding-left:18px;color:var(--dim);font-size:14px}
.pat li{margin-bottom:4px}
.exp{margin-bottom:14px}
.exp span{display:block;color:var(--dim);font-size:14px}

.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}