/* Compact tool proportions, informed by Grid It's restrained control panel. */
:root{--compact-border:#c9cbc7;--compact-text:#59605e;--header-size:60px}
body{font-size:12px}header{height:var(--header-size);padding:0 20px;gap:14px}h1{font-size:21px;letter-spacing:-.65px}main{height:calc(100dvh - var(--header-size));grid-template-columns:244px 1fr}
aside{padding:12px 14px 20px;background:#f4f3ee;scrollbar-width:thin;border-right:1px solid #d4d4ce}
aside label{font-size:11px;line-height:1.35;margin:8px 0 3px;display:block}
aside p,aside small{font-size:10px;line-height:1.5;color:#777d77}aside small{display:block;margin:5px 0}
select{appearance:none;-webkit-appearance:none;background-color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%235e6867' stroke-width='1' stroke-linecap='square'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:9px 5px;padding:5px 29px 5px 9px;height:29px;line-height:17px;font-size:11px;border:1px solid var(--compact-border);border-radius:0;text-overflow:ellipsis}
select:focus-visible,button:focus-visible{outline:1px solid #6b949d;outline-offset:2px}
button,.upload{min-height:28px;padding:5px 8px;margin:3px 0;font-size:11px;line-height:16px;border-radius:0;border-color:var(--compact-border)}.upload{margin:0 0 9px;font-size:11px}
.language-picker{font-size:10px;gap:9px}.language-picker select{font-size:11px;min-width:90px;height:28px;padding:4px 27px 4px 8px;background-position:right 12px center}
.control-section{margin:0;padding:11px 0;border-top:1px solid #d8dad4}.control-section h2,.control-section summary{margin:0 0 9px;color:#767d77;font-size:10px;font-weight:500;line-height:14px;letter-spacing:.65px}.control-section h2{margin-bottom:8px}.control-section summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;margin:0}.control-section summary::-webkit-details-marker{display:none}.control-section summary:after{content:'+';font-size:13px;line-height:13px;color:#5d6965}.control-section[open] summary:after{content:'−'}.control-section .section-content{padding-top:5px}.help-section{padding-bottom:4px}.help-section small{margin-top:9px}
.range-control{margin:8px 0 5px}.range-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-height:14px}.range-number{flex:none;font-size:10px;font-variant-numeric:tabular-nums;color:#4b5654;letter-spacing:0}input[type=range]{height:16px;min-height:16px;margin:3px 0 0}input[type=range]::-webkit-slider-thumb{width:9px;height:9px;margin-top:-4px}input[type=range]::-moz-range-thumb{width:7px;height:7px}
.tool-buttons{display:grid;grid-template-columns:1fr 1fr;gap:5px}.tool-buttons button{font-size:10px;padding:5px 3px;min-width:0;white-space:nowrap}aside .snap-label{font-size:10px;display:flex;align-items:center;gap:6px;margin:8px 0}.snap-label input{margin:0;width:11px;height:11px;accent-color:#315862}
#selectionPanel{margin:8px 0;padding:9px 0;border-color:#d3d7cf}#selectionPanel strong{font-size:10px;font-weight:500;color:#68766e}#swatches{gap:4px!important;margin-top:7px!important}#swatches span{height:12px!important;border-radius:0!important}#manualHint,#mixHint{font-size:9px;line-height:1.45}
.stage{padding:16px 20px;gap:20px}.panel>div{font-size:10px;letter-spacing:.3px;margin-bottom:9px}.panel:first-child canvas,#out{width:min(100%,calc(72vh - 110px))}#viewport{max-height:calc(100vh - 105px)!important}.panel canvas{box-shadow:0 8px 24px #363a320c}
@media(max-width:850px){:root{--header-size:56px}header{height:56px;padding:0 14px}main{height:calc(100dvh - 56px);grid-template-columns:220px 1fr}aside{padding:10px 12px}h1{font-size:20px}.stage{padding:12px}.tool-buttons{grid-template-columns:1fr}.tool-buttons button{font-size:11px}}

.control-section h2{display:flex;align-items:center;justify-content:space-between;gap:6px}.control-section h2 button{width:auto;min-height:0;margin:0;padding:0;border:0;background:transparent;font-size:9px;line-height:14px;letter-spacing:0;color:#576b69}
/* Both canvas headers share one height and one baseline. */
.panel>.panel-header{display:flex;align-items:center;justify-content:space-between;gap:8px;height:30px;min-height:30px;margin:0 0 10px;line-height:16px}.composition-title{display:flex;align-items:center;gap:7px;white-space:nowrap}.panel-header #zoom{display:inline-flex;align-items:center;justify-content:center;height:26px;min-height:26px;margin:0!important;padding:3px 8px!important;font-size:10px!important;line-height:16px}.panel-header #hint,.panel-header #status{font-size:9px;line-height:16px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.source-artboard{position:relative}.source-artboard #source{width:min(100%,calc(72vh - 110px));height:auto;margin:auto}.source-artboard #uploadPhoto{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:auto;min-width:140px;height:38px;padding:8px 22px;margin:0;background:#f7f6f0;border:1px solid #8c9a98;font-size:13px}.source-artboard #uploadPhoto:hover{background:#e6ece7}#uploadPhoto[hidden],#emptyOutput[hidden]{display:none}.empty-output{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:11px;color:#90968f;white-space:nowrap;pointer-events:none}button:disabled{opacity:.42;cursor:default}
@media(max-width:850px){.stage .panel:first-child{display:block}.stage{grid-template-columns:1fr}.source-artboard #source{height:190px;width:137px}.source-artboard{min-height:190px}.panel-header #hint{display:none}}