@layer reset, tokens, base, layout, components, responsive, motion;
@font-face { font-family: Archivo; src: url('./assets/archivo.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('./assets/dm-sans.woff2') format('woff2'); font-weight: 100 1000; font-display: swap; }
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  img, svg { display: block; max-inline-size: 100%; }
  button, input, select { font: inherit; }
  button, a, select, input { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  button { cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  fieldset { border: 0; padding: 0; min-inline-size: 0; }
  [hidden] { display: none !important; }
}
@layer tokens {
  :root {
    color-scheme: light dark;
    --paper: light-dark(oklch(96.3% .007 65), oklch(21% .007 65));
    --ink: light-dark(oklch(24% .008 55), oklch(94% .008 65));
    --accent: light-dark(oklch(45% .14 34), oklch(75% .11 40));
    --button-fill: oklch(45% .14 34);
    --button-ink: oklch(99% .002 65);
    --muted: color-mix(in oklch, var(--ink) 77%, var(--paper));
    --line: color-mix(in oklch, var(--ink) 20%, var(--paper));
    --surface: color-mix(in oklch, var(--paper) 97%, var(--ink));
    --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
    --content: 80rem;
    --body: 'DM Sans', Arial, sans-serif;
    --display: Archivo, 'DM Sans', Arial, sans-serif;
  }
}
@layer base {
  html { inline-size: 100%; scrollbar-gutter: stable; }
  body { inline-size: 100%; min-inline-size: 0; background: var(--paper); color: var(--ink); font: 1.0625rem/1.65 var(--body); -webkit-font-smoothing: antialiased; }
  h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.2; text-wrap: balance; }
  h2 { font-size: clamp(2rem, 1.6rem + 1vw, 2.625rem); letter-spacing: -.045em; }
  h3 { font-size: 1.25rem; letter-spacing: -.025em; }
  p { text-wrap: pretty; }
  ::selection { background: var(--accent); color: var(--paper); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
  button:disabled { cursor: not-allowed; opacity: .45; }
  main section[id] { scroll-margin-block-start: 2rem; }
  .skip-link { position: fixed; z-index: 30; inset-block-start: 1rem; inset-inline-start: 1rem; padding: .7rem 1rem; background: var(--ink); color: var(--paper); transform: translateY(-180%); clip-path: inset(50%); }
  .skip-link:focus { transform: translateY(0); clip-path: none; }
  .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}
@layer layout {
  .section-wrap { inline-size: min(calc(100% - var(--gutter) * 2), var(--content)); margin-inline: auto; }
  .site-header { display: flex; align-items: center; gap: 2.5rem; min-block-size: 5.5rem; padding-inline: var(--gutter); border-block-end: 1px solid var(--line); }
  .desktop-nav { display: flex; gap: 2rem; margin-inline: auto; font-size: 1rem; }
  .model-section { padding-block: 3.5rem 2.5rem; }
  .section-intro, .process-heading { max-inline-size: 52rem; margin-block: 0 2rem; }
  .model-section h2, .process-section h2, .permission-section h2, .network-section h2, .questions-section h2, .closing h2 { max-inline-size: 47rem; font-size: clamp(1.875rem, 1.5rem + .75vw, 2.375rem); letter-spacing: -.04em; }
  .section-intro > p, .process-heading > p { color: var(--muted); margin-block-start: 1.1rem; max-inline-size: 47rem; }
  .model-tabs { display: flex; flex-wrap: wrap; gap: .3rem 2rem; }
  .model-tabs button { background: transparent; color: var(--muted); border: 0; font-family: var(--display); font-weight: 450; font-size: 1.1875rem; letter-spacing: -.025em; line-height: 1.45; min-block-size: 2.75rem; padding: .45rem 0; text-align: start; text-underline-offset: .4em; text-decoration-thickness: 1px; }
  .model-tabs button[aria-selected='true'] { color: var(--accent); text-decoration-line: underline; }
  .specimen-body { max-inline-size: 56rem; padding-block-start: 1.75rem; }
  .model-map, .model-panel { min-inline-size: 0; }
  .model-panel h3 { font-size: 1.5rem; margin-block-end: .75rem; }
  .model-panel > p { max-inline-size: 47rem; color: var(--muted); }
  .model-evidence { margin-block-start: .75rem; }
  .model-evidence > summary, .lifecycle-details > summary, .permission-workbench > summary, .privacy-details > summary { display: flex; align-items: center; gap: .75rem; inline-size: fit-content; max-inline-size: 100%; min-block-size: 2.75rem; padding-block: .5rem; color: var(--accent); font-size: .9375rem; line-height: 1.5; cursor: pointer; list-style: none; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .35em; text-decoration-thickness: 1px; }
  .model-evidence > summary::-webkit-details-marker, .lifecycle-details > summary::-webkit-details-marker, .permission-workbench > summary::-webkit-details-marker, .privacy-details > summary::-webkit-details-marker { display: none; }
  .model-evidence > summary svg, .lifecycle-details > summary svg, .permission-workbench > summary svg, .privacy-details > summary svg { flex: 0 0 auto; inline-size: 1rem; block-size: 1rem; }
  .model-evidence[open] > summary svg, .lifecycle-details[open] > summary svg, .permission-workbench[open] > summary svg, .privacy-details[open] > summary svg { transform: rotate(45deg); }
  .model-map { max-inline-size: 52rem; margin-block-start: 1.5rem; }
  .record-sheet { max-inline-size: 49rem; }
  .record-sheet-label { display: block; color: var(--muted); font-size: .875rem; margin-block-end: .75rem; }
  .record-sheet > strong { display: block; font-family: var(--display); font-size: 1.1875rem; font-weight: 450; margin-block-end: .35rem; }
  .record-sheet dl + dl { margin-block-start: .75rem; }
  .record-sheet dl > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1.25rem; padding-block: .4rem; font-size: .9375rem; }
  .record-sheet dt { color: var(--muted); }
  .record-sheet > p { margin-block-start: .85rem; color: var(--muted); font-size: .9375rem; }
  .reference-atlas { inline-size: 100%; padding-block: 2rem 1rem; margin: 0; }
  .atlas-intro h3 { margin-block-end: .75rem; font-size: 1.25rem; letter-spacing: -.025em; }
  .atlas-intro > p { max-inline-size: 47rem; color: var(--muted); font-size: 1rem; }
  .atlas-grid { display: flex; align-items: start; gap: 2rem; margin-block-start: 1.5rem; }
  .mri-study { flex: 0 0 13rem; max-inline-size: 100%; }
  .mri-image { background: var(--ink); block-size: 13rem; overflow: clip; }
  .mri-image img { inline-size: 100%; block-size: 100%; object-fit: contain; }
  .atlas-grid figcaption { padding-block-start: .75rem; }
  .study-category { color: var(--muted); font-size: .875rem; }
  .atlas-grid small { display: block; margin-block-start: .6rem; font-size: .875rem; line-height: 1.55; color: var(--muted); }
  .atlas-grid small a { text-decoration: underline; text-underline-offset: .2em; }
  .atlas-copy { min-inline-size: 0; }
  .atlas-copy h4 { font-family: var(--display); font-weight: 450; font-size: 1.125rem; line-height: 1.4; letter-spacing: -.025em; margin-block: 0 .5rem; }
  .atlas-copy > p { color: var(--muted); font-size: 1rem; max-inline-size: 35rem; }
  .atlas-copy h4:not(:first-child) { margin-block-start: 1.25rem; }
  .atlas-copy .atlas-note { font-size: .875rem; margin-block-start: 1.25rem; }
  .specimen-note { max-inline-size: 49rem; padding-block-start: 1rem; font-size: .9375rem; color: var(--muted); }
  .process-section { padding-block: 2.5rem 3rem; }
  .process-journey { display: flex; flex-wrap: wrap; gap: 1rem 2.25rem; max-inline-size: 72rem; margin-block: 1.75rem 1rem; padding: 0; list-style: none; }
  .process-journey li { flex: 1 1 9.5rem; min-inline-size: 0; }
  .process-journey h3 { font-size: 1.1875rem; line-height: 1.45; max-inline-size: 12rem; }
  .lifecycle-details { margin-block-start: 1.25rem; }
  .process-list { list-style: none; padding: 1.25rem 0 0; max-inline-size: 52rem; }
  .process-list li + li { margin-block-start: 1.5rem; }
  .process-list h3 { font-size: 1.125rem; margin-block-end: .4rem; }
  .process-list p { max-inline-size: 47rem; color: var(--muted); font-size: 1rem; }
  .permission-inner { padding-block: 2.5rem 3rem; }
  .permission-inner .section-intro { margin-block-end: 1rem; }
  .permission-lab { max-inline-size: 69rem; padding-block: 1rem .5rem; }
  .lab-heading { max-inline-size: 47rem; padding-block: .25rem 1rem; color: var(--muted); font-size: .9375rem; }
  .lab-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
  .permission-controls { min-inline-size: 0; padding-block: .75rem; }
  .field-label, .permission-controls legend { color: var(--muted); font-size: .9375rem; }
  .permission-controls select { inline-size: 100%; display: block; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: .25rem; padding: .65rem .85rem; min-block-size: 3rem; margin-block: .5rem 1.5rem; font-size: 1rem; }
  .permission-controls legend { margin-block-end: .5rem; }
  .scope-option { display: flex; align-items: center; gap: 1rem; padding-block: .8rem; font-size: 1rem; cursor: pointer; }
  .scope-option input { inline-size: 1.15rem; block-size: 1.15rem; accent-color: var(--accent); flex: 0 0 auto; }
  .scope-option small { display: block; color: var(--muted); margin-block-start: .25rem; font-size: .875rem; line-height: 1.5; }
  .scope-check { margin-inline-start: auto; color: var(--accent); visibility: hidden; }
  .scope-option:has(:checked) .scope-check { visibility: visible; }
  .scope-term { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .875rem; margin-block: 1.25rem; }
  .lab-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .85rem 1.75rem; margin-block-start: 1.5rem; }
  .permission-result { min-inline-size: 0; padding-block: 1.75rem; align-self: center; }
  .result-overline { color: var(--muted); font-size: .9375rem; }
  .permission-result h3 { font-size: 1.5rem; margin-block: .8rem .75rem; }
  .permission-result > p { color: var(--muted); font-size: 1rem; max-inline-size: 35rem; }
  .permission-result .result-boundary { font-size: .875rem; margin-block-start: 1.25rem; }
  .result-scopes { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-block: 1rem; }
  .result-scopes li { font-size: .9375rem; color: var(--accent); }
  .privacy-notes { max-inline-size: 52rem; margin-block-start: 1.5rem; }
  .privacy-notes > p, .privacy-details > p { color: var(--muted); font-size: .9375rem; line-height: 1.7; }
  .privacy-details { margin-block-start: .5rem; }
  .privacy-details > p { max-inline-size: 49rem; padding-block: .5rem; }
  .network-section { padding-block: 2.5rem 3rem; }
  .network-copy { max-inline-size: 55rem; }
  .network-copy h2 { margin-block-end: 1.25rem; }
  .network-copy p { max-inline-size: 49rem; color: var(--muted); margin-block-start: 1rem; }
  .token-section { padding-block: 2.5rem 3rem; }
  .token-heading { margin-block-end: 1.25rem; }
  .token-heading h2 { font-size: clamp(2.375rem, 1.8rem + 1.2vw, 2.75rem); font-weight: 450; letter-spacing: -.04em; }
  .token-heading p { font-size: 1.1875rem; line-height: 1.5; margin-block-start: .75rem; color: var(--accent); }
  .token-intro { max-inline-size: 52rem; color: var(--muted); margin-block-end: 1.75rem; }
  .token-rows { max-inline-size: 55rem; }
  .token-use + .token-use { margin-block-start: .4rem; }
  .token-use > summary { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-block-size: 2.75rem; padding-block: .65rem; cursor: pointer; list-style: none; }
  .token-use > summary::-webkit-details-marker { display: none; }
  .token-use > summary h3 { display: flex; align-items: center; justify-content: space-between; gap: 2rem; inline-size: 100%; font-size: 1.25rem; }
  .token-use > summary svg { flex: 0 0 auto; inline-size: 1rem; block-size: 1rem; color: var(--muted); }
  .token-use[open] > summary { color: var(--accent); }
  .token-use[open] > summary svg { transform: rotate(45deg); }
  .token-use-copy { max-inline-size: 50rem; padding-block: .25rem 1.25rem; color: var(--muted); font-size: 1rem; }
  .token-use-copy > p + p { margin-block-start: .75rem; }
  .token-principle { max-inline-size: 55rem; margin-block-start: 2.25rem; }
  .token-principle > h3 { color: var(--accent); font-size: 1.125rem; font-weight: 450; }
  .token-principle > p { color: var(--muted); font-size: 1rem; margin-block-start: .6rem; }
  .questions-section { padding-block: 2.5rem 3rem; }
  .questions-heading h2 { margin-block-end: 1.5rem; }
  .questions-list { max-inline-size: 55rem; }
  .questions-list details + details { margin-block-start: .5rem; }
  .questions-list summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-block-size: 2.75rem; padding-block: .8rem; font-size: 1.0625rem; }
  .questions-list summary::-webkit-details-marker { display: none; }
  .questions-list summary > svg { flex: 0 0 auto; inline-size: 1rem; block-size: 1rem; color: var(--muted); }
  .questions-list details[open] summary > svg { transform: rotate(45deg); }
  .questions-list details p { max-inline-size: 50rem; color: var(--muted); font-size: 1rem; line-height: 1.75; padding-block: .3rem 1.25rem; }
  .closing { padding-block: 2.5rem 4.5rem; }
  .closing h2 { margin-block-end: 1.5rem; }
  .closing-brief svg { flex: 0 0 auto; }
  .closing > p { max-inline-size: 47rem; color: var(--muted); font-size: .9375rem; margin-block-start: 1.25rem; }
  .site-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; padding: 2rem var(--gutter); border-block-start: 1px solid var(--line); }
  .site-footer > p, .site-footer > a:not(.wordmark), .site-footer > span { color: var(--muted); font-size: .875rem; }
  .site-footer > a:not(.wordmark) { margin-inline-start: auto; }
}
@layer components {
  .wordmark { display: inline-flex; align-items: center; gap: .6rem; font: 500 1.875rem/1 var(--display); letter-spacing: -.065em; }
  .header-link { display: inline-flex; align-items: center; gap: .7rem; min-block-size: 2.75rem; font-size: 1rem; text-decoration: underline; text-underline-offset: .35em; text-decoration-color: var(--line); }
  .button { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-block-size: 3rem; padding: .75rem 1.25rem; border: 1px solid transparent; border-radius: .5rem; font-size: 1rem; font-weight: 500; line-height: 1.4; }
  .button-primary { background: var(--button-fill); color: var(--button-ink); box-shadow: 0 1px 1px oklch(20% .01 55 / .08); }
  .button-secondary, .revoke-button { background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: .5rem; min-block-size: 3rem; padding: .75rem 1.1rem; font-size: 1rem; }
  .lab-actions .button-primary, .lab-actions .revoke-button { justify-content: start; min-block-size: 2.75rem; padding: .45rem 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 1rem; font-weight: 500; text-decoration: underline; text-underline-offset: .4em; text-decoration-thickness: 1px; }
  .lab-actions .button-primary { color: var(--accent); }
  .lab-actions .revoke-button { color: var(--muted); }
  .closing-brief.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; min-block-size: 2.75rem; padding: .4rem 0; border: 0; border-radius: 0; background: transparent; color: var(--accent); box-shadow: none; font-size: 1rem; text-decoration: underline; text-underline-offset: .4em; text-decoration-thickness: 1px; }
  .form-error { color: var(--accent); font-size: .9375rem; }
  .menu-toggle { display: none; background: transparent; border: 0; padding: .75rem; min-inline-size: 2.75rem; min-block-size: 2.75rem; }
  .menu-toggle span { display: block; inline-size: 1.3rem; block-size: 1px; background: var(--ink); margin-block: .3rem; }
  .menu-dialog { position: fixed; inset: 0; margin: 0; padding: 1.5rem; inline-size: 100%; max-inline-size: none; max-block-size: none; block-size: 100dvh; background: var(--paper); color: var(--ink); border: 0; }
  .menu-dialog::backdrop { background: var(--paper); }
  .menu-dialog-heading { display: flex; align-items: center; justify-content: space-between; padding-block-end: 1rem; border-block-end: 1px solid var(--line); font-family: var(--display); font-size: 1.75rem; }
  .menu-dialog-heading button { min-block-size: 2.75rem; padding-inline: .5rem; font-size: 1rem; border: 0; background: transparent; color: var(--ink); }
  .menu-dialog-heading button span { font-size: 1.4rem; margin-inline-start: .5rem; }
  .menu-dialog nav { display: grid; margin-block-start: 2rem; }
  .menu-dialog nav a { display: flex; justify-content: space-between; align-items: center; padding-block: 1.4rem; border-block-end: 1px solid var(--line); font-size: 1.5rem; }
  .no-js .model-tabs, .no-js .menu-toggle { display: none; }
  .no-js .model-panel { padding-block: 1.5rem; }
  .no-js .record-sheet + .record-sheet { margin-block-start: 2rem; }
  .no-script-note { padding-block: 1rem; color: var(--muted); font-size: 1rem; }
}
@layer responsive {
  @media (max-width: 1000px) {
    .site-header { gap: 1.5rem; }
    .desktop-nav { gap: 1.25rem; }
    .model-tabs { gap: .3rem 1.5rem; }
    .process-journey { gap: 1.25rem 2rem; }
    .process-journey li { flex-basis: 12rem; }
  }
  @media (max-width: 700px) {
    .site-header { min-block-size: 4.75rem; gap: .8rem; }
    .wordmark { font-size: 1.625rem; }
    .desktop-nav { display: none; }
    .header-link { margin-inline-start: auto; font-size: .875rem; gap: .5rem; }
    .menu-toggle { display: block; margin-inline-end: -.75rem; }
    .model-section { padding-block: 2.5rem 2rem; }
    .section-intro, .process-heading { margin-block-end: 1.5rem; }
    .model-section h2, .process-section h2, .permission-section h2, .network-section h2, .questions-section h2, .closing h2 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2rem); }
    .section-intro > p, .process-heading > p { font-size: 1rem; }
    .model-tabs { gap: .3rem 1.5rem; }
    .model-tabs button { font-size: 1.0625rem; }
    .specimen-body { padding-block-start: 1.5rem; }
    .model-panel h3 { font-size: 1.35rem; }
    .model-panel > p { font-size: 1rem; }
    .record-sheet dl > div { grid-template-columns: 5.5rem minmax(0, 1fr); gap: .75rem; font-size: .9375rem; }
    .reference-atlas { padding-block-start: 1.75rem; }
    .atlas-grid { flex-direction: column; gap: 1.5rem; }
    .mri-study { flex-basis: auto; max-inline-size: 15rem; }
    .mri-image { block-size: 13rem; }
    .process-section { padding-block: 2rem; }
    .process-journey { flex-direction: column; gap: .9rem; margin-block: 1.5rem .75rem; }
    .process-journey li { flex-basis: auto; }
    .process-journey h3 { max-inline-size: none; font-size: 1.125rem; }
    .lifecycle-details { margin-block-start: .75rem; }
    .permission-inner { padding-block: 2rem; }
    .lab-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .scope-option { gap: .75rem; }
    .scope-term { flex-wrap: wrap; gap: .3rem; }
    .lab-actions { gap: .75rem 1.5rem; }
    .permission-result { padding-block: .5rem 1rem; }
    .permission-result h3 { font-size: 1.35rem; }
    .privacy-notes { margin-block-start: 1.25rem; }
    .network-section { padding-block: 2rem; }
    .network-copy p { font-size: 1rem; }
    .token-section { padding-block: 2rem; }
    .token-heading h2 { font-size: 2.375rem; }
    .token-heading p { font-size: 1.125rem; }
    .token-intro, .token-principle > p { font-size: 1rem; }
    .token-intro br, .token-heading p br { display: none; }
    .token-use > summary { gap: 1.25rem; }
    .token-use > summary h3 { font-size: 1.1875rem; }
    .token-principle { margin-block-start: 1.75rem; }
    .questions-section { padding-block: 2rem; }
    .questions-heading h2 { margin-block-end: 1.25rem; }
    .questions-list summary { font-size: 1rem; gap: 1.5rem; }
    .closing { padding-block: 2rem 3rem; }
    .site-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; padding-block: 1.75rem; }
    .site-footer > p, .site-footer > span { text-align: end; }
    .site-footer > a:not(.wordmark) { margin: 0; }
    .no-js .menu-toggle { display: none; }
    .no-js .desktop-nav { display: flex; flex-wrap: wrap; flex-basis: 100%; order: 3; padding-block-end: 1rem; gap: 1rem; }
    .no-js .site-header { flex-wrap: wrap; padding-block-start: 1rem; }
  }
}
@layer motion {
  @media (hover: hover) and (pointer: fine) {
    .desktop-nav a:hover, .header-link:hover, .site-footer a:hover { color: var(--accent); }
    .button, .revoke-button { transition: background-color .2s, border-color .2s, color .2s; }
    .button-primary:hover { background: oklch(39% .13 34); }
    .button-secondary:hover, .revoke-button:not(:disabled):hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }
    .model-tabs button:hover, .questions-list summary:hover, .token-use > summary:hover { color: var(--accent); }
    .model-evidence > summary:hover, .lifecycle-details > summary:hover, .permission-workbench > summary:hover, .privacy-details > summary:hover, .closing-brief:hover { text-decoration-color: currentColor; }
    .lab-actions .button-primary:hover, .lab-actions .revoke-button:not(:disabled):hover { color: var(--ink); background: transparent; border-color: transparent; }
  }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
  @media (prefers-contrast: more) { :root { --muted: var(--ink); --line: var(--ink); } }
  @media (forced-colors: active) { .model-tabs button[aria-selected='true'] { color: Highlight; text-decoration-thickness: 3px; } .scope-option input { appearance: auto; } }
}
