#ai-art-page { min-width: 0; max-width: 1280px; margin-inline: auto; }
#ai-art-page [hidden] { display: none !important; }
#ai-art-page .art-intro { margin: 0 0 20px; color: var(--muted); }
#ai-art-page .art-surface { width: 100%; max-width: 1280px; }
#mutual-form-art{--background:#111111;--foreground:#dddddd;--purple:#886f9a;--orange:#bd754d;background:var(--background);color:var(--foreground);padding:18px 22px;}
#mutual-form-art .art-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
#mutual-form-art h3{margin:0;font-size:17px;font-weight:500;}
#mutual-form-art button{color:#d1d0c5;background:transparent;border:1px solid #454941;min-height:44px;padding:8px 12px;font:inherit;cursor:pointer;}
#mutual-form-art canvas{display:block;width:100%;height:clamp(360px,56vw,590px);touch-action:none;cursor:grab;}
#mutual-form-art canvas:active{cursor:grabbing;}
.art-parameters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:16px;}
.art-parameters label{display:grid;gap:8px;min-width:0;font-size:14px;}
.art-parameters input{width:100%;min-width:0;min-height:32px;accent-color:#c6baca;}
#mutual-form-art .art-accessible-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.art-gallery { max-width:1280px; }
.art-gallery-work { margin:0 0 48px; }
.art-gallery-work h3 { margin:0 0 16px;font-weight:500;font-size:22px; }
.art-gallery-figure { margin:0;background:#111313;position:relative; }
.art-gallery-figure img { display:block;width:100%;height:auto;max-height:78vh;object-fit:contain; }
.art-image-status { position:absolute;inset:0;display:grid;place-items:center;color:#d3d1c9;margin:0;pointer-events:none; }
.art-gallery-figure button { position:absolute;left:50%;top:60%;transform:translateX(-50%);background:var(--surface); }
.art-image-links { display:flex;gap:24px;flex-wrap:wrap;margin-top:12px; }
.art-image-links a { color:var(--primary);min-height:40px;display:inline-flex;align-items:center;font-size:14px; }
#observerless-art { --background: #101111; --foreground: #e7e5db; --orange: #b3724c; padding: 18px 22px 12px; color: var(--foreground); background: var(--background); }
#observerless-art .art-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
#observerless-art h3 { flex: 1; margin: 0; font-size: 17px; font-weight: 500; letter-spacing: .12em; }
#observerless-art button { color: #d1d0c5; background: transparent; border: 1px solid #454941; padding: 8px 12px; min-height: 44px; font: inherit; cursor: pointer; }
#observerless-art button:hover { background: #272a26; }
#observerless-art button:focus-visible { outline: 2px solid #d1d0c5; outline-offset: 3px; }
#observerless-art canvas { display: block; width: 100%; height: clamp(370px,65vh,660px); touch-action: none; cursor: crosshair; }
#observerless-art .art-accessible-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* Horizontal scrolling is for the mobile bottom bar, not the desktop sidebar. */
@media(max-width:700px) {
  .bottom-nav { display: flex; flex-direction: row; align-items: stretch; overflow-x: auto; overscroll-behavior-x: contain; justify-content: flex-start; gap: 2px; scrollbar-width: thin; }
  .bottom-nav .nav-button { flex: 1 0 70px; min-width: 70px; white-space: nowrap; }
}
@media(max-width:900px) {
  #observerless-art { padding: 12px 10px; }
  #mutual-form-art { padding:12px 10px; }
  #observerless-art h3 { font-size: 15px; }
  #observerless-art button { padding: 8px; font-size: 12px; }
  #observerless-art canvas { height: clamp(370px,62vh,580px); }
}
/* Direct exhibition: both works are visible without an inner tab. */
#ai-art-page .art-surface { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch;margin-bottom:40px; }
.art-slot { min-width:0; }
.art-slot > .room-art-work { height:100%;box-sizing:border-box; }
#mutual-form-art, #observerless-art { padding:16px; }
#mutual-form-art canvas, #observerless-art canvas { height:clamp(260px,42vh,440px); }
#ai-art-page .art-controls { flex-wrap:wrap; }
#ai-art-page .art-controls h3 { letter-spacing:0; }
.art-loading-title { font-size:17px;font-weight:500; }
@media(max-width:1100px) {
  #ai-art-page .art-surface { grid-template-columns:minmax(0,1fr); }
  #mutual-form-art canvas, #observerless-art canvas { height:clamp(280px,40vh,380px); }
}