/* ОДИН ШРИФТ, ШЕСТЬ РОЛЕЙ
   1 название: h1 900, h2 800, плотный набор   2 название и метка: 600   3 текст: 400
   4 речь: 300 крупно                          5 подпись: 400 графит    6 число: 200 огромное, 500 малое
   Курсива нет. Подчёркивание только у ссылок. Цвет только как заливка. */
body{background:var(--paper);color:var(--ink);font:400 var(--fs-text)/1.5556 var(--sans);font-optical-sizing:auto}
.sp{--bg:var(--paper);--fg:var(--ink);--mu:var(--graphite);--ln:rgba(14,14,13,.14)}
.si{--bg:var(--ink);--fg:var(--paper);--mu:#B8B6AF;--ln:rgba(239,237,230,.18)}
.sb{--bg:var(--ink);--fg:var(--paper);--mu:#B8B6AF;--ln:rgba(239,237,230,.18)}
.sp,.si,.sb{background-color:var(--bg);color:var(--fg)}
h1{font-weight:800;font-size:var(--fs-hero);line-height:.9;letter-spacing:-.03em}
h2{font-weight:800;font-size:var(--fs-title);line-height:.9;letter-spacing:-.03em}
.sub,.name,.btn,.opt,
.sub{display:block;font-size:var(--fs-cap);line-height:1.3;letter-spacing:-.01em}

p{max-width:var(--m-l)}p+p{margin-top:var(--g1)}.p-s{max-width:var(--m-s)}
.lead{font-size:var(--fs-lead);line-height:1.5;max-width:var(--m-m)}
.q{font-family:var(--serif);font-style:italic;font-weight:300;font-size:var(--fs-speech);line-height:1.1;letter-spacing:-.01em;max-width:26ch}
.q.sm{font-size:var(--fs-lead)}.q.xl{max-width:20ch}
.strap{font-weight:400;font-size:var(--fs-lead);line-height:1.3;letter-spacing:-.01em;max-width:var(--m-s)}
.cap{font-size:var(--fs-cap);line-height:1.5;color:var(--mu);max-width:var(--m-m)}
.tn,time,.num{font-variant-numeric:tabular-nums}
time{font-weight:600}
.num{font-weight:200;font-size:var(--fs-display);line-height:.9;letter-spacing:-.05em}
.c{text-align:center;margin-inline:auto}
b,strong{font-weight:600}
a{color:inherit;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.cit{font-size:.75em;vertical-align:super;padding:0 1px}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.btn{font-size:var(--fs-cap);background:var(--fg);color:var(--bg);padding:.9rem 1.5rem;border-radius:var(--r);transition:box-shadow .15s,background .15s;margin:.4rem .5rem .4rem 0;min-height:44px;letter-spacing:-.01em}
.btn.o{background:none;color:inherit;border:1px solid currentColor}
.opt{font-size:var(--fs-cap);line-height:1;letter-spacing:-.03em;border:1px solid currentColor;border-radius:var(--r);padding:1rem 1.75rem;min-height:44px}
.opt{max-width:100%}
.opt:hover,.opt.sel{background:var(--fg);color:var(--bg)}
.skip{position:fixed;left:.5rem;top:-4.5rem;z-index:120;background:var(--ink);color:var(--paper);padding:.8rem 1.1rem;border-radius:var(--r);font-weight:600}.skip:focus{top:.5rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* вход */
.hero{text-align:center;align-items:center;justify-content:center;gap:0}
.hero__in{display:flex;flex-direction:column;align-items:center;will-change:transform;opacity:calc(1 - var(--he,0));transform:translateY(calc(var(--he,0) * -5vh)) scale(calc(1 - var(--he,0)*.06))}
.hero 
.hero .timer{font-weight:200;font-size:var(--fs-display);line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.hero .bar{width:min(86vw,1200px);height:6px;background:var(--ln);margin:var(--g1) 0 var(--g2);overflow:hidden}
.hero .bar i{display:block;height:100%;width:calc(var(--left,1)*100%);background:var(--fg)}
.hero h1{margin:0}.hero .strap{margin:var(--g1) auto 0;text-align:center}
.stagewrap{height:430vh}.stagewrap .pin{display:grid;place-items:center;text-align:center;padding:0 var(--m)}
.ph{position:absolute;left:var(--m);right:var(--m);top:50%;opacity:var(--o,0);transform:translateY(calc(-50% + (1 - var(--o,0))*3rem));text-align:center}
.ph .q{margin:0 auto;font-size:var(--fs-title);line-height:1}.ph .dim{opacity:var(--dm,1)}
.turn{text-align:center}.turn .q.xl{margin:0 auto}.turn .lead{margin:var(--g2) auto 0}
/* ночь */
.nz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:5vw;align-items:center;height:100%;padding:0 var(--m)}
.nz__clock canvas{width:min(100%,62vh);aspect-ratio:1}
.nt{display:flex;gap:var(--g2);flex-wrap:wrap;margin:var(--g1) 0}
.nt time{display:block;font-weight:200;font-size:var(--fs-title);line-height:.9;letter-spacing:-.05em}
.nt .k::before{content:'';display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--fg);margin-right:.45rem}
#nq{margin:var(--g1) 0;min-height:2.4em}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.chips li{border:1px solid currentColor;border-radius:var(--r);padding:.2rem .8rem;font-size:var(--fs-tag);opacity:.55;font-weight:600}.chips li.on{opacity:1;background:var(--fg);color:var(--bg)}
.night-list{display:none}.night-list li{display:flex;gap:1rem;align-items:baseline;padding:.5rem 0;border-top:1px solid var(--ln)}.night-list time{flex:none;width:3.6em}.night-list .q{flex:1;min-width:0;max-width:none}
.nend{text-align:center}.nend .q{margin:0 auto}.nend .q+.q{margin-top:var(--g2)}
/* шкала дня: одна и та же в зонах 3 и 4 (слева), риски совпадают с часами */
.tl{--ax:4.75rem;position:relative}
.tl .axis{position:absolute;left:var(--ax);top:0;bottom:0;width:1px;background:currentColor;opacity:.6}
.tick{position:absolute;left:calc(var(--ax) - var(--l));width:var(--l);height:1px;background:currentColor;transform:translateY(-.5px)}
.tick.hr{--l:1.1rem}.tick.m15{--l:.7rem;opacity:.7}.tick.m5{--l:.35rem;opacity:.5}
.hl{position:absolute;left:0;width:calc(var(--ax) - 1.4rem);text-align:right;transform:translateY(-50%);font-size:var(--fs-tag);font-weight:600}
.ev{position:absolute;left:var(--ax);right:0;display:flex;align-items:center;gap:.75rem;transform:translateY(-50%)}
.ev .cn{width:clamp(1rem,4vw,2.5rem);height:1px;background:currentColor;flex:none}
.ev time{font-size:var(--fs-cap);flex:none}
.dot{width:13px;height:13px;border-radius:50%;background:currentColor;flex:none}
.tl--long{height:clamp(900px,190vh,1700px);margin:var(--g2) 0}
.tl--long .name{font-size:var(--fs-speech);font-weight:800;line-height:1;letter-spacing:-.03em}
.tl--long .ev{opacity:clamp(0,calc((var(--p,0)*1.3 - var(--at,0))*10),1);margin-left:calc((1 - clamp(0,calc((var(--p,0)*1.3 - var(--at,0))*10),1))*2rem)}
.tl--pin{height:min(76vh,620px);height:min(76svh,620px)}.tl--pin .name{font-size:var(--fs-cap);font-weight:600;line-height:1.1}
.now{position:absolute;left:var(--ax);right:0;height:2px;margin-top:-1px;background:currentColor;pointer-events:none;display:none}
.now time{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:var(--fs-tag);background:currentColor;color:var(--bg);padding:.25rem .6rem;border-radius:var(--r);line-height:1}
/* зона 4 */
.d4{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"t l";gap:5vw;align-items:center;height:100%;padding:0 var(--m)}
.d4__r{grid-area:t}.d4__l{grid-area:l}
.seg{display:none;gap:.5rem;flex-wrap:wrap;margin-top:var(--g1)}
.seg button{border:1px solid currentColor;border-radius:var(--r);padding:.6rem 1rem;min-height:44px;font-weight:600}
.seg button[aria-pressed=true]{background:var(--fg);color:var(--bg)}
/* зона 5 */
.stage{margin:var(--g2) 0 var(--g3)}
.st-v{display:none}.st-v.on{display:block}
.st-v .q{margin:0 0 var(--g1)}
#st-dots{position:relative;height:min(30vh,240px);margin:var(--g1) 0;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
#st-dots button{position:absolute;width:44px;height:44px;margin:-22px;border-radius:50%;background:var(--fg)}
.scale{position:relative;height:56px;margin:var(--g2) 0;border-bottom:1px solid var(--fg);background:repeating-linear-gradient(90deg,var(--fg) 0 1px,transparent 1px 5%) bottom/100% 10px no-repeat}
.mk{position:absolute;bottom:0;width:3px;background:var(--fg)}
.mk.real{height:44px}.mk.you,.mk.you2{display:none;height:26px;background:var(--fg)}.mk.you2{opacity:.6}
.mk em{position:absolute;font-style:normal;white-space:nowrap;font-size:var(--fs-cap)}
.mk.real em{top:-1.7rem;transform:translateX(-50%)}.mk.you em,.mk.you2 em{top:calc(100% + .3rem);transform:translateX(-50%)}
.cols{display:grid;gap:var(--g2);margin-top:var(--g2)}
.cols>div{border-top:1px solid currentColor;padding-top:.9rem}
.has-note{display:grid;grid-template-columns:minmax(0,1fr) 15em;gap:max(2em,4vw);align-items:start;margin-top:var(--g2)}
.note{border-left:1px solid currentColor;padding-left:1rem;color:var(--mu);font-size:var(--fs-cap)}
/* зона 7 */
#sc{display:grid;grid-template-columns:repeat(60,minmax(0,1fr));align-items:center;margin:var(--g2) 0 var(--g1);min-height:30px}
#sc i{justify-self:center;width:min(12px,70%);aspect-ratio:1;border-radius:50%;background:currentColor;transition:transform .5s,opacity .5s}
#sc i.x{transform:scale(.22);opacity:.3}#sc i.y{transform:scale(1.9)}
/* зона 8 */
/* зона 9 */
.fs{display:none;margin-top:var(--g2)}.fs.on{display:block}
.opts{display:flex;gap:1rem;flex-wrap:wrap;margin-top:var(--g2)}
.three{margin:var(--g2) 0}.three>div{border-top:1px solid currentColor;padding:1.5rem 0 var(--g2)}
.three .q{font-family:var(--sans);font-style:normal;font-size:var(--fs-speech);max-width:none;margin:0;font-weight:800;letter-spacing:-.03em;line-height:1}
.three .v{font-weight:200;font-size:var(--fs-hero);line-height:.9;letter-spacing:-.05em;margin:var(--g1) 0 .5rem;font-variant-numeric:tabular-nums}
.three p{margin:0;max-width:var(--m-m)}
/* подвал */
.fcols{display:grid;grid-template-columns:1.4fr 1fr;gap:5vw;margin-top:var(--g2)}
.src{counter-reset:s}.src li{display:grid;grid-template-columns:3rem minmax(0,1fr);counter-increment:s;scroll-margin-top:30vh;margin-bottom:.8rem;max-width:var(--m-l);font-size:var(--fs-cap)}
.src li::before{content:'[' counter(s) ']';grid-column:1;grid-row:1;font-weight:600}
.src li>*{grid-column:2;display:block}.src li>b{font-weight:600}.src li>span{color:var(--mu)}.src li>a{margin-top:.3rem;width:max-content;max-width:100%}
.src li:target{outline:1px solid currentColor;outline-offset:6px}
.foot dt{font-weight:600;font-size:var(--fs-cap);color:var(--mu);margin-top:.75rem}.foot dd{font-size:var(--fs-cap);max-width:var(--m-m)}

/* боковая рейка зон: девять точек. Прочитанные закрашены и нажимаются (возврат), непрочитанные пустые и неактивны, текущая в кольце. Цвет подбирается под светлый и тёмный экран сам (mix-blend-mode) */
#rail{position:fixed;right:.9rem;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:0;color:#fff;mix-blend-mode:difference}
#rail .b{display:flex;align-items:center;justify-content:flex-end;gap:.6rem;min-height:1.7rem;min-width:1.7rem;padding:0 .3rem}
#rail .b i{display:block;width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;background:transparent;opacity:.5;flex:none}
#rail .b.on i{background:currentColor;opacity:1}
#rail .b.cur i{opacity:1;outline:1.5px solid currentColor;outline-offset:3px}
#rail .b:not(:disabled){cursor:pointer}
#rail .b{position:relative}
#rail .nm{position:absolute;right:100%;top:50%;transform:translateY(-50%);margin-right:.3rem;pointer-events:none;font-size:var(--fs-tag);font-weight:600;white-space:nowrap;opacity:0;background:#fff;color:#000;padding:.15rem .5rem;border-radius:var(--r);transition:opacity .2s}
#rail .b:hover .nm,#rail .b:focus-visible .nm{opacity:1}
body[data-surf=i]{--tc:var(--paper);--tb:rgba(11,11,11,.9);--tl:rgba(241,241,238,.16)}

/* зона 8: жизнь в годах; каждый год можно нажать */
.life{margin:var(--g2) 0 0}.life .sub{margin-bottom:.6rem}
.yrs{display:flex;gap:4px;height:4.5rem}
.yr{position:relative;flex:1;min-width:0;border:1px solid var(--mu);background:transparent;padding:0;overflow:hidden}
.yr::after{content:'';position:absolute;left:0;right:0;bottom:0;height:0;background:currentColor;transition:height .7s}
.mem .yr::after{height:calc(6% + 94%*var(--m,.2))}
.yr:hover,.yr:focus-visible{border-color:currentColor;background:rgba(127,127,127,.14)}
.yr.sel{outline:2px solid currentColor;outline-offset:2px}
.yr:last-child{border-width:2px;border-color:currentColor}
#life-t{margin:var(--g2) 0 var(--g1);min-height:3.6em}
/* след чтения в финале */
.trace-map{margin:var(--g2) 0}.tr{text-decoration:none;display:grid;grid-template-columns:11rem 1fr 4.5rem;gap:1rem;align-items:center;padding:.55rem 0;border-top:1px solid var(--ln)}
.tr i{display:block;height:.9rem;background:var(--fg);width:calc(var(--w,.02)*100%);min-width:2px}
.tr b{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
/* зерно плёнки: спокойный фон, который напоминает, что видимое всегда немного стёрто */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:30;opacity:.085;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.1 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* подпись-закрытие */
.endline{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:var(--g3);padding-top:var(--g1);border-top:1px solid currentColor;font-size:var(--fs-text);font-weight:400}
.foot__h{font-size:var(--fs-speech);font-weight:800;letter-spacing:-.03em;line-height:1.1}

/* зона 3: огромные часы читателя справа */
.z3g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:5vw;align-items:start}
.readout{position:sticky;top:24vh;align-self:start}
.readout .tn{display:block;font-weight:200;font-size:var(--fs-hero);line-height:.9;letter-spacing:-.05em}
.readout .cap{display:block;margin-top:var(--g1);max-width:18ch}
.d4n{display:flex;align-items:baseline;gap:1rem;margin-top:var(--g2)}.d4n .tn{font-weight:200;font-size:var(--fs-hero);line-height:.9;letter-spacing:-.05em}

/* заголовок зоны: тонкая линия, название и действие читателя */
.chap{margin-bottom:var(--g2)}
/* окно времени на таймере */
.tnote{position:fixed;left:1.25rem;bottom:1.25rem;z-index:60;width:min(26rem,calc(100vw - 2.5rem));background:var(--paper);color:var(--ink);border:1px solid var(--ink);padding:1.25rem 1.5rem 1.4rem}
.tnote[hidden]{display:none}.tnote .big{font-weight:200;font-size:var(--fs-title);line-height:.9;letter-spacing:-.05em;margin-bottom:.5rem}
.tnote .x{position:absolute;top:.4rem;right:.5rem;font-size:1.5rem;line-height:1;width:44px;height:44px}
.ty{white-space:pre-wrap}
/* зона 5: переключатель */
.tabs{display:flex;gap:.5rem;margin-top:var(--g2)}
/* зона 7: ползунок */
.num.md{font-size:var(--fs-hero)}
.scl{display:flex;align-items:baseline;gap:1.5rem;margin-top:var(--g1)}
.rng{width:100%;height:3.2rem;accent-color:currentColor;margin-top:var(--g1)}.rngl{display:flex;justify-content:space-between;font-weight:600;font-size:var(--fs-cap);padding:0 .4rem}

/* опыт «десять секунд»: во время измерения экран меняется, две попытки видны всегда */
.att{margin-top:var(--g2)}
.att li{display:grid;grid-template-columns:auto 1fr;gap:.2rem .75rem;align-items:baseline;position:relative}
.att .n{grid-row:span 2;font-size:var(--fs-title);font-weight:200;line-height:.9}
.att b{font-size:var(--fs-lead);font-weight:400;min-height:1.4em}
.att li.on{box-shadow:inset 0 -5px 0 currentColor}
.att li.done b::after{content:' ✓'}
/* нажатые переключатели видно: закрашенная кнопка становится контурной */
.btn[aria-pressed=true]{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}


/* опыт: во время измерения виден статус (без инверсии экрана и без ритмичного мигания: оно подсказывало бы время) */
.st-live{font-weight:600;font-size:var(--fs-cap);display:flex;align-items:center;gap:.7rem;margin-bottom:var(--g1)}
.st-live::before{content:'';width:.8rem;height:.8rem;border-radius:50%;background:currentColor;flex:none}
.stage.run .att{border-width:2px}


/* зона 6: два дня, та же вертикальная шкала, что в зонах 3 и 4. Деления показывают, как день переживался (в дне А короткие, в дне Б длинные), через неделю остаются эпизоды памяти */
.pnl .q{margin:.4rem 0 var(--g1)}
.sx{--ax:4.25rem;position:relative;height:clamp(460px,64vh,640px);margin:var(--g1) 0}
.sx .ax{position:absolute;left:var(--ax);top:0;bottom:0;width:1px;background:currentColor;opacity:.6}
.sx .hr{position:absolute;left:calc(var(--ax) - .8rem);width:.8rem;height:1px;background:currentColor}
.sx .hl2{position:absolute;left:0;width:calc(var(--ax) - 1.1rem);text-align:right;transform:translateY(-50%);font-size:var(--fs-tag);font-weight:600}
.sx .bt{position:absolute;left:var(--ax);height:2px;background:currentColor;opacity:.55;transition:opacity 1s}
.sx .ep{position:absolute;left:var(--ax);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:currentColor;opacity:0;transition:opacity 1s .4s}
.sx .et{position:absolute;left:calc(var(--ax) + 1.1rem);transform:translateY(-50%);font-size:var(--fs-cap);font-weight:600;opacity:0;transition:opacity 1s .4s}
.week .sx .bt{opacity:0}.week .sx .ep,.week .sx .et{opacity:1}
.pnl__n{display:flex;align-items:baseline;gap:.7rem;min-height:1em}.pnl__n .tn{font-size:var(--fs-title);font-weight:200;line-height:.9;letter-spacing:-.05em}
/* опыт: условные обозначения шкалы */

#st-res .lead{margin-top:var(--g1)}
.fs{scroll-margin-top:4.5rem}
.foot .q.xl{margin:0}
.foot .cap#ftime{margin-top:var(--g1)}

/* РАМКИ (одна система). Рамка: тонкая обводка 1 px, внутренний отступ 24 px, заголовок 600, текст 18 px.
   Рамка из двух половинок (.split) сопоставляет две вещи: две попытки в опыте, два вида оценки в словаре, два дня.
   Просто рамка (.card) собирает выбор и ответ: переключатель «В моменте / Потом» и текст к нему. */

.card{padding:1.5rem;margin-top:var(--g1)}
.split,.att,.pnls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:var(--g2)}
.split>*,.att>li,.pnls>.pnl{padding:1.5rem;min-width:0}
.split>*+*,.att>li+li,.pnls>.pnl+.pnl{border-left:1px solid currentColor}
.split p{margin-top:.5rem;max-width:var(--m-s)}
.card .tabs{margin-top:0}.card .lead{margin-top:var(--g1);min-height:6.5em}
.tnote{padding:1.5rem;border-radius:var(--r)}

/* ВЕРТИКАЛЬНЫЙ РИТМ: расстояния задаёт структура, а не отдельные отступы. 16 px между соседними строками текста, 48 px до и после блока (рамка, шкала, ряд кнопок), 48 px от заголовка зоны до содержимого, 64–128 px между частями зоны */
.s>*+*,.fs>*+*,.foot>*+*,.pnl>*+*,.st-v>*+*,.nz__text>*+*,.d4__l>*+*,.readout>*+*,.card>*+*{margin-top:var(--g1)}
.s>.chap+*{margin-top:var(--g2)}
.s>.card,.s>.split,.s>.att,.s>.pnls,.s>.stage,.s>.tl,.s>.z3g,.s>.life,.s>.scl,.s>.opts,.s>.has-note,.s>.three,.s>.trace-map,.s>.seg,.s>.cols,.s>.blk,
.fs>.card,.fs>.split,.fs>.opts,.fs>.three,.fs>.trace-map,.foot>.fcols,.foot>.blk,.stage>.att,.stage>.st-v,
.s>.card+*,.s>.split+*,.s>.att+*,.s>.pnls+*,.s>.tl+*,.s>.z3g+*,.s>.life+*,.s>.scl+*,.s>.opts+*,.s>.has-note+*,.s>.three+*,.s>.trace-map+*,.s>.cols+*,.s>.blk+*,
.fs>.card+*,.fs>.split+*,.fs>.opts+*,.fs>.three+*,.fs>.trace-map+*,.foot>.fcols+*,.foot>.blk+*{margin-top:var(--g2)}
.s>.stage+*{margin-top:var(--g3)}
.z3g>.tl--long,.three .v,.tabs,#sc,.stage{margin-top:0;margin-bottom:0}
.s>.stage{margin-top:var(--g2)}
.st-v>.scale,.st-v>.scale+*,.d4__l>.d4n{margin-top:var(--g2)}
.foot>.fcols{margin-top:var(--g2)}
.card .lead{margin-top:var(--g1)}
/* РАМКИ: скруглены так же, как кнопки; справка (определения) закрашена */
.card,.split,.att,.pnls{border:1px solid currentColor;border-radius:var(--r);overflow:hidden}
.split.ref{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.split.ref p{color:var(--bg)}
/* состояния кнопок: наведение, нажатие, недоступность */
.btn:hover{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.btn.o:hover,.btn[aria-pressed=true]:hover{background:var(--fg);color:var(--bg);box-shadow:none}
.btn:active,.opt:active{transform:translateY(1px)}
.btn:disabled,.opt:disabled{opacity:.35;cursor:not-allowed}
.btn:disabled:hover,.opt:disabled:hover{background:var(--fg);color:var(--bg);box-shadow:none}
.opt:disabled:hover{background:transparent;color:inherit}
.opt.sel:disabled,.opt.sel:disabled:hover{opacity:1;background:var(--fg);color:var(--bg)}
/* веб-ринг курса: структура и ссылки сохранены, набор подчинён системе лонгрида */
.course-webring{padding:var(--g2) var(--m);border-top:1px solid currentColor}
.course-webring h2{font-size:var(--fs-cap);font-weight:600;line-height:1.3;letter-spacing:0}
.course-webring__nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px 24px;align-items:start;margin-top:var(--g1)}
.course-webring__nav a{display:flex;align-items:center;min-height:44px;padding:10px 0;box-sizing:border-box;color:inherit;font-size:var(--fs-text);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.course-webring__nav a:last-child{justify-content:flex-end;text-align:right}
.course-webring__nav a:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.endwrap{padding-top:0}.endwrap .endline{margin-top:0}
@media(max-width:720px){.course-webring__nav{grid-template-columns:1fr}.course-webring__nav a:last-child{justify-content:flex-start;text-align:left}}

.pnl .q{min-height:2.2em}

/* словарь: закрашенная справка с заголовком */
.split.ref{margin-top:var(--g2)}
.split.ref>.ref__h{grid-column:1/-1;padding:.75rem 1.5rem;border-bottom:1px solid currentColor;font-size:var(--fs-tag);font-weight:600}
.split.ref>.ref__h+div{border-left:0}
/* итоговые высказывания финала: каждое отдельным блоком */
.fs>.stm,.fs>.stm+*{margin-top:var(--g2)}

#tabtxt{min-height:6.5em}
.fs .q.stm{max-width:36ch}

/* курсор: точка, над кнопками и ссылками кольцо; включается после первого движения мыши */
html.hascur,html.hascur *{cursor:none!important}
#cur{position:fixed;left:0;top:0;z-index:300;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;opacity:0;transition:width .15s,height .15s,margin .15s,opacity .2s,background .15s}
#cur.on{opacity:1}
#cur.act{width:36px;height:36px;margin:-18px 0 0 -18px;background:transparent;box-shadow:inset 0 0 0 1.5px #fff}
#cur.press{width:6px;height:6px;margin:-3px 0 0 -3px}

/* переливы: два больших мягких пятна света и тени, которые медленно смещаются по прокрутке (--sp от 0 до 1); без цвета, поэтому на светлом и тёмном фоне это лишь тихий блеск */
#amb{position:fixed;inset:0;z-index:28;pointer-events:none;mix-blend-mode:soft-light;background:radial-gradient(70vmax 70vmax at calc(15% + var(--sp,0)*70%) calc(10% + var(--sp,0)*30%),rgba(255,255,255,0.500) 0%,rgba(255,255,255,0.491) 6%,rgba(255,255,255,0.466) 13%,rgba(255,255,255,0.425) 19%,rgba(255,255,255,0.373) 25%,rgba(255,255,255,0.314) 31%,rgba(255,255,255,0.251) 38%,rgba(255,255,255,0.189) 44%,rgba(255,255,255,0.133) 50%,rgba(255,255,255,0.085) 57%,rgba(255,255,255,0.048) 63%,rgba(255,255,255,0.022) 69%,rgba(255,255,255,0.007) 75%,rgba(255,255,255,0.001) 82%,rgba(255,255,255,0.000) 88%,rgba(255,255,255,0) 100%),radial-gradient(65vmax 65vmax at calc(85% - var(--sp,0)*60%) calc(90% - var(--sp,0)*40%),rgba(0,0,0,0.260) 0%,rgba(0,0,0,0.255) 6%,rgba(0,0,0,0.242) 13%,rgba(0,0,0,0.221) 19%,rgba(0,0,0,0.194) 25%,rgba(0,0,0,0.163) 31%,rgba(0,0,0,0.131) 38%,rgba(0,0,0,0.099) 44%,rgba(0,0,0,0.069) 50%,rgba(0,0,0,0.044) 57%,rgba(0,0,0,0.025) 63%,rgba(0,0,0,0.012) 69%,rgba(0,0,0,0.004) 75%,rgba(0,0,0,0.001) 82%,rgba(0,0,0,0.000) 88%,rgba(0,0,0,0) 100%)}
/* разделитель как шкала времени: длинное деление каждые 40 px, короткое каждые 8 px */
.endwrap::before{content:'';display:block;height:18px;margin-bottom:var(--g2);background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 40px) 0 0/100% 18px no-repeat,repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 8px) 0 0/100% 10px no-repeat}
.course-webring{border-top:0;padding-top:0}
.endwrap .endline{border-top:0;padding-top:0}