:root{--wbd-blue: #003057;--wbd-yellow: #ffbb0e;--wbd-white: #ffffff;--wbd-grey-light: #aeb2b5;--wbd-grey-mid: #66717e;--wbd-grey-dark: #53555c;--color-surface: var(--wbd-white);--color-surface-alt: #f4f5f6;--color-primary: var(--wbd-blue);--color-text: var(--wbd-blue);--color-text-secondary: var(--wbd-grey-dark);--color-border: var(--wbd-grey-light);--color-accent: var(--wbd-yellow);--color-success-bg: #e6f4ea;--color-success-text: #1a5c29;--color-error-bg: #fce8e8;--color-error-text: #8b1a1a;--color-warning: #c0530a;--font-sans: "Aptos", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;--radius: 6px;--shadow: 0 1px 4px rgba(0, 48, 87, .12);--transition: .12s ease}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:var(--font-sans);background:var(--color-surface-alt);color:var(--color-text);line-height:1.5}h1{font-size:1.5rem;font-weight:700;margin:0 0 .25rem;color:var(--color-primary)}h2{font-size:1.25rem;font-weight:600;margin:0 0 1rem;color:var(--color-primary)}p{margin:0 0 1rem;color:var(--color-text-secondary)}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem;max-width:480px;width:100%}.page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem}.app-header{text-align:center;margin-bottom:1.5rem;width:100%;max-width:1040px}.app-header h1{margin-bottom:.25rem}.app-header p{margin:0}.dual-panel{display:flex;gap:1.5rem;width:100%;max-width:1040px;align-items:flex-start}.dual-panel .card{max-width:none;flex:1;min-width:0}@media (max-width: 720px){.dual-panel{flex-direction:column}}.countdown-ring{display:block;flex-shrink:0}.card-heading-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.card-heading-row h2{margin:0}.word-display{font-size:2.5rem;font-weight:800;letter-spacing:.12em;color:var(--color-primary);background:var(--color-surface-alt);border:2px solid var(--color-primary);border-radius:var(--radius);padding:.75rem 1.5rem;text-align:center;margin:.75rem 0 1.5rem;-webkit-user-select:all;user-select:all}.label{display:block;font-size:.875rem;font-weight:600;color:var(--color-text-secondary);margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.04em}input[type=text]{width:100%;padding:.625rem .875rem;font-size:1.125rem;font-family:var(--font-sans);border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text);background:var(--color-surface);outline:none;transition:border-color var(--transition),box-shadow var(--transition)}input[type=text]:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #00305726}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.625rem 1.25rem;font-size:1.0625rem;font-family:var(--font-sans);font-weight:600;border-radius:var(--radius);border:2px solid transparent;cursor:pointer;transition:background var(--transition),color var(--transition),border-color var(--transition);width:100%}.btn:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:var(--wbd-white);border-color:var(--color-primary)}.btn-primary:hover:not(:disabled){background:#00213d;border-color:#00213d}.btn-secondary{background:var(--color-surface);color:var(--color-primary);border-color:var(--color-primary)}.btn-secondary:hover:not(:disabled){background:var(--color-surface-alt)}.btn-ghost{background:transparent;color:var(--color-text-secondary);border-color:var(--color-border);font-size:.875rem}.btn-ghost:hover:not(:disabled){background:var(--color-surface-alt)}.field{margin-bottom:1rem}.stack{display:flex;flex-direction:column;gap:.75rem}.mode-buttons{display:flex;flex-direction:column;gap:.75rem;margin-top:1.25rem}.status-banner{border-radius:var(--radius);padding:.875rem 1rem;font-weight:600;margin-bottom:1rem}.status-banner.success{background:var(--color-success-bg);color:var(--color-success-text)}.status-banner.error{background:var(--color-error-bg);color:var(--color-error-text)}.accent-bar{height:4px;background:var(--color-accent);border-radius:2px 2px 0 0;margin:-2rem -2rem 1.5rem}.step-hint{font-size:.8125rem;color:var(--color-text-secondary);margin-top:-.5rem;margin-bottom:1rem}.role-card{font-family:inherit;color:inherit;text-align:left;cursor:pointer;border:1px solid var(--color-border);transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition)}.role-card:hover{border-color:var(--color-primary);box-shadow:0 4px 12px #0030572e;transform:translateY(-2px)}.role-card:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}.role-card h2{font-size:1.375rem}.role-subtitle{font-size:1rem;color:var(--color-text-secondary);margin:0}.active-role{width:100%;max-width:480px;display:flex;flex-direction:column;gap:.75rem}.switch-role-link{align-self:flex-start;width:auto;padding:.375rem .75rem}