:root {
    --ink: #111510;
    --paper: #ece9e1;
    --muted: #8e9487;
    --paper-muted: #5b644e;
    --gold: #bda67e;
    --line: #cfcec1;
    --serif: Georgia, 'Times New Roman', serif;
    --sans: Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, canvas:focus-visible, input:focus-visible, [tabindex="-1"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.component-panel:focus-visible, .component-panel :focus-visible, .summary-dialog :focus-visible { outline-color: #6e5835; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.04em; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
::selection { background: var(--gold); color: var(--ink); }
.eyebrow { font-size: 8px; line-height: 1.7; letter-spacing: .2em; font-weight: 400; }
.studio-header { height: 86px; padding: 0 3.5%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ffffff1c; }
.wordmark { font-size: 26px; letter-spacing: .18em; line-height: 1; }
.wordmark > span { color: var(--gold); }
.wordmark small { display: block; color: #a8ad9e; font-size: 6px; letter-spacing: .32em; margin-top: 10px; }
.studio-name { display: flex; align-items: center; gap: 20px; font-size: 8px; letter-spacing: .21em; color: #b2b5aa; }
.studio-name i { display: block; width: 30px; height: 1px; background: #8c8068; }
.return-link { font-size: 9px; letter-spacing: .1em; color: #c7c9bd; }
.return-link span { color: var(--gold); margin-left: 20px; font-size: 16px; }
.studio { display: grid; grid-template-columns: 1.37fr 1fr; min-height: 560px; height: calc(100svh - 190px); max-height: 1100px; }
.atelier { position: relative; overflow: hidden; min-width: 0; background: radial-gradient(ellipse at 50% 73%, #303729 0, #161c14 42%, #111510 80%); }
.atelier-heading { position: absolute; top: 40px; left: 7%; z-index: 2; pointer-events: none; }
.atelier-heading .eyebrow { color: var(--gold); margin-bottom: 14px; }
h1 { font-size: clamp(35px, 3.1vw, 54px); line-height: 1.08; }
h1 em { color: #c9b995; font-weight: 400; }
.edition-label { color: #999f90; font-size: 7px; letter-spacing: .16em; margin-top: 17px; }
.scene { position: absolute; inset: 5px 0 110px; touch-action: pan-y; }
.scene canvas { display: block; }
.scene-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; color: #b9beaf; }
.scene-loading > span { width: 20px; height: 20px; border: 1px solid #c1ac7c55; border-top-color: var(--gold); border-radius: 50%; animation: turn 1.4s linear infinite; }
.scene-loading p { font-size: 10px; letter-spacing: .09em; }
@keyframes turn { to { transform: rotate(360deg); } }
.scene-fallback { width: 100%; height: 100%; object-fit: cover; object-position: 80% center; opacity: .75; }
.scene-caption { position: absolute; bottom: 127px; left: 7%; z-index: 2; display: flex; align-items: center; gap: 12px; pointer-events: none; }
.caption-rule { width: 25px; height: 1px; background: var(--gold); }
.scene-caption p { font-size: 6px; line-height: 1.9; letter-spacing: .12em; color: #c2c3b5; }
.scene-caption p span { color: #bac2b0; letter-spacing: .015em; font-size: 7px; }
.camera-tools { position: absolute; right: 5%; top: 33px; display: flex; align-items: center; gap: 4px; z-index: 3; padding: 5px; border: 1px solid #ffffff1c; background: #12180f88; }
.camera-tools button { border: 0; background: none; color: #afb4a4; min-height: 30px; padding: 5px 10px; font-size: 9px; }
.camera-tools button[aria-pressed="true"] { color: #e5d4ad; background: #ffffff0d; }
.camera-tools button:first-child { font-family: var(--serif); font-size: 20px; }
.camera-tools button:last-child { font-size: 20px; }
.atelier-controls { position: absolute; bottom: 0; left: 6%; right: 6%; border-top: 1px solid #ffffff1f; padding: 22px 0 25px; display: flex; align-items: center; justify-content: space-between; gap: 17px; }
.atelier-controls legend { font-size: 7px; letter-spacing: .15em; color: #b4beaa; margin-bottom: 12px; }
.finish-controls > div, .light-controls > div { display: flex; align-items: center; gap: 7px; }
.finish { width: 26px; height: 26px; border: 1px solid transparent; padding: 4px; border-radius: 50%; background: none; }
.finish[aria-pressed="true"] { border-color: var(--gold); }
.finish > span { display: block; height: 16px; width: 16px; border-radius: 50%; border: 1px solid #8a8c82; }
.finish.graphite > span { background: #242a23; }
.finish.ivory > span { background: #e8e4d9; }
#finish-name { font-size: 8px; color: #d0d0c0; margin-left: 3px; }
.light-controls button { font-size: 8px; color: #b4beaa; padding: 5px 0; margin-right: 7px; border: 0; background: none; }
.light-controls button[aria-pressed="true"] { color: #dfcfaa; }
.exploded-button { background: none; color: #b6bda9; font-size: 8px; border: 1px solid #ffffff26; padding: 10px 12px; margin-top: 18px; white-space: nowrap; }
.exploded-button > span { font-size: 15px; color: var(--gold); margin-right: 5px; }
.exploded-button[aria-pressed="true"] { border-color: #b9a378; color: #dfcfaa; }
.component-panel { background: var(--paper); color: var(--ink); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.panel-top { padding: 31px 8% 23px; display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.panel-top .eyebrow { color: #6e6047; margin-bottom: 8px; }
.panel-top h2 { font-size: clamp(24px, 2.2vw, 34px); }
.minimal-button { border: 0; background: none; color: var(--paper-muted); border-bottom: 1px solid #a9a48e; padding: 0 0 5px; font-size: 8px; white-space: nowrap; margin-bottom: 3px; }
.studio-notice { display: flex; align-items: center; gap: 8px; padding: 10px 8%; background: #e3e0d5; font-size: 8px; color: #5d6254; letter-spacing: .02em; }
.notice-dot { width: 4px; height: 4px; background: #8f7952; border-radius: 50%; flex-shrink: 0; }
.studio-notice p span { color: var(--paper-muted); }
.step-tabs { display: flex; padding: 17px 8% 16px; gap: 7px; border-bottom: 1px solid var(--line); overflow-x: auto; flex-shrink: 0; }
.step-tabs button { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; border: 1px solid #cdccbe; background: none; color: var(--paper-muted); width: 32px; height: 32px; font-size: 9px; transition: background .15s; }
.step-tabs button[aria-current="step"] { background: #252d21; color: #efe6d1; border-color: #252d21; }
.step-tabs button.is-visited:not([aria-current="step"]) { border-color: #8d9780; color: #4a593d; }
.step-tabs button:hover { border-color: #6b775e; }
.part-picker { padding: 25px 8% 10px; overflow-y: auto; min-height: 150px; flex: 1; scrollbar-width: thin; scrollbar-color: #bfc0af transparent; }
.category-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
#step-number { color: #6e6047; margin-bottom: 9px; font-size: 7px; }
.category-heading h3 { font-size: 31px; line-height: 1.1; }
.category-noun { font-size: 7px; letter-spacing: .15em; color: var(--paper-muted); margin-bottom: 3px; }
.category-description { margin: 12px 0 21px; font-size: 10px; line-height: 1.8; color: var(--paper-muted); max-width: 380px; }
.part-options { display: grid; gap: 10px; }
.part-card { width: 100%; border: 1px solid #cecebe; text-align: left; background: transparent; padding: 16px; display: grid; grid-template-columns: 31px 1fr 16px; gap: 12px; color: var(--ink); position: relative; }
.part-card[aria-pressed="true"] { border-color: #6e755d; background: #e2e1d4; box-shadow: inset 3px 0 #6c755b; }
.part-card:disabled { opacity: 1; background: #e0ded5; border-style: dashed; }
.part-icon { color: #9d977f; width: 29px; height: 36px; align-self: center; }
.part-icon svg { width: 100%; height: 100%; }
.part-brand { display: block; font-size: 7px; letter-spacing: .12em; color: var(--paper-muted); text-transform: uppercase; margin-bottom: 5px; }
.part-name { display: block; font-family: var(--serif); font-size: 20px; letter-spacing: -.025em; line-height: 1.1; margin-bottom: 8px; }
.part-spec { display: block; font-size: 9px; color: var(--paper-muted); line-height: 1.6; }
.part-price { display: block; color: #414b37; font-size: 10px; margin-top: 10px; }
.part-price small { font-size: 7px; color: var(--paper-muted); margin-left: 7px; }
.part-indicator { width: 13px; height: 13px; border: 1px solid #a6ab95; border-radius: 50%; margin-top: 2px; position: relative; }
.part-card[aria-pressed="true"] .part-indicator:after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #58664a; }
.part-conflict { display: block; margin-top: 8px; color: #8e4d37; font-size: 8px; line-height: 1.6; }
.selection-note { display: flex; align-items: start; gap: 9px; margin: 20px 0 12px; color: var(--paper-muted); }
.selection-note > span { font-size: 17px; line-height: 1; color: #9e8e6a; }
.selection-note p { font-size: 8px; line-height: 1.9; }
.panel-bottom { border-top: 1px solid var(--line); background: #e6e4d8; padding: 16px 8% 21px; flex-shrink: 0; }
.fit-status { display: flex; gap: 10px; align-items: center; min-height: 36px; }
.fit-symbol { font-size: 20px; color: #6a7b55; }
.fit-status strong { font-size: 9px; font-weight: 500; color: #46553a; }
.fit-status p { font-size: 8px; color: var(--paper-muted); line-height: 1.6; margin-top: 4px; }
.fit-status.has-error .fit-symbol, .fit-status.has-error strong { color: #8e4d37; }
.step-actions { display: flex; justify-content: space-between; align-items: center; gap: 17px; margin-top: 15px; }
.back-button { background: none; border: 0; color: var(--paper-muted); font-size: 9px; padding: 12px 0; }
.back-button:disabled { opacity: .4; }
.next-button { border: 0; background: #242e20; color: #eee8db; font-size: 9px; padding: 16px 19px; min-width: 70%; display: flex; justify-content: space-between; gap: 20px; }
.next-button:hover { background: #3a4733; }
.next-button span { color: #cfbb8e; }
.commission-bar { min-height: 104px; padding: 20px 3.5%; display: flex; align-items: center; gap: 3%; border-top: 1px solid #ffffff1e; background: #0e130c; }
.commission-service { flex: 1; }
.commission-service > span { color: #9c997e; font-size: 7px; }
.commission-service p { color: #aab29e; font-size: 10px; line-height: 2; margin-top: 4px; }
.commission-service strong { font-family: var(--serif); font-size: 20px; font-weight: 400; color: #d5cfb9; margin-right: 5px; }
.commission-service p > span { font-size: 8px; margin-left: 8px; }
.price-estimate { display: flex; gap: 23px; align-items: center; }
.price-estimate > span { color: #acae9c; font-size: 7px; letter-spacing: .13em; line-height: 2; }
.price-estimate small { display: block; font-size: 8px; color: #a6b198; letter-spacing: .03em; }
.price-estimate > strong { font-family: var(--serif); font-size: 34px; font-weight: 400; letter-spacing: -.03em; color: #e4dcc7; }
.save-button { background: #d8cbb1; color: #293121; border: 0; padding: 17px 23px; display: flex; align-items: center; gap: 35px; font-size: 9px; letter-spacing: .05em; }
.save-button:hover { background: #eddfc3; }
.delivery-note { font-size: 7px; color: #909a84; line-height: 1.9; }
.summary-dialog { border: 1px solid #b5b7a4; background: var(--paper); color: var(--ink); padding: 35px 40px; width: min(710px, calc(100% - 30px)); max-height: calc(100svh - 50px); }
.summary-dialog::backdrop { background: #080d08bc; backdrop-filter: blur(6px); }
.summary-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.summary-head .eyebrow { color: #6e6047; }
.summary-head button { background: none; border: 0; font-size: 28px; color: #6a715f; padding: 0 3px; }
.summary-dialog h2 { font-size: 36px; }
.summary-dialog h2 em { color: #827353; }
.summary-subtitle { font-size: 11px; line-height: 1.7; color: var(--paper-muted); margin: 13px 0 26px; }
.summary-part { display: grid; grid-template-columns: 85px 1fr auto; gap: 15px; padding: 13px 0; border-top: 1px solid var(--line); align-items: center; }
.summary-part > span { font-size: 8px; color: var(--paper-muted); text-transform: uppercase; letter-spacing: .06em; }
.summary-part > strong { font-size: 11px; font-weight: 500; }
.summary-part > a { color: var(--paper-muted); font-size: 8px; }
.summary-totals { border-top: 1px solid #aaa992; padding-top: 15px; margin-top: 5px; }
.summary-totals p { display: flex; justify-content: space-between; gap: 20px; font-size: 11px; color: var(--paper-muted); line-height: 2.4; }
.summary-totals strong { font-weight: 500; color: #35432b; }
.summary-totals .total-row { font-family: var(--serif); font-size: 26px; color: var(--ink); margin: 5px 0; line-height: 1.6; }
.summary-checks { margin: 18px 0; padding: 13px 15px; border: 1px solid #bbc0ab; background: #dde2cf; }
.summary-checks strong { font-size: 10px; color: #536447; font-weight: 500; }
.summary-checks ul { padding-left: 15px; font-size: 9px; color: #536447; line-height: 1.8; margin: 8px 0 0; }
.summary-disclosure { font-size: 9px; color: var(--paper-muted); line-height: 1.9; }
.summary-actions { display: flex; gap: 12px; margin-top: 23px; }
.summary-actions button { flex: 1; background: #283521; color: #ece8da; border: 1px solid #283521; padding: 15px 10px; font-size: 10px; }
.summary-actions button:last-child { background: none; color: #536445; border-color: #a2ad91; }
.ordering-note { display: flex; gap: 10px; margin-top: 20px; color: var(--paper-muted); font-size: 9px; line-height: 1.8; }
.ordering-note > span { font-size: 20px; color: #9d8d68; }
.toast { position: fixed; bottom: 125px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 30px); background: #283820; color: #eee8d5; font-size: 11px; padding: 16px 23px; z-index: 100; opacity: 0; pointer-events: none; transition: opacity .2s; box-shadow: 0 5px 35px #0005; }
.toast.is-visible { opacity: 1; }
.skip-link { position: fixed; left: 15px; top: -100px; background: var(--paper); color: var(--ink); padding: 15px; z-index: 100; }
.skip-link:focus { top: 15px; }
.noscript-note { position: fixed; inset: auto 15px 15px; background: #eedbb7; color: #222b1c; padding: 20px; z-index: 100; font-size: 14px; }
.noscript-note a { text-decoration: underline; }
.manual-design-link { width: 100%; min-height: 48px; margin-top: 15px; padding: 12px; border: 1px solid var(--paper-muted); background: #f6f3eb; color: var(--ink); font-size: 16px; line-height: 1.5; }
.choose-components { display: none; }
.step-tabs .tab-label { font-size: 10px; }
.step-tabs button { width: auto; min-width: 44px; min-height: 44px; gap: 8px; padding: 10px 12px; }
.step-tabs .tab-number { font-size: 9px; opacity: 1; }
.quote-save { margin-top: 24px; }
.quote-save > button { display: flex; justify-content: space-between; gap: 20px; width: 100%; min-height: 52px; padding: 17px 20px; border: 1px solid #283521; background: #283521; color: #eee8da; font-size: 13px; }
.quote-save > button:disabled { opacity: .6; }
.quote-save > p { font-size: 11px; line-height: 1.8; color: #606c51; margin-top: 12px; }
#quote-save-feedback { color: #80452f; }
body:has(dialog[open]) { overflow: hidden; }
@media(min-width:761px) {
    .part-brand { font-size: 9px; }
    .part-spec { font-size: 11px; }
    .part-price { font-size: 12px; }
    .part-price small { font-size: 8px; }
    .category-description { font-size: 12px; }
    .fit-status strong { font-size: 11px; }
    .fit-status p { font-size: 10px; }
    .next-button { font-size: 11px; min-height: 48px; }
    .back-button { font-size: 11px; min-height: 44px; }
    .selection-note p { font-size: 10px; }
    .summary-part > strong { font-size: 13px; }
    .summary-part > span, .summary-part > a { font-size: 10px; }
    .summary-checks strong { font-size: 12px; }
    .summary-checks ul, .summary-disclosure { font-size: 11px; }
    .summary-actions button { font-size: 12px; }
}
@media(min-width: 1700px) {
    .studio { grid-template-columns: 1.5fr 1fr; }
    .atelier-heading { top: 55px; }
    h1 { font-size: 60px; }
    .part-card { padding: 20px; }
    .part-name { font-size: 24px; }
    .panel-top { padding-top: 40px; }
    .category-heading h3 { font-size: 36px; }
}
@media(max-width: 1150px) {
    .studio { grid-template-columns: 1.1fr 1fr; }
    .atelier-controls { flex-wrap: wrap; gap: 15px; padding: 17px 0; }
    .exploded-button { margin-top: 0; }
    .light-controls legend { margin-bottom: 7px; }
    .atelier-heading { top: 45px; }
    .camera-tools { top: 18px; right: 4%; }
    .atelier-heading h1 { margin-top: 23px; }
    .studio-name { display: none; }
    .delivery-note { display: none; }
    .commission-service p > span { display: none; }
    .commission-bar { gap: 4%; }
    .price-estimate { gap: 13px; }
    .save-button { gap: 15px; }
    .panel-top { align-items: start; }
    .panel-top h2 { font-size: 26px; }
    .minimal-button { margin-top: 5px; }
    .part-card { grid-template-columns: 25px 1fr 13px; padding: 14px; gap: 10px; }
    .part-name { font-size: 20px; }
}
@media(max-width: 760px) {
    .studio-header { height: 76px; padding: 0 6%; }
    .wordmark { font-size: 24px; }
    .return-link { font-size: 8px; }
    .return-link > span { margin-left: 7px; }
    .studio { height: auto; max-height: none; display: block; }
    .atelier { height: 590px; }
    .atelier-heading { top: 30px; left: 7%; }
    .atelier-heading .eyebrow { font-size: 7px; margin-bottom: 15px; }
    .atelier-heading h1 { font-size: 39px; margin: 0; }
    .edition-label { display: none; }
    .scene { inset: 145px 0 95px; }
    .camera-tools { top: 25px; right: 6%; gap: 0; padding: 3px; }
    .camera-tools button { padding: 5px 7px; min-height: 27px; font-size: 8px; }
    .camera-tools button:first-child { font-size: 17px; }
    .camera-tools button:last-child { font-size: 18px; }
    .atelier-controls { left: 7%; right: 7%; padding: 17px 0 19px; gap: 12px; }
    .atelier-controls legend { font-size: 6px; margin-bottom: 8px; }
    #finish-name { display: none; }
    .finish-controls > div { gap: 4px; }
    .light-controls > div { gap: 4px; }
    .light-controls button { font-size: 7px; margin-right: 3px; }
    .exploded-button { font-size: 7px; padding: 8px; margin-top: 10px; }
    .scene-caption { bottom: 100px; left: 7%; }
    .scene-caption p { font-size: 5px; }
    .scene-caption p span { font-size: 6px; }
    .caption-rule { width: 16px; }
    .panel-top { padding: 29px 7% 23px; align-items: end; }
    .panel-top h2 { font-size: 31px; }
    .panel-top .eyebrow { font-size: 7px; }
    .minimal-button { font-size: 7px; }
    .studio-notice { padding: 11px 7%; font-size: 7px; }
    .step-tabs { padding: 17px 7%; gap: 8px; }
    .step-tabs button { height: 31px; width: 31px; }
    .part-picker { padding: 24px 7% 15px; max-height: none; min-height: 350px; }
    .part-name { font-size: 23px; }
    .part-card { padding: 18px; grid-template-columns: 28px 1fr 13px; gap: 14px; }
    .part-spec { font-size: 10px; }
    .part-price { font-size: 11px; }
    .part-brand { font-size: 8px; }
    .category-heading h3 { font-size: 34px; }
    .category-description { font-size: 11px; }
    .panel-bottom { padding: 20px 7% 26px; }
    .fit-status strong { font-size: 10px; }
    .fit-status p { font-size: 9px; }
    .next-button { font-size: 10px; padding: 18px 20px; }
    .step-actions { margin-top: 21px; }
    .commission-bar { padding: 25px 7%; flex-wrap: wrap; gap: 23px 20px; }
    .commission-service { flex: 1 0 100%; }
    .commission-service p > span { display: inline; }
    .price-estimate { flex: 1; flex-direction: column; align-items: start; gap: 5px; }
    .price-estimate small { display: none; }
    .price-estimate > strong { font-size: 33px; }
    .save-button { padding: 17px 18px; gap: 15px; font-size: 9px; }
    .delivery-note { display: block; flex: 1 0 100%; font-size: 8px; }
    .summary-dialog { padding: 24px 22px; }
    .summary-dialog h2 { font-size: 31px; }
    .summary-part { grid-template-columns: 65px 1fr 12px; gap: 10px; }
    .summary-part > strong { font-size: 10px; line-height: 1.5; }
    .summary-part > a { font-size: 0; }
    .summary-part > a:after { content: '↗'; font-size: 13px; }
    .summary-part > span { font-size: 7px; }
    .summary-actions { flex-direction: column; }
    .toast { bottom: 25px; }
}
@media(prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *:before, *:after { animation: none !important; transition: none !important; }
}
@media(max-width: 760px) {
    html { scroll-padding-bottom: 150px; }
    body { padding-bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
    .studio-header { height: 80px; }
    .return-link { font-size: 11px; min-height: 44px; display: flex; align-items: center; }
    .wordmark { padding: 10px 0; }
    .studio { min-height: 0; }
    .atelier { height: 620px; }
    .atelier-heading .eyebrow { font-size: 9px; }
    .atelier-heading h1 { font-size: 38px; }
    .choose-components { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; position: absolute; left: 7%; top: 144px; min-height: 44px; z-index: 3; color: #e3d6b8; font-size: 12px; border-bottom: 1px solid #bba47c66; }
    .choose-components span { font-size: 18px; }
    .scene { inset: 188px 0 205px; }
    .camera-tools { top: auto; bottom: 166px; left: 7%; right: 7%; width: fit-content; margin-left: auto; }
    .camera-tools button { min-height: 44px; min-width: 44px; padding: 8px; font-size: 11px; }
    .scene-caption { bottom: 218px; left: 7%; max-width: 85%; }
    .scene-caption p { font-size: 7px; }
    .scene-caption p span { font-size: 9px; line-height: 1.65; }
    .atelier-controls { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; padding: 15px 0; align-items: end; }
    .atelier-controls legend { font-size: 8px; margin-bottom: 7px; }
    .finish-controls > div { gap: 0; }
    .finish { width: 44px; height: 44px; padding: 10px; }
    .finish > span { width: 22px; height: 22px; }
    .light-controls { justify-self: end; }
    .light-controls > div { gap: 0; }
    .light-controls button { min-width: 44px; min-height: 44px; margin: 0; padding: 6px 8px; font-size: 10px; }
    .exploded-button { grid-column: 1 / -1; min-height: 44px; margin: 0; font-size: 12px; }
    .panel-top { padding: 30px 7% 22px; align-items: start; }
    .panel-top h2 { font-size: 29px; line-height: 1.15; }
    .panel-top .eyebrow { font-size: 9px; }
    .minimal-button { display: flex; align-items: center; font-size: 10px; min-height: 44px; padding: 7px 0; margin: 0; }
    .studio-notice { padding: 14px 7%; font-size: 11px; line-height: 1.75; }
    .studio-notice p span { display: block; }
    .step-tabs { padding: 12px 7%; gap: 7px; position: sticky; top: 0; z-index: 6; background: var(--paper); scrollbar-width: thin; }
    .step-tabs button { flex-shrink: 0; min-height: 46px; padding: 10px 13px; min-width: 110px; }
    .step-tabs .tab-label { font-size: 12px; }
    .step-tabs .tab-number { font-size: 10px; }
    #step-number { font-size: 10px; }
    .category-noun { font-size: 9px; }
    .category-description { font-size: 13px; line-height: 1.8; }
    .part-card { padding: 18px 14px; gap: 12px; grid-template-columns: 25px minmax(0, 1fr) 14px; }
    .part-card:disabled { opacity: 1; background: #e0ded5; border-style: dashed; }
    .part-card:disabled .part-name { color: #59604f; }
    .part-brand { font-size: 10px; }
    .part-name { font-size: 23px; line-height: 1.2; overflow-wrap: anywhere; }
    .part-spec { font-size: 12px; }
    .part-price { font-size: 13px; }
    .part-price small { display: block; font-size: 9px; margin: 5px 0 0; }
    .part-conflict { font-size: 11px; color: #81452f; }
    .selection-note p { font-size: 11px; line-height: 1.8; }
    .fit-status strong { font-size: 12px; line-height: 1.7; }
    .fit-status p { font-size: 11px; }
    .back-button { min-width: 48px; min-height: 48px; font-size: 12px; }
    .next-button { min-height: 52px; font-size: 12px; min-width: 0; flex: 1; padding: 17px 18px; }
    .commission-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; padding: 14px 6% calc(12px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 1fr auto; gap: 8px 15px; box-shadow: 0 -10px 35px #10150d22; }
    .commission-service { display: none; }
    .price-estimate { display: flex; flex-direction: column; gap: 2px; }
    .price-estimate > span { font-size: 8px; line-height: 1.5; }
    .price-estimate small { display: block; font-size: 10px; color: #b1b9a4; margin-top: 3px; }
    .price-estimate > strong { font-size: 28px; }
    .save-button { align-self: center; padding: 17px 15px; min-height: 52px; font-size: 12px; gap: 14px; }
    .delivery-note { display: block; grid-column: 1/-1; font-size: 10px; line-height: 1.6; }
    .delivery-note br { display: none; }
    .summary-dialog { padding: 24px 22px; width: calc(100% - 24px); max-height: calc(100dvh - 28px); overscroll-behavior: contain; }
    .summary-head { position: sticky; top: -24px; z-index: 2; background: var(--paper); padding-top: 12px; padding-bottom: 10px; margin-top: -12px; }
    .summary-head .eyebrow { font-size: 9px; }
    .summary-head button { min-height: 44px; min-width: 44px; }
    .summary-dialog h2 { font-size: 32px; line-height: 1.15; }
    .summary-subtitle { font-size: 13px; }
    .summary-part { grid-template-columns: 66px minmax(0, 1fr) 30px; gap: 10px; padding: 17px 0; }
    .summary-part > strong { font-size: 13px; overflow-wrap: anywhere; }
    .summary-part > span { font-size: 9px; }
    .summary-part > a { min-height: 44px; display: flex; align-items: center; justify-content: center; }
    .summary-part > a:after { font-size: 18px; }
    .summary-totals p { font-size: 12px; line-height: 1.8; margin: 12px 0; }
    .summary-totals p > :last-child { text-align: right; }
    .summary-totals .total-row { font-size: 26px; }
    .summary-checks { padding: 16px; }
    .summary-checks strong { font-size: 12px; line-height: 1.8; }
    .summary-checks ul { font-size: 11px; line-height: 1.8; }
    .summary-checks li+li { margin-top: 8px; }
    .summary-disclosure { font-size: 11px; line-height: 1.8; }
    .summary-actions button { min-height: 48px; font-size: 12px; }
    .ordering-note { font-size: 11px; }
    .quote-save > p { font-size: 12px; }
    .toast { bottom: calc(145px + env(safe-area-inset-bottom, 0px)); font-size: 12px; line-height: 1.7; width: max-content; }
}
@media(max-width: 350px) {
    .studio-header { padding: 0 6%; }
    .wordmark { font-size: 21px; }
    .wordmark small { font-size: 5px; }
    .return-link { font-size: 10px; }
    .panel-top { gap: 9px; }
    .panel-top h2 { font-size: 26px; }
    .minimal-button { font-size: 9px; }
    .atelier-controls { gap: 10px; }
    .light-controls button { padding: 6px 4px; font-size: 9px; }
    .save-button { font-size: 11px; padding: 17px 12px; gap: 9px; }
    .summary-dialog { padding: 22px 17px; }
    .summary-part { grid-template-columns: 54px minmax(0,1fr) 26px; gap: 8px; }
}
@media(max-width:760px) and (max-height:500px) {
    .commission-bar { padding-top: 9px; padding-bottom: 9px; }
    .price-estimate > span { display: none; }
    .delivery-note { display: none; }
    body { padding-bottom: 85px; }
}