/* ═══════════════════════════════════════════════════════════════════ Gusta Draw - theme + layout. Two themes: dark (default) and light via [data-theme='light'] on . NEVER hardcode colors in components - use the tokens. Accent is the Gusta Draw teal-green #3fd9a0, sampled from the logo's bezier-G gradient (each product wears an accent from its own logo). ═══════════════════════════════════════════════════════════════════ */ :root { --bg: #0f1013; --surface: #17181d; --surface2: #1f2027; --surface3: #272831; --border: #2e3039; --text: #e8e8ef; --text-dim: #8b8d99; --accent: #3fd9a0; --accent-dim: #2da377; --accent-bg: rgba(63, 217, 160, 0.12); --on-accent: #06231a; --danger: #ff5d5d; --rail-btn: 44px; --shadow: 0 8px 28px rgba(0, 0, 0, 0.45); } [data-theme='light'] { --bg: #eceef2; --surface: #f7f8fa; --surface2: #ffffff; --surface3: #e6e8ee; --border: #d3d6de; --text: #23242b; --text-dim: #6d6f7a; --accent: #0f8f66; /* darkened for contrast on light surfaces */ --accent-dim: #0b7050; --accent-bg: rgba(15, 143, 102, 0.10); --on-accent: #ffffff; --shadow: 0 8px 28px rgba(30, 30, 40, 0.18); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 13px/1.45 -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; overscroll-behavior: none; } body { display: flex; flex-direction: column; } button { font: inherit; color: inherit; } a { color: var(--accent); } /* ── Header ─────────────────────────────────────────────────────── */ header { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--surface); border-bottom: 1px solid var(--border); /* Above the floating chat card (z 60): the header's stacking context also contains its dropdowns, so a lower value would let the chat panel swallow clicks on any menu long enough to reach past the header. */ flex: 0 0 auto; position: relative; z-index: 70; /* A future button can never push the body wide again (a scrolling header is worse than a clipped one; the labels collapse first at the breakpoints below, keeping every control reachable down to iPad portrait). */ overflow-x: clip; } .brand { display: flex; align-items: center; gap: 7px; margin-right: 6px; user-select: none; } .brand-mark { border-radius: 5px; display: block; } .brand-name { font-weight: 600; letter-spacing: 0.02em; } .brand-name em { font-style: normal; color: var(--accent); } .header-sep { width: 1px; height: 20px; background: var(--border); } .header-spacer { flex: 1; } .toolbar-group { display: flex; gap: 4px; min-width: 0; } /* The right-hand cluster (feedback, theme, Gusta, account) must always stay on screen: several dialogs tell the user to sign in "from the account menu, top right". Let the product clusters and the spacer absorb the squeeze instead. */ #feedback-wrap, #btn-theme, #gusta-pill, #account-wrap { flex: 0 0 auto; } /* A long signed-in email/name can never blow out the header. */ .account-btn { max-width: 168px; } .account-btn #account-chip, .account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Segmented button clusters: adjacent buttons share borders and read as one control (history / file / output in the product area). */ .btn-cluster { gap: 0; } .btn-cluster .tool-btn { border-radius: 0; } .btn-cluster .tool-btn + .tool-btn { margin-left: -1px; } .btn-cluster .tool-btn:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .btn-cluster .tool-btn:last-of-type { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .btn-cluster .tool-btn:hover:not(:disabled) { position: relative; z-index: 1; } .tool-btn { display: inline-flex; align-items: center; gap: 5px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 5px 9px; cursor: pointer; white-space: nowrap; } .tool-btn:hover:not(:disabled) { border-color: var(--accent-dim); } .tool-btn:disabled { opacity: 0.45; cursor: default; } .tool-btn.is-active { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); } .tool-btn.wide { width: 100%; justify-content: center; margin-top: 4px; } .link-btn { background: none; border: none; padding: 0; color: var(--accent); cursor: pointer; font-size: 12px; } .gusta-pill { display: inline-flex; align-items: center; gap: 5px; background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 5px 12px; cursor: pointer; font-weight: 600; } .gusta-pill:hover { background: var(--accent); color: var(--on-accent); } /* ── Menus / popovers ───────────────────────────────────────────── */ .menu-wrap { position: relative; } .pop-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 230px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 8px; box-shadow: var(--shadow); z-index: 100; /* Never run past the viewport on short screens (expanded account/feedback menus): scroll inside the popover instead of growing the page. */ max-height: calc(100vh - 64px); overflow-y: auto; overscroll-behavior: contain; } .menu-heading { font-weight: 600; margin-bottom: 6px; } .menu-label { font-size: 11px; color: var(--text-dim); } .menu-note { font-size: 11px; color: var(--text-dim); margin-top: 6px; line-height: 1.5; } .menu-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: 6px 8px; border-radius: 5px; cursor: pointer; } .menu-item:hover { background: var(--accent-bg); color: var(--accent); } .menu-item.danger:hover { background: rgba(255, 93, 93, 0.12); color: var(--danger); } .menu-sep { height: 1px; background: var(--border); margin: 5px 0; } #context-menu { position: fixed; top: 0; left: 0; } .field { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 5px; padding: 5px 7px; margin-top: 4px; } .field:focus { outline: none; border-color: var(--accent); } /* Sign-in form (the suite treatment shared with game/3d/music): labeled fields, container gap instead of per-input margin hacks. */ #gusta-auth { display: flex; flex-direction: column; gap: 12px; } .auth-tabs { display: flex; gap: 4px; } .auth-field { display: flex; flex-direction: column; gap: 5px; } .auth-field label { font-size: 11px; font-weight: 600; color: var(--text-dim); letter-spacing: 0.02em; } .auth-field .field { margin-top: 0; width: 100%; } #gusta-auth .tool-btn.wide { margin-top: 0; } #gusta-auth .menu-note { margin-top: 0; } .gusta-plans { display: flex; gap: 5px; margin-top: 4px; } .gusta-plan { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 8px 4px 6px; cursor: pointer; } .gusta-plan:hover { border-color: var(--accent); } .gusta-plan.featured { border-color: var(--accent-dim); } .gusta-plan-badge { position: absolute; top: -7px; font-size: 9px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700; } .gusta-plan-tokens { font-weight: 700; } .gusta-plan-unit { font-size: 9px; color: var(--text-dim); } .gusta-plan-price { font-size: 11px; color: var(--accent); margin-top: 2px; } /* Human-readable value translation under each tier ("≈ ~N designs"). */ .gusta-plan-designs { font-size: 9px; color: var(--text-dim); margin-top: 2px; text-align: center; line-height: 1.2; } /* The account menu swaps whole blocks with the hidden attribute, and several of them carry an id-level display rule (which outranks the UA [hidden] rule). Without this the sign-in form shows while you are signed in. */ .account-menu [hidden] { display: none !important; } /* Signed-in summary: balance first (what you came to check), account under it, sign-out to the side. */ .account-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .account-summary-id { min-width: 0; } .account-summary #gusta-balance { font-weight: 600; } /* Collapsed sections keep the menu short: everything is still one tap away. */ .acct-section { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 6px; } .acct-section > summary { cursor: pointer; list-style: none; font-size: 11px; font-weight: 600; color: var(--text-dim); letter-spacing: 0.02em; padding: 2px 0; } .acct-section > summary::-webkit-details-marker { display: none; } .acct-section > summary::before { content: '\203A'; display: inline-block; width: 12px; transition: transform 0.15s ease; } .acct-section[open] > summary::before { transform: rotate(90deg); } .acct-section > summary:hover { color: var(--text); } .acct-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .acct-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .account-btn.signin { color: var(--accent); border-color: var(--accent-dim); } .account-id { display: flex; flex-direction: column; line-height: 1.15; text-align: left; } .account-name { font-weight: 600; } .account-tokens { font-size: 10px; color: var(--text-dim); } /* ── Feedback popover (the support circle) ──────────────────────── */ .feedback-menu { width: min(300px, calc(100vw - 24px)); } /* The hidden attribute must beat the tab/view display rules. */ .feedback-menu [hidden] { display: none !important; } #feedback-tabs { margin-bottom: 8px; } #feedback-tabs .tool-btn { flex: 1; justify-content: center; } #feedback-text { resize: vertical; min-height: 62px; line-height: 1.4; } #feedback-anon { font-style: italic; } .feedback-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); display: inline-block; } /* An author display rule beats the UA hidden rule, so restore it explicitly. */ .feedback-dot[hidden] { display: none; } #feedback-toggle { position: relative; } /* Inbox list: one card per thread, support replies indented under it. */ .feedback-inbox { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; } .feedback-thread { border: 1px solid var(--border); border-radius: 7px; padding: 7px 8px; background: var(--surface); font-size: 12px; line-height: 1.45; } .feedback-thread.unread { border-color: var(--accent-dim); } .feedback-bubble { margin-top: 4px; } .feedback-bubble:first-child { margin-top: 0; } .feedback-bubble[data-author="support"] { color: var(--accent); } .feedback-author { font-size: 10px; font-weight: 700; color: var(--text-dim); margin-right: 4px; } .feedback-reply .field { margin-top: 4px; } .feedback-reply-open { margin-top: 4px; } .feedback-empty { color: var(--text-dim); font-size: 11px; } /* ── Modal dialogs (publish-to-library) ─────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; } .modal-backdrop[hidden] { display: none; } /* The hidden attribute must beat any author display rule inside dialogs. */ .modal [hidden] { display: none !important; } .modal { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 14px; width: min(430px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; } .modal .menu-label { display: block; margin-top: 8px; } /* Shortcut cheat sheet (FIRSTUX 8) */ .shortcuts-modal { width: min(760px, calc(100vw - 32px)); } .shortcuts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 20px; margin: 8px 0; } .shortcuts-col { min-width: 0; } .shortcuts-h { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 5px; } .shortcuts-row { display: flex; align-items: baseline; gap: 8px; font-size: 12px; padding: 2px 0; line-height: 1.4; } .shortcuts-row kbd { flex: 0 0 auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; white-space: nowrap; } .shortcuts-row span { color: var(--text-dim); min-width: 0; } .publish-grid-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; } .publish-grid-row label { display: inline-flex; align-items: center; gap: 4px; color: var(--text-dim); font-size: 12px; } .field.num { width: 58px; margin-top: 0; text-align: right; } .publish-check { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--text-dim); } .publish-check input { accent-color: var(--accent); } .publish-anims-head, .publish-anim-row { display: grid; grid-template-columns: 1fr 44px 44px 44px 18px; gap: 4px; align-items: center; } .publish-anims-head { margin-top: 10px; font-size: 11px; color: var(--text-dim); } .publish-anims-head span:not(:first-child) { text-align: right; } .publish-anim-row .field { margin-top: 4px; } .publish-anim-row .anim-num { text-align: right; padding: 5px 4px; } .publish-anim-row .link-btn { text-align: center; margin-top: 4px; color: var(--text-dim); } .publish-anim-row .link-btn:hover { color: var(--danger); } #publish-anim-add { display: block; margin-top: 6px; } /* ── Cloud saves dialog rows ────────────────────────────────────── */ .cloud-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; } .cloud-load { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 6px 9px; cursor: pointer; text-align: left; } .cloud-load:hover { border-color: var(--accent); } .cloud-row.is-current .cloud-load { border-color: var(--accent-dim); background: var(--accent-bg); } .cloud-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .cloud-sub { font-size: 11px; color: var(--text-dim); } .cloud-del { flex: 0 0 auto; color: var(--text-dim); } .cloud-del:hover { color: var(--danger); } .publish-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; } #publish-new, #cloud-save-confirm { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); } #publish-new:hover:not(:disabled), #cloud-save-confirm:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); } /* ── Main layout ────────────────────────────────────────────────── */ .main { flex: 1; display: flex; min-height: 0; position: relative; } .tool-rail { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 10px 8px; background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; } .rail-btn { width: var(--rail-btn); height: var(--rail-btn); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: none; border: 1px solid transparent; border-radius: 8px; color: var(--text-dim); cursor: pointer; } .rail-btn svg { width: 20px; height: 20px; } .rail-btn span { font-size: 9px; } .rail-btn:hover { color: var(--text); background: var(--surface2); } .rail-btn.is-active { color: var(--accent); background: var(--accent-bg); border-color: var(--accent-dim); } /* Tool lock (pro plan 2.1): the locked tool stays active after drawing. A solid accent frame + corner dot marks the locked state. */ .rail-btn.is-locked { border-color: var(--accent); position: relative; } .rail-btn.is-locked::after { content: ''; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } /* Thin divider between the primary and advanced tool groups. */ .rail-sep { flex: 0 0 auto; height: 1px; background: var(--border); margin: 2px 6px; } /* Advanced (pro path/precision) tools sit calmer until reached for; hover or active restores full strength. Capability is untouched - this is visual only. */ .rail-btn.is-advanced { opacity: 0.5; } .rail-btn.is-advanced:hover, .rail-btn.is-advanced.is-active { opacity: 1; } /* ── Right dock (Layers over Canvas/properties, both collapsible) ── */ .right-dock { flex: 0 0 232px; display: flex; flex-direction: column; min-height: 0; /* min-width kills the automatic min-content size: panel content must never widen the dock and shift the stage under the user's cursor. */ min-width: 0; background: var(--surface); border-left: 1px solid var(--border); } .right-dock.is-slim { flex-basis: 34px; } .right-dock.is-slim .dock-panel { display: none; } .dock-panel { display: flex; flex-direction: column; min-height: 0; } .dock-panel.layers-panel { flex: 1 1 42%; border-bottom: 1px solid var(--border); } .dock-panel.inspector { flex: 1 1 58%; } .dock-panel.is-collapsed { flex: 0 0 auto; } .dock-panel.is-collapsed .panel-body { display: none; } .dock-panel.is-collapsed #layers-new-folder { display: none; } .panel-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-bottom: 1px solid var(--border); flex: 0 0 auto; } .dock-panel.is-collapsed .panel-head { border-bottom: none; } .panel-title { display: flex; align-items: center; gap: 5px; background: none; border: none; padding: 2px 0; cursor: pointer; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); } .panel-title:hover { color: var(--text); } .panel-chevron { transition: transform 0.12s; } .panel-title[aria-expanded='true'] .panel-chevron { transform: rotate(90deg); } .panel-body { flex: 1; min-height: 0; overflow-y: auto; } #inspector-body { padding: 10px; } /* Slim strip (both panels collapsed): vertical labels reopen them. */ .dock-strip { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 0; } .dock-strip[hidden] { display: none; } .strip-btn { writing-mode: vertical-rl; background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; padding: 10px 6px; border-radius: 5px; } .strip-btn:hover { color: var(--accent); background: var(--accent-bg); } /* ── Layers panel internals ─────────────────────────────────────── */ .layers-list { padding: 4px; } .layers-empty { font-size: 11px; color: var(--text-dim); padding: 8px; line-height: 1.5; } .layer-row { display: flex; align-items: center; gap: 4px; min-height: var(--layer-row-h, 26px); padding: 1px 4px 1px calc(4px + var(--depth, 0) * 16px); border-radius: 5px; cursor: default; user-select: none; border: 1px solid transparent; touch-action: none; /* the row drag owns the gesture */ } .layer-row:hover { background: var(--surface2); } .layer-row.is-selected { background: var(--accent-bg); border-color: var(--accent-dim); } .layer-row.is-hidden .layer-icon, .layer-row.is-hidden .layer-name { opacity: 0.45; } .layer-row.is-dragging { opacity: 0.5; } .layer-row.is-drop-into { outline: 1.5px dashed var(--accent); outline-offset: -2px; } .layer-caret { flex: 0 0 14px; height: 14px; padding: 0; background: none; border: none; color: var(--text-dim); cursor: pointer; display: flex; align-items: center; } .layer-caret svg { width: 10px; height: 10px; transition: transform 0.12s; } .layer-caret.is-open svg { transform: rotate(90deg); } .layer-caret.is-spacer { visibility: hidden; cursor: default; } .layer-icon { flex: 0 0 15px; height: 15px; color: var(--text-dim); } .layer-icon svg { width: 15px; height: 15px; display: block; } .layer-row.is-selected .layer-icon { color: var(--accent); } .layer-name { flex: 1; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* v8 (pro plan 3.2): variation-frame badge on a top-level folder row. */ .layer-frame-badge { flex: 0 0 auto; font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; padding: 1px 4px; border-radius: 3px; line-height: 1.3; background: var(--accent); color: var(--on-accent); } .layer-row.is-hidden .layer-frame-badge { opacity: 0.45; } .layer-rename { flex: 1; min-width: 0; background: var(--surface2); border: 1px solid var(--accent); color: var(--text); border-radius: 4px; padding: 1px 4px; font-size: 12px; } .layer-rename:focus { outline: none; } .layer-eye, .layer-lock { flex: 0 0 22px; height: 22px; padding: 3px; background: none; border: none; color: var(--text-dim); cursor: pointer; border-radius: 4px; opacity: 0; display: flex; align-items: center; justify-content: center; } .layer-eye svg, .layer-lock svg { width: 15px; height: 15px; } .layer-row:hover .layer-eye, .layer-row.is-hidden .layer-eye, .layer-row.is-selected .layer-eye, .layer-row:hover .layer-lock, .layer-row.is-locked .layer-lock, .layer-row.is-selected .layer-lock { opacity: 1; } .layer-eye:hover, .layer-lock:hover { color: var(--text); background: var(--surface3); } .layer-row.is-locked .layer-lock { color: var(--accent); } .layer-drop-indicator { height: 0; border-top: 2px solid var(--accent); border-radius: 1px; margin: -1px 4px; } /* ── Stage ──────────────────────────────────────────────────────── */ /* Flex + margin:auto (not place-items:center) so a zoomed-in stage that overflows the wrap stays fully reachable by scrolling/panning. */ /* Ruler frame (pro plan 3.3): a positioned box that holds the ruler gutter. The scroll viewport (stage-wrap) is inset by the ruler size via margins (so it stays in flow and the frame keeps its height), which means no canvas content ever hides behind a ruler (which would eat clicks). */ .stage-frame { flex: 1; min-width: 0; position: relative; display: flex; } .stage-wrap { flex: 1; min-width: 0; overflow: auto; display: flex; margin: 18px 0 0 18px; padding: 24px; background: radial-gradient(circle at 50% 40%, transparent 0, transparent 60%, rgba(0,0,0,0.12) 100%), var(--bg); } .stage { position: relative; margin: auto; box-shadow: var(--shadow); touch-action: none; /* Checkerboard reads as "transparent" wherever the document paints no background rect; opaque backgrounds simply cover it. */ background: repeating-conic-gradient(var(--surface3) 0% 25%, var(--surface) 0% 50%) 0 0 / 16px 16px; } .stage #doc-host svg { display: block; } .stage[data-tool='eyedrop'] { cursor: crosshair; } /* Space / middle-drag pan cursors (beat any tool cursor below). */ .stage-wrap.is-pan, .stage-wrap.is-pan .stage { cursor: grab; } .stage-wrap.is-panning, .stage-wrap.is-panning .stage { cursor: grabbing; } /* Drop an SVG or image file onto the canvas (Phase 1 drag-drop). */ .stage-wrap.is-file-drop { outline: 2px dashed var(--accent); outline-offset: -6px; } #overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } /* Group isolation (pro plan 2.5): dims everything outside the entered folder (even-odd cutout drawn in the overlay, never the document). */ .iso-scrim { fill: var(--bg); opacity: 0.55; pointer-events: none; } /* Ruler guides (pro plan 3.3): construction lines drawn in the overlay (canvas space), so they scale with zoom and NEVER reach buildSvg/export. */ .doc-guide { stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.6; pointer-events: none; } .doc-guide.is-active { opacity: 1; stroke-dasharray: 4 3; } /* Rulers live in the frame's top/left gutter (never over the scroll viewport, so they cannot eat canvas clicks). */ #rulers { position: absolute; inset: 0; z-index: 6; pointer-events: none; } .ruler { position: absolute; background: var(--surface2); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); pointer-events: auto; touch-action: none; } #ruler-h { top: 0; left: 18px; height: 18px; cursor: row-resize; } #ruler-v { top: 18px; left: 0; width: 18px; cursor: col-resize; } #ruler-corner { position: absolute; top: 0; left: 0; width: 18px; height: 18px; background: var(--surface2); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); pointer-events: auto; } .ruler .tick { stroke: var(--text-dim); stroke-width: 1; opacity: 0.7; } .ruler .tick-label { fill: var(--text-dim); font-size: 8px; font-family: inherit; opacity: 0.85; } .ruler .guide-mark { stroke: var(--accent); stroke-width: 1.5; } body.is-guide-drag { cursor: grabbing; } /* Inline on-canvas text editor (pro plan 1.2): a textarea that visually replaces the rendered while editing. Font metrics come from inline styles (the shape's font at canvas zoom); this only frames it. */ .text-edit { position: absolute; z-index: 5; background: transparent; border: 1px dashed var(--accent); border-radius: 2px; padding: 0; margin: 0; white-space: pre; overflow: hidden; resize: none; outline: none; caret-color: var(--accent); min-width: 24px; min-height: 12px; } /* Selection / handles / marquee (overlay strokes use the accent) */ .sel-box { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; } .sel-handle { fill: var(--surface2); stroke: var(--accent); stroke-width: 1.2; vector-effect: non-scaling-stroke; } .rot-stem { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; } .rot-handle { fill: var(--surface2); stroke: var(--accent); stroke-width: 1.2; vector-effect: non-scaling-stroke; } /* Node tool: anchors are squares, bezier handles are dots on stems. */ .node-anchor { fill: var(--surface2); stroke: var(--accent); stroke-width: 1.2; vector-effect: non-scaling-stroke; } .node-anchor.is-selected { fill: var(--accent); } .node-handle { fill: var(--surface2); stroke: var(--accent-dim); stroke-width: 1.2; vector-effect: non-scaling-stroke; } .node-stem { stroke: var(--accent-dim); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.8; } .stage[data-tool='node'] { cursor: default; } .stage[data-tool='pen'], .stage[data-tool='pencil'], .stage[data-tool='polygon'] { cursor: crosshair; } .marquee { fill: var(--accent-bg); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; } .draft { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; } .draft-pt { fill: var(--accent); } .grid-line { stroke: var(--accent); opacity: 0.22; } /* Smart guides: alignment lines shown while an object snaps to another's edge/center or the canvas center (Phase 2.5). Magenta so they read against the accent selection chrome. */ .snap-guide { stroke: #ff45c8; stroke-width: 1; stroke-dasharray: 4 2; opacity: 0.9; vector-effect: non-scaling-stroke; } /* Gradient annotator: the on-canvas gradient line, stop and end handles */ .grad-extent { fill: none; stroke: var(--accent); opacity: 0.35; stroke-dasharray: 4 3; } .grad-line { stroke: var(--accent); } .grad-line-hit { stroke: transparent; pointer-events: all; cursor: copy; } .grad-end { fill: var(--surface2); stroke: var(--accent); pointer-events: all; cursor: grab; } .grad-stop { stroke: var(--surface2); pointer-events: all; cursor: grab; } .grad-stop.is-selected { stroke: var(--accent); } /* ── Inspector (content; the panel shell is .dock-panel above) ──── */ .insp-section { margin-bottom: 14px; } .insp-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 6px; } /* wrap so a row that outgrows the 232px dock (e.g. Fill: colour + HSB + none + grad) drops its trailing control to a second line instead of clipping it off the right edge. */ .insp-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; flex-wrap: wrap; } .insp-row label { flex: 0 0 52px; font-size: 11px; color: var(--text-dim); } .insp-input { flex: 1; min-width: 0; background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: 5px; padding: 4px 6px; font-size: 12px; } .insp-input:focus { outline: none; border-color: var(--accent); } textarea.insp-input { resize: vertical; font: inherit; font-size: 12px; line-height: 1.4; } .insp-color { flex: 0 0 30px; height: 26px; padding: 1px; background: var(--surface2); border: 1px solid var(--border); border-radius: 5px; cursor: pointer; } .insp-check { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11px; color: var(--text-dim); } /* Read-only value in an inspector row (e.g. the kerned-pairs count). */ .insp-static { font-size: 11px; color: var(--text-dim); margin-right: 6px; } /* User swatch groups (pro plan 2.3): brand palettes above the curated rows. */ .swatch-row-label { font-size: 10px; color: var(--text-dim); margin: 4px 0 1px; } .swatch-add { width: 18px; height: 18px; border-radius: 4px; padding: 0; border: 1px dashed var(--border); background: none; color: var(--text-dim); cursor: pointer; font-size: 12px; line-height: 1; } .swatch-add:hover { color: var(--accent); border-color: var(--accent-dim); } .swatch-save { gap: 6px; } .insp-hint { font-size: 11px; color: var(--text-dim); line-height: 1.5; } .insp-btnrow { display: flex; gap: 4px; flex-wrap: wrap; } /* Long action labels (e.g. attach with shape names) wrap, never clip. */ .insp-btnrow .tool-btn { padding: 4px 7px; font-size: 11px; white-space: normal; text-align: left; } /* Pathfinder row: the four boolean ops, icon above label */ .pf-row { gap: 5px; flex-wrap: nowrap; } .insp-btnrow .tool-btn.pf-btn { flex: 1; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 4px; font-size: 10px; min-width: 0; } .pf-btn svg { display: block; } /* ── Color workflow: fill/stroke wells + swatches ────────────────── */ .paint-wells { gap: 5px; } .paint-well { flex: 1; display: inline-flex; align-items: center; gap: 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: 5px; padding: 4px 8px; cursor: pointer; font-size: 11px; color: var(--text-dim); } .paint-well:hover { border-color: var(--accent-dim); } .paint-well.is-active { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); } .well-chip { width: 16px; height: 16px; border-radius: 3px; border: 1px solid var(--border); display: inline-block; flex: none; } /* "none" reads as the classic slashed chip. */ .paint-well.is-none .well-chip, .swatch.is-none { background: linear-gradient(to top right, transparent 44%, var(--danger) 46%, var(--danger) 54%, transparent 56%), var(--surface); } .swatch-head { margin-top: 10px; margin-bottom: 2px; } .swatch-head .insp-hint { margin-left: auto; } .swatch-row { display: flex; gap: 3px; margin-bottom: 3px; flex-wrap: wrap; } .swatch { width: 17px; height: 17px; border-radius: 4px; padding: 0; border: 1px solid var(--border); cursor: pointer; flex: none; } .swatch:hover { transform: scale(1.2); border-color: var(--text); } .swatch.is-active { outline: 2px solid var(--accent); outline-offset: 1px; } .swatch.is-transparent { background: repeating-conic-gradient(var(--surface3) 0% 25%, var(--surface) 0% 50%) 0 0 / 8px 8px; } /* ── Chat panel ─────────────────────────────────────────────────── */ /* Floating card over the canvas (the gusta-game/gusta-3d suite pattern): opening Gusta never reflows the workspace. */ #chat-panel { /* Anchored to #stage-frame (position: relative), so it floats over the canvas and never covers the properties dock. left/top win when the user drags it (ui.js writes them); otherwise it rests bottom-right. */ position: absolute; right: 12px; bottom: 12px; z-index: 60; width: 360px; max-width: calc(100% - 24px); height: 560px; max-height: calc(100% - 24px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; } #chat-panel[hidden] { display: none; } /* Narrow stages: the card spans the canvas rather than crowding one corner. */ @media (max-width: 900px) { #chat-panel { left: 12px; right: 12px; width: auto; } } #chat-head { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-bottom: 1px solid var(--border); cursor: move; touch-action: none; user-select: none; } #chat-head select, #chat-head button { cursor: pointer; } .chat-cost { font-size: 10px; color: var(--text-dim); cursor: pointer; margin-left: auto; } #chat-model { background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 5px; font-size: 11px; padding: 2px 4px; } .chat-hbtn { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 2px 5px; border-radius: 4px; } .chat-hbtn:hover { color: var(--text); background: var(--surface2); } #chat-msgs { flex: 1; overflow-y: auto; padding: 9px; display: flex; flex-direction: column; gap: 7px; } /* flex:0 0 auto - never let the column compress a tall message; scroll instead. */ .chat-msg { flex: 0 0 auto; border-radius: 8px; padding: 7px 9px; font-size: 12px; white-space: pre-wrap; word-break: break-word; } .chat-user { background: var(--accent-bg); align-self: flex-end; max-width: 90%; } .chat-claude { background: var(--surface2); align-self: flex-start; max-width: 95%; } .chat-info { color: var(--text-dim); font-size: 11px; } /* ── Beginner launcher (welcome block + one-tap starter chips) ─────── */ .chat-welcome { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; } .chat-welcome-title { font-weight: 700; font-size: 13px; color: var(--text); } .chat-welcome-sub { font-size: 11px; color: var(--text-dim); line-height: 1.5; } .chat-starters { display: flex; flex-wrap: wrap; gap: 6px; } .chat-starter { flex: 0 0 auto; background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer; } .chat-starter:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); } .chat-welcome-free { font-size: 11px; color: var(--text-dim); line-height: 1.5; border-top: 1px solid var(--border); padding-top: 8px; } /* ── Thinking bubble (unified Gusta working indicator) ─────────────── */ /* A live assistant bubble: streamed prose above a status row with animated EQ bars, a rotating studio line, an honest "doing - N edits - Ns" detail, and an inline Stop. Shared design with gusta-music / gusta-3d. */ .chat-msg.thinking { display: flex; flex-direction: column; gap: 6px; color: var(--text-dim); border: 1px solid var(--border); } .thinking-prose { margin: 0; font-style: italic; max-height: 132px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; } .thinking-prose[hidden] { display: none; } .thinking-status { display: flex; align-items: center; gap: 8px; } .thinking-flavor { color: var(--text); font-weight: 600; min-width: 0; } .thinking-detail { font-size: 11px; color: var(--text-dim); } .thinking-stop { margin-left: auto; font-size: 11px; } /* Tiny animated EQ bars: Gusta is audibly "at work" even before tokens land. */ .thinking-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; } .thinking-eq i { width: 3px; border-radius: 1.5px; background: var(--accent); animation: eq-bounce 0.9s ease-in-out infinite; } .thinking-eq i:nth-child(1) { height: 6px; animation-delay: 0s; } .thinking-eq i:nth-child(2) { height: 11px; animation-delay: 0.15s; } .thinking-eq i:nth-child(3) { height: 8px; animation-delay: 0.3s; } @keyframes eq-bounce { 50% { transform: scaleY(0.4); } } @media (prefers-reduced-motion: reduce) { .thinking-eq i { animation: none; } } #chat-busy { display: flex; align-items: center; gap: 7px; padding: 6px 10px; font-size: 11px; color: var(--text-dim); border-top: 1px solid var(--border); } #chat-busy[hidden] { display: none; } .chat-spinner { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--accent-bg); border-top-color: var(--accent); animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } #chat-input-row { padding: 8px; border-top: 1px solid var(--border); } #chat-input { width: 100%; background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: 7px; padding: 7px 9px; } #chat-input:focus { outline: none; border-color: var(--accent); } /* ── Footer ─────────────────────────────────────────────────────── */ footer { display: flex; align-items: center; gap: 10px; padding: 4px 12px; background: var(--surface); border-top: 1px solid var(--border); font-size: 11px; color: var(--text-dim); flex: 0 0 auto; } .status-right { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; } .status-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 1px solid transparent; border-radius: 5px; color: var(--text-dim); cursor: pointer; padding: 1px 7px; font-size: 11px; } .status-btn:hover { color: var(--text); background: var(--surface2); } .status-btn.is-active { color: var(--accent); background: var(--accent-bg); border-color: var(--accent-dim); } .zoom-controls { display: inline-flex; align-items: center; gap: 1px; } #zoom-readout { min-width: 44px; justify-content: center; font-variant-numeric: tabular-nums; } /* ── Touch (iPad is first-class): bigger targets at coarse pointers ─ */ @media (pointer: coarse) { :root { --rail-btn: 56px; --layer-row-h: 40px; } .tool-btn { padding: 8px 12px; } .sel-handle { stroke-width: 1.6; } .right-dock { flex-basis: 264px; } .right-dock.is-slim { flex-basis: 44px; } .insp-input { padding: 7px 8px; } .panel-title { padding: 6px 0; } .strip-btn { padding: 14px 10px; } .layer-eye, .layer-lock { flex-basis: 32px; height: 32px; opacity: 1; } .swatch { width: 24px; height: 24px; } .well-chip { width: 20px; height: 20px; } .layer-caret { flex-basis: 22px; height: 22px; } .layer-caret svg { width: 14px; height: 14px; } } /* Collapse header button labels to icons early enough that every control - including the right-hand account/Gusta/theme/feedback cluster - stays on screen from ~1180px (mouse) / ~1240px (touch) down through iPad portrait (768). The full labels survive as the buttons' title tooltips. */ @media (max-width: 1180px) { .btn-label { display: none; } } @media (pointer: coarse) and (max-width: 1240px) { .btn-label { display: none; } } /* Narrow screens: also slim the right dock. */ @media (max-width: 760px) { .right-dock { flex-basis: 190px; } } /* ── Gustalabs app launcher (in the account menu, per the shell contract) ── */ .launcher-grid { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; } .launcher-card { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; font: inherit; color: inherit; transition: background 0.12s ease, border-color 0.12s ease; } .launcher-card:hover:not(:disabled) { background: var(--surface3); border-color: var(--border); } .launcher-card.here { cursor: default; opacity: 0.7; } .launcher-card.coming-soon { cursor: default; opacity: 0.55; } .launcher-card.coming-soon .launcher-mark img { filter: grayscale(1); } .launcher-badge { margin-left: 6px; padding: 1px 5px; border-radius: 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-dim); background: var(--surface3); border: 1px solid var(--border); vertical-align: middle; } .launcher-mark { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; } .launcher-mark img { width: 34px; height: 34px; border-radius: 8px; } .launcher-text { display: flex; flex-direction: column; min-width: 0; } .launcher-name { font-size: 13px; font-weight: 600; color: var(--text); } .launcher-tagline { font-size: 11px; color: var(--text-dim); line-height: 1.3; } /* ── HSB / CMYK color popover (Phase 2.2) ─────────────────────────── */ .color-adv { flex: 0 0 auto; font-size: 9px; font-weight: 700; letter-spacing: 0.03em; padding: 3px 5px; margin-left: 4px; cursor: pointer; background: var(--surface2); color: var(--text-dim); border: 1px solid var(--border); border-radius: 5px; } .color-adv:hover { color: var(--accent); border-color: var(--accent-dim); } .cp-pop { z-index: 200; width: 224px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); font-size: 11px; color: var(--text); } .cp-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .cp-preview { flex: 0 0 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); } .cp-hex { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px; } .cp-group { margin-top: 6px; } .cp-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .cp-row label { flex: 0 0 16px; color: var(--text-dim); font-weight: 600; } .cp-row input[type="range"] { flex: 1; min-width: 0; } .cp-row input[type="number"] { flex: 0 0 44px; background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 3px 4px; } .cp-cmyk { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 6px; } .cp-cmyk-label { color: var(--text-dim); font-size: 10px; margin-bottom: 4px; } .cp-cmyk-row { display: flex; gap: 5px; } .cp-cmyk-row label { flex: 1; display: flex; flex-direction: column; gap: 2px; color: var(--text-dim); font-weight: 600; } .cp-cmyk-row input { width: 100%; background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 3px 4px; }