:root {
  --glass: rgba(18, 18, 22, 0.62);
  --line: rgba(255, 255, 255, 0.09);
  --text: #e8e4dc;
  --dim: #9c978e;
  --accent: #f2b45a;
  --accent-ink: #1b1306;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--text);
  font: 13px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-user-select: none; user-select: none; }
#view { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; outline: none;
  cursor: grab; }
#view.dragging { cursor: grabbing; }
/* George 2026-11-10: orbit point (dot) and MeshLab trackball circle, shown while the user orbits. */
#pivot-mark { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 4; pointer-events: none;
  opacity: 0; transition: opacity 0.35s; }
#pivot-mark.on { opacity: 1; transition: opacity 0.12s; }
#pivot-mark circle { fill: none; }
#pivot-mark .ring-under { stroke: rgba(0, 0, 0, 0.45); stroke-width: 3; }
#pivot-mark .ring { stroke: rgba(255, 255, 255, 0.9); stroke-width: 1.5; stroke-dasharray: 6 5; }
#pivot-mark .dot { fill: var(--accent); stroke: rgba(0, 0, 0, 0.6); stroke-width: 1.5; }
#help b.accent { color: var(--accent); }
/* George 2026-11-10: the white line of the split view, straight across the whole screen. */
#split-line { position: fixed; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); z-index: 3; pointer-events: none; }
#orbit-note { left: 12px; bottom: 68px; padding: 6px 10px; font-size: 12px; color: var(--dim); max-width: 480px; }
#orbit-note b { color: var(--accent); font-weight: 600; }
#view.over-hair { cursor: pointer; }
.panel { position: fixed; z-index: 5; background: var(--glass); border: 1px solid var(--line); border-radius: 12px;
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  padding: 8px 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
.row { display: flex; align-items: center; gap: 8px; }
.hidden { display: none !important; }
#top-left { top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 210px; }
.brand { font-weight: 650; letter-spacing: 0.02em; display: flex; align-items: center; gap: 8px; }
.logo { width: 14px; height: 14px; border-radius: 50%;
  background: conic-gradient(from 30deg, #f2b45a, #d9482f, #f2b45a 60%, #ffe6a8, #f2b45a); }
#top-right { top: 12px; right: 12px; }
#walk-keys { top: 64px; right: 12px; font-size: 13px; }
#walk-keys b { color: var(--accent, #f2b45a); }
#bottom-left { left: 12px; bottom: 12px; font: 11px/1.4 ui-monospace, Menlo, monospace; color: var(--dim);
  max-width: min(46vw, 520px); }
#bottom-right { right: 12px; bottom: 12px; }
#hair-tools:not(.fur) .fur-only { display: none; }
#hair-tools { left: 12px; top: 50%; transform: translateY(-50%); padding: 8px; display: flex; flex-direction: column;
  gap: 6px; width: 112px; }
.tools-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); padding: 0 2px 2px; }
.slider.vertical { flex-direction: column; align-items: stretch; gap: 4px; padding: 4px 2px 0; }
.slider.vertical input { width: 100%; }
select, button { font: inherit; color: var(--text); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 9px; cursor: pointer; }
select:hover, button:hover { background: rgba(255, 255, 255, 0.12); }
select option { background: #1d1d22; }
button.icon { width: 30px; height: 30px; padding: 0; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; background: transparent; padding: 5px 11px; }
.seg button.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.tool { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; }
.tool span { font-size: 15px; }
.tool.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; border-color: transparent; }
#btn-clay.pulse { animation: kc-pulse 0.8s ease-in-out 4; }
@keyframes kc-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 180, 90, 0); transform: scale(1); }
  50% { box-shadow: 0 0 0 7px rgba(242, 180, 90, 0.8); transform: scale(1.1); } }
#btn-clay.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; border-color: transparent; }
.slider { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font-size: 12px; padding: 0 4px; }
.slider input { width: 90px; accent-color: var(--accent); }
#view-label { font: 12px ui-monospace, Menlo, monospace; color: var(--dim); min-width: 92px; text-align: center; }
#toast { left: 50%; top: 72px; transform: translateX(-50%); padding: 8px 14px; color: var(--text);
  transition: opacity 0.6s; pointer-events: none; }
#toast.fade { opacity: 0; }
#help { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(760px, 94vw); padding: 18px 22px; z-index: 8;
  -webkit-user-select: text; user-select: text; }
#help h2 { margin: 0 0 10px; font-size: 16px; }
#help h3 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
#help .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
#help p { margin: 3px 0; color: var(--dim); }
#help p b { color: var(--text); font-weight: 600; }
#help .note { margin-top: 14px; font-size: 12px; line-height: 1.5; }
#status { position: fixed; left: -9999px; top: 0; }
#warning:not(:empty) { position: fixed; left: 12px; top: 96px; left: 12px; color: #ff9c5a; }
/* Phones (George 2026-11-10): compact panels inside the safe area, no stats and no walk keys, the start hint
   at the bottom. A landscape phone has a small height, so it also gets these rules. */
@media (max-width: 720px), (max-height: 500px) {
  .panel { padding: 5px 6px; border-radius: 10px; }
  .row { gap: 5px; }
  select, button { padding: 4px 8px; }
  .seg button { padding: 4px 9px; }
  #top-left { top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); min-width: 0; }
  #top-right { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); }
  #bottom-right { bottom: max(8px, env(safe-area-inset-bottom)); right: max(8px, env(safe-area-inset-right)); }
  #bottom-right label.slider, #bottom-right select { display: none; }
  #bottom-left, #walk-keys { display: none !important; }
  #orbit-note { left: max(8px, env(safe-area-inset-left)); bottom: max(8px, env(safe-area-inset-bottom));
    max-width: calc(100vw - 180px); font-size: 11px; padding: 5px 8px; }
  #view-label { min-width: 64px; }
  #toast { top: auto; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 52px); width: max-content; max-width: 92vw;
    text-align: center; }
  #hair-tools { top: auto; bottom: 64px; transform: none; width: auto; flex-direction: row; flex-wrap: wrap; max-width: 70vw; }
  #hair-tools .slider, .tools-title { display: none; }
  .slider input { width: 70px; }
}
/* Narrow portrait phone: first row = scene list and tools, second row = modes and Primitives. */
@media (max-width: 560px) {
  #top-left { padding: 4px; }
  #top-left .brand { display: none; }
  #top-left select { max-width: calc(100vw - 150px); }
  #top-right { display: contents; }
  #top-right > .row { position: fixed; z-index: 5; right: max(8px, env(safe-area-inset-right)); padding: 4px;
    background: var(--glass); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); }
  #tools { top: max(8px, env(safe-area-inset-top)); }
  #modes { top: calc(max(8px, env(safe-area-inset-top)) + 46px); }
}