/* Family app shell: phone first, shared with the future website. */
html { height: 100%; -webkit-text-size-adjust: 100%; }
body { height: 100dvh; height: var(--app-height, 100dvh); }
#view { height: 100%; }
.family-welcome { display: grid; gap: 24px; align-content: center; min-height: 80dvh; }
body.family-entry { grid-template-columns: minmax(0, 1fr); }
body.family-entry #view { grid-column: 1 / -1; width: 100%; padding-bottom: 0; }
.family-welcome { width: 100%; }
#rail[hidden] { display: none; }
.more-link { display: flex !important; align-items: center; gap: 14px; text-decoration: none; }
/* ===== Filvoco look: deep teal-black, neon mint accent, gold rewards. Always dark. ===== */
html { background: var(--bg); }
body {
  background:
    radial-gradient(1100px 540px at 82% -14%, rgba(46, 232, 242, .10), transparent 62%),
    radial-gradient(760px 460px at -12% 108%, rgba(255, 193, 94, .055), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  letter-spacing: .005em;
}
h1, h2 { letter-spacing: -.02em; }
.eyebrow { color: var(--faint); letter-spacing: .1em; }
.muted { color: var(--muted); }
::selection { background: rgba(46, 232, 242, .28); }

/* cards: a faint top light and a soft drop */
.card, .level {
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0) 38%), var(--surface);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 16px 36px -26px rgba(0, 0, 0, .95);
}
.card.click:hover, .level > button:hover { border-color: rgba(46, 232, 242, .32); background-color: var(--raised); }
.hero {
  background:
    radial-gradient(520px 250px at 100% -10%, rgba(46, 232, 242, .22), transparent 72%),
    radial-gradient(380px 200px at -8% 120%, rgba(255, 193, 94, .10), transparent 70%),
    linear-gradient(150deg, #2a0f3f 0%, #140b26 64%);
  border-color: rgba(46, 232, 242, .24);
}
.hero .eyebrow { color: var(--gold); }

/* buttons */
.btn { border-radius: 14px; background: var(--raised); border-color: var(--line-strong); }
.btn.primary {
  background: linear-gradient(180deg, #ff6cbc, #f23a93);
  color: var(--on-primary);
  border-color: transparent;
  box-shadow: 0 12px 30px -12px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .38);
}
.btn.primary:hover:not(:disabled) { opacity: 1; filter: brightness(1.07); }
.btn.good { background: linear-gradient(180deg, #ff6cbc, #f23a93); color: var(--on-primary); }
.btn.ghost { color: var(--muted); }
.btn.ghost:hover:not(:disabled) { color: var(--text); background: var(--accent-soft); }
.seg { background: var(--surface); border-color: var(--line); }
.seg button.on { background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 1px rgba(46, 232, 242, .35) inset; }
kbd { color: var(--faint); border-color: var(--line-strong); }
.btn.primary kbd { color: rgba(42, 5, 25, .6); border-color: rgba(42, 5, 25, .3); opacity: 1; }

/* progress, ring, week, stars */
.progress { background: var(--line); }
.progress i { background: linear-gradient(90deg, #f23a93, #ff6cbc); box-shadow: 0 0 14px rgba(46, 232, 242, .45); }
.ring { background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--line) 0); box-shadow: 0 0 22px -6px var(--accent-glow); }
.ring > div { background: var(--surface); color: var(--text); }
.week i.on { background: var(--accent-soft); color: var(--accent); box-shadow: 0 0 0 1px rgba(46, 232, 242, .3) inset; }
.week i.today { border-color: var(--gold); }
.lesson.done .num { background: var(--accent); border-color: var(--accent); color: var(--on-primary); }
.lesson.next .num { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.lesson .stars, .finish .stars { color: var(--gold); }
.level.done .tag { background: var(--accent-soft); color: var(--accent); }
.combo { color: var(--gold); }
.level .bar i { background: var(--accent); }
.stat b { font-variant-numeric: tabular-nums; }

/* lesson / exercises */
.option.right { border-color: var(--accent); background: var(--accent-soft); }
.option.right .key { background: var(--accent); border-color: var(--accent); color: var(--on-primary); }
.field.right, .gapline input.right, .line.right { border-color: var(--accent); background: var(--accent-soft); }
.match button.sel { border-color: var(--accent); background: var(--accent-soft); }
.match button.ok { border-color: var(--accent); background: var(--accent-soft); }
.dock { background: rgba(11, 7, 22, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.dock.good { background: color-mix(in srgb, var(--accent) 13%, var(--bg)); border-color: rgba(46, 232, 242, .4); }
.step .kind i { background: var(--accent); }
.step.s-analogy .kind i { background: var(--gold); }
.step.s-trap .kind i { background: var(--process); }
.en { background: rgba(46, 232, 242, .08); color: var(--en); }
.diff { display: flex; flex-wrap: wrap; gap: 2px 7px; }
.diff s, .diff ins, .diff span { margin-right: 0; }
.verdict { min-width: 0; }
.verdict > * { min-width: 0; overflow-wrap: anywhere; }
.prose strong { color: var(--text); }
.say.playing { color: var(--accent); border-color: var(--accent); }
.switch.on { background: var(--accent); }

/* tenses */
.a-simple { --c: var(--fact); } .a-continuous { --c: var(--process); } .a-perfect { --c: var(--accent); } .a-perfect-continuous { --c: var(--gold); }
.tcell.on { background: color-mix(in srgb, var(--c) 9%, var(--surface)); }

/* film: cinema black with a mint pulse */
.film { background: #07040f; }
.film .deck { background: #0d0819; }
.rate.r2:hover { border-color: var(--accent); background: var(--accent-soft); }
.screen .flash { background: rgba(8, 5, 16, .62); color: var(--accent); }
.scrub i { background: linear-gradient(90deg, #f23a93, #ff6cbc); }

/* the desktop rail */
#rail { background: rgba(11, 7, 22, .6); backdrop-filter: blur(10px); }
#rail a.on { color: var(--accent); background: var(--accent-soft); }
#rail .badge { background: var(--gold); color: #2a1500; }
#toast { background: var(--raised); border-color: rgba(46, 232, 242, .3); }

/* any touch screen (phones and tablets): comfortable hit areas */
@media (pointer: coarse) {
  .btn { min-height: 46px; }
  .btn.small { min-height: 44px; }
  button.chip { min-height: 42px; min-width: 46px; padding: 8px 14px; }
  .switch { width: 54px; height: 34px; border-radius: 17px; }
  .switch::after { width: 28px; height: 28px; }
  .switch.on::after { transform: translateX(20px); }
  .say { width: 44px; height: 44px; }
  .seg button { min-height: 42px; }
  .lesson { padding-top: 13px; padding-bottom: 13px; }
  kbd { display: none; }
}

/* welcome / login screen */
.family-welcome { text-align: center; justify-items: center; }
.family-welcome h1 { font-size: 34px; background: linear-gradient(120deg, #f6efff, #ff6cbc 55%, #ffc15e); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- phone layout ---- */
html[data-layout="phone"] { --nav-height: calc(66px + env(safe-area-inset-bottom, 0px)); }
html[data-layout="phone"] body, html[data-layout="phone"] body.focus { display: block; width: 100%; overflow: hidden; }
html[data-layout="phone"] #view { width: 100%; height: 100%; padding-bottom: var(--nav-height); overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; }
html[data-layout="phone"] body.focus #view { padding-bottom: 0; }
html[data-layout="phone"] #rail { position: fixed; z-index: 20; bottom: 0; left: 0; right: 0; height: var(--nav-height); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); background: #10141c; border-top: 1px solid var(--line); border-right: 0; }
html[data-layout="phone"] #rail a { width: 100%; min-width: 0; height: 54px; padding: 6px 2px; gap: 3px; font-size: 10.5px; border-radius: 12px; }
html[data-layout="phone"] #rail a.on { color: var(--good); background: var(--good-soft); }
html[data-layout="phone"] #rail a .ic { width: 23px; height: 23px; }
html[data-layout="phone"] #rail .logo, html[data-layout="phone"] #rail .spacer { display: none; }
html[data-layout="phone"] .page { width: 100%; max-width: 100%; padding: max(20px, env(safe-area-inset-top, 0px)) 16px 110px; }
html[data-layout="phone"] .page.wide { max-width: 100%; }
html[data-layout="phone"] .page > *, html[data-layout="phone"] .stack > *, html[data-layout="phone"] .grid2 > *, html[data-layout="phone"] .grid3 > *, html[data-layout="phone"] .card > *, html[data-layout="phone"] .row > *, html[data-layout="phone"] .level > button > *, html[data-layout="phone"] .film > *, html[data-layout="phone"] .deck > * { min-width: 0; }
html[data-layout="phone"] .card { padding: 18px; border-radius: 18px; }
html[data-layout="phone"] .hero { padding: 22px 20px; gap: 16px; }
html[data-layout="phone"] h1, html[data-layout="phone"] .hero h1 { font-size: 27px; line-height: 1.2; overflow-wrap: anywhere; }
html[data-layout="phone"] h2 { font-size: 20px; }
html[data-layout="phone"] .head { margin-bottom: 20px; }
html[data-layout="phone"] .row { flex-wrap: wrap; gap: 10px; }
html[data-layout="phone"] .hero .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
html[data-layout="phone"] .hero .btn.big { padding: 0 18px; }
html[data-layout="phone"] .hero .btn.ghost { padding: 0 10px; }
html[data-layout="phone"] .grid2, html[data-layout="phone"] .grid3 { grid-template-columns: minmax(0, 1fr); }
html[data-layout="phone"] .daily-goal { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 14px !important; }
html[data-layout="phone"] .daily-goal .ring { width: 60px; height: 60px; }
html[data-layout="phone"] .daily-goal .ring > div { width: 48px; height: 48px; }
html[data-layout="phone"] .daily-goal .week { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
html[data-layout="phone"] .week i { width: 100%; height: 32px; }
html[data-layout="phone"] .summary-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html[data-layout="phone"] .summary-stats .card { padding: 14px 10px; }
html[data-layout="phone"] .stat b { font-size: 23px; }
html[data-layout="phone"] .stat span { font-size: 11px; }
html[data-layout="phone"] .btn { min-height: 46px; padding: 8px 16px; white-space: normal; line-height: 1.25; text-align: center; }
html[data-layout="phone"] .btn.small { min-height: 44px; }
html[data-layout="phone"] .btn.icon { flex: none; width: 46px; }
html[data-layout="phone"] button, html[data-layout="phone"] a, html[data-layout="phone"] input, html[data-layout="phone"] select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
html[data-layout="phone"] input, html[data-layout="phone"] select, html[data-layout="phone"] textarea { font-size: 16px !important; max-width: 100%; }
html[data-layout="phone"] kbd { display: none; }
html[data-layout="phone"] .level > button { padding: 16px; gap: 12px; flex-wrap: wrap; }
html[data-layout="phone"] .level > button .grow { flex-basis: calc(100% - 64px); }
html[data-layout="phone"] .level > button > div:last-child { margin-left: 64px; display: flex !important; align-items: center; gap: 12px !important; }
html[data-layout="phone"] .level .bar { width: 90px; }
html[data-layout="phone"] .lesson { padding: 13px 10px; gap: 10px; }
html[data-layout="phone"] .lesson .num { flex: none; }
html[data-layout="phone"] .prose { font-size: 17px; }
html[data-layout="phone"] .en { white-space: normal; overflow-wrap: anywhere; }
html[data-layout="phone"] .formula > div { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 5px; }
html[data-layout="phone"] .formula .note { grid-column: 1; }
html[data-layout="phone"] .compare { grid-template-columns: minmax(0, 1fr); }
html[data-layout="phone"] table.tbl { display: block; max-width: 100%; overflow-x: auto; }
html[data-layout="phone"] .tbl th, html[data-layout="phone"] .tbl td { padding: 10px; }
html[data-layout="phone"] .dock .inner { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); gap: 10px; min-height: 74px; flex-wrap: wrap; }
html[data-layout="phone"] .dock .inner > * { min-width: 0; }
html[data-layout="phone"] body:not(.focus) .dock { left: 0; bottom: var(--nav-height); }
html[data-layout="phone"] .ask .q { font-size: 23px; overflow-wrap: anywhere; }
html[data-layout="phone"] .finish { padding: 28px 18px 110px; width: 100%; }
html[data-layout="phone"] .finish h1 { font-size: 29px !important; }
html[data-layout="phone"] .finish > p { font-size: 17px !important; }
html[data-layout="phone"] .finish .row { justify-content: center; }
html[data-layout="phone"] .finish .btn.big { width: 100%; }
html[data-layout="phone"] .topbar { padding: 12px; gap: 10px; }
html[data-layout="phone"] .option { padding: 14px; font-size: 17px; }
html[data-layout="phone"] .match { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-layout="phone"] .match button { padding: 10px; overflow-wrap: anywhere; }
html[data-layout="phone"] .gapline input { min-width: 70px; }
html[data-layout="phone"] .tgrid { grid-template-columns: minmax(0, 1fr); }
html[data-layout="phone"] .forms > div { grid-template-columns: 30px minmax(0, 1fr); padding: 12px; gap: 10px; }
html[data-layout="phone"] .forms .r, html[data-layout="phone"] .forms .f { grid-column: 2; }
html[data-layout="phone"] .builder .out { font-size: 24px; overflow-wrap: anywhere; }
html[data-layout="phone"] .seg { max-width: 100%; flex-wrap: wrap; }
html[data-layout="phone"] .seg button { min-height: 42px; height: auto; padding: 8px 12px; }
html[data-layout="phone"] .film { height: auto; min-height: 100%; grid-template-rows: auto auto 1fr; }
html[data-layout="phone"] .film .top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
html[data-layout="phone"] .film .top > .grow { display: none; }
html[data-layout="phone"] .film .top .seg { grid-row: 2; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
html[data-layout="phone"] .film .top > .btn { grid-row: 1; grid-column: 3; }
html[data-layout="phone"] .film .top > .btn:first-child { grid-column: 1; }
html[data-layout="phone"] .film .top > .count { grid-row: 1; grid-column: 2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
html[data-layout="phone"] .film .top .count .long { display: none; }
html[data-layout="phone"] .film .top .count .short { display: inline; }
html[data-layout="phone"] .screen { width: 100%; aspect-ratio: 16 / 9; min-height: 0; }
html[data-layout="phone"] .deck { padding: 18px 12px 24px; gap: 14px; align-content: start; }
html[data-layout="phone"] .deck > div:empty { display: none; }
html[data-layout="phone"] .deck .subs { order: 1; }
html[data-layout="phone"] .deck .controls { order: 2; }
html[data-layout="phone"] .deck .rates { order: 3; }
html[data-layout="phone"] .deck .notes { order: 5; }
html[data-layout="phone"] .deck .clip-quality { order: 4; }
html[data-layout="phone"] .subs { min-height: 76px; width: 100%; }
html[data-layout="phone"] .subs .en-line { font-size: 23px; overflow-wrap: anywhere; }
html[data-layout="phone"] .subs .ru-line { font-size: 16px; }
html[data-layout="phone"] .subs .ghost-line { font-size: 17px; }
html[data-layout="phone"] .controls { width: 100%; gap: 8px; }
html[data-layout="phone"] .controls > span { display: none; }
html[data-layout="phone"] .controls .btn:not(.icon) { flex: 1 1 130px; }
html[data-layout="phone"] .rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 6px; }
html[data-layout="phone"] .rate { min-width: 0; height: auto; min-height: 64px; padding: 10px 5px; font-size: 12px; }
html[data-layout="phone"] .rate small { font-size: 11px; }
html[data-layout="phone"] .wordnote { max-width: 100%; overflow-wrap: anywhere; }
html[data-layout="phone"] .libitem { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; padding: 12px 8px; }
html[data-layout="phone"] .setting { gap: 12px; flex-wrap: wrap; }
html[data-layout="phone"] .heat { max-width: 100%; overflow-x: auto; padding-bottom: 8px; }
html[data-layout="phone"] #toast { bottom: calc(var(--nav-height) + 12px); width: max-content; max-width: calc(100vw - 32px); padding: 12px 16px; }
html[data-layout="phone"] ::-webkit-scrollbar { width: 0; height: 0; }
@media (max-width: 350px) {
html[data-layout="phone"] .page { padding-left: 12px; padding-right: 12px; }
html[data-layout="phone"] .hero .row { grid-template-columns: minmax(0, 1fr); }
html[data-layout="phone"] .hero h1 { font-size: 25px; }
}
@media (orientation: landscape) {
html[data-layout="phone"] .screen { max-height: 55dvh; aspect-ratio: auto; height: 55dvh; }
}

/* ===== phone polish (after the structural phone rules) ===== */
html[data-layout="phone"] #rail {
  background: rgba(12, 8, 22, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
}
html[data-layout="phone"] #rail a { position: relative; color: var(--faint); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; background: none; }
html[data-layout="phone"] #rail a .ic { transition: transform .18s ease; }
html[data-layout="phone"] #rail a.on { color: var(--accent); background: none; }
html[data-layout="phone"] #rail a.on .ic { transform: translateY(-1px) scale(1.06); filter: drop-shadow(0 0 8px rgba(46, 232, 242, .55)); }
html[data-layout="phone"] #rail a.on::before {
  content: ""; position: absolute; top: -7px; left: 50%; width: 22px; height: 3px; margin-left: -11px; border-radius: 0 0 4px 4px;
  background: var(--accent); box-shadow: 0 2px 12px var(--accent-glow);
}
html[data-layout="phone"] #rail .badge { right: 22%; top: 3px; }
html[data-layout="phone"] .hero { padding: 24px 22px; }
html[data-layout="phone"] .hero h1 { font-size: 28px; }
html[data-layout="phone"] .btn.primary.big { min-height: 54px; font-size: 17px; }
html[data-layout="phone"] .card { border-radius: 20px; }
html[data-layout="phone"] .summary-stats .card, html[data-layout="phone"] .grid3 .card.stat { text-align: center; }
html[data-layout="phone"] .topbar { background: rgba(11, 7, 22, .88); }
html[data-layout="phone"] .option { border-radius: 16px; min-height: 56px; }
html[data-layout="phone"] .dock .inner { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
html[data-layout="phone"] .film .deck { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
html[data-layout="phone"] .rate { border-radius: 16px; }
html[data-layout="phone"] body.focus #rail { display: none; }
html[data-layout="phone"] body.focus .dock { bottom: 0; }
html[data-layout="phone"] .kb-hint { visibility: hidden; }
html[data-layout="phone"] button.chip { min-height: 42px; min-width: 46px; padding: 8px 14px; font-size: 15px; }
html[data-layout="phone"] .switch { width: 54px; height: 34px; border-radius: 17px; }
html[data-layout="phone"] .switch::after { width: 28px; height: 28px; }
html[data-layout="phone"] .switch.on::after { transform: translateX(20px); }
html[data-layout="phone"] .link { display: block; min-height: 40px; padding: 10px 0; font-size: 15px; white-space: normal; text-align: left; }
@media (max-height: 640px) { html[data-layout="phone"] .dock .verdict { max-height: 28dvh; } html[data-layout="phone"] .verdict .why { font-size: 14px; } }
@media (max-height: 480px) { html[data-layout="phone"] .dock .verdict { max-height: 22dvh; } html[data-layout="phone"] .dock .inner { min-height: 0; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); } html[data-layout="phone"] .stage { padding-top: 12px; } html[data-layout="phone"] .finish { min-height: 0 !important; padding-top: 16px; } }
html[data-layout="phone"] .say { width: 44px; height: 44px; }
html[data-layout="phone"] .tgrid { gap: 8px; }
html[data-layout="phone"] .tgrid .colh { display: none; }
html[data-layout="phone"] .tgrid .rowh { display: flex; align-items: baseline; gap: 10px; grid-column: 1 / -1; margin-top: 14px; padding: 0 4px 6px; border-bottom: 1px solid var(--line); }
html[data-layout="phone"] .tgrid .rowh:first-of-type { margin-top: 0; }
html[data-layout="phone"] .tcell { min-height: 0; padding: 13px 16px; }
html[data-layout="phone"] .dock .verdict { max-height: 38dvh; overflow-y: auto; overscroll-behavior: contain; }

@media (prefers-reduced-motion: reduce) {
  .page, .step, .ask { animation: none; }
  #view { scroll-behavior: auto; }
}

/* Complete film import: consistent dark native controls and narrow screens. */
.import-form { display:flex; flex-direction:column; gap:16px; }
.import-form label { display:flex; flex-direction:column; gap:8px; }
.import-form .field { width:100%; max-width:100%; min-height:46px; box-sizing:border-box; color-scheme:dark; }
.import-form input[type=file] { height:auto; padding:12px; white-space:normal; }
.import-form input::file-selector-button { background:#3a1640; color:#fdf1ff; border:1px solid #7a2d6b; padding:9px; border-radius:8px; margin-right:10px; }
.import-form progress { width:100%; height:14px; accent-color:var(--accent,#2ee8f2); }
.import-form .row { flex-wrap:wrap; }
.import-form [hidden], .page input[hidden] { display:none !important; }
.import-form p { overflow-wrap:anywhere; }

/* ===== Tariffs: subscription screen, locks, offers, people (14.10.2026). Source: tools/plan_layer.css ===== */
.plan-page .stack { gap: 16px; }
.plan-card {
  position: relative; overflow: hidden; padding: 28px 28px 24px; display: grid; gap: 14px;
  background:
    radial-gradient(560px 260px at 100% -12%, rgba(46, 232, 242, .20), transparent 70%),
    radial-gradient(420px 220px at -10% 118%, rgba(255, 193, 94, .10), transparent 70%),
    linear-gradient(155deg, #2a0f3f 0%, #140b26 62%);
  border-color: rgba(46, 232, 242, .30);
}
.plan-card .eyebrow { color: var(--gold); }
.plan-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.plan-price b { font: 700 54px/1 var(--display); letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.plan-price span { font-size: 18px; color: var(--muted); }
.plan-benefits { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 11px; }
.plan-benefits li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.4; }
.plan-benefits li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.plan-benefits .ic { color: var(--accent); margin-top: 1px; }
.plan-benefits.quiet .ic { color: var(--faint); }
.plan-benefits.quiet li { color: var(--muted); }
.plan-buy { width: 100%; white-space: normal; height: auto; min-height: 58px; padding: 12px 20px; font-size: 18px; text-align: center; }
.plan-fine { text-align: center; }
.plan-free { display: grid; gap: 14px; }
.plan-free .btn { justify-self: start; }
.plan-status { display: flex; align-items: center; gap: 16px; }
.plan-badge { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); }
.plan-badge .ic { width: 26px; height: 26px; }
.plan-reason { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin-bottom: 16px; border-color: rgba(255, 193, 94, .35); background: rgba(255, 193, 94, .07); }
.plan-reason .ic { color: var(--gold); }
.plan-reason p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.plan-checkout { display: grid; gap: 12px; margin-top: 6px; padding-top: 18px; border-top: 1px solid rgba(46, 232, 242, .18); }
.plan-checkout[hidden] { display: none; }
.plan-checkout h3, .plan-checkout p { margin: 0; }
.plan-checkout .btn { width: 100%; white-space: normal; height: auto; min-height: 54px; padding: 10px 18px; }
.plan-methods { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-method { min-height: 46px; padding: 0 18px; border-radius: 13px; border: 1px solid var(--line-strong); background: var(--raised); font-weight: 600; }
.plan-method.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.plan-terms { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.plan-terms input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
.plan-saved { display: flex; align-items: flex-start; gap: 10px; color: var(--accent); font-weight: 600; }
.plan-saved .ic { margin-top: 2px; }
.plan-message:empty { display: none; }
.plan-legal { text-align: center; line-height: 2; }
.plan-page a:not(.btn), .legal a { color: var(--accent); text-underline-offset: 3px; }

/* a one-line offer inside «Сегодня» and the course */
.upsell { display: flex !important; align-items: center; gap: 14px; text-decoration: none; color: inherit; padding: 16px 18px; border-color: rgba(255, 193, 94, .28); }
.upsell h3, .upsell p { margin: 0; }
.upsell-mark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: rgba(255, 193, 94, .12); color: var(--gold); }
.upsell .btn { flex: none; }

/* the owner looking at the app as a free user */
.preview-strip { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 16px; border-radius: 14px; border: 1px dashed rgba(255, 193, 94, .5); background: rgba(255, 193, 94, .07); color: var(--gold); font-size: 14px; line-height: 1.35; }
.preview-strip .btn { flex: none; color: var(--text); }
.stack > .preview-strip { margin-bottom: 0; }

/* locks in the course */
.lesson.locked .grow { color: var(--muted); }
.lesson.locked .num { border-style: dashed; color: var(--faint); }
.lesson .lock { color: var(--faint); display: inline-flex; }
.lesson .lock .ic, .lock-note .ic { width: 17px; height: 17px; }
.lock-note { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.level.locked .tag { color: var(--muted); }
.level.locked .bar { display: none; }

/* films */
.film .top .count .short { display: none; }
.film-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.film-card h2, .film-card p { margin: 0; }
.film-card .grow { min-width: 180px; }
.film-mark { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); }
.film-card.locked .film-mark { background: var(--raised); color: var(--faint); }
.film-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rates > a.btn { grid-column: 1 / -1; width: 100%; }

/* people */
.people-page h3, .people-page p { margin: 0; }
.people-page .field { height: 50px; font: 500 16px/1 var(--font); color: var(--text); }
.launch { display: grid; gap: 0; padding-top: 8px; padding-bottom: 8px; }
.launch-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.launch-row + .launch-row { border-top: 1px solid var(--line); }
.add-person { display: grid; gap: 12px; }
.add-person .row { flex-wrap: wrap; }
.people-group { display: grid; gap: 4px; }
.person { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.person .grow { min-width: 150px; display: grid; gap: 4px; }
.person b { overflow-wrap: anywhere; }
.person-menu { max-width: 100%; min-height: 42px; color: var(--text); color-scheme: dark; }
.marks { display: flex; flex-wrap: wrap; gap: 6px; }
.mark { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--accent-soft); color: var(--accent); }
.mark.gold { background: rgba(255, 193, 94, .13); color: var(--gold); }
.mark.off { background: var(--raised); color: var(--muted); }

/* the public entry page */
body.family-entry #rail { display: none !important; }
.family-welcome { gap: 18px; padding-top: 40px; padding-bottom: 40px; }
.welcome-logo { width: 72px; height: 72px; border-radius: 20px; box-shadow: 0 18px 44px -18px var(--accent-glow); }
.family-welcome h1 { margin: 0; }
.welcome-lead { margin: -8px 0 0; font-size: 19px; color: var(--muted); }
.welcome-points { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 8px; max-width: 460px; color: var(--text); }
.welcome-points li { line-height: 1.4; overflow-wrap: anywhere; }
.welcome-note { margin: 0; max-width: 460px; color: var(--gold); overflow-wrap: anywhere; }
.family-welcome .btn.big { min-width: min(100%, 280px); }
.family-welcome > p { margin: 0; max-width: 460px; }
.welcome-price { display: grid; gap: 6px; max-width: 460px; padding: 16px 20px; text-align: center; border-color: rgba(46, 232, 242, .25); }
.welcome-price b { font: 700 22px/1.2 var(--display); }
.welcome-legal a, .welcome-seller a { color: var(--accent); text-underline-offset: 3px; }
.welcome-legal { line-height: 2.2; }

html[data-layout="phone"] .plan-card { padding: 22px 20px 20px; }
html[data-layout="phone"] .plan-price b { font-size: 46px; }
html[data-layout="phone"] .upsell { padding: 14px; gap: 12px; }
html[data-layout="phone"] .film-actions { width: 100%; }
html[data-layout="phone"] .film-actions .btn { flex: 1 1 140px; }
html[data-layout="phone"] .person-menu { width: 100%; min-height: 46px; }
html[data-layout="phone"] .plan-free .btn { justify-self: stretch; }
html[data-layout="phone"] .preview-strip { font-size: 13.5px; }
@media (max-width: 380px) {
  .upsell .btn { display: none; }
  .plan-price b { font-size: 42px; }
  .launch-row { flex-wrap: wrap; }
}

/* Free and Pro side by side (14.10.2026). Source: _night/plan_table.css, appended to tools/plan_layer.css and family.css */
.plan-table { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px; margin: 6px -4px 2px; font-size: 15px; }
.plan-table > * { min-width: 0; }
.pt-label { padding: 13px 8px 13px 4px; border-top: 1px solid rgba(255, 255, 255, .07); line-height: 1.3; overflow-wrap: anywhere; align-self: center; }
.pt-cell { display: grid; justify-items: center; align-content: center; gap: 2px; padding: 10px 2px; border-top: 1px solid rgba(255, 255, 255, .07); text-align: center; }
.pt-cell small { font-size: 11.5px; line-height: 1.15; color: var(--muted); font-variant-numeric: tabular-nums; }
.pt-cell.pro { background: rgba(46, 232, 242, .075); border-left: 1px solid rgba(46, 232, 242, .22); border-right: 1px solid rgba(46, 232, 242, .22); }
.pt-cell.pro small { color: var(--accent); }
.plan-table > .pt-cell.pro:last-child { border-bottom: 1px solid rgba(46, 232, 242, .22); border-radius: 0 0 14px 14px; }
.pt-yes { display: inline-flex; color: var(--accent); }
.pt-cell.free .pt-yes { color: var(--muted); }
.pt-yes .ic { width: 20px; height: 20px; }
.pt-no { color: var(--faint); font-size: 18px; line-height: 1; }
.pt-head { display: grid; justify-items: center; align-content: end; gap: 1px; padding: 10px 2px 10px; text-align: center; border-radius: 14px 14px 0 0; }
.pt-head b { font: 700 17px/1.2 var(--display); letter-spacing: -.01em; }
.pt-head span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pt-head.free b { color: var(--muted); }
.pt-head.pro { background: linear-gradient(180deg, rgba(46, 232, 242, .20), rgba(46, 232, 242, .075)); border: 1px solid rgba(46, 232, 242, .32); border-bottom: 0; }
.pt-head.pro b { background: linear-gradient(120deg, #ff6cbc, #ffc15e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pt-head i { margin-top: 4px; padding: 2px 7px; border-radius: 999px; font: 600 10.5px/1.3 var(--font); font-style: normal; letter-spacing: .02em; white-space: nowrap; background: rgba(255, 255, 255, .1); color: var(--text); }
.pt-head.pro i { background: var(--accent); color: var(--on-primary); }
.plan-card .plan-table + .plan-buy { margin-top: 12px; }
.plan-card > .btn.ghost { justify-self: stretch; }
html[data-layout="desktop"] .plan-table { grid-template-columns: minmax(0, 1fr) 132px 132px; font-size: 16px; margin: 8px 0 4px; }
html[data-layout="desktop"] .pt-label { padding-left: 6px; }
html[data-layout="desktop"] .pt-cell small { font-size: 12.5px; }
html[data-layout="desktop"] .pt-head b { font-size: 19px; }
@media (max-width: 360px) {
  .plan-table { grid-template-columns: minmax(0, 1fr) 56px 56px; font-size: 14px; margin-inline: -8px; }
  .pt-cell small { font-size: 10.5px; }
}

/* ===== Calm film player (14.10.2026). Source: tools/player_layer.css, appended to family.css ===== */
.film { position: relative; }

/* top bar: back · mode · gear, the same on every screen size */
.film .top, html[data-layout="phone"] .film .top { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 10px; padding: 10px 12px; }
.film .top > .btn.icon { width: 44px; height: 44px; padding: 0; }
.film .top .seg, html[data-layout="phone"] .film .top .seg { grid-row: 1; grid-column: 2; justify-self: center; width: min(100%, 300px); display: grid; grid-template-columns: 1fr 1fr; }
.film .top .seg button { min-height: 40px; }
html[data-layout="phone"] .film .top > .btn { grid-row: 1; grid-column: 3; }
html[data-layout="phone"] .film .top > .btn:first-child { grid-column: 1; }

/* the video: a tap replays, a hold changes the speed */
.screen { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.screen.holding { cursor: ew-resize; }
.screen video { transition: opacity .25s ease, filter .25s ease; }
.screen.loading video { opacity: .45; filter: saturate(.6); }
.screen::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 3; opacity: 0; pointer-events: none; transition: opacity .2s;
  background: linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat; background-size: 40% 100%; }
.screen.loading::before { opacity: 1; animation: load-bar 1.05s ease-in-out infinite; }
@keyframes load-bar { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.speed-hud { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; display: flex; align-items: center; gap: 16px; padding: 10px 20px;
  border-radius: 999px; background: rgba(8, 5, 16, .74); border: 1px solid rgba(46, 232, 242, .4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font: 700 22px/1 var(--display); pointer-events: none; font-variant-numeric: tabular-nums; }
.speed-hud[hidden], .speed-badge[hidden] { display: none; }
.speed-hud span { color: var(--faint); font-weight: 600; }
.speed-hud span.on { color: var(--accent); }
.speed-badge { position: absolute; right: 10px; bottom: 12px; z-index: 3; padding: 3px 9px; border-radius: 999px; background: rgba(8, 5, 16, .66);
  font: 600 12px/1.4 var(--font); color: var(--accent); pointer-events: none; font-variant-numeric: tabular-nums; }

/* under the video: one column, one width, the same rows in every state */
.film .deck, html[data-layout="phone"] .film .deck { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 16px 22px; width: 100%; }
.film .deck > :empty { display: none; }
html .film .deck .count { order: 0; font-size: 13px; letter-spacing: .02em; color: var(--faint); font-variant-numeric: tabular-nums; text-align: center; }
html .film .deck .subs { order: 1; width: min(100%, 760px); }
html .film .deck .wordnote, html .film .deck > div:not([class]) { order: 2; }
html .film .deck .actions { order: 3; }  /* «Показать текст» stands where the text will appear */
html .film .deck .controls { order: 4; }
html .film .deck .rates { order: 5; }
html .film .deck .notes { order: 6; }
.film .controls, html[data-layout="phone"] .controls { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 10px; width: min(100%, 520px); }
.film .controls > .btn, html[data-layout="phone"] .controls .btn:not(.icon) { height: 52px; min-height: 52px; flex: none; }
.film .controls .btn.icon { width: 52px; padding: 0; }
.film .controls .btn.replay { background: var(--raised); border: 1px solid rgba(46, 232, 242, .32); color: var(--accent); }
.film .controls .btn:disabled { opacity: .38; }
.film .actions { display: flex; gap: 10px; width: min(100%, 520px); }
.film .actions .btn { flex: 1 1 0; min-width: 0; height: 52px; padding: 0 10px; white-space: nowrap; }
.film .actions .btn.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.film .actions .btn.rec { background: #ff6b5e; color: #fff; border-color: transparent; }
.film .rates, html[data-layout="phone"] .rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(100%, 520px); }
.film .rate, html[data-layout="phone"] .rate { min-width: 0; height: 64px; min-height: 64px; padding: 8px 6px; }

/* the one button that is almost always next: a slow, soft glow, never a flash */
.btn.breathe { animation: breathe 3.8s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { box-shadow: 0 10px 26px -16px rgba(46, 232, 242, .22), inset 0 1px 0 rgba(255, 255, 255, .3); filter: saturate(.9) brightness(.97); }
  50% { box-shadow: 0 12px 32px -12px rgba(46, 232, 242, .46), inset 0 1px 0 rgba(255, 255, 255, .36); filter: saturate(1.06) brightness(1.04); }
}

/* the explanation: its own teal card with a slowly drifting edge */
.film .notes, html[data-layout="phone"] .notes { display: grid; gap: 10px; width: min(100%, 520px); padding: 14px 16px 16px; text-align: left; justify-content: stretch;
  border: 1px solid transparent; border-radius: 16px;
  background: linear-gradient(#120a22, #120a22) padding-box, linear-gradient(100deg, rgba(46, 232, 242, .6), rgba(255, 62, 165, .5), rgba(46, 232, 242, .6)) border-box;
  background-size: 100% 100%, 260% 100%; animation: edge-drift 12s ease-in-out infinite alternate; }
@keyframes edge-drift { from { background-position: 0 0, 0% 0; } to { background-position: 0 0, 100% 0; } }
.notes-head { font: 600 11.5px/1 var(--font); letter-spacing: .13em; text-transform: uppercase; color: #6fd6dc; }
.film .notes .n { display: grid; gap: 3px; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.film .notes .n b { color: #aaf0f6; font-weight: 600; font-size: 15px; margin: 0; overflow-wrap: anywhere; }
.film .notes .n span { color: #8bcfd8; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }

/* the gear sheet */
.film-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .52); }
.film-sheet { position: fixed; z-index: 71; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 480px); max-height: 84dvh; overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 14px; padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: #140c26;
  border: 1px solid var(--line-strong); border-bottom: 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, .6); }
.film-sheet[hidden], .film-backdrop[hidden] { display: none; }
html[data-layout="desktop"] .film-sheet { top: 58px; right: 16px; left: auto; bottom: auto; transform: none; width: 380px; border-radius: 18px; border-bottom: 1px solid var(--line-strong); }
html[data-layout="desktop"] .film-backdrop { background: transparent; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-head b { font: 700 17px/1.2 var(--display); }
.sheet-row { display: grid; gap: 8px; }
.sheet-row > span { color: var(--muted); font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 42px; min-width: 54px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--raised); color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.sheet-link { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 2px; text-decoration: none; color: var(--text); border-top: 1px solid var(--line); }
.sheet-note, .film-sheet p { margin: 0; line-height: 1.5; }
.sheet-note { padding-top: 12px; border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  .btn.breathe, .film .notes, .screen.loading::before { animation: none; }
}

/* wide screens: the video on the left, the panel on the right, nothing squeezed; medium screens simply scroll */
html[data-layout="desktop"] .film { height: auto; min-height: 100vh; }
html[data-layout="desktop"] .film .screen { min-height: 40vh; }
@media (min-width: 1000px) {
  html[data-layout="desktop"] .film { height: 100vh; min-height: 0; grid-template-columns: minmax(0, 1fr) 440px; grid-template-rows: auto minmax(0, 1fr); }
  html[data-layout="desktop"] .film .top { grid-column: 1 / -1; }
  html[data-layout="desktop"] .film .screen { grid-column: 1; grid-row: 2; min-height: 0; }
  html[data-layout="desktop"] .film .deck { grid-column: 2; grid-row: 2; overflow-y: auto; justify-content: flex-start; padding: 20px 20px 28px; border-top: 0; border-left: 1px solid var(--line); }
  html[data-layout="desktop"] .film .subs .en-line { font-size: 24px; }
}
/* a phone on its side: the video must leave room for the controls */
@media (max-height: 520px) {
  html[data-layout="phone"] .screen { aspect-ratio: auto; height: 58dvh; }
}

/* the pager under the phrase list: back · page · next on one line */
.pager { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 18px; }
.pager > span { text-align: center; }

/* ===== Vice City night (14.10.2026). Source: tools/vice_layer.css, appended to family.css last =====
   Violet night sky, neon pink for the main action, neon cyan for state, sunset gold for rewards. */
body {
  background:
    radial-gradient(1000px 520px at 88% -14%, rgba(255, 62, 165, .17), transparent 62%),
    radial-gradient(820px 480px at -12% 108%, rgba(46, 232, 242, .10), transparent 60%),
    radial-gradient(900px 320px at 50% 120%, rgba(255, 138, 92, .07), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
::selection { background: rgba(255, 62, 165, .32); }

/* main buttons: a neon sign — pink with a sunset edge, dark text for easy reading */
.btn.primary {
  background: linear-gradient(180deg, #ff6cbc, #f23a93);
  color: var(--on-primary);
  box-shadow: 0 12px 30px -12px var(--pink-glow), inset 0 1px 0 rgba(255, 255, 255, .38);
}
.btn.good { background: linear-gradient(180deg, #6ff1f8, #22cfe0); color: #04181c; }
.progress i, .scrub i { background: linear-gradient(90deg, #f23a93, #ff6cbc 55%, #ffc15e); box-shadow: 0 0 14px rgba(255, 62, 165, .45); }
.seg button.on { background: var(--pink-soft); color: #ffd3ea; box-shadow: 0 0 0 1px rgba(255, 62, 165, .42) inset; }
#rail a.on { color: #ff8fcc; background: var(--pink-soft); }
html[data-layout="phone"] #rail a.on::before { background: #ff6cbc; box-shadow: 0 0 12px rgba(255, 62, 165, .7); }

/* the sunset card */
.hero {
  background:
    radial-gradient(520px 260px at 100% -10%, rgba(255, 62, 165, .32), transparent 70%),
    radial-gradient(420px 220px at -8% 120%, rgba(46, 232, 242, .16), transparent 70%),
    linear-gradient(150deg, #2a0f3f 0%, #140b26 64%);
  border-color: rgba(255, 62, 165, .32);
}
.family-welcome h1 { background: linear-gradient(110deg, #ffd1ea, #ff6cbc 45%, #2ee8f2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pt-head.pro { background: linear-gradient(180deg, rgba(255, 62, 165, .22), rgba(255, 62, 165, .07)); border-color: rgba(255, 62, 165, .38); }
.pt-cell.pro { background: rgba(255, 62, 165, .07); border-left-color: rgba(255, 62, 165, .25); border-right-color: rgba(255, 62, 165, .25); }
.plan-table > .pt-cell.pro:last-child { border-bottom-color: rgba(255, 62, 165, .25); }
.pt-cell.pro small { color: #ff8fcc; }
.pt-head.pro i { background: #ff3ea5; color: #2a0519; }
.plan-card { border-color: rgba(255, 62, 165, .32); background:
  radial-gradient(560px 260px at 100% -12%, rgba(255, 62, 165, .2), transparent 70%),
  radial-gradient(420px 220px at -10% 118%, rgba(46, 232, 242, .1), transparent 70%),
  linear-gradient(155deg, #2a0f3f 0%, #140b26 62%); }

/* film: the next step glows softly in pink, it never flashes */
.film .btn.reveal { background: linear-gradient(180deg, rgba(255, 62, 165, .17), rgba(255, 62, 165, .07)); border: 1px solid rgba(255, 62, 165, .5); color: #ffd6ec; }
.film .controls .btn.replay { border-color: rgba(46, 232, 242, .32); }
@keyframes breathe {
  0%, 100% { box-shadow: 0 8px 22px -16px rgba(255, 62, 165, .25); border-color: rgba(255, 62, 165, .42); }
  50% { box-shadow: 0 10px 28px -12px rgba(255, 62, 165, .5); border-color: rgba(255, 62, 165, .72); }
}

/* the three ratings: each with its own soft neon edge, so the hand finds the right one without reading */
.film .rate { border-width: 1.5px; transition: border-color .15s, background .15s, box-shadow .15s, transform .08s; }
.film .rate.r0 { border-color: rgba(255, 106, 61, .5); background: linear-gradient(180deg, rgba(255, 106, 61, .11), rgba(255, 106, 61, .03)); box-shadow: inset 0 0 18px -12px rgba(255, 106, 61, .8); }
.film .rate.r1 { border-color: rgba(255, 193, 94, .5); background: linear-gradient(180deg, rgba(255, 193, 94, .1), rgba(255, 193, 94, .03)); box-shadow: inset 0 0 18px -12px rgba(255, 193, 94, .8); }
.film .rate.r2 { border-color: rgba(46, 232, 242, .5); background: linear-gradient(180deg, rgba(46, 232, 242, .1), rgba(46, 232, 242, .03)); box-shadow: inset 0 0 18px -12px rgba(46, 232, 242, .8); }
.film .rate.r0 > span:first-child { color: #ffb59b; }
.film .rate.r1 > span:first-child { color: #ffe0a6; }
.film .rate.r2 > span:first-child { color: #b8fbff; }
.film .rate.r0:hover, .film .rate.r0:active { border-color: #ff6a3d; background: rgba(255, 106, 61, .16); }
.film .rate.r1:hover, .film .rate.r1:active { border-color: #ffc15e; background: rgba(255, 193, 94, .15); }
.film .rate.r2:hover, .film .rate.r2:active { border-color: #2ee8f2; background: rgba(46, 232, 242, .15); }

/* the explanation card: cyan into pink along the edge */
.notes-head { color: #ff8fcc; }
.film .notes .n b { color: #b8fbff; }
.film .notes .n span { color: #c9bfe6; }

/* the locked rows of the phrase list: a shape behind frosted glass */
.libitem.locked { position: relative; cursor: pointer; text-decoration: none; color: inherit; }
.libitem.locked > div { filter: blur(5px); opacity: .55; user-select: none; pointer-events: none; }
.libitem.locked .lock { color: #ff8fcc; display: inline-flex; }
.libitem.locked .id { color: var(--faint); }
.lib-upsell { margin-bottom: 12px; }

/* iPhone: the video takes no touches, so a long press never opens the system menu over the speed gesture */
.screen video { pointer-events: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* ===== «Ночной Майами» (14.10.2026): основной вид, ?style=off выключает. Source: tools/vice2_layer.css =====
   Не цвет, а характер: неоновая надпись, ар-деко заголовки, закат с пальмами, двойные полосы как на фасадах отелей.
   Читаемость важнее всего: новые шрифты только в коротких заголовках и цифрах, текст уроков и фраз — системный. */
@font-face { font-family: 'Russo One'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/russo-one-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Russo One'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/russo-one-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Yellowtail'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/yellowtail-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
div.brand-wordmark, .sunset { display: none; }

/* the neon wordmark: a sign, white core and pink glow */
html[data-style="vice2"] .brand-wordmark { display: block; margin: 0 0 -6px; text-align: center; font: 400 48px/1.05 'Yellowtail', cursive; color: #ffe8f5;
  text-shadow: 0 0 2px #fff, 0 0 8px #ff6cbc, 0 0 18px #ff3ea5, 0 0 38px rgba(255, 62, 165, .55); }

/* deco headings: chunky, a little glow; body text stays plain for reading */
html[data-style="vice2"] .head h1 { font-family: 'Russo One', var(--display); font-weight: 400; letter-spacing: .01em; text-shadow: 0 2px 0 rgba(0, 0, 0, .45), 0 0 22px rgba(255, 62, 165, .28); }
html[data-style="vice2"] .stat b, html[data-style="vice2"] .ring > div { font-family: 'Russo One', var(--display); font-weight: 400; text-shadow: 0 0 12px rgba(46, 232, 242, .35); }
html[data-style="vice2"] .hero .eyebrow { letter-spacing: .14em; text-shadow: 0 0 10px rgba(255, 193, 94, .45); }

/* the main card: a sunset over the sea with two palms */
html[data-style="vice2"] .hero { position: relative; overflow: hidden; isolation: isolate; border-color: rgba(255, 62, 165, .38);
  background: linear-gradient(180deg, #110a2a 0%, #251042 40%, #4a1452 66%, #b0245f 86%, #ff5a7a 97%); }
html[data-style="vice2"] .hero > :not(.sunset) { position: relative; z-index: 1; }
html[data-style="vice2"] .hero h1 { text-shadow: 0 2px 12px rgba(10, 4, 24, .6); }
html[data-style="vice2"] .hero .btn.ghost { background: rgba(10, 6, 22, .45); color: #f1e6ff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html[data-style="vice2"] .sunset { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sunset .sun { position: absolute; right: 13%; bottom: -58px; width: 158px; height: 158px; border-radius: 50%;
  background: linear-gradient(180deg, #ffd27a 0%, #ff8a5c 46%, #ff3ea5 86%); box-shadow: 0 0 70px rgba(255, 62, 165, .5); }
.sunset .sun::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-linear-gradient(180deg, transparent 0 11px, #7a1c55 11px 15px);
  -webkit-mask-image: linear-gradient(180deg, transparent 36%, #000 36%); mask-image: linear-gradient(180deg, transparent 36%, #000 36%); }
.sunset .sea { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: linear-gradient(180deg, rgba(14, 6, 28, .55), rgba(10, 4, 20, .95)); }
.sunset .palm { position: absolute; bottom: -4px; color: #0b0617; line-height: 0; }
.sunset .palm svg { height: 100%; width: auto; display: block; }
.sunset .palm-a { right: -2%; height: 96%; }
.sunset .palm-b { right: 26%; height: 58%; opacity: .96; transform: scaleX(-1); }

/* art-deco: two thin stripes on the top edge of a card, like the bands on an Ocean Drive hotel */
html[data-style="vice2"] .page .card:not(.hero):not(.upsell) { position: relative; }
html[data-style="vice2"] .page .card:not(.hero):not(.upsell)::before { content: ""; position: absolute; top: -1px; left: 22px; width: 46px; height: 5px; pointer-events: none;
  border-top: 2px solid rgba(255, 62, 165, .85); border-bottom: 2px solid rgba(46, 232, 242, .7); }

/* neon on what is active */
html[data-style="vice2"] #rail a.on .ic { filter: drop-shadow(0 0 6px rgba(255, 62, 165, .85)); }
html[data-style="vice2"] #rail a.on { text-shadow: 0 0 10px rgba(255, 62, 165, .55); }
html[data-style="vice2"] .seg button.on { text-shadow: 0 0 10px rgba(255, 62, 165, .7); }

/* the player */
html[data-style="vice2"] .film .deck { position: relative; }
html[data-style="vice2"] .film .deck::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; pointer-events: none;
  border-top: 1px solid rgba(255, 62, 165, .6); border-bottom: 1px solid rgba(46, 232, 242, .45); }
/* the clip timeline under the video: quiet, it should not pull the eye from the picture (Артём, 14.10) */
html[data-style="vice2"] .scrub { background: rgba(255, 255, 255, .06); }
html[data-style="vice2"] .scrub i { background: linear-gradient(90deg, #6e2350, #9a3a72); box-shadow: none; }
html[data-style="vice2"] .deck .count { font-family: 'Russo One', var(--display); letter-spacing: .08em; color: #9d8ec6; }
html[data-style="vice2"] .film .rate > span:first-child, html[data-style="vice2"] .notes-head { font-family: 'Russo One', var(--display); font-weight: 400; letter-spacing: .03em; }
html[data-style="vice2"] .film .btn.reveal { text-shadow: 0 0 10px rgba(255, 108, 188, .55); }
html[data-style="vice2"] .film .controls .btn.replay { text-shadow: 0 0 10px rgba(46, 232, 242, .5); }
/* on a phone the card is narrow and tall: the palms stay low, behind the buttons, never behind the words */
html[data-layout="phone"] .sunset .palm-a { height: 52%; right: -4%; }
html[data-layout="phone"] .sunset .palm-b { height: 34%; right: 30%; }
html[data-layout="phone"] .sunset .sun { width: 120px; height: 120px; bottom: -50px; right: 10%; }

/* the rest of the app */
html[data-style="vice2"] .level { position: relative; }
html[data-style="vice2"] .level::before { content: ""; position: absolute; top: -1px; left: 22px; width: 46px; height: 5px; pointer-events: none; z-index: 1;
  border-top: 2px solid rgba(255, 62, 165, .85); border-bottom: 2px solid rgba(46, 232, 242, .7); }
html[data-style="vice2"] .level .tag { font-family: 'Russo One', var(--display); font-weight: 400; color: #ffd3ea; text-shadow: 0 0 10px rgba(255, 62, 165, .55); }
html[data-style="vice2"] .level.done .tag { color: var(--accent); text-shadow: 0 0 10px rgba(46, 232, 242, .55); }
html[data-style="vice2"] .finish .score { font-family: 'Russo One', var(--display); font-weight: 400; text-shadow: 0 0 24px rgba(255, 62, 165, .45); }
html[data-style="vice2"] .plan-price b, html[data-style="vice2"] .pt-head b { font-family: 'Russo One', var(--display); font-weight: 400; }
html[data-style="vice2"] .film-mark, html[data-style="vice2"] .upsell-mark, html[data-style="vice2"] .plan-badge { box-shadow: 0 0 18px -6px currentColor; }
html[data-style="vice2"] .more-link .ic { color: var(--accent); filter: drop-shadow(0 0 5px rgba(46, 232, 242, .5)); }
html[data-style="vice2"] .lesson.next .num { box-shadow: 0 0 0 4px var(--accent-soft), 0 0 14px rgba(46, 232, 242, .5); }

/* the entry page: the same neon sign, bigger */
html[data-style="vice2"] .family-welcome h1.brand-wordmark { font: 400 68px/1.05 'Yellowtail', cursive; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #ffe8f5;
  text-shadow: 0 0 2px #fff, 0 0 10px #ff6cbc, 0 0 22px #ff3ea5, 0 0 46px rgba(255, 62, 165, .55); letter-spacing: .01em; }
html[data-style="vice2"] .welcome-price b { font-family: 'Russo One', var(--display); font-weight: 400; }

/* ===== Ночное небо за карточками (15.10.2026). Source: tools/sky_layer.css, appended to family.css last =====
   Артём: «плашки сливаются как одно и то же». Фон и карточки были почти одного цвета.
   Теперь за всем — тёмное небо с пятнами неона, которые плавно сдвигаются при прокрутке (как фон чата в Telegram, family.js двигает их),
   а карточки — тёмное стекло: светлее фона, с чёткой рамкой, тенью и своим цветом у каждого раздела. Текст на карточках остаётся на тёмном. */
.sky { display: none; }
html[data-style="vice2"] body { isolation: isolate; background: var(--bg); }
html[data-style="vice2"] .sky { display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, #0d0820 0%, #0b0716 55%, #120619 100%); }
.sky i { position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%; will-change: transform;
  transition: transform 1.1s cubic-bezier(.22, .8, .3, 1); }
.sky i:nth-child(1) { left: -40vmax; top: -42vmax; background: radial-gradient(circle, rgba(255, 62, 165, .30), rgba(255, 62, 165, 0) 62%); }
.sky i:nth-child(2) { right: -46vmax; top: 4vmax; background: radial-gradient(circle, rgba(46, 232, 242, .20), rgba(46, 232, 242, 0) 60%); }
.sky i:nth-child(3) { left: -30vmax; bottom: -50vmax; background: radial-gradient(circle, rgba(124, 60, 255, .34), rgba(124, 60, 255, 0) 62%); }
.sky i:nth-child(4) { right: -38vmax; bottom: -44vmax; background: radial-gradient(circle, rgba(255, 106, 61, .16), rgba(255, 106, 61, 0) 58%); }
@media (prefers-reduced-motion: reduce) { .sky i { transition: none; } }

/* the glass: one step lighter than the sky, a clear edge on top, a shadow under it */
html[data-style="vice2"] .card:not(.hero):not(.plan-card), html[data-style="vice2"] .level {
  background: linear-gradient(180deg, rgba(38, 25, 68, .84), rgba(22, 14, 42, .9));
  border-color: rgba(178, 150, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 34px -22px rgba(0, 0, 0, .95), 0 2px 6px -2px rgba(0, 0, 0, .5); }
html[data-style="vice2"] .card.click:hover, html[data-style="vice2"] .level > button:hover { background-color: transparent; border-color: rgba(46, 232, 242, .4); }
html[data-style="vice2"] .card.click:active { transform: scale(.99); }
html[data-style="vice2"] .page .upsell { border-color: rgba(255, 193, 94, .4); }

/* every section keeps its own colour, so two cards never look like one */
html[data-style="vice2"] .page a.card[href="#/film"] { border-color: rgba(255, 62, 165, .4); background: linear-gradient(135deg, rgba(92, 22, 70, .78), rgba(26, 14, 44, .9) 58%); }
html[data-style="vice2"] .page a.card[href="#/tenses"] { border-color: rgba(46, 232, 242, .36); background: linear-gradient(135deg, rgba(14, 70, 92, .7), rgba(20, 14, 44, .9) 58%); }
html[data-style="vice2"] .page a.card[href="#/review"] { border-color: rgba(255, 193, 94, .38); background: linear-gradient(135deg, rgba(92, 58, 18, .66), rgba(24, 14, 40, .9) 58%); }
html[data-style="vice2"] .page .daily-goal { border-color: rgba(255, 193, 94, .3); }
html[data-style="vice2"] .page a.card[href="#/film"] h3 .ic, html[data-style="vice2"] .page a.card[href="#/film"] .ic { color: #ff7cc4; }
html[data-style="vice2"] .page a.card[href="#/tenses"] .ic { color: var(--accent); }
html[data-style="vice2"] .page a.card[href="#/review"] .ic { color: var(--gold); }
html[data-style="vice2"] .page .card.stat { border-color: rgba(46, 232, 242, .24); background: linear-gradient(180deg, rgba(20, 44, 70, .7), rgba(18, 12, 38, .9)); }

/* a little more air between cards on a phone */
html[data-style="vice2"][data-layout="phone"] .page > .grid, html[data-style="vice2"][data-layout="phone"] .page > .stack { gap: 16px; }

/* ===== Разные формы блоков (v3, 15.10.2026). Source: tools/v3_layer.css, appended to family.css last =====
   Артём: «стандартные окошки повсюду — отличаются только цветом». Теперь у каждого смысла своя форма:
   закатная карточка урока (как была) · неоновая вывеска Pro · открытая «приборка» цели дня · плитки-постеры разделов ·
   табло цифр · меню одним списком · курс — дорожка с остановками. Двойные полоски — одна, под заголовком страницы. */

/* --- poster tiles: a picture on top, the name under it --- */
.posters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.posters-1 { grid-template-columns: minmax(0, 1fr); }
.posters-3 > .poster:first-child { grid-column: 1 / -1; }
html[data-layout="desktop"] .posters-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-layout="desktop"] .posters-3 > .poster:first-child { grid-column: auto; }
.poster { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; text-decoration: none; color: inherit;
  border-radius: 18px; border: 1px solid var(--line); background: var(--surface); transition: transform .12s ease, border-color .15s; }
.poster:active { transform: scale(.98); }
.poster-art { position: relative; height: 92px; display: grid; place-items: center; overflow: hidden; flex: none; }
.poster-glyph { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 2px solid currentColor; }
.poster-glyph .ic { width: 24px; height: 24px; }
.poster-text { display: grid; gap: 3px; padding: 12px 14px 14px; }
.poster-text h3 { margin: 0; font-size: 17px; line-height: 1.2; overflow-wrap: anywhere; }
.poster-text p { margin: 0; font-size: 13.5px; line-height: 1.35; color: var(--muted); }
/* the urgent one (repetition waiting) runs across the full width, picture on the left */
.posters-3 > .poster:first-child { flex-direction: row; align-items: stretch; }
.posters-3 > .poster:first-child .poster-art { width: 92px; height: auto; min-height: 76px; }
.posters-3 > .poster:first-child .poster-text { align-content: center; }
html[data-layout="desktop"] .posters-3 > .poster:first-child { flex-direction: column; }
html[data-layout="desktop"] .posters-3 > .poster:first-child .poster-art { width: auto; height: 92px; }

/* the pictures: a film strip, a synthwave grid, a warm sun — drawn with gradients, no image files */
.poster-film .poster-art { color: #ff8fcf; background: radial-gradient(circle at 50% 50%, rgba(255, 62, 165, .28), transparent 62%), linear-gradient(160deg, #4a1038, #1b0a2a); }
.poster-film .poster-art::before, .poster-film .poster-art::after { content: ""; position: absolute; left: 0; right: 0; height: 7px;
  background: repeating-linear-gradient(90deg, rgba(255, 220, 240, .26) 0 9px, transparent 9px 17px); }
.poster-film .poster-art::before { top: 7px; }
.poster-film .poster-art::after { bottom: 7px; }
.poster-tenses .poster-art { color: #7ff3fa; background: linear-gradient(180deg, #0a1430 0%, #13265a 56%, #0a1430 56.5%); }
.poster-tenses .poster-art::before { content: ""; position: absolute; left: 0; right: 0; top: 56%; height: 1px; background: rgba(46, 232, 242, .9); box-shadow: 0 0 10px rgba(46, 232, 242, .9); }
.poster-tenses .poster-art::after { content: ""; position: absolute; left: -40%; right: -40%; bottom: 0; height: 44%; transform-origin: 50% 0; transform: perspective(90px) rotateX(48deg);
  background-image: linear-gradient(rgba(46, 232, 242, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(46, 232, 242, .5) 1px, transparent 1px); background-size: 20px 12px; }
.poster-tenses .poster-glyph { margin-bottom: 18px; width: 46px; height: 46px; background: #0d1c44; }
.poster-review .poster-art { color: #ffd38a; background: radial-gradient(circle at 50% 135%, rgba(255, 193, 94, .55), transparent 62%), linear-gradient(160deg, #3a2010, #1c0d26); }

/* --- the scoreboard: one strip, three numbers, thin dividers --- */
.scoreboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 14px 2px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.score { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 0 6px; text-align: center; min-width: 0; }
.score + .score { border-left: 1px solid var(--line); }
.score b { font: 700 26px/1 var(--display); font-variant-numeric: tabular-nums; }
.score span { font-size: 12.5px; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }

/* --- «Ещё»: one list, rows with coloured icons --- */
.menu-list { display: grid; overflow: hidden; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.menu-row { display: flex; align-items: center; gap: 14px; min-height: 66px; padding: 12px 16px; text-decoration: none; color: inherit; }
.menu-row + .menu-row { border-top: 1px solid var(--line); }
.menu-row:active { background: rgba(255, 255, 255, .04); }
.menu-row h2 { margin: 0; font-size: 16.5px; line-height: 1.25; }
.menu-row p { margin: 2px 0 0; }
.menu-row > .ic:last-child { color: var(--faint); }
.menu-icon { --tone: 46, 232, 242; flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  color: rgb(var(--tone)); background: rgba(var(--tone), .13); box-shadow: inset 0 0 0 1px rgba(var(--tone), .28); }
.menu-row[data-tone="violet"] .menu-icon { --tone: 170, 136, 255; }
.menu-row[data-tone="grey"] .menu-icon { --tone: 196, 186, 226; }
.menu-row[data-tone="gold"] .menu-icon { --tone: 255, 193, 94; }
.menu-row[data-tone="pink"] .menu-icon { --tone: 255, 108, 188; }
.menu-row[data-tone="orange"] .menu-icon { --tone: 255, 138, 92; }

/* --- the course: levels are stops on one line; the open level is a panel --- */
.track { position: relative; display: grid; gap: 10px; }
.track::before { content: ""; position: absolute; left: 43px; top: 34px; bottom: 34px; width: 2px; border-radius: 2px; opacity: .55; pointer-events: none;
  background: linear-gradient(180deg, var(--primary), var(--accent)); }
html[data-layout="desktop"] .track::before { left: 51px; }
.track .level { position: relative; }
.track .level:not(.open) { background: transparent; border-color: transparent; }
.track .level .tag { position: relative; z-index: 1; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-strong); }
.track .level.open .tag { border-color: var(--primary); }
.track .level.done .tag { border-color: var(--accent); }

/* --- the Pro offer: a sign, the whole of it is the button --- */
.upsell-go { flex: none; display: grid; place-items: center; color: var(--gold); }
.upsell-go .ic { width: 22px; height: 22px; }

/* --- an empty state stands on the background, not in a box --- */
.open-empty .ic { width: 40px; height: 40px; color: var(--accent); }

/* ================= «Ночной Майами» versions of the shapes ================= */
/* one double stripe per screen, under the title, instead of one on every card */
html[data-style="vice2"] .page .card:not(.hero):not(.upsell)::before, html[data-style="vice2"] .level::before { content: none; }
html[data-style="vice2"] .page > .head h1::after { content: ""; display: block; width: 46px; height: 5px; margin-top: 10px;
  border-top: 2px solid rgba(255, 62, 165, .85); border-bottom: 2px solid rgba(46, 232, 242, .7); }

html[data-style="vice2"] .poster { border-color: rgba(178, 150, 255, .2); background: linear-gradient(180deg, rgba(34, 22, 62, .9), rgba(20, 13, 40, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 34px -22px rgba(0, 0, 0, .95); }
html[data-style="vice2"] .poster-film { border-color: rgba(255, 62, 165, .42); }
html[data-style="vice2"] .poster-tenses { border-color: rgba(46, 232, 242, .38); }
html[data-style="vice2"] .poster-review { border-color: rgba(255, 193, 94, .42); }
html[data-style="vice2"] .poster-text h3 { font-family: 'Russo One', var(--display); font-weight: 400; font-size: 16px; letter-spacing: .01em; }
html[data-style="vice2"] .poster-glyph { box-shadow: 0 0 16px -2px currentColor, inset 0 0 10px -2px currentColor; }
html[data-style="vice2"] .poster-glyph .ic { filter: drop-shadow(0 0 4px currentColor); }

html[data-style="vice2"] .scoreboard { background: rgba(8, 5, 18, .7); border-color: rgba(46, 232, 242, .3);
  box-shadow: inset 0 0 22px rgba(46, 232, 242, .07), 0 18px 34px -24px rgba(0, 0, 0, .95); }
html[data-style="vice2"] .score + .score { border-left-color: rgba(255, 62, 165, .3); }
html[data-style="vice2"] .score b { font-family: 'Russo One', var(--display); font-weight: 400; color: #b9f8ff; text-shadow: 0 0 12px rgba(46, 232, 242, .55); }

html[data-style="vice2"] .menu-list { border-color: rgba(178, 150, 255, .2); background: linear-gradient(180deg, rgba(34, 22, 62, .88), rgba(20, 13, 40, .92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 34px -22px rgba(0, 0, 0, .95); }
html[data-style="vice2"] .menu-row + .menu-row { border-top-color: rgba(178, 150, 255, .12); }

html[data-style="vice2"] .track .level:not(.open) { background: transparent; border-color: transparent; box-shadow: none; }
html[data-style="vice2"] .track .level.open { background: linear-gradient(180deg, rgba(34, 22, 62, .96), rgba(20, 13, 40, .97)); }
html[data-style="vice2"] .track .level .tag { background: #140c26; border-color: rgba(255, 62, 165, .55); box-shadow: 0 0 14px -4px rgba(255, 62, 165, .8); }
html[data-style="vice2"] .track .level.done .tag { border-color: rgba(46, 232, 242, .7); box-shadow: 0 0 14px -4px rgba(46, 232, 242, .8); }
html[data-style="vice2"] .track .level.locked .tag { border-color: rgba(178, 150, 255, .28); box-shadow: none; color: #b7a9dd; text-shadow: none; }
html[data-style="vice2"] .track .level.locked h2 { color: #d6cdf0; }
html[data-style="vice2"] .track .level:not(.open) > button:hover { background: rgba(255, 255, 255, .03); }

html[data-style="vice2"] .page .card.click.upsell { padding: 12px 14px; border: 1.5px solid rgba(255, 193, 94, .78); background: rgba(14, 8, 24, .66);
  box-shadow: 0 0 0 1px rgba(255, 193, 94, .1), 0 0 20px -4px rgba(255, 193, 94, .5), inset 0 0 16px -4px rgba(255, 193, 94, .3); }
html[data-style="vice2"] .page .upsell h3 { font-family: 'Russo One', var(--display); font-weight: 400; font-size: 15.5px; color: #ffd38a; text-shadow: 0 0 10px rgba(255, 193, 94, .45); }
html[data-style="vice2"] .page .upsell p { color: #d9cdeb; }
html[data-style="vice2"] .upsell-go .ic { filter: drop-shadow(0 0 5px rgba(255, 193, 94, .7)); }

html[data-style="vice2"] .page .card.row.daily-goal { background: transparent; border-color: transparent; box-shadow: none; padding: 4px 2px; }

html[data-style="vice2"] .open-empty .ic { filter: drop-shadow(0 0 10px rgba(46, 232, 242, .6)); }
html[data-style="vice2"] .open-empty h2 { font-family: 'Russo One', var(--display); font-weight: 400; color: var(--text); }

/* ===== «Сообщить об ошибке» (15.10.2026). Source: tools/report_layer.css, appended to family.css last =====
   Маленькая точка, почти незаметная, но понятная; форма — нижняя шторка, как шестерёнка в плеере. */
/* the button is a finger-sized 40px square; only the 26px circle inside it is seen */
.report-dot { position: fixed; z-index: 40; width: 40px; height: 40px; padding: 0; border: 0; background: none; display: grid; place-items: center;
  color: rgba(255, 255, 255, .55); opacity: .62; transition: opacity .15s, transform .08s; }
.report-dot::before { content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .26);
  background: rgba(10, 6, 22, .42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.report-dot .ic { position: relative; width: 15px; height: 15px; }
.report-dot:hover, .report-dot:focus-visible { opacity: 1; color: #fff; }
.report-dot:active { transform: scale(.92); opacity: 1; }
.report-dot.floating { right: 3px; bottom: calc(var(--nav-height, env(safe-area-inset-bottom, 0px)) + 5px); }
html[data-layout="desktop"] .report-dot.floating { right: 9px; bottom: 9px; }
/* not over the screens where a button sits at the edge, or where the whole screen is a task */
body.focus > .report-dot.floating, body[data-route="subscription"] > .report-dot.floating, body[data-route="film"] > .report-dot.floating { display: none; }  /* the player has its own dot on the video */
.report-dot.in-screen { position: absolute; left: 1px; bottom: 1px; z-index: 4; }

.report-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .55); }
.report-sheet { position: fixed; z-index: 81; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, 480px); max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 14px; padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: #140c26;
  border: 1px solid var(--line-strong); border-bottom: 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, .6); }
html[data-layout="desktop"] .report-sheet { top: 50%; bottom: auto; transform: translate(-50%, -50%); border-radius: 18px; border-bottom: 1px solid var(--line-strong); }
.report-sheet p { margin: 0; line-height: 1.5; }
.report-lead { color: var(--text); font-size: 15px; }
.report-sheet .chips { gap: 8px; }
.report-text { width: 100%; min-height: 104px; padding: 12px 14px; border-radius: 12px; resize: vertical; font: inherit; font-size: 16px; line-height: 1.45;
  color: var(--text); background: var(--raised); border: 1px solid var(--line-strong); outline: none; }
.report-text:focus { border-color: var(--accent); }
.report-text::placeholder { color: var(--faint); }
.report-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.report-actions .btn { height: 50px; }
.report-actions .btn:disabled { opacity: .4; }
.report-shake { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.report-thanks { display: grid; justify-items: center; gap: 10px; padding: 18px 6px 6px; text-align: center; }
.report-thanks .ic { width: 44px; height: 44px; color: var(--accent); }
.report-thanks h2 { margin: 0; }
html[data-style="vice2"] .report-thanks .ic { filter: drop-shadow(0 0 10px rgba(46, 232, 242, .6)); }
html[data-style="vice2"] .report-thanks h2 { font-family: 'Russo One', var(--display); font-weight: 400; }

/* a button that looks like the row links in the player's sheet */
button.sheet-link { width: 100%; background: none; border: 0; border-top: 1px solid var(--line); font: inherit; color: var(--text); text-align: left; cursor: pointer; }

/* a phone on its side is short: the dot would sit on top of the content, so only the shake and the player's own dot stay there */
@media (max-height: 520px) { html[data-layout="phone"] .report-dot.floating { display: none; } }
/* the legal links wrap between the links, never inside a name (320px screens) */
.plan-legal a, .legal a { white-space: nowrap; }

/* ===== Воздух между блоками (15.10.2026). Source: tools/spacing_layer.css, appended to family.css last =====
   Артём: «кнопки слишком близко, громоздко, перенасыщенно — чуть больше расстояния, но чтобы не далеко».
   Ритм вместо одинаковых 16 px: разные блоки разделены 24 px, внутри одной группы (две плитки, дни недели) плотнее. */
html[data-style="vice2"] .page > .stack, html[data-style="vice2"][data-layout="phone"] .page > .stack { gap: 24px; }
/* the neon sign stays close to the card it names */
html[data-style="vice2"] .page > .stack > .brand-wordmark { margin-bottom: -12px; }
/* the goal has no frame, so it gets a little room of its own */
html[data-style="vice2"] .page .card.row.daily-goal { padding: 6px 2px; }
html[data-layout="phone"] .daily-goal .week { margin-top: 4px; }
/* lists of the same kind stay together, a touch looser than before */
html[data-style="vice2"] .track { gap: 14px; }
html[data-style="vice2"] .posters { gap: 14px; }

/* ===== Фильмы: полка постеров (15.10.2026). Source: tools/films_layer.css, appended to family.css last =====
   Обложка рисуется из названия фильма (свой цвет у каждого), ничего не берётся у студий.
   Бесплатные фильмы открыты на 5 фраз; ниже полка «Все фильмы — в Pro»: платные фильмы и замыленные обложки (их нет у тех, у кого Pro). */
.film-shelf { display: grid; gap: 12px; }
.shelf-head { display: grid; gap: 2px; }
.shelf-head h2 { margin: 0; font-size: 18px; }
.shelf-head p { margin: 0; }
.film-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
html[data-layout="desktop"] .film-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px; }

.film-poster { --h: 320; display: grid; gap: 8px; min-width: 0; text-decoration: none; color: inherit; transition: transform .12s ease; }
.film-poster:active { transform: scale(.98); }
.film-art { position: relative; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 14px; display: grid; align-items: end; padding: 14px 12px 22px;
  border: 1px solid hsl(var(--h) 70% 60% / .38);
  background: radial-gradient(120% 70% at 50% 18%, hsl(var(--h) 90% 62% / .5), transparent 62%),
    linear-gradient(172deg, hsl(var(--h) 62% 24%) 0%, hsl(calc(var(--h) + 36) 58% 12%) 62%, hsl(calc(var(--h) + 60) 50% 7%) 100%);
  box-shadow: 0 16px 30px -20px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .08); }
/* a film strip along the top and the bottom edge */
.film-art::before, .film-art::after { content: ""; position: absolute; left: 0; right: 0; height: 6px;
  background: repeating-linear-gradient(90deg, rgba(255, 235, 245, .24) 0 8px, transparent 8px 15px); }
.film-art::before { top: 6px; }
.film-art::after { bottom: 6px; }
.film-art-title { position: relative; z-index: 1; font: 400 19px/1.12 'Russo One', var(--display); color: #fff; text-align: center; overflow-wrap: anywhere;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .65), 0 0 18px hsl(var(--h) 90% 60% / .55); }
/* the first letter of the title, big and hollow, so every cover has its own sign */
.film-art-letter { position: absolute; left: 0; right: 0; top: 12%; text-align: center; font: 400 104px/1 'Russo One', var(--display); color: transparent;
  -webkit-text-stroke: 2px hsl(var(--h) 85% 70% / .55); text-shadow: 0 0 26px hsl(var(--h) 90% 60% / .35); pointer-events: none; }
.film-art-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.film-art-title.long { font-size: 15px; }
.film-poster.locked .film-art-letter { filter: blur(2px); }
.film-meta { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.film-meta h3 { margin: 0; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.film-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.film-badge.free { color: var(--accent); background: rgba(46, 232, 242, .12); box-shadow: inset 0 0 0 1px rgba(46, 232, 242, .3); }
.film-badge.all { color: #ff9ad2; background: rgba(255, 62, 165, .12); box-shadow: inset 0 0 0 1px rgba(255, 62, 165, .32); }
.film-badge.pro { color: var(--gold); background: rgba(255, 193, 94, .12); box-shadow: inset 0 0 0 1px rgba(255, 193, 94, .32); }
.film-total { font-size: 12.5px; color: var(--faint); }

/* a Pro film: its cover is seen through frosted glass, with a lock */
.film-poster.locked .film-art-title { filter: blur(3px); opacity: .7; }
.film-poster.locked .film-art { filter: saturate(.7); }
.film-lock { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  color: var(--gold); background: rgba(10, 6, 22, .62); box-shadow: inset 0 0 0 1px rgba(255, 193, 94, .45), 0 0 18px -4px rgba(255, 193, 94, .6); }
.film-lock .ic { width: 20px; height: 20px; }

/* frosted covers on the Pro shelf: the shape of a title, words that cannot be read, a clear lock */
.film-poster.frosted .film-art-title { filter: blur(4.5px); opacity: .85; }
.film-poster.frosted .film-art-letter { filter: blur(3px); }
.film-poster.frosted .film-art { filter: saturate(.8); }
.film-poster.frosted .film-meta .bar { filter: blur(3px); }
.film-meta .bar { display: block; height: 11px; width: 78%; border-radius: 5px; background: rgba(255, 255, 255, .32); }

.film-suggest { display: inline-flex; align-items: center; gap: 8px; justify-self: center; padding: 10px 14px; min-height: 44px; color: var(--muted); text-decoration: none; font-size: 14.5px; }
.film-suggest .ic { color: var(--accent); }

html[data-style="vice2"] .shelf-head h2 { font-family: 'Russo One', var(--display); font-weight: 400; letter-spacing: .02em; }
html[data-style="vice2"] .film-poster:not(.frosted):hover .film-art { border-color: hsl(var(--h) 80% 65% / .7); }

/* a real poster: the picture fills the cover, the drawn letter and title step aside */
.film-art.has-poster { background-size: cover; background-position: center; background-repeat: no-repeat; border-color: rgba(255, 255, 255, .14); }
.film-art.has-poster .film-art-letter, .film-art.has-poster .film-art-title, .film-art.has-poster::before { display: none; }
.film-art.has-poster::after { top: auto; bottom: 0; height: 34%; background: linear-gradient(180deg, transparent, rgba(8, 4, 18, .55)); }
.film-poster.locked .film-art.has-poster::after { top: 0; height: auto; background: rgba(10, 6, 22, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
/* «Управление фильмами»: the poster next to its buttons */
.poster-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; margin: 4px 0 6px; }
.poster-thumb { width: 96px; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; display: grid; place-items: center; text-align: center;
  background: var(--raised); border: 1px dashed var(--line-strong); color: var(--faint); font-size: 12px; padding: 0; }
.poster-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster-row .stack { gap: 8px; }

/* the difficulty sticker: signal-strength bars and the level, small, in the top corner of the cover */
.film-level { --lv: 46, 232, 242; position: absolute; z-index: 2; top: 16px; left: 8px; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 7px 3px 6px; border-radius: 8px; font: 400 11.5px/1 'Russo One', var(--display); letter-spacing: .04em; color: rgb(var(--lv));
  background: rgba(8, 4, 18, .72); box-shadow: inset 0 0 0 1px rgba(var(--lv), .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.film-level[data-level="B1"] { --lv: 120, 230, 160; }
.film-level[data-level="B2"] { --lv: 255, 193, 94; }
.film-level[data-level="C1"] { --lv: 255, 138, 92; }
.film-level[data-level="C2"] { --lv: 255, 98, 178; }
.film-level-bars { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.film-level-bars i { display: block; width: 2.5px; border-radius: 1px; background: rgba(255, 255, 255, .22); }
.film-level-bars i:nth-child(1) { height: 3px; } .film-level-bars i:nth-child(2) { height: 5px; } .film-level-bars i:nth-child(3) { height: 7px; }
.film-level-bars i:nth-child(4) { height: 8.5px; } .film-level-bars i:nth-child(5) { height: 10px; }
.film-level-bars i.on { background: rgb(var(--lv)); }
/* on frosted covers and under the lock the sticker stays sharp: it is part of the shelf, not of the picture */
.film-poster.frosted .film-level, .film-poster.locked .film-level { filter: none; }

/* frosted Pro covers: a pre-blurred real poster under a dark veil and a lock */
.film-poster.frosted .film-art.has-poster::before { display: none; }
.film-poster.frosted .film-art.has-poster::after { top: 0; bottom: 0; height: auto; background: rgba(10, 6, 22, .42); }
.film-poster.frosted .film-art { filter: saturate(.9); }

/* the Films screen opens with a centred title, like the cover of a shelf */
.films-page .head { justify-items: center; text-align: center; }
.films-page .head p { max-width: 34ch; }
html[data-style="vice2"] .films-page .head h1::after { margin-left: auto; margin-right: auto; }

/* the end of the Pro shelf: rows cut off and fading out, then a button, so nobody takes eight covers for everything */
.film-fade { position: relative; max-height: 560px; overflow: hidden; margin-top: 2px; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 96%); mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 96%); }
html[data-layout="desktop"] .film-fade { max-height: 470px; }
.film-all > .film-grid + .film-fade { margin-top: 14px; }
.film-more { position: relative; z-index: 2; justify-self: center; margin-top: -34px; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  min-height: 48px; padding: 10px 18px; border-radius: 999px; text-decoration: none; color: var(--text); font-size: 15px; text-align: center;
  background: rgba(14, 8, 24, .86); border: 1.5px solid rgba(255, 193, 94, .7);
  box-shadow: 0 0 22px -4px rgba(255, 193, 94, .5), inset 0 0 14px -4px rgba(255, 193, 94, .3); }
.film-more b { color: var(--gold); font-weight: 600; }
.film-more .ic { color: var(--gold); width: 18px; height: 18px; }
.film-more:active { transform: scale(.98); }
@media (max-width: 360px) { .film-art-title { font-size: 16px; } .film-art-title.long { font-size: 14px; } .film-art-letter { font-size: 88px; } }
.film-art-title { overflow-wrap: break-word; hyphens: manual; }

/* ===== Плавающая капсула навигации (17.10.2026). Source: tools/nav_layer.css, appended to family.css last =====
   Артём: «как внизу в новом Ютубе: минималистично, полоска-капсула». Только телефон; на компьютере слева колонка, как была.
   Неактивные вкладки — значок; открытая — значок и слово в подсвеченной «таблетке», которая плавно растёт. */
html[data-layout="phone"] { --nav-height: calc(84px + env(safe-area-inset-bottom, 0px)); }
html[data-layout="phone"] #rail { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: auto; height: 62px; padding: 7px;
  display: flex; align-items: center; justify-content: space-between; gap: 2px; border-radius: 31px;
  background: rgba(16, 10, 30, .82); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(190, 160, 255, .2);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06); }
html[data-layout="phone"] #rail a { position: relative; display: flex; justify-items: normal; flex: 1 1 0; width: auto; min-width: 0; height: 48px; padding: 0; gap: 8px; border-radius: 24px;
  flex-direction: row; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 600; letter-spacing: 0; color: rgba(214, 205, 240, .62);
  background: transparent; transition: flex-grow .3s cubic-bezier(.3, .8, .3, 1), background .2s ease, color .2s ease; -webkit-tap-highlight-color: transparent; }
html[data-layout="phone"] #rail a .ic { width: 24px; height: 24px; flex: none; transform: none; filter: none; }
html[data-layout="phone"] #rail a .nav-label { display: none; white-space: nowrap; }
html[data-layout="phone"] #rail a.on { flex-grow: 2.3; color: #ffe4f3; background: linear-gradient(135deg, rgba(255, 62, 165, .3), rgba(124, 60, 255, .24));
  box-shadow: inset 0 0 0 1px rgba(255, 120, 196, .5), 0 0 18px -6px rgba(255, 62, 165, .7); text-shadow: none; }
html[data-layout="phone"] #rail a.on .nav-label { display: inline; }
html[data-layout="phone"] #rail a.on .ic { filter: drop-shadow(0 0 6px rgba(255, 108, 188, .7)); }
html[data-layout="phone"] #rail a.on::before { display: none; }
html[data-layout="phone"] #rail a:active:not(.on) { background: rgba(255, 255, 255, .07); }
html[data-layout="phone"] #rail .badge { top: 3px; right: calc(50% - 22px); }
html[data-layout="phone"] #rail a.on .badge { right: 10px; }
@media (max-height: 520px) {
  html[data-layout="phone"] { --nav-height: calc(66px + env(safe-area-inset-bottom, 0px)); }
  html[data-layout="phone"] #rail { height: 52px; bottom: calc(6px + env(safe-area-inset-bottom, 0px)); padding: 5px; border-radius: 26px; }
  html[data-layout="phone"] #rail a { height: 42px; }
}
@media (prefers-reduced-motion: reduce) { html[data-layout="phone"] #rail a { transition: none; } }

/* ===== Движение (17.10.2026). Source: tools/motion_layer.css, appended to family.css last =====
   Артём: «не хватает анимации в целом, хочу плавные переходы как в Ютубе». Только transform и opacity (их считает видеокарта),
   ни одного файла, ни одной библиотеки; при «уменьшить движение» в настройках телефона всё это выключается. */

/* --- the bottom bar: one pill that springs to the open tab (main.js works out where it ends up) --- */
.nav-pill { display: none; }
html[data-layout="phone"] .nav-pill { display: block; position: absolute; z-index: 0; left: 0; top: 50%; width: 0; height: 48px; margin-top: -24px; opacity: 0;
  border-radius: 24px; pointer-events: none; will-change: transform, width;
  transition: transform .38s cubic-bezier(.34, 1.32, .5, 1), width .38s cubic-bezier(.34, 1.32, .5, 1), opacity .2s ease;
  background: linear-gradient(135deg, rgba(255, 62, 165, .3), rgba(124, 60, 255, .24));
  box-shadow: inset 0 0 0 1px rgba(255, 120, 196, .5), 0 0 18px -6px rgba(255, 62, 165, .7); }
html[data-layout="phone"] #rail a { z-index: 1; }
html[data-layout="phone"] #rail a.on { background: none; box-shadow: none; }
html[data-layout="phone"] #rail a.on .ic { animation: nav-pop .45s cubic-bezier(.3, 1.7, .5, 1); }
html[data-layout="phone"] #rail a.on .nav-label { animation: fade-in .26s ease .06s backwards; }
@keyframes nav-pop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }
@keyframes fade-in { from { opacity: 0; } }
@media (max-height: 520px) { html[data-layout="phone"] .nav-pill { height: 42px; margin-top: -21px; } }

/* --- screens: the old one fades out, the new one comes in and its blocks follow one after another --- */
#view { transition: opacity .09s ease; }
#view.leaving { opacity: 0; }
.page { animation: fade-in .24s ease both; }
@keyframes item-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.page .stack > *, .page .posters > *, .page .film-grid > *, .page .menu-list > *, .page .track > *, .page .scoreboard > *, .films-page .head > * {
  animation: item-in .44s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--n, 0) * 48ms); }
.page .stack > :nth-child(1), .page .posters > :nth-child(1), .page .film-grid > :nth-child(1), .page .menu-list > :nth-child(1), .page .track > :nth-child(1) { --n: 0; }
.page .stack > :nth-child(2), .page .posters > :nth-child(2), .page .film-grid > :nth-child(2), .page .menu-list > :nth-child(2), .page .track > :nth-child(2) { --n: 1; }
.page .stack > :nth-child(3), .page .posters > :nth-child(3), .page .film-grid > :nth-child(3), .page .menu-list > :nth-child(3), .page .track > :nth-child(3) { --n: 2; }
.page .stack > :nth-child(4), .page .posters > :nth-child(4), .page .film-grid > :nth-child(4), .page .menu-list > :nth-child(4), .page .track > :nth-child(4) { --n: 3; }
.page .stack > :nth-child(5), .page .film-grid > :nth-child(5), .page .menu-list > :nth-child(5), .page .track > :nth-child(5) { --n: 4; }
.page .stack > :nth-child(6), .page .film-grid > :nth-child(6), .page .menu-list > :nth-child(6), .page .track > :nth-child(6) { --n: 5; }
.page .stack > :nth-child(n+7), .page .film-grid > :nth-child(n+7), .page .menu-list > :nth-child(n+7), .page .track > :nth-child(n+7) { --n: 6; }
.page .scoreboard > :nth-child(2) { --n: 1; } .page .scoreboard > :nth-child(3) { --n: 2; }

/* --- while the data is on its way: grey blocks that breathe --- */
.skeleton { animation: none; display: grid; gap: 16px; align-content: start; }
.sk { display: block; border-radius: 14px; background: linear-gradient(100deg, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .12) 45%, rgba(255, 255, 255, .05) 65%);
  background-size: 240% 100%; animation: sk-shimmer 1.35s ease-in-out infinite; }
.sk-title { height: 34px; width: 44%; border-radius: 10px; }
.sk-line { height: 14px; width: 70%; border-radius: 7px; margin-bottom: 8px; }
.sk-card { height: 124px; }
.sk-card.short { height: 84px; }
@keyframes sk-shimmer { from { background-position: 130% 0; } to { background-position: -130% 0; } }

/* --- sheets, the veil behind them, the message at the bottom --- */
@keyframes veil-in { from { opacity: 0; } }
@keyframes sheet-up { from { opacity: 0; translate: 0 26px; } }
@keyframes sheet-pop { from { opacity: 0; scale: .96; } }
.report-backdrop, .film-backdrop { animation: veil-in .2s ease both; }
.report-sheet, .film-sheet { animation: sheet-up .28s cubic-bezier(.2, .85, .25, 1) both; }
html[data-layout="desktop"] .report-sheet, html[data-layout="desktop"] .film-sheet { animation: sheet-pop .2s ease both; }
#toast:not([hidden]) { animation: toast-in .26s cubic-bezier(.2, .85, .25, 1) both; }
@keyframes toast-in { from { opacity: 0; translate: 0 14px; } }
.report-thanks .ic { animation: nav-pop .5s cubic-bezier(.3, 1.7, .5, 1) both; }

/* --- touch: everything you can press gives a little under the finger and comes back with a spring --- */
.menu-row { transition: transform .18s cubic-bezier(.2, .8, .2, 1), background .15s ease; }
.menu-row:active { transform: scale(.985); }
.card.click, .level > button, .lesson { transition: transform .18s cubic-bezier(.2, .8, .2, 1), border-color .15s ease, background-color .15s ease; }
.card.click:active, .lesson:active { transform: scale(.985); }
.rate, .chip, .option { transition: transform .16s cubic-bezier(.2, .8, .2, 1), border-color .15s ease, background-color .15s ease; }
.rate:active, .chip:active, .option:active { transform: scale(.96); }
.btn:active:not(:disabled) { transform: scale(.97); }

/* --- the «Фильмы» tile on the home screen: the collage of covers, drifting slowly --- */
.poster-film .poster-art { background: #170a26; }
.poster-film .poster-art::before { content: ""; position: absolute; inset: -9%; height: auto; top: -9%; bottom: -9%; left: -9%; right: -9%; z-index: 0;
  background: url(/img/films-collage.jpg) center / cover no-repeat; animation: collage-drift 28s ease-in-out infinite alternate; will-change: transform; }
.poster-film .poster-art::after { top: 0; bottom: 0; left: 0; right: 0; height: auto; z-index: 0;
  background: linear-gradient(180deg, rgba(10, 6, 22, .18) 0%, rgba(10, 6, 22, .62) 100%); }
.poster-film .poster-glyph { background: rgba(10, 6, 22, .55); box-shadow: 0 0 22px -2px currentColor, inset 0 0 10px -2px currentColor; }
@keyframes collage-drift { from { transform: scale(1.02) translateX(-3%); } to { transform: scale(1.12) translateX(3%); } }

/* --- people who asked their phone for less motion get none of it --- */
@media (prefers-reduced-motion: reduce) {
  #view, #view *, .page, .page *, .nav-pill, #rail a, #rail a *, .report-sheet, .film-sheet, .report-backdrop, .film-backdrop, #toast, .sk, .poster-art::before {
    animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ===== Главная по всей высоте (17.10.2026). Source: tools/home_layer.css, appended to family.css last =====
   Артём: «ещё больше расстояния на главной, чтобы табло (дни, уроки, очки) было почти в конце страницы, а не всё в кучке».
   Свободное место экрана делится поровну между блоками; табло встаёт внизу, над панелью. На маленьком экране — прежние 24 px. */
.home-page { display: flex; flex-direction: column; min-height: min(100%, 900px); }
html[data-layout="phone"] .home-page { padding-bottom: 18px; }
.home-page > .stack, html[data-style="vice2"] .home-page > .stack, html[data-style="vice2"][data-layout="phone"] .home-page > .stack { flex: 1 0 auto; display: flex; flex-direction: column; gap: 30px; }
.home-page > .stack > * { flex: none; }
.home-page > .stack > :not(.brand-wordmark):not(.preview-strip):not(.hero) { margin-top: auto; }
/* the scoreboard: no outline, a plain dark strip (Артём: «одинаковые обводки везде — не очень») */
.scoreboard, html[data-style="vice2"] .scoreboard { border-color: transparent; background: rgba(6, 3, 14, .62); box-shadow: 0 14px 30px -22px rgba(0, 0, 0, .9); }
html[data-style="vice2"] .score + .score { border-left-color: rgba(255, 255, 255, .07); }