.smc-concepts-page {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3.2vw, 46px);
}

.smc-concepts-intro {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 4.5vw, 58px);
  background:
    radial-gradient(circle at 94% 7%, rgba(74, 217, 245, .13), transparent 30%),
    radial-gradient(circle at 6% 92%, rgba(255, 181, 46, .1), transparent 28%),
    #121824;
}

.smc-concepts-intro::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(rgba(255, 255, 255, .023) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .023) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(115deg, transparent 12%, #000 72%, transparent);
}

.smc-concepts-intro > * {
  position: relative;
  z-index: 1;
}

.smc-concepts-intro h1 {
  max-width: 920px;
  margin: 9px 0 14px;
  font-size: clamp(2rem, 4.5vw, 4.65rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.smc-concepts-intro > p {
  max-width: 790px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(.76rem, 1.3vw, .96rem);
  line-height: 1.7;
}

.smc-concepts-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.smc-concepts-legend span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid rgba(137, 151, 184, .2);
  border-radius: 999px;
  color: #c5cede;
  background: rgba(7, 11, 19, .58);
  font-size: .59rem;
  font-weight: 850;
}

.smc-concepts-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 9px currentColor;
}

.smc-concepts-legend .legend-arm { background: var(--cyan); }
.smc-concepts-legend .legend-server { background: var(--green); }

.smc-concept-list {
  display: grid;
  gap: 18px;
}

.smc-concept {
  --scene-bg: #0a0e18;
  --scene-grid: rgba(100, 142, 181, .1);
  --scene-surface: #101828;
  --scene-surface-2: #223148;
  --scene-line: #59677e;
  --scene-line-soft: rgba(163, 183, 211, .24);
  --scene-text: #dbe6f5;
  --scene-muted: #697a93;
  --scene-accent: #ffb52e;
  --scene-accent-rgb: 255, 181, 46;
  --scene-data: #ffd66f;
  --scene-data-dark: #d98908;
  --scene-arm: #b8c3d3;
  --scene-arm-light: #eef3f9;
  --scene-arm-dark: #58677c;
  --scene-success: #4ce0a8;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--scene-accent) 20%, transparent);
  background: #111723;
}

.smc-concept-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--line);
}

.smc-concept-number {
  display: grid;
  place-items: center;
  width: 47px;
  height: 47px;
  border: 1px solid color-mix(in srgb, var(--scene-accent) 38%, transparent);
  border-radius: 12px;
  color: var(--scene-accent);
  background: color-mix(in srgb, var(--scene-accent) 7%, transparent);
  font: 900 .73rem ui-monospace, SFMono-Regular, Consolas, monospace;
}

.smc-concept-copy h2 {
  margin: 4px 0 5px;
  font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  letter-spacing: -.025em;
}

.smc-concept-copy p {
  max-width: 790px;
  margin: 0;
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.55;
}

.smc-motion-toggle {
  min-width: 75px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--scene-accent) 30%, transparent);
  border-radius: 999px;
  color: var(--scene-text);
  background: color-mix(in srgb, var(--scene-accent) 7%, #0c111b);
  font-size: .59rem;
  font-weight: 850;
  cursor: pointer;
}

.smc-motion-toggle:hover,
.smc-motion-toggle:focus-visible {
  border-color: var(--scene-accent);
  outline: none;
}

.smc-scene-shell {
  padding: clamp(8px, 1.6vw, 18px);
  background: color-mix(in srgb, var(--scene-bg) 86%, #fff 2%);
}

.smc-transfer-scene {
  width: 100%;
  aspect-ratio: 1280 / 440;
}

.smc-transfer-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.scene-backdrop { fill: var(--scene-bg); }
.scene-grid { opacity: .72; }
.scene-floor { fill: none; stroke: var(--scene-line-soft); stroke-width: 2; }
.scene-floor-shadow { fill: #000; opacity: .34; }

.scene-laptop-lid,
.scene-laptop-deck,
.scene-server-body,
.scene-monitor-body {
  fill: var(--scene-surface);
  stroke: var(--scene-line);
  stroke-width: 3;
}

.scene-laptop-screen {
  stroke: color-mix(in srgb, var(--scene-accent) 38%, var(--scene-line));
  stroke-width: 2;
}

.scene-camera,
.scene-trackpad { fill: var(--scene-muted); }
.scene-keyboard { fill: color-mix(in srgb, var(--scene-surface-2) 76%, #000); stroke: var(--scene-line-soft); stroke-width: 2; }
.scene-keys path { fill: none; stroke: var(--scene-line-soft); stroke-width: 3; stroke-linecap: round; }

.scene-btc-eyebrow,
.scene-btc-height,
.scene-btc-value {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.scene-btc-eyebrow {
  fill: var(--scene-accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
}

.scene-btc-block {
  filter: url(#sceneGlow);
}

.scene-btc-top { fill: color-mix(in srgb, var(--scene-data) 84%, #fff); }
.scene-btc-left { fill: var(--scene-data-dark); }
.scene-btc-right { fill: color-mix(in srgb, var(--scene-data) 72%, var(--scene-data-dark)); }

.scene-btc-block text {
  fill: #fff;
  font: 900 36px Inter, system-ui, sans-serif;
}

.scene-btc-height {
  fill: var(--scene-muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
}

.scene-btc-value {
  fill: var(--scene-text);
  font-size: 12px;
  font-weight: 900;
}

.scene-btc-hash {
  fill: none;
  stroke: var(--scene-line-soft);
  stroke-width: 4;
  stroke-linecap: round;
}

.scene-data-mountain path:nth-child(3n + 1) { fill: var(--scene-data); }
.scene-data-mountain path:nth-child(3n + 2) { fill: var(--scene-data-dark); }
.scene-data-mountain path:nth-child(3n) { fill: color-mix(in srgb, var(--scene-data) 64%, var(--scene-data-dark)); }

.scene-device-label text,
.scene-status text,
.scene-server-title {
  fill: var(--scene-muted);
  font: 800 12px ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 1.4px;
}

.scene-device-label circle { fill: var(--scene-accent); }
.scene-device-label-right circle { fill: var(--scene-success); }

.scene-server-cap,
.scene-rack rect {
  fill: color-mix(in srgb, var(--scene-surface-2) 88%, #000);
  stroke: var(--scene-line-soft);
  stroke-width: 2;
}

.scene-rack path { fill: none; stroke: var(--scene-line-soft); stroke-width: 4; stroke-linecap: round; }
.scene-rack circle { fill: var(--scene-success); filter: url(#sceneGlow); }
.scene-server-numbers {
  opacity: 0;
  transition: opacity .18s ease;
}

.scene-server-numbers text {
  fill: var(--scene-success);
  font: 800 8px ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 1.15px;
  filter: url(#sceneGlow);
}

.smc-transfer-svg.is-processing .scene-server-numbers {
  opacity: .92;
  animation: smc-server-data-run .32s steps(2, end) infinite;
}

.smc-transfer-svg.is-processing .scene-rack > path {
  opacity: .08;
}

.smc-transfer-svg.is-processing .scene-tray-handle,
.smc-transfer-svg.is-processing .scene-rack circle {
  fill: var(--scene-success);
  opacity: 1;
}

.scene-server-title { fill: var(--scene-text); font-size: 11px; }

.scene-tray-inside { fill: color-mix(in srgb, var(--scene-surface) 70%, #000); stroke: var(--scene-line); stroke-width: 3; }
.scene-tray-front { fill: var(--scene-surface-2); stroke: var(--scene-line); stroke-width: 3; }
.scene-tray-handle { fill: var(--scene-accent); opacity: .58; }
.scene-server-pulse circle:first-child { fill: var(--scene-success); }
.scene-server-pulse circle:last-child { fill: none; stroke: var(--scene-success); stroke-width: 2; transform-origin: 827px 96px; animation: smc-server-pulse 2.4s ease-out infinite; }

.scene-monitor-cable path {
  fill: none;
  stroke-linecap: round;
}

.scene-monitor-cable-base {
  stroke: color-mix(in srgb, var(--scene-line) 80%, #000);
  stroke-width: 9;
}

.scene-monitor-cable-flow {
  stroke: var(--scene-success);
  stroke-width: 2;
  stroke-dasharray: 3 13;
  opacity: .3;
}

.smc-transfer-svg.is-processing .scene-monitor-cable-flow {
  opacity: 1;
  filter: url(#sceneGlow);
  animation: smc-cable-flow .5s linear infinite;
}

.scene-monitor-screen {
  fill: color-mix(in srgb, var(--scene-bg) 92%, #000);
  stroke: var(--scene-line-soft);
  stroke-width: 2;
}

.scene-monitor-logo {
  clip-path: inset(0 round 7px);
}

.scene-monitor-brand,
.scene-monitor-subtitle,
.scene-clan-heading,
.scene-clan-row text {
  font-family: Inter, system-ui, sans-serif;
}

.scene-monitor-brand {
  fill: var(--scene-text);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.1px;
}

.scene-monitor-subtitle {
  fill: var(--scene-accent);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 1.4px;
}

.scene-monitor-live {
  fill: var(--scene-success);
  filter: url(#sceneGlow);
}

.scene-clan-heading {
  fill: var(--scene-muted);
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .9px;
}

.scene-clan-row text {
  dominant-baseline: middle;
  font-size: 7.5px;
  font-weight: 700;
  transition: fill .14s ease, opacity .14s ease;
}

.scene-clan-name,
.scene-clan-score {
  fill: var(--scene-text);
}

.scene-clan-power {
  fill: color-mix(in srgb, var(--scene-success) 78%, var(--scene-text));
}

.scene-clan-rank {
  fill: color-mix(in srgb, var(--scene-accent) 72%, var(--scene-text));
  font-weight: 900 !important;
}

.scene-clan-row.is-live text {
  fill: var(--scene-accent);
  filter: url(#sceneGlow);
}

.scene-monitor-neck {
  fill: var(--scene-surface);
  stroke: var(--scene-line);
  stroke-width: 3;
}

.scene-monitor-foot {
  fill: none;
  stroke: var(--scene-line);
  stroke-width: 8;
  stroke-linecap: round;
}

.scene-base-foot { fill: color-mix(in srgb, var(--scene-arm-dark) 72%, #000); }
.scene-base { stroke: color-mix(in srgb, var(--scene-arm-light) 34%, transparent); stroke-width: 2; }
.scene-base-light { fill: var(--scene-success); filter: url(#sceneGlow); }
.scene-arm-segment { stroke-width: 38; stroke-linecap: round; }
.scene-arm-segment + .scene-arm-segment { stroke-width: 31; }
.scene-joint { stroke: var(--scene-arm-dark); stroke-width: 4; }
.scene-joint-core { fill: var(--scene-accent); filter: url(#sceneGlow); }
.scene-wrist { stroke: var(--scene-arm-dark); stroke-width: 4; }
.scene-gripper-palm,
.scene-gripper-finger { fill: var(--scene-arm-light); stroke: var(--scene-arm-dark); stroke-width: 2; }
.scene-gripper-finger { transform-box: fill-box; transition: transform 120ms ease; }
.scene-gripper.is-closed .scene-gripper-top { transform: translateY(7px) rotate(12deg); }
.scene-gripper.is-closed .scene-gripper-bottom { transform: translateY(-7px) rotate(-12deg); }

.scene-motion-guide {
  fill: none;
  stroke: var(--scene-accent);
  stroke-width: 2;
  stroke-dasharray: 6 13;
  opacity: .22;
  animation: smc-guide-flow 1.25s linear infinite;
}

.scene-payload-halo { fill: rgba(var(--scene-accent-rgb), .12); stroke: var(--scene-accent); stroke-width: 1.5; }
.scene-payload-left { fill: var(--scene-data-dark); }
.scene-payload-right { fill: color-mix(in srgb, var(--scene-data) 64%, var(--scene-data-dark)); }
.scene-payload-mark { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.scene-particles circle { fill: var(--scene-accent); opacity: 0; }
.scene-status circle { fill: var(--scene-success); filter: url(#sceneGlow); }
.scene-status text { fill: color-mix(in srgb, var(--scene-success) 72%, #fff); }

.concept-blueprint {
  --scene-bg: #06131c;
  --scene-grid: rgba(48, 210, 255, .16);
  --scene-surface: #09202c;
  --scene-surface-2: #0d3445;
  --scene-line: #28718c;
  --scene-line-soft: rgba(85, 218, 255, .26);
  --scene-text: #c9f5ff;
  --scene-muted: #5a9db0;
  --scene-accent: #37d9ff;
  --scene-accent-rgb: 55, 217, 255;
  --scene-data: #88ecff;
  --scene-data-dark: #0aa4d0;
  --scene-arm: #28bddd;
  --scene-arm-light: #b7f5ff;
  --scene-arm-dark: #13647b;
  --scene-success: #54f1ba;
}

.concept-blueprint .scene-laptop-lid,
.concept-blueprint .scene-laptop-deck,
.concept-blueprint .scene-server-body,
.concept-blueprint .scene-rack rect {
  fill-opacity: .62;
}

.concept-blueprint .scene-motion-guide { stroke-dasharray: 3 8; opacity: .55; }

.concept-neon {
  --scene-bg: #0d0719;
  --scene-grid: rgba(197, 80, 255, .1);
  --scene-surface: #19102c;
  --scene-surface-2: #29174a;
  --scene-line: #6c3b8c;
  --scene-line-soft: rgba(219, 126, 255, .24);
  --scene-text: #f6e4ff;
  --scene-muted: #9a78ae;
  --scene-accent: #df5cff;
  --scene-accent-rgb: 223, 92, 255;
  --scene-data: #ff78e7;
  --scene-data-dark: #8c35ef;
  --scene-arm: #8f5eff;
  --scene-arm-light: #e5d7ff;
  --scene-arm-dark: #3e256e;
  --scene-success: #45f2d0;
}

.concept-neon .scene-motion-guide { stroke-width: 4; opacity: .42; filter: url(#sceneGlow); }

.concept-friendly {
  --scene-bg: #081719;
  --scene-grid: rgba(88, 225, 182, .08);
  --scene-surface: #102426;
  --scene-surface-2: #18383a;
  --scene-line: #3f7775;
  --scene-line-soft: rgba(133, 227, 204, .22);
  --scene-text: #e2faf4;
  --scene-muted: #75a49c;
  --scene-accent: #6ce7b4;
  --scene-accent-rgb: 108, 231, 180;
  --scene-data: #8df2c8;
  --scene-data-dark: #28a77a;
  --scene-arm: #67a6ad;
  --scene-arm-light: #d2f1ef;
  --scene-arm-dark: #315c63;
  --scene-success: #b4ed63;
}

.concept-friendly .scene-backdrop,
.concept-friendly .scene-laptop-lid,
.concept-friendly .scene-server-body { rx: 32px; }
.concept-friendly .scene-motion-guide { opacity: .12; }

.concept-minimal {
  --scene-bg: #101216;
  --scene-grid: rgba(255, 255, 255, .035);
  --scene-surface: #191c21;
  --scene-surface-2: #24282f;
  --scene-line: #565d67;
  --scene-line-soft: rgba(255, 255, 255, .12);
  --scene-text: #f3f5f7;
  --scene-muted: #777e88;
  --scene-accent: #ffb52e;
  --scene-accent-rgb: 255, 181, 46;
  --scene-data: #ffc958;
  --scene-data-dark: #bd7810;
  --scene-arm: #777e88;
  --scene-arm-light: #d8dce1;
  --scene-arm-dark: #3d424a;
  --scene-success: #ffb52e;
}

.concept-minimal .scene-grid,
.concept-minimal .scene-btc-hash,
.concept-minimal .scene-server-pulse circle:last-child,
.concept-minimal .scene-motion-guide {
  display: none;
}

.smc-concept.is-paused .scene-server-pulse circle:last-child,
.smc-concept.is-paused .scene-motion-guide {
  animation-play-state: paused;
}

@keyframes smc-guide-flow {
  to { stroke-dashoffset: -38; }
}

@keyframes smc-server-pulse {
  0% { opacity: .85; transform: scale(.45); }
  75%, 100% { opacity: 0; transform: scale(1.45); }
}

@keyframes smc-server-data-run {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(1.5px); }
}

@keyframes smc-cable-flow {
  to { stroke-dashoffset: -16; }
}

.smc-concepts-embed,
.smc-concepts-embed body {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}

.smc-concepts-embed .workspace-sidebar,
.smc-concepts-embed .workspace-topbar,
.smc-concepts-embed .smart-miners-tabs,
.smc-concepts-embed .independence-notice,
.smc-concepts-embed .smc-concepts-intro,
.smc-concepts-embed .workspace-footer {
  display: none !important;
}

.smc-concepts-embed .workspace-shell,
.smc-concepts-embed .workspace-main,
.smc-concepts-embed .smc-concepts-page {
  display: block;
  min-height: 0;
}

.smc-concepts-embed .smc-concepts-page,
.smc-concepts-embed .smc-scene-shell {
  padding: 0;
}

.smc-concepts-embed .smc-concept-list {
  display: block;
}

.smc-concepts-embed .smc-concept {
  display: none;
  border: 0;
  border-radius: 0;
}

.smc-concepts-embed .smc-concept.concept-precision {
  display: block;
}

.smc-concepts-embed .smc-concept-copy {
  display: none;
}

.smc-concepts-embed .smc-transfer-scene {
  min-width: 0;
}

@media (max-width: 760px) {
  .smc-concepts-page { padding: 12px; }
  .smc-concept-copy { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
  .smc-motion-toggle { grid-column: 2; justify-self: start; }
  .smc-scene-shell { padding: 4px; overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-server-pulse circle:last-child,
  .scene-motion-guide,
  .scene-server-numbers,
  .scene-monitor-cable-flow { animation: none; }
}