/* Мини-апка PLV. Палитра: чёрный, тёплый белый, серый, красный из урока, поверхность клавиш. */
@font-face { font-family: "Geologica"; src: url(assets/fonts/geologica-cyrillic-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geologica"; src: url(assets/fonts/geologica-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2190-2193; }
@font-face { font-family: "Spectral"; src: url(assets/fonts/spectral-cyrillic-400-italic.woff2) format("woff2"); font-style: italic; font-weight: 400; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Spectral"; src: url(assets/fonts/spectral-latin-400-italic.woff2) format("woff2"); font-style: italic; font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "JetBrains Mono"; src: url(assets/fonts/jetbrains-mono-cyrillic-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; src: url(assets/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }

:root {
  --bg: #050505;
  --ink: #F4F1EA;
  --mute: #8A8782;
  --red: #E5202E;
  --key: #1B1A19;
  --hair: rgba(244, 241, 234, .3);
  --u: calc(min(100vw, 480px) / 390);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --vh: 100dvh;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: "Geologica", sans-serif; -webkit-font-smoothing: antialiased; overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
img { display: block; max-width: 100%; height: auto; -webkit-user-drag: none; pointer-events: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button:focus-visible, textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }
.grain { position: fixed; inset: 0; z-index: 50; pointer-events: none; background: url(assets/img/grain.png); opacity: .55; mix-blend-mode: screen; }

.screen { position: relative; width: calc(var(--u) * 390); max-width: 100%; min-height: var(--vh); margin: 0 auto; padding: calc(var(--u) * 16) calc(var(--u) * 20) calc(var(--u) * 26); overflow: hidden; }

.top { display: flex; justify-content: space-between; align-items: center; }
.by { font: 400 calc(var(--u) * 11.5)/1 "JetBrains Mono", monospace; color: var(--ink); letter-spacing: -.01em; }
.by--r { color: var(--mute); }

/* вход */
.eyebrow { margin: calc(var(--u) * 34) 0 calc(var(--u) * 8); font: 400 calc(var(--u) * 11.5)/1 "JetBrains Mono", monospace; color: var(--mute); letter-spacing: .14em; text-transform: uppercase; }
.title { margin: 0; font-size: calc(var(--u) * 50); font-weight: 700; line-height: .98; letter-spacing: -.04em; position: relative; z-index: 2; }
.hero { position: relative; height: calc(var(--u) * 276); margin: calc(var(--u) * -64) calc(var(--u) * -20) 0; }
.hero__keys { position: absolute; left: calc(var(--u) * 2); top: 0; width: calc(var(--u) * 386); max-width: none; }
.title-it { position: absolute; right: calc(var(--u) * 20); bottom: calc(var(--u) * 42); margin: 0; font: italic 400 calc(var(--u) * 45)/1 "Spectral", serif; letter-spacing: -.02em; z-index: 2; }
.lead { position: absolute; right: calc(var(--u) * 20); bottom: 0; margin: 0; text-align: right; font: 400 calc(var(--u) * 11.5)/1.4 "JetBrains Mono", monospace; color: var(--mute); z-index: 2; }

.intro { display: flex; flex-direction: column; }
.rows { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; gap: calc(var(--u) * 10); padding: calc(var(--u) * 14) 0 calc(var(--u) * 6); }
.row { position: relative; display: flex; align-items: center; width: 100%; }
.row--a { height: calc(var(--u) * 92); }
.row--b { height: calc(var(--u) * 84); }
.row--c { height: calc(var(--u) * 92); }

.pill { position: relative; z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 56); padding: 0 calc(var(--u) * 24); border-radius: 999px; font-size: calc(var(--u) * 17); font-weight: 500; letter-spacing: -.01em; white-space: nowrap; transition: transform .12s var(--ease), background .2s, border-color .2s; }
.pill:active { transform: translateY(2px) scale(.985); }
.pill--main { background: var(--ink); color: #0A0A0A; font-weight: 600; }
.pill--line { border: 1px solid var(--hair); height: calc(var(--u) * 48); font-size: calc(var(--u) * 15.5); }
.pill--wide { width: 100%; }
.arr { width: calc(var(--u) * 13); height: calc(var(--u) * 13); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* выноски: тонкая линия с точкой на предмете, как на чертеже */
.wire { position: relative; flex: 1; height: 1px; background: var(--hair); min-width: calc(var(--u) * 14); z-index: 2; }
.wire::after { content: ""; position: absolute; right: -3px; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px rgba(244, 241, 234, .12); }
.wire--dash { background: repeating-linear-gradient(90deg, var(--hair) 0 3px, transparent 3px 7px); }
.row--b .wire::after { right: auto; left: -3px; }

.obj { flex: none; position: relative; }
.obj--enter { width: calc(var(--u) * 156); margin-left: calc(var(--u) * -14); }
.obj--play { width: calc(var(--u) * 92); margin-left: calc(var(--u) * 6); margin-right: calc(var(--u) * -14); }
.obj--plv { display: block; width: calc(var(--u) * 158); margin-left: calc(var(--u) * -14); }
.plv-on { position: absolute; inset: 0; animation: breathe 3.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .12; } 50% { opacity: 1; } }

.soon { display: inline-flex; align-items: center; gap: calc(var(--u) * 10); padding-left: calc(var(--u) * 4); }
.soon em { font: italic 400 calc(var(--u) * 38)/1 "Spectral", serif; letter-spacing: -.02em; }
.led { display: inline-block; width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: var(--red); box-shadow: 0 0 calc(var(--u) * 10) rgba(229, 32, 46, .9); animation: led 3.6s ease-in-out infinite; }
@keyframes led { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.foot { text-align: center; font: 400 calc(var(--u) * 11)/1 "JetBrains Mono", monospace; color: #6B6965; }

/* вопросы */
.grain::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 40%; background: radial-gradient(70% 90% at 50% 100%, rgba(229, 32, 46, .22), rgba(229, 32, 46, 0) 72%); mix-blend-mode: normal; }
.top--quiz { position: relative; height: calc(var(--u) * 30); }
.leds { display: flex; gap: calc(var(--u) * 7); }
.leds i { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: #2A2926; transition: background .4s, box-shadow .4s; }
.leds i.on { background: var(--red); box-shadow: 0 0 calc(var(--u) * 8) rgba(229, 32, 46, .8); }
.leds i.now { background: var(--ink); }
.mini-plv { display: inline-flex; align-items: baseline; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 12); padding: calc(var(--u) * 6) 0 calc(var(--u) * 6) calc(var(--u) * 10); }
.mini-plv b { font: 400 calc(var(--u) * 11)/1 "JetBrains Mono", monospace; letter-spacing: .06em; color: var(--mute); }
.mini-plv em { font: italic 400 calc(var(--u) * 15)/1 "Spectral", serif; }
.mini-plv .led { width: calc(var(--u) * 5); height: calc(var(--u) * 5); align-self: center; }

.q { position: relative; padding-top: calc(var(--u) * 30); }
.q.in { animation: rise .46s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(calc(var(--u) * 14)); } to { opacity: 1; transform: none; } }
.q__n { margin: 0 0 calc(var(--u) * 12); font: 400 calc(var(--u) * 11.5)/1 "JetBrains Mono", monospace; color: var(--mute); }
.q__t { margin: 0 0 calc(var(--u) * 28); font-size: calc(var(--u) * 33); font-weight: 650; line-height: 1.08; letter-spacing: -.03em; -webkit-user-select: none; }

/* клавиша ответа: нажимается, как настоящая */
.keys { display: flex; flex-direction: column; gap: calc(var(--u) * 16); }
.key { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: calc(var(--u) * 62); padding: calc(var(--u) * 12) calc(var(--u) * 18); border-radius: calc(var(--u) * 14); background: linear-gradient(180deg, #24231F 0%, var(--key) 46%, #151413 100%); font-size: calc(var(--u) * 17); font-weight: 500; letter-spacing: -.012em; line-height: 1.15;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), inset 1px 0 0 rgba(255, 255, 255, .03), inset -1px 0 0 rgba(255, 255, 255, .03), 0 calc(var(--u) * 5) 0 #0C0B0B, 0 calc(var(--u) * 6) 0 rgba(229, 32, 46, .32), 0 calc(var(--u) * 14) calc(var(--u) * 22) rgba(0, 0, 0, .8);
  transition: transform .08s linear, box-shadow .08s linear; }
.key small { font: 400 calc(var(--u) * 11)/1 "JetBrains Mono", monospace; color: #6B6965; margin-left: calc(var(--u) * 12); }
.key:active, .key.down { transform: translateY(calc(var(--u) * 4.5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 calc(var(--u) * .5) 0 #0C0B0B, 0 calc(var(--u) * 1.5) 0 rgba(229, 32, 46, .5), 0 calc(var(--u) * 4) calc(var(--u) * 8) rgba(0, 0, 0, .7); }
.key.chosen, .key--red { background: linear-gradient(180deg, #F0313E 0%, var(--red) 46%, #BE1420 100%); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 calc(var(--u) * 5) 0 #7D0B14, 0 calc(var(--u) * 14) calc(var(--u) * 26) rgba(229, 32, 46, .32); }
.key.chosen small, .key--red small { color: rgba(255, 255, 255, .75); }
.key.chosen.down, .key--red:active { transform: translateY(calc(var(--u) * 4.5)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 calc(var(--u) * .5) 0 #7D0B14, 0 calc(var(--u) * 4) calc(var(--u) * 12) rgba(229, 32, 46, .3); }
.key svg { width: calc(var(--u) * 20); height: calc(var(--u) * 16); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.area { display: block; width: 100%; height: calc(var(--u) * 138); padding: calc(var(--u) * 14) calc(var(--u) * 16); border: 1px solid rgba(244, 241, 234, .16); border-radius: calc(var(--u) * 14); background: #0C0C0B; color: var(--ink); font: 400 calc(var(--u) * 16)/1.35 "Geologica", sans-serif; resize: none; -webkit-user-select: text; user-select: text; box-shadow: inset 0 calc(var(--u) * 3) calc(var(--u) * 10) rgba(0, 0, 0, .9); margin-bottom: calc(var(--u) * 16); }
.area::placeholder { color: #55534F; }
.area:focus { outline: none; border-color: rgba(229, 32, 46, .7); }
.skip { display: block; margin: calc(var(--u) * 20) auto 0; padding: calc(var(--u) * 8) calc(var(--u) * 14); font: 400 calc(var(--u) * 12.5)/1 "JetBrains Mono", monospace; color: var(--mute); }

/* готово */
.done { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.done__key { width: calc(var(--u) * 290); margin-bottom: calc(var(--u) * 22); }
.done__key.press { animation: press .7s var(--ease) both; }
@keyframes press { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(calc(var(--u) * 11)) scale(.985); } 100% { transform: translateY(calc(var(--u) * 2)) scale(1); } }
.done__t { margin: 0; font: italic 400 calc(var(--u) * 56)/1 "Spectral", serif; letter-spacing: -.02em; }
.done__s { margin: calc(var(--u) * 14) 0 0; font: 400 calc(var(--u) * 12.5)/1.4 "JetBrains Mono", monospace; color: var(--mute); max-width: calc(var(--u) * 300); }
.key--cta { justify-content: center; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 26); min-height: calc(var(--u) * 68); font-size: calc(var(--u) * 18); font-weight: 600; letter-spacing: -.015em; }
.key--cta .arr { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.done__note { margin: calc(var(--u) * 20) 0 0; max-width: calc(var(--u) * 320); font: 400 calc(var(--u) * 12.5)/1.5 "JetBrains Mono", monospace; color: var(--mute); white-space: pre-line; }
.mini-plv--done { margin-top: calc(var(--u) * 26); padding-left: 0; }

/* что в уроке */
.page { position: fixed; inset: 0; z-index: 20; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--bg); animation: rise .42s var(--ease) both; }
.page__in { width: calc(var(--u) * 390); max-width: 100%; margin: 0 auto; padding: calc(var(--u) * 14) calc(var(--u) * 20) calc(var(--u) * 28); }
.back { display: inline-flex; align-items: center; gap: calc(var(--u) * 7); padding: calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 6) 0; font: 400 calc(var(--u) * 12)/1 "JetBrains Mono", monospace; color: var(--mute); }
.page__t { margin: calc(var(--u) * 18) 0 calc(var(--u) * 6); font-size: calc(var(--u) * 42); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.page__it { margin: 0 0 calc(var(--u) * 20); font: italic 400 calc(var(--u) * 19)/1.2 "Spectral", serif; color: var(--mute); }
.frames { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 26); }
.frame { width: 100%; border-radius: calc(var(--u) * 10); background: #111; }
.frame--w { grid-column: 1 / -1; }
.steps { list-style: none; margin: 0 0 calc(var(--u) * 28); padding: 0; }
.steps li { display: flex; gap: calc(var(--u) * 14); padding: calc(var(--u) * 14) 0; border-top: 1px solid rgba(244, 241, 234, .1); }
.steps b { display: block; font-size: calc(var(--u) * 17); font-weight: 600; letter-spacing: -.015em; margin-bottom: calc(var(--u) * 4); }
.steps p { margin: 0; font-size: calc(var(--u) * 14); line-height: 1.35; color: var(--mute); }
.cap { flex: none; display: grid; place-items: center; width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: calc(var(--u) * 7); font: 400 calc(var(--u) * 12)/1 "JetBrains Mono", monospace; background: linear-gradient(180deg, #24231F, #151413); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 calc(var(--u) * 2.5) 0 #0C0B0B, 0 calc(var(--u) * 3) 0 rgba(229, 32, 46, .32); }

/* PLV */
.scrim { position: fixed; inset: 0; z-index: 29; background: rgba(0, 0, 0, .72); animation: fade .3s both; }
@keyframes fade { from { opacity: 0; } }
.sheet { position: fixed; left: 50%; bottom: 0; z-index: 30; width: 100%; max-width: 480px; transform: translateX(-50%); padding: calc(var(--u) * 10) calc(var(--u) * 22) calc(var(--u) * 26 + env(safe-area-inset-bottom)); background: linear-gradient(180deg, #121211, #0A0A09); border-radius: calc(var(--u) * 24) calc(var(--u) * 24) 0 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); animation: sheet .46s var(--ease) both; }
@keyframes sheet { from { transform: translate(-50%, 40%); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.obj--plv-big { width: calc(var(--u) * 230); margin: 0 auto calc(var(--u) * 8); }
.sheet__t { margin: 0 0 calc(var(--u) * 12); font-size: calc(var(--u) * 38); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.sheet__t em { font: italic 400 calc(var(--u) * 40)/1 "Spectral", serif; letter-spacing: -.02em; margin-left: calc(var(--u) * 4); }
.sheet__p { margin: 0 0 calc(var(--u) * 10); font-size: calc(var(--u) * 15.5); line-height: 1.38; }
.sheet__p--dim { color: var(--mute); margin-bottom: calc(var(--u) * 20); }

.reveal { animation: rise .6s var(--ease) both; }
.reveal2 { animation: rise .6s .12s var(--ease) both; }
.reveal3 { animation: rise .6s .24s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .plv-on { opacity: 1; }
  .led { opacity: 1; }
}