@import url('./marketing.css');
/* =====================================================================
 * Design — SSHOW's design guidelines, as a live spec sheet
 *
 * A long page on the shared marketing stage (marketing.css: tokens, blank
 * page, type, bezel, scene cut, selection box, night stage, reduced
 * motion). It opens on the design elements at a glance — a bento of six
 * live tiles — then documents each topic the same way: a chapter head on
 * the 12-column grid (the topic on a hairline, an oversized numeral, the
 * statement), a live example on a raised paper stage with a dotted
 * canvas and a floating toolbar, best practices on hairlines, and the
 * specifications as a stat strip. Annotations speak the editor's
 * selection blue. "디자인 값 보기" (inspect mode) shows the page's own
 * values on its type, surfaces, buttons and sections.
 *
 * Calm and monochrome: the brand's four colors appear always together
 * and in their order, only as soft light (behind the key visual, one lit
 * stage per chapter, the close's footlights, principle 02's light) and
 * as the flat samples of the color examples and the color tile; the
 * page's own words never take them. The mark never moves. Every hidden start state is a keyframe
 * `from` or armed by design.js, so without JS the page simply shows;
 * only the controls that need the script wait for it (is-ds-ready).
 * Shared pieces first, then the sections in page order, the islands that
 * keep their own light, then the pointer, touch, responsive, dark,
 * reduced-motion and forced-colors blocks.
 * ===================================================================== */

#mt-page.ds-page {
    /* The DI buttons and switches read these; no shared sheet defines them. */
    --di-ease: var(--mt-ease);
    --di-ease-spring: var(--mt-ease-spring);
    /* A big move of what is already on screen (the morph, the frames)
       rides the editor's own tween curve: it starts from rest, where
       Emphasized, made for arrivals, would leap off (DESIGN.md §5.1). */
    --ds-ease-move: cubic-bezier(0.25, 0, 0.05, 1);

    /* Meta labels and values: the site's own face with tabular figures —
       the stage pages set no monospace anywhere. */
    --ds-mono: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;

    /* The grid: 12 columns inside .mt-wrap. */
    --ds-gutter: clamp(16px, 2vw, 28px);

    /* Three heading steps between body and headline: a block's title, a
       card's title, and a tile's name (18px, set where it is used). */
    --ds-title: clamp(22px, 2.4vw, 32px);
    --ds-card-title: clamp(18px, 1.8vw, 22px);

    /* The editor's canvas: a dot every 22px, in the stage's own ink. */
    --ds-dot-a: 0.07;
    /* The selection blue as channels, for tints of it. */
    --ds-sel-rgb: 24, 92, 194;
    /* A selection tag's fill: the deeper blue in both themes, so its
       white type keeps 6.3 : 1 (outlines and handles keep --mt-sel). */
    --ds-tag: #185CC2;
    /* An off switch's track, in ink: 3 : 1 against the paper it sits on
       and against its knob (the night needs less, see the dark block). */
    --ds-off-a: 0.55;
    /* A touch target's least size, whatever the control looks like. */
    --ds-target: 44px;
    /* Elevation, given on hover only; the floating toolbar's shadow and surface. */
    --ds-lift: 0 24px 48px -32px rgba(22, 26, 44, 0.35);
    --ds-float: 0 10px 30px -18px rgba(22, 26, 44, 0.35);
    --ds-bar: var(--mt-bg);

    /* The night stage and the lit one, for islands that keep their own
       light whatever the page's theme (the type panel, Present, the
       light/dark examples). */
    --ds-night: #121318;
    --ds-night-raise: #1B1C22;
    --ds-night-bezel: #17181E;
    --ds-night-bar: #22232A;
    --ds-night-ink: #EDEFF5;
    --ds-night-ink-rgb: 237, 239, 245;
    --ds-night-ink-2: #A7AEC0;
    --ds-night-ink-3: #767E93;
    --ds-lit: #FFFFFF;
    --ds-lit-raise: #F5F3F0;
    --ds-lit-bezel: #F1EFEC;
    --ds-lit-ink: #2B2B2B;
    --ds-lit-ink-rgb: 43, 43, 43;
    --ds-lit-ink-2: #565C66;
    --ds-lit-ink-3: #6B7280;

    /* The base colors as swatches (fixed values, both themes). */
    --ds-c-ink: #2B2B2B;
    --ds-c-paper: #FFFFFF;
    --ds-c-night: #121318;

    /* The scene every example shares (canvas-art): its own orange, top to
       bottom as the photo's edges run, and its own ink. Artwork values. */
    --ds-scene: #FA761D;
    --ds-scene-top: #FB751C;
    --ds-scene-bottom: #E9741D;
    --ds-scene-ink: #1B1B1F;

    /* White, for type on the night and on color; and the selection blue
       as it reads on a dark surface inside a light page. */
    --ds-white: #FFFFFF;
    --ds-sel-on-dark: #5B95EE;

    /* The app icon's graphite tile. */
    --ds-graphite-1: #2E3039;
    --ds-graphite-2: #121318;

    /* A busy interface: generic UI colors, never the brand's four. */
    --ds-loud-lime: #B6F23A;
    --ds-loud-cyan: #19D3F7;
    --ds-loud-red: #FF3B30;
    --ds-loud-violet: #7C4DFF;
    --ds-loud-yellow: #FFD60A;
    --ds-loud-green: #00C46A;
    --ds-loud-ink: #101114;
}

/* The fixed header never covers what the page scrolls to: anchored
   chapters and focused controls (Shift+Tab included) land below it. The
   scroller keeps the header's room; an announcement's height is known
   only inside <body>, so the targets add it, and a little air. */
html:has(#mt-page.ds-page) { scroll-padding-top: calc(var(--header-height) + 96px); }
#mt-page.ds-page > section,
#mt-page.ds-page :is(a[href], button, input, [tabindex], [contenteditable]) { scroll-margin-top: calc(var(--announcement-h, 0px) + 8px); }

/* Controls that need design.js wait for it: the script marks the page
   ready (is-ds-ready). Content never waits; without the script it reads.
   The design-specs toggles, the Present buttons, the copy hint and the
   live contrast read-out stay away (the toolbars, panels and Play
   buttons are hidden in the markup); the swatches and the beats stay as
   plain labels, disabled and out of the pointer's way. */
#mt-page.ds-page:not(.is-ds-ready) :is([data-ds-needs-js], [data-ds-inspect], [data-ds-present-open]) { display: none; }
#mt-page.ds-page:not(.is-ds-ready) :is([data-ds-copy], [data-ds-beat]) { pointer-events: none; }

/* The page draws with <i> and <b> as plain boxes and labels. */
#mt-page.ds-page i { font-style: normal; }

/* The typeface's name never breaks. */
.ds-nb { white-space: nowrap; }

/* Specimens of SSHOW SEO Sans: lockups, manifesto lines, proofs, the
   tester. Its tracking is built in (−40/1000 em), so no size takes any. */
.ds-spec {
    font-family: var(--global-font-title);
    font-synthesis: none;
    font-kerning: normal;
    letter-spacing: 0;
}


/* =====================================================================
 * Shared pieces — the grid, labels, the stage, the floating toolbar,
 * notes, sliders, toggles, the switch
 * ===================================================================== */
.ds-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--ds-gutter);
}

/* The system's voice: labels speak as the stage's eyebrow does (13px,
   wide capitals, the same track in both languages); data rows in small
   tabular figures. */
.ds-label,
.ds-mono {
    font-family: var(--ds-mono); font-variant-numeric: tabular-nums;
    font-weight: 500;
    line-height: 1.35;
    color: var(--mt-ink-3);
}
.ds-label { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; }
.ds-mono { font-size: 12px; letter-spacing: 0.02em; }

/* Selection tags, the editor's labels on the page's pictures and the
   design specs' own: white on the deeper blue in either theme. Each
   picture sizes its tags, never under 11px. */
#mt-page.ds-page .mt-select-tag,
#mt-page.ds-page.is-inspect [data-ds-spec]::after { background-color: var(--ds-tag); }

/* A block's own heading and words (the morph example). */
.ds-block-title { font-family: var(--global-font-title); font-size: var(--ds-title); font-weight: 700; line-height: 1.25; letter-spacing: 0; text-wrap: balance; }
.ds-block-body { margin-top: 14px; max-width: 26em; color: var(--mt-ink-2); text-wrap: pretty; }
.ds-block-label { margin-bottom: 20px; }

/* The stage: raised paper with the editor's dotted canvas and a hairline.
   It never clips (its floating toolbar overlaps its lower edge, and the
   design specs label it above); parts that need clipping sit in an inner
   view. The canvas is a touch lighter than its token: 0.05 on paper and
   0.045 on the night, where --ds-dot-a reads 0.07 and 0.06 (the islands
   included). Its edge and its raise are two values (--ds-edge,
   --ds-raise), so a stage that answers the visitor can lift into the
   work shadow and keep the edge its light gives it. */
.ds-stage {
    position: relative;
    /* An aspect ratio must not lend the stage its content's width. */
    min-width: 0;
    border-radius: 28px;
    background-color: var(--mt-bg-raise);
    background-image: radial-gradient(rgba(var(--mt-ink-rgb), calc(var(--ds-dot-a) * 0.5 + 0.015)) 1px, transparent 1.4px);
    background-size: 22px 22px;
    background-position: center;
    box-shadow: inset 0 0 0 1px var(--ds-edge, var(--mt-hair)), var(--ds-raise, 0 0 #0000);
    transition: box-shadow 0.3s var(--mt-ease);
}
/* The lift is the page's work shadow, read here, outside any island: a
   stage that keeps its own light re-declares the shadow for what stands
   on it, but its own shadow falls on the page (the hover block). */
#mt-page.ds-page { --ds-stage-lift: var(--mt-work-shadow); }

/* An example: the stage, its toolbar, its note. */
.ds-demo { display: grid; justify-items: stretch; min-width: 0; }

/* One soft lit zone per chapter, as the stage pages light their
   pictures: the four brand lights in their order (/about's recipe),
   still, behind the chapter's key demo only. It spills past the demo's
   top edge, or pools under its lower edge (is-floor) where words stand
   right above it. It hangs on a transparent wrapper, never on a surface
   of its own, and paints under everything in its stacking context: a
   stage's paper never takes it, and words always stand on the page's own
   ground. The wrapper stands outside the scroll's scene cut, as the
   stage pages keep their floor light still (the mark's demo, the night
   panel's frame, the layout demo, the wrap around the sheet, the curves'
   block); a principle's row is one scene, words and stage together, so
   its light rides with its stage. Never two on a screen, never behind
   text, never moving on its own (reduced motion changes nothing). The
   night's light is stronger, so it takes a smaller share there (the dark
   block); a chapter may lower the top edge where its head stands close
   (--ds-lit-top) or soften it (--ds-lit-share). */
.ds-lit { --ds-lit-k: 0.8; position: relative; }
.ds-lit::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 8%;
    right: 8%;
    top: var(--ds-lit-top, -84px);
    height: 200px;
    background:
        radial-gradient(40% 60% at 25% 60%, rgba(var(--brand-mulberry-rgb), 0.9), transparent 70%),
        radial-gradient(40% 60% at 48% 50%, rgba(var(--brand-brass-rgb), 0.7), transparent 70%),
        radial-gradient(40% 60% at 70% 60%, rgba(var(--brand-iris-rgb), 0.8), transparent 70%),
        radial-gradient(40% 60% at 88% 50%, rgba(var(--brand-lichen-rgb), 0.7), transparent 70%);
    filter: blur(56px);
    opacity: calc(var(--mt-glow-opacity) * var(--ds-lit-k) * var(--ds-lit-share, 1));
    pointer-events: none;
}
/* Pooled under a demo, the light keeps within the room the next block
   leaves (a document's or a block's top margin, 72–128px): its depth,
   size and softness follow that room, so it fades out about two thirds
   of the way down, clear of the next words. A pool shows the light's
   heart, which a top edge keeps behind its stage, so it takes three
   quarters of the light: as soft as /downloads' floor. */
.ds-lit.is-floor::before {
    --ds-lit-room: clamp(72px, 9vw, 128px);
    top: auto;
    bottom: calc(var(--ds-lit-room) * -0.45);
    height: calc(var(--ds-lit-room) * 1.5);
    filter: blur(calc(var(--ds-lit-room) * 0.38));
    opacity: calc(var(--mt-glow-opacity) * var(--ds-lit-k) * var(--ds-lit-share, 1) * 0.75);
}

/* The floating toolbar: a pill on the stage's lower edge, overlapping it
   by half its height, like the editor's own floating bars. It holds the
   site's own controls exactly as they are everywhere (the segmented
   control at 40px, the small button at 32px), and it flows in the
   layout, so a long one wraps instead of leaving the screen. Its 25px
   corners are the segmented track's 20 plus its 5px padding, so the
   two stay concentric, in one row or several. */
.ds-toolbar {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    justify-self: center;
    max-width: calc(100% - 24px);
    min-height: 50px;
    margin-top: -25px;
    padding: 5px;
    border-radius: 25px;
    background: var(--ds-bar);
    box-shadow: 0 0 0 1px var(--mt-hair-2), var(--ds-float);
}
.ds-toolbar[hidden] { display: none; }
.ds-toolbar-sep { flex: none; width: 1px; height: 20px; margin: 0 4px; background: var(--mt-hair-2); }
/* The note under an example, in the second ink: it stands in the
   toolbar's shadow, and in the work shadow while its stage is lifted,
   where the third ink would fall under 4.5 : 1. */
.ds-note {
    min-height: 1.5em;
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    color: var(--mt-ink-2);
    text-wrap: balance;
}

/* A floating panel inside a stage (the logo's size). */
.ds-panel {
    position: absolute;
    left: 16px;
    top: 16px;
    z-index: 2;
    padding: 4px 14px;
    border-radius: 16px;
    background: var(--ds-bar);
    box-shadow: 0 0 0 1px var(--mt-hair-2), var(--ds-float);
}
.ds-panel[hidden] { display: none; }

/* A slider with its label and value: a hairline track filled in ink up
   to the thumb (--fill, from design.js), a paper thumb ringed in ink. */
.ds-range { display: grid; grid-template-columns: auto minmax(96px, 1fr) auto; align-items: center; gap: 12px; min-width: min(100%, 260px); }
.ds-range-label { font-size: 13px; font-weight: 600; color: var(--mt-ink-2); white-space: nowrap; }
.ds-range-value { min-width: 3.6em; font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500; text-align: right; color: var(--mt-ink); white-space: nowrap; }
.ds-range-value.is-wide { min-width: 8.6em; }
.ds-range-input {
    --fill: 50%;
    width: 100%;
    height: 32px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.ds-range-input::-webkit-slider-runnable-track {
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(var(--mt-ink), var(--mt-ink)) 0 0 / var(--fill) 100% no-repeat, var(--mt-hair-2);
}
.ds-range-input::-moz-range-track { height: 2px; border-radius: 1px; background: var(--mt-hair-2); }
.ds-range-input::-moz-range-progress { height: 2px; border-radius: 1px; background: var(--mt-ink); }
.ds-range-input::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--mt-bg);
    box-shadow: 0 0 0 1.5px var(--mt-ink), 0 2px 6px rgba(22, 26, 44, 0.18);
    -webkit-appearance: none;
    appearance: none;
    transition: transform 0.18s var(--mt-ease);
}
.ds-range-input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: var(--mt-bg);
    box-shadow: 0 0 0 1.5px var(--mt-ink), 0 2px 6px rgba(22, 26, 44, 0.18);
}
.ds-range-input:active::-webkit-slider-thumb { transform: scale(1.12); }
.ds-range-input:focus-visible { outline-offset: 4px; }

/* A toggle that says what it shows: a pill with a small box that fills
   with ink when on. */
.ds-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 34px;
    padding: 0 14px 0 11px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--mt-ink-2);
    transition: background-color 0.18s var(--mt-ease), color 0.18s var(--mt-ease);
}
.ds-toggle > i {
    position: relative;
    flex: none;
    width: 13px;
    height: 13px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1.5px currentColor;
    transition: background-color 0.18s var(--mt-ease), box-shadow 0.18s var(--mt-ease);
}
.ds-toggle > i::after {
    content: '';
    position: absolute;
    left: 4.5px;
    top: 2px;
    width: 3px;
    height: 6px;
    border: solid var(--mt-bg);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    opacity: 0;
}
.ds-toggle[aria-pressed="true"] { background: var(--state-selected-bg); color: var(--mt-ink); }
.ds-toggle[aria-pressed="true"] > i { background: var(--mt-ink); box-shadow: none; }
.ds-toggle[aria-pressed="true"] > i::after { opacity: 1; }
.ds-toggle:focus-visible { border-radius: 999px; }

/* A switch, for an on/off that previews a setting. Off, the track is ink
   at --ds-off-a: 3 : 1 against its surface, and its paper knob against
   it. */
.ds-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px 0 6px; font-size: 13px; font-weight: 600; color: var(--mt-ink-2); cursor: pointer; }
.ds-switch-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ds-switch-track {
    position: relative;
    flex: none;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: rgba(var(--mt-ink-rgb), var(--ds-off-a));
    transition: background-color 0.18s var(--mt-ease);
}
.ds-switch-track > i {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--mt-bg);
    box-shadow: 0 1px 3px rgba(18, 19, 24, 0.25);
    transition: transform 0.3s var(--mt-ease-spring);
}
.ds-switch-input:checked + .ds-switch-track { background: var(--mt-ink); }
.ds-switch-input:checked + .ds-switch-track > i { transform: translateX(14px); }
.ds-switch-input:focus-visible + .ds-switch-track { outline: 2px solid var(--focus-outline-color); outline-offset: 3px; }
/* A locked switch (disabled) dims only its track; its words keep their
   full contrast, since they still say what it shows. */
.ds-switch-input:disabled,
.ds-switch-input:disabled ~ * { cursor: default; }
.ds-switch-input:disabled + .ds-switch-track { opacity: 0.72; }

/* The play glyph inside buttons. */
.ds-play svg,
.ds-invite-present svg { width: 12px; height: 12px; fill: currentColor; }

/* SSHOW's timeline keyframe: a ◇, outlined; filled when it is the one. */
.ds-key {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    background: var(--mt-bg-raise);
    box-shadow: inset 0 0 0 1.5px var(--mt-ink-3);
    transform: rotate(45deg);
}
.ds-key.is-end { left: calc(100% - 12px); }

/* One status line for copies: a small ink pill near the foot of the screen. */
.ds-toast {
    position: fixed;
    left: 50%;
    bottom: calc(28px + env(safe-area-inset-bottom));
    z-index: 70;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--mt-ink);
    color: var(--mt-bg);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 8px);
    pointer-events: none;
    transition: opacity 0.25s var(--mt-ease), transform 0.35s var(--mt-ease-spring);
}
.ds-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* The selection-box glyph of the design-specs toggle: a box and its four
   handles, the handles in the editor's blue. */
.ds-icon-box { fill: none; stroke: currentColor; stroke-width: 1.5; }
.ds-icon-handle { fill: var(--mt-bg); stroke: var(--mt-sel); stroke-width: 1.5; }
.ds-icon-fill { fill: currentColor; }


/* =====================================================================
 * Chapter heads, best practices, specifications
 *
 * Every chapter opens like a printed spec sheet: a hairline across the
 * grid with the topic under it as the eyebrow, the numeral in columns
 * 1–4 (heavy and faint, as the stage pages set large figures), the
 * statement in 5–12. The documents that follow use the same columns:
 * their label where the numeral stands, their rows where the words do.
 * ===================================================================== */
/* The shared head (.mt-section-head, its own spacing), on the page's 12
   columns. */
.ds-head.mt-section-head { max-width: none; align-items: start; }
.ds-meta {
    grid-column: 1 / -1;
    margin-bottom: clamp(32px, 4vw, 56px);
    padding-top: 14px;
    border-top: 1px solid var(--mt-hair-2);
}
.ds-meta-topic.mt-eyebrow { margin: 0; }
.ds-numeral {
    grid-column: 1 / span 4;
    margin: -0.02em 0 0 -0.04em;
    font-size: clamp(88px, 12vw, 180px);
    font-weight: 800;
    line-height: 0.76;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
    color: rgba(var(--mt-ink-rgb), 0.07);
    user-select: none;
}
.ds-head-words { grid-column: 5 / -1; min-width: 0; }
#mt-page .ds-head-title { width: fit-content; max-width: 100%; font-size: clamp(30px, 5vw, 56px); line-height: 1.2; letter-spacing: 0; }
.ds-head-lede { width: fit-content; max-width: 34em; margin-top: 22px; }
/* The numeral rises once as its chapter comes in (where scroll timelines
   are missing, in the page's 0.9s and 1.3s). */
@supports (animation-timeline: view()) {
    .ds-numeral {
        animation: ds-numeral-in linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 80%;
    }
}
@keyframes ds-numeral-in { from { opacity: 0; transform: translateY(24px); } }
#mt-page.is-numeral-io .ds-numeral { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--mt-ease), transform 1.3s var(--mt-ease-spring); }
#mt-page.is-numeral-io .ds-numeral.is-in { opacity: 1; transform: none; }

/* A document block: best practices or specifications. */
.ds-doc { margin-top: clamp(72px, 9vw, 128px); padding-top: 20px; border-top: 1px solid var(--mt-hair-2); }
.ds-doc + .ds-doc { margin-top: clamp(48px, 6vw, 80px); }
.ds-doc-label { grid-column: 1 / span 4; margin-top: 3px; }
.ds-practices {
    grid-column: 5 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ds-gutter);
}
.ds-practice {
    display: grid;
    grid-template-columns: 2.8em minmax(0, 1fr);
    align-items: baseline;
    padding: 18px 0 22px;
    border-top: 1px solid var(--mt-hair);
}
.ds-practice:nth-child(-n + 2) { padding-top: 0; border-top: 0; }
.ds-practice-num { font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500; color: var(--mt-ink-3); }
.ds-practice p { font-size: clamp(16px, 1.35vw, 18px); line-height: 1.55; letter-spacing: -0.012em; text-wrap: pretty; }

/* Specifications: a stat strip, the value large in tabular figures over
   its label. A value wraps rather than run into its neighbor. */
.ds-stats { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-stat {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
    padding: 0 clamp(12px, 1.6vw, 24px) 4px;
    border-left: 1px solid var(--mt-hair);
}
.ds-stat:first-child { padding-left: 0; border-left: 0; }
.ds-stat dd {
    margin: 0;
    font-family: var(--ds-mono); font-variant-numeric: tabular-nums;
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--mt-ink);
    text-wrap: balance;
}
.ds-stat dt { font-size: 13px; line-height: 1.45; color: var(--mt-ink-3); }


/* =====================================================================
 * Rail — the chapters, as a scene list in miniature
 *
 * A tick per chapter at the right edge, and its two-digit number where
 * the margin is wide (1480px up), quiet in the second ink; the chapter in
 * view takes the full ink and a longer tick. The name slides out on hover
 * and focus (and stays while the pointer is on it), and stays beside the
 * chapter in view where the margin has room (1600px up). At its foot, the
 * design-specs toggle and Present. Over the hero the rail steps back
 * (design.js 2), returning the moment it is focused. It never touches the
 * content: where the margin is too narrow, and on touch screens, it folds
 * away.
 * ===================================================================== */
.ds-rail {
    position: fixed;
    right: 14px;
    top: 50%;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    transform: translateY(-50%);
    transition: opacity 0.3s var(--mt-ease);
}
.ds-rail-list { display: flex; flex-direction: column; align-items: flex-end; }
.ds-rail-link,
.ds-rail-tool {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    height: 26px;
    padding-left: 8px;
    color: var(--mt-ink-2);
    transition: color 0.3s var(--mt-ease);
}
.ds-rail-num { font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 0.02em; }
/* At 70% of the second ink a tick still keeps 3 : 1. */
.ds-rail-tick { width: 10px; height: 1.5px; border-radius: 1px; background: currentColor; opacity: 0.7; transition: width 0.3s var(--mt-ease-spring), opacity 0.3s var(--mt-ease); }
.ds-rail-link[aria-current="true"] { color: var(--mt-ink); }
.ds-rail-link[aria-current="true"] .ds-rail-tick { width: 22px; opacity: 1; }
.ds-rail-link:focus-visible,
.ds-rail-tool:focus-visible { border-radius: 8px; }
.ds-rail-name {
    position: absolute;
    right: calc(100% + 6px);
    top: 50%;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--ds-bar);
    box-shadow: 0 0 0 1px var(--mt-hair-2), var(--ds-float);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--mt-ink);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(6px, -50%);
    transition: opacity 0.3s var(--mt-ease), transform 0.3s var(--mt-ease-spring);
}
/* Shown, a name belongs to its link: the pointer can rest on it, across
   the small gap between them, and it stays. */
.ds-rail-name::after { content: ''; position: absolute; left: 100%; top: 0; bottom: 0; width: 12px; }
.ds-rail-link:focus-visible .ds-rail-name,
.ds-rail-tool:focus-visible .ds-rail-name { opacity: 1; transform: translate(0, -50%); }
/* The tools: small round buttons under the chapters. */
.ds-rail-tools { display: grid; justify-items: end; gap: 8px; padding-top: 10px; border-top: 1px solid var(--mt-hair); }
.ds-rail-tool { width: 30px; height: 30px; justify-content: center; padding: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--mt-hair-2); color: var(--mt-ink-2); transition: color 0.18s var(--mt-ease), background-color 0.18s var(--mt-ease); }
.ds-rail-tool svg { width: 16px; height: 16px; }
.ds-rail-tool .ds-icon-fill { transform: translateX(1px) scale(0.8); transform-origin: 50% 50%; }
.ds-rail-tool .ds-rail-name { right: calc(100% + 10px); }
.ds-rail-tool:focus-visible { border-radius: 50%; }
.ds-rail-tool[aria-pressed="true"] { background: var(--mt-ink); color: var(--mt-bg); box-shadow: none; }
#mt-page.is-at-hero .ds-rail:not(:focus-within) { opacity: 0; pointer-events: none; }


/* =====================================================================
 * Hero — design at a glance
 *
 * Centered, as /about opens: the display line and the sub on one axis,
 * rising in once (1.3s). Under them the key visual at the
 * content's width, with the stage's corners (28, then 24 and 20 as
 * /about's step down), the work shadow and the bezel's fill until it
 * loads; behind its lower edge, /about's glow (the four brand colors,
 * still), light spilling from the picture onto the page. It rises in
 * once, a beat after the words. Then the index: the bento on a 4-column
 * grid, in chapter order: logo 2×2, color 2×1, type and layout 1×1,
 * components and motion 2×1, each column three of the page's twelve.
 * Tiles are raised paper with the editor's dotted canvas; each answers a
 * pointer or focus (transform and opacity only). The tiles come in once,
 * one after another; the logo's only fades (the mark never moves).
 * ===================================================================== */
.ds-hero { padding: calc(var(--header-height) + clamp(56px, 11vh, 120px)) 0 clamp(72px, 10vh, 128px); }
/* Wide enough that the line stands on one line wherever it fits the
   column, as /about's does (the Korean one is 12.4em: 993px at its full
   80px), so the key visual keeps /about's place in the first screen; on
   phones it still wraps, in balance. */
.ds-hero-head.mt-section-head { max-width: 1040px; margin-bottom: 0; }
/* Each line hugs its words, so its spec tag does too. */
#mt-page .ds-hero-title { width: fit-content; max-width: 100%; margin-inline: auto; font-size: clamp(38px, 6.4vw, 80px); line-height: 1.06; letter-spacing: 0; }
/* The sub under the title, as /about's (DESIGN.md §3.3, Hero sub). */
.ds-hero-sub { max-width: 25em; margin: 24px auto 0; font-size: clamp(19px, 2vw, 25px); line-height: 1.5; letter-spacing: -0.02em; color: var(--mt-ink-2); text-wrap: balance; }
/* A sentence keeps together while it fits a line, so a second one starts
   its own; a longer one fills its lines first (pretty, not balance, which
   splits a Korean phrase to even the lines). */
.ds-hero-sentence { display: inline-block; text-wrap: pretty; }
.ds-hero-title,
.ds-hero-sub { animation: ds-rise 1.3s var(--mt-ease-spring) both; }
.ds-hero-sub { animation-delay: 0.12s; }
@keyframes ds-rise { from { opacity: 0; transform: translateY(12px); } }

/* The key visual and its light, one isolated scene: the light lies under
   everything in it, so it shows only around the picture. It sits behind
   the picture's lower half, where the picture's own floor is lit, and
   spills past its lower sides and edge: pink on the left, blue on the
   right, as in the picture. Not lower: under the work shadow it would
   only darken, and its lower edge keeps the blur's own reach (60px)
   above the bento's label, as on a 1440 × 900 screen, so where a shorter
   screen brings the bento closer the spill ends sooner, clear of its
   fine print. The box leans left because the four pools do (25 to 88%
   across), so both sides spill alike. The picture keeps its frame's
   ratio whichever crop loads, and the frame's corners (its spec tag
   reads them). */
.ds-hero { --ds-bento-gap: clamp(64px, 9vh, 104px); }
.ds-hero-scene { position: relative; isolation: isolate; margin-top: clamp(48px, 8vh, 88px); animation: ds-scene-in 1.3s var(--mt-ease-spring) 0.24s both; }
@keyframes ds-scene-in { from { opacity: 0; transform: translateY(24px); } }
.ds-hero-glow {
    position: absolute;
    z-index: -1;
    left: -12%;
    right: -4%;
    top: 46%;
    bottom: max(-4%, 60px - var(--ds-bento-gap));
    background:
        radial-gradient(40% 60% at 25% 60%, rgba(var(--brand-mulberry-rgb), 0.9), transparent 70%),
        radial-gradient(40% 60% at 48% 50%, rgba(var(--brand-brass-rgb), 0.7), transparent 70%),
        radial-gradient(40% 60% at 70% 60%, rgba(var(--brand-iris-rgb), 0.8), transparent 70%),
        radial-gradient(40% 60% at 88% 50%, rgba(var(--brand-lichen-rgb), 0.7), transparent 70%);
    filter: blur(60px);
    opacity: calc(var(--mt-glow-opacity) * 0.9);
    pointer-events: none;
}
.ds-hero-figure {
    --ds-hero-r: 28px;
    position: relative;
    aspect-ratio: 2400 / 1029;
    border-radius: var(--ds-hero-r);
    background: var(--mt-bezel);
    box-shadow: var(--mt-work-shadow);
}
.ds-hero-figure picture { display: contents; }
.ds-hero-img { width: 100%; height: 100%; border-radius: var(--ds-hero-r); object-fit: cover; }

/* Above the bento: its name, and the design-specs switch with what it
   does said beside it, in fine print that stays. */
.ds-bento-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; margin: var(--ds-bento-gap) 0 16px; }
.ds-bento-label { flex: none; margin: 0; }
.ds-inspect-wrap { display: flex; justify-content: flex-end; align-items: center; gap: 16px; min-width: 0; }
.ds-inspect-hint { min-width: 0; max-width: 30em; text-align: right; text-wrap: balance; }
.ds-inspect {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 15px 0 11px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--mt-hair-2);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--mt-ink);
    transition: background-color 0.18s var(--mt-ease), color 0.18s var(--mt-ease), box-shadow 0.18s var(--mt-ease);
}
.ds-inspect svg { flex: none; width: 18px; height: 18px; }
.ds-inspect:focus-visible { border-radius: 999px; }
.ds-inspect[aria-pressed="true"] { background: var(--mt-ink); color: var(--mt-bg); box-shadow: none; }
.ds-inspect[aria-pressed="true"] .ds-icon-handle,
.ds-rail-tool[aria-pressed="true"] .ds-icon-handle { fill: var(--mt-ink); }

/* The bento: the page's gutter between tiles, so each column is three of
   the twelve. Rows keep a square tile's picture room above its two lines
   of words, and grow rather than let the words overflow. The tiles come
   in after the key visual. */
.ds-bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(clamp(188px, 14vw, 208px), auto);
    gap: var(--ds-gutter);
}
.ds-bento-cell { display: flex; min-width: 0; animation: ds-tile-in 0.9s var(--mt-ease-spring) calc(0.36s + var(--i) * 60ms) both; }
.ds-bento-cell.is-logo { grid-column: 1 / span 2; grid-row: 1 / span 2; animation-name: ds-tile-fade; }
.ds-bento-cell.is-color { grid-column: 3 / span 2; grid-row: 1; }
.ds-bento-cell.is-type { grid-column: 3; grid-row: 2; }
.ds-bento-cell.is-layout { grid-column: 4; grid-row: 2; }
.ds-bento-cell.is-components { grid-column: 1 / span 2; grid-row: 3; }
.ds-bento-cell.is-motion { grid-column: 3 / span 2; grid-row: 3; }
@keyframes ds-tile-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes ds-tile-fade { from { opacity: 0; } }

.ds-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    padding: clamp(18px, 1.8vw, 26px);
    border-radius: 24px;
    background-color: var(--mt-bg-raise);
    background-image: radial-gradient(rgba(var(--mt-ink-rgb), var(--ds-dot-a)) 1px, transparent 1.4px);
    background-size: 22px 22px;
    background-position: center;
    box-shadow: inset 0 0 0 1px var(--mt-hair);
    color: var(--mt-ink);
    text-decoration: none;
    transition: box-shadow 0.3s var(--mt-ease), transform 0.3s var(--mt-ease-spring);
}
.ds-tile:focus-visible { outline-offset: 4px; border-radius: 24px; }
/* The top row is the ↓'s, at the corner (no number: those stay with the
   chapter heads and the rail); the picture starts under it. */
.ds-tile-top { display: block; min-height: 16px; }
.ds-tile-arrow {
    position: absolute;
    right: clamp(18px, 1.8vw, 26px);
    top: clamp(18px, 1.8vw, 26px);
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--mt-ink-3);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s var(--mt-ease-spring), stroke 0.18s var(--mt-ease);
}
.ds-tile-art { position: relative; flex: 1 1 0; min-height: 0; margin: 10px 0 12px; container-type: size; }
.ds-tile-words { display: grid; gap: 3px; }
.ds-tile-name { font-family: var(--global-font-title); font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: 0; }
.ds-tile-note { font-size: 13px; line-height: 1.4; color: var(--mt-ink-2); text-wrap: balance; }
/* Wide tiles: words on the left, the picture on the right. */
.ds-tile:is(.is-color, .is-components, .is-motion) {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: clamp(16px, 2vw, 28px);
}
.ds-tile:is(.is-color, .is-components, .is-motion) .ds-tile-top { grid-column: 1; grid-row: 1; }
.ds-tile:is(.is-color, .is-components, .is-motion) .ds-tile-words { grid-column: 1; grid-row: 3; }
.ds-tile:is(.is-color, .is-components, .is-motion) .ds-tile-art { grid-column: 2; grid-row: 1 / -1; margin: 18px 22px 0 0; }

/* The tiles' selection tags: the deeper blue in both themes, never
   smaller than 11px. */
.ds-hero .mt-select-tag { background: var(--ds-tag); }

/* -- Logo: the solid mark, one S that flows without a break, and its
   construction drawn in on hover: the clear space, the box, the two
   bowls, then the one line the S flows along, end to end through its
   four anchors (the ends and the bowls' centres). The line lies on the
   mark, so it takes the blue that reads on the mark's ink (the lighter
   one here, the deeper one on the night's light ink, see the dark
   block), and the anchors are drawn as the editor draws a path's
   points: open, white, ringed in that blue. -- */
/* The strokes are in the mark's own units, so a smaller mark (the small
   phones' one-row tile) scales them back up (--ds-k) to about a pixel. */
.ds-construct { --ds-flow: var(--ds-sel-on-dark); --ds-k: 1; position: absolute; inset: 0; margin: auto; height: 58%; width: auto; aspect-ratio: 603.08 / 958.24; color: var(--mt-ink); }
.ds-construct-mark { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ds-construct-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--mt-sel); stroke-width: calc(5px * var(--ds-k)); pointer-events: none; }
.ds-c-space { stroke-width: calc(4.5px * var(--ds-k)); stroke-dasharray: calc(16px * var(--ds-k)) calc(14px * var(--ds-k)); opacity: 0; transition: opacity 0.3s var(--mt-ease); }
.ds-c-box,
.ds-c-arc,
.ds-c-flow { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s var(--mt-ease-spring); }
.ds-c-flow { stroke: var(--ds-flow); stroke-width: calc(8px * var(--ds-k)); stroke-linecap: round; }
.ds-c-dot { r: calc(15px * var(--ds-k)); fill: var(--ds-white); stroke: var(--ds-flow); stroke-width: calc(6px * var(--ds-k)); opacity: 0; transition: opacity 0.3s var(--mt-ease); }
.ds-c-tag { position: absolute; font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: 11px; padding: 2px 6px; opacity: 0; transition: opacity 0.3s var(--mt-ease); }
.ds-c-tag.is-space { left: 50%; top: -15%; transform: translate(-50%, -50%); }

/* -- Color: the four brand colors as flat squares in their order, evenly
   along the gradient they make, so each stands over its own stop (0, 33,
   67, 100%), as an editor draws a gradient's stops; a pointer or focus
   names them under the line. Below, quieter and smaller, on the line of
   the tile's note, the neutrals the page stands on: ink, paper (its edge
   drawn) and night. Flat, as chapter 03 shows them: no blur, no glow,
   5px corners on the squares (20px, 16px on small phones) and 3px on
   the chips. The stops and their names' room stand centered over the
   neutrals. -- */
.ds-tc { --ds-sq: 20px; position: absolute; inset: 0; display: flex; flex-direction: column; max-width: 300px; }
.ds-tc-brand { display: flex; justify-content: space-between; margin-top: auto; }
.ds-tc-stop { position: relative; width: var(--ds-sq); height: var(--ds-sq); border-radius: 5px; }
.ds-tc-stop.is-pink { background: var(--brand-mulberry); }
.ds-tc-stop.is-orange { background: var(--brand-brass); }
.ds-tc-stop.is-orchid { background: var(--brand-iris); }
.ds-tc-stop.is-blue { background: var(--brand-lichen); }
/* A name stands under its square, past the line; the two at the ends
   keep to the line's ends. */
.ds-tc-name {
    position: absolute;
    top: calc(100% + 26px);
    left: 50%;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--mt-ink-2);
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 0.3s var(--mt-ease);
}
.ds-tc-stop:first-child .ds-tc-name { left: 0; transform: none; }
.ds-tc-stop:last-child .ds-tc-name { left: auto; right: 0; transform: none; }
.ds-tc-line { height: 6px; margin: 10px 0 24px; border-radius: 3px; background: var(--brand-iridescent-gradient); }
.ds-tc-base { display: flex; gap: 6px; margin: auto 0 3px; }
.ds-tc-base i { width: 12px; height: 12px; border-radius: 3px; }
.ds-tc-base .is-ink { background: var(--ds-c-ink); }
.ds-tc-base .is-paper { background: var(--ds-c-paper); box-shadow: inset 0 0 0 1px rgba(var(--mt-ink-rgb), 0.2); }
.ds-tc-base .is-night { background: var(--ds-c-night); }

/* -- Type: the two faces, large, with its spec selected on hover. -- */
.ds-tt { position: absolute; inset: 0; display: grid; place-items: center; }
.ds-tt-glyphs { position: relative; font-family: var(--global-font-title); font-size: min(78cqh, 33cqw); font-weight: 800; line-height: 1; letter-spacing: 0; white-space: nowrap; }
.ds-tt-select { inset: -0.08em -0.12em; opacity: 0; transition: opacity 0.3s var(--mt-ease); }
.ds-tt-select .mt-select-tag { position: absolute; left: -1px; bottom: calc(100% + 6px); font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0; font-weight: 500; }

/* -- Motion: the emphasized curve on a wide grid, and a keyframe track.
   It plays in 0.9s and returns in 0.3s, two of the page's four
   durations. -- */
.ds-tm { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; padding: 6px 8px 2px; }
.ds-tm-plot { position: relative; }
.ds-tm-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.ds-tm-grid { stroke: var(--mt-hair-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.ds-tm-curve { stroke: var(--mt-ink); stroke-width: 1.75px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ds-tm-x,
.ds-tm-y { position: absolute; inset: 0; }
.ds-tm-x { transition: transform 0.3s var(--mt-ease); }
.ds-tm-y { transition: transform 0.3s var(--mt-ease); }
.ds-tm-dot { position: absolute; left: 0; bottom: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--mt-sel); box-shadow: 0 0 0 3px var(--mt-bg-raise); transform: translate(-50%, 50%); }
.ds-tm-track { position: relative; height: 14px; }
.ds-tm-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--mt-hair-2); }
.ds-tm-key { position: absolute; top: 50%; left: 6px; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--mt-bg-raise); box-shadow: inset 0 0 0 1.5px var(--mt-ink-3); transform: rotate(45deg); }
.ds-tm-key.is-end { left: calc(100% - 6px); }
.ds-tm-chip { position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 3px; background: var(--mt-ink); transition: transform 0.3s var(--mt-ease); }

/* -- Components: replicas of the primitives. -- */
.ds-tk { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; }
.ds-tk-row { display: flex; align-items: center; gap: 10px; }
.ds-tk-btn { display: inline-flex; align-items: center; height: 34px; padding: 0 17px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; }
.ds-tk-btn.is-primary { background: var(--global-button-background-color); color: var(--global-button-text-color); }
.ds-tk-btn.is-secondary { box-shadow: inset 0 0 0 1px rgba(var(--mt-ink-rgb), 0.16); }
.ds-tk-switch { position: relative; width: 34px; height: 20px; border-radius: 999px; background: rgba(var(--mt-ink-rgb), 0.45); transition: background-color 0.3s var(--mt-ease); }
.ds-tk-switch > i { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--mt-bg); box-shadow: 0 1px 3px rgba(18, 19, 24, 0.25); transition: transform 0.3s var(--mt-ease-spring); }
.ds-tk-seg { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: rgba(var(--mt-ink-rgb), 0.04); box-shadow: inset 0 0 0 1px rgba(var(--mt-ink-rgb), 0.08); }
.ds-tk-seg i { display: grid; place-items: center; width: 40px; height: 26px; border-radius: 6px; }
.ds-tk-seg i::before { content: ''; width: 16px; height: 3px; border-radius: 2px; background: rgba(var(--mt-ink-rgb), 0.28); }
.ds-tk-seg i.is-on { background: var(--mt-bg); box-shadow: 0 1px 2px rgba(18, 19, 24, 0.08), 0 0 0 1px rgba(var(--mt-ink-rgb), 0.06); }
.ds-tk-seg i.is-on::before { background: var(--mt-ink); }
@container (max-width: 230px) {
    .ds-tk-btn { height: 30px; padding: 0 13px; font-size: 12px; }
    .ds-tk-row { gap: 8px; }
    .ds-tk-seg i { width: 28px; height: 22px; }
}
/* The replicas keep their size, so they thin out rather than overflow:
   narrow, the secondary button steps out; short, one row is left, the
   primary button and the switch (the two that answer a pointer). */
@container (max-width: 172px) {
    .ds-tk-btn.is-secondary { display: none; }
}
@container (max-height: 84px) {
    .ds-tk { flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; }
    .ds-tk-row { display: contents; }
    .ds-tk-btn.is-secondary,
    .ds-tk-seg { display: none; }
}

/* -- Layout: a page in wireframe that measures itself on hover. A square
   tile has little height for it, so the page rises into the tile's top
   row, clear of the arrow (the same margin on both sides keeps it
   centered), and keeps a page's 3 : 2 at any size; the measures' tags
   may stand outside it, on the canvas. -- */
.ds-tile.is-layout .ds-tile-art { margin: -16px 26px 12px; }
.ds-tl {
    position: absolute;
    inset: 0;
    width: min(100cqw, 150cqh);
    height: min(100cqh, 66.667cqw);
    margin: auto;
    border-radius: 8px;
    background: var(--mt-bg);
    box-shadow: 0 0 0 1px var(--mt-hair), 0 10px 24px -18px rgba(22, 26, 44, 0.3);
}
.ds-tl > i,
.ds-tl-words i { position: absolute; display: block; border-radius: 2px; }
.ds-tl-nav { left: 0; right: 0; top: 0; height: 13%; border-bottom: 1px solid var(--mt-hair); border-radius: 0; }
.ds-tl-nav::before { content: ''; position: absolute; left: 12%; top: 50%; width: 9%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: rgba(var(--mt-ink-rgb), 0.55); }
.ds-tl-nav::after { content: ''; position: absolute; right: 12%; top: 50%; width: 22%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(var(--mt-ink-rgb), 0.22) 0 18%, transparent 18% 26%); }
.ds-tl-words { position: absolute; left: 12%; top: 32%; width: 40%; bottom: 10%; }
.ds-tl-eyebrow { left: 0; top: 0; width: 30%; height: 3px; background: rgba(var(--mt-ink-rgb), 0.3); }
.ds-tl-title { left: 0; top: 13%; width: 100%; height: 11%; background: rgba(var(--mt-ink-rgb), 0.82); }
.ds-tl-title.is-short { top: 28%; width: 62%; }
.ds-tl-text { left: 0; top: 52%; width: 92%; height: 4px; background: rgba(var(--mt-ink-rgb), 0.18); }
.ds-tl-text + .ds-tl-text { top: 62%; }
.ds-tl-text.is-short { top: 72%; width: 58%; }
.ds-tl-img { left: 58%; right: 12%; top: 30%; bottom: 14%; border-radius: 6px; background: var(--mt-bg-raise); box-shadow: inset 0 0 0 1px var(--mt-hair); }
.ds-tl-m { position: absolute; opacity: 0; transition: opacity 0.3s var(--mt-ease); }
.ds-tl-m .mt-select-tag { position: absolute; font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: 11px; line-height: 1.1; padding: 1px 4px; }
.ds-tl-m.is-top,
.ds-tl-m.is-gap { width: 0; border-left: 1px solid var(--mt-sel); }
.ds-tl-m.is-top { left: 30%; top: 13%; height: 19%; }
.ds-tl-m.is-gap { left: 9%; top: calc(32% + 0.39 * 58%); height: calc(0.13 * 58%); }
.ds-tl-m.is-side { left: 0; top: 86%; width: 12%; height: 0; border-top: 1px solid var(--mt-sel); }
.ds-tl-m.is-top::before,
.ds-tl-m.is-top::after,
.ds-tl-m.is-gap::before,
.ds-tl-m.is-gap::after { content: ''; position: absolute; left: -3px; width: 7px; height: 1px; background: var(--mt-sel); }
.ds-tl-m.is-top::before,
.ds-tl-m.is-gap::before { top: 0; }
.ds-tl-m.is-top::after,
.ds-tl-m.is-gap::after { bottom: 0; }
/* Each tag on its own side: the padding's to the right of its measure,
   the gap's to the left (out on the canvas), the margin's below. */
.ds-tl-m.is-top .mt-select-tag { left: 6px; top: 50%; transform: translateY(-50%); }
.ds-tl-m.is-gap .mt-select-tag { right: 5px; top: 50%; transform: translateY(-50%); }
.ds-tl-m.is-side .mt-select-tag { left: 50%; top: 5px; transform: translateX(-50%); }
.ds-tl::after { content: ''; position: absolute; inset: 13% 12% 0; background: rgba(var(--ds-sel-rgb), 0.06); box-shadow: inset 1px 0 rgba(var(--ds-sel-rgb), 0.35), inset -1px 0 rgba(var(--ds-sel-rgb), 0.35); opacity: 0; transition: opacity 0.3s var(--mt-ease); }

.ds-hero-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; margin-top: 22px; }
.ds-hero-version { margin: 0; }
.ds-hero-more { display: inline-flex; align-items: center; gap: 6px; margin-right: -6px; }


/* =====================================================================
 * 01 · Principles — four principles, each with an example to try
 * ===================================================================== */
.ds-principle-list { display: grid; gap: clamp(120px, 14vw, 200px); }
.ds-principle { align-items: center; row-gap: 40px; }
.ds-principle-words { grid-column: 1 / span 5; min-width: 0; }
.ds-principle > .ds-demo { grid-column: 6 / -1; }
.ds-principle.is-flip .ds-principle-words { grid-column: 8 / -1; grid-row: 1; }
.ds-principle.is-flip > .ds-demo { grid-column: 1 / span 7; grid-row: 1; }
.ds-principle-kicker { display: flex; align-items: baseline; gap: 14px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--mt-ink-2); }
.ds-principle-num { font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 500; color: var(--mt-ink-3); }
/* The lead is a block's title, the first of the three heading steps. */
.ds-principle-lead { margin-top: clamp(16px, 1.8vw, 24px); font-family: var(--global-font-title); font-size: var(--ds-title); font-weight: 700; line-height: 1.25; letter-spacing: 0; text-wrap: balance; }
.ds-principle-body { max-width: 30em; margin-top: clamp(16px, 1.8vw, 22px); color: var(--mt-ink-2); text-wrap: pretty; }

/* ---------- 01 · Your work first ----------
   The editor as SSHOW draws it: floating panels on a white canvas, the
   toolbar a pill at the top, the scene in the middle selected the way the
   editor selects. Everything is sized in the screen's own container
   units, so the picture keeps its proportions at every width. The
   chrome's colors are tokens (--ed-*); busy swaps them for generic UI
   colors and every part cross-fades in 0.3s. The light stands behind it,
   kept low: the chapter's head is close above. */
.ds-tools.ds-lit { --ds-lit-top: -56px; }
/* The principles' light: behind 01 and 04 (02 brings its own, as its
   example; 03, right under it, stays unlit). The rows stand closer than
   a tall or narrow screen, where one light would share the screen with
   the next, so they light only where each has a screen to itself (wider
   than 14 : 9, at most 900px tall); stacked, their words stand right
   above their stages. */
.ds-principle .ds-lit::before { content: none; }
@media (min-width: 881px) and (min-aspect-ratio: 14 / 9) and (max-height: 900px) {
    .ds-principle .ds-lit::before { content: ''; }
}
.ds-tools-stage { padding: clamp(28px, 4.2vw, 56px) clamp(20px, 3.4vw, 48px) clamp(48px, 5.6vw, 72px); }
.ds-ed {
    --ed-canvas: var(--mt-bg);
    --ed-panel: var(--mt-bg);
    --ed-line: var(--mt-hair-2);
    --ed-shadow: 0 0.5cqi 1.6cqi -0.8cqi rgba(22, 26, 44, 0.22);
    --ed-icon: var(--mt-ink-2);
    --ed-on: var(--mt-ink);
    --ed-on-icon: var(--mt-bg);
    --ed-bar: rgba(var(--mt-ink-rgb), 0.16);
    --ed-bar-on: rgba(var(--mt-ink-rgb), 0.5);
    --ed-row-on: rgba(var(--mt-ink-rgb), 0.07);
    --ed-field: rgba(var(--mt-ink-rgb), 0.05);
    --ed-track: rgba(var(--mt-ink-rgb), 0.14);
    --ed-fill: var(--mt-ink-2);
    --ed-tool-1: transparent;
    --ed-tool-2: transparent;
    --ed-tool-3: transparent;
    --ed-tool-4: transparent;
    --ed-tool-5: transparent;
    --ed-tool-6: transparent;
    --ed-sw-1: rgba(var(--mt-ink-rgb), 0.85);
    --ed-sw-2: rgba(var(--mt-ink-rgb), 0.4);
    --ed-sw-3: rgba(var(--mt-ink-rgb), 0.12);

    container-type: inline-size;
    background: var(--ed-canvas);
    transition: background-color 0.3s var(--mt-ease);
}
.ds-tools.is-busy .ds-ed {
    --ed-canvas: var(--ds-loud-yellow);
    --ed-panel: var(--ds-loud-cyan);
    --ed-line: var(--ds-loud-ink);
    --ed-icon: var(--ds-loud-ink);
    --ed-on: var(--ds-loud-red);
    --ed-on-icon: var(--ds-white);
    --ed-bar: rgba(16, 17, 20, 0.45);
    --ed-bar-on: var(--ds-loud-ink);
    --ed-row-on: var(--ds-loud-lime);
    --ed-field: var(--ds-loud-lime);
    --ed-track: var(--ds-loud-violet);
    --ed-fill: var(--ds-loud-red);
    --ed-tool-1: var(--ds-loud-red);
    --ed-tool-2: var(--ds-loud-lime);
    --ed-tool-3: var(--ds-loud-violet);
    --ed-tool-4: var(--ds-loud-green);
    --ed-tool-5: var(--ds-loud-yellow);
    --ed-tool-6: var(--ds-loud-red);
    --ed-sw-1: var(--ds-loud-red);
    --ed-sw-2: var(--ds-loud-green);
    --ed-sw-3: var(--ds-loud-violet);
}
.ds-ed > * { position: absolute; }
.ds-ed-top { left: 0; right: 0; top: 2cqi; display: flex; justify-content: center; align-items: center; height: 5cqi; pointer-events: none; }
.ds-ed-tools,
.ds-ed-tabs,
.ds-ed-share,
.ds-ed-layers,
.ds-ed-inspector {
    background: var(--ed-panel);
    box-shadow: 0 0 0 0.12cqi var(--ed-line), var(--ed-shadow);
    transition: background-color 0.3s var(--mt-ease), box-shadow 0.3s var(--mt-ease);
}
.ds-ed-tools { display: flex; gap: 0.5cqi; padding: 0.6cqi; border-radius: 1.4cqi; }
.ds-ed-tool {
    display: grid;
    place-items: center;
    width: 3.6cqi;
    height: 3.6cqi;
    border-radius: 0.9cqi;
    color: var(--ed-icon);
    transition: background-color 0.3s var(--mt-ease), color 0.3s var(--mt-ease);
}
.ds-ed-tool:nth-child(1) { background: var(--ed-tool-1); }
.ds-ed-tool:nth-child(2) { background: var(--ed-tool-2); }
.ds-ed-tool:nth-child(3) { background: var(--ed-tool-3); }
.ds-ed-tool:nth-child(4) { background: var(--ed-tool-4); }
.ds-ed-tool:nth-child(5) { background: var(--ed-tool-5); }
.ds-ed-tool:nth-child(6) { background: var(--ed-tool-6); }
.ds-ed-tool.is-on { background: var(--ed-on); color: var(--ed-on-icon); }
.ds-ed-tool svg,
.ds-ed-layer svg { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Beside the toolbar: the mode tabs on the left, share on the right. */
.ds-ed-tabs { position: absolute; left: 2cqi; top: 0; display: flex; align-items: center; gap: 0.8cqi; height: 5cqi; padding: 0 1.4cqi; border-radius: 1.4cqi; }
.ds-ed-tabs i { width: 3.4cqi; height: 0.9cqi; border-radius: 0.5cqi; background: var(--ed-bar); transition: background-color 0.3s var(--mt-ease); }
.ds-ed-tabs i.is-on { width: 5.6cqi; background: var(--ed-bar-on); }
.ds-ed-share { position: absolute; right: 2cqi; top: 0; width: 13cqi; height: 5cqi; border-radius: 1.4cqi; }
.ds-ed-share::after { content: ''; position: absolute; right: 1cqi; top: 1cqi; width: 5cqi; height: 3cqi; border-radius: 1.5cqi; background: var(--ed-on); transition: background-color 0.3s var(--mt-ease); }
.ds-ed-body { inset: 9cqi 2cqi 2cqi; }
/* Scenes over objects, as in the editor's left column. */
.ds-ed-scenes {
    position: absolute;
    left: 0;
    top: 0;
    width: 16cqi;
    padding: 1.2cqi 0.8cqi 0.8cqi;
    border-radius: 1.4cqi;
    display: grid;
    gap: 0.5cqi;
    background: var(--ed-panel);
    box-shadow: 0 0 0 0.12cqi var(--ed-line), var(--ed-shadow);
    transition: background-color 0.3s var(--mt-ease), box-shadow 0.3s var(--mt-ease);
}
.ds-ed-scenes::before { content: ''; display: block; width: 6cqi; height: 0.9cqi; margin: 0.5cqi 0.6cqi 0.7cqi; border-radius: 0.5cqi; background: var(--ed-bar-on); transition: background-color 0.3s var(--mt-ease); }
.ds-ed-scene { display: flex; align-items: center; gap: 0.9cqi; padding: 0.6cqi; border-radius: 0.8cqi; transition: background-color 0.3s var(--mt-ease); }
.ds-ed-scene > img,
.ds-ed-scene > span { flex: none; width: 5.6cqi; aspect-ratio: 16 / 9; border-radius: 0.35cqi; object-fit: cover; box-shadow: 0 0 0 0.12cqi var(--ed-line); transition: box-shadow 0.3s var(--mt-ease); }
.ds-ed-scene.is-second > span { background: linear-gradient(90deg, var(--ds-scene-ink) 0 34%, var(--ds-scene) 34%); }
.ds-ed-scene.is-third > span { background: var(--ds-lit-raise); }
.ds-ed-scene > b { width: 5cqi; height: 0.8cqi; border-radius: 0.4cqi; background: var(--ed-bar); transition: background-color 0.3s var(--mt-ease); }
.ds-ed-scene.is-on { background: var(--ed-row-on); }
.ds-ed-scene.is-on > b { background: var(--ed-bar-on); }
.ds-tools.is-busy .ds-ed-scene > img,
.ds-tools.is-busy .ds-ed-scene > span { box-shadow: 0 0 0 0.3cqi var(--ds-loud-red); }
.ds-ed-layers { position: absolute; left: 0; top: 21cqi; bottom: 0; width: 16cqi; padding: 1.2cqi 0.8cqi; border-radius: 1.4cqi; display: grid; align-content: start; gap: 0.4cqi; }
.ds-ed-layers::before { content: ''; display: block; width: 7cqi; height: 0.9cqi; margin: 0.5cqi 0.6cqi 1.2cqi; border-radius: 0.5cqi; background: var(--ed-bar-on); transition: background-color 0.3s var(--mt-ease); }
.ds-ed-layer { display: flex; align-items: center; gap: 0.8cqi; height: 3.2cqi; padding: 0 0.6cqi; border-radius: 0.8cqi; color: var(--ed-icon); transition: background-color 0.3s var(--mt-ease), color 0.3s var(--mt-ease); }
.ds-ed-layer svg { flex: none; width: 1.8cqi; height: 1.8cqi; }
.ds-ed-layer b { width: var(--w); height: 0.8cqi; border-radius: 0.4cqi; background: var(--ed-bar); transition: background-color 0.3s var(--mt-ease); }
.ds-ed-layer.is-on { background: var(--ed-row-on); }
.ds-ed-layer.is-on b { background: var(--ed-bar-on); }
.ds-ed-inspector { position: absolute; right: 0; top: 0; bottom: 0; width: 17cqi; padding: 1.6cqi 1.2cqi; border-radius: 1.4cqi; display: grid; align-content: start; gap: 1.8cqi; }
.ds-ed-prop { display: grid; gap: 0.8cqi; }
.ds-ed-prop b,
.ds-ed-swatches::before { width: 6cqi; height: 0.8cqi; border-radius: 0.4cqi; background: var(--ed-bar-on); transition: background-color 0.3s var(--mt-ease); }
.ds-ed-slider { position: relative; height: 2.6cqi; border-radius: 0.6cqi; background: var(--ed-field); transition: background-color 0.3s var(--mt-ease); }
.ds-ed-slider::before { content: ''; position: absolute; left: 0.8cqi; right: 0.8cqi; top: calc(50% - 0.15cqi); height: 0.3cqi; border-radius: 0.2cqi; background: linear-gradient(var(--ed-fill), var(--ed-fill)) 0 0 / var(--v) 100% no-repeat, var(--ed-track); transition: background-color 0.3s var(--mt-ease); }
.ds-ed-slider::after { content: ''; position: absolute; left: calc(0.8cqi + (100% - 1.6cqi) * var(--v) / 100%); top: 50%; width: 1.3cqi; height: 1.3cqi; border-radius: 50%; background: var(--ed-panel); box-shadow: 0 0 0 0.18cqi var(--ed-fill); transform: translate(-50%, -50%); transition: background-color 0.3s var(--mt-ease), box-shadow 0.3s var(--mt-ease); }
.ds-ed-swatches { display: flex; flex-wrap: wrap; gap: 0.8cqi; }
.ds-ed-swatches::before { content: ''; flex: 0 0 100%; }
.ds-ed-swatches b { width: 2.6cqi; height: 2.6cqi; border-radius: 0.7cqi; box-shadow: inset 0 0 0 0.12cqi var(--ed-line); transition: background-color 0.3s var(--mt-ease); }
.ds-ed-swatches b:nth-child(1) { background: var(--ed-sw-1); }
.ds-ed-swatches b:nth-child(2) { background: var(--ed-sw-2); }
.ds-ed-swatches b:nth-child(3) { background: var(--ed-sw-3); }
/* The canvas between the panels, and the scene on it. */
.ds-ed-canvas { position: absolute; left: 18cqi; right: 19cqi; top: 0; bottom: 0; display: grid; place-items: center; }
.ds-scene {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: visible;
    background: var(--ds-scene);
    box-shadow: 0 1cqi 2.6cqi -1.4cqi rgba(22, 26, 44, 0.4);
}
.ds-scene-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ds-scene-words { position: absolute; left: 7%; top: 30%; width: 50%; color: var(--ds-scene-ink); }
.ds-scene-title { position: relative; width: fit-content; font-size: 4.2cqi; font-weight: 800; line-height: 1.1; letter-spacing: -0.035em; }
.ds-scene-sub { margin-top: 0.9cqi; font-size: 1.45cqi; font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; opacity: 0.86; }
.ds-scene-select { inset: -0.5cqi -0.8cqi; }
.ds-scene-select > i { width: max(5px, 0.85cqi); height: max(5px, 0.85cqi); }
/* The tag keeps 11px and the deeper blue however small the screen draws;
   on a screen too small for that beside the title, the box goes without it. */
.ds-scene-select .mt-select-tag { position: absolute; left: -1px; bottom: calc(100% + 0.6cqi); padding: max(2px, 0.35cqi) max(5px, 0.75cqi); background: var(--ds-tag); font-size: max(11px, 1.15cqi); }
@container (max-width: 400px) {
    .ds-scene-select .mt-select-tag { display: none; }
}

/* ---------- 02 · Restrained color ----------
   A still pair on the page's paper, the same scene card twice. Do: the
   card keeps its ink and the four colors lie under it as light. Don't:
   no light, and the colors are painted on the card itself, on its
   border, title and button. Each side is named above its card by an icon
   and a word, the two far enough apart that the light stays with its
   card. Nothing moves. */
.ds-paint-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px clamp(28px, 4.4vw, 64px); padding-bottom: clamp(56px, 6vw, 72px); }
/* A side: its name over its card, in the card's own column. */
.ds-paint-side { display: grid; grid-template-columns: min(100%, 300px); justify-content: center; align-content: start; gap: 18px; min-width: 0; margin: 0; }
/* The card's place: the light lies under it and spills past its lower
   edge (a container, for the narrow sides below). */
.ds-paint-scene { position: relative; isolation: isolate; display: grid; container-type: inline-size; }
/* Both cards cast a softer, shorter shadow than the light/dark pair's:
   a grey shadow under the light would muddy it, and here the light
   gives the depth. */
.ds-paint-scene .ds-card { width: 100%; box-shadow: 0 0 0 1px var(--mt-hair), 0 18px 36px -24px rgba(22, 26, 44, 0.3); }
/* The light: /about's glow (its four pools, in the brand's order) drawn
   at a card's scale, behind the card's lower half, so what shows is its
   soft spill around and below the card, as /about's shows past its
   photo. A card is a third of that photo's width: its 60px blur would
   wash the light out to nothing, and a tight one shows the pools apart,
   so the blur is about a fifth of the light's height (36px) and the
   light takes a larger share of the glow to read at that size; the
   night takes less of it (the dark block). */
.ds-paint-light {
    --ds-paint-k: 2.2;
    position: absolute;
    z-index: -1;
    left: -12%;
    right: -12%;
    top: 46%;
    bottom: -26%;
    background:
        radial-gradient(40% 60% at 25% 60%, rgba(var(--brand-mulberry-rgb), 0.9), transparent 70%),
        radial-gradient(40% 60% at 48% 50%, rgba(var(--brand-brass-rgb), 0.7), transparent 70%),
        radial-gradient(40% 60% at 70% 60%, rgba(var(--brand-iris-rgb), 0.8), transparent 70%),
        radial-gradient(40% 60% at 88% 50%, rgba(var(--brand-lichen-rgb), 0.7), transparent 70%);
    filter: blur(36px);
    opacity: calc(var(--mt-glow-opacity) * var(--ds-paint-k));
    pointer-events: none;
}
/* Don't: a color on each part. The title is large type, so pink keeps
   it at 3 : 1 on paper (5.5 : 1 on the night); the button's words take
   the lit stage's ink on its blue, 4.5 : 1 in either theme. */
.ds-paint-side.is-painted .ds-card { box-shadow: 0 0 0 1.5px rgb(var(--brand-iris-rgb)), 0 18px 36px -24px rgba(22, 26, 44, 0.3); }
.ds-paint-side.is-painted .ds-card-title { color: rgb(var(--brand-mulberry-rgb)); }
.ds-paint-side.is-painted .ds-card-button { background: rgb(var(--brand-lichen-rgb)); color: var(--ds-lit-ink); }
/* Each side's name: an icon in a circle and a word, as the writing
   chapter marks its pairs (do filled in ink, don't outlined). */
.ds-paint-verdict { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--mt-ink-2); }
.ds-paint-verdict b { font-weight: 600; color: var(--mt-ink); }
.ds-paint-verdict svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ds-paint-side.is-soft .ds-paint-verdict svg { background: var(--mt-ink); color: var(--mt-bg); }
.ds-paint-side.is-painted .ds-paint-verdict svg { box-shadow: inset 0 0 0 1.5px currentColor; }

/* The card (shared with the light/dark pair): paper, a hairline and a
   soft shadow, in its surface's ink. */
.ds-card {
    position: relative;
    display: grid;
    justify-items: start;
    width: min(100%, 320px);
    padding: 24px 26px 26px;
    border-radius: 20px;
    background: var(--mt-bg);
    box-shadow: 0 0 0 1px var(--mt-hair), 0 30px 50px -30px rgba(22, 26, 44, 0.42);
    color: var(--mt-ink);
    text-align: left;
}
.ds-card-eyebrow { font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.04em; color: var(--mt-ink-2); }
.ds-card-title { margin-top: 22px; font-family: var(--global-font-title); font-size: clamp(22px, 2.1vw, 28px); font-weight: 800; line-height: 1.15; letter-spacing: 0; }
.ds-card-body { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--mt-ink-2); }
.ds-card-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    margin-top: 22px;
    padding: 0 14px 0 16px;
    border-radius: 999px;
    background: var(--mt-ink);
    color: var(--mt-bg);
    font-size: 13px;
    font-weight: 600;
}
.ds-card-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* A narrow room (two sides on a small tablet): the same card, tighter. */
@container (max-width: 268px) {
    .ds-paint-scene .ds-card { padding: 20px 20px 22px; }
    .ds-paint-scene .ds-card-title { margin-top: 16px; font-size: 21px; }
    .ds-paint-scene .ds-card-button { margin-top: 18px; }
}

/* ---------- 03 · Calm motion ----------
   Two scenes stacked in the screen as .mt-layer: the incoming one lands
   on top (is-top) and settles in; the one under it stays put until the
   incoming has landed, then drops out unseen (is-under). Previewing
   reduced motion makes the cut instant (is-instant). */
.ds-cut-stage { padding: clamp(28px, 4.2vw, 56px) clamp(20px, 3.4vw, 48px) clamp(48px, 5.6vw, 72px); }
.ds-cut-screen { container-type: inline-size; background: var(--ds-scene); }
.ds-cut-scene { position: absolute; inset: 0; overflow: hidden; }
.ds-cut-scene[hidden] { display: none; }
.ds-cut-scene.is-top { z-index: 2; }
.ds-cut-scene.is-under { z-index: 1; opacity: 1; transform: none; transition: none; }
.ds-cut.is-instant .ds-cut-scene { transition: none; }
.ds-cut-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ds-cut-title {
    position: absolute;
    left: 7%;
    top: 50%;
    max-width: 44%;
    font-size: 5.4cqi;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: var(--ds-scene-ink);
    transform: translateY(-50%);
    text-wrap: balance;
}
.ds-cut-scene.is-close .ds-cut-title { top: 15%; max-width: 38%; font-size: 4.4cqi; transform: none; }
/* Where the system already reduces motion the switch stays on, locked:
   only its track dims, and its words keep their full contrast, since
   they say why the cut is instant. */
.ds-cut .ds-switch:has(.ds-switch-input:disabled) { opacity: 1; }
.ds-cut .ds-switch:has(.ds-switch-input:disabled) .ds-switch-track { opacity: 0.72; }

/* ---------- 04 · Consistent everywhere ----------
   The stage is a room (a size container) with one generic frame in it.
   The frame's size, bezel and corners are registered lengths, so a frame
   change settles like a scene: width, height and corners in 0.9s (the
   scene beat) on the move curve. The room's light changes on the same beat.
   The screen inside is the scene's own orange; the scene keeps its 16:9
   at the largest size that fits, letterboxed. Light and dark re-declare
   the room's tokens (see the islands below). The chapter's light hangs
   on the figure, outside the room's island, so it stays the page's own
   light whichever room it shows; the stage's edge and lift answer in
   0.3s, the room's light keeps the scene beat. */
@property --ds-dev-w { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --ds-dev-h { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --ds-dev-b { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --ds-dev-r { syntax: '<length>'; inherits: true; initial-value: 0px; }
.ds-frames.ds-lit { --ds-lit-top: -56px; }
.ds-frames-stage { transition: background-color 0.9s var(--mt-ease), box-shadow 0.3s var(--mt-ease); }
.ds-frames-room {
    position: relative;
    aspect-ratio: 16 / 10.4;
    overflow: hidden;
    border-radius: inherit;
    container-type: size;
    contain: layout paint;
}
/* A soft floor under the frame, the room's own shade. */
.ds-frames-room::before {
    content: '';
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: 6%;
    height: 14%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--mt-ink-rgb), 0.1), transparent);
}
.ds-device {
    --ds-dev-w: 78cqw;
    --ds-dev-h: calc((78cqw - 1.4cqw) * 9 / 16 + 1.4cqw);
    --ds-dev-b: 0.7cqw;
    --ds-dev-r: 1.2cqw;
    position: absolute;
    left: 50%;
    top: 43cqh;
    width: var(--ds-dev-w);
    height: var(--ds-dev-h);
    border-radius: var(--ds-dev-r);
    background: var(--mt-bezel);
    box-shadow: inset 0 0 0 1px var(--mt-bezel-line), 0 3cqw 5cqw -3cqw rgba(22, 26, 44, 0.45);
    transform: translate(-50%, -50%);
    transition:
        --ds-dev-w 0.9s var(--ds-ease-move),
        --ds-dev-h 0.9s var(--ds-ease-move),
        --ds-dev-b 0.9s var(--ds-ease-move),
        --ds-dev-r 0.9s var(--ds-ease-move),
        top 0.9s var(--ds-ease-move),
        background-color 0.9s var(--mt-ease);
}
.ds-frames-stage[data-frame="laptop"] .ds-device {
    --ds-dev-w: 60cqw;
    --ds-dev-h: calc((60cqw - 2.4cqw) * 10 / 16 + 2.4cqw);
    --ds-dev-b: 1.2cqw;
    --ds-dev-r: 1.6cqw;
    top: 44cqh;
}
.ds-frames-stage[data-frame="tablet"] .ds-device {
    --ds-dev-w: 50cqw;
    --ds-dev-h: calc((50cqw - 4.4cqw) * 3 / 4 + 4.4cqw);
    --ds-dev-b: 2.2cqw;
    --ds-dev-r: 3.6cqw;
    top: 47cqh;
}
.ds-frames-stage[data-frame="phone"] .ds-device {
    --ds-dev-h: 76cqh;
    --ds-dev-w: calc((76cqh - 3cqw) * 9 / 19.5 + 3cqw);
    --ds-dev-b: 1.5cqw;
    --ds-dev-r: 5.2cqw;
    top: 46cqh;
}
.ds-device-screen {
    position: absolute;
    inset: var(--ds-dev-b);
    overflow: hidden;
    border-radius: max(2px, calc(var(--ds-dev-r) - var(--ds-dev-b)));
    background: linear-gradient(var(--ds-scene-top) 50%, var(--ds-scene-bottom) 50%);
    container-type: size;
    display: grid;
    place-items: center;
}
.ds-device-scene { position: relative; width: min(100cqw, 100cqh * 16 / 9); aspect-ratio: 16 / 9; container-type: inline-size; }
.ds-device-scene img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Its top and bottom edges melt into the bars of the same color. */
    -webkit-mask-image: linear-gradient(transparent, white 3%, white 97%, transparent);
    mask-image: linear-gradient(transparent, white 3%, white 97%, transparent);
}
.ds-device-title { position: absolute; left: 7%; top: 50%; font-size: 6cqi; font-weight: 800; line-height: 1.1; letter-spacing: -0.035em; color: var(--ds-scene-ink); transform: translateY(-50%); white-space: nowrap; }
/* The stand of the big screen and the base of the laptop, each shown
   only with its own frame. */
.ds-device-stand,
.ds-device-base { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s var(--mt-ease); }
.ds-device-stand { width: 16cqw; height: 9cqh; }
.ds-device-stand::before { content: ''; position: absolute; left: 50%; top: 0; width: 2.4cqw; height: 100%; margin-left: -1.2cqw; background: var(--mt-bezel); box-shadow: inset 0 0 0 1px var(--mt-bezel-line); }
.ds-device-stand::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.1cqw; border-radius: 0.6cqw; background: var(--mt-bezel); box-shadow: inset 0 0 0 1px var(--mt-bezel-line), 0 1cqw 1.6cqw -1cqw rgba(22, 26, 44, 0.4); }
.ds-device-base {
    width: 118%;
    height: 1.9cqw;
    border-radius: 0 0 1.4cqw 1.4cqw / 0 0 1.2cqw 1.2cqw;
    background: linear-gradient(var(--mt-bezel), color-mix(in srgb, var(--mt-bezel) 84%, var(--mt-ink)));
    box-shadow: inset 0 0 0 1px var(--mt-bezel-line), 0 1.2cqw 2cqw -1.2cqw rgba(22, 26, 44, 0.45);
}
.ds-device-base::before { content: ''; position: absolute; left: 50%; top: 0; width: 14%; height: 36%; border-radius: 0 0 0.6cqw 0.6cqw; background: rgba(var(--mt-ink-rgb), 0.08); transform: translateX(-50%); }
.ds-frames-stage[data-frame="screen"] .ds-device-stand,
.ds-frames-stage[data-frame="laptop"] .ds-device-base { opacity: 1; transition-delay: 0.2s; }
/* The frames' switch holds its options in two pairs that draw nothing
   here; on phones they wrap as pairs (see the phones' block). */
.ds-frame-pair { display: contents; }


/* =====================================================================
 * 02 · Logo — an S that flows without a break
 *
 * The flow as a paper ribbon and the mark to handle, side by side at one
 * height, then what the mark means in three words, the way the practices
 * and the specifications follow it.
 * The stage's surface is the mark's own: light (the lit paper) and dark
 * (the night), each in its own light whatever the page's theme, and the
 * app icon (a graphite tile on the page's stage). The mark is drawn in
 * its surface's text ink. The construction is the editor's blue.
 * Nothing here animates the mark.
 * ===================================================================== */
.ds-logo-layout { align-items: start; row-gap: 48px; }
/* What the mark means: each word and what it holds, a term list on the
   documents' columns under the block's one hairline, as the practices and
   the specifications below stand, in ink only. The word takes a block
   title's step and its sentence a card's. Three columns where they have
   room; under 1180px each word stands beside its sentence on a hairline
   row, and on phones above it (those blocks). */
.ds-meaning-list { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--ds-gutter); margin: 0; }
.ds-meaning-item { min-width: 0; }
.ds-meaning-title { font-family: var(--global-font-title); font-size: var(--ds-title); font-weight: 700; line-height: 1.25; letter-spacing: 0; text-wrap: balance; }
.ds-meaning-body { margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: var(--mt-ink-2); text-wrap: pretty; }
.ds-logo-photo { grid-column: 1 / span 6; min-width: 0; }
.ds-markdemo { grid-column: 7 / -1; }
/* The photo is a panel the size of the stage beside it, so it takes the
   stage's corners: 28, then 24 and 20 as the stages step down. */
.ds-logo-photo-frame { overflow: hidden; aspect-ratio: 1; border-radius: 28px; background: var(--mt-bezel); box-shadow: var(--mt-work-shadow); }
/* One unbroken sweep: the ribbon comes in at the top edge, turns just
   right of the square's center (45% across the photo) and leaves at the
   right edge, so no loose corner of it stands apart; the wider frame of
   the stacked layout shows the same path. The studio's cool grey takes a
   touch of warmth, so the photo reads as the same paper as the stage
   beside it (on the night it also steps down, the dark block). */
.ds-logo-photo-frame picture { display: contents; }
.ds-logo-photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; filter: sepia(0.06) brightness(1.02); }
/* The caption stands in the frame's work shadow, where the third ink
   falls under 4.5 : 1, so it takes the second. Beside the mark's stage it
   stands level with the stage's note (the toolbar's lower half, 25px,
   and the note's own 16px), so the row ends on one line, clear of the
   shadow's darkest band; stacked, it keeps close to its photo (the
   content fold's block). */
.ds-logo-photo figcaption { max-width: 30em; margin-top: 41px; color: var(--mt-ink-2); }
/* The chapter's light stands behind the mark's stage, past its top edge
   and kept low (the head is close above): around the stage, never on the
   mark, which keeps its surface's plain ink. */
.ds-markdemo.ds-lit { --ds-lit-top: -56px; }
.ds-markdemo-stage { aspect-ratio: 1; }
/* The surface inside the stage: its paper, dots (the stage's lighter
   canvas) and hairline, and the solid mark in its ink (currentColor).
   The surface fades to its new light; the mark takes its new ink at
   once, never passing through a grey, so it never animates. */
.ds-markdemo-view {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: inherit;
    background-color: var(--mt-bg-raise);
    background-image: radial-gradient(rgba(var(--mt-ink-rgb), calc(var(--ds-dot-a) * 0.5 + 0.015)) 1px, transparent 1.4px);
    background-size: 22px 22px;
    background-position: center;
    box-shadow: inset 0 0 0 1px var(--mt-hair);
    color: var(--mt-ink);
    transition: background-color 0.3s var(--mt-ease), box-shadow 0.3s var(--mt-ease);
}
/* Light and dark re-declare the stage's values, as the islands do, so the
   mark takes the text's ink on either; the app icon keeps the page's. */
.ds-markdemo-stage[data-surface="light"] .ds-markdemo-view {
    --mt-bg-raise: var(--ds-lit-raise);
    --mt-ink: var(--ds-lit-ink);
    --mt-ink-rgb: var(--ds-lit-ink-rgb);
    --mt-hair: rgba(var(--ds-lit-ink-rgb), 0.09);
    --mt-sel: #185CC2;
    --ds-dot-a: 0.07;
}
.ds-markdemo-stage[data-surface="dark"] .ds-markdemo-view {
    --mt-bg-raise: var(--ds-night);
    --mt-ink: var(--ds-night-ink);
    --mt-ink-rgb: var(--ds-night-ink-rgb);
    --mt-hair: rgba(var(--ds-night-ink-rgb), 0.09);
    --ds-dot-a: 0.06;
}
.ds-markdemo-box { position: relative; height: var(--size); aspect-ratio: 603.08 / 958.24; }
/* The solid glyph, or the app icon's two-tone mark (its own file): only
   one of them ever shows. */
.ds-markdemo-solid,
.ds-markdemo-twotone { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.ds-markdemo-solid[hidden],
.ds-markdemo-twotone[hidden] { display: none; }
/* The app icon: a graphite tile the mark stands in, as on a home screen. */
.ds-markdemo-tile {
    position: absolute;
    left: 50%;
    top: 50%;
    display: none;
    width: calc(var(--size) * 1.56);
    aspect-ratio: 1;
    border-radius: 22.4%;
    background: linear-gradient(170deg, var(--ds-graphite-1), var(--ds-graphite-2));
    box-shadow: 0 calc(var(--size) * 0.06) calc(var(--size) * 0.16) calc(var(--size) * -0.08) rgba(18, 19, 24, 0.6);
    transform: translate(-50%, -50%);
}
.ds-markdemo-stage[data-surface="icon"] .ds-markdemo-tile { display: block; }
/* The construction, as the hero's logo tile draws it: the clear space
   (dashed), the box, the bowls and their rounded ends, and the one line
   the S flows along through its four anchors; then the unit bars. The
   guides are screen-thin lines. The flow line lies on the mark, so it
   takes the blue that reads on the mark's ink (--ds-flow: the lighter one
   on the lit paper's dark ink, the deeper one on the night's light ink
   and the icon's white), a little heavier than the guides, and its
   anchors are drawn as the editor draws a path's points: open, white,
   ringed in that blue. Both keep a screen size at any size of the mark
   (--ds-unit, the mark's units in one pixel). With the clear space shown
   the anchors come with the guides, then the line runs through them, top
   to bottom, on the page's longest beat; hidden, it winds back once the
   guides have faded. */
.ds-guides {
    --ds-flow: var(--ds-sel-on-dark);
    --ds-unit: tan(atan2(958.24px, var(--size)));
    position: absolute;
    inset: calc(var(--size) * -0.3);
    width: calc(100% + var(--size) * 0.6);
    height: calc(100% + var(--size) * 0.6);
    overflow: visible;
    fill: none;
    stroke: var(--mt-sel);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s var(--mt-ease);
}
.ds-guides * { vector-effect: non-scaling-stroke; stroke-width: 1px; }
.ds-g-space { stroke-dasharray: 5 4; }
.ds-g-end { stroke-dasharray: 3 4; opacity: 0.75; }
.ds-g-unit { stroke-width: 1.5px; }
.ds-guides .ds-g-flow {
    vector-effect: none;
    stroke: var(--ds-flow);
    stroke-width: calc(2px * var(--ds-unit));
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0s 0.3s;
}
.ds-guides .ds-g-anchor { r: calc(4px * var(--ds-unit)); fill: var(--ds-white); stroke: var(--ds-flow); stroke-width: 1.5px; }
.ds-markdemo-stage:not([data-surface="light"]) .ds-guides { --ds-flow: var(--ds-tag); stroke: var(--ds-sel-on-dark); }
.ds-markdemo.is-space .ds-g-flow { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--mt-ease-spring) 0.24s; }
.ds-g-tag { position: absolute; padding: 2px 6px; background: var(--ds-tag); font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: 11px; opacity: 0; pointer-events: none; transition: opacity 0.3s var(--mt-ease); }
.ds-g-tag.is-top { left: 50%; top: calc(var(--size) * -0.15); transform: translate(8px, -50%); }
.ds-g-tag.is-left { left: calc(var(--size) * -0.15); top: 50%; transform: translate(-50%, calc(-100% - 12px)); }
.ds-markdemo.is-space .ds-guides,
.ds-markdemo.is-space .ds-g-tag { opacity: 1; }
/* Small, the construction keeps to the box and the clear space, and each
   tag stands outside the clear space at its bar's outer end, clear of the
   mark and of the other tag down to 16px. */
.ds-markdemo.is-small .ds-g-build { display: none; }
.ds-markdemo.is-small .ds-g-tag.is-top { top: calc(var(--size) * -0.3); transform: translate(-50%, calc(-100% - 6px)); }
.ds-markdemo.is-small .ds-g-tag.is-left { left: calc(var(--size) * -0.3); transform: translate(calc(-100% - 6px), -50%); }
.ds-markdemo-size .ds-range { grid-template-columns: auto minmax(90px, 150px) auto; min-width: 0; }
.ds-markdemo .ds-note { min-height: 3em; }


/* =====================================================================
 * 03 · Color — a neutral base, four brand colors
 *
 * Flat and exact, the way the system states them: the brand colors as
 * four large swatches, solid fields with a hairline where color meets
 * paper; their gradient as one still band; the neutrals as a token table
 * in light and dark. Every value is a button that copies it (design.js
 * 10) once the script enables it; until then, values to read. A swatch
 * lifts a little under a pointer or focus. No blur and no glow: the
 * colors themselves are the chapter's color. Then one card on both
 * stages.
 * ===================================================================== */
/* Above the swatches: their label, and what a press does, said once. */
.ds-color-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px; margin-bottom: 20px; }
.ds-color-bar .ds-label { margin: 0; }
.ds-copy-hint { color: var(--mt-ink-2); text-wrap: balance; }
/* Before the script wires them the values are disabled: to read, not yet
   to press. */
:is(.ds-swatch, .ds-token):disabled { cursor: default; }

/* The brand colors: four in a row on the page's columns (two by two on
   phones), in the brand's order. A swatch lifts with the work shadow's
   two layers at its own scale: the page's full one would grey its name
   and value under it (the night's is in the dark block). */
.ds-brand { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px var(--ds-gutter); }
.ds-swatch { --ds-swatch-lift: 0 16px 28px -18px rgba(22, 26, 44, 0.3), 0 6px 12px -8px rgba(22, 26, 44, 0.14); display: grid; justify-items: start; width: 100%; text-align: left; }
.ds-swatch.is-pink { --swatch: var(--brand-mulberry); }
.ds-swatch.is-orange { --swatch: var(--brand-brass); }
.ds-swatch.is-orchid { --swatch: var(--brand-iris); }
.ds-swatch.is-blue { --swatch: var(--brand-lichen); }
.ds-swatch-field {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 4;
    margin-bottom: 16px;
    border-radius: 20px;
    background: var(--swatch);
    box-shadow: inset 0 0 0 1px var(--mt-hair);
    transition: transform 0.3s var(--mt-ease-spring), box-shadow 0.3s var(--mt-ease);
}
.ds-swatch-name { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--mt-ink); }
.ds-swatch-hex { margin-top: 3px; font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0.01em; color: var(--mt-ink-2); }
/* The ring's top corners follow the field's; its lower ones are tighter,
   so the ring keeps clear of the value's first figure. */
.ds-swatch:focus-visible { outline-offset: 6px; border-radius: 20px 20px 12px 12px; }
.ds-swatch:focus-visible .ds-swatch-field { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--mt-hair), var(--ds-swatch-lift); }
/* Copied: the editor's selection around the value, for a moment. From
   the keyboard the focus ring itself takes the blue, so there is only
   ever one ring. */
.ds-swatch.is-copied .ds-swatch-field,
.ds-token.is-copied .ds-token-chip { outline: 2px solid var(--mt-sel); outline-offset: 3px; }
:is(.ds-swatch, .ds-token).is-copied:focus-visible { outline-color: var(--mt-sel); }
.ds-swatch.is-copied:focus-visible .ds-swatch-field,
.ds-token.is-copied:focus-visible .ds-token-chip { outline: none; }

/* The gradient: one still band, the stage's corners (28, 24, 20), the
   four in order at 135°; its words under it. */
.ds-gradient { margin-top: clamp(56px, 5.6vw, 80px); }
.ds-color-label { margin-bottom: 20px; }
.ds-gradient-band { height: clamp(120px, 14vw, 200px); border-radius: 28px; background: var(--brand-iridescent-gradient); box-shadow: inset 0 0 0 1px var(--mt-hair); }
.ds-gradient-caption { margin-top: 16px; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--mt-ink-2); }
.ds-gradient-arrow { color: var(--mt-ink-3); }
.ds-gradient-angle { font-variant-numeric: tabular-nums; }

/* The neutrals: a token table on the documents' columns (the label where
   the numeral stands, the rows where the words do), hairline rows with
   room. Each value is a chip and its hex; the chip's hairline keeps paper
   seen on paper and night on the night. */
.ds-neutrals { margin-top: clamp(80px, 9vw, 128px); padding-top: 20px; border-top: 1px solid var(--mt-hair-2); }
.ds-neutrals-label { grid-column: 1 / span 4; margin-top: 3px; }
.ds-tokens { grid-column: 5 / -1; width: 100%; border-collapse: collapse; table-layout: fixed; }
.ds-tokens :is(th, td) { padding: 0; text-align: left; vertical-align: middle; }
.ds-tokens thead :is(th, td) { padding-bottom: 14px; }
.ds-tokens thead td { width: 38%; }
.ds-tokens tbody tr { border-top: 1px solid var(--mt-hair); }
.ds-tokens tbody th { padding: 12px 16px 12px 0; font-size: clamp(15px, 1.3vw, 17px); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--mt-ink); }
.ds-tokens tbody td { padding: 12px 0; }
.ds-token { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-left: -8px; padding: 8px 14px 8px 8px; border-radius: 14px; transition: background-color 0.18s var(--mt-ease); }
.ds-token:focus-visible { outline-offset: 0; border-radius: 14px; }
.ds-token-chip { flex: none; width: 28px; height: 28px; border-radius: 7px; background: var(--chip); box-shadow: inset 0 0 0 1px rgba(var(--mt-ink-rgb), 0.14); }
.ds-token-hex { font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0.01em; white-space: nowrap; color: var(--mt-ink-2); }

/* One card, two stages: the dark one re-declares the stage's values (the
   islands below), so only the values change. */
.ds-parity { margin-top: clamp(80px, 9vw, 128px); row-gap: 32px; }
.ds-parity-side { grid-column: span 6; display: grid; gap: 18px; min-width: 0; }
.ds-parity-stage { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: clamp(24px, 3vw, 40px); }
.ds-parity-name { text-align: center; }

/* The design specs' tags stand above the fields and the band: room for
   them under the labels, and above the soft card's in principle 02. */
#mt-page.is-inspect :is(.ds-color-bar, .ds-color-label) { margin-bottom: 44px; }
#mt-page.is-inspect .ds-paint-side { row-gap: 44px; }


/* =====================================================================
 * 04 · Typography — two typefaces, clear hierarchy (+ SSHOW SEO Sans)
 *
 * The scale as a specimen table, each sample in the page's own class and
 * its figures on the right; then the night panel for SSHOW SEO Sans, a
 * night on the light page and the night's raise on the dark one (the
 * dark block), so it never dissolves into the page.
 * ===================================================================== */
.ds-ramp-label { margin-bottom: 14px; }
.ds-ramp-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 0.26fr);
    gap: 18px clamp(24px, 4vw, 64px);
    align-items: baseline;
    padding: clamp(26px, 3.2vw, 44px) 0;
    border-top: 1px solid var(--mt-hair);
}
.ds-ramp-row:first-of-type { border-top-color: var(--mt-hair-2); }
.ds-ramp-row:last-child { border-bottom: 1px solid var(--mt-hair); }
.ds-ramp-cell { min-width: 0; }
.ds-ramp-sample { position: relative; width: fit-content; max-width: 100%; margin: 0; }
.ds-ramp-sample.mt-eyebrow { margin: 0; }
/* The lede keeps the measure it has wherever the page sets one. */
.ds-ramp-sample.mt-lede { max-width: min(100%, 36em); }
.ds-ramp-body { max-width: 34em; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.65; letter-spacing: -0.008em; }
.ds-ramp-meta { display: grid; justify-items: end; gap: 6px; text-align: right; }
.ds-ramp-name { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--mt-ink); }
.ds-ramp-spec { font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: 12px; line-height: 1.45; letter-spacing: 0; color: var(--mt-ink-3); white-space: nowrap; }
.ds-ramp-select { inset: -6px -10px; opacity: 0; transition: opacity 0.18s var(--mt-ease); }

/* The night panel: SSHOW SEO Sans, the page's one dramatic moment. Its
   frame keeps the space above it and the chapter's light, very faint,
   past its top edge (the light hangs on the frame, which carries the
   margin, so the light keeps to the panel's edge). */
.ds-trailer-lit { --ds-lit-share: 0.6; margin-top: clamp(104px, 12vw, 176px); }
.ds-trailer {
    --wght: 400;
    position: relative;
    padding: clamp(40px, 6vw, 96px) clamp(24px, 6vw, 96px) clamp(32px, 4vw, 56px);
    border-radius: 28px;
    background: var(--ds-night);
    /* A hairline edge; on the dark page it rises (the dark block). */
    box-shadow: inset 0 0 0 1px var(--mt-hair);
    color: var(--mt-ink);
    container-type: inline-size;
}
/* The kicker is the stage's eyebrow (.mt-eyebrow), with room to wrap. */
.ds-trailer-kicker.mt-eyebrow { margin: 0; line-height: 1.5; }
.ds-lockup { margin-top: clamp(22px, 3cqi, 40px); }
/* The name follows the slider, but never below 200: a Thin capital S
   this large is not how the face wants to be met. Its size follows the
   panel, so it holds one line at every weight; only a reader's own wider
   spacing may wrap it, between its words. */
.ds-lockup-name {
    font-size: min(11cqi, 140px);
    font-weight: max(200, var(--wght));
    line-height: 1.02;
    letter-spacing: 0;
    color: var(--mt-ink);
    text-wrap: balance;
}
/* The tagline belongs to the name, so it keeps the full ink; the Korean
   one under it (on /kr) steps back to the second. */
.ds-lockup-tagline { margin-top: clamp(14px, 1.8cqi, 22px); font-size: clamp(15px, 1.4vw, 18px); font-weight: 400; line-height: 1.4; letter-spacing: normal; color: var(--mt-ink); }
.ds-lockup-tagline + .ds-lockup-tagline { margin-top: 4px; color: var(--mt-ink-2); }
/* The lede is the page's own (.mt-lede), as the scale above states it. */
.ds-trailer-lede.mt-lede { max-width: 28em; margin-top: clamp(24px, 3cqi, 36px); }
/* The manifesto: two short lines in boxes one line tall, so the weights
   can change without moving anything around them (a reader's own line
   spacing may still grow them). */
/* A specimen keeps the spacing the face was drawn with (no display
   tightening: the weight swap runs up to 900, where letters widen). */
.ds-manifesto { display: grid; gap: 0.06em; margin-top: clamp(56px, 8cqi, 112px); padding-top: clamp(28px, 4cqi, 48px); border-top: 1px solid var(--mt-hair); font-size: min(8.2cqi, 104px); line-height: 1.04; letter-spacing: 0; color: var(--mt-ink); }
.ds-manifesto-line { min-height: 1.04em; font-weight: 300; white-space: nowrap; }
.ds-manifesto-line.is-forward { font-weight: 800; }
.ds-manifesto.is-swapped .ds-manifesto-line { transition: font-weight 2.8s var(--mt-ease); }
.ds-manifesto.is-armed .is-back { font-weight: 900; }
.ds-manifesto.is-armed .is-forward { font-weight: 200; }
.ds-manifesto.is-armed.is-swapped .is-back { font-weight: 200; }
.ds-manifesto.is-armed.is-swapped .is-forward { font-weight: 900; }
/* The traits, each with its proof above the word, on the night's raise
   (on the dark page, where the panel rises, they sink back to the night). */
.ds-traits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(56px, 7cqi, 96px); }
.ds-trait { display: grid; align-content: start; gap: 6px; padding: clamp(20px, 2.4vw, 32px); border-radius: 20px; background: var(--ds-night-raise); box-shadow: inset 0 0 0 1px var(--mt-hair); }
.ds-trait-proof { display: grid; place-items: center; height: clamp(120px, 13cqi, 160px); margin-bottom: 18px; border-bottom: 1px solid var(--mt-hair); color: var(--mt-ink); }
.ds-trait-word { font-size: clamp(34px, 3.8cqi, 52px); font-weight: 600; line-height: 1; letter-spacing: 0; color: var(--mt-ink); }
.ds-trait-label { margin-top: 4px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--mt-ink-2); }
.ds-trait-body { margin-top: 2px; font-size: 15px; line-height: 1.55; color: var(--mt-ink-2); }
/* Soft: S and s with their level terminals traced by the editor's guides. */
.ds-trait-proof.is-soft { position: relative; }
.ds-soft-svg { position: absolute; left: 0; top: 10%; width: 100%; height: 80%; overflow: visible; }
.ds-soft-svg text { fill: currentColor; letter-spacing: 0; }
.ds-soft-guide { stroke: var(--ds-sel-on-dark); stroke-width: 1px; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.ds-soft-point { fill: var(--ds-sel-on-dark); }
/* Even: one line at three weights, the same grey on each. */
.ds-trait-proof.is-even { align-content: center; justify-items: start; gap: 6px; padding-inline: 4px; font-size: 15px; line-height: 1.3; }
.ds-trait-proof.is-even span { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; font-weight: var(--w); white-space: nowrap; overflow: hidden; }
/* Their figures sit on a raised card, so they take the second ink. */
.ds-trait-proof.is-even small,
.ds-open-small small { font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 400; color: var(--mt-ink-2); }
/* Open: the same letters at 64px and at 13px. */
.ds-trait-proof.is-open { grid-auto-flow: column; justify-content: center; align-items: end; gap: 22px; padding-bottom: 22px; }
.ds-open-big { font-size: 64px; font-weight: 500; line-height: 1; }
.ds-open-small { display: grid; justify-items: start; gap: 6px; font-size: 13px; font-weight: 500; line-height: 1; }
/* The tester: a line to write in at the slider's weight. */
.ds-tester { display: grid; gap: 22px; margin-top: clamp(48px, 6cqi, 80px); padding-top: clamp(28px, 3cqi, 40px); border-top: 1px solid var(--mt-hair); }
.ds-tester[hidden] { display: none; }
.ds-tester-text {
    min-height: 1.15em;
    font-size: min(6.6cqi, 76px);
    font-weight: var(--wght);
    line-height: 1.15;
    letter-spacing: 0;
    color: var(--mt-ink);
    caret-color: var(--mt-ink);
    overflow-wrap: anywhere;
    cursor: text;
}
.ds-tester-text:focus { outline: none; }
.ds-tester-text:focus-visible { outline: 2px solid var(--focus-outline-color); outline-offset: 10px; border-radius: 6px; }
.ds-tester .ds-range { max-width: 560px; }
.ds-trailer-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 32px; margin-top: clamp(40px, 5cqi, 64px); }
.ds-trailer-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: 12px; line-height: 1.5; letter-spacing: 0.02em; color: var(--mt-ink-3); }
.ds-trailer-cta .mt-link-arrow { margin-left: 2px; }


/* =====================================================================
 * 05 · Layout — generous space, steady spacing
 *
 * A frame on the stage holds one page section on a simulated screen
 * (--lay-* from design.js, in that screen's own pixels: a 1440 × 900
 * display, a tablet held landscape, a phone), drawn at one scale (--k)
 * for every screen, so smaller screens show smaller margins. Each frame
 * rises from the stage's lower edge, its foot below it, however tall the
 * screen. The measures sit in the same pixels, their lines and tags kept
 * screen-sized (--mt-inv).
 * ===================================================================== */
/* The scale is design.js's (86% of the stage's width for the big screen);
   before it runs, or without it, the stage's own width gives the same
   number (a registered number, so every part inherits one value). */
@property --lay-fit { syntax: '<number>'; inherits: true; initial-value: 0.62; }
.ds-lay { container: lay-demo / inline-size; }
.ds-lay-stage {
    --lay-fit: min(1, tan(atan2(86cqi, 1440px)));
    --k: var(--lay-fit);
    --lay-w: 1440;
    --lay-h: 900;
    --lay-side: 72;
    --lay-section: 144;
    --lay-title: 56;
    --lay-lede: 18;
    --lay-head: 88;
    /* A screen wider than the content and its margins centers the wrap:
       the room left on either side, outside the margin. */
    --lay-gutter: max(0, (var(--lay-w) - 1240 - var(--lay-side) * 2) / 2);
    aspect-ratio: 16 / 8.6;
}
.ds-lay-view { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; contain: layout paint; }
.ds-lay-frame {
    position: absolute;
    left: 50%;
    top: calc(max(0px, 100% - var(--lay-h) * var(--k) * 1px) + clamp(28px, 6%, 64px));
    width: calc(var(--lay-w) * var(--k) * 1px);
    height: calc(var(--lay-h) * var(--k) * 1px);
    overflow: hidden;
    border-radius: calc(26px * var(--k) + 6px);
    background: var(--mt-bg);
    box-shadow: 0 0 0 1px var(--mt-hair-2), var(--mt-work-shadow);
    transform: translateX(-50%);
    transition: opacity 0.3s var(--mt-ease);
    container: lay-frame / inline-size;
}
.ds-lay.is-switching .ds-lay-frame { opacity: 0; transition-duration: 0.18s; }
.ds-lay-page { position: relative; width: calc(var(--lay-w) * 1px); transform: scale(var(--k)); transform-origin: 0 0; }
/* The section sits on the page's own paper, not the raised stage: its
   third ink is the page's. */
.ds-lay-page { --mt-ink-3: var(--ds-lit-ink-3); }
.ds-lay-wrap { max-width: calc(1240px + var(--lay-side) * 2px); margin: 0 auto; padding: calc(var(--lay-section) * 1px) calc(var(--lay-side) * 1px); }
.ds-lay-eyebrow { margin-bottom: 22px; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mt-ink-3); }
.ds-lay-title { font-family: var(--global-font-title); font-size: calc(var(--lay-title) * 1px); font-weight: 700; line-height: 1.2; letter-spacing: 0; }
.ds-lay-body { max-width: 36em; margin-top: 22px; font-size: calc(var(--lay-lede) * 1px); line-height: 1.65; color: var(--mt-ink-2); }
.ds-lay-block { overflow: hidden; aspect-ratio: 16 / 7; margin-top: calc(var(--lay-head) * 1px); border-radius: 20px; background: var(--ds-scene); }
.ds-lay-block img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
/* The measures. */
.ds-lay-marks {
    --mt-inv: calc(1 / var(--k));
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s var(--mt-ease);
    /* The section's padding and the wrap's side margins, tinted as the
       editor tints a padding; the centering room outside a margin stays
       clear. */
    background:
        linear-gradient(rgba(var(--ds-sel-rgb), 0.08), rgba(var(--ds-sel-rgb), 0.08)) 0 0 / 100% calc(var(--pad-top, 0) * 1px) no-repeat,
        linear-gradient(rgba(var(--ds-sel-rgb), 0.06), rgba(var(--ds-sel-rgb), 0.06)) left calc(var(--lay-gutter) * 1px) top 0 / calc(var(--lay-side) * 1px) 100% no-repeat,
        linear-gradient(rgba(var(--ds-sel-rgb), 0.06), rgba(var(--ds-sel-rgb), 0.06)) right calc(var(--lay-gutter) * 1px) top 0 / calc(var(--lay-side) * 1px) 100% no-repeat;
}
.ds-lay.is-show .ds-lay-marks { opacity: 1; }
.ds-lay-m { position: absolute; left: calc(var(--x, 0) * 1px); top: calc(var(--y, 0) * 1px); }
.ds-lay-m.is-v { width: 0; height: calc(var(--len, 0) * 1px); border-left: calc(1px * var(--mt-inv)) solid var(--mt-sel); }
.ds-lay-m.is-h { width: calc(var(--len, 0) * 1px); height: 0; border-top: calc(1px * var(--mt-inv)) solid var(--mt-sel); }
.ds-lay-m::before,
.ds-lay-m::after { content: ''; position: absolute; background: var(--mt-sel); }
.ds-lay-m.is-v::before,
.ds-lay-m.is-v::after { left: calc(-4px * var(--mt-inv)); width: calc(8px * var(--mt-inv)); height: calc(1px * var(--mt-inv)); }
.ds-lay-m.is-v::before { top: 0; }
.ds-lay-m.is-v::after { bottom: 0; }
.ds-lay-m.is-h::before,
.ds-lay-m.is-h::after { top: calc(-4px * var(--mt-inv)); width: calc(1px * var(--mt-inv)); height: calc(8px * var(--mt-inv)); }
.ds-lay-m.is-h::before { left: 0; }
.ds-lay-m.is-h::after { right: 0; }
.ds-lay-m .mt-select-tag {
    position: absolute;
    padding: calc(3px * var(--mt-inv)) calc(7px * var(--mt-inv));
    border-radius: calc(4px * var(--mt-inv));
    background: var(--ds-tag);
    font-family: var(--ds-mono); font-variant-numeric: tabular-nums;
    font-size: calc(11px * var(--mt-inv));
    letter-spacing: 0;
}
.ds-lay-m.is-v .mt-select-tag { left: calc(8px * var(--mt-inv)); top: 50%; transform: translateY(-50%); }
.ds-lay-m.is-v.is-flip .mt-select-tag { left: auto; right: calc(8px * var(--mt-inv)); }
.ds-lay-m.is-h .mt-select-tag { left: 50%; top: calc(6px * var(--mt-inv)); transform: translateX(-50%); }
.ds-lay-m.is-width .mt-select-tag { top: auto; bottom: calc(6px * var(--mt-inv)); }
/* A phone's words run nearly the content's full width: its width tag sits
   on its line, clear of them. */
.ds-lay-stage[data-device="phone"] .ds-lay-m.is-width .mt-select-tag { top: 0; bottom: auto; transform: translate(-50%, -50%); }
/* A side margin measures the margin itself, where a wide screen leaves
   centering room beyond it, so its line is as long as its tag says. */
.ds-lay-m.is-side { width: calc(var(--lay-side) * 1px); }
.ds-lay-m.is-side.is-left { left: calc(var(--lay-gutter) * 1px); }
.ds-lay-m.is-side.is-right { left: auto; right: calc(var(--lay-gutter) * 1px); }
/* Side margins can be narrower than their tags: the tags sit just inside. */
.ds-lay-m.is-side .mt-select-tag { top: calc(6px * var(--mt-inv)); transform: none; }
.ds-lay-m.is-side.is-left .mt-select-tag { left: calc(100% + 6px * var(--mt-inv)); }
.ds-lay-m.is-side.is-right .mt-select-tag { left: auto; right: calc(100% + 6px * var(--mt-inv)); }
/* A phone drawn small has a gap shorter than its tag, which would cover
   its words: the tag gives way, and the line still marks the gap. */
@container lay-frame (max-width: 260px) {
    .ds-lay-stage[data-device="phone"] .ds-lay-m.is-gap .mt-select-tag { display: none; }
}
/* A frame too small for every tag (a phone's, drawn on a phone) keeps the
   ones that fit: the section padding hanging from the frame's top edge,
   the content width under its line, on the picture, and one side. */
@container lay-frame (max-width: 140px) {
    .ds-lay-m.is-gap .mt-select-tag,
    .ds-lay-m.is-side.is-right .mt-select-tag { display: none; }
    .ds-lay-m.is-section .mt-select-tag { left: 0; top: 0; transform: translateX(-50%); }
    .ds-lay-stage[data-device="phone"] .ds-lay-m.is-width .mt-select-tag { top: calc(6px * var(--mt-inv)); transform: translateX(-50%); }
}


/* =====================================================================
 * 06 · Components — the site's real primitives on a sheet
 *
 * The primitives exactly as every page draws them, at their own sizes and
 * corners (nothing here restyles them), in groups on a hairline grid. On
 * the sheet's raised paper their muted ink steps up to the second ink, so
 * their small labels keep 4.5 : 1, the way the islands re-declare their
 * light.
 * ===================================================================== */
/* The sheet stands on the raise: its fields take the page, a step off it,
   with no hover tint (§7.5). */
.ds-sheet {
    --global-text-muted: var(--mt-ink-2);
    --di-select-fill: var(--mt-bg);
    --di-select-fill-hover: var(--mt-bg);
}
.ds-sheet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-sheet-cell { display: grid; align-content: start; gap: 22px; min-width: 0; padding: clamp(22px, 2.6vw, 36px); }
.ds-sheet-cell:is(.is-buttons, .is-controls) { grid-column: span 2; }
.ds-sheet-cell:nth-child(n + 4) { border-top: 1px solid var(--mt-hair); }
.ds-sheet-cell:not(:nth-child(1)):not(:nth-child(4)) { border-left: 1px solid var(--mt-hair); }
.ds-sheet-label { margin: 0; color: var(--mt-ink-2); }
.ds-sheet-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 10px; min-height: 48px; }
.ds-sheet-link { display: inline-flex; gap: 6px; margin-left: -6px; }
.ds-sheet-check { min-height: 34px; }
.ds-sheet-field { width: 100%; max-width: 300px; }
/* The input's own box, for its spec tag (an input holds none). */
.ds-sheet-input { display: flex; border-radius: 10px; }
/* With the design specs on, that tag stands between the field's label
   and its box, not over the label. */
#mt-page.is-inspect .ds-sheet-field { row-gap: 32px; }
/* The shared primitives have no switch, so the sheet's is drawn as the
   editor draws its own: a 38 × 22 track, an 18px knob 2px in. */
.ds-sheet .ds-switch-track { width: 38px; height: 22px; }
.ds-sheet .ds-switch-track > i { width: 18px; height: 18px; }
.ds-sheet .ds-switch-input:checked + .ds-switch-track > i { transform: translateX(16px); }
/* A segmented control too long for its cell (English at 400% zoom, a
   320px screen) wraps its options to a second row, as a toolbar's do on
   phones, its rows 12px apart for their touch areas, instead of leaving
   the sheet. Where it fits, nothing changes. */
.ds-sheet .di-segmented { flex-wrap: wrap; row-gap: 12px; }
.ds-sheet .di-segmented-option { flex: 1 0 auto; }
/* In a contrast theme the system takes away the checkbox's ink fill, and
   with it the white check drawn on it: there it is the system's own
   checkbox, which shows its state in the theme's colors. */
@media (forced-colors: active) {
    #mt-page.ds-page .ds-sheet-check input[type="checkbox"] { -webkit-appearance: auto; appearance: auto; }
}


/* =====================================================================
 * 07 · Motion — in slowly, settling softly
 *
 * The chapter moves only as it says: on the four beats (0.18, 0.3, 0.9
 * and 1.3s) and the two curves (--mt-ease, --mt-ease-spring). Time itself
 * (the playhead, the dot's way across) runs linear. The chapter's light
 * pools under the two curves (their label stands right above them); the
 * curves and the duration board lift as the stages do.
 * ===================================================================== */
.ds-curve-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-gutter); }
/* With the design specs on, the panels' tags stand clear of the labels
   above them, and of the card above where the cards stack. */
#mt-page.is-inspect :is(.ds-curves, .ds-rhythm) > .ds-block-label { margin-bottom: 40px; }
#mt-page.is-inspect .ds-curve-list { row-gap: max(var(--ds-gutter), 32px); }
.ds-curve {
    display: grid;
    grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    gap: 18px clamp(18px, 2.4vw, 32px);
    padding: clamp(22px, 2.6vw, 36px);
    border-radius: 28px;
    background: var(--mt-bg-raise);
    box-shadow: inset 0 0 0 1px var(--mt-hair), var(--ds-raise, 0 0 #0000);
    transition: box-shadow 0.3s var(--mt-ease);
}
.ds-curve-plot { position: relative; grid-row: 1 / span 2; aspect-ratio: 1; }
.ds-curve-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.ds-curve-grid { stroke: var(--mt-hair-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.ds-curve-diag { stroke: var(--mt-hair-2); stroke-width: 1px; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.ds-curve-arm { stroke: var(--mt-sel); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.ds-curve-line { stroke: var(--mt-ink); stroke-width: 2px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ds-curve-handle { fill: var(--mt-bg); stroke: var(--mt-sel); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
/* The dot's two moves: across (time) on a point at the plot's origin,
   up (progress) on the dot itself. */
.ds-curve-time { position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; }
.ds-curve-x { position: absolute; left: 0; bottom: 0; width: 0; height: 0; }
.ds-curve-dot {
    position: absolute;
    left: -6px;
    top: -6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--mt-ink);
    box-shadow: 0 0 0 3px var(--mt-bg-raise);
}
.ds-curve-words { min-width: 0; }
.ds-curve-name { font-family: var(--global-font-title); font-size: var(--ds-card-title); font-weight: 700; line-height: 1.2; letter-spacing: 0; }
/* The curve's own numbers, in the second ink: small type on the raised
   card stays at 4.5 : 1. The four numbers keep together: a narrow card
   breaks the line before them, never inside them. */
.ds-curve-token { margin-top: 8px; font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: 12px; line-height: 1.55; letter-spacing: 0; color: var(--mt-ink-2); }
.ds-curve-token span { display: inline-block; text-wrap: balance; }
.ds-curve-body { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--mt-ink-2); text-wrap: pretty; }
/* The keyframe track: ◇ at each end, the chip crossing between them. */
.ds-keys { position: relative; grid-column: 1 / -1; height: 26px; }
.ds-keys::before { content: ''; position: absolute; left: 12px; right: 12px; top: 50%; height: 1px; background: var(--mt-hair-2); }
.ds-keys-chip { position: absolute; left: 12px; top: 50%; width: 28px; height: 14px; margin: -7px 0 0 -14px; border-radius: 999px; background: var(--mt-ink); }
.ds-play { grid-column: 1 / -1; justify-self: start; }

.ds-rhythm { margin-top: clamp(72px, 9vw, 128px); }
.ds-rhythm-board {
    display: grid;
    grid-template-columns: minmax(120px, 0.22fr) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 48px);
    align-items: center;
    padding: clamp(24px, 3vw, 44px);
    border-radius: 28px;
    background: var(--mt-bg-raise);
    box-shadow: inset 0 0 0 1px var(--mt-hair), var(--ds-raise, 0 0 #0000);
    transition: box-shadow 0.3s var(--mt-ease);
}
.ds-rhythm-sample { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 1; border-radius: 18px; background: var(--mt-bg); box-shadow: inset 0 0 0 1px var(--mt-hair); }
.ds-rhythm-square { width: 34%; aspect-ratio: 1; border-radius: 22%; background: var(--mt-ink); }
.ds-rhythm-line { position: relative; min-width: 0; }
.ds-rhythm-axis { position: relative; height: 40px; margin: 0 6px; border-bottom: 1px solid var(--mt-hair-2); }
.ds-rhythm-axis > i { position: absolute; left: calc(var(--at) * 100%); bottom: 0; width: 1px; height: 6px; background: var(--mt-hair-2); }
.ds-rhythm-axis > i.is-major { height: 11px; background: var(--mt-ink-3); }
.ds-rhythm-axis > i span { position: absolute; left: 50%; bottom: 16px; font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--mt-ink-2); white-space: nowrap; transform: translateX(-50%); }
/* Each beat's time, a ◇ on the axis; it fills while its beat plays. */
.ds-rhythm-mark { position: absolute; left: calc(var(--at) * 100%); bottom: -5px; width: 9px; height: 9px; margin-left: -4.5px; background: var(--mt-bg-raise); box-shadow: inset 0 0 0 1.5px var(--mt-ink-3); transform: rotate(45deg); transition: background-color 0.18s var(--mt-ease), box-shadow 0.18s var(--mt-ease); }
.ds-rhythm-mark.is-playing { background: var(--mt-ink); box-shadow: none; }
.ds-rhythm-head { position: absolute; left: 0; bottom: -6px; width: 2px; height: 46px; margin-left: -1px; border-radius: 1px; background: var(--mt-sel); opacity: 0; }
.ds-rhythm-beats { position: relative; height: 196px; margin: 0 6px; }
.ds-rhythm-beats li { position: absolute; left: calc(var(--at) * 100%); top: calc(var(--row) * 48px + 4px); }
/* A beat hangs from its time on the axis by a hairline. */
.ds-rhythm-beats li::before { content: ''; position: absolute; left: 0; bottom: 100%; height: calc(var(--row) * 48px + 4px); border-left: 1px dashed var(--mt-hair-2); }
/* Every pill stands above every hairline, so a later beat's line never
   crosses an earlier pill's words or takes its taps. */
.ds-beat {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    height: 34px;
    padding: 0 14px 0 12px;
    border-radius: 999px;
    background: var(--mt-bg);
    box-shadow: inset 0 0 0 1px rgba(var(--mt-ink-rgb), 0.16);
    font-size: 13px;
    font-weight: 600;
    line-height: 34px;
    white-space: nowrap;
    color: var(--mt-ink);
    transform: translateX(-12px);
    transition: background-color 0.18s var(--mt-ease), box-shadow 0.18s var(--mt-ease), color 0.18s var(--mt-ease);
}
.ds-beat:focus-visible { border-radius: 999px; }
.ds-beat::before { content: ''; position: absolute; left: 12px; top: -5px; width: 1px; height: 5px; background: var(--mt-hair-2); }
.ds-beat b { font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.ds-beat span { font-weight: 500; color: var(--mt-ink-2); }
.ds-beat.is-playing { background: var(--mt-ink); box-shadow: none; color: var(--mt-bg); }
.ds-beat.is-playing span { color: var(--mt-bg); }
/* The beats near the end of the line hang to the left of their time. */
.ds-rhythm-beats li:nth-child(n + 3) { left: auto; right: calc(100% - var(--at) * 100%); }
.ds-rhythm-beats li:nth-child(n + 3)::before { left: auto; right: 0; }
.ds-rhythm-beats li:nth-child(n + 3) .ds-beat { transform: translateX(12px); }
.ds-rhythm-beats li:nth-child(n + 3) .ds-beat::before { left: auto; right: 12px; }

/* The morph stage: a scene on the bezel's screen; each object's place in
   either scene is a rule, and switching scenes moves it there, size and
   corners included, in 0.9s on the move curve. A fade takes 0.3s. */
.ds-morph { align-items: start; row-gap: 32px; margin-top: clamp(96px, 11vw, 160px); }
.ds-morph-words { grid-column: 1 / span 4; }
.ds-morph-demo { grid-column: 5 / -1; }
.ds-morph-stage-wrap { padding: clamp(28px, 4.2vw, 56px) clamp(20px, 3.4vw, 48px) clamp(48px, 5.6vw, 72px); }
.ds-morph-stage { container-type: inline-size; background: var(--ds-lit-raise); }
.ds-morph-obj {
    position: absolute;
    transition:
        left 0.9s var(--ds-ease-move),
        top 0.9s var(--ds-ease-move),
        width 0.9s var(--ds-ease-move),
        height 0.9s var(--ds-ease-move),
        border-radius 0.9s var(--ds-ease-move),
        font-size 0.9s var(--ds-ease-move),
        opacity 0.3s var(--mt-ease);
}
.ds-morph-obj.is-photo { overflow: visible; }
.ds-morph-obj.is-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 82% 50%; border-radius: inherit; }
.ds-morph-text { font-size: inherit; font-weight: 800; line-height: 1.1; letter-spacing: -0.035em; color: var(--ds-scene-ink); white-space: nowrap; }
.ds-morph-btn { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; background: var(--ds-scene-ink); color: var(--ds-white); font-size: max(10px, 2.2cqi); font-weight: 600; white-space: nowrap; }
.ds-morph-obj.is-button { border-radius: 99px; }
/* Each object's name, as the editor tags a selection: never under 11px,
   white on the deeper blue. */
.ds-morph-tag { position: absolute; left: 0; bottom: calc(100% + max(2px, 0.6cqi)); padding: max(2px, 0.3cqi) max(5px, 0.7cqi); background: var(--ds-tag); font-size: max(11px, 1.25cqi); }
/* Scene 1: the photo large on the right, the title top left, the button
   bottom left. */
.ds-morph-stage[data-scene="1"] .is-photo { left: 52%; top: 11%; width: 42%; height: 80%; border-radius: 1.4cqi; }
.ds-morph-stage[data-scene="1"] .is-title { left: 7%; top: 14%; font-size: 6.4cqi; }
.ds-morph-stage[data-scene="1"] .is-button { left: 7%; top: 74%; width: 19%; height: 10%; }
/* Scene 2: the photo small and round at the top left, the title large in
   the middle, the button at the bottom center. */
.ds-morph-stage[data-scene="2"] .is-photo { left: 7%; top: 12%; width: 14cqi; height: 14cqi; border-radius: 50%; }
.ds-morph-stage[data-scene="2"] .is-title { left: 50%; top: 42%; font-size: 9.4cqi; transform: translateX(-50%); }
.ds-morph-stage[data-scene="2"] .is-button { left: 40.5%; top: 76%; width: 19%; height: 10%; }
.ds-morph-obj.is-title { transition-property: left, top, width, height, border-radius, font-size, opacity, transform; transition-duration: 0.9s, 0.9s, 0.9s, 0.9s, 0.9s, 0.9s, 0.3s, 0.9s; transition-timing-function: var(--ds-ease-move), var(--ds-ease-move), var(--ds-ease-move), var(--ds-ease-move), var(--ds-ease-move), var(--ds-ease-move), var(--mt-ease), var(--ds-ease-move); }
/* The renamed title: in scene 2 the title is another object. Each title
   then keeps to its own scene and only fades: the first stays where scene
   1 puts it, the second where scene 2 does. */
.ds-morph-obj.is-renamed { opacity: 0; pointer-events: none; }
.ds-morph-stage[data-scene] .ds-morph-obj.is-renamed { left: 50%; top: 42%; font-size: 9.4cqi; transform: translateX(-50%); }
.ds-morph-stage.is-renaming[data-scene="2"] .ds-morph-obj.is-renamed { opacity: 1; transition-delay: 0.18s; }
.ds-morph-stage.is-renaming .ds-morph-obj.is-title:not(.is-renamed) { left: 7%; top: 14%; font-size: 6.4cqi; transform: none; }
.ds-morph-stage.is-renaming[data-scene="2"] .ds-morph-obj.is-title:not(.is-renamed) { opacity: 0; }
/* A rename while scene 2 shows: the titles change in place, no flight.
   Renaming, the old title fades and only then moves away, unseen;
   un-renaming, it moves back unseen and then fades in. */
.ds-morph-stage.is-swap-out .ds-morph-obj.is-title { transition: opacity 0.3s var(--mt-ease), left 0s 0.3s, top 0s 0.3s, font-size 0s 0.3s, transform 0s 0.3s; }
.ds-morph-stage.is-swap-in .ds-morph-obj.is-title { transition: opacity 0.3s var(--mt-ease), left 0s, top 0s, font-size 0s, transform 0s; }


/* =====================================================================
 * 08 · Writing — short, plain and warm
 * ===================================================================== */
.ds-traits-list { row-gap: 40px; }
.ds-voice-trait { grid-column: span 4; padding-top: 22px; border-top: 1px solid var(--mt-hair-2); }
.ds-voice-num { display: block; font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500; color: var(--mt-ink-3); }
.ds-voice-title { margin-top: clamp(28px, 3.4vw, 48px); font-family: var(--global-font-title); font-size: var(--ds-title); font-weight: 700; line-height: 1.2; letter-spacing: 0; }
.ds-voice-body { margin-top: 12px; color: var(--mt-ink-2); text-wrap: pretty; }
.ds-tone { align-items: start; row-gap: 20px; margin-top: clamp(96px, 11vw, 160px); }
.ds-tone-label { grid-column: 1 / span 4; margin-top: 4px; }
.ds-tone-demo { grid-column: 5 / -1; }
.ds-tone-stage { display: grid; align-items: center; min-height: clamp(220px, 18vw, 260px); padding: clamp(48px, 5.4vw, 76px) clamp(28px, 5vw, 72px) clamp(60px, 6.4vw, 92px); }
.ds-tone-mark { position: absolute; left: clamp(24px, 3.2vw, 44px); top: clamp(22px, 2.6vw, 34px); width: clamp(34px, 3.4vw, 48px); height: auto; fill: rgba(var(--mt-ink-rgb), 0.12); pointer-events: none; }
/* The three lines share one cell, as tall as the longest; each stands in
   its middle, so a short line doesn't hang at the top. */
.ds-tone-card { position: relative; display: grid; }
.ds-tone-line { grid-area: 1 / 1; align-self: center; max-width: 18em; font-size: var(--ds-title); font-weight: 700; line-height: 1.3; letter-spacing: -0.028em; opacity: 0; text-wrap: balance; transition: opacity 0.18s var(--mt-ease); }
.ds-tone-line.is-on { opacity: 1; }
.ds-tone-line[hidden] { display: block; visibility: hidden; }

.ds-pairs { display: grid; gap: var(--ds-gutter); margin-top: clamp(80px, 9vw, 128px); }
.ds-pair { row-gap: var(--ds-gutter); }
.ds-say { grid-column: span 6; display: grid; align-content: space-between; gap: 28px; min-height: clamp(168px, 15vw, 210px); margin: 0; padding: clamp(22px, 2.6vw, 34px); border-radius: 28px; }
.ds-say.is-do { background: var(--mt-bg-raise); box-shadow: inset 0 0 0 1px var(--mt-hair); }
.ds-say.is-dont { border: 1px dashed var(--mt-hair-2); }
.ds-say-verdict { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; line-height: 1; color: var(--mt-ink); }
.ds-say-verdict svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ds-say.is-do .ds-say-verdict svg { background: var(--mt-ink); color: var(--mt-bg); }
.ds-say.is-dont .ds-say-verdict { color: var(--mt-ink-3); }
.ds-say.is-dont .ds-say-verdict svg { box-shadow: inset 0 0 0 1.5px currentColor; }
.ds-say-line { margin: 0; }
.ds-say-line p { font-size: var(--ds-card-title); font-weight: 600; line-height: 1.45; letter-spacing: -0.018em; text-wrap: pretty; }
.ds-say.is-dont .ds-say-line p { color: var(--mt-ink-3); }


/* =====================================================================
 * 09 · Accessibility — comfortable for everyone
 * ===================================================================== */
.ds-a11y { row-gap: clamp(48px, 5vw, 72px); }
.ds-a11y-card { grid-column: span 6; display: grid; align-content: start; min-width: 0; }
/* Each example on a 2 : 1 stage (the stage's own corners): room for its
   drawing and its controls, and little more. Small type on the stage
   takes the second ink, which keeps 4.5 : 1 on the raised paper. */
.ds-a11y-stage { display: grid; place-items: center; align-content: center; gap: 18px; aspect-ratio: 2 / 1; padding: 24px; }
.ds-a11y-title { margin-top: 26px; font-family: var(--global-font-title); font-size: var(--ds-card-title); font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.ds-a11y-body { max-width: 30em; margin-top: 8px; color: var(--mt-ink-2); text-wrap: pretty; }
/* Contrast, measured live. */
.ds-contrast-sample { --sample: var(--mt-ink); font-size: var(--ds-title); font-weight: 700; line-height: 1.2; letter-spacing: -0.028em; color: var(--sample); }
.ds-contrast-read { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; }
.ds-contrast-ratio { font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--mt-ink); }
.ds-contrast-min { font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--mt-ink-2); }
.ds-contrast-verdict { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px 0 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--mt-hair-2); font-size: 12px; font-weight: 600; color: var(--mt-ink); }
.ds-contrast-verdict svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ds-contrast-verdict.is-pass svg.is-fail,
.ds-contrast-verdict.is-fail svg.is-pass { display: none; }
/* Below the line the pill goes dashed (an outline, so nothing shifts). */
.ds-contrast-verdict.is-fail { box-shadow: none; outline: 1px dashed var(--mt-hair-2); outline-offset: -1px; color: var(--mt-ink-2); }
.ds-contrast-range { width: min(72%, 280px); }
.ds-contrast-range[hidden] { display: none; }
/* The touch area, drawn at twice its size. */
.ds-target { position: relative; display: grid; place-items: center; width: 88px; height: 88px; }
.ds-target-area { position: absolute; inset: 0; border: 1px dashed var(--mt-sel); background: rgba(var(--ds-sel-rgb), 0.07); }
.ds-target-tag { position: absolute; left: -1px; bottom: calc(100% + 8px); font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: 11px; }
.ds-target-btn { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--mt-ink); color: var(--mt-bg); box-shadow: 0 6px 14px -8px rgba(18, 19, 24, 0.6); }
.ds-target-btn svg { width: 20px; height: 20px; margin-left: 2px; fill: currentColor; }
.ds-target-icon-tag { position: absolute; right: -36px; bottom: -4px; font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--mt-ink-2); }
.ds-target-icon-tag::before { content: ''; position: absolute; right: calc(100% + 4px); top: 50%; width: 22px; height: 1px; background: var(--mt-hair-2); }
/* The drawing is enlarged; the stage says so, as the editor shows its zoom. */
.ds-zoom { position: absolute; right: 16px; bottom: 14px; padding: 3px 7px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--mt-hair-2); font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: 11px; line-height: 1.2; color: var(--mt-ink-2); }
/* Focus: three buttons to Tab through. */
.ds-focus-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ds-focus-try { font-size: 13px; line-height: 1.4; color: var(--mt-ink-2); text-align: center; }
/* Reduced motion, previewed. */
.ds-calm-track { position: relative; width: min(80%, 420px); height: 40px; }
.ds-calm-track::before { content: ''; position: absolute; left: 12px; right: 12px; top: 50%; height: 1px; background: var(--mt-hair-2); }
.ds-calm-square { position: absolute; left: 12px; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 8px; background: var(--mt-ink); }
.ds-calm-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.ds-calm-controls[hidden] { display: none; }


/* =====================================================================
 * Close — the invitation
 *
 * Centered, as main closes, and lit as main's close is: under the words,
 * four still pools of the brand colors rising from the stage floor
 * (main's footlights, in the brand's order), as bright as the page's
 * glow (--mt-glow-opacity) allows. Main's wide-screen pools stand under
 * a row of works; here nothing stands on them, so they keep main's low,
 * wide, overlapping set (its narrow screens') and merge into one lit
 * floor below the words, never four spots. The section clips them at
 * its foot, where the floor ends, as main's does.
 * ===================================================================== */
.ds-invite { --ds-invite-floor: clamp(140px, 20vh, 220px); overflow: clip; padding-block: clamp(120px, 17vh, 200px) var(--ds-invite-floor); text-align: center; }
/* The pools' tops stand at 44% of the foot's height. On a 1440 × 900
   screen that is a little past the fine print (1.14 times the room under
   it); a shorter screen leaves less room there under as tall a close, so
   the foot keeps to 2.6 times that room and the fine print never stands
   deeper in the light than it does there. */
.ds-invite-foot {
    position: absolute;
    inset: auto 0 0;
    z-index: -1;
    height: min(60%, var(--ds-invite-floor) * 2.6);
    opacity: calc(var(--mt-glow-opacity) * 1.5);
    pointer-events: none;
}
.ds-invite-foot i {
    position: absolute;
    bottom: -40%;
    width: 56%;
    height: 84%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--ds-foot), 0.3), rgba(var(--ds-foot), 0.08) 55%, transparent);
}
.ds-invite-foot i:nth-child(1) { left: -10%; --ds-foot: var(--brand-mulberry-rgb); }
.ds-invite-foot i:nth-child(2) { left: 13%; --ds-foot: var(--brand-brass-rgb); }
.ds-invite-foot i:nth-child(3) { left: 36%; --ds-foot: var(--brand-iris-rgb); }
.ds-invite-foot i:nth-child(4) { left: 56%; --ds-foot: var(--brand-lichen-rgb); }
.ds-invite-mark .auth-mark { width: 26px; margin: 0 auto 28px; color: var(--mt-ink); }
.ds-invite-mark .auth-mark svg { display: block; width: 100%; height: auto; aspect-ratio: 603 / 958; }
.ds-invite-inner { display: flex; flex-direction: column; align-items: center; padding-inline: var(--section-pad-x); }
.ds-invite-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 36px; }
.ds-invite-actions .mt-link { display: inline-flex; gap: 6px; }
/* The shared button at its own 40px; a label too long for a narrow
   phone's line (or a reader's wide spacing) wraps in balance, and the
   pill grows to hold it. The glyph runs with the words (a block, as the
   column's item is), so it stays beside the first line, not at the
   pill's edge. Centred as the shared button centres them: a line is
   1em + 6px, the padding takes the rest of the 40px (less the 1px
   border), and the glyph stands in the middle of its line (whatever
   line height a reader sets). */
.ds-invite-present { display: block; height: auto; min-height: 40px; margin-top: 16px; padding-block: 9px; padding-block: calc((40px - 1lh) / 2 - 1px); line-height: calc(1em + 6px); text-align: center; text-wrap: balance; }
.ds-invite-present svg { display: inline-block; margin: 4px 8px 0 0; margin-top: calc((1lh - 12px) / 2); vertical-align: top; }
.ds-invite-fine { margin-top: 26px; }
.ds-invite-version { margin-top: 2px; font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: 0.02em; }


/* =====================================================================
 * Present — the page as an SSHOW show
 *
 * Full screen, a night stage in both themes, in the grammar of SSHOW's
 * posters: the count at the top right beside the close key, the chapter
 * as eyebrow, one big line, the scene line at the foot with a stop point
 * per slide. No lockup: the mark appears once, on the logo's slide, with
 * its clear space. Slides cut like scenes: the incoming one settles in
 * on top, the one under it stays until it has landed (is-under). Closed
 * it is hidden and out of reach; open, the page under it stands still
 * (html.ds-locked; `clip` keeps the scroll position). Low screens (and
 * 400% zoom) get shorter slides that keep clear of the bars.
 * ===================================================================== */
html.ds-locked { overflow: clip; }
.ds-present {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: block;
    overflow: hidden;
    background: var(--ds-night);
    color: var(--mt-ink);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s var(--mt-ease), visibility 0s linear 0.5s;
}
.ds-present[hidden] { display: none; }
.ds-present.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.ds-present-top { position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; justify-content: flex-end; align-items: center; gap: 18px; padding: clamp(14px, 2.6vh, 28px) clamp(16px, 4vw, 56px) 0; }
.ds-present-count { font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--mt-ink-2); }
.ds-present-key {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(var(--mt-ink-rgb), 0.18);
    color: var(--mt-ink);
    transition: background-color 0.18s var(--mt-ease), box-shadow 0.18s var(--mt-ease);
}
.ds-present-key:focus-visible { border-radius: 999px; }
.ds-present-key svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* A sideways swipe is the show's own: the browser keeps only the
   vertical scroll and pinch zoom here, so a finger's swipe reaches
   design.js instead of being taken (and cancelled) as a pan. */
.ds-present-stage { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y pinch-zoom; }
.ds-slide {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    align-content: center;
    padding: clamp(84px, 14vh, 140px) clamp(24px, 9vw, 160px) clamp(104px, 16vh, 160px);
    overflow: hidden;
    background: var(--ds-night);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    touch-action: pan-y pinch-zoom;
    transform: scale(1.035);
    transition: opacity 0.9s var(--mt-ease), transform 1.17s var(--mt-ease-spring), visibility 0s linear 1.17s;
}
.ds-slide.is-in { z-index: 2; opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ds-slide.is-under { z-index: 1; opacity: 1; visibility: visible; transform: none; transition: none; }
/* The logo's slide only fades: the mark never scales. */
.ds-slide.is-logo { transform: none; }
.ds-present.is-instant .ds-slide { transition: none; }
/* A slide that runs past its box (400% zoom) scrolls, and the keyboard
   can reach it there: its ring is drawn inside, clear of the screen's
   edges. */
.ds-slide:focus-visible { outline-offset: -4px; }
.ds-slide-body { position: relative; max-width: 1200px; }
.ds-slide-eyebrow { font-family: var(--ds-mono); font-variant-numeric: tabular-nums; font-size: clamp(13px, 1.1vw, 15px); font-weight: 500; line-height: 1.2; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mt-ink-3); }
/* A principle's number, very large and very quiet, behind its line (the
   chapter numerals' weight and whisper). */
.ds-slide-num {
    position: absolute;
    right: clamp(16px, 5vw, 96px);
    bottom: clamp(72px, 12vh, 132px);
    font-size: clamp(160px, 34vh, 380px);
    font-weight: 800;
    line-height: 0.8;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
    color: rgba(var(--mt-ink-rgb), 0.06);
    pointer-events: none;
}
.ds-slide-title {
    margin-top: clamp(18px, 3vh, 32px);
    font-family: var(--global-font-title);
    font-size: clamp(38px, 6.6vw, 8vw);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 0;
    color: var(--mt-ink);
    text-wrap: balance;
}
.ds-slide-second { max-width: 26em; margin-top: clamp(20px, 3.4vh, 36px); font-size: clamp(18px, 2.2vw, 30px); line-height: 1.45; letter-spacing: -0.02em; color: var(--mt-ink-2); text-wrap: balance; }
.ds-slide.is-principle .ds-slide-title { max-width: 14em; font-size: clamp(34px, 5.4vw, 6.4vw); line-height: 1.14; }
/* The mark keeps the logo chapter's clear space, 30% of its height, on
   every side: above, clear of the eyebrow; below, clear of the line; at
   the sides, the slide's own padding. More where the slide has room. */
.ds-slide-mark {
    --mark: 60px;
    display: block;
    width: auto;
    height: var(--mark);
    aspect-ratio: 603 / 958;
    margin: max(var(--mark) * 0.3, clamp(18px, 3vh, 32px)) 0 max(var(--mark) * 0.3, clamp(24px, 4vh, 40px));
    color: var(--mt-ink);
}
/* The name never breaks; it sizes to the screen's width and its height,
   with room left for a reader's wider letter spacing. */
.ds-slide-name { font-size: min(8vw, 16vh, 148px); font-weight: 700; line-height: 1.02; letter-spacing: 0; white-space: nowrap; }
.ds-slide-tagline { margin-top: clamp(16px, 2.6vh, 28px); font-size: clamp(16px, 1.8vw, 22px); line-height: 1.4; letter-spacing: normal; color: var(--mt-ink-2); }
.ds-slide-tagline + .ds-slide-tagline { margin-top: 6px; }
/* The color slide: the four colors as the chapter and the hero's color
   tile state them, flat squares in the brand's order with the gradient
   they make as a thin line under them. No blur and no glow; the squares
   grow a little with the screen. */
.ds-slide-lights { --sq: clamp(20px, 1.8vw, 28px); display: grid; grid-template-columns: repeat(4, var(--sq)); gap: calc(var(--sq) * 0.5); width: max-content; margin-top: clamp(28px, 5vh, 48px); }
.ds-slide-lights i { width: var(--sq); height: var(--sq); border-radius: calc(var(--sq) * 0.25); background: rgb(var(--hue)); }
.ds-slide-lights::after { content: ''; grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--brand-iridescent-gradient); }
.ds-slide.is-end { justify-items: center; text-align: center; }
.ds-slide.is-end .ds-slide-title { margin-top: 0; }
.ds-slide-actions { display: flex; justify-content: center; margin-top: clamp(28px, 5vh, 48px); pointer-events: auto; }
/* Either half of the stage turns a slide for a pointer. */
.ds-present-zone { position: absolute; top: 0; bottom: 0; z-index: 0; width: 50%; }
.ds-present-zone.is-prev { left: 0; cursor: w-resize; }
.ds-present-zone.is-next { right: 0; cursor: e-resize; }
.ds-present-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 2vw, 28px); padding: 12px clamp(16px, 4vw, 56px) clamp(16px, 3.6vh, 36px); }
/* The scene line: a hairline with a stop point per slide, passed ones
   filled softly, the current one solid. */
.ds-present-line { position: relative; display: flex; justify-content: space-between; align-items: center; height: 20px; margin: 0 6px; }
.ds-present-line::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(var(--mt-ink-rgb), 0.2); }
.ds-present-line li { position: relative; width: 10px; height: 10px; }
.ds-present-line li i { position: absolute; inset: 0; background: var(--ds-night); box-shadow: inset 0 0 0 1.5px rgba(var(--mt-ink-rgb), 0.46); transform: rotate(45deg); transition: background-color 0.4s var(--mt-ease), box-shadow 0.4s var(--mt-ease), transform 0.5s var(--mt-ease-spring); }
.ds-present-line li.is-done i { background: rgba(var(--mt-ink-rgb), 0.46); box-shadow: none; }
.ds-present-line li.is-now i { background: var(--mt-ink); box-shadow: none; transform: rotate(45deg) scale(1.35); }
.ds-present-hint { position: absolute; left: 50%; bottom: clamp(76px, 12vh, 104px); z-index: 5; width: max-content; max-width: calc(100% - 32px); font-size: 13px; line-height: 1.5; color: var(--mt-ink-3); text-align: center; text-wrap: balance; opacity: 0; transform: translateX(-50%); pointer-events: none; transition: opacity 0.6s var(--mt-ease); }
.ds-present.is-hinting .ds-present-hint { opacity: 1; }

/* Low landscape (phones turned, short windows): shorter slides, the line
   sized by the height too. The slide keeps between the top bar (58px)
   and the keys, its words clear of the hint below; one taller than that
   (a reader's wide spacing) starts at the top and scrolls rather than run
   under the bars. Where its words run past the box it takes the pointer
   (design.js marks it), so a finger or a wheel scrolls it as the keys
   do, and a sideways swipe still turns it (the slide pans only up and
   down). Either half still turns every other slide at a tap. */
@media (max-height: 540px) and (orientation: landscape) {
    .ds-slide { inset: 58px 0 calc(max(16px, 3.6vh) + 44px); padding-block: 12px 40px; overflow-y: auto; overscroll-behavior: contain; align-content: safe center; }
    .ds-slide.is-in.is-scrolls { pointer-events: auto; }
    .ds-slide-title:not(.ds-slide-name),
    .ds-slide.is-principle .ds-slide-title { font-size: clamp(22px, min(6vw, 10vh), 56px); }
    .ds-slide-second { font-size: clamp(15px, min(2.2vw, 4.4vh), 22px); }
}
/* Very low (400% zoom): the slide keeps between the bars and scrolls if
   it still has to. The halves give way to the scroll; the keys, the
   arrow keys and a swipe still turn the slides. */
@media (max-height: 340px) {
    .ds-slide { inset: 58px 0 60px; padding-block: 8px; overflow-y: auto; overscroll-behavior: contain; align-content: safe center; }
    .ds-slide.is-in { pointer-events: auto; }
    .ds-slide-num,
    .ds-present-hint { display: none; }
    .ds-slide-mark { --mark: 40px; }
    .ds-slide-title { margin-top: 12px; }
    .ds-slide-second,
    .ds-slide-tagline { margin-top: 10px; }
}


/* =====================================================================
 * Design specs (inspect mode)
 *
 * With .is-inspect on #mt-page, every element marked data-ds-spec shows
 * the editor's selection (a 1px blue outline) and a spec tag above its
 * top-left corner; design.js writes the tag text (data-ds-tag) from the
 * live computed style. A section shows its top padding as a blue measure
 * in the gutter. The page's 12 columns tint in faintly. Tags are
 * pseudo-elements: the text stays selectable and the tags move with
 * what they label. They are filled in the deeper blue in both themes
 * (white 11px type at 6.3 : 1); outlines keep the selection blue.
 * ===================================================================== */
:where(#mt-page [data-ds-spec]) { position: relative; }
:where(#mt-page.is-inspect) [data-ds-spec]:not([data-ds-spec="section"]):not(:focus-visible) {
    outline: 1px solid var(--mt-sel);
    outline-offset: 4px;
    animation: ds-outline-in 0.18s var(--mt-ease) both;
}
#mt-page.is-inspect [data-ds-spec]::after {
    content: attr(data-ds-tag);
    position: absolute;
    z-index: 30;
    left: -5px;
    bottom: calc(100% + 7px);
    max-width: calc(100vw - 40px);
    padding: 3px 6px;
    border-radius: 4px;
    background: var(--ds-tag);
    color: var(--ds-white);
    font: 500 11px/1.2 var(--ds-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    text-transform: none;
    text-align: left;
    text-indent: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    animation: ds-fade-in 0.18s var(--mt-ease) both;
}
/* A section: its top padding, measured in the gutter. */
#mt-page.is-inspect [data-ds-spec="section"]::before {
    content: '';
    position: absolute;
    z-index: 30;
    top: 0;
    left: calc(max(var(--section-pad-x), (100% - var(--content-wide)) / 2) - 26px);
    width: 9px;
    height: var(--ds-pad, var(--section-pad-y));
    border-block: 1px solid var(--mt-sel);
    background: linear-gradient(var(--mt-sel), var(--mt-sel)) 50% 0 / 1px 100% no-repeat;
    pointer-events: none;
    animation: ds-fade-in 0.18s var(--mt-ease) both;
}
#mt-page.is-inspect [data-ds-spec="section"]::after {
    left: calc(max(var(--section-pad-x), (100% - var(--content-wide)) / 2) - 14px);
    top: calc(var(--ds-pad, var(--section-pad-y)) / 2);
    bottom: auto;
    transform: translateY(-50%);
}
/* The hero's padding runs under the fixed header; its tag stands clear of it. */
#mt-page.is-inspect .ds-hero[data-ds-spec="section"]::after { top: max(calc(var(--ds-pad, var(--section-pad-y)) / 2), calc(var(--header-height) + 16px)); }
@keyframes ds-outline-in { from { outline-color: transparent; } }
@keyframes ds-fade-in { from { opacity: 0; } }
/* Room for the tags, where the type sits close. */
#mt-page.is-inspect .ds-sheet-row { gap: 44px 44px; padding-top: 24px; }
#mt-page.is-inspect .ds-hero-sub { margin-top: 44px; }
#mt-page.is-inspect .ds-head-lede { margin-top: 40px; }
/* A tile's tag stands above it: room under the bento's bar, and between
   rows where the gutter is narrower than a tag. */
#mt-page.is-inspect .ds-bento-bar { margin-bottom: 40px; }
#mt-page.is-inspect .ds-bento { row-gap: max(var(--ds-gutter), 32px); }
/* The page's columns. */
.ds-columns { position: fixed; inset: 0; z-index: 35; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.18s var(--mt-ease), visibility 0s linear 0.18s; }
.ds-columns-wrap {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--ds-gutter);
    width: 100%;
    max-width: calc(var(--content-wide) + var(--section-pad-x) * 2);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--section-pad-x);
}
.ds-columns i { background: rgba(var(--ds-sel-rgb), 0.035); box-shadow: inset 1px 0 rgba(var(--ds-sel-rgb), 0.1), inset -1px 0 rgba(var(--ds-sel-rgb), 0.1); }
#mt-page.is-inspect .ds-columns { opacity: 1; visibility: visible; transition-delay: 0s; }


/* =====================================================================
 * Islands — parts that keep the night or the lit stage whatever the theme
 *
 * They re-declare the stage's values (as main's player does), so the
 * shared type, bezels, buttons and focus ring inside them come out in
 * that light. Hairlines are re-declared too: the stage computes them from
 * its own ink.
 * ===================================================================== */
#mt-page :is(.ds-present, .ds-trailer, .ds-parity-side.is-dark .ds-parity-stage, .ds-frames-stage[data-tone="dark"]) {
    --mt-bg: var(--ds-night);
    --mt-bg-raise: var(--ds-night-raise);
    --mt-ink: var(--ds-night-ink);
    --mt-ink-rgb: var(--ds-night-ink-rgb);
    --mt-ink-2: var(--ds-night-ink-2);
    --mt-ink-3: var(--ds-night-ink-3);
    --mt-hair: rgba(var(--ds-night-ink-rgb), 0.09);
    --mt-hair-2: rgba(var(--ds-night-ink-rgb), 0.2);
    --mt-bezel: var(--ds-night-bezel);
    --mt-bezel-line: rgba(255, 255, 255, 0.07);
    --mt-work-shadow: 0 34px 80px -34px rgba(0, 0, 0, 0.85);
    --mt-glow-opacity: 0.55;
    --mt-sel: #3B7DE0;
    --ds-dot-a: 0.06;
    --ds-bar: var(--ds-night-bar);
    --global-text-color: var(--ds-night-ink);
    --global-text-color-rgb: var(--ds-night-ink-rgb);
    --global-body-background: var(--ds-night);
    --global-button-background-color: var(--ds-night-ink);
    --global-button-text-color: var(--ds-night);
    --state-selected-bg: rgba(255, 255, 255, 0.08);
    --focus-outline-color: rgba(255, 255, 255, 0.6);
}
#mt-page :is(.ds-parity-side.is-light .ds-parity-stage, .ds-frames-stage[data-tone="light"]) {
    --mt-bg: var(--ds-lit);
    --mt-bg-raise: var(--ds-lit-raise);
    --mt-ink: var(--ds-lit-ink);
    --mt-ink-rgb: var(--ds-lit-ink-rgb);
    --mt-ink-2: var(--ds-lit-ink-2);
    --mt-ink-3: var(--ds-lit-ink-3);
    --mt-hair: rgba(var(--ds-lit-ink-rgb), 0.09);
    --mt-hair-2: rgba(var(--ds-lit-ink-rgb), 0.22);
    --mt-bezel: var(--ds-lit-bezel);
    --mt-bezel-line: rgba(0, 0, 0, 0.06);
    --mt-work-shadow: 0 40px 70px -36px rgba(22, 26, 44, 0.45), 0 14px 26px -16px rgba(22, 26, 44, 0.22);
    --mt-glow-opacity: 0.26;
    --mt-sel: #185CC2;
    --ds-dot-a: 0.07;
    --global-text-color: var(--ds-lit-ink);
    --global-text-color-rgb: var(--ds-lit-ink-rgb);
    --global-body-background: var(--ds-lit);
    --focus-outline-color: rgba(0, 0, 0, 0.55);
}
/* The frames' room: the night, or the lit stage's raise. (The light/dark
   pair's stages keep the raise each island gives them, so on either side
   the card stands on its own light's raise and only the values change.) */
.ds-frames-stage[data-tone="dark"] { background-color: var(--ds-night); }
.ds-frames-stage[data-tone="light"] { background-color: var(--ds-lit-raise); }
/* Raised paper, in either light: the stages, tiles, cards and floating
   bars sit a step off their page, where the third ink falls under
   4.5 : 1, so small type on them takes the second ink, the shared
   controls' muted ink included (an unchosen option on its tinted track).
   It comes after the islands, which re-declare the inks. The duration
   board's sample keeps the third: it is the tint its color beat shows. */
#mt-page.ds-page :is(.ds-stage, .ds-tile, .ds-curve, .ds-rhythm-line, .ds-say.is-do, .ds-trait, .ds-toolbar, .ds-panel) {
    --mt-ink-3: var(--mt-ink-2);
    --global-text-muted: var(--mt-ink-2);
}


/* ---------- Pointer devices: hover answers only where there is a hover ---------- */
@media (hover: hover) {
    .ds-rail-link:hover,
    .ds-rail-tool:hover { color: var(--mt-ink); }
    /* Shown, the name takes the pointer (and its bridge the gap), so it
       stays while the pointer rests on it. */
    .ds-rail-link:hover .ds-rail-name,
    .ds-rail-tool:hover .ds-rail-name { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
    .ds-rail-link:hover .ds-rail-tick { width: 16px; opacity: 1; }
    .ds-rail-tool:not([aria-pressed="true"]):hover { background: var(--state-hover-bg); }
    .ds-inspect:not([aria-pressed="true"]):hover { background: var(--state-hover-bg); box-shadow: inset 0 0 0 1px rgba(var(--mt-ink-rgb), 0.32); }
    .ds-toggle:not([aria-pressed="true"]):hover { background: var(--state-hover-bg); color: var(--mt-ink); }
    /* 03 · Color: a swatch lifts off the paper with its small work
       shadow; a token's chip and hex take the hover tint. */
    .ds-swatch:not(:disabled):hover .ds-swatch-field { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--mt-hair), var(--ds-swatch-lift); }
    .ds-token:not(:disabled):hover { background: var(--state-hover-bg); }
    .ds-ramp-row:hover .ds-ramp-select { opacity: 1; }
    .ds-beat:not(.is-playing):hover { box-shadow: inset 0 0 0 1px rgba(var(--mt-ink-rgb), 0.4); }
    .ds-present-key:hover { background: rgba(var(--mt-ink-rgb), 0.08); }
}
/* The tiles answer a pointer and a keyboard alike. */
@media (hover: hover) {
    .ds-tile:hover { box-shadow: inset 0 0 0 1px var(--mt-hair-2), var(--ds-lift); }
    .ds-tile:not(.is-logo):hover { transform: translateY(-2px); }
    .ds-tile:hover .ds-tile-arrow { stroke: var(--mt-ink); transform: translateY(2px); }
    .ds-tile.is-logo:hover .ds-c-space { opacity: 1; }
    .ds-tile.is-logo:hover :is(.ds-c-box, .ds-c-arc, .ds-c-flow) { stroke-dashoffset: 0; }
    .ds-tile.is-logo:hover .ds-c-arc:nth-of-type(1) { transition-delay: 0.08s; }
    .ds-tile.is-logo:hover .ds-c-arc:nth-of-type(2) { transition-delay: 0.16s; }
    /* The anchors first, then the line runs through them, top to bottom,
       on the page's longest beat. */
    .ds-tile.is-logo:hover .ds-c-flow { transition-duration: 1.3s; transition-delay: 0.3s; }
    .ds-tile.is-logo:hover :is(.ds-c-dot, .ds-c-tag) { opacity: 1; transition-delay: 0.24s; }
    .ds-tile.is-color:hover .ds-tc-name { opacity: 1; }
    .ds-tile.is-type:hover .ds-tt-select { opacity: 1; }
    .ds-tile.is-motion:hover .ds-tm-x { transform: translateX(100%); transition: transform 0.9s linear; }
    .ds-tile.is-motion:hover .ds-tm-y { transform: translateY(-100%); transition: transform 0.9s var(--mt-ease-spring); }
    .ds-tile.is-motion:hover .ds-tm-chip { transform: translateX(calc(100cqw - 28px)); transition: transform 0.9s var(--mt-ease-spring); }
    .ds-tile.is-components:hover .ds-tk-switch { background: var(--mt-ink); }
    .ds-tile.is-components:hover .ds-tk-switch > i { transform: translateX(14px); }
    .ds-tile.is-components:hover .ds-tk-btn.is-primary { animation: ds-press 0.3s var(--mt-ease-spring); }
    .ds-tile.is-layout:hover .ds-tl-m,
    .ds-tile.is-layout:hover .ds-tl::after { opacity: 1; }
    /* The hero's link down the page: its ↓ moves down, as the tiles' do. */
    .ds-hero-more:hover .mt-link-arrow { transform: translateY(3px); }
}
.ds-tile:focus-visible { box-shadow: inset 0 0 0 1px var(--mt-hair-2), var(--ds-lift); }
.ds-tile:focus-visible .ds-tile-arrow { stroke: var(--mt-ink); transform: translateY(2px); }
.ds-tile.is-logo:focus-visible .ds-c-space { opacity: 1; }
.ds-tile.is-logo:focus-visible :is(.ds-c-box, .ds-c-arc, .ds-c-flow) { stroke-dashoffset: 0; }
.ds-tile.is-logo:focus-visible :is(.ds-c-dot, .ds-c-tag) { opacity: 1; }
.ds-tile.is-color:focus-visible .ds-tc-name { opacity: 1; }
.ds-tile.is-type:focus-visible .ds-tt-select { opacity: 1; }
.ds-tile.is-motion:focus-visible .ds-tm-x { transform: translateX(100%); transition: transform 0.9s linear; }
.ds-tile.is-motion:focus-visible .ds-tm-y { transform: translateY(-100%); transition: transform 0.9s var(--mt-ease-spring); }
.ds-tile.is-motion:focus-visible .ds-tm-chip { transform: translateX(calc(100cqw - 28px)); transition: transform 0.9s var(--mt-ease-spring); }
.ds-tile.is-components:focus-visible .ds-tk-switch { background: var(--mt-ink); }
.ds-tile.is-components:focus-visible .ds-tk-switch > i { transform: translateX(14px); }
.ds-tile.is-layout:focus-visible .ds-tl-m,
.ds-tile.is-layout:focus-visible .ds-tl::after { opacity: 1; }
@keyframes ds-press { 30% { transform: scale(0.97); } }
/* Every example that answers the visitor lifts into the page's work
   shadow while the pointer is over it (a demo's toolbar and note
   included) or the keyboard is in it: the chapters' demos, the tone dial,
   and the accessibility examples that hold a control (the 44px target is
   a picture, so it stays down). Only the shadow moves: the stage stays
   put under the pointer, and its light stays where it is. */
@media (hover: hover) {
    :is(.ds-tools, .ds-cut, .ds-frames, .ds-markdemo, .ds-lay, .ds-morph-demo, .ds-tone-demo, .ds-a11y-card:has(button, input)):hover > .ds-stage,
    :is(.ds-sheet, .ds-curve, .ds-rhythm-board):hover { --ds-raise: var(--ds-stage-lift); }
}
:is(.ds-tools, .ds-cut, .ds-frames, .ds-markdemo, .ds-lay, .ds-morph-demo, .ds-tone-demo, .ds-a11y-card):has(:focus-visible) > .ds-stage,
:is(.ds-sheet, .ds-curve, .ds-rhythm-board):has(:focus-visible) { --ds-raise: var(--ds-stage-lift); }

/* ---------- Touch: 44px targets ----------
   Under a finger every control keeps the look it has for a pointer (the
   shared buttons and segmented control at their own sizes), and its
   target grows to at least 44 × 44: an invisible area centered on it,
   reaching past it only where it is smaller (a tap on it is a tap on the
   control, or on the label that holds it). */
@media (hover: none), (pointer: coarse) {
    #mt-page.ds-page :is(.di-btn, .di-segmented-option, .ds-toggle, .ds-inspect, .di-checkbox, .ds-sheet-input) { position: relative; }
    #mt-page.ds-page :is(.di-btn, .di-segmented-option, .ds-toggle, .ds-inspect, .ds-switch, .di-checkbox, .ds-sheet-input)::before {
        content: '';
        position: absolute;
        inset: min(0px, 50% - var(--ds-target) / 2);
    }
    /* The same area for a beat (its ::before is the hairline it hangs
       from). */
    .ds-beat::after { content: ''; position: absolute; inset: min(0px, 50% - var(--ds-target) / 2); }
    /* A slider and the tester's line (a text field) draw nothing around
       themselves, so their own boxes grow instead: by the same on every
       side, given back as margin, so they take no more room. The track,
       the words and the caret stay where they are, and so does the focus
       ring: its offset and its corners (the shared ring's 8px, the line's
       6px) take the growth back. */
    .ds-range-input {
        --ds-reach: calc((var(--ds-target) - 32px) / 2);
        box-sizing: content-box;
        padding: var(--ds-reach);
        margin: calc(var(--ds-reach) * -1);
    }
    .ds-range-input:focus-visible { outline-offset: calc(4px - var(--ds-reach)); border-radius: calc(8px + var(--ds-reach)); }
    .ds-tester-text {
        --ds-reach: max(0px, round(up, (var(--ds-target) - 1.15em) / 2, 1px));
        padding: var(--ds-reach);
        margin: calc(var(--ds-reach) * -1);
    }
    .ds-tester-text:focus-visible { outline-offset: calc(10px - var(--ds-reach)); border-radius: calc(6px + var(--ds-reach)); }
    /* A toolbar that wraps keeps its rows apart by the targets' overhang,
       so no target reaches into the next row's; so do a switch's options
       when they wrap or stand in a column. On phones, where they wrap, the
       phones' block gives a pointer the same 12px, so a phone looks the
       same under either. (The beats' rows are far enough apart already:
       their grid on phones leaves the 10px they need.) */
    .ds-toolbar { row-gap: 12px; }
    #mt-page.ds-page .ds-toolbar .di-segmented { row-gap: 12px; }
}
@media (hover: none) {
    .ds-ramp-select { display: none; }
}

/* ---------- Wide margins: the rail names the chapter in view ---------- */
@media (min-width: 1600px) {
    .ds-rail-link[aria-current="true"] .ds-rail-name { opacity: 1; transform: translate(0, -50%); background: none; box-shadow: none; color: var(--mt-ink-2); }
}

/* ---------- Under 1480px: the rail keeps to its ticks ----------
   Its numbers need the wide margin; the ticks alone (names on hover and
   focus) stay at least 20px clear of the content's edge. */
@media (max-width: 1479px) {
    .ds-rail { right: 10px; }
    .ds-rail-num { display: none; }
    .ds-rail-tool { width: 26px; height: 26px; }
    .ds-rail-tool svg { width: 14px; height: 14px; }
}

/* ---------- The rail folds away ----------
   Where the margin can no longer keep it clear of the content (1180px),
   on touch screens and on low landscape. The page scrolls as any page;
   the hero keeps the specs toggle and the closing chapter Present. */
@media (max-width: 1180px), (hover: none), (max-height: 540px) and (orientation: landscape) {
    .ds-rail { display: none; }
}

/* ---------- Narrower desktops (1180px) ---------- */
@media (max-width: 1180px) {
    .ds-sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-sheet-cell:is(.is-buttons, .is-controls) { grid-column: 1 / -1; }
    .ds-sheet-cell:nth-child(n) { border-top: 1px solid var(--mt-hair); border-left: 0; }
    .ds-sheet-cell:nth-child(1) { border-top: 0; }
    .ds-sheet-cell:is(:nth-child(3), :nth-child(6)) { border-left: 1px solid var(--mt-hair); }
    .ds-curve { grid-template-columns: minmax(0, 1fr); }
    .ds-curve-plot { grid-row: auto; width: min(100%, 200px); }
    /* 02 · Logo: three columns of meaning would be narrow here, so each
       word stands beside its sentence, baseline to baseline, a row on a
       hairline as the practices' rows are; on phones the word goes above
       it (the phones' block). */
    .ds-meaning-list { grid-template-columns: minmax(0, 1fr); }
    .ds-meaning-item { display: grid; grid-template-columns: minmax(7.5em, 0.34fr) minmax(0, 1fr); column-gap: var(--ds-gutter); align-items: baseline; padding: 18px 0 22px; }
    .ds-meaning-item:first-child { padding-top: 0; }
    .ds-meaning-item + .ds-meaning-item { border-top: 1px solid var(--mt-hair); }
    .ds-meaning-body { margin: 0; }
}

/* ---------- Two columns, narrower (881–1100px) ----------
   The heads stand closer above the demos and the gutters are narrower,
   while the light keeps its blur: the lights past a stage's top edge sit
   lower, and principle 04's keeps further in from its words, so none of
   them reaches a line of text. */
@media (min-width: 881px) and (max-width: 1100px) {
    .ds-lit:is(.ds-tools, .ds-frames) { --ds-lit-top: -40px; }
    .ds-markdemo.ds-lit { --ds-lit-top: -32px; }
    .ds-frames.ds-lit::before { right: 16%; }
}

/* ---------- Two columns at their narrowest (881–940px) ----------
   Beside its words or the ribbon, a demo is narrow enough here that the
   mark's and the frames' toolbars wrap to two rows: their separator would
   hang at the end of the first, so it gives way, and a wider gap keeps
   the two groups apart where they still share a row. */
@media (min-width: 881px) and (max-width: 940px) {
    :is(.ds-markdemo, .ds-frames) > .ds-toolbar { column-gap: 12px; }
    :is(.ds-markdemo, .ds-frames) .ds-toolbar-sep { display: none; }
}

/* ---------- Content fold (880px) ----------
   Chapter heads stack (the numeral above the words, smaller); two-column
   layouts take one column; the bento takes two columns. */
@media (max-width: 880px) {
    .ds-hero-figure { --ds-hero-r: 24px; }
    .ds-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(184px, 30vw, 228px); }
    .ds-bento-cell.is-logo { grid-column: 1 / -1; grid-row: span 2; }
    .ds-bento-cell.is-color { grid-column: 1 / -1; grid-row: auto; }
    .ds-bento-cell.is-type,
    .ds-bento-cell.is-layout,
    .ds-bento-cell.is-components,
    .ds-bento-cell.is-motion { grid-column: auto; grid-row: auto; }
    .ds-tile:is(.is-components, .is-motion) { display: flex; }
    .ds-tile:is(.is-components, .is-motion) .ds-tile-art { margin: 10px 0 12px; }

    .ds-numeral { grid-column: 1 / -1; margin-bottom: 20px; font-size: clamp(64px, 14vw, 104px); }
    .ds-head-words { grid-column: 1 / -1; }
    .ds-doc-label { grid-column: 1 / -1; margin-bottom: 18px; }
    .ds-practices,
    .ds-meaning-list,
    .ds-stats { grid-column: 1 / -1; }

    .ds-principle-words,
    .ds-principle > .ds-demo,
    .ds-principle.is-flip .ds-principle-words,
    .ds-principle.is-flip > .ds-demo { grid-column: 1 / -1; grid-row: auto; }
    .ds-logo-photo,
    .ds-markdemo,
    .ds-morph-words,
    .ds-morph-demo,
    .ds-tone-label,
    .ds-tone-demo { grid-column: 1 / -1; }
    /* Stacked, the photo takes a wider frame and the mark's stage a 4 : 3
       one under it, where a square would fill most of a tablet's screen;
       the slider's top follows the stage (design.js 9). The caption, with
       no note beside it now, keeps close to its photo, as /about's do. */
    .ds-logo-photo-frame { aspect-ratio: 16 / 10; }
    .ds-logo-photo figcaption { margin-top: 22px; }
    .ds-markdemo-stage { aspect-ratio: 4 / 3; }
    /* The examples' stages step down as /about's do: 28, 24, 20 (the logo
       photo with the stage it stands beside). */
    .ds-principle .ds-stage,
    .ds-markdemo-stage,
    .ds-logo-photo-frame { border-radius: 24px; }
    /* 03 · Color: the band steps down with the stages; the token table
       takes the columns under its label, as the documents do. */
    .ds-gradient-band { border-radius: 24px; }
    .ds-neutrals-label { grid-column: 1 / -1; margin-bottom: 18px; }
    .ds-tokens { grid-column: 1 / -1; }
    .ds-ramp-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .ds-ramp-meta { grid-auto-flow: column; justify-content: start; justify-items: start; align-items: baseline; gap: 12px; text-align: left; }
    .ds-trailer { border-radius: 24px; }
    .ds-traits { grid-template-columns: minmax(0, 1fr); }
    .ds-trait { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); column-gap: 24px; align-items: center; }
    .ds-trait-proof { grid-row: 1 / span 4; height: 100%; min-height: 120px; margin: 0; padding-right: 16px; border: 0; border-right: 1px solid var(--mt-hair); }
    .ds-curve-list { grid-template-columns: minmax(0, 1fr); }
    .ds-curve { grid-template-columns: minmax(120px, 0.4fr) minmax(0, 1fr); }
    .ds-curve-plot { grid-row: 1 / span 2; width: auto; }
    .ds-rhythm-board { grid-template-columns: minmax(0, 1fr); }
    .ds-rhythm-sample { justify-self: center; width: min(100%, 220px); aspect-ratio: 16 / 10; }
    .ds-voice-trait { grid-column: 1 / -1; }
    .ds-say { grid-column: 1 / -1; border-radius: 24px; }
    .ds-a11y-card { grid-column: 1 / -1; }
    .ds-a11y-stage { aspect-ratio: 5 / 2; }
    .ds-lay-stage,
    .ds-sheet,
    .ds-morph-stage-wrap,
    .ds-curve,
    .ds-rhythm-board { border-radius: 24px; }
    .ds-columns { display: none; }
    /* Every stage steps down as /about's do: 28, 24 here, 20 on phones. */
    .ds-stage { border-radius: 24px; }
    /* Stacked, the logo photo's caption stands right above the mark's
       stage: no room for light past its top edge without it falling
       behind words, so that zone goes dark (the principles' already have,
       01 · Principles). The chapters whose light pools under their demo
       keep it. */
    .ds-markdemo.ds-lit::before { content: none; }
}

/* ---------- Phones (640px) ---------- */
@media (max-width: 640px) {
    .ds-hero { padding-top: calc(var(--header-height) + 40px); }
    /* The key visual's phone crop (4:3) and /about's phone corners. */
    .ds-hero-figure { --ds-hero-r: 20px; aspect-ratio: 4 / 3; }
    .ds-bento-bar { flex-direction: column; align-items: flex-start; gap: 14px; }
    /* The switch first, what it does under it. */
    .ds-inspect-wrap { flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
    .ds-inspect-hint { text-align: left; }
    /* The link down keeps to the left edge, its padding hanging outside. */
    .ds-hero-foot { justify-content: flex-start; }
    .ds-hero-more { margin: 0 0 0 -6px; }
    /* Between the header and the eyebrow's own tag there is no room for
       the hero's padding tag; the chapters show the padding. */
    #mt-page.is-inspect .ds-hero[data-ds-spec="section"]::after { display: none; }
    .ds-practices,
    .ds-meaning-list { grid-template-columns: minmax(0, 1fr); }
    .ds-practice:nth-child(2) { padding-top: 18px; border-top: 1px solid var(--mt-hair); }
    /* The logo's three words, stacked: each word over its sentence, which
       takes the full measure the practices take; the rows keep their
       hairlines and rhythm (the narrower desktops' block). */
    .ds-meaning-item { display: block; }
    .ds-meaning-body { margin-top: 12px; }
    .ds-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
    .ds-stat:nth-child(3) { padding-left: 0; border-left: 0; }
    .ds-stat dd { font-size: 22px; white-space: normal; }
    .ds-principle-list { gap: 112px; }
    .ds-tools-stage,
    .ds-cut-stage,
    .ds-morph-stage-wrap { padding: 22px 14px 44px; }
    .ds-stage { border-radius: 20px; }
    /* A toolbar takes the screen's width. Where it wraps, its rows (and a
       switch's, below) stand 12px apart with a pointer too: the room the
       touch areas need (see the touch block), so a phone draws the same
       under a finger or a pointer. */
    .ds-toolbar { justify-self: stretch; max-width: none; margin-inline: 12px; row-gap: 12px; }
    .ds-toolbar-sep { display: none; }
    /* Principle 02's pair stands one above the other, far enough apart
       that the soft card's light (spilling less, and softer at the edge)
       fades out before the next side's name. */
    .ds-paint-pair { grid-template-columns: minmax(0, 1fr); row-gap: 64px; }
    .ds-paint-side { grid-template-columns: min(100%, 360px); }
    .ds-paint-light { bottom: -14%; filter: blur(28px); }
    .ds-frames-room { aspect-ratio: 4 / 3.4; }
    /* The four frames wrap as two pairs, never three and one: one row
       where they fit, else two rows of two in even columns. */
    #mt-page.ds-page .ds-toolbar .ds-frame-pair { display: flex; flex: 1 1 0; gap: inherit; }
    #mt-page.ds-page .ds-toolbar .ds-frame-pair > .di-segmented-option { flex: 1 1 0; }
    .ds-markdemo-stage { aspect-ratio: 4 / 4.6; }
    .ds-principle .ds-stage,
    .ds-markdemo-stage,
    .ds-logo-photo-frame { border-radius: 20px; }
    .ds-markdemo-size { left: 12px; right: 12px; top: 12px; }
    .ds-markdemo-size .ds-range { grid-template-columns: auto minmax(0, 1fr) auto; }
    /* 03 · Color: the swatches two by two; the band at the phones' 20;
       the token table's values closer (a smaller chip, a tighter step),
       so a hex keeps to one line beside its chip (under 420px it stands
       under it); the light and dark stages one above the other. */
    .ds-brand { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
    .ds-swatch-field { margin-bottom: 12px; }
    .ds-gradient-band { border-radius: 20px; }
    .ds-tokens thead td { width: 32%; }
    .ds-tokens tbody th { padding-right: 10px; font-size: 15px; }
    .ds-token { gap: 8px; margin-left: -6px; padding: 8px 8px 8px 6px; }
    .ds-token-chip { width: 24px; height: 24px; border-radius: 6px; }
    .ds-token-hex { font-size: 13px; letter-spacing: 0; }
    .ds-parity-side { grid-column: 1 / -1; }
    .ds-trailer { border-radius: 20px; }
    .ds-trait { grid-template-columns: minmax(0, 1fr); }
    .ds-trait-proof { grid-row: auto; height: 120px; margin-bottom: 14px; padding: 0; border: 0; border-bottom: 1px solid var(--mt-hair); }
    .ds-tester .ds-range { grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; }
    .ds-lay-stage,
    .ds-sheet,
    .ds-morph-stage-wrap,
    .ds-curve,
    .ds-rhythm-board { border-radius: 20px; }
    .ds-sheet-grid { grid-template-columns: minmax(0, 1fr); }
    .ds-sheet-cell:nth-child(n) { grid-column: 1 / -1; border-left: 0; }
    .ds-curve { grid-template-columns: minmax(92px, 0.38fr) minmax(0, 1fr); }
    /* The beats leave the line for a grid under it; the ◇ keep their times.
       Rows 10px apart, so their 44px touch areas meet without overlapping.
       A label longer than its cell (a reader's wider spacing) goes under
       its time inside the pill, and the pills of a row grow together. */
    .ds-rhythm-beats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; height: auto; margin: 22px 0 0; }
    .ds-rhythm-beats li { position: static; display: grid; }
    .ds-rhythm-beats li::before,
    .ds-beat::before { display: none; }
    .ds-beat,
    .ds-rhythm-beats li:nth-child(n + 3) .ds-beat { flex-wrap: wrap; align-content: center; gap: 0 8px; width: 100%; height: auto; min-height: 34px; padding: 8px 12px; line-height: 18px; white-space: normal; transform: none; }
    .ds-tone-stage { padding: 40px 22px 56px; }
    .ds-a11y-stage { aspect-ratio: auto; min-height: 220px; }
    /* Switches take the toolbar's width, as DI's block variant does, their
       options sharing it at their own 32px and on one line; a set too long
       for one row wraps to the next rather than squeeze its words, its rows
       12px apart as the toolbar's are. */
    #mt-page.ds-page .ds-toolbar .di-segmented { display: flex; flex-wrap: wrap; flex: 1 1 100%; row-gap: 12px; }
    #mt-page.ds-page .ds-toolbar .di-segmented-option { flex: 1 0 auto; }
    /* The tone dial's three moments stand one under another, each a full
       row at the control's own 32px, so none of them breaks over lines (a
       reader's wide spacing may take two), 12px apart as the switches'
       rows are. */
    #mt-page.ds-page .ds-tone-demo .ds-toolbar .di-segmented { flex-direction: column; }
    #mt-page.ds-page .ds-tone-demo .ds-toolbar .di-segmented-option { flex: none; width: 100%; height: auto; min-height: 32px; padding-block: 4px; white-space: normal; text-align: center; }
    .ds-say { border-radius: 20px; }
    .ds-invite-actions { flex-direction: column; gap: 4px; margin-top: 28px; }
    /* A phone's floor is narrow: the footlights lower and wider still, so
       they stay one soft band and never stand as four columns. */
    .ds-invite-foot { height: 44%; }
    .ds-invite-foot i { width: 80%; }
    .ds-invite-foot i:nth-child(1) { left: -34%; }
    .ds-invite-foot i:nth-child(2) { left: -6%; }
    .ds-invite-foot i:nth-child(3) { left: 22%; }
    .ds-invite-foot i:nth-child(4) { left: 50%; }
    .ds-slide { padding-inline: 24px; }
    .ds-present-foot { gap: 10px; }
}

/* ---------- Small phones (420px): the bento takes one column ----------
   Every tile, the logo's too, takes one row: its words on the left and
   its picture on the right, so the index under the key visual stays one
   short list, about a screen. The mark takes most of its picture's
   height, its construction's strokes scaled to match (its clear space,
   shown on focus, keeps inside the tile); the color tile's squares step
   down to 16px. */
@media (max-width: 420px) {
    .ds-bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 156px; }
    .ds-bento-cell.is-logo { grid-row: auto; }
    .ds-bento-cell:nth-child(n) { grid-column: 1 / -1; }
    .ds-bento .ds-tile {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        column-gap: 16px;
    }
    .ds-bento .ds-tile .ds-tile-top { grid-column: 1; grid-row: 1; }
    .ds-bento .ds-tile .ds-tile-words { grid-column: 1; grid-row: 3; }
    .ds-bento .ds-tile .ds-tile-art { grid-column: 2; grid-row: 1 / -1; margin: 22px 0 0; }
    .ds-tile.is-logo .ds-construct { --ds-k: 2.4; height: 74%; }
    .ds-tc { --ds-sq: 16px; }
    /* The beats take one column too: two pills side by side no longer
       hold a longer label on one line. */
    .ds-rhythm-beats { grid-template-columns: minmax(0, 1fr); }
    /* 03 · Color: each token stands as its chip over its value, so a hex
       keeps its cell whole even with a reader's wider letter spacing, and
       the row names take the room that frees (a longer English name
       hyphenates before it would break). */
    .ds-tokens thead td { width: 40%; }
    .ds-tokens tbody th { hyphens: auto; }
    .ds-token { flex-direction: column; align-items: flex-start; gap: 8px; margin-left: -8px; padding: 10px 10px 10px 8px; }
    .ds-token-chip { width: 28px; height: 28px; border-radius: 7px; }
}

/* ---------- Dark: the night stage ----------
   The marketing stage already swaps the page's values; these are the
   page's own: the canvas dots, the floating bar, the elevations, and the
   swatches that need a hairline on the night. */
@media (prefers-color-scheme: dark) {
    #mt-page.ds-page {
        --ds-dot-a: 0.06;
        --ds-sel-rgb: 59, 125, 224;
        --ds-off-a: 0.45;
        --ds-bar: var(--ds-night-bar);
        --ds-lift: 0 24px 48px -28px rgba(0, 0, 0, 0.7);
        --ds-float: 0 12px 30px -16px rgba(0, 0, 0, 0.6);
    }
    /* The color tile's neutrals: on the night raise, ink and night need
       an edge, and paper no longer does. */
    .ds-tc-base :is(.is-ink, .is-night) { box-shadow: inset 0 0 0 1px rgba(var(--mt-ink-rgb), 0.2); }
    .ds-tc-base .is-paper { box-shadow: none; }
    /* The logo tile's line lies on the night's light ink: the deeper blue. */
    .ds-construct { --ds-flow: var(--ds-tag); }
    /* The night panel rises off the night page (its raise, a firmer edge)
       and its trait cards sink back to the night; its small labels, now
       on a raised surface, take the second ink. The light/dark pair's
       dark stage, the night's raise in either theme, takes the firmer
       edge too. */
    .ds-trailer { background-color: var(--ds-night-raise); box-shadow: inset 0 0 0 1px var(--mt-hair-2); }
    .ds-trait { background-color: var(--ds-night); }
    .ds-trailer-kicker,
    .ds-trailer-meta { color: var(--mt-ink-2); }
    .ds-parity-side.is-dark .ds-parity-stage { --ds-edge: var(--mt-hair-2); }
    /* Principle 02's light: the night carries it further, so a smaller
       share of it. */
    .ds-paint-light { --ds-paint-k: 1; }
    /* A lifted swatch: the night's work shadow at a swatch's scale, so it
       reaches neither the neighbour across the gutter nor the name. */
    .ds-swatch { --ds-swatch-lift: 0 16px 30px -18px rgba(0, 0, 0, 0.7), 0 6px 12px -8px rgba(0, 0, 0, 0.4); }
    /* The night examples rise off the night page: its raise, a firmer edge
       (the edge alone, so the stage still lifts on hover). */
    .ds-frames-stage[data-tone="dark"] { --ds-edge: var(--mt-hair-2); background-color: var(--ds-night-raise); }
    .ds-markdemo-stage[data-surface="dark"] .ds-markdemo-view { --mt-bg-raise: var(--ds-night-raise); box-shadow: inset 0 0 0 1px var(--mt-hair-2); }
    .ds-lay-page { --mt-ink-3: var(--ds-night-ink-3); }
    .ds-morph-stage { background: var(--ds-night-raise); }
    .ds-morph-text { color: var(--ds-night-ink); }
    .ds-morph-btn { background: var(--ds-night-ink); color: var(--ds-night); }
    /* The night's glow is stronger (--mt-glow-opacity 0.55), so the
       chapters' light takes a smaller share of it and stays soft. */
    .ds-lit { --ds-lit-k: 0.45; }
    /* The ribbon has its own night shot (design.ejs), already low-key: no
       warmth or dimming on top of it. */
    .ds-logo-photo-frame img { filter: none; }
}

/* ---------- Reduced motion ----------
   marketing.css stops every animation and transition under #mt-page; the
   resting states above are the final ones (the manifesto at 300 and 800,
   the tiles in place, the numerals risen). */

/* ---------- Forced colors: Windows contrast themes ----------
   The system paints the page in its own few colors and drops shadows,
   tints and gradients, so every state drawn with them is redrawn here in
   system colors: borders mark the controls and the floating surfaces,
   Highlight marks what is chosen, pressed or selected (where the editor's
   blue stands elsewhere), and what the examples move keeps its ink. */
@media (forced-colors: active) {
    /* Surfaces keep an edge where their hairline was a shadow. */
    #mt-page.ds-page :is(.ds-stage, .ds-toolbar, .ds-panel, .ds-curve, .ds-rhythm-board, .ds-say.is-do, .ds-trailer, .ds-trait, .ds-card) { outline: 1px solid CanvasText; outline-offset: -1px; }
    /* The chapters' light is only atmosphere: the theme's plain ground
       takes its place (over the principles' own switch). */
    #mt-page.ds-page .ds-lit::before { content: none; }
    #mt-page.ds-page :is(.ds-tile, .ds-toast) { border: 1px solid CanvasText; }
    /* The color tile's squares, line and chips are samples of their
       colors, so they keep them, each with an edge. The key visual keeps
       its edge too (its shadow is gone). */
    #mt-page.ds-page :is(.ds-tc-stop, .ds-tc-line, .ds-tc-base i) { forced-color-adjust: none; outline: 1px solid CanvasText; }
    .ds-hero-figure { outline: 1px solid CanvasText; }
    /* The layout and components tiles' replicas are drawn in fills and
       shadows, which the system drops: their frames take an edge, their
       bars and knobs the text color, and the chosen segment (and the
       switch, once on) Highlight, as the real controls do. */
    #mt-page.ds-page :is(.ds-tl, .ds-tl-img, .ds-tk-btn, .ds-tk-switch, .ds-tk-seg) { outline: 1px solid CanvasText; outline-offset: -1px; }
    #mt-page.ds-page :is(.ds-tl-words i, .ds-tk-switch > i) { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
    #mt-page.ds-page .ds-tl-nav::before,
    #mt-page.ds-page .ds-tk-seg i::before { forced-color-adjust: none; background: CanvasText; }
    #mt-page.ds-page .ds-tl-nav::after { forced-color-adjust: none; background: repeating-linear-gradient(90deg, CanvasText 0 18%, transparent 18% 26%); }
    #mt-page.ds-page .ds-tk-seg i.is-on { forced-color-adjust: none; background: Highlight; box-shadow: none; }
    #mt-page.ds-page .ds-tk-seg i.is-on::before { background: HighlightText; }
    #mt-page.ds-page .ds-tile.is-components:is(:hover, :focus-visible) .ds-tk-switch { forced-color-adjust: none; background: Highlight; outline-color: Highlight; }
    #mt-page.ds-page .ds-tile.is-components:is(:hover, :focus-visible) .ds-tk-switch > i { background: HighlightText; }
    /* The logo's construction, on its tile and in its chapter, is a
       selection: Highlight. The mark keeps the system's ink (CanvasText),
       which a theme's Highlight can come close to, so the line that lies
       on the mark takes the theme's ground (Canvas), always apart from
       that ink, and its anchors are open on that ground, ringed in
       Highlight. */
    #mt-page.ds-page :is(.ds-construct-lines, .ds-guides) { forced-color-adjust: none; --ds-flow: Canvas; stroke: Highlight; }
    #mt-page.ds-page :is(.ds-c-dot, .ds-g-anchor) { fill: Canvas; stroke: Highlight; }

    /* Sliders: the system's own. */
    .ds-range-input,
    .ds-range-input::-webkit-slider-thumb { -webkit-appearance: auto; appearance: auto; }

    /* Switches: an outlined track and a solid knob; on, both in Highlight. */
    .ds-switch-track { forced-color-adjust: none; border: 1px solid CanvasText; background: Canvas; }
    .ds-switch-track > i { left: 1px; top: 1px; background: CanvasText; box-shadow: none; }
    .ds-switch-input:checked + .ds-switch-track { border-color: Highlight; background: Highlight; }
    .ds-switch-input:checked + .ds-switch-track > i { background: HighlightText; }
    .ds-switch-input:focus-visible + .ds-switch-track { outline-color: CanvasText; }
    /* Locked, the track takes the system's grey (undimmed), which says so. */
    #mt-page.ds-page .ds-switch-input:disabled + .ds-switch-track { border-color: GrayText; opacity: 1; }
    #mt-page.ds-page .ds-switch-input:disabled + .ds-switch-track > i { background: GrayText; }
    #mt-page.ds-page .ds-switch-input:disabled:checked + .ds-switch-track { background: GrayText; }
    #mt-page.ds-page .ds-switch-input:disabled:checked + .ds-switch-track > i { background: Canvas; }

    /* Buttons that draw no border of their own get one; the toggle's box
       is drawn as one. */
    :is(.ds-inspect, .ds-rail-tool, .ds-beat, .ds-present-key) { border: 1px solid ButtonText; }
    .ds-toggle > i { border: 1.5px solid; }
    .ds-toggle > i::after { left: 3px; top: 0.5px; }
    /* The color samples (03 · Color: swatches, chips, the band; the color
       slide's squares and line) keep their colors, each with an edge;
       their words are the system's. */
    #mt-page.ds-page :is(.ds-swatch-field, .ds-token-chip, .ds-gradient-band) { forced-color-adjust: none; border: 1px solid CanvasText; }
    #mt-page.ds-page .ds-slide-lights { forced-color-adjust: none; }
    #mt-page.ds-page .ds-slide-lights i { outline: 1px solid CanvasText; }
    /* The two color examples are samples too, so each still makes its
       point. Principle 02: the light is only atmosphere, so it goes; the
       do card is the theme's own (its button outlined, as the site's
       are), and the don't card keeps its paint (the ring, the title and
       the button) on the theme's card. The light/dark pair: each stage
       keeps its light's values, and the card on it its own hairline. */
    .ds-paint-light { display: none; }
    #mt-page.ds-page .ds-paint-side.is-soft .ds-card-button { outline: 1px solid CanvasText; outline-offset: -1px; }
    #mt-page.ds-page .ds-paint-side.is-painted .ds-card { forced-color-adjust: none; background: Canvas; color: CanvasText; box-shadow: none; outline: 1.5px solid rgb(var(--brand-iris-rgb)); outline-offset: -1.5px; }
    #mt-page.ds-page .ds-paint-side.is-painted :is(.ds-card-eyebrow, .ds-card-body) { color: CanvasText; }
    #mt-page.ds-page .ds-parity-stage { forced-color-adjust: none; }
    #mt-page.ds-page .ds-parity-stage .ds-card { outline: none; }

    /* Chosen and pressed: Highlight, with its own text. */
    #mt-page.ds-page :is([aria-pressed="true"], .di-segmented-option[aria-checked="true"], .ds-beat.is-playing) {
        forced-color-adjust: none;
        border-color: Highlight;
        background: Highlight;
        box-shadow: none;
        color: HighlightText;
    }
    #mt-page.ds-page :is([aria-pressed="true"], .di-segmented-option[aria-checked="true"]):focus-visible { outline-color: CanvasText; }
    #mt-page.ds-page [aria-pressed="true"] > i { border-color: currentColor; background: currentColor; }
    #mt-page.ds-page [aria-pressed="true"] > i::after { border-color: Highlight; }
    #mt-page.ds-page [aria-pressed="true"] .ds-icon-handle { fill: Highlight; stroke: currentColor; }

    /* Selections: outlines, handles and tags in Highlight. */
    .mt-select { outline-color: Highlight; }
    #mt-page.ds-page.is-inspect [data-ds-spec]:not([data-ds-spec="section"]):not(:focus-visible) { outline: 1px solid Highlight; outline-offset: 4px; }
    .mt-select > i { border-color: Highlight; }
    #mt-page.ds-page .mt-select-tag,
    #mt-page.ds-page.is-inspect [data-ds-spec]::after { forced-color-adjust: none; background: Highlight; color: HighlightText; }
    #mt-page.is-inspect [data-ds-spec="section"]::before { forced-color-adjust: none; border-color: Highlight; background: linear-gradient(Highlight, Highlight) 50% 0 / 1px 100% no-repeat; }
    .ds-columns i { forced-color-adjust: none; background: none; box-shadow: inset 1px 0 Highlight, inset -1px 0 Highlight; }
    #mt-page.ds-page :is(.ds-lay-m, .ds-tl-m)::before,
    #mt-page.ds-page :is(.ds-lay-m, .ds-tl-m)::after { forced-color-adjust: none; background: Highlight; }

    /* What the examples move, the rail's ticks and the timeline's ◇. */
    :is(.ds-rail-tick, .ds-curve-dot, .ds-keys-chip, .ds-tm-chip, .ds-rhythm-square, .ds-calm-square) { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
    .ds-rail-tick { opacity: 1; }
    :is(.ds-rail-link[aria-current="true"] .ds-rail-tick, .ds-tm-dot, .ds-rhythm-head) { forced-color-adjust: none; background: Highlight; box-shadow: none; }
    :is(.ds-key, .ds-tm-key, .ds-rhythm-mark, .ds-present-line li i) { border: 1.5px solid CanvasText; }
    :is(.ds-rhythm-mark.is-playing, .ds-present-line li.is-now i) { forced-color-adjust: none; border-color: Highlight; background: Highlight; }
    .ds-present-line::before { forced-color-adjust: none; background: CanvasText; }
}