/* v0.3: an interactive character sheet, not a splash screen. */
:root{--bg:#151d25;--panel:#1c2931;--panel-2:#23333c;--ink:#eee6d4;--muted:#b0b9b8;--gold:#dbbb7d;--line:rgba(210,192,153,.2)}
body{background:radial-gradient(ellipse at 92% 4%,#34444755,transparent 38%),var(--bg)}
.site-header{height:74px;background:#131b23;border-bottom:2px solid #816c48;gap:20px;padding:0 max(calc((100vw - 1264px)/2),25px)}
.brand>span{font-size:16px;letter-spacing:1.8px}.brand small{font-size:7px;letter-spacing:1.9px}.brand svg{width:32px}
.site-header nav{margin-left:auto;font-size:12px;gap:22px}.site-header nav>a:first-child{display:none}
.header-motion{border:1px solid var(--line);border-radius:4px;font-size:10px;color:var(--muted);padding:8px 10px;white-space:nowrap;min-height:38px}
.header-motion:disabled,.lens-motion:disabled{opacity:.8;cursor:default}
.section-wrap{max-width:1280px;padding-left:32px;padding-right:32px}
.setup{padding-top:28px;padding-bottom:38px}
.creator-intro{margin-bottom:27px;align-items:center;gap:20px}
.creator-intro h1{font:400 39px/1.15 var(--serif);margin:7px 0 9px;letter-spacing:-.7px;color:var(--ink)}
.creator-intro .eyebrow{font-size:8px;letter-spacing:1.7px}.creator-intro p:not(.eyebrow){font-size:12px;color:var(--muted)}
.snapshot-link{font-size:10px;color:var(--muted);border-bottom:1px dotted #8c815f;padding:6px 0;white-space:nowrap}
.setup-layout{grid-template-columns:minmax(0,1fr) 296px;gap:34px}
.builder-block{margin-bottom:28px}.block-label{font-size:13px;margin-bottom:12px}.block-label .num{font-style:normal;border:1px solid #87714d;border-radius:3px;min-width:28px;height:28px;display:grid;place-items:center;font-size:13px}
.block-label .aside-label{font-size:8px;letter-spacing:1px}.class-help{margin-left:auto;color:var(--gold);font-size:11px;min-height:36px}
.art-frame{display:block;position:relative;overflow:hidden;isolation:isolate;flex-shrink:0}
.art-frame>svg,.art-frame>img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
/* Inline SVG is intentional: motion and pause live in the same document. */
.faction-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.faction-button{position:relative;min-height:126px;border:1px solid #52708b;border-radius:5px;overflow:hidden;text-align:left;padding:18px 20px;background:#223442;transition:border-color .2s,box-shadow .2s}
.faction-button.horde{border-color:#79534b;background:#432a29}
.faction-button .faction-art{position:absolute;inset:0;width:100%;height:100%;opacity:.72;pointer-events:none}
.faction-copy{position:relative;z-index:1;display:block;width:66%}.faction-copy strong{font:27px/1.2 var(--serif);display:block;color:#eee1c7;font-weight:600;letter-spacing:.4px}
.faction-copy small{font-size:10px;line-height:1.5;display:block;margin-top:8px;color:#d1d6d4}
.faction-selected{position:absolute;right:11px;top:10px;background:#15202cc9;border:1px solid #bca272;border-radius:50%;width:23px;height:23px;display:grid;place-items:center;font-size:12px;color:#e6c988}
.faction-button[aria-pressed=true],.faction-button.horde[aria-pressed=true]{border-color:#edc980;box-shadow:inset 0 0 0 1px #edc980,0 3px 20px #0003}
.faction-button:hover{border-color:#edc980}.faction-note{font-size:10px;color:#aeb6b5;margin-top:9px;line-height:1.7}
.class-grid{gap:8px}.class-card{min-height:108px;gap:10px;padding:0 8px 0 0;background:linear-gradient(120deg,#263740,#1b2831);border:1px solid #52615e80;border-radius:4px}
.class-card>.art-frame{width:82px;height:105px;mask-image:linear-gradient(90deg,#000 88%,transparent)}
.class-card strong{font-size:19px}.class-card small{font-size:9px;line-height:1.5}.class-card[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--accent);background:#2b3b3c}.class-card:disabled{opacity:.34;filter:grayscale(.65);cursor:not-allowed}
.class-description{padding:21px 22px;background:#1a2830;border:1px solid #786e5155;border-radius:4px;margin-top:12px}
.class-description h3{font-size:26px;color:#ecdfc4}.class-description>p:not(.eyebrow){font-size:12px;color:#bfc7c2;line-height:1.8}
.creator-lenses{display:flex;gap:6px;margin:15px 0 9px}.creator-lenses button{font-size:11px;padding:7px 17px;border:1px solid #5f665c;border-radius:3px;min-height:36px}
.creator-lenses [aria-pressed=true]{background:#514e38;border-color:var(--gold);color:#f3d398}.class-description>p.creator-outlook{font-size:12px;color:#e0dfd0}
.class-description>.small-note{font-size:10px!important;line-height:1.5!important;color:#a5afac!important}
.race-grid{gap:8px}.race-card{padding:0 0 9px;background:#243438;overflow:hidden;min-height:125px}
.race-card>.art-frame{width:100%;height:87px;margin-bottom:7px}.race-card span:not(.art-frame){font-size:11px}.race-card small{font-size:7px}.race-card:disabled{opacity:.3;filter:grayscale(.8) brightness(.62);cursor:not-allowed}
.character-card{top:22px;background:linear-gradient(145deg,#354249,#1c2930);padding:14px 17px 21px;border:1px solid #a58b5c;box-shadow:0 12px 34px #0003;border-radius:5px}
.character-card>.eyebrow{font-size:9px}.portrait-wrap{height:auto;aspect-ratio:4/5;margin:12px 0 17px;mask-image:none;border-radius:110px 110px 4px 4px;border:1px solid #9c865c99}
.portrait-wrap>.art-frame{width:100%;height:100%}.character-card h3{font-size:25px;margin:0}.character-subtitle{font-size:11px}
.portrait-caption{font-size:8px;color:var(--muted);margin-top:9px}.character-card .character-quote{font:12px/1.8 var(--sans);text-align:left;padding:16px 0;color:#ced2c6}
.character-details{margin-top:15px;gap:8px}.character-details>div{font-size:10px}.character-card .save-micro{margin-top:15px;font-size:9px}
input[type=text],select,textarea,input[type=search]{background:#17262e;border-color:#566864;color:var(--ink)}
.journey-intro{padding-top:35px;padding-bottom:30px;border-top:1px solid var(--line);text-align:left}.journey-intro h2{font-size:32px;margin-top:9px}.journey-intro>p:not(.eyebrow){font-size:12px;margin-top:12px}.timing-note{font-size:10px;margin-top:13px}
.chapter-nav{background:#19262eee;border-color:#796d51;height:61px}.chapter-nav .level-number{width:29px;height:29px}
.journal-layout{grid-template-columns:310px minmax(0,1fr);gap:48px;padding-top:34px}.story-side{top:80px}.story-plate{height:330px;border-radius:70px 70px 5px 5px;border-color:#a68c61}
.story-art-host{position:absolute;inset:0}.story-art-host>.art-frame{width:100%;height:100%}.plate-gradient{background:linear-gradient(0deg,#132229f5 0%,#172a3277 22%,transparent 60%)}
.plate-caption{left:20px;right:20px;bottom:19px}.plate-caption h3{font-size:25px;margin-top:7px}.plate-caption p{display:none}
.lens-control{background:#1b2b34;margin-top:14px;padding:15px;border-radius:4px}.lens-buttons button{font-size:11px;padding:8px}.lens-control>small{font-size:10px}.lens-motion{font-size:10px!important;color:#c2c2b2!important}
.kit-status{margin-top:12px!important}.kit-progress strong{font-size:27px!important}.kit-stamps img{width:34px;height:34px}.plate-note{margin-top:12px;font-size:9px}
.chapter{margin-bottom:40px;padding-bottom:38px}.chapter h2{font-size:34px;max-width:none}.chapter .story-prose{font-size:15px;max-width:none;margin-top:15px;color:#c7cbbd}.chapter .chapter-explainer{font-size:12px;line-height:1.8;margin-top:12px}
.chapter-kicker{margin-bottom:15px}.choice-card{background:#1d2d34;padding:15px 14px;min-height:135px}.choice-card span:not(.choice-tick){font-size:11px;line-height:1.7}.choice-card strong{font-size:19px}.choice-card[aria-pressed=true]{background:#35443c}
#chapter-15 .choice-card{min-height:236px}#chapter-15 .choice-card .icon{margin-bottom:9px}.chapter .impact-box{background:#26373a;color:#d3d7c8;font-size:12px}
.identity-lesson{border:1px solid #8b7c5580;border-top:3px solid var(--accent);background:linear-gradient(130deg,#293c40,#202e35);padding:23px 23px 20px;border-radius:4px;margin-top:25px}
.insight-kicker{display:flex;justify-content:space-between;gap:12px;font-size:9px;letter-spacing:1.15px;color:var(--gold);line-height:1.6}.insight-kicker span{font-size:8px;color:#b5c1b7;letter-spacing:.4px;text-align:right}
.identity-lesson h3{font-size:26px;margin-top:11px;line-height:1.25}.identity-lesson>p{font-size:13px;line-height:1.85;color:#e1e4d5;margin-top:13px}
.lesson-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}.lesson-tools button{display:inline-flex;align-items:center;gap:7px;padding:6px 9px 6px 5px;background:#14262c;border:1px solid #61736b80;border-radius:4px;font-size:10px;min-height:38px}.lesson-tools small{color:var(--gold);font-size:9px}.lesson-tools img{width:26px;height:26px}.lesson-tools button:hover{border-color:var(--gold)}
.direction-emphasis{border-left:2px solid #af9a63;padding:0 0 0 13px;margin-top:18px}.direction-emphasis strong{font-size:10px;color:#e0c789;font-weight:500}.direction-emphasis p{font-size:11px;line-height:1.8;color:#bdc8bf;margin-top:5px}
.lesson-evidence{display:block;color:#95a8a3;font-size:9px;line-height:1.7;margin-top:17px}.lesson-evidence a{color:var(--gold)}
.racial-insight{padding:18px 20px;background:#292e30;border:1px solid #8b786148;border-left:3px solid #be9972;border-radius:3px;margin-top:15px}
.racial-insight h4{font-size:23px;line-height:1.3;margin-top:8px}.racial-insight p{font-size:11px;line-height:1.8;color:#c9ccbe;margin-top:9px}.racial-insight .racial-mechanic{color:#eee1c5}
.racial-pair{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}.racial-pair>strong{font-size:9px;letter-spacing:.5px;color:#dbc08d}.racial-pair p{margin-top:6px}.racial-insight details{font-size:10px;margin-top:12px;color:#a6b2ad}.racial-insight summary{cursor:pointer;padding:5px 0}
.ability-card{background:#1a2a32;border-color:#6d776780}.ability-mechanic{color:#d0d7cc}.ability-use{background:#233839}.ability-use p{font-size:12px;line-height:1.8}.spellbook-caption{font-size:11px}.ability-provenance{font-size:8px}
.epilogue-frame{background:linear-gradient(135deg,#2b3d3e,#1e2d35);border-color:#a0885e}.next-step{background:#16272e}.outlook-grid p{font-size:12px}
dialog{background:#1b2b34;border-color:#a68e60}.site-footer{background:#111c23;border-top-color:#8b7656}.site-footer>p{font-size:9px}.footer-brand{font-size:12px}
.art-item>.art-frame{width:120px;height:125px}.quiz-result>.art-frame{width:70px;height:82px}.art-item p{font-size:11px}.source-list a{font-size:12px}
@media(max-width:1100px){.site-header nav{gap:15px}.site-header{gap:13px}.header-motion{font-size:9px}.setup-layout{grid-template-columns:minmax(0,1fr) 250px;gap:23px}.class-card>.art-frame{width:64px}.class-card strong{font-size:17px}.class-card small{font-size:8px}.journal-layout{grid-template-columns:270px minmax(0,1fr);gap:27px}.faction-copy strong{font-size:25px}.faction-button{padding:15px}.faction-copy small{font-size:9px}.identity-lesson{padding:20px}.section-wrap{padding-left:26px;padding-right:26px}}
@media(max-width:850px){.site-header nav{display:none}.site-header .header-motion{margin-left:auto}.setup-layout{grid-template-columns:1fr}.character-card{display:none}.creator-intro{align-items:flex-start}.class-card>.art-frame{width:82px}.class-card strong{font-size:20px}.class-card small{font-size:9px}.journal-layout{grid-template-columns:220px minmax(0,1fr);gap:24px}.story-plate{height:270px}.plate-caption h3{font-size:22px}.faction-button{min-height:118px}.choice-grid{grid-template-columns:1fr}#chapter-15 .choice-card{min-height:0}.four-choices{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.site-header{height:auto;min-height:76px;flex-wrap:wrap;gap:8px;padding:13px 17px}.brand>span{font-size:14px;letter-spacing:1px}.brand small{font-size:6px}.brand svg{width:26px}.site-header>.button{font-size:9px;padding:7px 9px;min-height:34px}.header-motion{order:3;flex-basis:100%;padding:3px 9px;min-height:27px;border-color:#796d5144;text-align:left;font-size:9px}.site-header .header-motion{margin:0}.section-wrap{padding-left:18px;padding-right:18px}.setup{padding-top:21px}.creator-intro{gap:10px;flex-direction:column;margin-bottom:18px}.creator-intro h1{font-size:32px;margin-top:0}.snapshot-link{font-size:9px;padding:2px 0}.block-label{font-size:12px}.block-label .aside-label{font-size:7px}.faction-row{gap:9px}.faction-button{min-height:111px;padding:12px 10px}.faction-copy{width:76%}.faction-copy strong{font-size:22px}.faction-copy small{font-size:8px;margin-top:8px;max-width:90px}.faction-selected{right:7px;top:7px;width:19px;height:19px;font-size:10px}.faction-art{opacity:.5!important}.faction-note{font-size:9px}.class-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.class-card{flex-direction:column;padding:0 5px 10px;min-height:144px;gap:0}.class-card>.art-frame{height:96px;width:86px;max-width:100%;mask-image:linear-gradient(#000 90%,transparent)}.class-card strong{font-size:17px}.class-card small{font-size:8px;min-height:23px;margin-top:4px}.class-description{padding:17px}.class-description h3{font-size:24px}.creator-lenses button{padding:7px 13px;min-height:40px}.class-help{font-size:10px}.race-grid{gap:6px}.race-card{min-height:103px;padding-bottom:8px}.race-card>.art-frame{height:63px;margin-bottom:6px}.race-card span:not(.art-frame){font-size:9px}.race-card small{font-size:6px}.racial-insight{padding:15px 16px}.racial-insight h4{font-size:22px}.racial-insight p{font-size:11px}.insight-kicker{font-size:8px;gap:8px;flex-wrap:wrap}.insight-kicker span{font-size:7px;text-align:left}.journey-intro{padding-top:26px;padding-bottom:23px}.journey-intro h2{font-size:29px}.journal-layout{display:block;padding-top:21px}.story-side{margin-bottom:29px}.lens-control{padding:14px}.inline-scene{display:block!important;width:100%;height:195px;border-radius:30px 30px 4px 4px;border-color:#aa91605e;opacity:1;margin-bottom:21px}.chapter h2{font-size:31px}.chapter .story-prose{font-size:15px}.choice-card{min-height:0}.four-choices{grid-template-columns:1fr}.identity-lesson{padding:19px 17px;margin-top:22px}.identity-lesson h3{font-size:24px}.identity-lesson>p{font-size:12px}.lesson-tools button{font-size:9px;min-height:40px}.lesson-evidence{font-size:9px}.ability-use p{font-size:12px}.chapter-kicker .badge{font-size:6px}.chapter-kicker{gap:8px}.art-item>.art-frame{width:80px;height:100px}.quiz-result>.art-frame{width:48px;height:69px}}
@media print{body{background:#fff}.header-motion,.identity-lesson,.racial-insight{display:none}.epilogue-frame{background:#fff}.epilogue-frame *{color:#222!important}}

.identity-lesson>.session-note{font-size:11px;color:#c3ccbd;border-top:1px solid var(--line);padding-top:10px;margin-top:12px}

.book-identity{border-left:3px solid var(--accent);background:#27383c;padding:16px 20px;margin:20px 0}.book-identity h3{font-size:24px;margin:7px 0 10px}.book-identity>p:not(.eyebrow){font-size:12px;line-height:1.8;color:#d3d8cb}

/* v0.3.1: stable loading geometry without changing the finished character sheet. */
/* Source-folder development uses a reserved skeleton. Published HTML contains
   the real creator, generated by render-start.mjs, with no skeleton flash. */
.creator-pending{min-height:1700px}
.creator-skeleton{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.creator-skeleton>div{height:126px;border:1px solid var(--line);border-radius:5px;background:var(--panel)}
.creator-skeleton>div:last-child{grid-column:1/-1;height:350px}
/* Reserve the longest status label, including a saved/system pause on startup. */
.header-motion{width:137px;flex-shrink:0}
@media(max-width:620px){.header-motion{width:100%}.creator-pending{min-height:1900px}}

/* Keep the five core identity choices together. Appearance is deliberately
   narrow so race can share the same row on normal creator widths. */
.creator-core-row{display:grid;grid-template-columns:178px minmax(0,1fr);gap:24px;align-items:start}
.creator-core-row .builder-block{margin-bottom:18px}
.creator-core-row .appearance-line{align-items:flex-start;gap:8px}
.creator-core-row .appearance-row{display:grid;grid-template-columns:repeat(2,68px);gap:7px}
.creator-core-row .appearance-mode-toggle{margin-top:2px}
.creator-core-row .race-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.creator-decision-summary{margin-top:4px}
@media(max-width:850px){.creator-core-row{grid-template-columns:1fr;gap:0}.creator-core-row .appearance-line{align-items:center}.creator-core-row .appearance-row{display:inline-flex}.creator-core-row .appearance-block{margin-bottom:18px}}

/* Appearance is cosmetic, so keep it a compact creation area. */
.appearance-block{margin-bottom:20px}.appearance-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.appearance-row{display:inline-flex;gap:7px;flex:none}
.appearance-choice{width:68px;height:60px;padding:5px 4px 4px;display:grid;grid-template-rows:34px 12px;place-items:center;background:#1c3036;border:1px solid #5a6460;border-radius:5px;color:#d8c397;cursor:pointer;position:relative}
.appearance-choice[aria-pressed="true"]{border-color:#d3b878;background:#283c3d;box-shadow:inset 0 0 0 1px #d3b87855,0 0 14px #d3b87812}
.appearance-choice:hover,.appearance-mode-toggle:hover{background:#304345}.appearance-choice:focus-visible,.appearance-mode-toggle:focus-visible{outline:3px solid #f2d78c;outline-offset:3px}
.appearance-glyph{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 0 #0008)}
.appearance-choice strong{font:600 8px/1.2 var(--sans);letter-spacing:.45px;white-space:nowrap;text-transform:uppercase;color:#c5cec4}
.appearance-check{position:absolute;right:4px;top:3px;width:13px;height:13px;border-radius:50%;display:grid;place-items:center;background:#d3b878;color:#172229;font-size:9px;line-height:1;opacity:0;transform:scale(.75);transition:opacity .15s,transform .15s}
.appearance-choice[aria-pressed="true"] .appearance-check{opacity:1;transform:scale(1)}
.appearance-mode-toggle{display:inline-flex;align-items:center;gap:7px;min-height:28px;padding:2px 6px 2px 3px;border:1px solid #70837c55;border-radius:999px;background:#172a30;color:#d8c397;cursor:pointer;font:600 9px/1 var(--sans);letter-spacing:.35px;text-transform:uppercase}
.appearance-mode-toggle:hover{border-color:#a99668;background:#20373b}
.appearance-switch{width:40px;height:21px;position:relative;flex:none;border:1px solid #75877e;border-radius:999px;background:#102329;box-shadow:inset 0 1px 3px #08141899;transition:background .18s,border-color .18s}
.appearance-switch::after{content:"";position:absolute;left:2px;top:2px;width:15px;height:15px;border-radius:50%;background:#d8c397;box-shadow:0 1px 3px #071319aa;transition:transform .2s cubic-bezier(.2,.8,.2,1),background .18s}
.appearance-mode-toggle[aria-pressed="true"] .appearance-switch{background:#72643e;border-color:#d3b878}
.appearance-mode-toggle[aria-pressed="true"] .appearance-switch::after{transform:translateX(19px);background:#fff0bf}
.appearance-mode-label{min-width:31px;text-align:left}
.appearance-line>.small-note{margin:0;max-width:330px;font-size:9px;line-height:1.5;color:#9eaaa5}
@media(max-width:620px){.appearance-block{margin-bottom:18px}.appearance-line{gap:9px}.appearance-choice{width:68px;height:54px;grid-template-rows:31px 11px}.appearance-glyph{width:29px;height:29px}.appearance-line>.small-note{max-width:220px}}