/* Virtual core shed (/learn/core-shed): the full-screen 3D stage, its HUD, the bench panel (hole, strip log, readout,
   walk-through) and the words below. Page from builder/core-shed/build_core_shed.py, script from builder/www/src/core-shed/
   (bundled to /assets/core-shed.js?v=1163c394). Tokens from minerals.css. */
.cs-main { padding: 0; }
.cs-stage { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; background: #07090a; }
.cs-stage canvas#cs-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; outline: none; }
.cs-stage canvas#cs-gl:active { cursor: grabbing; }
.cs-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(130% 90% at 50% 50%, transparent 60%, rgba(2, 4, 6, .7) 100%), linear-gradient(180deg, rgba(4, 7, 10, .82) 0, transparent 200px); }
.cs-stage > :not(canvas):not(.cs-vignette) { z-index: 3; }

.cs-head { position: absolute; left: 32px; top: 86px; max-width: 470px; pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.cs-head a, .cs-head .crumbs { pointer-events: auto; }
.cs-head .crumbs { font-size: 12.5px; color: var(--faint); margin-bottom: 10px; }
.cs-head .crumbs a { color: var(--muted); text-decoration: none; }
.cs-head .crumbs span { margin: 0 4px; }
.cs-head .kick { margin-bottom: 10px; }
.cs-head .kick span { margin: 0 6px; color: var(--faint); }
.cs-head h1 { font-size: clamp(30px, 3.6vw, 50px); line-height: 1.02; letter-spacing: -.035em; text-shadow: 0 2px 30px rgba(0, 0, 0, .6);
  background: linear-gradient(95deg, #fff 0%, #eef3f1 40%, var(--lime) 78%, var(--teal) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-head .lede { font-size: 15px; color: #c9d4d0; margin-top: 12px; line-height: 1.55; text-shadow: 0 1px 12px rgba(0, 0, 0, .9); }
[data-view="bench"] .cs-head { opacity: 0; transform: translateY(-8px); }

.cs-cap { position: absolute; left: 32px; bottom: 96px; max-width: 540px; font-size: 14px; line-height: 1.5; color: #c9d4d0; padding: 10px 14px; border-radius: 14px;
  background: rgba(6, 11, 13, .7); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); animation: cs-fade .6s var(--ease); }
.cs-cap b { color: var(--text); font-weight: 600; }
.cs-cap[hidden] { display: none; }
@keyframes cs-fade { from { opacity: 0; transform: translateY(6px); } }

/* rack chips */
.cs-holes { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 4px; padding: 5px; border-radius: 18px; max-width: calc(100% - 24px);
  overflow-x: auto; scrollbar-width: none; background: rgba(6, 11, 13, .76); border: 1px solid var(--line2); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
.cs-holes[hidden] { display: none; }
.cs-holes button { font: inherit; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 13px 7px; border-radius: 13px; border: 0; background: none;
  color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.cs-holes button b { font-family: var(--head); font-size: 14.5px; font-weight: 600; }
.cs-holes button small { font: 10px var(--mono); color: var(--faint); }
.cs-holes button:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.cs-holes button[aria-pressed="true"] { color: #05080a; background: var(--lime); }
.cs-holes button[aria-pressed="true"] small { color: rgba(11, 18, 0, .7); }

/* bench controls */
.cs-bench-ctl { position: absolute; left: 24px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cs-bench-ctl[hidden] { display: none; }
.cs-trayrow, .cs-moderow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cs-trayname { font: 500 12.5px var(--mono); color: var(--text); padding: 8px 12px; border-radius: 999px; background: rgba(6, 11, 13, .76); border: 1px solid var(--line2); }
.cs-btn { font: inherit; font-size: 13px; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(6, 11, 13, .76); color: #c9d4d0; cursor: pointer; }
.cs-btn:hover { border-color: var(--lime); color: var(--text); }
.cs-moderow .seg { margin: 0; background: rgba(6, 11, 13, .76); --c: var(--lime); }
.cs-pick { display: inline-flex; flex-direction: column; gap: 1px; padding: 5px 10px 6px; border-radius: 12px; background: rgba(6, 11, 13, .76); border: 1px solid var(--line); }
.cs-pick[hidden] { display: none; }
.cs-pick span { font: 10px var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.cs-pick select { font: inherit; font-size: 13px; color: var(--text); background: transparent; border: 0; padding: 0; cursor: pointer; }
.cs-pick select option { background: #0a1013; }

.cs-tools { position: absolute; right: 24px; top: 84px; display: flex; gap: 6px; }
[data-view="bench"] .cs-tools { right: 446px; }
.cs-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line2); background: rgba(6, 11, 13, .76); color: var(--muted);
  cursor: pointer; font-size: 20px; line-height: 1; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.cs-ic:hover { color: var(--text); border-color: var(--lime); }
.cs-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* the bench panel */
.cs-panel { position: absolute; right: 14px; top: 76px; bottom: 14px; width: 420px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 18px 18px 22px;
  border-radius: 22px; background: rgba(6, 11, 13, .86); border: 1px solid var(--line2); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .06); animation: cs-in .5s var(--ease); }
.cs-panel[hidden] { display: none; }
@keyframes cs-in { from { opacity: 0; transform: translateX(24px); } }
.cs-panel .kick { font: 10.5px var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
.cs-panel h2 { font-size: 27px; line-height: 1.05; margin: 4px 0 6px; }
.cs-panel h2 span { font: 500 15px var(--mono); color: var(--lime); margin-left: 6px; }
.cs-meta { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.cs-facts { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; font-size: 13px; color: #c9d4d0; line-height: 1.45; }
.cs-facts li { padding-left: 14px; position: relative; }
.cs-facts li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }
.cs-facts a { color: var(--faint); font-size: 11.5px; }
.cs-logwrap { margin-top: 14px; border-radius: 14px; border: 1px solid var(--line); background: #070b0d; padding: 4px; }
#cs-log { display: block; width: 100%; height: 230px; cursor: pointer; }
#cs-read h3, .cs-learn h3 { font-size: 15px; color: var(--text); margin: 16px 0 8px; font-weight: 600; }
#cs-read h3 span { font: 11px var(--mono); color: var(--faint); margin-left: 6px; font-weight: 400; }
.cs-assays { display: grid; gap: 3px; font: 11.5px var(--mono); }
.cs-assays div { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 4px 8px; border-radius: 8px; background: rgba(255, 255, 255, .025); }
.cs-assays span { color: var(--faint); min-width: 104px; }
.cs-assays b { font-weight: 400; color: var(--muted); }
.cs-assays b.on { color: #05080a; background: var(--c); padding: 0 5px; border-radius: 5px; font-weight: 500; }
.cs-assays small { color: var(--faint); padding: 2px 8px; }
.cs-mins { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.cs-mins li { display: grid; grid-template-columns: 14px 1fr auto; gap: 2px 8px; align-items: center; font-size: 13px; }
.cs-mins i { width: 12px; height: 12px; border-radius: 3px; }
.cs-mins span { font: 11.5px var(--mono); color: var(--muted); }
.cs-mins small { grid-column: 2 / 4; color: var(--faint); font-size: 12px; line-height: 1.4; }
#cs-read p, .cs-learn p { font-size: 13.5px; color: #c9d4d0; line-height: 1.55; }

.cs-learn a { color: var(--text); text-decoration-color: rgba(95, 212, 166, .5); }
.cs-steps { display: flex; gap: 5px; }
.cs-steps button { font: 500 12px var(--mono); width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line2); background: none; color: var(--muted); cursor: pointer; }
.cs-steps button[aria-current="true"] { background: var(--lime); border-color: var(--lime); color: #05080a; }
.cs-stepnav { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
.cs-stepnav button, .cs-go { font: inherit; font-size: 12.5px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .03); color: #c9d4d0; cursor: pointer; }
.cs-stepnav button.next { border-color: rgba(95, 212, 166, .45); color: var(--text); }
.cs-stepnav button:hover, .cs-go:hover { border-color: var(--lime); }
.cs-cuts { display: flex; flex-wrap: wrap; gap: 3px; margin: 8px 0; --c: var(--lime); }
.cs-cuts button { font: 500 11.5px var(--mono); padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line2); background: none; color: var(--muted); cursor: pointer; }
.cs-cuts button[aria-pressed="true"] { background: var(--lime); color: #05080a; border-color: var(--lime); }
.cs-int { display: block; margin: 6px 0; padding: 10px 12px; border-radius: 12px; background: rgba(95, 212, 166, .07); border: 1px solid rgba(95, 212, 166, .3); font-size: 13.5px; }
.cs-int b { color: var(--lime); font-family: var(--mono); font-weight: 500; }
.cs-learn small { display: block; color: var(--faint); font-size: 12px; margin-bottom: 8px; }

/* tips, labels, toasts, loader */
.cs-tip { position: absolute; left: 0; top: 0; pointer-events: none; font-size: 13px; color: #c9d4d0; padding: 8px 12px; border-radius: 12px; max-width: 280px;
  background: rgba(6, 11, 13, .9); border: 1px solid var(--line2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .9); }
.cs-tip[hidden] { display: none; }
.cs-tip b { font-family: var(--head); font-size: 15px; color: var(--text); }
.cs-tip span { display: flex; align-items: center; gap: 6px; font: 500 11.5px var(--mono); color: var(--muted); margin-top: 3px; }
.cs-tip span.cs-tv { display: block; color: #c9d4d0; }
.cs-tip span b { font: 500 11.5px var(--mono); color: var(--lime); }
.cs-tip i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.cs-tip small { display: block; color: var(--faint); font-size: 11.5px; margin-top: 4px; }
.cs-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cs-labels span { position: absolute; left: 0; top: 0; font: 500 10.5px var(--mono); color: #e6eeeb; padding: 2px 6px; border-radius: 6px; background: rgba(4, 8, 10, .72);
  border: 1px solid rgba(95, 212, 166, .3); white-space: nowrap; will-change: transform; margin-left: -6px; }
.cs-labels span::after { content: " m"; color: var(--faint); }
.cs-flash { position: absolute; left: 50%; top: 92px; translate: -50% 0; font-size: 13.5px; padding: 9px 16px; border-radius: 999px; background: var(--lime); color: #05080a; font-weight: 600; }
.cs-flash[hidden] { display: none; }
.cs-load { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; font: 12px var(--mono); color: var(--muted); letter-spacing: .08em;
  text-transform: uppercase; pointer-events: none; transition: opacity .7s var(--ease); background: #07090a; }
.cs-load i { width: 60px; height: 20px; border-radius: 10px; border: 1.5px solid var(--lime); box-shadow: 0 0 30px -4px rgba(95, 212, 166, .6); animation: cs-core 1.4s var(--ease) infinite; }
@keyframes cs-core { 50% { transform: scaleX(.5); } }
.cs-load.done { opacity: 0; }
.cs-down { position: absolute; right: 24px; bottom: 26px; font: 12px var(--mono); color: var(--faint); text-decoration: none; }
.cs-down:hover { color: var(--text); }
[data-view="bench"] .cs-down { display: none; }
@media (max-width: 760px) { .cs-down { display: none; } }

/* no WebGL: the stage becomes a plain header and the words below carry the page */
.cs-stage.flat { height: auto; min-height: 0; padding: 100px 0 10px; background: none; }
.cs-stage.flat canvas, .cs-stage.flat .cs-vignette, .cs-stage.flat .cs-tools, .cs-stage.flat .cs-holes, .cs-stage.flat .cs-down, .cs-stage.flat .cs-cap { display: none; }
.cs-stage.flat .cs-head { position: static; max-width: 920px; margin: 0 auto; padding: 0 24px; }

/* the words */
.cs-copy { padding-top: 56px; }
.cs-copy h2:first-child { margin-top: 0; }
.cs-cards { display: grid; gap: 18px; margin-top: 26px; }
.cs-card { padding: 20px; border-radius: 18px; border: 1px solid var(--line2); background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012)); scroll-margin-top: 90px; }
.cs-card h3 { font-size: 22px; color: var(--text); margin: 0 0 4px; }
.cs-card h3 span { font: 500 14px var(--mono); color: var(--lime); margin-left: 6px; }
.cs-card figure { margin: 14px 0 6px; }
.cs-card img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); background: #111; }
.cs-card figcaption { font-size: 13px; color: var(--faint); margin-top: 8px; line-height: 1.5; }
.cs-card p b { color: var(--lime); font-weight: 500; }
.cs-card .cs-facts { font-size: 14px; }
.cs-more { font-size: 13.5px; }

@media (max-width: 1100px) {
  .cs-panel { left: 10px; right: 10px; top: auto; bottom: 10px; width: auto; max-height: 46%; }
  [data-view="bench"] .cs-tools { right: 16px; }
  [data-view="bench"] .cs-bench-ctl { bottom: calc(46% + 20px); left: 12px; }
}
@media (max-width: 760px) {
  .cs-head { left: 16px; right: 16px; top: 74px; }
  .cs-head .lede { font-size: 13.5px; }
  .cs-cap { left: 12px; right: 12px; bottom: 86px; font-size: 13px; }
  .cs-tools { right: 12px; top: auto; bottom: 86px; flex-direction: column; }
  [data-view="shed"] .cs-cap:not([hidden]) ~ .cs-tools { bottom: 190px; }
  .cs-panel { max-height: 42%; padding: 14px; }
  [data-view="bench"] .cs-tools { top: 70px; bottom: auto; flex-direction: row; }
  [data-view="bench"] .cs-bench-ctl { bottom: calc(42% + 18px); }
  #cs-log { height: 170px; }
}
@media (prefers-reduced-motion: reduce) { .cs-load i { animation: none; } }
.cs-lens { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 6px; }
.cs-lens button { font: 500 11.5px var(--mono); padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line2); background: none; color: var(--muted); cursor: pointer; }
.cs-lens button[aria-pressed="true"] { background: var(--teal); color: #031210; border-color: var(--teal); }
#cs-read p.cs-lnote { font-size: 12px; color: var(--faint); margin: 0 0 10px; }
.cs-about { margin-top: 8px; font-size: 13px; }
.cs-about summary { cursor: pointer; color: var(--muted); font-size: 12.5px; list-style: none; }
.cs-about summary::-webkit-details-marker { display: none; }
.cs-about summary::before { content: "+ "; color: var(--teal); }
.cs-about[open] summary::before { content: "– "; }
.cs-learn { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.cs-learn + .cs-logwrap { margin-top: 16px; }