/* Features: dawn, the week, formats, hand it over. */

/* Dawn: a sky canvas behind the copy; text turns from light to ink as the day comes (--day). */
.dw { --day: 0; height: 220vh; }
.dw__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; align-content: start; padding: max(120px, 17vh) var(--gutter) 0; }
.dw__sky { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The sun is Chip: a live face rising on the sky's arc, cut off by the horizon. */
.dw__sun { position: absolute; left: 0; right: 0; top: 0; overflow: hidden; pointer-events: none; }
.dw__chip { position: absolute; left: 0; top: 0; will-change: transform; }
.dw__chip .agent-persona { width: 100%; height: 100%; filter: drop-shadow(0 0 30px rgba(232,196,120,0.55)); }
.dw__copy { position: relative; max-width: 1480px; width: 100%; margin: 0 auto; color: color-mix(in srgb, #f1f0eb calc((1 - var(--day)) * 100%), var(--ink)); }
.dw__eyebrow { display: flex; align-items: center; gap: 14px; opacity: 0.8; }
.dw__clock { font: 600 15px var(--mono); padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, rgba(255,255,255,0.12) calc((1 - var(--day)) * 100%), rgba(10,10,10,0.06)); font-variant-numeric: tabular-nums; }
.dw__h { margin: 22px 0 0; font: 600 clamp(56px, 8.6vw, 150px)/0.92 var(--sans); letter-spacing: -0.055em; max-width: 12ch; }
.dw__h span { opacity: 0.55; }
.dw__lede { margin: 26px 0 0; max-width: 46ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; opacity: 0.85; }
.dw__crew { position: absolute; left: 0; right: 0; bottom: 7%; display: flex; justify-content: center; gap: clamp(16px, 4vw, 64px); }
.dw-agent { display: grid; justify-items: center; gap: 6px; opacity: 0.25; transform: translateY(12px); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); color: color-mix(in srgb, #f1f0eb calc((1 - var(--day)) * 100%), var(--ink)); }
.dw-agent.is-awake { opacity: 1; transform: none; }
.dw-agent__orb { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); color: var(--ink); box-shadow: 0 0 0 1px rgba(255,255,255,0.4), 0 0 24px color-mix(in srgb, var(--c) 50%, transparent); }
.dw-agent__orb .monad-svg { width: 32px; height: 32px; }
.dw-agent small { font-size: 11px; white-space: nowrap; }
.dw__hint { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; color: rgba(255, 255, 255, calc(0.6 - var(--day) * 0.6)); }

/* The week: a horizontal track, pinned. */
.wk { height: 820vh; }
.wk-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; padding: 96px 0 18px; transition: background-color 600ms var(--ease-out); }
.wk.is-night .wk-pin { background: var(--night); }
.wk-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 var(--gutter); }
.wk-head .h { font-size: clamp(30px, 3.4vw, 54px); transition: opacity 400ms; }
.wk.is-night .wk-head .h { opacity: 0.15; }
.wk-ruler { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); width: min(46vw, 560px); padding-bottom: 14px; border-bottom: 1px solid var(--hairline-strong); }
.wk-ruler span { text-align: center; color: var(--grey-3); transition: color 300ms; }
.wk-ruler span.is-on { color: var(--ink); }
.wk.is-night .wk-ruler span.is-on { color: #f1f0eb; }
.wk-ruler__mark { position: absolute; bottom: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); transform: translateX(-50%); }
.wk-track { display: flex; height: 100%; will-change: transform; }
.wk-day { flex: 0 0 min(88vw, 1320px); display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 4vw; align-items: center; padding: 0 var(--gutter); opacity: 0.35; transition: opacity 500ms var(--ease-out); }
.wk-day.is-here { opacity: 1; }
.wk-day__when { display: flex; align-items: baseline; gap: 14px; margin: 0; }
.wk-day__when b { font: 600 clamp(44px, 5.4vw, 92px)/1 var(--sans); letter-spacing: -0.05em; }
.wk-day__when .mono { color: var(--grey-2); font-size: 14px; }
.wk-day__who { display: flex; align-items: center; gap: 12px; margin: 28px 0 0; }
.wk-day__orb { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); box-shadow: 0 0 0 2px var(--c), 0 0 0 8px color-mix(in srgb, var(--c) 14%, transparent); }
.wk-day__orb .monad-svg { width: 36px; height: 36px; }
.wk-day__who b { display: block; font-size: 16px; }
.wk-day__who small { color: var(--grey-2); font-size: 11px; }
.wk-day h3 { margin: 26px 0 0; font: 600 clamp(26px, 2.4vw, 38px)/1.1 var(--sans); letter-spacing: -0.03em; }
.wk-day__line { margin: 12px 0 0; max-width: 40ch; font-size: 16px; line-height: 1.55; color: var(--grey-1); }
.wk-day.is-night { color: #f1f0eb; }
.wk-day.is-night .wk-day__line, .wk-day.is-night .wk-day__when .mono, .wk-day.is-night small { color: #a19e95; }
.wk-day.is-night .wk-day__orb { background: #1b1a17; }
.wk-day__art { position: relative; min-width: 0; height: min(64vh, 560px); display: grid; place-items: center; }
.wk-note { margin: 0; padding: 0 var(--gutter); color: var(--grey-3); font-size: 10.5px; }
.wk-pill { --k: 0; position: absolute; left: 50%; bottom: 0; translate: -50% calc((1 - var(--k)) * 20px); opacity: var(--k); display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 16px 10px 10px; border-radius: 999px; background: var(--ink); color: #f1f0eb; font-size: 14px; white-space: nowrap; box-shadow: 0 20px 40px -20px rgba(0,0,0,0.5); }
.wk-pill span { width: 30px; height: 30px; border-radius: 50%; background: #f1f0eb; display: grid; place-items: center; color: var(--ink); }
.wk-pill .monad-svg { width: 22px; height: 22px; }

/* Mon: the plan. */
.wk-plan { position: relative; width: 100%; max-width: 700px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding-bottom: 70px; }
.wk-plan__d { text-align: center; color: var(--grey-2); font-size: 11px; padding-bottom: 4px; }
.wk-plan__c { --k: 0; position: relative; aspect-ratio: 1; border-radius: 12px; background: rgba(10,10,10,0.035); box-shadow: inset 0 0 0 1px var(--hairline); overflow: hidden; }
.wk-plan__c img { width: 100%; height: 100%; object-fit: cover; opacity: var(--k); transform: scale(calc(1.2 - var(--k) * 0.2)); }
.wk-plan__c i { position: absolute; left: 5px; bottom: 5px; font-style: normal; font-size: 9px; padding: 2px 5px; border-radius: 4px; background: rgba(255,255,255,0.88); color: var(--ink); opacity: var(--k); }

/* Tue: the signal. */
.wk-sig { position: relative; width: 100%; max-width: 720px; }
.wk-sig__chart { width: 100%; height: auto; overflow: visible; }
.wk-sig__chart line { stroke: var(--hairline); }
.wk-sig__line { fill: none; stroke: #2f7a3e; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.wk-sig__area { fill: url(#none); fill: rgba(110, 192, 122, 0.16); opacity: 0; }
.wk-sig__dot { fill: #fff; stroke: #2f7a3e; stroke-width: 3; opacity: 0; filter: drop-shadow(0 0 8px rgba(110,192,122,0.8)); }
.wk-sig__note { --k: 0; position: absolute; left: 52%; top: 4%; opacity: var(--k); translate: 0 calc((1 - var(--k)) * 10px); padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: var(--sheet-shadow); display: grid; gap: 2px; }
.wk-sig__note b { font-size: 16px; }
.wk-sig__note .mono { color: #2f7a3e; }
.wk-sig__note small { color: var(--grey-2); font-size: 12px; }
.wk-sig__thread { --k: 0; position: absolute; left: 4%; top: 38%; opacity: var(--k); translate: calc((1 - var(--k)) * -16px) 0; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: var(--sheet-shadow); display: grid; gap: 4px; max-width: 280px; }
.wk-sig__thread .mono { color: #ff4500; font-size: 11px; }
.wk-sig__thread b { font-size: 14px; line-height: 1.35; }

/* Wed: the carousel fans out. */
.wk-car { position: relative; width: 100%; max-width: 760px; height: 100%; display: grid; place-items: center; }
.wk-car__s { --fan: 0; position: absolute; left: 50%; top: 46%; width: min(170px, 18%); aspect-ratio: 4 / 5; margin: 0; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 24px 40px -24px rgba(20,20,30,0.45), 0 0 0 1px var(--hairline);
  transform: translate(-50%, -50%) translateX(calc((var(--i) - 2) * var(--fan) * 96%)) translateY(calc((1 - var(--fan)) * var(--i) * -6px)) rotate(calc((var(--i) - 2) * (1 - var(--fan)) * 3deg)); z-index: calc(10 - var(--i)); }
.wk-car__s img { width: 100%; height: 70%; object-fit: cover; }
.wk-car__s figcaption { padding: 10px; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.wk-car__s:first-child figcaption { font-size: 15px; }
.wk-car__checks { position: absolute; bottom: 4%; left: 50%; translate: -50% 0; display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.wk-car__checks li { padding: 6px 10px; border-radius: 999px; font-size: 11px; background: rgba(10,10,10,0.05); color: var(--grey-3); transition: background-color 300ms, color 300ms; white-space: nowrap; }
.wk-car__checks li.is-ok { background: rgba(110, 192, 122, 0.16); color: #2f6b3a; }
.wk-car__checks li.is-ok::before { content: '✓ '; }

/* Thu: the reel renders. */
.wk-reel { display: flex; align-items: center; gap: 36px; }
.wk-reel__phone { position: relative; width: min(250px, 26vh); aspect-ratio: 9 / 16; border-radius: 30px; overflow: hidden; background: #000; box-shadow: 0 0 0 7px #0e0d0b, 0 40px 70px -30px rgba(0,0,0,0.6); }
.wk-reel__phone img { width: 100%; height: 100%; object-fit: cover; }
.wk-reel__t { --k: 0; position: absolute; left: 16px; bottom: 54px; color: #fff; font: 700 26px/1.02 var(--sans); letter-spacing: -0.03em; opacity: var(--k); translate: 0 calc((1 - var(--k)) * 14px); text-shadow: 0 2px 20px rgba(0,0,0,0.4); }
.wk-reel__bar { position: absolute; left: 14px; right: 14px; bottom: 26px; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.3); overflow: hidden; }
.wk-reel__bar i { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.wk-reel__side { display: grid; gap: 24px; }
.wk-reel__ring { position: relative; width: 120px; height: 120px; }
.wk-reel__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wk-reel__ring circle { fill: none; stroke: var(--hairline); stroke-width: 6; }
.wk-reel__ring .is-fill { stroke: #4D7FD1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.wk-reel__ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; }
.wk-reel__track { display: grid; gap: 8px; width: 240px; }
.wk-reel__track span { --k: 0; display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 10px; }
.wk-reel__track small { color: var(--grey-2); font-size: 11px; }
.wk-reel__track i { height: 14px; border-radius: 4px; background: color-mix(in srgb, #4D7FD1 calc(40% + var(--i) * 12%), #fff); transform-origin: left; transform: scaleX(var(--k)); }

/* Fri: the article, then the AI answer citing it. */
.wk-art { position: relative; width: 100%; max-width: 720px; height: 100%; }
.wk-art__page { --k: 0; position: absolute; left: 0; top: 4%; width: 58%; padding: 14px; border-radius: 18px; background: #fff; box-shadow: var(--sheet-shadow); display: grid; gap: 8px; opacity: var(--k); translate: 0 calc((1 - var(--k)) * 20px); }
.wk-art__page img { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; }
.wk-art__page .mono { color: var(--grey-2); font-size: 10.5px; }
.wk-art__page b { font-size: 20px; letter-spacing: -0.02em; }
.wk-art__page > i { --k: 0; display: block; height: 8px; border-radius: 4px; background: #eceae4; transform-origin: left; transform: scaleX(calc(var(--k) * 0.95)); }
.wk-art__page > i:nth-of-type(3n) { transform: scaleX(calc(var(--k) * 0.7)); }
.wk-art__tab { --k: 0; opacity: var(--k); border-collapse: collapse; font-size: 11px; }
.wk-art__tab td { padding: 4px 8px; border-top: 1px solid var(--hairline); }
.wk-art__ai { --k: 0; position: absolute; right: 0; bottom: 6%; width: 52%; padding: 18px; border-radius: 20px; background: var(--night); color: #e9e6dd; opacity: var(--k); translate: 0 calc((1 - var(--k)) * 20px); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6); display: grid; gap: 10px; }
.wk-art__ai > .mono { color: #8f8b82; font-size: 10.5px; }
.wk-art__ai p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.wk-art__src { justify-self: start; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.08); font-size: 11px; transition: background-color 300ms, color 300ms; }
.wk-art__src.is-lit { background: var(--gold); color: var(--night); }

/* Sat: memory, at night. */
.wk-mem { width: 100%; max-width: 640px; padding: 18px; border-radius: 22px; background: #171613; box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 40px 80px -40px rgba(0,0,0,0.8); display: grid; gap: 8px; }
.wk-mem header { display: flex; align-items: center; gap: 10px; padding: 0 4px 10px; border-bottom: 1px solid rgba(255,255,255,0.06); color: #f1f0eb; }
.wk-mem header span:first-child { width: 26px; height: 26px; }
.wk-mem header .monad-svg { width: 26px; height: 26px; }
.wk-mem header .mono { margin-left: auto; color: var(--gold); }
.wk-mem__r { --k: 0; display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: #1f1e1a; color: #e9e6dd; font-size: 14px; opacity: var(--k); translate: calc((1 - var(--k)) * 16px) 0; }
.wk-mem__r .mono { color: #77736a; font-size: 10.5px; }
.wk-mem__r em { font-style: normal; font-size: 10.5px; color: #77736a; opacity: 0; transition: opacity 300ms; }
.wk-mem__r.is-checked em { opacity: 1; color: #8fd49a; }
.wk-mem__r.is-out.is-checked { text-decoration: line-through; text-decoration-color: rgba(232,137,111,0.8); }
.wk-mem__r.is-out.is-checked em { color: #EF6F5B; }
.wk-mem__r.is-new.is-checked { box-shadow: inset 0 0 0 1px rgba(201,166,97,0.6); }
.wk-mem__r.is-new.is-checked em { color: var(--gold); }

/* Sun: the report. */
.wk-rep { position: relative; width: 100%; max-width: 700px; display: grid; gap: 16px; }
.wk-rep__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.wk-rep__stats div { padding: 14px; border-radius: 16px; background: #fff; box-shadow: var(--sheet-shadow); display: grid; gap: 6px; }
.wk-rep__stats .mono { color: var(--grey-2); font-size: 10.5px; }
.wk-rep__stats b { font: 600 34px/1 var(--sans); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.wk-rep__bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: end; height: 180px; padding: 16px; border-radius: 18px; background: #fff; box-shadow: var(--sheet-shadow); }
.wk-rep__bars span { --k: 0; display: grid; justify-items: center; gap: 6px; height: 100%; align-content: end; }
.wk-rep__bars i { width: 100%; height: calc(var(--h) * 120px); border-radius: 6px; background: linear-gradient(180deg, #3E9B6B, #2f7a3e); transform-origin: bottom; transform: scaleY(var(--k)); }
.wk-rep__bars span:last-child i { background: linear-gradient(180deg, #e9d6a6, var(--gold)); }
.wk-rep__bars small { color: var(--grey-3); font-size: 10px; }
.wk-rep__next { --k: 0; margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--ink); color: #f1f0eb; font-size: 15px; opacity: var(--k); translate: 0 calc((1 - var(--k)) * 10px); }
.wk-rep__next .mono { display: block; color: var(--gold); font-size: 10.5px; margin-bottom: 4px; }
.wk-rep .wk-note { position: absolute; right: 0; bottom: -22px; padding: 0; }

/* Formats: the frame morphs between platforms. */
.fm { height: 420vh; }
.fm-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4vw; align-items: center; padding: 96px var(--gutter) 32px; max-width: 1480px; margin: 0 auto; }
.fm-copy .h { font-size: clamp(34px, 3.8vw, 62px); }
.fm-copy .lede { margin-top: 16px; }
.fm-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fm-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; color: var(--grey-2); transition: background-color 300ms, color 300ms, box-shadow 300ms; }
.fm-list li.is-on { background: #fff; color: var(--ink); box-shadow: var(--sheet-shadow); }
.fm-l__i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--b) 12%, #fff); flex: 0 0 auto; }
.fm-l__i svg { fill: var(--b); }
.fm-in { font: 700 13px var(--sans); color: #0a66c2; }
.fm-list b { display: block; font-size: 14px; }
.fm-list small { font-size: 10px; color: var(--grey-3); }
.fm-stage { position: relative; height: min(74vh, 700px); }
.fm-frame { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; background: #000; clip-path: inset(0 round 18px); }
.fm-frame img { width: 100%; height: 100%; object-fit: cover; }
.fm-chrome { position: absolute; display: grid; align-content: space-between; padding: 16px; pointer-events: none; color: #fff; }
.fm-c__top { display: flex; align-items: center; gap: 8px; font-size: 13px; text-shadow: 0 1px 10px rgba(0,0,0,0.4); }
.fm-c__top small { opacity: 0.8; font-size: 11px; }
.fm-c__i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; }
.fm-c__i svg { fill: var(--b); }
.fm-c__i .fm-in { font-size: 10px; }
.fm-c__cap { max-width: 34ch; font: 600 15px/1.35 var(--sans); text-shadow: 0 2px 18px rgba(0,0,0,0.5); }
.fm-ratio { position: absolute; right: 0; bottom: -28px; margin: 0; color: var(--grey-2); }

/* Your week, emptied: a pinned board of Mon-Sun notes; the scroll flies each one to its agent. */
.we { --empty: 0; height: 480vh; }
.we-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 18px; padding: 92px var(--gutter) 22px; max-width: 1560px; margin: 0 auto; }
.we-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.we-head .ch__k { margin-bottom: 10px; }
.we-head .h { font-size: clamp(30px, 3.6vw, 58px); }
.we-count { margin: 0; display: grid; justify-items: end; }
.we-count b { font: 600 clamp(48px, 5vw, 84px)/0.9 var(--sans); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.we-count .mono { color: var(--grey-2); }
.we-board-wrap { position: relative; min-height: 0; }
.we-board { height: 100%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; padding: 14px; border-radius: 28px; background: #fff; box-shadow: var(--sheet-shadow); }
.we-day { display: grid; grid-template-rows: auto repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px; border-radius: 18px; background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(10,10,10,0.04) 31px 32px), #fbfaf7; box-shadow: inset 0 0 0 1px var(--hairline); min-height: 0; }
.we-day__n { padding: 2px 4px 4px; color: var(--grey-2); border-bottom: 1px solid var(--hairline); }
.we-day { position: relative; }
.we-day:first-child { --o: 112px; }
.we-note { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 4px; padding: 9px 10px 9px 12px; border-radius: 13px; background: #fff; box-shadow: 0 10px 18px -12px rgba(20,20,30,0.4), 0 0 0 1px rgba(10,10,10,0.05), inset 3px 0 0 var(--s); transform-origin: center; rotate: var(--r); will-change: transform; min-height: 0; overflow: hidden; z-index: 1; }
.we-note::after { content: ''; position: absolute; right: -20px; top: -20px; width: 60px; height: 60px; border-radius: 50%; background: color-mix(in srgb, var(--s) 16%, transparent); pointer-events: none; }
.we-note.is-flying { z-index: 5; box-shadow: 0 20px 30px -14px rgba(20,20,30,0.5), inset 3px 0 0 var(--s); }
.we-note__tab { color: color-mix(in srgb, var(--s) 60%, #0a0a0a); font-size: 9px; }
.we-note b { font-size: clamp(12px, 0.95vw, 14.5px); line-height: 1.15; letter-spacing: -0.01em; }
.we-note__art { min-height: 0; display: flex; align-items: center; overflow: hidden; }
.we-note small { font-size: 10.5px; line-height: 1.3; color: var(--grey-2); padding-right: 24px; }
.we-note__who { position: absolute; right: 8px; bottom: 8px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1.5px var(--c); color: var(--ink); }
.we-note__who .monad-svg { width: 15px; height: 15px; }
/* The small pictures of the work. */
.tg-bars { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.tg-bars i { width: 7px; height: calc(var(--h) * 100%); border-radius: 2px; background: var(--s); opacity: 0.75; }
.tg-spark { width: 70px; height: 24px; overflow: visible; }
.tg-spark path { fill: none; stroke: var(--s); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tg-lines { display: grid; gap: 4px; width: 80%; }
.tg-lines i { height: 4px; border-radius: 2px; background: #e6e2d8; }
.tg-lines i:last-child { width: 60%; }
.tg-chat { display: grid; gap: 4px; width: 80%; }
.tg-chat i { height: 10px; width: 70%; border-radius: 6px 6px 6px 2px; background: #ece9e1; }
.tg-chat i.is-me { justify-self: end; border-radius: 6px 6px 2px 6px; background: color-mix(in srgb, var(--s) 45%, #fff); }
.tg-grid { display: grid; grid-template-columns: repeat(6, 9px); gap: 3px; }
.tg-grid i { height: 9px; border-radius: 2px; background: #ece9e1; }
.tg-grid i:nth-child(3n) { background: color-mix(in srgb, var(--s) 55%, #fff); }
.tg-steps { display: flex; align-items: center; gap: 4px; }
.tg-steps i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--s); }
.tg-steps i:first-child { background: var(--s); }
.tg-stack { position: relative; width: 50px; height: 30px; }
.tg-stack i { position: absolute; inset: 0; border-radius: 5px; background: #fff; box-shadow: 0 0 0 1px var(--hairline-strong); }
.tg-stack i:nth-child(1) { transform: rotate(-8deg); }
.tg-stack i:nth-child(2) { transform: rotate(4deg); }
.tg-stack i:nth-child(3) { background: color-mix(in srgb, var(--s) 30%, #fff); }
.tg-cal { display: grid; grid-template-columns: repeat(7, 7px); gap: 2px; }
.tg-cal i { height: 7px; border-radius: 1.5px; background: #ece9e1; }
.tg-cal i:nth-child(2), .tg-cal i:nth-child(5), .tg-cal i:nth-child(9) { background: var(--s); }
.tg-clock { position: relative; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--s); }
.tg-clock i { position: absolute; left: 12px; top: 5px; width: 2px; height: 9px; border-radius: 1px; background: var(--ink); transform-origin: 1px 8px; transform: rotate(210deg); }
.tg-img { width: 64px; height: 40px; border-radius: 6px; object-fit: cover; }
.tg-img--round { width: 34px; height: 34px; border-radius: 50%; }
.tg-sw { display: flex; }
.tg-sw i { width: 18px; height: 18px; margin-right: -5px; border-radius: 50%; background: var(--x); box-shadow: 0 0 0 2px #fff; }
.tg-ad { position: relative; display: block; }
.tg-ad img { width: 64px; height: 40px; border-radius: 6px; object-fit: cover; }
.tg-ad b { position: absolute; left: 4px; bottom: 3px; font-size: 7.5px; padding: 1px 4px; border-radius: 3px; background: rgba(255,255,255,0.9); }
.tg-loop { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--s); border-right-color: transparent; }
.tg-orbs { display: flex; gap: 3px; }
.tg-orbs i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--s); }
/* The one job left, in Monday's column; pressed, it fills the week with what it scheduled. */
.we-final { position: absolute; left: 8px; right: 8px; top: 34px; padding: 12px; border-radius: 13px; background: var(--ink); color: #f1f0eb; display: grid; gap: 4px; box-shadow: 0 0 0 3px rgba(201,166,97,0.5), 0 20px 40px -20px rgba(0,0,0,0.5); opacity: 0; transform: scale(0.92); transition: opacity 400ms var(--ease-out), transform 500ms var(--spring), background-color 400ms; z-index: 4; }
.we-final.is-on { opacity: 1; transform: none; }
.we-final__day { color: var(--gold); font-size: 9.5px; }
.we-final b { font-size: 14px; line-height: 1.2; }
.we-final small { color: #a19e95; font-size: 10.5px; line-height: 1.3; }
.we-final__btn { position: relative; justify-self: start; margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #f1f0eb; color: var(--ink); font: 600 11.5px var(--sans); transition: transform 150ms var(--ease-out), background-color 300ms, color 300ms; }
.we-final__btn i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.we-final.is-pressed .we-final__btn { transform: scale(0.9); }
.we-final.is-done { background: #2f6b3a; box-shadow: 0 0 0 3px rgba(110,192,122,0.45), 0 20px 40px -20px rgba(0,0,0,0.5); }
.we-final.is-done .we-final__day { color: #bfe7c5; }
.we-final.is-done small { color: #cfe9d3; }
.we-final.is-done .we-final__btn { transform: none; background: #fff; color: #2f6b3a; }
.we-final.is-done .we-final__btn i { background: #2f6b3a; }
.we-final.is-done .we-final__btn em { font-size: 0; }
.we-final.is-done .we-final__btn em::after { content: 'Approved'; font-size: 11.5px; font-style: normal; }
.we-final em { font-style: normal; }
.we-sched { position: absolute; left: 8px; right: 8px; top: calc(34px + var(--o, 0px) + var(--n) * 30px); display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 9px; background: rgba(201,166,97,0.14); color: #6b5426; font-size: 10px; box-shadow: inset 0 0 0 1px rgba(201,166,97,0.4); opacity: 0; transform: translateY(8px); transition: opacity 300ms var(--ease-out), transform 400ms var(--spring); z-index: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.we-sched i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; }
.we-sched.is-on { opacity: 1; transform: none; }
.we-rail { list-style: none; margin: 0; padding: 10px 14px; border-radius: 999px; background: var(--night); display: flex; justify-content: space-around; gap: 6px; justify-self: center; width: min(100%, 900px); }
.we-rail li { display: flex; align-items: center; gap: 10px; color: #a19e95; font-size: 13px; transition: color 300ms; }
.we-rail li.has-jobs { color: #f1f0eb; }
.we-orb { position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #f1f0eb; color: var(--ink); box-shadow: 0 0 0 2px #2a2823; transition: box-shadow 300ms; }
.we-rail li.has-jobs .we-orb { box-shadow: 0 0 0 2px var(--c), 0 0 18px -2px var(--c); }
.we-orb .monad-svg { width: 30px; height: 30px; }
.we-orb em { position: absolute; right: -6px; top: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font-size: 10.5px; font-style: normal; background: var(--gold); color: var(--night); }
.we-rail small { font-size: 12.5px; white-space: nowrap; }

/* Next Monday: the lock screen at 06:00 with Chip's first message. */
.nm { height: 100vh; height: 100svh; padding: 88px var(--gutter) 24px; }
.nm-inner { position: relative; height: 100%; max-width: 1480px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 4vw; align-items: center; padding: clamp(28px, 4vw, 64px); border-radius: 40px; overflow: hidden;
  background: linear-gradient(160deg, #1d2440 0%, #6f86b8 45%, #f3c79a 85%, #f7e6cf 100%); color: #fff; }
.nm-inner::after { content: ''; position: absolute; right: 22%; bottom: -12%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(232,196,120,0.65), transparent 65%); pointer-events: none; }
.nm-copy { position: relative; z-index: 1; }
.nm-copy .ch__k { color: #f3e2bd; }
.nm .h { font-size: clamp(40px, min(5.2vw, 9vh), 92px); background: none; -webkit-text-fill-color: #fff; color: #fff; }
.nm .h-quiet { -webkit-text-fill-color: rgba(255,255,255,0.6); color: rgba(255,255,255,0.6); }
.nm-copy .lede { margin-top: 20px; color: rgba(255,255,255,0.86); }
.nm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.nm-actions .btn--ink { background: #fff; color: var(--ink); }
.nm-actions .btn--ink i { background: rgba(10,10,10,0.08); }
.nm-actions .btn--line { color: #fff; background: rgba(255,255,255,0.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); }
.nm-phone { position: relative; z-index: 1; justify-self: center; height: min(100%, 640px); max-height: calc(100svh - 112px - 2 * clamp(28px, 4vw, 64px)); width: auto; aspect-ratio: 9 / 19; padding: 10px; border-radius: 48px; background: #0b0a09; box-shadow: 0 50px 90px -30px rgba(10,10,20,0.6), inset 0 0 0 2px #2a2925; }
.nm-screen { position: relative; height: 100%; border-radius: 40px; overflow: hidden; display: grid; align-content: start; justify-items: center; padding: 12% 14px 0; background: linear-gradient(180deg, #2a3150 0%, #8a8fb3 55%, #f0c89f 100%); }
.nm-date { margin: 0; font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.9); }
.nm-time { margin: 2px 0 0; font: 600 clamp(48px, 9vh, 76px)/1 var(--sans); letter-spacing: -0.04em; color: #fff; }
.nm-note { margin-top: 8%; width: 100%; padding: 14px; border-radius: 22px; background: rgba(250,249,246,0.82); backdrop-filter: blur(16px); color: var(--ink); box-shadow: 0 20px 40px -20px rgba(0,0,0,0.35); animation: nm-drop 700ms 300ms var(--spring) both; }
@keyframes nm-drop { from { opacity: 0; transform: translateY(-14px) scale(0.97); } }
@media (prefers-reduced-motion: reduce) { .nm-note { animation: none; } }
.nm-note header { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.nm-app { width: 22px; height: 22px; border-radius: 6px; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1px var(--hairline); }
.nm-app .monad-svg { width: 16px; height: 16px; }
.nm-note header small { margin-left: auto; color: var(--grey-2); }
.nm-note p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.4; }
.nm-note__row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.nm-approve, .nm-later { display: grid; place-items: center; height: 36px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.nm-approve { background: var(--ink); color: #fff; }
.nm-later { background: rgba(10,10,10,0.06); color: var(--ink); }
.nm-bar { position: absolute; left: 50%; bottom: 10px; width: 110px; height: 4px; margin-left: -55px; border-radius: 4px; background: rgba(255,255,255,0.8); }

@media (min-width: 901px) and (max-height: 860px) {
  .wk-pin { padding-top: 84px; }
  .wk-day__art { height: min(58vh, 480px); }
  .wk-day h3 { margin-top: 16px; }
  .wk-day__who { margin-top: 16px; }
}
@media (max-width: 900px) {
  .dw__h { font-size: clamp(46px, 14vw, 72px); }
  .dw__crew { gap: 10px; bottom: 8%; }
  .dw-agent__orb { width: 36px; height: 36px; }
  .dw-agent__orb .monad-svg { width: 26px; height: 26px; }
  .dw-agent small { display: none; }
  .wk { height: 900vh; }
  .wk-pin { padding-top: 80px; }
  .wk-head { flex-direction: column; align-items: stretch; gap: 14px; }
  .wk-head .h { font-size: 26px; }
  .wk-ruler { width: 100%; }
  .wk-day { flex-basis: 100vw; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; align-content: start; padding-top: 18px; }
  .wk-day__when b { font-size: 40px; }
  .wk-day__who { margin-top: 12px; }
  .wk-day__orb { width: 40px; height: 40px; }
  .wk-day__orb .monad-svg { width: 28px; height: 28px; }
  .wk-day h3 { margin-top: 10px; font-size: 22px; }
  .wk-day__line { font-size: 14px; margin-top: 6px; }
  .wk-day__art { height: 100%; min-height: 0; }
  .wk-plan { gap: 4px; padding-bottom: 60px; }
  .wk-pill { font-size: 11.5px; white-space: normal; width: 92%; }
  .wk-reel { gap: 16px; }
  .wk-reel__phone { width: 42vw; }
  .wk-reel__ring { width: 84px; height: 84px; }
  .wk-reel__track { width: 40vw; }
  .wk-reel__track span { grid-template-columns: 1fr; gap: 2px; }
  .wk-art__page { width: 76%; }
  .wk-art__page img { height: 90px; }
  .wk-art__ai { width: 76%; padding: 14px; }
  .wk-art__ai p { font-size: 13px; }
  .wk-rep__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-rep__stats b { font-size: 26px; }
  .wk-rep__bars { height: 120px; }
  .wk-rep__bars i { height: calc(var(--h) * 80px); }
  .wk-car__checks { flex-wrap: wrap; justify-content: center; width: 100%; }
  .wk-car__s { width: 30%; }
  .wk-car__s figcaption { font-size: 10px; padding: 6px; }
  .fm { height: 380vh; }
  .fm-pin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-content: start; gap: 18px; padding: 80px var(--gutter) 40px; }
  .fm-copy .h { font-size: 28px; }
  .fm-copy .lede { display: none; }
  .fm-list { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; gap: 4px; }
  .fm-list li { padding: 6px; gap: 6px; }
  .fm-l__i { width: 24px; height: 24px; }
  .fm-list b { font-size: 11px; }
  .fm-list small { display: none; }
  .fm-stage { height: 100%; }
  /* Phones: days become rows, the team a strip of orbs; still one screen. */
  .we { height: 380vh; }
  .we-pin { padding: 72px 12px 12px; gap: 10px; }
  .we-head { padding: 0 4px; }
  .we-head .ch__k { display: none; }
  .we-head .h { font-size: 22px; }
  .we-count b { font-size: 40px; }
  .we-count .mono { font-size: 9.5px; }
  .we-board { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(7, minmax(0, 1fr)); gap: 5px; padding: 8px; border-radius: 20px; }
  .we-day { grid-template-columns: 34px repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 5px; padding: 5px; border-radius: 12px; background: #fbfaf7; }
  .we-day__n { border: 0; align-self: center; font-size: 10px; padding: 0; }
  .we-note { padding: 6px 6px 6px 8px; border-radius: 9px; gap: 2px; }
  .we-note__tab, .we-note__art, .we-note small { display: none; }
  .we-note { grid-template-rows: auto; align-content: center; }
  .we-note b { font-size: 10.5px; }
  .we-note__who { width: 14px; height: 14px; right: 4px; bottom: 4px; }
  .we-note__who .monad-svg { width: 10px; height: 10px; }
  .we-final { left: 40px; right: 5px; top: 4px; bottom: 4px; padding: 6px 10px; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
  .we-final small { display: none; }
  .we-final__btn { margin-top: 0; }
  .we-sched { left: auto; top: 50%; right: calc(5px + var(--n) * 86px); translate: 0 -50%; width: 82px; padding: 4px 6px; font-size: 8.5px; }
  .we-rail { padding: 8px 10px; border-radius: 22px; }
  .we-rail small { display: none; }
  .we-orb { width: 36px; height: 36px; }
  .we-orb .monad-svg { width: 26px; height: 26px; }
  .nm { padding: 76px 10px 12px; }
  .nm-inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 16px; border-radius: 28px; padding: 26px 20px 0; align-items: start; }
  .nm .h { font-size: 34px; }
  .nm-copy .lede { font-size: 14.5px; margin-top: 10px; }
  .nm-actions { margin-top: 16px; }
  .nm-phone { height: 100%; max-height: none; align-self: end; border-radius: 40px 40px 0 0; padding-bottom: 0; }
  .nm-screen { border-radius: 32px 32px 0 0; }
}