/* Unified working surface: tools first, only the active tool's actions next. */
[hidden]{display:none!important}
.app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;height:100vh;height:100dvh}
.titlebar{min-height:52px;gap:10px;padding:4px 12px;flex-wrap:wrap}
.logo{font-size:20px;letter-spacing:-.7px;white-space:nowrap;flex-shrink:0}
.hint{display:none}
.language-switch{display:flex;gap:2px;margin-left:auto;flex-shrink:0}
.language-switch button{min-width:42px;min-height:44px;border:1px solid #fff7;background:#35266f;color:white;font:700 14px Tahoma,sans-serif;cursor:pointer}
.language-switch button[aria-pressed=true]{background:#fff44e;color:#25136e;border-color:#fff44e}
.top-actions{margin-left:0;gap:5px;flex-shrink:0}.winbtn{width:44px;height:44px;font-size:22px}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #5842d1;outline-offset:2px}
.studio{min-width:0;min-height:0}.easel{max-height:none;transform:none!important;transition:none!important}
.dock{min-height:0;max-height:50vh;max-height:50dvh;gap:8px;padding:8px 12px max(8px,env(safe-area-inset-bottom));overflow-y:auto;overflow-x:hidden;align-content:start}
.tool-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;padding:0;overflow:visible;flex-shrink:0;width:100%}
.tool-btn,.cleanup-btn{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;min-width:0;min-height:64px;height:auto;margin:0;padding:4px;font:700 14px Tahoma,sans-serif;line-height:1.2;white-space:normal;overflow-wrap:anywhere}
.tool-btn svg,.cleanup-btn svg{width:30px;height:30px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cleanup-btn{color:#222;background:#d5d2c7;border:2px solid;border-color:white #777 #777 white;cursor:pointer}
.cleanup-btn[aria-pressed=true]{background:#aaa79e;border-color:#68665f #fff #fff #68665f;box-shadow:inset 2px 2px 3px #555}
.tool-row .material{display:none}
.tool-context{display:flex;flex-direction:column;gap:7px;padding-top:8px;border-top:1px solid #9d9a91;flex-shrink:0;min-width:0}
.active-tool-label{font-size:14px;font-weight:bold;color:#252138}
.material-row{display:flex;flex-wrap:wrap;gap:7px;min-width:0;flex-shrink:0;position:static}
.palette{display:flex;gap:0;width:auto;margin:0;padding:0;order:0}
.palette .swatch{width:44px;height:44px;min-width:0;flex:none;border:6px solid #c7c3b7;box-shadow:none;outline-offset:-5px;transform:none}
.sizebox{display:flex;align-items:center;gap:8px;min-width:0;margin-left:auto;font-size:14px}.sizebox input{min-width:0;width:160px;height:36px}
.supply-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;flex-shrink:0;font-size:14px;min-width:0}
.reserve{display:flex;align-items:center;gap:6px;font-size:14px;white-space:nowrap}.reserve meter{width:90px;height:18px}.reserve output{min-width:38px}
.refill,.sweep-bottom{min-width:0;min-height:44px;max-width:100%;margin:0;padding:5px 10px;font:14px Tahoma,sans-serif;color:#222;background:#eee9dd;border:2px solid;border-color:white #777 #777 white;white-space:normal;cursor:pointer}
.refill{font-weight:bold}.refill[data-paint=true]{border-left:10px solid var(--paint)}
#supplyHint{font-size:12px;line-height:1.35;white-space:normal;min-width:0;flex:1 1 240px}
.studio-extras{font-size:12px;line-height:1.4}.studio-extras a{color:#323c39}
.save-sheet p{font-size:16px}
@media(max-width:760px){
 .titlebar{padding:4px 8px;gap:6px}.logo{font-size:18px}.dock{padding:6px 8px max(8px,env(safe-area-inset-bottom));gap:6px}
 .tool-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
 .tool-btn,.cleanup-btn{min-height:58px;padding:3px 1px;font-size:12px}
 .material-row{flex-direction:column;align-items:stretch;gap:4px}.palette{width:100%}.palette .swatch{width:calc(100% / 9);height:44px}
 .sizebox{width:100%;margin:0;flex:none;justify-content:space-between}.sizebox input{height:36px;flex:1;width:auto}
 #supplyHint{flex-basis:100%}.refill{flex:1}.sweep-bottom{flex-basis:100%}.frame{padding:10px}
}
@media(max-width:480px){
 .titlebar{display:grid;grid-template-columns:1fr auto;gap:2px 6px}
 .logo{grid-column:1/-1;font-size:17px;line-height:24px}.language-switch{margin-left:0;justify-self:start}.top-actions{justify-self:end}.reserve meter{width:62px}
}
@media(orientation:landscape) and (max-height:650px) and (min-width:560px){
 .app{grid-template-columns:minmax(0,1fr) 240px;grid-template-rows:auto minmax(0,1fr)}
 .titlebar{grid-column:1/-1}.studio{grid-column:1;grid-row:2}
 .dock{grid-column:2;grid-row:2;width:100%;height:100%;max-height:none;padding:6px 8px max(8px,env(safe-area-inset-bottom));border-top:0;border-left:3px solid white}
 .tool-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.tool-btn,.cleanup-btn{min-height:60px;flex-direction:column;padding:3px 1px;font-size:12px}
 .material-row{flex-direction:column;align-items:stretch}.palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%}.palette .swatch{width:100%;height:44px;border-width:5px}
 .sizebox{width:100%;margin:0;flex:none;justify-content:space-between}.sizebox input{width:120px;height:36px;min-width:0;flex:1}
 .supply-row{flex-direction:column;align-items:stretch;flex-wrap:nowrap}.reserve{justify-content:space-between}.reserve meter{width:70px}
 .refill,.sweep-bottom{flex:none}#supplyHint{flex:none}.frame{padding:8px}
}
@media(orientation:landscape) and (max-height:600px) and (max-width:559px){.app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}.studio,.dock{grid-column:1;grid-row:auto}.dock{height:auto;max-height:45vh;max-height:45dvh}}
/* A real wooden easel surrounds the interactive, unframed stretched canvas. */
.easel{flex-shrink:0;transform-style:flat;filter:drop-shadow(7px 12px 9px #001a)}
.easel::before,.easel::after{display:none}
.easel-photo{position:absolute;left:0;top:0;display:block;width:100%;height:auto;max-width:none;pointer-events:none;user-select:none}
.easel .frame{inset:auto;left:16%;top:20.972222%;width:68%;height:64.930556%;padding:0;border:0;background:transparent;transform:none;box-shadow:2px 3px 0 #d0c6ad,3px 5px 4px #281a1166}
.easel .canvas-wrap{transform:none;box-shadow:none}