/* SakinLab tools — shared base: design tokens (light/dark), version badge, canvas stage, credit.
   Safe to load in any tool: it only defines variables and sk-* / .version-badge rules.
   Tools whose components already follow the shared UI system also load /assets/tool-ui.css. */
  /* SakinLab tokens: same neutrals as the site (paper #FAFAFA, ink #171717), one blue accent. */
  :root{
    --bg:#EBEBEB;
    --bg-canvas:#F5F5F5;
    --panel:#FAFAFA;
    --panel-2:#F0F0F0;
    --bg-input:#F0F0F0;                  /* fields and chips are a tone, not a white box in an outline */
    --bg-hover:#E8E8E8;
    --border:#DEDEDE;   /* structure lines (panel edges, section dividers): ~1.3 contrast on --panel in every appearance */
    --border-strong:#D6D6D6;
    --text:#171717;
    --muted:#737373;                     /* 4.6:1 on --panel (#8C8C8C until 2026-10-10: 3.2) */
    --text-muted:#B0B0B0;
    --warn-ink:#A8760A; --warn-bg:#FFF8E6; --warn-line:#F0DCA0;
    --seg-active:#FFFFFF;
    --scroll-thumb:#C8C8C8; --scroll-thumb-hover:#A8A8A8;
    --toast-bg:#171717; --toast-ink:#FFFFFF;
    --radius:6px;
    --radius-lg:8px;
    /* Colours that used to be written straight into the tools (same values; themes may override).
       Channel tokens (-rgb) take any alpha: rgb(var(--shadow-rgb) / .12). */
    --knob:#FFFFFF;                      /* switch knobs, picker handles */
    --content-paper:#FFFFFF;             /* paper behind a design or thumbnail: white in every theme */
    --shadow-rgb:0 0 0;                  /* shadows, scrims, hairlines on images */
    --highlight-rgb:255 255 255;         /* light washes over images and accent fills */
    --success:#14AE5C; --success-rgb:20 174 92;
    --success-ink:#1A9C5C;               /* success text */
    --success-mark:#1A7F37;              /* check marks */
    --warn:#FFCD29;
    --warn-icon:#D4A017;
    --warn-mild:#D4AC0D;     --warn-mild-rgb:212 172 13;
    --warn-moderate:#B8860B; --warn-moderate-rgb:184 134 11;
    --warn-severe:#C1440E;   --warn-severe-rgb:193 68 14;
    --warn-text:#825700;                 /* warning text */
    --warn-wash:#99712618; --warn-edge:#99712655;   /* warning box fill and border */
    --snap-guide:#F24EA8;                /* smart guides while dragging */
    --scrim:#00000077;                  /* behind dialogs */
    --canvas-line:rgb(0 0 0 / .045);     /* pasteboard grid */
    --fs-ground:#000000;                 /* the frame full screen: always plain black */
    --ai-mark:#FF00FF;                   /* Crop's mark to remove: the solid magenta sent to the model */
    --frame-line:var(--border-strong);   /* artboard edge: thin gray … */
    --frame-line-active:var(--accent);   /* … thin accent when hovered, selected or dragged */
  }
  :root[data-appearance="dark"]{
    --bg:#101010;
    --bg-canvas:#0E0E0E;
    --panel:#161616;
    --panel-2:#222222;
    --bg-input:#1E1E1E;
    --bg-hover:#242424;
    --border:#2C2C2C;
    --border-strong:#363636;
    --text:#EDEDED;
    --muted:#8E8E8E;
    --text-muted:#5E5E5E;
    --warn-ink:#E3B341; --warn-bg:rgba(212,160,23,.12); --warn-line:rgba(212,160,23,.35);
    --seg-active:#2E2E2E;
    --scroll-thumb:#3A3A3A; --scroll-thumb-hover:#4C4C4C;
    --toast-bg:#EDEDED; --toast-ink:#161616;
    --warn-text:#E6B268;
    --canvas-line:rgb(255 255 255 / .045);
  }

  /* Meadow (green) and Sky (blue): the site's cutting-mat green and cyanotype blue.
     Both are dark themes: light ink, a warm yellow accent with dark ink on it (like the site's focus colour).
     The design itself (content paper, exports) never changes colour. */
  :root[data-appearance="green"]{
    color-scheme:dark;
    --bg:#244B43;
    --bg-canvas:#2A544C;
    --panel:#305F56;
    --panel-2:#3B6B64;
    --bg-input:#2A544C;
    --bg-hover:#39685F;
    --border:#416F69;
    --border-strong:#517F79;
    --text:#F1F4EA;
    --muted:#CAD8D3;
    --text-muted:#97B1A9;
    --warn-ink:#F3D35B; --warn-bg:rgb(243 211 91 / .12); --warn-line:rgb(243 211 91 / .35);
    --warn-text:#F3E3A0;
    --seg-active:#42736A;
    --scroll-thumb:#517F79; --scroll-thumb-hover:#629189;
    --toast-bg:#F1F4EA; --toast-ink:#213833;
    --canvas-line:rgb(243 235 160 / .08);
  }
  :root[data-appearance="blue"]{
    color-scheme:dark;
    --bg:#223366;
    --bg-canvas:#273B74;
    --panel:#2B407E;
    --panel-2:#364B89;
    --bg-input:#273B74;
    --bg-hover:#354A87;
    --border:#3D5290;
    --border-strong:#4D629E;
    --text:#F4F6FD;
    --muted:#BAC3DF;
    --text-muted:#8996BF;
    --warn-ink:#FFD166; --warn-bg:rgb(255 209 102 / .12); --warn-line:rgb(255 209 102 / .35);
    --warn-text:#FFE3A6;
    --seg-active:#3D5494;
    --scroll-thumb:#4D629E; --scroll-thumb-hover:#5F72AB;
    --toast-bg:#F4F6FD; --toast-ink:#1D2951;
    --canvas-line:rgb(255 255 255 / .07);
  }

  /* Accent and alert come from the site's palette (core.css): one source per appearance, tones worked out there */
  :root{
    --accent:var(--c-accent); --accent-hover:var(--c-accent-hover); --accent-2:var(--c-accent);
    --on-accent:var(--c-on-accent);                /* text and icons on accent fills */
    --bg-selected:var(--c-accent-soft);
    --danger:var(--c-alert); --danger-hover:var(--c-alert-hover); --danger-ink:var(--c-alert-text);
    --danger-wash:var(--c-alert-soft);
    --danger-label:var(--c-alert);               /* the words of a danger button (Clear all): the alert itself, in every tool */
    --on-danger:var(--c-on-alert);               /* text on a danger fill */
  }

  /* Lines are for structure only (where the bar, the panels, the rulers and the canvas meet).
     Fields, chips and secondary buttons are drawn with a tone (--bg-input); their outline is this token. */
  :root{ --control-line:transparent; }

  /* Control sizes: one scale for every tool (components: /system/components/) */
  :root{
    --ctl-h:28px;        /* fields, selects, buttons */
    --ctl-h-sm:24px;     /* chips, icon buttons, the items of a segmented control */
    /* Type as in Figma's panels: 11 px everywhere, on 16 px lines; a section title one step heavier (550), not bold */
    --ctl-font:11px;     /* text inside controls (12 until 2026-10-03) */
    --ctl-font-sm:11px;  /* chips, labels, hints, quiet links */
    --fs-app:12.5px;     /* the app name in the header (and its logo row) */
    --fs-micro:10px;     /* the only smaller size: badges, counts, the line under a name (10.5 / 11.5 / 12 are gone) */
    --title-weight:550;  /* section titles (600 until 2026-10-03) */
    /* Bars on the canvas, two sizes on one floor (12 px above the canvas bottom):
       M — the tool's own bar in the centre (its tools): 44 tall, 32 px buttons, 20 px drawings;
       S — the view bar on the right and home alone: 38 tall, 24 px buttons, 16 px drawings. */
    --bar-floor:12px;
    /* Side panels, both sides: 249 = icon 8 + 16 + 8, content 200 (two halves of 96 — three 32 px cells — with 8
       between), 16 + 1 on the canvas side; on the right 1 + 16, content 200, 4 + a 24 px function column + 4 */
    --panel-w:249px; --panel-content:200px;
    --bar-m-h:44px; --bar-m-btn:32px; --bar-m-icon:20px;
    --bar-s-h:38px; --bar-s-btn:24px;
  }

  /* Text in the side panels on 16 px lines, so every row below a line of text stays on the 4 px grid */
  :where([data-sk-panel], #left-sidebar, #right-sidebar, .panel){ line-height:16px; }

  /* A section's title row is a button (it opens and closes the section), as in a list: under the pointer the whole row
     takes a ground, the icon too. The icon has a 24 px place, like a function-column button: 4 · 24 · 4 before the
     content, the drawing (16) in its middle at 8. The ground runs from that place to 4 past the content. */
  :where([data-sk-panel="left"], #left-sidebar, #left){--title-lead:28px;}
  :where([data-sk-panel="right"], #right-sidebar, #right){--title-lead:4px;}
  :is(.acc > .section-label, .sec.acc > .sec-title, .sec.acc > .sec-title-row, details.section > summary){position:relative; isolation:isolate;}
  :is(.acc > .section-label, .sec.acc > .sec-title, .sec.acc > .sec-title-row, details.section > summary)::before{content:""; position:absolute; z-index:-1; top:0; bottom:0; left:calc(-1 * var(--title-lead, 4px)); right:-4px;
    border-radius:var(--radius); background:transparent; transition:background-color var(--duration-fast, .16s) var(--ease-out-ui);}
  :is(.acc > .section-label, .sec.acc > .sec-title, .sec.acc > .sec-title-row, details.section > summary):hover::before{background:var(--bg-hover);}
  :is(.acc > .section-label, .sec.acc > .sec-title, .sec.acc > .sec-title-row, details.section > summary):active::before{background:var(--bg-selected);}

  /* A frame's label (its name · its size): above the frame, flush with its left edge, 6 px over it, in every tool
     (Crop, Studio, Twit, Grid). Each tool places it; the look is one. */
  .sk-frame-label{font-size:var(--ctl-font-sm); font-weight:400; line-height:16px; color:var(--text-secondary); white-space:nowrap; pointer-events:none;}
  /* Text in a control never wraps to a second line: it stays on one, cut with "…" where it doesn't fit; pointing at
     a cut one shows it whole (tool.js). Hints and notes (.hint, .small-note, p) still wrap. */
  :where([data-sk-panel], #left-sidebar, #right-sidebar, #left, #right, .panel, .sk-pick) :where(button, .btn, .btn-quiet, .preset-pick, .seg-btn, .chip, .preset-chip, .sec-title, .section-label, .side-item, .layer-name, label.check, .switch-side-label, .fname, .import-preview-name, .import-preview-snippet){
    white-space:nowrap; min-width:0;}
  :where([data-sk-panel], #left-sidebar, #right-sidebar, #left, #right, .panel, .sk-pick) :where(.btn, .btn-quiet, .chip, .preset-chip, .seg-btn, .layer-name, .fname, .import-preview-name, .import-preview-snippet){
    overflow:hidden; text-overflow:ellipsis;}
  :where([data-sk-panel], #left-sidebar, #right-sidebar, #left, #right, .panel) .btn-quiet{line-height:16px;}   /* a line of text: 16, on the rows */
  /* a field's word label, a sub-title: one line too */
  :where([data-sk-panel], #left-sidebar, #right-sidebar, #left, #right, .panel) :where(.field > label, label[for], .side-sub > span, .sub-row > span:first-child){
    display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
  /* In a list row (Grid's layers, Crop's images, Twit's tweets, TRT's tools) the row shows the state — under the
     pointer, selected. A name in it takes no ground of its own (no grey inside a blue row); an icon button takes a
     see-through one, which reads on a plain row and on a selected one alike. */
  .layer .layer-name, .layer .layer-name:hover, .layer .layer-name:focus{background:transparent;}
  :is(.layer, .image-row, .import-preview-card, .side-row) :is(button.icon, .icon-btn, .import-preview-remove):hover{background:rgb(var(--shadow-rgb) / .08);}
  /* A canvas hint (how to start) shows only while the frame is empty; content in, it goes */
  .sk-has-content .sk-empty-hint{display:none !important;}

  /* Spacing: one 4 px scale for every gap, padding and margin in the tools (2 px only inside a control).
     1 px stays a hairline (a line or a seam between buttons), not a space.
       --sp-05  2   inside a control: a segmented control's inset, icon to icon in a tight row
       --sp-1   4   label to its field, icon to its text
       --sp-2   8   between controls in a row or a stack, a field's space below
       --sp-3  12   a section's padding, a panel edge, a popover's padding, between groups inside a section
       --sp-4  16   between blocks, a toolbar's edge
       --sp-6  24   the section's left edge (room for its icon), columns of thumbnails
       --sp-8  32   rows of thumbnails with captions */
  :root{
    --icon-size: 16px;   /* panel icons, as in Figma: 16 px drawings in 24 px buttons */
  --sp-05:2px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px;
  }

  /* Project name in a tool's header (TRT projects, projects.js): reads as a caption, edits in place
     (input.…[type] so the shared field style in tool-ui.css doesn't win) */
  .sk-center{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); display:flex; align-items:center; gap:var(--sp-1); max-width:40vw; z-index:1;}
  .sk-center > .tb-center{position:static; transform:none;}
  .sk-center-dot{color:var(--text-muted);}
  .sk-center input.sk-project[type]{text-align:right; font-weight:400; color:var(--text-secondary);}
  .sk-center input.sk-project[type]:focus{text-align:left;}
  input.sk-project[type]{height:var(--ctl-h); min-width:0; padding:0 var(--sp-2); border:0; border-radius:var(--radius); background:transparent;
    color:var(--text); font:600 12.5px "Geist", system-ui, sans-serif; text-overflow:ellipsis; outline:none; cursor:text;}
  input.sk-project[type]:hover{background:var(--bg-hover);}
  input.sk-project[type]:focus{background:var(--bg-input); color:var(--text); box-shadow:0 0 0 1px var(--accent);}

  /* Export "Save to" row (SakinExport in tool.js): the same in every tool */
  .sk-export-folder .folder-control{display:flex; align-items:center; gap:var(--sp-05); height:var(--ctl-h); box-sizing:border-box; border:1px solid var(--control-line);
    background:var(--bg-input); border-radius:var(--radius); padding:0 var(--sp-05) 0 var(--sp-2);}
  .sk-export-folder .folder-label{flex:1; min-width:0; font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .sk-export-folder .icon-btn{width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; padding:0;
    border:0; background:transparent; border-radius:calc(var(--radius) - 2px); color:var(--muted); cursor:pointer;}
  .sk-export-folder .icon-btn:hover{background:var(--bg-hover); color:var(--text);}
  .sk-export-folder .icon-btn svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}

  /* Colour system for the coloured themes: things the browser draws itself (scrollbars, placeholders,
     form controls) follow the theme tokens too, so no dark-mode greys are left over in Meadow or Sky.
     Components keep using tokens only; nothing here is per-box. */
  :root:is([data-appearance="green"], [data-appearance="blue"]) *{scrollbar-color:var(--scroll-thumb) transparent;}
  :root:is([data-appearance="green"], [data-appearance="blue"]) ::placeholder{color:var(--text-muted); opacity:1;}
  :root:is([data-appearance="green"], [data-appearance="blue"]) :is(input, textarea, select){accent-color:var(--accent);}

  .version-badge{
    display:inline-block; height:18px; padding:0 var(--sp-1); line-height:18px;
    font-size:var(--fs-micro); font-weight:500; color:var(--muted); background:var(--panel-2);
    border-radius:4px; letter-spacing:.01em; font-variant-numeric:tabular-nums;
  }

  /* ================= Canvas stage (tool.js) ================= */
  .sk-stage{
    display:grid; grid-template-columns:18px minmax(0,1fr); grid-template-rows:18px minmax(0,1fr);
    flex:1 1 auto; min-width:0; min-height:0; position:relative;
  }
  .sk-corner{grid-area:1/1; background:var(--panel); border-right:1px solid var(--border); border-bottom:1px solid var(--border);
    font:600 7.5px/18px "Geist", system-ui, sans-serif; color:var(--muted); text-align:center; letter-spacing:.02em;}
  .sk-ruler{background:var(--panel); overflow:hidden; pointer-events:none; position:relative;}
  .sk-ruler-x{grid-area:1/2; border-bottom:1px solid var(--border);}
  .sk-ruler-y{grid-area:2/1; border-right:1px solid var(--border);}
  .sk-ruler svg{display:block; position:absolute; top:0; left:0;}
  .sk-ruler path{fill:none; stroke-width:1; shape-rendering:crispEdges;}
  .sk-ruler .mi{stroke:var(--border-strong);}
  .sk-ruler .ma{stroke:var(--muted); opacity:.6;}
  .sk-ruler text{font:500 8.5px/1 "Geist", system-ui, sans-serif; fill:var(--muted); font-variant-numeric:tabular-nums;}
  .sk-ruler .dim{opacity:.35;}                 /* the scale always sits back; the frame, a selection and the pointer read over it */
  /* The frame's edges run on across the canvas to the rulers */
  .sk-edges{position:absolute; inset:0; pointer-events:none; z-index:2; overflow:hidden;}
  .sk-edges[hidden]{display:none;}
  .sk-edges i{position:absolute; left:0; top:0; background:var(--canvas-line);}   /* the grid's own line */
  .sk-edges i[hidden]{display:none;}
  .sk-ruler .b{fill:var(--accent); opacity:.14;}
  .sk-ruler .bl{fill:var(--accent);}
  .sk-ruler .c{stroke:var(--text); opacity:.5;}
  .sk-viewport{grid-area:2/2; position:relative;}
  /* the frame full screen (the view bar's last button): the canvas alone — no rulers, edges or credit */
  .sk-stage.sk-framefs{grid-template-columns:0 minmax(0,1fr); grid-template-rows:0 minmax(0,1fr); background:var(--fs-ground);}
  .sk-stage.sk-framefs .sk-viewport, .sk-stage.sk-framefs.sk-viewport{--sk-line:transparent !important; background-color:var(--fs-ground) !important;}
  /* what will be exported, alone on the plain ground (the tool's preview: Crop, Studio, Twit) */
  .sk-fs-view{position:absolute; inset:0; z-index:28; display:grid; place-items:center; background:var(--fs-ground);}
  .sk-fs-view[hidden]{display:none;}
  .sk-fs-view > *{display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
  .sk-stage.sk-framefs :is(.sk-ruler, .sk-corner, .sk-edges, .sk-credit, .sk-recenter){display:none !important;}
  /* the rulers off (SakinRulers, Settings → Rulers, one choice for every tool): the canvas takes their place */
  html[data-sk-norulers] .sk-stage:not(.sk-overlay){grid-template-columns:0 minmax(0,1fr); grid-template-rows:0 minmax(0,1fr);}
  html[data-sk-norulers] .sk-stage :is(.sk-ruler, .sk-corner){display:none !important;}
  /* the canvas grid off (SakinGrid, tool.js: the button beside full screen, one choice for every tool) */
  html[data-sk-nogrid] :is(.sk-viewport, .sk-board){--sk-line:transparent !important;}
  /* SakinSettings (tool.js): the gear beside language and appearance, its list, and a switch */
  [data-settings-slot]:has(> .sk-set-btn){display:flex; align-items:center; gap:var(--sp-2);}
  .sk-set-btn{flex-shrink:0; display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:var(--radius); background:transparent; color:var(--muted); cursor:pointer;}
  .sk-set-btn:hover, .sk-set-btn.active{background:var(--bg-hover); color:var(--text);}
  .sk-set-btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
  .sk-set-pop{position:fixed; z-index:85; box-sizing:border-box; width:240px; padding:var(--sp-3) var(--sp-4); background:var(--panel); color:var(--text);
    border:1px solid var(--border-strong); border-radius:var(--radius-lg); box-shadow:0 12px 32px rgb(var(--shadow-rgb) / .18); font-size:var(--ctl-font);}
  .sk-set-pop[hidden]{display:none;}
  .sk-set-sec + .sk-set-sec{margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--border);}
  .sk-set-title{font-size:var(--ctl-font-sm); font-weight:var(--title-weight); color:var(--text); margin-bottom:var(--sp-1);}
  /* File format (SakinExport, tool.js): a button in a title row, a small popover under it */
  .sk-fmt-btn.changed{color:var(--accent);}
  .sk-fmt-pop{width:232px;}
  .sk-fmt-seg{display:grid; grid-template-columns:repeat(3, 1fr); gap:2px; padding:2px; margin-top:var(--sp-2); border-radius:var(--radius); background:var(--bg-input);}
  .sk-fmt-seg button{height:var(--ctl-h-sm); padding:0; border:0; border-radius:calc(var(--radius) - 2px); background:transparent; color:var(--text-secondary, var(--muted));
    font:500 var(--ctl-font) "Geist", system-ui, sans-serif; cursor:pointer;}
  .sk-fmt-seg button:hover{color:var(--text);}
  .sk-fmt-seg button[aria-pressed="true"]{background:var(--panel); color:var(--text); box-shadow:0 1px 2px rgb(var(--shadow-rgb) / .12);}
  .sk-fmt-note{margin:var(--sp-2) 0 0; font-size:var(--ctl-font-sm); line-height:16px; color:var(--muted);}
  .sk-fmt-q{margin-top:var(--sp-3);}
  .sk-fmt-q[hidden]{display:none;}
  .sk-fmt-qh{display:flex; justify-content:space-between; gap:var(--sp-2); font-size:var(--ctl-font-sm); line-height:16px;}
  .sk-fmt-qt{color:var(--text-secondary, var(--muted));}
  .sk-fmt-qv{color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap;}
  .sk-fmt-q input{display:block; width:100%; margin:var(--sp-2) 0 0; accent-color:var(--accent);}
  /* the five stops under the slider (the thumb's centre runs 7 px in from each end) */
  .sk-fmt-ticks{display:flex; justify-content:space-between; padding:0 7px; margin-top:2px;}
  .sk-fmt-ticks i{width:1px; height:4px; background:var(--border-strong);}
  .sk-set-row{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); min-height:var(--ctl-h); font-size:var(--ctl-font);}
  .sk-switch, .sk-set-pop .sk-switch{position:relative; flex-shrink:0; box-sizing:border-box; width:28px; min-width:0; height:16px; min-height:0; padding:0; border:0; border-radius:8px;
    background:var(--border-strong); line-height:0; cursor:pointer; transition:background var(--duration-press);}
  .sk-switch::after{content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:var(--panel); transition:transform var(--duration-press);}
  .sk-switch[aria-checked="true"]{background:var(--accent);}
  .sk-switch[aria-checked="true"]::after{transform:translateX(12px);}
  /* The pasteboard: the tools' canvas ground, also under a list of cards (.sk-board, SakinBoard in tool.js) */
  .sk-viewport, .sk-board{
    --sk-line: var(--canvas-line);
    background-color:var(--bg-canvas);
    /* Pasteboard grid in three levels (tool.js): the major step plus the two finer ones, each fading
       in and out with its on-screen spacing, so zooming never makes the lines jump. */
    --sk-l1: color-mix(in srgb, var(--sk-line) var(--sk-a1, 0%), transparent);
    --sk-l2: color-mix(in srgb, var(--sk-line) var(--sk-a2, 0%), transparent);
    --sk-l3: color-mix(in srgb, var(--sk-line) var(--sk-a3, 100%), transparent);
    background-image:
      linear-gradient(to right, var(--sk-l1) 1px, transparent 1px),
      linear-gradient(to bottom, var(--sk-l1) 1px, transparent 1px),
      linear-gradient(to right, var(--sk-l2) 1px, transparent 1px),
      linear-gradient(to bottom, var(--sk-l2) 1px, transparent 1px),
      linear-gradient(to right, var(--sk-l3) 1px, transparent 1px),
      linear-gradient(to bottom, var(--sk-l3) 1px, transparent 1px),
      var(--grain-canvas, none);
    background-size:
      var(--sk-g1,20px) var(--sk-g1,20px), var(--sk-g1,20px) var(--sk-g1,20px),
      var(--sk-g2,50px) var(--sk-g2,50px), var(--sk-g2,50px) var(--sk-g2,50px),
      var(--sk-grid,100px) var(--sk-grid,100px), var(--sk-grid,100px) var(--sk-grid,100px), var(--grain-size,128px) var(--grain-size,128px);
    background-position:
      var(--sk-x1,0) var(--sk-y1,0), var(--sk-x1,0) var(--sk-y1,0),
      var(--sk-x2,0) var(--sk-y2,0), var(--sk-x2,0) var(--sk-y2,0),
      var(--sk-gx,0) var(--sk-gy,0), var(--sk-gx,0) var(--sk-gy,0), 0 0;
    /* grain: a tile of the pasteboard colour with the grain baked in (core.js, --grain-canvas); no blend mode,
       so no device can show the raw noise */
    background-attachment: local, local, local, local, local, local, local;
  }
  /* A board's grid stays still: the major lines every 100 px, the 20 px ones faint */
  .sk-board{--sk-a1:35%;}
  .sk-board-zoom{position:absolute;}
  .sk-board-credit{left:var(--sp-6); bottom:22px;}   /* in line with the zoom beside it */
  /* A board's rulers (SakinBoard.rulers): the tools' rulers along its top and left; the board moves in by their 18 px.
     The Rulers setting hides them and the board takes the room back. */
  .sk-board-ruled{padding:18px 0 0 18px; box-sizing:border-box;}
  .sk-board-ruled > :is(.sk-board-corner, .sk-board-rx, .sk-board-ry){position:absolute; z-index:5; box-sizing:border-box;}
  .sk-board-ruled > .sk-board-corner{left:0; top:0; width:18px; height:18px;}
  .sk-board-ruled > .sk-board-rx{left:18px; right:0; top:0; height:18px;}
  .sk-board-ruled > .sk-board-ry{left:0; top:18px; bottom:0; width:18px;}
  html[data-sk-norulers] .sk-board-ruled{padding:0;}
  html[data-sk-norulers] .sk-board-ruled > :is(.sk-board-corner, .sk-board-rx, .sk-board-ry){display:none;}
  /* The artboard always sits above the grid and grain */
  .sk-stage:not(.sk-external) .sk-viewport > *{position:relative; z-index:1;}

  .sk-zoom{
    position:absolute; right:var(--sp-3); bottom:var(--bar-floor); z-index:30;   /* over a tool's overlays (Crop's "All images") */
    display:flex; align-items:center; gap:1px; padding:var(--sp-05);
    background:var(--panel); border:1px solid var(--border-strong); border-radius:8px;
    box-shadow:0 2px 8px rgb(var(--shadow-rgb) / .06);
  }
  .sk-zoom button{
    appearance:none; border:0; background:transparent; color:var(--muted); cursor:pointer;
    height:24px; min-width:24px; padding:0 var(--sp-1); border-radius:5px; display:inline-flex; align-items:center; justify-content:center;
    font:500 11px/1 "Geist", system-ui, sans-serif; font-variant-numeric:tabular-nums;
    transition:background-color var(--duration-fast), color var(--duration-fast), transform var(--duration-press);
  }
  .sk-zoom button:hover{background:var(--bg-hover); color:var(--text);}
  .sk-zoom button[hidden]{display:none;}
  .sk-zoom button[aria-pressed="true"]{color:var(--text); background:var(--bg-hover);}
  .sk-zoom .sk-hand-btn[aria-pressed="true"]{color:var(--accent); background:transparent;}   /* the hand on (clicked, H or Space held): its drawing in the accent, as an on icon elsewhere */
  .sk-zoom .sk-hand-btn[aria-pressed="true"]:hover{background:var(--bg-hover);}
  .sk-zoom svg{width:var(--icon-size); height:var(--icon-size); fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}   /* the common icon: 16 px, line 1.5 */
  .sk-zoom .sk-pct{min-width:44px;}
  /* SakinZoom: the percent is a slider too (drag left / right); while dragging the ↔ cursor stays wherever it goes */
  .sk-scrub{cursor:ew-resize; touch-action:none;}
  html.sk-scrubbing, html.sk-scrubbing *{cursor:ew-resize !important; user-select:none;}
  /* inside a bar of its own (Crop / Studio's picture zoom): no second box round it */
  .sk-zoom.sk-zoom-inline{position:static; padding:0; background:none; border:0; box-shadow:none;}
  .sk-zoom .sk-sep{width:1px; height:14px; background:var(--border-strong); margin:0 var(--sp-1);}
  .sk-views{display:flex; gap:1px;}

  /* Scrolling areas keep no scrollbar of their own: a thin thumb floats over the edge instead (tool.js), so a box
     never moves when the content starts or stops scrolling */
  .sk-oscroll{scrollbar-width:none !important;}   /* over a tool's own thin bar (Grid) */
  .sk-oscroll::-webkit-scrollbar{display:none !important;}
  /* a canvas has no scrollbar at all (it is moved by hand, wheel and zoom), as in Crop */
  .sk-viewport{scrollbar-width:none;}
  .sk-viewport::-webkit-scrollbar{display:none;}
  /* the thumb lives in the panel's outer 4 px (tool.js places it), the one strip no control or row uses: it never
     covers a button or a row's hover, and it doesn't grow over them either; it only darkens under the pointer */
  /* One scrollbar everywhere (panels, lists, text boxes): 4 px, 6 px under the pointer or while dragged (it grows
     2 px inward, only while it is the thing being used); its colour stays */
  .sk-othumb{position:fixed; z-index:200; width:4px; pointer-events:none; opacity:0; transition:opacity var(--duration-fast, .16s) var(--ease-out-ui);}
  .sk-othumb::after{content:""; position:absolute; top:0; bottom:0; right:0; width:4px; border-radius:3px; background:var(--scroll-thumb); transition:width var(--duration-press) var(--ease-out-ui);}
  .sk-othumb.on{opacity:1; pointer-events:auto;}
  .sk-othumb:hover::after, .sk-othumb.drag::after{width:6px;}
  .sk-othumb-x{height:4px;}
  .sk-othumb-x::after{top:auto;left:0;right:0;bottom:0;width:auto;height:4px;transition:height var(--duration-press) var(--ease-out-ui);}
  .sk-othumb-x:hover::after,.sk-othumb-x.drag::after{width:auto;height:6px;}

  /* "Report a problem" (tool.js): a round ? at the bottom right of the window, over the panel, as in Figma; its form
     opens above it */
  /* Report a problem: the last row of Settings (a ? at the bottom right until 2026-10-03: it sat over the panels'
     last buttons); its form opens under the settings gear (tool.js sets top and right) */
  .sk-set-report{margin-top:var(--sp-2); padding-top:var(--sp-2); box-shadow:inset 0 1px 0 var(--border);}
  .sk-report-row{display:flex; align-items:center; gap:var(--sp-2); width:calc(100% + var(--sp-2) * 2); height:var(--ctl-h); padding:0 var(--sp-2); margin:0 calc(var(--sp-2) * -1);   /* its words line up with the list's */ border:0; border-radius:var(--radius);
    background:transparent; color:var(--text-secondary, var(--muted)); font:400 var(--ctl-font) "Geist", system-ui, sans-serif; text-align:start; cursor:pointer;}
  .sk-report-row:hover, .sk-report-row[aria-expanded="true"]{background:var(--bg-hover); color:var(--text);}
  .sk-report-row svg{width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
  body.presentation .sk-help-pop{display:none;}
  .sk-help-pop{position:fixed; right:var(--sp-3); top:52px; z-index:61; width:280px; box-sizing:border-box;
    display:grid; gap:var(--sp-2); padding:var(--sp-3); background:var(--panel); color:var(--text); font:400 var(--ctl-font)/1.4 "Geist", system-ui, sans-serif;
    border:1px solid var(--border-strong); border-radius:var(--radius-lg); box-shadow:0 12px 32px rgb(var(--shadow-rgb) / .18);}
  .sk-help-pop[hidden]{display:none;}
  .sk-help-pop b{font-weight:var(--title-weight);}
  .sk-help-pop textarea{width:100%; box-sizing:border-box; min-height:84px; resize:vertical; padding:var(--sp-2); font:inherit; color:var(--text);
    background:var(--bg-input); border:1px solid var(--control-line, transparent); border-radius:var(--radius); outline:none;}
  .sk-help-pop textarea:focus{box-shadow:0 0 0 1px var(--accent);}
  .sk-help-note{margin:0; font-size:var(--ctl-font-sm); color:var(--muted);}
  .sk-help-row{display:flex; align-items:center; gap:var(--sp-2);}
  .sk-help-msg{flex:1; min-width:0; font-size:var(--ctl-font-sm); color:var(--muted);}
  .sk-help-row button{height:var(--ctl-h); padding:0 var(--sp-3); border:0; border-radius:var(--radius); cursor:pointer; font:500 var(--ctl-font) "Geist", system-ui, sans-serif;
    background:var(--accent); color:var(--on-accent);}
  .sk-help-row button:disabled{opacity:.6; cursor:default;}

  /* Multiple view: every design side by side; zooming changes the thumbnail size */
  .sk-multi{
    align-self:stretch; width:100%;
    display:grid; grid-template-columns:repeat(auto-fit, var(--tw,200px)); justify-content:center; align-content:start;
    gap:var(--sp-8) var(--sp-6); padding:var(--sp-2) var(--sp-2) calc(var(--sp-8) * 2);
  }
  .sk-multi[hidden]{display:none;}
  .sk-thumb{display:grid; gap:var(--sp-2); cursor:pointer; color:var(--text); outline:none;}
  .sk-card{position:relative; display:block; border-radius:var(--radius); overflow:hidden; background:var(--content-paper);
    box-shadow:0 0 0 1px var(--frame-line); transition:box-shadow var(--duration-fast), transform var(--duration-press);}
  .sk-card img{display:block; width:var(--tw,200px); aspect-ratio:var(--ta,1); object-fit:cover; background:var(--content-paper);}
  .sk-card img:not([src]){background:var(--panel-2);}
  .sk-thumb:hover .sk-card, .sk-thumb:focus-visible .sk-card{box-shadow:0 0 0 1px var(--frame-line-active);}
  .sk-thumb.is-active .sk-card{box-shadow:0 0 0 2px var(--frame-line-active);}
  .sk-thumb.is-active .sk-cap b{color:var(--accent);}
  .sk-thumb:active .sk-card{transform:scale(.99);}
  .sk-warn{position:absolute; top:6px; left:6px; width:20px; height:20px; border-radius:50%; z-index:2;
    display:flex; align-items:center; justify-content:center; background:rgb(var(--highlight-rgb) / .92);
    box-shadow:0 1px 3px rgb(var(--shadow-rgb) / .15);}
  .sk-warn svg{width:12px; height:12px; fill:none; stroke:var(--warn-moderate); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
  .sk-remove{appearance:none; position:absolute; top:6px; right:6px; width:20px; height:20px; border-radius:50%; border:0; padding:0; z-index:2;
    display:flex; align-items:center; justify-content:center; background:rgb(var(--shadow-rgb) / .55); color:var(--on-accent);
    cursor:pointer; opacity:0; transition:opacity var(--duration-press), background-color var(--duration-press);}
  .sk-thumb:hover .sk-remove, .sk-remove:focus-visible{opacity:1;}
  .sk-remove:hover{background:var(--danger);}
  .sk-remove svg{width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;}
  .sk-cap{display:flex; gap:var(--sp-2); align-items:baseline; font-size:11px; color:var(--muted); min-width:0;}
  .sk-cap b{font-weight:600; color:var(--text); font-variant-numeric:tabular-nums;}
  .sk-cap span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .sk-multi.is-building .sk-card img:not([src]){animation:sk-pulse 1.2s ease-in-out infinite;}
  @keyframes sk-pulse{50%{opacity:.5;}}

  /* Optical centering: a line-height equal to the box height centers Geist's cap height exactly
     (its ascent and descent balance around the caps). Avoid flex centering for tiny labels. */
  /* SakinLab credit: small, bottom-left of the canvas area (tool.js adds it) */
  /* Home: always bottom centre, in every tool. Beside the tool's centre bar when it has one (o.homeNear), else a
     small bar of its own in the same place, in the view bar's language */
  .sk-homebar{
    position:absolute; left:50%; transform:translateX(-50%); bottom:var(--bar-floor); z-index:30; display:flex; padding:var(--sp-05);
    background:var(--panel); border:1px solid var(--border-strong); border-radius:8px; box-shadow:0 2px 8px rgb(var(--shadow-rgb) / .06);
  }
  .sk-homebar[hidden]{display:none;}
  /* beside the tool's centre bar (o.homeNear): just left of it, as tall as it (its box and border: + 2 px) */
  .sk-homebar.sk-home-near{left:auto; right:calc(100% + 6px); bottom:auto; top:50%; transform:translateY(-50%); height:calc(100% + 2px); box-sizing:border-box; align-items:center; padding:0 var(--sp-1); border-radius:var(--radius-lg, 8px);}
  .sk-home-btn{height:24px; min-width:24px; padding:0 var(--sp-1); border-radius:5px; display:inline-flex; align-items:center; justify-content:center; color:color-mix(in oklab, var(--accent) 22%, var(--muted));   /* a faint accent: home reads apart from the tool's own buttons */
  transition:background-color var(--duration-fast), color var(--duration-fast);}
  .sk-home-btn:hover{background:var(--bg-hover); color:var(--text);}
  .sk-home-btn svg{width:var(--icon-size); height:var(--icon-size); fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
  /* An M bar (.sk-bar-m: the tool's own bar in the centre): its icon buttons 32 px with 20 px drawings, text at the
     controls' size; home beside it takes the same button, so the two read as one row */
  .sk-bar-m :is(.icon-btn, button.icon), .sk-bar-m .sk-home-btn{width:var(--bar-m-btn); min-width:var(--bar-m-btn); height:var(--bar-m-btn); padding:0; border-radius:var(--radius);}
  .sk-bar-m :is(.icon-btn, button.icon) svg.icon, .sk-bar-m .sk-home-btn svg{width:var(--bar-m-icon); height:var(--bar-m-icon); stroke-width:1.5;}
  .sk-framefs .sk-homebar{display:none !important;}
  /* the hand: the canvas moves under the pointer */
  .sk-viewport.sk-hand, .sk-viewport.sk-hand *{cursor:grab !important;}
  .sk-zoom .sk-sep[hidden]{display:none;}
  .sk-credit{
    position:absolute; left:30px; bottom:calc(var(--bar-floor) - 1.5px); z-index:5;   /* bottom left corner (home is in the centre); its baseline (1.5 px above the box at line-height 1) on the bars' floor */
    font-size:10.5px; font-weight:400; line-height:1; letter-spacing:.01em; font-variant-numeric:tabular-nums;
    color:var(--text-muted); text-decoration:none; transition:color var(--duration-fast);
  }
  .sk-credit .tm{font-size:.62em; vertical-align:.55em; margin-left:.05em; line-height:0;}
  .sk-credit:hover{color:var(--text);}

  /* Single ⇄ multiple view: each side settles in, so the switch reads as one continuous zoom */
  @media (prefers-reduced-motion: no-preference){
    .sk-multi:not([hidden]){ animation:sk-over-in .3s cubic-bezier(.23,1,.32,1); }
    .sk-stage.sk-was-multi [data-sk-art]{ animation:sk-back-in .3s cubic-bezier(.23,1,.32,1); }
    @keyframes sk-over-in{ from{ opacity:0; transform:scale(1.03); } }
    @keyframes sk-back-in{ from{ opacity:0; transform:scale(.96); } }
  }

  /* Back to content: appears when the design has been scrolled or panned out of view */
  .sk-recenter{
    position:absolute; left:50%; bottom:var(--sp-3); z-index:6; transform:translateX(-50%);
    display:inline-flex; align-items:center; gap:var(--sp-2); height:28px; padding:0 var(--sp-3) 0 var(--sp-2);
    border:1px solid var(--border-strong); border-radius:999px; background:var(--panel); color:var(--text);
    font:500 11px/1 "Geist", system-ui, sans-serif; cursor:pointer;
    box-shadow:0 2px 8px rgb(var(--shadow-rgb) / .08); transition:background-color var(--duration-fast), transform var(--duration-press);
  }
  .sk-recenter[hidden]{display:none;}
  .sk-recenter:hover{background:var(--bg-hover);}
  .sk-recenter:active{transform:translateX(-50%) scale(.97);}
  .sk-recenter svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
  .sk-overlay > .sk-recenter{bottom:64px;}
  /* Hand: Space + drag or the middle button pans the canvas */
  .sk-viewport.sk-panning, .sk-viewport.sk-panning *{cursor:grabbing !important; user-select:none;}

  /* Overlay stage: rulers drawn inside the workspace element (canvas-drawn tools) */
  .sk-stage.sk-overlay{display:block;}
  .sk-overlay > .sk-corner, .sk-overlay > .sk-ruler{position:absolute; z-index:4;}
  .sk-overlay > .sk-corner{top:0; left:0; width:18px; height:18px;}
  .sk-overlay > .sk-ruler-x{top:0; left:18px; right:0; height:18px;}
  .sk-overlay > .sk-ruler-y{top:18px; left:0; bottom:0; width:18px;}

  /* ================= Responsive panels (tool.js — SakinPanels) =================
     The standard for every tool (taken from Grid). Mark the side panels:
       <aside data-sk-panel="left"  data-sk-compact="224" data-sk-label="Settings">…
       <aside data-sk-panel="right" data-sk-compact="256" data-sk-label="Images">…
     ≤ 1050 px  both panels narrow to their data-sk-compact width (if given)
     ≤ 850 px   the left panel becomes a drawer, opened by an icon button in the header
     ≤ 620 px   the right panel does the same
     Header items that don't fit: data-sk-hide="compact | narrow | small" (hidden from that step down).
     tool.js adds the buttons, closes a drawer on Escape or a click outside, and keeps one open at a time.
     Lives here (not tool-ui.css) because every tool loads this file. */
  .sk-panel-toggle{
    display:none; align-items:center; justify-content:center; flex-shrink:0;
    width:28px; height:28px; padding:0; border:0; border-radius:var(--radius);
    background:transparent; color:var(--muted); cursor:pointer;
    transition:background-color var(--duration-fast), color var(--duration-fast), transform var(--duration-press);
  }
  .sk-panel-toggle:hover{background:var(--bg-hover); color:var(--text);}
  .sk-panel-toggle[aria-expanded="true"]{background:var(--bg-selected); color:var(--accent);}
  .sk-panel-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
  .sk-panel-toggle svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}

  .sk-panel-resize{display:none;}
  .sk-panel-strip{display:none;}
  /* the close arrow inside a collapsible panel (tool.js puts it in the panel's [data-sk-fold] spot) */
  .sk-panel-fold{display:inline-flex; align-items:center; justify-content:center; flex:none; width:28px; height:28px; padding:0; border:0; border-radius:var(--radius);
    background:transparent; color:var(--muted); cursor:pointer;}
  .sk-panel-fold:hover{background:var(--bg-hover); color:var(--text);}
  .sk-panel-fold:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
  .sk-panel-fold svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
  [dir="rtl"] .sk-panel-fold svg{transform:scaleX(-1);}
  /* in a row or a strip the tool styles (Grid's tabs and .mini-strip), the arrow keeps its own size */
  [data-sk-panel] .sk-panel-fold{width:28px; height:28px; min-height:28px; padding:0; border:0; border-radius:var(--radius);}
  /* a section's button in the hidden strip: the section's own icon (tool.js) */
  .sk-panel-seg{display:none; align-items:center; justify-content:center; flex:none; width:28px; height:28px; padding:0; border:0; border-radius:var(--radius);
    background:transparent; color:var(--muted); cursor:pointer;}
  .sk-panel-seg:hover{background:var(--bg-hover); color:var(--text);}
  .sk-panel-seg:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
  .sk-panel-seg svg{width:16px; height:16px; margin:0; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
  /* A collapsible left panel (data-sk-collapsible): on a wide screen the header button hides and shows it */
  @media (min-width:851px){
    .sk-panel-toggle[data-sk-side="left"][data-sk-collapsible]{display:inline-flex;}
    .sk-panel-toggle[data-sk-side="left"][data-sk-collapsible][aria-expanded="true"]{background:transparent; color:var(--muted);}
    .sk-panel-toggle[data-sk-side="left"][data-sk-collapsible][aria-expanded="true"]:hover{background:var(--bg-hover); color:var(--text);}
    /* a mini panel opens and closes from its own arrow, on the panel's edge: no header button on a wide screen.
       Open, a strip tool.js adds is a short row on top with the arrow at the inner edge. */
    [data-sk-panel][data-sk-collapsible="mini"] > .sk-panel-strip{display:flex; align-items:center; justify-content:flex-end; flex:none; height:28px; margin-bottom:var(--sp-1, 4px);}
    /* the move between open and the strip (tool.js): one slide in the scene's time and curve; the rows keep their widths */
    body.sk-moving-left [data-sk-panel="left"][data-sk-collapsible="mini"], body.sk-moving-right [data-sk-panel="right"][data-sk-collapsible="mini"]{overflow:hidden !important;
      transition:width var(--duration-scene) var(--ease-out-strong), min-width var(--duration-scene) var(--ease-out-strong), max-width var(--duration-scene) var(--ease-out-strong),
        flex-basis var(--duration-scene) var(--ease-out-strong), padding var(--duration-scene) var(--ease-out-strong);}
    [data-sk-panel="right"][data-sk-collapsible="mini"] > .sk-panel-strip{justify-content:flex-start;}
    body.sk-moving-left [data-sk-panel="left"] > .sk-panel-strip, body.sk-moving-right [data-sk-panel="right"] > .sk-panel-strip{display:none;}
    .sk-panel-toggle.sk-has-fold[data-sk-side="left"]{display:none;}
    body.sk-closed-left [data-sk-panel="left"][data-sk-collapsible]:not([data-sk-collapsible="mini"]){display:none !important;}
    body.sk-closed-left [data-sk-panel="left"][data-sk-collapsible="mini"], body.sk-closing-left [data-sk-panel="left"][data-sk-collapsible="mini"]{--sk-mini:var(--rail-w, 56px); --sk-panel-w:var(--sk-mini); width:var(--sk-mini) !important; min-width:var(--sk-mini) !important; max-width:var(--sk-mini) !important; flex-basis:var(--sk-mini) !important; box-sizing:border-box;}   /* as wide as the app rail beside it */
    body.sk-closed-left [data-sk-panel="left"][data-sk-collapsible="mini"] > .sk-panel-resize{display:none;}
    body.sk-closed-left [data-sk-panel="left"][data-sk-collapsible="mini"] .sk-panel-fold svg{transform:scaleX(-1);}
    [dir="rtl"] body.sk-closed-left [data-sk-panel="left"][data-sk-collapsible="mini"] .sk-panel-fold svg{transform:none;}
    /* a mini panel without a spot of its own: hidden, only its strip shows, the arrow on top on the header's first row */
    body.sk-closed-left [data-sk-panel="left"][data-sk-collapsible="mini"]:has(> .sk-panel-strip){padding:0 !important; overflow:hidden !important;}
    body.sk-closed-left [data-sk-panel="left"][data-sk-collapsible="mini"]:has(> .sk-panel-strip) > :not(.sk-panel-strip){display:none !important;}
    body.sk-closed-left [data-sk-panel="left"][data-sk-collapsible="mini"] > .sk-panel-strip{flex-direction:column; align-items:center; justify-content:flex-start; gap:var(--sp-1, 4px); height:auto; padding:var(--sp-2, 8px) 0 0;}
    body.sk-closed-left [data-sk-panel="left"][data-sk-collapsible="mini"] > .sk-panel-strip > .sk-panel-seg{display:inline-flex;}
    /* data-sk-resizable: a 6 px grip on the inner edge; the width is --sk-panel-w (the tool's CSS uses it) */
    [data-sk-panel][data-sk-resizable]{position:relative;}
    .sk-panel-resize{display:block; position:absolute; top:0; bottom:0; inset-inline-end:0; width:6px; cursor:col-resize; z-index:3; touch-action:none;}
    [data-sk-panel="right"] > .sk-panel-resize{inset-inline-end:auto; inset-inline-start:-3px;}
    .sk-panel-resize::after{content:""; position:absolute; top:0; bottom:0; left:2px; width:2px; background:transparent; transition:background var(--duration-fast, .12s);}
    .sk-panel-resize:hover::after, .sk-panel-resize:focus-visible::after, body.sk-resizing .sk-panel-resize::after{background:var(--accent);}
    .sk-panel-resize:focus-visible{outline:none;}
    body.sk-resizing{cursor:col-resize; user-select:none;}
  }
  /* A collapsible right panel: the mirror of the left one, on the same wide screens */
  @media (min-width:851px){
    .sk-panel-toggle[data-sk-side="right"][data-sk-collapsible]{display:inline-flex;}
    .sk-panel-toggle[data-sk-side="right"][data-sk-collapsible][aria-expanded="true"]{background:transparent; color:var(--muted);}
    .sk-panel-toggle[data-sk-side="right"][data-sk-collapsible][aria-expanded="true"]:hover{background:var(--bg-hover); color:var(--text);}
    .sk-panel-toggle.sk-has-fold[data-sk-side="right"]{display:none;}
    [data-sk-panel="right"] .sk-panel-fold svg{transform:scaleX(-1);}   /* the arrow points out, toward the edge */
    [dir="rtl"] [data-sk-panel="right"] .sk-panel-fold svg{transform:none;}
    body.sk-closed-right [data-sk-panel="right"][data-sk-collapsible]:not([data-sk-collapsible="mini"]){display:none !important;}
    body.sk-closed-right [data-sk-panel="right"][data-sk-collapsible="mini"], body.sk-closing-right [data-sk-panel="right"][data-sk-collapsible="mini"]{--sk-mini:var(--rail-w, 56px); --sk-panel-w:var(--sk-mini); width:var(--sk-mini) !important; min-width:var(--sk-mini) !important; max-width:var(--sk-mini) !important; flex-basis:var(--sk-mini) !important; box-sizing:border-box;}
    body.sk-closed-right [data-sk-panel="right"][data-sk-collapsible="mini"] > .sk-panel-resize{display:none;}
    body.sk-closed-right [data-sk-panel="right"][data-sk-collapsible="mini"] .sk-panel-fold svg{transform:none;}
    [dir="rtl"] body.sk-closed-right [data-sk-panel="right"][data-sk-collapsible="mini"] .sk-panel-fold svg{transform:scaleX(-1);}
    body.sk-closed-right [data-sk-panel="right"][data-sk-collapsible="mini"]:has(> .sk-panel-strip){padding:0 !important; overflow:hidden !important;}
    body.sk-closed-right [data-sk-panel="right"][data-sk-collapsible="mini"]:has(> .sk-panel-strip) > :not(.sk-panel-strip){display:none !important;}
    body.sk-closed-right [data-sk-panel="right"][data-sk-collapsible="mini"] > .sk-panel-strip{flex-direction:column; align-items:center; justify-content:flex-start; gap:var(--sp-1, 4px); height:auto; padding:var(--sp-2, 8px) 0 0;}
    body.sk-closed-right [data-sk-panel="right"][data-sk-collapsible="mini"] > .sk-panel-strip > .sk-panel-seg{display:inline-flex;}
  }
  @media (max-width:1050px){
    [data-sk-panel][data-sk-compact]{
      width:var(--sk-panel-w, var(--sk-compact)) !important; min-width:var(--sk-panel-w, var(--sk-compact)) !important;
      max-width:var(--sk-panel-w, var(--sk-compact)) !important; flex-basis:var(--sk-panel-w, var(--sk-compact)) !important;
    }
    [data-sk-hide~="compact"]{display:none !important;}
  }
  @media (max-width:850px){
    [data-sk-panel="left"]{display:none !important;}
    .sk-panel-toggle[data-sk-side="left"]{display:inline-flex;}
    [data-sk-hide~="narrow"]{display:none !important;}
    body.sk-open-left [data-sk-panel="left"]{
      display:var(--sk-display, block) !important; position:fixed; z-index:40; top:var(--sk-top, 44px); bottom:0; left:0;
      width:min(var(--sk-w, 280px), calc(100vw - 48px)) !important; min-width:0 !important; max-width:none !important;
      box-shadow:8px 0 24px rgb(var(--shadow-rgb) / .12);
    }
  }
  @media (max-width:620px){
    [data-sk-panel="right"]{display:none !important;}
    .sk-panel-toggle[data-sk-side="right"]{display:inline-flex;}
    [data-sk-hide~="small"]{display:none !important;}
    body.sk-open-right [data-sk-panel="right"]{
      display:var(--sk-display, block) !important; position:fixed; z-index:40; top:var(--sk-top, 44px); bottom:0; right:0;
      width:min(var(--sk-w, 280px), calc(100vw - 48px)) !important; min-width:0 !important; max-width:none !important;
      box-shadow:-8px 0 24px rgb(var(--shadow-rgb) / .12);
    }
  }
  /* Drawers slide in (state change → transition; browsers without @starting-style simply show them) */
  @media (prefers-reduced-motion: no-preference){
    body.sk-open-left [data-sk-panel="left"], body.sk-open-right [data-sk-panel="right"]{
      transition:transform var(--duration-panel, 280ms) var(--ease-out-ui, cubic-bezier(.23,1,.32,1));
    }
    @starting-style{
      body.sk-open-left [data-sk-panel="left"]{transform:translateX(-100%);}
      body.sk-open-right [data-sk-panel="right"]{transform:translateX(100%);}
    }
  }

  /* ================= App icon (tool.js — SakinIcons) =================
     The in-app logo is the app's own icon file (/assets/icons/apps/<app>.svg), inlined.
     Its i-a / i-b groups move by their --dx / --dy on hover, as in the tools list. */
  span[data-glyph]{display:block;}
  .app-title[data-sk-main]{cursor:pointer; border-radius:var(--radius);}   /* to the app's main page (tool.js) */
  .app-title[data-sk-main]:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  :is(.app-title, .brand) > .logo[data-glyph]{position:static; top:0; width:16px; height:16px; flex-shrink:0; color:var(--text);}
  [data-glyph] > svg{display:block; width:100%; height:100%; fill:none; stroke:currentColor;}
  @media (prefers-reduced-motion: no-preference){
    [data-glyph] .i-a, [data-glyph] .i-b{transition:transform var(--duration-spring, 510ms) var(--ease-spring, cubic-bezier(.23,1,.32,1));}
    :is(.app-title, .brand):hover [data-glyph] :is(.i-a, .i-b){transform:translate(var(--dx, 0), var(--dy, 0));}
  }

  /* Icon + slider control (the standard for a few related values, taken from Crop/Studio's Effects; lives here so every tool can use it):
     a row of icon buttons, each showing its value; the selected one is edited by the slider below.
     <div class="ctl-icons"><button class="ctl-btn sel" data-k="zoom"><svg…/><span class="ctl-val">100%</span></button>…</div>
     <div class="ctl-slider"><input type="range"><span class="ctl-out">100%</span></div>
     Double-click an icon to reset its value. */
  /* Pressing a button: every button, in every tool, gives a little under the finger (the one place for it).
     `scale` is its own property, so buttons already placed with transform keep their place; a class of its own
     that sets `scale` wins (:where keeps this rule at zero weight). */
  :where(button, .btn, .icon-btn, .ctl-btn, .ai-preset, .preset-pick, .sk-pick-row, .sk-pick-chip, [role="button"]){
    transition-property:scale, background-color, color, border-color, box-shadow, opacity;
    transition-duration:var(--duration-press); transition-timing-function:var(--ease-out-ui);
  }
  :where(button, .btn, .icon-btn, .ctl-btn, .ai-preset, .preset-pick, .sk-pick-chip, [role="button"]):not(:disabled):not([aria-disabled="true"]):active{ scale:.96; }
  :where(.sk-pick-row):active{ scale:.99; }   /* a whole row gives less */
  @media (prefers-reduced-motion: reduce){ :where(button, .btn, .icon-btn, .ctl-btn, .ai-preset, .preset-pick, .sk-pick-row, .sk-pick-chip, [role="button"]):active{ scale:none; } }
  /* SakinDialog (tool.js): a popup in the middle of the window over a dimmed page */
  .sk-dialog-back{position:fixed; inset:0; z-index:89; background:rgb(var(--shadow-rgb) / .32);}
  .sk-dialog-back[hidden]{display:none;}
  /* SakinConfirm (tool.js): a short question before an action */
  .sk-confirm{width:320px; padding:var(--sp-4) var(--sp-4) var(--sp-3); background:var(--panel); color:var(--text); border:1px solid var(--border-strong); border-radius:var(--radius-lg); box-sizing:border-box;}
  .sk-confirm-title{font-size:var(--ctl-font); font-weight:var(--title-weight); padding-right:28px;}
  .sk-confirm-text{margin-top:var(--sp-2); font-size:var(--ctl-font); color:var(--text-secondary, var(--muted)); line-height:1.45;}
  .sk-confirm-acts{display:flex; justify-content:flex-end; gap:var(--sp-2); margin-top:var(--sp-4);}
  .sk-dialog{position:fixed !important; left:50% !important; top:50% !important; right:auto !important; bottom:auto !important; transform:translate(-50%, -50%);
    z-index:90 !important; box-sizing:border-box; width:min(360px, calc(100vw - 32px)) !important; max-height:calc(100vh - 64px) !important; overflow:auto;
    padding:var(--sp-4) var(--sp-4) var(--sp-4) !important; background:var(--panel); border:1px solid var(--border-strong); border-radius:var(--radius-lg);
    box-shadow:0 24px 64px rgb(var(--shadow-rgb) / .28);}
  .sk-dialog > .sk-dialog-x{position:absolute !important; top:var(--sp-2); right:var(--sp-2); left:auto; margin:0 !important; display:grid; place-items:center; width:26px; height:26px; padding:0; border:0;
    border-radius:var(--radius); background:transparent; color:var(--muted); cursor:pointer;}
  .sk-dialog > .sk-dialog-x:hover{background:var(--bg-hover); color:var(--text);}
  .sk-dialog > .sk-dialog-x svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.25; stroke-linecap:round;}
  /* SakinPick (tool.js): a long list to pick from, beside its panel, as Figma's font list */
  .sk-pick{position:fixed; z-index:80; box-sizing:border-box; max-width:calc(100vw - 16px); display:flex; flex-direction:column; overflow:hidden;
    background:var(--panel); border:1px solid var(--border-strong); border-radius:var(--radius-lg); box-shadow:0 12px 32px rgb(var(--shadow-rgb) / .18); outline:none;
    font-size:var(--ctl-font); color:var(--text);}
  .sk-pick-head{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); min-height:var(--ctl-h); padding:var(--sp-2) var(--sp-2) var(--sp-1) var(--sp-4);
    font-size:var(--ctl-font); font-weight:var(--title-weight);}
  .sk-pick-x{display:grid; place-items:center; width:24px; height:24px; padding:0; border:0; border-radius:var(--radius); background:transparent; color:var(--muted); cursor:pointer;}
  .sk-pick-x:hover{background:var(--bg-hover); color:var(--text);}
  .sk-pick-x svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.25; stroke-linecap:round;}
  .sk-pick-htitle{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  /* search: a small icon on the title's line; the field takes the title's place */
  .sk-pick-head .sk-pick-find{margin-left:auto;}
  .sk-pick-head .sk-pick-find + .sk-pick-x{margin-left:calc(-1 * var(--sp-2) + 2px);}
  .sk-pick-head .sk-pick-q{display:none;}
  .sk-pick-head.searching .sk-pick-htitle{display:none;}
  .sk-pick-head.searching .sk-pick-find{color:var(--accent);}
  .sk-pick-head.searching .sk-pick-q{display:block; flex:1; min-width:0; height:24px; margin:0 0 0 calc(-1 * var(--sp-2)); padding:0 var(--sp-2); border:0; border-radius:var(--radius);
    box-shadow:none; outline:none; background:var(--bg-input); color:var(--text); font:inherit; font-weight:400;}
  .sk-pick-list{flex:1; min-height:0; overflow:auto; padding:var(--sp-1); border-top:1px solid var(--border);}
  .sk-pick-head + .sk-pick-list{border-top:0;}
  .sk-pick-sec[hidden], .sk-pick-row[hidden]{display:none;}
  .sk-pick-end{display:flex; align-items:center; gap:var(--sp-2); min-width:0;}
  .sk-pick-chips{display:flex; gap:1px; padding:1px; border-radius:calc(var(--radius) - 1px); background:var(--bg-hover);}
  .sk-pick-chip{height:20px; min-width:26px; padding:0 var(--sp-1); border:0; border-radius:calc(var(--radius) - 2px); background:transparent; color:var(--muted);
    font:inherit; font-size:var(--ctl-font-sm); font-variant-numeric:tabular-nums; cursor:pointer;}
  .sk-pick-chip:hover{color:var(--text);}
  .sk-pick-chip.active{background:var(--panel); color:var(--text); font-weight:500; box-shadow:0 0 0 1px var(--border-strong);}
  .sk-pick-sec + .sk-pick-sec{margin-top:var(--sp-1); padding-top:var(--sp-1); border-top:1px solid var(--border);}
  .sk-pick-title{padding:var(--sp-1) var(--sp-2) var(--sp-05) calc(var(--sp-2) + 14px + var(--sp-2)); font-size:var(--ctl-font-sm); color:var(--muted);}
  .sk-pick-row{display:grid; grid-template-columns:14px minmax(0, 1fr) auto 18px; align-items:center; gap:var(--sp-2); height:var(--ctl-h); padding:0 var(--sp-1) 0 var(--sp-2);
    border-radius:calc(var(--radius) - 2px); cursor:pointer; outline:none; white-space:nowrap;}
  .sk-pick-row:hover, .sk-pick-row:focus-visible, .sk-pick-row:focus{background:var(--bg-hover);}
  .sk-pick-row.active{font-weight:500;}
  .sk-pick-row.muted{opacity:.5;}
  .sk-pick-check{display:grid; place-items:center; width:14px; height:14px; color:var(--text);}
  .sk-pick-check svg, .sk-pick-del svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
  .sk-pick-check svg{stroke-width:2.25;}   /* its old 16 grid's weight, now drawn on 24 */
  .sk-pick-label{overflow:hidden; text-overflow:ellipsis;}
  .sk-pick-note{color:var(--muted); font-variant-numeric:tabular-nums; font-weight:400;}
  .sk-pick-del{display:grid; place-items:center; width:18px; height:18px; padding:0; border:0; border-radius:4px; background:transparent; color:var(--muted); cursor:pointer; opacity:0;}
  .sk-pick-row:hover .sk-pick-del, .sk-pick-row:focus .sk-pick-del, .sk-pick-del.armed{opacity:1;}
  .sk-pick-del:hover{color:var(--text); background:var(--bg-selected);}
  .sk-pick-del.armed{color:var(--on-danger); background:var(--danger);}
  @media (hover:none){ .sk-pick-del{opacity:1;} }
  .sk-pick-edit{display:grid; place-items:center; width:18px; height:18px; margin:0 -2px; padding:0; border:0; border-radius:4px; background:transparent; color:var(--muted); cursor:pointer;}
  .sk-pick-edit svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;}
  .sk-pick-edit:hover{color:var(--text); background:var(--bg-selected);}
  /* select: 'row' (sizes): the chosen row by its background; a pencil at the end while the pointer is on an editable row */
  .sk-pick-rows .sk-pick-row{grid-template-columns:minmax(0, 1fr) auto 18px;}
  .sk-pick-rows .sk-pick-row.active{background:var(--bg-selected); font-weight:500;}
  .sk-pick-rows .sk-pick-title{padding-left:var(--sp-2);}
  .sk-pick-rows .sk-pick-edit{margin:0; opacity:0;}
  .sk-pick-rows .sk-pick-row:hover .sk-pick-edit, .sk-pick-rows .sk-pick-row:focus-visible .sk-pick-edit, .sk-pick-rows .sk-pick-edit:focus-visible{opacity:1;}
  @media (hover:none){ .sk-pick-rows .sk-pick-edit{opacity:1;} }
  .sk-pick-act, .sk-pick-rows .sk-pick-act{grid-template-columns:14px minmax(0, 1fr); color:var(--muted);}
  /* SakinSizes (sizes.js): a size's form in the same box — name, W, lock, H; Delete, Cancel, Save */
  .sk-pick-form{padding:var(--sp-1) var(--sp-4) var(--sp-4);}
  .sk-size-l{display:block; margin:var(--sp-2) 0 var(--sp-1); font-size:var(--ctl-font-sm); color:var(--muted); font-weight:400;}
  .sk-size-in{box-sizing:border-box; width:100%; height:var(--ctl-h); padding:0 var(--sp-2); border:1px solid var(--control-line); border-radius:var(--radius);
    background:var(--bg-input); color:var(--text); font:inherit; font-size:var(--ctl-font); font-variant-numeric:tabular-nums; outline:none; box-shadow:none;}
  .sk-size-in:focus{border-color:var(--accent);}
  .sk-size-in::placeholder{color:var(--muted);}
  .sk-size-dims{display:grid; grid-template-columns:auto minmax(0, 1fr) 24px auto minmax(0, 1fr); align-items:center; gap:var(--sp-2); margin-top:var(--sp-3);}
  .sk-size-dims > span{font-size:var(--ctl-font-sm); color:var(--muted);}
  .sk-size-lock.active{color:var(--accent); background:var(--bg-selected);}
  .sk-size-acts{display:flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-4);}
  .sk-size-acts .sk-size-sp{flex:1;}
  .sk-size-btn{height:var(--ctl-h-sm, 24px); padding:0 var(--sp-3); border:0; border-radius:var(--radius); background:var(--bg-hover); color:var(--text);
    font:inherit; font-size:var(--ctl-font-sm); font-weight:500; cursor:pointer;}
  .sk-size-btn:hover{background:var(--bg-selected);}
  .sk-size-btn.primary{background:var(--accent); color:var(--on-accent);}
  .sk-size-btn.primary:hover{background:var(--accent-hover);}
  .sk-size-btn.danger{background:transparent; color:var(--danger-ink, var(--danger)); padding:0 var(--sp-2); margin-left:calc(-1 * var(--sp-2));}
  .sk-size-btn.danger:hover{background:var(--danger-wash, var(--bg-hover));}
  .sk-pick-act:hover, .sk-pick-act:focus{color:var(--text);}
  .ctl-icons{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:var(--sp-05);}
  .ctl-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-1); height:var(--ctl-h-sm); padding:0 var(--sp-1);
    border:1px solid transparent; border-radius:var(--radius); background:transparent; cursor:pointer; color:var(--muted);
    transition:background-color var(--duration-press), color var(--duration-press);
  }
  .ctl-btn svg{width:14px; height:14px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
  .ctl-btn .ctl-val{font-size:var(--ctl-font-sm); line-height:1; color:var(--muted); font-variant-numeric:tabular-nums;}
  .ctl-btn:hover{background:var(--bg-hover); color:var(--text);}
  .ctl-btn.sel{background:var(--bg-selected); color:var(--accent);}
  .ctl-btn.sel .ctl-val{color:var(--c-accent-text);}
  .ctl-btn.changed .ctl-val{color:var(--text);}   /* a value moved from its default reads in the text colour, not bold */
  .ctl-slider{margin-top:var(--sp-1); height:14px; display:flex; align-items:center;}
  .ctl-slider input[type=range]{flex:1; min-width:0; width:auto;}
  .ctl-slider .ctl-out{display:none;}

  /* SakinRail (tool.js): the column at the far left of the tools and the TRT projects page, as Figma's. 44 wide (the
     header's height), so its top square sits level with the header and the way home is in the header's row; below it
     the apps, 32 px buttons with 20 px drawings (an M bar's), 4 apart, the first 4 under the header line. The page
     moves right by its width. Below 851 px (where the panels become drawers) a tool shows the header's back arrow
     instead. */
  :root{ --rail-w:44px; }
  .sk-rail{position:fixed; z-index:45; left:0; top:0; bottom:0; width:var(--rail-w); box-sizing:border-box; display:flex; flex-direction:column; align-items:center;
    background:var(--panel); border-right:1px solid var(--border);}
  .sk-rail-top{flex:none; width:100%; height:44px; display:grid; place-items:center; box-shadow:inset 0 -1px 0 var(--border);}
  .sk-rail-list{position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--sp-1); padding-top:var(--sp-1);}
  .sk-rail-btn{display:grid; place-items:center; width:var(--bar-m-btn); height:var(--bar-m-btn); border-radius:var(--radius); color:var(--muted); text-decoration:none;
    transition:background-color var(--duration-press), color var(--duration-press);}
  .sk-rail-btn:hover{background:var(--bg-hover); color:var(--text);}
  .sk-rail-btn[aria-current]{background:var(--bg-selected); color:var(--accent);}
  /* in the list, the current app's background is one mark that slides from app to app (SakinRail.set) */
  .sk-rail-list .sk-rail-btn{position:relative; z-index:1;}
  .sk-rail-list .sk-rail-btn[aria-current]{background:transparent;}
  .sk-rail-list .sk-rail-btn[aria-current]:hover{background:var(--bg-hover);}
  .sk-rail-mark{position:absolute; z-index:0; top:0; left:calc(50% - var(--bar-m-btn) / 2); width:var(--bar-m-btn); height:var(--bar-m-btn);
    border-radius:var(--radius); background:var(--bg-selected); opacity:0; pointer-events:none;}
  .sk-rail-mark.is-on{opacity:1;}
  .sk-rail.is-ready .sk-rail-mark{transition:translate var(--duration-ui) var(--ease-out-strong), opacity var(--duration-fast) var(--ease-out-strong);}
  .sk-rail-btn:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
  .sk-rail-btn > svg, .sk-rail-btn .logo, .sk-rail-btn .logo svg{width:var(--bar-m-icon); height:var(--bar-m-icon); display:block;}
  .sk-rail-btn > svg{fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
  /* the same in every tool, whatever the tool's own rules say about .logo or buttons (Grid colours .logo, and gives every
     button a 28 px floor) */
  .sk-rail .sk-rail-btn :is(.logo, svg){color:inherit;}
  /* each app's name under its mark: the button grows to hold it (the sliding mark takes its height, SakinRail.set) */
  .sk-rail-list .sk-rail-btn{width:calc(var(--rail-w) - var(--sp-1)); height:auto; grid-template-rows:auto auto; row-gap:3px; padding:5px 0 4px;}
  .sk-rail-name{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 10px/1 var(--font-sans); letter-spacing:0;}
  .sk-rail-list .sk-rail-mark{left:calc(var(--sp-1) / 2); width:calc(var(--rail-w) - var(--sp-1));}
  .sk-zoom button{min-height:0;}
  body.sk-has-rail{padding-left:var(--rail-w); box-sizing:border-box;}
  body.sk-has-rail #app{width:auto;}
  body.presentation > .sk-rail{display:none;}
  body.presentation.sk-has-rail{padding-left:0;}
  @media (min-width:851px){ body.sk-has-rail .sk-home{display:none;} }   /* the rail's top is the way home */
  /* Beside the rail the header's logo stands in the panel's icon column (8 from the edge) and the app's name in its
     text column (32): the same line down the page. Crop's #toolbar and Grid's header too. */
  @media (min-width:851px){ body.sk-has-rail :is(.page-header, #toolbar[data-sk-header], #app > header){padding-left:var(--sp-2);} }
  body[data-app="trt"].sk-has-rail .page-header{padding-left:var(--sp-2);}
  @media (max-width:850px){ body.sk-has-rail:not([data-app="trt"]){padding-left:0;} body:not([data-app="trt"]) > .sk-rail{display:none;} }
  /* SakinColor (tool.js): the colour picker — a saturation–brightness square, a hue strip, the colour and its hex.
     The hue strip and the square are the colours themselves, not theme colours. */
  .cp{display:block;}
  .cp[hidden]{display:none;}
  .cp-sv{position:relative; height:148px; border-radius:4px; cursor:crosshair; touch-action:none;}
  .cp-hue{position:relative; height:12px; border-radius:6px; margin-top:var(--sp-2); cursor:pointer; touch-action:none;
    background:linear-gradient(to right,#f00 0%,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,#f00 100%);}
  .cp-knob{position:absolute; width:12px; height:12px; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none;
    border:2px solid var(--knob); box-shadow:0 0 0 1px rgb(var(--shadow-rgb) / .18), 0 1px 3px rgb(var(--shadow-rgb) / .3);}
  .cp-hue .cp-knob{top:50%; background:transparent;}
  .cp-row{display:flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-2);}
  .cp-row label{margin:0; font-size:var(--ctl-font-sm); color:var(--text-secondary);}
  .cp-prev{width:20px; height:20px; border-radius:4px; border:1px solid rgb(var(--shadow-rgb) / .14); flex-shrink:0;}
  .cp-row input.cp-hex{flex:1; min-width:0; height:var(--ctl-h-sm); font-size:var(--ctl-font-sm); text-transform:uppercase; font-variant-numeric:tabular-nums;}
  /* ================= Sliders (every range input in every tool) =================
     One look everywhere: a thin 2 px track and a small round thumb, no filled part.
     Two sizes: default (panels, popovers) and large for bars on the canvas
     (<input type="range" class="sk-range-lg">: image zoom, timeline).
     :where() keeps specificity at zero, so tools still set width/flex on their own. */
  :where(body[data-app], body.sys) input[type=range]{
    -webkit-appearance:none; appearance:none; height:14px; margin:0; padding:0; background:transparent; cursor:pointer;
    --sk-track:2px; --sk-thumb:10px;
  }
  :where(body[data-app], body.sys) input[type=range].sk-range-lg{height:20px; --sk-track:3px; --sk-thumb:14px;}
  :where(body[data-app], body.sys) input[type=range]::-webkit-slider-runnable-track{height:var(--sk-track); border-radius:2px; background:var(--border-strong);}
  :where(body[data-app], body.sys) input[type=range]::-moz-range-track{height:var(--sk-track); border-radius:2px; background:var(--border-strong);}
  :where(body[data-app], body.sys) input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; width:var(--sk-thumb); height:var(--sk-thumb); border-radius:50%;
    margin-top:calc((var(--sk-track) - var(--sk-thumb)) / 2);
    background:var(--knob); border:1px solid var(--border-strong); box-shadow:0 1px 2px rgb(var(--shadow-rgb) / .15);
    transition:border-color var(--duration-press), transform var(--duration-press);
  }
  :where(body[data-app], body.sys) input[type=range]::-moz-range-thumb{
    width:var(--sk-thumb); height:var(--sk-thumb); border-radius:50%; box-sizing:border-box;
    background:var(--knob); border:1px solid var(--border-strong); box-shadow:0 1px 2px rgb(var(--shadow-rgb) / .15);
  }
  :where(body[data-app], body.sys) input[type=range]:hover::-webkit-slider-thumb,
  :where(body[data-app], body.sys) input[type=range]:focus-visible::-webkit-slider-thumb{border-color:var(--accent);}
  :where(body[data-app], body.sys) input[type=range]:hover::-moz-range-thumb,
  :where(body[data-app], body.sys) input[type=range]:focus-visible::-moz-range-thumb{border-color:var(--accent);}
  :where(body[data-app], body.sys) input[type=range]:active::-webkit-slider-thumb{transform:scale(1.1);}
  :where(body[data-app], body.sys) input[type=range]:focus-visible{outline:none;}
  :where(body[data-app], body.sys) input[type=range]:disabled{opacity:.4; cursor:default;}
/* Back to the site's tool list: a small arrow before the app icon (tool.js) */
.sk-home{display:inline-grid; place-items:center; width:20px; height:20px; margin:0 var(--sp-05) 0 calc(-1 * var(--sp-1)); border-radius:4px; color:var(--muted); flex-shrink:0; transition:color var(--duration-press), background-color var(--duration-press);}
.sk-home svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}
.sk-home:hover{color:var(--text); background:var(--bg-hover);}
.sk-home:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}

/* The chosen item on one line (name, dims, chevron); its list opens with SakinPick (tool.js). Crop Output size, Twit Card size. */
.preset-pick{ display:flex; align-items:center; gap:var(--sp-2); width:100%; height:var(--ctl-h); padding:0 var(--sp-2); border:1px solid var(--control-line);
  border-radius:var(--radius); background:var(--bg-input); color:var(--text); font:inherit; font-size:var(--ctl-font); cursor:pointer; text-align:left; }
.preset-pick:hover{ background:var(--bg-hover); }
.preset-pick .pp-name{ font-weight:400; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.preset-pick .pp-dims{ margin-left:auto; flex:none; white-space:nowrap; color:var(--text-secondary); font-variant-numeric:tabular-nums; }   /* the size always whole; the name gives way */
.preset-pick svg{ width:12px; height:12px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:2; transition:transform var(--duration-press); }
.preset-pick[aria-expanded="true"] svg{ transform:rotate(180deg); }

  /* Touch (SakinTouch, tool.js): a tool page doesn't zoom itself under two fingers (the canvas has its own zoom);
     scrolling stays. Where a finger moves a picture (a crop frame, Studio's slots), the tool gives it touch-action:none. */
  body[data-app], body[data-app] .sk-viewport{touch-action:pan-x pan-y;}

  /* ================= Motion (tool pages; SakinMotion in tool.js; tasarim-yonergesi.md §9) =================
     Small arrivals that make a change readable, none that make anyone wait. Frequent actions (typing, sliders,
     switching tools, pressing keys) stay immediate. Every entry uses opacity and the separate `scale` / `translate`
     properties, so an element already placed with `transform` (centred popovers, the dialog) keeps its place.
     Exits are instant. Reduced motion: opacity only. */

  /* The page arrives whole and at once (SakinMotion, tool.js). Opened directly: one short fade. */
  body[data-app]{transition:opacity var(--duration-fast) var(--ease-out-strong);}
  html.sk-booting body[data-app]{opacity:0;}
  html.sk-instant body[data-app]{transition:none;}
  /* From one tool to another (a page transition, core.css): what is the same on both pages (the rail, the header,
     the panels' frame) stands still, because the two pictures cross over exactly (same time, same curve, added
     light); what changes crosses over in --duration-ui. The work area's new content settles in over the old one,
     a touch larger to its size. Clicks go through the transition to the new page. */
  html.sk-tool::view-transition{pointer-events:none;}
  html.sk-tool::view-transition-group(root){animation-duration:var(--duration-ui);}
  html.sk-tool::view-transition-old(root){animation:sk-vt-out var(--duration-ui) var(--ease-out-ui) both;}
  html.sk-tool::view-transition-new(root){animation:sk-vt-in var(--duration-ui) var(--ease-out-ui) both;}
  @keyframes sk-vt-out{ to{ opacity:0; } }
  @keyframes sk-vt-in{ from{ opacity:0; } }
  /* until the new page has built itself, the old one stays on screen (SakinMotion) */
  html.sk-vt-hold::view-transition-old(root), html.sk-vt-hold::view-transition-new(root){animation-play-state:paused;}
  /* The work (data-sk-work: the frame, the scene, the card, the composition) arrives last, once it is ready: out of
     sight on its own layer while it waits, then it fades in (SakinMotion). Size and place never move (the rulers read
     them). */
  html.sk-work-wait [data-sk-work]{opacity:0; will-change:opacity;}
  html.sk-work-in [data-sk-work]{transition:opacity var(--duration-reveal) var(--ease-out-strong); will-change:opacity;}
  /* ...and as it comes, its edges are drawn across the canvas, from its middle out to the rulers, then fade: the home
     page's type guides (index.html), the house line, in the same colour (--guide) */
  .sk-guides{position:fixed; z-index:30; overflow:hidden; pointer-events:none;}
  .sk-guide{position:absolute; display:block; background:var(--guide); opacity:0;}
  .sk-guide-h{left:0; right:0; height:1px; animation:sk-guide-h 1400ms var(--ease-out-ui) both;}
  .sk-guide-v{top:0; bottom:0; width:1px; animation:sk-guide-v 1400ms var(--ease-out-ui) both;}
  @keyframes sk-guide-h{ 0%{ opacity:1; scale:0 1; } 45%{ opacity:1; scale:1 1; } 70%{ opacity:1; } 100%{ opacity:0; scale:1 1; } }
  @keyframes sk-guide-v{ 0%{ opacity:1; scale:1 0; } 45%{ opacity:1; scale:1 1; } 70%{ opacity:1; } 100%{ opacity:0; scale:1 1; } }
  /* waiting longer than a moment: a thin running line where the work will be */
  .sk-work-loader{position:fixed; z-index:40; width:56px; height:2px; margin:-1px 0 0 -28px; border-radius:1px; overflow:hidden; color:var(--text-muted);
    opacity:0; transition:opacity var(--duration-ui) var(--ease-out-strong); pointer-events:none;}
  .sk-work-loader::before{content:""; position:absolute; inset:0; background:currentColor; opacity:.18;}
  .sk-work-loader::after{content:""; position:absolute; top:0; bottom:0; left:0; width:34%; background:currentColor; opacity:.7; animation:sk-indet 1.15s var(--ease-move) infinite;}
  .sk-work-loader.is-on{opacity:1;}

  /* A big picture arrives when decoded (SakinMotion.reveal): Studio's panorama and overlay */
  .sk-reveal{opacity:0; transition:opacity var(--duration-reveal) var(--ease-out-strong);}
  .sk-reveal.is-in{opacity:1;}

  /* Menus, popovers, pick lists, settings, the report form: they grow a little from where they were opened */
  @keyframes sk-pop-in{ from{ opacity:0; scale:.97; translate:0 -3px; } }
  @keyframes sk-pop-up{ from{ opacity:0; scale:.97; translate:0 3px; } }
  @keyframes sk-fade-in{ from{ opacity:0; } }
  :is(.popover:not(.hidden), .sk-pick, .sk-set-pop:not([hidden]), .sk-help-pop, .ctx:not(.hidden), #rev-menu.open){
    transform-origin:top center; animation:sk-pop-in var(--duration-ui) var(--ease-out-strong);}
  /* opened above their button (the bars at the foot of the canvas): from below */
  :is(#zoomout-popover, #bg-popover, .sk-bar-pop):not(.hidden){transform-origin:bottom center; animation-name:sk-pop-up;}
  /* the dialog settles in the middle; its backdrop fades */
  .sk-dialog:not([hidden]){animation:sk-pop-in var(--duration-ui) var(--ease-out-strong); transform-origin:center;}
  .sk-dialog-back:not([hidden]){animation:sk-fade-in var(--duration-ui) var(--ease-out-strong);}
  /* opened from a picture (SakinMotion.fly): the picture flies to its place, so the dialog only fades around it */
  .sk-dialog.sk-zooming:not([hidden]){animation-name:sk-fade-in;}
  .sk-fly{position:fixed; z-index:95; margin:0; max-width:none; object-fit:fill; pointer-events:none; user-select:none; will-change:transform, clip-path;}
  .sk-fly-dim{pointer-events:none; animation:none !important;}
  /* a choice's mark sliding to the new choice (SakinMotion): under the buttons' own label */
  .sk-sliding{isolation:isolate;}
  .sk-slide-mark{position:absolute; z-index:-1; margin:0; pointer-events:none; transform-origin:0 0;}
  /* a section opening: its content fades in under the title (no height animation: the panel's rows stay put) */
  :is(.acc:not(.collapsed) > :not(.section-label), .sec.acc:not(.collapsed) > :not(.sec-title):not(.sec-title-row)){
    animation:sk-fade-in var(--duration-fast) var(--ease-out-strong);}

  /* An export button at work: a thin bar along its foot fills with the files done (SakinExport.busy), or runs
     while the count is unknown */
  .sk-busy{position:relative; overflow:hidden;}
  .sk-busy::before{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:currentColor; opacity:.16; pointer-events:none;}   /* the track: busy from the first moment */
  .sk-busy::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:currentColor; opacity:.55;
    transform-origin:left center; scale:var(--sk-p, 0) 1; transition:scale var(--duration-panel) var(--ease-out-strong); pointer-events:none;}
  .sk-busy[data-sk-indet]::after{right:auto; width:34%; scale:1; animation:sk-indet 1.15s var(--ease-move) infinite;}
  @keyframes sk-indet{ from{ translate:-100% 0; } to{ translate:300% 0; } }

  @media (prefers-reduced-motion: reduce){
    :is(.popover, .sk-pick, .sk-set-pop, .sk-help-pop, .ctx, #rev-menu, #zoomout-popover, #bg-popover, .sk-dialog){animation-name:sk-fade-in !important;}
    .sk-busy[data-sk-indet]::after{animation:none; width:100%; opacity:.3;}
    .sk-rail.is-ready .sk-rail-mark{transition:none;}
    .sk-work-loader::after{animation:none; width:100%; opacity:.3;}
  }