/* Templar Screens theme layer for the TKS Assembly Explorer.
   Values from the Templar Screens Design System (tokens.json) and Brand Guidelines v1.0:
   gold and shadow, flat surfaces, 1px rules, Cinzel / Cormorant / Pinyon / Inter. */
/* Brand faces, self-hosted (SIL Open Font License) so the page works offline and on localhost */
@font-face{font-family:'Cinzel';font-weight:500;font-style:normal;font-display:swap;src:url('./assets/fonts/cinzel-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Cinzel';font-weight:600;font-style:normal;font-display:swap;src:url('./assets/fonts/cinzel-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:300;font-style:normal;font-display:swap;src:url('./assets/fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:400;font-style:normal;font-display:swap;src:url('./assets/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:300;font-style:italic;font-display:swap;src:url('./assets/fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:400;font-style:italic;font-display:swap;src:url('./assets/fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:400;font-style:normal;font-display:swap;src:url('./assets/fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-style:normal;font-display:swap;src:url('./assets/fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-style:normal;font-display:swap;src:url('./assets/fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Pinyon Script';font-weight:400;font-style:normal;font-display:swap;src:url('./assets/fonts/pinyon-script-latin-400-normal.woff2') format('woff2')}
:root{
 --charcoal:#0c0a07;--charcoal-soft:#1a1610;--forest:#23433a;--gold:#b89653;--gold-light:#d8b876;--olive-gold:#8a6d35;
 --cream:#f5efe3;--stone-light:#ece7dd;--stone:#b8b1a3;--bark:#5a4f40;
 --hair:rgba(184,150,83,.28);--hair-soft:rgba(184,150,83,.16);--line:rgba(236,231,221,.12);--muted:var(--stone);--panel:var(--charcoal-soft);
 --scrim:linear-gradient(rgba(12,10,7,0),rgba(12,10,7,.72));
 --f-display:'Cormorant Garamond',Georgia,serif;--f-body:'Cormorant Garamond',Georgia,serif;--f-script:'Pinyon Script','Snell Roundhand',cursive;--f-ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
 --ease:cubic-bezier(.22,.61,.36,1);--dur:260ms;
 font-family:var(--f-ui);color:var(--stone-light);background:var(--charcoal);
}
html,body{background:var(--charcoal);color:var(--stone-light);font-family:var(--f-ui)}

/* Controls: flat, near-square, 1px lines, quiet hover */
button{border-radius:2px;background:transparent;border-color:var(--line);color:var(--stone-light);transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
button:hover:not(:disabled){background:rgba(184,150,83,.06);border-color:var(--gold);color:var(--gold-light)}
button:active:not(:disabled){transform:none}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible,canvas:focus-visible{outline:1px solid var(--gold-light);outline-offset:3px}
input[type=range]{accent-color:var(--gold)}

/* Header */
header{background:var(--charcoal);border-bottom:1px solid var(--hair)}
.mark{width:auto;height:auto;border:0;background:none}
.mark img{display:block;height:46px;width:auto}
.brand b{font-family:var(--f-display);font-weight:500;font-size:22px;letter-spacing:.16em;color:var(--cream)}
.brand b>span:first-child{color:var(--gold);font-family:var(--f-ui);font-weight:300}
.brand b .brand-subtitle{font-family:var(--f-ui);font-size:9px;font-weight:500;letter-spacing:.34em;color:var(--stone)}
.header-caption{font-family:var(--f-ui);font-size:9px;font-weight:600;letter-spacing:.28em;color:var(--gold)}

/* Stage */
#stage{background-color:var(--charcoal);background-image:radial-gradient(ellipse at 56% 46%,#24302a 0,#18201b 30%,#110f0b 62%,var(--charcoal) 90%)}
#stage:before{display:none}
#stage:after{border-color:rgba(184,150,83,.38)}
.eyebrow{font-family:var(--f-ui);font-size:10px;font-weight:600;letter-spacing:.24em;color:var(--gold)}
.title-rule{width:40px;background:var(--gold)}
h1{font-family:var(--f-display);font-weight:500;font-size:clamp(40px,4.2vw,64px);line-height:1.04;letter-spacing:.06em;color:var(--cream);margin:20px 0 14px}
h1 em{display:block;font-family:var(--f-script);font-style:normal;font-weight:400;font-size:1.12em;line-height:1.05;letter-spacing:0;color:var(--gold-light);text-transform:none;margin-top:.02em}
.stage-title p{font-family:var(--f-body);font-style:italic;font-weight:300;font-size:18px;line-height:1.55;letter-spacing:0;color:var(--stone);max-width:380px}
.stage-index{font-family:var(--f-ui);font-size:10px;font-weight:500;letter-spacing:.24em;color:var(--stone-light)}
.stage-index span{font-size:8px;letter-spacing:.28em;color:var(--gold)}
.view-label{font-family:var(--f-ui);font-size:9px;font-weight:500;letter-spacing:.22em;color:var(--stone-light)}
.dot{background:var(--gold);box-shadow:none}
.scene-shortcut{border-left:1px solid var(--gold);background:none}
.scene-shortcut:hover:not(:disabled){background:none;border-color:var(--gold-light)}
.scene-shortcut>span{font-size:8px;font-weight:600;letter-spacing:.24em;color:var(--stone)}
.scene-shortcut b{font-family:var(--f-body);font-style:italic;font-weight:400;font-size:18px;color:var(--cream)}
.scene-shortcut i{color:var(--gold)}
.view-tools{background:rgba(12,10,7,.86);border:1px solid var(--hair);border-radius:0;box-shadow:none;padding:0;gap:0}
.view-tools button{border:0;border-radius:0;font-size:10px;font-weight:500;letter-spacing:.08em;color:var(--stone-light)}
.view-tools button:first-child{border-right:1px solid var(--hair)}
.view-tools button:hover:not(:disabled){background:rgba(184,150,83,.08);color:var(--gold-light)}
.view-tools button.active{background:none;color:var(--gold-light);box-shadow:inset 0 -1px 0 var(--gold)}
kbd{font-family:var(--f-ui);color:var(--stone);border:1px solid var(--hair);border-radius:0}
.stage-bottom{font-family:var(--f-ui);font-size:8px;letter-spacing:.06em;color:var(--stone)}
.stage-bottom b{font-size:8px;letter-spacing:.18em;color:var(--stone-light)}
.stage-bottom i{color:var(--gold)}
.stage-bottom>span:last-child{font-size:8px;letter-spacing:.22em}
.stage-bottom>span:last-child span{color:var(--gold)}

/* Screen dock */
.screen-dock{background:rgba(12,10,7,.88);border:1px solid var(--hair);border-top:1px solid var(--gold);border-radius:0;box-shadow:none}
.dock-label{font-size:9px;font-weight:600;letter-spacing:.24em;color:var(--gold)}
#screen-position-output{font-family:var(--f-body);font-style:italic;font-size:16px;color:var(--cream)}
.screen-buttons button{border-color:var(--line);color:var(--stone-light);font-weight:500}
.screen-buttons button:first-child,.screen-buttons button:last-child{border-color:var(--gold);color:var(--gold-light)}
.screen-buttons button:hover:not(:disabled){border-color:var(--gold-light);background:rgba(184,150,83,.1);color:var(--gold-light)}
.travel-slider>div,#screen-motion-note{color:var(--stone)}

/* Side panel */
aside{background:var(--charcoal-soft);border-left:1px solid var(--hair);scrollbar-color:#4a3f2c var(--charcoal-soft)}
.panel-heading:before{content:"";display:block;width:40px;height:1px;background:var(--gold);margin-bottom:16px}
.panel-heading .eyebrow{font-size:9px;letter-spacing:.24em}
.panel-heading h2{font-family:var(--f-display);font-weight:500;font-size:26px;line-height:1.2;letter-spacing:.06em;color:var(--cream);margin:14px 0 10px}
.panel-heading h2 span{display:block;font-family:var(--f-body);font-style:italic;font-weight:300;font-size:26px;letter-spacing:0;color:var(--stone);margin-top:4px}
.panel-heading p{font-family:var(--f-body);font-size:17px;font-weight:300;line-height:1.55;color:var(--stone)}
.actions .primary{background:var(--gold);border-color:var(--gold);color:var(--charcoal);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:11px}
.actions .primary:hover:not(:disabled){background:var(--olive-gold);border-color:var(--olive-gold);color:var(--cream)}
.actions button{letter-spacing:.06em}
#effects-toggle,.top-actions #effects-toggle,#mobile-shader-slot #effects-toggle{border:1px solid var(--hair);border-radius:2px;color:var(--gold-light)}
#effects-toggle[aria-pressed=true]{background:rgba(184,150,83,.1);border-color:var(--gold)}
.section-nav{background:var(--charcoal-soft);border:0;border-bottom:1px solid var(--hair);border-radius:0;padding:0;gap:0;box-shadow:none}
.section-nav button{border-radius:0;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.section-nav button:hover:not(:disabled){background:none}
.section-nav button[aria-pressed=true]{background:none;color:var(--gold-light);font-weight:600;box-shadow:inset 0 -1px 0 var(--gold)}
.control-section{border-bottom:1px solid var(--hair-soft)}
.section-number{font-family:var(--f-body);font-style:italic;font-size:16px;color:var(--gold);padding-top:0}
.control-section summary b{font-family:var(--f-display);font-weight:500;font-size:16px;letter-spacing:.04em;color:var(--cream)}
.control-section[open] summary b{color:var(--cream)}
.control-section summary small{font-family:var(--f-ui);color:var(--stone)}
.section-chevron{color:var(--stone)}
.control-section[open] .section-chevron{color:var(--gold)}
.configuration{border-bottom:1px solid var(--line)}
.configuration>label,.appearance>label:first-child{font-weight:500;color:var(--stone-light)}
.configuration select,.appearance select,.fabric-selector>select{background:var(--charcoal);border:1px solid var(--hair);border-radius:2px;color:var(--cream);font-family:var(--f-ui)}
.configuration select:hover:not(:disabled),.fabric-selector>select:hover:not(:disabled){border-color:var(--gold)}
select option{background:var(--charcoal);color:var(--cream)}
.configuration p{color:var(--stone)}
.configuration p[role=status]{color:#e3a58f}
.finish-heading label,.fabric-selector>label{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.finish-heading button{color:var(--gold-light);border-color:var(--hair)}
.finish-current b{font-family:var(--f-body);font-weight:400;font-size:24px;letter-spacing:0;color:var(--cream)}
.finish-current span{font-family:var(--f-ui);font-size:10px;font-weight:500;letter-spacing:.2em;color:var(--gold)}
.swatch-chip{border-radius:0;box-shadow:inset 0 0 0 1px rgba(236,231,221,.16)}
.finish-swatch small{font-family:var(--f-ui);font-size:9px;letter-spacing:.06em;color:var(--stone)}
.finish-swatch.selected,.fabric-swatch[aria-pressed=true]{border-color:var(--gold);background:rgba(184,150,83,.06)}
.finish-swatch.selected .swatch-chip:after,.fabric-swatch[aria-pressed=true] .fabric-chip:after{border-radius:0;background:var(--charcoal);color:var(--gold-light);font-size:11px}
.finish-selector p,.fabric-selector p{color:var(--stone-light)}
.finish-selector .finish-disclaimer,.fabric-selector .fabric-note{color:var(--stone)}
.fabric-selector>b{font-family:var(--f-body);font-weight:400;font-size:22px;letter-spacing:0;color:var(--cream)}
.fabric-selector #fabric-status{color:var(--gold-light)}
.fabric-swatch{color:var(--stone-light)}
.fabric-chip{border-radius:0;box-shadow:inset 0 0 0 1px rgba(236,231,221,.16)}
.fabric-optics{border-top:1px solid var(--gold);color:var(--stone)}
.fabric-optics b{font-family:var(--f-body);font-weight:300;font-size:30px;letter-spacing:0;color:var(--cream)}
.fabric-source{color:var(--gold)}
.fabric-source:hover{color:var(--gold-light)}
.landscape-heading{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.landscape-options button{border-radius:0;border-color:var(--hair);background-color:var(--charcoal);font-weight:500;letter-spacing:.06em;color:var(--cream)}
.landscape-options button[aria-pressed=true]{border-color:var(--gold-light);box-shadow:inset 0 0 0 1px var(--gold-light)}
.landscape-options button[data-scene=mountain]{background-image:var(--scrim),url('./assets/landscapes/mountain.png')}
.landscape-options button[data-scene=desert]{background-image:var(--scrim),url('./assets/landscapes/desert.png')}
.landscape-options button[data-scene=beach]{background-image:var(--scrim),url('./assets/landscapes/beach.png')}
.photo-upload-card{border:1px solid var(--hair-soft);border-radius:0;background:none}
.custom-photo-actions [aria-pressed="true"]{border-color:var(--gold);background:rgba(184,150,83,.12)}

/* The one Forest surface on the page */
.effects-card{border:0;border-top:1px solid var(--gold);border-radius:0;background:var(--forest)}
.effects-title .eyebrow{color:var(--gold-light)}
.effects-title b{font-family:var(--f-display);font-weight:500;font-size:17px;letter-spacing:.04em;color:var(--cream)}
.effects-switch>span[aria-hidden]{border-radius:2px;background:var(--charcoal);border-color:var(--hair)}
.effects-switch>span[aria-hidden]:after{border-radius:1px;background:var(--stone)}
.effects-switch input:checked+span{background:var(--gold);border-color:var(--gold)}
.effects-switch input:checked+span:after{background:var(--charcoal)}
.effects-switch input:focus-visible+span{outline:1px solid var(--gold-light)}
.effects-range-label{color:var(--stone-light)}
.effects-range-label output{color:var(--gold-light)}
.effects-card input[type=range]{accent-color:var(--gold-light)}
.effects-card .fabric-note{color:var(--stone-light)}
.edge-option{color:var(--stone-light)}
.edge-option input{accent-color:var(--gold)}
.spacing>label{color:var(--stone-light)}
.spacing output{color:var(--gold-light)}
.spacing>div{color:var(--stone)}
aside footer{border-top:1px solid var(--gold);margin-top:auto;padding-top:18px;font-size:9px;letter-spacing:.12em;color:var(--stone)}

/* Overlays */
#tooltip{background:rgba(12,10,7,.96);color:var(--stone-light);border:1px solid var(--hair);border-top-color:var(--gold);border-radius:0;box-shadow:none;font-family:var(--f-ui)}
#color-legend{color:var(--stone)}
#loading{background:radial-gradient(ellipse at center,#1f2a24,var(--charcoal) 70%);color:var(--stone-light)}
#loading b{font-family:var(--f-display);font-weight:500;font-size:18px;letter-spacing:.05em;color:var(--cream)}
#load-message,#loading>span:last-of-type{font-family:var(--f-body);font-style:italic;font-size:16px;color:var(--stone)}
.spinner{border-color:var(--hair-soft);border-top-color:var(--gold);border-right-color:var(--gold)}

/* Breakpoints: keep Cinzel tracked positive at every size */
@media(min-width:1700px){h1{font-size:72px}}
@media(max-width:1100px){h1{font-size:44px;letter-spacing:.05em}.stage-title p{font-size:16px}.panel-heading h2,.panel-heading h2 span{font-size:23px}}
@media(min-width:761px) and (max-height:860px){h1{font-size:46px;letter-spacing:.05em;margin-top:16px}.stage-title p{font-size:16px}}
@media(max-width:760px){
 header{border-bottom:1px solid var(--hair)}.mark img{height:36px}.brand b{font-size:18px}
 h1{font-size:clamp(32px,8vw,50px);letter-spacing:.05em;margin:14px 0 10px}h1 em{letter-spacing:0}
 .stage-title p{font-size:15px}
 aside{border-top:1px solid var(--gold);border-left:0}
 .section-nav{position:sticky;top:0;background:var(--charcoal-soft);backdrop-filter:none}
 .panel-heading h2,.panel-heading h2 span{font-size:26px}
}
@media(max-width:370px){h1{font-size:30px}}
#stage:after{border-color:rgba(184,150,83,.22)}
@media(min-width:761px){.top-actions{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr) minmax(0,.8fr)}.actions .primary{letter-spacing:.08em;font-size:10px}.primary span{margin-right:6px}}

/* Simplified viewer: no top bar or decorative overlays; the stage and controls fill the frame */
main{height:100dvh}
#stage:after{display:none}
.top-actions{margin-top:0}
aside{padding-top:24px}
.scene-shortcut{top:28px}
.control-section>summary{min-height:64px}
#mobile-shader-slot{display:none}
@media(min-width:761px) and (max-height:860px){.scene-shortcut{top:24px}}
@media(max-width:1100px){.scene-shortcut{top:24px}}
@media(max-width:760px){
 main{height:auto}
 .scene-shortcut{top:20px}
 #mobile-shader-slot{display:flex}
 .top-actions{grid-template-columns:minmax(0,1fr) auto auto}
 aside{border-top:1px solid var(--hair);padding-top:20px}
}
.control-section>summary>span:first-child{flex:1;min-width:0}
@media(max-width:760px){.actions .primary{font-size:10px;letter-spacing:.06em;padding:0 10px}.primary span{margin-right:6px}}
.control-section>summary>span.section-chevron{flex:0 0 auto}

/* Light controls: #faf9f5 surfaces with gold accents. Gold (#b89653) carries rules,
   fills, borders and active states; small gold text uses Olive Gold (#8a6d35, 4.6:1 on #faf9f5). */
:root{--paper:#faf9f5;--paper-ink:#0c0a07;--paper-body:#5a4f40;--paper-line:rgba(12,10,7,.12);--paper-line-strong:rgba(12,10,7,.22);--gold-ink:#8a6d35}

/* Side panel */
aside{background:var(--paper);color:var(--paper-ink);border-left:1px solid var(--paper-line);scrollbar-color:#d6cdb8 var(--paper)}
aside button{color:var(--paper-ink);border-color:var(--paper-line-strong);background:transparent}
aside button:hover:not(:disabled){background:rgba(184,150,83,.1);border-color:var(--gold);color:var(--paper-ink)}
aside button:focus-visible,aside select:focus-visible,aside input:focus-visible,aside summary:focus-visible,aside a:focus-visible{outline:1px solid var(--gold-ink);outline-offset:3px}
aside .actions .primary{background:var(--gold);border-color:var(--gold);color:var(--paper-ink)}
aside .actions .primary:hover:not(:disabled){background:var(--olive-gold);border-color:var(--olive-gold);color:var(--paper)}
aside #effects-toggle,aside .top-actions #effects-toggle,aside #mobile-shader-slot #effects-toggle{border-color:var(--gold);color:var(--gold-ink);background:transparent}
aside #effects-toggle[aria-pressed=true]{background:rgba(184,150,83,.14)}
aside .section-nav{background:var(--paper);border-bottom:1px solid var(--paper-line)}
aside .section-nav button{border:0;color:var(--paper-body)}
aside .section-nav button:hover:not(:disabled){background:none;color:var(--paper-ink)}
aside .section-nav button[aria-pressed=true]{color:var(--gold-ink);box-shadow:inset 0 -1px 0 var(--gold)}
aside .control-section{border-bottom:1px solid var(--paper-line)}
aside .control-section summary b,aside .control-section[open] summary b{color:var(--paper-ink)}
aside .control-section summary small{color:var(--paper-body)}
aside .section-chevron{color:var(--paper-body)}
aside .control-section[open] .section-chevron{color:var(--gold)}
aside .configuration{border-bottom:1px solid var(--paper-line)}
aside .configuration>label,aside .appearance>label:first-child{color:var(--paper-ink)}
aside .configuration select,aside .appearance select,aside .fabric-selector>select{background:#fff;border:1px solid var(--paper-line-strong);color:var(--paper-ink)}
aside .configuration select:hover:not(:disabled),aside .fabric-selector>select:hover:not(:disabled){border-color:var(--gold)}
aside select option{background:#fff;color:var(--paper-ink)}
aside .configuration p{color:var(--paper-body)}
aside .configuration p[role=status]{color:#a3412a}
aside .finish-heading label,aside .fabric-selector>label,aside .landscape-heading{color:var(--gold-ink)}
aside .finish-heading button{color:var(--gold-ink);border-color:var(--gold)}
aside .finish-current b,aside .fabric-selector>b{color:var(--paper-ink)}
aside .finish-current span{color:var(--gold-ink)}
aside .swatch-chip,aside .fabric-chip{box-shadow:inset 0 0 0 1px rgba(12,10,7,.14)}
aside .finish-swatch,aside .fabric-swatch{border-color:transparent}
aside .finish-swatch small{color:var(--paper-body)}
aside .fabric-swatch{color:var(--paper-ink)}
aside .finish-swatch.selected,aside .fabric-swatch[aria-pressed=true]{border-color:var(--gold);background:rgba(184,150,83,.1)}
aside .finish-selector p,aside .fabric-selector p{color:var(--paper-ink)}
aside .finish-selector .finish-disclaimer,aside .fabric-selector .fabric-note{color:var(--paper-body)}
aside .fabric-selector #fabric-status{color:var(--gold-ink)}
aside .fabric-optics{border-top:1px solid var(--gold);color:var(--paper-body)}
aside .fabric-optics b{color:var(--paper-ink)}
aside .fabric-source{color:var(--gold-ink)}
aside .fabric-source:hover{color:var(--paper-ink)}
aside .landscape-options button{border-color:var(--paper-line-strong);color:var(--cream)}
aside .landscape-options button:hover:not(:disabled){color:var(--cream)}
aside .landscape-options button[aria-pressed=true]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
aside .photo-upload-card{border:1px solid var(--paper-line)}
aside .custom-photo-actions [aria-pressed="true"]{border-color:var(--gold);background:rgba(184,150,83,.14)}
aside .effects-card button,aside .effects-card{color:var(--stone-light)}
aside .edge-option,aside .spacing>label{color:var(--paper-ink)}
aside .spacing output{color:var(--gold-ink)}
aside .spacing>div{color:var(--paper-body)}
aside .edge-option input,aside input[type=range]{accent-color:var(--gold)}

/* On-stage controls as light panels */
.screen-dock{background:var(--paper);border:1px solid var(--paper-line);border-top:1px solid var(--gold);backdrop-filter:none}
.dock-label{color:var(--gold-ink)}
#screen-position-output{color:var(--paper-ink)}
.screen-buttons button{border-color:var(--paper-line-strong);color:var(--paper-ink)}
.screen-buttons button:first-child,.screen-buttons button:last-child{border-color:var(--gold);color:var(--gold-ink)}
.screen-buttons button:hover:not(:disabled){border-color:var(--gold);background:rgba(184,150,83,.12);color:var(--paper-ink)}
.screen-buttons button:focus-visible,.view-tools button:focus-visible,.scene-shortcut:focus-visible,.screen-dock input:focus-visible{outline:1px solid var(--gold-ink)}
.travel-slider>div,#screen-motion-note{color:var(--paper-body)}
.view-tools{background:var(--paper);border:1px solid var(--paper-line);backdrop-filter:none}
.view-tools button{color:var(--paper-ink)}
.view-tools button:first-child{border-right:1px solid var(--paper-line)}
.view-tools button:hover:not(:disabled){background:rgba(184,150,83,.12);color:var(--paper-ink)}
.view-tools button.active{color:var(--gold-ink);box-shadow:inset 0 -1px 0 var(--gold)}
kbd{color:var(--paper-body);border-color:var(--paper-line-strong)}
.scene-shortcut{background:var(--paper);border:1px solid var(--paper-line);border-left:1px solid var(--gold);padding:7px 14px 7px 13px}
.scene-shortcut:hover:not(:disabled){background:var(--paper);border-color:var(--paper-line);border-left-color:var(--gold-ink)}
.scene-shortcut>span{color:var(--paper-body)}
.scene-shortcut b{color:var(--paper-ink)}
.scene-shortcut i{color:var(--gold-ink)}
#tooltip{background:var(--paper);color:var(--paper-ink);border:1px solid var(--paper-line);border-top-color:var(--gold)}
@media(max-width:760px){aside{border-top:1px solid var(--gold)}}
aside .fabric-selector>label[for=reinforcement-color]{margin-top:22px}

/* Shader options removed from the UI: the effect runs at its default; the toggle stays in the DOM for app.js */
#effects-toggle,#mobile-shader-slot{display:none!important}
.top-actions{grid-template-columns:minmax(0,1fr) auto}
@media(min-width:761px){.top-actions{grid-template-columns:minmax(0,1fr) auto}}
@media(max-width:760px){.top-actions{grid-template-columns:minmax(0,1fr) auto}}
aside .appearance>label.edge-option{font-size:11px;font-weight:400}

/* Section tab bar removed: the panel is the action row, then the expandable sections */
aside .top-actions{margin-bottom:8px}
aside .control-section:first-of-type{border-top:1px solid var(--paper-line)}

/* Site embed: hide the camera view-tools bar above the screen-position dock */
.view-tools{display:none!important}

/* Site embed: hide the "Inside the details" assembly-controls panel */
#panel-explore{display:none!important}

/* Site embed, mobile: fixed-px stage (dvh would track the enlarged iframe)
   so the host page can size the iframe to the full content height and
   scroll everything as one page — no nested scrolling. */
@media(max-width:760px){
  #stage{height:540px;min-height:0;max-height:none}
  html,body{overflow:hidden}
}

/* Site embed: paper stage — the Journal page's graph-paper background
   (canvas renders with alpha, so the CSS background shows through). */
#stage{
  background-color:#FAF8F1;
  background-image:
    linear-gradient(rgba(35,32,27,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(35,32,27,.10) 1px,transparent 1px),
    linear-gradient(rgba(35,32,27,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(35,32,27,.045) 1px,transparent 1px);
  background-size:130px 130px,130px 130px,26px 26px,26px 26px;
  background-position:center top;
}
#stage:before{display:none}
#color-legend{color:#5F594F}
#loading{background:#FAF8F1;color:#23201B}
#loading b{color:#23201B}
#load-message,#loading>span:last-of-type{color:#5F594F}