/* LED graphics studio, v2 (D8, boards 18 and 19). The page sits on the lifted black ground (support-theme in brand.css): the side panels are
   lifted cards, the controls are pills and the stage is pure black. The bead drawing and the colour processing belong to the canvas and are
   untouched; this sheet only dresses the interface around them. Colours, radii and type sizes come from the tokens in brand.css. */
.pixel-page {font-size:var(--fs-small); line-height:1.5}
.pixel-page .rm-mark {font-family:var(--font-brand); font-weight:700; letter-spacing:normal; white-space:nowrap}
.pixel-page h1, .pixel-page h2, .pixel-page h3, .pixel-page p {margin:0}
.pixel-page .sr-only {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
/* Small drawn icons are masks, so they take the colour of the text around them */
.pixel-page {--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E")}

/* ---- Page frame ---- */
.pixel-main {width:calc(100% - var(--section-x) * 2); max-width:var(--section-w); margin:0 auto}
.workspace-heading {display:flex; align-items:center; justify-content:space-between; gap:24px; margin:80px 0 32px}
.workspace-heading h1 {font-size:36px; font-weight:500; letter-spacing:-.03em; line-height:1.2}
.workbench-actions {display:flex; align-items:center; gap:8px}
.workbench-actions .btn {color:var(--text-1); font-size:var(--fs-note)}
.app-container {display:grid; grid-template-columns:300px minmax(0, 1fr) 300px; grid-template-rows:auto auto; gap:0 24px; align-items:start}
.control-panel, .properties-panel {min-width:0; padding:24px}
.properties-panel {padding:28px}
.control-panel {grid-column:1; grid-row:1 / 3}
.properties-panel {grid-column:3; grid-row:1 / 3}
.preview-area {grid-column:2; grid-row:1; min-width:0; display:flex; flex-direction:column; gap:14px}
.timeline-panel {grid-column:2; grid-row:2; min-width:0; padding-top:20px}
.app-container h2 {margin:0 0 16px; font-size:var(--fs-lead-l); font-weight:500; line-height:1.5}
.workspace-tabs {display:none}

/* ---- Buttons: outline pills, one silver action. A pressed or selected pill is silver. ---- */
.pixel-page button {transition:background var(--dur-hover) var(--ease-settle), box-shadow var(--dur-hover) var(--ease-settle), color var(--dur-hover) var(--ease-settle), transform var(--dur-hover) var(--ease-settle)}
.btn, .tool-btn, .style-btn, .workspace-tabs button {display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 20px; border:0; border-radius:var(--radius-button); background:transparent; box-shadow:inset 0 0 0 1px var(--line-2); color:var(--ink); font-size:var(--fs-caption); font-weight:500; line-height:1.3}
.btn:hover, .tool-btn:hover, .style-btn:hover, .workspace-tabs button:hover {background:var(--line-1); transform:translateY(-1px)}
.btn:active, .tool-btn:active, .style-btn:active, .workspace-tabs button:active, .btn:hover:active, .tool-btn:hover:active {transform:scale(.98); transition-duration:var(--dur-press)}
.btn svg, .tool-btn svg, .style-btn svg {flex:none; display:block}
.btn-primary, .btn[aria-pressed=true], .tool-btn[aria-pressed=true], .tool-btn.is-active, .workspace-tabs button[aria-selected=true] {background:var(--text-1); box-shadow:none; color:var(--n-0)}
.btn-primary:hover, .btn[aria-pressed=true]:hover, .tool-btn[aria-pressed=true]:hover, .tool-btn.is-active:hover, .workspace-tabs button[aria-selected=true]:hover {background:#fff}
.btn-small {padding:0 20px}
.btn-danger {color:var(--status-amber)}
/* A disabled button keeps its outline: a silver one would still read as the action to take */
.btn:disabled:hover, .tool-btn:disabled:hover {background:transparent; transform:none}
.btn-primary:disabled, .btn[aria-pressed=true]:disabled, .tool-btn[aria-pressed=true]:disabled, .tool-btn.is-active:disabled {background:transparent; box-shadow:inset 0 0 0 1px var(--line-2); color:var(--ink)}

/* ---- Fields: pill inputs on the ground colour ---- */
.input-section {display:flex; flex-direction:column; gap:16px; min-width:0}
.pixel-page :where(input:not([type=range], [type=checkbox], [type=color], [type=file]), select:not(.brand-language)) {min-width:0; max-width:100%; min-height:44px; padding:0 16px; border:0; border-radius:var(--radius-button); background:var(--bg); box-shadow:inset 0 0 0 1px var(--line-2); color:var(--ink); font-size:var(--fs-caption); text-overflow:ellipsis}
.pixel-page input::placeholder {color:var(--text-3); font-size:var(--fs-caption)}
.pixel-page input[type=number] {text-align:center}
.pixel-page select:not(.brand-language) {appearance:none; -webkit-appearance:none; width:100%; padding-right:40px; cursor:pointer}
.field-select {display:flex; width:100%}
#categorySelect {color:var(--text-2)}
/* The language list in the header: a chip as wide as its language name */
.pixel-page select.brand-language {width:auto; max-width:150px; text-overflow:ellipsis}
.pixel-page input[type=checkbox] {accent-color:var(--sapphire-300); width:16px; height:16px; margin:0}
.color-input-wide {width:48px; height:44px; padding:2px; border:0; border-radius:var(--radius-control); background:transparent; box-shadow:inset 0 0 0 1px var(--line-2); flex-shrink:0}

/* ---- Sliders: a 2px track, filled with sapphire up to a silver thumb. --p is the filled share, written by ui.js. ---- */
.pixel-page input[type=range] {-webkit-appearance:none; appearance:none; width:100%; min-width:0; max-width:100%; height:44px; margin:0; padding:0; border:0; background:transparent; accent-color:var(--sapphire-300); cursor:pointer; --p:50%}
.pixel-page input[type=range]::-webkit-slider-runnable-track {height:2px; border-radius:2px; background:linear-gradient(90deg, var(--sapphire-300) var(--p), var(--n-5) var(--p))}
.pixel-page input[type=range]::-webkit-slider-thumb {-webkit-appearance:none; width:14px; height:14px; margin-top:-6px; border:0; border-radius:50%; background:var(--text-1)}
.pixel-page input[type=range]::-moz-range-track {height:2px; border-radius:2px; background:var(--n-5)}
.pixel-page input[type=range]::-moz-range-progress {height:2px; border-radius:2px; background:var(--sapphire-300)}
.pixel-page input[type=range]::-moz-range-thumb {width:14px; height:14px; border:0; border-radius:50%; background:var(--text-1)}
.pixel-page input[type=range]:focus-visible {outline:0}
.pixel-page input[type=range]:focus-visible::-webkit-slider-thumb {box-shadow:0 0 0 3px var(--panel), 0 0 0 5px var(--focus-ring)}
.pixel-page input[type=range]:focus-visible::-moz-range-thumb {box-shadow:0 0 0 3px var(--panel), 0 0 0 5px var(--focus-ring)}
.pixel-page input[type=range]:disabled {opacity:.4; cursor:not-allowed}

/* ---- Materials ---- */
.source-tabs {display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:3px; border-radius:var(--radius-button); background:var(--bg); box-shadow:inset 0 0 0 1px var(--line-2)}
.source-tabs .btn {min-height:38px; padding:0 12px; background:transparent; box-shadow:none; color:var(--text-2); font-size:var(--fs-note)}
.source-tabs .btn:hover {background:var(--line-1)}
.source-tabs .btn[aria-pressed=true] {background:var(--text-1); color:var(--n-0)}
.upload-zone {display:grid; gap:16px; padding:8px 0}
.upload-zone .btn {width:100%}
.upload-zone p, .context-hint, .dialog-lead {color:var(--text-3); font-size:var(--fs-note); line-height:1.8}
.emoji-image-input {display:none}
#emojiSource {display:flex; flex-direction:column; gap:16px; min-width:0}
.search-field {position:relative; display:block}
.search-field::before {content:""; position:absolute; top:50%; left:16px; width:18px; height:18px; background:var(--text-3); transform:translateY(-50%); -webkit-mask:var(--icon-search) center / contain no-repeat; mask:var(--icon-search) center / contain no-repeat; pointer-events:none}
.search-field .emoji-search {width:100%; padding-left:44px}
.emoji-scroll {height:270px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--line-3) transparent}
.emoji-category {padding-bottom:12px; scroll-margin-top:8px}
.emoji-category-title {margin:0 0 14px; color:var(--text-3); font-size:var(--fs-label); letter-spacing:.06em}
.emoji-group {display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px}
.emoji-btn {display:grid; place-items:center; min-height:52px; padding:0; border:0; border-radius:var(--radius-panel); background:var(--bg); box-shadow:inset 0 0 0 1px transparent; color:var(--ink); font-size:28px; line-height:1; font-family:"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif}
.emoji-btn:hover {background:var(--n-4)}
.emoji-btn:focus-visible {outline-offset:-2px}
.emoji-btn[aria-pressed=true] {box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text-1) 50%, transparent)}
.emoji-loading, .emoji-empty {padding:20px 0; color:var(--text-3); font-size:var(--fs-caption)}
.manual-emoji {margin-top:2px; border-top:1px solid var(--line-1)}
.manual-emoji > :not(summary) {margin-top:8px}
.manual-emoji input {width:100%}
.manual-emoji .btn {width:100%}
.emoji-fit-row {display:none; align-items:center; gap:10px}
.emoji-fit-row.is-visible {display:flex; margin-bottom:12px}
.emoji-fit-row input {flex:1}
.emoji-fit-value {color:var(--sapphire-300); font:var(--fs-note) var(--font-mono)}
#emojiFitToggle {width:100%; margin:0 0 16px}
#emojiFitToggle[aria-pressed=true] {background:transparent; box-shadow:inset 0 0 0 1px var(--line-2); color:var(--ink)}
#emojiFitToggle[aria-pressed=true]:hover {background:var(--line-1)}
#sourceHint {margin-top:2px}

/* ---- Stage, toolbar and hint ---- */
.preview-toolbar {display:flex; align-items:center; justify-content:flex-start; gap:8px; flex-wrap:wrap}
.preview-toolbar .btn, .preview-toolbar .tool-btn {min-height:40px; padding:0 16px; color:var(--text-2); font-size:var(--fs-note)}
.preview-toolbar .btn[aria-pressed=true]:not(:disabled), .preview-toolbar .tool-btn[aria-pressed=true]:not(:disabled), .preview-toolbar .tool-btn.is-active:not(:disabled) {color:var(--n-0)}
#bgUndoBtn {margin-left:auto}
.tool-icon {display:inline-flex; align-items:center; flex-shrink:0}
.tool-text {font-size:inherit}
.canvas-container {display:flex; align-items:center; justify-content:center; position:relative; width:100%; min-width:0; border-radius:var(--radius-card); background:var(--n-0); overflow:hidden}
/* The stage is black. The faint dots are the lamps that are not lit; --cols and --rows are the matrix size (set in refreshWorkbench), so they sit exactly under the beads. */
#mainCanvas {display:block; max-width:100%; max-height:65vh; object-fit:contain; background:radial-gradient(circle closest-side, var(--n-4) 0 24%, transparent 32%) 0 0 / calc(100% / var(--cols, 32)) calc(100% / var(--rows, 32)), var(--n-0); image-rendering:pixelated; cursor:grab; touch-action:none}
#mainCanvas:active {cursor:grabbing}
#mainCanvas.selecting, #mainCanvas.color-selecting {cursor:crosshair}
#mainCanvas.play-mode {cursor:default}
#selectionCanvas {position:absolute; inset:0; width:100%; height:100%; pointer-events:none; mix-blend-mode:difference}
.canvas-hint {color:var(--text-3); font-size:var(--fs-note); line-height:1.7; text-align:center}
.canvas-empty {position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; min-height:240px; padding:28px; text-align:center}
.canvas-empty h2 {margin:0; font-size:28px; font-weight:500; letter-spacing:-.02em; line-height:1.2}
.canvas-empty p {color:var(--text-2); font-size:var(--fs-caption); line-height:1.7}
.empty-actions {display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:4px}
.empty-actions .btn:first-child {background:var(--text-1); box-shadow:none; color:var(--n-0)}
.empty-actions .btn:first-child:hover {background:#fff}
.hidden, [hidden] {display:none!important}

/* ---- Board settings fields ---- */
.canvas-settings {display:flex; flex-direction:column; gap:16px}
.setting-item {display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; font-size:var(--fs-note)}
.setting-item label {flex-basis:100%; margin-bottom:2px; color:var(--text-3); font-size:var(--fs-note)}
.unit-field {position:relative; flex:1; min-width:0}
.unit-field input {width:100%; padding-right:36px}
.unit-badge {position:absolute; top:50%; right:14px; transform:translateY(-50%); color:var(--text-3); font:var(--fs-label) var(--font-mono); pointer-events:none}
.setting-item > input {width:calc(50% - 20px)}
.setting-divider {display:none}
.unit {color:var(--text-3); font:var(--fs-label) var(--font-mono)}
.pixel-style-toggle {display:flex; gap:8px}
.style-btn {width:44px; height:44px; min-height:44px; padding:0; flex-shrink:0; color:var(--text-2)}
.style-btn.active {background:var(--text-1); box-shadow:none; color:var(--n-0)}
.style-btn.active:hover {background:#fff}

/* ---- Current object ---- */
.pixel-tools {display:flex; flex-direction:column; gap:22px; margin-top:14px}
.pixel-tools-header {display:none}
.pixel-tools-title {margin:0 0 16px; color:var(--text-3); font-size:var(--fs-label); letter-spacing:.06em}
.pixel-tools-section h3 {margin:0 0 12px; font-size:var(--fs-small); font-weight:500}
.pixel-tools-section + .pixel-tools-section {border:0}
.pixel-tools-section summary, .manual-emoji summary {display:flex; align-items:center; gap:12px; min-height:52px; cursor:pointer; color:var(--ink); font-size:var(--fs-small); list-style:none}
.pixel-tools-section summary::-webkit-details-marker, .manual-emoji summary::-webkit-details-marker {display:none}
.pixel-tools-section summary, .manual-emoji summary {border-radius:var(--radius-panel)}
/* The plus becomes a minus when the section is open; both are two 1.5px bars */
.pixel-tools-section summary::after, .manual-emoji summary::after {content:""; flex:none; width:12px; height:12px; margin-left:auto; color:var(--text-2); background:linear-gradient(currentColor, currentColor) center / 100% 1.4px no-repeat, linear-gradient(currentColor, currentColor) center / 1.4px 100% no-repeat}
details[open] > summary::after {background:linear-gradient(currentColor, currentColor) center / 100% 1.4px no-repeat}
#colorProperties {margin-top:6px; padding-top:9px; border-top:1px solid var(--line-1)}
#colorProperties summary {min-height:44px}
#selectionProperties {padding-bottom:20px; border-bottom:1px solid var(--line-1)}
#selectionProperties .tool-row {margin:12px 0}
#propertiesEmpty {padding:0}
.tool-grid {display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px}
.tool-btn {padding:0 12px; overflow-wrap:anywhere}
.tool-row {display:flex; align-items:center; gap:10px; margin-top:12px}
.tool-row input[type=range] {width:100%; flex:1}
.tool-row-compact label {color:var(--text-2); font-size:var(--fs-caption)}
#bgToleranceValue {color:var(--sapphire-300); font:var(--fs-note) var(--font-mono)}
.transform-bar, .render-bar {display:flex; flex-direction:column; gap:8px}
.transform-bar {margin-top:17px}
.transform-item {display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; column-gap:12px; color:var(--text-2); font-size:var(--fs-caption)}
.transform-item input {grid-column:1 / 3; grid-row:2}
.transform-item span:last-child {grid-column:2; grid-row:1; color:var(--sapphire-300); font:var(--fs-caption) var(--font-mono); text-align:right}
.transform-bar .btn {width:100%; margin-top:-2px}
.render-bar {gap:12px; padding-bottom:8px}
.render-item {display:flex; align-items:center; gap:8px; flex-wrap:wrap; width:100%; color:var(--text-2); font-size:var(--fs-caption)}
.render-item input[type=range] {flex:1}
.render-item-quantize input[type=range] {flex-basis:100%; width:100%}
.render-item-inline {display:flex; align-items:center; gap:8px; min-height:44px}
.render-item-center {min-height:44px}
.render-item output {color:var(--sapphire-300); font:var(--fs-caption) var(--font-mono)}
.render-item .field-select {flex:1 1 100%}

/* ---- Animation ---- */
.timeline-heading {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px}
.frames-section {min-width:0}
.frames-header {display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:20px}
#frameCount {color:var(--text-2); font:var(--fs-caption) var(--font-mono)}
.tween-setting {display:flex; align-items:center; gap:8px; margin-left:auto; color:var(--text-3); font-size:var(--fs-note)}
.tween-setting input {width:72px}
.tween-info {display:block; padding-top:10px; color:var(--text-3); font-size:var(--fs-note)}
.frames-container {display:flex; align-items:center; gap:10px; min-height:104px; padding:12px 6px; overflow-x:auto; scrollbar-width:thin}
.empty-frames {padding:22px 0; color:var(--text-3); font-size:var(--fs-note)}
.frame-item {position:relative; flex-shrink:0; padding:26px 12px 10px; border-radius:var(--radius-panel); background:var(--panel); box-shadow:inset 0 0 0 1px var(--line-1); text-align:center; cursor:pointer}
.frame-item.active {box-shadow:inset 0 0 0 1px var(--text-1)}
.frame-item canvas {display:block; width:60px; height:60px; margin:auto; background:var(--n-0); image-rendering:pixelated}
.frame-delete {position:absolute; top:0; right:0; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:var(--radius-control); background:transparent; color:var(--text-2)}
.frame-delete:hover {color:var(--text-1)}
.frame-name {display:block; width:80px; min-height:32px; margin-top:6px; padding:4px; font-size:var(--fs-label); text-align:center}
.frame-number {color:var(--text-3); font:var(--fs-label) var(--font-mono)}
.tween-indicator {display:flex; flex-direction:column; align-items:center; flex-shrink:0; color:var(--text-3); font-size:var(--fs-label)}
.keyframe-badge, .frame-render-badge, .frame-sample-badge {display:none}
.anim-controls {display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px}
.anim-controls label {color:var(--text-2); font-size:var(--fs-caption)}
.anim-controls input {width:88px}
#speedValue {color:var(--text-3); font:var(--fs-note) var(--font-mono)}

/* ---- Output bar: what is being sent, then the two ways out ---- */
.workspace-output {position:sticky; bottom:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:88px; margin-top:24px; padding:20px 0; border-top:1px solid var(--line-1); background:var(--bg)}
.workspace-output p {color:var(--text-3); font-size:var(--fs-caption)}
.workspace-output button {flex-shrink:0}
.output-actions {display:flex; align-items:center; gap:12px}
.output-actions .btn {min-height:48px; padding:0 24px}
.pixel-page .brand-footer {margin-top:0; padding:20px 0 28px; border-top:0}
.preview-author {display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:var(--fs-note)}
.preview-author a {display:inline-flex; align-items:center; min-height:44px}

/* ---- Dialogs and toast ---- */
.pixel-page dialog {width:min(480px, calc(100% - 32px)); max-height:85dvh; padding:28px; overflow:auto; border:0; border-radius:var(--radius-card); background:var(--panel); box-shadow:inset 0 0 0 1px var(--line-2), var(--shadow); color:var(--ink)}
dialog::backdrop {background:rgba(0, 0, 0, .66); backdrop-filter:blur(12px)}
.dialog-head {display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px}
.dialog-head h2 {margin:0; font-size:var(--fs-lead-l); font-weight:500; outline:none}
.dialog-head h2:focus {outline:none}
.dialog-close {display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; margin-right:-10px; padding:0; border:0; border-radius:var(--radius-control); background:transparent; color:var(--text-2)}
.dialog-close:hover {color:var(--text-1)}
.dialog-lead {margin-bottom:20px}
.dialog-actions {display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.dialog-result {margin-top:16px; padding:12px; border-radius:var(--radius-panel); background:var(--bg); font-size:var(--fs-caption); line-height:1.8}
.dialog-result:empty {display:none}
#exportDialog > label {display:block; color:var(--text-3); font-size:var(--fs-note)}
#exportDialog > .field-select {margin-top:8px}
#sendSummary {font-size:var(--fs-caption); overflow-wrap:anywhere}
.preview-shortcuts {display:grid; grid-template-columns:auto 1fr; gap:10px 16px; margin-top:20px; font-size:var(--fs-note)}
.keycap {color:var(--text-3); font:var(--fs-label) var(--font-mono)}
.toast {position:fixed; bottom:108px; left:50%; z-index:100; width:max-content; max-width:calc(100% - 32px); padding:14px 22px; border-radius:var(--radius-panel); background:var(--n-4); box-shadow:inset 0 0 0 1px var(--line-3), var(--shadow-pop); color:var(--ink); font-size:var(--fs-caption); transform:translateX(-50%)}

/* ---- Desktop: the side cards scroll on their own, the stage stays in view ---- */
@media (min-width:768px) {
  .control-panel, .properties-panel {max-height:calc(100dvh - 340px); overflow-y:auto; scrollbar-width:thin}
  .preview-area {position:sticky; top:16px}
}

@media (min-width:1200px) {
  .timeline-panel {position:relative; z-index:4; background:var(--bg)}
}

/* ---- Tablet: the stage keeps the wide column, one side card at a time, chosen by the tabs ---- */
@media (min-width:768px) and (max-width:1199px) {
  .app-container {grid-template-columns:268px minmax(0, 1fr); gap:0 20px}
  .control-panel, .properties-panel {max-height:calc(100dvh - 400px)}
  .workspace-tabs {display:flex; grid-column:1; grid-row:1; gap:4px; padding-bottom:12px}
  .workspace-tabs button {flex:1; padding:0 6px; font-size:var(--fs-note)}
  .control-panel, .properties-panel, .timeline-panel {grid-column:1; grid-row:2}
  .preview-area {grid-column:2; grid-row:1 / 3}
  .timeline-panel {padding:24px; border-radius:var(--radius-card); background:var(--panel); box-shadow:inset 0 0 0 1px var(--line-1)}
  .app-container[data-active-panel=materials] .properties-panel, .app-container[data-active-panel=materials] .timeline-panel,
  .app-container[data-active-panel=properties] .control-panel, .app-container[data-active-panel=properties] .timeline-panel,
  .app-container[data-active-panel=frames] .control-panel, .app-container[data-active-panel=frames] .properties-panel {display:none}
  .preview-toolbar .btn, .preview-toolbar .tool-btn, .source-tabs .btn, .frame-name {min-height:44px}
  .preview-toolbar #bgUndoBtn {margin-left:0}
  .workspace-output {margin-top:32px}
}

/* ---- Phone: the stage stays on top, the tabs and one card follow ---- */
@media (max-width:767px) {
  .workspace-heading {flex-wrap:wrap; gap:16px; margin:40px 0 24px}
  .workspace-heading h1 {font-size:28px}
  .app-container {display:flex; flex-direction:column; gap:12px}
  .preview-area {order:0; position:sticky; top:0; z-index:3; width:100%; gap:8px; padding-top:6px; background:var(--bg)}
  .preview-toolbar {gap:6px}
  .preview-toolbar .btn, .preview-toolbar .tool-btn, .source-tabs .btn, .frame-name {min-height:44px}
  .preview-toolbar .btn, .preview-toolbar .tool-btn {padding:0 12px}
  .preview-toolbar .tool-icon {display:none}
  .preview-toolbar #bgUndoBtn {margin-left:auto}
  .canvas-hint {min-height:20px; font-size:var(--fs-label)}
  .canvas-container:has(.canvas-empty:not([hidden])) {min-height:240px}
  .preview-area:has(.canvas-empty:not([hidden])) {position:relative}
  .app-container:has(.canvas-empty:not([hidden])) .workspace-tabs {top:0}
  .canvas-empty {gap:14px; padding:20px 12px}
  .canvas-empty h2 {font-size:22px}
  .workspace-tabs {display:flex; order:1; position:sticky; top:var(--stage-height, 320px); z-index:3; width:100%; gap:6px; padding:6px 0; background:var(--bg)}
  .workspace-tabs button {flex:1; padding:0 8px; font-size:var(--fs-note)}
  .control-panel, .properties-panel, .timeline-panel {order:2; width:100%; padding:20px}
  .timeline-panel {border-radius:var(--radius-card); background:var(--panel); box-shadow:inset 0 0 0 1px var(--line-1)}
  .app-container[data-active-panel=materials] .properties-panel, .app-container[data-active-panel=materials] .timeline-panel,
  .app-container[data-active-panel=properties] .control-panel, .app-container[data-active-panel=properties] .timeline-panel,
  .app-container[data-active-panel=frames] .control-panel, .app-container[data-active-panel=frames] .properties-panel {display:none}
  .emoji-group {grid-template-columns:repeat(6, minmax(0, 1fr))}
  .emoji-scroll {height:240px}
  .workspace-output {display:block; margin-top:16px; padding:12px 0 max(12px, env(safe-area-inset-bottom))}
  .workspace-output p {margin-bottom:8px; font-size:var(--fs-note)}
  .output-actions {gap:8px}
  .output-actions .btn {flex:1; padding:0 12px; font-size:var(--fs-note)}
  .pixel-page .brand-footer {gap:16px}
  .transform-item input {grid-column:1; grid-row:2}
  .transform-item span:last-child {grid-row:1 / 3; align-self:center}
  .pixel-page dialog {padding:20px}
  .dialog-head h2 {font-size:var(--fs-lead)}
  .pixel-page select.brand-language {max-width:116px}
}
@media (max-width:359px) {
  .workbench-actions {width:100%; justify-content:space-between}
  .preview-toolbar .btn, .preview-toolbar .tool-btn {padding:0 8px; font-size:var(--fs-label)}
  .emoji-group {grid-template-columns:repeat(5, minmax(0, 1fr))}
  .pixel-page .brand-logo {width:92px}
  .pixel-page .brand-actions {gap:6px}
  .dialog-actions {flex-direction:column}
  .dialog-actions .btn {width:100%}
}
@media (max-height:650px) and (max-width:767px) {
  .preview-area {position:relative}
  .workspace-tabs {top:0}
}
@media (prefers-reduced-motion:reduce) {
  .pixel-page button {transition:none}
  .btn:hover, .tool-btn:hover, .workspace-tabs button:hover, .btn:active, .tool-btn:active, .workspace-tabs button:active {transform:none}
}