.wall-open { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 17px; border: 1px solid #b8bdae; border-radius: 3px; background: #fffcf699; font-size: 13px; font-weight: 500; }
.wall-open svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.wall-entry { display: flex; justify-content: center; padding: 3px 0 10px; }
.wall-preview { width: min(1240px, calc(100% - 40px)); max-width: 1240px; max-height: calc(100dvh - 40px); padding: 0; border: 0; border-radius: 5px; overflow: auto; background: #fffcf6; }
.wall-preview::backdrop { background: #2428209c; backdrop-filter: blur(7px); }
.wall-preview [hidden] { display: none !important; }
.wall-header { display: flex; justify-content: space-between; align-items: center; padding: 23px 30px; border-bottom: 1px solid var(--line); gap: 18px; }
.wall-header .eyebrow { font-size: 10px; color: var(--accent); }
.wall-header h2 { font: 36px/1.15 'Instrument Serif', Georgia, serif; margin: 7px 0 0; }
.wall-close { width: 44px; height: 44px; border: 1px solid var(--line); background: transparent; border-radius: 50%; font-size: 26px; flex-shrink: 0; }
.wall-layout { display: grid; grid-template-columns: minmax(0, 1fr) 282px; }
.wall-visual { align-self: center; background: #ede9df; min-width: 0; }
.wall-scene { position: relative; width: 100%; aspect-ratio: 3/2; isolation: isolate; }
.wall-room { display: block; width: 100%; height: 100%; object-fit: contain; }
.wall-art { position: absolute; left: 50%; top: 37%; transform: translate(-50%, -50%); box-shadow: 3px 5px 9px #302b2445; }
.wall-art::before { content: ''; position: absolute; inset: -4%; border: max(2px, .32vw) solid #af8458; box-shadow: inset 1px 1px 2px #ffe6b8, 2px 3px 4px #302b2440; pointer-events: none; }
.wall-art[data-frame='black']::before { border-color: #292a27; box-shadow: inset 1px 1px 1px #666, 2px 3px 4px #302b2440; }
.wall-art[data-frame='none']::before { display: none; }
.wall-drawing { display: block; width: 100%; height: 100%; object-fit: contain; }
.wall-measure { position: absolute; top: calc(100% + 19px); left: 0; width: 100%; border-top: 1px solid #5d574780; padding-top: 5px; font-size: 11px; text-align: center; color: #494437; white-space: nowrap; }
.wall-scale { margin: 0; padding: 14px 20px; text-align: center; font-size: 11px; line-height: 1.5; color: #5b594f; }
.wall-controls { padding: 27px 24px; border-left: 1px solid var(--line); }
.wall-controls > .eyebrow { font-size: 9px; color: #737268; }
.wall-name { font: 28px/1.15 'Instrument Serif', Georgia, serif; margin: 7px 0 26px; overflow-wrap: anywhere; }
.wall-controls fieldset { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.wall-controls legend { font-size: 12px; font-weight: 600; padding: 0; margin-bottom: 10px; }
.wall-sizes, .wall-frames { display: flex; gap: 6px; }
.wall-controls fieldset button { flex: 1; min-width: 0; min-height: 44px; border: 1px solid #d5d5c9; border-radius: 3px; background: transparent; font-size: 11px; padding: 10px 3px; }
.wall-controls fieldset button[aria-pressed='true'] { color: #a23a25; border-color: #b44830; background: #f6ece3; box-shadow: 0 0 0 1px #b44830; }
.wall-sizes strong { display: block; font-size: 17px; font-weight: 500; }
.wall-sizes small { display: block; font-size: 9px; margin-top: 6px; white-space: nowrap; }
.wall-frames span { display: block; margin: 0 auto 7px; width: 19px; height: 24px; border: 3px solid #b48b60; background: #f7f4eb; }
.wall-frames [data-wall-frame='black'] span { border-color: #30312c; }
.wall-frames [data-wall-frame='none'] span { border: 1px solid #d4d0c6; }
.wall-controls .wall-dimensions { font-size: 14px; font-weight: 600; color: var(--ink); margin: 6px 0; }
.wall-controls .wall-explainer { font-size: 11px; line-height: 1.6; margin: 8px 0 24px; }
.wall-controls .wall-preview-note { font-size: 11px; line-height: 1.5; color: #87402e; padding: 10px; background: #f6ece3; margin: 10px 0; }
.wall-done { width: 100%; min-height: 44px; font-size: 12px; padding: 13px 9px; justify-content: center; }
.wall-notice { position: absolute; left: 50%; top: 33%; transform: translate(-50%, -50%); background: #fffcf6ed; box-shadow: 0 5px 30px #292a2710; padding: 18px 22px; width: min(330px, 85%); text-align: center; border: 1px solid #d5d5c9; }
.wall-notice strong { font-size: 14px; }
.wall-notice p { font-size: 12px; margin: 6px 0; }
.wall-retry { margin-top: 8px; }
@media (max-width: 750px) {
  .wall-preview { width: calc(100% - 20px); max-height: calc(100dvh - 20px); }
  .wall-header { padding: 18px; }
  .wall-header h2 { font-size: 29px; }
  .wall-layout { grid-template-columns: 1fr; }
  .wall-controls { border-left: 0; border-top: 1px solid var(--line); padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
  .wall-controls > .eyebrow, .wall-name, .wall-controls .wall-explainer, .wall-controls .wall-preview-note, .wall-done { grid-column: 1/-1; }
  .wall-name { margin-bottom: 20px; }
  .wall-controls fieldset { margin-bottom: 18px; }
  .wall-controls fieldset:first-of-type { grid-column: 1/-1; }
  .wall-controls .wall-dimensions { grid-column: 1/-1; }
  .wall-controls .wall-dimensions { align-self: center; font-size: 12px; }
  .wall-measure { top: calc(100% + 12px); font-size: 9px; }
  .wall-scale { font-size: 10px; padding: 10px 15px; }
}
@media (max-width: 370px) { .wall-controls { column-gap: 10px; padding: 16px; } .wall-header h2 { font-size: 26px; } }