/* Mode navigation is shared; Studio's editor and timeline are isolated from the demo. */
#radiant-mode{background:#202a2a;color:#ecf1ed;border:1px solid #495651;border-radius:6px;padding:8px 28px 8px 12px;font-size:12px;margin-left:-12px}header{gap:26px}.header-actions{margin-left:auto}.studio-only{display:none!important}#studio-center{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}#studio-center #viewport{flex:1;min-height:0}.studio-mode .studio-only{display:block!important}.studio-mode header{height:56px;padding:0 18px}.studio-mode main{height:calc(100dvh - 56px)}.studio-mode .brand{font-size:26px}.studio-mode main>aside{width:280px;padding:14px 16px;background:#192224}.studio-mode #studio-right{width:290px;border-left:1px solid #35413d;border-right:0}.studio-mode .workspace-intro,.studio-mode #dataset-section,.studio-mode .aside-bottom,.studio-mode .scene-help,.studio-mode #cloud-legend,.studio-mode #category-legend,.studio-mode #classification-panel>.section-title{display:none!important}.studio-mode #workspace-section{border:0;padding-top:14px}.studio-mode .section-title{font-size:12px;letter-spacing:0;margin-bottom:10px;text-transform:none}.studio-mode .section-title>span{display:none}.studio-mode section{padding:14px 0}.studio-mode h2,.studio-mode h3{font-size:13px;font-weight:600;margin:0 0 12px}.studio-mode #studio-left>h2{font-size:15px}.studio-mode #st-composition h3{margin-top:20px}.studio-mode label{font-size:11px;margin:10px 0 7px;align-items:center}.studio-mode select,.studio-mode input:not([type=checkbox]):not([type=range]){width:100%;background:#111a1c;color:#eaf1ed;border:1px solid #43534c;border-radius:5px;padding:8px;font:inherit;font-size:11px;min-width:0}.studio-mode button{font-family:inherit;cursor:pointer}.studio-mode #studio-right button,.studio-mode #studio-left button,.studio-mode #studio-points button,.studio-mode #studio-timeline button{background:#202d2b;color:#e8f0eb;border:1px solid #475b50;border-radius:5px;padding:7px 9px;font-size:11px}.studio-mode button:disabled{opacity:.4;cursor:not-allowed}.studio-mode input[type=range]{margin:7px 0 11px;height:4px;accent-color:#d9f99a}.studio-mode .check{display:flex;justify-content:flex-start;gap:7px;font-size:11px}.studio-mode .check input{accent-color:#d9f99a}.studio-mode .studio-row{display:flex;align-items:center;gap:7px;margin-top:9px}.studio-row>*{flex:1;min-width:0}.studio-mode fieldset{border:0;padding:0;margin:0;min-width:0}.studio-mode .studio-muted,.studio-mode details p{font-size:10px;color:#9cafa7;line-height:1.5}.studio-mode #st-availability{margin:7px 0}.studio-mode .studio-choices{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0}.studio-mode .studio-choices button{padding:5px 8px;border-radius:13px;font-size:10px}.studio-mode .studio-choices button[aria-pressed=true]{background:#d9f99a;color:#192119;border-color:#d9f99a}.studio-mode .category-chip{font-size:10px;padding:5px 7px;gap:4px}.studio-mode .category-chip i{width:6px;height:6px}.studio-mode #classification-panel{border:0;padding:0 0 8px}.studio-mode #classification-panel summary{font-size:11px;margin:5px 0;padding-top:0;padding-bottom:0}.studio-mode #element-rows,.studio-mode #material-rows{gap:5px;margin:5px 0 9px}.studio-mode .category-reset{font-size:9px;top:0;padding:1px 5px}.studio-mode .appearance-details summary,.studio-mode details summary{font-size:11px;color:#b9cac1;cursor:pointer}.appearance-details{display:block}.studio-mode #appearance-section{border:0;padding-top:6px}.studio-mode #st-editing{position:sticky;top:-14px;z-index:4;background:#d9f99a;color:#172216;border-radius:3px;font-size:11px;font-weight:600;padding:7px 9px;margin:-3px 0 0}.studio-mode .read-only{opacity:.5}.studio-mode #studio-right h2{font-size:15px;margin-bottom:10px}.studio-mode #studio-right section{padding:16px 0}.studio-mode #st-keyframes{display:grid;gap:0;margin-bottom:10px;max-height:160px;overflow:auto}.studio-mode #st-keyframes button{text-align:left;border-radius:0;border-bottom:0;white-space:pre}.studio-mode #st-keyframes button:last-child{border-bottom:1px solid #475b50;border-radius:0 0 4px 4px}.studio-mode #st-keyframes button:first-child{border-radius:4px 4px 0 0}.studio-mode #st-keyframes button[aria-pressed=true]{box-shadow:inset 0 0 0 1px #d9f99a;color:#d9f99a;background:#2d3827}.studio-mode #st-key-info{padding:10px;border:1px solid #3d4c44;border-radius:5px}.studio-mode #st-key-title{font-size:11px}.studio-mode .primary{background:#d9f99a!important;border-color:#d9f99a!important;color:#152017!important;font-weight:600}.studio-mode #st-key-note{margin-bottom:0}.studio-mode .view-backups{margin-top:12px}.studio-mode .view-backups button{margin-top:5px}.studio-mode #studio-status{font-size:11px;line-height:1.5;color:#b8c9c0;white-space:pre-wrap}.studio-mode #st-download{color:#d9f99a;font-size:12px}.studio-mode #st-result{width:100%;margin-top:10px}.studio-mode #studio-progress{width:100%;accent-color:#d9f99a}.studio-annotation{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:10px}.studio-annotation span{flex:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.studio-mode .sr-only{margin:0}
.studio-mode #viewport>canvas:first-child{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#studio-overlay{position:absolute;pointer-events:none;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1}.studio-mode #viewport{background:#0d1416}.studio-mode .viewport-top{top:14px;left:16px;right:16px;flex-direction:row}.studio-mode .viewport-top .eyebrow,.studio-mode .bottom-bar,.studio-mode .orientation{display:none}.studio-mode .scene-label strong{font-size:13px;font-weight:600;letter-spacing:0}.studio-mode #studio-preview-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:6;background:#0d1416;pointer-events:none}.studio-mode #tree-side{width:125px;top:64px;right:16px;padding:9px}.studio-mode #tree-side svg{height:140px}.studio-mode #tree-side .side-title{font-size:7px}.studio-mode #tree-side strong{font-size:13px}
.studio-mode #studio-timeline{height:160px;flex-shrink:0;border-top:1px solid #43514a;background:#192224;padding:10px 24px 8px}.timeline-toolbar{display:flex;align-items:center;gap:12px;font-size:11px}.timeline-toolbar>span{color:#8fa49b;margin-left:auto}.timeline-toolbar output{font-size:11px;white-space:nowrap}#st-scrub{width:100%;margin:15px 0 0;height:3px}#st-track{position:relative;margin:4px 8px 0;height:72px;touch-action:none}#st-ruler{display:flex;justify-content:space-between;font-size:9px;color:#9cb0a6}.track-line{position:absolute;left:0;right:0;top:34px;height:1px;background:#71867a}#st-playhead{position:absolute;top:16px;bottom:17px;width:1px;background:#d9f99a;pointer-events:none}.studio-mode #studio-timeline .keyframe-marker{position:absolute;top:25px;width:18px;height:18px;transform:translateX(-50%);padding:0;border:0;background:none;touch-action:none}.keyframe-marker i{display:block;width:10px;height:10px;transform:rotate(45deg);background:#bdcbd0;margin:4px}.keyframe-marker[aria-pressed=true] i{background:#d9f99a;box-shadow:0 0 0 2px #d9f99a44}.keyframe-marker span{position:absolute;top:24px;left:50%;transform:translateX(-50%);font-size:9px;color:#a5b8ad;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.keyframe-marker:first-child span{left:0;transform:none;text-align:left}.keyframe-marker:last-child span{left:auto;right:0;transform:none;text-align:right}.keyframe-marker[aria-pressed=true] span{color:#d9f99a}.studio-running #st-edit,.studio-running #st-visual-editor{opacity:.6}.studio-mode button:focus-visible,.studio-mode select:focus-visible{outline:2px solid #d9f99a;outline-offset:2px}
#exhibition-notice{position:absolute;inset:76px 0 0;background:#111719;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}#exhibition-notice h1{font-size:30px}#exhibition-notice p{color:#a6bab0}#exhibition-notice button{padding:12px 18px;border:1px solid #70895c;border-radius:6px;background:#d9f99a;color:#172017;cursor:pointer}
@media(min-width:1550px){.studio-mode main>aside{width:310px;padding:16px 20px}.studio-mode #studio-right{width:310px}.studio-mode #studio-timeline{height:180px}}
@media(max-width:1150px){.studio-mode main>aside{width:240px;padding:12px}.studio-mode #studio-right{width:245px}.studio-mode #st-editing{top:-12px}.studio-mode #studio-timeline{padding-left:16px;padding-right:16px}.timeline-toolbar>span{display:none}}
@media(max-width:850px){.studio-mode main{min-width:960px;flex-direction:row}.studio-mode #studio-center{min-width:450px}.studio-mode main>aside{height:auto;display:block}.studio-mode #viewport{min-height:0}}
#radiant-mode{width:auto;flex:0 0 auto;min-width:115px}.studio-mode #colour-section>.section-title{font-size:0}.studio-mode #colour-section>.section-title:before{content:'Base view';font-size:12px}.studio-mode #mrt-section .section-title{font-size:0}.studio-mode #mrt-section .section-title:before{content:'Independent layer · MRT';font-size:11px}

/* Studio fills the screen: only its two sidebars own vertical scrolling. */
html:has(body.studio-mode){overflow:clip;overscroll-behavior:none}
body.studio-mode{position:fixed;inset:0;width:100%;height:100dvh;overflow:clip;display:flex;flex-direction:column}
.studio-mode>header{flex:0 0 56px;min-height:56px}
.studio-mode>main{display:grid;grid-template-columns:clamp(160px,23vw,310px) minmax(0,1fr) clamp(170px,24vw,310px);flex:1;min-width:0;min-height:0;width:100%;height:auto;overflow:hidden}
.studio-mode main>aside,.studio-mode #studio-right{display:block;width:auto;min-width:0;min-height:0;height:100%;max-height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable}
.studio-mode #studio-center{min-width:0;min-height:0;height:100%;overflow:hidden}
.studio-mode #studio-center #viewport{flex:1 1 0;min-height:0;overflow:hidden}
.studio-mode #studio-timeline{flex:0 0 160px;min-height:160px;margin:0;overflow:hidden}
.studio-mode #st-keyframes{max-height:none;overflow:visible}
@media(min-width:1550px){.studio-mode #studio-timeline{flex-basis:180px;min-height:180px}}

/* Shared inspector rhythm: one disclosure pattern in both workspaces. */
main>aside details{border:0;border-radius:0;background:transparent;padding:0;margin:8px 0 0}
main>aside details>summary,
.studio-mode main>aside details>summary,
#classification-panel details>summary,
#mrt-panel>summary{
 display:flex;align-items:center;gap:8px;position:relative;min-height:32px;
 padding:6px 0;margin:0;list-style:none;cursor:pointer;user-select:none;
 font-size:11px;font-weight:500;line-height:20px;color:#bacbc2;border-radius:4px;
}
main>aside summary::-webkit-details-marker{display:none}
main>aside summary::before{content:'';width:5px;height:5px;flex:0 0 5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);margin:0 4px 0 3px}
main>aside details[open]>summary::before{transform:rotate(45deg);margin-top:-3px}
main>aside summary:hover{background:#ffffff08;color:#edf3ef}
main>aside summary:focus-visible{outline:2px solid #d9f99a;outline-offset:2px}
main>aside details[open]>summary{margin-bottom:8px}
main>aside summary .category-reset,.studio-mode main>aside summary .category-reset{position:static;margin-left:auto;top:auto;padding:2px 6px;font-size:10px;line-height:18px;flex-shrink:0}
#classification-panel details{margin:0}
#classification-panel details+details{margin-top:8px}
#classification-panel #element-rows,#classification-panel #material-rows{margin:0 0 8px;gap:6px}
#appearance-section>details{margin:0}
#appearance-section label{margin:12px 0 8px}
#appearance-section input[type=range]{margin:0 0 12px}
#appearance-section .check{margin:4px 0 0}
#mrt-panel{margin-top:8px}
.studio-mode main>aside section,.studio-mode #studio-right section{padding:16px 0}
.studio-mode main>aside .section-title,.studio-mode main>aside h2,.studio-mode main>aside h3{margin:0 0 12px}
.studio-mode #workspace-section{padding:12px 0 16px}
.studio-mode #appearance-section{padding:12px 0;border-top:1px solid #354042}
.studio-mode #classification-panel{padding:0 0 12px}
.studio-mode main>aside label:not(.sr-only){margin:12px 0 8px;line-height:16px}
.studio-mode main>aside .check{margin:10px 0;gap:8px}
.studio-mode main>aside .check input{margin:0;flex-shrink:0}
.studio-mode main>aside .studio-row{margin-top:12px;gap:8px}
.studio-mode main>aside .studio-row label{margin-top:0}
.studio-mode main>aside input[type=range]{display:block;margin:0 0 12px}
.studio-mode #st-composition h3{margin:20px 0 12px}
.studio-mode .mrt-heading label{margin:0}
.studio-mode main>aside details p{margin:8px 0;line-height:1.5}
.studio-mode #st-key-info{padding:12px;border:0;border-radius:0;background:#ffffff03}
.studio-mode #st-key-note:empty,.studio-mode #st-availability:empty{display:none}
.studio-mode #st-edit>section:first-of-type{margin-top:16px}

/* Selects share an inset chevron; focus is quiet and contained. */
#radiant-mode,main>aside select,.studio-mode main>aside select{
 appearance:none;-webkit-appearance:none;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23b9cac1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
 padding:8px 38px 8px 12px;min-height:34px;line-height:16px;
 outline:none;box-shadow:none;
}
#radiant-mode{margin-left:0}
#radiant-mode:focus,main>aside select:focus,.studio-mode main>aside select:focus{outline:none;box-shadow:none}
#radiant-mode:focus-visible,main>aside select:focus-visible,.studio-mode main>aside select:focus-visible{outline:1px solid #9aafa3;outline-offset:-1px;border-color:#9aafa3}
#radiant-mode:hover,main>aside select:hover:not(:disabled){border-color:#708278}
main>aside :is(#extent,#colour-mode,#mrt-field){padding:8px 38px 8px 12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23b9cac1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.studio-mode #st-new{width:100%;text-align:left;margin-bottom:12px}
#st-library{display:grid;gap:4px}
.saved-animation{display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:4px}
.studio-mode #studio-right .saved-animation button{background:transparent;border-color:transparent;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:32px}
.studio-mode #studio-right .saved-animation button[aria-pressed=true]{background:#d9f99a15;color:#d9f99a;border-color:#d9f99a55}
.studio-mode #studio-right .saved-animation button:hover{background:#ffffff0c}
.studio-mode #studio-right .saved-animation button:last-child{text-align:center;font-size:18px;color:#9cafa7;padding:4px}
#st-save-state{margin-bottom:12px}

/* Contained focus across inspector controls, without an outer neon ring. */
.studio-mode main>aside :is(input,textarea,button,summary):focus,
.studio-mode header :is(input,button):focus,
.studio-mode #studio-timeline button:focus{outline:none;box-shadow:none}
.studio-mode main>aside :is(input,textarea,button,summary):focus-visible,
.studio-mode header :is(input,button):focus-visible,
.studio-mode #studio-timeline button:focus-visible{outline:1px solid #9aafa3;outline-offset:-1px}
.studio-mode main>aside input:not([type=checkbox]):not([type=range]),
.studio-mode main>aside textarea{padding:8px 12px;min-height:34px;line-height:16px}
.studio-mode #st-key-info{padding:12px}
.studio-mode #st-key-info #st-key-note{margin:12px 0 0;line-height:1.5;font-size:10px;color:#9cafa7}
.animation-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.studio-mode .animation-heading h2{margin:0!important}
.studio-mode .animation-heading #st-new{width:30px;min-height:30px;margin:0;padding:0;text-align:center;font-size:22px;background:transparent;border:0}
.saved-animation{grid-template-columns:minmax(0,1fr) 28px;align-items:start}
.studio-mode #studio-right .saved-animation>button{font-size:12px;text-align:left;padding:8px 10px;color:#e8f0eb}
.studio-mode #studio-right .saved-animation>button[aria-pressed=true]{background:#ffffff10;border-color:transparent;color:#edf3ef;font-weight:600}
.studio-mode #studio-right .animation-menu{position:relative;margin:0}
.studio-mode #studio-right .animation-menu>summary{justify-content:center;padding:0;margin:0;height:32px;font-size:18px}
.animation-menu>summary::before{display:none}
.studio-mode #studio-right .animation-menu[open]{z-index:10}
.studio-mode #studio-right .animation-menu>button{position:relative;left:-100px;width:128px;display:block;border:1px solid #43534c;background:#202a2a;text-align:left;font-size:11px;padding:8px}
#st-save-state{font-size:10px;margin:8px 0 0}
/* The animation actions float above the list, without expanding its row. */
.studio-mode #studio-right .animation-menu[open]>summary{margin:0}
.studio-mode #studio-right .animation-popup{position:absolute;top:34px;right:0;width:144px;padding:4px;border:1px solid #43534c;border-radius:6px;background:#202a2a;box-shadow:0 8px 24px #0005;z-index:20}
.studio-mode #studio-right .saved-animation .animation-popup>button{display:block;position:static;width:100%;min-height:30px;margin:0;padding:6px 10px;border:0;border-radius:3px;background:transparent;text-align:left;font-size:11px;font-weight:400;line-height:18px;color:#e8f0eb;white-space:nowrap}
.studio-mode #studio-right .saved-animation .animation-popup>button:hover{background:#ffffff0d}

.studio-mode #studio-right .saved-animation>.animation-delete{width:28px;min-height:32px;padding:4px;margin:0;text-align:center;font-size:18px;font-weight:400;color:#9cafa7;border:0;background:transparent}
.studio-mode #studio-right .saved-animation>.animation-delete:hover{color:#edf3ef;background:#ffffff0d}

.studio-mode #studio-right #st-edit>.animation-backup-section{margin-top:12px;padding:8px 0}
.studio-mode #studio-right .animation-backup-section>.view-backups{margin:0}

/* Compact timeline with labels kept inside the track edges. */
.studio-mode #studio-timeline{height:146px;min-height:146px;flex-basis:146px;padding:16px 24px 18px}
#st-markers .keyframe-marker:first-child span{left:0;right:auto;transform:none;text-align:left}
#st-markers .keyframe-marker:last-child:not(:first-child) span{left:auto;right:0;transform:none;text-align:right}

#st-markers .keyframe-marker span{width:auto;min-width:18px;overflow:visible}

/* Workspace selector aligned with the brand. */
header #radiant-mode{align-self:center;flex:0 0 128px;width:128px;min-width:128px;height:34px;min-height:34px;margin:0;padding:0 36px 0 12px;border:1px solid #394743;border-radius:6px;background-color:#202a29;background-position:right 10px center;background-size:14px;font-family:inherit;font-size:12px;font-weight:500;line-height:32px;letter-spacing:0;color:#e5ece8;cursor:pointer;vertical-align:middle}
header #radiant-mode:hover{background-color:#28332f;border-color:#607268}
header #radiant-mode:focus-visible{outline:1px solid #9aafa3;outline-offset:-1px;border-color:#9aafa3}
header:has(#radiant-mode){gap:20px}

/* Keep paired point tools aligned, and the ground toggle always discoverable. */
.studio-mode #studio-points .studio-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:12px}
.studio-mode #studio-points .studio-row .check{display:flex;align-items:center;justify-content:flex-start;margin:0;min-height:32px;line-height:16px;white-space:nowrap}
.studio-mode #studio-points #st-pin{min-height:32px;margin:0}
.studio-mode #studio-points .studio-row .check input{margin:0;width:14px;height:14px}
#appearance-section>.ground-grid-control,.studio-mode #appearance-section>.ground-grid-control{display:flex;align-items:center;gap:8px;margin:12px 0 0;min-height:24px}

/* Shared application shell across Demo, Studio and Exhibition. */
:root{--radiant-header-height:56px;--radiant-sidebar-width:clamp(240px,23vw,310px)}
body>header,.studio-mode>header{height:var(--radiant-header-height);min-height:var(--radiant-header-height);flex-basis:var(--radiant-header-height);padding:0 18px}
body>header .brand,.studio-mode>header .brand{font-size:26px;gap:12px}
body>header .logo{width:36px;height:40px;font-size:40px}
body>main{height:calc(100dvh - var(--radiant-header-height))}
body>main>aside,.studio-mode main>aside,.studio-mode #studio-right{width:var(--radiant-sidebar-width);padding:14px 16px}
.studio-mode>main{height:auto;grid-template-columns:var(--radiant-sidebar-width) minmax(0,1fr) var(--radiant-sidebar-width)}
#exhibition-notice{top:var(--radiant-header-height)}
@media(max-width:550px){body:not(.studio-mode)>main>aside{width:100%}}
/* Exhibition: touch-first controls surrounding an unrestricted scene. */
.exhibition-mode>main{position:relative;overflow:hidden}
.exhibition-mode main>aside,.exhibition-mode .bottom-bar,.exhibition-mode .orientation,.exhibition-mode .viewport-top,.exhibition-mode .header-actions{display:none!important}
#exhibition-controls{position:absolute;inset:20px;pointer-events:none;z-index:4;display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
#exhibition-controls nav,.ex-tools{pointer-events:auto;background:#192224f2;border:1px solid #43514a;border-radius:12px;padding:12px;box-shadow:0 8px 32px #0002}
#exhibition-controls nav{display:flex;flex-direction:column;gap:8px;width:200px}
#exhibition-controls button{min-height:48px;padding:12px 14px;border:1px solid #44554d;border-radius:8px;background:#202c29;color:#eaf0ed;font:inherit;font-size:14px;cursor:pointer;touch-action:manipulation}
#exhibition-controls button[aria-pressed=true]{background:#d9f99a;color:#172218;border-color:#d9f99a}
#exhibition-controls button:disabled{opacity:.4;cursor:default}
#exhibition-controls small{display:block;font-size:11px;margin-top:4px}
.ex-tools{width:320px;max-height:calc(100dvh - 96px);overflow:auto}
#exhibition-controls section{padding:12px 4px;border:0}
#exhibition-controls h2,#exhibition-controls h3{margin:0;font-size:18px;font-weight:600}
.ex-range-label{display:flex;justify-content:space-between;margin:22px 0 12px;font-size:14px}
#exhibition-controls input[type=range]{height:28px;margin:0 0 16px;touch-action:pan-x}
.ex-bands{display:flex;gap:8px}.ex-bands button{flex:1}
#exhibition-controls p{font-size:12px;line-height:1.5;color:#aabbaf;margin:12px 0 0}
#ex-categories{margin-top:12px;border-top:1px solid #43514a}
#ex-categories summary{padding:18px 4px;cursor:pointer;font-size:17px;font-weight:600;min-height:56px}
.ex-group-heading{display:flex;align-items:center;justify-content:space-between;margin:8px 0 12px}
.ex-chips{display:flex;flex-direction:column;gap:8px}
.ex-chip{display:flex;gap:2px}.ex-chip>button:first-child{flex:1;display:flex;align-items:center;gap:10px;text-align:left}.ex-chip>button:last-child{flex:0 0 48px;padding:10px!important}
.ex-dot{width:10px;height:10px;flex-shrink:0;border-radius:50%}
#ex-reset{width:100%;margin-top:16px}
.ex-gradient{height:8px;margin-top:12px;border-radius:4px;background:linear-gradient(to right,#000004,#4a0c6b,#a52c60,#ed6925,#f7d13d,#fcffa4)}
@media(max-width:900px){#exhibition-controls{inset:12px;gap:12px}#exhibition-controls nav{width:170px}.ex-tools{width:270px}}
/* Heat controls stay fixed while categories scroll independently. */
.ex-tools{display:flex;flex-direction:column;overflow:hidden}
.ex-tools>section,.ex-tools>#ex-reset{flex:0 0 auto}
#ex-categories{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
#ex-categories>summary{position:sticky;top:0;z-index:1;background:#192224;padding:14px 4px}
.ex-chip{gap:10px}
#ex-groups .ex-group-heading>button{font-size:12px;padding:10px;min-height:44px}

#exhibition-controls nav{flex-direction:row;width:auto;padding:5px;gap:4px;border-radius:10px}
#exhibition-controls nav button{min-width:104px;min-height:48px;border-color:transparent;background:transparent}
#exhibition-controls nav button[aria-pressed=true]{background:#d9f99a;color:#172218}

#ex-settings{position:relative;margin:0;border-left:1px solid #43514a;padding-left:4px}
#ex-settings>summary{display:flex;align-items:center;justify-content:center;min-height:48px;padding:12px;list-style:none;cursor:pointer;font-size:14px;border-radius:8px}
#ex-settings>summary::-webkit-details-marker{display:none}
#ex-settings>summary:hover,#ex-settings[open]>summary{background:#ffffff0c}
.ex-settings-panel{position:absolute;top:58px;left:0;width:240px;padding:18px;background:#192224;border:1px solid #43514a;border-radius:10px;box-shadow:0 8px 24px #0004}
#ex-settings label{margin:0 0 12px;font-size:14px;gap:16px}
#exhibition-controls #ex-settings input{margin:0;width:100%}

.ex-scene-settings{display:flex;align-items:flex-start;gap:12px;pointer-events:auto}
#ex-settings{padding:5px;border:1px solid #43514a;border-radius:10px;background:#192224f2}
#ex-settings .ex-settings-panel{left:auto;right:0;top:64px}
#ex-settings label[for="ex-point-density"]{margin-top:20px}

#st-background-swatches{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.studio-mode main>aside button.background-swatch{width:34px;height:34px;padding:0;border:1px solid #64746b;border-radius:6px;background:var(--swatch)}
.studio-mode main>aside button.background-swatch[aria-pressed=true]{box-shadow:0 0 0 2px #d9f99a;outline-offset:3px}
.studio-mode #st-colour-editor{margin-top:12px}
.studio-mode main>aside #st-new-colour{padding:3px;height:36px;width:100%;cursor:pointer}

/* Background palette: swatches and add action share one compact row. */
.background-palette{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
#st-background-swatches{display:contents}
.studio-mode main>aside button.background-swatch{position:relative;width:36px;height:36px;flex:0 0 36px;border:1px solid #65736c;border-radius:8px;box-shadow:inset 0 0 0 3px #192224;transition:border-color .15s}
.studio-mode main>aside button.background-swatch[aria-pressed=true]{border-color:#b9cbbb;box-shadow:inset 0 0 0 3px #192224}
.background-swatch[aria-pressed=true]::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;font-size:16px;font-weight:600;color:var(--swatch-mark)}
.studio-mode main>aside button.background-swatch:hover{border-color:#e2ebdf}
.studio-mode main>aside #st-add-colour{width:36px;height:36px;padding:0;flex:0 0 36px;border:1px dashed #5b6b62;border-radius:8px;background:transparent;color:#b7c6bd;font-size:22px;line-height:1;cursor:pointer}
.studio-mode main>aside #st-add-colour:hover,.studio-mode main>aside #st-add-colour[aria-expanded=true]{background:#ffffff08;border-style:solid;color:#e7eee8}
.studio-mode #st-colour-editor{margin-top:12px;padding:12px;background:#121b1d;border:1px solid #38473f;border-radius:8px}
.studio-mode #st-colour-editor label{margin:0 0 10px;font-size:11px}
.studio-mode main>aside #st-new-colour{height:40px;padding:4px;border:1px solid #4b5b51;border-radius:6px;background:#202a26}
#st-new-colour::-webkit-color-swatch-wrapper{padding:0}
#st-new-colour::-webkit-color-swatch{border:0;border-radius:3px}
.studio-mode #st-colour-editor .studio-row{margin-top:10px}
.studio-mode #st-save-colour{background:#d9f99a;color:#182217;border-color:#d9f99a}

/* Match the existing Studio inspector rather than a separate card style. */
.studio-mode #studio-background #st-colour-editor{margin-top:12px;padding:0;background:transparent;border:0;border-radius:0}
.studio-mode #studio-background #st-colour-editor button{min-height:32px;padding:7px 9px;border:1px solid #475b50;border-radius:5px;background:#202d2b;color:#e8f0eb;font-family:inherit;font-size:11px;font-weight:400;line-height:16px;cursor:pointer}
.studio-mode #studio-background #st-colour-editor #st-save-colour{background:#d9f99a;color:#152017;border-color:#d9f99a;font-weight:600}
.studio-mode #studio-background #st-colour-editor .studio-row{gap:8px;margin-top:12px}
.studio-mode #studio-background #st-new-colour{height:34px;min-height:34px;padding:4px;border:1px solid #43534c;border-radius:5px;background:#111a1c}
.studio-mode #studio-background button.background-swatch,.studio-mode #studio-background #st-add-colour{border-radius:5px;width:34px;height:34px;flex-basis:34px}
.studio-mode #studio-background #st-add-colour{border:1px solid #475b50;background:#202d2b;font-size:18px}

/* Plain colour swatches, without nested outlines. */
.studio-mode #studio-background button.background-swatch,
.studio-mode #studio-background button.background-swatch[aria-pressed=true],
.studio-mode #studio-background button.background-swatch:hover{border:0;box-shadow:none;background:var(--swatch)}
.studio-mode #studio-background #st-add-colour{border:0;background:#ffffff08;color:#b7c6bd}
.studio-mode #studio-background #st-add-colour:hover{background:#ffffff10;color:#edf3ef}
.studio-mode #studio-background .background-palette{gap:6px}
.studio-mode #studio-background button.background-swatch,.studio-mode #studio-background #st-add-colour{width:24px;height:24px;min-height:24px;flex-basis:24px;border-radius:4px;padding:0}
.studio-mode #studio-background #st-add-colour{font-size:16px}
.studio-mode #studio-background .background-swatch[aria-pressed=true]::after{font-size:12px}

.ex-gesture-hints{position:absolute;right:0;bottom:0;display:flex;align-items:center;gap:16px;padding:8px 10px;border-radius:6px;background:#111719c9;color:#a7b8b0;pointer-events:none}
.ex-gesture-hints>span{display:flex;align-items:center;gap:6px;font-size:11px;line-height:16px}
.ex-gesture-hints svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.exhibition-mode .ex-tools{max-height:calc(100dvh - 148px)}