/* v8: one physical studio. Dimensioned joinery follows the actual reference. */
:root{--wood:linear-gradient(100deg,#71452922,#c9a27422 42%,#38200f33),repeating-linear-gradient(2deg,#b8895710 0 2px,#3e241922 3px 4px,transparent 5px 9px),linear-gradient(#936139,#704626);--brass:linear-gradient(115deg,#d4c49e,#7b725a 28%,#b3a381 55%,#514c3e)}
main{padding:32px 30px 0}.studio-layout,.head-collapsed .studio-layout{height:calc(100dvh - 145px);min-height:470px;max-width:1220px;margin:0 auto;display:grid;grid-template-columns:var(--art-width,470px) var(--rail-width,270px);grid-template-rows:minmax(0,1fr);justify-content:center;align-items:center;gap:10px}
.reference-panel{height:auto!important;width:100%;align-self:center;position:relative;min-width:0}.easel-workspace,.head-collapsed .easel-workspace,.wheel-view .easel-workspace{height:var(--art-height,560px);min-height:0;flex:none;padding:0;background:none;isolation:isolate}
.easel-workspace:before{content:'';position:absolute;z-index:-1;width:38px;height:calc(100% + 34px);left:calc(50% - 19px);top:-27px;border-radius:4px;background:var(--wood);box-shadow:inset 2px 0 2px #eac09077,inset -3px 0 2px #25160dc9,4px 4px 10px #0007}
.easel-workspace:after{content:'';position:absolute;z-index:3;left:calc(50% - 46px);top:-7px;width:92px;height:13px;border-radius:3px;background:var(--wood);box-shadow:inset 0 2px 1px #dfb88599,0 3px 1px #341e10,0 6px 6px #0007;pointer-events:none}
.reference-pair,.photo-reference,.reference-pair #reference-stage{width:100%!important;height:100%!important;min-height:0;aspect-ratio:auto}.reference-pair #reference-stage{border-radius:1px;box-shadow:2px 3px 0 #c6b5a0,4px 7px 3px #0005,0 13px 24px #0008}
.easel-shelf{position:relative;z-index:5;flex:none;width:calc(100% + 28px);margin-left:-14px;direction:rtl;background:var(--wood);padding:10px 13px 9px;border-radius:3px 3px 5px 5px;border:1px solid #b68a5c;box-shadow:inset 0 3px 1px #dfb67d99,inset 0 -2px 1px #29190f,0 7px 0 #462b19,2px 10px 0 #2b1b10,0 15px 18px #0008}
.easel-shelf:before,.easel-shelf:after{content:'';position:absolute;top:8px;width:5px;height:5px;border-radius:50%;background:var(--brass);box-shadow:0 1px 2px #0008,inset 0 0 0 1px #514c3e}
.easel-shelf:before{left:4px}.easel-shelf:after{right:4px}
.easel-shelf .contrast-control{margin:0;padding:0 7px 8px;border:0;background:none;gap:9px;min-height:0;display:flex;align-items:center;flex-wrap:nowrap}.easel-shelf .contrast-control input{width:100%;flex:1;min-width:0;height:4px;margin:0;accent-color:#d6bd8e;cursor:ew-resize}.easel-shelf .contrast-control input::-webkit-slider-runnable-track{height:5px;background:#342317;border-radius:8px;box-shadow:inset 0 1px 3px #0009,0 1px 1px #c39c6c}.easel-shelf .contrast-control input::-webkit-slider-thumb{margin-top:-5px;appearance:none;width:13px;height:13px;border-radius:50%;background:var(--brass);border:1px solid #cfc19d;box-shadow:0 2px 4px #0008}
.easel-shelf .reference-toolbar{display:flex;align-items:center;justify-content:center;flex-direction:row;flex-wrap:nowrap;gap:8px;padding:0;border:0;background:transparent}
.easel-shelf .segmented{width:auto;flex:0 1 auto!important;flex-basis:auto!important;display:flex;flex-wrap:nowrap;gap:5px;border:0;padding:0;background:none}
.easel-shelf .image-actions{display:flex;flex-wrap:nowrap;flex-shrink:0;gap:5px;width:auto}.easel-shelf button,.easel-shelf .file-button{width:30px;height:30px;min-height:0;flex:0 0 30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #382314;padding:6px;border-radius:5px;color:#e7d0ab;background:linear-gradient(135deg,#bf8e5b,#885932 45%,#63401f);box-shadow:inset 0 1px 1px #e7bd80,0 2px 0 #3c2514,1px 3px 4px #0006;text-shadow:0 1px 1px #28160b}
.easel-shelf .contrast-control .icon-reset{width:23px;height:23px;flex-basis:23px;padding:4px}.easel-shelf button.selected{color:#f9e0b1;border-color:#27190e;background:linear-gradient(#482d1b,#735030);box-shadow:inset 1px 2px 4px #000b,0 1px 0 #d6a66d}
.easel-shelf button:hover,.easel-shelf .file-button:hover{filter:brightness(1.15)}.easel-shelf button:disabled{opacity:.4}.easel-shelf svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 0 #392310)}
.easel-shelf label.visually-hidden,.easel-shelf output.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}
.tools-column{width:100%;height:100%;min-height:0;gap:15px;align-self:center;position:relative;justify-content:center}
.tools-column>.head-panel{height:auto;min-height:110px;flex:1;border:0;background:none;box-shadow:none;position:relative;padding:0 10px;margin:0}
.head-heading{position:absolute;top:0;left:8px;right:8px;padding:0;z-index:4;flex-wrap:nowrap;pointer-events:none}.head-heading button{pointer-events:auto}
.head-heading h3{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
.head-stage,.tools-column .head-stage{overflow:visible;min-height:90px;background:transparent}
.head-stage:before{top:-32px;height:calc(24% + 32px);background:linear-gradient(90deg,#544b38,#c0ac87,#66543b);width:1px;box-shadow:1px 0 1px #000}
.head-stage:after{top:calc(24% - 3px);background:var(--brass);border:1px solid #bda882;width:5px;height:6px;z-index:2}
#head-canvas{filter:drop-shadow(12px 10px 7px #0006)}
.head-camera-controls{position:relative;width:100%;flex:none;z-index:6;padding:0;margin:0;align-self:center}
.head-camera-controls summary{list-style:none;display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:5px!important;margin:0 auto;border:1px solid #70624b;border-radius:50%;background:var(--brass);box-shadow:inset 0 1px 1px #e2cfa3,0 3px 4px #0007;color:#26231c}
.head-camera-controls summary::-webkit-details-marker{display:none}.head-camera-controls svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.head-control-fields{position:static;display:grid;grid-template-columns:1fr;gap:5px;padding:7px 12px 0;margin:0 auto;width:min(100%,220px);background:transparent;box-shadow:none;border:0;direction:ltr}
.head-control-fields .head-control-row{display:flex;gap:7px;align-items:center}.head-control-fields label{display:inline-flex!important;width:19px;flex:none;margin:0;padding:0;color:#b8a784}.head-control-fields input{width:100%;min-width:0;height:3px;margin:0!important;accent-color:#b7a383}
.head-heading .icon-reset,.head-heading .collapse-button,.panel-reopen{background:#24221e;border:1px solid #6d624e;color:#b4a583;box-shadow:inset 0 1px 0 #9d8b6544,0 2px 4px #0008;width:25px;height:25px;padding:5px;border-radius:5px;opacity:.65}.head-heading button:hover{opacity:1}.panel-reopen{font-size:.9rem;align-self:flex-end}
.clipped-board{position:relative;z-index:4;width:calc(100% + 7px);margin-left:-7px;padding:11px 10px 8px;border-radius:4px;border:1px solid #b68b5e;background:var(--wood);box-shadow:inset 0 2px 1px #e5ba8177,inset 0 -2px 1px #27160c,4px 5px 0 #4f321d,6px 8px 0 #2e1e13,12px 15px 16px #0007;transform:perspective(1100px) rotateY(-4deg);transform-origin:left center}
.clipped-board:before{content:'';position:absolute;left:-22px;top:35%;width:36px;height:40px;border-radius:5px 3px 5px 5px;background:linear-gradient(90deg,#645b49,#c1b28d 20%,#877b63 30%,#a99d80 60%,#575347);border:1px solid #26251f;box-shadow:inset 0 2px 1px #e5d2a677,inset 0 -7px 0 #363830,2px 4px 5px #0009;z-index:5}
.clipped-board:after{content:'';position:absolute;left:-15px;top:calc(35% - 15px);width:18px;height:24px;border:3px solid #9d967d;border-bottom:0;border-radius:8px 8px 0 0;box-shadow:1px 1px 0 #272820;z-index:6}
.clipped-board .study-palette{max-width:none;width:100%;height:auto;min-height:0;aspect-ratio:3/2;margin:0;background:none!important;border:0;border-radius:0;filter:none}
.clipped-board .study-palette:before,.clipped-board .study-palette:after{display:none}.clipped-board .board-heading{padding:0}.clipped-board .section-toggle{color:#ecdbbb;font-size:.67rem;text-shadow:0 1px 1px #3e2414;padding:0 1px 4px}
.clipped-board .tone-heading{margin:2px 0 0!important;color:#ebd8b7;line-height:1.2}.clipped-board .tone-heading span{font-size:.58rem;font-weight:400}.clipped-board .saved-wheel-colors{margin-top:3px}.clipped-board .saved-wheel-colors:empty{display:none}.palette-dab{box-shadow:inset 0 1px 3px #fff3,1px 3px 4px #25150b99}.palette-dab[aria-pressed=true]{outline:2px solid #f3dfb8;outline-offset:1px}
.palette-panel{border:0;border-radius:0;background:transparent;padding:4px 7px 0;box-shadow:none;flex:none}.palette-panel h2{font-size:.72rem}.palette-panel .panel-heading{margin-bottom:5px}.palette-panel #palette-preset{border-radius:4px;border:1px solid #766047;background:linear-gradient(#3c3025,#28231d);box-shadow:inset 0 1px 0 #b1956e44,0 2px 5px #0006;color:#dbc8a8;font-size:.73rem;padding:5px}
.palette-panel .text-button,.palette-panel .hint,.palette-info>span,.palette-explainer{color:#b8a88e}.palette-panel .hint{font-size:.61rem}.palette-info{margin:5px 0}.palette-swatches{margin:7px 0}.paint-dot{box-shadow:inset 0 2px 3px #fff4,0 3px 4px #0009;border:1px solid #b0a58e55}
.palette-explainer{border-color:#65533d55}.palette-explainer[open]{max-height:100px;overflow:auto}.wheel-stage{background:#181818;width:100%;height:100%;padding:15px;box-shadow:1px 3px 1px #b5a38b}.wheel-stage #studio-color-wheel{height:min(67%,360px)}.wheel-view .recipe{left:0;top:57%;transform:scale(.7)}
.workspace-footer{position:relative;min-height:112px;display:grid;grid-template-columns:auto minmax(100px,1fr) 150px 130px minmax(130px,1fr) auto;gap:20px;align-items:center;padding:12px 35px 18px;direction:ltr}
.footer-brand,.footer-center{display:contents}.footer-tools{grid-column:1;grid-row:1;justify-self:start;margin:0;gap:8px}.english-brand span{grid-column:2;grid-row:1;justify-self:end;text-align:right;max-width:230px}.english-brand img{grid-column:3;grid-row:1;width:150px;height:76px;object-fit:contain}.arabic-brand img{grid-column:4;grid-row:1;width:130px;height:85px;object-fit:contain}.arabic-brand span{grid-column:5;grid-row:1;max-width:240px;justify-self:start;text-align:right}.footer-center small{grid-column:6;grid-row:1;direction:rtl}.footer-brand span{font-size:.7rem}.save-status{position:absolute;top:auto;bottom:0;left:30px;right:30px;text-align:center}.save-menu{left:0;transform:none;text-align:start}.save-menu a{display:block;padding:10px 12px;font-size:.8rem}.save-menu a:hover{background:#393939}
@media(min-width:760px) and (max-height:780px){main{padding-top:26px}.studio-layout,.head-collapsed .studio-layout{height:calc(100dvh - 125px);min-height:420px}.workspace-footer{min-height:94px;padding:7px 26px 13px}.footer-brand img{height:68px}.tools-column{gap:10px}.clipped-board{padding:8px}.palette-caption{display:none}.head-control-fields{padding-top:5px;gap:4px}.clipped-board .study-palette{max-width:none}}
@media(min-width:760px) and (max-width:1100px){main{padding-left:20px;padding-right:20px}.workspace-footer{grid-template-columns:auto 1fr 110px 95px 1fr auto;gap:10px;padding-left:18px;padding-right:18px}.english-brand img{width:110px}.arabic-brand img{width:95px}.footer-brand span{font-size:.61rem}.footer-center small{font-size:.58rem}}
@media(max-width:759px){main{padding:35px 22px 0}.studio-layout,.head-collapsed .studio-layout{display:flex;width:100%;height:auto;min-height:0;gap:28px}.reference-panel{width:100%;max-width:var(--art-width);margin:auto}.easel-workspace,.head-collapsed .easel-workspace{height:var(--art-height);min-height:0}.tools-column{display:grid;width:100%;height:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 12px;align-items:center}.tools-column>.head-panel{height:270px;min-height:0;grid-column:2;grid-row:1;padding:0}.clipped-board{grid-column:1;grid-row:1;transform:perspective(900px) rotateY(3deg);margin:0;width:100%;padding:8px}.clipped-board:before{left:10px;top:-17px;width:28px;height:29px}.clipped-board:after{left:15px;top:-29px;width:14px;height:20px}.palette-panel{grid-column:1/-1;grid-row:2!important}.head-collapsed .study-panel{max-width:none;grid-column:1/-1;width:100%;justify-self:center}.head-collapsed .head-panel{display:none}.panel-reopen{grid-row:1;grid-column:2;justify-self:end;z-index:8}.head-collapsed .clipped-board{grid-row:2}.head-collapsed .palette-panel{grid-row:3!important}.clipped-board .section-toggle{font-size:.6rem}.clipped-board .tone-heading span{font-size:.5rem}.easel-shelf .segmented{gap:3px}.easel-shelf .reference-toolbar{gap:6px}.easel-shelf button,.easel-shelf .file-button{width:29px;flex-basis:29px;height:29px;padding:5px}.easel-shelf .image-actions{gap:3px}.easel-shelf{padding:10px 9px 9px}.head-control-fields{padding:6px 0 0;width:100%}.palette-panel .hint,.palette-panel .palette-info>span{font-size:.72rem}.workspace-footer{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;padding:16px 16px 28px;min-height:0}.english-brand img{grid-column:1;grid-row:1;justify-self:center;width:140px;height:80px}.arabic-brand img{grid-column:2;grid-row:1;justify-self:center;width:130px;height:80px}.english-brand span{grid-column:1;grid-row:2;justify-self:center;text-align:center}.arabic-brand span{grid-column:2;grid-row:2;justify-self:center;text-align:center}.footer-tools{grid-column:1;grid-row:3;margin-top:18px}.footer-center small{grid-column:2;grid-row:3;margin-top:18px;justify-self:end}.save-menu{left:0;transform:none}.save-status{bottom:5px}.footer-brand span{font-size:.6rem}}
@media(max-width:359px){.easel-shelf .reference-toolbar{flex-wrap:wrap}.easel-shelf .segmented{justify-content:center}.tools-column{gap:15px 8px}.workspace-footer{padding-left:12px;padding-right:12px}}
.head-control-fields{grid-template-columns:19px minmax(0,1fr);align-items:center}.head-control-fields output{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}
.easel-shelf{align-self:center;margin-left:0}
@media(min-width:760px){.studio-layout,.head-collapsed .studio-layout{height:calc(100dvh - 150px)}}
@media(min-width:760px) and (max-height:780px){.studio-layout,.head-collapsed .studio-layout{height:calc(100dvh - 130px)}}
.tools-column>.head-panel{max-height:400px}
.head-stage:before{top:var(--hanger-top,-32px);height:calc(var(--hanger-y,24%) - var(--hanger-top,-32px))}
.head-stage:after{top:calc(var(--hanger-y,24%) - 3px)}
@media(max-width:759px){.tools-column{direction:ltr}.tools-column>.clipped-board,.tools-column>.palette-panel{direction:rtl}html[dir=ltr] .tools-column>.clipped-board,html[dir=ltr] .tools-column>.palette-panel{direction:ltr}}
@media(max-width:759px){.head-stage:before{top:-26px;height:calc(var(--hanger-y,24%) + 26px)}}