.ce-wrap { max-width: 920px; margin: 0 auto; }
    .ce-card {
        background: var(--bg-surface);
        border: 1px solid var(--rule-2);
        border-radius: var(--radius-3);
        padding: var(--space-8);
        box-shadow: var(--shadow-1);
    }
    .ce-step { padding-top: var(--space-8); margin-top: var(--space-8); border-top: 1px solid var(--rule-1); }
    .ce-step:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
    .ce-top-grid { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: var(--space-8); align-items: start; }
    .ce-top-grid .ce-step { padding-top: 0; margin-top: 0; border-top: 0; }
    .ce-block-title {
        font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600;
        text-transform: uppercase; letter-spacing: var(--tracking-wider);
        color: var(--amber-700); margin: 0 0 var(--space-4) 0;
        display: flex; align-items: center; gap: var(--space-2);
    }
    .ce-block-title .n {
        display: inline-flex; align-items: center; justify-content: center;
        width: 24px; height: 24px; border-radius: var(--radius-pill);
        background: var(--amber-50); color: var(--amber-700); border: 1px solid var(--amber-100);
        font-size: var(--text-sm); font-family: var(--font-serif); font-weight: 500;
    }
    .ce-card .mono { font-family: var(--font-mono); }

    /* Step 1: utility function mode toggle */
    .ce-modes { display: inline-flex; border: 1px solid var(--rule-3); border-radius: var(--radius-2); overflow: hidden; flex-wrap: wrap; }
    .ce-mode-btn {
        font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; color: var(--fg-2);
        background: var(--bg-surface); border: 0; padding: 8px 16px; cursor: pointer; transition: all var(--dur-fast) var(--ease-out);
    }
    .ce-mode-btn + .ce-mode-btn { border-left: 1px solid var(--rule-3); }
    .ce-mode-btn:not(.active):hover { background: var(--slate-50); color: var(--fg-1); }
    .ce-mode-btn.active { background: var(--navy-900); color: var(--fg-on-dark); box-shadow: inset 0 0 0 1px var(--navy-900); }
    .ce-mode-btn:disabled { opacity: .4; cursor: not-allowed; }
    .ce-fn-note {
        font-family: var(--font-sans); font-size: var(--text-xs); color: var(--fg-3);
        margin: var(--space-3) 0 0 0; line-height: var(--lh-relaxed); max-width: 60ch;
    }
    .ce-fn-note.warn { color: var(--danger); font-weight: 500; }

    /* Step 2: risk tolerance slider */
    .ce-slider-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); gap: var(--space-3); }
    .ce-slider-label { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: var(--fg-1); }
    .ce-slider-label .mono { font-family: var(--font-mono); color: var(--amber-700); }
    .ce-slider-val { font-family: var(--font-mono); color: var(--fg-1); font-weight: 600; font-size: var(--text-md); }
    #ceR { width: 100%; accent-color: var(--amber-500); cursor: pointer; }
    .ce-ruler { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); margin-top: 4px; padding: 0 2px; }
    .ce-slider-note { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--fg-3); margin: var(--space-2) 0 0 0; line-height: var(--lh-relaxed); }

    /* Step 3: gamble rows */
    .ce-gamble-heads, .ce-row { display: grid; grid-template-columns: 22px 1fr 1fr 32px; gap: var(--space-2); align-items: center; }
    .ce-gamble-heads { margin-bottom: var(--space-2); }
    .ce-gamble-heads span { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--fg-3); }
    .ce-rows { display: flex; flex-direction: column; gap: var(--space-2); }
    .ce-row-num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); text-align: right; }
    .ce-row input[type="number"] {
        width: 100%; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-1);
        background: var(--bg-page); border: 1px solid var(--rule-3); border-radius: var(--radius-1);
        padding: 9px 11px; min-width: 0; text-align: right; -moz-appearance: textfield;
    }
    .ce-row input[type="number"]:focus { outline: none; border-color: var(--navy-600); box-shadow: var(--shadow-focus); }
    .ce-x {
        flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid var(--rule-3);
        background: var(--bg-surface); color: var(--fg-3); border-radius: var(--radius-1);
        cursor: pointer; font-size: 17px; line-height: 1; transition: all var(--dur-fast) var(--ease-out);
    }
    .ce-x:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }
    .ce-x:disabled { opacity: .35; cursor: not-allowed; }
    .ce-gamble-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3); }
    .ce-mini { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; color: var(--navy-600); background: none; border: 0; cursor: pointer; padding: 4px 0; }
    .ce-mini:hover:not(:disabled) { color: var(--amber-600); }
    .ce-mini:disabled { opacity: .4; cursor: not-allowed; }
    .ce-psum { font-family: var(--font-sans); font-size: var(--text-sm); display: inline-flex; align-items: baseline; gap: var(--space-2); }
    .ce-psum .pv { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-md); }
    .ce-psum.ok { color: var(--success); }
    .ce-psum.off { color: var(--amber-700); }
    .ce-psum-note { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--amber-700); margin: var(--space-2) 0 0 0; line-height: var(--lh-relaxed); }

    /* Step 4: results */
    .ce-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
    .ce-metric {
        background: var(--bg-sunken); border: 1px solid var(--rule-1); border-radius: var(--radius-2);
        padding: var(--space-4) var(--space-4);
    }
    .ce-metric .lbl { font-family: var(--font-sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); display: block; }
    .ce-metric .lbl .full { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--fg-4); }
    .ce-metric .val { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 600; color: var(--navy-900); margin-top: 4px; word-break: break-word; }
    .ce-metric.accent { border-color: var(--amber-100); background: var(--amber-50); }
    .ce-metric.accent .val { color: var(--amber-700); }
    .ce-interp {
        margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius-2);
        font-family: var(--font-sans); font-size: var(--text-sm); display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
    }
    .ce-interp.averse { background: rgba(46,110,63,.08); border: 1px solid rgba(46,110,63,.3); color: var(--success); }
    .ce-interp.seeking { background: rgba(156,59,59,.08); border: 1px solid rgba(156,59,59,.3); color: var(--danger); }
    .ce-interp.neutral { background: var(--bg-sunken); border: 1px solid var(--rule-2); color: var(--fg-2); }
    .ce-interp .tag { font-family: var(--font-sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; border-radius: var(--radius-pill); padding: 1px 8px; flex: 0 0 auto; }
    .ce-interp.averse .tag { color: var(--success); background: rgba(46,110,63,.12); }
    .ce-interp.seeking .tag { color: var(--danger); background: rgba(156,59,59,.12); }
    .ce-interp.neutral .tag { color: var(--fg-2); background: var(--bg-page); }

    /* SVG utility curve */
    .ce-chart-wrap { margin-top: var(--space-6); overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #ceChart svg { display: block; width: 100%; height: auto; max-width: 100%; }
    .ce-svg-axis { stroke: var(--rule-3); stroke-width: 1; }
    .ce-svg-grid { stroke: var(--rule-1); stroke-width: 1; }
    .ce-svg-curve { fill: none; stroke: var(--navy-600); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
    .ce-svg-ev { stroke: var(--fg-3); stroke-width: 1.5; stroke-dasharray: 4 3; }
    .ce-svg-ce { stroke: var(--amber-600); stroke-width: 1.5; stroke-dasharray: 4 3; }
    .ce-svg-eu { stroke: var(--amber-500); stroke-width: 1.5; stroke-dasharray: 2 3; }
    .ce-svg-dot-ce { fill: var(--amber-500); stroke: var(--amber-700); stroke-width: 1; }
    .ce-svg-dot-ev { fill: var(--bg-surface); stroke: var(--fg-3); stroke-width: 1.5; }
    .ce-svg-lbl { font-family: var(--font-mono); font-size: 11px; fill: var(--fg-2); }
    .ce-svg-lbl.ev { fill: var(--fg-3); }
    .ce-svg-lbl.ce { fill: var(--amber-700); font-weight: 600; }
    .ce-svg-axislbl { font-family: var(--font-sans); font-size: 11px; fill: var(--fg-3); }

    .ce-actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
    .ce-actions .btn-secondary { font-size: var(--text-sm); }
    .ce-copied { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--success); align-self: center; }
    .ce-boundary {
        margin-top: var(--space-6); padding: var(--space-4) var(--space-5);
        background: var(--bg-sunken); border-left: 3px solid var(--amber-500);
        border-radius: 0 var(--radius-2) var(--radius-2) 0;
        font-family: var(--font-sans); font-size: var(--text-sm); color: var(--fg-2); line-height: var(--lh-relaxed);
    }
    .ce-boundary strong { color: var(--fg-1); }
    .ce-boundary a { color: var(--fg-link); }

    /* Step 5: behind the numbers (math transparency) */
    .ce-math-details { margin-top: var(--space-2); }
    .ce-math-details > summary { cursor: pointer; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: var(--navy-600); padding: var(--space-2) 0; list-style: none; }
    .ce-math-details > summary::-webkit-details-marker { display: none; }
    .ce-math-details > summary::before { content: "\25B8\00A0"; color: var(--amber-600); }
    .ce-math-details[open] > summary::before { content: "\25BE\00A0"; }
    .ce-math-details > summary:hover { color: var(--amber-600); }
    .ce-math { margin-top: var(--space-3); }
    .ce-calc-step { padding: var(--space-4) 0; border-top: 1px dashed var(--rule-2); }
    .ce-calc-step:first-child { border-top: 0; padding-top: 0; }
    .ce-calc-step h4 { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: var(--fg-1); margin: 0 0 var(--space-2) 0; }
    .ce-calc-note { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--fg-3); margin: 0 0 var(--space-3) 0; line-height: var(--lh-relaxed); }
    .ce-calc-formula { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--navy-900); background: var(--bg-sunken); border: 1px solid var(--rule-1); border-radius: var(--radius-1); padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-3) 0; display: inline-block; }
    .ce-calc-line { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-2); margin: var(--space-1) 0; line-height: var(--lh-relaxed); }
    .ce-calc-line b { color: var(--fg-1); }
    .ce-calc-ok { color: var(--success); font-family: var(--font-sans); font-weight: 600; }
    .ce-calc-bad { color: var(--danger); font-family: var(--font-sans); font-weight: 600; }
    .ce-calc-mat-wrap { overflow-x: auto; margin-bottom: var(--space-2); }
    table.ce-calc-mat { border-collapse: collapse; font-family: var(--font-mono); font-size: var(--text-xs); }
    table.ce-calc-mat th, table.ce-calc-mat td { border: 1px solid var(--rule-2); padding: 3px 8px; text-align: center; color: var(--fg-2); }
    table.ce-calc-mat thead th, table.ce-calc-mat tbody th { background: var(--bg-sunken); color: var(--fg-1); font-weight: 600; }

    @media (max-width: 880px) {
        .ce-card { padding: var(--space-5); }
        .ce-top-grid { grid-template-columns: 1fr; gap: var(--space-6); }
        .ce-results { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 460px) {
        .ce-results { grid-template-columns: 1fr; }
    }