/* A working design notebook, scoped to the studio. */
.design-gallery [hidden]{display:none!important}
.design-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px}
.design-tabs button{display:grid;gap:7px;padding:5px 5px 8px;border:1px solid var(--rule);border-radius:3px;background:rgba(6,23,32,.8);text-align:left;font-size:.75rem;line-height:1.2;cursor:pointer;min-height:44px;transition:border-color .18s,background .18s}
.design-tabs img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:1px}
.design-tabs button[aria-selected="true"]{border-color:var(--amber);background:#18313a;color:var(--amber)}
.design-tabs button:hover{border-color:var(--amber)}
.design-tabs span{padding-inline:3px}
.design-image{position:relative;display:block;width:100%;padding:0;border:1px solid var(--rule-strong);background:#020b10;cursor:zoom-in}
.design-image img{width:100%;height:auto;aspect-ratio:1400/781;object-fit:contain}
.design-enlarge{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:7px;background:rgba(3,18,25,.9);border:1px solid rgba(247,244,237,.5);padding:8px 12px;font-size:.75rem;border-radius:3px}
.design-note{padding:13px 1px 0;min-height:132px}
.design-note .kicker{font-size:.65rem;letter-spacing:.11em}
.design-note h3{margin:3px 0 6px;font:400 1.35rem/1.2 var(--display);color:var(--paper)}
.design-note p:last-child{margin:0;color:var(--muted);font-size:.875rem;line-height:1.5;max-width:66ch}
.design-reference-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.design-reference-actions button{flex-shrink:0;min-height:44px;border:0;border-bottom:1px solid var(--rule-strong);padding:0 4px;background:transparent;cursor:pointer;color:var(--amber);font-size:.75rem}
.design-source{margin:12px 0 0;color:var(--dim);font-size:.6875rem}
#design-viewer{max-width:none;max-height:none;width:100vw;height:100dvh;margin:0;border:0;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:#031219;color:#f7f4ed;overscroll-behavior:contain}
#design-viewer::backdrop{background:#031219}
.design-viewer-body{height:100%;max-width:1800px;margin:auto;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px}
.design-viewer-head{display:flex;align-items:center;justify-content:space-between;gap:18px}
.design-viewer-head h2{font:400 clamp(1.25rem,3vw,2rem)/1.2 Georgia,serif;margin:3px 0}
.design-viewer-head p{margin:0;color:#efd4a1;font-size:.75rem}
#design-close{width:48px;height:48px;flex-shrink:0;border:1px solid #94a7aa;border-radius:50%;background:transparent;font:400 2rem/1 Helvetica,Arial,sans-serif;cursor:pointer}
#design-large{width:100%;height:100%;object-fit:contain;min-height:0}
#design-description{max-width:80ch;margin:0 auto;color:#c8d1d3;font-size:.9375rem;line-height:1.5;text-align:center}
@media(max-width:760px){.design-note{min-height:0}.design-tabs{gap:6px}.design-tabs button{font-size:.6875rem}.design-enlarge{right:8px;bottom:8px;padding:7px 10px}.design-source{margin-bottom:4px}}
@media(prefers-reduced-motion:reduce){.design-tabs button{transition:none}}