/*
 * THE COSTUME AND SOUND EDITORS (public/stage/costume-studio.js,
 * sound-studio.js), after xplore_scratch_editors_v3.0.
 *
 * Orange is the confirming colour, purple marks costume and animation
 * selection, magenta marks sound. Every surface and line comes from the
 * shell's tokens, so both themes follow; the brand colours are literal.
 * The artboard stays white in both themes: it is the picture's own ground.
 */

.xs-host, .xs-menu, .xs-confirm {
  --xs-orange: #f15f25;
  --xs-orange-dark: #c94312;
  --xs-orange-ink: var(--xp-orange-strong, #c94312);
  --xs-orange-soft: color-mix(in srgb, #f15f25 13%, var(--xp-surface));
  --xs-purple: #7257e8;
  --xs-purple-ink: #b8a9ff;
  --xs-purple-soft: color-mix(in srgb, #7257e8 18%, var(--xp-surface));
  --xs-sound: #c94fc8;
  --xs-sound-dark: #963798;
  --xs-sound-ink: #eaa6e9;
  --xs-sound-soft: color-mix(in srgb, #c94fc8 15%, var(--xp-surface));
  --xs-danger: #e0524e;
  --xs-panel: var(--xp-surface);
  --xs-ground: var(--xp-canvas);
  --xs-field: color-mix(in srgb, var(--xp-canvas) 55%, var(--xp-surface));
  --xs-line: var(--xp-border);
  --xs-ink: var(--xp-text);
  --xs-muted: var(--xp-muted);
  --xs-check-a: color-mix(in srgb, var(--xp-canvas) 88%, var(--xp-text));
  --xs-check-b: color-mix(in srgb, var(--xp-canvas) 94%, var(--xp-text));
  --xs-shadow: 0 12px 30px rgb(0 0 0 / .28);
  --xs-focus: 3px solid color-mix(in srgb, #f15f25 70%, transparent);
  color: var(--xs-ink);
}
:root[data-theme="light"] :is(.xs-host, .xs-menu, .xs-confirm) {
  --xs-purple-ink: #5742bc;
  --xs-sound-ink: #963798;
  --xs-danger: #d83d39;
  --xs-shadow: 0 12px 30px rgb(37 30 24 / .09);
}

.xs-icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.xs-icon.flip { transform: scaleX(-1); }

.xs-host { height: 100%; min-height: 0; container: xs / inline-size; }
.xs-host button, .xs-host input { font: inherit; color: inherit; }
.xs-host :is(button, input, [tabindex]):focus-visible,
:is(.xs-menu, .xs-confirm) :is(button, input):focus-visible { outline: var(--xs-focus); outline-offset: 2px; }
.xs-host button:disabled { opacity: .4; cursor: default; }
.xs-host h2, .xs-host h3, .xs-host p { margin: 0; }

.xs-page {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 312px minmax(620px, 1fr) 330px;
  background: var(--xs-ground);
  position: relative;
  overflow: hidden;
}
.xs-page.xs-sounds { grid-template-columns: 320px minmax(620px, 1fr) 330px; }

/* ----------------------------------------------------------- the sidebar */
.xs-sidebar, .xs-inspector { background: var(--xs-panel); min-width: 0; min-height: 0; }
.xs-sidebar { border-right: 1px solid var(--xs-line); padding: 20px 18px 14px; display: flex; flex-direction: column; overflow: hidden; }
.xs-inspector { border-left: 1px solid var(--xs-line); padding: 20px 22px; overflow-y: auto; }
.xs-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.xs-eyebrow, .xs-label { display: block; color: var(--xs-muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.xs-eyebrow { margin-bottom: 4px; }
.xs-title { font-size: 24px; line-height: 1.1; letter-spacing: -.02em; }
.xs-add {
  border: 0; background: var(--xs-orange); color: #fff !important; min-height: 40px; padding: 0 14px; border-radius: 11px;
  display: inline-flex; align-items: center; gap: 7px; font-weight: 760; cursor: pointer; white-space: nowrap;
  box-shadow: 0 7px 16px rgb(241 95 37 / .22);
}
.xs-add:hover { background: var(--xs-orange-dark); }
.xs-add .xs-icon { width: 17px; height: 17px; }
.xs-add-sound { background: var(--xs-sound); box-shadow: 0 7px 16px rgb(201 79 200 / .22); }
.xs-add-sound:hover { background: var(--xs-sound-dark); }
.xs-search { min-height: 42px; margin-top: 16px; border: 1px solid var(--xs-line); border-radius: 11px; background: var(--xs-field); display: flex; align-items: center; padding: 0 12px; gap: 9px; }
.xs-search .xs-icon { width: 17px; color: var(--xs-muted); }
.xs-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; }
.xs-search:focus-within { border-color: var(--xs-orange); }
.xs-subrow { min-height: 40px; display: flex; align-items: center; color: var(--xs-muted); font-size: 10px; font-weight: 800; letter-spacing: .09em; }
.xs-list { list-style: none; margin: 0; padding: 2px 2px 12px; display: flex; flex-direction: column; gap: 8px; overflow: auto; min-height: 0; flex: 1; scrollbar-width: thin; }
.xs-empty { color: var(--xs-muted); font-size: 12px; padding: 8px 4px; flex: 1; }

.xs-costume-item {
  width: 100%; min-height: 80px; border: 1px solid var(--xs-line); border-radius: 13px; background: var(--xs-panel);
  padding: 8px 10px 8px 5px; display: grid; grid-template-columns: 10px 62px minmax(0, 1fr) 26px; align-items: center; gap: 8px;
  text-align: left; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.xs-costume-item:hover { border-color: color-mix(in srgb, var(--xs-line) 50%, var(--xs-ink)); transform: translateY(-1px); }
.xs-costume-item.selected { border: 2px solid var(--xs-orange); padding: 7px 9px 7px 4px; background: var(--xs-orange-soft); }
.xs-costume-item img { width: 62px; height: 62px; object-fit: contain; }
.xs-drag { width: 6px; height: 26px; opacity: .7; cursor: grab; background: radial-gradient(circle, var(--xs-muted) 1.2px, transparent 1.4px) 0 0 / 6px 6px; }
.xs-item-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.xs-item-copy strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xs-item-copy small { color: var(--xs-muted); font-size: 11px; }
.xs-item-index { width: 24px; height: 24px; border-radius: 7px; background: var(--xs-field); display: grid; place-items: center; color: var(--xs-muted); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.selected .xs-item-index { background: var(--xs-orange); color: #fff; }
.xs-costume-row.dragging { opacity: .45; }
.xs-costume-row.drop-before { box-shadow: 0 -3px 0 var(--xs-orange); border-radius: 13px; }
.xs-costume-row.drop-after { box-shadow: 0 3px 0 var(--xs-orange); border-radius: 13px; }

.xs-asset-actions { margin-top: auto; padding-top: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; border-top: 1px solid var(--xs-line); }
.xs-asset-actions.xs-three { grid-template-columns: repeat(3, 1fr); }
.xs-asset-actions button { border: 0; background: transparent; min-height: 48px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--xs-muted); font-size: 11px; font-weight: 700; cursor: pointer; border-radius: 9px; }
.xs-asset-actions button:hover:not(:disabled) { background: var(--xs-orange-soft); color: var(--xs-orange-ink); }
.xs-sounds .xs-asset-actions button:hover:not(:disabled) { background: var(--xs-sound-soft); color: var(--xs-sound-ink); }

.xs-filters { min-height: 48px; display: flex; align-items: center; gap: 7px; }
.xs-filters button { border: 1px solid var(--xs-line); background: var(--xs-panel); border-radius: 999px; min-height: 32px; padding: 0 13px; font-size: 12px; font-weight: 750; color: var(--xs-muted); cursor: pointer; }
.xs-filters button.active { color: var(--xs-sound-ink); background: var(--xs-sound-soft); border-color: var(--xs-sound); }
.xs-sound-item { min-height: 74px; border: 1px solid var(--xs-line); background: var(--xs-panel); border-radius: 13px; padding: 9px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 40px; align-items: center; gap: 8px; }
.xs-sound-item.selected { border: 2px solid var(--xs-sound); padding: 8px; background: var(--xs-sound-soft); }
.xs-sound-play { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--xs-sound-soft); color: var(--xs-sound-ink); display: grid; place-items: center; cursor: pointer; }
.xs-sound-play .xs-icon { width: 16px; height: 16px; }
.selected .xs-sound-play { background: var(--xs-sound); color: #fff; }
.xs-sound-pick { border: 0; background: transparent; text-align: left; min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 4px; cursor: pointer; padding: 0; }
.xs-sound-pick strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xs-sound-pick small { color: var(--xs-muted); font-size: 11px; }
.xs-more { width: 40px; height: 40px; border: 0; background: transparent; border-radius: 9px; color: var(--xs-muted); display: grid; place-items: center; cursor: pointer; }
.xs-more:hover { background: var(--xs-field); }
.xs-library-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; }
.xs-library-tile small { color: var(--xs-muted); font-size: 11px; }

/* ----------------------------------------------------------- the workspace */
.xs-workspace { min-width: 0; min-height: 0; position: relative; overflow: hidden; background: var(--xs-ground); }
.xs-costume-workspace { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.xs-docline, .xs-sound-head { display: flex; align-items: center; gap: 14px; padding: 12px 22px 8px; background: var(--xs-panel); }
.xs-sound-head { min-height: 70px; border-bottom: 1px solid var(--xs-line); padding: 10px 22px; }
.xs-doctitle { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.xs-doctitle > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xs-doctitle strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xs-doctitle small, .xs-docmeta { color: var(--xs-muted); font-size: 11px; }
.xs-docmeta { display: flex; gap: 18px; font-variant-numeric: tabular-nums; }
.xs-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--xs-purple); box-shadow: 0 0 0 4px var(--xs-purple-soft); }
.xs-dot-sound { background: var(--xs-sound); box-shadow: 0 0 0 4px var(--xs-sound-soft); }
.xs-drawer-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--xs-line); border-radius: 10px; background: var(--xs-panel); place-items: center; cursor: pointer; }

.xs-toolbar { background: var(--xs-panel); border-bottom: 1px solid var(--xs-line); display: flex; align-items: center; padding: 4px 14px 8px; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.xs-tool-group { display: flex; align-items: center; gap: 3px; }
.xs-tool-divider { width: 1px; height: 34px; background: var(--xs-line); flex: 0 0 1px; }
.xs-tool-spacer { flex: 1; }
.xs-tool { min-width: 56px; min-height: 52px; border: 1px solid transparent; background: transparent; border-radius: 10px; color: var(--xs-muted); padding: 4px 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; }
.xs-tool:hover:not(:disabled) { color: var(--xs-ink); background: var(--xs-field); }
.xs-tool.active { background: var(--xs-orange-soft); color: var(--xs-orange-ink); border-color: color-mix(in srgb, var(--xs-orange) 35%, transparent); }
.xs-tool .xs-icon { width: 19px; height: 19px; }
.xs-tool span { font-size: 10px; font-weight: 720; white-space: nowrap; }
.xs-tool.xs-tool-wide { flex-direction: row; min-width: 0; padding: 0 14px; gap: 7px; border-color: var(--xs-line); background: var(--xs-panel); min-height: 44px; }
.xs-tool.xs-tool-wide span { font-size: 12px; }
.xs-tool.danger { color: var(--xs-danger); background: color-mix(in srgb, var(--xs-danger) 9%, var(--xs-panel)); border-color: color-mix(in srgb, var(--xs-danger) 30%, var(--xs-line)); }

.xs-canvas-region { padding: 14px 20px 8px; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.xs-art-scroll {
  flex: 1; min-height: 0; overflow: auto; position: relative; border-radius: 15px; border: 1px solid var(--xs-line);
  background-color: var(--xs-check-b);
  background-image: linear-gradient(45deg, var(--xs-check-a) 25%, transparent 25%), linear-gradient(-45deg, var(--xs-check-a) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--xs-check-a) 75%), linear-gradient(-45deg, transparent 75%, var(--xs-check-a) 75%);
  background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}
.xs-art-room { min-width: 100%; min-height: 100%; width: max-content; height: max-content; display: grid; place-items: center; padding: 40px 24px 24px; box-sizing: border-box; }
.xs-artboard { position: relative; background: #fff; box-shadow: 0 14px 34px rgb(0 0 0 / .18); touch-action: none; cursor: default; }
.xs-artboard[data-tool="brush"], .xs-artboard[data-tool="eraser"], .xs-artboard[data-tool="line"], .xs-artboard[data-tool="shape"] { cursor: crosshair; }
.xs-artboard[data-tool="text"] { cursor: text; }
.xs-artboard[data-tool="fill"] { cursor: cell; }
.xs-art-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.xs-axis { position: absolute; background: #c9d8ea; opacity: .8; pointer-events: none; }
.xs-axis-x { height: 1px; left: 0; right: 0; top: 50%; }
.xs-axis-y { width: 1px; top: 0; bottom: 0; left: 50%; }
.xs-art-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; z-index: 6; }
.xs-artboard.previewing :is(.xs-selection, .xs-points, .xs-centre, .xs-axis) { display: none; }

.xs-selection { position: absolute; border: 1.5px solid var(--xs-purple); pointer-events: none; transform-origin: center; z-index: 3; }
.xs-handle { position: absolute; width: 12px; height: 12px; border-radius: 3px; border: 2px solid var(--xs-purple); background: #fff; pointer-events: auto; }
.xs-handle::before { content: ""; position: absolute; inset: -12px; }
.xs-handle.nw { top: -7px; left: -7px; cursor: nwse-resize; }
.xs-handle.ne { top: -7px; right: -7px; cursor: nesw-resize; }
.xs-handle.sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.xs-handle.se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.xs-rotate { position: absolute; top: -38px; left: 50%; width: 16px; height: 16px; margin-left: -8px; padding: 0; border-radius: 50%; background: #fff; border: 2px solid var(--xs-purple); pointer-events: auto; cursor: grab; }
.xs-rotate::before { content: ""; position: absolute; inset: -12px; }
.xs-rotate-stem { position: absolute; top: -22px; left: 50%; width: 1.5px; height: 22px; background: var(--xs-purple); }
.xs-points { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.xs-point { position: absolute; width: 14px; height: 14px; padding: 0; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid var(--xs-purple); background: #fff; pointer-events: auto; cursor: move; }
.xs-point::before { content: ""; position: absolute; inset: -12px; }
.xs-centre { position: absolute; width: 30px; height: 30px; padding: 0; transform: translate(-50%, -50%); border: 0; background: transparent; cursor: move; z-index: 5; border-radius: 50%; }
.xs-centre::before, .xs-centre::after { content: ""; position: absolute; background: var(--xs-orange); left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 1px #fff; }
.xs-centre::before { width: 24px; height: 2.5px; }
.xs-centre::after { width: 2.5px; height: 24px; }
.xs-text-entry { position: absolute; transform: translate(-50%, -50%); z-index: 7; min-width: 180px; min-height: 40px; padding: 0 10px; border: 2px solid var(--xs-orange); border-radius: 8px; background: #fff; color: #181b20 !important; font-size: 18px; }

.xs-zoom-bar { min-height: 40px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.xs-hint { flex: 1; color: var(--xs-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xs-zoom-bar button { min-width: 40px; height: 36px; border: 1px solid var(--xs-line); border-radius: 9px; background: var(--xs-panel); display: grid; place-items: center; cursor: pointer; }
.xs-zoom-bar .xs-icon { width: 16px; }
.xs-zoom-bar input { width: 120px; accent-color: var(--xs-orange); }
.xs-zoom-bar output { font-size: 12px; color: var(--xs-muted); width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.xs-fit { padding: 0 12px; font-size: 12px; font-weight: 750; }

.xs-anim-strip { background: var(--xs-panel); border-top: 1px solid var(--xs-line); padding: 12px 18px; display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.xs-strip-heading { padding-right: 16px; border-right: 1px solid var(--xs-line); display: flex; flex-direction: column; gap: 12px; }
.xs-strip-heading > div { display: flex; flex-direction: column; gap: 4px; }
.xs-strip-heading strong { font-size: 14px; }
.xs-strip-heading small { color: var(--xs-muted); font-size: 11px; }
.xs-preview-button { min-height: 40px; border: 0; border-radius: 10px; background: var(--xs-purple); color: #fff !important; display: flex; align-items: center; justify-content: center; gap: 7px; font-weight: 750; cursor: pointer; }
.xs-preview-button .xs-icon { width: 15px; }
.xs-frame-track { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 4px 2px; scrollbar-width: thin; }
.xs-frame { height: 128px; width: 96px; flex: 0 0 96px; border: 1px solid var(--xs-line); background: var(--xs-field); border-radius: 12px; padding: 6px; position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.xs-frame.active { border: 2px solid var(--xs-purple); padding: 5px; background: var(--xs-purple-soft); }
.xs-frame-number { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; border-radius: 7px; background: var(--xs-panel); display: grid; place-items: center; color: var(--xs-muted); font-size: 10px; font-weight: 800; }
.xs-frame img { width: 100%; height: 88px; object-fit: contain; }
.xs-frame small { font-size: 11px; font-weight: 750; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xs-frame-link { height: 2px; width: 16px; flex: 0 0 16px; background: var(--xs-line); }
.xs-frame-setting { padding-left: 18px; border-left: 1px solid var(--xs-line); display: flex; flex-direction: column; gap: 9px; }
.xs-pills { display: flex; gap: 6px; }
.xs-pills button { min-height: 36px; border: 1px solid var(--xs-line); background: var(--xs-panel); border-radius: 9px; padding: 0 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.xs-pills button.active { border-color: var(--xs-purple); background: var(--xs-purple-soft); color: var(--xs-purple-ink); }
.xs-link-button { align-self: flex-start; min-height: 32px; border: 0; background: transparent; color: var(--xs-purple-ink); font-size: 12px; font-weight: 750; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------------- the inspector */
.xs-inspector .xs-heading { margin-bottom: 18px; }
.xs-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; min-width: 0; }
.xs-field > span:first-child { color: var(--xs-muted); font-size: 11px; font-weight: 750; }
.xs-field > input, .xs-unit-input { min-height: 40px; border: 1px solid var(--xs-line); border-radius: 10px; background: var(--xs-field); padding: 0 11px; width: 100%; font-weight: 650; box-sizing: border-box; }
.xs-unit-input { display: flex; align-items: center; gap: 6px; }
.xs-unit-input input { border: 0; background: transparent; width: 100%; min-width: 0; outline: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.xs-unit-input small { color: var(--xs-muted); }
.xs-field > input:focus, .xs-unit-input:focus-within { border-color: var(--xs-orange); }
.xs-field-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: end; gap: 6px; }
.xs-field-row .xs-field { margin-bottom: 0; }
.xs-ratio { width: 40px; height: 40px; border: 0; background: transparent; border-radius: 9px; color: var(--xs-muted); display: grid; place-items: center; cursor: pointer; }
.xs-ratio[aria-pressed="true"] { color: var(--xs-orange-ink); background: var(--xs-orange-soft); }
.xs-section { border-top: 1px solid var(--xs-line); padding-top: 16px; margin-top: 18px; }
.xs-section h3 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; }
.xs-section-title { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.xs-section-title h3 { margin: 0; }
.xs-colour-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; margin-bottom: 10px; color: var(--xs-muted); font-size: 12px; }
.xs-swatch { min-height: 40px; border: 1px solid var(--xs-line); background: var(--xs-field); border-radius: 9px; display: flex; align-items: center; gap: 9px; padding: 0 8px; }
.xs-swatch input { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.xs-swatch b { font-size: 12px; color: var(--xs-ink); font-variant-numeric: tabular-nums; }
.xs-slider { display: block; margin-top: 12px; }
.xs-slider > span { display: flex; justify-content: space-between; color: var(--xs-muted); font-size: 12px; margin-bottom: 6px; }
.xs-slider b { color: var(--xs-ink); font-variant-numeric: tabular-nums; }
.xs-slider input { width: 100%; accent-color: var(--xs-orange); }
.xs-sounds .xs-slider input { accent-color: var(--xs-sound); }
.xs-transform { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.xs-transform button { min-height: 60px; border: 1px solid var(--xs-line); background: var(--xs-field); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 12px; font-weight: 700; cursor: pointer; }
.xs-arrange { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.xs-arrange button { min-height: 40px; border: 1px solid var(--xs-line); background: var(--xs-field); border-radius: 9px; font-size: 12px; font-weight: 700; cursor: pointer; }
.xs-transform button:hover:not(:disabled), .xs-arrange button:hover:not(:disabled) { border-color: var(--xs-orange); }
.xs-tip { margin-top: 20px; padding: 13px; border-radius: 12px; background: var(--xs-purple-soft); color: var(--xs-purple-ink); display: flex; align-items: flex-start; gap: 10px; }
.xs-tip strong { font-size: 12px; }
.xs-tip p { margin-top: 3px; font-size: 11px; line-height: 1.45; color: var(--xs-ink); opacity: .78; }
.xs-tip-sound { background: var(--xs-sound-soft); color: var(--xs-sound-ink); }

/* ----------------------------------------------------------- sound: middle */
.xs-sound-workspace { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.xs-head-actions { display: flex; gap: 8px; align-items: center; }
.xs-button { min-height: 40px; border: 1px solid var(--xs-line); background: var(--xs-panel); border-radius: 10px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 750; cursor: pointer; white-space: nowrap; }
.xs-button .xs-icon { width: 15px; height: 15px; }
.xs-button.small { min-height: 36px; }
.xs-button.icon-only { width: 40px; padding: 0; }
.xs-button.primary { background: var(--xs-orange); border-color: var(--xs-orange); color: #fff !important; padding: 0 16px; }
.xs-button.primary:hover:not(:disabled) { background: var(--xs-orange-dark); }
.xs-button.primary-soft { color: var(--xs-sound-ink); background: var(--xs-sound-soft); border-color: color-mix(in srgb, var(--xs-sound) 45%, transparent); }
.xs-button.danger { background: var(--xs-danger); border-color: var(--xs-danger); color: #fff !important; }
.xs-button:hover:not(:disabled):not(.primary):not(.danger) { border-color: color-mix(in srgb, var(--xs-line) 40%, var(--xs-ink)); }
.xs-sound-area { min-height: 0; padding: 20px 26px 26px; overflow: auto; }
.xs-transport { min-height: 68px; background: var(--xs-panel); border: 1px solid var(--xs-line); border-radius: 14px 14px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; flex-wrap: wrap; }
.xs-transport-controls, .xs-transport-right { display: flex; align-items: center; gap: 10px; }
.xs-transport-small { width: 40px; height: 40px; border: 0; background: var(--xs-field); border-radius: 10px; display: grid; place-items: center; color: var(--xs-muted); cursor: pointer; }
.xs-transport-small .xs-icon { width: 16px; }
.xs-transport-play { width: 48px; height: 48px; border: 0; border-radius: 14px; color: #fff !important; background: var(--xs-sound); display: grid; place-items: center; box-shadow: 0 7px 16px rgb(201 79 200 / .25); cursor: pointer; }
.xs-timecode { display: flex; align-items: baseline; gap: 7px; margin-left: 6px; color: var(--xs-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.xs-timecode b { color: var(--xs-ink); font-size: 15px; }
.xs-timecode i { font-style: normal; opacity: .6; }
.xs-volume-icon { color: var(--xs-muted); display: grid; }
.xs-transport-right input { width: 96px; accent-color: var(--xs-sound); }
.xs-wave-card { background: var(--xs-panel); border: 1px solid var(--xs-line); border-top: 0; box-shadow: var(--xs-shadow); }
.xs-wave-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.xs-wave-inner { margin: 0 20px; position: relative; }
.xs-wave-ruler { height: 32px; position: relative; border-bottom: 1px solid var(--xs-line); color: var(--xs-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.xs-wave-ruler span { position: absolute; top: 9px; transform: translateX(-50%); white-space: nowrap; }
.xs-wave { position: relative; height: clamp(220px, 36vh, 400px); touch-action: none; cursor: text; }
.xs-wave:focus-visible { outline: var(--xs-focus); outline-offset: -3px; }
.xs-wave-canvas { width: 100%; height: 100%; display: block; }
.xs-zero-line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: color-mix(in srgb, var(--xs-ink) 18%, transparent); pointer-events: none; }
.xs-wave-selection { position: absolute; top: 0; bottom: 0; background: rgb(241 95 37 / .1); border-left: 2px solid var(--xs-orange); border-right: 2px solid var(--xs-orange); pointer-events: none; box-sizing: border-box; }
.xs-selection-label { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: var(--xs-orange); color: #fff; padding: 5px 10px; border-radius: 7px; white-space: nowrap; font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums; }
.xs-selection-handle { position: absolute; top: 50%; width: 10px; height: 40px; transform: translateY(-50%); background: #fff; border: 2px solid var(--xs-orange); border-radius: 5px; box-shadow: 0 2px 6px rgb(0 0 0 / .18); pointer-events: auto; cursor: ew-resize; }
.xs-selection-handle::before { content: ""; position: absolute; inset: -6px -14px; }
.xs-selection-handle.start { left: -6px; }
.xs-selection-handle.end { right: -6px; }
.xs-playhead { position: absolute; top: 0; bottom: 0; width: 1.5px; background: var(--xs-ink); pointer-events: none; }
.xs-playhead span { position: absolute; top: 0; left: -5px; width: 11px; height: 9px; background: var(--xs-ink); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.xs-wave-status { min-height: 38px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--xs-line); color: var(--xs-muted); font-size: 12px; }
.xs-wave-status b { color: var(--xs-ink); font-variant-numeric: tabular-nums; }
.xs-command-bar { min-height: 70px; background: var(--xs-panel); border: 1px solid var(--xs-line); border-top: 0; border-radius: 0 0 14px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; flex-wrap: wrap; }
.xs-command-group { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.xs-command-group .xs-label { margin-right: 4px; }
.xs-wave-zoom input { width: 90px; accent-color: var(--xs-sound); }
.xs-audition { margin-top: 16px; border: 1px solid var(--xs-line); background: var(--xs-panel); border-radius: 14px; padding: 14px 16px 16px; }
.xs-audition-row { margin-top: 10px; display: flex; align-items: stretch; gap: 14px; }
.xs-audition-card { flex: 1; min-width: 160px; border: 1px solid var(--xs-line); border-radius: 12px; background: var(--xs-field); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer; }
.xs-audition-card.edited { border-color: color-mix(in srgb, var(--xs-orange) 45%, var(--xs-line)); background: var(--xs-orange-soft); }
.xs-audition-card.playing { outline: 2px solid var(--xs-sound); outline-offset: -2px; }
.xs-audition-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.xs-audition-top strong { font-size: 13px; }
.xs-audition-top small { color: var(--xs-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.xs-mini-wave { width: 100%; height: 44px; display: block; }
.xs-change-arrow { align-self: center; color: var(--xs-muted); display: grid; }
.xs-preview-edit { align-self: center; min-height: 46px; border: 0; background: var(--xs-orange); color: #fff !important; border-radius: 11px; padding: 0 20px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 760; cursor: pointer; white-space: nowrap; }
.xs-preview-edit:hover:not(:disabled) { background: var(--xs-orange-dark); }
.xs-preview-edit .xs-icon { width: 15px; }

/* ----------------------------------------------------------- sound: inspector */
.xs-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.xs-summary div { min-width: 0; padding: 10px 8px; border-radius: 10px; background: var(--xs-field); border: 1px solid var(--xs-line); display: flex; flex-direction: column; gap: 4px; }
.xs-summary small { color: var(--xs-muted); font-size: 10px; }
.xs-summary strong { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xs-text-button { min-height: 40px; border: 0; background: transparent; color: var(--xs-sound-ink); font-size: 12px; font-weight: 750; cursor: pointer; padding: 0 4px; }
.xs-effects { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.xs-effects button { min-height: 66px; border: 1px solid var(--xs-line); border-radius: 10px; background: var(--xs-field); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--xs-muted); cursor: pointer; }
.xs-effects button.active { border: 2px solid var(--xs-sound); background: var(--xs-sound-soft); color: var(--xs-sound-ink); }
.xs-effects strong { font-size: 12px; }
.xs-effect-icon { width: 40px; height: 19px; display: block; background: linear-gradient(to top right, transparent 45%, currentColor 46% 54%, transparent 55%); }
.xs-effect-icon.fade-out { transform: scaleX(-1); }
.xs-effect-icon.reverse { background: linear-gradient(90deg, transparent 0 10%, currentColor 10% 20%, transparent 20% 30%, currentColor 30% 60%, transparent 60% 70%, currentColor 70% 90%, transparent 90%); height: 3px; }
.xs-effect-icon.normalize { background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px); }
.xs-help { color: var(--xs-muted); font-size: 12px; line-height: 1.5; margin-top: 4px !important; }
.xs-switch { position: relative; display: inline-flex; width: 44px; height: 40px; align-items: center; cursor: pointer; }
.xs-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.xs-switch span { width: 42px; height: 24px; border-radius: 999px; background: var(--xs-line); display: block; position: relative; transition: background .15s; }
.xs-switch span::after { content: ""; width: 18px; height: 18px; border-radius: 50%; background: #fff; position: absolute; top: 3px; left: 3px; box-shadow: 0 1px 4px rgb(0 0 0 / .25); transition: left .15s; }
.xs-switch input:checked + span { background: var(--xs-sound); }
.xs-switch input:checked + span::after { left: 21px; }
.xs-switch input:focus-visible + span { outline: var(--xs-focus); outline-offset: 2px; }

/* ----------------------------------------------------------- menus and dialogs */
.xs-menu { position: fixed; z-index: 2000; min-width: 230px; padding: 6px; border-radius: 12px; border: 1px solid var(--xs-line); background: var(--xs-panel); box-shadow: 0 16px 34px rgb(0 0 0 / .3); display: flex; flex-direction: column; gap: 2px; }
.xs-menu-item { min-height: 40px; border: 0; background: transparent; border-radius: 8px; padding: 0 12px; display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; font-size: 13px; font-weight: 650; color: var(--xs-ink); cursor: pointer; }
.xs-menu-item:hover:not(:disabled), .xs-menu-item:focus-visible { background: var(--xs-field); outline: none; }
.xs-menu-item.danger { color: var(--xs-danger); }
.xs-menu-item:disabled { opacity: .4; cursor: default; }
.xs-confirm { max-width: min(480px, 92vw); border: 1px solid var(--xs-line); border-radius: 16px; background: var(--xs-panel); padding: 22px 24px; box-shadow: 0 24px 60px rgb(0 0 0 / .35); }
.xs-confirm::backdrop { background: rgb(0 0 0 / .45); }
.xs-confirm h2 { margin: 0 0 8px; font-size: 19px; }
.xs-confirm p { margin: 0 0 10px; color: var(--xs-muted); line-height: 1.5; font-size: 13px; }
.xs-confirm ul { margin: 0 0 16px; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.xs-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.xs-frame-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin: 12px 0 16px; max-height: 50vh; overflow: auto; }
.xs-frame-choice { border: 1px solid var(--xs-line); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; position: relative; }
.xs-frame-choice:has(input:checked) { border: 2px solid var(--xs-purple); background: var(--xs-purple-soft); padding: 5px; }
.xs-frame-choice input { position: absolute; top: 6px; left: 6px; width: 18px; height: 18px; accent-color: var(--xs-purple); }
.xs-frame-choice img { width: 72px; height: 72px; object-fit: contain; }

.xs-page.is-empty .xs-workspace > *, .xs-page.is-empty .xs-inspector > * { opacity: .5; pointer-events: none; }

/* ----------------------------------------------------------- narrower */
@container xs (max-width: 1439px) {
  .xs-page, .xs-page.xs-sounds { grid-template-columns: 260px minmax(0, 1fr) 280px; }
  .xs-drawing-tools .xs-tool span, .xs-tool-group:first-child .xs-tool span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .xs-drawing-tools .xs-tool, .xs-tool-group:first-child .xs-tool { min-width: 44px; }
  .xs-anim-strip { grid-template-columns: 150px minmax(0, 1fr) auto; }
  .xs-docmeta { display: none; }
  .xs-inspector, .xs-sidebar { padding-left: 16px; padding-right: 16px; }
  .xs-sidebar .xs-add span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .xs-audition-row { flex-wrap: wrap; }
}
@container xs (max-width: 1023px) {
  .xs-page, .xs-page.xs-sounds { grid-template-columns: minmax(0, 1fr); }
  .xs-workspace { grid-column: 1; }
  .xs-drawer-toggle { display: grid; }
  .xs-sidebar, .xs-inspector { position: absolute; top: 0; bottom: 0; z-index: 30; width: min(320px, 86%); box-shadow: var(--xp-shadow-drawer); transition: transform .2s ease; }
  .xs-sidebar { left: 0; transform: translateX(-102%); }
  .xs-inspector { right: 0; transform: translateX(102%); }
  .xs-page[data-drawers="sidebar"] .xs-sidebar, .xs-page[data-drawers="inspector"] .xs-inspector { transform: none; }
  .xs-anim-strip { grid-template-columns: minmax(0, 1fr); }
  .xs-strip-heading { border-right: 0; padding-right: 0; flex-direction: row; justify-content: space-between; align-items: center; }
  .xs-frame-setting { border-left: 0; padding-left: 0; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .xs-sound-area { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .xs-host *, .xs-menu, .xs-confirm { transition: none !important; }
}
@media (forced-colors: active) {
  .xs-costume-item.selected, .xs-sound-item.selected, .xs-frame.active, .xs-tool.active { outline: 3px solid Highlight; }
}

/* A short window: the preview strip gives the artboard and the waveform
 * the height, and the page scrolls rather than squeezing either to nothing. */
@media (max-height: 760px) {
  .xs-costume-workspace { grid-template-rows: auto auto minmax(240px, 1fr) auto; overflow-y: auto; }
  .xs-anim-strip { padding-top: 8px; padding-bottom: 8px; }
  .xs-frame { height: 92px; flex-basis: 76px; width: 76px; }
  .xs-frame img { height: 56px; }
  .xs-docline { padding-top: 8px; padding-bottom: 4px; }
  .xs-wave { height: clamp(180px, 34vh, 300px); }
}