:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
  --bg: #080909;
  --surface: #151616;
  --ink: #ededeb;
  --muted: #aeb2af;
  --line: #414542;
  --accent: #dfe2dd;
  --accent-ink: #0b0c0b;
  --slate: #101111;
  --slate-ink: #f0f1ec;
  --slate-muted: #a9afaa;
  --slate-line: #4b514c;
  --sel: #292e2a;
  --focus: #fff;
  --display: "IBM Plex Mono", "Courier New", monospace;
  --body: "IBM Plex Sans", Arial, sans-serif;
}

body {
  background-color: var(--bg);
  background-image: radial-gradient(#a1a7a01c .55px, transparent .7px), linear-gradient(120deg, #181b18 0, #080909 39%, #101210 100%);
  background-size: 4px 4px, auto;
  font-size: 15px;
}

.wrap { max-width: 1320px; padding-inline: 34px; }

.hero { position: relative; padding: 0 0 34px; overflow: hidden; border-bottom: 1px solid #555b56; }
.hero::before { content: ""; pointer-events: none; position: absolute; inset: 0; opacity: .27; background: repeating-linear-gradient(103deg, transparent 0 161px, #69716a 162px, transparent 163px); }
.hero .wrap { position: relative; }
.brand { min-height: 80px; margin: 0; gap: 20px; border-bottom: 1px solid var(--line); color: var(--muted); font: 11px/1.35 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.hero-code { display: flex; justify-content: space-between; margin: 13px 0 28px; color: #aeb4ae; font: 10px/1.2 var(--display); letter-spacing: .08em; }
.hero-main { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: 24px; align-items: center; min-height: 460px; }
.hero-copy { max-width: 840px; position: relative; z-index: 1; }
.hero h1 { max-width: 13ch; margin: 0 0 27px; font-size: clamp(42px, 5.15vw, 73px); font-weight: 600; line-height: 1.07; letter-spacing: -.075em; text-transform: uppercase; }
.hero p.lead { max-width: 69ch; margin: 0; color: #cbd0ca; font: 16px/1.6 var(--body); }
.signal { min-width: 0; min-height: 460px; align-self: stretch; position: relative; display: grid; place-items: center; border-left: 1px solid #555b56; overflow: hidden; }
.signal--webgl { background: transparent; }
.signal canvas { display: block; position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; cursor: grab; }
.signal canvas.is-dragging { cursor: grabbing; }
.signal--webgl .signal-orb { display: none; }
.signal-orb { width: min(31vw, 380px); aspect-ratio: 1; border-radius: 50%; position: relative; z-index: 1; background: radial-gradient(circle at 36% 28%, #c8cec41a, transparent 34%), repeating-radial-gradient(ellipse at 58% 62%, #d3ddd0 0 1px, #111 1px 4px, #8c968a 4px 5px, #111 5px 8px); box-shadow: inset 18px 0 35px #000, inset -20px -20px 50px #000, 0 0 40px #d6ded113; transform: rotate(-14deg) scaleY(.84); opacity: .78; }
.signal-orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-linear-gradient(0deg, transparent 0 4px, #090a09 5px 6px), radial-gradient(circle at 26% 19%, transparent 12%, #090a0999 78%); }
.formula { gap: 0; margin-top: 32px; padding-block: 13px; border-top: 1px solid #575d57; border-bottom: 1px solid #575d57; font: 11px/1.45 var(--display); text-transform: uppercase; letter-spacing: .045em; }
.formula span.t, .formula span.eq { padding: 7px 9px; border: 0; border-radius: 0; background: none; color: var(--ink); }
.formula span.eq { background: var(--accent); color: var(--accent-ink); }
.formula span.op { padding-inline: 6px; color: #b6beb5; }

.grid { grid-template-columns: minmax(0, 1fr) 370px; gap: 24px; padding-top: 24px; }
.step { position: relative; margin-bottom: 12px; padding: 28px 32px 32px; border-radius: 3px; background: #151716; box-shadow: inset 0 1px #ffffff0b; }
.step::after { content: ""; position: absolute; right: 10px; top: 10px; width: 18px; height: 18px; border-top: 1px solid #6c746b; border-right: 1px solid #6c746b; opacity: .6; pointer-events: none; }
.step-h { gap: 15px; align-items: center; margin-bottom: 12px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.step-n { width: 35px; height: 35px; border: 1px solid #aab2a9; border-radius: 0; background: none; color: var(--ink); font: 500 14px var(--display); transform: none; }
.step h2 { font: 500 clamp(19px, 2vw, 25px)/1.25 var(--display); letter-spacing: -.055em; text-transform: uppercase; }
.step .hint { margin: 0 0 20px 50px; color: var(--muted); }
.q > .ql { font: 500 13px/1.45 var(--display); letter-spacing: -.02em; }
.q > .qs { color: var(--muted); }
.chip span { padding: 9px 12px; border-radius: 2px; background: #1a1d1b; font: 12px/1.45 var(--display); }
.chip input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.opts, .cx { gap: 8px; }
.opt, .cxc { border-radius: 2px; background: #191c19; }
.opt { padding: 15px; }
.opt b { font: 500 13px/1.4 var(--display); letter-spacing: -.03em; }
.opt small, .cxc p { color: var(--muted); }
.opt:has(input:checked), .cxc:has(input:checked) { border-color: #a8b0a6; background: var(--sel); box-shadow: inset 2px 0 0 #dce2d9; }
.num, .field input, .field textarea, .studio input { border-radius: 2px; background: #1b1e1b; }
.stepper { border-radius: 2px; }
.stepper button:hover { background: #353b35; }
.stepper output, .durout { font-family: var(--display); }
.explain { border: 1px solid var(--line); border-radius: 2px; background: #101210; }
.explain h3, .scale b { font-family: var(--display); }
.scale div { border: 1px solid var(--line); border-radius: 2px; background: #1a1d1a; }
.cxc input { border-radius: 0; }
.lvl i, .stg h3 i { border-radius: 0; }
.lvl i.on { background: var(--ink); }
.warn, .share { border-radius: 0; }
.warn { border-left: 2px solid var(--ink); }
.warn b, .real b, .must b { font-family: var(--display); }

.slate-col { top: calc(env(safe-area-inset-top, 0px) + 24px); }
.slate { border-radius: 3px; background: #0e100f; box-shadow: 0 0 0 6px #080908, 0 0 0 7px #4b514c; }
.clap { height: 34px; transform: none; border: 0; background: #262b27; position: relative; }
.clap::before { content: "ПРИМЕР СМЕТЫ  /  001"; position: absolute; left: 18px; top: 10px; color: #eff0e9; font: 10px/1 var(--display); letter-spacing: .01em; }
.clap.snap { animation: none; }
.slate-in { padding: 25px 23px 27px; }
.sl-top span, .range, .facts small, .legend, .note { color: var(--slate-muted); }
.sl-top span { font: 11px/1.4 var(--display); text-transform: uppercase; }
.cur { border-radius: 0; }
.cur button { font-family: var(--display); }
.price { font: 600 clamp(40px, 4vw, 53px)/1 var(--display); letter-spacing: -.075em; }
.real { border-radius: 0; }
.real b { letter-spacing: -.05em; }
.facts b { font-family: var(--display); }
.bars { border-radius: 0; gap: 2px; }
.bars .c-pre { flex: 41; }.bars .c-shoot { display: none; }.bars .c-gen { flex: 15; }.bars .c-post { flex: 26; }.bars .c-mgmt { flex: 18; }
.c-pre { background: #e2e5df; }.c-gen { background: #9da99e; }.c-post { background: #737f74; }.c-mgmt { background: #535f55; }.c-shoot { background: #b9c4b8; }
.legend i { border-radius: 0; }
.detail summary, .faq summary { font-family: var(--display); font-weight: 500; }
.must { border: 1px solid #788177; border-radius: 0; background: #222823; color: var(--ink); }
.btn { border-radius: 2px; font-family: var(--display); font-size: 12px; font-weight: 600; }
.btn-a:hover { filter: brightness(.9); }
.btn-g:hover { border-color: var(--ink); }
.prototype .btn:disabled { opacity: .55; cursor: default; }
.copied { color: var(--ink); }
.tbl .sg, .tbl .tot { font-family: var(--display); }
.how, .faq { border-top: 1px solid var(--line); }
.how h2, .faq h2 { font-family: var(--display); text-transform: uppercase; letter-spacing: -.06em; }
.stages { border-top: 1px solid var(--line); }
.stg { border-right: 1px solid var(--line); padding: 20px 16px; }
.stg:last-child { border-right: 0; }
.stg h3 { font: 500 14px/1.4 var(--display); }
.mbar { border-top: 1px solid var(--line); box-shadow: none; }
.mbar b { font-family: var(--display); }
.mbar a { border-radius: 2px; font-family: var(--display); font-size: 12px; }

@media (max-width: 980px) {
  .grid { grid-template-columns: 1fr; }
  .slate-col { position: static; }
  .hero-main { grid-template-columns: minmax(0, 1fr) 300px; min-height: 360px; }
  .signal { min-height: 360px; }
  .signal-orb { width: 280px; }
}

@media (max-width: 700px) {
  .wrap { padding-inline: 18px; }
  .brand { min-height: 68px; flex-direction: row; align-items: center; margin-bottom: 0; }
  .brand > span:last-child { max-width: 170px; text-align: right; font-size: 9px; }
  .hero-code { margin: 12px 0 21px; }
  .hero-main { display: block; min-height: 0; }
  .hero h1 { font-size: clamp(37px, 10vw, 56px); line-height: 1.07; margin-bottom: 19px; }
  .hero p.lead { font-size: 14px; line-height: 1.55; }
  .signal { display: none; }
  .formula { margin-top: 24px; font-size: 10px; }
  .grid { padding-top: 17px; }
  .step { padding: 23px 17px 26px; }
  .step .hint { margin-left: 0; }
  .stg { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px 0; }
}