/* ============ МОДЕЛЬ ============ */
.model{padding-block:var(--s5) var(--sec)}
.toggle{display:flex;align-items:center;justify-content:center;gap:clamp(22px,3vw,54px)}
.sil{background:none;border:0;cursor:pointer;padding:var(--s1);line-height:0;
  transition:opacity var(--fast),transform var(--fast),filter var(--fast)}
.sil svg{width:clamp(104px,11.5vw,168px);height:auto;display:block;color:var(--mint2)}
.sil[data-on="false"]{opacity:.45}
.sil[data-on="false"]:hover{opacity:.8;transform:translateY(-2px)}
.sil[data-on="true"]{filter:drop-shadow(0 0 12px rgba(187,255,222,.3))}
.knob{flex:none;width:clamp(54px,5.3vw,78px);height:clamp(29px,2.8vw,41px);border-radius:999px;
  border:2px solid var(--mint2);background:rgba(10,26,32,.35);cursor:pointer;position:relative;overflow:hidden;
  padding:0;transition:border-color var(--fast),box-shadow var(--fast)}
.knob:hover{border-color:var(--mint);box-shadow:0 0 18px rgba(187,255,222,.28)}
.knob .hatch{position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,rgba(128,199,165,.5) 0 4px,transparent 4px 9px);
  transition:transform .42s var(--ease)}
.knob[aria-checked="true"] .hatch{transform:translateX(-12px)}
.knob .dot{position:absolute;top:50%;left:3px;transform:translateY(-50%);
  width:calc(clamp(29px,2.8vw,41px) - 10px);aspect-ratio:1;border-radius:50%;background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.4);transition:left .42s var(--ease)}
.knob[aria-checked="true"] .dot{left:calc(100% - clamp(29px,2.8vw,41px) + 7px)}
.tlabel{text-align:center;font-size:var(--t-micro);letter-spacing:.42em;text-transform:uppercase;
  color:var(--white);opacity:.8;margin-top:var(--s3);padding-left:.42em}
.stagewrap{position:relative;margin-top:var(--s5)}
.stage{position:relative;isolation:isolate;overflow:hidden;border-radius:clamp(12px,1.4vw,20px)}
.stage .stripes{position:absolute;left:50%;width:110%;top:-4%;bottom:-4%;z-index:1;pointer-events:none;
  will-change:transform;transform:translateX(-50%);
  background:repeating-linear-gradient(115deg,rgba(128,199,165,.22) 0 50px,transparent 50px 162px)}
.subs{position:relative;z-index:3;aspect-ratio:3530/540;will-change:transform}
/* слой масштабирования: живой, вместе с метками отсеков */
.zpan{position:absolute;inset:0;transform-origin:0 0;will-change:transform;
  transition:transform .34s var(--ease)}
.zpan.nt{transition:none}
.subs img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.45));transition:opacity .6s ease}
.subs img.off{opacity:0}
.stage.rise .subs{animation:surface 1.25s var(--ease) both}
@keyframes surface{from{opacity:0;transform:translateY(52px) rotate(-.6deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.stage.rise .subs{animation:none}}
.marks{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;transition:opacity .45s}
.marks.on{opacity:1}
.marks.on .mk{pointer-events:auto}
.mk{position:absolute;transform:translate(-50%,-50%);width:clamp(25px,2.2vw,33px);aspect-ratio:1;
  border-radius:50%;border:1.5px solid var(--mint);background:rgba(10,26,32,.8);color:var(--mint);
  font-weight:700;font-size:var(--t-xs);display:grid;place-items:center;cursor:pointer;padding:0;
  transition:background var(--fast),color var(--fast),transform var(--fast),box-shadow var(--fast)}
.mk:hover,.mk.active{background:var(--mint);color:var(--ink);transform:translate(-50%,-50%) scale(1.13);
  box-shadow:0 0 20px rgba(187,255,222,.45);z-index:6}
.mk sup{font-size:.6em;line-height:1}
.rulerwrap{display:flex;justify-content:center;margin-top:var(--s4)}

/* ---- увеличение: живая сцена, метки и переключатель работают ---- */
.zctl{display:flex;align-items:center;gap:clamp(6px,.7vw,10px);
  width:max-content;margin:clamp(10px,1.3vw,18px) 0 0 auto;
  border-radius:999px;padding:6px 8px;
  background:rgba(12,32,40,.46);backdrop-filter:blur(14px) saturate(115%);
  -webkit-backdrop-filter:blur(14px) saturate(115%);
  box-shadow:0 0 0 1px rgba(187,255,222,.14)}
.zb{width:clamp(30px,2.4vw,34px);aspect-ratio:1;border-radius:50%;cursor:pointer;
  border:1.5px solid var(--mint2);background:transparent;color:var(--mint);
  display:grid;place-items:center;
  transition:background var(--fast),color var(--fast),transform .2s,opacity var(--fast)}
.zb:hover{background:var(--mint);color:var(--ink)}
.zb:active{transform:scale(.93)}
.zb[disabled]{opacity:.32;cursor:default}
.zb[disabled]:hover{background:transparent;color:var(--mint)}
.zb svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.zlvl{min-width:52px;text-align:center;color:var(--mint);font-size:var(--t-xs);
  letter-spacing:.12em;font-variant-numeric:tabular-nums;user-select:none}
.stage.zoomed{cursor:grab}
.stage.grabbing{cursor:grabbing}

/* во весь экран — та же сцена, просто больше места */
.stagewrap.big{position:fixed;inset:0;z-index:210;margin:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(12px,1.6vw,22px);
  padding:clamp(56px,7vw,96px) clamp(10px,2.4vw,48px);
  background:rgba(6,18,24,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.stagewrap.big .stage{width:100%;max-height:100%}
.stagewrap.big .zctl{margin:0}
.stagewrap.big .stripes{opacity:.5;transform:translateX(-50%)!important}
.stagewrap.big .subs{transform:none!important}
.zclose{position:absolute;top:clamp(12px,2vw,26px);right:clamp(12px,2.6vw,40px);z-index:8;
  width:clamp(40px,3.4vw,50px);aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;
  background:rgba(14,38,47,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 0 0 1px rgba(187,255,222,.14);display:none;place-items:center;
  transition:background var(--fast),transform .2s}
.stagewrap.big .zclose{display:grid}
.zclose:hover{background:var(--mint);transform:scale(1.05)}
.zclose svg{width:36%;height:36%;fill:none;stroke:var(--mint);stroke-width:2.2;stroke-linecap:round}
.zclose:hover svg{stroke:var(--ink)}
@media (prefers-reduced-motion:reduce){.zpan{transition:none}}

/* ============ ТТХ ============ */
.specs{padding-block:var(--sec)}
.spec-t{text-align:center;font-family:var(--disp);font-weight:400;color:var(--mint2);
  font-size:var(--t-xl);line-height:1.5;letter-spacing:.05em;text-transform:uppercase;
  margin-bottom:var(--s6);max-width:52ch;margin-inline:auto}
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:minmax(0,auto) minmax(44px,1fr) minmax(0,auto);align-items:baseline;
  gap:var(--s3);padding-block:clamp(9px,1vw,14px);border-bottom:1px solid var(--line-soft)}
.row:last-child{border-bottom:0}
.row .l,.row .v{font-size:var(--t-sm);color:var(--text);text-transform:uppercase;line-height:1.4;
  letter-spacing:.025em;text-shadow:0 1px 10px rgba(6,20,26,.55)}
.row .v{text-align:right;transition:color var(--fast)}
.row:hover .v{color:var(--mint)}
.row .d{overflow:hidden;transform:translateY(-2px)}
.row .d b{display:block;white-space:nowrap;color:var(--mint2);font-weight:400;font-size:var(--t-sm);
  letter-spacing:.1em;opacity:.65;clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--ease)}
.row.in .d b{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.row .d b{clip-path:none;transition:none}}