:root{--bg: #f4f4f2;--panel: #ffffff;--fg: #1d1d1f;--muted: #6e6e73;--line: #d8d8d6;--accent: #0a66d8;--accent-fg: #fff;--btn: #ececea;--btn-on: #d6e4fb;--stage: #e6e6e3;color-scheme:light}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: #161617;--panel: #1f1f21;--fg: #ececee;--muted: #9a9aa0;--line: #333336;--accent: #4c9bff;--accent-fg: #0b0b0c;--btn: #2a2a2d;--btn-on: #233a5c;--stage: #0e0e0f;color-scheme:dark}}:root[data-theme=dark]{--bg: #161617;--panel: #1f1f21;--fg: #ececee;--muted: #9a9aa0;--line: #333336;--accent: #4c9bff;--accent-fg: #0b0b0c;--btn: #2a2a2d;--btn-on: #233a5c;--stage: #0e0e0f;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:13px/1.35 -apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;overflow:hidden}button,select,.btn,input[type=color]{font:inherit;color:var(--fg);background:var(--btn);border:1px solid var(--line);border-radius:6px;padding:4px 8px;cursor:pointer;white-space:nowrap}input[type=color]{padding:1px 2px;width:34px;height:26px}button:hover,.btn:hover{filter:brightness(.96)}button.on{background:var(--btn-on);border-color:var(--accent)}.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.muted{color:var(--muted)}.small{font-size:11px;font-weight:400}.grow{flex:1}.sep{width:1px;align-self:stretch;background:var(--line);margin:0 4px}.row{display:flex;gap:6px;align-items:center;margin-top:6px;flex-wrap:wrap}#toolbar{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto;height:42px}.group{display:flex;gap:2px}main{display:flex;height:calc(100% - 42px)}#side{width:270px;flex:none;overflow-y:auto;background:var(--panel);border-right:1px solid var(--line);padding:8px 10px}#side h3{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:10px 0 6px;display:flex;justify-content:space-between;align-items:center}#side ul,#side ol{list-style:none;margin:0;padding:0}#images li{border:1px solid var(--line);border-radius:8px;padding:6px 8px;margin-bottom:6px}#images .name{font-weight:600;word-break:break-all}#images .meta{color:var(--muted);font-size:11px}#images .bar{height:4px;background:var(--line);border-radius:2px;margin-top:4px;overflow:hidden}#images .bar i{display:block;height:100%;background:var(--accent)}#images .warn{color:#d97706}#images .adj{display:grid;grid-template-columns:70px 1fr;gap:2px 6px;align-items:center;font-size:11px;margin-top:4px}#images .adj input[type=range]{width:100%}#images .acts{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}#images .acts button{padding:2px 6px;font-size:11px}#notes li{display:grid;grid-template-columns:26px 1fr;gap:6px;margin-bottom:6px;align-items:start}#notes .num{width:24px;height:24px;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:700;cursor:pointer;font-size:12px}#notes textarea{width:100%;resize:vertical;min-height:26px;font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:3px 6px}#notes li.sel textarea{border-color:var(--accent)}#library li{display:flex;gap:4px;align-items:center;font-size:11px;margin-bottom:3px}#library li span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#library button{padding:1px 6px;font-size:11px}#grid{flex:1;display:grid;gap:2px;background:var(--line);min-width:0;position:relative}.panel{position:relative;background:var(--stage);overflow:hidden;min-width:0;min-height:0}.panel canvas{position:absolute;inset:0;width:100%;height:100%}.panel .ov{touch-action:none}.panel .hdr{position:absolute;top:6px;left:6px;z-index:2;display:flex;gap:4px}.panel .hdr select{font-size:12px;padding:2px 4px;background:color-mix(in srgb,var(--panel) 85%,transparent);max-width:260px}.panel.drop{outline:3px dashed var(--accent);outline-offset:-3px}.floatInput{position:absolute;z-index:5;font:16px sans-serif;padding:2px 4px;min-width:160px}body.present #side,body.present #toolbar{display:none}body.present main{height:100%}body.present .panel .hdr{opacity:0;transition:opacity .2s}body.present .panel:hover .hdr{opacity:1}#navBox{position:sticky;top:-8px;z-index:3;background:var(--panel);padding-bottom:6px;margin-top:-8px;padding-top:8px;border-bottom:1px solid var(--line)}#nav{display:block;width:100%;background:var(--stage);border-radius:4px;cursor:crosshair;touch-action:none}#nav[hidden]{display:none}.navZoom{display:flex;gap:4px;align-items:center;margin-top:6px}.navZoom[hidden]{display:none}.navZoom input{flex:1;min-width:0}.navZoom button{padding:0 8px}#side h3 #alignAll,#side h3 #fullAll{text-transform:none;letter-spacing:0;font-size:12px;padding:3px 10px}button:disabled{opacity:.45;cursor:default}.panel .rgb{font:12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:3px 8px;border-radius:6px;background:#000000a6;color:#fff;align-self:center;white-space:pre}.panel .rgb[hidden]{display:none}dialog#privacy{max-width:520px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--fg);padding:18px 22px}dialog#privacy::backdrop{background:#0006}dialog#privacy h3{margin-top:0}dialog#privacy li{margin-bottom:6px}dialog#privacy form{text-align:right}#side a{color:var(--accent);text-decoration:none}#images li.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--panel))}#library button.linkish{background:none;border:0;padding:2px 0;color:var(--accent);font-size:11px}
