:root {
    font-family: 'DM Sans', sans-serif;
    color: #213c36;
    background: #f5f7f3;
    font-synthesis: none
}

* {
    box-sizing: border-box
}

body {
    margin: 0
}

button,
a {
    -webkit-tap-highlight-color: transparent
}

button {
    font: inherit;
    cursor: pointer
}

button:focus-visible,
a:focus-visible {
    outline: 3px solid #277969;
    outline-offset: 5px
}

.shell {
    max-width: 1440px;
    margin: auto;
    padding: 0 56px
}

header {
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #dce3da
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: Manrope, sans-serif;
    font-weight: 800;
    font-size: 25px;
    text-decoration: none;
    color: inherit;
    letter-spacing: -1px
}

.logo {
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #245d49;
    color: white;
    font-size: 32px;
    width: 43px;
    height: 43px
}

.demo {
    font-size: 10px;
    letter-spacing: 1px;
    background: #e5ece2;
    border: 1px solid #d2ddcf;
    border-radius: 5px;
    padding: 5px 7px;
    margin-left: 6px
}

.connection {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: #52665a
}

.connection i {
    width: 7px;
    height: 7px;
    background: #4b8467;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #e4ecdf
}

main {
    display: grid;
    grid-template-columns: 36% 64%;
    min-height: 740px;
    padding: 50px 0 44px
}

aside {
    padding: 14px 48px 0 0
}

.eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #687d70
}

h1 {
    font-family: Manrope, sans-serif;
    font-size: 43px;
    line-height: 1.27;
    letter-spacing: -1.8px;
    font-weight: 600;
    margin: 24px 0 19px
}

h1 span {
    color: #688366
}

aside>p {
    font-size: 14px;
    line-height: 1.9;
    color: #64756a
}

.workspace {
    background: #fff;
    border: 1px solid #e1e7de;
    border-radius: 23px;
    padding: 35px 36px;
    box-shadow: 0 12px 50px #20392005
}

.session-top {
    display: flex;
    justify-content: space-between;
    align-items: center
}

#step {
    font-size: 12px;
    color: #527360;
    background: #f1f5ee;
    padding: 7px 12px;
    border-radius: 20px
}

h2 {
    font-family: Manrope, sans-serif;
    font-size: 29px;
    font-weight: 600;
    letter-spacing: -1px;
    margin: 35px 0 10px
}

.subtitle {
    font-size: 13px;
    color: #708075;
    margin: 0 0 28px;
    line-height: 1.7
}

.cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.card {
    position: relative;
    text-align: left;
    border-radius: 16px;
    padding: 23px;
    min-height: 232px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform .16s, border-color .16s
}

.card:hover {
    transform: translateY(-3px);
    border-color: #668879
}

.card-a {
    background: #edf4e9;
    border: 1px solid #d4e1cc
}

.card-b {
    background: #edf3f3;
    border: 1px solid #d4e2e1
}

.key {
    font-size: 14px;
    font-weight: 700;
    width: 35px;
    height: 35px;
    border-radius: 9px;
    border: 1px solid #bdceba;
    background: #ffffff8a;
    display: grid;
    place-items: center;
    color: #365d44
}

.card-b .key {
    color: #3c6465;
    border-color: #bdcece
}

.card strong {
    font-family: Manrope, sans-serif;
    font-size: 25px;
    font-weight: 600;
    margin: 23px 0 7px;
    letter-spacing: -.6px;
    color: #233f34
}

.hint {
    font-size: 12px;
    color: #596e60;
    line-height: 1.6
}

.direction {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: #4c6c59;
    margin-top: auto;
    padding-top: 25px
}

.controls {
    display: flex;
    justify-content: space-between;
    padding: 20px 0 26px;
    border-bottom: 1px solid #edf0e9
}

.controls button {
    background: none;
    border: 0;
    color: #53685a;
    font-size: 12px;
    padding: 5px
}

.controls button:disabled {
    opacity: .45;
    cursor: default
}

kbd {
    font: inherit;
    background: #f0f3ed;
    border: 1px solid #e2e7dc;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px
}

.history {
    padding: 25px 0;
    min-height: 112px
}

ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 16px 0 0
}

ol li {
    font-size: 12px;
    background: #f0f4ed;
    border-radius: 6px;
    padding: 7px 10px
}

ol li:not(:last-child):not(.empty)::after {
    content: ' ›';
    margin-left: 9px;
    color: #778974
}

ol .empty {
    background: none;
    padding: 0;
    color: #879184;
    font-size: 12px
}

.help {
    display: flex;
    gap: 14px;
    border-radius: 12px;
    background: #f8f9f6;
    border: 1px solid #ebeee6;
    padding: 17px
}

.help-icon {
    font-size: 24px;
    color: #687e65
}

.help strong {
    font-size: 12px;
    font-weight: 500
}

.help p {
    font-size: 11px;
    color: #788476;
    margin: 6px 0 0;
    line-height: 1.6
}

footer {
    border-top: 1px solid #dce3da;
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #788574
}

blockquote {
    margin: 10px 0 24px;
    padding: 24px;
    border-left: 3px solid #6e9367;
    border-radius: 0 12px 12px 0;
    background: #f1f6ee;
    font-family: Manrope, sans-serif;
    font-size: 25px;
    line-height: 1.5
}

.aside-note span {
    font-size: 9px;
    letter-spacing: 2px;
    color: #81917b
}

.aside-note strong {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-top: 14px
}

.aside-note p {
    font-size: 12px;
    line-height: 1.8;
    color: #7b8875
}

.tree {
    height: 230px;
    width: 240px;
    position: relative;
    margin: 12px 0 23px;
    background: radial-gradient(ellipse, #e6ecdc 0, transparent 70%)
}

.twig {
    position: absolute;
    bottom: 35px;
    left: 116px;
    width: 2px;
    height: 145px;
    background: #a3b697;
    transform-origin: bottom
}

.one {
    transform: rotate(-35deg);
    height: 113px
}

.two {
    transform: rotate(37deg);
    height: 125px
}

.three {
    height: 167px
}

.leaf {
    position: absolute;
    width: 51px;
    height: 72px;
    border-radius: 70% 0 70% 0;
    background: #b8c8aa
}

.l1 {
    top: 26px;
    left: 104px;
    transform: rotate(-35deg);
    background: #94ad85
}

.l2 {
    top: 77px;
    left: 47px;
    transform: rotate(-76deg)
}

.l3 {
    top: 69px;
    left: 151px;
    transform: rotate(18deg);
    background: #abc1a3
}

.l4 {
    top: 123px;
    left: 122px;
    transform: rotate(35deg);
    width: 36px;
    height: 52px;
    background: #ced7b9
}

.seed {
    position: absolute;
    bottom: 25px;
    left: 109px;
    width: 17px;
    height: 17px;
    border: 4px solid #f5f7f3;
    border-radius: 50%;
    background: #708d65
}

@media(min-width:1200px) {
    .shell {
        padding: 0 80px
    }

    main {
        gap: 20px
    }
}

@media(max-width:900px) {
    .shell {
        padding: 0 25px
    }

    main {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 25px 0
    }

    aside {
        padding: 0 0 20px
    }

    h1 {
        font-size: 32px;
        margin: 12px 0
    }

    aside>p {
        margin: 0
    }

    .tree,
    .aside-note {
        display: none
    }

    header {
        height: 85px
    }

    .workspace {
        padding: 25px
    }

    footer {
        gap: 15px;
        line-height: 1.6
    }

    .connection {
        font-size: 11px
    }
}

@media(max-width:480px) {
    .shell {
        padding: 0 16px
    }

    .brand {
        font-size: 21px
    }

    .demo {
        display: none
    }

    .connection {
        font-size: 10px
    }

    .workspace {
        padding: 20px 16px
    }

    h2 {
        font-size: 24px
    }

    .cards {
        gap: 10px
    }

    .card {
        padding: 16px;
        min-height: 220px
    }

    .card strong {
        font-size: 20px
    }

    .controls button {
        font-size: 10px
    }

    footer {
        flex-direction: column
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        transition: none !important
    }
}

.session-settings {
    display: flex;
    align-items: center;
    gap: 10px
}

.session-settings select {
    font: inherit;
    font-size: 12px;
    padding: 7px 9px;
    border: 1px solid #d4e1cc;
    border-radius: 8px;
    color: #365d44;
    background: #fff
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.loading {
    min-height: 232px;
    display: grid;
    place-items: center;
    background: #f2f6ee;
    border: 1px dashed #b8c8aa;
    border-radius: 16px;
    color: #55745b;
    font-size: 14px
}

.error-message {
    background: #fff5e9;
    color: #74491e;
    padding: 18px;
    border-radius: 12px;
    line-height: 1.6;
    font-size: 14px
}

select:focus-visible {
    outline: 3px solid #277969;
    outline-offset: 3px
}

[hidden] {
    display: none !important
}

.local-panel {
    margin-top: 22px;
    padding: 20px;
    background: #f2f6ee;
    border: 1px solid #d4e1cc;
    border-radius: 14px
}

.local-panel>strong {
    display: block;
    margin-top: 12px;
    font-size: 17px
}

.local-panel p {
    font-size: 12px;
    line-height: 1.7;
    color: #52665a
}

.local-panel progress {
    width: 100%;
    height: 9px;
    accent-color: #427255
}

.local-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px
}

.local-actions button {
    border: 1px solid #bdceba;
    background: #fff;
    color: #365d44;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 12px
}

.local-actions button:disabled {
    opacity: .5;
    cursor: default
}

.card:disabled {
    opacity: .5;
    cursor: default;
    transform: none
}

@media(max-width:480px) {
    .session-top {
        align-items: flex-start;
        gap: 8px
    }

    .session-settings {
        gap: 5px;
        flex-wrap: wrap;
        justify-content: flex-end
    }

    .session-top>.eyebrow {
        padding-top: 8px
    }
}

.speech-panel {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid #dce5dd;
    border-radius: 16px;
    background: #f6f9f5
}

.speech-settings {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 14px 0
}

.speech-settings label {
    font-size: 14px
}

.speech-settings select {
    max-width: 100%;
    padding: 8px;
    border: 1px solid #cbd8cd;
    border-radius: 8px;
    background: white;
    color: #243a30
}

.speech-settings input {
    accent-color: #39765b
}

.speech-panel p {
    font-size: 13px;
    line-height: 1.5;
    color: #53695c
}
.workspace-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dce5dd;
}

.workspace-tabs button {
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 10px 18px;
    background: transparent;
    color: #53695c;
}

.workspace-tabs button[aria-selected="true"] {
    background: #edf4e9;
    border-color: #d4e1cc;
    color: #245d49;
    font-weight: 600;
}

#config-panel h2 {
    margin-top: 0;
}

#config-panel .local-actions {
    flex-wrap: wrap;
}

#config-panel input:not([type="checkbox"]),
#config-panel select {
    max-width: 100%;
    font: inherit;
}

.eeg-live {
    margin-top: 20px;
    padding: 12px 16px;
    border: 1px solid #d4e1cc;
    border-radius: 12px;
    background: #f6f9f5;
}
.eeg-live p { margin: 0; font-size: 13px; line-height: 1.6; }
.eeg-live .eeg-live-note { margin-top: 6px; font-size: 11px; color: #64756a; }
.eeg-live.eeg-selected { background: #e3f0dc; border-color: #427255; }
.eeg-meter { display: block; width: 100%; margin-top: 18px; }
.eeg-meter-caption { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: #53695c; }
.eeg-meter-value { font-variant-numeric: tabular-nums; }
.eeg-meter-track { display: block; position: relative; height: 8px; margin-top: 8px; border-radius: 4px; background: #fff; }
.eeg-meter-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: #688366; transition: width .25s ease-out; }
.card-b .eeg-meter-fill { background: #557f80; }
.eeg-meter-threshold { position: absolute; left: 80%; top: -3px; height: 14px; width: 2px; background: #213c36; }
.eeg-meter-note { display: block; margin-top: 6px; text-align: right; font-size: 10px; color: #53695c; }
.card.eeg-holding { border-color: #427255; box-shadow: inset 0 0 0 1px #427255; }
@media(prefers-reduced-motion:reduce) { .eeg-meter-fill { transition: none; } }

.connection-statuses {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px 20px;
    margin-left: 16px;
}
.connection.disconnected { color: #a33434; }
.connection.disconnected i {
    background: #b33b3b;
    box-shadow: 0 0 0 4px #f8e6e6;
}
@media(max-width:480px) {
    .connection-statuses { flex-direction: column; align-items: flex-end; gap: 10px; }
}