@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: block; src: url(/academy/assets/a8eefb873ba9c9020665f8a98302697ce1f3b79ab2deef6ee508c0ca6a82e876/541119bccb21575e.woff2) format('truetype'); } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: block; src: url(/academy/assets/7022da390e9b401ea35b722f8ed2376948e70add10954bc798839b4bfe17ef3f/706d7515d64b1e19.woff2) format('truetype'); } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: block; src: url(/academy/assets/451376abefae9121f5dd0372d26865e7654b1041b9fdacdf57c6bd5cbf691da0/cf4b8930b864b433.woff2) format('truetype'); } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: block; src: url(/academy/assets/366c9f60de8654362826a500399e568e6198696b8fbd999ba7d0c03c9ba742b6/bac34dd4b9537444.woff2) format('truetype'); } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: block; src: url(/academy/assets/b7a672834374ef3a96e81abd2fd9bb61b282d3e75711fd4d9097e7e2e8c3b823/0b905a4fc43ece05.woff2) format('truetype'); } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300; font-display: block; src: url(/academy/assets/2f29b31d803a928d21f96dbe7a5f8bfa5c5c98917736c2d195bc7c737bc906ba/aab63435a01a8dd2.woff2) format('truetype'); } /* ============================================================ Course 01 — visual kit tokens (v4: Stackworks Academy · zarati palette · iOS depth) Dark field, raised cards with soft shadow, inset grouped lists, one bone highlight per frame. HOW THE SVGs USE THIS FILE - Every SVG in boards/, cast/, lower-thirds/ carries and references colors ONLY as var(--token). Open an SVG in a browser tab (file://) and it resolves; inline it into a page that loads tokens.css and it resolves. Loaded through it will NOT resolve (browsers block external stylesheets for ), so export from a browser tab or inline. - Documented exceptions: (1) arrow chevrons and shafts use `currentColor` so both share one color set once on the ; the color on that is still a var(--token). (2) the drop-shadow filter's flood-color is var(--shadow) via CSS. (3) library symbols draw with stroke="currentColor"; the colour is set by a c-* class (a var) on the . (4) the Stackworks mark is embedded as-is with its thermal-ramp fills: it is the brand asset and is never recoloured. - Fonts come from Google Fonts only: the @import below for standalone SVGs; preview.html also carries the . - Every frame's first element is a `.bg` rect. Delete it for a transparent frame. SCALE Frames are 1920x1080 and read as the site at 2x: web 16/24 body becomes 32/48, web 11–12px labels become 22–24px, web 52px/-1px display becomes 96px/-2px. Hairlines stay 1px; icons 1.5px. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600&family=Geist+Mono:wght@300;400&family=Geist:wght@500&family=Space+Grotesk:wght@300&display=swap'); :root { color-scheme: dark; /* ---- color (measured from the live site) ---- */ --bg: #0b0b0d; --fg: #ededf0; --fg-soft: #c2c2c8; --dim: #90909a; --faint: #6e6e78; --line: #232327; --card: #141417; --hover: #1c1c20; --panel: #272727; /* preview inspector surface (owner spec) */ --accent: #ddd5c8; /* warm bone: the one highlight */ --accent-ink: #0b0b0d; --glow: rgba(221, 213, 200, .07); --amber: #e0a04a; /* parked / revise */ --red: #ff6b5f; /* blocked */ --ease: cubic-bezier(.22, 1, .36, 1); --accent-tint: rgba(221, 213, 200, .14); /* secondary (tinted) capsule */ --ember: #ff4a1c; /* brand mark + live indicator ONLY, never a UI state */ /* ---- branch hues (one per branch of the map) ---- RULES: one hue per surface as the single accent (bar, dot, key word, selected chip, progress line, map node/edge); never a fill larger than the 14% tint; never two hues on one card; text stays off-white / dim (the hue's -text value is for the one key word only, contrast >= 4.5:1 on #0d0d0f); the ember mark is exempt. A surface picks its hue with data-hue="h1".."h5" on the or any container: --accent follows. */ --h1: #ddd5c8; --h1-text: #ddd5c8; --h1-tint: rgba(221, 213, 200, .14); /* What is it? · contrast 13.34:1 */ --h2: #ff7a3d; --h2-text: #ff7a3d; --h2-tint: rgba(255, 122, 61, .14); /* What may change it? · contrast 7.49:1 */ --h3: #4fc98a; --h3-text: #4fc98a; --h3-tint: rgba(79, 201, 138, .14); /* What became true? · contrast 9.3:1 */ --h4: #8f8bff; --h4-text: #8f8bff; --h4-tint: rgba(143, 139, 255, .14); /* What follows? · contrast 6.75:1 */ --h5: #4fc4d6; --h5-text: #4fc4d6; --h5-tint: rgba(79, 196, 214, .14); /* Who talks to it? · contrast 9.43:1 */ --status-accepted: var(--h3); --status-parked: #e0a04a; --status-blocked: #ff6b5f; --status-live: var(--ember); --accent-text: var(--accent); --spring: cubic-bezier(.32, .72, 0, 1); /* Stackworks site easing */ --shadow: #000; /* drop-shadow flood color */ /* semantic */ --allowed: var(--accent); --parked: var(--amber); --blocked: var(--red); /* ---- type ---- */ --font-sans: 'Hanken Grotesk', -apple-system, system-ui, 'Helvetica Neue', sans-serif; /* site token */ --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* site token */ --font-display: 'Space Grotesk', system-ui, sans-serif; /* display titles only (brand README is silent on it) */ --font-wordmark: 'Geist', 'Hanken Grotesk', sans-serif; /* wordmark + ACADEMY only, weight 500 */ /* iOS-style ladder at 2x web scale. Use only these. */ --fs-large: 68px; --track-large: -0.8px; /* Large Title · 600 · the one focal label */ --fs-title2: 44px; --track-title2: -0.4px; /* Title 2 · 600 */ --fs-headline: 34px; /* Headline · 600 */ --fs-body: 34px; --lh-body: 48px; /* Body · 400 */ --fs-sub: 30px; /* Subheadline · 400 */ --fs-foot: 26px; --track-foot: 1.2px; /* Footnote · uppercase · --dim · section headers */ --fs-caption: 24px; /* Caption · 400 */ --fs-display: 96px; --track-display: -2px; /* Space Grotesk 300 · title + clip-title sheets only */ /* ---- spacing (8px grid) ---- */ --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px; --s-9: 192px; --frame-margin: 160px; /* ---- radius ---- */ --r-card: 24px; /* raised focal card */ --r-inset: 16px; /* inset grouped list */ --r-control: 28px; /* capsule buttons, 88px tall */ --r-field: 16px; --r-pill: 999px; --row: 88px; /* grouped-list row height */ /* ---- strokes ---- */ --hair: 1px; /* rules, borders, arrows */ --stroke-icon: 1.5px; /* single-stroke icons */ --bar: 2px; /* the accent bar on an active row */ --stroke-thumb: 5px; /* symbol stroke on 1280x720 thumbnails (reads at 320px) */ --stroke-hero: 4px; /* symbol stroke in hero bands */ --dash: 6 8; } svg[data-hue="h1"], [data-hue="h1"] { --accent: var(--h1); --accent-text: var(--h1-text); --accent-tint: var(--h1-tint); } svg[data-hue="h2"], [data-hue="h2"] { --accent: var(--h2); --accent-text: var(--h2-text); --accent-tint: var(--h2-tint); } svg[data-hue="h3"], [data-hue="h3"] { --accent: var(--h3); --accent-text: var(--h3-text); --accent-tint: var(--h3-tint); } svg[data-hue="h4"], [data-hue="h4"] { --accent: var(--h4); --accent-text: var(--h4-text); --accent-tint: var(--h4-tint); } svg[data-hue="h5"], [data-hue="h5"] { --accent: var(--h5); --accent-text: var(--h5-text); --accent-tint: var(--h5-tint); } /* ---- optional light theme ---- */ :root[data-theme="light"], svg[data-theme="light"] { color-scheme: light; --bg: #f6f5f2; --fg: #121214; --fg-soft: #333338; --dim: #6e6e78; --faint: #9a9aa2; --line: #dedcd6; --card: #ffffff; --hover: #eeedea; --accent: #6b5a3e; --accent-ink: #ffffff; --glow: rgba(107, 90, 62, .10); --accent-tint: rgba(107, 90, 62, .12); --shadow: #4a4538; --amber: #9a7420; --red: #b0453c; --ember: #d8340c; } /* ---- shared SVG classes ---- Repeated inline in every SVG by build.py (so each stands alone) and used as-is by preview.html for inlined copies. */ .bg { fill: var(--bg); } .raised { fill: var(--card); stroke: var(--line); stroke-width: var(--hair); filter: url(#shadow); } .inset { fill: var(--hover); stroke: none; } .card { fill: var(--card); stroke: var(--line); stroke-width: var(--hair); } .outline { fill: none; stroke: var(--line); stroke-width: var(--hair); } .outline-fg { fill: none; stroke: var(--fg); stroke-width: var(--hair); } .outline-acc { fill: none; stroke: var(--accent); stroke-width: var(--hair); } .fill-fg { fill: var(--fg); } .fill-acc { fill: var(--accent); } .fill-bg { fill: var(--bg); } .fill-amb { fill: var(--amber); } .fill-red { fill: var(--red); } .fill-tint { fill: var(--accent-tint); } .tint-band { fill: var(--accent-tint); } .h1 { color: var(--h1); } .h2 { color: var(--h2); } .h3 { color: var(--h3); } .h4 { color: var(--h4); } .h5 { color: var(--h5); } .st-accepted { fill: var(--status-accepted); } .st-parked { fill: var(--status-parked); } .st-blocked { fill: var(--status-blocked); } .st-live { fill: var(--status-live); } .glow { fill: none; stroke: var(--glow); stroke-width: 10px; } .rule { stroke: var(--line); stroke-width: var(--hair); fill: none; } .rule-acc { stroke: var(--accent); stroke-width: var(--bar); fill: none; stroke-linecap: round; } .sh { flood-color: var(--shadow); } .icon { fill: none; stroke: var(--fg); stroke-width: var(--stroke-icon); stroke-linecap: round; stroke-linejoin: round; } .icon-dim { stroke: var(--dim); } .icon-acc { stroke: var(--accent); } .icon-soft { stroke: var(--fg-soft); } .c-fg { color: var(--fg); } .c-soft { color: var(--fg-soft); } .c-dim { color: var(--dim); } .c-faint { color: var(--faint); } .c-acc { color: var(--accent); } .c-amb { color: var(--amber); } .c-red { color: var(--red); } .shaft { stroke: currentColor; fill: none; stroke-width: var(--hair); stroke-linecap: round; } /* documented currentColor */ .chev { stroke: currentColor; fill: none; stroke-width: var(--hair); stroke-linecap: round; stroke-linejoin: round; } .dash { stroke-dasharray: var(--dash); } .t-fg { fill: var(--fg); } .t-soft { fill: var(--fg-soft); } .t-dim { fill: var(--dim); } .t-faint { fill: var(--faint); } .t-acc { fill: var(--accent-text, var(--accent)); } .t-amb { fill: var(--amber); } .t-red { fill: var(--red); } .t-ink { fill: var(--accent-ink); } .large { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-large); letter-spacing: var(--track-large); } .title2 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-title2); letter-spacing: var(--track-title2); } .headline { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-headline); } .body { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); } .sub { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-sub); } .foot { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-foot); letter-spacing: var(--track-foot); text-transform: uppercase; } .caption { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-caption); } .num { font-variant-numeric: tabular-nums; } .display { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display); letter-spacing: var(--track-display); } .mono { font-family: var(--font-mono); font-weight: 300; font-size: var(--fs-sub); } .mid { text-anchor: middle; } .end { text-anchor: end; } .vmid { dominant-baseline: central; } .sym * { vector-effect: non-scaling-stroke; stroke: currentColor; stroke-width: var(--stroke-icon); fill: none; stroke-linecap: round; stroke-linejoin: round; } .sym .solid { fill: currentColor; stroke: none; } .sym .dashed { stroke-dasharray: 4 5; } .dith { fill: var(--accent); fill-opacity: .06; } .live { fill: var(--ember); } .ring { fill: none; stroke: var(--accent); stroke-width: var(--stroke-icon); } .wordmark { font-family: var(--font-wordmark); font-weight: 500; } .t-wordmark { fill: #f4f1ea; } /* brand ink, per README; the only non-token ink */ .strike { text-decoration: line-through; } .t-ember { fill: var(--ember); } /* ------------------------------------------------------------------ */ /* Tokens: the course kit, with YouTube-dark surfaces mapped onto the */ /* same names in this block (the kit import still drives every SVG). */ /* Bone stays the accent for sheet fills, chips and live; ember only */ /* on the mark and the one live indicator. */ /* ------------------------------------------------------------------ */ :root { --bg: #0d0d0f; --card: #1a1a1d; --raised: #222226; --hover: #2a2a2e; --fg: #f1f1f1; --fg-soft: #cfcfd4; --dim: #a3a3ab; /* 4.5:1 on --card */ --faint: #8c8c96; --line: rgba(255, 255, 255, 0.08); --parked-text: #e4b96a; /* amber, lifted for 4.5:1 on tints */ --blocked-text: #ff9b91; /* red, lifted for 4.5:1 on tints */ --accent-14: rgba(221, 213, 200, 0.14); --accent-40: rgba(221, 213, 200, 0.4); --parked-14: rgba(201, 160, 79, 0.16); --blocked-14: rgba(199, 91, 82, 0.18); --sans: "Hanken Grotesk", var(--font-sans); --display: var(--font-display); --mono: "Geist Mono", var(--font-mono); --lockup: "Geist", "Hanken Grotesk", sans-serif; --ember: #ff4a1c; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.5), 0 16px 48px rgba(0, 0, 0, 0.55); --t: 200ms var(--ease); --r: 12px; --gutter: 16px; --side: 240px; --side-mini: 72px; --rail: 400px; --bar: 56px; --tabbar: 49px; --safe-b: env(safe-area-inset-bottom, 0px); --rowgap: 28px; --maxw: 1440px; } @media (min-width: 768px) { :root { --gutter: 24px; --rowgap: 32px; } } @media (min-width: 1024px) { :root { --gutter: 32px; --rowgap: 40px; } } :root[data-theme="light"] { --bg: #f6f5f2; --card: #ffffff; --hover: #eeedea; --raised: #ffffff; --fg: #121214; --fg-soft: #333338; --dim: #5e5e66; --faint: #6e6e78; --line: #dedcd6; --parked-text: #8a5f00; --blocked-text: #b3261e; } /* Branch hues (defaults in a layer: kit/tokens.css overrides them the moment it defines the same names) */ @layer defaults { :root { --h1: #ddd5c8; --h1-text: #ddd5c8; --h1-tint: rgba(221, 213, 200, 0.14); --h2: #ff7a3d; --h2-text: #ffa072; --h2-tint: rgba(255, 122, 61, 0.14); --h3: #4fc98a; --h3-text: #7fdcaa; --h3-tint: rgba(79, 201, 138, 0.14); --h4: #8f8bff; --h4-text: #b0adff; --h4-tint: rgba(143, 139, 255, 0.14); --h5: #4fc4d6; --h5-text: #86d9e6; --h5-tint: rgba(79, 196, 214, 0.14); } } .hue-h1 { --hue: var(--h1); --hue-text: var(--h1-text); --hue-tint: var(--h1-tint); } .hue-h2 { --hue: var(--h2); --hue-text: var(--h2-text); --hue-tint: var(--h2-tint); } .hue-h3 { --hue: var(--h3); --hue-text: var(--h3-text); --hue-tint: var(--h3-tint); } .hue-h4 { --hue: var(--h4); --hue-text: var(--h4-text); --hue-tint: var(--h4-tint); } .hue-h5 { --hue: var(--h5); --hue-text: var(--h5-text); --hue-tint: var(--h5-tint); } /* The kit also ships SVG utility classes whose names this page reuses. */ .small, .num, .mono, .label, .body, .card, .title, .h, .display, .icon, .foot, .ring, .rule, .box, .sub, .raised, .chev, .live, .inset, .large, .headline, .caption, .title2, .wordmark, .outline, .glow, .dith, .sym { font-size: inherit; text-transform: none; font-weight: inherit; letter-spacing: inherit; font-family: inherit; filter: none; } /* ------------------------------------------------------------------ */ /* Type ladder */ /* ------------------------------------------------------------------ */ .lt { font-size: 34px; line-height: 41px; font-weight: 600; letter-spacing: -0.4px; overflow-wrap: anywhere; } .lt.display { font-family: var(--display); font-weight: 300; letter-spacing: -0.6px; } @media (min-width: 768px) { .lt { font-size: 40px; line-height: 46px; } } .t1 { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.3px; overflow-wrap: anywhere; } .t1.page-title { font-family: var(--display); font-weight: 300; font-size: 30px; line-height: 36px; letter-spacing: -0.5px; } @media (min-width: 768px) { .t1.page-title { font-size: 34px; line-height: 40px; } } @media (min-width: 768px) { .t1 { font-size: 28px; line-height: 34px; } } .t2 { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.2px; overflow-wrap: anywhere; } .hl { font-size: 17px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; } .body { font-size: 17px; line-height: 24px; font-weight: 400; } .sub { font-size: 16px; line-height: 22px; } .fn { font-size: 14px; line-height: 20px; } .cap { font-size: 13px; line-height: 18px; } .dim { color: var(--dim); } .soft { color: var(--fg-soft); } .acc { color: var(--accent); } .block { display: block; } .mono { font-family: var(--mono); } .mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; } .stack8 > * + * { margin-top: 8px; } /* ------------------------------------------------------------------ */ /* Base */ /* ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } /* The native surface shell has generic POS controls. Reset those defaults before Academy's own components so local and hosted layouts agree. */ body { padding: 0; -webkit-user-select: text; user-select: text; } h1, h2 { color: inherit; text-transform: none; letter-spacing: inherit; } label { margin: 0; color: inherit; font-size: inherit; } button { width: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; } .primary { margin-top: 0; } .row { margin-top: 0; } .row button { flex: 0 1 auto; } .topbar { display: block; margin: 0; } .card { padding: 0; border: 0; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 17px; line-height: 24px; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } body.sheet-open { overflow: hidden; } a { color: inherit; text-decoration: none; } h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } button, input, textarea, select { font: inherit; color: inherit; } textarea { resize: vertical; } ::placeholder { color: var(--faint); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } ::selection { background: var(--accent); color: var(--accent-ink); } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .icon { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; } .icon.sm { width: 20px; height: 20px; } .icon.obj { stroke: none; } .icon.obj use { color: currentColor; } .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .between { justify-content: space-between; } .empty { color: var(--dim); padding: 40px 16px; text-align: center; font-size: 16px; } p, .lede, .blurb, .msg p, dd, .help, .fill, .st, .vmeta { max-width: 70ch; } /* ------------------------------------------------------------------ */ /* Surfaces */ /* ------------------------------------------------------------------ */ .card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow-1); transition: background-color var(--t), box-shadow var(--t); } .card.raised { background: var(--raised); box-shadow: var(--shadow-2); } .card.inner { background: var(--card); padding: 16px; } .card.list-card { overflow: hidden; } .card.desc, .card.composer, .card.thread-card, .card.sheetcard { padding: 16px; } @media (min-width: 768px) { .card.desc, .card.composer, .card.thread-card { padding: 20px; } } /* Grouped list rows (operator screens, review page, sheets) */ .group { } .grow { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 56px; color: var(--fg); width: 100%; text-align: left; background: transparent; border: 0; padding: 0; transition: background-color var(--t); } .grow.nolead { grid-template-columns: minmax(0, 1fr); } .grow .lead { display: flex; align-items: flex-start; padding: 12px 12px 0 16px; color: var(--dim); font-size: 14px; min-width: 56px; } .grow .rc { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px 12px 0; min-width: 0; border-top: 1px solid transparent; } .grow.nolead .rc { padding-left: 16px; } .grow + .grow .rc { border-top-color: var(--line); } .grow .main { flex: 1; min-width: 0; } .grow .ti { display: block; font-size: 17px; line-height: 22px; overflow-wrap: anywhere; } .grow .st { display: block; font-size: 14px; line-height: 20px; color: var(--dim); margin-top: 4px; overflow-wrap: anywhere; } .grow .trail { color: var(--dim); font-size: 14px; display: flex; align-items: center; gap: 8px; flex: none; min-height: 22px; } .grow .chev { color: var(--faint); width: 20px; height: 20px; } .grow.tap { cursor: pointer; } .grow.tap:focus-visible { outline-offset: -3px; border-radius: 8px; } @media (max-width: 479px) { .grow .rc:has(.trail .chip) { flex-wrap: wrap; } .grow .rc:has(.trail .chip) .main { flex-basis: 100%; } .grow .rc:has(.trail .chip) .trail { width: 100%; justify-content: flex-start; margin-top: 4px; } .grow .rc:has(.trail .chip) .trail .chev { margin-left: auto; } } /* Chips (filters) and status chips */ .chip { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; min-width: 44px; padding: 0 12px; border-radius: 999px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--fg); background: var(--card); border: 1px solid transparent; white-space: normal; cursor: default; transition: background-color var(--t), color var(--t), opacity var(--t); } .chip.filter { cursor: pointer; } .chip.filter::before { content: ""; position: absolute; inset: -4px 0; } /* 48px hit area, 40px visual */ .chip.filter:active { filter: brightness(0.92); } .chip.filter.on { background: transparent; color: var(--hue-text, var(--accent)); border-color: var(--hue, var(--accent)); } .chip.open { color: var(--dim); background: var(--card); } .chip.submitted { color: var(--fg); background: var(--raised); } .chip.in-review { color: var(--fg); background: var(--raised); } .chip.accepted, .chip.moving { color: var(--accent); background: var(--accent-14); border-color: transparent; } .chip.revise, .chip.question, .chip.stalled { color: var(--parked-text); background: var(--parked-14); } .chip.blocked, .chip.breached, .chip.call { color: var(--blocked-text); background: var(--blocked-14); } .chip.finished { color: var(--fg-soft); background: rgba(255, 255, 255, 0.12); } .chip.member { color: var(--fg); background: rgba(11, 11, 13, 0.8); } .chip.ontop { position: absolute; left: 8px; top: 8px; min-height: 36px; background: rgba(11, 11, 13, 0.8); border-color: transparent; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .chip.ontop.accepted { color: var(--accent); } .chip.ontop.revise { color: var(--parked-text); } .chip.flip { animation: xfade 200ms var(--ease); } @keyframes xfade { from { opacity: 0; } to { opacity: 1; } } .chiprow { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 8px 0 12px; margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); scroll-snap-type: x proximity; } .chiprow::-webkit-scrollbar { display: none; } .chiprow:not(.wrap) { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 40px), transparent 100%); } .chiprow.compact { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%); } .chiprow .chip { flex: none; scroll-snap-align: start; } .chiprow.wrap { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } .chiprow.compact { margin: 0; padding: 0 0 12px; } /* Buttons: primary white pill, secondary #272727 pill, plain */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; cursor: pointer; font-size: 15px; line-height: 20px; font-weight: 600; background: var(--card); color: var(--fg); transition: background-color var(--t), color var(--t), filter var(--t), transform var(--t); text-align: center; } @media (max-width: 767px) { .btn { font-size: 16px; } .btn.primary { min-height: 48px; } } .btn.primary { background: var(--accent); color: var(--accent-ink); } .btn.secondary { background: var(--card); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); } .btn.secondary.on { background: var(--hover); color: var(--accent); box-shadow: inset 0 0 0 1px var(--line); } .btn.plain { background: transparent; color: var(--fg-soft); font-weight: 500; padding: 0 12px; } .btn.block { width: 100%; } .btn.iconbtn { width: 44px; padding: 0; } @media (hover: hover) { .btn:hover { background: var(--hover); } .btn.primary:hover { background: var(--accent); filter: brightness(1.06); } .btn.secondary:hover { background: var(--hover); } .btn.plain:hover { background: var(--card); color: var(--fg); } } .btn:active { filter: brightness(0.9); transform: translateY(0.5px); } .btn:disabled { opacity: 0.4; cursor: default; } .btn .icon { width: 20px; height: 20px; } .btn.more { min-height: 44px; padding: 0 8px; color: var(--fg); font-weight: 600; } .btn.back { margin-left: -12px; } /* Fields */ .field { display: block; } .field + .field { margin-top: 20px; } .field > .label { display: block; font-size: 15px; line-height: 20px; color: var(--fg-soft); margin-bottom: 8px; } .field > .label .fl { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .field > .help { display: block; font-size: 14px; line-height: 20px; color: var(--dim); margin-top: 8px; } .input, .textarea, .select { width: 100%; min-height: 48px; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; font-size: 16px; line-height: 22px; transition: border-color var(--t), box-shadow var(--t); } .raised .input, .raised .textarea, .sheet-panel .input, .sheet-panel .textarea { background: var(--bg); } .textarea { min-height: 112px; } .textarea.short { min-height: 72px; } .textarea.mono { font-family: var(--mono); font-size: 16px; line-height: 22px; } .input:focus, .textarea:focus { outline: none; border-color: var(--accent-40); box-shadow: 0 0 0 3px var(--accent-40); } .input[readonly], .textarea[readonly] { color: var(--fg-soft); } .input.pillin { border-radius: 999px; } .codeboxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .codeboxes input { width: 100%; height: 56px; text-align: center; font-size: 24px; font-weight: 600; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 0; } .codeboxes input:focus { outline: none; border-color: var(--accent-40); box-shadow: 0 0 0 3px var(--accent-40); } /* ------------------------------------------------------------------ */ /* Top bar (YouTube) */ /* ------------------------------------------------------------------ */ /* Fixed 56px bar spanning the viewport; the page grid starts below it. */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: var(--bar); background: var(--bg); } body { padding-top: var(--bar); } .tb { width: 100%; height: 100%; padding: 0 var(--gutter); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; } .tb-lead { display: flex; align-items: center; gap: 8px; min-width: 0; } .tb-trail { display: flex; align-items: center; gap: 8px; justify-content: flex-end; } .tb-search { display: none; justify-self: center; width: min(640px, 100%); align-items: center; gap: 8px; } @media (min-width: 768px) { .tb-search { display: flex; } } .searchpill { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px 0 16px; border-radius: 999px; background: var(--bg); border: 1px solid rgba(255, 255, 255, 0.16); transition: border-color var(--t), box-shadow var(--t); } .searchpill:focus-within { border-color: var(--accent-40); box-shadow: 0 0 0 3px var(--accent-40); } .searchpill .icon { color: var(--dim); } .searchpill input { appearance: none; -webkit-appearance: none; width: 0; padding: 0; border-radius: 0; box-shadow: none; flex: 1; min-width: 0; height: 44px; background: transparent; border: 0; outline: none; color: var(--fg); font-size: 16px; } .tb-search.phone { display: flex; width: 100%; margin: 4px 0 12px; } .askbtn { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--raised); color: var(--fg); color: var(--fg); display: grid; place-items: center; cursor: pointer; flex: none; transition: background-color var(--t); } .askbtn::before { content: ""; position: absolute; inset: -2px; } /* 44px hit area */ @media (hover: hover) { .askbtn:hover { background: var(--hover); } } .askbtn:active { filter: brightness(0.9); } .lockup { display: inline-flex; align-items: center; gap: 10px; color: #f4f1ea; min-height: 44px; padding: 0 4px; border-radius: 8px; } :root[data-theme="light"] .lockup { color: #121214; } .lockup .mark { width: 24px; height: 24px; flex: none; } .lockup .wm { font-family: var(--lockup); font-weight: 500; font-size: 17px; letter-spacing: -0.01em; line-height: 1; white-space: normal; } .lockup .wm b { font-weight: 500; color: var(--dim); } @media (max-width: 479px) { .lockup .wm b { display: none; } } .avatar-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; } .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--card); display: inline-grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--fg); flex: none; overflow: hidden; } .avatar.lg { width: 40px; height: 40px; font-size: 14px; } .avatar.rev { color: var(--accent); background: var(--accent-14); } .avatar svg { width: 100%; height: 100%; display: block; } .avatar.mark-av { background: #0b0b0d; width: 36px; height: 36px; } .avatar.mark-av.lg { width: 40px; height: 40px; } .avatar.mark-av .mark { width: 60%; height: 60%; } .only-desktop { display: none !important; } @media (min-width: 1024px) { .only-desktop { display: inline-flex !important; } } .only-phone { display: none; } @media (max-width: 767px) { .only-phone { display: block; } } /* ------------------------------------------------------------------ */ /* Frame */ /* ------------------------------------------------------------------ */ .frame { display: grid; grid-template-columns: minmax(0, 1fr); max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); gap: 24px; } .sidebar { display: none; } .rail { display: none; } .content { min-width: 0; padding: 8px 0 calc(var(--tabbar) + var(--safe-b) + 32px); } @media (min-width: 768px) { .content { padding: 8px 0 64px; } } @media (min-width: 1024px) { .frame.has-side { grid-template-columns: var(--side) minmax(0, 1fr); } body.sidebar-off .frame.has-side { grid-template-columns: var(--side-mini) minmax(0, 1fr); } .frame.has-rail { grid-template-columns: minmax(0, 1fr) var(--rail); gap: 24px; } .frame.no-side.has-rail .content { max-width: 1280px; width: 100%; } .sidebar { display: block; position: sticky; top: var(--bar); align-self: start; height: calc(100vh - var(--bar)); overflow: auto; padding: 8px 0 24px; scrollbar-width: thin; } .rail { display: block; padding-top: 8px; } } .frame.no-side:not(.has-rail) .content { max-width: 1280px; width: 100%; justify-self: center; } /* Sidebar (YouTube): hairline-separated groups */ .side-group { padding: 12px 0; display: grid; gap: 8px; } .side-group + .side-group { border-top: 1px solid var(--line); } .side-title { padding: 6px 12px 10px; font-size: 16px; font-weight: 600; } .side-item { display: flex; align-items: center; gap: 16px; min-height: 48px; padding: 0 12px; border-radius: 12px; color: var(--fg); width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; font-size: 15px; line-height: 20px; transition: background-color var(--t); } .side-item.on { background: var(--card); font-weight: 600; } .side-item .icon { color: var(--fg); } .side-item .icon.obj { width: 24px; height: 24px; } .side-item .dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--parked-text); flex: none; } .side-item .huedot { width: 8px; height: 8px; border-radius: 50%; background: var(--hue); flex: none; margin-left: -6px; } body.sidebar-off .side-label, body.sidebar-off .side-title, body.sidebar-off .dot { display: none; } body.sidebar-off .side-item { justify-content: center; padding: 0; } /* ------------------------------------------------------------------ */ /* Home: hero, row headers, card grid */ /* ------------------------------------------------------------------ */ .hero { padding: 8px 0 24px; } .hero .lt { max-width: 20ch; } .hero .sub { margin-top: 8px; max-width: 60ch; } .rowsec { margin-top: var(--rowgap); scroll-margin-top: calc(var(--bar) + 16px); } .rowsec:first-of-type { margin-top: 8px; } .rowhead { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; scroll-margin-top: calc(var(--bar) + 16px); } .rowhead .icon { width: 26px; height: 26px; color: var(--fg); } .rowhead h2 { font-family: var(--display); font-weight: 300; font-size: 22px; line-height: 28px; letter-spacing: -0.3px; color: var(--fg); } .rowhead p { display: block; margin-top: 2px; } .grid { display: grid; grid-template-columns: 1fr; gap: var(--rowgap) 16px; } @media (min-width: 560px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1400px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .vcard { display: block; color: var(--fg); border: 0; padding: 8px; text-align: left; cursor: pointer; width: 100%; border-radius: 16px; animation: rowin 180ms ease-out both; animation-delay: calc(var(--i, 0) * 30ms); } .vcard:focus-visible { outline-offset: 4px; } .thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 160ms var(--ease); } .thumb-art { position: absolute; inset: 0; display: block; background: var(--card); } img.thumb-art { width: 100%; height: 100%; object-fit: cover; } .thumb-art svg { width: 100%; height: 100%; display: block; animation: fade 300ms var(--ease); } .thumb-art.missing::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.06), transparent 60%); } .dur { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: 4px; background: rgba(11, 11, 13, 0.8); color: #ffffff; font-weight: 500; } .prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--hue-tint, rgba(255, 255, 255, 0.2)); } .prog i { display: block; height: 100%; background: var(--hue, var(--accent)); transition: width 600ms var(--ease); } .vcard .thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--hue-tint, transparent); } .vbody { display: flex; gap: 12px; padding: 10px 4px 0; } .vtext { min-width: 0; flex: 1; } .vtitle { display: block; } .vmeta { display: block; margin-top: 4px; } .vcard.small .vbody { padding-top: 8px; } /* ------------------------------------------------------------------ */ /* Watch page */ /* ------------------------------------------------------------------ */ .player { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; border-radius: var(--r); } .player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } @media (max-width: 767px) { .player { position: sticky; top: var(--bar); z-index: 10; margin: 0 calc(var(--gutter) * -1); border-radius: 0; } } .watch-title { margin-top: 12px; } .channel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 12px; } .channel-l { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .actions { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; max-width: 100%; padding: 2px; } .actions::-webkit-scrollbar { display: none; } .actions .btn { flex: none; } .desc { margin-top: 12px; } .desc-body { position: relative; margin-top: 8px; } .desc-body.collapsed { max-height: 96px; overflow: hidden; } .desc-body.collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(transparent, var(--card)); } .desc .more { margin: 4px 0 0 -8px; } .thumb-art.strip { position: relative; display: block; width: 100%; aspect-ratio: 1920 / 600; border-radius: 8px; overflow: hidden; } .composer { margin-top: 24px; } .composer form { margin-top: 16px; } .hw-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; } .thread-card { margin-top: 16px; } .thread { margin-top: 12px; display: flex; flex-direction: column; gap: 16px; } .msgrow { display: flex; gap: 12px; align-items: flex-start; animation: msgin 250ms var(--ease) both; } .msgrow .msg { flex: 1; min-width: 0; } .msgrow .msg p { margin-top: 4px; } .phone-rail { margin-top: 16px; } .phone-rail .sheetcard { margin-bottom: 16px; } .rail .sheetcard { margin-bottom: 16px; } .rail-upnext, .phone-rail .rail-upnext { } .upnext { display: flex; flex-direction: column; gap: 8px; } .upnext-row { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 8px; align-items: start; color: var(--fg); border-radius: 8px; padding: 4px; min-height: 56px; transition: background-color var(--t); } .upnext-row .thumb.mini { aspect-ratio: 16 / 9; } .upnext-row .vtext { padding-top: 2px; } @media (max-width: 479px) { .upnext-row { grid-template-columns: 136px minmax(0, 1fr); } } /* Sheet card */ .sheetcard { padding: 0; overflow: hidden; } .sheet-sum { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 16px; cursor: pointer; } .sheet-sum::-webkit-details-marker { display: none; } .sheet-sum > span:first-child { display: flex; align-items: center; gap: 12px; } .sheet-sum .chev.rot { transition: transform var(--t); } .sheetcard[open] .sheet-sum .chev.rot { transform: rotate(90deg); } .sheetrows { padding: 0 16px 8px; } .srow { display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); } .srow .bar { position: relative; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.08); margin: 4px 0; } .srow .bar i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--faint); transition: height 600ms var(--ease); } .srow.filled .bar i { background: var(--accent); } .srow.partial .bar i { background: var(--parked-text); } .srow .q { display: flex; align-items: center; gap: 8px; } .srow .q .icon { width: 22px; height: 22px; color: var(--fg-soft); } .srow .q .n { margin-left: auto; color: var(--faint); } .srow.filled .q .n { color: var(--accent); } .srow .fill { margin-top: 6px; color: var(--fg-soft); } .srow.is-empty .fill { color: var(--faint); } .srow .fill.fresh { animation: fade 600ms var(--ease) both; animation-delay: 300ms; } /* ------------------------------------------------------------------ */ /* Operator screens, kv, sla */ /* ------------------------------------------------------------------ */ .kv dt { font-size: 14px; line-height: 20px; color: var(--dim); margin-top: 16px; } .kv dt:first-child { margin-top: 0; } .kv dd { font-size: 16px; line-height: 22px; margin-top: 4px; white-space: pre-wrap; } .kv dd.mono { font-family: var(--mono); font-size: 15px; color: var(--fg-soft); } .kv dd.unsure { color: var(--parked-text); } .sla.ok { color: var(--dim); } .sla.soon { color: var(--parked-text); } .sla.breached { color: var(--blocked-text); } .state.moving { color: var(--accent); } .state.stalled { color: var(--parked-text); } .state.call { color: var(--blocked-text); } .state.finished { color: var(--dim); } .verdicts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; } .verdicts .btn { flex: 1 1 120px; } .toggle { position: relative; width: 51px; height: 31px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); border: 0; cursor: pointer; transition: background-color var(--t); flex: none; padding: 0; } .toggle::before { content: ""; position: absolute; inset: -7px; } .toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); transition: transform var(--t); } .toggle[aria-checked="true"] { background: var(--accent); } .toggle[aria-checked="true"]::after { transform: translateX(20px); } /* ------------------------------------------------------------------ */ /* Sign-in (sheet) */ /* ------------------------------------------------------------------ */ .signin { max-width: 400px; margin: 0 auto; padding: 8px 0 8px; } .brand-hero { position: relative; display: grid; justify-items: center; gap: 16px; margin-bottom: 24px; } .hero-mark { position: relative; width: 128px; height: 128px; opacity: 0; transition: opacity 400ms var(--ease); } .hero-mark.on { opacity: 1; } .hero-mark .mark { width: 100%; height: 100%; display: block; } .mark-anim { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 128px; height: 128px; transition: opacity 400ms var(--ease); } .mark-anim.gone { opacity: 0; } @media (max-width: 767px) { .hero-mark, .mark-anim { width: 72px; height: 72px; } } .hero-lockup { color: #f4f1ea; font-family: var(--lockup); font-weight: 500; text-align: center; } .hero-lockup .wm b { font-weight: 500; color: var(--dim); } .signin .signin-card { padding: 16px; margin-top: 24px; } .sheet-root.signin-mode .sheet-head { visibility: hidden; height: 0; padding: 0; } /* ------------------------------------------------------------------ */ /* Tab bar (phone) */ /* ------------------------------------------------------------------ */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); height: calc(var(--tabbar) + var(--safe-b)); padding-bottom: var(--safe-b); background: var(--bg); border-top: 1px solid var(--line); } .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--dim); font-size: 13px; line-height: 16px; font-weight: 500; background: transparent; border: 0; cursor: pointer; transition: color var(--t); min-height: 49px; } .tabbar .icon { width: 24px; height: 24px; } .tabbar .on { color: var(--fg); } @media (min-width: 768px) { .tabbar { display: none; } } /* ------------------------------------------------------------------ */ /* Sheets (bottom sheet on phone/tablet, centered on desktop) */ /* ------------------------------------------------------------------ */ .sheet-root { position: fixed; inset: 0; z-index: 40; display: none; } .sheet-root.open { display: block; } .scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity var(--t); } .sheet-root.open .scrim { opacity: 1; } .sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: calc(var(--sheet-h, 100dvh) - 32px); background: var(--raised); border-radius: 16px 16px 0 0; box-shadow: var(--shadow-2); display: flex; flex-direction: column; transform: translateY(100%); transition: transform 320ms var(--ease); } .sheet-root.open .sheet-panel { transform: none; } .grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--faint); opacity: 0.6; margin: 8px auto 0; flex: none; } .sheet-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 4px 8px 8px 16px; flex: none; } .sheet-head .t { grid-column: 2; font-size: 17px; line-height: 22px; font-weight: 600; text-align: center; overflow-wrap: anywhere; } .sheet-head .done { grid-column: 3; justify-self: end; color: var(--fg); } .sheet-body { min-height: 0; overscroll-behavior: contain; overflow: auto; padding: 0 16px calc(24px + var(--safe-b)); -webkit-overflow-scrolling: touch; } @media (min-width: 1024px) { .sheet-panel { left: 50%; right: auto; top: 50%; bottom: auto; width: min(560px, calc(100vw - 64px)); max-height: calc(var(--sheet-h, 100dvh) - 80px); transform: translate(-50%, -50%) scale(0.98); opacity: 0; border-radius: 16px; transition: transform var(--t), opacity var(--t); } .sheet-root.wide .sheet-panel { width: min(720px, calc(100vw - 64px)); } .sheet-root.open .sheet-panel { transform: translate(-50%, -50%); opacity: 1; } .grabber { display: none; } .sheet-head { padding-top: 12px; } .sheet-body { padding: 0 24px 24px; } } .detail-video { aspect-ratio: 16 / 9; width: 100%; background: #000; border-radius: var(--r); margin-bottom: 16px; display: block; } .detail-video.locked { position: relative; overflow: hidden; } .detail-video.locked .thumb { position: absolute; inset: 0; border-radius: 0; filter: brightness(0.5); } .detail-video.locked .lock { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; justify-items: center; text-align: center; padding: 16px; } .askpane { display: flex; flex-direction: column; gap: 12px; min-height: 40vh; } .asklog { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 16px; padding: 4px 0; max-height: 50vh; } .askform { display: flex; gap: 8px; align-items: center; position: sticky; bottom: 0; background: var(--raised); padding-top: 8px; } .askform .input { flex: 1; } .toast { position: fixed; left: 50%; bottom: calc(var(--tabbar) + var(--safe-b) + 16px); transform: translateX(-50%) translateY(12px); background: var(--fg); color: var(--bg); padding: 12px 16px; border-radius: 12px; font-size: 15px; line-height: 20px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity var(--t), transform var(--t); z-index: 50; max-width: calc(100vw - 32px); box-shadow: var(--shadow-2); overflow-wrap: anywhere; } @media (min-width: 768px) { .toast { bottom: 24px; } } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ------------------------------------------------------------------ */ /* Motion */ /* ------------------------------------------------------------------ */ @keyframes rowin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes msgin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .group > .grow { animation: rowin 240ms var(--ease) both; animation-delay: calc(var(--i, 0) * 22ms); } .zr { position: relative; display: inline-block; width: 16px; height: 16px; flex: none; } .zr b { position: absolute; inset: 0; margin: auto; border: 1.5px solid var(--ember); border-radius: 50%; animation: zr 1.4s cubic-bezier(.25, .6, .3, 1) infinite; opacity: 0; } .zr b:nth-child(2) { animation-delay: .35s; } .zr b:nth-child(3) { animation-delay: .7s; } @keyframes zr { 0% { width: 15%; height: 15%; opacity: 1; border-color: var(--fg); } 60% { opacity: .9; border-color: var(--ember); } 100% { width: 100%; height: 100%; opacity: 0; border-color: var(--ember); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } .zr b { animation: none; opacity: 1; width: 60%; height: 60%; } .zr b + b { display: none; } } /* ------------------------------------------------------------------ */ /* Interaction states (one treatment per object kind) */ /* ------------------------------------------------------------------ */ .vcard { transition: background-color var(--t); border-radius: var(--r); position: relative; } .btn.primary { transition: background-color var(--t), filter var(--t); } .btn:active { filter: brightness(0.92); transform: none; } .upnext-row.current, .side-item.on, .grow.current { position: relative; } .upnext-row.current::before, .side-item.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--accent); } .upnext-row.current { padding-left: 10px; } .upnext-row.current .vtitle { color: var(--fg); } .no-anim .vcard, .no-anim .group > .grow, .no-anim .msgrow { animation: none; } /* "⋯" affordance: visible on hover/focus, always reachable by keyboard */ .kebab { position: absolute; right: 8px; top: 8px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(11, 11, 13, 0.8); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity var(--t), background-color var(--t); } .kebab .icon { width: 20px; height: 20px; } .vcard:hover .kebab, .vcard:focus-within .kebab, .kebab:focus-visible, .srow:hover .kebab, .srow:focus-within .kebab, .boardwrap:hover .kebab, .boardwrap:focus-within .kebab, .upnext-row:hover .kebab, .upnext-row:focus-within .kebab { opacity: 1; } @media (hover: none) { .kebab { opacity: 1; background: rgba(15, 15, 15, 0.6); } } .srow { position: relative; } .srow .kebab { position: static; width: 44px; height: 44px; margin: -10px -8px -10px 8px; background: transparent; color: var(--dim); } .srow .q { position: relative; } .glyphbtn { position: relative; display: inline-flex; border-radius: 6px; cursor: default; } .glyphbtn::before { content: ""; position: absolute; inset: -11px; } /* 44px hit area around the 22px glyph */ .boardwrap { position: relative; border-radius: 8px; } .boardwrap .thumb { display: block; } /* Context menu (desktop popover) */ .menu-root { position: fixed; inset: 0; z-index: 45; } .menu-scrim { position: absolute; inset: 0; } .menu { position: absolute; min-width: 260px; max-width: 320px; background: var(--raised); border-radius: 12px; box-shadow: var(--shadow-2); padding: 6px; animation: msgin 160ms var(--ease); } .menu-title { padding: 10px 12px 6px; font-size: 14px; line-height: 20px; color: var(--dim); overflow-wrap: anywhere; } .menu-list { display: flex; flex-direction: column; } .menu-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--fg); border-radius: 8px; text-align: left; font-size: 15px; line-height: 20px; cursor: pointer; width: 100%; transition: background-color var(--t); } @media (hover: hover) { .menu-item:hover { background: var(--hover); } } .menu-item:active { filter: brightness(0.92); } .menu-item .icon { color: var(--fg-soft); } .sheet-body .menu-list { background: var(--card); border-radius: 12px; padding: 6px; } .sheet-body .menu-item { min-height: 48px; font-size: 16px; } /* Lightbox */ .lightbox { display: flex; flex-direction: column; gap: 12px; } .lb-zoom { display: flex; gap: 8px; flex-wrap: wrap; } .lb-view { overflow: auto; max-height: 70vh; border-radius: 8px; background: var(--bg); touch-action: pan-x pan-y pinch-zoom; } .lb-view .thumb-art { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; transition: width 200ms var(--ease); } /* Part bands: Space Grotesk display title over a dithered seam */ .band { position: relative; overflow: hidden; padding: 0; margin-bottom: 16px; box-shadow: none; } .band .seam, .sheet-panel .seam { position: absolute; left: 0; top: 0; width: 100%; height: 28px; pointer-events: none; } .sheet-panel { overflow: hidden; } .band-in { position: relative; padding: 28px 20px 20px; } .band .lt { max-width: 30ch; } .band .sub { margin-top: 8px; max-width: 70ch; } .graph-card { padding: 12px 16px; margin: 4px 0 16px; } .graph-card .graph { max-width: 560px; } .graph { width: 100%; max-width: 640px; height: auto; display: block; overflow: visible; margin: 0 auto; } .graph .edge { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 700ms var(--ease); transition-delay: calc(var(--i, 0) * 90ms + 120ms); } .graph.drawn .edge { stroke-dashoffset: 0; } .graph .node circle { fill: var(--card); stroke: var(--fg-soft); stroke-width: 1.25; transition: stroke var(--t), fill var(--t); } .graph .node.root circle { stroke: var(--fg); } .graph .node.branch { cursor: pointer; opacity: 0; transition: opacity 300ms var(--ease); transition-delay: calc(var(--i, 0) * 90ms + 500ms); } .graph.drawn .node.branch { opacity: 1; } .graph .node.branch:hover circle, .graph .node.branch:focus-visible circle { stroke: var(--accent); fill: var(--raised); } .graph .node.branch:focus-visible { outline: none; } .graph .node.active circle { stroke: var(--accent); } .graph .gi { width: 100%; height: 100%; display: grid; place-items: center; color: var(--fg-soft); } .graph .gi .icon { width: 70%; height: 70%; } .graph .node.active .gi { color: var(--accent); } .graph .nl { fill: var(--fg); font-family: var(--sans); font-size: 14px; font-weight: 500; } .graph .ns { fill: var(--dim); font-family: var(--sans); font-size: 12px; } .graph .node.root .nl { text-anchor: middle; font-size: 12px; fill: var(--dim); } .graph .zr1, .graph .zr2 { fill: none; stroke: var(--ember); stroke-width: 1.25; opacity: 0; transform-box: fill-box; transform-origin: center; animation: zrsvg 1.6s cubic-bezier(.25, .6, .3, 1) infinite; } .graph .zr2 { animation-delay: .5s; } @keyframes zrsvg { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } } .legend { display: none; margin-top: 12px; border-top: 1px solid var(--line); } @media (max-width: 559px) { .legend { display: block; } .graph .nl, .graph .ns, .graph .node.root .nl { display: none; } } .legend li + li { border-top: 1px solid var(--line); } .legend-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 4px; background: transparent; border: 0; color: var(--fg); text-align: left; cursor: pointer; border-radius: 8px; } .legend-btn > span { display: flex; flex-direction: column; } .legend-btn .icon { color: var(--fg-soft); } .legend-btn.on .icon, .legend-btn.on .sub { color: var(--accent); } @media (prefers-reduced-motion: reduce) { .graph .edge, .graph .node.branch { transition: none; stroke-dashoffset: 0; opacity: 1; } .graph .zr1, .graph .zr2 { animation: none; opacity: 1; } .graph .zr2 { display: none; } } /* sheet rows: 8px breathing room between tappable rows */ .sheetrows { display: grid; gap: 8px; padding: 0 16px 12px; } .srow { border-top: 0; border-radius: 8px; padding: 8px 8px 8px 4px; transition: background-color var(--t); } .srow + .srow { border-top: 0; } @media (hover: hover) { .srow:hover { background: var(--raised); } } /* paragraphs at 70ch */ .desc p, .desc-body p { max-width: 68ch; } .graph .node .hit { fill: transparent; stroke: none; } .graph-card.mini { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; } .graph-card.mini .graph { max-width: 180px; margin: 0; flex: none; } .graph.compact .node.branch { opacity: 1; transition: none; } .graph.compact .edge { stroke-dashoffset: 0; } .rowhead p, .hero .sub, .band .sub { max-width: 64ch; } /* Kit heroes behind bands (lazy, dimmed, never pushing the title under the bar) */ .band.has-hero .band-in, .hero.has-hero .hero-copy { position: relative; z-index: 1; } .hero-art { position: absolute; inset: 0; display: block; opacity: 0.55; pointer-events: none; } .hero-art svg { width: 100%; height: 100%; object-fit: cover; } .band.has-hero { min-height: 160px; } .band.has-hero .band-in { background: linear-gradient(90deg, rgba(13, 13, 15, 0.85) 0%, rgba(13, 13, 15, 0.55) 55%, rgba(13, 13, 15, 0) 100%); padding-right: 40%; } .hero.has-hero { position: relative; overflow: hidden; padding: 0; min-height: 220px; display: grid; } .hero.has-hero .hero-copy { padding: 28px 20px 24px; max-width: 52%; background: linear-gradient(90deg, rgba(13, 13, 15, 0.9) 0%, rgba(13, 13, 15, 0.6) 70%, rgba(13, 13, 15, 0) 100%); } @media (max-width: 767px) { .hero.has-hero .hero-copy { max-width: none; background: none; padding-top: 0; } .hero.has-hero { grid-template-rows: auto auto; } .hero.has-hero .hero-art { position: relative; aspect-ratio: 2560 / 1080; opacity: 0.8; } .band.has-hero .band-in { padding-right: 20px; background: linear-gradient(0deg, rgba(13, 13, 15, 0.9), rgba(13, 13, 15, 0.4)); } } .compact-band { min-height: 0; margin-bottom: 8px; } .compact-band .band-in { padding: 20px 16px 12px; } .srow .fill, .srow .srow-body > .fn { max-width: 60ch; } /* Phone: long-press opens menus; the "⋯" affordance is a hover/keyboard aid, so it hides below 768px (no icon-only buttons on phone). */ @media (max-width: 767px) { .kebab { display: none; } .searchpill { min-height: 48px; } .searchpill input { height: 48px; } .graph .node.branch { cursor: default; } } .tabbar { gap: 8px; padding-left: 8px; padding-right: 8px; } /* Watch page rows must never widen the column: flex children shrink, actions scroll inside */ .frame { overflow-x: clip; } .content { max-width: 100%; } .channel { min-width: 0; } .channel-l, .actions { min-width: 0; max-width: 100%; } .channel-l { flex: 1 1 280px; } .actions { flex: 1 1 100%; width: 100%; } @media (min-width: 1024px) { .actions { flex: 0 1 auto; width: auto; } } .player { max-width: calc(100% + 2 * var(--gutter)); } /* Scrolling rows never contribute intrinsic width to the column */ .actions, .chiprow { contain: inline-size; } /* Thumbnail peek: the card shows the kit's crop; hover (400ms) or long-press eases to the full scene in the same frame */ .thumb-art .peek-layer { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 200ms var(--ease); background: var(--card); } .thumb-art .peek-layer svg { width: 100%; height: 100%; display: block; transform-origin: 0 0; transition: transform 350ms var(--spring); will-change: transform; } .thumb-art.peeking .peek-layer { opacity: 1; } .thumb-art.peeking .peek-layer svg { transform: none !important; } @media (prefers-reduced-motion: reduce) { .thumb-art .peek-layer, .thumb-art .peek-layer svg { transition: none; } } /* Kit hero bands: full-bleed composition at 1x (design/2), cropped when narrower, letterboxed on the field when wider */ .hero-band { position: relative; min-height: var(--hero-h); overflow: hidden; background: var(--bg); box-shadow: none; } .hero-band .hero-art { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; opacity: 1; } .hero-band .hero-art svg { width: var(--hero-w); height: var(--hero-h); max-width: none; flex: none; } .hero-band .hero-copy { position: relative; z-index: 1; padding: 28px 20px 24px; } .hero-band .hero-copy.in-col { position: absolute; padding: 0; display: flex; flex-direction: column; justify-content: center; } .hero-band .hero-copy .lt { max-width: 20ch; } .hero-band.course-hero { margin: 4px 0 16px; } .hero-band svg #fg, .hero-band svg .fg, .hero-band svg #mid, .hero-band svg .mid { transition: transform 120ms linear; will-change: transform; } @media (prefers-reduced-motion: reduce) { .hero-band svg #fg, .hero-band svg .fg, .hero-band svg #mid, .hero-band svg .mid { transform: none !important; } } /* Unified search + voice pill */ .searchpill { position: relative; overflow: hidden; } .searchpill input { min-width: 0; } .micbtn { min-height: 40px; padding: 0; position: relative; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--raised); color: var(--fg); display: grid; place-items: center; cursor: pointer; flex: none; transition: background-color var(--t), color var(--t); } .micbtn::before { content: ""; position: absolute; inset: -2px; } .micbtn .arrow { display: none; } .searchpill.has-text .micbtn .mic { display: none; } .searchpill.has-text .micbtn .arrow { display: block; } .searchpill.has-text .micbtn { background: var(--accent); color: var(--accent-ink); } @media (hover: hover) { .micbtn:hover { background: var(--hover); } .searchpill.has-text .micbtn:hover { background: var(--accent); filter: brightness(1.06); } } .micbtn:active { filter: brightness(0.9); } .searchpill.listening { border-color: var(--accent-40); } .searchpill.listening .micbtn { background: var(--accent); color: var(--accent-ink); } .searchpill .meter { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; } .searchpill .meter i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 80ms linear; } .tb-search.phone { margin: 4px 0 12px; } .tb-search.phone .searchpill { min-height: 48px; } /* Part cards: band header + the lesson grid inside one contained card */ .part-card { padding: 0; margin-top: var(--rowgap); overflow: hidden; scroll-margin-top: calc(var(--bar) + 16px); } .part-card:first-of-type { margin-top: 8px; } .part-card .band { margin: 0; border-radius: 0; box-shadow: none; background: linear-gradient(90deg, var(--hue-tint, transparent), transparent 60%), var(--card); } .part-card .band::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--hue, var(--accent)); } .part-card .band-in { padding: 28px 24px 20px 28px; } .part-card .grid { padding: 24px; } .part-card .part-foot { padding: 0 24px 24px; } @media (max-width: 767px) { .part-card .band-in { padding: 24px 16px 16px 19px; } .part-card .grid { padding: 16px; } .part-card .part-foot { padding: 0 16px 16px; } } .vcard { padding: 0; } .rowsec.plain { margin-top: var(--rowgap); } /* map hero: raised, roomy, never clipped */ .graph-card { padding: 24px; margin: 8px 0 24px; overflow: visible; } .graph-card.raised { background: var(--raised); box-shadow: var(--shadow-2); } .graph { max-width: min(640px, 100%); } .graph .edge.hue { stroke: var(--hue); opacity: 0.55; } .graph .node.branch.hue circle { stroke: var(--hue); } .graph .node.branch.hue .gi { color: var(--hue-text); } .graph .node.branch.hue .nl { fill: var(--fg); } .graph .zr1, .graph .zr2 { stroke: var(--hue, var(--ember)); } .legend-btn .icon { color: var(--hue-text, var(--fg-soft)); } /* watch page: distinct raised cards with 24px gaps */ .player.card { box-shadow: var(--shadow-2); } .desc, .composer, .thread-card { margin-top: 24px; } .desc.card { background: var(--raised); box-shadow: var(--shadow-2); } .watch-title { margin-top: 24px; } /* sheet rows take the hue of their question */ .srow .q .icon { color: var(--hue-text, var(--fg-soft)); } .srow.filled .bar i { background: var(--hue, var(--accent)); } .srow.filled .q .n { color: var(--hue-text, var(--accent)); } .srow .bar { background: var(--hue-tint, rgba(255, 255, 255, 0.08)); } /* status chips keep status colours; in review pulses ember */ .chip.in-review { color: var(--fg); } /* ------------------------------------------------------------------ */ /* Texture: procedural, from tokens. Page dither field, hero glow+grid */ /* ------------------------------------------------------------------ */ body { background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%23ddd5c8' fill-opacity='0.035'%3E%3Crect x='0' y='0' width='2' height='2'/%3E%3Crect x='16' y='16' width='2' height='2'/%3E%3Crect x='8' y='24' width='2' height='2'/%3E%3Crect x='24' y='8' width='2' height='2'/%3E%3Crect x='8' y='8' width='1' height='1'/%3E%3Crect x='24' y='24' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E"); background-size: 32px 32px; background-attachment: fixed; } .hero-card { position: relative; overflow: visible; } .hero-card::before { content: ""; position: absolute; inset: -80px -40px; background: radial-gradient(ellipse at 30% 40%, var(--glow), transparent 60%); pointer-events: none; z-index: -1; filter: blur(8px); } .hero-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.35)); mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.35)); } .hero-card > * { position: relative; z-index: 1; } .player-wrap { position: relative; } .player.card::before { content: ""; position: absolute; inset: -60px; background: radial-gradient(ellipse at 50% 60%, var(--glow), transparent 65%); z-index: -1; filter: blur(10px); pointer-events: none; } .player.card { overflow: visible; } .player.card iframe { border-radius: var(--r); } @media (prefers-reduced-transparency: reduce) { body { background-image: none; } .hero-card::before, .hero-card::after, .player.card::before { display: none; } } /* ------------------------------------------------------------------ */ /* Hero composition */ /* ------------------------------------------------------------------ */ .hero-card { padding: 24px; margin: 8px 0 24px; display: grid; gap: 24px; min-height: 420px; } .hero-title .lt { margin-top: 8px; max-width: 16ch; } .hero-title .sub { margin-top: 12px; max-width: 44ch; } .hero-map { position: relative; height: var(--map-h, 372px); min-height: 372px; } .hedges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .hedge { fill: none; stroke-width: 2px; opacity: 0.6; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 700ms var(--ease); transition-delay: calc(var(--i, 0) * 80ms + 100ms); } .hedges.drawn .hedge { stroke-dashoffset: 0; } .hedges .glow .hedge { stroke-width: 6px; opacity: 0.35; } .hcenter { position: absolute; width: 96px; height: 96px; border-radius: 50%; border: 1.5px solid var(--fg); display: grid; place-items: center; text-align: center; padding: 8px; background: var(--raised); z-index: 2; } .hcenter .hl { font-size: 15px; line-height: 18px; } .hnodes { position: absolute; inset: 0; } .hnode { position: absolute; display: flex; align-items: center; gap: 16px; min-height: 72px; border-radius: 40px; cursor: pointer; transition: background-color var(--t); z-index: 2; width: max-content; max-width: none; } .hring { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--hue); background: var(--raised); display: grid; place-items: center; flex: none; color: var(--hue-text); box-shadow: 0 0 0 0 var(--hue-tint); } .hring .icon { width: 32px; height: 32px; } .hnode.active .hring { animation: ringpulse 1.2s var(--ease) 1; box-shadow: 0 0 0 8px var(--hue-tint); } @keyframes ringpulse { 0% { box-shadow: 0 0 0 0 var(--hue); } 100% { box-shadow: 0 0 0 14px transparent; } } .htext { display: flex; flex-direction: column; min-width: 0; } .hlabel { font-size: 22px; line-height: 28px; } .hhint { position: absolute; left: 0; bottom: -4px; font-size: 15px; line-height: 20px; margin: 0; } @media (max-width: 1023px) { .hero-map { min-height: 0; } } @media (max-width: 767px) { .hero-card { min-height: 0; padding: 20px 16px; } .hero-map { display: block; height: auto; min-height: 0; } .hedges, .hcenter { display: none; } .hnodes { position: static; } .hnode { position: static; width: auto; max-width: none; min-height: 56px; border-radius: 12px; padding: 8px 4px; } .hnode + .hnode { border-top: 1px solid var(--line); } .hhint { position: static; margin-top: 12px; } .hring { width: 48px; height: 48px; } .hring .icon { width: 24px; height: 24px; } .hlabel { font-size: 17px; line-height: 22px; font-weight: 600; font-family: var(--sans); } .hhint { margin-top: 12px; } } @media (prefers-reduced-motion: reduce) { .hnode.active .hring { animation: none; } .hedge { transition: none; stroke-dashoffset: 0; } } .hero-title .fn, .hero-card .fn { font-size: 15px; line-height: 20px; } /* Course hero art behind the hero card, dimmed under the map so rings and labels stay legible */ .hero-card.has-hero .hero-art { position: absolute; inset: 0; z-index: 0; display: flex; justify-content: flex-start; align-items: center; overflow: hidden; border-radius: inherit; opacity: 0.45; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.9) 35%, rgba(0, 0, 0, 0.25) 60%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.9) 35%, rgba(0, 0, 0, 0.25) 60%, transparent 100%); } .hero-card.has-hero .hero-art svg { width: var(--hero-w); height: var(--hero-h); max-width: none; } @media (max-width: 1023px) { .hero-card.has-hero .hero-art { -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 85%); } } /* Part hero bands: 1x composition, cropped vertically to a band height (no downscaling) */ .part-card .hero-band { min-height: 0; height: var(--hero-h); background: var(--bg); } .part-card .hero-band .hero-art { justify-content: flex-start; } .part-card .hero-band .hero-copy, .part-card .hero-band .hero-copy.in-col { position: absolute; left: 0; right: auto; top: auto; bottom: 0; transform: none; min-height: 0; padding: 12px 24px 14px 28px; } .compact-band.hero-band { height: var(--hero-h); max-height: 200px; } .compact-band.hero-band .hero-art { align-items: flex-start; } .hero-band .hero-copy .lt { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } /* Letterboxed field beside a 1x part hero carries the part's hue tint so the band reads as one piece */ .part-card .hero-band { background: linear-gradient(90deg, transparent 0, transparent 55%, var(--hue-tint) 100%), var(--bg); } .part-card .hero-band .hero-copy:empty, .part-card .hero-band .hero-copy:has(> .sr-only:only-child) { display: none; } /* ------------------------------------------------------------------ */ /* Light-based highlight: nothing moves. Surface brightens one layer, */ /* hue hairline + soft hue glow around the thumbnail, title brightens. */ /* ------------------------------------------------------------------ */ /* Larger thumbnails: columns by container width so a 16:9 thumb stays ≥ 400px wide */ .part-card, .rowsec { container-type: inline-size; } .grid { grid-template-columns: 1fr; gap: 16px; } @container (min-width: 700px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } } @container (min-width: 1300px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } } .part-card .grid { padding: 24px 32px 32px; } @media (max-width: 767px) { .part-card .grid { padding: 16px 16px 20px; } } /* Hero band composition: left 45% is a no-art type column; the art is clipped to the right 55% with a 120px fade */ .hero-band .hero-art { left: 45%; right: 0; justify-content: flex-start; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 120px); mask-image: linear-gradient(90deg, transparent 0, #000 120px); } .hero-band .hero-art svg { margin-left: calc(var(--art-shift, 0px) * -1); } .hero-band .hero-copy.type-col { position: absolute; left: 0; top: 0; bottom: 0; width: 45%; display: flex; flex-direction: column; justify-content: center; padding: 24px 24px 24px 28px; } .hero-band .hero-copy.type-col .lt { text-shadow: none; } .part-card .hero-band .hero-copy, .part-card .hero-band .hero-copy.in-col { position: absolute; left: 0; top: 0; bottom: 0; right: auto; width: 45%; transform: none; padding: 24px 24px 24px 28px; } .part-card .hero-band .hero-copy:has(> .sr-only:only-child) { display: flex; } .part-card .hero-band { background: var(--bg); } .compact-band.hero-band .hero-copy.type-col { justify-content: flex-end; } @media (max-width: 1023px) { .hero-band .hero-art { left: 0; top: 0; bottom: 45%; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 120px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 120px), transparent); } .hero-band .hero-copy.type-col { top: auto; bottom: 0; width: 100%; height: 45%; } } /* Stacked watch page (tablet/phone): tight, aligned, no dead boxes */ .branch-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px 0 16px; margin-top: 16px; color: var(--fg); } .branch-row .huedot { width: 8px; height: 8px; border-radius: 50%; background: var(--hue, var(--accent)); flex: none; } .branch-row .chev { margin-left: auto; color: var(--faint); width: 20px; height: 20px; } @media (hover: hover) { .branch-row:hover { background: var(--hover); } } .sheet-sum { min-height: 56px; padding: 8px 16px; } .sheet-sum > span:first-child { gap: 12px; flex-wrap: wrap; } .phone-rail .sheetcard { margin: 16px 0 0; } .phone-rail .rail-upnext { margin-top: 24px; } .upnext-head { padding: 0 4px 8px; } .upnext-grid { padding: 0; } .phone-rail .chiprow.compact { margin-top: 0; } @media (max-width: 1023px) { .desc, .composer, .thread-card { margin-top: 16px; } .composer { margin-top: 24px; } .watch-title { margin-top: 16px; } } /* selection bar drawn inside the padding so every row shares one left edge */ .upnext-row { padding: 4px 4px 4px 10px; } .upnext-row.current { padding-left: 10px; } .upnext-row.current::before { left: 2px; } /* ------------------------------------------------------------------ */ /* ONE interaction model. Four states on the root: rest, hover, */ /* pressed, selected. Children only read --surface / --title. */ /* Transitions: background-color + color, 120ms ease-out. Nothing */ /* else animates on hover. No nested :hover rules anywhere. */ /* ------------------------------------------------------------------ */ .vcard, .upnext-row, .grow.tap, .side-item, .chip.filter, .hnode, .branch-row, .legend-btn, .menu-item { --surface: transparent; --title: var(--fg-soft); background-color: var(--surface); transition: background-color 120ms ease-out, color 120ms ease-out; } .grow.tap, .menu-item { --title: var(--fg); } .vcard:hover, .upnext-row:hover, .grow.tap:hover, .side-item:hover, .hnode:hover, .branch-row:hover, .legend-btn:hover, .menu-item:hover { --surface: var(--hover); --title: var(--fg); } .vcard:active, .upnext-row:active, .grow.tap:active, .side-item:active, .hnode:active, .branch-row:active, .legend-btn:active, .menu-item:active { --surface: var(--bg); --title: var(--fg); } .side-item.on, .upnext-row.current, .grow.current { --surface: var(--card); --title: var(--fg); } .vcard .vtitle, .upnext-row .vtitle, .grow .ti, .side-item .side-label, .hnode .hlabel { color: var(--title); transition: color 120ms ease-out; } .vcard:focus-visible, .upnext-row:focus-visible, .grow.tap:focus-visible, .side-item:focus-visible, .hnode:focus-visible, .branch-row:focus-visible, .chip.filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .chip.filter { --surface: var(--card); background-color: var(--surface); color: var(--fg); } .chip.filter:hover { --surface: var(--hover); } .chip.filter:active { --surface: var(--bg); } .chip.filter.on { --surface: transparent; } .btn { transition: background-color 120ms ease-out, color 120ms ease-out, opacity 120ms ease-out; } .btn:hover { filter: none; } .btn.secondary:hover { background: var(--hover); } .btn.primary:hover { background: var(--accent); filter: none; } .btn:active { filter: none; transform: none; } .btn.primary:active { background: color-mix(in srgb, var(--accent) 88%, #000); } .btn.secondary:active, .btn.plain:active { background: var(--bg); } .thumb, .upnext-row .thumb { transition: none; box-shadow: inset 0 0 0 1px var(--line); } .thumb-art, .thumb .dur, .thumb .chip.ontop, .thumb .prog, .hero-card::before, .hero-card::after, .player.card::before, .seam, .hero-art { pointer-events: none; } .kebab { transition: opacity 120ms ease-out; pointer-events: auto; } .upnext-row.current::before { background: var(--hue, var(--accent)); } .grid > .vcard:nth-child(n+9), .no-anim .vcard, .no-anim .group > .grow, .no-anim .msgrow { animation: none; } /* hero tree */ .hero-card { padding: 40px; min-height: 0; gap: 32px; } @media (min-width: 1400px) { .hero-card { grid-template-columns: 44fr 56fr; align-items: center; } } .hero-map { position: relative; height: var(--map-h, 460px); min-height: 0; } .hero-title .hhint { margin-top: 12px; position: static; font-size: 15px; line-height: 20px; } .hnode { gap: 20px; border-radius: 12px; padding: 0; } .hnode .htext { max-width: none; white-space: nowrap; } .hlabel { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.2px; display: block; } .hsub { font-size: 15px; line-height: 20px; color: var(--dim); display: block; } .hero-map.tight .hlabel { font-size: 20px; line-height: 26px; } .hedge { opacity: 0.45; stroke-width: 2px; } .hedge.on { opacity: 0.7; } .hedges .glow .hedge { opacity: 0.25; stroke-width: 6px; } .hedges .glow .hedge.on { opacity: 0.4; } .hcenter { background: var(--raised); } @media (max-width: 1023px) { .hero-card { padding: 24px; } .hero-map { display: block; height: auto; } .hedges, .hcenter { display: none; } .hnodes { position: static; display: grid; gap: 8px; } .hnode { position: static; width: auto; max-width: none; min-height: 56px; border-radius: 12px; padding: 8px 8px; } .hnode .htext { white-space: normal; max-width: none !important; } .hlabel { font-size: 17px; line-height: 22px; } .hring { width: 48px; height: 48px; } .hring .icon { width: 24px; height: 24px; } } .rail-upnext { container-type: inline-size; } /* Membership uses the existing card and button states. */ .membership-plans { display:grid; gap:16px; } .membership-plan { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; padding:16px; border:1px solid var(--line); border-radius:var(--r-card,16px); } .membership-plan > div { flex:1 1 180px; min-width:0; } .membership-plan .btn { flex:0 1 auto; } @media(max-width:767px) { .membership-plan .btn { width:100%; min-height:48px; } } /* Unrecorded lessons retain their library preview and an honest recording state. */ .lesson-preview { overflow: hidden; } .preview-frame { position: relative; aspect-ratio: 16 / 9; background: #0b0b0d; } .preview-frame .thumb-art { position: absolute; inset: 0; } .preview-status { margin: 0; padding: 12px 16px; } .searchpill { min-width: 0; } .library-symbol * { vector-effect: non-scaling-stroke; stroke: currentColor; stroke-width: 1.5px; fill: none; stroke-linecap: round; stroke-linejoin: round; } .library-symbol .solid { fill: currentColor; stroke: none; } .library-symbol .dashed { stroke-dasharray: 4 5; } /* Reviewed cover art and v8 Client sub-branch. */ .cover-band { display: grid; grid-template-columns: 42% 58%; align-items: center; gap: 0; min-height: 250px; overflow: hidden; } .cover-band .cover-copy { min-width: 0; padding: 28px; } .cover-band .cover-copy .lt { margin-top: 8px; } .cover-band .cover-copy .sub { margin-top: 12px; } .cover-band .cover-art { position: relative; inset: auto; display: block; min-width: 0; width: auto; height: auto; padding: 18px 18px 18px 0; } .cover-band .cover-art svg { position: static; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 1280 / 550; } .cover-band .cover-art img.thumb-art { position: static; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; } .checkpoint-cover img.thumb-art { object-fit: contain; } .cover-band.compact-band { min-height: 170px; } .surface-branch { grid-column: 1 / -1; display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; } .surface-kinds { display: flex; flex-wrap: wrap; gap: 8px; } .surface-kind { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font-size: 15px; line-height: 20px; } .surface-kind:hover { background: var(--hue-tint); } /* Hosted identity and focused lesson layout. Keep Google's rendered control intact. */ #google-slot { color-scheme: light; width: 100%; display: flex; justify-content: center; background: transparent; } #google-slot iframe { color-scheme: light; border-radius: 999px; } .lesson-heading { padding: 16px 0 20px; } .lesson-heading .watch-title { margin-top: 6px; color: var(--fg); text-transform: none; } .lesson-preview.card { padding: 0; border: 0; } .lesson-preview .preview-frame { overflow: hidden; } .channel { margin: 16px 0; } .channel-l #ask-agent { margin: 0; } .lesson-heading .lesson-kicker { display: inline-flex; align-items: center; gap: 8px; } .rail .graph-card.mini { display: none; } .rail .sheetcard { margin-top: 16px; } @media (max-width: 767px) { .lesson-heading { padding: 12px 0 16px; } .lesson-heading .watch-title { font-size: 28px; line-height: 34px; } .channel-l { gap: 10px; } .channel-l #ask-agent { min-height: 40px; } } /* BEGIN COMPILED KIT STYLES */ .kit-1a87a696 .bg{ fill: var(--bg); } .kit-1a87a696 .raised{ fill: var(--card); stroke: var(--line); stroke-width: var(--hair); } .kit-1a87a696 .inset{ fill: var(--hover); stroke: none; } .kit-1a87a696 .card{ fill: var(--card); stroke: var(--line); stroke-width: var(--hair); } .kit-1a87a696 .outline{ fill: none; stroke: var(--line); stroke-width: var(--hair); } .kit-1a87a696 .outline-fg{ fill: none; stroke: var(--fg); stroke-width: var(--hair); } .kit-1a87a696 .outline-acc{ fill: none; stroke: var(--accent); stroke-width: var(--hair); } .kit-1a87a696 .fill-fg{ fill: var(--fg); } .kit-1a87a696 .fill-acc{ fill: var(--accent); } .kit-1a87a696 .fill-bg{ fill: var(--bg); } .kit-1a87a696 .fill-amb{ fill: var(--amber); } .kit-1a87a696 .fill-red{ fill: var(--red); } .kit-1a87a696 .fill-tint{ fill: var(--accent-tint); } .kit-1a87a696 .tint-band{ fill: var(--accent-tint); } .kit-1a87a696 .h1{ color: var(--h1); } .kit-1a87a696 .h2{ color: var(--h2); } .kit-1a87a696 .h3{ color: var(--h3); } .kit-1a87a696 .h4{ color: var(--h4); } .kit-1a87a696 .h5{ color: var(--h5); } .kit-1a87a696 .st-accepted{ fill: var(--status-accepted); } .kit-1a87a696 .st-parked{ fill: var(--status-parked); } .kit-1a87a696 .st-blocked{ fill: var(--status-blocked); } .kit-1a87a696 .st-live{ fill: var(--status-live); } .kit-1a87a696 .glow{ fill: none; stroke: var(--glow); stroke-width: 10px; } .kit-1a87a696 .rule{ stroke: var(--line); stroke-width: var(--hair); fill: none; } .kit-1a87a696 .rule-acc{ stroke: var(--accent); stroke-width: var(--bar); fill: none; stroke-linecap: round; } .kit-1a87a696 .sh{ flood-color: var(--shadow); } .kit-1a87a696 .icon{ fill: none; stroke: var(--fg); stroke-width: var(--stroke-icon); stroke-linecap: round; stroke-linejoin: round; } .kit-1a87a696 .icon-dim{ stroke: var(--dim); } .kit-1a87a696 .icon-acc{ stroke: var(--accent); } .kit-1a87a696 .icon-soft{ stroke: var(--fg-soft); } .kit-1a87a696 .c-fg{ color: var(--fg); } .kit-1a87a696 .c-soft{ color: var(--fg-soft); } .kit-1a87a696 .c-dim{ color: var(--dim); } .kit-1a87a696 .c-faint{ color: var(--faint); } .kit-1a87a696 .c-acc{ color: var(--accent); } .kit-1a87a696 .c-amb{ color: var(--amber); } .kit-1a87a696 .c-red{ color: var(--red); } .kit-1a87a696 .shaft{ stroke: currentColor; fill: none; stroke-width: var(--hair); stroke-linecap: round; } .kit-1a87a696 .chev{ stroke: currentColor; fill: none; stroke-width: var(--hair); stroke-linecap: round; stroke-linejoin: round; } .kit-1a87a696 .dash{ stroke-dasharray: var(--dash); } .kit-1a87a696 .t-fg{ fill: var(--fg); } .kit-1a87a696 .t-soft{ fill: var(--fg-soft); } .kit-1a87a696 .t-dim{ fill: var(--dim); } .kit-1a87a696 .t-faint{ fill: var(--faint); } .kit-1a87a696 .t-acc{ fill: var(--accent-text, var(--accent)); } .kit-1a87a696 .t-amb{ fill: var(--amber); } .kit-1a87a696 .t-red{ fill: var(--red); } .kit-1a87a696 .t-ink{ fill: var(--accent-ink); } .kit-1a87a696 .large{ font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-large); letter-spacing: var(--track-large); } .kit-1a87a696 .title2{ font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-title2); letter-spacing: var(--track-title2); } .kit-1a87a696 .headline{ font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-headline); } .kit-1a87a696 .body{ font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); } .kit-1a87a696 .sub{ font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-sub); } .kit-1a87a696 .foot{ font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-foot); letter-spacing: var(--track-foot); text-transform: uppercase; } .kit-1a87a696 .caption{ font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-caption); } .kit-1a87a696 .num{ font-variant-numeric: tabular-nums; } .kit-1a87a696 .display{ font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display); letter-spacing: var(--track-display); } .kit-1a87a696 .mono{ font-family: var(--font-mono); font-weight: 300; font-size: var(--fs-sub); } .kit-1a87a696 .mid{ text-anchor: middle; } .kit-1a87a696 .end{ text-anchor: end; } .kit-1a87a696 .vmid{ dominant-baseline: central; } .kit-1a87a696 .sym *{ vector-effect: non-scaling-stroke; stroke: currentColor; stroke-width: var(--stroke-icon); fill: none; stroke-linecap: round; stroke-linejoin: round; } .kit-1a87a696 .sym .solid{ fill: currentColor; stroke: none; } .kit-1a87a696 .sym .dashed{ stroke-dasharray: 4 5; } .kit-1a87a696 .dith{ fill: var(--accent); fill-opacity: .06; } .kit-1a87a696 .live{ fill: var(--ember); } .kit-1a87a696 .ring{ fill: none; stroke: var(--accent); stroke-width: var(--stroke-icon); } .kit-1a87a696 .wordmark{ font-family: var(--font-wordmark); font-weight: 500; } .kit-1a87a696 .t-wordmark{ fill: #f4f1ea; } .kit-1a87a696 .strike{ text-decoration: line-through; } .kit-1a87a696 .t-ember{ fill: var(--ember); } .kit-727873cc .bg{ fill: var(--bg); } .kit-727873cc .raised{ fill: var(--card); stroke: var(--line); stroke-width: var(--hair); } .kit-727873cc .inset{ fill: var(--hover); stroke: none; } .kit-727873cc .card{ fill: var(--card); stroke: var(--line); stroke-width: var(--hair); } .kit-727873cc .outline{ fill: none; stroke: var(--line); stroke-width: var(--hair); } .kit-727873cc .outline-fg{ fill: none; stroke: var(--fg); stroke-width: var(--hair); } .kit-727873cc .outline-acc{ fill: none; stroke: var(--accent); stroke-width: var(--hair); } .kit-727873cc .fill-fg{ fill: var(--fg); } .kit-727873cc .fill-acc{ fill: var(--accent); } .kit-727873cc .fill-bg{ fill: var(--bg); } .kit-727873cc .fill-amb{ fill: var(--amber); } .kit-727873cc .fill-red{ fill: var(--red); } .kit-727873cc .fill-tint{ fill: var(--accent-tint); } .kit-727873cc .tint-band{ fill: var(--accent-tint); } .kit-727873cc .h1{ color: var(--h1); } .kit-727873cc .h2{ color: var(--h2); } .kit-727873cc .h3{ color: var(--h3); } .kit-727873cc .h4{ color: var(--h4); } .kit-727873cc .h5{ color: var(--h5); } .kit-727873cc .st-accepted{ fill: var(--status-accepted); } .kit-727873cc .st-parked{ fill: var(--status-parked); } .kit-727873cc .st-blocked{ fill: var(--status-blocked); } .kit-727873cc .st-live{ fill: var(--status-live); } .kit-727873cc .glow{ fill: none; stroke: var(--glow); stroke-width: 10px; } .kit-727873cc .rule{ stroke: var(--line); stroke-width: var(--hair); fill: none; } .kit-727873cc .rule-acc{ stroke: var(--accent); stroke-width: var(--bar); fill: none; stroke-linecap: round; } .kit-727873cc .sh{ flood-color: var(--shadow); } .kit-727873cc .icon{ fill: none; stroke: var(--fg); stroke-width: var(--stroke-icon); stroke-linecap: round; stroke-linejoin: round; } .kit-727873cc .icon-dim{ stroke: var(--dim); } .kit-727873cc .icon-acc{ stroke: var(--accent); } .kit-727873cc .icon-soft{ stroke: var(--fg-soft); } .kit-727873cc .c-fg{ color: var(--fg); } .kit-727873cc .c-soft{ color: var(--fg-soft); } .kit-727873cc .c-dim{ color: var(--dim); } .kit-727873cc .c-faint{ color: var(--faint); } .kit-727873cc .c-acc{ color: var(--accent); } .kit-727873cc .c-amb{ color: var(--amber); } .kit-727873cc .c-red{ color: var(--red); } .kit-727873cc .shaft{ stroke: currentColor; fill: none; stroke-width: var(--hair); stroke-linecap: round; } .kit-727873cc .chev{ stroke: currentColor; fill: none; stroke-width: var(--hair); stroke-linecap: round; stroke-linejoin: round; } .kit-727873cc .dash{ stroke-dasharray: var(--dash); } .kit-727873cc .t-fg{ fill: var(--fg); } .kit-727873cc .t-soft{ fill: var(--fg-soft); } .kit-727873cc .t-dim{ fill: var(--dim); } .kit-727873cc .t-faint{ fill: var(--faint); } .kit-727873cc .t-acc{ fill: var(--accent-text, var(--accent)); } .kit-727873cc .t-amb{ fill: var(--amber); } .kit-727873cc .t-red{ fill: var(--red); } .kit-727873cc .t-ink{ fill: var(--accent-ink); } .kit-727873cc .large{ font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-large); letter-spacing: var(--track-large); } .kit-727873cc .title2{ font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-title2); letter-spacing: var(--track-title2); } .kit-727873cc .headline{ font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-headline); } .kit-727873cc .body{ font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); } .kit-727873cc .sub{ font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-sub); } .kit-727873cc .foot{ font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-foot); letter-spacing: var(--track-foot); text-transform: uppercase; } .kit-727873cc .caption{ font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-caption); } .kit-727873cc .num{ font-variant-numeric: tabular-nums; } .kit-727873cc .display{ font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display); letter-spacing: var(--track-display); } .kit-727873cc .mono{ font-family: var(--font-mono); font-weight: 300; font-size: var(--fs-sub); } .kit-727873cc .mid{ text-anchor: middle; } .kit-727873cc .end{ text-anchor: end; } .kit-727873cc .vmid{ dominant-baseline: central; } .kit-727873cc .sym *{ vector-effect: non-scaling-stroke; stroke: currentColor; stroke-width: var(--stroke-icon); fill: none; stroke-linecap: round; stroke-linejoin: round; } .kit-727873cc .sym .solid{ fill: currentColor; stroke: none; } .kit-727873cc .sym .dashed{ stroke-dasharray: 4 5; } .kit-727873cc .dith{ fill: var(--accent); fill-opacity: .06; } .kit-727873cc .live{ fill: var(--ember); } .kit-727873cc .ring{ fill: none; stroke: var(--accent); stroke-width: var(--stroke-icon); } .kit-727873cc .wordmark{ font-family: var(--font-wordmark); font-weight: 500; } .kit-727873cc .t-wordmark{ fill: #f4f1ea; } .kit-727873cc .strike{ text-decoration: line-through; } .kit-727873cc .t-ember{ fill: var(--ember); } .kit-727873cc .edge{animation:kit-727873cc-draw 900ms var(--ease) forwards} @keyframes kit-727873cc-draw{to{stroke-dashoffset:0}} .kit-727873cc .node{opacity:0;animation:kit-727873cc-msgin 600ms var(--ease) forwards} @keyframes kit-727873cc-msgin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .kit-727873cc .zr{opacity:0;transform-box:fill-box;transform-origin:center;animation:kit-727873cc-zr 1.4s cubic-bezier(.25,.6,.3,1) 1 forwards} @keyframes kit-727873cc-zr{0%{transform:scale(.3);opacity:1;stroke:var(--fg)}60%{opacity:.9;stroke:var(--accent)}100%{transform:scale(2.6);opacity:0;stroke:var(--accent)}} .kit-727873cc .ev{opacity:0;animation:kit-727873cc-rowin 500ms var(--ease) forwards} @keyframes kit-727873cc-rowin{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}} .kit-727873cc .rulecard{opacity:0;animation:kit-727873cc-msgin 600ms var(--ease) forwards;animation-delay:1500ms} @media(prefers-reduced-motion:reduce){.kit-727873cc .edge,.kit-727873cc .node,.kit-727873cc .ev,.kit-727873cc .rulecard,.kit-727873cc .zr{animation:none;opacity:1;stroke-dashoffset:0}} .kit-ef1a9581 .bg{ fill: var(--bg); } .kit-ef1a9581 .raised{ fill: var(--card); stroke: var(--line); stroke-width: var(--hair); } .kit-ef1a9581 .inset{ fill: var(--hover); stroke: none; } .kit-ef1a9581 .card{ fill: var(--card); stroke: var(--line); stroke-width: var(--hair); } .kit-ef1a9581 .outline{ fill: none; stroke: var(--line); stroke-width: var(--hair); } .kit-ef1a9581 .outline-fg{ fill: none; stroke: var(--fg); stroke-width: var(--hair); } .kit-ef1a9581 .outline-acc{ fill: none; stroke: var(--accent); stroke-width: var(--hair); } .kit-ef1a9581 .fill-fg{ fill: var(--fg); } .kit-ef1a9581 .fill-acc{ fill: var(--accent); } .kit-ef1a9581 .fill-bg{ fill: var(--bg); } .kit-ef1a9581 .fill-amb{ fill: var(--amber); } .kit-ef1a9581 .fill-red{ fill: var(--red); } .kit-ef1a9581 .fill-tint{ fill: var(--accent-tint); } .kit-ef1a9581 .tint-band{ fill: var(--accent-tint); } .kit-ef1a9581 .h1{ color: var(--h1); } .kit-ef1a9581 .h2{ color: var(--h2); } .kit-ef1a9581 .h3{ color: var(--h3); } .kit-ef1a9581 .h4{ color: var(--h4); } .kit-ef1a9581 .h5{ color: var(--h5); } .kit-ef1a9581 .st-accepted{ fill: var(--status-accepted); } .kit-ef1a9581 .st-parked{ fill: var(--status-parked); } .kit-ef1a9581 .st-blocked{ fill: var(--status-blocked); } .kit-ef1a9581 .st-live{ fill: var(--status-live); } .kit-ef1a9581 .glow{ fill: none; stroke: var(--glow); stroke-width: 10px; } .kit-ef1a9581 .rule{ stroke: var(--line); stroke-width: var(--hair); fill: none; } .kit-ef1a9581 .rule-acc{ stroke: var(--accent); stroke-width: var(--bar); fill: none; stroke-linecap: round; } .kit-ef1a9581 .sh{ flood-color: var(--shadow); } .kit-ef1a9581 .icon{ fill: none; stroke: var(--fg); stroke-width: var(--stroke-icon); stroke-linecap: round; stroke-linejoin: round; } .kit-ef1a9581 .icon-dim{ stroke: var(--dim); } .kit-ef1a9581 .icon-acc{ stroke: var(--accent); } .kit-ef1a9581 .icon-soft{ stroke: var(--fg-soft); } .kit-ef1a9581 .c-fg{ color: var(--fg); } .kit-ef1a9581 .c-soft{ color: var(--fg-soft); } .kit-ef1a9581 .c-dim{ color: var(--dim); } .kit-ef1a9581 .c-faint{ color: var(--faint); } .kit-ef1a9581 .c-acc{ color: var(--accent); } .kit-ef1a9581 .c-amb{ color: var(--amber); } .kit-ef1a9581 .c-red{ color: var(--red); } .kit-ef1a9581 .shaft{ stroke: currentColor; fill: none; stroke-width: var(--hair); stroke-linecap: round; } .kit-ef1a9581 .chev{ stroke: currentColor; fill: none; stroke-width: var(--hair); stroke-linecap: round; stroke-linejoin: round; } .kit-ef1a9581 .dash{ stroke-dasharray: var(--dash); } .kit-ef1a9581 .t-fg{ fill: var(--fg); } .kit-ef1a9581 .t-soft{ fill: var(--fg-soft); } .kit-ef1a9581 .t-dim{ fill: var(--dim); } .kit-ef1a9581 .t-faint{ fill: var(--faint); } .kit-ef1a9581 .t-acc{ fill: var(--accent-text, var(--accent)); } .kit-ef1a9581 .t-amb{ fill: var(--amber); } .kit-ef1a9581 .t-red{ fill: var(--red); } .kit-ef1a9581 .t-ink{ fill: var(--accent-ink); } .kit-ef1a9581 .large{ font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-large); letter-spacing: var(--track-large); } .kit-ef1a9581 .title2{ font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-title2); letter-spacing: var(--track-title2); } .kit-ef1a9581 .headline{ font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-headline); } .kit-ef1a9581 .body{ font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); } .kit-ef1a9581 .sub{ font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-sub); } .kit-ef1a9581 .foot{ font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-foot); letter-spacing: var(--track-foot); text-transform: uppercase; } .kit-ef1a9581 .caption{ font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-caption); } .kit-ef1a9581 .num{ font-variant-numeric: tabular-nums; } .kit-ef1a9581 .display{ font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display); letter-spacing: var(--track-display); } .kit-ef1a9581 .mono{ font-family: var(--font-mono); font-weight: 300; font-size: var(--fs-sub); } .kit-ef1a9581 .mid{ text-anchor: middle; } .kit-ef1a9581 .end{ text-anchor: end; } .kit-ef1a9581 .vmid{ dominant-baseline: central; } .kit-ef1a9581 .sym *{ vector-effect: non-scaling-stroke; stroke: currentColor; stroke-width: var(--stroke-icon); fill: none; stroke-linecap: round; stroke-linejoin: round; } .kit-ef1a9581 .sym .solid{ fill: currentColor; stroke: none; } .kit-ef1a9581 .sym .dashed{ stroke-dasharray: 4 5; } .kit-ef1a9581 .dith{ fill: var(--accent); fill-opacity: .06; } .kit-ef1a9581 .live{ fill: var(--ember); } .kit-ef1a9581 .ring{ fill: none; stroke: var(--accent); stroke-width: var(--stroke-icon); } .kit-ef1a9581 .wordmark{ font-family: var(--font-wordmark); font-weight: 500; } .kit-ef1a9581 .t-wordmark{ fill: #f4f1ea; } .kit-ef1a9581 .strike{ text-decoration: line-through; } .kit-ef1a9581 .t-ember{ fill: var(--ember); } .kit-ef1a9581 .sym *{ stroke-width: var(--stroke-hero); } .kit-ef1a9581 .icon{ stroke-width: var(--stroke-hero); } .kit-ef1a9581 .lbl{ font-family: var(--font-sans); font-size: 34px; } .kit-ef1a9581 .live-dot{ animation: kit-ef1a9581-livepulse 2.4s ease-in-out infinite; } @keyframes kit-ef1a9581-livepulse{ 50% { opacity: .35; } } .kit-d715a32b .bg{ fill: var(--bg); } .kit-d715a32b .raised{ fill: var(--card); stroke: var(--line); stroke-width: var(--hair); } .kit-d715a32b .inset{ fill: var(--hover); stroke: none; } .kit-d715a32b .card{ fill: var(--card); stroke: var(--line); stroke-width: var(--hair); } .kit-d715a32b .outline{ fill: none; stroke: var(--line); stroke-width: var(--hair); } .kit-d715a32b .outline-fg{ fill: none; stroke: var(--fg); stroke-width: var(--hair); } .kit-d715a32b .outline-acc{ fill: none; stroke: var(--accent); stroke-width: var(--hair); } .kit-d715a32b .fill-fg{ fill: var(--fg); } .kit-d715a32b .fill-acc{ fill: var(--accent); } .kit-d715a32b .fill-bg{ fill: var(--bg); } .kit-d715a32b .fill-amb{ fill: var(--amber); } .kit-d715a32b .fill-red{ fill: var(--red); } .kit-d715a32b .fill-tint{ fill: var(--accent-tint); } .kit-d715a32b .tint-band{ fill: var(--accent-tint); } .kit-d715a32b .h1{ color: var(--h1); } .kit-d715a32b .h2{ color: var(--h2); } .kit-d715a32b .h3{ color: var(--h3); } .kit-d715a32b .h4{ color: var(--h4); } .kit-d715a32b .h5{ color: var(--h5); } .kit-d715a32b .st-accepted{ fill: var(--status-accepted); } .kit-d715a32b .st-parked{ fill: var(--status-parked); } .kit-d715a32b .st-blocked{ fill: var(--status-blocked); } .kit-d715a32b .st-live{ fill: var(--status-live); } .kit-d715a32b .glow{ fill: none; stroke: var(--glow); stroke-width: 10px; } .kit-d715a32b .rule{ stroke: var(--line); stroke-width: var(--hair); fill: none; } .kit-d715a32b .rule-acc{ stroke: var(--accent); stroke-width: var(--bar); fill: none; stroke-linecap: round; } .kit-d715a32b .sh{ flood-color: var(--shadow); } .kit-d715a32b .icon{ fill: none; stroke: var(--fg); stroke-width: var(--stroke-icon); stroke-linecap: round; stroke-linejoin: round; } .kit-d715a32b .icon-dim{ stroke: var(--dim); } .kit-d715a32b .icon-acc{ stroke: var(--accent); } .kit-d715a32b .icon-soft{ stroke: var(--fg-soft); } .kit-d715a32b .c-fg{ color: var(--fg); } .kit-d715a32b .c-soft{ color: var(--fg-soft); } .kit-d715a32b .c-dim{ color: var(--dim); } .kit-d715a32b .c-faint{ color: var(--faint); } .kit-d715a32b .c-acc{ color: var(--accent); } .kit-d715a32b .c-amb{ color: var(--amber); } .kit-d715a32b .c-red{ color: var(--red); } .kit-d715a32b .shaft{ stroke: currentColor; fill: none; stroke-width: var(--hair); stroke-linecap: round; } .kit-d715a32b .chev{ stroke: currentColor; fill: none; stroke-width: var(--hair); stroke-linecap: round; stroke-linejoin: round; } .kit-d715a32b .dash{ stroke-dasharray: var(--dash); } .kit-d715a32b .t-fg{ fill: var(--fg); } .kit-d715a32b .t-soft{ fill: var(--fg-soft); } .kit-d715a32b .t-dim{ fill: var(--dim); } .kit-d715a32b .t-faint{ fill: var(--faint); } .kit-d715a32b .t-acc{ fill: var(--accent-text, var(--accent)); } .kit-d715a32b .t-amb{ fill: var(--amber); } .kit-d715a32b .t-red{ fill: var(--red); } .kit-d715a32b .t-ink{ fill: var(--accent-ink); } .kit-d715a32b .large{ font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-large); letter-spacing: var(--track-large); } .kit-d715a32b .title2{ font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-title2); letter-spacing: var(--track-title2); } .kit-d715a32b .headline{ font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-headline); } .kit-d715a32b .body{ font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); } .kit-d715a32b .sub{ font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-sub); } .kit-d715a32b .foot{ font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-foot); letter-spacing: var(--track-foot); text-transform: uppercase; } .kit-d715a32b .caption{ font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-caption); } .kit-d715a32b .num{ font-variant-numeric: tabular-nums; } .kit-d715a32b .display{ font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display); letter-spacing: var(--track-display); } .kit-d715a32b .mono{ font-family: var(--font-mono); font-weight: 300; font-size: var(--fs-sub); } .kit-d715a32b .mid{ text-anchor: middle; } .kit-d715a32b .end{ text-anchor: end; } .kit-d715a32b .vmid{ dominant-baseline: central; } .kit-d715a32b .sym *{ vector-effect: non-scaling-stroke; stroke: currentColor; stroke-width: var(--stroke-icon); fill: none; stroke-linecap: round; stroke-linejoin: round; } .kit-d715a32b .sym .solid{ fill: currentColor; stroke: none; } .kit-d715a32b .sym .dashed{ stroke-dasharray: 4 5; } .kit-d715a32b .dith{ fill: var(--accent); fill-opacity: .06; } .kit-d715a32b .live{ fill: var(--ember); } .kit-d715a32b .ring{ fill: none; stroke: var(--accent); stroke-width: var(--stroke-icon); } .kit-d715a32b .wordmark{ font-family: var(--font-wordmark); font-weight: 500; } .kit-d715a32b .t-wordmark{ fill: #f4f1ea; } .kit-d715a32b .strike{ text-decoration: line-through; } .kit-d715a32b .t-ember{ fill: var(--ember); } .kit-d715a32b .sym *{ stroke-width: var(--stroke-hero); } .kit-d715a32b .icon{ stroke-width: var(--stroke-hero); } .kit-d715a32b .lbl{ font-family: var(--font-sans); font-size: 34px; } .kit-d715a32b .live-dot{ animation: kit-d715a32b-livepulse 2.4s ease-in-out infinite; } @keyframes kit-d715a32b-livepulse{ 50% { opacity: .35; } } .kit-d715a32b .edge{animation:kit-d715a32b-draw 900ms var(--ease) forwards} @keyframes kit-d715a32b-draw{to{stroke-dashoffset:0}} .kit-d715a32b .node{opacity:0;animation:kit-d715a32b-msgin 600ms var(--ease) forwards} @keyframes kit-d715a32b-msgin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .kit-d715a32b .zr{opacity:0;transform-box:fill-box;transform-origin:center;animation:kit-d715a32b-zr 1.4s cubic-bezier(.25,.6,.3,1) 1 forwards} @keyframes kit-d715a32b-zr{0%{transform:scale(.3);opacity:1;stroke:var(--fg)}60%{opacity:.9;stroke:var(--accent)}100%{transform:scale(2.6);opacity:0;stroke:var(--accent)}} .kit-d715a32b .ev{opacity:0;animation:kit-d715a32b-rowin 500ms var(--ease) forwards} @keyframes kit-d715a32b-rowin{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}} .kit-d715a32b .rulecard{opacity:0;animation:kit-d715a32b-msgin 600ms var(--ease) forwards;animation-delay:1500ms} @media(prefers-reduced-motion:reduce){.kit-d715a32b .edge,.kit-d715a32b .node,.kit-d715a32b .ev,.kit-d715a32b .rulecard,.kit-d715a32b .zr{animation:none;opacity:1;stroke-dashoffset:0}} .kit-8444f1cd .st0{fill:none} .kit-4c62c368{stroke:var(--h1);stroke-width:8px;opacity:.3;} .kit-93b0da1a{stroke:var(--h1);stroke-width:2px;opacity:0.7;} .kit-bd6d91e1{stroke:var(--h2);stroke-width:8px;opacity:.3;} .kit-7475eadd{stroke:var(--h2);stroke-width:2px;opacity:0.7;} .kit-7094916{stroke:var(--h3);stroke-width:8px;opacity:.3;} .kit-8edf2380{stroke:var(--h3);stroke-width:2px;opacity:0.7;} .kit-72eb9837{stroke:var(--h4);stroke-width:8px;opacity:.3;} .kit-dca273b{stroke:var(--h4);stroke-width:2px;opacity:0.7;} .kit-91c2a8f4{stroke:var(--h5);stroke-width:8px;opacity:.3;} .kit-6bd6fc76{stroke:var(--h5);stroke-width:2px;opacity:0.7;} .kit-387221c8{animation-delay:300ms} .kit-1fc033b1{fill:none;stroke:var(--h1);stroke-width:2px;opacity:1} .kit-9fd261fb{animation-delay:600ms} .kit-b6e9f41c{font-size:44px} .kit-1c357a17{font-size:30px} .kit-f7dede33{animation-delay:420ms} .kit-23056d54{fill:none;stroke:var(--h2);stroke-width:2px;opacity:1} .kit-914ecd82{animation-delay:720ms} .kit-b8384ca2{animation-delay:540ms} .kit-996161c7{fill:none;stroke:var(--h3);stroke-width:2px;opacity:1} .kit-c84b5bed{animation-delay:840ms} .kit-da6976e1{animation-delay:660ms} .kit-19d64982{fill:none;stroke:var(--h4);stroke-width:2px;opacity:1} .kit-61db4738{animation-delay:960ms} .kit-aee528fc{animation-delay:780ms} .kit-8a63f7b5{fill:none;stroke:var(--h5);stroke-width:2px;opacity:1} .kit-4b71ba36{animation-delay:1080ms} .kit-1eee02ee{font-size:28px} .kit-85d49bb6{font-size:20px} .kit-ff295b16{stroke:var(--h1);stroke-width:2px;opacity:0.25;} .kit-6cd90a23{stroke:var(--h2);stroke-width:2px;opacity:0.25;} .kit-767d841d{stroke:var(--h4);stroke-width:2px;opacity:0.25;} .kit-d7416bea{stroke:var(--h5);stroke-width:2px;opacity:0.25;} .kit-cd1f952c{fill:none;stroke:var(--h1);stroke-width:2px;opacity:0.4} .kit-498278d{fill:none;stroke:var(--h2);stroke-width:2px;opacity:0.4} .kit-19dfc7e8{fill:none;stroke:var(--h3);stroke-width:3px;opacity:1} .kit-6e34e64f{fill:none;stroke:var(--h4);stroke-width:2px;opacity:0.4} .kit-9d598370{fill:none;stroke:var(--h5);stroke-width:2px;opacity:0.4} .kit-443ff0a7{stroke:var(--h1);stroke-width:8px;opacity:.3;stroke-dasharray:374;stroke-dashoffset:374;animation-delay:0ms;} .kit-b05e2c59{stroke:var(--h1);stroke-width:2px;opacity:0.25;stroke-dasharray:374;stroke-dashoffset:374;animation-delay:0ms;} .kit-3d7c26cf{stroke:var(--h2);stroke-width:8px;opacity:.3;stroke-dasharray:256;stroke-dashoffset:256;animation-delay:120ms;} .kit-cfde6761{stroke:var(--h2);stroke-width:2px;opacity:0.25;stroke-dasharray:256;stroke-dashoffset:256;animation-delay:120ms;} .kit-28efacef{stroke:var(--h3);stroke-width:8px;opacity:.3;stroke-dasharray:202;stroke-dashoffset:202;animation-delay:240ms;} .kit-a25eae39{stroke:var(--h3);stroke-width:2px;opacity:0.7;stroke-dasharray:202;stroke-dashoffset:202;animation-delay:240ms;} .kit-770265ab{stroke:var(--h4);stroke-width:8px;opacity:.3;stroke-dasharray:256;stroke-dashoffset:256;animation-delay:360ms;} .kit-dab391ad{stroke:var(--h4);stroke-width:2px;opacity:0.25;stroke-dasharray:256;stroke-dashoffset:256;animation-delay:360ms;} .kit-b1e5d9df{stroke:var(--h5);stroke-width:8px;opacity:.3;stroke-dasharray:374;stroke-dashoffset:374;animation-delay:480ms;} .kit-d6291891{stroke:var(--h5);stroke-width:2px;opacity:0.25;stroke-dasharray:374;stroke-dashoffset:374;animation-delay:480ms;} .kit-573c7b2c{fill:none;stroke:var(--h3);stroke-width:2px;animation-delay:1200ms} .kit-b4f2362c{fill:none;stroke:var(--h3);stroke-width:2px;animation-delay:1550ms} .kit-efa2ed3d{fill:none;stroke:var(--h3);stroke-width:2px;animation-delay:1900ms} .kit-7c247eea{fill:none;stroke:var(--h3);stroke-width:2px;animation-delay:2250ms} .kit-498852d9{animation-delay:0ms} .kit-fcbbb73d{animation-delay:260ms} .kit-c0b52510{animation-delay:520ms} .kit-d24d5699{stroke:var(--fg);stroke-width:1px;opacity:.04} .kit-41e84913{stop-color:var(--accent);stop-opacity:.09} .kit-32a13362{stop-color:var(--accent);stop-opacity:0} .kit-7b43849{fill-opacity:1} .kit-6eedb136{opacity:.35} .kit-f964140d{font-size:32px} .kit-67ebb54d{font-size:64px;letter-spacing:-1.6px} .kit-4a32345f{font-size:96px;letter-spacing:-2.4px} .kit-5fabfc0b{font-size:34px} .kit-114f77d2{font-size:88px;letter-spacing:-2.2px} .kit-425e19c2{font-size:24px} .kit-d8c74523{font-size:16px} .kit-d722bd7f{opacity:1} .kit-5697ca8e{opacity:0.35} .kit-e4abc04f{animation-delay:200ms} .kit-924a5dd7{animation-delay:640ms} .kit-5e4f7843{animation-delay:860ms} .kit-5d4dfc39{clip-path:url(#clippath)} .kit-ecb10b2f{clip-path:url(#clippath-1)} .kit-38a7acdf{fill:url(#radial-gradient)} .kit-eda68451{text-align:center} .kit-63c72fd4{text-align:center;margin-top:8px} .kit-1a6b4fe3{text-align:center;margin-top:16px} .kit-60e022ac{padding:8px 0} .kit-e61fa232{max-width:70ch} .kit-1ce7168a{padding-left:4px} .kit-b2a944f9{min-height:136px} .kit-93847cc9{min-height:150px} .kit-fca57b62{color:var(--blocked-text)} .kit-3b6261e8{padding:0 4px 8px} .kit-2740acf{padding:16px 4px 8px} .kit-66785aa8{width:0%} .kit-4a75effd{width:1%} .kit-da730116{width:2%} .kit-b67089d3{width:3%} .kit-d66e7d9c{width:4%} .kit-6a6b9501{width:5%} .kit-4a69240a{width:6%} .kit-66671187{width:7%} .kit-36648760{width:8%} .kit-da61b7f5{width:9%} .kit-f3c43b71{width:10%} .kit-dfc65a8c{width:11%} .kit-6fbeee77{width:12%} .kit-93c165ba{width:13%} .kit-93ce31ad{width:14%} .kit-6fd03798{width:15%} .kit-ffc8cb83{width:16%} .kit-63cba786{width:17%} .kit-83b00369{width:18%} .kit-efb2ec04{width:19%} .kit-71ef9da0{width:20%} .kit-15ecce35{width:21%} .kit-25eaa8ce{width:22%} .kit-1e8318b{width:23%} .kit-a1e55bd4{width:24%} .kit-75e2d7f9{width:25%} .kit-95e0cbc2{width:26%} .kit-71de547f{width:27%} .kit-a20370e8{width:28%} .kit-8601063d{width:29%} .kit-b557d5db{width:30%} .kit-195ab1de{width:31%} .kit-95cd745{width:32%} .kit-255f41f0{width:33%} .kit-254df8cf{width:34%} .kit-8950d4d2{width:35%} .kit-a95345c9{width:36%} .kit-955564e4{width:37%} .kit-256c0de3{width:38%} .kit-96e2066{width:39%} .kit-3cc07922{width:40%} .kit-18be01df{width:41%} .kit-c8c5d2b4{width:42%} .kit-9cc34ed9{width:43%} .kit-ccca562e{width:44%} .kit-a8c7deeb{width:45%} .kit-18cf4b00{width:46%} .kit-3ccd4515{width:47%} .kit-acd4b12a{width:48%} .kit-48d1d527{width:49%} .kit-bf3b937d{width:50%} .kit-db3dfe28{width:51%} .kit-2b362d53{width:52%} .kit-4f38a496{width:53%} .kit-df313881{width:54%} .kit-4b34211c{width:55%} .kit-db2cb507{width:56%} .kit-bf2ec78a{width:57%} .kit-4f275b75{width:58%} .kit-ab2a2ae0{width:59%} .kit-3ea42a2c{width:60%} .kit-d2a14191{width:61%} .kit-f29f355a{width:62%} .kit-ce9cbe17{width:63%} .kit-ceae0738{width:64%} .kit-72ab37cd{width:65%} .kit-42a8ada6{width:66%} .kit-5ea69b23{width:67%} .kit-ce8ff224{width:68%} .kit-e28dd309{width:69%} .kit-820c6267{width:70%} .kit-e60f3e6a{width:71%} .kit-611af61{width:72%} .kit-f213ce7c{width:73%} .kit-5216a433{width:74%} .kit-76191b76{width:75%} .kit-661b40dd{width:76%} .kit-821dab88{width:77%} .kit-51f88f1f{width:78%} .kit-75fb0662{width:79%} .kit-f974ec7e{width:80%} .kit-1572d9fb{width:81%} .kit-857a4610{width:82%} .kit-6977db65{width:83%} .kit-696b0f72{width:84%} .kit-8568fcef{width:85%} .kit-f5706904{width:86%} .kit-896d8069{width:87%} .kit-69892486{width:88%} .kit-5864883{width:89%} .kit-7ba054f9{width:90%} .kit-a7a2d8d4{width:91%} .kit-779bd17f{width:92%} .kit-9b9e48c2{width:93%} .kit-1baa4b35{width:94%} .kit-77ad1aa0{width:95%} .kit-7a5ae8b{width:96%} .kit-2ba825ce{width:97%} .kit-abb42841{width:98%} .kit-17b710dc{width:99%} .kit-2618e2ed{width:100%} .kit-8b5367d7{height:0%} .kit-af55df1a{height:1%} .kit-8f57eb51{height:2%} .kit-fb5ad3ec{height:3%} .kit-1b5d44e3{height:4%} .kit-ff5f5766{height:5%} .kit-2f61e18d{height:6%} .kit-8b64b0f8{height:7%} .kit-1b3f2fcf{height:8%} .kit-7f420bd2{height:9%} .kit-2efef27c{height:10%} .kit-42fcd361{height:11%} .kit-22fa626a{height:12%} .kit-bef78667{height:13%} .kit-bf08cf88{height:14%} .kit-a30664dd{height:15%} .kit-b3043f76{height:16%} .kit-8f01c833{height:17%} .kit-3eeb83f4{height:18%} .kit-12e90019{height:19%} .kit-af965bcd{height:20%} .kit-b992b38{height:21%} .kit-9b91bf23{height:22%} .kit-7f93d1a6{height:23%} .kit-f8c6591{height:24%} .kit-7b8f4e2c{height:25%} .kit-b87e217{height:26%} .kit-2f8a595a{height:27%} .kit-7f828885{height:28%} .kit-9b84f330{height:29%} .kit-6d1ba632{height:30%} .kit-891993af{height:31%} .kit-f920ffc4{height:32%} .kit-8d1e1729{height:33%} .kit-fd25833e{height:34%} .kit-192370bb{height:35%} .kit-892adcd0{height:36%} .kit-6d287225{height:37%} .kit-9d2f797a{height:38%} .kit-792d0237{height:39%} .kit-e5b302eb{height:40%} .kit-9b57a2e{height:41%} .kit-79b86915{height:42%} .kit-55ba6f00{height:43%} .kit-55a925df{height:44%} .kit-79ab9d22{height:45%} .kit-d9ae72d9{height:46%} .kit-5b0f6b4{height:47%} .kit-55c73af3{height:48%} .kit-79c9b236{height:49%} .kit-624a65f0{height:50%} .kit-4647fb45{height:51%} .kit-5645d5de{height:52%} .kit-f242f9db{height:53%} .kit-d24088e4{height:54%} .kit-e63e69c9{height:55%} .kit-c63bf8d2{height:56%} .kit-62391ccf{height:57%} .kit-d25e9df8{height:58%} .kit-765bce8d{height:59%} .kit-e2e1cf41{height:60%} .kit-4ee4b7dc{height:61%} .kit-dedd4bc7{height:62%} .kit-c2df5e4a{height:63%} .kit-c2ec2a3d{height:64%} .kit-deee94e8{height:65%} .kit-2ee6c413{height:66%} .kit-52e93b56{height:67%} .kit-b2cdfbf9{height:68%} .kit-ded07fd4{height:69%} .kit-a0b6cb86{height:70%} .kit-3cb3ef83{height:71%} .kit-acbb5b98{height:72%} .kit-d0b955ad{height:73%} .kit-d0ac89ba{height:74%} .kit-acaa1277{height:75%} .kit-1cb17e8c{height:76%} .kit-30af5f71{height:77%} .kit-30a2937e{height:78%} .kit-4ca080fb{height:79%} .kit-ba44727f{height:80%} .kit-de46e9c2{height:81%} .kit-be48f5f9{height:82%} .kit-ea4b79d4{height:83%} .kit-4a4e4f8b{height:84%} .kit-6e50c6ce{height:85%} .kit-5e52ec35{height:86%} .kit-ba55bba0{height:87%} .kit-ea5845c7{height:88%} .kit-ce5a584a{height:89%} .kit-38190a04{height:90%} .kit-cc162169{height:91%} .kit-ac13b072{height:92%} .kit-c8119def{height:93%} .kit-c822e710{height:94%} .kit-ac207c65{height:95%} .kit-3c1d8d7e{height:96%} .kit-581b7afb{height:97%} .kit-282c788c{height:98%} .kit-3c2a5971{height:99%} .kit-c828da82{height:100%} .kit-39802858{--i:0} .kit-3a8029eb{--i:1} .kit-3b802b7e{--i:2} .kit-3c802d11{--i:3} .kit-3d802ea4{--i:4} .kit-3e803037{--i:5} .kit-3f8031ca{--i:6} .kit-4080335d{--i:7} .kit-31801bc0{--i:8} .kit-32801d53{--i:9} .kit-f2c1e3c1{--i:10} .kit-f1c1e22e{--i:11} .kit-f0c1e09b{--i:12} .kit-efc1df08{--i:13} .kit-f6c1ea0d{--i:14} .kit-f5c1e87a{--i:15} .kit-f4c1e6e7{--i:16} .kit-f3c1e554{--i:17} .kit-eac1d729{--i:18} .kit-e9c1d596{--i:19} .kit-f8c42bca{--i:20} .kit-f9c42d5d{--i:21} .kit-f6c428a4{--i:22} .kit-f7c42a37{--i:23} .kit-f4c4257e{--i:24} .kit-f5c42711{--i:25} .kit-f2c42258{--i:26} .kit-f3c423eb{--i:27} .kit-f0c41f32{--i:28} .kit-f1c420c5{--i:29} .kit-dce02228{--hero-w:1280px;--hero-h:540px;--art-shift:512px} .kit-cd2a22c0{--hero-w:720px;--hero-h:360px;--art-shift:288px} .kit-b65c503d{--hero-w:540px;--hero-h:540px;--art-shift:540px} .kit-4af16f28{--hero-w:540px;--hero-h:675px;--art-shift:540px} /* END COMPILED KIT STYLES */ .player video { display:block; width:100%; height:100%; object-fit:contain; } /* Current curriculum: complete text and compact task controls. */ .lesson-prose .body{max-width:72ch;white-space:pre-wrap;overflow-wrap:anywhere} .lesson-prose .body+.body{margin-top:1.15em} .course-filter{margin:20px 0;gap:12px;align-items:center} .course-filter select{width:auto;max-width:100%;min-height:44px} /* Academy modules: one editorial frame, subject-led artwork, quiet lesson lists. */ .module-eyebrow { display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--dim); font:12px/1.5 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; } .course-intro { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr); gap:48px; padding:32px 0 48px; border-bottom:1px solid var(--line); align-items:center; } .course-intro h1 { font:300 clamp(38px,4.8vw,72px)/1.05 var(--font-display); letter-spacing:-.045em; max-width:12ch; margin:24px 0; } .course-lead { font-size:22px; line-height:1.4; max-width:32ch; } .course-description { color:var(--dim); font-size:16px; line-height:1.6; max-width:44ch; margin:16px 0 26px; } .course-intro-note { padding:28px; background:var(--card); border-top:2px solid var(--accent); } .course-note-title { font:300 28px/1.2 var(--font-display); letter-spacing:-.025em; } .course-intro-note ol { list-style:none; counter-reset:questions; padding:0; margin:24px 0; } .course-intro-note li { counter-increment:questions; border-top:1px solid var(--line); } .course-intro-note li a { display:flex; align-items:center; gap:12px; min-height:48px; font-size:16px; } .course-intro-note li a::before { content:counter(questions,decimal-leading-zero); color:var(--dim); font:11px var(--font-mono); } .course-intro-note li svg { margin-left:auto; } .course-intro-note p { color:var(--dim); font-size:13px; line-height:1.6; } .section-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:40px 0 20px; } .section-intro h2 { font:300 clamp(24px,2.5vw,34px)/1.2 var(--font-display); letter-spacing:-.025em; } .section-intro .module-eyebrow { margin-bottom:8px; } .section-intro > span { color:var(--dim); font-size:13px; padding-bottom:3px; } .module-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 24px; } .module-card { display:block; min-width:0; border:1px solid var(--line); border-radius:16px; background:var(--card); overflow:clip; transition:border-color .18s var(--ease); } .module-card:hover { border-color:var(--dim); } .module-card-art,.module-hero-art { color:var(--accent); background:var(--module-field,#191a1a); --module-accent:#b69a80; } .module-card-art { aspect-ratio:16/8; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line); } .module-card-art svg { display:block; width:100%; height:100%; max-height:270px; } .module-card-copy { padding:22px 24px 20px; } .module-card h3 { font:300 clamp(23px,2.2vw,30px)/1.2 var(--font-display); letter-spacing:-.025em; margin:12px 0; } .module-card p { color:var(--dim); font-size:16px; line-height:1.5; } .module-card-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; font-size:13px; } .module-setup { --module-field:#1c1b19; } .module-p0 { --module-field:#201b19; } .module-p1 { --module-field:#1a1e1b; } .module-p3 { --module-field:#191d20; } .module-p4 { --module-field:#1c1b20; } .module-p5 { --module-field:#1b1f1c; } .module-reveal { --module-field:#221d17; } .module-p7 { --module-field:#1b1e20; } .module-p2 { --module-field:#1d1b19; } .module-p6 { --module-field:#201b20; } .module-p1 .module-card-art,.module-p1 .module-hero-art,.module-p5 .module-card-art,.module-p5 .module-hero-art { --module-accent:#a6b69a; } .module-p3 .module-card-art,.module-p3 .module-hero-art,.module-p7 .module-card-art,.module-p7 .module-hero-art { --module-accent:#9faebc; } .extra-intro { margin-top:64px; border-top:1px solid var(--line); padding-top:36px; } .module-extra .module-card-art { aspect-ratio:16/6; } .module-breadcrumb { display:flex; align-items:center; gap:20px; min-height:48px; margin:0 0 16px; color:var(--dim); font-size:14px; } .module-breadcrumb a { display:flex; align-items:center; gap:8px; min-height:44px; } .module-breadcrumb > span { border-left:1px solid var(--line); padding-left:20px; } .module-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"heading media" "summary media"; gap:0 32px; align-items:start; padding:16px 0 40px; border-bottom:1px solid var(--line); } .module-hero-heading { grid-area:heading; min-width:0; } .module-hero-copy { grid-area:summary; min-width:0; } .module-hero > .academy-video { grid-area:media; align-self:center; } .module-hero h1 { font:300 clamp(34px,4vw,56px)/1.08 var(--font-display); letter-spacing:-.04em; margin:22px 0; } .module-hero-copy > p { font-size:18px; line-height:1.6; color:var(--dim); max-width:48ch; margin-bottom:26px; } .module-hero-art { min-width:0; border-radius:12px; aspect-ratio:8/5; display:grid; place-items:center; } .module-hero-art svg { display:block; width:100%; height:auto; } .lesson-group { margin:0 0 32px; } .lesson-group-heading { font:500 16px/1.5 var(--font-sans); color:var(--dim); margin:28px 0 12px; } .lesson-list { border-top:1px solid var(--line); } .lesson-row { display:grid; grid-template-columns:36px minmax(0,1fr) 24px; align-items:start; gap:16px; padding:22px 8px; border-bottom:1px solid var(--line); min-width:0; transition:background .18s var(--ease); } .lesson-row:hover { background:var(--hover); } .lesson-sequence { color:var(--dim); font:13px/1.8 var(--font-mono); padding-top:2px; } .lesson-row-copy { display:block; min-width:0; } .lesson-row-title { display:block; font-size:20px; line-height:1.35; font-weight:500; } .lesson-row-summary { display:block; font-size:16px; line-height:1.55; color:var(--dim); margin-top:7px; max-width:72ch; } .lesson-row-meta { display:block; margin-top:9px; color:var(--dim); font-size:12px; line-height:1.5; } .lesson-row-arrow { padding-top:5px; } .lesson-row.compact { grid-template-columns:24px minmax(0,1fr) 18px; gap:10px; padding:16px 4px; } .lesson-row.compact .lesson-row-title { font-size:16px; } .lesson-row.compact .lesson-sequence { font-size:11px; } .upnext-current { padding:18px 4px; border-bottom:1px solid var(--line); } .upnext-current > span { display:block; color:var(--dim); font-size:12px; margin-bottom:7px; } .upnext-current strong { font-size:17px; font-weight:500; } .module-footer { display:flex; align-items:center; justify-content:space-between; gap:28px; border-top:1px solid var(--line); padding:28px 0; margin-top:20px; } .next-module { display:grid; grid-template-columns:minmax(0,1fr) 24px; gap:5px 12px; max-width:55%; min-height:48px; } .next-module span { font-size:12px; color:var(--dim); } .next-module strong { grid-column:1; font-size:17px; font-weight:500; } .next-module svg { grid-column:2; grid-row:1/3; align-self:center; } .course-checkpoints { margin-top:48px; padding:32px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } .course-checkpoints > div { grid-column:1/-1; } .course-checkpoints h2 { font:300 28px/1.3 var(--font-display); margin-top:8px; } .course-checkpoints a { display:grid; grid-template-columns:minmax(0,1fr) 24px; gap:8px 12px; min-height:80px; } .course-checkpoints a span { color:var(--dim); font-size:13px; } .course-checkpoints a strong { font-size:18px; line-height:1.4; font-weight:500; grid-column:1; } .course-checkpoints a svg { grid-column:2; grid-row:1/3; align-self:center; } .filtered-module { margin-top:32px; } .filtered-module h2 { font:300 26px/1.3 var(--font-display); margin-bottom:16px; } .sidebar .module-side-number { font:11px var(--font-mono); color:var(--dim); width:22px; flex:0 0 22px; } .sidebar .side-item[aria-current="page"] { background:var(--hover); color:var(--ink); } .module-card:focus-visible,.lesson-row:focus-visible,.next-module:focus-visible { outline:2px solid var(--accent); outline-offset:4px; } .course-filter { margin:32px 0 8px; display:flex; align-items:center; gap:16px; font-size:14px; } .course-filter select { max-width:240px; } :root[data-theme="light"] .module-card-art,:root[data-theme="light"] .module-hero-art { color:#30312e; background:#e9e6df; --module-accent:#846044; } :root[data-theme="light"] .course-intro-note { background:var(--card); } @media(max-width:1100px) { .course-intro { gap:24px; grid-template-columns:minmax(0,1fr) minmax(240px,.75fr); } .module-hero { column-gap:24px; } .module-card-copy { padding:18px; } } @media(max-width:767px) { .course-intro { grid-template-columns:1fr; padding:24px 0 28px; gap:28px; } .course-intro h1 { font-size:48px; margin:20px 0; } .course-lead { font-size:21px; } .course-intro-note { padding:20px; } .course-note-title { font-size:24px; } .course-intro-note ol { margin:16px 0; } .module-grid { grid-template-columns:1fr; gap:24px; } .module-card-art { aspect-ratio:16/8; } .module-card h3 { font-size:28px; } .module-card-copy { padding:20px; } .section-intro { margin:30px 0 16px; align-items:flex-start; } .section-intro > span { font-size:12px; max-width:90px; text-align:right; } .module-hero { grid-template-columns:1fr; grid-template-areas:"heading" "media" "summary"; gap:24px; padding-top:0; padding-bottom:28px; } .module-hero h1 { font-size:42px; margin:16px 0 0; } .module-hero-copy > p { font-size:17px; } .module-eyebrow { font-size:11px; } .module-footer { flex-direction:column; align-items:stretch; } .next-module { max-width:none; padding-top:16px; } .lesson-row { grid-template-columns:24px minmax(0,1fr) 18px; gap:12px; padding:20px 0; } .lesson-row-title { font-size:19px; } .lesson-row-summary { font-size:15px; } .course-checkpoints { grid-template-columns:1fr; gap:20px; } .extra-intro { margin-top:40px; } .course-filter { margin-bottom:16px; } } @media(prefers-reduced-motion:reduce) { .module-card,.lesson-row { transition:none; } } /* A recording slot stays visible before publication. No placeholder pretends to play. */ .academy-video { position:relative; aspect-ratio:16/9; width:100%; min-width:0; border-radius:12px; background:var(--module-field,var(--card)); overflow:clip; margin-bottom:24px; } .academy-video iframe,.academy-video video { width:100%; height:100%; position:absolute; inset:0; border:0; } .video-placeholder { position:absolute; inset:0; display:flex; align-items:flex-end; padding:24px; } .video-poster-art { position:absolute; inset:0; display:flex; justify-content:flex-end; color:var(--accent); opacity:.22; } .video-poster-art svg { width:65%; height:100%; } .video-placeholder-copy { position:relative; max-width:75%; padding:12px 16px; background:var(--bg); border-left:2px solid var(--accent); } .video-placeholder-copy > span { font:11px/1.5 var(--font-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--dim); } .video-placeholder-copy strong { display:block; font:300 clamp(20px,2.3vw,34px)/1.2 var(--font-display); margin:8px 0; } .video-placeholder-copy p { color:var(--dim); font-size:13px; } .module-hero .academy-video { margin:0; aspect-ratio:auto; } .module-hero .academy-video.has-recording { aspect-ratio:16/9; } .module-hero .video-placeholder { position:relative; display:block; padding:0; } .module-hero .video-poster-art { position:static; opacity:1; align-items:center; aspect-ratio:8/5; } .module-hero .video-poster-art svg { width:100%; height:auto; align-self:center; } .module-hero .video-placeholder-copy { max-width:none; padding:12px 16px; border-left:0; border-top:1px solid var(--line); background:var(--card); } .module-hero .video-placeholder-copy strong { display:none; } .module-hero .video-placeholder-copy > span { font-size:10px; } .module-hero .video-placeholder-copy p { font-size:11px; } @media(max-width:767px) { .video-placeholder { padding:14px; } .video-placeholder-copy { max-width:90%; padding:8px 12px; } .video-placeholder-copy strong { font-size:20px; } .video-placeholder-copy p { font-size:11px; } .module-hero .academy-video { aspect-ratio:auto; } } /* Course selection shares the lesson list hierarchy and existing tokens. */ .programme-list{display:grid;gap:0}.programme-row{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1rem;padding:1.75rem 0;border-bottom:1px solid var(--line,rgba(140,140,140,.22))}.programme-row h2{margin:0 0 .5rem}.programme-row h2 a{display:flex;align-items:center;justify-content:space-between;gap:1rem}.programme-row p{max-width:65ch;line-height:1.6;margin:0 0 .75rem}.programme-row .module-eyebrow{padding-top:.4rem}@media(max-width:600px){.programme-row{grid-template-columns:minmax(0,1fr);gap:.5rem}} .module-authored-art{position:relative;inset:auto;width:100%;height:100%;background:transparent}.video-poster-art .module-authored-art{display:flex;justify-content:flex-end}.module-poster-title{display:block;font-size:clamp(20px,3vw,38px);line-height:1.2;padding:32px;max-width:18ch} .lesson-prose code{font-family:ui-monospace,SFMono-Regular,monospace;font-size:.88em;overflow-wrap:anywhere}.lesson-code{margin:20px 0;min-width:0;max-width:100%}.lesson-code pre{overflow:auto;max-width:100%;padding:16px;border:1px solid var(--line);border-radius:12px;white-space:pre;tab-size:2}.lesson-code code{overflow-wrap:normal}.lesson-prose h3{margin-top:24px}.lesson-prose li{margin:10px 0;line-height:1.65} .worked-solution summary{cursor:pointer;font-weight:600;padding-block:12px}.worked-solution[open] summary{margin-bottom:8px}