@font-face { font-family: IBM Plex Sans; src: url("/ibm-plex-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap }
@font-face { font-family: IBM Plex Sans; src: url("/ibm-plex-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap }
@font-face { font-family: IBM Plex Sans; src: url("/ibm-plex-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap }
@font-face { font-family: IBM Plex Serif; src: url("/ibm-plex-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap }
@font-face { font-family: IBM Plex Serif; src: url("/ibm-plex-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap }
@font-face { font-family: IBM Plex Mono; src: url("/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap }
@keyframes going-in-from-right {
  0% { transform: translateX(100%); opacity: 1 }
  100% { transform: none; opacity: 1 }
}
@keyframes going-out-to-left {
  0% { transform: none; opacity: 1 }
  100% { transform: translateX(-30%); opacity: 0.6 }
}
@keyframes going-in-from-left {
  0% { transform: translateX(-30%); opacity: 0.6 }
  100% { transform: none; opacity: 1 }
}
@keyframes going-out-to-right {
  0% { transform: none; opacity: 1 }
  100% { transform: translateX(100%); opacity: 1 }
}
@keyframes going-fade-in {
  0% { opacity: 0 }
  100% { opacity: 1 }
}
@keyframes going-fade-out {
  0% { opacity: 1 }
  100% { opacity: 0 }
}
@keyframes credit-arrives {
  0% { opacity: 0; translate: 0 8px }
  100% { opacity: 1; translate: 0 0 }
}
@keyframes button-working {
  0% { clip-path: inset(calc(100% - 2px) 100% 0 -40%) }
  100% { clip-path: inset(calc(100% - 2px) -40% 0 100%) }
}
@keyframes group-reading {
  0% { opacity: var(--aside) }
  50% { opacity: 1 }
  100% { opacity: var(--aside) }
}
@keyframes looks-turning {
  100% { rotate: 360deg }
}
@keyframes pager-turns {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}
@keyframes writing-plane-in {
  0% { opacity: 0; scale: 0.96 }
  100% { opacity: 1; scale: 1 }
}
@keyframes acts-menu-asks {
  0% { filter: blur(2px); opacity: 0; transform: translateY(2px) }
  100% { filter: none; opacity: 1; transform: translateY(0) }
}
@keyframes acts-menu-melts {
  0% { filter: url("#acts-menu-goo") }
  100% { filter: none }
}
@keyframes acts-menu-parts-left {
  0% { transform: translateX(52%) }
  100% { transform: translateX(0) }
}
@keyframes acts-menu-parts {
  0% { transform: translateX(-52%) }
  100% { transform: translateX(0) }
}
@keyframes confirm-settles {
  0% { opacity: 0; transform: translateY(-4px) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes drawer-shimmer {
  0% { transform: translateX(-100%) }
  100% { transform: translateX(100%) }
}
@keyframes drawer-sheet-fade {
  0% { opacity: 0 }
  100% { opacity: 1 }
}
@keyframes recommendation-arrives {
  0% { opacity: 0; transform: translateY(6px) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes tag-picker-arrives {
  0% { opacity: 0; transform: scale(0.97) }
  100% { opacity: 1; transform: scale(1) }
}
@keyframes to-whom-arrives {
  0% { opacity: 0; transform: translateY(6px) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes writer-arrives {
  0% { opacity: 0; transform: translateY(4px) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes doing-turns {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}
@keyframes prompt-settles {
  0% { opacity: 0; transform: translateY(-4px) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes undoing-rises {
  0% { opacity: 0; transform: translateY(8px) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes undoing-holds {
  0% { transform: scaleX(1) }
  100% { transform: scaleX(0) }
}
:root { --paper: #e5ebdc; --registration: 0.00px; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); --ink-cocoa: #221a13; --on-cocoa: #1f1810; --ink-crust: #e2e7da; --on-crust: #cbd5bc; --ink-brick: #8f4541; --on-brick: #804038; --cocoa-over-crust: #1b160e; --cocoa-over-brick: #110604; --crust-over-brick: #723a30; --cocoa-over-crust-over-brick: #0f0604; --ink: #1f1810; --muted: #6a685e; --rule: #929286; --ghost: #d7dcce; --tint: #e1e7d8; --ground: #F7F5EE; --hair: #cbd5bc; --shade: #1b160e; --lift: #221a131a; --flag: #804038; --cast-contact: #1f18101f; --cast-near: #1f181014; --cast-far: #1f18100d; --scrim: #1f18103d; --veil: hsl(var(--shadow-ink) / 0.45); --glass-hair: #cbd5bc99; --on-plane: #1f1810; --catch-light: 90 30% 98%; --edge-card: color-mix(in srgb, var(--ink) 8%, transparent); --edge-sheet: color-mix(in srgb, var(--ink) 14%, transparent); --top-light: inset 0 1px 0 hsl(var(--catch-light) / 0.85); --under: inset 0 -1px 0 hsl(var(--shadow-ink) / 0.08); --contact: 0 0 0 1px hsl(84 14% 72% / 0.55); --lift-key: 0 1px 1px hsl(var(--shadow-ink) / 0.09),
    0 2px 2px hsl(var(--shadow-ink) / 0.07),
    0 3px 5px hsl(var(--shadow-ink) / 0.05); --pressed: inset 0 2px 3px hsl(var(--shadow-ink) / 0.16),
    inset 0 1px 1px hsl(var(--shadow-ink) / 0.09),
    inset 0 -1px 0 hsl(var(--catch-light) / 0.55); --well: inset 0 2px 3px hsl(var(--shadow-ink) / 0.18),
    inset 0 1px 1px hsl(var(--shadow-ink) / 0.14),
    inset 0 4px 8px hsl(var(--shadow-ink) / 0.07),
    inset 0 -1px 0 hsl(var(--catch-light) / 0.7), 0 0 0 1px var(--bound); --sheet: #F4F6EC; --sheet-bright: #FAFBF3; --key-face: #eaeee1; --key-down: #dce2d2; --mark-lift: #9A504B; --note-face: color-mix(in srgb, var(--ink) 4%, var(--paper)); --note-ink: var(--ink); --note-edge: color-mix(in srgb, var(--ink) 12%, transparent); --tone-plain: #1f1810; --tone-name: #322d25ff; --tone-type: #524f45; --tone-number: #524f45; --tone-string: #6a685e; --tone-comment: #7a796e; --tone-punctuation: #727166; --tone-keyword: #6a342e; --tone-added: #d9ded0; --tone-removed: #dbdacc; --mark: #804038; --mark-ghost: #d9d6c8; --on-mark: #e5ebdc; --on-flag: #e5ebdc; --face: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif; --figures: 'IBM Plex Mono', ui-monospace, monospace; --prose: 'IBM Plex Serif', ui-serif, Georgia, serif; --type-1-down: 11.25px; --type-0: 15px; --type-1: 20px; --type-2: 26.65px; --type-3: 35.53px; --type-4: 47.36px; --tracking-1-down: 0.0091em; --tracking-0: 0em; --tracking-1: -0.0091em; --tracking-2: -0.0182em; --tracking-3: -0.0274em; --tracking-4: -0.0365em; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --radius-1: 4px; --radius-2: 8px; --radius-3: 12px; --radius-4: 16px; --radius-round: 999px; --row: 64px; --blur: blur(12px) saturate(1.15); --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-state: cubic-bezier(0.32, 0.72, 0, 1); --ease-move: cubic-bezier(0.65, 0, 0.35, 1); --fast: 90ms; --quick: 140ms; --settled: 200ms; --follows: 40ms; --page-slide: 300ms; --layer-1: 1; --layer-2: 2; --layer-3: 3; --laid: 0 1px 0 var(--cast-contact); --raised: 0 1px 0 var(--cast-contact), 0 2px 6px -2px var(--cast-near); --held: 0 1px 0 var(--cast-contact), 0 2px 6px -2px var(--cast-near), 0 12px 32px -12px var(--cast-far); --stacked: 0 1px 0 var(--cast-contact), 0 2px 6px -2px var(--cast-near), 0 12px 32px -12px var(--cast-far), 0 32px 80px -32px var(--cast-far); --ring: 2px solid var(--mark); --ring-offset: 2px; --ring-inset: inset 0 0 0 1px var(--mark); --column: 1062px; --hold: 16px; --sunk: #cfd7c1; --stack-radius: 16px; --whisper: hsl(var(--shadow-ink) / 0.12); --veil-over: hsl(var(--shadow-ink) / 0.32); --grab: hsl(var(--shadow-ink) / 0.24); --skeleton: hsl(var(--shadow-ink) / 0.07); --shimmer: hsl(var(--catch-light) / 0.75); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-top: env(safe-area-inset-top, 0px); --edge: #b9c3ab; --muted-deep: #5e5c53; --bound: hsl(84 15% 47%); --shadow-ink: 84 18% 12%; --lift-1: 0 1px 1px hsl(var(--shadow-ink) / 0.05),
    0 2px 2px hsl(var(--shadow-ink) / 0.05),
    0 4px 5px hsl(var(--shadow-ink) / 0.045),
    0 8px 10px hsl(var(--shadow-ink) / 0.04); --lift-2: 0 1px 2px hsl(var(--shadow-ink) / 0.06),
    0 3px 5px hsl(var(--shadow-ink) / 0.055),
    0 8px 14px hsl(var(--shadow-ink) / 0.05),
    0 16px 28px hsl(var(--shadow-ink) / 0.045); --settles: cubic-bezier(0.22, 1, 0.36, 1); --in: 60ms; --out: 180ms; --act-cast: none; --act-over: auto; --act-stands: static; --grain-desk: 0.04; --act-shade: color-mix(in srgb, var(--ink) 22%, transparent); --act-shade-over: color-mix(in srgb, var(--paper) 22%, transparent); --well-face: color-mix(in srgb, var(--ink) 4.5%, transparent); --edge-firm: color-mix(in srgb, var(--ink) 24%, transparent); --stipple: color-mix(in srgb, var(--ink) 42%, transparent); --stipple-line: color-mix(in srgb, var(--ink) 34%, transparent); --stipple-soft: color-mix(in srgb, var(--ink) 26%, transparent); --stipple-step: drop-shadow(0 1px 0 color-mix(in srgb, var(--ink) 16%, transparent)) }
:root .paper { background-color: var(--paper); color: var(--ink) }
:root .grained::after { content: ""; position: absolute; inset: 0; filter: url(#with-love-grain); pointer-events: none; mix-blend-mode: multiply }
:root .grained { position: relative }
:root .overprint { mix-blend-mode: multiply }
:root .misregistered { transform: translate(var(--registration), var(--registration)) }
:where(:root) { color-scheme: light; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior: none; --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --craft-fast: var(--fast); --craft-normal: var(--quick); --craft-smooth: var(--settled); --craft-spring: var(--settled); --craft-slow: var(--settled); --craft-ease-in-out: var(--ease-move); --craft-ease-out: var(--ease-out); --craft-emphasized: var(--ease-state) }
:where(body) { overscroll-behavior: none }
:where(a, button, summary, label, select, [role="button"], [role="tab"], [role="menuitem"], [role="option"]) { touch-action: manipulation }
:where(button, summary, [role="button"], [role="tab"], [role="menuitem"], .frame-side) { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none }
:where(input, textarea, select) { touch-action: manipulation }
:where(#app:not(:has(> .frame))) { padding-top: var(--safe-top); padding-right: var(--safe-right); padding-bottom: var(--safe-bottom); padding-left: var(--safe-left) }
@view-transition { navigation: auto }
:where(#__app-page, main#app) { view-transition-name: page }
:root[data-going] { view-transition-name: none }
:root[data-going="forward"]::view-transition-new(page) { animation: going-in-from-right var(--page-slide) var(--ease-state) both; background-color: var(--paper) }
:root[data-going="forward"]::view-transition-old(page) { animation: going-out-to-left var(--page-slide) var(--ease-state) both; background-color: var(--paper) }
:root[data-going="back"]::view-transition-new(page) { animation: going-in-from-left var(--page-slide) var(--ease-state) both; background-color: var(--paper) }
:root[data-going="back"]::view-transition-old(page) { animation: going-out-to-right var(--page-slide) var(--ease-state) both; background-color: var(--paper); z-index: 1 }
:root[data-going="fade"]::view-transition-new(page) { animation: going-fade-in var(--quick) var(--ease-out) both; background-color: var(--paper) }
:root[data-going="fade"]::view-transition-old(page) { animation: going-fade-out var(--quick) var(--ease-out) both; background-color: var(--paper) }
:where(.app-connection) { position: fixed; left: 0; right: 0; bottom: calc(var(--reserved-bottom, 0px) + var(--safe-bottom)); z-index: calc(var(--sheet-over, 30) + 1); box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--rule); background-color: var(--paper); color: var(--ink); font-family: var(--prose); font-size: var(--type-1-down); line-height: 1.45; text-align: center; user-select: none; translate: 0 0; opacity: 1; transition: translate var(--quick) var(--ease-out), opacity var(--quick) var(--ease-out) }
:where(.app-connection[data-state="away"]) { translate: 0 calc(100% + var(--reserved-bottom, 0px) + var(--safe-bottom)); opacity: 0; transition: translate var(--quick) var(--ease-out), opacity var(--quick) var(--ease-out) }
:where(.app-connection) :where(.app-connection-press) { margin: 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer }
:where(.app-connection) :where(.app-connection-press):disabled { cursor: default; opacity: 0.6 }
:where(#app) { container-type: inline-size }
.credit { --credit-open: 0fr; --layer-credit: 100000; z-index: var(--layer-credit); position: fixed; bottom: 20px; right: 20px; display: flex; align-items: center; height: 30px; padding: 0 12px; box-sizing: border-box; border-radius: 2px; background-color: #111111; color: #FFFFFF; font: 500 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0.02em; word-spacing: normal; text-transform: none; text-indent: 0; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 2px rgba(17,17,17,.16), 0 6px 16px rgba(17,17,17,.10), 0 0 0 0 #80403800, inset 0 0 0 1px rgba(255,255,255,.12); transform-origin: 100% 100%; transition: box-shadow 160ms cubic-bezier(0.32, 0.72, 0, 1), scale 120ms cubic-bezier(0.32, 0.72, 0, 1); animation-name: credit-arrives; animation-duration: 400ms; animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); animation-delay: 800ms; animation-fill-mode: both }
.credit-lead { min-width: 0; overflow: hidden; color: #8C8C8C; font-weight: 400; opacity: 0; translate: -4px 0; transition: opacity 160ms cubic-bezier(0.32, 0.72, 0, 1), translate 160ms cubic-bezier(0.32, 0.72, 0, 1) }
.credit-name { transition: color 160ms cubic-bezier(0.32, 0.72, 0, 1) }
.credit-mark { min-width: 0; overflow: hidden; display: block }
.credit-arrow { display: block; fill: none; stroke: #8C8C8C; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 160ms cubic-bezier(0.32, 0.72, 0, 1) }
.credit-fold { display: grid; grid-template-columns: 0fr; overflow: hidden; transition: grid-template-columns 160ms cubic-bezier(0.32, 0.72, 0, 1) }
@media (hover: hover) and (pointer: fine) {
  .credit:hover { box-shadow: 0 1px 2px rgba(17,17,17,.16), 0 6px 16px rgba(17,17,17,.10), 0 0 0 3px #80403824, inset 0 0 0 1px rgba(255,255,255,.12); transition: box-shadow 220ms cubic-bezier(0.32, 0.72, 0, 1), scale 120ms cubic-bezier(0.32, 0.72, 0, 1) }
}
.credit:focus-visible { box-shadow: 0 1px 2px rgba(17,17,17,.16), 0 6px 16px rgba(17,17,17,.10), 0 0 0 3px #80403824, inset 0 0 0 1px rgba(255,255,255,.12); transition: box-shadow 220ms cubic-bezier(0.32, 0.72, 0, 1), scale 120ms cubic-bezier(0.32, 0.72, 0, 1) }
@media (hover: hover) and (pointer: fine) {
  .credit:hover .credit-fold { grid-template-columns: 1fr; transition: grid-template-columns 220ms cubic-bezier(0.32, 0.72, 0, 1) }
}
.credit:focus-visible .credit-fold { grid-template-columns: 1fr; transition: grid-template-columns 220ms cubic-bezier(0.32, 0.72, 0, 1) }
@media (hover: hover) and (pointer: fine) {
  .credit:hover .credit-lead { opacity: 1; translate: 0 0; transition: opacity 160ms cubic-bezier(0.32, 0.72, 0, 1) 60ms, translate 160ms cubic-bezier(0.32, 0.72, 0, 1) 60ms }
}
.credit:focus-visible .credit-lead { opacity: 1; translate: 0 0; transition: opacity 160ms cubic-bezier(0.32, 0.72, 0, 1) 60ms, translate 160ms cubic-bezier(0.32, 0.72, 0, 1) 60ms }
@media (hover: hover) and (pointer: fine) {
  .credit:hover .credit-name { color: #804038; transition: color 160ms cubic-bezier(0.32, 0.72, 0, 1) 60ms }
}
.credit:focus-visible .credit-name { color: #804038; transition: color 160ms cubic-bezier(0.32, 0.72, 0, 1) 60ms }
@media (hover: hover) and (pointer: fine) {
  .credit:hover .credit-arrow { opacity: 1; transition: opacity 120ms cubic-bezier(0.32, 0.72, 0, 1) 120ms }
}
.credit:focus-visible .credit-arrow { opacity: 1; transition: opacity 120ms cubic-bezier(0.32, 0.72, 0, 1) 120ms }
.credit:active { scale: 0.97 }
.credit-within { position: relative }
.credit-within .credit { position: absolute }
:root:has(body > .credit) { --reserved-bottom: 50px }
.c-button { font: inherit; font-family: var(--face); font-size: var(--type-1-down); font-weight: 500; color: var(--paper); background-color: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius-1, 4px); padding: var(--space-2) var(--space-4); align-self: start; justify-self: start; cursor: pointer; text-align: left; overflow-wrap: break-word; display: inline-grid; justify-items: start; align-items: center; position: relative; min-height: var(--space-6); min-width: var(--space-6) }
.c-button> * { grid-area: 1 / 1 }
@media (hover: hover) and (pointer: fine) {
  .c-button:hover { color: var(--on-mark); background-color: var(--mark); border-color: var(--mark) }
}
.c-button:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.c-button:active { transform: translateY(1px) }
.c-button--quiet { color: var(--ink); background-color: transparent; border-color: transparent; border-radius: var(--radius-1, 4px); padding: var(--space-1) var(--space-2) }
@media (hover: hover) and (pointer: fine) {
  .c-button--quiet:hover { background-color: var(--mark-ghost); border-color: var(--mark-ghost); color: var(--ink) }
}
.c-button--quiet:active { transform: translateY(1px) }
.c-button--grave { color: var(--mark); background-color: transparent; border-color: transparent; border-radius: var(--radius-1, 4px); padding: var(--space-1) var(--space-2) }
@media (hover: hover) and (pointer: fine) {
  .c-button--grave:hover { background-color: var(--mark-ghost); border-color: var(--mark-ghost); color: var(--mark) }
}
.c-button--grave:active { transform: translateY(1px) }
.c-button--shed { color: var(--muted); background-color: var(--ghost); border-color: transparent; padding: var(--space-1) var(--space-2) var(--space-1) 0; border-radius: 0 var(--radius-1, 4px) var(--radius-1, 4px) 0; margin-left: -2px; min-width: 0; min-height: 0; justify-items: center; font-size: var(--type-1-down); line-height: 1; transition: color 90ms cubic-bezier(0.32, 0.72, 0, 1) }
@media (hover: hover) and (pointer: fine) {
  .c-button--shed:hover { color: var(--ink); background-color: var(--mark-ghost); border-color: transparent }
}
.c-button--shed:active { transform: translateY(1px) }
.c-button:disabled { cursor: default; color: var(--muted); background-color: var(--ghost); border-color: var(--rule) }
@media (hover: hover) and (pointer: fine) {
  .c-button:disabled:hover { cursor: default; color: var(--muted); background-color: var(--ghost); border-color: var(--rule) }
}
.c-button:disabled:active { transform: none }
.c-button--working { cursor: progress }
.c-button:is([aria-busy="true"], form[aria-busy="true"] button[type="submit"]) { cursor: progress }
.c-button-held { visibility: hidden }
.c-button-waited { font-family: var(--figures); font-variant-numeric: tabular-nums; white-space: nowrap }
.c-button-steps { font-family: var(--face); font-size: var(--type-1-down); color: var(--muted); align-self: center }
.c-button-steps > summary { cursor: pointer; min-height: var(--space-6); min-width: var(--space-6) }
.c-button-steps ol { margin: 0; padding: var(--space-1) var(--space-4); list-style: none }
.c-button-said { font-family: var(--face); font-size: var(--type-1-down); color: var(--ink); background-color: var(--mark-ghost); padding: var(--space-1) var(--space-2); align-self: center }
.c-button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-color: currentColor; clip-path: inset(calc(100% - 2px) 0 0 0); pointer-events: none; opacity: 0 }
.c-button--working::after { opacity: 1; transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1); animation-name: button-working; animation-duration: 700ms; animation-timing-function: linear; animation-iteration-count: infinite }
.c-button:is([aria-busy="true"], form[aria-busy="true"] button[type="submit"])::after { opacity: 1; transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1); animation-name: button-working; animation-duration: 700ms; animation-timing-function: linear; animation-iteration-count: infinite }
[data-waiting] .c-button { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-button:empty { min-height: 1lh; padding-inline: 3ch }
.c-text { font-family: var(--face); font-size: var(--type-0); color: var(--ink); margin: 0; overflow-wrap: anywhere }
.c-text--muted { color: var(--muted) }
.c-text--mark { color: var(--ink); background-color: var(--mark-ghost); box-shadow: none; border-radius: var(--radius-2); padding: 8px 12px }
.c-text--label { color: var(--muted); font-size: var(--type-1-down); text-transform: uppercase; letter-spacing: 0.08em }
.c-text--figures { font-family: var(--figures); font-size: var(--type-1-down); font-variant-numeric: tabular-nums }
.c-text--fit-wrap { overflow-wrap: break-word }
.c-text--fit-break { overflow-wrap: anywhere; word-break: break-word }
.c-text--fit-clip { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.c-text--fit-whole { white-space: nowrap }
.c-text--fit-scroll { display: block; min-width: 0; max-width: 100%; white-space: nowrap; overflow-x: auto }
[data-waiting] .c-text { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-text:empty { min-height: 1lh; padding-inline: 3ch }
.c-input { font: inherit; font-family: var(--face); font-size: var(--type-0); color: var(--ink); background-color: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: var(--space-2) 0; min-height: var(--space-6); min-width: var(--space-6) }
.c-input:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; border-bottom-color: var(--mark) }
[data-waiting] .c-input { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-input:empty { min-height: 1lh; padding-inline: 3ch }
.c-heading { font-family: var(--face); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin: 0; overflow-wrap: anywhere }
.c-heading--fit-wrap { overflow-wrap: break-word }
.c-heading--fit-break { overflow-wrap: anywhere; word-break: break-word }
.c-heading--fit-clip { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.c-heading--fit-whole { white-space: nowrap }
.c-heading--fit-scroll { display: block; min-width: 0; max-width: 100%; white-space: nowrap; overflow-x: auto }
[data-waiting] .c-heading { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-heading:empty { min-height: 1lh; padding-inline: 3ch }
.c-link { font-family: var(--face); font-size: var(--type-0); color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: 3px; overflow-wrap: anywhere }
@media (hover: hover) and (pointer: fine) {
  .c-link:hover { text-decoration-color: var(--rule) }
}
.c-link:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.c-link--muted { color: var(--muted) }
@media (hover: hover) and (pointer: fine) {
  .c-link--muted:hover { color: var(--ink) }
}
.c-link--here { color: var(--ink); text-decoration-color: var(--mark); text-decoration-thickness: 2px; font-weight: 500; text-decoration: none }
.c-link--chip:has(+ .c-form .c-button--shed) { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: var(--space-1) }
.c-link--chip { font-size: var(--type-1-down); background-color: var(--ghost); border-radius: var(--radius-1); padding: var(--space-1) var(--space-2); text-decoration-line: none; white-space: nowrap; transition: background-color 90ms cubic-bezier(0.32, 0.72, 0, 1) }
@media (hover: hover) and (pointer: fine) {
  .c-link--chip:hover { background-color: var(--mark-ghost) }
}
.c-link--working { text-decoration-color: var(--mark); text-decoration-thickness: 2px }
@media (hover: hover) and (pointer: fine) {
  .c-link--working:hover { text-decoration-color: var(--mark); text-decoration-thickness: 2px }
}
.c-link--fit-wrap { overflow-wrap: break-word }
.c-link--fit-break { overflow-wrap: anywhere; word-break: break-word }
.c-link--fit-clip { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.c-link--fit-whole { white-space: nowrap }
.c-link--fit-scroll { display: block; min-width: 0; max-width: 100%; white-space: nowrap; overflow-x: auto }
[data-waiting] .c-link { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-link:empty { min-height: 1lh; padding-inline: 3ch }
.c-more { font-family: var(--face); font-size: var(--type-0); color: var(--ink); display: block; box-sizing: border-box; width: 100%; min-height: var(--space-12); padding: var(--space-4); border-top: 1px solid var(--rule); text-align: center; text-decoration: none }
@media (hover: hover) and (pointer: fine) {
  .c-more:hover { background-color: var(--ghost) }
}
.c-more:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.c-more--working { color: var(--muted); border-color: var(--rule) }
@media (hover: hover) and (pointer: fine) {
  .c-more--working:hover { color: var(--muted); border-color: var(--rule) }
}
[data-waiting] .c-more { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-more:empty { min-height: 1lh; padding-inline: 3ch }
.c-group { box-sizing: border-box }
.c-group--row { display: flex; flex-direction: row; flex-wrap: wrap }
.c-group--row.c-group--nowrap { flex-wrap: nowrap }
.c-group--column { display: flex; flex-direction: column }
.c-group--wide { flex: 1; min-width: 0 }
.c-group--gap-xs { gap: var(--space-1) }
.c-group--gap-sm { gap: var(--space-2) }
.c-group--gap-md { gap: var(--space-4) }
.c-group--gap-lg { gap: var(--space-8) }
.c-group--align-start { align-items: flex-start }
.c-group--align-center { align-items: center }
.c-group--align-end { align-items: flex-end }
.c-group--align-baseline { align-items: baseline }
.c-group--align-between { justify-content: space-between }
.c-group--align-stretch { align-items: stretch }
.c-group--padding-xs { padding: var(--space-1) }
.c-group--padding-sm { padding: var(--space-2) }
.c-group--padding-md { padding: var(--space-4) }
.c-group--padding-lg { padding: var(--space-8) }
.c-group--border-top { border-top: 1px solid var(--hair) }
.c-group--border-bottom { border-bottom: 1px solid var(--hair) }
.c-group--border-double-top { border-top: 3px double var(--hair) }
.c-group--border-double-bottom { border-bottom: 3px double var(--hair) }
.c-group--overflow-scroll { max-width: 100%; min-width: 0; overflow-x: auto }
.c-group--overflow-clip { max-width: 100%; min-width: 0; overflow-x: hidden }
.c-group--overflow-scroll:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.c-group--overflow-clip:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.c-group--holds-many > * { contain-intrinsic-height: var(--row, 4rem); contain-intrinsic-size: auto var(--row, 4rem); content-visibility: auto }
.c-group--holds-reading { --aside: 0.25 }
.c-group--holds-reading > * { contain-intrinsic-height: var(--row, 4rem); contain-intrinsic-size: auto var(--row, 4rem); content-visibility: auto; animation-name: group-reading; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: view(); animation-range: cover 35% cover 65% }
.c-image { display: block; max-width: 100%; height: auto; background-color: var(--ghost, transparent); aspect-ratio: auto; object-fit: contain }
.c-image--wide { aspect-ratio: 16 / 9 }
.c-image--screen { aspect-ratio: 16 / 10 }
.c-image--square { aspect-ratio: 1 / 1 }
.c-image--tall { aspect-ratio: 4 / 5 }
.c-image--fills { object-fit: cover; width: 100% }
.c-image--bordered { border: 1px solid var(--rule) }
.c-image--place { align-items: center; border: 1px dashed var(--hair); color: var(--muted); display: flex; font-size: var(--type-1-down); justify-content: center; min-height: var(--space-16); padding: var(--space-4); text-align: center; text-wrap: balance }
[data-waiting] .c-image { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-image:empty { min-height: 1lh; padding-inline: 3ch }
.c-form { display: flex; flex-direction: row; flex-wrap: wrap; margin: 0 }
.c-form--column { flex-direction: column; flex-wrap: nowrap }
.c-form--gap-xs { gap: var(--space-1) }
.c-form--gap-sm { gap: var(--space-2) }
.c-form--gap-md { gap: var(--space-4) }
.c-form--gap-lg { gap: var(--space-8) }
.c-form--align-start { align-items: flex-start }
.c-form--align-center { align-items: center }
.c-form--align-end { align-items: flex-end }
.c-form--align-baseline { align-items: baseline }
.c-form--align-stretch { align-items: stretch }
.c-form--working { cursor: progress }
.c-form-doing { font-family: var(--face); font-size: var(--type-1-down); color: var(--muted); margin: 0; align-self: center }
.c-form:not(.c-form--column) > .c-form-doing { flex-basis: 100% }
.c-form-waited { font-family: var(--figures); font-variant-numeric: tabular-nums; white-space: nowrap }
.c-form-steps { font-family: var(--face); font-size: var(--type-1-down); color: var(--muted); align-self: center }
.c-form-steps ol { margin: 0; padding: var(--space-1) var(--space-4); list-style: none }
.c-form-said { font-family: var(--face); font-size: var(--type-1-down); color: var(--ink); background-color: var(--mark-ghost); padding: var(--space-1) var(--space-2); margin: 0; align-self: center; overflow-wrap: break-word }
[data-waiting] .c-form { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-form:empty { min-height: 1lh; padding-inline: 3ch }
.c-field { display: flex; flex-direction: column; gap: var(--space-1); font-family: var(--face); font-size: var(--type-1-down); color: var(--muted) }
.c-field input { font: inherit; font-family: var(--face); font-size: var(--type-0); letter-spacing: 0; text-transform: none; color: var(--ink); background-color: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-1); padding: var(--space-2) var(--space-3); transition: border-color 90ms cubic-bezier(0.32, 0.72, 0, 1); min-height: var(--space-6); min-width: var(--space-6) }
@media (hover: hover) and (pointer: fine) {
  .c-field input:hover { border-color: var(--ink) }
}
.c-field input:focus-visible { border-color: var(--mark); box-shadow: 0 0 0 1px var(--mark); outline: none }
.c-field-said { font-family: var(--face); font-size: var(--type-1-down); color: var(--ink); background-color: var(--mark-ghost); padding: var(--space-1) var(--space-2); overflow-wrap: break-word }
[data-waiting] .c-field { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-field:empty { min-height: 1lh; padding-inline: 3ch }
.c-choice { display: flex; flex-direction: column; gap: var(--space-1); font-family: var(--face); font-size: var(--type-1-down); color: var(--muted) }
.c-choice select { font: inherit; font-family: var(--face); font-size: var(--type-0); letter-spacing: 0; text-transform: none; color: var(--ink); background-color: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-1); padding: var(--space-2) var(--space-3); transition: border-color 90ms cubic-bezier(0.32, 0.72, 0, 1); min-height: var(--space-6); min-width: var(--space-6); appearance: none; padding-inline-end: var(--space-6) }
@media (hover: hover) and (pointer: fine) {
  .c-choice select:hover { border-color: var(--ink) }
}
.c-choice select:focus-visible { border-color: var(--mark); box-shadow: 0 0 0 1px var(--mark); outline: none }
.c-choice-menu { display: inline-grid; position: relative; color: var(--muted) }
.c-choice-menu::after { content: ""; position: absolute; inset-inline-end: var(--space-3); top: 50%; padding: 3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); pointer-events: none }
.c-choice-menu > select { color: var(--ink); width: 100% }
[data-waiting] .c-choice { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-choice:empty { min-height: 1lh; padding-inline: 3ch }
.c-source { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; width: 100%; min-width: 0 }
.c-source > span { font-family: var(--figures); font-size: var(--type-1-down); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted) }
.c-source textarea { font: inherit; width: 100%; box-sizing: border-box; font-family: var(--figures); font-size: var(--type-1-down); line-height: 1.6; color: var(--ink); background-color: var(--ghost); border: 1px solid var(--rule); border-radius: 0; padding: var(--space-4); resize: vertical; white-space: pre; overflow-wrap: normal; overflow-x: auto; tab-size: 2 }
.c-source textarea:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; border-color: var(--ink) }
[data-waiting] .c-source { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-source:empty { min-height: 1lh; padding-inline: 3ch }
.c-mark { font-family: var(--figures); white-space: pre; tab-size: 2; color: var(--tone-plain) }
.c-mark--keyword { color: var(--tone-keyword) }
.c-mark--name { color: var(--tone-name) }
.c-mark--type { color: var(--tone-type) }
.c-mark--string { color: var(--tone-string) }
.c-mark--number { color: var(--tone-number) }
.c-mark--comment { color: var(--tone-comment) }
.c-mark--punctuation { color: var(--tone-punctuation) }
.c-mark--gutter { color: var(--muted); user-select: none; text-align: right; min-width: var(--space-12); padding-right: var(--space-4); flex-shrink: 0 }
[data-waiting] .c-mark { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-mark:empty { min-height: 1lh; padding-inline: 3ch }
.c-changed { display: flex; align-items: baseline; font-family: var(--figures); font-size: var(--type-1-down); line-height: 1.7; color: var(--ink) }
.c-changed--added { background-color: var(--tone-added) }
.c-changed--removed { background-color: var(--tone-removed) }
.c-changed .side { color: var(--rule); user-select: none; text-align: right; min-width: var(--space-8); padding-right: var(--space-2); flex-shrink: 0 }
.c-changed .sign { color: var(--muted); user-select: none; min-width: var(--space-4); flex-shrink: 0 }
.c-changed .said { white-space: pre; tab-size: 2; min-width: 0 }
[data-waiting] .c-changed { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-changed:empty { min-height: 1lh; padding-inline: 3ch }
.c-diagram { display: block; width: 100%; height: auto; max-width: 100% }
.c-diagram .box { fill: var(--paper); stroke: var(--rule) }
.c-diagram .box-marked { stroke: var(--mark) }
.c-diagram .says { font-family: var(--figures); font-size: 12px; fill: var(--ink) }
.c-diagram .says-marked { fill: var(--mark) }
.c-diagram .wire { fill: none; stroke: var(--rule) }
.c-diagram .head { fill: var(--rule); stroke: none }
.c-diagram .aside { font-family: var(--figures); font-size: 11px; fill: var(--muted) }
.c-chart { display: block; width: 100%; height: auto; max-width: 100% }
.c-chart .title { font-family: var(--face); font-size: 13px; fill: var(--ink) }
.c-chart .bar { fill: var(--ink) }
.c-chart .bar-marked { fill: var(--mark) }
.c-chart .trace { fill: none; stroke: var(--ink); stroke-width: 1.5 }
.c-chart .dot { fill: var(--mark) }
.c-chart .ground { stroke: var(--rule) }
.c-chart .axis { font-family: var(--figures); font-size: 10px; fill: var(--muted) }
.c-state { display: inline-flex; align-items: baseline; gap: var(--space-1); font-family: var(--face); font-size: var(--type-1-down); color: var(--ink); overflow-wrap: anywhere }
.c-state--bad .c-state-sign { color: var(--mark) }
.c-state--working { color: var(--muted) }
.c-state--waiting { color: var(--muted) }
.c-state--unknown { color: var(--muted) }
.c-state-sign { font-family: var(--figures); line-height: 1; flex-shrink: 0 }
.c-state-said { min-width: 0 }
[data-waiting] .c-state { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-state:empty { min-height: 1lh; padding-inline: 3ch }
.c-fold { font-family: var(--face); font-size: var(--type-0); color: var(--ink) }
.c-fold > summary { font-family: var(--face); font-size: var(--type-1-down); color: var(--ink); padding: var(--space-1) var(--space-2); cursor: pointer; min-height: var(--space-6); min-width: var(--space-6); overflow-wrap: anywhere }
@media (hover: hover) and (pointer: fine) {
  .c-fold > summary:hover { background-color: var(--ghost) }
}
.c-fold > summary:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.c-fold[open] > summary { border-bottom: 1px solid var(--rule) }
[data-waiting] .c-fold { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-fold:empty { min-height: 1lh; padding-inline: 3ch }
.c-table { max-width: 100%; min-width: 0; overflow-x: auto }
.c-table > table { border-collapse: collapse; width: 100% }
.c-table th { text-align: left; vertical-align: baseline }
.c-table td { vertical-align: baseline }
.c-table thead th { font-family: var(--figures); font-size: var(--type-1-down); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; padding: 0 var(--space-4) var(--space-2) 0; border-bottom: 1px solid var(--rule) }
.c-table tbody td { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--hair) }
.c-table tbody th { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--hair); font-weight: 400 }
.c-table th:last-child { padding-right: 0 }
.c-table td:last-child { padding-right: 0 }
.c-table:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
[data-waiting] .c-table { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-table:empty { min-height: 1lh; padding-inline: 3ch }
@media (hover: hover) and (pointer: fine) {
  .c-row:hover { background-color: var(--tint) }
}
.c-row:focus-within { background-color: var(--tint) }
.c-row .c-link { text-decoration-line: none }
@media (hover: hover) and (pointer: fine) {
  .c-row .c-link:hover { text-decoration-line: underline }
}
.c-row .c-row__offers { text-align: right; white-space: nowrap; opacity: 0; translate: 2px 0; transition: opacity 90ms cubic-bezier(0.32, 0.72, 0, 1), translate 90ms cubic-bezier(0.32, 0.72, 0, 1) }
@media (hover: hover) and (pointer: fine) {
  .c-row:hover .c-row__offers { opacity: 1; translate: 0; transition: opacity 140ms cubic-bezier(0.32, 0.72, 0, 1), translate 140ms cubic-bezier(0.32, 0.72, 0, 1) }
}
.c-row:focus-within .c-row__offers { opacity: 1; translate: 0; transition: opacity 140ms cubic-bezier(0.32, 0.72, 0, 1), translate 140ms cubic-bezier(0.32, 0.72, 0, 1) }
.c-prose { --prose-edge: var(--space-4); --prose-gutter: minmax(var(--prose-edge), 1fr); --prose-column: min(68ch, 100% - var(--prose-edge) * 2); color: var(--ink); display: grid; font-family: var(--prose); font-size: var(--type-0); grid-template-columns: [full-start] var(--prose-gutter) [text-start] var(--prose-column) [text-end] var(--prose-gutter) [full-end]; line-height: 1.6; row-gap: var(--space-6); text-wrap: pretty }
.c-prose--wide { --prose-column: min(96ch, 100% - var(--prose-edge) * 2) }
.c-prose--full { --prose-edge: 0px; --prose-column: 1fr }
.c-prose > * { grid-column: text }
.c-prose > .c-code { grid-column: full }
.c-prose > .c-table { grid-column: full }
.c-prose > .c-chart { grid-column: full }
.c-prose > .c-diagram { grid-column: full }
.c-prose > .c-heading { margin-block-start: var(--space-6) }
.c-prose > .c-rule { margin-inline: auto; max-width: 4rem }
.c-prose > :first-child { margin-block-start: 0 }
.c-prose .c-text { font-family: var(--prose) }
.c-prose .c-heading { font-family: var(--face); text-wrap: balance }
.c-prose h1.c-heading { font-size: var(--type-3); line-height: 1.15 }
.c-prose h2.c-heading { font-size: var(--type-1); line-height: 1.25 }
.c-prose h3.c-heading { font-size: var(--type-0); letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase }
.c-prose h4.c-heading { font-size: var(--type-1-down); letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase }
.c-prose h5.c-heading { color: var(--muted); font-size: var(--type-1-down); letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase }
.c-prose h6.c-heading { color: var(--muted); font-size: var(--type-1-down); font-weight: 400; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase }
.c-prose .c-link { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 3px }
@media (hover: hover) and (pointer: fine) {
  .c-prose .c-link:hover { text-decoration-color: var(--mark); text-decoration-thickness: 2px }
}
.c-prose .c-quote { border-left-color: var(--hair); color: var(--muted) }
.c-prose ul.c-group { display: grid; list-style: disc; padding-inline-start: var(--space-6); row-gap: var(--space-2) }
.c-prose ol.c-group { display: grid; list-style: decimal; padding-inline-start: var(--space-6); row-gap: var(--space-2) }
.c-prose li::marker { color: var(--rule) }
[data-waiting] .c-prose { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-prose:empty { min-height: 1lh; padding-inline: 3ch }
.c-code--inline { background-color: var(--ghost); border-radius: var(--radius-1); color: var(--ink); font-family: var(--figures); font-size: 0.9em; overflow-wrap: break-word; padding: 0.1em 0.3em }
[data-waiting] .c-code--inline { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-code--inline:empty { min-height: 1lh; padding-inline: 3ch }
.c-code--block { background-color: var(--tint); border: 1px solid var(--rule); color: var(--tone-plain); font-family: var(--figures); font-size: var(--type-1-down); line-height: 1.7; margin: 0; max-width: 100%; min-width: 0; padding: var(--space-2) 0; tab-size: 2 }
.c-code--block > code { display: block; font-family: inherit; overflow-x: auto; padding: 0 var(--space-4) }
.c-code--block > code:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.c-code--block .c-code__name { border-bottom: 1px solid var(--rule); color: var(--muted); display: block; font-family: var(--face); font-size: var(--type-1-down); letter-spacing: 0.08em; margin-bottom: var(--space-2); padding: 0 var(--space-4) var(--space-2); text-transform: uppercase; white-space: normal }
.c-code--block .c-code__line { align-items: baseline; display: flex; min-height: 1lh; white-space: pre }
.c-code--block .c-code__number { color: var(--muted); flex-shrink: 0; min-width: var(--space-12); padding-right: var(--space-4); text-align: right; user-select: none }
.c-code--block [data-tone="keyword"] { color: var(--tone-keyword) }
.c-code--block [data-tone="name"] { color: var(--tone-name) }
.c-code--block [data-tone="type"] { color: var(--tone-type) }
.c-code--block [data-tone="string"] { color: var(--tone-string) }
.c-code--block [data-tone="number"] { color: var(--tone-number) }
.c-code--block [data-tone="comment"] { color: var(--tone-comment) }
.c-code--block [data-tone="punctuation"] { color: var(--tone-punctuation) }
[data-waiting] .c-code--block .c-code__name { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-code--block .c-code__name:empty { min-height: 1lh; padding-inline: 3ch }
[data-waiting] .c-code--block .c-code__number { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-code--block .c-code__number:empty { min-height: 1lh; padding-inline: 3ch }
.c-quote { border-left: 2px solid var(--rule); color: var(--ink); font-family: var(--prose); margin: 0; padding-left: var(--space-4) }
.c-quote > cite { color: var(--muted); display: block; font-size: var(--type-1-down); font-style: normal; margin-block-start: var(--space-2) }
[data-waiting] .c-quote { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-quote:empty { min-height: 1lh; padding-inline: 3ch }
.c-rule { border: 0; border-top: 1px solid var(--rule); margin: 0 }
.c-tree { font-family: var(--face); font-size: var(--type-1-down); color: var(--ink); margin: 0; padding: 0; list-style: none; max-height: min(60vh, 26rem); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--rule) }
[data-waiting] .c-tree { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-tree:empty { min-height: 1lh; padding-inline: 3ch }
.c-tree__item { display: flex; align-items: center; gap: var(--space-1); min-height: var(--space-6); padding-inline-start: var(--space-2); padding-inline-end: var(--space-2); white-space: nowrap }
.c-tree__item[aria-level="1"] { padding-inline-start: calc(var(--space-2) + 0 * var(--space-4)) }
.c-tree__item[aria-level="2"] { padding-inline-start: calc(var(--space-2) + 1 * var(--space-4)) }
.c-tree__item[aria-level="3"] { padding-inline-start: calc(var(--space-2) + 2 * var(--space-4)) }
.c-tree__item[aria-level="4"] { padding-inline-start: calc(var(--space-2) + 3 * var(--space-4)) }
.c-tree__item[aria-level="5"] { padding-inline-start: calc(var(--space-2) + 4 * var(--space-4)) }
.c-tree__item[aria-level="6"] { padding-inline-start: calc(var(--space-2) + 5 * var(--space-4)) }
.c-tree__item[aria-level="7"] { padding-inline-start: calc(var(--space-2) + 6 * var(--space-4)) }
.c-tree__item[aria-level="8"] { padding-inline-start: calc(var(--space-2) + 7 * var(--space-4)) }
@media (hover: hover) and (pointer: fine) {
  .c-tree__item:hover { background-color: var(--tint) }
}
.c-tree__item:focus-within { background-color: var(--tint) }
.c-tree__item[aria-selected="true"] { background-color: var(--mark-ghost) }
.c-tree__item[aria-selected="true"] > * { font-weight: 500 }
.c-tree__item[aria-disabled="true"] { color: var(--muted) }
[data-waiting] .c-tree__item { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-tree__item:empty { min-height: 1lh; padding-inline: 3ch }
.c-tree__twist { font: inherit; font-family: var(--face); color: var(--muted); background-color: transparent; border: none; padding: 0; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-height: var(--space-6); min-width: var(--space-6) }
@media (hover: hover) and (pointer: fine) {
  .c-tree__twist:hover { color: var(--ink) }
}
.c-tree__twist:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.c-tree__twist .c-tree__twist__mark { font-size: var(--type-1-down) }
[data-waiting] .c-tree__twist .c-tree__twist__mark { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-tree__twist .c-tree__twist__mark:empty { min-height: 1lh; padding-inline: 3ch }
.c-tree__folder { font: inherit; font-family: var(--face); font-size: var(--type-1-down); color: var(--ink); background-color: transparent; border: none; padding: var(--space-1) var(--space-1); text-align: left; cursor: pointer; display: inline-flex; align-items: baseline; gap: var(--space-2); min-height: var(--space-6); min-width: var(--space-6); overflow-wrap: anywhere }
@media (hover: hover) and (pointer: fine) {
  .c-tree__folder:hover { text-decoration-line: underline }
}
.c-tree__folder:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.c-tree__folder .c-tree__folder__more { color: var(--muted); font-size: var(--type-1-down) }
[data-waiting] .c-tree__folder .c-tree__folder__more { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-tree__folder .c-tree__folder__more:empty { min-height: 1lh; padding-inline: 3ch }
.c-tree__file { font-family: var(--face); font-size: var(--type-1-down); color: var(--muted); padding: var(--space-1) var(--space-1); overflow-wrap: anywhere }
[data-waiting] .c-tree__file { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-tree__file:empty { min-height: 1lh; padding-inline: 3ch }
.c-ask-words { display: grid; gap: var(--space-2); font-family: var(--face); font-size: var(--type-0); line-height: 1.4; color: var(--ink) }
.c-ask-words .c-ask-words__label { display: block; line-height: 1.4 }
.c-ask-words .c-ask-words__box { font: inherit; font-family: var(--face); font-size: var(--type-0); line-height: 1.5; color: var(--ink); background-color: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-1); padding: var(--space-2) var(--space-3); width: 100%; box-sizing: border-box; min-height: var(--space-8); transition: background-color var(--fast) var(--ease-state) }
.c-ask-words .c-ask-words__box::placeholder { color: var(--rule) }
@media (hover: hover) and (pointer: fine) {
  .c-ask-words .c-ask-words__box:hover { border-color: var(--ink) }
}
.c-ask-words .c-ask-words__box:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; border-color: var(--mark) }
.c-ask-words textarea.c-ask-words__box { field-sizing: content; min-height: var(--space-16); max-height: 40vh; resize: none }
[data-waiting] .c-ask-words .c-ask-words__label { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-ask-words .c-ask-words__label:empty { min-height: 1lh; padding-inline: 3ch }
[data-waiting] .c-ask-words .c-ask-words__box { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-ask-words .c-ask-words__box:empty { min-height: 1lh; padding-inline: 3ch }
.c-ask-choice { display: grid; gap: var(--space-2); font-family: var(--face); font-size: var(--type-0); line-height: 1.4; color: var(--ink) }
.c-ask-choice .c-ask-choice__label { display: block; line-height: 1.4 }
.c-ask-choice .c-ask-choice__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-2) }
.c-ask-choice .c-ask-choice__option { appearance: none; position: relative; display: grid; gap: var(--space-2); align-content: start; text-align: left; font: inherit; font-family: var(--face); font-size: var(--type-1-down); line-height: 1.3; color: var(--muted); background-color: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius-2); padding: var(--space-3); cursor: pointer; box-shadow: var(--laid); translate: 0 0; transition: background-color var(--fast) var(--ease-state), translate var(--fast) var(--ease-out) }
@media (hover: hover) and (pointer: fine) {
  .c-ask-choice .c-ask-choice__option:hover { background-color: var(--tint); border-color: var(--rule); translate: 0 -1px }
}
.c-ask-choice .c-ask-choice__option:active { translate: 0 0 }
.c-ask-choice .c-ask-choice__option:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.c-ask-choice .c-ask-choice__option[data-chosen="true"] { border-color: var(--ink); background-color: var(--tint); box-shadow: var(--laid); color: var(--ink) }
.c-ask-choice .c-ask-choice__option[data-chosen="true"] .c-ask-choice__shown { border-color: var(--rule) }
.c-ask-choice .c-ask-choice__word { line-height: 1.3 }
.c-ask-choice .c-ask-choice__option[data-chosen="true"] .c-ask-choice__word { font-weight: 500 }
.c-ask-choice .c-ask-choice__tick { position: absolute; inset-block-start: var(--space-2); inset-inline-end: var(--space-2); width: var(--space-2); height: var(--space-2); border-radius: var(--radius-2); background-color: var(--mark); opacity: 0; scale: 0.4; transition: opacity var(--quick) var(--ease-out), scale var(--quick) var(--ease-out) }
.c-ask-choice .c-ask-choice__option[data-chosen="true"] .c-ask-choice__tick { opacity: 1; scale: 1 }
.c-ask-choice .c-ask-choice__shown { display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-1); border: 1px solid var(--hair); background-color: var(--ghost); overflow: hidden }
.c-ask-choice .c-ask-choice__shown > * { display: block; width: 100%; height: 100% }
.c-ask-choice .c-ask-choice__shown img { object-fit: cover }
[data-waiting] .c-ask-choice .c-ask-choice__label { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-ask-choice .c-ask-choice__label:empty { min-height: 1lh; padding-inline: 3ch }
[data-waiting] .c-ask-choice .c-ask-choice__option { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-ask-choice .c-ask-choice__option:empty { min-height: 1lh; padding-inline: 3ch }
[data-waiting] .c-ask-choice .c-ask-choice__word { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-ask-choice .c-ask-choice__word:empty { min-height: 1lh; padding-inline: 3ch }
.c-ask-scale { display: grid; gap: var(--space-2); font-family: var(--face); font-size: var(--type-0); line-height: 1.4; color: var(--ink) }
.c-ask-scale .c-ask-scale__label { display: block; line-height: 1.4 }
.c-ask-scale .c-ask-scale__reading { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; color: var(--muted); font-size: var(--type-1-down) }
.c-ask-scale .c-ask-scale__figure { font-family: var(--figures); font-variant-numeric: tabular-nums; font-size: var(--type-2); letter-spacing: var(--tracking-2); line-height: 1; color: var(--ink) }
.c-ask-scale .c-ask-scale__dial { position: relative; container-type: inline-size; margin-inline: var(--space-2); min-height: var(--space-6); border-radius: var(--radius-1); cursor: pointer; touch-action: none; user-select: none }
.c-ask-scale .c-ask-scale__dial:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.c-ask-scale .c-ask-scale__fill { position: absolute; inset-inline-start: 0; width: 100%; top: 50%; height: 2px; margin-top: -1px; border-radius: var(--radius-1); background-color: var(--ink); transform-origin: left center; scale: calc(var(--along, 0) / 100) 1; transition: scale var(--fast) var(--ease-state) }
.c-ask-scale .c-ask-scale__thumb { position: absolute; inset-inline-start: 0; top: 50%; width: var(--space-4); height: var(--space-4); border-radius: var(--space-4); background-color: var(--paper); border: 1px solid var(--ink); box-shadow: var(--laid); translate: calc(var(--along, 0) * 1cqw - 50%) -50%; scale: 1; transition: translate var(--fast) var(--ease-state), scale var(--fast) var(--ease-out) }
@media (hover: hover) and (pointer: fine) {
  .c-ask-scale .c-ask-scale__dial:hover .c-ask-scale__thumb { scale: 1.08 }
}
.c-ask-scale .c-ask-scale__dial[data-dragging="true"] .c-ask-scale__thumb { scale: 1.16; box-shadow: var(--raised) }
.c-ask-scale .c-ask-scale__dial[data-dragging="true"] .c-ask-scale__fill { transition: none }
.c-ask-scale .c-ask-scale__rail { position: absolute; inset-inline: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: var(--radius-1); background-color: var(--ghost); background-image: repeating-linear-gradient(to right, var(--rule) 0 1px, var(--ghost) 1px calc(100% / 9)) }
.c-ask-scale .c-ask-scale__ends { display: flex; justify-content: space-between; gap: var(--space-4); margin: 0; font-size: var(--type-1-down); color: var(--muted) }
[data-waiting] .c-ask-scale .c-ask-scale__label { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-ask-scale .c-ask-scale__label:empty { min-height: 1lh; padding-inline: 3ch }
[data-waiting] .c-ask-scale .c-ask-scale__reading { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-ask-scale .c-ask-scale__reading:empty { min-height: 1lh; padding-inline: 3ch }
[data-waiting] .c-ask-scale .c-ask-scale__figure { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-ask-scale .c-ask-scale__figure:empty { min-height: 1lh; padding-inline: 3ch }
[data-waiting] .c-ask-scale .c-ask-scale__ends { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-ask-scale .c-ask-scale__ends:empty { min-height: 1lh; padding-inline: 3ch }
.c-ask-mood { display: grid; gap: var(--space-2); font-family: var(--face); font-size: var(--type-0); line-height: 1.4; color: var(--ink) }
.c-ask-mood .c-ask-mood__label { display: block; line-height: 1.4 }
.c-ask-mood .c-ask-mood__reading { margin: 0; font-size: var(--type-0); line-height: 1.3; color: var(--ink) }
.c-ask-mood .c-ask-mood__dial { position: relative; container-type: inline-size; margin-inline: var(--space-2); min-height: var(--space-6); border-radius: var(--radius-1); cursor: pointer; touch-action: none; user-select: none }
.c-ask-mood .c-ask-mood__dial:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.c-ask-mood .c-ask-mood__fill { position: absolute; inset-inline-start: 0; width: 100%; top: 50%; height: 2px; margin-top: -1px; border-radius: var(--radius-1); background-color: var(--ink); transform-origin: left center; scale: calc(var(--along, 0) / 100) 1; transition: scale var(--fast) var(--ease-state) }
.c-ask-mood .c-ask-mood__thumb { position: absolute; inset-inline-start: 0; top: 50%; width: var(--space-4); height: var(--space-4); border-radius: var(--space-4); background-color: var(--paper); border: 1px solid var(--ink); box-shadow: var(--laid); translate: calc(var(--along, 0) * 1cqw - 50%) -50%; scale: 1; transition: translate var(--fast) var(--ease-state), scale var(--fast) var(--ease-out) }
@media (hover: hover) and (pointer: fine) {
  .c-ask-mood .c-ask-mood__dial:hover .c-ask-mood__thumb { scale: 1.08 }
}
.c-ask-mood .c-ask-mood__dial[data-dragging="true"] .c-ask-mood__thumb { scale: 1.16; box-shadow: var(--raised) }
.c-ask-mood .c-ask-mood__dial[data-dragging="true"] .c-ask-mood__fill { transition: none }
.c-ask-mood .c-ask-mood__rail { position: absolute; inset-inline: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: var(--radius-1); background-color: var(--ghost); background-image: repeating-linear-gradient(to right, var(--rule) 0 1px, var(--ghost) 1px calc(100% / 6)) }
.c-ask-mood .c-ask-mood__ends { display: flex; justify-content: space-between; gap: var(--space-4); margin: 0; font-size: var(--type-1-down); color: var(--muted) }
.c-ask-mood .c-ask-mood__ends span[data-near="true"] { color: var(--ink); font-weight: 500 }
[data-waiting] .c-ask-mood .c-ask-mood__label { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-ask-mood .c-ask-mood__label:empty { min-height: 1lh; padding-inline: 3ch }
[data-waiting] .c-ask-mood .c-ask-mood__reading { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-ask-mood .c-ask-mood__reading:empty { min-height: 1lh; padding-inline: 3ch }
[data-waiting] .c-ask-mood .c-ask-mood__ends { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-ask-mood .c-ask-mood__ends:empty { min-height: 1lh; padding-inline: 3ch }
.c-ask-samples { display: grid; gap: var(--space-2); font-family: var(--face); font-size: var(--type-0); line-height: 1.4; color: var(--ink) }
.c-ask-samples .c-ask-samples__label { display: block; line-height: 1.4 }
.c-ask-samples .c-ask-samples__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--space-2) }
.c-ask-samples .c-ask-samples__option { appearance: none; position: relative; display: grid; gap: var(--space-2); align-content: start; text-align: left; font: inherit; font-family: var(--face); font-size: var(--type-1-down); line-height: 1.3; color: var(--muted); background-color: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius-2); padding: var(--space-3); cursor: pointer; box-shadow: var(--laid); translate: 0 0; transition: background-color var(--fast) var(--ease-state), translate var(--fast) var(--ease-out); grid-template-rows: 1fr auto }
@media (hover: hover) and (pointer: fine) {
  .c-ask-samples .c-ask-samples__option:hover { background-color: var(--tint); border-color: var(--rule); translate: 0 -1px }
}
.c-ask-samples .c-ask-samples__option:active { translate: 0 0 }
.c-ask-samples .c-ask-samples__option:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.c-ask-samples .c-ask-samples__option[data-chosen="true"] { border-color: var(--ink); background-color: var(--tint); box-shadow: var(--laid); color: var(--ink) }
.c-ask-samples .c-ask-samples__option[data-chosen="true"] .c-ask-samples__shown { border-color: var(--rule) }
.c-ask-samples .c-ask-samples__word { line-height: 1.3 }
.c-ask-samples .c-ask-samples__option[data-chosen="true"] .c-ask-samples__word { font-weight: 500 }
.c-ask-samples .c-ask-samples__tick { position: absolute; inset-block-start: var(--space-2); inset-inline-end: var(--space-2); width: var(--space-2); height: var(--space-2); border-radius: var(--radius-2); background-color: var(--mark); opacity: 0; scale: 0.4; transition: opacity var(--quick) var(--ease-out), scale var(--quick) var(--ease-out) }
.c-ask-samples .c-ask-samples__option[data-chosen="true"] .c-ask-samples__tick { opacity: 1; scale: 1 }
.c-ask-samples .c-ask-samples__shown { display: block; container-type: inline-size; min-height: var(--space-16); max-height: 220px; overflow: hidden; align-self: stretch; padding: var(--space-2); border-radius: var(--radius-1); border: 1px solid var(--hair); background-color: var(--paper); box-shadow: var(--laid); pointer-events: none; contain: content }
[data-waiting] .c-ask-samples .c-ask-samples__label { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-ask-samples .c-ask-samples__label:empty { min-height: 1lh; padding-inline: 3ch }
[data-waiting] .c-ask-samples .c-ask-samples__option { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-ask-samples .c-ask-samples__option:empty { min-height: 1lh; padding-inline: 3ch }
[data-waiting] .c-ask-samples .c-ask-samples__word { background-color: var(--ghost); border-radius: 3px; color: transparent }
[data-waiting] .c-ask-samples .c-ask-samples__word:empty { min-height: 1lh; padding-inline: 3ch }
:where([data-look="act"]) { align-items: center; appearance: none; border: none; border-radius: var(--radius-2); box-sizing: border-box; cursor: pointer; display: inline-grid; font: inherit; justify-items: center; text-decoration: none; white-space: nowrap; background-color: var(--mark); color: var(--on-mark); box-shadow: var(--laid); transition: background-color var(--fast) var(--ease-state), box-shadow var(--fast) var(--ease-state), translate var(--fast) var(--ease-state) }
:where([data-look="act"]:active) { align-items: center; appearance: none; border: none; border-radius: var(--radius-2); box-sizing: border-box; cursor: pointer; display: inline-grid; font: inherit; justify-items: center; text-decoration: none; white-space: nowrap; translate: 0 1px; transition-duration: var(--fast) }
:where([data-look="key"]) { align-items: center; appearance: none; border: none; border-radius: var(--radius-2); box-sizing: border-box; cursor: pointer; display: inline-grid; font: inherit; justify-items: center; text-decoration: none; white-space: nowrap; background-color: var(--key-face); box-shadow: var(--top-light), var(--under), var(--contact), var(--lift-key); transition: background-color var(--fast) var(--ease-state), box-shadow var(--fast) var(--ease-state), translate var(--fast) var(--ease-state) }
:where([data-look="key"]:active) { align-items: center; appearance: none; border: none; border-radius: var(--radius-2); box-sizing: border-box; cursor: pointer; display: inline-grid; font: inherit; justify-items: center; text-decoration: none; white-space: nowrap; translate: 0 1px; transition-duration: var(--fast); background-color: var(--key-down); box-shadow: var(--pressed) }
:where([data-look="ghost"]) { align-items: center; appearance: none; border: none; border-radius: var(--radius-2); box-sizing: border-box; cursor: pointer; display: inline-grid; font: inherit; justify-items: center; text-decoration: none; white-space: nowrap; background-color: var(--ghost); box-shadow: var(--contact); color: var(--ink); transition: background-color var(--fast) var(--ease-state), box-shadow var(--fast) var(--ease-state), translate var(--fast) var(--ease-state) }
:where([data-look="ghost"]:active) { align-items: center; appearance: none; border: none; border-radius: var(--radius-2); box-sizing: border-box; cursor: pointer; display: inline-grid; font: inherit; justify-items: center; text-decoration: none; white-space: nowrap; translate: 0 1px; transition-duration: var(--fast) }
:where([data-look="quiet"]) { align-items: center; appearance: none; border: none; border-radius: var(--radius-2); box-sizing: border-box; cursor: pointer; display: inline-grid; font: inherit; justify-items: center; text-decoration: none; white-space: nowrap; color: var(--muted); transition: color var(--fast) var(--ease-state) }
:where([data-look="field"]) { background-color: var(--paper); box-shadow: 0 0 0 1px var(--rule); border-radius: var(--radius-2) }
:where([data-look="note"]) { background-color: var(--note-face); color: var(--note-ink); box-shadow: 0 0 0 1px var(--note-edge); border-radius: calc(var(--radius-1) + 2px) }
:where([data-look="card"]) { background-color: var(--sheet-bright); box-shadow: var(--contact), var(--laid); border-radius: var(--radius-2); transition: box-shadow var(--fast) var(--ease-state) }
:where([data-look="sheet"]) { background-color: var(--sheet); box-shadow: 0 0 0 1px var(--edge-sheet), var(--laid); border-radius: var(--radius-4) }
:where([data-look] .looks-word) { transition: opacity var(--quick) var(--ease-out) }
:where([data-look] .looks-short) { transition: opacity var(--quick) var(--ease-out) }
:where([data-look] .looks-wait) { align-items: center; display: inline-flex; grid-area: 1 / 1; height: 14px; justify-content: center; opacity: 0; scale: 0.8; transition: opacity var(--quick) var(--ease-out), scale var(--quick) var(--ease-out); width: 14px }
:where([data-look] .looks-turn) { display: block; height: 14px; transform-origin: 50% 50%; width: 14px }
:where([data-look] .looks-track) { fill: none; opacity: 0.2; stroke: currentColor; stroke-width: 1.5 }
:where([data-look] .looks-arc) { fill: none; stroke: currentColor; stroke-dasharray: 9.82 29.45; stroke-linecap: round; stroke-width: 1.5 }
:where([data-look][data-busy]) { background-color: var(--ghost); box-shadow: none; color: var(--muted); cursor: progress }
:where([data-look][data-busy] .looks-word) { opacity: 0 }
:where([data-look][data-busy] .looks-short) { opacity: 0 }
:where([data-look][data-busy] .looks-wait) { opacity: 1; scale: 1 }
:where([data-look][data-busy] .looks-turn) { animation: looks-turning 700ms linear infinite }
:where([data-look]:focus-visible) { outline: var(--ring); outline-offset: var(--ring-offset) }
html { background: var(--ground) }
body { background-color: var(--ground); color: var(--ink); display: flex; flex-direction: column; font-family: var(--face); font-size: var(--type-0); font-variant-numeric: tabular-nums; line-height: 22px; margin: 0; min-height: 100dvh }
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: var(--grain); background-size: 180px 180px; opacity: var(--grain-desk) }
#app { container-type: inline-size; display: flex; flex: 1 1 auto; flex-direction: column; isolation: isolate; position: relative }
#app > .c-group { flex: 1 1 auto }
::selection { background-color: var(--mark-ghost) }
.c-tip { background: var(--ink); border-radius: var(--radius-2); box-shadow: var(--stacked, 0 0 transparent); color: var(--sheet); font-family: var(--face); font-size: var(--type-0); line-height: 1.4; max-width: 260px; opacity: 0; padding: 8px 10px; pointer-events: none; transform: translateY(4px); transition: opacity var(--quick) var(--ease-out),
    transform var(--quick) var(--ease-out) }
.c-tip[data-starting-style], .c-tip[data-ending-style] { opacity: 0; transform: translateY(4px) }
#app #nothing-yet > p:first-child { color: var(--muted); font-family: var(--prose, var(--face)); font-size: var(--type-1); line-height: 28px; margin: 0; max-width: 26em }
#app #trouble { background-color: var(--ghost); border-radius: var(--radius-3); box-sizing: border-box; max-width: 480px; padding: var(--space-4) }
#app #trouble p { margin: 0 }
#app .c-more--working::before { animation: pager-turns 700ms linear infinite; border: 1.5px solid var(--rule); border-radius: var(--radius-round); border-top-color: var(--ink); box-sizing: border-box; content: ""; display: inline-block; height: 12px; margin-right: var(--space-2); vertical-align: -2px }
#app .c-choice select { background-color: var(--well-face); border: 1px solid var(--edge-sheet); border-radius: var(--radius-2); box-shadow: inset 0 1px 2px var(--cast-contact); box-sizing: border-box; color: var(--ink); cursor: pointer; font-family: var(--face); font-size: var(--type-0); line-height: 18px; min-height: 36px; padding: 0 32px 0 12px; transition: border-color 120ms ease,
    box-shadow 120ms ease }
#app .c-choice select:focus-visible { border-color: var(--mark); box-shadow: var(--ring-inset),
    inset 0 1px 2px var(--cast-contact); outline: 0 }
@media (hover: hover) and (pointer: fine) {
  #app .c-choice select:hover { border-color: var(--edge-firm); transition-duration: 0ms }
}
#app .c-sheet .c-group:has(> .c-form > :is(.to-whom, .c-choice)) > * { box-sizing: border-box; padding-block: var(--space-3); padding-inline: 0 }
#app .c-sheet .c-group:has(> .c-form > :is(.to-whom, .c-choice)) > * + * { border-top: 1px solid var(--hair) }
#app .c-form:has(> .c-choice) { align-items: center; column-gap: var(--space-2); display: flex; flex-wrap: wrap; justify-content: flex-start; row-gap: var(--space-2) }
#app .c-form:has(> .c-choice) .c-choice { flex-direction: row; font-size: 0; gap: 0; line-height: 0; min-width: 0 }
#app .c-form:has(> .c-choice) .c-choice select { font-size: var(--type-0); line-height: 18px }
#app .c-form:has(> .c-choice) :is(.c-text--mark, .c-form-said) { flex-basis: 100%; justify-self: start; margin: var(--space-2) 0 0 }
#app .c-choice select:active { border-color: var(--edge-firm) }
#app .c-form:has(.c-form-said) .page { flex: 0 1 auto }
#app .c-form-said { border-radius: var(--radius-2); font-size: var(--type-0); line-height: 22px; max-width: var(--column); padding: 8px 12px }
#app .c-form:has(.c-form-said) .page__within { --page-foot: 16px }
#app .c-form:has(.page) > .c-form-said { align-self: flex-start; margin-inline-start: max(var(--hold), calc((100% - var(--column)) / 2)) }
#app #disbanding { margin-top: var(--space-12); max-width: 720px }
#app #disbanding:not(:has(.prompt)) { border-top: 1px solid var(--hair); padding-top: var(--space-6) }
:root:has(input:not([type="radio"]):not([type="checkbox"]):focus) { --foot-stands: static }
:root:has(textarea:focus) { --foot-stands: static }
.craft-toast__stack { --craft-edge: 1.25rem; z-index: 60 }
.craft-toast { align-items: center; gap: 0.625rem; padding: 0.75rem 0.875rem; border: 1px solid var(--edge-sheet); border-radius: 0.5rem; background-color: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 4%),
    0 8px 24px rgb(0 0 0 / 8%); font-size: 0.8125rem; line-height: 1.5 }
.craft-toast__said { font-weight: 500 }
.craft-toast__more { color: var(--muted) }
.craft-toast[data-type="bad"] { border-color: color-mix(in srgb, var(--mark) 30%, var(--edge-sheet)) }
.craft-toast__shut { padding: 0; border: 0; appearance: none; background: none; color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer }
@media (hover: hover) and (pointer: fine) {
  .craft-toast__shut:hover { color: var(--ink) }
}
.craft-command__backdrop { position: fixed; inset: 0; z-index: 50; background-color: var(--whisper); transition: opacity var(--out, 180ms) var(--settles, ease) }
.craft-command__backdrop[data-starting-style], .craft-command__backdrop[data-ending-style] { opacity: 0 }
.craft-command__plane { position: fixed; top: 16vh; left: 50%; z-index: 51; display: flex; flex-direction: column; box-sizing: border-box; width: min(600px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow: hidden; border: 1px solid var(--edge-sheet); border-radius: var(--stack-radius, 16px); outline: none; background-color: var(--sheet-bright); box-shadow: var(--top-light), var(--lift-2); color: var(--ink); font-family: var(--face); font-size: var(--type-0); line-height: 22px; translate: -50% 0; transition: opacity var(--out, 180ms) var(--settles, ease),
    transform var(--out, 180ms) var(--settles, ease) }
.craft-command__plane[data-starting-style] { opacity: 0; transform: translateY(-6px) scale(0.985) }
.craft-command__plane[data-ending-style] { opacity: 0; transform: scale(0.985); transition-duration: 120ms }
.craft-command { display: flex; flex-direction: column; min-height: 0 }
.craft-command__head { display: flex; align-items: center; height: 56px; padding: 0 20px; border-bottom: 1px solid var(--edge-card) }
.craft-command__asking { display: flex; flex: 1 1 auto; min-width: 0 }
.craft-command__field { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0; border: none; outline: none; background: none; color: var(--ink); font: inherit; font-size: 16px }
.craft-command__field::placeholder, .feedback-form__field::placeholder { color: var(--muted) }
.craft-command__list { overflow-y: auto; overscroll-behavior: contain; padding: 8px; scroll-padding: 8px }
.craft-command__group + .craft-command__group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--edge-card) }
.craft-command__row { display: flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 10px; color: var(--ink); cursor: pointer; user-select: none }
.craft-command__row[aria-selected="true"] { background-color: var(--key-face) }
.craft-command__row-said { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.craft-command__empty { padding: 12px; color: var(--muted) }
.feedback-form { display: flex; flex-direction: column; min-height: 0 }
.feedback-form__head { display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 14px; border-bottom: 1px solid var(--edge-card) }
.feedback-form__title { font-weight: 500 }
.feedback-form__back, .feedback-form__clear { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px; appearance: none; background-color: transparent; color: var(--muted); cursor: pointer; transition: background-color var(--out, 180ms) var(--settles, ease),
    color var(--out, 180ms) var(--settles, ease) }
@media (hover: hover) and (pointer: fine) {
  .feedback-form__back:hover, .feedback-form__clear:hover { background-color: var(--key-face); color: var(--ink) }
}
.feedback-form__field { box-sizing: border-box; width: 100%; min-height: 144px; max-height: 44vh; padding: 16px 20px; border: none; outline: none; resize: none; background: none; color: var(--ink); font: inherit; field-sizing: content }
.feedback-form__foot { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 12px; border-top: 1px solid var(--edge-card) }
.feedback-form__chosen { display: flex; align-items: center; gap: 2px; min-width: 0 }
.feedback-form__pick { display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 32px; padding: 0 12px 0 8px; border: 1px solid var(--edge-sheet); border-radius: var(--radius-2); appearance: none; background-color: var(--well-face, var(--ghost)); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; transition: border-color var(--out, 180ms) var(--settles, ease) }
@media (hover: hover) and (pointer: fine) {
  .feedback-form__pick:hover { border-color: var(--edge-firm) }
}
.feedback-form__thumb { display: block; width: 44px; height: 26px; border-radius: 4px; box-shadow: 0 0 0 1px var(--edge-card); object-fit: cover }
.feedback-form__name { min-width: 0; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap }
.feedback-form__error { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--mark); font-size: 13px; line-height: 18px }
.feedback-form__send { display: inline-flex; flex: none; align-items: center; gap: 10px; height: 34px; margin-left: auto; padding: 0 12px 0 14px; border: 1px solid var(--mark); border-radius: var(--radius-2); appearance: none; background-color: var(--mark); box-shadow: inset 0 -2px 0 var(--act-shade, transparent); color: var(--paper); font: inherit; font-weight: 500; cursor: pointer; transition: background-color var(--out, 180ms) ease,
    opacity var(--out, 180ms) ease }
@media (hover: hover) and (pointer: fine) {
  .feedback-form__send:hover:not(:disabled) { background-color: var(--mark-lift) }
}
.feedback-form__send:active:not(:disabled) { box-shadow: inset 0 -1px 0 var(--act-shade, transparent); transform: translateY(1px) }
.feedback-form__send:disabled { cursor: default; opacity: 0.45 }
.feedback-form__key { color: color-mix(in srgb, var(--paper) 72%, transparent); font-family: var(--face); font-size: 12px }
.feedback-form__back:focus-visible, .feedback-form__clear:focus-visible, .feedback-form__pick:focus-visible, .feedback-form__send:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.feedback-picker__box { border: 1.5px solid var(--mark); border-radius: 4px; background-color: color-mix(in srgb, var(--mark) 7%, transparent); box-shadow: 0 0 0 2px var(--paper) }
.feedback-picker__box--chosen { background-color: color-mix(in srgb, var(--mark) 16%, transparent) }
.feedback-picker__name, .feedback-picker__hint { background-color: var(--ink); box-shadow: var(--lift-2); color: var(--sheet); font-family: var(--face) }
.feedback-picker__hint { border-radius: 999px; padding: 8px 16px; font-size: 13px }
.feedback-picker__key { color: color-mix(in srgb, var(--sheet) 60%, transparent); font-family: var(--face) }
.feedback-sheet__behind { position: fixed; inset: 0; --sheet-over: 50; background-color: var(--veil-over) }
.feedback-sheet { --sheet-over: 51; position: fixed; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; box-sizing: border-box; max-height: calc(100% - 40px - var(--safe-top, 0px)); padding-bottom: calc(
    env(safe-area-inset-bottom) + var(--reserved-bottom, 0px)
  ); border-top: 1px solid var(--hair); border-radius: var(--radius-3) var(--radius-3) 0 0; outline: none; background-color: var(--sheet, var(--paper)); color: var(--ink); font-family: var(--face); font-size: 16px; line-height: 22px }
.feedback-sheet__grab { flex: none; height: 4px; margin: 8px auto 0; border-radius: 999px; background: var(--grab) }
.feedback-sheet .feedback-form__head { display: grid; grid-template-columns: 1fr auto 1fr; height: 52px; padding: 0 12px; border-bottom: 0 }
.feedback-sheet .feedback-form__close { justify-self: start; height: 44px; padding: 0 4px; border: 0; appearance: none; background: none; color: var(--muted); font: inherit }
.feedback-sheet .feedback-form__send { justify-self: end; height: 32px; margin: 0; padding: 0 12px; font-size: 15px }
.feedback-sheet .feedback-form__field { min-height: 120px; max-height: 36svh; padding: 4px 20px 12px; font-size: 16px }
.feedback-sheet .feedback-form__foot { flex-wrap: wrap; padding: 12px 16px 16px; border-top: 1px solid var(--edge-card) }
.feedback-sheet .feedback-form__chosen, .feedback-sheet .feedback-form__pick { flex: 1 1 100% }
.feedback-sheet .feedback-form__pick { height: 44px; padding: 0 14px 0 10px; font-size: 15px }
.feedback-sheet .feedback-form__thumb { height: 28px; max-width: 96px; background-color: var(--paper); object-fit: contain }
.feedback-sheet .feedback-form__clear { height: 44px }
.feedback-sheet .feedback-form__error { flex-basis: 100% }
.feedback-picker__bar { border-radius: var(--radius-3); background-color: var(--ink); box-shadow: var(--lift-2); color: var(--sheet); font-family: var(--face) }
.feedback-picker__act { font-weight: 500 }
.feedback-picker__act--use { background-color: var(--mark); color: var(--paper) }
.writing-text .writing-photo { display: block; box-sizing: border-box; max-width: 100%; height: auto; margin-block: var(--space-3); border-radius: var(--radius-2); cursor: default }
.writing-text .writing-photo.ProseMirror-selectednode { outline: 2px solid var(--ring, var(--mark)); outline-offset: 2px }
.writing-text .writing-embedded { overflow: hidden; color: var(--muted); font-size: var(--type-0); text-overflow: ellipsis; white-space: nowrap }
.writing-text .writing-embedded a { color: inherit; text-decoration: none }
.writing-text .writing-embed { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; margin-block: var(--space-2) var(--space-3); overflow: hidden; border-radius: var(--radius-2); background-color: var(--sunk); user-select: none }
.writing-text .writing-embed-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.writing-text .writing-embed-label { color: var(--muted); font-size: var(--type-1-down) }
.writing-text .writing-embed-play { position: relative; height: 36px; aspect-ratio: 1; padding: 10px; box-sizing: border-box; border-radius: var(--radius-round); background-color: var(--paper); fill: var(--ink); opacity: 0.9 }
.writing-text .writing-link-short { font-size: 0 }
.writing-text .writing-link-short::after { content: attr(data-short); font-size: var(--type-0) }
:where(.craft-toast__stack) { --craft-peek: 12px; --craft-gap: 8px; --craft-edge: 16px; position: fixed; bottom: calc(var(--reserved-bottom, 0px) + var(--craft-edge)); left: 50%; translate: -50% 0; width: min(24rem, calc(100% - 2 * var(--craft-edge))); box-sizing: border-box; pointer-events: none }
:where(.craft-toast__stack[data-side="end"]) { left: auto; right: var(--craft-edge); translate: none }
:where(.craft-toast__stack > *) { pointer-events: auto }
:where(.craft-toast) { --craft-index: var(--toast-index, 0); --craft-pushed: var(--toast-swipe-movement-y, 0px); --craft-before: var(--toast-offset-y, 0px); --craft-height: var(--toast-frontmost-height, var(--toast-height, 0px)); --craft-scale: calc(max(0, 1 - var(--craft-index) * 0.05)); --craft-shrink: calc(1 - var(--craft-scale)); --craft-spread: calc(var(--craft-before) * -1 - var(--craft-index) * var(--craft-gap) + var(--craft-pushed)); position: absolute; bottom: 0; left: 0; right: 0; box-sizing: border-box; display: flex; align-items: flex-start; height: var(--toast-frontmost-height, var(--toast-height, auto)); z-index: calc(100 - var(--craft-index)); transform-origin: bottom center; transform: translateY(calc(var(--craft-pushed) - var(--craft-index) * var(--craft-peek) - var(--craft-shrink) * var(--craft-height))) scale(var(--craft-scale)); transition: transform var(--craft-smooth) var(--craft-ease-out), opacity var(--craft-normal) var(--craft-ease-out); touch-action: none; user-select: none }
:where(.craft-toast)::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: calc(var(--craft-gap) + 1px) }
:where(.craft-toast[data-expanded]) { height: var(--toast-height, auto); transform: translateY(var(--craft-spread)) }
:where(.craft-toast[data-starting-style]) { opacity: 0; transform: translateY(100%) }
:where(.craft-toast[data-ending-style]) { opacity: 0; transition: transform var(--craft-normal) var(--craft-ease-out), opacity var(--craft-normal) var(--craft-ease-out) }
:where(.craft-toast[data-front][data-ending-style]) { transform: translateY(100%) }
:where(.craft-toast[data-ending-style][data-swipe-direction="down"]) { transform: translateY(calc(var(--craft-pushed) + 100%)) }
:where(.craft-toast[data-limited]) { opacity: 0; pointer-events: none }
:where(.craft-toast__icon) { display: inline-flex; flex: 0 0 auto }
:where(.craft-toast__body) { flex: 1 1 auto; min-width: 0; overflow: hidden; transition: opacity var(--craft-normal) var(--craft-ease-out) }
:where(.craft-toast__body[data-behind]) { opacity: 0 }
:where(.craft-toast__body[data-expanded]) { opacity: 1 }
:where(.craft-toast__said) { margin: 0; font: inherit }
:where(.craft-toast__more) { margin: 0; font: inherit }
:where(.craft-toast__act) { flex: 0 0 auto }
:where(.craft-toast__shut) { flex: 0 0 auto; opacity: 0; transition: opacity var(--craft-fast) var(--craft-ease-out) }
:where(.craft-toast[data-expanded] .craft-toast__shut) { opacity: 1 }
:where(.craft-toast__shut:focus-visible) { opacity: 1 }
.rec-bar { align-items: center; border-bottom: 1px solid var(--hair); box-sizing: border-box; display: flex; flex-shrink: 0; gap: 4px 16px; justify-content: space-between; margin-inline: auto; max-width: calc(var(--column, 1062px) + 2 * var(--hold, 16px)); min-height: 60px; padding: calc(8px + var(--safe-top, 0px)) var(--hold, 16px) 12px; width: 100% }
.rec-bar__lead { align-items: center; display: flex; gap: 4px }
.rec-bar .frame-back { align-items: center; border-radius: var(--radius-round); color: var(--ink); display: none; flex-shrink: 0; justify-content: center; padding: 12px }
.rec-bar .frame-back:active { box-shadow: var(--pressed) }
.rec-bar__home { align-items: center; border-radius: var(--radius-round); box-sizing: border-box; display: inline-flex; justify-content: center; padding: 4px }
.rec-bar__home:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.rec-bar__side { align-items: center; display: flex; gap: 10px }
.rec-desk { display: flex; flex-direction: column; min-height: 100dvh }
.rec-desk > main { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0 }
.rec-desk > main > .group { flex: 1 1 auto }
.rec-desk:has(.page--list) .rec-bar .doing--mark { box-shadow: var(--act-cast, none); inset-block-end: calc(
    var(--reserved-bottom, 0px) + 16px + var(--safe-bottom)
  ); inset-inline-end: 16px; position: var(--act-stands, static); z-index: var(--act-over, auto) }
.acts-menu__key { align-items: center; appearance: none; background-color: transparent; border: 0; border-radius: 999px; box-sizing: border-box; color: var(--muted); cursor: pointer; display: inline-flex; flex: none; font: inherit; height: 28px; justify-content: center; margin-left: auto; padding: 0; transition: background-color var(--out, 180ms) var(--settles, ease),
    color var(--out, 180ms) var(--settles, ease); width: 28px }
@media (hover: hover) and (pointer: fine) {
  .acts-menu__key:hover { background-color: var(--key-face, var(--ghost)); color: var(--ink) }
}
.acts-menu__key:active { background-color: var(--key-down, var(--sheet-bright)); transition-duration: var(--in, 60ms) }
.acts-menu__key:focus-visible { outline: var(--ring, 2px solid var(--mark)); outline-offset: var(--ring-offset, 2px) }
.acts-menu__sheet { background-color: var(--sheet, var(--paper)); border: 1px solid var(--hair); border-radius: var(--radius-3); box-shadow: var(--held, 0 0 transparent); box-sizing: border-box; color: var(--ink); display: flex; flex-direction: column; min-width: 190px; outline: none; padding: 6px; transform-origin: var(--transform-origin, top); transition: opacity var(--quick) var(--ease-out),
    translate var(--settled) var(--ease-out) }
.acts-menu__sheet[data-starting-style] { opacity: 0; translate: 0 -4px }
.acts-menu__sheet[data-ending-style] { opacity: 0; translate: 0 -4px; transition: opacity var(--fast) var(--ease-out) }
.acts-menu__row { align-items: center; background: none; border: none; border-radius: var(--radius-2); box-sizing: border-box; color: var(--ink); cursor: pointer; display: flex; font: inherit; gap: 10px; margin: 0; padding: 7px 8px; text-align: left; text-decoration: none; transition: none; white-space: nowrap }
.acts-menu__row[data-highlighted] { background-color: var(--key-face, var(--ghost)) }
.acts-menu__row:focus-visible { outline: none }
.acts-menu__row--away { color: var(--muted) }
.acts-menu__row--away[data-highlighted] { color: var(--ink) }
.acts-menu__glyph { align-items: center; color: var(--muted); display: inline-flex; flex: none; justify-content: center }
.acts-menu__row[data-highlighted] .acts-menu__glyph { color: var(--ink) }
.acts-menu__asking { animation: acts-menu-asks var(--out, 180ms) var(--settles, ease) backwards; box-sizing: border-box; display: flex; flex-direction: column; padding: 12px }
.acts-menu__sheet--asking { max-width: min(17rem, calc(100vw - 2rem)) }
.acts-menu__asked { color: var(--ink); font-family: var(--prose); font-size: 15px; line-height: 1.4; margin: 0 0 4px }
.acts-menu__note { color: var(--muted-deep, var(--muted)); font-family: var(--face); font-size: 13px; line-height: 1.45; margin: 0 0 12px }
.acts-menu__keys { display: grid; position: relative }
.acts-menu__keys > * { grid-area: 1 / 1 }
.acts-menu__goo { animation: acts-menu-melts var(--acts-menu-travel, 260ms) step-end; display: grid; gap: 8px; grid-template-columns: 1fr 1fr; pointer-events: none }
.acts-menu__filter { height: 0; position: absolute; width: 0 }
.acts-menu__blob { border-radius: var(--radius-2); min-height: 36px; animation: acts-menu-parts var(--acts-menu-travel, 260ms)
    var(--acts-menu-spring, cubic-bezier(0.22, 1, 0.36, 1)) backwards }
.acts-menu__blob[data-answer="keep"] { background-color: var(--ink); animation-name: acts-menu-parts-left }
.acts-menu__blob[data-answer="go"] { background-color: var(--mark) }
.acts-menu__keep { animation: acts-menu-parts var(--acts-menu-travel, 260ms)
    var(--acts-menu-spring, cubic-bezier(0.22, 1, 0.36, 1)) backwards; animation-name: acts-menu-parts-left; align-items: center; appearance: none; background-color: transparent; border: 0; border-radius: var(--radius-2); box-sizing: border-box; color: var(--paper); cursor: pointer; display: inline-flex; font-family: var(--face); font-size: 13px; justify-content: center; line-height: 16px; min-height: 36px; padding-inline: 10px }
.acts-menu__go { animation: acts-menu-parts var(--acts-menu-travel, 260ms)
    var(--acts-menu-spring, cubic-bezier(0.22, 1, 0.36, 1)) backwards; align-items: center; appearance: none; background-color: transparent; border: 0; border-radius: var(--radius-2); box-sizing: border-box; color: var(--paper); cursor: pointer; display: inline-flex; font-family: var(--face); font-size: 13px; justify-content: center; line-height: 16px; min-height: 36px; padding-inline: 10px }
.acts-menu__answers { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; position: relative }
@media (hover: hover) and (pointer: fine) {
  .acts-menu__keys:has(.keep:hover) .blob[data-answer="keep"] { background-color: var(--shade, var(--ink)) }
}
@media (hover: hover) and (pointer: fine) {
  .acts-menu__keys:has(.go:hover) .blob[data-answer="go"] { background-color: var(--mark-lift, var(--mark)) }
}
.acts-menu__keep:focus-visible { outline: var(--ring, 2px solid var(--mark)); outline-offset: var(--ring-offset, 2px) }
.acts-menu__go:focus-visible { outline: var(--ring, 2px solid var(--mark)); outline-offset: var(--ring-offset, 2px) }
.avatar { align-items: center; aspect-ratio: 1; background-color: var(--key-face, var(--ghost)); border-radius: var(--radius-round); box-shadow: var(--top-light, none), var(--under, none), var(--contact, none),
    var(--lift-key, none); box-sizing: border-box; color: var(--ink); display: inline-flex; flex-shrink: 0; font-family: var(--figures); font-size: var(--type-1-down); justify-content: center; line-height: 14px; text-transform: uppercase }
.avatar--small { height: 20px }
.avatar--medium { height: 22px }
.avatar--large { height: 26px }
.confirm { animation-duration: var(--out, 180ms); animation-fill-mode: backwards; animation-name: confirm-settles; animation-timing-function: var(--settles, cubic-bezier(0.22, 1, 0.36, 1)); background-color: var(--sheet-bright, var(--paper)); border: 1px solid var(--edge-sheet, var(--hair)); border-radius: var(--radius-3); box-shadow: var(--lift-1, 0 0 transparent); box-sizing: border-box; color: var(--ink); display: flex; flex-direction: column; gap: 4px; margin-top: 24px; padding: 20px; width: 100% }
.confirm__asked { font-family: var(--prose); font-size: 17px; line-height: 1.5; margin: 0 }
.confirm__note { color: var(--muted-deep, var(--muted)); font-family: var(--face); font-size: 14px; line-height: 1.5; margin: 0 }
.confirm__acts { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-top: 16px }
.confirm__keep { align-items: center; appearance: none; background-color: var(--key-face, var(--ghost)); border: 0; border-radius: var(--radius-2); box-shadow: 0 0 0 1px var(--edge, transparent),
    var(--lift-key, 0 0 transparent); box-sizing: border-box; color: var(--ink); cursor: pointer; display: inline-flex; font-family: var(--face); font-size: var(--type-0); justify-content: center; line-height: 18px; min-height: 44px; padding-inline: 12px; transition: background-color var(--out, 180ms) var(--settles, ease),
    box-shadow var(--out, 180ms) var(--settles, ease) }
@media (hover: hover) and (pointer: fine) {
  .confirm__keep:hover { box-shadow: 0 0 0 1px var(--bound, transparent),
    var(--lift-key, 0 0 transparent) }
}
.confirm__keep:active { background-color: var(--key-down, var(--ghost)); box-shadow: var(--pressed, 0 0 transparent); transition-duration: var(--in, 60ms) }
.confirm__keep:focus-visible { outline: var(--ring, 2px solid var(--mark)); outline-offset: var(--ring-offset, 2px) }
.confirm__back { align-items: center; appearance: none; background-color: var(--ink); border: 0; border-radius: var(--radius-2); box-shadow: var(--lift-key, 0 0 transparent); box-sizing: border-box; color: var(--paper); cursor: pointer; display: inline-flex; font-family: var(--face); font-size: var(--type-0); justify-content: center; line-height: 18px; min-height: 44px; padding-inline: 12px; transition: background-color var(--out, 180ms) var(--settles, ease),
    box-shadow var(--out, 180ms) var(--settles, ease) }
@media (hover: hover) and (pointer: fine) {
  .confirm__back:hover { background-color: var(--shade, var(--ink)) }
}
.confirm__back:active { box-shadow: var(--pressed, 0 0 transparent); transition-duration: var(--in, 60ms) }
.confirm__back:focus-visible { outline: var(--ring, 2px solid var(--mark)); outline-offset: var(--ring-offset, 2px) }
.confirm__keep:is(form[aria-busy="true"] button) { background-color: var(--ghost); box-shadow: 0 0 0 1px var(--rule, transparent); color: var(--muted-deep, var(--muted)); cursor: progress }
.confirm__back:is(form[aria-busy="true"] button) { background-color: var(--ghost); box-shadow: none; color: var(--muted-deep, var(--muted)); cursor: progress }
.display { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between }
.display__said { display: flex; flex-direction: column; gap: 12px }
.display__title { color: var(--ink); font-family: var(--prose, var(--face)); font-size: var(--type-2); font-weight: 400; letter-spacing: 0; line-height: 1.3; margin: 0 }
.display__naming { appearance: none; background-color: var(--sunk, var(--ground)); border: 0; border-radius: var(--radius-2); box-shadow: var(--well, none); box-sizing: border-box; color: var(--ink); display: block; font-family: var(--prose, var(--face)); font-size: var(--type-2); font-weight: 400; letter-spacing: 0; line-height: 1.3; margin: 0; padding: 0 var(--space-3); width: 100% }
.display__naming:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.display__naming[aria-invalid="true"] { box-shadow: var(--well, none),
    0 0 0 1px var(--mark, var(--ink)) }
.display__note { color: var(--muted); font-family: var(--face); font-size: var(--type-0); line-height: 22px; margin: 0 }
.display__refusal { color: var(--mark, var(--ink)); font-family: var(--face); font-size: var(--type-0); font-weight: 500; line-height: 22px; margin: 0 }
.display__acts { align-items: center; display: flex; flex-shrink: 0; gap: var(--space-2); margin-left: auto }
.display--wide .display__said { max-width: 640px }
.display--narrow { max-width: 720px; padding-bottom: 28px }
.display--narrow .display__said { max-width: 600px }
.drawer { display: flex; flex: 1 1 0; flex-direction: column; min-height: 0 }
.drawer__ground { flex: 1 1 auto; min-height: 0; overflow: hidden }
.drawer__scrim { background-color: var(--veil-over); inset: 0; position: fixed; transition: opacity var(--quick) var(--ease-out) }
.drawer__scrim[data-starting-style] { opacity: 0 }
.drawer__scrim[data-ending-style] { opacity: 0; transition: opacity var(--fast) var(--ease-out) }
.drawer__panel { --drawer-w: clamp(420px, calc(52ch + 64px), 480px); background-color: var(--sheet, var(--paper)); border-left: 1px solid var(--hair); border-radius: var(--radius-3) 0 0 var(--radius-3); bottom: 0; box-sizing: border-box; display: flex; flex-direction: column; outline: none; position: fixed; right: 0; top: 0; transition: translate var(--settled) var(--ease-out); width: var(--drawer-w) }
.drawer__panel[data-starting-style] { translate: 100% 0 }
.drawer__panel[data-ending-style] { translate: 100% 0; transition: translate var(--quick) var(--ease-out) }
.drawer__panel[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="bottom"][data-state="open"] { opacity: 1 }
.drawer__panel[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="bottom"][data-state="closed"] { opacity: 1 }
.drawer__panel::before { background-image: var(--grain, none); background-size: 180px 180px; border-radius: inherit; content: ""; inset: 0; opacity: var(--grain-desk, 0.04); pointer-events: none; position: absolute; z-index: 0 }
.drawer__head { align-items: center; background-color: var(--sheet, var(--paper)); border-bottom: 1px solid var(--hair); border-radius: var(--radius-3) var(--radius-3) 0 0; display: flex; flex: none; gap: 8px; padding: 20px 20px 14px; position: relative; z-index: 1 }
.drawer__grab { display: none }
.drawer__panel .drawer__grab { display: none }
.drawer__kind { background-color: var(--skeleton); border-radius: 999px; color: var(--muted-deep, var(--muted)); flex: none; font-family: var(--face); font-size: 12px; font-weight: 500; line-height: 22px; margin: 0; padding: 0 10px; white-space: nowrap }
.drawer__reach { align-items: center; appearance: none; background-color: transparent; border: 0; border-radius: 999px; color: var(--muted); cursor: help; display: inline-flex; flex: none; height: 24px; justify-content: center; margin-left: -4px; padding: 0; transition: color var(--out, 180ms) var(--settles, ease); width: 24px }
@media (hover: hover) and (pointer: fine) {
  .drawer__reach:hover { color: var(--ink) }
}
.drawer__reach:focus-visible { outline: var(--ring, 2px solid var(--mark)); outline-offset: 1px }
.drawer__when { color: var(--muted); font-family: var(--face); font-size: 13px; line-height: 20px; margin: 0; white-space: nowrap }
.drawer__close { align-items: center; background-color: transparent; border-radius: 999px; box-sizing: border-box; color: var(--muted); display: inline-flex; flex: none; height: 28px; justify-content: center; margin-left: auto; transition: background-color var(--out, 180ms) var(--settles, ease),
    color var(--out, 180ms) var(--settles, ease); width: 28px }
@media (hover: hover) and (pointer: fine) {
  .drawer__close:hover { background-color: var(--key-face, var(--ghost)); color: var(--ink) }
}
.drawer__close:active { background-color: var(--key-down, var(--sheet-bright)); transition-duration: var(--in, 60ms) }
.drawer__close:focus-visible { outline: var(--ring, 2px solid var(--mark)); outline-offset: var(--ring-offset, 2px) }
.drawer__head:has(.acts-menu__key) .drawer__close { margin-left: 0 }
.drawer__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 20px 24px; position: relative; z-index: 1 }
.drawer__panel[data-keyboard] .drawer__body { padding-bottom: 24px }
.drawer__body .spread { flex-direction: column }
.drawer__body .page .page__within { --page-hold: 0px; --page-head: 0px; --page-foot: 0px; gap: 40px; max-width: none; padding: 0 }
.drawer__body .display { padding-bottom: 0 }
.drawer__body .account .c-group--row { align-items: baseline; display: flex; gap: 14px; padding: 7px 0 }
.drawer__body .account .c-group--row + .c-group--row { border-top: 1px solid var(--edge-card, var(--hair)) }
.drawer__body .account .c-group--row .c-text--muted { color: var(--muted); flex: none; font-family: var(--face); font-size: 13px; line-height: 20px; margin: 0; white-space: nowrap; min-width: min(96px, 28%) }
.drawer__body .account .c-group--row .c-text { color: var(--ink); font-family: var(--face); font-size: 15px; line-height: 22px; margin: 0; min-width: 0 }
.drawer__body .c-group:has(> .saying) { gap: 0 }
.drawer__body .saying { gap: 0; margin: 0 0 8px }
.drawer__body .saying__title { color: var(--muted); font-family: var(--face); font-size: 13px; line-height: 20px; margin: 0 }
.drawer__body .c-group:has(> .saying) .c-group--column { align-items: baseline; display: flex; flex-direction: row; gap: 12px; justify-content: space-between; padding: 9px 0 }
.drawer__body .c-group:has(> .saying) .c-group--column + .c-group--column { border-top: 1px solid var(--edge-card, var(--hair)) }
.drawer__body .c-group:has(> .saying) .c-link { color: var(--ink); font-family: var(--prose); font-size: 17px; line-height: 1.45; min-width: 0; text-decoration-color: transparent; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color var(--out, 180ms) var(--settles, ease) }
@media (hover: hover) and (pointer: fine) {
  .drawer__body .c-group:has(> .saying) .c-link:hover { text-decoration-color: var(--muted-deep, var(--muted)) }
}
.drawer__body .c-group:has(> .saying) .c-link:focus-visible { border-radius: 2px; outline: var(--ring, 2px solid var(--mark)); outline-offset: var(--ring-offset, 2px) }
.drawer__body .c-group:has(> .saying) .c-text--muted { color: var(--muted); flex: none; font-family: var(--face); font-size: 13px; line-height: 20px; margin: 0; white-space: nowrap }
.drawer__body .entry { gap: 8px }
.drawer__body .entry__label { color: var(--muted); font-family: var(--face); font-size: 13px; font-weight: 500; line-height: 18px; margin: 0; transition: color var(--out, 180ms) var(--settles, ease) }
.drawer__body .entry__control { background: var(--note-face, var(--sheet-bright)); border: 1px solid var(--edge-sheet, var(--hair)); border-radius: var(--radius-2); box-shadow: inset 0 1px 2px var(--cast-contact, transparent); box-sizing: border-box; color: var(--ink); transition: border-color var(--out, 180ms) var(--settles, ease),
    box-shadow var(--out, 180ms) var(--settles, ease) }
@media (hover: hover) and (pointer: fine) {
  .drawer__body .entry__control:hover { border-color: var(--edge, var(--hair)) }
}
.drawer__body .entry:focus-within .entry__label { color: var(--ink) }
.drawer__body .entry__control:focus-within { border-color: var(--mark); box-shadow: var(--ring-inset, inset 0 0 0 1px var(--mark)),
    inset 0 1px 2px var(--cast-contact, transparent) }
.drawer__skel { display: flex; flex-direction: column }
.drawer__bar { background-color: var(--skeleton); border-radius: 6px; display: block; overflow: hidden; position: relative }
.drawer__bar::after { animation: drawer-shimmer 1.5s linear infinite; background: linear-gradient(90deg, transparent, var(--shimmer), transparent); content: ""; inset: 0; position: absolute; transform: translateX(-100%) }
.group-row { align-items: center; box-sizing: border-box; column-gap: 16px; display: grid; grid-template-areas: "called acts"; grid-template-columns: 1fr auto; padding-block: 14px; position: relative; --row-bleed: 12px; margin-inline: calc(-1 * var(--row-bleed)); padding-inline: var(--row-bleed); transition: background-color var(--fast) var(--ease-state); --group-row-called: 200px }
@media (hover: hover) and (pointer: fine) {
  .group-row:hover { background-color: var(--well-face) }
}
.group-row:not(:first-child) { border-top: 1px solid var(--hair) }
.group-row__called { grid-area: called; min-width: 0 }
.group-row__name { color: var(--ink); font-family: var(--prose); font-size: var(--type-1); font-weight: 400; letter-spacing: 0; line-height: 26px; margin: 0 }
.group-row__name .group-row__own { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 3px }
.group-row__name .group-row__own::after { content: ""; inset: 0; position: absolute }
@media (hover: hover) and (pointer: fine) {
  .group-row__name .group-row__own:hover { text-decoration-color: var(--rule) }
}
.group-row:has(.group-row__own:focus-visible) { outline: 2px solid var(--mark); outline-offset: -2px }
.group-row__name .group-row__own:focus-visible { outline: 0 }
.group-row__members { align-items: center; display: flex; grid-area: members; min-width: 0 }
.group-row__members > * + * { margin-left: -6px }
.group-row__members > .group-row__add { margin-left: 6px }
.group-row__more { align-items: center; background-color: var(--key-face); border-radius: var(--radius-round); box-shadow: 0 0 0 2px var(--paper); box-sizing: border-box; color: var(--muted-deep); display: inline-flex; flex-shrink: 0; font-family: var(--figures); font-size: var(--type-1-down); height: 20px; justify-content: center; line-height: 14px; width: 20px }
.group-row__acts { align-items: center; display: flex; grid-area: acts; justify-content: flex-end; pointer-events: auto; position: relative; transition: opacity var(--fast) var(--ease-state); z-index: 1; opacity: 0 }
.group-row__add { align-items: center; border: 1px dashed var(--bound); border-radius: var(--radius-round); box-shadow: 0 0 0 2px var(--paper); box-sizing: border-box; color: var(--muted); display: inline-flex; flex-shrink: 0; height: 20px; justify-content: center; pointer-events: auto; position: relative; text-decoration: none; transition: color var(--fast) var(--ease-state),
    opacity var(--fast) var(--ease-state); width: 20px; z-index: 1; opacity: 0 }
@media (hover: hover) and (pointer: fine) {
  .group-row__add:hover { color: var(--ink); transition-duration: 0ms }
}
.group-row__add:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset) }
.group-row:focus-within .group-row__acts { opacity: 1 }
.group-row:focus-within .group-row__add { opacity: 1 }
@media (hover: hover) and (pointer: fine) {
  .group-row:hover .group-row__acts { opacity: 1 }
}
@media (hover: hover) and (pointer: fine) {
  .group-row:hover .group-row__add { opacity: 1 }
}
.group-row__add::after { content: ""; inset: -12px; pointer-events: none; position: absolute }
.kind-picker { border: 0; margin: 0; min-inline-size: 0; padding: 0; position: relative }
.kind-picker legend { color: var(--muted); font-family: var(--face); font-size: 13px; font-weight: 500; line-height: 18px; margin: 0; padding: 0 }
.kind-picker__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px }
.kind-picker__chip { cursor: pointer; display: inline-flex; position: relative }
.kind-picker__box { appearance: none; background-color: transparent; border: 0; border-radius: var(--radius-2); box-sizing: border-box; cursor: pointer; inset: 0; margin: 0; outline: none; position: absolute; width: auto; height: auto }
.kind-picker__face { align-items: center; background-color: transparent; border-radius: var(--radius-2); box-shadow: 0 0 0 1px var(--bound); box-sizing: border-box; color: var(--muted); display: inline-flex; font-family: var(--face); font-size: 13px; line-height: 18px; min-height: 40px; padding: 0 14px; transition: background-color var(--in, 60ms) ease,
    color 0ms }
@media (hover: hover) and (pointer: fine) {
  .kind-picker__chip:hover .kind-picker__face { color: var(--ink) }
}
.kind-picker__box:active + .kind-picker__face { background-color: var(--key-face); transform: translateY(1px); transition-duration: 0ms, 0ms }
.kind-picker__box:checked + .kind-picker__face { background-color: var(--key-face); color: var(--ink) }
.kind-picker__box:checked:active + .kind-picker__face { background-color: var(--key-down); transform: translateY(1px); transition-duration: 0ms, 0ms }
.kind-picker__box:focus-visible + .kind-picker__face { outline: 2px solid var(--mark); outline-offset: 2px }
.listing { box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; max-width: var(--column, 1062px); width: 100% }
.listing__count { color: var(--muted); font-family: var(--face); font-size: 13px; font-variant-numeric: tabular-nums; line-height: 20px; margin: 0 17px }
.listing > * + * { margin-top: 0 }
.listing > * { --arrives-after: 0ms }
.listing > :nth-child(2) { --arrives-after: var(--follows, 40ms) }
.listing > :nth-child(3) { --arrives-after: calc(var(--follows, 40ms) * 2) }
.listing > :nth-child(4) { --arrives-after: calc(var(--follows, 40ms) * 3) }
.listing > :nth-child(5) { --arrives-after: calc(var(--follows, 40ms) * 4) }
.listing > :nth-child(6) { --arrives-after: calc(var(--follows, 40ms) * 5) }
.listing > :nth-child(7) { --arrives-after: calc(var(--follows, 40ms) * 6) }
.listing > :nth-child(8) { --arrives-after: calc(var(--follows, 40ms) * 7) }
.listing > :nth-child(n + 9) { --arrives-after: calc(var(--follows, 40ms) * 8) }
.member { box-sizing: border-box; display: inline-flex; flex-shrink: 0 }
.page { container-type: inline-size; display: flex; flex: 1 1 auto; flex-direction: column }
.page__within { --page-hold: var(--hold, 16px); --page-head: 32px; --page-foot: 72px; box-sizing: border-box; display: flex; flex: 1 1 auto; flex-direction: column; padding: var(--page-head) var(--page-hold) var(--page-foot); max-width: calc(var(--column, 1062px) + 2 * var(--page-hold)); margin-inline: auto; width: 100% }
.page--list .page__within { gap: 24px }
.page--list .page__within > .c-group--row > .doing { margin-inline-start: auto }
.page--asking .page__within { --page-foot: 72px; --asking-most: 720px; gap: 32px }
.page--asking .page__within > * { max-width: var(--asking-most); width: 100% }
.page--telling .page__within { --page-foot: 56px; gap: 0; justify-content: space-between }
.page__named { clip-path: inset(50%); height: 1px; margin: 0; position: absolute; width: 1px }
.page--telling .c-text { font-size: var(--type-0); line-height: 22px; margin: 0 }
.page--asking { container-type: normal }
.person-menu__face { align-items: center; background: none; border: none; border-radius: var(--radius-round); box-sizing: border-box; cursor: pointer; display: inline-flex; font: inherit; justify-content: center; padding: 4px; transition: background-color 120ms ease }
@media (hover: hover) and (pointer: fine) {
  .person-menu__face:hover { background-color: var(--key-face, var(--ghost)); transition-duration: 0ms }
}
.person-menu__face:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.person-menu__sheet { background-color: var(--sheet, var(--paper)); border: 1px solid var(--hair); border-radius: var(--radius-3); box-shadow: var(--held, 0 0 transparent); box-sizing: border-box; color: var(--ink); display: flex; flex-direction: column; gap: 10px; min-width: 190px; outline: none; padding: 12px 14px; transform-origin: var(--transform-origin, top); transition: opacity var(--quick) var(--ease-out),
    translate var(--settled) var(--ease-out) }
.person-menu__sheet[data-starting-style] { opacity: 0; translate: 0 -4px }
.person-menu__sheet[data-ending-style] { opacity: 0; translate: 0 -4px; transition: opacity var(--fast) var(--ease-out) }
.person-menu__said { color: var(--muted); font-family: var(--face); font-size: var(--type-0); line-height: 22px; margin: 0 }
.person-menu__who { color: var(--ink); font-weight: 400; overflow-wrap: anywhere }
.person-menu__form { display: flex; margin: 0 }
.person-menu__out { align-items: center; background: none; border: none; border-radius: var(--radius-2, 6px); box-sizing: border-box; color: var(--ink); cursor: pointer; display: flex; font: inherit; margin: 0; padding: 7px 8px; text-align: left; transition: none; width: 100% }
.person-menu__out[data-highlighted] { background-color: var(--key-face, var(--ghost)) }
.person-menu__out:focus-visible { outline: none }
.person-menu__profile { align-items: center; border-radius: var(--radius-2, 6px); box-sizing: border-box; color: var(--ink); display: flex; font: inherit; padding: 7px 8px; text-decoration: none; width: 100% }
.person-menu__profile[data-highlighted] { background-color: var(--key-face, var(--ghost)) }
.person-menu__profile:focus-visible { outline: none }
.person-menu__feedback { align-items: center; border-radius: var(--radius-2, 6px); box-sizing: border-box; color: var(--ink); cursor: default; display: flex; font: inherit; padding: 7px 8px; width: 100% }
.person-menu__feedback[data-highlighted] { background-color: var(--key-face, var(--ghost)) }
.person-menu__feedback:focus-visible { outline: none }
.recommendation { align-items: start; animation-delay: var(--arrives-after, 0ms); animation-duration: 180ms; animation-fill-mode: backwards; animation-name: recommendation-arrives; animation-timing-function: var(--settles, cubic-bezier(0.22, 1, 0.36, 1)); background-color: var(--sheet, var(--paper)); border: 1px solid var(--edge-card, var(--hair)); border-radius: var(--radius-3); box-shadow: var(--laid, 0 0 transparent); box-sizing: border-box; color: var(--ink); display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); padding: var(--space-4); position: relative; transition: box-shadow var(--out, 180ms) var(--settles, ease),
    transform var(--out, 180ms) var(--settles, ease) }
@media (hover: hover) and (pointer: fine) {
  .recommendation:hover { box-shadow: var(--raised, 0 0 transparent); transform: translateY(-1px); transition-duration: 0ms }
}
.recommendation:active { box-shadow: var(--laid, 0 0 transparent); transform: translateY(0); transition-duration: 0ms }
.recommendation:has(.recommendation__to:focus-visible) { outline: 2px solid var(--mark); outline-offset: -2px }
.recommendation[data-pictured="true"] { grid-template-columns: minmax(0, 1fr) auto }
.recommendation__picture { aspect-ratio: 1; background-color: var(--skeleton); border-radius: var(--radius-2, 6px); grid-column: 2; grid-row: 1 / span 2; object-fit: cover; width: 56px }
.recommendation[data-pictured="true"] > :not(.recommendation__picture) { grid-column: 1 }
.recommendation__said { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0 }
.recommendation__title { color: var(--ink); font-family: var(--prose); font-size: var(--type-2); font-weight: 400; line-height: 1.3; margin: 0; overflow-wrap: anywhere }
.recommendation__marker { aspect-ratio: 1; background-color: var(--mark); border-radius: 1px; display: inline-block; flex-shrink: 0; height: 6px; margin-inline-end: 8px; vertical-align: 2px }
.recommendation--opened .recommendation__marker { background-color: var(--ink) }
.recommendation__to { appearance: none; background-color: transparent; border: 0; color: inherit; cursor: pointer; display: inline-block; font: inherit; margin: -2px 0; padding: 2px 0; text-align: left; text-decoration: none }
.recommendation__to::after { content: ""; inset: 0; position: absolute }
.recommendation__to:focus-visible { outline: 0 }
@media (hover: hover) and (pointer: fine) {
  .recommendation:hover .recommendation__to { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px }
}
.recommendation__line { color: var(--muted); font-family: var(--face); font-size: var(--type-0); line-height: 22px; margin: 0; min-width: 0; overflow-wrap: anywhere }
.recommendation__note { font-family: var(--face); font-size: var(--type-0); line-height: 22px; min-width: 0; overflow-wrap: anywhere }
.recommendation__dot { color: var(--muted); padding: 0 6px 0 2px }
.recommendation__by { font-family: var(--face); font-size: var(--type-0); line-height: 22px; white-space: nowrap }
.recommendation__foot { align-items: center; display: flex; gap: 6px; justify-content: space-between; min-height: 24px; min-width: 0; pointer-events: none; position: relative; z-index: 1 }
.recommendation__audience { pointer-events: auto; align-items: center; background: none; border: 0; border-radius: var(--radius-2, 6px); color: var(--muted); cursor: help; display: inline-flex; flex: none; height: 24px; justify-content: center; padding: 0; transition: color var(--out, 180ms) var(--settles, ease); width: 24px }
.recommendation__acts { pointer-events: auto; align-items: center; display: flex; gap: 14px; min-height: 24px; transition: opacity 120ms ease; z-index: 2 }
.recommendation__audience.recommendation__narrowed { color: var(--ink) }
@media (hover: hover) and (pointer: fine) {
  .recommendation__audience:hover { color: var(--ink) }
}
.recommendation__audience:focus-visible { color: var(--ink); outline: 2px solid var(--mark); outline-offset: 2px }
@media (hover: hover) and (pointer: fine) {
  .recommendation:is(:hover, :focus-within) .recommendation__acts { opacity: 1; transition-duration: 0ms }
}
.recommendation:has(.recommendation__acts [data-open]) { box-shadow: var(--raised, 0 0 transparent); transform: translateY(-1px) }
.recommendation:has(.recommendation__acts [data-open]) .recommendation__acts { opacity: 1; transition-duration: 0ms }
.recommendation:has(.recommendation__to[aria-busy="true"]) { box-shadow: var(--laid, 0 0 transparent); transform: none }
.recommendation__to[aria-busy="true"] { color: var(--muted-deep, var(--muted)); cursor: progress; text-decoration: none }
.tag-picker { border: 0; margin: 0; min-inline-size: 0; padding: 0; position: relative }
.tag-picker legend { color: var(--muted); font-family: var(--face); font-size: 13px; font-weight: 500; line-height: 18px; margin: 0; padding: 0 }
.tag-picker__box { align-items: center; border-radius: var(--radius-2); box-shadow: 0 0 0 1px var(--bound, var(--rule)); box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; min-height: 44px; padding: 6px; transition: box-shadow var(--in, 60ms) ease }
.tag-picker__box:focus-within { box-shadow: 0 0 0 1px var(--ink) }
.tag-picker__tag { align-items: center; animation-duration: var(--quick, 140ms); animation-fill-mode: backwards; animation-name: tag-picker-arrives; animation-timing-function: var(--ease-out, ease-out); border-radius: var(--radius-1); box-sizing: border-box; display: inline-flex; font-family: var(--face); font-size: 13px; gap: 4px; line-height: 18px; min-height: 28px; background-color: var(--key-face); color: var(--ink); padding: 0 4px 0 10px }
.tag-picker__offered { align-items: center; animation-duration: var(--quick, 140ms); animation-fill-mode: backwards; animation-name: tag-picker-arrives; animation-timing-function: var(--ease-out, ease-out); border-radius: var(--radius-1); box-sizing: border-box; display: inline-flex; font-family: var(--face); font-size: 13px; gap: 4px; line-height: 18px; min-height: 28px; appearance: none; background: transparent; border: 0; box-shadow: inset 0 0 0 1px var(--bound, var(--rule)); color: var(--muted); cursor: pointer; padding: 0 10px 0 8px; transition: color var(--in, 60ms) ease }
.tag-picker__word { min-width: 0; overflow-wrap: anywhere }
.tag-picker__drop { align-items: center; appearance: none; background: transparent; border: 0; border-radius: var(--radius-1); color: var(--muted); cursor: pointer; display: inline-flex; height: 20px; justify-content: center; padding: 0; width: 20px }
@media (hover: hover) and (pointer: fine) {
  .tag-picker__drop:hover { color: var(--ink) }
}
@media (hover: hover) and (pointer: fine) {
  .tag-picker__offered:hover { color: var(--ink) }
}
.tag-picker__drop:focus-visible { outline: 2px solid var(--mark); outline-offset: 1px }
.tag-picker__offered:focus-visible { outline: 2px solid var(--mark); outline-offset: 1px }
.tag-picker__field { appearance: none; background: transparent; border: 0; color: var(--ink); flex: 1 1 72px; font-family: var(--face); font-size: var(--type-0); line-height: 18px; min-height: 28px; min-width: 72px; outline: none; padding: 0 6px }
.tag-picker__field:focus-visible { outline: none }
.tag-picker__field::placeholder { color: var(--muted) }
.tag-picker__wrong { color: var(--ink); font-family: var(--face); font-size: 13px; line-height: 18px; margin: 8px 0 0 }
.tag-picker__list { list-style: none; margin: 0; padding: 0 }
.tag-picker__list:not(:empty) { margin-top: 8px }
.tag-picker__option { align-items: center; border-radius: var(--radius-1); cursor: pointer; display: flex; gap: 10px; justify-content: space-between; min-height: 40px; padding: 0 10px }
.tag-picker__option[aria-selected="true"] { background-color: var(--edge-soft, var(--ghost)) }
@media (hover: hover) and (pointer: fine) {
  .tag-picker__option:hover { background-color: var(--edge-soft, var(--ghost)) }
}
.tag-picker__said { color: var(--muted); font-family: var(--face); font-size: var(--type-0); line-height: 18px; min-width: 0; overflow-wrap: anywhere }
.tag-picker__option[aria-selected="true"] .tag-picker__said { color: var(--ink) }
.tag-picker__count { color: var(--muted); font-family: var(--face); font-size: 13px; font-variant-numeric: tabular-nums }
.to-whom { align-items: center; animation-delay: var(--arrives-after, 0ms); animation-duration: 180ms; animation-fill-mode: backwards; animation-name: to-whom-arrives; animation-timing-function: var(--settles, ease-out); border-top: 1px solid var(--hair); box-sizing: border-box; cursor: pointer; display: grid; gap: 0 12px; grid-template-columns: 18px 22px minmax(0, 1fr) auto; min-height: 40px; padding: 0 8px; transition: background-color 120ms ease }
.to-whom:first-child { border-top: 0 }
.to-whom:has(.to-whom__remove) { border-top: 0; cursor: default; gap: 0 var(--space-3); grid-template-columns: minmax(0, 1fr) auto; min-height: 44px; padding-block: 6px; padding-inline: 0; transition: background-color 120ms ease }
@media (hover: hover) and (pointer: fine) {
  .to-whom:has(.to-whom__remove):hover { background-color: var(--ghost) }
}
.to-whom__said { display: flex; flex-direction: column; gap: 2px; grid-column: 1; min-width: 0 }
.to-whom__address { color: var(--muted); font-family: var(--face); font-size: var(--type-0); line-height: 18px; overflow-wrap: anywhere }
.to-whom__tick { appearance: none; background-color: var(--key-face, var(--ghost)); border: 0; border-radius: var(--radius-1); box-shadow: var(--top-light, 0 0 transparent),
    0 0 0 1px var(--bound, transparent),
    var(--lift-key, 0 0 transparent); box-sizing: border-box; cursor: pointer; grid-column: 1; height: 18px; margin: 0; transition: background-color 120ms ease,
    box-shadow 120ms ease; width: 18px }
.to-whom__tick:checked { background-color: var(--ink); box-shadow: var(--pressed, 0 0 transparent),
    0 0 0 1px var(--bound, transparent); transition-duration: 0ms, 0ms; position: relative }
.to-whom__tick:checked::after { border-bottom: 2px solid var(--paper); border-right: 2px solid var(--paper); content: ""; height: 9px; left: 50%; position: absolute; top: 45%; transform: translate(-50%, -50%) rotate(45deg); width: 5px }
.to-whom__tick:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.to-whom:has(.to-whom__tick:checked) { background-color: var(--key-face, var(--ghost)) }
.to-whom__mark { align-items: center; display: inline-flex; grid-column: 2; justify-content: center; width: 22px }
.to-whom__crew { align-items: center; display: inline-flex; gap: 3px; grid-column: 4; justify-self: end }
.to-whom__crew .to-whom__count { margin-left: 5px }
.to-whom__who { color: var(--ink); font-family: var(--face); font-size: var(--type-0); grid-column: 3; line-height: 18px; overflow-wrap: break-word }
.to-whom__count { color: var(--muted); font-family: var(--face); font-size: var(--type-0); font-variant-numeric: tabular-nums; grid-column: 4; line-height: 18px }
.to-whom__remove { align-items: center; align-self: center; appearance: none; background-color: transparent; border: 0; border-radius: var(--radius-1); color: var(--muted); cursor: pointer; display: inline-flex; flex-shrink: 0; font-family: var(--face); font-size: var(--type-0); grid-column: 2; justify-self: end; line-height: 18px; min-height: 32px; padding: 0 8px; transition: background-color 120ms ease,
    color 120ms ease,
    transform 140ms var(--settles, ease-out) }
@media (hover: hover) and (pointer: fine) {
  .to-whom__remove:hover { background-color: var(--ghost); color: var(--ink); transition-duration: 0ms }
}
.to-whom__remove:active { transform: scale(0.96) }
.to-whom__remove:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
@media (hover: hover) and (pointer: fine) {
  .to-whom:hover .to-whom__tick { box-shadow: var(--top-light, 0 0 transparent),
    0 0 0 1px var(--ink),
    var(--lift-key, 0 0 transparent); transition-duration: 0ms, 0ms }
}
@media (hover: hover) and (pointer: fine) {
  .to-whom:hover .to-whom__tick:checked { box-shadow: var(--pressed, 0 0 transparent),
    0 0 0 1px var(--ink) }
}
.to-whom__remove:is(form[aria-busy="true"] button) { background-color: var(--ghost); box-shadow: none; color: var(--muted-deep, var(--muted)); cursor: progress; transform: none }
.wayfinding { align-items: center; display: flex; flex-wrap: wrap }
.wayfinding--ways { gap: 20px }
.wayfinding--acts { gap: 8px }
.wayfinding--body { align-self: flex-start; background-color: var(--sheet); border: 1px solid var(--edge-card); border-radius: 999px; box-sizing: border-box; gap: 2px; padding: 3px }
.wayfinding--bar { display: none; gap: 20px }
.wayfinding--foot { display: flex; gap: 12px; justify-content: flex-end; padding-top: 24px }
.wayfinding--under { display: flex; gap: 12px; justify-content: flex-end; padding-top: 0 }
.wayfinding a:not(.doing) { align-items: center; color: var(--muted); display: inline-flex; font-family: var(--face); font-size: var(--type-0); line-height: 18px; min-height: 40px; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color 120ms ease,
    text-decoration-color 120ms ease }
.wayfinding a:not(.doing)[aria-current] { color: var(--ink); font-weight: 400; text-decoration-color: var(--mark); text-decoration-thickness: 2px }
@media (hover: hover) and (pointer: fine) {
  .wayfinding a:not(.doing):hover { color: var(--ink); text-decoration-color: var(--hair) }
}
.wayfinding a:not(.doing):focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.wayfinding--body a:not(.doing) { align-items: center; border-radius: 999px; box-sizing: border-box; color: var(--muted); display: inline-flex; font-family: var(--face); font-size: 13px; line-height: 18px; min-height: 26px; padding: 3px 12px; text-decoration: none; text-decoration-color: transparent; transition: none }
@media (hover: hover) and (pointer: fine) {
  .wayfinding--body a:not(.doing):hover { color: var(--ink); text-decoration: none }
}
.wayfinding--body a:not(.doing)[aria-current] { background-color: var(--sheet-bright); box-shadow: 0 0 0 1px var(--edge-sheet); color: var(--ink); text-decoration: none }
.wayfinding--body a:not(.doing):focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.who-for { --who-for-air: 10px; border: 0; margin: 0; min-inline-size: 0; padding: 0; width: 100% }
.who-for legend { color: var(--muted); font-family: var(--face); font-size: 13px; font-weight: 500; line-height: 18px; margin: 0; padding: 0 }
.who-for__choices { border-radius: var(--radius-2); box-shadow: 0 0 0 1px var(--bound, var(--rule)); box-sizing: border-box; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 8px; position: relative }
.who-for__slip { background-color: var(--key-face); border-radius: calc(var(--radius-2) - 1px); bottom: 1px; left: 0; position: absolute; top: 1px; transform: translateX(0); transition: transform var(--quick, 140ms) var(--ease-out, ease-out); width: calc(100% / 3) }
.who-for:has(.who-for__pick[value="private"]:checked) .who-for__slip { transform: translateX(100%) }
.who-for:has(.who-for__pick[value="shared"]:checked) .who-for__slip { transform: translateX(200%) }
.who-for__choice { cursor: pointer; position: relative }
.who-for__choice .who-for__pick { appearance: none; background-color: transparent; border: 0; cursor: pointer; height: 100%; inset: 0; margin: 0; outline: none; position: absolute; width: 100% }
.who-for__choice .who-for__face { align-items: center; color: var(--muted); display: flex; font-family: var(--face); font-size: var(--type-0); justify-content: center; line-height: 18px; min-height: 44px; padding-block: var(--who-for-air); position: relative; transition: color var(--in, 60ms) ease }
@media (hover: hover) and (pointer: fine) {
  .who-for__choice:hover .who-for__face { color: var(--ink); transition-duration: 0ms }
}
.who-for__pick:checked + .who-for__face { color: var(--ink) }
.who-for__pick:focus-visible + .who-for__face { outline: 2px solid var(--mark); outline-offset: -3px }
.who-for__choice + .who-for__choice { border-left: 1px solid var(--hair) }
.who-for__holds { display: grid; grid-template-rows: 0fr; opacity: 0; transition: opacity var(--fast, 90ms) ease,
    visibility 0s linear var(--fast, 90ms); visibility: hidden }
.who-for:has(.who-for__pick[value="shared"]:checked) .who-for__holds { grid-template-rows: minmax(0, 1fr); opacity: 1; transition: opacity var(--quick, 140ms) ease; visibility: visible }
.who-for__holds-in { min-height: 0; overflow: hidden }
.who-for:has(.who-for__pick[value="shared"]:checked) .who-for__holds-in { padding-top: 12px }
.who-for__wrong { color: var(--mark, var(--ink)); font-family: var(--face); font-size: var(--type-0); font-weight: 500; line-height: 22px; margin: 8px 0 0 }
.who-for__find { margin-bottom: 8px; position: relative }
.who-for__field { appearance: none; background-color: transparent; border: 0; border-radius: var(--radius-2); box-shadow: 0 0 0 1px var(--bound, var(--rule)); box-sizing: border-box; color: var(--ink); font-family: var(--face); font-size: var(--type-0); line-height: 18px; min-height: 44px; padding: 0 12px; transition: box-shadow var(--in, 60ms) ease; width: 100% }
.who-for__field::placeholder { color: var(--muted) }
.who-for__field:focus-visible { box-shadow: 0 0 0 1px var(--ink); outline: 2px solid var(--mark); outline-offset: 1px }
.who-for__roll { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0 }
.who-for__band { color: var(--muted); font-family: var(--figures); font-size: var(--type-1-down); font-weight: 500; letter-spacing: 0.09em; line-height: 14px; margin: 12px 0 2px; text-transform: uppercase }
.who-for__band:first-child { margin-top: 0 }
.who-for__row .who-for__word { align-items: center; border-radius: var(--radius-1); cursor: pointer; display: grid; gap: 0 10px; grid-template-columns: 18px 20px minmax(0, 1fr) auto; min-height: 44px; padding: 0 8px; transition: background-color var(--in, 60ms) ease }
@media (hover: hover) and (pointer: fine) {
  .who-for__row .who-for__word:hover { background-color: var(--edge-soft, var(--ghost)); transition-duration: 0ms }
}
.who-for__row .who-for__mark { align-items: center; display: inline-flex; justify-content: center; width: 20px }
.who-for__row .who-for__said { color: var(--muted); font-family: var(--face); font-size: var(--type-0); line-height: 18px; min-width: 0; overflow-wrap: anywhere; transition: color var(--in, 60ms) ease }
.who-for__row .who-for__tick:checked ~ .who-for__said { color: var(--ink) }
.who-for__crew { align-items: center; display: inline-flex; gap: 3px; justify-self: end }
.who-for__crew .who-for__count { color: var(--muted); font-family: var(--figures); font-size: var(--type-1-down); font-variant-numeric: tabular-nums; line-height: 14px; margin-left: 5px }
.who-for__tick { appearance: none; background-color: var(--key-face, var(--ghost)); border: 0; border-radius: var(--radius-1); box-shadow: var(--top-light, 0 0 transparent),
    0 0 0 1px var(--bound, transparent),
    var(--lift-key, 0 0 transparent); box-sizing: border-box; cursor: pointer; height: 18px; margin: 0; transition: background-color var(--in, 60ms) ease; width: 18px }
.who-for__tick:checked { background-color: var(--ink); box-shadow: var(--pressed, 0 0 transparent),
    0 0 0 1px var(--bound, transparent); position: relative }
.who-for__tick:checked::after { border-bottom: 2px solid var(--paper); border-right: 2px solid var(--paper); content: ""; height: 9px; left: 50%; position: absolute; top: 45%; transform: translate(-50%, -50%) rotate(45deg); width: 5px }
.who-for__tick:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
@media (hover: hover) and (pointer: fine) {
  .who-for__row .who-for__word:hover .who-for__tick { box-shadow: var(--top-light, 0 0 transparent),
    0 0 0 1px var(--ink),
    var(--lift-key, 0 0 transparent) }
}
@media (hover: hover) and (pointer: fine) {
  .who-for__row .who-for__word:hover .who-for__tick:checked { box-shadow: var(--pressed, 0 0 transparent),
    0 0 0 1px var(--ink) }
}
.who-for__none { color: var(--muted); font-family: var(--face); font-size: var(--type-0); line-height: 22px; margin: 8px 0 0 }
.who-for__tally { color: var(--muted); font-family: var(--face); font-size: var(--type-0); line-height: 22px; margin: 12px 0 0; min-height: 22px }
.writing-text { outline: none; color: var(--ink); font-family: var(--prose); font-size: 17px; line-height: 28px; caret-color: var(--ink); overflow-wrap: anywhere; min-height: 112px; padding-block-end: 16px; border-radius: 8px; transition: background-color 150ms ease, box-shadow 150ms ease }
[data-dropping] .writing-text { background-color: var(--well-face); box-shadow: 0 0 0 8px var(--well-face) }
.writing-text img.writing-photo { max-height: min(560px, 70vh); width: auto; border-radius: 8px }
.writing-text > * { margin: 0 }
.writing-text > * + * { margin-block-start: 14px }
.writing-text .is-empty::before { content: attr(data-placeholder); float: inline-start; height: 0; color: var(--muted); opacity: 0.7; pointer-events: none }
.writing-text h1, .writing-text h2, .writing-text h3 { margin: 26px 0 0; font-family: var(--face); font-weight: 600; letter-spacing: -0.01em }
.writing-text > :first-child { margin-block-start: 0 }
.writing-text h1 { font-size: 22px; line-height: 30px }
.writing-text h2 { font-size: 19px; line-height: 27px }
.writing-text h3 { font-size: 17px; line-height: 26px }
.writing-text ul, .writing-text ol { margin: 0; padding-inline-start: 22px }
.writing-text li + li { margin-block-start: 4px }
.writing-text li::marker { color: var(--muted) }
.writing-text blockquote { margin: 0; padding-inline-start: 14px; border-left: 2px solid var(--rule); color: var(--muted) }
.writing-text code { padding: 1px 5px; border-radius: 4px; background-color: var(--well-face); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.85em }
.writing-text pre { padding: 12px 14px; border-radius: 6px; background-color: var(--well-face); overflow-x: auto }
.writing-text pre code { padding: 0; background: none }
.writing-text hr { height: 1px; margin: 24px 0; border: none; background-color: var(--rule) }
.writing-text a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 3px }
@media (hover: hover) and (pointer: fine) {
  .writing-text a:hover { text-decoration-color: var(--ink) }
}
.writing-text ul[data-type="taskList"] { padding-inline-start: 0; list-style: none }
.writing-text ul[data-type="taskList"] li { display: flex; gap: 10px; align-items: flex-start }
.writing-text ul[data-type="taskList"] li > label { display: flex; height: 28px; align-items: center }
.writing-text ul[data-type="taskList"] li > div { flex: 1; min-width: 0 }
.writing-text input[type="checkbox"] { accent-color: var(--ink); margin: 0 }
.writing-text li[data-checked="true"] > div { color: var(--muted); text-decoration: line-through }
.writing-offers { z-index: 1000; box-sizing: border-box; width: 100%; max-width: 300px; max-height: min(340px, 50vh); padding: 4px; overflow-y: auto; border-radius: 12px; background-color: var(--sheet); box-shadow: var(--lift-2); font-family: var(--face); transform-origin: top left; animation: writing-plane-in 140ms var(--settles, ease-out) both }
.writing-offers[data-side="above"] { transform-origin: bottom left }
.writing-offers-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; height: 36px; padding: 0 10px 0 4px; border-radius: 8px; color: var(--ink); font-size: 14px; cursor: default }
.writing-offers-row[aria-selected="true"] { background-color: var(--well-face) }
.writing-offers-icon { display: grid; place-items: center; height: 28px; aspect-ratio: 1; border-radius: 7px; box-shadow: 0 0 0 1px var(--rule); color: var(--muted) }
.writing-offers-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.writing-offers-hint { color: var(--muted); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px }
.writing-marks { z-index: 1000; display: flex; gap: 2px; align-items: center; padding: 4px; border-radius: 10px; background-color: var(--ink); box-shadow: var(--lift-2); color: var(--paper); translate: -50% -100%; transform-origin: bottom center; animation: writing-plane-in 120ms var(--settles, ease-out) both }
.writing-marks[data-side="below"] { translate: -50% 0; transform-origin: top center }
.writing-marks[data-side="inside"] { translate: -100% 0; transform-origin: top right }
.writing-marks-button { display: grid; place-items: center; height: 30px; aspect-ratio: 1; padding: 0; border: none; border-radius: 7px; background: none; color: inherit; opacity: 0.7; cursor: pointer; transition: opacity 120ms ease, background-color 120ms ease }
.writing-marks-button:active { scale: 0.94 }
.writing-marks-button[aria-pressed="true"] { opacity: 1 }
@media (hover: hover) and (pointer: fine) {
  .writing-marks-button:hover { opacity: 1 }
}
.writing-marks-gap { align-self: stretch; margin: 7px 3px; border-left: 1px solid currentColor; opacity: 0.2 }
.writing-marks-link { field-sizing: content; height: 30px; padding: 0 8px; border: none; background: none; outline: none; color: inherit; font: inherit; font-size: 14px }
.writer { box-sizing: border-box; color: var(--ink); display: flex; flex-direction: column; max-width: 680px; width: 100% }
.writer__title { --title-size: 30px; background: none; border: 0; color: var(--ink); font-family: var(--prose); font-size: var(--title-size); font-weight: 400; letter-spacing: -0.015em; line-height: 38px; margin: 0; min-height: 38px; outline: none; overflow: hidden; padding: 0; resize: none; width: 100% }
.writer__title:focus-visible { outline: none }
.writer__title::placeholder { color: var(--muted); opacity: 0.55 }
.writer__line { align-items: center; display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 10px 0 18px -8px }
.writer__kind { background: none; border: 0; border-radius: 6px; color: var(--ink); font-family: var(--face); font-size: 14px; height: 30px; line-height: 20px; outline: none; padding: 5px 8px; transition: background-color var(--in, 60ms) ease; align-items: center; cursor: pointer; display: inline-flex; font-weight: 500; gap: 4px }
.writer__detail { background: none; border: 0; border-radius: 6px; color: var(--ink); font-family: var(--face); font-size: 14px; height: 30px; line-height: 20px; outline: none; padding: 5px 8px; transition: background-color var(--in, 60ms) ease; animation: writer-arrives var(--quick, 140ms) var(--settles, ease-out) both; field-sizing: content; min-width: 3ch }
.writer__kind svg { color: var(--muted); height: 12px; width: 12px }
.writer__kind[data-known="false"] { color: var(--muted); font-weight: 400 }
.writer__kind[data-pending="true"] { opacity: 0.5 }
@media (hover: hover) and (pointer: fine) {
  .writer__kind:hover { background-color: var(--well-face) }
}
.writer__kind[data-popup-open] { background-color: var(--well-face) }
@media (hover: hover) and (pointer: fine) {
  .writer__detail:hover { background-color: var(--well-face) }
}
.writer__detail:focus { background-color: var(--well-face) }
.writer__detail:focus-visible { background-color: var(--well-face) }
.writer__kind:focus-visible { box-shadow: 0 0 0 2px var(--mark) }
.writer__detail::placeholder { color: var(--muted); opacity: 0.7 }
.writer__kinds { animation: writer-arrives var(--quick, 140ms) var(--settles, ease-out) both; background-color: var(--sheet); border-radius: 12px; box-shadow: var(--lift-2); box-sizing: border-box; max-height: min(360px, 60vh); outline: none; overflow-y: auto; padding: 4px }
.writer__kind-row { align-items: center; border-radius: 8px; color: var(--ink); cursor: default; display: flex; font-family: var(--face); font-size: 14px; height: 34px; justify-content: space-between; outline: none; padding: 0 10px }
.writer__kind-row svg { height: 14px; width: 14px }
.writer__kind-row[data-highlighted] { background-color: var(--well-face) }
.writer__body { min-height: 112px }
.writer__photo { align-items: center; align-self: flex-start; background: none; border: 0; border-radius: 6px; color: var(--muted); cursor: pointer; display: inline-flex; font-family: var(--face); font-size: 14px; gap: 6px; height: 44px; margin: 0 0 0 -8px; padding: 0 8px }
.writer__photo svg { height: 16px; width: 16px }
.writer__photo:focus-visible { box-shadow: 0 0 0 2px var(--mark) }
@media (hover: hover) and (pointer: fine) {
  .writer__photo:hover { background-color: var(--well-face); color: var(--ink) }
}
.doing { align-items: center; appearance: none; border: 1px solid transparent; border-radius: var(--radius-2); box-sizing: border-box; cursor: pointer; display: inline-grid; font-family: var(--face); font-size: var(--type-0); justify-content: center; justify-items: center; line-height: 18px; min-height: 40px; text-decoration: none; white-space: nowrap }
.doing__word { display: inline-block; grid-area: 1 / 1; transition: transform 120ms ease, opacity 160ms cubic-bezier(0.23, 1, 0.32, 1) }
.doing:active .doing__word { transform: scale(0.98); transition-duration: 0ms }
.doing--mark { background-color: var(--mark); border-color: var(--mark); color: var(--paper); font-weight: 500; padding: 0 14px; box-shadow: inset 0 -2px 0 var(--act-shade, transparent), var(--raised, 0 0 transparent); transition: background-color var(--out, 180ms) ease, box-shadow var(--out, 180ms) ease, transform var(--out, 180ms) ease }
@media (hover: hover) and (pointer: fine) {
  .doing--mark:hover { background-color: var(--mark-lift) }
}
.doing--mark:active { box-shadow: inset 0 -1px 0 var(--act-shade, transparent), var(--laid, 0 0 transparent); transform: translateY(1px); transition-duration: var(--in, 60ms) }
.doing--ink { background-color: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: inset 0 -2px 0 var(--act-shade-over, transparent), var(--raised, 0 0 transparent); padding: 0 16px; transition: background-color var(--out, 180ms) ease, box-shadow var(--out, 180ms) ease, transform var(--out, 180ms) ease }
.doing--ink:active { background-color: var(--shade, var(--ink)); box-shadow: inset 0 -1px 0 var(--act-shade-over, transparent), var(--laid, 0 0 transparent); transform: translateY(1px); transition-duration: var(--in, 60ms) }
.doing--edge { background-color: var(--well-face, var(--ghost)); border-color: var(--edge-sheet, transparent); box-shadow: none; color: var(--ink); padding: 0 14px; transition: background-color var(--out, 180ms) ease, box-shadow var(--out, 180ms) ease, border-color var(--out, 180ms) ease, transform var(--out, 180ms) ease }
.doing--edge:active { border-color: var(--edge-firm, transparent); box-shadow: inset 0 -1px 0 var(--act-shade, transparent); transform: translateY(1px); transition-duration: var(--in, 60ms) }
.doing--quiet { font-family: var(--face); font-size: var(--type-0); font-weight: 500; line-height: 18px; background-color: transparent; border: 0; color: var(--ink); padding: 0; transition: color 120ms ease }
.doing--away { color: var(--muted) }
@media (hover: hover) and (pointer: fine) {
  .doing--quiet:hover { color: var(--ink); transition-duration: 0ms }
}
@media (hover: hover) and (pointer: fine) {
  .doing--away:hover { color: var(--ink); transition-duration: 0ms }
}
.doing__wait { align-items: center; display: inline-flex; grid-area: 1 / 1; height: 14px; justify-content: center; opacity: 0; transform: scale(0.8); transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1), transform 160ms cubic-bezier(0.23, 1, 0.32, 1); width: 14px }
.doing__turn { animation-duration: 700ms; animation-iteration-count: infinite; animation-timing-function: linear; display: block; height: 14px; transform-origin: 50% 50%; width: 14px }
.doing__track { fill: none; opacity: 0.2; stroke: currentColor; stroke-width: 1.5 }
.doing__arc { fill: none; stroke: currentColor; stroke-dasharray: 9.82 29.45; stroke-linecap: round; stroke-width: 1.5 }
.doing:is([aria-busy="true"], form[aria-busy="true"] button) { background-color: var(--ghost); border-color: var(--rule); box-shadow: none; color: var(--muted-deep, var(--muted)); cursor: progress }
.doing:is([aria-busy="true"], form[aria-busy="true"] button) :is(.doing__word, .doing__short) { opacity: 0 }
.doing:is([aria-busy="true"], form[aria-busy="true"] button) .doing__wait { opacity: 1; transform: scale(1) }
.doing:is([aria-busy="true"], form[aria-busy="true"] button) .doing__turn { animation-name: doing-turns }
.doing:is(:disabled, form:invalid button[type="submit"]) { background-color: var(--ghost); border-color: var(--rule); box-shadow: none; color: var(--muted-deep, var(--muted)); cursor: not-allowed; transform: none }
.doing:is(:disabled, form:invalid button[type="submit"]) .doing__word { transform: none }
.doing--wide { width: 100% }
.doing:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.doing__short { display: none; grid-area: 1 / 1; transition: transform 120ms ease, opacity 160ms cubic-bezier(0.23, 1, 0.32, 1) }
.doing:active .doing__short { transform: scale(0.98); transition-duration: 0ms }
.doing--twoWords .doing__word { display: none }
.doing--twoWords .doing__short { display: inline-block }
.doing--glyph .doing__word { font-size: 0; line-height: 0 }
.doing--glyph .doing__short { font-size: 0; line-height: 0 }
.doing--glyph { align-items: center; border-radius: var(--radius-2, 8px); display: inline-flex; justify-content: center; min-height: 24px; min-width: 24px; padding: 0; position: relative }
@media (hover: hover) and (pointer: fine) {
  .doing--glyph:hover { box-shadow: 0 0 0 1px var(--bound, var(--hair)) }
}
.doing--glyph:active { transform: translateY(1px) }
.doing--glyph .doing__glyph { align-items: center; color: inherit; display: inline-flex; justify-content: center }
.doing--glyph .doing__wait { inset: 0; position: absolute }
.prompt { align-items: center; animation-duration: 180ms; animation-fill-mode: backwards; animation-name: prompt-settles; animation-timing-function: var(--settles, cubic-bezier(0.22, 1, 0.36, 1)); background-color: var(--mark-ghost); border-bottom: 1px solid var(--mark); border-top: 1px solid var(--mark); box-sizing: border-box; color: var(--ink); display: flex; flex-wrap: wrap; gap: 16px 24px; justify-content: space-between; margin-top: 21px; padding: 16px 12px; width: 100% }
.prompt__question { color: var(--ink); font-family: var(--face); font-size: var(--type-0); line-height: 18px; margin: 0 }
.prompt__note { color: var(--muted-deep, var(--muted)); font-family: var(--face); font-size: var(--type-0); line-height: 22px; margin: 0; padding-top: 3px }
.prompt__acts { align-items: center; display: flex; flex-shrink: 0; gap: 12px }
.prompt__keep { align-items: center; appearance: none; background-color: var(--key-face, var(--ghost)); border: 2px solid var(--mark); border-radius: var(--radius-2); box-shadow: var(--top-light, 0 0 transparent), var(--under, 0 0 transparent), var(--contact, 0 0 transparent), var(--lift-key, 0 0 transparent); box-sizing: border-box; color: var(--ink); cursor: pointer; display: inline-flex; font-family: var(--face); font-size: var(--type-0); justify-content: center; line-height: 18px; min-height: 40px; padding-inline: 12px; transition: background-color var(--out, 180ms) ease, box-shadow var(--out, 180ms) ease, transform var(--out, 180ms) ease }
.prompt__keep:active { background-color: var(--key-down, var(--ghost)); box-shadow: var(--pressed, 0 0 transparent), var(--contact, 0 0 transparent); transform: translateY(1px); transition-duration: var(--in, 60ms) }
.prompt__back { align-items: center; appearance: none; background-color: var(--ink); border: 0; border-radius: var(--radius-2); box-shadow: var(--top-light, 0 0 transparent), var(--under, 0 0 transparent), var(--contact, 0 0 transparent), var(--lift-key, 0 0 transparent); box-sizing: border-box; color: var(--paper); cursor: pointer; display: inline-flex; font-family: var(--face); font-size: var(--type-0); justify-content: center; line-height: 18px; min-height: 40px; padding-inline: 14px; transition: background-color var(--out, 180ms) ease, box-shadow var(--out, 180ms) ease, transform var(--out, 180ms) ease }
.prompt__back:active { background-color: var(--shade, var(--ink)); box-shadow: var(--pressed, 0 0 transparent), var(--contact, 0 0 transparent); transform: translateY(1px); transition-duration: var(--in, 60ms) }
.prompt__keep:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.prompt__back:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.prompt__keep:is(form[aria-busy="true"] button) { background-color: var(--ghost); border-color: var(--rule); box-shadow: none; color: var(--muted-deep, var(--muted)); cursor: progress }
.prompt__back:is(form[aria-busy="true"] button) { background-color: var(--ghost); box-shadow: none; color: var(--muted-deep, var(--muted)); cursor: progress }
.undoing { align-items: center; animation-duration: 180ms; animation-fill-mode: backwards; animation-name: undoing-rises; animation-timing-function: var(--settles, cubic-bezier(0.22, 1, 0.36, 1)); box-sizing: border-box; color: var(--ink); display: flex; flex-wrap: wrap; gap: 16px 24px; justify-content: space-between; margin-top: 21px; min-height: 75px; padding: 12px 12px 16px; position: relative; width: 100% }
.undoing__said { font-family: var(--face); font-size: var(--type-0); line-height: 18px; margin: 0 }
.undoing__acts { align-items: center; display: flex; flex-shrink: 0; gap: 20px }
.undoing__holds { font-family: var(--face); font-size: var(--type-1-down); font-weight: 500; letter-spacing: 0.08em; line-height: 14px; text-transform: uppercase; color: var(--muted); margin: 0; white-space: nowrap }
.undoing__back { align-items: center; appearance: none; background-color: var(--key-face, var(--ghost)); border: 0; border-radius: var(--radius-2); box-shadow: var(--top-light, 0 0 transparent), var(--under, 0 0 transparent), var(--contact, 0 0 transparent), var(--lift-key, 0 0 transparent); box-sizing: border-box; color: var(--ink); cursor: pointer; display: inline-flex; font-family: var(--face); font-size: var(--type-0); justify-content: center; line-height: 18px; min-height: 40px; padding-inline: 14px; transition: background-color var(--out, 180ms) ease, box-shadow var(--out, 180ms) ease, transform var(--out, 180ms) ease }
.undoing__back:active { background-color: var(--key-down, var(--ghost)); box-shadow: var(--pressed, 0 0 transparent), var(--contact, 0 0 transparent); transform: translateY(1px); transition-duration: var(--in, 60ms) }
.undoing__back:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.undoing__clock { animation-delay: 180ms; animation-duration: 10000ms; animation-fill-mode: forwards; animation-name: undoing-holds; animation-timing-function: linear; background-color: var(--mark); border-radius: 1px; bottom: 0; display: block; height: 2px; left: 12px; position: absolute; right: 12px; transform-origin: left center }
@media (hover: hover) and (pointer: fine) {
  .undoing:hover .undoing__clock { animation-play-state: paused }
}
.undoing__back:is(form[aria-busy="true"] button) { background-color: var(--ghost); box-shadow: none; color: var(--muted-deep, var(--muted)); cursor: progress }
.undoing__clock:is(form[aria-busy="true"] *) { animation-play-state: paused }
@container (min-width: 480px) {
  .credit { --credit-open: 1fr }
  #app .c-more--working::before { width: 12px }
  .tag-picker__field { flex-basis: 96px; min-width: 96px }
  .writer__kinds { min-width: 200px }
}
@container (min-width: 800px) {
  #app .c-form:has(.page) > .c-form-said { margin-inline-start: max(44px, calc((100% - var(--column)) / 2)) }
  .rec-bar { gap: 28px; min-height: 68px; padding: 0 44px }
  .kind-picker__face { min-height: 36px }
  .page__within { --page-hold: 44px }
  .recommendation__picture { width: 76px }
  .recommendation__said { max-width: var(--recommendation-said, 640px) }
  .recommendation__acts { opacity: 0 }
  .tag-picker__box { min-height: 40px }
  .tag-picker__option { min-height: 36px }
  .wayfinding--ways { gap: 28px }
  .wayfinding--bar { display: flex }
  .wayfinding--foot { display: none }
  .who-for__choices { margin-top: 8px }
  .who-for__choice .who-for__face { min-height: 40px }
  .who-for__field { min-height: 40px }
  .who-for__row .who-for__word { min-height: 40px }
  .writer__title { --title-size: 38px; line-height: 46px; min-height: 46px }
  .doing { min-height: 36px }
  .doing--mark { min-height: 32px }
  .doing--twoWords .doing__word { display: inline-block }
  .doing--twoWords .doing__short { display: none }
  .prompt__keep { min-height: 32px }
  .prompt__back { min-height: 32px }
  .undoing__back { min-height: 32px }
}
@container (min-width: 1120px) {
  .group-row { column-gap: 24px; grid-template-areas: "called members acts"; grid-template-columns: var(--group-row-called) 1fr auto; padding-block: 16px }
}
@media (hover: none) {
  :root { --act-cast: var(--held, 0 0 transparent); --act-stands: fixed; --act-over: 2 }
  :where(input, textarea, select) { font-size: max(16px, 1em) !important }
  .credit { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 1px 2px rgba(17,17,17,.16), 0 6px 16px rgba(17,17,17,.10), 0 0 0 3px #80403824, inset 0 0 0 1px rgba(255,255,255,.12) }
  .credit-lead { opacity: 1; translate: 0 0 }
  .credit-arrow { opacity: 1 }
  .credit-fold { grid-template-columns: var(--credit-open) }
  .c-field input { font-size: max(16px, var(--type-0)) }
  .c-choice select { font-size: max(16px, var(--type-0)) }
  .c-row .c-row__offers { opacity: 1; translate: 0 }
  #app .c-choice select { font-size: 16px; min-height: 44px }
  .feedback-sheet__grab { width: 36px }
  .feedback-sheet .feedback-form__thumb { width: auto }
  .feedback-sheet .feedback-form__clear { width: 44px }
  :where(.craft-toast__shut) { opacity: 1 }
  .rec-bar .frame-back { display: inline-flex }
  .rec-bar__home { min-height: 44px; min-width: 44px }
  .acts-menu__key { height: 44px; width: 44px }
  .acts-menu__sheet { min-width: 0 }
  .drawer__panel { border-left: 0; border-radius: var(--radius-3) var(--radius-3) 0 0; border-top: 1px solid var(--hair); height: calc(100% - 40px - var(--safe-top, 0px)); left: 0; right: 0; top: auto; width: auto }
  .drawer__panel[data-starting-style] { translate: 0 100% }
  .drawer__panel[data-ending-style] { translate: 0 100% }
  .drawer__head { border-radius: 0; padding: 14px 20px; user-select: none }
  .drawer__panel .drawer__grab { background: var(--grab); border-radius: 999px; display: block; flex: none; height: 4px; margin: 12px auto 0; opacity: 1; width: 36px }
  .drawer__reach { height: 44px; margin-left: -14px; width: 44px }
  .drawer__close { height: 44px; width: 44px }
  .drawer__body { padding-bottom: calc(
      24px + env(safe-area-inset-bottom) + var(--reserved-bottom, 0px)
    ) }
  .group-row__acts { opacity: 1 }
  .group-row__add { opacity: 1 }
  .group-row__add::after { pointer-events: auto }
  .person-menu__face { min-height: 44px; min-width: 44px }
  .person-menu__sheet { min-width: 0 }
  @media (hover: hover) and (pointer: fine) {
    .recommendation:hover { box-shadow: var(--laid, 0 0 transparent); transform: none }
  }
  .recommendation__audience { height: 44px; width: 44px }
  .recommendation__acts { opacity: 1 }
  .recommendation:has(.recommendation__acts [data-open]) { box-shadow: var(--laid, 0 0 transparent); transform: none }
  .tag-picker__field { font-size: 16px; min-height: 44px }
  .wayfinding--ways { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none }
  .wayfinding--under { background-color: var(--ground, var(--paper)); bottom: 0; box-shadow: 0 -1px 0 var(--hair); margin-inline: calc(-1 * var(--page-hold, 16px)); padding: 12px var(--page-hold, 16px)
      calc(12px + var(--safe-bottom) + var(--reserved-bottom, 0px)); position: var(--foot-stands, sticky); z-index: var(--layer-1, 1) }
  .wayfinding a:not(.doing) { min-height: 44px }
  .wayfinding a:not(.doing):focus-visible { white-space: nowrap }
  .writing-marks-button { height: 40px }
  .writer__title { font-size: var(--title-size) !important }
  .writer__kind { height: 44px }
  .writer__detail { font-size: 16px; height: 36px; padding: 7px 8px }
  .doing { min-height: 44px }
  @media (hover: hover) and (pointer: fine) {
    .doing--mark:hover { background-color: var(--mark) }
  }
  .doing--glyph { min-width: 44px }
}
@media (hover: hover) and (pointer: fine) {
  :where([data-look="act"]) { background-color: var(--mark-lift) }
  :where([data-look="key"]) { box-shadow: var(--top-light), var(--under), 0 0 0 1px var(--rule), var(--lift-key) }
  :where([data-look="ghost"]) { background-color: var(--hair) }
  :where([data-look="quiet"]) { color: var(--ink) }
  :where([data-look="card"]) { box-shadow: var(--contact), var(--raised) }
  .drawer__scrim { background-color: var(--whisper) }
  .drawer__head { border-radius: var(--radius-3) 0 0 0; padding: 14px 28px }
  .drawer__body { padding: 24px 28px 40px }
  .writer__photo { display: none }
}
@media (forced-colors: active) {
  .who-for__choices { border: 1px solid CanvasText }
  .who-for__pick:checked + .who-for__face { background-color: Highlight; color: HighlightText }
  .who-for__field { border: 1px solid CanvasText }
  .who-for__field:focus-visible { outline: 2px solid Highlight; outline-offset: 1px }
  .who-for__tick { border: 1px solid CanvasText }
  .who-for__tick:checked { background-color: Highlight }
  .who-for__tick:checked::after { border-bottom-color: Canvas; border-right-color: Canvas }
}
@media (display-mode: standalone) {
  .rec-bar .frame-back { display: inline-flex }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-going="forward"]::view-transition-new(page) { animation: none }
  :root[data-going="forward"]::view-transition-old(page) { animation: none }
  :root[data-going="back"]::view-transition-new(page) { animation: none }
  :root[data-going="back"]::view-transition-old(page) { animation: none }
  :root[data-going="fade"]::view-transition-new(page) { animation: none }
  :root[data-going="fade"]::view-transition-old(page) { animation: none }
  :where(.app-connection) { transition: none }
  :where(.app-connection[data-state="away"]) { transition: none }
  .credit { animation-name: none; transition: none; box-shadow: 0 1px 2px rgba(17,17,17,.16), 0 6px 16px rgba(17,17,17,.10), 0 0 0 3px #80403824, inset 0 0 0 1px rgba(255,255,255,.12) }
  .credit-lead { opacity: 1; translate: 0 0; transition: none }
  .credit-name { transition: none }
  .credit-arrow { opacity: 1; transition: none }
  .credit-fold { grid-template-columns: var(--credit-open); transition: none }
  @media (hover: hover) and (pointer: fine) {
    .credit:hover { transition: none }
  }
  .credit:focus-visible { transition: none }
  @media (hover: hover) and (pointer: fine) {
    .credit:hover .credit-fold { transition: none }
  }
  .credit:focus-visible .credit-fold { transition: none }
  @media (hover: hover) and (pointer: fine) {
    .credit:hover .credit-lead { transition: none }
  }
  .credit:focus-visible .credit-lead { transition: none }
  @media (hover: hover) and (pointer: fine) {
    .credit:hover .credit-name { transition: none }
  }
  .credit:focus-visible .credit-name { transition: none }
  @media (hover: hover) and (pointer: fine) {
    .credit:hover .credit-arrow { transition: none }
  }
  .credit:focus-visible .credit-arrow { transition: none }
  .credit:active { scale: 1 }
  .c-button--shed { transition: none }
  .c-button--working::after { transition: none; animation-name: none }
  .c-button:is([aria-busy="true"], form[aria-busy="true"] button[type="submit"])::after { transition: none; animation-name: none }
  .c-link--chip { transition: none }
  .c-group--holds-reading > * { animation-name: none }
  .c-field input { transition: none }
  .c-choice select { transition: none }
  .c-row .c-row__offers { translate: 0; transition: opacity 90ms cubic-bezier(0.32, 0.72, 0, 1) }
  @media (hover: hover) and (pointer: fine) {
    .c-row:hover .c-row__offers { transition: opacity 140ms cubic-bezier(0.32, 0.72, 0, 1) }
  }
  .c-row:focus-within .c-row__offers { transition: opacity 140ms cubic-bezier(0.32, 0.72, 0, 1) }
  .c-ask-words .c-ask-words__box { transition: none }
  .c-ask-choice .c-ask-choice__option { transition: none }
  @media (hover: hover) and (pointer: fine) {
    .c-ask-choice .c-ask-choice__option:hover { translate: 0 0 }
  }
  .c-ask-choice .c-ask-choice__tick { transition: opacity var(--quick) var(--ease-out) }
  .c-ask-scale .c-ask-scale__fill { transition: none }
  .c-ask-scale .c-ask-scale__thumb { transition: none }
  .c-ask-mood .c-ask-mood__fill { transition: none }
  .c-ask-mood .c-ask-mood__thumb { transition: none }
  .c-ask-samples .c-ask-samples__option { transition: none }
  @media (hover: hover) and (pointer: fine) {
    .c-ask-samples .c-ask-samples__option:hover { translate: 0 0 }
  }
  .c-ask-samples .c-ask-samples__tick { transition: opacity var(--quick) var(--ease-out) }
  :where([data-look="act"]) { transition: none }
  :where([data-look="act"]:active) { translate: none }
  :where([data-look="key"]) { transition: none }
  :where([data-look="key"]:active) { translate: none }
  :where([data-look="ghost"]) { transition: none }
  :where([data-look="ghost"]:active) { translate: none }
  :where([data-look="quiet"]) { transition: none }
  :where([data-look="card"]) { transition: none }
  :where([data-look] .looks-word) { transition: none }
  :where([data-look] .looks-short) { transition: none }
  :where([data-look] .looks-wait) { transition: none }
  :where([data-look] .looks-arc) { stroke-dasharray: none }
  :where([data-look][data-busy] .looks-turn) { animation: none }
  .c-tip { transform: none; transition: opacity var(--quick) var(--ease-out) }
  #app .c-more--working::before { animation-name: none }
  #app .c-choice select { transition: none }
  .craft-command__plane { transition: opacity var(--out, 180ms) linear }
  .craft-command__plane[data-starting-style] { transform: none }
  .craft-command__plane[data-ending-style] { transform: none }
  .feedback-form__back, .feedback-form__clear { transition: none }
  .feedback-form__pick { transition: none }
  :where(.craft-toast) { transition: opacity var(--craft-normal) linear }
  :where(.craft-toast[data-starting-style]) { transform: translateY(calc(var(--craft-pushed) - var(--craft-index) * var(--craft-peek) - var(--craft-shrink) * var(--craft-height))) scale(var(--craft-scale)) }
  :where(.craft-toast[data-ending-style]) { transition: opacity var(--craft-normal) linear }
  :where(.craft-toast[data-front][data-ending-style]) { transform: translateY(calc(var(--craft-pushed) - var(--craft-index) * var(--craft-peek) - var(--craft-shrink) * var(--craft-height))) scale(var(--craft-scale)) }
  :where(.craft-toast[data-ending-style][data-swipe-direction="down"]) { transform: translateY(calc(var(--craft-pushed) - var(--craft-index) * var(--craft-peek) - var(--craft-shrink) * var(--craft-height))) scale(var(--craft-scale)) }
  :where(.craft-toast__body) { transition: opacity var(--craft-normal) linear }
  :where(.craft-toast__shut) { transition: opacity var(--craft-normal) linear }
  .acts-menu__key { transition: none }
  .acts-menu__sheet { transition: opacity var(--settled) var(--ease-out) }
  .acts-menu__sheet[data-starting-style] { translate: none }
  .acts-menu__sheet[data-ending-style] { translate: none; transition: opacity var(--settled) var(--ease-out) }
  .acts-menu__asking { animation: none }
  .acts-menu__goo { animation: none }
  .acts-menu__blob { animation: none }
  .acts-menu__keep { animation: none }
  .acts-menu__go { animation: none }
  .confirm { animation-name: none }
  .confirm__keep { transition: none }
  .confirm__back { transition: none }
  .drawer__scrim { transition: opacity var(--settled) var(--ease-out) }
  .drawer__scrim[data-ending-style] { transition: opacity var(--settled) var(--ease-out) }
  .drawer__panel { transition: opacity var(--settled) var(--ease-out) }
  .drawer__panel[data-starting-style] { opacity: 0; translate: none }
  .drawer__panel[data-ending-style] { opacity: 0; translate: none; transition: opacity var(--quick) linear }
  .drawer__panel[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="bottom"][data-state="open"] { animation: drawer-sheet-fade var(--settled) var(--ease-out) }
  .drawer__panel[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="bottom"][data-state="closed"] { animation: drawer-sheet-fade var(--quick) var(--ease-out) reverse }
  .drawer__reach { transition: none }
  .drawer__close { transition: none }
  .drawer__body .c-group:has(> .saying) .c-link { transition: none }
  .drawer__body .entry__label { transition: none }
  .drawer__body .entry__control { transition: none }
  .drawer__bar::after { animation-name: none }
  .group-row { transition: none }
  .group-row__acts { transition: none }
  .group-row__add { transition: none }
  .kind-picker__face { transition: none }
  .kind-picker__box:active + .kind-picker__face { transform: none }
  .kind-picker__box:checked:active + .kind-picker__face { transform: none }
  .person-menu__face { transition: none }
  .person-menu__sheet { transition: opacity var(--settled) var(--ease-out) }
  .person-menu__sheet[data-starting-style] { translate: none }
  .person-menu__sheet[data-ending-style] { translate: none; transition: opacity var(--settled) var(--ease-out) }
  .recommendation { animation-name: none; transition: none }
  .recommendation__acts { transition: none }
  .tag-picker__box { transition: none }
  .tag-picker__tag { animation: none }
  .tag-picker__offered { animation: none }
  .to-whom { animation: none; transition: none }
  .to-whom:has(.to-whom__remove) { transition: none }
  .to-whom__tick { transition: none }
  .to-whom__remove { transition: none }
  .wayfinding a:not(.doing) { transition: none }
  .who-for__slip { transition: none }
  .who-for__choice .who-for__face { transition: none }
  .who-for__holds { transition: none }
  .who-for:has(.who-for__pick[value="shared"]:checked) .who-for__holds { transition: none }
  .who-for__field { transition: none }
  .who-for__row .who-for__word { transition: none }
  .who-for__row .who-for__said { transition: none }
  .who-for__tick { transition: none }
  .writing-offers { animation: none }
  .writing-marks { animation: none }
  .writer__kind { transition: none }
  .writer__detail { transition: none; animation: none }
  .writer__kinds { animation: none }
  .doing__word { transition: none }
  .doing:active .doing__word { transform: none }
  .doing--mark { transition: none }
  .doing--mark:active { transform: none }
  .doing--ink { transition: none }
  .doing--ink:active { transform: none }
  .doing--edge { transition: none }
  .doing--edge:active { transform: none }
  .doing--quiet { transition: none }
  .doing__wait { transition: none }
  .doing__arc { stroke-dasharray: none }
  .doing:is([aria-busy="true"], form[aria-busy="true"] button) .doing__turn { animation-name: none }
  .doing__short { transition: none }
  .doing:active .doing__short { transform: none }
  .doing--glyph:active { transform: none }
  .prompt { animation-name: none }
  .prompt__keep { transition: none }
  .prompt__keep:active { transform: none }
  .prompt__back { transition: none }
  .prompt__back:active { transform: none }
  .undoing { animation-name: none }
  .undoing__back { transition: none }
  .undoing__back:active { transform: none }
  .undoing__clock { display: none }
}