:root { color-scheme: dark; --bg: #1b1b1d; --panel: #242427; --line: #36363a; --text: #e8e6e1; --muted: #9a978f; --accent: #d7b46a; --select: #34d27a; --error: #e07b7b; --ok: #7fc29b; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
a { color: var(--accent); }
header.top { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.brand { color: var(--text); text-decoration: none; font-weight: 600; letter-spacing: .02em; }
main { padding: 20px; max-width: 1400px; margin: 0 auto; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; margin-bottom: 18px; }
.narrow { max-width: 420px; margin: 60px auto; }
h1 { font-size: 20px; margin: 0 0 12px; }
h2 { font-size: 16px; margin: 0 0 10px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
label { display: block; margin: 8px 0; color: var(--muted); }
label input, label select { display: block; width: 100%; margin-top: 4px; }
input, select, textarea, button { font: inherit; color: var(--text); background: #1f1f22; border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; }
input[type="checkbox"] { width: auto; display: inline-block; margin-right: 6px; }
input[type="range"] { padding: 0; }
button { cursor: pointer; background: #2d2d31; }
button.primary { background: var(--accent); color: #1b1b1d; border-color: var(--accent); font-weight: 600; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.link { background: none; border: none; color: var(--muted); padding: 0; }
.error { color: var(--error); }
.ok { color: var(--ok); }
.muted { color: var(--muted); }
table { width: 100%; border-collapse: collapse; }
td, th { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: 13px; }
.status { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; background: #333; }
.status[data-status="done"] { background: #244a35; }
.status[data-status="failed"] { background: #5a2a2a; }
.status[data-status="running"], .status[data-status="queued"] { background: #4a3f1f; }
pre { white-space: pre-wrap; background: #151517; padding: 10px; border-radius: 6px; font-size: 13px; }
textarea { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; grid-template-columns: 1fr 380px; gap: 18px; }
@media (max-width: 1000px) { .grid { grid-template-columns: 1fr; } }
#viewer { width: 100%; height: 560px; background: #2a2a2a; border-radius: 8px; overflow: hidden; }
#viewer canvas { width: 100%; height: 100%; display: block; }
.group { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-items: center; margin: 6px 0; }
details summary { cursor: pointer; color: var(--muted); }

.swatches { align-items: center; gap: 8px; margin-top: 6px; }
.swatch { width: 28px; height: 28px; padding: 0; border-radius: 6px; border: 2px solid var(--line); }
.swatch[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px #1b1b1d, 0 0 0 3px var(--accent); }
.swatches .custom { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
#viewer { background: #ffffff; }

/* Editor: the page itself never scrolls. The viewer fills the left column for the whole window height and
   the side panel scrolls on its own, so the ring stays on screen while the settings are tuned (2026-11-01). */
body.editor { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
body.editor main { flex: 1; min-height: 0; max-width: none; width: 100%; padding: 14px 20px 18px; display: flex; flex-direction: column; }
.editor-page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.editor-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.editor-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: minmax(0, 1fr); gap: 18px; }
.editor-body #viewer { height: 100%; min-height: 0; }
.editor-side { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: 2px; }
.editor-side .card:last-child { margin-bottom: 0; }
/* Save and Reset stay in reach at the bottom of the panel however far it is scrolled: the scene's
   assignments change from the Materials section too, so the bar belongs to the panel, not a card. */
.editor-side .side-actions { position: sticky; bottom: 0; margin: 0; padding: 10px 2px 2px; background: var(--bg); border-top: 1px solid var(--line); }
.editor-side .card:last-of-type { margin-bottom: 10px; }
@media (max-width: 1000px) {
  body.editor { height: auto; overflow: auto; }
  body.editor main, .editor-page { display: block; }
  .editor-body { display: flex; flex-direction: column; }
  .editor-body #viewer { position: sticky; top: 0; height: 45vh; z-index: 1; }
  .editor-side { overflow: visible; }
}

/* Materials: parts of the piece, the library and the creator (2026-11-01). */
.part { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 6px 10px; margin: 4px 0; border-radius: 6px; background: #1f1f22; border: 1px solid var(--line); }
.part[aria-selected="true"] { border-color: var(--select); box-shadow: inset 3px 0 0 var(--select); } /* the viewer's selection green, not the gold accent */
.part-material { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#selected-part.pulse { animation: pulse .6s ease-out; color: var(--accent); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--accent); } 100% { box-shadow: 0 0 0 8px rgba(215, 180, 106, 0); } }
.lib-group h3 { font-size: 12px; margin: 12px 0 4px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.lib-family { color: var(--muted); font-size: 13px; margin: 6px 0 0 2px; }
.lib-row { display: flex; gap: 6px; align-items: center; margin: 3px 0; }
.lib-row.variant { padding-left: 14px; }
.lib-item { flex: 1; text-align: left; display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: #1f1f22; }
.lib-item[aria-pressed="true"] { border-color: var(--accent); background: #2a2820; }
.lib-action { padding: 4px 8px; font-size: 13px; color: var(--muted); }
.lock { display: inline-block; width: 9px; height: 7px; border: 1.5px solid var(--muted); border-radius: 2px; position: relative; opacity: .8; }
.lock::before { content: ""; position: absolute; left: 1.5px; top: -5px; width: 4px; height: 5px; border: 1.5px solid var(--muted); border-bottom: none; border-radius: 3px 3px 0 0; }
.creator-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; margin-left: 4px; border-radius: 50%; font-size: 11px; line-height: 1; color: var(--muted); background: #2d2d31; border: 1px solid var(--line); position: static; vertical-align: middle; }
/* The popover spans its label (the label is the positioned box), so it never leaves the panel. */
.tip:hover::after, .tip:focus::after { content: attr(data-tip); position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); padding: 8px 10px; border-radius: 6px; background: #111113; color: var(--text); border: 1px solid var(--line); font-size: 13px; line-height: 1.4; white-space: normal; text-align: left; z-index: 5; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
#creator label, #creator summary { position: relative; }
#creator-advanced { margin: 8px 0; }
#creator-advanced .abs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
#creator-advanced .abs label { margin: 4px 0; }

/* Auto rotate and its speed on one line; the slider takes what is left. */
.rotate-row { display: flex; align-items: center; gap: 14px; }
.rotate-row label { margin: 8px 0; }
.rotate-row label:first-child { white-space: nowrap; }
.rotate-row .speed { flex: 1; }

/* Upload drop zone on the models page. */
.drop-zone { border: 2px dashed var(--line); border-radius: 8px; padding: 22px 16px; text-align: center; color: var(--muted); margin-bottom: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.drop-zone.over { border-color: var(--accent); background: #2a2820; color: var(--text); }

/* the shadow light: a pad for the lamp's place over the floor, a height slider beside it */
.light-help { margin: 2px 0 8px; font-size: 12px; }
.light-row { display: flex; gap: 14px; align-items: stretch; }
.light-pad { width: 150px; height: 150px; flex: none; position: relative; border-radius: 8px; background: #141416; border: 1px solid var(--line); cursor: crosshair; touch-action: none; user-select: none; background-image: linear-gradient(#232326 1px, transparent 1px), linear-gradient(90deg, #232326 1px, transparent 1px); background-size: 25% 25%; }
.light-ring { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; border: 6px solid #5c4f27; border-radius: 50%; transform: translate(-50%, -50%); opacity: .6; pointer-events: none; }
.light-cross { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border: 1px solid #555; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.light-dot { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(215, 180, 106, .25); transform: translate(-50%, -50%); pointer-events: none; }
.light-lbl { position: absolute; left: 6px; font-size: 10px; color: var(--muted); pointer-events: none; }
.light-back { top: 4px; }
.light-front { bottom: 4px; }
.light-height { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; font-size: 12px; }
.light-height input[type=range] { writing-mode: vertical-lr; direction: rtl; height: 104px; width: 24px; }
.light-actions { margin: 8px 0 0; }
.light-actions button { font-size: 12px; padding: 4px 10px; }