/* Pic Toolkit / Studio system. Visual-only layer shared by all documents. */
/* Rectangular surfaces share square corners across the shell and embedded tools.
   Circular magnifiers, radio controls and round history buttons remain circular. */
html:root body *:not(#magnifier):not(.lasso-history-button):not([type="radio"]):not(.round-button):not(.circle-button) { border-radius:0 !important; }
:root, :root[data-theme="light"] {
  --ui-bg:#f4f6f8; --ui-panel:#ffffff; --ui-soft:#f0f3f6;
  --ui-text:#202936; --ui-muted:#627083; --ui-border:#d4dce5;
  --ui-strong:#aab7c6; --ui-action:#253449; --ui-on-action:#ffffff;
  --ui-hover:#e8edf3; --ui-selected:#e5ecf4; --ui-focus:#427bc3;
  --ui-danger:#b83232; --ui-danger-soft:#fff0f0; --ui-stage:#e5eaf0;
  --ui-checker-a:#f8fafc; --ui-checker-b:#dce3eb;
  --ui-font:Inter,system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
:root[data-theme="dark"] {
  --ui-bg:#141a22; --ui-panel:#1c2430; --ui-soft:#242e3c;
  --ui-text:#e7edf5; --ui-muted:#a7b4c6; --ui-border:#3a485b;
  --ui-strong:#697d97; --ui-action:#cfdef0; --ui-on-action:#182538;
  --ui-hover:#303e51; --ui-selected:#33465e; --ui-focus:#8abaff;
  --ui-danger:#ff9999; --ui-danger-soft:#40262e; --ui-stage:#202b38;
  --ui-checker-a:#2c3848; --ui-checker-b:#354458;
}
:root[data-ui] {
  color-scheme:light;
  --bg:var(--ui-bg); --bg-soft:var(--ui-soft); --panel:var(--ui-panel);
  --panel-bg:var(--ui-panel); --panel-soft:var(--ui-soft); --input-bg:var(--ui-panel);
  --surface:var(--ui-panel); --surface-2:var(--ui-soft); --surface-3:var(--ui-hover);
  --surface-soft:var(--ui-soft); --surface-muted:var(--ui-hover);
  --ink:var(--ui-text); --text:var(--ui-text); --muted:var(--ui-muted); --muted-strong:var(--ui-text);
  --border:var(--ui-border); --line:var(--ui-border); --border-soft:var(--ui-border); --line-strong:var(--ui-strong);
  --primary:var(--ui-action); --primary-hover:var(--ui-action); --primary-soft:var(--ui-selected);
  --accent:var(--ui-action); --accent-2:var(--ui-action); --accent-strong:var(--ui-action); --accent-soft:var(--ui-selected);
  --active:var(--ui-selected); --stage:var(--ui-stage); --cell:var(--ui-checker-b);
  --checker-a:var(--ui-checker-a); --checker-b:var(--ui-checker-b); --danger:var(--ui-danger);
  --shadow:0 2px 8px rgb(15 23 42 / 4%); --shadow-soft:var(--shadow);
}
:root[data-ui][data-theme="dark"] { color-scheme:dark; }
html[data-ui] body { font-family:var(--ui-font); font-size:13px; color:var(--ui-text); background:var(--ui-bg); }
html[data-ui="shell"] * { font-family:var(--ui-font); }
html[data-ui] :is(button,input,select,textarea,label,.btn) { font-family:var(--ui-font); letter-spacing:normal; }
html[data-ui] :is(button,.btn) { font-weight:500; transition:background-color 120ms ease,border-color 120ms ease,color 120ms ease; }
html[data-ui] :is(button,.btn):hover { transform:none; filter:none; }
html[data-ui] :is(button,.btn):disabled { cursor:not-allowed; opacity:.42; }
html[data-ui] :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible { outline:2px solid var(--ui-focus); outline-offset:2px; }
html[data-ui] :is(input[type="number"],input[type="text"],select,textarea) {
  color:var(--ui-text); background:var(--ui-panel); border:1px solid var(--ui-border);
  border-radius:4px; font-size:13px; box-shadow:none;
}
html[data-ui] :is(input[type="checkbox"],input[type="radio"],input[type="range"]) { accent-color:var(--ui-action); }
html[data-ui] :is(.btn,.button,.header-download,.micro-button,.zoom-button) {
  min-height:34px; border:1px solid var(--ui-border); border-radius:4px;
  background:var(--ui-panel); color:var(--ui-text); font-size:12px;
  line-height:1.3; box-shadow:none;
}
html[data-ui] :is(.btn,.button,.micro-button,.zoom-button):hover:not(:disabled) { background:var(--ui-hover); border-color:var(--ui-strong); }
html[data-ui] :is(.btn-primary,.btn-success,.button.primary,button.primary,.header-download) {
  background:var(--ui-action); color:var(--ui-on-action); border-color:var(--ui-action); font-weight:600;
}
html[data-ui] :is(.btn-primary,.btn-success,.button.primary,button.primary,.header-download):hover:not(:disabled) {
  background:var(--ui-action); color:var(--ui-on-action); box-shadow:inset 0 0 0 99px rgb(128 128 128 / 12%);
}
html[data-ui] :is(.btn-outline.active,.button.active,.ratio-btn.active,.stitch-direction-button.active,.tool.active) {
  color:var(--ui-text); background:var(--ui-selected); border-color:var(--ui-strong); box-shadow:none;
}
html[data-ui] :is(.btn-danger,.danger-action):not(:disabled) { color:var(--ui-danger); background:var(--ui-danger-soft); border-color:var(--ui-danger); }
html[data-ui] :is(.hint,.file-meta,.viewer-meta,.pick-mode-hint) { font-size:12px; line-height:1.5; color:var(--ui-muted); }
html[data-ui] :is(.field-label,.field label,.option-title,.viewer-header h3) { font-size:12px; font-weight:500; letter-spacing:normal; text-transform:none; color:var(--ui-muted); }
html[data-ui] :is(.media-panel-title,.section h2,.options-card h2,.inspector-panel > summary) { font-size:13px; font-weight:600; color:var(--ui-text); letter-spacing:normal; text-transform:none; }
html[data-ui] :is(.media-controls-column,.options-card,.video-trim-panel,.resize-stage-bar,.media-file-bar,.video-file-bar) {
  border:1px solid var(--ui-border); border-radius:6px; background:var(--ui-panel); box-shadow:none;
}
html[data-ui] :is(.resize-stage-info strong,.media-file-info strong,.video-file-info strong) { font-size:13px; font-weight:600; }
html[data-ui] :is(.lasso-history-button,.top-history-button,.history-button) { width:34px; height:34px; min-height:34px; padding:0; border:1px solid var(--ui-border); border-radius:50%; color:var(--ui-muted); background:var(--ui-panel); }
/* Shell: a quiet navigation rail and one consistent content surface. */
html[data-ui="shell"] :is(.nav-item,.mobile-nav-item) .tool-line-icon { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
html[data-ui="shell"] :is(.mobile-tool-card,.mobile-nav-item) .pc-preferred { color:#c34d20; font-size:10px; font-weight:500; }
html[data-ui="shell"][data-theme="dark"] :is(.mobile-tool-card,.mobile-nav-item) .pc-preferred { color:#ff9966; }
@media(max-width:900px) {
  /* Home-only palette. The phone-shaped viewport gate remains unchanged. */
  html[data-ui="shell"][data-phone="true"] {
    --home-bg:#fafbfd; --home-card:#ffffff; --home-featured:#f3f7fe;
    --home-text:#152033; --home-muted:#727d8e; --home-icon:#496484;
    --home-border:#e4e9ef; --home-pill:#edf0f4; --home-pill-text:#5e6774;
    --home-blue:#2176df; --home-blue-soft:#e1edff; --home-shadow:0 3px 10px #233c5b06,0 1px 3px #233c5b03;
  }
  html[data-ui="shell"][data-phone="true"][data-theme="dark"] {
    --home-bg:#131b27; --home-card:#1c2737; --home-featured:#202f45;
    --home-text:#edf3fb; --home-muted:#a1afc1; --home-icon:#a5bddc;
    --home-border:#2b3a4e; --home-pill:#2c394b; --home-pill-text:#bdc9d8;
    --home-blue:#79b2ff; --home-blue-soft:#293f60; --home-shadow:0 3px 12px #00000018;
  }
  html[data-ui="shell"][data-phone="true"] .mobile-header.home-mode { flex-shrink:0; padding:30px 21px 20px; border:0; background:var(--home-bg); box-shadow:none; }
  html[data-ui="shell"][data-phone="true"] .mobile-header.home-mode strong { color:var(--home-text); font-size:29px; font-weight:800; letter-spacing:-1px; line-height:1.1; }
  html[data-ui="shell"][data-phone="true"] .mobile-header.home-mode .mobile-header-title > span { margin-top:5px; color:var(--home-muted); font-size:15px; line-height:1.3; }
  html[data-ui="shell"][data-phone="true"] .mobile-header.home-mode .mobile-feedback { max-width:none; margin-top:4px; color:var(--home-muted); font-size:10px; line-height:1.4; }
  html[data-ui="shell"][data-phone="true"] #mobile-home { padding:0 14px 24px; background:var(--home-bg); }
  html[data-ui="shell"][data-phone="true"] .mobile-tool-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  html[data-ui="shell"][data-phone="true"] .mobile-tool-card {
    position:relative; display:grid; grid-template-columns:clamp(24px,7vw,32px) minmax(0,1fr) 5px; grid-template-rows:auto auto;
    width:100%; min-height:clamp(84px,23vw,112px); aspect-ratio:auto; padding:22px clamp(10px,3vw,16px) 14px;
    column-gap:clamp(7px,2.3vw,12px); row-gap:5px; align-items:center; align-content:center; justify-content:normal; text-align:left;
    color:var(--home-text); border:1px solid var(--home-border); border-radius:10px;
    background:var(--home-card); box-shadow:var(--home-shadow); transition:none;
  }
  html[data-ui="shell"][data-phone="true"] .mobile-tool-card:nth-child(-n+2) { background:var(--home-featured); }
  html[data-ui="shell"][data-phone="true"] .mobile-tool-card:active { background:var(--home-blue-soft); border-color:var(--home-blue); box-shadow:inset 0 1px 3px #233c5b0b; }
  html[data-ui="shell"][data-phone="true"] .mobile-tool-card::after { content:""; grid-column:3; grid-row:1 / span 2; width:5px; height:5px; border-top:1.2px solid var(--home-muted); border-right:1.2px solid var(--home-muted); transform:rotate(45deg); }
  html[data-ui="shell"][data-phone="true"] .mobile-tool-card .mobile-tool-icon { grid-column:1; grid-row:1 / span 2; width:100%; height:auto; margin:0; border:0; border-radius:0; background:none; box-shadow:none; color:var(--home-icon); }
  html[data-ui="shell"][data-phone="true"] .mobile-tool-card .mobile-tool-icon svg { width:100%; height:auto; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  html[data-ui="shell"][data-phone="true"] .mobile-tool-card > span:not(.mobile-tool-icon) { grid-column:2; grid-row:1; min-width:0; min-height:0; color:var(--home-text); font-size:clamp(11px,3.35vw,16px); font-weight:650; line-height:1.35; overflow-wrap:normal; }
  html[data-ui="shell"][data-phone="true"] .mobile-tool-card:not(:has(.pc-preferred)) { padding-top:14px; }
  html[data-ui="shell"][data-phone="true"] .mobile-tool-card:not(:has(.pc-preferred)) > span:not(.mobile-tool-icon) { grid-row:1 / span 2; }
  html[data-ui="shell"][data-phone="true"] .mobile-tool-card small:not(.pc-preferred) { display:none; }
  html[data-ui="shell"][data-phone="true"] .mobile-tool-card .pc-preferred { grid-column:2; grid-row:2; justify-self:start; min-height:0; padding:3px 7px; border-radius:20px; background:var(--home-pill); color:var(--home-pill-text); font-size:clamp(8px,2.6vw,11px); font-weight:500; line-height:1.1; white-space:nowrap; }
  html[data-ui="shell"][data-phone="true"] .mobile-card-recommendation { position:absolute; top:7px; right:7px; padding:3px 7px; border-radius:20px; color:var(--home-blue); background:var(--home-blue-soft); font-size:8px; line-height:1; font-style:normal; font-weight:600; }
  html[data-ui="shell"][data-phone="true"] .mobile-home-preferences { margin-top:25px; padding-top:15px; border-top:1px solid var(--home-border); justify-content:space-between; gap:24px; }
  html[data-ui="shell"][data-phone="true"] .mobile-home-preferences :is(.language-options,.theme-options) { height:auto; grid-template-columns:repeat(2,36px); gap:0; padding:1px; border:1px solid var(--home-border); border-radius:24px; background:transparent; }
  html[data-ui="shell"][data-phone="true"] .mobile-home-preferences :is(.language-option,.theme-option) { width:36px; height:28px; min-width:0; min-height:0; padding:0; border-radius:24px; background:transparent; color:var(--home-muted); box-shadow:none; }
  html[data-ui="shell"][data-phone="true"] .mobile-home-preferences .language-option { font-size:12px; }
  html[data-ui="shell"][data-phone="true"] .mobile-home-preferences .language-option.active { color:#fff; background:#2375d9; }
  html[data-ui="shell"][data-phone="true"] .mobile-home-preferences .theme-option.active { color:var(--home-blue); background:var(--home-blue-soft); }
  html[data-ui="shell"][data-phone="true"] .mobile-home-preferences .theme-option::before { font-size:19px; }
}
html[data-ui="shell"] .image-upload-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:100%; }
html[data-ui="shell"] .image-upload .image-upload-preview { display:none; }
html[data-ui="shell"] .image-upload.loaded > :is(.image-upload-empty,input[type="file"]) { display:none; }
html[data-ui="shell"] #convert-dropzone.loaded { padding:0; border:1px solid var(--ui-border); cursor:default; overflow:hidden; }
html[data-ui="shell"] #convert-dropzone.loaded .image-upload-preview { display:flex; width:100%; height:100%; min-height:0; margin:0; padding:12px; border:0; border-radius:0; box-sizing:border-box; }
html[data-ui="shell"] #convert-dropzone .preview-img { display:block; max-width:100%; max-height:100%; width:100%; height:100%; object-fit:contain; }
html[data-ui="shell"] #convert-file-list { margin:12px 0; }
html[data-ui="shell"] #pdf-dropzone.loaded { cursor:default; }
html[data-ui="shell"] #pdf-dropzone.loaded #pdf-staging { display:flex; flex-wrap:wrap; align-content:flex-start; justify-content:center; width:100%; max-height:100%; overflow:auto; margin:0; }
html[data-ui="shell"] #pdf-staging .add-btn-small input { position:absolute; }
@media(max-width:900px) {
  html[data-ui="shell"][data-phone="true"] #convert-dropzone { height:260px; min-height:260px; }
}
html[data-ui="shell"] .nav-item { font-family:var(--ui-font); font-size:12px; min-height:44px; font-weight:400; }
html[data-ui="shell"] .nav-item.active { font-weight:600; }
html[data-ui="shell"] .sidebar-brand strong { font-size:20px; font-weight:700; }
html[data-ui="shell"] .sidebar-brand span { font-size:10px; line-height:1.45; }
html[data-ui="shell"] .feedback-link { font-size:9px; line-height:1.5; }
html[data-ui="shell"] .card { border:1px solid var(--ui-border); border-radius:8px; box-shadow:none; padding:20px; }
html[data-ui="shell"] .media-workspace { gap:16px; }
html[data-ui="shell"] .media-controls-column { padding:16px; }
html[data-ui="shell"] .media-dropzone { border:1px dashed var(--ui-strong); border-radius:6px; background:var(--ui-soft); }
html[data-ui="shell"] .media-drop-icon { color:var(--ui-muted); background:var(--ui-panel); border-radius:8px; box-shadow:none; }
html[data-ui="shell"] .media-dropzone strong { font-size:15px; font-weight:600; }
html[data-ui="shell"] :is(.mobile-tool-card,.mobile-menu) { border-color:var(--ui-border); box-shadow:none; }
html[data-ui="shell"] .mobile-tool-card { border-radius:8px; }
html[data-ui="shell"] .mobile-tool-card > span:not(.mobile-tool-icon) { font-size:14px; font-weight:600; }
html[data-ui="shell"] .ad-card { box-shadow:none; border-radius:6px; }
html[data-ui="shell"] .ad-card a { font-size:9px; white-space:nowrap; overflow-wrap:normal; word-break:normal; }
html[data-ui="shell"] #resize-apply { background:var(--ui-panel); color:var(--ui-text); border-color:var(--ui-border); font-weight:500; }
/* Independent image processors: consistent inspector / viewer styling. */
html[data-ui="processor"] :is(.panel,.options-card) { background:var(--ui-panel); }
html[data-ui="processor"] :is(button,.file-button) { text-transform:none; letter-spacing:normal; font-weight:500; }
html[data-ui="processor"] :is(button.secondary,.file-button.secondary,.icon-button,.micro-button,.zoom-button) { color:var(--ui-text); background:var(--ui-panel); border-color:var(--ui-border); }
html[data-ui="processor"] :is(.file-button:not(.secondary),.header-download) { color:var(--ui-on-action); background:var(--ui-action); border-color:var(--ui-action); font-weight:600; }
html[data-ui="processor"] :is(.file-button:not(.secondary),.header-download):hover { color:var(--ui-on-action); background:var(--ui-action); }
html[data-ui="processor"] .section { padding:20px; }
html[data-ui="processor"] .section + .section { border-color:var(--ui-border); }
html[data-ui="processor"] .viewer-stage { border:1px solid var(--ui-border); border-radius:6px; box-shadow:none; }
html[data-ui="processor"] .stage-placeholder { color:var(--ui-muted); font-size:20px; font-weight:500; }
html[data-ui="processor"] .viewer-stage.solid { background-image:linear-gradient(45deg,var(--ui-checker-a) 25%,transparent 25%,transparent 75%,var(--ui-checker-a) 75%),linear-gradient(45deg,var(--ui-checker-a) 25%,transparent 25%,transparent 75%,var(--ui-checker-a) 75%),linear-gradient(var(--ui-checker-b),var(--ui-checker-b)); }
html[data-ui="processor"] :is(.inline-choice-row,.inline-choice-group,.bg-options,.label-help,.row-field) { min-width:0; flex-wrap:wrap; }
html[data-ui="processor"] .inline-field { grid-template-columns:minmax(0,1fr) 72px; }
html[data-ui="processor"] .row-field { grid-template-columns:minmax(0,1fr) 72px; }
html[data-ui="processor"] .row-field > label { grid-column:1 / -1; }
html[data-ui="processor"] :is(.field input[type="number"],.field select) { min-width:0; max-width:100%; background:var(--ui-panel); }
html[data-ui="processor"] :is(.inline-choice-row > label:first-child,.viewer-inline-control-label,.section-title,.stage-placeholder) { text-transform:none; letter-spacing:normal; }
html[data-ui="processor"] .inline-choice-row { align-items:flex-start; }
html[data-ui="processor"] .inline-choice-group { gap:8px; }
html[data-ui="processor"] .section :is(.inline-choice-row,.inline-choice-group) { width:100%; }
html[data-ui="processor"] .section :is(h2,label,.option-title) { font-weight:500; text-transform:none; letter-spacing:normal; }
html[data-ui="processor"] .section h2 { font-weight:600; }
html[data-ui="processor"] .subtool-title { font-size:13px; font-weight:600; text-transform:none; letter-spacing:normal; color:var(--ui-text); }
html[data-ui="processor"] .subsection-title { font-size:13px; font-weight:600; text-transform:none; letter-spacing:normal; color:var(--ui-text); }
html[data-ui="processor"] :is(.tool-block,.subtool-block) { border-color:var(--ui-border); }
html[data-ui="processor"] .subtool + .subtool { border-color:var(--ui-border); }
html[data-ui="processor"] :is(.result-header-tools label,.viewer-header select) { font-size:12px; font-weight:500; text-transform:none; letter-spacing:normal; }
html[data-ui="processor"] :is(.pill,.zoom-label) { background:var(--ui-soft); color:var(--ui-muted); border-color:var(--ui-border); font-size:12px; font-weight:500; }
/* Editors use a compact density without changing control hit areas or canvas geometry. */
html[data-ui="pixel"] button { font-size:12px; }
html[data-ui="pixel"] :is(header,#timeline,#options,aside,nav) { background:var(--ui-panel); border-color:var(--ui-border); }
html[data-ui="pixel"] nav button { font-size:10px; border-radius:4px; overflow-wrap:anywhere; }
html[data-ui="pixel"] button.active { background:var(--ui-selected); border-color:var(--ui-strong); }
html[data-ui="pixel"] #options :is(button,input) { border-radius:0; }
html[data-ui="pixel"] .inspector-panel > summary { padding:12px; }
html[data-ui="pixel"] :is(#delete,#deleteFrame,#deleteLayer) { color:var(--ui-danger); }
html[data-ui="sprite"] .button.ghost { color:var(--ui-muted); background:transparent; }
html[data-ui="sprite"] .tool { border-radius:4px; color:var(--ui-muted); }
html[data-ui="sprite"] .tool.active { color:var(--ui-text); background:var(--ui-selected); border-color:var(--ui-strong); }
html[data-ui="sprite"] .animation-actions .button { font-size:11px; padding:0 4px; }
@media(max-width:900px) {
  html[data-ui="shell"][data-phone="true"] .card { padding:12px; }
  html[data-ui="shell"][data-phone="true"] .media-workspace { gap:12px; }
  html[data-ui="shell"][data-phone="true"] .btn { min-height:38px; }
}
@media(prefers-reduced-motion:reduce) { html[data-ui] :is(button,.btn) { transition:none; } }
@media(max-width:760px) { html[data-ui="pixel"][data-phone="true"] main { grid-template-columns:60px minmax(0,1fr); } }
/* Pixel editor: named groups with connected controls, not nested cards. */
html[data-ui="pixel"] #perfect-toggle { display:inline-flex; align-items:center; gap:5px; font-size:11px; padding:0 4px; white-space:nowrap; cursor:pointer; }
html[data-ui="pixel"] #recent button[aria-pressed="true"] { outline:2px solid var(--ui-focus); outline-offset:-2px; }
html[data-ui="pixel"] footer #status { background:transparent; padding:0; height:auto; max-width:25%; white-space:nowrap; text-overflow:ellipsis; }
html[data-ui="pixel"] .inline-colors #add-color { flex-shrink:0; padding:4px 6px; font-size:11px; }
html[data-ui="pixel"] [data-panel="layers"] .actions .command-icon { width:26px; height:26px; min-height:26px; padding:4px; }
html[data-ui="pixel"] [data-panel="layers"] .actions .command-icon svg { width:16px; height:16px; }
html[data-ui="pixel"] .layer input[type="text"] { max-width:calc(100% - 62px); }
html[data-ui="pixel"] #options:has(.header-group) .palette-toolbar { margin-left:auto; flex:0 1 auto; width:auto; min-width:260px; }
html[data-ui="pixel"] #options .palette-toolbar .panel-content { flex:0 1 auto; }
html[data-ui="pixel"] #options .palette-toolbar .swatches { flex:0 1 auto; }
html[data-ui="pixel"] #options .inline-colors #recent { max-width:230px; }
html[data-ui="pixel"] #options .inline-colors #recent button { width:18px; height:18px; min-height:18px; padding:0; }
html[data-ui="pixel"] #options#options { padding:4px 0; align-items:center; }
html[data-ui="pixel"] #options .header-group { gap:0; }
html[data-ui="pixel"] #size { width:55px; min-width:55px; padding:4px; font-size:11px; }
html[data-ui="pixel"] .inline-colors { display:flex; align-items:center; flex-shrink:0; gap:6px; }
html[data-ui="pixel"] .inline-colors .colors { margin:0; }
html[data-ui="pixel"] .inline-colors #recent { display:flex; flex-wrap:nowrap; max-width:120px; overflow-x:auto; margin:0; }
html[data-ui="pixel"] .inline-colors #recent button { flex-shrink:0; }
html[data-ui="pixel"] .layer input[type="text"] { border-color:transparent; background:transparent; box-shadow:none; cursor:pointer; flex:0 1 auto; width:calc(100% - 48px); }
html[data-ui="pixel"] .layer input[type="text"]:hover,
html[data-ui="pixel"] .layer input[type="text"]:focus { border-color:var(--ui-border); background:var(--ui-panel); cursor:text; }
html[data-ui="pixel"] .layer-drag-handle { margin-left:auto; }
html[data-ui="pixel"] header .opacity-popover input[type="range"] { left:auto; right:0; }
html[data-ui="pixel"] #options:has(.header-group) { overflow-x:auto; min-width:0; }
html[data-ui="pixel"] #options:has(.header-group) .palette-toolbar { width:0; min-width:260px; flex:1; }
html[data-ui="pixel"] #options { flex-wrap:nowrap; }
html[data-ui="pixel"] #options > .header-group { flex-shrink:0; padding-left:10px; }
html[data-ui="pixel"] #options .palette-toolbar { flex:1; width:auto; }
html[data-ui="pixel"] .command-icon[aria-pressed="true"] { background:var(--ui-selected); border-color:var(--ui-strong); }
html[data-ui="pixel"] .layer-drag-handle { touch-action:none; cursor:grab; padding:2px 4px; font-size:18px; }
html[data-ui="pixel"] .layer.dragging { outline:1px solid var(--ui-strong); opacity:.65; }
html[data-ui="pixel"] [data-panel="layers"] .actions { flex-wrap:nowrap; gap:4px; }
html[data-ui="pixel"] [data-panel="layers"] .actions button { padding:5px; font-size:10px; }
html[data-ui="pixel"] header > .spacer { display:none; }
html[data-ui="pixel"] #options .palette-toolbar { max-width:none; width:100%; display:flex; align-items:center; gap:12px; border:0; min-width:0; }
html[data-ui="pixel"] #options .palette-toolbar .toolbar-heading { margin:0; white-space:nowrap; }
html[data-ui="pixel"] #options .palette-toolbar .panel-content { flex-wrap:nowrap; min-width:0; flex:1; }
html[data-ui="pixel"] #options .palette-toolbar .swatches { width:auto; max-width:none; min-width:0; flex:1; }
html[data-ui="pixel"] #options .palette-toolbar select,
html[data-ui="pixel"] #options .palette-toolbar #add-color { flex-shrink:0; }
html[data-ui="pixel"] section.toolbar-panel > .panel-content { display:flex; }
html[data-ui="pixel"] .toolbar-heading { font-size:10px; color:var(--ui-muted); line-height:1.2; margin-bottom:5px; }
html[data-ui="pixel"] #animation-open::before { content:'↑'; margin-right:6px; }
html[data-ui="pixel"] .work > #status { background:transparent; flex-shrink:0; }
html[data-ui="pixel"] .opacity-popover { position:relative; padding:7px; cursor:pointer; }
html[data-ui="pixel"] .opacity-popover input[type="range"] { position:absolute; top:100%; left:0; z-index:100; width:120px; margin:0; padding:12px; background:var(--ui-panel); border:1px solid var(--ui-border); visibility:hidden; opacity:0; box-shadow:0 3px 10px #0002; }
html[data-ui="pixel"] .opacity-popover:hover input,
html[data-ui="pixel"] .opacity-popover:focus-within input { visibility:visible; opacity:1; }
html[data-ui="pixel"] .palette-toolbar { max-width:360px; }
html[data-ui="pixel"] .palette-toolbar .swatches { margin:0; width:240px; max-width:100%; display:flex; flex-wrap:nowrap; overflow-x:auto; }
html[data-ui="pixel"] .palette-toolbar .swatches button { flex:0 0 18px; width:18px; height:18px; min-height:18px; padding:0; }
html[data-ui="sprite"] .tool { min-height:49px; padding:12px 2px 7px; border:0; border-radius:4px; box-shadow:none; background:transparent; font-size:10px; gap:3px; }
html[data-ui="sprite"] .tool > span:nth-child(2) { font-size:10px; }
html[data-ui="sprite"] .tool kbd { font-size:9px; top:2px; right:3px; }
html[data-ui="sprite"] .app-shell { grid-template-columns:64px minmax(0,1fr) 286px; }
html[data-ui="sprite"] .toolbox { padding:10px 6px; gap:6px; }
html[data-ui="sprite"] .tool-divider { display:none; }
@media(max-width:700px) { html[data-ui="sprite"][data-phone="true"] .app-shell { grid-template-columns:64px minmax(0,1fr); } }
html[data-ui="pixel"] #tools button { border:0; box-shadow:none; background:transparent; color:var(--ui-muted); }
html[data-ui="pixel"] #tools button:hover { background:var(--ui-hover); color:var(--ui-text); }
html[data-ui="pixel"] #tools button.active { background:var(--ui-selected); color:var(--ui-text); }
html[data-ui="pixel"] #timeline .actions #timeline-collapse { position:static; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; flex-shrink:0; padding:6px; margin:0; }
html[data-ui="pixel"] #timeline .actions #timeline-collapse svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
html[data-ui="pixel"] #timeline > .actions { padding-left:0; }
html[data-ui="pixel"] .opacity-icon { display:block; width:18px; height:18px; }
html[data-ui="pixel"] .preview { overflow:hidden; height:200px; }
html[data-ui="pixel"] .preview canvas { display:block; max-width:100%; max-height:200px; width:auto; height:auto; object-fit:contain; }
html[data-ui="pixel"] #command-tooltip { position:fixed; z-index:10000; padding:7px 10px; background:var(--ui-text); color:var(--ui-panel, white); font-size:12px; line-height:1.4; pointer-events:none; box-shadow:0 2px 8px #0003; max-width:calc(100vw - 16px); }
html[data-ui="pixel"] .toolbar-panel { border:0; padding:0 12px; border-left:1px solid var(--ui-border); }
html[data-ui="pixel"] .toolbar-panel > summary { padding:0 0 5px; font-size:10px; color:var(--ui-muted); font-weight:500; gap:8px; }
html[data-ui="pixel"] .toolbar-panel > .panel-content { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:0; }
html[data-ui="pixel"] details.toolbar-panel:not([open]) > .panel-content { display:none; }
html[data-ui="pixel"] .toolbar-panel .inspector-subheading,
html[data-ui="pixel"] .toolbar-panel p { display:none; }
html[data-ui="pixel"] .toolbar-panel label { margin:0; font-size:11px; }
html[data-ui="pixel"] .toolbar-panel input[type="range"] { width:75px; }
html[data-ui="pixel"] .toolbar-panel input[type="number"] { width:48px; }
html[data-ui="pixel"] .work > footer { position:relative; min-height:44px; }
html[data-ui="pixel"] .coordinate-group { position:absolute; left:50%; transform:translateX(-50%); display:flex; gap:8px; white-space:nowrap; pointer-events:none; }
html[data-ui="pixel"] .work > footer #animation-open { margin:0; align-self:center; }
html[data-ui="pixel"] #timeline #timeline-collapse { left:8px; right:auto; }
html[data-ui="pixel"] #timeline .actions { padding-left:0; padding-right:0; }
@media(max-width:760px) { html[data-ui="pixel"][data-phone="true"] .coordinate-group { position:static; transform:none; margin:auto; } }
html[data-ui="pixel"] .command-icon { width:34px; height:32px; padding:6px; display:inline-flex; align-items:center; justify-content:center; }
html[data-ui="pixel"] .command-icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
html[data-ui="pixel"] #timeline { position:relative; padding-top:3px; }
html[data-ui="pixel"] #timeline .actions { padding-right:34px; }
html[data-ui="pixel"] #timeline-collapse { position:absolute; top:5px; right:8px; width:28px; height:28px; padding:0; font-size:22px; }
html[data-ui="pixel"] #animation-open { align-self:flex-end; margin:5px 8px; }
html[data-ui="pixel"] [hidden] { display:none !important; }
html[data-ui="pixel"] header { gap:12px; align-items:flex-end; }
html[data-ui="pixel"] .header-group { display:grid; gap:5px; padding-right:12px; border-right:1px solid var(--ui-border); }
html[data-ui="pixel"] .header-group:last-of-type { border-right:0; }
html[data-ui="pixel"] header .option-group { padding:0 12px 0 0; border-left:0; border-top:0; border-bottom:0; background:transparent; border-radius:0; }
html[data-ui="pixel"] .group-caption { display:block; font-size:10px; line-height:1.2; color:var(--ui-muted); font-weight:500; }
html[data-ui="pixel"] .joined-buttons { display:flex; gap:0; align-items:center; flex-wrap:nowrap; }
html[data-ui="pixel"] .joined-buttons > button { border-radius:0; margin:0; position:relative; }
html[data-ui="pixel"] .joined-buttons > button + button { margin-left:-1px; }
html[data-ui="pixel"] .joined-buttons > button:is(:hover,:focus-visible) { z-index:1; }
html[data-ui="pixel"] #options { align-items:stretch; row-gap:8px; padding:8px 0; }
html[data-ui="pixel"] #options .option-group { display:grid; align-content:start; gap:5px; }
html[data-ui="pixel"] [data-option-group="brush"] .joined-buttons { gap:10px; }
html[data-ui="pixel"] .nested-panel { margin-top:12px; border-top:1px solid var(--ui-border); border-bottom:0; }
html[data-ui="pixel"] .nested-panel > summary { padding:10px 0; }
html[data-ui="pixel"] .nested-panel > .panel-content { padding:0; }
html[data-ui="pixel"] .inspector-subheading { color:var(--ui-muted); font-size:11px; margin:4px 0 8px; }
html[data-ui="pixel"] .inspector-subheading:not(:first-child) { border-top:1px solid var(--ui-border); padding-top:12px; margin-top:12px; }
html[data-ui="pixel"] #tools button { position:relative; padding-top:12px; }
html[data-ui="pixel"] #tools kbd { position:absolute; top:2px; right:3px; font:9px var(--ui-font); color:var(--ui-muted); opacity:.85; }
@media(max-width:760px) {
  html[data-ui="pixel"][data-phone="true"] header { gap:8px; }
  html[data-ui="pixel"][data-phone="true"] .header-group { padding-right:8px; }
  html[data-ui="pixel"][data-phone="true"] .joined-buttons > button { padding-left:6px; padding-right:6px; }
}
html[data-ui="pixel"] #options:has(.header-group) .palette-toolbar { flex:0 0 auto; width:auto; margin-left:auto; }
html[data-ui="pixel"] #options .palette-toolbar .panel-content { flex:0 0 auto; }
html[data-ui="pixel"] #options .palette-toolbar .swatches { flex:0 0 auto; }
@media(max-width:900px) {
  html[data-ui="shell"][data-phone="true"] body { height:100dvh; }
  html[data-ui="shell"][data-phone="true"] .mobile-header:not(.home-mode) { min-height:48px; padding:2px 10px; box-shadow:none; flex-shrink:0; }
  html[data-ui="shell"][data-phone="true"] .mobile-header:not(.home-mode) .mobile-header-title :is(span,.mobile-feedback) { display:none; }
  html[data-ui="shell"][data-phone="true"] .mobile-header:not(.home-mode) #mobile-menu-toggle { min-height:44px; max-width:60%; }
}

/* Shared slider geometry across standalone and embedded tools. */
html input[type="range"] { appearance:none; -webkit-appearance:none; height:24px; border:0; border-radius:0; background:transparent; box-shadow:none; padding-block:0; }
html input[type="range"]::-webkit-slider-runnable-track { height:2px; border:0; border-radius:0; background:linear-gradient(to right,var(--ui-text,#111) 0 var(--range-fill,0%),var(--ui-strong,#d9dce1) var(--range-fill,0%) 100%); }
html input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:7px; height:16px; margin-top:-7px; border:0; border-radius:0; background:var(--ui-text,#111); box-shadow:none; }
html input[type="range"]::-moz-range-track { height:2px; background:#d9dce1; border:0; }
html input[type="range"]::-moz-range-progress { height:2px; background:var(--ui-text,#111); }
html input[type="range"]::-moz-range-thumb { width:7px; height:16px; border:0; border-radius:0; background:var(--ui-text,#111); }

/* Selected command buttons reverse contrast in the dark theme. */
html[data-theme="dark"][data-ui] button:is(.active,[aria-pressed="true"],[aria-expanded="true"]):not(.swatch):not([data-color]) { background:var(--ui-action) !important; color:var(--ui-on-action) !important; border-color:var(--ui-action); }