/* DD3D. Цвета взяты с логотипа: графит стола и светящийся бирюзовый пластик. */
:root {
  --plate: #171a21;      /* фон, как вокруг логотипа */
  --deck: #1f232c;       /* поверхности */
  --deck-2: #262b35;
  --rail: #313744;       /* линии и рамки */
  --print: #1fd9e6;      /* пластик из логотипа */
  --print-dim: rgba(31, 217, 230, .14);
  --ink: #eaf2f5;
  --haze: #8d98a7;
  --fault: #ff8a7a;
  --ok: #6fe3a0;
  --head: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --body: "Onest", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --spring: cubic-bezier(.34, 1.36, .5, 1); /* как spring 0.8 с из framer-motion */
}
* { box-sizing: border-box }
html { color-scheme: dark; -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--plate); color: var(--ink); font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased }
a { color: var(--print) }
button, input, textarea { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--print); outline-offset: 2px }

.page { max-width: 920px; margin: 0 auto; padding: 36px 20px 72px }

/* шапка */
.top { display: flex; align-items: center; gap: 20px; margin-bottom: 34px }
.top img { width: 76px; height: 76px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px var(--rail), 0 0 36px rgba(31, 217, 230, .18) }

/* название: Random Letter Swap */
.swap { display: inline-flex; margin: 0; font: 600 clamp(38px, 7vw, 58px)/1.1 var(--head); letter-spacing: .02em;
  color: var(--print); filter: drop-shadow(0 0 14px rgba(31, 217, 230, .35)); cursor: default; outline-offset: 6px; border-radius: 6px }
.swap .slot { position: relative; display: inline-flex; overflow: hidden }
.swap .a { display: block; transition: transform .8s var(--spring) var(--d, 0s) }
.swap .b { position: absolute; left: 0; right: 0; top: 100%; transition: top .8s var(--spring) var(--d, 0s) }
.swap .slot.up .a { transform: translateY(-100%) }
.swap .slot.up .b { top: 0 }

/* подпись: Typewriter */
.typer { margin: 4px 0 0; font: 500 clamp(16px, 2.4vw, 20px)/1.4 var(--body); color: var(--haze); min-height: 1.4em }
.typer .typed { color: var(--ink) }
.typer .cursor { color: var(--print); margin-left: .12em; animation: blink .82s steps(1) infinite }
@keyframes blink { 50% { opacity: 0 } }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 }

.lead { margin: 0 0 22px }
.lead h2 { font: 500 clamp(20px, 3vw, 26px)/1.25 var(--head); margin: 0 0 6px }
.lead p { margin: 0; color: var(--haze); max-width: 62ch }

/* способы добавить модель */
.modes { display: flex; gap: 4px; margin-bottom: 14px; padding: 4px; width: fit-content; max-width: 100%;
  background: rgba(15, 19, 24, .55); border: 1px solid rgba(255, 255, 255, .07); border-radius: 999px }
.modes button { background: none; border: 0; padding: 8px 16px; border-radius: 999px; color: var(--haze); font-weight: 500; cursor: pointer;
  white-space: nowrap; transition: color .3s, background .2s }

/* стол принтера: главный элемент страницы */
.bed {
  position: relative; min-height: 340px; border-radius: 18px; overflow: hidden;
  display: grid; place-items: center; padding: 44px 28px;
  background:
    radial-gradient(circle at 50% 120%, rgba(31, 217, 230, .07), transparent 60%),
    radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.4px) 0 0 / 7px 7px,           /* текстура PEI */
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 10% 10%,              /* сетка стола */
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 10% 10%,
    #13161c;
  border: 1px solid var(--rail);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.bed.over { border-color: var(--print); box-shadow: inset 0 0 0 1px var(--print), 0 0 40px rgba(31, 217, 230, .12) }
.bed .tick { position: absolute; width: 18px; height: 18px; border-color: var(--haze); border-style: solid; opacity: .6 }
.bed .tl { top: 12px; left: 12px; border-width: 2px 0 0 2px }
.bed .tr { top: 12px; right: 12px; border-width: 2px 2px 0 0 }
.bed .bl { bottom: 12px; left: 12px; border-width: 0 0 2px 2px }
.bed .br { bottom: 12px; right: 12px; border-width: 0 2px 2px 0 }
.bed .scale { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--haze); opacity: .8; white-space: nowrap }
.bed-in { position: relative; text-align: center; width: 100%; max-width: 520px }
.bed-in[hidden] { display: none }
.bed h2 { font: 500 clamp(19px, 3vw, 24px)/1.25 var(--head); margin: 0 0 8px }
.bed .formats { color: var(--haze); font-size: 15px; margin: 12px 0 0 }

.busy { display: flex; flex-direction: column; align-items: center; gap: 6px }
.busy svg { color: var(--print); filter: drop-shadow(0 0 14px rgba(31, 217, 230, .35)); max-width: 62vw; height: auto }
.busy b { font: 500 17px/1.3 var(--head) }
.busy span { color: var(--haze); font-size: 15px }

/* поля и кнопки */
.btn { border: 0; border-radius: 12px; padding: 12px 20px; font-weight: 600; cursor: pointer; background: var(--print); color: #062a2e; white-space: nowrap; transition: transform .12s var(--ease), filter .2s }
.btn:hover { filter: brightness(1.08) }
.btn:active { transform: scale(.97) }
.btn:disabled { opacity: .5; cursor: default; transform: none }
.btn.quiet { background: var(--deck-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rail) }
.field { width: 100%; background: var(--deck); border: 1px solid var(--rail); border-radius: 12px; padding: 12px 14px; outline: none; transition: border-color .15s }
.field:focus { border-color: var(--print) }
textarea.field { min-height: 88px; resize: vertical }
.line { display: flex; gap: 10px; align-items: center }
.line > .field { flex: 1; min-width: 0 }
.dims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: left }
.dims label { font-size: 14px; color: var(--haze); display: grid; gap: 4px }
.hint { color: var(--haze); font-size: 15px; margin: 12px 0 0 }

.found { margin-top: 14px; display: grid; gap: 6px; text-align: left }
.found .title { font-weight: 600; margin-bottom: 2px }
.found label { display: flex; gap: 10px; align-items: center; background: var(--deck); border-radius: 10px; padding: 9px 12px; cursor: pointer }
.found label span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.found small { color: var(--haze) }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--print); flex: none }

/* модели */
.models { margin-top: 14px; display: grid; gap: 2px }
.model { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--rail) }
.model .ic { color: var(--print); display: grid; place-items: center }
.model .ic.err { color: var(--fault) }
.model .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.model .st { font-size: 15px; color: var(--haze) }
.model .st.err { color: var(--fault) }
.model .st.ok { color: var(--ink) }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--rail); border-radius: 10px; overflow: hidden }
.qty button { background: none; border: 0; width: 34px; height: 36px; cursor: pointer; font-size: 18px; color: var(--haze) }
.qty button:hover { color: var(--ink); background: var(--deck) }
.qty input { width: 42px; height: 36px; background: none; border: 0; text-align: center; outline: none; -moz-appearance: textfield }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none }
.rm { background: none; border: 0; color: var(--haze); font-size: 22px; line-height: 1; padding: 6px; cursor: pointer; border-radius: 8px }
.rm:hover { color: var(--fault) }

/* настройки печати */
section { margin-top: 20px }
section > h2 { font: 500 20px/1.3 var(--head); margin: 0 0 16px }
.group { margin-bottom: 22px }
.group > p { margin: 0 0 10px; font-weight: 600 }
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chip { position: relative; cursor: pointer }
.chip input { position: absolute; opacity: 0; pointer-events: none }
.chip span { display: block; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--rail); background: var(--deck); transition: background .15s, border-color .15s, color .15s }
.chip:hover span { border-color: var(--haze) }
.chip input:checked + span { background: var(--print-dim); border-color: var(--print); color: var(--ink) }
.chip input:focus-visible + span { outline: 2px solid var(--print); outline-offset: 2px }
.note { color: var(--haze); font-size: 15px; margin: 10px 0 0; min-height: 1.5em }

.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--deck); border: 1px solid var(--rail); border-radius: 12px; padding: 3px; max-width: 100% }
.seg label { cursor: pointer; position: relative }
.seg input { position: absolute; opacity: 0; pointer-events: none }
.seg span { display: block; text-align: center; padding: 8px 18px; border-radius: 9px; color: var(--haze); font-weight: 500; white-space: nowrap }
.seg input:checked + span { background: var(--deck-2); color: var(--ink); box-shadow: 0 0 0 1px var(--rail) }
.seg input:focus-visible + span { outline: 2px solid var(--print) }

.switch { display: flex; gap: 12px; align-items: center; cursor: pointer; width: fit-content }
.switch input { position: absolute; opacity: 0 }
.switch i { width: 42px; height: 24px; border-radius: 999px; background: var(--deck-2); box-shadow: inset 0 0 0 1px var(--rail); position: relative; transition: background .2s; flex: none }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--haze); transition: transform .22s var(--ease), background .2s }
.switch input:checked + i { background: var(--print-dim); box-shadow: inset 0 0 0 1px var(--print) }
.switch input:checked + i::after { transform: translateX(18px); background: var(--print) }
.switch input:focus-visible + i { outline: 2px solid var(--print); outline-offset: 2px }

/* цена */
.cost { margin-top: 28px; padding-top: 24px; border-top: 2px solid var(--print) }
.cost-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px }
.price { font: 600 clamp(40px, 9vw, 64px)/1 var(--head); letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.facts { color: var(--haze); margin-top: 10px }
.promo { width: 220px }
.promo-note { font-size: 15px; margin: 12px 0 0 }
.promo-note.ok { color: var(--ok) }
.promo-note.warn { color: #ffc46b }
.fine { color: var(--haze); font-size: 15px; margin: 14px 0 0 }
.order { margin-top: 22px }
.order form { display: grid; gap: 10px; max-width: 560px }
.order .line { flex-wrap: wrap }
.sent { font: 500 18px/1.4 var(--head); color: var(--print) }

footer { margin-top: 64px; color: var(--haze); font-size: 15px }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); max-width: calc(100% - 32px); z-index: 10;
  background: #2a1f22; border: 1px solid var(--fault); padding: 12px 18px; border-radius: 12px }
.toast[hidden] { display: none }

@media (max-width: 600px) {
  body { font-size: 16px }
  .page { padding: 24px 16px 56px }
  .top { gap: 14px; align-items: flex-start }
  .top img { width: 54px; height: 54px }
  .bed { min-height: 300px; padding: 40px 16px }
  .model { grid-template-columns: 22px 1fr auto; row-gap: 8px }
  .model .qty { grid-column: 2 }
  .model .rm { grid-row: 1; grid-column: 3 }
  .seg { display: grid; width: 100% }
  .seg span { padding: 8px 6px }
  .promo { width: 100% }
  .cost-row > div { width: 100% }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important }
  .typer .cursor { animation: none }
}
.dims-go { margin-top: 14px }
.model .ic { font-weight: 700 }
.bed h2 + .btn { margin-top: 10px }
.model .qty { justify-self: start }

/* фон Fluid Field (bg.js) */
#fluid { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none }
.supports-note { margin-top: 0 }

/* блоки под калькулятором */
.intro { color: var(--haze); margin: -6px 0 18px; max-width: 62ch }
.parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0 32px }
.part { padding: 16px 0; border-top: 1px solid var(--rail) }
.part b { display: block; font-weight: 600; margin-bottom: 4px }
.part p { margin: 0; color: var(--haze); font-size: 15px }

/* «Как выбрать пластик»: карточка перелистывается вокруг края, как страница */
.chip-btn { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--rail); background: var(--deck); cursor: pointer;
  transition: background .15s, border-color .15s }
.chip-btn:hover { border-color: var(--haze) }
.chip-btn[aria-selected=true] { background: var(--print-dim); border-color: var(--print) }
.leaf-stage { perspective: 1600px; margin-top: 16px }
.leaf { background: rgba(31, 35, 44, .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--rail); border-radius: 18px; padding: 24px; backface-visibility: hidden; will-change: transform }
.leaf.out-next { transform-origin: left center; animation: leaf-out-next .26s cubic-bezier(.55, 0, .75, .2) forwards }
.leaf.in-next { transform-origin: right center; animation: leaf-in-next .36s var(--ease) }
.leaf.out-prev { transform-origin: right center; animation: leaf-out-prev .26s cubic-bezier(.55, 0, .75, .2) forwards }
.leaf.in-prev { transform-origin: left center; animation: leaf-in-prev .36s var(--ease) }
@keyframes leaf-out-next { to { transform: rotateY(-88deg); opacity: .3 } }
@keyframes leaf-in-next { from { transform: rotateY(88deg); opacity: .3 } }
@keyframes leaf-out-prev { to { transform: rotateY(88deg); opacity: .3 } }
@keyframes leaf-in-prev { from { transform: rotateY(-88deg); opacity: .3 } }
.leaf-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap }
.leaf h3 { font: 600 clamp(20px, 3.4vw, 26px)/1.2 var(--head); margin: 0; color: var(--print) }
.leaf .about { margin: 12px 0 20px; max-width: 64ch }
.rates { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 28px; margin-bottom: 22px }
.rate { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 15px; color: var(--haze) }
.rate i { display: flex; gap: 4px }
.rate b { width: 18px; height: 6px; border-radius: 3px; background: var(--rail) }
.rate b.on { background: var(--print); box-shadow: 0 0 8px rgba(31, 217, 230, .45) }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
.col h4 { margin: 0 0 8px; font-size: 15px; font-weight: 600 }
.col ul { margin: 0; padding-left: 18px; color: var(--haze); font-size: 15px }
.col li { margin: 3px 0 }
.pros h4 { color: var(--ok) }
.cons h4 { color: #ffc46b }
.uses h4 { color: var(--print) }

/* примеры работ */
.works { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px }
.work { margin: 0; background: var(--deck); border: 1px solid var(--rail); border-radius: 14px; overflow: hidden }
.work img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover }
.work figcaption { padding: 12px 14px; display: grid; gap: 2px }
.work figcaption span { color: var(--haze); font-size: 15px }

@media (max-width: 600px) {
  .cols { grid-template-columns: 1fr }
  .leaf { padding: 18px }
}

/* стеклянные карточки (glassmorphism): фон Fluid Field просвечивает через матовое стекло */
.glass {
  position: relative; padding: 28px; border-radius: 24px;
  background: linear-gradient(160deg, rgba(38, 44, 56, .52), rgba(23, 26, 33, .42));
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 60px -30px rgba(0, 0, 0, .7);
}
.glass > h2:first-child, .glass > .lead:first-child h2 { margin-top: 0 }
.glass .leaf { background: rgba(23, 26, 33, .5); -webkit-backdrop-filter: none; backdrop-filter: none }
.glass .bed { background-color: rgba(19, 22, 28, .82) }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(31, 35, 44, .94) }
}

/* StarBorder: кнопки запуска расчёта */
.star-border {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  margin: 0; padding: 12px 22px; border: 0; border-radius: var(--star-border-radius);
  background: #0f1318; color: var(--ink); font-weight: 600; line-height: 1.25; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; cursor: pointer;
}
.star-border::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  box-shadow: inset 0 0 0 var(--star-border-thickness) rgba(31, 217, 230, .22); pointer-events: none }
.star-border__light { position: absolute; top: -48px; left: -48px; z-index: -1; width: calc(100% + 96px); height: calc(100% + 96px); pointer-events: none }
.star-border:focus-visible { outline: 2px solid var(--print); outline-offset: 3px }
.star-border:disabled { cursor: not-allowed; opacity: .5 }
.bed h2 + .cta { margin-top: 10px }

/* DepthCarousel: примеры работ */
.works, .works.depth-carousel { height: 460px; display: block }
.depth-carousel { position: relative; width: 100%; height: 100%; min-height: 320px; display: flex; align-items: center; justify-content: center;
  perspective: var(--dc-perspective, 1400px); perspective-origin: 50% 50%; touch-action: pan-y; outline: none;
  user-select: none; -webkit-user-select: none; cursor: grab; overflow: hidden; border-radius: 16px }
.depth-carousel:active { cursor: grabbing }
.depth-carousel:focus-visible { outline: 2px solid var(--print); outline-offset: 4px }
.depth-carousel__stage { position: absolute; inset: 0; transform-style: preserve-3d }
.depth-carousel__card { position: absolute; top: 50%; left: 50%; transform-origin: center center; overflow: hidden; background: #0b0d12;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .65), 0 8px 20px -10px rgba(0, 0, 0, .5); will-change: transform, opacity, filter;
  cursor: pointer; transform: translate(-50%, -50%) }
.depth-carousel__img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none }
.depth-carousel__tint { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: multiply }
.depth-carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3000; width: 42px; height: 42px;
  display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(18, 20, 26, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease }
.depth-carousel__arrow:hover { background: rgba(28, 31, 40, .85); border-color: var(--print) }
.depth-carousel__arrow:active { transform: translateY(-50%) scale(.94) }
.depth-carousel__arrow--prev { left: 12px }
.depth-carousel__arrow--next { right: 12px }
.depth-carousel__dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 3000; display: flex; gap: 8px;
  padding: 8px 12px; border-radius: 999px; background: rgba(14, 16, 22, .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px) }
.depth-carousel__dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 999px; background: rgba(255, 255, 255, .32);
  cursor: pointer; transition: width .25s ease, background .25s ease }
.depth-carousel__dot.is-active { width: 20px; background: var(--print) }
.work-caption { display: grid; gap: 2px; text-align: center; margin: 14px 0 0; min-height: 3em }
.work-caption span { color: var(--haze); font-size: 15px }

@media (max-width: 600px) {
  .glass { padding: 20px 16px; border-radius: 20px }
  .works, .works.depth-carousel { height: 400px }
}
@media (prefers-reduced-motion: reduce) {
  .depth-carousel__card { will-change: auto }
}

/* плавная прокрутка к блокам (меню и ссылки-подсказки) */
html { scroll-behavior: smooth }
section, .settings { scroll-margin-top: 18px }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }

/* GooeyNav: тянучая плашка и частицы (gooey.js) */
.goo { position: relative }
.goo > button, .goo > a { position: relative; z-index: 1 }
.goo-filter { position: absolute; z-index: 0; pointer-events: none; display: grid; place-items: center; filter: url(#goo) }
.goo-filter::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px; background: var(--print);
  transform: scale(0); opacity: 0 }
.goo-filter.on::after { animation: goo-pill .5s var(--goo-wobble, ease) both }
.goo-filter.burst::after { border-radius: 16px; animation: goo-flash .7s ease-out both }
@keyframes goo-pill { from { transform: scale(0); opacity: 0 } to { transform: scale(1); opacity: 1 } }
@keyframes goo-flash { 0% { transform: scale(.7); opacity: 0 } 25% { transform: scale(1.03); opacity: .55 } 100% { transform: scale(1.12); opacity: 0 } }
.goo-particle, .goo-point { display: block; opacity: 0; width: 18px; height: 18px; border-radius: 100%; transform-origin: center }
.goo-particle { position: absolute; top: calc(50% - 9px); left: calc(50% - 9px); animation: goo-particle var(--time) ease 1 -350ms }
.goo-point { background: var(--color); opacity: 1; animation: goo-point var(--time) ease 1 -350ms }
@keyframes goo-particle {
  0% { transform: rotate(0deg) translate(var(--start-x), var(--start-y)); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .45) }
  70% { transform: rotate(calc(var(--rotate) * .5)) translate(calc(var(--end-x) * 1.2), calc(var(--end-y) * 1.2)); opacity: 1; animation-timing-function: ease }
  85% { transform: rotate(calc(var(--rotate) * .66)) translate(var(--end-x), var(--end-y)); opacity: 1 }
  100% { transform: rotate(calc(var(--rotate) * 1.2)) translate(calc(var(--end-x) * .5), calc(var(--end-y) * .5)); opacity: 1 }
}
@keyframes goo-point {
  0% { transform: scale(0); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45) }
  25% { transform: scale(calc(var(--scale) * .25)) }
  38% { opacity: 1 }
  65% { transform: scale(var(--scale)); opacity: 1; animation-timing-function: ease }
  85% { transform: scale(var(--scale)); opacity: 1 }
  100% { transform: scale(0); opacity: 0 }
}
/* активный пункт: плашка под ним, тёмный текст; наведение — лёгкая подсветка; нажатие — сжатие */
.goo > .is-active { color: #062a2e !important; background: transparent !important; border-color: transparent !important }
.chip-btn, .modes button, .side-nav a { transition: color .3s, background .2s, border-color .2s, transform .12s var(--ease) }
.chip-btn:not(.is-active):hover, .modes button:not(.is-active):hover, .side-nav a:not(.is-active):hover {
  color: var(--ink); background: rgba(31, 217, 230, .1); border-color: rgba(31, 217, 230, .4) }
.chip-btn:active, .modes button:active, .side-nav a:active, .goo-btn:active { transform: scale(.96) }
.btn.goo-btn:hover { box-shadow: 0 0 0 1px rgba(31, 217, 230, .5), 0 0 22px rgba(31, 217, 230, .25) }

/* боковое меню: стеклянная рамка, едет вместе со страницей */
.side-nav { position: fixed; z-index: 50; left: 24px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 4px;
  padding: 8px; border-radius: 22px; background: linear-gradient(160deg, rgba(38, 44, 56, .55), rgba(23, 26, 33, .45));
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 20px 50px -24px rgba(0, 0, 0, .8) }
.side-nav a { padding: 9px 16px; border-radius: 999px; color: var(--haze); text-decoration: none; font-weight: 500; font-size: 15px;
  white-space: nowrap; border: 1px solid transparent }
@media (max-width: 1320px) {
  /* узкий экран: меню — панель внизу, листается вбок */
  .side-nav { left: 50%; top: auto; bottom: 12px; transform: translateX(-50%); flex-direction: row; max-width: calc(100% - 24px);
    overflow-x: auto; scrollbar-width: none; padding: 6px }
  .side-nav::-webkit-scrollbar { display: none }
  .side-nav a { padding: 8px 14px; font-size: 14px }
  .page { padding-bottom: 110px }
}

/* настройки внутри блока расчёта */
.settings { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .08) }
.settings h3 { font: 500 20px/1.3 var(--head); margin: 0 0 16px }
.glabel { margin: 0 0 10px; font-weight: 600 }
.help { display: inline-block; margin-top: 12px; font-size: 15px; color: var(--print); text-decoration: none;
  border-bottom: 1px dashed rgba(31, 217, 230, .5) }
.help:hover { border-bottom-style: solid }
.dims-go { margin-top: 14px }

/* карточки качества: схематичный разрез — линии слоёв и стенки по бокам */
.qcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.qcard { position: relative; display: grid; gap: 4px; align-content: start; text-align: left; padding: 14px; border-radius: 16px;
  border: 1px solid var(--rail); background: rgba(15, 19, 24, .55); color: var(--ink); cursor: pointer;
  transition: border-color .2s, background .2s, transform .12s var(--ease), box-shadow .2s }
.qcard:hover { border-color: rgba(31, 217, 230, .45); background: rgba(31, 217, 230, .06) }
.qcard.is-active { border-color: var(--print); background: var(--print-dim); box-shadow: inset 0 0 0 1px var(--print) }
.qcard b { font-weight: 600; font-size: 17px }
.qcard span { color: var(--haze); font-size: 14px; line-height: 1.4 }
.qcard small { color: var(--print); font-size: 13px; margin-top: 4px }
.qcard .layers { height: 34px; margin-bottom: 8px; border-radius: 6px; background: repeating-linear-gradient(to top, rgba(31, 217, 230, .55) 0 1px, transparent 1px var(--lh, 5px));
  box-shadow: inset var(--w, 4px) 0 0 rgba(31, 217, 230, .45), inset calc(-1 * var(--w, 4px)) 0 0 rgba(31, 217, 230, .45) }

/* «Как выбрать качество»: таблица параметров профиля */
.specs { border-collapse: collapse; margin: 0 0 22px; font-size: 15px; min-width: min(100%, 360px) }
.specs th { text-align: left; font-weight: 400; color: var(--haze); padding: 6px 24px 6px 0; border-bottom: 1px solid var(--rail) }
.specs td { padding: 6px 0; border-bottom: 1px solid var(--rail); font-weight: 600 }

@media (max-width: 700px) {
  .qcards { grid-template-columns: 1fr }
  .qcard { grid-template-columns: 70px 1fr; column-gap: 12px }
  .qcard .layers { grid-row: span 3; height: 100%; min-height: 54px; margin: 0 }
}

/* DD3D, переплывающий частицами к верху экрана (scroll.js) */
#morph { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60 }
.mini-brand { position: fixed; z-index: 55; top: 12px; left: 50%; transform: translateX(-50%); padding: 6px 18px; border-radius: 999px;
  text-decoration: none; opacity: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(38, 44, 56, .6), rgba(23, 26, 33, .5));
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 12px 30px -16px rgba(0, 0, 0, .8) }
.mini-brand.on { pointer-events: auto }
.mini-brand span { display: block; font: 600 22px/1.2 var(--head); letter-spacing: .02em; color: var(--print);
  filter: drop-shadow(0 0 10px rgba(31, 217, 230, .4)) }
.mini-brand:focus-visible { outline: 2px solid var(--print); outline-offset: 3px }