/* Экран — отдельный инструмент студии Kindware: ekran.kindware.ru (с 20.10.2026).
   Всё своё: шрифты в fonts/, никаких загрузок с чужих сайтов.
   Вёрстка настройщика — по навыку tipografika: Manrope, шкала 14 / 16 / 18 / 24–32, отступы шагом 8.
   .scr — сам экран показа: один и тот же в предпросмотре и на проекторе, размеры внутри — в cq*. */

@font-face{font-family:Unb;font-weight:400;font-display:swap;src:url(../fonts/unbounded-cyrillic-400.woff2) format("woff2");unicode-range:U+0400-04FF}
@font-face{font-family:Unb;font-weight:400;font-display:swap;src:url(../fonts/unbounded-latin-400.woff2) format("woff2");unicode-range:U+0000-03FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:UnbE;font-weight:600;font-display:block;src:url(../fonts/unbounded-latin-600.woff2) format("woff2");unicode-range:U+0000-03FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:UnbE;font-weight:600;font-display:block;src:url(../fonts/unbounded-cyrillic-600.woff2) format("woff2");unicode-range:U+0400-04FF}
@font-face{font-family:Man;font-weight:500;font-display:swap;src:url(../fonts/manrope-cyrillic-500.woff2) format("woff2");unicode-range:U+0400-04FF}
@font-face{font-family:Man;font-weight:500;font-display:swap;src:url(../fonts/manrope-latin-500.woff2) format("woff2");unicode-range:U+0000-03FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Man;font-weight:700;font-display:swap;src:url(../fonts/manrope-cyrillic-700.woff2) format("woff2");unicode-range:U+0400-04FF}
@font-face{font-family:Man;font-weight:700;font-display:swap;src:url(../fonts/manrope-latin-700.woff2) format("woff2");unicode-range:U+0000-03FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:OnestE;font-weight:500;font-display:block;src:url(../fonts/onest-latin-500.woff2) format("woff2");unicode-range:U+0000-03FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:OnestE;font-weight:500;font-display:block;src:url(../fonts/onest-cyrillic-500.woff2) format("woff2");unicode-range:U+0400-04FF}
@font-face{font-family:OnestE;font-weight:600;font-display:block;src:url(../fonts/onest-latin-600.woff2) format("woff2");unicode-range:U+0000-03FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:OnestE;font-weight:600;font-display:block;src:url(../fonts/onest-cyrillic-600.woff2) format("woff2");unicode-range:U+0400-04FF}

:root{
  --night:#0F1A2E; --night-2:#16233B; --ink:#F1F3F8; --ink-2:#C9D0DE; --muted:#9AA3B7;
  --line:#26324A; --line-2:#3A4866; --coral:#FF6B5A; --err:#FF9C8F;
  --f-display:Unb,"Arial Black",sans-serif;
  --f-text:Man,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* шкала: подписи 14, текст/поля/кнопки 16, вводный 18, заголовок 24–32 */
  --t-14:14px; --t-16:16px; --t-18:18px; --t-h1:clamp(24px,2.4vw,32px);
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px;
  --gutter:clamp(16px,4vw,48px); --max:1200px; --r:12px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;background:var(--night)}
body{margin:0;background:var(--night);color:var(--ink);font:500 var(--t-16)/1.5 var(--f-text);font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
a,button,[role="button"],label{touch-action:manipulation}
button{font:inherit}
h1,h2,p{margin:0}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gutter);top:-64px;z-index:100;background:var(--ink);color:var(--night);padding:var(--s1) var(--s2);border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{top:var(--s1)}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* ——— строка инструмента: «Экран» и переключатель ——— */
.bar{border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:64px}
.name{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;font:700 var(--t-18)/1 var(--f-text);text-decoration:none;color:var(--ink)}
.name::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--coral)}
.switch{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px}
.switch a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s2);border-radius:999px;font:700 var(--t-14)/1 var(--f-text);color:var(--ink-2);text-decoration:none;white-space:nowrap}
.switch a[aria-current="page"]{background:var(--ink);color:var(--night)}
@media (hover:hover) and (pointer:fine){.switch a:not([aria-current]):hover{color:var(--ink);background:var(--night-2)}}
@media (max-width:400px){.switch a{padding:0 12px}}

/* ——— заголовок страницы ——— */
.head{display:grid;gap:var(--s1);padding-block:var(--s4) var(--s3)}
.head h1{font:700 var(--t-h1)/1.2 var(--f-text);letter-spacing:-.01em;text-wrap:balance}
.head p{font-size:var(--t-18);line-height:1.5;color:var(--ink-2);max-width:60ch;text-wrap:pretty}

/* ——— настройщик ——— */
.tool{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);padding-bottom:var(--s5)}
@media (min-width:960px){
  .tool{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s5);align-items:start}
  .side{position:sticky;top:var(--s3)}
}
.form{display:grid;gap:var(--s3);margin:0}
.side{display:grid;gap:var(--s2)}

.fld{display:grid;gap:var(--s1);border:0;margin:0;padding:0;min-width:0}
.fld[hidden]{display:none}
.fld > label,.fld > legend{font:700 var(--t-14)/1.4 var(--f-text);color:var(--ink);padding:0}
.fld > legend{margin-bottom:var(--s1)}
.fld em{font-style:normal;font-weight:500;color:var(--muted)}
.fld-note{font-size:var(--t-14);line-height:1.5;color:var(--muted)}
.fld-note.bad{color:var(--err);font-weight:700}
.fld-err{font-size:var(--t-14);line-height:1.5;color:var(--err);font-weight:700}
.fld-err:empty{display:none}
.in{width:100%;min-height:48px;padding:12px 16px;font:500 var(--t-16)/1.4 var(--f-text);color:var(--ink);background:var(--night-2);border:1px solid var(--line-2);border-radius:var(--r);font-variant-numeric:lining-nums tabular-nums}
textarea.in{min-height:192px;resize:vertical;line-height:1.5}
.in:focus{outline:2px solid var(--coral);outline-offset:1px;border-color:transparent}
.in[aria-invalid="true"]{border-color:var(--err)}
.in::-webkit-calendar-picker-indicator{filter:invert(.85)}
.in-num{max-width:160px}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s2)}

.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:4px;background:var(--night-2);border:1px solid var(--line);border-radius:var(--r)}
.seg label{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--s1);border-radius:8px;font:700 var(--t-16)/1.2 var(--f-text);color:var(--ink-2);text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg label:has(input:checked){background:var(--ink);color:var(--night)}
.seg label:has(input:focus-visible){outline:2px solid var(--coral);outline-offset:2px}
.seg-f label[data-f=w]{font-family:UnbE,var(--f-display);font-weight:600;font-size:var(--t-14)}
.seg-f label[data-f=m]{font-family:OnestE,var(--f-text);font-weight:600}

.chips{display:flex;flex-wrap:wrap;gap:var(--s1)}
.chip{min-height:44px;min-width:56px;padding:0 var(--s2);border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--ink);font:700 var(--t-16)/1 var(--f-text);cursor:pointer;font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--night);border-color:var(--ink)}
@media (hover:hover) and (pointer:fine){.chip:hover{border-color:var(--coral)}}

.check{display:flex;gap:var(--s2);align-items:flex-start;min-height:44px;cursor:pointer;font-size:var(--t-16);line-height:1.5;color:var(--ink)}
.check input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--coral)}
.check small{display:block;font-size:var(--t-14);color:var(--muted)}
.check .sw{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin:0 4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}

.themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s1)}
.theme{position:relative;display:flex;align-items:center;gap:var(--s1);min-height:48px;padding:4px var(--s1) 4px 4px;border:1px solid var(--line-2);border-radius:var(--r);cursor:pointer;font:700 var(--t-14)/1.2 var(--f-text);color:var(--ink-2)}
.theme input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.theme i{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:8px;background:var(--b);color:var(--f);font:600 13px/1 UnbE,var(--f-display);font-style:normal;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.theme:has(input:checked){border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.theme:has(input:focus-visible){outline:2px solid var(--coral);outline-offset:2px}
.theme-own i{background:conic-gradient(from 45deg,#FF6B5A,#FFD23F,#0E3B2E,#3B4A9C,#FF6B5A);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.theme-own:has(input:checked) i{background:var(--b);color:var(--f);text-shadow:none}
@media (max-width:420px){.themes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.own{display:grid;gap:var(--s2);margin-top:var(--s1);padding:var(--s2);border:1px solid var(--line);border-radius:var(--r)}
.own[hidden]{display:none}
.colors{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s2)}
.colors label{display:flex;align-items:center;gap:var(--s2);min-height:48px;font:700 var(--t-14)/1.3 var(--f-text);color:var(--ink);cursor:pointer}
.colors input[type=color]{flex:none;width:48px;height:48px;padding:0;border:1px solid var(--line-2);border-radius:var(--r);background:none;cursor:pointer}
.colors input[type=color]::-webkit-color-swatch-wrapper{padding:4px}
.colors input[type=color]::-webkit-color-swatch{border:0;border-radius:8px}

.fine{border:1px solid var(--line);border-radius:var(--r)}
.fine > summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:48px;padding:0 var(--s2);font:700 var(--t-16)/1.2 var(--f-text);color:var(--ink);cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}
.fine > summary::-webkit-details-marker{display:none}
.fine > summary::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .2s var(--ease)}
.fine[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
.fine > summary:focus-visible{outline-offset:2px;border-radius:var(--r)}
.fine-body{display:grid;gap:var(--s3);padding:var(--s1) var(--s2) var(--s3)}
.range{display:grid;gap:4px}
.range input{width:100%;height:44px;margin:0;accent-color:var(--coral);cursor:pointer}
.range-ends{display:flex;justify-content:space-between;font-size:var(--t-14);color:var(--muted)}
.row-btn{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2)}
.btn-sm{min-height:44px;padding:0 var(--s2);border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--ink);font:700 var(--t-14)/1 var(--f-text);cursor:pointer}
@media (hover:hover) and (pointer:fine){.btn-sm:hover{border-color:var(--coral)}}

/* кнопки под предпросмотром */
.go{display:grid;gap:var(--s1)}
.btn{display:flex;align-items:center;justify-content:center;gap:var(--s1);min-height:52px;padding:0 var(--s3);border-radius:var(--r);border:1px solid transparent;font:700 var(--t-16)/1 var(--f-text);text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s,border-color .2s,transform .2s var(--ease)}
.btn-solid{background:var(--ink);color:var(--night)}
@media (hover:hover) and (pointer:fine){.btn-solid:hover{background:#fff}.btn-line:hover{border-color:var(--coral)}}
.btn-line{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn:active{transform:translateY(1px)}
.status{font-size:var(--t-14);color:var(--ink-2);min-height:1.5em}
.status:empty{min-height:0}
.keys,.cap{font-size:var(--t-14);line-height:1.5;color:var(--muted)}
.soon{padding:var(--s1) var(--s2);border:1px dashed var(--line-2);border-radius:var(--r);font-size:var(--t-14);line-height:1.5;color:var(--ink-2)}
.soon b{color:var(--ink)}
.run{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s2);padding:var(--s1) var(--s2);border-radius:var(--r);background:var(--night-2);font-size:var(--t-14);color:var(--ink-2)}
.run[hidden]{display:none}
.run b{color:var(--ink);font-variant-numeric:tabular-nums}
.linkbtn{min-height:44px;padding:0;border:0;background:none;color:var(--ink);font:700 var(--t-14)/1 var(--f-text);text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:4px;cursor:pointer}

/* ——— низ: как пользоваться, связь ——— */
.how{display:grid;gap:var(--s1);padding-block:var(--s3);border-top:1px solid var(--line);font-size:var(--t-14);line-height:1.6;color:var(--muted);max-width:72ch}
.how b{color:var(--ink-2);font-weight:700}
.how a{color:var(--ink-2)}
.foot{padding-block:var(--s3) var(--s4);font-size:var(--t-14);color:var(--muted)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:0 var(--s3)}
.foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);text-decoration:none}
@media (hover:hover) and (pointer:fine){.foot a:hover{color:var(--ink)}}

/* ——— страница выбора ——— */
.pick{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2);padding-bottom:var(--s4)}
@media (min-width:760px){.pick{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}}
.card{display:grid;gap:var(--s2);align-content:start;padding:var(--s2);border:1px solid var(--line);border-radius:16px;background:var(--night-2);text-decoration:none;color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:border-color .2s,transform .2s var(--ease)}
.card .scr{box-shadow:none;border-radius:8px}
.card h2{font:700 20px/1.25 var(--f-text)}
.card > p{font-size:var(--t-16);color:var(--ink-2)}
.card .more{display:inline-flex;align-items:center;gap:var(--s1);font:700 var(--t-16)/1 var(--f-text)}
.card .more span{transition:transform .2s var(--ease)}
@media (hover:hover) and (pointer:fine){.card:hover{border-color:var(--line-2)}.card:hover .more span{transform:translateX(4px)}}
.card:active{transform:scale(.99)}

@media (max-width:620px){
  .head{padding-block:var(--s3) var(--s2)}
  .head p{font-size:var(--t-16)}
}

/* ——— сам экран ——— */
.scr{--bg:#0F1A2E;--fg:#F1F3F8;--warn:#FF6B5A;--fd:UnbE;--fdw:600;--ft:Unb;--ftw:400;position:relative;width:100%;aspect-ratio:16/9;container-type:size;overflow:hidden;
  background:var(--bg);color:var(--fg);border-radius:12px;box-shadow:0 0 0 1px var(--line);
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  font-family:var(--f-display);font-variant-numeric:lining-nums tabular-nums;-webkit-user-select:none;user-select:none}
.scr-top{padding:6cqmin 6cqw 0;display:grid;justify-items:center;min-height:0}
.scr-title{margin:0;width:100%;max-width:88cqw;text-align:center;font-family:var(--ft),var(--f-display);font-weight:var(--ftw);line-height:1.12;letter-spacing:-.02em;text-wrap:balance;overflow-wrap:break-word}
.scr-title:empty{display:none}
.scr-mid{position:relative;display:grid;place-items:center;align-content:center;gap:2cqmin;min-height:0;padding:0 2cqw}
.scr-bot{display:grid;justify-items:center;gap:2cqmin;padding:0 6cqw 7cqmin;min-height:0}
.scr-bot:empty{padding:0 0 6cqmin}

/* цифры: каждая в своей клетке одной ширины — ширина строки не прыгает, даже если у шрифта нет моноширинных цифр */
.scr-time{display:flex;align-items:baseline;justify-content:center;white-space:nowrap;font:var(--fdw) 1em/1 var(--fd),var(--f-display);letter-spacing:0;transition:color .4s}
.scr-time .s{display:inline-block;flex:none;width:var(--sw,.6em);text-align:center}
.scr-time .d{display:inline-block;flex:none;width:var(--dw,.72em);text-align:center}
.scr-time .c{display:inline-block;flex:none;width:var(--cw,.36em);text-align:center;transform:translateY(-.06em)}
.scr-days,.scr-state,.scr-cap{margin:0;font-family:var(--ft),var(--f-display);font-weight:var(--ftw);line-height:1.1;text-align:center;opacity:.82}
.scr-state:empty,.scr-days:empty,.scr-cap:empty{display:none}
.scr-cap{max-width:88cqw;opacity:.9;text-wrap:balance;overflow-wrap:break-word}
/* последняя минута и счёт после нуля */
.scr.warn .scr-time,.scr.over .scr-time{color:var(--warn)}
.scr.blink .scr-time{animation:ek-blink 1s ease-in-out infinite}
@keyframes ek-blink{0%,100%{opacity:1}50%{opacity:.35}}
/* полоса времени */
.scr-bar{position:absolute;left:0;right:0;bottom:0;height:max(1.1cqmin,4px);background:color-mix(in srgb,var(--fg) 14%,transparent);pointer-events:none}
.scr-bar[hidden]{display:none}
.scr-bar i{display:block;height:100%;background:var(--fg);opacity:.85;transform-origin:left center;transform:scaleX(var(--p,1));transition:transform 1s linear}
.scr.warn .scr-bar i{background:var(--warn);opacity:1}
.scr-end{margin:0;max-width:88cqw;text-align:center;font-family:var(--ft),var(--f-display);font-weight:var(--ftw);line-height:1.08;letter-spacing:-.03em;text-wrap:balance;overflow-wrap:break-word}
.scr-end[hidden],.scr-time[hidden]{display:none}
.scr .fitting{overflow-wrap:normal}
.scr.done .scr-end{animation:ek-in .7s var(--ease) both}
@keyframes ek-in{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}

/* рандомайзер */
.scr-name{margin:0;max-width:90cqw;text-align:center;font-weight:var(--ftw);line-height:1.08;letter-spacing:-.02em;text-wrap:balance;overflow-wrap:break-word;
  font-family:var(--ft),var(--f-display),"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.scr-names{display:grid;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));gap:1.6cqmin 4cqw;align-items:center;justify-items:center;width:90cqw}
.scr-names .scr-name{max-width:100%}
.scr-name.q{opacity:.5}
.scr-name.t1{animation:ek-flip1 .09s linear}
.scr-name.t2{animation:ek-flip2 .09s linear}
@keyframes ek-flip1{from{transform:translateY(-.08em);opacity:.55}to{transform:none;opacity:1}}
@keyframes ek-flip2{from{transform:translateY(-.08em);opacity:.55}to{transform:none;opacity:1}}
.scr-name.win{animation:ek-win .8s cubic-bezier(.2,1.4,.3,1) both}
@keyframes ek-win{0%{transform:scale(.7);opacity:.4}100%{transform:none;opacity:1}}
.scr-glow{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(closest-side at 50% 50%,color-mix(in srgb,var(--fg) 16%,transparent),transparent)}
.scr.won .scr-glow{animation:ek-glow 1.6s ease-out both}
@keyframes ek-glow{0%{opacity:0;transform:scale(.6)}30%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
.scr-sub{margin:0;text-align:center;font:500 max(3.4cqmin,9px)/1.3 var(--f-text);opacity:.82;font-variant-numeric:tabular-nums}
.scr-go{min-height:max(11cqmin,44px);min-width:34cqmin;padding:0 6cqmin;border:0;border-radius:999px;background:var(--fg);color:var(--bg);cursor:pointer;
  font:400 max(4.4cqmin,12px)/1 var(--f-display);letter-spacing:-.01em;transition:transform .15s var(--ease),opacity .2s}
.scr-go:active{transform:scale(.97)}
.scr-go:disabled{opacity:.35;cursor:default}
.scr-go:focus-visible{outline:max(.5cqmin,2px) solid var(--fg);outline-offset:max(.8cqmin,3px)}
.scr-key{font:500 max(2.4cqmin,8px)/1.3 var(--f-text);opacity:.6;margin:0}
.scr-past{margin:0;max-width:86cqw;text-align:center;font:500 max(2.6cqmin,8px)/1.35 var(--f-text);opacity:.62;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr-past:empty{display:none}

/* знак «k.» — маленький, полупрозрачный, в правом нижнем углу; платный пропуск его уберёт (js/ekran.js: hasPass) */
.scr-mark{position:absolute;right:1.6cqmin;bottom:1.4cqmin;width:max(3.2cqmin,14px);height:max(3.2cqmin,14px);opacity:.45;pointer-events:none;line-height:0}
.scr-mark svg{width:100%;height:100%;display:block}
.scr-mark path{fill:var(--fg)}
.scr-mark circle{fill:var(--dot,#FF6B5A)}

/* служебное поверх экрана: кнопки «выйти» и подсказка, видны при движении мыши */
.scr-ui{position:absolute;top:2cqmin;right:2cqmin;display:none;gap:8px;transition:opacity .3s}
.scr-ui button{min-height:max(44px,4.4cqmin);padding:0 max(16px,1.6cqmin);border-radius:999px;border:1px solid color-mix(in srgb,var(--fg) 35%,transparent);background:color-mix(in srgb,var(--bg) 70%,transparent);color:var(--fg);font:700 max(15px,1.5cqmin)/1 var(--f-text);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.scr-hint{position:absolute;left:2cqmin;bottom:2cqmin;max-width:calc(100% - 4cqmin - 34cqmin);white-space:normal;display:none;margin:0;padding:10px 16px;border-radius:12px;background:color-mix(in srgb,var(--fg) 12%,var(--bg));font:500 max(15px,1.5cqmin)/1.3 var(--f-text);transition:opacity .4s;pointer-events:none}

/* режим показа: экран — во всё окно (и во весь экран, если браузер дал) */
body.is-show{overflow:hidden}
body.is-show .side{position:static}  /* sticky создаёт свой слой — без этого текст страницы ложится поверх экрана */
body.is-show .scr{position:fixed;inset:0;z-index:1000;width:auto;height:auto;aspect-ratio:auto;border-radius:0;box-shadow:none}
body.is-show .scr-ui{display:flex}
body.is-show .scr-hint{display:block}
body.is-show .scr.idle{cursor:none}
body.is-show .scr.idle .scr-ui,body.is-show .scr.idle .scr-hint{opacity:0;pointer-events:none}
body.is-show .scr.idle .scr-go{cursor:none}
.scr[inert] .scr-go{pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .scr *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
  .scr.blink .scr-time{animation:none}   /* без мигания — только цвет */
  .scr-bar i{transition:none}
}

/* на экране показа «Крутить» скрыта (место сохраняется, чтобы вёрстка не прыгала) */
body.is-show .scr .scr-go,body.is-show .scr .scr-key{opacity:0;pointer-events:none}