.example,.workspace{--comparison-pane-height:clamp(420px,calc(100svh - 150px),1200px);--comparison-width:min(100%,1680px,calc(var(--comparison-pane-height) * 1.6 + 24px))}
.design-comparison{--pane-height:var(--comparison-pane-height);width:100%;max-width:var(--comparison-width);margin:0 auto;scroll-margin-top:16px}
.comparison-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 0 18px;font:10px/1.6 monospace;letter-spacing:.08em;color:#b4c2a8}
#result-domain{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0}
.portrait-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.design-viewer{display:flex;flex-direction:column;min-width:0;height:var(--pane-height);border:1px solid #81966b55;border-radius:12px;overflow:hidden;background:#161e11;isolation:isolate;container-type:inline-size}
.design-viewer-new{border-color:#c8ef8270;box-shadow:0 0 45px #b9ef5710}
.viewer-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;height:88px;background:#20281a;flex-shrink:0}
.viewer-heading>div>span{display:block;font:10px/1.5 monospace;letter-spacing:.12em;color:#9cac8b;margin-bottom:5px}
.viewer-heading h3{font-size:20px;line-height:1.2;font-weight:550;margin:0;color:#f0f3e8}
.viewer-mark{font-size:28px;color:#97a885}.design-viewer-new .viewer-mark,.design-viewer-new .viewer-heading>div>span{color:#d2f88a}
.design-viewer .result-image-panel{position:relative;flex:1;min-height:0;border-radius:0;overflow:hidden;background:#0e130b;outline-offset:-4px;user-select:none}
.design-viewer [data-viewer-image]{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.design-viewer.is-interactive [data-viewer-image]{position:absolute;top:0;left:0;max-width:none;max-height:none;transform-origin:0 0;box-shadow:0 6px 28px #0005;will-change:transform}
.design-viewer.is-interactive .result-image-panel{touch-action:none}
.design-viewer .result-image-panel[data-pannable=true]{cursor:grab}.design-viewer .result-image-panel.is-dragging{cursor:grabbing}
.viewer-state{position:absolute;inset:0;display:grid;place-items:center;padding:16px;color:#b8c6ab;font-size:12px;text-align:center}
.viewer-toolbar{padding:10px 12px;border-top:1px solid #81966b30;flex-shrink:0;background:#1b2415}
.viewer-controls{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap}
.viewer-zoom{display:flex;align-items:center;gap:2px}
.viewer-controls button{min-height:34px;padding:0 9px;border:1px solid #8d9c754d;border-radius:5px;background:#151d10;color:#dfe8d3;font-size:11px;white-space:nowrap}
.viewer-controls button:hover{border-color:#d2f88a;background:#2c3b20}.viewer-controls button[aria-pressed=true]{color:#d2f88a;border-color:#d2f88a75}
.viewer-controls button:disabled{opacity:.4;cursor:default}.viewer-controls [data-zoom-in],.viewer-controls [data-zoom-out]{width:30px;padding:0;font-size:19px}
.viewer-controls output{min-width:40px;text-align:center;font:10px/1 monospace;color:#c8d6bb;font-variant-numeric:tabular-nums}
.viewer-controls [data-viewer-fullscreen]{color:#d2f88a;border-color:#d2f88a55}
.viewer-controls [data-zoom-width],.viewer-controls [data-zoom-original]{display:none}
.design-comparison .viewer-controls [data-zoom-width]{display:block}
.design-viewer:fullscreen [data-zoom-width],.design-viewer.is-expanded [data-zoom-width],.design-viewer:fullscreen [data-zoom-original],.design-viewer.is-expanded [data-zoom-original]{display:block}
.viewer-help{flex-shrink:0;min-height:42px;padding:0 12px 10px;margin:0;background:#1b2415;color:#a4b595;font-size:10px;line-height:1.6;text-align:center}
.capture-note{font-size:11px;line-height:1.6;color:#a5b398;margin:12px 0 0}
.design-viewer:fullscreen{width:100%;height:100%;max-height:none;border:0;border-radius:0}
.design-viewer.is-expanded{position:fixed;inset:12px;z-index:90;width:auto;height:auto;max-height:none;box-shadow:0 0 0 100vmax #000d}
.design-viewer:fullscreen .result-image-panel,.design-viewer.is-expanded .result-image-panel{min-height:0}
.result-heading h2{font-size:clamp(28px,2.5vw,40px);line-height:1.1}.result-summary{margin:15px 0 24px}
.example>.section-top,.example-heading,.example-bottom{max-width:var(--comparison-width);margin-left:auto;margin-right:auto}
.example-heading{margin-bottom:32px}
.example-heading>p{margin-right:0}
.design-comparison .viewer-help{min-height:48px}
@container(max-width:340px){.viewer-heading{padding:15px 12px}.viewer-heading h3{font-size:17px}.viewer-heading>div>span{font-size:9px}.viewer-mark{font-size:22px}.viewer-controls{gap:4px}.viewer-controls button{font-size:10px;padding:0 7px}.viewer-help{font-size:9px}}
@media(max-width:700px){.example,.workspace{--comparison-pane-height:clamp(450px,calc(100svh - 120px),760px)}.design-comparison .viewer-heading{height:82px}.design-comparison .viewer-help{min-height:62px}}
@media(max-width:700px){.design-comparison{--pane-height:clamp(450px,calc(100svh - 120px),760px)}.portrait-pair{gap:10px}.comparison-heading{font-size:8px;gap:10px;letter-spacing:0}.comparison-heading>span:last-child{max-width:50%;text-align:right}.viewer-heading{padding:12px 10px;gap:4px}.viewer-heading>div>span{font-size:8px;margin-bottom:4px}.viewer-heading h3{font-size:14px}.viewer-mark{font-size:18px}.viewer-toolbar{padding:8px 5px}.viewer-controls{gap:4px}.viewer-controls button{min-height:32px;padding:0 6px;font-size:10px}.viewer-controls output{min-width:32px}.viewer-zoom{width:100%;justify-content:center}.viewer-controls [data-zoom-original]{display:none}.viewer-controls [data-viewer-fullscreen]{width:100%}.viewer-help{font-size:9px;padding:0 7px 9px}.design-viewer.is-expanded{inset:6px}.design-viewer:fullscreen .viewer-zoom,.design-viewer.is-expanded .viewer-zoom{width:auto}.design-viewer:fullscreen [data-viewer-fullscreen],.design-viewer.is-expanded [data-viewer-fullscreen]{width:auto}.design-viewer:fullscreen [data-zoom-original],.design-viewer.is-expanded [data-zoom-original]{display:block}.capture-note{font-size:10px}}