windcraft-editor 0.0.0-stage → 0.1.0

package/styles.css

@@ -0,0 +1,402 @@
+/* The editor's own styles (toolbars, panels, the Properties panel, selection handles). Loaded by mountEditor(). */
+html, body { height: 100%; }
+body { margin: 0; overflow: hidden; background: #e5e5e5; color: #333; font: 12px/1.35 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
+button { cursor: pointer; background: none; border: 0; padding: 0; font: inherit; color: inherit; }
+/* dots keep their size at every zoom; only their spacing changes (see applyView) */
+#canvas { background-color: #e5e5e5; background-image: radial-gradient(circle, #b4b4b4 0.95px, transparent 1.25px); background-size: 24px 24px; }
+/* pixel grid: one line per design pixel, shown from 400% zoom; lines stay 1 screen pixel thick */
+#pgrid { background-image: linear-gradient(to right, rgba(120, 138, 156, .38) calc(1px * var(--iz, 1)), transparent 0), linear-gradient(to bottom, rgba(120, 138, 156, .38) calc(1px * var(--iz, 1)), transparent 0); background-size: 1px 1px; }
+/* layers */
+#layers { font-size: 11px; }
+.layer-row { height: 24px; display: flex; align-items: center; border-radius: 4px; }
+.layer-row:hover { background: #f5f5f5; }
+.layer-row.is-selected { background: #ededed; color: #111; }
+/* the eye and the lock at the end of a row: faint until the row is pointed at, solid while hidden or locked */
+.layer-acts { margin-left: auto; display: flex; flex: none; align-items: center; gap: 1px; }
+.layer-act { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; color: #737373; opacity: 0; }
+.layer-row:hover .layer-act, .layer-act.on { opacity: 1; }
+.layer-act:hover { background: #e0e0e0; color: #111; }
+.layer-row.layer-hidden > :not(.layer-acts) { opacity: .45; }
+/* the current page stays pinned at the top of the left panel while it scrolls; display:contents lets the row stick against the whole panel, not just the Pages list */
+#pagesList { display: contents; }
+#pagesList .layer-row { margin: 0 4px; }
+/* pinned, top to bottom: the Pages title with its + button, the current page, then the Layers title */
+#leftBody { --pages-head: 31px; --page-row: 24px; }
+#pagesHead { position: sticky; top: 0; z-index: 6; background: #fff; height: var(--pages-head); box-sizing: border-box; }
+#pagesList .layer-row.is-selected { position: sticky; top: var(--pages-head); z-index: 5; box-shadow: 0 0 0 4px #fff; }
+#layersHead { position: sticky; top: calc(var(--pages-head) + var(--page-row)); z-index: 4; background: #fff; }
+[data-path].layer-row { position: relative; }
+.layer-row.is-dragging { opacity: .4; }
+/* where a dragged layer will land: a blue line with a dot (before / after) at the target's indent, or the whole row outlined (inside) */
+.layer-row.drop-before::after, .layer-row.drop-after::after { content: ""; position: absolute; left: var(--ind, 0); right: 2px; height: 2px; border-radius: 1px; background: #111; pointer-events: none; }
+.layer-row.drop-before::after { top: -1px; }
+.layer-row.drop-after::after { bottom: -1px; }
+.layer-row.drop-before::before, .layer-row.drop-after::before { content: ""; position: absolute; left: calc(var(--ind, 0px) - 3px); width: 8px; height: 8px; border-radius: 50%; border: 2px solid #111; background: #fff; box-sizing: border-box; pointer-events: none; z-index: 1; }
+.layer-row.drop-before::before { top: -4px; }
+.layer-row.drop-after::before { bottom: -4px; }
+.layer-row.drop-inside { background: rgba(0,0,0,.07); box-shadow: inset 0 0 0 1.5px #111; }
+.seg button.is-on { background: #111; color: #fff; }
+.field { height: 28px; width: 100%; border: 1px solid #d4d4d4; border-radius: 6px; background: #fff; padding: 0 8px; font-size: 12px; }
+.field:focus { outline: none; border-color: #111; }
+textarea.field { height: auto; padding: 6px 8px; font-family: ui-monospace, monospace; }
+
+/* project board: frames live on one infinite plane */
+.fwrap { position: absolute; }
+.flabel { position: absolute; left: 0; bottom: 100%; margin-bottom: 6px; white-space: nowrap; font-size: 12px; color: #555; transform-origin: 0 100%; transform: scale(var(--iz, 1)); pointer-events: none; }
+.flabel span { color: #999; margin-left: 6px; }
+.flabel .fgroup { color: #999; font-style: normal; }
+.group-head { padding: 8px 8px 2px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #999; }
+.fwrap.sel .flabel { color: #111; }
+.frame { position: relative; overflow: hidden; background: #fff; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.18); cursor: pointer; width: 100%; height: 100%; }
+.fwrap:hover .frame { outline: calc(1px * var(--iz, 1)) solid #c4c4c4; } /* a page you could open: a light hint, not a selection */
+.fwrap.sel .frame { outline: calc(2px * var(--iz, 1)) solid #111; }
+/* the editor: one frame is live, the rest are previews you can click or drag */
+.flabel.drag { pointer-events: auto; cursor: grab; padding: 2px 4px 2px 0; }
+.flabel.drag:active { cursor: grabbing; }
+.fwrap.active .frame { cursor: default; outline: none !important; overflow: visible; }
+.fwrap.active.bodyhover .frame { outline: calc(1px * var(--iz, 1)) solid #c4c4c4 !important; } /* the open frame's empty area under the pointer */
+.fwrap.active.sel .flabel { color: #111; font-weight: 600; }
+.frename { font: inherit; color: #222; background: #fff; border: 1px solid #111; border-radius: 4px; padding: 0 4px; min-width: 140px; outline: none; -webkit-user-select: text; user-select: text; }
+.gshield { position: absolute; inset: 0; z-index: 2; }
+/* the code box and the highlight behind it share every metric, so a character is exactly where its highlight is */
+/* code boxes: a coloured copy (pre.ck) behind a see-through textarea with the same font and spacing */
+.code-layer { margin: 0; padding: 12px; font: 12px/20px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; tab-size: 4; overflow: auto; letter-spacing: 0; }
+.code-input { color: transparent; caret-color: #111; }
+.code-input::selection { background: rgba(10,132,224,.22); }
+.ck { color: #24292f; }
+.ck .ck-tag { color: #116329; }
+.ck .ck-attr { color: #8250df; }
+.ck .ck-str { color: #0a3069; }
+.ck .ck-com, .ck .ck-doc { color: #6e7781; font-style: italic; }
+.ck .sel { background: rgba(10,132,224,.07); }
+.ck .selt { background: rgba(10,132,224,.16); }
+.code-gutter { margin: 0; padding: 12px 8px 12px 10px; font: 12px/20px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #b0b0b0; text-align: right; background: #fafafa; border-right: 1px solid #eee; overflow: hidden; user-select: none; min-width: 40px; }
+#codeHl { overflow: hidden; }
+/* the Code tab's element code: wraps to the panel's width and grows with its content, up to a limit */
+.elcode { position: relative; max-height: 320px; overflow: auto; border: 1px solid #e5e5e5; border-radius: 6px; background: #fff; }
+.elcode .code-layer { padding: 8px; font-size: 11px; line-height: 17px; white-space: pre-wrap; overflow-wrap: anywhere; overflow: visible; }
+/* one scroll only: the box scrolls, the inner block is as tall as the code, and the textarea fills that block */
+.elcode .elin { position: relative; }
+.elcode pre { position: relative; min-height: 34px; }
+.elcode textarea.code-layer { position: absolute; inset: 0; width: 100%; height: 100%; resize: none; border: 0; background: transparent; color: transparent; caret-color: #111; outline: none; overflow: hidden; }
+.elcode:focus-within { border-color: #0a84e0; }
+.elhead { display: flex; align-items: center; justify-content: space-between; }
+.elhead button { font-size: 10.5px; color: #555; padding: 1px 6px; border-radius: 4px; }
+.elhead button:hover { background: #f0f0f0; }
+[data-elnote] { margin-top: 4px; }
+[data-elnote].bad { color: #b45309; }
+.dirty-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #111; margin-left: 6px; vertical-align: middle; }
+.fwrap.dragging { z-index: 50; cursor: grabbing; }
+/* the open frame's content is the live iframe above all the frames: raising its white box would cover it (a blank page while dragging) */
+.fwrap.active.dragging { z-index: auto; }
+.fwrap.dragging .frame { box-shadow: 0 8px 30px rgba(0,0,0,.25); cursor: grabbing; }
+
+#canvas, #ftb, #sel { -webkit-user-select: none; user-select: none; }
+#ftb input { -webkit-user-select: text; user-select: text; }
+/* floating controls */
+.pill { background: #fff; border: 1px solid #e5e5e5; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.10); }
+.pop { background: #fff; border: 1px solid #e5e5e5; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); }
+#pillL.tight #designsName { display: none; }
+/* Left panel: Pages and Layers are two sections; the header only keeps Back, the toggle and a menu */
+.sec2 { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 3px; font-size: 11px; font-weight: 600; color: #8c8c8c; }
+#navMoreBtn { display: none; }
+#leftProject { display: none; }
+#leftHead #leftProject { display: flex; flex: 1 1 auto; width: auto; min-width: 0; margin: 0 2px; }
+#leftHead #navGroup { width: 100%; }
+#leftHead #navGroup > span:nth-of-type(3) { display: none; } /* the second divider (span 1 is the hidden back label) */
+#leftHead #navGroup > .relative { display: flex; align-items: center; margin-left: auto; flex: 0 0 auto; }
+#leftHead #designsBtn { display: none; }
+.dtl { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; padding: 3px 10px; border-radius: 6px; font-size: 12px; color: #222; text-align: left; }
+.dtl:hover { background: #f5f5f5; }
+.dtl .sub2 { margin-left: auto; color: #8c8c8c; font-size: 11px; display: inline-flex; align-items: center; gap: 4px; }
+.dtl .mut { color: #8c8c8c; }
+#leftHead #designsMenu { left: auto; right: 0; width: 224px; }
+#leftHead #designs, #leftHead #newDesignBtn { display: none; } /* the Pages section already lists them */
+.tbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: #404040; }
+.tbtn:hover { background: #f0f0f0; }
+.tbtn.on { background: #ededed; color: #111; }
+.ptab { padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; color: #777; }
+.ptab.is-on { background: #f0f0f0; color: #000; }
+#ftb .tbtn { width: 28px; height: 28px; }
+#ftb select, #ftb input[type=number] { height: 28px; border: 0; background: transparent; border-radius: 8px; font-size: 13px; color: #222; }
+#ftb select:hover, #ftb input[type=number]:hover { background: #f0f0f0; }
+#ftb input[type=number] { width: 52px; text-align: center; -moz-appearance: textfield; }
+#ftb input[type=number]::-webkit-inner-spin-button, #ftb input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
+#ftb .sep { width: 1px; height: 20px; background: #e5e5e5; margin: 0 2px; }
+#ftb .swatch { position: relative; width: 24px; height: 24px; border-radius: 7px; border: 1px solid rgba(0,0,0,.2); overflow: hidden; margin: 0 2px; }
+#ftb .swatch input { position: absolute; inset: -6px; width: 40px; height: 40px; opacity: 0; cursor: pointer; }
+/* the Border / Radius / Spacing panels that open from the bar: sized to sit with its 28px buttons */
+#ftb { position: absolute; }
+#ftb .ftpop { position: absolute; left: 0; bottom: calc(100% + 6px); width: 224px; padding: 10px; background: #fff; border: 1px solid #ececec; border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.16); display: flex; flex-direction: column; gap: 6px; z-index: 50; }
+#ftb.popdown .ftpop { bottom: auto; top: calc(100% + 6px); }
+#ftb .fttl { font-size: 12px; color: #8c8c8c; padding: 0 2px; }
+#ftb .frow { display: flex; align-items: center; gap: 6px; }
+#ftb .fgrid { display: grid; grid-template-columns: 1fr 1fr 26px; align-items: center; gap: 6px; }
+#ftb .ffield { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; height: 26px; padding: 0 8px; border: 1px solid #e6e6e6; border-radius: 8px; background: #fff; color: #9a9a9a; font-size: 12px; }
+/* no browser or Tailwind focus ring on any of the bar's fields: a focused field just gets a blue border (like Claude Design) and shows its unit */
+#ftb input:focus, #ftb select:focus, #ftb input:focus-visible, #ftb select:focus-visible { outline: none !important; box-shadow: none !important; --tw-ring-shadow: 0 0 #0000 !important; }
+#ftb .ffield:focus-within { border-color: #111; }
+#ftb .ffield:focus-within .fu { display: inline; }
+#ftb input[type=number]:focus, #ftb select:focus { background: #f0f0f0; }
+#ftb .ffield input[type=number]:focus { background: transparent; }
+#ftb .ffield .fl { flex: none; font-size: 12px; display: inline-flex; align-items: center; }
+#ftb .ffield .fl svg { width: 14px; height: 14px; }
+#ftb .ffield .fu { display: none; } /* like Claude Design: just the number, no unit */
+#ftb .ffield input[type=number] { flex: 1; width: 100%; min-width: 0; height: 100%; padding: 0; text-align: left; font-size: 13px; color: #111; background: transparent; }
+#ftb .ffield input[type=number]:hover, #ftb .ffield input[type=number]:focus { background: transparent; outline: none; box-shadow: none; border: 0; } /* the field itself shows the focus ring */
+#ftb .fseg { display: flex; gap: 2px; padding: 2px; background: #f0f0f0; border-radius: 8px; }
+#ftb .fseg button { flex: 1; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: #555; }
+#ftb .fseg button svg { width: 14px; height: 14px; }
+#ftb .fseg button:hover { background: rgba(255,255,255,.6); }
+#ftb .fseg button.on { background: #fff; color: #111; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
+#ftb .swatch.big { width: 26px; height: 26px; border-radius: 8px; margin: 0; flex: none; }
+#ftb .fhex { flex: 1; min-width: 0; height: 26px; padding: 0 8px; border: 1px solid #e6e6e6; border-radius: 8px; font-size: 13px; color: #111; text-transform: uppercase; background: #fff; }
+#ftb .fhex:focus { outline: none; border-color: #111; }
+#ftb .sidebtn { flex: none; width: 26px; height: 26px; border-radius: 8px; color: #444; }
+#ftb .sidebtn svg { width: 14px; height: 14px; }
+#ftb .sidebtn.on { background: #ededed; color: #111; }
+#ftb .lbl2 { font-size: 11px; color: #8c8c8c; padding: 0 2px 0 6px; }
+/* the selected element: drawn above the frame so its edge never clips it; sizes use --iz to stay constant on screen */
+/* the selection inverts whatever is under it (white lines, difference blend), so it reads on light and dark designs alike */
+#lines { mix-blend-mode: difference; } /* only the lines invert; the handles are always black, with a thin white rim so they show on dark designs */
+#lines .sout { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
+#sel .sbox { position: absolute; box-sizing: border-box; pointer-events: none; transform-origin: 50% 50%; }
+#sel .sh { position: absolute; pointer-events: auto; }
+/* rings are drawn with box-shadow, not border: browsers round a thin border up to a full pixel, which at high zoom turns the handle solid blue */
+#sel .sc { width: 7px; height: 7px; background: #111; box-shadow: 0 0 0 .75px rgba(255,255,255,.8); }
+#sel .sc::after, #sel .sd::after, #fsel .fc::after { content: ""; position: absolute; inset: -5px; } /* the square is small, its grab area is not */
+#sel .sd { width: 8px; height: 8px; border-radius: 50%; background: #111; box-shadow: 0 0 0 .75px rgba(255,255,255,.8); }
+#slbl .slabel.pt { transform: none; }
+#slbl .slabel { position: absolute; transform: translateX(-50%); background: #111; color: #fff; font: 500 11px/1 Inter, system-ui, sans-serif; padding: 4px 6px; border-radius: 4px; white-space: nowrap; pointer-events: none; }
+/* the selected frame: handles scale with the zoom so they keep their size */
+#fsel .fh { position: absolute; pointer-events: auto; }
+#fsel .fbox { position: absolute; box-sizing: border-box; pointer-events: none; }
+#fsel .fc { width: 7px; height: 7px; background: #111; box-shadow: 0 0 0 .75px rgba(255,255,255,.8); }
+
+/* inspector */
+#inspector { font-size: 11px; }
+.itabs { display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid #e5e5e5; position: sticky; top: 0; background: #fff; z-index: 5; }
+.itabs button { padding: 5px 9px; border-radius: 5px; font-size: 11px; font-weight: 500; color: #777; }
+.itabs button.on { background: #f0f0f0; color: #000; }
+/* Screen and State: where edits go (design-tab.js VariantBar) */
+.vbar2 { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px 10px; border-bottom: 1px solid #e5e5e5; }
+.vrow { display: flex; align-items: center; gap: 6px; }
+.vl { width: 38px; flex: none; font-size: 10px; color: #8c8c8c; }
+.vchips { display: flex; flex: 1; min-width: 0; gap: 2px; background: #f5f5f5; border-radius: 5px; padding: 2px; }
+.vchip { position: relative; flex: 1; min-width: 0; height: 20px; padding: 0 3px; border-radius: 3px; font-size: 10.5px; color: #555; white-space: nowrap; }
+.vchip:hover { color: #111; }
+.vchip.on { background: #fff; color: #111; box-shadow: 0 0 0 1px #e0e0e0; }
+.vchip i { position: absolute; top: 2px; right: 1px; width: 4px; height: 4px; border-radius: 50%; background: #38bdf8; }
+.vrow:first-child .vchip.on:not(:first-child), .vrow .vchip.on:not(:first-child) { background: #e0f2fe; color: #0369a1; box-shadow: 0 0 0 1px #7dd3fc; }
+.vrow.vtop { align-items: flex-start; }
+.vrow.vtop .vl { padding-top: 5px; }
+.vstates { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
+.vchips.vextra { background: none; padding: 0; flex-wrap: wrap; gap: 3px; }
+.vchips.vextra .vchip { flex: none; padding: 0 7px; background: #f5f5f5; }
+.vchips.vextra .vchip.on { background: #e0f2fe; color: #0369a1; box-shadow: 0 0 0 1px #7dd3fc; }
+.vadd { position: relative; flex: none; }
+.vchip.vplus { width: 22px; flex: none; font-size: 13px; line-height: 1; color: #555; }
+.vpop { position: absolute; right: 0; top: 24px; z-index: 30; width: 218px; max-height: 340px; overflow: auto; padding: 6px 8px 8px; background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
+.vpg { margin: 6px 0 3px; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8c8c8c; }
+.vpg:first-child { margin-top: 0; }
+.vpl { display: flex; flex-wrap: wrap; gap: 3px; }
+.vpi { position: relative; height: 20px; padding: 0 7px; border-radius: 4px; background: #f5f5f5; font-size: 10.5px; color: #333; }
+.vpi:hover { background: #ebebeb; }
+.vpi.on { background: #e0f2fe; color: #0369a1; }
+.vpi i { position: absolute; top: 2px; right: 2px; width: 4px; height: 4px; border-radius: 50%; background: #38bdf8; }
+.vnote.on { margin: 2px 0 0; padding: 6px 8px; border-radius: 6px; background: #e0f2fe; color: #075985; font-size: 10.5px; line-height: 1.45; }
+.vnote.on code { font-weight: 600; }
+.vnote.on button { margin-left: 2px; font-weight: 600; text-decoration: underline; color: inherit; }
+.vbar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 8px 4px; }
+/* the editor's colour picker (color-picker.js), opened beside the selection */
+.cpick { position: fixed; z-index: 60; display: none; width: 232px; padding: 10px; background: #fff; border: 1px solid #e5e5e5; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.14); }
+.cp-sv { position: relative; height: 150px; border-radius: 6px; cursor: crosshair; touch-action: none; overflow: hidden; }
+.cp-white, .cp-black { position: absolute; inset: 0; }
+.cp-white { background: linear-gradient(to right, #fff, rgba(255,255,255,0)); }
+.cp-black { background: linear-gradient(to top, #000, rgba(0,0,0,0)); }
+.cp-dot { position: absolute; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.35); transform: translate(-50%, -50%); pointer-events: none; }
+.cp-hue { position: relative; height: 12px; margin: 10px 0; border-radius: 6px; cursor: pointer; touch-action: none; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
+.cp-knob { position: absolute; top: 50%; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.35); transform: translate(-50%, -50%); pointer-events: none; }
+.cp-row { display: flex; align-items: center; gap: 6px; }
+.cp-prev { width: 26px; height: 26px; flex: none; border-radius: 6px; border: 1px solid rgba(0,0,0,.1); }
+.cp-hex { flex: 1; min-width: 0; height: 26px; padding: 0 8px; border: 1px solid #e0e0e0; border-radius: 6px; font: 12px ui-monospace, Menlo, monospace; color: #222; }
+.cp-hex:focus { outline: none; border-color: #111; }
+.cp-drop { width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid #e0e0e0; border-radius: 6px; color: #444; }
+.cp-drop svg { width: 14px; height: 14px; }
+.cp-drop:hover { background: #f5f5f5; }
+.hintnote { margin: 0 0 6px; padding: 6px 8px; border-radius: 6px; background: #fff7ed; color: #9a3412; font-size: 10.5px; line-height: 1.5; }
+.hintnote button { margin-left: 2px; font-weight: 600; text-decoration: underline; color: inherit; }
+.vnote { padding: 0 10px 6px; color: #111; font-size: 10.5px; margin: 0; }
+.vnote code { background: #e5f4ff; padding: 0 4px; border-radius: 3px; }
+.crumbs { padding: 6px 10px; display: flex; flex-wrap: wrap; gap: 1px; align-items: center; color: #8c8c8c; }
+.crumbs button { padding: 0 3px; border-radius: 3px; }
+.crumbs button:hover { background: #f0f0f0; }
+.crumbs .cur { color: #000; font-weight: 600; }
+.sl { color: #ccc; }
+.sec { border-bottom: 1px solid #e5e5e5; }
+.sech { display: flex; align-items: center; gap: 6px; width: 100%; padding: 9px 10px; font-weight: 600; font-size: 11px; text-align: left; }
+.sech:hover { background: #fafafa; }
+.sech .car { width: 10px; color: #8c8c8c; font-size: 9px; }
+.dot { width: 6px; height: 6px; border-radius: 50%; background: #111; margin-left: auto; }
+.secb { padding: 2px 10px 12px; display: flex; flex-direction: column; gap: 6px; }
+.secb.nopad { padding-top: 10px; }
+.sub { margin: 6px 0 0; color: #8c8c8c; font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
+.sub.first { margin-top: 0; }
+.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.row.compact .lbl { width: 14px; }
+.lbl { width: 62px; flex: none; color: #8c8c8c; }
+.row .fi { flex: 1; }
+.fi { height: 24px; min-width: 0; width: 100%; border: 1px solid transparent; background: #f5f5f5; border-radius: 4px; padding: 0 6px; font-size: 11px; color: #222; font-family: inherit; }
+.fi:hover { border-color: #e0e0e0; }
+.fi:focus { outline: none; border-color: #111; background: #fff; }
+textarea.fi.area { height: auto; padding: 6px; line-height: 1.4; resize: vertical; }
+.mono { font-family: ui-monospace, Menlo, monospace; }
+.cell { display: flex; align-items: center; background: #f5f5f5; border-radius: 4px; border: 1px solid transparent; min-width: 0; }
+.cell:hover { border-color: #e0e0e0; }
+.cell:focus-within { border-color: #111; background: #fff; }
+.cell .fi { background: transparent; border: 0; padding-left: 2px; }
+.clbl { width: 46px; flex: none; color: #8c8c8c; padding-left: 6px; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: clip; }
+.four .clbl { width: 20px; }
+.two { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
+.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
+.seg2 { display: flex; flex: 1; background: #f5f5f5; border-radius: 4px; padding: 2px; gap: 2px; min-width: 0; }
+.seg2 button { flex: 1; height: 20px; border-radius: 3px; font-size: 10.5px; color: #555; white-space: nowrap; }
+.seg2 button:hover { color: #000; }
+.seg2 button.on { background: #fff; color: #000; box-shadow: 0 0 0 1px #e0e0e0; }
+.crow { display: flex; align-items: center; gap: 6px; }
+.crow .grow { flex: 1; }
+.crow .op { width: 38px; flex: none; text-align: right; }
+.crow .lbl { width: 62px; }
+.pct { color: #8c8c8c; }
+.sw { width: 22px; height: 22px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); flex: none; background-color: #fff; background-image: linear-gradient(135deg, transparent 47%, #e5484d 47%, #e5484d 53%, transparent 53%); }
+.sw[class*="bg-"], .sw.swatch-t, .sw[style] { background-image: none; }
+.swatch-t { background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
+.pal { padding: 6px; border: 1px solid #e5e5e5; border-radius: 6px; background: #fff; display: flex; flex-direction: column; gap: 2px; }
+.palrow { display: grid; grid-template-columns: repeat(11, 1fr); gap: 2px; align-items: center; }
+.sw2 { aspect-ratio: 1; border-radius: 2px; border: 1px solid rgba(0,0,0,.08); }
+.sw2.on { outline: 2px solid #111; outline-offset: 1px; }
+.sw2.custom { position: relative; overflow: hidden; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
+.sw2.custom input { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
+.clear { grid-column: span 5; font-size: 10px; color: #666; height: 18px; border-radius: 3px; background: #f5f5f5; }
+/* the element bar under the crumbs: its tag, then move / duplicate / delete as icons */
+.ebar { display: flex; align-items: center; gap: 6px; padding: 0 10px 8px; border-bottom: 1px solid #e5e5e5; }
+.ebar .etag { flex: 1; min-width: 0; }
+.etagv { display: flex; align-items: center; color: #555; }
+.ib.danger { color: #d92d20; }
+.ib.danger:hover { background: #fee2e2; }
+/* the Code tab's class box: chips to edit or remove, and text at the end to add */
+.cbox { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 30px; padding: 4px; background: #f5f5f5; border: 1px solid transparent; border-radius: 5px; cursor: text; }
+.cbox:focus-within { border-color: #111; background: #fff; }
+.cbox .chip { cursor: pointer; background: #fff; box-shadow: 0 0 0 1px #e5e5e5; }
+.cbox:focus-within .chip { background: #f5f5f5; box-shadow: none; }
+.cbox .chip.var { background: #e5f4ff; box-shadow: 0 0 0 1px #bae0fd; }
+.cbedit { font: 10.5px ui-monospace, Menlo, monospace; height: 18px; padding: 0 4px; border: 1px solid #111; border-radius: 4px; outline: none; background: #fff; }
+.cbin { flex: 1; min-width: 90px; height: 20px; border: 0; background: transparent; outline: none; font: 10.5px ui-monospace, Menlo, monospace; color: #111; padding: 0 2px; }
+.chips { display: flex; flex-wrap: wrap; gap: 4px; }
+.chip { display: inline-flex; align-items: center; gap: 3px; background: #f0f0f0; border-radius: 4px; padding: 1px 3px 1px 6px; font: 10.5px ui-monospace, Menlo, monospace; }
+.chip.var { background: #e5f4ff; color: #0a6cc4; }
+.chip button { color: #999; padding: 0 2px; }
+.chip button:hover { color: #d92d20; }
+.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
+.muted { color: #999; font-weight: 400; font-size: 10.5px; margin: 0; }
+.empty { padding: 18px 14px; color: #8c8c8c; }
+.primary { height: 28px; border-radius: 5px; background: #111; color: #fff; font-weight: 600; }
+.primary:hover { background: #0a84e0; }
+.fi.is-set { border-left: 2px solid #111; }
+/* where a property's value comes from: a Tailwind class, CSS (style attribute or the design's stylesheet), or a class on a parent */
+.cinp { width: 24px; height: 24px; flex: none; padding: 0; border: 1px solid #e0e0e0; border-radius: 4px; background: none; cursor: pointer; }
+.hidden { display: none; }
+/* dropdowns: a clear chevron instead of the browser's tiny arrow */
+select.fi, .vbar select { -webkit-appearance: none; appearance: none; padding-right: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23737373' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 5px center; background-size: 12px; }
+/* a value the element's own styling does not give (a default, or inherited) is faint until it is set */
+.row.unset .fi, .row.unset .seg2, .row.unset .lbl { opacity: .5; }
+.row.unset:hover .fi, .row.unset .fi:focus { opacity: 1; }
+
+/* ── Position and Layout, laid out as Figma's (figma-sections.js) ── */
+.fsec { border-bottom: 1px solid #e5e5e5; padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 6px; }
+.fsech { display: flex; align-items: center; justify-content: space-between; height: 20px; font-weight: 600; font-size: 11px; color: #111; }
+.fsx { display: flex; gap: 2px; }
+.fsub { margin: 2px 0 -2px; font-size: 10px; color: #8c8c8c; }
+.fsubn { color: #b4b4b4; }
+.frow { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.frow > .nf { flex: 1; }
+.frow.four { display: grid; grid-template-columns: 1fr 1fr 24px; }
+.frow.four > .ib { grid-column: 3; grid-row: 1; }
+.frow.two2 { display: grid; grid-template-columns: 1fr 1fr; }
+.nf { display: flex; align-items: center; height: 26px; min-width: 0; background: #f5f5f5; border: 1px solid transparent; border-radius: 5px; }
+.nf:hover { border-color: #e0e0e0; }
+.nf:focus-within { border-color: #111; background: #fff; }
+.nfl { flex: none; min-width: 20px; padding: 0 2px 0 7px; color: #8c8c8c; font-size: 10.5px; white-space: nowrap; }
+.nfi { flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; background: transparent; padding: 0 4px 0 2px; font: inherit; font-size: 11px; color: #111; outline: none; }
+.nfu { padding-right: 6px; color: #8c8c8c; }
+.nf .nfi { min-width: 30px; }
+.nfs:not(.wide) { max-width: 46px; padding: 0 13px 0 4px; font-size: 10px; background-position: right 2px center; background-size: 10px; text-overflow: clip; }
+.nfs { flex: none; height: 100%; border: 0; border-left: 1px solid #ebebeb; background-color: transparent; font-size: 10.5px; color: #555; padding: 0 16px 0 6px; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23737373' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 3px center; background-size: 11px; outline: none; }
+.nf.unset .nfi, .nf.unset .nfl { opacity: .5; }
+.nf.unset:hover .nfi, .nf.unset:focus-within .nfi, .nf.unset:focus-within .nfl { opacity: 1; }
+.nf.off { background: #fafafa; }
+.nf.off .nfi { color: #a3a3a3; }
+.ibrow { display: flex; gap: 6px; }
+.ibg { display: flex; background: #f5f5f5; border-radius: 5px; padding: 1px; flex: none; }
+.ibrow .ibg, .ibg.wide { flex: 1; }
+.ibg .ib { flex: 1; }
+.ib { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: 4px; color: #333; }
+.ib:hover { background: #ebebeb; }
+.ib.on { background: #fff; color: #111; box-shadow: 0 0 0 1px #e0e0e0; }
+.ib.faint { color: #c4c4c4; cursor: default; }
+.ib.faint:hover { background: transparent; }
+.lgrid { display: grid; grid-template-columns: 76px 1fr; gap: 6px; }
+.lcol { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.abox { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); background: #f5f5f5; border-radius: 5px; height: 58px; padding: 3px; }
+.ad { display: flex; align-items: center; justify-content: center; border-radius: 3px; }
+.ad i { width: 4px; height: 4px; border-radius: 50%; background: #c4c4c4; }
+.ad:hover i { background: #737373; }
+.ad.on i { width: 10px; height: 4px; border-radius: 1.5px; background: #111; }
+.fcheck { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #333; margin-top: 2px; }
+.fcheck.unset { color: #8c8c8c; }
+.fbtns { display: flex; gap: 4px; flex-wrap: wrap; }
+.fbtns button { flex: 1; height: 24px; padding: 0 6px; border-radius: 4px; border: 1px solid #e5e5e5; font-size: 10.5px; background: #fff; white-space: nowrap; }
+.fbtns button:hover { background: #f5f5f5; }
+/* the style sections (style-sections.js): a colour swatch in a field, a dropdown filling a field, an add button with a menu */
+.cin { flex: none; width: 16px; height: 16px; margin-left: 5px; padding: 0; border: 1px solid rgba(0,0,0,.15); border-radius: 3px; background: none; cursor: pointer; }
+.cin::-webkit-color-swatch-wrapper { padding: 0; }
+.cin::-webkit-color-swatch { border: 0; border-radius: 2px; }
+.nfs.wide { flex: 1; min-width: 0; border-left: 0; padding-left: 7px; font-size: 11px; color: #111; background-position: right 6px center; }
+.nf.unset .nfs.wide { opacity: .5; }
+.addsel { position: relative; overflow: hidden; cursor: pointer; }
+.addsel select { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 12px; }
+.pagehead { display: flex; flex-direction: column; gap: 2px; margin: 8px 10px 0; padding: 7px 9px; border-radius: 6px; background: #eef4ff; color: #1e3a8a; font-size: 10.5px; line-height: 1.4; }
+.pagehead b { font-size: 11px; }
+.fsec .row { gap: 6px; }
+/* where a set value comes from: a blue edge for a Tailwind class, amber for CSS */
+.nf { position: relative; }
+/* a field with suggestions (Tailwind colours, sizes...) shows them as you type, without Chrome's ▼ that looks like a dropdown */
+#panel input[list]::-webkit-calendar-picker-indicator { display: none !important; }
+.nf.src-tw { box-shadow: inset 2px 0 0 #38bdf8; }
+.nf.src-css { box-shadow: inset 2px 0 0 #f59e0b; }
+.nf.disp { flex: none; width: 74px; }
+.ib.txt { font-size: 10.5px; padding: 0 6px; color: #555; }
+.ib.txt.on { color: #111; }
+.fsec .crow .lbl { width: 40px; }
+.fsec .row .lbl { width: 56px; }
+
+.legend { margin: 6px 10px 2px; font-size: 10.5px; line-height: 1.6; color: #8c8c8c; }
+.legend .edge { display: inline-block; width: 10px; height: 12px; margin: 0 3px -2px 0; border-radius: 2px; background: #f5f5f5; }
+.legend .edge.tw { box-shadow: inset 2px 0 0 #38bdf8; }
+.legend .edge.css { margin-left: 8px; box-shadow: inset 2px 0 0 #f59e0b; }
+
+/* mountEditor({ ui }): what an embedded editor leaves out */
+.wc-no-panels #leftPanel, .wc-no-panels #panel, .wc-no-panels #codePanel, .wc-no-panels #leftBtn, .wc-no-panels #panelBtn, .wc-no-panels #codeBtn { display: none !important; }
+.wc-no-nav #navGroup, .wc-no-nav #navSep { display: none !important; }
+.wc-no-add #addBtn { display: none !important; }
+
+/* side panels: the edge that resizes them (editor/panel-resize.js) */
+.rz { position: absolute; top: 0; bottom: 0; width: 7px; z-index: 30; cursor: col-resize; touch-action: none; }
+.rz.l { right: -4px; }
+.rz.r { left: -4px; }
+.rz::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px; background: #0090f1; opacity: 0; transition: opacity .12s; }
+.rz:hover::after, .rz.on::after { opacity: .7; width: 2px; left: 2.5px; }
+/* the arrow tool's pointer over the canvas: the same bold arrow as inside the design (see ARROW in agent.js) */
+#canvas { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M21%2011%202%202l9%2019%202-8z%22%20fill%3D%22%23111%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 2 2, default; }
+/* with Interact selected, the pointer over the canvas is Interact's own (see INTERACT_CURSOR in docs.js) */
+#canvas[data-tool="interact"] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20stroke%3D%22%23fff%22%20stroke-width%3D%223.6%22%3E%3Cpath%20d%3D%22M9%209l11%204.5-4.6%201.4L14%2019.5z%22%2F%3E%3Cpath%20d%3D%22M6.5%203.5%207%206M3.5%206.5%206%207M4.5%2010.5l2-1.5M10.5%204.5%209%206.5%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23111%22%20stroke-width%3D%221.6%22%3E%3Cpath%20d%3D%22M9%209l11%204.5-4.6%201.4L14%2019.5z%22%2F%3E%3Cpath%20d%3D%22M6.5%203.5%207%206M3.5%206.5%206%207M4.5%2010.5l2-1.5M10.5%204.5%209%206.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 9 9, default; }