:root{color-scheme:dark;--ink:#0b1e18;--deep:#07140f;--paper:#f2eee3;--gold:#dec188;--muted:#b3bcb2}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--paper);font-family:Arial,sans-serif;background-image:radial-gradient(ellipse at 50% 52%,#19372a60,transparent 60%)}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.5' filter='url(%23n)'/%3E%3C/svg%3E")}main{max-width:1420px;margin:auto;padding:30px 5vw 22px}header,footer{display:flex;justify-content:space-between;align-items:center}.brand{font-size:13px;letter-spacing:3px;text-decoration:none;color:var(--paper)}.brand span{display:block;font-size:9px;letter-spacing:2.3px;color:var(--gold);margin-top:8px}.edition{font-size:9px;letter-spacing:2px;color:var(--muted)}.intro{text-align:center;margin:54px 0 15px}.eyebrow{font-size:10px;letter-spacing:2.6px;color:var(--gold)}h1{font-family:Georgia,serif;font-size:clamp(40px,5.5vw,77px);font-weight:400;letter-spacing:-2.5px;margin:20px 0 15px;line-height:1.1}h1 em{color:var(--gold);font-weight:400}.sub{color:var(--muted);font-size:14px;letter-spacing:.4px}.theatre{position:relative;max-width:1000px;margin:15px auto 0}.aura{position:absolute;inset:30% 15% 0;background:radial-gradient(ellipse,#dec18809,transparent 65%);pointer-events:none}.scene{position:relative;isolation:isolate;transform-origin:center bottom;touch-action:pan-y;transition:transform .18s ease-out;aspect-ratio:11/7}.scene canvas{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 19px #0004)}#ball{position:absolute;left:73.64%;top:59.39%;width:13%;aspect-ratio:1;border:0;border-radius:50%;transform:translate(-50%,-50%);background:transparent;cursor:grab;touch-action:none;padding:0}#ball:active{cursor:grabbing}#ball:focus-visible{outline:1px solid var(--gold);outline-offset:8px}.guide{position:absolute;inset:0;border:1px solid #dec18888;border-radius:50%;animation:beckon 2.1s ease-in-out infinite;pointer-events:none}.guide i{position:absolute;width:8px;height:8px;background:var(--gold);border-radius:50%;left:50%;top:-5px}.guide b{position:absolute;top:110%;left:50%;transform:translateX(-50%);font-weight:400;font-size:12px;white-space:nowrap;color:var(--gold);letter-spacing:1px;background:var(--deep);padding:5px 9px;border-radius:15px}.touched .guide{display:none}@keyframes beckon{0%,100%{scale:1;opacity:.45}50%{scale:1.14;opacity:1}}.names{display:flex;align-items:center;justify-content:space-between;margin:12px 12% 0;color:var(--muted);font-size:10px;letter-spacing:3px}.names i{color:var(--gold);font-style:normal;opacity:.45;font-size:19px}.controls{text-align:center;margin:22px 0 45px;position:relative}#message{font:italic 22px Georgia,serif;margin:0 0 15px;min-height:26px;color:var(--gold)}.hint{font-size:12px;line-height:1.9;color:var(--muted);margin:0 0 20px}.hint span{opacity:.7}#again{background:transparent;color:var(--paper);border:1px solid #dec18855;border-radius:30px;padding:13px 25px;letter-spacing:1px;font-size:11px;cursor:pointer}#again:hover{background:#dec18812;border-color:var(--gold)}#again span{margin-left:20px;color:var(--gold)}button:disabled{cursor:wait;opacity:.5}footer{border-top:1px solid #dec18820;padding-top:20px;font-size:8px;letter-spacing:1.5px;color:var(--muted)}.paperbits{position:absolute;inset:0;pointer-events:none;overflow:clip}.bit{position:absolute;background:var(--gold);width:7px;height:12px;clip-path:polygon(0 0,100% 40%,45% 100%);animation:scatter 1.3s ease-out forwards}@keyframes scatter{from{transform:translate(0,0) rotate(0);opacity:1}to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}@media(max-width:600px){main{padding:24px 18px}.edition{display:none}.intro{margin:55px 0 28px}.eyebrow{font-size:8px;letter-spacing:1.6px}h1{font-size:43px;letter-spacing:-1.6px;max-width:350px;margin:20px auto 17px}.sub{font-size:12px}.theatre{margin:35px -10px 0}.scene{width:100%}.names{margin-top:25px;font-size:9px}.controls{margin:35px 0 48px}#message{font-size:21px}.hint{font-size:11px}footer{font-size:7px;letter-spacing:1px;gap:20px;line-height:1.8}footer span:last-child{text-align:right}#ball{width:17%}.guide b{font-size:10px}}@media(prefers-reduced-motion:reduce){.guide{animation:none}.bit{animation-duration:.3s}.scene{transition:none}}

/* Leave real space above the original figures for the aerial throw. */
.intro{margin-top:36px}.theatre{margin-top:0}.controls{margin-top:17px}@media(max-width:600px){.intro{margin-top:44px}.theatre{margin-top:12px}.controls{margin-top:28px}}

/* A compact colour workshop, below the uninterrupted puppet stage. */
.workbench{max-width:920px;margin:0 auto 55px;border:1px solid #dec18830;border-radius:18px;background:#07140f70;padding:30px 32px 20px}.bench-heading{text-align:center;margin-bottom:30px}.bench-heading .eyebrow{margin-top:0}h2{font:normal 31px Georgia,serif;letter-spacing:-.7px;margin:13px 0 10px}.bench-heading>p:last-child{color:var(--muted);font-size:12px}.bench-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px}fieldset{border:0;margin:0;padding:0;min-width:0}legend{color:var(--gold);font-size:10px;letter-spacing:1.3px;padding:0;margin-bottom:15px}.figure-choices{display:grid;grid-template-columns:1fr 1fr;gap:9px}.figure-choices button{min-height:106px;padding:12px 8px;background:#0b1e1860;border:1px solid #b3bcb22b;border-radius:10px;color:var(--paper);cursor:pointer}.figure-choices strong,.figure-choices small{display:block}.figure-choices strong{font:normal 15px Georgia,serif;margin:7px 0}.figure-choices small{font-size:9px;color:var(--muted);line-height:1.5}.figure-icon{font-size:24px;color:var(--gold)}.figure-choices [aria-pressed="true"]{border-color:var(--gold);background:#dec1880b}.bench-note{color:var(--muted);font-size:10px;line-height:1.6;min-height:30px;margin-bottom:0}.palette-choices{display:flex;gap:12px;justify-content:space-between}.palette-choices button{background:transparent;color:var(--muted);border:0;padding:0;cursor:pointer;font:10px Arial,sans-serif;min-width:44px}.palette-choices i{display:block;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--swatch) 67%,var(--accent) 68%);margin:4px auto 10px;outline:1px solid transparent;outline-offset:4px}.palette-choices [aria-pressed="true"] i{outline-color:var(--gold)}.palette-choices [aria-pressed="true"]{color:var(--paper)}.custom-colours{display:flex;gap:22px;margin-top:21px}.custom-colours label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:10px;cursor:pointer}.custom-colours input{width:27px;height:27px;padding:0;border:0;border-radius:5px;background:none;cursor:pointer}.bench-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #dec18820;margin-top:22px;padding-top:17px;gap:15px}.bench-bottom p{color:var(--muted);font-size:10px;line-height:1.6;margin:0}.bench-bottom button{border:0;background:none;color:var(--gold);font-size:10px;cursor:pointer;padding:8px 0;white-space:nowrap}.workbench button:focus-visible,.custom-colours input:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.scene[data-variant="original"]{aspect-ratio:1100/619}@media(max-width:600px){.workbench{padding:23px 17px 16px;margin-bottom:38px}.bench-grid{grid-template-columns:1fr;gap:24px}.bench-heading{margin-bottom:24px}h2{font-size:28px}.bench-heading>p:last-child{font-size:11px}.bench-note{min-height:0}.figure-choices button{min-height:96px}.palette-choices{justify-content:flex-start;gap:22px}.bench-bottom{align-items:flex-start;gap:12px}.bench-bottom p{max-width:45%}.custom-colours{gap:28px}.controls{margin-bottom:30px}}@media(max-width:350px){.palette-choices{gap:15px}.custom-colours{gap:15px}.custom-colours label{font-size:9px}.workbench{padding-left:13px;padding-right:13px}}

.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start;margin:30px auto 45px}.play-area{position:sticky;top:20px}.play-layout .workbench{padding:26px 22px 18px;margin:0}.play-layout .bench-grid{grid-template-columns:1fr;gap:24px}.play-layout .bench-heading{margin-bottom:25px}.play-layout h2{font-size:28px}.play-layout .bench-bottom{align-items:flex-start;gap:10px}.play-layout .bench-bottom p{max-width:45%}.play-layout .bench-bottom button{white-space:normal;text-align:right;line-height:1.6;padding:0}.play-layout .controls{margin-bottom:0}.play-layout .palette-choices{gap:13px}@media(max-width:1000px){.play-layout{display:block;max-width:680px;margin-top:15px}.play-area{z-index:3;top:0;background:var(--ink);padding:8px 0 17px}.play-layout .workbench{margin-top:26px}.play-layout .scene{max-width:600px;margin:auto}.play-layout .controls{margin-top:12px}.play-layout .controls .hint{display:none}.play-layout #message{font-size:18px;margin-bottom:10px;min-height:22px}.play-layout #again{padding:9px 20px}.play-layout .names{margin-top:5px}.play-layout .theatre{margin-top:0}.play-layout .bench-grid{grid-template-columns:1fr 1fr;gap:28px}.play-layout .bench-bottom button{white-space:nowrap}}@media(max-width:600px){.play-layout{margin-bottom:35px}.play-layout .bench-grid{grid-template-columns:1fr;gap:23px}.play-layout .workbench{padding:23px 17px 16px}.play-area{margin:0 -8px;padding:0 8px 12px}.play-layout .palette-choices{justify-content:space-between;gap:12px}.play-layout .scene{max-width:390px}.play-layout .names{margin-top:0}.play-layout #message{font-size:17px}.play-layout .bench-bottom p{max-width:47%}.play-layout .bench-bottom button{white-space:normal}.intro{margin-bottom:10px}}

/* A visible action target, without a repeated text label. It stops while held or flying. */
.touched .scene[data-state="rest"]:not([data-engaged="true"]) #ball::before{content:"";position:absolute;inset:2%;border:1.5px solid #dec188b3;border-radius:50%;pointer-events:none;box-shadow:0 0 0 5px #dec18809,0 0 23px #dec18840;animation:ring-breathe 2.4s ease-in-out infinite}
@keyframes ring-breathe{0%,100%{opacity:.48;scale:1;box-shadow:0 0 0 1px #dec18809,0 0 12px #dec18826}50%{opacity:1;scale:1.12;box-shadow:0 0 0 8px #dec1880b,0 0 28px #dec18860}}
@media(prefers-reduced-motion:reduce){.touched .scene[data-state="rest"] #ball::before{animation:none;opacity:.85}}

/* The image can become a tactile particle world; discovery targets live in that image. */
#life{position:absolute;inset:0;width:100%;height:100%;z-index:4;touch-action:none;cursor:crosshair;filter:none}#life[hidden],#world-actions[hidden]{display:none!important}.discovery{position:absolute;border:0;background:transparent;border-radius:50%;padding:0;aspect-ratio:1;z-index:5;cursor:pointer;touch-action:manipulation;color:var(--gold)}.discovery:focus-visible{outline:2px solid var(--gold);outline-offset:5px}.discovery::before{content:"";position:absolute;inset:19%;border:1.5px solid #dec188c0;border-radius:50%;box-shadow:0 0 20px #dec18850;animation:discover 2.8s ease-in-out infinite;pointer-events:none}.discovery span{position:absolute;inset:0;display:grid;place-items:center;font:25px Georgia,serif;pointer-events:none}#awaken{left:50%;top:51%;width:9%;transform:translate(-50%,-50%)}#awaken span::before{content:"";width:8px;height:8px;background:var(--gold);border-radius:50%;box-shadow:0 0 15px #dec18890}#gather{left:48%;top:87%;width:9%;transform:translate(-50%,-50%)}#other-logo{left:60%;top:87%;width:8%;transform:translate(-50%,-50%)}#other-logo::before{animation-delay:.8s;border-color:#a9c8d8b0;box-shadow:0 0 20px #a9c8d840}#other-logo span{color:#a9c8d8}.scene[data-life="scatter"] #ball,.scene[data-life="alive"] #ball,.scene[data-life="gather"] #ball,.scene[data-life="preparing"] #ball{visibility:hidden}.scene:not([data-life="logo"]) #awaken{visibility:hidden}.scene[data-state="passing"] #awaken{visibility:hidden}.scene[data-life="scatter"] #art,.scene[data-life="alive"] #art,.scene[data-life="gather"] #art{transition:none}.scene[data-life="alive"]{background:radial-gradient(ellipse,#10293435,transparent 70%)}@keyframes discover{0%,100%{opacity:.5;scale:.9}50%{opacity:1;scale:1.15}}@media(max-width:600px){#awaken{width:14%;top:53%}#gather{width:15%;left:46%;top:89%}#other-logo{width:14%;left:62%;top:89%}.discovery span{font-size:21px}.discovery::before{inset:12%}}@media(prefers-reduced-motion:reduce){.discovery::before{animation:none;opacity:.9}}

/* A second invitation opens a circuit made from the actual logo pixels. */
#network{left:20%;top:88%;width:10%;transform:translate(-50%,-50%);color:#a9dce8}#network::before{border-color:#a9dce8;box-shadow:0 0 26px #79cde970;animation-delay:1.1s}.scene:not([data-life="logo"]) #network,.scene[data-state="passing"] #network,.scene[data-life="network"] #ball{visibility:hidden}.scene[data-life="network"]{background:radial-gradient(ellipse,#102e3ed0,transparent 73%)}.scene[data-life="network"] #art{transition:none}@media(max-width:600px){#network{width:15%;left:20%;top:89%}}

#world-actions .discovery small{position:absolute;top:95%;left:50%;transform:translateX(-50%);white-space:nowrap;font:11px Arial,sans-serif;color:var(--paper);letter-spacing:.3px}#gather{left:40%;top:87%}#other-logo{left:65%;top:87%}@media(max-width:600px){#gather{left:36%;top:85%}#other-logo{left:67%;top:85%}#world-actions .discovery small{font-size:10px}}

#swarm{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;filter:none}#swarm[hidden]{display:none!important}.scene[data-swarm="flying"] #ball{visibility:hidden}

#loading-poster{position:absolute;inset:0 auto auto 0;width:100%;height:auto;pointer-events:none}.scene:not([data-state="loading"]) #loading-poster{display:none}