/* Listening Challenge #days. Таблиця стоїть у <head> блокуючою (f1 P6, K1): каркас секції має висоту до решти стилів. */
/* lf:inside r3 · Challenge #days «Світловий стіл: десять днів на плівці» (власник 08.10: календар «слабо», r1 «слааабо»). Предмет -
   підсвічений стіл монтажера: плівка з десяти справжніх кадрів челенджу, вибраний день - у рамці слайда, фраза проступає з-під
   матового скла після звуку; день 10 обведено маркером Мері, поруч монета 100 € (монета - стилі kit-модуля в demo/css/l10.css).
   Стіл - джерело світла: світлий і вдень, і вночі (уночі тьмяніший), тож текст на ньому має власне чорнило. Рухаються лише
   transform і opacity; reduce - без руху. */
#days{--lt-ink:#1D2A37;--lt-ink2:#3B4B5C;--lt-acc:#294967;--lt-hole:#EEF4FA;--lt-film:#14181D}
#days .lt{display:grid;gap:clamp(20px,14px + 1.5vw,30px)}
#days .lt__lead{max-width:36ch;margin-top:12px;color:var(--ink-2);font:400 var(--fs-body)/1.5 var(--font-body);text-wrap:pretty}
#days .lt__table{position:relative;isolation:isolate;display:grid;gap:16px;padding:16px 14px 20px;border-radius:24px;color:var(--lt-ink);
  background:linear-gradient(rgb(41 73 103/5%) 1px,transparent 1px) 0 0/100% 28px,linear-gradient(90deg,rgb(41 73 103/5%) 1px,transparent 1px) 0 0/28px 100%,
    radial-gradient(120% 85% at 50% 38%,#FFFFFF 0,#F3F7FC 52%,#D9E3EF 100%);
  box-shadow:inset 0 0 0 1px rgb(255 255 255/90%),inset 0 0 46px rgb(132 172 222/28%),0 0 0 6px #CBD5E0,0 0 0 7px rgb(41 73 103/22%),
    0 34px 64px -30px rgb(29 52 76/55%),0 0 90px -10px rgb(150 196 245/45%)}
/* слайд: картонна рамка з вікном 4:3, підпис ручкою на полі */
#days .lt__slide{display:grid;justify-items:center;min-width:0}
#days .lt__mount{position:relative;width:min(100%,560px);padding:12px 12px 36px;border-radius:12px;rotate:-1.2deg;
  background:linear-gradient(170deg,#FCFBF7,#EFECE3);box-shadow:inset 0 0 0 1px rgb(0 0 0/7%),inset 0 -2px 0 rgb(0 0 0/4%),0 2px 3px rgb(29 42 55/20%),0 20px 36px -16px rgb(29 42 55/50%)}
#days .lt__frame{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:3px;background:#0E1216;box-shadow:inset 0 0 0 1px rgb(0 0 0/45%)}
#days .lt__still,#days .lt__clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#days .lt__clip{opacity:0}
#days .lt__frame[data-playing] .lt__clip{opacity:1}
#days .lt__play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;width:100%;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
#days .lt__play[hidden]{display:none}
#days .lt__play:focus-visible{outline:3px solid #FFFFFF;outline-offset:-6px}
#days .lt__disc{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgb(255 255 255/92%);color:var(--lt-acc);
  box-shadow:0 0 0 6px rgb(255 255 255/28%),0 10px 24px rgb(0 0 0/35%)}
#days .lt__disc svg{width:26px;height:26px;margin-left:3px;fill:currentColor}
#days .lt__frame[data-playing] .lt__disc{opacity:0;scale:.86}
#days .lt__mark{position:absolute;left:16px;bottom:8px;color:#26394C;font:italic 500 1.125rem/1 var(--font-display);letter-spacing:-.01em}
/* підпис: день, фраза під матовим склом (до звуку) і чиста (після), переклад */
#days .lt__side{position:relative;display:grid;align-content:start;min-width:0}
#days .lt__cap{display:grid;gap:6px;padding:0 4px}
#days .lt__day{color:var(--lt-acc);font:700 .8125rem/1.2 var(--font-body);letter-spacing:.07em;text-transform:uppercase}
#days .lt__say{display:grid}
#days .lt__ph{grid-area:1/1;font:500 1.5rem/1.2 var(--font-display);letter-spacing:-.015em;text-wrap:balance}
#days .lt__ph--frost{color:var(--lt-acc);filter:blur(6px);opacity:.5;-webkit-user-select:none;user-select:none}
#days .lt__ph--clear{opacity:0}
#days .lt__ua,#days .lt__hint{grid-row:3;grid-column:1;color:var(--lt-ink2);font:400 .9375rem/1.45 var(--font-body)}
#days .lt__ua{opacity:0}
#days .lt__hint{color:var(--lt-acc);font-weight:600}
#days .lt__cap[data-heard] .lt__ph--clear,#days .lt__cap[data-heard] .lt__ua{opacity:1}
#days .lt__cap[data-heard] :is(.lt__ph--frost,.lt__hint){opacity:0}
/* розбір Мері «що тут злилося» (checklist уроку дня): під склом, доки день не прослухано; потім пари проявляються по черзі */
#days .lt__mary{grid-row:4;grid-column:1;display:grid;gap:8px;margin-top:6px;padding-top:12px;border-top:1px dashed rgb(41 73 103/24%)}
#days .lt__mary-h{color:var(--lt-acc);font:700 .8125rem/1.2 var(--font-body);letter-spacing:.07em;text-transform:uppercase}
#days .lt__nset{display:grid}
#days .lt__notes{grid-area:1/1;display:flex;flex-wrap:wrap;gap:6px;min-width:0}
#days .lt__note{display:inline-flex;align-items:baseline;gap:2px;min-width:0;padding:5px 11px 6px;border-radius:999px;background:rgb(255 255 255/78%);
  box-shadow:inset 0 0 0 1px rgb(41 73 103/16%),0 1px 2px rgb(29 42 55/8%);color:var(--lt-ink2);font:600 .875rem/1.25 var(--font-body)}
#days .lt__note>span{color:#6A7A8B}
#days .lt__note i{color:var(--lt-acc);font:italic 500 1.0625rem/1.15 var(--font-display);letter-spacing:-.01em}
#days .lt__notes--frost{filter:blur(4px);opacity:.42;-webkit-user-select:none;user-select:none}
#days .lt__notes--clear .lt__note{opacity:0}
#days .lt__cap[data-heard] .lt__notes--frost{opacity:0}
#days .lt__cap[data-heard] .lt__notes--clear .lt__note{opacity:1}
/* плівка: смуга перфорації світиться столом, номер дня - бурштиновий друк на краю; вибраний кадр яскравий, решта - як на столі */
#days .lt__film{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));row-gap:14px;margin:4px 0 0;padding:0;list-style:none;rotate:-.6deg}
#days .lt__film li{position:relative;min-width:0;padding:11px 2px 19px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Crect x='2.5' y='2' width='5' height='4' rx='1.1' fill='%23EEF4FA'/%3E%3C/svg%3E") 0 1px/10px 8px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Crect x='2.5' y='2' width='5' height='4' rx='1.1' fill='%23EEF4FA'/%3E%3C/svg%3E") 0 100%/10px 8px repeat-x,
    var(--lt-film);box-shadow:0 1px 0 rgb(0 0 0/30%)}
#days .lt__film li:nth-child(5n+1){border-radius:3px 0 0 3px}
#days .lt__film li:nth-child(5n){border-radius:0 3px 3px 0}
#days .lt__f{position:relative;display:grid;place-items:center;width:100%;min-height:44px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
#days .lt__f img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:1px;opacity:.74}
#days .lt__f[aria-pressed=true] img{opacity:1;box-shadow:0 0 0 2px #FFFFFF,0 0 14px rgb(255 255 255/55%)}
#days .lt__n{position:absolute;left:1px;top:calc(100% + 1px);padding:0 3px;background:var(--lt-film);color:#E9B84C;font:700 .8125rem/1.1 var(--font-body);font-variant-numeric:tabular-nums lining-nums;letter-spacing:.04em}
#days .lt__f:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
#days .lt__film li[data-heard] .lt__n::after{content:"";display:inline-block;width:7px;height:4px;margin:0 0 3px 4px;border:solid #E9B84C;border-width:0 0 2px 2px;rotate:-45deg}
#days .lt__line{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#days .lt__ring{position:absolute;z-index:2;left:-14%;top:-16%;width:128%;height:132%;overflow:visible;pointer-events:none;fill:none;stroke:var(--marker);
  stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 1px 0 rgb(255 255 255/50%))}
@media (max-width:1023px){
  /* телефон: плівка одразу під слайдом - дотик не зсуває її, коли змінюється довжина фрази; підпис і розбір - нижче */
  #days .lt__table{grid-template-areas:"slide" "film" "cap" "link";row-gap:18px}
  #days .lt__slide{grid-area:slide;justify-items:start}
  #days .lt__mount{width:calc(100% - 30px);margin-left:4px}
  #days .lt__side{display:contents}
  #days .lt__cap{grid-area:cap}
  /* плівка - одна стрічка, що гортається пальцем усередині столу (сторінка вбік не їде); правий край тане - видно, що далі є кадри */
  #days .lt__film{grid-area:film;display:flex;margin:-6px -14px -4px;padding:12px 14px 10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    scroll-padding-inline:14px;scrollbar-width:none;rotate:none;-webkit-mask:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent);mask:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent)}
  #days .lt__film::-webkit-scrollbar{display:none}
  #days .lt__film[data-end]{-webkit-mask:none;mask:none}
  #days .lt__film li{flex:0 0 64px;scroll-snap-align:start}
  #days .lt__film li:nth-child(5n+1),#days .lt__film li:nth-child(5n){border-radius:0}
  #days .lt__film li:first-child{border-radius:3px 0 0 3px}
  #days .lt__film li:last-child{border-radius:0 3px 3px 0;margin-right:24px}
  #days .lt__cap{grid-template-rows:auto auto auto auto}
  #days .lt__mary{margin-top:4px;padding-top:10px}
}
@media (min-width:1024px){
  #days .lt__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);align-items:end;column-gap:48px}
  #days .lt__lead{margin:0 0 6px}
  /* стіл: слайд ліворуч (монета лежить на його куті), праворуч - день, фраза, переклад і розбір Мері; під ними посилання на курс */
  #days .lt__table{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;
    grid-template-areas:"slide cap" "slide link" "film film";column-gap:56px;row-gap:26px;padding:30px 34px 28px;margin-bottom:0}
  #days .lt__slide{grid-area:slide;justify-items:start}
  #days .lt__mount{width:calc(100% - 36px);max-width:540px;padding:14px 14px 40px}
  #days .lt__mark{left:18px;bottom:10px;font-size:1.25rem}
  #days .lt__side{display:contents}
  #days .lt__cap{grid-area:cap;align-self:center;gap:10px;padding:0}
  #days .lt__ph{font-size:2.125rem;line-height:1.15}
  #days .lt__ua,#days .lt__hint{font-size:1rem}
  #days .lt__mary{gap:10px;margin-top:10px;padding-top:16px}
  #days .lt__notes{gap:8px}
  #days .lt__note{padding:6px 14px 7px;font-size:.9375rem}
  #days .lt__note i{font-size:1.25rem}
  #days .lt__film{grid-area:film;grid-template-columns:repeat(10,minmax(0,1fr));rotate:-.4deg}
  #days .lt__film li{padding:12px 3px 21px}
  #days .lt__film li:nth-child(5n+1),#days .lt__film li:nth-child(5n){border-radius:0}
  #days .lt__film li:first-child{border-radius:3px 0 0 3px}
  #days .lt__film li:last-child{border-radius:0 3px 3px 0}
}
@media (max-width:374px){#days .lt__ph{font-size:1.3125rem}}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) #days .lt__table{background:linear-gradient(rgb(41 73 103/6%) 1px,transparent 1px) 0 0/100% 28px,
  linear-gradient(90deg,rgb(41 73 103/6%) 1px,transparent 1px) 0 0/28px 100%,radial-gradient(120% 85% at 50% 38%,#EDF2F8 0,#DCE5EF 52%,#B7C6D7 100%);
  box-shadow:inset 0 0 0 1px rgb(255 255 255/50%),inset 0 0 46px rgb(132 172 222/30%),0 0 0 6px #2C3642,0 0 0 7px rgb(0 0 0/40%),0 34px 64px -30px rgb(0 0 0/70%),0 0 110px -10px rgb(130 180 240/30%)}}
:root[data-theme=dark] #days .lt__table{background:linear-gradient(rgb(41 73 103/6%) 1px,transparent 1px) 0 0/100% 28px,
  linear-gradient(90deg,rgb(41 73 103/6%) 1px,transparent 1px) 0 0/28px 100%,radial-gradient(120% 85% at 50% 38%,#EDF2F8 0,#DCE5EF 52%,#B7C6D7 100%);
  box-shadow:inset 0 0 0 1px rgb(255 255 255/50%),inset 0 0 46px rgb(132 172 222/30%),0 0 0 6px #2C3642,0 0 0 7px rgb(0 0 0/40%),0 34px 64px -30px rgb(0 0 0/70%),0 0 110px -10px rgb(130 180 240/30%)}
@media (prefers-reduced-motion:no-preference){
  #days .lt__clip,#days .lt__disc{transition:opacity 200ms var(--ease-out),scale 200ms var(--ease-out)}
  #days :is(.lt__ph,.lt__ua,.lt__hint){transition:opacity 420ms var(--ease-out)}
  #days .lt__notes--frost{transition:opacity 300ms var(--ease-out)}
  #days .lt__notes--clear .lt__note{translate:0 4px;transition:opacity 360ms var(--ease-out) calc(360ms + var(--k) * 120ms),translate 360ms var(--ease-settle,var(--ease-out)) calc(360ms + var(--k) * 120ms)}
  #days .lt__cap[data-heard] .lt__notes--clear .lt__note{translate:none}
  #days .lt__f img{transition:opacity var(--dur-ui) var(--ease-out)}
  #days .lt__f:active{scale:.97}
  #days .lt__f{transition:scale var(--dur-press) var(--ease-out)}
  #days .lt[data-armed] .lt__ring path{stroke-dashoffset:1}
  #days .lt[data-drawn] .lt__ring path{stroke-dashoffset:0;transition:stroke-dashoffset 700ms var(--ease-out) 250ms}
}
@media (hover:hover){#days .lt__f:hover img{opacity:1}#days .lt__play:hover .lt__disc{scale:1.04}}
/* без JS: плівка - список днів, кадр і фраза поруч */
.no-js #days .lt__film{grid-template-columns:1fr;rotate:none}
.no-js #days .lt__film li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;border-radius:3px}
.no-js #days .lt__line{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;color:#E9EEF4;font:400 .9375rem/1.4 var(--font-body)}
.no-js #days :is(.lt__ph--frost,.lt__hint,.lt__notes--frost){display:none}
.no-js #days .lt__notes--clear .lt__note{opacity:1}
.no-js #days .lt__ph--clear,.no-js #days .lt__ua{opacity:1}
/* /lf:inside */

/* lf:inside-f1 · монета гранту - тиха (власник r3: «100 евро навязчивые очень», «не дни челлендж, а 100 евро»). Одна плоска монета
   44 px приглушеної латуні поруч із рядком 15-16 px (R19), не на кадрі; без стопки, блиску, перевороту й руху. Веде на #faq-grant. */
#days .lt__grant{grid-area:link;margin:0;justify-self:start}
#days .lt__grant-a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding-right:4px;color:var(--lt-acc);text-decoration:none;
  font:600 .9375rem/1.3 var(--font-body);border-radius:999px;-webkit-tap-highlight-color:transparent}
#days .lt__grant-a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
#days .lt__coin{flex:0 0 auto;display:grid;place-content:center;justify-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--lt-coin);color:var(--lt-coin-ink);box-shadow:inset 0 0 0 1px var(--lt-coin-rim),inset 0 0 0 4px var(--lt-coin),inset 0 0 0 5px var(--lt-coin-line)}
#days .lt__coin b{font:500 1.25rem/1 var(--font-display);letter-spacing:-.02em}
@media (hover:hover){#days .lt__grant-a:hover .lt__grant-t{text-decoration:underline;text-underline-offset:3px}}
#days{--lt-coin:#E7D9B0;--lt-coin-rim:#BFA568;--lt-coin-line:rgb(107 85 32/22%);--lt-coin-ink:#5E4A1B}
@media (max-width:1023px){#days .lt__grant{margin-top:-6px}}
@media (min-width:1024px){#days .lt__grant{align-self:end}}
/* ніч: стіл - тьмяний світловий короб (не світло-блакитна сітка на темній сторінці), текст - власне світле чорнило */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) #days{--lt-ink:#E8EDF2;--lt-ink2:#BAC6D2;--lt-acc:#8DB4E5;--lt-coin:#3A3324;--lt-coin-rim:#7D6A3C;--lt-coin-line:rgb(233 209 150/18%);--lt-coin-ink:#E6D3A0}
  :root:not([data-theme=light]) #days .lt__table{background:linear-gradient(rgb(141 180 229/5%) 1px,transparent 1px) 0 0/100% 28px,linear-gradient(90deg,rgb(141 180 229/5%) 1px,transparent 1px) 0 0/28px 100%,
    radial-gradient(120% 85% at 50% 38%,#26303B 0,#1C232C 55%,#161B21 100%);
    box-shadow:inset 0 0 0 1px rgb(255 255 255/7%),inset 0 0 60px rgb(120 170 230/9%),0 0 0 6px #262D35,0 0 0 7px rgb(0 0 0/45%),0 34px 64px -30px rgb(0 0 0/70%)}
  :root:not([data-theme=light]) #days .lt__mount{background:linear-gradient(170deg,#D6CEBD,#C9C0AD);box-shadow:inset 0 0 0 1px rgb(0 0 0/10%),inset 0 1px 0 rgb(255 255 255/22%),0 1px 1px rgb(0 0 0/45%),0 3px 6px -1px rgb(0 0 0/40%),0 22px 38px -18px rgb(0 0 0/75%)}
  :root:not([data-theme=light]) #days .lt__note{background:rgb(255 255 255/7%);box-shadow:inset 0 0 0 1px rgb(141 180 229/24%)}
  :root:not([data-theme=light]) #days .lt__note>span{color:#93A3B3}
  :root:not([data-theme=light]) #days .lt__mary{border-top-color:rgb(141 180 229/26%)}}
:root[data-theme=dark] #days{--lt-ink:#E8EDF2;--lt-ink2:#BAC6D2;--lt-acc:#8DB4E5;--lt-coin:#3A3324;--lt-coin-rim:#7D6A3C;--lt-coin-line:rgb(233 209 150/18%);--lt-coin-ink:#E6D3A0}
:root[data-theme=dark] #days .lt__table{background:linear-gradient(rgb(141 180 229/5%) 1px,transparent 1px) 0 0/100% 28px,linear-gradient(90deg,rgb(141 180 229/5%) 1px,transparent 1px) 0 0/28px 100%,
  radial-gradient(120% 85% at 50% 38%,#26303B 0,#1C232C 55%,#161B21 100%);
  box-shadow:inset 0 0 0 1px rgb(255 255 255/7%),inset 0 0 60px rgb(120 170 230/9%),0 0 0 6px #262D35,0 0 0 7px rgb(0 0 0/45%),0 34px 64px -30px rgb(0 0 0/70%)}
:root[data-theme=dark] #days .lt__mount{background:linear-gradient(170deg,#D6CEBD,#C9C0AD);box-shadow:inset 0 0 0 1px rgb(0 0 0/10%),inset 0 1px 0 rgb(255 255 255/22%),0 1px 1px rgb(0 0 0/45%),0 3px 6px -1px rgb(0 0 0/40%),0 22px 38px -18px rgb(0 0 0/75%)}
:root[data-theme=dark] #days .lt__note{background:rgb(255 255 255/7%);box-shadow:inset 0 0 0 1px rgb(141 180 229/24%)}
:root[data-theme=dark] #days .lt__note>span{color:#93A3B3}
:root[data-theme=dark] #days .lt__mary{border-top-color:rgb(141 180 229/26%)}
/* плівка тягнеться пальцем: рідна інерція прокрутки лише по осі X усередині столу, сторінка вбік не їде */
@media (max-width:1023px){#days .lt__film{touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}}
/* /lf:inside-f1 */

/* lf:inside-f2 · #days (власник r3 «норм», монета тиха - лишається). До прослуховування фраза й розбір - не розмиття (читалося як
   поломка, особливо вночі), а закриті паперові смужки з підписом, як у чеку. Синього кола навколо дня 10 немає - лише біла рамка
   вибраного кадру. Вхід: плівка під'їжджає до «01», кадр проявляється (days.js). Висота підпису зарезервована (CLS 0). */
#days .lt__ring{display:none}
#days{--lt-strip:color-mix(in srgb,var(--lt-acc) 13%,#FFFFFF);--lt-strip-edge:color-mix(in srgb,var(--lt-acc) 22%,transparent)}
#days .lt__ph--frost{justify-self:start;align-self:start;width:fit-content;max-width:100%;filter:none;opacity:1;color:transparent;
  background:linear-gradient(180deg,transparent .14em,var(--lt-strip) .14em calc(100% - .1em),transparent calc(100% - .1em)) 0 0/100% 1.2em repeat-y;
  border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
#days .lt__notes--frost{filter:none;opacity:1}
#days .lt__notes--frost .lt__note{background:var(--lt-strip);box-shadow:inset 0 0 0 1px var(--lt-strip-edge);border-radius:3px}
#days .lt__notes--frost .lt__note *{color:transparent!important}
#days .lt__notes--frost::after{content:"з’явиться, коли послухаєте";flex:0 0 auto;width:100%;margin-top:2px;color:var(--lt-ink2);font:italic 500 .8125rem/1.3 var(--font-display);letter-spacing:.01em}
@media (max-width:1023px){
  #days .lt__say{min-height:calc(1.5rem * 1.2 * 2)}
  #days .lt__ua,#days .lt__hint{min-height:calc(.9375rem * 1.45 * 2)}
  #days .lt__nset{min-height:70px;align-content:start}
  #days .lt__film{scroll-snap-type:x mandatory}
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) #days{--lt-strip:rgb(232 237 242/11%);--lt-strip-edge:rgb(141 180 229/22%)}}
:root[data-theme=dark] #days{--lt-strip:rgb(232 237 242/11%);--lt-strip-edge:rgb(141 180 229/22%)}
/* /lf:inside-f2 */

/* lf:inside-f4 · #days (власник r3 «норм»; монета - тиха, «оно», не чіпаю). Аудит full3: «сірі прямокутники читаються як
   скелетон завантаження», «полароїд 60 мс порожній», «справа колонка закінчується на 60 % кадру». Закриті рядки - кремові
   паперові смужки скотчу світу з рваними краями, нахил ±1°, легка прозорість - під нею вгадуються літери; коли фрагмент
   дозвучав, смужка відклеюється вправо (translate + rotate, 220 мс) і фраза проступає. Смужки - одразу під «День N», монета -
   внизу колонки на рівні підпису «День 1». Попередній кадр тримається під новим, доки той не декодується (days.js). Reduce -
   без відклеювання, одразу відкрито після звуку. */
#days{--tape:rgb(243 232 207/95%);--tape-ink:rgb(41 73 103/42%);
  --torn:linear-gradient(#000 0 0) 50% 0/calc(100% - 7px) 100% no-repeat,conic-gradient(from 45deg at 0 50%,#000 90deg,#0000 0) 0 0/4px 6px repeat-y,conic-gradient(from 225deg at 100% 50%,#000 90deg,#0000 0) 100% 0/4px 6px repeat-y}
#days .lt__ph--frost{padding:0 10px;rotate:-1deg;transform-origin:0 50%;color:transparent;text-shadow:0 0 7px var(--tape-ink);
  background:linear-gradient(180deg,transparent .08em,var(--tape) .08em calc(100% - .04em),transparent calc(100% - .04em)) 0 0/100% 1.15em repeat-y;
  -webkit-mask:var(--torn);mask:var(--torn)}
#days .lt__notes--frost .lt__note{background:var(--tape);box-shadow:none;border-radius:0;-webkit-mask:var(--torn);mask:var(--torn);transform-origin:0 50%}
#days .lt__notes--frost .lt__note *{color:transparent!important;text-shadow:0 0 5px var(--tape-ink)}
#days .lt__notes--frost .lt__note:nth-child(odd){rotate:.9deg}
#days .lt__notes--frost .lt__note:nth-child(even){rotate:-.8deg}
#days .lt__cap[data-heard] .lt__ph--frost{opacity:0;translate:44px -6px;rotate:6deg}
#days .lt__cap[data-heard] .lt__notes--frost .lt__note{opacity:0;translate:40px -4px;rotate:7deg}
#days .lt__frame{background-image:var(--prev,none);background-size:cover;background-position:center}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) #days{--tape:rgb(236 231 222/16%);--tape-ink:rgb(232 237 242/34%)}}
:root[data-theme=dark] #days{--tape:rgb(236 231 222/16%);--tape-ink:rgb(232 237 242/34%)}
@media (min-width:1024px){
  #days .lt__cap{align-self:start}
  #days .lt__nset{min-height:132px;align-content:start}
}
@media (max-width:1023px){#days .lt__film{cursor:grab}#days .lt__film[data-drag]{cursor:grabbing;scroll-snap-type:none}}
@media (prefers-reduced-motion:no-preference){
  #days .lt__ph--frost{transition:opacity 220ms var(--ease-out),translate 220ms cubic-bezier(.2,.7,.3,1),rotate 220ms cubic-bezier(.2,.7,.3,1)}
  #days .lt__notes--frost .lt__note{transition:opacity 220ms var(--ease-out) calc(120ms + var(--k,0) * 70ms),translate 220ms cubic-bezier(.2,.7,.3,1) calc(120ms + var(--k,0) * 70ms),rotate 220ms cubic-bezier(.2,.7,.3,1) calc(120ms + var(--k,0) * 70ms)}
}
/* /lf:inside-f4 */

/* f1:P3 · #days (PLAN-f1 R17-R20, K1, K2; days.js спільний з Listening - доводка сторінки в app.js, R21). Нічого не ширше столу:
   плівка в'їжджає з-під краю столу (overflow-x:clip), а не за край сторінки (393: scrollWidth був 449). Постер одразу: під кадром -
   мініатюра дня 1, доки кадр не декодовано. Відео наближене, як кадри days-stills.mjs (1.14 від верхнього краю): титр-кредит за
   краєм і в постері, і у фрагменті. Диск: кільце від дотику до «playing» (data-wait); фрагмент видно, лише коли грає (data-on).
   1440: колонка підпису на висоту слайда (фраза вгорі, розбір посередині, монета внизу), пари рядком. Ніч - паспарту тепла бумага з тінню (R17).
   Рух (R20): вхід - коли плівка сама в кадрі; transform/opacity/clip-path, лише no-preference; у покої нічого не рухається. */
#days{overflow-x:clip;--lt-zoom:1.14}
#days .lt__table{overflow-x:clip}
#days .lt__frame{background-image:var(--prev,url("/landing/media/days/day-01-288.webp"))}
#days .lt__clip{scale:var(--lt-zoom);transform-origin:50% 0}
#days .lt__disc{position:relative;color:#294967}
#days .lt__disc::after{content:"";position:absolute;inset:-7px;border:3px solid transparent;border-top-color:#294967;border-right-color:rgb(41 73 103/40%);border-radius:50%;opacity:0;pointer-events:none}
#days .lt[data-pg] .lt__frame:not([data-on]) .lt__clip{opacity:0}
#days .lt[data-pg] .lt__frame[data-on] .lt__clip{opacity:1}
#days .lt[data-pg] .lt__frame:not([data-on]) .lt__disc{opacity:1;scale:1}
#days .lt[data-pg] .lt__frame[data-on] .lt__disc{opacity:0;scale:.86}
#days .lt__frame[data-wait] .lt__disc::after{opacity:1}
/* пари не тягнуться на висоту підпису «з’явиться…» сусіднього шару (обидва шари в одній клітинці) */
#days .lt__notes{align-items:flex-start;align-content:flex-start}
#days .lt__cap[data-heard] .lt__notes--clear .lt__note{cursor:pointer;-webkit-tap-highlight-color:transparent}
@media (hover:hover){
  #days .lt[data-pg] .lt__frame:not([data-on]) .lt__play:hover .lt__disc{scale:1.04}
  #days .lt__cap[data-heard] .lt__notes--clear .lt__note:hover{box-shadow:inset 0 0 0 1px rgb(41 73 103/38%),0 1px 2px rgb(29 42 55/8%)}
}
@media (min-width:1024px){
  #days .lt__cap{align-self:stretch;grid-template-rows:auto auto auto minmax(0,1fr);padding-top:14px}
  #days .lt__ph{font-size:2.25rem}
  #days .lt__ua,#days .lt__hint{font-size:1.125rem}
  #days .lt__note{min-height:44px;align-items:center;padding:8px 16px 9px;font-size:1rem}
  #days .lt__note i{font-size:1.375rem}
  #days .lt__mary{align-self:center;margin-top:24px}
  #days .lt__nset{min-height:0}
  #days .lt__grant-a{font-size:1rem}
}
@media (prefers-reduced-motion:no-preference){
  #days .lt[data-lp-in] .lt__film{transform:translateX(140px)}
  #days .lt[data-lp-in] .lt__frame{scale:.985}
  #days .lt[data-lp-in] .lt__mark{clip-path:inset(0 100% 0 0)}
  #days .lt__frame[data-wait] .lt__disc::after{animation:lt-spin .9s linear 20}
  #days .lt__cap[data-heard] .lt__notes--clear .lt__note{transition:opacity 360ms var(--ease-out) calc(360ms + var(--k) * 120ms),translate 360ms var(--ease-settle,var(--ease-out)) calc(360ms + var(--k) * 120ms),scale var(--dur-press,120ms) var(--ease-out)}
  #days .lt__cap[data-heard] .lt__notes--clear .lt__note:active{scale:.97}
}
@keyframes lt-spin{to{rotate:1turn}}
/* плівку «протягує» далі, коли стіл іде вгору (до 24 px від середини екрана до виходу; лише 1024+ - на телефоні плівка гортається
   пальцем); нижче середини й без прокрутки стоїть рівно */
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference) and (min-width:1024px){
  #days .lt__film{animation:lt-drift linear both;animation-timeline:view();animation-range:contain 50% exit 100%}
}}
@keyframes lt-drift{from{translate:0 0}to{translate:-24px 0}}
/* K1: висота секції для каркаса до решти стилів. Виміряно lp-shot1 (день 1, обидві теми): 393 › 931, 768 › 1192, 1024 › 734, 1440 › 844 px;
   до 1023 слайд росте з шириною (≈ 657 px + 0,696 ширини), стіл 1024+ росте до контейнера. Висота однакова для всіх десяти днів
   (фраза 36 px на 1440 вміщується у висоту слайда; виміряно перебором днів). */
#days{--lk-skel:calc(669px + 69.6vw)}
@media (min-width:1024px){#days{--lk-skel:clamp(734px,734px + (100vw - 1024px) * .264,844px)}}
/* /f1:P3 */

/* f2:solo · #days (owner.eye b03, art.composition/craft, detail.details/unity #days). Стіл, плівка, смужки й монета ті самі. */
/* тінь столу гасне м'яко: обрізання по X лише всередині столу (плівка в'їжджає з-під його краю), секція не ріже тінь прямими
   краями (x=100/1340 на 1440, 16/377 на 393); сторінку вбік не веде html{overflow-x:clip} */
#days{overflow-x:visible}
/* день: без сіро-блакитного ореолу 90 px на папері (над лідом і смугою на шві з #results) - тихе світло 40 px і та сама тінь 34 px */
#days .lt__table{box-shadow:inset 0 0 0 1px rgb(255 255 255/90%),inset 0 0 46px rgb(132 172 222/28%),0 0 0 6px #CBD5E0,0 0 0 7px rgb(41 73 103/22%),
  0 34px 64px -30px rgb(29 52 76/55%),0 0 40px -16px rgb(150 196 245/28%)}
/* монета гранту 56 px, рядок 16 px 600 (було 44 / 15 - губилася поруч із кадром) */
#days .lt__coin{width:56px;height:56px}
#days .lt__coin b{font-size:1.5rem}
#days .lt__grant-a{gap:12px;font-size:1rem;font-weight:600}
/* 393: «Послухайте, і фраза проступить» - одразу під фразою (6 px, а не ~60): резерв двох рядків фрази тепер спільний для підпису -
   висота підпису та сама для всіх десяти днів (243 px, CLS 0), вільне місце - під парами, над монетою */
@media (max-width:1023px){
  #days .lt__say{min-height:0}
  #days .lt__cap{align-content:start;min-height:calc(.8125rem * 1.2 + 1.5rem * 1.2 * 2 + .9375rem * 1.45 * 2 + .8125rem * 1.2 + 111px)}}
/* 1440: права колонка - одна група від верху: день › фраза › «Послухайте…» (12 px) › пунктир і «що тут злилося» (24 px) › пари;
   монета внизу на рівні підпису «День 1»; вільне місце лише над монетою */
@media (min-width:1024px){
  #days .lt__cap{align-self:start;grid-template-rows:none;gap:12px}
  #days .lt__mary{align-self:start;margin-top:12px;padding-top:20px}}
/* /f2:solo #days */