/* Quantum, in motion (/learn/in-motion/): six full-bleed stages run by motion.js. Canvases are decoration;
   the text in each stage and the notes under it carry the meaning. Stages keep their own fixed palettes. */
.motion{--night:#0d110a;--paper:#f8f7ef;--ink:#29311f;--olive:#425c2f;--moss:#8c9b38;--citron:#e0ef57;--coral:#f5ad91;--ember:#d96443;padding-bottom:30px}
.motion sup{line-height:0}
.motion-intro{max-width:none}
.motion-intro h1{font-size:clamp(54px,8.6vw,120px);line-height:.95;font-weight:600;letter-spacing:-.068em;margin:18px 0 26px}
.motion-intro h1 em{font-weight:400;letter-spacing:-.055em;color:#6f7d25}
.motion-intro .lede{max-width:64ch}

.m-sec{padding-top:76px;scroll-margin-top:0}
.m-stage{position:relative;isolation:isolate;overflow:hidden;margin-inline:calc(50% - 50cqw);padding-inline:calc(50cqw - 50%)}
.m-art{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}
.m-in{position:relative;min-height:680px;padding-block:44px 34px;display:grid;column-gap:44px}
.m-eye{display:flex;align-items:center;gap:9px;margin:0;font:10px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.m-eye::before{content:"";width:7px;height:7px;border-radius:50%;background:#e88569;flex:none}
.motion .m-display{margin:0;font:600 clamp(50px,7vw,108px)/.96 var(--display);letter-spacing:-.068em;text-wrap:balance}
.m-display em{font:italic 400 1.04em/1 Georgia,serif;letter-spacing:-.06em}
.motion .m-lede{margin:0;max-width:46ch;font-size:16px;line-height:1.72;text-wrap:pretty}
.m-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.m-btn{display:inline-flex;align-items:center;gap:22px;min-height:52px;padding:14px 20px;border:1px solid;font:500 14px/1 var(--sans);text-decoration:none;transition:transform .2s,box-shadow .2s}
.m-btn:hover{transform:translate(2px,2px)}
.m-btn span{font-size:20px;line-height:1}
.motion .m-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.motion .m-ctrl button{display:inline-flex;align-items:center;justify-content:center;gap:0;min-height:44px;padding:0 14px;background:transparent;color:inherit;border:1px solid color-mix(in srgb,currentColor 42%,transparent);font:10px/1 var(--mono);font-weight:400;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.motion .m-ctrl button:hover{border-color:currentColor;background:transparent}
.motion .m-ctrl button[aria-pressed="true"]{border-color:currentColor;background:color-mix(in srgb,currentColor 12%,transparent)}
.m-stage a:focus-visible,.m-stage button:focus-visible,.m-stage input:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.m-hud{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;gap:9px 16px;padding-top:14px;border-top:1px solid color-mix(in srgb,currentColor 30%,transparent);font:11px/1.45 var(--mono)}
.m-hud dt{text-transform:uppercase;letter-spacing:.08em;opacity:.7}
.m-hud dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}

/* 01 atoms: a dark lab */
.m-atoms{background:var(--night);color:var(--paper)}
.m-atoms .m-in{grid-template-columns:minmax(0,1fr) 248px;grid-template-areas:"eye hud" "plot hud" "copy ctrl";grid-template-rows:auto minmax(330px,1fr) auto;row-gap:16px}
.m-atoms .m-eye{grid-area:eye;color:#d3dd9a}
.m-atoms .m-plot{grid-area:plot;min-height:330px}
.m-atoms .m-copy{grid-area:copy;display:flex;flex-wrap:wrap;align-items:flex-end;gap:22px 44px}
.m-atoms .m-lede{color:#c3c9ae;max-width:46ch}
.m-atoms .m-btn,.m-atoms .m-btn:hover{background:var(--citron);color:#12170f;border-color:var(--citron);box-shadow:4px 4px 0 var(--coral)}
.m-atoms .m-btn:hover{box-shadow:2px 2px 0 var(--coral)}
.m-atoms .m-hud{grid-area:hud;color:#e7e9d8}
.m-atoms .m-hud .hi{color:var(--citron)}
.m-atoms .m-ctrl{grid-area:ctrl;align-self:end;justify-content:flex-end}
.m-steps{grid-column:1/-1;display:flex;gap:6px;margin:0 0 8px;padding:0;list-style:none}
.m-steps li{flex:1;padding-top:7px;border-top:2px solid rgba(248,247,239,.2);font:9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(248,247,239,.55)}
.m-steps li.on{border-color:var(--citron);color:var(--citron)}

/* 02 carpet: a rug on paper */
.m-carpet,.m-doubling,.m-errors{background:var(--paper);color:var(--ink);border-block:1px solid var(--ink)}
.m-carpet .m-in{grid-template-columns:minmax(0,1fr) minmax(0,.98fr);grid-template-areas:"copy plot" "ctrl label";grid-template-rows:minmax(560px,1fr) auto;row-gap:14px}
.m-carpet .m-copy{grid-area:copy;display:flex;flex-direction:column;justify-content:center;gap:26px;padding-bottom:30px}
.m-carpet .m-eye,.m-doubling .m-eye,.m-errors .m-eye{color:#566044}
.m-carpet .m-display em{color:var(--olive);position:relative;display:inline-block;z-index:0}
.m-carpet .m-display em::after{content:"";position:absolute;left:.02em;right:-.04em;bottom:.02em;height:.13em;background:var(--citron);z-index:-1;transform:rotate(-1.2deg)}
.m-carpet .m-lede,.m-doubling .m-lede{color:#4b5440}
.m-carpet .m-btn,.m-doubling .m-btn,.m-errors .m-btn{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:4px 4px 0 var(--citron)}
.m-carpet .m-btn:hover,.m-doubling .m-btn:hover,.m-errors .m-btn:hover{color:var(--paper);box-shadow:2px 2px 0 var(--citron)}
.m-carpet .m-plot{grid-area:plot}
.m-carpet .m-ctrl{grid-area:ctrl;align-self:end}
.m-label{grid-area:label;justify-self:center;width:min(100%,360px);margin:0;padding:14px 16px;background:#fffef8;border:1px solid rgba(41,49,31,.35);box-shadow:3px 3px 0 rgba(41,49,31,.12)}
.m-label p{margin:0}
.m-lt{font:italic 17px/1.3 Georgia,serif}
.m-ln{margin-top:4px!important;font-size:13px;line-height:1.5;color:#4b5440}
.m-ls{margin-top:8px!important;font:10px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#6b735c}

/* 03 tunnel: a record-sleeve ridgeline */
.m-tunnel{background:#0a0d08;color:var(--paper)}
.m-tunnel .m-in{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) 250px;grid-template-areas:"plot plot plot" "head copy hud";grid-template-rows:minmax(360px,1fr) auto;row-gap:28px}
.m-tunnel .m-plot{grid-area:plot}
.m-tunnel .m-head{grid-area:head;display:flex;flex-direction:column;gap:18px;align-self:end}
.m-tunnel .m-eye{color:#d3dd9a}
.motion .m-tunnel .m-display{font-size:clamp(48px,6.2vw,96px)}
.m-tunnel .m-display em{color:var(--citron)}
.m-tunnel .m-copy{grid-area:copy;display:flex;flex-direction:column;gap:22px;align-self:end}
.m-tunnel .m-lede{color:#c3c9ae}
.m-tunnel .m-btn,.m-tunnel .m-btn:hover{background:var(--paper);color:#0a0d08;border-color:var(--paper);box-shadow:4px 4px 0 var(--citron)}
.m-tunnel .m-btn:hover{box-shadow:2px 2px 0 var(--citron)}
.m-side{grid-area:hud;display:flex;flex-direction:column;gap:14px;align-self:end}
.m-tunnel .m-hud .hi{color:var(--citron);font-weight:700}

/* 04 doubling: a Mondrian of outcomes */
.m-doubling .m-in{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);grid-template-areas:"copy plot" "ctrl plot";grid-template-rows:1fr auto;row-gap:20px}
.m-doubling .m-copy{grid-area:copy;display:flex;flex-direction:column;gap:20px}
.m-powrow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 22px;margin-top:clamp(14px,2.4vw,34px)}
.m-power{margin:0;font:600 clamp(120px,15vw,220px)/.78 var(--display);letter-spacing:-.07em}
.m-power sup{position:relative;top:-.02em;margin-left:.02em;font-size:.4em;letter-spacing:-.04em;color:var(--ember);font-variant-numeric:tabular-nums;vertical-align:top}
.m-count{margin:0 0 6px;font:600 clamp(20px,2.3vw,30px)/1.15 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.m-count small{display:block;margin-top:6px;font:11px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#5b6449}
.motion .m-doubling .m-display{font-size:clamp(44px,5vw,74px)}
.m-doubling .m-display em,.m-errors .m-display em{color:var(--ember)}
.m-doubling .m-plot{grid-area:plot;min-height:560px}
.m-doubling .m-ctrl{grid-area:ctrl}
.m-doubling label{font:10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.m-doubling input[type=range]{width:min(230px,52vw);accent-color:var(--ink);min-height:44px}
.m-doubling output{min-width:2.4em;font:600 16px/1 var(--display);font-variant-numeric:tabular-nums}
.m-fine{margin:0;font:10px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#5b6449;min-height:1.5em}

/* 05 signal: Grover's search as a market chart on citron */
.m-signal{background:var(--citron);color:var(--ink)}
.m-signal .m-in{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);grid-template-areas:"copy plot" "quote plot";grid-template-rows:1fr auto;row-gap:22px;padding-bottom:84px}
.m-signal .m-copy{grid-area:copy;display:flex;flex-direction:column;gap:24px}
.m-signal .m-eye{color:#3e4a20}
.m-signal .m-display em{position:relative;display:inline-block;z-index:0}
.m-signal .m-display em::after{content:"";position:absolute;left:.02em;right:-.04em;bottom:.02em;height:.13em;background:var(--ember);z-index:-1;transform:rotate(-1.2deg)}
.m-signal .m-lede{color:#36401f}
.m-signal .m-btn,.m-signal .m-btn:hover{background:var(--ink);color:var(--citron);border-color:var(--ink);box-shadow:4px 4px 0 var(--paper)}
.m-signal .m-btn:hover{box-shadow:2px 2px 0 var(--paper)}
.m-signal .m-plot{grid-area:plot;min-height:470px;cursor:pointer}
.m-quote{grid-area:quote;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px;padding-top:16px;border-top:2px solid var(--ink)}
.m-quote p{margin:0}
.m-qlabel{font:11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.m-qbig{font:600 clamp(58px,6.4vw,92px)/.9 var(--display);letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.m-qd{font:11px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase}

/* 06 errors: error correction as a transit map */
.m-errors .m-in{grid-template-columns:minmax(0,480px) minmax(0,1fr);grid-template-areas:"card .";min-height:740px}
.m-card{grid-area:card;align-self:start;display:flex;flex-direction:column;gap:18px;padding:28px 28px 24px;background:var(--paper);border:2px solid var(--ink);box-shadow:7px 7px 0 var(--ink)}
.motion .m-errors .m-display{font-size:clamp(46px,5.2vw,76px)}
.m-errors .m-lede{color:#4b5440;font-size:15px}
.m-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:14px 0 0;border-top:1px solid var(--ink);list-style:none;font-size:12.5px;line-height:1.35}
.m-legend li{display:flex;align-items:center;gap:8px}
.m-legend svg{width:26px;height:18px;flex:none}
.m-stats{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0;font:10.5px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#4b5440}
.m-stats b{color:var(--ink);font-variant-numeric:tabular-nums}

/* notes under each stage */
.m-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 34px;padding-top:28px}
.m-notes>div{min-width:0;border-top:1px solid var(--ink);padding-top:12px}
.motion .m-notes h3{margin:0 0 8px;font:11px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#5b6449}
.m-notes p{margin:0 0 12px;font-size:15px;line-height:1.66;color:#3f4834;text-wrap:pretty}
.m-more{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.m-more a{font-weight:500}
.m-src{margin:16px 0 0;font-size:12.5px;line-height:1.6;color:#61694f;overflow-wrap:anywhere}
.m-about{margin-top:84px;padding:34px 38px;background:#eeeedd;border:1px solid var(--line)}
.motion .m-about h2{margin:0 0 12px;font-size:30px}
.m-about p{max-width:760px;color:var(--muted)}
.m-about p:last-child{display:flex;flex-wrap:wrap;gap:8px 26px;margin-bottom:0}

@container(max-width:980px){
  .m-notes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-tunnel .m-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"plot plot" "head copy" "hud hud"}
  .m-side{flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between}
  .m-tunnel .m-hud{flex:1 1 300px}
}
@container(max-width:760px){
  .m-sec{padding-top:56px}
  .m-in{min-height:0;column-gap:0;padding-block:30px 28px}
  .motion .m-lede{font-size:15px}
  .m-notes{grid-template-columns:minmax(0,1fr)}
  .m-atoms .m-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"eye" "plot" "copy" "hud" "ctrl";grid-template-rows:none;row-gap:18px}
  .m-atoms .m-plot{min-height:0;height:min(96cqw,380px)}
  .m-atoms .m-ctrl{justify-content:flex-start}
  .m-carpet .m-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "plot" "label" "ctrl";grid-template-rows:none}
  .m-carpet .m-plot{height:min(122cqw,520px)}
  .m-carpet .m-copy{padding-bottom:6px}
  .m-tunnel .m-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"plot" "head" "copy" "hud";grid-template-rows:none;row-gap:24px}
  .m-tunnel .m-plot{height:min(80cqw,340px)}
  .m-side{flex-direction:column;align-items:stretch}
  .m-tunnel .m-hud{flex:none}
  .m-doubling .m-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "plot" "ctrl";grid-template-rows:none}
  .m-doubling .m-plot{min-height:0;height:min(92cqw,420px)}
  .m-signal .m-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "plot" "quote";grid-template-rows:none;padding-bottom:76px}
  .m-signal .m-plot{min-height:0;height:min(84cqw,340px)}
  .m-errors .m-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"." "card";grid-template-rows:220px auto;min-height:0}
  .m-card{padding:22px 18px 20px;box-shadow:5px 5px 0 var(--ink)}
  .m-legend{grid-template-columns:minmax(0,1fr)}
  .m-about{padding:26px 22px}
}
@container(max-width:520px){.motion .m-display{font-size:clamp(46px,14cqw,64px)}.motion .m-tunnel .m-display,.motion .m-errors .m-display,.motion .m-doubling .m-display{font-size:clamp(44px,13cqw,60px)}}
@media(prefers-reduced-motion:reduce){.m-btn{transition:none}}
@media print{.m-art,.m-ctrl,.m-index{display:none}.m-stage{margin:0;padding:0;background:none!important;color:#111!important;border:0}.m-in{min-height:0;display:block}}