:root {
  --bg: #040404;
  --text: #f0f0f0;
  --dim: #8a8a8a;
  --placeholder: #6f6f6f;
  --hair: #2a2a2a;
}
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; }
::selection { background: #333; }
#root {
  position: fixed; inset: 0; background: var(--bg); color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 300; font-size: 11px; letter-spacing: .04em;
  user-select: none; overflow: hidden;
}
#mount { position: absolute; inset: 0; cursor: crosshair; }
#mount canvas { display: block; }
.dim { color: var(--dim); }
.row { display: flex; gap: 16px; align-items: center; }
button { background: none; border: 0; padding: 0; font: inherit; color: var(--dim); cursor: pointer; transition: color .4s; }
button:hover { color: var(--text); }

/* top left: folder icon + open folder (back to the landing) · count */
#tl { position: absolute; top: 12px; left: 14px; display: flex; align-items: center; gap: 6px; z-index: 41; }
#tl svg { width: 22px; height: 22px; display: block; overflow: visible; flex: none; }
#tl .ico { width: 40px; height: 40px; display: grid; place-items: center; }
#tl .ico.on { color: var(--text); }
#tl .ico svg .all { transform-box: view-box; transform-origin: 50px 50px; transition: transform 420ms cubic-bezier(.34,1.56,.64,1); }
#tl .ico:hover svg .all, #tl .ico.on svg .all { transform: scale(1.12); }
#tl button:focus-visible { outline: 1px solid var(--dim); outline-offset: -4px; }
#folder { height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 9px; letter-spacing: .08em; }
#count { margin-left: 8px; transition: opacity .3s ease; }
#root:has(#moves.open) #count { opacity: 0; }

/* top right: FIELD · COLOUR | AUTO as icons; a click plays the icon's gesture and names it underneath */
#tr { position: absolute; top: 12px; right: 14px; display: flex; gap: 6px; align-items: center; }
#tr .nav { position: relative; width: 40px; height: 40px; display: grid; place-items: center; }
#tr .nav.on { color: var(--text); }
#tr .nav:focus-visible { outline: 1px solid var(--dim); outline-offset: -4px; }
#tr .nav svg { width: 22px; height: 22px; display: block; overflow: visible; }
#tr .nav svg .node { transform-box: fill-box; transform-origin: center; }
#tr .nav svg .all { transform-box: view-box; }
#tr .sep { width: 1px; height: 14px; margin: 0 6px; background: var(--hair); }
#tr .nl { position: absolute; top: 100%; left: 50%; padding-left: .18em; font-size: 10px; letter-spacing: .18em; color: var(--text); white-space: nowrap; pointer-events: none; opacity: 0; transform: translateX(-50%); }
#tr .nav.play .nl { animation: navName 1.9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes navName { 0% { opacity: 0; transform: translate(-50%, -4px); } 16% { opacity: 1; transform: translate(-50%, 0); } 72% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 0); } }
#auto .dot { position: absolute; right: 4px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: currentColor; opacity: 0; transition: opacity .4s; }
#auto.drifting .dot { opacity: 1; }
/* FIELD — clockwise pulse: each node swells and fills in turn */
#tr [data-shape=field].play .node { animation: navPulse .7s ease-out both; }
@keyframes navPulse { 0% { transform: scale(1); fill: transparent; } 35% { transform: scale(1.65); fill: currentColor; } 100% { transform: scale(1); fill: transparent; } }
/* COLOUR — a third of a turn, each ring taking the next one's place */
#tr [data-shape=colour] .all { transform-origin: 50px 50.33px; }
#tr [data-shape=colour].play .all { animation: navThird 1.1s cubic-bezier(.3,.8,.25,1) both; }
@keyframes navThird { 0% { transform: rotate(0); } 75% { transform: rotate(128deg); } 100% { transform: rotate(120deg); } }
/* AUTO — looks for a heading, hesitates, locks back on course */
#auto .all { transform-origin: 50px 55px; }
#auto.play .all { animation: navHeading 1.2s cubic-bezier(.4,0,.2,1) both; }
@keyframes navHeading { 0% { transform: rotate(0); } 28% { transform: rotate(-34deg); } 58% { transform: rotate(16deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0); } }

#label { position: absolute; left: 0; top: 0; pointer-events: none; transform: translate(16px, -6px); transition: opacity .25s; white-space: nowrap; display: flex; flex-direction: column; gap: 3px; opacity: 0; }
#label.on { opacity: 1; }

#inspect { position: absolute; left: 24px; bottom: 26px; display: flex; flex-direction: column; gap: 6px; max-width: 440px; animation: mindFade .6s ease; }
#inspect[hidden] { display: none; }
#sname { font-size: 13px; font-weight: 400; color: var(--text); word-break: break-all; }
.swatch { display: inline-flex; align-items: center; gap: 6px; }
#sdot { width: 8px; height: 8px; border-radius: 50%; }
@keyframes mindFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

#search { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; transition: opacity .4s; opacity: .6; }
#search.on { opacity: 1; }
#q { background: none; border: 0; border-bottom: 1px solid var(--hair); color: var(--text); font: inherit; letter-spacing: .06em; width: 260px; padding: 6px 0; }
#q:focus { outline: none; }
#q::placeholder { color: var(--placeholder); }
#found { min-width: 70px; }

#br { position: absolute; right: 24px; bottom: 26px; max-width: 300px; text-align: right; line-height: 1.6; color: var(--dim); display: flex; flex-direction: column; gap: 6px; pointer-events: none; }

/* tweaks — press t */
#tweaks { position: absolute; top: 58px; right: 24px; width: 232px; display: flex; flex-direction: column; gap: 10px; color: var(--dim); animation: mindFade .4s ease; }
#tweaks[hidden] { display: none; }
#tweaks .sec { color: var(--text); letter-spacing: .16em; margin-top: 8px; }
#tweaks .tw { display: grid; grid-template-columns: 1fr auto; row-gap: 4px; cursor: pointer; }
#tweaks .tw .val { color: var(--text); text-align: right; }
#tweaks .tw input[type=range] { grid-column: 1 / -1; }
#tweaks .tw input[type=checkbox] { display: none; }
#tweaks .opts { display: flex; gap: 12px; }
#tweaks .opts button.on { color: var(--text); }
#tweaks .acts { display: flex; gap: 16px; margin-top: 10px; }
#tweaks .note { min-height: 1em; color: var(--placeholder); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 11px; background: none; margin: 0; cursor: pointer; }
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--hair); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 5px; height: 11px; margin-top: -5px; background: var(--text); border: 0; border-radius: 0; }
input[type=range]::-moz-range-track { height: 1px; background: var(--hair); }
input[type=range]::-moz-range-thumb { width: 5px; height: 11px; background: var(--text); border: 0; border-radius: 0; }

/* ---------- controls band: Fog · Drift · Auto speed · Move speed ---------- */
#ctl-btn {
  position: absolute; left: 50%; bottom: 24px; width: 44px; height: 44px; margin-left: 2px; padding: 0; border: 0; background: none;
  color: #A1A1A6; cursor: pointer; transition: color 300ms ease; z-index: 5; -webkit-tap-highlight-color: transparent;
}
#ctl-btn::before { content: ''; position: absolute; left: 5px; top: 5px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.10); opacity: 0; transition: opacity 300ms ease; }
#ctl-btn:hover, #ctl-btn:focus-visible, #ctl-btn.gather, #ctl-btn.reform { color: #FFFFFF; }
#ctl-btn:hover::before, #ctl-btn:focus-visible::before { opacity: 1; }
#ctl-btn.gather::before, #ctl-btn.reform::before { opacity: 0; }
#ctl-btn:focus-visible { outline: none; }
#ctl-btn.gather { pointer-events: none; }
#ctl-btn .rail { position: absolute; left: 14px; width: 16px; height: 1.5px; margin-top: -.75px; background: currentColor; border-radius: 1px; transform-origin: 50% 50%; transition: transform 240ms cubic-bezier(.76,0,.24,1); }
#ctl-btn .r1 { top: 16px; } #ctl-btn .r2 { top: 22px; } #ctl-btn .r3 { top: 28px; }
#ctl-btn .knob {
  position: absolute; width: 5.5px; height: 5.5px; border-radius: 50%; background: currentColor; transform: translate(-50%, -50%);
  left: calc(14px + var(--p) * 16px); top: var(--y);
  transition: left 460ms cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 45ms), top 460ms cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 45ms), width 460ms ease, height 460ms ease, opacity 120ms linear;
}
#ctl-btn .k1 { --p: .28; --y: 16px; --i: 0; --g: 30ms; }
#ctl-btn .k2 { --p: .74; --y: 22px; --i: 1; --g: 0ms; }
#ctl-btn .k3 { --p: .46; --y: 28px; --i: 2; --g: 30ms; }
#ctl-btn:not(.gather):not(.reform):hover .knob { --p: .5; }
/* opening: rails close to their centre, knobs gather into one dot, the dot hands over to the line */
#ctl-btn.gather .rail { transform: scaleX(0); }
#ctl-btn.gather .knob {
  left: 22px; top: 22px; width: 6px; height: 6px; opacity: 0;
  transition: left 320ms cubic-bezier(.7,0,.3,1) var(--g), top 320ms cubic-bezier(.7,0,.3,1) var(--g), width 320ms cubic-bezier(.7,0,.3,1) var(--g), height 320ms cubic-bezier(.7,0,.3,1) var(--g), opacity 120ms linear 420ms;
}
/* closing: the mark reforms after the band has folded back */
#ctl-btn.reform .knob {
  transition: left 520ms cubic-bezier(.34,1.56,.64,1) calc(600ms + var(--i) * 45ms), top 520ms cubic-bezier(.34,1.56,.64,1) calc(600ms + var(--i) * 45ms),
              width 520ms cubic-bezier(.34,1.56,.64,1) calc(600ms + var(--i) * 45ms), height 520ms cubic-bezier(.34,1.56,.64,1) calc(600ms + var(--i) * 45ms), opacity 1ms linear 600ms;
}
#ctl-btn.reform .rail { transition: transform 400ms cubic-bezier(.76,0,.24,1) 640ms; }

/* the movement icon, left of the slider-band button: the pair sits centred; it opens the controls menu (moves.js) */
#moves-btn {
  position: absolute; left: 50%; bottom: 24px; width: 44px; height: 44px; margin-left: -46px; display: grid; place-items: center;
  color: #A1A1A6; z-index: 41; -webkit-tap-highlight-color: transparent; transition: color 300ms ease, opacity 300ms ease;
}
#moves-btn::before { content: ''; position: absolute; left: 5px; top: 5px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.10); opacity: 0; transition: opacity 300ms ease; }
#moves-btn:hover, #moves-btn:focus-visible, #moves-btn.on { color: #FFFFFF; }
#moves-btn:hover::before, #moves-btn:focus-visible::before { opacity: 1; }
#moves-btn:focus-visible { outline: none; }
#moves-btn svg { position: relative; width: 18px; height: 18px; display: block; overflow: visible; }
#moves-btn svg .all { transform-box: view-box; transform-origin: 50px 50px; transition: transform 420ms cubic-bezier(.34,1.56,.64,1); }
#moves-btn:hover svg .all, #moves-btn.on svg .all { transform: scale(1.12); }
/* on click: key sweep — each arm stretches in turn, clockwise from north, the cross never breaking (shaft and head travel together) */
#moves-btn svg .arm { transform-box: view-box; transform-origin: 0 0; }
#moves-btn svg .shaft { stroke-dasharray: 40 100; }
#moves-btn.sweep svg .shaft { animation: movesSweepS .6s cubic-bezier(.3,.1,.2,1.3) both; }
#moves-btn.sweep svg .head { animation: movesSweepH .6s cubic-bezier(.3,.1,.2,1.3) both; }
@keyframes movesSweepS { 0%, 100% { stroke-dasharray: 40 100; } 40% { stroke-dasharray: 49 100; } }
@keyframes movesSweepH { 0%, 100% { transform: none; } 40% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { #moves-btn.sweep svg * { animation: none !important; } }
#root.ctl-open #moves-btn { opacity: 0; pointer-events: none; transition-duration: 150ms; }   /* the band covers the pair */

#ctl {
  position: absolute; left: 50%; bottom: 14px; width: 760px; height: 64px; margin-left: -380px; border-radius: 32px; z-index: 6;
  background: rgba(20,20,22,.25);
  -webkit-backdrop-filter: blur(26px) saturate(1.6) brightness(.85); backdrop-filter: blur(26px) saturate(1.6) brightness(.85);
  clip-path: inset(32px 380px round 0); visibility: hidden; color: #FFFFFF;
}
#ctl .ctl-in { display: flex; gap: 32px; height: 100%; padding: 0 72px 0 32px; box-sizing: border-box; align-items: center; }
#ctl .ctl-s { flex: 1 1 0; min-width: 0; opacity: 0; transform: translateY(4px); transition: opacity 160ms ease, transform 160ms ease; }
#ctl.open .ctl-s { opacity: 1; transform: none; transition: opacity 380ms ease, transform 380ms ease; transition-delay: calc(980ms + var(--i) * 70ms); }
#ctl .ctl-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; letter-spacing: .04em; line-height: 1; color: #FFFFFF; }
#ctl .ctl-head label { cursor: default; }
#ctl .ctl-bars { position: relative; margin-top: 10px; height: 14px; display: flex; justify-content: space-between; align-items: center; border-radius: 2px; }
#ctl .ctl-bars:has(input:focus-visible) { outline: 1px solid rgba(255,255,255,.7); outline-offset: 4px; }
#ctl .ctl-bars i { display: block; position: absolute; top: 50%; transform: translateY(-50%); width: 1.5px; height: 9px; background: rgba(255,255,255,.28); transition: height 520ms cubic-bezier(.34,1.56,.64,1), background-color 160ms ease; }
#ctl .ctl-bars i.on { background: #FFFFFF; }
#ctl .ctl-bars input { position: absolute; left: 0; top: -6px; width: 100%; height: calc(100% + 12px); margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
#ctl-x { position: absolute; right: 14px; top: 10px; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #FFFFFF; cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity 160ms ease; }
#ctl-x svg { width: 12px; height: 12px; display: block; }
#ctl-x:focus-visible { outline: 1px solid rgba(255,255,255,.7); outline-offset: -8px; border-radius: 50%; }
#ctl.open #ctl-x { opacity: 1; transition: opacity 240ms ease 1120ms; }

/* when the band is open on a narrower window, the corners give way to it */
#br, #inspect { transition: opacity .3s ease; }
/* the count and the key hints stay out of sight; they come with the t panel */
#br { opacity: 0; }
#root:has(#tweaks:not([hidden])) #br { opacity: 1; }
@media (max-width: 1420px) { #root.ctl-open #br { opacity: 0; } }
@media (max-width: 1700px) { #root.ctl-open #inspect { opacity: 0; } }

/* phone: the band takes the screen width, the sliders scroll and snap one by one */
@media (max-width: 791px) {
  #ctl { width: calc(100vw - 32px); margin-left: calc(16px - 50vw); }
  #ctl .ctl-in { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: 24px; scrollbar-width: none; gap: 24px; padding: 0 0 0 24px; margin-right: 58px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  #ctl .ctl-in::-webkit-scrollbar { display: none; }
  #ctl .ctl-s { flex: 0 0 68%; scroll-snap-align: start; }
  #ctl .ctl-in::after { content: ''; flex: 0 0 1px; }
}

@media (prefers-reduced-motion: reduce) {
  #tr .nav.play svg * { animation: none !important; }
  #ctl-btn, #ctl-btn *, #ctl-btn::before, #ctl, #ctl * { transition-duration: 1ms !important; transition-delay: 0ms !important; animation-duration: 1ms !important; animation-delay: 0ms !important; }
}