/* Ginger Studio public demo: a dense desktop editor with its own identity. */
:root {
  color-scheme: dark;
  --u: max(.64px, calc(100vw / 2048));
  --surface: #1d2230;
  --field: #151a26;
  --divider: #151b28;
  --text: #d6dceb;
  --muted: #8391a8;
  --accent: #b9a4ff;
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--surface);
  color: var(--text);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 1310px; min-height: 760px; overflow: auto; }
button, input, select { font: inherit; color: inherit; }
button { border: 0; border-radius: 0; padding: 0; background: none; cursor: pointer; }
button:hover { background: #ffffff09; }
button:disabled { opacity: .32; cursor: default; }
button:focus-visible, select:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
input, select { min-width: 0; border: 0; border-radius: calc(2 * var(--u)); background: var(--field); outline: none; }
input { padding: 0 calc(5 * var(--u)); }
input:focus { outline: 1px solid var(--accent); }
input[type=number] { appearance: textfield; }
input::-webkit-inner-spin-button { appearance: none; }
input[type=checkbox] { appearance: none; padding: 0; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border: 1px solid #a2a2a4; border-radius: calc(2 * var(--u)); background: transparent; cursor: pointer; }
input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 calc(3 * var(--u)) #1d2230; }
input[type=color] { padding: 0; width: calc(17 * var(--u)); height: calc(17 * var(--u)); border: 1px solid #d6dceb; border-radius: 0; cursor: pointer; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: 0; }
svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); flex-shrink: 0; fill: none; }
[hidden] { display: none !important; }
.editor-app { width: 100%; min-width: 1310px; height: 100dvh; min-height: 760px; display: grid; grid-template-rows: calc(42 * var(--u)) calc(44 * var(--u)) minmax(0, 1fr); font-size: calc(13 * var(--u)); line-height: 1.3; }
.menubar { background: #10131d; display: flex; align-items: center; }
.app-mark { width: calc(38 * var(--u)); height: calc(32 * var(--u)); object-fit: contain; margin: 0 calc(12 * var(--u)) 0 calc(10 * var(--u)); }
.menubar nav { display: flex; height: 100%; align-items: center; gap: calc(3 * var(--u)); }
.menubar nav button { height: 100%; padding: 0 calc(12 * var(--u)); font-size: calc(15 * var(--u)); color: #b9c3d8; }
.window-controls { margin-left: auto; height: 100%; display: flex; align-items: center; gap: calc(16 * var(--u)); padding-right: calc(9 * var(--u)); }
.window-controls svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.toolbar { background: var(--surface); border-bottom: calc(2 * var(--u)) solid #101011; display: flex; align-items: center; padding-left: calc(10 * var(--u)); }
.run-button { background: #080809; border-radius: calc(4 * var(--u)); height: calc(32 * var(--u)); display: flex; align-items: center; gap: calc(5 * var(--u)); padding: 0 calc(10 * var(--u)); margin-right: calc(15 * var(--u)); font-size: calc(12 * var(--u)); white-space: nowrap; }
.run-button svg { color: var(--accent); width: calc(12 * var(--u)); height: calc(15 * var(--u)); fill: currentColor; }
.tool-group { display: flex; align-items: center; height: calc(36 * var(--u)); border-right: 1px solid #333c52; }
.tool { width: calc(51 * var(--u)); height: calc(42 * var(--u)); display: grid; place-items: center; color: #aab7ce; }
.tool svg { width: calc(25 * var(--u)); height: calc(25 * var(--u)); }
.tool.active { width: calc(43 * var(--u)); background: var(--accent); color: white; }
.creation-tools .tool { width: calc(51 * var(--u)); }
.labels-tool { margin-left: calc(4 * var(--u)); }
#save-status { margin-left: auto; margin-right: calc(20 * var(--u)); font-size: calc(11 * var(--u)); color: #858588; }
#save-status:empty { display: none; }
.workbench { min-height: 0; display: grid; grid-template-columns: calc(332 * var(--u)) minmax(0, 1fr) calc(358 * var(--u)); }
.layers-panel { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding-right: calc(18 * var(--u)); border-right: calc(3 * var(--u)) solid #101011; }
.tree-scroll { flex: 1; overflow: auto; scrollbar-width: none; }
.tree-group { height: calc(39 * var(--u)); width: 100%; display: flex; gap: calc(4 * var(--u)); align-items: center; text-align: left; padding-left: calc(10 * var(--u)); }
.tree-group .chevron { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
.tree-group .folder-icon { width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: #c8c8ca; stroke: var(--surface); }
.tree-group span { margin-left: calc(1 * var(--u)); }
.image-group { padding-left: calc(31 * var(--u)); background: #31314b; height: calc(34 * var(--u)); }
#image-layers { background: #262b3c; }
.image-layer { height: calc(34 * var(--u)); display: flex; align-items: center; padding: 0 calc(13 * var(--u)) 0 calc(67 * var(--u)); gap: calc(6 * var(--u)); white-space: nowrap; color: #a9b4ca; }
.image-layer>svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.image-layer span { flex: 1; }
.image-layer small, .layer-row small { border: 1px solid #626064; color: #8b898d; font-size: calc(9 * var(--u)); line-height: 1; padding: 0 calc(3 * var(--u)); border-radius: calc(2 * var(--u)); white-space: nowrap; }
.image-layer .tiny { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.layer-row { display: flex; align-items: center; height: calc(34 * var(--u)); padding-right: calc(60 * var(--u)); }
.layer-row.selected, .layer-row.reference-highlight { background: #2b3348; }
.layer-select { display: flex; align-items: center; gap: calc(7 * var(--u)); padding-left: calc(47 * var(--u)); height: 100%; flex: 1; min-width: 0; text-align: left; white-space: nowrap; }
.layer-select svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.layer-row[data-kind=text] .layer-select svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin-left: calc(-3 * var(--u)); margin-right: calc(-3 * var(--u)); }
.layer-row.is-hidden { opacity: .45; }
.layer-visibility { display: none; width: calc(24 * var(--u)); height: 100%; }
.layer-row:hover { padding-right: calc(5 * var(--u)); }
.layer-row:hover .layer-visibility { display: grid; place-items: center; }
.layer-visibility svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.tree-scrollbar { position: absolute; width: calc(16 * var(--u)); right: 0; top: 0; bottom: calc(44 * var(--u)); background: #171c29; }
.tree-scrollbar span { position: absolute; top: calc(2 * var(--u)); left: calc(2 * var(--u)); right: calc(2 * var(--u)); height: calc(484 * var(--u)); border-radius: calc(8 * var(--u)); background: #3b465e; }
.layer-footer { height: calc(44 * var(--u)); flex-shrink: 0; border-top: calc(2 * var(--u)) solid #151517; display: flex; gap: calc(4 * var(--u)); align-items: center; padding-left: calc(17 * var(--u)); margin-right: calc(-18 * var(--u)); }
.layer-footer button { width: calc(28 * var(--u)); height: calc(31 * var(--u)); display: grid; place-items: center; }
.layer-footer svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
#undo { opacity: 0; }
.layer-footer:hover #undo, #undo:focus-visible { opacity: 1; }
.center-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--surface); }
.document-tabs { height: calc(37 * var(--u)); flex-shrink: 0; display: flex; background: #151a27; }
.document-tabs button { border-right: 1px solid #161618; height: 100%; }
.home-tab { width: calc(44 * var(--u)); color: #9c9ca0; display: grid; place-items: center; }
.home-tab svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); fill: currentColor; }
.document-tab { min-width: calc(193 * var(--u)); padding: 0 calc(22 * var(--u)); color: #8795b0; font-size: calc(13 * var(--u)); }
.document-tab.active { background: var(--surface); color: #edf0f9; }
.workspace { flex: 1; min-width: 0; min-height: 0; overflow: auto; position: relative; display: grid; place-items: center; background: var(--surface); touch-action: none; scrollbar-width: thin; scrollbar-color: #353538 #171c29; }
.workspace.is-grid { background-image: url('./icons.svg#grid-dots'); background-size: calc(20 * var(--u)); }
.workspace[data-tool=hand] { cursor: grab; }
.workspace.is-panning { cursor: grabbing; }
.workspace[data-tool=zoom] { cursor: zoom-in; }
.device-shell { position: relative; flex-shrink: 0; }
.dashboard { position: relative; width: 1168px; height: 682px; transform-origin: top left; background: #0c1019; isolation: isolate; }
.widget { position: absolute; display: flex; flex-direction: column; line-height: 1.2; font-family: Arial, "PingFang SC", sans-serif; user-select: none; touch-action: none; cursor: move; }
.widget-value { white-space: pre; line-height: 1.2; font-size: inherit; }
.widget-label { font: 800 25px/1.2 Arial, sans-serif; margin-bottom: 4px; white-space: nowrap; }
.widget.selected { outline: 1.5px solid #b9a4ff; outline-offset: 0; z-index: 20; }
.selection-label { position: absolute; left: 0; top: -24px; color: #a7b6d2; font: 14px/20px Arial, sans-serif; pointer-events: none; }
.resize-handle { position: absolute; z-index: 2; width: 9px; height: 9px; background: #fff; border: 1px solid #b9a4ff; }
.resize-handle[data-corner=nw] { left:-4.5px; top:-4.5px; cursor:nwse-resize; }
.resize-handle[data-corner=n] { left:calc(50% - 4.5px); top:-4.5px; cursor:ns-resize; }
.resize-handle[data-corner=ne] { right:-4.5px; top:-4.5px; cursor:nesw-resize; }
.resize-handle[data-corner=e] { right:-4.5px; top:calc(50% - 4.5px); cursor:ew-resize; }
.resize-handle[data-corner=se] { right:-4.5px; bottom:-4.5px; cursor:nwse-resize; }
.resize-handle[data-corner=s] { left:calc(50% - 4.5px); bottom:-4.5px; cursor:ns-resize; }
.resize-handle[data-corner=sw] { left:-4.5px; bottom:-4.5px; cursor:nesw-resize; }
.resize-handle[data-corner=w] { left:-4.5px; top:calc(50% - 4.5px); cursor:ew-resize; }
.reference-text { left:434px; top:192px; width:300px; height:300px; color:#b9a4ff; font-size:60px; font-weight:500; }
.widget[data-style=green] { background:#a8c8d7; }.widget[data-style=gray] { background:#a9b6cc; }
.widget[data-kind=stats] .widget-value { display:flex; width:100%; justify-content:space-around; }
.stat-part { flex:1; text-align:center; }.stat-part+.stat-part { border-left:2px solid #314009; }
.gap-row { display:flex; gap:8px; align-items:center; line-height:1.7; }.gap-driver { flex:1; }.gap-position { color:#e7b694; }
.gap-ahead,.gap-behind { color:black; min-width:76px; line-height:1.2; text-align:center; font-weight:800; }.gap-ahead { background:#a3cec8; }.gap-behind { background:#e7b696; }
.fixed { position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#aaa; font:800 25px/1.2 Arial,sans-serif; }
.fixed strong { font-size:40px; }.fixed.delta { left:464px; top:0; width:272px; height:110px; background:#a9b6cc; color:#070707; clip-path:polygon(0 0,100% 0,94% 100%,6% 100%); }.fixed.delta strong { color:white; }.fixed.test { left:766px; top:8px; width:286px; height:56px; background:#a9b6cc; color:#050505; }.fixed.clock { left:1058px; top:8px; width:134px; height:56px; background:#a9b6cc; color:#050505; }.fixed.sof { left:766px; top:74px; width:218px; height:80px; }.fixed.incident { left:988px; top:74px; width:204px; height:80px; }
.canvas-status { height:calc(31 * var(--u)); flex-shrink:0; border-top:calc(2 * var(--u)) solid #101011; display:flex; align-items:center; gap:calc(4 * var(--u)); padding-left:calc(5 * var(--u)); }
.canvas-status select { width:calc(77 * var(--u)); height:calc(26 * var(--u)); padding-left:calc(5 * var(--u)); border:1px solid #363638; border-radius:0; font-size:calc(12 * var(--u)); }
.canvas-status button { display:grid; place-items:center; width:calc(30 * var(--u)); height:calc(26 * var(--u)); }.canvas-status svg { width:calc(18 * var(--u)); height:calc(18 * var(--u)); }.accent-icon { color:var(--accent); }
#canvas-message { margin-left:auto; padding-right:calc(12 * var(--u)); font-size:calc(11 * var(--u)); color:#8b8b8f; }.preview-hint { display:none; margin-left:auto; padding-right:calc(15 * var(--u)); color:#999; font-size:calc(12 * var(--u)); }
.screen-tabs { height:calc(44 * var(--u)); flex-shrink:0; display:flex; border-top:calc(2 * var(--u)) solid #151a27; }
.screen-tabs button[data-screen] { width:calc(266 * var(--u)); color:#85858a; border-right:1px solid #202022; font-size:calc(13 * var(--u)); }.screen-tabs button.active { background:#242a3b; color:#d0d0d2; }.screen-tabs>span { flex:1; }
#screen-settings { width:calc(36 * var(--u)); display:grid; place-items:center; }#screen-settings svg { width:calc(18 * var(--u)); height:calc(18 * var(--u)); }
.inspector-panel { min-width:0; min-height:0; overflow-y:auto; overflow-x:hidden; border-left:calc(3 * var(--u)) solid #151a27; scrollbar-color:#3b465e #171c29; scrollbar-width:auto; }
.inspector-panel::-webkit-scrollbar { width:calc(16 * var(--u)); }.inspector-panel::-webkit-scrollbar-track { background:#171c29; }.inspector-panel::-webkit-scrollbar-thumb { background:#3b465e; border-radius:calc(8 * var(--u)); }
.alignment-toolbar { height:calc(67 * var(--u)); display:flex; align-items:center; justify-content:space-evenly; padding:0 calc(9 * var(--u)); border-bottom:1px solid #333c52; }.alignment-toolbar button { height:calc(35 * var(--u)); width:calc(29 * var(--u)); display:grid; place-items:center; }.alignment-toolbar svg { width:calc(23 * var(--u)); height:calc(23 * var(--u)); }.alignment-toolbar i { width:1px; height:calc(27 * var(--u)); background:#303034; margin:0 calc(3 * var(--u)); }
.update-interval { height:calc(41 * var(--u)); display:flex; align-items:center; padding-left:calc(23 * var(--u)); gap:calc(31 * var(--u)); border-bottom:1px solid #333c52; font-size:calc(12 * var(--u)); white-space:nowrap; }.update-interval input { width:calc(86 * var(--u)); height:calc(26 * var(--u)); }
.property-section { border-bottom:1px solid #333c52; }
summary { list-style:none; display:flex; align-items:center; cursor:pointer; user-select:none; }summary::-webkit-details-marker { display:none; }
summary:before { content:""; width:calc(12 * var(--u)); height:calc(12 * var(--u)); margin-right:calc(3 * var(--u)); background:currentColor; mask:url('./icons.svg#chevron-down') center/contain no-repeat; }details:not([open])>summary:before { transform:rotate(-90deg); }
.property-section>summary { height:calc(43 * var(--u)); padding-left:calc(9 * var(--u)); font-size:calc(12 * var(--u)); }.section-body { padding:0 calc(29 * var(--u)) calc(9 * var(--u)) calc(37 * var(--u)); }.frame-body { position:relative; padding-bottom:calc(8 * var(--u)); }
.property-row { height:calc(30 * var(--u)); display:flex; align-items:center; gap:calc(8 * var(--u)); font-size:calc(12 * var(--u)); white-space:nowrap; }.property-row>.fx { width:calc(14 * var(--u)); height:calc(14 * var(--u)); color:#bdbdbf; fill:#bdbdbf; stroke:#333; }.property-row>span,.property-row>label { flex:1; min-width:0; }.property-row>input:not([type=color]):not([type=checkbox]) { width:calc(85 * var(--u)); height:calc(26 * var(--u)); font-size:calc(12 * var(--u)); }.property-row>input[type=checkbox] { margin-right:calc(71 * var(--u)); }.rotation-row .fx { color:var(--accent); fill:var(--accent); }input.expression-active { outline:1px solid var(--accent); }
.property-link { position:absolute; right:calc(21 * var(--u)); top:calc(48 * var(--u)); width:calc(26 * var(--u)); height:calc(29 * var(--u)); background:#2b3348; display:grid; place-items:center; }.property-link svg { width:calc(16 * var(--u)); height:calc(16 * var(--u)); }.property-link.scale-link { top:calc(106 * var(--u)); background:none; }.property-link[aria-pressed=true] { color:var(--accent); }.frame-body>.property-row { padding-right:calc(32 * var(--u)); }
.corner-fields { display:grid; grid-template-columns:1fr 1fr; gap:calc(3 * var(--u)); padding:0 calc(31 * var(--u)) calc(4 * var(--u)) calc(43 * var(--u)); }.corner-fields label,.margin-fields label { display:flex; align-items:center; height:calc(26 * var(--u)); padding-left:calc(5 * var(--u)); background:#151a26; }.corner-fields svg,.margin-fields svg { width:calc(13 * var(--u)); height:calc(13 * var(--u)); }.corner-fields input,.margin-fields input { width:100%; font-size:calc(12 * var(--u)); height:100%; }.invisible-row { margin-top:calc(1 * var(--u)); }
.text-section>summary { height:calc(43 * var(--u)); }.text-section>.section-body { padding:0 calc(29 * var(--u)) calc(10 * var(--u)) calc(37 * var(--u)); }.subsection>summary { height:calc(30 * var(--u)); margin-left:calc(-11 * var(--u)); font-size:calc(12 * var(--u)); }.character-body { padding-top:calc(10 * var(--u)); }.font-controls { display:flex; gap:calc(8 * var(--u)); height:calc(27 * var(--u)); margin:0 0 calc(3 * var(--u)) calc(10 * var(--u)); }.font-controls select { padding-left:calc(6 * var(--u)); font-size:calc(12 * var(--u)); height:100%; }#prop-family { flex:1; width:0; }#prop-weight { width:calc(83 * var(--u)); }.font-controls button { width:calc(20 * var(--u)); display:grid; place-items:center; }.font-controls button svg { width:calc(16 * var(--u)); height:calc(16 * var(--u)); }
.no-fx { padding-left:calc(17 * var(--u)); }.character-body>.property-row:not(.color-row) { padding-right:calc(32 * var(--u)); }.color-row>label,.color-row>span { flex:1; }.color-row button { width:calc(18 * var(--u)); height:calc(23 * var(--u)); display:grid; place-items:center; }.color-row button svg { width:calc(17 * var(--u)); height:calc(17 * var(--u)); }.color-row select { width:calc(63 * var(--u)); height:calc(26 * var(--u)); font-size:calc(12 * var(--u)); padding-left:calc(4 * var(--u)); }
.character-width { background:#2b3348; margin-left:calc(-37 * var(--u)); padding-left:calc(37 * var(--u)); margin-right:calc(-29 * var(--u)); padding-right:calc(61 * var(--u))!important; }.mono-row { height:calc(35 * var(--u)); }.paragraph-section { margin-top:calc(10 * var(--u)); }.paragraph-body { padding-top:calc(9 * var(--u)); padding-left:calc(19 * var(--u)); }.paragraph-controls { height:calc(25 * var(--u)); display:flex; gap:calc(3 * var(--u)); margin-bottom:calc(9 * var(--u)); }.paragraph-controls button { width:calc(30 * var(--u)); display:grid; place-items:center; background:#28282a; }.paragraph-controls button.active { background:#151b28; }.paragraph-controls svg { width:calc(19 * var(--u)); height:calc(19 * var(--u)); }.paragraph-controls>span { width:calc(20 * var(--u)); }.frame-margin-label { font-size:calc(12 * var(--u)); }.margin-fields { display:grid; grid-template-columns:1fr 1fr; gap:calc(3 * var(--u)); margin-top:calc(6 * var(--u)); padding:0 calc(20 * var(--u)); }
.style-section>summary { height:calc(43 * var(--u)); }.stroke-body { padding-top:calc(8 * var(--u)); }.stroke-body>.property-row:not(.color-row) { padding-right:calc(32 * var(--u)); }.stroke-body .margin-fields { padding-left:calc(43 * var(--u)); padding-right:calc(31 * var(--u)); }#empty-selection { padding:calc(25 * var(--u)); font-size:calc(12 * var(--u)); color:#969699; }
.app-menu { position:fixed; z-index:100; min-width:calc(215 * var(--u)); padding:calc(5 * var(--u)); background:#252d40; border:1px solid #45516b; box-shadow:0 5px 20px #0008; border-radius:calc(3 * var(--u)); font-size:calc(13 * var(--u)); }.app-menu button { width:100%; height:calc(31 * var(--u)); padding:0 calc(11 * var(--u)); display:flex; align-items:center; justify-content:space-between; text-align:left; border-radius:calc(2 * var(--u)); gap:calc(25 * var(--u)); }.app-menu button:hover { background:var(--accent); color:white; }.app-menu small { color:#9d9da1; font-size:calc(11 * var(--u)); }.app-menu hr { border:0; border-top:1px solid #39393b; }
.static-reference .device-shell { width:76.2%; aspect-ratio:1168/682; }.static-reference .dashboard { width:100%; height:100%; }.static-reference #widgets { position:absolute; width:1168px; height:682px; transform-origin:top left; transform:scale(calc((100vw - 690 * var(--u)) * .762 / 1168px)); }
dialog { background:#252d40; color:var(--text); border:1px solid #454548; border-radius:5px; padding:24px; width:390px; font:13px/1.7 Arial,"PingFang SC",sans-serif; }dialog::backdrop { background:#0008; }dialog h2 { margin:0; font-size:17px; }dialog p { color:#a8a8ad; }dialog form>div { display:flex; justify-content:flex-end; gap:10px; }dialog button { border:1px solid #515155; padding:6px 14px; border-radius:3px; }.primary { background:var(--accent); border-color:var(--accent); color:white; }
body.is-preview .workbench { grid-template-columns:minmax(0,1fr); }body.is-preview .layers-panel,body.is-preview .inspector-panel,body.is-preview .document-tabs,body.is-preview .screen-tabs { display:none; }body.is-preview .widget { pointer-events:none; }body.is-preview .widget.selected { outline:0; }body.is-preview .resize-handle,body.is-preview .selection-label { display:none; }body.is-preview .preview-hint { display:block; }
body.hide-layers .workbench { grid-template-columns:0 minmax(0,1fr) calc(358 * var(--u)); }body.hide-layers .layers-panel { visibility:hidden; }body.hide-inspector .workbench { grid-template-columns:calc(332 * var(--u)) minmax(0,1fr) 0; }body.hide-inspector .inspector-panel { visibility:hidden; }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }
.property-row>.studio-icon.fx { --is:calc(14 * var(--u)); width:var(--is); height:var(--is); }
summary:before { display:none; }
summary>details:not([open])>summary>.tool[data-tool=select] { width:calc(54 * var(--u)); }.tool[data-tool=zoom] { width:calc(64 * var(--u)); }
.inspector-panel { padding-right:calc(16 * var(--u)); }
.inspector-panel:after { content:""; position:fixed; right:calc(2 * var(--u)); top:calc(88 * var(--u)); height:calc(484 * var(--u)); width:calc(12 * var(--u)); background:#3b465e; border-radius:calc(8 * var(--u)); pointer-events:none; }
.section-body { padding-right:calc(34 * var(--u)); }.text-section>.section-body { padding-right:calc(34 * var(--u)); }
.font-controls { margin-right:calc(14 * var(--u)); }
.character-body { padding-top:calc(4 * var(--u)); }
.mono-row { height:calc(30 * var(--u)); }.paragraph-section { margin-top:calc(0 * var(--u)); }.paragraph-body { padding-top:calc(5 * var(--u)); }
.rotation-row .image-layer>.layer-select>.layer-row[data-kind=text] .layer-select>:root { --u:max(.8px, calc(100vw / 2048)); }
.tree-group>.studio-icon.chevron { --is:calc(10 * var(--u)); }
.reference-text { top:190px; }
.reference-text>.widget-value { padding-top:7px; }
.selection-label { top:-26px; }
.property-section>summary { height:calc(41 * var(--u)); }
.text-section>summary { height:calc(40 * var(--u)); }
.paragraph-body { padding-left:calc(10 * var(--u)); }
.paragraph-controls { gap:0; }
.paragraph-controls button { width:calc(34 * var(--u)); }
.paragraph-controls>span { width:calc(38 * var(--u)); }
.paragraph-controls .paragraph-body .margin-fields .frame-margin-row { height:calc(28 * var(--u)); display:flex; gap:calc(9 * var(--u)); align-items:center; padding-left:calc(7 * var(--u)); padding-right:calc(20 * var(--u)); }
.frame-margin-row>span { flex:1; }
.frame-margin-row>input { width:calc(45 * var(--u)); height:calc(26 * var(--u)); }
.frame-margin-row>button { display:grid; place-items:center; width:calc(25 * var(--u)); height:calc(25 * var(--u)); }
.frame-margin-row .reference-text { color:var(--accent); }

/* Reuse the licensed Tabler grid glyph as the optional workspace tile. */
.workspace.is-grid { background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM0MjQyNDYiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogIDxwYXRoIGQ9Ik01IDVtLTEgMGExIDEgMCAxIDAgMiAwYTEgMSAwIDEgMCAtMiAwIiAvPgogIDxwYXRoIGQ9Ik0xMiA1bS0xIDBhMSAxIDAgMSAwIDIgMGExIDEgMCAxIDAgLTIgMCIgLz4KICA8cGF0aCBkPSJNMTkgNW0tMSAwYTEgMSAwIDEgMCAyIDBhMSAxIDAgMSAwIC0yIDAiIC8+CiAgPHBhdGggZD0iTTUgMTJtLTEgMGExIDEgMCAxIDAgMiAwYTEgMSAwIDEgMCAtMiAwIiAvPgogIDxwYXRoIGQ9Ik0xMiAxMm0tMSAwYTEgMSAwIDEgMCAyIDBhMSAxIDAgMSAwIC0yIDAiIC8+CiAgPHBhdGggZD0iTTE5IDEybS0xIDBhMSAxIDAgMSAwIDIgMGExIDEgMCAxIDAgLTIgMCIgLz4KICA8cGF0aCBkPSJNNSAxOW0tMSAwYTEgMSAwIDEgMCAyIDBhMSAxIDAgMSAwIC0yIDAiIC8+CiAgPHBhdGggZD0iTTEyIDE5bS0xIDBhMSAxIDAgMSAwIDIgMGExIDEgMCAxIDAgLTIgMCIgLz4KICA8cGF0aCBkPSJNMTkgMTltLTEgMGExIDEgMCAxIDAgMiAwYTEgMSAwIDEgMCAtMiAwIiAvPgo8L3N2Zz4="); background-size:calc(24 * var(--u)); }
body.hide-layers.hide-inspector .workbench { grid-template-columns:0 minmax(0,1fr) 0; }
body.is-preview .workbench { grid-template-columns:minmax(0,1fr)!important; }

/* Distinct public identity; layout and editing behavior remain desktop-first. */
.app-mark { width:calc(26 * var(--u)); height:calc(30 * var(--u)); margin-left:calc(17 * var(--u)); margin-right:calc(10 * var(--u)); }
.studio-name { font-size:calc(12 * var(--u)); font-weight:650; letter-spacing:.3px; margin-right:calc(20 * var(--u)); white-space:nowrap; color:#dcd7f3; }
.tool.active { background:#51456e; color:#f1ecff; box-shadow:inset 0 calc(-2 * var(--u)) var(--accent); }
.run-button { background:#2d3148; color:#e3ddf5; }
.run-button svg { color:var(--accent); }
.widget.selected { outline-color:var(--accent); }
.resize-handle { background:#ece6ff; border-color:#9985dd; }
.expression-active { background:#252a40; }
.studio-icon { --is:calc(28 * var(--u)); display:inline-block; flex:0 0 var(--is); width:var(--is); height:var(--is); overflow:hidden; }
.property-row>.studio-icon.fx { --is:calc(14 * var(--u)); fill:none; stroke:currentColor; color:#94a5c0; }
.rotation-row>.studio-icon.fx { color:var(--accent); }
.tree-group .folder-icon { fill:none; stroke:currentColor; color:#a6b5cd; }
.property-link { color:#a4b4cf; }
.primary,.app-menu button:hover { color:#151a26; }
.widget[data-id=estimated] .widget-label { color:#e9ecf5; }