:root {
  color-scheme: dark;
  --shell: #14181b;
  --dock: #1a2024;
  --panel: #222a2f;
  --line: #353e45;
  --text: #edf0ed;
  --muted: #b3bec4;
  --dim: #9eafb8;
  --accent: #f0c68c;
  --accent-ink: #282017;
  --accent-hover: #ffdbac;
  --tab-active: #f0c68c0b;
  --badge-bg: #f0c68c12;
  --selection: #393126;
  --selection-line: #79654a;
  --scrollbar: #526069;
  --grid: #b9cad014;
  --canvas-center: #29363d;
  --canvas-mid: #20292e;
  --canvas-edge: #1c2327;
  --drawing-surround: #242e34;
  --tag-line: #53616a;
  --tag-ink: #e0e7e8;
  --cut-key: #e8a481;
  --score-key: #ba9bff;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  font: 14px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --shell: #fffdf8;
  --dock: #f8f6f0;
  --panel: #eeebe3;
  --line: #d4cfc3;
  --text: #242a2b;
  --muted: #4d585b;
  --dim: #535f60;
  --accent: #86491d;
  --accent-ink: #fffaf2;
  --accent-hover: #703b16;
  --tab-active: #f5eadb;
  --badge-bg: #86491d12;
  --selection: #f3e6d4;
  --selection-line: #b0845a;
  --scrollbar: #a39b8f;
  --grid: #46585f29;
  --canvas-center: #f4f7f6;
  --canvas-mid: #edf1ef;
  --canvas-edge: #e7ece9;
  --drawing-surround: #e6ebe8;
  --tag-line: #b7c1bc;
  --tag-ink: #364442;
  --cut-key: #a75236;
  --score-key: #7c3aed;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--shell); color: var(--text); }
button, select, a { -webkit-tap-highlight-color: transparent; }
button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .47; }
a { color: var(--accent); text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, p, dl { margin: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.studio { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
.studio-header, .studio-bar, .studio-status { display: flex; align-items: center; background: var(--shell); }
.studio-header { min-height: 68px; padding: 10px 22px; gap: 20px; border-bottom: 1px solid var(--line); }
.studio-brand { display: flex; align-items: center; gap: 10px; font-weight: 750; color: var(--text); text-decoration: none; white-space: nowrap; }
.studio-brand svg { width: 30px; height: 30px; color: var(--accent); }
.studio-brand small { display: block; margin-top: 2px; color: var(--accent); font: 10px/1.2 var(--mono); letter-spacing: .15em; }
.studio-build { display: grid; gap: 2px; border-left: 1px solid var(--line); padding-left: 20px; min-width: 0; line-height: 1.25; }
.studio-build small { color: var(--muted); font: 10px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.stock-picker select {
  min-height: 39px; max-width: 100%; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
}
.header-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; white-space: nowrap; }
.header-actions > a:first-child { color: var(--muted); text-decoration: none; padding: 8px 0; }
.header-actions > a:first-child:hover { color: var(--text); }
.studio[data-active-workspace="print"] .header-actions [data-print-profile] { display:none; }
.studio-primary {
  display: inline-flex; justify-content: center; align-items: center; min-height: 38px; padding: 7px 12px;
  border: 1px solid transparent; border-radius: 6px; background: var(--accent); color: var(--accent-ink);
  font-weight: 720; text-decoration: none;
}
.studio-primary:hover:not(:disabled) { background: var(--accent-hover); }

.studio-bar { padding: 0 20px; gap: 8px; border-bottom: 1px solid var(--line); justify-content: space-between; }
.studio-tabs { display: flex; min-width: 0; }
.studio-bar-actions { display: flex; flex: none; }
.studio-tabs button, .studio-tool {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 47px; padding: 0 14px;
  color: var(--muted); background: transparent; border: 0; white-space: nowrap;
}
.studio-tabs button { border-bottom: 2px solid transparent; font-weight: 650; }
.studio-tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); background: var(--tab-active); }
.studio-tabs button:hover, .studio-tool:hover { color: var(--text); background: var(--panel); }
.studio-tabs button:focus-visible, .studio-tool:focus-visible { outline-offset: -3px; }
.studio-tabs svg, .studio-tool svg { width: 18px; height: 18px; flex: none; }
.studio-tool { padding: 0 8px; }
.studio-tool[aria-pressed="true"] { color: var(--accent); }
[data-theme-toggle][aria-pressed="true"] { background: var(--tab-active); }

.studio-workspace { display: grid; grid-template-columns: minmax(196px, .78fr) minmax(0, 3.4fr) minmax(278px, 1fr); min-height: 0; }
.studio-dock { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--dock); }
.studio-library { border-right: 1px solid var(--line); }
.studio-inspector { border-left: 1px solid var(--line); }
.dock-heading { padding: 18px 16px 12px; border-bottom: 1px solid var(--line); }
.dock-heading span, .panel-code, .item-section, .canvas-tag, .studio-status { font-family: var(--mono); }
.dock-heading span, .panel-code, .item-section { font-size: 11px; letter-spacing: .08em; color: var(--dim); }
.dock-heading h2 { font-size: 16px; margin-top: 2px; }
.studio-items, .dock-content { min-height: 0; overflow: auto; scrollbar-color: var(--scrollbar) transparent; }
.studio-items { padding: 8px; }
.studio-item {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 45px; padding: 8px;
  text-align: left; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--muted);
  font-size: 13px; line-height: 1.32;
}
.studio-item:hover { background: var(--panel); color: var(--text); }
.studio-item[aria-current] { color: var(--text); background: var(--selection); border-color: var(--selection-line); }
.studio-item:focus-visible { outline-offset: -2px; }
.studio-item small { display: block; color: var(--dim); font-size: 11px; margin-top: 2px; }
.step-library-badge {
  display: flex; align-items: center; gap: 4px; margin-top: 4px;
  color: var(--accent); font-size: 11px; font-weight: 600;
}
.step-library-badge svg { width: 13px; height: 13px; flex: none; }
.item-code { flex: none; min-width: 24px; padding: 3px 4px; text-align: center; border-radius: 3px; color: var(--accent); background: var(--badge-bg); font: 11px/1.3 var(--mono); }
.item-count { margin-left: auto; color: var(--dim); font: 11px var(--mono); }
.item-section { padding: 12px 8px 4px; text-transform: uppercase; font-size: 10px; line-height: 1.4; }
.dock-content { padding: 16px; }
.dock-content > p, .dock-content h3 + p { margin: 9px 0; }
.dock-content h3 { font-size: 20px; line-height: 1.22; margin: 4px 0 8px; }
.product-reference { display: flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 15px; margin-bottom: 16px; }
.product-reference img { width: 66px; height: 58px; object-fit: cover; border-radius: 5px; }
.product-reference div > span { display: block; font-size: 12px; color: var(--muted); }
.instruction { margin-bottom: 15px; }
.instruction .panel-code { text-transform: uppercase; color: var(--accent); }
.inspector-note { color: var(--muted); font-size: 12px; }
.library-studio-card {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding: 10px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text);
  text-decoration: none;
}
.library-studio-card:hover { border-color: var(--accent); }
.library-studio-card img { flex: none; width: 54px; height: 50px; object-fit: contain; border-radius: 4px; background: #e7ebe0; }
.library-studio-copy { display: grid; gap: 2px; min-width: 0; line-height: 1.3; }
.library-studio-label { color: var(--muted); font-size: 11px; }
.library-studio-action { color: var(--accent); font-size: 12px; }
.library-studio-card:hover .library-studio-action { text-decoration: underline; }
.play-button {
  width:100%; min-height:48px; gap:9px; padding:9px 12px; font-size:14px;
}
.play-button svg, .print-cta svg { flex:none; }
.play-button[aria-pressed="true"] .play-icon,
.play-button[aria-pressed="false"] .pause-icon { display:none; }

.studio-canvas {
  min-width: 0; min-height: 0; position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: radial-gradient(circle, var(--grid) 1px, transparent 1.2px) center / 20px 20px,
    radial-gradient(ellipse at center, var(--canvas-center) 0, var(--canvas-mid) 62%, var(--canvas-edge) 100%);
}
.canvas-head { display: flex; justify-content: space-between; align-items: start; gap: 10px; padding: 18px 20px 10px; }
.canvas-head h1, .canvas-head h2 { font-size: clamp(17px, 2vw, 24px); line-height: 1.16; letter-spacing: -.025em; margin-top: 4px; }
.is-decorating [data-focus-view] { display: none; }
.is-decorating .studio-model:has([data-sticker-zone] rect[stroke-dasharray]) { cursor: crosshair; }
.decoration-panel fieldset { min-width: 0; padding: 0 0 13px; border: 0; border-bottom: 1px solid var(--line); margin: 0 0 14px; }
.decoration-panel legend { padding: 0; margin: 0 0 6px; font-weight: 700; }
.decoration-panel legend small { margin-left: 4px; color: var(--muted); font-weight: 500; }
.decoration-panel button:not(.studio-primary), .decoration-panel select, .decoration-panel input {
  color: var(--text); background: var(--shell); border: 1px solid var(--line); border-radius: 5px; padding: 5px 7px; min-width: 0; min-height: 34px; font: inherit;
}
.decoration-panel button[aria-pressed="true"] { border-color: var(--selection-line); background: var(--selection); }
.decor-library, .decor-color-fields { display: flex; gap: 5px; flex-wrap: wrap; }
.decor-library button { display: inline-flex; align-items: center; gap: 5px; }
.decor-looks { display: grid; gap: 5px; margin-top: 9px; }
.decoration-panel .decor-looks button { display: flex; align-items: center; gap: 8px; padding: 4px; text-align: left; font-weight: 650; }
.decor-look-preview { flex: none; width: 76px; border-radius: 4px; overflow: hidden; }
.decor-look-preview svg { display: block; width: 100%; height: auto; }
.decor-look-name { display: grid; justify-items: start; gap: 4px; font-size: 12px; }
.decor-print-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.decor-colors { display: inline-flex; overflow: hidden; border-radius: 3px; }
.decor-colors i { width: 6px; height: 15px; }
.decor-color-fields { margin-top: 8px; justify-content: space-between; }
.decor-color-fields label { display: flex; flex-direction: column; font-size: 12px; }
.decor-color-fields input[type="color"] { width: 50px; padding: 2px; cursor: pointer; }
.decor-library { margin-top: 7px; }
.decor-library svg { width: 22px; height: 22px; flex: none; }
.decor-placement, .decor-edit { display: grid; gap: 6px; margin-top: 9px; }
.decoration-panel select { width: 100%; }
.decor-edit label { display: grid; grid-template-columns: 1fr minmax(0, 105px); align-items: center; gap: 6px; font-size: 12px; }
.decor-edit-actions { display: flex; gap: 6px; }
.decoration-panel [role="status"] { margin-top: 7px; }
.dock-content .prepare-title { margin-top: 16px; font-size: 15px; }
.focus-step { display: none; color: var(--muted); font-size: 12px; margin-top: 5px; }
.is-focused .focus-step { display: block; }
.camera-tools, .zoom-tools { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: var(--shell); }
.camera-tools button, .zoom-tools button, .canvas-footer button:not(.studio-primary) {
  min-height: 34px; padding: 4px 8px; border: 1px solid transparent; border-radius: 4px;
  background: transparent; color: var(--muted); font-size: 12px; white-space: nowrap;
}
.camera-tools button:hover, .zoom-tools button:hover, .canvas-footer button:not(.studio-primary):hover:not(:disabled) { background: var(--panel); color: var(--text); }
.canvas-footer button[aria-pressed="true"] { color: var(--accent); border-color: var(--selection-line); background: var(--selection); }
.studio-model { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; touch-action: none; cursor: grab; }
.studio-model:active { cursor: grabbing; }
.studio-model:focus-visible { outline-offset: -3px; }
.studio-model svg { display: block; width: 100%; height: 100%; max-height: 100%; min-height: 0; }
.canvas-tools { display: flex; justify-content: space-between; align-items: center; gap: 7px; padding: 6px 20px 10px; }
.canvas-help { color: var(--muted); font-size: 12px; }
.origin-mark { color: var(--accent); font-size: 18px; margin-right: 4px; vertical-align: middle; }
.orbit-touch { display: none; }
.zoom-tools { flex: none; }
.zoom-tools button { min-width: 32px; }
.canvas-footer {
  display: flex; align-items: center; gap: 6px; min-height: 56px; padding: 6px 12px;
  border-top: 1px solid var(--line); background: var(--shell);
}
.toolbar-spacer { flex: 1; }

.drawing-canvas { background: var(--drawing-surround); }
.canvas-profile, .drawing-view { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.canvas-tag {
  flex: none; border: 1px solid var(--tag-line); border-radius: 4px; padding: 4px 7px; font-size: 11px;
  color: var(--tag-ink); margin-top: 4px;
}
.drawing-art, .sheet-art { flex: 1; min-height: 0; }
.drawing-art {
  --paper: #f5f2e9;
  margin: 5px 14px 14px; padding: 12px; border-radius: 4px; overflow: auto;
  background: radial-gradient(circle, #79938b35 .7px, transparent 1px) center / 14px 14px, var(--paper);
}
.drawing-art svg { display: block; width: 100%; height: 100%; }
.drawing-art.is-enlarged svg { width: 180%; height: 180%; }
.drawing-legend { padding: 8px 14px; gap: 14px; color: var(--muted); font-size: 12px; }
.drawing-legend button[data-zoom-drawing] { border-color: var(--line); }
.cut-key::before, .score-key::before { content: ""; display: inline-block; width: 14px; border-top: 2px solid var(--cut-key); margin: 0 5px 3px 0; }
.score-key::before { border-top-style: dashed; border-top-color: var(--score-key); }
.spec-list { margin: 12px 0; padding: 3px 0; border-block: 1px solid var(--line); }
.spec-list div { display: flex; justify-content: space-between; gap: 5px; padding: 6px 0; }
.spec-list dt { color: var(--muted); }
.spec-list dd { margin: 0; font-family: var(--mono); }
.technical-table { overflow-x: auto; margin: 12px 0; }
.technical-table table { border-collapse: collapse; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
.technical-table caption { text-align: left; font-size: 13px; font-weight: 700; padding: 0 0 6px; }
.technical-table th, .technical-table td { border-bottom: 1px solid var(--line); padding: 5px 4px; vertical-align: top; text-align: left; }
.technical-table thead { background: var(--panel); color: var(--muted); }
.sheet-art { display: grid; place-items: center; padding: 5px 14px 14px; overflow: hidden; }
.sheet-art > svg { width: 100%; height: 100%; max-height: 100%; min-height: 0; display: block; }
.studio-print-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:14px 14px 0; padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--dock); }
.studio-print-bar .print-cta { min-height:44px; gap:7px; flex:none; }
.sheet-edit-jump { display:none; }
.stock-picker { display: grid; gap: 5px; margin: 10px 0 14px; font-size: 13px; color: var(--muted); }
.print-instructions { border-block: 1px solid var(--line); margin: 14px 0; padding: 14px 0; }
.print-instructions h3 { font-size: 15px; }
.print-instructions p + p { margin-top: 8px; }
.studio-status { gap: 16px; padding: 7px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.studio-status span:last-child { margin-left: auto; }
.studio-status i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 3px; }
.no-script { padding: 12px; }
.is-focused .studio-workspace { grid-template-columns: minmax(0, 1fr); }
.is-focused .studio-dock { display: none; }

@media (min-width: 1000px) and (min-height: 640px) {
  .studio { height: 100dvh; }
}
@media (min-width: 1000px) and (max-height: 639px) {
  .studio-workspace { height: 540px; }
}
@media (max-width: 999px) {
  .studio-workspace { grid-template-columns: minmax(0, 1fr); }
  .studio-dock { border: 0; }
  .studio-library .dock-heading { display: none; }
  .studio-library { border-bottom: 1px solid var(--line); }
  .studio-items { display: flex; gap: 5px; padding: 7px; }
  .studio-item { width: auto; flex: 0 0 auto; max-width: 195px; border-color: var(--line); }
  .item-section { display: none; }
  .studio-model, .drawing-art, .sheet-art { height: clamp(265px, 54dvh, 525px); flex: none; }
  .dock-content { overflow: visible; }
  .studio-inspector .dock-heading { padding-top: 12px; }
  .studio-inspector .dock-content { max-width: 700px; width: 100%; }
  .sheet-edit-jump { display:inline; margin-left:auto; align-self:center; }
  .studio.is-focused .studio-model, .studio.is-focused .drawing-art, .studio.is-focused .sheet-art { height: max(260px, calc(100dvh - 286px)); }
}
@media (pointer: coarse) {
  .studio-model { touch-action: pan-y; }
  .orbit-pointer { display: none; }
  .orbit-touch { display: inline; }
}
@media (max-width: 600px) {
  .studio-header { flex-wrap: wrap; gap: 7px 8px; min-height: 0; padding: 8px 10px; }
  .studio-brand { gap: 6px; }
  .studio-brand svg { width: 25px; height: 25px; }
  .studio-brand small { margin-top: 0; font-size: 9px; }
  .studio-build { order: 3; flex-basis: 100%; border: 0; padding: 0; }
  .header-actions { gap: 8px; font-size: 12px; }
  .studio-bar { padding: 0 5px; gap: 2px; }
  .studio-tabs button { padding: 0 8px; gap: 4px; font-size: 12px; }
  .studio-tabs svg { width: 15px; height: 15px; }
  .studio-tool { padding: 0 7px; }
  .studio-tool span { display: none; }
  .canvas-head { padding: 12px 9px 6px; gap: 5px; }
  .canvas-head .panel-code { font-size: 9px; }
  .studio-print-bar { flex-direction:column; align-items:stretch; margin:8px 8px 0; }
  .camera-tools { gap: 0; padding: 1px; }
  .camera-tools button, .canvas-footer button:not(.studio-primary) { padding-inline: 5px; }
  .studio-model { height: clamp(215px, 72vw, 350px); }
  .canvas-tools { padding: 5px 9px 7px; }
  .canvas-help { font-size: 11px; }
  .canvas-footer { padding-inline: 7px; gap: 4px; flex-wrap: wrap; }
  .canvas-footer [data-view="prev"] span { display: none; }
  .canvas-footer .studio-primary { padding-inline: 7px; font-size: 12px; }
  .drawing-art { margin: 4px 8px 9px; padding: 5px; }
  [data-workspace="assembly"] .studio-inspector .dock-heading { display: none; }
  [data-workspace="assembly"] .dock-content { display: flex; align-items: start; flex-direction: column; }
  .product-reference { order: 1; border-bottom: 0; border-top: 1px solid var(--line); width: 100%; padding: 12px 0 0; margin: 8px 0 0; }
  .play-button:disabled { display: none; }
  .studio-status { gap: 8px; padding-inline: 8px; }
  .status-meta { display: none; }
}
@media (max-width: 425px) {
  .studio-tabs svg { display: none; }
}
@media (max-width: 375px) {
}