body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: var(--sp-lg);
        }

        .onboard-wrap {
            max-width: 520px;
            width: 100%;
        }

        .step-indicator {
            display: flex;
            gap: var(--sp-sm);
            justify-content: center;
            margin-bottom: var(--sp-2xl);
        }

        .step-dot {
            width: 40px;
            height: 4px;
            border-radius: var(--r-full);
            background: var(--bg-elevated);
            transition: all var(--t-med) var(--ease-out);
        }

        .step-dot.active {
            background: var(--accent-fill);
            width: 60px;
        }

        .step-dot.done {
            background: var(--success);
        }

        .step-screen {
            display: none;
            animation: fadeIn 0.4s var(--ease-out) both;
        }

        .step-screen.active {
            display: block;
        }

        .step-header {
            text-align: center;
            margin-bottom: var(--sp-xl);
        }

        .step-header .emoji,
        .inst-icon,
        .opt-icon,
        .mentor-avatar,
        #result-emoji {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .step-header .emoji {
            font-size: var(--text-4xl);
            margin-bottom: var(--sp-md);
        }

        .step-header .emoji svg,
        .inst-icon svg,
        .opt-icon svg,
        .mentor-avatar svg,
        #result-emoji svg {
            width: 1.2em;
            height: 1.2em;
            display: block;
        }

        .step-header h1 {
            margin-bottom: var(--sp-sm);
        }

        .option-grid {
            display: grid;
            gap: var(--sp-sm);
        }

        .option-btn {
            display: flex;
            align-items: center;
            gap: var(--sp-md);
            padding: var(--sp-md) var(--sp-lg);
            border-radius: var(--r-md);
            background: var(--bg-card);
            border: 1.5px solid var(--border);
            cursor: pointer;
            transition: all var(--t-fast) var(--ease-out);
            color: var(--text-primary);
            font-family: inherit;
            font-size: var(--text-base);
            font-weight: 500;
            text-align: left;
            width: 100%;
        }

        .option-btn:hover {
            border-color: var(--border-hover);
            background: var(--bg-hover);
        }

        .option-btn.selected {
            border-color: var(--accent);
            background: var(--accent-soft);
        }

        .option-btn .opt-icon {
            font-size: var(--text-xl);
            width: 2.3rem;
            height: 2.3rem;
            border-radius: var(--r-sm);
            background: rgba(129, 140, 248, 0.08);
            color: var(--text-accent);
        }

        .option-btn .opt-label {
            flex: 1;
        }

        .option-btn .opt-desc {
            font-size: var(--text-sm);
            color: var(--text-muted);
            margin-top: 0.1rem;
        }

        .inst-icon {
            width: 3.1rem;
            height: 3.1rem;
            border-radius: var(--r-md);
            background: rgba(129, 140, 248, 0.08);
            color: var(--text-accent);
            margin-bottom: var(--sp-sm);
        }

        .option-btn .opt-check {
            width: 20px;
            height: 20px;
            border-radius: var(--r-full);
            border: 2px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--text-xs);
            transition: all var(--t-fast);
        }

        .option-btn.selected .opt-check {
            background: var(--accent-fill);
            border-color: var(--accent);
            color: #fff;
        }

        .nav-row {
            display: flex;
            justify-content: space-between;
            margin-top: var(--sp-2xl);
        }

        /* Result screen */
        .result-card {
            text-align: center;
            padding: var(--sp-2xl);
            background: linear-gradient(135deg, var(--bg-card), rgba(129, 140, 248, 0.06));
            border: 1px solid rgba(129, 140, 248, 0.15);
        }

        .result-card .emoji {
            font-size: var(--text-5xl);
            margin-bottom: var(--sp-md);
        }

        .result-path {
            display: flex;
            flex-direction: column;
            gap: var(--sp-sm);
            margin-top: var(--sp-xl);
            text-align: left;
        }

        .result-item {
            display: flex;
            align-items: center;
            gap: var(--sp-md);
            padding: var(--sp-sm) var(--sp-md);
            border-radius: var(--r-sm);
            background: var(--bg-glass);
            font-size: var(--text-sm);
        }

        .result-item .r-num {
            width: 24px;
            height: 24px;
            border-radius: var(--r-full);
            background: var(--accent-soft);
            color: var(--text-accent);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--text-xs);
            font-weight: 700;
            flex-shrink: 0;
        }

        /* Settings Sliders */
        .settings-row {
            margin-bottom: var(--sp-lg);
            text-align: left;
        }

        .settings-row label {
            display: block;
            font-size: var(--text-sm);
            margin-bottom: 8px;
            color: var(--text-secondary);
            font-weight: 600;
        }

        .slider-wrap {
            display: flex;
            align-items: center;
            gap: var(--sp-md);
        }

        input[type="range"] {
            flex: 1;
            accent-color: var(--accent);
        }

        .slider-val {
            min-width: 40px;
            font-family: 'JetBrains Mono', monospace;
            font-size: var(--text-sm);
            color: var(--text-accent);
        }

        .status-note {
            margin-top: var(--sp-sm);
            padding: var(--sp-sm) var(--sp-md);
            border-radius: var(--r-sm);
            font-size: var(--text-sm);
            border: 1px solid var(--border);
            background: var(--bg-glass);
            color: var(--text-secondary);
        }

        .promise-panel {
            margin-top: var(--sp-lg);
            padding: var(--sp-lg);
            border-radius: var(--r-lg);
            background: linear-gradient(135deg, rgba(129, 140, 248, 0.12), rgba(16, 185, 129, 0.08));
            border: 1px solid rgba(129, 140, 248, 0.18);
            text-align: left;
        }

        .promise-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: var(--sp-sm);
            margin-top: var(--sp-md);
        }

        .promise-item {
            padding: var(--sp-sm);
            border-radius: var(--r-md);
            background: var(--bg-glass);
            border: 1px solid var(--border);
            font-size: var(--text-sm);
        }

        .onboarding-status {
            display: none;
            margin-bottom: var(--sp-lg);
        }

        .path-preview {
            margin-top: var(--sp-lg);
            padding: var(--sp-lg);
            border-radius: var(--r-lg);
            background: var(--bg-card);
            border: 1px solid var(--border);
            text-align: left;
        }

        .path-preview-list {
            display: flex;
            flex-direction: column;
            gap: var(--sp-sm);
            margin-top: var(--sp-md);
        }

        .path-preview-item {
            display: flex;
            gap: var(--sp-sm);
            align-items: flex-start;
            padding: var(--sp-sm) var(--sp-md);
            border-radius: var(--r-sm);
            background: var(--bg-glass);
            border: 1px solid var(--border);
            font-size: var(--text-sm);
        }

        .preview-number {
            width: 22px;
            height: 22px;
            border-radius: 999px;
            background: var(--accent-soft);
            color: var(--text-accent);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: var(--text-sm);
            font-weight: 700;
        }

        .instrument-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--sp-md);
            margin-top: var(--sp-lg);
        }

        .instrument-card {
            background: var(--bg-card);
            border: 2px solid var(--border);
            border-radius: var(--r-lg);
            padding: var(--sp-lg);
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: center;
        }

        .instrument-card:hover {
            border-color: var(--accent);
            transform: translateY(-2px);
        }

        .instrument-card.selected {
            border-color: var(--accent);
            background: var(--accent-soft);
        }

        .inst-icon {
            font-size: var(--text-5xl);
            margin-bottom: var(--sp-sm);
        }

        .inst-name {
            font-weight: 700;
            font-size: var(--text-lg);
            color: var(--text-primary);
            margin-bottom: 4px;
        }

        .inst-desc {
            font-size: var(--text-sm);
            color: var(--text-muted);
        }

        .settings-advanced {
            border: 1px solid var(--border);
            border-radius: var(--r-lg);
            background: var(--bg-card);
        }

        .settings-advanced summary {
            cursor: pointer;
            padding: var(--sp-md) var(--sp-lg);
            font-weight: 600;
            font-size: var(--text-base);
            color: var(--text-secondary);
            list-style-position: inside;
        }

        .settings-advanced[open] summary {
            border-bottom: 1px solid var(--border);
        }

        .settings-advanced > .card {
            margin-top: var(--sp-md);
        }

        .btn-danger-ghost {
            width: 100%;
            border-color: rgba(248, 113, 113, 0.35);
            color: var(--error-text);
        }

        .btn-danger-ghost-gap {
            margin-top: var(--sp-xs);
        }

        @media (max-width: 500px) {
            .instrument-grid {
                grid-template-columns: 1fr;
            }

            .promise-grid {
                grid-template-columns: 1fr;
            }
        }

        .option-grid-2 { grid-template-columns: 1fr 1fr; }