/* ============================================================================================
THE PAPER SKIN FAMILY - 17 Sep 2026. Built by
.claude/skills/skin-from-mockup/scripts/family-from-tokens.js from styles/tokens.css.
Hugo's Marble & Gold mockup (Trope, style-mockups, 17 Sep 2026 01:23) is structurally the
Paradise Found look: pale cards and rows with dark ink, a near-black rail, gold edges. The glass
family is the opposite material (dark smoked panels, light text), so this is a second family,
and its template is tokens.css itself, not a skin's rules. A skin is still only VALUES (its
block in styles/themes.css) plus a registry row with family: "paper".
HOW IT WAS MADE. family-from-tokens.js read every :root colour token of styles/tokens.css and
re-pointed it at ONE of 21 bases (the list, and forest's value for each, is
.claude/skills/skin-from-mockup/scripts/families/paper.bases.css):
- each literal colour became a relative colour over its base,
oklch(from var(--sk-) calc(l + dL) calc(c * k) calc(h + dH) / alpha)
solved so that with forest's bases it IS the literal (a token equal to its base reads the
base itself);
- each alias and formula token is re-declared WORD FOR WORD. A token declared on :root
resolves on , with forest's values, and the body only inherits the result, so without
the copy it would stay forest in every paper skin (the glass family still has eight such
stale tokens; test/skinTemplate.test.js lists them);
- the two compound values (--shadow-card, --inner-highlight) read tokens instead of literals,
and the :root aliases of other stylesheets (--danger-del) are re-declared too.
Proof (sandbox page at 2268x1987, 17 Sep 2026): a candidate skin of this family holding forest's
bases, against forest itself, on Paradise Found and the bench, overview and shots: 0 of 744
colour tokens off and 0 element paints off (1,129 to 2,190 elements). The pixels that move
(0.40% at most, up to 28 of 255) all sit inside gradient-painted boxes, 95-98% of them on the
progress bar: Chrome blends a gradient in oklab as soon as one stop is not a plain colour (the
bar told to blend "in srgb" falls to 472 px, max 4, against a noise floor of 203 px, max 3).
That is accepted for a new family; the component stylesheets were NOT given "in srgb" (it would
repaint neon and mono-teal). With this file on or off, forest, neon and mono-teal paint the
same to the pixel - measured again on the file as it stands after the treatments, the texture and
the 17 Sep fixes (the fixer's proof: paperbuild/fix/proof in the Marble & Gold scratch).
RULES. Never edit between the @generated markers: edit the bases file (or tokens.css) and re-run
node .claude/skills/skin-from-mockup/scripts/family-from-tokens.js --bases .claude/skills/skin-from-mockup/scripts/families/paper.bases.css
test/skinTemplate.test.js fails when this file is not what that command writes, when a colour
token of tokens.css is not re-declared here, and when a token here would be stale. Everything
after the end marker is the family's own: fitting slots and treatments, every rule scoped
body[data-skin-family="paper"], no literal colour, repaint only. --ptpl-* (the presentation
deck) never follows a skin, so it is never re-pointed.
A paper skin sets (styles/themes.css, body[data-theme=""]): --sk-page --sk-rail --sk-surface
--sk-ink --sk-ink-on-dark --sk-line --sk-gold --sk-a1 --sk-a2 --sk-a3 --sk-a4. It may also set
the defaulted bases (--sk-surface-alt --sk-ink-muted --sk-deep --sk-ok --sk-warn --sk-danger
--sk-info --sk-plum --sk-light --sk-dark) and any --sk--1 in this file.
TREATMENTS AND TEXTURE (17 Sep 2026, Part 2 of Marble & Gold). After the end marker: the gilt
ramp (slots over --sk-gold), fourteen CHOICES (--sk-footer-card, --sk-nav-active, --sk-add-button,
--sk-bar-ramp, --sk-status-tag, --sk-rims, --sk-today-tile, --sk-fab, --sk-donut-cell,
--sk-panels, --sk-header-buttons, --sk-kpi-icons, --sk-caption-fade, --sk-state-fade; their options are listed in the defaults block,
the first of each is forest), the SLOT RULES (one exact ink or fill for one kind of element -
eyebrow, labels, stat labels, controls, row titles, tab trough, calendar callout - each existing
only while its slot is set: @container style(--sk--1)) and the TEXTURE (--sk-texture: on
plus the --sk-tex-* images, sizes and offsets). Every one of those rules sits inside a style query
on its token, so at the defaults they do not exist and the family still paints Paradise Found's
look. The shadow and glow SHAPES of the treatments are tokens too (--sk-glow, --sk-lift-*, ...).
A texture skin ships its tiles in assets/skins// (test/skinTexture.test.js: under 400 KB,
served, natural size = the declared size) and sets, e.g.
--sk-texture: on
--sk-tex-panel-image: url("/assets/skins/marble-gold/marble-panel.webp?v=2")
A tile holds veins and a BALANCED cloud (it lightens as much as it darkens), so a panel shows the
skin's surface colour on average (the first tiles darkened every panel 1-3 L*: a veil). Tiles are
made by .claude/skills/skin-from-mockup/scripts/marble-tile.py.
The texture never touches body, body::before, .app-shell or the project photo.
============================================================================================ */
/* @generated-begin family-from-tokens.js (.claude/skills/skin-from-mockup/scripts/families/paper.bases.css) - edit that file and re-run; never edit by hand */
/* the bases a skin may leave out. A "paper" skin MUST set: --sk-page --sk-rail --sk-surface --sk-ink --sk-ink-on-dark --sk-line --sk-gold --sk-a1 --sk-a2 --sk-a3 --sk-a4 */
body[data-skin-family="paper"] {
--sk-surface-alt: oklch(from var(--sk-surface) calc(l + 0.04512) calc(c * 0.926388) calc(h + 1.5327));
--sk-ink-muted: oklch(from var(--sk-ink) calc(l + 0.271895) calc(c + 0.014807) calc(h + 1.5246));
--sk-deep: oklch(from var(--sk-page) calc(l - 0.100844) calc(c * 0.890665) calc(h - 7.142));
--sk-ok: var(--sk-a1);
--sk-warn: var(--sk-a2);
--sk-danger: oklch(from var(--sk-a2) calc(l - 0.214748) calc(c * 1.737344) 33.5237);
--sk-info: oklch(from var(--sk-a3) calc(l - 0.013491) calc(c * 1.452607) 242.85);
--sk-plum: oklch(from var(--sk-a3) calc(l - 0.115984) calc(c * 1.643506) 302.5361);
--sk-light: #FFFFFF;
--sk-dark: #000000;
/* not colours - the family's choices (@options), its texture images, sizes and offsets; a skin may set any */
--sk-footer-card: dark; /* @options dark | pale - the three footer cards: forest's dark glass, or the pale card material with dark ink */
--sk-nav-active: wash; /* @options wash | pill - the menu's selected item: forest's gold wash, or a dark gilt pill with a gold rim and a lit top edge */
--sk-add-button: tint; /* @options tint | filled - Add shot: forest's leaf tint, or a filled gilt button with a lit top edge, a rim and a bottom shade */
--sk-bar-ramp: three; /* @options three | five - the time bar: lo, mid, hi; or five stops (lo, lo-mid, mid, mid-hi, hi) */
--sk-status-tag: tint; /* @options tint | bronze | solid - the project status tag: its accent tint, a dark gilt pill (with --sk-status-pill-*-1 for its ink and rim), or its fill at full strength (--sk-status-pill-fill-1; 18 Sep 2026, the glass family's option) */
--sk-rims: foil; /* @options foil | full - panel, card and rail-card edges: forest's foil sweep that fades out, or a gold hairline all round */
--sk-today-tile: plain; /* @options plain | framed - the calendar's today tile: the rail colour, or dark gilt with a gold rim */
--sk-fab: mixed; /* @options mixed | matched - the round floating buttons: forest's gold, leaf and gold, or all three gilt */
--sk-donut-cell: glass; /* @options glass | marble - the overview's donut cell: forest's glass over the photo, or a recessed slab (a shade under the panels) with a taupe disc, joined to the stats band */
--sk-panels: glass; /* @options glass | solid - the pale panels, page panels, cards and project day: forest's 92% glass over the photo, or opaque stone (the surface colour is exactly what shows) */
--sk-header-buttons: glass; /* @options glass | gilt | stone - the header's round buttons and scale readout: forest's clear glass, dark gilt with a rim and matching icons, or a skin-owned fill with its own light, rim and ink (--sk-header-button-1, -hi-1, -rim-1, -ink-1) */
--sk-kpi-icons: tint; /* @options tint | ink - the glyphs in the overview's stat discs: each disc's own tint, or one dark ink (the --sk-kpi-icon-ink-1 slot) */
--sk-caption-fade: faded; /* @options faded | full - small captions and separators the components fade to 40-80% (Edit Plan's counts, Updates' times, authors and counts, the header's scale "%"): forest's fade, or full strength (on a pale solid panel the fade reads 2.2-3.8:1) */
--sk-state-fade: deep; /* @options deep | soft - what the app fades for its state (a completed Edit Plan task, a resolved note or comment, a cancelled queue job at 50-65%; the other band stats while one is focused, 42%): the components' own fade, or --sk-state-fade-opacity (a pale solid panel behind such a fade lifts its text to 1.7-2.7:1) */
--sk-photo-veil: base; /* @options base | none | tint - a project's OWN photo (17 Sep 2026 review): forest's veil over it (backdrop.css body::before, as forest paints it), the photo as it is (the Marble & Gold mockup shows its photo clear), or a veil of one colour (--sk-photo-veil-1, the surface by default) whose strength runs left to right through --sk-photo-veil-a0/-a25/-a50/-a75/-a100 (18 Sep 2026, Athenian Marble: a pale veil over its temple); the base veil still paints the page ground when there is no project photo, and a tint set in Settings always wins */
--sk-rail-tone: dark; /* @options dark | pale - the nav rail and its cards (18 Sep 2026, Athenian Marble): forest's dark drawer with light ink, or a pale stone rail (--sk-rail-surface-1) with dark ink (--sk-rail-ink-1, --sk-rail-muted-ink-1) and pale cards (--sk-rail-card-1); --sk-rail itself stays the dark base (dark cards, popovers, shot ids) */
--sk-donut-notch: square; /* @options square | cut - the donut cell's right corners: the component's full rectangle, or two transparent cut-outs whose radii are --sk-donut-notch-top/-foot */
--sk-kpi-disc-relief: flat; /* @options flat | raised - the overview's stat discs: their component shadow, or a bright upper rim with an inset foot and a short drop */
--sk-glow: 0 0 10px;
--sk-glow-strength: 22%;
--sk-lift-near: 0 1px 2px;
--sk-lift-near-strength: 30%;
--sk-lift-far: 0 6px 16px;
--sk-lift-far-strength: 36%;
--sk-button-lift-near-strength: 22%;
--sk-button-lift: 0 4px 10px;
--sk-button-lift-strength: 30%;
--sk-fab-lift-near: 0 2px 6px;
--sk-fab-lift-near-strength: 25%;
--sk-fab-lift-far: 0 6px 20px;
--sk-fab-lift-far-strength: 42%;
--sk-state-fade-opacity: 0.8;
--sk-photo-veil-a0: 0%;
--sk-photo-veil-a25: 0%;
--sk-photo-veil-a50: 0%;
--sk-photo-veil-a75: 0%;
--sk-photo-veil-a100: 0%;
--sk-photo-veil-angle: 90deg;
--sk-donut-hairline-w: 14px;
--sk-donut-notch-top: 22px;
--sk-donut-notch-foot: 9px;
--sk-kpi-disc-hi-mix: 60%;
--sk-kpi-disc-lo-mix: 94%;
--sk-bar-track-mix: 18%;
--sk-texture: off;
--sk-kpi-glyphs: off;
--sk-kpi-glyph-image: none;
--sk-maya-icon-image: none;
--sk-tex-inset: off;
--sk-maya-slab: off;
--sk-tex-matte: off;
--sk-tex-matte-cover: 90%;
--sk-tex-matte-rail-cover: 85%;
--sk-tex-light-panel-image: none;
--sk-tex-light-panel-size: 1254px 1254px;
--sk-tex-dark-panel-image: none;
--sk-tex-dark-panel-size: 1254px 1254px;
--sk-tex-panel-image: none;
--sk-tex-panel-size: 1600px 1600px;
--sk-tex-card-image: none;
--sk-tex-card-size: 1600px 1600px;
--sk-tex-row-image: none;
--sk-tex-row-size: 1600px 1600px;
--sk-tex-rail-image: none;
--sk-tex-rail-size: 1600px 1600px;
--sk-tex-grain-image: none;
--sk-tex-grain-size: 192px 192px;
--sk-tex-step-x: -611px;
--sk-tex-step-y: -237px;
--sk-tex-row-step-x: -547px;
--sk-tex-row-step-y: -373px;
--sk-tex-panel-index: 0;
--sk-tex-stats-index: 7;
--sk-tex-donut-index: 8;
--sk-tex-day-index: 6;
--sk-tex-footer-index: 8;
--sk-tex-rail-index: 0;
--sk-orn-donut-image: none;
--sk-orn-donut-size: 100% 100%;
--sk-orn-donut-position: center;
--sk-orn-donut-opacity: 1;
--sk-orn-band-corner-image: none;
--sk-orn-band-corner-lo-image: none;
--sk-orn-band-corner-tr-image: none;
--sk-orn-band-corner-size: 100px 100px;
--sk-orn-band-corner-tr-size: 100px 100px;
--sk-orn-band-corner-position: left 14px top 12px;
--sk-orn-band-corner-tr-position: right 14px top 12px;
--sk-orn-band-corner-opacity: 1;
--sk-orn-brand-image: none;
--sk-orn-brand-size: contain;
--sk-orn-brand-position: left center;
--sk-orn-brand-opacity: 1;
--sk-orn-empty-image: none;
--sk-orn-empty-size: 80px 58px;
--sk-orn-empty-position: center calc(50% - 49px);
--sk-orn-empty-opacity: 1;
--sk-orn-rail-image: none;
--sk-orn-rail-lo-image: none;
--sk-orn-rail-size: auto min(360px, 100%);
--sk-orn-rail-position: center 26%;
--sk-orn-rail-opacity: 1;
--sk-orn-rail-face-opacity: 1;
--sk-orn-band-edge-image: none;
--sk-orn-band-edge-lo-image: none;
--sk-orn-band-edge-size: 77px 140px;
--sk-orn-band-edge-position: left 12px top 14px;
--sk-orn-band-edge-opacity: 1;
--sk-orn-disc-image: none;
--sk-orn-disc-lo-image: none;
--sk-orn-disc-size: 100% 100%;
--sk-orn-disc-position: center;
--sk-orn-disc-opacity: 1;
--sk-orn-disc-face-opacity: 1;
--sk-orn-card-edge-activity-image: none;
--sk-orn-card-edge-media-image: none;
--sk-orn-card-edge-notes-image: none;
--sk-orn-card-edge-lo-image: none;
--sk-orn-card-edge-size: 48px 121px;
--sk-orn-card-edge-activity-position: right 14px bottom 26px;
--sk-orn-card-edge-media-position: center;
--sk-orn-card-edge-notes-position: left 14px top 40px;
--sk-orn-card-edge-opacity: 1;
--sk-orn-quiet-image: none;
--sk-orn-quiet-lo-image: none;
--sk-orn-quiet-size: 123px 185px;
--sk-orn-quiet-position: center bottom 26px;
--sk-orn-quiet-opacity: 1;
}
/* every colour token of styles/tokens.css over the bases: 539 literals as relative colours,
187 aliases/formulas re-declared word for word (they would resolve on otherwise),
2 compound values, 1 :root aliases from other stylesheets, 67 as slots */
body[data-skin-family="paper"] {
--bg: var(--sk-page);
--card-bg: oklch(from var(--sk-surface) l c h / 0.92);
--card-bg-solid: var(--sk-surface);
--card-bg-light: oklch(from var(--sk-surface-alt) l c h / 0.78);
--card-bg-dark: oklch(from var(--sk-rail) l c h / 0.78);
--card-border: var(--sk-line);
--card-border-dark: oklch(from var(--sk-line) l c h / 0.45);
--card-border-metallic: oklch(from var(--sk-gold) l c h / 0.85);
--sidebar-bg: var(--sk-rail);
--sidebar-bg-trans: oklch(from var(--sk-rail) l c h / 0.82);
--ink: var(--sk-ink);
--ink-muted: var(--sk-ink-muted);
--ink-soft: var(--sk-ink-soft-1, oklch(from var(--sk-ink) calc(l + 0.480747) calc(c + 0.014054) calc(h + 11.1736)));
--ink-on-dark: var(--sk-ink-on-dark);
--ink-on-dark-muted: var(--sk-ink-on-dark-muted-1, oklch(from var(--sk-ink-on-dark) calc(l - 0.152864) calc(c * 1.118543) calc(h + 0.2419)));
--leaf: var(--sk-a1);
--leaf-ink: var(--sk-leaf-ink-1, var(--leaf));
--amber: var(--sk-a2);
--teal: var(--sk-a3);
--tan: var(--sk-a4);
--archive: oklch(from var(--sk-a4) calc(l - 0.109074) calc(c * 0.632907) calc(h - 2.8699));
--card-bg-light-solid: var(--sk-surface-alt);
--ok: var(--sk-ok);
--ok-deep: var(--sk-ok-deep-1, oklch(from var(--sk-ok) calc(l - 0.10156) calc(c * 1.059218) calc(h + 2.1562)));
--warn: var(--sk-warn);
--leaf-deep: oklch(from var(--sk-a1) calc(l - 0.10156) calc(c * 1.059218) calc(h + 2.1562));
--leaf-bright: oklch(from var(--sk-a1) calc(l + 0.083124) calc(c * 1.55414) calc(h + 3.1618));
--ink-on-accent: oklch(from var(--sk-ink-on-dark) calc(l + 0.063667) calc(c * 0.40873) calc(h + 3.5027));
--nav-active: oklch(from var(--sk-gold) calc(l + 0.038488) calc(c * 1.182882) calc(h - 4.0278));
--paper: oklch(from var(--sk-surface) calc(l + 0.085706) calc(c * 1.055809) calc(h + 6.1136));
--paper-2: oklch(from var(--sk-surface) calc(l + 0.032914) calc(c * 1.823534) calc(h + 2.9689));
--hi: oklch(from var(--sk-surface-alt) calc(l + 0.046183) calc(c * 1.585156) calc(h + 4.6819));
--hi-2: oklch(from var(--sk-surface-alt) calc(l + 0.039126) calc(c * 1.725208) calc(h + 0.9555));
--hi-3: oklch(from var(--sk-surface-alt) calc(l + 0.025927) calc(c * 2.310305) calc(h - 0.8439));
--foil: var(--sk-gold);
--tan-deep: oklch(from var(--sk-ink-muted) calc(l - 0.029733) calc(c * 2.294398) calc(h + 4.1655));
--gold-deep: oklch(from var(--sk-gold) calc(l - 0.137352) calc(c * 1.17471) calc(h - 11.1452));
--gold-deep-2: oklch(from var(--sk-gold) calc(l - 0.201291) calc(c * 1.069516) calc(h - 16.0882));
--shadow-ink: oklch(from var(--sk-ink) calc(l - 0.028167) calc(c + 0.017689) calc(h - 1.3495));
--shadow-ink-2: oklch(from var(--sk-ink) calc(l + 0.038055) calc(c + 0.026697) calc(h - 4.5626));
--ink-deep: oklch(from var(--sk-ink) calc(l + 0.038055) calc(c + 0.026697) calc(h - 4.5626));
--ink-deep-2: oklch(from var(--sk-ink) calc(l - 0.028167) calc(c + 0.017689) calc(h - 1.3495));
--ink-cream: var(--cream);
--ink-cream-2: var(--cream-2);
--ink-cream-3: var(--cream-3);
--ink-cream-4: var(--cream-4);
--ink-cream-5: var(--cream-5);
--ink-cream-6: var(--cream-6);
--ink-cream-7: var(--cream-7);
--ink-cream-8: var(--cream-8);
--ink-cream-9: var(--cream-9);
--ink-cream-10: var(--cream-10);
--ink-hi: var(--hi);
--ink-hi-2: var(--hi-2);
--ink-hi-3: var(--hi-3);
--ink-paper: var(--paper);
--ink-paper-2: var(--paper-2);
--ink-parchment: var(--parchment);
--ink-forest: var(--forest);
--ink-forest-2: var(--forest-2);
--ink-forest-3: var(--forest-3);
--ink-forest-4: var(--forest-4);
--ink-forest-5: var(--forest-5);
--ink-forest-6: var(--forest-6);
--ink-bg: var(--bg);
--ink-sidebar-bg: var(--sidebar-bg);
--ink-umber: var(--umber);
--ink-umber-2: var(--umber-2);
--ink-umber-3: var(--umber-3);
--ink-umber-4: var(--umber-4);
--ink-tan-deep: var(--tan-deep);
--ink-taupe: var(--taupe);
--ink-taupe-2: var(--taupe-2);
--ink-taupe-3: var(--taupe-3);
--ink-taupe-4: var(--taupe-4);
--ink-taupe-5: var(--taupe-5);
--ink-moss: var(--moss);
--surface-forest: var(--forest);
--surface-forest-2: var(--forest-2);
--surface-forest-3: var(--forest-3);
--surface-forest-4: var(--forest-4);
--surface-forest-5: var(--forest-5);
--surface-forest-6: var(--forest-6);
--shade: var(--sk-deep);
--shade-2: oklch(from var(--sk-deep) calc(l + 0.058822) calc(c + 0.014074) calc(h + 6.6888));
--shade-3: oklch(from var(--sk-deep) calc(l + 0.018385) calc(c + 0.009595) calc(h + 14.8507));
--shade-4: oklch(from var(--sk-deep) calc(l - 0.022878) calc(c + 0.005955) calc(h + 16.3373));
--cream: oklch(from var(--sk-surface-alt) calc(l + 0.057713) calc(c * 0.956599) calc(h + 7.8709));
--cream-2: oklch(from var(--sk-surface-alt) calc(l + 0.044337) calc(c * 0.977184) calc(h + 2.569));
--cream-3: oklch(from var(--sk-surface-alt) calc(l + 0.007766) calc(c * 1.094561) calc(h + 3.9865));
--cream-4: oklch(from var(--sk-surface-alt) calc(l - 0.0058) calc(c * 0.947919) calc(h - 0.9591));
--cream-5: oklch(from var(--sk-surface-alt) calc(l + 0.053813) calc(c * 0.868029) calc(h + 0.8222));
--cream-6: oklch(from var(--sk-surface-alt) calc(l - 0.035254) calc(c * 1.88712) calc(h - 0.8579));
--cream-7: oklch(from var(--sk-surface-alt) calc(l + 0.005792) calc(c * 1.052122) calc(h + 0.8625));
--cream-8: oklch(from var(--sk-surface-alt) calc(l - 0.02095) calc(c * 1.126057) calc(h - 0.6492));
--cream-9: oklch(from var(--sk-surface-alt) calc(l - 0.011618) calc(c * 1.640485) calc(h - 0.097));
--cream-10: oklch(from var(--sk-surface-alt) calc(l + 0.022155) calc(c * 0.783171) calc(h - 4.6094));
--parchment: oklch(from var(--sk-surface) calc(l - 0.021764) calc(c * 1.055821) calc(h + 0.8931));
--gold: oklch(from var(--sk-gold) calc(l - 0.094157) calc(c * 1.516928) calc(h - 3.6051));
--gold-2: oklch(from var(--sk-gold) calc(l + 0.027836) calc(c * 1.567059) calc(h + 1.1246));
--gold-3: oklch(from var(--sk-gold) calc(l + 0.012989) calc(c * 1.616502) calc(h - 2.3133));
--gold-4: oklch(from var(--sk-gold) calc(l - 0.074078) calc(c * 1.225644) calc(h - 8.8428));
--gold-5: oklch(from var(--sk-gold) calc(l - 0.059341) calc(c * 1.498904) calc(h + 2.146));
--gold-6: oklch(from var(--sk-gold) calc(l - 0.131281) calc(c * 1.63272) calc(h - 13.7269));
--gold-7: oklch(from var(--sk-gold) calc(l - 0.202812) calc(c * 1.128551) calc(h - 4.777));
--gold-8: oklch(from var(--sk-gold) calc(l - 0.075105) calc(c * 1.606023) calc(h - 0.5941));
--gold-9: oklch(from var(--sk-gold) calc(l - 0.127188) calc(c * 1.197871) calc(h - 5.8144));
--gold-10: oklch(from var(--sk-gold) calc(l - 0.036014) calc(c * 1.775834) calc(h + 3.6943));
--gold-11: oklch(from var(--sk-gold) calc(l - 0.076806) calc(c * 1.456677) calc(h + 0.7405));
--gold-12: oklch(from var(--sk-gold) calc(l - 0.071618) calc(c * 1.467982) calc(h - 2.374));
--gold-13: oklch(from var(--sk-gold) calc(l + 0.012042) calc(c * 1.819505) calc(h + 4.8693));
--gold-14: oklch(from var(--sk-gold) calc(l - 0.08893) calc(c * 1.643012) calc(h - 3.1186));
--gold-15: oklch(from var(--sk-gold) calc(l - 0.08692) calc(c * 1.239006) calc(h - 8.5928));
--gold-16: var(--sk-gold-16-1, oklch(from var(--sk-gold) calc(l - 0.045151) calc(c * 1.656413) calc(h - 22.0557)));
--gold-17: oklch(from var(--sk-gold) calc(l - 0.022681) calc(c * 1.478872) calc(h - 1.2017));
--gold-18: oklch(from var(--sk-gold) calc(l - 0.05344) calc(c * 0.995262) calc(h - 9.3545));
--olive: oklch(from var(--sk-a1) calc(l - 0.084611) calc(c * 0.832086) calc(h - 2.7838));
--olive-2: oklch(from var(--sk-a1) calc(l - 0.093435) calc(c * 0.998492) calc(h + 3.0303));
--olive-3: var(--sk-olive-3-1, oklch(from var(--sk-a1) calc(l - 0.152264) calc(c * 0.978557) calc(h + 2.9522)));
--moss: oklch(from var(--sk-a1) calc(l - 0.175099) calc(c * 0.714593) calc(h - 6.0738));
--forest: oklch(from var(--sk-a1) calc(l - 0.353431) calc(c * 0.505207) calc(h + 3.5213));
--forest-2: oklch(from var(--sk-a1) calc(l - 0.263195) calc(c * 0.965321) calc(h + 4.6628));
--forest-3: oklch(from var(--sk-a1) calc(l - 0.273613) calc(c * 0.699863) calc(h - 5.4572));
--forest-4: oklch(from var(--sk-a1) calc(l - 0.203224) calc(c * 0.926306) calc(h + 5.3828));
--pale-green: oklch(from var(--sk-a1) calc(l + 0.071476) calc(c * 0.941007) calc(h + 0.2478));
--olive-4: oklch(from var(--sk-a1) calc(l - 0.109495) calc(c * 1.159111) calc(h + 5.8631));
--forest-5: oklch(from var(--sk-a1) calc(l - 0.226809) calc(c * 0.997587) calc(h + 9.4004));
--olive-5: oklch(from var(--sk-a1) calc(l - 0.086936) calc(c * 0.705012) calc(h + 2.5615));
--olive-6: oklch(from var(--sk-a1) calc(l - 0.007835) calc(c * 1.164498) calc(h + 6.8682));
--forest-6: oklch(from var(--sk-a1) calc(l - 0.225093) calc(c * 0.898226) calc(h + 4.0468));
--olive-7: oklch(from var(--sk-a1) calc(l - 0.093737) calc(c * 1.017112) calc(h + 2.567));
--olive-8: oklch(from var(--sk-a1) calc(l - 0.078425) calc(c * 0.671651) calc(h + 2.0069));
--olive-9: oklch(from var(--sk-a1) calc(l - 0.194117) calc(c * 0.73962) calc(h - 0.7202));
--olive-10: var(--sk-olive-10-1, oklch(from var(--sk-a1) calc(l - 0.04277) calc(c * 0.785182) calc(h + 0.2197)));
--olive-11: oklch(from var(--sk-a1) calc(l - 0.105694) calc(c * 0.699234) calc(h + 1.269));
--mint: oklch(from var(--sk-surface-alt) calc(l - 0.019107) calc(c * 1.919934) calc(h + 35.8224));
--umber: oklch(from var(--sk-ink) calc(l + 0.058917) calc(c + 0.012107) calc(h + 12.6481));
--umber-2: oklch(from var(--sk-ink) calc(l + 0.157566) calc(c + 0.032991) calc(h + 9.1958));
--umber-3: oklch(from var(--sk-ink) calc(l + 0.051464) calc(c + 0.023086) calc(h + 5.9253));
--umber-4: oklch(from var(--sk-ink) calc(l + 0.150531) calc(c + 0.030916) calc(h + 1.8342));
--taupe: oklch(from var(--sk-ink-muted) calc(l - 0.006961) calc(c * 1.424564) calc(h + 4.8528));
--taupe-2: oklch(from var(--sk-ink-muted) calc(l + 0.095162) calc(c * 1.282163) calc(h + 3.0878));
--taupe-3: oklch(from var(--sk-ink-muted) calc(l - 0.041111) calc(c * 1.128423) calc(h + 8.2873));
--taupe-4: oklch(from var(--sk-ink-muted) calc(l - 0.031858) calc(c * 1.109968) calc(h + 2.6542));
--taupe-5: oklch(from var(--sk-ink-muted) calc(l - 0.001522) calc(c * 1.291043) calc(h + 6.8283));
--shade-5: oklch(from var(--sk-deep) calc(l + 0.006211) calc(c + 0.00461) calc(h + 1.511));
--shade-6: oklch(from var(--sk-deep) calc(l - 0.053077) calc(c - 0.004999) calc(h + 18.091));
--shade-7: oklch(from var(--sk-deep) calc(l - 0.01724) calc(c - 0.004568) calc(h + 21.8586));
--mix-light: oklch(from var(--sk-light) l 0 h);
--mix-dark: oklch(from var(--sk-dark) l 0 h);
--status-accent: oklch(from var(--sk-ok) calc(l + 0.083124) calc(c * 1.55414) calc(h + 3.1618));
--accent: var(--leaf);
--accent-strong: var(--leaf);
--danger: oklch(from var(--sk-danger) calc(l - 0.108721) calc(c * 0.89389) calc(h - 3.6034));
--danger-border: oklch(from var(--sk-danger) calc(l + 0.059699) calc(c * 0.919966) calc(h - 11.4871) / 0.45);
--warn-deep: oklch(from var(--sk-warn) calc(l - 0.31365) calc(c * 1.108217) calc(h - 13.4093));
--chart-1: oklch(from var(--sk-a1) calc(l - 0.036826) calc(c * 1.04054) calc(h + 3.0914));
--chart-2: oklch(from var(--sk-info) calc(l - 0.002648) calc(c * 0.740802) calc(h - 3.9128));
--chart-3: oklch(from var(--sk-gold) calc(l - 0.059341) calc(c * 1.498904) calc(h + 2.146));
--chart-4: oklch(from var(--sk-plum) calc(l + 0.105331) calc(c * 0.773973) calc(h + 9.7693));
--chart-5: oklch(from var(--sk-a2) calc(l - 0.061849) calc(c * 1.37432) calc(h - 5.8301));
--chart-6: oklch(from var(--sk-a3) calc(l + 0.070994) calc(c * 1.048083) calc(h - 6.4553));
--chart-7: oklch(from var(--sk-danger) calc(l + 0.046969) calc(c * 0.696036) calc(h + 4.3051));
--chart-ok: oklch(from var(--sk-a1) calc(l - 0.036826) calc(c * 1.04054) calc(h + 3.0914));
--chart-fail: var(--sk-chart-fail-1, oklch(from var(--sk-danger) calc(l + 0.044488) calc(c * 0.951246) calc(h + 1.1506)));
--chart-labor: oklch(from var(--sk-gold) calc(l - 0.059341) calc(c * 1.498904) calc(h + 2.146));
--chart-xtra: oklch(from var(--sk-a2) calc(l - 0.141087) calc(c * 1.012603) calc(h - 2.0943));
--chart-prompt: oklch(from var(--sk-gold) calc(l - 0.059341) calc(c * 1.498904) calc(h + 2.146));
--chart-line: oklch(from var(--sk-a1) calc(l - 0.09405) calc(c * 1.003607) calc(h + 3.4451));
--badge-phase: oklch(from var(--sk-a2) calc(l + 0.003335) calc(c * 1.516874) calc(h - 1.7944));
--badge-phase-ink: oklch(from var(--sk-a2) calc(l - 0.339206) calc(c * 1.012155) calc(h - 9.5525));
--badge-review: oklch(from var(--sk-gold) calc(l - 0.054557) calc(c * 1.570881) calc(h - 5.5151));
--badge-review-ink: oklch(from var(--sk-gold) calc(l - 0.393579) calc(c * 0.783631) calc(h - 3.915));
--badge-kickoff: var(--sk-info);
--badge-kickoff-ink: oklch(from var(--sk-info) calc(l - 0.260209) calc(c * 0.663538) calc(h + 2.3282));
--badge-default: oklch(from var(--sk-gold) calc(l - 0.289489) calc(c * 0.796518) calc(h - 3.599));
--badge-default-ink: oklch(from var(--sk-ink-muted) calc(l - 0.103534) calc(c * 0.97474) calc(h + 0.8824));
--role-admin: oklch(from var(--sk-danger) calc(l + 0.065711) calc(c * 0.897697) calc(h + 0.1911));
--role-director: var(--sk-info);
--role-lead: oklch(from var(--sk-a3) calc(l + 0.028175) calc(c * 1.395625) calc(h + 7.0997));
--role-artist: oklch(from var(--sk-plum) calc(l + 0.08747) calc(c * 1.236456) calc(h + 0.5687));
--role-reviewer: oklch(from var(--sk-surface-alt) calc(l - 0.249489) calc(c * 0.973573) calc(h + 16.2349));
--role-editor: oklch(from var(--sk-danger) calc(l + 0.106738) calc(c * 0.901144) calc(h - 33.1511));
--tint-leaf: oklch(from var(--sk-a1) l c h / 0.15);
--tint-amber: oklch(from var(--sk-a2) l c h / 0.18);
--tint-teal: oklch(from var(--sk-a3) l c h / 0.15);
--tint-tan: oklch(from var(--sk-gold) calc(l - 0.004849) calc(c * 0.586546) calc(h + 1.1717) / 0.22);
--tint-archive: oklch(from var(--sk-surface-alt) calc(l - 0.242499) calc(c * 1.233395) calc(h - 5.0898) / 0.18);
--shadow-card: 0 1px 2px color-mix(in srgb, var(--shadow-ink) 6%, transparent), 0 12px 32px color-mix(in srgb, var(--shadow-ink) 10%, transparent);
--inner-highlight: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 12%, transparent), transparent 16px);
--input-bg: color-mix(in srgb, var(--cream) 85%, transparent);
--input-border: var(--card-border);
--panel-raised: var(--card-bg-light-solid);
--cta-bg: var(--leaf);
--cta-ink: var(--ink-on-accent);
--danger-soft: oklch(from var(--sk-danger) calc(l + 0.059699) calc(c * 0.919966) calc(h - 11.4871));
--danger-soft-2: oklch(from var(--sk-danger) calc(l + 0.065711) calc(c * 0.897697) calc(h + 0.1911));
--danger-ink: oklch(from var(--sk-danger) calc(l - 0.175238) calc(c * 0.775747) calc(h + 0.1474));
--danger-deep: oklch(from var(--sk-danger) calc(l - 0.062577) calc(c * 0.840791) calc(h - 1.9595));
--ok-border: oklch(from var(--sk-ok) calc(l - 0.093435) calc(c * 0.998492) calc(h + 3.0303) / 0.45);
--role-admin-ink: oklch(from var(--sk-danger) calc(l - 0.175238) calc(c * 0.775747) calc(h + 0.1474));
--role-director-ink: oklch(from var(--sk-info) calc(l - 0.260209) calc(c * 0.663538) calc(h + 2.3282));
--role-director-line: oklch(from var(--sk-info) calc(l - 0.105495) calc(c * 0.989284) calc(h + 6.475));
--role-lead-ink: oklch(from var(--sk-a3) calc(l - 0.268183) calc(c * 0.761641) calc(h + 3.35));
--role-lead-line: oklch(from var(--sk-a3) calc(l - 0.088945) calc(c * 1.218409) calc(h + 6.9991));
--role-artist-ink: oklch(from var(--sk-plum) calc(l - 0.196119) calc(c * 1.004275) calc(h - 3.474));
--role-artist-line: oklch(from var(--sk-plum) calc(l - 0.016952) calc(c * 1.260306) calc(h - 3.1643));
--role-reviewer-ink: oklch(from var(--sk-ink-muted) calc(l - 0.131963) calc(c * 0.645246) calc(h + 4.9794));
--role-editor-ink: oklch(from var(--sk-danger) calc(l - 0.163216) calc(c * 0.709809) calc(h - 34.5094));
--role-editor-line: oklch(from var(--sk-danger) calc(l + 0.012893) calc(c * 0.929434) calc(h - 32.9691));
--role-producer: var(--leaf);
--role-producer-ink: var(--ink-forest-2);
--role-supervisor: var(--gold-16);
--role-supervisor-ink: color-mix(in srgb, var(--ink-tan-deep) 81%, var(--mix-dark));
--role-tester: var(--gold-12);
--role-tester-ink: color-mix(in srgb, var(--ink-tan-deep) 67%, var(--mix-dark));
--stage-bar: var(--ok);
--stage-bar-current: var(--warn);
--fab-1: linear-gradient(150deg, color-mix(in srgb, var(--gold-14) 88%, var(--mix-light)), var(--gold-22) 70%);
--fab-2: linear-gradient(150deg, var(--leaf), var(--olive-3) 70%);
--fab-3: linear-gradient(150deg, color-mix(in srgb, var(--gold-10) 75%, var(--mix-light)), var(--gold) 70%);
--white: oklch(from var(--sk-light) l 0 h);
--black: oklch(from var(--sk-dark) l 0 h);
--ink-on-leaf: oklch(from var(--sk-ink) calc(l - 0.000685) calc(c + 0.015798) calc(h + 62.6641));
--ink-strong: oklch(from var(--sk-ink) calc(l - 0.000087) calc(c + 0.012928) calc(h + 66.7626));
--olive-12: oklch(from var(--sk-a1) calc(l - 0.207027) calc(c * 0.981552) calc(h + 3.3354));
--ink-olive-12: var(--olive-12);
--leaf-pale: oklch(from var(--sk-a1) calc(l + 0.105571) calc(c * 0.916864) calc(h - 4.8528));
--leaf-pale-2: oklch(from var(--sk-a1) calc(l + 0.106567) calc(c * 1.024605) calc(h + 1.8213));
--leaf-2: oklch(from var(--sk-a1) calc(l - 0.036826) calc(c * 1.04054) calc(h + 3.0914));
--warn-red: var(--sk-warn-red-1, oklch(from var(--sk-danger) calc(l + 0.026516) calc(c * 0.87475) calc(h + 2.2608)));
--panel-cream: oklch(from var(--sk-surface) calc(l + 0.065967) calc(c * 0.810698) calc(h + 2.3614));
--ink-toast: oklch(from var(--sk-ink-on-dark) calc(l + 0.046912) calc(c * 0.794008) calc(h + 1.6082));
--toast-ok: oklch(from var(--sk-ok) calc(l - 0.26365) calc(c * 0.62075) calc(h + 5.4434));
--signal-green: oklch(from var(--sk-ok) calc(l + 0.022942) calc(c * 1.872875) calc(h + 12.5552));
--signal-amber: oklch(from var(--sk-warn) calc(l + 0.059043) calc(c * 1.934873) calc(h + 7.9408));
--signal-red: oklch(from var(--sk-danger) calc(l + 0.045303) calc(c * 1.477494) calc(h - 3.5603));
--donut-first-pass: var(--tan);
--donut-concept: var(--warn);
--donut-render: var(--teal);
--donut-completed: var(--ok);
--donut-upscale: var(--amber);
--bar-lo: var(--sk-bar-lo-1, var(--signal-green));
--bar-mid: var(--sk-bar-mid-1, var(--signal-amber));
--bar-hi: var(--sk-bar-hi-1, var(--signal-red));
--donut-track: var(--sk-donut-track-1, color-mix(in srgb, var(--card-border) 18%, transparent));
--donut-sheen-base: var(--mix-light);
--donut-first-pass-lo: var(--sk-donut-first-pass-lo-1, color-mix(in srgb, var(--donut-first-pass) 60%, var(--mix-dark)));
--donut-first-pass-mid: var(--sk-donut-first-pass-mid-1, var(--donut-first-pass));
--donut-first-pass-hi: var(--sk-donut-first-pass-hi-1, color-mix(in srgb, var(--donut-first-pass) 60%, var(--mix-light)));
--donut-concept-lo: var(--sk-donut-concept-lo-1, color-mix(in srgb, var(--donut-concept) 60%, var(--mix-dark)));
--donut-concept-mid: var(--sk-donut-concept-mid-1, var(--donut-concept));
--donut-concept-hi: var(--sk-donut-concept-hi-1, color-mix(in srgb, var(--donut-concept) 60%, var(--mix-light)));
--donut-render-lo: var(--sk-donut-render-lo-1, color-mix(in srgb, var(--donut-render) 60%, var(--mix-dark)));
--donut-render-mid: var(--sk-donut-render-mid-1, var(--donut-render));
--donut-render-hi: var(--sk-donut-render-hi-1, color-mix(in srgb, var(--donut-render) 60%, var(--mix-light)));
--donut-completed-lo: var(--sk-donut-completed-lo-1, color-mix(in srgb, var(--donut-completed) 60%, var(--mix-dark)));
--donut-completed-mid: var(--sk-donut-completed-mid-1, var(--donut-completed));
--donut-completed-hi: var(--sk-donut-completed-hi-1, color-mix(in srgb, var(--donut-completed) 60%, var(--mix-light)));
--donut-upscale-lo: var(--sk-donut-upscale-lo-1, color-mix(in srgb, var(--donut-upscale) 60%, var(--mix-dark)));
--donut-upscale-mid: var(--sk-donut-upscale-mid-1, var(--donut-upscale));
--donut-upscale-hi: var(--sk-donut-upscale-hi-1, color-mix(in srgb, var(--donut-upscale) 60%, var(--mix-light)));
--pill-bg: oklch(from var(--sk-surface) calc(l + 0.099754) calc(c * 0.336984) calc(h - 4.6517));
--st-upscaled: var(--sk-st-upscaled-1, var(--gold-5));
--st-upscaled-ink: var(--sk-st-upscaled-ink-1, oklch(from var(--sk-a2) calc(l - 0.28252) calc(c * 1.081221) calc(h + 6.2814)));
--st-video-hero: var(--sk-st-video-hero-1, oklch(from var(--sk-a1) calc(l - 0.02298) calc(c * 1.322863) calc(h + 14.6593)));
--st-video-wip: var(--sk-st-video-wip-1, oklch(from var(--sk-a3) calc(l + 0.037294) calc(c * 1.482863) calc(h + 18.9518)));
--st-video-wip-ink: var(--sk-st-video-wip-ink-1, oklch(from var(--sk-a3) calc(l - 0.210285) calc(c * 0.927721) calc(h - 1.9649)));
--st-hero: var(--sk-st-hero-1, oklch(from var(--sk-a1) calc(l - 0.059843) calc(c * 1.178402) calc(h + 7.2279)));
--st-hero-ink: var(--sk-st-hero-ink-1, var(--ink-forest-5));
--st-wip: var(--sk-st-wip-1, var(--gold-6));
--st-wip-ink: var(--sk-st-wip-ink-1, var(--warn-deep));
--st-first-pass: var(--sk-st-first-pass-1, oklch(from var(--sk-gold) calc(l - 0.126467) calc(c * 0.807638) calc(h - 0.5594)));
--st-first-pass-ink: var(--sk-st-first-pass-ink-1, oklch(from var(--sk-gold) calc(l - 0.312205) calc(c * 0.662939) calc(h - 4.6447)));
--st-prompt: var(--sk-st-prompt-1, oklch(from var(--sk-info) calc(l + 0.0503) calc(c * 0.380623) calc(h + 13.5252)));
--st-prompt-ink: var(--sk-st-prompt-ink-1, oklch(from var(--sk-info) calc(l - 0.21055) calc(c * 0.423508) calc(h + 15.0064)));
--st-pending: var(--sk-st-pending-1, oklch(from var(--sk-surface-alt) calc(l - 0.249489) calc(c * 0.973573) calc(h + 16.2349)));
--st-pending-ink: var(--sk-st-pending-ink-1, oklch(from var(--sk-ink-muted) calc(l - 0.078925) calc(c * 0.694892) calc(h + 27.5115)));
--st-pending-2: oklch(from var(--sk-gold) calc(l - 0.070268) calc(c * 0.410875) calc(h + 3.0162));
--st-pending-2-ink: oklch(from var(--sk-ink-muted) calc(l - 0.028702) calc(c * 0.774734) calc(h - 1.4893));
--st-archive: var(--sk-st-archive-1, oklch(from var(--sk-ink-muted) calc(l + 0.032004) calc(c * 0.877852) calc(h + 27.5249)));
--st-archive-ink: var(--sk-st-archive-ink-1, oklch(from var(--sk-ink-muted) calc(l - 0.131963) calc(c * 0.645246) calc(h + 4.9794)));
--st-omitted: var(--sk-st-omitted-1, oklch(from var(--sk-danger) calc(l + 0.132995) calc(c * 0.366158) calc(h - 2.9576)));
--st-omitted-ink: var(--sk-st-omitted-ink-1, oklch(from var(--sk-danger) calc(l - 0.095811) calc(c * 0.546567) calc(h - 3.4546)));
--st-retake: var(--sk-st-retake-1, oklch(from var(--sk-danger) calc(l + 0.143885) calc(c * 0.932822) calc(h + 5.2202)));
--st-retake-ink: var(--sk-st-retake-ink-1, oklch(from var(--sk-danger) calc(l - 0.112013) calc(c * 0.651215) calc(h + 7.0785)));
--st-retake-2: var(--sk-st-retake-2-1, oklch(from var(--sk-danger) calc(l + 0.063436) calc(c * 0.933912) calc(h + 7.2194)));
--st-retake-2-ink: var(--sk-st-retake-2-ink-1, oklch(from var(--sk-danger) calc(l - 0.086768) calc(c * 0.784237) calc(h + 4.6696)));
--ring-upscaled-1: var(--sk-ring-upscaled-1-1, oklch(from var(--sk-gold) calc(l + 0.134322) calc(c * 1.096963) calc(h + 4.194)));
--ring-upscaled-2: var(--sk-ring-upscaled-2-1, oklch(from var(--sk-gold) calc(l + 0.006859) calc(c * 1.4238) calc(h - 0.7018)));
--ring-upscaled-3: var(--sk-ring-upscaled-3-1, oklch(from var(--sk-a2) calc(l - 0.219821) calc(c * 1.202169) calc(h + 9.8494)));
--ring-video-hero-1: var(--sk-ring-video-hero-1-1, oklch(from var(--sk-a1) calc(l + 0.223538) calc(c * 1.064801) calc(h - 3.9782)));
--ring-video-hero-2: var(--sk-ring-video-hero-2-1, var(--leaf-bright));
--ring-video-wip-1: oklch(from var(--sk-a3) calc(l + 0.215523) calc(c * 1.017619) calc(h + 1.0016));
--ring-video-wip-2: oklch(from var(--sk-a3) calc(l + 0.060757) calc(c * 1.554768) calc(h - 1.7432));
--ring-video-wip-3: oklch(from var(--sk-a3) calc(l - 0.262889) calc(c * 0.896444) calc(h - 1.1612));
--ring-hero-1: var(--sk-ring-hero-1-1, oklch(from var(--sk-a1) calc(l + 0.180832) calc(c * 0.78714) calc(h - 4.5074)));
--ring-hero-2: var(--sk-ring-hero-2-1, var(--leaf));
--ring-wip-1: oklch(from var(--sk-gold) calc(l + 0.087891) calc(c * 1.367387) calc(h - 6.1169));
--ring-wip-2: var(--gold-16);
--ring-wip-3: var(--warn-deep);
--ring-first-pass-1: oklch(from var(--sk-gold) calc(l + 0.127666) calc(c * 0.58753) calc(h + 6.152));
--ring-first-pass-2: oklch(from var(--sk-gold) calc(l + 0.014054) calc(c * 0.913214) calc(h + 3.8457));
--ring-first-pass-3: oklch(from var(--sk-gold) calc(l - 0.212131) calc(c * 0.792998) calc(h - 1.6601));
--ring-prompt-1: oklch(from var(--sk-gold) calc(l + 0.092406) calc(c * 0.631004) calc(h + 4.406));
--ring-prompt-2: var(--tan);
--ring-prompt-3: oklch(from var(--sk-gold) calc(l - 0.261165) calc(c * 0.592694) calc(h + 1.381));
--ring-pending-1: oklch(from var(--sk-gold) calc(l + 0.092438) calc(c * 0.39269) calc(h + 2.9758));
--ring-pending-2: var(--tan);
--ring-pending-3: oklch(from var(--sk-gold) calc(l - 0.185952) calc(c * 0.403007) calc(h - 2.8063));
--ring-archive-1: oklch(from var(--sk-surface-alt) calc(l - 0.084856) calc(c * 1.213714) calc(h - 1.9893));
--ring-archive-2: var(--archive);
--ring-archive-3: oklch(from var(--sk-ink-muted) calc(l - 0.08561) calc(c * 0.795749) calc(h - 1.5391));
--arc-shots-lo: oklch(from var(--sk-info) calc(l - 0.260209) calc(c * 0.663538) calc(h + 2.3282));
--arc-shots-mid: var(--sk-info);
--arc-shots-hi: oklch(from var(--sk-info) calc(l + 0.174501) calc(c * 0.58909) calc(h - 7.2327));
--arc-days-lo: oklch(from var(--sk-a2) calc(l - 0.362569) calc(c * 0.80949) calc(h + 9.9494));
--arc-days-mid: oklch(from var(--sk-gold) calc(l - 0.054557) calc(c * 1.570881) calc(h - 5.5151));
--arc-days-hi: oklch(from var(--sk-gold) calc(l + 0.0975) calc(c * 1.129017) calc(h + 2.279));
--arc-hours-lo: oklch(from var(--sk-a2) calc(l - 0.339206) calc(c * 1.012155) calc(h - 9.5525));
--arc-hours-mid: oklch(from var(--sk-a2) calc(l - 0.061214) calc(c * 1.336457) calc(h - 7.7321));
--arc-hours-hi: oklch(from var(--sk-a2) calc(l + 0.094811) calc(c * 0.974458) calc(h - 4.3376));
--arc-status-lo: oklch(from var(--sk-a1) calc(l - 0.322783) calc(c * 0.828198) calc(h + 5.073));
--arc-status-mid: var(--leaf-bright);
--arc-status-hi: oklch(from var(--sk-a1) calc(l + 0.223538) calc(c * 1.064801) calc(h - 3.9782));
--arc-review-lo: oklch(from var(--sk-a3) calc(l - 0.262889) calc(c * 0.896444) calc(h - 1.1612));
--arc-review-mid: oklch(from var(--sk-a3) calc(l + 0.060757) calc(c * 1.554768) calc(h - 1.7432));
--arc-review-hi: oklch(from var(--sk-a3) calc(l + 0.215523) calc(c * 1.017619) calc(h + 1.0016));
--arc-notes-lo: oklch(from var(--sk-a2) calc(l - 0.336486) calc(c * 0.922707) calc(h - 3.504));
--arc-notes-mid: var(--gold-16);
--arc-notes-hi: oklch(from var(--sk-gold) calc(l + 0.087891) calc(c * 1.367387) calc(h - 6.1169));
--arc-rejected-lo: oklch(from var(--sk-danger) calc(l - 0.219452) calc(c * 0.650355) calc(h - 1.3708));
--arc-rejected-mid: oklch(from var(--sk-danger) calc(l + 0.065711) calc(c * 0.897697) calc(h + 0.1911));
--arc-rejected-hi: oklch(from var(--sk-danger) calc(l + 0.2547) calc(c * 0.634438) calc(h + 8.5762));
--sand: oklch(from var(--sk-surface) calc(l - 0.049669) calc(c * 1.810864) calc(h + 2.5467));
--sand-2: oklch(from var(--sk-surface) calc(l - 0.001325) calc(c * 2.189074) calc(h + 4.4308));
--amber-deep: oklch(from var(--sk-a2) calc(l - 0.098345) calc(c * 0.990018) calc(h - 8.9195));
--amber-pale: oklch(from var(--sk-a2) calc(l + 0.099298) calc(c * 1.224481) calc(h + 16.0507));
--teal-deep: oklch(from var(--sk-a3) calc(l - 0.092731) calc(c * 1.008906) calc(h - 0.4848));
--teal-pale: oklch(from var(--sk-a3) calc(l + 0.094527) calc(c * 0.954069) calc(h + 0.1508));
--teal-bright: oklch(from var(--sk-a3) calc(l + 0.060757) calc(c * 1.554768) calc(h - 1.7432));
--tint-shot: oklch(from var(--sk-info) calc(l - 0.121115) calc(c * 0.738358) calc(h - 0.9704));
--tint-character: oklch(from var(--sk-plum) calc(l - 0.010645) calc(c * 1.383789) calc(h - 0.2194));
--tint-animal: oklch(from var(--sk-a3) calc(l - 0.062401) calc(c * 1.371025) calc(h - 24.9814));
--tint-location: oklch(from var(--sk-a2) calc(l - 0.133142) calc(c * 1.319623) calc(h + 4.7294));
--tint-prop: oklch(from var(--sk-a2) calc(l - 0.205402) calc(c * 0.862076) calc(h + 4.6903));
--tint-ref: oklch(from var(--sk-ink-muted) calc(l - 0.020044) calc(c * 0.951541) calc(h + 27.6592));
--tint-edit: oklch(from var(--sk-danger) calc(l + 0.009409) calc(c * 0.901347) calc(h + 6.5292));
--tint-general: oklch(from var(--sk-a1) calc(l - 0.140946) calc(c * 0.679487) calc(h + 5.0551));
--note-kind-shot: var(--tint-shot);
--note-kind-character: var(--tint-character);
--note-kind-animal: var(--tint-animal);
--note-kind-location: var(--tint-location);
--note-kind-prop: var(--tint-prop);
--note-kind-ref: var(--tint-ref);
--note-kind-edit: var(--tint-edit);
--note-kind-project: var(--tint-general);
--note-kind-other: var(--grey-5);
--note-src-modal: var(--tint-general);
--note-src-pdf: var(--tint-edit);
--note-src-edit: var(--tint-shot);
--note-src-general: var(--tint-ref);
--note-src-other: var(--grey-5);
--note-chip-all: var(--ink-moss);
--note-chip-base: var(--mix-light);
--note-thumb-base: var(--mix-light);
--cat-technical: oklch(from var(--sk-surface-alt) calc(l - 0.30541) calc(c * 1.247738) calc(h + 155.8011));
--cat-audio: var(--blue-14);
--cat-accuracy: oklch(from var(--sk-danger) calc(l - 0.034824) calc(c * 0.956461) calc(h - 2.7908));
--cat-vfx: oklch(from var(--sk-plum) calc(l + 0.011009) calc(c * 1.050587) calc(h + 0.0881));
--cat-redo: var(--red-1);
--danger-2: oklch(from var(--sk-danger) calc(l - 0.010443) calc(c * 0.989894) calc(h - 1.0595));
--danger-2-ink: oklch(from var(--sk-danger) calc(l - 0.054948) calc(c * 0.904604) calc(h - 0.1133));
--danger-3: oklch(from var(--sk-danger) calc(l - 0.021801) calc(c * 1.051094) calc(h - 4.2796));
--danger-3-ink: oklch(from var(--sk-danger) calc(l - 0.098347) calc(c * 0.86843) calc(h - 3.7152));
--danger-4: oklch(from var(--sk-danger) calc(l - 0.023366) calc(c * 0.791151) calc(h - 3.1734));
--red-1: var(--sk-danger);
--red-1-deep: oklch(from var(--sk-danger) calc(l - 0.095845) calc(c * 0.895105) calc(h - 0.3121));
--red-2: oklch(from var(--sk-danger) calc(l - 0.001328) calc(c * 1.006597) calc(h - 0.4415));
--red-3: oklch(from var(--sk-danger) calc(l + 0.023805) calc(c * 0.869388) calc(h + 0.7998));
--red-4: oklch(from var(--sk-danger) calc(l - 0.108084) calc(c * 0.915491) calc(h + 0.5242));
--red-5: oklch(from var(--sk-danger) calc(l - 0.108098) calc(c * 0.893922) calc(h - 1.0767));
--red-6: oklch(from var(--sk-danger) calc(l - 0.101482) calc(c * 0.848569) calc(h - 9.6304));
--red-7: oklch(from var(--sk-danger) calc(l - 0.10002) calc(c * 0.84006) calc(h - 9.7604));
--red-8: oklch(from var(--sk-danger) calc(l - 0.084605) calc(c * 0.755146) calc(h - 3.5744));
--red-9: oklch(from var(--sk-danger) calc(l - 0.084869) calc(c * 0.771325) calc(h + 3.9096));
--red-10: oklch(from var(--sk-danger) calc(l - 0.001881) calc(c * 0.788009) calc(h + 11.8342));
--red-11: oklch(from var(--sk-danger) calc(l - 0.053209) calc(c * 0.88654) calc(h - 5.8539));
--red-12: oklch(from var(--sk-danger) calc(l - 0.039285) calc(c * 1.048522) calc(h - 8.792));
--red-13: oklch(from var(--sk-danger) calc(l - 0.038026) calc(c * 1.203614) calc(h - 4.819));
--red-14: oklch(from var(--sk-danger) calc(l - 0.009513) calc(c * 1.03367) calc(h - 2.0958));
--red-15: oklch(from var(--sk-danger) calc(l + 0.045807) calc(c * 0.798595) calc(h + 12.7375));
--red-16: oklch(from var(--sk-danger) calc(l + 0.025095) calc(c * 0.680191) calc(h + 3.3605));
--red-17: oklch(from var(--sk-danger) calc(l + 0.00038) calc(c * 0.995174) calc(h - 1.163));
--red-18: oklch(from var(--sk-danger) calc(l - 0.002743) calc(c * 0.938922) calc(h - 10.5426));
--red-19: oklch(from var(--sk-danger) calc(l - 0.030484) calc(c * 0.831199) calc(h - 2.1932));
--red-20: oklch(from var(--sk-danger) calc(l + 0.041511) calc(c * 1.028872) calc(h - 0.4472));
--red-21: oklch(from var(--sk-danger) calc(l + 0.019985) calc(c * 0.690782) calc(h - 12.6743));
--red-22: oklch(from var(--sk-danger) calc(l + 0.059622) calc(c * 0.975977) calc(h + 16.2233));
--red-23: oklch(from var(--sk-danger) calc(l + 0.043807) calc(c * 0.81631) calc(h + 10.9846));
--red-24: oklch(from var(--sk-danger) calc(l + 0.033879) calc(c * 1.08323) calc(h - 3.3806));
--red-25: oklch(from var(--sk-danger) calc(l + 0.082246) calc(c * 0.894213) calc(h + 12.9844));
--red-26: oklch(from var(--sk-danger) calc(l - 0.020238) calc(c * 0.817675) calc(h + 11.0855));
--red-27: oklch(from var(--sk-danger) calc(l + 0.081141) calc(c * 1.185623) calc(h - 9.7675));
--red-27-ink: oklch(from var(--sk-danger) calc(l + 0.297966) calc(c * 0.471121) calc(h - 14.8755));
--red-28: oklch(from var(--sk-danger) calc(l - 0.090809) calc(c * 0.82409) calc(h - 4.2851));
--red-29: oklch(from var(--sk-danger) calc(l - 0.136306) calc(c * 0.725708) calc(h - 7.4675));
--red-30: oklch(from var(--sk-danger) calc(l + 0.183684) calc(c * 0.712143) calc(h - 13.5576));
--red-31: oklch(from var(--sk-danger) calc(l + 0.015109) calc(c * 0.919213) calc(h + 1.6862));
--orange-1: oklch(from var(--sk-warn) calc(l - 0.041727) calc(c * 1.38057) calc(h - 15.2512));
--orange-1-ink: oklch(from var(--sk-warn) calc(l + 0.085637) calc(c * 1.154063) calc(h - 16.7526));
--ink-on-danger: oklch(from var(--sk-ink-on-dark) calc(l + 0.090725) calc(c * 0.220015) calc(h - 42.3585));
--blue: oklch(from var(--sk-info) calc(l - 0.065951) calc(c * 0.91826) calc(h + 11.7321));
--blue-2: oklch(from var(--sk-info) calc(l - 0.081695) calc(c * 0.970337) calc(h + 12.5101));
--blue-3: oklch(from var(--sk-info) calc(l - 0.125726) calc(c * 0.948848) calc(h + 12.8043));
--blue-4: oklch(from var(--sk-info) calc(l - 0.181457) calc(c * 0.95533) calc(h + 12.6019));
--blue-5: oklch(from var(--sk-info) calc(l + 0.041448) calc(c * 0.870938) calc(h - 5.9959));
--blue-5-ink: oklch(from var(--sk-info) calc(l - 0.187815) calc(c * 0.625637) calc(h - 15.0403));
--blue-6: oklch(from var(--sk-info) calc(l + 0.056387) calc(c * 0.765263) calc(h + 8.57));
--blue-7: oklch(from var(--sk-info) calc(l - 0.266039) calc(c * 0.650562) calc(h + 9.3109));
--blue-8: oklch(from var(--sk-info) calc(l - 0.059139) calc(c * 1.000871) calc(h + 8.768));
--blue-9: oklch(from var(--sk-info) calc(l + 0.00514) calc(c * 0.954738) calc(h + 18.6976));
--blue-10: oklch(from var(--sk-info) calc(l + 0.090932) calc(c * 0.901023) calc(h + 11.8527));
--blue-11: oklch(from var(--sk-info) calc(l + 0.299682) calc(c * 0.233944) calc(h + 24.0542));
--blue-12: oklch(from var(--sk-info) calc(l + 0.275852) calc(c * 0.318062) calc(h + 9.8465));
--blue-13: oklch(from var(--sk-info) calc(l + 0.186451) calc(c * 0.580241) calc(h + 10.595));
--blue-14: oklch(from var(--sk-info) calc(l - 0.10493) calc(c * 0.63505) calc(h + 0.0935));
--blue-15: oklch(from var(--sk-info) calc(l - 0.002101) calc(c * 0.733962) calc(h - 3.4066));
--blue-16: var(--sk-blue-16-1, oklch(from var(--sk-info) calc(l - 0.121115) calc(c * 0.738358) calc(h - 0.9704)));
--blue-17: oklch(from var(--sk-info) calc(l + 0.050237) calc(c * 1.239289) calc(h - 8.62));
--blue-18: oklch(from var(--sk-info) calc(l + 0.062045) calc(c * 1.153594) calc(h - 8.0676));
--blue-19: oklch(from var(--sk-info) calc(l + 0.113164) calc(c * 0.865859) calc(h - 4.2201));
--blue-20: oklch(from var(--sk-info) calc(l - 0.238462) calc(c * 0.685002) calc(h - 2.7121));
--blue-21: oklch(from var(--sk-info) calc(l - 0.242929) calc(c * 0.550441) calc(h + 4.684));
--blue-22: oklch(from var(--sk-info) calc(l + 0.003632) calc(c * 0.49128) calc(h + 13.9712));
--blue-23: oklch(from var(--sk-info) calc(l - 0.169596) calc(c * 0.578588) calc(h + 1.117));
--blue-24: oklch(from var(--sk-info) calc(l - 0.226808) calc(c * 0.532477) calc(h + 0.6473));
--blue-26: oklch(from var(--sk-info) calc(l - 0.017179) calc(c * 0.836477) calc(h - 7.0115));
--blue-27: oklch(from var(--sk-info) calc(l - 0.12938) calc(c * 0.793674) calc(h - 1.6721));
--blue-28: oklch(from var(--sk-info) calc(l + 0.324191) calc(c * 0.300455) calc(h - 19.0952));
--blue-29: oklch(from var(--sk-info) calc(l - 0.360238) calc(c * 0.465381) calc(h + 7.0041));
--blue-30: oklch(from var(--sk-info) calc(l + 0.122839) calc(c * 0.566868) calc(h + 9.1226));
--blue-31: oklch(from var(--sk-info) calc(l - 0.058286) calc(c * 0.620892) calc(h + 12.4823));
--blue-32: oklch(from var(--sk-info) calc(l + 0.270244) calc(c * 0.271424) calc(h + 8.8258));
--blue-33: oklch(from var(--sk-info) calc(l + 0.313724) calc(c * 0.273999) calc(h + 12.2397));
--blue-34: oklch(from var(--sk-info) calc(l - 0.394348) calc(c * 0.421691) calc(h + 20.4782));
--blue-35: oklch(from var(--sk-info) calc(l + 0.187003) calc(c * 0.423301) calc(h + 7.7727));
--blue-36: oklch(from var(--sk-info) calc(l - 0.399852) calc(c * 0.198481) calc(h + 5.8316));
--blue-37: oklch(from var(--sk-info) calc(l - 0.393254) calc(c * 0.410299) calc(h - 12.7856));
--blue-38: oklch(from var(--sk-info) calc(l + 0.304411) calc(c * 0.306896) calc(h - 13.6391));
--blue-39: oklch(from var(--sk-info) calc(l - 0.424151) calc(c * 0.102567) calc(h + 5.4636));
--lock: oklch(from var(--sk-a3) calc(l + 0.037294) calc(c * 1.482863) calc(h + 18.9518));
--lock-ink: oklch(from var(--sk-a3) calc(l - 0.357438) calc(c * 0.698349) calc(h + 29.8305));
--lock-line: oklch(from var(--sk-a3) calc(l + 0.30042) calc(c * 0.535918) calc(h + 21.3958));
--purple: var(--sk-plum);
--purple-2: oklch(from var(--sk-plum) calc(l + 0.111522) calc(c * 0.875112) calc(h - 1.6057));
--purple-3: oklch(from var(--sk-plum) calc(l + 0.033812) calc(c * 0.988683) calc(h + 0.2408));
--purple-4: oklch(from var(--sk-plum) calc(l - 0.056272) calc(c * 0.950788) calc(h + 3.2715));
--purple-5: oklch(from var(--sk-plum) calc(l - 0.093296) calc(c * 1.087634) calc(h - 4.7408));
--purple-6: oklch(from var(--sk-plum) calc(l + 0.085341) calc(c * 1.190357) calc(h + 1.6981));
--teal-2: oklch(from var(--sk-a3) calc(l - 0.092302) calc(c * 0.997827) calc(h - 0.5505));
--teal-2-ink: oklch(from var(--sk-a3) calc(l - 0.173129) calc(c * 0.87586) calc(h - 2.0594));
--teal-3: oklch(from var(--sk-a3) calc(l - 0.082271) calc(c * 1.039437) calc(h + 7.2951));
--teal-3-ink: oklch(from var(--sk-a3) calc(l - 0.144814) calc(c * 0.967604) calc(h + 3.0488));
--teal-4-ink: oklch(from var(--sk-a3) calc(l - 0.269339) calc(c * 0.773768) calc(h - 2.2287));
--teal-4-hi: oklch(from var(--sk-a3) calc(l + 0.329508) calc(c * 0.542361) calc(h - 1.9224));
--teal-4-lo: oklch(from var(--sk-a3) calc(l - 0.354208) calc(c * 0.609583) calc(h - 5.5748));
--grey-1: oklch(from var(--sk-ink-muted) calc(l + 0.04932) calc(c * 0.724249) calc(h - 175.1861));
--grey-1-ink: oklch(from var(--sk-ink-muted) calc(l - 0.348879) calc(c * 0.597849) calc(h + 177.2277));
--grey-2: oklch(from var(--sk-ink-muted) calc(l + 0.398983) calc(c * 0.337813) calc(h + 178.7357));
--grey-3: oklch(from var(--sk-ink-muted) calc(l + 0.047307) calc(c * 0.653184) calc(h + 59.8362));
--grey-3-ink: oklch(from var(--sk-ink-muted) calc(l + 0.001022) calc(c * 0.622521) calc(h + 52.9941));
--grey-4: oklch(from var(--sk-ink-muted) calc(l + 0.029898) 0 h);
--grey-4-ink: oklch(from var(--sk-ink-muted) calc(l - 0.093253) 0 h);
--grey-5: oklch(from var(--sk-ink-muted) calc(l + 0.083968) 0 h);
--grey-6: oklch(from var(--sk-ink-muted) calc(l + 0.249289) 0 h);
--grey-7: oklch(from var(--sk-ink-muted) calc(l + 0.195233) 0 h);
--grey-8: oklch(from var(--sk-ink-muted) calc(l + 0.4069) calc(c * 0.098308) calc(h - 153.2518));
--grey-8-ink: oklch(from var(--sk-ink-muted) calc(l - 0.130726) calc(c * 0.48762) calc(h - 153.7952));
--grey-9: oklch(from var(--sk-ink-muted) calc(l + 0.133524) calc(c * 0.537436) calc(h - 153.5969));
--grey-10: oklch(from var(--sk-ink-muted) calc(l + 0.365652) calc(c * 0.298681) calc(h - 153.3632));
--grey-11: oklch(from var(--sk-ink-muted) calc(l + 0.406333) 0 h);
--grey-12: oklch(from var(--sk-ink-muted) calc(l - 0.253706) 0 h);
--grey-13: oklch(from var(--sk-ink-muted) calc(l - 0.351534) 0 h);
--grey-14: oklch(from var(--sk-ink-muted) calc(l + 0.245303) calc(c * 1.100109) calc(h + 49.2888));
--grey-15: oklch(from var(--sk-ink-muted) calc(l + 0.100906) calc(c * 0.896221) calc(h + 44.2579));
--grey-16: oklch(from var(--sk-ink-muted) calc(l + 0.177004) calc(c * 1.137484) calc(h + 65.6453));
--ink-gold: oklch(from var(--sk-gold) calc(l - 0.253475) calc(c * 1.275752) calc(h + 0.0158));
--ink-gold-2: oklch(from var(--sk-gold) calc(l - 0.192519) calc(c * 1.525827) calc(h - 7.0792));
--ink-gold-3: oklch(from var(--sk-gold) calc(l - 0.359504) calc(c * 1.16477) calc(h - 3.5218));
--ink-gold-4: oklch(from var(--sk-gold) calc(l - 0.294003) calc(c * 1.313203) calc(h - 16.5312));
--ink-gold-5: oklch(from var(--sk-gold) calc(l - 0.285942) calc(c * 1.138669) calc(h - 20.5424));
--late-ink: oklch(from var(--sk-gold) calc(l - 0.272205) calc(c * 1.436315) calc(h - 27.1935));
--gold-star: oklch(from var(--sk-gold) calc(l + 0.050573) calc(c * 1.720379) calc(h + 0.1062));
--amber-2: oklch(from var(--sk-a2) calc(l + 0.021953) calc(c * 1.504435) calc(h + 5.3723));
--amber-2-line: oklch(from var(--sk-a2) calc(l - 0.128247) calc(c * 1.243901) calc(h + 3.7409));
--amber-3: oklch(from var(--sk-a2) calc(l - 0.133514) calc(c * 1.32242) calc(h - 8.3027));
--amber-4: oklch(from var(--sk-a2) calc(l - 0.161991) calc(c * 1.28528) calc(h - 13.7645));
--ink-on-amber: oklch(from var(--sk-ink) calc(l + 0.01223) calc(c + 0.033885) calc(h - 16.6419));
--ink-on-gold: oklch(from var(--sk-ink) calc(l - 0.025199) calc(c + 0.0186) calc(h + 57.4671));
--ink-on-gold-2: oklch(from var(--sk-ink) calc(l - 0.036327) calc(c + 0.01579) calc(h + 7.2259));
--ink-on-gold-3: oklch(from var(--sk-ink) calc(l - 0.069711) calc(c + 0.01038) calc(h + 13.6094));
--ink-on-gold-4: oklch(from var(--sk-ink) calc(l - 0.053104) 0 h);
--ink-on-leaf-3: oklch(from var(--sk-ink) calc(l - 0.094475) calc(c + 0.007516) calc(h + 39.4963));
--gold-19: oklch(from var(--sk-gold) calc(l - 0.095934) calc(c * 1.322374) calc(h + 8.187));
--gold-20: oklch(from var(--sk-gold) calc(l - 0.239657) calc(c * 1.299964) calc(h - 6.8709));
--gold-21: oklch(from var(--sk-gold) calc(l + 0.039517) calc(c * 1.103344) calc(h - 6.0808));
--gold-22: oklch(from var(--sk-gold) calc(l - 0.204053) calc(c * 1.472153) calc(h - 13.243));
--forest-7: oklch(from var(--sk-a1) calc(l - 0.164721) calc(c * 1.248559) calc(h + 4.8593));
--forest-8: oklch(from var(--sk-a1) calc(l - 0.218973) calc(c * 0.920717) calc(h + 3.9431));
--tan-2: oklch(from var(--sk-surface) calc(l - 0.021985) calc(c * 1.639473) calc(h + 2.5191));
--tan-3: oklch(from var(--sk-surface) calc(l + 0.001196) calc(c * 2.221088) calc(h + 1.1044));
--tan-4: oklch(from var(--sk-surface) calc(l - 0.212233) calc(c * 1.726312) calc(h + 2.5762));
--tan-deep-2: oklch(from var(--sk-ink-muted) calc(l + 0.038715) calc(c * 2.262767) calc(h + 4.4748));
--tan-deep-3: oklch(from var(--sk-ink-muted) calc(l + 0.045457) calc(c * 2.259322) calc(h + 4.4969));
--taupe-6: oklch(from var(--sk-ink-muted) calc(l - 0.001027) calc(c * 1.193193) calc(h + 4.9245));
--taupe-8: oklch(from var(--sk-ink-muted) calc(l - 0.003374) calc(c * 1.682559) calc(h + 12.2118));
--umber-6: oklch(from var(--sk-ink) calc(l + 0.041778) calc(c + 0.018658) calc(h - 1.5163));
--umber-7: oklch(from var(--sk-ink) calc(l + 0.160133) calc(c + 0.032547) calc(h + 10.8631));
--ink-2: oklch(from var(--sk-ink) calc(l + 0.015126) calc(c + 0.006084) calc(h + 10.732));
--ink-3: oklch(from var(--sk-ink) calc(l + 0.010749) calc(c + 0.005286) calc(h + 29.4017));
--ink-4: oklch(from var(--sk-ink) calc(l + 0.013057) calc(c - 0.00155) calc(h + 21.1954));
--ink-5: oklch(from var(--sk-ink) calc(l + 0.127078) calc(c + 0.018767) calc(h + 6.3312));
--ink-6: oklch(from var(--sk-ink-muted) calc(l - 0.038816) calc(c * 1.164354) calc(h + 11.4397));
--ink-7: oklch(from var(--sk-ink-muted) calc(l - 0.031567) calc(c * 0.717691) calc(h + 8.4661));
--ink-8: oklch(from var(--sk-ink-muted) calc(l + 0.004898) calc(c * 1.385787) calc(h + 8.4647));
--ink-9: oklch(from var(--sk-ink-muted) calc(l + 0.072277) calc(c * 0.703709) calc(h + 4.9921));
--ink-slide-sub: oklch(from var(--sk-ink) calc(l + 0.10975) calc(c + 0.0106) calc(h + 49.596));
--cream-11: oklch(from var(--sk-surface-alt) calc(l + 0.059005) calc(c * 0.683948) calc(h + 4.4627));
--cream-12: oklch(from var(--sk-surface-alt) calc(l + 0.062006) calc(c * 0.511181) calc(h + 5.6606));
--cream-13: oklch(from var(--sk-surface-alt) calc(l + 0.060062) calc(c * 0.468324) calc(h - 1.0368));
--cream-14: oklch(from var(--sk-surface-alt) calc(l + 0.059531) calc(c * 0.575606) calc(h + 2.2213));
--cream-15: oklch(from var(--sk-surface-alt) calc(l + 0.054097) calc(c * 0.469017) calc(h - 1.0362));
--cream-16: oklch(from var(--sk-surface-alt) calc(l + 0.06308) calc(c * 0.294677) calc(h - 2.1155));
--cream-17: oklch(from var(--sk-surface-alt) calc(l + 0.064754) calc(c * 0.393823) calc(h + 9.2222));
--cream-18: oklch(from var(--sk-surface-alt) calc(l + 0.062541) calc(c * 0.40217) calc(h + 2.8086));
--cream-19: oklch(from var(--sk-surface-alt) calc(l + 0.045112) calc(c * 0.643617) calc(h - 0.5234));
--cream-20: oklch(from var(--sk-surface-alt) calc(l + 0.044588) calc(c * 0.750927) calc(h + 1.9231));
--cream-21: oklch(from var(--sk-surface-alt) calc(l + 0.045628) calc(c * 0.71064) calc(h - 2.7594));
--cream-22: oklch(from var(--sk-surface-alt) calc(l + 0.04784) calc(c * 0.696629) calc(h + 0.7922));
--cream-23: oklch(from var(--sk-surface-alt) calc(l + 0.051796) calc(c * 0.447916) calc(h + 15.8351));
--cream-24: oklch(from var(--sk-surface-alt) calc(l + 0.06033) calc(c * 0.415387) calc(h - 3.2871));
--cream-25: oklch(from var(--sk-surface-alt) calc(l + 0.061477) calc(c * 0.620814) calc(h + 7.5213));
--cream-26: oklch(from var(--sk-surface-alt) calc(l + 0.009081) calc(c * 1.737299) calc(h + 0.9639));
--cream-27: oklch(from var(--sk-surface-alt) calc(l + 0.016814) calc(c * 1.0921) calc(h + 3.9834));
--cream-28: oklch(from var(--sk-surface-alt) calc(l - 0.039229) calc(c * 1.816413) calc(h - 4.8026));
--cream-29: oklch(from var(--sk-surface-alt) calc(l - 0.002438) calc(c * 1.240679) calc(h - 1.1795));
--ivory: oklch(from var(--sk-surface-alt) calc(l + 0.064859) calc(c * 0.834572) calc(h + 15.9938));
--ivory-2: oklch(from var(--sk-surface-alt) calc(l + 0.067508) calc(c * 0.279195) calc(h + 15.7612));
--ivory-3: oklch(from var(--sk-surface-alt) calc(l + 0.066167) calc(c * 0.557433) calc(h + 15.8782));
--mint-2: oklch(from var(--sk-surface-alt) calc(l + 0.046156) calc(c * 0.868017) calc(h + 31.0733));
--mint-3: oklch(from var(--sk-surface-alt) calc(l + 0.04422) calc(c * 0.655479) calc(h + 36.06));
--mint-4: oklch(from var(--sk-surface-alt) calc(l + 0.038454) calc(c * 0.750368) calc(h + 29.9226));
--mint-5: oklch(from var(--sk-surface-alt) calc(l + 0.019642) calc(c * 0.970426) calc(h + 37.9738));
--mint-6: oklch(from var(--sk-surface-alt) calc(l + 0.029986) calc(c * 0.643824) calc(h + 32.2848));
--mint-7: oklch(from var(--sk-surface-alt) calc(l + 0.040687) calc(c * 0.251466) calc(h + 79.6922));
--ied-ink: oklch(from var(--sk-ink-on-dark) calc(l + 0.036222) calc(c * 0.273392) calc(h + 4.9064));
--ied-ink-2: oklch(from var(--sk-ink-on-dark) calc(l + 0.04175) calc(c * 0.324308) calc(h + 7.1508));
--ied-ink-3: oklch(from var(--sk-ink-on-dark) calc(l + 0.063147) calc(c * 0.296972) calc(h + 6.1185));
--ied-ink-4: oklch(from var(--sk-ink-on-dark) calc(l + 0.012143) calc(c * 0.33199) calc(h + 3.4801));
--ied-ink-5: oklch(from var(--sk-ink-on-dark) calc(l + 0.02433) calc(c * 0.330918) calc(h + 3.4777));
--ied-bg: oklch(from var(--sk-deep) calc(l - 0.010187) calc(c - 0.00179) calc(h - 13.3804));
--ied-bg-2: oklch(from var(--sk-deep) calc(l - 0.053914) calc(c - 0.006824) calc(h - 12.9362));
--ied-bg-3: oklch(from var(--sk-deep) calc(l + 0.016373) calc(c - 0.003961) calc(h - 11.5286));
--ied-bg-4: oklch(from var(--sk-deep) calc(l + 0.009447) calc(c - 0.007899) calc(h - 12.9155));
--ied-bg-5: oklch(from var(--sk-deep) calc(l - 0.013242) calc(c - 0.00399) calc(h - 17.2803));
--ied-bg-6: oklch(from var(--sk-deep) calc(l - 0.05198) calc(c - 0.011477) calc(h - 15.7581));
--ied-bg-7: oklch(from var(--sk-deep) calc(l + 0.023625) calc(c - 0.005875) calc(h + 7.2475));
--ied-bg-8: oklch(from var(--sk-deep) calc(l + 0.043341) 0 h);
--ied-bg-9: oklch(from var(--sk-deep) calc(l - 0.001352) calc(c - 0.00194) calc(h - 13.449));
--ied-bg-10: oklch(from var(--sk-deep) calc(l - 0.003336) calc(c - 0.009548) calc(h - 9.0059));
--ied-bg-11: oklch(from var(--sk-deep) calc(l - 0.044119) calc(c - 0.009093) calc(h - 8.8553));
--ied-bg-12: oklch(from var(--sk-deep) calc(l - 0.048797) calc(c - 0.009038) calc(h - 8.8207));
--ied-bg-13: oklch(from var(--sk-deep) calc(l - 0.071157) calc(c - 0.012646) calc(h - 9.7475));
--shade-8: oklch(from var(--sk-deep) calc(l - 0.006804) calc(c - 0.001286) calc(h - 8.5043));
--shade-9: oklch(from var(--sk-deep) calc(l - 0.026232) calc(c - 0.005762) calc(h - 46.1245));
--shade-10: oklch(from var(--sk-deep) calc(l - 0.037235) calc(c + 0.004095) calc(h - 52.21));
--shade-11: oklch(from var(--sk-deep) calc(l - 0.025706) calc(c - 0.00024) calc(h - 3.9458));
--shade-12: oklch(from var(--sk-deep) calc(l + 0.054521) calc(c + 0.00813) calc(h + 2.4614));
--shade-13: oklch(from var(--sk-deep) calc(l - 0.006146) calc(c - 0.004707) calc(h - 2.7627));
--shade-14: oklch(from var(--sk-deep) calc(l + 0.005913) calc(c + 0.006175) calc(h - 0.6096));
--shade-15: oklch(from var(--sk-deep) calc(l + 0.012473) calc(c + 0.009108) calc(h + 2.4368));
--shade-16: oklch(from var(--sk-deep) calc(l + 0.040927) calc(c + 0.000913) calc(h + 7.0573));
--shade-17: oklch(from var(--sk-deep) calc(l + 0.006843) calc(c + 0.00155) calc(h + 6.9351));
--shade-18: oklch(from var(--sk-deep) calc(l + 0.019949) calc(c + 0.007736) calc(h + 11.2231));
--shade-19: oklch(from var(--sk-deep) calc(l + 0.010804) calc(c + 0.010786) calc(h + 6.5928));
--shade-20: oklch(from var(--sk-deep) calc(l + 0.064853) calc(c + 0.018277) calc(h + 6.5793));
--shade-21: oklch(from var(--sk-deep) calc(l + 0.020604) calc(c + 0.005067) calc(h + 17.0884));
--shade-22: oklch(from var(--sk-deep) calc(l + 0.113822) calc(c + 0.011959) calc(h + 14.2491));
--shade-23: oklch(from var(--sk-deep) calc(l + 0.094187) calc(c + 0.0117) calc(h - 2.5707));
--shade-24: oklch(from var(--sk-deep) calc(l + 0.033752) calc(c + 0.002567) calc(h - 4.8956));
--shade-25: oklch(from var(--sk-deep) calc(l + 0.045682) calc(c - 0.005414) calc(h - 59.8825));
--shade-26: oklch(from var(--sk-deep) calc(l - 0.035362) calc(c - 0.005646) calc(h - 46.1238));
--shade-27: oklch(from var(--sk-deep) calc(l + 0.004937) calc(c - 0.000228) calc(h - 63.3357));
--shade-28: oklch(from var(--sk-deep) calc(l - 0.039832) calc(c - 0.007283) calc(h - 12.6591));
--shade-29: oklch(from var(--sk-deep) calc(l - 0.015693) calc(c - 0.001121) calc(h - 8.4455));
--shade-30: oklch(from var(--sk-deep) calc(l - 0.046294) calc(c - 0.002683) calc(h - 11.3617));
--shade-31: oklch(from var(--sk-deep) calc(l - 0.033355) calc(c - 0.000967) calc(h - 53.3705));
--shade-32: oklch(from var(--sk-deep) calc(l - 0.085606) calc(c - 0.00279) calc(h - 46.9961));
--shade-33: oklch(from var(--sk-deep) calc(l - 0.025565) calc(c - 0.009347) calc(h - 53.3568));
--shade-34: oklch(from var(--sk-deep) calc(l + 0.040288) calc(c + 0.003889) calc(h + 1.5062));
--shade-35: oklch(from var(--sk-deep) calc(l + 0.049832) calc(c + 0.001382) calc(h - 53.4928));
--shade-36: oklch(from var(--sk-deep) calc(l - 0.020801) calc(c + 0.001041) calc(h - 29.8357));
--shade-37: oklch(from var(--sk-deep) calc(l - 0.007112) calc(c + 0.000438) calc(h - 10.4854));
--shade-38: oklch(from var(--sk-deep) calc(l - 0.004018) calc(c + 0.002673) calc(h - 8.2694));
--shade-39: oklch(from var(--sk-deep) calc(l - 0.03207) calc(c - 0.004982) calc(h - 8.6183));
--shade-40: oklch(from var(--sk-deep) calc(l + 0.010505) calc(c + 0.001406) calc(h - 49.1958));
--shade-41: oklch(from var(--sk-deep) calc(l - 0.06149) calc(c - 0.002538) calc(h - 3.8655));
--shade-42: oklch(from var(--sk-deep) calc(l - 0.0714) calc(c - 0.002935) calc(h + 0.4802));
--shade-43: oklch(from var(--sk-deep) calc(l - 0.002502) calc(c + 0.00481) calc(h + 1.5133));
--shade-44: oklch(from var(--sk-deep) calc(l - 0.011591) calc(c + 0.006596) calc(h - 0.5612));
--shade-45: oklch(from var(--sk-deep) calc(l + 0.014542) calc(c + 0.005975) calc(h - 0.6294));
--shade-46: oklch(from var(--sk-deep) calc(l - 0.051723) calc(c - 0.003682) calc(h - 3.0935));
--shade-47: oklch(from var(--sk-deep) calc(l - 0.036973) calc(c - 0.00048) calc(h + 14.0605));
--shade-48: oklch(from var(--sk-deep) calc(l - 0.005248) calc(c + 0.005587) calc(h + 16.6924));
--shade-49: oklch(from var(--sk-deep) calc(l - 0.017021) calc(c + 0.001266) calc(h - 6.2872));
--shade-50: oklch(from var(--sk-deep) calc(l - 0.022259) calc(c - 0.00986) calc(h - 42.445));
--shade-51: oklch(from var(--sk-deep) calc(l + 0.058185) calc(c + 0.011853) calc(h + 16.0305));
--shade-52: oklch(from var(--sk-deep) calc(l + 0.016342) calc(c + 0.005151) calc(h + 17.0308));
--shade-53: oklch(from var(--sk-deep) calc(l - 0.033277) calc(c + 0.000477) calc(h + 16.9642));
--shade-54: oklch(from var(--sk-deep) calc(l + 0.044544) calc(c + 0.009969) calc(h + 6.7693));
--shade-55: oklch(from var(--sk-deep) calc(l + 0.060451) calc(c + 0.012449) calc(h + 3.0961));
--shade-56: oklch(from var(--sk-deep) calc(l + 0.027641) calc(c - 0.005892) calc(h - 53.3684));
--shade-57: oklch(from var(--sk-deep) calc(l + 0.069843) calc(c - 0.002571) calc(h - 53.383));
--shade-58: oklch(from var(--sk-deep) calc(l + 0.044767) calc(c - 0.000671) calc(h - 51.0748));
--shade-59: oklch(from var(--sk-deep) calc(l + 0.060045) calc(c - 0.000127) calc(h - 6.6435));
--shade-60: oklch(from var(--sk-deep) calc(l + 0.022936) calc(c - 0.002771) calc(h - 1.1887));
--shade-61: oklch(from var(--sk-deep) calc(l + 0.123007) calc(c + 0.021896) calc(h - 8.0038));
--shade-62: oklch(from var(--sk-deep) calc(l + 0.053386) calc(c - 0.002373) calc(h - 53.4006));
--shade-63: oklch(from var(--sk-deep) calc(l - 0.033972) calc(c + 0.002933) calc(h - 48.4275));
--shade-64: oklch(from var(--sk-deep) calc(l - 0.039154) calc(c - 0.002103) calc(h - 70.8936));
--cream-30: oklch(from var(--sk-surface-alt) calc(l + 0.021636) calc(c * 0.88837) calc(h - 2.0361));
--amber-5: oklch(from var(--sk-a2) calc(l - 0.127934) calc(c * 1.094253) calc(h - 13.2182));
--blue-40: oklch(from var(--sk-info) calc(l + 0.061813) calc(c * 0.824541) calc(h - 32.6485));
--blue-41: oklch(from var(--sk-info) calc(l - 0.054778) calc(c * 1.305688) calc(h + 17.0824));
--blue-41-ink: oklch(from var(--sk-info) calc(l - 0.197243) calc(c * 1.080117) calc(h + 15.3941));
--ink-blue-37: var(--blue-37);
--ink-mint-7: var(--mint-7);
--ink-mint-5: var(--mint-5);
--ink-blue-14: var(--sk-ink-blue-14-1, var(--blue-14));
--ink-mint-4: var(--mint-4);
--ink-blue-23: var(--blue-23);
--ink-blue-24: var(--blue-24);
--ink-blue-7: var(--blue-7);
--ink-grey-7: var(--grey-7);
--ink-mint-3: var(--mint-3);
--ink-grey-11: var(--grey-11);
--ink-ied-bg-6: var(--ied-bg-6);
--ink-blue-4: var(--blue-4);
--ink-blue-3: var(--blue-3);
--ink-purple-4: var(--purple-4);
--ink-grey-5: var(--grey-5);
--ink-blue-16: var(--blue-16);
--ink-purple-5: var(--purple-5);
--ink-blue-32: var(--blue-32);
--ink-blue-20: var(--blue-20);
--ink-blue-21: var(--blue-21);
--ink-grey-12: var(--grey-12);
--ink-grey-16: var(--grey-16);
--ink-forest-7: var(--forest-7);
--ink-grey-15: var(--grey-15);
--ink-accent: var(--sk-ink-accent-1, var(--leaf));
--thumb-tag-bg: var(--sk-thumb-tag-bg-1, oklch(from var(--sk-dark) l 0 h / 0.35));
--thumb-tag-ink: color-mix(in srgb, var(--white) 90%, transparent);
--thumb-inset-hi: oklch(from var(--sk-light) l 0 h / 0.18);
--media-thumb-inset-hi: oklch(from var(--sk-light) l 0 h / 0.1);
--panel-text-shadow-color: oklch(from var(--sk-dark) l 0 h / 0.35);
--donut-shadow-color: var(--shade-38);
--donut-join-shadow: var(--black);
--donut-focus-glow: var(--black);
--fab-ink: var(--white);
--status-pill-bevel-hi: oklch(from var(--sk-light) l 0 h / 0.3);
--status-pill-bevel-lo: oklch(from var(--sk-dark) l 0 h / 0.18);
--status-pill-drop: oklch(from var(--sk-dark) l 0 h / 0.2);
--shadow-glass: inset 0 1px 0 color-mix(in srgb, var(--hi) 65%, transparent), inset 1px 0 0 color-mix(in srgb, var(--hi-2) 35%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 8%, transparent), inset -1px 0 0 color-mix(in srgb, var(--shadow-ink-2) 5%, transparent), 0 2px 6px color-mix(in srgb, var(--shadow-ink) 12%, transparent), 0 14px 28px color-mix(in srgb, var(--shade) 22%, transparent), 0 24px 56px color-mix(in srgb, var(--shade) 34%, transparent);
--shadow-glass-page: inset 0 1px 0 color-mix(in srgb, var(--hi) 65%, transparent), inset 1px 0 0 color-mix(in srgb, var(--hi-2) 35%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 6%, transparent), inset -1px 0 0 color-mix(in srgb, var(--shadow-ink-2) 4%, transparent), 0 2px 6px color-mix(in srgb, var(--shadow-ink) 8%, transparent), 0 8px 18px color-mix(in srgb, var(--shade) 14%, transparent), 0 18px 40px color-mix(in srgb, var(--shade) 20%, transparent);
--line-soft: color-mix(in srgb, var(--black) 8%, transparent);
--line-soft-2: color-mix(in srgb, var(--black) 10%, transparent);
--line-soft-3: color-mix(in srgb, var(--black) 14%, transparent);
--line-soft-4: color-mix(in srgb, var(--black) 16%, transparent);
--sunken-bg: color-mix(in srgb, var(--black) 18%, transparent);
--tile-add-border: color-mix(in srgb, var(--black) 22%, transparent);
--canvas-capture-bg: oklch(from var(--sk-deep) calc(l + 0.047777) calc(c - 0.001166) calc(h - 46.1271));
--icon-select-chev: oklch(from var(--sk-ink-muted) calc(l + 0.043838) calc(c * 2.184873) calc(h + 10.1981));
--avatar-grad-1: oklch(from var(--sk-a2) calc(l - 0.134056) calc(c * 0.703606) calc(h - 7.1037));
--avatar-grad-2: oklch(from var(--sk-danger) calc(l - 0.089308) calc(c * 0.269993) calc(h - 3.5237));
--red-32: oklch(from var(--sk-danger) calc(l - 0.014319) calc(c * 1.09255) calc(h - 5.0498));
--ink-red-32: var(--red-32);
--red-33: oklch(from var(--sk-danger) calc(l + 0.052241) calc(c * 1.363639) calc(h - 12.285));
--red-34: oklch(from var(--sk-danger) calc(l + 0.011371) calc(c * 1.197828) calc(h - 5.0907));
--ink-red-34: var(--red-34);
--ink-gold-6: oklch(from var(--sk-gold) calc(l - 0.274087) calc(c * 1.527631) calc(h - 35.939));
--tag-outro: oklch(from var(--sk-plum) calc(l - 0.009074) calc(c * 0.743264) calc(h + 11.4904));
--tag-grid: oklch(from var(--sk-a3) calc(l - 0.148185) calc(c * 0.721951) calc(h + 7.6486));
--tag-agenda: oklch(from var(--sk-info) calc(l - 0.177756) calc(c * 0.434653) calc(h - 6.2601));
--tag-retake: oklch(from var(--sk-danger) calc(l - 0.111802) calc(c * 0.462234) calc(h - 44.4965));
--shade-65: oklch(from var(--sk-deep) calc(l - 0.033461) calc(c - 0.002518) calc(h - 5.8588));
--shade-66: oklch(from var(--sk-deep) calc(l + 0.004169) calc(c + 0.005819) calc(h - 11.2327));
--shade-67: oklch(from var(--sk-deep) calc(l + 0.032515) calc(c + 0.001061) calc(h + 7.0308));
--shade-68: oklch(from var(--sk-deep) calc(l + 0.035678) calc(c - 0.002962) calc(h - 1.2036));
--surf-page: var(--bg);
--surf-recessed: var(--sidebar-bg);
--surf-container-1: var(--card-bg);
--surf-container-2: var(--card-bg);
--surf-raised-1: var(--card-bg);
--surf-raised-2: var(--card-bg);
--surf-card-1: var(--card-bg);
--surf-card-2: var(--card-bg);
--surf-card-3: var(--card-bg);
--surf-input: var(--input-bg);
--edge-1: var(--card-border);
--edge-2: var(--card-border);
--edge-3: var(--card-border);
--elev-1: var(--shadow-card);
--elev-2: var(--shadow-card);
--elev-3: var(--shadow-card);
--ink-nav: var(--sk-ink-nav-1, var(--ink-on-accent));
--sep-panel: var(--sk-sep-panel-1, var(--card-bg-light-solid));
--sep-panel-fill: color-mix(in srgb, var(--sep-panel) 92%, transparent);
--sep-card-fill: var(--sk-sep-card-fill-1, color-mix(in srgb, var(--cream-2) 90%, transparent));
--sep-row-fill: color-mix(in srgb, var(--cream) 94%, transparent);
--sep-row-fill-hover: var(--cream);
--sep-panel-ink-muted: color-mix(in srgb, var(--ink-muted) 84%, var(--ink));
--check-on-fill: var(--sk-check-on-fill-1, color-mix(in srgb, var(--olive-3) 82%, var(--forest)));
--check-on-ink: var(--sk-check-on-ink-1, var(--ink-on-accent));
--disabled-fill: color-mix(in srgb, var(--ink-muted) 24%, var(--card-bg-solid));
--disabled-ink: var(--ink);
--disabled-line: color-mix(in srgb, var(--ink-muted) 45%, transparent);
--danger-del: var(--chart-fail); /* styles/presentations.css :root */
}
/* @generated-end family-from-tokens.js */
/* ---- FITTING SLOTS (hand-written; family-from-tokens.js keeps this part) ---------------------
Each reads var(--sk--1, ), so a skin that sets none paints exactly as the
generated tokens do, and skin-fit.js may pin any one colour exactly. The generated block already
wraps --leaf-ink, --ink-accent, the three progress-bar stops (--sk-bar-lo-1 ...), the fifteen
donut stage colours (--sk-donut--{lo,mid,hi}-1) and the status colours and inks (the
@slots list in the bases file). The ones below are not tokens.css tokens: each fallback is
exactly what the component that reads it falls back to. ---- */
/* each status may have its own pill fill and rim: ShotsPanel.jsx STAGE_TINTS reads --st--fill,
--st--line and --st-video-hero-ink, shots.css the retake pair */
body[data-skin-family="paper"] {
--st-upscaled-fill: var(--sk-st-upscaled-fill-1, var(--pill-bg)); --st-upscaled-line: var(--sk-st-upscaled-line-1, var(--st-upscaled));
--st-video-hero-fill: var(--sk-st-video-hero-fill-1, var(--pill-bg)); --st-video-hero-line: var(--sk-st-video-hero-line-1, var(--st-video-hero));
--st-video-wip-fill: var(--sk-st-video-wip-fill-1, var(--pill-bg)); --st-video-wip-line: var(--sk-st-video-wip-line-1, var(--st-video-wip));
--st-hero-fill: var(--sk-st-hero-fill-1, var(--pill-bg)); --st-hero-line: var(--sk-st-hero-line-1, var(--st-hero));
--st-wip-fill: var(--sk-st-wip-fill-1, var(--pill-bg)); --st-wip-line: var(--sk-st-wip-line-1, var(--st-wip));
--st-first-pass-fill: var(--sk-st-first-pass-fill-1, var(--pill-bg)); --st-first-pass-line: var(--sk-st-first-pass-line-1, var(--st-first-pass));
--st-prompt-fill: var(--sk-st-prompt-fill-1, var(--pill-bg)); --st-prompt-line: var(--sk-st-prompt-line-1, var(--st-prompt));
--st-pending-fill: var(--sk-st-pending-fill-1, var(--pill-bg)); --st-pending-line: var(--sk-st-pending-line-1, var(--st-pending));
--st-archive-fill: var(--sk-st-archive-fill-1, var(--pill-bg)); --st-archive-line: var(--sk-st-archive-line-1, var(--st-archive));
--st-omitted-fill: var(--sk-st-omitted-fill-1, var(--pill-bg)); --st-omitted-line: var(--sk-st-omitted-line-1, var(--st-omitted));
--st-video-hero-ink: var(--sk-st-video-hero-ink-1, var(--st-hero-ink));
--st-retake-fill: var(--sk-st-retake-fill-1, color-mix(in srgb, var(--st-retake-2) 14%, transparent));
--st-retake-line: var(--sk-st-retake-line-1, color-mix(in srgb, var(--st-retake-2) 75%, transparent));
/* the Shot Breakdown bars, one colour per stage (QueueBreakdown.jsx reads --bd-*) */
--bd-hero: var(--sk-bd-hero-1, var(--leaf));
--bd-refinement: var(--sk-bd-refinement-1, var(--amber));
--bd-first-pass: var(--sk-bd-first-pass-1, var(--teal));
/* the row rings' dark tips: ShotsPanel.jsx RING_PALETTES reads --ring--3 with a forest fallback
(the -1 and -2 stops are @slots in the generated block) */
--ring-video-hero-3: var(--sk-ring-video-hero-3-1, var(--forest-7));
--ring-hero-3: var(--sk-ring-hero-3-1, var(--forest-8));
}
/* ---- SLOT RULES: one exact colour for one kind of text or fill (17 Sep 2026) --------------------
The mockup has shades the tokens do not separate (a gold eyebrow, an L34 label/control ink between
the ink and the muted ink, a lighter tab trough). Each rule below exists ONLY while its slot is set
(a boolean style query on the slot), so a skin that sets none paints exactly as the components do.
The fallback inside is the component's own value, so skin-fit.js starts from today's look and
never writes a slot that would change nothing. */
@container style(--sk-eyebrow-ink-1) {
body[data-skin-family="paper"] .ph-eyebrow { color: var(--sk-eyebrow-ink-1, var(--ink-on-dark-muted)); }
}
@container style(--sk-mode-trough-1) {
body[data-skin-family="paper"] .topbar .tb-mode-row { background-color: var(--sk-mode-trough-1, color-mix(in srgb, var(--tan-deep) 10%, transparent)); }
}
/* the small caps labels of the pale cards (calendar month, card titles, project day, breakdown) */
@container style(--sk-label-ink-1) {
body[data-skin-family="paper"] :is(.right-column .rc-title, .sidebar-footer .project-day .pd-label, .right-column .sched-month, .right-column .bd-cap) {
color: var(--sk-label-ink-1, var(--ink-muted));
}
}
@container style(--sk-stat-label-ink-1) {
body[data-skin-family="paper"] .topbar .tb-stat-label { color: var(--sk-stat-label-ink-1, color-mix(in srgb, var(--ink-taupe-4) 80%, var(--mix-dark))); }
/* ... and the band's SCHEDULED caption, the same small caps on the same band (topbar.css: umber) */
body[data-skin-family="paper"] .topbar .tb-meta-label { color: var(--sk-stat-label-ink-1, color-mix(in srgb, var(--ink-umber-3) 90%, var(--mix-light))); }
}
/* the toolbar buttons and the selected tab (a state with its own colour keeps it) */
@container style(--sk-control-ink-1) {
body[data-skin-family="paper"] :is(.pill-button:not(.pill-button--add, .pill-button--toggle, .has-active), .tabs .tab.active) {
color: var(--sk-control-ink-1, var(--ink));
}
}
/* the header's "·" separators read --ink-soft (header.css), but they sit on the dark photo: a skin
that pins --ink-soft dark for its pale panels keeps them on the light muted ink (Marble & Gold's
#857D72 read 2.1:1 there on every page) */
@container style(--sk-ink-soft-1) {
body[data-skin-family="paper"] .ph-meta .ph-meta-sep { color: var(--ink-on-dark-muted); }
}
/* the row titles (the mockup's L34 rung; shots.css paints them the ink) - not on the phone, where
mobile.css draws the title at 60% opacity: there it keeps the full ink (the lighter rung read 3.4:1) */
@container style(--sk-title-ink-1) {
body[data-skin-family="paper"]:not([data-ui-tier="s"]) .shots-list .shot-row .shot-frame { color: var(--sk-title-ink-1, var(--ink)); }
}
/* ... and the activity lines, when the footer cards are pale (on the dark cards they stay light) */
@container style(--sk-title-ink-1) and style(--sk-footer-card: pale) {
body[data-skin-family="paper"] .footer-row .activity-card .activity-text { color: var(--sk-title-ink-1, var(--ink)); }
}
/* the calendar card's "No calendar connected" line: light ink on a pale card in forest too */
@container style(--sk-cal-callout-ink-1) {
body[data-skin-family="paper"] .right-column .cal-connect-callout { color: var(--sk-cal-callout-ink-1, var(--ink-on-dark)); }
}
/* Marble & Gold part 3 (17 Sep 2026) - more of the mockup's own shades, each gated on its slot, each
fallback what the component paints today. */
/* the project day card's caption (the mockup draws it lighter than the other card titles) */
@container style(--sk-day-label-ink-1) {
body[data-skin-family="paper"] .sidebar-footer .project-day .pd-label { color: var(--sk-day-label-ink-1, var(--sk-label-ink-1, var(--ink-muted))); }
}
/* the dark rail cards: the pipeline stage caption and the shot queue's shot ids (sidebar.css tints
both from the gold foil; the mockup's are neutral) */
@container style(--sk-rail-label-ink-1) {
body[data-skin-family="paper"] .sidebar-footer .pipeline-stage .ps-label { color: var(--sk-rail-label-ink-1, color-mix(in srgb, var(--ink-cream-8) 62%, transparent)); }
}
@container style(--sk-queue-id-ink-1) {
body[data-skin-family="paper"] .sb-queue .sb-q-id { color: var(--sk-queue-id-ink-1, color-mix(in srgb, var(--foil) 33%, var(--mix-light))); }
}
/* the overview's stat sub-lines (topbar.css: the taupe ink) */
@container style(--sk-stat-sub-ink-1) {
body[data-skin-family="paper"] .topbar .tb-stat-sub { color: var(--sk-stat-sub-ink-1, var(--ink-taupe-4)); }
}
/* the muted text of a shot row: the rows are lighter than the panels, so the nearest READABLE muted
ink there is lighter too (every row text that reads --ink-muted: sequence, detail, location,
version) */
@container style(--sk-row-muted-ink-1) {
body[data-skin-family="paper"] .shots-list .shot-row { --ink-muted: var(--sk-row-muted-ink-1, var(--sk-ink-muted)); }
}
/* the shot search's placeholder (shots.css: the muted ink at 75%); the slot is the whole colour */
@container style(--sk-placeholder-ink-1) {
body[data-skin-family="paper"] .shots-search .shots-search-input::placeholder {
color: var(--sk-placeholder-ink-1, color-mix(in srgb, var(--ink-muted) 75%, transparent));
opacity: 1;
}
}
/* links written in the leaf colour on the pale pages (Reports' "View ... ->", Help, Admin's integration
help): they read the text accent (--leaf-ink) when the skin gives one - a leaf deep enough for white
button text is still too light for small text on a pale card (Marble & Gold: 3.9:1) */
@container style(--sk-leaf-ink-1) {
body[data-skin-family="paper"] :is(.rv-link:not(:hover), .admin-integration-help a, .help-nav-foot a, .help-content a) {
color: var(--sk-leaf-ink-1, var(--leaf));
}
/* ... and the voice panel's speaker caps (generate.css: the accent, on a pale green wash) */
body[data-skin-family="paper"] .gen-vo-group-speaker { color: var(--sk-leaf-ink-1, var(--accent, var(--olive-5))); }
}
/* text on an accent (amber) fill: Generate's selected slice mode writes --ink-on-accent (light) on 85% amber;
a light amber needs dark text (the glass family's --sk-accent-ink-1, here for the paper controls that need it) */
@container style(--sk-accent-ink-1) {
body[data-skin-family="paper"] .gen-slicemode-btn.is-active { color: var(--sk-accent-ink-1, var(--ink-on-accent)); }
/* the other gold fills with white text: the Agent's own chat bubble, Review's selected deck chip
(white on a light gold read 2.3-2.7:1), Admin's warning icons (cream on gold, 2.6:1) */
body[data-skin-family="paper"] :is(.agent-msg--user .agent-bub, .review-typechip.is-on) { color: var(--sk-accent-ink-1, var(--white)); }
body[data-skin-family="paper"] :is(.admin-diag-item--warn .admin-diag-item-ico, .admin-diag-banner--warn .admin-diag-banner-icon) { color: var(--sk-accent-ink-1, var(--ink-cream)); }
}
/* the gold used as TEXT (the voice panel's selected character): generate.css darkens the gold only 6% */
@container style(--sk-gold-ink-1) {
body[data-skin-family="paper"] .gen-vo-char-cell.is-active .gen-vo-char-name { color: var(--sk-gold-ink-1, color-mix(in srgb, var(--gold) 94%, var(--mix-dark))); }
/* ... the other gold captions on pale fills: Notes' role and Open pills, To-do's Note tag (--gold-7),
Presentations' "+ Title slide", "Export for Review" and "whole deck" (its orange and amber).
--gold-7 itself is not re-pointed: it also paints the Clean Client deck. */
body[data-skin-family="paper"] :is(.notes-page .np-note-role, .notes-page .np-pill--open, .ndm-panel .np-pill--open, .np-row-role, .todo-row-type--note) { color: var(--sk-gold-ink-1, var(--gold-7)); }
body[data-skin-family="paper"] .pres-sec-titlebtn { color: var(--sk-gold-ink-1, var(--pres-orange)); }
body[data-skin-family="paper"] .pres-btn--review:not(.is-on) { color: var(--sk-gold-ink-1, var(--pres-orange, var(--gold))); }
body[data-skin-family="paper"] .pres-sublabel-scope { color: var(--sk-gold-ink-1, var(--pres-amber, var(--gold-7))); }
}
/* the phone's stats card is dark (mobile.css) while the desktop band is pale: its FOLDER SYNC / LIVE label
(topbar.css: the dark forest green, 1.7:1 there in forest, 1.1:1 with Marble & Gold's deeper greens)
takes a light ink when the skin gives one */
@container style(--sk-mobile-live-ink-1) {
body[data-skin-family="paper"][data-ui-tier="s"] .topbar.tb-mobile .tb-live--live .tb-live-label { color: var(--sk-mobile-live-ink-1, var(--ink-forest-5)); }
/* ... and the JUST YOU pill there (topbar.css: a dark forest green, 1.3-2.0:1 on that card) */
body[data-skin-family="paper"][data-ui-tier="s"] .topbar.tb-mobile .tb-online { color: var(--sk-mobile-live-ink-1, color-mix(in srgb, var(--ink-forest-2) 81%, var(--mix-dark))); }
}
/* the phone's header line under the title (subtitle, "·", episode name - header.css: the muted cream)
sits on the photo where the phone header is short and the picture lighter: a skin may give it its
lightest ink (the bench photo there: 2.4-3.4:1 at the muted cream) */
@container style(--sk-phone-meta-ink-1) {
body[data-skin-family="paper"][data-ui-tier="s"] .ph-meta :is(.ph-subtitle, .ph-meta-sep, .ph-episode-name) { color: var(--sk-phone-meta-ink-1, var(--ink-on-dark-muted)); }
}
/* the overview's "completed" stat disc: topbar.css mixes it from --ok and the bright leaf; a skin whose
leaf is dark (for white text on green buttons) gives the disc its own light green here */
@container style(--sk-kpi-disc-green-1) {
body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--completed {
--leaf-bright: var(--sk-kpi-disc-green-1, oklch(from var(--sk-a1) calc(l + 0.083124) calc(c * 1.55414) calc(h + 3.1618)));
}
}
/* text on a SOLID leaf fill (Pricing's Contact sales, the image editor's active layer tab): tokens.css
writes dark ink there, which a dark leaf makes unreadable (Marble & Gold's Contact sales read 3.09:1).
Not the plan cards' badge and button: each plan paints them its own --accent (gold, green), which the
dark ink suits; not the fills that let the pale card through (the voice button, the phase bars): the
dark ink reads better there. */
@container style(--sk-leaf-fill-ink-1) {
body[data-skin-family="paper"] .pcs-btn { color: var(--sk-leaf-fill-ink-1, var(--ink-on-leaf)); }
body[data-skin-family="paper"] .gen-ied-layerpick .gen-refs-tab.is-active { color: var(--sk-leaf-fill-ink-1, var(--ink-on-leaf-3)); }
}
/* ... and text on a TRANSLUCENT leaf fill (Generate's copy/go button and its frame cap, a note's Resolve,
the calendar's Connect button):
the components write light ink over 75-85% leaf, which a pale card behind lifts to 2.1-2.9:1 (forest
too); a skin may give them a dark ink (a disabled button keeps its faded light ink) */
@container style(--sk-leaf-wash-ink-1) {
body[data-skin-family="paper"] :is(.gen-go-btn:not(:disabled), .note-resolve:not(.note-resolve--undo), .cal-connect-btn) { color: var(--sk-leaf-wash-ink-1, var(--ink-cream)); }
body[data-skin-family="paper"] .gen-copy-frametoggle:not(.is-on) { color: var(--sk-leaf-wash-ink-1, color-mix(in srgb, var(--ink-cream) 60%, transparent)); }
body[data-skin-family="paper"] .gen-copy-frametoggle.is-on { color: var(--sk-leaf-wash-ink-1, var(--ink-cream)); }
/* ... Settings' and Admin's Send invite / Choose image, the theme card's ACTIVE tag, Documents' Upload
pill and the number in Reports' active tab (white on 85% leaf read 3.3-3.9:1 there) */
body[data-skin-family="paper"] .user-add-submit:not(:disabled) { color: var(--sk-leaf-wash-ink-1, var(--ink-cream)); }
body[data-skin-family="paper"] :is(.theme-active-tag, .rvx-tab.is-active b) { color: var(--sk-leaf-wash-ink-1, var(--ink-on-accent)); }
body[data-skin-family="paper"] .docs-type-pill.docs-upload-pill { color: var(--sk-leaf-wash-ink-1, var(--white)); }
}
/* Marble & Gold part 4 (17 Sep 2026, the mockup and readability reviews) - each gated on its slot, each
fallback what the component paints today. */
/* the overview's muted texts that sit straight on a pale card or the band's tab trough (the panel tabs,
days remaining, the mode tabs, the calendar's Last synced, day labels and No events - the last one an
inline var(--ink-muted), so the token is re-pointed): the page-wide muted ink must read on the darkest
pale fills of every page, these cards allow a lighter readable grey, nearer the mockup's */
@container style(--sk-card-muted-ink-1) {
body[data-skin-family="paper"] :is(.shots-panel .tabs, .topbar .tb-meta-sub, .topbar .tb-mode-row, .right-column .cal-status-row, .right-column .week-strip, .right-column .time-slot--empty) {
--ink-muted: var(--sk-card-muted-ink-1, var(--sk-ink-muted));
}
}
/* ... and the activity by-lines on the pale footer card (footer-row.css: the light muted ink, re-pointed) */
@container style(--sk-card-muted-ink-1) and style(--sk-footer-card: pale) {
body[data-skin-family="paper"] .footer-row .activity-card .activity-meta { color: var(--sk-card-muted-ink-1, var(--ink-on-dark-muted)); }
}
/* the band's schedule dates (topbar.css paints them the page colour, --ink-bg) */
@container style(--sk-meta-value-ink-1) {
body[data-skin-family="paper"] .topbar .tb-meta-value { color: var(--sk-meta-value-ink-1, var(--ink-bg)); }
}
/* the band's JUST YOU pill on the desktop (the phone's dark card has the mobile rule above) */
@container style(--sk-stats-online-ink-1) {
body[data-skin-family="paper"] .topbar:not(.tb-mobile) .tb-online { color: var(--sk-stats-online-ink-1, color-mix(in srgb, var(--ink-forest-2) 81%, var(--mix-dark))); }
}
/* the activity card's "View all ->" (footer-row.css: the muted ink at 65% opacity, which stays: it is the
hover reveal) - on the pale card the slot is the ink under that opacity */
@container style(--sk-activity-cta-ink-1) and style(--sk-footer-card: pale) {
body[data-skin-family="paper"] .footer-row .activity-card .activity-card-cta { color: var(--sk-activity-cta-ink-1, var(--ink-on-dark-muted)); }
}
/* the calendar's month (the mockup draws it a step lighter than the card titles; after the label rule) */
@container style(--sk-cal-month-ink-1) {
body[data-skin-family="paper"] .right-column .rc-card .sched-month { color: var(--sk-cal-month-ink-1, var(--sk-label-ink-1, var(--ink-muted))); }
}
/* the media card's dashed drop zone (footer-row.css: the card edge at 40%, faint on a pale card) */
@container style(--sk-dropzone-line-1) and style(--sk-footer-card: pale) {
body[data-skin-family="paper"] .footer-row .media-card .dropzone:not(.is-dragover) { border-color: var(--sk-dropzone-line-1, color-mix(in srgb, var(--card-border) 40%, transparent)); }
}
/* the recent-activity icons: FooterRow.jsx types each accent inline, written for a dark card; on a pale
card the glyph takes part of a dark ink (the tint behind it stays the accent) */
@container style(--sk-activity-icon-ink-1) and style(--sk-footer-card: pale) {
body[data-skin-family="paper"] .footer-row .activity-card .activity-icon > svg { color: color-mix(in oklab, currentColor 55%, var(--sk-activity-icon-ink-1, currentColor)); }
}
/* inks written for a dark ground that sit on pale panels in every paper skin: the canvas build badge and
node hint, Edit Plan's "no shot linked", Documents' VIEW AS */
@container style(--sk-pale-muted-ink-1) {
body[data-skin-family="paper"] .cv-build { color: var(--sk-pale-muted-ink-1, color-mix(in srgb, var(--ink-on-dark) 66%, var(--mix-dark))); }
body[data-skin-family="paper"] .cv-node-hint { color: var(--sk-pale-muted-ink-1, color-mix(in srgb, var(--ink-hi-3) 66%, var(--mix-dark))); }
body[data-skin-family="paper"] .ep-act-none { color: var(--sk-pale-muted-ink-1, color-mix(in srgb, var(--ink-hi) 64%, var(--mix-dark))); }
body[data-skin-family="paper"] .docs-role-label { color: var(--sk-pale-muted-ink-1, var(--ink-on-dark-muted)); }
body[data-skin-family="paper"] .pres-statusbar { color: var(--sk-pres-status-ink-1, var(--sk-pale-muted-ink-1, var(--pres-label))); }
}
/* controls that inherit the main column's light ink (header.css: .main-content writes --ink-on-dark)
but sit on pale panels: Notes' "Replies to me" / "My notes", Generate's collapsible section heads and
the voice panel's mode caption and hint */
@container style(--sk-page-ink-1) {
body[data-skin-family="paper"] :is(.np-replies-btn, .vo-submode-label, .vo-submode-hint, .gen-section-head--toggle, .gen-preview-block-label--toggle) { color: var(--sk-page-ink-1, var(--ink-on-dark)); }
}
/* The account menu is a dark popover even in a paper skin. Its selected-role dot used the generic
gold caption intended for pale cards, so deep-gold skins can provide a lighter popover ink. */
@container style(--sk-menu-active-ink-1) {
body[data-skin-family="paper"] .ph-menu-see-as.is-active .ph-menu-ico { color: var(--sk-menu-active-ink-1, var(--gold-12)); }
}
/* the shot modal's media caption plate: modal.css types the same 35% black the thumbnail tags read as
--thumb-tag-bg; with a skin's own plate both follow it */
@container style(--sk-thumb-tag-bg-1) {
body[data-skin-family="paper"] .mhi-tag { background: var(--thumb-tag-bg); }
}
/* ... and the shot modal's version-tile captions (modal.css: white with a soft shadow, written for a
picture). A tile whose picture or video has not painted - or is missing - shows the pale modal through
it (1.4-3.2:1), and the page cannot tell a painted tile from an empty one (a failed picture is also
"loaded"), so on a paper skin with its own plate the caption always sits on that plate */
@container style(--sk-thumb-tag-bg-1) {
body[data-skin-family="paper"] .version-tile :is(.vt-label, .vt-time) { background-color: var(--thumb-tag-bg); }
}
/* Presentations' unticked checkbox edge (the card edge: 1.4:1, a control's edge needs 3:1) */
@container style(--sk-check-edge-1) {
body[data-skin-family="paper"] .pres-srow:not(.pres-srow--adding) > .pres-check:not(.is-on) { border-color: var(--sk-check-edge-1, var(--card-border)); }
}
/* the phone's cream captions: mobile.css draws the bottom tabs' labels and the focused stat's label at
66% of the cream over a see-through dark card */
@container style(--sk-mtab-ink-1) {
body[data-skin-family="paper"] .mtab-bar .mtab:not(.is-active) { color: var(--sk-mtab-ink-1, color-mix(in srgb, var(--ink-cream-4) 66%, transparent)); }
body[data-skin-family="paper"] .tbm2-stat-label { color: var(--sk-mtab-ink-1, color-mix(in srgb, var(--ink-cream-9) 66%, transparent)); }
}
/* Generate's job-slot digits (35% cream fill), its faded "Latest edit" direction tab, the canvas key
caps (the page's taupe wash) and the calendar's days of the other months - each faded by an alpha
that a paper skin's lighter panels cannot carry */
@container style(--sk-faded-ink-1) {
body[data-skin-family="paper"] .gen-jobslot:not(:hover, .is-on) { color: var(--sk-faded-ink-1, color-mix(in srgb, var(--ink-umber) 62%, transparent)); }
body[data-skin-family="paper"] .gen-dir-tab:not(:hover, .is-on) { color: var(--sk-faded-ink-1, color-mix(in srgb, var(--ink-muted) 45%, transparent)); }
body[data-skin-family="paper"] .cv-empty-hint kbd { color: var(--sk-faded-ink-1, currentColor); }
body[data-skin-family="paper"] .big-cal-cell.is-out-of-month .big-cal-num { color: var(--sk-faded-ink-1, color-mix(in srgb, var(--ink-deep-2) 55%, transparent)); }
/* ... and the reference search's placeholder in Generate's section head (45% of the umber: 2.5-2.7:1) */
body[data-skin-family="paper"] .gen-section--refs .gen-section-head .gen-refs-search::placeholder { color: var(--sk-faded-ink-1, color-mix(in srgb, var(--ink-umber) 45%, transparent)); }
}
/* the initials on an asset card with no picture (large text; views-pages.css: 85% of the near-white
ink over the pale placeholder) and the empty canvas's big title (28% of the umber) */
@container style(--sk-placeholder-initials-ink-1) {
body[data-skin-family="paper"] .prop-frame .character-thumb-initials { color: var(--sk-placeholder-initials-ink-1, color-mix(in srgb, var(--ink-hi) 85%, transparent)); }
body[data-skin-family="paper"] .cv-page:not(.cv-page--dark) .cv-empty-title { color: var(--sk-placeholder-initials-ink-1, color-mix(in srgb, var(--ink-umber) 28%, transparent)); }
}
/* the full calendar's weekly and milestone chips: light ink written for dark chips, on a paper skin's
lighter tan and amber (1.9-3.5:1) */
@container style(--sk-cal-event-ink-1) {
body[data-skin-family="paper"] .big-cal-event.big-cal-event--weekly { color: var(--sk-cal-event-ink-1, color-mix(in srgb, var(--ink-hi) 85%, transparent)); }
body[data-skin-family="paper"] .big-cal-event.big-cal-event--milestone { color: var(--sk-cal-event-ink-1, color-mix(in srgb, var(--ink-hi) 95%, transparent)); }
}
/* the quotation mark before a note or a shot's narration (footer-row.css and ShotDetailModal.jsx's inline
style: the amber - a glyph that needs 3:1 on the pale fill): the inline style reads --amber, so the
token is re-pointed on the mark itself */
@container style(--sk-quote-glyph-1) {
body[data-skin-family="paper"] .notes-glyph { --amber: var(--sk-quote-glyph-1, var(--sk-a2)); color: var(--sk-quote-glyph-1, var(--amber)); }
}
/* the Clean Client template card's mark and 4 px eyebrow (the glass family's slot of the same name) */
@container style(--sk-tcard-clean-accent-1) {
body[data-skin-family="paper"] .ptpl--clean-client :is(.ptpl-mark, .ptpl-eyebrow) { color: var(--sk-tcard-clean-accent-1, var(--gold-7)); }
}
/* the project STATUS TAG (IN PRODUCTION): header.css paints it through --stag-*. Marble & Gold's
tag is gold whatever colour the project row carries, so a skin may take it over; with no
--sk-status-pill-accent-1 the project's own row colour still wins, exactly as in forest. */
body[data-skin-family="paper"] :is(.ph-status-pill, .ph-project-other-status) {
--stag-accent: var(--sk-status-pill-accent-1, var(--project-accent, var(--status-accent)));
--stag-fill: color-mix(in oklab, var(--sk-status-pill-fill-1, var(--stag-accent)) var(--stag-fill-mix), transparent);
--stag-line: color-mix(in oklab, var(--sk-status-pill-line-1, var(--stag-accent)) var(--stag-line-mix), transparent);
--stag-ink: var(--sk-status-pill-ink-1, var(--stag-accent));
--stag-dot: var(--sk-status-pill-dot-1, var(--stag-accent));
--stag-glow: var(--sk-status-pill-glow-1, var(--stag-accent));
}
/* ---- THE GILT RAMP AND THE EXTRA BAR STOPS (17 Sep 2026, Marble & Gold) -------------------------
The treatments below paint dark gilt fills (the selected menu item, Add shot, the floating
buttons, the today tile, the status tag) and gold rims. Every one of those colours is this ramp,
a relative colour over --sk-gold (solved on the Marble & Gold mockup: #C5A677, #886B42, #4F381A,
rim #8D7858, lit edge #E8D1A4 at gold #D4B06A), and each is a slot a skin may pin. Nothing here
paints by itself: only the option rules further down read these. */
body[data-skin-family="paper"] {
--gilt-hi: var(--sk-gilt-hi-1, oklch(from var(--sk-gold) calc(l - 0.03) calc(c * 0.75) calc(h - 5)));
--gilt: var(--sk-gilt-1, oklch(from var(--sk-gold) calc(l - 0.23) calc(c * 0.7) calc(h - 8)));
--gilt-lo: var(--sk-gilt-lo-1, oklch(from var(--sk-gold) calc(l - 0.41) calc(c * 0.56) calc(h - 11)));
--gilt-rim: var(--sk-gilt-rim-1, oklch(from var(--sk-gold) calc(l - 0.19) calc(c * 0.54) calc(h - 5)));
--gilt-sheen: var(--sk-gilt-sheen-1, oklch(from var(--sk-gold) calc(l + 0.09) calc(c * 0.66) h));
--gilt-ink: var(--sk-gilt-ink-1, oklch(from var(--sk-ink-on-dark) calc(l - 0.04) c h));
/* the time bar's two extra stops (--sk-bar-ramp: five); by default the midpoints */
--bar-lo-mid: var(--sk-bar-lo-mid-1, color-mix(in oklab, var(--bar-lo), var(--bar-mid)));
--bar-mid-hi: var(--sk-bar-mid-hi-1, color-mix(in oklab, var(--bar-mid), var(--bar-hi)));
/* the donut cell as a recessed slab (--sk-donut-cell: marble): a shade under the panels
(#CEC7BA-#D1CABD on the mockup), and the taupe disc behind the number (#7C776C = the muted ink) */
--paper-donut-slab: var(--sk-donut-slab-1, oklch(from var(--sk-surface) calc(l - 0.095) calc(c * 1.3) calc(h + 2)));
--paper-donut-disc: var(--sk-donut-disc-1, var(--sk-ink-muted));
}
/* ---- THE OPTIONS (@options in the defaults block) ------------------------------------------------
Each block below exists only while its choice is the NON-forest option: a style query on the
token, which the skin sets on the body. At the default the rules are not there at all, so a paper
skin that leaves every choice alone paints exactly as the generated tokens do (Paradise Found's
look). Repaint only: backgrounds, colours, shadows, outlines - never a size. */
/* --sk-footer-card: pale - the footer cards take the card material (the shots panel's paint) and
dark ink. footer-row.css tints their text for a dark ground through the tokens re-pointed here. */
@container style(--sk-footer-card: pale) {
body[data-skin-family="paper"] .footer-row :is(.activity-card, .media-card, .notes-card) {
--ink-on-dark: var(--ink);
--ink-on-dark-muted: var(--ink-muted);
--ink-on-accent: var(--ink);
--card-border-dark: var(--card-border);
--panel-text-shadow-color: transparent;
/* footer-row.css paints the empty-notes line at 55% of this: 55% of the ink reads like the
mockup's #8A8178 on the pale card (55% of the muted ink measured 1.64:1) */
--ink-cream-6: var(--ink);
background-color: color-mix(in srgb, var(--card-bg-solid) 92%, transparent);
box-shadow: var(--shadow-glass);
color: var(--ink);
text-shadow: none;
}
/* the card titles take the label ink when the skin gives one (else footer-row.css's muted ink) */
body[data-skin-family="paper"] .footer-row :is(.activity-card, .media-card, .notes-card) .rc-title {
color: var(--sk-label-ink-1, var(--ink-muted));
}
/* Today's Notes' VIEW ALL: footer-row.css washes it with 8% of the (re-pointed) ink, a grey slab on
a pale card; here it is the card's own stone with the card's rim (the mockup's #ECE6DB / #D1C6B4) */
body[data-skin-family="paper"] .footer-row .notes-card .notes-viewall-btn {
background-color: var(--sk-notes-viewall-1, var(--card-bg-solid));
border-color: var(--card-border);
}
body[data-skin-family="paper"] .footer-row .notes-card .notes-viewall-btn:hover {
background-color: color-mix(in srgb, var(--ink) 6%, var(--sk-notes-viewall-1, var(--card-bg-solid)));
}
body[data-skin-family="paper"] .footer-row :is(.activity-card, .media-card, .notes-card)::before {
background: linear-gradient(135deg,
color-mix(in srgb, var(--hi-3) 85%, transparent) 0%,
color-mix(in srgb, var(--foil) 42%, transparent) 22%,
color-mix(in srgb, var(--foil) 10%, transparent) 45%,
transparent 65%,
transparent 100%);
}
}
/* ... the empty-notes line there: 55% of the ink reads 3.8:1 on the pale card; a skin may give it a readable grey */
@container style(--sk-footer-card: pale) and style(--sk-notes-empty-ink-1) {
body[data-skin-family="paper"] .footer-row .notes-card .notes-empty {
color: var(--sk-notes-empty-ink-1, color-mix(in srgb, var(--ink-cream-6) 55%, transparent));
}
}
/* --sk-nav-active: pill - the menu's selected item is a dark gilt pill: a gold rim, a lit top edge,
a warm glow, light ink. .nav-slider is the one highlight that slides between items.
(18 Sep 2026) Every colour of the pill is a slot whose fallback is the gilt formula it always had, so
a pale rail can carry a pale pill (Athenian Marble) while --gilt-lo stays dark for the TODAY chip:
--sk-nav-pill-hi-1 (top), --sk-nav-pill-1 (middle), --sk-nav-pill-lo-1 (foot), --sk-nav-pill-rim-1
(the ring and the bottom bevel), --sk-nav-pill-sheen-1 (the lit top line and the sheen),
--sk-nav-pill-ink-1 (the label), --sk-nav-pill-icon-1 (the icon). */
@container style(--sk-nav-active: pill) {
body[data-skin-family="paper"] .nav-list .nav-slider {
background: linear-gradient(180deg,
var(--sk-nav-pill-hi-1, color-mix(in oklab, var(--gilt) 90%, var(--sk-rail))) 0%,
var(--sk-nav-pill-1, color-mix(in oklab, var(--gilt-lo) 55%, var(--sk-rail))) 45%,
var(--sk-nav-pill-lo-1, color-mix(in oklab, var(--gilt-lo) 45%, var(--sk-rail))) 100%);
box-shadow:
inset 0 1px 0 var(--sk-nav-pill-sheen-1, var(--gilt-sheen)),
inset 0 -1px 0 color-mix(in oklab, var(--sk-nav-pill-rim-1, var(--gilt-rim)) 70%, transparent),
var(--sk-glow) color-mix(in oklab, var(--gilt-hi) var(--sk-glow-strength), transparent),
var(--sk-lift-near) color-mix(in srgb, var(--sk-dark) var(--sk-lift-near-strength), transparent),
var(--sk-lift-far) color-mix(in srgb, var(--sk-dark) var(--sk-lift-far-strength), transparent);
}
body[data-skin-family="paper"] .nav-list .nav-slider::before {
background: linear-gradient(180deg,
color-mix(in oklab, var(--sk-nav-pill-rim-1, var(--gilt-rim)) 70%, var(--gilt-hi)) 0%,
var(--sk-nav-pill-rim-1, var(--gilt-rim)) 55%,
color-mix(in oklab, var(--sk-nav-pill-rim-1, var(--gilt-rim)) 80%, var(--gilt-hi)) 100%);
}
body[data-skin-family="paper"] .nav-list .nav-slider::after {
background: linear-gradient(180deg,
color-mix(in oklab, var(--sk-nav-pill-sheen-1, var(--gilt-sheen)) 22%, transparent) 0%,
color-mix(in oklab, var(--sk-nav-pill-sheen-1, var(--gilt-sheen)) 0%, transparent) 45%);
}
body[data-skin-family="paper"] .nav-list .nav-item.active {
--ink-nav: var(--sk-nav-pill-ink-1, var(--gilt-ink));
}
/* the selected item's icon (sidebar.css paints it the label's own ink) */
body[data-skin-family="paper"] .nav-list .nav-item.active .nav-icon {
color: var(--sk-nav-pill-icon-1, var(--ink-nav));
}
/* the other items' icons are gold (the mockup's #AF9874); sidebar.css lets them inherit the label */
body[data-skin-family="paper"] .nav-list .nav-item:not(.active) .nav-icon {
color: var(--sk-nav-icon-1, color-mix(in srgb, var(--ink-nav) 78%, transparent));
}
/* the brand's + button is gilt too (sidebar.css paints it leaf) */
body[data-skin-family="paper"] .sidebar .sb-glyph {
background: var(--sk-brand-button-1, color-mix(in oklab, var(--gilt-lo) 60%, var(--sk-rail)));
border-color: color-mix(in oklab, var(--gilt-rim) 80%, transparent);
color: var(--gilt-sheen);
}
body[data-skin-family="paper"] .sidebar .sb-glyph:hover {
background: color-mix(in oklab, var(--gilt-lo) 25%, var(--sk-brand-button-1, color-mix(in oklab, var(--gilt-lo) 60%, var(--sk-rail))));
border-color: var(--gilt-rim);
}
}
/* --sk-add-button: filled - Add shot is a filled gilt button: champagne top-left to deep bronze,
a lit top edge, a gold rim, a darker bottom edge and a short drop shadow. */
@container style(--sk-add-button: filled) {
body[data-skin-family="paper"] .pill-button.pill-button--add {
background: linear-gradient(165deg, var(--gilt-hi) 0%, var(--gilt) 32%, var(--gilt-lo) 100%);
color: var(--gilt-ink);
box-shadow:
inset 0 1px 0 color-mix(in oklab, var(--gilt-sheen) 85%, transparent),
inset 0 -1px 0 color-mix(in oklab, var(--gilt-lo) 80%, var(--sk-dark)),
0 0 0 1px color-mix(in oklab, var(--gilt-rim) 80%, transparent),
var(--sk-lift-near) color-mix(in srgb, var(--sk-dark) var(--sk-button-lift-near-strength), transparent),
var(--sk-button-lift) color-mix(in srgb, var(--gilt-lo) var(--sk-button-lift-strength), transparent);
}
body[data-skin-family="paper"] .pill-button.pill-button--add:hover {
background: linear-gradient(165deg, var(--gilt-sheen) 0%, var(--gilt-hi) 30%, var(--gilt) 70%, var(--gilt-lo) 100%);
}
body[data-skin-family="paper"] .pill-button.pill-button--add.is-open {
background: linear-gradient(165deg, var(--gilt) 0%, var(--gilt-lo) 100%);
}
}
/* --sk-bar-ramp: five - the time bar runs through five stops (Marble & Gold: aqua, sage, gold,
rose, plum). The shading layer on top is topbar.css's own, word for word. */
@container style(--sk-bar-ramp: five) {
body[data-skin-family="paper"] .tb-bottom-group .tb-progress-fill-bar {
background-image:
linear-gradient(to bottom,
color-mix(in srgb, color-mix(in srgb, var(--leaf-bright) 15%, var(--mix-dark)) 45%, transparent) 0%,
color-mix(in srgb, var(--mix-light) 12%, transparent) 55%,
color-mix(in srgb, var(--mix-light) 45%, transparent) 100%),
linear-gradient(to right, var(--bar-lo) 0%, var(--bar-lo-mid) 25%, var(--bar-mid) 50%, var(--bar-mid-hi) 75%, var(--bar-hi) 100%);
}
body[data-skin-family="paper"] .tb-bottom-group .tb-progress {
background-image: linear-gradient(to right,
color-mix(in srgb, var(--bar-lo) var(--sk-bar-track-mix), transparent) 0%,
color-mix(in srgb, var(--bar-lo-mid) var(--sk-bar-track-mix), transparent) 25%,
color-mix(in srgb, var(--bar-mid) var(--sk-bar-track-mix), transparent) 50%,
color-mix(in srgb, var(--bar-mid-hi) var(--sk-bar-track-mix), transparent) 75%,
color-mix(in srgb, var(--bar-hi) var(--sk-bar-track-mix), transparent) 100%);
}
}
@container style(--sk-bar-marker-1) {
body[data-skin-family="paper"] .tb-bottom-group .tb-progress-marker {
background: var(--sk-bar-marker-1, color-mix(in srgb, var(--archive) 65%, var(--mix-dark)));
}
}
/* --sk-status-tag: bronze - the project status tag is a dark gilt pill (lit at the top); its ink,
rim and dot stay --stag-* (a skin sets --sk-status-pill-accent-1 for a gold tag). */
@container style(--sk-status-tag: bronze) {
body[data-skin-family="paper"] :is(.ph-status-pill, .ph-project-other-status) {
background: linear-gradient(180deg,
color-mix(in oklab, var(--gilt) 75%, var(--sk-page)) 0%,
color-mix(in oklab, var(--gilt-lo) 30%, var(--sk-page)) 100%);
}
}
/* --sk-rims: full - every panel, card and rail card has a gold hairline all round (lit along the top,
the rim colour down the sides, a shade deeper along the bottom - the mockup's rim is even along each
edge; a 135-degree sweep ran from lit to near-black across the stats band's top) instead of the foil
sweep that fades out. The top is a soft champagne between the rim and the sheen (Marble & Gold's
mockup: L57-77 at chroma 17-26 along the panel tops; the full --gilt-hi, chroma 34, was 9-20 delta E
off). Each ::before is already a 1px ring (a masked gradient), so only its paint changes. */
@container style(--sk-rims: full) {
body[data-skin-family="paper"] :is(.topbar, .shots-panel.glass, .right-column .rc-card, .footer-row .rc-card)::before {
background: linear-gradient(180deg, color-mix(in oklab, var(--sk-panel-rim-1, var(--gilt-rim)) 50%, var(--gilt-sheen)) 0%, var(--sk-panel-rim-1, var(--gilt-rim)) 12%, var(--sk-panel-rim-1, var(--gilt-rim)) 85%, color-mix(in oklab, var(--sk-panel-rim-1, var(--gilt-rim)) 80%, var(--gilt-lo)) 100%);
opacity: 1;
}
body[data-skin-family="paper"] .sidebar-footer .project-day::before {
background: linear-gradient(180deg, var(--gilt-hi) 0%, var(--sk-panel-rim-1, var(--gilt-rim)) 55%, color-mix(in oklab, var(--gilt-lo) 60%, var(--gilt)) 100%);
}
body[data-skin-family="paper"] .sidebar-footer :is(.pipeline-stage, .sb-queue)::before {
background: linear-gradient(180deg, var(--gilt-rim) 0%, color-mix(in oklab, var(--gilt-rim) 80%, var(--sk-rail)) 100%);
}
}
/* ... and, when the skin gives one, the LIT LINE just inside that rim: along the top of each rimmed panel
(the mockup's L98 line under the gold) and, warmer, down its left side. It is an inset shadow set in
front of each box's own shadow, restated word for word (backdrop.css: --shadow-glass on the panels and
the pale footer cards; right-column.css: the right column's lighter stack); the stats band's two halves
have none of their own (the donut cell's is in its option below). The ring itself covers the first
pixel row, so the line is 3 px deep to show two. */
@container style(--sk-rims: full) and style(--sk-rim-sheen-1) {
body[data-skin-family="paper"] :is(.topbar, .shots-panel.glass, .right-column .rc-card, .footer-row .rc-card) {
--paper-rim-sheen-top: inset 0 3px 0 var(--sk-rim-sheen-1, transparent);
--paper-rim-sheen: inset 0 3px 0 var(--sk-rim-sheen-1, transparent), inset 3px 0 0 color-mix(in oklab, var(--sk-rim-sheen-1, transparent) 55%, var(--gilt-hi));
}
body[data-skin-family="paper"] .shots-panel.glass { box-shadow: var(--paper-rim-sheen), var(--shadow-glass); }
body[data-skin-family="paper"] .right-column .rc-card.glass {
box-shadow: var(--paper-rim-sheen),
inset 0 1px 0 color-mix(in srgb, var(--hi) 65%, transparent),
inset 1px 0 0 color-mix(in srgb, var(--hi-2) 35%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 8%, transparent),
inset -1px 0 0 color-mix(in srgb, var(--shadow-ink-2) 5%, transparent),
0 2px 6px color-mix(in srgb, var(--shadow-ink) 10%, transparent);
}
body[data-skin-family="paper"] .topbar .tb-right { box-shadow: var(--paper-rim-sheen-top); }
body[data-skin-family="paper"] .topbar .tb-left { box-shadow: var(--paper-rim-sheen); }
}
@container style(--sk-rims: full) and style(--sk-rim-sheen-1) and style(--sk-footer-card: pale) {
body[data-skin-family="paper"] .footer-row :is(.activity-card, .media-card, .notes-card) { box-shadow: var(--paper-rim-sheen), var(--shadow-glass); }
}
/* --sk-today-tile: framed - the calendar's today tile is dark gilt with a gold rim and a bronze
bottom edge. */
@container style(--sk-today-tile: framed) {
body[data-skin-family="paper"] .week-strip .week-cell.today {
background: linear-gradient(180deg,
color-mix(in oklab, var(--gilt-lo) 55%, var(--sk-page)) 0%,
color-mix(in oklab, var(--gilt-lo) 42%, var(--sk-page)) 60%,
color-mix(in oklab, var(--gilt-lo) 55%, var(--sk-page)) 100%);
box-shadow:
0 0 0 1px color-mix(in oklab, var(--gilt) 80%, var(--gilt-hi)),
inset 0 1px 0 color-mix(in oklab, var(--gilt-sheen) 35%, transparent),
inset 0 -2px 0 color-mix(in oklab, var(--gilt) 60%, var(--gilt-hi));
outline-color: var(--gilt-rim);
}
/* the TODAY chip on the day strip: right-column.css paints it the rail colour */
body[data-skin-family="paper"] .right-column .sched-day-tag {
background: linear-gradient(180deg, var(--gilt) 0%, var(--gilt-lo) 100%);
color: var(--gilt-ink);
}
}
/* --sk-fab: matched - the three round floating buttons are all gilt (the middle one a shade
deeper, as the mockup draws it), each with a lit top edge and a rim. */
@container style(--sk-fab: matched) {
body[data-skin-family="paper"] :is(.npb-bubble, .tdb-bubble, .aichat-bubble):not(.is-open) {
/* the top stop is a slot: the mockup's light top reads 2.8:1 under the white glyph, a skin may deepen it */
background: linear-gradient(180deg, var(--sk-fab-top-1, color-mix(in oklab, var(--gilt-hi) 60%, var(--sk-gold))) 0%, color-mix(in oklab, var(--gilt) 75%, var(--sk-gold)) 100%);
box-shadow:
inset 0 1px 0 color-mix(in oklab, var(--gilt-sheen) 70%, transparent),
0 0 0 1px color-mix(in oklab, var(--gilt-rim) 80%, transparent),
var(--sk-fab-lift-far) color-mix(in srgb, var(--gilt-lo) var(--sk-fab-lift-far-strength), transparent),
var(--sk-fab-lift-near) color-mix(in srgb, var(--sk-dark) var(--sk-fab-lift-near-strength), transparent);
}
body[data-skin-family="paper"] .tdb-root .tdb-bubble:not(.is-open) {
background: linear-gradient(180deg, var(--gilt) 0%, color-mix(in oklab, var(--gilt-lo) 80%, var(--gilt)) 100%);
}
}
/* --sk-donut-cell: marble - the donut's cell is a recessed slab joined to the stats band: both lose
their feathered glass edge (topbar.css masks them into the photo), the cell is a shade under the
panels and the disc behind the number is taupe. The number and label keep their light ink. */
@container style(--sk-donut-cell: marble) {
body[data-skin-family="paper"] .topbar :is(.tb-left, .tb-right) {
-webkit-mask-image: none;
mask-image: none;
}
body[data-skin-family="paper"] .topbar .tb-left {
background-color: var(--paper-donut-slab);
/* the gold line between the slab and the stats (a skin's --sk-donut-divider-1) and the rims' lit
line (above); each is transparent when its slot is not set */
box-shadow: var(--paper-rim-sheen, 0 0 transparent), inset -2px 0 0 var(--paper-donut-divider, transparent);
}
body[data-skin-family="paper"] .topbar .tb-donut-darken {
background: radial-gradient(circle at 30% 28%,
color-mix(in oklab, var(--paper-donut-disc) 88%, var(--sk-light)) 0%,
var(--paper-donut-disc) 55%,
color-mix(in oklab, var(--paper-donut-disc) 90%, var(--sk-dark)) 100%);
}
body[data-skin-family="paper"] .topbar {
--paper-donut-divider: var(--sk-donut-divider-1, transparent);
}
/* OVERALL PROGRESS on the taupe disc: topbar.css's cream label reads 2.7:1 there */
body[data-skin-family="paper"] .topbar .tb-donut-eyebrow {
color: var(--sk-donut-eyebrow-ink-1, var(--ink-on-dark));
}
}
/* --sk-donut-notch: cut - two concave cuts on the slab's right edge. This follows the marble
rule deliberately: that option clears the mask used by the glass version of the band. */
@container style(--sk-donut-notch: cut) {
body[data-skin-family="paper"] .topbar .tb-left {
-webkit-mask-image:
radial-gradient(circle at 100% 0, transparent var(--sk-donut-notch-top), var(--sk-dark) calc(var(--sk-donut-notch-top) + 0.5px)),
radial-gradient(circle at 100% 100%, transparent var(--sk-donut-notch-foot), var(--sk-dark) calc(var(--sk-donut-notch-foot) + 0.5px));
-webkit-mask-composite: source-in;
mask-image:
radial-gradient(circle at 100% 0, transparent var(--sk-donut-notch-top), var(--sk-dark) calc(var(--sk-donut-notch-top) + 0.5px)),
radial-gradient(circle at 100% 100%, transparent var(--sk-donut-notch-foot), var(--sk-dark) calc(var(--sk-donut-notch-foot) + 0.5px));
mask-composite: intersect;
}
}
/* --sk-panels: solid - the pale panels are stone, not glass: the paint the components give them at
92% over the photo is laid on at full strength, so the panel shows exactly the skin's surface
(the mockup's panels are opaque). Only the boxes whose own paint is that 92% card. */
@container style(--sk-panels: solid) {
body[data-skin-family="paper"] :is(.shots-panel.glass, .right-column .rc-card.glass, .view-page, .sidebar-footer .project-day) {
background-color: var(--card-bg-solid);
}
/* 24 Sep 2026 - the separation ladder (tokens.css): the page panel may take its own stone (--sk-sep-view-1, default
the surface it always had; the :is keeps the rule above's weight) and a panel inside it is one clear step apart (--sep-panel: the lighter cards) */
body[data-skin-family="paper"] :is(.view-page, .right-column .rc-card.glass):not(.rc-card) {
background-color: var(--sk-sep-view-1, var(--card-bg-solid));
}
body[data-skin-family="paper"] .view-page .glass {
background-color: var(--sep-panel);
}
/* the overview's stats band: topbar.css paints its cream at 84-94% over the photo; stone shows the
surface under that 6-16% instead (the mockup's band is L93 at the top, like the panels) */
body[data-skin-family="paper"] .topbar .tb-right {
background-color: var(--card-bg-solid);
}
/* the Censored Words page is not a .view-page: its heading and tabs sit on the photo (dark ink there
read 1.2-2.0:1), so they take the light inks; its table (cream at 60% over the photo) is stone */
body[data-skin-family="paper"] .cw-page :is(.cw-head, .cw-tabs > .cw-tab, .cw-arrow) {
--ink: var(--ink-on-dark);
--ink-muted: color-mix(in oklab, var(--ink-on-dark) 60%, var(--ink-on-dark-muted));
}
/* (the heading's description is a paragraph over the photo, and an unselected tab's label sits on it
too - 3.7:1 on the phone's lighter part of the photo at the 60% mix: the full light ink; the
selected tab keeps its underline) */
body[data-skin-family="paper"] .cw-page :is(.cw-head .cw-sub, .cw-tabs > .cw-tab) {
--ink-muted: var(--ink-on-dark);
}
body[data-skin-family="paper"] .cw-page .cw-table {
background-color: var(--card-bg-solid);
}
}
/* ... and when that photo is PALE (Athenian Marble), the same heading, tabs and arrows take the skin's own
dark ink instead of the light one above (the same rule, later) */
@container style(--sk-panels: solid) and style(--sk-photo-heading-ink-1) {
body[data-skin-family="paper"] .cw-page :is(.cw-head, .cw-tabs > .cw-tab, .cw-arrow) {
--ink: var(--sk-photo-heading-ink-1, var(--ink-on-dark));
--ink-muted: var(--sk-photo-heading-ink-1, var(--ink-on-dark));
}
body[data-skin-family="paper"] .cw-page :is(.cw-head .cw-sub, .cw-tabs > .cw-tab) {
--ink-muted: var(--sk-photo-heading-ink-1, var(--ink-on-dark));
}
}
@container style(--sk-panels: solid) and style(--sk-footer-card: pale) {
body[data-skin-family="paper"] .footer-row :is(.activity-card, .media-card, .notes-card) {
background-color: var(--card-bg-solid);
}
}
/* --sk-header-buttons: gilt - the header's round buttons (and the scale readout, the search pill and
the avatar) are dark gilt discs: a lit top-left, a gold rim, gold glyphs. The ring is each
button's own ::before (header.css draws it as a masked 1px ring); the search pill has none, so its
rim is a box-shadow ring (no layout). */
@container style(--sk-header-buttons: gilt) {
body[data-skin-family="paper"] .ph-right :is(.ph-iconbtn, .ph-avatar, .ph-search-pill:not(.is-open)) {
background:
radial-gradient(circle at 30% 26%, var(--sk-header-button-hi-1, color-mix(in oklab, var(--gilt) 55%, transparent)), transparent 70%),
var(--sk-header-button-1, color-mix(in oklab, var(--gilt-lo) 45%, var(--sk-page)));
color: var(--gilt-sheen);
}
body[data-skin-family="paper"] .ph-right :is(.ph-iconbtn, .ph-avatar, .ph-search-pill:not(.is-open)):hover,
body[data-skin-family="paper"] .ph-right :is(.ph-iconbtn, .ph-avatar).is-open {
background:
radial-gradient(circle at 30% 26%, color-mix(in oklab, var(--gilt-hi) 55%, transparent), transparent 70%),
color-mix(in oklab, var(--gilt-lo) 20%, var(--sk-header-button-1, color-mix(in oklab, var(--gilt-lo) 45%, var(--sk-page))));
}
body[data-skin-family="paper"] .ph-right :is(.ph-iconbtn, .ph-avatar)::before {
background: linear-gradient(160deg, var(--gilt-sheen) 0%, var(--gilt-rim) 55%, color-mix(in oklab, var(--gilt-rim) 70%, var(--gilt-lo)) 100%);
}
body[data-skin-family="paper"] .ph-right .ph-search-pill:not(.is-open) {
box-shadow:
inset 0 0 0 1px color-mix(in oklab, var(--gilt-rim) 85%, var(--gilt-sheen)),
var(--sk-lift-near) color-mix(in srgb, var(--sk-dark) var(--sk-lift-near-strength), transparent),
var(--sk-lift-far) color-mix(in srgb, var(--sk-dark) var(--sk-lift-far-strength), transparent);
}
body[data-skin-family="paper"] .ph-right .ph-search-pill:not(.is-open) .ph-search-iconbtn {
color: var(--gilt-sheen);
}
}
/* ... the scale readout (100%) is a lighter bronze than the round buttons when the skin gives one */
@container style(--sk-header-buttons: gilt) and style(--sk-header-scale-1) {
body[data-skin-family="paper"] .ph-right .ph-iconbtn.ph-scale-btn:not(:hover, .is-open) {
background:
radial-gradient(circle at 30% 26%, var(--sk-header-button-hi-1, color-mix(in oklab, var(--gilt) 55%, transparent)), transparent 70%),
var(--sk-header-scale-1, var(--sk-header-button-1, color-mix(in oklab, var(--gilt-lo) 45%, var(--sk-page))));
}
}
/* --sk-kpi-icons: ink - the overview's stat discs draw their glyphs in one dark ink (the mockup's
#353331), not each stage's own tint */
@container style(--sk-kpi-icons: ink) {
body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip {
color: var(--sk-kpi-icon-ink-1, var(--ink));
}
}
/* --sk-caption-fade: full - small captions and separators the components fade to 40-80% at full strength:
Edit Plan's filter counts, its stat bar's "of" and its priority rows' "/n" (edit-plan.css), Updates'
times, authors and chip counts (review.css), Generate's "overrides shotlist" (generate.css), the
header's scale "%" and the notification list's "·" (header.css) - a paper skin's pale solid panels
lift those fades to 2.2-3.8:1; the counts on the priority fills keep their own 85%. (A fade typed in
a page's inline style - Admin's aspect ratio, Reports' "To date" - is out of a skin's reach.) */
@container style(--sk-caption-fade: full) {
body[data-skin-family="paper"] :is(.ep-seg:not(.ep-seg--p1.is-on, .ep-seg--p3.is-on) .ep-seg-n, .ru-row .ru-when) {
opacity: 1;
}
body[data-skin-family="paper"] :is(.ep-statbar-head span, .ep-prirow-num i, .ru-actor, .ru-chip-n, .gen-dir-ovr, .ph-scale-val i, .ph-notif-dot-sep) {
opacity: 1;
}
}
/* --sk-state-fade: soft - what the app fades to show a state fades to --sk-state-fade-opacity instead of
the components' own 42-65%: a completed Edit Plan task (edit-plan.css), a resolved note, comment or
feedback item (notes-page.css, review.css, todo.css, views-extras.css, views.css), a cancelled queue
job (views-extras.css) and the band stats dimmed while another is focused (topbar.css, mobile.css).
Over a paper skin's solid pale panels those fades lift the text to 1.7-2.7:1 (Edit Plan's timecodes
and priority buttons, a resolved note's tags, the queue's stage). The state still shows: the
line-through, the Resolved pill and the cancelled label are untouched. */
@container style(--sk-state-fade: soft) {
body[data-skin-family="paper"] :is(.ep-row.is-completed, .notes-page .np-note.is-resolved, .notes-page .np-row.is-resolved,
.review-comment.is-resolved, .grm-comment.is-resolved, .grm-note.is-resolved, .asset-notes-row.is-resolved,
.digest-note.is-resolved, .sb-q-row--cancelled, .tb-stat.is-dimmed, .tbm2-stat.is-dimmed) {
opacity: var(--sk-state-fade-opacity);
}
}
/* ---- THE TEXTURE (--sk-texture: on) ---------------------------------------------------------------
A texture is a transparent overlay file (warm veins, clear stone everywhere else) painted as the
TOP background layers of a box, in front of the box's own paint and behind its content, so the
skin's surface colour shows through. The images, sizes and offsets are the defaults block's
--sk-tex-* tokens (all none/off there), the files ship with the skin (assets/skins//).
Rules:
- everything that reads --sk-tex-* sits inside this gate (test/skinTexture.test.js), so with the
texture off not one declaration below exists;
- never the page itself: no rule here targets body, body::before or .app-shell, and the project
photo is never touched;
- each rule sets only background-image/-size/-position/-repeat, more specific than every state
rule of its element (hover, selected, linked, review), so the texture never drops off; a state
whose own paint is an image (the linked/review wash of a row) passes it in through a token;
a box whose paint is a gradient (the stats band, the donut cell) repeats that gradient word for
word after the texture layers (the test holds each copy to the component stylesheet);
- no grain on the shot list or the page panels (a 192px grain there stalled headless Chrome);
- each box shows another part of the tile: its index (--sk-tex-i, registered as an integer in
tokens.css) times the step. */
@container style(--sk-texture: on) {
body[data-skin-family="paper"] .right-column > * { --sk-tex-i: sibling-index(); }
body[data-skin-family="paper"] .footer-row > * { --sk-tex-i: calc(sibling-index() + var(--sk-tex-footer-index)); }
body[data-skin-family="paper"] :is(.shots-panel.glass, .view-page) { --sk-tex-i: var(--sk-tex-panel-index); }
body[data-skin-family="paper"] .topbar .tb-right { --sk-tex-i: var(--sk-tex-stats-index); }
body[data-skin-family="paper"] .topbar .tb-left { --sk-tex-i: var(--sk-tex-donut-index); }
body[data-skin-family="paper"] .sidebar-footer .project-day { --sk-tex-i: var(--sk-tex-day-index); }
/* the big panels: the shots panel and every page's panel (no grain) */
body[data-skin-family="paper"] :is(.shots-panel.glass, .view-page) {
background-image: var(--sk-tex-panel-image);
background-size: var(--sk-tex-panel-size);
background-position: calc(var(--sk-tex-i) * var(--sk-tex-step-x)) calc(var(--sk-tex-i) * var(--sk-tex-step-y));
background-repeat: repeat;
}
/* the stats band: grain, veins, then its own gradient (topbar.css) */
body[data-skin-family="paper"] .topbar .tb-right {
background-image:
var(--sk-tex-grain-image),
var(--sk-tex-panel-image),
radial-gradient(ellipse 130% 100% at 30% 30%,
color-mix(in srgb, color-mix(in srgb, var(--cream-9) 88%, var(--mix-light)) 94%, transparent) 0%,
color-mix(in srgb, color-mix(in srgb, var(--hi) 91%, var(--mix-dark)) 90%, transparent) 60%,
color-mix(in srgb, color-mix(in srgb, var(--card-border) 64%, var(--mix-light)) 84%, transparent) 100%);
background-size: var(--sk-tex-grain-size), var(--sk-tex-panel-size), auto;
background-position: 0 0, calc(var(--sk-tex-i) * var(--sk-tex-step-x)) calc(var(--sk-tex-i) * var(--sk-tex-step-y)), 0% 0%;
background-repeat: repeat, repeat, repeat;
}
/* the right-column cards and project day: grain and the card tile */
body[data-skin-family="paper"] :is(.right-column .rc-card, .sidebar-footer .project-day) {
background-image: var(--sk-tex-grain-image), var(--sk-tex-card-image);
background-size: var(--sk-tex-grain-size), var(--sk-tex-card-size);
background-position: 0 0, calc(var(--sk-tex-i) * var(--sk-tex-step-x)) calc(var(--sk-tex-i) * var(--sk-tex-step-y));
background-repeat: repeat, repeat;
}
/* the dark rail cards: their own tile (none unless the skin gives one) */
body[data-skin-family="paper"] .sidebar-footer :is(.pipeline-stage, .sb-queue) {
background-image: var(--sk-tex-rail-image);
background-size: var(--sk-tex-rail-size);
background-position: calc(var(--sk-tex-i) * var(--sk-tex-step-x)) calc(var(--sk-tex-i) * var(--sk-tex-step-y));
background-repeat: repeat;
}
/* the rows: the row tile (no grain), then the linked/review wash (shots.css) when the row has one */
body[data-skin-family="paper"] .shot-row.is-linked {
--paper-row-wash: linear-gradient(90deg, color-mix(in srgb, var(--teal) 30%, transparent) 0%, color-mix(in srgb, var(--teal) 11%, transparent) 32%, color-mix(in srgb, var(--teal) 0%, transparent) 72%);
}
body[data-skin-family="paper"] .shot-row.is-review {
--paper-row-wash: linear-gradient(90deg, color-mix(in srgb, var(--gold-10) 34%, transparent) 0%, color-mix(in srgb, var(--gold-10) 13%, transparent) 32%, color-mix(in srgb, var(--gold-10) 0%, transparent) 72%);
}
body[data-skin-family="paper"] .shots-list .shot-row.shot-row {
background-image: var(--sk-tex-row-image), var(--paper-row-wash, none);
background-size: var(--sk-tex-row-size), auto;
background-position: calc(sibling-index() * var(--sk-tex-row-step-x)) calc(sibling-index() * var(--sk-tex-row-step-y)), 0% 0%;
background-repeat: repeat, repeat;
}
}
/* the donut cell carries the panel tile only when it is a marble slab (never over the glass that
shows the photo): grain, veins, then its own gradient (topbar.css) */
@container style(--sk-texture: on) and style(--sk-donut-cell: marble) {
body[data-skin-family="paper"] .topbar .tb-left {
background-image:
var(--sk-tex-grain-image),
var(--sk-tex-panel-image),
radial-gradient(ellipse 75% 75% at 35% 50%,
color-mix(in srgb, var(--cream-6) 18%, transparent) 0%,
color-mix(in srgb, var(--cream-6) 10%, transparent) 45%,
transparent 75%);
background-size: var(--sk-tex-grain-size), var(--sk-tex-panel-size), auto;
background-position: 0 0, calc(var(--sk-tex-i) * var(--sk-tex-step-x)) calc(var(--sk-tex-i) * var(--sk-tex-step-y)), 0% 0%;
background-repeat: repeat, repeat, repeat;
}
}
/* the footer cards carry the card tile only when they are pale */
@container style(--sk-texture: on) and style(--sk-footer-card: pale) {
body[data-skin-family="paper"] .footer-row :is(.activity-card, .media-card, .notes-card) {
background-image: var(--sk-tex-grain-image), var(--sk-tex-card-image);
background-size: var(--sk-tex-grain-size), var(--sk-tex-card-size);
background-position: 0 0, calc(var(--sk-tex-i) * var(--sk-tex-step-x)) calc(var(--sk-tex-i) * var(--sk-tex-step-y));
background-repeat: repeat, repeat;
}
}
/* --sk-photo-veil: none (17 Sep 2026 review) - a project's OWN photo shows as it is. backdrop.css lays
forest's veil over every photo; with Marble & Gold's colours it darkened the photo by 62-68%, where the
mockup shows it clear. With no project photo the veil still paints the page ground, and a tint chosen
in Settings (has-style-veil) still wins. */
@container style(--sk-photo-veil: none) {
body[data-skin-family="paper"].has-backdrop-image:not(.has-style-veil)::before { background: none; }
}
/* ==== THE SECOND PAPER SKIN'S ADDITIONS (18 Sep 2026, Athenian Marble) ==============================
Generic treatments, made for Athenian Marble and kept generic for the paper skins after it (Maya
Temple reuses the ornaments and the pale rail with its own files and values). Every rule below
exists only while its choice is the non-forest option or while its slot is set (a style query),
and each fallback is what the component paints today: a paper skin that sets none of them - and
forest, Marble & Gold and every glass skin - paints exactly as before (same-page paint and geometry
diffs, 18 Sep 2026). Repaint only: backgrounds, colours, shadows, masks, opacity - never a box. */
/* --sk-photo-veil: tint - a veil of ONE colour over a project's own photo (the photo itself is never
changed): --sk-photo-veil-1 (default: the surface), at a strength that runs left to right through
--sk-photo-veil-a0/-a25/-a50/-a75/-a100 (defaults 0%: no veil). Athenian Marble's mockup shows its
temple washed pale behind the title. As with "none", a tint set in Settings wins. */
@container style(--sk-photo-veil: tint) {
body[data-skin-family="paper"].has-backdrop-image:not(.has-style-veil)::before {
background: linear-gradient(var(--sk-photo-veil-angle),
color-mix(in srgb, var(--sk-photo-veil-1, var(--sk-surface)) var(--sk-photo-veil-a0), transparent) 0%,
color-mix(in srgb, var(--sk-photo-veil-1, var(--sk-surface)) var(--sk-photo-veil-a25), transparent) 25%,
color-mix(in srgb, var(--sk-photo-veil-1, var(--sk-surface)) var(--sk-photo-veil-a50), transparent) 50%,
color-mix(in srgb, var(--sk-photo-veil-1, var(--sk-surface)) var(--sk-photo-veil-a75), transparent) 75%,
color-mix(in srgb, var(--sk-photo-veil-1, var(--sk-surface)) var(--sk-photo-veil-a100), transparent) 100%);
}
}
/* --sk-page-base-1 - the page's own ground when a project shows NO photo (its photo set to none). The
body paints the rail colour there (backdrop.css; a body rule cannot be gated on the skin, whose values
sit on the body), and forest's dark veil lies over it, so a pale skin got a dark page. With this slot
the page layer itself (body::before, whose container IS the body) is that colour; a tint chosen in
Settings still lies over it. With a photo nothing changes. */
@container style(--sk-page-base-1) {
body[data-skin-family="paper"]:not(.has-backdrop-image, .has-style-veil)::before {
background: var(--sk-page-base-1, transparent);
}
html body[data-skin-family="paper"].has-style-veil:not(.has-backdrop-image)::before {
background: var(--backdrop-veil), var(--sk-page-base-1, transparent);
}
}
/* --sk-rail-tone: pale - the nav rail is pale stone with dark ink (Athenian Marble). --sk-rail stays the
DARK base: --sidebar-bg also paints the dark cards and popovers, the Shots tab underline, the shot ids
and the plain today tile. So the rail paints from its own slots: --sk-rail-surface-1 (the shell),
--sk-rail-card-1 (its cards), --sk-rail-ink-1 / --sk-rail-muted-ink-1 (its texts); each defaults to the
pale card material and the page's inks. */
@container style(--sk-rail-tone: pale) {
body[data-skin-family="paper"] .sidebar {
--ink-on-dark: var(--sk-rail-ink-1, var(--ink));
--ink-on-dark-muted: var(--sk-rail-muted-ink-1, var(--ink-muted));
--ink-cream-8: var(--sk-rail-muted-ink-1, var(--ink-muted));
--ink-nav: var(--sk-ink-nav-1, var(--sk-rail-ink-1, var(--ink)));
--card-bg-dark: var(--sk-rail-card-1, var(--card-bg-solid));
--card-border-dark: var(--card-border);
--panel-text-shadow-color: transparent;
background: var(--sk-rail-surface-1, var(--card-bg-solid));
}
/* the menu's hover wash: sidebar.css lightens by 5%, invisible on pale stone */
body[data-skin-family="paper"] .sidebar .nav-item:not(.active):hover {
background: color-mix(in srgb, var(--sk-rail-ink-1, var(--ink)) 5%, transparent);
}
/* the pipeline stage and the shot queue are dark glass of their own (sidebar.css; the queue is also
.glass-dark): here they take the project day's material - its fill, its shadow word for word
(sidebar.css), dark ink, no text shadow */
body[data-skin-family="paper"] .sidebar-footer :is(.pipeline-stage, .sb-queue) {
background-color: var(--sk-rail-card-1, color-mix(in srgb, var(--card-bg-solid) 92%, transparent));
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--hi) 65%, transparent),
inset 1px 0 0 color-mix(in srgb, var(--hi-2) 35%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 6%, transparent),
0 2px 6px color-mix(in srgb, var(--shadow-ink) 10%, transparent),
0 12px 24px color-mix(in srgb, var(--shade) 28%, transparent);
color: var(--ink);
text-shadow: none;
}
body[data-skin-family="paper"] .sidebar-footer .pipeline-stage.is-settable:hover {
background-color: color-mix(in oklab, var(--sk-rail-card-1, var(--card-bg-solid)) 94%, var(--sk-rail-ink-1, var(--ink)));
}
body[data-skin-family="paper"] .sidebar-footer .sb-queue.sb-queue--clickable:hover {
box-shadow:
inset 0 1px 0 color-mix(in srgb, var(--hi) 65%, transparent),
inset 1px 0 0 color-mix(in srgb, var(--hi-2) 35%, transparent),
0 4px 12px color-mix(in srgb, var(--shadow-ink) 16%, transparent),
0 18px 36px color-mix(in srgb, var(--shade) 34%, transparent);
}
/* texts the rail cards draw FADED from their light cream (55-85%): a faded ink cannot read on a pale
card, so they take the rail's muted ink at full strength; the stage name takes the rail ink */
body[data-skin-family="paper"] .sidebar-footer .pipeline-stage .ps-text { color: var(--sk-rail-ink-1, var(--ink)); }
body[data-skin-family="paper"] .sidebar-footer .pipeline-stage .ps-next { color: var(--sk-rail-muted-ink-1, var(--ink-muted)); }
body[data-skin-family="paper"] .sidebar-footer .sb-queue :is(.sb-queue-meta, .sb-q-sub, .sb-q-eta, .sb-q-stage, .sb-q-model, .sb-q-more, .sb-q-hint) {
color: var(--sk-rail-muted-ink-1, var(--ink-muted));
}
body[data-skin-family="paper"] .sidebar-footer .sb-queue .sb-q-more:hover { color: var(--sk-rail-ink-1, var(--ink)); }
/* the stage picker (an admin's): sidebar.css lights a row white and marks the chosen one amber */
body[data-skin-family="paper"] .sidebar-footer .pipeline-stage .ps-pick:hover {
background: color-mix(in srgb, var(--sk-rail-ink-1, var(--ink)) 6%, transparent);
color: var(--sk-rail-ink-1, var(--ink));
}
body[data-skin-family="paper"] .sidebar-footer .pipeline-stage .ps-pick.is-on { color: var(--sk-gold-ink-1, var(--gold-deep-2)); }
/* the rail's haze into the page (sidebar.css .app-shell::after: the rail colour at 82 -> 55 -> 28 -> 10%
-> 0 over 1200 px), the same stops in the pale rail's colour: on Athenian Marble's mockup this is the
washed-out header on the left */
body[data-skin-family="paper"] .app-shell::after {
background: linear-gradient(to right,
color-mix(in srgb, var(--sk-rail-surface-1, var(--card-bg-solid)) 82%, transparent) 0%,
color-mix(in srgb, var(--sk-rail-surface-1, var(--card-bg-solid)) 55%, transparent) 30%,
color-mix(in srgb, var(--sk-rail-surface-1, var(--card-bg-solid)) 28%, transparent) 60%,
color-mix(in srgb, var(--sk-rail-surface-1, var(--card-bg-solid)) 10%, transparent) 85%,
transparent 100%);
}
}
/* ... with solid panels the rail cards are opaque like the project day */
@container style(--sk-rail-tone: pale) and style(--sk-panels: solid) {
body[data-skin-family="paper"] .sidebar-footer :is(.pipeline-stage, .sb-queue) {
background-color: var(--sk-rail-card-1, var(--card-bg-solid));
}
}
/* ... the project day card takes the rail cards' own stone when the skin gives one */
@container style(--sk-rail-tone: pale) and style(--sk-rail-card-1) {
body[data-skin-family="paper"] .sidebar-footer .project-day {
background-color: var(--sk-rail-card-1, var(--card-bg-solid));
}
}
/* ... a soft shade along the rail's right edge (the mockup's #DDD2C2 line) */
@container style(--sk-rail-tone: pale) and style(--sk-rail-edge-1) {
body[data-skin-family="paper"] .sidebar {
box-shadow: inset -2px 0 0 var(--sk-rail-edge-1, transparent);
}
}
/* ... the full rims: the rail cards take the project day's pale rim (the rail colour at the foot of the
dark cards' rim would draw a dark line under a pale card) */
@container style(--sk-rims: full) and style(--sk-rail-tone: pale) {
body[data-skin-family="paper"] .sidebar-footer :is(.pipeline-stage, .sb-queue)::before {
background: linear-gradient(180deg, var(--gilt-hi) 0%, var(--gilt-rim) 55%, color-mix(in oklab, var(--gilt-lo) 60%, var(--gilt)) 100%);
}
}
/* ... and the texture: the pale rail shell carries the rail tile (the rail cards already do) */
@container style(--sk-texture: on) and style(--sk-rail-tone: pale) {
body[data-skin-family="paper"] .sidebar {
--sk-tex-i: var(--sk-tex-rail-index);
background-image: var(--sk-tex-rail-image);
background-size: var(--sk-tex-rail-size);
background-position: calc(var(--sk-tex-i) * var(--sk-tex-step-x)) calc(var(--sk-tex-i) * var(--sk-tex-step-y));
background-repeat: repeat;
}
}
/* the pipeline stage's segments (sidebar.css: done --ok, the current one --warn, the rest the card edge
at 18%) - the glass family's slot names; each rule exists only while its slot is set */
@container style(--sk-stage-bar-1) {
body[data-skin-family="paper"] .sidebar-footer .ps-dots .dot.done { background: var(--sk-stage-bar-1, var(--ok)); }
}
@container style(--sk-stage-bar-current-1) {
body[data-skin-family="paper"] .sidebar-footer .ps-dots .dot.current {
background: var(--sk-stage-bar-current-1, var(--warn));
box-shadow: 0 0 0 var(--ring-w) color-mix(in srgb, var(--sk-stage-bar-current-1, var(--warn)) 30%, transparent);
}
}
@container style(--sk-stage-bar-track-1) {
body[data-skin-family="paper"] .sidebar-footer .ps-dots .dot:not(.done, .current) { background: var(--sk-stage-bar-track-1, color-mix(in srgb, var(--card-border) 18%, transparent)); }
}
/* the MANUAL tag after the stage's caption (sidebar.css: the amber at 90%) */
@container style(--sk-ps-manual-ink-1) {
body[data-skin-family="paper"] .sidebar-footer .pipeline-stage .ps-manual { color: var(--sk-ps-manual-ink-1, var(--amber)); }
}
/* Queue outcome and badge inks are slots on both dark and pale rails. Keeping them outside the pale-rail
choice lets a dark card opt into readable inks without changing any skin that leaves the slots unset. */
@container style(--sk-queue-done-ink-1) {
body[data-skin-family="paper"] .sidebar-footer .sb-queue .sb-q-row--completed .sb-q-eta { color: var(--sk-queue-done-ink-1, var(--leaf-ink)); }
}
@container style(--sk-queue-fail-ink-1) {
body[data-skin-family="paper"] .sidebar-footer .sb-queue .sb-q-row--failed .sb-q-eta { color: var(--sk-queue-fail-ink-1, var(--danger-ink)); }
}
@container style(--sk-queue-badge-ink-1) {
body[data-skin-family="paper"] .sidebar-footer .sb-queue .sb-q-badge.standard { color: var(--sk-queue-badge-ink-1, var(--leaf-ink)); }
}
@container style(--sk-queue-wait-ink-1) {
body[data-skin-family="paper"] .sidebar-footer .sb-queue .sb-q-badge.relax { color: var(--sk-queue-wait-ink-1, var(--ink-muted)); }
}
/* --sk-header-buttons: stone - the header's round buttons, the scale readout, the search pill and the
avatar are pale stone discs (a lit top-left, a rim, dark glyphs): --sk-header-button-1 (the fill),
-hi-1 (the light), -rim-1 (the ring), -ink-1 (the glyphs). The ring is each button's own ::before
(header.css: a masked 1px ring); the search pill has none, so its rim is a box-shadow ring. */
@container style(--sk-header-buttons: stone) {
body[data-skin-family="paper"] .ph-right :is(.ph-iconbtn, .ph-avatar, .ph-search-pill:not(.is-open)) {
background:
radial-gradient(circle at 30% 26%, var(--sk-header-button-hi-1, color-mix(in oklab, var(--card-bg-solid) 45%, var(--sk-light))), transparent 70%),
var(--sk-header-button-1, var(--card-bg-solid));
color: var(--sk-header-button-ink-1, var(--ink));
}
body[data-skin-family="paper"] .ph-right :is(.ph-iconbtn, .ph-avatar, .ph-search-pill:not(.is-open)):hover,
body[data-skin-family="paper"] .ph-right :is(.ph-iconbtn, .ph-avatar).is-open {
background:
radial-gradient(circle at 30% 26%, var(--sk-header-button-hi-1, color-mix(in oklab, var(--card-bg-solid) 45%, var(--sk-light))), transparent 70%),
color-mix(in oklab, var(--sk-header-button-1, var(--card-bg-solid)) 92%, var(--sk-header-button-ink-1, var(--ink)));
}
body[data-skin-family="paper"] .ph-right :is(.ph-iconbtn, .ph-avatar)::before {
background: var(--sk-header-button-rim-1, var(--card-border));
}
body[data-skin-family="paper"] .ph-right .ph-search-pill:not(.is-open) {
box-shadow:
inset 0 0 0 1px var(--sk-header-button-rim-1, var(--card-border)),
var(--sk-lift-near) color-mix(in srgb, var(--sk-dark) var(--sk-lift-near-strength), transparent),
var(--sk-lift-far) color-mix(in srgb, var(--sk-dark) var(--sk-lift-far-strength), transparent);
}
body[data-skin-family="paper"] .ph-right .ph-search-pill:not(.is-open) .ph-search-iconbtn {
color: var(--sk-header-button-ink-1, var(--ink));
}
}
/* ... the scale readout (100%) has its own stone and ink when the skin gives them (the gilt choice has
the same readout fill above) */
@container style(--sk-header-buttons: stone) and style(--sk-header-scale-1) {
body[data-skin-family="paper"] .ph-right .ph-iconbtn.ph-scale-btn:not(:hover, .is-open) {
background:
radial-gradient(circle at 30% 26%, var(--sk-header-button-hi-1, color-mix(in oklab, var(--card-bg-solid) 45%, var(--sk-light))), transparent 70%),
var(--sk-header-scale-1, var(--sk-header-button-1, var(--card-bg-solid)));
}
}
@container style(--sk-header-buttons: stone) and style(--sk-header-scale-ink-1) {
body[data-skin-family="paper"] .ph-right .ph-iconbtn.ph-scale-btn { color: var(--sk-header-scale-ink-1, var(--sk-header-button-ink-1, var(--ink))); }
}
/* --sk-status-tag: solid - the project status tag's fill is --sk-status-pill-fill-1 at full strength
(header.css mixes it at 18%, which a pale veil behind cannot carry); the glass family's option */
@container style(--sk-status-tag: solid) {
body[data-skin-family="paper"] :is(.ph-status-pill, .ph-project-other-status) {
--stag-fill: var(--sk-status-pill-fill-1, var(--stag-accent));
text-shadow: none;
}
}
/* the header's own inks, for a skin whose photo is pale behind the title (the glass family's names):
the title, the subtitle and episode (desktop; the phone keeps --sk-phone-meta-ink-1), the "." between
them (after the --sk-ink-soft-1 rule above, which it overrides), the title's dropdown button */
@container style(--sk-ph-title-ink-1) {
body[data-skin-family="paper"] .ph-title { color: var(--sk-ph-title-ink-1, var(--ink-on-dark)); }
}
/* the phone's floating chrome over a PALE photo (--sk-phone-chrome-1): mobile.css builds the stats band,
the Shotlist/Dashboard toggle and the bottom tab bar out of the dark shades at 28-62% and writes their text
in cream, which needs a dark ground. Same boxes, same strengths, the skin's own stone. */
@container style(--sk-phone-chrome-1) {
body[data-skin-family="paper"][data-ui-tier="s"] .topbar.tb-mobile {
background: linear-gradient(90deg,
color-mix(in srgb, var(--sk-phone-chrome-1, var(--shade-44)) 92%, transparent) 0%,
color-mix(in srgb, var(--sk-phone-chrome-1, var(--shade-44)) 86%, transparent) 48%,
color-mix(in srgb, var(--sk-phone-chrome-1, var(--shade-44)) 80%, transparent) 100%);
}
body[data-skin-family="paper"][data-ui-tier="s"] .ov-mtoggle {
background: color-mix(in srgb, var(--sk-phone-chrome-1, var(--shade-43)) 84%, transparent);
}
body[data-skin-family="paper"][data-ui-tier="s"] .mtab {
background: color-mix(in srgb, var(--sk-phone-chrome-1, var(--shade-14)) 88%, transparent);
}
body[data-skin-family="paper"][data-ui-tier="s"] .mtab.is-active {
background: color-mix(in srgb, var(--sk-phone-chrome-1, var(--shade-14)) 94%, transparent);
}
/* the band's faded cream captions (mobile.css draws the days left at 58% of the cream): over the skin's
own stone they take its ink at full strength */
body[data-skin-family="paper"][data-ui-tier="s"] .topbar.tb-mobile :is(.tbm2-tl-days, .tbm2-ring-sub) {
color: var(--sk-phone-chrome-ink-1, color-mix(in srgb, var(--ink-cream-9) 58%, transparent));
}
/* the phone's burger over the photo is the same stone */
body[data-skin-family="paper"][data-ui-tier="s"] .phm-burger {
background: color-mix(in srgb, var(--sk-phone-chrome-1, var(--shade-43)) 84%, transparent);
}
}
/* the ACTIVE tag on Settings' chosen theme card (views-pages.css: the leaf at 85%, with dark ink from
--sk-leaf-wash-ink-1). A deep leaf makes that wash mid-tone, where no ink reaches 4.5:1, so a skin may
give the tag its own fill (a pale tint for the dark ink). */
@container style(--sk-accent-tag-fill-1) {
body[data-skin-family="paper"] .theme-active-tag { background: var(--sk-accent-tag-fill-1, color-mix(in srgb, var(--leaf) 85%, transparent)); }
}
/* the phone's header sits straight on the photo and mobile.css writes its title and the brand word in
cream: a skin whose photo is pale there gives them a dark ink of their own (the phone's line under the
title keeps --sk-phone-meta-ink-1 above) */
@container style(--sk-phone-title-ink-1) {
body[data-skin-family="paper"][data-ui-tier="s"] :is(.ph-title, .phm-word) { color: var(--sk-phone-title-ink-1, var(--ink-cream-7)); }
}
@container style(--sk-ph-meta-ink-1) {
body[data-skin-family="paper"]:not([data-ui-tier="s"]) .ph-subtitle { color: var(--sk-ph-meta-ink-1, var(--ink-on-dark-muted)); }
body[data-skin-family="paper"]:not([data-ui-tier="s"]) .ph-episode-pill--compact .ph-episode-name { color: var(--sk-ph-meta-ink-1, var(--ink-on-dark-muted)); }
}
@container style(--sk-meta-sep-ink-1) {
body[data-skin-family="paper"] .ph-meta .ph-meta-sep { color: var(--sk-meta-sep-ink-1, var(--ink-soft)); }
}
@container style(--sk-ph-caret-fill-1) {
body[data-skin-family="paper"] .ph-caret {
background: var(--sk-ph-caret-fill-1, color-mix(in srgb, var(--mix-light) 5%, transparent));
color: var(--sk-ph-caret-ink-1, var(--ink-on-dark-muted));
}
body[data-skin-family="paper"] :is(.ph-caret:hover, .ph-title-row:hover .ph-caret, .ph-caret.is-open) {
background: color-mix(in oklab, var(--sk-ph-caret-fill-1, var(--mix-light)) 90%, var(--sk-ph-caret-ink-1, var(--ink)));
}
}
/* the overview's stat discs, one fill per disc (every band mode and every Health state): a lit disc
of the slot's colour, light at the top-left (the mockup's #F3E3C9 over #EDD9B8 over #E9D4B0). Each
exists only while its slot is set; the desktop band only (the phone's band is dark in every skin).
The completed disc's --sk-kpi-disc-green-1 (above) re-points the leaf instead, and stays. */
@container style(--sk-kpi-disc-total-1) {
body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--total { --paper-kpi-disc: var(--sk-kpi-disc-total-1, var(--blue-26)); background: radial-gradient(circle at 32% 28%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-hi-mix), var(--sk-light)) 0%, var(--paper-kpi-disc) 62%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-lo-mix), var(--sk-dark)) 100%); }
}
@container style(--sk-kpi-disc-completed-1) {
body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--completed { --paper-kpi-disc: var(--sk-kpi-disc-completed-1, var(--ok)); background: radial-gradient(circle at 32% 28%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-hi-mix), var(--sk-light)) 0%, var(--paper-kpi-disc) 62%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-lo-mix), var(--sk-dark)) 100%); }
}
@container style(--sk-kpi-disc-render-1) {
body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--render { --paper-kpi-disc: var(--sk-kpi-disc-render-1, var(--teal)); background: radial-gradient(circle at 32% 28%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-hi-mix), var(--sk-light)) 0%, var(--paper-kpi-disc) 62%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-lo-mix), var(--sk-dark)) 100%); }
}
@container style(--sk-kpi-disc-upscale-1) {
body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--upscale { --paper-kpi-disc: var(--sk-kpi-disc-upscale-1, var(--gold-2)); background: radial-gradient(circle at 32% 28%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-hi-mix), var(--sk-light)) 0%, var(--paper-kpi-disc) 62%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-lo-mix), var(--sk-dark)) 100%); }
}
@container style(--sk-kpi-disc-firstpass-1) {
body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--firstpass { --paper-kpi-disc: var(--sk-kpi-disc-firstpass-1, var(--gold-5)); background: radial-gradient(circle at 32% 28%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-hi-mix), var(--sk-light)) 0%, var(--paper-kpi-disc) 62%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-lo-mix), var(--sk-dark)) 100%); }
}
@container style(--sk-kpi-disc-concept-1) {
body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--concept { --paper-kpi-disc: var(--sk-kpi-disc-concept-1, var(--gold-16)); background: radial-gradient(circle at 32% 28%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-hi-mix), var(--sk-light)) 0%, var(--paper-kpi-disc) 62%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-lo-mix), var(--sk-dark)) 100%); }
}
@container style(--sk-kpi-disc-days-1) {
body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--days { --paper-kpi-disc: var(--sk-kpi-disc-days-1, var(--gold-3)); background: radial-gradient(circle at 32% 28%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-hi-mix), var(--sk-light)) 0%, var(--paper-kpi-disc) 62%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-lo-mix), var(--sk-dark)) 100%); }
}
@container style(--sk-kpi-disc-hours-1) {
body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--hours { --paper-kpi-disc: var(--sk-kpi-disc-hours-1, var(--gold-6)); background: radial-gradient(circle at 32% 28%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-hi-mix), var(--sk-light)) 0%, var(--paper-kpi-disc) 62%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-lo-mix), var(--sk-dark)) 100%); }
}
@container style(--sk-kpi-disc-rejected-1) {
body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--rejected { --paper-kpi-disc: var(--sk-kpi-disc-rejected-1, var(--danger-soft-2)); background: radial-gradient(circle at 32% 28%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-hi-mix), var(--sk-light)) 0%, var(--paper-kpi-disc) 62%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-lo-mix), var(--sk-dark)) 100%); }
}
@container style(--sk-kpi-disc-status-ontrack-1) {
body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--status-ontrack { --paper-kpi-disc: var(--sk-kpi-disc-status-ontrack-1, var(--ok)); background: radial-gradient(circle at 32% 28%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-hi-mix), var(--sk-light)) 0%, var(--paper-kpi-disc) 62%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-lo-mix), var(--sk-dark)) 100%); }
}
@container style(--sk-kpi-disc-status-ahead-1) {
body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--status-ahead { --paper-kpi-disc: var(--sk-kpi-disc-status-ahead-1, var(--leaf-bright)); background: radial-gradient(circle at 32% 28%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-hi-mix), var(--sk-light)) 0%, var(--paper-kpi-disc) 62%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-lo-mix), var(--sk-dark)) 100%); }
}
@container style(--sk-kpi-disc-status-behind-1) {
body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--status-behind { --paper-kpi-disc: var(--sk-kpi-disc-status-behind-1, var(--gold-16)); background: radial-gradient(circle at 32% 28%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-hi-mix), var(--sk-light)) 0%, var(--paper-kpi-disc) 62%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-lo-mix), var(--sk-dark)) 100%); }
}
@container style(--sk-kpi-disc-status-nodeadline-1) {
body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--status-nodeadline { --paper-kpi-disc: var(--sk-kpi-disc-status-nodeadline-1, var(--card-border)); background: radial-gradient(circle at 32% 28%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-hi-mix), var(--sk-light)) 0%, var(--paper-kpi-disc) 62%, color-mix(in oklab, var(--paper-kpi-disc) var(--sk-kpi-disc-lo-mix), var(--sk-dark)) 100%); }
}
@container style(--sk-kpi-disc-relief: raised) {
body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip {
box-shadow:
inset 0 1.5px 0 var(--sk-kpi-disc-hi-1, transparent),
inset 0 -2px 4px color-mix(in oklab, var(--sk-dark) 22%, transparent),
0 2px 4px color-mix(in srgb, var(--sk-dark) 18%, transparent);
}
}
/* ... and, with one ink for the glyphs (--sk-kpi-icons: ink), a disc may keep a glyph ink of its own
(the mockup's olive disc draws an olive glyph); each exists only while its slot is set */
@container style(--sk-kpi-icons: ink) and style(--sk-kpi-glyph-total-1) { body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--total { color: var(--sk-kpi-glyph-total-1, var(--sk-kpi-icon-ink-1, var(--ink))); } }
@container style(--sk-kpi-icons: ink) and style(--sk-kpi-glyph-completed-1) { body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--completed { color: var(--sk-kpi-glyph-completed-1, var(--sk-kpi-icon-ink-1, var(--ink))); } }
@container style(--sk-kpi-icons: ink) and style(--sk-kpi-glyph-render-1) { body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--render { color: var(--sk-kpi-glyph-render-1, var(--sk-kpi-icon-ink-1, var(--ink))); } }
@container style(--sk-kpi-icons: ink) and style(--sk-kpi-glyph-upscale-1) { body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--upscale { color: var(--sk-kpi-glyph-upscale-1, var(--sk-kpi-icon-ink-1, var(--ink))); } }
@container style(--sk-kpi-icons: ink) and style(--sk-kpi-glyph-firstpass-1) { body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--firstpass { color: var(--sk-kpi-glyph-firstpass-1, var(--sk-kpi-icon-ink-1, var(--ink))); } }
@container style(--sk-kpi-icons: ink) and style(--sk-kpi-glyph-concept-1) { body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--concept { color: var(--sk-kpi-glyph-concept-1, var(--sk-kpi-icon-ink-1, var(--ink))); } }
@container style(--sk-kpi-icons: ink) and style(--sk-kpi-glyph-days-1) { body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--days { color: var(--sk-kpi-glyph-days-1, var(--sk-kpi-icon-ink-1, var(--ink))); } }
@container style(--sk-kpi-icons: ink) and style(--sk-kpi-glyph-hours-1) { body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--hours { color: var(--sk-kpi-glyph-hours-1, var(--sk-kpi-icon-ink-1, var(--ink))); } }
@container style(--sk-kpi-icons: ink) and style(--sk-kpi-glyph-rejected-1) { body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--rejected { color: var(--sk-kpi-glyph-rejected-1, var(--sk-kpi-icon-ink-1, var(--ink))); } }
@container style(--sk-kpi-icons: ink) and style(--sk-kpi-glyph-status-ontrack-1) { body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--status-ontrack { color: var(--sk-kpi-glyph-status-ontrack-1, var(--sk-kpi-icon-ink-1, var(--ink))); } }
@container style(--sk-kpi-icons: ink) and style(--sk-kpi-glyph-status-ahead-1) { body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--status-ahead { color: var(--sk-kpi-glyph-status-ahead-1, var(--sk-kpi-icon-ink-1, var(--ink))); } }
@container style(--sk-kpi-icons: ink) and style(--sk-kpi-glyph-status-behind-1) { body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--status-behind { color: var(--sk-kpi-glyph-status-behind-1, var(--sk-kpi-icon-ink-1, var(--ink))); } }
@container style(--sk-kpi-icons: ink) and style(--sk-kpi-glyph-status-nodeadline-1) { body[data-skin-family="paper"] .topbar .tb-stats-row .tb-chip--status-nodeadline { color: var(--sk-kpi-glyph-status-nodeadline-1, var(--sk-kpi-icon-ink-1, var(--ink))); } }
/* the selected tab of a panel's tab group (the shots panel's "Shots"): the mockup draws it browner than
the toolbar buttons that share --sk-control-ink-1 (after that rule, same weight) */
@container style(--sk-tab-active-ink-1) {
body[data-skin-family="paper"] .tabs .tab.active { color: var(--sk-tab-active-ink-1, var(--sk-control-ink-1, var(--ink))); }
}
@container style(--sk-shell-veil-1) {
body[data-skin-family="paper"] .app-shell::after {
background: linear-gradient(to right,
color-mix(in srgb, var(--sk-shell-veil-1, var(--sk-page)) 82%, transparent) 0%,
color-mix(in srgb, var(--sk-shell-veil-1, var(--sk-page)) 55%, transparent) 30%,
color-mix(in srgb, var(--sk-shell-veil-1, var(--sk-page)) 28%, transparent) 60%,
color-mix(in srgb, var(--sk-shell-veil-1, var(--sk-page)) 10%, transparent) 85%,
transparent 100%);
}
}
@container style(--sk-rail-card-surface-1) {
body[data-skin-family="paper"] .sidebar .sidebar-footer .sb-queue :is(.sb-queue-title, .sb-q-sub, .sb-q-stage, .sb-q-eta) {
color: var(--sk-rail-card-muted-ink-1, var(--sk-ink));
}
body[data-skin-family="paper"] .sidebar .sidebar-footer :is(.project-day, .pipeline-stage, .sb-queue),
body[data-skin-family="paper"] .sidebar .sidebar-footer .pipeline-stage.is-settable:hover {
--ink: var(--sk-rail-card-ink-1, var(--sk-ink));
--ink-on-dark: var(--sk-rail-card-ink-1, var(--sk-ink));
--ink-muted: var(--sk-rail-card-muted-ink-1, var(--sk-line));
--ink-on-dark-muted: var(--sk-rail-card-muted-ink-1, var(--sk-line));
background: linear-gradient(180deg,
color-mix(in srgb, var(--sk-rail-card-surface-1, var(--sk-surface)) 97%, var(--sk-light)),
var(--sk-rail-card-surface-1, var(--sk-surface)));
color: var(--sk-rail-card-ink-1, var(--sk-ink));
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sk-light) 65%, transparent),
inset 0 -1px 0 color-mix(in srgb, var(--sk-dark) 22%, transparent),
0 0 0 1px color-mix(in srgb, var(--sk-rail-card-surface-1, var(--sk-surface)) 70%, var(--sk-dark));
}
body[data-skin-family="paper"] .sidebar .sidebar-footer :is(.project-day, .pipeline-stage, .sb-queue)::before { background: none; }
body[data-skin-family="paper"] .sidebar .sidebar-footer :is(.pd-label, .pd-date, .ps-label, .ps-next, .sb-queue-meta, .sb-q-model, .sb-q-version) {
color: var(--sk-rail-card-muted-ink-1, var(--sk-line));
}
body[data-skin-family="paper"] .sidebar .sidebar-footer .ps-text { color: var(--sk-rail-card-ink-1, var(--sk-ink)); }
}
@container style(--sk-page-ground-1) {
body[data-skin-family="paper"]:not(.has-backdrop-image)::before {
background: var(--sk-page-ground-1, var(--sk-page));
}
}
/* A channel cut into stone: the SVG supplies its inner and outer bevels, while the
centre stays matte. No ring or panel dimensions change. */
@container style(--sk-donut-profile: gutter) {
body[data-skin-family="paper"] .topbar .tb-donut { filter: none; }
body[data-skin-family="paper"] .topbar .tb-donut-gutter { opacity: 1; }
body[data-skin-family="paper"] .topbar .tb-donut-sheen { opacity: 0.25; }
body[data-skin-family="paper"] .topbar .tb-left .tb-donut-sheen { opacity: 0; }
body[data-skin-family="paper"] .topbar .tb-left .tb-donut-wrap .tb-donut-darken {
background: radial-gradient(circle at 45% 42%, color-mix(in srgb, var(--sk-donut-gutter-face-1, var(--sk-surface)) 95%, var(--sk-light)), var(--sk-donut-gutter-face-1, var(--sk-surface)) 75%);
box-shadow: inset 0 3px 9px color-mix(in srgb, var(--sk-donut-gutter-shadow-1, var(--sk-dark)) 22%, transparent), inset 0 -1px 2px color-mix(in srgb, var(--sk-donut-gutter-light-1, var(--sk-light)) 65%, transparent);
backdrop-filter: none;
-webkit-backdrop-filter: none;
clip-path: none;
}
}
/* the donut cell (--sk-donut-cell: marble), for a PALE disc: the number and a focused stat's sub-line
take dark inks (topbar.css writes both light), and a lit line runs just inside the ring - an inset
band of the disc (--sk-donut-hairline-w), which sits under the ring, so only its outer 2-3 px show;
the disc's own shadows are restated from topbar.css. The phone's disc (.tbm2-darken) is hidden. */
@container style(--sk-donut-cell: marble) and style(--sk-donut-num-ink-1) {
body[data-skin-family="paper"] .topbar .tb-donut-percent { color: var(--sk-donut-num-ink-1, var(--ink-cream-10)); }
}
@container style(--sk-donut-cell: marble) and style(--sk-donut-sub-ink-1) {
body[data-skin-family="paper"] .topbar .tb-donut-sub { color: var(--sk-donut-sub-ink-1, var(--ink-muted)); }
}
@container style(--sk-donut-cell: marble) and style(--sk-donut-hairline-1) {
body[data-skin-family="paper"] .topbar .tb-left .tb-donut-darken {
box-shadow:
inset 0 0 0 var(--sk-donut-hairline-w) var(--sk-donut-hairline-1, transparent),
inset 0 1px 0 color-mix(in srgb, var(--hi) 32%, transparent),
inset 1px 0 0 color-mix(in srgb, var(--hi-3) 18%, transparent),
inset 0 -6px 20px color-mix(in srgb, var(--sk-dark) 20%, transparent);
}
}
/* THE ORNAMENTS (the --sk-orn-* tokens in the defaults block). Each box is its component's
(topbar.css, sidebar.css, footer-row.css): out of flow, no paint of its own. Here it is painted
with the ornament's colour through the skin's image as a mask - only while the skin gives BOTH (a
colour with no image would fill the whole box). The shape's size and place are the mask's. */
@container style(--sk-orn-donut-1) and (not style(--sk-orn-donut-image: none)) {
body[data-skin-family="paper"] .topbar .tb-left::before {
content: "";
background-color: var(--sk-orn-donut-1, transparent);
-webkit-mask-image: var(--sk-orn-donut-image);
mask-image: var(--sk-orn-donut-image);
-webkit-mask-size: var(--sk-orn-donut-size);
mask-size: var(--sk-orn-donut-size);
-webkit-mask-position: var(--sk-orn-donut-position);
mask-position: var(--sk-orn-donut-position);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
opacity: var(--sk-orn-donut-opacity);
}
}
@container style(--sk-orn-band-corner-1) and (not style(--sk-orn-band-corner-image: none)) {
body[data-skin-family="paper"] .topbar .tb-left::after {
content: "";
background-color: var(--sk-orn-band-corner-1, transparent);
-webkit-mask-image: var(--sk-orn-band-corner-image);
mask-image: var(--sk-orn-band-corner-image);
-webkit-mask-size: var(--sk-orn-band-corner-size);
mask-size: var(--sk-orn-band-corner-size);
-webkit-mask-position: var(--sk-orn-band-corner-position);
mask-position: var(--sk-orn-band-corner-position);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
opacity: var(--sk-orn-band-corner-opacity);
}
}
@container style(--sk-orn-band-corner-1) and (not style(--sk-orn-band-corner-tr-image: none)) {
body[data-skin-family="paper"] .topbar .tb-right::before {
content: "";
background-color: var(--sk-orn-band-corner-1, transparent);
-webkit-mask-image: var(--sk-orn-band-corner-tr-image);
mask-image: var(--sk-orn-band-corner-tr-image);
-webkit-mask-size: var(--sk-orn-band-corner-tr-size);
mask-size: var(--sk-orn-band-corner-tr-size);
-webkit-mask-position: var(--sk-orn-band-corner-tr-position);
mask-position: var(--sk-orn-band-corner-tr-position);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
opacity: var(--sk-orn-band-corner-opacity);
}
}
@container style(--sk-orn-brand-1) and (not style(--sk-orn-brand-image: none)) {
body[data-skin-family="paper"] .sidebar .sb-title::after {
content: "";
background-color: var(--sk-orn-brand-1, transparent);
-webkit-mask-image: var(--sk-orn-brand-image);
mask-image: var(--sk-orn-brand-image);
-webkit-mask-size: var(--sk-orn-brand-size);
mask-size: var(--sk-orn-brand-size);
-webkit-mask-position: var(--sk-orn-brand-position);
mask-position: var(--sk-orn-brand-position);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
opacity: var(--sk-orn-brand-opacity);
}
}
@container style(--sk-orn-empty-1) and (not style(--sk-orn-empty-image: none)) {
body[data-skin-family="paper"] .footer-row .notes-card .notes-empty::before {
content: "";
background-color: var(--sk-orn-empty-1, transparent);
-webkit-mask-image: var(--sk-orn-empty-image);
mask-image: var(--sk-orn-empty-image);
-webkit-mask-size: var(--sk-orn-empty-size);
mask-size: var(--sk-orn-empty-size);
-webkit-mask-position: var(--sk-orn-empty-position);
mask-position: var(--sk-orn-empty-position);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
opacity: var(--sk-orn-empty-opacity);
}
}
/* Paired masks carve an ornament from the host material. The shifted -lo drawing XORs the
original, leaving a lit upper-left crescent and a shaded lower-right crescent. Every rule is
triple-gated so the older flat ornaments remain byte-for-byte in control of their paint. */
@container style(--sk-orn-rail-face-1) and (not style(--sk-orn-rail-image: none)) {
body[data-skin-family="paper"] .sidebar-spacer::before {
background-color: var(--sk-orn-rail-face-1, transparent);
-webkit-mask: var(--sk-orn-rail-image) var(--sk-orn-rail-position) / var(--sk-orn-rail-size) no-repeat;
mask: var(--sk-orn-rail-image) var(--sk-orn-rail-position) / var(--sk-orn-rail-size) no-repeat;
opacity: var(--sk-orn-rail-face-opacity);
}
}
@container style(--sk-orn-rail-shade-1) and style(--sk-orn-rail-1) and (not style(--sk-orn-rail-lo-image: none)) {
body[data-skin-family="paper"] .sidebar-spacer::after {
background-color: var(--sk-orn-rail-1, transparent);
background-image: linear-gradient(var(--sk-orn-rail-shade-1, transparent) 0 0), var(--sk-orn-rail-lo-image);
background-size: 100% 100%, var(--sk-orn-rail-size);
background-position: 0 0, var(--sk-orn-rail-position);
background-repeat: no-repeat;
background-blend-mode: lighten, normal, normal, normal;
-webkit-mask-image: var(--sk-orn-rail-image), var(--sk-orn-rail-lo-image);
mask-image: var(--sk-orn-rail-image), var(--sk-orn-rail-lo-image);
-webkit-mask-size: var(--sk-orn-rail-size);
mask-size: var(--sk-orn-rail-size);
-webkit-mask-position: var(--sk-orn-rail-position);
mask-position: var(--sk-orn-rail-position);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: var(--sk-orn-rail-opacity);
}
}
@container style(--sk-orn-band-corner-shade-1) and style(--sk-orn-band-corner-1) and (not style(--sk-orn-band-corner-lo-image: none)) {
body[data-skin-family="paper"] .topbar .tb-left::after {
background-color: var(--sk-orn-band-corner-1, transparent);
background-image: linear-gradient(var(--sk-orn-band-corner-shade-1, transparent) 0 0), var(--sk-orn-band-corner-lo-image);
background-size: 100% 100%, var(--sk-orn-band-corner-size);
background-position: 0 0, var(--sk-orn-band-corner-position);
background-repeat: no-repeat;
background-blend-mode: lighten, normal, normal, normal;
-webkit-mask-image: var(--sk-orn-band-corner-image), var(--sk-orn-band-corner-lo-image);
mask-image: var(--sk-orn-band-corner-image), var(--sk-orn-band-corner-lo-image);
-webkit-mask-size: var(--sk-orn-band-corner-size);
mask-size: var(--sk-orn-band-corner-size);
-webkit-mask-position: var(--sk-orn-band-corner-position);
mask-position: var(--sk-orn-band-corner-position);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: var(--sk-orn-band-corner-opacity);
}
}
@container style(--sk-orn-band-edge-shade-1) and style(--sk-orn-band-edge-1) and (not style(--sk-orn-band-edge-lo-image: none)) {
body[data-skin-family="paper"] .topbar .tb-right::before {
content: "";
background-color: var(--sk-orn-band-edge-1, transparent);
background-image: linear-gradient(var(--sk-orn-band-edge-shade-1, transparent) 0 0), var(--sk-orn-band-edge-lo-image);
background-size: 100% 100%, var(--sk-orn-band-edge-size);
background-position: 0 0, var(--sk-orn-band-edge-position);
background-repeat: no-repeat;
background-blend-mode: lighten, normal, normal, normal;
-webkit-mask-image: var(--sk-orn-band-edge-image), var(--sk-orn-band-edge-lo-image);
mask-image: var(--sk-orn-band-edge-image), var(--sk-orn-band-edge-lo-image);
-webkit-mask-size: var(--sk-orn-band-edge-size);
mask-size: var(--sk-orn-band-edge-size);
-webkit-mask-position: var(--sk-orn-band-edge-position);
mask-position: var(--sk-orn-band-edge-position);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: var(--sk-orn-band-edge-opacity);
}
}
@container style(--sk-orn-disc-shade-1) and style(--sk-orn-disc-1) and (not style(--sk-orn-disc-lo-image: none)) {
body[data-skin-family="paper"] .topbar .tb-donut-darken::before {
background-color: var(--sk-orn-disc-1, transparent);
background-image: linear-gradient(var(--sk-orn-disc-shade-1, transparent) 0 0), var(--sk-orn-disc-lo-image);
background-size: 100% 100%, var(--sk-orn-disc-size);
background-position: 0 0, var(--sk-orn-disc-position);
background-repeat: no-repeat;
background-blend-mode: lighten, normal, normal, normal;
-webkit-mask-image: var(--sk-orn-disc-image), var(--sk-orn-disc-lo-image);
mask-image: var(--sk-orn-disc-image), var(--sk-orn-disc-lo-image);
-webkit-mask-size: var(--sk-orn-disc-size);
mask-size: var(--sk-orn-disc-size);
-webkit-mask-position: var(--sk-orn-disc-position);
mask-position: var(--sk-orn-disc-position);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: var(--sk-orn-disc-opacity);
}
}
@container style(--sk-orn-disc-face-1) and (not style(--sk-orn-disc-image: none)) {
body[data-skin-family="paper"] .topbar .tb-donut-darken::after {
background-color: var(--sk-orn-disc-face-1, transparent);
-webkit-mask: var(--sk-orn-disc-image) var(--sk-orn-disc-position) / var(--sk-orn-disc-size) no-repeat;
mask: var(--sk-orn-disc-image) var(--sk-orn-disc-position) / var(--sk-orn-disc-size) no-repeat;
opacity: var(--sk-orn-disc-face-opacity);
}
}
@container style(--sk-orn-card-edge-shade-1) and style(--sk-orn-card-edge-1) and (not style(--sk-orn-card-edge-lo-image: none)) and (not style(--sk-orn-card-edge-activity-image: none)) {
body[data-skin-family="paper"] .footer-row .activity-card::after {
background-color: var(--sk-orn-card-edge-1, transparent);
background-image: linear-gradient(var(--sk-orn-card-edge-shade-1, transparent) 0 0), var(--sk-orn-card-edge-lo-image);
background-size: 100% 100%, var(--sk-orn-card-edge-size);
background-position: 0 0, var(--sk-orn-card-edge-activity-position);
background-repeat: no-repeat;
background-blend-mode: lighten, normal, normal, normal;
-webkit-mask-image: var(--sk-orn-card-edge-activity-image), var(--sk-orn-card-edge-lo-image);
mask-image: var(--sk-orn-card-edge-activity-image), var(--sk-orn-card-edge-lo-image);
-webkit-mask-size: var(--sk-orn-card-edge-size);
mask-size: var(--sk-orn-card-edge-size);
-webkit-mask-position: var(--sk-orn-card-edge-activity-position);
mask-position: var(--sk-orn-card-edge-activity-position);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: var(--sk-orn-card-edge-opacity);
}
}
@container style(--sk-orn-card-edge-shade-1) and style(--sk-orn-card-edge-1) and (not style(--sk-orn-card-edge-lo-image: none)) and (not style(--sk-orn-card-edge-media-image: none)) {
body[data-skin-family="paper"] .footer-row .media-card::after {
background-color: var(--sk-orn-card-edge-1, transparent);
background-image: linear-gradient(var(--sk-orn-card-edge-shade-1, transparent) 0 0), var(--sk-orn-card-edge-lo-image);
background-size: 100% 100%, var(--sk-orn-card-edge-size);
background-position: 0 0, var(--sk-orn-card-edge-media-position);
background-repeat: no-repeat;
background-blend-mode: lighten, normal, normal, normal;
-webkit-mask-image: var(--sk-orn-card-edge-media-image), var(--sk-orn-card-edge-lo-image);
mask-image: var(--sk-orn-card-edge-media-image), var(--sk-orn-card-edge-lo-image);
-webkit-mask-size: var(--sk-orn-card-edge-size);
mask-size: var(--sk-orn-card-edge-size);
-webkit-mask-position: var(--sk-orn-card-edge-media-position);
mask-position: var(--sk-orn-card-edge-media-position);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: var(--sk-orn-card-edge-opacity);
}
}
@container style(--sk-orn-card-edge-shade-1) and style(--sk-orn-card-edge-1) and (not style(--sk-orn-card-edge-lo-image: none)) and (not style(--sk-orn-card-edge-notes-image: none)) {
body[data-skin-family="paper"] .footer-row .notes-card::after {
background-color: var(--sk-orn-card-edge-1, transparent);
background-image: linear-gradient(var(--sk-orn-card-edge-shade-1, transparent) 0 0), var(--sk-orn-card-edge-lo-image);
background-size: 100% 100%, var(--sk-orn-card-edge-size);
background-position: 0 0, var(--sk-orn-card-edge-notes-position);
background-repeat: no-repeat;
background-blend-mode: lighten, normal, normal, normal;
-webkit-mask-image: var(--sk-orn-card-edge-notes-image), var(--sk-orn-card-edge-lo-image);
mask-image: var(--sk-orn-card-edge-notes-image), var(--sk-orn-card-edge-lo-image);
-webkit-mask-size: var(--sk-orn-card-edge-size);
mask-size: var(--sk-orn-card-edge-size);
-webkit-mask-position: var(--sk-orn-card-edge-notes-position);
mask-position: var(--sk-orn-card-edge-notes-position);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: var(--sk-orn-card-edge-opacity);
}
}
@container style(--sk-orn-quiet-shade-1) and style(--sk-orn-quiet-1) and (not style(--sk-orn-quiet-lo-image: none)) {
body[data-skin-family="paper"] .right-column .milestones-card:has(.milestones-empty)::after {
background-color: var(--sk-orn-quiet-1, transparent);
background-image: linear-gradient(var(--sk-orn-quiet-shade-1, transparent) 0 0), var(--sk-orn-quiet-lo-image);
background-size: 100% 100%, var(--sk-orn-quiet-size);
background-position: 0 0, var(--sk-orn-quiet-position);
background-repeat: no-repeat;
background-blend-mode: lighten, normal, normal, normal;
-webkit-mask-image: var(--sk-orn-quiet-image), var(--sk-orn-quiet-lo-image);
mask-image: var(--sk-orn-quiet-image), var(--sk-orn-quiet-lo-image);
-webkit-mask-size: var(--sk-orn-quiet-size);
mask-size: var(--sk-orn-quiet-size);
-webkit-mask-position: var(--sk-orn-quiet-position);
mask-position: var(--sk-orn-quiet-position);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: var(--sk-orn-quiet-opacity);
}
}
/* the calendar (--sk-today-tile: framed), the glass family's slot names: the today tile's own fill,
its weekday and date inks and its ring, and the TODAY chip's fill and ink. Each exists only while its
slot is set; the framed rules above keep their gilt otherwise. */
@container style(--sk-today-tile: framed) and style(--sk-today-tile-fill-1) {
body[data-skin-family="paper"] .week-strip .week-cell.today {
background: linear-gradient(180deg,
var(--sk-today-tile-fill-1, color-mix(in oklab, var(--gilt-lo) 55%, var(--sk-page))) 0%,
color-mix(in oklab, var(--sk-today-tile-fill-1, color-mix(in oklab, var(--gilt-lo) 55%, var(--sk-page))) 96%, var(--sk-dark)) 100%);
box-shadow:
0 0 0 1px var(--sk-today-tile-ring-1, color-mix(in oklab, var(--gilt) 80%, var(--gilt-hi))),
inset 0 1px 0 color-mix(in oklab, var(--gilt-sheen) 35%, transparent),
inset 0 -2px 0 color-mix(in oklab, var(--sk-today-tile-fill-1, color-mix(in oklab, var(--gilt-lo) 55%, var(--sk-page))) 85%, var(--sk-dark));
outline-color: var(--sk-today-tile-ring-1, var(--gilt-rim));
}
}
@container style(--sk-today-tile-label-1) {
body[data-skin-family="paper"] .week-strip .week-cell.today .wc-dow { color: var(--sk-today-tile-label-1, color-mix(in srgb, var(--white) 70%, transparent)); }
}
@container style(--sk-today-tile-ink-1) {
body[data-skin-family="paper"] .week-strip .week-cell.today .wc-num { color: var(--sk-today-tile-ink-1, color-mix(in srgb, var(--foil) 33%, var(--mix-light))); }
}
@container style(--sk-today-tile: framed) and style(--sk-day-tag-fill-1) {
body[data-skin-family="paper"] .right-column .sched-day-tag { background: var(--sk-day-tag-fill-1, var(--gilt-lo)); }
}
@container style(--sk-today-tile: framed) and style(--sk-day-tag-ink-1) {
body[data-skin-family="paper"] .right-column .sched-day-tag { color: var(--sk-day-tag-ink-1, var(--gilt-ink)); }
}
/* the calendar's day headers (right-column.css: a pale gold pill; the selected day keeps its own) */
@container style(--sk-day-head-fill-1) {
body[data-skin-family="paper"] .right-column .sched-day:not(.is-selected) .sched-day-head {
background: linear-gradient(180deg,
color-mix(in srgb, var(--sk-day-head-fill-1, color-mix(in srgb, var(--gold-11) 28%, var(--mix-light))) 95%, transparent),
color-mix(in srgb, var(--sk-day-head-fill-2, var(--sk-day-head-fill-1, color-mix(in srgb, var(--paper-2) 96%, var(--mix-dark)))) 92%, transparent));
}
}
@container style(--sk-day-head-ink-1) {
body[data-skin-family="paper"] .right-column .sched-day:not(.is-selected) .sched-day-head { color: var(--sk-day-head-ink-1, var(--ink-muted)); }
}
/* the calendar's Sync now (right-column.css: the ink) */
@container style(--sk-cal-sync-ink-1) {
body[data-skin-family="paper"] .right-column .cal-sync-btn:not(:hover) { color: var(--sk-cal-sync-ink-1, var(--ink)); }
}
@container style(--sk-scrollbar-thumb-1) {
body[data-skin-family="paper"] .shots-list {
scrollbar-color: var(--sk-scrollbar-thumb-1, var(--tan)) var(--sk-scrollbar-track-1, transparent);
}
body[data-skin-family="paper"] .shots-list::-webkit-scrollbar-thumb {
background: var(--sk-scrollbar-thumb-1, var(--tan));
}
}
@container style(--sk-scrollbar-track-1) {
body[data-skin-family="paper"] .shots-list::-webkit-scrollbar-track {
background: var(--sk-scrollbar-track-1, transparent);
}
}
/* the Shot Breakdown's hero count (queue-breakdown.css: the olive) */
@container style(--sk-bd-hero-num-1) {
body[data-skin-family="paper"] .bd-num.leaf { color: var(--sk-bd-hero-num-1, var(--olive-3)); }
}
/* the floating buttons (--sk-fab: mixed, forest's gold / leaf / gold), each fill a slot pair - the
bubbles type their gradients themselves (notepad-bubble.css, todo-bubble.css, assistant.css), and the
fallbacks are those gradients' stops - and one glyph ink */
@container style(--sk-fab: mixed) and style(--sk-fab-top-fill-1) {
body[data-skin-family="paper"] .npb-bubble:not(.is-open) { background: linear-gradient(150deg, var(--sk-fab-top-fill-1, color-mix(in srgb, var(--gold-14) 88%, var(--mix-light))), var(--sk-fab-top-fill-2, var(--gold-22)) 70%); }
}
@container style(--sk-fab: mixed) and style(--sk-fab-mid-fill-1) {
body[data-skin-family="paper"] .tdb-bubble:not(.is-open) { background: linear-gradient(150deg, var(--sk-fab-mid-fill-1, var(--leaf)), var(--sk-fab-mid-fill-2, var(--olive-3)) 70%); }
}
@container style(--sk-fab: mixed) and style(--sk-fab-low-fill-1) {
body[data-skin-family="paper"] .aichat-bubble:not(.is-open) { background: linear-gradient(150deg, var(--sk-fab-low-fill-1, color-mix(in srgb, var(--gold-10) 75%, var(--mix-light))), var(--sk-fab-low-fill-2, var(--gold)) 70%); }
}
@container style(--sk-fab-ink-1) {
body[data-skin-family="paper"] :is(.npb-bubble, .tdb-bubble, .aichat-bubble):not(.is-open) { color: var(--sk-fab-ink-1, var(--fab-ink)); }
}
/* An input the family does not otherwise reach draws its placeholder in the BROWSER's own colour, made
from the input's ink: on a pale panel with a dark ink that renders under 3.6:1 (Censored Words'
pattern and replacement boxes, 18 Sep 2026 - 3.56 where forest passes). The slot is the whole colour,
and the rule does not exist until a skin sets it, so a paper skin that leaves it alone is unchanged. */
@container style(--sk-input-placeholder-ink-1) {
body[data-skin-family="paper"] .cw-in::placeholder { color: var(--sk-input-placeholder-ink-1, var(--ink-muted)); opacity: 1; }
}
/* Inset material for the reference skins. Keep lighting ABOVE the translucent
pattern, with the original fill below it. Rims/shadows/blur remain untouched.
Existing templates (including Marble & Gold) do not opt into this override. */
@container style(--sk-texture: on) and style(--sk-tex-inset: on) and (not style(--sk-tex-panel-image: none)) {
body[data-skin-family="paper"] :is(.shots-panel.glass, .view-page) {
background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 12%, transparent), transparent 55%), var(--sk-tex-panel-image);
background-size: auto, var(--sk-tex-panel-size);
background-position: 0 0, calc(var(--sk-tex-i) * var(--sk-tex-step-x)) calc(var(--sk-tex-i) * var(--sk-tex-step-y));
background-repeat: no-repeat, repeat;
}
body[data-skin-family="paper"] .topbar .tb-right {
background-image:
linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 8%, transparent), transparent 60%),
var(--sk-tex-panel-image),
radial-gradient(ellipse 130% 100% at 30% 30%,
color-mix(in srgb, color-mix(in srgb, var(--cream-9) 88%, var(--mix-light)) 94%, transparent) 0%,
color-mix(in srgb, color-mix(in srgb, var(--hi) 91%, var(--mix-dark)) 90%, transparent) 60%,
color-mix(in srgb, color-mix(in srgb, var(--card-border) 64%, var(--mix-light)) 84%, transparent) 100%);
background-size: auto, var(--sk-tex-panel-size), auto;
background-position: 0 0, calc(var(--sk-tex-i) * var(--sk-tex-step-x)) calc(var(--sk-tex-i) * var(--sk-tex-step-y)), 0 0;
background-repeat: no-repeat, repeat, no-repeat;
}
}
@container style(--sk-texture: on) and style(--sk-tex-inset: on) and style(--sk-donut-cell: marble) and (not style(--sk-tex-panel-image: none)) {
body[data-skin-family="paper"] .topbar .tb-left {
background-image:
radial-gradient(ellipse 75% 75% at 35% 50%,
color-mix(in srgb, var(--cream-6) 18%, transparent) 0%,
color-mix(in srgb, var(--cream-6) 10%, transparent) 45%,
transparent 75%),
var(--sk-tex-panel-image);
background-size: auto, var(--sk-tex-panel-size);
background-position: 0 0, calc(var(--sk-tex-i) * var(--sk-tex-step-x)) calc(var(--sk-tex-i) * var(--sk-tex-step-y));
background-repeat: no-repeat, repeat;
}
}
@container style(--sk-texture: on) and style(--sk-tex-inset: on) and (not style(--sk-tex-card-image: none)) {
body[data-skin-family="paper"] :is(.right-column .rc-card, .sidebar-footer .project-day),
body[data-skin-family="paper"] .footer-row :is(.activity-card, .media-card, .notes-card) {
background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 10%, transparent), transparent 60%), var(--sk-tex-card-image);
background-size: auto, var(--sk-tex-card-size);
background-position: 0 0, calc(var(--sk-tex-i) * var(--sk-tex-step-x)) calc(var(--sk-tex-i) * var(--sk-tex-step-y));
background-repeat: no-repeat, repeat;
}
}
@container style(--sk-texture: on) and style(--sk-tex-inset: on) and (not style(--sk-tex-rail-image: none)) {
body[data-skin-family="paper"] .sidebar {
background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-rail-surface-1, var(--sk-rail)) 70%, transparent), color-mix(in srgb, var(--sk-rail-surface-1, var(--sk-rail)) 80%, transparent)), var(--sk-tex-rail-image);
background-size: auto, var(--sk-tex-rail-size);
background-position: 0 0, 0 0;
background-repeat: no-repeat, repeat;
}
body[data-skin-family="paper"] .sidebar-footer :is(.pipeline-stage, .sb-queue) {
background-image: none;
}
}
/* Match the embedded stone to the independently selected Overview tone. */
@container style(--sk-texture: on) and style(--sk-tex-matte: on) {
body[data-skin-family="paper"][data-content-tone="light"] .overview-main .shots-panel.glass {
--sk-tex-panel-image: var(--sk-tex-light-panel-image);
}
body[data-skin-family="paper"][data-content-tone="dark"] .overview-main .shots-panel.glass {
--sk-tex-panel-image: var(--sk-tex-dark-panel-image);
}
}
@container style(--sk-texture: on) and style(--sk-tex-inset: on) and style(--sk-tex-matte: on) {
body[data-skin-family="paper"][data-content-tone] .overview-main .shots-panel.glass {
background-image: linear-gradient(180deg, color-mix(in srgb, var(--content-tone-hi, var(--sk-light)) 4%, transparent), transparent 60%), linear-gradient(color-mix(in srgb, var(--content-tone-panel, var(--sk-surface)) var(--sk-tex-matte-cover), transparent), color-mix(in srgb, var(--content-tone-panel, var(--sk-surface)) var(--sk-tex-matte-cover), transparent)), var(--sk-tex-panel-image);
background-size: auto, auto, var(--sk-tex-panel-size);
background-position: 0 0, 0 0, 0 0;
background-repeat: no-repeat, no-repeat, repeat;
background-blend-mode: normal;
}
}
/* Opaque, quiet stone is embedded beneath each surface's own tinted fill. */
@container style(--sk-texture: on) and style(--sk-tex-inset: on) and style(--sk-tex-matte: on) {
body[data-skin-family="paper"] :is(.shots-panel.glass, .view-page) {
background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 12%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--sk-surface, var(--card-bg-solid)) var(--sk-tex-matte-cover), transparent), color-mix(in srgb, var(--sk-surface, var(--card-bg-solid)) var(--sk-tex-matte-cover), transparent)), var(--sk-tex-panel-image);
background-size: auto, auto, var(--sk-tex-panel-size);
background-position: 0 0, 0 0, calc(var(--sk-tex-i) * var(--sk-tex-step-x)) calc(var(--sk-tex-i) * var(--sk-tex-step-y));
background-repeat: no-repeat, no-repeat, repeat;
background-blend-mode: normal;
}
body[data-skin-family="paper"] .topbar .tb-right {
background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 8%, transparent), transparent 60%), radial-gradient(ellipse 130% 100% at 30% 30%, color-mix(in srgb, color-mix(in srgb, var(--cream-9) 88%, var(--mix-light)) var(--sk-tex-matte-cover), transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--hi) 91%, var(--mix-dark)) var(--sk-tex-matte-cover), transparent) 60%, color-mix(in srgb, color-mix(in srgb, var(--card-border) 64%, var(--mix-light)) var(--sk-tex-matte-cover), transparent) 100%), var(--sk-tex-panel-image);
background-size: auto, auto, var(--sk-tex-panel-size);
background-position: 0 0, 0 0, calc(var(--sk-tex-i) * var(--sk-tex-step-x)) calc(var(--sk-tex-i) * var(--sk-tex-step-y));
background-repeat: no-repeat, no-repeat, repeat;
background-blend-mode: normal;
}
body[data-skin-family="paper"] .topbar .tb-left {
background-image: radial-gradient(ellipse 75% 75% at 35% 50%, color-mix(in srgb, var(--cream-6) 18%, transparent) 0%, color-mix(in srgb, var(--cream-6) 10%, transparent) 45%, transparent 75%), linear-gradient(180deg, color-mix(in srgb, var(--paper-donut-slab) var(--sk-tex-matte-cover), transparent), color-mix(in srgb, var(--paper-donut-slab) var(--sk-tex-matte-cover), transparent)), var(--sk-tex-panel-image);
background-size: auto, auto, var(--sk-tex-panel-size);
background-position: 0 0, 0 0, calc(var(--sk-tex-i) * var(--sk-tex-step-x)) calc(var(--sk-tex-i) * var(--sk-tex-step-y));
background-repeat: no-repeat, no-repeat, repeat;
background-blend-mode: normal;
}
body[data-skin-family="paper"] :is(.right-column .rc-card, .footer-row .rc-card) {
background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 10%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--sk-surface, var(--card-bg-solid)) var(--sk-tex-matte-cover), transparent), color-mix(in srgb, var(--sk-surface, var(--card-bg-solid)) var(--sk-tex-matte-cover), transparent)), var(--sk-tex-card-image);
background-size: auto, auto, var(--sk-tex-card-size);
background-position: 0 0, 0 0, calc(var(--sk-tex-i) * var(--sk-tex-step-x)) calc(var(--sk-tex-i) * var(--sk-tex-step-y));
background-repeat: no-repeat, no-repeat, repeat;
background-blend-mode: normal;
}
body[data-skin-family="paper"] .sidebar {
background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 4%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--sk-rail-surface-1, var(--sk-rail)) var(--sk-tex-matte-rail-cover), transparent), color-mix(in srgb, var(--sk-rail-surface-1, var(--sk-rail)) var(--sk-tex-matte-rail-cover), transparent)), var(--sk-tex-rail-image);
background-size: auto, auto, var(--sk-tex-rail-size);
background-position: 0 0, 0 0, 0 0;
background-repeat: no-repeat, no-repeat, repeat;
background-blend-mode: normal;
}
body[data-skin-family="paper"] .sidebar-footer .project-day {
background-image: linear-gradient(180deg, color-mix(in srgb, var(--sk-light) 10%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--sk-rail-card-1, var(--card-bg-solid)) var(--sk-tex-matte-cover), transparent), color-mix(in srgb, var(--sk-rail-card-1, var(--card-bg-solid)) var(--sk-tex-matte-cover), transparent)), var(--sk-tex-card-image);
background-size: auto, auto, var(--sk-tex-card-size);
background-position: 0 0, 0 0, calc(var(--sk-tex-i) * var(--sk-tex-step-x)) calc(var(--sk-tex-i) * var(--sk-tex-step-y));
background-repeat: no-repeat, no-repeat, repeat;
background-blend-mode: normal;
}
}
/* Thick limestone edges sit above the existing texture, never replace its material. */
@container style(--sk-maya-slab: on) {
body[data-skin-family="paper"] .sidebar :is(.pipeline-stage, .sb-queue) {
box-shadow:
inset 1px 2px 1px color-mix(in srgb, var(--sk-light) 45%, transparent),
inset -1px -3px 1px color-mix(in srgb, var(--sk-dark) 30%, transparent),
inset 0 0 0 4px color-mix(in srgb, var(--sk-rail-card-surface-1, var(--sk-rail)) 35%, transparent),
0 3px 2px color-mix(in srgb, var(--sk-dark) 30%, transparent);
}
body[data-skin-family="paper"] :is(.topbar, .shots-panel.glass, .right-column .rc-card.glass, .footer-row .rc-card, .sidebar-footer .project-day) {
box-shadow:
inset 0 2px 1px color-mix(in srgb, var(--sk-light) 92%, transparent),
inset 2px 0 1px color-mix(in srgb, var(--sk-light) 62%, transparent),
inset -2px -4px 1px color-mix(in srgb, var(--sk-ink) 23%, transparent),
inset 0 0 0 5px color-mix(in srgb, var(--sk-surface-alt) 55%, transparent),
inset 0 0 0 6px color-mix(in srgb, var(--sk-ink) 11%, transparent),
0 3px 1px color-mix(in srgb, var(--sk-deep) 42%, transparent),
0 8px 12px color-mix(in srgb, var(--sk-dark) 26%, transparent);
}
body[data-skin-family="paper"] .shots-list .shot-row {
box-shadow:
inset 0 2px 1px color-mix(in srgb, var(--sk-light) 92%, transparent),
inset 1px 0 1px color-mix(in srgb, var(--sk-light) 65%, transparent),
inset -1px -3px 1px color-mix(in srgb, var(--sk-ink) 18%, transparent),
0 2px 1px color-mix(in srgb, var(--sk-deep) 26%, transparent),
0 4px 5px color-mix(in srgb, var(--sk-dark) 15%, transparent);
}
body[data-skin-family="paper"] .topbar .tb-left {
mask-image: none;
-webkit-mask-image: none;
box-shadow: inset 2px 2px 1px color-mix(in srgb, var(--sk-light) 90%, transparent), inset 0 -4px 1px color-mix(in srgb, var(--sk-ink) 23%, transparent), inset 0 0 0 5px color-mix(in srgb, var(--sk-surface-alt) 45%, transparent);
}
body[data-skin-family="paper"] .topbar .tb-right {
box-shadow: inset 0 2px 1px color-mix(in srgb, var(--sk-light) 90%, transparent), inset -2px -4px 1px color-mix(in srgb, var(--sk-ink) 23%, transparent), inset 0 0 0 5px color-mix(in srgb, var(--sk-surface-alt) 45%, transparent);
}
body[data-skin-family="paper"] .topbar .tb-left::after,
body[data-skin-family="paper"] .topbar .tb-right::before,
body[data-skin-family="paper"] .footer-row .activity-card::after {
content: "";
background-color: color-mix(in srgb, var(--sk-danger) 67%, var(--sk-surface));
mask-image: url("/assets/skins/maya-temple/step-corner.svg?v=1");
mask-size: 36px 36px;
mask-position: left 11px top 11px;
mask-repeat: no-repeat;
filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--sk-light) 88%, transparent));
opacity: .8;
}
body[data-skin-family="paper"] .topbar .tb-right::before {
mask-image: url("/assets/skins/maya-temple/step-corner-tr.svg?v=1");
mask-position: right 11px top 11px;
}
body[data-skin-family="paper"] .topbar .tb-left::after {
mask-image: url("/assets/skins/maya-temple/step-corner.svg?v=1"), url("/assets/skins/maya-temple/step-corner-bl.svg?v=1"), url("/assets/skins/maya-temple/step-corner-br.svg?v=1");
mask-position: left 11px top 11px, left 11px bottom 11px, right 11px bottom 11px;
}
body[data-skin-family="paper"] .footer-row .activity-card::after {
mask-image: url("/assets/skins/maya-temple/step-corner-br.svg?v=1");
mask-position: right 11px bottom 11px;
}
}
@container style(--sk-maya-slab: on) {
body[data-skin-family="paper"] .nav-item[data-nav="overview"] .nav-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-overview.svg?v=1"); }
body[data-skin-family="paper"] .nav-item[data-nav="shots"] .nav-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-shots.svg?v=1"); }
body[data-skin-family="paper"] .nav-item[data-nav="characters"] .nav-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-characters.svg?v=1"); }
body[data-skin-family="paper"] .nav-item[data-nav="script"] .nav-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-script.svg?v=1"); }
body[data-skin-family="paper"] .nav-item[data-nav="schedule"] .nav-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-schedule.svg?v=1"); }
body[data-skin-family="paper"] .nav-item[data-nav="crew"] .nav-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-crew.svg?v=1"); }
body[data-skin-family="paper"] .nav-item[data-nav="media"] .nav-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-media.svg?v=1"); }
body[data-skin-family="paper"] .nav-item[data-nav="generate"] .nav-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-generate.svg?v=1"); }
body[data-skin-family="paper"] .nav-item[data-nav="agent"] .nav-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-agent.svg?v=1"); }
body[data-skin-family="paper"] .nav-item[data-nav="canvas"] .nav-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-canvas.svg?v=1"); }
body[data-skin-family="paper"] .nav-item[data-nav="review"] .nav-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-review.svg?v=1"); }
body[data-skin-family="paper"] .nav-item[data-nav="editplan"] .nav-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-editplan.svg?v=1"); }
body[data-skin-family="paper"] .nav-item[data-nav="updates"] .nav-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-updates.svg?v=1"); }
body[data-skin-family="paper"] .nav-item[data-nav="documents"] .nav-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-documents.svg?v=1"); }
body[data-skin-family="paper"] .nav-item[data-nav="reports"] .nav-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-reports.svg?v=1"); }
body[data-skin-family="paper"] .nav-item[data-nav="pricing"] .nav-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-pricing.svg?v=1"); }
body[data-skin-family="paper"] .nav-item[data-nav="presentations"] .nav-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-presentations.svg?v=1"); }
body[data-skin-family="paper"] .nav-item[data-nav="todo"] .nav-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-todo.svg?v=1"); }
body[data-skin-family="paper"] .nav-item[data-nav="notes"] .nav-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-notes.svg?v=1"); }
body[data-skin-family="paper"] .nav-item[data-nav="censored"] .nav-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-censored.svg?v=1"); }
body[data-skin-family="paper"] .nav-item[data-nav="help"] .nav-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-help.svg?v=1"); }
body[data-skin-family="paper"] .nav-item[data-nav="admin"] .nav-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-admin.svg?v=1"); }
body[data-skin-family="paper"] .nav-item[data-nav="settings"] .nav-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-settings.svg?v=1"); }
body[data-skin-family="paper"] .ph-search-iconbtn svg,
body[data-skin-family="paper"] .shots-search svg,
body[data-skin-family="paper"] .shots-search-ico { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-search.svg?v=1"); }
body[data-skin-family="paper"] [aria-label="Refresh now"] svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-refresh.svg?v=1"); }
body[data-skin-family="paper"] [aria-label="Style"] svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-style.svg?v=1"); }
body[data-skin-family="paper"] [aria-label="Notifications"] svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-notifications.svg?v=1"); }
body[data-skin-family="paper"] .sqa-up svg,
body[data-skin-family="paper"] .dz-icon svg,
body[data-skin-family="paper"] .dz-icon svg,
body[data-skin-family="paper"] .dz-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-upload.svg?v=1"); }
body[data-skin-family="paper"] .shots-dl-all svg,
body[data-skin-family="paper"] .shots-dl-all svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-download.svg?v=1"); }
body[data-skin-family="paper"] [aria-label="Link shot"] svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-link.svg?v=1"); }
body[data-skin-family="paper"] [aria-label="Edit shot"] svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-edit.svg?v=1"); }
body[data-skin-family="paper"] [aria-label="Copy video folder path"] svg,
body[data-skin-family="paper"] [aria-label="Duplicate shot"] svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-documents.svg?v=1"); }
body[data-skin-family="paper"] [aria-label="Delete shot"] svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-delete.svg?v=1"); }
body[data-skin-family="paper"] [aria-label="Flag for review"] svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-review.svg?v=1"); }
body[data-skin-family="paper"] .sqa-fp svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-shots.svg?v=1"); }
body[data-skin-family="paper"] .sqa-cw svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-canvas.svg?v=1"); }
body[data-skin-family="paper"] .sqa-ca svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-characters.svg?v=1"); }
body[data-skin-family="paper"] .sqa-rd svg,
body[data-skin-family="paper"] .sqa-va svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-media.svg?v=1"); }
body[data-skin-family="paper"] .npb-bubble svg,
body[data-skin-family="paper"] .npb-bubble svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-notes.svg?v=1"); }
body[data-skin-family="paper"] .tdb-bubble svg,
body[data-skin-family="paper"] .tdb-bubble svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-todo.svg?v=1"); }
body[data-skin-family="paper"] .aichat-bubble svg,
body[data-skin-family="paper"] .aichat-bubble svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-agent.svg?v=1"); }
}
/* Keep SVG boxes and accessible labels intact; each named control keeps a
distinct motif and navigation never depends on its reorderable position. */
@container style(--sk-maya-slab: on) {
body[data-skin-family="paper"] .nav-icon svg,
body[data-skin-family="paper"] .ph-search-iconbtn svg,
body[data-skin-family="paper"] .shots-search svg,
body[data-skin-family="paper"] .shots-search-ico,
body[data-skin-family="paper"] [aria-label="Refresh now"] svg,
body[data-skin-family="paper"] [aria-label="Style"] svg,
body[data-skin-family="paper"] [aria-label="Notifications"] svg,
body[data-skin-family="paper"] .sqa-up svg,
body[data-skin-family="paper"] .dz-icon svg,
body[data-skin-family="paper"] .dz-icon svg,
body[data-skin-family="paper"] .dz-icon svg,
body[data-skin-family="paper"] .shots-dl-all svg,
body[data-skin-family="paper"] .shots-dl-all svg,
body[data-skin-family="paper"] [aria-label="Link shot"] svg,
body[data-skin-family="paper"] [aria-label="Edit shot"] svg,
body[data-skin-family="paper"] [aria-label="Copy video folder path"] svg,
body[data-skin-family="paper"] [aria-label="Duplicate shot"] svg,
body[data-skin-family="paper"] [aria-label="Delete shot"] svg,
body[data-skin-family="paper"] [aria-label="Flag for review"] svg,
body[data-skin-family="paper"] .sqa-fp svg,
body[data-skin-family="paper"] .sqa-cw svg,
body[data-skin-family="paper"] .sqa-ca svg,
body[data-skin-family="paper"] .sqa-rd svg,
body[data-skin-family="paper"] .sqa-va svg,
body[data-skin-family="paper"] .npb-bubble svg,
body[data-skin-family="paper"] .npb-bubble svg,
body[data-skin-family="paper"] .tdb-bubble svg,
body[data-skin-family="paper"] .tdb-bubble svg,
body[data-skin-family="paper"] .aichat-bubble svg,
body[data-skin-family="paper"] .aichat-bubble svg {
background-color: currentColor;
-webkit-mask-image: var(--sk-maya-icon-image);
mask-image: var(--sk-maya-icon-image);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--sk-light) 42%, transparent));
}
body[data-skin-family="paper"] .nav-icon svg > *,
body[data-skin-family="paper"] .ph-search-iconbtn svg > *,
body[data-skin-family="paper"] .shots-search-ico > *,
body[data-skin-family="paper"] [aria-label="Refresh now"] svg > *,
body[data-skin-family="paper"] [aria-label="Style"] svg > *,
body[data-skin-family="paper"] [aria-label="Notifications"] svg > *,
body[data-skin-family="paper"] .sqa-up svg > *,
body[data-skin-family="paper"] .dz-icon svg > *,
body[data-skin-family="paper"] .dz-icon svg > *,
body[data-skin-family="paper"] .dz-icon svg > *,
body[data-skin-family="paper"] .shots-dl-all svg > *,
body[data-skin-family="paper"] .shots-dl-all svg > *,
body[data-skin-family="paper"] [aria-label="Link shot"] svg > *,
body[data-skin-family="paper"] [aria-label="Edit shot"] svg > *,
body[data-skin-family="paper"] [aria-label="Copy video folder path"] svg > *,
body[data-skin-family="paper"] [aria-label="Duplicate shot"] svg > *,
body[data-skin-family="paper"] [aria-label="Delete shot"] svg > *,
body[data-skin-family="paper"] [aria-label="Flag for review"] svg > *,
body[data-skin-family="paper"] .sqa-fp svg > *,
body[data-skin-family="paper"] .sqa-cw svg > *,
body[data-skin-family="paper"] .sqa-ca svg > *,
body[data-skin-family="paper"] .sqa-rd svg > *,
body[data-skin-family="paper"] .sqa-va svg > *,
body[data-skin-family="paper"] .npb-bubble svg > *,
body[data-skin-family="paper"] .npb-bubble svg > *,
body[data-skin-family="paper"] .tdb-bubble svg > *,
body[data-skin-family="paper"] .tdb-bubble svg > *,
body[data-skin-family="paper"] .aichat-bubble svg > *,
body[data-skin-family="paper"] .aichat-bubble svg > * { visibility: hidden; }
}
@container style(--sk-maya-slab: on) {
body[data-skin-family="paper"] .pill-row .shots-search + .sf-anchor > button > svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-sort.svg?v=1"); }
body[data-skin-family="paper"] .pill-row .shots-search + .sf-anchor + .sf-anchor > button > svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-filter.svg?v=1"); }
body[data-skin-family="paper"] [title^="Select multiple shots"] svg,
body[data-skin-family="paper"] [title="Exit multi-select"] svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-todo.svg?v=1"); }
body[data-skin-family="paper"] .pill-button--add svg,
body[data-skin-family="paper"] .notes-add-btn svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-plus.svg?v=1"); }
body[data-skin-family="paper"] .activity-icon svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-script.svg?v=1"); }
body[data-skin-family="paper"] .shot-loc svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-location.svg?v=1"); }
body[data-skin-family="paper"] .shot-reviewed-chip svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-check.svg?v=1"); }
body[data-skin-family="paper"] .shot-notes-badge svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-notes.svg?v=1"); }
body[data-skin-family="paper"] [aria-label="Cut shot from edit"] svg,
body[data-skin-family="paper"] [aria-label="Restore shot"] svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-editplan.svg?v=1"); }
body[data-skin-family="paper"] [aria-label="Previous week"] svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-previous.svg?v=1"); }
body[data-skin-family="paper"] [aria-label="Next week"] svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-next.svg?v=1"); }
body[data-skin-family="paper"] .sb-glyph svg { --sk-maya-icon-image: url("/assets/skins/maya-temple/glyph-agent.svg?v=1"); }
body[data-skin-family="paper"] .pill-row .shots-search + .sf-anchor > button > svg,
body[data-skin-family="paper"] .pill-row .shots-search + .sf-anchor + .sf-anchor > button > svg,
body[data-skin-family="paper"] [title^="Select multiple shots"] svg,
body[data-skin-family="paper"] [title="Exit multi-select"] svg,
body[data-skin-family="paper"] .pill-button--add svg,
body[data-skin-family="paper"] .notes-add-btn svg,
body[data-skin-family="paper"] .activity-icon svg,
body[data-skin-family="paper"] .shot-loc svg,
body[data-skin-family="paper"] .shot-reviewed-chip svg,
body[data-skin-family="paper"] .shot-notes-badge svg,
body[data-skin-family="paper"] [aria-label="Cut shot from edit"] svg,
body[data-skin-family="paper"] [aria-label="Restore shot"] svg,
body[data-skin-family="paper"] [aria-label="Previous week"] svg,
body[data-skin-family="paper"] [aria-label="Next week"] svg,
body[data-skin-family="paper"] .sb-glyph svg {
background-color: currentColor;
mask-image: var(--sk-maya-icon-image);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--sk-light) 42%, transparent));
}
body[data-skin-family="paper"] .pill-row .shots-search + .sf-anchor > button > svg > *,
body[data-skin-family="paper"] .pill-row .shots-search + .sf-anchor + .sf-anchor > button > svg > *,
body[data-skin-family="paper"] [title^="Select multiple shots"] svg > *,
body[data-skin-family="paper"] [title="Exit multi-select"] svg > *,
body[data-skin-family="paper"] .pill-button--add svg > *,
body[data-skin-family="paper"] .notes-add-btn svg > *,
body[data-skin-family="paper"] .activity-icon svg > *,
body[data-skin-family="paper"] .shot-loc svg > *,
body[data-skin-family="paper"] .shot-reviewed-chip svg > *,
body[data-skin-family="paper"] .shot-notes-badge svg > *,
body[data-skin-family="paper"] [aria-label="Cut shot from edit"] svg > *,
body[data-skin-family="paper"] [aria-label="Restore shot"] svg > *,
body[data-skin-family="paper"] [aria-label="Previous week"] svg > *,
body[data-skin-family="paper"] [aria-label="Next week"] svg > *,
body[data-skin-family="paper"] .sb-glyph svg > * { visibility: hidden; }
}