:root{font-size:15px;--paper:#181818}body{min-height:100dvh;display:flex;flex-direction:column}main{width:100%;max-width:none;padding:12px 22px 0;flex:1;min-height:0}.studio-layout{direction:ltr;display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,28%);gap:20px;margin:0;height:calc(100dvh - 138px)}
.reference-panel,.tools-column{direction:rtl}.reference-panel{display:flex;flex-direction:column;background:transparent;border:0;overflow:visible;position:relative;min-height:0}.easel-workspace{flex:1;min-height:0;position:relative;background:url('assets/studio-easel.png') center/auto 100% no-repeat;padding:6% 5% 9%}
.reference-pair{display:block!important;background:transparent;width:100%;height:100%}.reference-pair[hidden]{display:none!important}.photo-reference{width:100%;height:100%}.reference-pair #reference-stage{height:100%;min-height:0;width:100%;background:transparent;box-shadow:0 8px 20px #0009;align-items:center}#image-canvas{max-height:100%;max-width:100%;object-fit:contain}.canvas-caption{font-size:.6rem;bottom:5px;left:5px;background:#181818a8;max-width:90%}
.reference-panel>.contrast-control{padding:6px 12px;gap:9px;min-height:36px;flex-wrap:nowrap;background:#202020;border:1px solid #383838;border-radius:7px}.reference-panel>.contrast-control label{font-size:.75rem;width:auto}.reference-panel>.contrast-control label span{display:none}.reference-panel>.contrast-control input{min-width:30px}.reference-panel>.reference-toolbar{padding:7px 0 0;gap:8px;flex-direction:row;flex-wrap:wrap;border:0;justify-content:center;background:transparent}.reference-toolbar .segmented{width:auto;flex:1}.segmented button{font-size:.77rem;padding:7px 8px}.image-actions{width:auto;gap:5px}.image-actions .button{font-size:.75rem;padding:6px 8px;min-height:32px}.image-actions svg{width:15px;height:15px}.icon-reset{width:28px;height:28px;padding:5px}.reference-toolbar .image-actions{flex-shrink:0}
.tools-column{min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px}.tools-column>.head-panel{flex:1;min-height:170px;overflow:visible;border:0;background:transparent;display:flex;position:relative}.head-stage,.tools-column .head-stage{position:relative;background:transparent;height:auto;min-height:0;flex:1}.head-stage::before{content:'';position:absolute;top:-12px;left:50%;height:26%;width:1px;background:linear-gradient(#91836b,#c9b887);pointer-events:none}.head-stage::after{content:'';position:absolute;top:calc(26% - 14px);left:calc(50% - 2px);width:5px;height:5px;border-radius:50%;background:#a7936c;pointer-events:none}.head-heading{background:transparent;padding:4px;gap:5px}.head-heading h3{font-size:.7rem;font-weight:400;color:#aaa;margin-inline-start:auto}.head-heading h3 span{font-size:.65rem}.head-heading .icon-reset{width:24px;height:24px;padding:5px}.head-camera-controls{position:relative;padding:0;border:0;z-index:6}.head-camera-controls>summary{font-size:.7rem;padding:3px;text-align:center}.head-control-fields{position:absolute;bottom:100%;left:0;right:0;padding:12px;background:#202020f5;border:1px solid #454545;border-radius:9px;box-shadow:0 5px 20px #0008}.head-control-fields label{font-size:.8rem}.head-credit{font-size:.56rem;padding:0;text-align:center;line-height:1.4}.head-gesture-help{display:none}.collapse-button,.panel-reopen{border:1px solid #454545;background:#242424;border-radius:5px;color:#ccc;font-size:1rem;padding:2px 6px;pointer-events:auto}.panel-reopen{align-self:flex-start;font-size:.7rem}.head-collapsed #head-panel{display:none}.head-collapsed .studio-layout{grid-template-columns:minmax(0,1fr) minmax(245px,24%)}.head-collapsed .easel-workspace{padding:2% 2% 7%}.head-collapsed .tools-column{justify-content:center}
.study-panel{padding:9px;border:0;background:transparent;flex:none}.study-panel>.panel-heading{padding:0}.section-toggle{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:0 2px 5px;font-size:.78rem;font-weight:500}.study-palette{width:100%;max-width:260px;margin:0 auto;aspect-ratio:3/2;border-radius:8px}.dab-label strong{display:none}.dab-label>span{font-size:clamp(7px,3.6cqw,12px)}.satellite-dab svg{width:52%;height:52%}.tone-heading{margin:4px 0 0!important;gap:3px}.tone-heading small{display:none}.study-palette~.tone-heading>span{font-size:.61rem;font-weight:400}.study-collapsed #study-body{display:none}.study-collapsed .collapse-chevron{transform:rotate(180deg)}.saved-wheel-colors{display:flex;justify-content:center;gap:5px;flex-wrap:wrap}.saved-color{width:17px;height:17px;border-radius:50%;border:1px solid #fff5}
.palette-panel{padding:11px;flex:none}.palette-panel>.panel-heading{margin-bottom:7px;gap:5px}.palette-panel h2{font-size:.85rem}.palette-panel>.panel-heading .text-button{font-size:.65rem}select{padding:7px;font-size:.78rem}.palette-info{margin:7px 0;gap:4px}.palette-info>span{font-size:.66rem}.palette-info .text-button{font-size:.7rem}.palette-swatches{gap:5px;margin:7px 0}.paint-dot{width:22px;height:22px}.palette-panel .hint{font-size:.66rem;line-height:1.5}.palette-explainer{margin-top:7px;padding-top:5px;position:relative}.palette-explainer summary{font-size:.7rem}.palette-explainer[open]{max-height:170px;overflow:auto}.palette-explainer p,.palette-explainer li{font-size:.75rem}.notice{font-size:.65rem}
.recipe{position:absolute;left:16%;top:24%;width:220px;height:250px;background:none;padding:0;z-index:4;pointer-events:none;overflow:visible;filter:drop-shadow(0 2px 4px #0006)}.recipe .comparison{position:absolute;right:0;top:61px;width:50px;height:50px;min-height:0;border-radius:50%;border:2px solid #fff;margin:0;overflow:hidden;box-shadow:0 2px 4px #0008}.recipe .compare-color{padding:0}.recipe .compare-color span{display:none}.recipe .ingredient-list{border:0;margin:0;padding:0;position:relative;height:220px}.recipe .ingredient{position:absolute;right:38px;top:62px;width:160px;padding:0;transform-origin:100% 50%}.recipe .ingredient:nth-child(1){transform:rotate(12deg)}.recipe .ingredient:nth-child(2){transform:rotate(-16deg)}.recipe .ingredient:nth-child(3){transform:rotate(-44deg)}.recipe .ingredient:nth-child(4){transform:rotate(-72deg)}.recipe .ingredient:nth-child(n+5){display:none}.recipe .ingredient-track{min-height:26px}.recipe .ingredient-track strong{font-size:9px;line-height:1.1;padding:4px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px #000,0 0 2px #000}.recipe .tube-crimp{height:25px;width:4px}.recipe .tube-neck{width:6px;height:16px}.recipe .tube-cap{width:11px;height:19px}.recipe .ingredient-secondary{margin:1px 0 0;padding:0}.recipe .ingredient-secondary small{display:none}.recipe .ingredient-secondary>span{font-size:9px;color:#fff;text-shadow:0 1px 2px #000}.recipe .recipe-empty,.recipe .error{font-size:.8rem;background:#202020d9;border-radius:8px;padding:8px;pointer-events:auto}.recipe .recipe-tip{font-size:.75rem}.wheel-stage{width:100%;height:100%;min-height:0;padding:0;background:#181818ef;gap:8px;justify-content:center}.wheel-stage #studio-color-wheel{width:auto;height:min(65%,380px);max-width:100%;max-height:380px;aspect-ratio:1}.wheel-readout{padding:4px 10px}.wheel-readout i{width:18px;height:18px}.choose-wheel-color{font-size:.8rem}.wheel-view .recipe{left:1%;top:55%;transform:scale(.8);transform-origin:left center}.wheel-view .easel-workspace{background:none;padding:5px}.wheel-view .reference-panel>.contrast-control{display:none!important}
.workspace-footer{direction:ltr;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;width:100%;max-width:none;padding:8px 28px;margin:0;border:0;min-height:116px;flex:none}.footer-brand{display:flex;align-items:center;gap:12px;min-width:0;justify-self:start}.arabic-brand{direction:ltr}.arabic-brand span{direction:rtl}.english-brand{justify-self:end}.footer-brand img{display:block;object-fit:contain;width:140px;height:90px;flex-shrink:0}.english-brand img{width:165px;height:74px}.footer-brand span{font-size:.74rem;color:#b9b9b9;max-width:165px}.footer-center{text-align:center;position:relative;min-width:135px}.footer-tools{display:flex;justify-content:center;gap:7px;margin-bottom:6px}.footer-icon{height:29px;min-width:30px;padding:5px;background:#252525;border:1px solid #444;border-radius:6px;font:500 .85rem Arial;color:#eee}.footer-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5}.footer-center small{font-size:.7rem;color:#aaa;white-space:nowrap}.footer-center a{text-decoration:underline;text-underline-offset:3px}.save-control{position:relative}.save-menu{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);width:175px;border:1px solid #555;background:#262626;border-radius:9px;z-index:30;box-shadow:0 5px 20px #0009;overflow:hidden;direction:rtl}.save-menu button{display:block;text-align:start;width:100%;font-size:.8rem;padding:10px 12px}.save-menu button:hover{background:#393939}.save-status{display:block;font-size:.62rem;position:absolute;top:100%;left:-40px;right:-40px;color:#bac9b1}.section-toggle:focus-visible{outline-offset:2px}
html[dir=ltr] .reference-panel,html[dir=ltr] .tools-column,html[dir=ltr] .save-menu{direction:ltr}html[dir=ltr] .tone-heading{text-align:left}html[dir=ltr] .paint-dot{direction:ltr}
@media(min-width:760px) and (max-height:780px){.studio-layout{height:calc(100dvh - 104px)}.workspace-footer{min-height:88px;padding:4px 20px}.footer-brand img{height:76px;width:125px}.english-brand img{height:60px;width:145px}.footer-brand span{font-size:.67rem}.study-palette{max-width:200px}.tools-column{gap:5px}.palette-panel{padding:8px}.palette-caption{display:none}.tools-column>.head-panel{min-height:125px}.palette-panel .hint{font-size:.6rem}.paint-dot{width:19px;height:19px}.palette-explainer{margin-top:4px}.palette-info{margin:5px 0}}
@media(min-width:760px) and (max-width:1100px){main{padding:9px 12px 0}.studio-layout{gap:12px;grid-template-columns:minmax(0,1fr) 260px}.reference-panel>.reference-toolbar{flex-wrap:wrap}.segmented{flex-basis:100%!important;justify-content:center}.segmented button{font-size:.68rem}.footer-brand{gap:5px}.footer-brand span{max-width:95px;font-size:.65rem}.footer-brand img{width:110px}.english-brand img{width:120px}.head-collapsed .studio-layout{grid-template-columns:minmax(0,1fr) 235px}}
@media(max-width:759px){main{padding:10px}.studio-layout,.head-collapsed .studio-layout{height:auto;display:flex;flex-direction:column;gap:15px}.reference-panel{order:0}.easel-workspace{height:65dvh;min-height:340px;flex:none;padding:30px 8px 50px}.tools-column{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;order:1}.tools-column>.head-panel{height:270px;min-height:0}.study-panel{padding:0}.study-palette{max-width:100%;width:100%;margin:0}.palette-panel{grid-column:1/-1}.head-collapsed .study-panel{grid-column:1/-1;max-width:280px;justify-self:center}.panel-reopen{grid-column:1/-1}.recipe{left:2%;top:20%;transform:scale(.7);transform-origin:left top}.wheel-view .recipe{top:54%;transform:scale(.65)}.wheel-stage #studio-color-wheel{height:min(62%,300px);max-width:100%}.reference-panel>.contrast-control label{font-size:.7rem}.reference-toolbar .segmented{width:100%;flex-basis:100%;justify-content:center}.segmented button{font-size:.68rem;padding:7px}.workspace-footer{min-height:0;padding:14px 12px 25px;grid-template-columns:1fr 1fr;gap:12px}.footer-center{grid-column:1/-1;grid-row:2}.footer-brand{flex-direction:column;gap:0;justify-self:center;text-align:center}.footer-brand img{height:88px;width:135px}.english-brand img{height:88px;width:145px}.footer-brand span{font-size:.65rem;max-width:155px}.palette-panel h2{font-size:1rem}.palette-info>span,.palette-panel .hint{font-size:.8rem}.palette-panel select{font-size:.9rem}.paint-dot{width:27px;height:27px}.head-heading h3{font-size:.65rem}.head-credit{font-size:.5rem}.head-camera-controls>summary{font-size:.65rem}}
@media(min-width:760px) and (max-height:610px){.studio-layout{height:auto;min-height:520px}.tools-column>.head-panel{min-height:160px}}
@media(min-width:760px){.studio-layout{grid-template-rows:minmax(0,1fr);align-items:stretch}.reference-panel,.tools-column{height:100%;min-height:0}.easel-workspace{overflow:visible}.reference-panel>.contrast-control,.reference-panel>.reference-toolbar{flex-shrink:0}}
.recipe .ingredient-secondary{direction:ltr;text-align:left}.recipe .ingredient-secondary>span{display:block}
.photo-reference{display:flex;align-items:center;justify-content:center}.reference-pair #reference-stage{width:auto;aspect-ratio:var(--reference-ratio,.8);height:100%;max-width:100%;flex-shrink:1}.reference-panel .canvas-caption{right:5px;left:auto}.easel-workspace{--reference-ratio:.8}
@media(max-width:759px){.reference-panel{width:100%;min-width:0}.reference-toolbar .segmented{min-width:0;flex-wrap:wrap}.save-status{left:0;right:0}.photo-reference,#reference-stage{min-width:0}}
@media(max-width:759px){.tools-column{width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.tools-column>.palette-panel{grid-row:auto}}