/* «Чтец» — hi-tech studio UI */
:root{
  --bg:#0a0c10;
  --ink:#e8ecf2;--muted:#8b93a3;--dim:#5a6172;
  --panel:rgba(16,20,28,.72);--panel2:rgba(22,27,38,.66);
  --line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.16);
  --cyan:#38e1ff;--cyan-dim:rgba(56,225,255,.35);
  --violet:#8b7bff;--rec:#ff4d5e;--ok:#3ddc97;--warn:#ffb454;
  --grad:linear-gradient(90deg,var(--cyan),var(--violet));
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter','SF Pro Display',-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--ink);line-height:1.6;min-height:100vh;
  background:var(--bg);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* ---------- живой видеофон студии ---------- */
.studio-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:var(--bg)}
.studio-bg video{
  position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;
  width:auto;height:auto;transform:translate(-50%,-50%) scale(1.06);
  object-fit:cover;filter:brightness(.5) saturate(.9);
  animation:campan 40s ease-in-out infinite alternate;
}
@keyframes campan{
  from{transform:translate(-51.5%,-50.8%) scale(1.06)}
  to{transform:translate(-48.5%,-49.2%) scale(1.12)}
}
.studio-bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 75% 65% at 50% 42%, transparent 35%, rgba(6,8,12,.8) 100%),
             linear-gradient(180deg, rgba(6,8,12,.6), transparent 30%, transparent 65%, rgba(6,8,12,.78));
}
.studio-bg .layer{display:none}
/* ---------- шапка ---------- */
.cover{text-align:center;padding:34px 20px 20px}
.cover .brand a{display:inline-flex;align-items:center;gap:22px;text-decoration:none}
.logo-text{
  font-size:4.2rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(56,225,255,.45));
}
.logo-acc{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-wave{display:inline-flex;align-items:center;gap:5px;height:44px}
.logo-wave i{
  width:6px;border-radius:3px;background:var(--grad);
  box-shadow:0 0 10px rgba(56,225,255,.5);
  animation:logowave 1.6s ease-in-out infinite;
}
.logo-wave i:nth-child(1){height:14px;animation-delay:0s}
.logo-wave i:nth-child(2){height:28px;animation-delay:.2s}
.logo-wave i:nth-child(3){height:42px;animation-delay:.4s}
.logo-wave i:nth-child(4){height:28px;animation-delay:.6s}
.logo-wave i:nth-child(5){height:14px;animation-delay:.8s}
@keyframes logowave{0%,100%{transform:scaleY(.5);opacity:.55}50%{transform:scaleY(1.15);opacity:1}}
@media(max-width:640px){
  .logo-text{font-size:2.8rem}
  .cover .brand a{gap:12px}
  .logo-wave{height:30px}.logo-wave i{width:4px}
}
.cover .tagline{color:var(--muted);margin-top:6px;font-size:.98rem;letter-spacing:.04em}
.ornament{display:none}
.cover nav{margin-top:18px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cover nav a{
  color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line2);border-radius:10px;padding:8px 20px;
  background:rgba(14,18,26,.6);backdrop-filter:blur(8px);transition:.2s;
}
.cover nav a:hover{border-color:var(--cyan-dim);color:var(--cyan);box-shadow:0 0 16px rgba(56,225,255,.18)}
.cover nav a.active{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 20px rgba(56,225,255,.25) inset,0 0 16px rgba(56,225,255,.15)}
/* ---------- сцена ---------- */
main{max-width:1020px;margin:0 auto;padding:8px 20px 70px}
.scene{display:block;margin-top:20px}
.mic-col{
  position:fixed;left:26px;top:50%;transform:translateY(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
@media(max-width:1330px){.mic-col{display:none}}
.onair{
  display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.22em;
  color:#ffb9c0;border:1px solid rgba(255,77,94,.5);border-radius:10px;padding:7px 14px;
  background:rgba(40,10,14,.55);backdrop-filter:blur(8px);text-transform:uppercase;
  box-shadow:0 0 18px rgba(255,77,94,.15);
}
.onair .dot{width:9px;height:9px;border-radius:50%;background:var(--rec);box-shadow:0 0 12px var(--rec);animation:recblink 1.2s ease-in-out infinite}
@keyframes recblink{50%{opacity:.25;box-shadow:none}}
.eq{display:flex;align-items:flex-end;gap:3px;height:30px}
.eq i{width:5px;background:var(--grad);border-radius:3px;animation:eqbar 1s ease-in-out infinite;box-shadow:0 0 8px rgba(56,225,255,.4)}
.eq i:nth-child(1){height:30%;animation-delay:0s}
.eq i:nth-child(2){height:70%;animation-delay:.15s}
.eq i:nth-child(3){height:100%;animation-delay:.3s}
.eq i:nth-child(4){height:55%;animation-delay:.45s}
.eq i:nth-child(5){height:85%;animation-delay:.6s}
.eq i:nth-child(6){height:40%;animation-delay:.75s}
.eq i:nth-child(7){height:65%;animation-delay:.9s}
@keyframes eqbar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.eq.idle i{animation-play-state:paused;transform:scaleY(.2);opacity:.45}
/* ---------- стеклянные панели ---------- */
.page{
  position:relative;flex:1;margin-top:24px;
  background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:18px;padding:28px 30px;
  box-shadow:0 20px 50px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.06) inset;
}
.page::before{
  content:"";position:absolute;top:0;left:24px;right:24px;height:1px;
  background:var(--grad);opacity:.6;border-radius:1px;
}
.page::after{display:none}
.scene .page{margin-top:0;width:100%}
.page h2{
  font-size:.95rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:16px;
}
.page h2::after{content:""}
textarea,input[type=text],input[type=email],input[type=password]{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  border:1px solid var(--line2);border-radius:12px;padding:13px 14px;
  background:rgba(8,10,15,.65);transition:border-color .2s, box-shadow .2s;
}
textarea{min-height:200px;resize:vertical;font-size:1.05rem;line-height:1.7}
textarea::placeholder,input::placeholder{color:var(--dim)}
textarea:focus,input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(56,225,255,.15)}
.row{display:flex;gap:12px;align-items:center;margin-top:16px;flex-wrap:wrap}
button{
  font:inherit;font-size:.95rem;font-weight:700;letter-spacing:.05em;cursor:pointer;
  background:var(--grad);color:#06121a;
  border:0;border-radius:12px;padding:12px 28px;
  box-shadow:0 4px 22px rgba(56,225,255,.3);transition:.2s;
}
button:hover{filter:brightness(1.12);box-shadow:0 4px 30px rgba(56,225,255,.45)}
button:disabled{opacity:.5;cursor:wait;box-shadow:none}
.ghost{background:transparent;color:var(--cyan);border:1px solid var(--cyan-dim);box-shadow:none;padding:11px 20px}
.ghost:hover{border-color:var(--cyan);box-shadow:0 0 14px rgba(56,225,255,.2)}
#result{font-size:1.2rem;white-space:pre-wrap;min-height:1.6em;font-family:'Georgia','PT Serif',serif}
.amb{background:rgba(255,180,84,.16);border-bottom:2px dotted var(--warn);cursor:pointer;border-radius:4px;padding:0 2px}
.unk{border-bottom:2px dotted var(--rec)}
.legend{color:var(--muted);font-size:.88rem;margin-top:14px}
.stats{color:var(--muted);font-size:.9rem;margin-top:10px}
.page a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(56,225,255,.3)}
.page a:hover{border-bottom-color:var(--cyan)}
.pop{position:absolute;background:#141926;border:1px solid var(--line2);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.6);padding:6px;z-index:10;color:var(--ink)}
.pop button{display:block;width:100%;background:none;color:var(--ink);text-align:left;padding:7px 16px;border:0;box-shadow:none;border-radius:8px;font-weight:500}
.pop button:hover{background:rgba(56,225,255,.12);color:var(--cyan)}
section.info{margin-top:30px}
section.info p,section.info li{color:#b8bfcd}
section.info ul{padding-left:24px;margin-top:6px}
code{
  font-family:'JetBrains Mono','SF Mono',Consolas,monospace;font-size:.88em;
  background:rgba(56,225,255,.1);border:1px solid rgba(56,225,255,.18);
  color:var(--cyan);padding:2px 7px;border-radius:6px;
}
footer{
  text-align:center;color:var(--dim);padding:26px 20px;font-size:.85rem;
  border-top:1px solid var(--line);margin-top:30px;background:rgba(8,10,15,.7);backdrop-filter:blur(8px);
}
footer .req{margin-top:8px;color:var(--dim);font-size:.8rem}
footer a{color:var(--muted)}
footer a:hover{color:var(--cyan)}
label.chk{display:flex;gap:9px;align-items:flex-start;color:#b8bfcd;font-size:.92rem;margin-top:10px}
label.chk input{margin-top:4px;accent-color:var(--cyan)}
.field{margin-top:14px}
.field label{display:block;color:var(--muted);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.err{color:#ff8b96;margin-top:10px;font-size:.92rem}
.ok{color:var(--ok);margin-top:10px;font-size:.92rem}
.badge{
  display:inline-block;border:1px solid rgba(61,220,151,.4);color:var(--ok);
  border-radius:20px;padding:3px 16px;font-size:.85rem;font-weight:600;
  background:rgba(61,220,151,.08);box-shadow:0 0 14px rgba(61,220,151,.12);
}
table{width:100%;border-collapse:collapse;margin-top:14px;font-size:.92rem}
th,td{border-bottom:1px solid var(--line);text-align:left;padding:9px 12px}
th{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.doc h3{margin:20px 0 6px;color:var(--cyan);font-size:.9rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.doc p,.doc li{color:#b8bfcd;margin-top:6px}
.doc ol,.doc ul{padding-left:24px}
.dropcap::first-letter{float:none;font-size:inherit;padding:0;color:inherit}
.tabs{display:flex;gap:8px;margin-top:14px}
.tabs button.tab{background:transparent;color:var(--muted);border:1px solid var(--line2);box-shadow:none;padding:9px 22px;font-weight:600}
.tabs button.tab.active{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 14px rgba(56,225,255,.15)}
@media (prefers-reduced-motion: reduce){
  .studio-bg video,.onair .dot,.eq i{animation:none}
}