.demo { box-sizing:border-box; position:relative; display:grid; place-items:center; width:100%; min-height:420px; padding:32px; overflow:hidden; background:#102b30; color:#b9f58b; }
.demo *, .demo *::before, .demo *::after { box-sizing:border-box; }
.demo .dot { display:block; width:20px; height:20px; border-radius:50%; background:currentColor; flex-shrink:0; }
@media(max-width:700px) { .demo { min-height:320px; padding:20px; } }
@media(prefers-reduced-motion:reduce) { .demo * { animation:none!important; } }
.neighborhood { display:flex; gap:clamp(35px,8vw,110px); } .neighborhood>div { display:grid; gap:12px; }
.kin { display:grid; grid-template-columns:repeat(6,20px); gap:24px; } .kin .square { border-radius:3px; color:#ffb47d; }
.ghost-ring { width:150px; height:150px; border:7px dashed currentColor; border-radius:50%; position:absolute; left:calc(50% - 160px); } .ghost-ring.second { left:calc(50% + 10px); color:#ffb47d; transform:rotate(20deg); } @media(max-width:420px){.ghost-ring{width:120px;height:120px;left:calc(50% - 125px)}.ghost-ring.second{left:calc(50% + 5px)}}
.crossing { width:min(80%,500px); height:180px; position:relative; } .crossing i { position:absolute; top:50%; width:100%; height:5px; background:currentColor; transform:rotate(18deg); } .crossing i+i { transform:rotate(-18deg); background:#ffb47d; }
.vase { width:260px; height:230px; background:#f4e8cc; clip-path:polygon(10% 0,90% 0,90% 12%,73% 16%,68% 28%,80% 36%,70% 44%,67% 60%,76% 78%,89% 90%,89% 100%,11% 100%,11% 90%,24% 78%,33% 60%,30% 44%,20% 36%,32% 28%,27% 16%,10% 12%); }
.travelers { display:grid; grid-template-columns:repeat(4,20px); gap:40px; } .travelers .east { animation:travel 2s ease-in-out infinite alternate; } .travelers .west { color:#ffb47d; animation:travel 2s ease-in-out infinite alternate-reverse; } @keyframes travel { from { transform:translateX(-22px); } to { transform:translateX(22px); } }
.enclosures { display:flex; gap:12px; } .enclosures>div { display:flex; gap:40px; padding:25px 14px; border:2px solid #8bbdb5; border-radius:25px; background:#244b4b; }
.pairs { display:flex; gap:22px; } .pairs>div { display:flex; align-items:center; } .pairs b { display:block; height:3px; width:48px; background:currentColor; } @media(max-width:440px){.pairs{flex-direction:column;gap:24px}}
.mirror { display:flex; gap:12px; } .mirror i { width:110px; height:200px; background:currentColor; clip-path:polygon(100% 0,20% 18%,55% 50%,0 75%,100% 100%); } .mirror i+i { transform:scaleX(-1); }
.orbits { width:280px; height:180px; position:relative; } .orbits i { position:absolute; width:150px; height:150px; border:5px solid currentColor; border-radius:50%; left:0; top:0; } .orbits i:nth-child(2) { left:65px; top:28px; } .orbits i:nth-child(3) { left:130px; }
.field { width:min(100%,760px); height:280px; position:relative; }
.field .island { position:absolute; width:40%; height:190px; left:4%; top:45px; border:2px solid transparent; border-radius:90px; }
.field .island.right { left:56%; top:25px; }
.field .bead { position:absolute; width:16px; height:16px; border-radius:50%; background:#b9f58b; left:var(--x); top:var(--y); z-index:2; }
.field .route,.field .ring,.field .bridge,.field .cutout,.field .halo { display:none; }
.field .route { position:absolute; width:92%; left:4%; top:50%; height:4px; background:#87cdd5; transform:rotate(-12deg); }
.field .ring { position:absolute; inset:12px; border:5px dashed #b9f58b; border-radius:50%; }
.field .bridge { position:absolute; height:2px; width:60%; left:20%; top:50%; background:#ffb47d; transform:rotate(-30deg); }
.field .cutout { position:absolute; z-index:4; width:70px; height:100px; top:85px; left:calc(50% - 35px); background:#102b30; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.field .halo { position:absolute; width:120px; height:120px; border:3px solid #ebd8b5; border-radius:50%; top:70px; left:calc(50% - 60px); }
.field .halo.two { transform:translateX(-40px); } .field .halo.three { transform:translateX(40px); }
@media(max-width:600px){.field .bead{width:12px;height:12px}.field .island{width:44%;left:1%}.field .island.right{left:55%}}
.p-proximity .bead { left:calc(50% + (var(--n) - 2.5)*19px); top:calc(45% + var(--row)*24px); }
.p-similarity .bead:nth-child(even) { background:#ffb47d; border-radius:2px; }
.p-closure .ring { display:block; }
.p-continuity .route { display:block; } .p-continuity .route.second { transform:rotate(12deg); background:#ffb47d; }
.p-figure .field { background:#e9dbbf; border-radius:50%; } .p-figure .island { background:#102b30; } .p-figure .cutout { display:block; }
.p-fate .island { animation:drift 2.4s ease-in-out infinite alternate; } .p-fate .island.right { animation-direction:alternate-reverse; } @keyframes drift { from { translate:0 -12px; } to { translate:0 12px; } }
.p-region .island { border-color:#83b1ad; background:#21484b; }
.p-connected .bead:nth-of-type(odd)::after { content:""; position:absolute; left:7px; top:8px; width:2px; height:74.4px; background:#ffb47d; transform-origin:top center; } .p-proximity.p-connected .bead:nth-of-type(odd)::after { height:30.6px; transform:rotate(-38.4deg); } @media(max-width:600px){.p-connected .bead:nth-of-type(odd)::after{left:5px;top:6px}}
.p-symmetry .island.right { top:45px; transform:scaleX(-1); }
.p-simplicity .halo { display:block; }