/* Keep the viewing tools recognisable while each demo keeps its own identity. */
body.viewer {
  --paper: #f5f4ef;
  --ink: #20352c;
  --muted: #536259;
  --line: #cdd7ca;
  --accent: #315d4b;
  --navy: #254c3d;
  --sys-focus: #315d4b;
  background: #e4e9e0;
  color: #20352c;
}
.viewer-bar { min-height: 82px; padding: 12px 24px; gap: 22px; background: #f9faf4; color: #20352c; border-color: #ccd6c8; }
.viewer-bar .back-link { min-height: 44px; color: #315d4b; font-size: 17px; gap: 9px; }
.back-link span { font-size: 12px; font-weight: 700; }
.viewer-identity { border-color: #ccd6c8; padding-left: 22px; min-width: 150px; }
.viewer-identity strong { font-size: 18px; letter-spacing: -.035em; line-height: 1.3; color: #20352c; }
.viewer-identity > span { font-size: 11px; line-height: 1.5; color: #536259; }
.device-controls { background: #e9eee4; border: 1px solid #c5d2bf; border-radius: 7px; padding: 3px; gap: 3px; }
.device-controls button { color: #425b46; font-size: 12px; min-height: 44px; min-width: 44px; border-radius: 5px; padding: 8px 13px; }
.device-controls button:hover { background: #dce6d5; }
.device-controls button[aria-pressed="true"] { background: #254c3d; color: #fff; box-shadow: 0 1px 4px #20352c15; }
.viewer-info { color: #315d4b; border: 0; font-size: 12px; min-height: 44px; text-underline-offset: 5px; }
.viewer-info[aria-expanded="true"] { color: #173e31; font-weight: 700; }
.viewer-external { background: #254c3d; color: #fff; font-size: 12px; min-height: 44px; border-radius: 5px; padding: 10px 15px; gap: 8px; }
.viewer-external:hover { background: #173e31; }
.demo-caption { padding: 6px 24px; min-height: 58px; border-color: #ccd6c8; background: #eef2e8; color: #536259; }
.viewer-contact { display: inline-flex; color: #254c3d; font-size: 12px; border: 1px solid #acbea4; background: #f9fbf4; border-radius: 5px; min-height: 44px; padding: 8px 13px; gap: 12px; }
.viewer-contact:hover { color: #173e31; background: #dfe9d7; border-color: #7f9c74; }
.demo-caption > div { gap: 12px; }
.demo-caption button { min-height: 44px; min-width: 44px; padding: 8px 10px; border-radius: 5px; color: #315d4b; font-size: 12px; }
.demo-caption button:hover { background: #dce6d5; }
#project-index { font-variant-numeric: tabular-nums; font-size: 12px; white-space: nowrap; }
.preview-area { background: #dce4d7; }
.frame-wrap { border-color: #b8c6b1; box-shadow: 0 12px 44px #183b2114; }
.frame-wrap[data-device="mobile"] { outline-color: #304d3b; }
.frame-wrap[data-device="tablet"] { outline-color: #aabda1; }
.frame-loading { background: #fafbf6; color: #20352c; border-color: #bdcfb4; box-shadow: 0 12px 30px #183b211f; border-radius: 7px; }
.frame-loading .loading-dot { background: #315d4b; }
.frame-loading button { min-height: 44px; background: #254c3d; }
.project-context { flex-shrink: 0; background: #f6f8f0; color: #20352c; border-color: #ccd6c8; padding: 22px 24px; gap: 14px 32px; font-size: 14px; line-height: 1.75; }
.project-context ul { align-content: start; gap: 7px; }
.project-context li { background: #e1e9db; color: #34513a; border: 1px solid #c5d3bd; padding: 6px 10px; border-radius: 4px; font-size: 12px; }
.project-context > span { color: #536259; font-size: 12px; }
.viewer-error { background: #f5f4ef; color: #20352c; border: 1px solid #ccd6c8; border-radius: 10px; }
.viewer-error .solid-button { background: #254c3d; color: #fff; font-size: 13px; }
.viewer-error p { color: #536259; }
.viewer :is(a, button):focus-visible { outline: 3px solid #315d4b; outline-offset: 3px; }

@media (max-width: 1100px) {
  .viewer-bar { gap: 12px; padding-inline: 16px; }
  .viewer-identity { padding-left: 14px; min-width: 120px; }
  .viewer-identity strong { font-size: 16px; }
  .device-controls button { font-size: 11px; padding-inline: 10px; }
  .demo-caption { padding-inline: 16px; }
}
@media (max-width: 760px) {
  .viewer-bar { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 4px 10px; min-height: 0; padding: 8px 12px; }
  .viewer-bar > .back-link { grid-column: 1; grid-row: 1; gap: 5px; min-width: 44px; }
  .back-link span { font-size: 10px; }
  .viewer-identity { grid-column: 2; grid-row: 1; padding-left: 10px; min-width: 0; }
  .viewer-identity strong { font-size: 14px; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
  .viewer-identity > span { font-size: 10px; line-height: 1.45; }
  .viewer-external { grid-column: 3; grid-row: 1; min-height: 44px; padding: 8px 10px; font-size: 11px; }
  .viewer-info { grid-column: 1; grid-row: 2; font-size: 10px; line-height: 1.45; padding-inline: 0; min-height: 44px; }
  .device-controls { grid-column: 2 / 4; grid-row: 2; justify-self: end; padding: 2px; margin: 0; }
  .device-controls button { min-height: 44px; min-width: 44px; font-size: 10px; padding: 8px 11px; }
  .demo-caption { gap: 8px; padding: 6px 12px; min-height: 56px; }
  .demo-caption > div { gap: 4px; flex-shrink: 0; }
  .demo-caption button { min-height: 44px; min-width: 44px; padding: 6px 8px; font-size: 15px; }
  .demo-caption button span { display: none; }
  #project-index { font-size: 10px; }
  .viewer-contact { font-size: 11px; padding: 7px 10px; gap: 8px; max-width: 180px; line-height: 1.5; }
  .project-context { padding: 16px; grid-template-columns: minmax(0, 1fr); max-height: 32dvh; overflow: auto; font-size: 13px; }
  .project-context li { font-size: 11px; }
  .project-context > span { font-size: 11px; }
  .frame-wrap[data-device="mobile"],
  .frame-wrap[data-device="tablet"] { outline: none; }
}
@media (max-width: 370px) {
  .viewer-bar { gap: 4px 7px; padding-inline: 8px; }
  .viewer-identity { padding-left: 7px; }
  .viewer-identity strong { font-size: 13px; }
  .viewer-external { font-size: 10px; padding-inline: 8px; }
  .demo-caption { padding-inline: 8px; }
  .viewer-contact { gap: 5px; padding-inline: 8px; }
  .demo-caption > div { gap: 1px; }
}

/* Keep enlarged device labels and the project identity readable on small screens. */
@media(max-width:760px){
 .device-controls{min-width:0;flex-wrap:wrap}
}
@media(max-width:400px){
 .viewer-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
 .viewer-bar>.back-link{grid-column:1;grid-row:1}
 .viewer-external{grid-column:2;grid-row:1}
 .viewer-identity{grid-column:1/-1;grid-row:2}
 .viewer-info{grid-column:1/-1;grid-row:3;justify-self:start}
 .device-controls{grid-column:1/-1;grid-row:4}
}