:root {
  color-scheme:light;
  --paper:#f5f2e9;
  --white:#fffdf7;
  --ink:#263d38;
  --muted:#566760;
  --line:#b5bdb0;
  --accent:#2e594d;
  --wash:#e6ece1;
  --focus:#934c2b;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:100%;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper)
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  overflow-wrap:anywhere
}

button,input,textarea,select {
  font:inherit
}

button,a,input,textarea,select {
  touch-action:manipulation
}

button {
  min-height:44px;
  padding:.65rem 1.1rem;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--ink);
  background:var(--white);
  cursor:pointer;
  font-weight:600;
  line-height:1.35
}

button:hover {
  background:var(--wash);
  border-color:var(--accent)
}

button:disabled {
  opacity:.55;
  cursor:default
}

button.primary {
  background:var(--accent);
  color:#fffdf7;
  border-color:var(--accent)
}

button.primary:hover:not(:disabled) {
  background:#23473d
}

button.primary span {
  margin-left:.9rem
}

a {
  color:var(--accent)
}

.text-button {
  background:transparent;
  border-color:transparent;
  font-size:.9rem;
  text-decoration:underline;
  text-underline-offset:4px
}

.text-button:hover {
  border-color:transparent
}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,select:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:4px
}

[tabindex="-1"]:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:6px
}

[hidden] {
  display:none!important
}

h1,h2,h3,p {
  margin:0 0 1rem
}

h1,h2 {
  font-family:Georgia,Cambria,"Times New Roman",serif;
  font-weight:400;
  line-height:1.13;
  letter-spacing:-.035em
}

h1 {
  font-size:clamp(2.15rem,4.1vw,3.7rem)
}

h2 {
  font-size:1.8rem
}

h3 {
  font-size:1rem;
  line-height:1.4
}

p {
  max-width:68ch
}

.small {
  font-size:.88rem;
  color:var(--muted)
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.74rem;
  font-weight:700;
  color:var(--accent);
  margin-bottom:1.2rem
}

.lead {
  font-size:1.15rem;
  line-height:1.6
}

.site-header,main,.site-footer {
  width:min(1120px,calc(100% - 64px));
  margin-inline:auto
}

.site-header {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.5rem 0;
  border-bottom:1px solid var(--line)
}

.brand {
  display:flex;
  align-items:center;
  gap:.7rem;
  color:var(--ink);
  text-decoration:none;
  font-size:1.05rem;
  font-weight:650
}

.brand img {
  flex:0 0 38px
}

.skip-link {
  position:absolute;
  top:0;
  left:1rem;
  z-index:10;
  background:var(--ink);
  color:white;
  padding:.75rem;
  transform:translateY(-150%)
}

.skip-link:focus {
  transform:translateY(0)
}

main {
  padding-block:2.8rem 1.5rem;
  min-height:65vh
}

.site-footer {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:start;
  gap:1rem;
  border-top:1px solid var(--line);
  padding-block:1.5rem 2rem;
  margin-top:1.5rem;
  font-size:.8rem;
  color:var(--muted)
}

.site-footer p {
  margin:0
}

.site-footer>div {
  display:flex;
  flex-wrap:wrap;
  gap:.2rem
}

.intro {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:2rem 3.2rem;
  padding-top:1.5rem
}

.intro-copy>p:not(.eyebrow) {
  max-width:44ch
}

.intro h1 {
  font-size:clamp(2.65rem,4.7vw,4.3rem);
  margin-bottom:1.5rem
}

.intro .primary {
  margin-top:.7rem;
  padding:.9rem 1.4rem
}

.intro-note {
  margin-top:.85rem
}

.intro-art {
  align-self:center;
  text-align:center;
  color:var(--muted)
}

.intro-art svg {
  width:100%;
  max-width:370px
}

.intro-art p {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:1rem
}

.art-ring {
  fill:none;
  stroke:#bec8b9;
  stroke-width:1
}

.art-petal {
  stroke:var(--paper);
  stroke-width:5
}

.petal-one {
  fill:#7e9e8b
}

.petal-two {
  fill:#b8ba94
}

.petal-three {
  fill:#ba9b7d
}

.petal-four {
  fill:#8da2a5
}

.art-core {
  fill:var(--paper)
}

.intro-bottom {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2rem;
  border-top:1px solid var(--line);
  padding-top:1.7rem;
  margin-top:.5rem
}

.intro-bottom p {
  font-size:.9rem;
  color:var(--muted)
}

.intro-bottom strong {
  display:inline-block;
  color:var(--ink);
  margin-bottom:.4rem
}

.selection-tray {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:.6rem 0;
  margin-bottom:.6rem
}

.selection-choices {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  min-width:0;
  gap:.3rem .8rem
}

.selection-choices h2 {
  font-family:inherit;
  font-size:.85rem;
  font-weight:650;
  letter-spacing:0;
  line-height:1.5;
  margin:0
}

.selection-choices h2 span {
  font-weight:400;
  color:var(--muted);
  font-size:.85rem;
  margin-left:.4rem
}

.selection-tray>.primary {
  flex-shrink:0;
  padding:.5rem .85rem;
  font-size:.9rem
}

#selected-list {
  display:flex;
  flex-wrap:wrap;
  gap:.3rem;
  list-style:none;
  padding:0;
  margin:0;
  min-width:0
}

#selected-list:empty {
  display:none
}

#selected-list button {
  background:var(--wash);
  border-color:var(--accent);
  font-size:.85rem;
  padding:.4rem .6rem
}

#selected-list button span {
  margin-left:.7rem
}

.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}

.narrow-screen {
  max-width:730px;
  margin:1.5rem auto 3rem
}

.field-label {
  display:block;
  font-weight:650;
  margin-bottom:.5rem
}

textarea {
  display:block;
  width:100%;
  min-width:0;
  font-size:1rem;
  line-height:1.6;
  padding:1rem;
  border:1px solid #788b7f;
  border-radius:8px;
  background:var(--white);
  color:var(--ink);
  resize:vertical;
  scroll-margin-bottom:2rem
}

.character-count {
  text-align:right;
  margin-top:.4rem
}

.actions,.export-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
  margin-top:1.3rem
}

.actions {
  justify-content:space-between
}

.summary-paper {
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:clamp(1.4rem,4vw,3rem)
}

.summary-paper h1 {
  font-size:clamp(2rem,4vw,3rem)
}

.summary-words {
  list-style:none;
  padding:0;
  margin:2rem 0;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem
}

.summary-words li {
  font-family:Georgia,serif;
  font-size:1.55rem;
  border:1px solid var(--line);
  padding:.6rem 1rem;
  border-radius:5px;
  background:var(--wash)
}

#summary-context {
  border-top:1px solid var(--line);
  padding-top:1.5rem
}

#summary-context h2 {
  font:650 .85rem system-ui,sans-serif;
  letter-spacing:0;
  margin-bottom:.8rem
}

#summary-note {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin:0
}

.export-notice {
  font-size:.85rem;
  color:var(--muted);
  margin:1.5rem 0 .6rem
}

.summary-back {
  border-top:1px solid var(--line);
  padding-top:1rem;
  margin-top:1.5rem;
  justify-content:flex-start
}

.status:empty {
  display:none
}

.status {
  position:fixed;
  bottom:1rem;
  left:50%;
  transform:translateX(-50%);
  z-index:4;
  width:max-content;
  max-width:calc(100% - 32px);
  background:var(--ink);
  color:white;
  padding:.7rem 1rem;
  border-radius:8px;
  font-size:.9rem;
  pointer-events:none
}

dialog {
  width:min(580px,calc(100% - 32px));
  max-height:calc(100dvh - 32px);
  padding:0;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  color:var(--ink);
  overflow:auto
}

dialog::backdrop {
  background:rgba(29,44,37,.55)
}

.dialog-content {
  padding:clamp(1.2rem,4vw,2rem)
}

dialog h2 {
  font-size:2rem
}

dialog h3 {
  margin:1.4rem 0 .5rem
}

dialog p {
  font-size:.92rem
}

dialog textarea {
  font-size:.9rem
}

.notice {
  border-left:3px solid var(--accent);
  background:var(--wash);
  padding:1rem
}

.dialog-content>.primary {
  margin-top:.8rem
}

@media(max-width:900px) {
  .intro {
    gap:2rem
  }
  .intro-art svg {
    max-width:300px
  }
}

@media(max-width:650px) {
  .site-header,main,.site-footer {
    width:calc(100% - 36px)
  }
  .site-header {
    padding-block:1rem;
    gap:.3rem
  }
  .brand {
    font-size:.96rem
  }
  .brand img {
    width:30px;
    height:30px;
    flex-basis:30px
  }
  .site-header .text-button {
    padding-inline:.4rem;
    font-size:.8rem
  }
  main {
    padding-top:2rem
  }
  .intro {
    grid-template-columns:minmax(0,1fr);
    padding-top:0;
    gap:1.5rem
  }
  .intro h1 {
    font-size:2.85rem
  }
  .intro-art {
    display:none
  }
  .intro-bottom {
    grid-template-columns:minmax(0,1fr);
    gap:.5rem;
    padding-top:1.3rem
  }
  .intro-bottom p {
    margin-bottom:.6rem
  }
  .narrow-screen {
    margin-top:0
  }
  .actions button {
    flex:1 1 auto
  }
  .export-actions button {
    flex:1 1 auto
  }
  .site-footer {
    gap:.4rem
  }
  .site-footer>div {
    margin-left:0
  }
  .summary-words li {
    font-size:1.3rem
  }
  .status {
    bottom:auto;
    top:.75rem
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important
  }
}

@media(forced-colors:active) {
  :root {
    --paper:Canvas;
    --white:Canvas;
    --ink:CanvasText;
    --muted:CanvasText;
    --line:CanvasText;
    --accent:Highlight;
    --wash:Canvas;
    --focus:Highlight
  }
  button.primary {
    background:ButtonFace;
    color:ButtonText;
    border-color:ButtonText
  }
  .status {
    background:Canvas;
    color:CanvasText;
    border:1px solid CanvasText
  }
  .intro-art {
    display:none
  }
}

@media print {
  @page {
    margin:18mm
  }
  :root {
    background:white;
    color:black
  }
  body {
    background:white;
    font-size:12pt
  }
  body>*:not(main),main>*:not(#summary-screen),.no-print,dialog,.skip-link {
    display:none!important
  }
  main,#summary-screen {
    display:block!important;
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
    min-height:0
  }
  .summary-paper {
    background:white;
    color:black;
    border:0;
    padding:0
  }
  .summary-paper h1 {
    font-size:24pt
  }
  .summary-words {
    display:block;
    margin:1rem 0
  }
  .summary-words li {
    border:0;
    background:white;
    color:black;
    padding:.2rem 0;
    font-size:16pt;
    break-inside:avoid
  }
  #summary-context {
    border-top:1px solid #888
  }
  #summary-note {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    max-width:none
  }
  #summary-context h2 {
    font-size:12pt
  }
  .summary-paper .eyebrow {
    display:none
  }
}



/* Keep the family choices in place while the complete family changes below. */
body:has(#browse-screen:not([hidden])) :is(.site-header,main,.site-footer) { width:min(1360px,calc(100% - 48px)); }
body:has(#browse-screen:not([hidden])) .site-header { padding-block:.5rem; }
main:has(#browse-screen:not([hidden])) { padding-block:.65rem .75rem; }
.section-top { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.section-top h1 { font-size:1.65rem; margin:0; }
#family-chooser { container-type:inline-size; container-name:families; scroll-margin-top:.75rem; }
#family-chooser p { margin:0 0 .5rem; }
.family-buttons { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.4rem; }
.family-button { text-align:center; background:var(--wash); padding:.5rem .35rem; font-size:.9rem; font-weight:500; }
.family-button[aria-pressed="true"] { background:var(--accent); color:var(--white); border-color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
#family-root { margin:.4rem 0 1rem; }
.family-branches { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.15rem 1.3rem; align-items:start; }
.family-branch { min-width:0; border-top:2px solid var(--line); padding-top:.15rem; }
.feeling-entry { min-width:0; border-radius:5px; padding-bottom:.5rem; }
.feeling-entry.selected { background:var(--wash); box-shadow:inset 3px 0 var(--accent); }
.feeling-heading { margin:0; font:600 1rem/1.4 system-ui,sans-serif; letter-spacing:0; min-width:0; }
#family-heading { font:600 1.25rem/1.3 system-ui,sans-serif; }
.feeling-label { display:flex; align-items:center; gap:.55rem; min-height:44px; padding:.3rem .3rem; cursor:pointer; }
@media (pointer:fine) and (min-width:551px) { .feeling-label { min-height:32px; } }
.feeling-label input { width:19px; height:19px; flex:0 0 19px; margin:0; accent-color:var(--accent); }
.feeling-label:has(input:focus-visible) { outline:3px solid var(--focus); outline-offset:2px; }
.word-definition,.word-feedback { font-size:.9rem; line-height:1.45; margin:0; padding:0 .3rem 0 calc(.85rem + 19px); max-width:65ch; color:var(--muted); }
.word-feedback { color:var(--focus); font-weight:600; margin-top:.4rem; }
.specific-words { list-style:none; margin:.15rem 0 0 .7rem; padding:0 0 0 .55rem; border-left:1px solid var(--line); }
.specific-words li+li { margin-top:.25rem; }
.specific-words .feeling-heading { font-weight:400; }
.family-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.3rem 1rem; margin-top:1rem; border-top:1px solid var(--line); padding-top:.4rem; }
.hierarchy-help { margin:0; }
body:has(#browse-screen:not([hidden])) .site-footer { margin-top:.5rem; padding-top:.75rem; }
/* Announcements do not cover the browsing controls; limit feedback is inline. */
body:has(#browse-screen:not([hidden])) .status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media(max-width:1050px) {
  .family-branches { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:750px) {
  .family-buttons { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .family-branches { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:550px) {
  body:has(#browse-screen:not([hidden])) :is(.site-header,main,.site-footer) { width:calc(100% - 28px); }
  .family-branches { grid-template-columns:minmax(0,1fr); }
  .word-definition { font-size:.95rem; }
  .selection-tray { align-items:flex-start; }
}
@media(max-width:450px) {
  .section-top { gap:.5rem; }
  .section-top .text-button { padding-inline:.2rem; }
  .family-button { font-size:.82rem; }
}
@media(forced-colors:active) {
  .feeling-entry.selected { border-left:3px solid Highlight; }
  .family-button { background:ButtonFace; color:ButtonText; }
  .family-button[aria-pressed="true"] { background:Highlight; color:HighlightText; }
}
@container families (max-width:19rem) { .family-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container families (max-width:12rem) { .family-buttons { grid-template-columns:minmax(0,1fr); } }

/* Normal page flow is also the fallback for zoom, narrow and short screens. */
#browse-screen { display:grid; grid-template-areas:"title" "families" "selection" "words"; min-width:0; }
#browse-screen>.section-top { grid-area:title; }
#family-chooser { grid-area:families; min-width:0; }
#family-content { grid-area:words; min-width:0; }
.selection-tray { grid-area:selection; }
.split-only { display:none; }

/* The viewport owns the two scroll panes; the selection tray never overlays them. */
body.split-browse {
  height:100vh;
  height:100dvh;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body.split-browse:has(#browse-screen:not([hidden])) .site-header { width:100%; padding:.25rem .65rem; gap:.25rem; }
body.split-browse:has(#browse-screen:not([hidden])) #main { width:100%; min-height:0; padding:0; margin:0; display:flex; }
.split-browse #browse-screen {
  flex:1; min-height:0;
  grid-template-columns:minmax(0,35fr) minmax(0,65fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"title title" "families words" "selection selection";
}
.split-browse .section-top { padding:0 .65rem; gap:.3rem; border-bottom:1px solid var(--line); }
.split-browse .section-top h1 { font:500 .9rem/1.4 system-ui,sans-serif; letter-spacing:0; }
.split-browse .section-top .text-button { font-size:.8rem; padding:.3rem; }
.split-browse .split-only { display:inline; }
.split-browse .family-prompt { display:none; }
.split-browse #family-chooser,.split-browse #family-content {
  min-height:0; overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:thin;
  scrollbar-color:var(--line) transparent; scroll-padding-block:.5rem;
}
.split-browse #family-chooser { padding:.4rem; background:var(--wash); border-right:1px solid var(--line); }
.split-browse #family-chooser p { font-size:.75rem; padding-inline:.2rem; }
.split-browse .family-buttons { grid-template-columns:minmax(0,1fr); gap:.3rem; }
.split-browse .family-button { min-height:46px; text-align:left; font-size:.875rem; font-weight:400; padding:.45rem .35rem; border-color:transparent; background:transparent; overflow-wrap:normal; }
.split-browse .family-button[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); }
.split-browse #family-content { padding:.4rem .65rem .75rem; }
.split-browse #family-content:focus-visible { outline:3px solid var(--focus); outline-offset:-3px; }
.split-browse .words-caption { display:block; font-size:.75rem; margin:0 0 .4rem; }
.split-browse #family-root { margin:0 0 1rem; }
.split-browse .family-branches { grid-template-columns:minmax(0,1fr); gap:1rem; }
.split-browse .family-branch { border-top-width:1px; padding-top:.4rem; }
.split-browse .feeling-label { min-height:44px; }
.split-browse .word-definition { font-size:.875rem; line-height:1.5; }
.split-browse .feeling-entry { padding-bottom:.7rem; }
.split-browse .specific-words { margin-top:.2rem; margin-left:.35rem; padding-left:.3rem; }
.split-browse .family-bottom { font-size:.8rem; }
.split-browse .selection-tray {
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  gap:.35rem .5rem; border-top:1px solid var(--line); border-bottom:0;
  margin:0; padding:.5rem .65rem;
}
.split-browse .selection-choices { display:contents; }
.split-browse .selection-choices h2 { grid-row:1; grid-column:1; font-size:.8rem; }
.split-browse .selection-choices h2 span { margin-left:.2rem; font-size:.8rem; }
.split-browse .selection-tray>.primary { grid-row:1; grid-column:2; }
.split-browse #selected-list { grid-row:2; grid-column:1/-1; }
.split-browse #selected-list button { padding:.35rem .45rem; font-size:.8rem; }
.split-browse #selected-list button span { margin-left:.3rem; }
body.split-browse #family-content .site-footer { width:100%; margin:1rem 0 0; padding:.75rem 0 0; }
.split-browse .site-footer .text-button { padding-inline:.3rem; text-align:left; }