/* Larger previews, with one concise caption per screen. */
#interaction-design #final-result > .wrap { width: min(1680px, calc(100% - 64px)); }
#final-result .screen-comparison { padding: 0; border: 0; background: transparent; }
#final-result .screen-comparison-intro { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:30px; }
#final-result .screen-comparison-intro p { font-size:20px; margin:0; color:#485d4c; }
#final-result .screen-comparison-intro > span { font-size:15px; color:#53654d; }
#final-result .screen-comparison-grid { display:grid; grid-template-columns:1.45fr 1fr .7fr 1.45fr; gap:24px; align-items:start; }
#final-result .screen-card { min-width:0; margin:0; }
#final-result .screen-card figcaption { display:flex; align-items:start; gap:12px; padding:0 0 18px; min-height:84px; }
#final-result .screen-card-index { display:none; }
#final-result .screen-card figcaption b { display:block; font:500 24px/1.25 Fredoka,sans-serif; color:#294337; }
#final-result .screen-card-size { display:block; margin-top:6px; font:14px/1.5 Nunito,sans-serif; color:#53654d; }
#final-result .screen-device-stage { height:440px; display:flex; align-items:center; justify-content:center; padding:0; background:transparent; }
#final-result .screen-device { display:block; width:min(100%,calc(420px * var(--device-ratio))); padding:0; border:4px solid #35403c; border-radius:12px; background:#35403c; overflow:hidden; cursor:zoom-in; box-shadow:0 12px 24px #29433524; transition:transform .18s ease; }
#final-result .screen-device:hover { transform:translateY(-4px); }
#final-result .screen-device:focus-visible { outline:3px solid #a05d29; outline-offset:5px; }
#final-result .screen-card-desktop .screen-device { border-radius:7px; border-bottom-width:8px; }
#final-result .screen-card-phone .screen-device { border-radius:18px; }
#final-result .screen-device img { display:block; width:100%; height:auto; max-height:none; object-fit:contain; }
#final-result .screen-comparison-note { font-size:14px; line-height:1.6; color:#53654d; margin:24px 0 0; }
#final-result .screen-review-link { margin-top:12px; font-size:14px; }
#interaction-design .wireframe-context { font-size:18px; line-height:1.7; max-width:850px; margin:0 0 28px; color:#485d4c; }
#interaction-design .accurate-wire-pair figcaption { font-size:13px; }
#interaction-design .accurate-wire-card .board-top { font-size:14px; }
#interaction-design .accurate-wire-card .board-top > span { font-size:12px; }
#interaction-design .evidence-note { font-size:14px; }
@media(max-width:1100px) {
 #final-result .screen-comparison-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
 #final-result .screen-device-stage { height:390px; }
 #final-result .screen-device { width:min(100%,calc(370px * var(--device-ratio))); }
}
@media(max-width:600px) {
 #interaction-design #final-result > .wrap { width:calc(100% - 40px); }
 #final-result .screen-comparison-intro { align-items:start; flex-direction:column; gap:8px; }
 #final-result .screen-comparison-grid { grid-template-columns:1fr; gap:36px; }
 #final-result .screen-card figcaption { min-height:0; }
 #final-result .screen-device-stage { height:auto; padding:8px 0; }
 #final-result .screen-device { width:min(100%,calc(480px * var(--device-ratio))); }
 #interaction-design .wireframe-context { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) { #final-result .screen-device { transition:none; } #final-result .screen-device:hover { transform:none; } }