/* The system is particles; the copy and controls stay ordinary, accessible HTML. */
.particle-method{background:var(--ink)}
.particle-method .method-pin{isolation:isolate}
.method-particles{position:absolute;inset:0;width:100%;display:block;pointer-events:none;z-index:0}
.capability-flow-on .method-particles{opacity:var(--method-arrival,1)}
.particle-method .method-grid{position:relative;z-index:1;display:block;width:calc(100% - var(--page-gutter) * 2);max-width:none;pointer-events:none}
.particle-method .method-rail{width:min(37%,520px);pointer-events:auto}
.particle-method .method-rail h2{max-width:16ch}
.particle-method .step{background:none}
.particle-method .steps{margin-top:35px}
/* Keep the diagram's plain-language equivalent available to screen readers. */
.particle-method .method-stage{display:block;position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.method-system-intro{color:var(--muted);font-size:13px;line-height:1.8}
.method-system-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;list-style:none;padding:0;margin:22px 0 0}
.method-system-list li{display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:1.6}
.method-system-list strong{color:var(--paper);font-weight:500}
.method-system-list span{color:var(--muted)}
.particle-readout{position:absolute;right:4%;bottom:3%;z-index:2;border-top:1px solid #92a39c30;padding-top:12px;color:#92b4a7;font:9px/1.6 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.12em}
.particle-controls{display:none}
@media(max-width:960px),(prefers-reduced-motion:reduce){
  .method:not(.particle-method) .method-stage{display:block}
  .particle-method .method-pin{display:flex!important;flex-direction:column;align-items:stretch;padding:64px 0 35px!important}
  .particle-method .method-grid{order:0;width:calc(100% - 40px);margin-inline:auto}
  .particle-method .method-rail{width:100%;max-width:680px;margin:auto}
  .particle-method .method-rail h2{max-width:20ch}
  .particle-method .step{padding:17px 0}
  .particle-method .step p{max-height:0!important;opacity:0!important;margin-top:0!important}
  .particle-method .step.is-active p{max-height:180px!important;opacity:1!important;margin-top:10px!important}
  .method-particles{order:2;position:relative;inset:auto;flex:none}
  .particle-controls{order:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:calc(100% - 40px);max-width:680px;margin:0 auto;padding:30px 0 0}
  .particle-controls button{font:12px/1.4 ui-monospace,monospace;border:1px solid #92a39c40;color:#abc6bb;background:#070d0a;padding:12px 14px;cursor:pointer;min-height:44px}
  .particle-controls button[aria-pressed="true"]{border-color:#71f6d1;color:#71f6d1;background:#11251c}
  .particle-controls button:focus-visible{outline:2px solid #71f6d1;outline-offset:4px}
  .particle-readout{order:3;position:relative;right:auto;bottom:auto;margin:0 20px;text-align:center;font-size:12px}
}
@media(max-width:600px){.particle-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:961px) and (max-height:740px){
  .particle-method .method-rail h2{font-size:28px}
  .particle-method .steps{margin-top:20px}
  .particle-method .step{padding:14px 0}
}
@media(prefers-reduced-motion:reduce){.particle-method .step,.particle-method .step p{transition:none!important}}

@media(max-width:960px){
  .particle-method .method-pin{overflow:visible}
  .particle-controls{position:sticky;top:72px;z-index:3;background:var(--ink);padding:12px 0;margin-top:18px}
}

@media(max-width:600px){.particle-method .steps{min-height:440px}}
/* A complete text overview also works without canvas or JavaScript. */
.method:not(.particle-method){height:auto}
.method:not(.particle-method) .method-pin{position:static;height:auto;padding:80px 0}
.method:not(.particle-method) .step{opacity:1}
.method:not(.particle-method) .step p{max-height:none;opacity:1;margin-top:10px}
.method:not(.particle-method) .steps-node{display:none}