.gainable-page .gainable-toolbar #gainable-recenter {
    width: 36px;
    height: 36px;
    padding: 8px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 36px
}

@media(min-width: 861px) {
    .gainable-page .gainable-controls {
        padding:20px 12px;
        min-width: 0
    }

    .gainable-page .gainable-controls h2 {
        font-size: 20px;
        letter-spacing: 0
    }

    .gainable-page .gainable-controls .g-settings-grid {
        grid-template-columns: minmax(0,1fr)
    }

    .gainable-page .gainable-controls .g-branch-inputs {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 7px
    }

    .gainable-page .gainable-controls input,.gainable-page .gainable-controls select {
        min-width: 0;
        max-width: 100%
    }
}

.gainable-page {
    --g-ink: #183b4e;
    --g-muted: #647c88;
    --g-blue: var(--blue,#0b4f6c);
    --g-cyan: #009dbd;
    --g-border: #dae6eb;
    --g-orange: #e8954e;
    color: var(--g-ink);
    line-height: 1.55
}

.gainable-page * {
    box-sizing: border-box
}

.gainable-page button,.gainable-page input {
    font: inherit
}

.gainable-page button {
    cursor: pointer
}

.gainable-page button:disabled {
    cursor: wait;
    opacity: .45
}

.gainable-page [hidden] {
    display: none!important
}

.gainable-page :focus-visible {
    outline: 3px solid #069fbd;
    outline-offset: 4px
}

.gainable-section {
    padding: 40px 0 52px;
    background: linear-gradient(#f6fafb,#fff)
}

.gainable-container {
    width: min(1440px,calc(100% - 48px));
    margin: 0 auto
}

.gainable-heading {
    display: flex;
    gap: 32px;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 24px
}

.gainable-kicker {
    display: block;
    color: #006980;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.5
}

.gainable-heading h2 {
    margin: 7px 0 0;
    font-size: clamp(1.45rem,2.5vw,1.95rem);
    line-height: 1.2;
    letter-spacing: -.03em;
    color: var(--g-ink)
}

.gainable-heading p {
    margin: 0;
    max-width: 560px;
    color: var(--g-muted);
    font-size: 13px;
    line-height: 1.6
}

.gainable-heading p strong {
    font-weight: 600;
    color: #355768
}

.gainable-page .g-outlet-position { display: grid; gap: 6px; margin: 12px 0; font-size: 12px; font-weight: 600; }
.gainable-page .g-outlet-position select { width: 100%; min-width: 0; min-height: 40px; padding: 8px 28px 8px 10px; border: 1px solid #b8cdd6; border-radius: 5px; background: #fff; color: #254c5e; font: inherit; }
.gainable-page .g-outlet-position select:focus-visible { outline: 2px solid #078da8; outline-offset: 2px; }
.gainable-page .g-distributed-room { margin: 0; padding: 14px 0; min-width: 0; border: 0; border-top: 1px solid #decdb8; }
.gainable-page .g-distributed-room legend { padding: 0 8px 0 0; font-size: 13px; font-weight: 700; }
.gainable-page #g-distributed-returns .g-return-note { margin: 8px 0 14px; }

.gainable-demo {
    display: grid;
    grid-template-columns: minmax(0,1fr) 334px;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--g-border);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 50px #173e5510;
    isolation: isolate
}

.gainable-stage {
    position: relative;
    min-width: 0;
    min-height: 718px;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 35%,#fbfcfc,#eaf2f4)
}

.gainable-stage-top {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 23px 26px;
    pointer-events: none
}

.gainable-stage-caption {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--g-muted)
}

.gainable-status {
    font-size: 10px;
    white-space: nowrap;
    color: #597781;
    padding: 5px 9px;
    background: #ffffffaf;
    border: 1px solid #dce6e9;
    border-radius: 50px
}

.gainable-status[data-ready="true"]::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 5px;
    background: #20aa91;
    border-radius: 50%
}

.gainable-viewport {
    position: absolute;
    inset: 75px 0 133px;
    min-height: 250px
}

#gainable-canvas {
    position: absolute;
    inset: 0;
    outline-offset: -4px
}

#gainable-canvas canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none
}

.gainable-fallback {
    position: absolute;
    inset: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none
}

.gainable-fallback svg {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 540px
}

.gainable-demo.is-ready .gainable-fallback {
    display: none
}

.gainable-labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

.gainable-leaders {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.gainable-leader {
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    background: #47889999;
    transform-origin: 0 50%
}

.gainable-leader[data-kind="return-grille"] {
    background: #aa7f4799
}

.gainable-leader::after {
    content: "";
    position: absolute;
    right: -2px;
    top: -2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: inherit
}

.gainable-label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px 9px;
    border-radius: 7px;
    background: #fffffff0;
    border: 1px solid #c9dce4;
    box-shadow: 0 4px 12px #173f4f12;
    white-space: nowrap;
    text-align: center;
    font: 600 11px/1.25 Arial,sans-serif;
    color: #254d60;
    will-change: transform
}

.gainable-label small {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: #0b88a3;
    margin-top: 2px
}

.gainable-label[data-kind="return"] {
    border-color: #dfc8b2;
    color: #8a623e
}

.gainable-label[data-kind="equipment"] {
    border-color: #83a0ad;
    background: #173e50;
    color: #fff
}

.gainable-label[data-kind="supply"] {
    border-color: #8acdda;
    color: #087c96
}

.gainable-stage-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4;
    padding: 14px 16px 16px;
    background: linear-gradient(#eaf2f400,#edf4f6 24%)
}

.gainable-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0 0 12px;
    font-size: 10px;
    color: #466671
}

.gainable-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.gainable-legend i {
    display: inline-block;
    width: 16px;
    height: 3px;
    border-radius: 3px;
    background: var(--g-cyan)
}

.gainable-legend .legend-return i {
    background: var(--g-orange)
}

.gainable-toolbar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap
}

.gainable-toolbar button {
    border: 1px solid #d5e2e7;
    border-radius: 99px;
    padding: 9px 13px;
    background: #ffffffd9;
    color: #486979;
    font-weight: 600;
    font-size: 11px;
    line-height: 1.25;
    transition: background .16s
}

.gainable-toolbar button[aria-pressed="true"] {
    background: #0b506a;
    border-color: #0b506a;
    color: #fff
}

.gainable-toolbar button:not(:disabled):hover {
    background: #d7edf1;
    color: #164c60
}

.gainable-3d-prompt {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 9px 8px 0
}

.gainable-3d-prompt button {
    border: 1px solid #0b506a;
    border-radius: 99px;
    padding: 10px 16px;
    background: #0b506a;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.25;
    cursor: pointer
}

.gainable-3d-prompt button:hover {
    background: #12658a;
    border-color: #12658a
}

.gainable-3d-prompt span {
    font-size: 11px;
    color: #5b7683;
    line-height: 1.4
}

.gainable-load-error {
    margin: 7px 8px 0;
    font-size: 11px;
    color: #855736;
    text-align: center;
    line-height: 1.4
}

.gainable-controls {
    border-left: 1px solid var(--g-border);
    padding: 23px 22px;
    background: linear-gradient(180deg,#fff,#f9fcfd)
}

.gainable-controls h2 {
    margin: 5px 0 6px;
    font-size: 22px;
    letter-spacing: -.035em;
    line-height: 1.2;
    color: var(--g-ink)
}

.gainable-controls>p {
    margin: 0 0 16px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--g-muted)
}

.gainable-page .air-total {
    padding: 16px 16px 12px;
    margin: 0 0 22px;
    border-radius: 22px;
    background: linear-gradient(115deg,#0a3549,#0b526b);
    color: #fff;
    box-shadow: 0 8px 18px #163b5110;
    display: block
}

.air-total-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.air-total-heading label {
    color: #d1e8ef;
    font-size: 11px;
    line-height: 1.2;
    max-width: 92px
}

.air-total-heading output {
    font-size: 23px;
    font-weight: 750;
    letter-spacing: -.04em;
    line-height: 1.3;
    white-space: nowrap;
    color: #fff
}

.air-total-range {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: #a8cbd7;
    line-height: 1.2
}

.gainable-page input[type="range"] {
    display: block;
    width: 100%;
    height: 22px;
    margin: 4px 0;
    accent-color: #009fbf;
    cursor: pointer;
    touch-action: pan-y
}

.gainable-page #air-total-slider {
    margin: 10px 0 3px;
    accent-color: #49d4e7
}

.damper-list {
    display: grid;
    gap: 9px
}

.gainable-page .damper-control {
    display: block;
    min-width: 0;
    padding: 11px 12px 8px;
    background: #fff;
    border: 1px solid #dae6ec;
    border-radius: 11px;
    box-shadow: 0 3px 10px #183b4e04
}

.damper-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    line-height: 1.1
}

.damper-heading label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 650;
    color: var(--g-ink)
}

.gainable-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border: 1px solid #dcebee;
    border-radius: 5px;
    color: #176579;
    background: #eff8fa;
    font-size: 9px;
    line-height: 1
}

.damper-heading output {
    color: #006980;
    font-weight: 700;
    font-size: 11px
}

.damper-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 9px;
    color: #536b78;
    line-height: 1.2
}

.damper-meta strong {
    font-size: 12px;
    color: #326074;
    font-weight: 700
}

.gainable-page .damper-control.is-closed {
    background: #f6f8f9
}

.gainable-page .damper-control.is-closed output {
    color: #84949d
}

.gainable-delivered {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    margin: 15px 0 13px;
    color: var(--g-muted)
}

.gainable-delivered strong {
    color: var(--g-blue);
    font-size: 12px
}

.gainable-page .gainable-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: 1px solid #aacbd8;
    border-radius: 7px;
    padding: 11px 8px;
    background: #fff;
    color: #0b526d;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0
}

.gainable-reset:hover {
    background: #eaf6f8
}

.gainable-controls .gainable-model-note {
    margin: 13px 0 0;
    padding-top: 12px;
    border-top: 1px solid #e1eaf0;
    font-size: 10px;
    line-height: 1.5;
    color: #7b909c
}

.gainable-model-note strong {
    color: #4f707e;
    font-weight: 600
}

.gainable-controls .gainable-warning {
    padding: 10px 12px;
    margin: 10px 0;
    background: #fff0da;
    border: 1px solid #ecd0a4;
    border-radius: 8px;
    color: #85511b;
    font-size: 11px
}

.gainable-explain {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 22px;
    margin-top: 28px
}

.gainable-explain article {
    padding: 4px 10px 4px 18px;
    border-left: 2px solid #cae0e6
}

.gainable-explain article>span {
    color: #72909b;
    font-size: 9px;
    letter-spacing: .11em;
    font-weight: 700
}

.gainable-explain h3 {
    font-size: 16px;
    color: var(--g-ink);
    line-height: 1.3;
    margin: 8px 0
}

.gainable-explain p {
    font-size: 12px;
    color: var(--g-muted);
    line-height: 1.6;
    margin: 0
}

@media(min-width: 1500px) {
    .gainable-stage {
        min-height:750px
    }
}

@media(max-width: 1100px) {
    .gainable-demo {
        grid-template-columns:minmax(0,1fr) 308px
    }

    .gainable-controls {
        padding: 21px 18px
    }

    .gainable-heading p {
        max-width: 390px
    }

    .gainable-stage-top {
        padding: 22px 20px
    }

    .gainable-toolbar button {
        padding: 9px 10px;
        font-size: 10px
    }
}

@media(max-width: 860px) {
    .gainable-container {
        width:calc(100% - 32px)
    }

    .gainable-heading {
        align-items: start;
        flex-direction: column;
        gap: 12px
    }

    .gainable-heading p {
        max-width: 630px
    }

    .gainable-demo {
        grid-template-columns: 1fr
    }

    .gainable-stage {
        min-height: 590px
    }

    .gainable-controls {
        border-left: 0;
        border-top: 1px solid var(--g-border);
        padding: 26px
    }

    .damper-list {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 12px
    }

    .gainable-page .air-total {
        margin: 0 0 18px
    }

    .air-total-heading label {
        max-width: none;
        font-size: 12px
    }

    .gainable-controls .gainable-reset {
        max-width: 350px;
        margin: 0 auto
    }

    .gainable-explain {
        gap: 15px
    }
}

@media(max-width: 540px) {
    .gainable-container {
        width: calc(100% - 22px)
    }

    .gainable-section {
        padding: 28px 0
    }

    .gainable-demo {
        border-radius: 16px
    }

    .gainable-stage {
        min-height: 480px
    }

    .gainable-stage-top {
        padding: 17px 14px
    }

    .gainable-stage-caption {
        font-size: 10px
    }

    .gainable-stage-top .gainable-kicker {
        font-size: 9px
    }

    .gainable-status {
        font-size: 9px;
        padding: 4px 7px
    }

    .gainable-viewport {
        inset: 62px 0 145px
    }

    .gainable-legend {
        gap: 6px 12px;
        font-size: 9px;
        margin-bottom: 10px
    }

    .gainable-toolbar {
        gap: 5px
    }

    .gainable-toolbar button {
        padding: 10px 9px;
        min-height: 36px;
        font-size: 10px
    }

    .gainable-stage-bottom {
        padding: 10px 8px 12px
    }

    .gainable-controls {
        padding: 22px 17px
    }

    .damper-list {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .gainable-page input[type="range"] {
        height: 28px;
        margin: 6px 0
    }

    .gainable-page .damper-control {
        padding: 12px 13px 10px
    }

    .damper-heading label {
        font-size: 14px
    }

    .damper-heading output {
        font-size: 12px
    }

    .damper-meta {
        font-size: 10px
    }

    .damper-meta strong {
        font-size: 13px
    }

    .air-total-heading output {
        font-size: 26px
    }

    .gainable-page .gainable-reset {
        min-height: 44px;
        max-width: none
    }

    .gainable-explain {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 25px
    }

    .gainable-label {
        font-size: 9px;
        padding: 4px 6px
    }

    .gainable-label small {
        font-size: 9px
    }

    .gainable-label[data-kind="equipment"],.gainable-label[data-kind="supply"],.gainable-label[data-kind="return"] {
        font-size: 9px
    }

    .gainable-heading {
        gap: 10px;
        margin-bottom: 19px
    }

    .gainable-heading p {
        font-size: 12px
    }
}

@media(prefers-reduced-motion:reduce) {
    .gainable-page * {
        scroll-behavior: auto!important;
        transition: none!important
    }
}

                                                                          
.gainable-page input[type="range"]:focus-visible {
    outline: 2px solid #62c5d8;
    outline-offset: 1px;
    border-radius: 99px
}

.gainable-demo.has-load-error .gainable-viewport {
    bottom: 163px
}

@media(max-width: 540px) {
    .gainable-demo.has-load-error .gainable-viewport {
        bottom:193px
    }
}

                                                        
.gainable-page select {
    font: inherit;
    color: var(--g-ink);
    max-width: 100%
}

.gainable-page select,.gainable-page input[type="number"] {
    min-width: 0;
    width: 100%;
    border: 1px solid #c6dbe3;
    background: #fff;
    border-radius: 7px;
    padding: 7px 8px;
    font-size: 12px;
    line-height: 1.3;
    min-height: 34px
}

.gainable-page input:disabled {
    background: #eef3f5;
    color: #7c929c
}

.g-branch-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 10px 0 5px
}

.g-branch-inputs label,.g-settings-grid label {
    display: grid;
    gap: 4px;
    color: #56727f;
    font-size: 10px;
    font-weight: 600
}

.g-branch-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    margin: 10px 0 0;
    padding: 9px 0 0;
    border-top: 1px solid #edf2f4
}

.g-branch-metrics div {
    min-width: 0
}

.g-branch-metrics dt {
    font-size: 9px;
    line-height: 1.3;
    color: #526d7a
}

.g-branch-metrics dd {
    font-size: 12px;
    font-weight: 700;
    color: #234b60;
    margin: 3px 0 0;
    white-space: nowrap
}

.g-bend-setting {
    margin-top: 9px;
    border-top: 1px dashed #e0e9ed;
    padding-top: 6px;
    font-size: 10px;
    color: #526d7a
}

.g-bend-setting summary,.g-coefficients summary,.g-loss-details summary {
    cursor: pointer;
    font-weight: 600
}

.g-bend-setting label {
    display: grid;
    grid-template-columns: 1fr 65px;
    gap: 8px;
    align-items: center;
    margin-top: 8px
}

.g-bend-setting small {
    display: block;
    line-height: 1.45;
    margin-top: 6px;
    font-size: 10px
}

.g-pressure-summary {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 5px 12px;
    margin: 14px 0 0;
    padding: 13px;
    border: 1px solid #cfe1e8;
    border-radius: 10px;
    background: #edf7f9
}

.g-pressure-summary>span {
    color: #375f70;
    font-size: 11px;
    line-height: 1.4
}

.g-pressure-summary strong {
    font-size: 20px;
    letter-spacing: -.025em;
    white-space: nowrap;
    align-self: center
}

.g-pressure-summary small {
    grid-column: 1/-1;
    font-size: 10px;
    color: #4f6875
}

.g-analysis {
    margin-top: 40px
}

.g-analysis-grid {
    display: grid;
    grid-template-columns: minmax(0,1.3fr) minmax(300px,.85fr);
    gap: 22px;
    align-items: start
}

.g-chart-card,.g-method-card {
    min-width: 0;
    background: #fff;
    border: 1px solid var(--g-border);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 8px 28px #173e5507
}

.g-analysis h3 {
    margin: 0 0 14px;
    font-size: 19px;
    letter-spacing: -.025em;
    line-height: 1.25;
    color: var(--g-ink)
}

.g-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px
}

.g-chart-head h3 {
    margin: 0;
    max-width: 230px
}

.g-chart-head label {
    display: grid;
    gap: 4px;
    font-size: 10px;
    color: #5d7b87
}

.g-chart-head select {
    min-width: 120px
}

.g-chart-switch {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px
}

.g-chart-switch label {
    display: grid;
    gap: 4px;
    color: #5d7b87;
    font-size: 10px
}

.g-chart-legend {
    display: flex;
    gap: 14px;
    font-size: 11px;
    white-space: nowrap
}

.g-chart-legend span::before {
    content: "";
    display: inline-block;
    height: 3px;
    width: 18px;
    margin-right: 5px;
    vertical-align: middle;
    background: #0088a6
}

.g-chart-legend .g-series-200::before {
    background: #9662b4
}

#g-loss-chart {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    background: #f9fcfd;
    border-radius: 10px;
    border: 1px solid #edf3f5
}

.g-analysis .g-caption {
    font-size: 11px;
    color: #526d7a;
    line-height: 1.6;
    margin: 10px 0
}

.g-caption strong {
    color: #3d6072
}

.g-compare-title {
    padding-top: 12px;
    border-top: 1px solid #e2edf1;
    margin: 16px 0 8px;
    font-size: 12px;
    color: #486c7d
}

.g-compare-title strong {
    color: #0b627c
}

.g-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.g-analysis table {
    width: 100%;
    border-collapse: collapse;
    text-align: right;
    font-size: 11px;
    font-variant-numeric: tabular-nums
}

.g-analysis table th:first-child,.g-analysis table td:first-child {
    text-align: left
}

.g-analysis th {
    padding: 10px 9px;
    background: #edf5f8;
    color: #466777;
    font-weight: 600;
    white-space: nowrap
}

.g-analysis td {
    padding: 10px 9px;
    border-bottom: 1px solid #e7eff2;
    white-space: nowrap
}

.g-analysis tr.is-current td {
    background: #f0fbfc;
    color: #006980;
    font-weight: 600
}

.g-analysis tr:last-child td {
    border-bottom: 0
}

.g-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 16px 0 10px
}

.g-settings-grid label:first-child {
    grid-column: 1/-1
}

.g-coefficients .g-settings-grid label:first-child {
    grid-column: auto
}

.g-coefficients {
    margin-top: 15px;
    padding: 13px;
    border: 1px solid #d8e5eb;
    border-radius: 10px;
    font-size: 12px;
    color: #416778;
    background: #f8fbfc
}

.g-coefficients input {
    background: #fff
}

.g-formulas {
    background: #f0f6f8;
    padding: 13px;
    border-radius: 10px;
    margin: 15px 0
}

.g-formulas p {
    font-size: 12px;
    margin: 5px 0
}

.g-formulas small {
    display: block;
    font-size: 10px;
    color: #526d7a;
    line-height: 1.6;
    margin-top: 10px
}

.g-loss-details {
    padding: 17px 20px;
    background: #fff;
    border: 1px solid #dce8ed;
    border-radius: 12px;
    margin-top: 17px;
    font-size: 12px;
    color: #426678
}

.g-loss-details>p {
    font-size: 11px;
    line-height: 1.65
}

.g-loss-details a {
    text-decoration: underline;
    text-underline-offset: 3px
}

.g-loss-table {
    min-width: 940px
}

@media(min-width: 861px) {
    .gainable-demo {
        align-items:start;
        overflow: visible;
        grid-template-columns: minmax(0,1fr) 256px;
        background: #eef4f6
    }

    .gainable-stage {
        position: sticky;
        top: 76px;
        min-height: 0;
        height: calc(100vh - 88px);
        height: calc(100dvh - 88px);
        max-height: 1100px;
        border-radius: 22px 0 0 22px
    }

    .gainable-controls {
        border-radius: 0 22px 22px 0
    }

    .gainable-viewport {
        inset: 70px 0 115px;
        min-height: 0
    }
}

@media(min-width: 861px) and (max-width:1100px) {
    .gainable-demo {
        grid-template-columns:minmax(0,1fr) 240px
    }

    .gainable-controls {
        padding: 22px 17px
    }

    .gainable-stage-top {
        padding: 20px 14px
    }

    .gainable-stage-caption {
        font-size: 10px
    }
}

@media(max-width: 860px) {
    .g-analysis-grid {
        grid-template-columns:1fr
    }

    .gainable-stage {
        height: 590px
    }

    .g-chart-card,.g-method-card {
        padding: 22px
    }

    .g-analysis {
        margin-top: 28px
    }
}

@media(max-width: 540px) {
    .gainable-stage {
        height:480px
    }

    .g-chart-card,.g-method-card {
        padding: 17px;
        border-radius: 13px
    }

    .g-chart-head {
        gap: 10px
    }

    .g-chart-head h3 {
        font-size: 17px
    }

    .g-chart-head select {
        min-width: 105px
    }

    .g-chart-switch {
        align-items: start;
        flex-direction: column;
        gap: 10px
    }

    .g-chart-switch label {
        width: 100%
    }

    .g-analysis-grid {
        gap: 14px
    }

    .g-analysis th,.g-analysis td {
        padding: 9px 7px;
        font-size: 10px
    }

    .g-branch-inputs select,.g-branch-inputs input[type="number"] {
        min-height: 40px;
        font-size: 14px
    }

    .g-branch-metrics dt {
        font-size: 10px
    }

    .g-branch-metrics dd {
        font-size: 13px
    }

    .g-pressure-summary strong {
        font-size: 22px
    }
}

@media(max-width: 360px) {
    .g-branch-metrics dd {
        font-size:11px
    }

    .g-chart-head {
        flex-direction: column;
        align-items: start
    }

    .g-chart-head label {
        width: 100%
    }
}

                                          
.g-room-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 11px;
    color: #6a8290
}

.g-room-actions button {
    padding: 7px 10px;
    border-radius: 8px;
    background: #eef7f9;
    border: 1px solid #d2e5ec;
    color: #15647b;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3
}

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

.gainable-page .g-remove-room {
    display: block;
    margin: 8px 0 0 auto;
    padding: 5px 9px;
    color: #526d7a;
    background: transparent;
    border: 1px solid #e0eaee;
    border-radius: 6px;
    font-size: 10px;
    line-height: 1.2
}

.gainable-page .g-remove-room:hover {
    color: #974b48;
    border-color: #dbb8b3
}

@media(max-width: 540px) {
    .gainable-page .g-remove-room {
        min-height:36px;
        padding: 8px 12px
    }

    .g-room-actions button {
        min-height: 40px
    }

    .g-room-actions {
        font-size: 12px
    }
}

                                                                  
.g-fan-settings { margin: 0 0 18px; padding: 0 0 14px; border-bottom: 1px solid var(--g-border); }
.g-fan-settings h3 { margin: 0 0 10px; font-size: 15px; color: var(--g-ink); }
.g-fan-settings .g-settings-grid { grid-template-columns: minmax(0,1fr); }
.g-fan-settings .gainable-delivered { align-items: baseline; margin: 12px 0 6px; }
.g-fan-settings p { margin: 6px 0 0; font-size: 10px; line-height: 1.45; color: var(--g-muted); }
.g-fan-settings #g-fan-status { color: #875b31; }

                                  
.gainable-page .g-bypass {
    margin: 0 0 14px;
    padding: 15px 14px;
    border: 1px solid #d7cde1;
    border-radius: 13px;
    background: linear-gradient(160deg,#fff,#f8f5fb)
}

.g-bypass-heading {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between
}

.g-bypass-heading h3 {
    font-size: 15px;
    line-height: 1.25;
    margin: 0;
    color: #67467f;
    letter-spacing: -.02em
}

.g-bypass-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #775b8c;
    white-space: nowrap;
    cursor: pointer
}

.g-bypass-toggle input {
    accent-color: #9662b4;
    min-width: 16px;
    min-height: 16px;
    margin: 0
}

.g-bypass-intro,.g-bypass-note {
    font-size: 10px;
    line-height: 1.5;
    color: #7d7189;
    margin: 7px 0
}

.g-bypass-topline {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0
}

.g-bypass-topline strong {
    font-size: 22px;
    letter-spacing: -.035em;
    color: #734692;
    white-space: nowrap
}

.g-bypass-state {
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 6px;
    text-align: center;
    background: #eee6f4;
    color: #71458a;
    border: 1px solid #e3d7ed
}

.g-bypass-state[data-open="true"] {
    color: #6f338e;
    background: #e9d7f5;
    border-color: #cfaade
}

.g-bypass-threshold {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    font-size: 11px;
    color: #695476
}

.g-bypass-threshold label {
    max-width: 170px;
    line-height: 1.4
}

.g-bypass-threshold output {
    font-weight: 700;
    white-space: nowrap
}

.g-bypass input[type="range"] {
    accent-color: #9662b4
}

.g-bypass .g-branch-metrics {
    border-color: #e5dcec
}

.g-bypass .g-branch-metrics dd {
    color: #734692
}

.g-bypass-advanced {
    font-size: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e5dcec;
    color: #786487
}

.g-bypass-advanced summary {
    cursor: pointer;
    font-weight: 600;
    min-height: 22px
}

.g-bypass-readings {
    margin: 12px 0
}

.g-bypass-readings div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 6px 0;
    line-height: 1.35
}

.g-bypass-readings dd {
    margin: 0;
    color: #63427e;
    font-weight: 600;
    white-space: nowrap
}

.g-bypass .g-settings-grid {
    gap: 10px;
    margin: 14px 0
}

.g-bypass .g-settings-grid label {
    font-size: 10px
}

.g-flow-balance {
    padding: 0 2px;
    margin: 0 0 16px
}

.g-flow-balance-bar {
    height: 9px;
    display: flex;
    overflow: hidden;
    border-radius: 2px;
    background: #d9e7ec
}

.g-flow-balance-bar span {
    height: 100%;
    transition: width .2s
}

#g-share-rooms {
    background: #08a7c9;
    width: 100%
}

#g-share-bypass {
    background: #9662b4;
    width: 0
}

.g-flow-balance p {
    font-size: 10px;
    line-height: 1.5;
    color: #6f8793;
    margin: 6px 0 0;
    font-variant-numeric: tabular-nums
}

.gainable-legend .legend-bypass i {
    background: #9662b4
}

.gainable-label[data-kind="bypass"] {
    border-color: #c9abd9;
    color: #734692;
    background: #fbf6feee
}

.g-bypass-method {
    margin-top: 22px
}

.g-bypass-method p {
    font-size: 11px
}

@media(max-width: 540px) {
    .gainable-page .g-bypass {
        padding:15px
    }

    .g-bypass-heading h3 {
        font-size: 16px
    }

    .g-bypass-toggle {
        font-size: 12px
    }

    .g-bypass-intro,.g-bypass-note,.g-flow-balance p {
        font-size: 11px
    }

    .g-bypass-threshold {
        font-size: 12px
    }

    .g-bypass-advanced {
        font-size: 11px
    }

    .g-bypass-advanced summary {
        min-height: 32px
    }

    .g-bypass .g-settings-grid input,.g-bypass .g-branch-inputs input,.g-bypass select {
        min-height: 40px
    }

    .g-bypass-threshold label {
        max-width: 165px
    }
}

                                                      
                                                                        
   
.gainable-room-controls-plan {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden
}

.gainable-demo.is-ready .gainable-room-controls-plan {
    display: none
}

.gainable-demo:not(.is-ready) #gainable-labels {
    display: none
}

.gainable-demo.has-room-toggles .gainable-fallback [data-plan-label] {
    opacity: 0
}

.gainable-label.g-room-control.is-network-highlighted {
    border-color: #009bb8;
    background: #e7faff;
}

.gainable-controls .is-network-highlighted {
    outline: 2px solid #009bb8;
    outline-offset: 2px;
}

.gainable-label.g-room-control {
    width: 114px;
    box-sizing: border-box;
    padding: 6px;
    z-index: 2;
    pointer-events: auto;
    white-space: normal;
    border-radius: 9px;
    border-color: #b5d9d4;
    background: #fffffff2
}

.g-room-control>span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25
}

.gainable-label.g-room-control small {
    font-size: 10px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #487486
}

.gainable-page .g-room-toggle {
    box-sizing: border-box;
    width: 100%;
    min-height: 32px;
    margin: 5px 0 0;
    padding: 5px 7px;
    border: 1px solid #c2e0d8;
    border-radius: 6px;
    background: #e9f7f1;
    color: #156549;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font: 700 11px/1.1 Arial,sans-serif;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    user-select: none
}

.g-room-control[data-open="false"] {
    border-color: #d9c7c3;
    background: #fcf9f8f5
}

.gainable-page .g-room-toggle:hover {
    filter: brightness(.96)
}

.gainable-page .g-room-toggle:focus-visible {
    outline: 3px solid #0897ba;
    outline-offset: 2px
}

.g-room-control:focus-within {
    z-index: 8
}

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

@media(max-width: 540px) {
    .gainable-label.g-room-control {
        width:88px;
        padding: 5px;
        font-size: 10px
    }

    .gainable-label.g-room-control small {
        font-size: 8.5px
    }

    .gainable-page .g-room-toggle {
        min-height: 36px;
        margin-top: 4px;
        font-size: 11px;
        gap: 5px;
        padding: 5px 4px
    }
}

                                                                           
.g-room-control>.g-room-name-short {
    display: none
}

@media(max-width: 540px) {
    .gainable-demo.has-room-toggles .gainable-stage {
        min-height:590px
    }

    .gainable-demo.has-room-toggles.has-load-error .gainable-viewport {
        bottom: 217px
    }

    .gainable-label.g-room-control {
        width: 72px;
        padding: 4px
    }

    .gainable-label.g-room-control>.g-room-name-long,.gainable-label.g-room-control>small {
        display: none
    }

    .gainable-label.g-room-control>.g-room-name-short {
        display: block;
        font-size: 10px
    }

    .gainable-page .g-room-toggle {
        min-height: 34px;
        margin-top: 3px;
        font-size: 10px;
        padding: 4px 3px;
        gap: 5px
    }

    .gainable-demo[data-bedrooms="5"] .g-room-control {
        width: 58px
    }

}

@media(max-width: 380px) {
    .gainable-label.g-room-control {
        width:65px
    }

    .gainable-demo[data-bedrooms="5"] .g-room-control {
        width: 48px
    }

    .gainable-page .g-room-toggle {
        font-size: 9px;
        gap: 4px
    }
}

                                                           
.gainable-page .g-return-panel {
    border: 1px solid #e6d4bc;
    border-radius: 13px;
    background: linear-gradient(160deg,#fff,#fffaf4);
    margin: 0 0 18px;
    padding: 15px 14px;
    color: #70583d
}

.g-return-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px
}

.g-return-heading h3 {
    margin: 0;
    font-size: 16px;
    color: #875b31;
    letter-spacing: -.02em
}

.g-return-heading>span {
    font-size: 9px;
    text-align: right;
    color: #92795d
}

.g-return-toggle {
    display: flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
    font-size: 11px;
    line-height: 1.4;
    padding: 9px 0
}

.g-return-toggle input {
    accent-color: #bb7a3b;
    margin: 0;
    min-width: 17px;
    min-height: 17px
}

.gainable-page .g-return-card {
    margin: 10px 0 0;
    padding: 12px 10px;
    border: 1px solid #e8ddcf;
    border-radius: 10px;
    min-width: 0;
    background: #ffffffb8
}

.gainable-page .g-return-card[hidden] {
    display: none
}

.g-return-card legend {
    font-size: 12px;
    font-weight: 700;
    color: #875b31;
    padding: 0 5px
}

.g-return-values {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 10px;
    padding: 2px 0 4px
}

.g-return-values>div {
    min-width: 0;
    display: flex;
    flex-direction: column
}

.g-return-values span {
    display: block;
    flex: 1;
    font-size: 9px;
    line-height: 1.35;
    color: #8a755c
}

.g-return-values strong {
    display: block;
    margin-top: 4px;
    color: #875b31;
    font-size: 17px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

.g-return-card .g-branch-inputs {
    gap: 7px;
    margin-top: 12px
}

.g-return-card .g-branch-inputs label {
    color: #8a755c
}

.g-return-losses {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    font-size: 9px;
    line-height: 1.4;
    padding-top: 9px;
    border-top: 1px solid #f0e8de
}

.g-return-losses b {
    display: block;
    color: #775636;
    font-size: 11px;
    white-space: nowrap
}

.g-return-details {
    margin-top: 9px;
    font-size: 10px;
    color: #8a755c
}

.g-return-details summary {
    cursor: pointer;
    line-height: 1.4;
    min-height: 22px
}

.g-return-details p {
    font-size: 10px;
    line-height: 1.5
}

.g-return-details .g-settings-grid {
    margin-top: 10px;
    gap: 8px
}

.g-return-summary {
    margin: 14px 0 0;
    border-top: 1px solid #e8dccb;
    padding-top: 7px
}

.g-return-summary>div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
    line-height: 1.4;
    margin: 6px 0
}

.g-return-summary dd {
    margin: 0;
    font-weight: 700;
    white-space: nowrap;
    color: #875b31
}

.g-return-note {
    font-size: 10px;
    line-height: 1.55;
    color: #8d775c;
    margin: 9px 0 0
}

.g-return-note strong {
    font-weight: 650
}

.gainable-label[data-kind="return-grille"] {
    border-color: #ddb689;
    background: #fffaf1f5;
    color: #845a2b;
    padding: 6px 7px;
    font-size: 10px;
    z-index: 1;
    min-width: 95px;
    text-align: center
}

.gainable-label[data-kind="return-grille"] small {
    color: #8b693e;
    font-size: 10px;
    line-height: 1.45;
    white-space: pre-line
}

@media(max-width: 540px) {
    .gainable-page .g-return-panel {
        padding:14px
    }

    .g-return-toggle {
        font-size: 12px;
        min-height: 42px
    }

    .g-return-card input,.g-return-card select {
        min-height: 40px
    }

    .g-return-details summary {
        min-height: 34px
    }

    .g-return-note {
        font-size: 11px
    }

    .gainable-label[data-kind="return-grille"] {
        min-width: 72px;
        font-size: 9px;
        padding: 4px
    }

    .gainable-label[data-kind="return-grille"] small {
        font-size: 8.5px
    }
}

                                                                    
.gainable-page {
    background: radial-gradient(circle at 12% 0%, rgba(0,157,189,.05), transparent 26%), radial-gradient(circle at 88% 0%, rgba(11,79,108,.06), transparent 24%), linear-gradient(180deg,#f4f8fa 0%,#f8fbfc 28%,#fcfdfd 100%);
}

.gainable-section {
    position: relative;
    background: radial-gradient(circle at 84% 0%, rgba(8,167,201,.05), transparent 22%), linear-gradient(180deg,#f4f8fa 0%,#f8fbfc 26%,#ffffff 100%);
}

.gainable-demo {
    border-color: #d7e4e8;
    box-shadow: 0 30px 70px rgba(12,53,73,.10), 0 6px 18px rgba(12,53,73,.05);
}

.gainable-stage {
    background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.97) 0%, rgba(244,249,251,.96) 26%, rgba(232,241,244,.96) 62%, rgba(221,232,236,.95) 100%);
}

.gainable-stage::before, .gainable-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.gainable-stage::before {
    background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.88), rgba(255,255,255,.06) 48%, transparent 64%), radial-gradient(circle at 50% 92%, rgba(18,63,83,.10), transparent 38%);
    z-index: 0;
}

.gainable-stage::after {
    background: linear-gradient(90deg, rgba(22,77,98,.05) 1px, transparent 1px) 0 0/34px 34px, linear-gradient(rgba(22,77,98,.045) 1px, transparent 1px) 0 0/34px 34px;
    mask-image: radial-gradient(circle at 50% 44%, rgba(0,0,0,.55), transparent 92%);
    opacity: .25;
    z-index: 0;
}

.gainable-stage-top, .gainable-stage-bottom, .gainable-fallback, #gainable-canvas, .gainable-labels {
    z-index: 1;
}

.gainable-viewport {
    border-top: 1px solid rgba(255,255,255,.14);
    border-bottom: 1px solid rgba(23,63,83,.04);
}

#gainable-canvas {
    background: radial-gradient(circle at 50% 44%, rgba(255,255,255,.22), transparent 42%);
}

.gainable-stage-top {
    background: linear-gradient(180deg, rgba(249,252,253,.78), rgba(249,252,253,.32) 68%, rgba(249,252,253,0));
}

.gainable-status {
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 24px rgba(18,64,82,.08);
}

.gainable-stage-bottom {
    background: linear-gradient(180deg, rgba(233,241,244,0) 0%, rgba(238,245,247,.76) 18%, rgba(241,247,249,.95) 100%);
    backdrop-filter: blur(6px);
}

.gainable-legend {
    text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

.gainable-toolbar button {
    box-shadow: 0 5px 12px rgba(18,64,82,.05);
    backdrop-filter: blur(8px);
}

.gainable-controls {
    background: linear-gradient(180deg,#ffffff 0%,#fbfdfe 52%,#f8fbfc 100%);
}

.gainable-page .damper-control, .g-bypass-card, .g-return-card, .g-analysis-card, .g-config-card, .g-return-summary, .g-pressure-summary, .g-bend-setting, .g-return-config, .g-chart-card, .g-method-card, .g-loss-details {
    box-shadow: 0 8px 22px rgba(18,64,82,.04);
}

.gainable-page .air-total {
    background: radial-gradient(circle at 85% 15%, rgba(95,225,239,.20), transparent 28%), linear-gradient(120deg,#0a3549 0%,#0b506a 58%,#0c5d78 100%);
    box-shadow: 0 14px 28px rgba(14,56,74,.16);
}

.gainable-fallback svg {
    filter: drop-shadow(0 16px 30px rgba(19,64,83,.08));
}

.gainable-label {
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
}

.gainable-explain article {
    background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(248,251,252,.72));
    border: 1px solid #e2edf1;
    border-left: 2px solid #cae0e6;
    border-radius: 16px;
    padding: 14px 16px 14px 18px;
    box-shadow: 0 10px 22px rgba(18,64,82,.04);
}

@media (max-width: 860px) {
    .gainable-stage-top {
        padding:20px 18px
    }

    .gainable-stage-bottom {
        padding: 12px 12px 14px
    }
}

@media (max-width: 540px) {
    .gainable-stage {
        background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.98) 0%, rgba(242,248,250,.97) 34%, rgba(230,239,243,.97) 100%);
    }

    .gainable-stage::after {
        opacity: .16;
        background-size: 26px 26px,26px 26px
    }

    .gainable-stage-top {
        background: linear-gradient(180deg, rgba(250,252,253,.92), rgba(250,252,253,.5) 68%, rgba(250,252,253,0));
    }
}

.g-table-wrap:focus-visible { outline: 3px solid #006980; outline-offset: 3px; }