/* photolearn.ru — общие стили. Генерируется вручную, правится здесь. */
:root{
  --page:#0d0d0d;
  --surface-1:#1a1a19;
  --surface-2:#131312;
  --ink:#ffffff;
  --ink-2:#c3c2b7;
  --ink-muted:#898781;
  --hair:rgba(255,255,255,.10);
  --grid:#2c2c2a;

  --shutter:#3987e5;   /* выдержка  */
  --aperture:#d95926;  /* диафрагма */
  --iso:#199e70;       /* ISO       */

  --good:#0ca30c;
  --warning:#fab219;
  --serious:#ec835a;
  --critical:#d03b3b;

  --r:14px;
  --font:system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--font);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block}
h1,h2,h3,h4{line-height:1.2;margin:0;letter-spacing:-.02em;font-weight:650}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:var(--shutter)}
.wrap{max-width:1060px;margin:0 auto;padding:0 22px}
.muted{color:var(--ink-muted)}
.sec-2{color:var(--ink-2)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(13,13,13,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);
}
.nav-bar{display:flex;align-items:center;gap:8px;max-width:1060px;margin:0 auto;padding:8px 16px 8px 12px}
.nav-burger{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:var(--surface-1);border:1px solid var(--hair);color:var(--ink-2);cursor:pointer;padding:0}
.nav-burger:hover{color:var(--ink);border-color:rgba(255,255,255,.28)}
.nav-burger svg{width:18px;height:18px}
.nav-in{display:flex;gap:6px;align-items:center;overflow-x:auto;flex:1 1 auto;min-width:0;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 26px),transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 26px),transparent 100%)}
.nav-in::-webkit-scrollbar{display:none}
.nav-in .go{color:var(--ink);border-color:var(--hair);background:var(--surface-1)}

/* выезжающая панель */
.dw-ov{position:fixed;inset:0;background:rgba(4,4,4,.62);opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility .25s;z-index:60}
.dw-ov.on{opacity:1;visibility:visible}
.dw{position:fixed;left:0;top:0;bottom:0;width:min(86vw,340px);z-index:61;overflow-y:auto;
  background:var(--surface-1);border-right:1px solid var(--hair);padding:18px 16px 44px;
  transform:translateX(-101%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.dw.on{transform:none}
.dw-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.dw-top span{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted)}
.dw-close{width:32px;height:32px;border-radius:9px;background:var(--surface-2);border:1px solid var(--hair);
  color:var(--ink-2);cursor:pointer;display:grid;place-items:center;padding:0}
.dw-close:hover{color:var(--ink)}
.dw-close svg{width:15px;height:15px}
.dw h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);
  margin:20px 0 6px;padding:0 10px}
.dw h4 i{font-style:normal;color:var(--aperture)}
.dw a{display:block;padding:8px 10px;border-radius:9px;color:var(--ink-2);text-decoration:none;font-size:15px}
.dw a:hover{background:var(--surface-2);color:var(--ink)}
.dw a.cur{background:var(--surface-2);color:var(--ink);font-weight:600}
body.dw-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){.dw,.dw-ov{transition:none}}
.nav a{
  flex:0 0 auto;color:var(--ink-2);text-decoration:none;font-size:13.5px;
  padding:6px 11px;border-radius:999px;border:1px solid transparent;white-space:nowrap;
}
.nav a:hover{color:var(--ink);border-color:var(--hair);background:var(--surface-1)}
.nav b{flex:0 0 auto;font-size:13.5px;color:var(--ink-muted);padding-right:8px;font-weight:600}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:76px 0 64px;border-bottom:1px solid var(--hair)}
.hero::before{
  content:"";position:absolute;inset:-40% -10% auto -10%;height:120%;
  background:
    radial-gradient(40% 54% at 16% 10%,rgba(57,135,229,.34),transparent 70%),
    radial-gradient(36% 50% at 84% 6%,rgba(217,89,38,.30),transparent 70%),
    radial-gradient(32% 42% at 52% 62%,rgba(25,158,112,.20),transparent 70%);
  pointer-events:none;
}
.hero-in{position:relative}
.kicker{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--ink-muted);border:1px solid var(--hair);
  padding:6px 12px;border-radius:999px;background:var(--surface-1);
}
h1{font-size:clamp(32px,5.4vw,58px);margin:20px 0 18px;max-width:20ch}
.lead{font-size:clamp(17px,2vw,20px);color:var(--ink-2);max-width:62ch}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.fact{
  border:1px solid var(--hair);background:var(--surface-1);border-radius:999px;
  padding:7px 14px;font-size:14px;color:var(--ink-2);
}
.fact i{font-style:normal;color:var(--ink);font-weight:600}

/* ---------- sections ---------- */
section{padding:64px 0;border-bottom:1px solid var(--hair)}
section{content-visibility:auto;contain-intrinsic-size:auto 1400px}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.10em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:14px}
.eyebrow .num{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:var(--surface-1);border:1px solid var(--hair);color:var(--ink);
  font-size:12.5px;letter-spacing:0;font-weight:650;
}
h2{font-size:clamp(24px,3.4vw,36px);margin-bottom:14px}
.sub{color:var(--ink-2);max-width:70ch;margin-bottom:30px}
h3{font-size:19px;margin-bottom:8px}

.card{background:var(--surface-1);border:1px solid var(--hair);border-radius:var(--r);padding:22px}
.grid{display:grid;gap:14px}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.g2,.g3{grid-template-columns:1fr}}

.tag{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  padding:4px 10px;border-radius:999px;border:1px solid var(--hair);color:var(--ink-2)}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.t-shutter{color:#8fbdf0;border-color:rgba(57,135,229,.4);background:rgba(57,135,229,.12)}
.t-aperture{color:#f0a184;border-color:rgba(217,89,38,.4);background:rgba(217,89,38,.12)}
.t-iso{color:#7fd3b4;border-color:rgba(25,158,112,.4);background:rgba(25,158,112,.12)}

.note{border-left:2px solid var(--warning);background:rgba(250,178,25,.07);
  padding:12px 16px;border-radius:0 10px 10px 0;color:var(--ink-2);font-size:15.5px}
.note b{color:var(--ink)}

ul.clean{list-style:none;padding:0;margin:0}
ul.clean li{position:relative;padding-left:20px;margin-bottom:9px;color:var(--ink-2);font-size:15.5px}
ul.clean li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--ink-muted)}
ul.clean li b{color:var(--ink)}
ul.clean li:last-child{margin-bottom:0}

/* ---------- demo shell ---------- */
.demo{background:var(--surface-2);border:1px solid var(--hair);border-radius:var(--r);padding:20px}
.demo-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.demo-head h3{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);font-weight:650}
.hint{font-size:13.5px;color:var(--ink-muted)}
.btnrow{display:flex;flex-wrap:wrap;gap:8px}
button.chip{
  font:inherit;font-size:14px;color:var(--ink-2);background:var(--surface-1);
  border:1px solid var(--hair);border-radius:10px;padding:7px 13px;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
button.chip:hover{color:var(--ink);border-color:rgba(255,255,255,.28)}
button.chip[aria-pressed="true"]{color:#0d0d0d;background:var(--ink);border-color:var(--ink);font-weight:600}

label.ctl{display:block;margin-bottom:16px}
label.ctl:last-child{margin-bottom:0}
.ctl-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:7px}
.ctl-name{font-size:14px;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.ctl-val{font-size:19px;font-weight:650;font-variant-numeric:tabular-nums}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--grid)}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--grid)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;margin-top:-7px;
  background:var(--ink);border:3px solid var(--page);box-shadow:0 0 0 1px var(--hair);
}
input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:var(--ink);border:3px solid var(--page);box-shadow:0 0 0 1px var(--hair)
}
input[type=range].s-shutter::-webkit-slider-thumb{background:var(--shutter)}
input[type=range].s-shutter::-moz-range-thumb{background:var(--shutter)}
input[type=range].s-aperture::-webkit-slider-thumb{background:var(--aperture)}
input[type=range].s-aperture::-moz-range-thumb{background:var(--aperture)}
input[type=range].s-iso::-webkit-slider-thumb{background:var(--iso)}
input[type=range].s-iso::-moz-range-thumb{background:var(--iso)}
.scale{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-muted);margin-top:2px}

/* reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- сцена «кадр» ---------- */
.frame{
  position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--hair);
  background:#0a0a0a;aspect-ratio:3/2;
}
.frame .expose{position:absolute;inset:0;transition:filter .18s linear}
.sky{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 22% 8%,#6a5f8f 0%,#3b3a5c 42%,#1b1b2b 78%,#101018 100%)}
.bokeh{position:absolute;inset:0;filter:blur(10px);transition:filter .18s linear}
.bokeh i{position:absolute;border-radius:50%;display:block;aspect-ratio:1;
  background:radial-gradient(circle at 34% 30%,rgba(255,236,200,.95),rgba(255,193,120,.55) 60%,rgba(255,160,80,0) 72%)}
.ground{position:absolute;left:0;right:0;bottom:0;height:26%;
  background:linear-gradient(180deg,#2b2622,#191512)}
.subject{position:absolute;left:50%;bottom:19%;transform:translateX(-50%);width:19%}
.subject .cup{height:0;padding-bottom:118%;border-radius:8px 8px 44% 44%/8px 8px 30% 30%;
  background:linear-gradient(100deg,#e8e2d6 0%,#cfc7b7 46%,#8d867a 100%);
  box-shadow:inset -6px 0 12px rgba(0,0,0,.30)}
.subject .shadow{position:absolute;left:-26%;right:-26%;bottom:-9%;height:16%;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.6),transparent 72%)}
.mover{position:absolute;bottom:9%;left:0;width:7%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#ff9d6e,#d95926 62%,#8c3413);
  animation:run 2.6s linear infinite}
@keyframes run{
  0%{transform:translateX(10%)} 50%{transform:translateX(880%)} 100%{transform:translateX(10%)}
}
.grain{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size:200px 200px;transition:opacity .18s linear}
.frame .badges{position:absolute;left:10px;right:10px;bottom:10px;display:flex;flex-wrap:wrap;gap:6px;z-index:3}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  padding:4px 9px;border-radius:8px;background:rgba(10,10,10,.72);backdrop-filter:blur(6px);
  border:1px solid var(--hair);color:var(--ink)}
.badge svg{width:13px;height:13px;flex:0 0 auto}
.badge.good{border-color:rgba(12,163,12,.55)}
.badge.warn{border-color:rgba(250,178,25,.55)}
.badge.crit{border-color:rgba(208,59,59,.6)}
.badge.info{border-color:rgba(57,135,229,.5)}

/* ---------- экспонометр ---------- */
.meter{padding:10px 4px 4px}
.meter-track{position:relative;height:62px}
.meter-line{position:absolute;left:0;right:0;top:38px;height:2px;background:var(--grid)}
.meter-tick{position:absolute;top:31px;width:1px;height:10px;background:var(--grid);transform:translateX(-.5px)}
.meter-tick.major{top:27px;height:18px;background:#4a4a46}
.meter-tick.zero{background:var(--ink-2);width:2px}
.meter-lab{position:absolute;top:46px;transform:translateX(-50%);font-size:11.5px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.meter-needle{position:absolute;top:0;transform:translateX(-50%);transition:left .18s ease,color .18s;display:flex;flex-direction:column;align-items:center}
.meter-needle svg{width:15px;height:13px}
.meter-needle span{display:block;font-size:12.5px;font-weight:700;text-align:center;margin-bottom:2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.meter-ends{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-muted);margin-top:2px}

/* ---------- диафрагма ---------- */
.iris-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center}
.iris{width:190px;height:190px;flex:0 0 auto}
.win{width:170px;flex:0 0 auto}
.win-frame{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;border:6px solid #26261f;background:#141412;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.win-light{position:absolute;inset:0;background:
  radial-gradient(28% 28% at 72% 24%,#fff6dc 0%,#ffd98f 55%,rgba(255,217,143,0) 70%),
  linear-gradient(180deg,#ffd9a0,#ffb04d 62%,#e08c3c)}
.win-cross{position:absolute;inset:0;pointer-events:none;z-index:3}
.win-cross::before,.win-cross::after{content:"";position:absolute;background:#26261f}
.win-cross::before{left:50%;top:0;bottom:0;width:7px;transform:translateX(-50%)}
.win-cross::after{top:50%;left:0;right:0;height:7px;transform:translateY(-50%)}
.win-sash{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(180deg,#2a2a27,#1c1c1a);
  border:1px solid #3a3a36;transition:transform .18s ease}
.win-sash.l{left:0;transform-origin:left}
.win-sash.r{right:0;transform-origin:right}
.win-cap{font-size:12.5px;color:var(--ink-muted);text-align:center;margin-top:8px}

/* ---------- глубина резкости ---------- */
.dof{display:flex;align-items:flex-end;justify-content:center;gap:6px;height:96px;padding-bottom:6px}
.dof i{display:block;border-radius:50%;background:linear-gradient(150deg,#dcd6c8,#8c857a)}
.dof-cap{text-align:center;font-size:13px;color:var(--ink-muted)}

/* ---------- затвор ---------- */
.shutterbox{position:relative;aspect-ratio:3/2;border-radius:12px;overflow:hidden;border:1px solid var(--hair);background:#0a0a0a}
.shutterbox .inner{position:absolute;inset:0;background:
  radial-gradient(90% 90% at 50% 40%,#f2c37a,#a86a2a 55%,#4a2c12 100%)}
.curtain{position:absolute;left:0;right:0;height:52%;background:linear-gradient(180deg,#232320,#131311);
  border-bottom:1px solid #3a3a36;box-shadow:0 4px 14px rgba(0,0,0,.6)}
.curtain.top{top:0;transition:transform var(--dur,.3s) cubic-bezier(.4,0,.6,1)}
.curtain.bot{bottom:0;border-bottom:none;border-top:1px solid #3a3a36;transition:transform var(--dur,.3s) cubic-bezier(.4,0,.6,1)}
.shutterbox.open .curtain.top{transform:translateY(-100%)}
.shutterbox.open .curtain.bot{transform:translateY(100%)}
.shutterbox .stamp{position:absolute;top:10px;left:10px;z-index:4;font-size:12.5px;font-weight:650;
  background:rgba(10,10,10,.7);border:1px solid var(--hair);padding:4px 9px;border-radius:8px}

/* ---------- фокусное расстояние ---------- */
.fov{position:relative;aspect-ratio:3/2;border-radius:12px;overflow:hidden;border:1px solid var(--hair);background:#101014}
.fov-scene{position:absolute;inset:0;transition:transform .25s ease}
.fov-sky{position:absolute;inset:0;background:linear-gradient(180deg,#26304a,#3c4a63 60%,#4b4a3e 100%)}
.fov-hill{position:absolute;left:-10%;right:-10%;bottom:0;height:34%;border-radius:50% 50% 0 0/28% 28% 0 0;background:#2c3327}
.fov-tree{position:absolute;bottom:26%;width:5%;aspect-ratio:1/2.6;background:linear-gradient(180deg,#38452f,#22291c);border-radius:50% 50% 20% 20%}
.fov-person{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);width:11%}
.fov-head{width:56%;margin:0 auto 6%;aspect-ratio:1/1.12;border-radius:50%;background:linear-gradient(160deg,#e6c3a1,#b98f68);
  transition:transform .25s ease;transform-origin:center 40%}
.fov-body{aspect-ratio:1/1.5;border-radius:34% 34% 12% 12%;background:linear-gradient(160deg,#4a6a8c,#2f4560)}
.fov-mark{position:absolute;inset:0;border:1px dashed rgba(255,255,255,.16);border-radius:12px;pointer-events:none}
.fov-scene{transform-origin:50% 47%}
.fov-head{position:relative;overflow:hidden}
.fov-eye{position:absolute;top:37%;width:14%;height:10%;border-radius:50%;background:rgba(58,38,26,.72)}
.fov-eye.l{left:22%}
.fov-eye.r{right:22%}
.fov-mouth{position:absolute;left:34%;right:34%;top:64%;height:6%;border-radius:0 0 50% 50%;background:rgba(122,62,46,.6)}
.fov-bg{position:absolute;inset:0;transform-origin:50% 80%}

/* угол обзора — малые кратные */
.aov{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:12px}
.aov figure{margin:0;text-align:center}
.aov svg{width:100%;height:auto}
.aov b{display:block;font-size:14.5px;margin-top:6px}
.aov i{display:block;font-style:normal;font-size:12.5px;color:var(--ink-muted);line-height:1.35}

/* ---------- кроп ---------- */
.crop{position:relative;aspect-ratio:3/2;border-radius:12px;overflow:hidden;border:1px solid var(--hair)}
.crop-box{position:absolute;border:2px solid var(--aperture);border-radius:6px;
  box-shadow:0 0 0 100vmax rgba(10,10,10,.62)}
.crop-tag{position:absolute;top:-1px;left:-1px;transform:translateY(-100%);font-size:11.5px;font-weight:700;
  color:#0d0d0d;background:var(--aperture);padding:2px 7px;border-radius:6px 6px 0 0}

/* ---------- таблица ---------- */
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--hair);vertical-align:top}
thead th{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);font-weight:650}
tbody th{font-weight:600;white-space:nowrap;color:var(--ink)}
tbody tr:last-child td{border-bottom:none}
.tbl-wrap{overflow-x:auto;border:1px solid var(--hair);border-radius:var(--r);background:var(--surface-1)}

/* ---------- шаги ---------- */
ol.steps{list-style:none;counter-reset:s;padding:0;margin:0}
ol.steps li{counter-increment:s;position:relative;padding:0 0 18px 46px;border-left:1px solid var(--hair);margin-left:14px}
ol.steps li:last-child{border-left-color:transparent;padding-bottom:0}
ol.steps li::before{
  content:counter(s);position:absolute;left:-15px;top:-2px;width:30px;height:30px;border-radius:50%;
  background:var(--surface-1);border:1px solid var(--hair);display:grid;place-items:center;
  font-size:13.5px;font-weight:700;color:var(--ink)
}
ol.steps b{display:block;margin-bottom:2px}
ol.steps p{color:var(--ink-2);font-size:15.5px;margin:0}

/* ---------- ПРОЛОГ: полноэкранный оверлей ---------- */
.intro{position:fixed;inset:0;z-index:200;background:var(--page);
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch}
.intro[hidden]{display:none}
body.intro-open{overflow:hidden}
.intro-stage{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden;
  scroll-snap-align:start;display:flex;align-items:center}
.intro-step{height:100svh;scroll-snap-align:start}
.intro-stage::before{content:"";position:absolute;inset:-25% -10% auto -10%;height:150%;pointer-events:none;
  background:
    radial-gradient(38% 52% at 16% 12%,rgba(57,135,229,.30),transparent 70%),
    radial-gradient(34% 48% at 84% 8%,rgba(217,89,38,.26),transparent 70%),
    radial-gradient(30% 42% at 52% 70%,rgba(25,158,112,.18),transparent 70%)}
.intro-inner{position:relative;width:100%;max-width:1100px;margin:0 auto;padding:0 26px;
  display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center}

.act{grid-column:1;grid-row:1;opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .45s ease,transform .45s ease}
.act.on{opacity:1;transform:none;pointer-events:auto}
.act .kicker{margin-bottom:16px}
.act .act-h{font-size:clamp(29px,4.9vw,53px);line-height:1.08;letter-spacing:-.025em;font-weight:650;
  margin:0 0 14px;max-width:19ch;color:var(--ink)}
.act p{font-size:clamp(16px,1.75vw,19px);color:var(--ink-2);max-width:46ch;margin:0}
.act p + p{margin-top:10px}
.act .facts{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.act .facts .fact{font-size:13.5px}

.viz{grid-column:2;grid-row:1;opacity:0;transform:scale(.96);pointer-events:none;
  transition:opacity .45s ease,transform .45s ease;justify-self:center;width:100%;max-width:390px}
.viz.on{opacity:1;transform:none}

/* финальный слайд */
.act-go{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:26px}
.act-btn{display:inline-flex;align-items:center;gap:9px;font:650 16px/1 var(--font);cursor:pointer;
  color:#0d0d0d;background:var(--ink);border:1px solid var(--ink);border-radius:12px;padding:14px 22px;
  text-decoration:none}
.act-btn:hover{opacity:.9}
.act-parts{display:grid;gap:10px;margin-top:22px}
.act-part{display:flex;gap:12px;align-items:baseline;font-size:15.5px;color:var(--ink-2)}
.act-part b{color:var(--ink);white-space:nowrap}

/* колесо режимов */
.dial-wrap{position:absolute;right:34px;bottom:30px;display:flex;flex-direction:column;align-items:center;gap:10px}
.dial{position:relative;width:170px;height:170px;flex:0 0 auto}
.dial-mark{position:absolute;left:50%;top:-3px;transform:translateX(-50%);width:0;height:0;z-index:3;
  border-left:7px solid transparent;border-right:7px solid transparent;border-top:11px solid var(--aperture)}
.dial-knurl{position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,#3a3a36 0 2.4deg,#141414 2.4deg 6deg)}
.dial-body{position:absolute;inset:9px;border-radius:50%;
  background:radial-gradient(circle at 38% 30%,#2e2e2b,#141416 72%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.5);
  transition:transform .55s cubic-bezier(.22,.7,.2,1)}
.dial-pos{position:absolute;left:50%;top:50%;width:42px;height:30px;margin:-15px 0 0 -21px;padding:0;
  background:none;border:0;cursor:pointer;color:var(--ink-muted);
  font:700 13px/30px var(--font);letter-spacing:.04em;
  transform:rotate(var(--a)) translateY(-62px);transition:color .3s}
.dial-pos:hover{color:var(--ink-2)}
.dial-pos[aria-current="true"]{color:var(--ink)}
.dial-hub{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  background:radial-gradient(circle at 40% 34%,#43433f,#1b1b1d);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.dial-cap{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted)}

.intro-skip{position:absolute;left:26px;bottom:34px;font-size:13.5px;color:var(--ink-muted);
  text-decoration:none;border:1px solid var(--hair);border-radius:999px;padding:8px 15px;background:var(--surface-1);
  cursor:pointer;font-family:var(--font)}
.intro-skip:hover{color:var(--ink)}
.intro-hint{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);font-size:13px;color:var(--ink-muted);
  display:flex;align-items:center;gap:8px;transition:opacity .4s}
.intro-hint svg{width:14px;height:14px;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

@media (max-width:900px){
  .intro-inner{grid-template-columns:1fr;gap:18px;padding:0 20px 130px}
  .intro-stage{align-items:flex-start;padding-top:50px}
  .act{grid-column:1;grid-row:2}
  .viz{grid-column:1;grid-row:1;max-width:196px;justify-self:start}
  .act .act-h{max-width:none;font-size:clamp(26px,7.4vw,36px)}
  .act p{font-size:15.5px}
  .act .facts{margin-top:16px}
  .act-parts{gap:8px;margin-top:16px}
  .act-part{font-size:14.5px;flex-direction:column;gap:1px;padding:10px 13px}
  .act-go{margin-top:18px;gap:10px}
  .viz-books{max-width:340px}
  .v-books{display:flex;flex-wrap:wrap;gap:7px}
  .v-book{padding:8px 12px}
  .v-book span{display:none}
  .dial-wrap{right:auto;left:20px;bottom:22px;flex-direction:row;align-items:center;gap:12px}
  .dial{width:132px;height:132px}
  .dial-pos{width:32px;height:26px;margin:-13px 0 0 -16px;font-size:10.5px;line-height:26px;
    transform:rotate(var(--a)) translateY(-46px)}
  .dial-body{inset:7px}
  .dial-hub{width:24px;height:24px;margin:-12px 0 0 -12px}
  .dial-mark{border-left-width:5px;border-right-width:5px;border-top-width:8px}
  .intro-skip{left:auto;right:20px;bottom:26px}
  .intro-hint{display:none}
}
@media (max-width:900px) and (max-height:720px){
  .viz{display:none}
  .act .facts{display:none}
  .dial-cap{display:none}
  .intro-stage{padding-top:38px}
  .intro-inner{padding-bottom:96px;gap:0}
  .act .kicker{margin-bottom:12px;padding:5px 11px;font-size:11.5px}
  .act .act-h{font-size:clamp(23px,6.8vw,31px);margin-bottom:10px}
  .act p{font-size:14.5px}
  .act-parts{gap:6px;margin-top:12px}
  .act-part{font-size:13.5px;padding:8px 11px}
  .act-go{margin-top:14px}
  .dial{width:116px;height:116px}
  .dial-pos{width:28px;height:26px;margin:-13px 0 0 -14px;font-size:9.5px;line-height:26px;
    transform:rotate(var(--a)) translateY(-40px)}
  .dial-body{inset:6px}
}
@media (prefers-reduced-motion:reduce){
  .intro{scroll-snap-type:none}
  .dial-body,.act,.viz{transition:none}
}

/* визуалы пролога */
.v-frame{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;border:1px solid var(--hair);background:#0b0d11}
.v-sky{position:absolute;inset:0;background:radial-gradient(120% 95% at 30% 14%,#5b6478 0%,#333a49 46%,#181c25 100%)}
.v-ball{position:absolute;bottom:18%;width:13%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#ff9d6e,#d95926 62%,#8c3413);animation:vrun 3s linear infinite}
@keyframes vrun{0%{left:8%;filter:blur(0)}45%{left:74%;filter:blur(0)}
  50%{left:78%;filter:blur(6px)}95%{left:12%;filter:blur(6px)}100%{left:8%;filter:blur(0)}}
.v-curtain{position:absolute;left:0;right:0;height:52%;background:linear-gradient(180deg,#232320,#131311);z-index:3}
.v-curtain.t{top:0;animation:vcurt-t 3s ease-in-out infinite}
.v-curtain.b{bottom:0;animation:vcurt-b 3s ease-in-out infinite}
@keyframes vcurt-t{0%,4%{transform:translateY(0)}11%,89%{transform:translateY(-100%)}96%,100%{transform:translateY(0)}}
@keyframes vcurt-b{0%,4%{transform:translateY(0)}11%,89%{transform:translateY(100%)}96%,100%{transform:translateY(0)}}
.v-bokeh i{position:absolute;border-radius:50%;aspect-ratio:1;
  background:radial-gradient(circle at 34% 30%,rgba(255,236,200,.95),rgba(255,193,120,.55) 60%,rgba(255,160,80,0) 72%);
  animation:vblur 5s ease-in-out infinite}
@keyframes vblur{0%,100%{filter:blur(1px);opacity:.85}50%{filter:blur(11px);opacity:1}}
.v-cup{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);width:26%;height:0;padding-bottom:32%;
  border-radius:10px 10px 46% 46%/10px 10px 30% 30%;
  background:linear-gradient(100deg,#e8e2d6 0%,#cfc7b7 46%,#8d867a 100%);z-index:2}
.v-expo{position:absolute;inset:0;animation:vexpo 5s ease-in-out infinite}
@keyframes vexpo{0%{filter:brightness(.35)}45%,55%{filter:brightness(1)}100%{filter:brightness(2.4)}}
.v-meter{position:absolute;left:12%;right:12%;bottom:9%;height:2px;background:#4a4a46;z-index:4}
.v-meter b{position:absolute;top:-13px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;
  border-bottom:10px solid var(--good);margin-left:-6px;animation:vneedle 5s ease-in-out infinite}
@keyframes vneedle{0%{left:88%;border-bottom-color:var(--critical)}45%,55%{left:50%;border-bottom-color:var(--good)}
  100%{left:10%;border-bottom-color:var(--critical)}}
.v-gaze{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;z-index:4;
  background:var(--warning);box-shadow:0 0 0 4px rgba(250,178,25,.22);animation:vgaze 6s ease-in-out infinite}
@keyframes vgaze{0%,12%{left:24%;top:44%}25%,37%{left:22%;top:66%}50%,62%{left:52%;top:72%}
  75%,87%{left:78%;top:30%}100%{left:24%;top:44%}}
.v-shape{position:absolute;background:#191d24}
.v-line{position:absolute;inset:0;z-index:3}
.v-books{display:grid;gap:9px}
.v-book{display:flex;gap:11px;align-items:baseline;border:1px solid var(--hair);background:var(--surface-1);
  border-radius:12px;padding:12px 14px}
.v-book b{font-size:14.5px;white-space:nowrap}
.v-book span{font-size:12.5px;color:var(--ink-muted)}

@media (prefers-reduced-motion:reduce){
  .v-ball,.v-curtain,.v-bokeh i,.v-expo,.v-meter b,.v-gaze,.intro-hint svg{animation:none!important}
  .v-curtain{transform:translateY(-100%)}
  .v-curtain.b{transform:translateY(100%)}
  .intro-dots,.intro-bar,.intro-hint{display:none}
}

/* ---------- часть II: композиция ---------- */

.part{padding:70px 0 60px;border-bottom:1px solid var(--hair);position:relative;overflow:hidden}
.part::before{content:"";position:absolute;inset:-50% -10% auto -10%;height:150%;
  background:radial-gradient(40% 60% at 20% 20%,rgba(217,89,38,.26),transparent 70%),
             radial-gradient(38% 55% at 80% 30%,rgba(57,135,229,.22),transparent 70%);
  pointer-events:none}
.part-in{position:relative}
.part h2{font-size:clamp(28px,4.4vw,46px);margin:16px 0 16px}
.part .lead{font-size:clamp(16px,1.9vw,19px);color:var(--ink-2);max-width:64ch}
.srcs{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.src{border:1px solid var(--hair);background:var(--surface-1);border-radius:12px;padding:12px 16px;max-width:340px}
.src b{display:block;font-size:15px}
.src span{font-size:13.5px;color:var(--ink-muted)}

blockquote{margin:0;padding:14px 0 14px 18px;border-left:2px solid var(--aperture);
  font-size:16.5px;line-height:1.55;color:var(--ink)}
blockquote cite{display:block;margin-top:8px;font-style:normal;font-size:13.5px;color:var(--ink-muted)}

.toggles{display:flex;flex-wrap:wrap;gap:8px}
.tg{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);
  background:var(--surface-1);border:1px solid var(--hair);border-radius:10px;padding:8px 12px;cursor:pointer;user-select:none}
.tg input{position:absolute;opacity:0;pointer-events:none}
.tg .box{width:16px;height:16px;border-radius:5px;border:1.5px solid #4a4a45;flex:0 0 auto;position:relative;transition:.15s}
.tg .box::after{content:"";position:absolute;inset:3px;border-radius:2px;background:var(--aperture);opacity:0;transition:.15s}
.tg input:checked + .box{border-color:var(--aperture)}
.tg input:checked + .box::after{opacity:1}
.tg:hover{color:var(--ink);border-color:rgba(255,255,255,.28)}

/* сцена «улица» для композиционных демо */
.scene{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--hair);aspect-ratio:3/2;background:#0f1116}
.scene *{transition:background .3s,filter .3s,opacity .3s,transform .3s}
.sc-sky{position:absolute;inset:0;background:linear-gradient(180deg,#7d8aa6,#aeb7c6 62%,#c8ccd4)}
.sc-ground{position:absolute;left:0;right:0;bottom:0;height:34%;background:#4d4a46}
.sc-wall{position:absolute;background:#6d6357}
.sc-win{position:absolute;background:#2b3038}
.sc-person{position:absolute;bottom:16%;width:6%;aspect-ratio:1/2.6;border-radius:44% 44% 12% 12%;background:#23262c}
.sc-lamp{position:absolute;bottom:34%;width:1.1%;height:44%;background:#2f3238}
.sc-lamp::after{content:"";position:absolute;top:-8%;left:-180%;width:460%;aspect-ratio:2/1;border-radius:50%;background:#2f3238}
.sc-sun{position:absolute;border-radius:50%;background:radial-gradient(circle at 40% 38%,#fff6dc,#ffd98f 60%,rgba(255,217,143,0) 72%)}
.scene.flat .sc-sky{background:#b9bec7}
.scene.flat .sc-ground{background:#585450}
.scene.flat .sc-wall{background:#7b7268}
.scene.flat .sc-win,.scene.flat .sc-person,.scene.flat .sc-lamp,.scene.flat .sc-lamp::after{background:#20232a}
.scene.flat .sc-sun{background:#efe6d2}
.scene.flat .sc-detail{opacity:0}
.sc-overlay{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s}
.sc-overlay.on{opacity:1}

.cap-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:13.5px;color:var(--ink-muted)}

/* маршрут взгляда */
.gaze{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--hair);aspect-ratio:3/2;background:#0f1116}
.gz-svg{position:absolute;inset:0}
.gz-dot{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  background:var(--warning);box-shadow:0 0 0 3px rgba(250,178,25,.25);transition:left .35s cubic-bezier(.5,0,.4,1),top .35s cubic-bezier(.5,0,.4,1)}
.gz-hint{position:absolute;left:10px;bottom:10px;font-size:12.5px;background:rgba(10,10,10,.72);
  border:1px solid var(--hair);border-radius:8px;padding:4px 9px}

/* решающий момент */
.mom{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--hair);aspect-ratio:3/2;background:#0f1116}
.mom-arch{position:absolute;inset:0;width:100%;height:100%}
.mom-ground{position:absolute;left:0;right:0;bottom:0;height:26%;background:#3a3733}
.mom-walker{position:absolute;bottom:24%;width:7%;aspect-ratio:1/2.5;border-radius:44% 44% 12% 12%;background:#14161b}
.mom-shot{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.mom-shot.flash{animation:flash .32s ease-out}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}
.mom-result{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;min-height:34px}
.mom-tries{font-size:13.5px;color:var(--ink-muted);font-variant-numeric:tabular-nums}

/* ч/б */
.bw{filter:grayscale(1) contrast(1.06)}
.bw-wrap .frame,.bw-wrap .scene{transition:filter .35s}

/* равновесие */
.bal{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--hair);aspect-ratio:3/2;background:#12141a}
.bal-sky{position:absolute;inset:0;background:linear-gradient(180deg,#3d4655,#77808f 70%,#8d94a0)}
.bal-ground{position:absolute;left:0;right:0;bottom:0;height:26%;background:#3b3833}
.bal-hero{position:absolute;bottom:24%;width:9%;aspect-ratio:1/2.4;border-radius:44% 44% 12% 12%;background:#191c22;transition:left .18s ease,transform .25s ease}
.bal-hero::after{content:"";position:absolute;top:6%;left:-22%;width:38%;aspect-ratio:1;border-radius:50%;background:#191c22}
.bal-mid{position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(255,255,255,.18)}
.scales{margin-top:12px}
.sc-beam{position:relative;height:44px}
.sc-bar{position:absolute;left:8%;right:8%;top:14px;height:4px;border-radius:2px;background:var(--grid);
  transform-origin:50% 50%;transition:transform .25s ease}
.sc-piv{position:absolute;left:50%;top:16px;transform:translateX(-50%);width:0;height:0;
  border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:16px solid #4a4a45}

/* симметрия */
.sym{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--hair);aspect-ratio:2/1;background:#14161c}
.sym i{position:absolute;bottom:22%;width:13%;aspect-ratio:1/1.9;border-radius:8px;background:#e0dcd2;transition:.25s}
.sym .axis{position:absolute;top:8%;bottom:8%;left:50%;width:1px;background:rgba(255,255,255,.16)}

/* связи */
.lnk{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--hair);aspect-ratio:3/2;background:#0f1116}
.lnk-svg{position:absolute;inset:0;opacity:0;transition:opacity .3s}
.lnk-svg.on{opacity:1}
.lnk-obj{position:absolute}

/* соразмерность */
.pairs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.pair{background:var(--surface-1);border:1px solid var(--hair);border-radius:12px;padding:14px 10px 10px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:10px;transition:border-color .15s,background .15s}
.pair:hover{border-color:rgba(255,255,255,.3)}
.pair.sel{border-color:var(--aperture);background:rgba(217,89,38,.10)}
.pair .row{display:flex;align-items:flex-end;gap:8px;height:72px}
.pair .sq{background:#dcd7cb;border-radius:2px}
.pair small{font-size:12.5px;color:var(--ink-muted)}

/* глубина */
.depth{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--hair);aspect-ratio:3/2;background:#101319}
.d-plane{position:absolute;inset:0;background:linear-gradient(180deg,#39404d 0%,#39404d 52%,#4a4740 52%,#3a3833 100%)}
.d-post{position:absolute;bottom:24%;width:7%;aspect-ratio:1/2.4;border-radius:3px;
  background:#1d2027;transform-origin:50% 100%}
.d-lines{position:absolute;inset:0;opacity:0;transition:opacity .35s}
.d-haze{position:absolute;left:0;right:0;top:30%;height:36%;opacity:0;transition:opacity .35s;
  background:linear-gradient(180deg,rgba(200,214,232,0),rgba(200,214,232,.55))}
.d-count{font-variant-numeric:tabular-nums}

.light-tall{display:none}
.me-s,.cap-s{display:none}
.me-l,.me-s,.cap-l,.cap-s{font-style:normal}

/* ---------- телефоны ---------- */
@media (max-width:560px){
  /* схема пути света — вертикальная версия */
  .light-wide{display:none}
  .light-tall{display:block;max-width:400px;margin:0 auto}

  /* короткие подписи там, где длинные переносятся */
  .me-l,.cap-l{display:none}
  .me-s,.cap-s{display:inline}
  .meter-ends{font-size:12px}

  /* три кадра со смазом остаются в ряд */
  .tiles{grid-template-columns:repeat(3,1fr);gap:8px}
  .tiles .dof-cap{font-size:12px;line-height:1.35}

  /* таблицы разворачиваются в карточки */
  table.cards thead{display:none}
  table.cards tr{display:block;padding:12px 0;border-bottom:1px solid var(--hair)}
  table.cards tbody tr:last-child{border-bottom:none}
  table.cards td,table.cards tbody th{display:block;border:none;padding:3px 2px;white-space:normal}
  table.cards tbody th{font-size:16.5px;font-weight:650;padding-bottom:5px;text-align:left}
  table.cards td[data-label]{
    display:grid;grid-template-columns:minmax(88px,34%) 1fr;gap:10px;align-items:baseline;color:var(--ink-2)
  }
  table.cards td[data-label]::before{
    content:attr(data-label);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-muted)
  }
  .tbl-wrap{overflow-x:visible}

  /* тап-таргеты */
  input[type=range]{height:34px}
  input[type=range]::-webkit-slider-thumb{width:24px;height:24px;margin-top:-10px}
  input[type=range]::-moz-range-thumb{width:24px;height:24px}
  button.chip{padding:10px 15px;font-size:15px}
  .nav a{padding:9px 12px}
  .demo{padding:16px}
  .card{padding:18px}
}

footer{padding:44px 0 60px;color:var(--ink-muted);font-size:14.5px}

/* ================= СТРАНИЦА ПРИЁМОВ ================= */
.tk-hero{padding:64px 0 52px;border-bottom:1px solid var(--hair);position:relative;overflow:hidden}
.tk-hero::before{content:"";position:absolute;inset:-40% -10% auto -10%;height:150%;pointer-events:none;
  background:radial-gradient(38% 52% at 18% 14%,rgba(250,178,25,.20),transparent 70%),
             radial-gradient(34% 48% at 82% 10%,rgba(217,89,38,.24),transparent 70%)}
.tk-hero .wrap{position:relative}
.tk-hero h1{font-size:clamp(30px,4.8vw,50px);margin:18px 0 16px;max-width:22ch}

/* карточка приёма */
.tk{background:var(--surface-1);border:1px solid var(--hair);border-radius:var(--r);padding:20px;
  display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media (max-width:860px){.tk{grid-template-columns:1fr;gap:16px}}
.tk-num{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-muted);margin-bottom:10px}
.tk-num b{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--surface-2);
  border:1px solid var(--hair);color:var(--ink);font-size:12px;letter-spacing:0}
.tk h2{font-size:clamp(20px,2.4vw,26px);margin-bottom:10px}
.tk .lede{font-size:15.5px;color:var(--ink-2);margin-bottom:14px}
.tk-meta{border-top:1px solid var(--hair);margin-top:14px;padding-top:12px;font-size:14.5px;color:var(--ink-2)}
.tk-meta p{margin:0 0 8px}
.tk-meta p:last-child{margin:0}
.tk-meta b{color:var(--ink)}
.tk-meta a{color:var(--shutter);text-decoration:none;border-bottom:1px solid rgba(57,135,229,.4)}
.tk-meta a:hover{border-bottom-color:var(--shutter)}
.tk-src{display:inline-block;font-size:12.5px;color:var(--ink-muted);border:1px solid var(--hair);
  border-radius:999px;padding:3px 10px;margin-bottom:12px}

/* сцена «до / после» */
.tk-frame{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:12px;border:1px solid var(--hair);background:#0f1116}
.tk-scene{position:absolute;inset:0;transition:transform .55s cubic-bezier(.4,0,.2,1);transform-origin:50% 62%}
.tk.on .tk-scene{transform:var(--on,none)}
.tk .only-on{opacity:0;transition:opacity .45s ease}
.tk.on .only-on{opacity:1}
.tk .only-off{opacity:1;transition:opacity .45s ease}
.tk.on .only-off{opacity:0}
.tk-cap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.tk-state{font-size:13.5px;color:var(--ink-muted)}
.tk.on .tk-state{color:var(--ink-2)}

/* строительные элементы сцен */
.s-sky{position:absolute;inset:0;background:linear-gradient(180deg,#46536b,#7d879a 58%,#a8adb8)}
.s-sky.warm{background:linear-gradient(180deg,#2c3b57,#7a6a7a 52%,#d69a63)}
.s-sky.dull{background:linear-gradient(180deg,#5a6373,#8b8f99 60%,#a3a6ad)}
.s-ground{position:absolute;left:0;right:0;bottom:0;height:30%;background:#3b3a34}
.s-hill{position:absolute;left:-12%;right:-12%;bottom:26%;height:16%;border-radius:50% 50% 0 0/70% 70% 0 0;background:#2f3a2c}
.s-fig{position:absolute;border-radius:44% 44% 10% 10%;background:#191c22}
.s-head{position:absolute;border-radius:50%;background:#191c22}
.s-tree{position:absolute;border-radius:50% 50% 18% 18%;background:linear-gradient(180deg,#39452f,#222a1c)}
.s-sun{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 42% 40%,#fff6dc,#ffd98f 55%,rgba(255,217,143,0) 72%)}
.s-house{position:absolute;background:#4e4740}
.s-water{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#2a3448,#1d2431)}
.s-mirror{position:absolute;transform:scaleY(-1);filter:blur(1.5px) brightness(.55)}
.s-branch{position:absolute;background:#14161b;border-radius:0 0 60% 40%}
.s-arch{position:absolute;border:14px solid #171a20;border-bottom:none;border-radius:50% 50% 0 0/60% 60% 0 0}
.s-rock{position:absolute;border-radius:46% 54% 40% 60%/50% 44% 56% 50%;background:#22252b}
.s-path{position:absolute;inset:0}
.s-grid{position:absolute;inset:0;pointer-events:none}
.s-grid i{position:absolute;background:rgba(255,255,255,.28)}
.s-grid i.v{top:0;bottom:0;width:1px}
.s-grid i.h{left:0;right:0;height:1px}
.s-mark{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  border:2px solid var(--warning);box-shadow:0 0 0 3px rgba(250,178,25,.2)}

/* блок «усилить/ослабить» */
.dp-modes{display:flex;gap:8px;flex-wrap:wrap}
.dp-list{margin-top:14px}
.dp-list li{font-size:15px}
.tk-state{position:relative;display:grid}
.tk-state>span{grid-area:1/1}
.s-fg{position:absolute;background:#0c0e12}
.tk{content-visibility:auto;contain-intrinsic-size:auto 460px}
/* домик со стенами и тёмной крышей */
.s-hut{position:absolute;background:#8b8071}
.s-hut::before{content:"";position:absolute;left:-16%;right:-16%;bottom:100%;height:66%;
  background:#2b3038;clip-path:polygon(50% 0,100% 100%,0 100%)}
a.act-part{text-decoration:none;border:1px solid var(--hair);background:var(--surface-1);
  border-radius:12px;padding:12px 15px;transition:border-color .15s,background .15s}
a.act-part:hover{border-color:rgba(255,255,255,.28);background:var(--surface-2)}
a.act-part span{color:var(--ink-2)}