:root{
  --paper:#f1ede2; --ink:#121212; --mute:#6b665a; --line:#121212;
  --me:#ffd23f; --dud:#e5231b; --card:#fbf9f2;
  --f-disp:"Unbounded",system-ui,sans-serif; --f-body:"Onest",system-ui,sans-serif; --f-mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.5 var(--f-body);padding:0 clamp(16px,4vw,48px) 96px;-webkit-font-smoothing:antialiased}
.wrap{max-width:860px;margin:0 auto}
header{padding:clamp(40px,8vw,88px) 0 28px;border-bottom:3px solid var(--line)}
.kicker{font:500 13px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:0 0 18px}
h1{font:900 clamp(40px,10vw,92px)/.95 var(--f-disp);margin:0;letter-spacing:-.03em}
h1 em{font-style:normal;background:var(--dud);color:#fff;padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lead{max-width:56ch;margin:22px 0 0;font-size:18px}
.note{margin:26px 0 0;padding:12px 14px;border:2px solid var(--line);background:var(--card);font-size:14px;color:#333}
.note b{font-family:var(--f-mono);font-weight:500}
h2{font:900 clamp(22px,4vw,30px)/1.1 var(--f-disp);margin:56px 0 6px;letter-spacing:-.02em}
.sub{margin:0 0 28px;color:var(--mute);font-size:15px}
/* диалог */
.turn{display:flex;gap:14px;margin:0 0 18px;align-items:flex-start}
.tag{flex:none;width:58px;font:500 12px var(--f-mono);text-transform:uppercase;letter-spacing:.06em;padding-top:11px;color:var(--mute)}
.me p{margin:0;background:var(--me);border:2px solid var(--line);padding:12px 16px;max-width:34em;box-shadow:4px 4px 0 var(--line);font-weight:500}
.me{margin-right:clamp(0px,8vw,90px)}
.dud{margin-left:clamp(0px,8vw,90px);flex-direction:row-reverse;text-align:left}
.dud .tag{text-align:right;color:var(--dud)}
.dud .clip{flex:1}
.clip{margin:0;background:var(--card);border:2px solid var(--line);border-left:10px solid var(--dud);padding:14px 16px 12px;box-shadow:4px 4px 0 var(--line);min-width:0}
.clip blockquote{margin:0 0 10px;font:700 clamp(18px,3.2vw,22px)/1.25 var(--f-body)}
.clip figcaption{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--mute);margin-bottom:12px}
.who{font:500 12px var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--dud)}
.act{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
button.play{appearance:none;border:2px solid var(--line);background:var(--ink);color:#fff;font:700 14px var(--f-body);padding:9px 14px;cursor:pointer;transition:transform .12s,background .12s}
button.play:hover{background:var(--dud);transform:translate(-2px,-2px)}
button.play:focus-visible,a:focus-visible{outline:3px solid var(--dud);outline-offset:3px}
a.yt{color:var(--ink);font-size:14px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
a.yt:hover{color:var(--dud)}
.tcode{font:500 13px var(--f-mono);background:var(--paper);border:1.5px solid var(--line);padding:1px 6px;margin-right:4px;text-decoration:none;display:inline-block}
.frame{position:relative;aspect-ratio:16/9;margin:0 0 12px;border:2px solid var(--line);background:#000}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* банк */
.cat{margin:0 0 36px}
.cat h3{font:700 16px var(--f-disp);margin:0 0 14px;display:flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:2px solid var(--line)}
.cat h3 span{font:500 12px var(--f-mono);background:var(--dud);color:#fff;padding:2px 7px}
.cat ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:16px}
.cat .clip{box-shadow:3px 3px 0 var(--line);height:100%}
.cat .clip blockquote{font-size:18px}
footer{margin-top:64px;padding-top:18px;border-top:3px solid var(--line);font-size:13px;color:var(--mute)}
@media (max-width:560px){
  .turn{gap:8px}.tag{width:40px;font-size:10px}.me,.dud{margin-left:0;margin-right:0}
}
@media (prefers-reduced-motion:reduce){button.play{transition:none}}

.frame video{position:absolute;inset:0;width:100%;height:100%;background:#000}
.clip .frame{margin:0 0 12px}
.clip .act{margin-top:2px}
.speaker{font:500 11px var(--f-mono);background:var(--ink);color:#fff;padding:1px 6px;margin-left:8px;text-transform:uppercase;letter-spacing:.05em}
.hint{margin:0 0 10px;font-size:13px;color:#4a463c;border-left:3px solid var(--me);padding-left:8px}
.cat .lead{margin:-6px 0 14px;font-size:14px;color:var(--mute);max-width:70ch}
nav.top{padding:18px 0 0;font:500 13px var(--f-mono)}nav.top a{color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:18px;margin:8px 0 0}
a.card{display:block;text-decoration:none;color:var(--ink);background:var(--card);border:2px solid var(--line);border-top:10px solid var(--dud);padding:16px 16px 14px;box-shadow:5px 5px 0 var(--line);transition:transform .12s,box-shadow .12s}
a.card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--line)}
a.card:nth-child(3n+2){border-top-color:var(--me)}a.card:nth-child(3n){border-top-color:var(--ink)}
a.card h3{font:900 22px/1.1 var(--f-disp);margin:0 0 8px;letter-spacing:-.02em}
a.card p{margin:0 0 12px;font-size:14px;color:#3c3930}
a.card .n{font:500 12px var(--f-mono);color:var(--mute)}

/* editor */
.bar{position:sticky;top:0;z-index:20;display:none;align-items:center;gap:10px;flex-wrap:wrap;background:var(--ink);color:#fff;padding:10px 14px;margin:0 calc(-1*clamp(16px,4vw,48px));font:500 13px var(--f-mono)}
.editing .bar{display:flex}
.bar .st{margin-left:auto;opacity:.85}.bar .st.err{color:#ffb4ab;opacity:1}.bar .st.ok{color:#9be29b}
.bar button{appearance:none;border:1.5px solid #fff;background:transparent;color:#fff;font:500 12px var(--f-mono);padding:6px 10px;cursor:pointer}
.bar button:hover{background:#fff;color:var(--ink)}
.turn{position:relative}
.turn .ctl{display:none;gap:4px;margin:6px 0 0;flex-wrap:wrap}
.editing .turn .ctl{display:flex}
.ctl button,.grip{appearance:none;border:1.5px solid var(--line);background:var(--paper);font:500 12px var(--f-mono);padding:3px 8px;cursor:pointer;color:var(--ink)}
.ctl button:hover{background:var(--ink);color:#fff}
.grip{display:none;cursor:grab;touch-action:none;user-select:none;padding:4px 9px;letter-spacing:-.1em}
.editing .grip{display:inline-block}
.turn.me textarea,.turn.act textarea{width:100%;min-width:0;font:500 17px/1.4 var(--f-body);background:var(--me);color:var(--ink);border:2px solid var(--line);padding:10px 14px;box-shadow:4px 4px 0 var(--line);resize:none;overflow:hidden;display:block}
.turn.act textarea{background:var(--card);font-style:italic;box-shadow:none;border-style:dashed}
.turn.act p{margin:0;font-style:italic;border:2px dashed var(--line);padding:10px 14px;background:var(--card)}
.turn.act{margin:0 clamp(0px,4vw,40px)}
.turn.act .tag{color:var(--ink)}
.me .body{flex:1;min-width:0;max-width:34em}.dud .body{flex:1;min-width:0}
.sortable-ghost{opacity:.35}.sortable-chosen .clip,.sortable-chosen p,.sortable-chosen textarea{outline:3px solid var(--dud)}
#dlg{list-style:none;margin:0;padding:0;min-height:60px}
.empty{border:3px dashed var(--line);padding:24px;text-align:center;color:var(--mute)}
.bank-tools{display:flex;gap:10px;margin:0 0 22px;flex-wrap:wrap}
.bank-tools input{flex:1;min-width:200px;font:500 15px var(--f-body);border:2px solid var(--line);padding:9px 12px;background:var(--card)}
.cat summary{cursor:pointer;list-style:none}.cat summary::-webkit-details-marker{display:none}
.cat summary h3{margin:0 0 14px}
.cat summary h3::before{content:"▸";font-size:14px}.cat[open] summary h3::before{content:"▾"}
.cat ul li{list-style:none}
.cat .clip.drag-src{cursor:default}
.dragnote{font-size:13px;color:var(--mute);margin:-18px 0 22px}
.spin{font:500 12px var(--f-mono);color:var(--dud)}

.cat li{position:relative}
.cat li .grip{position:absolute;top:10px;right:10px;margin:0;z-index:3;background:var(--ink);color:#fff;border-color:var(--ink)}
.cat li .clip{padding-top:40px}

/* ===== chat layout ===== */
#dlg{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
#dlg>.turn{margin:0;gap:10px;align-items:flex-end;display:flex}
#dlg>.turn.me{flex-direction:row-reverse}
#dlg>.turn.dud{flex-direction:row;margin-left:0}
#dlg>.turn.me{margin-right:0}
#dlg>.turn .body{min-width:0}
#dlg>.turn.me .body{flex:0 1 auto;max-width:min(30em,78%);margin-left:auto}
#dlg>.turn.dud .body{flex:0 1 auto;max-width:min(40em,88%)}
#dlg>.turn.act{justify-content:center}
#dlg>.turn.act .body{flex:0 1 32em;max-width:90%}
.av{flex:none;width:38px;height:38px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font:700 14px var(--f-disp);background:var(--me);color:var(--ink)}
.dud .av{background:var(--dud);color:#fff}
.turn .tag{padding-top:0}
#dlg>.turn>div:first-child{align-items:center!important}
#dlg>.turn.me .body textarea,#dlg>.turn.me .body p{border-radius:16px 16px 3px 16px;box-shadow:3px 3px 0 var(--line)}
#dlg>.turn.me .body p{margin:0;padding:10px 14px;background:var(--me);border:2px solid var(--line);font-weight:500}
#dlg>.turn.dud .clip{border-left:2px solid var(--line);border-radius:16px 16px 16px 3px;box-shadow:3px 3px 0 var(--line);padding:10px 12px}
.clip{display:grid;grid-template-columns:minmax(0,1fr) 150px;column-gap:12px;align-items:start}
.clip>blockquote,.clip>figcaption,.clip>.hint,.clip>.act{grid-column:1}
.clip>.frame{grid-column:2;grid-row:1 / span 4;margin:0;align-self:start;width:150px}
.clip>blockquote{font:600 17px/1.3 var(--f-body);margin:0 0 6px}
.clip>figcaption{margin:0 0 6px;font-size:12px}
.clip .src{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.clip>.act{margin-top:0}
.clip .frame video,.clip .frame iframe{cursor:pointer}
.cat .clip{padding-top:40px;grid-template-columns:minmax(0,1fr) 130px}
.cat .clip>.frame{width:130px}
.cat li .grip{right:10px}
@media (max-width:560px){
  .clip,.cat .clip{grid-template-columns:minmax(0,1fr) 108px}
  .clip>.frame,.cat .clip>.frame{width:108px}
  .clip>blockquote{font-size:15px}
  #dlg>.turn.me .body{max-width:84%}#dlg>.turn.dud .body{max-width:92%}
  .av{width:30px;height:30px;font-size:12px}
}

/* two columns while editing: dialog and bank scroll independently, no long drags */
.split{display:block}
@media (min-width:1000px){
  .editing .split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}
  .editing .wrap{max-width:1500px}
  .editing .col{position:sticky;top:52px;max-height:calc(100vh - 64px);overflow:auto;padding-right:6px;scrollbar-gutter:stable}
  .editing #dlg{max-width:none}
}
.compact .clip>.frame{display:none}
.compact .clip{grid-template-columns:minmax(0,1fr)}
.compact #dlg>.turn{gap:8px}

/* v3: plain page scroll, nothing sticky */
.bar{position:static!important;top:auto!important}
.editing .split{display:block!important}
.editing .wrap{max-width:var(--wrapw,860px)!important}
.editing .col{position:static!important;max-height:none!important;overflow:visible!important;padding-right:0!important}
.editing #dlg{max-width:760px!important}

/* v4: two columns (dialog left, bank right), plain page scroll, nothing sticky */
@media (min-width:1000px){
  .split{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px;align-items:start}
  .wrap{--wrapw:1500px;max-width:1500px!important}
  .editing .wrap{max-width:1500px!important}
  #dlg,.editing #dlg{max-width:none!important}
  .col,.editing .col{position:static!important;max-height:none!important;overflow:visible!important}
}

@media (min-width:1000px){
  .editing .split{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px;align-items:start}
}

.cat li .bdel{position:absolute;top:10px;right:118px;z-index:3;appearance:none;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font:700 13px var(--f-mono);padding:3px 9px;cursor:pointer}
.cat li .bdel:hover{background:var(--dud);color:#fff;border-color:var(--dud)}

.bank-tools button{appearance:none;border:2px solid var(--line);background:var(--card);color:var(--ink);font:500 13px var(--f-mono);padding:8px 12px;cursor:pointer;white-space:nowrap}
.bank-tools button:hover{background:var(--ink);color:#fff}
.cat summary{user-select:none}
.clip input.short{display:block;width:100%;box-sizing:border-box;font:600 13px/1.3 'Onest',sans-serif;border:2px solid #111;background:#ffe14d;padding:4px 6px;margin:4px 0 2px}
.clip .src.orig{opacity:.55;font-size:11px}
.clip textarea.qedit{width:100%;box-sizing:border-box;font:inherit;font-weight:700;border:2px solid #111;background:#ffe14d;padding:4px 6px;resize:vertical}