/* Презентационная страница редактора кода. Работает поверх styles.css сайта. */
:root{--ed-bg:#0a0d15;--ed-line:rgba(255,255,255,.09);--ed-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace}

/* ---------- hero ---------- */
.ed-hero{padding:84px 0 40px;text-align:center}
.ed-hero h1{font-size:clamp(34px,5.6vw,62px);font-weight:800;line-height:1.08;letter-spacing:-1px;margin-bottom:20px}
.ed-hero h1 span{display:block;color:var(--lx-muted);font-weight:700}
.ed-hero p.lead{max-width:640px;margin:0 auto 34px;color:var(--lx-muted);font-size:18px}
.ed-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ed-note{margin-top:16px;font-size:13px;color:var(--lx-muted)}

/* ---------- окно IDE (главный акцент страницы) ---------- */
.ed-stage{position:relative;max-width:1040px;margin:54px auto 0;padding:0 4px}
.ed-stage::before{content:"";position:absolute;inset:8% 6% -6%;background:radial-gradient(60% 60% at 50% 40%,rgba(59,130,246,.38),rgba(168,85,247,.16) 55%,transparent 72%);filter:blur(34px);z-index:0}
.ide{position:relative;z-index:1;text-align:left;background:var(--ed-bg);border:1px solid var(--ed-line);border-radius:16px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03) inset;font-family:var(--ed-mono);font-size:13px}
.ide-bar{display:flex;align-items:center;gap:14px;padding:11px 16px;background:#10141f;border-bottom:1px solid var(--ed-line)}
.dots{display:flex;gap:7px}.dots i{width:11px;height:11px;border-radius:50%;background:#2a3146}
.ide-title{flex:1;text-align:center;color:var(--lx-muted);font-size:12px}
.ide-run{font:600 12px/1 inherit;font-family:inherit;border:0;border-radius:8px;padding:7px 13px;background:linear-gradient(135deg,#3b82f6,#6366f1);color:#fff;transition:transform .15s,box-shadow .3s}
.ide-run.hit{transform:scale(.93);box-shadow:0 0 0 6px rgba(99,102,241,.3)}
.ide-body{display:grid;grid-template-columns:190px 1fr;min-height:400px}
.ide-side{background:#0d111b;border-right:1px solid var(--ed-line);padding:14px 0;color:#8791ad}
.ide-side b{display:block;padding:0 14px 10px;font-weight:500;font-size:11px;color:#5d6785}
.ide-side div{padding:4px 14px 4px 26px;white-space:nowrap}
.ide-side div.dir{padding-left:14px}
.ide-side div.on{background:#171d2e;color:#e6e9f5;box-shadow:inset 2px 0 0 #3b82f6}
.ide-main{display:flex;flex-direction:column;min-width:0}
.ide-tabs{display:flex;background:#0d111b;border-bottom:1px solid var(--ed-line)}
.ide-tabs span{padding:9px 16px;color:#6b7592;border-right:1px solid var(--ed-line)}
.ide-tabs span.on{background:var(--ed-bg);color:#e6e9f5;box-shadow:inset 0 -2px 0 #3b82f6}
.code{margin:0;padding:16px 0;flex:1;overflow:auto;counter-reset:ln;color:#c9d1e8;line-height:1.75}
.code span.l{display:block;padding:0 18px 0 0;white-space:pre}
.code span.l::before{counter-increment:ln;content:counter(ln);display:inline-block;width:42px;margin-right:14px;text-align:right;color:#475070}
.k{color:#c792ea}.s{color:#9ece6a}.f{color:#7aa2f7}.n{color:#ff9e64}.c{color:#566083;font-style:italic}
.term{border-top:1px solid var(--ed-line);background:#080b12;padding:12px 18px 14px;min-height:112px;line-height:1.7;color:#aab3cf}
.term .p{color:#7aa2f7}.term .ok{color:#4fd6a0}
.term .cur{display:inline-block;width:7px;height:14px;background:#aab3cf;vertical-align:-2px;animation:edBlink 1s step-end infinite}
@keyframes edBlink{50%{opacity:0}}

/* ---------- полоса фактов ---------- */
.ed-facts{display:flex;justify-content:center;gap:clamp(24px,6vw,76px);flex-wrap:wrap;padding:64px 0 24px;text-align:center}
.ed-facts b{display:block;font-size:34px;font-weight:800;color:var(--lx-text-strong)}
.ed-facts span{color:var(--lx-muted);font-size:14px}

/* ---------- возможности: строки-спецификация ---------- */
.ed-spec{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:56px;padding:70px 0}
.ed-spec h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;line-height:1.15;margin-bottom:14px}
.ed-spec .intro p{color:var(--lx-muted);max-width:340px}
.ed-spec .intro{position:sticky;top:96px;align-self:start}
.ed-row{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--ed-line)}
.ed-row:last-child{border-bottom:1px solid var(--ed-line)}
.ed-row h3{font-size:17px;font-weight:700;color:var(--lx-text-strong)}
.ed-row p{color:var(--lx-muted);font-size:15px}
.ed-row kbd{font:600 11.5px var(--ed-mono);padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.07);border:1px solid var(--ed-line);color:var(--lx-text-strong);white-space:nowrap}

/* ---------- языки ---------- */
.ed-langs{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:10px 0 80px}
.lang{border:1px solid var(--ed-line);border-radius:20px;padding:30px;background:linear-gradient(160deg,rgba(59,130,246,.09),transparent 60%),var(--lx-card,#10141f)}
.lang h3{font-size:24px;font-weight:800;margin-bottom:6px}
.lang p{color:var(--lx-muted);margin-bottom:18px;font-size:15px}
.lang pre{margin:0;padding:16px 18px;border-radius:12px;background:var(--ed-bg);border:1px solid var(--ed-line);font:13px/1.7 var(--ed-mono);color:#c9d1e8;overflow-x:auto}
.ed-also{grid-column:1/-1;text-align:center;color:var(--lx-muted);font-size:14px}

/* ---------- финал ---------- */
.ed-cta{padding:0 0 120px}
.ed-cta .cta-box h2{max-width:640px;margin-left:auto;margin-right:auto}

@media(max-width:860px){
  .ed-spec{grid-template-columns:1fr;gap:28px}.ed-spec .intro{position:static}
  .ed-langs{grid-template-columns:1fr}
}
@media(max-width:640px){
  .ed-hero{padding-top:56px}
  .ide-body{grid-template-columns:1fr}.ide-side{display:none}
  .ide{font-size:11.5px}.ide-body{min-height:0}
  .ed-row{grid-template-columns:1fr;gap:8px}
}
@media(prefers-reduced-motion:reduce){.term .cur{animation:none}.ide-run{transition:none}}