/* SakinLab core — tokens, themes, shell.
   Rules: general design guidelines (kept outside the repo) and docs/site-stil-rehberi.md
   Type: Geist everywhere; EB Garamond only for the name and tagline on the home page.
   Structure comes from hairlines and alignment, not from boxes. */

@font-face { font-family: "Geist"; src: url("/assets/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/assets/fonts/eb-garamond.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #FAFAFA;
  --ink: #171717;
  --ink-soft: #5C5C5C;
  --ink-muted: #8C8C8C;
  --hair: #ECECEC;
  --hair-strong: #D4D4D4;
  --wash: rgb(23 23 23 / .035);
  --chip: rgb(237 237 237 / .6);
  --chip-hover: rgb(226 226 226 / .9);
  --rule-bg: #F5F5F5;
  --rule-edge: #E4E4E4;
  --rule-tick: #BDBDBD;
  --rule-label: #8F8F8F;
  --rule-band: rgb(23 23 23 / .07);
  --mat-ink: #000;
  --mat-alpha: .07;
  --mat-reveal: .18;
  --focus: #0D99FF;
  --guide: rgb(242 72 34 / .55);

  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-serif: "EB Garamond", Georgia, "Times New Roman", serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;
  --ruler: 20px;
  --cols: 16;
  --m: calc((100vw - var(--ruler)) / var(--cols));
  --u: calc(var(--m) / 5);
  --r-chip: 6px;

  --duration-press: 120ms;
  --duration-fast: 160ms;
  --duration-ui: 220ms;
  --duration-panel: 280ms;
  --duration-scene: 400ms;
  --ease-out-ui: cubic-bezier(.23, 1, .32, 1);
  --ease-move: cubic-bezier(.77, 0, .175, 1);
  --ease-spring: linear(0, 0.142 7%, 0.380 14%, 0.588 21%, 0.740 29%, 0.841 36%,
    0.905 43%, 0.944 50%, 0.968 57%, 0.982 64%, 0.990 71%, 0.994 79%,
    0.997 86%, 0.998 93%, 1);
  --duration-spring: 510ms;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #161616; --ink: #EDEDED; --ink-soft: #A6A6A6; --ink-muted: #767676;
    --hair: #2A2A2A; --hair-strong: #404040; --wash: rgb(237 237 237 / .04);
    --chip: rgb(44 44 44 / .75); --chip-hover: rgb(58 58 58 / .9);
    --rule-bg: #1A1A1A; --rule-edge: #262626; --rule-tick: #474747; --rule-label: #7D7D7D; --rule-band: rgb(237 237 237 / .08);
    --mat-ink: #fff; --mat-alpha: .06; --mat-reveal: .14; --guide: rgb(255 120 90 / .6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark; --guide: rgb(255 120 90 / .6);
  --paper: #161616; --ink: #EDEDED; --ink-soft: #A6A6A6; --ink-muted: #767676;
  --hair: #2A2A2A; --hair-strong: #404040; --wash: rgb(237 237 237 / .04);
  --chip: rgb(44 44 44 / .75); --chip-hover: rgb(58 58 58 / .9);
  --rule-bg: #1A1A1A; --rule-edge: #262626; --rule-tick: #474747; --rule-label: #7D7D7D; --rule-band: rgb(237 237 237 / .08);
  --mat-ink: #fff; --mat-alpha: .06; --mat-reveal: .14;
}
:root[data-theme="green"] {
  /* Meadow: the green of a cutting mat, pale yellow guide lines */
  color-scheme: dark;
  --paper: #2A654C; --ink: #F1F4EA; --ink-soft: rgb(241 244 234 / .74); --ink-muted: rgb(241 244 234 / .52);
  --hair: rgb(241 244 234 / .12); --hair-strong: rgb(241 244 234 / .24); --wash: rgb(241 244 234 / .06);
  --chip: rgb(241 244 234 / .09); --chip-hover: rgb(241 244 234 / .16);
  --rule-bg: #245A43; --rule-edge: #357459; --rule-tick: #79A48D; --rule-label: #B4D2C2; --rule-band: rgb(241 244 234 / .1);
  --mat-ink: #F3EBA0; --mat-alpha: .12; --mat-reveal: .26;
  --focus: #F3D35B; --guide: rgb(243 211 91 / .8);
}
:root[data-theme="blue"] {
  /* Sky: cyanotype blue, white guide lines */
  color-scheme: dark;
  --paper: #1D3F8C; --ink: #F2F6FF; --ink-soft: rgb(242 246 255 / .76); --ink-muted: rgb(242 246 255 / .54);
  --hair: rgb(242 246 255 / .13); --hair-strong: rgb(242 246 255 / .26); --wash: rgb(242 246 255 / .07);
  --chip: rgb(242 246 255 / .1); --chip-hover: rgb(242 246 255 / .18);
  --rule-bg: #1A3981; --rule-edge: #2B4E9E; --rule-tick: #6F88C8; --rule-label: #AFC0EA; --rule-band: rgb(242 246 255 / .1);
  --mat-ink: #FFFFFF; --mat-alpha: .11; --mat-reveal: .24;
  --focus: #FFD166; --guide: rgb(255 209 102 / .85);
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration-panel: 1ms; --duration-scene: 1ms; --duration-spring: 1ms; }
}/* Page transitions. The workspace (rulers, settings, nav) stays still; only the sheet changes.
   The old sheet lifts away quickly; the new one settles in on a spring.
   The ruler band travels from what you clicked to where you land (core.js). */


@view-transition { navigation: auto; }
.ruler-x { view-transition-name: ruler-x; }
.ruler-y { view-transition-name: ruler-y; }
.ruler-corner { view-transition-name: ruler-corner; }
.settings { view-transition-name: settings; }
:where(body:not([data-app])) .site-nav { view-transition-name: site-nav; }
::view-transition-group(ruler-x), ::view-transition-group(ruler-y), ::view-transition-group(ruler-corner),
::view-transition-group(settings), ::view-transition-group(site-nav) { animation: none; }
::view-transition-old(ruler-x), ::view-transition-old(ruler-y), ::view-transition-old(ruler-corner),
::view-transition-old(settings) { animation: none; opacity: 0; }
::view-transition-new(ruler-x), ::view-transition-new(ruler-y), ::view-transition-new(ruler-corner),
::view-transition-new(settings) { animation: none; }
::view-transition-old(root) { animation: sheet-out 150ms var(--ease-out-ui) both; }
::view-transition-new(root) { animation: sheet-in var(--duration-spring) var(--ease-spring) 40ms both; }
@keyframes sheet-out { to { opacity: 0; transform: translateY(-6px); filter: blur(2px); } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}/* Base */


*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100%;
  background: var(--paper); color: var(--ink);
  font: 400 14px/1.5 var(--font-sans);
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.i18n-pending [data-i18n] { visibility: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:where(body:not([data-app])) .skip-link {
  position: fixed; left: calc(var(--ruler) + var(--s3)); top: calc(var(--ruler) + var(--s3)); z-index: 40;
  padding: 6px 10px; background: var(--paper); color: var(--ink); border-radius: var(--r-chip);
  box-shadow: 0 0 0 1px var(--hair-strong); transform: translateY(-300%);
}
:where(body:not([data-app])) .skip-link:focus { transform: none; }/* Rulers (all pages) and cut mat (home only: data-surface="mat"). Both are SVG, so they stay sharp at any zoom. */


.ruler { position: fixed; z-index: 30; pointer-events: none; background: var(--rule-bg); overflow: hidden; }
.ruler svg { display: block; overflow: visible; }
.ruler-x { top: 0; left: 0; right: 0; height: var(--ruler); padding-left: var(--ruler); border-bottom: 1px solid var(--rule-edge); }
.ruler-y { top: var(--ruler); left: 0; bottom: 0; width: var(--ruler); border-right: 1px solid var(--rule-edge); }
.ruler-corner {
  position: fixed; z-index: 31; top: 0; left: 0; width: var(--ruler); height: var(--ruler);
  appearance: none; margin: 0; padding: 0; border: 0; border-right: 1px solid var(--rule-edge); border-bottom: 1px solid var(--rule-edge);
  background: var(--rule-bg); color: var(--rule-label); cursor: pointer;
  font: 600 8px/1 var(--font-sans); letter-spacing: .02em; display: grid; place-items: center;
  transition: color var(--duration-fast) var(--ease-out-ui);
}
.ruler-corner:hover { color: var(--ink); }
@media (hover: none), (max-width: 599px) { .ruler-corner { font-size: 0; } }
.ruler path { fill: none; stroke-width: 1; shape-rendering: crispEdges; vector-effect: non-scaling-stroke; }
.ruler .r-minor { stroke: var(--rule-tick); opacity: .7; }
.ruler .r-major { stroke: var(--rule-tick); }
.ruler .r-cursor { stroke: var(--ink); opacity: .55; }
.ruler .r-band { fill: var(--rule-band); }
.ruler text { font: 500 9px/1 var(--font-sans); fill: var(--rule-label); font-variant-numeric: tabular-nums; transition: opacity var(--duration-fast) var(--ease-out-ui); }
.ruler .r-labels { transition: opacity var(--duration-fast) var(--ease-out-ui); }
.ruler .r-band-label { fill: var(--ink); }
.mat { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 700ms var(--ease-out-ui); }
.mat.is-doc { position: absolute; inset: auto; top: 0; left: 0; }
.mat[data-mode="grid"] { --k: .5; }
.mat-reveal[data-mode="grid"] { --k: .75; }
.mat .mat-label { font: 500 9px/1 var(--font-sans); fill: var(--mat-ink); opacity: calc(var(--mat-alpha) * 4); letter-spacing: .02em; }
.mat.is-ready { opacity: 1; }
.mat path { fill: none; stroke: var(--mat-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mat .mat-minor { opacity: calc(var(--mat-alpha) * var(--k, 1) * .55); shape-rendering: crispEdges; }
.mat .mat-major { opacity: calc(var(--mat-alpha) * var(--k, 1)); shape-rendering: crispEdges; }
.mat .mat-angle { opacity: calc(var(--mat-alpha) * 1.1); }
.mat .mat-arc { opacity: calc(var(--mat-alpha) * .9); }
.mat-reveal, .mat-reveal[data-mode] { --mat-alpha: var(--mat-reveal);
  --mx: -999px; --my: -999px;
  -webkit-mask-image: radial-gradient(circle 200px at var(--mx) var(--my), #000 0%, rgb(0 0 0 / .45) 45%, transparent 100%);
          mask-image: radial-gradient(circle 200px at var(--mx) var(--my), #000 0%, rgb(0 0 0 / .45) 45%, transparent 100%);
}
body[data-surface="none"] :is(.ruler, .ruler-corner) { display: none; }
body[data-surface="none"] { --ruler: 0px; }
@media (hover: none), (max-width: 599px) { :root { --ruler: 14px; } }/* Module grid: the site's unit. Anything placed in .cells snaps to modules and reflows by column count. */


:where(body:not([data-app])) .cells { display: grid; grid-template-columns: repeat(var(--cols), var(--m)); grid-auto-rows: var(--m); }
:where(body:not([data-app])) .cell { min-width: 0; min-height: 0; }/* Readouts — the small details of a design tool */


.readout {
  position: fixed; z-index: 29;
  font: 500 11px/1 var(--font-sans); letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  pointer-events: none;
}
.readout-frame { top: calc(var(--ruler) + var(--s3)); left: calc(var(--ruler) + var(--s3)); display: flex; gap: var(--s2); }
.readout-frame b { font-weight: 500; color: var(--ink-soft); }
.readout-xy {
  bottom: var(--s3); left: calc(var(--ruler) + var(--s2)); display: flex; gap: var(--s3);
  opacity: 0; transition: opacity var(--duration-ui) var(--ease-out-ui);
}
.readout-xy.is-on { opacity: 1; }
.readout-xy span { min-width: 5.5ch; }
.readout-xy.in-slot { position: static; z-index: auto; }
.readout-frame, .readout-xy { line-height: 1; }
@media (hover: none), (max-width: 599px) { .readout-xy { display: none; } }/* Settings: appearance (site); language + appearance (apps) */


.settings {
  position: fixed; z-index: 32;
  top: calc(var(--ruler) + var(--s3)); inset-inline-end: var(--s3);
  display: flex; align-items: center; gap: 2px;
  font: 500 12px/1 var(--font-sans);
}
.settings.in-slot { position: static; }
.settings button {
  appearance: none; border: 0; margin: 0; min-width: 28px; height: 28px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ink-muted); font: inherit; letter-spacing: .01em;
  border-radius: var(--r-chip); cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out-ui), background-color var(--duration-fast) var(--ease-out-ui), transform var(--duration-press) var(--ease-out-ui);
}
.settings button[aria-pressed="true"] { color: var(--ink); }
.settings button:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .settings button:hover { color: var(--ink); background: var(--wash); } }
.settings .lang { position: relative; display: flex; }
.settings .lang-btn { gap: 3px; padding: 0 6px 0 8px; color: var(--ink-soft); }
.settings .lang-btn svg { width: 10px; height: 10px; transition: transform var(--duration-ui) var(--ease-out-ui); }
.settings .lang-btn[aria-expanded="true"] { color: var(--ink); background: var(--wash); }
.settings .lang-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.settings .lang-list {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 148px;
  display: grid; gap: 1px; padding: 4px; border-radius: 8px;
  background: var(--paper); box-shadow: 0 0 0 1px var(--hair-strong), 0 8px 24px rgb(0 0 0 / .1);
  transform-origin: top right;
}
.settings .lang-list[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .settings .lang-list:not([hidden]) { animation: menu-in var(--duration-ui) var(--ease-out-ui); }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
}
.settings .lang-list button {
  width: 100%; height: 30px; padding: 0 10px; justify-content: space-between; gap: 12px;
  color: var(--ink-soft); font: 500 12.5px/1 var(--font-sans);
}
.settings .lang-list button small { font-size: 10.5px; color: var(--ink-muted); letter-spacing: .03em; }
.settings .lang-list button[aria-checked="true"] { color: var(--ink); background: var(--wash); }
.settings .sep { width: 1px; height: 14px; background: var(--hair-strong); margin: 0 4px; }
.settings .themes { display: flex; gap: 1px; }
.settings .themes button { width: 28px; padding: 0; }
.settings .themes svg { width: 15px; height: 15px; display: block; overflow: visible; }
.settings .themes button[aria-pressed="true"] { color: var(--ink); background: var(--wash); }
.settings .ic, .settings .ic path { transform-box: fill-box; transform-origin: center; transition: transform var(--duration-spring) var(--ease-spring); }
.settings [data-theme-set="green"] .ic path { transform-origin: bottom center; }
@media (hover: hover) and (pointer: fine) {
  .settings [data-theme-set="light"]:hover .ic { transform: rotate(45deg); }
  .settings [data-theme-set="dark"]:hover .ic { transform: rotate(-16deg); }
  .settings [data-theme-set="green"]:hover .b1 { transform: rotate(-7deg); }
  .settings [data-theme-set="green"]:hover .b2 { transform: rotate(5deg); }
  .settings [data-theme-set="green"]:hover .b3 { transform: rotate(9deg); }
  .settings [data-theme-set="blue"]:hover .ic { transform: translateX(1.5px); }
}/* Home navigation chips (from the reference frame) */


:where(body:not([data-app])) .site-nav { position: fixed; z-index: 20; left: 50%; bottom: clamp(28px, 9.2vh, 99px); transform: translateX(-50%); display: flex; gap: 4px; }
:where(body:not([data-app])) .chip {
  position: relative; display: inline-flex; align-items: center; height: 28px; padding: 0 10px;
  border-radius: var(--r-chip); background: var(--chip); color: var(--ink);
  font: 500 13px/1 var(--font-sans); letter-spacing: -.005em;
  transition: background-color var(--duration-fast) var(--ease-out-ui), transform var(--duration-press) var(--ease-out-ui);
}
:where(body:not([data-app])) .chip:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { :where(body:not([data-app])) .chip:not(.is-soon):hover { background: var(--chip-hover); } }
:where(body:not([data-app])) .chip.is-soon { color: var(--ink-muted); cursor: default; }
:where(body:not([data-app])) .chip.is-soon::after, :where(body:not([data-app])) .nav-link.is-soon::after {
  content: attr(data-soon); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 3px);
  font: 500 11px/1 var(--font-sans); color: var(--ink-muted); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-out-ui), transform var(--duration-fast) var(--ease-out-ui);
}
:where(body:not([data-app])) .chip.is-soon:hover::after, :where(body:not([data-app])) .nav-link.is-soon:hover::after { opacity: 1; transform: translate(-50%, 0); }/* Inner pages: a sheet on the module grid. Columns are modules (--m); spacing is in minor units (--u).
   Desktop: 16 columns, content in 2–15. Tablet: 8, full width. Mobile: 4, full width. */


:where(body:not([data-app])) .sheet { position: relative; z-index: 1; padding: var(--ruler) 0 0 var(--ruler); min-height: 100svh; display: flex; flex-direction: column; }
:where(body:not([data-app])) .mod { display: grid; grid-template-columns: repeat(var(--cols), var(--m)); }
:where(body:not([data-app])) .span-content { grid-column: 2 / -2; }
@media (max-width: 1219px) { :where(body:not([data-app])) .span-content { grid-column: 1 / -1; padding-inline: var(--u); } }

:where(body:not([data-app])) .masthead { height: calc(var(--u) * 3); align-items: center; border-bottom: 1px solid var(--hair); background: color-mix(in srgb, var(--paper) 70%, transparent); }
:where(body:not([data-app])) .masthead .inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
:where(body:not([data-app])) .masthead .brand { display: flex; align-items: baseline; gap: var(--s3); min-width: 0; }
:where(body:not([data-app])) .masthead .brand > :first-child { font: 600 14px/1 var(--font-sans); letter-spacing: -.01em; }
:where(body:not([data-app])) .masthead .brand span { font-size: 13px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(body:not([data-app])) .masthead .tail { display: flex; align-items: center; gap: var(--s1); }
:where(body:not([data-app])) .nav-link {
  position: relative; display: inline-flex; align-items: center; height: 28px; padding: 0 8px;
  font: 500 13px/1 var(--font-sans); color: var(--ink-soft); border-radius: var(--r-chip);
  transition: color var(--duration-fast) var(--ease-out-ui);
}
:where(body:not([data-app])) .nav-link::before {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 5px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform var(--duration-ui) var(--ease-out-ui);
}
@media (hover: hover) and (pointer: fine) { :where(body:not([data-app])) .nav-link:not(.is-soon):hover { color: var(--ink); } :where(body:not([data-app])) .nav-link:not(.is-soon):hover::before { transform: scaleX(1); } }
:where(body:not([data-app])) .nav-link[aria-current="page"] { color: var(--ink); }
:where(body:not([data-app])) .nav-link[aria-current="page"]::before { transform: scaleX(1); }
:where(body:not([data-app])) .nav-link.is-soon { color: var(--ink-muted); cursor: default; }
:where(body:not([data-app])) .nav-link.is-soon::after { bottom: auto; top: calc(100% + 2px); transform: translate(-50%, -3px); }
:where(body:not([data-app])) .nav-link.is-soon:hover::after { transform: translate(-50%, 0); }
:where(body:not([data-app])) .masthead .sep { width: 1px; height: 14px; background: var(--hair-strong); margin: 0 var(--s2); }/* Intro: label in the first 4 content modules, lead after it. Lead cap height = 1u. */


:where(body:not([data-app])) .intro { box-sizing: border-box; height: calc(var(--m) * 3 - var(--u) * 3); padding-top: calc(var(--m) * 1.2); align-items: start; align-content: start; }
:where(body:not([data-app])) .intro .label { grid-column: 2 / span 4; display: flex; align-items: baseline; gap: var(--s2); margin: 0; font: 600 14px/1.4 var(--font-sans); letter-spacing: -.01em; }
:where(body:not([data-app])) .intro .label small { font: 500 12px/1 var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
:where(body:not([data-app])) .intro .lead { grid-column: 6 / span 9; margin: 0; max-width: 30ch; font: 400 calc(var(--u) / .71)/1.25 var(--font-sans); letter-spacing: -.022em; text-wrap: balance; }
:where(body:not([data-app])) .intro .meta { grid-column: 6 / span 9; margin: var(--s3) 0 0; font-size: 13px; color: var(--ink-muted); }/* Index rows: one module tall; hairlines fall on module lines */


:where(body:not([data-app])) .index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
:where(body:not([data-app])) .index > li { border-bottom: 1px solid var(--hair); }
:where(body:not([data-app])) .row { position: relative; min-height: calc(var(--m) - 1px); align-items: center; grid-template-columns: repeat(14, var(--m)); }
:where(body:not([data-app])) .row::before {
  content: ""; position: absolute; inset: 0 calc(var(--u) * -.5); background: var(--wash); border-radius: 4px;
  opacity: 0; transition: opacity var(--duration-fast) var(--ease-out-ui);
}
:where(body:not([data-app])) .row > :not(.visually-hidden) { position: relative; }
:where(body:not([data-app])) .row .name { grid-column: 1 / span 4; display: flex; align-items: center; gap: var(--s3); font: 500 15px/1.3 var(--font-sans); letter-spacing: -.012em; }
:where(body:not([data-app])) .row .desc { grid-column: 5 / span 6; padding-right: var(--u); color: var(--ink-soft); line-height: 1.45; text-wrap: pretty; }
:where(body:not([data-app])) .row .kind { grid-column: 11 / span 3; color: var(--ink-muted); font-size: 13px; }
:where(body:not([data-app])) .row .go { grid-column: 14 / span 1; justify-self: end; width: 18px; height: 18px; color: var(--ink-muted);
  transition: transform var(--duration-ui) var(--ease-out-ui), color var(--duration-fast) var(--ease-out-ui); }
:where(body:not([data-app])) .row:active { transform: scale(.995); }
@media (hover: hover) and (pointer: fine) {
  :where(body:not([data-app])) .row:hover::before { opacity: 1; }
  :where(body:not([data-app])) .row:hover .go { color: var(--ink); transform: translate(2px, -2px); }
}

:where(body:not([data-app])) .glyph { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--ink); flex: none; }
:where(body:not([data-app])) .glyph svg { width: 100%; height: 100%; overflow: visible; }
:where(body:not([data-app])) .glyph .i-a, :where(body:not([data-app])) .glyph .i-b { transition: transform var(--duration-spring) var(--ease-spring); }
@media (hover: hover) and (pointer: fine) {
  :where(body:not([data-app])) a:hover .glyph .i-a, :where(body:not([data-app])) a:hover .glyph .i-b, :where(body:not([data-app])) a:focus-visible .glyph .i-a, :where(body:not([data-app])) a:focus-visible .glyph .i-b { transform: translate(var(--dx, 0), var(--dy, 0)); }
}

:where(body:not([data-app])) .colophon { margin-top: auto; height: calc(var(--u) * 3); align-items: center; font-size: 12px; color: var(--ink-muted); }
:where(body:not([data-app])) .colophon .inner { display: flex; justify-content: space-between; }/* Tablet: 8 modules, full width */


@media (max-width: 1219px) {
  :where(body:not([data-app])) .intro .label { grid-column: 1 / span 2; padding-left: var(--u); }
  :where(body:not([data-app])) .intro .lead, :where(body:not([data-app])) .intro .meta { grid-column: 3 / span 6; padding-right: var(--u); }
  :where(body:not([data-app])) .index { margin-inline: var(--u); }
  :where(body:not([data-app])) .row { grid-template-columns: repeat(8, calc(var(--m) - var(--u) / 4)); }
  :where(body:not([data-app])) .row .name { grid-column: 1 / span 3; }
  :where(body:not([data-app])) .row .desc { grid-column: 4 / span 4; }
  :where(body:not([data-app])) .row .kind { display: none; }
  :where(body:not([data-app])) .row .go { grid-column: 8; }
}/* Mobile: 4 modules, stacked rows */

@media (max-width: 613px) {
  :where(body:not([data-app])) .masthead .brand span { display: none; }
  :where(body:not([data-app])) .intro { height: calc(var(--m) * 4 - var(--u) * 3); padding-top: calc(var(--m) * .8); }
  :where(body:not([data-app])) .intro .label, :where(body:not([data-app])) .intro .lead, :where(body:not([data-app])) .intro .meta { grid-column: 1 / -1; padding-inline: var(--u); }
  :where(body:not([data-app])) .intro .lead { margin-top: var(--u); }
  :where(body:not([data-app])) .row { grid-template-columns: repeat(4, 1fr); row-gap: var(--s1); padding: var(--u) 0; min-height: calc(var(--u) * 7 - 1px); align-content: center; }
  :where(body:not([data-app])) .row .name { grid-column: 1 / span 3; }
  :where(body:not([data-app])) .row .go { grid-column: 4; grid-row: 1; }
  :where(body:not([data-app])) .row .desc { grid-column: 1 / -1; padding-left: 32px; }
}

body:not([data-frame]) .readout-frame { display: none; }

@media (prefers-reduced-motion: no-preference) {
  :where(body:not([data-app])) .enter { animation: enter 600ms var(--ease-out-ui) both; animation-delay: var(--delay, 0ms); }
  @keyframes enter { from { opacity: 0; transform: translateY(4px); } }
}/* Grain: fine photographic noise under the content (text stays crisp; no full-screen blend layer on top), blended with overlay so colors keep their value
   (measured: #FAFAFA stays #FAFAFA on average). Tiled from one small SVG; no extra files. */


:root { --grain: 1; }
:root[data-appearance="dark"] { --grain: .14; }
:root[data-appearance="green"], :root[data-appearance="blue"] { --grain: .1; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E"); background-size: 200px 200px;
  opacity: var(--grain); mix-blend-mode: overlay;
}
@media print { body::before { display: none; } }
body[data-app]::before { display: none; }/* tools: no grain over working surfaces */   
:where(body:not([data-app])) .row .name .ver { font: 500 11px/1 var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.tm { font-size: .62em; vertical-align: .55em; margin-left: .05em; letter-spacing: 0; font-weight: 500; }/* Footer on the module grid: the X/Y readout starts on the same column as the descriptions above */

@media (min-width: 1220px) {
  :where(body:not([data-app])) .colophon .inner { display: grid; grid-template-columns: repeat(14, var(--m)); align-items: center; }
  :where(body:not([data-app])) .colophon .inner > :nth-child(1) { grid-column: 1 / 5; }
  :where(body:not([data-app])) .colophon .inner > [data-readout-slot] { grid-column: 5 / 11; }
  :where(body:not([data-app])) .colophon .inner > :nth-child(3) { grid-column: 11 / 15; justify-self: end; }
}
.readout-xy.in-slot { font-size: 11px; }