/* The workbench is one spatial control; reading lives on the project pages. */
.explore-section {
  --deck-duration: 420ms;
  --deck-ease: cubic-bezier(.22, .78, .22, 1);
  --bench-line: color-mix(in srgb, var(--line) 82%, var(--accent));
  padding-block: 76px 58px;
  scroll-margin-top: 12px;
}
.explore-section .section-top { margin-bottom: 30px; }
.explore-heading-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}
.explore-flip-button {
  min-height: 44px;
  min-inline-size: 8em;
  padding: 8px 14px;
  border: 1px solid var(--bench-line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
}
.explore-flip-button:hover, .explore-flip-button[aria-expanded=true] {
  border-color: var(--accent);
  color: var(--accent);
}
.home-workbench-band {
  --trace-tint: .11;
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, var(--paper), color-mix(in srgb, var(--surface) 74%, var(--paper)) 50%, var(--surface));
}
html[data-theme=dark] .home-workbench-band { --trace-tint: .16; }
.home-workbench-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('assets/workbench-traces.svg') repeat center / 480px 320px;
  opacity: var(--trace-tint);
  mask-image: linear-gradient(180deg, transparent 3%, #000 27% 70%, transparent 96%);
}
.home-workbench-band .observation-section {
  border-block: 0;
  background: transparent;
  padding-top: clamp(30px, 4vw, 58px);
}
.explore-flip-surface, .explore-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
.explore-flip-surface > *, .explore-details > .explore-detail { grid-area: 1 / 1; }
.explore-flip-surface > [inert], .explore-details > [inert] { visibility: hidden; }
.explore-project-face { display: grid; grid-template-rows: 1fr auto; }
.explore-details { width: 100%; }
.explore-signal-face { display: grid; }
.explore-signal-face .signal-panel {
  max-width: none;
  align-content: center;
  padding-block: clamp(18px, 4vw, 36px);
  padding-inline: max(clamp(16px, 4vw, 40px), calc((100% - 820px) / 2));
}
.explore-signal-face .signal-panel h2 { font-size: clamp(18px, 2vw, 26px); }
.explore-signal-face[inert] :is(.scan-marker, .wave-glow) { animation-play-state: paused; }
.explore-workbench { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(290px,.85fr); gap:20px; min-width:0; padding:24px 32px 24px 15px; border:1px solid var(--bench-line); border-radius:26px; background:linear-gradient(120deg,color-mix(in srgb,var(--surface) 92%,var(--accent)) 0%,var(--surface) 60%); box-shadow:inset 0 1px 0 #ffffff08,0 16px 40px #111b2b05; }
.project-deck { position:relative; min-width:0; min-height:510px; perspective:1400px; perspective-origin:50% 47%; transform-style:preserve-3d; }
.project-deck::before { content:''; position:absolute; width:76%; height:56%; left:12%; top:26%; border:1px solid color-mix(in srgb,var(--line) 45%,transparent); border-radius:50%; transform:translateZ(-110px) rotateX(62deg); pointer-events:none; }
.project-deck::after { content:''; position:absolute; width:42%; height:26px; left:29%; bottom:45px; border-radius:50%; background:#07101d13; filter:blur(14px); transform:translateZ(-100px); pointer-events:none; }
.explore-card {
  --card-x:0px; --card-y:0px; --card-z:70px; --card-angle:0deg; --card-yaw:0deg; --card-scale:.96; --card-rise:0px;
  position:absolute; left:50%; top:47%; display:flex; flex-direction:column; width:min(350px,66%); padding:0; overflow:hidden; text-align:left; border:1px solid var(--line); border-radius:18px; background:var(--surface); color:var(--ink); box-shadow:0 12px 32px #101c3124; opacity:1; transform-origin:50% 75%; transform:translate3d(calc(-50% + var(--card-x)),calc(-50% + var(--card-y) + var(--card-rise)),var(--card-z)) rotateY(var(--card-yaw)) rotateZ(var(--card-angle)) scale(var(--card-scale));
  transition:transform var(--deck-duration) var(--deck-ease),opacity 280ms ease,border-color 180ms ease,box-shadow var(--deck-duration) var(--deck-ease);
}
/* The browser sorts interpolated depth, so cards do not jump to a new z-index
   at the start of a selection. These remain flat artwork, not hardware models. */
.explore-card[data-slot=active] { border-color:color-mix(in srgb,var(--accent) 48%,var(--line)); box-shadow:0 20px 45px #09142626,0 2px 6px #0914260d; }
.explore-card[data-slot=before] { --card-x:-116px; --card-y:24px; --card-z:-5px; --card-angle:-13deg; --card-yaw:9deg; --card-scale:.84; opacity:.82; }
.explore-card[data-slot=after] { --card-x:118px; --card-y:17px; --card-z:6px; --card-angle:13deg; --card-yaw:-9deg; --card-scale:.84; opacity:.82; }
.explore-card[data-slot=rear] { --card-x:23px; --card-y:-34px; --card-z:-80px; --card-angle:3deg; --card-yaw:-3deg; --card-scale:.84; opacity:.6; }
.explore-card:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.explore-art { display:block; width:100%; aspect-ratio:3/2; overflow:hidden; background:#e8ebf0; border-bottom:1px solid color-mix(in srgb,var(--line) 65%,transparent); }
.explore-art img,.explore-art svg { display:block; width:100%; height:100%; object-fit:contain; }
.explore-art .image-fallback { min-height:0; height:100%; padding:20px; font-size:12px; }
.explore-card-footer { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; padding:16px 18px 18px; background:var(--surface); }
.explore-card-footer strong { min-width:0; font-size:20px; font-weight:600; letter-spacing:-.045em; line-height:1.3; }
.explore-card-footer>span { grid-column:1; min-width:0; font-size:12px; line-height:1.65; color:var(--muted); }
.explore-card-footer em { grid-column:2; grid-row:1/3; align-self:center; font-size:9px; font-style:normal; line-height:1.6; color:var(--muted); border:1px solid color-mix(in srgb,var(--copper,#e4b678) 35%,var(--line)); border-radius:4px; padding:3px 5px; white-space:nowrap; }
.explore-console { position:relative; display:flex; flex-direction:column; align-items:center; min-width:0; padding-block:16px 8px; }
.explore-dial { position:relative; width:148px; height:148px; flex-shrink:0; border-radius:50%; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; outline-offset:6px; }
.explore-dial:focus-visible { outline:2px solid var(--accent); }
.dial-ticks { position:absolute; inset:0; border-radius:50%; background:repeating-conic-gradient(from -1deg,var(--muted) 0deg 1deg,transparent 1deg 10deg); -webkit-mask:radial-gradient(circle,transparent 63%,#000 64% 66%,transparent 67%); mask:radial-gradient(circle,transparent 63%,#000 64% 66%,transparent 67%); opacity:.4; pointer-events:none; }
.dial-rotor { position:absolute; inset:17px; border:1px solid color-mix(in srgb,var(--line) 70%,var(--faint)); border-radius:50%; background:conic-gradient(from 40deg,color-mix(in srgb,var(--surface) 84%,var(--muted)),var(--surface) 16%,color-mix(in srgb,var(--surface) 86%,var(--muted)) 38%,var(--surface) 60%,color-mix(in srgb,var(--surface) 88%,var(--muted)) 82%,var(--surface)); box-shadow:inset 0 1px 1px #ffffff24,inset 0 -2px 4px #00000008,0 6px 14px #0b182518; transform:rotate(var(--dial-angle,0deg)); transition:transform var(--deck-duration) var(--deck-ease),box-shadow 180ms ease; pointer-events:none; }
.dial-rotor::before { content:''; position:absolute; width:3px; height:14px; left:calc(50% - 1.5px); top:9px; border-radius:2px; background:var(--copper,#e4b678); box-shadow:0 0 0 1px #62401c0d; }
.dial-rotor::after { content:''; position:absolute; inset:7px; border:1px solid color-mix(in srgb,var(--line) 75%,transparent); border-radius:50%; }
.dial-center { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:27px; line-height:1; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.06em; color:var(--ink); pointer-events:none; }
.explore-dial-hint { margin:6px 0 22px; font-size:10px; color:var(--muted); line-height:1.7; }
.explore-tabs { position:relative; display:flex; align-items:center; width:100%; padding:4px; gap:3px; border:1px solid var(--line); border-radius:9px; background:color-mix(in srgb,var(--paper) 65%,var(--surface)); }
.explore-tab { position:relative; z-index:1; flex:1; min-width:0; min-height:36px; padding:5px 5px; border:1px solid transparent; border-radius:6px; color:var(--muted); background:none; font-size:10px; font-weight:600; letter-spacing:.015em; transition:background-color 160ms ease,color 160ms ease,box-shadow 160ms ease,transform 120ms ease; }
.explore-tab[aria-selected=true] { color:var(--ink); background:var(--surface); border-color:color-mix(in srgb,var(--line) 80%,transparent); box-shadow:0 1px 5px #101b2c0b; }
.explore-tabs[data-indicator=true] .explore-tab[aria-selected=true] { background:transparent; border-color:transparent; box-shadow:none; }
.explore-tab-indicator { position:absolute; left:0; top:0; pointer-events:none; border:1px solid color-mix(in srgb,var(--line) 80%,transparent); border-radius:6px; background:var(--surface); box-shadow:0 1px 5px #101b2c12; transition:transform 240ms cubic-bezier(.23,1,.32,1),width 240ms cubic-bezier(.23,1,.32,1),height 180ms ease; }
.explore-detail { width:100%; min-height:204px; padding-top:24px; }
.explore-detail h3 { margin:0 0 12px; max-width:16em; font-size:21px; line-height:1.5; letter-spacing:-.04em; text-wrap:balance; }
.explore-detail p { margin:0; color:var(--muted); font-size:12px; line-height:1.95; max-width:30em; }
.explore-tags { margin-top:15px; gap:5px; }
.explore-tags .tag { font-size:9px; padding:2px 6px; }
.explore-link { display:inline-flex; align-items:center; gap:12px; min-height:44px; margin-top:10px; color:var(--accent); font-size:12px; border-radius:5px; }
.explore-link svg { width:15px; height:15px; transition:transform 160ms var(--polish-ease); }
.explore-controls { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:auto; padding-top:18px; gap:14px; }
.explore-prev,.explore-next { display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink); font-size:17px; line-height:1; transition:background-color 140ms ease,border-color 140ms ease,transform 120ms ease; }
.explore-counter { color:var(--muted); font-size:11px; line-height:1.5; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.explore-scope { margin-top:17px; color:var(--faint); font-size:11px; line-height:1.8; }
.explore-tab:active { transform:scale(.97); }
.explore-prev:active,.explore-next:active { transform:scale(.94); background:var(--accent-soft); }
[data-explore][data-dragging=true] .explore-dial { cursor:grabbing; }
[data-explore][data-dragging=true] .dial-rotor { transition:none; box-shadow:inset 0 1px 1px #ffffff24,0 5px 15px #0b182525; }
[data-explore][data-motion=instant] .explore-project-face *,[data-explore][data-motion=instant] .explore-project-face *::before,[data-explore][data-motion=instant] .explore-project-face *::after { transition:none !important; animation:none !important; }
html[data-theme=dark] .explore-workbench { box-shadow:inset 0 1px 0 #ffffff04,0 16px 40px #0000000b; }
html[data-theme=dark] .explore-card[data-slot=active] { box-shadow:0 20px 45px #03081050,0 1px 0 #ffffff05; }
html[data-theme=dark] .project-deck::after { background:#03081038; }
@media (hover:hover) and (pointer:fine) {
  .explore-card[data-slot=active]:hover { --card-rise:-5px; box-shadow:0 23px 50px #09142630; border-color:var(--accent); }
  .explore-card:not([data-slot=active]):hover { --card-rise:-8px; opacity:1; border-color:color-mix(in srgb,var(--accent) 65%,var(--line)); }
  .explore-dial:hover .dial-rotor { box-shadow:inset 0 1px 1px #ffffff30,0 7px 17px #0b182525; }
  .explore-tab:not([aria-selected=true]):hover { color:var(--ink); background:var(--accent-soft); }
  .explore-prev:hover,.explore-next:hover { background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 50%,var(--line)); }
  .explore-link:hover svg { transform:translateX(3px); }
}
@media (max-width:1100px) {
  .explore-workbench { grid-template-columns:minmax(0,1.3fr) minmax(270px,.9fr); padding:20px; gap:18px; }
  .project-deck { min-height:490px; }
  .explore-card { width:min(310px,70%); }
  .explore-card[data-slot=before] { --card-x:-73px; --card-angle:-13deg; }
  .explore-card[data-slot=after] { --card-x:76px; --card-angle:13deg; }
  .explore-card-footer { padding:14px; }
  .explore-card-footer strong { font-size:18px; }
  .explore-card-footer em { font-size:8px; padding:2px 4px; }
}
@media (max-width:820px) {
  .explore-section { padding-block:44px; }
  .explore-workbench { grid-template-columns:minmax(0,1fr); gap:0; padding:14px 26px 25px; border-radius:21px; }
  .project-deck { min-height:420px; }
  .explore-card { width:min(330px,64%); }
  .explore-card[data-slot=before] { --card-x:-102px; }
  .explore-card[data-slot=after] { --card-x:105px; }
  .project-deck::after { bottom:25px; }
  .explore-console { display:grid; grid-template-columns:140px minmax(0,1fr); gap:0 28px; align-items:center; padding:5px 0 0; }
  .explore-dial { grid-column:1; grid-row:1/3; width:132px; height:132px; justify-self:center; }
  .explore-dial-hint { grid-column:1; grid-row:3; align-self:start; text-align:center; font-size:9px; margin:5px -7px 0; }
  .explore-tabs { grid-column:2; grid-row:1; }
  .explore-details { grid-column:2; grid-row:2/5; }
  .explore-detail { min-height:0; padding-top:17px; }
  .explore-detail h3 { font-size:20px; }
  .explore-controls { grid-column:1; grid-row:4; padding-top:18px; margin-top:0; gap:6px; }
  .explore-prev,.explore-next { width:36px; height:36px; }
  .explore-counter { font-size:9px; }
}
@media (max-width:560px) {
  .explore-workbench { padding:8px 18px 24px; border-radius:18px; }
  .project-deck { min-height:340px; }
  .explore-card { width:min(270px,72%); border-radius:13px; }
  .explore-card[data-slot=before] { --card-x:-48px; --card-y:17px; --card-angle:-12deg; --card-scale:.86; }
  .explore-card[data-slot=after] { --card-x:49px; --card-y:13px; --card-angle:12deg; --card-scale:.86; }
  .explore-card[data-slot=rear] { --card-x:12px; --card-y:-24px; }
  .explore-card-footer { padding:12px; gap:3px 5px; }
  .explore-card-footer strong { font-size:17px; }
  .explore-card-footer>span { font-size:10px; }
  .explore-card-footer em { font-size:7px; }
  .explore-console { display:flex; padding-top:6px; }
  .explore-dial { width:126px; height:126px; }
  .dial-center { font-size:24px; }
  .explore-dial-hint { margin:5px 0 19px; font-size:10px; }
  .explore-tab { min-height:44px; font-size:10px; }
  .explore-detail { padding-top:21px; width:100%; }
  .explore-detail h3 { max-width:18em; font-size:21px; }
  .explore-detail p { max-width:100%; font-size:13px; }
  .explore-tags .tag { font-size:10px; }
  .explore-link { font-size:13px; }
  .explore-controls { padding-top:18px; gap:16px; }
  .explore-prev,.explore-next { width:44px; height:44px; }
  .explore-counter { font-size:11px; }
  .explore-scope { font-size:10px; margin-top:13px; }
}
@media (max-width:360px) {
  .project-deck { min-height:290px; }
  .explore-card { width:74%; }
  .explore-card[data-slot=before] { --card-x:-36px; }
  .explore-card[data-slot=after] { --card-x:37px; }
  .explore-card-footer { padding:10px; }
  .explore-card-footer strong { font-size:15px; }
  .explore-card-footer em { display:none; }
  .explore-card-footer>span { grid-column:1/-1; }
}
@media (prefers-reduced-motion:reduce) {
  .explore-section *, .explore-section *::before, .explore-section *::after { transition:none !important; animation:none !important; }
  .explore-card { --card-rise:0px !important; }
  .explore-link:hover svg { transform:none; }
  .explore-tab:active,.explore-prev:active,.explore-next:active { transform:none; }
}