/* /channel/ — the brain of glass with its tree of knowledge (js/brain.js) and a phone on the lock screen; the channel's posts
   arrive while the page scrolls, every read grows the tree (js/channel-page.js).
   The phone is drawn at a fixed 360 × 760 and scaled as a whole (--s, set by the script) — every size inside stays true */
.ch-stage { position: relative; height: calc(100vh + (var(--n) + 1.4) * 44vh); height: calc(100svh + (var(--n) + 1.4) * 44svh); }   /* the script sets the real height (STEP, skip) */
/* three places: the text, the brain's room, the phone. The canvas behind spans the whole screen (the brain's glow may spill) */
/* the scene is wider than the site's 1320 column (up to 1640): on a big screen the room goes to the brain, the text and the
   phone keep their own width */
.ch-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, min(420px, 28vw)) minmax(0, 1fr) auto; align-items: center;
  column-gap: clamp(28px, 4vw, 96px); padding: 84px max(clamp(16px, 6vw, 110px), calc((100vw - 1640px) / 2)) 20px; overflow: hidden; background: #000; }
.ch-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; opacity: 0; transition: opacity 1.8s ease; }
.ch-gl.on { opacity: 1; }   /* the brain fades in from the dark once its first frame is drawn */
.ch-col { position: relative; z-index: 2; max-width: 440px; }
.ch-room { position: relative; z-index: 1; align-self: stretch; pointer-events: none; }
/* after a read: "+1 знание" and the post's topic, in its ring's colour, over the brain */
.ch-cap { position: absolute; left: 50%; top: 4%; transform: translate(-50%, 10px); text-align: center; white-space: nowrap; opacity: 0; transition: opacity .5s ease, transform .7s cubic-bezier(.23,1,.32,1); }
.ch-cap.on { opacity: 1; transform: translate(-50%, 0); }
.ch-cap b { display: block; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: clamp(24px, 2.3vw, 36px); color: var(--cc, var(--accent)); text-shadow: 0 0 24px var(--cc, rgba(212,255,0,.5)); }
.ch-cap span { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .16em; color: #D3CFC7; }
/* the text comes in by itself, without waiting for the page's script (it loads after the first paint) */
.ch-col > * { animation: chIn .9s cubic-bezier(.23,1,.32,1) both; }
.ch-col > :nth-child(2) { animation-delay: .06s; } .ch-col > :nth-child(3) { animation-delay: .12s; } .ch-col > :nth-child(4) { animation-delay: .2s; }
.ch-col > :nth-child(5) { animation-delay: .28s; } .ch-col > :nth-child(6) { animation-delay: .36s; }
@keyframes chIn { from { opacity: 0; transform: translateY(22px); } }
/* the headline: each phrase holds one line at every width — the size follows the window, not the line breaks */
.ch-col .h-m { font-size: clamp(34px, 3.3vw, 52px); }
.ch-col .h .ln > span { white-space: nowrap; }
.ch-col .lead { margin-top: 22px; }
.ch-cta { margin-top: 30px; display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; }
.ch-promo { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); max-width: 17em; line-height: 1.5; }
.ch-promo b { color: var(--accent); font-weight: 500; font-size: 13px; }
/* the knowledge: one segment per post in its ring's colour, filled as posts arrive and as they are read */
.ch-know { margin-top: 30px; width: min(100%, 400px); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.ck-l { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ck-l b { color: var(--text); font-weight: 500; font-size: 14px; }
.ck-cue { color: var(--text); pointer-events: none; }
.ch-know.done .ck-cue { color: var(--accent); pointer-events: auto; border-bottom: 1px solid currentColor; }
.ck-b { display: flex; align-items: center; gap: 5px; }
/* the points: where a post arrives. Dim until the bar reaches them, then they light in the ring's colour with one pulse */
.ck-d { flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1px solid #3A3A3A; background: #0A0A0A; transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease; }
.ck-d.on { background: var(--c); border-color: var(--c); box-shadow: 0 0 10px var(--c); animation: ckPt .9s ease-out; }
@keyframes ckPt { 0% { transform: scale(2.2); } 100% { transform: scale(1); } }
.ck-b b { position: relative; flex: 1; height: 3px; background: #222; overflow: hidden; }
.ck-b i { position: absolute; inset: 0; background: var(--c); box-shadow: 0 0 8px var(--c); transform: scaleX(var(--f, 0)); transform-origin: left; will-change: transform; }   /* eased by the script, frame by frame */
.ck-n { display: flex; gap: 4px; margin-top: 7px; font-size: 9px; letter-spacing: .1em; }
.ck-n span { flex: 1; color: #444; transition: color .5s ease; }
.ck-n span.on { color: var(--c); }
.ck-n span { white-space: nowrap; overflow: hidden; text-overflow: clip; }
@media (max-width: 1200px) { .ck-n { display: none; } }   /* the names do not fit under narrow segments */
/* the full form: the offer by the button lights up */
.ch-cta.won .btn { box-shadow: 0 0 0 0 rgba(212,255,0,.6); animation: won 1.8s ease-out 2; }
@keyframes won { 0% { box-shadow: 0 0 0 0 rgba(212,255,0,.6); } 100% { box-shadow: 0 0 0 18px rgba(212,255,0,0); } }


.tg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2AABEE; margin-right: 12px; vertical-align: 1px; box-shadow: 0 0 12px rgba(42,171,238,.7); }

/* ---------- the phone ---------- */
.ph-box { --lie: 0; --lift: 1; position: relative; z-index: 2; isolation: isolate; perspective: 3600px; perspective-origin: 50% -20%; justify-self: end; width: calc(360px * var(--s, 1)); height: calc(760px * var(--s, 1)); }
/* a glow in the jars' colours behind the phone, like light from the screen in a dark room */
.ph-box::before { content: ''; position: absolute; inset: 8% -30% 4%; z-index: -1; pointer-events: none; filter: blur(60px); opacity: .25;
  background: radial-gradient(40% 32% at 30% 30%, rgba(165,107,255,.55), transparent 70%), radial-gradient(38% 30% at 72% 62%, rgba(34,211,197,.4), transparent 70%),
    radial-gradient(30% 24% at 40% 86%, rgba(212,255,0,.25), transparent 70%); }
.phone { position: absolute; left: 0; top: 0; width: 360px; height: 760px; transform: scale(var(--s, 1)); transform-origin: 0 0; border-radius: 58px; background: #030303;
  box-shadow: 0 0 0 1.5px #2C2C2C, 0 0 0 5px #111, 0 0 0 6px #262626, 0 50px 120px rgba(0,0,0,.7), inset 0 0 0 1px #1A1A1A; }
.phone::before, .phone::after { content: ''; position: absolute; width: 4px; border-radius: 2px; background: #1E1E1E; }
.phone::before { left: -9px; top: 160px; height: 70px; box-shadow: 0 90px 0 #1E1E1E; }   /* volume */
.phone::after { right: -9px; top: 200px; height: 100px; }   /* power */
.ph-screen { position: absolute; inset: 11px; border-radius: 47px; overflow: hidden; isolation: isolate; color: #F4F2EE;
  font-family: 'Manrope', sans-serif;
  /* the wallpaper: night, the jars' colours far away */
  background: radial-gradient(70% 45% at 20% 18%, rgba(106,107,255,.42), transparent 70%), radial-gradient(60% 40% at 90% 55%, rgba(255,69,69,.22), transparent 70%),
    radial-gradient(80% 50% at 40% 100%, rgba(34,211,197,.3), transparent 70%), linear-gradient(170deg, #11131C 0%, #0A0A0E 55%, #070708 100%); }
.ph-island { position: absolute; z-index: 9; top: 11px; left: 50%; width: 112px; height: 33px; margin-left: -56px; border-radius: 20px; background: #000; }
.ph-status { position: absolute; z-index: 8; inset: 0 0 auto; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 4px 30px 0 34px; font-size: 15px; font-weight: 600; }
.ph-st-t { opacity: 0; transition: opacity .3s ease; }
.ph-screen.app .ph-st-t { opacity: 1; }
.ph-st-i { display: flex; align-items: center; gap: 6px; }
.ph-st-i i { display: block; }
.ph-st-i .sig { width: 17px; height: 11px; background: linear-gradient(to right, currentColor 0 3px, transparent 3px 4.6px, currentColor 4.6px 7.6px, transparent 7.6px 9.2px, currentColor 9.2px 12.2px, transparent 12.2px 13.8px, currentColor 13.8px);
  clip-path: polygon(0 75%, 18% 75%, 18% 50%, 45% 50%, 45% 25%, 72% 25%, 72% 0, 100% 0, 100% 100%, 0 100%); }
.ph-st-i .wifi { width: 15px; height: 11px; background: currentColor; clip-path: path('M7.5 11 0 3.2A10.6 10.6 0 0 1 15 3.2Z'); }
.ph-st-i .bat { width: 25px; height: 12px; border: 1.5px solid rgba(244,242,238,.45); border-radius: 4px; position: relative; }
.ph-st-i .bat::before { content: ''; position: absolute; inset: 1.5px; right: 5px; border-radius: 1.5px; background: currentColor; }

.ph-screen.wake { animation: phWake 1.1s ease-out; }
@keyframes phWake { 0% { filter: brightness(1.12); } 100% { filter: brightness(1); } }   /* a soft wake, not a flash */


/* the phone tilts a little after the mouse (--tx/--ty, degrees) */
.ph-3d { position: absolute; inset: 0; transform: rotateX(calc(var(--tx, 0) * 1deg)) rotateY(calc(var(--ty, 0) * 1deg)); }
/* the glass: a soft glare that slides with the tilt; the screen asleep is black glass */
.ph-glare { position: absolute; inset: 0; z-index: 20; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, transparent 35%, rgba(255,255,255,.07) 47%, rgba(255,255,255,.02) 53%, transparent 62%) calc(50% + var(--ty, 0) * 3%) 0 / 260% 100% no-repeat; }
.ph-off { position: absolute; inset: 0; z-index: 19; pointer-events: none; background: #020203; transition: opacity .7s ease; }
.ph-screen.awake .ph-off { opacity: 0; }

/* ---------- lock screen ---------- */
.ph-lock { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.23,1,.32,1), filter .6s ease, opacity .6s ease; }
.ph-screen.app .ph-lock { transform: scale(.94); filter: blur(6px); opacity: .4; }
.ph-clock { position: absolute; top: 66px; inset-inline: 0; text-align: center; }
.ph-date { font-size: 16px; font-weight: 600; color: rgba(244,242,238,.82); }
.ph-time { position: relative; height: 96px; margin-top: 2px; overflow: hidden; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 92px; line-height: 96px; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.ph-time span { position: absolute; inset: 0; transition: transform .55s cubic-bezier(.23,1,.32,1), opacity .4s ease; }
.ph-time span.old { transform: translateY(-46%); opacity: 0; }
.ph-time span.new { transform: translateY(46%); opacity: 0; }

.ph-notes { position: absolute; top: 228px; left: 10px; right: 10px; bottom: 76px; }
.nt { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: start; column-gap: 10px; padding: 11px 12px 12px;
  border: 0; border-radius: 22px; text-align: left; color: inherit; font: inherit; cursor: pointer;
  background: rgba(36,36,40,.62); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.08);
  opacity: 0; transform: translateY(calc(var(--y, -60px) + var(--pp, 0px))) scale(var(--k, .92)); transform-origin: 50% 0;
  transition: transform 1.2s cubic-bezier(.16,.84,.3,1), opacity 1.1s cubic-bezier(.4,0,.2,1), background-color .2s ease; }
.nt.on { opacity: var(--o, 1); }
.nt:hover { background-color: rgba(52,52,58,.7); }
.nt:focus-visible { outline-offset: 0; }
/* the newest one says "click me" — a lime edge, once the visitor stops scrolling */
.nt.top::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px rgba(212,255,0,0); transition: box-shadow .4s ease; pointer-events: none; }
.ph-screen.idle .nt.top::after { animation: ntPulse 1.8s ease-in-out infinite; }
@keyframes ntPulse { 50% { box-shadow: inset 0 0 0 1.5px rgba(212,255,0,.75); } }
.tg-ava { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; position: relative; background: #0A0A0A; box-shadow: inset 0 0 0 1px #2A2A2A;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .04em; color: var(--accent); }
.tg-ava img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }   /* the channel's own avatar — its logo */
/* Telegram's own mark on the avatar, as iOS shows a messenger's notification */
.nt .tg-ava::after { content: ''; position: absolute; right: -4px; bottom: -4px; width: 15px; height: 15px; border-radius: 50%; box-shadow: 0 0 0 2px #2A2A2F;
  background: #2AABEE url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M19.6 5.3 4 11.4c-.8.3-.8 1.2 0 1.5l3.8 1.2 1.5 4.6c.2.6 1 .7 1.4.3l2.1-2 3.9 2.9c.5.4 1.2.1 1.3-.5l2.7-12.8c.2-.8-.5-1.4-1.1-1.3Z'/></svg>") center / 9px no-repeat; }
.nt-b { display: block; min-width: 0; }
.nt-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; line-height: 1.25; }
.nt-hd b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-hd time { flex: none; font-size: 12.5px; color: rgba(244,242,238,.55); }
.nt-t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; font-size: 14px; line-height: 1.3; color: rgba(244,242,238,.9); }
.nt-t b { font-weight: 700; }
.nt-img { position: relative; width: 38px; height: 38px; border-radius: 8px; overflow: hidden; margin-top: 20px; }
.nt-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* a video post: its first frame with a play mark */
.nt-img.vid::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: rgba(0,0,0,.55) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M6 4.5v7l5.5-3.5z'/></svg>") center / 12px no-repeat; }

.ph-hint { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); padding: 8px 14px; border: 0; border-radius: 16px; cursor: pointer;
  background: rgba(255,255,255,.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: rgba(244,242,238,.85);
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; white-space: nowrap; }
.ph-hint .chev { color: var(--accent); }
.ph-hint.tap { background: rgba(212,255,0,.16); color: var(--text); }
.ph-home { position: absolute; left: 50%; bottom: 9px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: rgba(244,242,238,.85); }

/* ---------- the channel (opens from a notification) ---------- */
.ph-app { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; background: #0D0D0D; visibility: hidden;
  clip-path: inset(var(--from, 30% 4% 50% 4%) round 22px); transition: clip-path .6s cubic-bezier(.23,1,.32,1), visibility 0s .6s; }
.ph-screen.app .ph-app { visibility: visible; clip-path: inset(0 0 0 0 round 0); transition: clip-path .6s cubic-bezier(.23,1,.32,1), visibility 0s; }
.tg-hd { flex: none; display: flex; align-items: center; gap: 10px; padding: 54px 14px 10px 6px; background: rgba(20,20,20,.94); border-bottom: 1px solid #1F1F1F; }
.tg-hd .tg-ava { width: 40px; height: 40px; }
.tg-hd b { display: block; font-size: 16px; font-weight: 700; }
.tg-hd span:not(.tg-ava) { font-size: 13px; color: rgba(244,242,238,.5); }
.tg-back { width: 36px; height: 40px; border: 0; background: none; color: var(--accent); font-size: 34px; line-height: 1; cursor: pointer; padding-bottom: 4px; }
.tg-feed { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 10px 14px; scrollbar-width: none;
  background: radial-gradient(90% 40% at 100% 0%, rgba(212,255,0,.05), transparent 70%), #0D0D0D; }
.tg-feed::-webkit-scrollbar { display: none; }
.tg-day { text-align: center; margin: 12px 0 8px; }
.tg-day span { display: inline-block; padding: 4px 10px; border-radius: 12px; background: rgba(255,255,255,.08); font-size: 12.5px; font-weight: 600; color: rgba(244,242,238,.75); }
.tg-post { width: 94%; margin: 0 0 8px; border-radius: 16px 16px 16px 5px; overflow: hidden; background: #1A1A1B; transition: box-shadow .5s ease; }
.tg-post.hl { box-shadow: 0 0 0 1.5px var(--accent); }
.tg-post img, .tg-post video { display: block; width: 100%; height: auto; background: #000; }
.tg-txt { padding: 9px 12px 7px; font-size: 14.5px; line-height: 1.42; color: #E9E6E0; }
.tg-txt h3 { font-size: 14.5px; font-weight: 800; line-height: 1.32; margin-bottom: 8px; }
.tg-txt p { white-space: pre-line; margin-bottom: 8px; text-wrap: pretty; }
.tg-txt strong { font-weight: 800; }
.tg-txt a { color: #6CC3F2; }
.tg-txt footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; font-size: 12px; color: rgba(244,242,238,.45); }
.tg-sign { font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: .06em; color: var(--accent); font-size: 12px; }
.tg-more { text-align: center; margin: 16px 0 6px; font-size: 12.5px; color: rgba(244,242,238,.5); }
/* Telegram's own bottom bar of a channel you are not in */
.tg-join { flex: none; display: grid; place-content: center; justify-items: center; gap: 3px; height: 82px; padding-bottom: 20px; background: #141414; border-top: 1px solid #222; color: var(--accent);
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500; letter-spacing: .12em; transition: background-color .2s ease; }
.tg-join:hover { background: #1B1B1B; }
.tg-join span { font-size: 10px; letter-spacing: .1em; color: rgba(244,242,238,.55); text-transform: uppercase; }

/* ---------- after the phone ---------- */
.ch-end { position: relative; z-index: 2; background: var(--bg); }
/* the offer: the discount, big, in money; beside it how to get it — three steps drawn as the bits of Telegram and of our cart */
.ch-offer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px clamp(40px, 6vw, 120px); align-items: center; max-width: 1320px; }
.ch-big { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: clamp(120px, 15vw, 230px); line-height: 1.02; letter-spacing: -.01em; color: var(--accent); margin-top: -.06em; }
.ch-big-sub { font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.1; }
.ch-offer .lead { margin-top: 22px; }
.ch-offer .lead b { font-weight: 600; }
.ch-offer .ch-end-a { margin-top: 30px; }
.ch-note { margin-top: 18px; font-size: 14px; color: var(--muted); }
.ch-steps { list-style: none; }
.ch-steps li { display: grid; grid-template-columns: 46px minmax(0, 1fr); padding: 24px 0; border-top: 1px solid var(--line); }
.ch-steps li:last-child { border-bottom: 1px solid var(--line); }
.st-n { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; color: var(--accent); letter-spacing: .1em; padding-top: 6px; }
.st-b > b { display: block; font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.1; }
.st-ui { display: flex; align-items: center; gap: 12px; max-width: 430px; margin-top: 14px; padding: 12px 14px; border: 1px solid #242424; border-radius: 16px; background: #121212;
  font-family: 'Manrope', sans-serif; color: #EDEAE4; }
.st-ui i { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.st-ui em { margin-left: auto; flex: none; font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .1em; padding: 7px 10px; border-radius: 9px; }
.st-join { transition: border-color .2s ease; }
.st-join:hover { border-color: var(--accent); }
.st-join b { display: block; font-size: 15px; font-weight: 700; }
.st-join em { color: var(--accent); border: 1px solid var(--accent); }
.st-pin > span { display: block; padding-left: 12px; border-left: 3px solid #2AABEE; font-size: 14.5px; line-height: 1.4; }
.st-pin i { color: #2AABEE; margin-bottom: 2px; }
.st-hide { display: inline-block; padding: 0 9px; border-radius: 5px; background: rgba(255,255,255,.16); color: transparent; filter: blur(3px); vertical-align: -1px; }   /* the word itself is never on the page */
.st-dots { display: block; font-size: 17px; letter-spacing: .3em; line-height: 1.3; }
.st-code em { background: var(--accent); color: #0A0A0A; }
.ch-end-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; max-width: 1320px; margin-top: 56px; }
.ch-end-foot .ch-note { margin: 0; }
@media (max-width: 900px) { .ch-offer { grid-template-columns: minmax(0, 1fr); } }
.ch-end-a { display: flex; align-items: center; gap: 22px 32px; flex-wrap: wrap; }

/* without the script (or with reduced motion) every notification is simply there */
html:not(.ch-js) .nt { position: relative; opacity: 1; transform: none; margin-bottom: 8px; }
html:not(.ch-js) .ph-notes { overflow: hidden; }

/* phones and narrow windows: the headline on top, the phone under it; the rest of the text after the scene */
@media (max-aspect-ratio: 9/10), (max-width: 860px) {
  /* phones: the headline and the knowledge on top, the brain in a band under them, the phone below */
  .ch-sticky { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 30fr) auto; align-items: start; row-gap: 6px; padding: 96px 16px 12px; }
  .ch-col { max-width: none; }
  .ch-col .p-back, .ch-col .kick, .ch-col .lead, .ch-cta { display: none; }
  .ch-col .h-m { font-size: clamp(24px, 7vw, 38px); line-height: 1.12; }
  .ch-know { margin-top: 10px; width: 100%; font-size: 10px; }
  .ck-l { margin-bottom: 6px; } .ck-n { display: none; }
  .ch-room { min-height: 0; }
  .ch-cap { top: 0; } .ch-cap b { font-size: 20px; } .ch-cap span { font-size: 9px; }
  .ph-box { justify-self: center; }
  .ch-end-a .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ch-col > * { animation: none; } .nt, .ph-app, .ph-lock, .ph-time span, .ph-off { transition: none; } .ph-screen.wake, .ch-cta.won .btn { animation: none; } .ph-screen.idle .nt.top::after { animation: none; } }

/* touch screens: no live blur behind the notifications and the pill (it is redrawn every frame over the moving brain and cost
   the phone's GPU more than the brain itself), no blurred glow behind the phone — solid backgrounds instead */
@media (pointer: coarse) {
  .nt { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(38,38,44,.93); }
  .nt:hover { background: rgba(48,48,54,.95); }
  .ph-hint { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(40,40,44,.92); }
  .ph-hint.tap { background: rgba(60,70,20,.95); }
  .ph-box::before { display: none; }
}

/* touch screens: notifications slide in slower and softer — a quick swipe no longer makes them shoot in */
@media (pointer: coarse) {
  .nt { transition: transform 1.3s cubic-bezier(.16,.84,.3,1), opacity 1.2s cubic-bezier(.4,0,.2,1), background-color .2s ease; }   /* a soft, slow drop-in */
}

/* the opening: the text rises first (.ch-col), the phone comes in a beat later, its screen wakes after it, the brain fades in */
.ph-box { animation: phIn 1.1s cubic-bezier(.2,.8,.25,1) .25s both; }
@keyframes phIn { from { opacity: 0; transform: translateY(26px); } }
@media (prefers-reduced-motion: reduce) { .ph-box { animation: none; } .ch-gl { transition: none; } }

/* no live brain: its picture in the brain's room */
.ch-still { position: absolute; left: 50%; top: 52%; width: min(100%, 560px); max-height: 92%; object-fit: contain; transform: translate(-50%, -50%); mix-blend-mode: screen; animation: chIn 1.6s ease both;
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent); mask-image: radial-gradient(closest-side, #000 70%, transparent); }
.ch-dbg { position: fixed; z-index: 99; left: 8px; right: 8px; bottom: 8px; max-height: 40vh; overflow: auto; padding: 10px; background: #300; color: #fcc; font: 11px/1.4 monospace; white-space: pre-wrap; }