/* BleepItOut: one stylesheet. Direction A "censor bar" (phase 04.5). system-ui only, no web fonts.
   Tokens follow the design handoff; dark theme via prefers-color-scheme; phone at max-width 640px. */

/* ---- tokens ---- */
:root{
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --bg:#F6F5F1;--sf:#FFFFFF;--sf2:#ECEAE4;--tx:#121212;--mu:#57554F;--ln:#DDDAD2;--lns:#8C897F;
  --ac:#FFD400;--ac-hv:#F2C800;--ac-bd:#121212;--on-ac:#121212;--link:#121212;--focus:#1749E0;
  --bp-bg:#121212;--bp-tx:#FFFFFF;--pb-bg:#FFF2A8;--pb-ln:#6B5600;
  --cur:#1749E0;--mk:#121212;--bar:#121212;--vid:#1C1C1B;--warn-tx:#6B5600;--ok:#121212;--ok-bg:#FFD400;
  --seg-on:#121212;--seg-on-tx:#FFFFFF;--chip-on-bg:#121212;--chip-on-tx:#FFFFFF;--chip-on-ln:#3A3A3A;
  --rng:#121212;--num-bg:#121212;--num-tx:#FFFFFF;--over-bg:#FFF6C7;--err:#A1251B;--err-bg:#FCEDEB;
  --cov-a:#4A4843;--cov-b:#5C5A54;--cov-tx:#FFFFFF;
  --r1:6px;--r2:8px;--r3:10px;--rw:2px;
  --h1:64px;--h1m:38px;--h1a:48px;--h2:26px;--hw:850;--hls:-.035em;
}
/* dark: the system setting unless the visitor chose Light; or the visitor chose Dark (theme.js) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#111110;--sf:#1B1A18;--sf2:#272522;--tx:#F3F1EB;--mu:#ABA79D;--ln:#34322E;--lns:#77736A;
  --ac-hv:#FFE04D;--ac-bd:#FFD400;--on-ac:#111110;--link:#F3F1EB;--focus:#FFD400;
  --bp-bg:#FFD400;--bp-tx:#111110;--pb-bg:#3A3217;--pb-ln:#FFD400;
  --cur:#F3F1EB;--mk:#FFD400;--bar:#FFD400;--vid:#000;--warn-tx:#FFD400;--ok:#111110;--ok-bg:#FFD400;
  --seg-on:#FFD400;--seg-on-tx:#111110;--chip-on-bg:#FFD400;--chip-on-tx:#111110;--chip-on-ln:#C9A800;
  --rng:#FFD400;--num-bg:#F3F1EB;--num-tx:#111110;--over-bg:#2B2614;--err:#FF9C8F;--err-bg:#2E1A17;
  --cov-a:#A9A59B;--cov-b:#9A968C;--cov-tx:#111110;
}}
:root[data-theme="dark"]{
  --bg:#111110;--sf:#1B1A18;--sf2:#272522;--tx:#F3F1EB;--mu:#ABA79D;--ln:#34322E;--lns:#77736A;
  --ac-hv:#FFE04D;--ac-bd:#FFD400;--on-ac:#111110;--link:#F3F1EB;--focus:#FFD400;
  --bp-bg:#FFD400;--bp-tx:#111110;--pb-bg:#3A3217;--pb-ln:#FFD400;
  --cur:#F3F1EB;--mk:#FFD400;--bar:#FFD400;--vid:#000;--warn-tx:#FFD400;--ok:#111110;--ok-bg:#FFD400;
  --seg-on:#FFD400;--seg-on-tx:#111110;--chip-on-bg:#FFD400;--chip-on-tx:#111110;--chip-on-ln:#C9A800;
  --rng:#FFD400;--num-bg:#F3F1EB;--num-tx:#111110;--over-bg:#2B2614;--err:#FF9C8F;--err-bg:#2E1A17;
  --cov-a:#A9A59B;--cov-b:#9A968C;--cov-tx:#111110;
}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
p{margin:0}
a{color:var(--link);text-underline-offset:3px}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
.tn{font-variant-numeric:tabular-nums}
.vh,.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.s-sh{display:none}
.sprite{display:none}
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hint,.meta{font-size:14px;line-height:1.45;color:var(--mu)}
.note{font-size:14px;color:var(--mu)}

/* ---- logo and the bar ---- */
.lm{display:inline-block;padding:0 4px;margin:0 1px;border-radius:2px;background:var(--tx);color:var(--bg);line-height:1.25}
.cbar{display:inline-block;padding:0 .14em;border-radius:3px;background:var(--tx);color:transparent;line-height:1}

/* ---- header ---- */
.hdr{display:flex;align-items:center;gap:12px;min-height:64px;padding:0 32px;background:var(--bg);border-bottom:1px solid var(--ln)}
.logo{display:inline-flex;align-items:center;min-height:44px;margin-right:auto;color:var(--tx);text-decoration:none;font-weight:800;font-size:19px;letter-spacing:-.02em;white-space:nowrap}
.quota{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--mu);white-space:nowrap}
.quota .icon{width:16px;height:16px}
.qmenu{position:relative}
.qmenu>summary{cursor:pointer;list-style:none;min-height:40px}
.qmenu>summary::-webkit-details-marker{display:none}
.qmenu[open] .chev{transform:rotate(180deg)}
.qpanel{left:0;right:auto;min-width:260px;gap:4px}
.qlines{margin:0;padding:4px 10px;list-style:none;display:grid;gap:6px;font-size:14px;color:var(--tx)}
.linkb{display:flex;align-items:center;min-height:44px;padding:0 10px;border:0;border-radius:6px;background:none;color:var(--tx);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.linkb:hover{background:var(--sf2)}
.qerr{margin:0;padding:0 10px;font-size:13px;color:var(--err)}
.lang{position:relative}
.langb{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 10px;border:1px solid var(--lns);border-radius:var(--r1);background:var(--sf);color:var(--tx);font-size:14px;font-weight:650;cursor:pointer;list-style:none;text-transform:uppercase}
.langb::-webkit-details-marker{display:none}
.langb .icon{width:14px;height:14px;color:var(--mu)}
.lang[open] .langb .chev{transform:rotate(180deg)}
.menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;display:grid;min-width:200px;padding:6px;border:1px solid var(--lns);border-radius:var(--r2);background:var(--sf);box-shadow:0 8px 24px rgba(0,0,0,.14)}
.menu a{display:flex;align-items:center;min-height:44px;padding:0 10px;border-radius:6px;color:var(--tx);text-decoration:none;font-size:14px}
.menu a:hover{background:var(--sf2)}
.menu a[aria-current]{background:var(--sf2);font-weight:650}
/* D-28: the minutes panel is as wide as its longest short line, one row per source */
.menu.qpanel{right:auto;width:max-content}
.qlines li{white-space:nowrap}
.lang-switch{display:grid}
.themeb{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--lns);border-radius:var(--r1);background:var(--sf);color:var(--tx);cursor:pointer}
.themeb:hover{border-color:var(--tx)}
.themeb .icon{display:none;width:18px;height:18px}
.themeb[data-state="auto"] .ti-auto,.themeb[data-state="light"] .ti-light,.themeb[data-state="dark"] .ti-dark{display:block}
.mth{display:none;margin-top:4px;padding:10px 10px 6px;border-top:1px solid var(--ln)}
.mth .seg{display:flex}
.mth .seg button{flex:1;min-height:44px;padding:0 8px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid var(--lns);border-radius:var(--r1);background:var(--sf);color:var(--tx);font-size:15px;font-weight:650;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .12s ease,border-color .12s ease}
.btn:hover{border-color:var(--tx)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn-p{background:var(--ac);border-color:var(--ac-bd);color:var(--on-ac)}
.btn-p:hover{background:var(--ac-hv);border-color:var(--ac-bd)}
.btn-lg{min-height:56px;padding:0 28px;font-size:17px;border-radius:var(--r2)}
.btn-q{background:transparent;border-color:transparent;color:var(--link);padding:0 6px;font-weight:600}
.btn-q:hover{border-color:transparent;text-decoration:underline}
.btn-danger{background:var(--err);border-color:var(--err);color:var(--bg)}
.lnk{display:inline;min-height:0;padding:0;border:0;background:none;color:var(--link);font-weight:600;font-size:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid transparent;border-radius:var(--r1);background:transparent;color:var(--mu);cursor:pointer}
.icon-btn:hover{color:var(--tx);border-color:var(--lns)}

/* ---- page layout ---- */
.wrap{max-width:1080px;margin:0 auto;padding:0 40px}
.nar{max-width:780px}
.hero{padding:72px 0 32px;text-align:center}
.h1{margin:0 auto 16px;max-width:17ch;font-size:var(--h1);line-height:1.06;font-weight:var(--hw);letter-spacing:var(--hls);text-wrap:balance}
.lead{margin:0 auto;max-width:46ch;font-size:19px;line-height:1.45;color:var(--mu);text-wrap:balance}
.h2{margin:0;font-size:var(--h2);line-height:1.2;font-weight:var(--hw);letter-spacing:-.01em}
.h3{margin:0 0 4px;font-size:17px;line-height:1.3;font-weight:700}
.sample{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 8px;margin-top:28px;font-size:15px;color:var(--mu)}
.ba{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.bar-w{display:inline-block;padding:0 6px;border-radius:2px;background:var(--bp-bg);color:var(--bp-tx);font-weight:650}
.steps{list-style:none;margin:0;padding:64px 0 48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.step{display:flex;gap:14px;align-items:flex-start}
.step p{font-size:15px;color:var(--mu)}
.step .n{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:3px;background:var(--num-bg);color:var(--num-tx);font-weight:850}
.free{margin-bottom:56px;text-align:center;font-size:14px;color:var(--mu)}
.ftr{border-top:1px solid var(--ln)}
.ftr .wrap{display:flex;flex-wrap:wrap;gap:24px 72px;padding-top:32px;padding-bottom:40px;font-size:14px}
.fh{margin:0 0 8px;font-size:13px;font-weight:650;color:var(--mu)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ftr a{display:inline-flex;align-items:center;min-height:28px;color:var(--tx);text-decoration:none}
.ftr a:hover{text-decoration:underline}
.ftr .cr{margin-left:auto;color:var(--mu)}

/* ---- article pages: guides, legal, pass, sfx ---- */
.art{padding-bottom:72px}
.art h1{margin:40px 0 18px;font-size:var(--h1a);line-height:1.08;font-weight:var(--hw);letter-spacing:var(--hls);text-wrap:balance}
.art .lead{margin:0 0 20px;text-align:left;max-width:none}
.art h2{margin:56px 0 16px;font-size:var(--h2);line-height:1.2;font-weight:var(--hw)}
.art h3{margin:24px 0 6px;font-size:17px}
.art section>p,.art>p{margin:0 0 12px;line-height:1.6}
.art .drop{margin-top:28px}
.how{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:18px}
.how li{counter-increment:s;display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;font-size:17px;line-height:1.6}
.how li::before{content:counter(s);width:32px;height:32px;display:grid;place-items:center;font-size:15px;font-weight:750;border-radius:3px;background:var(--num-bg);color:var(--num-tx)}
.faq{border-top:1px solid var(--ln)}
.faq details{border-bottom:1px solid var(--ln)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:12px 0;font-size:17px;font-weight:650;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq h3{margin:0;font-size:inherit}
.faq details[open] .chev{transform:rotate(180deg)}
.faq .a{padding:0 0 20px;line-height:1.6;color:var(--mu)}
.rel,.sfx-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.sfx-list{flex-direction:column;align-items:stretch;margin:12px 0}
.sfx-effect{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 0;border-bottom:1px solid var(--ln)}
.sfx-effect span{min-width:10ch;font-weight:650}
.sfx-actions{flex-direction:row}
.sfx-effect .note{flex-basis:100%;margin:0}
audio{max-width:100%}
/* the pricing page (05-09): four compact offer cards, then the FAQ and the rules. Every card has the same five rows
   (title, price line, muted note, points, actions); with subgrid the rows line up across the cards, so a longer title or
   price line in one language moves its neighbours too and the buttons share one bottom line. Each part names its row,
   so a card without a note (owner 2026-10-27) leaves row 3 empty instead of moving its points up. Without subgrid the
   card is a flex column whose actions sit at the bottom. */
.offers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:28px 0 20px}
.offers:has(>.offer:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.offer{display:flex;flex-direction:column;gap:8px;min-width:0;padding:20px;background:var(--sf);border:1px solid var(--ln);border-radius:var(--r3);scroll-margin-top:80px}
@supports (grid-template-rows:subgrid){.offer{display:grid;grid-row:span 5;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);row-gap:8px}
  .offer>h2{grid-row:1}.offer>.offer-price{grid-row:2}.offer>.offer-note{grid-row:3}.offer>.offer-pts{grid-row:4}.offer>.offer-act{grid-row:5}}
.art .offer h2{margin:0;font-size:17px;line-height:1.3}
/* "Best value" on Pro: in the card's top corner, out of the flow, so the title row keeps the same height everywhere */
.offer{position:relative}
.offer-badge{position:absolute;top:16px;right:16px;padding:2px 8px;border-radius:999px;background:var(--ac);color:var(--on-ac);font-size:12px;font-weight:750;line-height:1.4;white-space:nowrap}
.pass-faq{margin:0 0 8px}
.art .offer>p{margin:0;line-height:1.45}  /* beats .art section>p (12px margin, 1.6 line height) inside the cards */
.art .offer>.offer-price{line-height:1.2}
.offer-price{margin:0;font-size:24px;font-weight:var(--hw);line-height:1.2}
.offer-price .meta{display:inline-block;font-size:14px;font-weight:400}  /* "first month" moves whole, not split */
.offer-note{margin:0;font-size:14px;line-height:1.45;color:var(--mu)}
.offer-pts{margin:4px 0 4px;padding-left:18px;display:grid;align-content:start;gap:4px;font-size:14px;line-height:1.45}
.offer-act{display:grid;align-content:end;gap:8px;margin-top:auto}
/* a long label ("Купить 60 мин за 4,99 $ + налоги") wraps inside a full-width button instead of widening the card */
.offer-act .btn{width:100%;padding:8px 16px;white-space:normal;text-align:center}
.offer .withdrawal{margin:0;font-size:12.5px}
@media (max-width:1040px){.offers,.offers:has(>.offer:nth-child(3):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
.rules ul{margin:0;padding-left:20px;display:grid;gap:8px;line-height:1.55}
.rules{margin:0 0 28px}
.art .rules h2{margin-top:36px}
#pass-form{margin:0 0 16px}
.badge{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;background:var(--ac);color:var(--on-ac);font-size:13px;font-weight:750}

/* ---- cards, fields, alerts ---- */
.card{padding:24px;background:var(--sf);border:1px solid var(--ln);border-radius:var(--r3)}
.code{display:grid;gap:10px;max-width:560px}
.code h2{margin:0;font-size:17px}
.field{display:grid;gap:4px;font-size:14px;color:var(--mu)}
.field input,.inp,.fld input,select{min-width:0;height:44px;padding:0 12px;border:1px solid var(--lns);border-radius:var(--r1);background:var(--sf);color:var(--tx);font-size:16px}
.field input[aria-invalid="true"],.fld input[aria-invalid="true"]{border-color:var(--err);box-shadow:inset 0 0 0 1px var(--err)}
.rowi{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--lns);border-radius:var(--r2);background:var(--sf);font-size:15px;text-align:left}
.alert-error{border-color:var(--err);background:var(--err-bg);color:var(--tx)}
.alert-error .icon{color:var(--err)}
.alert-text{flex:1;min-width:0}
.alert-title{font-weight:700}
.file-name{font-weight:650;overflow-wrap:anywhere}
progress{width:100%;height:8px;accent-color:var(--bar)}
.strip{display:block;height:4px}

/* ---- drop zone ---- */
.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:192px;padding:52px 32px;text-align:center;background:var(--sf);border:2px solid var(--tx);border-radius:var(--r3);transition:background-color .12s ease-out,box-shadow .12s ease-out}
.drop.over{background:var(--over-bg);box-shadow:inset 0 0 0 2px var(--tx)}
.drop .icon-zone{width:40px;height:40px;stroke-width:1.8}
.dt{font-size:20px;font-weight:700;line-height:1.3}
.drop .ovl,.drop.over .idl{display:none}
.drop.over .ovl{display:inline}
.drop .alert{width:100%;max-width:520px}
.quota-panel{display:grid;gap:12px;max-width:560px;margin:16px auto 0}
.qnote{margin:2px 0 10px;font-size:13px}
.charge{margin:10px 0 0;font-size:14px;color:var(--mu);text-align:center}
.charge-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px}

/* ---- processing ---- */
.proc{max-width:600px;margin:72px auto 96px;padding:32px}
.file{display:flex;align-items:center;gap:14px;padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--ln)}
.fi{flex:none;width:48px;height:48px;border-radius:var(--r2);background:var(--sf2);display:grid;place-items:center}
.file .nm{font-weight:700;overflow-wrap:anywhere}
.du{font-size:14px;color:var(--mu)}
.stps{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.stp{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start}
.si{width:28px;height:28px;border-radius:50%;display:grid;place-items:center}
.si .icon{width:16px;height:16px;stroke-width:3}
.stp.done .si{background:var(--ok-bg);color:var(--ok)}
.stp.now .si{box-shadow:inset 0 0 0 2px var(--bar)}
.stp.todo .si{box-shadow:inset 0 0 0 2px var(--lns)}
.st1{font-weight:650;line-height:28px}
.stp.todo .st1{color:var(--mu);font-weight:500}
.dot{width:10px;height:10px;border-radius:50%;background:var(--bar);animation:breathe 1.8s ease-in-out infinite}
.pbar{position:relative;height:8px;margin:8px 0 6px;border-radius:999px;background:var(--sf2);overflow:hidden}
.pbar i{position:absolute;top:0;bottom:0;left:0;width:35%;border-radius:inherit;background:var(--bar);animation:slide 2.4s linear infinite}
.calm{margin-top:28px;padding-top:20px;border-top:1px solid var(--ln);font-size:15px;color:var(--mu)}
.calm b{color:var(--tx);font-weight:650}
@keyframes breathe{50%{opacity:.35}}
@keyframes slide{from{transform:translateX(-100%)}to{transform:translateX(290%)}}

/* ---- centred views: done, problem, missing ---- */
.empty,.card-center{display:grid;justify-items:start;gap:12px;max-width:640px;padding:32px;background:var(--sf);border:1px solid var(--ln);border-radius:var(--r3)}
.card-center{margin:72px auto;justify-items:center;text-align:center}
.card-center h2,.empty h2{margin:0;font-size:var(--h2);line-height:1.2;font-weight:var(--hw)}
.card-center>p{color:var(--mu);max-width:54ch}
.empty p{color:var(--mu);max-width:54ch}
.ei{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--sf2)}
.acts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px}

/* ---- editor: player ---- */
.player{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--ln)}
.pl{max-width:1200px;margin:0 auto;padding:16px 40px;display:grid;grid-template-columns:240px minmax(0,1fr) auto;grid-template-areas:"v i i" "v s n" "v t t";column-gap:24px;row-gap:10px;align-items:center}
.vid{grid-area:v;min-width:0}
.vid video{display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r2);background:var(--vid)}
.vid audio{display:block;width:100%}
.info{grid-area:i;display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;min-width:0}
.info .nm{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%}
.pst{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-size:13px;color:var(--mu);white-space:nowrap}
.pst .icon{width:14px;height:14px;stroke-width:3}
.pst.stale{color:var(--warn-tx);font-weight:600}
.lb{width:44px;height:3px;border-radius:2px;background:var(--sf2);overflow:hidden}
.lb i{display:block;height:100%;background:currentColor;transform-origin:left;animation:fill 1.1s linear both}
@keyframes fill{from{transform:scaleX(0)}}
.ctl{grid-area:s;display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.seg{display:inline-flex;padding:3px;border:1px solid var(--lns);border-radius:var(--r2);background:var(--sf2)}
.seg button{min-height:36px;padding:0 14px;border:0;border-radius:5px;background:transparent;color:var(--mu);font-size:14px;font-weight:650;cursor:pointer;transition:background-color .16s ease,color .16s ease}
.seg button[aria-pressed="true"]{background:var(--seg-on);color:var(--seg-on-tx);box-shadow:0 1px 2px rgba(0,0,0,.14)}
.nav{grid-area:n;display:inline-flex;gap:8px}
.nav .btn{min-height:38px;padding:0 12px;font-size:14px}
.tlw{grid-area:t;min-width:0}
.tl{position:relative;height:36px;cursor:crosshair;touch-action:none;user-select:none}
.trk,.dn{position:absolute;left:0;top:15px;height:6px;border-radius:3px}
.trk{right:0;background:var(--sf2)}
.dn{background:var(--lns)}
.mk{position:absolute;top:8px;min-width:4px;height:20px;border-radius:2px;background:var(--mk);pointer-events:none}
.mk.rg{background:transparent;box-shadow:inset 0 0 0 2px var(--mk)}
.mk.cur{top:4px;height:28px;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--cur)}
.phd{position:absolute;top:0;width:2px;height:36px;margin-left:-1px;background:var(--tx);pointer-events:none}
.sel{position:absolute;top:6px;height:24px;border-radius:3px;background:var(--pb-bg);box-shadow:inset 0 0 0 1.5px var(--pb-ln);pointer-events:none}
.times{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--mu)}
.player>.hint,.player>.alert,.player>div>.alert{max-width:1120px;margin:0 auto 10px}

/* ---- editor: transcript and side ---- */
.edb{max-width:1200px;margin:0 auto;padding:28px 40px 40px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}
.notices{display:grid;gap:8px;margin-bottom:12px}
.notices:empty{display:none}
.trh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.count{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;background:var(--sf2);font-size:14px;font-weight:650}
.langline{margin:0 0 12px;font-size:13px;color:var(--mu)}
.lang-panel{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin:0 0 16px}
.legend{display:flex;gap:8px 18px;flex-wrap:wrap;align-items:center;margin-bottom:22px;font-size:13px;color:var(--mu)}
.legend .w{cursor:help;padding:1px 6px}
.tr{font-size:19px;line-height:2.05;max-width:68ch}
.para{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;margin:0 0 14px}
.ts{align-self:start;height:38px;padding:0;border:0;background:none;color:var(--mu);font-size:13px;text-align:left;cursor:pointer;font-variant-numeric:tabular-nums}
.ts:hover{text-decoration:underline}
.w{position:relative;display:inline;margin:0 -1px;padding:3px 4px;border:0;border-radius:var(--rw);background:transparent;color:inherit;font-size:inherit;line-height:1.3;cursor:pointer;scroll-margin-top:calc(var(--player-h,0px) + 16px);scroll-margin-bottom:calc(var(--bar-h,80px) + 16px);-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-color 80ms linear,color 80ms linear,box-shadow 80ms linear}
.w::after{content:"";position:absolute;inset:-7px -2px}
.w.on{background:var(--bp-bg);color:var(--bp-tx);font-weight:650}
.w.maybe{background:var(--pb-bg);text-decoration:underline dashed var(--pb-ln) 2px;text-underline-offset:6px}
.w.off{text-decoration:underline dotted var(--mu) 2px;text-underline-offset:6px}
/* covered by a neighbouring bleep (a stretched edge, the padding, a range): the same bar, grey and hatched, secondary to .on */
.w.cov{background:repeating-linear-gradient(135deg,var(--cov-a) 0 4px,var(--cov-b) 4px 8px);color:var(--cov-tx);text-decoration:none}
.w.cov.is-playing:not(.on){text-decoration:underline solid currentColor 2px;text-underline-offset:6px}
.w.is-playing:not(.on){text-decoration:underline solid var(--tx) 2px;text-underline-offset:6px}
.w:focus-visible{outline:0;box-shadow:0 0 0 3px var(--focus)}
.w.cur{box-shadow:0 0 0 3px var(--cur)}
.w.on.cur,.w.on:focus-visible{box-shadow:0 0 0 3px var(--ac)}
.empty-block{margin-bottom:16px}
.side{display:grid;gap:28px;min-width:0}
.sec .h3{margin-bottom:10px}
.style-gh{margin:14px 0 8px;font-size:13px;font-weight:650;color:var(--mu)}
.sec .h3+.style-gh{margin-top:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0;min-width:0}
.chip{display:inline-flex;align-items:stretch;border:1px solid var(--lns);border-radius:var(--r1);background:var(--sf);overflow:hidden}
.chip label{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;font-size:14px;font-weight:600;cursor:pointer}
.chip:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.chip .pv{width:36px;border:0;border-left:1px solid var(--ln);background:transparent;color:var(--mu);display:grid;place-items:center;cursor:pointer}
.chip .pv .icon{width:14px;height:14px}
.chip .ck{display:none;width:14px;height:14px;stroke-width:3}
.chip.is-selected{border-color:var(--chip-on-bg);background:var(--chip-on-bg)}
.chip.is-selected label,.chip.is-selected .pv{color:var(--chip-on-tx)}
.chip.is-selected .pv{border-left-color:var(--chip-on-ln)}
.chip.is-selected .ck{display:inline}
.pv.is-playing .icon{opacity:.6}
.custom-sound{display:grid;gap:8px;margin-top:12px}
.fold{border:1px solid var(--ln);border-radius:var(--r2);background:var(--sf)}
.fold summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 16px;font-weight:650;cursor:pointer}
.fold summary::-webkit-details-marker{display:none}
.chev{width:16px;height:16px}
.fold[open] summary .chev{transform:rotate(180deg)}
.bd{padding:4px 16px 18px;display:grid;gap:16px}
.rng{display:grid;gap:4px;font-size:14px}
.rl{display:flex;justify-content:space-between;gap:8px}
.rl output{font-weight:650;font-variant-numeric:tabular-nums}
.rng input{width:100%;height:28px;margin:0;accent-color:var(--rng)}
.rng input[aria-disabled="true"]{opacity:.45}
.man{padding-top:22px;border-top:1px solid var(--ln)}
.man .meta{margin:0 0 12px}
.ins{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px}
.fld{display:grid;gap:4px;font-size:13px;color:var(--mu)}
.fld input{width:96px}
.ranges{display:grid;gap:12px;margin-top:12px}
.range-row{display:grid;gap:8px;padding:12px;border:1px solid var(--ln);border-radius:var(--r2);background:var(--sf)}
.range-head{display:flex;align-items:center;gap:4px}
.range-label{margin-right:auto;font-weight:650;font-size:14px}
.range-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.range-fields input{width:100%}

/* ---- editor: bottom bar ---- */
.bar{position:sticky;bottom:0;z-index:5;background:var(--bg);border-top:1px solid var(--ln)}
.bar .in{max-width:1200px;margin:0 auto;padding:12px 40px;display:flex;align-items:center;gap:16px}
.bar .n{font-size:17px;font-weight:750;white-space:nowrap}
.bar .q{margin-right:auto;font-size:13px;color:var(--mu)}
.bar>.alert{max-width:1120px;margin:10px auto 0}
.is-busy{opacity:.55}
.job-footer{display:grid;justify-items:center;gap:8px;max-width:1200px;margin:0 auto;padding:24px 16px 48px;text-align:center}
.spinner-sm{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}

/* ---- toast and dialog ---- */
.toast{position:fixed;left:50%;bottom:96px;z-index:30;transform:translateX(-50%);display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px);padding:8px 8px 8px 16px;border-radius:var(--r2);background:var(--tx);color:var(--bg);font-size:15px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.toast-btn{min-height:40px;padding:0 10px;border:0;border-radius:var(--r1);background:transparent;color:inherit;font-weight:700;cursor:pointer}
.toast-close{display:grid;place-items:center;width:40px;padding:0}
.toast-btn:focus-visible{outline-color:var(--ac)}
.dialog{max-width:440px;padding:24px;border:1px solid var(--ln);border-radius:var(--r3);background:var(--sf);color:var(--tx)}
.dialog::backdrop{background:rgba(0,0,0,.45)}
.dialog>*+*{margin-top:12px}
.state-title{margin:0;font-size:19px}
.dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}

/* ---- tablet: the editor stacks ---- */
@media (max-width:860px){
  .edb{grid-template-columns:minmax(0,1fr);gap:32px}
}

/* ---- phone ---- */
@media (max-width:640px){
  .s-lg{display:none}
  .s-sh{display:inline}
  .hdr{min-height:60px;padding:0 12px;gap:8px}
  .logo{font-size:17px}
  .quota{font-size:13px;gap:4px}
  .qpanel,.menu.qpanel{position:fixed;left:12px;right:12px;top:64px;min-width:0;width:auto}
  .langb{height:44px;padding:0 8px;gap:4px}
  .themeb{display:none}
  .mth{display:block}
  .btn{min-height:44px}
  .wrap{padding:0 16px}
  .hero{padding:32px 0 20px}
  .h1{font-size:var(--h1m)}
  .lead{font-size:17px}
  .drop{padding:28px 16px}
  .dt{font-size:17px}
  .drop .btn-lg{width:100%}
  .steps{grid-template-columns:1fr;gap:20px;padding:40px 0 32px}
  .ftr .wrap{flex-direction:column;gap:24px;padding-top:24px;padding-bottom:32px}
  .ftr ul{gap:0}
  .ftr a{min-height:44px}
  .ftr .cr{margin-left:0}
  .art h1{font-size:var(--h1m);margin-top:24px}
  .art h2{margin:44px 0 14px}
  .how li{font-size:16px}
  .offers,.offers:has(>.offer:nth-child(3):last-child){grid-template-columns:minmax(0,1fr);gap:12px}
  .proc{margin:24px 16px 48px;padding:20px}
  .card-center{margin:24px 16px}
  .empty{padding:20px}
  .pl{grid-template-columns:96px minmax(0,1fr);grid-template-areas:"v i" "v s" "t t" "n n";padding:10px 16px 12px;column-gap:12px;row-gap:8px}
  .pl:has(.vid audio){grid-template-columns:minmax(0,1fr);grid-template-areas:"i" "v" "s" "t" "n"}
  .info{gap:0 8px}
  .info .nm{font-size:14px}
  .pst{margin-left:0;font-size:12px}
  .seg button{min-height:38px;padding:0 10px;font-size:13px}
  .nav{width:100%}
  .nav .btn{flex:1;min-height:44px}
  .edb{padding:20px 16px 32px}
  .tr{font-size:18px;line-height:2.45}
  .para{grid-template-columns:minmax(0,1fr);gap:0;margin-bottom:12px}
  .ts{height:32px}
  .chip label{min-height:44px}
  .chip .pv{width:44px}
  .fold summary{min-height:52px}
  .icon-btn{width:44px;height:44px}
  .bar .in{padding:10px 16px;gap:2px 12px;flex-wrap:wrap}
  .bar .q{order:3;width:100%;margin:0}
  .bar .btn{margin-left:auto}
  .bar .btn-lg{min-height:48px;padding:0 16px;font-size:16px}
  .bar .btn .icon{display:none}
  .toast{bottom:120px}
}
@media (pointer:coarse){.btn,.lnk{min-height:44px}.lnk{display:inline-flex;align-items:center}}

/* ---- no motion when asked ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation:none!important;scroll-behavior:auto!important}
}
.rel .btn{white-space:normal;text-align:left;min-height:44px;padding:8px 14px}