:root {
            --ink: #26342c;
            --muted: #737b72;
            --paper: #fafbf6;
            --line: #d8ded4;
            --accent: #365944
        }

        * {
            box-sizing: border-box
        }

        html,
        body {
            margin: 0;
            height: 100%;
            overflow: hidden;
            font-family: Arial, Helvetica, sans-serif;
            color: var(--ink);
            background: #e7ebe3
        }

        button,
        input,
        select {
            font: inherit
        }

        button {
            cursor: pointer;
            color: inherit
        }

        button:focus-visible,
        select:focus-visible,
        input:focus-visible {
            outline: 3px solid #91aa92;
            outline-offset: 3px
        }

        #view {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            display: block;
            touch-action: none
        }

        header {
            position: fixed;
            left: 32px;
            top: 29px;
            pointer-events: none
        }

        .eyebrow {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 2.6px;
            color: #647669;
            display: flex;
            align-items: center;
            gap: 9px
        }

        .dot {
            height: 6px;
            width: 6px;
            border-radius: 50%;
            background: #536e57
        }

        h1 {
            font-size: 31px;
            font-weight: 500;
            letter-spacing: -1.1px;
            line-height: 1.13;
            margin: 10px 0 7px
        }

        .sub {
            font-size: 12px;
            color: var(--muted);
            line-height: 1.5
        }

        .metrics {
            display: flex;
            gap: 24px;
            margin-top: 20px
        }

        .metric strong {
            font-size: 18px;
            font-weight: 500;
            letter-spacing: -.4px
        }

        .metric small {
            display: block;
            margin-top: 4px;
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 1.6px;
            color: var(--muted)
        }

        .topright {
            position: fixed;
            right: 27px;
            top: 28px;
            display: flex;
            gap: 8px
        }

        .btn {
            border: 1px solid #d4dcd1;
            background: #f9fbf5ed;
            border-radius: 9px;
            padding: 10px 14px;
            font-size: 12px;
            line-height: 1;
            box-shadow: 0 2px 8px #243c2210
        }

        .btn:hover {
            background: #fff
        }

        .btn.primary {
            background: var(--accent);
            border-color: var(--accent);
            color: white
        }

        .btn.active {
            background: #dfebdf;
            border-color: #99af9a
        }

        .icon {
            width: 37px;
            height: 37px;
            padding: 0;
            font-size: 16px
        }

        .bottom {
            position: fixed;
            left: 50%;
            bottom: 32px;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 11px;
            max-width: calc(100% - 32px)
        }

        .toolbar {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 7px;
            border: 1px solid #ffffffb0;
            background: #f9fbf6ed;
            border-radius: 15px;
            box-shadow: 0 10px 34px #24381e16;
            white-space: nowrap
        }

        .tool {
            border: 0;
            background: transparent;
            padding: 10px 13px;
            font-size: 12px;
            border-radius: 8px
        }

        .tool.active {
            background: var(--accent);
            color: white
        }

        .tool:hover {
            background: #e8eee5
        }

        .tool.active:hover {
            background: #365944
        }

        .divider {
            width: 1px;
            height: 21px;
            background: #dce2d8;
            margin: 0 4px
        }

        .help {
            font-size: 10px;
            letter-spacing: .25px;
            color: #687567;
            text-align: center;
            background: #e7ebe3c0;
            border-radius: 6px;
            padding: 4px 9px
        }

        .compass {
            position: fixed;
            right: 29px;
            bottom: 38px;
            width: 84px;
            height: 84px
        }

        .compass svg {
            width: 84px;
            height: 84px;
            overflow: visible
        }

        .compass text {
            font: 9px Arial;
            fill: #596959
        }

        .compass line {
            stroke: #b4c0ae;
            stroke-width: 1
        }

        #northArrow {
            fill: #365944
        }

        #direction {
            position: fixed;
            left: 32px;
            bottom: 37px;
            font-size: 11px;
            line-height: 1.6;
            color: #576d5c
        }

        .tag {
            font-size: 8px;
            letter-spacing: 1.8px;
            color: #7d8979;
            display: block
        }

        .panel {
            position: fixed;
            right: 27px;
            top: 77px;
            max-height: calc(100% - 184px);
            width: 337px;
            overflow: auto;
            background: #fafcf6f5;
            border: 1px solid #fff;
            border-radius: 15px;
            box-shadow: 0 12px 45px #29392525;
            padding: 23px;
            display: none
        }

        .panel.open {
            display: block
        }

        .panel h2 {
            font-size: 19px;
            letter-spacing: -.3px;
            font-weight: 500;
            margin: 0 0 10px
        }

        .panel h3 {
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 1.8px;
            color: #70816e;
            margin: 23px 0 10px
        }

        .panel p {
            font-size: 12px;
            line-height: 1.65;
            color: #667261;
            margin: 7px 0
        }

        .panel .row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 12px;
            border-bottom: 1px solid #e0e6db;
            padding: 9px 0
        }

        .swatches {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 10px
        }

        .swatches label {
            display: flex;
            flex-direction: column;
            gap: 7px;
            font-size: 10px;
            color: #667261
        }

        input[type=color] {
            width: 100%;
            height: 30px;
            border: 0;
            background: none;
            padding: 0;
            cursor: pointer
        }

        select {
            width: 100%;
            padding: 10px;
            border: 1px solid #d6e0d0;
            border-radius: 6px;
            background: #f5f8f0;
            color: #334931;
            font-size: 12px
        }

        .note {
            border-left: 2px solid #a5b99d;
            padding-left: 11px
        }

        .panel .buttons {
            display: flex;
            gap: 8px;
            margin-top: 15px;
            flex-wrap: wrap
        }

        .status {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 10px;
            color: #6c7f68;
            margin-top: 16px
        }

        #loading {
            position: fixed;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #e7ebe3;
            z-index: 10;
            gap: 20px
        }

        .spinner {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: 2px solid #bccabb;
            border-top-color: #365944;
            animation: spin 1s linear infinite
        }

        @keyframes spin {
            to {
                transform: rotate(360deg)
            }
        }

        #loading .label {
            font-size: 12px;
            color: #597054
        }

        #loading.error {
            padding: 30px;
            text-align: center
        }

        .errorDetail {
            font-size: 12px;
            max-width: 480px;
            line-height: 1.7;
            color: #51624d
        }

        #measure {
            position: fixed;
            inset: 0;
            pointer-events: none;
            width: 100%;
            height: 100%;
            display: none
        }

        #measure line {
            stroke: #3f5b42;
            stroke-width: 1
        }

        #measure circle {
            fill: #456749
        }

        #measure text {
            fill: #3a553d;
            font: 12px Arial;
            paint-order: stroke;
            stroke: #eff3e9;
            stroke-width: 5px;
            stroke-linejoin: round
        }

        #toast {
            position: fixed;
            left: 50%;
            top: 28px;
            transform: translateX(-50%);
            font-size: 12px;
            background: #2f4739;
            color: #fff;
            padding: 11px 17px;
            border-radius: 9px;
            opacity: 0;
            transition: opacity .25s;
            pointer-events: none
        }

        .full {
            display: none
        }

        @media(max-width:850px) {
            header {
                left: 20px;
                top: 22px
            }

            .topright {
                right: 18px;
                top: 22px
            }

            h1 {
                font-size: 26px
            }

            .metrics {
                gap: 19px;
                margin-top: 15px
            }

            .metric strong {
                font-size: 16px
            }

            .bottom {
                bottom: 21px
            }

            .tool {
                padding: 10px
            }

            .compass {
                display: none
            }

            #direction {
                bottom: 114px;
                left: 20px
            }

            .panel {
                right: 18px;
                top: 69px;
                width: 320px
            }

            .help {
                font-size: 9px
            }

            .optional {
                display: none
            }
        }

        @media(max-width:520px) {
            header {
                left: 16px;
                top: 19px
            }

            .eyebrow {
                font-size: 8px;
                letter-spacing: 1.7px
            }

            h1 {
                font-size: 24px
            }

            .sub {
                font-size: 10px;
                max-width: 210px
            }

            .metrics {
                gap: 16px;
                margin-top: 13px
            }

            .metric strong {
                font-size: 15px
            }

            .metric small {
                font-size: 8px;
                letter-spacing: 1px
            }

            .topright {
                right: 13px;
                top: 18px
            }

            .topright .btn.primary {
                font-size: 10px;
                padding: 11px 10px
            }

            .topright .icon {
                width: 33px
            }

            .toolbar {
                gap: 0;
                padding: 5px;
                border-radius: 12px
            }

            .tool {
                padding: 10px 9px;
                font-size: 10px
            }

            .divider {
                margin: 0 1px
            }

            .bottom {
                bottom: 17px;
                gap: 8px
            }

            .help {
                max-width: 320px;
                font-size: 9px;
                line-height: 1.5
            }

            #direction {
                bottom: 100px;
                left: 17px;
                font-size: 10px
            }

            .panel {
                top: 62px;
                right: 12px;
                left: 12px;
                width: auto;
                max-height: calc(100% - 159px);
                padding: 20px
            }

            .btn {
                font-size: 11px
            }

            .measureWord {
                display: none
            }

            .topright .downloadText {
                display: none
            }
        }

        :root {
            --solar: #b8812d;
            --solar-soft: #f4e9cf;
            --sun-side: 376px;
            --sun-sheet: 340px
        }

        body.sun-open #view,
        body.sun-open #measure,
        body.sun-open #sunOverlay {
            width: calc(100% - var(--sun-side))
        }

        #sunOverlay {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden
        }

        body.sun-open .bottom {
            left: calc((100% - var(--sun-side))/2)
        }

        body.sun-open .compass {
            right: calc(var(--sun-side) + 18px)
        }

        header h1 {
            font-size: 30px;
            letter-spacing: -1px
        }

        header .metrics {
            margin-top: 18px;
            gap: 22px
        }

        .solar-mark {
            color: var(--solar);
            font-size: 16px;
            line-height: 1
        }

        #sunToggle {
            display: flex;
            gap: 8px;
            align-items: center;
            font-weight: 600
        }

        #sunToggle.active {
            background: #f3e8ce;
            border-color: #d8bd85
        }

        #sunPanel {
            display: none;
            position: fixed;
            right: 16px;
            top: 79px;
            bottom: 20px;
            width: 348px;
            padding: 22px;
            background: #fafbf7f7;
            border: 1px solid #fff;
            border-radius: 18px;
            box-shadow: 0 12px 45px #29392517;
            overflow: auto;
            overscroll-behavior: contain;
            scrollbar-width: thin;
            scrollbar-color: #c1cabe transparent;
            z-index: 3
        }

        #sunPanel.open {
            display: block
        }

        .sun-panel-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 17px
        }

        .sun-kicker {
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 2px;
            color: #8d753d;
            margin-bottom: 6px
        }

        #sunPanel h2 {
            font-size: 23px;
            letter-spacing: -.65px;
            font-weight: 500;
            margin: 0
        }

        #sunPanel .close-panel {
            border: 0;
            background: #eef1e9;
            border-radius: 50%;
            width: 29px;
            height: 29px;
            font-size: 20px;
            line-height: 20px;
            color: #6a7466
        }

        .sun-date-row {
            display: grid;
            grid-template-columns: 1fr 105px;
            gap: 12px;
            align-items: end
        }

        .sun-field {
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-width: 0;
            font-size: 10px;
            color: #6f7969
        }

        .sun-field input:not([type=range]),
        .sun-field select {
            width: 100%;
            min-width: 0;
            padding: 9px 9px;
            height: 39px;
            border: 1px solid #d9e0d2;
            border-radius: 8px;
            background: #fff;
            color: #354232;
            font-size: 12px
        }

        .sun-field #sunClock {
            font-size: 20px;
            letter-spacing: -.6px;
            padding: 6px;
            width: 105px
        }

        .sun-seasons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 5px;
            margin-top: 11px
        }

        .sun-seasons button {
            border: 1px solid #e0e4d9;
            border-radius: 7px;
            background: #f4f6ef;
            padding: 8px 2px;
            font-size: 10px;
            color: #53624d
        }

        .sun-seasons button.active {
            background: var(--solar-soft);
            border-color: #dac08c;
            color: #765923
        }

        .sun-status-line {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 10px;
            color: #7b826f;
            margin: 16px 0 5px;
            gap: 8px
        }

        #dayState {
            display: flex;
            align-items: center;
            gap: 6px;
            color: #856527
        }

        #dayState:before {
            content: '';
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #c3933c
        }

        .sun-graph {
            display: block;
            width: 100%;
            height: 85px;
            cursor: crosshair;
            touch-action: none
        }

        .sun-scrub {
            width: 100%;
            accent-color: var(--solar);
            margin: 8px 0 3px;
            cursor: ew-resize;
            height: 22px
        }

        .sun-ticks {
            display: flex;
            justify-content: space-between;
            font-size: 9px;
            color: #8b9283
        }

        .sun-play-row {
            display: grid;
            grid-template-columns: 1fr 90px 46px;
            gap: 7px;
            margin-top: 14px
        }

        .sun-play-row button,
        .sun-play-row select {
            height: 36px;
            padding: 7px 9px;
            font-size: 11px;
            border-radius: 8px;
            border: 1px solid #d6ddce;
            background: #f2f5ec;
            white-space: nowrap
        }

        .sun-play-row #sunPlay {
            background: #3c5d48;
            color: white;
            border-color: #3c5d48;
            font-weight: 600
        }

        .sun-play-row #sunSpeed {
            font-size: 10px;
            padding: 7px 4px
        }

        .sun-readouts {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
            margin-top: 20px;
            padding-top: 17px;
            border-top: 1px solid #e1e5d9
        }

        .sun-stat {
            font-size: 10px;
            color: #7b8372
        }

        .sun-stat strong {
            display: block;
            font-weight: 500;
            font-size: 24px;
            letter-spacing: -.7px;
            color: #324630;
            margin: 4px 0 3px;
            font-variant-numeric: tabular-nums
        }

        .sun-stat small {
            font-size: 10px;
            color: #929883
        }

        .sun-events {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            font-size: 10px;
            color: #718066;
            margin: 16px 0 2px;
            padding: 12px 0;
            border-top: 1px solid #e5e8df;
            border-bottom: 1px solid #e5e8df
        }

        .sun-events b {
            font-weight: 600;
            color: #3e563b;
            margin-left: 4px
        }

        .sun-options {
            display: flex;
            gap: 17px;
            flex-wrap: wrap;
            margin: 14px 0 12px
        }

        .sun-options label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            color: #52684d;
            cursor: pointer
        }

        .sun-options input {
            accent-color: #597447;
            margin: 0;
            width: 14px;
            height: 14px
        }

        .sun-hint {
            font-size: 10px;
            line-height: 1.6;
            color: #84907a;
            margin: 8px 0 13px
        }

        .sun-advanced {
            margin-top: 15px;
            border-top: 1px solid #e1e5d9;
            padding-top: 13px
        }

        .sun-advanced summary {
            font-size: 11px;
            cursor: pointer;
            color: #4d6645;
            padding: 3px 0
        }

        .sun-advanced .fields {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 14px
        }

        .sun-advanced .full-row {
            grid-column: 1 / -1
        }

        .sun-advanced p {
            font-size: 10px;
            line-height: 1.65;
            color: #7f8975;
            margin: 10px 0
        }

        .sun-advanced a {
            color: #536a4f
        }

        .sun-advanced .mini-btn {
            font-size: 10px;
            border: 1px solid #d2dbcb;
            background: #f5f8ef;
            border-radius: 7px;
            padding: 8px 10px
        }

        .sun-export {
            width: 100%;
            padding: 10px;
            border: 1px solid #ced8c6;
            border-radius: 8px;
            background: #eef3e8;
            font-size: 11px;
            color: #47603e;
            margin-top: 13px
        }

        .sun-footnote {
            font-size: 9px;
            line-height: 1.6;
            color: #969d8b;
            margin: 13px 0 0
        }

        #sunStamp {
            position: fixed;
            left: 32px;
            top: 180px;
            pointer-events: none;
            color: #6c775f;
            font-size: 11px;
            line-height: 1.55
        }

        #sunStamp strong {
            font-weight: 500;
            color: #a07836;
            font-variant-numeric: tabular-nums
        }

        #solarMessage {
            color: #977026;
            font-size: 10px;
            line-height: 1.5;
            min-height: 0
        }

        #solarMessage:empty {
            display: none
        }

        #panel {
            z-index: 4
        }

        #sunOverlay text {
            font: 10px Arial;
            paint-order: stroke;
            stroke: #f3f4e9;
            stroke-width: 3px;
            stroke-linejoin: round;
            fill: #9a702d
        }

        #sunOverlay path,
        #sunOverlay line {
            vector-effect: non-scaling-stroke
        }

        body.night header,
        body.night header h1 {
            color: #d3dec9
        }

        body.night header .sub,
        body.night header .metric small,
        body.night header .eyebrow,
        body.night #direction,
        body.night #sunStamp {
            color: #aab9a5
        }

        body.night #sunStamp strong {
            color: #d6ba76
        }

        #toast {
            z-index: 12;
            top: 20px
        }

        @media(min-width:851px) {
            .topright {
                right: 20px;
                top: 25px
            }

            .help {
                font-size: 9px
            }

            .sun-open #direction {
                bottom: 26px;
                font-size: 10px
            }

            .sun-open .bottom {
                bottom: 28px
            }

            .sun-open .compass {
                bottom: 28px
            }

            .sun-open .toolbar .tool {
                font-size: 11px;
                padding: 10px 10px
            }
        }

        @media(max-width:1100px) and (min-width:851px) {
            header {
                left: 22px;
                top: 27px
            }

            header h1 {
                font-size: 25px
            }

            .metrics {
                display: none !important
            }

            #sunStamp {
                left: 22px;
                top: 115px
            }

            .sun-open .compass {
                display: none
            }

            .sun-open #direction {
                display: none
            }

            .sun-open .toolbar .tool {
                padding: 10px 7px;
                font-size: 10px
            }
        }

        @media(max-width:850px) {
            :root {
                --sun-sheet: min(42vh, 350px)
            }

            body.sun-open #view,
            body.sun-open #measure,
            body.sun-open #sunOverlay {
                width: 100%;
                height: calc(100% - var(--sun-sheet))
            }

            body.sun-open .bottom {
                left: 50%;
                bottom: calc(var(--sun-sheet) + 8px);
                gap: 0
            }

            body.sun-open .help {
                display: none
            }

            body.sun-open #direction {
                display: none
            }

            body.sun-open .compass {
                display: none
            }

            #sunPanel {
                top: auto;
                bottom: 0;
                right: 0;
                left: 0;
                width: 100%;
                height: var(--sun-sheet);
                padding: 16px 21px 25px;
                border-radius: 20px 20px 0 0;
                box-shadow: 0 -8px 30px #26392514
            }

            .sun-panel-head {
                display: none
            }

            .sun-date-row {
                grid-template-columns: 1fr 120px;
                gap: 16px
            }

            .sun-date-row .sun-field {
                font-size: 9px
            }

            .sun-field #sunClock {
                width: 100%;
                font-size: 23px;
                height: 40px
            }

            .sun-field input:not([type=range]) {
                height: 40px
            }

            .sun-seasons {
                margin-top: 9px
            }

            .sun-seasons button {
                padding: 7px 0;
                font-size: 10px
            }

            .sun-status-line {
                margin: 12px 0 0
            }

            .sun-graph {
                height: 62px
            }

            .sun-scrub {
                margin: 4px 0 0
            }

            .sun-play-row {
                margin-top: 10px;
                grid-template-columns: 1fr 94px 51px
            }

            .sun-readouts {
                margin-top: 15px;
                padding-top: 12px
            }

            .sun-stat strong {
                font-size: 23px
            }

            .sun-events {
                margin-top: 13px
            }

            #sunStamp {
                left: 18px;
                top: 105px;
                font-size: 10px
            }

            header {
                left: 18px;
                top: 19px
            }

            header h1 {
                font-size: 25px;
                margin-top: 9px
            }

            .metrics {
                display: none !important
            }

            header .sub {
                max-width: 230px;
                font-size: 10px
            }

            .topright {
                right: 14px;
                top: 19px;
                gap: 6px
            }

            #saveGlb {
                display: none
            }

            #sunToggle {
                font-size: 10px;
                padding: 10px 9px;
                gap: 4px
            }

            .topright .icon {
                width: 33px;
                height: 33px
            }

            .sun-open .tool {
                font-size: 10px;
                padding: 9px 8px
            }

            .sun-open .bottom {
                max-width: calc(100% - 16px)
            }

            #panel {
                top: 66px;
                bottom: 15px;
                max-height: none
            }
        }

        @media(max-width:420px) {
            header h1 {
                font-size: 23px
            }

            header .eyebrow {
                font-size: 8px;
                letter-spacing: 1.8px
            }

            #sunToggle .toggle-word {
                display: none
            }

            #sunToggle {
                width: 34px;
                height: 34px;
                justify-content: center;
                padding: 0
            }

            .sun-open .tool {
                padding: 9px 7px;
                font-size: 10px
            }
        }

        @media(max-height:500px) and (max-width:850px) {
            :root {
                --sun-sheet: 170px
            }

            header .sub,
            #sunStamp {
                display: none
            }

            header h1 {
                font-size: 21px
            }

            .sun-graph {
                display: none
            }

            #sunPanel {
                padding: 12px 20px
            }

            .sun-readouts {
                display: none
            }
        }

        /* Optional surroundings: independent switches, all on when the page opens. */
        .site-controls {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 6px;
            border: 1px solid #fff;
            border-radius: 13px;
            background: #f9fbf6f2;
            box-shadow: 0 6px 24px #24381e13;
            max-width: 100%;
        }

        .site-switch {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 9px 10px;
            border: 1px solid transparent;
            border-radius: 8px;
            font-size: 11px;
            color: #596b55;
            cursor: pointer;
            white-space: nowrap;
            user-select: none;
        }

        .site-switch:hover {
            background: #eef2e8;
        }

        .site-switch.selected {
            background: #e1ecdc;
            border-color: #b9cbb1;
            color: #304d35;
        }

        .site-switch input {
            appearance: none;
            width: 13px;
            height: 13px;
            margin: 0;
            border: 1px solid #a7b29f;
            border-radius: 4px;
            background: #fff;
            flex-shrink: 0;
            cursor: pointer;
            display: grid;
            place-items: center;
        }

        .site-switch input:checked {
            background: #426448;
            border-color: #426448;
        }

        .site-switch input:checked:after {
            content: '\2713';
            color: #fff;
            font-size: 10px;
            line-height: 1;
        }

        .site-fit {
            display: grid;
            place-items: center;
            width: 32px;
            height: 32px;
            flex-shrink: 0;
            border: 0;
            border-left: 1px solid #dce2d5;
            border-radius: 5px;
            background: transparent;
            color: #59734e;
        }

        .site-fit:hover {
            background: #e7eee1;
        }

        .site-fit svg {
            width: 17px;
            height: 17px;
        }

        #siteMeta {
            font-size: 9px;
            letter-spacing: .1px;
            color: #6e8066;
            line-height: 1.2;
            background: #f5f8eef0;
            padding: 4px 8px;
            border-radius: 5px;
            pointer-events: none;
        }

        #siteMeta[hidden] {
            display: none;
        }

        .bottom {
            gap: 7px;
            z-index: 2;
        }

        .site-note {
            margin-top: 14px;
            border-top: 1px solid #dce4d5;
            padding-top: 10px;
        }

        .site-note summary {
            cursor: pointer;
            font-size: 12px;
            color: #37563b;
            padding: 6px 0;
        }

        .site-note p {
            font-size: 11px;
        }

        @media(max-width:850px) {
            .bottom {
                max-width: calc(100% - 20px);
            }

            #direction {
                bottom: 161px;
            }

            .site-controls {
                gap: 2px;
                padding: 5px;
            }

            .site-switch {
                font-size: 10px;
                padding: 8px 8px;
                gap: 5px;
            }

            body.sun-open .bottom {
                gap: 5px;
            }

            #siteMeta {
                font-size: 8px;
            }
        }

        @media(max-width:520px) {
            .bottom {
                gap: 5px;
                bottom: 12px;
            }

            .site-switch {
                font-size: 9px;
                padding: 8px 6px;
                gap: 5px;
            }

            .site-fit {
                width: 27px;
                height: 28px;
            }

            .site-controls {
                gap: 0;
                padding: 4px;
            }

            .site-switch input {
                width: 12px;
                height: 12px;
            }

            .bottom .help {
                display: none;
            }

            #direction {
                bottom: 111px;
            }

            body.sun-open #siteMeta {
                display: none;
            }
        }

        @media(max-width:360px) {
            .site-switch {
                font-size: 8.5px;
                padding: 8px 4px;
                gap: 4px;
            }

            .site-fit {
                width: 24px;
            }
        }
        /* Fixed product palette, scoped to facade cladding only. */
        .swatches { grid-template-columns: 1fr 1fr; }
        .hardie-card { margin: 15px 0 17px; padding: 14px; border: 1px solid #d8ded4; border-radius: 11px; background: #ffffffb8; }
        .hardie-kicker { font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase; color: #677b61; margin-bottom: 8px; }
        .hardie-card h4 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
        .hardie-card .hardie-spec { font-size: 10px; line-height: 1.6; margin: 5px 0 10px; }
        .hardie-preview { height: 48px; border-radius: 4px; background: #776e65; background-size: 400% 300%; background-position: 48% 48%; border: 1px solid #0002; box-shadow: inset 0 -3px 0 #0002, inset 0 1px 0 #fff2; }
        .hardie-selection { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 9px 0 10px; color: #304835; }
        .hardie-selection strong { font-size: 12px; font-weight: 600; }
        .hardie-selection small { font-size: 9px; color: #778270; white-space: nowrap; }
        .hardie-palette { border: 0; padding: 0; margin: 0; min-width: 0; }
        .hardie-palette legend { font-size: 9px; color: #6d7b64; margin: 0 0 8px; padding: 0; }
        .hardie-options { display: grid; grid-template-columns: 1fr; gap: 4px; }
        .hardie-option { display: flex; align-items: center; gap: 8px; min-height: 33px; padding: 5px 8px; border: 1px solid #e1e6dd; border-radius: 6px; cursor: pointer; background: #fbfcf9; position: relative; }
        .hardie-option:hover { border-color: #aabda1; background: #f4f7ef; }
        .hardie-option.selected { background: #eaf1e5; border-color: #87a57c; }
        .hardie-option:focus-within { outline: 2px solid #91aa92; outline-offset: 2px; }
        .hardie-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
        .hardie-chip { width: 22px; height: 21px; border-radius: 3px; flex-shrink: 0; border: 1px solid #0002; background: var(--chip); }
        .hardie-option-name { font-size: 11px; flex: 1; line-height: 1.3; }
        .hardie-option-code { font-size: 9px; color: #7d8577; font-variant-numeric: tabular-nums; }
        .hardie-check { width: 11px; font-size: 12px; color: #365944; opacity: 0; }
        .hardie-option.selected .hardie-check { opacity: 1; }
        .hardie-card .hardie-scope { font-size: 10px; color: #6d7965; margin: 10px 0 7px; line-height: 1.5; }
        .hardie-link { color: #365944; font-size: 11px; text-underline-offset: 3px; }
        .hardie-detail-buttons { display: flex; gap: 6px; margin-top: 10px; }
        .hardie-detail-buttons button { background: #f3f6ef; border: 1px solid #d6dfcf; border-radius: 6px; padding: 7px 8px; font-size: 10px; flex: 1; }
        .hardie-detail-buttons button:hover { background: #e7eee0; }
        .hardie-note { margin-top: 11px; border-top: 1px solid #e0e6da; padding-top: 8px; }
        .hardie-note summary { font-size: 10px; cursor: pointer; color: #65765c; }
        .hardie-card .hardie-note p { font-size: 10px; line-height: 1.55; }
        .hardie-reference { width: 100%; height: auto; display: block; border-radius: 5px; margin: 8px 0; }
        @media(max-width:360px) { .hardie-card { padding: 11px; } .hardie-option-code { font-size: 8px; } }

        .hardie-structure-button { width: 100%; margin-top: 6px; padding: 7px; border: 1px solid #d6dfcf; border-radius: 6px; background: #f3f6ef; font-size: 10px; }
        .hardie-preview-caption { font-size: 9px; color: #7a8372; margin-top: 4px; }
    

/* Optional interior. No source exterior selector is changed outside this state. */
#interiorLaunch{position:fixed;left:32px;top:225px;z-index:3;display:flex;align-items:center;gap:11px;padding:12px 17px;border:1px solid #b8c7b0;background:#fafcf6f5;border-radius:12px;box-shadow:0 5px 25px #263b2520;color:#365944;font-size:12px;font-weight:600}
#interiorLaunch svg{width:20px;height:20px}#interiorLaunch small{display:block;margin-top:4px;font-size:9px;font-weight:400;color:#7a8574;text-align:left}
#interiorLaunch:disabled{opacity:.6;cursor:wait}
.interior-heading,#interiorPanel,#interiorTools,#interiorLabels,#walkPad{display:none}
body.interior-active header,body.interior-active #interiorLaunch,body.interior-active .bottom,body.interior-active #direction,body.interior-active .compass,body.interior-active #measure,body.interior-active #sunStamp{display:none!important}
body.interior-active .interior-heading{display:flex;position:fixed;top:23px;left:25px;z-index:3;align-items:center;gap:17px;pointer-events:none}
.interior-heading button{pointer-events:auto;padding:11px 13px}.interior-heading .eyebrow{font-size:8px;letter-spacing:1.8px}.interior-heading h2{margin:5px 0 0;font-size:23px;font-weight:500;letter-spacing:-.65px;color:#2c4434}
body.interior-active:not(.interior-panel-closed):not(.sun-open) #view,body.interior-active:not(.interior-panel-closed):not(.sun-open) #sunOverlay{width:calc(100% - 340px)}
body.interior-active #interiorPanel{display:block;position:fixed;z-index:3;right:16px;top:78px;bottom:20px;width:308px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:20px;background:#fafcf7f7;border:1px solid #fff;box-shadow:0 10px 35px #263b2520;border-radius:16px}
body.interior-panel-closed #interiorPanel,body.interior-active.sun-open #interiorPanel{display:none}
.interior-panel-title{display:flex;justify-content:space-between;align-items:center;gap:6px;margin:0 0 12px}
.interior-panel-title h3{margin:0;font-size:16px;font-weight:500;letter-spacing:-.3px}.interior-panel-title span{font-size:9px;color:#75816f}
.int-kicker{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#7c8675;margin:20px 0 10px}
#interiorMap{width:100%;height:auto;display:block;border-radius:10px;background:#eff1e9;border:1px solid #e0e5d8}
#interiorMap .map-room{cursor:pointer;fill:#dcd4c1;stroke:#f5f4eb;stroke-width:2;transition:fill .15s}
#interiorMap .map-room:hover,#interiorMap .map-room.active{fill:#aebda2}
#interiorMap text{font:9px Arial;fill:#465743;pointer-events:none}
#interiorMap .map-wall{fill:#8e9986;pointer-events:none}
.int-map-hint{font-size:9px!important;line-height:1.5!important;margin:7px 0 0!important;color:#85917d!important}
.int-views{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.int-views button{padding:11px 8px;text-align:left;border:1px solid #d9e0d2;border-radius:8px;background:#f2f6ed;color:#38523a;font-size:10px;line-height:1.35}
.int-views button.active{background:#dfe9d8;border-color:#a6ba99}.int-views button:hover{background:#e5ecde}
#interiorRoom{margin-top:2px;font-size:11px;background:#fff}
.int-options{display:grid;grid-template-columns:1fr;gap:10px;padding-top:14px;margin-top:16px;border-top:1px solid #e0e6d9}
.int-options label{font-size:11px;display:flex;align-items:center;gap:8px;color:#51654a}.int-options input{accent-color:#426448}
#interiorPanel p{font-size:10px;line-height:1.6;color:#77836e;margin:10px 0}
.int-source{font-size:10px;border-top:1px solid #dce3d4;padding-top:12px;margin-top:16px}.int-source summary{cursor:pointer;line-height:1.5;color:#536b49}
.int-source-buttons{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0}
.int-source-buttons button{border:1px solid #d4ddca;border-radius:7px;font-size:10px;background:#f5f7ef;padding:8px;color:#486140}
.int-export{width:100%;margin-top:12px;border:1px solid #d0dbc6;border-radius:8px;background:#eef3e7;padding:10px;font-size:10px;color:#49613f}
body.interior-active #interiorTools{display:flex;position:fixed;z-index:4;left:calc((100% - 340px)/2);bottom:22px;transform:translateX(-50%);flex-direction:column;align-items:center;gap:8px;max-width:calc(100% - 24px)}
body.interior-panel-closed #interiorTools{left:50%}body.interior-active.sun-open #interiorTools{left:calc((100% - var(--sun-side))/2)}
.int-mode-bar{display:flex;align-items:center;gap:4px;white-space:nowrap;padding:6px;background:#fafcf6f5;border:1px solid #fff;border-radius:12px;box-shadow:0 5px 26px #263b2525}
.int-mode-bar button{border:0;background:transparent;border-radius:7px;padding:10px 11px;font-size:11px;color:#52684a}.int-mode-bar button.active{background:#365944;color:#fff}.int-mode-bar button:hover:not(.active){background:#e8eee2}
.int-mode-bar .int-nav-button{background:#e9efe3;font-size:15px;line-height:14px;padding:9px 10px}
#interiorHint{font-size:9px;line-height:1.45;color:#71806a;text-align:center;background:#f0f3e8de;border-radius:6px;padding:4px 10px;max-width:460px}
body.interior-active #interiorLabels{display:block;position:fixed;inset:0;pointer-events:none;z-index:2}
.int-room-tag{position:absolute;transform:translate(-50%,-50%);border:1px solid #ffffffdc;border-radius:7px;background:#fafcf4ea;padding:5px 7px;box-shadow:0 2px 10px #253a2220;pointer-events:auto;white-space:nowrap;line-height:1.2;font-size:10px;color:#334c35}
.int-room-tag b{font-weight:600}.int-room-tag small{display:block;font-size:8px;color:#7c8874;margin-top:3px}.int-room-tag:hover{border-color:#739069;background:#edf4e5}
body.interior-walk #sunOverlay{display:none}
body.interior-walk #walkPad{display:grid;position:fixed;z-index:4;left:24px;bottom:94px;grid-template-columns:38px 38px 38px;grid-template-rows:34px 34px;gap:4px}
#walkPad button{touch-action:none;user-select:none;-webkit-user-select:none;border:1px solid #d5dfcc;background:#f8fbf1ee;border-radius:8px;color:#425e3c;font-size:17px;box-shadow:0 3px 15px #314a2520}#walkPad button:active,#walkPad button.held{background:#bfd0b2}
#walkPad [data-walk=forward]{grid-column:2;grid-row:1}#walkPad [data-walk=left]{grid-column:1;grid-row:2}#walkPad [data-walk=back]{grid-column:2;grid-row:2}#walkPad [data-walk=right]{grid-column:3;grid-row:2}
#interiorReferenceDialog{width:min(1120px,96vw);max-height:94vh;border:1px solid #e2e8da;border-radius:14px;background:#fafcf6;padding:16px;color:#36503c;box-shadow:0 25px 90px #14241666}
#interiorReferenceDialog::backdrop{background:#1e2b22b3;backdrop-filter:blur(3px)}
.int-ref-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.int-ref-head h3{font-size:14px;font-weight:500;margin:0}.int-ref-head button{border:0;background:#e9eee3;border-radius:7px;padding:8px 12px}
#interiorReferenceImage{display:block;max-width:100%;max-height:76vh;object-fit:contain;margin:auto}.int-ref-caption{font-size:11px;line-height:1.5;margin:10px 0 0;color:#7b8574}
@media(max-width:1100px) and (min-width:851px){.interior-heading h2{font-size:19px}.interior-heading .eyebrow{display:none}.interior-heading{max-width:calc(100% - 370px)}}
@media(max-width:850px){
 #interiorLaunch{top:147px;left:18px;padding:10px 13px;font-size:11px}#interiorLaunch small{font-size:8px}
 body.interior-active .interior-heading{left:16px;top:18px;gap:10px;max-width:calc(100% - 110px)}.interior-heading h2{font-size:17px;margin-top:3px}.interior-heading .eyebrow{font-size:7px;letter-spacing:1px}.interior-heading button{padding:9px 10px;font-size:10px}
 body.interior-active:not(.interior-panel-closed):not(.sun-open) #view,body.interior-active:not(.interior-panel-closed):not(.sun-open) #sunOverlay{width:100%;height:calc(100% - 242px)}
 body.interior-active #interiorPanel{top:auto;left:0;right:0;bottom:0;width:100%;height:242px;border-radius:18px 18px 0 0;padding:15px 18px 24px}
 #interiorMap{width:150px;float:left;margin-right:14px;margin-bottom:9px}.interior-panel-title{margin-bottom:9px}.interior-panel-title h3{font-size:14px}
 .int-views{grid-template-columns:1fr 1fr;gap:5px}.int-views button{font-size:9px;padding:9px 6px}.int-kicker{margin:10px 0 7px;font-size:8px}.int-map-hint{display:none}#interiorRoom{font-size:10px;padding:8px}.int-options{clear:both;grid-template-columns:1fr 1fr;margin-top:14px;gap:10px}.int-options label{font-size:10px}
 body.interior-active #interiorTools{left:50%;bottom:250px;gap:5px;width:max-content;max-width:calc(100% - 16px)}
 body.interior-active.sun-open #interiorTools{left:50%;bottom:calc(var(--sun-sheet) + 8px)}body.interior-panel-closed #interiorTools{bottom:17px}
 .int-mode-bar{padding:5px;gap:2px}.int-mode-bar button{font-size:10px;padding:9px 9px}.int-mode-bar .int-nav-button{padding:9px 10px}#interiorHint{display:none}
 body.interior-walk #walkPad{left:12px;bottom:304px;grid-template-columns:36px 36px 36px;grid-template-rows:32px 32px;gap:4px}body.interior-walk.interior-panel-closed #walkPad{bottom:80px}body.interior-walk.sun-open #walkPad{bottom:calc(var(--sun-sheet) + 62px)}
 .int-room-tag{font-size:8px;padding:4px 5px}.int-room-tag small{font-size:7px}.int-room-tag b .room-word{display:none}
 #interiorReferenceDialog{padding:12px}.int-ref-head h3{font-size:12px}
}
@media(max-width:420px){
 body.interior-active .interior-heading{max-width:calc(100% - 98px);gap:8px}.interior-heading h2{font-size:15px}.interior-heading button{font-size:9px;padding:9px 8px}
 #interiorMap{width:132px;margin-right:10px}.int-views button{font-size:8.5px;padding:8px 5px}.int-mode-bar button{padding:9px 8px}
}
@media(max-height:550px) and (max-width:850px){
 body.interior-active:not(.interior-panel-closed):not(.sun-open) #view{height:100%;width:calc(100% - 260px)}
 body.interior-active #interiorPanel{left:auto;right:10px;top:65px;bottom:10px;width:245px;height:auto;border-radius:13px;padding:12px}#interiorMap{float:none;width:100%;margin-right:0}
 body.interior-active #interiorTools{left:calc((100% - 260px)/2);bottom:12px}body.interior-panel-closed #interiorTools{left:50%}body.interior-walk #walkPad{bottom:64px}
}



/* Interior-only paint controls; facade palette and furniture are independent. */
.int-paint{clear:both;margin:18px 0 0;padding:14px 0 0;border-top:1px solid #e0e6d9}
.int-paint-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.int-paint-head h4{margin:0;font-size:12px;font-weight:600;color:#38523a}
.int-paint-head span{font-size:9px;color:#7c8675}
.int-paint-fields{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:end}
.int-paint-picker{display:block;height:43px;padding:4px;border:1px solid #ccd6c6;border-radius:9px;background:#fff;overflow:hidden;cursor:pointer}
#interiorWallColor{display:block;width:100%;height:100%;padding:0;border:0;border-radius:5px;background:transparent;cursor:pointer}
#interiorWallColor::-webkit-color-swatch-wrapper{padding:0}
#interiorWallColor::-webkit-color-swatch{border:1px solid #0002;border-radius:4px}
#interiorWallColor::-moz-color-swatch{border:1px solid #0002;border-radius:4px}
.int-paint-hex{min-width:0;display:flex;flex-direction:column;gap:4px;font-size:9px;color:#75816f}
#interiorWallHex{display:block;width:100%;min-width:0;height:32px;border:1px solid #d6e0d0;border-radius:7px;padding:7px 9px;background:#fff;color:#334931;font:11px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.7px;text-transform:uppercase}
.int-paint-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:10px}
.int-paint-presets button{display:flex;align-items:center;gap:6px;min-width:0;min-height:34px;padding:6px;border:1px solid #d9e0d2;border-radius:7px;background:#f7f9f3;color:#51654a;text-align:left;font-size:9px;line-height:1.25}
.int-paint-presets button:hover{background:#eaf0e4;border-color:#a6ba99}
.int-paint-presets button[aria-pressed=true]{border-color:#78946c;background:#e5eedf;color:#2e4b35;box-shadow:inset 0 0 0 1px #78946c}
.int-paint-chip{display:block;width:19px;height:19px;flex:0 0 19px;border-radius:4px;background:var(--paint);border:1px solid #0002}
.int-paint-reset{display:block;margin:10px 0 0;padding:7px 9px;border:1px solid #d6dfcf;border-radius:7px;background:#f3f6ef;color:#49613f;font-size:10px}
.int-paint-reset:hover{background:#e7eee0}
#interiorPanel .int-paint-note{font-size:9px;line-height:1.55;margin:8px 0 0;color:#7c8675}
@media(max-width:850px){.int-paint{margin-top:14px;padding-top:12px}.int-paint-presets{grid-template-columns:repeat(3,minmax(0,1fr))}.int-paint-head h4{font-size:11px}.int-paint-presets button{min-height:36px}.int-paint-fields{grid-template-columns:48px minmax(0,1fr)}}
@media(max-width:360px){.int-paint-presets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-height:550px) and (max-width:850px){.int-paint-presets{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ALLSTAV 2025 configuration panel. Independent from the retained sun and site tools. */
:root{--std-side:424px;--std-sheet:min(48dvh,440px);--std-line:#dce2d7;--std-green:#365944}
#standardsToggle{display:flex;align-items:center;gap:7px;font-weight:600;background:#365944;color:#fff;border-color:#365944}
#standardsToggle svg{width:15px;height:15px}#standardsToggle.active{background:#244633}
#standardsPanel{display:none;position:fixed;z-index:5;right:16px;top:78px;bottom:17px;width:392px;background:#fafbf7;border:1px solid #fff;border-radius:18px;box-shadow:0 12px 44px #20311f22;overflow:hidden;flex-direction:column}
body.std-open #standardsPanel{display:flex}body.std-open #view,body.std-open #measure,body.std-open #sunOverlay{width:calc(100% - var(--std-side))!important;height:100%!important}
body.std-open .bottom,body.std-open #interiorTools{left:calc((100% - var(--std-side))/2)!important}
body.std-open #interiorPanel,body.std-open #panel{display:none!important}body.std-open .compass{right:calc(var(--std-side) + 18px)}
body.std-open .interior-heading{max-width:calc(100% - var(--std-side) - 30px)}body.std-open #direction{font-size:10px;bottom:24px}
.std-head{padding:20px 20px 14px}.std-kicker{font-size:9px;letter-spacing:2px;font-weight:700;color:#829077}.std-head-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px}.std-head h2{font-size:23px;letter-spacing:-.6px;font-weight:500;margin:0}.std-close{border:0;background:#edf1e7;border-radius:50%;width:29px;height:29px;flex-shrink:0;font-size:20px;line-height:20px}.std-head p{font-size:10px;line-height:1.5;color:#7c8774;margin:6px 0 0}
.std-tabs{margin:0 16px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;background:#ecf0e7;border:1px solid #e1e6db;padding:4px;border-radius:10px}.std-tabs button{border:0;border-radius:7px;padding:10px 5px;background:none;font-size:12px}.std-tabs button[aria-selected=true]{background:#365944;color:white;box-shadow:0 2px 5px #233a2520}
.std-scroll{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c1cbbb transparent;flex:1;min-height:0;padding:0 17px 18px}.std-scroll [hidden]{display:none!important}.std-shortcuts{display:flex;gap:5px;margin:13px 0 14px}.std-shortcuts button{flex:1;border:1px solid #dbe2d4;border-radius:7px;background:#f3f6ee;padding:8px 3px;font-size:10px}.std-shortcuts button:hover{background:#e4ecde}
.std-notice{font-size:10px;line-height:1.6;color:#777f6e;background:#eef2e9;border-radius:8px;padding:10px 11px;margin:10px 0}.std-notice strong{color:#53624b;font-weight:600}.std-notice.amber{background:#f6efdf;color:#8a744a}.std-notice.amber strong{color:#795f36}.std-notice.blue{background:#eaf0f2;color:#576e75}
.std-section{border-bottom:1px solid var(--std-line);padding:0}.std-section>summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;padding:16px 0;line-height:1.3}.std-section>summary::-webkit-details-marker{display:none}.std-section>summary:after{content:'+';font-size:18px;color:#8d9985;margin-left:auto}.std-section[open]>summary:after{content:'\2212'}.std-section>summary .std-number{font-size:10px;width:22px;height:22px;border:1px solid #d6decd;background:#eef2e8;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#738568;flex-shrink:0}.std-section>summary strong{display:block;font-size:12px;font-weight:600}.std-section>summary small{display:block;font-size:10px;font-weight:400;color:#849078;margin-top:4px;max-width:271px}.std-section .std-body{padding-bottom:17px}
.std-label{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;margin:13px 0 9px;color:#4a5c42;gap:7px}.std-source{border:0;padding:3px 0;background:none;color:#849375;font-size:9px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.std-body p{font-size:10px;line-height:1.6;color:#7c8673;margin:8px 0 10px}
.std-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.std-grid.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}.std-grid.cols5{grid-template-columns:repeat(5,minmax(0,1fr))}.std-grid.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}
.std-card{position:relative;border:1px solid #dce2d5;background:white;border-radius:9px;padding:5px 5px 7px;min-width:0;min-height:65px;text-align:center;font-size:10px;line-height:1.35;transition:border-color .12s,box-shadow .12s}.std-card:hover{border-color:#8aa27c}.std-card[aria-pressed=true]{border-color:#55754a;box-shadow:0 0 0 1px #55754a;background:#f0f5e9}.std-card[aria-pressed=true]:after{content:'\2713';position:absolute;right:3px;top:3px;border-radius:50%;width:15px;height:15px;background:#365944;color:#fff;font-size:10px;line-height:15px}.std-card .sample{display:block;width:100%;height:32px;border-radius:5px;margin-bottom:6px;border:1px solid #00000008;background-size:cover;background-position:center}.std-card img{display:block;object-fit:cover;width:100%;height:48px;border-radius:4px;margin-bottom:6px}.std-card.door img{height:70px;object-fit:contain;background:#fff}.std-card.wood img{height:56px;object-fit:cover}.std-card strong{font-weight:500;display:block}.std-card small{display:block;margin-top:3px;font-size:8px;color:#87947c}.std-card .premium{color:#9e793e}.std-card .visual{color:#7b8990}
.std-swatch-inline{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px;border:1px solid #0001}.std-two{display:grid;grid-template-columns:1fr 1fr;gap:9px}.std-field{display:block;font-size:10px;color:#75816b;margin:10px 0;line-height:1.5}.std-field select,.std-field input:not([type=color]):not([type=range]):not([type=checkbox]){display:block;width:100%;padding:10px 9px;border:1px solid #d7dfcf;border-radius:7px;background:#fff;font-size:11px;color:#3e5338;margin-top:5px;min-height:36px}.std-field input[type=color]{display:block;width:100%;height:35px;border:1px solid #d7dfcf;border-radius:7px;padding:3px;margin-top:5px;background:white}.std-field input[type=range]{width:100%;accent-color:#365944}.std-range-head{display:flex;justify-content:space-between;font-size:10px;color:#718165;margin-top:11px}.std-range-head strong{font-size:12px;color:#365944;font-weight:600}
.std-action{border:1px solid #d3dec8;background:#eff4e8;border-radius:7px;padding:9px 11px;font-size:10px;color:#46603c}.std-action.wide{width:100%;margin-top:10px}.std-action:hover{background:#e2ebd8}.std-action.dark{background:#365944;border-color:#365944;color:white}
.std-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;font-weight:600;cursor:pointer;margin:3px 0 10px;padding:10px;background:#eef3e8;border-radius:9px}.std-toggle input{appearance:none;width:35px;height:21px;border-radius:12px;background:#bdc6b6;position:relative;flex-shrink:0;cursor:pointer;transition:background .15s}.std-toggle input:before{content:'';position:absolute;width:15px;height:15px;border-radius:50%;background:white;left:3px;top:3px;box-shadow:0 1px 4px #0002;transition:transform .15s}.std-toggle input:checked{background:#365944}.std-toggle input:checked:before{transform:translateX(14px)}
.std-check{display:flex;gap:9px;align-items:center;font-size:11px;color:#63765a;margin:12px 0;line-height:1.5}.std-check input{accent-color:#365944}.std-disabled{opacity:.45;pointer-events:none}.std-inventory{margin:10px 0;border:1px solid #e0e5da;border-radius:9px;padding:5px 11px}.std-inventory>div{font-size:10px;line-height:1.5;padding:8px 0;border-bottom:1px solid #e6eadf}.std-inventory>div:last-child{border:0}.std-inventory b{font-weight:600;color:#49623f}.std-inventory small{display:block;color:#8a9480;font-size:9px;margin-top:3px}
.std-footer{padding:12px 16px;border-top:1px solid #dce2d6;background:#f5f8ee;flex-shrink:0}.std-saved{font-size:9px;color:#859378;display:flex;gap:6px;align-items:center;margin-bottom:8px}.std-saved:before{content:'';width:5px;height:5px;border-radius:50%;background:#648257}.std-footer-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}.std-footer-row button{font-size:11px;padding:10px}.std-summary-title{font-size:18px;font-weight:500;letter-spacing:-.3px;margin:19px 0 7px}.std-summary-group{margin-top:16px}.std-summary-group h4{font-size:10px;text-transform:uppercase;letter-spacing:1px;font-weight:600;color:#728466;margin:16px 0 7px}.std-summary-row{display:grid;grid-template-columns:1fr 1.5fr;gap:9px;font-size:10px;line-height:1.6;padding:8px 0;border-bottom:1px solid #e2e7dc}.std-summary-row span{color:#7e8a72}.std-summary-row b{font-weight:500;text-align:right;color:#41583b}.std-summary-row small{display:block;font-size:8px;color:#9b7945}
.std-export-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:16px}.std-export-grid button{border:1px solid #d5dfcd;background:#f2f6ec;padding:11px 7px;border-radius:8px;font-size:10px}.std-reset{color:#9c6852!important;background:#f7f0e8!important}.std-fine{font-size:9px!important;line-height:1.6!important;color:#949e89!important;margin:12px 0 0!important}
#stdCatalogDialog{width:min(800px,94vw);max-height:94dvh;border:1px solid #fff;border-radius:15px;background:#fafbf7;padding:15px;box-shadow:0 20px 70px #13271066;color:#36523d}#stdCatalogDialog::backdrop,#stdResetDialog::backdrop{background:#1f2e23a8;backdrop-filter:blur(3px)}.std-dialog-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}.std-dialog-head h3{margin:0;font-size:13px;font-weight:500}.std-dialog-head button{border:0;background:#e9efe1;padding:8px 11px;border-radius:7px;font-size:11px}#stdCatalogImage{display:block;max-width:100%;max-height:75dvh;object-fit:contain;margin:auto}#stdCatalogCaption{font-size:10px;color:#7c8871;line-height:1.5;margin:10px 0 0}.std-dialog-pager{display:flex;gap:7px;align-items:center;justify-content:space-between;margin-top:10px}.std-dialog-pager button{border:1px solid #d6dfcc;border-radius:7px;background:#edf3e5;padding:8px 11px;font-size:10px}
#stdResetDialog{width:min(390px,92vw);border:1px solid white;border-radius:16px;background:#fafbf7;padding:23px;color:#36523d}#stdResetDialog h3{font-size:19px;font-weight:500;margin:0 0 10px}#stdResetDialog p{font-size:12px;line-height:1.7;color:#7a866f}#stdResetDialog .std-two{margin-top:19px}
body.std-open #interiorLaunch{z-index:2}
@media(min-width:851px) and (max-width:1180px){body.std-open .compass,body.std-open #direction,body.std-open .help{display:none}body.std-open .tool{padding:9px 7px;font-size:10px}body.std-open .site-switch{font-size:9px}body.std-open .bottom{bottom:18px}body.std-open header .metrics{display:none!important}body.std-open #sunStamp{top:125px}body.std-open .interior-heading h2{font-size:17px}body.std-open .interior-heading .eyebrow{display:none}}
@media(max-width:850px){
 #standardsPanel{top:auto;left:0;right:0;bottom:0;width:100%;height:var(--std-sheet);border-radius:18px 18px 0 0}
 body.std-open #view,body.std-open #measure,body.std-open #sunOverlay{width:100%!important;height:calc(100% - var(--std-sheet))!important}
 body.std-open .bottom,body.std-open #interiorTools{left:50%!important;bottom:calc(var(--std-sheet) + 8px)!important;gap:0}
 body.std-open .site-controls,body.std-open .help,body.std-open #direction,body.std-open .compass{display:none}
 body.std-open .interior-heading{max-width:calc(100% - 126px)}body.std-open #walkPad{bottom:calc(var(--std-sheet) + 65px)!important}
 #standardsToggle{padding:8px 9px;font-size:10px;gap:4px;min-height:34px}.std-head{padding:12px 17px 9px}.std-head .std-kicker{font-size:8px}.std-head h2{font-size:18px}.std-head p{display:none}.std-head-row{margin-top:3px}.std-close{width:25px;height:25px}
 .std-tabs{margin:0 14px}.std-tabs button{padding:8px 4px;font-size:11px}.std-scroll{padding:0 16px 18px}.std-shortcuts{margin:9px 0}.std-footer{padding:8px 15px}.std-saved{margin-bottom:5px;font-size:8px}.std-footer-row button{padding:8px;font-size:10px}.std-section>summary{padding:13px 0}
 .std-card.door img{height:62px}.std-notice{font-size:9px;padding:8px 10px}.std-card{font-size:9px}.std-section>summary small{max-width:calc(100vw - 115px)}body.std-open header h1{font-size:23px}body.std-open #interiorLaunch{top:139px;font-size:10px;padding:8px 10px}
}
@media(max-width:530px){#standardsToggle .std-toggle-word{display:none}#standardsToggle{width:34px;justify-content:center;padding:0}.topright{gap:5px!important}.topright #infoButton{display:none}.std-head .std-kicker{display:none}.std-head-row{margin:0}.std-head{padding:11px 16px 8px}.std-head h2{font-size:17px}body.std-open #sunStamp{top:98px;font-size:9px}body.std-open .interior-heading .eyebrow{font-size:6px;letter-spacing:.6px}}
@media(max-height:550px) and (max-width:850px){:root{--std-side:340px}#standardsPanel{left:auto;right:8px;top:60px;bottom:8px;width:324px;height:auto;border-radius:12px}body.std-open #view,body.std-open #sunOverlay{width:calc(100% - 340px)!important;height:100%!important}body.std-open .bottom,body.std-open #interiorTools{left:calc((100% - 340px)/2)!important;bottom:10px!important}.std-head{padding:9px 14px}.std-head h2{font-size:16px}.std-footer{display:none}body.std-open #walkPad{bottom:60px!important}body.std-open .interior-heading{max-width:calc(100% - 370px)}}

@media(max-width:850px){body.std-open header .sub,body.std-open #sunStamp,body.std-open #interiorLaunch{display:none!important}body.std-open header h1{font-size:19px;line-height:1.2;max-width:calc(100vw - 116px);margin-top:9px}body.std-open header .eyebrow{font-size:7px;letter-spacing:1.3px}body.std-open #toast{top:73px;max-width:90%;font-size:10px}}