/* Character field guide v1: retain the white, pink, Oswald and Arimo design. */
main { max-width:1440px; margin:auto; padding-bottom:42px; }
.guide-intro { padding-bottom:24px; }
.guide-intro p { max-width:900px; }
.collection-navigation { display:grid; grid-template-columns:3fr 4fr; gap:26px; border-top:1px solid #d8cdd4; padding:18px 0 24px; }
.collection-group>p { margin:0 0 8px; font-size:11px; color:#756570; letter-spacing:1px; text-transform:uppercase; }
.collection-buttons { display:flex; gap:6px; }
.collection-buttons button { flex:1; min-width:0; text-align:left; border:1px solid #ded5db; background:white; border-radius:5px; padding:11px 12px; font:400 23px/1.3 var(--heading); color:var(--pink); }
.collection-buttons button small { display:block; margin-top:5px; font:12px/1.4 var(--sans); color:#635960; }
.collection-buttons button[aria-pressed=true] { border-color:var(--pink); box-shadow:inset 0 -3px var(--pink); }
.collection-buttons button:hover { border-color:var(--pink); }
.reference-shell { box-shadow:0 15px 50px #211d220b; }
.index-tools .search-label { margin-top:0; }
#collection-title { font:400 30px/1.3 var(--heading); margin:0; }
.collection-description { font-size:13px; line-height:1.6; margin:0; color:#635960; }
.collection-resource { margin:12px 0 0; font-size:13px; line-height:1.6; color:var(--pink); }
.index-list { max-height:calc(100dvh - 320px); min-height:190px; }
.entry-heading { min-height:150px; padding-top:24px; }
.entry-meaning { margin-bottom:12px; }
.choice-cue { display:flex; gap:15px; border-left:3px solid var(--pink); padding:2px 0 2px 16px; margin:22px 0 0; }
.choice-cue h4 { font:400 23px/1.3 var(--heading); margin:0 0 7px; }
.choice-cue p { font:15px/1.65 var(--sans); color:#4c414a; margin:0; }
.connections { padding-bottom:28px; }
.connection-list { grid-template-columns:1fr 1fr; }
.connection { grid-template-columns:1fr 18px; }
.connection-title { font-size:15px; }
.connection-title small { font-size:10px; }
.scene-example+.scene-example { border-top:1px solid #eee7ec; padding-top:24px; }
.reading-section { scroll-margin-top:20px; }
@media(max-width:1100px) { .collection-navigation { gap:12px; }.collection-buttons button { font-size:21px; padding:10px 8px; }.collection-buttons button small { font-size:11px; } }
@media(max-width:800px) { .collection-navigation { grid-template-columns:1fr; gap:15px; }.collection-buttons button { font-size:23px; }.connection-list { grid-template-columns:1fr; } }
@media(max-width:580px) {
  .collection-buttons { flex-wrap:wrap; }
  .collection-buttons button { flex:1 0 28%; }
  .collection-group:last-child .collection-buttons button { flex-basis:40%; }
  .index-list { min-height:0; max-height:210px; }
  .reference-index { border-bottom:1px solid #d8cdd4; }
  .collection-description { max-width:38em; }
  .entry-heading { padding-top:76px; }
}
/* Minimalist SVG illustrations and lightly outlined reading surfaces. */
*, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
.guide-intro { display:block; }
.attribute-icon { color:var(--pink); display:block; width:56px; height:56px; flex-shrink:0; margin:0 0 12px; }
.attribute-icon-behavior { width:112px; max-width:100%; }
.collection-buttons button { display:flex; flex-direction:column; align-items:flex-start; }
.collection-buttons button small { margin-top:auto; padding-top:5px; }
.reference-shell { border:0; background:white; box-shadow:none; gap:18px; }
.reference-index, .reading-column { border:1px solid #e1d6dd; border-radius:10px; background:white; }
.index-tools { padding-top:22px; }
.entry-heading { padding:24px 0; min-height:0; display:flex; }
.entry-symbol { position:static; width:auto; height:auto; transform:none; order:-1; margin-bottom:4px; }
.entry-symbol .attribute-icon { width:64px; height:64px; margin-bottom:12px; }
.entry-symbol .attribute-icon-behavior { width:240px; max-width:100%; height:auto; }
.entry-heading h2 { overflow-wrap:normal; }
/* Separate, bounded scroll areas keep browsing independent of article reading. */
.reference-shell { --panel-height:clamp(440px, 68dvh, 820px); }
.reference-index { position:relative; top:0; height:var(--panel-height); display:flex; flex-direction:column; overflow:hidden; }
.index-tools { flex:0 0 auto; }
.index-list { flex:1 1 auto; min-height:0; max-height:none; overflow-y:scroll; }
.reading-column { height:var(--panel-height); overflow-y:scroll; overscroll-behavior:contain; }
.index-list, .reading-column { scrollbar-gutter:stable; scrollbar-width:auto; scrollbar-color:#cd7ca3 #f6f0f3; }
.index-list::-webkit-scrollbar, .reading-column::-webkit-scrollbar { width:12px; }
.index-list::-webkit-scrollbar-track, .reading-column::-webkit-scrollbar-track { background:#f6f0f3; border-radius:8px; }
.index-list::-webkit-scrollbar-thumb, .reading-column::-webkit-scrollbar-thumb { background:#cd7ca3; border:3px solid #f6f0f3; border-radius:8px; }
.index-list:focus-visible, .reading-column:focus-visible { outline:2px solid var(--pink); outline-offset:3px; }
@media(max-width:580px) {
  .reference-index { height:400px; }
  .reading-column { margin-top:16px; }
  .collection-buttons button { font-size:21px; }
  .entry-heading { padding-top:4px; }
}