/* Gravora-Studios: local fonts, fast transitions, responsive studio. */
:root{color-scheme:light;--ink:#172332;--muted:#65717d;--paper:#f3f5f6;--panel:#fff;--line:#e0e5e8;--accent:#956337;--accent-soft:#f8efe5;--dark:#111e2c;--gold:#e8bd8a;font-family:"Segoe UI Variable","Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif;font-size:16px;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:280px}button,input,select,textarea{font:inherit}button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}button{display:inline-flex;justify-content:center;align-items:center;gap:7px;cursor:pointer;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);min-height:44px;padding:10px 13px;font-size:.8rem;font-weight:600;line-height:1.35;transition:background-color 160ms,border-color 160ms,color 160ms,transform 160ms,box-shadow 160ms;touch-action:manipulation}button:active:not(:disabled){transform:scale(.97)}button:disabled{opacity:.46;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #b17844;outline-offset:3px}input:not([type=range]):not([type=checkbox]),select,textarea{width:100%;min-width:0;background:#fbfcfd;color:var(--ink);border:1px solid #dbe2e7;border-radius:9px;padding:11px 12px;min-height:44px;font-size:.87rem}textarea{resize:vertical;line-height:1.5}input[type=number]{font-variant-numeric:tabular-nums}select{cursor:pointer}input[type=range]{width:100%;height:32px;margin:0 0 13px;accent-color:var(--accent);cursor:pointer}input[type=checkbox]{appearance:none;width:36px;height:22px;border-radius:20px;background:#bdc6ce;position:relative;flex-shrink:0;cursor:pointer;transition:background-color 180ms}input[type=checkbox]::before{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;box-shadow:0 1px 3px #17233224;transition:transform 180ms}input[type=checkbox]:checked{background:var(--accent)}input[type=checkbox]:checked::before{transform:translateX(14px)}label{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.8rem;font-weight:500;margin:16px 0 8px;line-height:1.4}output{color:var(--accent);font-size:.8rem;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}h1,h2,h3,p{margin-top:0}h1{font-size:1.65rem;font-weight:650;line-height:1.17;letter-spacing:-.055em;margin-bottom:10px}h2{font-size:.91rem;font-weight:650;line-height:1.35;margin-bottom:12px;letter-spacing:-.018em}h3{font-size:1.08rem;letter-spacing:-.03em}p{line-height:1.6}a{color:var(--accent);text-underline-offset:3px}.eyebrow{display:block;color:var(--muted);font-size:.6rem;font-weight:750;letter-spacing:.15em;line-height:1.6}
.topbar{position:relative;z-index:10;min-height:88px;background:var(--dark);color:#f6f7f8;display:flex;align-items:center;padding:14px 24px;gap:24px;border-bottom:1px solid #293543}.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;color:inherit;text-decoration:none;font-size:.9rem;font-weight:650;letter-spacing:.07em}.brand img,.brand-mark{width:44px;height:44px;flex:0 0 44px;object-fit:contain;border-radius:12px}.brand-mark{display:grid;place-items:center;background:#233241;border:1px solid #4d493f;color:var(--gold)}.brand-mark svg{width:28px;height:28px}.brand>svg.brand-mark{padding:8px}.brand small{display:block;font-size:.52rem;font-weight:500;letter-spacing:.2em;margin-top:5px;color:#a6b2bf}.project-name{border-left:1px solid #36424f;padding-left:22px;width:200px;min-width:135px}.project-name .eyebrow{color:#93a2b1;font-size:.55rem}.project-name input{background:transparent!important;border:0!important;border-radius:3px!important;padding:4px 0!important;color:#f6f7f8!important;min-height:28px!important;font-size:.88rem!important}.header-actions{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-left:auto}.header-actions button{border-color:#42505e;color:#eef2f5;background:#1b2a39;font-size:.75rem;white-space:nowrap}.header-actions .light-button{background:var(--gold);color:#302418;border-color:var(--gold)}.status{display:inline-flex;align-items:center;gap:7px;font-size:.65rem;color:#a8b6c4;line-height:1.4;max-width:145px}.status::before{content:"";width:6px;height:6px;flex:0 0 6px;background:#93b59f;border-radius:50%}.app-actions{display:flex;align-items:center;gap:8px}.connection-status{display:inline-flex;align-items:center;gap:6px;color:#a8b6c4;font-size:.65rem;white-space:nowrap}.connection-status::before{content:"";width:5px;height:5px;border-radius:50%;background:#8eb49b}.connection-status.offline::before{background:var(--gold)}
.workspace{display:grid;grid-template-columns:292px minmax(350px,1fr) 276px;min-height:calc(100dvh - 88px)}.left-panel{min-width:0;border-right:1px solid var(--line);background:var(--panel)}.tabs{display:flex;border-bottom:1px solid var(--line);padding:16px 17px 13px;gap:4px}.tabs button{flex:1;min-width:0;flex-direction:column;gap:4px;border:1px solid transparent;background:transparent;border-radius:9px;padding:8px 3px;color:#7b8691;font-size:.59rem}.tabs button span{font-size:.75rem;font-weight:650}.tabs button.active{color:var(--accent);background:var(--accent-soft);border-color:#eedecb}.panel{padding:25px 22px 28px}.panel.active{animation:panel-enter 220ms ease both}.panel-heading p{font-size:.79rem;color:var(--muted);margin-bottom:22px}.panel-heading .eyebrow{margin-bottom:11px;color:var(--accent)}.materials{display:grid;grid-template-columns:1fr 1fr;gap:9px}.material-card{display:block;padding:8px;text-align:left;position:relative;border:1px solid var(--line);min-height:99px;font-weight:500;overflow:hidden}.material-card.active{border-color:#b17c49;background:#fffaf4;box-shadow:0 0 0 1px #b17c49}.material-card:last-child{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-start;gap:12px;min-height:70px}.material-card b{font-size:.8rem;display:block;margin-top:6px;font-weight:650}.material-card small{color:var(--muted);font-size:.62rem}.swatch{display:block;height:34px;border-radius:5px;background-color:#c6a67e;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px #0000000a}.material-card:last-child .swatch{width:70px;height:47px;flex:0 0 70px}.material-card:last-child b{margin-top:0}.material-card.active::after{content:"✓";display:grid;place-items:center;position:absolute;top:12px;right:12px;width:18px;height:18px;color:#fff;background:var(--accent);border:1px solid #fff8;border-radius:50%;font-size:.65rem}.material-card:last-child.active::after{top:50%;transform:translateY(-50%)}.section-rule{border-top:1px solid var(--line);margin:25px 0 20px}.segmented{display:flex;background:#edf0f2;border:1px solid #e3e7ea;border-radius:10px;padding:3px;gap:3px}.segmented button{flex:1;border:0;border-radius:7px;background:transparent;padding:8px 10px;min-height:38px;font-size:.74rem;font-weight:550;white-space:nowrap;color:#63707e}.segmented button.active{background:var(--panel);color:var(--ink);box-shadow:0 2px 5px #1828390c}.panel>.segmented{margin-top:10px}.specs{margin-top:15px;padding:7px 0}.specs>div{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.72rem;padding:7px 0}.specs span{color:var(--muted)}.specs b{font-weight:550;text-align:right}.quiet{color:var(--muted);font-size:.7rem;line-height:1.6;margin:16px 0 0}.next-button{display:flex;width:100%;justify-content:space-between;margin-top:23px;background:var(--dark);border-color:var(--dark);color:#fff;padding:12px 14px}.next-button span,.export-button span{transition:transform 160ms;font-size:1rem}
.preview-panel{display:flex;flex-direction:column;min-width:0;background:#edf0f2}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 8px;gap:10px}.compact{font-size:.7rem;margin:0;gap:8px;min-height:44px;white-space:nowrap}.preview-toolbar .segmented{background:#e0e6ea;border-color:#dbe2e7}.preview-toolbar .segmented button{font-size:.72rem}#viewport{position:relative;flex:1;min-height:440px;overflow:hidden;isolation:isolate;touch-action:none}#viewport canvas{width:100%;height:100%;position:absolute;inset:0;display:block;outline:none}#loading{position:absolute;left:24px;top:42%;right:24px;text-align:center;color:var(--muted);z-index:9;font-size:.85rem;line-height:1.7}.board-label{position:absolute;top:24px;left:27px;pointer-events:none;z-index:2}.board-label .eyebrow{font-size:.56rem;color:#64707a}.board-label h2{font-size:1.8rem;font-weight:600;letter-spacing:-.045em;margin:6px 0}.board-label p{font-size:.72rem;color:var(--muted)}#dimensionOverlay{pointer-events:none;position:absolute;inset:0;z-index:2}#dimensionOverlay span{position:absolute;padding:5px 9px;color:#546271;font-size:.66rem;font-weight:600;background:#f8fafbde;border:1px solid #d5dce480;border-radius:5px;transform:translate(-50%,-50%);white-space:nowrap;font-variant-numeric:tabular-nums}.view-controls{position:absolute;bottom:43px;left:50%;transform:translateX(-50%);display:flex;background:#ffffffef;border:1px solid #dbe2e7;box-shadow:0 4px 16px #1723320a;padding:4px;border-radius:11px;z-index:3}.view-controls button{background:transparent;color:#586674;font-size:.67rem;min-height:39px;padding:6px 10px;border:0;border-radius:7px}.view-controls button.active{color:var(--accent);background:var(--accent-soft)}.view-controls #resetView{width:39px;font-size:1.2rem;padding:3px}.preview-hint{position:absolute;bottom:17px;width:100%;padding:0 15px;text-align:center;font-size:.65rem;color:#677482;pointer-events:none}.simulation-bar{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:20px 22px;background:#fafcfc;border-top:1px solid #dce3e7}.simulation-info{flex:1;min-width:125px}.simulation-info .eyebrow{font-size:.55rem}.simulation-info b{display:block;font-size:.77rem;font-weight:550;margin-top:4px}.progress-track{height:3px;background:#e2e8eb;border-radius:3px;overflow:hidden;margin-top:10px;max-width:250px}#progressFill{width:0;height:100%;background:var(--accent)}.primary-button{background:var(--dark);color:#fff;border-color:var(--dark);padding:12px 15px;min-height:46px}.primary-button span{font-size:1rem}.preview-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 10px;padding:12px 22px;font-size:.59rem;background:#fafcfc;color:var(--muted);border-top:1px solid #e8edef;line-height:1.4}#bedInfo{color:#4d6b59}
.right-panel{min-width:0;background:var(--panel);border-left:1px solid var(--line);padding:27px 21px 24px}.price-heading .eyebrow{color:var(--accent)}.price-heading h2{font-weight:650;font-size:1.25rem;line-height:1.2;letter-spacing:-.045em;margin-top:10px;margin-bottom:22px}.cost-breakdown{margin-top:20px}.cost-row{display:flex;justify-content:space-between;gap:7px;padding:8px 0;font-size:.72rem}.cost-row span:first-child{color:var(--muted)}.cost-row b{font-weight:550;white-space:nowrap;font-variant-numeric:tabular-nums}.total-line{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.75rem;padding:16px 0 5px;border-top:1px solid var(--line);margin-top:9px}.total-line b{white-space:nowrap;font-variant-numeric:tabular-nums}.margin-label{font-size:.76rem;margin-top:24px}.price-card{background:var(--dark);color:#fff;padding:20px 18px;border-radius:12px;border:1px solid #233649;box-shadow:0 7px 20px #17233212}.price-card>span{font-size:.68rem;color:#b5c0cb}.price-card strong{color:var(--gold);font-size:2.25rem;font-weight:600;line-height:1.15;display:block;margin:11px 0 16px;letter-spacing:-.065em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.price-card>div{display:flex;flex-direction:column;gap:7px;font-size:.65rem;color:#bfccd6}.price-note{font-size:.61rem;margin-top:12px}.assumptions{margin-top:21px;border-bottom:1px solid var(--line);padding-bottom:17px}.assumptions summary{font-size:.73rem;cursor:pointer;font-weight:600;min-height:44px;padding:13px 0}.assumptions[open] summary{color:var(--accent)}.assumptions .quiet{font-size:.68rem}.assumptions label{font-size:.71rem}.time-card{padding:21px 0}.time-card span{font-size:.7rem;color:var(--muted);display:block}.time-card b{display:block;font-weight:600;font-size:1.2rem;margin:8px 0;font-variant-numeric:tabular-nums}.time-card small{font-size:.62rem;color:var(--muted)}.export-button{width:100%;display:flex;justify-content:space-between;align-items:center;background:var(--accent);border-color:var(--accent);color:#fff;padding:13px}.centered{text-align:center;margin-top:11px;font-size:.63rem}

/* Editor controls and motif rows. */
[hidden]{display:none!important}
label,.margin-label,.assumptions label,.compact,output{font-size:.875rem}
.tabs button span,.material-card b,.panel-heading p{font-size:.875rem}
.quiet,.material-card small,.specs>div,.cost-row,.preview-footer,.price-note,.time-card small,.centered{font-size:.75rem}
.full-width{width:100%;margin-top:10px}.spaced{margin-top:24px}
.upload{display:flex;flex-direction:column;gap:8px;width:100%;padding:22px 12px;border:1px dashed #b9a087;background:#fcf8f3;text-align:center}.upload b{font-size:.875rem}.upload span{font-size:.72rem;font-weight:400;color:var(--muted);line-height:1.6}
.field-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.field-pair>div{min-width:0}.field-pair label{align-items:flex-start;font-size:.875rem}
.two-buttons{display:flex;gap:8px;margin-top:16px}.two-buttons button{flex:1;min-width:0}.danger{color:#9d413a;border-color:#e7cfcb;background:#fffafa}
.switch-line{justify-content:space-between;line-height:1.5}.switch-line input{margin:0}
.notice{padding:15px;background:var(--accent-soft);border:1px solid #ead8c3;border-radius:10px;font-size:.8rem;line-height:1.6}.notice b,.notice span{display:block}.notice b{margin-bottom:5px;color:#79522f}.notice span{color:#6c6257}
.text-link{display:block;font-size:.8rem;line-height:1.6;margin-top:12px}
.object-list{display:flex;flex-direction:column;gap:8px}.object-list>.quiet{margin:0;padding:15px 12px;background:#f4f6f8;border:1px dashed var(--line);border-radius:9px}
.motif-card{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#a74840}.motif-card.active{border-color:#ac7642;box-shadow:0 0 0 1px #ac7642}
.motif-card-front{position:relative;z-index:1;display:flex;align-items:stretch;min-width:0;background:#fff;transition:transform 200ms ease}.motif-card.active .motif-card-front{background:#fff8ef}.motif-card.swiping .motif-card-front{transition:none}
.object-select{flex:1;justify-content:flex-start;text-align:left;min-width:0;min-height:58px;padding:10px;border:0;background:transparent;border-radius:0;gap:10px;touch-action:pan-y;font-size:.875rem}.object-select:active:not(:disabled){transform:none}.object-select:focus-visible,.object-delete:focus-visible{outline-offset:-4px}
.object-icon{display:grid;place-items:center;flex:0 0 31px;height:34px;background:#f0e6db;border-radius:6px;color:#8c5c30;font-size:1rem;font-weight:650}.object-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.object-delete{align-self:center;flex:0 0 44px;width:44px;height:44px;margin-right:3px;padding:8px;border:0;background:transparent;color:#8f5b54}.object-swipe-delete{position:absolute;inset:0 0 0 auto;flex-direction:column;width:92px;gap:3px;border:0;border-radius:0;background:#a74840;color:#fff;font-size:.75rem;padding:6px}.object-swipe-delete:focus-visible{outline-color:#fff;outline-offset:-4px}
.bounds-warning{position:absolute;z-index:4;left:18px;right:18px;bottom:94px;margin:auto;max-width:440px;border:1px solid #dfb886;border-radius:9px;padding:10px 12px;background:#fff6e9f2;color:#795028;font-size:.8rem;line-height:1.5;text-align:center;pointer-events:none}
.preview-footer .connection-status{color:#65717d;font-size:.75rem}.connection-status[data-state=offline]::before{background:#b58046}

/* Native dialogs stay keyboard-accessible and scroll within the screen. */
dialog{width:min(900px,calc(100% - 40px));max-height:calc(100dvh - 40px);margin:auto;padding:28px;border:1px solid #dbe2e7;border-radius:18px;background:var(--panel);color:var(--ink);box-shadow:0 24px 100px #08142140;overflow:auto;overscroll-behavior:contain}dialog::backdrop{background:#081421a6;backdrop-filter:blur(4px)}dialog[open]{animation:dialog-enter 180ms ease both}
.dialog-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px}.dialog-heading>div{min-width:0}.dialog-heading .eyebrow{color:var(--accent);margin-bottom:9px}.dialog-heading h2{font-size:1.5rem;line-height:1.25;letter-spacing:-.035em;margin:0}.dialog-heading>button{flex:0 0 44px;width:44px;height:44px;padding:8px;background:#f4f6f8;border-color:#e7ebee}
.export-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.export-grid section{display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:18px;border:1px solid var(--line);border-radius:12px;background:#fbfcfd}.export-symbol{font-size:1.8rem;color:var(--accent);margin-bottom:17px;line-height:1}.export-grid h3{margin-bottom:11px}.export-grid p{font-size:.875rem;color:var(--muted);margin-bottom:16px}.export-grid button{width:100%;margin-top:8px;font-size:.8rem}.export-grid small{display:block;margin-top:13px;color:var(--muted);font-size:.75rem;line-height:1.6}.export-grid .switch-line{font-size:.8rem;align-items:flex-start;margin:0 0 8px}
.install-dialog{max-width:560px}.install-dialog>p{font-size:.9rem}.install-dialog>.quiet{font-size:.8rem}.install-instructions{padding:18px;border:1px solid #ead8c3;border-radius:11px;background:var(--accent-soft);font-size:.9rem;line-height:1.75}.install-dialog .app-actions{margin-top:18px}

.mobile-nav{display:none}
#toast{position:fixed;z-index:40;left:50%;bottom:100px;transform:translate(-50%,12px);width:max-content;max-width:min(560px,calc(100% - 32px));padding:13px 18px;border:1px solid #3d4b59;border-radius:11px;background:#172635;color:#f8fafb;box-shadow:0 6px 30px #0f1e3030;font-size:.875rem;line-height:1.5;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 180ms,transform 180ms,visibility 180ms}#toast.show{transform:translate(-50%,0);opacity:1;visibility:visible}
.undo-bar{position:fixed;z-index:35;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:min(600px,calc(100% - 32px));width:max-content;padding:10px 12px 10px 18px;background:var(--dark);color:#f8fafb;border:1px solid #3d4b59;border-radius:12px;box-shadow:0 6px 30px #0f1e3030;font-size:.875rem;line-height:1.5}.undo-bar>span{min-width:0;overflow-wrap:anywhere}.undo-bar button{flex-shrink:0;background:#2d3c4a;color:var(--gold);border-color:#56606a;font-size:.8rem}
@media(hover:hover){button:hover:not(:disabled){border-color:#b5a18b}.next-button:hover,.primary-button:hover{background:#24374a}.next-button:hover span,.export-button:hover span{transform:translateX(3px)}.object-delete:hover,.danger:hover{color:#872f29;background:#fbeae7}.object-select:hover{background:#95633709}.mobile-nav button:hover{background:var(--accent-soft)}}
@keyframes panel-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes dialog-enter{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}

@media(max-width:1150px) and (min-width:761px){
 .topbar{flex-wrap:wrap;gap:12px 20px;padding:14px 20px}.brand{margin-right:auto}.project-name{width:210px}.header-actions{flex-basis:100%;justify-content:flex-end}.header-actions .status{margin-right:auto;max-width:none}
 .workspace{grid-template-columns:270px minmax(0,1fr)}.preview-panel{min-height:650px}.preview-toolbar{padding:18px 16px 8px;gap:6px}.preview-toolbar .segmented button{padding:8px}.simulation-bar{padding:18px 16px;gap:12px}.right-panel{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:28px max(28px,calc((100vw - 600px)/2)) 40px}.right-panel .price-heading h2{font-size:1.5rem}.right-panel .cost-row{font-size:.875rem}
}
@media(max-width:760px){
 body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}.topbar{min-height:0;flex-wrap:wrap;padding:13px 15px 12px;gap:12px;align-items:center}.brand{gap:8px;font-size:.73rem;letter-spacing:.055em;flex:1}.brand-mark,.brand img{width:37px;height:37px;flex-basis:37px;border-radius:10px}.brand>svg.brand-mark{padding:5px}.brand small{font-size:.47rem;letter-spacing:.12em;margin-top:4px}.project-name{width:110px;min-width:100px;padding-left:12px}.project-name .eyebrow{font-size:.52rem}.project-name input{font-size:.78rem!important;max-width:100%}.header-actions{width:100%;margin:0;gap:6px;justify-content:stretch;flex-wrap:wrap}.header-actions button{flex:1;min-height:40px;padding:8px 7px;font-size:.7rem}.header-actions .status{order:5;flex-basis:100%;max-width:none;justify-content:center;min-height:16px;font-size:.66rem}.header-actions #updateApp{flex-basis:100%}
 .workspace{display:block;min-height:calc(100dvh - 224px)}.left-panel,.right-panel{border:0}.left-panel,.preview-panel,.right-panel{display:none}body[data-mobile-view=preview] .preview-panel{display:flex}body[data-mobile-view=edit] .left-panel,body[data-mobile-view=price] .right-panel{display:block}
 .tabs{padding:14px 15px;gap:7px;position:sticky;top:0;z-index:6;background:var(--panel)}.tabs button{flex-direction:row;gap:7px;min-height:46px;font-size:.7rem}.tabs button span{font-size:.875rem}.panel{padding:24px 22px 30px}.panel-heading p{margin-bottom:20px}.panel-heading h1{font-size:1.8rem}.materials{gap:12px}.material-card{min-height:119px;padding:10px}.swatch{height:49px}.material-card small{font-size:.75rem}.material-card:last-child{min-height:80px}.material-card:last-child .swatch{height:56px;width:86px;flex-basis:86px}
 input:not([type=range]):not([type=checkbox]),select,textarea{font-size:1rem}input[type=range]{height:38px;margin-bottom:12px}label{margin-top:19px}.full-width,.upload,.two-buttons button,.next-button{font-size:.875rem}.object-select{min-height:64px}.motif-card{border-radius:11px}
 .preview-panel{min-height:calc(100dvh - 224px)}.preview-toolbar{padding:13px 15px 4px;gap:8px}.preview-toolbar .segmented{flex:1}.preview-toolbar .segmented button{font-size:.75rem;padding:8px 7px;min-height:40px}.preview-toolbar .compact{font-size:.78rem;gap:6px}.preview-toolbar input[type=checkbox]{width:32px;height:22px}.preview-toolbar input[type=checkbox]:checked::before{transform:translateX(10px)}
 #viewport{flex:1;min-height:360px;height:clamp(360px,55dvh,570px)}.board-label{left:20px;top:18px}.board-label h2{font-size:1.6rem}.board-label p{font-size:.75rem}.board-label .eyebrow{font-size:.61rem}.view-controls{bottom:41px;white-space:nowrap;max-width:calc(100% - 24px)}.view-controls button{min-height:40px;font-size:.73rem;padding:7px 11px}.preview-hint{font-size:.69rem;bottom:15px}#dimensionOverlay span{font-size:.72rem;padding:4px 7px}.bounds-warning{font-size:.75rem;bottom:96px}
 .simulation-bar{padding:16px 18px;gap:12px}.simulation-info{min-width:125px}.simulation-info b{font-size:.82rem}.simulation-info .eyebrow{font-size:.61rem}.simulation-bar .primary-button{font-size:.8rem;padding:11px}.preview-footer{padding:12px 18px;gap:8px 14px;font-size:.7rem}.preview-footer .connection-status{font-size:.7rem}
 .right-panel{padding:28px 22px 32px}.price-heading h2{font-size:1.65rem;margin-bottom:24px}.cost-row{font-size:.875rem;padding:10px 0}.total-line{font-size:.875rem}.price-card{padding:23px}.price-card strong{font-size:2.8rem}.price-card>span,.price-card>div{font-size:.8rem}.price-note{font-size:.75rem}.assumptions summary{font-size:.875rem}.assumptions .quiet{font-size:.75rem}.time-card span,.time-card small{font-size:.8rem}.export-button{font-size:.9rem;min-height:49px}
 .mobile-nav{display:flex;position:fixed;z-index:25;bottom:0;left:0;right:0;padding:6px 12px calc(6px + env(safe-area-inset-bottom,0px));gap:6px;min-height:72px;background:#fffffff5;border-top:1px solid var(--line);box-shadow:0 -4px 24px #1723320c;backdrop-filter:blur(12px)}.mobile-nav button{flex:1;min-width:0;min-height:59px;flex-direction:column;gap:2px;padding:5px 6px;font-size:.73rem;background:transparent;border-color:transparent;color:var(--muted)}.mobile-nav button span{font-size:1.25rem;line-height:1.15}.mobile-nav button.active{background:var(--accent-soft);color:#81542d;border-color:#ebdbc7}
 dialog{width:calc(100% - 24px);max-height:calc(100dvh - 32px);padding:22px 18px;border-radius:15px}.dialog-heading{gap:10px;margin-bottom:20px}.dialog-heading h2{font-size:1.25rem}.dialog-heading .eyebrow{font-size:.6rem}.export-grid{grid-template-columns:1fr;gap:13px}.export-grid section{padding:19px}.export-symbol{margin-bottom:12px}.export-grid button{font-size:.875rem}.export-grid p{margin-bottom:10px}
 .undo-bar{bottom:calc(84px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 24px);gap:10px;padding:10px 10px 10px 14px;font-size:.8rem}.undo-bar button{font-size:.75rem}#toast{bottom:calc(168px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 24px);font-size:.8rem;padding:12px 15px}
}
@media(max-width:359px){.topbar{padding-inline:10px;gap:9px}.brand{font-size:.65rem;gap:6px}.brand-mark{width:32px;height:32px;flex-basis:32px}.brand small{font-size:.42rem}.project-name{width:95px;min-width:90px;padding-left:8px}.header-actions button{font-size:.65rem;padding-inline:5px}.panel,.right-panel{padding-inline:17px}.preview-toolbar{padding-inline:10px}.preview-toolbar .segmented button{font-size:.7rem;padding-inline:5px}.preview-toolbar .compact{font-size:.7rem}.simulation-bar{padding-inline:14px}.simulation-bar .primary-button{width:100%}.view-controls button{padding-inline:9px}.mobile-nav{padding-inline:7px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* One continuous design panel; preview remains in view on desktop. */
.design-heading{padding:26px 22px 20px;border-bottom:1px solid var(--line);background:var(--accent-soft)}
.design-heading h1{margin:7px 0 9px;font-size:1.8rem}.design-heading p{font-size:.85rem;color:var(--muted);margin:0}
.left-panel>.panel+.panel{border-top:1px solid var(--line)}.panel-heading h2{font-size:1.35rem;letter-spacing:-.035em}
.auto-toggle{margin-top:0}.auto-card{padding:15px;border:1px solid #d8e4db;border-radius:11px;background:#f2f7f3;font-size:.85rem;line-height:1.6}
.auto-card b{color:#355c42}.auto-card p{margin:7px 0 10px}.auto-card small{display:block;color:var(--muted);font-size:.75rem}
input[type=range]:disabled{opacity:.65;cursor:default}.margin-help{margin:0 0 16px}
@media(min-width:761px){.workspace{align-items:start}.preview-panel{position:sticky;top:0;height:100dvh;max-height:1000px}.right-panel{min-height:calc(100dvh - 88px)}}

/* Local image optimization feedback, including persistent validation errors. */
.upload-status{padding:14px;margin:10px 0 16px;border:1px solid var(--line,#ddd);border-radius:12px;overflow-wrap:anywhere}
.upload-status progress{width:100%;height:10px;accent-color:#a56b42}
.upload-status p{font-size:12px;line-height:1.5;margin:8px 0}
.upload-status[data-state="error"]{border-color:#b34040}
.upload-status[data-state="error"] p{color:#9b2525}
.upload-status[data-state="error"] progress{display:none}