/* Noticing Mind system demo: desk scene for the intended Mac, headset, screen, and phone loop. */
.nm-system{background:var(--nm-paper);padding-block:clamp(72px,8vw,128px)}
.nm-system-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,80px);align-items:end;margin-bottom:40px}
.nm-system-intro .nm-status{grid-column:1;margin-bottom:18px;width:max-content}
.nm-system-intro h2{grid-column:1;max-width:720px}
.nm-system-intro p{grid-column:2;color:var(--nm-text);max-width:460px;font-size:16px}
.nm-system-demo{display:grid;gap:28px}
.nm-system-scene{
  position:relative;
  isolation:isolate;
  min-height:540px;
  display:grid;
  grid-template-columns:minmax(170px,.8fr) minmax(300px,1.9fr) minmax(140px,.72fr);
  grid-template-areas:"headset stage phone";
  align-items:end;
  gap:12px 16px;
  padding:44px 28px 36px;
  border-radius:32px;
  overflow:hidden;
  background:
    radial-gradient(1200px 420px at 58% 8%, #eef4ef 0%, transparent 58%),
    radial-gradient(900px 380px at 12% 88%, #dcd5ee55 0%, transparent 46%),
    linear-gradient(180deg,#e7eee9 0%, #d3e0d8 100%);
  box-shadow:inset 0 1px 0 #ffffffa8, 0 30px 60px -48px #183b3655;
}
.nm-system-scene::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  opacity:.35;
  background-image:repeating-linear-gradient(90deg, #183b3608 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
.nm-system-badge{
  position:absolute;top:18px;left:22px;z-index:5;
  margin:0;
  font-size:11px;font-weight:600;letter-spacing:.02em;
  color:var(--nm-accent-text);
  background:#ece7f6;
  border-radius:100px;
  padding:6px 12px;
}
.nm-system-desk{
  position:absolute;left:6%;right:6%;bottom:10px;height:92px;z-index:0;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 35%, #f7faf7 0%, #c5d4cb 58%, transparent 72%);
}
.nm-system-paths{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.nm-system-filament{stroke:#9fb8ad;stroke-width:2.25;stroke-linecap:round;opacity:.38;transition:stroke .35s ease,opacity .35s ease,stroke-width .35s ease}
.nm-system-headset,.nm-system-display,.nm-system-phone{position:relative;z-index:3;margin:0;min-width:0}
.nm-system-headset{grid-area:headset;justify-self:center;align-self:center;width:min(100%,250px)}
.nm-system-display{grid-area:stage;width:min(100%,540px);justify-self:center;padding-bottom:6px}
.nm-system-phone{grid-area:phone;justify-self:center;align-self:center;width:min(100%,158px)}
.nm-system-stage-stack{position:relative;padding-bottom:96px}
.nm-system-mac{
  position:absolute;left:50%;bottom:2px;z-index:4;
  transform:translateX(-58%);
  margin:0;width:128px;text-align:center;
}
.nm-system-scene figcaption{
  margin-top:10px;text-align:center;
  font-size:11px;font-weight:600;color:var(--nm-forest);
}
.nm-system-headset-art{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 16px #183b3620)}
.nm-system-cushion{transform-origin:center}
.nm-system-sensor{transform-box:fill-box;transform-origin:center}
.nm-system-monitor{display:flex;flex-direction:column;align-items:center}
.nm-system-bezel{
  width:100%;
  padding:10px 10px 8px;
  border-radius:18px;
  background:linear-gradient(180deg,#2a3330,#141a18);
  box-shadow:0 24px 40px -28px #12211c88, inset 0 1px 0 #ffffff14;
}
.nm-system-screen{display:block;width:100%;height:auto;border-radius:8px}
.nm-system-chin{width:36%;height:8px;background:#1b2220;border-radius:0 0 8px 8px}
.nm-system-neck,.nm-system-foot{display:none}
.nm-system-trace{fill:none;stroke:#b7d7cd;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;opacity:.92}
.nm-system-scan{stroke:#dcd5ee;stroke-width:1.4;opacity:0;stroke-dasharray:4 6}
.nm-system-volume-fill{transform-box:fill-box;transform-origin:left center}
.nm-system-soft-label{opacity:0}
.nm-system-mini{display:block;width:128px;height:auto;margin:0 auto;filter:drop-shadow(0 10px 10px #183b3624)}
.nm-system-mac-label{margin:4px 0 0;font-size:11px;font-weight:600;color:var(--nm-forest);white-space:nowrap}
.nm-system-phone-shell{
  border:6px solid #263e36;border-radius:28px;overflow:hidden;
  background:#f7f2e8;box-shadow:0 22px 36px -20px #183b3666;
}
.nm-system-phone-shell img{display:block;width:100%;aspect-ratio:942/2048;object-fit:cover}
.nm-system-phone-flag{
  margin:8px 0 0;text-align:center;font-size:10px;font-weight:600;
  color:var(--nm-accent-text);
}
.nm-system-panel{display:grid;gap:18px;max-width:920px}
.nm-system-kicker{font-size:12px;font-weight:600;color:var(--nm-accent-text);letter-spacing:.02em}
.nm-system-panel h3{font-size:clamp(26px,3vw,36px);letter-spacing:-.04em}
.nm-system-panel [data-system-copy]{color:var(--nm-text);max-width:62ch;min-height:4.8em}
.nm-system-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.nm-system-steps button{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  text-align:left;min-height:64px;padding:12px 14px;
  border:1px solid var(--nm-line);border-radius:16px;
  background:var(--nm-mist);color:var(--nm-forest);font-size:13px;font-weight:600;
}
.nm-system-steps button span{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  border:1px solid #9fb8ad;font-size:11px;
}
.nm-system-steps button[aria-checked=true]{
  background:#e2ece5;border-color:#618978;
}
.nm-system-steps button[aria-checked=true] span{background:var(--nm-forest);color:#fff;border-color:var(--nm-forest)}
.nm-system-steps button:focus-visible,
.nm-system-controls .nm-button:focus-visible{
  outline:2px solid var(--nm-forest);outline-offset:3px;
}
.nm-system-controls{display:flex;flex-wrap:wrap;gap:10px}
.nm-system-controls .nm-button{min-height:48px}
.nm-system-readout{font-size:14px;color:var(--nm-text);min-height:2.6em;margin:0}
.nm-system-hint{font-size:12px;color:var(--nm-text);margin:0}
.nm-system-evidence{
  border-top:1px solid var(--nm-line);padding-top:20px;
  display:grid;gap:12px;
}
.nm-system-evidence p{font-size:13px;color:var(--nm-text);max-width:72ch;margin:0}
.nm-system-fallback{display:none}
html:not(.js) .nm-system-fallback{display:block;color:var(--nm-text);font-size:14px}
html:not(.js) .nm-system-fallback ol{padding-left:20px}
html:not(.js) .nm-system-controls{display:none}

.nm-system-demo.is-stage-sense [data-device=headset],
.nm-system-demo.is-stage-evaluate [data-device=mac],
.nm-system-demo.is-stage-soften [data-device=display],
.nm-system-demo.is-stage-record [data-device=phone]{z-index:4}
.nm-system-demo.is-stage-sense [data-path=sense],
.nm-system-demo.is-stage-evaluate [data-path=evaluate],
.nm-system-demo.is-stage-soften [data-path=soften],
.nm-system-demo.is-stage-record [data-path=record]{
  stroke:var(--nm-iris);opacity:1;stroke-width:3;
  filter:drop-shadow(0 0 5px #8a7bc266);
}
.nm-system-demo.is-stage-sense [data-device=headset],
.nm-system-demo.is-stage-evaluate [data-device=mac],
.nm-system-demo.is-stage-soften [data-device=display],
.nm-system-demo.is-stage-record [data-device=phone]{
  filter:drop-shadow(0 0 18px #8a7bc233);
}
.nm-system-demo.is-stage-sense .nm-system-sensor{animation:nm-system-sensor 1.8s ease-in-out infinite}
.nm-system-demo.is-stage-evaluate .nm-system-mini-led{
  fill:#dcd5ee;filter:drop-shadow(0 0 6px #8a7bc2aa);
}
.nm-system-demo.is-stage-evaluate .nm-system-scan{opacity:.8}
.nm-system-demo.is-stage-soften .nm-system-volume-fill{transform:scaleX(.28);fill:#8a7bc2}
.nm-system-demo.is-stage-soften .nm-system-soft-label{opacity:1}
.nm-system-demo.is-stage-soften .nm-system-trace{opacity:.42}
.nm-system-demo.is-stage-record .nm-system-phone-shell{box-shadow:0 22px 36px -18px #59457f66, 0 0 0 2px #8a7bc2}
.nm-system-demo [data-system-play][aria-pressed=true]{background:#2c514a}

@keyframes nm-system-sensor{
  0%,100%{opacity:.55}
  50%{opacity:1}
}

@media(max-width:1080px){
  .nm-system-intro{grid-template-columns:1fr;gap:16px}
  .nm-system-intro h2,.nm-system-intro p,.nm-system-intro .nm-status{grid-column:1}
  .nm-system-intro p{max-width:560px}
  .nm-system-scene{min-height:480px;grid-template-columns:minmax(140px,.75fr) minmax(240px,1.5fr) minmax(120px,.65fr)}
  .nm-system-phone{width:min(100%,142px)}
}
@media(max-width:760px){
  .nm-system-scene{
    min-height:0;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    grid-template-areas:"stage stage" "headset phone";
    gap:8px 12px;
    padding:52px 14px 18px;
  }
  .nm-system-paths{opacity:.28}
  .nm-system-display{width:100%;grid-area:stage}
  .nm-system-stage-stack{padding-bottom:92px}
  .nm-system-mac{width:96px}
  .nm-system-mini{width:96px}
  .nm-system-headset{width:min(100%,190px);align-self:center}
  .nm-system-phone{width:min(42vw,128px);align-self:center}
  .nm-system-steps{grid-template-columns:1fr 1fr}
  .nm-system-panel [data-system-copy]{min-height:0}
  .nm-system-controls .nm-button{flex:1 1 calc(50% - 10px)}
}
@media(max-width:390px){
  .nm-system-steps{grid-template-columns:1fr}
  .nm-system-phone{width:min(58vw,170px)}
  .nm-system-badge{left:12px;top:12px}
}
@media(prefers-reduced-motion:reduce){
  .nm-system-filament{transition:none}
  .nm-system-demo.is-stage-sense .nm-system-sensor{animation:none;opacity:1}
}
@media print{
  .nm-system-controls,.nm-system-hint{display:none}
  .nm-system-scene{box-shadow:none;break-inside:avoid}
}