@layer components {
  .chapter-nav { display: flex; gap: 8px; width: fit-content; padding: 5px; margin: 0 0 25px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
  .chapter-nav button { display: flex; align-items: center; gap: 9px; min-height: 39px; padding: 7px 15px; border: 1px solid transparent; border-radius: 8px; background: transparent; font-size: 11px; line-height: 1.4; text-align: center; color: var(--muted); }
  .chapter-nav button[aria-current] { color: var(--ink); background: var(--lime-pale); border-color: var(--line); }
  .chapter-nav button:not(:disabled):hover { color: var(--ink); }
  .chapter-nav button:disabled { opacity: .55; }
  .chapter-mark { display: grid; place-items: center; flex: none; width: 21px; height: 21px; border: 1px solid var(--line); border-radius: 50%; font: 10px var(--mono); }
  .chapter-nav [aria-current] .chapter-mark, .chapter-nav .is-complete .chapter-mark { background: var(--green); color: var(--paper); border-color: var(--green); }
  .cluster-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 25px; align-items: start; }
  .cluster-world { min-width: 0; }
  .cluster-summary { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); margin-bottom: 15px; font-size: 11px; }
  .cluster-summary span { display: flex; align-items: center; gap: 7px; }
  .cluster-summary svg { width: 15px; height: 15px; }
  .cluster-summary strong { font: 10px var(--mono); color: var(--muted); }
  .cluster-map { position: relative; height: 386px; overflow: hidden; isolation: isolate; background: #ecf0e0; }
  .cluster-map::before { content: ""; position: absolute; width: 33px; height: 33px; top: 23px; left: 27px; border-radius: 50%; background: #e7d798; box-shadow: 0 0 0 9px #e7d7981c; }
  .cluster-hill { position: absolute; z-index: -1; width: 100%; height: 100%; left: -25%; top: 15%; background: #dfe7ce; border-radius: 50% 50% 0 0; transform: rotate(-17deg); }
  .cluster-hill.second { left: 44%; top: 52%; background: #d7e2c7; transform: rotate(18deg); }
  .cluster-path { position: absolute; width: 100%; height: 100%; inset: 0; pointer-events: none; }
  .cluster-path path { fill: none; stroke: #f7f5e7; stroke-width: 22px; stroke-linecap: round; }
  .delivery-target, .workshop { position: absolute; display: flex; flex-direction: column; align-items: center; width: 145px; padding: 3px 5px 7px; transform: translate(-50%, -50%); border: 1px solid transparent; border-radius: 14px; background: transparent; text-align: center; }
  .delivery-target { z-index: 2; }
  .delivery-target:disabled { cursor: default; }
  .delivery-target:not(:disabled):hover, .delivery-target.is-drop-target { background: #fffff975; border-color: #9eb584; box-shadow: 0 3px 14px #5375440a; }
  .delivery-target svg, .workshop > svg { width: 127px; height: 112px; overflow: visible; }
  .delivery-target strong, .workshop strong { font-size: 11px; font-weight: 600; }
  .delivery-target > span, .workshop-state { font-size: 9px; color: #6a7e58; }
  .login-desk { left: 17%; top: 47%; }
  .dispatch-board { left: 46%; top: 28%; }
  .workshop-one { left: 80%; top: 28%; }
  .workshop-two { left: 81%; top: 75%; }
  .workshop-state { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
  .workshop-state::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #9b8959; }
  .workshop.is-running { background: #fffff949; border-color: #9cb77a; }
  .workshop.is-running .workshop-state { color: #4f7238; }
  .workshop.is-running .workshop-state::before { background: #749951; }
  .job-envelope { position: absolute; display: flex; flex-direction: column; align-items: center; left: 32%; top: 68%; z-index: 4; transform: rotate(-9deg); padding: 8px 12px; border: 1px dashed #9fb181; border-radius: 10px; background: #fcfae994; cursor: grab; }
  .job-envelope:active { cursor: grabbing; }
  .job-envelope svg { width: 67px; height: 51px; pointer-events: none; }
  .job-envelope span { font-size: 9px; }
  .cluster-degu { position: absolute; width: 103px; height: 110px; left: var(--degu-x); top: var(--degu-y); transform: translate(-50%, -50%); z-index: 3; pointer-events: none; }
  .cluster-carry { position: absolute; width: 42px; height: 31px; right: 8px; bottom: 29px; opacity: 0; transform: rotate(-14deg) scale(.7); }
  .cluster-carry svg { width: 100%; height: 100%; }
  .cluster-degu.has-ticket .cluster-carry { opacity: 1; transform: rotate(-14deg) scale(1); }
  .board-ticket { position: absolute; left: 45%; top: 60%; padding: 8px 18px; transform: rotate(4deg); background: #f8edd1; border: 1px solid #c2b186; border-radius: 4px; box-shadow: 2px 4px 0 #9bac7624; text-align: center; }
  .board-ticket span { display: block; font: 8px/1.6 var(--mono); color: #8b7f5d; }
  .board-ticket strong { font: 21px/1.5 var(--serif); color: #5e694b; }
  .cluster-world .journey { margin: 18px 0 0; padding: 0; }
  .cluster-world .journey-list { gap: 28px; }
  .cluster-world .journey-list li + li::before { left: -21px; width: 14px; }
  .slurm-page .terminal { margin-top: 24px; }
  .terminal-output { margin: 13px 0 5px 20px; padding: 12px 0 2px; border-top: 1px solid #a6b79c30; color: #c4d0b7; font: 10px/1.9 var(--mono); overflow-x: auto; }
  .node-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 21px 0 18px; }
  .node-choice { padding: 15px 11px; border: 1px solid var(--line); border-radius: 9px; background: transparent; text-align: left; }
  .node-choice[aria-pressed="true"] { background: var(--lime-pale); border-color: #9eb680; box-shadow: inset 0 0 0 1px #9eb680; }
  .node-choice strong { display: block; font: 500 25px/1.3 var(--serif); }
  .node-choice span { display: block; margin-top: 6px; font-size: 9px; line-height: 1.5; color: var(--muted); }
  .resource-list { display: grid; gap: 6px; padding: 0 0 15px; border-bottom: 1px solid var(--line); }
  .resource-list > div { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; color: var(--muted); }
  .resource-list strong { font: 10px var(--mono); color: var(--ink); }
  .slurm-page .path-details pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 9px/1.9 var(--mono); padding: 12px; background: var(--lime-pale); border-radius: 7px; }
  .job-stamp { display: flex; align-items: center; gap: 15px; border: 1px dashed #afbb94; border-radius: 9px; padding: 15px; background: var(--lime-pale); margin: 24px 0; }
  .job-stamp span { font: 9px var(--mono); color: var(--muted); }
  .job-stamp strong { font: 33px/1 var(--serif); }
  .job-stamp span:last-child { margin-left: auto; }
  .queue-state { display: flex; flex-wrap: wrap; width: fit-content; align-items: center; gap: 8px; margin: 23px 0 18px; border: 1px solid #e3d5b9; background: var(--amber-pale); border-radius: 7px; padding: 8px 10px; color: var(--amber); }
  .queue-state strong { font: 600 12px var(--mono); }
  .queue-state code { font: 9px var(--mono); }
  .queue-state.running { background: var(--lime-pale); color: var(--green); border-color: #b3c992; }
  .queue-state.failed { background: var(--danger-pale); color: var(--danger); border-color: #d4ad9e; }
  .job-owner { font: 10px var(--mono); color: var(--muted); padding-top: 15px; border-top: 1px solid var(--line); }
  .slurm-reference { margin-top: 14px; color: var(--muted); font-size: 10px; }
}

@layer layouts {
  .slurm-page .cluster-world .journey { padding: 0; }
  .slurm-page .cluster-world .journey-list { justify-content: center; padding: 0; }
  .slurm-page .lesson-panel { min-height: 0; }
}

@layer motion {
  .delivery-target, .node-choice, .chapter-nav button { transition: background-color 180ms ease, border-color 180ms ease; }
  .cluster-degu { transition: left 850ms cubic-bezier(.3, .05, .2, 1), top 850ms cubic-bezier(.3, .05, .2, 1); }
  .cluster-carry { transition: opacity 250ms ease, transform 250ms ease; }
  .cluster-degu.is-happy .mascot-art { animation: happy 700ms ease-in-out 2, breathe 3.7s 1.4s ease-in-out infinite; }
  .job-envelope { animation: ticket-float 3s ease-in-out infinite; }
  .workshop.is-running .workshop-state::before { animation: workshop-pulse 2s ease-in-out infinite; }
  @keyframes ticket-float { 0%, 100% { transform: translateY(0) rotate(-9deg); } 50% { transform: translateY(-4px) rotate(-5deg); } }
  @keyframes workshop-pulse { 50% { box-shadow: 0 0 0 4px #90ab5824; } }
}

@layer responsive {
  @media (max-width: 1080px) {
    .cluster-grid { grid-template-columns: 300px minmax(0, 1fr); gap: 18px; }
    .delivery-target, .workshop { width: 117px; }
    .delivery-target svg, .workshop > svg { width: 104px; height: 97px; }
    .cluster-world .journey-list { gap: 17px; }
    .cluster-world .journey-list li + li::before { left: -14px; width: 10px; }
    .cluster-world .journey-list li { flex-direction: column; gap: 5px; }
    .cluster-world .journey-list li + li::before { top: 10px; }
    .slurm-page .hero h1 { max-width: 560px; }
  }
  @media (max-width: 820px) {
    .cluster-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .cluster-world { grid-row: 1; }
    .cluster-world .journey-list { gap: 25px; }
    .cluster-world .journey-list li + li::before { left: -24px; width: 23px; }
    .cluster-summary { padding: 13px 15px; margin-bottom: 12px; }
    .chapter-nav { margin-bottom: 19px; }
    .chapter-nav button { padding: 7px 11px; }
    .cluster-map { height: 350px; }
    .terminal-output { font-size: 9px; margin-left: 0; }
    .slurm-page .lesson-panel { border: 1px solid var(--line); }
    .slurm-page .lesson-panel h2 { font-size: 32px; }
  }
  @media (max-width: 440px) {
    .chapter-nav { width: 100%; gap: 3px; padding: 4px; }
    .chapter-nav button { flex: 1; font-size: 10px; padding: 7px 6px; gap: 6px; justify-content: center; }
    .chapter-mark { width: 19px; height: 19px; flex-shrink: 0; }
    .cluster-summary { font-size: 10px; gap: 8px; }
    .cluster-summary strong { font-size: 8px; }
    .cluster-card .scene-mode { display: none; }
    .delivery-target, .workshop { width: 103px; }
    .delivery-target svg, .workshop > svg { width: 87px; height: 89px; }
    .delivery-target strong, .workshop strong { font-size: 10px; }
    .delivery-target > span, .workshop-state { font-size: 8px; }
    .dispatch-board { top: 24%; left: 47%; }
    .workshop-one { top: 36%; left: 83%; }
    .workshop-two { top: 76%; left: 81%; }
    .login-desk { top: 47%; left: 17%; }
    .cluster-degu { width: 84px; height: 91px; }
    #slurm-tutorial[data-phase="running"] .cluster-degu { left: 55%; }
    .cluster-carry { width: 34px; height: 25px; right: 6px; bottom: 23px; }
    .job-envelope { left: 35%; padding: 5px 7px; }
    .job-envelope svg { width: 50px; height: 41px; }
    .job-envelope span { font-size: 8px; }
    .board-ticket { left: 40%; top: 61%; padding: 6px 10px; }
    .board-ticket strong { font-size: 19px; }
    .slurm-page .hero h1 { font-size: 35px; }
  }
}

@layer themes {
  [data-theme="dark"] .cluster-map { background: #203329; }
  [data-theme="dark"] .cluster-map::before { background: #e0d299; box-shadow: 0 0 0 8px #e0d29906; }
  [data-theme="dark"] .cluster-map::after { content: ""; position: absolute; width: 29px; height: 29px; left: 21px; top: 17px; border-radius: 50%; background: #203329; }
  [data-theme="dark"] .cluster-hill { background: #2b402f; }
  [data-theme="dark"] .cluster-hill.second { background: #334a32; }
  [data-theme="dark"] .cluster-path path { stroke: #4f6142; }
  [data-theme="dark"] .delivery-target > span, [data-theme="dark"] .workshop-state { color: #becea9; }
  [data-theme="dark"] .delivery-target:not(:disabled):hover, [data-theme="dark"] .delivery-target.is-drop-target { background: #c2d79817; border-color: #8ea86d; }
  [data-theme="dark"] .job-envelope { background: #cbd69c1a; border-color: #98ad7c; }
  [data-theme="dark"] .workshop.is-running { background: #c2d79815; border-color: #91ad6e; }
  [data-theme="dark"] .workshop.is-running .workshop-state { color: #cfe1ac; }
  [data-theme="dark"] .queue-state { border-color: #776240; }
  [data-theme="dark"] .queue-state.running { border-color: #637e4c; }
  [data-theme="dark"] .queue-state.failed { border-color: #865b4c; }
}