:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;color:#f2f1ec;background:#2b3540;color-scheme:dark;font-synthesis:none;--main: #2B3540;--panel: #1F2731;--control: #1F2731;--edge: #465667;--text: #F2F1EC;--muted: #B8C2CC;--sea: #2FA9BC;--sea-bright: #7EDBE6;--sea-deep: #58C8D6;--violet: #A997E8;--amber: #E4B36A}*{box-sizing:border-box}body{margin:0}button,input,select,.button{font:inherit}button,.button{min-height:44px;min-width:44px;padding:9px 12px;border:1px solid var(--edge);border-radius:7px;background:var(--control);color:var(--text);text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:hover,.button:hover{background:#324550}button[aria-pressed=true]{background:#244c56;border-color:var(--sea);color:var(--sea-bright)}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--sea-bright);outline-offset:2px}.primary{background:var(--sea);color:#10232b;border-color:var(--sea);font-weight:650}.primary:hover{background:var(--sea-deep);border-color:var(--sea-deep)}[hidden]{display:none!important}#app{height:100vh;height:100dvh;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);max-width:1500px;margin:auto}.header{flex:none;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 16px;border-bottom:1px solid var(--edge);max-height:240px;overflow:hidden;transition:max-height .25s ease,padding .25s ease,opacity .25s ease}.header.is-collapsed{max-height:0;padding-top:0;padding-bottom:0;border-bottom-width:0;opacity:0;pointer-events:none}@media(prefers-reduced-motion:reduce){.header{transition:none}}.brand{min-width:0}.brand-short{display:none}@media(max-width:540px){.brand-full{display:none}.brand-short{display:inline}.brand #project-name{flex:1;min-width:0;text-align:right}}h1{font-size:18px;letter-spacing:-.3px;margin:0 0 3px;color:var(--text)}#project-name{display:block;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--muted)}.file-actions{display:flex;gap:7px}.workspace{flex:1;min-height:100px;display:flex;flex-direction:column}.view-controls{flex:none;display:flex;flex-wrap:nowrap;overflow-x:auto;align-items:center;gap:6px;padding:6px 10px;background:var(--panel);scrollbar-width:none}.view-controls::-webkit-scrollbar{display:none}.view-controls button{position:relative;flex:none;min-height:38px;min-width:38px;font-size:85%;padding:6px 8px}.view-controls button:after{content:"";position:absolute;inset:-3px}.view-controls #header-toggle{position:sticky;left:0;z-index:1;flex:0 0 44px;width:44px;height:44px;min-height:44px;min-width:44px;padding:0;display:grid;place-items:center;background:var(--panel)}.header-chevron{display:block;width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(3px) rotate(225deg);transition:transform .2s ease}#header-toggle[aria-expanded=false] .header-chevron{transform:translateY(-3px) rotate(45deg)}@media(prefers-reduced-motion:reduce){.header-chevron{transition:none}}#dimensions{flex:none;margin-right:auto;font-size:13px;font-variant-numeric:tabular-nums}#zoom-level{flex:none;min-width:47px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums}.surface{flex:1;min-height:50px;position:relative;overflow:hidden;background:#141a20}.light-workspace .surface{background:#e7e6e1}canvas{display:block;width:100%;height:100%;position:absolute;inset:0;touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.gesture-hint{margin:0;padding:5px 12px;font-size:11px;text-align:center;color:var(--muted);background:var(--panel)}.toolbar{flex:none;border-top:1px solid var(--edge);background:var(--panel);padding:6px 12px calc(7px + env(safe-area-inset-bottom))}.toolbar-top{display:flex;gap:10px;align-items:center;justify-content:space-between}.toolbar-state{display:flex;flex-wrap:wrap;gap:4px 9px;align-items:center;min-width:0}#active-tool{color:var(--sea-bright);font-size:12px;font-weight:650;white-space:nowrap}#status{color:var(--muted);font-size:12px;line-height:1.4}#toggle-tools{flex:none;font-size:12px;background:transparent}.tool-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding-top:7px}.tool-group{display:flex;gap:6px}.drawing-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.rgb-inputs{display:flex;gap:8px}.rgb-inputs label{min-width:0;flex:1}.recent-colors{display:flex;flex-wrap:wrap;gap:6px}.recent-colors button{font-size:12px;border-width:3px}#brush-size{margin-top:5px}.edit-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-block:12px}#selection-summary,#selection-detail{font-size:12px;color:var(--muted)}#preview-warning{font-size:13px;line-height:1.4;margin:7px 0;color:var(--amber)}#edit-preview{padding-bottom:7px}#active-layer{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--muted)}#layer-list{display:flex;flex-direction:column;gap:6px}.layer-row{display:flex;flex-direction:column;gap:3px;text-align:left;min-width:0}.layer-row-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-row-state{font-size:11px;color:var(--muted)}#layer-rename-form{margin-block:16px}#layer-rename-form label{margin-bottom:6px}.opacity-adjusting .toolbar{display:none}#layer-opacity-dock{flex:none;padding:8px 12px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--edge);background:var(--panel)}.opacity-heading{display:flex;gap:8px;align-items:center;font-size:13px}#opacity-label{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#opacity-percent{flex:none;font-variant-numeric:tabular-nums}.opacity-controls{display:grid;grid-template-columns:minmax(96px,1fr) auto auto;gap:7px;align-items:center}#layer-opacity{width:100%;min-width:0;min-height:44px;margin:0;touch-action:none;accent-color:var(--sea)}.opacity-controls button{padding:8px 10px}#opacity-hint{margin:1px 0 0;font-size:11px;color:var(--muted)}.color-control{display:flex;align-items:center;gap:7px;font-size:12px}input[type=color]{width:46px;height:44px;border:1px solid var(--edge);padding:3px;border-radius:7px;background:transparent}.save-notice{margin:7px 0 0;font-size:11px;color:var(--muted)}dialog{width:min(420px,calc(100% - 24px));max-height:calc(100dvh - 48px);overflow-y:auto;background:var(--panel);color:var(--text);border:1px solid var(--edge);border-radius:12px;padding:22px}dialog::backdrop{background:#101821bf}dialog h2{margin:0 0 20px;font-size:20px}dialog h3{font-size:14px;margin:18px 0 8px;color:var(--violet)}dialog label{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;font-size:14px}dialog input,dialog select{width:100%;min-height:44px;padding:9px;border-radius:6px;border:1px solid var(--edge);background:var(--main);color:inherit}dialog p{font-size:13px;color:var(--muted);line-height:1.5}.size-inputs{display:flex;gap:12px}.size-inputs label{width:50%}.dialog-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}.error{color:#ffc4c4}@media(max-width:540px){.header{padding:9px 12px;gap:8px}.brand{width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:10px}h1{flex:none;font-size:17px}#project-name{max-width:150px}.file-actions{width:100%}.file-actions button{flex:1}.tool-controls{gap:7px}.tool-controls button{padding:9px 10px}}@media(min-width:800px){.toolbar{padding:9px 20px calc(10px + env(safe-area-inset-bottom))}.tool-controls{justify-content:center}.tool-controls .color-control{margin:0 20px}}@media(max-height:480px){.header{padding-block:4px}.brand,.file-actions{width:auto}.gesture-hint,.save-notice{display:none}.toolbar{padding-block:3px}.toolbar-top{float:right}}