.viewer{height:100dvh;overflow:hidden;background:#e8e5df;display:flex;flex-direction:column}.viewer-bar{flex-shrink:0;min-height:76px;display:flex;align-items:center;gap:28px;padding:12px 28px;background:var(--paper);border-bottom:1px solid var(--line)}.back-link{font-size:15px;display:flex;align-items:center;gap:10px;padding:8px 0}.back-link span{font-size:11px}.viewer-identity{padding-left:24px;border-left:1px solid var(--line);display:flex;flex-direction:column;min-width:160px}.viewer-identity strong{font-size:12px;font-weight:700}.viewer-identity>span{font-size:9px;color:var(--muted);margin-top:3px}.device-controls{display:flex;margin-left:auto;background:#eae5de;padding:3px;border-radius:4px;gap:2px}.device-controls button{background:transparent;font-size:10px;padding:8px 12px;border-radius:3px}.device-controls button[aria-pressed=true]{background:white;box-shadow:0 1px 4px #00000010}.viewer-external{font-size:11px;display:flex;gap:20px;align-items:center;padding:9px 14px;border:1px solid var(--line);border-radius:3px}.demo-caption{min-height:35px;padding:6px 28px;font-size:9px;display:flex;align-items:center;justify-content:space-between;background:var(--paper);color:var(--muted);border-bottom:1px solid var(--line);gap:14px}.demo-caption>div{display:flex;align-items:center;gap:17px}.demo-caption button{background:transparent;line-height:1;font-size:15px;padding:4px 7px}.preview-area{flex:1;min-height:0;overflow:auto;position:relative;display:flex;justify-content:center}.frame-wrap{width:100%;height:100%;flex-shrink:0;background:#fff;transition:width .25s;overflow:hidden}.frame-wrap[data-device=tablet]{width:min(820px,100%);height:calc(100% - 40px);margin:20px 0;border-radius:12px;box-shadow:0 8px 35px #18212e20;outline:1px solid #ffffffa0}.frame-wrap[data-device=mobile]{width:min(390px,100%);height:calc(100% - 40px);margin:20px 0;border-radius:18px;box-shadow:0 8px 35px #18212e25;outline:5px solid #f7f3ee}iframe{height:100%;width:100%;border:0;display:block;background:#fff}.viewer-error{align-self:center;text-align:center;padding:35px;max-width:650px}.viewer-error h1{font-size:45px;line-height:1.2}.viewer-error p{font-size:14px;color:var(--muted);margin:20px 0 30px}@media(max-width:760px){.viewer-bar{gap:15px;min-height:68px;padding:12px 16px;flex-wrap:wrap}.viewer-identity{min-width:0;flex:1;padding-left:15px}.viewer-identity strong{font-size:11px}.back-link span{display:none}.viewer-external{font-size:10px;gap:10px;padding:7px 10px}.device-controls{display:none}.demo-caption{padding:6px 16px;font-size:8px;gap:8px}.demo-caption>div{gap:7px}.frame-wrap[data-device=mobile],.frame-wrap[data-device=tablet]{margin:0;border-radius:0;height:100%;outline:none;box-shadow:none}.viewer-error h1{font-size:34px}}
.viewer-bar{gap:20px}.viewer-identity strong{font-size:14px}.viewer-identity>span{font-size:11px}.viewer-info{background:none;font-size:12px;padding:10px 5px;text-decoration:underline}.viewer-external{font-size:12px}.demo-caption{font-size:11px;min-height:44px}.demo-caption>div{gap:12px}.demo-caption button{font-size:12px;min-height:32px;line-height:1.4}.project-context{background:var(--paper);padding:20px 28px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;font-size:13px}.project-context p{max-width:620px}.project-context ul{margin:0;display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0}.project-context li{padding:4px 9px;background:#eae4db;border-radius:3px}.project-context>span{font-size:11px;color:var(--muted)}.frame-loading{position:absolute;top:24px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 36px);padding:14px 20px;background:var(--paper);box-shadow:0 8px 35px #18212e24;border:1px solid var(--line);border-radius:6px;display:flex;gap:12px;align-items:center;font-size:13px}.frame-loading button{padding:8px;background:var(--navy);color:white;border-radius:3px;white-space:nowrap}.loading-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}.viewer-error .eyebrow{justify-content:center;margin-bottom:20px}.device-controls button{font-size:11px;min-height:36px}@media(max-width:1000px){.viewer-bar{gap:12px;padding-inline:16px}.viewer-identity{padding-left:12px;min-width:120px}.viewer-info{font-size:11px}.viewer-external{gap:8px}.device-controls button{padding-inline:8px}.demo-caption{padding-inline:16px}.demo-caption button span{display:none}}@media(max-width:760px){.viewer-bar{min-height:100px;gap:8px 14px;padding:10px 14px}.back-link span{display:inline;font-size:11px}.viewer-identity{min-width:0}.viewer-identity>span{font-size:10px}.viewer-info{order:3;min-height:36px}.viewer-external{font-size:11px}.device-controls{display:flex;order:4;margin-left:auto}.device-controls button{font-size:10px;min-height:32px}.demo-caption{font-size:10px;min-height:42px}.demo-caption>span{max-width:170px}.project-context{padding:16px;grid-template-columns:1fr;font-size:12px;max-height:28dvh;overflow:auto}.frame-loading{top:14px;font-size:12px;flex-wrap:wrap;justify-content:center}.viewer-error h1{font-size:32px}.viewer-error{padding:24px}}

/* Responsive review v2: give the project identity its own column and keep all
   device/project controls usable without squeezing the preview out of view. */
.device-controls button,.demo-caption button{min-height:44px;min-width:44px}
@media(max-width:760px){
 .viewer-bar{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;gap:8px 12px;min-height:0;padding:10px 14px}
 .viewer-bar>.back-link{grid-column:1;grid-row:1;min-height:44px}
 .viewer-identity{grid-column:2;grid-row:1;min-width:0;padding-left:10px}
 .viewer-identity strong{white-space:nowrap;font-size:13px}
 .viewer-identity>span{font-size:10px;line-height:1.5}
 .viewer-external{grid-column:3;grid-row:1;min-height:44px;justify-content:center;padding-inline:10px}
 .viewer-info{grid-column:1;grid-row:2;min-height:44px;font-size:10px;padding-inline:0}
 .device-controls{grid-column:2/4;grid-row:2;justify-self:end;margin-left:0;max-width:100%}
 .device-controls button{min-height:44px;min-width:44px;font-size:10px}
 .demo-caption{min-height:56px}
 .demo-caption button{min-height:44px;min-width:44px}
}