/* ===== Page theming ===== */
.page--catalogue{
  background:
    linear-gradient(180deg, rgba(6,8,12,.84), rgba(6,8,12,.76) 35%, rgba(6,8,12,.72) 100%),
    radial-gradient(1400px 800px at 50% 12%, rgba(0,0,0,.22), transparent 60%),
    linear-gradient(180deg, rgba(211,165,92,.05), transparent 40%),
    radial-gradient(200% 100% at 0% 0%, rgba(138,107,56,.06), transparent 40%),
    url("../images/brushed-brass-texture.jpg") center/cover no-repeat fixed;
}
.page--catalogue::after{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.08;
  background:
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(255,255,255,.04) 28px 29px),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(255,255,255,.03) 28px 29px);
}

/* ===== Section 1: Lines Reel ===== */
.reel{padding:110px 0 42px}
.reel-window{
  position:relative; overflow:clip; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg-elev); padding:10px;
}
.reel-track{
  display:inline-grid; grid-auto-flow:column; grid-auto-columns: max-content; gap:12px;
  padding:6px 12px; will-change: transform; animation: reel-move 22s linear infinite;
}
@keyframes reel-move { to{ transform: translateX(-50%); } }
.reel-window:hover .reel-track,
.reel-window:active .reel-track{ animation-play-state: paused; }

.reel-card{margin:0; display:grid; gap:6px; text-align:center}
.reel-card img{margin-inline:auto}
.reel-card figcaption{color:#e9edf6}

/* Make tracks sit side-by-side for seamless loop */
.reel-window{display:flex}
.reel-window .reel-track{min-width: 200%}

/* ===== Section 2: Filter Grid ===== */
.filters{padding:42px 0}
.filter-bar{
  display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; margin-bottom:12px;
}
.chips{border:1px solid var(--line); border-radius:12px; padding:8px; color:#e9edf6}
.chips label{display:inline-flex; align-items:center; gap:6px; margin:4px 8px 4px 0; cursor:pointer}
.count{color:#e6ebf3}

.grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;
}
.g-item{
  margin:0; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev);
  padding:10px; display:grid; gap:8px; transition: opacity .25s ease, transform .25s ease, filter .25s ease;
}
.g-item[hidden]{ display:block !important; opacity:0; transform:scale(.96); filter:grayscale(.35); pointer-events:none; height:0; padding:0; margin:0; border-width:0; overflow:hidden }
.g-item figcaption{color:#e9edf6}

@media (max-width:1100px){ .grid{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:560px){ .grid{grid-template-columns:1fr;} }

/* ===== Section 3: Compare ===== */
.compare{padding:42px 0}
.cmp-wrap{display:grid; grid-template-columns: 260px 1fr; gap:16px; align-items:start}
.cmp-choices{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev);
  padding:12px; display:grid; gap:8px; color:#e9edf6; position:sticky; top:90px;
}
.cmp-canvas{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev);
  padding:12px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;
}
.cmp-card{
  border:1px solid #2a2d33; border-radius:16px; padding:12px; display:grid; gap:10px;
  background:#15171c; box-shadow:0 12px 24px rgba(0,0,0,.25); opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease;
}
.cmp-card figure{margin:0}
.cmp-card figcaption{margin-top:6px; color:#e9edf6}
.cmp-card .bars{display:grid; gap:8px}
.bar{display:grid; grid-template-columns:70px 1fr; gap:8px; align-items:center}
.bar span{color:#e9edf6}
.bar i{
  display:block; height:10px; border-radius:999px; background:#1a1d23; position:relative; overflow:hidden;
}
.bar i::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition: width .6s cubic-bezier(.2,.7,.2,1);
}

.cmp-card.is-on{opacity:1; transform:none}

@media (max-width:1100px){
  .cmp-wrap{grid-template-columns:1fr}
  .cmp-canvas{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:560px){
  .cmp-canvas{grid-template-columns:1fr}
}
/* Comparator: force-hide when [hidden] is set */
.cmp-card[hidden]{
  display: none !important;   /* переигрываем авторский display:grid */
}
/* ===== Section 4: Latch Lab ===== */
.lab{padding:42px 0}
.lab-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; align-items:start}
.lab-graph{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:10px}
.lab-svg{display:block; width:100%; height:auto}
.lab-ax{stroke:#ffffff44; stroke-width:1}
.lab-axlbl{fill:#e9edf6; font-size:12px}
.lab-path{filter: drop-shadow(0 6px 12px rgba(0,0,0,.3))}
.lab-dot{fill:#fff; stroke:#8a6b38; stroke-width:2; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.lab-controls{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:12px; display:grid; gap:10px}
.lc-row{display:flex; align-items:center; gap:12px; justify-content:space-between; color:#e9edf6}
.lc-row input[type="range"]{flex:1}
.lc-row output{min-width:3ch; text-align:right; color:#fff}
.lab-fig{margin:0}
.lab-fig figcaption{margin-top:6px; color:#e9edf6}
@media (max-width:980px){ .lab-grid{grid-template-columns:1fr} }

/* ===== Section 5: Door Sets Builder ===== */
.sets{padding:42px 0}
.sets-grid{display:grid; grid-template-columns: 0.9fr 1.1fr; gap:16px; align-items:start}
.set-controls{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:12px; display:grid; gap:10px}
.stepper{display:grid; grid-template-columns: 1fr auto auto auto; align-items:center; gap:8px; color:#e9edf6}
.stp{border:1px solid #2a2d33; background:#15171c; color:#e9edf6; border-radius:8px; padding:.3rem .7rem; cursor:pointer}
.stepper output{min-width:2ch; text-align:center; color:#fff}
.mix{border:1px dashed #2a2d33; border-radius:12px; padding:10px; color:#e9edf6}
.set-summary{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:12px; display:grid; gap:12px}
.set-table{width:100%; border-collapse:separate; border-spacing:0 6px}
.set-table th,.set-table td{padding:.55rem .6rem; color:#e9edf6; text-align:left}
.set-table thead th{color:#fff}
.set-table tbody tr{background:#15171c; border:1px solid #2a2d33; border-radius:12px}
.set-table tbody td:first-child{font-weight:600}
.set-table .sum{color:#fff}
.set-notes{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.set-notes figure{margin:0}
.set-notes figcaption{margin-top:6px; color:#e9edf6}
@media (max-width:1100px){ .sets-grid{grid-template-columns:1fr} .set-notes{grid-template-columns:1fr} }

/* ===== Section 6: Price Bands (heatmap) ===== */
.bands{padding:42px 0}
.bands-wrap{display:grid; gap:12px}
.band-filter{border:1px solid var(--line); border-radius:12px; padding:10px; color:#e9edf6; display:flex; gap:12px; flex-wrap:wrap}
.hm{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); overflow:hidden}
.hm-row{display:grid; grid-template-columns: 1.2fr 1fr 1fr 1fr}
.hm-head{background:#15171c}
.hm-cell{padding:.7rem .8rem; border-bottom:1px solid #2a2d33; color:#e9edf6; position:relative}
.hm-row:last-child .hm-cell{border-bottom:0}
.hm-cell[data-val]{
  --glow: 0; /* 0..1 */
  background: radial-gradient(180px 60px at 80% 50%, rgba(211,165,92,var(--glow)), transparent 60%);
  transition: background .25s ease, box-shadow .25s ease;
}
.hm-cell[data-val]:hover{ box-shadow: inset 0 0 0 1px rgba(211,165,92,.2) }
.hm-line{color:#fff; font-weight:700}
.band-swatches{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.band-swatches figure{margin:0}
.band-swatches figcaption{margin-top:6px; color:#e9edf6}
@media (max-width:1100px){ .hm-row{grid-template-columns: 1.2fr 1fr 1fr 1fr} .band-swatches{grid-template-columns:1fr} }
/* ===== Section 7: Finish Mosaic ===== */
.finish-mosaic{padding:42px 0}
.mosaic{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px;
  position:relative;
}
.tile{
  margin:0; border:1px solid var(--line); border-radius:var(--radius);
  background:#0f1115; overflow:hidden; position:relative; isolation:isolate;
  transform: translateZ(0) scale(.98); opacity:.95;
  transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease, filter .25s ease;
  cursor:pointer;
}
.tile img{display:block}
.tile figcaption{padding:8px; color:#e9edf6; border-top:1px solid #2a2d33; background:#14161b}

/* «магнитный» блик — управляется через --mx/--my из JS */
.tile::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(180px 120px at var(--mx,50%) var(--my,50%),
              rgba(211,165,92,.25), transparent 60%);
  opacity:.0; transition:opacity .2s ease;
}
.tile.is-on{
  transform: translateZ(0) scale(1); opacity:1;
  box-shadow:0 18px 36px rgba(0,0,0,.35);
  filter: saturate(1.05);
}
.tile.is-on::after{ opacity:.6 }

/* чуть «ломаем» сетку для живости */
.tile:nth-child(2){ transform:translateY(6px) scale(.98) }
.tile:nth-child(3){ transform:translateY(12px) scale(.98) }
.tile:nth-child(6){ transform:translateY(6px) scale(.98) }
.tile:nth-child(7){ transform:translateY(10px) scale(.98) }

/* панель справа/снизу */
.mosaic-panel{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg-elev); padding:12px; color:#e9edf6;
  display:grid; gap:8px;
  /* размещаем в сетке как последний «столбец» на десктопе */
  grid-column: span 4;
}
.mp-title{color:#fff; margin:.2rem 0}
.mp-points{margin:.2rem 0 0 18px}

@media (min-width:980px){
  .mosaic{ grid-template-columns:repeat(5, minmax(0,1fr)); }
  .mosaic-panel{ grid-column: 4 / -1; grid-row: 1 / span 3; position:sticky; top:100px }
}
@media (max-width:980px){ .mosaic{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .mosaic{ grid-template-columns:1fr; } }

/* ===== 8) Ergonomics Tuner ===== */
.ergonomics{padding:42px 0}
.ergo-grid{display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:start}
.ergo-gauge{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:10px; text-align:center}
.ergo-svg{width:100%; height:auto}
.ergo-val{fill:#fff; font-size:28px; font-weight:700}
.ergo-controls{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:12px; display:grid; gap:10px}
.er-row{display:flex; align-items:center; gap:12px; justify-content:space-between; color:#e9edf6}
.er-row input[type="range"]{flex:1}
.er-row output{min-width:3ch; text-align:right; color:#fff}
.ergo-notes{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.ergo-notes figure{margin:0}
.ergo-notes figcaption{margin-top:6px; color:#e9edf6}
@media (max-width:980px){ .ergo-grid{grid-template-columns:1fr} .ergo-notes{grid-template-columns:1fr} }

/* ===== 9) Case Ribbon (horizontal scroll) ===== */
.cases{padding:42px 0}
.case-ribbon{display:grid; gap:10px}
.case-track{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev);
}
.case-card{
  flex:0 0 78%; scroll-snap-align:center; border:1px solid #2a2d33; border-radius:16px; background:#15171c;
  padding:12px; display:grid; gap:8px; box-shadow:0 16px 32px rgba(0,0,0,.28);
}
.case-card figure{margin:0}
.case-card figcaption{margin-top:6px; color:#e9edf6}
.case-progress{position:relative; height:8px; background:#1a1d23; border-radius:999px; overflow:hidden}
.cp-fill{position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .2s linear}
.cp-years{display:flex; justify-content:space-between; margin-top:6px; color:#e6ebf3; font-size:.9rem}
@media (max-width:560px){ .case-card{flex-basis:90%} }
/* ===== 10) Hinge Physics ===== */
.physics{padding:42px 0}
.phys-grid{display:grid; grid-template-columns: 1fr 1.4fr 1fr; gap:16px; align-items:start}
.phys-photo{margin:0}
.phys-photo figcaption{margin-top:6px; color:#e9edf6}
.phys-plot{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:12px}
.phys-svg{width:100%; height:auto}
.axl{fill:#e6ebf3; font-size:12px}
.phys-curve{filter: drop-shadow(0 8px 16px rgba(0,0,0,.35))}
.phys-dot{fill:#fff; stroke:#8a6b38; stroke-width:2}
.phys-controls{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px}
.pr{display:flex; align-items:center; gap:10px; justify-content:space-between; color:#e9edf6}
.pr input[type="range"]{flex:1}
.pr output{min-width:3ch; text-align:right; color:#fff}
@media (max-width:1100px){ .phys-grid{grid-template-columns:1fr; } }

/* ===== 11) Lead Times ===== */
.lead{padding:42px 0}
.lead-ribbon{display:grid; gap:12px}
.lead-track{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px}
.lead-step{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev);
  padding:12px; position:relative; overflow:hidden;
}
.lead-step::after{
  content: attr(data-days) "d"; position:absolute; right:8px; bottom:8px;
  color:#e9edf6; opacity:.85; font-weight:700;
}
.lead-progress{position:relative; height:10px; background:#1a1d23; border-radius:999px; overflow:hidden}
.lp-fill{position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition: width .25s ease}
.lead-photo{margin:0}
.lead-photo figcaption{margin-top:6px; color:#e9edf6}
@media (max-width:980px){ .lead-track{grid-template-columns:1fr; } }

/* ===== 12) Finish Care Advisor ===== */
.careadv{padding:42px 0}
.careadv-grid{display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:start}
.adv-controls{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:12px; display:grid; gap:10px}
.adv-controls fieldset{border:1px dashed #2a2d33; border-radius:12px; padding:10px; color:#e9edf6; display:grid; gap:8px}
.adv-controls legend{color:#fff; font-weight:700; padding:0 .35rem}
.adv-controls label{display:flex; align-items:center; gap:8px; cursor:pointer}
.adv-actions{display:flex; gap:10px; align-items:center}

.adv-card{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:12px; display:grid; gap:10px}
.adv-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.adv-title{margin:.2rem 0; color:#fff}
.badge{
  --tone:#27b36a;
  display:inline-block; padding:.25rem .55rem; border-radius:999px;
  background:color-mix(in srgb, var(--tone) 22%, #0c0e12 78%); color:#fff; border:1px solid color-mix(in srgb, var(--tone) 60%, #000 40%);
  font-weight:700; font-size:.9rem;
}
.badge[data-level="easy"]{ --tone:#27b36a }
.badge[data-level="moderate"]{ --tone:#c89b2a }
.badge[data-level="attentive"]{ --tone:#cf5246 }

.adv-points{margin:0; padding-left:18px; display:grid; gap:6px; color:#e9edf6}
.adv-photo{margin:0}
.adv-photo img{max-width:350px; width:100%; height:auto; display:block}
.adv-photo figcaption{margin-top:6px; color:#e9edf6}
.adv-note{color:#e9edf6}

@media (max-width:980px){ .careadv-grid{grid-template-columns:1fr} }
/* ===== 13) Specs ===== */
.specs{padding:42px 0}
.specs-grid{display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:start}
.specs-controls{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:12px; display:grid; gap:10px}
.specs-units{display:flex; gap:10px; align-items:center; color:#e9edf6; border:1px dashed #2a2d33; border-radius:12px; padding:8px}
.specs-dl{margin:0; display:grid; gap:8px}
.specs-dl .row{display:flex; justify-content:space-between; gap:12px; border:1px solid #2a2d33; border-radius:10px; padding:.5rem .7rem; color:#e9edf6}
.specs-code{border:1px solid var(--line); border-radius:var(--radius); background:#0f1115; color:#e6ebf3; padding:12px; overflow:auto}
@media (max-width:980px){ .specs-grid{grid-template-columns:1fr} }
/* ===== 14) Installation Playbook ===== */
.install{padding:42px 0}
.install-grid{display:grid; grid-template-columns:1.3fr .7fr; gap:16px; align-items:start}
.install-steps{counter-reset: step; list-style:none; padding:0; margin:0; position:relative}
.install-steps .step{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev);
  padding:12px; margin:0 0 12px 0; position:relative; opacity:.85; transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease, box-shadow .35s ease;
}
.install-steps .step::before{
  counter-increment: step; content: counter(step);
  position:absolute; left:-10px; top:-10px; width:34px; height:34px; display:grid; place-items:center;
  border-radius:50%; background:#15171c; color:#fff; border:1px solid #2a2d33; font-weight:700;
  box-shadow:0 10px 20px rgba(0,0,0,.35);
}
.install-steps .step.is-on{opacity:1; transform:none; box-shadow:0 12px 24px rgba(0,0,0,.28)}
.inst-aside{display:grid; gap:12px}
.inst-meter{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:10px; text-align:center}
.ring{
  --p: 0; /* 0..1 */
  --size: 160px;
  width:var(--size); height:var(--size); margin:8px auto; border-radius:50%;
  background:
    conic-gradient(from -90deg, var(--accent) 0 calc(var(--p)*1turn), transparent 0 1turn),
    conic-gradient(from -90deg, #1a1d23 0 1turn);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 56%, #000 57%);
          mask: radial-gradient(circle at 50% 50%, transparent 56%, #000 57%);
  position:relative;
}
.ring-val{position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); color:#fff; font-weight:700; font-size:22px}
.inst-check{border:1px dashed #2a2d33; border-radius:12px; padding:10px; color:#e9edf6; display:grid; gap:8px}
.inst-actions{display:flex; gap:10px; align-items:center}
@media (max-width:980px){ .install-grid{grid-template-columns:1fr} }

/* ===== 15) Carton Planner ===== */
.planner{padding:42px 0}
.planner-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:16px}
.plan-form{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:12px; display:grid; gap:12px}
.plan-form .grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.plan-lines{border:1px dashed #2a2d33; border-radius:12px; padding:10px; color:#e9edf6; display:grid; gap:6px}
.plan-out{border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-elev); padding:12px; display:grid; gap:10px}
.plan-table{width:100%; border-collapse:separate; border-spacing:0; overflow:auto}
.plan-table th, .plan-table td{border:1px solid #2a2d33; padding:.5rem .6rem; text-align:right; color:#e9edf6}
.plan-table th:first-child, .plan-table td:first-child{text-align:left}
.plan-summary{background:#0f1115; color:#e6ebf3; padding:10px; border-radius:10px; overflow:auto}
@media (max-width:980px){
  .planner-grid{grid-template-columns:1fr}
  .plan-form .grid2{grid-template-columns:1fr}
}
/* === Carton Planner — form controls styling === */
.planner .plan-form label{
  display:flex; flex-direction:column; gap:6px;
  color:#e9edf6; font-weight:600;
}
.planner .plan-form input,
.planner .plan-form select,
.planner .plan-form textarea{
  width:100%;
  padding:.55rem .7rem;
  border:1px solid #2a2d33;
  border-radius:12px;
  background:#0f1115;
  color:#fff;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.planner .plan-form input::placeholder,
.planner .plan-form textarea::placeholder{ color:#9aa3b2 }

.planner .plan-form input:focus,
.planner .plan-form select:focus,
.planner .plan-form textarea:focus{
  border-color: color-mix(in srgb, var(--accent) 65%, #000 35%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* компактнее number-спиннеры — без стрелок, одинаковая высота */
.planner .plan-form input[type="number"]{
  appearance: textfield;          /* стандартное свойство — для линтера */
  -webkit-appearance: textfield;  /* Safari/WebKit */
  -moz-appearance: textfield;     /* Firefox */
}

/* убрать стрелки в WebKit-браузерах (Chrome, Safari) */
.planner .plan-form input[type="number"]::-webkit-outer-spin-button,
.planner .plan-form input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}


/* выравнивание сеток в форме */
.planner .plan-form .grid2 > label{ width:100% }
.planner .plan-lines legend{ color:#fff; font-weight:700; padding:0 .35rem }
.planner .plan-lines label{ display:flex; align-items:center; gap:8px; }

/* чуть приятнее таблица справа */
.planner .plan-table thead th{
  background:#121419; color:#fff; font-weight:700;
}
.planner .plan-table tfoot th{
  background:#101216; font-weight:800;
}
/* ==== Mobile overflow fix (global) ==== */
@media (max-width: 560px){
  html, body { overflow-x:hidden; max-width:100%; }
  section, .container { overflow-x:hidden; }
  /* универсально для контента: изображение вписывается в контейнер и не шире 350px */
  img { width:100%; max-width:350px; height:auto; }
}

/* ==== Physics (Torque) — mobile containment ==== */
.physics .phys-grid { grid-template-columns:1fr !important; }
.physics .phys-plot{
  overflow:hidden;              /* обрезаем фильтры/тени у SVG */
  border-radius: var(--radius);
}
.physics .phys-svg{ display:block; width:100%; height:auto; }
.physics .phys-photo img{ display:block; width:100%; max-width:350px; height:auto; }

/* подправим ряды регулировок, чтобы не вылазили за край */
.physics .phys-controls{ grid-template-columns:1fr; }
.physics .pr{ gap:12px; }
.physics .pr input[type="range"]{ width:100%; }

/* чтобы большие заголовки не расширяли контейнер из-за длинных слов */
h1, h2, h3, .sec-lead, .sec-text { overflow-wrap:anywhere; }