:root{--vh-color-bg-depth-900: #0f172a;--vh-color-bg-panel: rgba(15, 23, 42, .6);--vh-color-surface-border: rgba(148, 163, 184, .25);--vh-color-text-primary: #e2e8f0;--vh-color-text-secondary: rgba(226, 232, 240, .75);--vh-color-accent-start: #38bdf8;--vh-color-accent-end: #6366f1;--vh-color-neutral-hover: rgba(148, 163, 184, .2);--vh-color-neutral-border: rgba(148, 163, 184, .35);--vh-color-border-strong: rgba(148, 163, 184, .5);--vh-color-feedback-success: #34d399;--vh-color-feedback-error: #f87171;--vh-color-feedback-info: #38bdf8;--vh-shadow-primary: 0 24px 48px rgba(15, 23, 42, .35);--vh-shadow-primary-hover: 0 32px 60px rgba(15, 23, 42, .45);--vh-shadow-accent: 0 12px 24px rgba(99, 102, 241, .35);--vh-shadow-accent-hover: 0 16px 32px rgba(99, 102, 241, .45);--vh-font-family-heading: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--vh-font-family-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--vh-font-size-base: 16px;--vh-radius-pill: 999px;--vh-radius-card: 16px;--vh-spacing-2: .5rem;--vh-spacing-3: .75rem;--vh-spacing-4: 1rem;--vh-spacing-5: 1.5rem;--vh-spacing-6: 2rem}:root{color-scheme:light dark;font-family:var(--vh-font-family-body);line-height:1.5;font-weight:400;background-color:var(--vh-color-bg-depth-900);color:var(--vh-color-text-primary)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at top,rgba(59,130,246,.12),transparent 55%),radial-gradient(circle at bottom,rgba(14,165,233,.12),transparent 45%),var(--vh-color-bg-depth-900);font-family:var(--vh-font-family-body)}.app-shell{display:grid;grid-template-rows:auto 1fr auto;min-height:100vh;max-width:960px;margin:0 auto;padding:var(--vh-spacing-5);gap:var(--vh-spacing-5)}.app-header{display:flex;align-items:center;justify-content:space-between;gap:var(--vh-spacing-4)}.app-title{font-size:1.25rem;font-weight:600;color:inherit;text-decoration:none}.nav-list{display:flex;gap:var(--vh-spacing-3);list-style:none;padding:0;margin:0}.nav-link{padding:.5rem .75rem;border-radius:var(--vh-radius-pill);color:#e2e8f0cc;text-decoration:none;font-size:.95rem;transition:background-color .2s ease}.nav-link:hover{background-color:var(--vh-color-neutral-hover)}.nav-link-active{background:linear-gradient(135deg,var(--vh-color-accent-start),var(--vh-color-accent-end));color:var(--vh-color-bg-depth-900);font-weight:600}.sign-out-button{border:none;background:transparent;color:#e2e8f0cc;cursor:pointer;font-size:.95rem;padding:.5rem .75rem;border-radius:var(--vh-radius-pill);transition:background-color .2s ease}.sign-out-button:hover{background-color:var(--vh-color-neutral-hover)}.app-main{display:flex;flex-direction:column;gap:2rem}.app-footer{font-size:.85rem;color:#e2e8f099;text-align:center}.page{display:flex;flex-direction:column;gap:var(--vh-spacing-5);padding:0;background:transparent;border:none;box-shadow:none}.page-title{font-size:clamp(1.75rem,4vw,2.5rem);margin:0}.page-subtitle{margin:0;color:var(--vh-color-text-secondary);max-width:60ch}.page-actions{display:flex;flex-wrap:wrap;gap:var(--vh-spacing-3)}.ui-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem 1.25rem;border-radius:var(--vh-radius-pill);border:none;cursor:pointer;text-decoration:none;font-weight:600;transition:transform .2s ease,box-shadow .2s ease}.ui-button--primary{background:linear-gradient(135deg,var(--vh-color-accent-start),var(--vh-color-accent-end));color:var(--vh-color-bg-depth-900);box-shadow:var(--vh-shadow-accent)}.ui-button--primary:hover{transform:translateY(-1px);box-shadow:var(--vh-shadow-accent-hover)}.ui-button--secondary{background:var(--vh-color-neutral-hover);color:var(--vh-color-text-primary);box-shadow:var(--vh-shadow-primary)}.ui-button--secondary:hover{transform:translateY(-1px);box-shadow:var(--vh-shadow-primary-hover)}.ui-button--ghost{background:transparent;color:var(--vh-color-text-primary);border:1px solid var(--vh-color-neutral-border)}.ui-button--sm{padding:.45rem .9rem;font-size:.85rem}.ui-button--lg{padding:.85rem 1.5rem;font-size:1rem}.ui-button__icon{display:inline-flex}.ui-card{border-radius:var(--vh-radius-card);background:var(--vh-color-bg-panel);border:1px solid var(--vh-color-surface-border);box-shadow:var(--vh-shadow-primary);display:flex;flex-direction:column}.ui-card__header,.ui-card__content,.ui-card__footer{padding:var(--vh-spacing-5)}.ui-card__title{margin:0 0 .5rem;font-size:clamp(1.1rem,2.5vw,1.5rem)}.ui-card__description{margin:0;color:#e2e8f0bf}.ui-card__content{display:flex;flex-direction:column;gap:1rem}.page-card{background:#0f172abf}.ui-loader{display:flex;align-items:center;gap:.75rem;color:#e2e8f0d9}.ui-loader__spinner{width:16px;height:16px;border:3px solid rgba(148,163,184,.3);border-top-color:#38bdf8;border-radius:999px;animation:spin .8s linear infinite}.ui-dialog__root{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:1.5rem;z-index:1000}.ui-dialog__backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#0f172abf;border:0;padding:0;margin:0;cursor:pointer}.ui-dialog{position:relative;background:#0f172ae6;border-radius:20px;border:1px solid rgba(148,163,184,.35);padding:1.75rem;width:min(480px,100%);box-shadow:0 40px 80px #0f172a73;display:grid;gap:1rem}.ui-dialog__title{margin:0;font-size:1.4rem}.ui-dialog__description{margin:0;color:#e2e8f0bf}.ui-dialog__content{line-height:1.6}.ui-dialog__close{justify-self:flex-end;border:none;background:#94a3b826;color:#e2e8f0;border-radius:999px;padding:.4rem .9rem;cursor:pointer}.card-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.session-list{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;font-size:.9rem}.session-list li{display:flex;justify-content:space-between;gap:.75rem;padding:.65rem .85rem;border-radius:12px;background:#0f172aa6;border:1px solid rgba(148,163,184,.25)}.card{padding:1.25rem;border-radius:12px;background:#0f172acc;border:1px solid rgba(148,163,184,.25)}.auth-form{display:flex;flex-direction:column;gap:var(--vh-spacing-4);max-width:360px}.ui-field{display:flex;flex-direction:column;gap:var(--vh-spacing-2)}.ui-label{font-weight:600;font-size:.95rem}.ui-input{border-radius:10px;padding:.65rem .75rem;border:1px solid var(--vh-color-neutral-border);background-color:#0f172ae6;color:inherit;transition:border-color .2s ease,box-shadow .2s ease}.ui-input:focus{outline:2px solid rgba(99,102,241,.6);outline-offset:2px}.ui-input--success{border-color:#34d399b3;box-shadow:0 0 0 3px #34d39933}.ui-input--error{border-color:#f87171cc;box-shadow:0 0 0 3px #f8717133}.ui-field__message{margin:0;font-size:.9rem}.ui-field__message--success{color:var(--vh-color-feedback-success)}.ui-field__message--error{color:var(--vh-color-feedback-error)}.ui-field__message--info{color:var(--vh-color-feedback-info)}.debug-token{display:grid;gap:.75rem;padding:1rem;border-radius:12px;background:#0f172acc;border:1px dashed rgba(59,130,246,.5);max-width:420px}.debug-label{margin:0;font-weight:600}.loader{display:flex;align-items:center;gap:.75rem;justify-content:center;min-height:240px}.loader-indicator{width:16px;height:16px;border:3px solid rgba(148,163,184,.3);border-top-color:#38bdf8;border-radius:999px;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-boundary{display:grid;gap:var(--vh-spacing-4);padding:var(--vh-spacing-5);border-radius:var(--vh-radius-card);background:var(--vh-color-bg-panel);border:1px solid var(--vh-color-surface-border);box-shadow:var(--vh-shadow-primary);text-align:center}.error-boundary h1{margin:0;font-size:clamp(1.5rem,4vw,2rem)}.error-boundary__action{justify-self:center;padding:.65rem 1.25rem;border-radius:var(--vh-radius-pill);border:1px solid var(--vh-color-neutral-border);background:var(--vh-color-neutral-hover);color:var(--vh-color-text-primary);font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.error-boundary__action:hover{transform:translateY(-1px);box-shadow:var(--vh-shadow-primary-hover)}@media (max-width: 640px){.app-shell{padding:1rem}.app-header{flex-direction:column;align-items:flex-start}.page{padding:1.5rem}}.storybook-card{max-width:360px}.storybook-loader--compact{font-size:.85rem}.scenario-preview{display:grid;gap:var(--vh-spacing-3)}.scenario-preview h3{margin:0;font-size:1.1rem}.scenario-summary{margin:0;color:var(--vh-color-text-secondary)}.scenario-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--vh-spacing-3);margin:0}.scenario-meta dt{margin:0;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:#e2e8f099}.scenario-meta dd{margin:0;font-size:.95rem}.scenario-actions{display:flex;flex-wrap:wrap;gap:var(--vh-spacing-3)}.story-play{gap:var(--vh-spacing-5)}.story-play__header{display:flex;flex-direction:column;gap:var(--vh-spacing-3)}.story-play__meta{display:flex;flex-wrap:wrap;gap:var(--vh-spacing-4);margin:0;padding:0}.story-play__meta div{min-width:160px}.story-play__meta dt{margin:0;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#e2e8f099}.story-play__meta dd{margin:.25rem 0 0;font-size:.95rem}.story-play__card .ui-card__content{gap:var(--vh-spacing-4)}.story-play__loader{justify-content:flex-start}.story-play__error{display:grid;gap:var(--vh-spacing-3);padding:var(--vh-spacing-4);border-radius:var(--vh-radius-card);background:#b91c1c1f;color:#fee2e2}.story-play__narrative p{margin:0;font-size:1rem;line-height:1.65}.story-play__choices{list-style:none;display:grid;gap:var(--vh-spacing-4);margin:0;padding:0}.story-play__choice{display:grid;gap:var(--vh-spacing-2)}.story-play__choice-description{margin:0;color:var(--vh-color-text-secondary);font-size:.95rem}.story-play__choice-consequence{margin:0;font-size:.9rem;color:#f7ab0acc}.story-play__actions{display:flex;flex-wrap:wrap;gap:var(--vh-spacing-3)}.story-play__feedback{margin:0;font-size:.9rem;color:#fee2e2}.story-play__empty{margin:0;font-size:.95rem;color:var(--vh-color-text-secondary)}.story-play__resume-hint{margin:0;font-size:.9rem;color:#81c7d4d9}.story-play__timeline{display:grid;gap:var(--vh-spacing-3)}.story-play__timeline-header{display:flex;align-items:center;justify-content:space-between;gap:var(--vh-spacing-3)}.story-play__timeline h3{margin:0;font-size:1rem}.story-play__timeline-refresh{padding:.35rem .85rem;border-radius:var(--vh-radius-pill);border:1px solid var(--vh-color-neutral-border);background:transparent;color:var(--vh-color-text-secondary);cursor:pointer;font-size:.85rem}.story-play__timeline-refresh:hover{background:var(--vh-color-neutral-hover)}.story-play__timeline-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--vh-spacing-4);position:relative}.story-play__timeline-step{display:grid;grid-template-columns:auto 1fr;gap:var(--vh-spacing-3);position:relative}.story-play__timeline-marker{width:12px;height:12px;border-radius:999px;background:linear-gradient(135deg,var(--vh-color-accent-start),var(--vh-color-accent-end));margin-top:.5rem;box-shadow:var(--vh-shadow-accent)}.story-play__timeline-content{display:grid;gap:var(--vh-spacing-2);padding-bottom:var(--vh-spacing-2);border-left:1px solid rgba(148,163,184,.3);padding-left:var(--vh-spacing-3)}.story-play__timeline-step:last-child .story-play__timeline-content{border-left-color:transparent}.story-play__timeline-node{display:flex;flex-wrap:wrap;gap:var(--vh-spacing-2);margin:0;font-size:.95rem}.story-play__timeline-node span{font-size:.85rem;color:var(--vh-color-text-secondary)}.story-play__timeline-choice{margin:0;font-size:.9rem;color:var(--vh-color-text-secondary)}.story-play__timeline-choice span{color:var(--vh-color-text-primary);font-weight:600}.story-play__timeline-empty{margin:0;font-size:.9rem;color:var(--vh-color-text-secondary)}.story-play__achievements{display:grid;gap:var(--vh-spacing-3)}.story-play__achievements-header{display:flex;align-items:center;justify-content:space-between;gap:var(--vh-spacing-3)}.story-play__achievements-header h3{margin:0;font-size:1rem}.story-play__achievements-header span{font-size:.85rem;color:var(--vh-color-text-secondary)}.story-play__achievement-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--vh-spacing-3)}.story-play__achievement{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--vh-spacing-3);padding:.85rem 1rem;border-radius:var(--vh-radius-card);border:1px solid var(--vh-color-neutral-border);background:#ffffff05}.story-play__achievement--unlocked{border-color:#60a5fa99;background:#60a5fa26}.story-play__achievement-name{font-weight:600;display:block}.story-play__achievement-description{margin:.25rem 0 0;font-size:.9rem;color:var(--vh-color-text-secondary)}.story-play__achievement-badge{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#94a3b8cc}.story-play__achievements-empty{margin:0;font-size:.9rem;color:var(--vh-color-text-secondary)}.achievement-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--vh-spacing-3)}.achievement-list__item{display:grid;gap:var(--vh-spacing-1)}.achievement-list__name{margin:0;font-weight:600;display:flex;align-items:center;gap:var(--vh-spacing-2)}.achievement-list__badge{font-size:.75rem;padding:.1rem .5rem;border-radius:var(--vh-radius-pill);background:linear-gradient(135deg,var(--vh-color-accent-start),var(--vh-color-accent-end));color:var(--vh-color-bg-depth-900);font-weight:600}.achievement-list__description{margin:0;color:var(--vh-color-text-secondary);font-size:.9rem}.achievement-list__more{margin:0;font-size:.85rem;color:var(--vh-color-text-secondary)}