html, body { height: 100%; }
.p-app { min-height: 100vh; }
.p-body { align-items: stretch; }
.p-main { overflow: visible; }
.p-rail { max-height: none; overflow: visible; width: auto; }
.p-side {
  position: sticky;
  top: var(--topbar);
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  flex: none;
  max-height: calc(100vh - var(--topbar));
}
.p-side__body { width: var(--rail); overflow-y: auto; }
.p-side--r .p-side__body { width: var(--rail-narrow); }
.p-side__toggle {
  align-self: flex-end;
  margin: var(--space-3) var(--space-3) 0;
  width: var(--control-sm);
  height: var(--control-sm);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.p-side--r .p-side__toggle { align-self: flex-start; }
.p-side__toggle:hover { color: var(--ink); background: var(--surface); }
.p-side__shut { display: none; }
.p-side.is-closed .p-side__body, .p-side.is-closed .p-side__open { display: none; }
.p-side.is-closed .p-side__shut { display: inline; }
.p-side.is-closed .p-side__toggle { align-self: center; }
.p-lesson { max-width: var(--measure-lesson); margin: 0 auto; padding: var(--space-10) var(--space-8) var(--space-20); }
a { color: inherit; text-decoration: none; }
a.p-btn, button.p-btn { text-decoration: none; }
a.p-rail__i { text-decoration: none; }
a.p-link, .p-link { color: var(--accent); transition: color var(--duration-fast) var(--ease-out); }
a.p-link:hover, .p-link:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
html:has(.p-top--app) { scroll-padding-top: calc(var(--topbar) + var(--space-4)); }
.p-app > main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.p-app > main:focus { outline: none; }
.p-skip {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  height: var(--control-md);
  padding: 0 var(--control-md-pad);
  border-radius: var(--radius-pill);
  background: var(--accent-fill);
  color: var(--on-accent);
  font-size: var(--control-md-text);
  font-weight: 500;
  transform: translateY(calc(-100% - var(--space-4)));
  transition: transform var(--duration-fast) var(--ease-out);
}
.p-skip:focus { transform: none; }
.p-top--app { position: sticky; top: 0; z-index: 25; gap: 0; }
.p-top--app.is-scrolled { background: var(--surface); }
.p-top__mark {
  flex: none;
  align-items: center;
  height: var(--control-md);
  margin: 0 var(--space-2) 0 calc(var(--space-2) * -1);
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
}
.p-top__menu { display: none; margin: 0 var(--space-1) 0 calc(var(--space-3) * -1); font-size: 20px; }
.p-top__spec {
  appearance: none;
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  max-width: 240px;
  height: var(--control-md);
  margin-right: var(--space-6);
  padding: 0 calc(var(--control-md-pad) - 4px);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: 500 var(--control-md-text) / 20px var(--font-sans);
  letter-spacing: -0.026em;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.p-top__spec::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: var(--chevron) center / 12px no-repeat;
  transition: rotate var(--duration-fast) var(--ease-out);
}
.p-top__spec:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.p-top__spec[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.p-top__spec[aria-expanded="true"]::after { rotate: 180deg; }
.p-top__spec-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-top__tabs { flex: none; display: flex; align-items: center; gap: var(--space-1); }
.p-top__tab {
  display: inline-flex;
  align-items: center;
  height: var(--control-md);
  padding: 0 calc(var(--control-md-pad) - 2px);
  border-radius: var(--radius-pill);
  color: var(--ink-muted);
  font-size: var(--control-md-text);
  font-weight: 500;
  letter-spacing: -0.016em;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.p-top__tab:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.p-top__tab[aria-current="page"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, transparent); }
.p-top__search { position: relative; flex: 1 1 0; min-width: 160px; max-width: 264px; margin-left: var(--space-4); }
.p-top__search .p-sfield { width: 100%; }
.p-top__search .p-sfield > .p-input[type="search"] { padding: 0 52px 0 38px; border-color: transparent; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.p-top__search .p-sfield > .p-input[type="search"]:hover { border-color: var(--border-strong); }
.p-top__search .p-sfield > .p-input[type="search"]:focus { border-color: var(--accent); background: var(--surface); }
.p-top__search > .p-glass { position: absolute; top: 50%; left: 14px; z-index: 1; translate: 0 -50%; color: var(--ink-faint); pointer-events: none; }
.p-glass { position: relative; flex: none; display: inline-block; width: 14px; height: 14px; }
.p-glass::before { content: ""; position: absolute; top: 0; left: 0; width: 10.5px; height: 10.5px; border: 1.75px solid currentColor; border-radius: var(--radius-pill); }
.p-glass::after { content: ""; position: absolute; top: 10px; left: 7.75px; width: 6px; height: 1.75px; border-radius: 1px; background: currentColor; transform: rotate(45deg); transform-origin: 0 50%; }
.p-top__kbd {
  position: absolute;
  top: 50%;
  right: 12px;
  translate: 0 -50%;
  background: transparent;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.p-top__search:focus-within .p-top__kbd, .p-top__search:has(.p-sfield__clear:not([hidden])) .p-top__kbd { opacity: 0; }
.p-top__find { display: none; }
.p-top__me {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--control-md);
  height: var(--control-md);
  margin-left: var(--space-2);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  color: var(--accent);
  font: 600 13px / 1 var(--font-sans);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
.p-top__me:hover, .p-top__me[aria-expanded="true"] { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 9%, transparent); }
.p-top__in { margin-left: var(--space-2); }
.p-top__pop, .p-top__sheet {
  position: fixed;
  inset: auto;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  border: 0;
  padding: var(--space-2);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-xl);
  background: var(--surface-float);
  color: var(--ink);
  box-shadow: var(--shadow-overlay);
  animation: p-rise var(--duration-fast) var(--ease-out) both;
}
.p-top__pop[popover]:not(:popover-open), .p-top__sheet[popover]:not(:popover-open) { display: none; }
.p-top__pop { width: max-content; min-width: 240px; max-width: min(320px, calc(100vw - 2 * var(--space-2))); max-height: calc(100vh - var(--topbar) - var(--space-4)); }
.p-top__pop [role="menu"], .p-top__group { display: flex; flex-direction: column; gap: 2px; }
.p-top__group { margin-top: var(--space-1); }
.p-top__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--space-2) var(--space-3) var(--space-3); }
.p-top__who b { font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); overflow-wrap: anywhere; }
.p-top__who span { font-size: 13px; line-height: 18px; color: var(--ink-faint); overflow-wrap: anywhere; }
.p-top__label { padding: var(--space-3) var(--space-3) var(--space-1); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-faint); }
.p-top__item, .p-top__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: var(--control-md);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--ink-muted);
  font: 400 var(--control-md-text) / 20px var(--font-sans);
  letter-spacing: -0.016em;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.p-top__item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-top__item:hover, .p-top__row:hover { background: var(--surface-raised); color: var(--ink); }
.p-top__item:focus-visible, .p-top__row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; color: var(--ink); }
.p-top__item[aria-current], .p-top__row[aria-current="true"] { color: var(--ink); }
.p-top__item[aria-current] { font-weight: 500; }
.p-top__item[aria-current]::after, .p-top__row[aria-current="true"]::after { content: "✓"; flex: none; color: var(--accent); font-size: 12px; }
.p-top__item--more, .p-top__row--more { color: var(--accent); }
.p-top__sheet { inset: var(--topbar) var(--space-2) auto; width: auto; max-height: calc(100dvh - var(--topbar) - var(--space-4)); }
.p-top__row { min-height: var(--control-lg); padding: 0 var(--space-4); font-size: 15px; font-weight: 500; }
.p-top__row[aria-current="page"] { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); }
.p-top__specs { display: none; flex-direction: column; gap: 2px; }
@media (max-width: 1023px) {
  .p-top__search { display: none; }
  .p-top__find { display: inline-flex; }
  .p-top--app:not(.p-top--few) .p-top__tabs { display: none; }
  .p-top__menu { display: inline-flex; }
}
@media (min-width: 640px) {
  .p-top__sheet { right: auto; width: 300px; }
}
@media (max-width: 639px) {
  .p-top__spec { display: none; }
  .p-top--guest .p-top__tabs { display: none; }
  .p-top__specs { display: flex; }
  .p-top__sheet::backdrop { background: color-mix(in srgb, var(--overlay) 45%, transparent); }
}
.p-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4) var(--space-6); }
.p-head__main { flex: 1 1 320px; min-width: 0; }
.p-head__t {
  margin: 0;
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 44px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.p-head__sub { margin: var(--space-2) 0 0; max-width: 600px; font-size: 17px; line-height: 26px; letter-spacing: -0.011em; color: var(--ink-faint); }
.p-head__acts { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; min-height: 44px; }
.p-head__acts > form { display: contents; }
.p-back { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-6) calc(var(--control-sm-pad) * -0.75); }
@media (max-width: 639px) {
  .p-head__t { font-size: 30px; line-height: 36px; letter-spacing: -0.012em; }
  .p-head__acts { min-height: 0; }
  .p-back { margin-bottom: var(--space-4); }
}
.p-sec > .p-cap { font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -0.012em; color: var(--ink); }
.p-li:has(.p-li__go) { position: relative; }
.p-li__go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.p-li:has(.p-li__go) :is(a, button, summary, select, input, label):not(.p-li__go) { position: relative; z-index: 1; }

.p-input:focus { outline: none; border-color: var(--accent); }
.p-form { max-width: 360px; }
.p-form .p-btn--block { margin-top: var(--space-2); }
.p-input--error:focus { border-color: var(--danger); }
.p-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 13px;
  line-height: 18px;
  color: var(--ink);
}
.p-notice--danger { background: var(--danger-wash); }
.p-notice--danger .p-notice__g { color: var(--danger); }
.p-notice--accent { background: var(--accent-wash); }
.p-notice--accent .p-notice__g { color: var(--accent); }
.p-notice__g { flex: none; }
.htmx-added { animation: p-arrive var(--duration-base) var(--ease-out); }
@keyframes p-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}
::selection { background: var(--accent-wash); color: var(--ink); }
html { scrollbar-color: var(--border-strong) transparent; }
.p-btn:active:not([disabled]) { transform: translateY(1px); }
.p-btn { transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.p-btn--quiet[disabled] { background: transparent; }
.p-btn--quiet.p-danger { color: var(--danger); }
.p-btn--quiet.p-danger:hover { background: var(--danger-wash); color: var(--danger); }
.p-btn--danger:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 40%, transparent); }
.p-btn.htmx-request, .p-btn[aria-busy="true"], form.htmx-request .p-btn[type="submit"] { position: relative; color: transparent !important; pointer-events: none; }
.p-btn.htmx-request::after, .p-btn[aria-busy="true"]::after, form.htmx-request .p-btn[type="submit"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--ink-faint);
  border-top-color: transparent;
  animation: p-spin 700ms linear infinite;
}
.p-btn--primary.htmx-request::after, .p-btn--primary[aria-busy="true"]::after, form.htmx-request .p-btn--primary[type="submit"]::after { border-color: var(--on-accent); border-top-color: transparent; }
@keyframes p-spin { to { rotate: 360deg; } }
.p-input:disabled, .p-input[readonly] { background: var(--surface-raised); color: var(--ink-faint); border-color: var(--border); cursor: not-allowed; }
.p-input[readonly] { cursor: default; }
.p-input:user-invalid { border-color: var(--danger); }
.p-input::-webkit-search-cancel-button, .p-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.p-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.p-input[type="number"]::-webkit-inner-spin-button, .p-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.p-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; filter: var(--picker-filter); }
.p-input:-webkit-autofill, .p-input:-webkit-autofill:hover, .p-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: 0 0 0 1000px var(--surface) inset;
  transition: background-color 9999s;
}
@media (pointer: coarse) {
  .p-input { font-size: 16px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
  .p-rail__i { padding-top: var(--space-3); padding-bottom: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.p-auth { max-width: 360px; margin: 0 auto; padding: var(--space-24) var(--space-8) var(--space-20); }
.p-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-muted);
  cursor: pointer;
}
.p-consent input { margin: 1px 0 0; }
a.p-li { text-decoration: none; color: inherit; }
.p-mark:not([class*="--"]) { background: var(--border); border-color: var(--border); }
.p-prose h3 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: var(--space-8) 0 var(--space-3);
}
.p-prose h2:first-child, .p-prose h3:first-child { margin-top: 0; }
.p-prose code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 20px;
  background: var(--surface-raised);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}
.p-prose pre {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 24px;
  background: var(--code-bg);
  color: var(--code-ink);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
  margin: 0 0 var(--space-6);
}
.p-prose pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.p-prose blockquote { margin: 0 0 var(--space-6); padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.p-prose blockquote p { margin-bottom: var(--space-4); color: var(--ink); }
.p-prose blockquote > p:first-child > strong:first-child {
  display: block;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.p-prose em { font-style: normal; color: var(--ink); }
.p-prose hr { border: 0; height: 0; margin: var(--space-8) 0; }
.p-prose h1 {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: var(--space-8) 0 var(--space-4);
}
.p-prose h4 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--ink);
  margin: var(--space-6) 0 var(--space-2);
}
.p-prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.p-prose__table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  margin: 0 0 var(--space-6);
}
.p-prose__table:last-child { margin-bottom: 0; }
.p-prose table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.006em;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.p-prose th, .p-prose td { padding: var(--space-2) var(--space-4); text-align: left; vertical-align: top; border: 0; }
.p-prose th[align="center"], .p-prose td[align="center"] { text-align: center; }
.p-prose th[align="right"], .p-prose td[align="right"] { text-align: right; }
.p-prose thead tr { background: var(--surface-raised); }
.p-prose thead th { color: var(--ink); font-weight: 500; white-space: nowrap; }
.p-prose tbody tr:nth-child(even) { background: var(--surface); background: color-mix(in srgb, var(--surface-raised) 50%, transparent); }
.p-prose td code, .p-prose th code { white-space: nowrap; }
.p-prose > .p-code { margin: 0 0 var(--space-6); }
.p-prose > .p-code:last-child { margin-bottom: 0; }
.p-prose .p-code pre { margin: 0; padding: 0; background: none; border-radius: 0; overflow: visible; font: inherit; }
.p-essay .p-prose pre { tab-size: 4; }
.p-rail--toc { width: auto; padding-top: var(--space-2); }
.p-rail--toc .p-rail__g { width: 20px; font-variant-numeric: tabular-nums; }
.p-rail--toc .p-rail__i[aria-current] { color: var(--ink); background: var(--rail-on); }
.p-rail--toc .p-rail__i[aria-current] .p-rail__g { color: var(--accent); }
.p-toc { display: none; }
@media (max-width: 639px) {
  .p-toc { display: block; margin: 0 0 var(--space-8); border-radius: var(--radius-md); background: var(--surface); }
  .p-toc__s {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: inherit;
    list-style: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--ink);
  }
  .p-toc__s::-webkit-details-marker { display: none; }
  .p-toc__s .p-succ-l { margin-left: auto; font-weight: 400; }
  .p-toc__s::after { content: ""; flex: none; width: 12px; height: 12px; background: var(--chevron) center / 12px no-repeat; transition: rotate var(--duration-fast) var(--ease-out); }
  .p-toc[open] > .p-toc__s::after { rotate: 180deg; }
  .p-toc .p-rail {
    --rail-hover: color-mix(in srgb, var(--ink) 4%, var(--surface));
    --rail-on: color-mix(in srgb, var(--ink) 8%, var(--surface));
    max-height: 60vh;
    overflow-y: auto;
    padding: 0 0 var(--space-3);
  }
  .p-toc .p-rail__i { margin: 0 var(--space-2) 2px; }
  .p-essay .p-prose > .p-code, .p-essay .p-prose > pre {
    margin-left: calc(var(--space-5) * -1);
    margin-right: calc(var(--space-5) * -1);
    border-radius: 0;
  }
}
.p-slide__prose .p-prose table { font-size: 17px; line-height: 28px; }
.p-slide__prose .p-prose th, .p-slide__prose .p-prose td { padding: var(--space-3) var(--space-5); }
.p-quiz__q.p-prose { max-width: none; margin: 0 0 var(--space-4); }
.p-quiz__q.p-prose p { color: var(--ink); margin-bottom: var(--space-3); }
.p-quiz__q.p-prose p:last-child { margin-bottom: 0; }
.p-quiz__q.p-prose pre { margin-bottom: var(--space-3); }
.p-opt code, .p-fb code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--surface-raised);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}
.p-fb__t p { margin: 0 0 var(--space-2); }
.p-fb__t p:last-child { margin-bottom: 0; }
.p-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.p-callout {
  --c-fill: color-mix(in srgb, var(--ink) 6%, transparent);
  --c-chip: color-mix(in srgb, var(--ink) 11%, transparent);
  --c-glyph: var(--ink-muted);
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--c-fill);
}
.p-callout:last-child { margin-bottom: 0; }
.p-callout--tip { --c-fill: var(--accent-wash); --c-chip: color-mix(in srgb, var(--accent) 20%, transparent); --c-glyph: var(--accent); }
.p-callout--important { --c-fill: color-mix(in srgb, var(--ink) 9%, transparent); --c-chip: color-mix(in srgb, var(--ink) 16%, transparent); --c-glyph: var(--ink); }
.p-callout--warning { --c-fill: var(--caution-wash); --c-chip: color-mix(in srgb, var(--caution) 20%, transparent); --c-glyph: var(--caution); }
.p-callout--caution { --c-fill: var(--danger-wash); --c-chip: color-mix(in srgb, var(--danger) 18%, transparent); --c-glyph: var(--danger); }
.p-callout--aside { --c-fill: color-mix(in srgb, var(--ink) 3.5%, transparent); --c-chip: color-mix(in srgb, var(--ink) 8%, transparent); --c-glyph: var(--ink-faint); }
.p-callout--definition { --c-glyph: var(--accent); }
.p-callout__h {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.006em;
  color: var(--ink);
}
.p-callout__g {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--c-chip);
  color: var(--c-glyph);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.p-callout__t { min-width: 0; font-style: normal; }
.p-callout--aside .p-callout__t { color: var(--ink-faint); }
.p-callout--definition .p-callout__t { font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.012em; }
.p-prose .p-callout__b p, .p-prose .p-callout__b li { font-size: 16px; line-height: 26px; }
.p-prose .p-callout__b p { margin-bottom: var(--space-3); }
.p-prose .p-callout--aside .p-callout__b p, .p-prose .p-callout--aside .p-callout__b li { font-size: 15px; line-height: 24px; color: var(--ink-faint); }
.p-callout__b > :last-child, .p-prose .p-callout__b > :last-child { margin-bottom: 0; }
.p-callout__b > .p-code, .p-callout__b > pre, .p-callout__b > .p-math, .p-callout__b > .p-figure { margin-bottom: var(--space-3); }
.p-figure { margin: var(--space-8) 0; }
.p-figure:first-child { margin-top: 0; }
.p-figure__open {
  position: relative;
  display: block;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  cursor: zoom-in;
}
.p-figure__open img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); }
.p-figure__open::after {
  content: "⤢";
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: grid;
  place-items: center;
  width: var(--control-sm);
  height: var(--control-sm);
  border-radius: var(--radius-pill);
  background: var(--surface-float);
  color: var(--ink-muted);
  font: 500 14px/1 var(--font-sans);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ground) 60%, transparent);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.p-figure__open:hover::after, .p-figure__open:focus-visible::after { opacity: 1; }
.p-figure__open:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.p-figure__c { margin-top: var(--space-3); font-size: 14px; line-height: 20px; letter-spacing: -0.006em; color: var(--ink-faint); }
.p-viewer__c {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-3);
  max-width: min(60ch, calc(100% - 220px));
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-float);
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 18px;
}
.p-viewer .p-diagram__view { cursor: zoom-in; }
.p-viewer.is-movable .p-diagram__view { cursor: grab; }
.p-fn { line-height: 0; }
.p-fn__ref, .p-prose .p-fn__ref {
  display: inline-block;
  min-width: 17px;
  height: 17px;
  margin: 0 1px 0 2px;
  padding: 0 4px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 11px;
  line-height: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.p-fn__ref:hover, .p-fn__ref[aria-expanded="true"], .p-fn__ref:target { background: var(--accent-mark); }
.p-fn__ref:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.p-fnpop {
  position: fixed;
  z-index: 60;
  display: block;
  width: max-content;
  max-width: min(360px, calc(100vw - 32px));
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-float);
  box-shadow: var(--shadow-overlay);
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: -0.006em;
  text-align: left;
  white-space: normal;
  animation: p-fnpop-in var(--duration-fast) var(--ease-out) both;
}
.p-fnpop.is-below { animation-name: p-fnpop-down; }
@keyframes p-fnpop-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes p-fnpop-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.p-fnpop__h { display: block; margin-bottom: var(--space-1); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-faint); }
.p-fnpop__b { display: block; }
.p-prose .p-fnpop p, .p-fnpop p { margin: 0 0 var(--space-2); font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.p-prose .p-fnpop p:last-child, .p-fnpop p:last-child { margin-bottom: 0; }
.p-notes { margin-top: var(--space-10); }
.p-notes__h { margin-bottom: var(--space-2); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-faint); }
.p-prose .p-notes ol { margin: 0; padding-left: var(--space-6); font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.p-prose .p-notes li {
  margin: 0 0 var(--space-1) calc(var(--space-2) * -1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-base) var(--ease-out);
}
.p-prose .p-notes li::marker { font-variant-numeric: tabular-nums; }
.p-prose .p-notes li p { margin: 0 0 var(--space-2); font-size: 14px; line-height: 22px; }
.p-prose .p-notes li p:last-child { margin-bottom: 0; }
.p-notes li:target { background: var(--accent-wash); }
.p-prose .p-notes__back { border-bottom: 0; padding: 0 2px; font-weight: 600; }
.p-math { display: block; margin: 0 0 var(--space-6); padding: var(--space-1) 0; overflow-x: auto; overflow-y: hidden; color: var(--ink); scrollbar-width: thin; }
.p-math:last-child { margin-bottom: 0; }
.p-math .katex-display { margin: 0; }
.p-prose .katex { font-size: 1.1em; }
.p-math-bad { cursor: help; }
[data-editor] .p-math-bad, [data-editor] pre.p-math-bad { background: var(--danger-wash); color: var(--danger); }
.p-fault { display: none; }
[data-editor] .p-fault {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: calc(var(--space-2) - var(--space-6)) 0 var(--space-6);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--caution-wash);
  color: var(--caution);
  font-size: 14px;
  line-height: 20px;
}
.p-fault__g {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--caution) 18%, transparent);
  font-size: 12px;
  font-weight: 700;
}
.p-fault__l { font-weight: 600; }
.p-prose .p-quick { margin: var(--space-8) 0; max-width: none; }
.p-prose .p-quick:last-child { margin-bottom: 0; }
.p-quick__k { margin-bottom: var(--space-2); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-faint); }
.p-quick [data-check-opt] input { position: absolute; opacity: 0; width: 0; height: 0; border: 0; }
.p-quick [data-check-opt]:not(.p-opt--pick) { cursor: default; }
.p-quick__m { margin-left: auto; padding-left: var(--space-3); white-space: nowrap; }
.p-quick__m:empty { display: none; }
.p-quick__bar { display: flex; justify-content: flex-end; margin-top: var(--space-4); }
.p-quick__bar[hidden] { display: none; }
.p-quick__again { margin-top: var(--space-3); }
.ed-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--control-sm); }
.ed-insert::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  margin-left: var(--space-1);
  background: var(--chevron) center / 12px no-repeat;
  transition: rotate var(--duration-fast) var(--ease-out);
}
.ed-insert[aria-expanded="true"]::after { rotate: 180deg; }
.ed-menu { width: 320px; min-width: 0; }
.ed-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--control-lg);
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--ink);
  font: 500 var(--control-md-text) / 20px var(--font-sans);
  letter-spacing: -0.012em;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.ed-item:hover { background: var(--surface-raised); }
.ed-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; background: var(--surface-raised); }
.ed-item__g {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
}
.ed-item__t { display: flex; flex-direction: column; min-width: 0; }
.ed-item__h { font-size: 12.5px; line-height: 17px; font-weight: 400; letter-spacing: -0.004em; color: var(--ink-faint); }
.ed-group { display: flex; flex-direction: column; margin-top: var(--space-1); }
.ed-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--space-1) var(--space-3) var(--space-2); }
.ed-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--control-sm);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--ink-muted);
  font: 400 13px / 1 var(--font-sans);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.ed-chip:hover { background: color-mix(in srgb, var(--ink) 12%, var(--surface-float)); color: var(--ink); }
.ed-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; color: var(--ink); }
.ed-chip__g { color: var(--accent); font-weight: 600; }
.ed-area { position: relative; }
.ed-drop {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  place-items: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent-wash) 88%, transparent);
  color: var(--accent);
  font-size: 15px;
  font-weight: 500;
  pointer-events: none;
}
.ed-area.is-drop .ed-drop { display: grid; animation: p-rise var(--duration-fast) var(--ease-out) both; }
.ed-status.is-bad { color: var(--danger); }
.ed-status.is-busy { color: var(--ink-muted); }
.es-series {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--control-md);
  margin-top: var(--space-2);
  padding: 4px 4px 4px var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--surface);
}
.es-series__t { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; color: var(--ink-muted); font-size: 14px; line-height: 20px; text-decoration: none; }
.es-series__n { flex: none; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.es-series__dot { flex: none; color: var(--ink-dim); }
.es-series__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: color var(--duration-fast) var(--ease-out); }
.es-series__t:hover .es-series__name { color: var(--accent); }
.es-series__t:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-sm); }
.es-series__nav { display: flex; flex: none; gap: 2px; }
.es-series__nav .is-off { opacity: 0.3; pointer-events: none; }
.es-when { margin-top: var(--space-8); }
.es-series + .es-when { margin-top: var(--space-6); }
.es-title { margin: var(--space-3) 0 var(--space-2); text-wrap: balance; }
.es-sub { margin: 0 0 var(--space-3); max-width: 36em; font-size: 20px; line-height: 30px; letter-spacing: -0.014em; color: var(--ink-muted); text-wrap: pretty; }
.es-by { margin-bottom: var(--space-10); }
.p-essay { position: relative; }
.es-byrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-10); }
.es-byrow .es-by { margin-bottom: 0; }
.es-nb { margin: 0 calc(var(--control-sm-pad) * -0.75) 0 0; }
.es-nb__b { gap: var(--space-2); color: var(--ink-muted); }
.es-nb__b:hover { color: var(--ink); }
.es-nb__g { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--accent); font-size: 12px; line-height: 1; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.es-nb__b[aria-expanded="true"] { background: var(--accent-wash); color: var(--ink); }
.es-nb__b[aria-expanded="true"] .es-nb__g { background: var(--accent-fill); color: var(--on-accent); }
.es-ask {
  position: absolute;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-sm);
  padding: 0 var(--space-4) 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-float);
  box-shadow: var(--shadow-overlay);
  color: var(--ink);
  font: 500 var(--control-sm-text)/1 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  animation: es-ask-in var(--duration-fast) var(--ease-out) both;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.es-ask:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface-float)); }
.es-ask:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.es-ask__g { color: var(--accent); font-size: 12px; }
.es-ask.is-dock { position: fixed; left: 50%; bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); height: 44px; padding: 0 var(--space-5) 0 var(--space-4); font-size: 14px; transform: translateX(-50%); animation-name: es-ask-up; }
@keyframes es-ask-in { from { opacity: 0; transform: translateY(3px); } }
@keyframes es-ask-up { from { opacity: 0; transform: translateX(-50%) translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .es-ask { animation: none; }
}
.es-cover { margin: 0 0 var(--space-10); }
.es-cover img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: var(--radius-lg); background: var(--surface); }
.p-secn { display: inline-block; min-width: 1.5em; margin-right: var(--space-2); color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.es-end { display: flex; flex-direction: column; gap: var(--space-10); margin-top: var(--space-16); }
.es-topics { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.es-topic, .es-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--control-sm);
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.es-topic:hover, .es-chip:hover { background: var(--surface-raised); color: var(--ink); }
.es-topic:focus-visible, .es-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.es-chip.is-on { background: var(--accent-wash); color: var(--accent); }
.es-chip__x { margin-right: -2px; font-size: 15px; }
.es-pn { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.es-pn__i {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.es-pn__i:hover { background: var(--surface-raised); }
.es-pn__i:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.es-pn__i--next { grid-column: 2; text-align: right; }
.es-pn__k { font-size: 13px; line-height: 18px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.es-pn__t { font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); }
.es-rel__h { margin: 0 0 var(--space-4); font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -0.012em; color: var(--ink); }
.es-rel__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--space-3); }
.es-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.es-card:hover { background: var(--surface-raised); }
.es-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.es-card__img { display: block; width: 100%; aspect-ratio: 16 / 9; margin-bottom: var(--space-2); object-fit: cover; border-radius: var(--radius-md); background: var(--surface-raised); }
.es-card__k { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; line-height: 18px; color: var(--ink-faint); }
.es-card__g { color: var(--accent); font-weight: 600; }
.es-card__t { font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); text-wrap: pretty; }
.es-card__n { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; line-height: 19px; color: var(--ink-faint); }
.es-filters { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-8); }
.es-filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.es-filters__l { min-width: 56px; font-size: 13px; line-height: 18px; color: var(--ink-faint); }
.es-list { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-10); }
.es-lead { margin: 0 var(--space-4) var(--space-4); }
.es-lead__k { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-faint); }
.es-lead__t { margin: var(--space-1) 0 0; font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.012em; color: var(--ink); }
.es-lead__d { margin: var(--space-2) 0 0; max-width: 36em; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.es-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.es-row:hover { background: var(--surface); }
.es-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.es-row__main { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.es-row__part { font-size: 12.5px; line-height: 18px; font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }
.es-row__t { font-size: 17px; line-height: 24px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); text-wrap: pretty; }
.es-row__sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.es-row__meta { margin-top: var(--space-1); font-size: 13px; line-height: 18px; color: var(--ink-faint); }
.es-row__meta .p-chip { vertical-align: 1px; }
.es-row__img { flex: none; width: 144px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-md); background: var(--surface-raised); }
.es-group { margin: var(--space-3) 0; padding: var(--space-2); border-radius: var(--radius-xl); background: var(--surface); }
.es-group__h { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4) var(--space-2); border-radius: var(--radius-lg); color: inherit; text-decoration: none; }
.es-group__h:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.es-group__k { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-faint); }
.es-group__t { font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.014em; color: var(--ink); transition: color var(--duration-fast) var(--ease-out); }
.es-group__h:hover .es-group__t { color: var(--accent); }
.es-group__d { max-width: 36em; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.es-parts { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.es-group .es-row:hover { background: var(--surface-raised); }
.es-fold { border-radius: var(--radius-lg); background: var(--surface); }
.es-fold__s {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-lg);
  padding: var(--space-2) var(--space-4);
  border-radius: inherit;
  list-style: none;
  cursor: pointer;
}
.es-fold__s::-webkit-details-marker { display: none; }
.es-fold__s::after { content: ""; flex: none; width: 12px; height: 12px; background: var(--chevron) center / 12px no-repeat; transition: rotate var(--duration-fast) var(--ease-out); }
.es-fold[open] > .es-fold__s::after { rotate: 180deg; }
.es-fold__s:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.es-fold__t { flex: none; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.es-fold__sum { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; line-height: 18px; color: var(--ink-faint); }
.es-fold[open] .es-fold__sum { visibility: hidden; }
.es-fold__b { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-2) var(--space-4) var(--space-6); animation: p-rise var(--duration-base) var(--ease-out) both; }
.es-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-3) var(--space-6); }
.es-pair:has(> [hidden]) { grid-template-columns: minmax(0, 1fr); }
.es-pair__s { min-width: 120px; }
.es-pair__s .p-input { width: 120px; }
.es-newseries { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-3); margin-top: calc(var(--space-6) * -0.5); }
.es-coverpick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); border-radius: var(--radius-md); transition: background-color var(--duration-fast) var(--ease-out); }
.es-coverpick.is-drop { background: var(--accent-wash); }
.es-coverpick__img { flex: none; width: 176px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-raised); }
.es-coverpick__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.es-coverpick__acts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.p-hint.is-bad { color: var(--danger); }
.es-chipin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: var(--control-md);
  padding: 5px 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: text;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.es-chipin:hover { border-color: var(--ink-dim); }
.es-chipin:focus-within { border-color: var(--accent); }
.es-chipin__in { flex: 1 1 120px; min-width: 0; height: 28px; padding: 0 6px; border: 0; outline: 0; background: none; color: var(--ink); font: 400 var(--control-md-text) / 20px var(--font-sans); letter-spacing: -0.026em; }
.es-chipin__in::placeholder { color: var(--ink-dim); }
.es-tag { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 2px 0 10px; border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink); font-size: 13px; font-weight: 500; animation: p-rise var(--duration-fast) var(--ease-out) both; }
.es-tag__x { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-faint); font-size: 15px; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.es-tag__x:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.es-tag__x:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.es-suggest { display: flex; flex-wrap: wrap; gap: 4px; }
.es-suggest__i { height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-faint); font: 400 13px / 1 var(--font-sans); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.es-suggest__i::before { content: "+ "; color: var(--accent); }
.es-suggest__i:hover { background: var(--surface-raised); color: var(--ink); }
.es-suggest__i:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.es-picked { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.es-picked:empty { display: none; }
.es-picked__i { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-lg); padding: 4px 4px 4px var(--space-3); border-radius: var(--radius-md); background: var(--surface-raised); animation: p-rise var(--duration-fast) var(--ease-out) both; }
.es-picked__g, .es-hit__g { flex: none; width: 20px; color: var(--accent); font-weight: 600; text-align: center; }
.es-picked__t, .es-hit__t { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.es-picked__n, .es-hit__n { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.es-picked__k, .es-hit__k { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; line-height: 17px; color: var(--ink-faint); }
.es-find { position: relative; }
.es-hits {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 320px;
  padding: var(--space-1);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-lg);
  background: var(--surface-float);
  box-shadow: var(--shadow-overlay);
  animation: p-rise var(--duration-fast) var(--ease-out) both;
}
.es-hit { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.es-hit:hover, .es-hit[aria-selected="true"] { background: var(--surface-raised); }
.es-hits__none { padding: var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-faint); }
.es-seg-f { min-width: 0; margin: 0; padding: 0; border: 0; }
.es-seg-f > legend { margin-bottom: var(--space-2); padding: 0; }
.es-seg { display: inline-flex; flex-wrap: wrap; align-self: flex-start; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--surface-raised); }
.es-seg__o { position: relative; display: block; }
.es-seg__o input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; border-radius: var(--radius-pill); background: none; opacity: 0; cursor: pointer; }
.es-seg__o span { display: block; height: 32px; padding: 0 var(--space-4); border-radius: var(--radius-pill); color: var(--ink-faint); font-size: 13px; line-height: 32px; font-weight: 500; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.es-seg__o:hover span { color: var(--ink); }
.es-seg__o input:checked + span { background: var(--surface-float); color: var(--ink); }
.es-seg__o input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.es-switch { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-md); color: var(--ink-muted); font-size: 14px; line-height: 20px; cursor: pointer; user-select: none; }
.es-switch input[type="checkbox"] {
  width: 30px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--surface-raised) radial-gradient(circle, var(--ink-faint) 0 5px, transparent 5.5px) no-repeat 1px 50% / 14px 14px;
  transition: background-color var(--duration-fast) var(--ease-out), background-position var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.es-switch input[type="checkbox"]:checked {
  border-color: var(--accent-fill);
  background: var(--accent-fill) radial-gradient(circle, var(--on-accent) 0 5px, transparent 5.5px) no-repeat calc(100% - 1px) 50% / 14px 14px;
}
@media (max-width: 639px) {
  .es-series { padding-left: var(--space-3); }
  .es-sub { font-size: 18px; line-height: 27px; }
  .es-by { margin-bottom: var(--space-8); }
  .es-byrow { margin-bottom: var(--space-8); }
  .es-nb { margin: 0 0 0 calc(var(--control-sm-pad) * -0.75); }
  .es-cover { margin: 0 calc(var(--space-5) * -1) var(--space-8); }
  .es-cover img { border-radius: 0; max-height: 300px; }
  .es-pn { grid-template-columns: 1fr; }
  .es-pn__i--next { grid-column: auto; }
  .es-filters__l { width: 100%; }
  .es-row { gap: var(--space-4); padding: var(--space-3); align-items: flex-start; }
  .es-row__img { width: 84px; aspect-ratio: 1; }
  .es-row__t { font-size: 16px; line-height: 22px; }
  .es-row__sub { font-size: 14px; line-height: 20px; }
  .es-lead { margin: 0 var(--space-3) var(--space-3); }
  .es-group { margin: var(--space-2) calc(var(--space-2) * -1); padding: var(--space-1); }
  .es-group__h { padding: var(--space-3) var(--space-3) var(--space-2); }
  .es-pair, .es-newseries { grid-template-columns: 1fr; }
  .es-newseries { margin-top: 0; }
  .es-pair__s .p-input { width: 100%; }
  .es-coverpick__img { width: 100%; }
}
.lb-cont { margin-top: var(--space-10); }
.p-col > .lb-cont:first-child { margin-top: 0; }
.lb-cont__h { margin: 0 0 var(--space-4); font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -0.012em; color: var(--ink); }
.lb-cont__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.lb-cont__i {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.lb-cont__i:hover { background: var(--surface-raised); }
.lb-cont__i:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lb-cont__k { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; line-height: 18px; color: var(--ink-faint); }
.lb-cont__g { color: var(--accent); font-weight: 600; }
.lb-cont__t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 16px; line-height: 23px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); text-wrap: pretty; }
.lb-cont__n { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; line-height: 19px; color: var(--ink-faint); }
.lb-cont__end { display: flex; flex-direction: column; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); }
.lb-cont__p { font-size: 12.5px; line-height: 18px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.lb-filters { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-10); }
.lb-kinds { display: inline-flex; flex-wrap: wrap; align-self: flex-start; gap: 2px; max-width: 100%; padding: 3px; border-radius: var(--radius-pill); background: var(--surface); }
.lb-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--control-sm);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  color: var(--ink-faint);
  font-size: 13.5px;
  line-height: 1;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.lb-kind:hover { color: var(--ink); }
.lb-kind:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.lb-kind.is-on { background: var(--surface-raised); color: var(--ink); }
.lb-kind__n { color: var(--ink-dim); font-weight: 400; font-variant-numeric: tabular-nums; }
.lb-kind.is-on .lb-kind__n { color: var(--ink-faint); }
.lb-more[open] { flex-basis: 100%; }
.lb-more[open] > .lb-more__s { display: none; }
.lb-more__s { list-style: none; cursor: pointer; }
.lb-more__s::-webkit-details-marker { display: none; }
.lb-more__b { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-left: 64px; animation: p-rise var(--duration-fast) var(--ease-out) both; }
.lb-list { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-8); }
.lb-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.lb-row:hover { background: var(--surface); }
.es-group .lb-row:hover { background: var(--surface-raised); }
.lb-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.lb-row__g { flex: none; width: 20px; color: var(--accent); font-size: 15px; line-height: 24px; font-weight: 600; text-align: center; }
.lb-row__main { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.lb-row__t { font-size: 17px; line-height: 24px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); text-wrap: pretty; }
.lb-row__meta { font-size: 13px; line-height: 19px; color: var(--ink-faint); }
.lb-row__meta .p-chip { vertical-align: 1px; }
.lb-row__part { color: var(--accent); font-weight: 500; font-variant-numeric: tabular-nums; }
.lb-row__done { color: var(--accent); white-space: nowrap; }
.lb-row__img { flex: none; width: 120px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-md); background: var(--surface-raised); }
.lb-row__x { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: var(--space-1); font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.lb-row__x mark { padding: 0 2px; border-radius: var(--radius-sm); background: var(--accent-wash); color: var(--ink); }
.lb-parts { gap: var(--space-1); }
.lb-group__more { display: inline-flex; align-items: center; min-height: var(--control-sm); margin: 0 0 var(--space-1) calc(var(--space-8) + 20px); color: var(--accent); font-size: 13px; font-weight: 500; text-decoration: none; }
.lb-group__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.lb-more-list { display: flex; justify-content: center; margin-top: var(--space-8); }
.lb-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-8); }
.lb-found { margin-top: var(--space-10); scroll-margin-top: calc(56px + var(--space-6)); }
.lb-found__h { margin: 0 0 var(--space-2) var(--space-4); font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -0.012em; color: var(--ink); }
.lb-tail { margin-top: var(--space-16); }
.lb-after-bar { margin-top: var(--space-6); }
.lb-anchor { scroll-margin-top: calc(56px + var(--space-6)); }
.lb-chlib { margin: 0 0 var(--space-3); }
.lb-solo { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--measure-prose); margin-top: var(--space-8); }
@media (max-width: 639px) {
  .lb-cont__grid { grid-template-columns: 1fr; gap: var(--space-2); }
  .lb-cont__i { padding: var(--space-3) var(--space-4) var(--space-4); }
  .lb-cont__n { display: none; }
  .lb-cont__end { flex-direction: row-reverse; align-items: center; gap: var(--space-3); padding-top: var(--space-2); }
  .lb-cont__bar { flex: 1 1 auto; }
  .lb-cont__p { flex: none; }
  .lb-kinds { flex-wrap: nowrap; align-self: stretch; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .lb-kinds::-webkit-scrollbar { display: none; }
  .lb-kind { flex: none; padding: 0 var(--space-3); }
  .lb-more__b { padding-left: 0; }
  .lb-row { gap: var(--space-3); padding: var(--space-3); }
  .lb-row__t { font-size: 16px; line-height: 22px; }
  .lb-row__img { width: 72px; aspect-ratio: 1; }
  .lb-group__more { margin-left: calc(var(--space-6) + 20px); }
  .lb-found__h { margin-left: var(--space-3); }
}
.pz { max-width: var(--measure-wide); margin-top: var(--space-10); padding: var(--space-5) var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--surface); scroll-margin-top: var(--space-16); }
.pz__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-6); }
.pz__lead { flex: 1 1 280px; min-width: 0; }
.pz__t { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -0.016em; color: var(--ink); }
.pz__style { margin: var(--space-1) 0 0; font-size: 14px; line-height: 20px; color: var(--ink-faint); }
.pz__note { margin: var(--space-3) 0 0; font-size: 14px; line-height: 20px; color: var(--accent); animation: p-rise var(--duration-base) var(--ease-out) both; }
.pz__note:empty { display: none; }
.pz__note.is-bad { color: var(--caution); }
.pz-empty { margin-top: var(--space-5); }
.pz-empty__t { margin: 0; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink); }
.pz-empty__d { margin: var(--space-1) 0 0; max-width: var(--measure-prose); font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.pz-busy { margin-top: var(--space-5); }
.pz-steps { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pz-step { display: inline-flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-3) 0 6px; border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink-faint); font-size: 13px; font-weight: 500; white-space: nowrap; transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); }
.pz-step__g { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; }
.pz-step--done { color: var(--ink-muted); }
.pz-step--done .pz-step__g { background: var(--accent-wash); color: var(--accent); }
.pz-step--now { background: var(--caution-wash); color: var(--caution); }
.pz-step--now .pz-step__g { background: color-mix(in srgb, var(--caution) 18%, transparent); animation: pz-breathe 1.8s var(--ease-out) infinite; }
@keyframes pz-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.pz-busy__d { margin: var(--space-3) 0 0; font-size: 14px; line-height: 20px; color: var(--ink-faint); }
.pz-fail { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-5); padding: var(--space-4); border-radius: var(--radius-md); background: var(--danger-wash); }
.pz-fail__g { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); font-size: 12px; font-weight: 700; }
.pz-fail__t { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--danger); }
.pz-fail__d { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.pz-sum { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-5); }
.pz-sum__t { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.pz-sum__w { font-size: 13px; line-height: 18px; color: var(--ink-dim); }
.pz-sum__all { margin-left: auto; }
.pz-changed { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--caution-wash); color: var(--caution); font-size: 13px; line-height: 18px; }
.pz-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.pz-item { padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-raised); }
.pz-item.htmx-added { animation: p-rise var(--duration-base) var(--ease-out) both; }
.pz-item__h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pz-kind { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--space-2) 0 3px; border-radius: var(--radius-pill); background: var(--surface-float); color: var(--ink); font-size: 12.5px; font-weight: 600; }
.pz-kind__g { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 3px; border-radius: var(--radius-pill); background: var(--accent-wash); color: var(--accent); font-size: 10.5px; font-weight: 700; letter-spacing: -0.02em; }
.pz-item__w { font-size: 12.5px; line-height: 18px; color: var(--ink-dim); }
.pz-item__h .p-chip { margin-left: auto; }
.pz-item__why { margin: var(--space-2) 0 0; max-width: var(--measure-prose); font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.pz-diff { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--ground); }
.pz-diff__k { display: block; margin-bottom: var(--space-1); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-dim); }
.pz-diff .fx-words { max-height: 360px; overflow: auto; font-size: 14.5px; line-height: 24px; }
.pz-diff--code .fx-words { font-family: var(--font-mono); font-size: 13px; line-height: 21px; }
.pz-ba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-3); }
.pz-ba__c { min-width: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--ground); }
.pz-ba__t { max-height: 320px; overflow: auto; font-size: 14px; line-height: 22px; color: var(--ink-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.pz-out { margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); max-height: 240px; overflow: auto; border-radius: var(--radius-md); background: var(--code-bg); color: var(--code-ink); font: 400 12.5px / 20px var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.pz-out:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pz-item__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.pz-item__acts form { display: inline; }
.pz-item__n { margin-right: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-faint); }
.pz-item.is-stale .pz-diff, .pz-item.is-stale .pz-ba { opacity: 0.55; }
.pz-item--accepted, .pz-item--rejected { padding: var(--space-3) var(--space-4); background: transparent; }
.pz-item--accepted .pz-item__why, .pz-item--rejected .pz-item__why { font-size: 14px; line-height: 21px; color: var(--ink-faint); }
.pz-item--accepted .pz-diff { padding: 0; background: transparent; }
.pz-item--accepted .pz-diff__k { display: none; }
.pz-item--rejected .pz-diff, .pz-item--rejected .pz-ba, .pz-item--rejected .pz-out { display: none; }
.pz-done { margin-top: var(--space-5); }
.pz-done > .pz-list { margin-top: var(--space-2); gap: 2px; }
.pz-done__s { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-sm); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-faint); cursor: pointer; list-style: none; border-radius: var(--radius-sm); transition: color var(--duration-fast) var(--ease-out); }
.pz-done__s::-webkit-details-marker { display: none; }
.pz-done__s::before { content: "▸"; color: var(--ink-dim); transition: rotate var(--duration-fast) var(--ease-out); }
.pz-done[open] > .pz-done__s::before { rotate: 90deg; }
.pz-done__s:hover { color: var(--ink); }
.pz-done__s:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pz-runs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: var(--space-6); }
.pz-runs__l { margin-right: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-dim); }
.pz-run { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--radius-pill); color: var(--ink-faint); font-size: 13px; text-decoration: none; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.pz-run:hover, .pz-run.is-on { background: var(--surface-raised); color: var(--ink); }
.pz-run:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.pz-run__n { color: var(--ink-dim); }
.pz-run__n::before { content: "· "; }
@media (max-width: 639px) {
  .pz { padding: var(--space-4) var(--space-4) var(--space-5); }
  .pz-ba { grid-template-columns: 1fr; }
  .pz-sum__all { flex: 1 1 100%; margin-left: 0; }
  .pz-item { padding: var(--space-3); }
  .pz-item__why { font-size: 14.5px; line-height: 22px; }
}
@media (max-width: 639px) {
  .p-callout { padding: var(--space-4); }
  .p-viewer__c { left: var(--space-3); right: var(--space-3); max-width: none; bottom: calc(var(--control-sm) + var(--space-6)); }
  .ed-menu { width: calc(100vw - 2 * var(--space-2)); }
}
.p-code .o { color: var(--code-ink); }
.p-block--soon {
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  max-width: var(--measure-prose);
}
.p-editor { display: flex; flex: 1 1 auto; min-height: 0; }
.p-editor__list { width: 320px; }
.p-editor__panel { padding: var(--space-8); max-width: 820px; }
a.p-bl { text-decoration: none; }
.p-bl__k--on { color: var(--accent); }
.p-textarea {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 20px;
  min-height: 240px;
  resize: vertical;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}
.p-textarea--prose { font-family: var(--font-sans); font-size: 14px; white-space: pre-wrap; }
select.p-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 12px;
  cursor: pointer;
}
select.p-input option { background: var(--surface-float); color: var(--ink); }
input[type="checkbox"], input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
  display: inline-block;
  vertical-align: -3px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
input[type="radio"] { border-radius: var(--radius-pill); }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--ink-dim); }
input[type="checkbox"]:checked { background: var(--accent-fill) var(--tick) center / 10px no-repeat; border-color: var(--accent-fill); }
input[type="radio"]:checked { background: var(--surface); border: 5px solid var(--accent-fill); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.p-table { background: var(--surface); border-radius: var(--radius-md); overflow: hidden; }
.p-table__h {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-dim);
}
.p-table__r { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-4); }
.p-table__r .p-input { min-width: 0; }
details.p-menu-wrap > summary { list-style: none; cursor: pointer; }
details.p-menu-wrap > summary::-webkit-details-marker { display: none; }
.p-chip--draft { color: var(--caution); background: var(--caution-wash); }
.p-row-actions { display: flex; gap: var(--space-2); align-items: center; }
.p-row-actions form { display: inline; }
.p-file { font-size: 13px; color: var(--ink-muted); }
.p-opt--pick input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  border: 0;
}
.p-opt--pick { position: relative; }
.p-opt--pick:has(input:checked) { background: var(--surface-raised); color: var(--ink); }
.p-opt--pick:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.p-deck { min-height: 100vh; background: var(--ground); }
.p-deck__slide { min-height: 100vh; }
.p-deck__slide[hidden] { display: none; }
.p-slide--top { justify-content: flex-start; padding-top: var(--space-16); }
.p-slide__split { display: flex; gap: var(--space-16); align-items: flex-start; }
.p-slide__split > :first-child { flex: 1 1 45%; max-width: var(--measure-prose); }
.p-slide__split > :last-child { flex: 1 1 55%; min-width: 0; }
.p-slide__prose .p-prose p, .p-slide__prose .p-prose li { font-size: 20px; line-height: 34px; letter-spacing: -0.018em; }
.p-slide__prose .p-prose ul, .p-slide__prose .p-prose ol { font-size: 20px; line-height: 34px; }
.p-slide__prose .p-prose code { font-size: 17px; }
.p-code--lg .p-code__g { font-size: 14px; line-height: 28px; }
.p-code--lg .p-code__l { font-size: 16px; line-height: 28px; }
.p-kbd--dim { opacity: .4; }
.p-deck__small { display: none; }
@media (max-width: 639px) {
  .p-deck__small { display: block; }
  .p-deck__slide { display: none !important; }
}
.p-pg__editor { background: var(--code-bg); }
.p-pg__monaco { width: 100%; min-height: 120px; }
.p-pg__mobile { display: none; padding: var(--space-4); }
.p-pg__out .p-out { white-space: pre-wrap; word-break: break-word; }
.p-pg .p-btn[disabled] { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink-dim); border-color: transparent; box-shadow: none; }
.monaco-editor .margin, .monaco-editor .monaco-editor-background { background: var(--code-bg) !important; }
.p-focus { display: flex; flex-direction: column; min-height: 100vh; }
.p-focus__body { flex: 1 1 auto; display: flex; min-height: 0; }
.p-focus__editor {
  flex: 1 1 60%;
  min-width: var(--editor-min);
  display: flex;
  flex-direction: column;
  background: var(--code-bg);
}
.p-focus > .p-top, .p-exam > .p-top { gap: var(--space-4); }
.p-top__back { flex: none; margin-left: calc(var(--control-md-pad) * -0.75); }
.p-focus__head { flex: 1 1 auto; display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.p-focus__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); }
.p-focus__status { flex: none; }
.p-focus__acts { flex: none; display: flex; align-items: center; gap: var(--space-2); }
.p-focus__acts > form { display: contents; }
.p-focus__keys { font-weight: 400; opacity: 0.65; }
.p-exam__timer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-md);
  padding: 0 var(--control-md-pad);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--control-md-text);
  transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.p-focus__tabs {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-faint);
}
.p-focus__tab--on { color: var(--ink); font-weight: 500; }
.p-focus__monaco { flex: 1 1 auto; min-height: 320px; }
.p-focus__out {
  flex: 1 1 40%;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  min-width: 0;
}
.p-focus__panel { flex: 1 1 auto; overflow: auto; }
.p-focus__panel .p-out { white-space: pre-wrap; word-break: break-word; }
.p-focus__foot { padding: var(--space-3) var(--space-4); gap: var(--space-3); font-size: 13px; color: var(--ink-faint); }
@media (max-width: 1099px) {
  .p-focus__body { flex-direction: column; }
  .p-focus__editor { min-width: 0; }
}
.p-pg__bar { flex-wrap: wrap; row-gap: var(--space-2); }
.p-pg__bar > .p-row:first-child { min-width: 0; flex: 1 1 160px; }
.p-pg__bar > .p-row:first-child > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-pg__bar > .p-row:last-child { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.p-exam { display: flex; flex-direction: column; min-height: 100vh; }
.p-exam .p-body { flex: 1 1 auto; }
@media (max-width: 479px) {
  .p-exam .p-wm__t { display: none; }
  .p-exam .p-top__mark { min-width: var(--control-md); justify-content: center; }
}
.p-navgrid a.p-nc { text-decoration: none; }
.p-nc--key {
  width: 12px;
  height: 12px;
  aspect-ratio: auto;
  flex: none;
  font-size: 0;
}
.p-li .p-nc--key { font-size: 12.5px; }
[hidden] { display: none !important; }
.p-mobilehead { display: none; }
input[type="checkbox"].p-mobilehead__toggle { display: none; }
.p-mobilehead__toggle:focus-visible ~ .p-mobilehead .p-mobilehead__menu { outline: 2px solid var(--focus); outline-offset: 2px; }
.p-mobilehead__toggle:checked ~ .p-mobilehead .p-mobilehead__menu { color: var(--ink); background: var(--surface-raised); }
.p-code__swipe { display: none; }
.p-editor__small { display: none; }
@media (max-width: 639px) {
  .p-between { flex-wrap: wrap; gap: var(--space-4); }
  .p-banner { flex-wrap: wrap; padding: var(--space-3) var(--space-4); }
  .p-banner > .p-row { flex-wrap: wrap; min-width: 0; }
  .p-between > .p-chname { flex: 1 1 100%; }
  .p-chname .p-input { flex: 1 1 auto; min-width: 0; }
  .p-prog__t { flex: 1 1 calc(100% - 42px); min-width: 0; }
  .p-addl { flex-wrap: wrap; }
  .p-addl > .p-input[name="title"] { flex: 1 1 100%; max-width: none !important; }
  .p-side { display: none; }
  input[type="checkbox"].p-mobilehead__toggle { display: block; position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
  .p-mobilehead { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2); }
  .p-mobilehead__t {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .p-mobilehead__toggle:checked ~ .p-body > .p-side[data-side="contents"] { display: block; position: static; max-height: none; }
  .p-mobilehead__toggle:checked ~ .p-body > .p-side[data-side="contents"] .p-side__body { display: block; width: auto; }
  .p-mobilehead__toggle:checked ~ .p-body > .p-side[data-side="contents"] .p-side__toggle { display: none; }
  .p-body { flex-direction: column; }
  .p-lesson { padding: var(--space-6) var(--space-5) var(--space-10); }
  .p-prose p, .p-prose li { line-height: 27px; }
  .p-prose blockquote { padding: var(--space-4) var(--space-5); }
  .p-main h1.display-2 { font-size: 30px; line-height: 36px; letter-spacing: -0.012em; }
  .p-col { padding: var(--space-8) var(--space-4); }
  .display-2 { font-size: 30px; line-height: 36px; }
  .p-block .p-code {
    margin-left: calc(var(--space-5) * -1);
    margin-right: calc(var(--space-5) * -1);
    border-radius: 0;
  }
  .p-code__swipe { display: inline; }
  .p-pg__editor, .p-pg__out, .p-pg__open, .p-pg [data-pg-reset], .p-pg [data-pg-run] { display: none; }
  .p-top__back-t, .p-focus__status, .p-focus [data-pg-reset], .p-focus__keys, .p-exam__try { display: none; }
  .p-top__back { min-width: var(--h); }
  .p-block .p-pg__mobile { display: block; }
  .p-pg .p-pg__mobile { display: block; }
  #lesson-footer {
    position: sticky;
    bottom: 0;
    background: var(--surface-float);
    box-shadow: var(--shadow-overlay);
    margin: var(--space-6) calc(var(--space-5) * -1) 0;
    padding: var(--space-3) var(--space-4);
  }
  .p-li { flex-wrap: wrap; }
  .p-li > div[style*="width:220px"] { width: 100% !important; order: 10; }
  .p-focus__editor { min-width: 0; }
  .p-focus__monaco { min-height: 260px; }
  .p-focus .p-chain { display: none; }
  .p-editor { display: none; }
  .p-editor__small { display: block; }
}
@media (max-width: 639px) {
  body { overflow-x: hidden; }
  .p-block, .p-card { max-width: 100%; min-width: 0; }
  .p-chip { white-space: nowrap; }
  #lesson-footer { flex-wrap: nowrap; gap: var(--space-2); }
  #lesson-footer > a.p-btn--quiet {
    max-width: 38%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
  #lesson-footer .p-row { gap: var(--space-2); }
}
.p-search__snippet {
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-faint);
  margin-top: var(--space-2);
  max-width: var(--measure-prose);
}
.p-search__snippet mark { background: var(--accent-wash); color: var(--ink); padding: 0 2px; border-radius: var(--radius-sm); }
.p-code__out { ; }
.p-code__out .p-out { white-space: pre-wrap; word-break: break-word; }
.p-monaco {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--code-bg);
  border: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.p-monaco:focus-within { border-color: var(--accent); }
.p-monaco--prose { background: var(--surface); border-color: var(--border-strong); }
.p-monaco--prose:hover { border-color: var(--ink-dim); }
.p-monaco--prose:focus-within { border-color: var(--accent); }
.p-monaco--error, .p-monaco--error:focus-within { border-color: var(--danger); }
.p-monaco--prose .monaco-editor { --vscode-editor-background: var(--surface); --vscode-editorGutter-background: var(--surface); }
.p-monaco--prose .monaco-editor .margin, .p-monaco--prose .monaco-editor .monaco-editor-background { background: var(--surface) !important; }
.p-monaco--prose .monaco-editor .mtk1 { color: var(--ink); }
.p-monaco--prose .monaco-editor .placeholder, .p-monaco--prose .monaco-editor .editor-placeholder { color: var(--ink-dim); font-style: normal; }
.p-dd { position: relative; display: inline-flex; min-width: 0; }
.p-dd--field { display: flex; width: 100%; }
.p-dd__native { display: none !important; }
.p-dd__btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  height: var(--control-md);
  padding: 0 calc(var(--control-md-pad) - 4px) 0 var(--control-md-pad);
  font-family: var(--font-sans);
  font-size: var(--control-md-text);
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.026em;
  color: var(--ink-muted);
  background: var(--surface-raised);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.p-dd__btn::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: var(--chevron) center / 12px no-repeat;
  transition: rotate var(--duration-fast) var(--ease-out);
}
.p-dd__btn:hover, .p-dd__btn[aria-expanded="true"] { color: var(--ink); }
.p-dd__btn[aria-expanded="true"]::after { rotate: 180deg; }
.p-dd__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.p-dd__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-dd--field .p-dd__btn {
  width: 100%;
  justify-content: space-between;
  font-weight: 400;
  color: var(--ink);
  background: var(--surface);
  border-color: var(--border-strong);
  border-radius: var(--radius-md);
  padding: 0 var(--control-md-pad);
}
.p-pg__bar .p-dd__btn {
  height: var(--control-sm);
  padding: 0 calc(var(--control-sm-pad) - 4px) 0 var(--control-sm-pad);
  font-size: var(--control-sm-text);
  line-height: 18px;
}
.p-dd--field .p-dd__btn:hover { border-color: var(--ink-dim); }
.p-dd--field .p-dd__btn[aria-expanded="true"], .p-dd--field .p-dd__btn:focus-visible { border-color: var(--accent); outline: none; }
.p-dd__list {
  position: fixed;
  inset: auto;
  margin: 0;
  border: 0;
  padding: var(--space-2);
  max-height: 50vh;
  overflow-y: auto;
  border-radius: var(--radius-xl);
  background: var(--surface-float);
  color: var(--ink);
  box-shadow: var(--shadow-overlay);
  outline: none;
}
.p-dd__list:popover-open { display: flex; flex-direction: column; gap: 2px; animation: p-rise var(--duration-fast) var(--ease-out) both; }
.p-dd__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.p-dd__opt.is-active { background: var(--surface-raised); color: var(--ink); }
.p-dd__opt[aria-selected="true"] { color: var(--accent); }
.p-dd__opt[aria-selected="true"]::after { content: "✓"; font-size: 12px; }
select.p-dd-src {
  height: var(--control-md);
  padding: 0 var(--control-md-pad);
  font-family: var(--font-sans);
  font-size: var(--control-md-text);
  font-weight: 500;
  color: var(--ink-muted);
  background: var(--surface-raised);
  border: 0;
  border-radius: var(--radius-pill);
}
.p-pg__bar select.p-dd-src { height: var(--control-sm); padding: 0 var(--control-sm-pad); font-size: var(--control-sm-text); }
.p-lint {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-dim);
  white-space: nowrap;
}
.p-lint--warn { color: var(--code-number); }
.p-lint--bad { color: var(--danger); }
.p-alt { padding: var(--space-4) var(--space-5); }
.p-alt .p-consent { margin: 0; }
.p-file::file-selector-button {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface-raised);
  border: 0;
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
  margin-right: var(--space-3);
  cursor: pointer;
}
.p-file::file-selector-button:hover { background: var(--surface-float); }
.p-diagram { position: relative; margin: var(--space-6) 0; background: var(--surface); border-radius: var(--radius-md); }
.p-diagram__view { position: relative; overflow: hidden; outline: none; }
.p-diagram.is-live .p-diagram__view { height: 420px; touch-action: pan-y; }
.p-diagram.is-live.is-movable .p-diagram__view { cursor: grab; touch-action: none; }
.p-diagram.is-dragging .p-diagram__view { cursor: grabbing; }
.p-diagram.is-live .p-diagram__canvas {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.p-diagram:not(.is-live) .p-diagram__view { padding: var(--space-5); overflow-x: auto; }
.p-diagram:not(.is-live) svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.p-diagram__view:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); border-radius: var(--radius-md); }
.p-prose .p-diagram svg p {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: normal;
  color: inherit;
  margin: 0;
}
.p-diagram foreignObject { overflow: visible; }
.p-diagram__tools {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--surface-float);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ground) 60%, transparent);
  opacity: .72;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.p-diagram:hover .p-diagram__tools, .p-diagram:focus-within .p-diagram__tools, .p-diagram.is-fullscreen .p-diagram__tools, .p-diagram.is-full .p-diagram__tools {
  opacity: 1;
}
.p-diagram:not(.is-live) .p-diagram__tools { display: none; }
.p-diagram__tool {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  min-width: var(--control-sm);
  height: var(--control-sm);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.p-diagram__tool:hover { background: var(--surface-raised); color: var(--ink); }
.p-diagram__tool:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.p-diagram__tool--pct { min-width: 52px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.p-diagram:fullscreen, .p-diagram.is-full { margin: 0; border-radius: 0; background: var(--ground); }
.p-diagram:fullscreen::backdrop { background: var(--ground); }
.p-diagram:fullscreen .p-diagram__view, .p-diagram.is-full .p-diagram__view { height: 100vh; height: 100dvh; }
.p-diagram.is-full { position: fixed; inset: 0; z-index: 1000; }
.p-noscroll, .p-noscroll body { overflow: hidden; }
.p-diagram--pending { min-height: 420px; display: flex; align-items: center; justify-content: center; }
.p-diagram--failed { padding: var(--space-5); }
.p-diagram--failed .p-out { margin-top: var(--space-3); white-space: pre-wrap; }
.p-slide .p-diagram { background: transparent; }
.p-slide .p-diagram.is-live .p-diagram__view { height: 52vh; }
@media (max-width: 720px) {
  .p-diagram.is-live .p-diagram__view, .p-diagram--pending { height: 280px; min-height: 280px; }
}
.p-chip { white-space: nowrap; flex: none; }
.p-lstate {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  min-width: 0;
  max-width: 46%;
}
.p-toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: max-content;
  max-width: min(520px, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-float);
  color: var(--ink);
  font-size: 14px;
  line-height: 20px;
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
}
.p-toast[hidden] { display: none; }
.p-toast__t { flex: 1 1 auto; min-width: 0; padding-top: 2px; overflow-wrap: anywhere; }
.p-toast__x { flex: none; margin: -2px 0; }
.p-toast::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--danger);
  opacity: 0.55;
  transform-origin: left;
}
.p-toast.is-in { animation: p-toast-in var(--duration-base) var(--ease-settle) both; }
.p-toast.is-in::after { animation: p-toast-time var(--toast-ms, 6000ms) linear forwards; }
.p-toast.is-paused::after { animation-play-state: paused; }
.p-toast.is-out { animation: p-toast-out var(--duration-fast) var(--ease-out) both; }
@keyframes p-toast-in { from { opacity: 0; transform: translate(-50%, 12px) scale(0.98); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes p-toast-out { to { opacity: 0; transform: translate(-50%, 6px); } }
@keyframes p-toast-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.p-mark-err, .p-err > span:first-child, .p-toast__g, .p-notice--danger .p-notice__g {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: var(--radius-pill);
  background: var(--danger-wash);
  color: var(--danger);
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
}
.p-notice--danger .p-notice__g { background: var(--surface-float); }
.p-err { color: var(--ink-muted); align-items: flex-start; animation: p-err-in var(--duration-base) var(--ease-settle) both; }
.p-err > span:last-child { padding-top: 1px; }
@keyframes p-err-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.p-input--error, .p-input[aria-invalid="true"] { border-color: var(--danger); animation: p-nudge 360ms var(--ease-out) 1; }
@keyframes p-nudge { 0%, 100% { transform: none; } 20% { transform: translateX(-3px); } 45% { transform: translateX(3px); } 70% { transform: translateX(-1.5px); } }
.p-notice, .p-banner--flash { animation: p-rise var(--duration-base) var(--ease-settle) both; }
@media (max-width: 720px) {
  .p-lstate { max-width: 60%; }
}
a.p-skill { color: inherit; }
.p-skill { align-items: flex-start; }
.p-skill-src {
  margin-top: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 13.5px;
  line-height: 21px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.p-skill-file { margin-top: var(--space-4); }
.p-skill-file > summary { cursor: pointer; color: var(--accent); font-size: 13px; }
details.p-fold > summary { list-style: none; cursor: pointer; }
details.p-fold > summary::-webkit-details-marker { display: none; }
details.p-fold > summary:hover .p-fold__hint { color: var(--ink); }
details.p-fold[open] .p-fold__hint { visibility: hidden; }
.p-li__k { flex: none; width: 64px; text-align: right; }
.p-chname { flex: 1; min-width: 0; }
.p-prog { flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-5); }
.p-prog__t { min-width: 220px; color: var(--ink); }
.p-chname__t { max-width: 420px; padding: 0 var(--control-sm-pad); font-family: var(--font-display); font-size: 20px; letter-spacing: -0.01em; }
.p-li > .p-grow { min-width: 0; }
.p-li > .p-lstate { flex: none; }
.p-skill-body { min-height: 360px; }
.p-lesson .p-prose, .p-lesson .p-quiz, .p-lesson .p-block--soon { max-width: none; }
.p-room { margin-top: var(--space-8); }
.p-room [hidden] { display: none; }
.p-room__captions { display: flex; flex-direction: column; gap: var(--space-3); max-height: 40vh; overflow-y: auto; margin-top: var(--space-4); }
.p-room__captions--all { max-height: none; overflow: visible; }
.p-room__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.p-room__line > b { font-weight: 600; color: var(--ink); }
.p-room__line > span:last-child { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.p-flow {
  --flow-size: clamp(16px, 1rem + 0.25vw, 18px);
  --flow-lh: 1.75;
  --flow-measure: 30em;
  --flow-gutter: 60px;
  --flow-indent: calc(var(--flow-gutter) + var(--space-4));
  position: relative;
  margin-top: var(--space-2);
  font-size: var(--flow-size);
}
[data-theme="mint"] .p-flow { --flow-lh: 1.7; }
.p-flow__find { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0 0 calc(var(--flow-lh) * 1em) var(--flow-indent); user-select: none; -webkit-user-select: none; }
.p-flow__find > .p-sfield { flex: 0 1 300px; }
.p-flow__count { min-width: 0; font-variant-numeric: tabular-nums; }
.p-flow__p { display: grid; grid-template-columns: var(--flow-gutter) minmax(0, 1fr); column-gap: var(--space-4); align-items: baseline; }
.p-flow__p + .p-flow__p { margin-top: calc(var(--flow-lh) * 1em); }
.p-flow__who { grid-column: 2; margin-bottom: var(--space-1); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-faint); user-select: none; -webkit-user-select: none; }
.p-flow__at {
  grid-column: 1;
  justify-self: end;
  position: relative;
  margin: 0 calc(var(--space-2) * -1) 0 0;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  font: inherit;
  font-size: 13px;
  line-height: 24px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
button.p-flow__at { cursor: pointer; }
button.p-flow__at:hover { color: var(--ink); background: var(--surface); }
.p-flow__p.is-now > .p-flow__at { color: var(--accent); }
.p-flow__t { grid-column: 2; margin: 0; max-width: var(--flow-measure); line-height: var(--flow-lh); letter-spacing: -0.011em; color: var(--ink-muted); overflow-wrap: anywhere; }
.p-flow__s {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.p-flow__s.is-said { color: var(--ink); }
.p-flow:not(.is-sweep) .p-flow__s.is-now { background: var(--accent-mark); color: var(--ink); }
.p-flow.is-sweep .p-flow__s { transition: none; }
::highlight(peano-said) { background-color: var(--accent-mark); color: var(--ink); }
.p-flow.is-seek .p-flow__s { cursor: pointer; }
::highlight(peano-word) { text-decoration: underline 1.5px var(--ink-dim); text-underline-offset: 0.3em; }
@media (hover: hover) {
  .p-flow.is-seek:not(.is-hl) .p-flow__s:hover { text-decoration: underline 1.5px var(--ink-dim); text-underline-offset: 0.3em; }
}
.p-flow__hit { margin: 0 -2px; padding: 0 2px; border-radius: var(--radius-sm); background: none; color: inherit; box-shadow: inset 0 0 0 1px var(--border-strong); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.p-flow__hit.is-on { box-shadow: inset 0 0 0 2px var(--accent); }
.p-flow__now {
  position: sticky;
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-width: var(--flow-measure);
  height: 0;
  margin-left: var(--flow-indent);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 150ms var(--ease-out), translate 150ms var(--ease-out), display 150ms allow-discrete;
}
.p-flow__now:not([hidden]) { transition-duration: 200ms; }
.p-flow__now[hidden] { opacity: 0; translate: 0 4px; }
@starting-style {
  .p-flow__now:not([hidden]) { opacity: 0; translate: 0 8px; }
}
.p-flow__back { pointer-events: auto; translate: 0 -100%; border-color: var(--border); background: var(--surface-float); color: var(--ink); box-shadow: var(--shadow-overlay); }
.p-flow__back:hover { border-color: var(--border-strong); background: var(--surface-raised); }
.p-flow__arrow { display: inline-block; transition: rotate var(--duration-base) var(--ease-out); }
.p-flow__back.is-up .p-flow__arrow { rotate: 180deg; }
.p-flow--log { --flow-size: 15px; --flow-gutter: 52px; max-height: 40vh; overflow-y: auto; margin-top: var(--space-4); }
@media (min-width: 1024px) {
  .p-flow:not(.p-flow--log) { --flow-indent: 0px; }
  .p-flow:not(.p-flow--log) .p-flow__p { margin-left: calc((var(--flow-gutter) + var(--space-4)) * -1); }
  .p-pl.is-stuck::before { content: ""; position: absolute; top: calc(var(--space-3) * -1); right: 100%; bottom: 0; z-index: -1; width: 84px; background: var(--ground); }
}
@media (pointer: coarse) {
  button.p-flow__at::after { content: ""; position: absolute; top: calc(50% - 22px); right: -6px; bottom: calc(50% - 22px); left: -6px; }
}
@media (max-width: 639px) {
  .p-lesson:has(> [data-player]) { padding-left: var(--space-4); padding-right: var(--space-4); }
  .p-lesson:has(> [data-player]) > .p-pl { margin-left: calc(var(--space-4) * -1); margin-right: calc(var(--space-4) * -1); padding-left: var(--space-4); padding-right: var(--space-4); }
  .p-flow__hint { order: 1; flex-basis: 100%; }
  .p-flow { --flow-indent: 0px; }
  .p-flow__find > .p-sfield { flex-basis: 100%; }
  .p-flow__p { display: block; line-height: var(--flow-lh); }
  .p-flow__at { float: left; margin: var(--space-1) 0 0 calc(var(--space-2) * -1); font-size: 12px; line-height: calc(var(--flow-lh) * var(--flow-size) - var(--space-1) * 2); }
  .p-flow__at::before { content: ""; font-size: var(--flow-size); }
}

.p-tx { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-10); }
.p-tx > .p-capfix__entry { justify-content: flex-start; }
@media (min-width: 640px) {
  .p-tx { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0; }
  .p-tx > .p-fold { grid-area: 1 / 1 / 2 / 3; min-width: 0; }
  .p-tx > .p-capfix__entry { grid-area: 1 / 2; position: relative; z-index: 1; justify-content: flex-end; }
  .p-tx:has(> .p-capfix__entry) .p-fold__s { width: fit-content; align-items: center; min-height: var(--control-sm); }
  .p-tx:has(> .p-capfix__entry) .p-fold__s > .p-sec__l { display: none; }
}

.p-line {
  --line-lh: 1.45;
  --line-pad: 0.2em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-3);
  min-width: 0;
}
.p-line[hidden] { display: none; }
.p-line__who {
  flex: none;
  display: grid;
  overflow-y: clip;
  width: var(--who-w, auto);
  max-width: 100%;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-faint);
  user-select: none;
  -webkit-user-select: none;
}
.p-line.is-anon .p-line__who { display: none; }
.p-line__view { flex: 1 1 0; display: grid; min-width: 0; min-height: calc(var(--line-lh) * 1em); overflow-y: clip; }
.p-line__row, .p-line__tag {
  grid-area: 1 / 1;
  min-width: 0;
  white-space: nowrap;
  overflow: clip;
  text-overflow: ellipsis;
  transition: transform 250ms var(--ease-out), opacity 250ms var(--ease-out);
}
.p-line__row {
  position: relative;
  isolation: isolate;
  margin: 0 calc(var(--line-pad) * -1);
  padding: 0 var(--line-pad);
  line-height: var(--line-lh);
}
.p-line .is-below { opacity: 0; transform: translateY(100%); }
.p-line .is-gone { opacity: 0; transform: translateY(-100%); transition-duration: 190ms; pointer-events: none; }
.p-line__mark {
  position: absolute;
  top: 0.12em;
  bottom: 0.12em;
  z-index: -1;
  border-radius: 0.3em;
  background: var(--accent-mark);
  clip-path: inset(0 var(--cut, 100%) 0 0 round 0.3em);
  transition: clip-path var(--duration-fast) var(--ease-out);
}
.p-line__w { color: var(--ink-muted); transition: color var(--duration-fast) var(--ease-out); }
.p-line__w.is-said { color: var(--ink); }
.p-line.is-quiet .p-line__w { color: var(--ink-faint); }
.p-line.is-seek .p-line__w { cursor: pointer; }
@media (hover: hover) {
  .p-line.is-seek .p-line__w:hover { text-decoration: underline 1.5px var(--ink-dim); text-underline-offset: 0.3em; }
}
.p-line__name { font-size: 0.85em; font-weight: 500; color: var(--ink-faint); }
.p-line__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.p-line__hint { flex-basis: 100%; margin: var(--space-1) 0 0; }
.p-line.is-stack { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.p-line.is-stack .p-line__who { width: auto; margin-bottom: 2px; }
.p-line.is-still .p-line__row, .p-line.is-still .p-line__tag, .p-line.is-still .p-line__mark, .p-line.is-still .p-line__w { transition: none; }
.p-pl__line { margin-top: var(--space-2); font-size: clamp(18px, 1rem + 0.6vw, 22px); letter-spacing: -0.012em; }

.p-filebox__native, .p-dt__native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
}
.p-fnote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-faint);
  animation: p-rise var(--duration-fast) var(--ease-out) both;
}
.p-fnote.p-err { color: var(--danger); flex-wrap: nowrap; align-items: flex-start; }
.p-filebox__note:not(:empty), .p-dt__note:not(:empty) { margin-top: var(--space-2); }

.p-filebox { display: flex; flex-direction: column; min-width: 0; width: 100%; }
.p-filebox__frame {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 64px;
  padding-right: var(--space-2);
  background: var(--surface-raised);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.p-filebox__zone {
  flex: 1 1 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.026em;
  color: var(--ink-muted);
  cursor: pointer;
}
.p-filebox__glyph {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--ink-faint);
  font-size: 15px;
  line-height: 1;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.p-filebox__body { display: flex; flex-direction: column; min-width: 0; }
.p-filebox__main { min-width: 0; }
.p-filebox__meta { font-size: 13px; line-height: 18px; color: var(--ink-faint); }
.p-filebox__meta:empty { display: none; }
.p-filebox__pick { color: var(--accent); font-weight: 500; }
.p-filebox__name { display: flex; min-width: 0; color: var(--ink); font-weight: 500; }
.p-filebox__base { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-filebox__ext { flex: none; }
.p-filebox__clear[hidden] { display: none; }
.p-filebox__frame:hover { background: color-mix(in srgb, var(--ink) 6%, var(--surface-raised)); }
.p-filebox__frame:hover .p-filebox__glyph, .p-filebox__frame:focus-within .p-filebox__glyph { background: var(--accent-wash); color: var(--accent); }
.p-filebox__frame:focus-within { background: var(--accent-wash); }
.p-filebox__frame:has(.p-filebox__native:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.p-filebox.is-chosen .p-filebox__glyph { background: var(--accent-wash); color: var(--accent); }
.p-filebox.is-ready .p-filebox__frame { background: var(--accent-wash); }
.p-filebox.is-over .p-filebox__frame { background: var(--accent-wash); }
.p-filebox.is-over .p-filebox__glyph { background: var(--accent-fill); color: var(--on-accent); }
.p-filebox.is-over .p-filebox__main { color: var(--ink); }
.p-filebox.is-invalid:not(.is-chosen) .p-filebox__frame { background: var(--danger-wash); }
.p-filebox.is-invalid:not(.is-chosen) .p-filebox__glyph { background: var(--danger-wash); color: var(--danger); }
.p-filebox:has(.p-filebox__native:disabled) .p-filebox__frame { background: var(--surface); }
.p-filebox:has(.p-filebox__native:disabled) .p-filebox__zone { cursor: not-allowed; color: var(--ink-dim); }
.p-filebox:has(.p-filebox__native:disabled) .p-filebox__pick { color: var(--ink-dim); }
form.htmx-request .p-filebox__frame { pointer-events: none; }
form.htmx-request .p-filebox__clear { visibility: hidden; }

.p-dt { display: flex; flex-direction: column; min-width: 0; width: 100%; position: relative; }
.p-dt.is-empty .p-dd__text { color: var(--ink-dim); }
.p-dt .p-dd__text { font-variant-numeric: tabular-nums; }
.p-dt.is-invalid .p-dd__btn, .p-dt.is-invalid .p-dd__btn:hover { border-color: var(--danger); }
.p-dt__pop {
  position: fixed;
  inset: auto;
  margin: 0;
  border: 0;
  padding: var(--space-3);
  width: max-content;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-xl);
  background: var(--surface-float);
  color: var(--ink);
  box-shadow: var(--shadow-overlay);
}
.p-dt__pop:popover-open { display: flex; flex-direction: column; gap: var(--space-3); animation: p-rise var(--duration-fast) var(--ease-out) both; }
.p-dt__quick { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.p-dt__main { display: flex; gap: var(--space-3); }
.p-dt__cal { display: flex; flex-direction: column; gap: var(--space-1); flex: none; }
.p-dt__head { display: flex; align-items: center; gap: var(--space-1); height: 36px; padding-left: var(--space-2); }
.p-dt__month { flex: 1 1 auto; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.026em; color: var(--ink); }
.p-dt__head .p-btn[disabled] { border-color: transparent; background: transparent; }
.p-dt__row { display: grid; grid-template-columns: repeat(7, 36px); }
.p-dt__cols > span {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 16px;
  color: var(--ink-dim);
}
.p-dt__gap { height: 36px; }
.p-dt__day {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.p-dt__day:hover { background: var(--surface-raised); color: var(--ink); }
.p-dt__day:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.p-dt__day.is-today { color: var(--accent); font-weight: 600; }
.p-dt__day.is-today::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: var(--radius-pill);
  background: currentColor;
}
.p-dt__day[aria-selected="true"] { background: var(--accent-fill); color: var(--on-accent); font-weight: 600; }
.p-dt__day[aria-selected="true"]:focus-visible { outline-color: var(--on-accent); }
.p-dt__day[aria-disabled="true"] { color: var(--border-strong); background: transparent; cursor: not-allowed; }
.p-dt__times {
  position: relative;
  flex: none;
  align-self: stretch;
  contain: size;
  width: 76px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border-radius: var(--radius-md);
  outline: none;
}
.p-dt__time {
  flex: none;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  font-size: 13px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.p-dt__time:hover { background: var(--surface-raised); color: var(--ink); }
.p-dt__times:focus .p-dt__time.is-active { background: var(--surface-raised); color: var(--ink); }
.p-dt__times:focus-visible .p-dt__time.is-active { outline: 2px solid var(--focus); outline-offset: -2px; }
.p-dt__time[aria-selected="true"], .p-dt__times:focus .p-dt__time[aria-selected="true"].is-active { background: var(--accent-fill); color: var(--on-accent); font-weight: 600; }
.p-dt__times:focus-visible .p-dt__time[aria-selected="true"].is-active { outline-color: var(--on-accent); }
.p-dt__time[aria-disabled="true"] { color: var(--border-strong); background: transparent; cursor: not-allowed; }
.p-dt__top { display: none; }
@media (max-width: 479px) {
  .p-dt__pop { width: calc(100vw - 16px); }
  .p-dt__pop::backdrop { background: color-mix(in srgb, var(--overlay) 55%, transparent); }
  .p-dt__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-left: var(--space-2); }
  .p-dt__now { min-width: 0; font-size: 17px; line-height: 24px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); font-variant-numeric: tabular-nums; }
  .p-dt.is-empty .p-dt__now { color: var(--ink-dim); }
  .p-dt__main { flex-direction: column; }
  .p-dt__cal { flex: 1 1 auto; }
  .p-dt__row { grid-template-columns: repeat(7, 1fr); }
  .p-dt__day { width: 100%; height: 44px; }
  .p-dt__gap { height: 44px; }
  .p-dt__day.is-today::after { bottom: 8px; }
  .p-dt__times { width: auto; height: 44px; flex-direction: row; gap: var(--space-1); overflow-x: auto; overflow-y: hidden; }
  .p-dt__time { height: 44px; padding: 0 var(--space-3); }
}

.p-input[type="search"] { -webkit-appearance: none; appearance: none; }
.p-input::-webkit-search-results-button, .p-input::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; }
.p-sfield { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.p-sfield > .p-input[type="search"] { padding-right: 40px; }
.p-sfield__clear {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.p-sfield__clear[hidden] { display: none; }
.p-sfield__clear:hover { color: var(--ink); background: var(--surface-raised); }
.p-sfield__clear:active { transform: translateY(-50%) scale(0.92); }

@media (pointer: coarse) {
  .p-dd--field .p-dd__btn { font-size: 16px; }
  .p-sfield > .p-input[type="search"] { padding-right: 48px; }
  .p-sfield__clear { right: 2px; width: 40px; height: 40px; font-size: 13px; }
  .p-dt__time { min-width: 56px; }
}

.p-pl__pin { height: 1px; margin: var(--space-8) 0 -1px; }
.p-pl {
  --pl-bg: var(--surface);
  --pl-p: 0;
  --pl-b: 0;
  position: sticky;
  top: calc(var(--topbar) + var(--space-3));
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--pl-bg);
  transition: background var(--duration-fast) var(--ease-out);
}
.p-pl.is-stuck { --pl-bg: var(--surface-float); }
.p-pl.is-stuck::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: var(--shadow-overlay); transition: opacity var(--duration-fast) var(--ease-out); }
@starting-style {
  .p-pl.is-stuck::after { opacity: 0; }
}
.p-pl__bar { display: flex; align-items: center; gap: var(--space-3); }
.p-pl__t {
  flex: none;
  min-width: 40px;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.p-pl__t--end { text-align: right; }
.p-pl__scrub {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  cursor: pointer;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.p-pl__track { position: absolute; inset: 0; border-radius: var(--radius-pill); }
.p-pl__track:focus-visible { outline: none; }
.p-pl__rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: var(--radius-pill);
  background: var(--border);
  overflow: hidden;
  transition: transform var(--duration-fast) var(--ease-out);
}
.p-pl__buf, .p-pl__fill { position: absolute; inset: 0; transform-origin: left center; }
.p-pl__buf { background: color-mix(in srgb, var(--border-strong) 45%, var(--border)); transform: scaleX(var(--pl-b)); }
.p-pl__fill { background: var(--accent); transform: scaleX(var(--pl-p)); }
.p-pl__turns { position: absolute; inset: 0; pointer-events: none; }
.p-pl__turn {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 16px;
  margin-left: -8px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
}
.p-pl__turn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 10px;
  margin: -5px 0 0 -1px;
  background: var(--pl-bg);
  transition: background var(--duration-fast) var(--ease-out);
}
.p-pl__turn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: var(--radius-pill);
  background: var(--ink-faint);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.p-pl__turn:focus-visible { outline: none; }
.p-pl__turn:focus-visible::after { opacity: 1; transform: none; background: var(--pl-bg); box-shadow: 0 0 0 2px var(--focus); }
.p-pl__thumb {
  position: absolute;
  top: 50%;
  left: calc(var(--pl-p) * 100%);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  pointer-events: none;
  transform: scale(0.86);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.p-pl__track:focus-visible ~ .p-pl__thumb { transform: scale(1.15); box-shadow: 0 0 0 3px var(--pl-bg), 0 0 0 5px var(--focus); }
.p-pl.is-drag .p-pl__rail { transform: scaleY(1.5); }
.p-pl.is-drag .p-pl__thumb { transform: scale(1.15); }
@media (hover: hover) {
  .p-pl__scrub:hover .p-pl__rail { transform: scaleY(1.5); }
  .p-pl__scrub:hover .p-pl__thumb { transform: scale(1); }
  .p-pl__turn:hover::after { opacity: 1; transform: none; }
}
.p-pl__tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 2px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-float);
  box-shadow: var(--shadow-overlay);
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-muted);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 2px);
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), visibility 0s linear var(--duration-fast);
}
.p-pl__tip.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.p-pl__tip.is-below { bottom: auto; top: calc(100% + 2px); }
.p-pl__tip > b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.p-pl__tip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-pl__ctl { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-2); }
.p-pl__mid { grid-column: 2; display: flex; align-items: center; gap: var(--space-4); }
.p-pl__skip {
  min-width: 64px;
  justify-content: center;
  gap: var(--space-1);
  font-variant-numeric: tabular-nums;
}
.p-pl__k { font-size: 22px; line-height: 1; translate: 0 -1px; color: var(--ink-faint); transition: color var(--duration-fast) var(--ease-out); }
.p-pl__skip:hover .p-pl__k, .p-pl__skip.is-hit .p-pl__k { color: var(--ink); }
.p-pl .p-pl__play {
  position: relative;
  width: 56px;
  height: 56px;
  padding: 0;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}
.p-pl__g { display: inline-block; }
.p-pl__g--play { translate: 2px 0; }
.p-pl__g--pause { display: none; font-size: 16px; letter-spacing: 0.06em; translate: 0.03em 0; }
.p-pl[data-state="playing"] .p-pl__g--play { display: none; }
.p-pl[data-state="playing"] .p-pl__g--pause { display: inline-block; }
.p-pl__play::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--accent);
  border-right-color: transparent;
  border-bottom-color: transparent;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.p-pl[data-wait] .p-pl__play::before { opacity: 1; animation: p-spin 900ms linear infinite; }
.p-pl .is-hit { background: var(--surface-raised); color: var(--ink); transform: translateY(1px); }
.p-pl .p-pl__play.is-hit { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.p-pl__speed { grid-column: 3; justify-self: end; min-width: 60px; justify-content: center; font-variant-numeric: tabular-nums; }
.p-pl__speed[data-on] { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); }
.p-pl[data-state="failed"] .p-pl__scrub { opacity: 0.4; pointer-events: none; }
.p-pl[data-state="failed"] .p-pl__thumb { opacity: 0; }
.p-pl__say {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-1) var(--space-3);
  min-height: 28px;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-muted);
  text-align: center;
}
.p-pl__say[data-kind="failed"] { color: var(--danger); }
.p-pl__say[data-empty], .p-pl__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (pointer: coarse) {
  .p-pl__scrub { height: 40px; }
  .p-pl__speed { position: relative; }
  .p-pl__speed::after { content: ""; position: absolute; inset: -4px; }
}
@media (max-width: 639px) {
  .p-pl__pin { margin-top: var(--space-6); }
  .p-pl {
    top: var(--topbar);
    gap: var(--space-1);
    margin: 0 calc(var(--space-5) * -1);
    padding: var(--space-2) var(--space-5) var(--space-3);
    border-radius: 0;
  }
  .p-pl__bar { gap: var(--space-2); }
  .p-pl__t { min-width: 36px; }
  .p-pl__mid { gap: var(--space-1); }
  .p-pl__skip { min-width: 56px; padding-left: var(--space-2); padding-right: var(--space-2); }
  .p-pl .p-pl__play { width: 52px; height: 52px; font-size: 18px; }
  .p-pl__say { min-height: 0; padding-top: var(--space-1); }
}

.p-room__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.p-btn--outline.p-danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.p-btn--outline.p-danger:hover { background: var(--danger-wash); }
.p-room__lobby {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  aspect-ratio: 16 / 9;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: center;
}
.p-room__live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--accent);
}
.p-room__live > span { font-size: 10px; }
.p-room__hint { margin: 0; max-width: 360px; }
.p-room__msg { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-faint); }
.p-room__msg--bad { color: var(--danger); }
.p-room__lobby .p-room__msg { max-width: 420px; }
.p-col--room { max-width: 1320px; }
.p-room__in { display: flex; flex-direction: column; gap: var(--space-6); }
.p-room__main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.p-room__side { min-width: 0; }
.p-room__side:empty { display: none; }
@media (min-width: 1100px) {
  .p-room__in:has(.p-room__side:not(:empty)) { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .p-room__side { position: sticky; top: calc(var(--topbar) + var(--space-6)); display: flex; flex-direction: column; max-height: calc(100vh - var(--topbar) - var(--space-12)); }
}
.p-room__stage {
  position: relative;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 72vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
.p-room__stage.has-video.is-speaking { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); }
.p-room__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ground);
  transition: opacity var(--duration-base) var(--ease-out);
}
.p-room__video.is-mirror { transform: scaleX(-1); }
.p-room__video.is-screen { object-fit: contain; }
.p-room__video::-webkit-media-controls { display: none; }
.p-room__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--duration-base) var(--ease-out);
}
.p-room__av {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(64px, 16cqi, 120px);
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--ink-muted);
  font-size: clamp(22px, 5cqi, 40px);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: box-shadow var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.p-room__stage.is-speaking .p-room__av { color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 50%, transparent); }
.p-room__stage.is-waiting .p-room__av { color: var(--ink-dim); background: var(--surface-raised); }
.p-room__stage.is-shaky .p-room__video, .p-room__stage.is-shaky .p-room__face { opacity: 0.5; }
.p-room__tag {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  max-width: calc(100% - var(--space-6));
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  color: var(--ink);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.p-room__tag-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-room__off { flex: none; color: var(--ink-faint); font-weight: 400; }
.p-room__flag {
  position: absolute;
  top: var(--space-3);
  left: 50%;
  translate: -50% 0;
  max-width: calc(100% - var(--space-6));
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--caution-wash);
  color: var(--caution);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  text-align: center;
}
.p-room__sound { position: absolute; top: var(--space-3); right: var(--space-3); }
.p-room__cc {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.p-room__cc.is-off { padding: 0; background: transparent; }
.p-room__cc-lines {
  flex: 1 1 auto;
  min-width: 0;
  height: 72px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-1);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 24px);
}
.p-room__cc-line {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  overflow-wrap: anywhere;
  transition: opacity var(--duration-base) var(--ease-out);
  animation: p-room-line var(--duration-base) var(--ease-out);
}
.p-room__cc-line.is-old { opacity: 0.5; }
.p-room__cc-who { color: var(--ink-faint); font-weight: 500; }
.p-room__cc-hint { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-faint); }
.p-room__cc-toggle { flex: none; }
@keyframes p-room-line {
  from { opacity: 0; translate: 0 6px; }
}
.p-room__nocc { margin: 0; }
.p-room__bar { display: flex; flex-direction: column; gap: var(--space-2); }
.p-room__ctls { display: flex; align-items: center; gap: var(--space-2); }
.p-room__ctl { justify-content: center; min-width: 132px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.p-room__ctl:hover { background: color-mix(in srgb, var(--ink) 13%, transparent); }
.p-room__ctl.is-on { background: var(--accent-wash); color: var(--accent); }
.p-room__ctl.is-on:hover { background: var(--accent-mark); }
.p-room__dot { font-size: 13px; line-height: 1; }
.p-room__leave { margin-left: auto; }
.p-room__people { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.p-room__people > .p-note { flex: none; padding-top: 6px; }
.p-room__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-room__chip {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 240px;
  padding: 3px var(--space-3) 3px 3px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-muted);
  transition: color var(--duration-fast) var(--ease-out);
}
.p-room__chip-av {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--ink-muted);
  font-size: 10.5px;
  font-weight: 600;
  transition: box-shadow var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.p-room__chip.is-speaking { color: var(--ink); }
.p-room__chip.is-speaking .p-room__chip-av { background: var(--accent-wash); color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent); }
.p-room__chip-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-room__chip-role { flex: none; color: var(--ink-dim); }
.p-room__log { margin-top: var(--space-10); }
@media (max-width: 639px) {
  .p-room__lobby { aspect-ratio: auto; min-height: 220px; padding: var(--space-8) var(--space-5); }
  .p-room__cc { flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-3) var(--space-2) var(--space-1) var(--space-4); }
  .p-room__cc.is-off { align-items: flex-start; }
  .p-room__cc-lines { padding-right: var(--space-2); }
  .p-room__cc-toggle { align-self: flex-end; }
  .p-room__cc.is-off .p-room__cc-toggle { align-self: flex-start; }
  .p-room__cc-line { font-size: 15px; }
  .p-room.is-in { padding-bottom: 120px; }
  .p-room__bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding: var(--space-3) var(--space-4) max(var(--space-3), env(safe-area-inset-bottom));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: var(--surface-float);
    box-shadow: var(--shadow-overlay);
  }
  .p-room__bar .p-room__msg { padding: 0 var(--space-1); }
  .p-room__ctl { flex: 1 1 0; min-width: 0; padding-left: var(--space-3); padding-right: var(--space-3); }
  .p-room__leave { flex: none; }
  body:has(.p-room.is-in) .p-toast { bottom: 104px; }
  .p-room__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .p-room__chips::-webkit-scrollbar { display: none; }
}
.p-talk {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.p-talk [hidden] { display: none; }
.p-talk__tabs { display: flex; gap: var(--space-1); padding: var(--space-2); }
.p-talk__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-md);
  padding: 0 var(--control-md-pad);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-faint);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.016em;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.p-talk__tab:hover { color: var(--ink); }
.p-talk__tab[aria-selected="true"] { background: var(--surface-raised); color: var(--ink); }
.p-talk__n { color: var(--ink-dim); font-weight: 400; font-variant-numeric: tabular-nums; }
.p-talk__n:empty { display: none; }
.p-talk__badge {
  min-width: 18px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  animation: p-rise var(--duration-base) var(--ease-settle) both;
}
.p-talk__panel { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.p-talk__feed, .p-talk__qs {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: var(--space-1) var(--space-4) var(--space-4);
}
.p-talk__feed:focus-visible, .p-talk__qs:focus-visible { outline-offset: -2px; }
.p-talk__empty { margin: 0; padding: var(--space-8) var(--space-4); color: var(--ink-faint); font-size: 13px; line-height: 18px; text-align: center; }
.p-talk__empty .p-talk__tool { margin-left: var(--space-1); }
.p-talk__g { display: flex; flex-direction: column; margin-top: var(--space-3); }
.p-talk__g.is-in, .p-talk__m.is-in, .p-talk__q.is-in { animation: p-talk-in var(--duration-base) var(--ease-out) both; }
.p-talk__who { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: 2px; font-size: 13px; line-height: 18px; }
.p-talk__nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-faint); font-weight: 500; }
.p-talk__tag {
  flex: none;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 11.5px;
  line-height: 16px;
  font-weight: 500;
}
.p-room__line > b .p-talk__tag { margin-left: var(--space-2); vertical-align: 1px; }
.p-talk__at { flex: none; color: var(--ink-dim); font-size: 12px; line-height: 18px; font-variant-numeric: tabular-nums; }
.p-talk__m {
  position: relative;
  margin: 0 calc(-1 * var(--space-2));
  padding: 2px var(--space-2);
  border-radius: var(--radius-md);
  outline-offset: 0;
  transition: background var(--duration-fast) var(--ease-out), opacity var(--duration-base) var(--ease-out);
}
.p-talk__m:hover, .p-talk__m:focus-within { background: var(--surface-raised); }
.p-talk__m.is-sending { opacity: 0.55; }
.p-talk__m.is-failed .p-talk__b { color: var(--ink-faint); }
.p-talk__b {
  color: var(--ink);
  font-size: 14.5px;
  line-height: 22px;
  letter-spacing: -0.011em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.p-talk__code {
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--code-bg);
  color: var(--code-ink);
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.p-talk__pre {
  margin: var(--space-1) 0;
  padding: var(--space-2) var(--space-3);
  overflow-x: auto;
  background: var(--code-bg);
  color: var(--code-ink);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 20px;
  white-space: pre;
  scrollbar-width: thin;
}
.p-talk__link { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 2px; transition: color var(--duration-fast) var(--ease-out); }
.p-talk__link:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
.p-talk__side {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 1px var(--space-1) 1px var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out), visibility var(--duration-fast);
}
.p-talk__side .p-talk__at { padding-right: var(--space-1); }
.p-talk__m:hover .p-talk__side, .p-talk__m:focus-within .p-talk__side { visibility: visible; opacity: 1; }
.p-talk__tool { color: var(--ink-faint); }
.p-talk__tool:hover { color: var(--ink); background: var(--surface-float); }
.p-talk__tool.p-danger, .p-talk__tool.p-danger:hover { color: var(--danger); background: var(--danger-wash); }
.p-talk__tool--yes { color: var(--accent); }
@media (pointer: fine) {
  .p-talk__side .p-talk__tool { --h: var(--space-6); }
}
.p-talk__qf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-1) 0 2px; }
.p-talk__ql { color: var(--accent); font-size: 12.5px; line-height: 18px; font-weight: 500; }
.p-talk__vote {
  background: var(--surface-raised);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.p-talk__m .p-talk__vote, .p-talk__q .p-talk__vote { background: var(--surface-float); }
.p-talk__vote:hover { color: var(--ink); }
.p-talk__vote[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent); }
.p-talk__vote[disabled] { background: transparent; border-color: transparent; color: var(--ink-dim); }
.p-talk__backed { color: var(--ink-faint); font-size: 12.5px; line-height: 18px; font-variant-numeric: tabular-nums; }
.p-talk__fail { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); margin-top: 2px; color: var(--ink-muted); font-size: 12.5px; line-height: 18px; animation: p-err-in var(--duration-base) var(--ease-settle) both; }
.p-talk__fail-g {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--danger-wash);
  color: var(--danger);
  font-size: 9px;
  font-weight: 600;
}
.p-talk__fail-t { flex: 1 1 160px; min-width: 0; }
.p-talk__fail .p-talk__tool:first-of-type { color: var(--danger); }
.p-talk__new {
  position: absolute;
  left: 50%;
  bottom: var(--space-3);
  translate: -50% 0;
  background: var(--surface-float);
  color: var(--ink);
  box-shadow: var(--shadow-overlay);
  animation: p-rise var(--duration-base) var(--ease-settle) both;
}
.p-talk__new:hover { background: var(--surface-raised); }
.p-talk__pin {
  flex: none;
  margin: 0 var(--space-2) var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.p-talk__pin.is-in { animation: p-rise var(--duration-base) var(--ease-settle) both; }
.p-talk__pin-h { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 18px; }
.p-talk__pin-h .p-talk__tool { margin-left: auto; }
.p-talk__pin-l { flex: none; color: var(--accent); font-weight: 500; }
.p-talk__pin-b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 2px; font-size: 14px; line-height: 21px; }
.p-talk__qs { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-2); }
.p-talk__q {
  flex: none;
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.p-talk__q.is-staged { background: var(--accent-wash); }
.p-talk__q:focus-visible { outline-offset: 1px; }
.p-talk__qh { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: 2px; font-size: 13px; line-height: 18px; }
.p-talk__onstage { flex: none; color: var(--accent); font-size: 12.5px; font-weight: 500; }
.p-talk__qa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-top: var(--space-2); margin-left: calc(-1 * var(--space-1)); }
.p-talk__qa .p-talk__vote { margin-right: var(--space-1); margin-left: var(--space-1); }
.p-talk__qa .p-talk__backed { margin: 0 var(--space-2) 0 var(--space-1); }
.p-talk__done { flex: none; margin-top: var(--space-2); }
.p-talk__done > summary {
  display: flex;
  align-items: center;
  min-height: var(--control-sm);
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  list-style: none;
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.p-talk__done > summary::-webkit-details-marker { display: none; }
.p-talk__done > summary::after { content: ""; width: 12px; height: 12px; margin-left: var(--space-2); background: var(--chevron) center / 12px no-repeat; transition: rotate var(--duration-fast) var(--ease-out); }
.p-talk__done[open] > summary::after { rotate: 180deg; }
.p-talk__done > summary:hover { color: var(--ink); background: var(--surface-raised); }
.p-talk__done .p-talk__q { margin-top: var(--space-2); background: transparent; }
.p-talk__done .p-talk__q .p-talk__b { color: var(--ink-muted); }
.p-talk__pulse, .p-talk__feel {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) 0;
  font-size: 13px;
  line-height: 18px;
}
.p-talk__pulse-l { color: var(--ink-muted); font-weight: 500; }
.p-talk__pulse-t { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.p-talk__meter { display: flex; gap: 2px; width: 88px; height: 6px; border-radius: var(--radius-pill); background: var(--surface-raised); overflow: hidden; }
.p-talk__meter > span { flex: 0 1 0; min-width: 0; border-radius: var(--radius-pill); transition: flex-grow var(--duration-slow) var(--ease-out); }
.p-talk__meter-got { background: var(--accent-fill); }
.p-talk__meter-lost { background: var(--caution); }
.p-talk__pulse.is-quiet .p-talk__pulse-t { color: var(--ink-dim); }
.p-talk__fb {
  position: relative;
  overflow: hidden;
  background: var(--surface-raised);
  color: var(--ink-muted);
  isolation: isolate;
}
.p-talk__fb:hover { color: var(--ink); }
.p-talk__fb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent-wash);
  transform-origin: left;
  transform: scaleX(0);
}
.p-talk__fb--lost::after { background: var(--caution-wash); }
.p-talk__fb.is-on { color: var(--accent); }
.p-talk__fb--lost.is-on { color: var(--caution); }
.p-talk__fb.is-on::after { transform: scaleX(1); animation: p-talk-decay var(--decay, 90s) linear forwards; }
.p-talk__feel-say { flex: 1 1 100%; min-height: 18px; color: var(--ink-faint); font-size: 12.5px; }
.p-talk__feel-say:empty { display: none; }
.p-talk__form { flex: none; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); }
.p-talk textarea.p-talk__field {
  min-height: 44px;
  max-height: 168px;
  padding: 10px var(--space-4);
  resize: none;
  overflow-y: auto;
  font-size: 14.5px;
  line-height: 22px;
  scrollbar-width: thin;
}
.p-talk__row { display: flex; align-items: center; gap: var(--space-3); }
.p-talk__ask { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-sm); color: var(--ink-muted); font-size: 13px; line-height: 18px; white-space: nowrap; cursor: pointer; user-select: none; }
.p-talk input.p-talk__switch {
  width: 30px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--surface-raised) radial-gradient(circle, var(--ink-faint) 0 5px, transparent 5.5px) no-repeat 1px 50% / 14px 14px;
  vertical-align: middle;
  transition: background-color var(--duration-fast) var(--ease-out), background-position var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.p-talk input.p-talk__switch:checked {
  border-color: var(--accent-fill);
  background: var(--accent-fill) radial-gradient(circle, var(--on-accent) 0 5px, transparent 5.5px) no-repeat calc(100% - 1px) 50% / 14px 14px;
}
.p-talk__count { margin-left: auto; color: var(--ink-faint); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-talk__count.is-over { color: var(--danger); }
.p-talk__send { margin-left: auto; }
.p-talk__count:not([hidden]) + .p-talk__send { margin-left: 0; }
.p-talk__ctl .p-talk__short { display: none; }
.p-talk__chip { transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.p-talk__chip:hover, .p-talk__chip.is-open { background: var(--surface-raised); color: var(--ink); }
.p-talk__chip .p-room__chip-nm::part(talk-chip) {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
}
.p-talk__chip .p-room__chip-nm::part(talk-chip):focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.p-talk__chip-hand { flex: none; color: var(--accent); font-weight: 600; }
.p-talk__pop {
  position: fixed;
  inset: auto;
  margin: 0;
  border: 0;
  width: 300px;
  max-width: calc(100vw - 2 * var(--space-4));
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--space-2);
  border-radius: var(--radius-xl);
  background: var(--surface-float);
  color: var(--ink);
  box-shadow: var(--shadow-overlay);
  z-index: 50;
}
.p-talk__pop:popover-open { animation: p-rise var(--duration-fast) var(--ease-out) both; }
.p-talk__pop:focus { outline: none; }
.p-talk__pop--chip { width: 260px; }
.p-talk__pop-h { margin: 0; padding: var(--space-2) var(--space-3) var(--space-1); color: var(--ink-faint); font-size: 13px; line-height: 18px; font-weight: 500; overflow-wrap: anywhere; }
.p-talk__pop-e { margin: 0; padding: var(--space-1) var(--space-3) var(--space-3); color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.p-talk__pl { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.p-talk__pi { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-md); padding: 0 var(--space-1) 0 var(--space-3); border-radius: var(--radius-md); transition: background var(--duration-fast) var(--ease-out); }
.p-talk__pi:hover { background: var(--surface-raised); }
.p-talk__pi-nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; }
.p-talk__pop-all { display: flex; width: 100%; justify-content: center; margin-top: var(--space-1); padding: var(--space-2); font-size: 13px; }
.p-talk__stage {
  position: absolute;
  top: var(--space-3);
  left: 50%;
  z-index: 4;
  translate: -50% 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: min(640px, calc(100% - 2 * var(--space-3)));
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-float) 94%, transparent);
  box-shadow: var(--shadow-overlay);
  animation: p-talk-drop var(--duration-base) var(--ease-settle) both;
  transition: top var(--duration-base) var(--ease-out);
}
.p-room__flag:not([hidden]) ~ .p-talk__stage, .p-room__sound:not([hidden]) ~ .p-talk__stage { top: calc(var(--space-3) + 44px + var(--space-2)); }
.p-talk__stage-in { flex: 1 1 auto; min-width: 0; }
.p-talk__stage-l { display: block; color: var(--ink-faint); font-size: 13px; line-height: 18px; font-weight: 500; }
.p-talk__stage-b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 2px; color: var(--ink); font-size: 17px; line-height: 25px; letter-spacing: -0.014em; white-space: pre-wrap; overflow-wrap: anywhere; }
.p-talk__stage-b .p-talk__pre { display: none; }
.p-talk__stage-x { flex: none; }
.p-talklog__lost { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.p-talklog__minute {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--caution-wash) 50%, var(--surface));
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}
.p-talklog__minute--2 { background: var(--caution-wash); }
.p-talklog__minute--3 { background: color-mix(in srgb, var(--caution) 18%, var(--caution-wash)); color: var(--ink); }
.p-talklog__minute--4 { background: color-mix(in srgb, var(--caution) 30%, var(--caution-wash)); color: var(--ink); }
.p-talklog__qs { display: flex; flex-direction: column; gap: var(--space-1); }
.p-talklog__q { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); transition: background var(--duration-fast) var(--ease-out); }
.p-talklog__q:hover, .p-talklog__q:focus-within { background: var(--surface); }
.p-talklog__votes { flex: none; min-width: 28px; padding-top: 1px; color: var(--ink-faint); font-size: 15px; line-height: 24px; text-align: right; font-variant-numeric: tabular-nums; }
.p-talklog__votes b { font-weight: 600; color: var(--ink); }
.p-talklog__q.is-answered .p-talklog__votes b { color: var(--ink-faint); }
.p-talklog__qb { flex: 1 1 auto; min-width: 0; }
.p-talklog__text { color: var(--ink); font-size: 15px; line-height: 24px; white-space: pre-wrap; overflow-wrap: anywhere; }
.p-talklog__q.is-answered .p-talklog__text { color: var(--ink-muted); }
.p-talklog__meta { margin-top: 2px; }
.p-talklog__qmark { color: var(--accent); font-weight: 500; }
.p-talklog__line { padding: var(--space-1) var(--space-2); margin: 0 calc(-1 * var(--space-2)); border-radius: var(--radius-md); transition: background var(--duration-fast) var(--ease-out), opacity var(--duration-base) var(--ease-out); }
.p-talklog__line:hover, .p-talklog__line:focus-within { background: var(--surface); }
.p-talklog__line > .p-talklog__text { flex: 1 1 240px; min-width: 0; color: var(--ink-muted); }
.p-talklog__lines { gap: var(--space-1); }
.is-replay .p-talklog__line.is-later { opacity: 0.45; }
.is-replay .p-talklog__line.is-now { background: var(--accent-wash); }
.is-replay .p-talklog__line.is-now .p-talklog__text { color: var(--ink); }
.p-talklog__seek {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-faint);
  font: inherit;
  font-size: 13px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out);
}
.p-talklog__seek:hover { color: var(--accent); text-decoration-color: currentColor; }
.p-talklog__minute .p-talklog__seek { color: inherit; }
.p-talklog__del { display: none; flex: none; align-self: center; margin-left: auto; }
.is-tidy .p-talklog__del { display: inline-flex; }
@keyframes p-talk-in { from { opacity: 0; translate: 0 4px; } }
@keyframes p-talk-drop { from { opacity: 0; translate: -50% -6px; } }
@keyframes p-talk-decay { from { transform: scaleX(var(--from, 1)); } to { transform: scaleX(0); } }
@container (max-width: 520px) {
  .p-talk__stage { top: var(--space-2); padding: var(--space-2) var(--space-1) var(--space-2) var(--space-3); gap: var(--space-2); width: calc(100% - 2 * var(--space-2)); }
  .p-talk__stage-l { font-size: 12px; line-height: 16px; }
  .p-talk__stage-b { -webkit-line-clamp: 2; font-size: 14px; line-height: 20px; }
  .p-room__flag:not([hidden]) ~ .p-talk__stage { display: none; }
}
@media (min-width: 1100px) {
  .p-room__in:has(.p-talk) > .p-room__side { align-self: stretch; }
  .p-talk { flex: 1 1 auto; min-height: 520px; contain: size; }
}
@media (max-width: 1099px) {
  .p-talk__feed, .p-talk__qs { height: 380px; flex: none; }
}
@media (max-width: 639px) {
  .p-talk__feed, .p-talk__qs { height: min(56vh, 420px); }
  .p-talk__tabs { padding: var(--space-2) var(--space-2) var(--space-1); }
  .p-talk__tab { flex: 1 1 0; justify-content: center; }
  .p-talk__form { padding: var(--space-3) var(--space-3) var(--space-3); }
  .p-talk__feel .p-talk__fb { flex: 1 1 0; justify-content: center; }
  .p-talk__ctl .p-talk__long { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .p-talk__ctl .p-talk__short { display: inline; }
  .p-room__bar { transition: translate var(--duration-base) var(--ease-out); }
  .p-room.is-in.is-typing .p-room__bar { translate: 0 calc(100% + var(--space-4)); }
  .p-talk__side { position: static; display: none; margin-top: 2px; padding: 0; background: none; }
  .p-talk__m:focus-within .p-talk__side { display: flex; }
}
@media (pointer: coarse) {
  .p-talk__side { visibility: visible; opacity: 1; position: static; display: none; margin-top: 2px; padding: 0; background: none; }
  .p-talk__m:focus-within .p-talk__side { display: flex; }
  .p-talklog__seek { display: inline-flex; align-items: center; min-height: 44px; margin: -13px calc(-1 * var(--space-2)); padding: 0 var(--space-2); }
}
.lb {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--surface);
  container: lb / size;
}
.lb__in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "rail area";
  width: 100%;
  height: 100%;
}
.lb__rail {
  --tool: 34px;
  --rows: 15;
  display: none;
  grid-area: rail;
  grid-template-rows: repeat(var(--rows), var(--tool));
  grid-auto-flow: column;
  grid-auto-columns: var(--tool);
  align-content: start;
  gap: 2px;
  padding: var(--space-2);
  background: var(--surface-raised);
  overflow: hidden;
}
@container lb (max-height: 555px) {
  .lb__rail { --rows: 8; }
}
@container lb (max-height: 301px) {
  .lb__rail { --rows: 5; }
}
.lb.can-draw .lb__rail { display: grid; }
.lb__tool {
  display: grid;
  place-items: center;
  width: var(--tool);
  height: var(--tool);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.lb__tool:hover { background: var(--surface); color: var(--ink); }
.lb__tool[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent); }
.lb__tool[aria-expanded="true"] { background: var(--surface); }
.lb__tool:disabled { background: transparent; color: var(--ink-dim); opacity: 0.45; cursor: default; }
.lb__tool:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.lb__g-marker { font-size: 18px; opacity: 0.55; }
.lb__g-text { font-size: 17px; font-weight: 600; }
.lb__g-code { font-size: 13px; font-weight: 600; letter-spacing: -0.04em; }
.lb__g-laser { color: var(--accent); }
.lb__swatch {
  display: block;
  width: var(--lb-dot, 12px);
  height: var(--lb-dot, 12px);
  border-radius: var(--radius-pill);
  background: var(--lb-c, var(--board-ink));
}
.lb__area { position: relative; grid-area: area; min-width: 0; min-height: 0; overflow: hidden; }
.lb__svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  user-select: none;
}
.lb.can-draw .lb__svg { touch-action: none; cursor: crosshair; }
.lb__svg:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.lb.can-draw[data-tool="select"] .lb__svg { cursor: default; }
.lb.can-draw[data-tool="text"] .lb__svg { cursor: text; }
.lb.can-draw[data-tool="eraser"] .lb__svg { cursor: cell; }
.lb.is-moving .lb__svg { cursor: grabbing; }
.lb__svg [data-item].is-erasing { opacity: 0.25; }
.lb__svg .lb-dia g, .lb__svg .lb-dia path, .lb__svg .lb-dia text, .lb__svg .lb-dia line, .lb__svg .lb-dia rect {
  transition: opacity var(--duration-base) var(--ease-out);
}
.lb__svg .lb-ring { transition: x var(--duration-base) var(--ease-settle), y var(--duration-base) var(--ease-settle), width var(--duration-base) var(--ease-settle), height var(--duration-base) var(--ease-settle); }
.lb__top {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: flex;
  gap: var(--space-2);
}
.lb__chip { background: var(--surface-raised); color: var(--ink-muted); }
.lb__chip:hover { color: var(--ink); background: var(--surface-raised); }
.lb__chip.is-on { background: var(--accent-wash); color: var(--accent); }
.lb__chip--draw { display: none; }
.lb__pages {
  position: absolute;
  left: 50%;
  bottom: var(--space-3);
  translate: -50% 0;
  display: flex;
  gap: 2px;
  max-width: calc(100% - var(--space-6));
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  overflow-x: auto;
  scrollbar-width: none;
}
.lb__pages:empty { display: none; }
.lb__pages::-webkit-scrollbar { display: none; }
.lb__pg {
  flex: none;
  min-width: var(--control-sm);
  height: var(--control-sm);
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-faint);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.lb__pg:hover { color: var(--ink); background: var(--surface); }
.lb__pg[aria-current="true"] { background: var(--accent-wash); color: var(--accent); }
.lb__pg:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.lb__tag {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  max-width: calc(100% - var(--space-6));
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  color: var(--ink);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb__tag:empty { display: none; }
.lb__turn { display: none; }
@media (orientation: portrait) and (max-width: 599px) {
  .lb-full .lb__turn {
    position: absolute;
    top: 76px;
    left: var(--space-4);
    right: var(--space-4);
    display: block;
    text-align: center;
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-faint);
  }
}
.lb__sel {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: calc(100% - var(--space-4));
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--surface-float);
  box-shadow: var(--shadow-overlay);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  animation: p-err-in var(--duration-base) var(--ease-settle) both;
}
.lb__sel-n { padding: 0 var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-faint); }
.lb__write {
  position: absolute;
  z-index: 3;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 4px;
  background: transparent;
  color: var(--board-ink);
  caret-color: var(--accent);
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.lb__write.is-note { padding: 0; font-weight: 400; line-height: 1.35; letter-spacing: normal; }
.lb__ed {
  position: absolute;
  z-index: 4;
  top: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: min(440px, calc(100% - var(--space-6)));
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-float);
  box-shadow: var(--shadow-overlay);
  animation: p-err-in var(--duration-base) var(--ease-settle) both;
}
.lb__ed-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.lb__ed-t { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink); }
.lb__ed-starts { display: flex; gap: 2px; flex-wrap: wrap; }
.lb__ed-src {
  flex: 1 1 auto;
  min-height: 96px;
  width: 100%;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--code-bg);
  color: var(--code-ink);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  tab-size: 4;
  resize: none;
  white-space: pre;
  overflow: auto;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.lb__ed-src:focus { outline: none; border-color: var(--accent); }
.lb__ed-err {
  margin: 0;
  max-height: 96px;
  overflow: auto;
  font-size: 13px;
  line-height: 18px;
  color: var(--danger);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: p-err-in var(--duration-base) var(--ease-settle) both;
}
.lb__ed-err.is-note { color: var(--ink-faint); }
.lb__ed-acts { display: flex; justify-content: flex-end; gap: var(--space-2); }
.lb__pop {
  position: fixed;
  inset: auto;
  margin: 0;
  border: 0;
  padding: var(--space-2);
  border-radius: var(--radius-xl);
  background: var(--surface-float);
  color: var(--ink);
  box-shadow: var(--shadow-overlay);
}
.lb__pop:popover-open { display: flex; flex-direction: column; gap: var(--space-1); animation: p-rise var(--duration-fast) var(--ease-out) both; }
.lb__pop-row { display: flex; gap: 2px; }
.lb__dot {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.lb__dot:hover { background: var(--surface-raised); }
.lb__dot[aria-pressed="true"] { background: var(--surface-raised); box-shadow: inset 0 0 0 2px var(--accent); }
.lb__dot > span { display: block; width: var(--lb-dot, 18px); height: var(--lb-dot, 18px); border-radius: var(--radius-pill); background: var(--lb-c, var(--ink-muted)); }
.lb__menu { min-width: 220px; }
.lb__menu-row { display: flex; gap: var(--space-1); }
.lb__menu .p-btn { justify-content: flex-start; }
.p-room__stage.lb-full {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: auto;
  height: 100dvh;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
  container-type: normal;
}
body:has(.lb-full) { overflow: hidden; }
body:has(.lb-full) .p-toast { z-index: 60; }
@container lb (max-height: 279px) {
  .lb.can-draw .lb__rail { display: none; }
  .lb.can-draw .lb__chip--draw { display: inline-flex; }
  .lb__chip:not(.lb__chip--draw):not([data-board-full]), .lb.can-draw .lb__chip[data-board-full] { display: none; }
  .lb__chip [data-board-full-t] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lb__top { top: var(--space-2); right: var(--space-2); }
  .lb__pages { display: none; }
  .lb__tag { left: var(--space-2); bottom: var(--space-2); }
}
@media (pointer: coarse) {
  @container lb (max-height: 703px) {
    .lb__rail { --rows: 8; }
  }
  @container lb (max-height: 381px) {
    .lb__rail { --rows: 5; }
  }
}
@container lb (max-width: 599px) and (min-height: 280px) {
  .lb__in { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "area" "rail"; }
  .lb__rail {
    --tool: 44px;
    --rows: 1;
    padding: var(--space-2) var(--space-3) max(var(--space-2), env(safe-area-inset-bottom));
    overflow-x: auto;
    scrollbar-width: none;
  }
  .lb__rail::-webkit-scrollbar { display: none; }
  .lb__tool { font-size: 18px; }
  .lb__ed { left: var(--space-3); width: auto; }
}
@media (pointer: coarse) {
  .lb__rail { --tool: 44px; }
  .lb__tool { font-size: 18px; }
  .lb__dot { width: 44px; height: 44px; }
}
@media (max-width: 639px) {
  .p-room__ctls:has(.lb-ctl:not([hidden])) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p-room__ctls:has(.lb-ctl:not([hidden])) .p-room__ctl { padding-left: var(--space-2); padding-right: var(--space-2); }
  .p-room__ctls:has(.lb-ctl:not([hidden])) .p-room__leave { margin-left: 0; }
  .p-room__ctls:has(.lb-ctl:not([hidden])) .p-talk__ctl .p-talk__long { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: nowrap; }
  .p-room__ctls:has(.lb-ctl:not([hidden])) .p-talk__ctl .p-talk__short { display: none; }
  .p-room.is-in:has(.lb-ctl:not([hidden])) { padding-bottom: 176px; }
  body:has(.lb-ctl:not([hidden])) .p-toast { bottom: 160px; }
}
.lb-end__follow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.lb-end__follow .p-btn.is-on { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }
.lb-end__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: var(--space-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  animation: p-err-in var(--duration-base) var(--ease-settle) both;
}
.lb-end__stage > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.lb-end__pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-6); }
.lb-end__page { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; margin: 0; }
.lb-end__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: var(--surface); }
.lb-end__cap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.lb-end__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.p-room__pip {
  position: absolute;
  z-index: 3;
  width: clamp(104px, 24cqi, 260px);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-raised);
  box-shadow: var(--shadow-overlay);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
.p-room__pip[data-corner="br"] { right: var(--space-3); bottom: var(--space-3); }
.p-room__pip[data-corner="bl"] { left: var(--space-3); bottom: var(--space-3); }
.p-room__pip[data-corner="tl"] { left: var(--space-3); top: var(--space-3); }
.p-room__pip[data-corner="tr"] { right: var(--space-3); top: var(--space-3); }
.p-room__stage:not(.is-presenting) .p-room__pip[data-corner="bl"] { bottom: calc(var(--space-3) + 36px); }
.p-room__pip.is-dragging { right: auto; bottom: auto; cursor: grabbing; }
.p-room__pip.is-speaking { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent), var(--shadow-overlay); }
.p-room__pip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.p-room__pip-video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.p-room__pip-video.is-mirror { transform: scaleX(-1); }
.p-room__pip-video::-webkit-media-controls { display: none; }
.p-room__pip-nm {
  position: absolute;
  left: var(--space-1);
  bottom: var(--space-1);
  max-width: calc(100% - var(--space-2));
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  color: var(--ink);
  font-size: 12px;
  line-height: 17px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.p-room__sound { z-index: 4; }

.p-rsvp-slot { display: flex; justify-content: center; margin-top: var(--space-6); }
.p-rsvp { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-4); margin: 0; }
.p-rsvp__on { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--accent); }
.p-rsvp__count { flex-basis: 100%; text-align: center; }
.p-rsvp--row { flex: none; position: relative; z-index: 1; gap: var(--space-2); }
.p-rsvp--row .p-btn { min-width: 112px; justify-content: center; }
.p-live-row { position: relative; }
.p-live-row__a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.p-live-row__a:focus-visible { outline: none; }
.p-live-row:has(.p-live-row__a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

.p-pl.p-vp {
  position: relative;
  top: auto;
  z-index: auto;
  gap: 0;
  margin: var(--space-8) 0 0;
  padding: var(--space-2) var(--space-2) 0;
  background: var(--surface);
}
.p-vp__screen {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ground);
}
.p-vp__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--ground);
  cursor: pointer;
}
.p-vp__video::-webkit-media-controls { display: none; }
.p-vp__big {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ground) 72%, transparent);
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.p-vp__big > span { translate: 3px 0; }
.p-vp__big:hover { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.p-vp[data-state="playing"] .p-vp__big,
.p-vp[data-state="failed"] .p-vp__big,
.p-vp[data-wait] .p-vp__big { opacity: 0; transform: scale(0.9); pointer-events: none; }
.p-vp__cc {
  --line-lh: 1.4;
  position: absolute;
  left: 50%;
  bottom: 7%;
  display: block;
  width: min(88%, 34em);
  padding: 0.4em 0.85em;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--ground) 84%, transparent);
  font-size: clamp(16px, 2.4vw, 22px);
  text-align: center;
  opacity: 0;
  translate: -50% 0;
  pointer-events: none;
  transition: opacity 190ms var(--ease-out), bottom var(--duration-base) var(--ease-out);
}
.p-vp__cc:has(.p-line__row:not(.is-gone)) { opacity: 1; transition-duration: 250ms, var(--duration-base); }
.p-vp__deck { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-5) var(--space-3); transition: opacity var(--duration-base) var(--ease-out); }
.p-vp__ctl .p-pl__speed { grid-column: auto; justify-self: auto; }
.p-vp__aside { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.p-vp__aside--end { justify-content: flex-end; }
.p-vp__opt { justify-content: center; }
.p-vp__opt[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); }
.p-vp .p-pl__tip { bottom: calc(100% + 6px); }
.p-vp__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); }
.p-vp__board { margin-left: auto; }

.p-vp.is-full { display: block; padding: 0; border-radius: 0; background: var(--ground); }
.p-vp.is-full .p-vp__screen { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.p-vp.is-full .p-vp__deck {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-12) max(var(--space-8), 4vw) var(--space-4);
  background: linear-gradient(to top, color-mix(in srgb, var(--ground) 94%, transparent) 40%, transparent);
}
.p-vp.is-full .p-vp__cc { bottom: 132px; }
.p-vp.is-full.is-idle { cursor: none; }
.p-vp.is-full.is-idle .p-vp__deck { opacity: 0; }
.p-vp.is-full.is-idle .p-vp__cc { bottom: 7%; }

.p-vp-wait {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 16 / 9;
  margin-top: var(--space-8);
  padding: clamp(var(--space-5), 7cqi, var(--space-12));
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
}
.p-vp-wait__mark { font-size: clamp(14px, 2.4cqi, 24px); font-weight: 600; letter-spacing: -0.01em; }
.p-vp-wait__mark > span { color: var(--accent); }
.p-vp-wait__card { display: flex; flex-direction: column; gap: clamp(4px, 1.4cqi, 14px); min-width: 0; }
.p-vp-wait__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: clamp(20px, 5cqi, 52px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.p-vp-wait__host { font-size: clamp(13px, 2.2cqi, 22px); color: var(--ink-faint); }
.p-vp-wait__foot { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.p-vp-wait__t { margin: 0; max-width: 560px; font-size: clamp(12px, 1.7cqi, 15px); line-height: 1.45; color: var(--ink-muted); }
.p-vp-wait__dots { flex: none; display: inline-flex; gap: 5px; }
.p-vp-wait__dots > i { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--accent); opacity: 0.25; animation: p-vp-dot 1.6s var(--ease-inout) infinite; }
.p-vp-wait__dots > i:nth-child(2) { animation-delay: 0.2s; }
.p-vp-wait__dots > i:nth-child(3) { animation-delay: 0.4s; }
@keyframes p-vp-dot { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.p-vp-empty { margin-top: var(--space-8); }
.p-vp-empty__why { max-width: 460px; margin: var(--space-3) auto 0; }
.p-vp-empty__act { margin-top: var(--space-5); }
.p-vp-none { margin: var(--space-8) 0 0; }

@media (max-width: 639px) {
  .p-pl.p-vp { margin: var(--space-6) calc(var(--space-4) * -1) 0; padding: 0; border-radius: 0; }
  .p-vp__screen { border-radius: 0; }
  .p-vp__deck { padding: var(--space-2) var(--space-4) var(--space-3); }
  .p-vp__ctl { grid-template-columns: 1fr 1fr; grid-template-areas: "mid mid" "a b"; row-gap: var(--space-2); }
  .p-vp__ctl > .p-pl__mid { grid-area: mid; justify-self: center; }
  .p-vp__aside { grid-area: a; }
  .p-vp__aside--end { grid-area: b; }
  .p-vp__big { width: 60px; height: 60px; margin: -30px 0 0 -30px; font-size: 21px; }
  .p-vp-wait { aspect-ratio: auto; min-height: 220px; gap: var(--space-5); }
  .p-vp__board { margin-left: 0; }
  .p-live-row { flex-wrap: nowrap; }
  .p-rsvp--row .p-btn { min-width: 0; }
}
.fx-sec { display: block; margin-top: var(--space-12); }
.fx-h { margin: 0; }
.fx-where { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-muted); min-width: 0; }
.fx-where .p-link { font-weight: 500; }
.fx-evidence code, .fx-hot__e code, .fx-made code, .fx-note code, .fx-tests code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--surface-raised);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  overflow-wrap: anywhere;
}
.fx-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
  animation: p-arrive var(--duration-base) var(--ease-out);
}
.fx-card__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.fx-evidence { margin: var(--space-4) 0 0; font-size: 17px; line-height: 26px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); max-width: var(--measure-prose); }
.fx-why { margin: var(--space-3) 0 0; font-size: 15px; line-height: 24px; color: var(--ink-muted); max-width: var(--measure-prose); white-space: pre-line; }
.fx-change { display: grid; gap: var(--space-5); margin-top: var(--space-5); padding: var(--space-5); background: var(--ground); border-radius: var(--radius-md); }
.fx-part { min-width: 0; }
.fx-part__l { margin-bottom: var(--space-2); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-faint); }
.fx-words { font-size: 15px; line-height: 25px; color: var(--ink-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.fx-words ins, .fx-line ins { text-decoration: none; color: var(--ink); background: var(--accent-wash); border-radius: var(--radius-sm); }
.fx-words del, .fx-line del { color: var(--danger); background: var(--danger-wash); border-radius: var(--radius-sm); text-decoration-thickness: 1px; }
.fx-words ins, .fx-words del { padding: 1px 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.fx-lines { font-family: var(--font-mono); font-size: 12.5px; line-height: 20px; background: var(--code-bg); color: var(--code-ink); border-radius: var(--radius-md); padding: var(--space-2) 0; overflow-x: auto; }
.fx-line { display: flex; min-width: max-content; padding-right: var(--space-4); white-space: pre; }
.fx-line__s { flex: none; width: 28px; text-align: center; color: var(--ink-dim); user-select: none; }
.fx-line--ins { background: var(--accent-wash); }
.fx-line--del { background: var(--danger-wash); }
.fx-line--ins .fx-line__s { color: var(--accent); }
.fx-line--del .fx-line__s { color: var(--danger); }
.fx-line ins, .fx-line del { background: none; color: inherit; }
.fx-line--del del { color: var(--danger); text-decoration: none; }
.fx-line--gap { font-family: var(--font-sans); font-size: 12px; color: var(--ink-dim); padding: 2px var(--space-4) 2px 28px; }
.fx-note { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.fx-note + .fx-note { margin-top: var(--space-1); }
.fx-both { margin-top: var(--space-4); }
.fx-both__s { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-sm); font-size: 13px; line-height: 18px; color: var(--accent); cursor: pointer; list-style: none; border-radius: var(--radius-sm); transition: color var(--duration-fast) var(--ease-out); }
.fx-both__s::-webkit-details-marker { display: none; }
.fx-both__s::before { content: "▸"; transition: rotate var(--duration-fast) var(--ease-out); }
.fx-both[open] .fx-both__s::before { rotate: 90deg; }
.fx-both__s:hover { color: var(--accent-hover); }
.fx-ba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-3); animation: p-arrive var(--duration-base) var(--ease-out); }
.fx-pv { min-width: 0; padding: var(--space-5); background: var(--ground); border-radius: var(--radius-md); }
.fx-pv > .p-cap { margin-bottom: var(--space-3); }
.fx-pv--new { margin-top: var(--space-5); }
.fx-pv .p-prose { max-width: none; }
.fx-pv .p-quiz { padding: 0; background: none; }
.fx-pv .p-code { margin: 0; }
.fx-right { margin-left: auto; font-size: 13px; white-space: nowrap; }
.fx-play__p { margin: 0 0 var(--space-3); font-size: 15px; line-height: 24px; color: var(--ink); }
.fx-tests { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.fx-tests li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.fx-tests__n { color: var(--ink); font-weight: 500; }
.fx-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-5); }
.fx-actions form { display: inline; }
.fx-actions__n { align-self: center; margin-left: var(--space-2); }
.fx-reject > summary { list-style: none; }
.fx-reject > summary::-webkit-details-marker { display: none; }
.fx-reject[open] { flex: 1 1 100%; order: 3; }
.fx-reject[open] > summary { color: var(--ink); background: var(--surface-raised); }
.fx-reject__f { display: flex; flex-direction: column; gap: var(--space-2); max-width: 520px; margin-top: var(--space-3); animation: p-arrive var(--duration-base) var(--ease-out); }
.fx-reject__t.p-input { min-height: 64px; font-size: 14px; }
.fx-done { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); animation: p-rise var(--duration-base) var(--ease-settle) both; }
.fx-done__g { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--accent-wash); color: var(--accent); font-size: 13px; font-weight: 600; }
.fx-done--rejected .fx-done__g { background: var(--surface-raised); color: var(--ink-faint); }
.fx-done--stale .fx-done__g { background: var(--caution-wash); color: var(--caution); }
.fx-done__t { margin: 0 0 2px; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink); }
.fx-done .p-note { margin: 0; }
.fx-hot { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); transition: background var(--duration-fast) var(--ease-out); }
.fx-hot:hover { background: var(--surface); }
.fx-hot__n { flex: none; width: 20px; padding-top: 1px; font-size: 13px; line-height: 18px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.fx-hot__e { margin: var(--space-1) 0 0; font-size: 15px; line-height: 23px; color: var(--ink); max-width: var(--measure-prose); }
.fx-hot__s { flex: none; display: flex; align-items: center; gap: var(--space-2); }
.fx-empty { padding: var(--space-6); background: var(--surface); border-radius: var(--radius-lg); }
.fx-empty__t { margin: 0 0 var(--space-1); font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink); }
.fx-empty .p-note { margin: 0; max-width: var(--measure-prose); }
.fx-quiet { margin: 0; padding: var(--space-3) var(--space-4); font-size: 13px; line-height: 18px; color: var(--ink-faint); }
.fx-live { padding: var(--space-5); background: var(--surface); border-radius: var(--radius-lg); margin-bottom: var(--space-3); }
.fx-live__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.fx-live__t { font-size: 15px; font-weight: 500; color: var(--ink); }
.fx-ask { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-2) 0; }
.fx-ask__n { flex: none; min-width: 26px; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink); font-size: 12.5px; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.fx-ask__t { flex: 1 1 0; font-size: 14px; line-height: 21px; color: var(--ink-muted); overflow-wrap: anywhere; }
.fx-ask__m { flex: none; white-space: nowrap; }
.fx-peak { margin-top: var(--space-3); }
.fx-peak__t { margin: var(--space-2) 0 0; padding: var(--space-3) var(--space-4); background: var(--ground); border-radius: var(--radius-md); font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.fx-made { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); }
.fx-made__g { flex: none; width: 20px; color: var(--accent); font-size: 13px; line-height: 18px; }
.fx-made--not .fx-made__g { color: var(--ink-dim); }
.fx-made__m { margin: var(--space-1) 0 var(--space-1); font-size: 15px; line-height: 23px; color: var(--ink); }
.fx-made .p-note { margin: 0; }
.fx-made--not .p-note { margin-top: var(--space-1); }
.fx-not { margin-top: var(--space-4); }
@media (max-width: 899px) {
  .fx-ba { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .fx-where > .p-dim { display: none; }
  .fx-where > a { flex-basis: 100%; }
  .fx-card { padding: var(--space-5) var(--space-4); }
  .fx-change { padding: var(--space-4); margin-left: calc(var(--space-2) * -1); margin-right: calc(var(--space-2) * -1); }
  .fx-pv { padding: var(--space-4); }
  .fx-evidence { font-size: 16px; line-height: 25px; }
  .fx-hot { padding: var(--space-3) var(--space-2); gap: var(--space-3); flex-wrap: wrap; }
  .fx-hot > .p-grow { flex: 1 1 calc(100% - 40px); }
  .fx-hot__s { margin-left: 32px; }
  .fx-wide { display: none; }
  .fx-actions__n { flex: 1 1 100%; margin: var(--space-1) 0 0; }
  .fx-ask { flex-wrap: wrap; }
  .fx-ask__m { flex-basis: 100%; padding-left: 38px; }
  .fx-made { padding: var(--space-3) var(--space-2); }
}
.p-capq-col { max-width: 760px; }
.p-capq-data { margin: var(--space-4) 0 0; font-variant-numeric: tabular-nums; }
.p-capq-empty { margin-top: var(--space-10); }
.p-capq { margin-top: var(--space-8); }
.p-capq__top { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); }
.p-capq__count { flex: none; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.p-capq__meter { flex: 1 1 auto; height: 3px; border-radius: var(--radius-pill); background: var(--surface-raised); overflow: hidden; }
.p-capq__meter > span { display: block; height: 100%; width: calc(var(--cap-p, 0) * 100%); border-radius: inherit; background: var(--accent); transition: width var(--duration-base) var(--ease-out); }
.p-capq__card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface); }
.p-capq__card.is-in { animation: p-cap-in var(--duration-base) var(--ease-settle) both; }
@keyframes p-cap-in { from { opacity: 0; translate: 0 6px; } }
.p-capq__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); font-size: 14px; line-height: 20px; color: var(--ink-faint); min-width: 0; }
.p-capq__src { color: var(--ink-muted); overflow-wrap: anywhere; transition: color var(--duration-fast) var(--ease-out); }
.p-capq__src:hover { color: var(--accent); }
.p-capq__dot { color: var(--ink-dim); }
.p-capq__who { font-weight: 600; color: var(--ink); }
.p-capq__synth { align-self: center; color: var(--caution); background: var(--caution-wash); white-space: normal; }
.p-capq__hear { display: flex; align-items: center; gap: var(--space-4); }
.p-capq .p-capq__play { position: relative; flex: none; width: 52px; height: 52px; padding: 0; justify-content: center; font-size: 18px; line-height: 1; }
.p-capq__g--play { translate: 2px 0; }
.p-capq__g--stop { display: none; font-size: 15px; letter-spacing: 0.06em; }
.p-capq[data-state="playing"] .p-capq__g--play { display: none; }
.p-capq[data-state="playing"] .p-capq__g--stop { display: inline; }
.p-capq__play::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--accent);
  border-right-color: transparent;
  border-bottom-color: transparent;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.p-capq[data-state="loading"] .p-capq__play::before { opacity: 1; animation: p-spin 900ms linear infinite; }
.p-capq__play.is-ask { box-shadow: 0 0 0 4px var(--accent-wash); }
.p-capq__len { flex: none; min-width: 36px; text-align: right; font-size: 13px; line-height: 18px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.p-wave { --p: 0; position: relative; flex: 1 1 auto; height: 48px; min-width: 0; cursor: pointer; touch-action: none; }
.p-wave:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-sm); }
.p-wave__bars { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
.p-wave__bars > i { flex: 1 1 0; min-width: 1px; height: max(3px, calc(var(--h, 0.06) * 100%)); border-radius: var(--radius-pill); background: var(--ink-dim); transition: height var(--duration-base) var(--ease-out); }
.p-wave__bars > i.is-pad { opacity: 0.4; }
.p-wave__bars--on { clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); pointer-events: none; }
.p-wave__bars--on > i { background: var(--accent); }
.p-capq__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.p-capq .p-capq__text { min-height: 0; resize: none; overflow: hidden; padding: var(--space-3) var(--space-4); font-size: 18px; line-height: 28px; letter-spacing: -0.014em; }
.p-capq__was { margin: calc(var(--space-2) * -1) 0 0; font-size: 13px; line-height: 18px; color: var(--ink-faint); overflow-wrap: anywhere; }
.p-capq__was > b { font-weight: 500; color: var(--ink-muted); }
.p-capq__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.p-capq__lang { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.p-capq__lang .p-dd__btn { min-width: 112px; }
.p-capq__why { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-raised); animation: p-err-in var(--duration-base) var(--ease-settle) both; }
.p-capq__ask { flex: 1 1 100%; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.p-capq__why [data-cap-back] { margin-left: auto; }
.p-capq__why .p-kbd { margin-right: 2px; }
.p-capq__whyhint { flex: 1 1 100%; margin: var(--space-1) 0 0; }
.p-capq__keys { margin: 0; line-height: 24px; }
.p-capq__keys .p-kbd { white-space: nowrap; }
.p-capq__say { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: var(--space-2) var(--space-1) 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.p-capq__say[data-empty] { visibility: hidden; }
.p-capq__say:not([data-empty]) [data-cap-msg] { animation: p-err-in var(--duration-base) var(--ease-settle) both; }
.p-capq__say[data-kind="bad"] { color: var(--danger); }
.p-capq__say .p-capq__ok { color: var(--accent); }
.p-capq__next { display: flex; gap: var(--space-3); margin: var(--space-1) 0 0; padding: 0 var(--space-1); font-size: 14px; line-height: 20px; color: var(--ink-dim); min-width: 0; }
.p-capq__next > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-capq__nextk { flex: none; font-weight: 500; color: var(--ink-faint); }
.p-capq-done { margin-top: var(--space-2); }
.p-capq-done__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }

.p-capfix__entry { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.p-capfix__entry .p-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.p-capfix { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-4); }
.p-capfix__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); border-radius: var(--radius-md); background: var(--surface); }
.p-capfix__count { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.p-capfix__keys { flex: 1 1 auto; margin: 0; }
.p-capfix__row { display: grid; grid-template-columns: 52px minmax(0, 120px) minmax(0, 1fr) auto 20px; align-items: start; gap: var(--space-2) var(--space-3); padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); font-size: 15px; line-height: 24px; color: var(--ink-muted); transition: background var(--duration-fast) var(--ease-out); }
.p-capfix__row:focus-within { background: var(--surface); }
.p-capfix__row > .p-note { padding-top: 11px; font-variant-numeric: tabular-nums; }
.p-capfix__row > b { padding-top: 10px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-capfix__row > .p-capfix__said { grid-column: 3 / 6; padding: 10px 0; overflow-wrap: anywhere; color: var(--ink-faint); }
.p-capfix .p-capfix__text { min-height: 0; resize: none; overflow: hidden; padding: var(--space-2) var(--space-3); font-size: 15px; line-height: 24px; }
.p-capfix__hear { margin-top: 4px; }
.p-capfix__mark { padding-top: 10px; text-align: center; font-size: 14px; line-height: 24px; color: var(--ink-dim); }
.p-capfix__row[data-status="confirmed"] .p-capfix__mark, .p-capfix__row[data-status="corrected"] .p-capfix__mark { color: var(--accent); }
.p-capfix__row[data-status="unusable"] .p-capfix__text { color: var(--ink-faint); }
.p-capfix__row.is-saving .p-capfix__mark { animation: p-blink 900ms var(--ease-inout) infinite; }
.p-capfix__why { grid-column: 3 / 6; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) 0 var(--space-1); animation: p-err-in var(--duration-base) var(--ease-settle) both; }
.p-capfix__why .p-kbd { margin-right: 2px; }
.p-capfix__say { min-height: 24px; margin: var(--space-2) 0 0; padding: 0 var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-faint); }
.p-capfix__say[data-kind="bad"] { color: var(--danger); }

@media (pointer: coarse) {
  .p-capq__keys, .p-capfix__keys, .p-capq__why .p-kbd, .p-capfix__why .p-kbd { display: none; }
  .p-wave { height: 56px; }
  .p-capfix .p-btn.p-capfix__hear { margin-top: 0; }
}
@media (max-width: 639px) {
  .p-capq { margin-top: var(--space-6); }
  .p-capq__card { padding: var(--space-5) var(--space-4); gap: var(--space-3); }
  .p-capq__hear { gap: var(--space-3); }
  .p-capq__acts > .p-grow { display: none; }
  .p-capq__lang { flex: 1 1 100%; }
  .p-capq__lang .p-dd { flex: 1 1 auto; }
  .p-capq__lang .p-dd__btn { width: 100%; }
  .p-capfix__row { grid-template-columns: minmax(0, 1fr) 44px 20px; padding: var(--space-2); }
  .p-capfix__row > .p-note, .p-capfix__row > b { grid-row: 1; grid-column: 1 / -1; padding-top: 0; }
  .p-capfix__row > b { justify-self: end; max-width: calc(100% - 64px); }
  .p-capfix__row > .p-capfix__text, .p-capfix__row > .p-capfix__said { grid-column: 1; }
  .p-capfix__row > .p-capfix__said { padding: 0; }
  .p-capfix__why { grid-column: 1 / 4; }
}

.nb-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@keyframes nb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.nb-wait { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-faint); }
.nb-wait__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--accent); animation: nb-pulse 1400ms var(--ease-inout) infinite; }
.nb-wait__t.is-new { animation: p-arrive var(--duration-fast) var(--ease-out) both; }
.nb-a__b + .nb-wait { margin-top: var(--space-3); animation: p-rise var(--duration-base) var(--ease-out) both; }
.nb-bad { margin: 0; font-size: 13px; line-height: 18px; color: var(--danger); }
.nb-failbox { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) 0; }
.nb-hint { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--ink-faint); text-align: center; }
.nb-stale { margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--caution-wash); color: var(--caution); font-size: 13px; line-height: 18px; }

.nb-cite {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  height: 1.5em;
  margin: 0 0.12em;
  padding: 0 0.38em;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  color: var(--accent);
  font: 600 0.72em/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  vertical-align: 0.16em;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.nb-cite:hover, .nb-cite[aria-expanded="true"] { background: var(--accent-mark); color: var(--ink); }
.nb-cite:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (pointer: coarse) {
  .nb-cite::after { content: ""; position: absolute; inset: -12px -5px; }
}

.nb-pop {
  position: fixed;
  inset: auto;
  margin: 0;
  width: min(380px, calc(100vw - 24px));
  max-height: min(420px, calc(100vh - 24px));
  overflow-y: auto;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface-float);
  color: var(--ink);
  box-shadow: var(--shadow-overlay);
  outline: none;
}
.nb-pop:popover-open { animation: p-rise var(--duration-fast) var(--ease-out) both; }
.nb-pop__h { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.nb-pop__n, .nb-s__n, .nb-from__n {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--ink-faint);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.nb-pop__n { background: var(--accent-wash); color: var(--accent); align-self: center; }
.nb-pop__t { min-width: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.nb-pop__sec { margin-top: var(--space-1); padding-left: 30px; font-size: 12.5px; line-height: 18px; color: var(--ink-faint); }
.nb-pop__x { margin: var(--space-3) 0 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); overflow-wrap: anywhere; }
.nb-pop__acts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

.nb-say {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  z-index: 41;
  display: flex;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  width: max-content;
  max-width: min(520px, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-float);
  color: var(--ink);
  font-size: 14px;
  line-height: 20px;
  box-shadow: var(--shadow-overlay);
  transform: translateX(-50%);
}
.nb-say[hidden] { display: none; }
.nb-say__t { flex: 1 1 auto; min-width: 0; padding: var(--space-1) 0; overflow-wrap: anywhere; }
.nb-say__a { flex: none; color: var(--accent); }
.nb-say__x { flex: none; width: var(--h); padding: 0; color: var(--ink-faint); }
.nb-say__x:hover { color: var(--ink); }
.nb-say:not(:has(.nb-say__a)) { padding-right: var(--space-4); }
.nb-say.is-in { animation: p-toast-in var(--duration-base) var(--ease-settle) both; }
.nb-say.is-out { animation: p-toast-out var(--duration-fast) var(--ease-out) both; }
@media (min-width: 960px) {
  .nb-say { left: var(--space-6); transform: none; max-width: min(440px, calc(100vw - 2 * var(--space-6))); }
  .nb-say.is-in { animation-name: nb-say-in; }
  .nb-say.is-out { animation-name: nb-say-out; }
  body:has([data-nb]) .nb-say { flex-wrap: wrap; max-width: 212px; }
}
@media (min-width: 1280px) {
  body:has([data-nb]) .nb-say { max-width: 268px; }
}
@keyframes nb-say-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes nb-say-out { to { opacity: 0; transform: translateY(6px); } }
.nb-backto { display: flex; justify-content: flex-end; margin: 0 0 var(--space-2); animation: p-rise var(--duration-fast) var(--ease-out) both; }
.nb-backto__b { background: var(--accent-wash); color: var(--accent); }
.nb-backto__b:hover { background: var(--accent-mark); color: var(--ink); }

.nb-marked, .p-block:target { border-radius: var(--radius-md); animation: nb-mark 2600ms var(--ease-out) both; }
@keyframes nb-mark {
  0%, 35% { background-color: var(--accent-wash); box-shadow: 0 0 0 var(--space-3) var(--accent-wash); }
  100% { background-color: transparent; box-shadow: 0 0 0 var(--space-3) transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-marked, .p-block:target { background-color: var(--accent-wash); box-shadow: 0 0 0 var(--space-3) var(--accent-wash); }
  .nb-wait__dot { opacity: 0.7; }
}

.nb-chat { display: flex; flex-direction: column; min-height: 0; }
.nb-thread__in { display: flex; flex-direction: column; gap: var(--space-5); }
.nb-q {
  align-self: flex-end;
  max-width: min(85%, 560px);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 15px;
  line-height: 23px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: p-rise var(--duration-fast) var(--ease-out) both;
}
.nb-q.is-sending { color: var(--ink-muted); }
.nb-a { min-width: 0; animation: p-arrive var(--duration-base) var(--ease-out) both; }
.nb-a__b.p-prose { max-width: none; }
.nb-a__b.p-prose p, .nb-a__b.p-prose li, .nb-guide__b.p-prose p, .nb-guide__b.p-prose li { font-size: 15px; line-height: 25px; }
.nb-a__b.p-prose p, .nb-a__b.p-prose ul, .nb-a__b.p-prose ol { margin-bottom: var(--space-4); }
.nb-a__b.p-prose ul, .nb-a__b.p-prose ol { font-size: 15px; line-height: 25px; }
.nb-a__b.p-prose > :last-child { margin-bottom: 0; }
.nb-a__b.p-prose h1, .nb-a__b.p-prose h2, .nb-a__b.p-prose h3 { font-size: 17px; line-height: 24px; margin: var(--space-5) 0 var(--space-2); }
.nb-a__b.p-prose pre { font-size: 13px; line-height: 21px; }
.nb-caret { display: inline-block; width: 7px; height: 15px; margin-left: 3px; vertical-align: -2px; border-radius: 1px; background: var(--accent); opacity: 0.7; animation: p-blink 1s steps(1) infinite; }
.nb-a__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin-top: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-faint); }
.nb-a__foot.is-bad > span:first-child { color: var(--danger); }
.nb-a__foot .p-btn { margin-left: calc(var(--space-2) * -1); }
.nb-compose { padding-top: var(--space-3); }
.nb-compose__box {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  background: var(--surface);
  transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.nb-compose__box:hover { border-color: var(--ink-dim); }
.nb-compose__box:focus-within { border-color: var(--accent); }
.nb-compose.is-off .nb-compose__box { background: var(--surface-raised); border-color: var(--border); }
.nb-compose__in {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 24px;
  margin: 0;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 400 15px/22px var(--font-sans);
  letter-spacing: -0.011em;
  resize: none;
  outline: none;
}
.nb-compose__in::placeholder { color: var(--ink-dim); }
.nb-compose__in:disabled { cursor: not-allowed; }
.nb-compose__send { flex: none; min-width: 64px; justify-content: center; }
.nb-compose__meta { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); min-height: 18px; margin-top: var(--space-2); padding: 0 var(--space-4); font-size: 12.5px; line-height: 18px; color: var(--ink-faint); }
.nb-compose__note.is-bad { color: var(--danger); animation: p-err-in var(--duration-base) var(--ease-settle) both; }
.nb-compose__count { flex: none; font-variant-numeric: tabular-nums; }
.nb-compose__count.is-bad { color: var(--danger); }
.nb-empty { display: flex; flex-direction: column; gap: var(--space-2); }
.nb-empty .p-note { margin: 0; max-width: 46ch; }
.nb-empty__t { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.nb-empty--ask { align-items: center; text-align: center; padding: var(--space-12) var(--space-4) var(--space-6); }
.nb-sugg { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }
.nb-sugg__b {
  min-height: var(--control-sm);
  padding: var(--space-1) var(--control-sm-pad);
  border: 0;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink-muted);
  font: 500 13.5px/20px var(--font-sans);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.nb-sugg__b:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 12%, transparent); }

.nb-from { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; min-height: var(--control-sm); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-faint); font: 400 13px/18px var(--font-sans); text-align: left; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.nb-from:hover, .nb-from[aria-expanded="true"] { background: var(--surface-raised); color: var(--ink); }
.nb-from__n { background: var(--accent-wash); color: var(--accent); }
.nb-from__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nb-guide__t { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); outline: none; }
.nb-guide__b.p-prose { max-width: 68ch; }
.nb-guide__b.p-prose h2 { font-size: 19px; line-height: 26px; margin: var(--space-6) 0 var(--space-3); }
.nb-guide__b.p-prose h3 { font-size: 16px; line-height: 24px; margin: var(--space-5) 0 var(--space-2); }
.nb-guide__b.p-prose ul, .nb-guide__b.p-prose ol { font-size: 15px; line-height: 25px; margin-bottom: var(--space-4); }

.nb-deck { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); }
.nb-card {
  display: block;
  width: 100%;
  min-height: 220px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  perspective: 1400px;
}
.nb-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.nb-card__in { position: relative; display: grid; min-height: inherit; transform-style: preserve-3d; transition: transform 420ms var(--ease-settle); }
.nb-card.is-flipped .nb-card__in { transform: rotateY(180deg); }
.nb-card.is-jump .nb-card__in { transition: none; }
.nb-card__in.is-new { animation: p-arrive var(--duration-base) var(--ease-out); }
.nb-card__f {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 220px;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.nb-card__back { background: var(--accent-wash); transform: rotateY(180deg); }
.nb-card__k { font-size: 12.5px; line-height: 18px; font-weight: 500; color: var(--ink-faint); }
.nb-card__back .nb-card__k { color: var(--accent); }
.nb-card__t { max-width: 46ch; font-size: clamp(17px, 1rem + 0.4vw, 20px); line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.nb-card__t code { font-family: var(--font-mono); font-size: 0.82em; padding: 1px 5px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ink) 8%, transparent); }
@media (hover: hover) {
  .nb-card:hover .nb-card__front { background: color-mix(in srgb, var(--ink) 4%, var(--surface-raised)); }
}
@media (prefers-reduced-motion: reduce) {
  .nb-card__in { transform-style: flat; }
  .nb-card.is-flipped .nb-card__in { transform: none; }
  .nb-card__back { transform: none; visibility: hidden; }
  .nb-card.is-flipped .nb-card__back { visibility: visible; }
  .nb-card.is-flipped .nb-card__front { visibility: hidden; }
}
.nb-deck__from { display: flex; justify-content: center; min-height: 32px; }
.nb-deck__from[hidden] { display: flex !important; visibility: hidden; }
.nb-deck__nav { display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.nb-deck__step { width: var(--h); padding: 0; font-size: 17px; }
.nb-deck__pos { min-width: 64px; text-align: center; font-size: 13px; line-height: 18px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.nb-deck__mix { position: absolute; right: 0; }
.nb-deck__nav { position: relative; }

.nb-qz__stage { display: flex; flex-direction: column; gap: var(--space-3); animation: p-arrive var(--duration-base) var(--ease-out); }
.nb-qz__pos { font-size: 12.5px; line-height: 18px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.nb-qz__stem.p-prose { max-width: none; }
.nb-qz__stem.p-prose p { font-size: 16px; line-height: 26px; color: var(--ink); margin-bottom: var(--space-3); }
.nb-qz__stem.p-prose > :last-child { margin-bottom: 0; }
.nb-qz__opts { display: flex; flex-direction: column; }
.nb-qz__form { display: flex; flex-direction: column; }
.nb-qz__o { width: 100%; font-family: var(--font-sans); text-align: left; background: var(--surface-raised); }
div.nb-qz__o { cursor: default; }
.nb-qz__o.p-opt--pick:hover { background: color-mix(in srgb, var(--ink) 8%, var(--surface)); }
.nb-qz__o.p-opt--pick:has(input:checked) { background: color-mix(in srgb, var(--ink) 13%, var(--surface)); color: var(--ink); }
.nb-qz__o.p-opt--pick:has(input:checked) .p-opt__k { color: var(--ink); font-weight: 600; }
.nb-qz__o.p-opt--right, .nb-qz__o.p-opt--right:hover { background: var(--accent-wash); }
.nb-qz__o.p-opt--wrong, .nb-qz__o.p-opt--wrong:hover { background: var(--danger-wash); }
.nb-qz__o:not(.p-opt--right):not(.p-opt--wrong):not(.p-opt--pick) { opacity: 0.72; }
.nb-qz__check { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); margin-top: var(--space-2); }
.nb-qz__note { margin: 0; }
.nb-qz__ot { min-width: 0; overflow-wrap: anywhere; }
.nb-qz__m { margin-left: auto; padding-left: var(--space-3); flex: none; font-size: 13px; }
.nb-qz__fb .p-fb { padding-top: 0; }
.nb-qz__fb .p-fb__t b { color: var(--ink); font-weight: 500; }
.nb-qz__acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.nb-qz__acts > :last-child { margin-left: auto; }
.nb-qz__end { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-4) 0; }
.nb-qz__end .p-note { margin: 0; }
.nb-qz__score { font-family: var(--font-display); font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }

.nb-map .p-diagram { margin: 0; background: var(--surface-raised); }
.nb-map > .nb-wait { min-height: 120px; justify-content: center; }
.nb-listen { display: flex; flex-direction: column; gap: var(--space-4); }
.nb-pl { --pl-bg: var(--surface-raised); position: relative; top: auto; z-index: auto; }
.nb-tx .p-flow { margin-top: var(--space-3); }

.nbk { padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--surface); }
.nbk__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.nbk__k { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--accent); }
.nbk__t { min-width: 0; font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); }
.nbk__open { margin-left: auto; font-size: 13px; line-height: 18px; color: var(--accent); transition: color var(--duration-fast) var(--ease-out); }
.nbk__open:hover { color: var(--accent-hover); }
.nbk__parts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) calc(var(--space-1) * -1) 0; padding: var(--space-1); }
.nbk__part {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-md);
  padding: 0 var(--control-md-pad);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-muted);
  font: 500 14px/20px var(--font-sans);
  letter-spacing: -0.016em;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.nbk__part:hover { color: var(--ink); border-color: var(--ink-dim); }
.nbk__part[aria-selected="true"] { border-color: transparent; background: color-mix(in srgb, var(--ink) 9%, var(--surface)); color: var(--ink); }
.nbk__part:active { transform: translateY(1px); }
.nbk__part.is-unmade { border-color: transparent; color: var(--ink-faint); }
.nbk__n { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.nbk__panel { margin-top: var(--space-4); }
.nbk__panel.is-in .nbk__pane:not([hidden]) { animation: p-rise var(--duration-base) var(--ease-out) both; }
.nbk__note { margin: var(--space-3) 0 0; font-size: 13px; line-height: 18px; color: var(--ink-faint); }
.nbk .nb-thread { max-height: min(480px, 60vh); overflow-y: auto; overscroll-behavior: contain; padding-right: var(--space-1); }
.nbk .nb-thread__in:empty { display: none; }
.nbk .nb-empty--ask { padding: var(--space-6) var(--space-2) var(--space-2); }
.nbk .nb-compose__box { background: var(--ground); }
.nbk .nb-q { background: var(--surface-raised); }
.nbk .nb-guide { max-height: min(640px, 75vh); overflow-y: auto; overscroll-behavior: contain; padding-right: var(--space-2); }
.nb-unmade { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.nb-unmade .p-note { margin: 0; }

.nbr { margin: var(--space-10) calc(var(--space-2) * -1) 0; }
.nbr__open, .nbm__open { display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; border: 0; border-radius: var(--radius-lg); font: inherit; text-align: left; color: inherit; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.nbr__open { padding: var(--space-3); background: none; }
.nbr__open:hover { background: color-mix(in srgb, var(--ink) 4%, var(--ground)); }
.nbr__open[aria-expanded="true"] { background: var(--accent-wash); }
.nbr__open:active, .nbm__open:active { transform: translateY(1px); }
.nbr__g, .nbm__g { flex: none; width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--accent); font-size: 13px; }
.nbr__open[aria-expanded="true"] .nbr__g { background: var(--accent-fill); color: var(--on-accent); }
.nbr__b { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nbr__t, .nbm__t { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); }
.nbr__m, .nbm__m { display: block; font-size: 12.5px; line-height: 18px; color: var(--ink-faint); overflow-wrap: anywhere; }
.nbm { display: none; }
@media (max-width: 639px) {
  .nbm { display: block; margin-top: var(--space-12); }
  .nbm__open { align-items: center; min-height: 56px; padding: var(--space-3) var(--space-4); background: var(--surface); }
  .nbm__open > .p-grow { min-width: 0; }
  .nbm__open > :last-child { color: var(--ink-faint); }
  .nbk { padding: var(--space-4); margin-left: calc(var(--space-1) * -1); margin-right: calc(var(--space-1) * -1); }
  .nbk__open { margin-left: 0; flex-basis: 100%; }
}

.nbp { --nb-bg: var(--surface); position: fixed; z-index: 30; top: var(--nbp-top, 0px); right: 0; bottom: 0; width: var(--nbp-w); display: flex; flex-direction: column; background: var(--nb-bg); }
.nbp.is-in { animation: nbp-in var(--duration-base) var(--ease-out) both; }
.nbp.is-out { animation: nbp-out var(--duration-fast) var(--ease-out) both; }
@keyframes nbp-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes nbp-out { to { opacity: 0; transform: translateX(16px); } }
.nbp__bar { flex: none; display: flex; align-items: center; gap: var(--space-1); min-height: 52px; padding: var(--space-2) var(--space-3) var(--space-1) var(--space-5); }
.nbp__k { margin: 0; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--accent); }
.nbp__full { color: var(--ink-muted); }
.nbp__x { width: 36px; justify-content: center; padding: 0; color: var(--ink-muted); }
.nbp__in { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.nbp__note { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6) var(--space-5); }
:root { --nbp-w: clamp(420px, 34vw, 560px); }
@media (min-width: 1280px) {
  .p-body.has-nbp { padding-right: var(--nbp-w); }
  .p-body.has-nbp > .p-side--r { display: none; }
}
@media (min-width: 640px) and (max-width: 1279px) {
  :root { --nbp-w: min(520px, calc(100vw - var(--space-12))); }
  .nbp { --nb-bg: var(--surface-float); border-radius: var(--radius-lg) 0 0 var(--radius-lg); box-shadow: var(--shadow-overlay); }
}
@media (max-width: 639px) {
  .nbp { --nb-bg: var(--ground); top: 0; left: 0; width: auto; }
  .nbp.is-in { animation-name: nbp-up; }
  .nbp.is-out { animation-name: nbp-down; }
  :root.nbp-lock, :root.nbp-lock body { overflow: hidden; }
}
@keyframes nbp-up { from { opacity: 0; transform: translateY(24px); } }
@keyframes nbp-down { to { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) {
  .nbp.is-in, .nbp.is-out { animation: none; }
}
.nb--panel { padding: 0 var(--space-4) var(--space-4); gap: var(--space-3); }
.nb--panel .nb-title { font-size: 17px; line-height: 24px; }
.nb--panel .nb-head__row { flex-wrap: nowrap; align-items: flex-start; }
.nb--panel .nb-head__main { flex: 1 1 auto; }
.nb--panel .nb-head__acts { flex: none; width: auto; }
.nb--panel .nb-pane--src, .nb--panel .nb-pane--studio { background: var(--surface-raised); }
.nb--panel .nb-rd__top { background: var(--surface-raised); }
@media (pointer: coarse) {
  .nbp__x { width: 44px; height: 44px; }
  .nbr__open { min-height: 56px; }
}

.nbl__head { display: flex; flex-direction: column; gap: var(--space-2); }
.nbl__head h1 { margin: 0; }
.nbl__sub { margin: 0; }
.nbl__sec { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-10); }
.nbl__sec--kept { margin-top: var(--space-16); }
.nbl__head + .nbl__sec--kept { margin-top: var(--space-10); }
.nbl__h { margin: 0 0 var(--space-3); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); }
.nbl__hs { font-size: 13px; font-weight: 400; color: var(--ink-faint); letter-spacing: 0; }
.nbl__row { align-items: flex-start; gap: var(--space-4); padding: var(--space-4); }
.nbl__row--kept { padding: var(--space-3) var(--space-4); }
.nbl__g { flex: none; width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--accent); font-size: 14px; }
.nbl__t { display: block; overflow-wrap: anywhere; }
.nbl__m { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ink-faint); overflow-wrap: anywhere; }
.nbl__in { display: block; margin-top: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.nbl__when { flex: none; align-self: center; font-size: 12.5px; line-height: 18px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.nbl__empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-8) var(--space-6); border-radius: var(--radius-lg); background: var(--surface); }
.nbl__empty .p-note { margin: 0; max-width: 56ch; font-size: 14px; line-height: 21px; }
.nbl__empty-t { font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 500; color: var(--ink); }
.nbl__off { margin-top: var(--space-10); }
@media (max-width: 639px) {
  .nbl__row { flex-wrap: wrap; gap: var(--space-3); }
  .nbl__row > .p-grow { flex: 1 1 calc(100% - 48px); }
  .nbl__when { align-self: flex-start; padding-left: 44px; }
}

.nb {
  container: nb / inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6) var(--space-6);
}
.nb-head { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.nb-back { align-self: flex-start; display: inline-flex; gap: var(--space-2); padding: var(--space-1) 0; font-size: 13px; line-height: 18px; color: var(--ink-faint); transition: color var(--duration-fast) var(--ease-out); }
.nb-back:hover { color: var(--ink); }
.nb-head__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-6); }
.nb-head__main { flex: 1 1 320px; min-width: 0; }
.nb-title { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 36px; font-weight: 500; letter-spacing: -0.012em; color: var(--ink); overflow-wrap: anywhere; }
.nb-title--edit {
  width: fit-content;
  max-width: 100%;
  margin-left: calc(var(--space-2) * -1);
  padding: 0 var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: text;
  transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.nb-title--edit:hover { border-color: var(--border); }
@media (hover: none) {
  .nb-title--edit { background: color-mix(in srgb, var(--ink) 4%, var(--ground)); }
}
.nb-title--edit:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.nb-meta { margin-top: var(--space-1); font-size: 13px; line-height: 18px; color: var(--ink-faint); overflow-wrap: anywhere; }
.nb-meta__a { color: var(--ink-muted); border-bottom: 1px solid color-mix(in srgb, var(--ink-muted) 35%, transparent); transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.nb-meta__a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.nb-head__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.nb-more { position: relative; }
.nb-more__b { width: var(--h); padding: 0; font-size: 18px; letter-spacing: 0.04em; }
.nb-more__m { position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 20; width: 300px; max-width: calc(100vw - 32px); animation: p-rise var(--duration-fast) var(--ease-out) both; }
.nb-more__i { width: 100%; align-items: center; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.nb-more__i.p-danger, .nb-more__i.p-danger .p-menu__g { color: var(--danger); }
.nb-more__i.p-danger:hover { background: var(--danger-wash); }
.nb-more__confirm { padding: var(--space-3); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.nb-more__confirm p { margin: 0 0 var(--space-3); }
.nb-more__row { display: flex; gap: var(--space-2); }
.nb-banners { display: flex; flex-direction: column; gap: var(--space-2); }
.nb-banners:empty { display: none; }
.nb-banner { display: flex; align-items: flex-start; gap: var(--space-3); max-width: 100%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface); font-size: 13px; line-height: 18px; color: var(--ink-muted); animation: p-rise var(--duration-base) var(--ease-out) both; }
.nb-banner__g { flex: none; color: var(--ink-faint); }
.nb-banner.is-bad { background: var(--danger-wash); color: var(--ink); }
.nb-banner .p-link { margin-left: auto; flex: none; }
.nb-tabs { display: none; }
.nb-noscript { padding: var(--space-6); }

.nb-grid { display: grid; grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(280px, 340px); gap: var(--space-4); min-height: 0; }
.nb-pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.nb-pane--src, .nb-pane--studio { border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.nb-ph { display: flex; align-items: center; gap: var(--space-2); min-height: 56px; padding: var(--space-3) var(--space-3) var(--space-2) var(--space-5); }
.nb-ph__t { margin: 0; font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); }
.nb-ph__n { font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.nb-pb { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space-3) var(--space-4); }

.nb-srcs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nb-srcs:empty { display: none; }
.nb-srcs--pending { margin-bottom: 2px; }
.nb-s { position: relative; display: flex; align-items: flex-start; border-radius: var(--radius-md); animation: p-arrive var(--duration-base) var(--ease-out); }
.nb-s__open {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
div.nb-s__open { cursor: default; }
button.nb-s__open:hover { background: color-mix(in srgb, var(--ink) 4%, var(--surface)); }
button.nb-s__open:focus-visible { outline-offset: -2px; }
.nb-s__n { margin-top: -1px; }
.nb-s__b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nb-s__t { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nb-s__m { font-size: 12.5px; line-height: 18px; color: var(--ink-faint); overflow-wrap: anywhere; }
.nb-s.is-processing .nb-s__m, .nb-s.is-uploading .nb-s__m { color: var(--caution); }
.nb-s.is-processing .nb-s__n, .nb-mk.is-queued .nb-mk__g, .nb-mk.is-running .nb-mk__g { animation: nb-pulse 1400ms var(--ease-inout) infinite; }
.nb-s.is-failed .nb-s__m { color: var(--danger); }
.nb-s.is-failed .nb-s__n { background: var(--danger-wash); color: var(--danger); }
.nb-s.is-uploading .nb-s__n { background: var(--caution-wash); color: var(--caution); }
.nb-s.is-locked .nb-s__t { color: var(--ink-muted); }
.nb-s.is-removed { align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-1) 0 var(--space-2); background: color-mix(in srgb, var(--ink) 4%, var(--surface)); }
.nb-s__gone { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 18px; color: var(--ink-faint); overflow-wrap: anywhere; }
.nb-s__undo { flex: none; color: var(--accent); }
.nb-s__act { flex: none; margin: var(--space-2) 0 0; }
.nb-s__bar { position: absolute; left: var(--space-2); right: var(--space-2); bottom: 2px; height: 2px; border-radius: var(--radius-pill); background: var(--border); overflow: hidden; }
.nb-s__bar::after { content: ""; position: absolute; inset: 0; background: var(--caution); transform-origin: left; transform: scaleX(var(--nb-up, 0)); transition: transform var(--duration-fast) linear; }
.nb-empty--src { padding: var(--space-4) var(--space-2); }
.nb-empty--src .nb-empty__t { font-size: 17px; line-height: 24px; }

.nb-add { margin: 0 0 var(--space-3); padding: var(--space-3); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--ink) 5%, var(--surface)); animation: p-rise var(--duration-fast) var(--ease-out) both; }
.nb-seg { display: flex; gap: 2px; margin-bottom: var(--space-3); overflow-x: auto; scrollbar-width: none; }
.nb-seg::-webkit-scrollbar { display: none; }
.nb-seg__b { flex: 1 0 auto; min-height: var(--control-sm); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-faint); font: 500 13px/18px var(--font-sans); cursor: pointer; transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
.nb-seg__b:hover { color: var(--ink); }
.nb-seg__b[aria-selected="true"] { background: var(--surface); color: var(--ink); }
.nb-add__f { display: flex; flex-direction: column; gap: var(--space-2); }
.nb-add__row { display: flex; align-items: center; gap: var(--space-2); }
.nb-add__row > .p-input { flex: 1 1 auto; min-width: 0; }
.nb-add__row--end { justify-content: flex-end; }
.nb-add__text { min-height: 120px; font-size: 14px; line-height: 21px; white-space: pre-wrap; }
.nb-add__count { margin-right: auto; font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.nb-add__count.is-bad { color: var(--danger); }
.nb-add__hint { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--ink-faint); }
.nb-add__note { margin: 0; min-height: 0; font-size: 12.5px; line-height: 18px; color: var(--accent); }
.nb-add__note:empty { display: none; }
.nb-add__note.is-bad { color: var(--danger); animation: p-err-in var(--duration-base) var(--ease-settle) both; }
.nb-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-6) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.nb-drop:hover { background: color-mix(in srgb, var(--ink) 6%, var(--surface-raised)); }
.nb-drop:has(.nb-drop__in:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.nb-drop__in { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.nb-drop__g { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-bottom: var(--space-1); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink-faint); font-size: 15px; }
.nb-drop:hover .nb-drop__g { background: var(--accent-wash); color: var(--accent); }
.nb-drop__t { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.nb-drop__pick { color: var(--accent); font-weight: 500; }
.nb-drop__m { font-size: 12.5px; line-height: 18px; color: var(--ink-faint); }
.nb-pick { display: flex; flex-direction: column; gap: var(--space-2); }
.nb-pick__l { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.nb-pick__h { position: sticky; top: 0; z-index: 1; padding: var(--space-2) var(--space-2) var(--space-1); background: color-mix(in srgb, var(--ink) 5%, var(--surface)); font-size: 12.5px; line-height: 18px; font-weight: 500; color: var(--ink-faint); }
.nb-pick__r { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-md); }
.nb-pick__r:hover { background: var(--surface); }
.nb-pick__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.nb-pick__t { font-size: 13.5px; line-height: 19px; color: var(--ink); overflow-wrap: anywhere; }
.nb-pick__m { font-size: 12px; line-height: 16px; color: var(--ink-faint); }
.nb-pick__ok { flex: none; padding: 0 var(--space-2); font-size: 12.5px; color: var(--accent); }
.nb-pick__none { padding: var(--space-2); margin: 0; }
.nb-dropzone { position: absolute; inset: var(--space-2); z-index: 3; display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent-wash) 92%, transparent); color: var(--ink); font-size: 14px; pointer-events: none; }
.nb-dropzone__g { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--accent-fill); color: var(--on-accent); font-size: 17px; }
.nb-pane--src.is-drop .nb-dropzone { display: flex; animation: p-arrive var(--duration-fast) var(--ease-out); }

.nb-crumb { align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--control-sm); margin: 0 0 var(--space-2); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-faint); font: 500 13px/18px var(--font-sans); cursor: pointer; transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
.nb-crumb:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, var(--surface)); }
.nb-rd { display: flex; flex-direction: column; padding: 0 var(--space-2); animation: p-arrive var(--duration-base) var(--ease-out); }
.nb-rd__h { display: flex; align-items: flex-start; gap: var(--space-3); }
.nb-rd__h .nb-s__n { margin-top: 5px; }
.nb-rd__t { margin: 0; font-size: 17px; line-height: 24px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); overflow-wrap: anywhere; }
.nb-rd__title { flex: 1 1 auto; min-width: 0; margin: 0 0 0 calc(var(--space-2) * -1); padding: 3px var(--space-2); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--ink); font: 500 17px/24px var(--font-sans); letter-spacing: -0.016em; text-overflow: ellipsis; transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
.nb-rd__title:hover { border-color: var(--border); }
.nb-rd__title:focus { outline: none; border-color: var(--accent); background: var(--ground); }
.nb-rd__m { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: var(--space-1) 0 0 34px; font-size: 12.5px; line-height: 18px; color: var(--ink-faint); }
.nb-rd__acts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0 30px; }
.nb-rd__b { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-4); }
.nb-rd__b > .p-note { margin: 0; padding: 0 var(--space-2); }
.nb-rd__edit { margin-top: var(--space-4); }
.nb-psg { padding: var(--space-3); border-radius: var(--radius-md); outline: none; transition: background-color var(--duration-base) var(--ease-out); }
.nb-psg.is-hit { background: var(--accent-wash); }
.nb-psg__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); margin-bottom: var(--space-1); font-size: 12px; line-height: 16px; }
.nb-psg__id { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.nb-psg.is-hit .nb-psg__id { color: var(--accent); font-weight: 600; }
.nb-psg__sec { min-width: 0; color: var(--ink-faint); overflow-wrap: anywhere; }
.nb-psg__go { margin-left: auto; color: var(--accent); }
.nb-psg__t { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); overflow-wrap: anywhere; }

.nb-pane--ask .nb-chat { flex: 1 1 auto; }
.nb-pane--ask .nb-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-4) var(--space-4) var(--space-2); }
.nb-pane--ask .nb-thread__in, .nb-pane--ask .nb-compose { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; }
.nb-pane--ask .nb-compose { padding: var(--space-3) var(--space-4) 0; }

.nb-st { display: flex; flex-direction: column; gap: var(--space-2); }
.nb-focus { display: flex; flex-direction: column; gap: var(--space-1); padding: 0 var(--space-2) var(--space-2); }
.nb-focus__l { font-size: 12.5px; line-height: 18px; color: var(--ink-faint); }
.nb-focus__in { height: var(--control-sm); padding: 0 var(--control-sm-pad); font-size: var(--control-sm-text); }
.cast-face { display: block; width: 100%; height: 100%; overflow: visible; }
.p-cast { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--space-1); min-width: 0; margin: 0; padding: 0; border: 0; }
.p-cast--list { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.p-cast__i { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 22px; align-items: center; gap: var(--space-3); min-height: 68px; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2); border: 0; border-radius: var(--radius-md); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.p-cast__i:hover { background: color-mix(in srgb, var(--ink) 4%, var(--surface)); }
.p-cast__i:focus-visible, .p-cast__i:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.p-cast__i[aria-pressed="true"], .p-cast__i[aria-checked="true"], .p-cast__i:has(input:checked) { background: var(--accent-wash); }
.p-cast__i:disabled { cursor: default; opacity: 0.45; }
.p-cast__in { position: absolute; opacity: 0; pointer-events: none; }
.p-cast__f { display: block; width: 52px; height: 60px; padding: 4px 4px 2px; border-radius: var(--radius-md); background: color-mix(in oklab, var(--host-fill, var(--ink)) 16%, var(--surface-raised)); }
.p-cast__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.p-cast__n { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); }
.p-cast__l { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 12.5px; line-height: 17px; color: var(--ink-faint); }
.p-cast__m { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--accent-fill); color: var(--on-accent); font-size: 12px; font-weight: 600; opacity: 0; transform: scale(0.6); transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.p-cast__i[aria-pressed="true"] .p-cast__m, .p-cast__i[aria-checked="true"] .p-cast__m, .p-cast__i:has(input:checked) .p-cast__m { opacity: 1; transform: none; }
.p-cast__i.is-hop .cast-face { animation: cast-hop 520ms var(--ease-settle); }
@keyframes cast-hop { 35% { transform: translateY(-5px); } }
.p-cast__say { min-height: 18px; margin: var(--space-2) 0 0; padding: 0 var(--space-2); font-size: 12.5px; line-height: 18px; color: var(--ink-faint); }
.p-cast__say:empty { display: none; }
.nb-hosts { display: flex; flex-direction: column; gap: var(--space-1); padding: 0 var(--space-2) var(--space-2); }
.nb-hosts__l { font-size: 12.5px; line-height: 18px; color: var(--ink-faint); }
.nb-hosts__b { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-md); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1); border: 0; border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 14px; line-height: 20px; text-align: left; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.nb-hosts__b:hover { background: color-mix(in srgb, var(--ink) 6%, var(--surface-raised)); }
.nb-hosts__b:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nb-hosts__fs { display: flex; flex: none; }
.nb-hosts__f { display: block; width: 30px; height: 34px; padding: 2px 2px 1px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--host-fill) 22%, var(--surface)); }
.nb-hosts__f + .nb-hosts__f { margin-left: -8px; }
.nb-hosts__n { flex: 1 1 auto; min-width: 0; }
.nb-hosts__c { flex: none; font-size: 12.5px; color: var(--ink-faint); }
.nb-hosts__c::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: var(--space-1); background: var(--chevron) center / 10px no-repeat; transition: rotate var(--duration-fast) var(--ease-out); }
.nb-hosts__b[aria-expanded="true"] .nb-hosts__c::after { rotate: 180deg; }
.nb-hosts__p { display: grid; grid-template-rows: 1fr; padding-top: var(--space-1); animation: p-rise var(--duration-fast) var(--ease-out) both; }
.nb-hosts__p[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .p-cast__i.is-hop .cast-face, .nb-hosts__p { animation: none; }
  .p-cast__m { transition: none; }
}
.nb-mks { display: flex; flex-direction: column; gap: 2px; }
.nb-mk { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-1) 0 var(--space-2); border-radius: var(--radius-md); animation: p-arrive var(--duration-base) var(--ease-out); }
.nb-mk__g { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink-faint); font-size: 13px; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.nb-mk.is-ready .nb-mk__g { background: var(--accent-wash); color: var(--accent); }
.nb-mk.is-queued .nb-mk__g, .nb-mk.is-running .nb-mk__g { background: var(--caution-wash); color: var(--caution); }
.nb-mk.is-failed .nb-mk__g { background: var(--danger-wash); color: var(--danger); }
.nb-mk__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: var(--space-3) var(--space-2); border: 0; border-radius: var(--radius-md); background: none; color: inherit; font: inherit; text-align: left; }
button.nb-mk__b { cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
button.nb-mk__b:hover { background: color-mix(in srgb, var(--ink) 4%, var(--surface)); }
.nb-mk__t { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); }
.nb-mk__s, .nb-mk__f { font-size: 12.5px; line-height: 18px; color: var(--ink-faint); overflow-wrap: anywhere; }
.nb-mk.is-queued .nb-mk__s, .nb-mk.is-running .nb-mk__s { color: var(--caution); }
.nb-mk.is-failed .nb-mk__s { color: var(--danger); }
.nb-mk__stale { align-self: flex-start; margin-top: 3px; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--caution-wash); color: var(--caution); font-size: 12px; line-height: 18px; }
.nb-mk__a { flex: none; display: flex; align-items: center; }
.nb-mk__go { min-width: 36px; justify-content: center; }
.nb-st__use { margin: var(--space-1) 0 0; padding: 0 var(--space-3); font-size: 12.5px; line-height: 18px; color: var(--ink-faint); }
.nb-st__use:empty { display: none; }

.nb-emb { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-6) 0 0; padding: var(--space-4) var(--space-2) 0; }
.nb-emb[hidden] { display: none; }
.nb-emb__t { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.nb-emb__r { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; }
.nb-emb__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nb-emb__l { font-size: 13.5px; line-height: 19px; color: var(--ink); overflow-wrap: anywhere; transition: color var(--duration-fast) var(--ease-out); }
.nb-emb__l:hover { color: var(--accent); }
.nb-emb__m { font-size: 12px; line-height: 16px; color: var(--ink-faint); }
.nb-emb__list { display: flex; flex-direction: column; }
.nb-emb__list:empty { display: none; }
.nb-made { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-6) 0 0; padding: var(--space-4) var(--space-2) 0; }
.nb-made[hidden] { display: none; }
.nb-made__list { display: flex; flex-direction: column; gap: 2px; }
.nb-made__open { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2); border: 0; border-radius: var(--radius-md); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background var(--duration-fast) var(--ease-out); }
.nb-made__open:hover { background: var(--surface-raised); }
.nb-made__open:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.nb-made__th { flex: none; display: grid; place-items: center; width: 64px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink-faint); }
.nb-made__th > img { width: 100%; height: 100%; object-fit: cover; }
.nb-made__b { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nb-made__n { overflow: hidden; font-size: 13.5px; line-height: 19px; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.nb-made__s { font-size: 12px; line-height: 16px; color: var(--ink-faint); }
.nb-pic { margin: 0; }
.nb-pic__i { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.nb-pic__c { margin-top: var(--space-3); font-size: 14px; line-height: 20px; color: var(--ink-faint); }
.nb-pic__m { margin: var(--space-2) 0 0; font-size: 12.5px; line-height: 18px; color: var(--ink-dim); }
.nb-embf__dup { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--caution-wash); color: var(--ink); font-size: 13px; line-height: 18px; }
.nb-embf__dup[hidden] { display: none; }
.nb-mk[data-f-row]:focus-visible, .nb-s[data-f-row]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }.nb-embf { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--ink) 5%, var(--surface)); animation: p-rise var(--duration-fast) var(--ease-out) both; }
.nb-embf__t { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.nb-embf__into { margin: 0; font-size: 13px; color: var(--ink-muted); }
.nb-ff { gap: var(--space-1); }
.nb-parts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.nb-parts legend { margin-bottom: var(--space-2); padding: 0; }
.nb-part { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-sm); padding: 0 var(--space-3) 0 var(--space-2); border-radius: var(--radius-pill); background: var(--surface); font-size: 13.5px; line-height: 19px; color: var(--ink-muted); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.nb-part:hover { color: var(--ink); }
.nb-part:has(input:checked) { background: var(--accent-wash); color: var(--ink); }
.nb-part__s { font-size: 12px; color: var(--ink-faint); }
.nb-parts--q { flex-direction: column; flex-wrap: nowrap; }
.nb-parts--q .nb-part { border-radius: var(--radius-md); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2); align-items: flex-start; }
.nb-parts--q .nb-part input { margin-top: 2px; }

.nb-view { display: flex; flex-direction: column; padding: 0 var(--space-2) var(--space-2); animation: p-arrive var(--duration-base) var(--ease-out); }
.nb-view__h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.nb-view__hl { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nb-view__why { margin: calc(var(--space-2) * -1) 0 var(--space-4); max-width: 60ch; }
.nb-view__k { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--accent); }
.nb-view__t { margin: 0; font-size: 17px; line-height: 24px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.nb-view__m { font-size: 12.5px; line-height: 18px; color: var(--ink-faint); overflow-wrap: anywhere; }
.nb-view__put { align-self: flex-start; margin-top: var(--space-4); }
.nb-newer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--accent-wash); font-size: 13px; color: var(--ink); }
.nb-view .nb-card__f { background: var(--surface-raised); }
.nb-view .nb-card__back { background: var(--accent-wash); }

@media (min-width: 960px) {
  .nb:not(.nb--panel) { height: calc(100vh - var(--topbar)); height: calc(100dvh - var(--topbar)); min-height: 560px; }
  .nb-grid { flex: 1 1 auto; }
  .nb-grid.is-src-wide { grid-template-columns: minmax(340px, 1fr) minmax(0, 1fr) minmax(280px, 340px); }
  .nb-grid.is-out-wide { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(360px, 1.1fr); }
  .nb-grid.is-src-wide.is-out-wide { grid-template-columns: minmax(300px, 1fr) minmax(0, 0.8fr) minmax(320px, 1fr); }
}
@media (max-width: 959px) {
  .nb:not(.nb--panel) { padding: var(--space-4) var(--space-4) 0; gap: var(--space-3); }
  .nb:not(.nb--panel) .nb-title { font-size: 24px; line-height: 32px; }
}
@container nb (max-width: 959px) {
  .nb-tabs { position: sticky; top: var(--topbar); z-index: 6; display: flex; gap: var(--space-1); margin: 0 calc(var(--space-4) * -1); padding: var(--space-2) var(--space-4); background: var(--nb-bg, var(--ground)); }
  .nb-tab { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: var(--control-md); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-faint); font: 500 14px/20px var(--font-sans); cursor: pointer; transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
  .nb--panel .nb-tabs { top: 0; }
  .nb-tab:hover { color: var(--ink); }
  .nb-tab[aria-selected="true"] { background: color-mix(in srgb, var(--ink) 8%, var(--nb-bg, var(--ground))); color: var(--ink); }
  .nb-tab__n { font-weight: 400; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
  .nb-grid { display: block; }
  .nb-pane { display: none; }
  .nb-pane.is-active { display: flex; }
  .nb-pane--src, .nb-pane--studio { margin-bottom: var(--space-6); overflow: visible; }
  .nb-pb { overflow: visible; }
  .nb-pane--ask .nb-thread { overflow: visible; padding: var(--space-2) 0 var(--space-4); }
  .nb-pane--ask .nb-compose { position: sticky; bottom: 0; z-index: 4; width: auto; max-width: none; margin: 0 calc(var(--space-4) * -1); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: var(--nb-bg, var(--ground)); }
  .nb-pane--ask .nb-compose__meta:empty { display: none; }
  .nb-head__acts { width: 100%; }
}
@media (pointer: coarse) {
  .nb-tab, .nb-part, .nbk__part, .nb-sugg__b { min-height: var(--control-md); }
  .nb-more__b { width: var(--control-md); height: var(--control-md); }
}
.nb-fs { margin: 0; padding: 0; border: 0; min-width: 0; }
.nb-fs legend { padding: 0; margin-bottom: var(--space-2); }
.nb-fs__one { display: flex; flex-direction: column; gap: 2px; }
.nb-fs__l { font-size: 14px; line-height: 20px; color: var(--ink); }
.nb-fs .nb-part { background: var(--surface); }
.nb-fs .p-hint { margin-top: var(--space-2); }
.nb-marked, .p-block:target { scroll-margin: var(--space-20) 0; }
.p-prose > .nb-marked { position: relative; }
.nb-rich { display: flex; flex-direction: column; gap: var(--space-2); }
.nb-rich__p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.nb-rich__code { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--code-bg); color: var(--code-ink); font: 400 12.5px/20px var(--font-mono); white-space: pre; overflow-x: auto; }
.nb-ic { font-family: var(--font-mono); font-size: 0.86em; padding: 1px 4px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.nb-rd__top { position: sticky; top: 0; z-index: 2; display: flex; flex-direction: column; margin: 0 calc(var(--space-2) * -1); padding: 0 var(--space-2) var(--space-3); background: var(--surface); }
@container nb (max-width: 959px) {
  .nb-rd__top { position: static; }
  .nb-pane--studio > .nb-ph { display: none; }
  .nb-pane--studio > .nb-pb { padding-top: var(--space-4); }
}
.nb-pane--studio.is-viewing > .nb-ph { display: none; }
.nb-pane--studio.is-viewing .nb-pb { padding-top: var(--space-3); }
.nb-s.is-processing .nb-s__n { background: var(--caution-wash); color: var(--caution); }
@media (max-width: 959px) {
  .nb-say { bottom: calc(var(--space-24) + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 960px) and (max-width: 1279px) {
  .nb-grid { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(250px, 290px); }
}
.p-block[tabindex="-1"]:focus { outline: none; }
.nb-map .mindmap-node :is(rect, path, circle, polygon) { fill: var(--accent-wash) !important; stroke: none !important; }
.nb-map .mindmap-node.section-root :is(rect, path, circle, polygon) { fill: var(--accent-fill) !important; }
.nb-map .mindmap-node :is(span, p) { color: var(--ink) !important; }
.nb-map .mindmap-node text { fill: var(--ink) !important; }
.nb-map .mindmap-node.section-root :is(span, p) { color: var(--on-accent) !important; font-weight: 500; }
.nb-map .mindmap-node.section-root text { fill: var(--on-accent) !important; }
.nb-map :is(.edgePaths path, .mindmap-node line) { stroke: var(--border-strong) !important; }
@media (max-width: 639px) {
  .nb-pl { margin: 0; padding: var(--space-3); border-radius: var(--radius-md); }
}

.nbsk { --nbsk-bg: var(--surface); display: flex; flex-direction: column; gap: var(--space-3); text-align: left; animation: nbsk-in var(--duration-base) var(--ease-out) both; }
.nbsk.is-detail { animation-name: nbsk-on; }
@keyframes nbsk-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes nbsk-on { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.nbsk__head { display: flex; flex-direction: column; gap: var(--space-1); }
.nbsk__t, .nbsk-d__t { margin: 0; font-size: 17px; line-height: 24px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); outline: none; }
.nbsk__s, .nbsk-d__s { margin: 0; max-width: 60ch; font-size: 13.5px; line-height: 20px; color: var(--ink-muted); }
.nbsk__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nbsk-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; min-height: 44px; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border: 0; border-radius: var(--radius-md); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.nbsk-opt:hover { background: color-mix(in srgb, var(--ink) 5%, var(--surface)); }
.nbsk-opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nbsk-opt.is-current { background: var(--accent-wash); }
.nbsk-opt__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.nbsk-opt__name { font-size: 14.5px; line-height: 21px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); }
.nbsk-opt__s { font-size: 13px; line-height: 19px; color: var(--ink-muted); }
.nbsk-tag { padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink-faint); font-size: 12px; line-height: 20px; white-space: nowrap; }
.nbsk-tag.is-on { background: var(--surface); color: var(--accent); }
.nbsk-makes { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.nbsk-make { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink-muted); font-size: 12px; line-height: 16px; white-space: nowrap; }
.nbsk-make__g { color: var(--accent); font-size: 11.5px; }
.nbsk-make__s { color: var(--ink-faint); }
.nbsk-opt.is-current .nbsk-make { background: var(--surface); }
.nbsk__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.nbsk__own { font-size: 13px; line-height: 18px; color: var(--ink-faint); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
.nbsk__own:hover { color: var(--accent); }
.nbsk-d__h { display: flex; flex-direction: column; gap: var(--space-1); }
.nbsk-d__t { font-size: 20px; line-height: 28px; }
.nbsk-d__m { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--ink-faint); }
.nbsk-how { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-raised); }
.nbsk-how__k { font-size: 12.5px; line-height: 18px; color: var(--ink-faint); }
.nbsk-how__t { margin: 0; font-size: 13.5px; line-height: 20px; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.nbsk-items { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; border: 0; min-width: 0; }
.nbsk-items__l { margin: 0 0 var(--space-1); padding: 0; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
.nbsk-item { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.nbsk-item:hover { background: color-mix(in srgb, var(--ink) 4%, var(--surface)); }
.nbsk-item:has(input:disabled) { cursor: default; }
.nbsk-item input { flex: none; margin: 0; }
.nbsk-item__g { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink-faint); font-size: 13px; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.nbsk-item:has(input:checked) .nbsk-item__g { background: var(--accent-wash); color: var(--accent); }
.nbsk-item__b { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nbsk-item__t { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); }
.nbsk-item__st { font-weight: 400; color: var(--ink-faint); }
.nbsk-item__s { font-size: 12.5px; line-height: 18px; color: var(--accent); }
.nbsk-item.is-making .nbsk-item__s { color: var(--caution); }
.nbsk-item:has(input:disabled) .nbsk-item__t { color: var(--ink-faint); }
.nbsk-use { margin: 0; font-size: 13px; line-height: 19px; color: var(--ink-faint); }
.nbsk-use.is-bad { color: var(--caution); }
.nbsk-foot { position: sticky; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: var(--space-2); margin: 0 calc(var(--space-2) * -1); padding: var(--space-3) var(--space-2); background: var(--nbsk-bg); }
.nbsk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.nbsk-go { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-empty--start { align-items: stretch; padding: var(--space-6) 0 var(--space-4); }
.nb-empty--start .nbsk { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); }
.nb-empty--start .nbsk-opt:hover { background: var(--surface-raised); }
.nb-empty__or { align-self: center; text-align: center; }
.nb-skills { display: flex; flex-direction: column; padding: 0 var(--space-2) var(--space-2); }
.nb-skills[hidden] { display: none; }
.nbsk-row { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-2); padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-raised); }
.nbsk-row.is-on { background: var(--accent-wash); }
.nbsk-row__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nbsk-row__k { font-size: 12px; line-height: 16px; color: var(--ink-faint); }
.nbsk-row__t { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); overflow-wrap: anywhere; }
.nbsk-row__s { font-size: 12.5px; line-height: 18px; color: var(--ink-muted); overflow-wrap: anywhere; }
.nbsk-row__go { flex: none; }
.nb--panel .nb-empty--start .nbsk { padding: var(--space-4); }
.nb--panel .nb-skills .nbsk { --nbsk-bg: var(--surface-raised); }
.nbl__sk { margin-left: auto; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ink-faint); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
.nbl__sk:hover { color: var(--accent); }
@container nb (max-width: 959px) {
  .nb-empty--start { padding-top: var(--space-3); }
  .nb-empty--start .nbsk { padding: var(--space-4) var(--space-3); }
  .nbsk-opt { padding-left: var(--space-3); }
  .nbsk-acts .p-btn--primary { flex: 1 1 100%; justify-content: center; }
  .nbsk-opt .nbsk-make__s { display: none; }
  .nbsk-foot { padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); }
  .nb-pane--ask:has(.nbsk.is-detail) .nb-compose { display: none; }
}

.nbs-head { margin-top: var(--space-6); align-items: flex-start; }
.nbs-head .display-2 { margin: 0; }
.nbs-lede { max-width: 620px; margin: var(--space-3) 0 0; color: var(--ink-faint); }
.nbs-sec { margin-top: var(--space-12); }
.nbs-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-3); font-size: 17px; line-height: 24px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); }
.nbs-hs { font-size: 14px; font-weight: 400; color: var(--ink-faint); }
.nbs-row { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); transition: background-color var(--duration-fast) var(--ease-out); }
.nbs-row:hover { background: var(--surface); }
.nbs-row__b { flex: 1 1 auto; min-width: 0; }
.nbs-row__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.nbs-row__name { font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
a.nbs-row__name:hover { color: var(--accent); }
.nbs-tag { padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink-faint); font-size: 12px; line-height: 20px; }
.nbs-v { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.nbs-row__s { margin: var(--space-1) 0 var(--space-2); max-width: 62ch; font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.nbs-row__m { margin: var(--space-2) 0 0; font-size: 12.5px; line-height: 18px; color: var(--ink-faint); }
.nbs-row .nbsk-make { background: var(--surface); }
.nbs-row:hover .nbsk-make { background: var(--surface-raised); }
.nbs-empty { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface); }
.nbs-empty__t { margin: 0 0 var(--space-1); font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink); }
.nbs-empty .p-note { margin: 0; max-width: 56ch; }
.nbs-err { margin-top: var(--space-4); }
.nbs-form { display: flex; flex-direction: column; gap: var(--space-10); max-width: 680px; margin-top: var(--space-8); }
.nbs-part { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; margin: 0; padding: 0; border: 0; }
.nbs-part__t { margin: 0 0 var(--space-3); padding: 0; font-size: 17px; line-height: 24px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); }
.nbs-part__h { margin: 0; }
.nbs-narrow { max-width: 300px; }
.nbs-ins { min-height: 120px; }
.nbs-choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nbs-choice { flex: 1 1 220px; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.nbs-choice:hover { background: color-mix(in srgb, var(--ink) 4%, var(--surface)); }
.nbs-choice:has(input:checked) { background: var(--accent-wash); }
.nbs-choice input { flex: none; margin: 2px 0 0; }
.nbs-choice__b, .nbs-format__b { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nbs-choice__t, .nbs-format__t { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.nbs-choice__s, .nbs-format__s { font-size: 12.5px; line-height: 18px; color: var(--ink-faint); }
.nbs-kinds { display: flex; flex-direction: column; gap: var(--space-1); }
.nbs-kind { border-radius: var(--radius-md); background: var(--surface); }
.nbs-kind__on { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: 0 var(--space-4); cursor: pointer; }
.nbs-kind__on input { flex: none; margin: 0; }
.nbs-kind__g { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink-faint); font-size: 13px; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.nbs-kind__t { font-size: 14.5px; line-height: 20px; font-weight: 500; color: var(--ink-muted); transition: color var(--duration-fast) var(--ease-out); }
.nbs-kind:has(.nbs-kind__on input:checked) .nbs-kind__g { background: var(--accent-wash); color: var(--accent); }
.nbs-kind:has(.nbs-kind__on input:checked) .nbs-kind__t { color: var(--ink); }
.nbs-kind__opts { display: none; }
.nbs-kind:has(.nbs-kind__on input:checked) .nbs-kind__opts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4); padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + 20px + var(--space-3)); animation: p-arrive var(--duration-base) var(--ease-out); }
.nbs-formats { display: flex; flex-wrap: wrap; gap: var(--space-2); width: 100%; }
.nbs-format { flex: 1 1 180px; display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-raised); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.nbs-format:has(input:checked) { background: var(--accent-wash); }
.nbs-format input { flex: none; margin: 2px 0 0; }
.nbs-count { width: 150px; }
.nbs-more { display: flex; flex-direction: column; gap: var(--space-3); }
.nbs-more__s { align-self: flex-start; min-height: 32px; display: inline-flex; align-items: center; padding: 0 var(--space-2); margin-left: calc(var(--space-2) * -1); border-radius: var(--radius-pill); color: var(--ink-muted); font-size: 13.5px; cursor: pointer; list-style: none; transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
.nbs-more__s::-webkit-details-marker { display: none; }
.nbs-more__s::before { content: "→"; margin-right: var(--space-2); color: var(--ink-faint); transition: transform var(--duration-fast) var(--ease-out); }
.nbs-more[open] > .nbs-more__s::before { transform: rotate(90deg); }
.nbs-more__s:hover { color: var(--ink); background: var(--surface); }
.nbs-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nbs-remove { margin-top: var(--space-8); }
@media (max-width: 639px) {
  .nbs-head { flex-direction: column; gap: var(--space-4); }
  .nbs-row { flex-wrap: wrap; padding: var(--space-3); }
  .nbs-kind:has(.nbs-kind__on input:checked) .nbs-kind__opts { padding-left: var(--space-4); }
  .nbs-count { width: calc(50% - var(--space-2)); }
}

.nb-mode { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-2); padding: 0 var(--space-1); }
.nb-mode__seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-pill); background: var(--surface); }
.nb-mode__b { min-height: calc(var(--control-sm) - 4px); padding: 0 var(--control-sm-pad); border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-faint); font: 500 var(--control-sm-text)/18px var(--font-sans); cursor: pointer; transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
.nb-mode__b:hover { color: var(--ink); }
.nb-mode__b[aria-checked="true"] { background: var(--surface-raised); color: var(--ink); }
.nb-mode__hint { font-size: 12.5px; line-height: 18px; color: var(--ink-faint); }
.nbk .nb-mode__seg { background: var(--ground); }

.nb-a__acts { display: flex; gap: var(--space-2); margin-top: var(--space-1); margin-left: calc(var(--space-2) * -1); opacity: 0.85; }
.nb-a__acts .p-btn { color: var(--ink-faint); }
.nb-a__acts .p-btn:hover { color: var(--ink); }
.nb-a__save:disabled { opacity: 1; color: var(--accent); }
.nb-pickup { position: fixed; z-index: 40; background: var(--surface-float); box-shadow: var(--shadow-overlay); animation: p-arrive var(--duration-fast) var(--ease-out) both; }
.nb-offscreen { position: absolute; left: -9999px; top: 0; width: 600px; }

.nb-sec { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-sm); }
.nb-sec__t { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.nb-sec__n { font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.nb-cov { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-6) 0 0; padding: 0 var(--space-2); }
.nb-cov__n { margin: 0; font-size: 12.5px; line-height: 18px; }
.nb-cov__k { margin: var(--space-2) 0 0; font-size: 12.5px; line-height: 18px; font-weight: 500; color: var(--ink-faint); }
.nb-cov__l { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nb-cov__c { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink-muted); font: 400 13px/18px var(--font-sans); }
.nb-cov__c.is-shaky { background: var(--caution-wash); color: var(--caution); cursor: pointer; transition: filter var(--duration-fast) var(--ease-out); }
.nb-cov__c.is-shaky:hover { filter: brightness(1.06); }

.nb-notes { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-6) 0 0; padding: 0 var(--space-2); }
.nb-notes__l { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nb-notes__l:empty { display: none; }
.nb-notes__e { margin: 0; font-size: 12.5px; line-height: 18px; }
.nb-note { width: 100%; display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); margin: 0 calc(var(--space-3) * -1); border: 0; border-radius: var(--radius-md); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); box-sizing: content-box; }
.nb-note:hover { background: var(--surface); }
.nb-note__t { font-size: 13.5px; line-height: 19px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.nb-note__x { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.nb-note__m { font-size: 12px; line-height: 16px; color: var(--ink-faint); }
.nb-note-f { display: flex; flex-direction: column; gap: var(--space-2); }
.nb-note-f[hidden] { display: none; }
.nb-note-f .p-input { min-height: var(--control-sm); }
.nb-note-f__x { min-height: 120px; resize: vertical; font: 400 14px/21px var(--font-sans); }
.nb-note-f__row { display: flex; align-items: center; gap: var(--space-2); }
.nb-note-f__say { flex: 1 1 auto; font-size: 12.5px; line-height: 18px; color: var(--ink-faint); }
.nb-note-f__say.is-bad { color: var(--danger); }
.nb-note-f__hint { margin: 0; font-size: 12.5px; line-height: 18px; }
.nb-note-f--edit { margin-top: var(--space-2); }
.nb-note-v { margin-top: var(--space-3); }
.nb-note-v__a { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-5); }
.nb-note-v__s { font-size: 12.5px; line-height: 18px; color: var(--accent); }
.nb-note-v__del.is-armed { color: var(--danger); }

.nb-find { display: flex; flex-direction: column; gap: var(--space-3); }
.nb-find__row { display: flex; gap: var(--space-2); }
.nb-find__q { flex: 1 1 auto; min-width: 0; min-height: var(--control-sm); }
.nb-find .nb-sugg { justify-content: flex-start; margin-top: 0; }
.nb-find .nb-sugg__b { min-height: var(--control-sm); padding: 0 var(--control-sm-pad); font-size: var(--control-sm-text); }
.nb-found { display: flex; flex-direction: column; gap: var(--space-2); }
.nb-found:empty { display: none; }
.nb-found__l { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nb-found__f { display: flex; align-items: center; gap: var(--space-2); }
.nb-fd__l { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-md); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.nb-fd__l:hover { background: var(--surface); }
.nb-fd.is-added .nb-fd__l { cursor: default; }
.nb-fd.is-added .nb-fd__l:hover { background: none; }
.nb-fd__x { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent-fill); }
.nb-fd__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nb-fd__t { font-size: 13.5px; line-height: 19px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.nb-fd.is-added .nb-fd__t { color: var(--ink-faint); }
.nb-fd__m { font-size: 12px; line-height: 16px; color: var(--ink-faint); overflow-wrap: anywhere; }
.nb-fd__k { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink-muted); font-weight: 500; }
.nb-fd__k.is-peano { background: var(--accent-wash); color: var(--accent); }
.nb-fd__r { font-size: 12.5px; line-height: 18px; color: var(--ink-muted); }

@media (prefers-reduced-motion: reduce) {
  .nb-pickup { animation: none; }
}
.nb-vid { display: flex; flex-direction: column; gap: var(--space-3); }
.p-pl.p-vp.nb-vp { margin: 0; background: var(--surface-raised); }
.nb-vid__stage { cursor: pointer; }
.nb-vid__stage:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nb-vs {
  position: absolute;
  inset: 0;
  display: flex;
  background: var(--surface-raised);
  opacity: 0;
  visibility: hidden;
}
.nb-vs.is-on { opacity: 1; visibility: inherit; }
.nb-vs__in {
  --vs-fit: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "k" "t" "p" "s";
  padding: 5.6cqw 7cqw 4.4cqw;
  overflow: hidden;
  color: var(--ink);
  text-align: left;
}
.nb-vs__in.has-art { grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); grid-template-areas: "k art" "t art" "p art" "s art"; column-gap: 4.4cqw; }
.nb-vs__in.is-first:not(.has-art) { grid-template-rows: 1fr auto auto auto 1.3fr; grid-template-areas: "." "k" "t" "p" "s"; }
.nb-vs__k { grid-area: k; margin-bottom: calc(1.4cqw * var(--vs-fit)); font-size: calc(1.5cqw * var(--vs-fit)); line-height: 1.3; font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nb-vs__t { grid-area: t; max-width: 24ch; margin: 0 0 calc(2.8cqw * var(--vs-fit)); font-family: var(--font-display); font-size: calc(4.2cqw * var(--vs-fit)); line-height: 1.12; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
.nb-vs__pts { grid-area: p; align-self: start; display: flex; flex-direction: column; gap: calc(1.45cqw * var(--vs-fit)); max-width: 54ch; margin: 0; padding: 0; list-style: none; }
.nb-vs__pt { position: relative; padding-left: 2.5cqw; font-size: calc(2.55cqw * var(--vs-fit)); line-height: 1.38; color: var(--ink-muted); text-wrap: pretty; overflow-wrap: anywhere; }
.nb-vs__pt::before { content: ""; position: absolute; left: 0.2cqw; top: calc(0.69em - 0.42cqw); width: 0.84cqw; height: 0.84cqw; border-radius: var(--radius-pill); background: var(--accent); }
.nb-vs__pt code { padding: 0.06em 0.32em; border-radius: 0.4cqw; background: var(--surface); color: var(--ink); font-family: var(--font-mono); font-size: 0.86em; }
.nb-vs__in.has-art .nb-vs__t { font-size: calc(3.6cqw * var(--vs-fit)); }
.nb-vs__in.has-art .nb-vs__pt { font-size: calc(2.2cqw * var(--vs-fit)); }
.nb-vs__in.is-first .nb-vs__t { max-width: 18ch; margin-bottom: calc(2.2cqw * var(--vs-fit)); font-size: calc(5.6cqw * var(--vs-fit)); line-height: 1.06; letter-spacing: -0.025em; }
.nb-vs__in.is-first .nb-vs__pt { padding-left: 0; font-size: calc(2.3cqw * var(--vs-fit)); color: var(--ink-faint); }
.nb-vs__in.is-first .nb-vs__pt::before { display: none; }
.nb-vs__art { grid-area: art; align-self: center; justify-self: stretch; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; max-height: 100%; margin: 0; }
.nb-vs__fig { padding: 2cqw; border-radius: 1.4cqw; background: var(--surface); }
.nb-vs__fig svg { display: block; width: 100%; height: auto; max-width: 100% !important; max-height: 36cqw; }
.nb-vs__code { width: 100%; margin: 0; padding: 2.2cqw 2.6cqw; border-radius: 1.2cqw; background: var(--code-bg); color: var(--code-ink); font-family: var(--font-mono); font-size: calc(1.7cqw * var(--vs-fit)); line-height: 1.6; white-space: pre; tab-size: 4; overflow: hidden; }
.nb-vs__src { grid-area: s; align-self: end; display: flex; align-items: center; gap: 0.5cqw; margin-top: 2cqw; font-size: 1.35cqw; line-height: 1.3; color: var(--ink-faint); }
.nb-vs__src .nb-cite { margin: 0; font-size: 1.15cqw; pointer-events: none; }
.nb-vs__srcl { margin-right: 0.3cqw; }
.nb-pl, .nb-vp { container-type: inline-size; }
@container (max-width: 460px) {
  .p-pl__ctl > .nb-join__go, .p-pl__ctl > .nb-vid__full { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}
.nb-vid__stage .p-vp__big { inset: 0; width: clamp(44px, 11cqw, 72px); height: clamp(44px, 11cqw, 72px); margin: auto; font-size: clamp(16px, 3.4cqw, 24px); }
.nb-vid[data-started] .nb-vid__stage .p-vp__big { opacity: 0; transform: scale(0.9); pointer-events: none; }
@container (max-width: 440px) {
  .nb-vs__in { padding: 5cqw 6cqw 4cqw; }
  .nb-vs__k { font-size: calc(2.8cqw * var(--vs-fit)); }
  .nb-vs__t, .nb-vs__in.has-art .nb-vs__t { font-size: calc(5.6cqw * var(--vs-fit)); }
  .nb-vs__in.is-first .nb-vs__t { font-size: calc(7.2cqw * var(--vs-fit)); }
  .nb-vs__pt, .nb-vs__in.has-art .nb-vs__pt, .nb-vs__in.is-first .nb-vs__pt { font-size: calc(3.9cqw * var(--vs-fit)); }
  .nb-vs__pt { padding-left: 3.6cqw; }
  .nb-vs__pt::before { top: calc(0.69em - 0.7cqw); width: 1.4cqw; height: 1.4cqw; }
  .nb-vs__in.has-art { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "k" "t" "art"; }
  .nb-vs__in.has-art .nb-vs__t { margin-bottom: 2cqw; }
  .nb-vs__in.has-art .nb-vs__pts, .nb-vs__src { display: none; }
  .nb-vs__art { justify-self: center; max-width: 100%; }
  .nb-vs__code { font-size: calc(2.6cqw * var(--vs-fit)); }
  .nb-vs__fig svg { max-height: 26cqw; }
}
.nb-vid__none { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: var(--space-6); color: var(--ink-faint); font-size: 14px; text-align: center; }
.nb-vid__deck { gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-3); }
.nb-vid__deck .p-pl__line { margin: 0 0 var(--space-1); }
.nb-vid__full { grid-column: 1; grid-row: 1; justify-self: start; }
.nb-vid__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.nb-vid__strip { display: flex; gap: 2px; min-width: 0; max-width: 100%; padding: 2px; overflow-x: auto; scrollbar-width: none; }
.nb-vid__strip::-webkit-scrollbar { display: none; }
.nb-vid__dot {
  flex: none;
  min-width: 30px;
  height: 30px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-faint);
  font: 500 13px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.nb-vid__dot:hover { background: var(--surface); color: var(--ink); }
.nb-vid__dot[aria-current] { background: var(--accent-wash); color: var(--accent); }
.nb-vid__dot:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.nb-vid__from { display: flex; align-items: center; gap: 2px; min-height: 30px; font-size: 13px; line-height: 18px; color: var(--ink-faint); }
.nb-vid__froml { margin-right: var(--space-1); }
.nb-vid__from .nb-cite { font-size: 15px; }
.nb-vid__file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: 32px; }
.nb-vid__file .p-note { margin: 0; font-size: 13px; line-height: 18px; }
.nb-vid__file .nb-wait { font-size: 13px; line-height: 18px; }
.sc-stage { isolation: isolate; }
.sc-root, .dk {
  --sc-ink: var(--ink);
  --sc-lift: color-mix(in srgb, var(--host-line) 16%, transparent);
  --k-line: var(--ink-faint);
  --k-edge: color-mix(in oklab, var(--ink) 34%, var(--surface-raised));
  --k-text: var(--ink);
  --k-mute: color-mix(in oklab, var(--ink) 34%, var(--surface-raised));
  --k-node: color-mix(in oklab, var(--ink) 7%, var(--surface-raised));
  --k-fill: var(--k-node);
  --k-fill-accent: color-mix(in oklab, var(--accent-fill) 16%, var(--k-node));
  --k-fill-store: color-mix(in oklab, var(--board-blue) 16%, var(--k-node));
  --k-fill-decision: color-mix(in oklab, var(--board-amber) 18%, var(--k-node));
  --k-fill-person: color-mix(in oklab, var(--board-rose) 16%, var(--k-node));
  --k-fill-document: var(--k-node);
  --k-ear: color-mix(in oklab, var(--ink) 10%, var(--surface));
  --k-glyph: var(--ink-faint);
  --k-pill: var(--surface);
  --k-pill-ink: var(--ink-muted);
  --k-pill-edge: color-mix(in oklab, var(--ink) 18%, var(--surface));
  --k-token: var(--accent-wash);
  --k-token-ink: var(--accent);
  --k-token-edge: transparent;
  --k-shade: transparent;
  --k-dot: var(--accent);
  --k-tick: var(--accent);
  --k-quiet-fill: color-mix(in oklab, var(--accent-fill) 28%, var(--surface-raised));
  --k-panel-edge: color-mix(in oklab, var(--ink) 14%, var(--surface-raised));
  --k-panel-a: var(--surface);
  --k-panel-b: color-mix(in oklab, var(--board-blue) 12%, var(--surface));
  --k-key: var(--code-var);
  --k-field: var(--k-pill);
  --k-field-ink: var(--k-pill-ink);
  --k-field-edge: var(--k-pill-edge);
  --k-spot: color-mix(in oklab, var(--accent-fill) 24%, var(--surface-raised));
}
.sc-root {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--surface-raised);
  color: var(--sc-ink);
  font-family: var(--font-sans);
  font-size: 2.8cqw;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.011em;
  text-align: left;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.sc-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 8%; background: color-mix(in oklab, var(--surface-raised) 60%, var(--ground)); }
.sc-look-cartoon > .sc-root {
  --k-line: var(--ink-muted);
  --k-edge: var(--host-line);
  --k-text: var(--host-line);
  --k-mute: var(--ink-muted);
  --k-fill: color-mix(in oklab, var(--host-white) 90%, var(--host-a));
  --k-fill-accent: color-mix(in oklab, var(--host-a) 82%, var(--host-white));
  --k-fill-store: color-mix(in oklab, var(--board-blue) 46%, var(--host-white));
  --k-fill-decision: color-mix(in oklab, var(--host-b) 82%, var(--host-white));
  --k-fill-person: color-mix(in oklab, var(--host-cheek) 66%, var(--host-white));
  --k-fill-document: var(--host-white);
  --k-ear: color-mix(in oklab, var(--host-line) 16%, var(--host-white));
  --k-glyph: var(--host-line);
  --k-pill: var(--surface-raised);
  --k-pill-ink: var(--ink-muted);
  --k-pill-edge: var(--ink-faint);
  --k-token: var(--host-a);
  --k-token-ink: var(--host-line);
  --k-token-edge: var(--host-line);
  --k-shade: color-mix(in oklab, var(--host-line) 36%, var(--ground));
  --k-dot: var(--host-a);
  --k-tick: var(--host-line);
  --k-quiet-fill: color-mix(in oklab, var(--host-a) 34%, var(--surface-raised));
  --k-panel-a: color-mix(in oklab, var(--host-a) 14%, var(--surface));
  --k-panel-b: color-mix(in oklab, var(--host-b) 16%, var(--surface));
  --k-field: color-mix(in oklab, var(--ink) 9%, var(--surface-raised));
  --k-field-ink: var(--ink);
  --k-field-edge: transparent;
}
[data-theme="mint"] .sc-look-clean > .sc-root, [data-theme="mint"] .dk { --k-node: var(--surface); --k-fill-accent: var(--accent-wash); }
[data-theme="mint"] [data-theme="ink"] .sc-look-clean > .sc-root { --k-node: color-mix(in oklab, var(--ink) 7%, var(--surface-raised)); --k-fill-accent: color-mix(in oklab, var(--accent-fill) 16%, var(--k-node)); }
[data-theme="mint"] .sc-look-cartoon > .sc-root { --k-fill-store: color-mix(in oklab, var(--board-blue) 22%, var(--host-white)); --k-pill: var(--host-white); --k-pill-edge: var(--host-line); }
[data-theme="mint"] [data-theme="ink"] .sc-look-cartoon > .sc-root { --k-fill-store: color-mix(in oklab, var(--board-blue) 46%, var(--host-white)); --k-pill: var(--surface-raised); --k-pill-edge: var(--ink-faint); }
.sc-look-whiteboard > .sc-root {
  --sc-ink: var(--board-ink);
  --k-line: var(--board-ink);
  --k-edge: var(--board-ink);
  --k-text: var(--board-ink);
  --k-mute: var(--board-ink);
  --k-fill: color-mix(in oklab, var(--board-ink) 5%, var(--surface));
  --k-fill-accent: color-mix(in oklab, var(--accent-fill) 22%, var(--surface));
  --k-fill-store: color-mix(in oklab, var(--board-blue) 22%, var(--surface));
  --k-fill-decision: color-mix(in oklab, var(--board-amber) 24%, var(--surface));
  --k-fill-person: color-mix(in oklab, var(--board-rose) 22%, var(--surface));
  --k-fill-document: color-mix(in oklab, var(--board-ink) 5%, var(--surface));
  --k-pill: var(--surface);
  --k-pill-ink: var(--board-ink);
  --k-pill-edge: transparent;
  --k-token: transparent;
  --k-token-ink: var(--accent);
  --k-quiet: color-mix(in oklab, var(--board-ink) 45%, var(--surface));
  --k-panel-a: transparent;
  --k-panel-b: transparent;
  --k-key: var(--board-ink);
  background-color: var(--surface);
  background-image: var(--board-dots);
  background-size: 2.4cqw 2.4cqw;
}
.sc-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sc-scene { position: absolute; inset: 0; display: none; }
.sc-measuring > .sc-scene { display: block; visibility: hidden; }
.sc-measuring > .sc-scene, .sc-measuring .sc-html * { transform: none !important; }
.sc-layer, .sc-hosts { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sc-html { position: absolute; inset: 0; }
.sc-box { position: absolute; }
.sc-c { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sc-pin { position: absolute; width: 0; height: 0; display: flex; align-items: center; justify-content: center; }
.sc-w { display: inline-block; }
.sc-spot { fill: none; stroke: var(--accent); stroke-width: var(--k-ring); stroke-linejoin: round; opacity: 0; }
[data-theme="mint"] .sc-spot { fill: var(--k-spot); stroke: var(--k-spot); stroke-width: var(--k-rim); }
[data-theme="mint"] [data-theme="ink"] .sc-spot { fill: none; stroke: var(--accent); stroke-width: var(--k-ring); }
.sc-nib { fill: var(--accent); opacity: 0; }
.sc-eraser { position: absolute; top: -12%; left: 0; width: 7cqw; height: 124%; border-radius: 2.4cqw; background: color-mix(in oklab, var(--board-ink) 9%, var(--surface)); opacity: 0; }
.sc-eraser::after { content: ""; position: absolute; inset: 0 1.4cqw; border-radius: 1.6cqw; background: color-mix(in oklab, var(--host-b-deep) 45%, var(--surface)); }
.k-wire, .k-head, .k-ink, .k-mark, .k-data, .k-rule, .k-detail, .k-tick, .k-cross, .k-halo { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.k-wire, .k-head { stroke: var(--k-line); }
.k-ink { stroke: var(--sc-ink); }
.k-again { opacity: 0.55; }
.k-ink--accent, .k-mark, .k-data, .k-halo { stroke: var(--accent); }
.k-rule { stroke: var(--k-mute); }
.k-ring, .k-halo { opacity: 0; }
.k-body, .k-bar { stroke: var(--k-edge); stroke-linejoin: round; }
.k-detail { stroke: var(--k-edge); }
.k-ear { fill: var(--k-ear); stroke: none; }
.k-glyph { fill: var(--k-glyph); }
.k-lift { fill: var(--k-shade); }
.k-wash { opacity: 0; }
.k-role-box { fill: var(--k-fill); }
.k-role-pill, .k-role-disc { fill: var(--k-fill-accent); }
.k-role-store { fill: var(--k-fill-store); }
.k-role-decision { fill: var(--k-fill-decision); }
.k-role-person { fill: var(--k-fill-person); }
.k-role-document { fill: var(--k-fill-document); }
.k-paper { fill: var(--surface); opacity: 0; }
.k-dot, .k-token { fill: var(--k-dot); stroke: var(--k-edge); }
.k-tick { stroke: var(--accent); }
.sc-recap__svg .k-tick { stroke: var(--k-tick); }
.k-cross { stroke: var(--danger); }
.k-bar { fill: var(--accent-fill); }
.sc-look-cartoon .k-bar { fill: var(--k-fill-accent); }
.k-bar.is-quiet { fill: var(--k-quiet-fill); }
.k-hatch path { fill: none; stroke: var(--accent); opacity: 0.75; }
.k-hatch.is-quiet path { stroke: var(--k-quiet); }
.k-label { color: var(--k-text); font-weight: 500; line-height: 1.2; white-space: nowrap; }
.k-label--num { font-weight: 600; font-variant-numeric: tabular-nums; }
.k-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--k-chip-y) var(--k-chip-x);
  border-radius: var(--radius-pill);
  background: var(--k-pill);
  box-shadow: inset 0 0 0 var(--k-wf) var(--k-pill-edge);
  color: var(--k-pill-ink);
  font-family: var(--font-sans);
  font-size: var(--k-chip-size);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.011em;
  white-space: nowrap;
}
.k-chip.is-fixed { width: 100%; height: 100%; padding: 0; }
.k-chip--token { background: var(--k-token); box-shadow: inset 0 0 0 var(--k-wf) var(--k-token-edge); color: var(--k-token-ink); }
.k-chip--field { background: var(--k-field); box-shadow: inset 0 0 0 var(--k-wf) var(--k-field-edge); color: var(--k-field-ink); font-family: var(--font-mono); font-weight: 400; letter-spacing: 0; }
.k-panel { border-radius: var(--k-rl); }
.sc-look-cartoon .k-panel { box-shadow: 0 0 0 var(--k-wl) var(--k-edge), 0 var(--k-lift) 0 var(--k-wl) var(--k-shade); }
.sc-look-clean .k-panel { box-shadow: 0 0 0 var(--k-wf) var(--k-panel-edge); }
.sc-hook__k { margin-bottom: 1.6cqw; }
.sc-hook__h { max-height: 20.2cqw; font-size: calc(6.4cqw * var(--fit, 1)); font-weight: 600; line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; transform-origin: 0 50%; }
.sc-hook__h .sc-w { transform-origin: 50% 85%; }
.sc-term__t { max-height: 15.2cqw; font-size: calc(7cqw * var(--fit, 1)); font-weight: 600; line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; transform-origin: 0 50%; }
.sc-term__w { display: inline-block; white-space: nowrap; }
.sc-term__l { display: inline-block; transform-origin: 50% 80%; }
.sc-term__m { max-width: 34ch; margin-top: 3.6cqw; color: var(--ink-muted); font-size: 3cqw; line-height: 1.3; text-wrap: pretty; transform-origin: 0 50%; }
.sc-term__a { margin-top: 2cqw; }
.sc-num__row { display: flex; align-items: baseline; gap: 1.4cqw; transform-origin: 0 85%; }
.sc-num__v { font-size: 14cqw; font-weight: 600; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sc-num__u { color: var(--ink-muted); font-size: 4cqw; font-weight: 500; }
.sc-num__l { max-width: 32ch; margin-top: 2.4cqw; color: var(--ink-muted); font-size: 3cqw; line-height: 1.3; text-wrap: pretty; transform-origin: 0 50%; }
.sc-chart__v { font-size: 2.6cqw; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-chart__v.is-quiet { color: var(--ink-faint); }
.sc-chart__l { justify-content: flex-start; }
.sc-chart__lt { color: var(--ink-muted); font-size: 2.4cqw; line-height: 1.2; }
.sc-quote__m { height: 6.4cqw; color: var(--accent); font-size: 10cqw; font-weight: 600; line-height: 1; transform-origin: 0 50%; }
.sc-quote__t { max-height: 28cqw; font-size: calc(3.6cqw * var(--fit, 1)); font-weight: 500; line-height: 1.3; text-wrap: pretty; transform-origin: 0 50%; }
.sc-quote__t .sc-w { position: relative; z-index: 0; }
.sc-quote__hl { position: absolute; z-index: -1; inset: 0.1em -0.14em 0 -0.14em; border-radius: var(--k-rs); background: var(--accent-mark); transform-origin: 0 50%; }
.sc-look-whiteboard .sc-quote__hl { border-radius: 0; clip-path: polygon(0 14%, 5% 0, 31% 7%, 63% 0, 95% 9%, 100% 32%, 97% 68%, 100% 100%, 69% 92%, 37% 100%, 6% 94%, 0 70%); }
.sc-quote__c { margin-top: 2.4cqw; }
.sc-checks { display: flex; flex-direction: column; gap: 2.4cqw; }
.sc-recap__r { display: flex; align-items: center; gap: 1.8cqw; }
.sc-recap__b { flex: none; display: block; }
.sc-recap__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sc-recap__t { font-size: 3cqw; font-weight: 500; line-height: 1.25; transform-origin: 0 50%; }
.sc-ill__card { position: absolute; background: var(--surface); transform-origin: 50% 0; }
.sc-ill__pane { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.sc-ill__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sc-ill__tape { position: absolute; top: -1cqw; width: 9cqw; height: 2.6cqw; background: color-mix(in srgb, var(--surface-float) 70%, transparent); }
.sc-ill__tape--l { left: -2.6cqw; transform: rotate(-34deg); }
.sc-ill__tape--r { right: -2.6cqw; transform: rotate(34deg); }
.sc-ill__say { display: flex; align-items: center; justify-content: center; height: 100%; padding: 4cqw; font-size: 3.6cqw; font-weight: 500; line-height: 1.3; text-align: center; text-wrap: balance; }
.sc-ill__cap { color: var(--ink-muted); font-size: 2.8cqw; line-height: 1.3; transform-origin: 0 50%; }
.sc-ill__art { position: absolute; }
.sc-ill__art > .sc-ill__img { object-fit: contain; }
.sc-ill__cap--art { text-align: center; text-wrap: balance; transform-origin: 50% 50%; }
.sc-cmp { display: flex; align-items: center; }
.sc-cmp__g { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; width: 100%; max-height: 100%; }
.sc-cmp__col { display: flex; flex-direction: column; gap: calc(2.2cqw * var(--fit, 1)); padding: var(--k-panel-y) var(--k-panel-x); transform-origin: 50% 100%; }
.sc-cmp__col--left { background: var(--k-panel-a); }
.sc-cmp__col--right { background: var(--k-panel-b); }
.sc-cmp__t { font-size: calc(3cqw * var(--fit, 1)); font-weight: 600; line-height: 1.2; transform-origin: 0 50%; }
.sc-cmp__i { display: flex; align-items: center; justify-content: space-between; gap: 1.2cqw; font-size: calc(2.6cqw * var(--fit, 1)); line-height: 1.25; transform-origin: 0 50%; }
.sc-cmp__m { flex: none; overflow: visible; }
.sc-cmp__v { font-size: 2.8cqw; }
.sc-step { justify-content: flex-start; gap: var(--k-inner); }
.sc-step.is-up { justify-content: flex-end; }
.sc-step__l { font-weight: 500; line-height: 1.2; white-space: nowrap; }
.sc-step__d { color: var(--ink-muted); line-height: 1.2; white-space: nowrap; }
.sc-tl__w { justify-content: flex-end; }
.sc-tl__x, .sc-tl__b { justify-content: flex-start; }
.sc-tl__b { gap: var(--k-inner); }
.sc-tl__b.is-up { justify-content: flex-end; }
.sc-tl__wl { color: var(--accent); font-weight: 600; line-height: 1.2; white-space: nowrap; }
.sc-tl__xl { line-height: 1.2; white-space: nowrap; }
.sc-listing { background: var(--code-bg); color: var(--code-ink); font-family: var(--font-mono); font-weight: 400; line-height: 1.55; letter-spacing: 0; transform-origin: 30% 30%; }
.sc-look-whiteboard .sc-listing { background: transparent; color: var(--sc-ink); }
.sc-code__ls { position: relative; }
.sc-code__l { position: relative; z-index: 1; height: 1.55em; white-space: pre; tab-size: 4; }
.sc-code__g { display: inline-block; padding-right: 1ch; color: var(--code-gutter); text-align: right; box-sizing: border-box; }
.sc-code__hl { position: absolute; z-index: 0; left: -0.6em; right: -0.6em; top: 0; height: 1.55em; border-radius: var(--k-rs); background: var(--accent-mark); opacity: 0; transform-origin: 0 50%; }
.sc-look-whiteboard .sc-code__hl { border-radius: 0; background: color-mix(in oklab, var(--accent-fill) 34%, transparent); }
.sc-code__note { position: absolute; z-index: 2; opacity: 0; transform-origin: 0 50%; }
.sc-code__w { display: flex; flex-direction: column; align-items: flex-start; gap: 1cqw; }
.sc-code__row { position: relative; isolation: isolate; opacity: 0; transform-origin: 0 50%; }
.sc-code__flash { position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--accent-wash); opacity: 0; }
.sc-code__k { color: var(--k-key); }
.sc-code__eq { opacity: 0.6; white-space: pre; }
.sc-code__val { display: inline-grid; overflow: hidden; }
.sc-code__old, .sc-code__new { grid-area: 1 / 1; font-variant-numeric: tabular-nums; }
.sc-code__res { margin-top: 0.8cqw; font-size: 4cqw; font-weight: 600; font-variant-numeric: tabular-nums; transform-origin: 0 50%; }
.sc-fallback { background: var(--k-panel-a); transform-origin: 50% 50%; }
.sc-fallback__t { font-weight: 600; line-height: 1.2; white-space: nowrap; }
.sc-host { --hb: var(--host-fill); --hd: var(--host-shade); --hx: var(--host-accent); }
.sc-look-whiteboard .sc-host { --hb: color-mix(in oklab, var(--host-fill), var(--host-wash) 45%); --hd: color-mix(in oklab, var(--host-shade), var(--host-wash) 45%); --hx: color-mix(in oklab, var(--host-accent), var(--host-wash) 45%); }
.sc-h-shadow { fill: var(--host-line); opacity: 0.22; }
.sc-h-ghost { fill: none; stroke: var(--host-line); stroke-width: 5.5; stroke-linecap: round; }
.sc-h-body, .sc-h-deep, .sc-h-hand { fill: var(--hb); stroke: var(--host-line); stroke-width: 5.5; stroke-linejoin: round; }
.sc-h-deep { fill: var(--hd); }
.sc-h-hand { stroke-width: 4.5; }
.sc-h-shade { fill: var(--hd); opacity: 0.45; }
.sc-h-leaf { fill: var(--hx); stroke: var(--host-line); stroke-width: 4; stroke-linejoin: round; }
.sc-h-line { fill: none; stroke: var(--host-line); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.sc-h-line--thin, .sc-h-line--brow, .sc-h-mouth { stroke-width: 4.5; }
.sc-h-line--lid { stroke-width: 4; }
.sc-h-line--bar { stroke-width: 7.5; }
.sc-h-line--handle { stroke-width: 6; }
.sc-h-white { fill: var(--host-white); stroke: var(--host-line); stroke-width: 4; }
.sc-h-pupil { fill: var(--host-line); }
.sc-h-glint { fill: var(--host-white); }
.sc-h-cheek { fill: var(--host-blush, var(--host-cheek)); }
.sc-h-mouth { fill: var(--host-mouth); stroke: var(--host-line); stroke-linejoin: round; }
.sc-h-arm-o { fill: none; stroke: var(--host-line); stroke-width: 13; stroke-linecap: round; }
.sc-h-arm-f { fill: none; stroke: var(--hb); stroke-width: 7; stroke-linecap: round; }
.sc-h-finger-o { fill: none; stroke: var(--host-line); stroke-width: 10; stroke-linecap: round; }
.sc-h-finger-f { fill: none; stroke: var(--hb); stroke-width: 4.5; stroke-linecap: round; }
.sc-h-glass { fill: color-mix(in srgb, var(--host-white) 32%, transparent); stroke: var(--host-line); stroke-width: 4.5; }
.sc-h-lens, .sc-h-sign, .sc-h-dot, .sc-h-ask { opacity: 0; }
.sc-h-sign-c { fill: var(--surface-float); stroke: var(--host-line); stroke-width: 4; }
.sc-h-sign-s { fill: var(--sc-lift); }
.sc-h-sign-t { fill: var(--ink); font-family: var(--font-sans); font-size: 26px; font-weight: 600; }
.sc-h-dot { fill: var(--host-white); stroke: var(--host-line); stroke-width: 3; }
.sc-h-ask { fill: var(--sc-ink); font-family: var(--font-sans); font-size: 36px; font-weight: 600; }
.nb-vp.is-full { position: relative; display: block; width: 100vw; height: 100vh; padding: 0; border-radius: 0; background: var(--ground); }
.nb-vp.is-full .nb-vid__stage { position: absolute; inset: 0; width: min(100vw, calc(100vh * 16 / 9)); height: auto; margin: auto; aspect-ratio: 16 / 9; border-radius: 0; }
.nb-vp.is-full .nb-vid__deck {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-12) max(var(--space-8), 4vw) var(--space-4);
  background: linear-gradient(to top, color-mix(in srgb, var(--ground) 94%, transparent) 45%, transparent);
}
.nb-vp.is-full.is-idle { cursor: none; }
.nb-vp.is-full.is-idle .nb-vid__deck { opacity: 0; }
.nb-join__go { grid-column: 1; grid-row: 1; justify-self: start; }
.nb-join__go.is-on { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }
.nb-join { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-2); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.nb-join[hidden] { display: none; }
.nb-join.is-in { animation: p-rise var(--duration-base) var(--ease-out) both; }
.nb-join__h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.nb-join__hl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nb-join__t { margin: 0; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.nb-join__at { font-size: 13px; line-height: 18px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.nb-join__back { flex: none; gap: var(--space-2); }
.nb-join__bg { font-size: 10px; color: var(--accent); }
.nb-join__log { display: flex; flex-direction: column; gap: var(--space-1); }
.nb-join__log:empty { display: none; }
.nb-join__hint, .nb-join__gate { margin: 0; max-width: 56ch; }
.nb-join__q { margin: var(--space-1) 0 var(--space-2); }
.nb-join__l {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 calc(var(--space-3) * -1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: background-color var(--duration-base) var(--ease-out);
  animation: p-arrive var(--duration-base) var(--ease-out) both;
}
.nb-join__l[hidden] { display: none; }
.nb-join__l.is-now { background: var(--accent-wash); }
.nb-join__who { font-size: 13px; line-height: 24px; font-weight: 500; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-join__l.is-now .nb-join__who { color: var(--accent); }
.nb-join__say { min-width: 0; font-size: 15px; line-height: 24px; color: var(--ink); overflow-wrap: anywhere; }
.nb-join__say p { margin: 0; }
.nb-join__say em, .nb-vs em { font-style: normal; color: var(--ink); }
.nb-join__wait { padding: var(--space-2) 0; }
.nb-join__form { padding-top: 0; }
.nb-join__form[hidden] { display: none; }
.nb-join__mic { flex: none; gap: var(--space-2); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.nb-join__dot { font-size: 12px; line-height: 1; color: var(--ink-faint); }
.nb-join__mic.is-on { border-color: var(--caution); background: var(--caution-wash); color: var(--caution); }
.nb-join__mic.is-on .nb-join__dot { color: var(--caution); animation: nb-pulse 1400ms var(--ease-inout) infinite; }
@media (max-width: 559px) {
  .nb-join .nb-compose__box { flex-wrap: wrap; }
  .nb-join__mic { order: 3; flex: 1 1 100%; justify-content: center; min-height: 44px; }
  .nb-vid__deck { padding: var(--space-2) var(--space-3); }
}
@media (pointer: coarse) {
  .nb-vid__dot { min-width: 44px; height: 44px; }
  .nb-join__mic { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-join__l, .nb-join.is-in { transition: none; animation: none; }
  .nb-join__mic.is-on .nb-join__dot { animation: none; }
}

.ve {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-6) calc(112px + env(safe-area-inset-bottom, 0px));
}
.ve-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ve-boot { display: flex; flex-direction: column; gap: var(--space-3); }
.ve-skel { display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); gap: var(--space-6); margin-top: var(--space-6); }
.ve-skel__stage { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: var(--surface); }
.ve-skel__lines { display: flex; flex-direction: column; gap: var(--space-3); }
.ve-skel__lines span { display: block; height: 104px; border-radius: var(--radius-md); background: var(--surface); animation: nb-pulse 1800ms var(--ease-inout) infinite; }
.ve-skel__lines span:nth-child(2) { animation-delay: 200ms; }
.ve-skel__lines span:nth-child(3) { animation-delay: 400ms; }
.ve-fatal { padding: var(--space-6); }

.ve-head { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ve-back { max-width: 100%; }
.ve-back__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-head__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-6); }
.ve-head__main { flex: 1 1 380px; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.ve-title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.012em; color: var(--ink); }
.ve-head__acts { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; }
.ve-ver {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ve-ver.is-busy { background: var(--caution-wash); color: var(--caution); }
.ve-narrow { display: none; }
.ve-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ve-lbl { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-faint); }
.ve-vt { max-width: 680px; }
.ve-vt__in { height: 44px; font-size: 17px; line-height: 24px; letter-spacing: -0.016em; }
.ve-hint { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-faint); }
.ve-hint.is-warn { color: var(--caution); }
.ve-count { align-self: flex-end; font-size: 12.5px; line-height: 18px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ve-count.is-over { color: var(--danger); }
.ve-msg { display: flex; gap: 6px; margin: 0; font-size: 13px; line-height: 18px; animation: p-err-in var(--duration-base) var(--ease-settle) both; }
.ve-msg.is-bad { color: var(--danger); }
.ve-msg.is-warn { color: var(--caution); }
.ve-msg__g { flex: none; }
.ve-a { color: var(--accent); }
.ve-a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ve-banners { display: flex; flex-direction: column; gap: var(--space-2); }
.ve-banners:empty { display: none; }
.ve-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--surface); font-size: 13px; line-height: 18px; color: var(--ink-muted); animation: p-rise var(--duration-base) var(--ease-out) both; }
.ve-banner__t { flex: 1 1 260px; padding: var(--space-1) 0; }
.ve-banner__a { flex: none; color: var(--accent); }
.ve-banner.is-caution { background: var(--caution-wash); color: var(--caution); }

.ve-strip { margin: 0 calc(var(--space-6) * -1); padding: 2px var(--space-6); overflow-x: auto; scrollbar-width: none; }
.ve-strip::-webkit-scrollbar { display: none; }
.ve-strip__in { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.ve-strip__i { display: flex; min-width: 0; }
.ve-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 300px;
  height: 36px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-muted);
  font: 400 13px / 18px var(--font-sans);
  letter-spacing: -0.014em;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.ve-pill:hover { background: var(--surface-raised); color: var(--ink); }
.ve-pill[aria-current] { background: var(--accent-wash); color: var(--ink); }
.ve-pill__n { flex: none; font-weight: 600; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ve-pill[aria-current] .ve-pill__n { color: var(--accent); }
.ve-pill__k { flex: none; color: var(--ink-faint); }
.ve-pill__k::before, .ve-pill__t:not(:empty)::before { content: "·"; margin-right: 6px; color: var(--ink-dim); }
.ve-pill__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-pill__m { flex: none; font-size: 12px; line-height: 1; }
.ve-pill__m.is-changed { color: var(--accent); font-size: 18px; }
.ve-pill__m.is-bad { color: var(--danger); }
.ve-pill__m.is-warn { color: var(--caution); font-size: 15px; }

.ve-cols { display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); gap: var(--space-6); align-items: start; }
.ve-pv { position: sticky; top: calc(var(--topbar) + var(--space-4)); z-index: 4; min-width: 0; }
.ve-pv__in { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-lg); background: var(--surface); }
.ve-stage { width: 100%; border-radius: var(--radius-md); }
.ve-stage__msg { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: var(--space-3) var(--space-4); font-size: 13px; line-height: 18px; color: var(--ink-faint); text-align: center; pointer-events: none; }
.ve-stage__msg:empty { display: none; }
.ve-stage__msg.is-bad { color: var(--danger); }
.ve-pv__ctl { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-2) var(--space-1); }
.ve-pv__play { flex: none; }
.ve-pv__play .ve-g { font-size: 14px; }
.ve-pv__scrub { flex: 1 1 auto; min-width: 0; }
.ve-pv__t { flex: none; font-size: 13px; line-height: 18px; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ve-pv__note { margin: 0; padding: 0 var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-faint); }
.ve-pv__note:empty { display: none; }
.ve-pv__hint { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0; padding: 0 0 0 var(--space-2); font-size: 12.5px; line-height: 18px; color: var(--ink-faint); }

.ve-range { -webkit-appearance: none; appearance: none; height: 24px; margin: 0; background: none; cursor: pointer; }
.ve-range::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-pill); background: var(--surface-raised); }
.ve-range::-moz-range-track { height: 4px; border-radius: var(--radius-pill); background: var(--surface-raised); }
.ve-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 0; border-radius: var(--radius-pill); background: var(--accent-fill); transition: transform var(--duration-fast) var(--ease-out); }
.ve-range::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: var(--radius-pill); background: var(--accent-fill); }
.ve-range:hover::-webkit-slider-thumb { transform: scale(1.12); }
.ve-range:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.ve-line .ve-range::-webkit-slider-runnable-track { background: var(--surface); }
.ve-line .ve-range::-moz-range-track { background: var(--surface); }

.ve-ed { min-width: 0; padding: var(--space-4) var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--surface); }
.ve-ed.is-locked { opacity: 0.72; }
.ve-sh { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.ve-sh__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; }
.ve-sh__n { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-faint); }
.ve-sh__k { font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -0.016em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-sh__nav { display: flex; flex: none; gap: 2px; }
.ve-tabs { display: flex; gap: 2px; width: fit-content; max-width: 100%; margin-bottom: var(--space-4); padding: 3px; border-radius: var(--radius-pill); background: var(--surface-raised); }
.ve-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink-muted);
  font: 500 14px / 20px var(--font-sans);
  letter-spacing: -0.016em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.ve-tab:hover { color: var(--ink); }
.ve-tab[aria-selected="true"] { background: var(--accent-wash); color: var(--accent); }
.ve-tab__n { font-size: 12.5px; font-weight: 400; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ve-panel { min-width: 0; }

.ve-lines { display: flex; flex-direction: column; gap: var(--space-3); }
.ve-lines__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ve-line { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-raised); transition: background-color var(--duration-base) var(--ease-out); }
.ve-line.is-now { background: var(--accent-wash); }
.ve-line__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ve-line__n { flex: none; min-width: 18px; margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ve-line.is-now .ve-line__n { color: var(--accent); }
.ve-line__n { display: inline-flex; align-items: center; gap: 2px; }
.ve-line__ch { font-size: 18px; line-height: 1; color: var(--accent); }
.ve-line__msg { margin: calc(var(--space-1) * -1) 0 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); animation: p-err-in var(--duration-base) var(--ease-settle) both; }
.ve-line__msg.is-bad { color: var(--danger); }
textarea.ve-line__text { min-height: 44px; padding: 10px var(--space-3); font-size: 15px; line-height: 24px; letter-spacing: -0.011em; resize: none; overflow: hidden; }
textarea.ve-line__astext { min-height: 40px; padding: 8px var(--space-3); resize: none; overflow: hidden; }
.ve-seg { display: inline-flex; flex: none; gap: 2px; padding: 2px; border-radius: var(--radius-pill); background: var(--surface); }
.ve-seg__b { height: 28px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-faint); font: 500 13px / 18px var(--font-sans); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.ve-seg__b:hover { color: var(--ink); }
.ve-seg__b[aria-checked="true"] { background: var(--accent-wash); color: var(--accent); }
.ve-voice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  height: 32px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font: 500 13px / 18px var(--font-sans);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.ve-voice:hover, .ve-voice[aria-expanded="true"] { background: var(--ground); }
.ve-voice__o { font-weight: 400; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-voice__o::before { content: "·"; margin-right: 6px; color: var(--ink-dim); }
.ve-voice__c { font-size: 10px; color: var(--ink-faint); }
.ve-voice--lg { height: 40px; padding: 0 var(--space-4); font-size: 14px; }
.ve-hear .ve-g, .ve-rec__dot { font-size: 11px; line-height: 1; }
.ve-hear[aria-busy="true"] { color: var(--ink-muted) !important; }
.ve-hear[aria-busy="true"]::after { content: none; }
.ve-rec__dot { color: var(--caution); }
.ve-sound { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); }
.ve-sound .ve-f { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ve-pace__in { display: inline-flex; align-items: center; gap: var(--space-2); }
.ve-pace__in .ve-range { width: 120px; }
.ve-pace__end { font-size: 12.5px; line-height: 18px; color: var(--ink-dim); }
.ve-pace__v { min-width: 4ch; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.ve-line .p-dd__btn { height: var(--control-sm); padding: 0 var(--space-2) 0 var(--space-3); background: var(--surface); font-size: 13px; line-height: 18px; }
.ve-line .p-dd__btn:hover, .ve-line .p-dd__btn[aria-expanded="true"] { background: var(--ground); }
.ve-deliv .p-dd__btn { min-width: 132px; justify-content: space-between; }
.ve-recd { display: inline-flex; flex-wrap: wrap; align-items: center; align-self: flex-start; gap: 2px; padding: 2px 2px 2px var(--space-4); border-radius: var(--radius-pill); background: var(--accent-wash); }
.ve-recd__k { margin-right: var(--space-1); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }
.ve-recd .p-btn { color: var(--ink); }
.ve-recd .p-btn:hover { background: var(--accent-mark); }
.ve-recd.is-settled, .ve-form.is-settled { animation: ve-settle var(--duration-slow) var(--ease-settle) 1; }
@keyframes ve-settle { from { transform: scale(0.985); opacity: 0.6; } to { transform: none; opacity: 1; } }
.ve-recarea:empty { display: none; }
.ve-recarea { display: flex; flex-direction: column; gap: var(--space-2); }
.ve-rec__count, .ve-rec__on, .ve-rec__fail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.ve-rec__num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--caution-wash); color: var(--caution); font-size: 20px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.ve-rec__num.is-settled { animation: ve-tick var(--duration-slow) var(--ease-settle) 1; }
@keyframes ve-tick { from { transform: scale(1.25); opacity: 0.4; } to { transform: none; opacity: 1; } }
.ve-rec__msg { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ve-rec__pill { display: inline-flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--caution-wash); color: var(--caution); font-size: 13px; line-height: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ve-rec__pill .ve-rec__dot { animation: nb-pulse 1400ms var(--ease-inout) infinite; }
.ve-meter { display: block; width: 120px; height: 6px; border-radius: var(--radius-pill); background: var(--surface); overflow: hidden; }
.ve-meter__f { display: block; height: 100%; border-radius: inherit; background: var(--caution); transform: scaleX(0); transform-origin: left center; }
.ve-rec__bad { margin: 0; font-size: 13px; line-height: 18px; color: var(--danger); }
.ve-ed.is-recording .ve-line:not(:has(.ve-recarea.is-on)) { opacity: 0.6; }
.ve-heard { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface); }
.ve-heard__t { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink); overflow-wrap: anywhere; }
.ve-heard__a { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ve-shows { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-2); }
.ve-shows:empty { display: none; }
.ve-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); min-width: 0; }
.ve-chip { display: inline-flex; align-items: center; gap: var(--space-1); max-width: 240px; height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-muted); font: 400 13px / 18px var(--font-sans); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.ve-chip:hover { color: var(--ink); }
.ve-chip[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent); font-weight: 500; }
.ve-chip__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-chip__o { flex: none; font-size: 12px; color: var(--ink-dim); }
.ve-moved { flex: 1 1 100%; margin: 0; font-size: 12.5px; line-height: 18px; color: var(--ink-faint); }
.ve-act__s { display: flex; align-items: center; gap: var(--space-2); min-height: 28px; list-style: none; cursor: pointer; font-size: 13px; line-height: 18px; color: var(--ink-faint); border-radius: var(--radius-sm); }
.ve-act__s::-webkit-details-marker { display: none; }
.ve-act__s::before { content: "▸"; flex: none; font-size: 11px; color: var(--ink-dim); transition: rotate var(--duration-fast) var(--ease-out); }
.ve-act[open] > .ve-act__s::before { rotate: 90deg; }
.ve-act__t { flex: none; font-weight: 500; color: var(--ink-muted); }
.ve-act__sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-act__s:hover .ve-act__t { color: var(--ink); }
.ve-act__b { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) 0 0 18px; }
.ve-act__r { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); }
.ve-act__who { flex: none; width: 40px; padding-top: 7px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
.ve-act__f { flex: 0 1 auto; }
.ve-act__sign { width: 180px; }

.ve-pop {
  position: fixed;
  inset: auto;
  z-index: 50;
  margin: 0;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--surface-float);
  color: var(--ink);
  box-shadow: var(--shadow-overlay);
  max-height: min(70vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ve-pop:popover-open { animation: p-rise var(--duration-fast) var(--ease-out) both; }
.ve-pop[popover]:not(:popover-open) { display: none; }
.ve-menu__in { display: flex; flex-direction: column; gap: 2px; min-width: 220px; max-width: 300px; }
.ve-menu__i {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: var(--control-md);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--ink-muted);
  font: 400 14px / 20px var(--font-sans);
  letter-spacing: -0.016em;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.ve-menu__i:hover:not([aria-disabled]) { background: var(--surface-raised); color: var(--ink); }
.ve-menu__i:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; color: var(--ink); }
.ve-menu__i.is-danger { color: var(--danger); }
.ve-menu__i.is-danger:hover:not([aria-disabled]) { background: var(--danger-wash); color: var(--danger); }
.ve-menu__i[aria-disabled] { color: var(--ink-dim); cursor: default; }
.ve-menu__h { font-size: 12.5px; line-height: 17px; color: var(--ink-faint); }
.ve-vp { width: 320px; padding: var(--space-2) var(--space-2) var(--space-1); }
.ve-vp__h { padding: var(--space-1) var(--space-2) var(--space-2); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-faint); }
.ve-vp__list { display: flex; flex-direction: column; gap: 2px; }
.ve-vp__r { display: flex; align-items: center; gap: var(--space-1); }
.ve-vp__pick {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--ink-muted);
  font: 400 14px / 20px var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.ve-vp__pick:hover { background: var(--surface-raised); color: var(--ink); }
.ve-vp__pick:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ve-vp__pick[aria-checked="true"] { color: var(--ink); font-weight: 500; }
.ve-vp__pick[aria-checked="true"]::after { content: "✓"; margin-left: auto; font-size: 12px; color: var(--accent); }
.ve-vp__sub { font-weight: 400; color: var(--ink-faint); }
.ve-vp__sub::before { content: "·"; margin-right: var(--space-2); color: var(--ink-dim); }
.ve-vp__l { flex: none; color: var(--ink-faint); }
.ve-vp__hint { margin: 0; padding: var(--space-2) var(--space-2) var(--space-1); font-size: 12.5px; line-height: 17px; color: var(--ink-faint); }

.ve-screen { display: flex; flex-direction: column; gap: var(--space-5); }
.ve-tpl__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ve-tpl .p-dd__btn { min-width: 180px; }
.ve-fill__wait { flex-basis: 100%; }
.ve-form { display: flex; flex-direction: column; gap: var(--space-5); }
.ve-group, .ve-list, .ve-pairs { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.ve-group { padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-raised); }
.ve-group__t, .ve-list__t { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); padding: 0; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
.ve-list__n { font-weight: 400; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ve-item { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-3); border-radius: var(--radius-md); background: var(--surface-raised); }
.ve-group .ve-item { background: var(--surface); }
.ve-item__h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 32px; }
.ve-item__t { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-faint); }
.ve-list__add, .ve-pairs > .p-btn { align-self: flex-start; }
.ve-pairs > legend { margin-bottom: var(--space-1); padding: 0; }
.ve-short { max-width: 220px; }
textarea.ve-long { min-height: 64px; resize: none; overflow: hidden; }
.ve-pair { display: flex; align-items: flex-start; gap: var(--space-2); }
.ve-pair__f { flex: 1 1 0; }
.ve-pair__eq { flex: none; line-height: 32px; color: var(--ink-dim); }
textarea.ve-code { min-height: 140px; font-family: var(--font-mono); font-size: 13px; line-height: 22px; letter-spacing: 0; white-space: pre; overflow-x: auto; resize: vertical; tab-size: 4; }
.ve-monaco { min-height: 108px; }
.ve-pic { max-width: 440px; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-raised); }
.ve-pic__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--ground); }
.ve-pic__alt { margin: 0; padding: var(--space-2) var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-faint); }
.ve-pic__none { margin: 0; padding: var(--space-8) var(--space-4); font-size: 14px; line-height: 20px; color: var(--ink-faint); text-align: center; }
.ve-k-picture > .p-btn { align-self: flex-start; }

.ve-bar {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: 1392px;
  margin: 0 auto;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--surface-float);
  box-shadow: var(--shadow-overlay);
}
.ve-bar__st { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-width: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.ve-bar__msg.is-quiet, .ve-bar__long.is-quiet { color: var(--ink-faint); }
.ve-bar__st.is-bad { color: var(--danger); }
.ve-bar__st.is-run { color: var(--caution); }
.ve-bar__msg.is-done { color: var(--accent); font-weight: 500; }
.ve-bar__msg.is-settled { animation: ve-settle var(--duration-slow) var(--ease-settle) 1; }
.ve-bar__fix { padding: 0; border: 0; background: none; color: var(--danger); font: inherit; text-align: left; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--danger) 40%, transparent); text-underline-offset: 3px; cursor: pointer; }
.ve-bar__fix:hover { text-decoration-color: var(--danger); }
.ve-bar__short { display: none; }
.ve-bar__link { color: var(--accent); }
.ve-bar__acts { display: flex; flex: none; align-items: center; gap: var(--space-2); }
.ve-bar__save { min-width: 96px; }
.ve-bar__prog { display: block; flex: none; width: 120px; height: 4px; border-radius: var(--radius-pill); background: var(--surface-raised); overflow: hidden; }
.ve-bar__prog > span { display: block; height: 100%; border-radius: inherit; background: var(--caution); transform-origin: left center; transition: transform var(--duration-base) var(--ease-out); }
body:has([data-ve]) .nb-say { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

.ve-sheet {
  width: min(560px, calc(100vw - 2 * var(--space-4)));
  max-width: none;
  max-height: min(88dvh, 860px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--surface-float);
  color: var(--ink);
  box-shadow: var(--shadow-overlay);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ve-sheet[open] { animation: p-rise var(--duration-base) var(--ease-settle) both; }
.ve-sheet::backdrop { background: color-mix(in srgb, var(--overlay) 70%, transparent); }
.ve-sheet__h { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-3) var(--space-2) var(--space-6); background: var(--surface-float); }
.ve-sheet__t { margin: 0; min-width: 0; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -0.016em; overflow-wrap: anywhere; }
.ve-sheet__b { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-2) var(--space-6) var(--space-6); }
.ve-sheet__acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.ve-sheet__acts > .ve-hint { flex: 1 1 200px; }
.ve-sheet--side { width: min(460px, 100vw); height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: var(--radius-xl) 0 0 var(--radius-xl); }
.ve-sheet--side[open] { animation: nbp-in var(--duration-base) var(--ease-settle) both; }
.ve-pics { width: min(760px, calc(100vw - 2 * var(--space-4))); }
.ve-play { width: min(980px, calc(100vw - 2 * var(--space-4))); }
.ve-play .p-pl.p-vp { margin: 0; }
.ve-tabs--sheet { margin-bottom: 0; }
.ve-pics__pane { display: flex; flex-direction: column; gap: var(--space-4); min-height: 240px; }
.ve-pics__pane[hidden] { display: none; }
.ve-pics__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-2); }
.ve-pics__i { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 6px; border: 0; border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink-muted); font: 400 12.5px / 17px var(--font-sans); text-align: left; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.ve-pics__i:hover { background: var(--surface); color: var(--ink); }
.ve-pics__i[aria-pressed="true"] { background: var(--accent-wash); color: var(--ink); }
.ve-pics__i img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); background: var(--ground); }
.ve-pics__cap { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ve-pics__tag { padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-faint); font-size: 12px; line-height: 18px; }
.ve-pics__tag.is-on { background: var(--accent); color: var(--on-accent); }
.ve-pics__empty { margin: 0; padding: var(--space-8) 0; font-size: 14px; line-height: 20px; color: var(--ink-faint); text-align: center; }
.ve-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-6) var(--space-4); border-radius: var(--radius-md); background: var(--surface-raised); text-align: center; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out); }
.ve-drop:hover { background: var(--surface); }
.ve-drop:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.ve-drop__in { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.ve-drop__t { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--accent); overflow-wrap: anywhere; }
.ve-drop__img { display: block; max-width: 100%; max-height: 220px; border-radius: var(--radius-md); }
.ve-voices__l { display: flex; flex-direction: column; gap: var(--space-3); }
.ve-host .p-cast { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.ve-host .p-cast__i { grid-template-columns: 36px minmax(0, 1fr) 20px; gap: var(--space-2); min-height: 52px; padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1); }
.ve-host .p-cast__f { width: 36px; height: 44px; padding: 2px; }
.ve-host .p-cast__m { width: 20px; height: 20px; }
.ve-voices__r { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ve-voices__r > .ve-lbl { width: 120px; }
.ve-voices__r > .ve-msg { flex-basis: 100%; }
.ve-consent { width: min(480px, calc(100vw - 2 * var(--space-4))); }
.ve-consent__c { font-size: 15px; line-height: 22px; color: var(--ink); }
.ve-consent__c input { margin-top: 1px; }
.ve-consent__n { margin: 0; }
.ve-hist__l { display: flex; flex-direction: column; gap: var(--space-1); }
.ve-hist__r { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-md); }
.ve-hist__r.is-current { background: var(--surface-raised); }
.ve-hist__h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.ve-hist__v { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ve-hist__m { font-size: 13px; line-height: 18px; color: var(--ink-faint); }
.ve-hist__cur { margin-left: auto; }
.ve-hist__s { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.ve-hist__s.is-run { color: var(--caution); }
.ve-hist__s.is-bad { color: var(--danger); }
.ve-hist__a { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-left: calc(var(--space-2) * -1); }
.ve-hist__ok { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-raised); font-size: 14px; line-height: 20px; color: var(--ink); animation: p-err-in var(--duration-base) var(--ease-settle) both; }
.ve-hist__ok p { margin: 0; }
.ve-closed { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 640px; margin-top: var(--space-4); padding: var(--space-8); border-radius: var(--radius-lg); background: var(--surface); }
.ve-closed__t { margin: 0; font-size: 16px; line-height: 26px; color: var(--ink); }

@media (max-width: 1099px) {
  .ve-cols { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: var(--measure-wide); margin: 0 auto; }
  .ve-skel { grid-template-columns: minmax(0, 1fr); }
  .ve-pv { top: calc(var(--topbar) + var(--space-2)); }
  .ve-pv__in { box-shadow: 0 8px 24px color-mix(in srgb, var(--ground) 70%, transparent); }
  .ve-stage { width: min(100%, calc(30vh * 16 / 9)); margin: 0 auto; }
}
@media (max-width: 719px) {
  .ve { gap: var(--space-3); padding: var(--space-3) var(--space-4) calc(104px + env(safe-area-inset-bottom, 0px)); }
  .ve-wide { display: none; }
  .ve-narrow { display: inline-flex; }
  .ve-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "back title acts" "field field field" "banners banners banners"; align-items: center; gap: var(--space-2) var(--space-1); }
  .ve-head__row, .ve-head__main { display: contents; }
  .ve-back { grid-area: back; justify-content: center; min-width: 36px; min-height: 40px; margin-left: calc(var(--space-2) * -1); font-size: 18px; }
  .ve-title { grid-area: title; font-size: 18px; line-height: 26px; }
  .ve-head__acts { grid-area: acts; min-height: 40px; gap: var(--space-1); }
  .ve-vt { grid-area: field; max-width: none; margin-top: var(--space-1); }
  .ve-vt__in { height: 44px; font-size: 16px; }
  .ve-banners { grid-area: banners; }
  .ve-back__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ve-ver { height: 24px; padding: 0 var(--space-2); font-size: 12.5px; }
  .ve-strip { margin: 0 calc(var(--space-4) * -1); padding: 2px var(--space-4); scroll-snap-type: x mandatory; scroll-padding: 0 var(--space-4); }
  .ve-strip__in { flex-wrap: nowrap; }
  .ve-strip__i { flex: none; scroll-snap-align: start; }
  .ve-recd { border-radius: var(--radius-md); padding: 2px 2px 2px var(--space-3); }
  .ve-pill { max-width: 240px; }
  .ve-pv { position: static; }
  .ve-pv__in { margin: 0 calc(var(--space-4) * -1); padding: 0 0 var(--space-2); border-radius: 0; box-shadow: none; }
  .ve-stage { width: 100%; border-radius: 0; }
  .ve-pv__ctl { padding: 0 var(--space-3); }
  .ve-pv__hint { display: none; }
  .ve-ed { margin: 0 calc(var(--space-4) * -1); padding: var(--space-4) var(--space-3) var(--space-5); border-radius: 0; }
  .ve-tabs { width: 100%; }
  .ve-tab { flex: 1 1 0; justify-content: center; }
  .ve-sound { gap: var(--space-3); }
  .ve-pace__in .ve-range { width: 104px; }
  .ve-act__b { padding-left: 0; }
  .ve-act__sign { width: 100%; }
  .ve-bar { left: var(--space-2); right: var(--space-2); bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); }
  .ve-bar__long, .ve-bar__st:has(.ve-bar__short) > .ve-bar__msg, .ve-bar__prog, .ve-bar__discard { display: none; }
  .ve-bar__short { display: inline; }
  .ve-bar__st { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; font-size: 13px; }
  .ve-bar__st > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .ve-bar__st:not(:has(.ve-bar__short)) { flex-wrap: wrap; white-space: normal; }
  body:has([data-ve]) .nb-say { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .ve-pop { inset: auto var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom, 0px)) var(--space-2) !important; width: auto; max-height: 72dvh; }
  .ve-vp, .ve-menu__in { width: auto; max-width: none; }
  .ve-sheet, .ve-pics, .ve-play, .ve-consent { width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .ve-sheet[open] { animation: nbp-up var(--duration-base) var(--ease-settle) both; }
  .ve-sheet--side { height: 92dvh; }
  .ve-sheet__h { padding: var(--space-3) var(--space-2) var(--space-2) var(--space-4); }
  .ve-sheet__b { padding: var(--space-2) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); }
  .ve-pics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ve-voices__r > .ve-lbl { width: 100%; }
}
@media (pointer: coarse) {
  .ve-pill { height: 44px; }
  .ve-seg__b, .ve-chip, .ve-voice { min-height: 40px; }
  .ve-tab { height: 40px; }
  .ve-vp__pick { min-height: 44px; }
  .ve-range { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ve-rec__pill .ve-rec__dot, .ve-skel__lines span { animation: none; }
}

.acct-who { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-8) 0 0; }
.acct-who__r { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-4); align-items: baseline; }
.acct-who dt { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink-faint); }
.acct-who dd { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink); overflow-wrap: anywhere; }
.acct-sec { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-12); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface); }
.acct-sec__t { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -0.016em; color: var(--ink); }
.acct-sec__p { margin: 0; max-width: 60ch; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.sd { scroll-margin-top: calc(var(--topbar) + var(--space-4)); }
.sd-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.sd-state { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--surface-raised); font-size: 12.5px; line-height: 18px; font-weight: 500; color: var(--ink-faint); white-space: nowrap; animation: p-rise var(--duration-base) var(--ease-settle) both; }
.sd-state.is-on { background: var(--accent-wash); color: var(--accent); }
.sd-state.is-part { background: var(--caution-wash); color: var(--caution); }
.sd-was { margin: 0; max-width: 60ch; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--ground); font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.sd-terms { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-3) 0 0; }
.sd-term { display: grid; grid-template-columns: 140px minmax(0, 60ch); gap: var(--space-4); align-items: baseline; }
.sd-term dt { font-size: 13.5px; line-height: 21px; font-weight: 600; color: var(--ink); }
.sd-term dd { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.sd-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-4); }
.sd-facts { font-size: 13px; line-height: 18px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.sd-pop { position: relative; }
.sd-pop > summary { list-style: none; }
.sd-pop > summary::-webkit-details-marker { display: none; }
.sd-pop[open] > summary { color: var(--danger); background: var(--danger-wash); }
.sd-pop__body { position: absolute; left: 0; top: calc(100% + var(--space-2)); z-index: 10; width: min(380px, calc(100vw - 2 * var(--gutter))); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-float); box-shadow: var(--shadow-overlay); display: flex; flex-direction: column; gap: var(--space-3); animation: p-rise var(--duration-fast) var(--ease-out) both; }
.sd-pop__t { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sd-pop__acts { display: flex; justify-content: flex-end; }
.sd-hist { margin-top: var(--space-1); }
.sd-hist__s { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-sm); padding: 0 var(--space-3); margin-left: calc(var(--space-3) * -1); border-radius: var(--radius-pill); list-style: none; font-size: 13px; line-height: 18px; color: var(--ink-faint); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.sd-hist__s::-webkit-details-marker { display: none; }
.sd-hist__s::after { content: ""; width: 10px; height: 10px; background: var(--chevron) center / 10px no-repeat; transition: rotate var(--duration-fast) var(--ease-out); }
.sd-hist__s:hover { color: var(--ink); background: var(--surface-raised); }
.sd-hist[open] .sd-hist__s::after, .sd-more[open] .sd-hist__s::after { rotate: 180deg; }
.sd-more { margin-top: var(--space-1); }
.sd-hist__list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.sd-hist__i { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); font-size: 13px; line-height: 18px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.sd-hist__v { min-width: 44px; font-weight: 500; color: var(--ink-muted); }
.sd-hist__v.is-on { color: var(--accent); }
@media (max-width: 559px) {
  .acct-who__r { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .acct-sec { padding: var(--space-5) var(--space-4); }
  .sd-term { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sd-pop__body { position: fixed; left: var(--gutter); right: var(--gutter); top: auto; bottom: var(--space-4); width: auto; }
}

.p-pl__chs { position: absolute; inset: 0; pointer-events: none; }
.p-pl__ch { position: absolute; top: 0; bottom: 0; width: 16px; margin-left: -8px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; }
.p-pl__ch::before { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 8px; margin: -4px 0 0 -1.5px; background: var(--pl-bg); }
.p-pl__ch:focus-visible { outline: none; }
.p-pl__ch:focus-visible::before { width: 6px; height: 12px; margin: -6px 0 0 -3px; border-radius: var(--radius-pill); background: var(--ink); box-shadow: 0 0 0 2px var(--focus); }
.p-flow__ch { margin: calc(var(--flow-lh) * 1.6em) 0 calc(var(--flow-lh) * 0.6em) var(--flow-indent); font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.p-flow__ch:first-child, .p-flow__find + .p-flow__ch { margin-top: 0; }
.p-flow__ch + .p-flow__p { margin-top: 0; }

.ep-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: end; }
.ep-head--art { grid-template-columns: 112px minmax(0, 1fr); }
.ep-head__art { display: block; width: 112px; height: 112px; object-fit: cover; border-radius: var(--radius-lg); background: var(--surface); }
.ep-head__main { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.ep-head__t, .ep-head__sub { margin: 0; }
.ep-head + .p-note { margin-top: var(--space-3); }
.ep-chs { margin-top: var(--space-8); }
.ep-chs__t { margin: 0 0 var(--space-2); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-faint); }
.ep-chs__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ep-ch { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-3); width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md); background: none; color: var(--ink-muted); font: 400 15px / 22px var(--font-sans); text-align: left; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.ep-ch:hover { background: var(--surface); color: var(--ink); }
.ep-ch:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ep-ch[aria-current="true"] { background: var(--accent-wash); color: var(--ink); }
.ep-ch__n { font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ep-ch[aria-current="true"] .ep-ch__n { color: var(--accent); font-weight: 600; }
.ep-ch__t { min-width: 0; overflow-wrap: anywhere; }
.ep-ch__at { font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ep-notes { margin-top: var(--space-10); }

.ee-col { padding-bottom: 112px; }
.ee, .ee-notes { margin-top: var(--space-10); }
.ee-h { margin: 0 0 var(--space-4); font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.012em; color: var(--ink); }
.ee-boot { display: flex; flex-direction: column; gap: var(--space-2); }
.ee-boot span { display: block; height: 72px; border-radius: var(--radius-md); background: var(--surface); animation: nb-pulse 1800ms var(--ease-inout) infinite; }
.ee-boot span:nth-child(2) { animation-delay: 200ms; }
.ee-boot span:nth-child(3) { animation-delay: 400ms; }
.ee-why { margin: 0; padding: var(--space-5); border-radius: var(--radius-md); background: var(--surface); color: var(--ink-muted); }
.ee-top { position: sticky; top: calc(var(--topbar) + var(--space-2)); z-index: 5; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-pill); background: var(--surface-float); box-shadow: var(--shadow-overlay); }
.ee-play { flex: none; }
.ee-track { position: relative; flex: 1 1 auto; min-width: 60px; height: 32px; cursor: pointer; }
.ee-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: var(--radius-pill); background: var(--border); }
.ee-track__f { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: var(--radius-pill); background: var(--accent); transform: scaleX(0); transform-origin: left center; }
.ee-track__marks { position: absolute; inset: 0; pointer-events: none; }
.ee-track__m { position: absolute; top: 50%; width: 3px; height: 8px; margin: -4px 0 0 -1.5px; background: var(--surface-float); }
.ee-track:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-pill); }
.ee-time { flex: none; font-size: 13px; line-height: 18px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ee-ver { flex: none; font-variant-numeric: tabular-nums; }
.ee-cast { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-5) 0 var(--space-4); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.ee-cast__n { flex: 1 1 240px; }
.ee-who { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--space-3) 0 var(--space-2); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-faint); font: 500 13px / 18px var(--font-sans); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.ee-who::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--host-fill, var(--ink-faint)); opacity: 0.45; transition: opacity var(--duration-fast) var(--ease-out); }
.ee-who:hover { color: var(--ink); }
.ee-who[aria-checked="true"], .ee-who--static { background: color-mix(in oklab, var(--host-fill, var(--ink)) 16%, var(--surface-raised)); color: var(--ink); }
.ee-who[aria-checked="true"]::before, .ee-who--static::before { opacity: 1; }
.ee-who--static { cursor: default; }
.ee-who:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ee-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-pill); background: var(--surface); }
.ee-lines { display: flex; flex-direction: column; gap: var(--space-2); }
.ee-line { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-raised); transition: background-color var(--duration-base) var(--ease-out); }
.ee-line.is-now { background: var(--accent-wash); }
.ee-line__h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: 32px; }
.ee-at { min-width: 44px; height: 28px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-faint); font: 500 13px / 18px var(--font-sans); font-variant-numeric: tabular-nums; cursor: pointer; }
.ee-at:hover:not(:disabled) { background: var(--surface); color: var(--ink); }
.ee-at:disabled { cursor: default; color: var(--caution); }
.ee-at:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ee-line.is-now .ee-at { color: var(--accent); }
.ee-chips { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
.ee-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-muted); font-size: 12.5px; line-height: 17px; }
.ee-chip--you { background: var(--accent-wash); color: var(--accent); }
.ee-mark { margin-left: auto; font-size: 10px; line-height: 1; color: var(--caution); opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); }
.ee-line.is-voice .ee-mark { opacity: 1; }
.ee-text { display: block; width: 100%; min-height: 26px; margin: 0; padding: var(--space-1) var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: 400 16px / 26px var(--font-sans); resize: none; overflow: hidden; transition: background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.ee-text:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.ee-text:focus { outline: none; background: var(--ground); box-shadow: inset 0 0 0 1px var(--border-strong); }
.ee-line__msg { margin: 0; font-size: 13px; line-height: 18px; color: var(--danger); }
.ee-tools { display: none; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.ee-line.is-open .ee-tools, .ee-line.is-rec .ee-tools { display: flex; animation: p-rise var(--duration-fast) var(--ease-out) both; }
.ee-tools .p-dd__btn { height: var(--control-sm); padding: 0 var(--space-2) 0 var(--space-3); background: var(--surface); font-size: 13px; line-height: 18px; }
.ee-rec { color: var(--caution); }
.ee-recarea:empty { display: none; }
.ee-recarea { display: flex; flex-direction: column; gap: var(--space-2); }
.ee-heard { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ee-ch { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-6); padding: 0 var(--space-2); }
.ee-ch:first-child { margin-top: 0; }
.ee-ch__g { flex: none; color: var(--accent); font-weight: 600; }
.ee-ch__in { flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font: 600 17px / 24px var(--font-sans); letter-spacing: -0.012em; }
.ee-ch__in::placeholder { color: var(--ink-dim); }
.ee-ch__in:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.ee-ch__in:focus { outline: none; background: var(--ground); box-shadow: inset 0 0 0 1px var(--border-strong); }
.ee-ch__at { flex: none; font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ee-add { align-self: flex-start; margin-top: var(--space-2); }
.ee-chlist { display: flex; flex-direction: column; gap: var(--space-2); }
.ee-tch { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2); }
.ee-tch__at { font-variant-numeric: tabular-nums; text-align: center; }
.ee-empty { margin: 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface); color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.ee-bar { transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out); }
.ee-bar.is-away { opacity: 0; transform: translateY(16px); pointer-events: none; visibility: hidden; }
.ee-bar .ve-bar__msg + .ve-bar__msg { margin-left: var(--space-2); }
.ee-vers { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ee-v { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-raised); }
.ee-v.is-current { background: var(--accent-wash); }
.ee-v__h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ee-v__n { font-weight: 600; font-variant-numeric: tabular-nums; }
.ee-v__s { flex: 1 1 auto; min-width: 0; color: var(--ink-muted); }
.ee-v__w { font-size: 13px; line-height: 18px; color: var(--ink-faint); }
.ee-v__w.is-bad { color: var(--danger); }
.ee-v__a { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
@media (max-width: 719px) {
  .ee-top { top: calc(var(--topbar) + var(--space-1)); }
  .ee-time { display: none; }
  .ee-line { padding: var(--space-3); }
  .ep-head--art { grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-4); }
  .ep-head__art { width: 72px; height: 72px; }
  .ee-tch { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .ee-tch > :nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ee-bar, .ee-line, .ee-tools { transition: none; animation: none; }
}
@media (pointer: coarse) {
  .es-series__t, .nb-back, .p-fold__s, .es-suggest__i, .ve-act__s { min-height: 44px; align-items: center; }
  .es-tag__x { width: 36px; height: 36px; }
}
.p-done { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-md); font: 500 14px/20px var(--font-sans); letter-spacing: -0.01em; color: var(--accent); white-space: nowrap; }
.p-done__g { width: 20px; height: 20px; flex: none; overflow: visible; }
.p-done__g circle { fill: var(--accent-wash); stroke: var(--accent); stroke-width: 1.5; }
.p-done__g path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p-done--sm { min-height: 0; gap: 6px; font-size: 13px; line-height: 18px; }
.p-done--sm .p-done__g { width: 16px; height: 16px; }
.p-done.is-fresh .p-done__g circle { stroke-dasharray: 52; stroke-dashoffset: 52; fill-opacity: 0; animation: p-done-ring var(--duration-base) var(--ease-settle) forwards, p-done-fill var(--duration-base) var(--ease-out) var(--duration-base) forwards; }
.p-done.is-fresh .p-done__g path { stroke-dasharray: 13; stroke-dashoffset: 13; animation: p-done-ring var(--duration-base) var(--ease-settle) calc(var(--duration-base) * 0.7) forwards; }
.p-done.is-fresh { animation: p-done-in var(--duration-base) var(--ease-out) both; }
@keyframes p-done-ring { to { stroke-dashoffset: 0; } }
@keyframes p-done-fill { to { fill-opacity: 1; } }
@keyframes p-done-in { from { opacity: 0; transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .p-done.is-fresh, .p-done.is-fresh .p-done__g circle, .p-done.is-fresh .p-done__g path { animation: none; stroke-dashoffset: 0; fill-opacity: 1; }
}

.p-media { margin: var(--space-10) 0; }
.p-media:first-child { margin-top: 0; }
.p-media .p-figure__open img { width: 100%; }
.p-pl.p-vp.p-vp--piece { margin: 0; container: vp / inline-size; }
@container vp (max-width: 600px) {
  .p-vp--piece .p-vp__ctl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--space-2); }
  .p-vp--piece .p-vp__ctl .p-pl__mid { grid-column: 1 / -1; grid-row: 1; justify-content: center; }
  .p-vp--piece .p-vp__ctl .p-vp__aside { grid-row: 2; }
}
.p-vp--piece .p-vp__deck { padding: var(--space-2) var(--space-4) var(--space-2); }
.p-vp--piece .p-pl__say { min-height: 0; }
.p-vp--piece .p-pl__say[data-empty] { display: none; }
.p-vp--piece:not(.is-full) .p-vp__cc { width: min(80%, 30em); bottom: 5%; font-size: clamp(12px, 2.3cqi, 18px); }
.p-media--video > .p-figure__c { margin-top: var(--space-3); }
.p-media__chs { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.p-media .p-media__chs { margin: var(--space-3) 0 0; padding: 0; }
.p-media .p-media__chs > li { margin: 0; padding: 0; }
.p-media .p-media__chs > li::before, .p-media .p-media__chs > li::marker { content: none; }
.p-media__flow .p-flow__ch { margin: calc(var(--flow-lh) * 1.2em) 0 calc(var(--flow-lh) * 0.4em) var(--flow-indent); font-size: 15px; line-height: 22px; }
.p-media__flow .p-flow__ch:first-child { margin-top: 0; }
.p-media__ch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-sm);
  padding: 0 var(--space-3) 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-muted);
  font: inherit;
  font-size: 13.5px;
  line-height: 18px;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.p-media__ch:hover { background: var(--surface-raised); color: var(--ink); }
.p-media__ch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.p-media__at { padding: 1px 6px; border-radius: var(--radius-pill); background: var(--accent-wash); color: var(--accent); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.p-media__tx { margin-top: var(--space-3); }
.p-media__tx > summary { display: flex; align-items: center; gap: var(--space-3); width: fit-content; min-height: var(--control-sm); padding: 0 var(--space-3); border-radius: var(--radius-pill); color: var(--ink-muted); font-size: 14px; transition: background var(--duration-fast) var(--ease-out); }
.p-media__tx > summary:hover { background: var(--surface); }
.p-media__tx > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.p-media__txl { font-weight: 500; color: var(--ink); }
.p-media__flow { --flow-size: 15.5px; max-height: 420px; overflow-y: auto; padding: var(--space-3) var(--space-4) var(--space-3) 0; border-radius: var(--radius-md); background: var(--surface); overscroll-behavior: contain; }
.p-prose .p-media__flow p { margin: 0; }

.mx { max-width: var(--measure-wide); margin-top: var(--space-10); padding: var(--space-5) var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--surface); scroll-margin-top: var(--space-16); }
.mx__top { display: flex; align-items: center; gap: var(--space-3); }
.mx__t { margin: 0; font-size: 18px; line-height: 26px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.mx-empty { margin: var(--space-3) 0 0; max-width: var(--measure-prose); font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.mx-list { display: flex; flex-direction: column; gap: 2px; margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.mx-row { border-radius: var(--radius-md); }
.mx-row.htmx-added { animation: p-rise var(--duration-base) var(--ease-out) both; }
.mx-row__open {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 64px;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.mx-row__open:hover { background: var(--surface-raised); }
.mx-row__open:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; background: var(--surface-raised); }
.mx-row__th { position: relative; flex: none; display: grid; place-items: center; width: 96px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink-faint); }
.mx-row__th > img { width: 100%; height: 100%; object-fit: cover; }
.mx-row__g { font-size: 18px; }
.mx-row__play { position: absolute; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ground) 78%, transparent); color: var(--ink); font-size: 10px; }
.mx-row__b { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.mx-row__n { overflow: hidden; color: var(--ink); font-size: 14.5px; line-height: 20px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.mx-row__s { font-size: 13px; line-height: 18px; color: var(--ink-faint); }
.mx-row.is-busy .mx-row__s { color: var(--caution); }
.mx-row.is-bad .mx-row__s { color: var(--danger); }
.mx-row.is-wait .mx-row__s { color: var(--accent); }
.mx-row.is-busy .mx-row__th { animation: pz-breathe 1.8s var(--ease-out) infinite; }
.mx-row__go { flex: none; color: var(--ink-dim); font-size: 20px; transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.mx-row__open:hover .mx-row__go { color: var(--ink); transform: translateX(2px); }
.mx-ask { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 2px 0 var(--space-2) calc(96px + var(--space-6)); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--accent-wash); }
.mx-ask__t { flex: 1 1 240px; margin: 0; font-size: 14px; line-height: 20px; color: var(--ink); }
.mx-ask__g { margin-right: var(--space-2); color: var(--accent); font-size: 10px; vertical-align: 1px; }
.mx-ask__a { display: flex; gap: var(--space-2); }
.mx-old { max-width: var(--measure-wide); margin-top: var(--space-8); }

.mx-sheet {
  position: fixed;
  inset: calc(var(--topbar) + var(--space-3)) var(--space-3) var(--space-3) auto;
  z-index: 40;
  display: none;
  flex-direction: column;
  width: min(460px, calc(100vw - var(--space-6)));
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--surface-float);
  color: var(--ink);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
}
.mx-sheet[open] { display: flex; animation: mx-in var(--duration-base) var(--ease-settle) both; }
@keyframes mx-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.mx-sheet__head { flex: none; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-2) var(--space-6); }
.mx-sheet__t { flex: 1 1 auto; margin: 0; font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.01em; }
.mx-sheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2) var(--space-6) var(--space-4); }
.mx-sheet__body > * { animation: p-rise var(--duration-base) var(--ease-out) both; }
.mx-sheet__say { flex: none; margin: 0; padding: var(--space-3) var(--space-6) var(--space-4); font-size: 13.5px; line-height: 19px; color: var(--ink-muted); }
.mx-sheet__say:empty { display: none; }
.mx-sheet__say.is-bad { color: var(--danger); }
.mx-sheet__say.is-ok { color: var(--accent); }

.mx-form { display: flex; flex-direction: column; gap: var(--space-5); }
.mx-form__ta { min-height: 88px; resize: vertical; }
.mx-seg { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.mx-form__kind .mx-seg { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: var(--surface-raised); }
.mx-seg__i {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-height: var(--control-sm);
  padding: var(--space-1) var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--ink-muted);
  font: inherit;
  font-size: 13.5px;
  line-height: 18px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.mx-form__kind .mx-seg__i { background: transparent; }
.mx-seg__i:hover { color: var(--ink); }
.mx-seg__i[aria-checked="true"] { background: var(--accent-wash); color: var(--accent); }
.mx-form__kind .mx-seg__i[aria-checked="true"] { background: var(--surface-float); color: var(--ink); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent); }
.mx-seg__i:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mx-seg__w { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--ink-faint); }
.mx-form__video .mx-seg { flex-direction: column; }
.mx-form__video .mx-seg__i { width: 100%; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); }
.mx-form__video { display: flex; flex-direction: column; gap: var(--space-5); }
.mx-form__video[hidden] { display: none; }
.mx-form__q { margin-top: var(--space-2); }
.mx-form__sec { margin: 0 0 var(--space-1); font-size: 13.5px; line-height: 19px; color: var(--ink-muted); }
.mx-quote { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink-muted); font-size: 13.5px; line-height: 20px; }
.mx-quote__t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; white-space: pre-line; }
.mx-form__foot { position: sticky; bottom: calc(var(--space-4) * -1); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0 calc(var(--space-6) * -1) calc(var(--space-4) * -1); padding: var(--space-4) var(--space-6); background: var(--surface-float); }
.mx-form__note { flex: 1 1 220px; margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-faint); }
.mx-form__note.is-bad { color: var(--caution); }

.mxc { display: flex; flex-direction: column; gap: var(--space-4); }
.mxc__busy { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-raised); }
.mxc__wait { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.mxc .pz-fail { margin-top: 0; }
.mxc__pv .p-media { margin: 0; }
.mxc__pv .p-vp--piece .p-pl__speed { display: none; }
.mxc__vers { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.mxc__vl { margin-right: var(--space-2); font-size: 13px; color: var(--ink-faint); }
.mxc__v { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: var(--control-sm); height: var(--control-sm); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink-muted); font: inherit; font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.mxc__v:hover:not(:disabled) { color: var(--ink); }
.mxc__v.is-on { background: var(--ink); color: var(--ground); }
.mxc__v:disabled { opacity: 0.45; cursor: default; }
.mxc__v:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mxc__in { font-size: 11px; color: var(--accent); }
.mxc__v.is-on .mxc__in { color: inherit; }
.mxc__v.is-making { opacity: 1; background: var(--caution-wash); color: var(--caution); }
.mxc__v.is-making .mxc__in { color: inherit; }
.mxc__f { display: flex; flex-direction: column; gap: var(--space-3); }
.mxc__made { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--ink-dim); overflow-wrap: anywhere; }
.mxc__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.mxc__in-text { flex: 1 0 100%; margin: 0 0 var(--space-1); font-size: 13.5px; line-height: 19px; color: var(--accent); }
.mxc__ask { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--accent-wash); font-size: 13.5px; line-height: 19px; color: var(--ink); }

@media (max-width: 720px) {
  .mx { padding: var(--space-4) var(--space-3) var(--space-5); }
  .mx-row__th { width: 72px; }
  .mx-ask { margin-left: 0; }
  .mx-sheet { inset: auto 0 0 0; width: 100vw; max-height: 88dvh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .mx-sheet[open] { animation-name: mx-up; }
  .mx-sheet__head, .mx-sheet__body, .mx-sheet__say { padding-left: var(--space-4); padding-right: var(--space-4); }
  .mx-form__foot { margin-left: calc(var(--space-4) * -1); margin-right: calc(var(--space-4) * -1); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); }
  .p-media__flow { --flow-gutter: 44px; }
}
@keyframes mx-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.dk {
  --k-wf: 1.5px;
  --k-wl: 2px;
  --k-chip-x: 10px;
  --k-chip-y: 4px;
  --k-chip-size: 13px;
  margin: var(--space-8) 0;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
}
.p-block > .dk { margin: 0; }
.dk .dk__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-3); margin: 0 0 var(--space-4); }
.dk__t { font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.dk__l { font-size: 13px; line-height: 18px; color: var(--ink-faint); }
.dk__s { position: relative; padding: var(--space-5); border-radius: var(--radius-md); background: var(--ground); overflow: hidden; }
.dk__s:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dk__c { margin-top: var(--space-4); }
.dk .dk__n { display: flex; gap: var(--space-2); margin: var(--space-4) 0 0; font-size: 14px; line-height: 21px; color: var(--ink-muted); text-wrap: pretty; }
.dk__g { flex: none; color: var(--accent); }
.dk .dk__f { margin: var(--space-4) 0 0; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--ground); font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.dk:not(.is-live) .dk__s, .dk:not(.is-live) .dk__c { display: none; }
.dk.is-live .dk__f { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dk-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); }
.dk-row:empty { display: none; }
.dk-row + .dk-row { margin-top: var(--space-3); }
.dk-row--a { gap: var(--space-3); }
.dk-sl { display: flex; flex: 1 1 240px; align-items: center; gap: var(--space-3); min-width: 0; min-height: var(--control-sm); font-size: 13px; color: var(--ink-muted); }
.dk-sl__l { flex: none; white-space: nowrap; }
.dk-sl__v { flex: none; min-width: 5ch; text-align: right; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.dk-sl__r { --fill: 0%; flex: 1 1 auto; min-width: 96px; height: 24px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.dk-sl__r::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-pill); background: linear-gradient(to right, var(--accent-fill) var(--fill), var(--surface-raised) var(--fill)); }
.dk-sl__r::-moz-range-track { height: 4px; border-radius: var(--radius-pill); background: linear-gradient(to right, var(--accent-fill) var(--fill), var(--surface-raised) var(--fill)); }
.dk-sl__r::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; border: 0; border-radius: var(--radius-pill); background: var(--accent-fill); box-shadow: 0 0 0 4px var(--surface); transition: transform var(--duration-fast) var(--ease-out); -webkit-appearance: none; appearance: none; }
.dk-sl__r::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: var(--radius-pill); background: var(--accent-fill); box-shadow: 0 0 0 4px var(--surface); }
.dk-sl__r:hover::-webkit-slider-thumb { transform: scale(1.1); }
.dk-sl__r:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-sm); }
.dk-seg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--ink-muted); }
.dk-seg__l { margin-right: var(--space-1); }
.dk-seg__o { position: relative; display: inline-flex; }
.dk-seg__o input { position: absolute; width: 0; height: 0; opacity: 0; }
.dk-seg__o span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink-muted); cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.dk-seg__o span:hover { color: var(--ink); }
.dk-seg__o input:checked + span { background: var(--accent-wash); color: var(--accent); font-weight: 500; }
.dk-seg__o input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.dk-tog { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; font-size: 13px; color: var(--ink-muted); cursor: pointer; }
.dk-tog input { position: absolute; width: 0; height: 0; opacity: 0; }
.dk-tog__k { position: relative; flex: none; width: 30px; height: 18px; border-radius: var(--radius-pill); background: var(--surface-raised); transition: background var(--duration-fast) var(--ease-out); }
.dk-tog__k::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: var(--radius-pill); background: var(--ink-faint); transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
.dk-tog input:checked + .dk-tog__k { background: var(--accent-fill); }
.dk-tog input:checked + .dk-tog__k::after { transform: translateX(12px); background: var(--on-accent); }
.dk-tog input:focus-visible + .dk-tog__k { outline: 2px solid var(--focus); outline-offset: 2px; }
.dk-tl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.dk-tl__p { min-width: 92px; justify-content: center; }
.dk-tl .p-btn--icon { font-size: 15px; }
.dk-tl__s { margin-left: var(--space-2); font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dk-pre { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dk-pill { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-muted); font: inherit; font-size: 13px; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.dk-pill:hover { background: color-mix(in srgb, var(--ink) 11%, transparent); color: var(--ink); }
.dk-pill[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent); }
.dk-pill:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dk-reset { margin-left: auto; }
.dk-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.dk-svg .k-body { stroke-width: var(--k-wf); }
.dk-svg .k-wire, .dk-svg .k-head, .dk-svg .dk-m { fill: none; stroke-width: var(--k-wf); stroke-linecap: round; }
.dk-txt { fill: var(--ink-muted); font-family: var(--font-sans); font-size: 12px; font-variant-numeric: tabular-nums; }
.dk-txt--s { fill: var(--ink-faint); font-family: var(--font-mono); font-size: 11px; }
.dk-txt--big { fill: var(--ink); font-family: var(--font-mono); font-size: 18px; font-weight: 600; }
.dk-txt--axis { fill: var(--ink-faint); font-size: 11px; }
.dk-txt--mark { fill: var(--ink-muted); font-size: 11px; font-weight: 500; }
.dk-txt--mark.is-hot { fill: var(--accent); font-weight: 600; }
.dk-txt--halo { paint-order: stroke; stroke: var(--ground); stroke-width: 4px; stroke-linejoin: round; }
.dk-core { fill: var(--surface); stroke: var(--k-edge); }
.dk-svg .k-bar { stroke: none; fill: var(--accent-fill); }
.dk-svg .k-bar.is-quiet { fill: color-mix(in oklab, var(--accent-fill) 42%, var(--surface)); }
.dk-chain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.dk-chain .k-chip { font-family: var(--font-mono); font-size: 13px; font-weight: 400; letter-spacing: 0; }
.dk-chain .k-chip--token { font-weight: 600; }
.dk-chain__a { color: var(--ink-faint); }
.dk-eval { display: flex; align-items: baseline; gap: var(--space-3); margin-top: var(--space-5); }
.dk-eval__k { font-size: 13px; color: var(--ink-faint); }
.dk-eval__v { font-size: 32px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.dk-trace { font-family: var(--font-mono); font-size: 13px; line-height: 24px; color: var(--ink-muted); overflow-x: auto; }
.dk-trace__r { display: flex; gap: var(--space-2); white-space: nowrap; }
.dk-trace__r.is-now, .dk-trace__r.is-done { color: var(--ink); }
.dk-trace__g { color: var(--accent); }
.dk-trace__v { color: var(--accent); }
.dk .dk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.dk-stats__i { min-width: 0; }
.dk .dk-stats dt { font-size: 12px; line-height: 16px; color: var(--ink-faint); }
.dk .dk-stats dd { margin: 2px 0 0; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dk-stats__i.is-avg dd { color: var(--ink-muted); }
.dk-stats__i.is-hot dd { color: var(--accent); }
.dk-stats__i.is-bad dd { color: var(--danger); }
.dk-m { stroke: var(--ink-faint); }
.dk-m--avg { stroke: var(--ink-muted); }
.dk-m--hot { stroke: var(--accent); stroke-width: 2px; }
.dk .dk-stats[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dk .dk-stats[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dk .dk-stats[data-n="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dk__s:has(.dk-layer) { container-type: inline-size; padding: var(--space-4); }
.dk-layer { position: relative; min-width: 0; }
.dk-layer canvas { display: block; width: 100%; border-radius: var(--radius-sm); -webkit-tap-highlight-color: transparent; }
.dk-layer canvas:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dk-layer canvas.is-drag { cursor: grab; user-select: none; -webkit-user-select: none; }
.dk-layer canvas.is-dragging { cursor: grabbing; }
.dk .dk-layer__t { margin: 0 0 var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink-faint); }
.dk-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.dk__s > .dk-two + .dk-two, .dk__s > .dk-layer + .dk-layer, .dk__s > .dk-two + .dk-layer, .dk__s > .dk-layer + .dk-two { margin-top: var(--space-4); }
.dk-keys { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-3) 0 0; font-size: 12px; line-height: 16px; color: var(--ink-faint); }
.dk-key { display: inline-flex; align-items: center; gap: var(--space-2); }
.dk-key.is-off { opacity: 0.45; }
.dk-key__s { flex: none; width: 14px; height: 3px; border-radius: var(--radius-pill); }
.dk-key__s--dot, .dk-key__s--ring { width: 8px; height: 8px; }
@container (max-width: 520px) {
  .dk-two { grid-template-columns: minmax(0, 1fr); }
  .dk .dk-stats[data-n="4"], .dk .dk-stats[data-n="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-2); }
}
@media (max-width: 520px) {
  .dk__s:has(.dk-layer) { padding: var(--space-3); }
}
.dk-ed { min-width: 0; margin: 0; padding: 0; border: 0; }
.dk-ed > legend { padding: 0; margin-bottom: var(--space-2); }
.dk-ed__g { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); max-width: 560px; }
.dk-ed__make { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.dkf { background: var(--surface); }
.dkf > .dk { margin: 0; padding: 0; background: transparent; }
.dk--made .dk__fr { display: block; width: 100%; min-height: 96px; border: 0; background: transparent; }
.dk--made.is-waiting .dk__still { display: none; }
.dk--made.is-broken .dk__fr { display: none; }
.dk .dk__still { padding: 0; background: none; }
.dk--made.is-still .dk__still, .dk--made.is-broken .dk__still { margin-top: 0; }
.dk__still .dk__pic { display: block; width: 100%; height: auto; border-radius: var(--radius-md); background: var(--ground); }
.dk .dk__still p { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.dk__still .dk__pic + p, .dk__still p + p { margin-top: var(--space-3); }
.dm-sheet { width: min(720px, calc(100vw - var(--space-6))); }
.dmc__pv .dk { margin: 0; }
.dmc__ran { display: flex; gap: var(--space-2); margin: 0; font-size: 13.5px; line-height: 19px; color: var(--ink-muted); }
.dmc__g { flex: none; color: var(--accent); }
.dmc__more { font-size: 13px; line-height: 19px; color: var(--ink-muted); }
.dmc__more > summary { width: fit-content; color: var(--ink-faint); cursor: pointer; }
.dmc__more > summary:hover { color: var(--ink); }
.pz-fail .dmc__more { margin-top: var(--space-2); }
.dmc__list { display: grid; gap: var(--space-1); margin: var(--space-2) 0 0; padding-left: var(--space-5); overflow-wrap: anywhere; }
.dmc__again { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-raised); }
.dmc__again[hidden] { display: none; }
.dmc__again-a { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
@media (max-width: 720px) {
  .dm-sheet { width: 100vw; }
}
@media (max-width: 520px) {
  .dk { padding: var(--space-4); }
  .dk__s { padding: var(--space-4); }
  .dk-sl { flex-basis: 100%; }
  .dk-sl__l { flex: 0 1 auto; min-width: 0; white-space: normal; }
  .dk .dk-stats dd { font-size: 17px; line-height: 22px; }
}
@media (max-width: 420px) {
  .dk .dk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .dk-seg__o span, .dk-tog__k, .dk-tog__k::after, .dk-pill, .dk-sl__r::-webkit-slider-thumb { transition: none; }
}

.bt__code { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0; overflow-wrap: anywhere; }
.bt__body { display: grid; gap: var(--space-4); padding: var(--space-2) var(--space-4) var(--space-5); min-width: 0; }
.bt__brief > :first-child { margin-top: 0; }
.bt__brief > :last-child { margin-bottom: 0; }
.bt__files { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.bt__cmd { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--code-bg); color: var(--code-ink); }
.bt__out .p-out { white-space: pre-wrap; word-break: break-word; max-height: 28rem; overflow: auto; }
.bt__done { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-3) var(--space-4); font-size: 14px; color: var(--ink); background: var(--surface); }
.bt__acts { flex-wrap: wrap; justify-content: flex-end; }
.bt-ed__list { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface); }
.bt-ed__f { display: flex; align-items: center; gap: var(--space-3); min-width: 0; font-size: 13px; }
.bt-ed__f .bt__code { flex: 1; min-width: 0; }
.bt-ed__up { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.bt-ed__up input[type="file"] { display: none; }