body { font-size: calc(14px * var(--type-scale, 1)); line-height: calc(22px * var(--type-scale, 1)); }
.page h1, .public-page h1 { font-size: calc(28px * var(--type-scale, 1)); }
.page h2, .public-page h2 { font-size: calc(20px * var(--type-scale, 1)); }
.page input, .page textarea, .page select, .page button { font-size: inherit; }
@media (max-width: 899px) { .page input:not([type=checkbox]):not([type=radio]), .page textarea, .page select { font-size: max(16px, 1em); } }
:root[data-surface="solid"] .glass { background: var(--sc); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
:root[data-motion="gentle"] *, :root[data-motion="gentle"] *::before, :root[data-motion="gentle"] *::after { animation-duration: .2s !important; animation-iteration-count: 1 !important; transition-duration: .12s !important; }
:root[data-weight="bold"] body { font-weight: 550; }
:root[data-dyslexia="true"] body { letter-spacing: .06em; word-spacing: .12em; line-height: calc(28px * var(--type-scale, 1)); }
:root[data-palette][data-look-mode][data-contrast="true"] { --on-var: var(--on); --on-ter: var(--on); --outline-var: var(--outline); }
:root[data-left="true"] .row-actions, :root[data-left="true"] .page-actions { flex-direction: row-reverse; justify-content: flex-end; }
:root[data-onehand="true"] .page .mtg-editor > .page-actions { position: sticky; bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom) + 8px); background: var(--surface); padding: var(--s-sm); border-radius: var(--r-card); z-index: 5; }
:root[data-simple="true"] .native-wing-arc, :root[data-simple="true"] .native-ribbon { display: none; }
:root[data-shapes="true"] .tone-warning .dot { border-radius: 0; transform: rotate(45deg); }
:root[data-shapes="true"] .tone-error .dot { border-radius: 0; }
:root[data-quiet="true"] .bell .badge { width: 8px; min-width: 8px; height: 8px; padding: 0; overflow: hidden; font-size: 0; }
:root[data-mascot-idle="still"] .native-banner-art { animation: none; }
:root[data-mascot-idle="wiggle"] .native-banner-art { animation: mascot-wiggle 6s ease-in-out infinite; }
:root[data-mascot-size="small"] .native-banner-art { width: 60px; }
:root[data-mascot-size="large"] .native-banner-art { width: 98px; }
.personal-layout-row { display: flex; gap: var(--s-xs); align-items: center; flex-wrap: wrap; padding: var(--s-xs) 0; border-bottom: 1px solid var(--outline-var); }
.personal-preview { padding: var(--s-xl); border-radius: var(--r-feature); background: var(--sc-low); border: 1px solid var(--outline-var); }
@keyframes mascot-wiggle { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-3deg); } 95% { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { :root .native-banner-art { animation: none !important; } }
.mood-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-md); }
.mood-choice { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 2px solid transparent; border-radius: var(--r-feature); padding: 12px; color: var(--mood-ink); background: var(--mood-tint); cursor: pointer; font-weight: 550; }
.mood-choice img { width: min(100%, 160px); height: auto; aspect-ratio: 1; object-fit: contain; }
.mood-choice[aria-pressed="true"] { border-color: var(--mood-ink); outline: 2px solid var(--outline); outline-offset: 3px; }
.mood-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; color: var(--on-var); padding: 4px 12px; }
.mood-badge img { object-fit: contain; flex: none; }
/* Complete original artwork: preserve its square canvas and draw no additional limbs or garments. */
.companion-figure{margin:0;display:grid;justify-items:center;gap:12px}.companion-figure img{width:112px;height:112px;object-fit:contain}.companion-figure-hero img{width:min(78vw,320px);height:min(78vw,320px)}.companion-figure figcaption{display:grid;justify-items:center;gap:8px}.personal-companion-hero{padding-block:24px;background:radial-gradient(ellipse at 50% 40%,var(--surface-high),transparent 68%)}.personal-companion-hero progress{width:100%}
.personal-shortcuts{display:flex;flex-wrap:wrap;gap:var(--s-sm);margin-block:var(--s-md)}.personal-shortcut-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s-sm)}
.account-panel{display:grid;gap:20px}.account-panel h3{margin:0 0 12px}.account-panel .page-actions{flex-wrap:wrap}.account-panel li{padding-block:8px}.topbar button.avatar{border:0;font:inherit;cursor:pointer;flex:none}
/* Decorative feedback uses the existing brand colors and never captures input. */
.delight-overlay,.delight-party{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:8;contain:strict}
.delight-overlay{opacity:.25;mask-image:linear-gradient(to right,#000,transparent 18%,transparent 82%,#000)}
.delight-overlay i,.delight-party i{position:absolute;left:var(--x);top:-12px;width:7px;height:7px;background:var(--particle-color);animation:delight-drift 18s linear infinite;animation-delay:var(--phase)}
.delight-petals i{border-radius:80% 10% 80% 20%;background:var(--brand-container);border:1px solid var(--accent)}
.delight-snow i{border-radius:50%;background:var(--on-ter);width:4px;height:4px}
.delight-sparkles i,.delight-sparkle i{clip-path:polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%);background:var(--accent)}
.delight-party{z-index:20;opacity:.7}.delight-party i{top:16%;animation:delight-complete 1.15s ease-out both;animation-delay:0s}
@keyframes delight-drift{to{transform:translate(16px,105vh) rotate(var(--turn))}}
@keyframes delight-complete{0%{opacity:0;transform:translateY(-12px) rotate(0)}20%{opacity:1}100%{opacity:0;transform:translateY(120px) rotate(var(--turn))}}
:root[data-motion="gentle"] .delight-overlay i{animation:none!important;top:calc(10% + var(--x));opacity:.25}
:root[data-simple="true"] .delight-overlay,:root[data-contrast="true"] .delight-overlay,body:has(.voice-room) .delight-overlay,body:has(canvas) .delight-overlay{display:none}
@media(prefers-reduced-motion:reduce){.delight-overlay,.delight-party{display:none}}