/* Experience notebook. Site fonts/tokens are self-hosted; tool styles stay inside its main region. */
.notebook-page {
  --paper: var(--color-paper); --paper-2: var(--color-paper-2); --field: #faf7ef;
      --ink: var(--color-ink); --ink-2: var(--color-ink-2); --bronze: var(--color-accent);
      --rule: #c8bfaf; --focus: var(--color-focus); --error: #8a3025;
      --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      --body: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
      --ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.notebook-shell *,
.notebook-shell *::before,
.notebook-shell *::after { box-sizing: border-box; }
.notebook-shell { margin: 0; font: 1.125rem/1.55 var(--body); }
.notebook-shell button,
.notebook-shell input,
.notebook-shell textarea,
.notebook-shell select { font: inherit; }
.notebook-shell button,
.notebook-shell input,
.notebook-shell textarea { border-radius: 3px; }
.notebook-shell button { cursor: pointer; }
.notebook-shell button,
.notebook-shell summary,
.notebook-shell a,
.notebook-shell input,
.notebook-shell textarea { -webkit-tap-highlight-color: transparent; }
.notebook-shell :focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.notebook-shell a { color: var(--bronze); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.notebook-shell a:hover { color: var(--ink); }
.notebook-shell [hidden] { display: none !important; }
.notebook-shell { width: min(100% - 6rem, 72rem); margin-inline: auto; }
.notebook-shell .eyebrow,
.notebook-shell .quiet-label { font: .6875rem/1.4 var(--ui); letter-spacing: .09em; text-transform: uppercase; }
.notebook-shell .intro { padding: 3.5rem 0 2rem; max-width: 49rem; }
.notebook-shell .eyebrow { margin: 0 0 1rem; color: var(--bronze); }
.notebook-shell h1 { font: 600 3.375rem/1.05 var(--display); letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.notebook-shell .dek { font-size: 1.375rem; line-height: 1.5; margin: 1.25rem 0 0; max-width: 43rem; }
.notebook-shell .intro-actions { display: flex; gap: .5rem 1.25rem; flex-wrap: wrap; margin-top: 1.5rem; }
.notebook-shell button { min-height: 44px; border: 1px solid var(--rule); background: transparent; padding: .65rem 1rem; color: var(--ink); font: 500 .8125rem/1.4 var(--ui); transition: background-color .15s, border-color .15s; }
.notebook-shell button:hover { background: var(--paper-2); border-color: var(--ink-2); }
.notebook-shell button:disabled { opacity: .55; cursor: not-allowed; }
.notebook-shell button:disabled:hover { background: transparent; border-color: var(--rule); }
.notebook-shell .text-button { border-color: transparent; padding-inline: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.notebook-shell .text-button:hover { background: transparent; border-color: transparent; color: var(--bronze); }
.notebook-shell .primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.notebook-shell .primary:hover { background: #454035; border-color: #454035; }
.notebook-shell .primary:disabled,
.notebook-shell .primary:disabled:hover { background: var(--ink); border-color: var(--ink); }
.notebook-shell .notice { border: 1px solid var(--rule); padding: 1rem 1.25rem; margin: 0 0 1.5rem; max-width: 49rem; }
.notebook-shell .notice p { margin: 0; }
.notebook-shell .notice .button-row { margin-top: .8rem; }
.notebook-shell .notice[data-tone="error"] { border-color: var(--error); color: var(--error); }
.notebook-shell .notice[data-tone="error"] a { color: inherit; }
.notebook-shell #message:empty { display: none; }
.notebook-shell #confirmation:focus { outline: none; }
.notebook-shell .example-notice { border-block: 1px solid var(--rule); padding: .75rem 0; color: var(--ink-2); font-size: 1rem; max-width: 49rem; }
.notebook-shell .workspace { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 4.5rem; border-top: 1px solid var(--rule); align-items: start; }
.notebook-shell form { min-width: 0; }
.notebook-shell .section { padding: 1.75rem 0 2rem; border-bottom: 1px solid var(--rule); }
.notebook-shell h2,
.notebook-shell .section-title { font: 600 1.5rem/1.25 var(--display); letter-spacing: -.015em; margin: 0 0 .625rem; }
.notebook-shell .section-number { font: .75rem/1 var(--ui); color: var(--bronze); margin-right: .7rem; vertical-align: middle; letter-spacing: .04em; }
.notebook-shell .section-help { margin: 0 0 1.25rem; color: var(--ink-2); font-size: 1.0625rem; }
.notebook-shell .field { margin-top: 1.125rem; }
.notebook-shell .field:first-child { margin-top: 0; }
.notebook-shell label { display: block; font: 600 .8125rem/1.45 var(--ui); margin-bottom: .5rem; }
.notebook-shell .optional { color: var(--ink-2); font-weight: 400; font-size: .75rem; }
.notebook-shell textarea,
.notebook-shell input[type="date"] { display: block; width: 100%; min-width: 0; border: 1px solid var(--rule); color: var(--ink); background: var(--field); padding: .875rem 1rem; line-height: 1.5; }
.notebook-shell textarea { resize: vertical; min-height: 8rem; font-size: 1.125rem; }
.notebook-shell #observation { min-height: 11rem; }
.notebook-shell textarea:hover,
.notebook-shell input[type="date"]:hover { border-color: #a89c88; }
.notebook-shell textarea:focus,
.notebook-shell input[type="date"]:focus { border-color: var(--focus); }
.notebook-shell input[type="date"] { width: 13.5rem; max-width: 100%; min-height: 48px; font: .9375rem/1.5 var(--ui); }
.notebook-shell .hint { color: var(--ink-2); font-size: .9375rem; margin: .5rem 0 0; line-height: 1.45; }
.notebook-shell details.section { padding-block: 1.5rem; }
.notebook-shell summary { cursor: pointer; min-height: 44px; display: list-item; list-style-position: outside; margin-left: 1.1rem; padding: .4rem .125rem .4rem .125rem; font: 600 1.3125rem/1.35 var(--display); }
.notebook-shell summary::marker { color: var(--bronze); font-size: .7em; }
.notebook-shell summary .optional { font-family: var(--ui); display: inline-block; margin-left: .625rem; vertical-align: middle; }
.notebook-shell details[open] > summary { margin-bottom: .75rem; }
.notebook-shell .detail-content { padding-top: .2rem; }
.notebook-shell .secondary-detail { margin-top: 1.125rem; }
.notebook-shell .secondary-detail > summary { font: 600 .8125rem/1.5 var(--ui); }
.notebook-shell .original { margin-top: 1.25rem; padding: 1.125rem; border: 1px solid var(--rule); }
.notebook-shell .original .quiet-label { color: var(--bronze); margin: 0 0 .625rem; }
.notebook-shell .original-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.notebook-shell .original-meta { font: .75rem/1.6 var(--ui); color: var(--ink-2); margin: .75rem 0 0; }
.notebook-shell .original > details { margin-top: .625rem; }
.notebook-shell .original > details > summary { min-height: 44px; font: .75rem/1.5 var(--ui); }
.notebook-shell .original > details > p { margin: .5rem 0 0; font-size: .9375rem; color: var(--ink-2); }
.notebook-shell #prediction-error { color: var(--error); }
.notebook-shell .rail { padding-top: 1.9rem; position: sticky; top: 1.5rem; }
.notebook-shell .rail h2 { font-size: 1.1875rem; margin-bottom: .75rem; }
.notebook-shell .rail p { font-size: 1rem; margin: .75rem 0; }
.notebook-shell .rail-block + .rail-block { border-top: 1px solid var(--rule); margin-top: 1.5rem; padding-top: 1.5rem; }
.notebook-shell .device-status { font: 600 .8125rem/1.5 var(--ui) !important; }
.notebook-shell .save-permission { display: flex; align-items: flex-start; gap: .625rem; font: .8125rem/1.55 var(--ui); cursor: pointer; margin: 1rem 0; padding-block: .25rem; }
.notebook-shell .save-permission input { flex: 0 0 18px; width: 18px; height: 18px; accent-color: var(--bronze); margin: .1rem 0 0; }
.notebook-shell .wide { width: 100%; }
.notebook-shell .button-row { display: flex; gap: .625rem; flex-wrap: wrap; }
.notebook-shell .file-actions button { flex: 1; }
.notebook-shell .file-input { display: block; width: 100%; margin-top: .625rem; font: .75rem/1.5 var(--ui); color: var(--ink-2); }
.notebook-shell .file-input::file-selector-button { min-height: 44px; border: 1px solid var(--rule); border-radius: 3px; background: transparent; padding: .65rem .8rem; margin-right: .625rem; color: var(--ink); font: 500 .75rem/1.4 var(--ui); cursor: pointer; }
.notebook-shell .file-input::file-selector-button:hover { background: var(--paper-2); }
.notebook-shell #load-saved,
.notebook-shell #remove-saved { font-size: .75rem; margin-top: .4rem; }
.notebook-shell #remove-saved { color: var(--ink-2); }
.notebook-shell .reading { max-width: 47rem; padding: 2rem 0 3rem; }
.notebook-shell .reading h2 { font-size: 1.3125rem; }
.notebook-shell .reading p { font-size: 1.0625rem; margin: .5rem 0 1rem; }
.notebook-shell .reading .links { display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; font-size: 1rem; }
.notebook-shell .reading a { padding-block: .45rem; min-height: 44px; display: inline-flex; align-items: center; }
.notebook-shell .notebook-privacy { border-top: 1px solid var(--rule); padding-block: 1.25rem 2rem; color: var(--ink-2); font: .75rem/1.7 var(--ui); }
.notebook-shell .notebook-privacy { margin: 0; max-width: 70ch; }
.notebook-shell .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 950px) {
.notebook-shell { width: calc(100% - 3rem); }
.notebook-shell .workspace { gap: 2rem; grid-template-columns: minmax(0, 1fr) 15rem; }
.notebook-shell h1 { font-size: 3rem; }
}
@media (max-width: 720px) {
.notebook-shell { width: calc(100% - 2.5rem); }
.notebook-shell .intro { padding: 2.25rem 0 1.5rem; }
.notebook-shell h1 { font-size: 2.5rem; }
.notebook-shell .dek { font-size: 1.25rem; }
.notebook-shell .workspace { display: block; }
.notebook-shell .rail { position: static; padding: 1.75rem 0; }
.notebook-shell .rail-block { max-width: 35rem; }
.notebook-shell .rail-block:first-child { display: none; }
.notebook-shell .rail-block:nth-child(2) { margin-top: 0; border-top: 0; padding-top: 0; }
.notebook-shell .reading { border-top: 1px solid var(--rule); padding: 1.75rem 0 2rem; }
.notebook-shell .section { padding: 1.5rem 0 1.75rem; }
.notebook-shell .notice { padding: 1rem; }
}
@media (max-width: 360px) {
.notebook-shell { width: calc(100% - 2rem); }
.notebook-shell h1 { font-size: 2.25rem; }
.notebook-shell summary .optional { display: block; margin: .3rem 0 0; }
.notebook-shell textarea { padding: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
.notebook-shell *,
.notebook-shell *::before,
.notebook-shell *::after { transition: none !important; }
}
@media print {
.notebook-shell { width: 100%; }
.notebook-shell .intro { padding: 1.5rem 0; }
.notebook-shell .workspace { display: block; }
.notebook-shell .rail,
.notebook-shell .intro-actions,
.notebook-shell .notice,
.notebook-shell button,
.notebook-shell .reading,
.notebook-shell .notebook-privacy { display: none !important; }
.notebook-shell,
.notebook-shell textarea,
.notebook-shell input[type="date"] { background: #fff; color: #000; }
.notebook-shell textarea { min-height: 0; }
.notebook-shell .section { break-inside: avoid; }
}
@media print { .notebook-page .masthead, .notebook-page .foot { display: none; } }