.demo-heading {
    margin:0 0 24px
}
.demo-heading h1 {
    font-size:clamp(28px,4vw,40px);
    margin:8px 0
}
.demo-heading h1:focus {
    outline:none
}
.demo-heading p {
    color:var(--text-secondary,#555)
}
.demo-heading p:last-child {
    margin-bottom:0
}
.demo-main {
    min-width:0;
    max-width:none
}
.demo-toolbar {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px
}
.demo-subject-picker {
    display:grid;
    gap:7px;
    flex:0 1 460px;
    min-width:0
}
.demo-subject-label {
    color:var(--ink-soft);
    font-size:13px;
    font-weight:600
}
.demo-subject-control {
    position:relative;
    min-width:0
}
.demo-subject-control select {
    appearance:none;
    width:100%;
    min-height:56px;
    padding:14px 44px 14px 16px;
    border:1px solid #d9d3e7;
    border-radius:12px;
    background:var(--surface);
    color:var(--ink);
    font:inherit;
    font-weight:600;
    text-overflow:ellipsis;
    cursor:pointer
}
.demo-subject-control select:hover {
    border-color:#aaa1cd
}
.demo-subject-control select:focus-visible {
    outline:2px solid var(--primary);
    outline-offset:3px
}
.demo-subject-control svg {
    position:absolute;
    top:50%;
    right:16px;
    width:20px;
    height:20px;
    transform:translateY(-50%);
    fill:none;
    stroke:var(--ink-soft);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    pointer-events:none
}
.demo-mode a[aria-current] {
    background:#eee8ff;
    color:#5932b6;
    font-weight:700
}
.demo-mode {
    display:flex;
    gap:6px;
    padding:5px;
    border:1px solid #e4dfee;
    border-radius:14px;
    width:fit-content;
    flex-shrink:0;
    background:#fff
}
.demo-mode a {
    padding:10px 24px;
    border-radius:10px;
    text-decoration:none;
    color:inherit
}
.demo-intro {
    margin:20px 0;
    color:#555;
    line-height:1.6
}
.demo-main [data-demo-feedback]:not(:empty) {
    margin-top:20px
}
.demo-main [data-calculator-host]:empty {
    display:none
}
.demo-main button:disabled {
    opacity:.45;
    cursor:not-allowed
}
.demo-main h2:focus {
    outline:none
}
.demo-main h2:focus-visible {
    outline:2px solid #7546d8
}
.public-demo-page .page-shell {
    padding-top:28px
}
.public-demo-page .answer-input--choice-grid,
.public-demo-page .matching-input {
    max-width:none
}
@media(min-width:1021px) {
    .public-demo-page .choice-grid th:first-child {
        width:34%
    }
}
.public-demo-page [hidden] {
    display:none!important
}
@media(max-width:1020px) {
    .public-demo-page .demo-result-cta {
        grid-template-columns:minmax(0,1fr);
        gap:1.5rem
    }
}
@media(max-width:760px) {
    .demo-toolbar {
        flex-direction:column;
        align-items:stretch;
        gap:14px
    }
    .demo-subject-picker {
        flex-basis:auto
    }
    .demo-mode {
        width:100%
    }
    .demo-mode a {
        flex:1;
        text-align:center
    }
    .demo-heading h1 {
        font-size:28px
    }
}
.demo-mode [aria-disabled="true"] {
    padding: 10px 20px;
    color: #6a6472;
    font-size: 14px;
}