/* H1 + P1. System-only editorial connections, not live telemetry or a settings UI.
   Photographs and final connections remain useful without motion/JavaScript. */
.system-page .system-intro{
  display:grid;grid-template-columns:40% 60%;gap:0;align-items:center;min-height:660px;
  background:radial-gradient(ellipse at 60% 64%,#32382f60,transparent 62%),#192421;
  border-bottom:1px solid #c3b18e30
}
.system-intro .intro-copy{width:auto;min-width:0;padding:66px 8% 66px var(--system-gutter)}
.system-intro .intro-copy h1{font-size:clamp(44px,4.05vw,66px);position:relative;top:-16px}
.system-intro .intro-copy>p:last-child{max-width:31ch;color:#dcded7}
.system-intro-scene{position:relative;inset:auto;width:100%;height:auto;padding:45px 5% 20px 1%;overflow:visible}
.system-intro-scene::after{display:none}
.connected-worlds{position:relative;isolation:isolate;aspect-ratio:1000/640;width:100%}
.world-plates{position:absolute;inset:0}
.world-scene{position:absolute;width:31%;height:73%;overflow:hidden;
  background:#31352e;border-radius:3px 3px 0 0;
  box-shadow:0 18px 40px #0003;mask-image:linear-gradient(#000 80%,#000b 90%,transparent 100%)}
.world-residence{left:0;top:4%}
.world-yacht{left:34.5%;top:0}
.world-heirloom{left:69%;top:8%}
.world-scene img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.world-edge{position:absolute;inset:0;border:1px solid #f0dfbc59;border-bottom:0;
  background:linear-gradient(125deg,#fff1 0%,transparent 28%);pointer-events:none}
.connection-map{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.connection-route,.connection-current,.sharing-route,.sharing-current{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.connection-route{stroke:#dcc59d;stroke-width:1;opacity:.65}
.connection-current{stroke:#fff1d6;stroke-width:2;stroke-dasharray:.1 .9;stroke-dashoffset:.1;opacity:0}
.node-field{fill:#1b2423a3;stroke:#e4cfa466;stroke-width:1;vector-effect:non-scaling-stroke}
.node-rim{fill:#e4cfa41c;stroke:#e5cfa8;stroke-width:1;vector-effect:non-scaling-stroke}
.node-centre{fill:#f8e6c3}
.core-orbit{stroke:#c4ad7966;stroke-width:1;vector-effect:non-scaling-stroke}
.core-disc{fill:#202a26;stroke:url(#connection-metal);stroke-width:1.2;vector-effect:non-scaling-stroke}
.core-mark{stroke:#eddbb6;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.core-glow{opacity:.8;transform-box:fill-box;transform-origin:center}
.connection-control{position:absolute;z-index:5;right:0;bottom:0;width:44px;height:44px;
  display:grid;place-items:center;padding:0;border:1px solid #d7c49e77;border-radius:50%;
  background:#17201ee6;color:#eee7d7;cursor:pointer}
.connection-control[hidden]{display:none}
.connection-control svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.5}
.connection-control:hover{background:#354039}
.connection-control:focus-visible{outline:2px solid #f5e6bf;outline-offset:4px}
.motion-play-mark{display:none}
[data-motion-state="paused"] .motion-play-mark{display:block}
[data-motion-state="paused"] .motion-pause-mark{display:none}

/* P1's broad private view and single narrow disclosure are two views of imagery,
   not duplicate physical possessions or a demonstration of optical screen privacy. */
.privacy-visual{padding:20px 3%;min-height:590px;display:flex;justify-content:center;
  background:radial-gradient(ellipse at 32% 25%,#57564c,transparent 64%),linear-gradient(145deg,#303b35,#1c2925);overflow:hidden}
.privacy-visual::before{inset:0;border:0;background:linear-gradient(115deg,#c8bd9c08,transparent 40%);z-index:-1}
.private-aperture{position:relative;isolation:isolate;width:100%;aspect-ratio:700/640}
.private-field{position:absolute;left:5%;top:9%;width:68%;height:64%;overflow:hidden;
  border:1px solid #e5d8bc99;border-radius:5px;background:#202622;box-shadow:0 24px 48px #09140e70}
.private-photograph{display:block;width:100%;height:100%;object-fit:cover;object-position:47% 50%}
.private-field::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,#f5e5c017,transparent 40%),linear-gradient(0deg,#14221e94,transparent 27%)}
.private-selection{position:absolute;left:12%;top:17%;width:54%;height:54%;
  border:1px solid #f1d9a399;border-radius:3px;box-shadow:0 0 0 4px #eddbb611;z-index:1}
.private-person,.shared-people{position:absolute;left:17px;bottom:15px;width:22px;height:22px;stroke:#f4e5c9;stroke-width:1.2;z-index:2}
.sharing-connection{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.sharing-route{stroke:#dbc194;stroke-width:1;opacity:.75}
.sharing-current{stroke:#fff1cd;stroke-width:2;stroke-dasharray:.12 .88;stroke-dashoffset:.12;opacity:0}
.sharing-gate{fill:#293a30;stroke:#d7bc87;stroke-width:1}
.sharing-gate-mark{stroke:#ecd5a5;stroke-width:1.4}
.shared-aperture{position:absolute;left:67%;top:54%;width:28%;height:32%;z-index:3;
  overflow:hidden;border:1px solid #e9d7b1bd;border-radius:5px;background:#26362ee6;
  box-shadow:0 19px 45px #08150f77,inset 0 1px #fff2}
.shared-window{position:absolute;inset:0;overflow:hidden}
.shared-photograph{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.shared-window::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#17241dbf,transparent 40%)}
.aperture-veil{position:absolute;inset:0;opacity:0;pointer-events:none;background:linear-gradient(125deg,#67766c9c,#24382cf5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.shared-people{width:27px}
.private-aperture .connection-control{right:5%;bottom:2%}
@media(min-width:1600px){
  .system-page .system-intro{min-height:730px}
}
@media(max-width:1100px) and (min-width:801px){
  .system-page .system-intro{grid-template-columns:43% 57%;min-height:570px}
  .system-intro .intro-copy{padding-right:5%}
  .system-intro .intro-copy h1{font-size:45px}
  .system-intro .intro-copy>p:last-child{font-size:15px}
  .system-intro-scene{padding:30px 4% 20px 0}
  .privacy-visual{padding:20px 2%;min-height:560px}
}
@media(max-width:800px){
  .system-page .system-intro{display:block;min-height:0}
  .system-intro .intro-copy{padding:38px var(--gutter) 25px;background:transparent}
  .system-intro .intro-copy h1{font-size:48px}
  .system-intro .intro-copy>p:last-child{max-width:49ch}
  .system-intro-scene{height:auto;padding:8px var(--gutter) 25px}
  .connected-worlds{max-width:690px;margin:auto}
  .privacy-visual{padding:10px max(3%,calc((100% - 660px)/2));min-height:0}
}
@media(max-width:600px){
  .system-intro .intro-copy{padding-block:32px 21px}
  .system-intro .intro-copy h1{font-size:40px}
  .system-intro .intro-copy>p:last-child{font-size:14px;max-width:39ch}
  .system-intro-scene{padding:3px 4% 22px}
  .connected-worlds{aspect-ratio:1000/750}
  .world-scene{height:70%}
  .world-residence{top:4%}.world-yacht{top:0}.world-heirloom{top:8%}
  .connection-map{height:100%}
  .connection-control{width:44px;height:44px;bottom:-8px}
  .privacy-visual{padding:15px 2%}
  .private-field{left:4%;width:70%;height:66%}
  .private-person{left:10px;bottom:10px;width:18px;height:18px}
  .shared-people{left:9px;bottom:9px;width:23px;height:19px}
  .private-aperture .connection-control{bottom:0}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .aperture-veil{background:#283b30;backdrop-filter:none;-webkit-backdrop-filter:none}
  .connection-route,.sharing-route{opacity:1;stroke-width:1.5}
}
@media(forced-colors:active){
  .connection-route,.sharing-route,.core-mark,.node-rim{stroke:CanvasText}
  .connection-control{background:Canvas;color:CanvasText;border-color:CanvasText}
}