{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mode-toggle",
  "title": "Mode toggle",
  "description": "The way from day to night, drawn ten ways. Three are switches with a scene change of their own: Day over Night with the full stop setting from one to the other while the page dissolves; Night taking the ink letter by letter while the page's light is lowered; Noon turning to Moon while night falls from the top. The other seven are buttons: a disc sliding over a ring, a dot setting below a hairline, a word on a hairline that rolls, the fermata as an eye, a sentence whose last word rolls, midday whose second half the ink falls over, and a clock turning from noon to midnight.",
  "registryDependencies": [
    "https://thedirectors.agency/ui/r/0nlytype.json"
  ],
  "files": [
    {
      "path": "registry/0nlytype/ui/mode-toggle.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Mode = \"day\" | \"nocturne\"\n\n/** The three variants that are a real switch, each with the scene change it asks the page for (a View Transition type). */\nconst SCENES = { stop: \"ot-dissolve\", dimmer: \"ot-dim\", noon: \"ot-fall\" } as const\n\ntype ModeToggleProps = Omit<React.ComponentProps<\"button\">, \"children\" | \"onChange\"> & {\n  /**\n   * Eight ways to draw the same choice. eclipse: a disc slides over a ring; horizon: the dot rises or sets; words: the chosen word,\n   * drawn like a select, rolls to the other; fermata: the arc is an eyelid; sentence: \"Read by light.\" and \"Read by night.\";\n   * knockout: \"midday\" and \"midnight\", the second half reversed out of the ink as night falls; hour: 12:00 and 00:00, the hour\n   * turning forward whichever way you go. Three are switches with a scene change of their own: stop: \"Day\" over \"Night\", the full\n   * stop setting from one to the other (the page dissolves); dimmer: \"Night\", its letters taking the ink in turn (the page's\n   * light is lowered or raised); noon: \"Noon\" and \"Moon\", one letter apart, the initial falling or rising (night falls over the page).\n   */\n  variant?: \"eclipse\" | \"horizon\" | \"words\" | \"fermata\" | \"sentence\" | \"knockout\" | \"hour\" | \"stop\" | \"dimmer\" | \"noon\"\n  /** The mode, when you hold it (controlled). */\n  mode?: Mode\n  /** The mode to start in, when the toggle holds it. */\n  defaultMode?: Mode\n  /** Called with the mode the person chose, and the click that chose it. The toggle applies nothing to the page. */\n  onModeChange?: (mode: Mode, event: React.MouseEvent<HTMLButtonElement>) => void\n  /** Pins a state for documentation (\"hover\", \"focus\"); set on the root. */\n  \"data-force\"?: string\n}\n\n/**\n * The day and night toggle. One button, on when it is night, drawn ten ways: a disc sliding across a ring, a dot above or\n * below a hairline, a word on a hairline that rolls to the other, the fermata as an eye, a sentence whose last word rolls,\n * midday turning to midnight in an ink block, a clock turning from noon to midnight, a full stop setting from Day to Night,\n * a word that takes the ink letter by letter, or Noon turning to Moon. It only reports the choice; the page applies it, for\n * instance `document.documentElement.dataset.mode = mode`. Stop, dimmer and noon carry `data-scene`, the View Transition\n * type their scene change is drawn for; the appearance hook passes it on.\n */\nfunction ModeToggle({ variant = \"eclipse\", mode, defaultMode = \"day\", onModeChange, onClick, onPointerLeave, onBlur, className, \"data-force\": force, \"aria-label\": label, ...props }: ModeToggleProps) {\n  const [own, setOwn] = React.useState<Mode>(defaultMode)\n  const now = mode ?? own\n  const scene = variant in SCENES ? SCENES[variant as keyof typeof SCENES] : undefined\n  // After a press the switch rests: its pointing sketch waits until the pointer leaves or focus moves on.\n  const [rested, setRested] = React.useState(false)\n  // The hour only turns once the mode has changed, so nothing rolls on first paint.\n  const [start] = React.useState(now)\n  const [turned, setTurned] = React.useState(false)\n  if (!turned && now !== start) setTurned(true)\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"mode-toggle\"\n      data-variant={variant}\n      data-force={force}\n      data-turned={variant === \"hour\" && turned ? \"\" : undefined}\n      data-scene={scene}\n      data-rested={scene && rested ? \"\" : undefined}\n      // A scene change swaps what is under the pointer; only a real leave ends the rest.\n      onPointerLeave={(e) => { if (!CSS.supports(\"selector(:active-view-transition)\") || !document.documentElement.matches(\":active-view-transition\")) setRested(false); onPointerLeave?.(e) }}\n      onBlur={(e) => { setRested(false); onBlur?.(e) }}\n      role={scene ? \"switch\" : undefined}\n      aria-checked={scene ? now === \"nocturne\" : undefined}\n      aria-pressed={scene ? undefined : now === \"nocturne\"}\n      aria-label={label ?? \"Night mode\"}\n      className={cn(\"ot-mode\", className)}\n      onClick={(e) => {\n        onClick?.(e)\n        if (e.defaultPrevented) return\n        setRested(true)\n        const next: Mode = now === \"nocturne\" ? \"day\" : \"nocturne\"\n        if (mode === undefined) setOwn(next)\n        onModeChange?.(next, e)\n      }}\n      {...props}\n    >\n      <span className=\"ot-mode-art\" aria-hidden=\"true\">\n        {variant === \"stop\" ? (\n          <>\n            <span data-for=\"day\">Day</span>\n            <span data-for=\"nocturne\">Night</span>\n          </>\n        ) : variant === \"dimmer\" ? (\n          Array.from(\"Night\", (letter, i) => <span key={i} style={{ \"--i\": i } as React.CSSProperties}>{letter}</span>)\n        ) : variant === \"noon\" ? (\n          <>\n            <span className=\"ot-mode-initial\"><span>N</span><span>M</span></span>oon\n          </>\n        ) : variant === \"words\" ? (\n          <span className=\"ot-mode-roll\">\n            <span>day</span>\n            <span>night</span>\n          </span>\n        ) : variant === \"sentence\" ? (\n          <>\n            Read by{\" \"}\n            <span className=\"ot-mode-state\">\n              <span>light</span>\n              <span>night</span>\n            </span>\n            <span className=\"ot-mode-stop\" />\n          </>\n        ) : variant === \"knockout\" ? (\n          <>\n            <span className=\"ot-mode-mid\">mid</span>\n            <span className=\"ot-mode-block\">\n              <span>day</span>\n              <span>night</span>\n            </span>\n          </>\n        ) : variant === \"hour\" ? (\n          <span className=\"ot-mode-hour\">\n            <span className=\"ot-mode-digit\"><span>1</span><span>0</span></span>\n            <span className=\"ot-mode-digit\"><span>2</span><span>0</span></span>\n            <span className=\"ot-mode-min\">:00</span>\n          </span>\n        ) : null}\n      </span>\n    </button>\n  )\n}\n\nexport { ModeToggle, type ModeToggleProps, type Mode }\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/0nlytype/styles/mode-toggle.css",
      "content": "@layer components {\n  @property --ot-mode-x { syntax: \"<length>\"; inherits: false; initial-value: 0px; }\n  /* ── ot-mode ── the day and night toggle: one button, on at night, drawn ten ways.\n     Drawings read aria-pressed (the stop, dimmer and noon switches read aria-checked), one source of truth. */\n  .ot-mode {\n    --dir: 1;\n    appearance: none; border: 0; background: none; font: inherit; color: var(--ot-graphite);\n    display: inline-flex; align-items: center; vertical-align: middle; cursor: pointer;\n    padding: 0.4em; margin: -0.4em; /* a hit area larger than the drawing, without moving anything */\n    -webkit-tap-highlight-color: transparent;\n    transition: color var(--ot-allegro) var(--ot-breath);\n  }\n  .ot-mode:is([dir=\"rtl\"], [dir=\"rtl\"] *) { --dir: -1; }\n  .ot-mode:is(:hover, [data-force~=\"hover\"]) { color: var(--ot-ink); }\n  .ot-mode:focus-visible, .ot-mode[data-force~=\"focus\"] { outline: var(--ot-stroke) solid var(--ot-accent); outline-offset: 0; }\n  .ot-mode[data-force~=\"focus\"] { outline-offset: 0; }\n  .ot-mode:disabled { opacity: 0.55; cursor: not-allowed; }\n  .ot-mode-art { position: relative; display: block; flex: none; }\n  .ot-mode-art::before, .ot-mode-art::after { content: \"\"; position: absolute; }\n\n  /* eclipse: a ring, and a disc filling it that a mask bites into. Day is the whole sun; night is a crescent on the moon's rim.\n     The disc meets the ring: with a gap between them, day read as a checked radio. */\n  .ot-mode[data-variant=\"eclipse\"] .ot-mode-art { width: 1.5em; height: 1.5em; border-radius: 50%; border: var(--ot-stroke) solid currentColor; box-sizing: border-box; }\n  .ot-mode[data-variant=\"eclipse\"] .ot-mode-art::before {\n    inset: 0; border-radius: 50%; background: currentColor;\n    --ot-mode-x: 1.9em;\n    -webkit-mask: radial-gradient(circle at calc(50% + var(--dir) * var(--ot-mode-x)) calc(50% - var(--ot-mode-x)), transparent 0.56em, #000 calc(0.56em + 0.6px));\n    mask: radial-gradient(circle at calc(50% + var(--dir) * var(--ot-mode-x)) calc(50% - var(--ot-mode-x)), transparent 0.56em, #000 calc(0.56em + 0.6px));\n    transition: --ot-mode-x var(--ot-andante) var(--ot-breath);\n  }\n  .ot-mode[data-variant=\"eclipse\"][aria-pressed=\"true\"] .ot-mode-art::before { --ot-mode-x: 0.34em; }\n\n  /* horizon: a hairline, and a dot that stands above it by day, sets below it at night, and empties as it goes. */\n  .ot-mode[data-variant=\"horizon\"] .ot-mode-art { width: 2.2em; height: 1.8em; }\n  .ot-mode[data-variant=\"horizon\"] .ot-mode-art::before { inset: 50% 0 auto; border-top: var(--ot-hairline) solid currentColor; }\n  .ot-mode[data-variant=\"horizon\"] .ot-mode-art::after {\n    left: calc(50% - 0.25em); top: 0.05em; width: 0.5em; height: 0.5em; border-radius: 50%;\n    box-shadow: inset 0 0 0 0.25em currentColor;\n    transition: top var(--ot-andante) var(--ot-spiccato), box-shadow var(--ot-andante) var(--ot-exhale);\n  }\n  .ot-mode[data-variant=\"horizon\"][aria-pressed=\"true\"] .ot-mode-art::after { top: 1.25em; box-shadow: inset 0 0 0 var(--ot-stroke) currentColor; }\n\n  /* fermata: the sign as an eye. The arc is the lid over the dot; at night it comes down and closes over it. */\n  .ot-mode[data-variant=\"fermata\"] .ot-mode-art { width: 1.9em; height: 1.3em; }\n  .ot-mode[data-variant=\"fermata\"] .ot-mode-art::before {\n    inset: 0 0 auto; height: 0.8em; border-top: var(--ot-stroke) solid currentColor; border-radius: 50% 50% 0 0 / 100% 100% 0 0;\n    transition: height var(--ot-moderato) var(--ot-exhale), top var(--ot-moderato) var(--ot-exhale);\n  }\n  .ot-mode[data-variant=\"fermata\"] .ot-mode-art::after {\n    left: calc(50% - 0.21em); top: 0.72em; width: 0.42em; height: 0.42em; border-radius: 50%; background: currentColor;\n    transition: scale var(--ot-moderato) var(--ot-exhale);\n  }\n  .ot-mode[data-variant=\"fermata\"][aria-pressed=\"true\"] .ot-mode-art::before { height: 0; top: 0.93em; }\n  .ot-mode[data-variant=\"fermata\"][aria-pressed=\"true\"] .ot-mode-art::after { scale: 1 0.14; }\n\n  /* words: the choice as a word in a sentence, drawn like a select's. The word you're reading by stands in the italic on a hairline,\n     with ↕ where a select has ↓: the other word is above or below it, not in a list. Choosing rolls it the way the sun goes,\n     everything down into night and up into day, and the line narrows or widens to the new word. */\n  .ot-mode[data-variant=\"words\"] { align-items: baseline; vertical-align: baseline; }\n  .ot-mode[data-variant=\"words\"] .ot-mode-art { display: inline-flex; align-items: baseline; }\n  .ot-mode-roll {\n    display: inline-grid; align-items: baseline; overflow: clip; interpolate-size: allow-keywords;\n    padding: 0 0.6em 0.1em 0; /* a select's: the arrow sits in the end padding, the hairline under the descenders */\n    font-family: var(--ot-expression); font-style: italic; font-weight: 400; font-size: calc(var(--ot-expression-scale) * 1em); line-height: 1.2; color: var(--ot-ink);\n    background: linear-gradient(var(--ot-rule-strong), var(--ot-rule-strong)) no-repeat 0 100% / calc(100% - 0.6em) var(--ot-hairline);\n  }\n  .ot-mode-roll:is([dir=\"rtl\"], [dir=\"rtl\"] *) { padding-inline: 0.6em 0; background-position: 100% 100%; }\n  .ot-mode-roll > * {\n    grid-area: 1 / 1; justify-self: start; white-space: nowrap;\n    transition: translate var(--ot-moderato) var(--ot-breath), opacity var(--ot-moderato) var(--ot-breath), inline-size var(--ot-moderato) var(--ot-breath);\n  }\n  /* The word that isn't chosen takes no width and waits out of the clip: day below the line, night above it. */\n  .ot-mode[aria-pressed=\"true\"] .ot-mode-roll > :first-child { translate: 0 130%; opacity: 0; inline-size: 0; }\n  .ot-mode[aria-pressed=\"false\"] .ot-mode-roll > :last-child { translate: 0 -130%; opacity: 0; inline-size: 0; }\n  .ot-mode[data-variant=\"words\"] .ot-mode-art::after {\n    content: \"↕\" / \"\"; inset-inline-end: 0; bottom: 0.3em; /* in the roll's end padding, where a select's arrow sits in its own */\n    font-family: var(--ot-voice); font-size: 0.72em; line-height: 1; color: var(--ot-pencil); pointer-events: none;\n    transition: translate var(--ot-moderato) var(--ot-exhale), color var(--ot-allegro);\n  }\n  .ot-mode[data-variant=\"words\"]:is(:hover, [data-force~=\"hover\"]) .ot-mode-roll { background-image: linear-gradient(var(--ot-ink), var(--ot-ink)); }\n  .ot-mode[data-variant=\"words\"]:is(:hover, [data-force~=\"hover\"]) .ot-mode-art::after { color: var(--ot-ink); translate: 0 var(--nudge, -2px); }\n  .ot-mode[data-variant=\"words\"][aria-pressed=\"true\"]:is(:hover, [data-force~=\"hover\"]) { --nudge: 2px; } /* toward the word you would get: night waits above, day below */\n\n  /* sentence: \"Read by light.\" and \"Read by night.\" The last word rolls the way the sun goes: light rises in from below, night sets in from above. The full stop is a dot by day and a ring by night. */\n  .ot-mode[data-variant=\"sentence\"] .ot-mode-art { white-space: nowrap; }\n  .ot-mode-state {\n    display: inline-grid; vertical-align: baseline; overflow: clip;\n    padding: 0.12em 0.14em 0.24em; margin-block: -0.12em -0.24em; margin-inline: -0.08em -0.14em;\n    font-family: var(--ot-expression); font-style: italic; font-size: calc(var(--ot-expression-scale) * 1em); line-height: 1; color: var(--ot-ink);\n    background: linear-gradient(var(--ot-rule-strong), var(--ot-rule-strong)) no-repeat 0.14em calc(100% - 0.1em) / calc(100% - 0.28em) var(--ot-hairline);\n    transition: background-color var(--ot-moderato);\n  }\n  .ot-mode-state > span { grid-area: 1 / 1; transition: translate var(--ot-moderato) var(--ot-breath), opacity var(--ot-moderato) var(--ot-breath); }\n  .ot-mode[aria-pressed=\"true\"] .ot-mode-state > :first-child { translate: 0 110%; opacity: 0; }\n  .ot-mode[aria-pressed=\"false\"] .ot-mode-state > :last-child { translate: 0 -110%; opacity: 0; }\n  .ot-mode:is(:hover, [data-force~=\"hover\"]) .ot-mode-state { background-image: linear-gradient(var(--ot-ink), var(--ot-ink)); }\n  .ot-mode-stop {\n    display: inline-block; width: max(0.22em, 5px); height: max(0.22em, 5px); margin-inline-start: 0.24em; border-radius: 50%;\n    box-shadow: inset 0 0 0 0.5em currentColor; transition: box-shadow var(--ot-andante) var(--ot-exhale);\n  }\n  .ot-mode[aria-pressed=\"true\"] .ot-mode-stop { box-shadow: inset 0 0 0 var(--ot-hairline) currentColor; }\n\n  /* knockout: after \"the uncreative\", where part of a word is reversed out of an ink block. \"mid\" stays heavy roman on the paper;\n     the half you chose is the italic. By day it reads midday. At night the ink falls over the second half from above, the way\n     nocturne falls over the page, and night reverses out of it; at dawn the ink lifts. Pointing lets a sliver fall, or lifts it a little. */\n  .ot-mode[data-variant=\"knockout\"] { align-items: baseline; vertical-align: baseline; color: var(--ot-ink); }\n  .ot-mode[data-variant=\"knockout\"] .ot-mode-art { display: inline-flex; align-items: baseline; white-space: nowrap; }\n  .ot-mode-mid { font-weight: 760; letter-spacing: -0.03em; }\n  .ot-mode-block {\n    --fall: 0; position: relative; isolation: isolate; display: inline-grid; align-items: baseline; overflow: clip; interpolate-size: allow-keywords;\n    padding: 0.04em 0.16em 0.1em 0.06em; margin-block: -0.04em -0.1em;\n    font-family: var(--ot-expression); font-style: italic; font-weight: 400; font-size: calc(var(--ot-expression-scale) * 1em); line-height: 1.05;\n    color: var(--ot-ink); transition: color var(--ot-moderato) var(--ot-breath);\n  }\n  .ot-mode-block::before {\n    content: \"\"; position: absolute; inset: 0; z-index: -1; background: var(--ot-ink);\n    scale: 1 var(--fall); transform-origin: 50% 0; transition: scale var(--ot-moderato) var(--ot-breath);\n  }\n  .ot-mode-block > * { grid-area: 1 / 1; justify-self: start; transition: opacity var(--ot-moderato) var(--ot-breath), inline-size var(--ot-moderato) var(--ot-breath); }\n  .ot-mode[data-variant=\"knockout\"][aria-pressed=\"true\"] .ot-mode-block { --fall: 1; color: var(--ot-paper); }\n  .ot-mode[data-variant=\"knockout\"][aria-pressed=\"true\"] .ot-mode-block > :first-child,\n  .ot-mode[data-variant=\"knockout\"][aria-pressed=\"false\"] .ot-mode-block > :last-child { opacity: 0; inline-size: 0; }\n  .ot-mode[data-variant=\"knockout\"][aria-pressed=\"false\"]:is(:hover, [data-force~=\"hover\"]) .ot-mode-block { --fall: 0.14; }\n  .ot-mode[data-variant=\"knockout\"][aria-pressed=\"true\"]:is(:hover, [data-force~=\"hover\"]) .ot-mode-block { --fall: 0.86; }\n  .ot-mode[data-variant=\"knockout\"]:disabled .ot-mode-block::before { background: var(--ot-pencil); }\n\n  /* hour: after the numbers used as data in \"the silence that heals\". Noon by day, midnight at night: 12:00 and 00:00, the hour\n     yours in the italic and the minutes ours in pencil. A clock only goes forward, so whichever way you choose the hour turns\n     forward: out at the top, in from below, the units first and the tens one step behind, like a carry. */\n  .ot-mode[data-variant=\"hour\"] { align-items: baseline; vertical-align: baseline; }\n  .ot-mode-hour { display: inline-flex; align-items: baseline; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums lining-nums; line-height: 1; }\n  .ot-mode-digit {\n    display: inline-grid; overflow: clip; padding-block: 0.1em; margin-block: -0.1em;\n    font-family: var(--ot-expression); font-style: italic; font-size: calc(var(--ot-expression-scale) * 1em); color: var(--ot-ink);\n  }\n  .ot-mode-digit > * { grid-area: 1 / 1; text-align: center; }\n  .ot-mode-min { margin-inline-start: 0.04em; color: var(--ot-pencil); transition: color var(--ot-allegro); }\n  .ot-mode[data-variant=\"hour\"]:is(:hover, [data-force~=\"hover\"]) .ot-mode-min { color: var(--ot-ink); }\n  .ot-mode[aria-pressed=\"false\"] .ot-mode-digit > :last-child, .ot-mode[aria-pressed=\"true\"] .ot-mode-digit > :first-child { opacity: 0; translate: 0 -110%; }\n  .ot-mode[data-turned][aria-pressed=\"true\"] .ot-mode-digit > :last-child { animation: ot-hour-in var(--ot-moderato) var(--ot-exhale) backwards; }\n  .ot-mode[data-turned][aria-pressed=\"true\"] .ot-mode-digit > :first-child { animation: ot-hour-out var(--ot-allegro) var(--ot-breath) backwards; }\n  .ot-mode[data-turned][aria-pressed=\"false\"] .ot-mode-digit > :first-child { animation: ot-hour-in-again var(--ot-moderato) var(--ot-exhale) backwards; }\n  .ot-mode[data-turned][aria-pressed=\"false\"] .ot-mode-digit > :last-child { animation: ot-hour-out-again var(--ot-allegro) var(--ot-breath) backwards; }\n  .ot-mode[data-turned] .ot-mode-digit:first-child > * { animation-delay: calc(var(--ot-arpeggio) * 3); }\n  @keyframes ot-hour-in { from { opacity: 0; translate: 0 110%; } to { opacity: 1; translate: 0 0; } }\n  @keyframes ot-hour-in-again { from { opacity: 0; translate: 0 110%; } to { opacity: 1; translate: 0 0; } }\n  @keyframes ot-hour-out { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -110%; } }\n  @keyframes ot-hour-out-again { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -110%; } }\n\n  /* stop: after the calendar's month set over its year, and the full stop in \"Renaissance.\". Day over Night, flush to the\n     end, and the full stop after the one you read by: the other word steps back to pencil. Choosing sets the stop from Day\n     down to Night, or raises it back, one line, landing with spiccato. Pointing pencils a ring where it would go. */\n  .ot-mode[data-variant=\"stop\"] .ot-mode-art {\n    --s: max(0.34em, 4px);\n    display: grid; justify-items: end; white-space: nowrap; line-height: 1.15;\n    padding-inline-end: calc(var(--s) + 0.14em);\n  }\n  .ot-mode[data-variant=\"stop\"] .ot-mode-art > span { color: var(--ot-pencil); transition: color var(--ot-allegro) var(--ot-breath); }\n  .ot-mode[data-variant=\"stop\"][aria-checked=\"false\"] .ot-mode-art > [data-for=\"day\"],\n  .ot-mode[data-variant=\"stop\"][aria-checked=\"true\"] .ot-mode-art > [data-for=\"nocturne\"] { color: var(--ot-ink); }\n  .ot-mode[data-variant=\"stop\"]:is(:hover, [data-force~=\"hover\"]) .ot-mode-art > span { color: var(--ot-graphite); }\n  .ot-mode[data-variant=\"stop\"][aria-checked=\"false\"]:is(:hover, [data-force~=\"hover\"]) .ot-mode-art > [data-for=\"day\"],\n  .ot-mode[data-variant=\"stop\"][aria-checked=\"true\"]:is(:hover, [data-force~=\"hover\"]) .ot-mode-art > [data-for=\"nocturne\"] { color: var(--ot-ink); }\n  .ot-mode[data-variant=\"stop\"] .ot-mode-art::before, .ot-mode[data-variant=\"stop\"] .ot-mode-art::after {\n    inset-inline-end: 0; top: calc(0.9em - var(--s)); width: var(--s); height: var(--s); border-radius: 50%; box-sizing: border-box;\n  }\n  .ot-mode[data-variant=\"stop\"] .ot-mode-art::after { background: var(--ot-ink); transition: translate var(--ot-moderato) var(--ot-spiccato); }\n  .ot-mode[data-variant=\"stop\"][aria-checked=\"true\"] .ot-mode-art::after { translate: 0 1lh; }\n  .ot-mode[data-variant=\"stop\"] .ot-mode-art::before {\n    border: var(--ot-hairline) solid var(--ot-pencil); translate: 0 1lh; opacity: 0;\n    transition: opacity var(--ot-allegro) var(--ot-breath);\n  }\n  .ot-mode[data-variant=\"stop\"][aria-checked=\"true\"] .ot-mode-art::before { translate: none; }\n  .ot-mode[data-variant=\"stop\"]:is(:hover, [data-force~=\"hover\"]):not([data-rested]) .ot-mode-art::before { opacity: 1; }\n\n  /* dimmer: a lamp's fader, in one word. Night stands in pencil while it is day; choosing it brings the ink up through the\n     letters in reading order, and choosing day lowers it back from the last. Pointing moves the fader one notch: the letter\n     that would change first (N by day, t at night) already stands at the other level. */\n  .ot-mode[data-variant=\"dimmer\"] .ot-mode-art { white-space: nowrap; direction: ltr; unicode-bidi: isolate; }\n  .ot-mode[data-variant=\"dimmer\"] .ot-mode-art > span {\n    color: var(--ot-pencil);\n    transition: color var(--ot-allegro) var(--ot-breath) calc((4 - var(--i)) * var(--ot-arpeggio));\n  }\n  .ot-mode[data-variant=\"dimmer\"][aria-checked=\"true\"] .ot-mode-art > span { color: var(--ot-ink); transition-delay: calc(var(--i) * var(--ot-arpeggio)); }\n  .ot-mode[data-variant=\"dimmer\"][aria-checked=\"false\"]:is(:hover, [data-force~=\"hover\"]):not([data-rested]) .ot-mode-art > :first-child { color: var(--ot-ink); transition-delay: 0s; }\n  .ot-mode[data-variant=\"dimmer\"][aria-checked=\"true\"]:is(:hover, [data-force~=\"hover\"]):not([data-rested]) .ot-mode-art > :last-child { color: var(--ot-pencil); transition-delay: 0s; }\n\n  /* noon: Noon and Moon are one letter apart, so only the initial changes; oon never moves. The N sets below the line and the M\n     comes down from above as night falls, and back at dawn, the way the page itself changes. Tabular in spirit: the initial's\n     cell is as wide as the M, so the word keeps its place. */\n  .ot-mode[data-variant=\"noon\"] .ot-mode-art { white-space: nowrap; direction: ltr; unicode-bidi: isolate; }\n  .ot-mode-initial { display: inline-grid; justify-items: end; overflow: clip; padding-block: 0.12em 0.24em; margin-block: -0.12em -0.24em; }\n  .ot-mode-initial > span { grid-area: 1 / 1; transition: translate var(--ot-allegro) var(--ot-breath), opacity var(--ot-allegro) var(--ot-breath); }\n  /* One letter at a time: the old initial leaves, then the new one lands, never both half in the cell. */\n  .ot-mode[aria-checked=\"false\"] .ot-mode-initial > :first-child,\n  .ot-mode[aria-checked=\"true\"] .ot-mode-initial > :last-child { transition-delay: calc(var(--ot-arpeggio) * 3); transition-timing-function: var(--ot-exhale); }\n  .ot-mode[aria-checked=\"false\"] .ot-mode-initial > :last-child { translate: 0 -110%; opacity: 0; }\n  .ot-mode[aria-checked=\"true\"] .ot-mode-initial > :first-child { translate: 0 110%; opacity: 0; }\n\n  /* In a bar, the switch keeps a finger-sized target without growing the row. */\n  .ot-mode[data-scene].bar-mode { min-block-size: 44px; flex: none; }\n\n  /* Scene changes, one for each switch: the appearance hook passes data-scene as the View Transition's type. The body's own\n     colour transition is off for them, so the new sheet is final at once. Nothing is caught by the overlay. */\n  :root:active-view-transition-type(ot-dissolve, ot-dim, ot-fall) body { transition: none; }\n  :root:active-view-transition-type(ot-dissolve, ot-dim, ot-fall)::view-transition { pointer-events: none; }\n  :root:active-view-transition-type(ot-dissolve, ot-dim, ot-fall)::view-transition-old(root) { animation: none; }\n  /* dissolve: the new sheet comes up through the old at the press's own tempo (allegro), so the grey middle is only a glance\n     and the stop lands after the page has turned. */\n  :root:active-view-transition-type(ot-dissolve)::view-transition-new(root) { animation: ot-mode-dissolve var(--ot-allegro) var(--ot-breath) both; }\n  @keyframes ot-mode-dissolve { from { opacity: 0; } }\n  /* dim: a light lowered. Going to night the day sheet dims, and the night comes up through it; going to day the day sheet\n     arrives dim and its light is raised. Either way the page passes through the same dimmed day. */\n  :root[data-mode=\"nocturne\"]:active-view-transition-type(ot-dim)::view-transition-old(root) { animation: ot-mode-lower var(--ot-moderato) var(--ot-breath) both; }\n  :root[data-mode=\"nocturne\"]:active-view-transition-type(ot-dim)::view-transition-new(root) { animation: ot-mode-dissolve var(--ot-moderato) cubic-bezier(.5, 0, .75, 0) both; }\n  :root:not([data-mode=\"nocturne\"]):active-view-transition-type(ot-dim)::view-transition-new(root) { animation: ot-mode-raise var(--ot-moderato) var(--ot-breath) both; }\n  @keyframes ot-mode-lower { to { filter: brightness(0.12); } }\n  @keyframes ot-mode-raise { from { opacity: 0; filter: brightness(0.12); } 40% { opacity: 1; } }\n  /* fall: the new sheet comes down over the page from the top edge, where the switch is, on one straight line, moderato. Both\n     ways: the answer starts at the press and reads down the page in reading order. */\n  :root:active-view-transition-type(ot-fall)::view-transition-new(root) { animation: ot-mode-fall var(--ot-moderato) var(--ot-breath) both; }\n  @keyframes ot-mode-fall { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }\n\n  /* Reduced motion: the hook changes the page at once, the tempi are 1ms, and a documentation row can pin it. */\n  .ot-mode[data-force~=\"reduced\"], .ot-mode[data-force~=\"reduced\"] * { transition: none; }\n  .ot-mode[data-force~=\"reduced\"] .ot-mode-art::before, .ot-mode[data-force~=\"reduced\"] .ot-mode-art::after { transition: none; }\n\n  /* Forced colours drop backgrounds and masks' colours: say what each part is. */\n  @media (forced-colors: active) {\n    .ot-mode { color: ButtonText; }\n    .ot-mode:is([data-variant=\"stop\"], [data-variant=\"dimmer\"]) { --ot-ink: ButtonText; --ot-graphite: ButtonText; --ot-pencil: GrayText; }\n    .ot-mode:focus-visible, .ot-mode[data-force~=\"focus\"] { outline-color: Highlight; }\n    .ot-mode-art::before, .ot-mode-art::after, .ot-mode-roll, .ot-mode-state { forced-color-adjust: none; }\n    .ot-mode[data-variant=\"eclipse\"] .ot-mode-art::before, .ot-mode[data-variant=\"fermata\"] .ot-mode-art::after { background: ButtonText; }\n    .ot-mode-roll, .ot-mode-state { color: ButtonText; background-image: linear-gradient(ButtonText, ButtonText); }\n    .ot-mode-block, .ot-mode-block::before, .ot-mode-digit, .ot-mode-min { forced-color-adjust: none; color: ButtonText; }\n    .ot-mode-block::before { background: ButtonText; }\n    .ot-mode[aria-pressed=\"true\"] .ot-mode-block { color: ButtonFace; }\n    .ot-mode[data-variant=\"stop\"] .ot-mode-art > span, .ot-mode[data-variant=\"dimmer\"] .ot-mode-art > span { forced-color-adjust: none; }\n    .ot-mode[data-variant=\"stop\"] .ot-mode-art::after { background: ButtonText; }\n    .ot-mode[data-variant=\"stop\"] .ot-mode-art::before { border-color: ButtonText; }\n    .ot-mode[data-variant=\"stop\"] .ot-mode-art > span, .ot-mode[data-variant=\"dimmer\"][aria-checked=\"false\"] .ot-mode-art > span { color: GrayText; }\n    .ot-mode[data-variant=\"stop\"][aria-checked=\"false\"] .ot-mode-art > [data-for=\"day\"],\n    .ot-mode[data-variant=\"stop\"][aria-checked=\"true\"] .ot-mode-art > [data-for=\"nocturne\"],\n    .ot-mode[data-variant=\"dimmer\"][aria-checked=\"true\"] .ot-mode-art > span { color: ButtonText; }\n  }\n}\n",
      "type": "registry:file",
      "target": "styles/0nlytype/mode-toggle.css"
    }
  ],
  "css": {
    "@import \"../styles/0nlytype/mode-toggle.css\"": {}
  },
  "meta": {
    "movement": "VI",
    "underneath": "native",
    "contract": "ot-mode-toggle"
  },
  "type": "registry:ui"
}