@font-face{font-family:"FormaF";src:url("fonts/formaf-regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"FormaF";src:url("fonts/formaf-semibold.woff2") format("woff2");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"FormaF";src:url("fonts/formaf-bold.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap}
:root {
  color-scheme: dark;
  font-family: "FormaF", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --bg-workspace: #121212;
  --bg-panel: #1e1e1e;
  --bg-control: #2b2b2b;
  --bg-hover: #363636;
  --bg-selected: #444444;
  --text-primary: #f2f2f2;
  --text-secondary: #b8b8b8;
  --border-structure: #343434;
  --border-control: #777777;
  --focus-ring: #a8cdff;
  --radius-control: 7px;
  color: var(--text-primary);
  background: var(--bg-workspace);
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button, select, summary { cursor: pointer; }
button { color: inherit; border: 0; }
button:disabled { opacity: .38; cursor: not-allowed; }
button[hidden], [hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
::selection { color: #101010; background: #c8dfff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon, .logo { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.skip-link { position: fixed; inset-block-start: 12px; inset-inline-start: -999px; z-index: 50; padding: 10px 16px; border-radius: 7px; color: #111; background: #fff; }
.skip-link:focus { inset-inline-start: 12px; }
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 336px; height: 100dvh; }
.workspace { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: radial-gradient(circle, #303030 .7px, transparent .9px) 0 0 / 14px 14px, var(--bg-workspace); }
.workspace-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; min-height: 76px; background: linear-gradient(var(--bg-workspace), #12121200); }
.project { display: flex; min-width: 0; gap: 10px; align-items: center; color: var(--text-secondary); }
.project input { color: var(--text-primary); background: var(--bg-workspace); border: 1px solid transparent; border-radius: 5px; padding: 6px; width: 174px; max-width: 100%; min-width: 0; font-size: 13px; }
.project input:focus { border-color: var(--border-control); }
#saved { color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
.history { display: flex; gap: 4px; padding: 3px; background: var(--bg-panel); border: 1px solid var(--border-structure); border-radius: 10px; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; background: transparent; border-radius: var(--radius-control); min-width: 32px; min-height: 32px; padding: 6px; color: var(--text-secondary); }
.stage { display: flex; position: relative; align-items: center; justify-content: center; min-width: 0; min-height: 0; padding: 48px 40px; }
.canvas-wrap { position: relative; flex-shrink: 0; background: repeating-conic-gradient(#333 0% 25%, #292929 0% 50%) 50% / 16px 16px; box-shadow:none; }
#preview { display: block; max-width: 100%; max-height: 100%; cursor: grab; touch-action: none; user-select: none; outline-offset: 6px; }
#preview:active { cursor: grabbing; }
.canvas-label { position: absolute; inset-block-end: 18px; inset-inline-start: 0; width: 100%; text-align: center; color: var(--text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
.drop-overlay { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; padding: 16px; background: #171717f2; border: 2px dashed #ddd; text-align: center; pointer-events: none; }
.dragging .drop-overlay { display: flex; }
.workspace-bottom { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; gap: 14px; min-height: 64px; color: var(--text-secondary); background: linear-gradient(#12121200, var(--bg-workspace)); }
.workspace-bottom p { margin: 0; font-size: 12px; }
.canvas-tools { display: flex; align-items: center; gap: 14px; flex-shrink: 0; background: var(--bg-workspace); }
#zoom-label { font-variant-numeric: tabular-nums; font-size: 12px; }
.inspector { display: flex; flex-direction: column; background: var(--bg-panel); border-inline-start: 1px solid var(--border-structure); min-height: 0; min-width: 0; }
.inspector-heading { display: flex; align-items: center; justify-content: space-between; padding: 24px 20px 18px; flex-shrink: 0; }
h1 { display: flex; align-items: center; gap: 6px; font-size: 17px; line-height: 1.2; font-weight: 650; margin: 0; letter-spacing: -.4px; }
h1 .logo { height: 22px; width: 22px; margin-inline-end: 3px; }
h1 span { font-weight: 400; color: var(--text-secondary); }
.local-badge { display: flex; color: var(--text-secondary); }
.local-badge .icon { width: 14px; height: 14px; }
.settings-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1; scrollbar-width: thin; scrollbar-color: #777 var(--bg-panel); padding: 4px 20px 18px; }
.settings-section + .settings-section { margin-block-start: 26px; }
h2 { font-size: 12px; font-weight: 500; color: var(--text-secondary); margin: 0 0 12px; line-height: 1.4; }
.file-card { width: 100%; display: flex; align-items: center; gap: 10px; text-align: start; background: var(--bg-control); padding: 10px; border: 1px solid transparent; border-radius: 10px; }
.file-thumbnail { display: flex; align-items: center; justify-content: center; width: 32px; height: 44px; flex-shrink: 0; border: 1px solid #777; border-radius: 5px; color: #ccc; overflow: hidden; }
.file-thumbnail img { width: 100%; height: 100%; object-fit: cover; outline: 1px solid #ffffff1a; }
.file-copy { display: grid; gap: 3px; min-width: 0; }
.file-copy strong { font-weight: 500; font-size: 12px; overflow-wrap: anywhere; }
#file-info { font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; }
.upload-arrow { width: 15px; margin-inline-start: auto; }
.media-actions { display: flex; justify-content: space-between; align-items: center; margin-block: 8px 12px; min-height: 24px; }
.helper { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
select { width: 100%; min-height: 36px; padding: 7px 9px; background: var(--bg-control); color: var(--text-primary); border: 1px solid var(--border-control); border-radius: var(--radius-control); font-size: 13px; }
.field-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-block-start: 12px; }
.field-row > label { color: var(--text-secondary); font-size: 12px; }
.field-row select { width: auto; max-width: 68%; }
.range-field { margin-block-start: 12px; padding: 8px 10px 2px; background: var(--bg-control); border-radius: var(--radius-control); }
.range-field > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.range-field label { font-size: 12px; color: var(--text-secondary); }
.range-field output { font-size: 12px; font-variant-numeric: tabular-nums; }
input[type=range] { appearance: none; display: block; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; border-radius: 4px; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: #858585; }
input[type=range]::-webkit-slider-thumb { appearance: none; width: 10px; height: 10px; margin-top: -4px; background: #eee; border-radius: 50%; }
input[type=range]::-moz-range-track { height: 2px; background: #858585; }
input[type=range]::-moz-range-thumb { width: 10px; height: 10px; border: 0; background: #eee; border-radius: 50%; }
.coordinates { display: flex; gap: 8px; margin-block-start: 10px; }
.coordinates label { display: flex; align-items: center; width: 50%; min-width: 0; gap: 5px; padding-inline: 10px; background: var(--bg-control); border: 1px solid var(--border-control); border-radius: var(--radius-control); color: var(--text-secondary); font-size: 12px; }
.coordinates input { width: 100%; min-width: 0; min-height: 34px; text-align: end; font-variant-numeric: tabular-nums; background: transparent; border: 0; color: var(--text-primary); }
.more-settings { margin-block-start: 10px; }
summary { color: var(--text-secondary); padding-block: 6px; min-height: 32px; font-size: 12px; }
summary::marker { font-size: 9px; }
.segmented { display: flex; border: 1px solid var(--border-control); background: var(--bg-control); padding: 3px; border-radius: 10px; gap: 3px; }
.segmented button { flex: 1; min-width: 0; padding: 6px 1px; min-height: 30px; border-radius: 6px; font-size: 12px; color: var(--text-secondary); background: transparent; }
.segmented button.active { background: var(--bg-selected); color: var(--text-primary); box-shadow:none; font-weight: 600; }
.palette { display: flex; gap: 8px; margin-block-start: 12px; padding: 3px; }
.swatch { display: flex; align-items: center; justify-content: center; min-width: 0; flex: 1; min-height: 28px; border: 1px solid #ffffff60; border-radius: 5px; box-shadow:none; }
.swatch.active { outline: 2px solid #eee; outline-offset: 2px; }
.swatch.active::after { content: '✓'; display: grid; place-items: center; width: 18px; height: 18px; color: #fff; background: #151515; border-radius: 50%; font-size: 12px; font-weight: 700; }
.color-controls { display: grid; gap: 8px; margin-block-start: 12px; }
.color-control { display: flex; align-items: center; padding: 4px 8px; gap: 8px; background: var(--bg-control); border: 1px solid var(--border-control); border-radius: var(--radius-control); min-height: 38px; font-size: 12px; }
.color-control > span { color: var(--text-secondary); }
.color-control output { margin-inline-start: auto; text-transform: uppercase; font-variant-numeric: tabular-nums; }
input[type=color] { appearance: none; flex-shrink: 0; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 5px; background: transparent; cursor: pointer; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; }
input[type=color]::-webkit-color-swatch { border: 1px solid #999; border-radius: 4px; }
#bg-status { margin-block-start: 8px; overflow-wrap: anywhere; }
.privacy-note { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); margin: 26px 0 0; }
.privacy-note .icon { width: 13px; height: 13px; }
.inspector-actions { display: flex; gap: 10px; padding: 16px 20px; padding-block-end: max(16px, env(safe-area-inset-bottom)); border-block-start: 1px solid var(--border-structure); background: var(--bg-panel); box-shadow:none; flex-shrink: 0; }
.primary, .secondary { min-height: 38px; padding: 9px 14px; border-radius: var(--radius-control); display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; font-weight: 500; }
.primary { background: #f2f2f2; color: #171717; }
.secondary { background: var(--bg-control); color: var(--text-primary); border: 1px solid var(--border-control); }
.inspector-actions .primary { flex: 1; }
.inspector-actions .secondary { flex: .7; }
.quiet-button { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 2px 4px; border-radius: 4px; text-decoration: underline; text-underline-offset: 3px; font-size: 12px; background: transparent; color: var(--text-secondary); }
.wide { width: 100%; margin-block-start: 12px; }
.inline-status { color: var(--text-primary); background: var(--bg-control); padding: 10px 12px; margin: 10px 0; border-inline-start: 2px solid #ddd; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
dialog { background: var(--bg-panel); color: var(--text-primary); border: 1px solid #555; border-radius: 16px; padding: 32px; width: 420px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overscroll-behavior: contain; box-shadow:none; }
dialog::backdrop { background: #0009; backdrop-filter: blur(4px); }
dialog h2 { font-size: 22px; font-weight: 600; color: var(--text-primary); line-height: 1.2; padding-inline-end: 16px; margin: 0 0 12px; letter-spacing: -.5px; }
dialog p { color: var(--text-secondary); line-height: 1.6; margin: 12px 0; }
dialog .field-row { margin-block-start: 20px; }
dialog .field-row label { font-size: 13px; }
.close-dialog { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; }
.export-info { font-variant-numeric: tabular-nums; text-align: center; background: var(--bg-control); padding: 12px; border-radius: 7px; }
dialog .export-footnote { margin-block-end: 0; }
dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-block: 14px; }
dt { font-size: 12px; } dd { margin: 0; font-size: 12px; color: var(--text-secondary); }
#toast { position: fixed; inset-block-end: 24px; inset-inline-start: 50%; transform: translateX(-50%); padding: 12px 18px; background: #f2f2f2; color: #171717; border-radius: 9px; box-shadow:none; font-size: 13px; text-align: center; max-width: calc(100vw - 32px); opacity: 0; pointer-events: none; z-index: 20; }
#toast.show { opacity: 1; }
@media (hover: hover) { button:not(:disabled):hover { background-color: var(--bg-hover); color: var(--text-primary); } .primary:not(:disabled):hover { background: #fff; color: #111; } .file-card:hover { border-color: var(--border-control); } }
@media (prefers-reduced-motion: no-preference) { button { transition: background-color 120ms ease-out, color 120ms ease-out; } #toast { transition: opacity 350ms cubic-bezier(.22,1,.36,1); } }
@media (max-width: 1050px) { #saved { display: none; } .workspace-bottom p { max-width: 280px; } .workspace-toolbar { padding-inline: 20px; } }
@media (max-width: 700px) {
  .editor { display: flex; flex-direction: column; height: auto; min-height: 100dvh; }
  .workspace { min-height: 440px; height: 58dvh; flex-shrink: 0; grid-template-rows: auto minmax(0,1fr) auto; }
  .workspace-toolbar { min-height: 60px; padding: 10px 16px; gap: 6px; }
  .project { gap: 4px; }
  .project input { width: 165px; font-size: 16px; }
  .project > .icon { display: none; }
  .history { padding: 0; }
  .icon-button { min-width: 40px; min-height: 40px; }
  .stage { padding: 26px 24px 40px; }
  .canvas-label { inset-block-end: 12px; }
  .workspace-bottom { padding: 6px 16px; min-height: 50px; }
  .workspace-bottom p { display: none; }
  .canvas-tools { width: 100%; justify-content: flex-end; }
  #play { margin-inline-end: auto; }
  .inspector { border-inline-start: 0; border-block-start: 1px solid var(--border-structure); overflow: visible; }
  .inspector-heading { padding: 20px; }
  .settings-scroll { overflow: visible; padding: 8px 20px 24px; }
  .inspector-actions { position: sticky; bottom: 0; z-index: 5; }
  select, input:not([type=range]):not([type=color]) { font-size: 16px; }
  select, .primary, .secondary, .segmented button, .coordinates input { min-height: 44px; }
  .quiet-button, summary { min-height: 36px; }
  .swatch { min-height: 32px; }
  .settings-section + .settings-section { margin-block-start: 28px; }
  .field-row { flex-wrap: wrap; }
  .field-row select { max-width: 100%; }
  dialog { padding: 28px 20px; }
  dialog .field-row { display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; }
  dialog select { width: 100%; }
}
@media (forced-colors: active) { :focus-visible { outline-color: Highlight; } button.active { border: 2px solid Highlight; } .swatch.active::after { border: 1px solid CanvasText; } }
/* Compact inspector: keep frequent settings together, reveal secondary controls explicitly. */
.inspector-heading { padding-block: 22px 16px; }
.media-actions:has(#remove-media[hidden]) { display: none; }
.media-actions { margin-block: 3px 5px; }
.file-card { margin-block-end: 12px; }
.file-copy strong { font-size: 13px; }
.settings-section + .settings-section { margin-block-start: 20px; }
.field-row { margin-block-start: 10px; }
.range-field { margin-block-start: 10px; }
.more-settings { margin-block-start: 6px; }
.scroll-cue { min-height: 28px; width: 100%; background: var(--bg-panel); color: var(--text-secondary); font-size: 12px; border-block-start: 1px solid var(--border-structure); text-align: center; }
@media (max-width:700px) { .media-actions { min-height: 36px; } .settings-section + .settings-section { margin-block-start: 26px; } }

#background-library{margin-top:10px}#background-pack{width:100%;margin-bottom:10px}.background-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-height:224px;overflow-y:auto;padding:3px}.background-tile{position:relative;aspect-ratio:1;border:2px solid transparent;border-radius:8px;overflow:hidden;background:#292929;padding:0;cursor:pointer}.background-tile img{width:100%;height:100%;object-fit:cover;display:block}.background-tile[aria-pressed=true]{border-color:#fff;box-shadow:none}.background-tile span{position:absolute;bottom:4px;right:4px;background:#000b;padding:2px 5px;border-radius:4px;font-size:10px;color:#fff}.background-tile:focus-visible{outline:2px solid white;outline-offset:1px}#background-description{margin:8px 3px}#background-status{font-size:12px;line-height:1.5}
/* Start with a full-bleed upload surface; reveal the editor only with media. */
.workspace { grid-template-rows: minmax(0,1fr) auto; }
.is-empty .editor { grid-template-columns:minmax(0,1fr);height:100dvh; }
.is-empty .workspace { min-height:100dvh;grid-template-rows:1fr; }
.empty-state { display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;max-width:360px; }
.empty-logo { width:32px;height:40px;fill:none;stroke:#a8a8a8;stroke-width:1.2; }
.empty-state h1 { margin:0 0 8px;font-size:20px;font-weight:500;letter-spacing:-.5px;color:#e7e7e7; }
.empty-state .primary { min-height:44px;gap:10px;padding:0 20px;border-radius:9px; }
.empty-state > p { margin:0;font-size:12px;color:#999; }
.empty-state .inline-status { max-width:320px;color:#ddd; }
.is-empty .stage.dragging { background:#ffffff07;outline:1px dashed #777;outline-offset:-20px; }
@media(max-width:700px){.is-empty .workspace{height:100dvh}.is-empty .editor{display:block}.is-empty .stage{height:100%}}
.is-empty .inspector,.is-empty .workspace-bottom,.is-empty .canvas-wrap,.is-empty .canvas-label {display:none!important}
/* Reference inspector: compact fields, quiet section rules, pinned actions. */
.inspector{background:#1e1e1e}.inspector-heading{padding:28px 20px 26px}.inspector-heading h1{font-size:18px;font-weight:600;gap:0}.inspector-heading h1 span{color:inherit;font-weight:inherit}.inspector-heading .logo,.local-badge,.privacy-note{display:none}.settings-scroll{padding:0 20px 20px}.inspector .settings-section{padding:0!important;border:0!important}.inspector .settings-section+.settings-section{margin-top:30px}.settings-section h2,.frame-field>label{display:flex;align-items:center;gap:9px;color:#999;font-size:11px;font-weight:600;margin:0 4px 16px}.settings-section h2:after,.frame-field>label:after{content:'';height:1px;background:#343434;flex:1}.file-card-wrap{position:relative;margin-bottom:16px}.inspector .file-card{margin:0;padding:10px 36px 10px 11px;min-height:61px;border:0;border-radius:14px;background:#292929;gap:12px;width:100%}.file-remove{position:absolute;right:9px;top:16px;width:28px;height:28px;font-size:18px;color:#999;background:none;border-radius:5px}.file-thumbnail{width:22px;height:40px;min-width:22px;background:none;border:0;border-radius:0}.file-thumbnail img{object-fit:contain}.file-copy strong{font-size:12px;font-weight:600}.file-copy>span{font-size:10px;color:#999}.inspector select{height:37px;border:0!important;border-radius:7px;background:#292929;font-size:12px;font-weight:600;padding:0 12px}.frame-field{margin-top:30px}.frame-field select{width:100%}.inspector .palette{display:none!important}.inspector .color-controls{margin-top:0}.background-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}.background-tile{aspect-ratio:1;border-radius:14px;border:0;padding:0;overflow:hidden;background:#292929}.background-tile img{width:100%;height:100%;object-fit:cover}.background-tile[aria-pressed=true]{outline:2px solid #aaa;outline-offset:2px}.photo-variants{margin-top:12px}.photo-variants summary,#custom-background{font-size:11px;color:#999}.photo-variants .background-grid{max-height:250px;overflow-y:auto}.inspector-actions{padding:16px 20px;border:0;box-shadow:none;gap:16px}.inspector-actions button{height:37px;min-height:37px;font-size:12px;border:0;border-radius:8px}.inspector-actions .secondary{background:#292929;flex:1}.inspector-actions .primary{flex:1}.workspace-bottom p{font-size:11px}.scroll-cue{font-size:10px}.inspector-heading h1 span:before{content:'\00a0'}

#preview,#preview:active{cursor:default;touch-action:auto}

/* Shared editor surfaces: quiet chrome, clear controls and one export action. */
:root{--bg-workspace:#080808;--bg-panel:#171717;--bg-control:#292929;--bg-hover:#363636;--bg-selected:#424242;--text-primary:#f5f5f5;--text-secondary:#b3b3b3;--border-structure:#303030;--border-control:#555555;--focus-ring:#ffe044;--text-danger:#ffb4b8;--bg-audio:#254642;--accent:#ffe044;--radius-control:22px;font-optical-sizing:auto}
.inspector{background:var(--bg-panel)}
.inspector-heading{padding:28px 24px 26px}.inspector-heading h1{font-size:20px;letter-spacing:-.025em;line-height:1.2}
.settings-scroll{padding-inline:24px;scrollbar-color:#747780 var(--bg-panel);scrollbar-gutter:stable}
.settings-section h2,.frame-field>label{font-size:12px;font-weight:500;letter-spacing:0;color:var(--text-secondary);margin-bottom:12px}
.settings-section h2:after,.frame-field>label:after{display:none}
.inspector .settings-section+.settings-section{margin-top:32px}
.inspector .file-card{background:var(--bg-control);border-radius:22px;min-height:76px;padding:14px 46px 14px 16px;gap:14px;box-shadow:none;border:0}
.file-copy strong{color:var(--text-primary);font-size:14px;font-weight:600}.file-copy>span{color:var(--text-secondary);font-size:12px;line-height:1.5}
.file-remove{color:var(--text-secondary);top:20px;right:12px;width:32px;height:32px;border-radius:50%}
.inspector select{background-color:var(--bg-control);border:0!important;border-radius:22px;padding-inline:16px;box-shadow:none;color:var(--text-primary);min-height:46px;font-size:14px;font-weight:400}
.background-tile{border:0;box-shadow:none;border-radius:50%}
.background-tile[aria-pressed=true]{outline:2px solid var(--text-primary);outline-offset:2px}
.background-tile[aria-pressed=true]::after{content:'✓';position:absolute;top:5px;right:5px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#18191c;color:#fff;font-size:12px}
.photo-variants summary,#custom-background{font-size:12px;color:var(--text-secondary)}
.inspector-actions{padding:20px 24px;background:var(--bg-panel);border:0;box-shadow:none;gap:12px}
.inspector-actions button{min-height:46px;height:auto;font-size:14px;font-weight:600;border-radius:999px}
.inspector-actions .primary,.primary{background:var(--accent);color:#151515;box-shadow:none}
.inspector-actions .secondary{background:var(--bg-control);border:0;box-shadow:none}
.empty-logo{width:36px;height:44px;stroke:var(--text-secondary)}.empty-state h1{font-size:24px;font-weight:600;letter-spacing:-.035em;color:var(--text-primary)}
.empty-state .primary{min-height:48px;border-radius:999px;font-weight:600}.empty-state>p{font-size:13px;color:var(--text-secondary)}
.canvas-wrap{box-shadow:none}
.workspace-bottom{background:transparent;color:var(--text-secondary)}.workspace-bottom p{font-size:12px}
.canvas-tools{background:transparent}.canvas-label{color:var(--text-secondary)}
dialog{background:var(--bg-panel);border:1px solid var(--border-control);box-shadow:none}
dialog::backdrop{background:#0009;backdrop-filter:blur(4px)}
button,select,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.icon{stroke-width:1.75}
@media(hover:hover){.inspector .file-card:hover{background:var(--bg-hover)}.inspector-actions .secondary:hover{background:var(--bg-hover)}.primary:not(:disabled):hover,.inspector-actions .primary:hover,.empty-state .primary:hover{background:#ffeb7a;color:#111}.file-remove:hover{color:var(--text-danger)}}
@media(prefers-reduced-motion:no-preference){button{transition:background-color 120ms ease-out,color 120ms ease-out,transform 120ms ease-out}button:active:not(:disabled){transform:scale(.96)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(prefers-contrast:more){:root{--border-control:#a8abb3;--text-secondary:#e0e2e6}}
@media(max-width:700px){.inspector select{min-height:44px;font-size:16px}.inspector-actions button{min-height:44px}.empty-state{padding-inline:20px}}

/* Canvas navigation stays inside the workspace; the inspector never scales. */
.workspace{position:relative;isolation:isolate;background:var(--bg-workspace)}
.workspace::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle,#ffffff14 .7px,transparent 1px) 0 0 / 14px 14px;-webkit-mask-image:radial-gradient(ellipse 76% 74% at 50% 48%,#000 20%,#000b 48%,transparent 100%);mask-image:radial-gradient(ellipse 76% 74% at 50% 48%,#000 20%,#000b 48%,transparent 100%)}
.stage,.workspace-bottom{position:relative;z-index:1}
.stage{display:block;overflow:auto;padding:0;overscroll-behavior:contain;scrollbar-color:#6668 transparent}
.stage-surface{display:grid;place-items:center;width:max-content;min-width:100%;height:max-content;min-height:100%;padding:48px 40px}
.canvas-label{display:none}
.canvas-wrap{max-width:none}
.workspace-bottom{min-height:62px}
.canvas-tools{gap:10px}
.zoom-control{display:flex;align-items:center;height:32px;padding:2px;background:#2a2b2e;border:1px solid #ffffff19;border-radius:8px;box-shadow:none}
.zoom-control button{width:29px;height:27px;background:transparent;border-radius:5px;color:#babcc0;font-size:18px;line-height:1}
.zoom-control button:hover,#zoom-fit:hover{background:#3b3c40;color:#f5f5f7}
.zoom-value{display:flex;align-items:center;justify-content:center;min-width:61px;height:25px;padding:0 4px;gap:1px;border-inline:1px solid #ffffff18;color:#e6e7e9;font-size:12px;font-variant-numeric:tabular-nums}
#zoom-input{width:3ch;min-width:0;padding:0;border:0;outline:0;background:transparent;color:inherit;text-align:right;font-size:12px;font-variant-numeric:tabular-nums;appearance:textfield;-moz-appearance:textfield}
#zoom-input::-webkit-inner-spin-button,#zoom-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.zoom-value:focus-within{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:3px}
#zoom-fit{min-width:38px;height:32px;padding:0 8px;border-radius:7px;background:#2a2b2e;color:#bfc0c4;font-size:11px;font-weight:600}
#zoom-fit[aria-pressed=true]{color:#f3f3f5;background:#3a3b3f}
@media(max-width:700px){.stage{padding:0}.stage-surface{padding:26px 24px 40px}.workspace-bottom{padding:7px 12px}.canvas-tools{gap:7px}.zoom-control{height:34px}.zoom-control button{height:29px;width:32px}#zoom-fit{height:34px}.workspace-bottom .icon-button{min-width:34px;min-height:34px}#zoom-input{font-size:13px}}
@media(min-width:701px){html,body{overflow:hidden}.editor{position:fixed;inset:0}}

/* The settings panel floats above the workspace; the canvas fills its original area. */
.inspector{position:relative;z-index:2;margin:12px;border:0;border-radius:28px;overflow:clip;box-shadow:none}
@media(max-width:700px){.inspector{margin:8px;overflow:visible}.inspector-actions{border-radius:0 0 28px 28px}}

/* A single, compact edit track sits between the canvas and its view controls. */
.workspace{grid-template-rows:minmax(0,1fr) auto auto}
.is-empty .workspace{grid-template-rows:1fr}
.timeline{position:relative;z-index:2;min-width:0;height:auto;min-height:var(--timeline-height,235px);margin:0 12px;border:0;border-radius:24px;background:var(--bg-panel);box-shadow:none;display:flex;flex-direction:column;overflow:hidden}
.timeline-grip{position:absolute;top:0;left:0;right:0;height:7px;cursor:ns-resize;z-index:4}
.timeline-grip:after{content:"";display:block;width:38px;height:3px;margin:2px auto;border-radius:3px;background:#707175}
.timeline-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:14px 16px 10px;flex-shrink:0;border-bottom:0}
.timeline-toolbar button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 12px;border-radius:999px;background:var(--bg-control);color:var(--text-primary);font-size:12px;font-weight:500;white-space:nowrap}.timeline-toolbar .icon{width:16px;height:16px}.timeline-toolbar #timeline-delete{color:var(--text-danger)}
.timeline-toolbar button:hover{background:#3b3d41}
.timeline-transport,.timeline-edit,.timeline-view{display:flex;align-items:center;gap:8px;min-width:0}
.timeline-transport{flex-shrink:0}
#timeline-play{min-width:38px;padding:0;background:var(--bg-control);color:var(--text-primary)}#timeline-play .icon{width:18px;height:18px}
#timeline-time{min-width:112px;color:var(--text-primary);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:center}
.timeline-view label{font-size:12px;color:var(--text-secondary)}
#timeline-zoom{width:68px;height:24px}
#timeline-collapse{width:38px;padding:0;font-size:17px}
.timeline-body{min-height:166px;flex:1;overflow:hidden}
.timeline-scroll{height:100%;overflow:auto hidden;scrollbar-width:thin;scrollbar-color:#717276 transparent}
.timeline-content{position:relative;height:100%;min-height:166px;padding:0 16px}
.timeline-ruler{position:relative;height:25px;margin-left:16px;cursor:crosshair;touch-action:none}
.ruler-tick{position:absolute;top:5px;transform:translateX(-1px);height:17px;padding-left:4px;border-left:1px solid #ffffff3a;color:var(--text-secondary);font-size:11px;font-variant-numeric:tabular-nums;line-height:1}
.timeline-track{position:relative;height:65px;margin:0 0 0 16px;outline:none}
.timeline-track:focus-visible{outline:2px solid var(--focus-ring)}
.timeline-clip{position:absolute;top:0;height:63px;min-width:5px;overflow:hidden;border:1px solid #ffffff54;border-radius:12px;background-color:#35373a;background-image:linear-gradient(90deg,#101114d9,#101114c9),var(--thumb);background-size:auto,72px 100%;background-repeat:repeat-x;color:#fff;cursor:grab;user-select:none}
.timeline-clip[aria-pressed=true]{border:2px solid #f5f5f7;box-shadow:none}
.timeline-clip:active{cursor:grabbing}
.audio-row-label{height:19px;margin-left:16px;display:flex;align-items:center;gap:12px;color:var(--text-secondary);font-size:11px;font-weight:600}
.audio-row-label span:last-child{font-weight:400;color:var(--text-secondary)}
.timeline-audio-track{position:relative;height:51px;margin-left:16px;border-top:1px solid #ffffff1c;background:#262a2e}
.timeline-audio-track.has-overflow::after{content:"";position:absolute;z-index:4;pointer-events:none;top:0;bottom:0;left:var(--video-end);right:0;background:repeating-linear-gradient(135deg,#05060799 0 5px,#1c2025aa 5px 10px)}
.timeline-audio-clip{position:absolute;top:4px;height:43px;min-width:5px;padding:5px 11px;border:1px solid #5a9a9e;border-radius:10px;background:var(--bg-audio);color:#f0ffff;cursor:grab;touch-action:none;user-select:none;overflow:hidden;z-index:1}
.timeline-audio-clip[aria-pressed=true]{border:2px solid #dcffff;box-shadow:none;z-index:3}
.timeline-audio-clip:active{cursor:grabbing}
.audio-clip-title,.audio-clip-length{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;text-shadow:none}
.audio-clip-title{font-size:12px;font-weight:600}.audio-clip-length{font-size:11px;font-variant-numeric:tabular-nums;color:#d2ecee}
.timeline-audio-clip .trim-handle{background:#a9dcdf}
.timeline-end-line{position:absolute;top:90px;bottom:0;width:1px;border-left:1px dashed #f5bd74;z-index:5;pointer-events:none}
.clip-title,.clip-length{position:absolute;left:12px;right:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:none;font-size:12px;font-weight:600;pointer-events:none}
.clip-title{top:12px}.clip-length{bottom:9px;font-size:11px;font-variant-numeric:tabular-nums}
.trim-handle{position:absolute;top:0;bottom:0;width:8px;z-index:2;background:#ffffffb3;cursor:ew-resize;touch-action:none}
.trim-handle.left{left:0}.trim-handle.right{right:0}
.timeline-playhead{position:absolute;top:24px;bottom:0;width:1px;background:#fff;z-index:3;pointer-events:none;box-shadow:none}
.timeline-playhead i{position:absolute;top:-5px;left:-5px;width:11px;height:11px;background:#fff;border-radius:2px;transform:rotate(45deg)}
.timeline-hint{margin:0;padding:8px 16px 12px;color:var(--text-secondary);font-size:12px;line-height:1.4;flex-shrink:0;overflow-wrap:anywhere}
.timeline.collapsed{height:auto!important;min-height:0}.timeline.collapsed .timeline-body,.timeline.collapsed .timeline-hint,.timeline.collapsed .timeline-grip{display:none}
.clip-name{margin:0 0 12px;color:#f1f1f2;font-size:12px;font-weight:600;overflow-wrap:anywhere}
.clip-field{display:flex;align-items:center;justify-content:space-between;gap:9px;margin:10px 0;color:var(--text-secondary);font-size:12px}
.clip-field>div{display:flex;align-items:center;gap:4px}
.clip-field input[type=number]{width:64px;height:34px;border:1px solid #ffffff24;border-radius:7px;background:#2d2e31;color:#fff;text-align:right;padding:0 7px;font-variant-numeric:tabular-nums}
.clip-field input[type=range]{max-width:100px}
.clip-field output{width:38px;text-align:right;font-variant-numeric:tabular-nums}
.clip-mute{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--text-secondary)}
.clip-mute input{accent-color:#f5f5f7}
@media(max-width:1180px){.timeline-toolbar{flex-wrap:wrap;min-height:77px}.timeline-edit{order:3;width:100%;justify-content:flex-start}.timeline.collapsed{height:auto!important;min-height:0}}
@media(max-width:700px){.workspace{height:72dvh;min-height:530px;grid-template-rows:minmax(0,1fr) auto auto}.timeline{margin:0 8px;height:auto!important;min-height:0}.timeline-grip{display:none}.timeline-toolbar{padding-inline:8px}.timeline-edit{flex-wrap:wrap;gap:6px}.timeline-toolbar button{min-height:30px}.timeline-view label,#timeline-zoom{display:none}.timeline-hint{display:none}.timeline.collapsed{height:auto!important;min-height:0}}

/* Contextual timing controls stay out of the main adjustment flow. */
.timing-details{margin-top:12px}.timing-details summary{font-size:12px;color:var(--text-secondary)}
.clip-order{display:flex;gap:8px;margin-top:12px}.clip-order button{flex:1;min-height:34px;padding:6px;border:1px solid var(--border-control);border-radius:var(--radius-control);background:var(--bg-control);font-size:12px}
.clip-field input[type=number]{border-color:var(--border-control);background:var(--bg-control)}
.clip-mute{min-height:28px}.clip-mute input{width:16px;height:16px;margin:0}
#timeline-collapse[aria-expanded=false] .icon{transform:rotate(180deg)}
.timeline-grip:focus-visible{outline-offset:-2px}.timeline-toolbar button:disabled{opacity:.4}
.timeline-scroll{overflow:auto;scrollbar-gutter:stable}.timeline-content{padding-bottom:4px}
.file-thumbnail:has(img:not([hidden])) #file-placeholder{display:none}
.background-tile:active,.ref-segments button:active{transform:none!important}
@media(max-width:700px){.timeline-toolbar{gap:8px}.timeline-toolbar button{min-height:36px}.workspace{min-height:620px}.timeline-edit{order:3}.clip-field input[type=number],#zoom-input{font-size:16px}.zoom-control button{min-width:32px}.clip-order button{min-height:44px}.clip-mute{min-height:44px}}
@media(forced-colors:active){.ref-value:has(.ref-slider:focus-visible){outline:2px solid Highlight}.ref-segments button[aria-checked=true],.background-tile[aria-pressed=true]{outline:2px solid Highlight}}

.clip-field>label{white-space:nowrap}.clip-field input[type=range]{min-width:0;max-width:80px;flex:1}.clip-field output{flex-shrink:0}

/* Flat, rounded controls derived from the supplied Image Playground reference. */
.primary,.secondary,.quiet-button,.icon-button{border-radius:999px}
.secondary{border:0;background:var(--bg-control);min-height:44px}
.background-grid{gap:14px;padding:4px;margin-top:20px}
.background-tile[aria-pressed=true]{outline-color:var(--accent);outline-offset:3px}
.settings-section h2,.frame-field>label{margin-inline:0;margin-bottom:14px}
.frame-field{margin-top:26px}.file-card-wrap{margin-bottom:18px}
.file-thumbnail{width:28px;min-width:28px;height:44px;border-radius:6px}
.ref-transforms{margin-top:18px}
.zoom-control{height:40px;padding:4px;border:0;border-radius:999px;background:var(--bg-control)}
.zoom-control button{width:32px;height:32px;border-radius:50%}
.zoom-value{border:0;font-size:13px}#zoom-input{font-size:13px}
#zoom-fit{height:40px;min-width:44px;border-radius:999px;background:var(--bg-control);font-size:13px}
.workspace-bottom{padding:16px 24px;min-height:72px}
.clip-field{margin-block:16px;font-size:13px}.clip-name{font-size:13px;line-height:1.5}
.clip-field input[type=number]{min-height:40px;border:0;border-radius:14px;padding-inline:12px}
.clip-order button{border:0;min-height:40px;border-radius:999px}
.timing-details summary{min-height:40px;display:list-item;padding-block:10px}
#detach-audio{border-radius:999px}.clip-mute{min-height:32px}
.dialog-field{border:0}dialog{border:0;border-radius:28px;padding:32px;background:#202020}
dialog select{border:0;border-radius:999px;padding-inline:16px;min-height:44px}
dialog .export-info{border-radius:16px;background:var(--bg-control)}
#toast{border-radius:999px;background:#2c2c2c;color:var(--text-primary)}
.timeline-grip:after{background:#696969}.timeline-toolbar button:disabled{opacity:.4}
@media(max-width:1280px){.timeline-toolbar{flex-wrap:wrap}.timeline-edit{order:3;width:100%;flex-wrap:wrap}}
@media(max-width:700px){.editor{grid-template-columns:none}.inspector{margin:8px}.inspector-heading{padding:24px}.settings-scroll{padding-inline:24px}.workspace{min-height:660px}.timeline-toolbar{gap:10px;padding-inline:12px}.timeline-toolbar button{min-height:38px}.inspector select,.clip-field input[type=number],#zoom-input{font-size:16px}.workspace-bottom{padding:12px}.inspector-actions{padding:20px 24px}}
@media(forced-colors:active){button,select,.ref-value,.ref-segments{border:1px solid ButtonText}}

/* Shared flat dropdowns and signal-based audio previews. */
.inspector .settings-scroll{padding-top:28px}
.ds-select{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:46px;min-height:46px;padding:0 16px;border:0;border-radius:var(--radius-control);background:var(--bg-control);color:var(--text-primary);font-size:14px;text-align:left}
.ds-select::after{content:'';width:7px;height:7px;border-right:1.5px solid var(--text-secondary);border-bottom:1.5px solid var(--text-secondary);transform:rotate(45deg) translateY(-2px);flex-shrink:0}
.ds-select:hover{background:var(--bg-hover)}
.ds-options{position:fixed;z-index:1000;overflow:auto;overscroll-behavior:contain;padding:6px;background:#262626;border:1px solid #414141;border-radius:22px;opacity:0;transform:scale(.99);scrollbar-width:thin;box-shadow:none}
.ds-options.is-open{opacity:1;transform:scale(1)}
.ds-options button{display:flex;align-items:center;width:100%;min-height:40px;padding:10px 12px;gap:12px;text-align:left;border:0;border-radius:16px;background:transparent;color:var(--text-primary);font-size:14px}
.ds-options button[aria-selected=true]{background:var(--bg-selected)}
.ds-options button[aria-selected=true]::after{content:'✓';color:var(--accent);margin-left:auto}
.ds-options button:hover,.ds-options button:focus-visible{background:var(--bg-hover);outline:none}
.ds-option-group{padding:12px 12px 6px;font-size:11px;color:var(--text-secondary)}
.audio-waveform{position:absolute;left:0;bottom:2px;width:100%;height:22px;pointer-events:none;color:#9ad8ce}
.audio-waveform path{stroke:currentColor;stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke}
.audio-clip-title{position:relative;font-size:11px;line-height:14px}
.audio-clip-length{position:relative;font-size:9px;opacity:.85}
.timeline-audio-clip:has(.audio-waveform path) .audio-clip-length{display:none}
@media(prefers-reduced-motion:no-preference){
.ds-options{transition:opacity 150ms cubic-bezier(.22,1,.36,1),transform 150ms cubic-bezier(.22,1,.36,1)}
.ds-options.is-open{transition-duration:250ms;@starting-style{opacity:0;transform:scale(.97)}}
#toast.show{transition-duration:150ms}
dialog{opacity:0;transform:scale(.96);transition:opacity 150ms cubic-bezier(.22,1,.36,1),transform 150ms cubic-bezier(.22,1,.36,1),display 150ms allow-discrete,overlay 150ms allow-discrete}
dialog[open]{opacity:1;transform:scale(1);transition-duration:250ms;@starting-style{opacity:0;transform:scale(.96)}}
}

/* Export shares the editor controls, including menus in the modal top layer. */
.ds-options[popover]{margin:0;inset:auto;color:var(--text-primary)}
#export-dialog{width:min(440px,calc(100vw - 32px));overflow:visible;padding:32px}
#export-dialog h2{margin:0 40px 10px 0;font-size:24px;letter-spacing:-.03em}
#export-description{line-height:1.5;margin:0 0 28px;color:var(--text-secondary)}
#export-dialog .field-row{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 20px}
#export-dialog .field-row label{font-size:12px;color:var(--text-secondary)}
#export-dialog .ds-select{height:46px;min-height:46px}
#export-dialog .export-info{padding:16px;text-align:center;font-variant-numeric:tabular-nums;margin:24px 0}
#export-dialog .wide{min-height:46px;border-radius:23px;margin-top:8px}
#export-dialog .export-footnote{font-size:12px;line-height:1.6;margin-top:20px}
#export-dialog:has(#cancel-export:not([hidden])) .close-dialog{visibility:hidden}
.ds-select:disabled{opacity:.5;cursor:default}

.ds-select.is-readonly{opacity:1;cursor:default}.ds-select.is-readonly::after{display:none}