:root { color-scheme: light dark; --draw2-bg: #10131b; --draw2-surface: #191e29; --draw2-surface-raised: #222a38; --draw2-text: #f7f9fc; --draw2-muted: #a9b4c4; --draw2-border: #374356; --draw2-accent: #8ae3d2; --draw2-danger: #ff9e9e; --draw2-focus: #f8d477; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .draw2-timeline-audio-row { border-top: 1px solid color-mix(in srgb, var(--draw2-accent) 30%, var(--draw2-border-subtle)); background: color-mix(in srgb, var(--draw2-panel) 88%, #151d2d); } .draw2-timeline-audio-label { display: grid !important; grid-template-columns: auto minmax(0, 1fr) 26px; gap: 6px; align-items: center; padding: 3px 5px !important; } .draw2-timeline-audio-title { display: inline-flex; gap: 4px; align-items: center; min-width: 0; color: var(--draw2-text-strong); font-size: 11px; font-weight: 700; } .draw2-timeline-audio-title .draw2-ui-icon { width: 14px; height: 14px; color: var(--draw2-accent); } .draw2-timeline-audio-picker { min-width: 0 !important; width: 100% !important; height: 24px !important; padding: 0 20px 0 6px !important; font-size: 10px !important; } .draw2-timeline-audio-add { width: 26px !important; min-width: 26px !important; height: 24px !important; min-height: 24px !important; padding: 0 !important; font-size: 17px !important; } .draw2-timeline-audio-clip { position: absolute; inset-block: 4px; z-index: 2; min-width: 0; overflow: hidden; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--draw2-accent) 62%, white 8%); border-radius: 5px; background: color-mix(in srgb, var(--draw2-accent) 30%, #172237); color: var(--draw2-text-strong); font-size: 10px; font-weight: 700; line-height: 1; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .draw2-timeline-audio-clip[data-audio-kind="SE"] { border-color: color-mix(in srgb, #ffb45f 70%, white 8%); background: color-mix(in srgb, #ff9f43 26%, #261d18); } .draw2-timeline-audio-clip:hover, .draw2-timeline-audio-clip:focus-visible { filter: brightness(1.14); outline: none; } #draw2WorkspacePanelAssets { min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-gutter: stable; } #draw2CreatorAssetSurface { min-height: max-content !important; } .draw2-audio-panel[data-audio-panel-surface="timeline"] { position: relative; } .draw2-audio-playhead { position: absolute; top: 0; z-index: 20; width: 2px; min-width: 2px; height: 100%; background: #f0c5ff; box-shadow: 0 0 0 1px rgb(200 139 255 / 38%), 0 0 8px rgb(200 139 255 / 72%); pointer-events: none; transition: left 70ms linear; } .draw2-workspace-frame .draw2-timeline-playhead { width: 2px !important; min-width: 2px !important; background: #f0c5ff !important; box-shadow: 0 0 0 1px rgb(200 139 255 / 36%), 0 0 7px rgb(200 139 255 / 68%) !important; } @media (min-width: 1120px) { .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-canvas-region { overflow: hidden; background: var(--draw2-surface-canvas); } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2WorkspaceCanvasSlot { position: absolute !important; inset: 0 !important; visibility: hidden !important; pointer-events: none !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceCanvasSlot { position: absolute !important; inset: 0 !important; visibility: hidden !important; pointer-events: none !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-mini-preview:not([hidden]) { top: var(--draw2-space-2) !important; right: var(--draw2-space-2) !important; left: auto !important; transform: none !important; } } @media (min-width: 1120px) { #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceRightDock { grid-template-rows: 44px minmax(0, 1fr) !important; align-content: stretch !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceModeSummary { grid-column: 1 !important; grid-row: 1 !important; min-height: 44px !important; height: 44px !important; overflow: hidden !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceRightCustomDock { grid-column: 1 !important; grid-row: 2 !important; min-height: 0 !important; height: auto !important; overflow: hidden !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspacePanelPreview { min-height: 0 !important; height: auto !important; overflow: auto !important; } } .draw2-game-visual-maker { display: grid; gap: 12px; margin: 10px 0 14px; padding: 12px; border: 1px solid color-mix(in srgb, var(--draw2-accent-strong) 58%, var(--draw2-border-subtle)); border-radius: var(--draw2-radius-md); background: radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--draw2-accent-strong) 13%, transparent), transparent 35%), color-mix(in srgb, var(--draw2-accent-strong) 6%, var(--draw2-surface-raised)); } .draw2-game-visual-maker-heading, .draw2-game-maker-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .draw2-game-visual-maker-heading > div, .draw2-game-maker-section-heading > div { display: grid; gap: 3px; min-width: 0; } .draw2-game-visual-maker-heading strong, .draw2-game-maker-section-heading strong { color: var(--draw2-text-strong); font-size: 0.82rem; line-height: 1.25; } .draw2-game-visual-maker-intro, .draw2-game-maker-section-heading small, .draw2-game-maker-ui-note, .draw2-game-maker-map-legend { color: var(--draw2-text-muted); font-size: 0.72rem; line-height: 1.45; } .draw2-game-visual-maker-intro { margin: 0; } .draw2-game-maker-category-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .draw2-game-maker-category, .draw2-game-maker-motion-tab, .draw2-game-maker-movement-mode, .draw2-game-maker-theme, .draw2-game-maker-item-card, .draw2-game-maker-map-tool, .draw2-game-maker-palette-swatch, .draw2-game-maker-ui-slot { border: 1px solid var(--draw2-border-subtle); background: var(--draw2-surface-raised); color: var(--draw2-text-muted); cursor: pointer; touch-action: manipulation; transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, transform 120ms ease; } .draw2-game-maker-category { display: grid; place-items: center; gap: 3px; min-width: 0; min-height: 58px; padding: 7px 4px; border-radius: var(--draw2-radius-sm); } .draw2-game-maker-category > span { color: var(--draw2-accent-strong); font-size: 1.1rem; line-height: 1; } .draw2-game-maker-category strong { color: var(--draw2-text-strong); font-size: 0.72rem; line-height: 1.1; } .draw2-game-maker-category small { color: var(--draw2-text-muted); font: 700 0.54rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-game-maker-category:hover, .draw2-game-maker-category:focus-visible, .draw2-game-maker-category.is-active, .draw2-game-maker-motion-tab:hover, .draw2-game-maker-motion-tab:focus-visible, .draw2-game-maker-motion-tab.is-selected, .draw2-game-maker-movement-mode:hover, .draw2-game-maker-movement-mode:focus-visible, .draw2-game-maker-movement-mode.is-selected, .draw2-game-maker-theme:hover, .draw2-game-maker-theme:focus-visible, .draw2-game-maker-theme.is-selected, .draw2-game-maker-item-card:hover, .draw2-game-maker-item-card:focus-visible, .draw2-game-maker-map-tool:hover, .draw2-game-maker-map-tool:focus-visible, .draw2-game-maker-map-tool.is-selected, .draw2-game-maker-palette-swatch:hover, .draw2-game-maker-palette-swatch:focus-visible { border-color: var(--draw2-accent-strong); background: color-mix(in srgb, var(--draw2-accent-strong) 14%, var(--draw2-surface-raised)); color: var(--draw2-text-strong); outline: none; } .draw2-game-maker-category:active, .draw2-game-maker-motion-tab:active, .draw2-game-maker-movement-mode:active, .draw2-game-maker-theme:active, .draw2-game-maker-item-card:active, .draw2-game-maker-map-tool:active, .draw2-game-maker-palette-swatch:active, .draw2-game-maker-ui-slot:active { transform: translateY(1px); } .draw2-game-visual-maker-context { min-width: 0; } .draw2-game-maker-view { display: grid; gap: 10px; min-width: 0; } .draw2-game-maker-card, .draw2-game-maker-screen-card, .draw2-game-maker-empty-state, .draw2-game-maker-event-example { display: grid; gap: 9px; min-width: 0; padding: 11px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: color-mix(in srgb, var(--draw2-surface-raised) 90%, #0b1724); } .draw2-game-maker-empty-state { justify-items: start; } .draw2-game-maker-empty-state strong { color: var(--draw2-text-strong); font-size: 0.78rem; } .draw2-game-maker-empty-state small, .draw2-game-maker-mode-hint, .draw2-game-maker-event-example { color: var(--draw2-text-muted); font-size: 0.72rem; line-height: 1.45; } .draw2-game-maker-primary-button, .draw2-game-maker-secondary-button, .draw2-game-maker-draw-button, .draw2-game-maker-play-button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--draw2-accent-strong); border-radius: var(--draw2-radius-sm); background: color-mix(in srgb, var(--draw2-accent-strong) 16%, var(--draw2-surface-raised)); color: var(--draw2-text-strong); cursor: pointer; font-size: 0.72rem; font-weight: 800; touch-action: manipulation; } .draw2-game-maker-secondary-button, .draw2-game-maker-draw-button { border-color: var(--draw2-border-strong); background: var(--draw2-surface-input); } .draw2-game-maker-play-button { width: 100%; background: color-mix(in srgb, #fabb47 23%, var(--draw2-surface-raised)); border-color: #fabb47; } .draw2-game-maker-primary-button:hover, .draw2-game-maker-primary-button:focus-visible, .draw2-game-maker-secondary-button:hover, .draw2-game-maker-secondary-button:focus-visible, .draw2-game-maker-draw-button:hover, .draw2-game-maker-draw-button:focus-visible, .draw2-game-maker-play-button:hover, .draw2-game-maker-play-button:focus-visible { filter: brightness(1.12); outline: 2px solid var(--draw2-focus-ring); outline-offset: 2px; } .draw2-game-maker-direction-wheel { display: grid; grid-template: repeat(3, minmax(68px, 1fr)) / repeat(3, minmax(68px, 1fr)); grid-template-areas: "nw n ne" "w center e" "sw s se"; gap: 6px; width: min(100%, 348px); margin-inline: auto; } .draw2-game-maker-direction-slot, .draw2-game-maker-direction-center { display: grid; place-items: center; align-content: center; gap: 3px; min-width: 0; min-height: 68px; padding: 5px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-muted); } .draw2-game-maker-direction-slot { cursor: pointer; touch-action: manipulation; } .draw2-game-maker-direction-slot[data-game-maker-direction="UP_LEFT"] { grid-area: nw; } .draw2-game-maker-direction-slot[data-game-maker-direction="UP"] { grid-area: n; } .draw2-game-maker-direction-slot[data-game-maker-direction="UP_RIGHT"] { grid-area: ne; } .draw2-game-maker-direction-slot[data-game-maker-direction="LEFT"] { grid-area: w; } .draw2-game-maker-direction-slot[data-game-maker-direction="RIGHT"] { grid-area: e; } .draw2-game-maker-direction-slot[data-game-maker-direction="DOWN_LEFT"] { grid-area: sw; } .draw2-game-maker-direction-slot[data-game-maker-direction="DOWN"] { grid-area: s; } .draw2-game-maker-direction-slot[data-game-maker-direction="DOWN_RIGHT"] { grid-area: se; } .draw2-game-maker-direction-center { grid-area: center; border-color: color-mix(in srgb, var(--draw2-accent-strong) 62%, var(--draw2-border-subtle)); background: color-mix(in srgb, var(--draw2-accent-strong) 12%, var(--draw2-surface-raised)); } .draw2-game-maker-direction-slot:hover, .draw2-game-maker-direction-slot:focus-visible, .draw2-game-maker-direction-slot.is-selected { border-color: var(--draw2-accent-strong); background: color-mix(in srgb, var(--draw2-accent-strong) 13%, var(--draw2-surface-input)); color: var(--draw2-text-strong); outline: none; } .draw2-game-maker-direction-arrow { color: var(--draw2-accent-strong); font-size: 1.1rem; line-height: 1; } .draw2-game-maker-direction-slot > small, .draw2-game-maker-direction-center small { color: var(--draw2-text-muted); font-size: 0.62rem; line-height: 1.1; } .draw2-game-maker-direction-center > span { color: var(--draw2-accent-strong); font-size: 1.3rem; line-height: 1; } .draw2-game-maker-direction-center strong { color: var(--draw2-text-strong); font-size: 0.7rem; } .draw2-game-maker-direction-preview { display: grid; place-items: center; width: 40px; height: 32px; overflow: hidden; border-radius: 4px; background: repeating-conic-gradient(#263046 0 25%, #1d2638 0 50%) 50% / 8px 8px; } .draw2-game-maker-direction-preview .draw2-game-frame-thumb, .draw2-game-maker-frame-slot .draw2-game-frame-thumb { display: grid; place-items: center; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; } .draw2-game-maker-direction-preview .draw2-game-frame-thumb canvas, .draw2-game-maker-frame-slot .draw2-game-frame-thumb canvas { width: 30px; height: 30px; image-rendering: pixelated; } .draw2-game-maker-direction-preview .draw2-game-frame-thumb small, .draw2-game-maker-frame-slot .draw2-game-frame-thumb small { display: none; } .draw2-game-maker-empty-visual { display: grid; place-items: center; gap: 2px; width: 100%; height: 100%; min-height: 32px; padding: 2px; border: 0; background: transparent; color: var(--draw2-text-muted); cursor: pointer; font-size: 0.62rem; } .draw2-game-maker-empty-visual strong { color: var(--draw2-accent-strong); font-size: 1.05rem; line-height: 1; } .draw2-game-maker-empty-visual small { font-size: 0.56rem; } .draw2-game-maker-motion-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .draw2-game-maker-motion-tab { display: grid; place-items: center; gap: 3px; min-width: 0; min-height: 64px; padding: 6px 4px; border-radius: var(--draw2-radius-sm); } .draw2-game-maker-motion-tab > span { color: var(--draw2-accent-strong); font-size: 1rem; line-height: 1; } .draw2-game-maker-motion-tab strong { color: var(--draw2-text-strong); font-size: 0.68rem; } .draw2-game-maker-motion-tab small { color: var(--draw2-text-muted); font-size: 0.58rem; } .draw2-game-maker-frame-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .draw2-game-maker-frame-slot { display: grid; place-items: center; min-width: 0; min-height: 76px; padding: 4px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: repeating-conic-gradient(#263046 0 25%, #1d2638 0 50%) 50% / 10px 10px; color: var(--draw2-text-muted); cursor: pointer; touch-action: manipulation; } .draw2-game-maker-frame-slot:hover, .draw2-game-maker-frame-slot:focus-visible { border-color: var(--draw2-accent-strong); outline: none; } .draw2-game-maker-frame-slot > strong { color: var(--draw2-accent-strong); font-size: 1.15rem; } .draw2-game-maker-frame-slot > small { font-size: 0.56rem; } .draw2-game-maker-action-row { display: flex; flex-wrap: wrap; gap: 7px; } .draw2-game-maker-movement-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .draw2-game-maker-movement-mode { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; min-height: 62px; padding: 7px; border-radius: var(--draw2-radius-sm); text-align: left; } .draw2-game-maker-movement-mode > span:first-child { color: var(--draw2-accent-strong); font-size: 1.15rem; } .draw2-game-maker-movement-mode > span:last-child { display: grid; gap: 3px; min-width: 0; } .draw2-game-maker-movement-mode strong { color: var(--draw2-text-strong); font-size: 0.68rem; } .draw2-game-maker-movement-mode small { color: var(--draw2-text-muted); font-size: 0.58rem; line-height: 1.35; } .draw2-game-maker-control-preview { display: grid; grid-template-columns: minmax(130px, 0.75fr) minmax(0, 1.25fr); gap: 12px; align-items: center; } .draw2-game-maker-dpad { display: grid; grid-template: repeat(3, 38px) / repeat(3, 38px); place-content: center; gap: 4px; } .draw2-game-maker-dpad span { display: grid; place-items: center; border: 1px solid var(--draw2-border-subtle); border-radius: 9px; background: var(--draw2-surface-input); color: var(--draw2-text-strong); font-size: 1rem; } .draw2-game-maker-dpad [data-dpad-position="UP"] { grid-area: 1 / 2; } .draw2-game-maker-dpad [data-dpad-position="LEFT"] { grid-area: 2 / 1; } .draw2-game-maker-dpad [data-dpad-position="CENTER"] { grid-area: 2 / 2; color: var(--draw2-accent-strong); } .draw2-game-maker-dpad [data-dpad-position="RIGHT"] { grid-area: 2 / 3; } .draw2-game-maker-dpad [data-dpad-position="DOWN"] { grid-area: 3 / 2; } .draw2-game-maker-speed { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center; color: var(--draw2-text-muted); font-size: 0.7rem; } .draw2-game-maker-speed output { color: var(--draw2-accent-strong); font-weight: 800; } .draw2-game-maker-speed-range { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-column: 1 / -1; align-items: center; gap: 6px; } .draw2-game-maker-speed-range input { width: 100%; accent-color: var(--draw2-accent-strong); } .draw2-game-maker-speed-range small { font-size: 0.6rem; } .draw2-game-maker-theme-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .draw2-game-maker-theme { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; min-height: 58px; padding: 7px; border-radius: var(--draw2-radius-sm); text-align: left; } .draw2-game-maker-theme > span { color: var(--draw2-accent-strong); font-size: 1.25rem; } .draw2-game-maker-theme > span:last-child { display: grid; gap: 2px; min-width: 0; } .draw2-game-maker-theme strong { color: var(--draw2-text-strong); font-size: 0.68rem; } .draw2-game-maker-theme small { color: var(--draw2-text-muted); font-size: 0.58rem; } .draw2-game-maker-map-tools, .draw2-game-maker-palette { display: flex; flex-wrap: wrap; gap: 6px; } .draw2-game-maker-map-tool { min-width: 80px; min-height: 44px; padding: 7px 9px; border-radius: 999px; font-size: 0.68rem; } .draw2-game-maker-map-grid { display: grid; gap: 2px; width: 100%; padding: 6px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: #101826; } .draw2-game-maker-map-cell { display: grid; place-items: center; min-width: 0; min-height: 28px; padding: 0; border: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 58%, transparent); border-radius: 2px; background: #182235; color: transparent; cursor: pointer; font-size: 0.7rem; touch-action: manipulation; } .draw2-game-maker-map-cell.is-solid { background: color-mix(in srgb, #6c8b62 70%, #182235); color: #d0e6ac; } .draw2-game-maker-map-cell.is-trigger { background: color-mix(in srgb, #8f61b9 68%, #182235); color: #f1d5ff; } .draw2-game-maker-map-cell.has-actor { outline: 2px solid #fabb47; outline-offset: -2px; color: #fabb47; } .draw2-game-maker-map-cell:hover, .draw2-game-maker-map-cell:focus-visible { outline: 2px solid var(--draw2-accent-strong); outline-offset: -2px; } .draw2-game-maker-palette-swatch { display: grid; place-items: center; gap: 2px; min-width: 64px; min-height: 58px; padding: 6px; border-radius: var(--draw2-radius-sm); } .draw2-game-maker-palette-swatch strong { color: var(--draw2-accent-strong); font-size: 1.15rem; } .draw2-game-maker-palette-swatch small { font-size: 0.58rem; } .draw2-game-maker-item-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .draw2-game-maker-item-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; min-height: 76px; padding: 9px; border-radius: var(--draw2-radius-sm); text-align: left; } .draw2-game-maker-item-symbol { color: var(--draw2-accent-strong); font-size: 1.45rem; } .draw2-game-maker-item-card > span:last-child { display: grid; gap: 3px; min-width: 0; } .draw2-game-maker-item-card strong { color: var(--draw2-text-strong); font-size: 0.72rem; } .draw2-game-maker-item-card small { color: var(--draw2-text-muted); font-size: 0.6rem; line-height: 1.35; } .draw2-game-maker-event-list { display: grid; gap: 7px; } .draw2-game-maker-event-editor { gap: 11px; } .draw2-game-maker-event-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .draw2-game-maker-event-field { display: grid; gap: 5px; min-width: 0; color: var(--draw2-text-muted); font-size: 0.68rem; } .draw2-game-maker-event-field > span { line-height: 1.2; } .draw2-game-maker-event-field select, .draw2-game-maker-event-field input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 7px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-strong); font-size: 0.7rem; } .draw2-game-maker-event-field-wide { grid-column: span 2; } .draw2-game-maker-event-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto minmax(0, 1.2fr); align-items: center; gap: 6px; min-width: 0; min-height: 58px; padding: 8px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); color: var(--draw2-text-strong); cursor: pointer; text-align: left; touch-action: manipulation; } .draw2-game-maker-event-card:hover, .draw2-game-maker-event-card:focus-visible, .draw2-game-maker-event-card.is-selected { border-color: var(--draw2-accent-strong); outline: none; } .draw2-game-maker-event-chip { min-width: 0; padding: 7px 5px; border-radius: 5px; font-size: 0.64rem; line-height: 1.25; text-align: center; } .draw2-game-maker-event-chip.is-who { background: color-mix(in srgb, #5e88bd 20%, var(--draw2-surface-input)); } .draw2-game-maker-event-chip.is-when { background: color-mix(in srgb, #c59a4e 20%, var(--draw2-surface-input)); } .draw2-game-maker-event-chip.is-then { background: color-mix(in srgb, var(--draw2-accent-strong) 18%, var(--draw2-surface-input)); } .draw2-game-maker-event-arrow { color: var(--draw2-accent-strong); text-align: center; } .draw2-game-maker-screen-card { place-items: center; } .draw2-game-maker-screen { position: relative; width: min(100%, 520px); aspect-ratio: 16 / 9; overflow: hidden; border: 8px solid #28354a; border-radius: 14px; background: linear-gradient(145deg, #324f62, #152337 58%, #3b5a42); box-shadow: inset 0 0 0 1px #0c1422, 0 8px 20px rgb(0 0 0 / 22%); } .draw2-game-maker-screen-label { position: absolute; inset: 45% 0 auto; color: rgb(255 255 255 / 42%); font: 800 1.2rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; letter-spacing: 0.18em; } .draw2-game-maker-ui-slot { position: absolute; display: grid; place-items: center; gap: 2px; width: clamp(54px, 18%, 82px); min-width: 54px; min-height: 44px; padding: 5px; border-color: rgb(255 255 255 / 40%); border-radius: 10px; background: rgb(11 19 32 / 78%); color: #fff; } .draw2-game-maker-ui-slot[data-game-maker-ui-slot="TOP_LEFT"] { top: 6%; left: 5%; } .draw2-game-maker-ui-slot[data-game-maker-ui-slot="TOP_CENTER"] { top: 6%; left: 50%; transform: translateX(-50%); } .draw2-game-maker-ui-slot[data-game-maker-ui-slot="TOP_RIGHT"] { top: 6%; right: 5%; } .draw2-game-maker-ui-slot[data-game-maker-ui-slot="BOTTOM_LEFT"] { bottom: 6%; left: 5%; } .draw2-game-maker-ui-slot[data-game-maker-ui-slot="BOTTOM_RIGHT"] { right: 5%; bottom: 6%; } .draw2-game-maker-ui-slot:hover, .draw2-game-maker-ui-slot:focus-visible, .draw2-game-maker-ui-slot.is-selected { border-color: #fabb47; outline: 2px solid rgb(250 187 71 / 40%); outline-offset: 2px; } .draw2-game-maker-ui-slot.is-disabled { opacity: 0.52; } .draw2-game-maker-ui-slot strong { font-size: 1rem; line-height: 1; } .draw2-game-maker-ui-slot small { max-width: 100%; overflow: hidden; font-size: 0.58rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-game-maker-ui-editor { width: min(100%, 520px); margin-inline: auto; } .draw2-game-maker-ui-field { display: grid; gap: 5px; color: var(--draw2-text-muted); font-size: 0.7rem; } .draw2-game-maker-ui-field input, .draw2-game-maker-ui-field select { width: 100%; min-height: 44px; box-sizing: border-box; padding: 8px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-strong); font-size: 0.72rem; } .draw2-button-icon { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; } .draw2-button-icon > .draw2-ui-icon, .draw2-audio-global-button > .draw2-ui-icon, .draw2-audio-fx-action > .draw2-ui-icon, .draw2-audio-fx-add > .draw2-ui-icon, .draw2-layer-visibility > .draw2-ui-icon, .draw2-timeline-row-visibility > .draw2-ui-icon, .draw2-onion-control > .draw2-ui-icon, .draw2-onion-mode-control > .draw2-ui-icon, .draw2-canvas-resize-anchor-grid .draw2-ui-icon, .draw2-audio-browser-icon > .draw2-ui-icon { width: 16px; height: 16px; flex: 0 0 16px; } .draw2-button-icon > .draw2-button-label { display: inline-block; line-height: 1; } .draw2-audio-global-button { display: inline-grid; place-items: center; font-size: 0; } .draw2-audio-global-button.is-record > .draw2-ui-icon { width: 15px; height: 15px; flex-basis: 15px; } .draw2-audio-browser-icon { font-size: 0; } .draw2-audio-browser-icon > .draw2-ui-icon { color: inherit; } .draw2-audio-fx-action, .draw2-audio-fx-add { display: inline-flex; align-items: center; justify-content: center; } .draw2-layer-visibility, .draw2-timeline-row-visibility { display: inline-grid; place-items: center; font-size: 0; } .draw2-timeline-row-visibility > .draw2-ui-icon, .draw2-layer-visibility > .draw2-ui-icon { width: 15px; height: 15px; flex-basis: 15px; } .draw2-onion-control > .draw2-ui-icon, .draw2-onion-mode-control > .draw2-ui-icon { display: inline-block; } .draw2-canvas-resize-anchor-grid .draw2-ui-icon { display: block; } .draw2-right-panel-option-mark > .draw2-ui-icon, .draw2-right-custom-empty-icon > .draw2-ui-icon { width: 16px; height: 16px; flex: 0 0 16px; } .draw2-workspace-tab-add > .draw2-ui-icon, .draw2-panel-picker-close > .draw2-ui-icon { width: 16px; height: 16px; flex: 0 0 16px; } .draw2-right-panel-option-mark { display: inline-flex; align-items: center; justify-content: center; font-size: 0; } .draw2-right-custom-empty > .draw2-right-custom-empty-icon { display: block; color: var(--draw2-accent-strong); } .draw2-audio-editor-icon > .draw2-ui-icon { width: 17px; height: 17px; flex: 0 0 17px; } .draw2-audio-editor-pin { display: inline-flex; align-items: center; justify-content: center; gap: 5px; } .draw2-audio-editor-pin > .draw2-ui-icon { width: 14px; height: 14px; flex: 0 0 14px; } .draw2-audio-fx-chain li b { display: inline-flex; align-items: center; vertical-align: middle; } .draw2-audio-fx-chain li b > .draw2-ui-icon { width: 12px; height: 12px; flex: 0 0 12px; } .draw2-asset-builder-step > .draw2-ui-icon, .draw2-asset-builder-layout-icon > .draw2-ui-icon { width: 18px; height: 18px; flex: 0 0 18px; } .draw2-asset-builder-matrix-header > .draw2-ui-icon { width: 15px; height: 15px; flex: 0 0 15px; } .draw2-asset-builder-matrix-cell strong > .draw2-ui-icon { width: 14px; height: 14px; flex: 0 0 14px; } .draw2-asset-builder-compass-slot > .draw2-ui-icon { grid-row: 1 / -1; width: 18px; height: 18px; flex: 0 0 18px; color: #9fe1bb; } .draw2-asset-builder-compass-slot small > .draw2-ui-icon { width: 10px; height: 10px; flex: 0 0 10px; vertical-align: -1px; } .draw2-asset-animation-chip { display: inline-flex; align-items: center; gap: 3px; } .draw2-asset-animation-chip > .draw2-ui-icon { width: 13px; height: 13px; flex: 0 0 13px; } .draw2-asset-animation-chip > small { color: var(--draw2-text-muted); } .draw2-asset-slot-arrow > .draw2-ui-icon { width: 20px; height: 20px; flex: 0 0 20px; } .draw2-audio-track-icon > .draw2-ui-icon { width: 15px; height: 15px; flex: 0 0 15px; } .draw2-audio-track-lane-cell > .draw2-ui-icon { width: 13px; height: 13px; flex: 0 0 13px; } .draw2-asset-builder-asset-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); align-items: stretch; gap: 8px; padding: 8px; border-color: color-mix(in srgb, #4db7ff 42%, var(--draw2-border-subtle)); background: color-mix(in srgb, #4db7ff 5%, var(--draw2-surface-input)); } .draw2-asset-builder-asset-cards { display: contents; } .draw2-asset-builder-asset-card, .draw2-asset-builder-add-card { display: grid; align-content: center; justify-items: center; gap: 5px; min-width: 0; min-height: 92px; padding: 10px 8px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); color: var(--draw2-text-muted); cursor: pointer; text-align: center; } .draw2-asset-builder-asset-card:hover, .draw2-asset-builder-asset-card:focus-visible, .draw2-asset-builder-asset-card.is-selected { border-color: #67d59b; background: color-mix(in srgb, #67d59b 15%, var(--draw2-surface-raised)); color: var(--draw2-text-strong); } .draw2-asset-builder-asset-card strong { max-width: 100%; overflow: hidden; color: inherit; font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-asset-builder-asset-card span { color: #9fe1bb; font-size: 0.56rem; font-weight: 800; } .draw2-asset-builder-asset-card small { max-width: 100%; overflow: hidden; color: var(--draw2-text-muted); font-size: 0.48rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-asset-builder-add-card { min-height: 92px; border: 1px dashed color-mix(in srgb, #67d59b 78%, var(--draw2-border-subtle)); background: color-mix(in srgb, #67d59b 5%, var(--draw2-surface-raised)); color: #9fe1bb; font-size: 1.8rem; line-height: 1; } .draw2-asset-builder-add-card:hover, .draw2-asset-builder-add-card:focus-visible { border-color: #9fe1bb; background: color-mix(in srgb, #67d59b 16%, var(--draw2-surface-raised)); } .draw2-asset-builder-asset-summary { grid-column: 1 / -1; padding: 2px 2px 0; overflow: hidden; color: var(--draw2-text-muted); font-size: 0.54rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-asset-builder-close { grid-column: 1 / -1; justify-self: start; min-height: 28px; padding-inline: 9px; font-size: 0.56rem; } .draw2-asset-builder[data-editor-open="false"] .draw2-asset-builder-instruction, .draw2-asset-builder[data-editor-open="false"] .draw2-asset-builder-config, .draw2-asset-builder[data-editor-open="false"] .draw2-asset-builder-columns, .draw2-asset-builder[data-editor-open="false"] .draw2-asset-builder-layout-details, .draw2-asset-builder[data-editor-open="false"] .draw2-asset-builder-actions { display: none; } .draw2-asset-builder[data-editor-open="false"] .draw2-asset-builder-close { display: none; } .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-steps, .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-source, .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-motion-heading:not( .draw2-asset-builder-direction-heading ), .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-motion-list, .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-compass, .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-compass-actions, .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-layout-details, .draw2-asset-builder[data-editor-open="true"] + .draw2-asset-detail-editor { display: none; } .draw2-asset-detail-editor { display: none !important; } .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-config { grid-template-columns: minmax(180px, 1.4fr) minmax(130px, 0.8fr); padding: 7px; } .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-config > .draw2-asset-builder-field:nth-child(3), .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-config > .draw2-asset-builder-field:nth-child(4) { display: none; } .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-columns { grid-template-columns: minmax(0, 1fr) minmax(210px, 290px); align-items: start; } .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-matrix-card { display: flex; flex-direction: column; align-items: stretch; gap: 8px; } .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-matrix-card > .draw2-asset-builder-direction-heading { order: 2; margin-top: 0; padding-top: 0; border-top: 0; } .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-matrix-details { order: 3; display: block; border: 0; background: transparent; } .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-matrix-details > .draw2-asset-builder-matrix { margin: 0; } .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-matrix-footer { order: 4; } .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-new-motion { order: 5; } .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-frame-editor { order: 6; } .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-actions { grid-column: 1 / -1; } .draw2-asset-builder-matrix { grid-template-columns: minmax(66px, 0.72fr) repeat(4, minmax(58px, 1fr)); gap: 4px; overflow-x: auto; padding-bottom: 2px; } .draw2-asset-builder-matrix[data-direction-count="1"] { grid-template-columns: minmax(72px, 0.72fr) minmax(90px, 1fr); } .draw2-asset-builder-matrix[data-direction-count="2"] { grid-template-columns: minmax(72px, 0.72fr) repeat(2, minmax(90px, 1fr)); } .draw2-asset-builder-matrix[data-direction-count="8"] { grid-template-columns: minmax(72px, 0.72fr) repeat(8, minmax(78px, 1fr)); } .draw2-asset-builder-matrix[data-direction-count="CUSTOM"] { grid-template-columns: minmax(72px, 0.72fr) repeat(auto-fit, minmax(88px, 1fr)); } .draw2-asset-builder-matrix-cell { grid-template-columns: 1fr; grid-template-rows: 1fr; place-items: center; min-height: 54px; padding: 5px; text-align: center; } .draw2-asset-builder-matrix-cell canvas, .draw2-asset-builder-matrix-cell small { display: none; } .draw2-asset-builder-matrix-cell strong { font-size: 1.05rem; line-height: 1; } .draw2-asset-builder-matrix-cell[data-filled="true"] strong { color: #9fe1bb; } .draw2-asset-builder-matrix-cell[data-selected="true"] { border-color: #f1c77b; background: color-mix(in srgb, #f1c77b 18%, var(--draw2-surface-input)); box-shadow: 0 0 0 1px color-mix(in srgb, #f1c77b 42%, transparent); } .draw2-asset-builder-frame-editor { gap: 6px; padding-top: 7px; } .draw2-asset-builder-frame-editor-strip:empty::before { content: "このCellのFrames"; } .draw2-asset-builder-frame-actions { gap: 4px; } .draw2-asset-builder-frame-actions .draw2-asset-builder-duration, .draw2-asset-builder-frame-actions .draw2-asset-builder-loop { margin-left: 0; } .draw2-asset-builder-preview-card { position: sticky; top: 6px; } .draw2-asset-builder-preview-card .draw2-asset-builder-help, .draw2-asset-builder-preview-card .draw2-asset-builder-card-badge { display: none; } @media (min-width: 701px) { #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-workspace-command-bar > [data-workspace-command="panel-export"], #draw2WorkspaceFrame[data-creator-mode="AUDIO"] .draw2-workspace-command-bar > [data-workspace-command="panel-export"] { display: none !important; } } .draw2-audio-workspace { display: none; } .draw2-audio-workspace:not([hidden]) { display: flex; } @media (min-width: 1120px) { .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-audio-workspace { position: absolute; z-index: 2; inset: 10px; min-width: 0; min-height: 0; padding: 8px; overflow: hidden; border: 1px solid color-mix(in srgb, #c88bff 32%, var(--draw2-border-subtle)); border-radius: var(--draw2-radius-md); background: color-mix(in srgb, #111522 94%, transparent); box-shadow: 0 10px 28px rgb(0 0 0 / 20%); } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-audio-workspace .draw2-audio-panel { width: 100%; height: 100%; } } @media (prefers-reduced-motion: reduce) { .draw2-audio-playhead { transition: none; } } .draw2-audio-voice-editor { position: relative; overflow: hidden; background: radial-gradient(circle at 100% 0, rgb(200 139 255 / 18%), transparent 42%), linear-gradient(145deg, rgb(34 27 56 / 82%), rgb(13 20 32 / 92%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%); } .draw2-audio-voice-intro { margin: -2px 0 2px; color: #b9c7df; font-size: 0.59rem; line-height: 1.45; } .draw2-audio-voice-name, .draw2-audio-voice-selects label, .draw2-audio-voice-grid label { display: grid; gap: 4px; min-width: 0; color: #a9b9d2; font-size: 0.57rem; letter-spacing: 0.02em; } .draw2-audio-voice-name input, .draw2-audio-voice-selects select, .draw2-audio-voice-grid select { width: 100%; min-width: 0; min-height: 27px; border: 1px solid #344765; border-radius: 4px; background: #0d1727; color: #f3f7ff; font-size: 0.62rem; } .draw2-audio-voice-name input:focus-visible, .draw2-audio-voice-selects select:focus-visible, .draw2-audio-voice-grid select:focus-visible, .draw2-audio-voice-grid input:focus-visible { border-color: #c88bff; outline: 2px solid rgb(200 139 255 / 22%); outline-offset: 1px; } .draw2-audio-voice-selects, .draw2-audio-voice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .draw2-audio-voice-grid input[type="range"] { width: 100%; min-width: 0; accent-color: #c88bff; } .draw2-audio-voice-grid output { justify-self: end; margin-top: -1.05rem; color: #eef2ff; font: 600 0.56rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-audio-voice-group { padding: 5px 6px 6px; border: 1px solid rgb(70 87 122 / 62%); border-radius: 5px; background: rgb(8 15 27 / 45%); } .draw2-audio-voice-group summary { display: flex; align-items: baseline; justify-content: space-between; gap: 7px; padding: 2px 0 5px; color: #f1e7ff; cursor: pointer; font-size: 0.61rem; font-weight: 800; list-style: none; } .draw2-audio-voice-group summary::-webkit-details-marker { display: none; } .draw2-audio-voice-group summary::before { margin-right: 4px; color: #c88bff; content: "▸"; } .draw2-audio-voice-group[open] summary::before { content: "▾"; } .draw2-audio-voice-group summary small { margin-left: auto; color: #8498b8; font-size: 0.52rem; font-weight: 500; } .draw2-audio-voice-actions { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 6px; } .draw2-audio-voice-actions .draw2-button { min-height: 29px; padding-inline: 7px; font-size: 0.59rem; } .draw2-audio-voice-status { min-height: 1.4em; color: #7de3b1; font-size: 0.56rem; line-height: 1.35; } #draw2AudioRightInspector { display: flex; flex-direction: column; } #draw2AudioRightInspector > #draw2AudioVoiceEditor { flex: 0 0 auto; order: 1; } #draw2AudioRightInspector > #draw2AudioRoutingDiagnostics { order: 2; } #draw2AudioRightInspector > .draw2-audio-right-section:not( #draw2AudioVoiceEditor ):not(#draw2AudioRoutingDiagnostics) { order: 3; } @media (min-width: 1120px) { .draw2-workspace-frame[data-workspace-profile="desktop"] { grid-template-rows: 80px minmax(0, 1fr) clamp(170px, 26dvh, 260px) var( --draw2-statusbar-height ) !important; grid-template-areas: "top top top" "left canvas right" "timeline timeline timeline" "status status status" !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] { grid-template-rows: 80px minmax(0, 1fr) var(--draw2-timeline-height) var( --draw2-statusbar-height ) !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-topbar { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(360px, auto) !important; grid-template-rows: 38px 42px !important; align-items: stretch !important; gap: 0 !important; height: 80px !important; min-height: 80px !important; max-height: 80px !important; padding: 0 !important; overflow: visible !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-global-row { grid-column: 1 / -1 !important; grid-row: 1 !important; min-width: 0 !important; min-height: 38px !important; height: 38px !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-creator-mode-bar { grid-column: 1 !important; grid-row: 2 !important; min-width: 0 !important; min-height: 42px !important; height: 42px !important; padding-block: 3px !important; overflow-x: auto !important; overflow-y: hidden !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] [data-creator-mode="ANIMATE"], .draw2-workspace-frame[data-workspace-profile="desktop"] [data-creator-mode="ASSET"], .draw2-workspace-frame[data-workspace-profile="desktop"] [data-creator-mode="EXPORT"] { display: none !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-context-row { grid-column: 2 !important; grid-row: 2 !important; min-width: 0 !important; min-height: 42px !important; height: 42px !important; padding: 2px 8px !important; overflow-x: auto !important; overflow-y: hidden !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-quick-controls { min-width: max-content !important; height: 38px !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-timeline-region { display: flex !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; border-top: 0 !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-workspace-left-dock, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-left-dock, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-workspace-context-row, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-context-row { visibility: hidden !important; pointer-events: none !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-workspace-left-dock, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-left-dock { width: 0 !important; min-width: 0 !important; overflow: hidden !important; border: 0 !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-workspace-timeline-region, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-timeline-region { display: flex !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"], .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] { grid-template-columns: 0 minmax(0, 1fr) minmax(260px, var(--draw2-panel-width)) !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"], .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] { grid-template-rows: 80px minmax(0, 1fr) var(--draw2-timeline-height) var( --draw2-statusbar-height ) !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceTimelineSlot, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2WorkspaceTimelineSlot { display: none !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2ModeTimelineDeck:not([hidden]), .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2ModeTimelineDeck:not([hidden]) { display: flex !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspacePaletteStrip, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2WorkspacePaletteStrip, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspacePaletteResize, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2WorkspacePaletteResize, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceColorEditor, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2WorkspaceColorEditor, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] [data-workspace-panel="color"], .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] [data-workspace-panel="color"] { display: none !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-mode-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 10px; border-bottom: 1px solid var(--draw2-border-subtle); background: color-mix( in srgb, var(--draw2-surface-raised) 82%, transparent ); } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-mode-summary > div { display: grid; gap: 2px; min-width: 0; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-mode-summary strong, .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-mode-summary > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-mode-summary > span:last-child { color: var(--draw2-text-muted); font-size: 0.72rem; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceTabPreview { order: -3; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-tabs { border-bottom-color: color-mix( in srgb, #b77bff 35%, var(--draw2-border-subtle) ); } } .draw2-mode-timeline-deck { box-sizing: border-box; display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; gap: 5px; padding: 6px 8px 7px; overflow: hidden; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-md); background: color-mix(in srgb, var(--draw2-surface) 94%, #05070b); } .draw2-mode-timeline-deck[hidden], .draw2-mode-deck-surface[hidden] { display: none !important; } .draw2-mode-timeline-deck-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; min-height: 25px; } .draw2-mode-timeline-deck-heading > div { display: grid; gap: 1px; min-width: 0; } .draw2-mode-timeline-deck-heading strong, .draw2-mode-timeline-deck-heading > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-mode-timeline-deck-heading strong { font-size: 0.75rem; letter-spacing: 0.03em; } .draw2-mode-timeline-deck-heading > span:last-child { color: var(--draw2-text-muted); font-size: 0.66rem; } .draw2-mode-timeline-deck-tabs { display: flex; flex: 0 0 30px; align-items: stretch; gap: 3px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .draw2-mode-timeline-deck-tabs::-webkit-scrollbar { display: none; } .draw2-mode-timeline-deck-tab { flex: 0 0 auto; min-width: 78px; min-height: 30px; padding: 0 9px; border: 1px solid transparent; border-radius: var(--draw2-radius-sm); background: transparent; color: var(--draw2-text-muted); cursor: pointer; font-size: 0.65rem; font-weight: 700; white-space: nowrap; } .draw2-mode-timeline-deck-tab:hover, .draw2-mode-timeline-deck-tab:focus-visible, .draw2-mode-timeline-deck-tab.is-active { border-color: var(--draw2-accent-strong); background: color-mix( in srgb, var(--draw2-accent-strong) 14%, var(--draw2-surface-raised) ); color: var(--draw2-text-strong); } .draw2-mode-deck-surface { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; gap: 5px; } .draw2-mode-deck-toolbar { display: flex; flex: 0 0 32px; align-items: center; gap: 4px; min-width: 0; min-height: 32px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .draw2-mode-deck-toolbar::-webkit-scrollbar { display: none; } .draw2-mode-deck-toolbar .draw2-button { flex: 0 0 auto; min-height: 30px; padding-inline: 9px; font-size: 0.65rem; white-space: nowrap; } .draw2-mode-deck-surface[data-mode-deck-surface="audio"] .draw2-audio-advanced-toggle { border-color: color-mix(in srgb, #c88bff 42%, var(--draw2-border)); color: #e4c5ff; } .draw2-mode-deck-surface[data-mode-deck-surface="audio"] .draw2-audio-advanced-control { transition: opacity 120ms ease, max-width 120ms ease; } .draw2-mode-deck-surface[data-mode-deck-surface="audio"]:not(.is-advanced-open) .draw2-audio-advanced-control { display: none; } .draw2-audio-export-sources { display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(240px, 1.8fr); align-items: center; gap: 8px; min-width: 0; padding: 7px 10px; border-bottom: 1px solid rgba(88, 116, 151, 0.42); background: linear-gradient(180deg, rgba(25, 38, 58, 0.94), rgba(15, 24, 38, 0.96)); } .draw2-audio-export-sources-heading { display: grid; min-width: 0; gap: 3px; } .draw2-audio-export-sources-heading > div { display: grid; gap: 2px; min-width: 0; } .draw2-audio-export-sources-heading strong { overflow: hidden; color: #f1f7ff; font-size: 0.66rem; letter-spacing: 0.04em; text-overflow: ellipsis; white-space: nowrap; } .draw2-audio-export-sources-heading small, .draw2-audio-export-sources-heading output { color: var(--draw2-text-muted); font-size: 0.55rem; line-height: 1.35; } .draw2-audio-export-sources-status { display: grid; justify-items: end; gap: 2px; white-space: nowrap; } .draw2-audio-export-sources-heading output { color: #c88bff; font-variant-numeric: tabular-nums; white-space: nowrap; } .draw2-audio-export-source-actions { display: flex; flex: 0 0 auto; gap: 4px; } .draw2-audio-export-source-actions .draw2-button { min-height: 27px; padding-inline: 8px; font-size: 0.58rem; white-space: nowrap; } .draw2-audio-export-track-options { display: flex; min-width: 0; max-height: 78px; gap: 5px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; } .draw2-audio-export-track { display: grid; min-width: 112px; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px; padding: 6px 7px; border: 1px solid rgba(111, 142, 181, 0.45); border-radius: 6px; background: rgba(10, 18, 31, 0.72); color: #dcecff; cursor: pointer; } .draw2-audio-export-clip { display: grid; min-width: 140px; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px; padding: 5px 7px 5px 14px; border: 1px dashed rgba(111, 142, 181, 0.4); border-radius: 6px; background: rgba(14, 23, 38, 0.6); color: #dcecff; cursor: pointer; } .draw2-audio-export-clip:hover, .draw2-audio-export-clip:focus-within { border-color: #c88bff; background: rgba(48, 33, 70, 0.78); } .draw2-audio-export-clip input { accent-color: #61d9ff; } .draw2-audio-export-track:hover, .draw2-audio-export-track:focus-within { border-color: #83ddff; background: rgba(32, 62, 91, 0.86); } .draw2-audio-export-track input { accent-color: #c88bff; } .draw2-audio-export-track-copy { display: grid; min-width: 0; gap: 2px; } .draw2-audio-export-track-copy strong, .draw2-audio-export-track-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-audio-export-track-copy strong { color: #ffffff; font-size: 0.59rem; } .draw2-audio-export-track-copy small { color: var(--draw2-text-muted); font-size: 0.5rem; } .draw2-audio-export-empty { color: var(--draw2-text-muted); font-size: 0.58rem; } .draw2-mode-deck-surface[data-mode-deck-surface="audio"]:not(.is-advanced-open) .draw2-audio-export-sources { display: none; } @media (min-width: 1120px) { .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] { grid-template-columns: minmax(0, 1fr) minmax(260px, var(--draw2-panel-width)) !important; grid-template-rows: 80px minmax(0, 1fr) clamp(220px, 34dvh, 300px) var( --draw2-statusbar-height ) !important; grid-template-areas: "top top" "canvas right" "timeline timeline" "status status" !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2WorkspaceRightDock { display: grid !important; grid-area: right !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2ModeTimelineDeck .draw2-mode-timeline-deck-heading { display: none !important; } } .draw2-mode-deck-select, .draw2-mode-deck-number, .draw2-mode-deck-range { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; min-height: 30px; color: var(--draw2-text-muted); font-size: 0.62rem; white-space: nowrap; } .draw2-mode-deck-select select, .draw2-mode-deck-number input { width: 72px; min-height: 30px; padding-inline: 6px; } .draw2-mode-deck-number input { width: 58px; } .draw2-mode-deck-range input { width: 72px; accent-color: #c88bff; } .draw2-mode-deck-range output { min-width: 28px; color: var(--draw2-text-strong); font-variant-numeric: tabular-nums; } .draw2-game-deck-grid, .draw2-audio-deck-grid, .draw2-audio-track-strip { display: grid; flex: 1 1 auto; min-width: 0; min-height: 0; align-content: start; gap: 3px; overflow: auto; overscroll-behavior: contain; } .draw2-audio-track-strip { flex: 0 0 auto; max-height: 58px; overflow-y: auto; } .draw2-audio-track-strip .draw2-mode-deck-track { min-width: 520px; min-height: 24px; grid-template-columns: minmax(92px, 150px) minmax(0, 1fr); } .draw2-audio-track-strip .draw2-mode-deck-track-label, .draw2-audio-track-strip .draw2-mode-deck-cells, .draw2-audio-track-strip .draw2-mode-deck-cell { min-height: 24px; height: 24px; } .draw2-audio-track-strip .draw2-mode-deck-track-label { padding-inline: 6px; font-size: 0.6rem; } .draw2-audio-track-strip .draw2-mode-deck-track-label small { font-size: 0.52rem; } .draw2-audio-track-strip .draw2-mode-deck-cells { grid-auto-columns: 24px; gap: 2px; } .draw2-audio-track-strip .draw2-mode-deck-cell { width: 24px; min-width: 24px; font-size: 0.52rem; } .draw2-audio-track-strip { display: flex; flex: 0 0 28px; align-items: stretch; max-height: 28px; gap: 4px; overflow-x: auto; overflow-y: hidden; } .draw2-audio-track-strip .draw2-mode-deck-track { display: flex; flex: 0 0 104px; min-width: 104px; height: 24px; } .draw2-audio-track-strip .draw2-mode-deck-track-label { width: 104px; min-width: 104px; cursor: pointer; } .draw2-audio-track-strip .draw2-mode-deck-track-label.is-active, .draw2-audio-track-strip .draw2-mode-deck-track-label:focus-visible { border-color: #c88bff; background: color-mix(in srgb, #c88bff 22%, var(--draw2-surface-raised)); } .draw2-audio-track-strip .draw2-mode-deck-cells { display: none; } .draw2-mode-deck-surface[data-mode-deck-surface="audio"] > .draw2-mode-deck-toolbar { flex-basis: 30px; min-height: 30px; } .draw2-mode-deck-surface[data-mode-deck-surface="audio"] .draw2-audio-animation-guide { flex-basis: 20px; min-height: 20px; } .draw2-audio-animation-guide { display: flex; flex: 0 0 24px; align-items: center; gap: 10px; min-width: 0; padding-inline: 6px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: color-mix(in srgb, #c88bff 10%, var(--draw2-surface-raised)); color: var(--draw2-text-muted); font-size: 0.6rem; } .draw2-audio-animation-guide > span { flex: 0 0 auto; color: var(--draw2-text-strong); font-weight: 700; } .draw2-audio-animation-guide label { display: inline-flex; flex: 1 1 auto; align-items: center; gap: 6px; min-width: 0; } .draw2-audio-animation-guide input { flex: 1 1 auto; min-width: 80px; accent-color: #c88bff; } .draw2-audio-midi-grid { display: block; position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; align-content: start; overflow: auto; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: #111522; overscroll-behavior: contain; } .draw2-audio-midi-grid.is-midi-dragging { touch-action: none; user-select: none; } .draw2-audio-midi-expression { flex: 0 0 auto; min-height: 66px; padding: 6px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: color-mix(in srgb, #61d9ff 7%, var(--draw2-surface-raised)); } .draw2-audio-midi-expression-toolbar { display: flex; align-items: center; gap: 6px; min-height: 24px; color: var(--draw2-text-muted); font-size: 0.56rem; white-space: nowrap; } .draw2-audio-midi-expression-toolbar strong { color: var(--draw2-text-strong); letter-spacing: 0.08em; text-transform: uppercase; } .draw2-audio-midi-expression-toolbar select { min-height: 24px; max-width: 170px; padding: 2px 5px; border: 1px solid var(--draw2-border-subtle); border-radius: 4px; background: #151d2c; color: var(--draw2-text-strong); font-size: 0.56rem; } .draw2-audio-midi-expression-toolbar .draw2-button { min-height: 24px; padding: 3px 7px; font-size: 0.56rem; } .draw2-audio-midi-expression-toolbar > span { overflow: hidden; text-overflow: ellipsis; } .draw2-audio-midi-expression-lane { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 28px; padding-top: 4px; overflow-x: auto; } .draw2-audio-midi-expression-point { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 4px; border: 1px solid rgba(97, 217, 255, 0.24); border-radius: 4px; background: rgba(6, 13, 24, 0.72); color: var(--draw2-text-muted); font-size: 0.52rem; white-space: nowrap; } .draw2-audio-midi-expression-point input[type="number"] { width: 66px; min-height: 20px; padding: 1px 3px; border: 1px solid var(--draw2-border-subtle); border-radius: 3px; background: #121827; color: var(--draw2-text-strong); font-size: 0.52rem; } .draw2-audio-midi-expression-point input[type="range"] { width: 68px; accent-color: #61d9ff; } .draw2-audio-midi-expression-point output { min-width: 32px; color: var(--draw2-text-strong); text-align: right; } .draw2-audio-midi-expression-point button { width: 20px; min-width: 20px; min-height: 20px; padding: 0; border: 1px solid rgba(255, 137, 170, 0.35); border-radius: 3px; background: transparent; color: #ff9bb9; cursor: pointer; } .draw2-audio-midi-row { display: grid; grid-template-columns: 44px repeat(16, minmax(28px, 1fr)); min-width: 510px; min-height: 20px; } .draw2-audio-midi-key, .draw2-audio-midi-cell { box-sizing: border-box; min-width: 0; min-height: 20px; border-right: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 70%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 70%, transparent); } .draw2-audio-midi-key { display: grid; padding-inline: 6px; align-items: center; background: var(--draw2-surface-raised); color: var(--draw2-text-muted); font: 700 0.55rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-audio-midi-key.is-black { background: #0d101a; color: #8e99ad; } .draw2-audio-midi-cell { position: relative; padding: 0; background: color-mix(in srgb, #6b7894 9%, transparent); cursor: pointer; } .draw2-audio-midi-cell.is-black { background: color-mix(in srgb, #05070c 50%, transparent); } .draw2-audio-midi-cell::before { position: absolute; inset: 0; border-left: 1px solid transparent; content: ""; pointer-events: none; } .draw2-audio-midi-cell.is-beat { border-left-color: color-mix( in srgb, #c88bff 38%, var(--draw2-border-subtle) ); } .draw2-audio-midi-cell.is-animation-frame { background-color: color-mix(in srgb, #c88bff 20%, #111522); } .draw2-audio-midi-cell.is-note::after { position: absolute; inset: 3px 0; border: 1px solid #f0c5ff; border-radius: 2px; background: linear-gradient(90deg, #a966dd, #d79cff); box-shadow: 0 0 0 1px color-mix(in srgb, #f0c5ff 28%, transparent); content: ""; } .draw2-audio-midi-cell:hover, .draw2-audio-midi-cell:focus-visible { outline: 1px solid #f0c5ff; outline-offset: -1px; } .draw2-mode-deck-surface[data-mode-deck-surface="audio"] { gap: 4px; } .draw2-mode-deck-surface[data-mode-deck-surface="audio"] .draw2-audio-timebase { flex: 0 0 24px; min-height: 24px; } .draw2-audio-timebase { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; padding-inline: 6px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: color-mix(in srgb, #c88bff 7%, var(--draw2-surface-raised)); color: var(--draw2-text-muted); font-size: 0.58rem; scrollbar-width: none; } .draw2-audio-timebase::-webkit-scrollbar { display: none; } .draw2-audio-timebase > span { flex: 0 0 auto; color: var(--draw2-text-strong); font-weight: 700; white-space: nowrap; } .draw2-audio-timebase label { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; white-space: nowrap; } .draw2-audio-timebase select { min-height: 22px; padding-inline: 4px; border: 1px solid var(--draw2-border-subtle); border-radius: 2px; background: var(--draw2-surface-raised); color: var(--draw2-text-strong); font-size: 0.58rem; } .draw2-audio-panel { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; gap: 4px; overflow: hidden; } .draw2-audio-panel[hidden] { display: none; } .draw2-audio-ruler, .draw2-audio-animation-cells { display: grid; flex: 0 0 18px; width: 100%; max-width: 100%; min-width: 0; min-height: 18px; overflow-x: auto; overflow-y: hidden; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: #0d101a; } .draw2-audio-animation-cells { flex-basis: 30px; min-height: 30px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; } .draw2-audio-ruler-cell, .draw2-audio-animation-cell { box-sizing: border-box; min-width: 30px; border-right: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 78%, transparent); } .draw2-audio-ruler-cell { display: grid; align-items: center; padding-inline: 3px; color: var(--draw2-text-muted); font: 600 0.52rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; } .draw2-audio-ruler-cell.is-bar { color: #dfb7ff; background: color-mix(in srgb, #c88bff 13%, transparent); } .draw2-audio-ruler-cell.is-bar.is-selected { border-color: #dfb7ff; background: color-mix(in srgb, #c88bff 34%, #121827); color: #fff3ff; box-shadow: inset 0 -2px 0 #dfb7ff; cursor: pointer; font-weight: 800; } button.draw2-audio-ruler-cell { appearance: none; margin: 0; text-align: left; } .draw2-audio-animation-cell { position: relative; display: grid; align-content: center; gap: 1px; min-height: 28px; padding: 2px 3px; border: 1px solid var(--draw2-border-subtle); border-radius: 2px; background: color-mix(in srgb, #6b7894 14%, transparent); color: var(--draw2-text-muted); cursor: pointer; font: 700 0.54rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: left; content-visibility: auto; contain-intrinsic-size: 30px 30px; } .draw2-audio-animation-cell small { color: color-mix(in srgb, var(--draw2-text-muted) 75%, transparent); font-size: 0.45rem; font-weight: 500; } .draw2-audio-animation-cell.is-cel { background: color-mix(in srgb, #74d7a3 19%, var(--draw2-surface-raised)); } .draw2-audio-animation-cell.is-active, .draw2-audio-animation-cell:focus-visible { border-color: #f0c5ff; background: color-mix(in srgb, #c88bff 35%, var(--draw2-surface-raised)); color: var(--draw2-text-strong); outline: none; } .draw2-audio-track-lanes { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; gap: 3px; overflow: auto; overscroll-behavior: contain; } .draw2-audio-track-lane { display: grid; flex: 0 0 26px; grid-template-columns: 92px minmax(max-content, 1fr); min-width: max-content; min-height: 26px; gap: 0; padding-inline-start: 1px; contain: layout paint; } .draw2-audio-track-lane-label { display: flex; align-items: center; gap: 4px; min-width: 0; padding-inline: 6px; border: 1px solid var(--draw2-border-subtle); border-radius: 2px; background: var(--draw2-surface-raised); color: var(--draw2-text-strong); font-size: 0.57rem; font-weight: 700; } .draw2-audio-track-lane-label small { margin-left: auto; color: var(--draw2-text-muted); font-size: 0.47rem; font-weight: 500; } .draw2-audio-track-lane-cells { display: grid; min-width: max-content; min-height: 26px; } .draw2-audio-track-lane-cell { display: grid; min-width: 30px; min-height: 26px; place-items: center; border: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 74%, transparent); border-radius: 2px; background: color-mix(in srgb, #6b7894 8%, transparent); color: var(--draw2-text-muted); cursor: pointer; font-size: 0.48rem; content-visibility: auto; contain-intrinsic-size: 30px 26px; } .draw2-audio-track-lane-cell.is-filled { background: color-mix(in srgb, #c88bff 25%, var(--draw2-surface-raised)); color: var(--draw2-text-strong); } .draw2-audio-track-lane-cell.is-active { border-color: #f0c5ff; } .draw2-audio-add-sound { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .draw2-audio-add-sound span { color: var(--draw2-text-muted); font-size: 0.58rem; font-weight: 700; } .draw2-audio-add-sound select { min-width: 72px; } .draw2-audio-clip-library, .draw2-audio-mixer-rows, .draw2-audio-automation-lane, .draw2-audio-marker-list { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; gap: 3px; overflow: auto; } .draw2-audio-clip-row, .draw2-audio-mixer-row, .draw2-audio-marker-row { display: grid; flex: 0 0 30px; align-items: center; min-width: 420px; min-height: 30px; grid-template-columns: minmax(110px, 1fr) auto auto minmax(80px, 180px); gap: 5px; padding-inline: 6px; border: 1px solid var(--draw2-border-subtle); border-radius: 2px; background: var(--draw2-surface-raised); color: var(--draw2-text-muted); font-size: 0.58rem; } .draw2-audio-mixer-row { grid-template-columns: minmax(100px, 1fr) auto auto minmax(70px, 120px) minmax(80px, 180px) minmax(96px, 150px); } .draw2-audio-clip-row strong, .draw2-audio-mixer-row strong, .draw2-audio-marker-row strong { color: var(--draw2-text-strong); } .draw2-audio-clip-row.is-editable { display: flex; flex: 0 0 auto; flex-direction: column; align-items: stretch; min-width: min(720px, 100%); gap: 5px; padding: 6px; } .draw2-audio-clip-header, .draw2-audio-clip-controls { display: flex; align-items: center; min-width: 0; gap: 6px; } .draw2-audio-clip-header { justify-content: space-between; } .draw2-audio-clip-header span { color: var(--draw2-text-muted); font-size: 0.52rem; } .draw2-audio-clip-waveform { display: block; width: 100%; min-height: 64px; border: 1px solid color-mix(in srgb, #c88bff 28%, var(--draw2-border-subtle)); border-radius: 2px; background: #0a0d16; } .draw2-audio-clip-controls { flex-wrap: wrap; } .draw2-audio-clip-control { display: inline-flex; align-items: center; gap: 4px; min-width: 138px; color: var(--draw2-text-muted); font-size: 0.52rem; } .draw2-audio-clip-control input[type="range"] { flex: 1 1 76px; min-width: 72px; accent-color: #c88bff; } .draw2-audio-clip-control output { min-width: 38px; color: var(--draw2-text-strong); text-align: right; } .draw2-audio-mixer-row input[type="range"] { min-width: 70px; accent-color: #c88bff; } .draw2-audio-mixer-routing { display: inline-flex; align-items: center; gap: 4px; color: var(--draw2-text-muted); font: 700 0.5rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; } .draw2-audio-mixer-routing select { min-width: 78px; min-height: 24px; padding-inline: 3px; border: 1px solid var(--draw2-border-subtle); border-radius: 2px; background: var(--draw2-surface-raised); color: var(--draw2-text-strong); font-size: 0.52rem; } .draw2-audio-mixer-button, .draw2-audio-marker-remove { min-width: 26px; min-height: 24px; padding: 0 5px; border: 1px solid var(--draw2-border-subtle); border-radius: 2px; background: transparent; color: var(--draw2-text-muted); cursor: pointer; font-size: 0.52rem; } .draw2-audio-mixer-button.is-active { border-color: #c88bff; background: color-mix(in srgb, #c88bff 20%, transparent); color: var(--draw2-text-strong); } .draw2-audio-automation-toolbar, .draw2-audio-marker-toolbar { display: flex; flex: 0 0 28px; align-items: center; gap: 5px; min-width: max-content; overflow-x: auto; } .draw2-audio-automation-toolbar label, .draw2-audio-marker-toolbar label { display: inline-flex; align-items: center; gap: 4px; color: var(--draw2-text-muted); font-size: 0.58rem; white-space: nowrap; } .draw2-audio-automation-toolbar select, .draw2-audio-marker-toolbar input, .draw2-audio-settings-grid select { min-height: 26px; padding-inline: 5px; border: 1px solid var(--draw2-border-subtle); border-radius: 2px; background: var(--draw2-surface-raised); color: var(--draw2-text-strong); font-size: 0.58rem; } .draw2-audio-marker-toolbar input[type="number"] { width: 56px; } .draw2-audio-marker-toolbar input[type="text"] { width: 140px; } .draw2-audio-automation-point { display: grid; grid-template-columns: 112px 72px minmax(0, 1fr) 46px auto; align-items: center; gap: 5px; min-height: 24px; padding-inline: 6px; border: 1px solid var(--draw2-border-subtle); border-radius: 2px; background: color-mix(in srgb, #c88bff 7%, var(--draw2-surface-raised)); color: var(--draw2-text-muted); font-size: 0.56rem; } .draw2-audio-automation-point input { min-width: 0; accent-color: #c88bff; } .draw2-audio-automation-point input[type="number"] { min-height: 22px; padding-inline: 3px; border: 1px solid var(--draw2-border-subtle); border-radius: 2px; background: var(--draw2-surface-raised); color: var(--draw2-text-strong); font: 600 0.54rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-audio-settings-grid { display: grid; gap: 6px; min-width: 0; overflow: auto; } .draw2-audio-setting-check { display: flex; align-items: center; gap: 6px; min-height: 26px; color: var(--draw2-text-muted); font-size: 0.6rem; } .draw2-audio-setting-check input { accent-color: #c88bff; } .draw2-mode-deck-track { display: grid; grid-template-columns: minmax(122px, 180px) minmax(0, 1fr); align-items: center; min-width: 520px; min-height: 31px; gap: 5px; } .draw2-mode-deck-track-label { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 31px; padding: 0 7px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); color: var(--draw2-text-strong); font-size: 0.65rem; font-weight: 700; } .draw2-mode-deck-track-label small { margin-left: auto; color: var(--draw2-text-muted); font-size: 0.56rem; font-weight: 500; } .draw2-mode-deck-cells { display: grid; grid-auto-columns: 31px; grid-auto-flow: column; gap: 2px; min-width: max-content; min-height: 31px; } .draw2-mode-deck-cell { display: grid; width: 31px; min-width: 31px; height: 31px; min-height: 31px; padding: 0; place-items: center; border: 1px solid var(--draw2-border-subtle); border-radius: 2px; background: color-mix(in srgb, var(--draw2-surface-raised) 72%, transparent); color: var(--draw2-text-muted); cursor: pointer; font: 600 0.58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-mode-deck-cell:hover, .draw2-mode-deck-cell:focus-visible, .draw2-mode-deck-cell.is-active { border-color: var(--draw2-accent-strong); background: color-mix( in srgb, var(--draw2-accent-strong) 20%, var(--draw2-surface-raised) ); color: var(--draw2-text-strong); } .draw2-game-deck-grid .draw2-mode-deck-cell.is-filled { background: color-mix(in srgb, #7aa7ff 30%, var(--draw2-surface-raised)); } .draw2-game-deck-grid .draw2-mode-deck-cell.is-playhead { border-color: var(--draw2-accent-strong); box-shadow: inset 0 0 0 2px color-mix( in srgb, var(--draw2-accent-strong) 72%, transparent ); background: color-mix(in srgb, #5fd8ab 28%, var(--draw2-surface-raised)); } .draw2-audio-deck-grid .draw2-mode-deck-cell.is-filled { background: color-mix(in srgb, #c88bff 28%, var(--draw2-surface-raised)); } .draw2-mode-deck-status { flex: 0 0 auto; min-width: 0; margin: 0; overflow: hidden; color: var(--draw2-text-muted); font-size: 0.63rem; text-overflow: ellipsis; white-space: nowrap; } :root { --draw2-tool-rail-width: 48px; --draw2-panel-width: 300px; --draw2-timeline-height: clamp(164px, 24dvh, 260px); --draw2-statusbar-height: 24px; --draw2-control-size: 32px; --draw2-icon-size: 18px; --draw2-radius-sm: 3px; --draw2-radius-md: 4px; --draw2-radius-lg: 6px; } html:has(#draw2WorkspaceFrame), body:has(#draw2WorkspaceFrame) { overflow: hidden; } body:has(#draw2WorkspaceFrame) { min-width: 0; min-height: 100dvh; margin: 0; } .draw2-shell:has(#draw2WorkspaceFrame) { width: 100%; max-width: none; height: 100dvh; min-height: 100dvh; padding: 0; } .draw2-shell:has(#draw2WorkspaceFrame) > .draw2-header { display: none !important; } .draw2-workspace-frame { width: 100%; height: 100dvh; min-height: 0; margin: 0; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; grid-template-columns: var(--draw2-tool-rail-width) minmax(0, 1fr) minmax( 260px, var(--draw2-panel-width) ); grid-template-rows: auto minmax(0, 1fr) var(--draw2-timeline-height) var( --draw2-statusbar-height ); grid-template-areas: "top top top" "left canvas right" "timeline timeline timeline" "status status status"; } .draw2-workspace-topbar { display: block; min-width: 0; padding: 0; border-bottom: 1px solid var(--draw2-border-subtle); } .draw2-workspace-global-row, .draw2-workspace-context-row { display: flex; align-items: center; min-width: 0; } .draw2-workspace-global-row { display: grid; grid-template-columns: minmax(128px, auto) minmax(0, 1fr) minmax(160px, 240px) auto; min-height: 38px; gap: 6px; padding: 3px 6px; background: var(--draw2-surface); } .draw2-workspace-context-row { min-height: 38px; padding: 3px 6px; border-top: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 60%, transparent); background: var(--draw2-surface-raised); } .draw2-workspace-brand { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; } .draw2-brand-icon { width: 18px; height: 18px; color: var(--draw2-accent-strong); } .draw2-workspace-brand strong { font-size: 0.78rem; letter-spacing: 0.03em; } .draw2-workspace-brand .draw2-workspace-status { display: none; } .draw2-workspace-menu-bar { display: flex; align-items: center; gap: 1px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .draw2-workspace-menu-bar::-webkit-scrollbar, .draw2-workspace-command-bar::-webkit-scrollbar, .draw2-workspace-quick-controls::-webkit-scrollbar { display: none; } .draw2-workspace-menu-bar .draw2-menu { flex: 0 0 auto; } .draw2-workspace-menu-bar .draw2-menu summary { min-height: 30px; padding: 0 7px; border: 1px solid transparent; border-radius: var(--draw2-radius-sm); font-size: 0.69rem; white-space: nowrap; } .draw2-workspace-menu-bar .draw2-menu summary:hover, .draw2-workspace-menu-bar .draw2-menu[open] summary { background: var(--draw2-surface-raised); color: var(--draw2-text-strong); } .draw2-workspace-menu-bar .draw2-menu-icon { width: 14px; height: 14px; } .draw2-workspace-menu-bar .draw2-menu-popover { z-index: 80; } .draw2-workspace-menu-bar hr { height: 1px; margin: 4px 0; border: 0; background: var(--draw2-border-subtle); } .draw2-workspace-project-slot { min-width: 0; align-self: center; } .draw2-workspace-project-slot .draw2-controls { gap: 4px; } .draw2-workspace-project-slot .draw2-controls label { font-size: 0; } .draw2-workspace-project-slot .draw2-controls input, .draw2-workspace-project-slot .draw2-controls select { min-height: 30px; padding-inline: 7px; font-size: 0.69rem; } .draw2-workspace-project-slot #draw2CreateProject { min-height: 30px; font-size: 0.65rem; } .draw2-workspace-command-bar { display: flex; align-items: center; justify-content: flex-end; gap: 2px; min-width: 0; } .draw2-workspace-command-bar .draw2-icon-button { width: var(--draw2-control-size); min-width: var(--draw2-control-size); height: var(--draw2-control-size); min-height: var(--draw2-control-size); padding: 0; } .draw2-workspace-command-bar .draw2-icon-button span { display: none; } .draw2-theme-control, .draw2-language-control { font-size: 0; } .draw2-theme-control select, .draw2-language-control select { width: 32px; min-height: 30px; padding: 0 2px; font-size: 0.65rem; } .draw2-workspace-quick-controls { display: flex; align-items: center; gap: 5px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .draw2-workspace-quick-controls::before { content: ""; width: 2px; height: 20px; flex: 0 0 auto; background: var(--draw2-accent-strong); } .draw2-quick-control { min-height: 30px; } .draw2-quick-control > span { font-size: 0.62rem; } .draw2-quick-control select, .draw2-quick-control input { min-height: 30px; } .draw2-workspace-left-dock { width: var(--draw2-tool-rail-width); min-width: var(--draw2-tool-rail-width); padding: 6px 4px; gap: 8px; border-right: 1px solid var(--draw2-border-subtle); background: var(--draw2-surface); } .draw2-workspace-toolbar { display: flex; flex-direction: column; align-items: center; gap: 3px; overflow: visible; } .draw2-workspace-left-dock .draw2-workspace-panel-launcher { display: none; } .draw2-tool-group, .draw2-tool-group-summary, .draw2-workspace-toolbar > .draw2-tool-button { width: var(--draw2-control-size); height: var(--draw2-control-size); min-width: var(--draw2-control-size); min-height: var(--draw2-control-size); } .draw2-tool-group-summary, .draw2-workspace-toolbar > .draw2-tool-button { display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: var(--draw2-radius-sm); background: transparent; } .draw2-tool-group-summary:hover, .draw2-tool-group[open] > .draw2-tool-group-summary, .draw2-tool-group.is-active > .draw2-tool-group-summary, .draw2-workspace-toolbar > .draw2-tool-button:hover, .draw2-workspace-toolbar > .draw2-tool-button.is-active { border-color: color-mix(in srgb, var(--draw2-accent-strong) 72%, transparent); background: color-mix(in srgb, var(--draw2-accent-strong) 16%, transparent); color: var(--draw2-text-strong); } .draw2-tool-group-summary .draw2-tool-group-label, .draw2-workspace-toolbar > .draw2-tool-button span { display: none; } .draw2-tool-group-summary .draw2-tool-icon, .draw2-workspace-toolbar > .draw2-tool-button .draw2-tool-icon { width: var(--draw2-icon-size); height: var(--draw2-icon-size); } .draw2-tool-group > .draw2-tool-popover { z-index: 90; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; min-width: 156px; padding: 5px; border: 1px solid var(--draw2-border-strong); border-radius: var(--draw2-radius-md); background: var(--draw2-surface); box-shadow: var(--draw2-shadow-panel); } .draw2-tool-group > .draw2-tool-popover .draw2-tool-button { min-height: 32px; padding: 3px 5px; justify-content: flex-start; border: 1px solid transparent; border-radius: var(--draw2-radius-sm); } .draw2-tool-group > .draw2-tool-popover .draw2-tool-button span { font-size: 0.65rem; } .draw2-workspace-canvas-region { padding: 6px; background: var(--draw2-surface-canvas); } #draw2WorkspaceCanvasSlot > .draw2-canvas-card { padding: 0; border: 0; border-radius: 0; background: transparent; } #draw2WorkspaceCanvasSlot .draw2-viewport-wrap { margin-top: 0; min-height: 0; } .draw2-workspace-right-dock { min-width: 0; border-left: 1px solid var(--draw2-border-subtle); background: var(--draw2-surface); } .draw2-workspace-right-header { min-height: 34px; padding: 3px 6px; border-bottom: 1px solid var(--draw2-border-subtle); } .draw2-workspace-right-header strong { font-size: 0.69rem; letter-spacing: 0.05em; text-transform: uppercase; } .draw2-panel-close { width: 28px; min-width: 28px; height: 28px; min-height: 28px; border-color: transparent; background: transparent; } .draw2-panel-close .draw2-ui-icon { width: 16px; height: 16px; } .draw2-workspace-tabs { order: 1; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--draw2-border-subtle); } .draw2-workspace-tab { min-height: 30px; padding: 0 8px; border: 0; border-radius: var(--draw2-radius-sm); font-size: 0.67rem; } .draw2-workspace-tab.is-active { border-bottom: 2px solid var(--draw2-accent-strong); background: var(--draw2-surface-raised); } .draw2-palette-strip { order: 2; padding: 6px; border-bottom: 1px solid var(--draw2-border-subtle); } .draw2-workspace-panel { order: 3; padding: 7px; } .draw2-workspace-panel .draw2-help, .draw2-workspace-panel > .draw2-card-heading, .draw2-workspace-panel > .draw2-metrics { display: none; } .draw2-workspace-panel .draw2-unavailable-state p { font-size: 0.68rem; } .draw2-workspace-frame.is-right-dock-collapsed { grid-template-columns: var(--draw2-tool-rail-width) minmax(0, 1fr) 0; } .draw2-workspace-frame.is-right-dock-collapsed .draw2-workspace-right-dock { min-width: 0; width: 0; overflow: hidden; border-left: 0; } .draw2-workspace-timeline-region { min-height: 0; padding: 4px 6px 5px; border-top: 1px solid var(--draw2-border-subtle); } #draw2WorkspaceTimelineSlot, #draw2WorkspaceTimelineSlot > .draw2-timeline-card { min-height: 0; height: 100%; } #draw2WorkspaceTimelineSlot > .draw2-timeline-card { padding: 0; overflow: hidden; border: 0; border-radius: 0; background: transparent; } .draw2-workspace-timeline-region .draw2-card-heading { display: none; } .draw2-workspace-timeline-region .draw2-timeline-display-actions { min-height: 30px; margin: 0 0 3px; padding: 0; gap: 3px; overflow-x: auto; } .draw2-workspace-timeline-region .draw2-timeline-display-actions .draw2-button { flex: 0 0 var(--draw2-control-size); width: var(--draw2-control-size); min-width: var(--draw2-control-size); min-height: var(--draw2-control-size); padding: 0; } .draw2-timeline-secondary { position: relative; margin: 0 0 3px; font-size: 0.65rem; } .draw2-timeline-secondary > summary { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 5px; border-radius: var(--draw2-radius-sm); color: var(--draw2-text-muted); cursor: pointer; list-style: none; } .draw2-timeline-secondary > summary::-webkit-details-marker { display: none; } .draw2-timeline-secondary[open] > summary { background: var(--draw2-surface-raised); color: var(--draw2-text-strong); } .draw2-timeline-secondary .draw2-timeline-creator-tools { max-height: 112px; margin-top: 3px; overflow: auto; } .draw2-workspace-timeline-region .draw2-timeline-viewport { height: calc(100% - 62px); max-height: none; margin-top: 0; border-radius: var(--draw2-radius-sm); } .draw2-workspace-statusbar { grid-area: status; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 0 8px; overflow: hidden; background: var(--draw2-surface); color: var(--draw2-text-muted); font-size: 0.62rem; white-space: nowrap; } .draw2-workspace-statusbar > span { overflow: hidden; text-overflow: ellipsis; } .draw2-statusbar-spacer { flex: 1 1 auto; } .draw2-statusbar-save { display: inline-flex; align-items: center; gap: 4px; } .draw2-statusbar-save i { width: 6px; height: 6px; border-radius: 50%; background: var(--draw2-accent-strong); } .draw2-workspace-frame[data-workspace-preset="animation"] { --draw2-timeline-height: clamp(190px, 33dvh, 340px); } .draw2-workspace-frame[data-workspace-preset="tileset"] { --draw2-timeline-height: clamp(140px, 20dvh, 220px); } .draw2-workspace-frame.is-focus-mode { grid-template-columns: var(--draw2-tool-rail-width) minmax(0, 1fr) 0; grid-template-rows: auto minmax(0, 1fr) 0 var(--draw2-statusbar-height); } .draw2-workspace-frame.is-focus-mode .draw2-workspace-right-dock, .draw2-workspace-frame.is-focus-mode .draw2-workspace-timeline-region { width: 0; min-width: 0; min-height: 0; overflow: hidden; border: 0; pointer-events: none; visibility: hidden; } .draw2-asset-builder-motion-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; } .draw2-asset-builder-asset-picker { display: grid; grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1.5fr) auto; align-items: end; gap: 7px; min-width: 0; padding: 7px 8px; border: 1px solid color-mix(in srgb, #4db7ff 42%, var(--draw2-border-subtle)); border-radius: var(--draw2-radius-sm); background: color-mix(in srgb, #4db7ff 7%, var(--draw2-surface-input)); } .draw2-asset-builder-asset-picker-select { min-width: 0; } .draw2-asset-builder-asset-summary { min-width: 0; padding-bottom: 7px; overflow: hidden; color: var(--draw2-text-muted); font-size: 0.55rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .draw2-asset-builder-asset-picker > .draw2-button { min-height: 30px; padding-inline: 8px; font-size: 0.55rem; white-space: nowrap; } .draw2-asset-builder-motion-heading strong { color: var(--draw2-text-strong); font-size: 0.65rem; } .draw2-asset-builder-motion-heading small { overflow: hidden; color: var(--draw2-text-muted); font-size: 0.52rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-asset-builder-motion-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; max-height: 144px; min-height: 38px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .draw2-asset-builder-motion-item { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-width: 0; min-height: 34px; padding: 5px 7px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-muted); cursor: pointer; text-align: left; } .draw2-asset-builder-motion-item:hover, .draw2-asset-builder-motion-item:focus-visible, .draw2-asset-builder-motion-item[aria-selected="true"] { border-color: #67d59b; background: color-mix(in srgb, #67d59b 18%, var(--draw2-surface-input)); color: var(--draw2-text-strong); } .draw2-asset-builder-motion-item strong { overflow: hidden; color: inherit; font-size: 0.62rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-asset-builder-motion-item small { flex: 0 0 auto; color: #9fe1bb; font-size: 0.48rem; white-space: nowrap; } .draw2-asset-builder-motion-empty { grid-column: 1 / -1; margin: 0; padding: 7px; border: 1px dashed var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); color: var(--draw2-text-muted); font-size: 0.55rem; line-height: 1.4; text-align: center; } .draw2-asset-builder-new-motion { display: grid; gap: 6px; padding: 7px; border: 1px solid color-mix(in srgb, #67d59b 55%, var(--draw2-border-subtle)); border-radius: var(--draw2-radius-sm); background: color-mix(in srgb, #67d59b 8%, var(--draw2-surface-input)); } .draw2-asset-builder-new-motion[hidden] { display: none; } .draw2-asset-builder-new-motion label { display: grid; gap: 4px; color: var(--draw2-text-muted); font-size: 0.55rem; font-weight: 700; } .draw2-asset-builder-new-motion input { box-sizing: border-box; width: 100%; min-height: 30px; padding: 0 7px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-strong); font-size: 0.62rem; } .draw2-asset-builder-new-motion-actions, .draw2-asset-builder-frame-actions, .draw2-asset-builder-compass-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; } .draw2-asset-builder-new-motion-actions .draw2-button, .draw2-asset-builder-frame-actions .draw2-button, .draw2-asset-builder-compass-actions .draw2-button { min-height: 28px; padding-inline: 7px; font-size: 0.55rem; } .draw2-asset-builder-direction-heading { padding-top: 3px; border-top: 1px solid var(--draw2-border-subtle); } .draw2-asset-builder-direction-title { display: inline-flex; align-items: baseline; gap: 7px; min-width: 0; } .draw2-asset-builder-direction-mode { display: inline-flex; align-items: center; gap: 4px; color: var(--draw2-text-muted); font-size: 0.5rem; white-space: nowrap; } .draw2-asset-builder-direction-mode select { min-height: 26px; padding: 0 5px; border: 1px solid var(--draw2-border-subtle); border-radius: 3px; background: var(--draw2-surface-input); color: var(--draw2-text-strong); font-size: 0.52rem; } .draw2-asset-builder-compass { display: grid; grid-template: repeat(3, minmax(42px, 1fr)) / repeat(3, minmax(0, 1fr)); grid-template-areas: ". up ." "left center right" ". down ."; gap: 4px; min-width: 0; padding: 2px; } .draw2-asset-builder-compass-slot { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; min-width: 0; min-height: 42px; padding: 4px 6px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-muted); cursor: pointer; text-align: left; } .draw2-asset-builder-compass-slot[data-direction="UP"] { grid-area: up; } .draw2-asset-builder-compass-slot[data-direction="LEFT"] { grid-area: left; } .draw2-asset-builder-compass-slot[data-direction="RIGHT"] { grid-area: right; } .draw2-asset-builder-compass-slot[data-direction="DOWN"] { grid-area: down; } .draw2-asset-builder-compass[data-direction-mode="8"] { grid-template-areas: "up-left up up-right" "left center right" "down-left down down-right"; } .draw2-asset-builder-compass-slot[data-direction="UP_LEFT"] { grid-area: up-left; } .draw2-asset-builder-compass-slot[data-direction="UP_RIGHT"] { grid-area: up-right; } .draw2-asset-builder-compass-slot[data-direction="DOWN_LEFT"] { grid-area: down-left; } .draw2-asset-builder-compass-slot[data-direction="DOWN_RIGHT"] { grid-area: down-right; } .draw2-asset-builder-compass[data-direction-mode="1"] { grid-template: auto / minmax(0, 1fr); grid-template-areas: none; } .draw2-asset-builder-compass[data-direction-mode="2"] { grid-template: auto / repeat(2, minmax(0, 1fr)); grid-template-areas: none; } .draw2-asset-builder-compass[data-direction-mode="CUSTOM"] { grid-template: auto / repeat(auto-fit, minmax(84px, 1fr)); grid-template-areas: none; } .draw2-asset-builder-compass[data-direction-mode="1"] .draw2-asset-builder-compass-slot, .draw2-asset-builder-compass[data-direction-mode="2"] .draw2-asset-builder-compass-slot, .draw2-asset-builder-compass[data-direction-mode="CUSTOM"] .draw2-asset-builder-compass-slot { grid-area: auto; } .draw2-asset-builder-compass-slot::before { grid-area: 1 / 1 / -1 / -1; justify-self: center; color: color-mix(in srgb, #67d59b 24%, transparent); content: ""; pointer-events: none; } .draw2-asset-builder-compass-slot:hover, .draw2-asset-builder-compass-slot:focus-visible, .draw2-asset-builder-compass-slot[aria-selected="true"] { border-color: #67d59b; background: color-mix(in srgb, #67d59b 18%, var(--draw2-surface-input)); color: var(--draw2-text-strong); } .draw2-asset-builder-compass-slot[data-filled="true"] { border-color: color-mix(in srgb, #67d59b 68%, var(--draw2-border-subtle)); } .draw2-asset-builder-compass-slot b { grid-row: 1 / -1; color: #9fe1bb; font-size: 1rem; line-height: 1; } .draw2-asset-builder-compass-slot span, .draw2-asset-builder-compass-slot small { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; } .draw2-asset-builder-compass-slot span { font-size: 0.56rem; font-weight: 800; } .draw2-asset-builder-compass-slot small { color: var(--draw2-text-muted); font-size: 0.46rem; } .draw2-asset-builder-compass-actions { justify-content: space-between; } .draw2-asset-builder-compass-actions > span { color: var(--draw2-text-muted); font-size: 0.48rem; } .draw2-asset-builder-custom-direction { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 5px 0; } .draw2-asset-builder-custom-direction[hidden] { display: none; } .draw2-asset-builder-custom-direction input { box-sizing: border-box; flex: 1 1 120px; min-width: 0; min-height: 28px; padding: 0 6px; border: 1px solid var(--draw2-border-subtle); border-radius: 3px; background: var(--draw2-surface-input); color: var(--draw2-text-strong); font-size: 0.55rem; } .draw2-asset-builder-custom-direction .draw2-button { min-height: 28px; padding-inline: 7px; font-size: 0.55rem; white-space: nowrap; } .draw2-asset-builder-frame-editor { display: grid; gap: 5px; padding-top: 5px; border-top: 1px solid var(--draw2-border-subtle); } .draw2-asset-builder-frame-editor-strip { min-height: 32px; padding: 2px 0; } .draw2-asset-builder-frame-editor-strip:empty::before { display: block; padding: 7px; border: 1px dashed var(--draw2-border-subtle); border-radius: 3px; color: var(--draw2-text-muted); content: "向きを選ぶとフレームが並びます"; font-size: 0.5rem; text-align: center; } .draw2-asset-builder-frame-actions { align-items: center; } .draw2-asset-builder-duration { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; color: var(--draw2-text-muted); font-size: 0.5rem; white-space: nowrap; } .draw2-asset-builder-loop { display: inline-flex; align-items: center; gap: 3px; color: var(--draw2-text-muted); font-size: 0.5rem; white-space: nowrap; } .draw2-asset-builder-duration input { box-sizing: border-box; width: 52px; min-height: 27px; padding: 0 4px; border: 1px solid var(--draw2-border-subtle); border-radius: 3px; background: var(--draw2-surface-input); color: var(--draw2-text-strong); font-size: 0.55rem; } .draw2-asset-builder-loop select { min-height: 27px; padding: 0 4px; border: 1px solid var(--draw2-border-subtle); border-radius: 3px; background: var(--draw2-surface-input); color: var(--draw2-text-strong); font-size: 0.55rem; } .draw2-asset-builder-matrix-details { min-width: 0; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: color-mix(in srgb, var(--draw2-surface-input) 58%, transparent); } .draw2-asset-builder-matrix-details > summary { padding: 6px 7px; color: var(--draw2-text-muted); cursor: pointer; font-size: 0.52rem; font-weight: 800; } .draw2-asset-builder-matrix-details[open] > summary { border-bottom: 1px solid var(--draw2-border-subtle); color: var(--draw2-text-strong); } .draw2-asset-builder-matrix-details > .draw2-asset-builder-matrix { margin: 7px; } @media (min-width: 1120px) { .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] { --draw2-audio-right-width: clamp(320px, 27vw, 390px); grid-template-columns: minmax(0, 1fr) var(--draw2-audio-right-width) !important; grid-template-rows: 64px minmax(0, 1fr) clamp(230px, 29dvh, 300px) var( --draw2-statusbar-height ) !important; grid-template-areas: "top top" "canvas right" "timeline timeline" "status status" !important; background: #0c1018; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-topbar { position: relative !important; display: block !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; padding: 0 !important; overflow: visible !important; border-bottom: 1px solid color-mix(in srgb, #61d9ff 48%, var(--draw2-border)); background: linear-gradient(180deg, #171d29, #10151f); } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-global-row { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; height: 64px !important; min-height: 64px !important; padding: 0 8px !important; gap: 8px !important; overflow: visible !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-brand { position: relative !important; z-index: 4 !important; flex: 0 0 138px !important; width: 138px !important; min-width: 138px !important; overflow: hidden !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-brand strong { display: inline !important; overflow: hidden; color: var(--draw2-text-strong); text-overflow: ellipsis; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-menu-bar, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-project-slot, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-context-row { display: none !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-creator-mode-bar { position: absolute !important; z-index: 3 !important; top: 12px !important; left: 150px !important; display: flex !important; width: 228px !important; height: 40px !important; min-height: 40px !important; padding: 3px !important; gap: 3px !important; overflow: hidden !important; border: 1px solid color-mix(in srgb, #61d9ff 38%, var(--draw2-border)); border-radius: 7px; background: #0d131d; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-creator-mode-bar .draw2-creator-mode { flex: 1 1 0 !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; padding-inline: 6px !important; border-radius: 4px !important; font-size: 0.62rem !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-creator-mode-bar .draw2-creator-mode svg { display: none !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar { position: absolute !important; z-index: 4 !important; top: 12px !important; right: 8px !important; display: flex !important; width: 190px !important; height: 40px !important; min-height: 40px !important; padding: 3px !important; gap: 3px !important; overflow: hidden !important; border: 1px solid var(--draw2-border); border-radius: 7px; background: #0d131d; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > [data-workspace-command="panel-export"], .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > [data-mode-playback], .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > [data-workspace-command="command-palette"], .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > .draw2-zoom-readout, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > .draw2-theme-control, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > .draw2-language-control, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > [data-workspace-command="kill-switch"] { display: none !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > [data-workspace-command="undo"], .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > [data-workspace-command="redo"] { display: inline-flex !important; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > [data-workspace-command="undo"] span, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > [data-workspace-command="redo"] span { display: none !important; } .draw2-audio-global-controls { position: absolute; z-index: 2; top: 12px; right: 208px; left: 390px; display: flex; align-items: center; gap: 4px; height: 40px; min-width: 0; padding: 3px 5px; overflow: hidden; border: 1px solid color-mix(in srgb, #61d9ff 38%, var(--draw2-border)); border-radius: 7px; background: #0d131d; } #draw2AudioGlobalControls[hidden] { display: none !important; } .draw2-audio-global-button { flex: 0 0 32px; width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; border: 1px solid var(--draw2-border); border-radius: 4px; background: #171f2c; color: var(--draw2-text-strong); cursor: pointer; font-size: 0.9rem; line-height: 1; } .draw2-audio-global-button:hover, .draw2-audio-global-button:focus-visible, .draw2-audio-global-button.is-active { border-color: #c88bff; background: color-mix(in srgb, #c88bff 22%, #171f2c); } .draw2-audio-global-button.is-primary { border-color: #c88bff; color: #efdfff; } .draw2-audio-global-button.is-record { color: #ff9292; } .draw2-audio-global-field { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; color: var(--draw2-text-muted); font-size: 0.58rem; white-space: nowrap; } .draw2-audio-global-field input, .draw2-audio-global-field select { width: 56px; min-width: 56px; height: 30px; min-height: 30px; padding: 0 4px; border: 1px solid var(--draw2-border); border-radius: 4px; background: #141b27; color: var(--draw2-text-strong); font-size: 0.68rem; } .draw2-audio-global-readout { min-width: 90px; margin-left: auto; color: var(--draw2-text-muted); font-size: 0.62rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .draw2-audio-global-save { flex: 0 0 auto; min-width: 82px; color: #8fe5b2; font-size: 0.6rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-left-dock, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-context-row { display: none !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-canvas-region { position: relative !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; background: #0c1018 !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioWorkspace { position: absolute !important; inset: 8px !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid color-mix(in srgb, #61d9ff 58%, var(--draw2-border)); border-radius: 8px; background: #111722; box-shadow: 0 14px 30px rgb(0 0 0 / 24%); } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioWorkspace[hidden] { display: none !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-mini-preview { display: none !important; } .draw2-audio-editor-header { display: flex; flex: 0 0 42px; align-items: stretch; justify-content: space-between; gap: 8px; min-width: 0; border-bottom: 1px solid var(--draw2-border); background: #171e2b; } .draw2-audio-editor-tabs { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; } .draw2-audio-editor-tabs::-webkit-scrollbar { display: none; } .draw2-audio-editor-tab { flex: 0 0 84px; min-width: 84px; height: 42px; border: 0; border-right: 1px solid color-mix(in srgb, var(--draw2-border) 72%, transparent); background: transparent; color: var(--draw2-text-muted); cursor: pointer; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; } .draw2-audio-editor-tab:hover, .draw2-audio-editor-tab:focus-visible, .draw2-audio-editor-tab.is-active { background: color-mix(in srgb, #c88bff 30%, #171e2b); color: #f0ddff; } .draw2-audio-editor-context { display: flex; flex: 0 1 auto; align-items: center; gap: 8px; min-width: 0; padding: 0 10px; color: var(--draw2-text-muted); font-size: 0.62rem; } .draw2-audio-editor-context output { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-audio-editor-pin { flex: 0 0 auto; min-height: 28px; padding: 0 8px; border: 1px solid var(--draw2-border); border-radius: 4px; background: #121a27; color: var(--draw2-text-muted); cursor: pointer; font-size: 0.62rem; } .draw2-audio-editor-pin.is-active { border-color: #c88bff; color: #efdfff; } #draw2AudioWorkspace > .draw2-audio-panel, #draw2AudioWorkspace > .draw2-audio-editor-surface { flex: 1 1 auto; min-width: 0; min-height: 0; width: auto; height: auto; margin: 0; overflow: hidden; } #draw2AudioWorkspace > [hidden] { display: none !important; } .draw2-audio-editor-placeholder { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; gap: 10px; padding: 16px; overflow: auto; background: linear-gradient(145deg, #121a27, #0f141e); } .draw2-audio-wave-toolbar { display: flex; align-items: center; gap: 10px; min-height: 32px; color: var(--draw2-text-muted); font-size: 0.7rem; } .draw2-audio-wave-toolbar strong { color: var(--draw2-text-strong); font-size: 0.85rem; } .draw2-audio-wave-toolbar span { margin-right: auto; } .draw2-audio-waveform-viewport { position: relative; flex: 1 1 auto; min-height: 180px; overflow: hidden; border: 1px solid #34415a; border-radius: 5px; background: repeating-linear-gradient(90deg, #182234 0 1px, transparent 1px 42px), linear-gradient(180deg, #121b2a, #0c121d); cursor: pointer; } .draw2-audio-waveform-viewport:hover, .draw2-audio-waveform-viewport:focus-visible { border-color: #c88bff; outline: 2px solid rgb(200 139 255 / 28%); outline-offset: 1px; } .draw2-audio-waveform-line { position: relative; display: block; height: 2px; margin: 13% 6% 0; background: linear-gradient( 90deg, transparent, #75c8ff 15%, #c88bff 50%, #75c8ff 85%, transparent ); box-shadow: 0 0 9px rgb(117 200 255 / 44%); transform: skewY(-2deg); } .draw2-audio-waveform-line:nth-child(2) { margin-top: 11%; opacity: 0.55; transform: skewY(3deg); } .draw2-audio-waveform-line:nth-child(3) { margin-top: 15%; opacity: 0.32; transform: skewY(-5deg); } .draw2-audio-editor-status { margin: 0; color: var(--draw2-text-muted); font-size: 0.65rem; } .draw2-audio-draw-preview-editor { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; gap: 10px; padding: 14px; overflow: auto; background: radial-gradient(circle at 82% 8%, rgb(200 139 255 / 16%), transparent 34%), linear-gradient(145deg, #121a2a, #0d131e 78%); } .draw2-audio-draw-preview-toolbar { display: flex; align-items: center; gap: 9px; min-height: 32px; color: var(--draw2-text-muted); font-size: 0.66rem; } .draw2-audio-draw-preview-toolbar strong { color: #f1e1ff; font-size: 0.86rem; letter-spacing: 0.02em; } .draw2-audio-draw-preview-toolbar span { min-width: 0; margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-audio-draw-preview-toolbar button { min-height: 28px; padding: 4px 9px; border: 1px solid #4f6080; border-radius: 5px; background: #18243a; color: var(--draw2-text-strong); cursor: pointer; font: inherit; } .draw2-audio-draw-preview-toolbar button:hover, .draw2-audio-draw-preview-toolbar button:focus-visible, .draw2-audio-draw-preview-toolbar button.is-active { border-color: #c88bff; background: color-mix(in srgb, #c88bff 24%, #18243a); color: #ffffff; outline: none; } .draw2-audio-draw-preview-stage { position: relative; display: grid; flex: 1 1 auto; min-height: 220px; place-items: center; overflow: hidden; border: 1px solid #3b4b68; border-radius: 8px; background: repeating-linear-gradient(0deg, rgb(255 255 255 / 3%) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgb(255 255 255 / 3%) 0 1px, transparent 1px 24px), #090e17; box-shadow: inset 0 0 30px rgb(0 0 0 / 34%); } #draw2AudioDrawPreviewCanvas { display: block; width: min(68%, 520px); height: auto; max-width: 82%; max-height: 82%; border: 1px solid rgb(200 139 255 / 55%); border-radius: 4px; background: #0b0e14; box-shadow: 0 0 22px rgb(97 217 255 / 16%), 0 12px 28px rgb(0 0 0 / 34%); image-rendering: pixelated; } .draw2-audio-draw-preview-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 48px rgb(0 0 0 / 34%); } .draw2-audio-draw-preview-playhead { position: absolute; top: 12px; bottom: 12px; left: 50%; width: 2px; border-radius: 99px; background: linear-gradient(180deg, transparent, #c88bff, transparent); box-shadow: 0 0 12px rgb(200 139 255 / 75%); opacity: 0.65; pointer-events: none; } .draw2-audio-draw-preview-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--draw2-text-muted); font-size: 0.62rem; font-variant-numeric: tabular-nums; } .draw2-audio-draw-preview-meta output { color: #eedcff; font-weight: 800; } .draw2-audio-draw-preview-meta p { margin: 0; } .draw2-audio-drum-grid { display: grid; grid-template-columns: 112px repeat(16, minmax(30px, 1fr)); grid-auto-rows: 28px; gap: 3px; min-height: 0; min-width: max-content; padding: 8px; overflow: auto; border: 1px solid #34415a; border-radius: 5px; background: #111827; } .draw2-audio-drum-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; } .draw2-audio-drum-kit-control { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: var(--draw2-text-muted); font-size: 0.62rem; white-space: nowrap; } .draw2-audio-drum-kit-control select { min-height: 28px; max-width: 150px; padding: 3px 24px 3px 7px; border: 1px solid #596681; border-radius: 5px; background: #1b263b; color: var(--draw2-text); font: inherit; } .draw2-audio-drum-kit-control select:focus-visible { outline: 2px solid rgb(200 139 255 / 55%); outline-offset: 1px; } .draw2-audio-drum-help { margin: 0; color: var(--draw2-text-muted); font-size: 0.6rem; } .draw2-audio-drum-label { display: flex; align-items: center; padding-inline: 8px; border-radius: 3px; background: #202c40; color: var(--draw2-text-muted); font-size: 0.62rem; } .draw2-audio-drum-step { min-width: 30px; min-height: 28px; padding: 0; border: 1px solid #2d3b56; border-radius: 4px; background: #192338; color: transparent; cursor: pointer; touch-action: none; user-select: none; } .draw2-audio-drum-step:nth-of-type(4n+2), .draw2-audio-drum-step:nth-of-type(4n+3), .draw2-audio-drum-step:nth-of-type(4n+4), .draw2-audio-drum-step:nth-of-type(4n+5) { border-left-color: #43516d; } .draw2-audio-drum-step.is-bar-start, .draw2-audio-drum-step-label.is-bar { border-left-color: #91a8d2; box-shadow: inset 2px 0 0 rgb(145 168 210 / 42%); } .draw2-audio-drum-step.is-beat, .draw2-audio-drum-step-label.is-beat { border-left-color: #687caa; } .draw2-audio-drum-step-label.is-bar, .draw2-audio-drum-step-label.is-beat { background: linear-gradient(180deg, #273652, #1a263b); color: #c6d4f3; font-weight: 800; } .draw2-audio-drum-step:hover, .draw2-audio-drum-step:focus-visible { border-color: #d5a7ff; outline: 2px solid rgb(200 139 255 / 34%); outline-offset: 1px; } .draw2-audio-drum-step.is-active { border-color: #ffd08a; background: linear-gradient(180deg, #ffbf72, #cc704a); box-shadow: 0 0 8px rgb(255 191 114 / 30%); } .draw2-audio-drum-step-label { display: flex; align-items: center; justify-content: center; color: var(--draw2-text-muted); font-size: 0.58rem; font-variant-numeric: tabular-nums; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2WorkspaceRightDock { display: flex !important; min-width: 0 !important; width: auto !important; padding: 8px 8px 8px 0 !important; overflow: hidden !important; border-left: 0 !important; background: transparent !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2WorkspaceRightDock > *:not(#draw2AudioRightDock) { display: none !important; } #draw2AudioRightDock { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid color-mix(in srgb, #61d9ff 58%, var(--draw2-border)); border-radius: 8px; background: #111722; box-shadow: 0 14px 30px rgb(0 0 0 / 24%); } #draw2AudioRightDock[hidden] { display: none !important; } .draw2-audio-right-tabs { display: grid; flex: 0 0 42px; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 42px; border-bottom: 1px solid var(--draw2-border); background: #171e2b; } .draw2-audio-right-tab { min-width: 0; min-height: 42px; border: 0; border-right: 1px solid color-mix(in srgb, var(--draw2-border) 72%, transparent); background: transparent; color: var(--draw2-text-muted); cursor: pointer; font-size: 0.64rem; font-weight: 800; } .draw2-audio-right-tab:hover, .draw2-audio-right-tab:focus-visible, .draw2-audio-right-tab.is-active { background: color-mix(in srgb, #c88bff 30%, #171e2b); color: #f0ddff; } .draw2-audio-right-surface { flex: 1 1 auto; min-width: 0; min-height: 0; padding: 12px; overflow: auto; background: linear-gradient(145deg, #121a27, #0f141e); } .draw2-audio-right-surface[hidden] { display: none !important; } .draw2-audio-right-heading { display: grid; gap: 3px; margin-bottom: 12px; } .draw2-audio-right-heading strong { overflow: hidden; color: var(--draw2-text-strong); font-size: 0.86rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-audio-inspector-controls { display: grid; gap: 10px; } .draw2-audio-inspector-controls label, .draw2-audio-master-gain { display: grid; gap: 4px; color: var(--draw2-text-muted); font-size: 0.62rem; } .draw2-audio-inspector-controls input, .draw2-audio-master-gain input { width: 100%; accent-color: #c88bff; } .draw2-audio-right-chip-row { display: flex; gap: 5px; margin-top: 12px; } .draw2-audio-right-chip { width: 32px; height: 28px; border: 1px solid var(--draw2-border); border-radius: 4px; background: #182235; color: var(--draw2-text-muted); cursor: pointer; font-size: 0.65rem; font-weight: 800; } .draw2-audio-right-chip:hover, .draw2-audio-right-chip:focus-visible { border-color: #c88bff; color: #f0ddff; } .draw2-audio-right-status { margin: 12px 0; color: var(--draw2-text-muted); font-size: 0.65rem; line-height: 1.45; } .draw2-audio-right-section { display: grid; gap: 6px; color: var(--draw2-text-muted); font-size: 0.62rem; } .draw2-audio-right-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .draw2-audio-right-list li { display: flex; align-items: center; justify-content: space-between; min-height: 28px; padding: 0 8px; border: 1px solid #2a3850; border-radius: 4px; background: #182235; color: var(--draw2-text-strong); font-size: 0.65rem; } .draw2-audio-right-list b { color: #7de3b1; } .draw2-audio-browser-search { display: grid; gap: 4px; margin-bottom: 10px; color: var(--draw2-text-muted); font-size: 0.62rem; } .draw2-audio-browser-search input { min-height: 32px; padding: 0 8px; border: 1px solid var(--draw2-border); border-radius: 4px; background: #0d1420; color: var(--draw2-text-strong); } .draw2-audio-browser-tree { display: grid; gap: 3px; margin-bottom: 12px; } .draw2-audio-browser-tree button { min-height: 28px; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; color: var(--draw2-text-muted); text-align: left; cursor: pointer; font-size: 0.67rem; } .draw2-audio-browser-tree button:hover, .draw2-audio-browser-tree button:focus-visible { background: #1d2a40; color: var(--draw2-text-strong); } .draw2-audio-master-meter { display: grid; grid-template-columns: 14px 14px minmax(0, 1fr); align-items: end; gap: 5px; min-height: 130px; padding: 10px; border: 1px solid #2a3850; border-radius: 5px; background: #0c121c; } .draw2-audio-meter-bar { display: flex; align-items: end; height: 108px; overflow: hidden; border-radius: 2px; background: #1d2a38; } .draw2-audio-meter-bar i { display: block; width: 100%; height: 72%; background: linear-gradient( 180deg, #f07878 0 10%, #f2ca6a 10% 35%, #66df88 35% ); } .draw2-audio-master-meter output { align-self: start; color: var(--draw2-text-muted); font-size: 0.62rem; } .draw2-audio-master-readouts { display: grid; gap: 4px; margin: 10px 0 14px; color: var(--draw2-text-muted); font-size: 0.62rem; } .draw2-audio-master-readouts span { display: flex; justify-content: space-between; } .draw2-audio-master-readouts b { color: var(--draw2-text-strong); font-variant-numeric: tabular-nums; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-mode-timeline-deck-heading { display: none !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-mode-timeline-deck-tabs { flex: 0 0 34px !important; min-height: 34px !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-mode-timeline-deck-tab { min-width: 92px !important; min-height: 34px !important; height: 34px !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-mode-timeline-deck-tab[data-audio-secondary-tab="true"] { display: none !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioDeckPlay, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioRecordArm, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioRecord, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioRecordCancel, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioChipPlay, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioLoopToggle, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioDeckSave { display: none !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioDeckAddClip { display: none !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2ModeDeckAudio { gap: 4px !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2ModeDeckAudio > .draw2-mode-deck-toolbar { flex: 0 0 30px !important; min-height: 30px !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2ModeDeckAudio > .draw2-audio-timebase { display: none !important; } } @media (prefers-reduced-motion: reduce) { .draw2-workspace-right-dock, .draw2-workspace-frame * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } * { box-sizing: border-box; } body { margin: 0; min-width: 320px; background: var(--draw2-bg); color: var(--draw2-text); } button, input, select { font: inherit; } button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--draw2-focus); outline-offset: 3px; } .draw2-shell { width: min(1180px, 100%); margin: 0 auto; } .draw2-header, .draw2-card-heading, .draw2-controls, .draw2-workspace { display: flex; gap: 20px; } .draw2-header { align-items: flex-start; justify-content: space-between; padding: 18px 0 28px; } .draw2-header h1, .draw2-card h2 { margin: 0; letter-spacing: -0.03em; } .draw2-header h1 { font-size: clamp(1.8rem, 5vw, 3.4rem); } .draw2-card h2 { font-size: 1.1rem; } .draw2-description, .draw2-help { color: var(--draw2-muted); line-height: 1.6; } .draw2-description { max-width: 640px; margin-bottom: 0; } .draw2-eyebrow { color: var(--draw2-accent); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; margin: 0 0 8px; } .draw2-badge { border: 1px solid var(--draw2-border); color: var(--draw2-muted); border-radius: 999px; padding: 8px 12px; white-space: nowrap; font-size: 0.8rem; } .draw2-card { background: var(--draw2-surface); border: 1px solid var(--draw2-border); border-radius: 18px; padding: 20px; } .draw2-selection-card { margin-top: 20px; } .draw2-advanced-card { margin-top: 20px; } .draw2-timeline-card { margin-top: 20px; } .draw2-card-heading { justify-content: space-between; align-items: flex-start; width: 100%; } .draw2-status, .draw2-metrics { margin: 0; color: var(--draw2-muted); font-size: 0.8rem; text-align: right; } .draw2-status[data-state="error"] { color: var(--draw2-danger); } .draw2-controls { align-items: end; flex-wrap: wrap; margin-top: 18px; } .draw2-controls label { display: grid; gap: 7px; color: var(--draw2-muted); font-size: 0.8rem; } .draw2-controls input, .draw2-controls select { min-height: 42px; min-width: 220px; padding: 0 12px; border: 1px solid var(--draw2-border); border-radius: 10px; background: var(--draw2-surface-raised); color: var(--draw2-text); } .draw2-button { min-height: 42px; border: 0; border-radius: 10px; padding: 0 16px; background: var(--draw2-accent); color: #0c2422; font-weight: 800; cursor: pointer; } .draw2-button:disabled { cursor: not-allowed; opacity: 0.45; } .draw2-button-secondary { border: 1px solid var(--draw2-border); background: var(--draw2-surface-raised); color: var(--draw2-text); } .draw2-transform-grid { display: grid; grid-template-columns: repeat(9, minmax(72px, 1fr)); gap: 10px; margin-top: 18px; } .draw2-transform-grid label { display: grid; gap: 6px; color: var(--draw2-muted); font-size: 0.75rem; } .draw2-transform-grid input, .draw2-transform-grid select { min-width: 0; min-height: 38px; padding: 0 8px; border: 1px solid var(--draw2-border); border-radius: 8px; background: var(--draw2-surface-raised); color: var(--draw2-text); } .draw2-action-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .draw2-action-row .draw2-button { min-height: 38px; padding: 0 11px; font-size: 0.8rem; } .draw2-file-input { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 11px; border: 1px solid var(--draw2-border); border-radius: 10px; background: var(--draw2-surface-raised); color: var(--draw2-text); font-size: 0.8rem; font-weight: 700; } .draw2-file-input input { max-width: 220px; color: var(--draw2-muted); font-size: 0.75rem; } .draw2-timeline-viewport { position: relative; width: 100%; max-height: 300px; margin-top: 18px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--draw2-border); border-radius: 12px; background: #0b0e14; touch-action: pan-x pan-y; } .draw2-timeline-spacer { position: relative; min-width: 220px; min-height: 76px; } .draw2-timeline-window { position: absolute; inset: 0; min-width: 220px; min-height: 76px; } .draw2-timeline-row { position: absolute; left: 0; height: 38px; min-width: 100%; } .draw2-timeline-row-label { position: absolute; left: 0; top: 0; z-index: 1; display: flex; align-items: center; width: 148px; height: 38px; padding: 0 10px; overflow: hidden; border-right: 1px solid var(--draw2-border); background: var(--draw2-surface-raised); color: var(--draw2-muted); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-timeline-cell { position: absolute; top: 3px; width: 44px; min-height: 32px; padding: 0 4px; overflow: hidden; border: 1px solid var(--draw2-border); border-radius: 7px; background: var(--draw2-surface); color: var(--draw2-text); font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-timeline-cell[aria-selected="true"] { border-color: var(--draw2-focus); box-shadow: 0 0 0 2px color-mix(in srgb, var(--draw2-focus) 45%, transparent); } .draw2-timeline-cell[data-empty="true"] { color: var(--draw2-muted); background: repeating-linear-gradient( 135deg, var(--draw2-surface) 0 5px, var(--draw2-surface-raised) 5px 10px ); } .draw2-workspace { align-items: stretch; margin-top: 20px; } .draw2-canvas-card { min-width: 0; flex: 1 1 680px; background: var(--draw2-surface); border: 1px solid var(--draw2-border); border-radius: 18px; padding: 20px; } .draw2-palette { flex: 0 1 300px; } .draw2-viewport-wrap { position: relative; display: grid; place-items: center; margin-top: 18px; padding: 16px; background: #0b0e14; border: 1px solid var(--draw2-border); border-radius: 12px; } .draw2-viewport-center-button { position: absolute; z-index: 10; left: 10px; bottom: 10px; min-height: 32px; padding: 5px 9px; background: color-mix( in srgb, var(--draw2-surface-raised) 90%, var(--draw2-accent-strong) ); box-shadow: 0 2px 8px rgb(0 0 0 / 32%); } .draw2-viewport-center-button:hover, .draw2-viewport-center-button:focus-visible { border-color: var(--draw2-focus); outline: 2px solid color-mix(in srgb, var(--draw2-focus) 44%, transparent); outline-offset: 1px; } .draw2-canvas-stack { position: relative; width: min(100%, 620px); aspect-ratio: 1; } #draw2Canvas, #draw2Overlay { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: crisp-edges; image-rendering: pixelated; display: block; } #draw2Canvas { z-index: 0; cursor: crosshair; touch-action: none; background-color: var(--draw2-canvas-checker-a); background-image: repeating-conic-gradient( var(--draw2-canvas-checker-a) 0 25%, var(--draw2-canvas-checker-b) 0 50% ); background-position: 0 0; background-size: calc( var( --draw2-checker-cell-size-display-x, var(--draw2-checker-cell-size-display, var(--draw2-checker-cell-size)) ) * 2 ) calc( var( --draw2-checker-cell-size-display-y, var(--draw2-checker-cell-size-display, var(--draw2-checker-cell-size)) ) * 2 ); } #draw2Overlay { z-index: 3; pointer-events: none; } #draw2SelectionOverlay { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; pointer-events: none; shape-rendering: crispEdges; } #draw2SelectionOverlay[hidden] { display: none; } .draw2-selection-path { fill: none; stroke-width: 1px; stroke-linecap: butt; stroke-linejoin: miter; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; animation: draw2-selection-ants 420ms steps(8, end) infinite; } .draw2-selection-path--dark { stroke: rgba(12, 16, 24, 0.96); stroke-width: 1px; } .draw2-selection-path--light { stroke: rgba(255, 255, 255, 0.96); animation-delay: -210ms; } .draw2-selection-path--preview.draw2-selection-path--dark { stroke: rgba(20, 46, 52, 0.96); } .draw2-selection-path--preview.draw2-selection-path--light { stroke: rgba(138, 227, 210, 0.96); } .draw2-selection-path--draft.draw2-selection-path--dark { stroke: rgba(72, 53, 12, 0.96); } .draw2-selection-path--draft.draw2-selection-path--light { stroke: rgba(248, 212, 119, 0.98); } .draw2-selection-path--pending.draw2-selection-path--dark { stroke: rgba(42, 24, 54, 0.96); } .draw2-selection-path--pending.draw2-selection-path--light { stroke: rgba(218, 160, 255, 0.98); } @keyframes draw2-selection-ants { to { stroke-dashoffset: -8px; } } @media (prefers-reduced-motion: reduce) { .draw2-selection-path { animation: none; } } .draw2-shortcuts-dialog { width: min(620px, calc(100vw - 2rem)); } .draw2-shortcut-list { display: grid; gap: 1px; max-height: min(60vh, 520px); overflow: auto; border: 1px solid var(--draw2-border-subtle); background: var(--draw2-border-subtle); } .draw2-shortcut-category { padding: 0.55rem 0.7rem 0.35rem; background: var(--draw2-surface-raised); color: var(--draw2-accent); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .draw2-shortcut-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; min-height: 2.25rem; padding: 0.35rem 0.7rem; background: var(--draw2-surface); } .draw2-shortcut-row[hidden] { display: none; } .draw2-shortcut-label { min-width: 0; overflow: hidden; color: var(--draw2-text-strong); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-shortcut-keys { display: inline-flex; gap: 0.25rem; align-items: center; color: var(--draw2-text-strong); font-size: 0.68rem; font-weight: 800; } .draw2-shortcut-keys kbd { min-width: 1.65rem; padding: 0.2rem 0.35rem; border: 1px solid var(--draw2-border-strong); border-bottom-width: 2px; border-radius: 3px; background: var(--draw2-surface-raised); text-align: center; } .draw2-pixel-grid-svg { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; display: block; overflow: hidden; pointer-events: none; shape-rendering: crispEdges; } .draw2-pixel-grid-svg[hidden] { display: none; } .draw2-pixel-grid-path { fill: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-width: 1; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; } .draw2-pixel-grid-path--minor { opacity: var(--draw2-grid-opacity, 0.04); stroke: var(--draw2-grid-minor); } .draw2-pixel-grid-path--major { opacity: var(--draw2-grid-major-opacity, 0.12); stroke: var(--draw2-grid-major); } .draw2-tilemap-grid-svg { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; pointer-events: none; shape-rendering: crispEdges; } .draw2-tilemap-grid-svg[hidden] { display: none; } .draw2-tilemap-grid-path { fill: none; stroke-linecap: butt; stroke-linejoin: miter; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; } .draw2-tilemap-grid-path--minor { stroke: var(--draw2-accent-strong, #8ae3d2); stroke-width: 1; opacity: 0.34; } .draw2-tilemap-grid-path--major { stroke: var(--draw2-accent-strong, #8ae3d2); stroke-width: 1.5; opacity: 0.72; } .draw2-help { margin: 14px 0 0; font-size: 0.85rem; } .draw2-advanced-boundaries { display: grid; gap: 6px; margin: 16px 0 0; padding-left: 1.2rem; color: var(--draw2-muted); font-size: 0.78rem; line-height: 1.5; } .draw2-runtime-preview-viewport { display: grid; place-items: center; min-height: 7rem; margin-top: 14px; padding: 1rem; border: 1px solid var(--draw2-border); border-radius: 12px; background: #0b0e14; } .draw2-runtime-preview-viewport canvas { width: min(100%, 32rem); height: auto; image-rendering: pixelated; border-radius: 6px; box-shadow: 0 0.4rem 1.2rem rgb(0 0 0 / 24%); } .draw2-color-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .draw2-color { width: 44px; height: 44px; border: 3px solid transparent; border-radius: 10px; cursor: pointer; } .draw2-color[aria-pressed="true"] { border-color: var(--draw2-focus); } .draw2-color.is-transparent { background: repeating-conic-gradient(#d9dce2 0 25%, #aab2bf 0 50%) 50% / 10px 10px; } .draw2-color.is-white { background: #fff; } .draw2-color.is-red { background: #ff4d4d; } .draw2-color.is-blue { background: #4da6ff; } .draw2-contract-list { display: grid; gap: 14px; margin-top: 28px; } .draw2-contract-list div { border-top: 1px solid var(--draw2-border); padding-top: 12px; } .draw2-contract-list dt { color: var(--draw2-muted); font-size: 0.75rem; } .draw2-contract-list dd { margin: 4px 0 0; line-height: 1.4; } .draw2-audio-editor-tab { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-items: center; gap: 0 5px; padding: 4px 8px; text-align: left; } .draw2-audio-editor-icon { display: grid; grid-row: 1 / -1; width: 21px; height: 21px; place-items: center; border: 1px solid color-mix(in srgb, #c88bff 46%, var(--draw2-border)); border-radius: 5px; background: color-mix(in srgb, #c88bff 16%, #101725); color: #f0ddff; font-size: 0.9rem; line-height: 1; } .draw2-audio-editor-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-audio-editor-tab small { overflow: hidden; color: var(--draw2-text-muted); font-size: 0.44rem; font-weight: 600; letter-spacing: 0.08em; text-overflow: ellipsis; white-space: nowrap; } .draw2-audio-editor-tab.is-active .draw2-audio-editor-icon { border-color: #e3b8ff; background: color-mix(in srgb, #c88bff 40%, #171e2b); box-shadow: 0 0 12px rgb(200 139 255 / 20%); } .draw2-audio-track-lane-label { position: relative; overflow: hidden; } .draw2-audio-track-icon { display: grid; flex: 0 0 18px; width: 18px; height: 18px; place-items: center; border: 1px solid color-mix(in srgb, currentColor 42%, transparent); border-radius: 4px; background: color-mix(in srgb, currentColor 15%, transparent); color: #d6c2ff; font-size: 0.72rem; line-height: 1; } .draw2-audio-track-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-audio-track-lane-label[data-audio-track-kind="MUSIC"], .draw2-audio-track-lane-label[data-audio-track-kind="BGM"] { color: #d8b3ff; } .draw2-audio-track-lane-label[data-audio-track-kind="EFFECT"], .draw2-audio-track-lane-label[data-audio-track-kind="SFX"] { color: #ffc07d; } .draw2-audio-track-lane-label[data-audio-track-kind="VOICE"] { color: #92e6c5; } .draw2-audio-track-lane-label[data-audio-track-kind="MIDI"] { color: #e5ccff; } .draw2-audio-track-lane-cell.is-waveform { position: relative; overflow: hidden; border-color: color-mix(in srgb, #9ec8ff 38%, var(--draw2-border-subtle)); background: linear-gradient( 180deg, color-mix(in srgb, #5c92dd 31%, var(--draw2-surface-raised)), color-mix(in srgb, #294d82 22%, var(--draw2-surface-raised)) ); color: transparent; } .draw2-audio-track-lane-cell.is-waveform::before { position: absolute; inset: 24% 5%; content: ""; border-top: 1px solid rgb(225 239 255 / 54%); border-bottom: 1px solid rgb(225 239 255 / 32%); background: repeating-linear-gradient( 90deg, rgb(214 235 255 / 68%) 0 1px, transparent 1px 4px, rgb(214 235 255 / 42%) 4px 6px, transparent 6px 9px ); opacity: 0.9; transform: skewY(-4deg); } .draw2-audio-track-lane-cell.is-waveform:hover::before, .draw2-audio-track-lane-cell.is-waveform:focus-visible::before { opacity: 1; filter: drop-shadow(0 0 3px rgb(182 217 255 / 54%)); } .draw2-audio-instrument-lane .draw2-audio-track-lane-cell.is-note-continued::after { position: absolute; right: -1px; left: -1px; height: 5px; content: ""; border-top: 2px solid color-mix(in srgb, #d8b3ff 78%, transparent); background: color-mix(in srgb, #c88bff 38%, transparent); } .draw2-audio-control-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .draw2-audio-control-heading output { color: var(--draw2-text-strong); font-variant-numeric: tabular-nums; } .draw2-audio-knob-field { position: relative; min-height: 86px; } .draw2-audio-knob { position: relative; display: block; width: 58px; height: 58px; margin: 1px auto 0; border: 1px solid #455775; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #2b3850 0 38%, transparent 39%), conic-gradient( from 225deg, #c88bff 0 25%, #5f7192 25% 75%, #27364d 75% 100% ); box-shadow: inset 0 0 0 4px #121a27, 0 5px 12px rgb(0 0 0 / 24%); transform: rotate(0deg); } .draw2-audio-knob::before { position: absolute; inset: 8px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 50%; content: ""; } .draw2-audio-knob i { position: absolute; top: 7px; left: calc(50% - 1px); width: 2px; height: 19px; border-radius: 999px; background: #f5eaff; box-shadow: 0 0 5px rgb(240 221 255 / 65%); transform: rotate(var(--draw2-knob-angle, -135deg)); transform-origin: 50% 22px; } .draw2-audio-knob-input { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; width: 100% !important; height: 58px; margin: 0; opacity: 0; cursor: grab; } .draw2-audio-knob-input:active { cursor: grabbing; } .draw2-audio-knob-field:focus-within .draw2-audio-knob { border-color: #e3b8ff; box-shadow: inset 0 0 0 4px #121a27, 0 0 0 2px rgb(200 139 255 / 30%); } .draw2-audio-browser-tree button { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 34px; border: 1px solid transparent; } .draw2-audio-browser-tree button:hover, .draw2-audio-browser-tree button:focus-visible { border-color: color-mix(in srgb, #c88bff 40%, var(--draw2-border)); } .draw2-audio-browser-icon { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 4px; background: color-mix(in srgb, #7aa7ff 20%, #111a2a); color: #cfe1ff; font-size: 0.8rem; } .draw2-audio-browser-tree button small { color: var(--draw2-text-muted); font-size: 0.44rem; letter-spacing: 0.06em; } .draw2-audio-browser-tree button.is-active { border-color: #c88bff; background: color-mix(in srgb, #c88bff 18%, #111a2a); color: #f0ddff; } .draw2-audio-browser-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 7px; width: 100%; min-height: 34px; padding: 4px 6px; border: 1px solid #2a3850; border-radius: 5px; background: #182235; color: var(--draw2-text-strong); text-align: left; cursor: pointer; font-size: 0.62rem; } .draw2-audio-browser-item:hover, .draw2-audio-browser-item:focus-visible { border-color: #c88bff; } .draw2-audio-browser-item small { color: var(--draw2-text-muted); font-size: 0.44rem; } .draw2-audio-fx-chain li, .draw2-audio-right-list li[data-audio-fx-item] { display: grid; grid-template-columns: 20px minmax(0, 1fr) repeat(4, 24px); gap: 4px; justify-content: initial; padding: 3px 5px; } .draw2-audio-fx-chain li.is-bypassed, .draw2-audio-right-list li.is-bypassed { opacity: 0.48; } .draw2-audio-fx-action, .draw2-audio-fx-add { min-width: 22px; min-height: 22px; padding: 0 4px; border: 1px solid #34425b; border-radius: 4px; background: #111a2a; color: var(--draw2-text-muted); cursor: pointer; font-size: 0.58rem; } .draw2-audio-fx-action:hover, .draw2-audio-fx-action:focus-visible, .draw2-audio-fx-add:hover, .draw2-audio-fx-add:focus-visible { border-color: #c88bff; color: #f0ddff; } .draw2-audio-fx-action:disabled { cursor: default; opacity: 0.3; } .draw2-audio-fx-params { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 7px; padding: 3px 2px 1px; } .draw2-audio-eq-editor { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(180px, 1.2fr) minmax(240px, 2fr); grid-template-rows: minmax(82px, auto) auto; gap: 7px 10px; align-items: stretch; padding: 6px 2px 2px; } .draw2-audio-eq-graph { display: block; width: 100%; min-width: 0; min-height: 82px; overflow: visible; border: 1px solid #344661; border-radius: 5px; background: linear-gradient(180deg, rgb(97 217 255 / 8%), transparent 52%), #0b1422; } .draw2-audio-eq-graph line { stroke: rgb(149 173 208 / 16%); stroke-width: 0.55; } .draw2-audio-eq-graph line.is-zero { stroke: rgb(200 139 255 / 46%); stroke-width: 0.85; } .draw2-audio-eq-graph path { fill: none; stroke: #61d9ff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; filter: drop-shadow(0 0 3px rgb(97 217 255 / 60%)); } .draw2-audio-eq-bands { display: grid; grid-template-columns: repeat(8, minmax(22px, 1fr)); grid-column: 2; grid-row: 1 / span 2; gap: 4px; min-width: 0; min-height: 108px; padding: 3px 4px 2px; border: 1px solid #2d3d58; border-radius: 5px; background: rgb(8 15 27 / 58%); } .draw2-audio-eq-band { display: grid; grid-template-rows: auto minmax(52px, 1fr) auto; justify-items: center; gap: 3px; min-width: 0; color: var(--draw2-text-muted); font-size: 0.44rem; font-variant-numeric: tabular-nums; } .draw2-audio-eq-band output { color: #e6f6ff; font: 0.42rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; } .draw2-audio-eq-band input { width: 10px; height: 100%; min-height: 54px; margin: 0; accent-color: #61d9ff; cursor: ns-resize; writing-mode: vertical-lr; direction: rtl; } .draw2-audio-eq-advanced { display: grid; grid-column: 1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 8px; min-width: 0; } .draw2-audio-eq-advanced .draw2-audio-fx-param { font-size: 0.5rem; } .draw2-audio-right-list .draw2-audio-eq-editor { grid-template-columns: 1fr; grid-template-rows: auto auto auto; } .draw2-audio-right-list .draw2-audio-eq-bands { grid-column: 1; grid-row: 2; } .draw2-audio-right-list .draw2-audio-eq-advanced { grid-column: 1; grid-row: 3; } .draw2-audio-fx-param { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 4px; color: var(--draw2-text-muted); font-size: 0.45rem; } .draw2-audio-fx-param output { color: var(--draw2-text-strong); font: 0.45rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-audio-fx-param input { grid-column: 1 / -1; width: 100%; height: 3px; accent-color: #c88bff; } .draw2-audio-fx-add { display: inline-flex; width: auto; margin: 3px 3px 0 0; align-items: center; } .draw2-audio-fx-empty { color: var(--draw2-text-muted) !important; font-size: 0.58rem !important; } #draw2AudioRightMaster { padding-bottom: 18px; } #draw2AudioRightMaster .draw2-audio-master-readouts { margin-block: 6px 8px; } #draw2AudioRightMaster .draw2-audio-right-section { gap: 4px; } #draw2AudioRightMaster .draw2-audio-right-list li { min-height: 24px; } .draw2-audio-master-meter { grid-template-columns: minmax(24px, 1fr) minmax(24px, 1fr) 32px minmax(92px, 1fr); min-height: 98px; } .draw2-audio-meter-channel { display: grid; grid-template-rows: auto minmax(0, 1fr); align-items: end; gap: 3px; min-height: 98px; } .draw2-audio-meter-channel > b { color: var(--draw2-text-muted); font-size: 0.46rem; text-align: center; } .draw2-audio-master-meter .draw2-audio-meter-bar { height: 88px; } .draw2-audio-meter-scale { display: flex; flex-direction: column; justify-content: space-between; height: 88px; color: var(--draw2-text-muted); font: 0.42rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-audio-meter-scale i { font-style: normal; } .draw2-audio-mixer-row input[type="range"] { appearance: none; height: 5px; border-radius: 999px; background: linear-gradient(90deg, #c88bff 0 50%, #26364f 50%); } .draw2-audio-mixer-row input[type="range"]::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; border: 2px solid #f0ddff; border-radius: 50%; background: #8b5bc0; } .draw2-audio-mixer-control { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 32px; align-items: center; gap: 0 4px; min-width: 70px; min-height: 42px; color: var(--draw2-text-muted); font-size: 0.46rem; letter-spacing: 0.04em; } .draw2-audio-mixer-control > output { color: var(--draw2-text-strong); font: 0.48rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; } .draw2-audio-mixer-control .draw2-audio-knob { grid-column: 1 / -1; grid-row: 2; width: 30px; height: 30px; margin: 0 auto; box-shadow: inset 0 0 0 3px #121a27, 0 3px 8px rgb(0 0 0 / 24%); } .draw2-audio-mixer-control .draw2-audio-knob::before { inset: 5px; } .draw2-audio-mixer-control .draw2-audio-knob i { top: 4px; height: 10px; transform-origin: 50% 12px; } .draw2-audio-mixer-control input[type="range"] { position: absolute; z-index: 2; inset: 17px 0 0; width: 100%; height: 30px; min-width: 0; opacity: 0; cursor: grab; } .draw2-audio-mixer-control input[type="range"]:active { cursor: grabbing; } .draw2-audio-mixer-control:focus-within .draw2-audio-knob { border-color: #e3b8ff; box-shadow: inset 0 0 0 3px #121a27, 0 0 0 2px rgb(200 139 255 / 25%); } @media (prefers-reduced-motion: reduce) { .draw2-audio-knob, .draw2-audio-track-lane-cell.is-waveform::before { transition: none !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } .draw2-workspace-frame[data-integration-fixture="populated"] .draw2-workspace-status::after { content: " · POPULATED FIXTURE"; color: var(--draw2-accent-strong); } .wp190-layer-fixture-list { display: grid; gap: var(--draw2-space-1); margin: var(--draw2-space-3) 0 0; padding: 0; list-style: none; } .wp190-layer-fixture-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--draw2-space-2); padding: var(--draw2-space-2); border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); font-size: 0.72rem; } .wp190-layer-fixture-list li span { color: var(--draw2-text-muted); font-size: 0.64rem; text-align: right; } .draw2-workspace-frame[data-integration-fixture="populated"] #draw2WorkspaceCanvasSlot .draw2-canvas-card { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--draw2-accent-strong) 24%, transparent); } .draw2-workspace-frame[data-integration-fixture="populated"] #draw2WorkspacePanelLayers .draw2-panel-summary > p { color: var(--draw2-accent-strong); } :root { --draw2-space-1: 4px; --draw2-space-2: 8px; --draw2-space-3: 12px; --draw2-space-4: 16px; --draw2-space-5: 20px; --draw2-space-6: 24px; --draw2-radius-sm: 6px; --draw2-radius-md: 10px; --draw2-radius-lg: 14px; --draw2-surface-canvas: #0b0e14; --draw2-surface-input: #222a38; --draw2-text-strong: #f7f9fc; --draw2-text-muted: #a9b4c4; --draw2-border-subtle: #374356; --draw2-border-strong: #53627a; --draw2-accent-strong: #8ae3d2; --draw2-focus-ring: #f8d477; --draw2-selection: #365e8a; --draw2-danger-strong: #ff9e9e; --draw2-warning-strong: #ffd58b; --draw2-shadow-panel: 0 18px 48px rgb(0 0 0 / 35%); --draw2-canvas-checker-a: #d9dce2; --draw2-canvas-checker-b: #b4bac5; --draw2-checker-cell-size: 16px; --draw2-grid-pixel-step: 2px; --draw2-grid-major-step: 16px; --draw2-grid-minor: rgb(27 49 71 / 72%); --draw2-grid-major: rgb(13 126 147 / 96%); } :root[data-theme="light"] { color-scheme: light; --draw2-bg: #eef1f5; --draw2-surface: #ffffff; --draw2-surface-raised: #f7f9fb; --draw2-text: #18202b; --draw2-muted: #526174; --draw2-border: #cbd4df; --draw2-surface-input: #ffffff; --draw2-text-strong: #18202b; --draw2-text-muted: #526174; --draw2-border-subtle: #cbd4df; --draw2-border-strong: #7a8ba0; --draw2-shadow-panel: 0 18px 48px rgb(38 54 72 / 18%); } :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: light) { :root[data-theme="system"] { color-scheme: light; --draw2-bg: #eef1f5; --draw2-surface: #ffffff; --draw2-surface-raised: #f7f9fb; --draw2-text: #18202b; --draw2-muted: #526174; --draw2-border: #cbd4df; --draw2-surface-input: #ffffff; --draw2-text-strong: #18202b; --draw2-text-muted: #526174; --draw2-border-subtle: #cbd4df; --draw2-border-strong: #7a8ba0; --draw2-shadow-panel: 0 18px 48px rgb(38 54 72 / 18%); } } html, body { overflow-x: hidden; } .draw2-shell:has(#draw2WorkspaceFrame) { width: min(1600px, 100%); padding-inline: var(--draw2-space-4); } .draw2-workspace-frame { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr) minmax(260px, 320px); grid-template-rows: auto minmax(430px, 1fr) minmax(180px, auto); grid-template-areas: "top top top" "left canvas right" "timeline timeline timeline"; min-height: min(1120px, calc(100dvh - 42px)); margin: 0 calc(var(--draw2-space-2) * -1) var(--draw2-space-4); overflow: hidden; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-lg); background: var(--draw2-bg); box-shadow: var(--draw2-shadow-panel); } .draw2-workspace-frame[hidden], .draw2-workspace-frame [hidden] { display: none !important; } .draw2-workspace-topbar { grid-area: top; display: grid; grid-template-columns: minmax(180px, auto) minmax(0, 1fr) auto; align-items: center; gap: var(--draw2-space-3); min-width: 0; padding: var(--draw2-space-2) var(--draw2-space-3); border-bottom: 1px solid var(--draw2-border-subtle); background: var(--draw2-surface); } .draw2-workspace-brand { display: grid; gap: var(--draw2-space-1); min-width: 0; } .draw2-workspace-brand strong { font-size: 0.94rem; letter-spacing: 0.02em; } .draw2-workspace-status { color: var(--draw2-text-muted); font-size: 0.68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .draw2-workspace-project-slot { min-width: 0; overflow: hidden; } #draw2WorkspaceProjectSlot > #draw2ProjectCard { display: block; margin: 0; padding: var(--draw2-space-2); border: 0; border-radius: var(--draw2-radius-sm); background: transparent; } #draw2WorkspaceProjectSlot #draw2ProjectHeading, #draw2WorkspaceProjectSlot .draw2-help { display: none; } #draw2WorkspaceProjectSlot > #draw2ProjectCard > .draw2-card-heading { display: none; } #draw2WorkspaceProjectSlot > #draw2ProjectCard { padding: 0; } #draw2WorkspaceProjectSlot .draw2-controls { align-items: center; flex-wrap: nowrap; gap: var(--draw2-space-2); margin: 0; } #draw2WorkspaceProjectSlot .draw2-controls label { min-width: 0; } #draw2WorkspaceProjectSlot .draw2-controls input, #draw2WorkspaceProjectSlot .draw2-controls select { min-width: 110px; width: 100%; min-height: 34px; padding: 0 var(--draw2-space-2); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); } #draw2WorkspaceProjectSlot .draw2-controls label:nth-child(2) { display: none; } #draw2WorkspaceProjectSlot .draw2-action-row { display: none; } .draw2-workspace-command-bar { display: flex; align-items: center; justify-content: flex-end; gap: var(--draw2-space-1); min-width: 0; } .draw2-icon-button, .draw2-tool-button, .draw2-panel-launcher, .draw2-panel-close { display: inline-flex; align-items: center; justify-content: center; gap: var(--draw2-space-1); min-width: 38px; min-height: 36px; padding: var(--draw2-space-1) var(--draw2-space-2); border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); color: var(--draw2-text-strong); cursor: pointer; } .draw2-icon-button span, .draw2-tool-button span, .draw2-panel-launcher span { font-size: 0.64rem; } .draw2-icon-button:hover, .draw2-tool-button:hover, .draw2-panel-launcher:hover, .draw2-panel-close:hover { border-color: var(--draw2-border-strong); } .draw2-icon-button-danger { color: var(--draw2-danger-strong); } .draw2-icon-button:focus-visible, .draw2-tool-button:focus-visible, .draw2-panel-launcher:focus-visible, .draw2-panel-close:focus-visible, .draw2-workspace-tab:focus-visible, .draw2-theme-control select:focus-visible, .draw2-language-control select:focus-visible, .draw2-command-list button:focus-visible { outline: 2px solid var(--draw2-focus-ring); outline-offset: 2px; } .draw2-theme-control { display: grid; gap: var(--draw2-space-1); color: var(--draw2-text-muted); font-size: 0.62rem; } .draw2-theme-control select { min-height: 30px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-strong); } .draw2-language-control { display: grid; gap: var(--draw2-space-1); color: var(--draw2-text-muted); font-size: 0.62rem; } .draw2-language-control select { min-height: 30px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-strong); } .draw2-workspace-left-dock { grid-area: left; display: flex; flex-direction: column; gap: var(--draw2-space-3); min-width: 0; padding: var(--draw2-space-2); border-right: 1px solid var(--draw2-border-subtle); background: var(--draw2-surface); } .draw2-workspace-toolbar, .draw2-workspace-panel-launcher { display: grid; gap: var(--draw2-space-1); } .draw2-tool-button, .draw2-panel-launcher { flex-direction: column; width: 100%; min-width: 0; padding: var(--draw2-space-2) var(--draw2-space-1); font-size: 1rem; } .draw2-tool-button.is-active, .draw2-panel-launcher.is-active { border-color: var(--draw2-accent-strong); background: color-mix( in srgb, var(--draw2-accent-strong) 16%, var(--draw2-surface-raised) ); } .draw2-workspace-canvas-region { position: relative; grid-area: canvas; min-width: 0; min-height: 0; padding: var(--draw2-space-3); background: var(--draw2-surface-canvas); } #draw2WorkspaceCanvasSlot, #draw2WorkspaceCanvasSlot > .draw2-canvas-card { height: 100%; min-height: 0; } #draw2WorkspaceCanvasSlot > .draw2-canvas-card { display: flex; flex-direction: column; padding: var(--draw2-space-3); border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-md); } #draw2WorkspaceCanvasSlot .draw2-viewport-wrap { flex: 1 1 auto; min-height: 260px; margin-top: var(--draw2-space-3); } .draw2-workspace-right-dock { grid-area: right; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--draw2-border-subtle); background: var(--draw2-surface); } .draw2-workspace-right-header { display: flex; align-items: center; justify-content: space-between; gap: var(--draw2-space-2); padding: var(--draw2-space-2) var(--draw2-space-3); border-bottom: 1px solid var(--draw2-border-subtle); } .draw2-panel-close { min-width: 32px; min-height: 32px; padding: 0; font-size: 1.1rem; } .draw2-workspace-tabs { display: flex; gap: var(--draw2-space-1); min-width: 0; padding: var(--draw2-space-2); overflow-x: auto; border-bottom: 1px solid var(--draw2-border-subtle); scrollbar-width: thin; } .draw2-workspace-tab { flex: 0 0 auto; min-height: 32px; padding: 0 var(--draw2-space-2); border: 1px solid transparent; border-radius: var(--draw2-radius-sm); background: transparent; color: var(--draw2-text-muted); cursor: pointer; } .draw2-workspace-tab.is-active { border-color: var(--draw2-border-strong); background: var(--draw2-surface-raised); color: var(--draw2-text-strong); } .draw2-workspace-panel { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--draw2-space-3); touch-action: pan-y; } .draw2-workspace-panel > .draw2-card, .draw2-workspace-panel > .draw2-palette { margin: 0; width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; } .draw2-panel-summary, .draw2-unavailable-state { display: grid; gap: var(--draw2-space-2); padding: var(--draw2-space-2); border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); } .draw2-panel-summary strong, .draw2-unavailable-state strong { font-size: 0.86rem; } .draw2-panel-summary p, .draw2-unavailable-state p { margin: 0; color: var(--draw2-text-muted); font-size: 0.76rem; line-height: 1.5; } .draw2-workspace-timeline-region { grid-area: timeline; min-width: 0; min-height: 0; padding: var(--draw2-space-2) var(--draw2-space-3) var(--draw2-space-3); border-top: 1px solid var(--draw2-border-subtle); background: var(--draw2-surface); } .draw2-workspace-timeline-heading { display: flex; align-items: center; gap: var(--draw2-space-2); min-width: 0; margin-bottom: var(--draw2-space-2); } .draw2-workspace-timeline-heading strong { font-size: 0.78rem; } .draw2-workspace-local-badge { margin-left: auto; color: var(--draw2-text-muted); font-size: 0.65rem; } #draw2WorkspaceTimelineSlot > .draw2-timeline-card { max-height: 270px; margin: 0; padding: var(--draw2-space-2); overflow: auto; border-radius: var(--draw2-radius-md); } #draw2WorkspaceTimelineSlot .draw2-timeline-viewport { max-height: 190px; margin-top: var(--draw2-space-2); } .draw2-workspace-rollback-notice { grid-area: canvas; align-self: start; justify-self: center; z-index: 2; margin: var(--draw2-space-3); padding: var(--draw2-space-2) var(--draw2-space-3); border: 1px solid var(--draw2-warning-strong); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); color: var(--draw2-warning-strong); font-size: 0.78rem; } @media (min-width: 1120px) { #draw2WorkspaceProjectSlot .draw2-controls { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(68px, 84px) auto; align-items: end; } #draw2WorkspaceProjectSlot .draw2-controls label { display: grid; min-width: 0; gap: var(--draw2-space-1); } #draw2WorkspaceProjectSlot .draw2-controls label:nth-child(2) { display: none; } #draw2WorkspaceProjectSlot .draw2-controls label:nth-child(3) { display: none; } #draw2WorkspaceProjectSlot .draw2-controls input, #draw2WorkspaceProjectSlot .draw2-controls select { min-width: 0; box-sizing: border-box; } #draw2WorkspaceProjectSlot #draw2CreateProject { min-width: 100px; padding-inline: var(--draw2-space-1); font-size: 0.7rem; white-space: nowrap; } } .draw2-command-palette { width: min(480px, calc(100vw - var(--draw2-space-6))); padding: 0; border: 1px solid var(--draw2-border-strong); border-radius: var(--draw2-radius-md); background: var(--draw2-surface); color: var(--draw2-text); box-shadow: var(--draw2-shadow-panel); } .draw2-command-palette::backdrop { background: rgb(0 0 0 / 55%); } .draw2-command-palette form { display: grid; gap: var(--draw2-space-3); padding: var(--draw2-space-4); } .draw2-command-palette-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--draw2-space-3); } .draw2-command-palette h2 { margin: 0; font-size: 1.05rem; } .draw2-command-search { display: grid; gap: var(--draw2-space-1); color: var(--draw2-text-muted); font-size: 0.74rem; } .draw2-command-search input { min-height: 38px; padding: 0 var(--draw2-space-2); border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-strong); } .draw2-command-list { display: grid; gap: var(--draw2-space-1); max-height: 300px; overflow: auto; } .draw2-command-list button { display: flex; align-items: center; justify-content: space-between; gap: var(--draw2-space-3); min-height: 38px; padding: 0 var(--draw2-space-2); border: 1px solid transparent; border-radius: var(--draw2-radius-sm); background: transparent; color: var(--draw2-text-strong); text-align: left; cursor: pointer; } .draw2-command-list button:hover { border-color: var(--draw2-border-subtle); background: var(--draw2-surface-raised); } .draw2-command-list kbd { color: var(--draw2-text-muted); font-size: 0.7rem; } .draw2-zoom-readout { display: inline-grid; place-items: center; min-width: 52px; min-height: 32px; padding-inline: var(--draw2-space-2); border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); color: var(--draw2-text-strong); font-size: 0.72rem; font-variant-numeric: tabular-nums; } .draw2-settings-grid { display: grid; gap: var(--draw2-space-3); } .draw2-settings-grid label { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--draw2-space-3); color: var(--draw2-text-muted); font-size: 0.78rem; } .draw2-settings-grid input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--draw2-accent-strong); } .draw2-settings-grid input[type="color"] { width: 42px; height: 30px; padding: 2px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); } .draw2-settings-actions { display: flex; justify-content: flex-end; gap: var(--draw2-space-2); } .draw2-tool-group { position: relative; flex: 0 0 var(--draw2-control-size); width: var(--draw2-control-size); height: var(--draw2-control-size); } .draw2-tool-group > summary { display: grid; place-items: center; width: var(--draw2-control-size); height: var(--draw2-control-size); border: 1px solid transparent; border-radius: var(--draw2-radius-sm); color: var(--draw2-text-muted); cursor: pointer; list-style: none; outline: 0; } .draw2-tool-group > summary::-webkit-details-marker { display: none; } .draw2-tool-group > summary:hover, .draw2-tool-group > summary:focus-visible, .draw2-tool-group[open] > summary, .draw2-tool-group.is-active > summary { border-color: var(--draw2-border-subtle); background: var(--draw2-surface-raised); color: var(--draw2-text-strong); } .draw2-tool-group.is-active > summary { box-shadow: inset 0 0 0 1px var(--draw2-accent-strong); } .draw2-tool-group-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .draw2-tool-popover { position: absolute; z-index: 40; top: 0; left: calc(100% + 4px); display: none; grid-template-columns: repeat(3, var(--draw2-control-size)); gap: 2px; width: max-content; padding: 3px; border: 1px solid var(--draw2-border-strong); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface); box-shadow: var(--draw2-shadow-panel); } .draw2-tool-group[open] > .draw2-tool-popover { display: grid; } #draw2WorkspaceLeftDock .draw2-tool-popover .draw2-tool-button { width: var(--draw2-control-size) !important; min-width: var(--draw2-control-size) !important; height: var(--draw2-control-size) !important; min-height: var(--draw2-control-size) !important; padding: 0; } .draw2-tool-popover .draw2-tool-button span { display: none !important; } .draw2-mini-preview[hidden] { display: none !important; } #draw2WorkspaceCanvasSlot .draw2-viewport-wrap { touch-action: none; overscroll-behavior: contain; } #draw2WorkspaceCanvasSlot .draw2-canvas-stack { transform-origin: center center; will-change: auto; } #draw2WorkspaceCanvasSlot #draw2Canvas, #draw2WorkspaceCanvasSlot #draw2Overlay { touch-action: none; } #draw2WorkspaceCanvasSlot #draw2Canvas[data-tool="pan"] { cursor: grab; } #draw2WorkspaceCanvasSlot #draw2Canvas[data-tool="pan"]:active { cursor: grabbing; } @media (min-width: 701px) { .draw2-workspace-left-dock .draw2-tool-popover { left: calc(100% + 4px); right: auto; } } .draw2-tool-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--draw2-space-2); padding: var(--draw2-space-2); border-bottom: 1px solid var(--draw2-border-subtle); } .draw2-tool-options label { display: grid; gap: 3px; min-width: 0; color: var(--draw2-text-muted); font-size: 0.64rem; } .draw2-tool-options select, .draw2-tool-options input { min-width: 0; width: 100%; } .draw2-tool-options output { color: var(--draw2-text-strong); font: 700 0.65rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-tool-studio { display: grid; gap: 14px; min-width: 0; padding: 14px; border: 1px solid color-mix(in srgb, var(--draw2-accent, #74d7ff) 30%, transparent); border-radius: 16px; background: linear-gradient(145deg, color-mix(in srgb, #18263b 88%, transparent), color-mix(in srgb, #0c1422 94%, transparent)); box-shadow: 0 14px 32px rgba(0, 0, 0, .22); } .draw2-tool-studio-header { display: flex; align-items: start; justify-content: space-between; gap: 12px; } .draw2-tool-studio-header h3 { margin: 2px 0 0; font-size: 1rem; letter-spacing: .02em; } .draw2-tool-studio-summary, .draw2-tool-studio-status { color: color-mix(in srgb, var(--draw2-accent, #74d7ff) 78%, white); font-size: .72rem; line-height: 1.35; } .draw2-tool-studio-summary { white-space: nowrap; } .draw2-tool-studio-note { margin: 0; color: color-mix(in srgb, currentColor 72%, transparent); font-size: .75rem; line-height: 1.45; } .draw2-tool-studio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; } .draw2-tool-studio-card { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 54px; padding: 8px 10px; color: inherit; text-align: left; border: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius: 11px; background: color-mix(in srgb, #111a2a 82%, transparent); cursor: pointer; } .draw2-tool-studio-card:hover, .draw2-tool-studio-card:focus-visible, .draw2-tool-studio-card.is-selected { border-color: color-mix(in srgb, var(--draw2-accent, #74d7ff) 70%, transparent); background: color-mix(in srgb, var(--draw2-accent, #74d7ff) 12%, #111a2a); outline: none; } .draw2-tool-studio-card strong, .draw2-tool-studio-card small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-tool-studio-card strong { font-size: .76rem; } .draw2-tool-studio-card small { margin-top: 2px; color: color-mix(in srgb, currentColor 62%, transparent); font-size: .65rem; } .draw2-tool-studio-glyph { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--draw2-accent, #74d7ff); background: color-mix(in srgb, var(--draw2-accent, #74d7ff) 13%, transparent); font-size: .7rem; font-weight: 800; } .draw2-tool-studio-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; } .draw2-tool-studio-options label { display: grid; gap: 5px; color: color-mix(in srgb, currentColor 72%, transparent); font-size: .7rem; } .draw2-tool-studio-options select, .draw2-tool-studio-options input { width: 100%; min-width: 0; } .draw2-tool-studio-options output { justify-self: end; margin-top: -22px; margin-right: 5px; font-variant-numeric: tabular-nums; } .draw2-tool-studio-actions { display: flex; flex-wrap: wrap; gap: 8px; } .draw2-tool-studio-actions .draw2-button { min-height: 36px; } .draw2-tool-studio-status { margin: 0; padding: 8px 10px; border-radius: 9px; background: color-mix(in srgb, #000 20%, transparent); } @media (min-width: 701px) { #draw2WorkspacePanelAdvanced:not([hidden]) { display: flex; flex-direction: column; gap: 12px; } #draw2WorkspacePanelAdvanced > #draw2ToolStudio { order: 1; } #draw2WorkspacePanelAdvanced > #draw2WorkspaceAdvancedSlot { order: 2; } } .draw2-tool-presets, .draw2-selection-morphology { display: flex; align-items: center; gap: var(--draw2-space-1); min-width: 0; } .draw2-tool-presets { grid-column: 1 / -1; } .draw2-tool-presets select, .draw2-tool-presets input { min-width: 0; flex: 1 1 auto; } .draw2-tool-presets .draw2-button, .draw2-selection-morphology .draw2-button { flex: 0 0 32px; min-height: 32px; padding: 0; } .draw2-selection-morphology { grid-column: 1 / -1; justify-content: flex-start; } .draw2-mini-preview { position: absolute; z-index: 4; top: var(--draw2-space-2); right: var(--draw2-space-2); width: 104px; height: 104px; padding: 3px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface); box-shadow: var(--draw2-shadow-panel); pointer-events: none; } .draw2-mini-preview canvas { display: block; width: 96px; height: 96px; image-rendering: pixelated; } .draw2-workspace-toolbar { overflow-y: auto; scrollbar-width: thin; } .draw2-workspace-toolbar .draw2-tool-button { flex: 0 0 var(--draw2-control-size); } .draw2-layers-toolbar { display: flex; gap: 4px; padding: 4px 6px; border-bottom: 1px solid var(--draw2-border-subtle); } .draw2-layers-toolbar .draw2-button { width: var(--draw2-control-size); min-width: var(--draw2-control-size); padding-inline: 0; } .draw2-layer-list { display: grid; gap: 2px; min-height: 0; padding: 4px; overflow: auto; } .draw2-layer-row { display: grid; grid-template-columns: 30px 30px minmax(0, 1fr) 30px 76px; align-items: center; gap: 3px; min-height: 36px; padding: 2px; border: 1px solid transparent; border-radius: var(--draw2-radius-sm); } .draw2-layer-row.is-active { border-color: var(--draw2-focus-ring); background: var(--draw2-surface-raised); } .draw2-layer-row > button { width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; border: 1px solid transparent; border-radius: var(--draw2-radius-sm); background: transparent; color: var(--draw2-text-muted); } .draw2-layer-row > button:hover, .draw2-layer-row > button:focus-visible { border-color: var(--draw2-border-subtle); color: var(--draw2-text-strong); } .draw2-layer-select { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } .draw2-layer-blend { width: 30px; min-width: 30px; height: 30px; padding: 0 2px; border: 1px solid transparent; border-radius: var(--draw2-radius-sm); background: var(--draw2-surface); color: var(--draw2-text); font-size: 0.7rem; text-align: center; } .draw2-layer-opacity { min-width: 0; width: 100%; } .draw2-timeline-rate, .draw2-timeline-loop { display: inline-flex; align-items: center; gap: 4px; min-height: var(--draw2-control-size); color: var(--draw2-text-muted); font-size: 0.68rem; } .draw2-timeline-rate select { width: 48px; height: var(--draw2-control-size); padding-inline: 3px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface); color: var(--draw2-text); } .draw2-timeline-loop input { width: 16px; height: 16px; margin: 0; accent-color: var(--draw2-accent-strong); } @media (prefers-reduced-motion: reduce) { .draw2-workspace-right-dock { transition: none; } } .draw2-timeline-creator-tools { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(150px, 0.7fr); gap: var(--draw2-space-2); margin-top: var(--draw2-space-2); padding: var(--draw2-space-2); border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: color-mix(in srgb, var(--draw2-surface-raised) 72%, transparent); } .draw2-timeline-creator-group { min-width: 0; } .draw2-timeline-creator-group > strong { display: block; margin-bottom: var(--draw2-space-1); color: var(--draw2-text-muted); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; } .draw2-timeline-creator-form { display: flex; align-items: center; gap: 3px; min-width: 0; } .draw2-timeline-creator-form input, .draw2-timeline-creator-form select { min-width: 0; width: 100%; height: 28px; padding-inline: 6px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text); font-size: 0.68rem; } .draw2-timeline-creator-form input[type="number"] { width: 48px; flex: 0 0 48px; } .draw2-timeline-creator-form .draw2-button { flex: 0 0 28px; width: 28px; min-width: 28px; min-height: 28px; padding: 0; } .draw2-timeline-creator-check { display: inline-grid; place-items: center; width: 28px; height: 28px; color: var(--draw2-text-muted); } .draw2-timeline-creator-check input { width: 14px; height: 14px; } .draw2-creator-meta-list { display: grid; gap: 2px; min-height: 20px; max-height: 48px; margin-top: 3px; overflow: auto; } .draw2-creator-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; min-height: 22px; color: var(--draw2-text); font-size: 0.64rem; } .draw2-creator-meta-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-creator-meta-row .draw2-button { flex: 0 0 22px; width: 22px; min-width: 22px; min-height: 22px; padding: 0; } .draw2-creator-meta-empty { color: var(--draw2-text-muted); font-size: 0.62rem; } .draw2-timeline-linked-cel .draw2-timeline-creator-form { min-height: 28px; } .draw2-timeline-linked-cel .draw2-timeline-creator-form .draw2-button { width: auto; min-width: 76px; padding-inline: 6px; } .draw2-export-panel { display: grid; gap: var(--draw2-space-2); } .draw2-export-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--draw2-space-1); } .draw2-export-grid .draw2-button { min-width: 0; padding-inline: 4px; } .draw2-export-status { margin: 0; color: var(--draw2-text-strong); font-size: 0.68rem; overflow-wrap: anywhere; } .draw2-export-status[data-state="error"] { color: var(--draw2-danger-strong); } .draw2-export-note { margin: 0; color: var(--draw2-text-muted); font-size: 0.62rem; line-height: 1.4; } .draw2-workspace-quick-controls { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; } .draw2-workspace-quick-controls::-webkit-scrollbar { display: none; } .draw2-quick-control { display: grid; flex: 0 0 auto; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 3px; min-width: 0; color: var(--draw2-text-muted); font-size: 0.58rem; white-space: nowrap; } .draw2-quick-control span { opacity: 0.72; } .draw2-quick-control select { width: 58px; min-width: 0; min-height: 28px; padding: 0 4px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-strong); font-size: 0.66rem; text-align: center; touch-action: none; } .draw2-quick-control-size select { width: 58px; } .draw2-quick-control:nth-child(2) select { width: 42px; font-size: 0.82rem; } .draw2-quick-control:nth-child(3) select { width: 68px; } .draw2-quick-control:nth-child(4) select { width: 46px; } @media (min-width: 701px) { .draw2-workspace-topbar { grid-template-columns: minmax(210px, 260px) minmax(0, 1fr) auto; grid-template-rows: 30px 34px; } .draw2-workspace-project-slot { grid-column: 1; grid-row: 2; } .draw2-workspace-quick-controls { grid-column: 2; grid-row: 2; justify-content: flex-start; } .draw2-workspace-command-bar { grid-column: 3; grid-row: 2; } } html:has(#draw2WorkspaceFrame), body:has(#draw2WorkspaceFrame) { height: 100%; min-height: 100dvh; overflow: hidden; } .draw2-shell:has(#draw2WorkspaceFrame) { display: flex; flex-direction: column; width: 100%; height: 100dvh; min-height: 0; margin: 0; overflow: hidden; } .draw2-shell:has(#draw2WorkspaceFrame) > .draw2-header { display: none; } .draw2-workspace-frame { flex: 1 1 auto; height: 100%; min-height: 0; grid-template-rows: auto minmax(0, 1fr) minmax(132px, 30%); margin: 0; } .draw2-workspace-left-dock, .draw2-workspace-canvas-region, .draw2-workspace-right-dock, .draw2-workspace-timeline-region, #draw2WorkspaceCanvasSlot, #draw2WorkspaceCanvasSlot > .draw2-canvas-card, #draw2WorkspaceTimelineSlot { min-height: 0; } .draw2-workspace-canvas-region, .draw2-workspace-right-dock, .draw2-workspace-timeline-region { overflow: hidden; } .draw2-workspace-timeline-region { display: flex; flex-direction: column; } .draw2-workspace-timeline-region .draw2-help { display: none; } .draw2-workspace-timeline-region .draw2-metrics { display: none; } .draw2-workspace-timeline-region .draw2-action-row { flex-wrap: nowrap; gap: var(--draw2-space-1); margin-top: var(--draw2-space-2); overflow-x: auto; } .draw2-workspace-timeline-region .draw2-action-row .draw2-button { flex: 0 0 auto; min-height: 32px; padding-inline: var(--draw2-space-2); font-size: 0.68rem; white-space: nowrap; } .draw2-workspace-right-dock { min-width: 0; } .draw2-workspace-panel { flex: 1 1 auto; } #draw2WorkspaceCanvasSlot > .draw2-canvas-card { overflow: hidden; } #draw2WorkspaceCanvasSlot .draw2-help { display: none; } #draw2WorkspaceCanvasSlot .draw2-card-heading { align-items: center; } #draw2WorkspaceCanvasSlot .draw2-quick-palette { display: flex; align-items: center; gap: var(--draw2-space-1); min-height: 44px; margin-top: var(--draw2-space-2); } #draw2WorkspaceCanvasSlot .draw2-quick-palette-icon { width: 20px; color: var(--draw2-text-muted); font-size: 0.9rem; text-align: center; } #draw2WorkspaceCanvasSlot .draw2-quick-palette .draw2-color { flex: 0 0 44px; width: 44px; height: 44px; border-width: 2px; border-radius: var(--draw2-radius-sm); } .draw2-workspace-brand .draw2-eyebrow { display: none; } .draw2-workspace-right-header strong { font-size: 0.76rem; } #draw2WorkspaceProjectSlot .draw2-status, #draw2WorkspaceCanvasSlot .draw2-metrics { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } #draw2WorkspaceCanvasSlot .draw2-viewport-wrap { min-height: 0; overflow: hidden; container-type: size; } #draw2WorkspaceCanvasSlot .draw2-canvas-stack { width: auto; height: auto; aspect-ratio: 1; max-width: none; max-height: none; flex: 0 0 auto; } #draw2WorkspaceTimelineSlot > .draw2-timeline-card { display: flex; flex-direction: column; height: 100%; max-height: none; min-height: 0; overflow: hidden; } #draw2WorkspaceTimelineSlot .draw2-timeline-viewport { flex: 1 1 auto; min-height: 0; max-height: none; } #draw2WorkspaceTimelineSlot { flex: 1 1 auto; height: auto; min-height: 0; overflow: hidden; } @media (min-width: 701px) { .draw2-workspace-frame { grid-template-rows: auto minmax(0, 1fr) minmax(140px, 26%); } } .draw2-workspace-frame { --draw2-color-dock-width: 320px; --draw2-tool-dock-width: 76px; --draw2-left-rail-width: var(--draw2-tool-dock-width); --draw2-right-dock-width: var(--draw2-color-dock-width); --draw2-timeline-height: clamp(140px, 26%, 360px); } .draw2-workspace-right-dock { position: relative; } .draw2-dock-resize-handle { position: absolute; z-index: 4; top: 0; bottom: 0; left: -5px; width: 10px; padding: 0; border: 0; background: transparent; cursor: col-resize; touch-action: none; } .draw2-dock-resize-handle:hover, .draw2-dock-resize-handle:focus-visible { background: var(--draw2-accent-strong); opacity: 0.7; } .draw2-timeline-resize-handle { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 10px; padding: 0; border: 0; background: transparent; cursor: row-resize; touch-action: none; } .draw2-timeline-resize-handle:hover, .draw2-timeline-resize-handle:focus-visible { background: var(--draw2-accent-strong); opacity: 0.7; } .draw2-workspace-timeline-region { position: relative; } .draw2-workspace-timeline-heading, .draw2-workspace-timeline-region .draw2-timeline-card > .draw2-card-heading, .draw2-workspace-timeline-region .draw2-timeline-card > .draw2-help, #draw2TimelineCard > .draw2-card-heading, #draw2WorkspaceTimelineSlot > #draw2TimelineCard > .draw2-card-heading, #draw2TimelineCard > .draw2-help, #draw2WorkspaceTimelineSlot > #draw2TimelineCard > .draw2-help { display: none !important; } #draw2TimelineStatus { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .draw2-workspace-timeline-region .draw2-timeline-card > .draw2-action-row { margin-top: 0; } .draw2-workspace-right-dock { overflow: hidden; } .draw2-workspace-right-dock > .draw2-workspace-right-header, .draw2-workspace-right-dock > .draw2-workspace-tabs, .draw2-workspace-right-dock > .draw2-workspace-panel { flex: 0 0 auto; } .draw2-workspace-right-dock > .draw2-workspace-panel:not([hidden]) { flex: 1 1 auto; overflow: auto; } .draw2-workspace-right-header { min-height: 32px; padding: var(--draw2-space-1) var(--draw2-space-2); } .draw2-workspace-right-header strong { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; } .draw2-workspace-tabs { position: sticky; top: 0; z-index: 3; padding: var(--draw2-space-1); background: var(--draw2-surface); } .draw2-workspace-tab { min-width: 38px; padding-inline: var(--draw2-space-1); font-size: 0.64rem; } .draw2-workspace-panel { padding: var(--draw2-space-2); } .draw2-panel-summary { gap: var(--draw2-space-1); padding: var(--draw2-space-2); } .draw2-timeline-viewport { --draw2-timeline-label-width: 148px; --draw2-timeline-cell-width: 48px; --draw2-timeline-row-height: 38px; } .draw2-timeline-row { height: var(--draw2-timeline-row-height); } .draw2-timeline-row-label { width: var(--draw2-timeline-label-width); height: var(--draw2-timeline-row-height); } .draw2-timeline-cell { width: calc(var(--draw2-timeline-cell-width) - 4px); min-height: calc(var(--draw2-timeline-row-height) - 6px); border-radius: 2px; } @media (min-width: 701px) { .draw2-workspace-topbar { overflow: visible !important; z-index: 40; } .draw2-workspace-menu-bar { overflow: visible !important; position: relative; z-index: 100; } .draw2-menu { z-index: 101; } .draw2-menu-popover { z-index: 200; } } .draw2-color-picker { width: min(100%, 260px) !important; max-width: 260px !important; margin-inline: auto !important; } .draw2-color-picker > .draw2-palette-wheel { width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; } .draw2-layer-row { grid-template-columns: minmax(0, 1fr) 30px 30px 76px !important; } .draw2-layer-name-group { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; min-width: 0; gap: 2px; } .draw2-layer-name-group > .draw2-layer-visibility, .draw2-layer-name-group > .draw2-layer-select { width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; border: 1px solid transparent; border-radius: var(--px-radius, 2px); background: transparent; color: var(--draw2-text-muted); } .draw2-layer-name-group > .draw2-layer-select { display: flex; align-items: center; justify-content: flex-start; gap: 6px; width: 100%; min-width: 0; padding-inline: 6px; text-align: left; } .draw2-layer-name-group > button:hover, .draw2-layer-name-group > button:focus-visible { border-color: var(--draw2-border-subtle); color: var(--draw2-text-strong); } .draw2-layer-theme-label { display: block; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--draw2-accent-strong); box-shadow: 0 0 0 1px color-mix(in srgb, var(--draw2-accent-strong) 44%, transparent); } .draw2-layer-theme-label[data-layer-visible="false"] { background: var(--draw2-text-muted); box-shadow: 0 0 0 1px color-mix(in srgb, var(--draw2-text-muted) 44%, transparent); } .draw2-layer-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-quick-control-size { grid-template-columns: auto minmax(64px, 96px) auto; align-items: center; } .draw2-quick-control-size input[type="range"] { width: 100%; min-width: 56px; } .draw2-quick-control-opacity { grid-template-columns: auto minmax(64px, 80px) auto; align-items: center; } .draw2-quick-control-opacity input[type="range"] { width: 100%; min-width: 56px; } .draw2-quick-control-size output, .draw2-quick-control-opacity output, #draw2ToolOptions label output { min-width: 30px; color: var(--draw2-text-muted); font: 700 0.62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; } #draw2ToolOptions label:has(> input[type="range"]) { grid-template-columns: auto minmax(0, 1fr) auto; } #draw2ToolOptions label > input[type="range"] { width: 100%; min-width: 0; } .draw2-timeline-frame-header[data-marker-kind]::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--draw2-accent-strong); box-shadow: 0 0 0 1px color-mix(in srgb, var(--draw2-accent-strong) 48%, transparent); } .draw2-timeline-frame-header[data-marker-kind="AUDIO"]::after { background: #8bd7ff; } .draw2-timeline-frame-header[data-marker-kind="GAME_EVENT"]::after { background: #f8d477; } .draw2-timeline-frame-header[data-marker-kind="HITBOX"]::after { background: #ff687c; } .draw2-timeline-frame-header[data-marker-kind="NOTE"]::after { background: #c6a0ff; } .draw2-mirror-guide-overlay { overflow: visible !important; } .draw2-mirror-guide-line { vector-effect: non-scaling-stroke; } @media (min-width: 701px) { .draw2-workspace-brand .draw2-eyebrow, .draw2-workspace-brand strong, .draw2-workspace-brand .draw2-workspace-status { display: none; } .draw2-workspace-brand { min-height: 0; } .draw2-workspace-command-bar .draw2-icon-button span { display: none; } } .draw2-tool-group { position: relative; flex: 0 0 var(--draw2-control-size); width: var(--draw2-control-size); height: var(--draw2-control-size); } .draw2-tool-group > summary { display: grid; place-items: center; width: var(--draw2-control-size); height: var(--draw2-control-size); padding: 0; border: 1px solid transparent; border-radius: var(--draw2-radius-sm); list-style: none; cursor: pointer; } .draw2-tool-group > summary::-webkit-details-marker { display: none; } .draw2-tool-group.is-active > summary { box-shadow: inset 0 0 0 1px var(--draw2-accent-strong); } .draw2-tool-popover { position: absolute; z-index: 40; top: 0; left: calc(100% + 4px); display: none; grid-template-columns: repeat(3, var(--draw2-control-size)); gap: 2px; width: max-content; padding: 3px; border: 1px solid var(--draw2-border-strong); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface); box-shadow: var(--draw2-shadow-panel); } .draw2-tool-group[open] > .draw2-tool-popover { display: grid; } .draw2-tool-popover .draw2-tool-button { width: var(--draw2-control-size) !important; min-width: var(--draw2-control-size) !important; height: var(--draw2-control-size) !important; min-height: var(--draw2-control-size) !important; padding: 0 !important; } .draw2-tool-popover .draw2-tool-button span { display: none !important; } .draw2-mini-preview[hidden] { display: none !important; } #draw2WorkspaceCanvasSlot .draw2-viewport-wrap { touch-action: none; overscroll-behavior: contain; } #draw2WorkspaceCanvasSlot .draw2-canvas-stack { transform-origin: center center; image-rendering: pixelated; will-change: auto; isolation: isolate; } #draw2WorkspaceCanvasSlot #draw2Canvas, #draw2WorkspaceCanvasSlot #draw2Overlay { touch-action: none; } #draw2WorkspaceCanvasSlot #draw2Canvas[data-tool="pan"] { cursor: grab; } #draw2WorkspaceCanvasSlot #draw2Canvas[data-tool="pan"]:active { cursor: grabbing; } @media (min-width: 701px) { .draw2-workspace-left-dock .draw2-tool-popover { left: calc(100% + 4px); right: auto; } } #draw2WorkspaceColorEditor[hidden] { display: none !important; } #draw2WorkspaceColorEditor:not([hidden]) + .draw2-workspace-tabs { border-top: 1px solid var(--draw2-border-subtle); } #draw2WorkspaceFrame, #draw2WorkspaceFrame * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } #draw2WorkspaceFrame input, #draw2WorkspaceFrame textarea, #draw2WorkspaceFrame select, #draw2WorkspaceFrame [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } #draw2WorkspaceFrame img, #draw2WorkspaceFrame canvas, #draw2WorkspaceFrame button, #draw2WorkspaceFrame [draggable="true"] { -webkit-user-drag: none; user-drag: none; } #draw2WorkspaceCanvasSlot > .draw2-canvas-card { display: grid; place-items: center; padding: 0; border: 0; border-radius: 0; background: transparent; } #draw2WorkspaceCanvasSlot .draw2-card-heading, #draw2WorkspaceCanvasSlot .draw2-help, #draw2WorkspaceCanvasSlot .draw2-quick-palette { display: none !important; } #draw2WorkspaceCanvasSlot .draw2-viewport-wrap { width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; } .draw2-color-editor { display: grid; flex: 0 0 auto; gap: var(--draw2-space-2); padding: var(--draw2-space-2) var(--draw2-space-3) var(--draw2-space-3); border-bottom: 1px solid var(--draw2-border-subtle); background: var(--draw2-surface); } .draw2-color-editor-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--draw2-space-2); } .draw2-color-editor-heading .draw2-eyebrow { margin-bottom: 2px; } .draw2-color-editor-heading h2 { margin: 0; font-size: 0.84rem; } .draw2-color-editor-value { color: var(--draw2-text-strong); font: 700 0.72rem ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-color-map { position: relative; height: 76px; overflow: hidden; border: 1px solid var(--draw2-border-strong); border-radius: var(--draw2-radius-sm); background: linear-gradient(to top, rgb(0 0 0 / 82%), transparent), linear-gradient( to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000 ); cursor: crosshair; touch-action: none; } .draw2-color-map:focus-visible { outline: 2px solid var(--draw2-focus-ring); outline-offset: 2px; } .draw2-color-map-thumb { position: absolute; left: calc(var(--draw2-color-map-x, 0%) - 7px); top: calc(var(--draw2-color-map-y, 0%) - 7px); width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgb(0 0 0 / 75%); pointer-events: none; } .draw2-color-sliders { display: grid; gap: 3px; } .draw2-color-sliders label { display: grid; grid-template-columns: 16px minmax(0, 1fr) 30px; align-items: center; gap: var(--draw2-space-1); color: var(--draw2-text-muted); font-size: 0.66rem; } .draw2-color-sliders input { width: 100%; min-width: 0; accent-color: var(--draw2-accent-strong); } .draw2-color-sliders output { color: var(--draw2-text-muted); font: 600 0.62rem ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; } .draw2-color-editor-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--draw2-space-2); } .draw2-color-hex { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: var(--draw2-space-1); color: var(--draw2-text-muted); font-size: 0.64rem; } .draw2-color-hex input { width: 100%; min-width: 0; min-height: 32px; padding: 0 var(--draw2-space-2); border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-strong); font: 700 0.72rem ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; } .draw2-color-editor-footer .draw2-button { min-height: 32px; padding: 0 var(--draw2-space-2); font-size: 0.68rem; } .draw2-color-editor-status { min-height: 1em; margin: 0; overflow: hidden; color: var(--draw2-text-muted); font-size: 0.62rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-color-editor-status[data-state="error"] { color: var(--draw2-danger-strong); } @media (min-width: 701px) { .draw2-workspace-frame { grid-template-columns: minmax(244px, var(--draw2-color-dock-width)) minmax(0, 1fr) minmax( 68px, var(--draw2-tool-dock-width) ); grid-template-rows: auto minmax(0, 1fr) var(--draw2-timeline-height); } .draw2-workspace-right-dock { grid-area: left; border-right: 1px solid var(--draw2-border-subtle); border-left: 0; } .draw2-workspace-left-dock { grid-area: right; border-left: 1px solid var(--draw2-border-subtle); border-right: 0; } .draw2-workspace-left-dock .draw2-workspace-toolbar, .draw2-workspace-left-dock .draw2-workspace-panel-launcher { align-content: start; } } @media (min-width: 701px) { .draw2-workspace-topbar { grid-template-columns: auto minmax(220px, 360px) minmax(0, 1fr) auto; min-height: 44px; padding: var(--draw2-space-1) var(--draw2-space-2); gap: var(--draw2-space-2); } .draw2-workspace-brand { gap: 0; } .draw2-workspace-brand strong { font-size: 0.76rem; white-space: nowrap; } .draw2-workspace-status { display: none; } .draw2-workspace-menu-bar { gap: 0; } .draw2-menu summary { min-height: 26px; padding-inline: var(--draw2-space-1); font-size: 0.62rem; } #draw2WorkspaceProjectSlot > #draw2ProjectCard { padding: 0; } #draw2WorkspaceProjectSlot .draw2-controls { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--draw2-space-1); margin: 0; } #draw2WorkspaceProjectSlot .draw2-controls label { display: block; min-width: 0; font-size: 0; } #draw2WorkspaceProjectSlot .draw2-controls label:first-child { flex: 1 1 auto; } #draw2WorkspaceProjectSlot .draw2-controls label:first-child input { width: 100%; min-width: 120px; min-height: 30px; font-size: 0.68rem; } #draw2WorkspaceProjectSlot .draw2-controls label:nth-child(2), #draw2WorkspaceProjectSlot .draw2-controls label:nth-child(3) { display: none; } #draw2WorkspaceProjectSlot #draw2CreateProject { min-width: 78px; min-height: 30px; padding-inline: var(--draw2-space-2); font-size: 0.66rem; white-space: nowrap; } .draw2-workspace-command-bar { gap: 2px; } .draw2-icon-button { min-width: 30px; min-height: 30px; padding: var(--draw2-space-1); } .draw2-icon-button span { display: none; } .draw2-theme-control, .draw2-language-control { display: flex; align-items: center; gap: 3px; font-size: 0; } .draw2-theme-control select { min-height: 28px; width: 28px; padding: 0; font-size: 0; } .draw2-language-control select { min-height: 28px; width: 42px; padding: 0; font-size: 0.65rem; } .draw2-workspace-left-dock { gap: var(--draw2-space-2); padding: var(--draw2-space-2) var(--draw2-space-1); } .draw2-workspace-left-dock .draw2-tool-button, .draw2-workspace-left-dock .draw2-panel-launcher { min-height: 42px; padding-inline: 0; } .draw2-workspace-left-dock .draw2-tool-button span, .draw2-workspace-left-dock .draw2-panel-launcher span { display: none; } .draw2-workspace-left-dock .draw2-workspace-toolbar, .draw2-workspace-left-dock .draw2-workspace-panel-launcher { gap: var(--draw2-space-1); } } .draw2-workspace-topbar { position: relative; } .draw2-workspace-menu-bar { display: flex; align-items: center; gap: 2px; min-width: 0; } .draw2-menu { position: relative; } .draw2-menu summary { display: inline-flex; align-items: center; min-height: 30px; padding: 0 var(--draw2-space-2); border: 1px solid transparent; border-radius: var(--draw2-radius-sm); color: var(--draw2-text-muted); cursor: pointer; font-size: 0.68rem; list-style: none; } .draw2-menu summary::-webkit-details-marker { display: none; } .draw2-menu summary:hover, .draw2-menu[open] summary { border-color: var(--draw2-border-subtle); background: var(--draw2-surface-raised); color: var(--draw2-text-strong); } .draw2-menu-popover { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; display: grid; min-width: 148px; gap: 2px; padding: var(--draw2-space-1); border: 1px solid var(--draw2-border-strong); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface); box-shadow: var(--draw2-shadow-panel); } .draw2-menu:not([open]) > .draw2-menu-popover { display: none; } .draw2-menu[open] > .draw2-menu-popover { display: grid; } .draw2-menu:nth-last-child(-n+2) > .draw2-menu-popover { left: auto; right: 0; } .draw2-menu-popover button { min-height: 32px; padding: 0 var(--draw2-space-2); border: 1px solid transparent; border-radius: var(--draw2-radius-sm); background: transparent; color: var(--draw2-text-strong); font-size: 0.7rem; text-align: left; cursor: pointer; } .draw2-menu-popover button:hover, .draw2-menu-popover button:focus-visible { border-color: var(--draw2-border-subtle); background: var(--draw2-surface-raised); outline: 0; } @media (min-width: 1120px) { .draw2-workspace-topbar { grid-template-columns: minmax(170px, auto) auto minmax(0, 1fr) auto; } } @media (min-width: 701px) { .draw2-workspace-panel-launcher { display: none; } } :root { --draw2-radius-sm: 2px; --draw2-radius-md: 3px; --draw2-radius-lg: 4px; --draw2-control-height: 32px; --draw2-tool-height: 40px; } .draw2-button, .draw2-icon-button, .draw2-panel-close, .draw2-workspace-tab, .draw2-menu summary, .draw2-menu-popover button { border-radius: var(--draw2-radius-sm); } .draw2-button { height: var(--draw2-control-height); min-height: var(--draw2-control-height); padding-block: 0; } .draw2-action-row .draw2-button, .draw2-workspace-timeline-region .draw2-action-row .draw2-button { height: var(--draw2-control-height); min-height: var(--draw2-control-height); } .draw2-workspace-timeline-region .draw2-action-row .draw2-button { width: var(--draw2-control-height); min-width: var(--draw2-control-height); padding-inline: 0; } .draw2-icon-button, .draw2-panel-close { width: var(--draw2-control-height); min-width: var(--draw2-control-height); height: var(--draw2-control-height); min-height: var(--draw2-control-height); padding: 0; } .draw2-workspace-tab { min-height: var(--draw2-control-height); height: var(--draw2-control-height); } .draw2-tool-button, .draw2-panel-launcher { min-height: var(--draw2-tool-height); height: var(--draw2-tool-height); border-radius: var(--draw2-radius-sm); } .draw2-color, .draw2-color-add { border-radius: var(--draw2-radius-sm); } .draw2-color-add { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; min-width: 30px; border: 1px solid var(--draw2-border-strong); background: var(--draw2-surface-raised); color: var(--draw2-text-strong); cursor: pointer; font-size: 1rem; } .draw2-color-add:hover, .draw2-color-add:focus-visible { border-color: var(--draw2-accent-strong); } #draw2WorkspaceCanvasSlot .draw2-card-heading, #draw2WorkspaceTimelineSlot .draw2-timeline-card > .draw2-card-heading, .draw2-color-editor-heading > div { display: none !important; } .draw2-color-editor-heading { justify-content: flex-end; } .draw2-ui-icon { display: block; width: 20px; height: 20px; flex: 0 0 20px; overflow: visible; color: currentColor; pointer-events: none; } .draw2-ui-icon use { color: inherit; } .draw2-tool-icon { width: 22px; height: 22px; flex-basis: 22px; } .draw2-menu-icon { width: 16px; height: 16px; flex-basis: 16px; } .draw2-menu summary { gap: 4px; } .draw2-menu summary:hover .draw2-ui-icon, .draw2-menu[open] summary .draw2-ui-icon, .draw2-icon-button:hover .draw2-ui-icon, .draw2-icon-button:focus-visible .draw2-ui-icon, .draw2-tool-button:hover .draw2-ui-icon, .draw2-tool-button:focus-visible .draw2-ui-icon, .draw2-panel-launcher:hover .draw2-ui-icon, .draw2-panel-launcher:focus-visible .draw2-ui-icon, .draw2-tool-button.is-active .draw2-ui-icon, .draw2-panel-launcher.is-active .draw2-ui-icon{ color: var(--draw2-accent-strong); } .draw2-icon-button-danger .draw2-ui-icon { color: var(--draw2-danger-strong); } .draw2-icon-button:disabled .draw2-ui-icon, .draw2-tool-button:disabled .draw2-ui-icon, .draw2-panel-launcher:disabled .draw2-ui-icon { opacity: 0.42; } @media (min-width: 701px) { .draw2-workspace-left-dock .draw2-tool-icon, .draw2-workspace-left-dock .draw2-panel-launcher .draw2-ui-icon { width: 22px; height: 22px; flex-basis: 22px; } } @media (min-width: 701px) { .draw2-workspace-left-dock { align-items: center; } .draw2-workspace-left-dock .draw2-tool-button, .draw2-workspace-left-dock .draw2-panel-launcher { flex: 0 0 42px; width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 0; } } .draw2-workspace-right-dock > .draw2-palette-strip { flex: 0 0 auto; display: grid; grid-template-columns: 1fr; gap: 3px; min-width: 0; max-height: 116px; padding: 4px 6px; overflow: hidden; border-bottom: 1px solid var(--draw2-border-subtle); background: var(--draw2-surface); } .draw2-palette-active-color { min-width: 0; color: var(--draw2-text-muted); font: 700 0.62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em; text-align: right; } .draw2-palette-grid { display: grid; grid-template-columns: repeat(auto-fill, 28px); grid-auto-rows: 28px; align-content: start; justify-content: start; gap: 2px; min-width: 0; max-height: 84px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; } .draw2-palette-grid .draw2-color, .draw2-palette-grid .draw2-color-add { width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0; border: 1px solid var(--draw2-border-subtle); border-radius: 2px; } .draw2-palette-grid .draw2-color[aria-pressed="true"] { border-color: var(--draw2-focus-ring); box-shadow: inset 0 0 0 1px var(--draw2-focus-ring); } .draw2-workspace-right-dock > .draw2-workspace-right-header .draw2-panel-close { display: none; } .draw2-workspace-right-dock > .draw2-workspace-right-header strong { font-size: 0; } .draw2-workspace-right-dock > .draw2-workspace-tabs { flex: 0 0 auto; min-width: 0; overflow-x: auto; } .draw2-workspace-right-dock > .draw2-workspace-panel:not([hidden]) { min-height: 0; } @media (min-width: 701px) { .draw2-workspace-topbar { grid-template-columns: minmax(128px, 180px) minmax(180px, 250px) minmax(220px, 1fr) auto; min-height: 44px; padding: 4px 8px; gap: 6px; } .draw2-workspace-brand, .draw2-workspace-menu-bar, .draw2-workspace-project-slot, .draw2-workspace-command-bar { min-width: 0; } .draw2-workspace-brand { overflow: hidden; } .draw2-workspace-brand strong { overflow: hidden; text-overflow: ellipsis; } .draw2-workspace-menu-bar { overflow: visible; position: relative; z-index: 80; } .draw2-workspace-project-slot { width: 100%; } .draw2-workspace-command-bar { justify-content: flex-end; } } .draw2-workspace-tabs [data-panel-persistent="false"] { display: none !important; } .draw2-workspace-panel-launcher [data-workspace-panel]:not([data-workspace-panel="color"]) { display: none; } @media (min-width: 701px) { .draw2-workspace-topbar { grid-template-columns: minmax(128px, 180px) minmax(0, 1fr) auto; grid-template-rows: 30px 34px; align-items: center; min-height: 70px; row-gap: 3px; } .draw2-workspace-brand { grid-column: 1; grid-row: 1; } .draw2-workspace-menu-bar { grid-column: 2 / -1; grid-row: 1; justify-content: flex-start; } .draw2-workspace-project-slot { grid-column: 1 / 3; grid-row: 2; } .draw2-workspace-command-bar { grid-column: 3; grid-row: 2; justify-content: flex-end; } } .draw2-workspace-timeline-region .draw2-timeline-card > .draw2-card-heading { display: flex !important; align-items: center; justify-content: space-between; gap: var(--draw2-space-2); min-height: 26px; margin: 0; padding: 0 0 var(--draw2-space-1); border-bottom: 1px solid var(--draw2-border-subtle); } .draw2-timeline-heading-content { display: flex; align-items: center; gap: 6px; min-width: 0; } .draw2-timeline-heading-icon { width: 18px; height: 18px; flex: 0 0 18px; color: var(--draw2-accent-strong); } .draw2-workspace-timeline-region .draw2-timeline-card > .draw2-card-heading .draw2-eyebrow { display: block; margin: 0; font-size: 0.56rem; line-height: 1; } .draw2-workspace-timeline-region .draw2-timeline-card > .draw2-card-heading h2 { margin: 2px 0 0; font-size: 0.78rem; line-height: 1; } .draw2-workspace-timeline-region .draw2-timeline-card > .draw2-card-heading .draw2-metrics { display: block; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.58rem; text-align: right; } .draw2-workspace-timeline-region .draw2-timeline-card > .draw2-action-row { margin-top: var(--draw2-space-1); padding-bottom: var(--draw2-space-1); border-bottom: 1px solid var(--draw2-border-subtle); } #draw2WorkspaceTimelineSlot .draw2-timeline-card > .draw2-card-heading { display: flex !important; } .draw2-color-picker { position: relative; width: min(100%, 260px); max-width: 260px; aspect-ratio: 1 / 1; margin: 0 auto; overflow: hidden; border-radius: 50%; touch-action: none; overscroll-behavior: contain; } .draw2-color-picker::after { content: ""; position: absolute; inset: 0; border: 1px solid rgb(255 255 255 / 8%); border-radius: 50%; pointer-events: none; } .draw2-palette-wheel { box-sizing: border-box; position: relative; z-index: 0; display: block; width: 100%; height: 100%; border: 0; border-radius: 50%; cursor: crosshair; image-rendering: auto; touch-action: none; } .draw2-palette-wheel-cursor { box-sizing: border-box; position: absolute; z-index: 2; top: 50%; left: 50%; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); } .draw2-palette-wheel-cursor--hue { width: 10px; height: 10px; border-width: 2px; background: rgb(8 12 18 / 20%); } .draw2-palette-wheel-cursor--sv { width: 5px; height: 5px; border-width: 1px; background: rgb(10 14 20 / 22%); } .draw2-palette-active-color, .draw2-color-editor-value { display: none; } :root { --draw2-control-size: 44px; --draw2-timeline-cell-size: 40px; } .draw2-onion-control { display: inline-flex; align-items: center; gap: 4px; min-width: 70px; min-height: var(--draw2-control-size); color: var(--draw2-text-muted); font-size: 0.72rem; } .draw2-onion-control input[type="range"] { width: 46px; accent-color: var(--draw2-accent-strong); } .draw2-onion-control output { min-width: 24px; color: var(--draw2-text-strong); font-size: 0.68rem; font-variant-numeric: tabular-nums; text-align: right; } .draw2-onion-opacity { min-width: 86px; } .draw2-mirror-guide-line.is-disabled { stroke: var(--draw2-text-muted); opacity: 0.46; stroke-dasharray: 2 4; } .draw2-mirror-line-toggle { position: absolute; z-index: 9; display: grid; place-items: center; width: 24px; min-width: 24px; height: 24px; min-height: 24px; padding: 0; border: 1px solid var(--draw2-border-strong); border-radius: 3px; background: var(--draw2-surface-raised); color: var(--draw2-text-muted); font-size: 0.8rem; line-height: 1; pointer-events: auto; box-shadow: 0 2px 6px rgb(0 0 0 / 24%); } .draw2-mirror-line-toggle[data-enabled="true"] { border-color: var(--draw2-accent-strong); background: color-mix( in srgb, var(--draw2-accent-strong) 18%, var(--draw2-surface-raised) ); color: var(--draw2-accent-strong); } .draw2-mirror-line-toggle:focus-visible, .draw2-mirror-line-toggle:hover { border-color: var(--draw2-focus); outline: 2px solid color-mix(in srgb, var(--draw2-focus) 44%, transparent); outline-offset: 1px; } .draw2-canvas-resize-preview { display: grid; gap: var(--draw2-space-2); margin-top: var(--draw2-space-2); padding: var(--draw2-space-2); border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); } .draw2-canvas-resize-preview-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--draw2-space-2); min-width: 0; color: var(--draw2-text-strong); font-size: 0.76rem; } .draw2-canvas-resize-preview-heading output { min-width: 0; overflow: hidden; color: var(--draw2-accent-strong); font-size: 0.68rem; font-variant-numeric: tabular-nums; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .draw2-canvas-resize-preview-viewport { display: grid; place-items: center; min-height: 154px; overflow: hidden; background: linear-gradient( 45deg, rgb(255 255 255 / 7%) 25%, transparent 25% 75%, rgb(255 255 255 / 7%) 75% ), linear-gradient( 45deg, rgb(255 255 255 / 7%) 25%, transparent 25% 75%, rgb(255 255 255 / 7%) 75% ), var(--draw2-surface-input); background-position: 0 0, 8px 8px; background-size: 16px 16px; } .draw2-canvas-resize-preview-frame { position: relative; max-width: 100%; max-height: 140px; border: 1px solid var(--draw2-accent-strong); background: color-mix(in srgb, var(--draw2-accent-strong) 10%, transparent); box-shadow: 0 0 0 1px rgb(0 0 0 / 45%); } .draw2-canvas-resize-preview-content { position: absolute; border: 1px dashed var(--draw2-text-strong); background: repeating-linear-gradient( 45deg, rgb(255 255 255 / 11%) 0 4px, transparent 4px 8px ); box-sizing: border-box; } .draw2-canvas-resize-anchor { min-width: 0; padding: var(--draw2-space-1); border: 0; } .draw2-canvas-resize-anchor legend { padding: 0; color: var(--draw2-text-muted); font-size: 0.68rem; } .draw2-canvas-resize-anchor-grid { display: grid; grid-template-columns: repeat(3, 30px); justify-content: center; gap: 3px; } .draw2-canvas-resize-anchor-grid button { display: grid; place-items: center; width: 30px; height: 28px; padding: 0; border: 1px solid var(--draw2-border-subtle); border-radius: 3px; background: var(--draw2-surface-input); color: var(--draw2-text-muted); font-size: 0.9rem; } .draw2-canvas-resize-anchor-grid button.is-active, .draw2-canvas-resize-anchor-grid button:hover, .draw2-canvas-resize-anchor-grid button:focus-visible { border-color: var(--draw2-accent-strong); background: color-mix( in srgb, var(--draw2-accent-strong) 16%, var(--draw2-surface-input) ); color: var(--draw2-accent-strong); } .draw2-icon-button, .draw2-tool-button, .draw2-panel-launcher { box-sizing: border-box; width: var(--draw2-control-size); min-width: var(--draw2-control-size); max-width: var(--draw2-control-size); height: var(--draw2-control-size); min-height: var(--draw2-control-size); max-height: var(--draw2-control-size); padding: 0; } .draw2-tool-button, .draw2-panel-launcher { aspect-ratio: 1; } .draw2-color, .draw2-color-add { box-sizing: border-box; width: var(--draw2-control-size); min-width: var(--draw2-control-size); max-width: var(--draw2-control-size); height: var(--draw2-control-size); min-height: var(--draw2-control-size); max-height: var(--draw2-control-size); } .draw2-palette-grid { grid-template-columns: repeat(auto-fill, var(--draw2-control-size)); grid-auto-rows: var(--draw2-control-size); max-height: calc(var(--draw2-control-size) * 2 + 2px); } .draw2-palette-grid .draw2-color, .draw2-palette-grid .draw2-color-add { width: var(--draw2-control-size); min-width: var(--draw2-control-size); max-width: var(--draw2-control-size); height: var(--draw2-control-size); min-height: var(--draw2-control-size); max-height: var(--draw2-control-size); } .draw2-workspace-panel-launcher { flex: 0 0 var(--draw2-control-size); height: var(--draw2-control-size); } .draw2-workspace-panel-launcher .draw2-panel-launcher { flex: 0 0 var(--draw2-control-size); width: var(--draw2-control-size); min-width: var(--draw2-control-size); max-width: var(--draw2-control-size); height: var(--draw2-control-size); min-height: var(--draw2-control-size); max-height: var(--draw2-control-size); } .draw2-timeline-cell { box-sizing: border-box; width: var(--draw2-timeline-cell-size); min-width: var(--draw2-timeline-cell-size); max-width: var(--draw2-timeline-cell-size); height: var(--draw2-timeline-cell-size); min-height: var(--draw2-timeline-cell-size); max-height: var(--draw2-timeline-cell-size); padding: 0; border-radius: 2px; } .draw2-timeline-viewport { --draw2-timeline-label-width: 132px !important; --draw2-timeline-cell-width: var(--draw2-timeline-cell-size) !important; --draw2-timeline-row-height: var(--draw2-timeline-cell-size) !important; } .draw2-timeline-header-row { position: sticky; top: 0; z-index: 4; min-width: 100%; background: var(--draw2-surface-raised); } .draw2-timeline-corner, .draw2-timeline-frame-header { box-sizing: border-box; height: var(--draw2-timeline-cell-size); min-height: var(--draw2-timeline-cell-size); border: 1px solid var(--draw2-border); border-radius: 2px; background: var(--draw2-surface-raised); } .draw2-timeline-corner { position: sticky; left: 0; z-index: 6; width: var(--draw2-timeline-label-width); } .draw2-timeline-command-cell { padding: 0; color: var(--draw2-muted); cursor: pointer; } .draw2-timeline-command-cell:hover, .draw2-timeline-command-cell:focus-visible { border-color: var(--draw2-focus); color: var(--draw2-text-strong); } .draw2-timeline-frame-header { position: absolute; top: 0; width: var(--draw2-timeline-cell-size); min-width: var(--draw2-timeline-cell-size); max-width: var(--draw2-timeline-cell-size); padding: 0; color: var(--draw2-muted); font-size: 0.72rem; font-variant-numeric: tabular-nums; } .draw2-timeline-frame-header[aria-selected="true"] { border-color: var(--draw2-focus); color: var(--draw2-text-strong); box-shadow: 0 0 0 2px color-mix(in srgb, var(--draw2-focus) 45%, transparent); } .draw2-timeline-row-label { position: sticky; left: 0; z-index: 3; width: var(--draw2-timeline-label-width) !important; min-width: var(--draw2-timeline-label-width); height: var(--draw2-timeline-row-height) !important; min-height: var(--draw2-timeline-row-height); border-radius: 2px; } .draw2-timeline-cell { top: 0 !important; width: var(--draw2-timeline-cell-size) !important; min-width: var(--draw2-timeline-cell-size) !important; max-width: var(--draw2-timeline-cell-size) !important; height: var(--draw2-timeline-cell-size) !important; min-height: var(--draw2-timeline-cell-size) !important; max-height: var(--draw2-timeline-cell-size) !important; border-radius: 2px !important; } .draw2-timeline-cell[data-has-drawing="true"]::before { width: 8px; height: 8px; border-radius: 1px; background: var(--draw2-accent-strong); content: ""; } .draw2-timeline-cell { cursor: pointer; } .draw2-timeline-cell:hover, .draw2-timeline-cell:focus-visible { border-color: var(--draw2-accent-strong) !important; outline: 0; } .draw2-timeline-display-actions { min-height: var(--draw2-control-size); } @media (min-width: 701px) { :root { --draw2-control-size: 40px; } .draw2-workspace-left-dock { gap: 2px; padding: 4px 3px; border-left: 0 !important; border-right: 0 !important; } .draw2-workspace-left-dock .draw2-workspace-toolbar, .draw2-workspace-left-dock .draw2-workspace-panel-launcher { gap: 2px; } .draw2-workspace-left-dock .draw2-tool-button, .draw2-workspace-left-dock .draw2-panel-launcher { flex-basis: var(--draw2-control-size) !important; width: var(--draw2-control-size) !important; min-width: var(--draw2-control-size) !important; height: var(--draw2-control-size) !important; min-height: var(--draw2-control-size) !important; } .draw2-workspace-topbar, .draw2-workspace-right-dock, .draw2-workspace-right-header, .draw2-workspace-tabs, .draw2-workspace-timeline-region, .draw2-color-editor { border-bottom: 0 !important; } .draw2-workspace-right-dock { border-right: 0 !important; } .draw2-icon-button, .draw2-tool-button, .draw2-panel-launcher, .draw2-panel-close { border-color: transparent; } .draw2-icon-button:hover, .draw2-tool-button:hover, .draw2-panel-launcher:hover, .draw2-panel-close:hover, .draw2-icon-button:focus-visible, .draw2-tool-button:focus-visible, .draw2-panel-launcher:focus-visible, .draw2-panel-close:focus-visible { border-color: var(--draw2-border-subtle); } .draw2-tool-button.is-active, .draw2-panel-launcher.is-active { border-color: transparent !important; box-shadow: inset 0 0 0 1px var(--draw2-accent-strong); } } :root { --draw2-control-size: 32px; --draw2-timeline-cell-size: 30px; } .draw2-workspace-frame .draw2-tool-group-summary, .draw2-workspace-frame .draw2-workspace-toolbar > .draw2-tool-button { border-width: 1px !important; border-radius: 4px !important; } .draw2-workspace-frame #draw2WorkspaceCanvasSlot > .draw2-canvas-card { border: 1px solid var(--draw2-border-strong) !important; border-radius: 4px !important; } .draw2-workspace-frame .draw2-workspace-right-header { height: 32px !important; min-height: 32px !important; border-bottom: 1px solid var(--draw2-border-subtle) !important; } .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-viewport { border: 1px solid var(--draw2-border-subtle) !important; border-radius: 4px !important; } .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-cell, .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-frame-header, .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-corner, .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-row-label { border: 1px solid var(--draw2-border-subtle) !important; border-radius: 2px !important; } .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-cell { width: 30px !important; min-width: 30px !important; max-width: 30px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; box-shadow: none !important; } .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-cell[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--draw2-accent-strong) !important; } .draw2-timeline-toolbar > .draw2-timeline-onion-options > summary, .draw2-timeline-toolbar > .draw2-timeline-more-actions { display: none !important; } .draw2-timeline-toolbar > .draw2-timeline-onion-options { flex: 0 0 0 !important; width: 0 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } .draw2-timeline-onion-popover.is-timeline-popover-positioned { position: fixed !important; z-index: 280 !important; left: 0; top: 0; right: auto !important; bottom: auto !important; max-width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px) !important; overflow: auto !important; } .draw2-timeline-header-row { z-index: 12; } .draw2-timeline-corner { top: 0; z-index: 14; } #draw2WorkspaceTimelineSlot .draw2-timeline-card[data-timeline-collapse="compact"] .draw2-timeline-viewport { --draw2-timeline-cell-size: 26px !important; --draw2-timeline-cell-width: 26px !important; --draw2-timeline-row-height: 26px !important; } #draw2WorkspaceTimelineSlot .draw2-timeline-card[data-timeline-collapse="compact"] .draw2-timeline-cell, #draw2WorkspaceTimelineSlot .draw2-timeline-card[data-timeline-collapse="compact"] .draw2-timeline-frame-header { width: 26px !important; min-width: 26px !important; max-width: 26px !important; height: 26px !important; min-height: 26px !important; max-height: 26px !important; } #draw2WorkspaceTimelineSlot .draw2-timeline-card[data-timeline-collapse="compact"] .draw2-timeline-row, #draw2WorkspaceTimelineSlot .draw2-timeline-card[data-timeline-collapse="compact"] .draw2-timeline-row-label, #draw2WorkspaceTimelineSlot .draw2-timeline-card[data-timeline-collapse="compact"] .draw2-timeline-corner { height: 26px !important; min-height: 26px !important; } .draw2-menu-popover.is-menu-positioned { position: fixed !important; z-index: 300 !important; left: 0; top: 0; right: auto !important; bottom: auto !important; max-width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px) !important; overflow: auto !important; } :root { --ui-unit: 4px; --menu-h: 38px; --context-toolbar-h: 40px; --tool-rail-w: 48px; --control-h: 32px; --icon-button-size: 34px; --icon-size: 20px; --panel-header-h: 32px; --radius-control: 4px; --radius-panel: 4px; --radius-popover: 6px; --border-w: 1px; --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --draw2-tool-rail-width: var(--tool-rail-w); --draw2-control-size: var(--control-h); --draw2-icon-size: var(--icon-size); --draw2-radius-sm: var(--radius-control); --draw2-radius-md: var(--radius-panel); --draw2-radius-lg: var(--radius-popover); --draw2-timeline-cell-size: 30px; } .draw2-workspace-frame { --draw2-timeline-label-width: 148px; --draw2-timeline-cell-width: 30px; --draw2-timeline-row-height: 30px; } .draw2-workspace-topbar { border-bottom: var(--border-w) solid var(--draw2-border-subtle) !important; } .draw2-workspace-global-row { min-height: var(--menu-h) !important; height: var(--menu-h) !important; padding: 2px 8px !important; gap: var(--space-xs) !important; } .draw2-workspace-context-row { min-height: var(--context-toolbar-h) !important; height: var(--context-toolbar-h) !important; padding: 3px 8px !important; border-top: var(--border-w) solid color-mix(in srgb, var(--draw2-border-subtle) 65%, transparent) !important; } .draw2-workspace-menu-bar .draw2-menu summary { min-height: 30px !important; height: 30px !important; padding-inline: 8px !important; border-radius: var(--radius-control) !important; font-size: 13px !important; } .draw2-workspace-brand strong { font-size: 12px !important; } .draw2-workspace-command-bar { gap: var(--space-xs) !important; } .draw2-workspace-frame .draw2-icon-button, .draw2-workspace-frame .draw2-panel-launcher, .draw2-workspace-frame .draw2-panel-close { box-sizing: border-box; width: var(--icon-button-size) !important; min-width: var(--icon-button-size) !important; max-width: var(--icon-button-size) !important; height: var(--icon-button-size) !important; min-height: var(--icon-button-size) !important; max-height: var(--icon-button-size) !important; padding: 0 !important; border-width: var(--border-w) !important; border-radius: var(--radius-control) !important; } .draw2-workspace-frame .draw2-icon-button .draw2-ui-icon, .draw2-workspace-frame .draw2-panel-launcher .draw2-ui-icon, .draw2-workspace-frame .draw2-panel-close .draw2-ui-icon { width: var(--icon-size) !important; height: var(--icon-size) !important; } .draw2-workspace-frame .draw2-button { min-height: var(--control-h) !important; height: var(--control-h); padding-inline: 12px; border: var(--border-w) solid var(--draw2-border-subtle); border-radius: var(--radius-control) !important; background: var(--draw2-surface-raised); color: var(--draw2-text-strong); font-size: 12px; font-weight: 600; } .draw2-workspace-frame .draw2-button:not(.draw2-button-secondary) { border-color: color-mix( in srgb, var(--draw2-accent-strong) 48%, var(--draw2-border-subtle) ); background: color-mix( in srgb, var(--draw2-accent-strong) 14%, var(--draw2-surface-raised) ); } .draw2-workspace-frame .draw2-button:active, .draw2-workspace-frame .draw2-icon-button:active, .draw2-workspace-frame .draw2-panel-launcher:active { transform: translateY(1px); } .draw2-workspace-frame input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not( [type="color"] ), .draw2-workspace-frame select { box-sizing: border-box; min-height: 30px !important; height: 30px; padding-inline: 8px; border: var(--border-w) solid var(--draw2-border-subtle); border-radius: var(--radius-control) !important; background: var(--draw2-surface-input); color: var(--draw2-text-strong); font-size: 12px; } .draw2-workspace-left-dock { width: var(--tool-rail-w) !important; min-width: var(--tool-rail-w) !important; padding: 8px 6px !important; gap: 8px !important; border-right: var(--border-w) solid var(--draw2-border-subtle) !important; } .draw2-workspace-toolbar { gap: 3px !important; } .draw2-workspace-left-dock .draw2-tool-group, .draw2-workspace-left-dock .draw2-tool-group-summary, .draw2-workspace-left-dock .draw2-workspace-toolbar > .draw2-tool-button { box-sizing: border-box; width: 36px !important; min-width: 36px !important; max-width: 36px !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; border-radius: var(--radius-control) !important; } .draw2-workspace-left-dock .draw2-tool-group-summary, .draw2-workspace-left-dock .draw2-workspace-toolbar > .draw2-tool-button { border: var(--border-w) solid transparent; } .draw2-workspace-left-dock .draw2-tool-icon { width: 20px !important; height: 20px !important; } .draw2-tool-popover { border-radius: var(--radius-popover) !important; padding: var(--space-xs) !important; } .draw2-workspace-canvas-region { padding: 8px !important; } #draw2WorkspaceCanvasSlot > .draw2-canvas-card { border: var(--border-w) solid var(--draw2-border-strong) !important; border-radius: var(--radius-panel) !important; background: var(--draw2-surface-canvas) !important; } .draw2-workspace-right-dock { border-left: var(--border-w) solid var(--draw2-border-subtle) !important; border-radius: var(--radius-panel) 0 0 var(--radius-panel) !important; box-shadow: none !important; } .draw2-workspace-right-header { min-height: var(--panel-header-h) !important; height: var(--panel-header-h); padding: 0 8px !important; border-bottom: var(--border-w) solid var(--draw2-border-subtle) !important; } .draw2-workspace-right-header strong { font-size: 12px !important; font-weight: 600; letter-spacing: 0 !important; text-transform: none !important; } .draw2-workspace-tabs { gap: 0 !important; padding: 0 8px !important; border-bottom: var(--border-w) solid var(--draw2-border-subtle) !important; } .draw2-workspace-tab { min-height: 30px !important; height: 30px; padding-inline: 10px !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; color: var(--draw2-muted); font-size: 12px !important; } .draw2-workspace-tab.is-active { border-bottom-color: var(--draw2-accent-strong) !important; color: var(--draw2-text-strong); } .draw2-palette-strip { padding: 8px !important; border-bottom: var(--border-w) solid var(--draw2-border-subtle) !important; } .draw2-workspace-panel { padding: 8px !important; } .draw2-workspace-panel > .draw2-card-heading, .draw2-workspace-panel > .draw2-help, .draw2-workspace-panel > .draw2-metrics { display: none !important; } .draw2-panel-summary, .draw2-unavailable-state { padding: 8px !important; border-radius: var(--radius-panel) !important; } .draw2-layer-row { min-height: 30px !important; height: 30px !important; padding: 0 !important; border: var(--border-w) solid transparent !important; border-radius: var(--radius-control) !important; } .draw2-layer-row > button, .draw2-layer-name-group > .draw2-layer-visibility, .draw2-layer-name-group > .draw2-layer-select, .draw2-layer-blend { height: 28px !important; min-height: 28px !important; border-radius: var(--radius-control) !important; } .draw2-layer-row.is-active { border-color: var(--draw2-accent-strong) !important; background: var(--draw2-surface-raised); } .draw2-workspace-timeline-region { padding: 4px 8px 6px !important; border-top: var(--border-w) solid var(--draw2-border-subtle) !important; } #draw2WorkspaceTimelineSlot .draw2-timeline-viewport { --draw2-timeline-label-width: 148px !important; --draw2-timeline-cell-width: 30px !important; --draw2-timeline-row-height: 30px !important; border: var(--border-w) solid var(--draw2-border-subtle) !important; border-radius: var(--radius-panel) !important; } .draw2-timeline-corner, .draw2-timeline-frame-header, .draw2-timeline-row-label { height: 30px !important; min-height: 30px !important; border: var(--border-w) solid var(--draw2-border-subtle) !important; border-radius: 2px !important; } .draw2-timeline-frame-header { width: 30px !important; min-width: 30px !important; max-width: 30px !important; font-size: 12px; } .draw2-timeline-row { height: 30px !important; } .draw2-timeline-row-label { width: 148px !important; min-width: 148px !important; padding-inline: 8px !important; font-size: 12px; } .draw2-timeline-cell { top: 0 !important; width: 30px !important; min-width: 30px !important; max-width: 30px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; border: var(--border-w) solid var(--draw2-border-subtle) !important; border-radius: 2px !important; box-shadow: none !important; } .draw2-timeline-cell[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--draw2-accent-strong) !important; } .draw2-timeline-display-actions { gap: var(--space-xs) !important; } .draw2-workspace-timeline-region .draw2-timeline-display-actions .draw2-button { width: var(--icon-button-size) !important; min-width: var(--icon-button-size) !important; height: var(--icon-button-size) !important; min-height: var(--icon-button-size) !important; padding: 0 !important; } .draw2-mini-preview { width: 148px !important; height: 148px !important; padding: 4px !important; border-radius: var(--radius-panel) !important; box-shadow: none !important; } .draw2-mini-preview canvas { width: 140px !important; height: 140px !important; } .draw2-workspace-statusbar { min-height: 24px !important; height: 24px !important; font-size: 11px !important; } .draw2-palette-grid { grid-template-columns: repeat(auto-fill, var(--draw2-control-size)) !important; grid-auto-rows: var(--draw2-control-size) !important; max-height: calc(var(--draw2-control-size) * 2 + 3px) !important; } .draw2-palette-grid .draw2-color, .draw2-palette-grid .draw2-color-add { width: var(--draw2-control-size) !important; min-width: var(--draw2-control-size) !important; max-width: var(--draw2-control-size) !important; height: var(--draw2-control-size) !important; min-height: var(--draw2-control-size) !important; max-height: var(--draw2-control-size) !important; } .draw2-workspace-panel-launcher { flex-basis: var(--draw2-control-size) !important; height: var(--draw2-control-size) !important; } .draw2-workspace-panel-launcher .draw2-panel-launcher { flex-basis: var(--draw2-control-size) !important; width: var(--draw2-control-size) !important; min-width: var(--draw2-control-size) !important; max-width: var(--draw2-control-size) !important; height: var(--draw2-control-size) !important; min-height: var(--draw2-control-size) !important; max-height: var(--draw2-control-size) !important; } #draw2WorkspaceLeftDock .draw2-tool-button, #draw2WorkspaceLeftDock .draw2-panel-launcher { width: var(--draw2-control-size) !important; min-width: var(--draw2-control-size) !important; max-width: var(--draw2-control-size) !important; height: var(--draw2-control-size) !important; min-height: var(--draw2-control-size) !important; max-height: var(--draw2-control-size) !important; } :root { --px-unit: 2px; --px-space-1: 2px; --px-space-2: 4px; --px-space-3: 6px; --px-space-4: 8px; --px-space-6: 12px; --px-space-8: 16px; --px-radius: 2px; --px-outline: #090c12; --px-border: #53627a; --px-inner: #a9b4c4; --px-highlight: #f7f9fc; --px-shadow: #090c12; --draw2-radius-sm: var(--px-radius); --draw2-radius-md: var(--px-radius); --draw2-radius-lg: var(--px-radius); --draw2-shadow-panel: 2px 2px 0 var(--px-shadow); } .draw2-ui-icon, .draw2-ui-icon use { shape-rendering: crispEdges; } .draw2-badge, .draw2-card, .draw2-canvas-card, .draw2-workspace-frame, .draw2-viewport-wrap, .draw2-timeline-viewport, .draw2-runtime-preview-viewport, .draw2-command-palette, .draw2-tool-popover, .draw2-workspace-right-dock { border-radius: var(--px-radius); box-shadow: var(--draw2-shadow-panel); } .draw2-workspace-frame, .draw2-workspace-frame > *, .draw2-workspace-right-dock, .draw2-workspace-timeline-region { border-color: var(--px-border); } .draw2-icon-button, .draw2-tool-button, .draw2-panel-launcher, .draw2-panel-close, .draw2-tool-group > summary { border-radius: var(--px-radius); box-shadow: none; } .draw2-tool-group > summary::before, .draw2-tool-group > summary::after, .draw2-tool-group.is-active > summary::before, .draw2-tool-group.is-active > summary::after { display: none !important; content: none !important; } .draw2-tool-group.is-active > summary, .draw2-tool-group[open] > summary { border: 2px solid var(--draw2-accent-strong); background: var(--draw2-surface-raised); box-shadow: none; } .draw2-tool-popover { grid-template-columns: repeat(3, 56px) !important; grid-auto-rows: 40px; gap: var(--px-space-1); width: max-content; max-width: calc(100vw - 16px); padding: var(--px-space-2); border: 2px solid var(--px-border); box-shadow: 2px 2px 0 var(--px-shadow); background: var(--draw2-surface); } #draw2WorkspaceLeftDock .draw2-tool-popover .draw2-tool-button { display: grid !important; grid-template-rows: 22px 14px; place-items: center; width: 56px !important; min-width: 56px !important; max-width: 56px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; padding: var(--px-space-1) !important; border: 1px solid transparent; border-radius: var(--px-radius); } #draw2WorkspaceLeftDock .draw2-tool-popover .draw2-tool-button span { display: block !important; max-width: 52px; overflow: hidden; font-size: 9px; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; } #draw2WorkspaceLeftDock .draw2-tool-popover .draw2-tool-button .draw2-ui-icon { width: 20px; height: 20px; flex-basis: 20px; } .draw2-tool-popover .draw2-tool-button:hover, .draw2-tool-popover .draw2-tool-button:focus-visible, .draw2-tool-popover .draw2-tool-button.is-active { border-color: var(--draw2-accent-strong); outline: 0; background: var(--draw2-surface-raised); } @media (min-width: 701px) { :root { --draw2-control-size: 40px; } .draw2-workspace-left-dock { position: relative; z-index: 60; overflow: visible; } .draw2-workspace-left-dock .draw2-workspace-toolbar, .draw2-tool-group[open] { position: relative; z-index: 61; overflow: visible; } .draw2-workspace-canvas-region { z-index: 0; } .draw2-workspace-left-dock .draw2-tool-popover { left: calc(100% + var(--px-space-2)); right: auto; } } @media (min-width: 701px) { .draw2-workspace-frame { --draw2-tool-dock-width: 52px; grid-template-columns: minmax(244px, var(--draw2-color-dock-width)) minmax(0, 1fr) minmax( 52px, var(--draw2-tool-dock-width) ); } .draw2-workspace-left-dock { gap: 2px; padding: 4px 2px; } .draw2-workspace-topbar { grid-template-columns: minmax(210px, 260px) minmax(0, 1fr) auto; grid-template-rows: 30px 34px; gap: 2px 8px; padding: 4px 8px; } .draw2-workspace-brand { grid-column: 1; grid-row: 1; } .draw2-workspace-menu-bar { grid-column: 2; grid-row: 1; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; } .draw2-workspace-menu-bar::-webkit-scrollbar { display: none; } .draw2-menu summary { min-height: 28px; border-bottom: 2px solid transparent; border-radius: 2px; } .draw2-menu[open] summary, .draw2-menu summary:focus-visible { border-color: transparent; border-bottom-color: var(--draw2-accent-strong); background: var(--draw2-surface-raised); } .draw2-workspace-project-slot { grid-column: 1; grid-row: 2; } .draw2-workspace-quick-controls { grid-column: 2; grid-row: 2; } .draw2-workspace-command-bar { grid-column: 3; grid-row: 2; } } .draw2-workspace-timeline-region { padding: 0 !important; border-top: 0 !important; } #draw2WorkspaceTimelineSlot > .draw2-timeline-card { padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; } #draw2WorkspaceTimelineSlot .draw2-timeline-display-actions { margin: 0 !important; padding: 2px 0 !important; border: 0 !important; } #draw2WorkspaceTimelineSlot .draw2-timeline-creator-tools { margin: 0 !important; padding: 2px 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } #draw2WorkspaceTimelineSlot .draw2-timeline-viewport { margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: var(--draw2-surface-canvas); } .draw2-timeline-header-row { background: var(--draw2-surface-raised); } .draw2-timeline-corner, .draw2-timeline-frame-header, .draw2-timeline-row-label { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .draw2-timeline-row-label { background: var(--draw2-surface-raised); } .draw2-timeline-cell { display: grid; place-items: center; border: 0 !important; border-radius: 0 !important; background: color-mix( in srgb, var(--draw2-surface) 86%, var(--draw2-surface-raised) ); box-shadow: inset -1px -1px 0 color-mix(in srgb, var(--draw2-border-subtle) 42%, transparent); } .draw2-timeline-cell[data-empty="true"] { background: repeating-linear-gradient( 135deg, var(--draw2-surface) 0 5px, var(--draw2-surface-raised) 5px 10px ); } .draw2-timeline-cell[data-has-drawing="true"]::before { width: 8px; height: 8px; border-radius: 50%; background: var(--draw2-accent-strong); box-shadow: 0 0 0 1px color-mix(in srgb, var(--draw2-accent-strong) 45%, transparent); content: ""; } .draw2-timeline-row[data-layer-visible="false"] .draw2-timeline-cell[data-has-drawing="true"]::before { background: var(--draw2-text-muted); box-shadow: 0 0 0 1px color-mix(in srgb, var(--draw2-text-muted) 45%, transparent); } .draw2-timeline-cell[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--draw2-accent-strong) !important; } .draw2-timeline-cell:hover, .draw2-timeline-cell:focus-visible { border: 0 !important; outline: 2px solid var(--draw2-accent-strong); outline-offset: -2px; } :root { --draw2-resize-hit-size: 12px; --draw2-resize-grip-thickness: 1px; --draw2-resize-grip-length: 32px; } .draw2-dock-resize-handle, .draw2-timeline-resize-handle { appearance: none; display: block; border: 0 !important; background: transparent !important; opacity: 1; outline: 0; } .draw2-dock-resize-handle { left: calc(var(--draw2-resize-hit-size) / -2); width: var(--draw2-resize-hit-size); } .draw2-timeline-resize-handle { top: calc(var(--draw2-resize-hit-size) / -2); height: var(--draw2-resize-hit-size); } .draw2-dock-resize-handle::before, .draw2-timeline-resize-handle::before { content: ""; position: absolute; display: block; background: var(--draw2-border-strong); border-radius: var(--px-radius, 2px); opacity: 0.86; transition: background-color 120ms ease, opacity 120ms ease; } .draw2-dock-resize-handle::before { top: 50%; left: 50%; width: var(--draw2-resize-grip-thickness); height: var(--draw2-resize-grip-length); transform: translate(-50%, -50%); } .draw2-timeline-resize-handle::before { top: 50%; left: 50%; width: var(--draw2-resize-grip-length); height: var(--draw2-resize-grip-thickness); transform: translate(-50%, -50%); } .draw2-dock-resize-handle:hover::before, .draw2-dock-resize-handle:focus-visible::before, .draw2-timeline-resize-handle:hover::before, .draw2-timeline-resize-handle:focus-visible::before { background: var(--draw2-accent-strong); opacity: 1; } .draw2-dock-resize-handle:focus-visible, .draw2-timeline-resize-handle:focus-visible { outline: 2px solid var(--draw2-focus-ring); outline-offset: -1px; } @media (min-width: 701px) { .draw2-workspace-topbar { grid-template-columns: minmax(164px, 220px) minmax(0, 1fr) auto !important; grid-template-rows: 30px 34px !important; align-items: center; gap: 2px 8px; min-width: 0; overflow: hidden; } .draw2-workspace-topbar > .draw2-workspace-brand { grid-column: 1; grid-row: 1; } .draw2-workspace-topbar > .draw2-workspace-menu-bar { grid-column: 2; grid-row: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; justify-content: flex-start; scrollbar-width: none; } .draw2-workspace-topbar > .draw2-workspace-project-slot { grid-column: 1; grid-row: 2; min-width: 0; overflow: hidden; } .draw2-workspace-topbar > .draw2-workspace-quick-controls { grid-column: 2; grid-row: 2; min-width: 0; overflow-x: auto; overflow-y: hidden; justify-content: flex-start; scrollbar-width: none; } .draw2-workspace-topbar > .draw2-workspace-command-bar { grid-column: 3; grid-row: 1 / span 2; align-self: center; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; justify-content: flex-end; scrollbar-width: none; } .draw2-workspace-menu-bar::-webkit-scrollbar, .draw2-workspace-quick-controls::-webkit-scrollbar, .draw2-workspace-command-bar::-webkit-scrollbar { display: none; } .draw2-workspace-command-bar > *, .draw2-workspace-quick-controls > * { flex: 0 0 auto; } } .draw2-workspace-frame select { appearance: none; min-height: var(--draw2-control-height, 32px); padding: 0 24px 0 8px; border: 1px solid var(--draw2-border-strong); border-radius: var(--px-radius, 2px); background-color: var(--draw2-surface-input); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237a8ba0' stroke-width='1.5'/%3E%3C/svg%3E"); background-position: right 7px center; background-repeat: no-repeat; background-size: 10px 6px; color: var(--draw2-text-strong); font: inherit; line-height: 1; } .draw2-workspace-frame select:hover, .draw2-workspace-frame select:focus-visible { border-color: var(--draw2-accent-strong); } .draw2-workspace-frame select:focus-visible { outline: 2px solid var(--draw2-focus-ring); outline-offset: 1px; } .draw2-timeline-rate select, .draw2-layer-blend, .draw2-workspace-project-slot select { background-position: right 5px center; } .draw2-workspace-right-dock > * { min-width: 0; } .draw2-workspace-panel { min-width: 0; } .draw2-workspace-panel > *, .draw2-color-editor, .draw2-color-editor > *, .draw2-export-panel, .draw2-export-grid { min-width: 0; max-width: 100%; } .draw2-color-picker { min-width: 0; max-width: 100%; } .draw2-color-picker canvas { width: min(220px, 100%); height: auto; image-rendering: crisp-edges; } .draw2-palette-grid { min-width: 0; max-width: 100%; } .draw2-mirror-guide-overlay { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; overflow: visible; pointer-events: none; shape-rendering: crispEdges; } .draw2-mirror-guide-overlay[hidden], .draw2-mirror-guide-line[hidden] { display: none; } .draw2-mirror-guide-line { fill: none; stroke: var(--draw2-accent-strong); stroke-width: 1.5px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; opacity: 0.9; } .draw2-mirror-guide-line--horizontal { stroke: var(--draw2-warning-strong); } .draw2-mirror-guide-line--diagonal-down { stroke: #c6a0ff; } .draw2-mirror-guide-line--diagonal-up { stroke: #8bd7ff; } html:has(#draw2WorkspaceFrame), body:has(#draw2WorkspaceFrame) { overflow: hidden; } body:has(#draw2WorkspaceFrame) { min-height: 100dvh; margin: 0; } .draw2-shell:has(#draw2WorkspaceFrame) { width: 100%; max-width: none; height: 100dvh; min-height: 100dvh; padding: 0; } .draw2-shell:has(#draw2WorkspaceFrame) > .draw2-header { display: none !important; } .draw2-workspace-frame { width: 100%; height: 100dvh; min-height: 0; margin: 0; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; grid-template-columns: var(--draw2-tool-rail-width) minmax(0, 1fr) minmax( 260px, var(--draw2-panel-width) ); grid-template-rows: auto minmax(0, 1fr) var(--draw2-timeline-height) var( --draw2-statusbar-height ); grid-template-areas: "top top top" "left canvas right" "timeline timeline timeline" "status status status"; } .draw2-workspace-topbar { display: block; min-width: 0; padding: 0; } .draw2-workspace-global-row { display: grid; grid-template-columns: minmax(128px, auto) minmax(0, 1fr) minmax(160px, 240px) auto; min-height: 38px; gap: 6px; padding: 3px 6px; } .draw2-workspace-global-row { grid-template-rows: 32px; grid-auto-rows: 32px; } .draw2-workspace-global-row > * { grid-column: auto !important; grid-row: 1 !important; } .draw2-workspace-context-row { display: flex; align-items: center; min-width: 0; min-height: 38px; padding: 3px 6px; } .draw2-workspace-context-row > * { grid-column: auto !important; grid-row: auto !important; } .draw2-workspace-brand { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; } .draw2-workspace-brand .draw2-eyebrow, .draw2-workspace-brand .draw2-workspace-status { display: none; } .draw2-brand-icon { width: 18px; height: 18px; color: var(--draw2-accent-strong); } .draw2-workspace-brand strong { font-size: 0.78rem; letter-spacing: 0.03em; } .draw2-workspace-menu-bar { display: flex; align-items: center; gap: 1px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .draw2-workspace-menu-bar::-webkit-scrollbar, .draw2-workspace-command-bar::-webkit-scrollbar, .draw2-workspace-quick-controls::-webkit-scrollbar { display: none; } .draw2-workspace-menu-bar .draw2-menu { flex: 0 0 auto; } .draw2-workspace-menu-bar .draw2-menu summary { min-height: 30px; padding: 0 7px; border: 1px solid transparent; border-radius: var(--draw2-radius-sm); font-size: 0.69rem; white-space: nowrap; } .draw2-workspace-menu-bar .draw2-menu summary:hover, .draw2-workspace-menu-bar .draw2-menu[open] summary { background: var(--draw2-surface-raised); } .draw2-workspace-menu-bar .draw2-menu-popover { z-index: 80; } .draw2-workspace-menu-bar hr { height: 1px; margin: 4px 0; border: 0; background: var(--draw2-border-subtle); } .draw2-workspace-project-slot { min-width: 0; align-self: center; } .draw2-workspace-project-slot .draw2-controls { gap: 4px; } .draw2-workspace-project-slot .draw2-controls label { font-size: 0; } .draw2-workspace-project-slot .draw2-controls input, .draw2-workspace-project-slot .draw2-controls select { min-height: 30px; padding-inline: 7px; font-size: 0.69rem; } .draw2-workspace-project-slot #draw2CreateProject { min-height: 30px; font-size: 0.65rem; } .draw2-workspace-command-bar { display: flex; align-items: center; justify-content: flex-end; gap: 2px; min-width: 0; } .draw2-workspace-command-bar .draw2-icon-button { width: var(--draw2-control-size); min-width: var(--draw2-control-size); height: var(--draw2-control-size); min-height: var(--draw2-control-size); padding: 0; } .draw2-workspace-command-bar .draw2-icon-button span { display: none; } .draw2-theme-control, .draw2-language-control { font-size: 0; } .draw2-theme-control select, .draw2-language-control select { width: 32px; min-height: 30px; padding: 0 2px; font-size: 0.65rem; } .draw2-workspace-quick-controls { display: flex; align-items: center; gap: 5px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .draw2-workspace-quick-controls::before { content: ""; width: 2px; height: 20px; flex: 0 0 auto; background: var(--draw2-accent-strong); } .draw2-quick-control { min-height: 30px; } .draw2-quick-control > span { font-size: 0.62rem; } .draw2-quick-control select, .draw2-quick-control input { min-height: 30px; } .draw2-workspace-left-dock { grid-area: left; width: var(--draw2-tool-rail-width); min-width: var(--draw2-tool-rail-width); padding: 6px 4px; gap: 8px; border-right: 1px solid var(--draw2-border-subtle); } .draw2-workspace-toolbar { display: flex; flex-direction: column; align-items: center; gap: 3px; overflow: visible; } .draw2-workspace-left-dock .draw2-workspace-panel-launcher { display: none; } .draw2-tool-group, .draw2-tool-group-summary, .draw2-workspace-toolbar > .draw2-tool-button { width: var(--draw2-control-size); height: var(--draw2-control-size); min-width: var(--draw2-control-size); min-height: var(--draw2-control-size); } .draw2-tool-group-summary, .draw2-workspace-toolbar > .draw2-tool-button { display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: var(--draw2-radius-sm); background: transparent; } .draw2-tool-group-summary:hover, .draw2-tool-group[open] > .draw2-tool-group-summary, .draw2-tool-group.is-active > .draw2-tool-group-summary, .draw2-workspace-toolbar > .draw2-tool-button:hover, .draw2-workspace-toolbar > .draw2-tool-button.is-active { border-color: color-mix(in srgb, var(--draw2-accent-strong) 72%, transparent); background: color-mix(in srgb, var(--draw2-accent-strong) 16%, transparent); } .draw2-tool-group-summary .draw2-tool-group-label, .draw2-workspace-toolbar > .draw2-tool-button span { display: none; } .draw2-tool-group-summary .draw2-tool-icon, .draw2-workspace-toolbar > .draw2-tool-button .draw2-tool-icon { width: var(--draw2-icon-size); height: var(--draw2-icon-size); } .draw2-tool-group > .draw2-tool-popover { z-index: 90; display: none !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; min-width: 156px; padding: 5px; border: 1px solid var(--draw2-border-strong); border-radius: var(--draw2-radius-md); background: var(--draw2-surface); box-shadow: var(--draw2-shadow-panel); } .draw2-tool-group[open] > .draw2-tool-popover { display: grid !important; visibility: visible; pointer-events: auto; } .draw2-tool-group:not([open]) > .draw2-tool-popover { display: none !important; visibility: hidden; pointer-events: none; } .draw2-tool-group > .draw2-tool-popover .draw2-tool-button { min-height: 32px; padding: 3px 5px; justify-content: flex-start; border: 1px solid transparent; border-radius: var(--draw2-radius-sm); } .draw2-tool-group > .draw2-tool-popover .draw2-tool-button span { font-size: 0.65rem; } .draw2-workspace-canvas-region { padding: 6px; background: var(--draw2-surface-canvas); } #draw2WorkspaceCanvasSlot > .draw2-canvas-card { padding: 0; border: 0; border-radius: 0; background: transparent; } #draw2WorkspaceCanvasSlot .draw2-viewport-wrap { margin-top: 0; min-height: 0; } .draw2-workspace-right-dock { grid-area: right; min-width: 0; border-left: 1px solid var(--draw2-border-subtle); } .draw2-workspace-right-header { min-height: 34px; padding: 3px 6px; } .draw2-workspace-right-header strong { font-size: 0.69rem; letter-spacing: 0.05em; text-transform: uppercase; } .draw2-panel-close { width: 28px; min-width: 28px; height: 28px; min-height: 28px; border-color: transparent; background: transparent; } .draw2-panel-close .draw2-ui-icon { width: 16px; height: 16px; } .draw2-workspace-tabs { order: 1; gap: 2px; padding: 4px 6px; } .draw2-workspace-tab { min-height: 30px; padding: 0 8px; border: 0; border-radius: var(--draw2-radius-sm); font-size: 0.67rem; } .draw2-workspace-tab.is-active { border-bottom: 2px solid var(--draw2-accent-strong); background: var(--draw2-surface-raised); } .draw2-palette-strip { order: 2; padding: 6px; border-bottom: 1px solid var(--draw2-border-subtle); } .draw2-workspace-panel { order: 3; padding: 7px; } .draw2-workspace-panel .draw2-help, .draw2-workspace-panel > .draw2-card-heading, .draw2-workspace-panel > .draw2-metrics { display: none; } .draw2-workspace-frame.is-right-dock-collapsed { grid-template-columns: var(--draw2-tool-rail-width) minmax(0, 1fr) 0; } .draw2-workspace-frame.is-right-dock-collapsed .draw2-workspace-right-dock { min-width: 0; width: 0; overflow: hidden; border-left: 0; } .draw2-workspace-timeline-region { min-height: 0; padding: 4px 6px 5px; } #draw2WorkspaceTimelineSlot, #draw2WorkspaceTimelineSlot > .draw2-timeline-card { min-height: 0; height: 100%; } #draw2WorkspaceTimelineSlot > .draw2-timeline-card { padding: 0; overflow: hidden; border: 0; border-radius: 0; background: transparent; } .draw2-workspace-timeline-region .draw2-card-heading { display: none; } .draw2-workspace-timeline-region .draw2-timeline-display-actions { min-height: 30px; margin: 0 0 3px; padding: 0; gap: 3px; overflow-x: auto; } .draw2-workspace-timeline-region .draw2-timeline-display-actions .draw2-button { flex: 0 0 var(--draw2-control-size); width: var(--draw2-control-size); min-width: var(--draw2-control-size); min-height: var(--draw2-control-size); padding: 0; } .draw2-timeline-secondary { margin: 0 0 3px; font-size: 0.65rem; } .draw2-timeline-secondary > summary { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 5px; border-radius: var(--draw2-radius-sm); color: var(--draw2-text-muted); cursor: pointer; list-style: none; } .draw2-timeline-secondary > summary::-webkit-details-marker { display: none; } .draw2-timeline-secondary[open] > summary { background: var(--draw2-surface-raised); color: var(--draw2-text-strong); } .draw2-timeline-secondary .draw2-timeline-creator-tools { max-height: 112px; margin-top: 3px; overflow: auto; } .draw2-workspace-timeline-region .draw2-timeline-viewport { height: calc(100% - 62px); max-height: none; margin-top: 0; border-radius: var(--draw2-radius-sm); } .draw2-workspace-statusbar { grid-area: status; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 0 8px; overflow: hidden; background: var(--draw2-surface); color: var(--draw2-text-muted); font-size: 0.62rem; white-space: nowrap; } .draw2-workspace-statusbar > span { overflow: hidden; text-overflow: ellipsis; } .draw2-statusbar-spacer { flex: 1 1 auto; } .draw2-statusbar-save { display: inline-flex; align-items: center; gap: 4px; } .draw2-statusbar-save i { width: 6px; height: 6px; border-radius: 50%; background: var(--draw2-accent-strong); } .draw2-workspace-frame[data-workspace-preset="animation"] { --draw2-timeline-height: clamp(190px, 33dvh, 340px); } .draw2-workspace-frame[data-workspace-preset="tileset"] { --draw2-timeline-height: clamp(140px, 20dvh, 220px); } .draw2-workspace-frame.is-focus-mode { grid-template-columns: var(--draw2-tool-rail-width) minmax(0, 1fr) 0; grid-template-rows: auto minmax(0, 1fr) 0 var(--draw2-statusbar-height); } .draw2-workspace-frame.is-focus-mode .draw2-workspace-right-dock, .draw2-workspace-frame.is-focus-mode .draw2-workspace-timeline-region { width: 0; min-width: 0; min-height: 0; overflow: hidden; border: 0; pointer-events: none; visibility: hidden; } @media (prefers-reduced-motion: reduce) { .draw2-workspace-frame *, .draw2-workspace-right-dock { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } .draw2-workspace-right-dock > .draw2-workspace-right-header .draw2-panel-close { display: grid; place-items: center; width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0; border-color: transparent; background: transparent; } .draw2-workspace-right-dock > .draw2-workspace-right-header strong { font-size: 0.69rem; letter-spacing: 0.05em; text-transform: uppercase; } .draw2-workspace-right-dock > .draw2-workspace-right-header strong::before { display: none; content: none; } :root { --draw2-control-size: 32px; --draw2-timeline-cell-size: 30px; } .draw2-workspace-frame .draw2-tool-group-summary, .draw2-workspace-frame .draw2-workspace-toolbar > .draw2-tool-button { border-width: 1px !important; border-radius: 4px !important; } .draw2-workspace-frame #draw2WorkspaceCanvasSlot > .draw2-canvas-card { border: 1px solid var(--draw2-border-strong) !important; border-radius: 4px !important; } .draw2-workspace-frame .draw2-workspace-right-header { height: 32px !important; min-height: 32px !important; border-bottom: 1px solid var(--draw2-border-subtle) !important; } .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-viewport { border: 1px solid var(--draw2-border-subtle) !important; border-radius: 4px !important; } .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-cell, .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-frame-header, .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-corner, .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-row-label { border: 1px solid var(--draw2-border-subtle) !important; border-radius: 2px !important; } .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-cell { width: 30px !important; min-width: 30px !important; max-width: 30px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; box-shadow: none !important; } .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-cell[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--draw2-accent-strong) !important; } .draw2-workspace-global-row > *, .draw2-workspace-context-row > * { min-width: 0; } .draw2-workspace-global-row > .draw2-workspace-menu-bar { position: relative !important; left: auto !important; right: auto !important; } .draw2-workspace-menu-bar, .draw2-workspace-command-bar, .draw2-workspace-quick-controls { scrollbar-width: thin; } .draw2-workspace-command-bar { overflow-x: auto; overflow-y: hidden; justify-content: flex-start; } .draw2-workspace-project-slot { overflow: hidden; } .draw2-workspace-left-dock .draw2-workspace-toolbar { overflow: visible !important; } .draw2-tool-popover.is-flyout-positioned { position: fixed !important; z-index: 250 !important; left: 0; top: 0; right: auto !important; bottom: auto !important; transform: none !important; max-width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px) !important; overflow: auto !important; overscroll-behavior: contain; } :root { --draw2-timeline-tab-height: 30px; --draw2-timeline-toolbar-height: 34px; --draw2-timeline-row-height: 30px; --draw2-timeline-frame-width: 30px; --draw2-timeline-layer-width: 180px; --draw2-timeline-playhead-width: 1px; } .draw2-timeline-card { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .draw2-timeline-card[data-timeline-collapse="collapsed"] > :not(.draw2-timeline-heading):not(.draw2-timeline-collapsed-bar) { display: none !important; } .draw2-timeline-heading { flex: 0 0 auto; min-height: 28px; margin: 0; padding: 0 6px; } .draw2-timeline-heading .draw2-metrics { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-timeline-heading > .draw2-button { flex: 0 0 28px; width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0; } .draw2-workspace-timeline-region .draw2-timeline-heading { position: absolute; z-index: 18; top: 0; right: 2px; display: flex !important; width: 32px; min-height: 30px; padding: 0; background: transparent; pointer-events: none; } .draw2-workspace-timeline-region .draw2-timeline-heading-content, .draw2-workspace-timeline-region .draw2-timeline-heading .draw2-metrics { display: none; } .draw2-workspace-timeline-region .draw2-timeline-heading > .draw2-button { pointer-events: auto; } #draw2WorkspaceTimelineSlot .draw2-timeline-heading { display: flex !important; } .draw2-timeline-tabs { display: flex; flex: 0 0 var(--draw2-timeline-tab-height); align-items: stretch; gap: 2px; min-width: 0; min-height: var(--draw2-timeline-tab-height); overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--draw2-border-subtle); scrollbar-width: thin; } .draw2-timeline-tab { flex: 0 0 auto; height: var(--draw2-timeline-tab-height); min-height: var(--draw2-timeline-tab-height); padding: 0 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--draw2-text-muted); font-size: 0.68rem; font-weight: 600; cursor: pointer; } .draw2-timeline-tab:hover, .draw2-timeline-tab:focus-visible { color: var(--draw2-text-strong); outline: 0; } .draw2-timeline-tab.is-active { border-bottom-color: var(--draw2-accent-strong); color: var(--draw2-text-strong); background: color-mix(in srgb, var(--draw2-accent-strong) 8%, transparent); } .draw2-timeline-toolbar { flex: 0 0 var(--draw2-timeline-toolbar-height); min-height: var(--draw2-timeline-toolbar-height) !important; margin: 0; padding: 1px 4px; align-items: center; gap: 3px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } .draw2-timeline-toolbar > .draw2-button, .draw2-timeline-toolbar > .draw2-timeline-onion-options > summary, .draw2-timeline-toolbar > .draw2-timeline-more-actions > summary { flex: 0 0 30px; width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; border-radius: 3px; } .draw2-timeline-toolbar .draw2-timeline-rate, .draw2-timeline-toolbar .draw2-timeline-loop { flex: 0 0 auto; } .draw2-timeline-toolbar select { height: 28px; min-height: 28px; padding-inline: 6px; } #draw2PlaybackFpsCustom { width: 46px; min-width: 46px; height: 28px; min-height: 28px; padding-inline: 4px; } .draw2-timeline-toolbar .draw2-timeline-loop { display: inline-grid; place-items: center; width: 28px; height: 28px; } .draw2-timeline-toolbar .draw2-timeline-loop input { position: absolute; opacity: 0; pointer-events: none; } .draw2-timeline-toolbar .draw2-timeline-loop:has(input:checked) { color: var(--draw2-accent-strong); } .draw2-timeline-onion-options, .draw2-timeline-more-actions { position: relative; flex: 0 0 30px; min-width: 30px; } .draw2-timeline-onion-options > summary, .draw2-timeline-more-actions > summary { display: grid; place-items: center; list-style: none; cursor: pointer; } .draw2-timeline-onion-options > summary::-webkit-details-marker, .draw2-timeline-more-actions > summary::-webkit-details-marker { display: none; } .draw2-timeline-onion-popover, .draw2-timeline-more-popover { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; display: grid; gap: 5px; min-width: 190px; padding: 7px; border: 1px solid var(--draw2-border-strong); border-radius: 4px; background: var(--draw2-surface-raised); box-shadow: var(--draw2-shadow-panel); } .draw2-timeline-more-popover { grid-template-columns: repeat(4, 30px); min-width: 144px; } .draw2-timeline-more-popover .draw2-button { width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; } .draw2-timeline-onion-popover .draw2-onion-control { display: grid; grid-template-columns: 18px 1fr 28px; align-items: center; gap: 5px; min-width: 170px; font-size: 0.65rem; } .draw2-timeline-onion-popover .draw2-onion-control input { min-width: 0; } .draw2-timeline-onion-popover .draw2-onion-mode-control { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 5px; min-width: 170px; min-height: var(--draw2-control-size); color: var(--draw2-text-muted); font-size: 0.65rem; } .draw2-timeline-onion-popover .draw2-onion-mode-control select { min-width: 0; min-height: 28px; padding: 0 6px; border: 1px solid var(--draw2-border-subtle); border-radius: 3px; background: var(--draw2-surface); color: var(--draw2-text-strong); font: inherit; } .draw2-timeline-tab-panel { flex: 1 1 auto; min-height: 0; overflow: hidden; } .draw2-timeline-tab-panel[hidden] { display: none !important; } .draw2-timeline-tab-panel[data-draw2-timeline-tab-panel="timeline"] { display: flex; flex-direction: column; } .draw2-timeline-more-controls { flex: 0 0 24px; position: relative; margin: 0 4px 2px; } .draw2-timeline-more-controls > summary { display: grid; place-items: center; width: 26px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 3px; color: var(--draw2-text-muted); list-style: none; cursor: pointer; } .draw2-timeline-more-controls > summary::-webkit-details-marker { display: none; } .draw2-timeline-inline-controls { display: flex; align-items: center; gap: 6px; position: absolute; z-index: 18; top: 25px; left: 0; padding: 5px; border: 1px solid var(--draw2-border-strong); border-radius: 4px; background: var(--draw2-surface-raised); box-shadow: var(--draw2-shadow-panel); font-size: 0.65rem; } .draw2-timeline-inline-controls .draw2-button { min-height: 28px; padding-inline: 7px; } .draw2-timeline-viewport { flex: 1 1 auto; min-width: 0; min-height: 96px; max-height: none; margin: 0 4px 3px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--draw2-border-subtle); border-radius: 3px; background: var(--draw2-surface-canvas); scrollbar-width: thin; } .draw2-timeline-viewport { --draw2-timeline-label-width: var(--draw2-timeline-layer-width) !important; --draw2-timeline-cell-width: var(--draw2-timeline-frame-width) !important; } .draw2-timeline-window { position: absolute; inset: 0; min-width: 0; min-height: 0; } .draw2-timeline-header-row { position: sticky; top: 0; z-index: 8; min-width: 100%; background: var(--draw2-surface-raised); } .draw2-timeline-corner, .draw2-timeline-frame-header, .draw2-timeline-row-label, .draw2-timeline-cell { border-color: color-mix(in srgb, var(--draw2-border-subtle) 80%, transparent) !important; border-radius: 2px !important; } .draw2-timeline-corner, .draw2-timeline-frame-header { background: var(--draw2-surface-raised); } .draw2-timeline-frame-header[data-selected="true"], .draw2-timeline-frame-header[aria-selected="true"] { background: color-mix( in srgb, var(--draw2-accent-strong) 16%, var(--draw2-surface-raised) ); color: var(--draw2-text-strong); } .draw2-timeline-frame-header[data-tag-count]::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--draw2-accent-strong); } .draw2-timeline-frame-header[data-marker-count]::before { content: ""; position: absolute; left: 3px; top: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--draw2-warning, #f5c96a); } .draw2-timeline-row-label { background: var(--draw2-surface-raised); color: var(--draw2-text-muted); text-align: left; } .draw2-timeline-row-label[data-selected="true"] { color: var(--draw2-text-strong); background: color-mix( in srgb, var(--draw2-accent-strong) 12%, var(--draw2-surface-raised) ); } .draw2-timeline-row-label[data-layer-visible="false"]::before { content: ""; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--draw2-text-muted); opacity: 0.55; } .draw2-timeline-row-label[data-layer-visible="true"]::before { content: ""; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--draw2-accent-strong); } .draw2-timeline-cell { background: var(--draw2-surface); } .draw2-timeline-cell[data-active-frame="true"] { background: color-mix( in srgb, var(--draw2-accent-strong) 5%, var(--draw2-surface) ); } .draw2-timeline-cell[data-selected="true"], .draw2-timeline-cell[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--draw2-accent-strong) !important; background: color-mix( in srgb, var(--draw2-accent-strong) 17%, var(--draw2-surface) ); } .draw2-timeline-cell[data-locked="true"] { opacity: 0.55; cursor: pointer; } .draw2-timeline-linked-icon { position: absolute; right: 2px; bottom: 0; width: 10px; height: 10px; flex: 0 0 10px; color: var(--draw2-accent-strong); } .draw2-timeline-playhead { position: absolute; top: 0; z-index: 7; width: var(--draw2-timeline-playhead-width); background: var(--draw2-accent-strong); opacity: 0.9; pointer-events: none; } .draw2-timeline-context-menu { position: fixed; z-index: 260; display: grid; gap: 2px; width: 172px; padding: 4px; border: 1px solid var(--draw2-border-strong); border-radius: 4px; background: var(--draw2-surface-raised); box-shadow: var(--draw2-shadow-panel); } .draw2-timeline-context-menu[hidden] { display: none !important; } .draw2-timeline-context-menu .draw2-button { justify-content: flex-start; width: 100%; min-height: 28px; padding-inline: 7px; border: 0; border-radius: 2px; font-size: 0.66rem; } .draw2-timeline-context-menu .draw2-button:hover, .draw2-timeline-context-menu .draw2-button:focus-visible { background: color-mix(in srgb, var(--draw2-accent-strong) 14%, transparent); outline: 0; } .draw2-timeline-collapsed-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 30px; padding: 0 6px; color: var(--draw2-text-muted); font-size: 0.68rem; } .draw2-timeline-collapsed-bar .draw2-button { width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0; } .draw2-timeline-unavailable { display: flex; align-items: center; gap: 10px; min-height: 56px; margin: 4px; padding: 8px 10px; border: 1px dashed var(--draw2-border-subtle); border-radius: 3px; color: var(--draw2-text-muted); font-size: 0.68rem; } .draw2-timeline-unavailable strong { color: var(--draw2-text-strong); white-space: nowrap; } .draw2-timeline-single-panel { display: block; max-height: none; overflow: auto; padding: 8px; } .draw2-timeline-single-panel .draw2-timeline-creator-group { max-width: 620px; } .draw2-workspace-timeline-region[data-timeline-collapse="collapsed"] { min-height: 32px !important; } .draw2-workspace-timeline-region[data-timeline-collapse="compact"] { --draw2-timeline-row-height: 26px; --draw2-timeline-frame-width: 26px; } @media (min-width: 701px) { .draw2-workspace-frame:has( #draw2WorkspaceTimelineRegion[data-timeline-collapse="collapsed"] ) { grid-template-rows: auto minmax(0, 1fr) 32px var(--draw2-statusbar-height) !important; } } .draw2-workspace-right-dock { position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(120px, var(--draw2-right-palette-ratio, 30%)) 8px minmax(100px, 1fr) !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; border-radius: 0 !important; } .draw2-workspace-right-dock > #draw2WorkspaceRightResize { position: absolute !important; z-index: 40; top: 0; left: -5px; bottom: 0; width: 10px; grid-row: 1 / -1; } .draw2-workspace-right-dock > #draw2WorkspacePaletteStrip { grid-column: 1; grid-row: 1; display: block !important; min-width: 0; min-height: 0; max-height: none; padding: 6px; overflow: auto; border: 0; background: var(--draw2-surface); } .draw2-workspace-right-dock .draw2-palette-active-color { display: none; } .draw2-workspace-right-dock > #draw2WorkspacePaletteResize { grid-column: 1; grid-row: 2; z-index: 30; width: 100%; height: 8px; min-height: 8px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: ns-resize; touch-action: none; } .draw2-workspace-right-dock > #draw2WorkspacePaletteResize:hover, .draw2-workspace-right-dock > #draw2WorkspacePaletteResize:focus-visible, .draw2-workspace-right-dock > #draw2WorkspacePaletteResize.is-resizing, .draw2-workspace-right-dock.is-palette-resizing > #draw2WorkspacePaletteResize { background: var(--draw2-accent-strong); outline: 0; } .draw2-right-custom-dock { position: relative; grid-column: 1; grid-row: 3; display: flex; flex-direction: column; min-width: 0; min-height: 100px; overflow: hidden; background: var(--draw2-surface); } .draw2-right-custom-dock > .draw2-workspace-tabs { order: 0; display: flex; flex: 0 0 32px; align-items: stretch; gap: 0; height: 32px; min-height: 32px; min-width: 0; padding: 0 6px; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--draw2-border-subtle); background: var(--draw2-surface); scrollbar-width: thin; } .draw2-right-custom-dock > .draw2-workspace-tabs .draw2-workspace-tab { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; height: 32px; min-height: 32px; min-width: 0; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--draw2-text-muted); font-size: 0.68rem; white-space: nowrap; } .draw2-right-custom-dock > .draw2-workspace-tabs .draw2-workspace-tab[data-right-tab-visible="true"] { display: inline-flex !important; } .draw2-right-custom-dock > .draw2-workspace-tabs .draw2-workspace-tab[hidden], .draw2-right-custom-dock > .draw2-workspace-tabs .draw2-workspace-tab[data-right-tab-visible="false"] { display: none !important; } .draw2-right-custom-dock > .draw2-workspace-tabs .draw2-workspace-tab.is-active { border-bottom-color: var(--draw2-accent-strong); background: color-mix(in srgb, var(--draw2-accent-strong) 8%, transparent); color: var(--draw2-text-strong); } .draw2-right-custom-dock > .draw2-workspace-tabs .draw2-workspace-tab-add { width: 32px; min-width: 32px; padding: 0; border-bottom-color: transparent; font-size: 1rem; } .draw2-right-custom-dock > .draw2-workspace-panel { order: 2; flex: 1 1 auto; min-width: 0; min-height: 0; margin: 0; padding: 8px; overflow: auto; border: 0; border-radius: 0; background: transparent; touch-action: pan-y; } .draw2-right-custom-dock > .draw2-workspace-panel[hidden] { display: none !important; } .draw2-workspace-right-dock > #draw2WorkspaceColorEditor { display: none !important; } .draw2-right-custom-empty { display: grid; flex: 1 1 auto; place-content: center; justify-items: center; gap: 4px; min-height: 100px; color: var(--draw2-text-muted); font-size: 0.68rem; } .draw2-right-custom-empty > span { color: var(--draw2-accent-strong); font-size: 1.1rem; } .draw2-right-panel-picker { position: absolute; z-index: 300; top: 34px; right: 6px; display: grid; gap: 7px; width: min(280px, calc(100% - 12px)); max-height: 420px; padding: 8px; overflow: hidden; border: 1px solid var(--draw2-border-strong); border-radius: 4px; background: var(--draw2-surface-raised); box-shadow: var(--draw2-shadow-panel); } .draw2-right-panel-picker[hidden] { display: none !important; } .draw2-right-panel-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.7rem; } .draw2-panel-picker-close { width: 28px; min-width: 28px; height: 28px; padding: 0; border: 0; background: transparent; } .draw2-right-panel-picker input { width: 100%; min-height: 30px; padding: 0 8px; } #draw2WorkspacePanelOptions { display: grid; min-height: 0; overflow: auto; } .draw2-right-panel-option { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 30px; padding: 0 6px; border: 0; border-radius: 2px; background: transparent; color: var(--draw2-text-strong); text-align: left; font-size: 0.68rem; } .draw2-right-panel-option:hover:not(:disabled), .draw2-right-panel-option:focus-visible { background: color-mix(in srgb, var(--draw2-accent-strong) 14%, transparent); outline: 0; } .draw2-right-panel-option:disabled { color: var(--draw2-text-muted); cursor: default; opacity: 0.7; } .draw2-right-panel-option-mark { color: var(--draw2-accent-strong); text-align: center; } .draw2-right-panel-option small { color: var(--draw2-text-muted); font-size: 0.58rem; } .draw2-right-panel-picker-empty { margin: 4px; color: var(--draw2-text-muted); font-size: 0.66rem; } .draw2-right-panel-state { display: inline-block; margin-left: 6px; color: var(--draw2-text-muted); font-size: 0.62rem; } .draw2-panel-shell { display: grid; gap: var(--draw2-space-2); min-width: 0; } .draw2-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--draw2-space-2); min-width: 0; padding-bottom: 4px; border-bottom: 1px solid var(--draw2-border-subtle); } .draw2-panel-heading > div { display: grid; gap: 2px; min-width: 0; } .draw2-panel-heading strong { overflow: hidden; color: var(--draw2-text-strong); font-size: 0.84rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-panel-heading output { color: var(--draw2-accent-strong); font: 700 0.68rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-panel-badge { flex: 0 0 auto; color: var(--draw2-accent-strong); font: 700 0.56rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; } .draw2-panel-note, .draw2-panel-status, .draw2-panel-empty { margin: 0; color: var(--draw2-text-muted); font-size: 0.66rem; line-height: 1.45; } .draw2-panel-status { min-height: 1.45em; } .draw2-panel-action-row { display: flex; align-items: center; gap: 5px; min-width: 0; } .draw2-panel-action-row .draw2-button { min-width: 0; flex: 1 1 auto; } .draw2-panel-stat-grid, .draw2-panel-control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; } .draw2-panel-stat-grid > div { display: grid; gap: 2px; padding: 6px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); } .draw2-panel-stat-grid small { color: var(--draw2-text-muted); font-size: 0.58rem; } .draw2-panel-stat-grid strong { color: var(--draw2-text-strong); font: 700 0.9rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-panel-control-grid label, .draw2-panel-field, .draw2-panel-range-label { display: grid; gap: 3px; min-width: 0; color: var(--draw2-text-muted); font-size: 0.62rem; } .draw2-panel-control-grid select, .draw2-panel-field input, .draw2-panel-field select { min-width: 0; width: 100%; min-height: 30px; padding-inline: 6px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-strong); font-size: 0.66rem; } .draw2-panel-range-label input { width: 100%; min-width: 0; } .draw2-panel-range-label output { color: var(--draw2-text-strong); font: 700 0.6rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-panel-field { gap: 4px; } .draw2-history-list, .draw2-game-scene-list, .draw2-game-assets-list, .draw2-build-check-list, .draw2-audio-panel-list { display: grid; gap: 4px; min-height: 0; max-height: 230px; overflow: auto; overscroll-behavior: contain; } .draw2-history-entry, .draw2-game-scene-entry, .draw2-game-asset-entry, .draw2-build-check, .draw2-audio-panel-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0; min-height: 32px; padding: 5px 6px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); } .draw2-history-entry small, .draw2-game-scene-entry small, .draw2-game-asset-entry small, .draw2-build-check small, .draw2-audio-panel-entry small { display: block; overflow: hidden; color: var(--draw2-text-muted); font-size: 0.57rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-history-entry strong, .draw2-game-scene-entry strong, .draw2-game-asset-entry strong, .draw2-build-check strong, .draw2-audio-panel-entry strong { display: block; overflow: hidden; color: var(--draw2-text-strong); font-size: 0.64rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-history-entry[data-direction="REDO"] { opacity: 0.72; } .draw2-history-entry button, .draw2-game-scene-entry button, .draw2-game-asset-entry button, .draw2-audio-panel-entry button { min-width: 28px; min-height: 28px; padding: 0 5px; } .draw2-navigator-preview { display: grid; place-items: center; min-height: 164px; padding: 6px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface); } .draw2-navigator-preview canvas { display: block; width: min(160px, 100%); height: min(160px, 100%); image-rendering: pixelated; background: repeating-conic-gradient(#263046 0 25%, #1d2638 0 50%) 50% / 12px 12px; } .draw2-tileset-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; max-height: 270px; overflow: auto; overscroll-behavior: contain; } .draw2-tileset-cell { display: grid; place-items: center; gap: 2px; min-width: 0; min-height: 58px; padding: 3px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); color: var(--draw2-text-muted); cursor: pointer; font-size: 0.54rem; } .draw2-tileset-cell:hover, .draw2-tileset-cell.is-active { border-color: var(--draw2-accent-strong); background: color-mix( in srgb, var(--draw2-accent-strong) 14%, var(--draw2-surface-raised) ); color: var(--draw2-text-strong); } .draw2-tileset-cell canvas { display: block; width: 38px; height: 38px; image-rendering: pixelated; } .draw2-game-scene-entry, .draw2-game-asset-entry { cursor: pointer; } .draw2-game-scene-entry.is-active, .draw2-game-asset-entry.is-active { border-color: var(--draw2-accent-strong); } .draw2-game-creation-mode { display: grid; gap: 6px; margin: 2px 0 8px; padding: 7px; border: 1px solid color-mix(in srgb, var(--draw2-accent-strong) 54%, var(--draw2-border-subtle)); border-radius: var(--draw2-radius-sm); background: color-mix( in srgb, var(--draw2-accent-strong) 9%, var(--draw2-surface-raised) ); } .draw2-game-creation-mode-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; } .draw2-game-creation-mode-option { display: grid; gap: 4px; min-width: 0; min-height: 66px; padding: 7px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); color: var(--draw2-text-muted); text-align: left; cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease; } .draw2-game-creation-mode-option:hover, .draw2-game-creation-mode-option:focus-visible { border-color: var(--draw2-accent-strong); background: color-mix( in srgb, var(--draw2-accent-strong) 13%, var(--draw2-surface-raised) ); color: var(--draw2-text-strong); outline: none; } .draw2-game-creation-mode-option:active { transform: translateY(1px); } .draw2-game-creation-mode-option-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; min-width: 0; } .draw2-game-creation-mode-option-heading strong, .draw2-game-creation-mode-option-heading span, .draw2-game-creation-mode-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-game-creation-mode-option-heading strong { color: var(--draw2-text-strong); font-size: 0.61rem; } .draw2-game-creation-mode-option-heading span { flex: 0 0 auto; color: var(--draw2-accent-strong); font-size: 0.5rem; } .draw2-game-creation-mode-option small { color: var(--draw2-text-muted); font-size: 0.51rem; line-height: 1.4; } .draw2-game-scene-rules { display: grid; gap: 6px; margin: 2px 0 8px; padding: 7px; border: 1px solid color-mix(in srgb, var(--draw2-accent-strong) 48%, var(--draw2-border-subtle)); border-radius: var(--draw2-radius-sm); background: color-mix( in srgb, var(--draw2-accent-strong) 6%, var(--draw2-surface-raised) ); } .draw2-game-scene-rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .draw2-game-scene-rules-grid select { width: 100%; min-width: 0; } .draw2-game-scene-rule-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } .draw2-game-scene-rule-chips label { display: flex; align-items: center; gap: 5px; min-height: 29px; padding: 4px 6px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); color: var(--draw2-text-muted); font-size: 0.54rem; } .draw2-game-scene-rule-chips input { width: 15px; height: 15px; accent-color: var(--draw2-accent-strong); } .draw2-game-advanced-settings { display: grid; gap: 7px; margin-top: 8px; padding: 7px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: color-mix( in srgb, var(--draw2-surface-input) 48%, var(--draw2-surface-raised) ); } .draw2-game-advanced-settings > summary { color: var(--draw2-text-muted); cursor: pointer; font-size: 0.58rem; font-weight: 800; } .draw2-game-advanced-settings[open] > summary { color: var(--draw2-text-strong); } .draw2-game-event-card-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .draw2-game-event-card-fields .draw2-panel-field { min-width: 0; } .draw2-game-event-amount-field { max-width: 150px; } .draw2-game-creation-guide { display: grid; gap: 6px; margin: 2px 0 8px; padding: 7px; border: 1px solid color-mix(in srgb, var(--draw2-accent-strong) 42%, var(--draw2-border-subtle)); border-radius: var(--draw2-radius-sm); background: color-mix( in srgb, var(--draw2-accent-strong) 7%, var(--draw2-surface-raised) ); } .draw2-game-guide-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; } .draw2-game-guide-heading > div { display: grid; gap: 2px; min-width: 0; } .draw2-game-guide-heading strong { color: var(--draw2-text-strong); font-size: 0.68rem; } .draw2-game-creation-guide-list { display: grid; gap: 3px; } .draw2-game-creation-guide-step { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 5px; min-width: 0; padding: 4px 5px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); } .draw2-game-creation-guide-step[data-state="complete"] { opacity: 0.72; } .draw2-game-creation-guide-step > span:first-child { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--draw2-surface-input); color: var(--draw2-text-muted); font: 700 0.55rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-game-creation-guide-step[data-state="complete"] > span:first-child { background: color-mix( in srgb, var(--draw2-accent-strong) 20%, var(--draw2-surface-input) ); color: var(--draw2-accent-strong); } .draw2-game-creation-guide-step-copy { display: grid; gap: 1px; min-width: 0; } .draw2-game-creation-guide-step-copy strong, .draw2-game-creation-guide-step-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-game-creation-guide-step-copy strong { color: var(--draw2-text-strong); font-size: 0.59rem; } .draw2-game-creation-guide-step-copy small { color: var(--draw2-text-muted); font-size: 0.51rem; } .draw2-game-creation-guide-step .draw2-button { min-height: 25px; padding-inline: 5px; font-size: 0.55rem; } .draw2-game-binding-controls { display: grid; gap: 5px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--draw2-border-subtle); } .draw2-game-event-editor { display: grid; gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--draw2-border-subtle); } .draw2-game-logic-mode { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--draw2-border-subtle); } .draw2-game-logic-tab { min-height: 27px; padding-inline: 8px; font-size: 0.55rem; } .draw2-game-logic-tab.is-active { border-color: var(--draw2-accent-strong); background: color-mix(in srgb, var(--draw2-accent-strong) 14%, var(--draw2-surface-raised)); color: var(--draw2-text-strong); } .draw2-game-logic-panel { display: grid; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--draw2-border-subtle); } .draw2-game-logic-graph { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 5px; max-height: 360px; overflow: auto; padding: 2px; } .draw2-game-logic-node { display: grid; gap: 4px; min-width: 0; padding: 7px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); } .draw2-game-logic-node[data-game-logic-node-kind="EVENT"] { border-color: color-mix(in srgb, var(--draw2-accent-strong) 45%, var(--draw2-border-subtle)); } .draw2-game-logic-node[data-game-logic-node-kind="CONDITION"] { border-color: color-mix(in srgb, #d7a64a 55%, var(--draw2-border-subtle)); } .draw2-game-logic-node[data-game-logic-node-kind="ACTION"] { border-color: color-mix(in srgb, #6fa7e8 55%, var(--draw2-border-subtle)); } .draw2-game-logic-node-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; align-items: center; } .draw2-game-logic-node-heading strong, .draw2-game-logic-node-heading span, .draw2-game-logic-node small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-game-logic-node-heading strong { color: var(--draw2-text-strong); font-size: 0.57rem; } .draw2-game-logic-node-heading span { color: var(--draw2-text-muted); font-size: 0.46rem; } .draw2-game-logic-node small { color: var(--draw2-text-muted); font-size: 0.49rem; line-height: 1.35; } .draw2-game-logic-node-connections { color: var(--draw2-text-muted) !important; } .draw2-game-logic-connections { display: grid; gap: 5px; padding: 6px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); } .draw2-game-logic-connections > strong { color: var(--draw2-text-strong); font-size: 0.58rem; } .draw2-game-code-editor { width: 100%; min-width: 0; box-sizing: border-box; resize: vertical; padding: 8px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-strong); font: 0.57rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-game-event-list { display: grid; gap: 3px; max-height: 96px; overflow: auto; } .draw2-game-event-entry { display: grid; gap: 2px; width: 100%; min-width: 0; padding: 4px 5px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); color: inherit; text-align: left; cursor: pointer; } .draw2-game-event-entry:hover, .draw2-game-event-entry:focus-visible, .draw2-game-event-entry[aria-pressed="true"] { border-color: var(--draw2-accent-strong); background: color-mix( in srgb, var(--draw2-accent-strong) 11%, var(--draw2-surface-raised) ); outline: none; } .draw2-game-event-entry strong, .draw2-game-event-entry small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-game-event-entry strong { color: var(--draw2-text-strong); font-size: 0.6rem; } .draw2-game-event-entry small { color: var(--draw2-text-muted); font-size: 0.52rem; } .draw2-game-components { display: grid; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--draw2-border-subtle); } .draw2-game-subheading, .draw2-game-systems-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .draw2-game-subheading > div, .draw2-game-systems-heading { min-width: 0; } .draw2-game-subheading strong, .draw2-game-systems-heading strong { display: block; color: var(--draw2-text-strong); font-size: 0.68rem; } .draw2-game-component-list { display: grid; gap: 5px; max-height: 430px; overflow: auto; overscroll-behavior: contain; } .draw2-game-inspector-check { display: flex; align-items: center; gap: 7px; min-height: 30px; color: var(--draw2-text-muted); font-size: 0.58rem; } .draw2-game-inspector-check input { width: 16px; height: 16px; accent-color: var(--draw2-accent-strong); } .draw2-game-physics-card { display: grid; gap: 7px; margin-top: 12px; padding: 9px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: color-mix(in srgb, var(--draw2-surface-raised) 92%, #0b1724); } .draw2-game-physics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .draw2-game-physics-grid label { display: grid; gap: 4px; min-width: 0; color: var(--draw2-text-muted); font-size: 0.53rem; } .draw2-game-physics-grid input { width: 100%; min-width: 0; box-sizing: border-box; min-height: 27px; padding: 3px 5px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-strong); font-size: 0.56rem; } .draw2-game-physics-card > .draw2-button { justify-self: start; } .draw2-game-hierarchy-node { display: grid; min-width: 0; } .draw2-game-hierarchy-node-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 3px; min-width: 0; } .draw2-game-hierarchy-toggle, .draw2-game-hierarchy-toggle-spacer { display: grid; place-items: center; width: 22px; min-height: 34px; padding: 0; border: 0; border-radius: var(--draw2-radius-sm); background: transparent; color: var(--draw2-text-muted); font-size: 13px; } .draw2-game-hierarchy-toggle { cursor: pointer; } .draw2-game-hierarchy-toggle:hover, .draw2-game-hierarchy-toggle:focus-visible { background: var(--draw2-surface-raised); color: var(--draw2-text-strong); outline: none; } .draw2-game-hierarchy-children { display: grid; gap: 3px; margin-left: 12px; padding-left: 8px; border-left: 1px solid var(--draw2-border-subtle); } .draw2-game-hierarchy-children[hidden] { display: none; } .draw2-game-component-card { display: grid; gap: 5px; min-width: 0; padding: 6px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); } .draw2-game-component-card-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 6px; align-items: center; } .draw2-game-component-card-heading strong, .draw2-game-component-card-heading small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-game-component-card-heading strong { color: var(--draw2-text-strong); font-size: 0.62rem; } .draw2-game-component-card-heading small { color: var(--draw2-text-muted); font-size: 0.52rem; } .draw2-game-component-card-heading .draw2-button { grid-column: 2; grid-row: 1 / span 2; min-height: 24px; padding-inline: 5px; font-size: 0.52rem; } .draw2-game-component-field { display: grid; grid-template-columns: minmax(72px, 0.7fr) minmax(0, 1fr); gap: 5px; align-items: center; min-width: 0; color: var(--draw2-text-muted); font-size: 0.54rem; } .draw2-game-component-field input:not([type="checkbox"]), .draw2-game-component-field select { width: 100%; min-width: 0; min-height: 25px; padding: 3px 5px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-strong); font-size: 0.56rem; } .draw2-game-component-field input[type="checkbox"] { justify-self: start; width: 16px; height: 16px; accent-color: var(--draw2-accent-strong); } .draw2-game-component-reference { display: block; color: var(--draw2-text-muted); font-size: 0.51rem; line-height: 1.35; } .draw2-game-camera-settings { display: grid; gap: 7px; margin-top: 4px; padding-top: 7px; border-top: 1px solid var(--draw2-border-subtle); } .draw2-game-camera-quick { display: grid; gap: 8px; margin: 4px 0; padding: 10px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-md); background: var(--draw2-surface-raised); } .draw2-game-camera-quick[hidden] { display: none; } .draw2-game-camera-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; min-width: 0; } .draw2-game-camera-quick-grid .draw2-game-inspector-check, .draw2-game-camera-quick-grid .draw2-panel-field { min-width: 0; } .draw2-game-camera-quick-grid .draw2-game-inspector-check:first-child, .draw2-game-camera-quick-grid .draw2-game-inspector-check:nth-child(2), .draw2-game-camera-quick-grid .draw2-game-inspector-check:nth-child(5) { min-height: 34px; padding: 6px 8px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); } .draw2-game-camera-settings > summary { color: var(--draw2-text-strong); font-size: 0.58rem; font-weight: 800; cursor: pointer; } .draw2-game-camera-settings > summary:focus-visible { outline: 2px solid var(--draw2-focus-ring); outline-offset: 2px; } .draw2-game-camera-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; min-width: 0; } .draw2-game-camera-fields > .draw2-game-camera-section-heading, .draw2-game-camera-fields > .draw2-game-camera-action-row { grid-column: 1 / -1; } .draw2-game-camera-section-heading { margin-top: 3px; padding-top: 5px; border-top: 1px solid var(--draw2-border-subtle); color: var(--draw2-accent-strong); font-size: 0.51rem; font-weight: 800; } .draw2-game-camera-action-row { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 2px; } .draw2-game-camera-action-row .draw2-button { min-height: 28px; } .draw2-game-component-add-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; align-items: end; } .draw2-game-component-add-row .draw2-panel-field { margin: 0; } .draw2-game-system-object, .draw2-game-system-card { display: grid; gap: 3px; min-width: 0; padding: 7px 8px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); color: var(--draw2-text-muted); text-align: left; cursor: pointer; } .draw2-game-system-object { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .draw2-game-system-object:hover, .draw2-game-system-object.is-active, .draw2-game-system-card:hover { border-color: var(--draw2-accent-strong); background: color-mix(in srgb, var(--draw2-accent-strong) 10%, var(--draw2-surface-raised)); color: var(--draw2-text-strong); } .draw2-game-system-object-heading, .draw2-game-system-card { min-width: 0; } .draw2-game-system-object-heading, .draw2-game-system-card, .draw2-game-input-action { font-size: 0.56rem; } .draw2-game-system-object-heading, .draw2-game-system-card, .draw2-game-input-action { line-height: 1.3; } .draw2-game-system-object-heading strong, .draw2-game-system-object-heading small, .draw2-game-system-card strong, .draw2-game-system-card small, .draw2-game-input-action strong, .draw2-game-input-action small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-game-system-object-heading strong, .draw2-game-system-card strong, .draw2-game-input-action strong { color: var(--draw2-text-strong); } .draw2-game-system-object-heading small, .draw2-game-system-card small, .draw2-game-input-action small { color: var(--draw2-text-muted); font-size: 0.51rem; } .draw2-game-system-component-pills { display: flex; flex-wrap: wrap; gap: 3px; grid-column: 1 / -1; } .draw2-game-system-component-pills span { padding: 2px 4px; border: 1px solid var(--draw2-border-subtle); border-radius: 999px; color: var(--draw2-text-muted); font-size: 0.48rem; } .draw2-game-system-card-list { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--draw2-border-subtle); } .draw2-game-systems-heading { grid-column: 1 / -1; } .draw2-game-systems-heading small { color: var(--draw2-text-muted); font-size: 0.52rem; } .draw2-game-system-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .draw2-game-system-card small { grid-column: 1 / -1; } .draw2-game-system-section-title { grid-column: 1 / -1; padding-top: 3px; color: var(--draw2-text-strong); font-size: 0.59rem; } .draw2-game-input-action-list { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } .draw2-game-input-action { min-width: 0; padding: 5px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); } .draw2-game-binding-list { display: grid; gap: 3px; max-height: 110px; overflow: auto; } .draw2-game-binding-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 5px; align-items: center; min-width: 0; padding: 4px 5px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); } .draw2-game-binding-entry strong, .draw2-game-binding-entry small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-game-binding-entry strong { color: var(--draw2-text-strong); font-size: 0.6rem; } .draw2-game-binding-entry small { color: var(--draw2-text-muted); font-size: 0.52rem; } .draw2-game-binding-entry[data-game-source-editable="false"] { border-color: color-mix( in srgb, var(--draw2-border-subtle) 70%, var(--draw2-accent-strong) ); } .draw2-game-binding-readonly { color: var(--draw2-accent-strong) !important; font-weight: 700; } .draw2-game-template-catalog { display: grid; gap: 6px; margin: 8px 0; padding: 8px; border: 1px solid color-mix( in srgb, var(--draw2-accent-strong) 42%, var(--draw2-border-subtle) ); border-radius: var(--draw2-radius-sm); background: color-mix( in srgb, var(--draw2-accent-strong) 6%, var(--draw2-surface-raised) ); } .draw2-game-template-heading { display: flex; align-items: end; justify-content: space-between; gap: 8px; } .draw2-game-template-heading strong { display: block; color: var(--draw2-text-strong); font-size: 0.72rem; } .draw2-game-template-filter { width: min(150px, 42%); } .draw2-game-template-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; max-height: 360px; overflow: auto; overscroll-behavior: contain; } .draw2-game-template-card { display: grid; gap: 5px; min-width: 0; padding: 7px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface); } .draw2-game-template-card-head { display: flex; align-items: start; justify-content: space-between; gap: 5px; min-width: 0; } .draw2-game-template-card strong { min-width: 0; overflow: hidden; color: var(--draw2-text-strong); font-size: 0.62rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-game-template-card small { display: block; min-width: 0; overflow: hidden; color: var(--draw2-text-muted); font-size: 0.52rem; line-height: 1.35; text-overflow: ellipsis; } .draw2-game-template-badge { flex: 0 0 auto; padding: 2px 4px; border: 1px solid color-mix( in srgb, var(--draw2-accent-strong) 50%, var(--draw2-border-subtle) ); border-radius: 999px; color: var(--draw2-accent-strong) !important; font-size: 0.45rem !important; font-weight: 700; white-space: nowrap; } .draw2-game-template-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; min-width: 0; } .draw2-game-template-fields .draw2-panel-field { min-width: 0; font-size: 0.5rem; } .draw2-game-template-fields .draw2-panel-field input, .draw2-game-template-fields .draw2-panel-field select { min-height: 26px; font-size: 0.56rem; } .draw2-game-template-apply { width: 100%; min-height: 28px; font-size: 0.56rem; } .draw2-game-template-instances { display: grid; gap: 4px; max-height: 150px; overflow: auto; } .draw2-game-template-instance { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; align-items: center; min-width: 0; padding: 5px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); } .draw2-game-template-instance strong, .draw2-game-template-instance small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-game-template-instance strong { color: var(--draw2-text-strong); font-size: 0.58rem; } .draw2-game-template-instance small { color: var(--draw2-text-muted); font-size: 0.5rem; } .draw2-game-template-instance button { min-height: 26px; padding-inline: 5px; font-size: 0.5rem; } .draw2-game-rail-surface { display: grid; gap: 8px; min-width: 0; } .draw2-game-rail-surface[hidden] { display: none; } .draw2-game-rail-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; min-width: 0; } .draw2-game-rail-section-heading strong { display: block; color: var(--draw2-text-strong); font-size: 0.75rem; } .draw2-game-rail-section-heading small { color: var(--draw2-text-muted); font-size: 0.55rem; text-align: right; } .draw2-game-asset-browser-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 180px); gap: 6px; min-width: 0; } .draw2-game-asset-catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; max-height: 220px; min-width: 0; overflow: auto; overscroll-behavior: contain; } .draw2-game-asset-card { display: grid; gap: 4px; min-width: 0; min-height: 58px; padding: 7px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); color: var(--draw2-text-strong); text-align: left; } .draw2-game-asset-card:hover, .draw2-game-asset-card:focus-visible { border-color: var(--draw2-accent-strong); outline: none; } .draw2-game-asset-card-head { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-width: 0; } .draw2-game-asset-card strong, .draw2-game-asset-card small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-game-asset-card strong { font-size: 0.62rem; } .draw2-game-asset-card small { color: var(--draw2-text-muted); font-size: 0.52rem; } .draw2-game-asset-card-badge { flex: 0 0 auto; padding: 2px 4px; border: 1px solid var(--draw2-border-subtle); border-radius: 999px; color: var(--draw2-accent-strong); font-size: 0.46rem; font-weight: 700; } .draw2-game-asset-card[data-game-asset-readonly="true"] { background: color-mix( in srgb, var(--draw2-accent-strong) 5%, var(--draw2-surface-raised) ); } .draw2-game-animation-selection { min-width: 0; padding: 7px 8px; border: 1px solid color-mix( in srgb, var(--draw2-accent-strong) 42%, var(--draw2-border-subtle) ); border-radius: var(--draw2-radius-sm); background: color-mix( in srgb, var(--draw2-accent-strong) 6%, var(--draw2-surface-raised) ); color: var(--draw2-text-strong); font-size: 0.59rem; } .draw2-game-animation-clips { display: flex; gap: 5px; min-width: 0; max-width: 100%; padding-bottom: 2px; overflow-x: auto; overscroll-behavior: contain; } .draw2-game-animation-clip { display: grid; flex: 0 0 auto; gap: 3px; min-width: 118px; padding: 6px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); color: var(--draw2-text-strong); text-align: left; } .draw2-game-animation-clip.is-active, .draw2-game-animation-clip:hover, .draw2-game-animation-clip:focus-visible { border-color: var(--draw2-accent-strong); outline: none; } .draw2-game-animation-clip strong { font-size: 0.6rem; } .draw2-game-animation-clip small { color: var(--draw2-text-muted); font-size: 0.5rem; } .draw2-game-animation-detail { display: grid; grid-template-columns: minmax(116px, 0.32fr) minmax(0, 1fr); gap: 8px; min-width: 0; } .draw2-game-animation-preview { display: grid; place-items: center; min-height: 112px; padding: 6px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: repeating-conic-gradient(#263046 0 25%, #1d2638 0 50%) 50% / 12px 12px; } .draw2-game-animation-preview canvas, .draw2-game-frame-thumb canvas { display: block; max-width: 100%; image-rendering: pixelated; object-fit: contain; } .draw2-game-animation-preview canvas { width: min(112px, 100%); height: 100px; } .draw2-game-frame-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 5px; align-content: start; max-height: 160px; min-width: 0; overflow: auto; overscroll-behavior: contain; } .draw2-game-frame-thumb { display: grid; place-items: center; gap: 3px; min-width: 0; min-height: 58px; padding: 4px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); color: var(--draw2-text-muted); font-size: 0.48rem; } .draw2-game-frame-thumb.is-active { border-color: var(--draw2-accent-strong); color: var(--draw2-text-strong); box-shadow: 0 0 0 1px color-mix( in srgb, var(--draw2-accent-strong) 35%, transparent ); } .draw2-game-frame-thumb canvas { width: 42px; height: 42px; } .draw2-game-animation-overrides { display: grid; grid-template-columns: repeat(4, minmax(80px, 1fr)); gap: 5px; min-width: 0; } .draw2-game-animation-overrides .draw2-panel-field { min-width: 0; font-size: 0.5rem; } .draw2-game-animation-overrides .draw2-panel-field input, .draw2-game-animation-overrides .draw2-panel-field select { min-height: 27px; font-size: 0.55rem; } .draw2-game-animation-overrides .draw2-panel-field:has(input[type="checkbox"]) { display: flex; align-items: center; justify-content: space-between; padding: 5px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); } .draw2-game-animation-overrides .draw2-panel-field:has(input[type="checkbox"]) input { width: auto; } .draw2-game-animation-actions { display: flex; flex-wrap: wrap; gap: 5px; align-items: end; } .draw2-game-animation-actions .draw2-panel-field { min-width: 82px; flex: 0 1 100px; } .draw2-game-animation-actions .draw2-panel-field input, .draw2-game-animation-actions .draw2-panel-field select { min-height: 28px; } .draw2-game-rail-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px; min-width: 0; } .draw2-game-rail-summary-card { display: grid; gap: 4px; min-width: 0; padding: 8px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); } .draw2-game-rail-summary-card strong { color: var(--draw2-text-strong); font-size: 0.62rem; } .draw2-game-rail-summary-card small { color: var(--draw2-text-muted); font-size: 0.53rem; line-height: 1.4; } .draw2-game-rail-summary-card .draw2-button { width: fit-content; min-height: 26px; font-size: 0.53rem; } .draw2-build-check { grid-template-columns: 24px minmax(0, 1fr); } .draw2-build-check::before { display: none; content: none; } .draw2-build-check-icon { width: 16px; height: 16px; flex: 0 0 16px; align-self: start; margin-top: 1px; } .draw2-build-check[data-state="ok"] .draw2-build-check-icon { color: var(--draw2-accent-strong); } .draw2-build-check[data-state="warn"] .draw2-build-check-icon { color: var(--draw2-warning-strong, #f59e0b); } .draw2-build-check[data-state="error"] .draw2-build-check-icon { color: var(--draw2-danger-strong); } .draw2-audio-panel-entry { grid-template-columns: minmax(0, 1fr) auto; } .draw2-build-manifest-preview { max-height: 180px; margin: 0; padding: 6px; overflow: auto; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface); color: var(--draw2-text-muted); font: 0.56rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; } .draw2-studio-release-card { display: grid; gap: 6px; min-width: 0; padding: 8px; border: 1px solid color-mix(in srgb, var(--draw2-accent) 34%, var(--draw2-border-subtle)); border-radius: var(--draw2-radius-md); background: color-mix(in srgb, var(--draw2-accent-soft, #edf8ff) 62%, var(--draw2-surface)); } .draw2-studio-release-card .draw2-panel-heading { margin: 0; padding: 0 0 5px; } .draw2-studio-release-actions { align-items: stretch; } .draw2-studio-release-actions .draw2-button { min-height: 34px; } .draw2-studio-release-manifest-preview { max-height: 220px; } .draw2-studio-release-card .draw2-panel-status[data-state="success"] { color: var(--draw2-accent-strong); } .draw2-studio-release-card .draw2-panel-status[data-state="error"] { color: var(--draw2-danger-strong); } .draw2-timeline-main { display: grid; grid-template-columns: minmax(0, 1fr) 6px var(--draw2-timeline-properties-width, 240px); flex: 1 1 auto; min-width: 0; min-height: 0; } .draw2-timeline-tabs-shell { display: flex; align-items: stretch; justify-content: space-between; min-width: 0; } .draw2-timeline-tabs-shell > .draw2-timeline-tabs { flex: 1 1 auto; min-width: 0; } .draw2-timeline-secondary-controls { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; padding-inline: 4px; } .draw2-timeline-secondary-controls .draw2-timeline-rate { min-height: 28px; } .draw2-timeline-secondary-controls .draw2-timeline-rate select { height: 26px; min-height: 26px; } .draw2-timeline-main > .draw2-timeline-viewport { grid-column: 1; min-width: 0; min-height: 0; height: 100% !important; max-height: none !important; align-self: stretch; margin-right: 0; } #draw2TimelinePanelTimeline { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; } #draw2TimelinePanelTimeline > .draw2-timeline-more-controls { display: none !important; } .draw2-timeline-properties-resize { grid-column: 2; width: 6px; min-width: 6px; height: 100%; min-height: 28px; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: ew-resize; touch-action: none; } .draw2-timeline-properties-resize::after { display: block; width: 2px; height: 100%; margin: 0 auto; background: var(--draw2-border-subtle); content: ""; } .draw2-timeline-properties-resize:hover::after, .draw2-timeline-properties-resize:focus-visible::after, .draw2-timeline-properties-resize.is-resizing::after { background: var(--draw2-accent-strong); } .draw2-timeline-layer-properties { grid-column: 3; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--draw2-surface-raised); } .draw2-timeline-properties-heading { display: flex; align-items: center; justify-content: space-between; flex: 0 0 30px; min-width: 0; padding: 0 5px 0 8px; color: var(--draw2-text-strong); font-size: 0.68rem; } .draw2-timeline-properties-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-timeline-properties-heading .draw2-button { width: 24px; min-width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 2px; } .draw2-timeline-properties-body { display: grid; align-content: start; gap: 10px; min-width: 0; min-height: 0; padding: 8px; overflow: auto; color: var(--draw2-text-muted); font-size: 0.68rem; } .draw2-timeline-properties-empty { color: var(--draw2-text-muted); } .draw2-timeline-properties-name { display: block; min-width: 0; overflow: hidden; color: var(--draw2-text-strong); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .draw2-timeline-property-field { display: grid; gap: 4px; min-width: 0; } .draw2-timeline-property-field-heading { display: flex; justify-content: space-between; gap: 6px; } .draw2-timeline-property-field-heading output { color: var(--draw2-text-strong); font-variant-numeric: tabular-nums; } .draw2-timeline-property-select { width: 100%; min-height: 28px; padding: 0 6px; border: 1px solid var(--draw2-border-subtle); border-radius: 3px; background: var(--draw2-surface); color: var(--draw2-text-strong); font-size: 0.68rem; } .draw2-timeline-property-input { width: 100%; min-height: 28px; padding: 0 6px; border: 1px solid var(--draw2-border-subtle); border-radius: 3px; background: var(--draw2-surface); color: var(--draw2-text-strong); font: inherit; font-size: 0.68rem; } .draw2-timeline-property-input:focus-visible, .draw2-timeline-property-select:focus-visible { outline: 2px solid var(--draw2-focus-ring); outline-offset: 1px; } .draw2-timeline-property-opacity input { width: 100%; min-width: 0; } .draw2-timeline-property-toggle { display: flex; align-items: center; gap: 6px; min-height: 26px; color: var(--draw2-text-strong); } .draw2-timeline-property-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--draw2-accent-strong); } .draw2-timeline-layer-properties.is-collapsed { width: 28px; } .draw2-timeline-layer-properties.is-collapsed .draw2-timeline-properties-heading { justify-content: center; padding-inline: 0; } .draw2-timeline-layer-properties.is-collapsed .draw2-timeline-properties-heading strong, .draw2-timeline-layer-properties.is-collapsed .draw2-timeline-properties-body { display: none; } .draw2-timeline-card[data-properties-collapsed="true"] .draw2-timeline-main { grid-template-columns: minmax(0, 1fr) 0 28px; } .draw2-timeline-card[data-properties-collapsed="true"] .draw2-timeline-properties-resize { display: none; } .draw2-timeline-corner { display: flex !important; align-items: center; overflow: hidden; padding: 0 !important; } .draw2-timeline-corner-controls { display: flex; align-items: center; gap: 2px; min-width: max-content; height: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .draw2-timeline-corner-controls::-webkit-scrollbar { display: none; } .draw2-timeline-corner-button, .draw2-timeline-corner-controls > .draw2-button, .draw2-timeline-corner-controls > .draw2-timeline-onion-options > summary { flex: 0 0 30px; width: 30px !important; min-width: 30px !important; max-width: 30px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; padding: 0 !important; border-radius: 3px; font-size: 0.72rem; } .draw2-timeline-corner-controls > .draw2-timeline-rate, .draw2-timeline-corner-controls > .draw2-timeline-loop { flex: 0 0 auto; } .draw2-timeline-corner-rate select { width: 40px; min-width: 40px; height: 24px; min-height: 24px; padding-inline: 2px; font-size: 0.62rem; } .draw2-timeline-corner-loop { position: relative; width: 30px !important; min-width: 30px !important; max-width: 30px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; justify-content: center; } .draw2-timeline-corner-loop input { position: absolute; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .draw2-timeline-corner-loop > span[aria-hidden="true"] { font-size: 0.85rem; } .draw2-timeline-corner-loop:has(input:checked) { color: var(--draw2-accent-strong); } .draw2-timeline-corner-controls > .draw2-timeline-onion-options { position: relative; flex: 0 0 30px; min-width: 30px; max-width: 30px; } .draw2-timeline-corner-controls > .draw2-timeline-onion-options > summary { display: grid; place-items: center; list-style: none; cursor: pointer; } .draw2-timeline-corner-controls > .draw2-timeline-onion-options > summary::-webkit-details-marker { display: none; } .draw2-timeline-corner-controls > .draw2-timeline-onion-options .draw2-timeline-onion-popover { top: calc(100% + 3px); left: 0; right: auto; } .draw2-timeline-corner-controls > .draw2-timeline-more-actions { position: relative; flex: 0 0 30px; min-width: 30px; } .draw2-timeline-corner-controls > .draw2-timeline-more-actions > summary { display: grid; place-items: center; width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; border-radius: 3px; list-style: none; cursor: pointer; } .draw2-timeline-corner-controls > .draw2-timeline-more-actions > summary::-webkit-details-marker { display: none; } .draw2-timeline-corner-controls > .draw2-timeline-more-actions .draw2-timeline-more-popover { top: calc(100% + 3px); left: 0; right: auto; } .draw2-timeline-display-actions { display: none !important; } .draw2-timeline-row-label { gap: 4px; padding: 0 4px !important; cursor: pointer; } .draw2-timeline-row-label::before { display: none !important; content: none !important; } .draw2-timeline-row-visibility { flex: 0 0 24px; width: 24px; min-width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--draw2-text-muted); cursor: pointer; font-size: 0.78rem; } .draw2-timeline-row-visibility[aria-pressed="true"] { color: var(--draw2-accent-strong); } .draw2-timeline-row-visibility:hover, .draw2-timeline-row-visibility:focus-visible { background: color-mix(in srgb, var(--draw2-accent-strong) 14%, transparent); outline: 0; } .draw2-timeline-row-layer-dot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--draw2-text-muted); } .draw2-timeline-row-layer-dot[data-layer-visible="true"] { background: var(--draw2-accent-strong); } .draw2-timeline-row-label-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-timeline-row-label:focus-visible { outline: 2px solid var(--draw2-focus); outline-offset: -2px; } .draw2-timeline-layer-add-row { pointer-events: none; } .draw2-timeline-layer-add-header { display: grid !important; place-items: center; width: var(--draw2-timeline-label-width) !important; min-width: var(--draw2-timeline-label-width) !important; max-width: var(--draw2-timeline-label-width) !important; height: var(--draw2-timeline-row-height) !important; min-height: var(--draw2-timeline-row-height) !important; max-height: var(--draw2-timeline-row-height) !important; padding: 0 !important; border: 1px solid var(--draw2-border-subtle) !important; border-radius: 2px !important; background: var(--draw2-surface-raised); color: var(--draw2-accent-strong); cursor: pointer; font-size: 1rem; pointer-events: auto; } .draw2-timeline-layer-add-header:hover, .draw2-timeline-layer-add-header:focus-visible { background: color-mix( in srgb, var(--draw2-accent-strong) 14%, var(--draw2-surface-raised) ); outline: 0; } .draw2-timeline-viewport { overflow-anchor: none; } @media (min-width: 701px) { .draw2-workspace-frame { grid-template-columns: var(--draw2-tool-rail-width) minmax(0, 1fr) minmax( 244px, var(--draw2-right-dock-width, var(--draw2-panel-width)) ) !important; grid-template-rows: auto minmax(0, 1fr) var(--draw2-timeline-height) var( --draw2-statusbar-height ) !important; } .draw2-workspace-global-row { grid-template-columns: minmax(128px, auto) minmax(0, 1fr) minmax(160px, 240px) minmax(160px, 1fr) !important; min-width: 0 !important; } .draw2-workspace-menu-bar, .draw2-workspace-command-bar { min-width: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; justify-content: flex-start !important; flex-wrap: nowrap !important; scrollbar-width: thin; } .draw2-workspace-menu-bar .draw2-menu, .draw2-workspace-menu-bar .draw2-menu summary { flex: 0 0 auto !important; width: auto !important; min-width: max-content !important; max-width: none !important; font-size: 0.69rem !important; } .draw2-workspace-menu-bar .draw2-menu summary { min-height: 30px !important; padding-inline: 7px !important; } .draw2-workspace-command-bar > * { display: inline-flex !important; flex: 0 0 var(--draw2-control-size) !important; width: var(--draw2-control-size) !important; min-width: var(--draw2-control-size) !important; height: var(--draw2-control-size) !important; min-height: var(--draw2-control-size) !important; } .draw2-workspace-command-bar .draw2-theme-control, .draw2-workspace-command-bar .draw2-language-control { flex-basis: 40px !important; width: 40px !important; min-width: 40px !important; } .draw2-workspace-right-dock { width: auto !important; min-width: 244px !important; } .draw2-workspace-right-dock > #draw2WorkspaceRightResize { left: -6px !important; width: 12px !important; } .draw2-workspace-timeline-region { display: block !important; min-height: 140px !important; } .draw2-timeline-resize-handle { display: block !important; } } :root { --draw2-resize-grip-thickness: 1px; --draw2-resize-grip-length: 100%; } .draw2-dock-resize-handle::before { top: 0 !important; bottom: 0 !important; left: 50% !important; width: 1px !important; height: auto !important; transform: translateX(-50%) !important; border-radius: 0 !important; } .draw2-timeline-resize-handle::before { top: 50% !important; left: 0 !important; right: 0 !important; width: auto !important; height: 1px !important; transform: translateY(-50%) !important; border-radius: 0 !important; } .draw2-workspace-right-dock > #draw2WorkspacePaletteResize { position: relative !important; height: 12px !important; min-height: 12px !important; background: transparent !important; } .draw2-workspace-right-dock > #draw2WorkspacePaletteResize::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1px; background: var(--draw2-border-strong); opacity: 0.9; transform: translateY(-50%); } .draw2-workspace-right-dock > #draw2WorkspacePaletteResize:hover::before, .draw2-workspace-right-dock > #draw2WorkspacePaletteResize:focus-visible::before, .draw2-workspace-right-dock > #draw2WorkspacePaletteResize.is-resizing::before, .draw2-workspace-right-dock.is-palette-resizing > #draw2WorkspacePaletteResize::before { background: var(--draw2-accent-strong); } .draw2-timeline-properties-resize::after { width: 1px !important; } @media (min-width: 701px) { #draw2CommandPalette, #draw2ShortcutsDialog, #draw2SettingsDialog, #draw2CanvasSettingsDialog { width: min(920px, calc(100vw - 48px)) !important; max-width: calc(100vw - 48px) !important; } #draw2ShortcutsDialog .draw2-shortcut-list { max-height: min(68dvh, 680px) !important; columns: 2; column-gap: 24px; } #draw2ShortcutsDialog .draw2-shortcut-category, #draw2ShortcutsDialog .draw2-shortcut-row { break-inside: avoid; } } @media (min-width: 701px) { .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-viewport { --draw2-timeline-cell-size: 40px !important; --draw2-timeline-label-width: 180px !important; --draw2-timeline-cell-width: var(--draw2-timeline-cell-size) !important; --draw2-timeline-row-height: var(--draw2-timeline-cell-size) !important; } .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-corner-button { width: var(--draw2-timeline-cell-size) !important; min-width: var(--draw2-timeline-cell-size) !important; height: var(--draw2-timeline-cell-size) !important; min-height: var(--draw2-timeline-cell-size) !important; } .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-frame-header, .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-cell { width: var(--draw2-timeline-cell-size) !important; min-width: var(--draw2-timeline-cell-size) !important; max-width: var(--draw2-timeline-cell-size) !important; height: var(--draw2-timeline-cell-size) !important; min-height: var(--draw2-timeline-cell-size) !important; max-height: var(--draw2-timeline-cell-size) !important; } .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-row-label, .draw2-workspace-frame #draw2WorkspaceTimelineSlot .draw2-timeline-corner { width: 180px !important; min-width: 180px !important; height: var(--draw2-timeline-cell-size) !important; min-height: var(--draw2-timeline-cell-size) !important; } } .draw2-mini-preview { box-sizing: border-box !important; width: var(--draw2-mini-preview-width, 148px) !important; height: var(--draw2-mini-preview-height, 148px) !important; min-width: 112px !important; min-height: 112px !important; max-width: 360px !important; max-height: 280px !important; overflow: visible !important; pointer-events: none; } .draw2-mini-preview > canvas { box-sizing: border-box !important; width: calc(var(--draw2-mini-preview-width, 148px) - 8px) !important; height: calc(var(--draw2-mini-preview-height, 148px) - 8px) !important; object-fit: contain; } .draw2-mini-preview-toolbar { position: absolute; z-index: 5; top: 4px; left: 4px; display: inline-flex; gap: 2px; pointer-events: auto; } .draw2-mini-preview-control { appearance: none; display: grid; width: 24px; min-width: 24px; height: 24px; min-height: 24px; padding: 0; place-items: center; border: 1px solid var(--draw2-border-subtle); border-radius: 2px; background: color-mix(in srgb, var(--draw2-surface) 88%, transparent); color: var(--draw2-text-muted); cursor: pointer; pointer-events: auto; } .draw2-mini-preview-control:hover, .draw2-mini-preview-control:focus-visible, .draw2-mini-preview-control[aria-pressed="true"] { border-color: var(--draw2-focus-ring); color: var(--draw2-text-strong); } .draw2-mini-preview-control:disabled { cursor: default; opacity: 0.35; } .draw2-mini-preview-action, .draw2-mini-preview-resize, .draw2-mini-preview-restore { appearance: none; border: 1px solid var(--draw2-border-subtle); background: color-mix(in srgb, var(--draw2-surface) 88%, transparent); color: var(--draw2-text-muted); cursor: pointer; pointer-events: auto; touch-action: none; } .draw2-mini-preview-action { position: absolute; z-index: 2; top: 4px; right: 4px; display: grid; width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0; place-items: center; border-radius: 2px; opacity: 0.65; } .draw2-mini-preview-action:hover, .draw2-mini-preview-action:focus-visible { opacity: 1; color: var(--draw2-text-strong); } .draw2-mini-preview-resize { position: absolute; z-index: 3; display: block; padding: 0; border-color: transparent; background: transparent; opacity: 0.28; } .draw2-mini-preview-resize:hover, .draw2-mini-preview-resize:focus-visible { opacity: 0.95; } .draw2-mini-preview-resize--left { top: 10px; bottom: 10px; left: -5px; width: 10px; cursor: ew-resize; } .draw2-mini-preview-resize::before { content: ""; position: absolute; display: block; background: var(--draw2-accent-strong); opacity: 0.92; pointer-events: none; } .draw2-mini-preview-resize--left::before { top: 0; bottom: 0; left: 4px; width: 1px; } .draw2-mini-preview-resize--bottom { right: 10px; bottom: -5px; left: 10px; height: 10px; cursor: ns-resize; } .draw2-mini-preview-resize--bottom::before { right: 0; bottom: 4px; left: 0; height: 1px; } .draw2-mini-preview-resize--corner { bottom: -7px; left: -7px; width: 14px; height: 14px; border-radius: 2px; cursor: nesw-resize; } .draw2-mini-preview-resize--corner::before { right: 2px; bottom: 2px; width: 7px; height: 7px; border-right: 1px solid var(--draw2-accent-strong); border-bottom: 1px solid var(--draw2-accent-strong); background: transparent; } .draw2-mini-preview-restore { position: absolute; z-index: 5; top: var(--draw2-space-2); right: var(--draw2-space-2); display: grid; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; place-items: center; border-radius: 2px; opacity: 0.28; transition: opacity 120ms ease, background-color 120ms ease; } .draw2-mini-preview-restore:hover, .draw2-mini-preview-restore:focus-visible, .draw2-mini-preview-restore:active { opacity: 1; background: var(--draw2-surface-raised); color: var(--draw2-text-strong); } @media (min-width: 701px) { .draw2-workspace-menu-bar:has(.draw2-menu[open]) { overflow: visible !important; } .draw2-menu-popover.is-menu-positioned { display: grid !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; position: fixed !important; z-index: 300 !important; } .draw2-workspace-right-dock > #draw2WorkspacePaletteStrip .draw2-palette-grid { width: 100% !important; grid-template-columns: repeat(auto-fill, minmax(var(--draw2-control-size), 1fr)) !important; grid-auto-columns: unset !important; justify-content: stretch !important; } .draw2-workspace-right-dock > #draw2WorkspacePaletteStrip .draw2-palette-grid .draw2-color, .draw2-workspace-right-dock > #draw2WorkspacePaletteStrip .draw2-palette-grid .draw2-color-add { width: 100% !important; min-width: 0 !important; max-width: none !important; } } #draw2WorkspaceFrame .draw2-workspace-menu-bar { display: none !important; } #draw2WorkspaceFrame .draw2-workspace-brand { display: flex !important; align-items: center !important; gap: 7px !important; width: auto !important; min-width: 0 !important; max-width: 132px !important; height: 100% !important; white-space: nowrap; } #draw2WorkspaceFrame .draw2-brand-logo { display: block; flex: 0 0 auto; width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; } #draw2WorkspaceFrame .draw2-workspace-brand .draw2-details-menu { display: block !important; flex: 0 0 32px; width: 32px; min-width: 32px; } #draw2WorkspaceFrame .draw2-workspace-brand .draw2-details-menu > summary { display: grid !important; width: 32px; height: 32px; min-height: 32px; padding: 0 !important; place-items: center; border: 1px solid transparent; border-radius: 7px; font-size: 0 !important; } #draw2WorkspaceFrame .draw2-workspace-brand .draw2-details-menu > summary:hover, #draw2WorkspaceFrame .draw2-workspace-brand .draw2-details-menu[open] > summary { border-color: var(--draw2-border-subtle); background: var(--draw2-surface-raised); } #draw2WorkspaceFrame .draw2-workspace-brand .draw2-details-label { display: none !important; } #draw2WorkspaceFrame .draw2-workspace-brand .draw2-details-menu .draw2-menu-icon { width: 17px; height: 17px; } @media (min-width: 1120px) { #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-brand { left: 8px !important; width: auto !important; min-width: 0 !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-creator-mode-bar { left: 104px !important; } } @media (min-width: 701px) { .draw2-workspace-right-dock > #draw2WorkspacePaletteStrip { overflow: auto !important; } .draw2-workspace-right-dock > #draw2WorkspacePaletteStrip .draw2-palette-grid { height: max-content !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; align-content: start !important; } } .draw2-creator-mode-bar { display: flex; align-items: stretch; gap: 3px; min-width: 0; padding: 3px 6px; overflow-x: auto; overscroll-behavior-x: contain; border-top: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 55%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 55%, transparent); background: var(--draw2-surface); scrollbar-width: thin; } .draw2-creator-mode { display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: 0 0 auto; min-width: 86px; min-height: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--draw2-radius-sm); background: transparent; color: var(--draw2-text-muted); cursor: pointer; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; } .draw2-creator-mode .draw2-ui-icon { width: 16px; height: 16px; } .draw2-creator-mode:hover, .draw2-creator-mode:focus-visible { border-color: var(--draw2-border-strong); color: var(--draw2-text-strong); } .draw2-creator-mode[aria-disabled="true"] { cursor: not-allowed; opacity: 0.58; } .draw2-creator-mode[aria-disabled="true"]:hover, .draw2-creator-mode[aria-disabled="true"]:focus-visible { border-color: transparent; color: var(--draw2-text-muted); } .draw2-creator-mode.is-active { border-color: var(--draw2-accent-strong); background: color-mix( in srgb, var(--draw2-accent-strong) 18%, var(--draw2-surface-raised) ); color: var(--draw2-accent-strong); } .draw2-creator-mode[data-creator-mode="ASSET"].is-active { border-color: #a78bfa; background: color-mix(in srgb, #8b5cf6 22%, var(--draw2-surface-raised)); color: #c4b5fd; } .draw2-workspace-frame[data-creator-mode="ASSET"] .draw2-workspace-right-dock { box-shadow: inset 2px 0 0 #8b5cf6; } .draw2-creator-asset-surface { display: grid; gap: var(--draw2-space-3); min-width: 0; } .draw2-creator-surface-heading { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--draw2-space-2); } .draw2-creator-surface-heading strong { font-size: 0.86rem; } .draw2-creator-local-badge { color: var(--draw2-accent-strong); font: 700 0.58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-creator-surface-note { margin: 0; color: var(--draw2-text-muted); font-size: 0.72rem; line-height: 1.45; } .draw2-creator-step-note { margin: 0; color: var(--draw2-text-muted); font-size: 0.7rem; line-height: 1.5; } .draw2-creator-step-note strong { color: var(--draw2-text-strong); } .draw2-asset-motion-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 3px; } .draw2-asset-motion-tab { min-height: 36px; padding: 0 8px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-muted); cursor: pointer; font-size: 0.68rem; font-weight: 700; } .draw2-asset-motion-tab:hover, .draw2-asset-motion-tab:focus-visible, .draw2-asset-motion-tab.is-active { border-color: #a78bfa; background: color-mix(in srgb, #8b5cf6 22%, var(--draw2-surface-raised)); color: #c4b5fd; } .draw2-asset-direction-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(52px, auto)); grid-template-areas: ". up ." "left center right" ". down ."; gap: 5px; margin-top: 3px; } .draw2-asset-slot { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; align-items: center; min-width: 0; min-height: 52px; padding: 6px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-muted); cursor: pointer; text-align: left; } .draw2-asset-slot[data-draw2-asset-direction="UP"] { grid-area: up; } .draw2-asset-slot[data-draw2-asset-direction="LEFT"] { grid-area: left; } .draw2-asset-slot[data-draw2-asset-direction="RIGHT"] { grid-area: right; } .draw2-asset-slot[data-draw2-asset-direction="DOWN"] { grid-area: down; } .draw2-asset-slot:hover, .draw2-asset-slot:focus-visible, .draw2-asset-slot[data-pending="true"] { border-color: #a78bfa; background: color-mix(in srgb, #8b5cf6 22%, var(--draw2-surface-raised)); color: var(--draw2-text-strong); } .draw2-asset-slot[data-filled="true"] { border-color: color-mix( in srgb, var(--draw2-accent-strong) 62%, var(--draw2-border-subtle) ); background: color-mix( in srgb, var(--draw2-accent-strong) 13%, var(--draw2-surface-input) ); } .draw2-asset-slot-arrow { grid-row: 1 / -1; width: 28px; color: #c4b5fd; font-size: 1.35rem; line-height: 1; text-align: center; } .draw2-asset-slot-label { overflow: hidden; color: var(--draw2-text-strong); font-size: 0.7rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .draw2-asset-slot small { overflow: hidden; color: var(--draw2-text-muted); font-size: 0.58rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-asset-slot[data-filled="true"] small { color: var(--draw2-accent-strong); } .draw2-asset-slot-center { display: grid; grid-area: center; place-items: center; min-height: 52px; border: 1px dashed color-mix(in srgb, #8b5cf6 45%, var(--draw2-border-subtle)); border-radius: var(--draw2-radius-sm); color: var(--draw2-text-muted); font-size: 0.58rem; line-height: 1.35; text-align: center; } .draw2-asset-quick-status { margin: 0; min-height: 2.7em; color: #c4b5fd; font-size: 0.66rem; line-height: 1.45; } .draw2-asset-manual-add { opacity: 0.9; } .draw2-asset-metadata { border-top: 1px solid var(--draw2-border-subtle); color: var(--draw2-text-muted); } .draw2-asset-metadata > summary { padding: 7px 0 2px; cursor: pointer; font-size: 0.64rem; font-weight: 700; } .draw2-asset-metadata[open] > summary { color: var(--draw2-text-strong); } .draw2-asset-advanced { border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: color-mix(in srgb, var(--draw2-surface) 88%, transparent); } .draw2-asset-advanced > summary { min-height: 36px; padding: 9px 10px; color: var(--draw2-text-muted); cursor: pointer; font-size: 0.68rem; font-weight: 700; } .draw2-asset-advanced[open] > summary { color: var(--draw2-text-strong); } .draw2-asset-advanced > .draw2-creator-fieldset { margin: 0 6px 6px; } .draw2-creator-fieldset { display: grid; gap: var(--draw2-space-1); margin: 0; padding: var(--draw2-space-2); border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); color: var(--draw2-text-muted); font-size: 0.7rem; } .draw2-creator-fieldset legend { padding-inline: 4px; color: var(--draw2-text-strong); font-weight: 700; } .draw2-creator-fieldset label { display: flex; align-items: center; gap: 6px; min-height: 30px; } .draw2-creator-asset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--draw2-space-2); } .draw2-creator-asset-grid label { display: grid; gap: 3px; color: var(--draw2-text-muted); font-size: 0.66rem; } .draw2-creator-asset-grid input, .draw2-creator-asset-grid select { min-width: 0; width: 100%; min-height: 32px; padding-inline: 7px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-strong); } .draw2-creator-asset-status { margin: 0; color: var(--draw2-text-muted); font-size: 0.66rem; } .draw2-creator-asset-status[data-state="success"] { color: var(--draw2-accent-strong); } .draw2-creator-asset-status[data-state="error"] { color: var(--draw2-danger-strong); } .draw2-asset-selection-summary { margin: 0; color: var(--draw2-text-muted); font-size: 0.68rem; line-height: 1.45; } .draw2-asset-definition-list { display: grid; gap: var(--draw2-space-2); max-height: 270px; min-width: 0; overflow: auto; overscroll-behavior: contain; } .draw2-asset-empty { margin: 0; padding: var(--draw2-space-2); border: 1px dashed var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); color: var(--draw2-text-muted); font-size: 0.68rem; line-height: 1.45; text-align: center; } .draw2-asset-definition-card { display: grid; gap: 6px; min-width: 0; padding: 8px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: color-mix(in srgb, var(--draw2-surface-raised) 84%, #8b5cf6 16%); } .draw2-asset-definition-card.is-selected { border-color: #8b5cf6; box-shadow: 0 0 0 1px color-mix(in srgb, #8b5cf6 36%, transparent); } .draw2-asset-definition-card-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; } .draw2-asset-definition-select { min-width: 0; padding: 2px 0; overflow: hidden; border: 0; background: transparent; color: var(--draw2-text-strong); cursor: pointer; font-size: 0.72rem; font-weight: 700; text-align: left; text-overflow: ellipsis; white-space: nowrap; } .draw2-asset-definition-select:hover, .draw2-asset-definition-select:focus-visible { color: #c4b5fd; text-decoration: underline; } .draw2-asset-definition-remove { flex: 0 0 auto; padding: 2px 5px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: transparent; color: var(--draw2-text-muted); cursor: pointer; font-size: 0.6rem; } .draw2-asset-definition-remove:hover, .draw2-asset-definition-remove:focus-visible { border-color: var(--draw2-danger-strong); color: var(--draw2-danger-strong); } .draw2-asset-definition-card-fields { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: 5px; min-width: 0; } .draw2-asset-definition-card-fields input, .draw2-asset-definition-card-fields select { min-width: 0; width: 100%; min-height: 28px; padding-inline: 6px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-strong); font-size: 0.65rem; } .draw2-asset-definition-source { margin: 0; color: var(--draw2-text-muted); font: 0.6rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-asset-animation-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; } .draw2-asset-animation-chip { max-width: 100%; padding: 3px 6px; overflow: hidden; border: 1px solid color-mix(in srgb, #8b5cf6 42%, var(--draw2-border-subtle)); border-radius: 999px; background: color-mix(in srgb, #8b5cf6 12%, transparent); color: #c4b5fd; cursor: pointer; font-size: 0.59rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-asset-animation-chip:hover, .draw2-asset-animation-chip:focus-visible { background: color-mix(in srgb, #8b5cf6 24%, transparent); } .draw2-asset-animation-chip.is-empty { border-style: dashed; color: var(--draw2-text-muted); } .draw2-timeline-readout { display: flex; flex: 0 0 28px; align-items: center; gap: 8px; min-width: 0; min-height: 28px; padding: 0 8px; overflow: hidden; border-bottom: 1px solid var(--draw2-border-subtle); background: color-mix(in srgb, var(--draw2-surface-raised) 78%, transparent); color: var(--draw2-text-muted); font-size: 0.62rem; line-height: 1; white-space: nowrap; } .draw2-timeline-readout-mode { flex: 0 0 auto; color: var(--draw2-accent-strong); font-size: 0.57rem; font-weight: 800; letter-spacing: 0.1em; } .draw2-timeline-readout-position, .draw2-timeline-readout-duration { flex: 0 0 auto; color: var(--draw2-text-strong); font: 700 0.68rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; } .draw2-timeline-readout-separator { color: var(--draw2-text-muted); } .draw2-timeline-readout-hint { min-width: 0; margin-left: auto; overflow: hidden; color: var(--draw2-text-muted); text-overflow: ellipsis; } .draw2-timeline-card > .draw2-timeline-readout { position: relative; z-index: 20; } .draw2-timeline-card > .draw2-timeline-tabs-shell { flex: 0 0 30px; min-height: 30px; } .draw2-timeline-card > .draw2-timeline-display-actions { display: none !important; } .draw2-timeline-card .draw2-timeline-viewport { --draw2-timeline-label-width: 148px !important; --draw2-timeline-cell-size: 30px !important; --draw2-timeline-cell-width: 30px !important; --draw2-timeline-row-height: 30px !important; scrollbar-color: color-mix( in srgb, var(--draw2-accent-strong) 58%, var(--draw2-surface-raised) ) var(--draw2-surface-canvas); } .draw2-timeline-card .draw2-timeline-main { grid-template-columns: minmax(0, 1fr) 6px var(--draw2-timeline-properties-width, 224px); } .draw2-timeline-time-ruler { position: sticky; top: 0; left: 0; z-index: 15; display: block; box-sizing: border-box; min-width: 100%; overflow: visible; border-bottom: 1px solid var(--draw2-border-subtle); background: color-mix( in srgb, var(--draw2-surface-raised) 94%, var(--draw2-surface-canvas) ); color: var(--draw2-text-muted); } .draw2-timeline-time-ruler-corner { position: sticky; left: 0; z-index: 19; display: flex; align-items: center; box-sizing: border-box; width: var(--draw2-timeline-label-width); height: 20px; padding: 0 8px; border-right: 1px solid var(--draw2-border-subtle); background: var(--draw2-surface-raised); color: var(--draw2-text-muted); font-size: 0.52rem; font-weight: 800; letter-spacing: 0.14em; } .draw2-timeline-time-ruler-cell { position: absolute; top: 0; box-sizing: border-box; height: 20px; border-left: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 76%, transparent); color: var(--draw2-text-muted); font: 600 0.54rem/20px ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; text-align: left; } .draw2-timeline-time-ruler-cell span { position: absolute; left: 4px; white-space: nowrap; } .draw2-timeline-time-ruler-cell[data-active="true"] { border-left-color: var(--draw2-accent-strong); color: var(--draw2-text-strong); } .draw2-timeline-header-row { z-index: 12 !important; min-width: 100%; background: var(--draw2-surface-raised); } .draw2-timeline-corner, .draw2-timeline-frame-header { box-sizing: border-box; height: var(--draw2-timeline-row-height) !important; min-height: var(--draw2-timeline-row-height) !important; border: 1px solid var(--draw2-border-subtle) !important; background: var(--draw2-surface-raised); } .draw2-timeline-corner { z-index: 18; } .draw2-timeline-frame-header { display: grid; place-items: center; line-height: 1; font-size: 0.66rem; font-weight: 700; font-variant-numeric: tabular-nums; } .draw2-timeline-frame-header[data-duration-ms]::after { position: absolute; right: 3px; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--draw2-text-muted); content: ""; opacity: 0.7; } .draw2-timeline-frame-header[data-selected="true"], .draw2-timeline-frame-header[aria-selected="true"] { border-color: var(--draw2-accent-strong) !important; background: color-mix( in srgb, var(--draw2-accent-strong) 18%, var(--draw2-surface-raised) ); color: var(--draw2-text-strong); } .draw2-timeline-row-label { width: var(--draw2-timeline-label-width) !important; min-width: var(--draw2-timeline-label-width) !important; height: var(--draw2-timeline-row-height) !important; min-height: var(--draw2-timeline-row-height) !important; padding-inline: 8px; border-right: 1px solid var(--draw2-border-subtle) !important; background: var(--draw2-surface-raised); } .draw2-timeline-row { height: var(--draw2-timeline-row-height) !important; min-height: var(--draw2-timeline-row-height) !important; } .draw2-timeline-cell { width: var(--draw2-timeline-cell-size) !important; min-width: var(--draw2-timeline-cell-size) !important; max-width: var(--draw2-timeline-cell-size) !important; height: var(--draw2-timeline-cell-size) !important; min-height: var(--draw2-timeline-cell-size) !important; max-height: var(--draw2-timeline-cell-size) !important; border: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 86%, transparent) !important; border-radius: 2px !important; background: color-mix( in srgb, var(--draw2-surface) 88%, var(--draw2-surface-raised) ); box-shadow: none !important; } .draw2-timeline-cell[data-empty="true"] { background: repeating-linear-gradient( 135deg, var(--draw2-surface) 0 6px, var(--draw2-surface-raised) 6px 12px ); } .draw2-timeline-cell[data-has-drawing="true"] { background: color-mix( in srgb, var(--draw2-accent-strong) 9%, var(--draw2-surface) ); } .draw2-timeline-cell[data-has-drawing="true"]::before { width: 12px; height: 12px; border-radius: 3px; background: var(--draw2-accent-strong); box-shadow: 0 0 0 1px color-mix(in srgb, var(--draw2-accent-strong) 48%, transparent); } .draw2-timeline-cell[data-active-frame="true"] { background: color-mix( in srgb, var(--draw2-accent-strong) 7%, var(--draw2-surface) ); } .draw2-timeline-cell[data-selected="true"], .draw2-timeline-cell[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--draw2-accent-strong) !important; background: color-mix( in srgb, var(--draw2-accent-strong) 20%, var(--draw2-surface) ); } .draw2-timeline-playhead { z-index: 17 !important; width: 2px !important; background: var(--draw2-accent-strong); box-shadow: 0 0 0 1px color-mix(in srgb, var(--draw2-accent-strong) 28%, transparent); } .draw2-timeline-playhead-label { position: absolute; top: 0; left: 4px; display: block; min-width: max-content; padding: 3px 5px; border-radius: 2px; background: var(--draw2-accent-strong); color: var(--draw2-surface-canvas); font: 800 0.55rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; } .draw2-audio-midi-grid { scrollbar-gutter: stable both-edges; overscroll-behavior: contain; } .draw2-audio-midi-grid > .draw2-audio-midi-row:first-child { position: sticky; top: 0; left: 0; z-index: 8; background: var(--draw2-surface-raised); } .draw2-audio-midi-grid > .draw2-audio-midi-row.draw2-audio-midi-header { min-width: max-content; } .draw2-audio-midi-virtual-surface { position: relative; display: block; flex: 0 0 auto; } .draw2-audio-midi-virtual-surface > .draw2-audio-midi-row { position: absolute; left: 0; min-width: max-content; } .draw2-audio-midi-grid .draw2-audio-midi-row { min-width: max-content; } .draw2-audio-midi-cell.is-note-start::after { border-radius: 4px 0 0 4px; opacity: 0.98; } .draw2-audio-midi-cell.is-note-continued::after { border-left: 0; border-radius: 0; opacity: 0.98; } .draw2-audio-midi-cell.is-note-end::after { border-radius: 0 4px 4px 0; } .draw2-audio-midi-cell.is-note-start.is-note-end::after { border-radius: 4px; } .draw2-audio-midi-cell.is-drag-preview { background-color: color-mix(in srgb, #c88bff 24%, #111522); } .draw2-audio-midi-cell.is-drag-preview::after { position: absolute; inset: 3px 0; border: 1px dashed #f0c5ff; border-radius: 2px; background: color-mix(in srgb, #a966dd 58%, transparent); content: ""; pointer-events: none; } .draw2-audio-midi-cell.is-selected-note { outline: 2px solid var(--draw2-text-strong); outline-offset: -2px; z-index: 2; } .draw2-audio-midi-status { flex: 0 0 auto; min-width: 12rem; margin-left: auto; color: var(--draw2-text-muted); font: 700 0.65rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; text-align: right; } .draw2-audio-instrument-lane .draw2-audio-track-lane-label { color: color-mix( in srgb, var(--draw2-accent-strong) 70%, var(--draw2-text-strong) ); } .draw2-audio-instrument-lane .draw2-audio-track-lane-cell.is-note-start { color: var(--draw2-text-strong); font-size: 0.75rem; font-weight: 800; } .draw2-audio-instrument-lane .draw2-audio-track-lane-cell.is-note-continued { border-left: 0; border-radius: 0; background: color-mix(in srgb, #c88bff 25%, var(--draw2-surface-raised)); } .draw2-audio-instrument-lane .draw2-audio-track-lane-cell.is-note-end { border-radius: 0 2px 2px 0; } .draw2-audio-instrument-lane .draw2-audio-track-lane-cell.is-note-start.is-note-end { border-radius: 2px; } .draw2-audio-instrument-lane .draw2-audio-track-lane-cell.is-active { box-shadow: inset 0 0 0 2px var(--draw2-accent-strong); } @media (min-width: 701px) { #draw2WorkspaceFrame[data-creator-mode="DRAW"] #draw2WorkspaceTimelineSlot .draw2-timeline-viewport { --draw2-timeline-label-width: 148px !important; --draw2-timeline-cell-size: 30px !important; --draw2-timeline-cell-width: 30px !important; --draw2-timeline-row-height: 30px !important; } #draw2WorkspaceFrame[data-creator-mode="DRAW"] #draw2WorkspaceTimelineSlot .draw2-timeline-frame-header, #draw2WorkspaceFrame[data-creator-mode="DRAW"] #draw2WorkspaceTimelineSlot .draw2-timeline-cell, #draw2WorkspaceFrame[data-creator-mode="DRAW"] #draw2WorkspaceTimelineSlot .draw2-timeline-corner-button { width: 30px !important; min-width: 30px !important; max-width: 30px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; } #draw2WorkspaceFrame[data-creator-mode="DRAW"] #draw2WorkspaceTimelineSlot .draw2-timeline-row-label, #draw2WorkspaceFrame[data-creator-mode="DRAW"] #draw2WorkspaceTimelineSlot .draw2-timeline-corner { width: 148px !important; min-width: 148px !important; max-width: 148px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; } } .draw2-asset-builder { --draw2-asset-builder-accent: #9b7dff; --draw2-asset-builder-accent-soft: color-mix( in srgb, var(--draw2-asset-builder-accent) 16%, var(--draw2-surface-input) ); display: grid; gap: 10px; min-width: 0; padding: 10px; border: 1px solid color-mix( in srgb, var(--draw2-asset-builder-accent) 48%, var(--draw2-border-subtle) ); border-radius: var(--draw2-radius-md); background: linear-gradient( 140deg, color-mix(in srgb, var(--draw2-surface-raised) 93%, #8b5cf6 7%), var(--draw2-surface) ); box-shadow: 0 14px 32px rgb(0 0 0 / 12%); } .draw2-asset-builder-header, .draw2-asset-builder-card-heading, .draw2-asset-builder-actions, .draw2-asset-builder-matrix-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .draw2-asset-builder-title { display: flex; align-items: center; gap: 8px; min-width: 0; } .draw2-asset-builder-title > div, .draw2-asset-builder-card-heading > div { display: grid; gap: 3px; min-width: 0; } .draw2-asset-builder-title > div > small { overflow: hidden; color: var(--draw2-text-muted); font-size: 0.57rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .draw2-asset-builder-title strong, .draw2-asset-builder-card-heading strong { overflow: hidden; color: var(--draw2-text-strong); font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-asset-builder-step { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid color-mix( in srgb, var(--draw2-asset-builder-accent) 60%, transparent ); border-radius: 50%; background: var(--draw2-asset-builder-accent-soft); color: #d9ccff; font: 800 0.62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-asset-builder-kicker { color: #b7a3ff; font: 800 0.52rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.13em; } .draw2-asset-builder-state, .draw2-asset-builder-card-badge { flex: 0 0 auto; padding: 4px 6px; border: 1px solid var(--draw2-border-subtle); border-radius: 999px; color: var(--draw2-text-muted); font: 700 0.52rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em; white-space: nowrap; } .draw2-asset-builder-state[data-state="ready"] { border-color: color-mix(in srgb, var(--draw2-accent-strong) 62%, transparent); color: var(--draw2-accent-strong); } .draw2-asset-builder-state[data-state="pending"] { border-color: #f4c16e; color: #f4c16e; } .draw2-asset-builder-steps { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 5px; min-width: 0; } .draw2-asset-builder-step-item { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 7px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: color-mix(in srgb, var(--draw2-surface-input) 74%, transparent); color: var(--draw2-text-muted); opacity: 0.72; } .draw2-asset-builder-step-item > b { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; background: var(--draw2-surface-raised); color: var(--draw2-text-muted); font-size: 0.66rem; } .draw2-asset-builder-step-item > span { display: grid; gap: 2px; min-width: 0; } .draw2-asset-builder-step-item strong, .draw2-asset-builder-step-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-asset-builder-step-item strong { color: var(--draw2-text-strong); font-size: 0.57rem; } .draw2-asset-builder-step-item small { color: var(--draw2-text-muted); font-size: 0.48rem; } .draw2-asset-builder-step-item.is-current { border-color: color-mix(in srgb, #4db7ff 72%, var(--draw2-border-subtle)); background: color-mix(in srgb, #4db7ff 14%, var(--draw2-surface-input)); opacity: 1; } .draw2-asset-builder-step-item.is-current > b { background: #4db7ff; color: #07111d; } .draw2-asset-builder-step-item.is-complete { border-color: color-mix(in srgb, #67d59b 55%, var(--draw2-border-subtle)); opacity: 1; } .draw2-asset-builder-step-item.is-complete > b { background: color-mix(in srgb, #67d59b 32%, var(--draw2-surface-raised)); color: #9fe1bb; } .draw2-asset-builder-step-arrow { display: grid; place-items: center; color: var(--draw2-text-muted); font-size: 1.1rem; opacity: 0.6; } .draw2-asset-builder-instruction { margin: 0; padding: 7px 9px; border-left: 3px solid #4db7ff; border-radius: 0 var(--draw2-radius-sm) var(--draw2-radius-sm) 0; background: color-mix(in srgb, #4db7ff 9%, var(--draw2-surface-input)); color: var(--draw2-text-strong); font-size: 0.62rem; font-weight: 700; line-height: 1.45; } .draw2-asset-builder-card-badge-accent { border-color: color-mix(in srgb, #5fd8ab 54%, transparent); color: #7ae5c0; } .draw2-asset-builder-config { display: grid; grid-template-columns: minmax(150px, 1.4fr) repeat(2, minmax(130px, 0.9fr)) minmax(76px, 0.55fr); gap: 7px; min-width: 0; padding: 8px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: color-mix(in srgb, var(--draw2-surface-input) 82%, transparent); } .draw2-asset-builder-field { display: grid; gap: 4px; min-width: 0; color: var(--draw2-text-muted); font-size: 0.58rem; font-weight: 700; } .draw2-asset-builder-field input, .draw2-asset-builder-field select, .draw2-asset-builder-preview-selects select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 30px; padding: 0 7px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-strong); font-size: 0.66rem; } .draw2-asset-builder-field input:focus-visible, .draw2-asset-builder-field select:focus-visible, .draw2-asset-builder-preview-selects select:focus-visible { outline: 2px solid color-mix(in srgb, var(--draw2-asset-builder-accent) 70%, transparent); outline-offset: 1px; } .draw2-asset-builder-columns { display: grid; grid-template-columns: minmax(178px, 0.78fr) minmax(250px, 1.18fr) minmax(178px, 0.82fr); gap: 8px; min-width: 0; } .draw2-asset-builder-card, .draw2-asset-builder-layout { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 9px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: color-mix(in srgb, var(--draw2-surface-raised) 90%, transparent); } .draw2-asset-builder-source { border-color: color-mix(in srgb, #4db7ff 52%, var(--draw2-border-subtle)); } .draw2-asset-builder-matrix-card { border-color: color-mix(in srgb, #67d59b 52%, var(--draw2-border-subtle)); } .draw2-asset-builder-preview-card { border-color: color-mix(in srgb, #d18bff 55%, var(--draw2-border-subtle)); } .draw2-asset-builder-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } .draw2-asset-builder-tab, .draw2-asset-builder-layout-option { min-width: 0; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-muted); cursor: pointer; } .draw2-asset-builder-tab { min-height: 28px; font-size: 0.62rem; font-weight: 700; } .draw2-asset-builder-tab:hover, .draw2-asset-builder-tab:focus-visible, .draw2-asset-builder-tab.is-active, .draw2-asset-builder-layout-option:hover, .draw2-asset-builder-layout-option:focus-visible, .draw2-asset-builder-layout-option.is-active { border-color: var(--draw2-asset-builder-accent); background: var(--draw2-asset-builder-accent-soft); color: var(--draw2-text-strong); } .draw2-asset-builder-source-preview, .draw2-asset-builder-preview-stage { position: relative; display: grid; place-items: center; min-width: 0; min-height: 152px; overflow: hidden; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background-color: #151927; background-image: linear-gradient(45deg, #202536 25%, transparent 25%), linear-gradient(-45deg, #202536 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #202536 75%), linear-gradient(-45deg, transparent 75%, #202536 75%); background-position: 0 0, 0 8px, 8px -8px, -8px 0; background-size: 16px 16px; } .draw2-asset-builder-source-preview canvas, .draw2-asset-builder-preview-stage canvas { display: block; width: min(100%, 192px); height: auto; max-height: 100%; image-rendering: pixelated; } .draw2-asset-builder-source-overlay { position: absolute; right: 6px; bottom: 6px; padding: 4px 6px; border: 1px solid var(--draw2-border-subtle); border-radius: 999px; background: rgb(10 13 23 / 78%); color: var(--draw2-text-muted); font-size: 0.52rem; pointer-events: none; } .draw2-asset-builder-source-overlay[data-active="true"] { border-color: #65d8a5; color: #7ae5c0; } .draw2-asset-builder-source-info, .draw2-asset-builder-help, .draw2-asset-builder-layout-note, .draw2-asset-builder-matrix-footer > span, .draw2-asset-builder-actions > span { min-width: 0; margin: 0; overflow: hidden; color: var(--draw2-text-muted); font-size: 0.57rem; line-height: 1.4; text-overflow: ellipsis; } .draw2-asset-builder-frame-strip { display: flex; gap: 4px; min-width: 0; max-width: 100%; padding: 2px 1px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; } .draw2-asset-builder-frame { flex: 0 0 34px; min-height: 28px; padding: 0 3px; border: 1px solid var(--draw2-border-subtle); border-radius: 3px; background: var(--draw2-surface-input); color: var(--draw2-text-muted); cursor: pointer; font: 700 0.56rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-asset-builder-frame:hover, .draw2-asset-builder-frame:focus-visible, .draw2-asset-builder-frame.is-active { border-color: #4db7ff; background: color-mix(in srgb, #4db7ff 18%, var(--draw2-surface-input)); color: var(--draw2-text-strong); } .draw2-asset-builder-primary-action, .draw2-asset-builder-save { width: 100%; min-height: 32px; border-color: #4db7ff; background: color-mix(in srgb, #4db7ff 20%, var(--draw2-surface-raised)); } .draw2-asset-builder-primary-action:hover, .draw2-asset-builder-primary-action:focus-visible, .draw2-asset-builder-save:hover, .draw2-asset-builder-save:focus-visible { background: color-mix(in srgb, #4db7ff 32%, var(--draw2-surface-raised)); } .draw2-asset-builder-help { white-space: normal; } .draw2-asset-builder-matrix { display: grid; grid-template-columns: minmax(54px, 0.68fr) repeat(4, minmax(44px, 1fr)); gap: 3px; min-width: 0; } .draw2-asset-builder-matrix-corner, .draw2-asset-builder-matrix-header, .draw2-asset-builder-matrix-row-label { display: grid; align-content: center; min-width: 0; min-height: 34px; padding: 3px; border: 1px solid var(--draw2-border-subtle); background: color-mix(in srgb, var(--draw2-surface-input) 86%, transparent); color: var(--draw2-text-muted); font-size: 0.55rem; font-weight: 700; } .draw2-asset-builder-matrix-corner { padding-left: 6px; color: #9fe1bb; } .draw2-asset-builder-matrix-header { justify-items: center; gap: 1px; text-align: center; } .draw2-asset-builder-matrix-header span { color: #9fe1bb; font-size: 0.92rem; line-height: 1; } .draw2-asset-builder-matrix-header small { overflow: hidden; font-size: 0.48rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-asset-builder-matrix-row-label { align-items: center; padding-left: 6px; color: var(--draw2-text-strong); } .draw2-asset-builder-matrix-cell { display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; min-width: 0; min-height: 58px; padding: 3px; border: 1px solid var(--draw2-border-subtle); border-radius: 3px; background: color-mix(in srgb, var(--draw2-surface-input) 94%, transparent); color: var(--draw2-text-muted); cursor: pointer; text-align: left; } .draw2-asset-builder-matrix-cell:hover, .draw2-asset-builder-matrix-cell:focus-visible { border-color: #67d59b; background: color-mix(in srgb, #67d59b 17%, var(--draw2-surface-input)); color: var(--draw2-text-strong); } .draw2-asset-builder-matrix-cell[data-filled="true"] { border-color: color-mix(in srgb, #67d59b 68%, var(--draw2-border-subtle)); background: color-mix(in srgb, #67d59b 11%, var(--draw2-surface-input)); } .draw2-asset-builder-matrix-cell canvas { grid-row: 1 / -1; width: 28px; height: 28px; image-rendering: pixelated; } .draw2-asset-builder-matrix-cell strong { overflow: hidden; color: var(--draw2-text-strong); font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-asset-builder-matrix-cell small { overflow: hidden; font-size: 0.46rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-asset-builder-matrix-footer { align-items: flex-start; } .draw2-asset-builder-matrix-footer .draw2-button { flex: 0 0 auto; min-height: 28px; padding-inline: 8px; font-size: 0.58rem; } .draw2-asset-builder-preview-selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; } .draw2-asset-builder-preview-selects label { display: grid; gap: 3px; min-width: 0; color: var(--draw2-text-muted); font-size: 0.54rem; font-weight: 700; } .draw2-asset-builder-preview-controls { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 4px; } .draw2-asset-builder-preview-controls .draw2-button { min-width: 0; min-height: 30px; padding-inline: 4px; font-size: 0.58rem; } .draw2-asset-builder-preview-card input[type="range"] { width: 100%; accent-color: #d18bff; } .draw2-asset-builder-preview-readout { min-height: 1.2em; color: #d9b3ff; font: 700 0.58rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; } .draw2-asset-builder-layout { gap: 7px; border-color: color-mix(in srgb, #f1b967 45%, var(--draw2-border-subtle)); } .draw2-asset-builder-layout-details { min-width: 0; border: 1px solid color-mix(in srgb, #f1b967 42%, var(--draw2-border-subtle)); border-radius: var(--draw2-radius-sm); background: color-mix(in srgb, var(--draw2-surface-input) 60%, transparent); } .draw2-asset-builder-layout-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 8px 9px; color: var(--draw2-text-muted); cursor: pointer; font-size: 0.58rem; font-weight: 800; list-style: none; } .draw2-asset-builder-layout-details > summary::-webkit-details-marker { display: none; } .draw2-asset-builder-layout-details > summary > span:first-child { display: grid; gap: 2px; min-width: 0; } .draw2-asset-builder-layout-details > summary strong, .draw2-asset-builder-layout-details > summary small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-asset-builder-layout-details > summary strong { color: var(--draw2-text-strong); } .draw2-asset-builder-layout-details > summary small { color: #f1c77b; font-size: 0.5rem; font-weight: 700; } .draw2-asset-builder-layout-details[open] > summary { border-bottom: 1px solid var(--draw2-border-subtle); color: var(--draw2-text-strong); } .draw2-asset-builder-layout-details .draw2-asset-builder-layout { margin: 7px; } .draw2-asset-builder-layout-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; min-width: 0; } .draw2-asset-builder-layout-option { display: flex; align-items: center; gap: 6px; min-height: 42px; padding: 5px 6px; text-align: left; } .draw2-asset-builder-layout-option > span:last-child { display: grid; gap: 2px; min-width: 0; } .draw2-asset-builder-layout-option strong, .draw2-asset-builder-layout-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-asset-builder-layout-option strong { color: var(--draw2-text-strong); font-size: 0.56rem; } .draw2-asset-builder-layout-option small { color: var(--draw2-text-muted); font-size: 0.48rem; } .draw2-asset-builder-layout-icon { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border: 1px solid var(--draw2-border-subtle); border-radius: 3px; color: #f1c77b; font-size: 0.82rem; } .draw2-asset-builder-actions { align-items: center; padding-top: 2px; } .draw2-asset-builder-actions > span { white-space: normal; } .draw2-asset-builder-save { width: auto; min-width: 112px; flex: 0 0 auto; border-color: #9b7dff; background: color-mix(in srgb, #9b7dff 24%, var(--draw2-surface-raised)); } .draw2-asset-detail-editor { display: grid; gap: 8px; min-width: 0; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: color-mix(in srgb, var(--draw2-surface) 88%, transparent); } .draw2-asset-detail-editor > summary { padding: 9px 10px; color: var(--draw2-text-muted); cursor: pointer; font-size: 0.62rem; font-weight: 800; } .draw2-asset-detail-editor[open] > summary { border-bottom: 1px solid var(--draw2-border-subtle); color: var(--draw2-text-strong); } .draw2-asset-detail-editor > .draw2-creator-fieldset, .draw2-asset-detail-editor > .draw2-asset-advanced { margin-inline: 7px; } .draw2-asset-detail-editor > .draw2-asset-advanced { margin-bottom: 7px; } @media (min-width: 1120px) { .draw2-workspace-frame[data-workspace-profile="desktop"] :has(#draw2WorkspacePanelAssets:not([hidden])) { --draw2-panel-width: min(760px, 58vw); } .draw2-workspace-frame[data-workspace-profile="desktop"]:has( #draw2WorkspacePanelAssets:not([hidden]) ) { grid-template-columns: var(--draw2-tool-rail-width) minmax(0, 1fr) minmax( 680px, var(--draw2-panel-width) ) !important; } .draw2-workspace-right-dock:has(#draw2WorkspacePanelAssets:not([hidden])) { grid-template-rows: minmax(0, 1fr) !important; } .draw2-workspace-right-dock:has(#draw2WorkspacePanelAssets:not([hidden])) > #draw2WorkspacePaletteStrip, .draw2-workspace-right-dock:has(#draw2WorkspacePanelAssets:not([hidden])) > #draw2WorkspaceModeSummary, .draw2-workspace-right-dock:has(#draw2WorkspacePanelAssets:not([hidden])) > #draw2WorkspacePaletteResize { display: none !important; } .draw2-workspace-right-dock:has(#draw2WorkspacePanelAssets:not([hidden])) > #draw2WorkspaceRightCustomDock { grid-row: 1 !important; min-height: 0 !important; } } .draw2-panel-shell { min-width: 0; border: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 86%, transparent); border-radius: var(--draw2-radius-md); background: linear-gradient( 160deg, color-mix(in srgb, var(--draw2-surface-raised) 94%, #4db7ff 6%), var(--draw2-surface) ); box-shadow: 0 8px 20px rgb(0 0 0 / 10%); } .draw2-panel-shell > .draw2-panel-heading { padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 74%, transparent); } .draw2-panel-shell > .draw2-panel-note, .draw2-panel-shell > .draw2-panel-status { line-height: 1.5; } .draw2-panel-stat-grid > div, .draw2-game-scene-row, .draw2-game-assets-row, .draw2-audio-clip-row, .draw2-audio-mixer-row { border-radius: var(--draw2-radius-sm); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--draw2-border-subtle) 56%, transparent); } .draw2-panel-action-row .draw2-button, .draw2-panel-shell .draw2-button { transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease; } .draw2-panel-action-row .draw2-button:active, .draw2-panel-shell .draw2-button:active { transform: translateY(1px); } @media (min-width: 701px) { .draw2-workspace-frame[data-workspace-profile="desktop"] { --draw2-left-rail-width: var(--draw2-tool-dock-width, 52px); --draw2-right-dock-width: var(--draw2-color-dock-width, 320px); } .draw2-workspace-frame[data-workspace-profile="desktop"]:not( [data-creator-mode="AUDIO"] ):not([data-creator-mode="GAME"]):not( :has(#draw2WorkspacePanelAssets:not([hidden])) ) { grid-template-columns: var(--draw2-left-rail-width, var(--draw2-tool-rail-width)) minmax(0, 1fr) minmax(244px, var(--draw2-right-dock-width, var(--draw2-panel-width))) !important; } .draw2-workspace-frame[data-workspace-profile="desktop"]:not( [data-creator-mode="AUDIO"] ):not([data-creator-mode="GAME"]):not( :has(#draw2WorkspacePanelAssets:not([hidden])) ) { grid-template-rows: 80px minmax(0, 1fr) var(--draw2-timeline-height) var(--draw2-statusbar-height) !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] { grid-template-columns: var(--draw2-left-rail-width, var(--draw2-tool-rail-width)) minmax(0, 1fr) minmax(244px, var(--draw2-right-dock-width, var(--draw2-panel-width))) !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] { grid-template-columns: minmax(196px, 220px) minmax(0, 1fr) minmax(244px, var(--draw2-right-dock-width, var(--draw2-panel-width))) !important; grid-template-rows: 80px minmax(0, 1fr) var(--draw2-timeline-height) var(--draw2-statusbar-height) !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceLeftDock { width: 100% !important; min-width: 0 !important; overflow: hidden !important; border-right: 1px solid var(--draw2-border-color, #2d3a4f); } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceLeftDock .draw2-workspace-toolbar { display: none !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2GameLeftDock:not([hidden]) { display: flex !important; flex-direction: column; gap: 10px; width: 100%; min-width: 0; height: 100%; padding: 12px 10px; overflow: auto; background: var(--draw2-panel-surface, #151d2b); } .draw2-game-left-dock-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; } .draw2-game-hierarchy-add-wrap { position: relative; flex: 0 0 auto; } .draw2-game-hierarchy-add-wrap > .draw2-button { min-height: 30px; padding-inline: 7px; font-size: 11px; } .draw2-game-hierarchy-add-menu { position: absolute; top: calc(100% + 5px); right: 0; z-index: 50; display: grid; gap: 3px; width: max-content; min-width: 190px; padding: 5px; border: 1px solid var(--draw2-border-strong); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); box-shadow: var(--draw2-shadow-panel); } .draw2-game-hierarchy-add-menu[hidden] { display: none !important; } .draw2-game-hierarchy-add-menu > button { min-height: 29px; padding: 5px 8px; border: 1px solid transparent; border-radius: var(--draw2-radius-sm); background: transparent; color: var(--draw2-text-muted); font-size: 11px; text-align: left; } .draw2-game-hierarchy-add-menu > button:hover, .draw2-game-hierarchy-add-menu > button:focus-visible { border-color: var(--draw2-accent-strong); background: color-mix( in srgb, var(--draw2-accent-strong) 12%, var(--draw2-surface-input) ); color: var(--draw2-text-strong); outline: none; } .draw2-game-left-dock-header > div { display: grid; gap: 2px; min-width: 0; } .draw2-game-left-dock-header strong { color: var(--draw2-text-strong, #f4f7fb); font-size: 13px; } .draw2-game-hierarchy-list { display: grid; gap: 4px; min-height: 0; overflow: auto; } .draw2-game-hierarchy-group { display: grid; gap: 4px; min-width: 0; } .draw2-game-hierarchy-group-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 4px 3px 2px; border-bottom: 1px solid var(--draw2-border-subtle); } .draw2-game-hierarchy-group-heading strong { color: var(--draw2-text-strong, #f4f7fb); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; } .draw2-game-hierarchy-group-heading small { color: var(--draw2-text-muted, #a9b4c4); font-size: 9px; } .draw2-game-hierarchy-group-items { display: grid; gap: 3px; padding-left: 5px; } .draw2-game-hierarchy-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; width: 100%; min-width: 0; min-height: 34px; padding: 6px 8px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); color: var(--draw2-text-muted); text-align: left; } .draw2-game-hierarchy-entry:hover, .draw2-game-hierarchy-entry:focus-visible, .draw2-game-hierarchy-entry.is-active { border-color: var(--draw2-accent-strong); background: color-mix( in srgb, var(--draw2-accent-strong) 10%, var(--draw2-surface-raised) ); color: var(--draw2-text-strong); outline: none; } .draw2-game-hierarchy-entry > span:first-child { display: grid; gap: 2px; min-width: 0; } .draw2-game-hierarchy-entry strong, .draw2-game-hierarchy-entry small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-game-hierarchy-entry strong { color: var(--draw2-text-strong, #f4f7fb); font-size: 11px; } .draw2-game-hierarchy-entry small { color: var(--draw2-text-muted, #a9b4c4); font-size: 9px; } .draw2-game-creation-guide-step[data-state="optional"] { opacity: 0.78; border-style: dashed; } .draw2-game-creation-guide-step[data-state="optional"] > span:first-child { width: auto; min-width: 17px; padding-inline: 3px; border-radius: 4px; font-size: 0.46rem; } .draw2-game-left-dock .draw2-panel-status { margin-top: auto; font-size: 11px; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] { --draw2-timeline-height: clamp(210px, 29dvh, 300px); --draw2-audio-right-width: var( --draw2-right-dock-width, clamp(320px, 27vw, 390px) ); grid-template-columns: minmax(0, 1fr) minmax(260px, var(--draw2-audio-right-width)) !important; grid-template-rows: 64px minmax(0, 1fr) var(--draw2-timeline-height) var(--draw2-statusbar-height) !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceLeftDock { position: relative !important; width: var(--draw2-left-rail-width, var(--draw2-tool-rail-width)) !important; min-width: var(--draw2-left-rail-width, var(--draw2-tool-rail-width)) !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceRightResize, .draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineResize { display: block !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2WorkspaceRightDock > #draw2WorkspaceRightResize { display: block !important; top: 8px !important; bottom: 8px !important; left: -6px !important; width: 12px !important; z-index: 8 !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioRightDock { width: 100% !important; min-width: 0 !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineRegion { min-height: 140px !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck { width: 100% !important; min-width: 0 !important; min-height: 0 !important; } } .draw2-audio-midi-grid { position: relative; isolation: isolate; contain: strict; width: 100%; overscroll-behavior: contain; scrollbar-gutter: stable both-edges; background: #0b0f19; } .draw2-audio-midi-canvas-layer { position: relative; display: block; flex: 0 0 auto; min-width: 0; min-height: 0; contain: strict; } .draw2-audio-midi-canvas { position: absolute; z-index: 1; inset: 0 auto auto 0; display: block; max-width: none; outline: none; cursor: crosshair; touch-action: none; user-select: none; } .draw2-audio-midi-keyboard { position: sticky; z-index: 3; left: 0; display: block; max-width: none; border-right: 1px solid rgb(200 139 255 / 46%); box-shadow: 4px 0 9px rgb(3 5 12 / 28%); pointer-events: auto; cursor: default; } .draw2-audio-midi-canvas:focus-visible { box-shadow: inset 0 0 0 2px #efd2ff; } .draw2-audio-midi-playhead { position: absolute; z-index: 2; border-left: 2px solid #f0c5ff; border-right: 1px solid rgba(240, 197, 255, 0.42); background: rgba(200, 139, 255, 0.12); box-shadow: 0 0 12px rgba(200, 139, 255, 0.24); pointer-events: none; transition: left 70ms linear, width 70ms linear; will-change: left, width; } .draw2-audio-midi-playhead[hidden] { display: none; } @media (min-width: 701px) { #draw2WorkspaceFrame[data-creator-mode="AUDIO"] .draw2-workspace-command-bar { display: none !important; } } @media (min-width: 1120px) { .draw2-workspace-frame[data-creator-mode="AUDIO"] { --draw2-audio-accent: #c88bff; --draw2-audio-surface: #111827; --draw2-audio-surface-deep: #0b0f19; } .draw2-workspace-frame[data-creator-mode="AUDIO"] #draw2AudioWorkspace, .draw2-workspace-frame[data-creator-mode="AUDIO"] #draw2AudioRightDock, .draw2-workspace-frame[data-creator-mode="AUDIO"] #draw2ModeTimelineDeck { border-color: color-mix( in srgb, var(--draw2-audio-accent) 58%, var(--draw2-border) ); box-shadow: 0 0 0 1px rgba(200, 139, 255, 0.08), 0 14px 36px rgba(3, 5, 12, 0.24); } .draw2-workspace-frame[data-creator-mode="AUDIO"] .draw2-audio-editor-header, .draw2-workspace-frame[data-creator-mode="AUDIO"] .draw2-audio-right-tabs, .draw2-workspace-frame[data-creator-mode="AUDIO"] .draw2-mode-timeline-deck-tabs { background: linear-gradient(180deg, #182033, #111827); } .draw2-workspace-frame[data-creator-mode="AUDIO"] .draw2-audio-editor-tab, .draw2-workspace-frame[data-creator-mode="AUDIO"] .draw2-audio-right-tab, .draw2-workspace-frame[data-creator-mode="AUDIO"] .draw2-mode-timeline-deck-tab { min-height: 30px; letter-spacing: 0.04em; } .draw2-workspace-frame[data-creator-mode="AUDIO"] .draw2-audio-editor-tab.is-active, .draw2-workspace-frame[data-creator-mode="AUDIO"] .draw2-audio-right-tab.is-active, .draw2-workspace-frame[data-creator-mode="AUDIO"] .draw2-mode-timeline-deck-tab.is-active { border-color: var(--draw2-audio-accent); background: color-mix(in srgb, var(--draw2-audio-accent) 26%, #171d2b); color: #f8efff; } .draw2-workspace-frame[data-creator-mode="AUDIO"] .draw2-audio-panel, .draw2-workspace-frame[data-creator-mode="AUDIO"] .draw2-audio-right-surface, .draw2-workspace-frame[data-creator-mode="AUDIO"] .draw2-mode-deck-surface { background: var(--draw2-audio-surface-deep); } } .draw2-workspace-frame[data-creator-mode="DRAW"] { --draw2-mode-accent: #74e0cf; --draw2-mode-accent-soft: rgba(116, 224, 207, 0.18); } .draw2-workspace-frame[data-creator-mode="GAME"] { --draw2-mode-accent: #8bd6a6; --draw2-mode-accent-soft: rgba(139, 214, 166, 0.18); } .draw2-workspace-frame[data-creator-mode="AUDIO"] { --draw2-mode-accent: #c88bff; --draw2-mode-accent-soft: rgba(200, 139, 255, 0.18); } @media (min-width: 701px) { .draw2-workspace-frame[data-workspace-profile="desktop"] { border: 1px solid color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent)) 42%, var(--draw2-border) ); border-radius: 9px; background: #0c1018; box-shadow: 0 12px 32px rgb(0 0 0 / 22%); } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-topbar { border-bottom-color: color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent)) 44%, var(--draw2-border) ) !important; background: linear-gradient(180deg, #171d29, #10151f) !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-global-row, .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-creator-mode-bar { background: linear-gradient(180deg, #131a26, #0d131d) !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-creator-mode-bar { border-color: color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent)) 32%, var(--draw2-border) ); border-radius: 6px; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-creator-mode.is-active { border-color: var(--draw2-mode-accent, var(--draw2-accent-strong)); background: var(--draw2-mode-accent-soft, var(--draw2-surface-raised)); color: var(--draw2-mode-accent, var(--draw2-accent-strong)); } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-canvas-region { background: #0c1018 !important; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 3%); } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-right-dock, .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-timeline-region { border-color: color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-border)) 34%, var(--draw2-border-subtle) ); background: #111722; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-tabs, .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-mode-timeline-deck-tabs { background: linear-gradient(180deg, #182033, #111827); } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-tab.is-active, .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-mode-timeline-deck-tab.is-active { border-color: var(--draw2-mode-accent, var(--draw2-accent-strong)); background: var(--draw2-mode-accent-soft, var(--draw2-surface-raised)); color: var(--draw2-text-strong); } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-statusbar { border-top-color: color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-border)) 30%, var(--draw2-border-subtle) ); background: #0b0f17; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"], .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] { grid-template-rows: 80px minmax(0, 1fr) max(140px, var(--draw2-timeline-height, 220px)) var(--draw2-statusbar-height) !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] { grid-template-rows: 64px minmax(0, 1fr) max(140px, var(--draw2-timeline-height, 240px)) var(--draw2-statusbar-height) !important; } } .draw2-asset-builder-asset-picker { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)) !important; align-items: stretch !important; gap: 8px !important; padding: 8px !important; } .draw2-asset-builder-asset-cards { display: contents !important; } .draw2-asset-builder-asset-card, .draw2-asset-builder-add-card { display: grid !important; align-content: center !important; justify-items: center !important; gap: 5px !important; min-width: 0 !important; min-height: 92px !important; padding: 10px 8px !important; border: 1px solid var(--draw2-border-subtle) !important; border-radius: var(--draw2-radius-sm) !important; background: var(--draw2-surface-raised) !important; text-align: center !important; } .draw2-asset-builder-asset-card:hover, .draw2-asset-builder-asset-card:focus-visible, .draw2-asset-builder-asset-card.is-selected { border-color: #67d59b !important; background: color-mix(in srgb, #67d59b 15%, var(--draw2-surface-raised)) !important; } .draw2-asset-builder-asset-card strong { max-width: 100%; overflow: hidden; color: var(--draw2-text-strong); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-asset-builder-asset-card span { color: #9fe1bb; font-size: 0.56rem; font-weight: 800; } .draw2-asset-builder-asset-card small { max-width: 100%; overflow: hidden; color: var(--draw2-text-muted); font-size: 0.48rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-asset-builder-add-card { border-style: dashed !important; border-color: color-mix(in srgb, #67d59b 78%, var(--draw2-border-subtle)) !important; color: #9fe1bb !important; font-size: 1.8rem !important; line-height: 1 !important; } .draw2-asset-builder-asset-summary { grid-column: 1 / -1 !important; padding: 2px 2px 0 !important; overflow: hidden !important; font-size: 0.54rem !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .draw2-asset-builder-close { grid-column: 1 / -1 !important; justify-self: start !important; font-size: 0.56rem !important; } .draw2-asset-builder[data-editor-open="false"] .draw2-asset-builder-instruction, .draw2-asset-builder[data-editor-open="false"] .draw2-asset-builder-config, .draw2-asset-builder[data-editor-open="false"] .draw2-asset-builder-columns, .draw2-asset-builder[data-editor-open="false"] .draw2-asset-builder-layout-details, .draw2-asset-builder[data-editor-open="false"] .draw2-asset-builder-actions, .draw2-asset-builder[data-editor-open="false"] .draw2-asset-builder-close { display: none !important; } .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-steps, .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-source, .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-motion-heading:not( .draw2-asset-builder-direction-heading ), .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-motion-list, .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-compass, .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-compass-actions, .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-layout-details, .draw2-asset-detail-editor { display: none !important; } .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-config { grid-template-columns: minmax(180px, 1.4fr) minmax(130px, 0.8fr) !important; padding: 7px !important; } .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-config > .draw2-asset-builder-field:nth-child(3), .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-config > .draw2-asset-builder-field:nth-child(4) { display: none !important; } .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-columns { grid-template-columns: minmax(0, 1fr) minmax(210px, 290px) !important; align-items: start !important; } .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-matrix-card { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; } .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-matrix-card > .draw2-asset-builder-direction-heading { order: 2; margin-top: 0; padding-top: 0; border-top: 0; } .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-matrix-details { order: 3; display: block !important; border: 0 !important; background: transparent !important; } .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-matrix-details > .draw2-asset-builder-matrix { margin: 0 !important; } .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-matrix-footer { order: 4; } .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-new-motion { order: 5; } .draw2-asset-builder[data-editor-open="true"] .draw2-asset-builder-frame-editor { order: 6; } .draw2-asset-builder-matrix { grid-template-columns: minmax(66px, 0.72fr) repeat(4, minmax(58px, 1fr)) !important; gap: 4px !important; overflow-x: auto !important; padding-bottom: 2px !important; } .draw2-asset-builder-matrix[data-direction-count="1"] { grid-template-columns: minmax(72px, 0.72fr) minmax(90px, 1fr) !important; } .draw2-asset-builder-matrix[data-direction-count="2"] { grid-template-columns: minmax(72px, 0.72fr) repeat(2, minmax(90px, 1fr)) !important; } .draw2-asset-builder-matrix[data-direction-count="8"] { grid-template-columns: minmax(72px, 0.72fr) repeat(8, minmax(78px, 1fr)) !important; } .draw2-asset-builder-matrix[data-direction-count="CUSTOM"] { grid-template-columns: minmax(72px, 0.72fr) repeat(auto-fit, minmax(88px, 1fr)) !important; } .draw2-asset-builder-matrix-cell { grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; place-items: center !important; min-height: 54px !important; padding: 5px !important; text-align: center !important; } .draw2-asset-builder-matrix-cell canvas, .draw2-asset-builder-matrix-cell small { display: none !important; } .draw2-asset-builder-matrix-cell strong { font-size: 1.05rem !important; line-height: 1 !important; } .draw2-asset-builder-matrix-cell[data-selected="true"] { border-color: #f1c77b !important; background: color-mix(in srgb, #f1c77b 18%, var(--draw2-surface-input)) !important; box-shadow: 0 0 0 1px color-mix(in srgb, #f1c77b 42%, transparent) !important; } .draw2-asset-builder-preview-card { position: sticky; top: 6px; } .draw2-asset-builder-preview-card .draw2-asset-builder-help, .draw2-asset-builder-preview-card .draw2-asset-builder-card-badge { display: none !important; } .draw2-workspace-menu-bar .draw2-menu:not(.draw2-details-menu) { display: none !important; } .draw2-workspace-menu-bar .draw2-details-menu { display: block !important; } @media (min-width: 1120px) { .draw2-workspace-frame[data-workspace-profile="desktop"] { --draw2-topbar-height: 64px; --draw2-timeline-height: clamp(176px, 25dvh, 260px); --draw2-left-rail-width: var(--draw2-tool-dock-width, 52px); --draw2-right-dock-width: var(--draw2-color-dock-width, 320px); grid-template-rows: var(--draw2-topbar-height) minmax(0, 1fr) max(140px, var(--draw2-timeline-height)) var(--draw2-statusbar-height) !important; grid-template-areas: "top top top" "left canvas right" "timeline timeline timeline" "status status status" !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"], .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] { grid-template-columns: var(--draw2-left-rail-width) minmax(0, 1fr) minmax(244px, var(--draw2-right-dock-width)) !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"], .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] { grid-template-columns: 0 minmax(0, 1fr) minmax(244px, var(--draw2-right-dock-width)) !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"]:has( #draw2WorkspacePanelAssets:not([hidden]) ) { grid-template-columns: var(--draw2-left-rail-width) minmax(0, 1fr) minmax(680px, var(--draw2-panel-width)) !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-topbar { position: relative !important; display: block !important; height: var(--draw2-topbar-height) !important; min-height: var(--draw2-topbar-height) !important; max-height: var(--draw2-topbar-height) !important; padding: 0 !important; overflow: visible !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-global-row { position: relative !important; display: block !important; width: 100% !important; height: var(--draw2-topbar-height) !important; min-height: var(--draw2-topbar-height) !important; padding: 0 !important; overflow: visible !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-brand { position: absolute !important; top: 0 !important; left: 8px !important; z-index: 4 !important; display: flex !important; width: 134px !important; min-width: 134px !important; height: var(--draw2-topbar-height) !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-menu-bar { position: absolute !important; top: 12px !important; left: 148px !important; z-index: 5 !important; display: flex !important; width: 76px !important; height: 40px !important; min-width: 76px !important; padding: 3px !important; overflow: visible !important; border: 1px solid var(--draw2-border) !important; border-radius: 7px; background: #0d131d; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-menu-bar .draw2-details-menu { width: 100% !important; min-width: 0 !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-menu-bar .draw2-details-menu > summary { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 32px !important; min-height: 32px !important; padding: 0 4px !important; border: 1px solid transparent !important; border-radius: 4px !important; color: var(--draw2-text-strong); font-size: 0.62rem !important; gap: 4px; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-details-label { display: inline !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-project-slot { display: none !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-command-bar { position: absolute !important; top: 12px !important; right: 8px !important; z-index: 5 !important; display: flex !important; width: 196px !important; height: 40px !important; min-height: 40px !important; padding: 3px !important; gap: 3px !important; overflow: hidden !important; border: 1px solid var(--draw2-border) !important; border-radius: 7px; background: #0d131d; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > * { display: none !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > [data-workspace-command="undo"], .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > [data-workspace-command="redo"], .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > [data-workspace-command="panel-export"], .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > [data-mode-playback], .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > [data-workspace-command="command-palette"] { display: flex !important; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > .draw2-icon-button span { display: none !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > .draw2-icon-button svg { width: var(--draw2-icon-size) !important; height: var(--draw2-icon-size) !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-creator-mode-bar { position: absolute !important; top: 12px !important; left: 232px !important; z-index: 4 !important; display: flex !important; width: 228px !important; height: 40px !important; min-height: 40px !important; padding: 3px !important; gap: 3px !important; overflow: hidden !important; border: 1px solid color-mix(in srgb, var(--draw2-mode-accent) 40%, var(--draw2-border)); border-radius: 7px; background: #0d131d; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-creator-mode-bar .draw2-creator-mode { display: flex !important; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; padding: 0 5px !important; border-radius: 4px !important; font-size: 0.62rem !important; gap: 4px; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-creator-mode-bar .draw2-creator-mode[data-creator-mode="ANIMATE"], .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-creator-mode-bar .draw2-creator-mode[data-creator-mode="ASSET"], .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-creator-mode-bar .draw2-creator-mode[data-creator-mode="EXPORT"] { display: none !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-context-row { position: absolute !important; top: 12px !important; right: 216px !important; left: 470px !important; z-index: 3 !important; display: flex !important; width: auto !important; height: 40px !important; min-height: 40px !important; padding: 3px 5px !important; overflow: hidden !important; border: 1px solid var(--draw2-border) !important; border-radius: 7px; background: #0d131d; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-context-row .draw2-workspace-quick-controls { width: 100% !important; height: 32px !important; min-height: 32px !important; overflow: hidden !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-workspace-context-row, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-context-row { display: none !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioGlobalControls { position: absolute !important; top: 12px !important; right: 216px !important; left: 470px !important; z-index: 4 !important; display: flex !important; width: auto !important; height: 40px !important; min-height: 40px !important; padding: 3px 5px !important; overflow: hidden !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioGlobalSaveState { display: none !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-canvas-region { min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; background: #0c1018 !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] .draw2-workspace-canvas-region, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-workspace-canvas-region { padding: 8px !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-canvas-region { position: relative !important; padding: 0 !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-right-dock { min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; padding: 8px 8px 8px 0 !important; border-left: 0 !important; background: transparent !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] .draw2-workspace-right-dock, .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-workspace-right-dock { display: grid !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-right-dock { display: flex !important; flex-direction: column !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioWorkspace:not([hidden]) { position: absolute !important; inset: 8px !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; min-width: 0 !important; min-height: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; overflow: hidden !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioWorkspace[hidden], .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioRightDock[hidden] { display: none !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2WorkspaceRightDock > *:not(#draw2AudioRightDock) { display: none !important; } .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioRightDock { display: flex !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; overflow: hidden !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineRegion { min-width: 0 !important; min-height: 0 !important; padding: 8px 8px 0 !important; overflow: hidden !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck { width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-button, .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-icon-button, .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-tool-button, .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-tool-group-summary { min-height: var(--draw2-control-size, 32px); } .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-audio-editor-tab, .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-audio-right-tab, .draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-mode-timeline-deck-tab { min-height: 32px !important; } } @media (min-width: 1120px) { .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"], .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"], .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] { --draw2-timeline-height: clamp(176px, 25dvh, 260px); grid-template-rows: 64px minmax(0, 1fr) max(140px, var(--draw2-timeline-height)) var(--draw2-statusbar-height) !important; grid-template-areas: "top top top" "left canvas right" "timeline timeline timeline" "status status status" !important; } } @media (min-width: 1120px) { #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"], #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"], #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] { grid-template-rows: 64px minmax(0, 1fr) max(140px, var(--draw2-timeline-height)) var(--draw2-statusbar-height) !important; grid-template-areas: "top top top" "left canvas right" "timeline timeline timeline" "status status status" !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-brand { position: absolute !important; top: 0 !important; left: 8px !important; width: 134px !important; min-width: 134px !important; height: 64px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-menu-bar, #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar { display: flex !important; z-index: 5 !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-menu-bar { top: 12px !important; left: 148px !important; width: 76px !important; min-width: 76px !important; height: 40px !important; padding: 3px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar { top: 12px !important; right: 8px !important; width: 196px !important; height: 40px !important; min-height: 40px !important; padding: 3px !important; gap: 3px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > * { display: none !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > [data-workspace-command="undo"], #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > [data-workspace-command="redo"], #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > [data-workspace-command="panel-export"], #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > [data-mode-playback], #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > [data-workspace-command="command-palette"] { display: flex !important; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-creator-mode-bar { top: 12px !important; left: 232px !important; width: 228px !important; height: 40px !important; min-height: 40px !important; padding: 3px !important; gap: 3px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"]:not( :has(#draw2WorkspacePanelAssets:not([hidden])) ) { grid-template-rows: 64px minmax(0, 1fr) max(140px, var(--draw2-timeline-height)) var(--draw2-statusbar-height) !important; } } #draw2WorkspaceFrame[data-creator-mode="DRAW"], #draw2WorkspaceFrame[data-creator-mode="ANIMATE"], #draw2WorkspaceFrame[data-creator-mode="EXPORT"] { --draw2-accent: #47e6c0; --draw2-accent-strong: #47e6c0; --draw2-mode-accent: #47e6c0; --draw2-mode-accent-soft: rgba(71, 230, 192, 0.18); } #draw2WorkspaceFrame[data-creator-mode="AUDIO"] { --draw2-accent: #ad73ff; --draw2-accent-strong: #ad73ff; --draw2-mode-accent: #ad73ff; --draw2-mode-accent-soft: rgba(173, 115, 255, 0.18); } #draw2WorkspaceFrame[data-creator-mode="GAME"] { --draw2-accent: #fabb47; --draw2-accent-strong: #fabb47; --draw2-mode-accent: #fabb47; --draw2-mode-accent-soft: rgba(250, 188, 71, 0.18); } #draw2WorkspaceFrame { --studio-space-1: 4px; --studio-space-2: 8px; --studio-space-3: 12px; --studio-space-4: 16px; --studio-space-5: 20px; --studio-space-6: 24px; --studio-control-height: 36px; --studio-touch-target: 44px; --studio-bg: var(--draw2-bg); --studio-surface: var(--draw2-surface); --studio-surface-raised: var(--draw2-surface-raised); --studio-canvas: var(--draw2-surface-canvas, var(--draw2-bg)); --studio-text: var(--draw2-text-strong, var(--draw2-text)); --studio-text-muted: var(--draw2-text-muted, var(--draw2-muted)); --studio-border: var(--draw2-border-subtle, var(--draw2-border)); --studio-focus: var(--draw2-focus-ring, var(--draw2-focus)); --studio-selection: var( --draw2-mode-accent-soft, var(--draw2-surface-input) ); --studio-mode-accent: var(--draw2-mode-accent, var(--draw2-accent)); --studio-mode-accent-soft: var( --draw2-mode-accent-soft, var(--draw2-surface-input) ); } #draw2WorkspaceFrame .draw2-creator-mode, #draw2WorkspaceFrame .draw2-button, #draw2WorkspaceFrame .draw2-workspace-tab, #draw2WorkspaceFrame .draw2-mode-timeline-deck-tab, #draw2WorkspaceFrame .draw2-audio-editor-tab, #draw2WorkspaceFrame .draw2-audio-right-tab { box-sizing: border-box; min-width: 0; text-align: center; line-height: 1.15; } #draw2WorkspaceFrame .draw2-button:not(.draw2-button-icon), #draw2WorkspaceFrame .draw2-creator-mode, #draw2WorkspaceFrame .draw2-workspace-tab, #draw2WorkspaceFrame .draw2-mode-timeline-deck-tab, #draw2WorkspaceFrame .draw2-audio-editor-tab, #draw2WorkspaceFrame .draw2-audio-right-tab { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #draw2WorkspaceFrame .draw2-audio-inline-mixer-control.draw2-audio-mixer-control { box-sizing: border-box; width: 32px; min-width: 32px; overflow: hidden; text-align: center; } #draw2WorkspaceFrame .draw2-audio-inline-mixer-heading, #draw2WorkspaceFrame .draw2-audio-inline-mixer-control > output { min-width: 0; width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 1120px) { #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-right-custom-dock > .draw2-workspace-tabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 32px; height: auto !important; min-height: 64px; overflow: visible !important; padding-inline: 4px; } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-right-custom-dock > .draw2-workspace-tabs > .draw2-workspace-tab { width: 100%; min-width: 0 !important; padding-inline: 4px; font-size: 0.58rem; } } @media (min-width: 1120px) { #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-creator-mode-bar { top: 12px !important; left: 150px !important; width: 228px !important; height: 40px !important; min-height: 40px !important; padding: 3px !important; gap: 3px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-menu-bar { top: 12px !important; right: 120px !important; left: auto !important; width: 76px !important; min-width: 76px !important; height: 40px !important; padding: 3px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-context-row { top: 12px !important; right: 208px !important; left: 390px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar { top: 12px !important; right: 8px !important; width: 112px !important; height: 40px !important; min-height: 40px !important; padding: 3px !important; gap: 3px !important; display: flex !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > * { display: none !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > [data-workspace-command="undo"], #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > [data-workspace-command="redo"], #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > [data-workspace-command="command-palette"] { display: flex !important; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > .draw2-icon-button span { display: none !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioGlobalControls { top: 12px !important; right: 208px !important; left: 390px !important; width: auto !important; height: 40px !important; min-height: 40px !important; display: flex !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioGlobalSaveState { display: inline !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-creator-mode-bar { left: 150px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-menu-bar { right: 120px !important; left: auto !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar { right: 8px !important; width: 112px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > * { display: none !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > [data-workspace-command="undo"], #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > [data-workspace-command="redo"], #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > [data-workspace-command="command-palette"] { display: flex !important; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; } } .draw2-details-popover.is-menu-positioned { max-height: calc(100dvh - 72px) !important; overflow-y: auto !important; } @media (min-width: 1120px) { #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-brand strong { display: inline !important; overflow: hidden; color: var(--draw2-text-strong); text-overflow: ellipsis; white-space: nowrap; } } @media (min-width: 1120px) { #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar { display: flex !important; right: 8px !important; left: auto !important; width: 112px !important; height: 40px !important; min-height: 40px !important; padding: 3px !important; gap: 3px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > * { display: none !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > [data-workspace-command="undo"], #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > [data-workspace-command="redo"], #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > [data-shared-control="playback"] { display: flex !important; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > [data-workspace-command="command-palette"] { display: none !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > [data-workspace-command="panel-export"], #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > [data-workspace-command="command-palette"] { display: none !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > .draw2-icon-button span { display: none !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-creator-mode-bar > .draw2-creator-mode { display: flex !important; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; padding: 0 5px !important; gap: 4px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-creator-mode-bar > .draw2-creator-mode[hidden] { display: none !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-creator-mode-bar > .draw2-creator-mode:not([hidden]) { display: flex !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-creator-mode-bar > .draw2-creator-mode .draw2-ui-icon { display: block !important; flex: 0 0 16px !important; width: 16px !important; height: 16px !important; } } @media (min-width: 701px) { .draw2-workspace-frame:not(.is-focus-mode) { --draw2-rail-min-width: 176px; --draw2-rail-max-width: 760px; --draw2-left-rail-min-width: 40px; --draw2-timeline-min-height: 96px; --draw2-timeline-max-height: 640px; --draw2-left-rail-width: var(--draw2-tool-dock-width, 52px); --draw2-right-dock-width: var(--draw2-color-dock-width, 320px); } .draw2-workspace-frame:not(.is-focus-mode)[data-creator-mode="DRAW"] { grid-template-columns: minmax( var(--draw2-left-rail-min-width), max(var(--draw2-left-rail-min-width), var(--draw2-left-rail-width)) ) minmax(0, 1fr) minmax( var(--draw2-rail-min-width), max(var(--draw2-rail-min-width), var(--draw2-right-dock-width)) ) !important; } .draw2-workspace-frame:not(.is-focus-mode)[data-creator-mode="GAME"], .draw2-workspace-frame:not(.is-focus-mode)[data-creator-mode="AUDIO"] { grid-template-columns: 0 minmax(0, 1fr) minmax( var(--draw2-rail-min-width), max(var(--draw2-rail-min-width), var(--draw2-right-dock-width)) ) !important; } .draw2-workspace-frame:not(.is-focus-mode)[data-creator-mode="DRAW"]:has( #draw2WorkspacePanelAssets:not([hidden]) ) { grid-template-columns: minmax( var(--draw2-left-rail-min-width), max(var(--draw2-left-rail-min-width), var(--draw2-left-rail-width)) ) minmax(0, 1fr) minmax( 680px, max(680px, var(--draw2-right-dock-width)) ) !important; } .draw2-workspace-frame:not(.is-focus-mode) { grid-template-rows: auto minmax(0, 1fr) max( var(--draw2-timeline-min-height), min(var(--draw2-timeline-max-height), var(--draw2-timeline-height)) ) var(--draw2-statusbar-height) !important; } .draw2-workspace-frame:not(.is-focus-mode) .draw2-workspace-right-dock { min-width: var(--draw2-rail-min-width) !important; } .draw2-workspace-frame:not(.is-focus-mode) #draw2WorkspaceLeftDock { width: var(--draw2-left-rail-width) !important; min-width: var(--draw2-left-rail-width) !important; } .draw2-workspace-frame:not(.is-focus-mode) #draw2WorkspaceRightResize, .draw2-workspace-frame:not(.is-focus-mode) #draw2WorkspaceTimelineResize { display: block !important; } .draw2-workspace-frame:not(.is-focus-mode) #draw2WorkspaceRightResize { left: -6px !important; width: 12px !important; } .draw2-workspace-frame:not(.is-focus-mode) #draw2WorkspaceTimelineRegion { min-height: var(--draw2-timeline-min-height) !important; } } .draw2-details-popover { grid-template-columns: repeat(2, minmax(164px, 1fr)); min-width: min(432px, calc(100vw - 16px)) !important; max-width: min(520px, calc(100vw - 16px)); max-height: min(560px, calc(100dvh - 72px)); overflow-y: auto; } .draw2-details-popover > .draw2-menu-section-label { grid-column: 1 / -1; display: block; padding: 6px 8px 2px; border-top: 1px solid var(--draw2-border-subtle); color: var(--draw2-text-muted); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; } .draw2-details-popover > .draw2-menu-section-label:first-child { padding-top: 2px; border-top: 0; } .draw2-details-popover > [hidden] { display: none !important; } .draw2-workspace-context-row { position: relative; overflow: visible !important; } .draw2-workspace-quick-controls { overflow-x: auto; overflow-y: visible; } .draw2-quick-control-size { grid-template-columns: auto auto; gap: 4px; } .draw2-quick-size-field { display: inline-flex; align-items: center; gap: 2px; min-height: 30px; padding: 0 4px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); } .draw2-quick-control-size > .draw2-quick-size-field { display: inline-flex !important; } .draw2-quick-control-size input[type="number"] { width: 36px; min-width: 36px; min-height: 26px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--draw2-text-strong); font: 700 0.76rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; touch-action: none; } .draw2-quick-control-size input[type="number"]::-webkit-inner-spin-button, .draw2-quick-control-size input[type="number"]::-webkit-outer-spin-button { margin: 0; opacity: 0; } .draw2-quick-unit { color: var(--draw2-text-muted); font: 700 0.58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em; } .draw2-brush-options-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 86px; min-height: 30px; padding: 0 6px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-strong); cursor: pointer; touch-action: manipulation; } .draw2-brush-options-trigger:hover, .draw2-brush-options-trigger:focus-visible, .draw2-brush-options-trigger.is-active { border-color: var(--draw2-accent-strong); color: var(--draw2-text-strong); } .draw2-brush-options-trigger > .draw2-ui-icon:first-child { flex: 0 0 16px; width: 16px; height: 16px; color: var(--draw2-accent-strong); } .draw2-brush-options-trigger > span { display: inline-block !important; max-width: 66px; overflow: hidden; color: var(--draw2-text-strong); font-size: 0.66rem; text-overflow: ellipsis; } .draw2-brush-options-trigger .draw2-brush-options-chevron { flex: 0 0 12px; width: 12px; height: 12px; color: var(--draw2-text-muted); } .draw2-brush-options-flyout { position: fixed; z-index: 120; display: grid; gap: var(--draw2-space-2); width: min(276px, calc(100vw - 16px)); padding: var(--draw2-space-2); border: 1px solid var(--draw2-border-strong); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface); box-shadow: var(--draw2-shadow-panel); } .draw2-brush-options-flyout[hidden] { display: none !important; } .draw2-brush-options-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--draw2-space-2); padding-bottom: 2px; border-bottom: 1px solid var(--draw2-border-subtle); color: var(--draw2-text-strong); font-size: 0.7rem; } .draw2-brush-options-heading .draw2-button { width: 26px; min-width: 26px; height: 26px; min-height: 26px; padding: 0; } .draw2-brush-options-flyout > label { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: var(--draw2-space-2); color: var(--draw2-text-muted); font-size: 0.66rem; } .draw2-brush-options-flyout select { width: 100%; min-height: 30px; } .draw2-brush-options-help { margin: 0; color: var(--draw2-text-muted); font-size: 0.6rem; line-height: 1.35; } #draw2WorkspacePanelExport { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } .draw2-export-panel { display: grid; gap: 10px; min-width: 0; padding: 2px; } .draw2-export-heading, .draw2-export-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .draw2-export-heading h3, .draw2-export-section-heading h4, .draw2-export-format-category h5 { margin: 0; color: var(--draw2-text-strong, var(--draw2-text)); } .draw2-export-heading h3 { font-size: 0.9rem; } .draw2-export-section-heading h4, .draw2-export-format-category h5 { font-size: 0.68rem; letter-spacing: 0.02em; text-transform: uppercase; } .draw2-export-scope, .draw2-export-section-heading > span { color: var(--draw2-text-muted, var(--draw2-muted)); font-size: 0.6rem; white-space: nowrap; } .draw2-export-field { display: grid; gap: 4px; min-width: 0; color: var(--draw2-text-muted, var(--draw2-muted)); font-size: 0.64rem; } .draw2-export-field input, .draw2-export-field select { width: 100%; min-width: 0; min-height: 30px; box-sizing: border-box; } .draw2-export-section { display: grid; gap: 7px; min-width: 0; padding-top: 2px; } .draw2-export-format-categories { display: grid; gap: 8px; min-width: 0; } .draw2-export-format-category { display: grid; gap: 5px; min-width: 0; } .draw2-export-format-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; min-width: 0; } .draw2-export-format-card { display: flex; align-items: flex-start; gap: 6px; min-width: 0; min-height: 42px; box-sizing: border-box; padding: 7px; border: 1px solid var(--draw2-border-subtle, var(--draw2-border)); border-radius: var(--draw2-radius-sm, 4px); background: var(--draw2-surface-input, var(--draw2-surface-raised)); cursor: pointer; } .draw2-export-format-card:has(input:checked) { border-color: var(--draw2-accent-strong, var(--draw2-accent)); background: color-mix(in srgb, var(--draw2-accent) 10%, var(--draw2-surface-raised)); } .draw2-export-format-card:has(input:disabled) { cursor: default; opacity: 0.48; } .draw2-export-format-card input { flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--draw2-accent); } .draw2-export-format-copy { display: grid; gap: 2px; min-width: 0; } .draw2-export-format-copy strong { overflow: hidden; color: var(--draw2-text-strong, var(--draw2-text)); font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-export-format-copy small, .draw2-export-format-option span, .draw2-export-output-list small { color: var(--draw2-text-muted, var(--draw2-muted)); font-size: 0.58rem; line-height: 1.35; } .draw2-export-format-options { display: grid; gap: 5px; } .draw2-export-format-option { display: grid; gap: 2px; padding: 6px 7px; border-left: 2px solid var(--draw2-accent); background: color-mix(in srgb, var(--draw2-surface-raised) 82%, transparent); } .draw2-export-format-option strong { color: var(--draw2-text-strong, var(--draw2-text)); font-size: 0.64rem; } .draw2-export-common-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: end; gap: 8px; min-width: 0; } .draw2-export-package { display: grid; gap: 4px; min-width: 0; margin: 0; padding: 5px 7px 7px; border: 1px solid var(--draw2-border-subtle, var(--draw2-border)); border-radius: var(--draw2-radius-sm, 4px); color: var(--draw2-text-muted, var(--draw2-muted)); font-size: 0.58rem; } .draw2-export-package legend { padding: 0 3px; color: var(--draw2-text-strong, var(--draw2-text)); font-size: 0.62rem; } .draw2-export-package label { display: flex; align-items: center; gap: 4px; min-width: 0; } .draw2-export-package input { margin: 0; accent-color: var(--draw2-accent); } .draw2-export-preview { display: grid; place-items: center; min-height: 164px; padding: 2px; border: 1px solid var(--draw2-border-subtle, var(--draw2-border)); border-radius: var(--draw2-radius-sm, 4px); background: var(--draw2-surface); } .draw2-export-preview canvas { display: block; width: min(160px, 100%); height: auto; image-rendering: pixelated; } .draw2-export-output-list { display: grid; gap: 4px; min-width: 0; margin: 0; padding: 0; list-style: none; } .draw2-export-output-list li { display: grid; gap: 2px; min-width: 0; padding: 5px 7px; overflow-wrap: anywhere; border: 1px solid var(--draw2-border-subtle, var(--draw2-border)); border-radius: var(--draw2-radius-sm, 4px); color: var(--draw2-text-strong, var(--draw2-text)); font-size: 0.62rem; } .draw2-export-empty { margin: 0; color: var(--draw2-text-muted, var(--draw2-muted)); font-size: 0.62rem; } .draw2-export-execute { width: 100%; min-height: 34px; border-color: var(--draw2-accent-strong, var(--draw2-accent)); background: color-mix(in srgb, var(--draw2-accent) 18%, var(--draw2-surface-raised)); color: var(--draw2-text-strong, var(--draw2-text)); } .draw2-export-execute:hover, .draw2-export-execute:focus-visible { background: color-mix(in srgb, var(--draw2-accent) 28%, var(--draw2-surface-raised)); } @media (min-width: 701px) { #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > [data-workspace-command="panel-export"] { display: flex !important; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; } } @media (min-width: 1120px) { #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar { width: 140px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar { width: 140px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > [data-workspace-command="panel-export"] { display: flex !important; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; } } .draw2-workspace-left-dock { min-height: 0; overflow: hidden; overscroll-behavior: contain; } .draw2-workspace-toolbar { min-height: 0; align-items: center; scrollbar-width: thin; } .draw2-workspace-toolbar > .draw2-viewport-tool { box-sizing: border-box; position: relative; inset: auto; flex: 0 0 var(--draw2-control-size, 44px); width: var(--draw2-control-size, 44px) !important; min-width: var(--draw2-control-size, 44px) !important; max-width: var(--draw2-control-size, 44px) !important; height: var(--draw2-control-size, 44px) !important; min-height: var(--draw2-control-size, 44px) !important; max-height: var(--draw2-control-size, 44px) !important; padding: 0 !important; place-items: center; } .draw2-workspace-toolbar > #draw2ViewportCenter { margin-top: 6px; } .draw2-workspace-toolbar > .draw2-viewport-tool .draw2-tool-icon { width: var(--draw2-icon-size, 20px); height: var(--draw2-icon-size, 20px); } .draw2-mirror-guide-line { stroke-width: 2px; stroke-dasharray: 8 5; filter: drop-shadow(0 0 2px rgb(0 0 0 / 55%)); } .draw2-mirror-guide-line.is-disabled { opacity: 0.28; } .draw2-mirror-line-toggle { box-sizing: border-box; width: 32px; min-width: 32px; height: 32px; min-height: 32px; border-radius: 9px; background: color-mix( in srgb, var(--draw2-surface-raised) 86%, var(--draw2-accent-strong) ); color: var(--draw2-text-muted); cursor: pointer; touch-action: none; transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, transform 120ms ease; } .draw2-mirror-line-toggle::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: currentcolor; opacity: 0.72; } .draw2-mirror-line-toggle .draw2-ui-icon { width: 18px; height: 18px; } .draw2-mirror-line-toggle[data-enabled="true"] { color: var(--draw2-accent-strong); box-shadow: 0 3px 10px rgb(0 0 0 / 35%), 0 0 0 1px color-mix(in srgb, var(--draw2-accent-strong) 24%, transparent); } .draw2-mirror-line-toggle--y[data-enabled="true"] { color: var(--draw2-warning, #f5b14c); } .draw2-mirror-line-toggle:active { transform: scale(0.96); } .draw2-mirror-line-toggle.is-dragging, .draw2-viewport-wrap.is-mirror-guide-dragging { cursor: grabbing; } .draw2-workspace-command-bar > .draw2-global-mini-preview-toggle { box-sizing: border-box !important; position: relative !important; inset: auto !important; display: grid !important; flex: 0 0 var(--draw2-control-size, 32px) !important; width: var(--draw2-control-size, 32px) !important; min-width: var(--draw2-control-size, 32px) !important; max-width: var(--draw2-control-size, 32px) !important; height: var(--draw2-control-size, 32px) !important; min-height: var(--draw2-control-size, 32px) !important; max-height: var(--draw2-control-size, 32px) !important; padding: 0 !important; place-items: center; opacity: 0.82; } .draw2-workspace-command-bar > .draw2-global-mini-preview-toggle > span { display: none; } .draw2-workspace-command-bar > .draw2-global-mini-preview-toggle[aria-pressed="true"], .draw2-workspace-command-bar > .draw2-global-mini-preview-toggle:hover, .draw2-workspace-command-bar > .draw2-global-mini-preview-toggle:focus-visible { opacity: 1; color: var(--draw2-text-strong); } #draw2WorkspaceFrame .draw2-workspace-command-bar > .draw2-global-mini-preview-toggle:not([hidden]) { display: grid !important; } @media (min-width: 1120px) { .draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-mini-preview:not([hidden]) { display: grid !important; visibility: visible !important; } } #draw2WorkspacePanelExport .draw2-export-panel { gap: 12px; padding: 2px 2px 12px; } #draw2WorkspacePanelExport .draw2-export-hero { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; min-width: 0; padding: 10px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--draw2-accent-strong) 32%, var(--draw2-border)); border-radius: 12px; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--draw2-accent) 20%, transparent), transparent 48%), linear-gradient(135deg, color-mix(in srgb, var(--draw2-accent) 10%, var(--draw2-surface-raised)), var(--draw2-surface-raised)); box-shadow: 0 10px 24px rgb(0 0 0 / 16%); } #draw2WorkspacePanelExport .draw2-export-hero::after { position: absolute; right: -18px; bottom: -30px; width: 86px; height: 86px; border: 1px solid color-mix(in srgb, var(--draw2-accent) 20%, transparent); border-radius: 50%; content: ""; opacity: 0.7; } #draw2WorkspacePanelExport .draw2-export-hero-mark { z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid color-mix(in srgb, var(--draw2-accent-strong) 48%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--draw2-accent) 18%, var(--draw2-surface)); color: var(--draw2-accent-strong); box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%); } #draw2WorkspacePanelExport .draw2-export-hero-mark .draw2-ui-icon { width: 20px; height: 20px; } #draw2WorkspacePanelExport .draw2-export-hero-copy { z-index: 1; min-width: 0; } #draw2WorkspacePanelExport .draw2-export-heading h3 { font-size: 1rem; letter-spacing: -0.02em; } #draw2WorkspacePanelExport .draw2-export-scope { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--draw2-accent-strong) 25%, var(--draw2-border)); border-radius: 999px; background: color-mix(in srgb, var(--draw2-surface) 74%, transparent); color: var(--draw2-text-muted); font-size: 0.54rem; letter-spacing: 0.08em; text-transform: uppercase; } #draw2WorkspacePanelExport .draw2-export-scope i { width: 5px; height: 5px; border-radius: 50%; background: var(--draw2-accent-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--draw2-accent) 14%, transparent); } #draw2WorkspacePanelExport .draw2-export-subtitle { max-width: 28em; margin: 5px 0 0; color: var(--draw2-text-muted); font-size: 0.61rem; line-height: 1.45; } #draw2WorkspacePanelExport .draw2-export-field-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; } #draw2WorkspacePanelExport .draw2-export-field-label > span { display: inline-flex; align-items: center; gap: 5px; color: var(--draw2-text-strong, var(--draw2-text)); font-weight: 650; } #draw2WorkspacePanelExport .draw2-export-field-label small { overflow: hidden; color: var(--draw2-text-muted); font-size: 0.52rem; text-overflow: ellipsis; white-space: nowrap; } #draw2WorkspacePanelExport .draw2-export-input-wrap { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; min-height: 36px; padding: 0 9px; border: 1px solid var(--draw2-border-subtle, var(--draw2-border)); border-radius: 9px; background: color-mix(in srgb, var(--draw2-surface-raised) 86%, #000); transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease; } #draw2WorkspacePanelExport .draw2-export-input-wrap:focus-within { border-color: var(--draw2-accent-strong); background: color-mix(in srgb, var(--draw2-accent) 6%, var(--draw2-surface-raised)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--draw2-accent) 12%, transparent); } #draw2WorkspacePanelExport .draw2-export-input-wrap > .draw2-ui-icon { width: 17px; height: 17px; color: var(--draw2-text-muted); } #draw2WorkspacePanelExport .draw2-export-input-wrap input { min-height: 34px; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 0.72rem; } #draw2WorkspacePanelExport .draw2-export-input-wrap input:focus { outline: 0; } #draw2WorkspacePanelExport .draw2-export-section { gap: 9px; padding: 10px; border: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 82%, transparent); border-radius: 12px; background: linear-gradient(145deg, color-mix(in srgb, var(--draw2-surface-raised) 72%, transparent), color-mix(in srgb, var(--draw2-surface) 78%, transparent)); } #draw2WorkspacePanelExport .draw2-export-section-title { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } #draw2WorkspacePanelExport .draw2-export-section-title > .draw2-ui-icon { width: 14px; height: 14px; color: var(--draw2-accent-strong); } #draw2WorkspacePanelExport .draw2-export-section-heading h4 { color: var(--draw2-text-strong, var(--draw2-text)); font-size: 0.64rem; letter-spacing: 0.08em; } #draw2WorkspacePanelExport .draw2-export-count, #draw2WorkspacePanelExport .draw2-export-live-tag { display: inline-flex; align-items: center; min-height: 18px; padding: 2px 6px; border: 1px solid color-mix(in srgb, var(--draw2-accent-strong) 22%, var(--draw2-border)); border-radius: 999px; background: color-mix(in srgb, var(--draw2-accent) 8%, transparent); color: var(--draw2-accent-strong); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; text-transform: uppercase; } #draw2WorkspacePanelExport .draw2-export-category-heading { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0; cursor: pointer; list-style: none; } #draw2WorkspacePanelExport .draw2-export-category-heading::-webkit-details-marker, #draw2WorkspacePanelExport .draw2-export-compact-details > summary::-webkit-details-marker { display: none; } #draw2WorkspacePanelExport .draw2-export-format-category > summary::after { color: var(--draw2-text-muted); content: "+"; font-size: 0.85rem; } #draw2WorkspacePanelExport .draw2-export-format-category[open] > summary::after { content: "−"; } #draw2WorkspacePanelExport .draw2-export-compact-details > summary { cursor: pointer; list-style: none; } #draw2WorkspacePanelExport .draw2-export-hero { grid-template-columns: 30px minmax(0, 1fr); padding: 7px 9px; } #draw2WorkspacePanelExport .draw2-export-hero-mark { width: 30px; height: 30px; } #draw2WorkspacePanelExport .draw2-export-category-icon { width: 16px; height: 16px; color: var(--draw2-text-muted); } #draw2WorkspacePanelExport .draw2-export-category-copy { display: grid; gap: 1px; min-width: 0; } #draw2WorkspacePanelExport .draw2-export-format-category h5 { font-size: 0.62rem; letter-spacing: 0.06em; } #draw2WorkspacePanelExport .draw2-export-category-copy small, #draw2WorkspacePanelExport .draw2-export-category-count { color: var(--draw2-text-muted); font-size: 0.52rem; } #draw2WorkspacePanelExport .draw2-export-category-count { padding: 3px 5px; border-radius: 5px; background: color-mix(in srgb, var(--draw2-surface) 68%, transparent); font-variant-numeric: tabular-nums; } #draw2WorkspacePanelExport .draw2-export-format-grid { gap: 7px; } #draw2WorkspacePanelExport .draw2-export-format-card { position: relative; display: grid; grid-template-columns: 27px minmax(0, 1fr) 16px; align-items: center; gap: 7px; min-height: 64px; padding: 8px; border: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 90%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--draw2-surface-input, var(--draw2-surface-raised)) 82%, transparent); transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease, box-shadow 140ms ease; } #draw2WorkspacePanelExport .draw2-export-format-card:hover { border-color: color-mix(in srgb, var(--draw2-accent-strong) 42%, var(--draw2-border)); transform: translateY(-1px); } #draw2WorkspacePanelExport .draw2-export-format-card:has(input:focus-visible) { outline: 2px solid color-mix(in srgb, var(--draw2-accent) 58%, transparent); outline-offset: 2px; } #draw2WorkspacePanelExport .draw2-export-format-card:has(input:checked) { border-color: color-mix(in srgb, var(--draw2-accent-strong) 74%, var(--draw2-border)); background: linear-gradient(135deg, color-mix(in srgb, var(--draw2-accent) 14%, var(--draw2-surface-raised)), color-mix(in srgb, var(--draw2-surface-raised) 88%, transparent)); box-shadow: 0 5px 14px rgb(0 0 0 / 18%), inset 0 1px 0 rgb(255 255 255 / 7%); } #draw2WorkspacePanelExport .draw2-export-format-card input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } #draw2WorkspacePanelExport .draw2-export-format-icon { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid color-mix(in srgb, var(--draw2-text-muted) 18%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--draw2-surface) 72%, transparent); color: var(--draw2-text-muted); } #draw2WorkspacePanelExport .draw2-export-format-icon__svg { width: 16px; height: 16px; } #draw2WorkspacePanelExport .draw2-export-format-icon[data-format="png"] { color: #8ae3d2; } #draw2WorkspacePanelExport .draw2-export-format-icon[data-format="pxd"] { color: #c88bff; } #draw2WorkspacePanelExport .draw2-export-format-copy { gap: 3px; } #draw2WorkspacePanelExport .draw2-export-format-copy strong { font-size: 0.7rem; } #draw2WorkspacePanelExport .draw2-export-format-copy small { display: -webkit-box; overflow: hidden; font-size: 0.56rem; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } #draw2WorkspacePanelExport .draw2-export-format-check { display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--draw2-border-subtle, var(--draw2-border)); border-radius: 50%; color: transparent; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease; } #draw2WorkspacePanelExport .draw2-export-format-check .draw2-ui-icon { width: 10px; height: 10px; } #draw2WorkspacePanelExport .draw2-export-format-card:has(input:checked) .draw2-export-format-check { border-color: var(--draw2-accent-strong); background: var(--draw2-accent-strong); color: #10201f; transform: scale(1.05); } #draw2WorkspacePanelExport .draw2-export-format-options { gap: 6px; } #draw2WorkspacePanelExport .draw2-export-format-option { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 40px; padding: 7px 8px; border: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 80%, transparent); border-left: 0; border-radius: 8px; background: color-mix(in srgb, var(--draw2-surface-raised) 76%, transparent); } #draw2WorkspacePanelExport .draw2-export-option-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: color-mix(in srgb, var(--draw2-accent) 12%, var(--draw2-surface)); color: var(--draw2-accent-strong); } #draw2WorkspacePanelExport .draw2-export-option-icon .draw2-ui-icon { width: 14px; height: 14px; } #draw2WorkspacePanelExport .draw2-export-option-copy { display: grid; gap: 2px; min-width: 0; } #draw2WorkspacePanelExport .draw2-export-option-copy strong { font-size: 0.62rem; } #draw2WorkspacePanelExport .draw2-export-option-copy span { overflow: hidden; font-size: 0.54rem; text-overflow: ellipsis; white-space: nowrap; } #draw2WorkspacePanelExport .draw2-export-option-badge, #draw2WorkspacePanelExport .draw2-export-output-badge { padding: 3px 5px; border: 1px solid color-mix(in srgb, var(--draw2-accent-strong) 24%, var(--draw2-border)); border-radius: 5px; background: color-mix(in srgb, var(--draw2-accent) 8%, transparent); color: var(--draw2-accent-strong); font-size: 0.49rem; font-weight: 750; letter-spacing: 0.06em; } #draw2WorkspacePanelExport .draw2-export-common-grid { gap: 8px; } #draw2WorkspacePanelExport .draw2-export-control-card, #draw2WorkspacePanelExport .draw2-export-package { min-height: 70px; box-sizing: border-box; padding: 8px; border: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 85%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--draw2-surface-raised) 75%, transparent); } #draw2WorkspacePanelExport .draw2-export-control-card select { min-height: 34px; border-radius: 7px; } #draw2WorkspacePanelExport .draw2-export-package legend { display: inline-flex; align-items: center; gap: 5px; padding: 0 2px; font-weight: 650; } #draw2WorkspacePanelExport .draw2-export-package legend .draw2-ui-icon { width: 13px; height: 13px; color: var(--draw2-accent-strong); } #draw2WorkspacePanelExport .draw2-export-package label { padding: 2px 0; } #draw2WorkspacePanelExport .draw2-export-package label:has(input:checked) { color: var(--draw2-text-strong, var(--draw2-text)); } #draw2WorkspacePanelExport .draw2-export-preview { gap: 8px; min-height: 0; padding: 8px; border: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 90%, transparent); border-radius: 10px; background: linear-gradient(145deg, color-mix(in srgb, var(--draw2-surface) 92%, #000), var(--draw2-surface-raised)); } #draw2WorkspacePanelExport .draw2-export-preview-stage { position: relative; display: grid; place-items: center; width: 100%; min-height: 170px; border: 1px solid color-mix(in srgb, var(--draw2-border) 75%, transparent); border-radius: 8px; background: radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--draw2-accent) 7%, transparent), transparent 58%), #141923; } #draw2WorkspacePanelExport .draw2-export-preview-stage::after { position: absolute; inset: 10px; border: 1px dashed color-mix(in srgb, var(--draw2-text-muted) 18%, transparent); border-radius: 5px; content: ""; pointer-events: none; } #draw2WorkspacePanelExport .draw2-export-preview-badge { position: absolute; z-index: 1; top: 8px; left: 8px; padding: 3px 5px; border: 1px solid color-mix(in srgb, var(--draw2-accent) 24%, var(--draw2-border)); border-radius: 5px; background: rgb(15 19 27 / 72%); color: var(--draw2-text-muted); font-size: 0.48rem; font-weight: 750; letter-spacing: 0.08em; } #draw2WorkspacePanelExport .draw2-export-preview-stage canvas { z-index: 1; width: min(160px, calc(100% - 30px)); height: auto; border-radius: 2px; box-shadow: 0 8px 22px rgb(0 0 0 / 34%); } #draw2WorkspacePanelExport .draw2-export-preview-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 0 2px; } #draw2WorkspacePanelExport .draw2-export-preview-meta span { display: inline-flex; align-items: center; gap: 5px; color: var(--draw2-text-muted); font-size: 0.54rem; } #draw2WorkspacePanelExport .draw2-export-preview-meta span .draw2-ui-icon { width: 13px; height: 13px; color: var(--draw2-accent-strong); } #draw2WorkspacePanelExport .draw2-export-preview-meta strong { color: var(--draw2-text-strong, var(--draw2-text)); font-size: 0.62rem; font-variant-numeric: tabular-nums; } #draw2WorkspacePanelExport .draw2-export-output-list { gap: 6px; } #draw2WorkspacePanelExport .draw2-export-output-list li { display: grid; gap: 4px; padding: 8px; border: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 88%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--draw2-surface-raised) 78%, transparent); } #draw2WorkspacePanelExport .draw2-export-output-primary { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0; } #draw2WorkspacePanelExport .draw2-export-output-primary > .draw2-ui-icon { width: 16px; height: 16px; color: var(--draw2-accent-strong); } #draw2WorkspacePanelExport .draw2-export-output-primary strong { overflow: hidden; font-size: 0.62rem; text-overflow: ellipsis; white-space: nowrap; } #draw2WorkspacePanelExport .draw2-export-output-list li small { display: block; overflow: hidden; padding-left: 24px; text-overflow: ellipsis; white-space: nowrap; } #draw2WorkspacePanelExport .draw2-export-footer { position: sticky; z-index: 3; bottom: -1px; display: grid; gap: 5px; margin: 0 -2px -12px; padding: 9px 2px 3px; border-top: 1px solid color-mix(in srgb, var(--draw2-border-subtle) 78%, transparent); background: color-mix(in srgb, var(--draw2-surface) 98%, transparent); backdrop-filter: blur(8px); } #draw2WorkspacePanelExport .draw2-export-execute { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 40px; padding-inline: 10px; border: 1px solid color-mix(in srgb, var(--draw2-accent-strong) 70%, var(--draw2-border)); border-radius: 9px; background: linear-gradient(135deg, color-mix(in srgb, var(--draw2-accent) 26%, var(--draw2-surface-raised)), color-mix(in srgb, var(--draw2-accent) 10%, var(--draw2-surface-raised))); box-shadow: 0 7px 16px rgb(0 0 0 / 22%), inset 0 1px 0 rgb(255 255 255 / 10%); text-align: left; } #draw2WorkspacePanelExport .draw2-export-actions { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 6px; } #draw2WorkspacePanelExport .draw2-export-market { display: grid; grid-template-columns: 17px minmax(0, 1fr); align-items: center; gap: 7px; min-height: 40px; padding-inline: 10px; border-color: color-mix(in srgb, var(--draw2-border) 86%, var(--draw2-accent)); text-align: left; } #draw2WorkspacePanelExport .draw2-export-market > .draw2-ui-icon { width: 17px; height: 17px; color: var(--draw2-accent-strong); } #draw2WorkspacePanelExport .draw2-export-market > span { overflow: hidden; font-size: 0.63rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } #draw2WorkspacePanelExport .draw2-export-execute > .draw2-ui-icon { width: 17px; height: 17px; color: var(--draw2-accent-strong); } #draw2WorkspacePanelExport .draw2-export-execute > span { font-weight: 700; } #draw2WorkspacePanelExport .draw2-export-execute kbd { min-width: 18px; padding: 2px 4px; border: 1px solid color-mix(in srgb, var(--draw2-text-muted) 26%, transparent); border-radius: 4px; background: rgb(0 0 0 / 14%); color: var(--draw2-text-muted); font-family: inherit; font-size: 0.54rem; text-align: center; } #draw2WorkspacePanelExport .draw2-export-status { display: flex; align-items: center; gap: 6px; padding: 0 2px; color: var(--draw2-text-muted); font-size: 0.57rem; } #draw2WorkspacePanelExport .draw2-export-status::before { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--draw2-accent-strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--draw2-accent) 10%, transparent); content: ""; } #draw2WorkspacePanelExport .draw2-export-status[data-state="error"]::before { background: var(--draw2-danger-strong, var(--draw2-danger)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--draw2-danger) 12%, transparent); } #draw2WorkspacePanelExport .draw2-export-note { display: -webkit-box; overflow: hidden; padding: 0 2px; font-size: 0.54rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } @media (min-width: 701px) { #draw2WorkspaceRightDock:has(#draw2WorkspacePanelExport:not([hidden])) { grid-template-rows: 0 0 minmax(0, 1fr) !important; } #draw2WorkspaceRightDock:has(#draw2WorkspacePanelExport:not([hidden])) > #draw2WorkspacePaletteStrip, #draw2WorkspaceRightDock:has(#draw2WorkspacePanelExport:not([hidden])) > #draw2WorkspacePaletteResize { display: none !important; } #draw2WorkspaceRightDock:has(#draw2WorkspacePanelExport:not([hidden])) > #draw2WorkspaceModeSummary { display: none !important; } } @media (min-width: 701px) { #draw2WorkspaceFrame[data-creator-mode="AUDIO"] #draw2WorkspaceRightDock:has(#draw2WorkspacePanelExport:not([hidden])) { display: grid !important; grid-template-rows: 0 0 minmax(0, 1fr) !important; grid-area: right !important; } #draw2WorkspaceFrame[data-creator-mode="AUDIO"] #draw2WorkspaceRightDock:has(#draw2WorkspacePanelExport:not([hidden])) > #draw2AudioRightDock { display: none !important; } #draw2WorkspaceFrame[data-creator-mode="AUDIO"] #draw2WorkspaceRightDock:has(#draw2WorkspacePanelExport:not([hidden])) > #draw2WorkspaceRightCustomDock { display: flex !important; grid-column: 1 !important; grid-row: 3 !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; } } #draw2WorkspacePanelExport .draw2-export-hero, #draw2WorkspacePanelExport .draw2-export-section, #draw2WorkspacePanelExport .draw2-export-format-card, #draw2WorkspacePanelExport .draw2-export-format-option, #draw2WorkspacePanelExport .draw2-export-control-card, #draw2WorkspacePanelExport .draw2-export-package, #draw2WorkspacePanelExport .draw2-export-preview, #draw2WorkspacePanelExport .draw2-export-preview-stage, #draw2WorkspacePanelExport .draw2-export-output-list li { border: 0; } #draw2WorkspacePanelExport .draw2-export-hero { box-shadow: 0 10px 24px rgb(0 0 0 / 15%), inset 0 1px 0 rgb(255 255 255 / 4%); } #draw2WorkspacePanelExport .draw2-export-section { box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%); } #draw2WorkspacePanelExport .draw2-export-format-card { box-shadow: 0 6px 16px rgb(0 0 0 / 12%); } #draw2WorkspacePanelExport .draw2-export-format-card:hover { box-shadow: 0 9px 20px rgb(0 0 0 / 19%), inset 0 0 0 1px color-mix(in srgb, var(--draw2-accent) 34%, transparent); } #draw2WorkspacePanelExport .draw2-export-format-card:has(input:focus-visible) { box-shadow: 0 0 0 2px color-mix(in srgb, var(--draw2-accent) 68%, transparent), 0 8px 18px rgb(0 0 0 / 16%); } #draw2WorkspacePanelExport .draw2-export-format-card:has(input:checked) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--draw2-accent-strong) 72%, transparent), 0 9px 22px rgb(0 0 0 / 20%); } #draw2WorkspacePanelExport .draw2-export-format-option, #draw2WorkspacePanelExport .draw2-export-output-list li, #draw2WorkspacePanelExport .draw2-export-preview { box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%); } #draw2WorkspacePanelExport .draw2-export-preview-stage::after { display: none; } #draw2WorkspacePanelExport .draw2-export-footer { border-top: 0; box-shadow: 0 -12px 22px color-mix(in srgb, var(--draw2-surface) 76%, transparent); } #draw2WorkspacePanelExport .draw2-export-progress { display: grid; gap: 7px; padding: 9px 10px 8px; border: 0; border-radius: 11px; background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--draw2-accent) 18%, transparent), transparent 48%), linear-gradient(135deg, color-mix(in srgb, var(--draw2-surface-raised) 96%, var(--draw2-accent)), var(--draw2-surface-raised)); box-shadow: 0 9px 22px rgb(0 0 0 / 18%), inset 0 1px 0 rgb(255 255 255 / 7%); } #draw2WorkspacePanelExport .draw2-export-progress[hidden] { display: none !important; } #draw2WorkspacePanelExport .draw2-export-progress-head { display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; } #draw2WorkspacePanelExport .draw2-export-progress-mark { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: color-mix(in srgb, var(--draw2-accent) 22%, var(--draw2-surface)); color: var(--draw2-accent-strong); animation: draw2-export-pulse 1.6s ease-in-out infinite; } #draw2WorkspacePanelExport .draw2-export-progress-mark .draw2-ui-icon { width: 15px; height: 15px; } #draw2WorkspacePanelExport .draw2-export-progress-copy { display: grid; min-width: 0; gap: 2px; } #draw2WorkspacePanelExport .draw2-export-progress-copy strong, #draw2WorkspacePanelExport .draw2-export-progress-copy small, #draw2WorkspacePanelExport .draw2-export-progress-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #draw2WorkspacePanelExport .draw2-export-progress-copy strong { color: var(--draw2-text-strong, var(--draw2-text)); font-size: 0.62rem; letter-spacing: 0.02em; } #draw2WorkspacePanelExport .draw2-export-progress-copy small { color: var(--draw2-text-muted); font-size: 0.53rem; } #draw2WorkspacePanelExport .draw2-export-progress-percent { min-width: 35px; color: var(--draw2-accent-strong); font-size: 0.7rem; font-variant-numeric: tabular-nums; text-align: right; } #draw2WorkspacePanelExport .draw2-export-progress-track { position: relative; height: 6px; overflow: hidden; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--draw2-text-muted) 13%, var(--draw2-surface)); } #draw2WorkspacePanelExport .draw2-export-progress-bar { position: relative; display: block; width: 0; height: 100%; overflow: hidden; border-radius: inherit; background: linear-gradient(90deg, var(--draw2-accent), var(--draw2-accent-strong), #c78cff); box-shadow: 0 0 12px color-mix(in srgb, var(--draw2-accent) 52%, transparent); transition: width 160ms ease-out; } #draw2WorkspacePanelExport .draw2-export-progress[data-state="active"] .draw2-export-progress-bar::after { position: absolute; inset: 0; width: 42%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 34%), transparent); content: ""; transform: translateX(-120%); animation: draw2-export-sheen 1.15s ease-in-out infinite; } #draw2WorkspacePanelExport .draw2-export-progress[data-state="complete"] .draw2-export-progress-bar { background: linear-gradient(90deg, var(--draw2-accent-strong), #86e4b5); } #draw2WorkspacePanelExport .draw2-export-progress[data-state="error"] .draw2-export-progress-bar { background: var(--draw2-danger-strong, var(--draw2-danger)); } #draw2WorkspacePanelExport .draw2-export-progress-meta { display: flex; justify-content: space-between; gap: 8px; min-width: 0; color: var(--draw2-text-muted); font-size: 0.5rem; } #draw2WorkspacePanelExport .draw2-export-progress-meta strong { color: var(--draw2-text); font-variant-numeric: tabular-nums; } @keyframes draw2-export-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--draw2-accent) 0%, transparent); transform: scale(1); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--draw2-accent) 12%, transparent); transform: scale(1.035); } } @keyframes draw2-export-sheen { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(270%); } } :root { --draw2-tool-tile-size: var(--draw2-control-size); } .draw2-workspace-frame .draw2-workspace-toolbar > .draw2-tool-group, .draw2-workspace-frame .draw2-workspace-toolbar > .draw2-tool-button, .draw2-workspace-frame .draw2-tool-group > summary, .draw2-workspace-frame #draw2ViewportCenter { box-sizing: border-box !important; flex: 0 0 var(--draw2-tool-tile-size) !important; width: var(--draw2-tool-tile-size) !important; min-width: var(--draw2-tool-tile-size) !important; max-width: var(--draw2-tool-tile-size) !important; height: var(--draw2-tool-tile-size) !important; min-height: var(--draw2-tool-tile-size) !important; max-height: var(--draw2-tool-tile-size) !important; } .draw2-workspace-frame .draw2-tool-group > summary, .draw2-workspace-frame .draw2-workspace-toolbar > .draw2-tool-button, .draw2-workspace-frame #draw2ViewportCenter { display: grid !important; place-items: center !important; padding: 0 !important; } .draw2-workspace-frame .draw2-tool-group > .draw2-tool-popover { position: fixed !important; z-index: 250 !important; display: none !important; grid-template-columns: repeat(3, var(--draw2-tool-tile-size)) !important; grid-auto-rows: var(--draw2-tool-tile-size) !important; gap: 4px !important; width: max-content !important; min-width: 0 !important; max-width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px) !important; padding: 4px !important; overflow: auto !important; overscroll-behavior: contain; pointer-events: none; } .draw2-workspace-frame .draw2-tool-group[open] > .draw2-tool-popover { top: 8px; left: 8px; right: auto; display: grid !important; visibility: visible !important; pointer-events: auto !important; } .draw2-workspace-frame .draw2-tool-group:not([open]) > .draw2-tool-popover { display: none !important; visibility: hidden !important; pointer-events: none !important; } #draw2WorkspaceLeftDock .draw2-tool-popover .draw2-tool-button, .draw2-workspace-frame .draw2-tool-popover .draw2-tool-button { box-sizing: border-box !important; display: grid !important; place-items: center !important; flex: 0 0 var(--draw2-tool-tile-size) !important; width: var(--draw2-tool-tile-size) !important; min-width: var(--draw2-tool-tile-size) !important; max-width: var(--draw2-tool-tile-size) !important; height: var(--draw2-tool-tile-size) !important; min-height: var(--draw2-tool-tile-size) !important; max-height: var(--draw2-tool-tile-size) !important; padding: 0 !important; } .draw2-workspace-frame .draw2-tool-popover .draw2-tool-button span, .draw2-workspace-frame .draw2-tool-group-summary .draw2-tool-group-label { display: none !important; } .draw2-workspace-frame .draw2-tool-group-summary .draw2-tool-icon, .draw2-workspace-frame .draw2-tool-popover .draw2-tool-icon, .draw2-workspace-frame .draw2-workspace-toolbar > .draw2-tool-button .draw2-tool-icon, .draw2-workspace-frame #draw2ViewportCenter .draw2-tool-icon { width: 18px !important; height: 18px !important; } #draw2WorkspaceFrame .draw2-workspace-brand, #draw2WorkspaceFrame .draw2-workspace-brand .draw2-details-menu { overflow: visible !important; } #draw2WorkspaceFrame .draw2-workspace-brand .draw2-details-menu { position: relative; z-index: 400; } #draw2WorkspaceFrame .draw2-workspace-brand .draw2-details-menu[open] > .draw2-details-popover { display: grid !important; visibility: visible !important; pointer-events: auto !important; z-index: 401 !important; } #draw2WorkspaceFrame .draw2-workspace-brand .draw2-details-menu:not([open]) > .draw2-details-popover { display: none !important; visibility: hidden !important; pointer-events: none !important; } @media (min-width: 1120px) { #draw2WorkspaceFrame[data-workspace-profile="desktop"] { --draw2-desktop-primary-control: 40px; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar { width: 220px !important; min-width: 220px !important; height: 40px !important; min-height: 40px !important; gap: 4px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-context-row { right: 248px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > .draw2-icon-button { box-sizing: border-box !important; flex: 0 0 var(--draw2-desktop-primary-control) !important; width: var(--draw2-desktop-primary-control) !important; min-width: var(--draw2-desktop-primary-control) !important; max-width: var(--draw2-desktop-primary-control) !important; height: var(--draw2-desktop-primary-control) !important; min-height: var(--draw2-desktop-primary-control) !important; max-height: var(--draw2-desktop-primary-control) !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-toolbar > .draw2-tool-group, #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-toolbar > .draw2-tool-button, #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-toolbar > .draw2-tool-group > summary { flex-basis: var(--draw2-desktop-primary-control) !important; width: var(--draw2-desktop-primary-control) !important; min-width: var(--draw2-desktop-primary-control) !important; max-width: var(--draw2-desktop-primary-control) !important; height: var(--draw2-desktop-primary-control) !important; min-height: var(--draw2-desktop-primary-control) !important; max-height: var(--draw2-desktop-primary-control) !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-creator-mode-bar > .draw2-creator-mode { height: var(--draw2-desktop-primary-control) !important; min-height: var(--draw2-desktop-primary-control) !important; max-height: var(--draw2-desktop-primary-control) !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-brush-options-trigger { min-height: var(--draw2-desktop-primary-control) !important; height: var(--draw2-desktop-primary-control) !important; } } @media (min-width: 1000px) { #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] { --draw2-left-rail-min-width: 52px; --draw2-left-rail-width: 52px; --draw2-tool-rail-width: 52px; --draw2-tool-dock-width: 52px; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceLeftDock > .draw2-workspace-toolbar > .draw2-tool-button { display: none !important; visibility: hidden !important; pointer-events: none !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceLeftDock { box-sizing: border-box !important; width: 52px !important; min-width: 52px !important; max-width: 52px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceLeftDock .draw2-tool-group:not([open]) > .draw2-tool-popover { display: none !important; visibility: hidden !important; pointer-events: none !important; } } @media (min-width: 1000px) { #draw2WorkspaceTimelineSlot > #draw2TimelineCard > .draw2-timeline-heading { position: absolute; z-index: 30; top: 4px; right: 4px; display: flex !important; min-height: 30px; padding: 0; border: 0; background: transparent; box-shadow: none; } #draw2WorkspaceTimelineSlot > #draw2TimelineCard > .draw2-timeline-heading > :not(#draw2TimelineCollapse) { display: none !important; } #draw2TimelineCollapse { display: grid !important; place-items: center; width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; } #draw2WorkspaceFrame:has( #draw2WorkspaceTimelineRegion[data-timeline-collapse="collapsed"] ) { grid-template-rows: auto minmax(0, 1fr) 32px var(--draw2-statusbar-height) !important; } #draw2WorkspaceTimelineRegion[data-timeline-collapse="collapsed"] { height: 32px !important; min-height: 32px !important; } } #draw2WorkspaceFrame .draw2-workspace-command-bar { min-width: 0 !important; overflow-x: auto !important; overflow-y: visible !important; justify-content: flex-start !important; flex-wrap: nowrap !important; scrollbar-width: thin; } #draw2WorkspaceFrame .draw2-workspace-command-bar > [data-draw2-zoom-tools] { box-sizing: border-box; display: inline-flex !important; align-items: center; flex: 0 0 auto !important; width: auto !important; min-width: max-content !important; height: 32px !important; min-height: 32px !important; gap: 2px; padding: 2px; border: 1px solid var(--draw2-border-subtle, var(--draw2-border)); border-radius: 6px; background: color-mix( in srgb, var(--draw2-surface-raised, #171d29) 86%, var(--draw2-accent, #6ea8fe) ); } #draw2WorkspaceFrame .draw2-zoom-tool { box-sizing: border-box; display: inline-grid !important; place-items: center; flex: 0 0 26px !important; width: 26px !important; min-width: 26px !important; height: 26px !important; min-height: 26px !important; padding: 0 !important; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--draw2-text-strong, #f4f7fb); font-size: 0.8rem; font-weight: 700; line-height: 1; } #draw2WorkspaceFrame .draw2-zoom-tool-fit { flex-basis: 34px !important; width: 34px !important; min-width: 34px !important; font-size: 0.58rem; letter-spacing: 0.02em; } #draw2WorkspaceFrame .draw2-zoom-tool:hover, #draw2WorkspaceFrame .draw2-zoom-tool:focus-visible { border-color: var(--draw2-border-strong, var(--draw2-border)); background: color-mix( in srgb, var(--draw2-accent, #6ea8fe) 16%, transparent ); } #draw2WorkspaceFrame .draw2-zoom-readout { box-sizing: border-box; display: inline-grid !important; place-items: center; flex: 0 0 42px !important; width: 42px !important; min-width: 42px !important; height: 26px !important; min-height: 26px !important; padding: 0 3px; border: 0; color: var(--draw2-text-muted, #aeb8c8); font-size: 0.62rem; font-variant-numeric: tabular-nums; text-align: center; } #draw2WorkspaceFrame .draw2-sync-status { position: relative; box-sizing: border-box; display: block !important; flex: 0 0 auto !important; width: auto !important; min-width: max-content !important; height: 32px !important; min-height: 32px !important; z-index: 40; } #draw2WorkspaceFrame .draw2-sync-status > summary { box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center; gap: 5px; width: auto !important; min-width: 54px !important; height: 32px !important; min-height: 32px !important; padding: 0 7px !important; overflow: hidden; border: 1px solid transparent; border-radius: 5px; color: var(--draw2-text-muted, #aeb8c8); cursor: pointer; font-size: 0.58rem; font-weight: 700; list-style: none; text-transform: uppercase; white-space: nowrap; } #draw2WorkspaceFrame .draw2-sync-status > summary::-webkit-details-marker { display: none; } #draw2WorkspaceFrame .draw2-sync-status > summary:hover, #draw2WorkspaceFrame .draw2-sync-status > summary:focus-visible, #draw2WorkspaceFrame .draw2-sync-status[open] > summary { border-color: var(--draw2-border-strong, var(--draw2-border)); background: color-mix( in srgb, var(--draw2-accent, #6ea8fe) 12%, transparent ); color: var(--draw2-text-strong, #f4f7fb); } #draw2WorkspaceFrame .draw2-sync-dot { display: inline-block; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #8290a3; box-shadow: 0 0 0 2px rgb(130 144 163 / 14%); } #draw2WorkspaceFrame[data-draw2-sync-state="connecting"] .draw2-sync-dot { background: #e4ad4a; box-shadow: 0 0 0 2px rgb(228 173 74 / 15%); } #draw2WorkspaceFrame[data-draw2-sync-state="synced"] .draw2-sync-dot { background: #54c58a; box-shadow: 0 0 0 2px rgb(84 197 138 / 15%); } #draw2WorkspaceFrame[data-draw2-sync-state="offline"] .draw2-sync-dot { background: #e4ad4a; box-shadow: 0 0 0 2px rgb(228 173 74 / 15%); } #draw2WorkspaceFrame[data-draw2-sync-state="conflict"] .draw2-sync-dot { background: #ec6d73; box-shadow: 0 0 0 2px rgb(236 109 115 / 15%); } #draw2WorkspaceFrame .draw2-sync-popover { position: fixed; top: 60px; right: 8px; display: none; width: min(318px, calc(100vw - 16px)); box-sizing: border-box; gap: 12px; padding: 14px; border: 1px solid var(--draw2-border-strong, var(--draw2-border)); border-radius: 9px; background: var(--draw2-surface-raised, #171d29); box-shadow: 0 14px 36px rgb(0 0 0 / 34%); color: var(--draw2-text, #dce4ef); z-index: 600; } #draw2WorkspaceFrame .draw2-sync-status[open] > .draw2-sync-popover { display: grid !important; } #draw2WorkspaceFrame .draw2-sync-heading, #draw2WorkspaceFrame .draw2-sync-state-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; } #draw2WorkspaceFrame .draw2-sync-heading > div, #draw2WorkspaceFrame .draw2-sync-state-card > div { display: grid; gap: 3px; min-width: 0; } #draw2WorkspaceFrame .draw2-sync-heading strong { color: var(--draw2-text-strong, #f4f7fb); font-size: 0.8rem; } #draw2WorkspaceFrame .draw2-sync-state-badge { flex: 0 0 auto; padding: 4px 6px; border: 1px solid var(--draw2-border-subtle, var(--draw2-border)); border-radius: 4px; color: var(--draw2-text-muted, #aeb8c8); font-size: 0.54rem; font-weight: 800; letter-spacing: 0.06em; } #draw2WorkspaceFrame .draw2-sync-state-card { justify-content: flex-start; padding: 10px; border: 1px solid var(--draw2-border-subtle, var(--draw2-border)); border-radius: 7px; background: color-mix( in srgb, var(--draw2-surface, #10151f) 82%, var(--draw2-accent, #6ea8fe) ); } #draw2WorkspaceFrame .draw2-sync-state-card strong { color: var(--draw2-text-strong, #f4f7fb); font-size: 0.72rem; } #draw2WorkspaceFrame .draw2-sync-state-card small, #draw2WorkspaceFrame .draw2-sync-note { color: var(--draw2-text-muted, #aeb8c8); font-size: 0.62rem; line-height: 1.45; } #draw2WorkspaceFrame .draw2-sync-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; } #draw2WorkspaceFrame .draw2-sync-metrics > div { display: grid; gap: 3px; min-width: 0; padding: 7px 6px; border: 1px solid var(--draw2-border-subtle, var(--draw2-border)); border-radius: 5px; background: var(--draw2-surface, #10151f); } #draw2WorkspaceFrame .draw2-sync-metrics small { color: var(--draw2-text-muted, #aeb8c8); font-size: 0.52rem; text-transform: uppercase; } #draw2WorkspaceFrame .draw2-sync-metrics strong { overflow: hidden; color: var(--draw2-text-strong, #f4f7fb); font-size: 0.61rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; } #draw2WorkspaceFrame .draw2-sync-note { margin: 0; } #draw2WorkspaceFrame .draw2-sync-checkpoint-actions { display: grid; gap: 6px; } #draw2WorkspaceFrame .draw2-sync-checkpoint-actions .draw2-button { justify-self: start; min-height: 30px; padding-inline: 9px; font-size: 0.62rem; } #draw2WorkspaceFrame .draw2-sync-checkpoint-actions small { color: var(--draw2-text-muted, #aeb8c8); font-size: 0.58rem; line-height: 1.4; } #draw2WorkspaceFrame .draw2-statusbar-sync { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 5px; color: var(--draw2-text-muted, #aeb8c8); font-size: 0.58rem; white-space: nowrap; } #draw2WorkspaceFrame .draw2-statusbar-sync .draw2-sync-dot { width: 6px; height: 6px; flex-basis: 6px; } #draw2WorkspaceFrame .draw2-right-custom-dock > .draw2-workspace-tabs { min-width: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; flex-wrap: nowrap !important; scrollbar-width: thin; } #draw2WorkspaceFrame .draw2-right-custom-dock > .draw2-workspace-tabs > .draw2-workspace-tab { flex: 0 0 auto !important; } @media (min-width: 1120px) { #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar { width: 332px !important; min-width: 332px !important; overflow: visible !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-context-row { right: 360px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > * { display: none !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > [data-workspace-command="undo"], #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > [data-workspace-command="redo"], #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > [data-mode-playback] { display: grid !important; place-items: center; flex: 0 0 32px !important; width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > [data-workspace-command="panel-export"], #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > .draw2-global-mini-preview-toggle { display: none !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > [data-draw2-zoom-tools], #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > #draw2SyncStatus { display: inline-flex !important; } } .draw2-project-start[hidden] { display: none !important; } .draw2-shell:has(#draw2ProjectStart:not([hidden])) { display: block !important; width: 100% !important; height: 100dvh !important; min-height: 100dvh !important; padding: clamp(24px, 5dvh, 64px) clamp(20px, 5vw, 72px) !important; overflow: auto !important; background: radial-gradient(circle at 78% 18%, rgb(71 230 192 / 8%), transparent 30%), var(--draw2-bg); } .draw2-shell:has(#draw2ProjectStart:not([hidden])) > .draw2-workspace-frame, .draw2-shell:has(#draw2ProjectStart:not([hidden])) > .draw2-card { display: none !important; } .draw2-project-start { width: min(1080px, 100%); min-height: calc(100dvh - 2 * clamp(24px, 5dvh, 64px)); margin: 0 auto; padding: clamp(22px, 4vw, 44px); border: 1px solid var(--draw2-border-subtle); border-radius: 20px; background: color-mix(in srgb, var(--draw2-surface) 96%, #05070b); box-shadow: var(--draw2-shadow-panel); } .draw2-project-start-header, .draw2-project-start-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .draw2-project-start-brand { display: flex; align-items: flex-start; gap: 16px; min-width: 0; } .draw2-project-start-logo { flex: 0 0 40px; width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; } .draw2-project-start h1, .draw2-project-start h2, .draw2-project-start p { margin-top: 0; } .draw2-project-start h1 { margin-bottom: 8px; color: var(--draw2-text-strong); font-size: clamp(1.55rem, 3vw, 2.35rem); letter-spacing: -0.035em; line-height: 1.08; } .draw2-project-start-header p:not(.draw2-eyebrow) { max-width: 620px; margin-bottom: 0; color: var(--draw2-text-muted); font-size: 0.86rem; line-height: 1.55; } .draw2-project-start-local, .draw2-project-start-section-heading > span { flex: 0 0 auto; color: var(--draw2-text-muted); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; white-space: nowrap; } .draw2-project-start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(28px, 5vw, 52px); } .draw2-project-start-card, .draw2-project-start-open { min-height: 112px; padding: 18px; border: 1px solid var(--draw2-border-subtle); border-radius: 12px; background: var(--draw2-surface-raised); color: var(--draw2-text-strong); } .draw2-project-start-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer; } .draw2-project-start-card.is-selected { border-color: var(--draw2-accent-strong); background: color-mix(in srgb, var(--draw2-accent-strong) 12%, var(--draw2-surface-raised)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--draw2-accent-strong) 34%, transparent); } .draw2-project-start-card:hover, .draw2-project-start-card:focus-visible { border-color: var(--draw2-accent-strong); background: color-mix(in srgb, var(--draw2-accent-strong) 10%, var(--draw2-surface-raised)); } .draw2-project-start-card-primary { border-color: color-mix(in srgb, var(--draw2-accent-strong) 46%, var(--draw2-border-subtle)); } .draw2-project-start-card-icon { display: grid; flex: 0 0 42px; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: color-mix(in srgb, var(--draw2-accent-strong) 18%, transparent); color: var(--draw2-accent-strong); font-size: 1.7rem; line-height: 1; } .draw2-project-start-card span:last-child, .draw2-project-start-open { display: grid; gap: 6px; } .draw2-project-start-card strong { font-size: 0.98rem; } .draw2-project-start-card small { color: var(--draw2-text-muted); font-size: 0.72rem; line-height: 1.45; } .draw2-project-start-open { align-content: center; grid-column: 1 / -1; } .draw2-project-start-open label { color: var(--draw2-text-muted); font-size: 0.68rem; font-weight: 700; } .draw2-project-start-open > div { display: flex; gap: 6px; min-width: 0; } .draw2-project-start-open input { width: 100%; min-width: 0; min-height: 36px; padding: 0 10px; border: 1px solid var(--draw2-border-strong); border-radius: 6px; background: var(--draw2-surface-input); color: var(--draw2-text-strong); font-size: 0.72rem; } .draw2-project-start-open .draw2-button { flex: 0 0 auto; width: auto !important; min-height: 36px; padding-inline: 13px; } .draw2-project-start-recent { margin-top: clamp(30px, 5vw, 58px); } .draw2-project-start-section-heading { align-items: end; padding-bottom: 10px; border-bottom: 1px solid var(--draw2-border-subtle); } .draw2-project-start-section-heading .draw2-eyebrow { margin-bottom: 4px; } .draw2-project-start h2 { margin-bottom: 0; font-size: 1rem; letter-spacing: -0.02em; } .draw2-project-start-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .draw2-project-recent-item-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; min-width: 0; } .draw2-project-recent-item { display: grid; gap: 6px; min-width: 0; min-height: 88px; padding: 13px; border: 1px solid var(--draw2-border-subtle); border-radius: 10px; background: color-mix(in srgb, var(--draw2-surface-raised) 82%, transparent); color: var(--draw2-text-strong); text-align: left; cursor: pointer; } .draw2-project-recent-delete { align-self: stretch; min-width: 48px; padding: 0 9px; border: 1px solid var(--draw2-border-subtle); border-radius: 10px; background: color-mix(in srgb, var(--draw2-surface-raised) 68%, transparent); color: var(--draw2-text-muted); font-size: 0.64rem; font-weight: 700; cursor: pointer; } .draw2-project-recent-delete:hover, .draw2-project-recent-delete:focus-visible { border-color: color-mix(in srgb, #ff7f8a 58%, var(--draw2-border-subtle)); background: color-mix(in srgb, #ff7f8a 12%, var(--draw2-surface-raised)); color: #ffb1b8; } .draw2-project-recent-item:hover, .draw2-project-recent-item:focus-visible { border-color: var(--draw2-accent-strong); } .draw2-project-recent-item strong, .draw2-project-recent-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-project-recent-item strong { font-size: 0.76rem; } .draw2-project-recent-item small { color: var(--draw2-text-muted); font-size: 0.64rem; } .draw2-project-start-status { min-height: 20px; margin: 12px 0 0; color: var(--draw2-text-muted); font-size: 0.68rem; } #draw2WorkspaceFrame .draw2-details-popover { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: start; gap: 6px !important; padding: 6px !important; } #draw2WorkspaceFrame .draw2-menu-group, #draw2WorkspaceFrame .draw2-menu-subgroup { min-width: 0; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); } #draw2WorkspaceFrame .draw2-menu-group > summary, #draw2WorkspaceFrame .draw2-menu-subgroup > summary { display: flex; align-items: center; justify-content: space-between; min-height: 36px; padding: 0 10px; border-radius: var(--draw2-radius-sm); color: var(--draw2-text-strong); cursor: pointer; list-style: none; } #draw2WorkspaceFrame .draw2-menu-group > summary::-webkit-details-marker, #draw2WorkspaceFrame .draw2-menu-subgroup > summary::-webkit-details-marker { display: none; } #draw2WorkspaceFrame .draw2-menu-group > summary::after, #draw2WorkspaceFrame .draw2-menu-subgroup > summary::after { content: "›"; color: var(--draw2-text-muted); font-size: 1.1rem; line-height: 1; transform: translateY(-1px); } #draw2WorkspaceFrame .draw2-menu-group[open] > summary, #draw2WorkspaceFrame .draw2-menu-subgroup[open] > summary, #draw2WorkspaceFrame .draw2-menu-group > summary:hover, #draw2WorkspaceFrame .draw2-menu-subgroup > summary:hover, #draw2WorkspaceFrame .draw2-menu-group > summary:focus-visible, #draw2WorkspaceFrame .draw2-menu-subgroup > summary:focus-visible { background: var(--draw2-surface); outline: 0; } #draw2WorkspaceFrame .draw2-menu-group[open] > summary::after, #draw2WorkspaceFrame .draw2-menu-subgroup[open] > summary::after { content: "⌄"; } #draw2WorkspaceFrame .draw2-menu-group-popover, #draw2WorkspaceFrame .draw2-menu-subgroup-popover { display: grid; gap: 2px; min-width: 0; padding: 4px; border-top: 1px solid var(--draw2-border-subtle); } #draw2WorkspaceFrame .draw2-menu-group:not([open]) > .draw2-menu-group-popover, #draw2WorkspaceFrame .draw2-menu-subgroup:not([open]) > .draw2-menu-subgroup-popover { display: none; } #draw2WorkspaceFrame .draw2-menu-group-popover > .draw2-menu-section-label, #draw2WorkspaceFrame .draw2-menu-subgroup-popover > .draw2-menu-section-label { display: block; padding: 4px 6px 2px; color: var(--draw2-text-muted); font-size: 0.61rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.2; text-transform: uppercase; } #draw2WorkspaceFrame .draw2-menu-subgroup { background: var(--draw2-surface); } #draw2WorkspaceFrame .draw2-menu-subgroup > summary { min-height: 32px; padding-inline: 8px; font-size: 0.7rem; } #draw2WorkspaceFrame .draw2-menu-group-popover button, #draw2WorkspaceFrame .draw2-menu-subgroup-popover button { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #draw2WorkspaceFrame .draw2-viewport-mini-preview-toggle { position: absolute !important; z-index: 6 !important; top: 8px !important; right: 8px !important; display: grid !important; width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; padding: 0 !important; place-items: center; border-color: var(--draw2-border-strong); background: color-mix(in srgb, var(--draw2-surface) 94%, transparent); opacity: 0.86; } #draw2WorkspaceFrame .draw2-viewport-mini-preview-toggle > span { display: none !important; } #draw2WorkspaceFrame .draw2-viewport-mini-preview-toggle:hover, #draw2WorkspaceFrame .draw2-viewport-mini-preview-toggle:focus-visible, #draw2WorkspaceFrame .draw2-viewport-mini-preview-toggle:active { opacity: 1; } #draw2WorkspaceFrame .draw2-quick-size-field { box-sizing: border-box; flex: 0 0 72px; width: 72px; min-width: 72px; justify-content: center; gap: 4px; padding-inline: 5px; overflow: hidden; } #draw2WorkspaceFrame .draw2-quick-control-size input[type="number"] { box-sizing: border-box; flex: 0 0 44px; width: 44px; min-width: 44px; padding-inline: 2px; overflow: visible; font-variant-numeric: tabular-nums; } #draw2WorkspaceFrame .draw2-quick-unit { flex: 0 0 auto; } #draw2WorkspaceFrame .draw2-export-package-note { margin: 0; color: var(--draw2-text-muted); font-size: 0.68rem; line-height: 1.4; } #draw2WorkspaceFrame .draw2-mirror-line-toggle--diagonal-down, #draw2WorkspaceFrame .draw2-mirror-line-toggle--diagonal-up { font: 800 1.15rem/1 ui-sans-serif, system-ui, sans-serif; } #draw2WorkspaceFrame .draw2-mirror-line-toggle--diagonal-down[data-enabled="true"], #draw2WorkspaceFrame .draw2-mirror-line-toggle--diagonal-up[data-enabled="true"] { color: var(--draw2-warning, #f5b14c); } #draw2WorkspaceFrame.is-tool-flyout-open { overflow: visible !important; } #draw2WorkspaceFrame.is-tool-flyout-open #draw2WorkspaceLeftDock, #draw2WorkspaceLeftDock.is-tool-flyout-open { position: relative !important; z-index: 10000 !important; overflow: visible !important; } #draw2WorkspaceFrame .draw2-tool-popover.is-flyout-positioned { z-index: 10001 !important; isolation: isolate; } #draw2WorkspaceFrame .draw2-tool-group > .draw2-tool-popover { box-sizing: border-box !important; --draw2-tool-child-size: 56px; --draw2-tool-child-gap: 4px; --draw2-tool-child-padding: 6px; grid-template-columns: repeat(3, var(--draw2-tool-child-size)) !important; grid-auto-rows: var(--draw2-tool-child-size) !important; gap: var(--draw2-tool-child-gap) !important; width: max-content !important; min-width: 0 !important; max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px) !important; padding: var(--draw2-tool-child-padding) !important; overflow: auto !important; overscroll-behavior: contain; } #draw2WorkspaceFrame .draw2-tool-group[data-tool-count="1"] > .draw2-tool-popover { grid-template-columns: repeat(1, var(--draw2-tool-child-size)) !important; } #draw2WorkspaceFrame .draw2-tool-group[data-tool-count="2"] > .draw2-tool-popover { grid-template-columns: repeat(2, var(--draw2-tool-child-size)) !important; } #draw2WorkspaceFrame .draw2-tool-group[open] > .draw2-tool-popover { display: grid !important; visibility: visible !important; pointer-events: auto !important; } #draw2WorkspaceFrame .draw2-tool-popover .draw2-tool-button { box-sizing: border-box !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: 20px minmax(1.1em, auto) !important; align-content: center !important; justify-content: stretch !important; justify-items: center !important; gap: 2px !important; width: var(--draw2-tool-child-size) !important; min-width: var(--draw2-tool-child-size) !important; max-width: var(--draw2-tool-child-size) !important; height: var(--draw2-tool-child-size) !important; min-height: var(--draw2-tool-child-size) !important; max-height: var(--draw2-tool-child-size) !important; padding: 5px 3px !important; overflow: hidden !important; text-align: center !important; } #draw2WorkspaceFrame .draw2-tool-popover .draw2-tool-button .draw2-tool-icon { display: block !important; flex: 0 0 20px !important; width: 20px !important; min-width: 20px !important; height: 20px !important; min-height: 20px !important; } #draw2WorkspaceFrame .draw2-tool-popover .draw2-tool-button span { display: block !important; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; overflow: hidden; color: inherit; font-size: 0.64rem; font-weight: 650; line-height: 1.1; text-align: center; text-overflow: ellipsis; white-space: nowrap; } #draw2WorkspaceFrame .draw2-tool-popover.is-flyout-positioned { position: fixed !important; z-index: 10001 !important; display: grid !important; visibility: visible !important; pointer-events: auto !important; isolation: isolate; } #draw2WorkspaceFrame .draw2-viewport-context-rail { position: absolute; z-index: 22; top: 8px; left: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; max-width: calc(100% - 16px); pointer-events: none; } #draw2WorkspaceFrame .draw2-viewport-context-rail[hidden] { display: none !important; } #draw2WorkspaceFrame .draw2-viewport-context-control { box-sizing: border-box; display: inline-flex; align-items: center; min-height: 30px; gap: 5px; padding: 3px 7px; border: 1px solid var(--draw2-border-subtle); border-radius: 7px; background: color-mix(in srgb, var(--draw2-surface-raised) 92%, transparent); color: var(--draw2-text-muted); font-size: 0.64rem; line-height: 1; white-space: nowrap; pointer-events: auto; } #draw2WorkspaceFrame .draw2-viewport-context-control[hidden] { display: none !important; } #draw2WorkspaceFrame .draw2-viewport-context-control select { min-width: 56px; min-height: 24px; padding-inline: 4px; font-size: 0.64rem; } #draw2WorkspaceFrame .draw2-viewport-context-control input[type="range"] { width: 86px; min-width: 60px; min-height: 20px; accent-color: var(--draw2-accent-strong, var(--draw2-accent)); } #draw2WorkspaceFrame .draw2-viewport-context-control output { min-width: 32px; color: var(--draw2-text-strong); font: 700 0.64rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; font-variant-numeric: tabular-nums; } #draw2WorkspaceFrame .draw2-viewport-context-control--range { padding-right: 5px; } #draw2WorkspaceFrame .draw2-viewport-wrap.is-mirror-enabled { padding: 42px !important; } #draw2WorkspaceFrame .draw2-mirror-mode-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 4px; min-width: 76px; min-height: 30px; padding: 0 7px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-muted); cursor: pointer; font-size: 0.64rem; font-weight: 700; line-height: 1; white-space: nowrap; touch-action: manipulation; } #draw2WorkspaceFrame .draw2-mirror-mode-toggle:hover, #draw2WorkspaceFrame .draw2-mirror-mode-toggle:focus-visible, #draw2WorkspaceFrame .draw2-mirror-mode-toggle[aria-pressed="true"] { border-color: var(--draw2-accent-strong); background: color-mix( in srgb, var(--draw2-accent-strong) 14%, var(--draw2-surface-input) ); color: var(--draw2-text-strong); } #draw2WorkspaceFrame .draw2-mirror-mode-toggle > .draw2-ui-icon { flex: 0 0 15px; width: 15px; height: 15px; color: var(--draw2-accent-strong); } #draw2WorkspaceFrame .draw2-mirror-mode-toggle > span { display: inline-block !important; opacity: 0.78; font-size: 0.62rem; } #draw2WorkspaceFrame .draw2-mirror-mode-toggle > strong { color: var(--draw2-text-strong); font: 800 0.62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.03em; } #draw2WorkspaceFrame #draw2ErasePreview { position: absolute; inset: 0; z-index: 3; display: block; width: 100%; height: 100%; pointer-events: none; image-rendering: crisp-edges; image-rendering: pixelated; background-color: var(--draw2-canvas-checker-a); background-image: repeating-conic-gradient( var(--draw2-canvas-checker-a) 0 25%, var(--draw2-canvas-checker-b) 0 50% ); background-position: 0 0; background-size: calc( var( --draw2-checker-cell-size-display-x, var(--draw2-checker-cell-size-display, var(--draw2-checker-cell-size)) ) * 2 ) calc( var( --draw2-checker-cell-size-display-y, var(--draw2-checker-cell-size-display, var(--draw2-checker-cell-size)) ) * 2 ); } #draw2WorkspaceFrame #draw2ErasePreview[hidden] { display: none !important; } #draw2WorkspaceFrame #draw2Overlay { z-index: 4; } .draw2-audio-left-dock-resize-handle { display: none !important; pointer-events: none !important; } .draw2-audio-arranger-overview { display: flex; flex: 0 0 112px; flex-direction: column; min-width: 0; min-height: 0; border-bottom: 1px solid var(--draw2-border); background: #0f1520; } .draw2-audio-arranger-header { display: flex; flex: 0 0 30px; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 3px 8px; border-bottom: 1px solid var(--draw2-border); background: #151d2b; } .draw2-audio-arranger-header > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .draw2-audio-arranger-header strong { overflow: hidden; color: var(--draw2-text-strong); font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-audio-arranger-header output { flex: 0 0 auto; color: var(--draw2-text-muted); font: 600 0.58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; } .draw2-audio-daw-toolbar { display: grid; flex: 0 0 42px; grid-template-columns: minmax(0, auto) minmax(150px, 1fr) minmax(150px, 1.2fr); align-items: center; gap: 7px; min-width: 0; padding: 4px 8px; border-bottom: 1px solid rgba(88, 116, 151, 0.45); background: linear-gradient(180deg, #172337, #121a29); } .draw2-audio-daw-actions { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: thin; } .draw2-audio-track-add-select { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; min-width: 0; } .draw2-audio-track-add-select > .draw2-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .draw2-audio-track-add-select select { width: 116px; min-width: 116px; min-height: 27px; padding: 0 6px; border: 1px solid rgba(97, 217, 255, 0.8); border-radius: 4px; background: linear-gradient(180deg, #1e7898, #15516f); color: #e9fbff; color-scheme: dark; cursor: pointer; font: 700 0.56rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; } .draw2-audio-track-add-select select:hover, .draw2-audio-track-add-select select:focus-visible { border-color: #b8f0ff; background: linear-gradient(180deg, #2792b5, #1a6688); outline: none; box-shadow: 0 0 0 1px rgba(131, 221, 255, 0.35); } .draw2-audio-track-add-trigger { min-width: 92px; border-color: rgba(97, 217, 255, 0.8); background: linear-gradient(180deg, #1e7898, #15516f); color: #e9fbff; } .draw2-audio-track-add-trigger:hover, .draw2-audio-track-add-trigger:focus-visible { border-color: #b8f0ff; background: linear-gradient(180deg, #2792b5, #1a6688); outline: none; box-shadow: 0 0 0 1px rgba(131, 221, 255, 0.35); } .draw2-audio-track-add-popover { position: fixed; z-index: 100; width: min(560px, calc(100vw - 24px)); max-height: min(620px, calc(100dvh - 24px)); overflow: auto; padding: 10px; border: 1px solid rgba(131, 221, 255, 0.7); border-radius: 10px; background: radial-gradient(circle at 100% 0, rgba(200, 139, 255, 0.16), transparent 38%), linear-gradient(145deg, #17263d, #0d1523 76%); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(97, 217, 255, 0.12); } .draw2-audio-track-add-popover-header { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(111, 142, 181, 0.34); } .draw2-audio-track-add-popover-header > div { display: grid; gap: 3px; } .draw2-audio-track-add-popover-header strong { color: #f2f7ff; font-size: 0.78rem; } .draw2-audio-track-add-popover-close { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border: 1px solid rgba(111, 142, 181, 0.58); border-radius: 6px; background: #111c2c; color: #dcecff; cursor: pointer; } .draw2-audio-track-add-popover-close:hover, .draw2-audio-track-add-popover-close:focus-visible { border-color: #ff9bb3; color: #ffffff; outline: none; } .draw2-audio-track-add-popover-help { margin: 8px 2px 10px; color: var(--draw2-text-muted); font-size: 0.58rem; line-height: 1.45; } .draw2-audio-track-add-options { display: grid; gap: 10px; } .draw2-audio-track-add-section { display: grid; gap: 6px; padding: 8px; border: 1px solid rgba(111, 142, 181, 0.34); border-radius: 8px; background: rgba(12, 22, 36, 0.58); } .draw2-audio-track-add-section > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .draw2-audio-track-add-section > header strong { color: #e9f4ff; font-size: 0.64rem; letter-spacing: 0.04em; text-transform: uppercase; } .draw2-audio-track-add-section > header small { color: var(--draw2-text-muted); font-size: 0.52rem; text-align: right; } .draw2-audio-track-add-template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 5px; } .draw2-audio-track-add-template { display: grid; min-width: 0; min-height: 44px; gap: 3px; justify-items: start; padding: 7px 8px; border: 1px solid rgba(111, 142, 181, 0.46); border-radius: 6px; background: linear-gradient(145deg, #192a43, #111c2c); color: #e9f4ff; cursor: pointer; text-align: left; } .draw2-audio-track-add-template:hover, .draw2-audio-track-add-template:focus-visible { border-color: #83ddff; background: linear-gradient(145deg, #254666, #172b42); outline: none; box-shadow: 0 0 0 1px rgba(131, 221, 255, 0.28); } .draw2-audio-track-add-template[data-audio-track-add-tone="drums"] { border-left: 2px solid #ffbf72; } .draw2-audio-track-add-template[data-audio-track-add-tone="audio"] { border-left: 2px solid #61d9ff; } .draw2-audio-track-add-template strong { overflow: hidden; max-width: 100%; color: #ffffff; font-size: 0.61rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-audio-track-add-template small { overflow: hidden; max-width: 100%; color: var(--draw2-text-muted); font-size: 0.5rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-mode-deck-toolbar .draw2-audio-track-add-select select { width: 124px; min-width: 124px; min-height: 30px; padding-inline: 7px; border-color: rgba(111, 142, 181, 0.65); background: #1b2a40; } .draw2-mode-deck-toolbar .draw2-audio-track-add-select select:hover, .draw2-mode-deck-toolbar .draw2-audio-track-add-select select:focus-visible { border-color: #83ddff; background: #263b59; } .draw2-audio-daw-action { flex: 0 0 auto; min-height: 27px; padding: 0 8px; border: 1px solid rgba(111, 142, 181, 0.65); border-radius: 4px; background: #1b2a40; color: #d6e7fa; cursor: pointer; font: 700 0.56rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; } .draw2-audio-daw-action:hover, .draw2-audio-daw-action:focus-visible { border-color: #83ddff; background: #263b59; color: #ffffff; outline: none; box-shadow: 0 0 0 1px rgba(131, 221, 255, 0.35); } .draw2-audio-daw-action.is-primary { border-color: rgba(97, 217, 255, 0.8); background: linear-gradient(180deg, #1e7898, #15516f); color: #e9fbff; } .draw2-audio-daw-action.is-danger { border-color: rgba(255, 141, 164, 0.52); color: #ffdbe2; } .draw2-audio-daw-divider { flex: 0 0 1px; height: 18px; margin-inline: 1px; background: rgba(142, 168, 201, 0.38); } .draw2-audio-daw-range-status { min-width: 0; overflow: hidden; color: #a9c5de; font: 600 0.57rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; } .draw2-audio-bar-strip { display: flex; align-items: center; justify-content: flex-end; gap: 3px; min-width: 0; overflow-x: auto; scrollbar-width: thin; } .draw2-audio-bar-strip::before { flex: 0 0 auto; margin-right: 2px; color: #7695b3; content: "BARS"; font: 700 0.5rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em; } .draw2-audio-bar-button { flex: 0 0 28px; min-height: 26px; padding: 0 4px; border: 1px solid rgba(111, 142, 181, 0.48); border-radius: 3px; background: #111b2c; color: #9db5ce; cursor: pointer; font: 800 0.56rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-audio-bar-button:hover, .draw2-audio-bar-button:focus-visible { border-color: #8de6ff; color: #ffffff; outline: none; } .draw2-audio-bar-button.is-selected { border-color: #c88bff; background: linear-gradient(180deg, #734ca1, #452b66); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(245, 224, 255, 0.22); } .draw2-audio-bar-strip-more { flex: 0 0 auto; color: #7797b7; font: 700 0.52rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-audio-bar-button.is-anchor { border-color: #78ddff; box-shadow: 0 0 0 1px rgba(120, 221, 255, 0.3); } .draw2-audio-arranger-viewport { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; } .draw2-audio-arranger-playhead { position: absolute; top: 0; z-index: 6; width: 2px; min-width: 2px; height: 100%; border-left: 2px solid #f0c5ff; background: linear-gradient( 180deg, rgb(240 197 255 / 34%), rgb(200 139 255 / 10%) 26%, rgb(200 139 255 / 0%) ); box-shadow: 0 0 0 1px rgb(200 139 255 / 30%), 0 0 11px rgb(200 139 255 / 78%); pointer-events: none; transition: left 70ms linear; will-change: left; } .draw2-audio-arranger-playhead::before { position: absolute; top: 0; left: -6px; width: 10px; height: 7px; background: #f0c5ff; box-shadow: 0 0 8px rgb(200 139 255 / 78%); clip-path: polygon(0 0, 100% 0, 50% 100%); content: ""; } .draw2-audio-arranger-playhead[hidden] { display: none; } .draw2-audio-arranger-ruler, .draw2-audio-arranger-lane { display: grid; width: max-content; min-width: 100%; } .draw2-audio-arranger-ruler { min-height: 20px; border-bottom: 1px solid color-mix(in srgb, var(--draw2-border) 78%, transparent); background: #111a29; } .draw2-audio-arranger-label, .draw2-audio-arranger-track-label { box-sizing: border-box; min-width: 0; padding: 3px 7px; border: 0; border-right: 1px solid color-mix(in srgb, var(--draw2-border) 80%, transparent); background: #111827; color: var(--draw2-text-muted); font: 700 0.54rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: left; white-space: nowrap; } .draw2-audio-arranger-ruler-cell { display: grid; min-width: 30px; min-height: 20px; align-items: center; padding-inline: 4px; border-right: 1px solid color-mix(in srgb, var(--draw2-border) 68%, transparent); color: var(--draw2-text-muted); font: 600 0.5rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-audio-arranger-ruler-cell.is-bar { background: color-mix(in srgb, #c88bff 16%, #111a29); color: #ecd9ff; } .draw2-audio-arranger-ruler-cell.is-selected { background: color-mix(in srgb, #61d9ff 22%, #111a29); color: #e8fbff; box-shadow: inset 0 -2px 0 #61d9ff; } .draw2-audio-arranger-lanes { min-height: 0; background: repeating-linear-gradient( 90deg, rgba(86, 119, 156, 0.08) 0 1px, transparent 1px 30px ), linear-gradient(180deg, rgba(18, 29, 45, 0.34), rgba(9, 14, 23, 0.22)); } .draw2-audio-arranger-lane { min-height: 22px; border-bottom: 1px solid color-mix(in srgb, var(--draw2-border) 54%, transparent); } .draw2-audio-arranger-track-label { display: flex; align-items: center; cursor: pointer; color: var(--draw2-text-strong); font-size: 0.58rem; font-weight: 700; } .draw2-audio-arranger-track-label:hover, .draw2-audio-arranger-track-label:focus-visible, .draw2-audio-arranger-track-label.is-active { background: color-mix(in srgb, #c88bff 23%, #111827); color: #f5eaff; outline: none; } .draw2-audio-arranger-track-content { display: grid; min-height: 21px; align-items: center; gap: 2px; padding: 3px 0; background-image: repeating-linear-gradient( 90deg, transparent 0 29px, color-mix(in srgb, var(--draw2-border) 42%, transparent) 29px 30px ); } .draw2-audio-arranger-clip { z-index: 1; min-width: 0; height: 15px; overflow: hidden; padding: 0 5px; border: 1px solid color-mix(in srgb, #c88bff 70%, var(--draw2-border)); border-radius: 3px; background: linear-gradient(90deg, #8b58bd, #c88bff); color: #fff7ff; cursor: pointer; font: 800 0.5rem/13px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: left; text-overflow: ellipsis; white-space: nowrap; } .draw2-audio-arranger-clip:hover, .draw2-audio-arranger-clip:focus-visible { border-color: #fff1ff; box-shadow: 0 0 0 1px #fff1ff; outline: none; } .draw2-audio-left-dock { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; gap: 6px; overflow: hidden; background: #111722; } .draw2-audio-left-dock[hidden], .draw2-audio-dock-picker[hidden] { display: none !important; } .draw2-audio-left-dock-header { display: flex; flex: 0 0 34px; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; padding: 3px 5px; border: 1px solid var(--draw2-border); border-radius: 4px; background: #171e2b; } .draw2-audio-left-dock-header > div { display: grid; min-width: 0; gap: 2px; } .draw2-audio-left-dock-header strong { overflow: hidden; color: var(--draw2-text-strong); font-size: 0.66rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-audio-dock-add { display: inline-grid; flex: 0 0 28px; width: 28px; min-width: 28px; height: 28px; min-height: 28px; place-items: center; padding: 0; border: 1px solid var(--draw2-border); border-radius: 4px; background: #121a27; color: var(--draw2-text-muted); cursor: pointer; } .draw2-audio-dock-add:hover, .draw2-audio-dock-add:focus-visible, .draw2-audio-dock-add[aria-expanded="true"] { border-color: #c88bff; background: color-mix(in srgb, #c88bff 24%, #121a27); color: #f6eaff; outline: none; } .draw2-audio-dock-add .draw2-ui-icon { width: 16px; height: 16px; } .draw2-audio-dock-picker { position: absolute; z-index: 20; top: 42px; right: 5px; left: 5px; display: grid; gap: 3px; padding: 5px; border: 1px solid #c88bff; border-radius: 5px; background: #151d2b; box-shadow: 0 10px 22px rgb(0 0 0 / 36%); } .draw2-audio-dock-picker-item { display: grid; gap: 2px; min-width: 0; padding: 6px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--draw2-text-strong); cursor: pointer; text-align: left; } .draw2-audio-dock-picker-item:hover, .draw2-audio-dock-picker-item:focus-visible { border-color: #c88bff; background: color-mix(in srgb, #c88bff 18%, #151d2b); outline: none; } .draw2-audio-dock-picker-item small, .draw2-audio-dock-card-title small { overflow: hidden; color: var(--draw2-text-muted); font-size: 0.54rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-audio-dock-picker-empty { margin: 0; padding: 7px; color: var(--draw2-text-muted); font-size: 0.58rem; } .draw2-audio-dock-panels { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; gap: 5px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; } .draw2-audio-dock-card { display: flex; flex: 0 0 auto; flex-direction: column; min-width: 0; border: 1px solid var(--draw2-border); border-radius: 4px; background: #151d2b; } .draw2-audio-dock-card-header { display: flex; align-items: center; gap: 5px; min-width: 0; min-height: 28px; padding: 2px 4px; border-bottom: 1px solid color-mix(in srgb, var(--draw2-border) 78%, transparent); } .draw2-audio-dock-card-close { display: inline-grid; flex: 0 0 22px; width: 22px; min-width: 22px; height: 22px; min-height: 22px; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--draw2-text-muted); cursor: pointer; } .draw2-audio-dock-card-close:hover, .draw2-audio-dock-card-close:focus-visible { border-color: var(--draw2-border); background: #121a27; color: #f4eaff; outline: none; } .draw2-audio-dock-card-close .draw2-ui-icon { width: 13px; height: 13px; } .draw2-audio-dock-card-title { display: grid; flex: 1 1 auto; min-width: 0; gap: 1px; } .draw2-audio-dock-card-body { display: grid; gap: 5px; min-width: 0; padding: 6px; } .draw2-audio-dock-card-body input { width: 100%; min-height: 28px; padding: 0 7px; border: 1px solid var(--draw2-border); border-radius: 3px; background: #0f1520; color: var(--draw2-text-strong); font-size: 0.62rem; } .draw2-audio-dock-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; } .draw2-audio-dock-category-grid button, .draw2-audio-dock-open-button, .draw2-audio-dock-track { min-width: 0; min-height: 27px; padding: 4px 6px; border: 1px solid color-mix(in srgb, var(--draw2-border) 82%, transparent); border-radius: 3px; background: #121a27; color: var(--draw2-text-muted); cursor: pointer; font-size: 0.58rem; text-align: left; } .draw2-audio-dock-category-grid button:hover, .draw2-audio-dock-category-grid button:focus-visible, .draw2-audio-dock-open-button:hover, .draw2-audio-dock-open-button:focus-visible, .draw2-audio-dock-track:hover, .draw2-audio-dock-track:focus-visible, .draw2-audio-dock-track.is-active { border-color: #c88bff; background: color-mix(in srgb, #c88bff 18%, #121a27); color: #f4eaff; outline: none; } .draw2-audio-dock-track-list { display: grid; gap: 3px; } .draw2-audio-dock-track { display: flex; align-items: center; justify-content: space-between; gap: 5px; } .draw2-audio-dock-track span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-audio-dock-track small { flex: 0 0 auto; color: var(--draw2-text-muted); font-size: 0.5rem; } .draw2-audio-dock-track-midi { border-left: 2px solid #c88bff; } .draw2-audio-dock-body-text { margin: 0; color: var(--draw2-text-muted); font-size: 0.58rem; line-height: 1.35; } .draw2-audio-right-tools { display: flex; flex: 0 0 30px; align-items: center; justify-content: flex-end; min-width: 0; padding: 2px 5px; border-bottom: 1px solid var(--draw2-border); background: #111827; } .draw2-audio-dock-add-right { display: inline-flex; width: auto; min-width: 0; height: 24px; min-height: 24px; gap: 4px; padding-inline: 6px; font-size: 0.56rem; } .draw2-audio-dock-add-right .draw2-ui-icon { width: 13px; height: 13px; } .draw2-audio-compact-master { display: grid; flex: 0 0 58px; grid-template-columns: minmax(56px, 0.8fr) 34px minmax(94px, 1.2fr); align-items: center; gap: 7px; min-width: 0; min-height: 58px; padding: 5px 8px; border-bottom: 1px solid var(--draw2-border); background: linear-gradient(90deg, rgb(200 139 255 / 8%), transparent 58%), #101827; } .draw2-audio-compact-master-title { display: grid; gap: 2px; min-width: 0; } .draw2-audio-compact-master-title strong { overflow: hidden; color: var(--draw2-text-strong); font-size: 0.64rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-audio-compact-meter { display: grid; grid-template-columns: repeat(2, 12px); align-items: end; justify-content: center; gap: 5px; min-height: 44px; } .draw2-audio-compact-meter .draw2-audio-meter-channel { display: grid; grid-template-rows: 10px 28px; align-items: end; gap: 2px; min-height: 40px; } .draw2-audio-compact-meter .draw2-audio-meter-channel > b { font-size: 0.42rem; line-height: 1; } .draw2-audio-compact-meter .draw2-audio-meter-bar { width: 8px; height: 28px; margin: 0 auto; } .draw2-audio-compact-master-readouts { display: grid; gap: 2px; min-width: 0; color: var(--draw2-text-muted); font-size: 0.5rem; font-variant-numeric: tabular-nums; } .draw2-audio-compact-master-readouts span { display: flex; justify-content: space-between; gap: 5px; } .draw2-audio-compact-master-readouts b { color: var(--draw2-text-strong); } #draw2WorkspaceFrame[data-creator-mode="AUDIO"][data-audio-right-panel="master"] .draw2-audio-compact-master { display: none; } .draw2-audio-inspector-details { display: grid; gap: 6px; margin-top: 10px; border: 1px solid #2a3850; border-radius: 5px; background: rgb(12 18 28 / 56%); } .draw2-audio-inspector-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; padding: 5px 8px; color: var(--draw2-text-strong); cursor: pointer; font-size: 0.62rem; font-weight: 800; list-style: none; } .draw2-audio-inspector-details > summary::-webkit-details-marker { display: none; } .draw2-audio-inspector-details > summary::after { color: var(--draw2-text-muted); content: "+"; font-size: 0.8rem; line-height: 1; } .draw2-audio-inspector-details[open] > summary::after { content: "−"; } .draw2-audio-inspector-details > summary small { margin-left: auto; color: var(--draw2-text-muted); font-size: 0.5rem; font-weight: 500; } .draw2-audio-inspector-details > .draw2-audio-right-section { margin: 0 6px 6px; padding: 7px; border: 1px solid var(--draw2-border-subtle); border-radius: 4px; background: rgb(15 23 36 / 78%); } @media (min-width: 1120px) { #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] { --draw2-audio-left-width: clamp(190px, 17vw, 250px); grid-template-columns: minmax(190px, var(--draw2-audio-left-width)) minmax(0, 1fr) minmax(280px, var(--draw2-audio-right-width, 360px)) !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2WorkspaceLeftDock:not([hidden]) { display: flex !important; grid-area: left !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; padding: 8px !important; gap: 8px !important; overflow: hidden !important; visibility: visible !important; pointer-events: auto !important; border-right: 1px solid var(--draw2-border-subtle) !important; background: #0f1520 !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2WorkspaceLeftDock > .draw2-workspace-toolbar{ display: none !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioLeftDock:not([hidden]) { display: flex !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioWorkspace { inset: 8px !important; } } @media (min-width: 1120px) { #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] { grid-template-rows: 64px minmax(0, 1fr) clamp(230px, 32dvh, 340px) var(--draw2-statusbar-height) !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2WorkspaceTimelineRegion { display: flex !important; min-height: 230px !important; padding: 6px 8px 4px !important; overflow: hidden !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioWorkspace { display: grid !important; grid-template-rows: 42px minmax(0, 1fr) !important; align-content: stretch !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-audio-arranger-overview { display: none !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-audio-editor-header { grid-row: 1 !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioWorkspace > .draw2-audio-panel, #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioWorkspace > .draw2-audio-editor-surface { grid-row: 2 !important; min-height: 0 !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-audio-arranger-draw-lane { position: sticky !important; bottom: 0 !important; z-index: 5 !important; background: #131b2b !important; box-shadow: 0 -5px 12px rgb(5 9 18 / 48%); } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]:is( [data-mode-deck-tab="audio-library"], [data-mode-deck-tab="audio-mixer"], [data-mode-deck-tab="audio-automation"], [data-mode-deck-tab="audio-fx"], [data-mode-deck-tab="audio-markers"], [data-mode-deck-tab="audio-settings"] ) { grid-template-rows: 64px minmax(0, 1fr) clamp(190px, 27dvh, 270px) var(--draw2-statusbar-height) !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]:is( [data-mode-deck-tab="audio-library"], [data-mode-deck-tab="audio-mixer"], [data-mode-deck-tab="audio-automation"], [data-mode-deck-tab="audio-fx"], [data-mode-deck-tab="audio-markers"], [data-mode-deck-tab="audio-settings"] ) #draw2WorkspaceTimelineRegion { display: flex !important; } .draw2-audio-arranger-header { flex-basis: 36px !important; min-height: 36px !important; padding-inline: 10px !important; border-bottom-color: color-mix(in srgb, #61d9ff 35%, var(--draw2-border)) !important; background: linear-gradient(90deg, #182437, #151d2c 58%, #202039) !important; } .draw2-audio-arranger-header strong { font-size: 0.74rem !important; letter-spacing: 0.03em; } .draw2-audio-arranger-header output { color: #9edfff !important; font-size: 0.6rem !important; } .draw2-audio-daw-toolbar { flex-basis: 42px; grid-template-columns: minmax(0, 1fr) minmax(120px, auto); grid-template-rows: 30px; gap: 5px; padding-inline: 10px; } .draw2-audio-daw-actions { overflow-x: auto; } .draw2-audio-daw-range-status { grid-column: 2; grid-row: 1; } .draw2-audio-arranger-ruler { position: sticky; top: 0; z-index: 4; min-height: 24px !important; background: #101b2c !important; } .draw2-audio-arranger-ruler-cell { min-height: 24px !important; align-items: center; border-right-color: rgba(91, 137, 184, 0.28) !important; font-size: 0.56rem !important; } .draw2-audio-arranger-lane { min-height: 48px !important; grid-template-rows: 48px !important; border-bottom-color: rgba(89, 110, 143, 0.38) !important; } .draw2-audio-arranger-track-label { padding-inline: 10px !important; background: linear-gradient(90deg, #141e2e, #111827) !important; font-size: 0.62rem !important; } .draw2-audio-arranger-track-content { min-height: 48px !important; align-items: center !important; padding: 6px 0 !important; background-image: repeating-linear-gradient( 90deg, transparent 0 29px, rgba(94, 125, 163, 0.23) 29px 30px ) !important; } .draw2-audio-arranger-clip { position: relative; display: block; height: 36px !important; padding: 0 !important; border-color: rgba(108, 220, 255, 0.82) !important; border-radius: 4px !important; background: linear-gradient(180deg, #236b8f, #17415f) !important; box-shadow: inset 0 1px 0 rgba(223, 249, 255, 0.22); line-height: 1 !important; } .draw2-audio-arranger-clip:not(.is-audio-clip) { border-color: rgba(200, 139, 255, 0.72) !important; background: linear-gradient(180deg, #734ca1, #452b66) !important; } .draw2-audio-arranger-waveform { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0.96; } .draw2-audio-arranger-clip.is-midi-clip { border-color: rgba(200, 139, 255, 0.78) !important; background: linear-gradient(180deg, #714a9e, #39264f) !important; } .draw2-audio-arranger-midi-waveform { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0.96; } .draw2-audio-arranger-clip-name { position: relative; z-index: 1; display: block; max-width: 100%; padding: 4px 7px; overflow: hidden; color: #e7f8ff; font: 800 0.54rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: left; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72); white-space: nowrap; } .draw2-audio-arranger-empty { grid-column: 1 / -1; align-self: center; padding-inline: 8px; color: rgba(152, 173, 201, 0.64); font: 700 0.52rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em; } } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] .draw2-workspace-command-bar > [data-workspace-command="panel-export"], #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] .draw2-workspace-command-bar > [data-workspace-command="command-palette"], #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] .draw2-workspace-command-bar > [data-workspace-command="kill-switch"], #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] .draw2-workspace-command-bar > .draw2-theme-control, #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] .draw2-workspace-command-bar > .draw2-language-control { display: none !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceAddPanel { display: inline-flex !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceStatus { display: none !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] .draw2-statusbar-save { display: none !important; } #draw2WorkspaceFrame[data-creator-mode="AUDIO"] .draw2-workspace-toolbar, #draw2WorkspaceFrame[data-creator-mode="AUDIO"] .draw2-tool-studio, #draw2WorkspaceFrame[data-creator-mode="AUDIO"] .draw2-tool-options { display: none !important; } #draw2TogglePlayback, #draw2AssetBuilderPreviewPlay, #draw2AudioPanelPlay, #draw2GameDeckPlay, #draw2AudioDeckPlay, #draw2AudioChipPlay { display: none !important; } @media (min-width: 701px) { #draw2WorkspaceFrame[data-workspace-profile="desktop"] #draw2CreatorModeBar { box-sizing: border-box !important; height: 44px !important; min-height: 44px !important; padding: 2px !important; overflow: visible !important; border-color: transparent !important; background: transparent !important; box-shadow: none !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] #draw2CreatorModeBar > .draw2-creator-mode, #draw2WorkspaceFrame[data-workspace-profile="desktop"] #draw2CreatorModeBar > .draw2-creator-mode.is-active { box-sizing: border-box !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; overflow: visible !important; border-color: transparent !important; background: transparent !important; box-shadow: none !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] #draw2CreatorModeBar > .draw2-creator-mode.is-active { box-shadow: inset 0 -2px 0 var(--draw2-mode-accent, var(--draw2-accent-strong)) !important; } #draw2WorkspaceFrame[data-creator-mode="DRAW"] #draw2TimelineSecondaryControls { display: grid !important; grid-template-columns: 78px 28px 28px !important; align-items: center !important; justify-items: stretch !important; flex: 0 0 138px !important; width: 138px !important; min-width: 138px !important; max-width: none !important; height: 30px !important; min-height: 30px !important; padding: 1px 2px !important; gap: 2px !important; overflow: visible !important; } #draw2WorkspaceFrame[data-creator-mode="DRAW"] #draw2TimelineSecondaryControls .draw2-timeline-rate, #draw2WorkspaceFrame[data-creator-mode="DRAW"] #draw2TimelineSecondaryControls #draw2ToggleOnion, #draw2WorkspaceFrame[data-creator-mode="DRAW"] #draw2TimelineSecondaryControls > .draw2-timeline-onion-options, #draw2WorkspaceFrame[data-creator-mode="DRAW"] #draw2TimelineSecondaryControls > .draw2-timeline-onion-options > summary { box-sizing: border-box !important; flex: 0 0 28px !important; width: 28px !important; min-width: 28px !important; max-width: 28px !important; height: 28px !important; min-height: 28px !important; max-height: 28px !important; padding: 0 !important; } #draw2WorkspaceFrame[data-creator-mode="DRAW"] #draw2TimelineSecondaryControls .draw2-timeline-rate { display: grid !important; grid-template-columns: 20px 54px !important; align-items: center !important; column-gap: 4px !important; flex-basis: 78px !important; width: 78px !important; min-width: 78px !important; max-width: 78px !important; } #draw2WorkspaceFrame[data-creator-mode="DRAW"] #draw2TimelineSecondaryControls .draw2-timeline-rate > .draw2-sr-only { position: static !important; display: block !important; width: 20px !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; clip: auto !important; white-space: nowrap !important; line-height: 28px !important; text-align: right !important; } #draw2WorkspaceFrame[data-creator-mode="DRAW"] #draw2TimelineSecondaryControls .draw2-timeline-rate select { width: 54px !important; min-width: 54px !important; height: 28px !important; min-height: 28px !important; } #draw2TimelinePanelTags { min-height: 0 !important; overflow: auto !important; } #draw2TimelinePanelTags .draw2-timeline-single-panel { box-sizing: border-box; height: 100%; min-height: 0; padding: 8px; overflow: auto; } #draw2TimelinePanelTags .draw2-timeline-creator-group { display: grid; grid-template-columns: minmax(360px, 1.15fr) minmax(260px, 0.85fr); grid-template-areas: "heading heading" "form list"; gap: 6px 12px; align-items: start; min-width: 0; } #draw2TimelinePanelTags .draw2-timeline-creator-group > strong { grid-area: heading; } #draw2TimelinePanelTags .draw2-timeline-creator-form { grid-area: form; display: grid; grid-template-columns: minmax(160px, 1fr) 58px 58px 30px 30px; gap: 5px; min-width: 0; } #draw2TimelinePanelTags .draw2-timeline-creator-form > input, #draw2TimelinePanelTags .draw2-timeline-creator-form > .draw2-button, #draw2TimelinePanelTags .draw2-timeline-creator-check { box-sizing: border-box; width: 100%; min-width: 0; height: 30px; min-height: 30px; } #draw2TimelinePanelTags .draw2-creator-meta-list { grid-area: list; min-width: 0; min-height: 30px; max-height: none; margin: 0; overflow: visible; } #draw2TimelinePanelTags .draw2-creator-meta-row { box-sizing: border-box; min-height: 30px; padding: 3px 5px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: color-mix( in srgb, var(--draw2-surface-raised) 76%, transparent ); } } .draw2-audio-arranger-draw-frame-content, .draw2-audio-draw-frame-cells { position: relative; grid-column: 2 / -1; overflow: hidden; gap: 1px !important; background-image: repeating-linear-gradient( 90deg, transparent 0 29px, rgba(198, 139, 255, 0.18) 29px 30px ) !important; } .draw2-audio-arranger-draw-frame, .draw2-audio-draw-frame-cell { box-sizing: border-box; position: absolute; display: block; min-width: 1px; height: 100%; overflow: hidden; padding: 0; border: 1px solid rgba(200, 139, 255, 0.5); border-radius: 2px; background: linear-gradient( 180deg, rgba(208, 151, 255, 0.86), rgba(112, 66, 157, 0.9) ); color: #fff5ff; cursor: pointer; font: 800 0.46rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; text-overflow: clip; white-space: nowrap; } .draw2-audio-arranger-draw-frame:hover, .draw2-audio-arranger-draw-frame:focus-visible, .draw2-audio-draw-frame-cell:hover, .draw2-audio-draw-frame-cell:focus-visible { z-index: 3; border-color: #fff2ff; box-shadow: 0 0 0 1px #fff2ff, 0 0 10px rgba(200, 139, 255, 0.42); outline: none; } .draw2-audio-arranger-draw-frame.is-active, .draw2-audio-draw-frame-cell.is-active { border-color: #f6d6ff; background: linear-gradient( 180deg, #f0c6ff, #9c5cc6 ); box-shadow: 0 0 0 1px rgba(249, 223, 255, 0.7); } .draw2-audio-arranger-draw-frame.is-chopped, .draw2-audio-draw-frame-cell.is-chopped { color: transparent; } .draw2-audio-draw-frame-cells { min-height: 34px; align-self: stretch; padding: 4px 0 !important; } .draw2-audio-arranger-draw-frame-content { min-height: 30px; align-self: stretch; padding: 4px 0 !important; } .draw2-audio-draw-frame-label { color: #ead7ff !important; } .draw2-audio-daw-sync { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; min-width: 0; padding-left: 2px; } .draw2-audio-daw-sync-status { color: #9fe8ff; font: 800 0.52rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em; white-space: nowrap; } .draw2-audio-daw-sync-status.is-playing { color: #f0c5ff; text-shadow: 0 0 8px rgb(200 139 255 / 72%); } .draw2-audio-daw-sync-status.is-recovering { color: #ffe1a8; } .draw2-audio-arranger-playhead.is-beat-pulse, .draw2-audio-midi-playhead.is-beat-pulse { animation: draw2-audio-beat-pulse 260ms ease-out; } .draw2-audio-midi-range { flex: 0 1 auto; min-width: 0; max-width: 10rem; overflow: hidden; color: #bcd6f0; font: 700 0.56rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; } @keyframes draw2-audio-beat-pulse { 0% { filter: brightness(1.65); } 100% { filter: brightness(1); } } .draw2-audio-daw-sync-button { min-height: 25px; padding: 0 7px; border: 1px solid rgba(120, 221, 255, 0.58); border-radius: 4px; background: #16283d; color: #ccefff; cursor: pointer; font: 800 0.52rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; } .draw2-audio-daw-sync-button:hover, .draw2-audio-daw-sync-button:focus-visible, .draw2-audio-daw-sync-button.is-active { border-color: #b4f1ff; background: linear-gradient(180deg, #27617d, #18435b); color: #ffffff; outline: none; box-shadow: 0 0 0 1px rgba(180, 241, 255, 0.24); } .draw2-audio-musical-position { min-width: 42px; color: #f2d4ff; font: 800 0.6rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; white-space: nowrap; } #draw2WorkspaceFrame[data-creator-mode="AUDIO"][data-audio-draw-monitor="true"] .draw2-mini-preview { display: block !important; z-index: 30; top: 16px !important; right: 16px !important; width: 188px !important; height: 188px !important; padding: 4px !important; border-color: rgba(135, 230, 255, 0.72); background: rgba(10, 17, 29, 0.94); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(135, 230, 255, 0.12); pointer-events: none; } #draw2WorkspaceFrame[data-creator-mode="AUDIO"][data-audio-draw-monitor="true"] .draw2-mini-preview canvas { width: 180px !important; height: 180px !important; } @media (prefers-reduced-motion: reduce) { .draw2-audio-arranger-playhead, .draw2-audio-midi-playhead { transition: none; } .draw2-audio-arranger-playhead.is-beat-pulse, .draw2-audio-midi-playhead.is-beat-pulse { animation: none; } } .draw2-audio-daw-toolbar { flex-basis: 74px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 30px 28px; align-items: center; } .draw2-audio-daw-actions { grid-column: 1; grid-row: 1; min-width: 0; overflow-x: auto; scrollbar-width: thin; } .draw2-audio-daw-actions .draw2-audio-track-add-trigger { position: sticky; right: 0; z-index: 3; flex: 0 0 auto; box-shadow: -8px 0 10px rgba(18, 35, 55, 0.92); } .draw2-audio-daw-sync { grid-column: 2; grid-row: 1; justify-self: end; max-width: 100%; } .draw2-audio-daw-range-status { grid-column: 1; grid-row: 2; } .draw2-audio-bar-strip { grid-column: 2; grid-row: 2; max-width: 100%; } .draw2-audio-midi-zoom { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 2px; padding-left: 4px; border-left: 1px solid rgba(149, 162, 190, 0.28); color: var(--draw2-text-muted); font-variant-numeric: tabular-nums; } .draw2-audio-midi-velocity { display: inline-flex; flex: 0 1 132px; align-items: center; gap: 5px; min-width: 96px; color: var(--draw2-text-muted); font: 700 0.5rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; } .draw2-audio-midi-velocity input { width: 74px; min-width: 0; accent-color: #c88bff; cursor: grab; } .draw2-audio-midi-velocity input:active { cursor: grabbing; } .draw2-audio-midi-velocity output { min-width: 2.2rem; color: var(--draw2-text-strong); text-align: right; letter-spacing: 0; } .draw2-audio-midi-actions { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 4px; min-width: 0; padding-left: 4px; border-left: 1px solid rgba(149, 162, 190, 0.28); } .draw2-audio-midi-actions .draw2-button { min-height: 24px; padding: 3px 7px; font-size: 0.55rem; white-space: nowrap; } .draw2-audio-chip-machine-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; padding-right: 4px; border-right: 1px solid rgba(149, 162, 190, 0.28); } .draw2-audio-chip-machine-actions label { display: inline-flex; align-items: center; gap: 3px; color: var(--draw2-text-muted); font-size: 0.55rem; white-space: nowrap; } .draw2-audio-chip-machine-actions select { width: 86px; min-width: 86px; min-height: 24px; padding: 2px 4px; border: 1px solid var(--draw2-border); border-radius: 4px; background: var(--draw2-surface-raised); color: var(--draw2-text-strong); font: inherit; } .draw2-audio-chip-machine-actions .draw2-button { min-width: 76px; } .draw2-audio-midi-zoom .draw2-button { width: 28px; min-width: 28px; height: 24px; min-height: 24px; padding: 0; line-height: 1; } #draw2AudioMidiZoomValue { min-width: 42px; color: var(--draw2-text-strong); font-size: 0.62rem; font-weight: 700; text-align: center; } .draw2-audio-animation-guide { display: grid; flex: 0 0 auto; grid-template-columns: minmax(145px, 1fr) minmax(120px, 1fr) auto; grid-template-rows: 24px 30px 14px; align-items: center; gap: 4px 8px; min-height: 76px; padding: 5px 6px; overflow: hidden; } .draw2-audio-animation-guide > span { grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-audio-animation-guide > label:not(.draw2-audio-midi-velocity) { grid-column: 2; grid-row: 1; min-width: 0; } .draw2-audio-animation-guide > label:not(.draw2-audio-midi-velocity) input { width: 100%; } .draw2-audio-animation-guide .draw2-audio-midi-zoom { grid-column: 3; grid-row: 1; justify-self: end; } .draw2-audio-animation-guide .draw2-audio-midi-range { grid-column: 1; grid-row: 2; max-width: none; } .draw2-audio-animation-guide .draw2-audio-midi-velocity { grid-column: 2; grid-row: 2; width: 100%; max-width: none; } .draw2-audio-animation-guide .draw2-audio-midi-velocity input { flex: 1 1 auto; width: auto; } .draw2-audio-animation-guide .draw2-audio-midi-actions { grid-column: 3; grid-row: 2; justify-self: end; width: max-content; max-width: 100%; overflow-x: auto; } .draw2-audio-animation-guide > .draw2-audio-midi-status { grid-column: 1 / -1; grid-row: 3; justify-self: start; min-width: 0; max-width: 100%; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; } .draw2-audio-arranger-lane:not(.draw2-audio-arranger-draw-lane) { min-height: 58px !important; grid-template-rows: 58px !important; } .draw2-audio-arranger-track-label { display: grid; grid-template-rows: 20px minmax(0, 1fr); align-items: stretch; gap: 2px; min-height: 58px !important; padding: 4px 6px; border-right-color: color-mix( in srgb, var(--draw2-audio-track-accent, #64738e) 48%, var(--draw2-border) ); background: linear-gradient( 90deg, color-mix(in srgb, var(--draw2-audio-track-accent, #64738e) 12%, #111827), #101827 82% ); } .draw2-audio-arranger-track-label:hover, .draw2-audio-arranger-track-label:focus-within, .draw2-audio-arranger-track-label.is-active { background: linear-gradient( 90deg, color-mix(in srgb, var(--draw2-audio-track-accent, #c88bff) 26%, #182235), #111827 86% ); box-shadow: inset 2px 0 0 var(--draw2-audio-track-accent, #c88bff); } .draw2-audio-arranger-track-select { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 4px; min-width: 0; min-height: 20px; padding: 0; border: 0; background: transparent; color: var(--draw2-text-strong); cursor: pointer; font: 800 0.58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: left; } .draw2-audio-arranger-track-select:hover, .draw2-audio-arranger-track-select:focus-visible { color: #ffffff; outline: none; } .draw2-audio-track-heading { display: flex; align-items: center; gap: 4px; min-width: 0; } .draw2-audio-track-heading .draw2-audio-arranger-track-select { flex: 1 1 auto; width: 0; } .draw2-audio-track-delete { flex: 0 0 18px; width: 18px; min-width: 18px; height: 18px; min-height: 18px; padding: 0; border: 1px solid color-mix(in srgb, #ff8b9d 60%, #34425b); border-radius: 4px; background: color-mix(in srgb, #ff667d 12%, #101827); color: #ffb6c1; cursor: pointer; font: 900 0.78rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-audio-track-delete:hover, .draw2-audio-track-delete:focus-visible { border-color: #ff8b9d; background: #6d2a43; color: #ffffff; outline: none; box-shadow: 0 0 8px rgb(255 102 125 / 28%); } .draw2-audio-inline-track-icon { display: grid; width: 16px; height: 16px; place-items: center; border: 1px solid color-mix( in srgb, var(--draw2-audio-track-accent, #c88bff) 72%, #33425b ); border-radius: 4px; background: color-mix( in srgb, var(--draw2-audio-track-accent, #c88bff) 20%, #101827 ); color: var(--draw2-audio-track-accent, #c88bff); } .draw2-audio-inline-track-icon > .draw2-ui-icon { width: 11px; height: 11px; } .draw2-audio-inline-track-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-audio-arranger-track-select small { color: var(--draw2-text-muted); font: 700 0.42rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-audio-inline-mixer { display: flex; align-items: end; gap: 3px; min-width: 0; overflow: hidden; } .draw2-audio-inline-mixer-button { flex: 0 0 18px; width: 18px; min-width: 18px; height: 20px; padding: 0; border: 1px solid #34425b; border-radius: 3px; background: #101827; color: var(--draw2-text-muted); cursor: pointer; font: 800 0.5rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-audio-inline-mixer-button:hover, .draw2-audio-inline-mixer-button:focus-visible, .draw2-audio-inline-mixer-button.is-active { border-color: var(--draw2-audio-track-accent, #c88bff); background: color-mix( in srgb, var(--draw2-audio-track-accent, #c88bff) 25%, #111827 ); color: #ffffff; outline: none; box-shadow: 0 0 8px color-mix( in srgb, var(--draw2-audio-track-accent, #c88bff) 28%, transparent ); } .draw2-audio-inline-mixer-control.draw2-audio-mixer-control { display: grid; grid-template-columns: 9px minmax(0, 1fr); grid-template-rows: 10px 22px; flex: 0 0 28px; gap: 0; min-width: 28px; min-height: 32px; align-items: center; } .draw2-audio-inline-mixer-heading { color: var(--draw2-text-muted); font: 900 0.45rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-audio-inline-mixer-control > output { min-width: 0; overflow: hidden; color: var(--draw2-text-strong); font: 700 0.42rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .draw2-audio-inline-mixer-control .draw2-audio-knob { grid-column: 1 / -1; grid-row: 2; width: 22px; height: 22px; margin: 0 auto; border-color: color-mix( in srgb, var(--draw2-audio-track-accent, #c88bff) 52%, #455775 ); background: radial-gradient(circle at 50% 45%, #2b3850 0 38%, transparent 39%), conic-gradient( from 225deg, var(--draw2-audio-track-accent, #c88bff) 0 25%, #5f7192 25% 75%, #27364d 75% 100% ); box-shadow: inset 0 0 0 2px #121a27, 0 2px 5px rgb(0 0 0 / 32%); } .draw2-audio-inline-mixer-control .draw2-audio-knob::before { inset: 4px; } .draw2-audio-inline-mixer-control .draw2-audio-knob i { top: 3px; height: 8px; transform-origin: 50% 8px; } .draw2-audio-inline-mixer-control input[type="range"] { position: absolute; z-index: 2; inset: 10px 0 0; width: 100%; height: 22px; min-width: 0; opacity: 0; cursor: grab; } .draw2-audio-inline-mixer-control input[type="range"]:active { cursor: grabbing; } .draw2-audio-inline-mixer-control:focus-within .draw2-audio-knob { border-color: #ffffff; box-shadow: inset 0 0 0 2px #121a27, 0 0 0 2px color-mix( in srgb, var(--draw2-audio-track-accent, #c88bff) 32%, transparent ); } .draw2-audio-inline-meter { position: relative; display: block; flex: 0 0 4px; width: 4px; height: 22px; overflow: hidden; border: 1px solid #33425b; border-radius: 999px; background: #0a111d; } .draw2-audio-inline-meter i { position: absolute; right: 0; bottom: 0; left: 0; height: 42%; border-radius: inherit; background: linear-gradient(180deg, #ffca7a, #7de3b1 58%, #4ecbff); box-shadow: 0 0 5px rgb(125 227 177 / 68%); } [data-audio-transport-state="PLAYING"] .draw2-audio-inline-meter i, [data-audio-transport-state="PLAYING"] .draw2-audio-mixer-activity i { animation: draw2-audio-channel-meter 520ms ease-in-out infinite alternate; } @keyframes draw2-audio-channel-meter { from { height: 34%; } to { height: 88%; } } .draw2-audio-mixer-rows { gap: 7px; padding: 3px; } .draw2-audio-mixer-row { position: relative; grid-template-columns: minmax(150px, 1fr) 30px 30px minmax(72px, 94px) minmax(82px, 108px) minmax(108px, 154px); min-height: 76px; flex-basis: 76px; padding: 7px 8px; border-color: color-mix( in srgb, var(--draw2-audio-track-accent, #536783) 35%, var(--draw2-border-subtle) ); border-left: 3px solid var(--draw2-audio-track-accent, #536783); border-radius: 6px; background: radial-gradient(circle at 7% 0%, color-mix( in srgb, var(--draw2-audio-track-accent, #536783) 16%, transparent ), transparent 42%), linear-gradient(135deg, #1a263a, #101827 72%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 5px 12px rgb(0 0 0 / 16%); } .draw2-audio-mixer-track { display: grid; grid-template-columns: 6px minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; gap: 2px 6px; min-width: 0; } .draw2-audio-mixer-track strong { min-width: 0; overflow: hidden; color: #eef6ff; font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-audio-mixer-track small { grid-column: 2; overflow: hidden; color: var(--draw2-text-muted); font: 700 0.44rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; text-overflow: ellipsis; white-space: nowrap; } .draw2-audio-mixer-activity { position: relative; display: block; grid-row: 1 / -1; width: 4px; height: 40px; overflow: hidden; border: 1px solid #33425b; border-radius: 999px; background: #0b121f; } .draw2-audio-mixer-activity i { position: absolute; right: 0; bottom: 0; left: 0; height: 42%; border-radius: inherit; background: linear-gradient(180deg, #ffcf83, #7de3b1 52%, #4ecbff); box-shadow: 0 0 7px rgb(78 203 255 / 56%); } .draw2-audio-mixer-row .draw2-audio-mixer-button { min-width: 28px; min-height: 28px; border-radius: 5px; background: #111a2a; } .draw2-audio-mixer-row .draw2-audio-mixer-button:hover, .draw2-audio-mixer-row .draw2-audio-mixer-button:focus-visible, .draw2-audio-mixer-row .draw2-audio-mixer-button.is-active { border-color: var(--draw2-audio-track-accent, #c88bff); background: color-mix( in srgb, var(--draw2-audio-track-accent, #c88bff) 24%, #111827 ); color: #ffffff; outline: none; } .draw2-audio-mixer-row .draw2-audio-mixer-control { min-width: 70px; } .draw2-audio-mixer-row .draw2-audio-knob { border-color: color-mix( in srgb, var(--draw2-audio-track-accent, #c88bff) 48%, #455775 ); } .draw2-audio-mixer-routing { justify-content: space-between; min-width: 0; padding: 5px 6px; border: 1px solid #2f405b; border-radius: 5px; background: rgb(8 14 25 / 42%); } .draw2-audio-mixer-routing select { flex: 1 1 auto; min-width: 72px; background: #111a2a; } .draw2-audio-fx-panel { padding: 8px; border: 1px solid #2b3b58; border-radius: 8px; background: radial-gradient(circle at 90% 0%, rgb(200 139 255 / 12%), transparent 38%), linear-gradient(145deg, #17243a, #0e1522 78%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), 0 8px 18px rgb(0 0 0 / 18%); } .draw2-audio-fx-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: var(--draw2-text-muted); font-size: 0.54rem; letter-spacing: 0.08em; text-transform: uppercase; } .draw2-audio-fx-heading strong { display: block; margin-top: 3px; color: #f3e7ff; font-size: 0.78rem; letter-spacing: 0; text-transform: none; } .draw2-audio-fx-chain, .draw2-audio-right-list { position: relative; } .draw2-audio-fx-chain::before { position: absolute; top: 13px; bottom: 13px; left: 13px; width: 1px; background: linear-gradient(180deg, #61d9ff, #c88bff, #7de3b1); box-shadow: 0 0 7px rgb(200 139 255 / 52%); content: ""; pointer-events: none; } .draw2-audio-fx-chain li, .draw2-audio-right-list li[data-audio-fx-item] { position: relative; min-height: 62px; padding: 7px 6px; border: 1px solid #30415e; border-left: 2px solid color-mix( in srgb, var(--draw2-audio-fx-accent, #c88bff) 72%, #30415e ); border-radius: 6px; background: linear-gradient(135deg, #1b2940, #111a2a 72%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%); } .draw2-audio-fx-chain li[data-audio-fx-kind="EQ"], .draw2-audio-right-list li[data-audio-fx-kind="EQ"] { --draw2-audio-fx-accent: #61d9ff; } .draw2-audio-fx-chain li[data-audio-fx-kind="COMPRESSOR"], .draw2-audio-right-list li[data-audio-fx-kind="COMPRESSOR"] { --draw2-audio-fx-accent: #c88bff; } .draw2-audio-fx-chain li[data-audio-fx-kind="REVERB"], .draw2-audio-right-list li[data-audio-fx-kind="REVERB"] { --draw2-audio-fx-accent: #7de3b1; } .draw2-audio-fx-order { z-index: 1; display: grid; width: 18px; height: 18px; place-items: center; border: 1px solid var(--draw2-audio-fx-accent, #c88bff); border-radius: 50%; background: #101827; color: #eef6ff; font: 800 0.48rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .draw2-audio-fx-title { display: flex; align-items: center; min-width: 0; gap: 7px; } .draw2-audio-fx-name { min-width: 0; overflow: hidden; color: #f1f6ff; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; } .draw2-audio-fx-visual { display: inline-flex; flex: 0 0 52px; align-items: end; justify-content: space-between; height: 25px; padding: 3px 4px; border: 1px solid color-mix( in srgb, var(--draw2-audio-fx-accent, #c88bff) 36%, #30415e ); border-radius: 4px; background: linear-gradient(180deg, transparent 49%, rgb(255 255 255 / 10%) 50%, transparent 51%), #0c1422; } .draw2-audio-fx-visual i { display: block; width: 3px; height: var(--draw2-fx-bar-height, 50%); border-radius: 999px 999px 1px 1px; background: linear-gradient( 180deg, color-mix(in srgb, var(--draw2-audio-fx-accent, #c88bff) 90%, #ffffff), var(--draw2-audio-fx-accent, #c88bff) ); box-shadow: 0 0 5px color-mix( in srgb, var(--draw2-audio-fx-accent, #c88bff) 48%, transparent ); } [data-audio-transport-state="PLAYING"] .draw2-audio-fx-visual i { animation: draw2-audio-fx-bars 460ms ease-in-out infinite alternate; } @keyframes draw2-audio-fx-bars { from { transform: scaleY(0.72); opacity: 0.72; } to { transform: scaleY(1.1); opacity: 1; } } .draw2-audio-fx-chain li.is-bypassed .draw2-audio-fx-visual { filter: grayscale(0.8); } .draw2-audio-right-dock { box-shadow: 0 0 0 1px rgb(200 139 255 / 8%), 0 14px 30px rgb(0 0 0 / 24%); } .draw2-audio-right-tab.is-active { position: relative; background: linear-gradient(180deg, #3b2c57, #211d35); box-shadow: inset 0 -2px 0 #c88bff; } .draw2-audio-right-surface { background: radial-gradient(circle at 100% 0%, rgb(97 217 255 / 8%), transparent 34%), linear-gradient(145deg, #121d2d, #0e141f); } .draw2-audio-right-section { padding: 8px; border: 1px solid #263753; border-radius: 6px; background: rgb(16 25 40 / 66%); } @media (min-width: 1120px) { #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]:is( [data-mode-deck-tab="audio-mixer"], [data-mode-deck-tab="audio-fx"] ) { grid-template-rows: 64px minmax(0, 1fr) clamp(260px, 38dvh, 360px) var(--draw2-statusbar-height) !important; } } @media (prefers-reduced-motion: reduce) { .draw2-audio-inline-meter i, .draw2-audio-mixer-activity i, .draw2-audio-fx-visual i { animation: none; } } @media (min-width: 1120px) { #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] { --draw2-audio-left-width: clamp(220px, 18vw, 292px); --draw2-audio-right-width: clamp(300px, 24vw, 380px); --draw2-timeline-height: clamp(230px, 32dvh, 340px); grid-template-columns: minmax(220px, var(--draw2-audio-left-width)) minmax(0, 1fr) minmax(300px, var(--draw2-audio-right-width)) !important; grid-template-rows: 64px minmax(0, 1fr) var(--draw2-timeline-height) var(--draw2-statusbar-height) !important; grid-template-areas: "top top top" "left canvas right" "timeline timeline timeline" "status status status" !important; grid-template: "top top top" 116px "left canvas right" minmax(0, 1fr) "timeline timeline timeline" 180px "status status status" 28px / 64px minmax(0, 1fr) 332px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2WorkspaceLeftDock { grid-area: left !important; align-items: stretch !important; width: 100% !important; min-width: 0 !important; padding: 8px !important; overflow: hidden !important; z-index: 2 !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioLeftDock:not([hidden]) { align-self: stretch !important; flex: 1 1 100% !important; width: auto !important; min-width: 0 !important; max-width: none !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar { right: 8px !important; left: auto !important; width: 112px !important; min-width: 112px !important; max-width: 112px !important; z-index: 7 !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-menu-bar { right: 120px !important; left: auto !important; width: 76px !important; min-width: 76px !important; z-index: 7 !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioGlobalControls { right: 208px !important; left: 390px !important; min-width: 0 !important; max-width: none !important; overflow-x: auto !important; overflow-y: hidden !important; z-index: 6 !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > [data-workspace-command="panel-export"], #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > #draw2SyncStatus, #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > .draw2-zoom-tools { display: none !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioWorkspace { display: grid !important; grid-template-rows: 42px minmax(0, 1fr) !important; align-content: stretch !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioWorkspace > .draw2-audio-arranger-overview { display: none !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioWorkspace > .draw2-audio-editor-header { grid-row: 1 !important; min-height: 0 !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioWorkspace > .draw2-audio-panel, #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioWorkspace > .draw2-audio-editor-surface { grid-row: 2 !important; min-height: 0 !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2WorkspaceTimelineRegion { display: flex !important; grid-area: timeline !important; min-width: 0 !important; min-height: 230px !important; padding: 6px 8px 4px !important; overflow: hidden !important; z-index: 1 !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2ModeTimelineDeck, #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2ModeDeckAudio:not([hidden]) { display: flex !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]:is( [data-mode-deck-tab="audio-library"], [data-mode-deck-tab="audio-mixer"], [data-mode-deck-tab="audio-automation"], [data-mode-deck-tab="audio-fx"], [data-mode-deck-tab="audio-markers"], [data-mode-deck-tab="audio-settings"] ) { grid-template-rows: 64px minmax(0, 1fr) clamp(190px, 27dvh, 270px) var(--draw2-statusbar-height) !important; grid-template-areas: "top top top" "left canvas right" "timeline timeline timeline" "status status status" !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]:is( [data-mode-deck-tab="audio-library"], [data-mode-deck-tab="audio-mixer"], [data-mode-deck-tab="audio-automation"], [data-mode-deck-tab="audio-fx"], [data-mode-deck-tab="audio-markers"], [data-mode-deck-tab="audio-settings"] ) #draw2WorkspaceTimelineRegion { display: flex !important; min-height: 190px !important; padding: 6px 8px 4px !important; z-index: 1 !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]:is( [data-mode-deck-tab="audio-library"], [data-mode-deck-tab="audio-mixer"], [data-mode-deck-tab="audio-automation"], [data-mode-deck-tab="audio-fx"], [data-mode-deck-tab="audio-markers"], [data-mode-deck-tab="audio-settings"] ) #draw2ModeTimelineDeck, #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]:is( [data-mode-deck-tab="audio-library"], [data-mode-deck-tab="audio-mixer"], [data-mode-deck-tab="audio-automation"], [data-mode-deck-tab="audio-fx"], [data-mode-deck-tab="audio-markers"], [data-mode-deck-tab="audio-settings"] ) #draw2ModeDeckAudio:not([hidden]) { display: flex !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; } } @media (min-width: 1400px) { #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar { right: 8px !important; width: 332px !important; min-width: 332px !important; max-width: 332px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-menu-bar { right: 340px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioGlobalControls { right: 428px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > [data-workspace-command="panel-export"], #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > #draw2SyncStatus, #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-workspace-command-bar > .draw2-zoom-tools { display: flex !important; } } .draw2-mini-preview[hidden], #draw2WorkspaceFrame[data-creator-mode="AUDIO"] .draw2-mini-preview, #draw2WorkspaceFrame[data-creator-mode="AUDIO"][data-audio-draw-monitor="true"] .draw2-mini-preview { display: none !important; visibility: hidden !important; } @media (min-width: 1120px) { #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] { --draw2-audio-left-width: var( --draw2-audio-left-user-width, clamp(220px, 18vw, 292px) ); --draw2-audio-right-width: var( --draw2-audio-right-user-width, var(--draw2-right-dock-width, clamp(300px, 24vw, 380px)) ); grid-template-columns: minmax(176px, max(176px, var(--draw2-audio-left-width))) minmax(0, 1fr) minmax(280px, max(280px, var(--draw2-audio-right-width))) !important; grid-template-rows: 64px minmax(0, 1fr) 0 var(--draw2-statusbar-height) !important; grid-template-areas: "top top top" "left canvas right" "timeline timeline timeline" "status status status" !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2WorkspaceLeftDock:not([hidden]) { width: var(--draw2-audio-left-width) !important; min-width: var(--draw2-audio-left-width) !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2WorkspaceRightDock { width: var(--draw2-audio-right-width) !important; min-width: 280px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioWorkspace { display: flex !important; flex-direction: column !important; align-content: stretch !important; gap: 0 !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioWorkspace > .draw2-audio-arranger-overview { display: flex !important; flex: 0 0 clamp(240px, 42%, 420px) !important; min-height: 220px !important; height: auto !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioWorkspace > .draw2-audio-editor-header { flex: 0 0 42px !important; min-height: 42px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioWorkspace > .draw2-audio-panel:not([hidden]), #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioWorkspace > .draw2-audio-editor-surface:not([hidden]) { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2WorkspaceTimelineRegion { display: none !important; min-height: 0 !important; height: 0 !important; padding: 0 !important; overflow: hidden !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]:is( [data-mode-deck-tab="audio-library"], [data-mode-deck-tab="audio-mixer"], [data-mode-deck-tab="audio-automation"], [data-mode-deck-tab="audio-fx"], [data-mode-deck-tab="audio-markers"], [data-mode-deck-tab="audio-settings"] ) { grid-template-rows: 64px minmax(0, 1fr) clamp(96px, var(--draw2-timeline-height), 640px) var(--draw2-statusbar-height) !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"]:is( [data-mode-deck-tab="audio-library"], [data-mode-deck-tab="audio-mixer"], [data-mode-deck-tab="audio-automation"], [data-mode-deck-tab="audio-fx"], [data-mode-deck-tab="audio-markers"], [data-mode-deck-tab="audio-settings"] ) #draw2WorkspaceTimelineRegion { display: flex !important; min-height: 96px !important; height: auto !important; padding: 6px 8px 4px !important; overflow: hidden !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2ModeTimelineDeck, #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2ModeDeckAudio:not([hidden]) { display: flex !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioArrangerLanes .draw2-audio-inline-mixer-button, #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioArrangerLanes .draw2-audio-track-delete { visibility: visible !important; pointer-events: auto !important; } } @media (min-width: 1120px) { #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioLeftResize { position: absolute !important; z-index: 40 !important; top: 0 !important; right: -6px !important; bottom: 0 !important; left: auto !important; display: block !important; width: 12px !important; min-width: 12px !important; height: auto !important; cursor: ew-resize !important; pointer-events: auto !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioLeftResize.is-resizing, #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioLeftResize:hover { background: color-mix(in srgb, var(--draw2-mode-accent, #61d9ff) 34%, transparent) !important; } } .draw2-audio-midi-grid[data-audio-roll-visual="strings"] { border-color: color-mix(in srgb, #f2a6d6 62%, var(--draw2-border-subtle)) !important; } .draw2-audio-midi-grid[data-audio-roll-visual="mallet"] { border-color: color-mix(in srgb, #ffaf78 62%, var(--draw2-border-subtle)) !important; } .draw2-audio-midi-grid[data-audio-roll-visual="air"] { border-color: color-mix(in srgb, #9be4ff 62%, var(--draw2-border-subtle)) !important; } .draw2-audio-midi-grid[data-audio-roll-visual="organ"] { border-color: color-mix(in srgb, #7ca8ff 62%, var(--draw2-border-subtle)) !important; } .draw2-audio-midi-grid[data-audio-roll-visual="synth"] { border-color: color-mix(in srgb, #6fe3d1 62%, var(--draw2-border-subtle)) !important; } .draw2-audio-midi-grid[data-audio-roll-visual="chip"] { border-color: color-mix(in srgb, #ff9fda 70%, var(--draw2-border-subtle)) !important; } .draw2-audio-midi-grid[data-audio-roll-visual="chip"] .draw2-audio-midi-canvas { image-rendering: pixelated; } .draw2-audio-drum-grid[data-audio-roll-editor="drum"] { border-color: color-mix(in srgb, #ffbf72 70%, var(--draw2-border-subtle)); background: linear-gradient( 180deg, color-mix(in srgb, #ffbf72 8%, #111522), #111522 ); } @media (min-width: 1120px) { #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"] { grid-template-columns: minmax(196px, 220px) minmax(0, 1fr) minmax(244px, var(--draw2-right-dock-width, 320px)) !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceLeftDock, #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2GameLeftDock { visibility: visible !important; pointer-events: auto !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceLeftDock > .draw2-workspace-panel-launcher { display: none !important; visibility: hidden !important; pointer-events: none !important; } } .draw2-workspace-brand-product { display: inline-flex; align-items: center; min-width: 0; color: var(--draw2-text-strong); font-size: 0.76rem; letter-spacing: 0.02em; white-space: nowrap; } .draw2-workspace-brand-context { display: inline-flex; align-items: center; min-width: 0; max-width: 92px; overflow: hidden; color: var(--draw2-text-muted); font-size: 0.58rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-mode-transition-banner { position: absolute; z-index: 90; top: 48px; left: 50%; display: flex; align-items: center; gap: 8px; max-width: min(440px, calc(100% - 24px)); min-height: 30px; padding: 6px 12px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--draw2-mode-accent, var(--draw2-accent)) 62%, var(--draw2-border-strong)); border-radius: 999px; background: color-mix(in srgb, var(--draw2-surface-raised) 94%, #05070b); box-shadow: 0 10px 30px rgb(0 0 0 / 28%); color: var(--draw2-text-strong); pointer-events: none; transform: translate(-50%, -4px); white-space: nowrap; animation: draw2-mode-transition-in 420ms cubic-bezier(.2, .8, .2, 1) both; } .draw2-mode-transition-banner strong { color: var(--draw2-mode-accent, var(--draw2-accent)); font-size: 0.68rem; letter-spacing: 0.06em; } .draw2-mode-transition-banner span { min-width: 0; overflow: hidden; color: var(--draw2-text-muted); font-size: 0.62rem; text-overflow: ellipsis; } #draw2WorkspaceFrame.is-mode-transitioning .draw2-workspace-topbar { animation: draw2-mode-shell-pulse 420ms ease both; } #draw2WorkspaceFrame.is-mode-transitioning .draw2-workspace-canvas-region, #draw2WorkspaceFrame.is-mode-transitioning .draw2-workspace-left-dock, #draw2WorkspaceFrame.is-mode-transitioning .draw2-workspace-right-dock, #draw2WorkspaceFrame.is-mode-transitioning .draw2-workspace-timeline-region { animation: draw2-mode-surface-enter 260ms cubic-bezier(.2, .8, .2, 1) both; } #draw2WorkspaceFrame.is-mode-transitioning .draw2-workspace-right-dock { animation-delay: 24ms; } #draw2WorkspaceFrame.is-mode-transitioning .draw2-workspace-timeline-region { animation-delay: 46ms; } @keyframes draw2-mode-transition-in { from { opacity: 0; transform: translate(-50%, -10px) scale(.96); } 55% { opacity: 1; transform: translate(-50%, 0) scale(1); } to { opacity: 0; transform: translate(-50%, -2px) scale(.99); } } @keyframes draw2-mode-shell-pulse { 0%, 100% { box-shadow: none; } 42% { box-shadow: inset 0 -2px 0 var(--draw2-mode-accent, var(--draw2-accent)); } } @keyframes draw2-mode-surface-enter { from { opacity: .72; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .draw2-mode-transition-banner, #draw2WorkspaceFrame.is-mode-transitioning .draw2-workspace-topbar, #draw2WorkspaceFrame.is-mode-transitioning .draw2-workspace-canvas-region, #draw2WorkspaceFrame.is-mode-transitioning .draw2-workspace-left-dock, #draw2WorkspaceFrame.is-mode-transitioning .draw2-workspace-right-dock, #draw2WorkspaceFrame.is-mode-transitioning .draw2-workspace-timeline-region { animation: none !important; transform: none !important; } } #draw2WorkspaceFrame[data-creator-mode="GAME"] #draw2WorkspacePaletteStrip[hidden], #draw2WorkspaceFrame[data-creator-mode="GAME"] #draw2WorkspacePaletteResize[hidden] { display: none !important; visibility: hidden !important; pointer-events: none !important; } #draw2WorkspaceFrame[data-creator-mode="GAME"] #draw2WorkspaceLeftDock[hidden] { display: none !important; visibility: hidden !important; pointer-events: none !important; } .draw2-billing-dialog { width: min(720px, calc(100vw - 24px)); max-width: 720px; max-height: min(760px, calc(100dvh - 24px)); overflow: auto; } .draw2-billing-dialog form { display: grid; gap: 14px; } .draw2-billing-dialog-lead { margin: 0; color: var(--draw2-text-muted); font-size: 0.78rem; line-height: 1.6; } .draw2-billing-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .draw2-billing-card, .draw2-billing-scope-card { display: grid; gap: 7px; min-width: 0; padding: 14px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-md); background: var(--draw2-surface-raised); } .draw2-billing-card-included { border-color: color-mix(in srgb, var(--draw2-accent) 45%, var(--draw2-border-subtle)); } .draw2-billing-card-locked { border-color: color-mix(in srgb, var(--draw2-focus) 40%, var(--draw2-border-subtle)); } .draw2-billing-card strong, .draw2-billing-section-heading strong { color: var(--draw2-text-strong); font-size: 0.82rem; } .draw2-billing-card p { min-height: 38px; margin: 0; color: var(--draw2-text-muted); font-size: 0.68rem; line-height: 1.55; } .draw2-billing-card output { color: var(--draw2-accent-strong); font-size: 0.66rem; font-weight: 700; } .draw2-billing-card-locked output { color: var(--draw2-focus); } .draw2-billing-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .draw2-billing-section-heading > div { display: grid; gap: 3px; } .draw2-billing-provider-state { flex: 0 0 auto; padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--draw2-focus) 45%, var(--draw2-border-subtle)); border-radius: 999px; color: var(--draw2-focus); font-size: 0.62rem; white-space: nowrap; } .draw2-billing-scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; color: var(--draw2-text-muted); font-size: 0.64rem; } .draw2-billing-scope-grid span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .draw2-billing-scope-grid code { color: var(--draw2-text-strong); font-size: 0.62rem; } .draw2-billing-target-field { display: grid; gap: 5px; color: var(--draw2-text-muted); font-size: 0.66rem; } .draw2-billing-target-field select { min-height: 34px; padding-inline: 8px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-strong); } .draw2-billing-status { margin: 0; color: var(--draw2-focus); font-size: 0.68rem; line-height: 1.5; } .draw2-billing-dialog #draw2BillingCheckout:disabled { cursor: not-allowed; opacity: .52; } #draw2GameSceneViewport[hidden] { display: none !important; } #draw2WorkspaceFrame[data-creator-mode="GAME"] #draw2WorkspaceCanvasRegion { display: grid !important; grid-template-rows: minmax(0, 1fr) !important; min-height: 0 !important; overflow: hidden !important; } #draw2WorkspaceFrame[data-creator-mode="GAME"] #draw2GameSceneViewport:not([hidden]) { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 10px; box-sizing: border-box; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-md); background: radial-gradient(circle at 50% 20%, rgb(45 95 128 / 13%), transparent 46%), var(--draw2-surface-canvas); } .draw2-game-scene-viewport-header, .draw2-game-scene-viewport-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; } .draw2-game-scene-viewport-header > div:first-child { display: grid; gap: 2px; min-width: 0; } .draw2-game-scene-viewport-header strong { color: var(--draw2-text-strong); font-size: 0.78rem; } .draw2-game-scene-legend { display: flex; flex: 0 0 auto; gap: 8px; color: var(--draw2-text-muted); font-size: 0.58rem; } .draw2-game-scene-legend-item::before { display: inline-block; width: 9px; height: 9px; margin-right: 4px; border: 1px solid currentColor; content: ""; vertical-align: -1px; } .draw2-game-scene-legend-trigger::before { border-style: dashed; } .draw2-game-scene-viewport-stage { display: grid; place-items: center; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: #0b111b; } .draw2-game-scene-svg { display: block; width: min(100%, 960px); height: 100%; min-height: 0; overflow: visible; touch-action: none; } .draw2-game-scene-map { fill: #101a27; } .draw2-game-scene-grid line { stroke: rgb(120 168 194 / 18%); stroke-width: 0.012; vector-effect: non-scaling-stroke; } .draw2-game-scene-frame { fill: none; stroke: rgb(127 211 255 / 42%); stroke-width: 0.04; vector-effect: non-scaling-stroke; } .draw2-game-scene-tilemap { cursor: pointer; outline: none; } .draw2-game-scene-tilemap-frame { fill: none; stroke: rgb(125 211 252 / 24%); stroke-width: 0.04; pointer-events: none; vector-effect: non-scaling-stroke; } .draw2-game-scene-tilemap-hit { fill: transparent; } .draw2-game-scene-map-cells { pointer-events: none; } .draw2-game-scene-map-cell { pointer-events: all; stroke-width: 0.035; vector-effect: non-scaling-stroke; } .draw2-game-scene-map-cell.is-solid { fill: rgb(125 211 252 / 22%); stroke: rgb(125 211 252 / 66%); } .draw2-game-scene-map-cell.is-trigger { fill: rgb(200 139 255 / 19%); stroke: rgb(200 139 255 / 88%); stroke-dasharray: 0.12 0.08; } .draw2-game-scene-map-cell:hover, .draw2-game-scene-map-cell:focus-visible { fill: rgb(255 255 255 / 26%); stroke: #ffffff; stroke-width: 0.08; } .draw2-game-scene-tilemap text { fill: rgb(186 230 253 / 78%); font-size: 0.28px; font-weight: 700; pointer-events: none; paint-order: stroke; stroke: #0b111b; stroke-width: 0.06px; vector-effect: non-scaling-stroke; } .draw2-game-scene-tilemap.is-selected .draw2-game-scene-tilemap-frame, .draw2-game-scene-tilemap:focus-visible .draw2-game-scene-tilemap-frame, .draw2-game-scene-tilemap:hover .draw2-game-scene-tilemap-frame { stroke: #ffffff; stroke-width: 0.1; } .draw2-game-scene-object { cursor: pointer; outline: none; touch-action: none; } .draw2-game-scene-object text { fill: var(--draw2-text-strong); font-size: 0.28px; font-weight: 700; pointer-events: none; paint-order: stroke; stroke: #0b111b; stroke-width: 0.06px; vector-effect: non-scaling-stroke; } .draw2-game-scene-marker { fill: #7dd3fc; stroke: #e0f2fe; stroke-width: 0.06; vector-effect: non-scaling-stroke; } .draw2-game-scene-object.is-player .draw2-game-scene-marker { fill: #66e3b4; stroke: #d7fff0; } .draw2-game-scene-object.is-npc .draw2-game-scene-marker { fill: #f5b86a; stroke: #fff0d2; } .draw2-game-scene-object.is-camera .draw2-game-scene-marker { fill: #c4b5fd; stroke: #ede9fe; } .draw2-game-scene-object.is-audio .draw2-game-scene-marker { fill: #f0a7e8; stroke: #ffe5fb; } .draw2-game-scene-collider { fill: rgb(87 200 255 / 7%); stroke: rgb(87 200 255 / 80%); stroke-width: 0.06; pointer-events: none; vector-effect: non-scaling-stroke; } .draw2-game-scene-collider.is-trigger { fill: rgb(200 139 255 / 8%); stroke: rgb(200 139 255 / 88%); stroke-dasharray: 0.16 0.1; } .draw2-game-scene-object.is-selected .draw2-game-scene-marker { stroke: #ffffff; stroke-width: 0.12; } .draw2-game-scene-object:focus-visible .draw2-game-scene-marker, .draw2-game-scene-object:hover .draw2-game-scene-marker { stroke: #ffffff; stroke-width: 0.1; } .draw2-game-scene-object.is-inactive { opacity: 0.35; } .draw2-game-scene-viewport-footer { color: var(--draw2-text-muted); font-size: 0.58rem; line-height: 1.4; } .draw2-game-scene-viewport-footer output { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 1120px) { #draw2WorkspaceFrame .draw2-workspace-brand-product { flex: 0 0 auto; } #draw2WorkspaceFrame .draw2-workspace-brand-context { display: none; } } #draw2WorkspaceFrame[data-detail-mode="guided"] [data-detail-level="detailed"] { display: none !important; } #draw2WorkspaceFrame[data-detail-mode="guided"] .draw2-mode-deck-surface[data-mode-deck-surface="audio"] .draw2-audio-advanced-control { display: none !important; } #draw2WorkspaceFrame[data-detail-mode="guided"] .draw2-mode-deck-surface[data-mode-deck-surface="audio"] .draw2-audio-advanced-toggle { display: none !important; } .draw2-workspace-mode-summary { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--draw2-space-2); min-width: 0; } .draw2-workspace-mode-summary > div { display: grid; min-width: 0; gap: 2px; } .draw2-workspace-mode-summary > span:not(.draw2-workspace-detail-toggle-description) { min-width: 0; overflow: hidden; color: var(--draw2-text-muted); font-size: 0.64rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-workspace-detail-toggle { display: grid; min-width: 74px; min-height: 32px; gap: 1px; padding: 4px 7px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); color: var(--draw2-text-strong); cursor: pointer; text-align: left; } .draw2-workspace-detail-toggle:hover, .draw2-workspace-detail-toggle:focus-visible, .draw2-workspace-detail-toggle[aria-pressed="true"] { border-color: var(--draw2-accent-strong); background: color-mix(in srgb, var(--draw2-accent-strong) 14%, var(--draw2-surface-raised)); } .draw2-workspace-detail-toggle:focus-visible { outline: 2px solid var(--draw2-focus-ring); outline-offset: 1px; } .draw2-workspace-detail-toggle-label { font-size: 0.68rem; font-weight: 800; line-height: 1; } .draw2-workspace-detail-toggle-description { overflow: hidden; color: var(--draw2-text-muted); font-size: 0.55rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .draw2-workspace-command-bar > .draw2-workspace-detail-toggle { box-sizing: border-box; display: grid !important; align-content: center; justify-items: center; flex: 0 0 44px; width: 44px; min-width: 44px; max-width: 44px; min-height: 32px; padding: 3px 4px; overflow: hidden; text-align: center; } .draw2-workspace-command-bar > .draw2-workspace-detail-toggle .draw2-workspace-detail-toggle-label { overflow: hidden; max-width: 100%; font-size: 0.62rem; text-overflow: ellipsis; white-space: nowrap; } .draw2-workspace-command-bar > .draw2-workspace-detail-toggle .draw2-workspace-detail-toggle-description { display: none; } @media (min-width: 1120px) { #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] { --draw2-pc-bottom-min-height: 132px; --draw2-pc-bottom-max-height: min(420px, 72dvh); --draw2-pc-bottom-height: clamp( var(--draw2-pc-bottom-min-height), min( var(--draw2-timeline-height, 220px), var(--draw2-pc-bottom-max-height) ), var(--draw2-pc-bottom-max-height) ); grid-template-rows: var(--draw2-pc-topbar-height, 64px) minmax(0, 1fr) var(--draw2-pc-bottom-height) var(--draw2-statusbar-height) !important; grid-template-areas: "top top top" "left canvas right" "timeline timeline timeline" "status status status" !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineRegion { position: relative !important; grid-area: timeline !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: var(--draw2-pc-bottom-min-height) !important; height: 100% !important; padding: 6px 8px !important; overflow: hidden !important; border-top: 1px solid var(--draw2-border-subtle) !important; background: var(--draw2-surface) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineResize { position: absolute !important; z-index: 40 !important; top: -6px !important; right: 0 !important; left: 0 !important; width: 100% !important; min-width: 0 !important; height: 12px !important; min-height: 12px !important; cursor: row-resize !important; touch-action: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck[hidden], #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot[hidden] { display: none !important; flex: 0 0 0 !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck:not([hidden]) { display: grid !important; grid-template-rows: 30px 30px minmax(0, 1fr) !important; flex: 1 1 auto !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; gap: 0 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid var(--draw2-border-subtle) !important; border-radius: var(--draw2-radius-md) !important; background: color-mix(in srgb, var(--draw2-surface) 94%, #05070b) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-timeline-deck-heading { display: flex !important; grid-row: 1 !important; align-items: center !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 30px !important; height: 30px !important; padding: 0 8px !important; gap: 8px !important; overflow: hidden !important; border-bottom: 1px solid var(--draw2-border-subtle) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-timeline-deck-heading > div { display: block !important; min-width: 0 !important; overflow: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-timeline-deck-heading .draw2-eyebrow, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-timeline-deck-heading > span { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-timeline-deck-heading strong { display: block !important; overflow: hidden !important; color: var(--draw2-text-strong) !important; font-size: 0.68rem !important; line-height: 30px !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-timeline-deck-tabs { display: flex !important; grid-row: 2 !important; align-items: stretch !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 30px !important; height: 30px !important; padding: 0 4px !important; gap: 2px !important; overflow-x: auto !important; overflow-y: hidden !important; border-bottom: 1px solid var(--draw2-border-subtle) !important; scrollbar-width: thin !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-timeline-deck-tabs > .draw2-mode-timeline-deck-tab { flex: 0 0 auto !important; width: auto !important; min-width: 58px !important; height: 28px !important; min-height: 28px !important; padding: 0 8px !important; border-radius: 3px 3px 0 0 !important; font-size: 0.6rem !important; line-height: 28px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-deck-surface:not([hidden]) { display: flex !important; grid-row: 3 !important; flex: 1 1 auto !important; flex-direction: column !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; gap: 4px !important; padding: 4px 6px 5px !important; overflow: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-deck-surface:not([hidden]) > .draw2-mode-deck-toolbar { display: flex !important; flex: 0 0 30px !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 30px !important; height: 30px !important; flex-wrap: nowrap !important; gap: 4px !important; margin: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: thin !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeDeckGame > .draw2-game-rail-surface:not([hidden]), #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeDeckAudio > .draw2-audio-panel:not([hidden]) { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; min-width: 0 !important; min-height: 0 !important; overflow: auto !important; overscroll-behavior: contain !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeDeckGame > .draw2-mode-deck-status, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeDeckAudio > .draw2-mode-deck-status { flex: 0 0 15px !important; min-width: 0 !important; min-height: 15px !important; height: 15px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot:not([hidden]) { display: flex !important; flex: 1 1 auto !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; overflow: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard { display: grid !important; grid-template-rows: 30px 30px 24px minmax(0, 1fr) !important; flex: 1 1 auto !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; max-height: none !important; gap: 0 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid var(--draw2-border-subtle) !important; border-radius: var(--draw2-radius-md) !important; background: var(--draw2-surface-raised) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard > .draw2-timeline-heading { display: flex !important; grid-row: 1 !important; align-items: center !important; justify-content: space-between !important; box-sizing: border-box !important; min-width: 0 !important; min-height: 30px !important; height: 30px !important; margin: 0 !important; padding: 0 8px !important; border: 0 !important; background: transparent !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard > .draw2-timeline-heading::before { content: "Timeline" !important; color: var(--draw2-text-strong) !important; font-size: 0.68rem !important; font-weight: 750 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard .draw2-timeline-heading-content, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard #draw2TimelineStatus { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard #draw2TimelineCollapse { display: grid !important; place-items: center !important; width: 26px !important; min-width: 26px !important; height: 26px !important; min-height: 26px !important; padding: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard > .draw2-timeline-tabs-shell { display: grid !important; grid-template-columns: minmax(0, 1fr) 138px !important; grid-row: 2 !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 30px !important; height: 30px !important; overflow: hidden !important; border-bottom: 1px solid var(--draw2-border-subtle) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard #draw2TimelineTabs { display: flex !important; grid-column: 1 !important; min-width: 0 !important; min-height: 30px !important; height: 30px !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: thin !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard #draw2TimelineTabs .draw2-timeline-tab { flex: 0 0 auto !important; height: 28px !important; min-height: 28px !important; padding: 0 9px !important; border-radius: 3px 3px 0 0 !important; font-size: 0.58rem !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard #draw2TimelineSecondaryControls { display: grid !important; grid-template-columns: 78px 28px 28px !important; grid-column: 2 !important; align-items: center !important; justify-items: stretch !important; box-sizing: border-box !important; width: 138px !important; min-width: 138px !important; max-width: 138px !important; height: 30px !important; min-height: 30px !important; padding: 1px 2px !important; gap: 2px !important; overflow: visible !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard #draw2TimelineSecondaryControls .draw2-timeline-rate { display: grid !important; grid-template-columns: 20px 54px !important; align-items: center !important; box-sizing: border-box !important; width: 78px !important; min-width: 78px !important; height: 28px !important; min-height: 28px !important; gap: 4px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard #draw2TimelineSecondaryControls .draw2-timeline-rate > .draw2-sr-only { position: static !important; display: block !important; width: 20px !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; clip: auto !important; line-height: 28px !important; text-align: right !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard #draw2TimelineSecondaryControls .draw2-timeline-rate select { width: 54px !important; min-width: 54px !important; height: 28px !important; min-height: 28px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard #draw2TimelineSecondaryControls #draw2ToggleOnion, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard #draw2TimelineSecondaryControls > .draw2-timeline-onion-options, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard #draw2TimelineSecondaryControls > .draw2-timeline-onion-options > summary { box-sizing: border-box !important; width: 28px !important; min-width: 28px !important; height: 28px !important; min-height: 28px !important; padding: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard > .draw2-timeline-readout { display: flex !important; grid-row: 3 !important; align-items: center !important; gap: 8px !important; box-sizing: border-box !important; min-width: 0 !important; min-height: 24px !important; height: 24px !important; margin: 0 !important; padding: 0 8px !important; overflow: hidden !important; color: var(--draw2-text-muted) !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 0.55rem !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard > .draw2-timeline-readout .draw2-timeline-readout-hint { margin-left: auto !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard > .draw2-timeline-display-actions { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard > .draw2-timeline-tab-panel:not([hidden]) { grid-row: 4 !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard > #draw2TimelinePanelTimeline:not([hidden]) { display: flex !important; flex-direction: column !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard .draw2-timeline-main { display: grid !important; grid-template-columns: minmax(0, 1fr) 0 0 !important; flex: 1 1 auto !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard #draw2TimelineViewport { min-width: 0 !important; min-height: 0 !important; overflow: auto !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"]:has( #draw2WorkspaceTimelineRegion[data-timeline-collapse="collapsed"] ) { grid-template-rows: var(--draw2-pc-topbar-height, 64px) minmax(0, 1fr) 32px var(--draw2-statusbar-height) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineRegion[data-timeline-collapse="collapsed"] { min-height: 32px !important; height: 32px !important; padding: 0 !important; } } @media (min-width: 1120px) { #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] { --draw2-pc-bottom-min-height: 132px; --draw2-pc-bottom-max-height: min(420px, 72dvh); --draw2-pc-bottom-height: clamp( var(--draw2-pc-bottom-min-height), var(--draw2-timeline-height, 220px), var(--draw2-pc-bottom-max-height) ); grid-template-rows: var(--draw2-pc-topbar-height, 64px) minmax(0, 1fr) var(--draw2-pc-bottom-height) var(--draw2-statusbar-height) !important; grid-template-areas: "top top top" "left canvas right" "timeline timeline timeline" "status status status" !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck[hidden], #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot[hidden] { display: none !important; flex: 0 0 0 !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2WorkspaceTimelineRegion { display: flex !important; grid-area: timeline !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: var(--draw2-pc-bottom-min-height) !important; height: 100% !important; padding: 6px 8px 6px !important; overflow: hidden !important; border-top: 1px solid var(--draw2-border-subtle) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineResize { position: absolute !important; z-index: 40 !important; top: -6px !important; right: 0 !important; left: 0 !important; width: 100% !important; min-width: 0 !important; height: 12px !important; min-height: 12px !important; cursor: row-resize !important; pointer-events: auto !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck { display: grid !important; grid-template-rows: 30px 30px minmax(0, 1fr) !important; flex: 1 1 auto !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; gap: 0 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid var(--draw2-border-subtle) !important; border-radius: var(--draw2-radius-md) !important; background: color-mix(in srgb, var(--draw2-surface) 94%, #05070b) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-timeline-deck-heading { display: flex !important; grid-row: 1 !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 30px !important; height: 30px !important; padding: 0 8px !important; gap: 8px !important; overflow: hidden !important; border-bottom: 1px solid var(--draw2-border-subtle) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-timeline-deck-heading > div { display: block !important; min-width: 0 !important; overflow: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-timeline-deck-heading .draw2-eyebrow, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-timeline-deck-heading > span:last-child { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-timeline-deck-heading strong { display: block !important; overflow: hidden !important; color: var(--draw2-text-strong) !important; font-size: 0.68rem !important; line-height: 30px !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-timeline-deck-tabs { display: flex !important; grid-row: 2 !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 30px !important; height: 30px !important; padding: 0 4px !important; gap: 2px !important; overflow-x: auto !important; overflow-y: hidden !important; border-bottom: 1px solid var(--draw2-border-subtle) !important; scrollbar-width: thin !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-timeline-deck-tabs > .draw2-mode-timeline-deck-tab { flex: 0 0 auto !important; width: auto !important; min-width: 58px !important; height: 28px !important; min-height: 28px !important; padding: 0 8px !important; border-radius: 3px 3px 0 0 !important; font-size: 0.6rem !important; line-height: 28px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-deck-surface:not([hidden]) { display: flex !important; grid-row: 3 !important; flex: 1 1 auto !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; gap: 4px !important; padding: 4px 6px 5px !important; overflow: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-deck-surface:not([hidden]) > .draw2-mode-deck-toolbar { flex: 0 0 30px !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 30px !important; height: 30px !important; flex-wrap: nowrap !important; gap: 4px !important; margin: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeDeckGame { padding: 4px 6px 5px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeDeckGame > .draw2-game-rail-surface:not([hidden]) { flex: 1 1 auto !important; min-width: 0 !important; min-height: 0 !important; overflow: auto !important; overscroll-behavior: contain !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeDeckGame > .draw2-mode-deck-status { flex: 0 0 15px !important; min-width: 0 !important; min-height: 15px !important; height: 15px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeDeckAudio > .draw2-audio-panel:not([hidden]) { flex: 1 1 auto !important; min-width: 0 !important; min-height: 0 !important; overflow: auto !important; overscroll-behavior: contain !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot { display: flex !important; flex: 1 1 auto !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; overflow: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard { display: grid !important; grid-template-rows: 30px 30px 24px minmax(0, 1fr) !important; flex: 1 1 auto !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; gap: 0 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid var(--draw2-border-subtle) !important; border-radius: var(--draw2-radius-md) !important; background: color-mix(in srgb, var(--draw2-surface) 94%, #05070b) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2TimelineCard > .draw2-timeline-heading { position: static !important; z-index: auto !important; display: flex !important; grid-row: 1 !important; align-items: center !important; justify-content: space-between !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 30px !important; height: 30px !important; margin: 0 !important; padding: 0 6px !important; overflow: hidden !important; border-bottom: 1px solid var(--draw2-border-subtle) !important; background: transparent !important; pointer-events: auto !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2TimelineCard > .draw2-timeline-heading::before { content: "Timeline" !important; display: block !important; overflow: hidden !important; color: var(--draw2-text-strong) !important; font-size: 0.68rem !important; font-weight: 750 !important; line-height: 30px !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2TimelineCard > .draw2-timeline-heading > #draw2TimelineCollapse { display: grid !important; flex: 0 0 26px !important; place-items: center !important; box-sizing: border-box !important; width: 26px !important; min-width: 26px !important; height: 26px !important; min-height: 26px !important; margin-left: auto !important; padding: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2TimelineCard > .draw2-timeline-heading > .draw2-timeline-heading-content, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2TimelineCard > .draw2-timeline-heading > .draw2-metrics { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2TimelineCard > .draw2-timeline-tabs-shell { display: flex !important; grid-row: 2 !important; align-items: stretch !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 30px !important; height: 30px !important; border-bottom: 1px solid var(--draw2-border-subtle) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2TimelineCard > .draw2-timeline-tabs-shell > #draw2TimelineTabs { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; min-height: 30px !important; height: 30px !important; overflow-x: auto !important; overflow-y: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2TimelineCard > .draw2-timeline-tabs-shell .draw2-timeline-tab { flex: 0 0 auto !important; width: auto !important; min-width: 58px !important; height: 28px !important; min-height: 28px !important; padding: 0 8px !important; border-radius: 3px 3px 0 0 !important; font-size: 0.6rem !important; line-height: 28px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2TimelineSecondaryControls { flex: 0 0 138px !important; width: 138px !important; min-width: 138px !important; height: 30px !important; min-height: 30px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2TimelineCard > .draw2-timeline-readout { display: flex !important; grid-row: 3 !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 24px !important; height: 24px !important; padding: 0 6px !important; overflow: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2TimelineCard > .draw2-timeline-tab-panel:not([hidden]) { grid-row: 4 !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; overflow: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2TimelineCard > #draw2TimelinePanelTimeline { display: flex !important; flex-direction: column !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2TimelineCard .draw2-timeline-main, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2TimelineCard #draw2TimelineViewport { min-width: 0 !important; min-height: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2TimelineCard .draw2-timeline-viewport { overflow: auto !important; } } @media (min-width: 1400px) { #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > .draw2-workspace-detail-toggle { display: grid !important; flex: 0 0 40px !important; width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 32px !important; min-height: 32px !important; } } @media (min-width: 701px) { #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-creator-mode-bar { left: 184px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"] .draw2-workspace-context-row { left: 424px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioGlobalControls { left: 424px !important; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-creator-mode-bar { left: 184px !important; } } @media (min-width: 701px) { #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspacePanelGameScene { scroll-padding-block-start: 8px; } #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2GameCreationMode:not([hidden]) { order: -1; } } #draw2WorkspaceFrame[data-creator-mode="GAME"] { --igame-text-body: 0.82rem; --igame-text-label: 0.75rem; --igame-text-meta: 0.7rem; --igame-control-height: 36px; } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-workspace-panel[data-workspace-panel-content^="game-"] { color: var(--draw2-text-strong); } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-workspace-panel[data-workspace-panel-content^="game-"] .draw2-panel-shell { gap: 14px; padding: 16px; } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-workspace-panel[data-workspace-panel-content^="game-"] .draw2-panel-heading strong { font-size: 1rem; } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-workspace-panel[data-workspace-panel-content^="game-"] .draw2-panel-note, #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-workspace-panel[data-workspace-panel-content^="game-"] .draw2-panel-status { font-size: var(--igame-text-body); line-height: 1.55; } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-workspace-panel[data-workspace-panel-content^="game-"] .draw2-button { min-height: var(--igame-control-height); padding-inline: 11px; font-size: var(--igame-text-label); } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-workspace-tabs { min-width: 0; overflow-x: auto; scrollbar-width: thin; } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-workspace-tab { flex: 0 0 auto; min-height: 40px; padding-inline: 12px; font-size: 0.74rem; } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-game-left-dock { gap: 12px; padding: 16px 12px; } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-game-left-dock-header { min-height: 40px; } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-game-left-dock-header strong { font-size: 0.92rem; } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-game-left-dock-header .draw2-eyebrow { font-size: var(--igame-text-meta); } .draw2-igame-hierarchy-search { display: grid; gap: 6px; min-width: 0; } .draw2-igame-hierarchy-search > span { color: var(--draw2-text-muted); font-size: var(--igame-text-meta); font-weight: 700; } .draw2-igame-hierarchy-search input { box-sizing: border-box; width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-input); color: var(--draw2-text-strong); font-size: var(--igame-text-label); } .draw2-igame-hierarchy-search input:focus-visible { border-color: var(--draw2-focus); outline: 2px solid var(--draw2-focus-ring); outline-offset: 1px; } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-game-hierarchy-entry { min-height: 42px; padding: 8px 10px; } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-game-hierarchy-entry strong { font-size: 0.76rem; } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-game-hierarchy-entry small { font-size: var(--igame-text-meta); } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-game-left-dock .draw2-panel-status { font-size: var(--igame-text-meta); } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-game-scene-viewport:not([hidden]) { gap: 10px; padding: 14px; } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-game-scene-viewport-header { display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr) auto; align-items: center; gap: 12px; } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-game-scene-viewport-header strong { font-size: 0.96rem; } .draw2-igame-scene-header-tools { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; } .draw2-igame-view-toggle { display: inline-flex; flex: 0 0 auto; padding: 3px; border: 1px solid var(--draw2-border-subtle); border-radius: 999px; background: var(--draw2-surface-raised); } .draw2-igame-view-toggle button { min-width: 58px; min-height: 30px; padding: 4px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--draw2-text-muted); font-size: var(--igame-text-meta); font-weight: 800; } .draw2-igame-view-toggle button:hover, .draw2-igame-view-toggle button:focus-visible, .draw2-igame-view-toggle button.is-active { background: var(--draw2-mode-accent-soft, var(--draw2-surface-input)); color: var(--draw2-text-strong); outline: none; } .draw2-igame-scene-name { overflow: hidden; color: var(--draw2-text-muted); font-size: var(--igame-text-meta); text-overflow: ellipsis; white-space: nowrap; } .draw2-igame-scene-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 9px 10px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: color-mix( in srgb, var(--draw2-surface-raised) 76%, transparent ); } .draw2-igame-scene-selection { display: grid; min-width: 0; gap: 3px; } .draw2-igame-scene-selection strong { overflow: hidden; color: var(--draw2-text-strong); font-size: var(--igame-text-label); text-overflow: ellipsis; white-space: nowrap; } .draw2-igame-scene-actions { display: flex; flex: 0 0 auto; gap: 6px; } .draw2-igame-scene-actions .draw2-button { min-height: 32px; font-size: var(--igame-text-meta); } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-game-scene-viewport-stage { min-height: 260px; border-color: color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-border-subtle)) 28%, var(--draw2-border-subtle) ); } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-game-scene-svg { width: min(100%, 1100px); } .draw2-game-scene-sprite { image-rendering: pixelated; pointer-events: none; shape-rendering: crispEdges; } .draw2-game-scene-object.has-sprite .draw2-game-scene-marker { opacity: 0; } #draw2WorkspaceFrame[data-creator-mode="GAME"] svg[data-game-view-mode="GAME"] .draw2-game-scene-grid, #draw2WorkspaceFrame[data-creator-mode="GAME"] svg[data-game-view-mode="GAME"] .draw2-game-scene-collider, #draw2WorkspaceFrame[data-creator-mode="GAME"] svg[data-game-view-mode="GAME"] .draw2-game-scene-object text, #draw2WorkspaceFrame[data-creator-mode="GAME"] svg[data-game-view-mode="GAME"] .draw2-game-scene-tilemap-frame { opacity: 0; } #draw2WorkspaceFrame[data-creator-mode="GAME"] #draw2ModeDeckGame { min-width: 0; padding: 12px 14px 10px; } #draw2WorkspaceFrame[data-creator-mode="GAME"] #draw2ModeDeckGame .draw2-mode-deck-toolbar { flex-wrap: wrap; gap: 8px; } #draw2WorkspaceFrame[data-creator-mode="GAME"] #draw2ModeDeckGame .draw2-mode-deck-toolbar .draw2-button { min-height: 34px; font-size: var(--igame-text-meta); } #draw2WorkspaceFrame[data-creator-mode="GAME"] #draw2WorkspaceQuickControls { display: none !important; } .draw2-igame-asset-action-label { margin-left: auto; color: var(--draw2-text-muted); font-size: var(--igame-text-meta); font-weight: 700; } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-game-system-card-list { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-game-system-card { min-height: 64px; padding: 10px; } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-game-system-card strong { font-size: 0.76rem; } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-game-system-card small { font-size: var(--igame-text-meta); line-height: 1.4; } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-game-asset-catalog { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-height: 280px; gap: 8px; } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-game-asset-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 8px; min-height: 86px; padding: 8px; border: 1px solid var(--draw2-border-subtle); border-radius: var(--draw2-radius-sm); background: var(--draw2-surface-raised); } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-game-asset-card.is-active { border-color: var(--draw2-mode-accent, var(--draw2-accent-strong)); background: color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent-strong)) 10%, var(--draw2-surface-raised) ); } .draw2-game-asset-card-main { display: grid; align-content: start; gap: 5px; min-width: 0; padding: 3px; border: 0; background: transparent; color: var(--draw2-text-strong); text-align: left; } .draw2-game-asset-card-main:hover, .draw2-game-asset-card-main:focus-visible { color: var(--draw2-focus); outline: none; } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-game-asset-card-main .draw2-game-asset-card-head { gap: 8px; } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-game-asset-card-main strong { font-size: 0.76rem; } #draw2WorkspaceFrame[data-creator-mode="GAME"] .draw2-game-asset-card-main small { font-size: var(--igame-text-meta); line-height: 1.35; } .draw2-game-asset-card-action { align-self: end; min-width: 78px; min-height: 32px; padding: 6px 8px; border: 1px solid color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent-strong)) 52%, var(--draw2-border-subtle) ); border-radius: var(--draw2-radius-sm); background: color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent-strong)) 11%, var(--draw2-surface-input) ); color: var(--draw2-text-strong); font-size: var(--igame-text-meta); font-weight: 800; white-space: nowrap; } .draw2-game-asset-card-action:hover, .draw2-game-asset-card-action:focus-visible { border-color: var(--draw2-mode-accent, var(--draw2-accent-strong)); outline: 2px solid var(--draw2-focus-ring); outline-offset: 1px; } @media (min-width: 1120px) { #draw2WorkspaceFrame[data-workspace-profile="desktop"][data-creator-mode="GAME"] { --draw2-timeline-height: clamp(220px, 28dvh, 280px); grid-template-columns: 248px minmax(460px, 1fr) 360px !important; grid-template-rows: 72px minmax(320px, 1fr) var(--draw2-timeline-height) var(--draw2-statusbar-height) !important; } } @media (prefers-reduced-motion: reduce) { #draw2WorkspaceFrame[data-creator-mode="GAME"] *, #draw2WorkspaceFrame[data-creator-mode="GAME"] *::before, #draw2WorkspaceFrame[data-creator-mode="GAME"] *::after { scroll-behavior: auto !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] { --draw2-space-1: 4px; --draw2-space-2: 8px; --draw2-space-3: 12px; --draw2-space-4: 16px; --draw2-space-6: 24px; --draw2-radius-sm: 4px; --draw2-radius-md: 6px; --draw2-radius-lg: 6px; --draw2-canvas-checker-a: #10131b; --draw2-canvas-checker-b: #141a24; --draw2-grid-minor: #2b3647; --draw2-grid-major: #374356; --draw2-panel-divider: color-mix( in srgb, var(--draw2-border-subtle) 78%, transparent ); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } @media (min-width: 1120px) { .draw2-shell:has(#draw2WorkspaceFrame) { width: 100vw !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] { box-sizing: border-box !important; width: 100vw !important; height: 100dvh !important; min-height: 0 !important; max-height: 100dvh !important; margin: 0 !important; overflow: hidden !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; grid-template-columns: 64px minmax(0, 1fr) 332px !important; grid-template-rows: 116px minmax(0, 1fr) clamp(148px, 20dvh, 180px) 28px !important; grid-template-areas: "top top top" "left canvas right" "timeline timeline timeline" "status status status" !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] .draw2-workspace-topbar { position: relative !important; display: block !important; box-sizing: border-box !important; height: 116px !important; min-height: 116px !important; padding: 0 !important; border-bottom: 1px solid var(--draw2-panel-divider) !important; background: var(--draw2-surface) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] .draw2-workspace-global-row { position: absolute !important; inset: 0 0 auto !important; display: grid !important; box-sizing: border-box !important; grid-template-columns: 220px minmax(0, 1fr) minmax(190px, 230px) minmax(320px, 380px) !important; align-items: center !important; gap: 16px !important; width: 100% !important; height: 64px !important; padding: 0 20px !important; border: 0 !important; background: var(--draw2-surface) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] .draw2-workspace-brand { position: static !important; display: grid !important; grid-column: 1 !important; grid-template-columns: 24px minmax(0, 1fr) !important; grid-template-rows: 18px 14px !important; column-gap: 8px !important; row-gap: 2px !important; width: auto !important; max-width: none !important; height: auto !important; min-width: 0 !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] .draw2-brand-logo { grid-row: 1 / -1 !important; align-self: center !important; width: 24px !important; height: 24px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] .draw2-workspace-brand-product { min-width: 0 !important; overflow: hidden !important; color: var(--draw2-text-strong) !important; font-size: 0.78rem !important; font-weight: 750 !important; letter-spacing: 0.01em !important; text-overflow: ellipsis !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] .draw2-workspace-brand-context { display: block !important; overflow: hidden !important; color: var(--draw2-text-muted) !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 0.53rem !important; letter-spacing: 0.08em !important; text-overflow: ellipsis !important; text-transform: uppercase !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] .draw2-workspace-status { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] .draw2-workspace-menu-bar { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceProjectSlot { display: block !important; grid-column: 3 !important; min-width: 0 !important; width: 100% !important; overflow: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceProjectSlot > #draw2ProjectCard { display: block !important; box-sizing: border-box !important; width: 100% !important; height: 40px !important; margin: 0 !important; padding: 5px 6px 5px 10px !important; overflow: hidden !important; border: 1px solid var(--draw2-border-subtle) !important; border-radius: 6px !important; background: var(--draw2-surface-raised) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceProjectSlot .draw2-card-heading, #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceProjectSlot .draw2-action-row, #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceProjectSlot .draw2-help { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceProjectSlot .draw2-controls { display: grid !important; grid-template-columns: minmax(0, 1fr) 30px !important; align-items: center !important; gap: 6px !important; width: 100% !important; height: 28px !important; margin: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceProjectSlot .draw2-controls label:first-child { display: flex !important; align-items: center !important; min-width: 0 !important; gap: 6px !important; margin: 0 !important; color: var(--draw2-text-muted) !important; font-size: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceProjectSlot .draw2-controls label:first-child::before { flex: 0 0 auto !important; content: "PIXEL LAB" !important; color: var(--draw2-accent-strong) !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 0.5rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceProjectSlot #draw2ProjectId { min-width: 0 !important; width: 100% !important; height: 26px !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; background: transparent !important; color: var(--draw2-text-strong) !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 0.59rem !important; text-overflow: ellipsis !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceProjectSlot #draw2CreateProject { display: grid !important; place-items: center !important; width: 30px !important; min-width: 30px !important; height: 28px !important; min-height: 28px !important; padding: 0 !important; border-color: var(--draw2-accent-strong) !important; background: color-mix( in srgb, var(--draw2-accent-strong) 12%, var(--draw2-surface-raised) ) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceProjectSlot #draw2CreateProject .draw2-button-label { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2CreatorModeBar { position: absolute !important; top: 12px !important; left: clamp(250px, 21vw, 326px) !important; display: flex !important; box-sizing: border-box !important; width: clamp(244px, 24vw, 316px) !important; height: 40px !important; min-height: 40px !important; padding: 3px !important; overflow: hidden !important; border: 1px solid var(--draw2-border-subtle) !important; border-radius: 6px !important; background: var(--draw2-surface-raised) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2CreatorModeBar .draw2-creator-mode { flex: 1 1 0 !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; padding: 0 8px !important; border: 0 !important; border-radius: 4px !important; color: var(--draw2-text-muted) !important; font-size: 0.65rem !important; font-weight: 700 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2CreatorModeBar .draw2-creator-mode.is-active { color: var(--draw2-text-strong) !important; background: color-mix( in srgb, var(--draw2-accent-strong) 16%, var(--draw2-surface) ) !important; box-shadow: inset 0 -2px 0 var(--draw2-accent-strong) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2CreatorModeBar .draw2-creator-mode[data-creator-mode="EXPORT"] { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] .draw2-workspace-command-bar { grid-column: 4 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 6px !important; min-width: 0 !important; padding: 0 !important; overflow: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] .draw2-workspace-command-bar > .draw2-icon-button:nth-child(3), #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] .draw2-workspace-command-bar #draw2WorkspacePanelRestore, #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] .draw2-workspace-command-bar .draw2-zoom-tools, #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] .draw2-workspace-command-bar .draw2-theme-control, #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] .draw2-workspace-command-bar .draw2-language-control, #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] .draw2-workspace-command-bar .draw2-icon-button-danger { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] .draw2-workspace-command-bar > .draw2-icon-button, #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] .draw2-workspace-command-bar #draw2WorkspaceDetailToggle, #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] .draw2-workspace-command-bar [aria-label="Open Command Palette"] { flex: 0 0 32px !important; width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] .draw2-workspace-command-bar #draw2WorkspaceDetailToggle { flex-basis: 78px !important; width: 78px !important; padding: 0 8px !important; font-size: 0.58rem !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] .draw2-workspace-command-bar #draw2SyncStatus { flex: 0 1 86px !important; min-width: 70px !important; max-width: 86px !important; height: 28px !important; overflow: hidden !important; border: 1px solid var(--draw2-border-subtle) !important; border-radius: 999px !important; background: var(--draw2-surface-raised) !important; font-size: 0.58rem !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] .draw2-workspace-context-row { position: absolute !important; inset: 64px 0 auto !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; width: 100% !important; height: 52px !important; min-height: 52px !important; padding: 8px 20px !important; gap: 12px !important; overflow: hidden !important; border-top: 1px solid var(--draw2-panel-divider) !important; border-bottom: 1px solid var(--draw2-panel-divider) !important; background: var(--draw2-surface-raised) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] .draw2-workspace-context-row::before { flex: 0 0 196px !important; content: "DRAW / PIXEL EDITOR\AFrame-based raster workspace" !important; white-space: pre !important; color: var(--draw2-text-strong) !important; font-size: 0.66rem !important; font-weight: 750 !important; line-height: 1.45 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] .draw2-workspace-context-row::after { flex: 0 0 auto !important; margin-left: auto !important; content: "⌘K  Commands" !important; color: var(--draw2-text-muted) !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 0.58rem !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceQuickControls { display: flex !important; flex: 1 1 auto !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; height: 36px !important; overflow: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceQuickControls > .draw2-quick-control { flex: 0 1 auto !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; padding: 0 8px !important; border: 1px solid var(--draw2-border-subtle) !important; border-radius: 4px !important; background: var(--draw2-surface) !important; font-size: 0.62rem !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceQuickControls .draw2-quick-control-size { display: flex !important; align-items: center !important; gap: 6px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceQuickControls input, #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceQuickControls select { box-sizing: border-box !important; height: 26px !important; min-height: 26px !important; border-color: var(--draw2-border-subtle) !important; background: var(--draw2-surface-raised) !important; font-size: 0.62rem !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceLeftDock { grid-area: left !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; min-width: 0 !important; min-height: 0 !important; padding: 12px 8px !important; overflow: hidden !important; border-right: 1px solid var(--draw2-panel-divider) !important; background: var(--draw2-surface) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceLeftDock > .draw2-workspace-panel-launcher, #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceLeftDock > .draw2-dock-resize-handle { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceLeftDock > .draw2-workspace-toolbar { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceLeftDock .draw2-tool-group { flex: 0 0 40px !important; width: 48px !important; min-width: 48px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceLeftDock .draw2-tool-group > summary, #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceLeftDock > .draw2-workspace-toolbar > .draw2-tool-button { display: grid !important; box-sizing: border-box !important; place-items: center !important; width: 48px !important; min-width: 48px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; border: 1px solid transparent !important; border-radius: 4px !important; background: transparent !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceLeftDock .draw2-tool-group > summary:hover, #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceLeftDock .draw2-tool-group[open] > summary, #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceLeftDock .draw2-tool-button.is-active { border-color: color-mix( in srgb, var(--draw2-accent-strong) 70%, var(--draw2-border-subtle) ) !important; color: var(--draw2-accent-strong) !important; background: color-mix( in srgb, var(--draw2-accent-strong) 13%, var(--draw2-surface-raised) ) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceLeftDock .draw2-tool-group-summary span, #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceLeftDock > .draw2-workspace-toolbar > .draw2-tool-button span { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2ViewportCenter { margin-top: auto !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceCanvasRegion { position: relative !important; grid-area: canvas !important; box-sizing: border-box !important; min-width: 0 !important; min-height: 0 !important; padding: 16px !important; overflow: hidden !important; background: var(--draw2-surface-canvas) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceCanvasRegion::before { position: absolute !important; z-index: 2 !important; top: 16px !important; left: 16px !important; content: "PIXEL LAB / DRAW\A256 × 256 · Local frame" !important; white-space: pre !important; color: var(--draw2-text-strong) !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 0.57rem !important; line-height: 1.55 !important; pointer-events: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceCanvasRegion::after { position: absolute !important; z-index: 2 !important; right: 16px !important; bottom: 16px !important; content: "Space + drag to pan   100%" !important; color: var(--draw2-text-muted) !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 0.55rem !important; pointer-events: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceCanvasSlot, #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceCanvasSlot > .draw2-canvas-card { position: relative !important; box-sizing: border-box !important; width: 100% !important; height: 100% !important; min-height: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceCanvasSlot > .draw2-canvas-card { display: flex !important; flex-direction: column !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceCanvasSlot .draw2-viewport-wrap { display: grid !important; flex: 1 1 auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 48px 0 28px !important; overflow: hidden !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceCanvasSlot .draw2-canvas-stack { width: var(--draw2-canvas-display-width, min(100%, 520px)) !important; height: var(--draw2-canvas-display-height, auto) !important; max-width: none !important; max-height: none !important; aspect-ratio: auto !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2MiniPreviewRestore { position: absolute !important; z-index: 4 !important; top: 16px !important; right: 16px !important; display: grid !important; width: 82px !important; min-width: 82px !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; border: 1px solid var(--draw2-border-subtle) !important; border-radius: 4px !important; background: var(--draw2-surface-raised) !important; font-size: 0.58rem !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2MiniPreviewRestore::after { content: "Focus" !important; color: var(--draw2-text-strong) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2MiniPreviewRestore .draw2-button-label { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceRightDock { position: relative !important; grid-area: right !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; border-left: 1px solid var(--draw2-panel-divider) !important; background: var(--draw2-surface) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceRightDock::before { flex: 0 0 46px !important; box-sizing: border-box !important; content: "▱  Inspector\A     LOCAL" !important; white-space: pre !important; padding: 8px 16px !important; border-bottom: 1px solid var(--draw2-panel-divider) !important; color: var(--draw2-text-strong) !important; font-size: 0.69rem !important; font-weight: 750 !important; line-height: 1.45 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceRightDock > #draw2WorkspacePaletteStrip { position: relative !important; flex: 0 0 112px !important; box-sizing: border-box !important; width: 100% !important; min-height: 112px !important; padding: 30px 16px 10px !important; overflow: hidden !important; border: 0 !important; border-bottom: 1px solid var(--draw2-panel-divider) !important; background: var(--draw2-surface) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspacePaletteStrip::before { position: absolute !important; top: 9px !important; left: 16px !important; content: "Palette" !important; color: var(--draw2-text-muted) !important; font-size: 0.59rem !important; font-weight: 750 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspacePaletteStrip .draw2-palette-active-color { position: absolute !important; top: 9px !important; right: 16px !important; display: block !important; color: var(--draw2-text-muted) !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 0.54rem !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspacePaletteGrid { display: grid !important; grid-template-columns: repeat(8, minmax(0, 1fr)) !important; gap: 6px !important; width: 100% !important; height: 54px !important; overflow: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspacePaletteGrid .draw2-color, #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspacePaletteGrid .draw2-color-add { width: 100% !important; min-width: 0 !important; height: 24px !important; min-height: 24px !important; border-radius: 3px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceModeSummary { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspacePaletteResize { flex: 0 0 4px !important; width: 100% !important; min-height: 4px !important; height: 4px !important; border: 0 !important; background: transparent !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceRightCustomDock { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; min-height: 0 !important; overflow: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceTabs { display: flex !important; flex: 0 0 36px !important; align-items: stretch !important; gap: 2px !important; min-height: 36px !important; padding: 4px 8px 0 !important; overflow-x: auto !important; border-bottom: 1px solid var(--draw2-panel-divider) !important; background: var(--draw2-surface-raised) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceTabs .draw2-workspace-tab { flex: 0 0 auto !important; height: 32px !important; min-height: 32px !important; padding: 0 10px !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 3px 3px 0 0 !important; background: transparent !important; color: var(--draw2-text-muted) !important; font-size: 0.59rem !important; font-weight: 700 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceTabs .draw2-workspace-tab.is-active { border-bottom-color: var(--draw2-accent-strong) !important; color: var(--draw2-text-strong) !important; background: color-mix( in srgb, var(--draw2-accent-strong) 9%, transparent ) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceRightCustomDock > .draw2-workspace-panel { flex: 1 1 auto !important; min-height: 0 !important; padding: 12px 16px !important; overflow: auto !important; background: var(--draw2-surface) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspacePanelColor .draw2-color-editor { display: grid !important; gap: 10px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspacePanelColor .draw2-color-editor-heading { min-height: 26px !important; padding: 0 !important; border: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspacePanelColor #draw2ColorMap { height: 142px !important; min-height: 142px !important; border: 1px solid var(--draw2-border-subtle) !important; border-radius: 4px !important; background: var(--draw2-surface-raised) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspacePanelColor .draw2-color-sliders { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspacePanelColor .draw2-color-editor-footer { gap: 6px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceTimelineRegion { position: relative !important; grid-area: timeline !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; min-width: 0 !important; min-height: 0 !important; padding: 8px 12px 0 !important; overflow: hidden !important; border-top: 1px solid var(--draw2-panel-divider) !important; background: var(--draw2-surface) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceTimelineSlot, #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard { width: 100% !important; height: 100% !important; min-height: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard { display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2TimelineCard > .draw2-timeline-heading { display: flex !important; flex: 0 0 30px !important; align-items: center !important; justify-content: space-between !important; min-height: 30px !important; margin: 0 !important; padding: 0 4px !important; border: 0 !important; background: transparent !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2TimelineCard > .draw2-timeline-heading::before { content: "Timeline" !important; color: var(--draw2-text-strong) !important; font-size: 0.7rem !important; font-weight: 750 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2TimelineCard .draw2-timeline-heading-content { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2TimelineCard #draw2TimelineCollapse { display: grid !important; width: 26px !important; min-width: 26px !important; height: 26px !important; min-height: 26px !important; padding: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2TimelineCard > .draw2-timeline-tabs-shell { display: flex !important; flex: 0 0 28px !important; align-items: stretch !important; min-height: 28px !important; border-bottom: 1px solid var(--draw2-panel-divider) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2TimelineTabs { display: flex !important; align-items: stretch !important; gap: 2px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2TimelineTabs .draw2-timeline-tab { height: 28px !important; min-height: 28px !important; padding: 0 12px !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 3px 3px 0 0 !important; background: transparent !important; color: var(--draw2-text-muted) !important; font-size: 0.58rem !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2TimelineTabs .draw2-timeline-tab.is-active { border-bottom-color: var(--draw2-accent-strong) !important; color: var(--draw2-text-strong) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2TimelineCard > .draw2-timeline-readout { display: flex !important; flex: 0 0 24px !important; align-items: center !important; gap: 8px !important; min-height: 24px !important; margin: 0 !important; padding: 0 4px !important; color: var(--draw2-text-muted) !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 0.55rem !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2TimelineCard .draw2-timeline-readout-mode { color: var(--draw2-accent-strong) !important; font-weight: 750 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2TimelineCard .draw2-timeline-readout-hint { margin-left: auto !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2TimelineCard > #draw2TimelinePanelTimeline { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; min-height: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2TimelineCard .draw2-timeline-main { display: grid !important; grid-template-columns: minmax(0, 1fr) 0 0 !important; flex: 1 1 auto !important; min-height: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2TimelinePropertiesResize, #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2TimelineLayerProperties { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2TimelineViewport { min-width: 0 !important; min-height: 0 !important; border: 1px solid var(--draw2-panel-divider) !important; border-radius: 4px !important; background: var(--draw2-bg) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2TimelineViewport { --draw2-timeline-label-width: 148px !important; --draw2-timeline-cell-size: 30px !important; --draw2-timeline-cell-width: 30px !important; --draw2-timeline-row-height: 30px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceStatusbar { grid-area: status !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; min-width: 0 !important; min-height: 28px !important; height: 28px !important; padding: 0 20px !important; overflow: hidden !important; border-top: 1px solid var(--draw2-panel-divider) !important; background: var(--draw2-bg) !important; color: var(--draw2-text-muted) !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 0.55rem !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceStatusbarMessage { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceStatusbarMetrics { margin-left: auto !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-creator-mode="DRAW"] #draw2WorkspaceStatusbar .draw2-statusbar-save { display: none !important; } } @media (min-width: 1120px) { .draw2-shell:has(#draw2WorkspaceFrame[data-creator-mode="DRAW"]) > .draw2-workspace { display: none !important; margin: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] { --draw2-left-rail-width: 64px !important; --draw2-tool-dock-width: 64px !important; --draw2-right-dock-width: 332px !important; --draw2-color-dock-width: 332px !important; --draw2-topbar-height: 116px !important; --draw2-statusbar-height: 28px !important; --draw2-timeline-height: 180px; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] { flex: 0 0 100dvh !important; width: 100vw !important; height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; grid-template-columns: 64px minmax(0, 1fr) 332px !important; grid-template-rows: 116px minmax(0, 1fr) 180px 28px !important; grid-template-areas: "top top top" "left canvas right" "timeline timeline timeline" "status status status" !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceLeftDock { width: 100% !important; max-width: none !important; min-width: 0 !important; justify-self: stretch !important; } } @media (min-width: 1120px) and (max-height: 760px) { #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] { --draw2-timeline-height: 148px; grid-template-rows: 116px minmax(0, 1fr) 148px 28px !important; grid-template: "top top top" 116px "left canvas right" minmax(0, 1fr) "timeline timeline timeline" 148px "status status status" 28px / 64px minmax(0, 1fr) 332px !important; } } @media (min-width: 1120px) { #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"][data-workspace-layout="color-left-tools-right"]:not(:has(#draw2WorkspacePanelAssets:not([hidden]))) { --draw2-left-rail-width: 64px !important; --draw2-tool-dock-width: 64px !important; --draw2-right-dock-width: 332px !important; --draw2-color-dock-width: 332px !important; --draw2-topbar-height: 116px !important; --draw2-statusbar-height: 28px !important; --draw2-timeline-height: 180px; grid-template: "top top top" 116px "left canvas right" minmax(0, 1fr) "timeline timeline timeline" 180px "status status status" 28px / 64px minmax(0, 1fr) 332px !important; } } @media (min-width: 1120px) and (max-height: 760px) { #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"][data-workspace-layout="color-left-tools-right"]:not(:has(#draw2WorkspacePanelAssets:not([hidden]))) { --draw2-timeline-height: 148px; grid-template: "top top top" 116px "left canvas right" minmax(0, 1fr) "timeline timeline timeline" 148px "status status status" 28px / 64px minmax(0, 1fr) 332px !important; } } @media (min-width: 1120px) and (max-height: 760px) { #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceCanvasSlot .draw2-canvas-stack { width: var( --draw2-canvas-display-width, min(520px, calc(100dvh - 372px)) ) !important; height: var(--draw2-canvas-display-height, auto) !important; max-width: none !important; max-height: none !important; aspect-ratio: auto !important; } } @media (min-width: 1120px) and (min-height: 761px) { #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceCanvasSlot .draw2-canvas-stack { width: var( --draw2-canvas-display-width, min(520px, calc(100dvh - 404px)) ) !important; height: var(--draw2-canvas-display-height, auto) !important; max-width: none !important; max-height: none !important; aspect-ratio: auto !important; } } @media (min-width: 1120px) { #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] { --draw2-pc-topbar-height: 64px; --draw2-pc-top-brand-width: 168px; --draw2-pc-top-mode-left: 184px; --draw2-pc-top-mode-width: 228px; --draw2-pc-top-context-left: 424px; --draw2-pc-top-command-width: 180px; grid-template-rows: var(--draw2-pc-topbar-height) minmax(0, 1fr) max(140px, var(--draw2-timeline-height)) var(--draw2-statusbar-height) !important; grid-template-areas: "top top top" "left canvas right" "timeline timeline timeline" "status status status" !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"], #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"], #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] { grid-template-rows: var(--draw2-pc-topbar-height) minmax(0, 1fr) max(140px, var(--draw2-timeline-height)) var(--draw2-statusbar-height) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"][data-workspace-layout="color-left-tools-right"]:not(:has(#draw2WorkspacePanelAssets:not([hidden]))), #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"][data-workspace-layout="color-left-tools-right"]:has(#draw2WorkspacePanelAssets:not([hidden])) { grid-template-rows: var(--draw2-pc-topbar-height) minmax(0, 1fr) max(140px, var(--draw2-timeline-height)) var(--draw2-statusbar-height) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-topbar { position: relative !important; display: block !important; box-sizing: border-box !important; width: 100% !important; height: var(--draw2-pc-topbar-height) !important; min-height: var(--draw2-pc-topbar-height) !important; max-height: var(--draw2-pc-topbar-height) !important; padding: 0 !important; overflow: visible !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-global-row { position: relative !important; display: block !important; box-sizing: border-box !important; width: 100% !important; height: var(--draw2-pc-topbar-height) !important; min-height: var(--draw2-pc-topbar-height) !important; max-height: var(--draw2-pc-topbar-height) !important; padding: 0 !important; overflow: visible !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-brand { position: absolute !important; top: 0 !important; left: 8px !important; z-index: 6 !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; width: var(--draw2-pc-top-brand-width) !important; min-width: var(--draw2-pc-top-brand-width) !important; max-width: var(--draw2-pc-top-brand-width) !important; height: var(--draw2-pc-topbar-height) !important; min-height: var(--draw2-pc-topbar-height) !important; gap: 7px !important; overflow: visible !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-brand .draw2-brand-logo { flex: 0 0 28px !important; width: 28px !important; height: 28px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-brand-product { flex: 0 1 auto !important; min-width: 0 !important; overflow: hidden !important; font-size: 0.72rem !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-brand-context, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-status { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-brand .draw2-details-menu { flex: 0 0 32px !important; width: 32px !important; min-width: 32px !important; margin-left: auto !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-menu-bar { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-project-slot { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceProjectSlot { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2CreatorModeBar { position: absolute !important; top: 12px !important; left: var(--draw2-pc-top-mode-left) !important; z-index: 5 !important; display: flex !important; box-sizing: border-box !important; width: var(--draw2-pc-top-mode-width) !important; min-width: var(--draw2-pc-top-mode-width) !important; max-width: var(--draw2-pc-top-mode-width) !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; padding: 3px !important; gap: 3px !important; overflow: hidden !important; border: 1px solid color-mix(in srgb, var(--draw2-mode-accent) 40%, var(--draw2-border)) !important; border-radius: 7px !important; background: #0d131d !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2CreatorModeBar > .draw2-creator-mode { display: flex !important; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; padding: 0 5px !important; border-radius: 4px !important; font-size: 0.62rem !important; gap: 4px !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2CreatorModeBar > .draw2-creator-mode[data-creator-mode="ANIMATE"], #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2CreatorModeBar > .draw2-creator-mode[data-creator-mode="ASSET"], #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2CreatorModeBar > .draw2-creator-mode[data-creator-mode="EXPORT"] { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-context-row { position: absolute !important; top: 12px !important; right: calc(var(--draw2-pc-top-command-width) + 16px) !important; left: var(--draw2-pc-top-context-left) !important; z-index: 4 !important; display: none !important; box-sizing: border-box !important; width: auto !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; padding: 3px 5px !important; gap: 6px !important; overflow: visible !important; border: 1px solid var(--draw2-border) !important; border-radius: 7px !important; background: #0d131d !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-context-row::before, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-context-row::after { display: none !important; content: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] .draw2-workspace-context-row { display: flex !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-context-row .draw2-workspace-quick-controls { display: flex !important; flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; height: 32px !important; min-height: 32px !important; overflow-x: auto !important; overflow-y: visible !important; scrollbar-width: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-context-row .draw2-workspace-quick-controls::-webkit-scrollbar { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-context-row .draw2-quick-control { flex: 0 0 auto !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2AudioGlobalControls { position: absolute !important; top: 12px !important; right: calc(var(--draw2-pc-top-command-width) + 16px) !important; left: var(--draw2-pc-top-context-left) !important; z-index: 4 !important; display: none !important; box-sizing: border-box !important; width: auto !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; padding: 3px 5px !important; gap: 4px !important; overflow-x: auto !important; overflow-y: hidden !important; border: 1px solid var(--draw2-border) !important; border-radius: 7px !important; background: #0d131d !important; scrollbar-width: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2AudioGlobalControls::-webkit-scrollbar { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2AudioGlobalControls > * { flex: 0 0 auto !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-command-bar { position: absolute !important; top: 12px !important; right: 8px !important; z-index: 7 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; box-sizing: border-box !important; width: var(--draw2-pc-top-command-width) !important; min-width: var(--draw2-pc-top-command-width) !important; max-width: var(--draw2-pc-top-command-width) !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; padding: 3px !important; gap: 4px !important; overflow: visible !important; border: 1px solid var(--draw2-border) !important; border-radius: 7px !important; background: #0d131d !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > .draw2-icon-button, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > .draw2-workspace-detail-toggle { flex: 0 0 auto !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > .draw2-icon-button { box-sizing: border-box !important; width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; padding: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > .draw2-workspace-detail-toggle { box-sizing: border-box !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > [data-workspace-command="panel-export"] { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioGlobalControls { display: flex !important; } } @media (min-width: 1400px) { #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] { --draw2-pc-top-command-width: 376px; } } @media (min-width: 1120px) { #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] { height: 100% !important; min-height: 100% !important; max-height: 100% !important; --draw2-pc-top-command-width: 400px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] { grid-template-columns: minmax( 190px, min(250px, max(190px, var(--draw2-audio-left-width, 250px))) ) minmax(0, 1fr) minmax( 280px, min(380px, max(280px, var(--draw2-audio-right-width, 380px))) ) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2WorkspaceLeftDock { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-command-bar { width: var(--draw2-pc-top-command-width) !important; min-width: var(--draw2-pc-top-command-width) !important; max-width: var(--draw2-pc-top-command-width) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > [data-draw2-zoom-tools] { display: flex !important; flex: 0 0 140px !important; width: 140px !important; min-width: 140px !important; max-width: 140px !important; height: 32px !important; min-height: 32px !important; margin-left: auto !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > [data-draw2-zoom-tools] > * { flex: 0 0 auto !important; height: 26px !important; min-height: 26px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] .draw2-workspace-command-bar > [data-draw2-zoom-tools] .draw2-zoom-tool-fit { min-width: 34px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2GameSceneViewport:not([hidden]) { grid-template-rows: 48px 34px minmax(0, 1fr) 20px !important; gap: 6px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-game-scene-viewport-header { grid-row: 1 !important; min-height: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-igame-scene-toolbar { grid-row: 2 !important; box-sizing: border-box !important; height: 34px !important; min-height: 34px !important; padding: 0 10px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-igame-scene-selection { display: flex !important; align-items: center !important; gap: 6px !important; min-width: 0 !important; height: 28px !important; min-height: 28px !important; overflow: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-igame-scene-selection .draw2-eyebrow { flex: 0 0 auto !important; margin: 0 !important; font-size: 0.5rem !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-igame-scene-selection strong { min-width: 0 !important; overflow: hidden !important; font-size: 0.62rem !important; line-height: 1 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-igame-scene-actions { flex: 0 0 auto !important; align-items: center !important; height: 32px !important; min-height: 32px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-game-scene-viewport-stage { grid-row: 3 !important; min-height: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-game-scene-viewport-footer { grid-row: 4 !important; box-sizing: border-box !important; height: 20px !important; min-height: 20px !important; line-height: 20px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-game-systems-heading > small, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-game-system-card > small, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-game-input-action > small { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-game-system-card { min-height: 44px !important; align-content: center !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-workspace-mode-summary > span { display: none !important; } } @media (min-width: 1120px) { #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] { --draw2-pc-bottom-min-height: 132px; --draw2-pc-bottom-max-height: min(420px, 72dvh); --draw2-pc-bottom-height: clamp( var(--draw2-pc-bottom-min-height), min( var(--draw2-timeline-height, 220px), var(--draw2-pc-bottom-max-height) ), var(--draw2-pc-bottom-max-height) ); grid-template-rows: var(--draw2-pc-topbar-height, 64px) minmax(0, 1fr) var(--draw2-pc-bottom-height) var(--draw2-statusbar-height) !important; grid-template-areas: "top top top" "left canvas right" "timeline timeline timeline" "status status status" !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"][data-workspace-layout="color-left-tools-right"]:not( :has(#draw2WorkspacePanelAssets:not([hidden])) ):not( :has(#draw2WorkspaceTimelineRegion[data-timeline-collapse="collapsed"]) ), #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"][data-workspace-layout="color-left-tools-right"]:has( #draw2WorkspacePanelAssets:not([hidden]) ):not( :has(#draw2WorkspaceTimelineRegion[data-timeline-collapse="collapsed"]) ) { grid-template-rows: var(--draw2-pc-topbar-height, 64px) minmax(0, 1fr) var(--draw2-pc-bottom-height) var(--draw2-statusbar-height) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"][data-workspace-layout="color-left-tools-right"]:not( :has(#draw2WorkspacePanelAssets:not([hidden])) ):has( #draw2WorkspaceTimelineRegion[data-timeline-collapse="collapsed"] ), #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"][data-workspace-layout="color-left-tools-right"]:has( #draw2WorkspacePanelAssets:not([hidden]) ):has( #draw2WorkspaceTimelineRegion[data-timeline-collapse="collapsed"] ) { grid-template-rows: var(--draw2-pc-topbar-height, 64px) minmax(0, 1fr) 32px var(--draw2-statusbar-height) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineRegion { position: relative !important; grid-area: timeline !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: var(--draw2-pc-bottom-min-height) !important; height: 100% !important; padding: 6px 8px !important; overflow: hidden !important; border-top: 1px solid var(--draw2-border-subtle) !important; background: var(--draw2-surface) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineResize { position: absolute !important; z-index: 40 !important; top: -6px !important; right: 0 !important; left: 0 !important; width: 100% !important; min-width: 0 !important; height: 12px !important; min-height: 12px !important; cursor: row-resize !important; touch-action: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck[hidden], #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot[hidden] { display: none !important; flex: 0 0 0 !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck:not([hidden]) { display: grid !important; grid-template-rows: 30px 30px minmax(0, 1fr) !important; flex: 1 1 auto !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; gap: 0 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid var(--draw2-border-subtle) !important; border-radius: var(--draw2-radius-md) !important; background: color-mix(in srgb, var(--draw2-surface) 94%, #05070b) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-timeline-deck-heading { display: flex !important; grid-row: 1 !important; align-items: center !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 30px !important; height: 30px !important; padding: 0 8px !important; overflow: hidden !important; border-bottom: 1px solid var(--draw2-border-subtle) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-timeline-deck-heading .draw2-eyebrow, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-timeline-deck-heading > span { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-timeline-deck-heading strong { display: block !important; min-width: 0 !important; overflow: hidden !important; color: var(--draw2-text-strong) !important; font-size: 0.68rem !important; line-height: 30px !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-timeline-deck-tabs { display: flex !important; grid-row: 2 !important; align-items: stretch !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 30px !important; height: 30px !important; padding: 0 4px !important; gap: 2px !important; overflow-x: auto !important; overflow-y: hidden !important; border-bottom: 1px solid var(--draw2-border-subtle) !important; scrollbar-width: thin !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-timeline-deck-tabs > .draw2-mode-timeline-deck-tab { flex: 0 0 auto !important; width: auto !important; min-width: 58px !important; height: 28px !important; min-height: 28px !important; padding: 0 8px !important; border-radius: 3px 3px 0 0 !important; font-size: 0.6rem !important; line-height: 28px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-deck-surface:not([hidden]) { display: flex !important; grid-row: 3 !important; flex: 1 1 auto !important; flex-direction: column !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; gap: 4px !important; padding: 4px 6px 5px !important; overflow: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-deck-surface:not([hidden]) > .draw2-mode-deck-toolbar { display: flex !important; flex: 0 0 30px !important; width: 100% !important; min-width: 0 !important; min-height: 30px !important; height: 30px !important; flex-wrap: nowrap !important; gap: 4px !important; margin: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeDeckGame > .draw2-game-rail-surface:not([hidden]), #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeDeckAudio > .draw2-audio-panel:not([hidden]) { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; min-width: 0 !important; min-height: 0 !important; overflow: auto !important; overscroll-behavior: contain !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeDeckGame > .draw2-mode-deck-status, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeDeckAudio > .draw2-mode-deck-status { flex: 0 0 15px !important; min-width: 0 !important; min-height: 15px !important; height: 15px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot:not([hidden]) { display: flex !important; flex: 1 1 auto !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; overflow: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard { display: grid !important; grid-template-rows: 30px 30px 24px minmax(0, 1fr) !important; flex: 1 1 auto !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; gap: 0 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid var(--draw2-border-subtle) !important; border-radius: var(--draw2-radius-md) !important; background: var(--draw2-surface-raised) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard > .draw2-timeline-heading { display: flex !important; grid-row: 1 !important; align-items: center !important; justify-content: space-between !important; box-sizing: border-box !important; min-width: 0 !important; min-height: 30px !important; height: 30px !important; margin: 0 !important; padding: 0 8px !important; border: 0 !important; background: transparent !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard > .draw2-timeline-heading::before { content: "Timeline" !important; color: var(--draw2-text-strong) !important; font-size: 0.68rem !important; font-weight: 750 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard .draw2-timeline-heading-content, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard #draw2TimelineStatus { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard #draw2TimelineCollapse { display: grid !important; place-items: center !important; width: 26px !important; min-width: 26px !important; height: 26px !important; min-height: 26px !important; padding: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard > .draw2-timeline-tabs-shell { display: grid !important; grid-template-columns: minmax(0, 1fr) 138px !important; grid-row: 2 !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 30px !important; height: 30px !important; overflow: hidden !important; border-bottom: 1px solid var(--draw2-border-subtle) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard #draw2TimelineTabs { display: flex !important; grid-column: 1 !important; min-width: 0 !important; min-height: 30px !important; height: 30px !important; overflow-x: auto !important; overflow-y: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard #draw2TimelineTabs .draw2-timeline-tab { flex: 0 0 auto !important; min-width: 58px !important; height: 28px !important; min-height: 28px !important; padding: 0 9px !important; font-size: 0.58rem !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard #draw2TimelineSecondaryControls { display: grid !important; grid-template-columns: 78px 28px 28px !important; grid-column: 2 !important; align-items: center !important; box-sizing: border-box !important; width: 138px !important; min-width: 138px !important; max-width: 138px !important; height: 30px !important; min-height: 30px !important; padding: 1px 2px !important; gap: 2px !important; overflow: visible !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard #draw2TimelineSecondaryControls .draw2-timeline-rate { display: grid !important; grid-template-columns: 20px 54px !important; align-items: center !important; box-sizing: border-box !important; width: 78px !important; min-width: 78px !important; height: 28px !important; min-height: 28px !important; gap: 4px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard #draw2TimelineSecondaryControls .draw2-timeline-rate > .draw2-sr-only { position: static !important; display: block !important; width: 20px !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; clip: auto !important; line-height: 28px !important; text-align: right !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard #draw2TimelineSecondaryControls .draw2-timeline-rate select { width: 54px !important; min-width: 54px !important; height: 28px !important; min-height: 28px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard #draw2TimelineSecondaryControls #draw2ToggleOnion, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard #draw2TimelineSecondaryControls > .draw2-timeline-onion-options, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard #draw2TimelineSecondaryControls > .draw2-timeline-onion-options > summary { box-sizing: border-box !important; width: 28px !important; min-width: 28px !important; height: 28px !important; min-height: 28px !important; padding: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard > .draw2-timeline-readout { display: flex !important; grid-row: 3 !important; align-items: center !important; gap: 8px !important; box-sizing: border-box !important; min-width: 0 !important; min-height: 24px !important; height: 24px !important; margin: 0 !important; padding: 0 8px !important; overflow: hidden !important; font-size: 0.55rem !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard > .draw2-timeline-readout .draw2-timeline-readout-hint { margin-left: auto !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard > .draw2-timeline-display-actions { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard > .draw2-timeline-tab-panel:not([hidden]) { grid-row: 4 !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard > #draw2TimelinePanelTimeline:not([hidden]) { display: flex !important; flex-direction: column !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"]:has( #draw2WorkspaceTimelineRegion[data-timeline-collapse="collapsed"] ) { grid-template-rows: var(--draw2-pc-topbar-height, 64px) minmax(0, 1fr) 32px var(--draw2-statusbar-height) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineRegion[data-timeline-collapse="collapsed"] { min-height: 32px !important; height: 32px !important; padding: 0 !important; } } @media (min-width: 1120px) { #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] { --studio-window-radius: 4px; --studio-card-radius: 3px; --studio-control-radius: 3px; --studio-window-gap: 8px; --studio-window-padding: 10px; --studio-control-height: 30px; --studio-window-border: var(--draw2-border-subtle, var(--draw2-border)); --studio-control-border: var(--draw2-border, var(--draw2-border-subtle)); --studio-control-surface: var(--draw2-surface-raised, var(--draw2-surface)); --studio-input-surface: var(--draw2-surface-input, var(--studio-control-surface)); } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is( .draw2-workspace-left-dock, .draw2-workspace-right-dock, .draw2-workspace-canvas-region, .draw2-workspace-panel:not([hidden]), .draw2-canvas-card:not([hidden]), .draw2-panel-shell, .draw2-game-scene-viewport:not([hidden]), #draw2AudioArrangerOverview, #draw2AudioLeftDock, #draw2AudioRightDock, #draw2ModeTimelineDeck:not([hidden]), #draw2TimelineCard ) { box-sizing: border-box !important; border: 1px solid var(--studio-window-border) !important; border-radius: var(--studio-window-radius) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is( .draw2-panel-shell, .draw2-game-scene-viewport, #draw2AudioArrangerOverview, #draw2AudioLeftDock, #draw2AudioRightDock, #draw2ModeTimelineDeck, #draw2TimelineCard ) { min-width: 0 !important; min-height: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is( .draw2-panel-heading, .draw2-game-scene-viewport-header, .draw2-audio-arranger-header, .draw2-audio-left-dock-header, .draw2-audio-right-tabs, .draw2-audio-editor-header, .draw2-mode-timeline-deck-heading, .draw2-timeline-heading, .draw2-game-left-dock-header, .draw2-game-right-dock-header ) { box-sizing: border-box !important; border-bottom: 1px solid var(--studio-window-border) !important; background: color-mix( in srgb, var(--draw2-surface-raised, var(--draw2-surface)) 48%, var(--draw2-surface) ) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is( .draw2-menu-popover, .draw2-details-popover, .draw2-sync-popover, .draw2-brush-options-flyout, .draw2-right-panel-picker, .draw2-audio-dock-picker, .draw2-audio-track-add-popover, .draw2-timeline-more-popover, .draw2-timeline-onion-popover, .draw2-tool-popover, .draw2-export-panel ) { box-sizing: border-box !important; border: 1px solid var(--studio-window-border) !important; border-radius: var(--studio-window-radius) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is( .draw2-button, .draw2-icon-button, .draw2-tool-button, .draw2-panel-launcher, .draw2-workspace-panel-launcher, .draw2-panel-close, .draw2-panel-picker-close, .draw2-asset-builder-close, .draw2-audio-dock-card-close, .draw2-audio-daw-action, .draw2-audio-daw-sync-button, .draw2-audio-bar-button, .draw2-audio-inline-mixer-button, .draw2-audio-dock-add ) { box-sizing: border-box !important; border-radius: var(--studio-control-radius) !important; line-height: 1.1 !important; text-overflow: ellipsis !important; white-space: nowrap !important; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is( .draw2-button-secondary, .draw2-icon-button:not(.draw2-icon-button-danger), .draw2-panel-launcher:not(.is-active), .draw2-workspace-panel-launcher:not(.is-active), .draw2-panel-close, .draw2-panel-picker-close, .draw2-asset-builder-close, .draw2-audio-daw-action:not(.is-primary):not(.is-danger), .draw2-audio-daw-sync-button, .draw2-audio-bar-button, .draw2-audio-inline-mixer-button ) { border-color: var(--studio-control-border) !important; background: var(--studio-control-surface) !important; color: var(--draw2-text-strong) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is( .draw2-button-secondary, .draw2-icon-button:not(.draw2-icon-button-danger), .draw2-panel-launcher:not(.is-active), .draw2-workspace-panel-launcher:not(.is-active), .draw2-panel-close, .draw2-panel-picker-close, .draw2-asset-builder-close, .draw2-audio-daw-action:not(.is-primary):not(.is-danger), .draw2-audio-daw-sync-button, .draw2-audio-bar-button, .draw2-audio-inline-mixer-button ):hover { border-color: color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent-strong)) 62%, var(--studio-control-border) ) !important; background: color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent-strong)) 10%, var(--studio-control-surface) ) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is( .draw2-button, .draw2-icon-button, .draw2-tool-button, .draw2-panel-launcher, .draw2-workspace-panel-launcher, .draw2-panel-close, .draw2-panel-picker-close, .draw2-asset-builder-close, .draw2-audio-dock-card-close, .draw2-audio-daw-action, .draw2-audio-daw-sync-button, .draw2-audio-bar-button, .draw2-audio-inline-mixer-button ):focus-visible { outline: 2px solid color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent-strong)) 72%, transparent ) !important; outline-offset: 1px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is( .draw2-button, .draw2-icon-button, .draw2-tool-button, .draw2-panel-launcher, .draw2-workspace-panel-launcher, .draw2-panel-close, .draw2-panel-picker-close, .draw2-asset-builder-close, .draw2-audio-dock-card-close, .draw2-audio-daw-action, .draw2-audio-daw-sync-button, .draw2-audio-bar-button, .draw2-audio-inline-mixer-button ):active { transform: translateY(1px) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is( .draw2-workspace-tab, .draw2-mode-timeline-deck-tab, .draw2-timeline-tab, .draw2-audio-editor-tab, .draw2-audio-right-tab ) { box-sizing: border-box !important; min-height: 28px !important; border: 1px solid transparent !important; border-radius: var(--studio-card-radius) !important; background: transparent !important; color: var(--draw2-text-muted) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is( .draw2-workspace-tab.is-active, .draw2-mode-timeline-deck-tab.is-active, .draw2-timeline-tab.is-active, .draw2-audio-editor-tab.is-active, .draw2-audio-right-tab.is-active, .draw2-workspace-tab[aria-selected="true"], .draw2-mode-timeline-deck-tab[aria-selected="true"], .draw2-timeline-tab[aria-selected="true"], .draw2-audio-editor-tab[aria-selected="true"], .draw2-audio-right-tab[aria-selected="true"] ) { border-color: color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent-strong)) 64%, var(--studio-window-border) ) !important; background: color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent-strong)) 13%, var(--draw2-surface-raised, var(--draw2-surface)) ) !important; color: var(--draw2-text-strong) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-timeline-deck-tabs > .draw2-mode-timeline-deck-tab, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2TimelineCard #draw2TimelineTabs .draw2-timeline-tab { min-height: 28px !important; border: 1px solid transparent !important; border-radius: var(--studio-card-radius) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTimelineSlot > #draw2TimelineCard #draw2TimelineTabs .draw2-timeline-tab { border-radius: var(--studio-card-radius) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2ModeTimelineDeck > .draw2-mode-timeline-deck-tabs > .draw2-mode-timeline-deck-tab.is-active, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2TimelineCard #draw2TimelineTabs .draw2-timeline-tab.is-active { border-color: color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent-strong)) 64%, var(--studio-window-border) ) !important; background: color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent-strong)) 13%, var(--draw2-surface-raised, var(--draw2-surface)) ) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is( input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea ) { box-sizing: border-box !important; min-height: var(--studio-control-height) !important; border: 1px solid var(--studio-control-border) !important; border-radius: var(--studio-control-radius) !important; background: var(--studio-input-surface) !important; color: var(--draw2-text-strong) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is( input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea ):focus { border-color: color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent-strong)) 68%, var(--studio-control-border) ) !important; outline: 2px solid color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent-strong)) 18%, transparent ) !important; outline-offset: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is(input[type="range"], input[type="checkbox"], input[type="radio"]) { accent-color: var(--draw2-mode-accent, var(--draw2-accent-strong)) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is( .draw2-panel-action-row, .draw2-mode-deck-toolbar, .draw2-timeline-toolbar, .draw2-audio-daw-actions, .draw2-audio-daw-sync, .draw2-asset-builder-preview-controls, .draw2-game-scene-actions, .draw2-game-inspector-actions ) { align-items: center !important; gap: var(--studio-window-gap) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is( .draw2-panel-action-row, .draw2-mode-deck-toolbar, .draw2-timeline-toolbar, .draw2-audio-daw-actions, .draw2-audio-daw-sync, .draw2-asset-builder-preview-controls, .draw2-game-scene-actions, .draw2-game-inspector-actions ) > :is( .draw2-button, .draw2-icon-button, .draw2-panel-launcher, .draw2-audio-daw-action, .draw2-audio-daw-sync-button, .draw2-audio-bar-button ) { min-height: var(--studio-control-height) !important; padding-block: 0 !important; padding-inline: 8px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is( .draw2-panel-close, .draw2-panel-picker-close, .draw2-asset-builder-close, .draw2-audio-dock-card-close ) { display: inline-grid !important; place-items: center !important; width: var(--studio-control-height) !important; min-width: var(--studio-control-height) !important; height: var(--studio-control-height) !important; min-height: var(--studio-control-height) !important; padding: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is( .draw2-game-system-card, .draw2-game-asset-card, .draw2-game-hierarchy-entry, .draw2-audio-dock-card, .draw2-audio-right-surface, .draw2-audio-compact-master, .draw2-audio-track-lane-label, .draw2-card, .draw2-selection-card ) { box-sizing: border-box !important; border-color: var(--studio-window-border) !important; border-radius: var(--studio-card-radius) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is( .draw2-workspace-panel, .draw2-game-left-dock, .draw2-game-right-dock, .draw2-audio-panel, .draw2-audio-fx-panel, .draw2-audio-panel-list ) { min-width: 0 !important; } } @media (min-width: 1120px) { #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] { --studio-right-rail-width: var( --draw2-audio-right-width, var( --draw2-audio-right-user-width, var(--draw2-right-dock-width, 360px) ) ) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"]:not(:has(#draw2WorkspacePanelAssets:not([hidden]))), #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"], #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] { grid-template-columns: 64px minmax(0, 1fr) var(--studio-right-rail-width) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"][data-workspace-layout="color-left-tools-right"]:not(:has(#draw2WorkspacePanelAssets:not([hidden]))) { grid-template-columns: 64px minmax(0, 1fr) var(--studio-right-rail-width) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] { grid-template-columns: 248px minmax(0, 1fr) var(--studio-right-rail-width) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] { grid-template-columns: 250px minmax(0, 1fr) var(--studio-right-rail-width) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"].is-right-dock-collapsed[data-creator-mode="DRAW"] { grid-template-columns: 64px minmax(0, 1fr) 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"].is-right-dock-collapsed[data-creator-mode="GAME"] { grid-template-columns: 248px minmax(0, 1fr) 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"].is-right-dock-collapsed[data-creator-mode="AUDIO"] { grid-template-columns: 250px minmax(0, 1fr) 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceRightDock { position: relative !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: var(--studio-window-gap, 8px) !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; padding: var(--studio-window-padding, 10px) !important; overflow: hidden !important; border: 1px solid var(--studio-window-border) !important; border-radius: var(--studio-window-radius) !important; background: var(--draw2-surface) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceRightResize { position: absolute !important; top: 0 !important; right: auto !important; bottom: 0 !important; left: -7px !important; z-index: 20 !important; box-sizing: border-box !important; width: 14px !important; height: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; cursor: col-resize !important; touch-action: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceRightResize::before { position: absolute; top: 50%; left: 6px; width: 2px; height: 42px; border-radius: 2px; background: color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent-strong)) 46%, var(--studio-window-border) ); content: ""; opacity: 0.52; transform: translateY(-50%); transition: height 120ms ease, opacity 120ms ease; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceRightResize:hover::before, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceRightResize:focus-visible::before, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceRightResize.is-resizing::before { height: 64px; opacity: 0.95; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceRightCustomDock { box-sizing: border-box !important; display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; overflow: hidden !important; border: 1px solid var(--studio-window-border) !important; border-radius: var(--studio-window-radius) !important; background: var(--draw2-surface-raised, var(--draw2-surface)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTabs { box-sizing: border-box !important; display: flex !important; flex: 0 0 auto !important; align-items: stretch !important; gap: 4px !important; min-width: 0 !important; min-height: 36px !important; height: auto !important; padding: 4px !important; overflow-x: auto !important; overflow-y: hidden !important; border-bottom: 1px solid var(--studio-window-border) !important; background: color-mix( in srgb, var(--draw2-surface-raised, var(--draw2-surface)) 72%, var(--draw2-surface) ) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTabs > * { box-sizing: border-box !important; flex: 0 0 auto !important; min-width: 0 !important; min-height: 28px !important; height: 28px !important; max-width: 100% !important; padding: 0 8px !important; overflow: hidden !important; border: 1px solid transparent !important; border-radius: var(--studio-card-radius) !important; line-height: 1.1 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTabs > *:is(.is-active, [aria-selected="true"]) { border-color: color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent-strong)) 64%, var(--studio-window-border) ) !important; background: color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent-strong)) 13%, var(--draw2-surface-raised, var(--draw2-surface)) ) !important; color: var(--draw2-text-strong) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceRightCustomDock .draw2-workspace-panel:not([hidden]) { box-sizing: border-box !important; flex: 1 1 auto !important; min-width: 0 !important; min-height: 0 !important; overflow: auto !important; border: 1px solid var(--studio-window-border) !important; border-radius: var(--studio-card-radius) !important; background: var(--draw2-surface) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceRightCustomDock { order: 1 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspacePaletteResize { order: 2 !important; flex: 0 0 4px !important; width: 100% !important; height: 4px !important; min-height: 4px !important; margin: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspacePaletteStrip { order: 3 !important; flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow: hidden !important; border: 1px solid var(--studio-window-border) !important; border-radius: var(--studio-card-radius) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceModeSummary:not([hidden]) { order: 1 !important; box-sizing: border-box !important; display: grid !important; flex: 0 0 44px !important; min-width: 0 !important; min-height: 44px !important; padding: 7px 9px !important; overflow: hidden !important; border: 1px solid var(--studio-window-border) !important; border-radius: var(--studio-window-radius) !important; background: color-mix( in srgb, var(--draw2-surface-raised, var(--draw2-surface)) 72%, var(--draw2-surface) ) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceModeSummary .draw2-eyebrow { margin-bottom: 2px !important; line-height: 1 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceModeSummaryLabel { line-height: 1.1 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceRightCustomDock { order: 2 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceTabs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-auto-rows: 28px !important; flex: 0 0 auto !important; min-height: 64px !important; height: 64px !important; overflow: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceTabs > * { width: auto !important; max-width: none !important; padding-inline: 6px !important; font-size: 0.68rem !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioRightDock:not([hidden]) { order: 1 !important; box-sizing: border-box !important; display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; gap: 4px !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid var(--studio-window-border) !important; border-radius: var(--studio-window-radius) !important; background: var(--draw2-surface-raised, var(--draw2-surface)) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioRightTabs { box-sizing: border-box !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; flex: 0 0 38px !important; gap: 4px !important; min-width: 0 !important; min-height: 38px !important; height: 38px !important; padding: 4px !important; overflow: hidden !important; border-bottom: 1px solid var(--studio-window-border) !important; background: color-mix( in srgb, var(--draw2-surface-raised, var(--draw2-surface)) 72%, var(--draw2-surface) ) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioRightTabs > .draw2-audio-right-tab { box-sizing: border-box !important; width: auto !important; min-width: 0 !important; min-height: 28px !important; height: 28px !important; padding: 0 6px !important; overflow: hidden !important; border: 1px solid transparent !important; border-radius: var(--studio-card-radius) !important; line-height: 1.1 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioRightTabs > .draw2-audio-right-tab.is-active { border-color: color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent-strong)) 64%, var(--studio-window-border) ) !important; background: color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent-strong)) 13%, var(--draw2-surface-raised, var(--draw2-surface)) ) !important; color: var(--draw2-text-strong) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioCompactMaster { box-sizing: border-box !important; flex: 0 0 52px !important; min-width: 0 !important; min-height: 52px !important; overflow: hidden !important; border: 1px solid var(--studio-window-border) !important; border-radius: var(--studio-card-radius) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioRightDock .draw2-audio-right-surface:not([hidden]) { box-sizing: border-box !important; flex: 1 1 auto !important; min-width: 0 !important; min-height: 0 !important; overflow: auto !important; border: 1px solid var(--studio-window-border) !important; border-radius: var(--studio-card-radius) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"].is-focus-mode #draw2WorkspaceRightDock { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"].is-right-dock-collapsed #draw2WorkspaceRightDock { width: 0 !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; gap: 0 !important; } } @media (min-width: 1120px) { #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTabs > .draw2-workspace-tab[hidden][aria-hidden="true"] { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceColorEditor { grid-template-rows: auto auto auto auto auto !important; container-type: inline-size !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspacePanelColor #draw2ColorMap { width: min(100%, clamp(180px, 68cqw, 300px)) !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 1 / 1 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceRightDock > #draw2WorkspacePaletteStrip.draw2-palette-strip { flex: 0 0 auto !important; min-height: 0 !important; height: auto !important; padding: 26px 10px 8px !important; overflow: visible !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceRightDock > #draw2WorkspacePaletteStrip > #draw2WorkspacePaletteGrid.draw2-palette-grid { height: auto !important; max-height: none !important; grid-auto-rows: auto !important; overflow: visible !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceRightDock > #draw2WorkspacePaletteStrip > #draw2WorkspacePaletteGrid.draw2-palette-grid { grid-template-columns: repeat(auto-fill, var(--studio-palette-swatch-size, 32px)) !important; grid-auto-rows: var(--studio-palette-swatch-size, 32px) !important; justify-content: start !important; align-content: start !important; gap: 6px !important; height: auto !important; max-height: none !important; overflow: visible !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceRightDock > #draw2WorkspacePaletteStrip > #draw2WorkspacePaletteGrid.draw2-palette-grid :is(.draw2-color, .draw2-color-add) { flex: 0 0 var(--studio-palette-swatch-size, 32px) !important; width: var(--studio-palette-swatch-size, 32px) !important; min-width: var(--studio-palette-swatch-size, 32px) !important; max-width: var(--studio-palette-swatch-size, 32px) !important; height: var(--studio-palette-swatch-size, 32px) !important; min-height: var(--studio-palette-swatch-size, 32px) !important; max-height: var(--studio-palette-swatch-size, 32px) !important; aspect-ratio: 1 / 1 !important; } } .draw2-workspace-tab-icon, .draw2-audio-right-tab-icon { display: none !important; } @media (min-width: 1120px) { #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] { --studio-right-rail-padding: 8px; --studio-right-rail-gap: 6px; --studio-right-rail-context-height: 34px; --studio-right-rail-tab-height: 34px; --studio-palette-swatch-size: 32px; --studio-color-picker-min-size: 180px; --studio-color-picker-max-size: 300px; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceRightDock { gap: var(--studio-right-rail-gap) !important; padding: var(--studio-right-rail-padding) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceRightDock::before { display: flex !important; flex: 0 0 var(--studio-right-rail-context-height) !important; align-items: center !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; height: var(--studio-right-rail-context-height) !important; min-height: var(--studio-right-rail-context-height) !important; padding: 0 10px !important; overflow: hidden !important; border: 1px solid var(--studio-window-border) !important; border-radius: var(--studio-card-radius) !important; content: "▱  Inspector · LOCAL" !important; color: var(--draw2-text-strong) !important; font-size: 0.62rem !important; font-weight: 750 !important; line-height: 1 !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceModeSummary:not([hidden]) { display: flex !important; flex: 0 0 var(--studio-right-rail-context-height) !important; align-items: center !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: var(--studio-right-rail-context-height) !important; height: var(--studio-right-rail-context-height) !important; grid-template-columns: none !important; gap: 8px !important; padding: 0 8px !important; overflow: hidden !important; border-radius: var(--studio-card-radius) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceModeSummary > div { display: flex !important; align-items: baseline !important; gap: 6px !important; min-width: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceModeSummary .draw2-eyebrow { margin: 0 !important; line-height: 1 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceModeSummaryLabel { font-size: 0.78rem !important; line-height: 1 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceModeSummary > span:not(.draw2-workspace-detail-toggle-description) { flex: 1 1 auto !important; margin-left: auto !important; overflow: hidden !important; font-size: 0.57rem !important; line-height: 1 !important; text-align: right !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceRightCustomDock .draw2-workspace-panel:not([hidden]) { box-sizing: border-box !important; min-width: 0 !important; max-width: 100% !important; padding: 10px !important; overflow: auto !important; border: 0 !important; border-radius: 0 !important; background: var(--draw2-surface) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTabs { flex: 0 0 var(--studio-right-rail-tab-height) !important; align-items: stretch !important; gap: 3px !important; min-width: 0 !important; min-height: var(--studio-right-rail-tab-height) !important; height: var(--studio-right-rail-tab-height) !important; padding: 3px !important; overflow-x: auto !important; overflow-y: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTabs .draw2-workspace-tab[data-workspace-panel] { display: inline-flex !important; flex: 1 1 0 !important; align-items: center !important; justify-content: center !important; gap: 5px !important; min-width: 0 !important; min-height: 28px !important; height: 28px !important; padding: 0 7px !important; font-size: 0.61rem !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceTabs .draw2-workspace-tab-add { display: inline-flex !important; flex: 0 0 30px !important; align-items: center !important; justify-content: center !important; min-width: 30px !important; width: 30px !important; padding: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is(#draw2WorkspaceTabs .draw2-workspace-tab-icon, #draw2AudioRightTabs .draw2-audio-right-tab-icon) { display: block !important; width: 14px !important; height: 14px !important; flex: 0 0 14px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is(#draw2WorkspaceTabs .draw2-workspace-tab-label, #draw2AudioRightTabs .draw2-audio-right-tab-label) { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceTabs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; grid-auto-flow: row !important; flex: 0 0 60px !important; min-height: 60px !important; height: 60px !important; overflow: hidden !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceTabs > * { width: auto !important; max-width: none !important; min-height: 0 !important; height: auto !important; padding: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceTabs .draw2-workspace-tab[data-workspace-panel] { flex: initial !important; min-height: 0 !important; height: auto !important; padding: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceTabs .draw2-workspace-tab-label { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceTabs .draw2-workspace-tab-icon { width: 15px !important; height: 15px !important; flex-basis: 15px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2ColorMap { width: min(100%, clamp(var(--studio-color-picker-min-size, 180px), 68cqw, var(--studio-color-picker-max-size, 300px))) !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 1 / 1 !important; margin-inline: auto !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2PaletteWheel { width: 100% !important; height: 100% !important; aspect-ratio: 1 / 1 !important; object-fit: contain !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspacePanelColor .draw2-color-sliders { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important; width: 100% !important; min-width: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspacePanelColor .draw2-color-sliders input[type="range"] { width: 100% !important; min-width: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspacePaletteStrip { flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; padding: 26px 10px 8px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspacePaletteGrid { grid-auto-rows: auto !important; align-content: start !important; width: 100% !important; height: auto !important; min-width: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspacePaletteGrid :is(.draw2-color, .draw2-color-add) { width: 100% !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; aspect-ratio: 1 / 1 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceRightDock > #draw2WorkspaceRightCustomDock { order: 1 !important; flex: 1 1 auto !important; min-height: 72px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceRightDock > #draw2WorkspacePaletteResize { order: 2 !important; flex: 0 0 8px !important; width: 100% !important; height: 8px !important; min-height: 8px !important; cursor: row-resize !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceRightDock > #draw2WorkspacePaletteStrip.draw2-palette-strip { order: 3 !important; flex: 0 0 var(--draw2-right-palette-ratio, 30%) !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: 88px !important; max-height: calc(100% - var(--studio-right-rail-context-height) - 8px - 72px - var(--studio-right-rail-gap) - var(--studio-right-rail-gap)) !important; height: auto !important; overflow: auto !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is(.draw2-workspace-panel, .draw2-panel-shell, .draw2-panel-field, .draw2-color-editor, .draw2-audio-right-surface) { min-width: 0 !important; max-width: 100% !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is(.draw2-panel-field > :is(input, select, textarea), .draw2-audio-right-surface input[type="range"], .draw2-audio-right-surface select, .draw2-audio-right-surface textarea) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2WorkspaceRightCustomDock .draw2-panel-shell { gap: 8px !important; padding: 10px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioRightDock:not([hidden]) { gap: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioRightTabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; flex: 0 0 var(--studio-right-rail-tab-height) !important; gap: 3px !important; min-height: var(--studio-right-rail-tab-height) !important; height: var(--studio-right-rail-tab-height) !important; padding: 3px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioRightTabs > .draw2-audio-right-tab { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; min-width: 0 !important; min-height: 28px !important; height: 28px !important; padding: 0 6px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioCompactMaster { flex: 0 0 48px !important; min-height: 48px !important; height: 48px !important; padding: 4px 8px !important; border-right: 0 !important; border-bottom: 1px solid var(--studio-window-border) !important; border-left: 0 !important; border-radius: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioRightDock .draw2-audio-right-surface:not([hidden]) { flex: 1 1 auto !important; min-width: 0 !important; min-height: 0 !important; padding: 10px !important; overflow: auto !important; border: 0 !important; border-radius: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioRightDock .draw2-audio-right-heading { margin-bottom: 8px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioRightDock .draw2-audio-knob { width: 58px !important; height: 58px !important; aspect-ratio: 1 / 1 !important; } } @media (min-width: 1120px) { #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] { --studio-left-rail-icon-width: 64px; --studio-left-rail-game-min: 224px; --studio-left-rail-audio-min: 220px; --studio-left-rail-content-max: 320px; --studio-left-rail-inset: 8px; --studio-left-rail-gap: 6px; --studio-left-rail-control-height: 32px; --studio-left-rail-tool-size: 40px; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"]:not(.is-focus-mode)[data-creator-mode="DRAW"]:not(:has(#draw2WorkspacePanelAssets:not([hidden]))) { grid-template-columns: var(--studio-left-rail-icon-width) minmax(0, 1fr) var(--studio-right-rail-width) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"]:not(.is-focus-mode)[data-creator-mode="GAME"] { grid-template-columns: minmax( var(--studio-left-rail-game-min), min( var(--studio-left-rail-content-max), max(var(--studio-left-rail-game-min), var(--draw2-left-rail-width, 248px)) ) ) minmax(0, 1fr) var(--studio-right-rail-width) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"]:not(.is-focus-mode)[data-creator-mode="AUDIO"] { grid-template-columns: minmax( var(--studio-left-rail-audio-min), min( var(--studio-left-rail-content-max), max(var(--studio-left-rail-audio-min), var(--draw2-audio-left-width, 248px)) ) ) minmax(0, 1fr) var(--studio-right-rail-width) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"]:not(.is-focus-mode).is-right-dock-collapsed[data-creator-mode="DRAW"]:not(:has(#draw2WorkspacePanelAssets:not([hidden]))) { grid-template-columns: var(--studio-left-rail-icon-width) minmax(0, 1fr) 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"]:not(.is-focus-mode).is-right-dock-collapsed[data-creator-mode="GAME"] { grid-template-columns: minmax( var(--studio-left-rail-game-min), min( var(--studio-left-rail-content-max), max(var(--studio-left-rail-game-min), var(--draw2-left-rail-width, 248px)) ) ) minmax(0, 1fr) 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"]:not(.is-focus-mode).is-right-dock-collapsed[data-creator-mode="AUDIO"] { grid-template-columns: minmax( var(--studio-left-rail-audio-min), min( var(--studio-left-rail-content-max), max(var(--studio-left-rail-audio-min), var(--draw2-audio-left-width, 248px)) ) ) minmax(0, 1fr) 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceLeftDock { position: relative !important; z-index: 5 !important; grid-area: left !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; gap: var(--studio-left-rail-gap) !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; padding: var(--studio-left-rail-inset) !important; overflow: visible !important; border: 0 !important; border-right: 1px solid var(--studio-window-border) !important; border-radius: 0 !important; background: var(--draw2-surface) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceLeftDock > .draw2-workspace-panel-launcher{ display: none !important; visibility: hidden !important; pointer-events: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2WorkspaceLeftDock :is(button, input, select, textarea):focus-visible { outline: 2px solid color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent-strong)) 76%, transparent ) !important; outline-offset: 1px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceLeftDock { align-items: center !important; padding: var(--studio-left-rail-inset) 6px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceLeftDock > .draw2-workspace-toolbar { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-width: thin; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceLeftDock .draw2-tool-group, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceLeftDock .draw2-tool-group > summary, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceLeftDock > .draw2-workspace-toolbar > .draw2-tool-button { box-sizing: border-box !important; flex: 0 0 var(--studio-left-rail-tool-size) !important; width: var(--studio-left-rail-tool-size) !important; min-width: var(--studio-left-rail-tool-size) !important; max-width: var(--studio-left-rail-tool-size) !important; height: var(--studio-left-rail-tool-size) !important; min-height: var(--studio-left-rail-tool-size) !important; max-height: var(--studio-left-rail-tool-size) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceLeftDock .draw2-tool-group > summary, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceLeftDock > .draw2-workspace-toolbar > .draw2-tool-button { display: grid !important; place-items: center !important; padding: 0 !important; border: 1px solid transparent !important; border-radius: var(--studio-control-radius) !important; background: transparent !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceLeftDock .draw2-tool-group > summary > span, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceLeftDock > .draw2-workspace-toolbar > .draw2-tool-button > span { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceLeftDock .draw2-tool-group > summary .draw2-tool-icon, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceLeftDock > .draw2-workspace-toolbar > .draw2-tool-button .draw2-tool-icon { width: 18px !important; min-width: 18px !important; height: 18px !important; min-height: 18px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceLeftDock .draw2-tool-group > summary:hover, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceLeftDock .draw2-tool-group[open] > summary, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceLeftDock .draw2-tool-group.is-active > summary, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceLeftDock > .draw2-workspace-toolbar > .draw2-tool-button:hover, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceLeftDock > .draw2-workspace-toolbar > .draw2-tool-button.is-active, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspaceLeftDock > .draw2-workspace-toolbar > .draw2-tool-button[aria-pressed="true"] { border-color: color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent-strong)) 68%, var(--studio-window-border) ) !important; background: color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent-strong)) 13%, var(--draw2-surface-raised) ) !important; color: var(--draw2-text-strong) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2ViewportCenter { margin-top: auto !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is( .draw2-game-left-dock-header, .draw2-audio-left-dock-header ) { box-sizing: border-box !important; flex: 0 0 40px !important; min-width: 0 !important; min-height: 40px !important; height: 40px !important; padding: 4px 6px !important; gap: var(--studio-left-rail-gap) !important; border: 0 !important; border-bottom: 1px solid var(--studio-window-border) !important; border-radius: 0 !important; background: color-mix( in srgb, var(--draw2-surface-raised) 52%, var(--draw2-surface) ) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is( .draw2-game-left-dock-header > div:first-child, .draw2-audio-left-dock-header > div:first-child ) { display: grid !important; gap: 0 !important; min-width: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is( .draw2-game-left-dock-header .draw2-eyebrow, .draw2-audio-left-dock-header .draw2-eyebrow ) { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] :is( .draw2-game-left-dock-header strong, .draw2-audio-left-dock-header strong ) { overflow: hidden !important; color: var(--draw2-text-strong) !important; font-size: 0.78rem !important; line-height: 1.1 !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2GameLeftDock:not([hidden]) { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; gap: var(--studio-left-rail-gap) !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2GameHierarchyAdd, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioDockAdd { display: inline-grid !important; flex: 0 0 var(--studio-left-rail-control-height) !important; place-items: center !important; width: var(--studio-left-rail-control-height) !important; min-width: var(--studio-left-rail-control-height) !important; height: var(--studio-left-rail-control-height) !important; min-height: var(--studio-left-rail-control-height) !important; padding: 0 !important; font-size: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2GameHierarchyAdd .draw2-button-label { display: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-igame-hierarchy-search { position: relative !important; display: block !important; flex: 0 0 var(--studio-left-rail-control-height) !important; min-width: 0 !important; min-height: var(--studio-left-rail-control-height) !important; height: var(--studio-left-rail-control-height) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-igame-hierarchy-search > span { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-igame-hierarchy-search input { width: 100% !important; min-width: 0 !important; min-height: var(--studio-left-rail-control-height) !important; height: var(--studio-left-rail-control-height) !important; padding: 0 8px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2GameHierarchyList { display: grid !important; flex: 1 1 auto !important; align-content: start !important; min-width: 0 !important; min-height: 0 !important; gap: 4px !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-gutter: stable; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-game-hierarchy-entry { min-height: 36px !important; padding: 6px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] :is(.draw2-game-hierarchy-toggle, .draw2-game-hierarchy-toggle-spacer) { min-height: 36px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] .draw2-game-hierarchy-entry[aria-selected="true"] { border-color: var(--draw2-mode-accent, var(--draw2-accent-strong)) !important; background: color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent-strong)) 12%, var(--draw2-surface-raised) ) !important; color: var(--draw2-text-strong) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2GameHierarchyStatus { flex: 0 0 auto !important; max-height: 28px !important; margin: 0 !important; overflow: hidden !important; font-size: 0.56rem !important; line-height: 1.35 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2GameHierarchyAddMenu { max-height: min(360px, calc(100dvh - 180px)) !important; overflow-y: auto !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioLeftDock:not([hidden]) { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; gap: var(--studio-left-rail-gap) !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioDockAdd { flex: 0 0 var(--studio-left-rail-control-height) !important; width: var(--studio-left-rail-control-height) !important; min-width: var(--studio-left-rail-control-height) !important; height: var(--studio-left-rail-control-height) !important; min-height: var(--studio-left-rail-control-height) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioDockPanels { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; min-width: 0 !important; min-height: 0 !important; gap: 5px !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-gutter: stable; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-audio-dock-card-header { min-height: var(--studio-left-rail-control-height) !important; padding: 1px 4px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-audio-dock-card-close { flex: 0 0 var(--studio-left-rail-control-height) !important; width: var(--studio-left-rail-control-height) !important; min-width: var(--studio-left-rail-control-height) !important; height: var(--studio-left-rail-control-height) !important; min-height: var(--studio-left-rail-control-height) !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] .draw2-audio-dock-picker { top: 46px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2AudioLeftResize { position: absolute !important; z-index: 40 !important; top: 0 !important; right: -6px !important; bottom: 0 !important; left: auto !important; display: none !important; box-sizing: border-box !important; width: 12px !important; min-width: 12px !important; height: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; cursor: ew-resize !important; pointer-events: none !important; touch-action: none !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2AudioLeftResize, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioLeftResize { display: block !important; pointer-events: auto !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"] #draw2AudioLeftResize::before { position: absolute; top: 50%; left: 5px; width: 2px; height: 40px; border-radius: 2px; background: color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent-strong)) 46%, var(--studio-window-border) ); content: ""; transform: translateY(-50%); opacity: 0.72; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2AudioLeftResize:hover, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="GAME"] #draw2AudioLeftResize.is-resizing, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioLeftResize:hover, #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="AUDIO"] #draw2AudioLeftResize.is-resizing { background: color-mix( in srgb, var(--draw2-mode-accent, var(--draw2-accent-strong)) 30%, transparent ) !important; } } @media (min-width: 701px) { #draw2WorkspaceFrame.draw2-workspace-frame.is-tool-flyout-open { overflow: visible !important; } #draw2WorkspaceFrame.draw2-workspace-frame.is-tool-flyout-open #draw2WorkspaceLeftDock { position: relative !important; z-index: 10000 !important; overflow: visible !important; } #draw2WorkspaceFrame.draw2-workspace-frame.is-tool-flyout-open #draw2WorkspaceLeftDock > .draw2-workspace-toolbar, #draw2WorkspaceFrame.draw2-workspace-frame.is-tool-flyout-open #draw2WorkspaceLeftDock .draw2-tool-group[open] { position: relative !important; z-index: 10001 !important; overflow: visible !important; } #draw2WorkspaceFrame.draw2-workspace-frame.is-tool-flyout-open #draw2WorkspaceLeftDock .draw2-tool-group[open] > .draw2-tool-popover.is-flyout-positioned { z-index: 10002 !important; } } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"].is-tool-flyout-open #draw2WorkspaceLeftDock > .draw2-workspace-toolbar { overflow: visible !important; } .draw2-palette-grid .draw2-color-add { cursor: grab; touch-action: none; } .draw2-palette-grid .draw2-color-add[data-palette-drag-state="pending"], .draw2-palette-grid .draw2-color-add[data-palette-drag-state="dragging"] { border-color: var(--draw2-accent-strong) !important; color: var(--draw2-accent-strong); } .draw2-palette-grid .draw2-color-add[data-palette-drag-state="dragging"] { cursor: grabbing; box-shadow: 0 0 0 2px color-mix( in srgb, var(--draw2-accent-strong) 30%, transparent ); } .draw2-palette-grid[data-palette-drag-active="true"] { position: relative; z-index: 3; max-height: none !important; overflow: visible !important; } .draw2-palette-grid .draw2-palette-drag-preview { pointer-events: none; border-style: dashed !important; opacity: 0.82; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 34%); } .draw2-palette-grid .draw2-palette-drag-preview[data-palette-drop-target="true"] { border-color: var(--draw2-accent-strong) !important; box-shadow: inset 0 0 0 1px var(--draw2-accent-strong); } .draw2-asset-builder-matrix-details:not([open]) > .draw2-asset-builder-matrix { display: none !important; } .draw2-advanced-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; margin-top: 16px; } .draw2-tool-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 92px; padding: 14px 14px 12px; border: 1px solid var(--draw2-border); border-radius: 12px; background: var(--draw2-surface-raised); color: var(--draw2-text); text-align: left; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease; } .draw2-tool-tile > .draw2-ui-icon { width: 20px; height: 20px; color: var(--draw2-accent); } .draw2-tool-tile-title { font-weight: 800; font-size: 0.86rem; line-height: 1.2; } .draw2-tool-tile-desc { color: var(--draw2-muted); font-size: 0.72rem; line-height: 1.4; } .draw2-tool-tile:hover:not(:disabled), .draw2-tool-tile:focus-visible { border-color: var(--draw2-accent); background: color-mix(in srgb, var(--draw2-surface-raised) 85%, var(--draw2-accent) 15%); transform: translateY(-1px); outline: none; } .draw2-tool-tile:disabled { cursor: not-allowed; opacity: 0.45; transform: none; } .draw2-tool-tile-primary { border-color: var(--draw2-accent); background: color-mix(in srgb, var(--draw2-surface-raised) 78%, var(--draw2-accent) 22%); } .draw2-tool-tile-primary > .draw2-ui-icon { color: var(--draw2-accent-strong, var(--draw2-accent)); } .draw2-tool-tile-primary:hover:not(:disabled), .draw2-tool-tile-primary:focus-visible { background: color-mix(in srgb, var(--draw2-surface-raised) 65%, var(--draw2-accent) 35%); } .draw2-asset-builder-add-card { gap: 6px; } .draw2-asset-builder-add-card-label { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.02em; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspacePanelColor #draw2ColorMap { width: min(100%, var(--draw2-color-map-size, 180px)) !important; height: var(--draw2-color-map-size, 180px) !important; min-height: 0 !important; aspect-ratio: 1 / 1 !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspacePanelColor #draw2PaletteWheel { width: 100% !important; height: 100% !important; aspect-ratio: 1 / 1 !important; object-fit: contain !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspacePanelColor.is-color-wheel-compact .draw2-color-editor { gap: 6px !important; } #draw2WorkspaceFrame.draw2-workspace-frame[data-workspace-profile="desktop"][data-creator-mode="DRAW"] #draw2WorkspacePanelColor.is-color-wheel-compact .draw2-color-editor-heading { display: none !important; }