@import url('./tokens.css');
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-canvas);color:var(--color-ink);font:var(--font-size-base)/var(--line-height-body) var(--font-body)}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
img{max-width:100%}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:var(--font-display)}
code{font-size:.9em;background:var(--color-surface-alt);padding:2px 5px;border-radius:5px}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.ui-container{max-width:var(--content-max);margin-inline:auto;padding:var(--space-8) var(--space-6)}
.ui-eyebrow{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--color-muted);font-weight:700}
.ui-display{font-size:var(--font-size-title);line-height:1.1;font-weight:500;margin-bottom:12px}
.ui-subtitle{font-size:var(--font-size-lg);color:var(--color-muted);max-width:850px}
.ui-section-title{font-size:32px;font-weight:500;margin-bottom:10px}
.ui-lede{color:var(--color-muted)}
.ui-panel{background:var(--color-surface);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-card)}
.ui-rule{border:0;border-top:1px solid var(--color-border);margin:var(--space-8) 0}
.ui-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.ui-stack{display:grid;gap:var(--space-4)}
.ui-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.ui-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.ui-chip{border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:5px 10px;font-size:var(--font-size-xs);color:var(--color-muted);background:var(--color-surface)}
.ui-btn{border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:var(--control-height);padding:10px 20px;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:700;line-height:1.2;transition:background var(--duration-fast),transform var(--duration-fast),box-shadow var(--duration-fast),border-color var(--duration-fast);text-decoration:none;position:relative;user-select:none;white-space:normal}
.ui-btn--primary{background:var(--color-primary);color:#fff}
.ui-btn--secondary{background:var(--color-surface);color:var(--color-primary);border-color:var(--color-border)}
.ui-btn--ghost{background:transparent;color:var(--color-primary);border-color:transparent}
.ui-btn:not(:disabled):hover,.ui-btn[data-demo-state='hover']{transform:translateY(-1px);box-shadow:var(--shadow-card)}
.ui-btn--primary:not(:disabled):hover,.ui-btn--primary[data-demo-state='hover']{background:var(--color-primary-hover)}
.ui-btn--secondary:not(:disabled):hover,.ui-btn--secondary[data-demo-state='hover']{background:var(--color-surface-alt);border-color:var(--color-primary)}
.ui-btn:not(:disabled):active,.ui-btn[data-demo-state='pressed']{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.12)}
.ui-btn--primary:not(:disabled):active,.ui-btn--primary[data-demo-state='pressed']{background:var(--color-primary-pressed)}
.ui-btn[aria-pressed='true'],.ui-btn[data-demo-state='selected']{box-shadow:0 0 0 3px rgba(59,107,85,.18);border-color:var(--color-primary)}
.ui-btn:disabled,.ui-btn[data-demo-state='disabled']{opacity:.5;box-shadow:none;transform:none;filter:grayscale(.25);cursor:not-allowed;pointer-events:none}
.ui-choice{display:flex;flex-direction:column;text-align:left;gap:var(--space-2);min-height:132px;padding:var(--space-5);border:2px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-ink);box-shadow:var(--shadow-card);transition:transform var(--duration-fast),border-color var(--duration-fast),background var(--duration-fast),box-shadow var(--duration-fast);width:100%}
.ui-choice__title{font-weight:700;font-size:var(--font-size-lg)}
.ui-choice__desc{color:var(--color-muted);font-size:var(--font-size-sm)}
.ui-choice__meta{font-weight:700;color:var(--color-primary);margin-top:auto}
.ui-choice:not(:disabled):hover,.ui-choice[data-demo-state='hover']{transform:translateY(-2px);box-shadow:var(--shadow-raised);border-color:var(--color-primary)}
.ui-choice:not(:disabled):active,.ui-choice[data-demo-state='pressed']{transform:translateY(1px)}
.ui-choice[aria-pressed='true'],.ui-choice[data-demo-state='selected']{border-color:var(--color-primary);background:var(--color-surface-alt);box-shadow:0 0 0 3px rgba(59,107,85,.12)}
.ui-choice:disabled,.ui-choice[data-demo-state='disabled']{opacity:.48;cursor:not-allowed;pointer-events:none}
.ui-dialogue{display:flex;gap:var(--space-4);align-items:flex-start;background:var(--color-surface);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-card);max-width:670px}
.ui-dialogue img.ui-dialogue__portrait{width:75px;height:75px;max-height:none;flex:0 0 75px;border-radius:var(--radius-md);object-fit:cover;background:var(--color-canvas)}
/* Portraits are cropped from the full-body sprites in characters/: show Bonnie's head and ears, Pip whole */
.ui-dialogue img.ui-dialogue__portrait[data-character='bonnie']{object-fit:cover;object-position:50% 0}
.ui-dialogue img.ui-dialogue__portrait[data-character='pip']{object-fit:contain}
.ui-dialogue__name{font-weight:700;font-size:var(--font-size-sm);color:var(--color-primary);margin:0 0 4px}
.ui-dialogue__message{margin:0}
.ui-steps{display:flex;gap:8px;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.ui-step{display:flex;gap:8px;align-items:center;font-size:var(--font-size-sm);color:var(--color-muted);padding:7px 10px;border-radius:var(--radius-pill);border:1px solid transparent}
.ui-step__num{display:grid;place-items:center;border:1px solid var(--color-border);border-radius:50%;width:30px;height:30px;font-weight:700;font-size:var(--font-size-xs)}
.ui-step[data-status='active']{background:var(--color-surface-alt);color:var(--color-ink);font-weight:700}
.ui-step[data-status='done'] .ui-step__num{background:var(--color-primary);border-color:var(--color-primary);color:white}
.ui-progress{height:10px;background:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:var(--radius-pill);overflow:hidden}
.ui-progress__fill{height:100%;background:var(--color-primary);width:0;transition:width var(--duration-normal)}
.ui-wallet{display:inline-flex;align-items:center;gap:8px;border-radius:var(--radius-pill);background:var(--color-surface-alt);border:1px solid var(--color-border);padding:8px 13px;color:var(--color-ink)}
.ui-wallet__amount{font-weight:700;color:var(--color-primary)}
.ui-feedback{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-alt);padding:var(--space-4)}
.ui-feedback[data-tone='success']{background:var(--color-success-soft);border-color:var(--color-success);color:var(--color-success)}
.ui-feedback[data-tone='error']{background:var(--color-danger-soft);border-color:var(--color-danger);color:var(--color-danger)}
.ui-feedback[data-tone='warning']{background:var(--color-warning-soft);border-color:var(--color-warning);color:var(--color-warning)}
.ui-feedback__title{font-weight:700;margin:0 0 3px}.ui-feedback__text{margin:0}
.ui-overlay[hidden]{display:none!important}
.ui-overlay{position:fixed;inset:0;background:rgba(18,36,27,.55);display:grid;place-items:center;padding:var(--space-5);z-index:100}
.ui-modal{width:min(520px,100%);background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border);padding:var(--space-8);box-shadow:0 20px 60px rgba(0,0,0,.23)}
.ui-modal h2{margin:0 0 10px}.ui-modal[data-tone='success'] h2{color:var(--color-success)}.ui-modal[data-tone='error'] h2{color:var(--color-danger)}.ui-modal[data-tone='summary'] h2{color:var(--color-primary)}.ui-modal p{color:var(--color-muted)}
.ui-color-token{display:flex;align-items:center;gap:10px;font-size:var(--font-size-sm)}
.ui-color-token__swatch{width:50px;height:50px;flex:none;border:1px solid var(--color-border);border-radius:var(--radius-sm)}
.ui-token-note{font-size:var(--font-size-xs);color:var(--color-muted)}
.ui-reference-image{border-radius:var(--radius-md);display:block;width:100%;max-height:400px;object-fit:cover}
.ui-note{padding:15px 18px;border-left:4px solid var(--color-accent);background:#fff8ef;border-radius:0 var(--radius-md) var(--radius-md) 0}
.ui-flag{display:inline-flex;align-items:center;padding:4px 10px;border:1px solid #b99565;border-radius:var(--radius-pill);background:#fff2d9;color:#815820;font-size:var(--font-size-xs);font-weight:700}
@media(max-width:760px){.ui-grid,.ui-grid.two{grid-template-columns:1fr}.ui-container{padding:24px 16px}.ui-panel{padding:20px}.ui-dialogue img.ui-dialogue__portrait{width:62px;height:62px;flex-basis:62px}.ui-steps{gap:3px}.ui-step{padding:5px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}