:root{color:#201b15;background:#f7f1e6;font-family:Inter,"Source Sans 3",system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-bg-app: #f7f1e6;--color-bg-surface: #fffcf4;--color-bg-surface-muted: #f1e6d3;--color-bg-surface-raised: #ffffff;--color-text-primary: #201b15;--color-text-secondary: #5b5145;--color-text-muted: #7b6f60;--color-text-inverse: #fff8ea;--color-border-subtle: #e2d4be;--color-border-strong: #bfae91;--color-accent-primary: #2f5d46;--color-accent-primary-hover: #254a38;--color-accent-soft: #dde8dc;--color-accent-text: #1f4634;--color-detail-brass: #a67832;--color-detail-ochre-soft: #e8d4a8;--color-state-hp: #8f2f2f;--color-state-ac: #2f4f73;--color-state-action: #2f5d46;--color-state-bonus: #7a5a22;--color-state-spell: #365f7c;--color-state-concentration: #8a5a1f;--color-focus: #1f6f56;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-sheet: 12px 12px 0 0;--radius-pill: 999px;--shadow-card: 0 1px 2px rgba(32, 27, 21, .08);--shadow-sheet: 0 -12px 32px rgba(32, 27, 21, .22);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px}*{box-sizing:border-box}html{min-width:320px;background:var(--color-bg-app)}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden;background:linear-gradient(rgba(255,252,244,.42) 1px,transparent 1px),var(--color-bg-app);background-size:100% 28px}button{font:inherit}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app-shell{width:min(100%,560px);min-height:100vh;margin:0 auto;padding:var(--space-6) var(--space-4)}.landing-page{display:flex;flex-direction:column}.brand-block{margin-bottom:var(--space-5)}.brand-logo{display:block;width:min(220px,70vw);height:auto;margin-bottom:var(--space-3)}.brand-tagline{margin:0 0 var(--space-2);color:var(--color-text-secondary);font-size:1rem;font-weight:600}.brand-support{max-width:34rem;margin:0;color:var(--color-text-secondary);font-size:1rem;line-height:1.5}.sample-card,.reference-summary{border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);background:var(--color-bg-surface);box-shadow:var(--shadow-card)}.sample-card{display:grid;gap:var(--space-3);padding:var(--space-4)}.sample-card__identity,.reference-identity{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--space-3);min-width:0}.sample-card__rule{width:64px;height:3px;border-radius:var(--radius-pill);background:var(--color-detail-brass)}.portrait{display:block;flex:0 0 auto;border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);background:var(--color-bg-surface-muted);object-fit:cover;object-position:center top;box-shadow:var(--shadow-card)}.portrait--landing{width:76px;height:76px}.portrait--reference{width:96px;height:112px}.eyebrow,.section-kicker{margin:0;color:var(--color-accent-text);font-size:.8125rem;font-weight:700}.character-name{margin:0;color:var(--color-text-primary);font-family:Fraunces,Georgia,serif;font-size:clamp(1.75rem,10vw,2.125rem);line-height:1.08}.identity-line,.supporting-line,.preview-note{margin:0;color:var(--color-text-secondary);line-height:1.45}.supporting-line{color:var(--color-text-muted)}.landing-stat-strip,.primary-stats,.secondary-stats,.sheet-meta{display:grid;gap:var(--space-2);margin:0}.landing-stat-strip,.primary-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.stat{min-width:0;padding:var(--space-3);border:1px solid transparent;border-radius:var(--radius-md);background:var(--color-bg-surface-muted)}.stat dt{margin-bottom:var(--space-1);color:var(--color-text-muted);font-size:.78rem;font-weight:700}.stat dd{margin:0;color:var(--color-text-primary);font-variant-numeric:tabular-nums;font-size:clamp(1.1rem,5vw,1.45rem);font-weight:800}.stat--hp{border-color:#2f5d4642}.stat--hp-reduced{border-color:var(--color-border-subtle)}.hp-value{font-variant-numeric:tabular-nums}.hp-value--full{color:var(--color-accent-primary)}.hp-value--split{display:inline-flex;align-items:baseline;gap:.18em}.hp-value__current,.hp-value__separator{color:var(--color-text-muted);font-size:.78em;font-weight:700}.hp-value__max{color:var(--color-text-primary)}.stat--ac{border-color:#2f4f7342}.stat--ac dd{color:var(--color-state-ac)}.badge-row,.ability-row__meta{display:flex;flex-wrap:wrap;gap:var(--space-2)}.badge{display:inline-flex;align-items:center;min-height:28px;padding:3px 10px;border-radius:var(--radius-pill);background:var(--color-bg-surface-muted);color:var(--color-text-secondary);font-size:.8125rem;font-weight:700;line-height:1.2}.badge--feature,.badge--neutral{background:var(--color-accent-soft);color:var(--color-accent-text)}.badge--action{background:#2f5d461f;color:var(--color-state-action)}.badge--bonus{background:#7a5a2224;color:var(--color-state-bonus)}.badge--spell{background:#365f7c24;color:var(--color-state-spell)}.badge--concentration{background:#8a5a1f24;color:var(--color-state-concentration)}.badge--passive{background:var(--color-bg-surface-muted);color:var(--color-text-secondary)}.button,.future-link,.back-button,.sheet-close,.details-toggle{min-height:44px;border-radius:var(--radius-md);cursor:pointer;font-weight:800}.button{width:100%;border:1px solid transparent;padding:0 var(--space-4)}.button--primary{background:var(--color-accent-primary);color:var(--color-text-inverse)}.button--primary:hover,.button--primary:active{background:var(--color-accent-primary-hover)}.button--secondary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);border-color:var(--color-border-subtle);background:var(--color-bg-surface);color:var(--color-text-primary)}.future-button,.future-link{color:var(--color-text-secondary)}.future-tag{flex:0 0 auto;padding:2px 8px;border-radius:var(--radius-pill);background:var(--color-bg-surface-muted);color:var(--color-text-muted);font-size:.75rem;font-weight:800}.start-group{display:grid;gap:var(--space-3);margin-top:var(--space-5)}.quiet-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}.future-link{display:inline-flex;align-items:center;gap:var(--space-2);border:0;background:transparent;padding:0 var(--space-2)}.reference-page{padding-top:var(--space-4);padding-bottom:var(--space-8)}.reference-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}.back-button,.sheet-close,.details-toggle{border:1px solid var(--color-border-subtle);background:var(--color-bg-surface);color:var(--color-text-secondary);padding:0 var(--space-3)}.back-button:hover,.sheet-close:hover,.details-toggle:hover{background:var(--color-accent-soft);color:var(--color-accent-text)}.reference-nav__label{color:var(--color-text-secondary);font-size:.95rem;font-weight:800}.reference-summary{display:grid;gap:var(--space-3);padding:var(--space-4)}.reference-summary h1{margin:0;color:var(--color-text-secondary);font-size:1rem;font-weight:800}.reference-character{margin-top:var(--space-1)}.status-line{width:fit-content;margin:0;padding:5px 10px;border-radius:var(--radius-pill);background:var(--color-bg-surface-muted);color:var(--color-text-secondary);font-size:.875rem;font-weight:700}.secondary-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.secondary-stats .stat{padding:var(--space-2)}.secondary-stats .stat dd{font-size:1rem}.reference-sections{display:grid;gap:var(--space-3);margin-top:var(--space-4)}.reference-section{border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);background:#fffcf4b8;overflow:hidden}.section-header{display:flex;width:100%;min-height:48px;align-items:center;justify-content:space-between;gap:var(--space-3);border:0;border-bottom:1px solid var(--color-border-subtle);background:transparent;color:var(--color-text-primary);padding:var(--space-3) var(--space-4);font-weight:900;text-align:left}.section-header:hover{background:var(--color-accent-soft)}.section-state{color:var(--color-text-muted);font-size:.78rem;font-weight:800}.section-panel{display:grid;gap:var(--space-2);padding:var(--space-3)}.ability-row{display:grid;width:100%;min-height:72px;gap:var(--space-2);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background:var(--color-bg-surface);color:var(--color-text-primary);padding:var(--space-3);text-align:left;cursor:pointer}.ability-row:hover{border-color:var(--color-accent-primary);background:var(--color-accent-soft)}.ability-row--future{cursor:default}.ability-row__main{display:grid;gap:var(--space-1)}.ability-row__title{font-weight:900}.ability-row__hint{color:var(--color-text-secondary);font-size:.94rem;line-height:1.35}.ability-row__affordance{color:var(--color-accent-text);font-size:.82rem;font-weight:900}.sheet-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;align-items:flex-end;justify-content:center;background:#201b156b;padding-top:var(--space-8)}.bottom-sheet{display:grid;width:min(100%,560px);max-height:calc(100vh - var(--space-8));gap:var(--space-3);overflow-y:auto;border:1px solid var(--color-border-strong);border-bottom:0;border-radius:var(--radius-sheet);background:var(--color-bg-surface-raised);box-shadow:var(--shadow-sheet);padding:var(--space-4)}.sheet-handle{width:48px;height:4px;justify-self:center;border-radius:var(--radius-pill);background:var(--color-border-strong)}.sheet-header{display:flex;align-items:start;justify-content:space-between;gap:var(--space-4)}.sheet-header h2{margin:var(--space-1) 0 0;color:var(--color-text-primary);font-size:clamp(1.4rem,7vw,1.625rem)}.sheet-summary{margin:0;color:var(--color-text-primary);font-size:1.08rem;font-weight:800;line-height:1.4}.sheet-meta{grid-template-columns:repeat(2,minmax(0,1fr))}.sheet-meta div{padding:var(--space-3);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);background:var(--color-bg-surface-muted)}.sheet-meta dt{color:var(--color-text-muted);font-size:.78rem;font-weight:900}.sheet-meta dd{margin:var(--space-1) 0 0;color:var(--color-text-primary);font-weight:900}.reminder-block{border-left:4px solid var(--color-detail-brass);border-radius:var(--radius-md);background:var(--color-detail-ochre-soft);padding:var(--space-3)}.reminder-block h3,.reminder-block p,.details-copy{margin:0}.reminder-block h3{margin-bottom:var(--space-1);font-size:.95rem}.reminder-block p,.details-copy{color:var(--color-text-primary);line-height:1.45}.details-block{display:grid;justify-items:start;gap:var(--space-2)}.details-toggle{min-width:44px}@media(min-width:720px){.app-shell{width:min(100%,760px);padding-top:var(--space-8)}.landing-page{justify-content:center}.brand-logo{width:260px}.sample-card{padding:var(--space-5)}.reference-page{width:min(100%,680px)}}@media(max-width:390px){.app-shell{padding-right:var(--space-3);padding-left:var(--space-3)}.sample-card__identity{grid-template-columns:64px minmax(0,1fr)}.reference-identity{grid-template-columns:78px minmax(0,1fr)}.portrait--landing{width:64px;height:64px}.portrait--reference{width:78px;height:92px}.landing-stat-strip,.sheet-meta{grid-template-columns:1fr}.reference-summary{gap:var(--space-2);padding:var(--space-3)}.primary-stats,.secondary-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-1)}.primary-stats .stat,.secondary-stats .stat{padding:var(--space-2)}.reference-sections{margin-top:var(--space-3)}.sheet-header{align-items:stretch;flex-direction:column}.sheet-close{width:100%}}