#imageStudio{position:fixed;inset:72px 0 0;z-index:4;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;min-height:0;font:14px/1.45 Inter,ui-sans-serif,system-ui,sans-serif}
#imageStudio[hidden],#imageStudio [hidden]{display:none!important}body.image-studio-open{overflow:hidden}
#imageStudio button{min-height:40px;border:1px solid var(--line);border-radius:6px;padding:9px 12px;background:var(--ink2);color:var(--paper);cursor:pointer;font:inherit}
#imageStudio button:hover:not(:disabled){border-color:var(--acid)}#imageStudio button:disabled{opacity:.4;cursor:default}
#imageStudio :is(button,input,select,textarea):focus-visible{outline:2px solid var(--signal);outline-offset:3px}
#imageStudio .im-primary{background:var(--acid);border-color:var(--acid);color:var(--ink);font-weight:750}
#imageStudio button[aria-pressed=true]{border-color:var(--acid);color:var(--acid);background:var(--ink2)}
@media(max-width:780px){#imageStudio .im-rail{position:sticky;top:0;z-index:2;background:var(--ink)}}
.im-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-bottom:1px solid var(--line);flex:none}.im-header>div,.im-header nav{display:flex;align-items:center;gap:10px}.im-header strong{font-size:17px}.im-header small{display:block;color:var(--muted);font:10px/1.5 ui-monospace,monospace;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.im-status{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:36px;padding:7px 20px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}.im-local{white-space:nowrap;letter-spacing:.08em;font-size:9px;color:var(--acid)}#imageStudio .im-error{color:var(--danger)}
.im-empty{overflow:auto;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;padding:32px 20px;background:radial-gradient(ellipse at 50% 40%,var(--ink2),var(--ink) 65%)}.im-eyebrow{color:var(--signal);font:650 10px ui-monospace,monospace;letter-spacing:.12em}.im-empty h1{font-size:clamp(38px,5vw,70px);line-height:1.04;letter-spacing:-.055em;margin:20px 0 10px;font-weight:600}.im-empty h1 em{color:var(--acid);font-family:Georgia,serif;font-weight:400}.im-empty p{color:var(--muted);font-size:16px;line-height:1.65}.im-empty>button{margin:12px 0!important;min-width:220px}.im-empty>small{font-size:11px;color:var(--muted)}.im-promises{display:flex;gap:24px;margin-top:32px;font:10px ui-monospace,monospace;color:var(--muted)}.im-empty-art{position:relative;width:90px;height:80px;margin-top:26px;border:1px solid var(--line);border-radius:8px;transform:rotate(-7deg);background:var(--ink2)}.im-empty-art>span{font-size:50px;color:var(--acid)}.im-empty-art i{position:absolute;inset:10px -10px -10px 10px;border:1px solid var(--signal);border-radius:8px}.im-empty-art b{position:absolute;bottom:0;right:2px;color:var(--signal);font-size:30px}
.im-body{display:grid;grid-template-columns:94px minmax(0,1fr) 300px;min-height:0;flex:1}.im-rail{display:flex;flex-direction:column;gap:8px;padding:14px 8px;border-right:1px solid var(--line);overflow:auto}#imageStudio .im-rail button{padding:12px 3px;background:transparent;border-color:transparent;display:grid;justify-items:center;gap:6px;font-size:10px}#imageStudio .im-rail button[aria-pressed=true]{background:var(--ink2);border-color:var(--line)}.im-rail b{font-size:22px;font-weight:400}
.im-main{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--ink2)}.im-viewbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);flex:none}.im-viewbar>div{display:flex;align-items:center;gap:5px}.im-viewbar output{font-size:10px;color:var(--muted);padding-left:6px}#imageStudio .im-viewbar button{font-size:11px;padding:6px 9px;min-height:34px}
.im-viewport{overflow:auto;min-height:0;flex:1;position:relative;padding:24px;overscroll-behavior:contain;background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:20px 20px;touch-action:none;display:grid;align-items:safe center;justify-items:safe center}.im-frame{position:relative;flex:none;box-shadow:0 8px 32px #0003;background-color:#fff;background-image:conic-gradient(#dedede 25%,#fff 0 50%,#dedede 0 75%,#fff 0);background-size:20px 20px}.im-frame canvas,.im-frame svg{position:absolute;inset:0;width:100%;height:100%;display:block}.im-frame svg{overflow:hidden}.im-crop-outline{fill:#c9f27b18;stroke:#ff7359;stroke-width:2;stroke-dasharray:6 3}.im-selection-outline{fill:none;stroke:#3ba4ff;stroke-width:2;stroke-dasharray:4 3}.im-viewport[data-mode=crop],.im-viewport[data-mode=draw],.im-viewport[data-mode=rectangle],.im-viewport[data-mode=ellipse],.im-viewport[data-mode=line],.im-viewport[data-mode=arrow]{cursor:crosshair}.im-viewport[data-mode=move]{cursor:move}.im-viewport[data-mode=pan]{cursor:grab}.im-footer{display:flex;justify-content:space-between;gap:12px;flex:none;padding:9px 16px;border-top:1px solid var(--line);font:10px ui-monospace,monospace;color:var(--muted)}
.im-controls{overflow:auto;min-height:0;border-left:1px solid var(--line);padding:22px 20px}.im-controls section{display:flex;flex-direction:column;gap:12px}.im-controls h2{font-size:22px;letter-spacing:-.04em;margin:0}.im-controls h3{font-size:12px;margin:0}.im-controls p{color:var(--muted);font-size:12px;line-height:1.6;margin:0}.im-controls small{color:var(--muted);font-size:11px;line-height:1.55}.im-controls label{display:grid;gap:6px;font-size:12px}.im-controls :is(input:not([type=checkbox]),select,textarea){width:100%;min-width:0;border:1px solid var(--line);background:var(--ink2);border-radius:5px;padding:9px;color:var(--paper);font:inherit}.im-controls textarea{resize:vertical}.im-controls input[type=color]{height:40px;padding:4px}.im-controls input[type=range]{padding:0;accent-color:var(--signal)}.im-controls input[type=checkbox]{width:17px;height:17px;accent-color:var(--acid)}.im-controls .im-check{display:flex;align-items:center;gap:8px}.im-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}.im-controls hr{width:100%;border:0;border-top:1px solid var(--line);margin:7px 0}.im-range{grid-template-columns:1fr auto}.im-range input{grid-column:1/-1}.im-range output{color:var(--muted);font:11px ui-monospace,monospace}.im-tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}#imageStudio .im-tool-grid button{font-size:12px}.im-layers{margin-top:16px}#imLayers{display:flex;flex-direction:column;gap:5px;max-height:210px;overflow:auto}#imageStudio #imLayers button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:12px;flex-shrink:0}.im-layer-actions{display:flex;gap:5px}#imageStudio .im-layer-actions button{padding:6px 10px;font-size:11px}#imLayerCount{float:right;color:var(--muted)}#imExportPreview{width:100%;max-height:190px;object-fit:contain;background:repeating-conic-gradient(#ddd 0% 25%,white 0% 50%) 0 / 16px 16px;border:1px solid var(--line)}.im-dialog{background:var(--ink);color:var(--paper);border:1px solid var(--line);border-radius:12px;padding:25px;max-width:min(440px,90vw)}.im-dialog::backdrop{background:#0009}.im-dialog>div{display:flex;justify-content:flex-end;gap:8px}.im-dialog p{color:var(--muted)}#imageStudio.im-drop-active{outline:3px dashed var(--acid);outline-offset:-8px}#imageStudio[data-rendering=true] #imDimensions::after{content:' · updating…';color:var(--signal)}
@media(max-width:1050px){.im-body{grid-template-columns:76px minmax(0,1fr) 260px}.im-controls{padding:16px}.im-header{padding:10px 12px}.im-header small{max-width:180px}}
@media(max-width:780px){.tool-rail{grid-template-columns:repeat(2,minmax(0,1fr))}#imageStudio{top:64px}.im-header{flex-wrap:wrap;gap:8px}.im-header>div{flex:1}.im-header nav{gap:5px}#imageStudio .im-header button{font-size:11px;padding:6px 8px;min-height:36px}.im-header strong{font-size:15px}.im-header small{font-size:9px;max-width:130px}.im-status{padding:6px 10px;font-size:11px}.im-local{display:none}.im-body{grid-template-columns:1fr;grid-template-rows:auto minmax(260px,45dvh) auto;overflow:auto;display:grid;align-content:start}.im-rail{flex-direction:row;border-right:0;border-bottom:1px solid var(--line);padding:5px;gap:3px;flex-shrink:0;overflow:visible}#imageStudio .im-rail button{flex:1;min-width:0;padding:6px 2px;font-size:9px;gap:1px}.im-rail b{font-size:19px}.im-main{min-height:260px}.im-controls{overflow:visible;border-left:0;border-top:1px solid var(--line);padding:20px}.im-controls section{max-width:540px;width:100%;margin-inline:auto}.im-viewbar{padding:7px}.im-viewbar output{display:none}.im-footer{font-size:9px;padding:7px}.im-footer span:last-child{max-width:180px;text-align:right}.im-empty{justify-content:flex-start;padding-top:28px}.im-empty-art{margin-top:20px}.im-empty h1{font-size:42px}.im-promises{gap:12px;font-size:8px;flex-wrap:wrap;justify-content:center}.im-viewport{padding:16px}.im-header nav{width:100%}.im-header nav #imExport{margin-left:auto}}

#imCameraDialog{width:min(760px,calc(100vw - 32px));max-width:760px;max-height:calc(100dvh - 32px);overflow:auto;padding:20px}#imCameraDialog h2{margin:0 0 12px}#imCameraVideo{display:block;width:100%;height:min(50dvh,480px);object-fit:contain;background:var(--ink2);border:1px solid var(--line)}#imCameraDialog>div{flex-wrap:wrap;justify-content:flex-start}#imCameraDialog p{font-size:14px;line-height:1.5}#imCameraDialog button:disabled{opacity:.45;cursor:default}