@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 door-said {
  0% { opacity: 0 }
  100% { opacity: 1 }
}
@keyframes door-arrives {
  0% { opacity: 0; translate: 0 8px }
  100% { opacity: 1; translate: none }
}
@keyframes pulingo-rises {
  0% { opacity: 0; translate: 0 8px }
}
@keyframes pulingo-fades {
  0% { opacity: 0 }
}
@keyframes pulingo-nudges {
  0% { translate: 0 0 }
  100% { translate: 0 0 }
  30% { translate: -4px 0 }
  65% { translate: 4px 0 }
}
@keyframes pulingo-ticks {
  0% { clip-path: inset(0 100% 0 0) }
}
@keyframes guide-detail-drops {
  0% { translate: 0 -100% }
}
@keyframes ui-hear-breathes {
  0% { scale: 1 0.5 }
  100% { scale: 1 1.1 }
}
:root { --paper: light-dark(#f4eee2, #1a1814); --registration: 0.00px; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.35' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.24 0 0 0 0 0.15 0 0 0 1.4 -0.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.05'/%3E%3C/svg%3E"); --ink-sumi: #211d18; --on-sumi: #201b15; --ink-ai: #2c4a7c; --on-ai: light-dark(#fbf8f2, #1a1814); --sumi-over-ai: #05080a; --ink: light-dark(#211d18, #efe8da); --muted: #706b63; --rule: #9b958c; --ghost: #e5dfd4; --tint: #f0eade; --ground: #e5dfd4; --hair: light-dark(#ddd3c1, #36312a); --shade: #05080a; --lift: #211d181a; --flag: #2a456e; --cast-contact: #201b151f; --cast-near: #201b1514; --cast-far: #201b150d; --scrim: light-dark(rgb(33 29 24 / 0.34), rgb(0 0 0 / 0.5)); --veil: #f4eee2b8; --glass-hair: #c5c0b599; --on-plane: #201b15; --catch-light: 40 45% 95.2%; --edge-card: #201b1514; --edge-sheet: #201b1524; --top-light: inset 0 1px 0 hsl(var(--catch-light) / 0.85); --under: inset 0 -1px 0 var(--cast-near); --contact: 0 0 0 1px var(--edge-card); --lift-key: 0 1px 0 var(--cast-contact), 0 2px 2px var(--cast-near), 0 3px 5px var(--cast-far); --pressed: 0.97; --well: inset 0 2px 3px var(--cast-contact), inset 0 1px 1px var(--cast-near), inset 0 4px 8px var(--cast-far), inset 0 -1px 0 hsl(var(--catch-light) / 0.7), 0 0 0 1px var(--edge-sheet); --sheet: light-dark(#fbf8f2, #23201b); --sheet-bright: color-mix(in srgb, var(--paper) 55%, var(--sheet)); --key-face: var(--sheet-bright); --key-down: color-mix(in srgb, var(--ground) 40%, var(--sheet)); --mark-lift: color-mix(in srgb, var(--mark) 90%, var(--paper)); --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: #201b15; --tone-name: #35302aff; --tone-type: #57524b; --tone-number: #57524b; --tone-string: #706b63; --tone-comment: #817c73; --tone-punctuation: #79746b; --tone-keyword: #23395a; --tone-added: #e7e1d6; --tone-removed: #e0ddd6; --mark: #2a456e; --mark-ghost: #dcdad4; --on-mark: #f4eee2; --on-flag: #f4eee2; --face: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, 'Hiragino Sans', 'Noto Sans JP', sans-serif; --figures: ui-monospace, 'SF Mono', Menlo, monospace; --prose: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, 'Hiragino Sans', 'Noto Sans JP', sans-serif; --type-1-down: 12.5px; --type-0: 15px; --type-1: 18px; --type-2: 21.6px; --type-3: 25.92px; --type-4: 31.1px; --tracking-1-down: 0.0058em; --tracking-0: 0em; --tracking-1: -0.0058em; --tracking-2: -0.0116em; --tracking-3: -0.0174em; --tracking-4: -0.0231em; --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; --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); color-scheme: light dark; --wash: light-dark(#eae2d2, #2d2923); --edge: light-dark(#c9bca5, #4a443a); --line: light-dark(#8e8370, #80776a); --quiet: light-dark(#655b4c, #aba191); --on-ink: light-dark(#fbf8f2, #1a1814); --ai: light-dark(#2c4a7c, #9db6e0); --ai-wash: light-dark(#e3e8f0, #24303f); --matcha: light-dark(#3f6b34, #9fc48d); --matcha-wash: light-dark(#e4ebd9, #25301f); --kaki: light-dark(#a6501c, #e99c6c); --kaki-wash: light-dark(#f6e3d4, #3a2719); --shu: light-dark(#c23b22, #e0634a); --amber: light-dark(#f2c66b, #e9b95a); --lifted: 0 0 0 1px var(--hair), 0 24px 64px -24px rgb(33 29 24 / 0.3); --floating: 0 10px 28px -18px rgb(33 29 24 / 0.5); --ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Hiragino Sans", "Noto Sans JP", sans-serif; --read: "Iowan Old Style", Charter, Georgia, "Hiragino Mincho ProN",
    "Noto Serif JP", serif; --mincho: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; --gothic: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    "Yu Gothic UI", Meiryo, sans-serif; --radius-key: 5px; --radius-chip: 7px; --radius-control: 10px; --radius-tile: 14px; --radius-card: 18px; --radius-sheet: 20px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --foot-room: calc(var(--safe-bottom) + var(--reserved-bottom, 0px)); --press: 120ms; --spring-settle: 472ms
    linear(
      0, 0.0743, 0.2246, 0.3865, 0.5323, 0.6526, 0.7469, 0.8183, 0.8711,
      0.9094, 0.9369, 0.9563, 0.9699, 0.9794, 0.9859, 0.9904, 0.9935, 0.9956,
      0.9971, 1
    ); --spring-lift: 493ms
    linear(
      0, 0.0598, 0.1909, 0.3442, 0.4921, 0.6215, 0.7276, 0.8105, 0.8728,
      0.9179, 0.9496, 0.971, 0.985, 0.9936, 0.9987, 1.0014, 1.0026, 1.003,
      1.0028, 1.0024, 1
    ); --spring-stamp: 386ms
    linear(
      0, 0.108, 0.3205, 0.5363, 0.7127, 0.8397, 0.9224, 0.9711, 0.9967,
      1.0079, 1.011, 1.0103, 1.008, 1.0056, 1.0035, 1
    ); --nudge: 260ms cubic-bezier(0.65, 0, 0.35, 1) }
:root .paper { background-color: var(--paper); color: var(--ink) }
:root .grained::after { content: ""; position: absolute; inset: 0; filter: url(#pulingo-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(#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 #2a456e00, 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) }
.credit:hover { box-shadow: 0 1px 2px rgba(17,17,17,.16), 0 6px 16px rgba(17,17,17,.10), 0 0 0 3px #2a456e24, 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 #2a456e24, 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: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) }
.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 }
.credit:hover .credit-name { color: #2a456e; transition: color 160ms cubic-bezier(0.32, 0.72, 0, 1) 60ms }
.credit:focus-visible .credit-name { color: #2a456e; transition: color 160ms cubic-bezier(0.32, 0.72, 0, 1) 60ms }
.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 }
.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) }
.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) }
.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) }
.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) }
.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: 0 0 0 2px var(--mark-ghost) }
.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 }
.c-link:hover { text-decoration-color: var(--mark) }
.c-link:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
.c-link--muted { color: var(--muted) }
.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 }
.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) }
.c-link--chip:hover { background-color: var(--mark-ghost) }
.c-link--working { text-decoration-color: var(--mark); text-decoration-thickness: 2px }
.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 }
.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) }
.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) }
.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) }
.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 }
.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 }
.c-row:hover { background-color: var(--tint) }
.c-row:focus-within { background-color: var(--tint) }
.c-row .c-link { text-decoration-line: none }
.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) }
.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 }
.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)) }
.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) }
.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 }
.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) }
.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) }
.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) }
.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) }
.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 }
.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) }
#door { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-6); justify-content: center; margin: 0; max-width: none; min-height: 100dvh; padding: 0 var(--space-6) var(--space-16); position: relative; width: 100% }
#door > * { animation-duration: 200ms; animation-fill-mode: both; animation-name: door-arrives; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); box-sizing: border-box; margin-inline: auto; max-width: 22rem; width: 100% }
#door #door-brand { color: var(--ink); font-family: var(--prose, var(--face)); font-size: var(--type-0); font-weight: 400; left: var(--space-6); letter-spacing: 0.01em; line-height: 20px; margin: 0; max-width: none; position: absolute; text-transform: none; top: var(--space-3); width: auto }
#door .c-heading { border-bottom: 1px solid var(--hair); color: var(--ink); font-family: var(--prose, var(--face)); font-size: var(--type-2); font-weight: 400; letter-spacing: 0; line-height: 32px; margin-block: 0; padding-bottom: var(--space-4); text-transform: none }
#door .c-text { font-size: var(--type-0); letter-spacing: 0; line-height: 24px; margin-block: 0 }
#door [id^="refusal-note-"] { animation-duration: 140ms; animation-fill-mode: both; animation-name: door-said; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); background-color: transparent; box-shadow: inset 2px 0 0 var(--mark); color: var(--ink); font-size: var(--type-1-down); letter-spacing: 0.0071em; line-height: 16px; padding-left: var(--space-3) }
#door .c-link--muted { align-items: flex-start; border-top: 1px solid var(--hair); color: var(--ink); display: flex; font-family: var(--face); font-size: var(--type-0); line-height: 20px; min-height: 60px; padding-top: var(--space-4); text-underline-offset: 3px }
#door .c-link--muted:hover { color: var(--mark) }
#door .c-form { gap: var(--space-4) }
#door .c-field { color: var(--muted); font-family: var(--face); font-size: var(--type-1-down); font-weight: 400; gap: var(--space-1); letter-spacing: 0.0071em; line-height: 16px; text-transform: none }
#door .c-field input { background-color: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-1); box-shadow: none; box-sizing: border-box; caret-color: var(--mark); color: var(--ink); font-family: var(--face); font-size: var(--type-0); height: 36px; letter-spacing: 0; line-height: 20px; padding: 0 var(--space-3); width: 100% }
#door .c-field input:hover { border-color: var(--muted) }
#door .c-field input:focus { border-color: var(--mark) }
#door .c-field input:focus-visible { border-color: var(--mark); outline: 2px solid var(--mark); outline-offset: 2px }
#door .c-field input[aria-invalid="true"] { border-color: var(--mark); box-shadow: none }
#door .c-button { align-items: center; align-self: stretch; background-color: var(--mark); border: 0; border-radius: var(--radius-1); box-sizing: border-box; color: var(--on-mark); font-family: var(--face); font-size: var(--type-0); font-weight: 500; justify-items: center; letter-spacing: 0; line-height: 20px; margin-top: var(--space-2); min-height: 44px; padding: 0 var(--space-4); text-align: center; transition: none }
#door .c-button:hover { background-color: var(--mark); border-color: transparent; color: var(--on-mark) }
#door .c-button:active { transform: translateY(1px) }
#door .c-button:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px }
#door .c-button[aria-busy="true"] { background-color: var(--ghost); box-shadow: inset 0 0 0 1px var(--rule); color: var(--muted); cursor: progress }
:root[data-theme="light"] { color-scheme: light }
:root[data-theme="dark"] { color-scheme: dark }
[data-shelf] { --shelf-tint: var(--wash); --shelf-deep: var(--quiet); --shelf-mark: var(--line) }
[data-shelf="signs"] { --shelf-tint: light-dark(#e2e7ef, #232c3a); --shelf-deep: light-dark(#2c4a7c, #a9c0e6); --shelf-mark: light-dark(#5b7bae, #6f8fc4) }
[data-shelf="safety"] { --shelf-tint: light-dark(#fee0da, #381f1b); --shelf-deep: light-dark(#833227, #ffb4a7); --shelf-mark: light-dark(#c55c4c, #d47263) }
[data-shelf="transit"] { --shelf-tint: light-dark(#dcebe8, #1c2f2d); --shelf-deep: light-dark(#1f5e5b, #8fd0c8); --shelf-mark: light-dark(#3e8f88, #4fa79e) }
[data-shelf="food"] { --shelf-tint: light-dark(#f5e2d3, #36261c); --shelf-deep: light-dark(#93441a, #edae85); --shelf-mark: light-dark(#c0612a, #d9773c) }
[data-shelf="menu"] { --shelf-tint: light-dark(#f7e2e7, #322126); --shelf-deep: light-dark(#733c4e, #efbac9); --shelf-mark: light-dark(#af677e, #bf7b90) }
[data-shelf="places"] { --shelf-tint: light-dark(#e3ead6, #232d1e); --shelf-deep: light-dark(#3f6233, #b3d29f); --shelf-mark: light-dark(#5e8946, #7faa66) }
[data-shelf="hotel"] { --shelf-tint: light-dark(#dcede4, #1b2a23); --shelf-deep: light-dark(#235c46, #a9d7c1); --shelf-mark: light-dark(#4b9074, #63a186) }
[data-shelf="shopping"] { --shelf-tint: light-dark(#e2e7fb, #222536); --shelf-deep: light-dark(#424b81, #bcc8fa); --shelf-mark: light-dark(#6e7ac0, #808dcf) }
[data-shelf="health"] { --shelf-tint: light-dark(#e6eada, #25281a); --shelf-deep: light-dark(#4b5623, #c5d1a5); --shelf-mark: light-dark(#798848, #8b9a5f) }
[data-shelf="greetings"] { --shelf-tint: light-dark(#ece3d6, #2d261e); --shelf-deep: light-dark(#5e4a35, #d8c2a6); --shelf-mark: light-dark(#9c7f5f, #a88b6a) }
[data-shelf="words"] { --shelf-tint: light-dark(#ece7e3, #2a2522); --shelf-deep: light-dark(#5a4d42, #d5c8be); --shelf-mark: light-dark(#8e7c6f, #9f8f82) }
[data-shelf="numbers"] { --shelf-tint: light-dark(#f4e8c8, #332a16); --shelf-deep: light-dark(#6b4d0e, #e9c878); --shelf-mark: light-dark(#a57b14, #c99a2e) }
[data-shelf="time"] { --shelf-tint: light-dark(#e4e8eb, #23272a); --shelf-deep: light-dark(#46525a, #c2ccd4); --shelf-mark: light-dark(#74828d, #87949f) }
[data-shelf="hiragana"] { --shelf-tint: light-dark(#f3e0e0, #36232a); --shelf-deep: light-dark(#8a3b47, #ecaab4); --shelf-mark: light-dark(#b85a69, #c96f7c) }
[data-shelf="katakana"] { --shelf-tint: light-dark(#e8e2f0, #2a2436); --shelf-deep: light-dark(#56407a, #c7b6e6); --shelf-mark: light-dark(#8b74b3, #9a84c2) }
body { margin: 0; background-color: var(--paper); background-image: var(--grain); color: var(--ink); font-family: var(--ui); font-size: 15px; line-height: 1.45; overscroll-behavior: none }
:focus-visible { outline: 2px solid var(--ai); outline-offset: 2px }
::selection { background-color: var(--ai-wash) }
:root:has(input:not([type="radio"]):not([type="checkbox"]):focus) { --foot-stands: static }
[data-hints="false"] .ui-key-hint, [data-hints="false"] .ui-button__hint, [data-hints="false"] .ui-choice__hint, [data-hints="false"] .session-tiles__hint { display: none }
:where(.craft-hear) { display: inline-flex; align-items: center }
:where(.craft-hear__press) { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: var(--hear-target, 44px); min-height: var(--hear-target, 44px); margin: 0; padding: 0; border: none; background: none; color: inherit; font: inherit; cursor: pointer; touch-action: manipulation }
:where(.craft-hear__press[aria-disabled="true"]) { cursor: default }
:where(:root) { --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); --layout-gutter: clamp(16px, 1rem + 2vw, 40px); --layout-gap: clamp(12px, 0.5rem + 1vw, 24px); --layout-measure: 68ch; --layout-text: clamp(15px, 0.875rem + 0.25vw, 17px); --layout-title: clamp(24px, 1.25rem + 1.5vw, 36px) }
: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 }
.layout-beside { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--beside-gap, 12px 16px) }
.layout-beside__media { flex: 0 0 var(--beside-media, 6rem); min-width: 0; max-width: 100% }
.layout-beside__text { flex: 1 1 0; min-width: min(100%, var(--beside-measure, 28ch)) }
.layout-beside--end .layout-beside__media { order: 1 }
.layout-beside--span .layout-beside__media { flex-grow: 1 }
.layout-beside--span .layout-beside__text { flex-grow: 9999 }
.layout-beside--hide { container-type: inline-size }
.layout-beside--hide .layout-beside__media { display: none }
.layout-shell { container-type: inline-size }
.layout-shell__body { display: grid; grid-template-columns: minmax(0, 1fr) }
.layout-shell__rail { min-width: 0 }
.layout-shell__main { min-width: 0 }
.games-flash { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; min-height: 100% }
.games-flash__prompt { display: grid; align-content: center; justify-items: center; gap: 12px; min-height: 0; animation: pulingo-rises var(--quick) var(--ease-out) backwards }
.games-flash__worth { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--quiet) }
.games-flash__foot { display: grid; gap: 8px; margin: 0; padding-bottom: calc(var(--foot-room) + 8px) }
.games-flash__verdict { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; min-height: 22px; margin: 0; font-size: 15px; color: var(--quiet) }
.games-flash__verdict[data-right="true"] .games-flash__word { color: var(--matcha) }
.games-flash__verdict[data-right="false"] .games-flash__word { color: var(--kaki) }
.games-flash__word { font-weight: 600 }
.games-flash__input { box-sizing: border-box; width: 100%; height: 56px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background-color: var(--paper); font: inherit; font-size: 22px; color: var(--ink); outline: none }
.games-flash__input:focus { border-color: var(--ink); outline: 1px solid var(--ink); outline-offset: -2px }
.games-flash__input::placeholder { color: var(--quiet); opacity: 0.6 }
.games-flash__hints { display: none }
.games-frame { display: grid; grid-template-rows: auto minmax(0, 1fr); box-sizing: border-box; min-height: 100dvh; padding-top: var(--safe-top) }
.games-frame__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 4px 16px 0 8px }
.games-frame__lead { display: inline-flex; gap: 8px; align-items: center; justify-content: center; height: 44px; aspect-ratio: 1; padding: 0; border: none; border-radius: 12px; background: none; font: inherit; color: var(--quiet); text-decoration: none; touch-action: manipulation }
.games-frame__lead:hover { cursor: pointer }
.games-frame__track { height: 3px; overflow: hidden; border-radius: 6px; background-color: var(--hair) }
.games-frame__fill { height: 100%; background-color: var(--ink); transform-origin: left center; transition: scale 200ms linear }
.games-frame__face { min-width: 0; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink) }
.games-frame__score { min-width: 0; padding-left: 12px; border-left: 1px solid var(--hair); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink) }
.games-frame__stage { display: grid; min-height: 0; padding: 16px }
.games-frame__paused { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 8px; padding: 48px 24px calc(var(--foot-room) + 16px); animation: pulingo-fades var(--quick) var(--ease-out) backwards }
.games-frame__title { margin: 0; font-size: 32px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2 }
.games-frame__note { margin: 0; font-size: 17px; color: var(--quiet); font-variant-numeric: tabular-nums }
.games-frame__acts { grid-row: 4; display: grid; gap: 8px }
.games-frame[data-fitted="true"] { position: fixed; inset: 0 0 auto; min-height: 0; overflow: hidden }
.games-empty { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 8px; box-sizing: border-box; min-height: 100dvh; padding: calc(var(--safe-top) + 48px) 24px calc(var(--foot-room) + 16px) }
.games-empty__title { margin: 0; font-size: 32px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2 }
.games-empty__note { margin: 0; font-size: 17px; line-height: 1.4; color: var(--quiet); text-wrap: pretty }
.games-empty__acts { grid-row: 4; display: grid; gap: 8px }
.games-judge { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px; min-height: 100% }
.games-judge__verdict { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; min-height: 21px; margin: 0; font-size: 15px; color: var(--quiet) }
.games-judge__verdict[data-right="true"] .games-judge__word { color: var(--matcha) }
.games-judge__verdict[data-right="false"] .games-judge__word { color: var(--kaki) }
.games-judge__word { font-weight: 600 }
.games-judge__card { display: grid; align-content: center; justify-items: center; gap: 8px; align-self: center; min-height: 320px; padding: 32px 16px; border: 1px solid var(--edge); border-radius: 12px; background-color: var(--paper); touch-action: pan-y; user-select: none; animation: pulingo-rises var(--quick) var(--ease-out) backwards }
.games-judge__means { margin: 0; font-size: 13px; color: var(--quiet) }
.games-judge__meaning { margin: 0; max-width: 100%; font-size: 22px; font-weight: 600; line-height: 1.3; text-align: center; overflow-wrap: anywhere; text-wrap: balance }
.games-judge__acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding-bottom: calc(var(--foot-room) + 8px) }
.games-pairs { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 16px; min-height: 100% }
.games-pairs__note { min-height: 21px; margin: 0; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--quiet) }
.games-pairs__note[data-clash="true"] { color: var(--ink) }
.games-pairs__board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-self: end; padding-bottom: calc(var(--foot-room) + 8px) }
.games-pairs__side { display: grid; grid-auto-rows: minmax(64px, auto); gap: 8px; min-width: 0 }
.games-pairs__tile { display: grid; min-width: 0 }
.games-pairs__tile[data-fresh="true"] { animation: pulingo-rises var(--settled) var(--ease-out) backwards }
.guide-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-block-start: 28px }
.guide-actions__button { display: inline-flex; gap: 8px; align-items: center; justify-content: flex-start; min-width: 0; min-height: 52px; padding: 0 16px; border: none; border-radius: var(--radius-tile); background-color: transparent; box-shadow: inset 0 0 0 1px var(--edge); color: var(--ink); font: inherit; font-size: 15px; font-weight: 500; line-height: 1.2; text-align: start; cursor: pointer; user-select: none; touch-action: manipulation; transition: scale var(--press) var(--ease-out),
    background-color var(--quick) ease,
    color var(--quick) ease }
.guide-actions__button:active { scale: var(--pressed) }
.guide-actions__button:hover { cursor: pointer }
.guide-actions__button[aria-pressed="true"] { background-color: var(--wash); box-shadow: none }
.guide-actions__button[data-kind="deck"][aria-pressed="true"] { background-color: var(--matcha-wash); color: var(--matcha); cursor: default }
.guide-actions__button[data-done="true"] { color: var(--matcha) }
.guide-actions__key { display: none; place-items: center; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: var(--radius-key); background-color: var(--wash); font: inherit; font-size: 11px; color: var(--quiet) }
.guide-actions__more { grid-column: 1 / -1; min-height: 44px; padding: 0 12px; border: none; border-radius: var(--radius-control); background: none; color: var(--quiet); font: inherit; font-size: 14px; cursor: pointer }
.guide-actions__row { grid-column: 1 / -1; min-height: 44px; padding: 0 12px; border: none; border-radius: var(--radius-control); background: none; color: var(--kaki); font: inherit; font-size: 14px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--edge) }
.guide-chart { display: grid; gap: 24px; padding: 16px 20px 8px }
.guide-chart__section { display: grid; gap: 8px }
.guide-chart__title { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--quiet) }
.guide-chart__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px }
.guide-chart__grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.guide-chart__grid[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.guide-chart__cell { display: grid; min-width: 0; overflow: hidden; border-radius: var(--radius-tile); background-color: var(--sheet); box-shadow: inset 0 0 0 1px var(--hair) }
.guide-chart__cell[data-focused="true"] { box-shadow: inset 0 0 0 1px var(--hair) }
.guide-chart__kana { display: grid; place-items: center; min-height: 52px; padding-block-start: 6px; font-family: var(--mincho); font-size: 30px; font-weight: 300; line-height: 1; color: var(--ink); text-decoration: none; touch-action: manipulation; user-select: none }
.guide-chart__kana:active { background-color: var(--wash) }
.guide-chart__kana:hover { cursor: pointer }
.guide-chart__gap { min-height: 1px }
.guide-chart .ui-hear { display: flex }
.guide-chart .craft-hear { display: flex }
.guide-chart .ui-hear .craft-hear__press { flex: 1 1 auto; border-radius: 0 }
.guide-chart .ui-hear .craft-hear__press:not([data-state="playing"]) { gap: 5px; padding: 0 4px; background-color: transparent; box-shadow: none; color: var(--quiet); font-size: 12.5px; font-weight: 500 }
.guide-chart .craft-hear__press .ui-hear__bars { height: 12px; scale: 0.8 }
.guide-detail { position: relative; display: grid; align-content: start; min-width: 0; max-width: 560px; padding: 8px 20px 0 }
.guide-detail__ribbon { position: absolute; top: -1px; right: 72px; height: 44px; aspect-ratio: 18 / 44; color: var(--shelf-mark); animation: guide-detail-drops var(--spring-settle) backwards }
.guide-detail__top { display: flex; gap: 16px; align-items: center; justify-content: space-between; min-height: 28px }
.guide-detail__chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--radius-chip); background-color: var(--shelf-tint); color: var(--shelf-deep); font-size: 12.5px; font-weight: 600 }
.guide-detail__keys { display: none; flex-wrap: wrap; gap: 14px; margin: 0; font-size: 12px; color: var(--quiet) }
.guide-detail__key { display: inline-flex; gap: 5px; align-items: center }
.guide-detail__key kbd { padding: 1px 6px; border-radius: var(--radius-key); background-color: var(--wash); font: inherit; font-size: 11px; font-weight: 500 }
.guide-detail__glyph { margin: 16px 0 6px; font-family: var(--mincho); font-size: 104px; font-weight: 300; line-height: 1.08; letter-spacing: 0.02em; word-break: keep-all; overflow-wrap: anywhere; animation: pulingo-fades var(--quick) var(--ease-out) backwards }
.guide-detail__glyph[data-size="l"] { font-size: 76px }
.guide-detail__glyph[data-size="m"] { font-size: 54px }
.guide-detail__glyph[data-size="s"] { font-size: 38px }
.guide-detail__glyph[data-size="xs"] { font-size: 28px; line-height: 1.35 }
.guide-detail__meaning { margin: 0; font-family: var(--read); font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere }
.guide-detail__sound { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin: 6px 0 0; font-size: 17px; color: var(--quiet) }
.guide-detail__reading { font-family: var(--gothic); font-weight: 300; color: var(--shelf-deep) }
.guide-detail__romaji { overflow-wrap: anywhere }
.guide-detail__voice { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block-start: 24px }
.guide-detail__voice .ui-hear[data-size="hero"] { flex: 1 1 auto }
.guide-detail__voice .ui-hear[data-size="hero"] .craft-hear { flex: 1 1 auto }
.guide-detail__voice .ui-hear[data-size="hero"] .craft-hear__press { flex: 1 1 auto }
.guide-detail__note { margin: 24px 0 0; max-width: 34em; font-family: var(--read); font-size: 17px; line-height: 1.6 }
.guide-detail__strip { display: flex; gap: 12px; align-items: center; margin-block-start: 24px; padding: 16px 16px 16px 18px; border-radius: var(--radius-card); background-color: var(--shelf-tint) }
.guide-detail__words { flex: 1 1 auto; min-width: 0 }
.guide-detail__sentence { margin: 0; font-family: var(--gothic); font-size: 19px; font-weight: 300; line-height: 1.5; overflow-wrap: anywhere }
.guide-detail__english { margin: 2px 0 0; font-family: var(--read); font-size: 15px; font-style: italic; color: var(--shelf-deep) }
.guide-field { position: fixed; inset-inline: 0; bottom: var(--foot-room); z-index: 9; padding: 24px 16px 10px; background-image: linear-gradient(to bottom, transparent, var(--paper) 24px); pointer-events: none }
.guide-field[data-keyboard] { bottom: var(--keyboard, 0px); padding-block-end: 8px }
.guide-field__box { display: flex; gap: 10px; align-items: center; height: 52px; padding: 0 6px 0 16px; box-sizing: border-box; border-radius: 16px; background-color: var(--sheet); box-shadow: inset 0 0 0 1px var(--edge), var(--floating); color: var(--ink); cursor: text; pointer-events: auto }
.guide-field__box:focus-within { box-shadow: inset 0 0 0 1.5px var(--ai), var(--floating) }
.guide-field__mark { display: grid; flex: none; place-items: center }
.guide-field__input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: none; background: none; font: inherit; font-size: 17px; color: var(--ink); outline: none; appearance: none }
.guide-field__input::placeholder { color: var(--quiet) }
.guide-field__clear { display: grid; flex: none; place-items: center; height: 44px; aspect-ratio: 1; padding: 0; border: none; border-radius: 12px; background: none; color: var(--quiet); cursor: pointer }
.guide-field__clear:active { background-color: var(--wash) }
.guide-field__key { display: none }
.guide { min-width: 0 }
.guide__pane { display: flex; flex-direction: column; min-width: 0 }
.guide__head { padding: 8px 20px 20px }
.guide__title { margin: 0; font-family: var(--read); font-size: 34px; font-weight: 600; line-height: 1.1; letter-spacing: -0.015em }
.guide__lede { margin: 6px 0 0; font-family: var(--read); font-size: 17px; font-style: italic; line-height: 1.4; color: var(--quiet) }
.guide__scroll { flex: 1 1 auto; min-height: 0; padding-block-end: calc(var(--foot-room) + 104px) }
.guide__stage { display: none }
.guide__stage .guide-detail { margin-inline: auto }
.guide-list { display: grid; gap: 28px; padding-block: 8px 0 }
.guide-list__section { display: grid; min-width: 0 }
.guide-list__related { animation: pulingo-rises var(--spring-settle) backwards }
.guide-list__heading { display: flex; gap: 8px; align-items: center; margin: 0 20px; padding-block-end: 10px; border-bottom: 1px solid var(--hair); font-size: 13px; font-weight: 600; letter-spacing: 0.005em; color: var(--quiet); scroll-margin: 16px 0 0 }
.guide-list__dot { flex: none; height: 8px; aspect-ratio: 1; border-radius: 2px; background-color: var(--shelf-mark) }
.guide-list__count { margin-inline-start: auto; font-variant-numeric: tabular-nums }
.guide-list__recent { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 20px 0 }
.guide-list__chip { min-height: 36px; padding: 0 14px; border: none; border-radius: 999px; background-color: var(--sheet); box-shadow: inset 0 0 0 1px var(--edge); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; transition: scale var(--press) var(--ease-out) }
.guide-list__chip:active { scale: var(--pressed) }
.guide-list__clear { min-height: 32px; margin-inline-start: auto; padding: 0 4px; border: none; background: none; color: var(--ai); font: inherit; font-weight: 500; cursor: pointer }
.guide-list__empty { display: grid; gap: 16px; padding: 8px 20px }
.guide-list__lead { margin: 0; max-width: 30em; font-family: var(--read); font-size: 17px; line-height: 1.55 }
.guide-list__actions { display: flex; flex-wrap: wrap; gap: 8px }
.guide-list__action { min-height: 44px; padding: 0 18px; border: none; border-radius: var(--radius-tile); background-color: var(--ink); color: var(--on-ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: scale var(--press) var(--ease-out) }
.guide-list__action[data-quiet="true"] { background-color: transparent; box-shadow: inset 0 0 0 1px var(--edge); color: var(--ink) }
.guide-list__action:active { scale: var(--pressed) }
.guide-row { display: flex; gap: 8px; align-items: center; margin-inline: 20px; border-bottom: 1px solid var(--hair) }
.guide-row[data-focused="true"] { border-bottom-color: var(--hair) }
.guide-row:hover { cursor: default }
.guide-row[data-focused="true"]:hover { cursor: default }
.guide-row__link { display: grid; flex: 1 1 auto; grid-template-columns: fit-content(58%) minmax(0, 1fr); column-gap: 14px; align-items: center; min-width: 0; min-height: 64px; padding: 8px 0; box-sizing: border-box; color: inherit; text-decoration: none; touch-action: manipulation; user-select: none }
.guide-row[data-kind="sentence"] .guide-row__link { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding-block: 12px }
.guide-row[data-size="s"] .guide-row__link { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding-block: 12px }
.guide-row[data-size="xs"] .guide-row__link { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding-block: 12px }
.guide-row__link:focus-visible { outline-offset: -2px; border-radius: var(--radius-control) }
.guide-row__glyph { font-family: var(--mincho); font-size: 28px; font-weight: 300; line-height: 1.15; word-break: keep-all; overflow-wrap: anywhere }
.guide-row__glyph[data-size="m"] { font-size: 24px }
.guide-row__glyph[data-size="s"] { font-size: 19px; line-height: 1.35 }
.guide-row__glyph[data-size="xs"] { font-size: 19px; line-height: 1.35 }
.guide-row__text { display: grid; gap: 2px; min-width: 0 }
.guide-row__meaning { display: flex; gap: 6px; align-items: center; min-width: 0; font-size: 15.5px; font-weight: 550; line-height: 1.3; overflow-wrap: anywhere }
.guide-row__match { padding: 0 2px; margin: 0 -2px; border-radius: 3px; background-color: color-mix(in srgb, var(--amber) 55%, transparent); color: inherit }
.guide-row__pin { display: inline-grid; flex: none; color: var(--shelf-mark) }
.guide-row__sound { display: flex; flex-wrap: wrap; gap: 0 6px; align-items: center; min-width: 0; font-size: 13px; color: var(--quiet) }
.guide-row__dot { flex: none; height: 7px; aspect-ratio: 1; border-radius: 2px; background-color: var(--shelf-mark) }
.guide-row__reading { font-family: var(--gothic); font-size: 12.5px }
.guide-row__romaji { overflow-wrap: anywhere }
.guide-sheet__behind { position: fixed; inset: 0; z-index: 20; background-color: var(--scrim); transition: opacity var(--quick) var(--ease-out) }
.guide-sheet__behind[data-starting-style] { opacity: 0 }
.guide-sheet__behind[data-ending-style] { opacity: 0 }
.guide-sheet { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 21; display: flex; flex-direction: column; max-height: calc(100% - 40px - var(--safe-top)); box-sizing: border-box; overflow: hidden; border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; background-color: var(--sheet); box-shadow: 0 -1px 0 var(--hair); outline: none }
.guide-sheet__handle { flex: none; align-self: center; height: 5px; margin-block-start: 8px; aspect-ratio: 36 / 5; border-radius: 999px; background-color: var(--edge) }
.guide-sheet__body { flex: 1 1 auto; min-height: 0; padding: 12px 0 calc(var(--safe-bottom) + var(--reserved-bottom, 0px) + 20px); overflow-y: auto; overscroll-behavior: contain }
.guide-shelves { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; padding: 4px 20px 0 }
.guide-shelves__tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; min-width: 0; height: 76px; padding: 11px 12px 10px; box-sizing: border-box; overflow: hidden; border: none; border-radius: var(--radius-tile); background-color: var(--shelf-tint); color: var(--ink); font: inherit; text-align: start; cursor: pointer; user-select: none; touch-action: manipulation; transition: scale var(--press) var(--ease-out) }
.guide-shelves__tile:active { scale: var(--pressed) }
.guide-shelves__tile[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--shelf-mark) }
.guide-shelves__tile:hover { cursor: pointer }
.guide-shelves__tile[aria-pressed="true"]:hover { cursor: pointer }
.guide-shelves__name { position: relative; max-width: 100%; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; overflow-wrap: anywhere }
.guide-shelves__count { position: relative; font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--shelf-deep) }
.guide-shelves__glyph { position: absolute; right: 8px; bottom: -9px; font-family: var(--mincho); font-size: 44px; font-weight: 300; line-height: 1; color: var(--shelf-deep); opacity: 0.9 }
.guide-shelves__list { display: grid; gap: 1px }
.guide-shelves__row { display: flex; gap: 10px; align-items: center; min-height: 30px; padding: 0 8px 0 15px; border: none; border-radius: 8px; background: none; color: var(--quiet); font: inherit; font-size: 13.5px; text-align: start; cursor: pointer }
.guide-shelves__row[aria-pressed="true"] { background-color: var(--wash); color: var(--ink) }
.guide-shelves__row:hover { cursor: pointer }
.guide-shelves__dot { flex: none; height: 8px; aspect-ratio: 1; border-radius: 2px; background-color: var(--shelf-mark) }
.guide-shelves__row .guide-shelves__count { margin-inline-start: auto; font-size: 12px; color: var(--quiet) }
.look-up__link { display: inline-grid; place-items: center; min-height: 44px; padding: 0 8px; font-size: 15px; font-weight: 500; color: var(--ai); text-decoration: none }
.look-up__entry { display: grid; justify-items: center; gap: 8px; padding-block-end: 8px; text-align: center }
.look-up__reading { margin: 0; font-size: 18px; color: var(--quiet) }
.look-up__meaning { margin: 0; font-size: 17px; font-weight: 600 }
.look-up__note { margin: 0; max-width: 36ch; font-size: 14px; color: var(--quiet) }
.results-list { display: grid }
.results-list__heading { margin: 0 0 4px; font-size: 13px; font-weight: 500; color: var(--quiet) }
.results-list__line { display: flex; gap: 8px; align-items: center; border-bottom: 1px solid var(--hair) }
.results-list__row { display: grid; flex: 1 1 auto; grid-template-columns: minmax(48px, max-content) minmax(0, 1fr); align-items: center; gap: 16px; min-width: 0; min-height: 52px; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; touch-action: manipulation }
.results-list__row:hover { cursor: pointer }
.results-list__kana { font-family: var(--gothic); font-size: 22px; white-space: nowrap }
.results-list__gloss { min-width: 0; font-size: 15px; color: var(--quiet); overflow-wrap: anywhere }
.results-list__item { display: grid; justify-items: center; gap: 8px }
.results-list__reading { margin: 0; font-size: 22px; font-weight: 500; color: var(--quiet) }
.results-list__meaning { margin: 0; font-size: 17px; text-align: center }
.results { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 32px; box-sizing: border-box; min-height: 100dvh; padding: calc(var(--safe-top) + 48px) 24px 0 }
.results[data-lists="false"] { row-gap: 32px }
.results__head { animation: pulingo-rises var(--spring-lift) backwards; display: grid; gap: 8px }
.results__numbers { animation: pulingo-rises var(--spring-lift) backwards; animation-delay: 40ms; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 }
.results__lists { animation: pulingo-rises var(--spring-lift) backwards; animation-delay: 80ms; display: grid; align-content: start; gap: 24px }
.results__foot { animation: pulingo-rises var(--spring-lift) backwards; animation-delay: 120ms; position: var(--foot-stands, sticky); inset-block-end: 0; display: grid; gap: 8px; margin-inline: -24px; padding: 12px 16px calc(var(--foot-room) + 12px); background-color: var(--paper) }
.results__title { margin: 0; font-size: 15px; font-weight: 500; color: var(--quiet) }
.results__sentence { margin: 0; font-family: var(--read), var(--gothic); font-size: 30px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; text-wrap: pretty; font-variant-numeric: tabular-nums }
.results__due { margin: 0; font-size: 15px; color: var(--quiet) }
.results__number { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--hair) }
.results__value { order: -1; margin: 0; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums }
.results__label { font-size: 13px; color: var(--quiet) }
.session-choices { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; min-height: 100% }
.session-choices__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
.session-choices__grid[data-count="3"] { grid-template-columns: minmax(0, 1fr) }
.session-choices__grid[data-long="true"] { grid-template-columns: minmax(0, 1fr) }
.session-feedback { position: var(--foot-stands, sticky); inset-block-end: 0; display: grid; gap: 12px; padding: 12px 16px calc(var(--foot-room) + 12px); border-top: 1px solid var(--hair); background-color: var(--paper) }
.session-feedback[data-state="right"] { border-top-color: transparent; background-color: var(--matcha-wash) }
.session-feedback[data-state="wrong"] { border-top-color: transparent; background-color: var(--kaki-wash) }
.session-feedback__verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding-block-start: 4px; animation: pulingo-rises var(--settled) var(--ease-out) backwards }
.session-feedback__mark { display: grid; place-items: center; height: 32px; aspect-ratio: 1; border-radius: 12px; background-color: var(--paper); animation: pulingo-ticks var(--quick) var(--ease-out) 60ms backwards }
.session-feedback[data-state="right"] .session-feedback__mark { color: var(--matcha) }
.session-feedback[data-state="wrong"] .session-feedback__mark { color: var(--kaki) }
.session-feedback__words { display: grid; gap: 2px; min-width: 0 }
.session-feedback__title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3 }
.session-feedback[data-state="right"] .session-feedback__title { color: var(--matcha) }
.session-feedback[data-state="wrong"] .session-feedback__title { color: var(--kaki) }
.session-feedback__detail { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere }
.session-feedback__note { margin: 0; font-size: 13px; color: var(--quiet) }
.session-feedback__acts { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-block-start: 8px }
.session-feedback__act { display: grid }
.session-intro { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; min-height: 100% }
.session-intro__count { margin: 0; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--quiet) }
.session-intro__hero { display: grid; justify-items: center; align-content: center; gap: 12px; min-width: 0; padding-block: 8px 24px }
.session-intro__romaji { margin: 8px 0 0; font-size: 22px; font-weight: 500; color: var(--quiet) }
.session-intro__meaning { margin: 0; font-size: 17px; text-wrap: balance; color: var(--ink) }
.session-pairs { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 16px; min-height: 100% }
.session-pairs__question { margin: 0; font-size: 15px; font-weight: 500; color: var(--quiet) }
.session-pairs__board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: end }
.session-pairs__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px }
.session-prompt { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; min-height: 0 }
.session-prompt__question { margin: 0; font-size: 15px; font-weight: 500; color: var(--quiet) }
.session-prompt__hero { display: grid; place-items: center; align-content: center; gap: 16px; min-width: 0; min-height: 0; padding-block: 8px }
.session-prompt__words { justify-self: stretch; margin: 0; font-size: 32px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere }
.session-prompt__words[data-short="true"] { justify-self: center; font-size: 64px; font-weight: 500; line-height: 1 }
.session { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; box-sizing: border-box; min-height: 100dvh; padding-top: var(--safe-top) }
.session__top { position: sticky; top: 0; z-index: 2; background-color: var(--paper); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 4px 16px 0 8px }
.session__close { display: inline-flex; gap: 8px; align-items: center; justify-content: center; height: 44px; aspect-ratio: 1; border-radius: 12px; color: var(--quiet); text-decoration: none; touch-action: manipulation }
.session__close:hover { cursor: pointer }
.session__stage { display: grid; min-height: 0; padding: 16px 16px 16px; animation: pulingo-rises var(--quick) var(--ease-out) backwards }
.session__empty { margin: 0; font-size: 17px; color: var(--quiet) }
.session-tiles { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 16px; min-height: 100% }
.session-tiles__line { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; min-height: 112px; padding-block: 8px; border-bottom: 1px solid var(--edge) }
.session-tiles__line[data-state="right"] { border-bottom-color: var(--matcha) }
.session-tiles__line[data-state="wrong"] { border-bottom-color: var(--kaki); animation: pulingo-nudges var(--settled) var(--ease-move) }
.session-tiles__bank { display: flex; flex-wrap: wrap; gap: 8px }
.session-tiles__tile { display: inline-flex; gap: 8px; align-items: center; height: 48px; padding: 0 14px; border: 1px solid var(--edge); border-radius: 12px; background-color: var(--paper); font-family: var(--gothic); font-size: 20px; font-weight: 400; color: var(--ink); cursor: pointer; user-select: none; touch-action: manipulation; transition: scale var(--quick) var(--ease-out) }
.session-tiles__tile:active { scale: 0.97; transition-duration: 0ms }
.session-tiles__tile:hover { cursor: pointer }
.session-tiles__tile:disabled { cursor: default; color: inherit }
.session-tiles__tile[data-used="true"] { border-style: dashed; background-color: var(--sheet); color: transparent; pointer-events: none }
.session-tiles__hint { display: none }
.session-tiles__tile[data-used="true"] .session-tiles__hint { opacity: 0 }
.session-tiles__line[data-state="right"] .session-tiles__tile { color: var(--matcha) }
.session-tiles__line[data-state="wrong"] .session-tiles__tile { color: var(--kaki) }
.session-typing { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; min-height: 100% }
.session-typing__field { display: grid; gap: 8px; margin: 0 }
.session-typing__input { box-sizing: border-box; width: 100%; height: 56px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background-color: var(--paper); font: inherit; font-size: 22px; color: var(--ink); outline: none }
.session-typing__input:focus { border-color: var(--ink); outline: 1px solid var(--ink); outline-offset: -2px }
.session-typing__input::placeholder { color: var(--quiet); opacity: 0.6 }
.session-typing__input[data-state="right"] { border-color: var(--matcha); outline-color: var(--matcha); background-color: var(--matcha-wash); color: var(--matcha) }
.session-typing__input[data-state="wrong"] { border-color: var(--kaki); outline-color: var(--kaki); background-color: var(--kaki-wash); color: var(--kaki); animation: pulingo-nudges var(--settled) var(--ease-move) }
.session-typing__note { margin: 0; font-size: 13px; color: var(--quiet) }
.ui-button { display: inline-flex; gap: 10px; align-items: center; justify-content: center; box-sizing: border-box; min-height: 52px; padding: 0 20px; border: 1px solid transparent; border-radius: 12px; font: inherit; font-size: 17px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; touch-action: manipulation; transition: scale var(--quick) var(--ease-out) }
.ui-button[data-wide="true"] { width: 100% }
.ui-button:active { scale: 0.97; transition-duration: 0ms }
.ui-button[data-kind="ink"] { background-color: var(--ink); color: var(--paper) }
.ui-button[data-kind="quiet"] { border-color: var(--edge); background-color: var(--paper); color: var(--ink) }
.ui-button[data-kind="plain"] { min-height: 44px; padding: 0 8px; background-color: transparent; color: var(--quiet); font-weight: 500 }
.ui-button[data-kind="ink"]:hover { cursor: pointer }
.ui-button[data-kind="quiet"]:hover { cursor: pointer }
.ui-button[data-kind="plain"]:hover { cursor: pointer }
.ui-button:disabled { cursor: default; opacity: 0.4 }
.ui-button__label { min-width: 0; overflow: hidden; text-overflow: ellipsis }
.ui-button__hint { display: none }
.ui-button[data-kind="quiet"] .ui-button__hint { background-color: var(--wash); color: var(--quiet); opacity: 1 }
.ui-button[data-kind="plain"] .ui-button__hint { background-color: var(--wash); color: var(--quiet); opacity: 1 }
.ui-choice { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "text"
    "under"
    "mark"; align-content: center; align-items: center; column-gap: 8px; box-sizing: border-box; min-height: 72px; padding: 12px 16px; border: 1px solid var(--edge); border-radius: 12px; background-color: var(--paper); color: var(--ink); font: inherit; text-align: left; user-select: none; touch-action: manipulation; transition: scale var(--quick) var(--ease-out) }
.ui-choice:active { scale: 0.97; transition-duration: 0ms }
.ui-choice:hover { cursor: pointer }
.ui-choice[data-state="picked"] { border-color: var(--ai); background-color: var(--ai-wash); color: var(--ai) }
.ui-choice[data-state="right"] { border-color: var(--matcha); background-color: var(--matcha-wash); color: var(--matcha) }
.ui-choice[data-state="wrong"] { border-color: var(--kaki); background-color: var(--kaki-wash); color: var(--kaki); animation: pulingo-nudges var(--settled) var(--ease-move) }
.ui-choice[data-state="missed"] { border-color: var(--matcha); border-style: dashed; color: var(--matcha) }
.ui-choice[data-state="quiet"] { color: var(--quiet) }
.ui-choice[aria-disabled="true"] { cursor: default }
.ui-choice__hint { display: none }
.ui-choice[data-hinted="true"] { padding-inline-start: 16px }
.ui-choice__text { grid-area: text; min-width: 0; font: 500 17px / 1.3 var(--ui); overflow-wrap: anywhere }
.ui-choice[data-kana="true"] .ui-choice__text { font-family: var(--gothic); font-weight: 400; line-height: 1.4; word-break: auto-phrase }
.ui-choice[data-kana="true"][data-size="l"] .ui-choice__text { font-size: 32px; line-height: 1.1 }
.ui-choice[data-kana="true"][data-size="m"] .ui-choice__text { font-size: 22px }
.ui-choice__under { grid-area: under; font-size: 13px; color: var(--quiet) }
.ui-choice__mark { grid-area: mark; font-size: 12px; font-weight: 600 }
.ui-glyph { display: block; max-width: 100%; font-family: var(--gothic); font-weight: 400; letter-spacing: 0; line-height: 1; text-align: center; color: var(--ink); overflow-wrap: anywhere; word-break: auto-phrase; text-wrap: balance }
.ui-glyph[data-size="hero"] { font-size: 112px }
.ui-glyph[data-size="l"] { font-size: 64px; line-height: 1.1 }
.ui-glyph[data-size="m"] { font-size: 40px; line-height: 1.2 }
.ui-glyph[data-size="s"] { font-size: 26px; line-height: 1.7 }
.ui-glyph[data-size="row"] { font-size: 22px; line-height: 1.2; text-align: left }
.ui-key-hint { display: none }
.ui-key-hint__key { padding: 1px 5px; border-radius: 6px; background-color: var(--wash); font: inherit; font-size: 11px; font-weight: 500; line-height: 1.5; text-align: center; color: var(--quiet) }
.ui-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; min-width: 0 }
.ui-progress__track { height: 3px; overflow: hidden; border-radius: 6px; background-color: var(--hair) }
.ui-progress__fill { height: 100%; background-color: var(--ink); transform-origin: left center; transition: scale var(--settled) var(--ease-move) }
.ui-progress__count { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; color: var(--quiet) }
.ui-sheet__behind { position: fixed; inset: 0; z-index: 20; background-color: var(--scrim); transition: opacity var(--quick) var(--ease-out) }
.ui-sheet__behind[data-starting-style] { opacity: 0 }
.ui-sheet__behind[data-ending-style] { opacity: 0 }
.ui-sheet { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 21; display: flex; flex-direction: column; box-sizing: border-box; max-height: calc(100% - 40px - var(--safe-top)); border-radius: 20px 20px 0 0; background-color: var(--paper); outline: none }
.ui-sheet[data-starting-style] { opacity: 0; scale: 0.97 }
.ui-sheet[data-ending-style] { opacity: 0; scale: 0.97; transition-duration: var(--fast) }
.ui-sheet__handle { flex: none; align-self: center; height: 5px; margin-block-start: 8px; padding-inline: 18px; border-radius: 6px; background-color: var(--edge); background-clip: content-box }
.ui-sheet__head { display: flex; flex: none; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 16px 4px 24px }
.ui-sheet__title { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em }
.ui-sheet__close { min-height: 44px; padding: 0 8px; border: none; background: none; font: inherit; font-size: 15px; color: var(--quiet); cursor: pointer }
.ui-sheet__close:hover { cursor: pointer }
.ui-sheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 24px calc(var(--foot-room) + 24px) }
.ui-frame { --shell-rail: 76px; --shell-measure: 1fr; --shell-gap: 0px; --shell-top: 0px; --tabs: 56px; --foot-room: calc(var(--safe-bottom) + max(var(--tabs), var(--reserved-bottom, 0px))); min-height: 100dvh }
.ui-frame__rail { position: fixed; inset-inline: 0; bottom: 0; z-index: 10; display: var(--tabs-display, flex); gap: 4px; height: calc(var(--tabs) + var(--safe-bottom)); padding: 0 12px var(--safe-bottom); box-sizing: border-box; border-top: 1px solid var(--hair); background-color: var(--paper) }
.ui-frame__brand { display: none }
.ui-frame__name { display: none }
.ui-frame__link { position: relative; display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; margin-block-start: 4px; border-radius: var(--radius-control); color: var(--quiet); font-size: 11px; font-weight: 500; text-decoration: none; user-select: none; touch-action: manipulation }
.ui-frame__link[aria-current="page"] { color: var(--ink) }
.ui-frame__link:hover { cursor: pointer }
.ui-frame__link svg { flex: none }
.ui-frame__due { position: absolute; top: 2px; left: calc(50% + 6px); display: inline-grid; place-items: center; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background-color: var(--ai); color: var(--on-ai); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums }
.ui-frame__unit { display: none }
.ui-frame__shelves { display: none }
.ui-frame__foot { display: none }
.ui-frame__top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: calc(var(--safe-top) + 12px) 12px 0 20px }
.ui-frame__gear { display: grid; place-items: center; height: 44px; aspect-ratio: 1; border-radius: 50%; color: var(--quiet); touch-action: manipulation }
.ui-frame__gear[aria-current="page"] { color: var(--ink) }
.ui-frame__label { min-width: 0 }
.ui-frame__main { min-width: 0 }
.ui-hear-help { display: grid; gap: 16px; padding: 4px 0 8px }
.ui-hear-help__lead { margin: 0; max-width: 34em; font-family: var(--read); font-size: 17px; line-height: 1.55 }
.ui-hear-help__steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-radius: var(--radius-tile); background-color: var(--sheet); box-shadow: inset 0 0 0 1px var(--hair); counter-reset: step }
.ui-hear-help__step { display: flex; gap: 12px; align-items: center; min-height: 48px; padding: 0 16px; border-top: 1px solid var(--hair); font-size: 15px; counter-increment: step }
.ui-hear-help__step:first-child { border-top: none }
.ui-hear-help__step::before { content: counter(step); display: inline-grid; place-items: center; flex: none; height: 24px; aspect-ratio: 1; border-radius: 50%; background-color: var(--wash); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--quiet) }
.ui-hear-help__test { justify-self: start; min-height: 44px; padding: 0 20px; border: none; border-radius: var(--radius-tile); background-color: var(--ai); color: var(--on-ai); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: scale var(--press) var(--ease-out) }
.ui-hear-help__test:active { scale: var(--pressed) }
.ui-hear-help__result { margin: 0; min-height: 1.45em; font-size: 14px; color: var(--quiet) }
.ui-hear { --hear-target: 44px; display: inline-flex; flex: none }
.ui-hear .craft-hear__press { gap: 8px; padding: 0 16px 0 13px; border-radius: 999px; background-color: var(--sheet); box-shadow: inset 0 0 0 1px var(--edge); color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; user-select: none; transition: scale var(--press) var(--ease-out),
    background-color var(--quick) ease,
    box-shadow var(--quick) ease,
    color var(--quick) ease }
.ui-hear .craft-hear__press:active { scale: var(--pressed) }
.ui-hear .craft-hear__press:hover { cursor: pointer }
.ui-hear .craft-hear__note { position: absolute; max-width: 1px; max-height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
.ui-hear[data-size="row"] .craft-hear__press { padding: 4px; background-clip: content-box; box-shadow: none; outline: 1px solid var(--edge); outline-offset: -5px }
.ui-hear[data-size="hero"] { --hear-target: 52px }
.ui-hear[data-size="hero"] .craft-hear__press { padding: 0 28px 0 24px; background-color: var(--ai); box-shadow: none; color: var(--on-ai); font-size: 16px }
.ui-hear[data-size="placard"] { --hear-target: 56px }
.ui-hear[data-size="placard"] .craft-hear__press { padding: 0 28px 0 22px; box-shadow: none; font-size: 17px }
.ui-hear__bars { display: inline-flex; gap: 2.5px; align-items: center; height: 16px }
.ui-hear__bar { height: 6px; border-left: 2.5px solid currentColor; border-radius: 2px }
.ui-hear__bar:nth-child(2) { height: 14px }
.ui-hear__bar:nth-child(3) { height: 9px }
.ui-hear__bar:nth-child(4) { height: 4px }
.ui-hear__again { display: none }
.ui-hear .craft-hear__press[data-state="playing"] { background-color: var(--ai); box-shadow: none; outline-color: var(--ai); color: var(--on-ai) }
.ui-hear[data-size="hero"] .craft-hear__press[data-state="playing"] { background-color: color-mix(in srgb, var(--ai) 82%, var(--ink)) }
.ui-hear .craft-hear__press[data-state="playing"] .ui-hear__bar { animation: ui-hear-breathes 900ms ease-in-out infinite alternate }
.ui-hear .craft-hear__press[data-state="playing"] .ui-hear__bar:nth-child(2) { animation-delay: -300ms }
.ui-hear .craft-hear__press[data-state="playing"] .ui-hear__bar:nth-child(3) { animation-delay: -600ms }
.ui-hear .craft-hear__press[data-state="loading"] .ui-hear__bars { opacity: 0.45 }
.ui-hear:not([data-slow]) .craft-hear__press[data-state="replay"] .ui-hear__word { display: none }
.ui-hear:not([data-slow]) .craft-hear__press[data-state="replay"] .ui-hear__again { display: inline }
.ui-hear .craft-hear__press[data-state="unavailable"] { background-color: transparent; box-shadow: none; outline: 1px dashed var(--line); outline-offset: -1px; color: var(--quiet) }
.ui-hear[data-size="row"] .craft-hear__press[data-state="unavailable"] { outline-offset: -5px }
.ui-hear .craft-hear__press[data-state="unavailable"] .ui-hear__bar { height: 2px }
.ui-hear .craft-hear__press[data-state="failed"] { box-shadow: inset 0 0 0 1px var(--kaki); outline-color: var(--kaki); color: var(--kaki) }
.ui-hear[data-size="text"] .craft-hear__press { gap: 6px; padding: 0 12px; background-color: transparent; box-shadow: none; color: var(--ai) }
.ui-hear[data-size="text"] .craft-hear__press[data-state="playing"] { background-color: var(--ai); color: var(--on-ai) }
.ui-show { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background-color: var(--shelf-tint); color: var(--ink); animation: pulingo-fades var(--quick) var(--ease-out) backwards }
.ui-show__top { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: calc(var(--safe-top) + 8px) 20px 0 8px }
.ui-show__close { display: grid; place-items: center; height: 44px; aspect-ratio: 1; border: none; border-radius: 50%; background: none; color: var(--shelf-deep); cursor: pointer; touch-action: manipulation }
.ui-show__name { margin: 0; min-width: 0; font-size: 15px; font-weight: 500; text-align: end; color: var(--shelf-deep); overflow-wrap: anywhere }
.ui-show__stage { display: grid; align-content: center; justify-items: center; gap: 8px; padding: 0 20px; text-align: center; transition: rotate var(--spring-settle) }
.ui-show__stage[data-turned="true"] { rotate: 180deg }
.ui-show__glyph { max-width: 100%; margin: 0 0 12px; font-family: var(--gothic); font-weight: 600; line-height: 1.05; word-break: break-all }
.ui-show__sentence { margin: 0; font-family: var(--gothic); font-size: 26px; font-weight: 300; line-height: 1.4; overflow-wrap: anywhere }
.ui-show__english { margin: 0; font-size: 17px; color: var(--shelf-deep) }
.ui-show__foot { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 12px 16px calc(var(--safe-bottom) + var(--reserved-bottom, 0px) + 12px) }
.ui-show__foot .ui-hear { flex: 1 1 auto; max-width: 360px }
.ui-show__foot .craft-hear { flex: 1 1 auto }
.ui-show__foot .craft-hear__press { flex: 1 1 auto }
.ui-show__turn { display: inline-flex; flex: none; gap: 8px; align-items: center; height: 56px; padding: 0 22px; border: none; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px var(--shelf-mark); color: var(--shelf-deep); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; touch-action: manipulation; transition: scale var(--press) var(--ease-out) }
.ui-show__turn:active { scale: var(--pressed) }
@container (min-width: 480px) {
  .credit { --credit-open: 1fr }
  .layout-beside--hide .layout-beside__media { display: block }
}
@container (min-width: 800px) {
  .layout-shell__body { grid-template-columns: var(--shell-rail, 15rem) minmax(0, var(--shell-measure, 42rem)); justify-content: center; align-items: start; gap: var(--shell-gap, 48px); padding-inline: var(--shell-pad, 0px) }
  .layout-shell__rail { position: sticky; top: var(--shell-top, 40px) }
  .games-empty { grid-template-rows: auto auto auto; align-content: start; gap: 12px; max-width: 608px; min-height: 0; margin: 0 auto; padding: 96px 24px 64px }
  .games-empty__acts { grid-row: auto; display: flex; gap: 12px; padding-top: 24px }
  .guide-actions { --keys-cell: inline-grid }
  .guide-actions__button { min-height: 44px; padding: 0 16px; border-radius: var(--radius-control); font-size: 14px; white-space: nowrap }
  .guide-chart { padding: 16px 24px 8px }
  .guide-chart__cell[data-focused="true"] { box-shadow: inset 0 0 0 1.5px var(--shelf-mark) }
  .guide-detail { --keys-row: flex; padding: 0 }
  .guide-detail__ribbon { right: 0 }
  .guide-detail__glyph { margin-block-start: 24px; font-size: 120px }
  .guide-detail__glyph[data-size="l"] { font-size: 104px }
  .guide-detail__glyph[data-size="m"] { font-size: 76px }
  .guide-detail__glyph[data-size="s"] { font-size: 52px }
  .guide-detail__glyph[data-size="xs"] { font-size: 36px }
  .guide-detail__voice .ui-hear[data-size="hero"] { flex: none }
  .guide-field { position: static; padding: 0 24px 12px; background-image: none }
  .guide-field__box { height: 44px; padding: 0 6px 0 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--edge) }
  .guide { display: grid; grid-template-columns: 360px minmax(0, 1fr); height: 100dvh; overflow: hidden }
  .guide__pane { min-height: 0; border-right: 1px solid var(--hair) }
  .guide__head { padding: 28px 24px 16px }
  .guide__title { font-size: 26px }
  .guide__lede { margin-block-start: 4px; font-size: 14px }
  .guide__scroll { padding-block: 4px 32px; overflow-y: auto; overscroll-behavior: contain }
  .guide__stage { display: block; min-width: 0; min-height: 0; padding: 56px 28px 40px; overflow-y: auto; overscroll-behavior: contain }
  .guide-list__heading { margin: 0 24px }
  .guide-list__recent { padding: 12px 24px 0 }
  .guide-list__empty { padding: 8px 24px }
  .guide-row { margin-inline: 12px; padding-inline: 12px; border-radius: var(--radius-control) }
  .guide-row[data-focused="true"] { border-bottom-color: transparent; background-color: var(--wash) }
  .guide-shelves { padding: 4px 24px 0 }
  .guide-shelves__tile { height: 64px; padding: 9px 11px 8px }
  .guide-shelves__glyph { font-size: 36px }
  .results { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); column-gap: 64px; row-gap: 32px; max-width: 880px; min-height: 0; margin: 0 auto; padding: 96px 40px 48px }
  .results[data-lists="false"] { grid-template-columns: minmax(0, 1fr); max-width: 608px }
  .results__head { grid-column: 1 }
  .results__numbers { grid-column: 1 }
  .results__lists { grid-column: 2; grid-row: 1 / span 3 }
  .results__foot { position: static; grid-column: 1; display: flex; gap: 12px; align-self: start; margin-inline: 0; padding: 0 }
  .session-choices__grid { grid-template-columns: minmax(0, 1fr) }
  .session-feedback { position: static; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-top: 24px; padding: 20px 0 calc(var(--foot-room) + 12px) }
  .session-feedback[data-state="right"] { background-color: transparent }
  .session-feedback[data-state="wrong"] { background-color: transparent }
  .session-feedback__verdict { grid-column: 1; padding-block-start: 0 }
  .session-feedback[data-state="right"] .session-feedback__mark { background-color: var(--matcha-wash) }
  .session-feedback[data-state="wrong"] .session-feedback__mark { background-color: var(--kaki-wash) }
  .session-feedback__act { grid-column: 2; justify-items: end }
  .ui-choice { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text mark"
      "under mark"; column-gap: 12px; min-height: 52px; padding: 10px 14px 10px 12px }
  .ui-frame { --foot-room: calc(var(--safe-bottom) + var(--reserved-bottom, 0px)) }
  .ui-frame__rail { position: static; flex-direction: column; align-items: center; display: flex; height: 100dvh; padding: 20px 0; border-top: none; border-right: 1px solid var(--hair); background-color: transparent }
  .ui-frame__brand { display: flex; min-height: 44px; gap: 10px; align-items: center; margin-block-end: 18px; padding: 0 8px; color: var(--ink); text-decoration: none }
  .ui-frame__link { min-height: 56px; margin: 0; padding: 0 8px }
  .ui-frame__link[aria-current="page"] { background-color: var(--wash) }
  .ui-frame__foot { display: flex; margin-block-start: auto }
  .ui-frame__top { display: none }
}
@container (min-width: 1120px) {
  .guide-actions { display: flex; flex-wrap: wrap }
  .guide { grid-template-columns: 380px minmax(0, 1fr) }
  .guide__stage { padding: 56px 40px 40px }
  .guide-shelves { display: none }
  .ui-frame { --shell-rail: 236px }
  .ui-frame__rail { align-items: stretch; gap: 2px; padding: 20px 12px }
  .ui-frame__name { display: inline; font-family: var(--read); font-size: 19px; font-weight: 600; letter-spacing: -0.01em }
  .ui-frame__link { flex-direction: row; gap: 10px; justify-content: flex-start; min-height: 32px; padding: 0 8px; font-size: 14px; color: var(--ink) }
  .ui-frame__link svg { width: 18px; height: 18px; color: var(--quiet) }
  .ui-frame__due { position: static; display: inline; margin-inline-start: auto; padding: 0; background-color: transparent; color: var(--quiet); font-size: 12px; font-weight: 500 }
  .ui-frame__unit { display: inline }
  .ui-frame__shelves { display: grid; gap: 1px; margin: 2px 0 14px }
}
@media (hover: none) {
  .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 #2a456e24, 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 }
  #door .c-field input { font-size: 16px; height: 44px }
  :root:has(input:not([type="radio"]):not([type="checkbox"]):focus) { --tabs-display: none }
  :where(.craft-toast__shut) { opacity: 1 }
  .guide-list__chip { min-height: 44px }
  .guide-list__clear { min-height: 44px }
  .guide-shelves__row { min-height: 44px }
  .ui-frame__link { min-height: 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) }
  .games-flash { grid-template-rows: auto auto; align-content: start; gap: 32px }
  .games-flash__prompt { padding: 24px 0 8px; animation: none }
  .games-flash__foot { gap: 12px; padding-bottom: 0 }
  .games-flash__input { height: 52px; font-size: 20px }
  .games-flash__hints { display: flex; gap: 16px; margin: 0 }
  .games-frame { grid-template-rows: auto auto; align-content: start; max-width: 608px; margin: 0 auto; padding: 40px 24px 64px }
  .games-frame__top { gap: 16px; padding: 0 0 32px }
  .games-frame__lead { height: 32px; aspect-ratio: auto; padding: 0 6px 0 0 }
  .games-frame__lead:hover { color: var(--ink) }
  .games-frame__stage { padding: 0 }
  .games-frame__paused { grid-template-rows: auto auto auto; gap: 12px; padding: 48px 0 0; animation: none }
  .games-frame__acts { grid-row: auto; display: flex; gap: 12px; padding-top: 24px }
  .games-judge { grid-template-rows: auto auto auto; align-content: start; gap: 24px }
  .games-judge__card { min-height: 0; padding: 48px 24px; animation: none }
  .games-judge__acts { gap: 12px; padding-bottom: 0 }
  .games-pairs { grid-template-rows: auto auto; align-content: start; gap: 24px }
  .games-pairs__board { gap: 12px; align-self: start; padding-bottom: 0 }
  .games-pairs__side { grid-auto-rows: minmax(52px, auto) }
  .games-pairs__tile[data-fresh="true"] { animation: none }
  .guide-actions__button { min-height: 36px }
  .guide-actions__button:hover { box-shadow: inset 0 0 0 1px var(--line) }
  .guide-actions__key { display: var(--keys-cell, none) }
  .guide-actions__more { min-height: 36px }
  .guide-actions__row { min-height: 36px }
  .guide-chart__kana:hover { background-color: color-mix(in srgb, var(--wash) 60%, transparent) }
  .guide-detail__keys { display: var(--keys-row, none) }
  .guide-field__input { font-size: 15px }
  .guide-field__clear { height: 30px; border-radius: 8px }
  .guide-field__key { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-inline-end: 6px; border-radius: var(--radius-key); background-color: var(--wash); font: inherit; font-size: 12px; color: var(--quiet) }
  .guide-list__action { min-height: 36px; border-radius: var(--radius-control); font-size: 14px }
  .guide-row:hover { background-color: color-mix(in srgb, var(--wash) 60%, transparent) }
  .guide-row[data-focused="true"]:hover { background-color: var(--wash) }
  .guide-row__link { min-height: 56px }
  .guide-sheet { inset-block: 12vh auto; margin-inline: auto; max-width: 480px; border-radius: 16px }
  .guide-shelves__tile:hover { box-shadow: inset 0 0 0 1px var(--shelf-mark) }
  .guide-shelves__tile[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 1.5px var(--shelf-mark) }
  .guide-shelves__row:hover { color: var(--ink) }
  .look-up__link { min-height: 32px; font-size: 14px }
  .results-list__row { min-height: 44px }
  .results-list__row:hover { background-color: var(--sheet) }
  .session-choices { grid-template-rows: auto auto; align-content: start; gap: 32px }
  .session-feedback__verdict { animation: none }
  .session-feedback__mark { animation: none }
  .session-intro { grid-template-rows: auto auto; align-content: start; gap: 32px }
  .session-intro__hero { padding-block: 16px }
  .session-pairs { grid-template-rows: auto auto; align-content: start; gap: 24px }
  .session-pairs__board { gap: 16px; align-content: start }
  .session-prompt { gap: 24px }
  .session-prompt__hero { padding-block: 16px 8px }
  .session-prompt__words[data-short="true"] { font-size: 72px }
  .session { grid-template-rows: auto auto auto; align-content: start; max-width: 608px; margin: 0 auto; padding: 40px 24px 64px }
  .session__top { gap: 16px; padding: 0 0 32px }
  .session__close { height: 32px; aspect-ratio: auto; padding: 0 6px 0 0 }
  .session__close:hover { color: var(--ink) }
  .session__stage { padding: 0; animation: none }
  .session-tiles { grid-template-rows: auto auto auto; align-content: start; gap: 24px }
  .session-tiles__line { min-height: 64px }
  .session-tiles__line[data-state="wrong"] { animation: none }
  .session-tiles__tile { height: 40px; padding: 0 10px; font-size: 18px; transition: none }
  .session-tiles__tile:active { scale: none }
  .session-tiles__tile:hover { border-color: var(--line) }
  .session-tiles__hint { display: inline-block; padding: 0 5px; border-radius: 6px; background-color: var(--wash); font-family: var(--ui); font-size: 11px; font-weight: 500; line-height: 1.6; color: var(--quiet) }
  .session-typing { grid-template-rows: auto auto; align-content: start; gap: 32px }
  .session-typing__input { height: 52px; font-size: 20px }
  .session-typing__input[data-state="wrong"] { animation: none }
  .ui-button { min-height: 36px; padding: 0 14px; font-size: 14px; transition: none }
  .ui-button[data-wide="true"] { width: auto }
  .ui-button:active { scale: none }
  .ui-button[data-kind="plain"] { min-height: 32px; padding: 0 6px }
  .ui-button[data-kind="ink"]:hover { background-color: color-mix(in srgb, var(--ink) 86%, var(--paper)) }
  .ui-button[data-kind="quiet"]:hover { background-color: var(--sheet); border-color: var(--line) }
  .ui-button[data-kind="plain"]:hover { color: var(--ink) }
  .ui-button__hint { display: inline-block; padding: 1px 5px; border-radius: 6px; background-color: color-mix(in srgb, currentColor 16%, transparent); font: inherit; font-size: 11px; font-weight: 500; line-height: 1.4; color: inherit; opacity: 0.8 }
  .ui-choice { transition: none }
  .ui-choice:active { scale: none }
  .ui-choice:hover { border-color: var(--line) }
  .ui-choice[data-state="wrong"] { animation: none }
  .ui-choice__hint { position: absolute; inset-block-start: 50%; inset-inline-start: 12px; translate: 0 -50%; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background-color: var(--wash); font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--quiet) }
  .ui-choice[data-hinted="true"] { padding-inline-start: 46px }
  .ui-choice[data-kana="true"][data-size="l"] .ui-choice__text { font-size: 26px }
  .ui-choice[data-kana="true"][data-size="m"] .ui-choice__text { font-size: 20px }
  .ui-glyph[data-size="hero"] { font-size: 136px }
  .ui-glyph[data-size="l"] { font-size: 80px }
  .ui-glyph[data-size="m"] { font-size: 48px }
  .ui-glyph[data-size="s"] { font-size: 30px }
  .ui-key-hint { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--quiet); white-space: nowrap }
  .ui-sheet { inset-block: 14vh auto; margin-inline: auto; width: min(440px, calc(100% - 48px)); max-height: 72dvh; border-radius: 20px; box-shadow: var(--lifted); transition: opacity var(--quick) var(--ease-out),
      scale var(--quick) var(--ease-out) }
  .ui-sheet__handle { display: none }
  .ui-sheet__head { padding: 16px 12px 4px 20px }
  .ui-sheet__close { min-height: 32px; font-size: 14px }
  .ui-sheet__close:hover { color: var(--ink) }
  .ui-sheet__body { padding: 8px 20px 20px }
  .ui-frame__link:hover { color: var(--ink) }
  .ui-hear-help__test { min-height: 36px; border-radius: var(--radius-control) }
  .ui-hear { --hear-target: 34px }
  .ui-hear .craft-hear__press:hover { box-shadow: inset 0 0 0 1px var(--line) }
  .ui-hear[data-size="row"] .craft-hear__press { padding: 0; outline-offset: -1px }
  .ui-hear[data-size="hero"] .craft-hear__press { font-size: 15px }
  .ui-hear[data-size="row"] .craft-hear__press[data-state="unavailable"] { outline-offset: -1px }
}
@media (prefers-reduced-motion: reduce) {
  :root { --spring-settle: 160ms ease-out; --spring-lift: 160ms ease-out; --spring-stamp: 160ms ease-out; --nudge: 0ms linear; --pressed: 1 }
  .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 #2a456e24, 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 }
  .credit:hover { transition: none }
  .credit:focus-visible { transition: none }
  .credit:hover .credit-fold { transition: none }
  .credit:focus-visible .credit-fold { transition: none }
  .credit:hover .credit-lead { transition: none }
  .credit:focus-visible .credit-lead { transition: none }
  .credit:hover .credit-name { transition: none }
  .credit:focus-visible .credit-name { transition: none }
  .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) }
  .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 }
  .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 }
  .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 }
  #door > * { animation-name: door-said }
  :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 }
  .games-flash__prompt { animation: none }
  .games-frame__fill { transition: none }
  .games-frame__paused { animation: none }
  .games-judge__card { animation: none }
  .games-pairs__tile[data-fresh="true"] { animation: pulingo-fades var(--quick) var(--ease-out) backwards }
  .guide-actions__button { transition: none }
  .guide-detail__ribbon { animation: pulingo-fades var(--spring-settle) backwards }
  .guide-detail__glyph { animation: none }
  .guide-list__related { animation: pulingo-fades var(--spring-settle) backwards }
  .guide-list__chip { transition: none }
  .guide-list__action { transition: none }
  .guide-sheet__behind { transition: none }
  .guide-shelves__tile { transition: none }
  .results__head { animation: pulingo-fades var(--quick) var(--ease-out) backwards }
  .results__numbers { animation: pulingo-fades var(--quick) var(--ease-out) backwards }
  .results__lists { animation: pulingo-fades var(--quick) var(--ease-out) backwards }
  .results__foot { animation: pulingo-fades var(--quick) var(--ease-out) backwards }
  .session-feedback__verdict { animation: pulingo-fades var(--fast) var(--ease-out) backwards }
  .session-feedback__mark { animation: none }
  .session__stage { animation: none }
  .session-tiles__line[data-state="wrong"] { animation: none }
  .session-tiles__tile { transition: none }
  .session-typing__input[data-state="wrong"] { animation: none }
  .ui-button { transition: none }
  .ui-choice { transition: none }
  .ui-choice[data-state="wrong"] { animation: none }
  .ui-progress__fill { transition: none }
  .ui-sheet__behind { transition: none }
  .ui-sheet { transition: opacity var(--quick) var(--ease-out) }
  .ui-hear-help__test { transition: none }
  .ui-hear .craft-hear__press { transition: none }
  .ui-hear .craft-hear__press[data-state="playing"] .ui-hear__bar { animation: none }
  .ui-show { animation: none }
  .ui-show__stage { transition: none }
  .ui-show__turn { transition: none }
}