/* A readable, illustrated companion atlas; every selector is scoped to the atlas. */
.cg-dialog {
  --cg-accent: #d8ecac;
  --cg-paper: #edf1e2;
  --cg-muted: #b2c2b8;
  width: min(1120px, calc(100% - 32px));
  max-width: 1120px;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  color: var(--cg-paper);
  background: #152020;
  border: 1px solid #8195808c;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 25px 100px #000a;
  font-size: 14px;
}
.cg-dialog[open] { display: flex; flex-direction: column; }
.cg-dialog::backdrop { background: #050d12ca; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.cg-dialog button { touch-action: manipulation; }
.cg-dialog button:focus-visible, .cg-dialog [tabindex]:focus-visible, .cg-dialog summary:focus-visible { outline: 2px solid var(--cg-accent); outline-offset: 3px; }
.cg-dialog h2, .cg-dialog h3, .cg-dialog h4 { font-family: Georgia, "Times New Roman", "Noto Serif TC", serif; font-weight: 400; }
.cg-dialog h5 { margin: 0; font-size: 13px; font-weight: 700; color: #eef1e7; }
.cg-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 21px 27px 18px; flex-shrink: 0; border-bottom: 1px solid #8195802c; background: linear-gradient(125deg, #28372f, #142026); }
.cg-heading h2 { font-size: 31px; line-height: 1.1; margin: 5px 0 7px; letter-spacing: .2px; }
.cg-heading p { color: var(--cg-muted); font-size: 12px; }
.cg-eyebrow { display: block; font-size: 10px; line-height: 1.5; letter-spacing: 1.45px; color: var(--cg-accent); text-transform: uppercase; font-weight: 650; }
.cg-close { align-self: flex-start; background: #15221cc9; border: 1px solid #809c7544; color: #e5eddd; border-radius: 12px; width: 44px; min-width: 44px; min-height: 44px; font-size: 29px; line-height: 1; }
.cg-close:hover { background: #364739; border-color: #a2bc89; }
.cg-roster { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 8px; padding: 10px 18px; flex-shrink: 0; overflow-x: auto; overscroll-behavior-x: contain; background: #111c1f; border-bottom: 1px solid #81958035; scrollbar-width: thin; scrollbar-color: #5c7466 #101c1f; }
.cg-roster-member { position: relative; display: flex; align-items: center; gap: 7px; border: 1px solid #4d655740; border-radius: 11px; padding: 5px 8px 5px 4px; min-height: 58px; background: #1e2b27; text-align: left; overflow: hidden; }
.cg-roster-member:hover { background: #2c3c32; border-color: #79936a; }
.cg-roster-member.is-current { border-color: var(--cg-member); background: linear-gradient(120deg,#445242,#24302d); box-shadow: inset 0 -2px 0 var(--cg-member); }
.cg-roster-member strong { font-size: 11px; line-height: 1.3; flex: 1; min-width: 0; }
.cg-roster-art { width: 34px; min-width: 34px; height: 45px; overflow: hidden; }
.cg-roster-art .character-avatar { width: 36px; height: 45px; filter: none; }
.cg-roster-art .character-avatar * { animation: none; }
.cg-roster-state { position: absolute; right: 4px; bottom: 3px; font-size: 8px; line-height: 1; color: var(--cg-member); opacity: .9; }
.cg-content { display: grid; grid-template-columns: minmax(278px, 35%) minmax(0,1fr); overflow-y: auto; overflow-x: hidden; min-height: 0; background: linear-gradient(110deg,#1e2d28,#172226); overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: #638076 #162321; }
.cg-portrait { position: sticky; top: 0; display: flex; flex-direction: column; min-height: 570px; height: max-content; max-height: none; overflow: hidden; background: radial-gradient(ellipse at 50% 37%,#536f493e,transparent 60%),linear-gradient(150deg,#22332e,#101e24); border-right: 1px solid #70877633; isolation: isolate; }
.cg-dialog[data-character="bram"] .cg-portrait { background: radial-gradient(ellipse at 50% 38%,#4483924d,transparent 62%),linear-gradient(145deg,#233c3c,#132631); }
.cg-dialog[data-character="lyra"] .cg-portrait { background: radial-gradient(ellipse at 50% 36%,#9776a342,transparent 62%),linear-gradient(145deg,#383049,#15252c); }
.cg-dialog[data-character="mira"] .cg-portrait { background: radial-gradient(ellipse at 50% 40%,#d9bf6240,transparent 60%),linear-gradient(150deg,#314840,#1c3039); }
.cg-dialog[data-character="riven"] .cg-portrait { background: radial-gradient(ellipse at 50% 36%,#c5775540,transparent 62%),linear-gradient(155deg,#473236,#1f2530); }
.cg-dialog[data-character="orrin"] .cg-portrait { background: radial-gradient(ellipse at 50% 36%,#5296b14f,transparent 62%),linear-gradient(150deg,#24384d,#1e2b3e); }
.cg-dialog[data-character="sera"] .cg-portrait { background: radial-gradient(ellipse at 50% 55%,#d4a95b40,transparent 64%),linear-gradient(150deg,#493d44,#173338); }
.cg-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--cg-accent); opacity: .72; pointer-events: none; z-index: -1; }
.cg-sparks { transform-box: fill-box; transform-origin: center; animation: cg-spark-drift 7s ease-in-out infinite; }
.cg-portrait-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 21px 0; }
.cg-number { color: var(--cg-accent); font-family: Georgia,"Times New Roman",serif; font-size: 32px; line-height: 1; letter-spacing: -1px; }
.cg-number small { font-family: inherit; font-size: 13px; color: #b5c7bf; letter-spacing: .4px; }
.cg-status { font-size: 9px; line-height: 1.6; letter-spacing: .2px; padding: 5px 8px; border: 1px solid #c7dfba50; border-radius: 6px; max-width: 68%; background: #13251c99; color: #dfead5; text-align: right; }
.cg-status.is-unmet { background: #2328368f; border-color: #ccd7df3a; color: #ccd7df; }
.cg-hero-art { position: relative; display: grid; place-items: center; width: 100%; height: 303px; margin: 5px 0 -7px; }
.cg-hero-art>.character-avatar { position: relative; height: 287px; width: 230px; z-index: 1; filter: drop-shadow(0 15px 9px #0109127d); }
.cg-hero-art .avatar-figure { animation-duration: 5.5s; }
.cg-hero-art .avatar-ring { opacity: .55; }
.cg-portrait-copy { position: relative; padding: 0 23px; text-align: center; }
.cg-portrait-copy .cg-eyebrow { font-size: 9px; letter-spacing: 1.3px; }
.cg-portrait-copy h3 { font-size: 34px; line-height: 1.12; margin: 6px 0; }
.cg-portrait-copy>p { color: #d0dfd8; font-size: 13px; }
.cg-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 14px; }
.cg-tags>span { color: #d2ded2; background: #18261eaa; border: 1px solid #adc19d36; border-radius: 20px; padding: 3px 9px; font-size: 10px; }
.cg-demo { position: relative; padding: 20px 22px 24px; margin-top: auto; }
.cg-demo>button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 45px; color: var(--cg-accent); border: 1px solid var(--cg-accent); border-radius: 10px; background: #0e1b1cd9; font-weight: 650; font-size: 12px; }
.cg-demo>button:hover { background: #34443acc; }
.cg-demo>button:disabled { opacity: .7; cursor: default; }
.cg-play { display: inline-grid; place-items: center; font-size: 11px; }
.cg-demo-readout { margin-top: 12px; padding: 12px; text-align: center; border-radius: 12px; border: 1px solid #a9c6a848; background: #0b1922e8; }
.cg-demo-readout>span { display: block; font-size: 8px; letter-spacing: 1.1px; color: var(--cg-accent); }
.cg-demo-readout>strong { display: block; font-size: 14px; margin-top: 4px; }
.cg-demo-readout .cg-move-stats { margin-top: 9px; gap: 4px; }
.cg-demo-readout .cg-move-stats>div { background: transparent; padding: 4px 0; border: 0; }
.cg-demo-readout .cg-move-stats strong { font-size: 23px; }
.cg-demo-readout .cg-move-stats span { font-size: 8px; }
.cg-demo-readout .cg-move-stats svg { width: 15px; height: 15px; }
.cg-details { min-width: 0; }
.cg-detail-nav { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 9px; justify-content: space-between; padding: 15px 22px 12px; background: #1a2928f5; border-bottom: 1px solid #728d7333; }
.cg-tabs { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cg-tabs button { padding: 8px 12px; min-height: 40px; border-radius: 8px; background: #101e2199; color: #b8cbc1; border: 1px solid transparent; font-size: 12px; white-space: nowrap; }
.cg-tabs button:hover { color: #edf3e5; border-color: #819f7770; }
.cg-tabs button[aria-selected="true"] { background: var(--cg-accent); border-color: var(--cg-accent); color: #17231f; font-weight: 750; }
.cg-page-controls { display: flex; gap: 4px; flex-shrink: 0; }
.cg-page-controls button { display: grid; place-items: center; width: 31px; min-height: 38px; background: #1b2b29; border: 1px solid #8cac753b; color: #d4e1c9; border-radius: 7px; font-size: 25px; line-height: 1; }
.cg-page-controls button:hover { background: #3a4b39; }
.cg-panel { padding: 23px 26px 28px; }
.cg-panel h4 { font-size: 26px; line-height: 1.22; margin: 5px 0 13px; color: #f1eee0; }
.cg-biography { font-size: 15px; line-height: 1.85; color: #d3e0d6; }
.cg-story-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 23px; }
.cg-story-notes article { border-top: 1px solid #93b38555; padding-top: 13px; }
.cg-story-notes h5 { color: var(--cg-accent); font-size: 12px; }
.cg-story-notes p { color: #bdcfc4; font-size: 12px; line-height: 1.8; margin-top: 8px; }
.cg-section-label { margin: 24px 0 10px !important; font-size: 11px !important; letter-spacing: .7px; color: #d5e5d2 !important; }
.cg-gear { display: grid; gap: 8px; }
.cg-gear article { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border: 1px solid #778d7c2d; border-radius: 10px; background: #0e1e208c; }
.cg-gear strong { display: block; font-size: 12px; color: #e1e9da; }
.cg-gear p { font-size: 11px; line-height: 1.65; margin-top: 3px; color: #b3c7bc; }
.cg-footnote { color: #a9bdb2; font-size: 11px; line-height: 1.7; margin-top: 12px; }
.cg-symbol { display: inline-flex; align-items: center; justify-content: center; width: 41px; height: 43px; flex-shrink: 0; background: #112022; border: 1px solid currentColor; border-radius: 9px; }
.cg-symbol svg { width: 24px; height: 24px; }
.cg-sword { color: #dbe9b6; }
.cg-shield { color: #95d1df; }
.cg-arrow { color: #cbaeef; }
.cg-star { color: #f4d992; }
.cg-miss { color: #b4b9b5; }
.cg-heart { color: #ecb3a5; }
.cg-dice { color: #c8ded1; }
.cg-unmet { margin: 24px 0 0; padding: 25px; border: 1px solid #abc7ad44; border-radius: 14px; background: #162a2780; }
.cg-unmet>svg { width: 31px; height: 31px; color: var(--cg-accent); display: block; margin-bottom: 12px; }
.cg-unmet>strong { display: block; font-size: 15px; color: #dce8d2; }
.cg-unmet>p { margin-top: 9px; color: #b6cbbf; font-size: 13px; line-height: 1.8; }
.cg-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; margin-top: 14px; padding: 8px 13px; border-radius: 8px; border: 1px solid #adc99765; background: #24392b; color: var(--cg-accent); font-size: 12px; font-weight: 650; }
.cg-action:hover { background: #39533c; border-color: var(--cg-accent); }
.cg-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cg-panel-heading>svg { width: 31px; height: 31px; color: var(--cg-accent); opacity: .7; }
.cg-six-faces { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; margin: 4px 0 10px; }
.cg-die-face { min-height: 91px; position: relative; display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 21px 3px 9px; border: 1px solid currentColor; border-bottom-width: 4px; border-radius: 12px; background: linear-gradient(155deg,#35433c,#122224); box-shadow: inset 0 0 0 4px #121f2359,0 5px 9px #060e1124; }
.cg-die-face small { position: absolute; top: 7px; left: 8px; font-size: 7px; line-height: 1; color: #bfd0c5; }
.cg-die-face svg { width: 32px; height: 32px; }
.cg-die-face>span { margin-top: 6px; font-size: 9px; line-height: 1; }
.cg-odds { display: grid; gap: 8px; padding: 14px; border: 1px solid #809b7d35; border-radius: 12px; background: #101f2277; }
.cg-odds-row { display: grid; grid-template-columns: 19px 47px minmax(30px,1fr) 30px 54px; align-items: center; gap: 9px; font-size: 11px; }
.cg-odds-row svg { width: 17px; height: 17px; }
.cg-odds-row>span:nth-child(2) { color: #cbd9ce; }
.cg-odds-track { height: 6px; border-radius: 9px; overflow: hidden; background: #65726c36; }
.cg-odds-track i { height: 100%; display: block; background: currentColor; border-radius: inherit; }
.cg-odds-row strong { color: #b9cec3; text-align: right; font-size: 10px; font-weight: 450; }
.cg-odds-row b { text-align: right; font-variant-numeric: tabular-nums; }
.cg-ability { padding: 20px 0 18px; border-top: 1px solid #819c7340; border-bottom: 1px solid #819c7340; margin-top: 24px; }
.cg-ability-title { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.cg-ability-title h4 { margin: 7px 0 10px; font-size: 24px; }
.cg-fate-cost { display: flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 12px; font-weight: 700; color: #f0d78f; }
.cg-fate-cost svg { width: 16px; height: 16px; }
.cg-ability>p:not(.cg-footnote) { color: #d4e0d5; line-height: 1.8; font-size: 13px; }
.cg-ability-rule { margin-top: 12px; padding: 6px 9px; background: #4561472e; color: #cbdcc2; border-radius: 6px; font-size: 11px; display: inline-block; }
.cg-skill-options { border-bottom: 1px solid #819c7340; }
.cg-skill-options summary { padding: 13px 4px; color: var(--cg-accent); font-size: 12px; cursor: pointer; min-height: 44px; }
.cg-skill-options>div { display: grid; gap: 7px; padding-bottom: 15px; }
.cg-skill-option { display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid #779d7c28; border-radius: 9px; }
.cg-skill-option.is-equipped { background: #334834; border-color: #b9d6935f; }
.cg-skill-option .cg-symbol { width: 29px; height: 31px; border-radius: 6px; border: 0; background: #1023207d; }
.cg-skill-option .cg-symbol svg { width: 19px; height: 19px; }
.cg-skill-option>span { min-width: 0; flex: 1; }
.cg-skill-option strong { display: block; font-size: 11px; }
.cg-skill-option small { display: block; color: #b6c7bb; font-size: 10px; line-height: 1.7; margin-top: 3px; }
.cg-skill-option>b { font-size: 9px; color: #e0d492; white-space: nowrap; font-weight: 500; }
.cg-command-guide { padding-top: 23px; }
.cg-basic { display: flex; align-items: center; gap: 15px; justify-content: space-between; margin: 13px 0 18px; padding: 12px 14px; border: 1px solid #82997440; border-radius: 11px; background: #142622; }
.cg-basic p { color: #b5c9bb; font-size: 11px; line-height: 1.7; margin-top: 4px; }
.cg-basic>div:last-child { text-align: right; flex-shrink: 0; }
.cg-basic>div:last-child strong { display: block; font-size: 29px; font-family: Georgia,serif; color: #dbe9b6; line-height: 1; }
.cg-basic>div:last-child span { display: block; font-size: 9px; color: #b4c7b8; margin-top: 5px; }
.cg-signature { padding: 17px; border: 1px solid #abc49a5e; border-radius: 12px; background: linear-gradient(140deg,#35452e66,#172a2988); }
.cg-signature h4 { font-size: 25px; margin: 4px 0 14px; }
.cg-pattern-label { font-size: 11px; color: #d5e0ce; margin-bottom: 9px; }
.cg-pattern { display: flex; gap: 8px; }
.cg-pattern .cg-symbol { background: #142524; }
.cg-move-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 17px; }
.cg-move-stats>div { display: grid; justify-items: center; grid-template-columns: 1fr; gap: 3px; text-align: center; padding: 12px 5px 10px; border: 1px solid #859f6f25; border-radius: 9px; background: #0f1e228c; }
.cg-move-stats svg { width: 18px; height: 18px; color: #dbe9b6; }
.cg-move-stats>div:nth-child(2) svg { color: #efb7a0; }
.cg-move-stats>div:nth-child(3) svg { color: #a3d5df; }
.cg-move-stats strong { font-size: 28px; line-height: 1.1; font-family: Georgia,"Times New Roman",serif; font-weight: 400; color: #f1efdd; }
.cg-move-stats span { font-size: 10px; color: #c7d6c7; }
.cg-rule-note { display: flex; gap: 11px; margin-top: 22px; padding: 13px; color: #d3dfca; background: #40533132; border-radius: 10px; border-left: 2px solid #a0bd7c; }
.cg-rule-note>svg { width: 20px; height: 20px; color: var(--cg-accent); margin-top: 2px; }
.cg-rule-note>p { font-size: 11px; line-height: 1.8; }
.cg-strengths { display: grid; gap: 18px; }
.cg-strengths article { display: flex; align-items: flex-start; gap: 11px; }
.cg-strengths article>span { width: 26px; min-width: 26px; height: 29px; display: grid; place-items: center; font-size: 23px; color: var(--cg-accent); }
.cg-strengths article:nth-child(2)>span { color: #e9ba95; }
.cg-strengths p { color: #c2d3c5; line-height: 1.85; font-size: 13px; margin-top: 6px; }
.cg-team-heading { margin: 27px 0 12px !important; font-size: 25px !important; }
.cg-party-example { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.cg-party-member { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 10px 5px; min-height: 142px; border: 1px solid #93b7853b; background: #1b302a; border-radius: 10px; }
.cg-party-member:hover { background: #2c4634; border-color: #afcd95; }
.cg-party-member.is-current { border-color: var(--cg-accent); background: #3a4b3869; }
.cg-party-member>span { display: block; width: 59px; height: 76px; }
.cg-party-member .character-avatar { width: 100%; height: 100%; }
.cg-party-member .character-avatar * { animation: none; }
.cg-party-member>strong { color: #e0ebd7; font-size: 11px; line-height: 1.4; }
.cg-party-member>small { color: #a8c0ac; font-size: 9px; line-height: 1.5; }
.cg-roll-example { margin-top: 20px; padding: 16px; border: 1px solid #9caf914a; border-radius: 12px; background: #132825; }
.cg-example-dice { display: flex; justify-content: center; align-items: center; gap: 13px; margin-top: 16px; }
.cg-example-dice>div { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; min-width: 64px; }
.cg-example-dice .cg-symbol { width: 49px; height: 50px; border-radius: 11px; border-bottom-width: 3px; }
.cg-example-dice>div>span:last-child { font-size: 10px; color: #c7d7c8; }
.cg-plus { color: #a6c397; font-size: 19px; margin-bottom: 21px; }
.cg-combo-unlock { text-align: center; margin: 12px 0; }
.cg-combo-unlock>span { display: block; line-height: 1; color: #91b389; font-size: 23px; margin-bottom: 6px; }
.cg-combo-unlock>small { display: block; color: #b1c8b3; font-size: 10px; }
.cg-combo-unlock>strong { display: block; color: var(--cg-accent); font-family: Georgia,"Times New Roman",serif; font-size: 21px; font-weight: 400; margin-top: 5px; }
.cg-roll-example>p:not(.cg-footnote) { font-size: 13px; line-height: 1.9; color: #d0e0d1; margin-top: 14px; }
.cg-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 23px; border-top: 1px solid #77977b39; background: #12201f; flex-shrink: 0; font-size: 10px; line-height: 1.6; color: #b6c8b8; }
.cg-footer>span:last-child { color: #c5d6be; white-space: nowrap; }
.cg-demo-impact, .cg-demo-heal, .cg-demo-shield { position: absolute; opacity: 0; pointer-events: none; }
.cg-demo-impact { z-index: 3; width: 180px; height: 110px; top: 96px; left: calc(50% - 31px); border-top: 7px solid var(--cg-accent); border-radius: 50%; transform: rotate(-34deg) scale(.4); filter: drop-shadow(0 0 7px var(--cg-accent)); }
.cg-demo-heal { z-index: 2; inset: 35px 16px; border: 2px solid #f4dda4a3; border-radius: 50%; box-shadow: inset 0 0 40px #eee4a73a,0 0 15px #c9e19338; }
.cg-demo-heal svg { position: absolute; top: 32px; right: 20px; width: 30px; height: 30px; color: #fff1b9; }
.cg-demo-shield { z-index: 3; width: 150px; height: 170px; left: calc(50% - 75px); top: 115px; color: #b2e8ed; filter: drop-shadow(0 0 9px #8bd2db); }
.cg-demo-shield>svg { width: 100%; height: 100%; opacity: .6; }
.cg-dialog[data-demo="windup"] .cg-hero-art .avatar-figure { animation: cg-prepare .23s ease-out both; }
.cg-dialog[data-demo="impact"] .cg-hero-art .avatar-figure { animation: cg-strike .85s cubic-bezier(.2,.65,.3,1) both; }
.cg-dialog[data-demo="impact"][data-character="mira"] .cg-hero-art .avatar-figure,
.cg-dialog[data-demo="impact"][data-character="orrin"] .cg-hero-art .avatar-figure { animation: cg-cast 1.1s ease-out both; }
.cg-dialog[data-demo="impact"][data-demo-damage="true"] .cg-demo-impact { animation: cg-slash .76s ease-out both; }
.cg-dialog[data-demo="impact"][data-demo-heal="true"] .cg-demo-heal { animation: cg-restoration 1.25s ease-out both; }
.cg-dialog[data-demo="impact"][data-demo-guard="true"] .cg-demo-shield { animation: cg-guard 1.2s ease-out both; }
.cg-dialog[data-demo="impact"] .cg-demo-readout .cg-move-stats strong { animation: cg-stat-land .35s ease-out both; }
@keyframes cg-spark-drift { 0%,100% { opacity: .35; transform: translateY(5px); } 50% { opacity: 1; transform: translateY(-6px); } }
@keyframes cg-prepare { to { transform: translate(-5px,2px) rotate(-3deg); } }
@keyframes cg-strike { 0% { transform: translate(-5px,2px) rotate(-3deg); } 32% { transform: translate(13px,-7px) rotate(5deg); filter: brightness(1.18); } 65% { transform: translate(2px,0) rotate(1deg); } 100% { transform: none; } }
@keyframes cg-cast { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-8px); filter: brightness(1.25); } }
@keyframes cg-slash { 0% { opacity: 0; transform: rotate(-54deg) scale(.3); } 18% { opacity: 1; } 50% { opacity: .85; transform: rotate(-4deg) scale(1.1); } 100% { opacity: 0; transform: rotate(9deg) scale(1.4); } }
@keyframes cg-restoration { 0% { opacity: 0; transform: scale(.7); } 35% { opacity: .7; } 100% { opacity: 0; transform: scale(1.05) translateY(-10px); } }
@keyframes cg-guard { 0% { opacity: 0; transform: scale(.7); } 25%,65% { opacity: .65; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes cg-stat-land { 0% { opacity: .3; transform: translateY(7px) scale(.85); } 60% { transform: translateY(-2px) scale(1.08); } 100% { opacity: 1; transform: none; } }
@media (max-width: 920px) {
  .cg-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
  .cg-heading { padding: 18px 21px 16px; }
  .cg-roster { gap: 6px; padding: 9px 13px; grid-template-columns: repeat(7,minmax(86px,1fr)); }
  .cg-roster-member { gap: 3px; padding-left: 2px; }
  .cg-roster-art { width: 30px; min-width: 30px; }
  .cg-roster-member strong { font-size: 10px; }
  .cg-content { grid-template-columns: 30% minmax(0,1fr); }
  .cg-portrait { min-height: 570px; }
  .cg-portrait-top { padding: 19px 13px 0; flex-direction: column; gap: 10px; }
  .cg-status { max-width: 100%; font-size: 9px; text-align: left; }
  .cg-hero-art { height: 269px; margin: 4px 0 -9px; }
  .cg-hero-art>.character-avatar { width: 195px; height: 250px; }
  .cg-portrait-copy { padding: 0 15px; }
  .cg-portrait-copy h3 { font-size: 28px; }
  .cg-portrait-copy>p { font-size: 12px; }
  .cg-tags { gap: 4px; }
  .cg-tags>span { font-size: 9px; padding: 3px 7px; }
  .cg-demo { padding: 17px 12px; }
  .cg-demo>button { font-size: 11px; }
  .cg-panel { padding: 22px 21px 25px; }
  .cg-panel h4 { font-size: 25px; }
  .cg-detail-nav { padding: 12px 14px; }
  .cg-tabs { gap: 4px; }
  .cg-tabs button { padding: 8px 9px; font-size: 11px; }
  .cg-page-controls button { width: 28px; }
  .cg-six-faces { gap: 6px; }
  .cg-die-face { min-height: 83px; }
  .cg-die-face svg { width: 29px; height: 29px; }
  .cg-story-notes { gap: 13px; }
  .cg-story-notes p { font-size: 12px; }
}
@media (max-width: 660px) {
  .cg-dialog { width: calc(100% - 12px); max-height: calc(100dvh - 14px); border-radius: 15px; }
  .cg-heading { padding: 15px 15px 12px; gap: 9px; }
  .cg-heading .cg-eyebrow { font-size: 8px; letter-spacing: 1.3px; }
  .cg-heading h2 { font-size: 25px; margin: 4px 0 5px; }
  .cg-heading p { font-size: 10px; max-width: 280px; line-height: 1.6; }
  .cg-close { min-width: 42px; width: 42px; min-height: 42px; border-radius: 9px; }
  .cg-roster { display: flex; padding: 8px 11px; gap: 6px; scroll-snap-type: x proximity; }
  .cg-roster-member { min-width: 93px; min-height: 52px; max-width: 115px; scroll-snap-align: center; padding: 4px; gap: 5px; }
  .cg-roster-member strong { font-size: 10px; }
  .cg-roster-art { height: 42px; width: 29px; min-width: 29px; }
  .cg-roster-art .character-avatar { width: 32px; height: 42px; }
  .cg-content { display: block; }
  .cg-portrait { position: relative; display: grid; grid-template-columns: 42% minmax(0,1fr); min-height: 265px; height: auto; border-right: 0; border-bottom: 1px solid #93b08035; }
  .cg-backdrop { width: 55%; height: 115%; top: -17px; }
  .cg-portrait-top { position: absolute; top: 0; left: 0; right: 0; padding: 14px 15px; flex-direction: row; align-items: flex-start; gap: 8px; }
  .cg-number { font-size: 24px; }
  .cg-number small { font-size: 10px; }
  .cg-status { font-size: 8px; max-width: 66%; padding: 4px 7px; }
  .cg-hero-art { grid-row: 1 / 3; grid-column: 1; height: 229px; margin: 30px 0 0; align-self: end; }
  .cg-hero-art>.character-avatar { height: 217px; width: 174px; max-width: 115%; }
  .cg-portrait-copy { grid-column: 2; padding: 57px 13px 0 3px; text-align: left; align-self: end; }
  .cg-portrait-copy .cg-eyebrow { font-size: 8px; letter-spacing: .7px; }
  .cg-portrait-copy h3 { font-size: 27px; margin: 6px 0; }
  .cg-portrait-copy>p { font-size: 11px; }
  .cg-tags { justify-content: flex-start; margin-top: 9px; }
  .cg-tags>span { font-size: 8px; padding: 2px 6px; }
  .cg-demo { grid-column: 2; margin: 0; padding: 12px 14px 17px 3px; }
  .cg-demo>button { min-height: 42px; font-size: 10px; padding: 7px; }
  .cg-demo-readout { padding: 10px 6px; }
  .cg-demo-readout>span { font-size: 7px; letter-spacing: .5px; }
  .cg-demo-readout>strong { font-size: 12px; }
  .cg-demo-readout .cg-move-stats span { font-size: 7px; }
  .cg-demo-readout .cg-move-stats strong { font-size: 21px; }
  .cg-detail-nav { padding: 11px 13px; gap: 5px; position: sticky; top: 0; }
  .cg-tabs { gap: 5px; flex: 1; }
  .cg-tabs button { min-height: 42px; font-size: 11px; padding: 7px 9px; }
  .cg-page-controls { gap: 4px; }
  .cg-page-controls button { width: 30px; min-height: 42px; }
  .cg-panel { padding: 19px 18px 25px; }
  .cg-panel h4 { font-size: 25px; }
  .cg-biography { font-size: 14px; line-height: 1.9; }
  .cg-story-notes { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
  .cg-story-notes p { font-size: 12px; margin-top: 6px; }
  .cg-gear article { padding: 11px; }
  .cg-six-faces { gap: 6px; }
  .cg-die-face { min-height: 79px; border-radius: 9px; padding-top: 23px; }
  .cg-die-face small { left: 6px; font-size: 7px; }
  .cg-die-face svg { width: 27px; height: 27px; }
  .cg-die-face>span { font-size: 8px; }
  .cg-odds { padding: 13px 12px; }
  .cg-odds-row { gap: 8px; grid-template-columns: 17px 45px minmax(25px,1fr) 29px 51px; }
  .cg-ability-title h4 { font-size: 22px; }
  .cg-ability-title { gap: 10px; }
  .cg-fate-cost { font-size: 11px; }
  .cg-strengths p { font-size: 12px; }
  .cg-party-example { gap: 6px; }
  .cg-party-member { padding: 8px 4px; min-height: 139px; }
  .cg-party-member>strong { font-size: 10px; }
  .cg-party-member>small { font-size: 8px; }
  .cg-roll-example { padding: 15px 13px; }
  .cg-example-dice { gap: 9px; }
  .cg-example-dice>div { min-width: 58px; }
  .cg-example-dice .cg-symbol { width: 46px; height: 49px; }
  .cg-roll-example>p:not(.cg-footnote) { font-size: 12px; }
  .cg-footer { padding: 9px 14px; font-size: 9px; }
  .cg-footer>span:last-child { display: none; }
  .cg-demo-impact { width: 115px; top: 93px; left: 36%; }
  .cg-demo-shield { width: 100px; height: 130px; top: 88px; left: calc(50% - 50px); }
  .cg-demo-heal { inset: 30px -4px 12px; }
}
@media (max-width: 390px) {
  .cg-heading p { max-width: 240px; }
  .cg-portrait-copy h3 { font-size: 23px; }
  .cg-hero-art>.character-avatar { width: 154px; height: 203px; }
  .cg-tabs button { padding: 7px 7px; font-size: 10px; }
  .cg-detail-nav { padding-inline: 11px; }
  .cg-page-controls button { width: 26px; }
  .cg-panel { padding-inline: 14px; }
  .cg-six-faces { gap: 5px; }
  .cg-die-face svg { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .cg-dialog *, .cg-dialog *::before, .cg-dialog *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .cg-dialog::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
html[data-motion="reduced"] .cg-dialog *, body.reduced-motion .cg-dialog * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
/* The illustrated atlas shares the actual training and equipment state. */
.cg-build-summary{margin:20px 24px 0;padding:15px 16px;border:1px solid color-mix(in srgb,var(--cg-accent) 24%,transparent);border-radius:15px;background:linear-gradient(125deg,color-mix(in srgb,var(--cg-accent) 10%,#111a24),#111923);color:#dce8eb}
.cg-training-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.cg-training-line .cg-level{font-size:14px;line-height:1.2;font-weight:700;color:var(--cg-accent);letter-spacing:.05em}.cg-training-line>span{font-size:12px;font-weight:650}.cg-training-line>small{margin-left:auto;font-size:11px;color:#b2c4cb}
.cg-xp-track{height:5px;border-radius:8px;overflow:hidden;background:#263744;margin:10px 0 12px}.cg-xp-track>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--cg-accent),#e3d79a)}
.cg-build-tags{display:flex;gap:7px 14px;flex-wrap:wrap;font-size:11px;color:#afc1c9}.cg-build-tags strong{color:#e7edf0;font-weight:600}.cg-build-summary>p{font-size:11px;line-height:1.55;color:#a9bec7;margin:9px 0 0}
@media(max-width:600px){.cg-build-summary{margin:14px 16px 0;padding:12px}.cg-training-line{gap:8px}.cg-training-line>small{width:100%;margin-left:0}}
/* Training stays beside the character: equipped effects, two paths, and the real move. */
.cg-loadout-tags { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 13px; }
.cg-loadout-tags>span { min-width: 0; border: 1px solid #a2b9b133; border-radius: 9px; background: #0d1b2380; padding: 9px 10px; color: #a6bdc2; font-size: 10px; }
.cg-loadout-tags strong { display: block; margin-top: 3px; color: #e1e9dc; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.cg-training-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.cg-training-actions>span { color: #e8d49d; font-size: 11px; line-height: 1.5; }
.cg-skills-link { margin-top: 0; min-height: 44px; }
.cg-skills-link>svg { width: 16px; height: 16px; }
.cg-command-types { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0; }
.cg-command-types>span { padding: 5px 8px; border: 1px solid #94aca245; border-radius: 6px; color: #b8ceca; font-size: 10px; line-height: 1.5; }
.cg-command-types>span:nth-child(2) { border-color: #b9a3e865; color: #d6c7f3; background: #4d3c6924; }
.cg-trained-move { position: relative; padding: 18px; margin: 16px 0; border: 1px solid #a79acc60; border-radius: 13px; background: linear-gradient(125deg,#43375855,#142930); }
.cg-trained-move.is-equipped { border-color: #bba8e394; }
.cg-trained-move>h4 { font-size: 25px; margin: 5px 0 10px; }
.cg-trained-move>.cg-eyebrow { color: #d2bfe8; }
.cg-technique-desc { color: #d1d4e4; font-size: 12px; line-height: 1.8; margin-bottom: 14px; }
.cg-technique-pattern { display: flex; align-items: center; gap: 10px; }
.cg-third-die { display: grid; place-items: center; width: 41px; height: 43px; border: 1px dashed #a9b0c06b; border-radius: 9px; color: #b8b4cb; font-size: 23px; font-family: Georgia,serif; }
.cg-technique-rule { color: #c7c9de; line-height: 1.8; font-size: 11px; margin-top: 14px; }
.cg-paths { margin-top: 27px; padding-top: 23px; border-top: 1px solid #82988d45; }
.cg-paths-heading { display: flex; align-items: center; justify-content: space-between; gap: 13px; }
.cg-paths-heading h4 { margin: 5px 0 0; font-size: 24px; }
.cg-paths-note { color: #b5c7bc; font-size: 12px; line-height: 1.85; margin-top: 13px; }
.cg-training-lore { color: #d5e1cf; font-family: Georgia,"PingFang TC",serif; font-size: 14px; line-height: 1.85; margin-top: 12px; }
.cg-build-summary>.cg-deferred { padding-left: 9px; border-left: 2px solid #d7b980; color: #dec99f; }
.cg-dialog[data-demo-move="technique"] .cg-demo-readout { border-color: #c4a7e46b; background: linear-gradient(140deg,#36233de8,#0e242de8); }
.cg-dialog[data-demo-move="technique"] .cg-demo-readout>span { color: #d4b9ed; }
.cg-path-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; margin-top: 17px; }
.cg-path-card { --cg-path: var(--cg-accent); position: relative; min-width: 0; padding: 16px 14px 13px; border: 1px solid color-mix(in srgb,var(--cg-path) 36%,transparent); border-radius: 14px; background: radial-gradient(ellipse at 50% 5%,color-mix(in srgb,var(--cg-path) 12%,transparent),transparent 60%),#122128aa; }
.cg-path-emblem { position: relative; margin: 0 auto 7px; height: 80px; width: 80px; color: var(--cg-path); }
.cg-path-emblem>svg:first-child { display: block; width: 80px; height: 80px; opacity: .6; stroke: currentColor; stroke-width: 1; }
.cg-path-emblem>svg:last-child { position: absolute; inset: 26px; width: 28px; height: 28px; }
.cg-path-card h5 { margin: 0; text-align: center; color: var(--cg-path); font-family: Georgia,"PingFang TC",serif; font-size: 21px; line-height: 1.3; font-weight: 400; }
.cg-path-card>p { color: #c4d2d1; font-size: 11px; line-height: 1.8; margin-top: 10px; }
.cg-path-technique { padding-top: 13px; margin-top: 12px; border-top: 1px solid #8a9bab38; }
.cg-path-technique>span { display: block; color: #a1b7bb; font-size: 9px; line-height: 1.5; }
.cg-path-technique>strong { display: block; color: #e1e8df; font-size: 12px; line-height: 1.6; margin: 4px 0 8px; }
.cg-path-technique .cg-symbol { width: 30px; height: 32px; border-radius: 6px; }
.cg-path-technique .cg-symbol svg { width: 20px; height: 20px; }
.cg-path-technique>small { display: block; color: #b7c9c7; font-size: 10px; line-height: 1.75; margin-top: 9px; }
.cg-path-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; margin-top: 17px; }
.cg-path-steps>span { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; color: #829b9f; }
.cg-path-steps>span:not(:last-child)::after { content: ''; position: absolute; left: calc(50% + 13px); right: calc(-50% + 13px); top: 11px; height: 1px; background: #75828a59; }
.cg-path-steps b { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #84999c6e; color: #a4b6b8; background: #132129; font-size: 10px; line-height: 1; }
.cg-path-steps small { margin-top: 5px; font-size: 8px; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
.cg-path-steps>.is-learned { color: var(--cg-path); }
.cg-path-steps>.is-learned b { color: #162522; border-color: var(--cg-path); background: var(--cg-path); }
.cg-passive-detail { display: flex; align-items: flex-start; gap: 11px; margin-top: 15px; padding: 14px; border: 1px solid #c4d39d45; border-radius: 11px; background: #2c412c45; }
.cg-passive-detail>svg { width: 24px; height: 24px; color: #d2dda0; margin-top: 2px; }
.cg-passive-detail>div>span { display: block; color: #a7c09f; font-size: 10px; }
.cg-passive-detail strong { display: block; color: #e0e8cc; font-size: 13px; margin-top: 3px; }
.cg-passive-detail p { color: #bfd0b7; font-size: 12px; line-height: 1.8; margin-top: 5px; }
.cg-training-tactics { padding: 17px; margin-top: 22px; border: 1px solid #b7a0d760; border-radius: 13px; background: linear-gradient(135deg,#51405f3b,#172b31); }
.cg-training-tactics h5 { font-size: 22px; font-weight: 400; font-family: Georgia,"PingFang TC",serif; color: #e5d7f0; margin: 6px 0 12px; }
.cg-training-tactics>p { color: #c7d5d3; font-size: 12px; line-height: 1.85; margin-top: 12px; }
.cg-third-options { display: flex; gap: 6px; margin-top: 10px; }
.cg-third-options .cg-symbol { width: 29px; height: 30px; border-radius: 6px; }
.cg-third-options svg { width: 18px; height: 18px; }
@media(max-width:600px) {
  .cg-path-cards { gap: 9px; }
  .cg-path-card { padding: 13px 11px; }
  .cg-path-card h5 { font-size: 19px; }
  .cg-paths-heading { align-items: flex-start; flex-direction: column; }
  .cg-loadout-tags { gap: 6px; }
  .cg-training-actions { flex-wrap: wrap; gap: 7px; }
  .cg-trained-move { padding: 15px; }
}
@media(max-width:390px) { .cg-path-cards { grid-template-columns: 1fr; } }

/* The person, the next decision, and the earned journey stay within one Atlas. */
.cg-dialog button, .cg-dialog summary { min-height: 44px; }
.cg-close { min-width: 44px; width: 44px; }
.cg-page-controls button { width: 44px; min-width: 44px; }
.cg-quick-view { padding: 20px 24px 17px; border-bottom: 1px solid #91b08838; background: radial-gradient(ellipse at 95% 0,#9bb57618,transparent 68%),#1d302a; }
.cg-quick-view>dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
.cg-quick-view>dl>div { min-width: 0; }
.cg-quick-view dt { font-size: 11px; line-height: 1.5; color: #afc5b6; }
.cg-quick-view dd { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: #f0eddb; font-weight: 650; }
.cg-quick-view dl small { display: block; margin-top: 5px; font-size: 12px; line-height: 1.7; color: #d8c69a; }
.cg-next-step { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 15px; padding: 13px 14px; border: 1px solid #b4ce9d4f; border-radius: 11px; background: linear-gradient(120deg,#3f54303d,#1325209e); }
.cg-next-step>div { min-width: 0; }
.cg-next-step strong { display: block; margin-top: 4px; font-size: 14px; line-height: 1.65; color: #e6edd6; font-weight: 600; }
.cg-next-step>.cg-action { flex-shrink: 0; max-width: 48%; margin: 0; }
.cg-companion-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.cg-companion-links>.cg-action { flex: 1 1 auto; margin: 0; background: #162923; border-color: #99b29b45; font-size: 12px; }
.cg-expression-study { margin: 17px 22px 0; }
.cg-expression-study>span { display: block; color: #bdcfbb; font-size: 11px; text-align: center; }
.cg-expression-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; margin-top: 7px; }
.cg-expression-controls button { min-width: 0; padding: 7px 5px; border: 1px solid #acbe9840; border-radius: 8px; background: #152720bd; color: #c5d9c3; font-size: 12px; line-height: 1.4; }
.cg-expression-controls button[aria-pressed="true"] { color: #17281f; background: var(--cg-accent); border-color: var(--cg-accent); font-weight: 700; }
.cg-expression-study>small { display: block; margin-top: 7px; color: #a6bdaf; font-size: 10px; line-height: 1.6; text-align: center; }
.cg-sparks, .cg-hero-art .avatar-figure { animation-iteration-count: 2; }
.cg-identity { margin-top: 25px; }
.cg-identity>h5 { color: var(--cg-accent); font-size: 15px; font-weight: 650; }
.cg-identity-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 14px 0; }
.cg-identity-grid>div { padding: 14px; min-width: 0; border: 1px solid #9aae9333; border-radius: 11px; background: linear-gradient(135deg,#2c403136,#11251e91); }
.cg-identity-grid dt { color: #d4dba6; font-size: 11px; font-weight: 650; line-height: 1.5; }
.cg-identity-grid>div:nth-child(n+3) dt { color: #dfbe9b; }
.cg-identity-grid dd { margin: 7px 0 0; color: #cbdacb; font-size: 13px; line-height: 1.8; }
.cg-signature-object { display: flex; align-items: center; gap: 13px; padding: 15px; border: 1px solid #cbbb7d45; border-radius: 12px; background: radial-gradient(ellipse at 0 0,#9c844421,transparent 60%),#192921; }
.cg-signature-object>.cg-symbol { height: 54px; width: 54px; background: #293d2b; border-color: #bdd09560; box-shadow: 0 0 0 4px #d4c38f08; }
.cg-signature-object>div>span, .cg-appearance>span { display: block; color: #b8c5a6; font-size: 11px; line-height: 1.5; }
.cg-signature-object strong { display: block; margin-top: 3px; color: #e6dcaf; font-family: Georgia,"Noto Serif TC",serif; font-weight: 400; font-size: 20px; line-height: 1.35; }
.cg-signature-object p { margin-top: 5px; color: #c2ceb7; font-size: 12px; line-height: 1.7; }
.cg-appearance { margin: 15px 0 0; padding-left: 13px; border-left: 2px solid #bdd39a50; }
.cg-appearance p { font-size: 13px; line-height: 1.8; color: #cedccc; margin-top: 4px; }
.cg-development { margin-top: 26px; padding: 18px; border: 1px solid #abbe8e45; border-radius: 14px; background: linear-gradient(145deg,#40513629,#10252099); }
.cg-development-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 7px 12px; }
.cg-development-heading h5 { color: #e3e7cc; font-size: 15px; }
.cg-development-heading>span { color: #bbcca9; font-size: 11px; line-height: 1.5; }
.cg-memory-trail { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; list-style: none; padding: 0; margin: 17px 0 0; }
.cg-memory-trail>li { position: relative; min-width: 0; padding-top: 11px; border-top: 1px solid #83978256; }
.cg-memory-dot { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: 6px; border: 1px solid #8ca18a66; border-radius: 50%; color: #9aaa95; background: #172a21; font-size: 19px; }
.cg-memory-trail [data-unlocked="true"] .cg-memory-dot { color: #e2d691; border-color: #caba79; background: #4b563154; box-shadow: 0 0 15px #d8c78615; }
.cg-memory-trail small { display: block; color: #aebda9; font-size: 11px; }
.cg-memory-trail strong { display: block; color: #a8bca9; font-size: 12px; line-height: 1.65; font-weight: 500; margin-top: 4px; }
.cg-memory-trail [data-unlocked="true"] strong { color: #e5e5c5; font-weight: 600; }
.cg-memory-trail>li>div>span { display: block; color: #a7bca9; font-size: 11px; line-height: 1.6; margin-top: 4px; }
.cg-memory-voice { margin: 17px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid #a3b78830; color: #d8dabc; font-family: Georgia,"Noto Serif TC",serif; font-size: 14px; line-height: 1.9; }
.cg-memory-voice cite { display: block; color: #a9c098; font-family: inherit; font-size: 12px; font-style: normal; text-align: right; margin-top: 5px; }
.cg-camp-details { margin-top: 24px; border: 1px solid #829b793e; border-radius: 11px; background: #16292066; }
.cg-camp-details>summary, .cg-path-node-details>summary { padding: 12px 14px; color: var(--cg-accent); cursor: pointer; font-size: 13px; line-height: 1.6; }
.cg-camp-details[open] { padding-bottom: 16px; }
.cg-camp-details>.cg-story-notes { margin: 5px 16px 0; }
.cg-camp-details>.cg-section-label { margin-left: 16px !important; }
.cg-camp-details>.cg-gear, .cg-camp-details>.cg-footnote { margin-left: 16px; margin-right: 16px; }
.cg-story-training { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 19px; border-top: 1px solid #9fb18736; }
.cg-story-training p { color: #c2d0bd; font-size: 13px; line-height: 1.8; margin-top: 5px; }
.cg-story-training>.cg-action { flex-shrink: 0; margin-top: 0; }
.cg-path-card-heading { display: flex; align-items: center; gap: 12px; }
.cg-path-card-heading .cg-path-emblem { flex-shrink: 0; height: 60px; width: 60px; margin: 0; }
.cg-path-card-heading .cg-path-emblem>svg:first-child { height: 60px; width: 60px; }
.cg-path-card-heading .cg-path-emblem>svg:last-child { inset: 19px; height: 22px; width: 22px; }
.cg-path-card-heading h5 { text-align: left; font-size: 21px; line-height: 1.35; }
.cg-path-card>p, .cg-path-technique>small { font-size: 12px; line-height: 1.8; }
.cg-path-technique>strong { font-size: 14px; }
.cg-path-technique>span { font-size: 11px; }
.cg-path-technique .cg-symbol { width: 36px; height: 38px; }
.cg-path-values .cg-move-stats { margin-top: 12px; gap: 5px; }
.cg-path-values .cg-move-stats>div { padding: 10px 3px; }
.cg-path-values .cg-move-stats strong { font-size: 26px; }
.cg-path-values .cg-move-stats span { font-size: 11px; line-height: 1.45; }
.cg-path-preview { width: 100%; margin-top: 11px; padding: 8px; font-size: 12px; }
.cg-path-steps small { font-size: 10px; }
.cg-path-node-details { margin-top: 12px; border-top: 1px solid #96ac9a38; }
.cg-path-node-details>summary { padding: 11px 0; font-size: 12px; }
.cg-path-node-details ol { padding: 0; margin: 0; list-style: none; display: grid; gap: 12px; }
.cg-path-node-details li { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.cg-path-node-details li>span { display: grid; place-items: center; width: 25px; height: 25px; flex-shrink: 0; border-radius: 50%; background: #8ba5741f; color: var(--cg-path); font-size: 10px; }
.cg-path-node-details strong { display: block; font-size: 13px; line-height: 1.6; color: #e0e8cc; }
.cg-path-node-details small { display: block; color: #c6bf96; font-size: 11px; line-height: 1.8; margin-top: 4px; }
.cg-path-node-details p { color: #bfcfbc; font-size: 12px; line-height: 1.8; margin-top: 4px; }
.cg-team-availability { margin-bottom: 13px; padding: 11px 13px; border: 1px solid #b2ca8d55; border-radius: 9px; background: #3c542d32; color: #d8e2bc; font-size: 13px; line-height: 1.7; }
.cg-team-availability[data-guide-availability="future"] { color: #e3c79e; border-color: #cda87755; background: #74513a26; }
.cg-party-member.is-unmet { border-style: dashed; background: #24312b; }
.cg-party-member.is-unmet>small { color: #ddc19a; }
.cg-future-team-note { padding-left: 11px; border-left: 2px solid #bd9662; color: #d8c09d; }
.cg-story-notes p, .cg-gear p { font-size: 13px; }
.cg-footnote { font-size: 12px; }
.cg-gear strong, .cg-skills-link { font-size: 13px; }
@media (max-width: 920px) {
  .cg-quick-view { padding: 17px 20px; }
  .cg-next-step { flex-direction: column; align-items: stretch; gap: 10px; }
  .cg-next-step>.cg-action { max-width: none; align-self: flex-start; }
  .cg-expression-study { margin-left: 12px; margin-right: 12px; }
  .cg-expression-controls button { font-size: 11px; padding-left: 3px; padding-right: 3px; }
}
@media (max-width: 820px) {
  .cg-path-cards { grid-template-columns: 1fr; gap: 14px; }
  .cg-memory-trail { grid-template-columns: 1fr; gap: 0; }
  .cg-memory-trail>li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; }
  .cg-memory-dot { flex-shrink: 0; margin-top: 4px; margin-bottom: 0; }
  .cg-memory-trail strong { font-size: 13px; }
  .cg-story-training { flex-wrap: wrap; }
}
@media (min-width: 661px) and (max-height: 860px) { .cg-portrait { position: relative; align-self: start; } }
@media (max-width: 660px) {
  .cg-quick-view { padding: 17px 16px; }
  .cg-quick-view>dl { gap: 12px; }
  .cg-quick-view dd { font-size: 13px; }
  .cg-next-step { padding: 12px; }
  .cg-next-step>.cg-action { align-self: stretch; }
  .cg-expression-study { grid-column: 1 / -1; grid-row: 3; margin: 0; padding: 12px 16px 14px; border-top: 1px solid #b2c79125; background: #18302675; }
  .cg-expression-study>span { text-align: left; }
  .cg-expression-controls button { font-size: 12px; }
  .cg-expression-study>small { text-align: left; font-size: 11px; }
  .cg-demo { grid-row: 2; }
  .cg-demo>button { min-height: 44px; font-size: 12px; }
  .cg-detail-nav { gap: 7px; padding: 10px; }
  .cg-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; }
  .cg-tabs button { font-size: 12px; padding: 8px 5px; white-space: normal; min-height: 48px; }
  .cg-page-controls { gap: 4px; }
  .cg-page-controls button { width: 44px; min-width: 44px; min-height: 48px; }
  .cg-identity-grid { gap: 9px; }
  .cg-identity-grid>div { padding: 12px; }
  .cg-identity-grid dd { font-size: 13px; line-height: 1.8; }
  .cg-development { padding: 15px; }
  .cg-path-card { padding: 16px; }
  .cg-path-card>p, .cg-path-technique>small, .cg-path-node-details p { font-size: 13px; }
  .cg-path-values .cg-move-stats strong { font-size: 28px; }
  .cg-roster-member strong { font-size: 11px; }
  .cg-party-member>strong { font-size: 12px; }
  .cg-party-member>small { font-size: 11px; }
  .cg-footnote { font-size: 12px; line-height: 1.8; }
}
.cg-progress-deferred { margin: 0; padding: 12px 14px; border: 1px solid #abbca952; border-radius: 11px; background: #e8ecdc; color: #3a5449; font-size: 14px; line-height: 1.7; }
@media (max-width: 370px) {
  .cg-identity-grid, .cg-story-notes { grid-template-columns: 1fr; }
  .cg-party-example { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .cg-expression-study *, .cg-memory-dot { animation: none !important; transition: none !important; }
}