/* Физопыт — учебный плакат снаружи, приборный стенд внутри опыта */
:root{
  /* плакат */
  --paper:#efe6d2; --paper-2:#f7f1e2; --ink:#1d1b18; --ink-2:#4a443b; --ink-3:#5d574c;
  --carmine:#c2362b; --ultra:#27478f; --ochre:#d79a2b;
  /* стенд */
  --rig:#24272d; --rig-2:#1d2026; --rig-edge:#0a0b0d; --rig-hi:#4b515b; --rig-line:#15181c;
  --screen:#0b0d10; --dim:#8b95a3; --lit:#d7dce4; --lum:#7dff9b; --amber:#ffb340;

  --disp:'Oswald',system-ui,sans-serif;
  --sans:'Golos Text',system-ui,-apple-system,sans-serif;
  --cond:'Fira Sans Condensed','Oswald',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16.5px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--carmine)}
.wrap{max-width:1560px;margin:0 auto;padding:0 clamp(16px,3vw,46px)}

/* ---------- шапка ---------- */
.top{border-bottom:5px solid var(--ink);background:var(--paper)}
.top-in{position:relative;max-width:1560px;margin:0 auto;padding:13px clamp(16px,3vw,46px);
  display:flex;align-items:center;justify-content:space-between;gap:14px 26px;flex-wrap:wrap}
.brand{display:inline-block;text-decoration:none;color:var(--ink);font:700 29px/1.26 var(--disp);
  text-transform:uppercase;letter-spacing:.04em}
.brand span{background:var(--carmine);color:var(--paper);padding:1px 8px 2px;margin-left:1px}
.brand i{display:block;font:500 10.5px/1.4 var(--disp);font-style:normal;letter-spacing:.2em;color:var(--ink-3);margin-top:10px}
.top-nav{display:flex;align-items:center;gap:6px 22px;flex-wrap:wrap;
  font:500 13px/1 var(--disp);text-transform:uppercase;letter-spacing:.09em}
.top-nav>a{display:inline-flex;align-items:center;gap:6px;color:var(--ink-3);text-decoration:none;
  padding:5px 0;border-bottom:2px solid transparent}
.top-nav svg{flex:none;opacity:.72}
.top-nav>a:hover{color:var(--ink);border-color:var(--carmine)}
.top-nav>a:hover svg{opacity:1}

/* ящик опытов: раскрывается без скриптов, список лежит в разметке каждой страницы */
.drawer summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;
  padding:5px 11px 5px 9px;color:var(--paper);background:var(--ink);border:2px solid var(--ink)}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary svg{opacity:.85}
.drawer summary b{font:700 11px/1 var(--disp);letter-spacing:.06em;color:var(--ink);
  background:var(--ochre);padding:3px 5px 2px;margin-left:2px}
.drawer summary:hover{background:var(--carmine);border-color:var(--carmine)}
.drawer[open] summary{background:var(--carmine);border-color:var(--carmine)}
.drawer-pan{position:absolute;z-index:40;top:100%;margin-top:9px;
  left:clamp(16px,3vw,46px);right:clamp(16px,3vw,46px);
  background:var(--paper);border:3px solid var(--ink);box-shadow:9px 9px 0 rgba(29,27,24,.15);
  padding:13px;display:grid;gap:1px 8px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.drawer-pan a{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);
  padding:6px 8px;border:2px solid transparent}
.drawer-pan a:hover{background:var(--ochre);border-color:var(--ink)}
.drawer-pan i{font:700 12px/1 var(--disp);font-style:normal;color:var(--carmine);letter-spacing:0}
.drawer-pan svg{flex:none;color:var(--ink-3)}
.drawer-pan a:hover svg{color:var(--ink);opacity:1}
.drawer-pan span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- заголовки ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:34px;align-items:end;
  padding:clamp(26px,4vw,40px) 0 clamp(20px,3vw,30px);border-bottom:3px solid var(--ink)}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:16px}}
.hero h1{font:700 clamp(30px,5vw,64px)/0.98 var(--disp);text-transform:uppercase;margin:0;letter-spacing:-.004em}
.hero h1 em{font-style:normal;color:var(--carmine)}
.hero p{margin:0;font-size:16px;color:var(--ink-2)}

h2.rule{font:600 15px/1 var(--disp);text-transform:uppercase;letter-spacing:.2em;
  margin:clamp(28px,4vw,44px) 0 16px;padding-top:11px;border-top:3px solid var(--ink)}

/* ---------- витрина коллажем ---------- */
.cards{display:grid;gap:16px;grid-template-columns:repeat(6,1fr)}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.card{display:block;text-decoration:none;color:inherit;border:3px solid var(--ink);background:var(--paper-2);
  transition:background .12s}
.card.wide{grid-column:span 3}
.card.third{grid-column:span 2}
@media (max-width:900px){.card.wide,.card.third{grid-column:span 2}}
@media (max-width:560px){.card.wide,.card.third{grid-column:span 1}}
.card:hover{background:var(--ochre)}
.card:hover .no{color:var(--ink)}
.card-screen{display:block;background:var(--screen);border-bottom:3px solid var(--ink)}
.card-screen canvas{display:block;width:100%}
.card-body{display:flex;align-items:flex-start;gap:12px;padding:12px 15px 15px}
.no{font:700 44px/0.78 var(--disp);color:var(--carmine);flex:none}
.card.third .no{font-size:34px}
.card-txt{min-width:0}
.card b{display:flex;align-items:center;gap:8px;font:600 22px/1.1 var(--disp);text-transform:uppercase}
.card b svg{flex:none;color:var(--carmine)}
.card.third b{font-size:19px}
.card i{display:block;font-style:normal;font-size:13.5px;line-height:1.45;color:var(--ink-2);margin-top:4px}

/* ---------- текстовые блоки ---------- */
.note-block{max-width:78ch;border-left:5px solid var(--ochre);padding-left:18px}
.note-block p{margin:0 0 12px;color:var(--ink-2);font-size:15.6px}
.note-block p:last-child{margin-bottom:0}

.fig{margin:18px 0;padding:0;max-width:620px}
.fig svg{display:block;width:100%;height:auto;background:var(--paper-2);border:3px solid var(--ink)}
.fig figcaption{font:600 12px/1.45 var(--disp);text-transform:uppercase;letter-spacing:.11em;
  color:var(--ink-3);padding-top:8px}

/* ---------- страница опыта ---------- */
.sim-page{padding-bottom:40px}
.crumbs{font:500 11.5px/1 var(--disp);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);padding:16px 0 0}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--carmine)}
.crumbs span{margin:0 6px;opacity:.5}
.sim-head{display:flex;gap:clamp(14px,2vw,26px);align-items:flex-start;
  padding:14px 0 clamp(18px,2.6vw,26px);border-bottom:3px solid var(--ink);margin-bottom:clamp(18px,2.6vw,26px)}
.sim-no{font:700 clamp(46px,7vw,90px)/0.78 var(--disp);color:var(--carmine);flex:none}
.sim-head h1{font:700 clamp(28px,4.4vw,52px)/0.98 var(--disp);text-transform:uppercase;margin:0 0 10px}
.lead{max-width:78ch;color:var(--ink-2);font-size:clamp(15.4px,1.3vw,17px);margin:0}

/* ---------- приборный стенд ---------- */
.rig{background:linear-gradient(var(--rig),#23262c);border:3px solid var(--ink);
  box-shadow:0 1px 0 var(--rig-hi) inset,0 -1px 0 #0f1115 inset;padding:16px;
  display:grid;gap:16px;grid-template-columns:302px minmax(0,1fr);align-items:start}
@media (max-width:900px){
  .rig{grid-template-columns:1fr}
  .rig-right{display:contents}          /* чтобы экран, пульт и табло выстроились в нужном порядке */
  .scope{order:1}
  .panel{order:2}                        /* кнопка «Старт» сразу под экраном, а не под графиком */
  .field-key{order:3}
  .breakdown{order:4}
  .readout{order:5}
  .chart-wrap{order:6}
  .panel{display:flex;flex-direction:column}
  .run-row{order:-1;margin:8px 0 2px;padding-top:0;border-top:0}   /* «Старт» под рукой, а не в конце настроек */
}

/* пульт */
.panel{align-self:stretch;background:linear-gradient(#21242a,#191c21);border:1px solid var(--rig-edge);
  box-shadow:0 1px 0 #3c424b inset;padding:4px 15px 15px;color:var(--lit);font-family:var(--cond)}
.ctl{padding:13px 0;border-bottom:1px solid var(--rig-line)}
.ctl:first-child{padding-top:10px}
.ctl-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px}
.ctl-head label{font:600 11px/1.2 var(--cond);text-transform:uppercase;letter-spacing:.15em;color:var(--dim)}
.ctl-head output{font:400 15px/1 var(--mono);color:var(--amber);white-space:nowrap}
.ctl-hint{font:400 12px/1.5 var(--cond);color:#76808d;margin:9px 0 0}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;margin:0;outline:none;cursor:pointer;
  background:#0e1013;box-shadow:inset 0 1px 3px #000;border:1px solid var(--rig-edge)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:22px;cursor:pointer;
  background:linear-gradient(#c9d0da,#79818d);border:1px solid #05070a;box-shadow:0 1px 2px #000}
input[type=range]::-moz-range-thumb{width:12px;height:20px;border-radius:0;cursor:pointer;
  background:linear-gradient(#c9d0da,#79818d);border:1px solid #05070a}

.seg{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--rig-edge);background:#17191e}
.seg button{flex:1 1 auto;font:600 12px/1 var(--cond);text-transform:uppercase;letter-spacing:.07em;
  padding:9px 7px;background:linear-gradient(#2d313880,#1d2026);border:0;border-right:1px solid var(--rig-line);
  color:var(--dim);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--lit)}
.seg button[aria-pressed=true]{background:linear-gradient(#c8761a,#9a540d);color:#fff}
.seg svg{display:block}

.switch{display:flex;align-items:center;gap:11px;cursor:pointer;
  font:600 11px/1.3 var(--cond);text-transform:uppercase;letter-spacing:.13em;color:var(--dim)}
.switch input{appearance:none;-webkit-appearance:none;width:30px;height:46px;flex:none;margin:0;cursor:pointer;
  background:linear-gradient(#1a1d22,#111317);border:1px solid var(--rig-edge);box-shadow:inset 0 0 8px #000;position:relative}
.switch input::after{content:"";position:absolute;left:5px;top:24px;width:18px;height:18px;
  background:linear-gradient(#cdd4de,#7b838f);border:1px solid #05070a;transition:top .12s}
.switch input:checked::after{top:4px}
.switch input:checked{box-shadow:inset 0 0 8px #000,0 0 0 1px var(--amber)}

.run-row{display:flex;gap:9px;margin-top:16px}
.btn{flex:1 1 auto;font:600 13px/1 var(--cond);text-transform:uppercase;letter-spacing:.13em;cursor:pointer;
  padding:13px 10px;color:var(--lit);border:1px solid var(--rig-edge);
  background:linear-gradient(#3a414b,#262a30);box-shadow:0 1px 0 #5b636f inset}
.btn:hover{background:linear-gradient(#434b57,#2c3138)}
.btn.primary{background:linear-gradient(#c8761a,#9a540d);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.btn.primary:hover{background:linear-gradient(#d9811d,#a85c0e)}

/* экран прибора */
.scope{position:relative;background:var(--screen);border:3px solid #0a0c0f;
  box-shadow:0 0 0 1px #434a55,inset 0 0 44px rgba(0,0,0,.95);padding:6px}
.scope canvas{display:block;width:100%;background:var(--screen)}
.scope-grid{position:absolute;inset:6px;pointer-events:none;
  background-image:linear-gradient(rgba(125,255,155,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(125,255,155,.055) 1px,transparent 1px);
  background-size:36px 36px}
.scope-tag{position:absolute;right:13px;bottom:11px;pointer-events:none;
  font:400 10px/1 var(--mono);letter-spacing:.13em;color:rgba(125,255,155,.45)}
.screw{position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#9aa3b1,#394049);box-shadow:0 1px 1px #000}
.screw.tl{left:5px;top:5px} .screw.tr{right:5px;top:5px}
.screw.bl{left:5px;bottom:5px} .screw.br{right:5px;bottom:5px}

/* итог опыта: полоса по низу экрана, чтобы поле с результатом осталось видно */
.over{position:absolute;left:6px;right:6px;bottom:6px;display:none;align-items:center;gap:10px 18px;
  flex-wrap:wrap;padding:12px 15px 13px;color:var(--lit);text-align:left;
  background:rgba(8,11,16,.93);border-top:2px solid var(--lum);
  box-shadow:0 -18px 30px rgba(5,7,10,.5)}
.over.show{display:flex}
.over h2{flex:0 0 auto;font:600 17px/1.15 var(--cond);text-transform:uppercase;letter-spacing:.06em;margin:0}
.over p{flex:1 1 230px;margin:0;color:var(--dim);font:400 13.5px/1.5 var(--cond)}
.over p b{color:var(--lum);font-family:var(--mono);font-size:14px}
.over .btn{flex:0 0 auto;padding:10px 22px}
.over.at-top{top:6px;bottom:auto;border-top:0;border-bottom:2px solid var(--lum);
  box-shadow:0 18px 30px rgba(5,7,10,.5)}
.over-x{flex:0 0 auto;width:30px;height:30px;padding:0;cursor:pointer;
  background:none;border:1px solid var(--rig-edge);color:var(--dim);
  font:400 15px/1 var(--cond)}
.over-x:hover{color:var(--lit);border-color:var(--lum)}
@media (max-width:620px){
  .over{gap:8px 12px;padding:10px 12px 11px}
  .over h2{font-size:15px}
  .over p{flex-basis:100%;font-size:12.5px}
  .over .btn{padding:9px 18px}
}

.field-key{display:flex;gap:7px 20px;flex-wrap:wrap;align-items:center;margin-top:10px;padding:9px 12px;
  background:#1b1e24;border:1px solid var(--rig-edge);box-shadow:0 1px 0 #3c424b inset;
  font:600 11px/1.3 var(--cond);text-transform:uppercase;letter-spacing:.13em;color:var(--lit)}
.field-key i{display:inline-block;width:13px;height:13px;margin-right:7px;vertical-align:-2px;border:1px solid rgba(0,0,0,.5)}

/* табло показаний */
.readout{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));margin-top:16px}
.gauge{background:var(--screen);border:1px solid var(--rig-edge);
  box-shadow:0 0 0 1px #3c424b,inset 0 0 18px rgba(0,0,0,.9);padding:9px 12px 11px}
.gauge .k{font:600 9.5px/1.4 var(--cond);text-transform:uppercase;letter-spacing:.17em;color:var(--dim)}
.gauge .v{font:400 27px/1.15 var(--mono);color:var(--amber);text-shadow:0 0 12px rgba(255,179,64,.4);margin-top:2px}
.gauge .bar{height:4px;background:#0e1013;margin-top:8px;border:1px solid var(--rig-edge);overflow:hidden}
.gauge .bar i{display:block;height:100%;width:0;background:var(--lum);box-shadow:0 0 8px rgba(125,255,155,.6);transition:width .25s}

.breakdown{margin-top:9px;padding:10px 12px 11px;background:#1b1e24;border:1px solid var(--rig-edge);
  box-shadow:0 1px 0 #3c424b inset}
.brk-bar{display:flex;height:16px;border:1px solid var(--rig-edge);background:#0e1013;overflow:hidden}
.brk-bar i{display:block;height:100%;transition:width .3s}
.brk-list{display:flex;gap:6px 18px;flex-wrap:wrap;padding-top:9px;
  font:600 11px/1.3 var(--cond);text-transform:uppercase;letter-spacing:.11em;color:var(--dim)}
.brk-list i{display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px}
.brk-list b{color:var(--amber);font:400 14px/1 var(--mono);margin-left:3px}

/* график */
.chart-wrap{background:var(--screen);border:1px solid var(--rig-edge);
  box-shadow:0 0 0 1px #3c424b,inset 0 0 18px rgba(0,0,0,.9);padding:10px 12px 8px;margin-top:9px}
.chart-wrap canvas{display:block;width:100%;height:150px}
.legend{display:flex;gap:16px;flex-wrap:wrap;padding-top:7px;
  font:600 10.5px/1 var(--cond);text-transform:uppercase;letter-spacing:.12em;color:var(--dim)}
.legend i{display:inline-block;width:9px;height:9px;margin-right:6px;vertical-align:-1px}

/* ---------- служебные страницы ---------- */
.page{padding-bottom:30px}
.page h1{font:700 clamp(28px,4.4vw,52px)/0.98 var(--disp);text-transform:uppercase;margin:12px 0 12px}

.lessons{width:100%;border-collapse:collapse;border:3px solid var(--ink);background:var(--paper-2)}
.lessons th{font:600 12px/1.3 var(--disp);text-transform:uppercase;letter-spacing:.14em;color:var(--paper);
  background:var(--ink);text-align:left;padding:9px 13px}
.lessons td{padding:11px 13px;border-top:2px solid var(--line,#d9d2c0);font-size:14.6px;vertical-align:top;color:var(--ink-2)}
.lessons tr td:first-child{font-weight:600;color:var(--ink);width:30%}
.lessons td a{display:inline-block;font:600 14px/1.2 var(--disp);text-transform:uppercase;
  color:var(--carmine);text-decoration:none;border-bottom:2px solid currentColor;margin:0 10px 4px 0}
.lessons td a:hover{color:var(--ultra)}
@media (max-width:700px){
  .lessons,.lessons tr,.lessons td{display:block;width:auto}
  .lessons th{display:none}
  .lessons tr{border-top:2px solid var(--ink)}
  .lessons tr td:first-child{width:auto;padding-bottom:2px}
  .lessons td{border-top:0;padding:4px 13px}
  .lessons tr td:last-child{padding-bottom:12px}
}

.talk{max-width:620px;margin-top:18px}
.talk-field{display:block;margin-bottom:14px}
.talk-field span{display:block;font:600 12px/1.3 var(--disp);text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-3);margin-bottom:6px}
.talk-field span i{font-style:normal;color:#8b8375;letter-spacing:.08em}
.talk textarea,.talk input[type=text]{width:100%;font:16px/1.5 var(--sans);color:var(--ink);
  background:var(--paper-2);border:3px solid var(--ink);padding:11px 13px;outline:none;resize:vertical}
.talk textarea:focus,.talk input[type=text]:focus{border-color:var(--carmine)}
.talk-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.talk-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.talk .btn{flex:0 0 auto;padding:13px 30px;background:var(--carmine);border:3px solid var(--ink);
  color:#fff;box-shadow:none;font:700 14px/1 var(--disp);text-transform:uppercase;letter-spacing:.12em}
.talk .btn:hover{background:var(--ink)}
.talk-note{margin:0;font-size:13.4px;color:var(--ink-3);max-width:40ch}
.note-ok,.note-bad{max-width:620px;margin:16px 0;padding:12px 16px;border:3px solid var(--ink);background:var(--paper-2)}
.note-ok{border-color:#2f8f62}
.note-bad{border-color:var(--carmine)}
.note-ok p,.note-bad p{margin:0;font-size:15px}

.foot-nav{display:flex;gap:6px 22px;flex-wrap:wrap;max-width:1560px;margin:0 auto;
  padding:16px clamp(16px,3vw,46px) 0;font:600 13px/1 var(--disp);text-transform:uppercase;letter-spacing:.12em}
.foot-nav a{display:inline-flex;align-items:center;gap:7px;color:var(--ink);
  text-decoration:none;border-bottom:2px solid transparent}
.foot-nav svg{flex:none;opacity:.6}
.foot-nav a:hover svg{opacity:1}
.foot-nav a:hover{border-color:var(--carmine)}
.foot p{padding-top:10px}

/* ---------- другие опыты ---------- */
.more-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.more-row a{display:flex;gap:11px;align-items:flex-start;text-decoration:none;color:inherit;
  border:3px solid var(--ink);background:var(--paper-2);padding:11px 13px 13px}
.more-row a:hover{background:var(--ochre)}
.more-row .no{font:700 27px/0.8 var(--disp);color:var(--carmine)}
.more-row b{display:flex;align-items:center;gap:7px;font:600 17px/1.1 var(--disp);text-transform:uppercase}
.more-row b svg{flex:none;color:var(--carmine)}
.more-row i{display:block;font-style:normal;font-size:13px;line-height:1.4;color:var(--ink-2);margin-top:3px}

.foot{border-top:5px solid var(--ink);margin-top:clamp(32px,5vw,58px)}
.foot p{max-width:1560px;margin:0 auto;padding:14px clamp(16px,3vw,46px) 28px;
  color:var(--ink-3);font:500 12.5px/1.6 var(--disp);text-transform:uppercase;letter-spacing:.1em}

@media (max-width:620px){
  .readout{grid-template-columns:repeat(2,1fr)}
  .top-nav{font-size:12px;gap:6px 14px}
  .drawer-pan{grid-template-columns:1fr 1fr;gap:1px 4px;padding:9px}
  .drawer-pan a{padding:5px 6px;gap:6px}
  .drawer-pan svg{display:none}
  .sim-head{gap:12px}
}