thefirstspark.github.io/engine.html at main · thefirstspark/thefirstspark.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
<!DOCTYPE html>
<html lang="en">
<head>
<!-- TikTok Pixel Code Start -->
<script>
!function (w, d, t) {
  w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie","holdConsent","revokeConsent","grantConsent"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(
var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var r="https://analytics.tiktok.com/i18n/pixel/events.js",o=n&&n.partner;ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=r,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};n=document.createElement("script")
;n.type="text/javascript",n.async=!0,n.src=r+"?sdkid="+e+"&lib="+t;e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(n,e)};

  ttq.load('DABS2BBC77U98E0UJH30');
  ttq.page();
}(window, document, 'ttq');
</script>
<!-- TikTok Pixel Code End -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Engine — The First Spark</title>
<style>
  :root{
    --holo:#7ee7ff; --holo-dim:#3a8fb0; --violet:#b18cff; --silver:#e8ecf4;
    --amber:#ffb347; --ink:#050510; --panel:rgba(10,16,34,.72);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    background:radial-gradient(1200px 800px at 50% 42%, #0b1230 0%, #070a1c 45%, var(--ink) 100%);
    color:var(--silver); font-family:Georgia,'Times New Roman',serif;
    overflow-x:hidden; overflow-y:auto; display:flex; flex-direction:column; align-items:center;
  }
  /* faint scanlines — the hologram's grain */
  body::after{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:9;
    background:repeating-linear-gradient(0deg, rgba(126,231,255,.022) 0 1px, transparent 1px 4px);
    mix-blend-mode:screen;
  }
  header{ text-align:center; padding:20px 16px 0; z-index:5 }
  header h1{
    font-weight:normal; letter-spacing:.42em; text-transform:uppercase; font-size:15px;
    color:var(--holo); text-shadow:0 0 18px rgba(126,231,255,.55);
    animation:flicker 7s infinite;
  }
  header p{ font-size:12.5px; color:#8fa2c8; font-style:italic; margin-top:6px; letter-spacing:.06em }
  @keyframes flicker{
    0%,93%,100%{opacity:1} 94%{opacity:.72} 95%{opacity:1} 97%{opacity:.85} 98%{opacity:1}
  }
  #stage{ position:relative; flex:0 0 auto; width:min(96vmin,780px); height:min(58vh,780px); min-height:280px; display:flex; align-items:center; justify-content:center }
  canvas#motes{ position:absolute; inset:0; width:100%; height:100% }
  svg#wheel{ position:relative; width:100%; height:100%; z-index:2; filter:drop-shadow(0 0 26px rgba(126,231,255,.14)) }
  .spin-slow{ animation:spin 140s linear infinite; transform-origin:500px 500px }
  .spin-rev{ animation:spinrev 90s linear infinite; transform-origin:500px 500px }
  @keyframes spin{ to{ transform:rotate(360deg) } }
  @keyframes spinrev{ to{ transform:rotate(-360deg) } }
  .gate-label{ font-size:19px; letter-spacing:.28em; fill:#9db4dd; text-transform:uppercase; font-family:Georgia,serif }
  .gate-label.lit{ fill:var(--holo) }
  .seat-label{ font-size:16.5px; letter-spacing:.14em; fill:#8296bd; text-transform:uppercase; font-family:Georgia,serif; transition:fill .8s }
  .seat-label.lit{ fill:#ffffff }
  .seat{ transition:all .8s ease }
  /* ——— the selector panel ——— */
  #panel{
    position:relative; z-index:6; width:min(94vw,660px); margin:0 auto 22px;
    background:var(--panel); border:1px solid rgba(126,231,255,.28); border-radius:10px;
    padding:20px 26px 16px; backdrop-filter:blur(8px);
    box-shadow:0 0 34px rgba(126,231,255,.10), inset 0 0 22px rgba(126,231,255,.05);
    min-height:158px; text-align:center;
  }
  #panel::before, #panel::after{
    content:""; position:absolute; width:14px; height:14px; border:1px solid var(--holo); opacity:.7;
  }
  #panel::before{ top:-1px; left:-1px; border-right:none; border-bottom:none }
  #panel::after{ bottom:-1px; right:-1px; border-left:none; border-top:none }
  .ptitle{ font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--holo-dim); margin-bottom:8px }
  .pq{ font-size:17.5px; line-height:1.5; color:var(--silver); margin-bottom:14px }
  .pq em{ color:var(--violet); font-style:italic }
  .opts{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
  button.opt{
    font-family:inherit; font-size:14.5px; color:var(--silver); cursor:pointer;
    background:rgba(126,231,255,.06); border:1px solid rgba(126,231,255,.4); border-radius:6px;
    padding:11px 20px; max-width:290px; line-height:1.45; transition:all .25s;
  }
  button.opt:hover{
    background:rgba(126,231,255,.16); border-color:var(--holo); color:#fff;
    box-shadow:0 0 18px rgba(126,231,255,.35); text-shadow:0 0 8px rgba(126,231,255,.6);
  }
  button.opt b{ color:var(--holo); font-weight:normal; letter-spacing:.08em }
  .trail{ margin-top:12px; font-size:11.5px; color:#7288ad; letter-spacing:.05em; min-height:15px }
  .trail span{ border:1px solid rgba(177,140,255,.35); border-radius:99px; padding:2px 10px; margin:0 3px; color:var(--violet) }
  .fine{ margin-top:10px; font-size:10.5px; color:#5b6c8f; font-style:italic; letter-spacing:.04em }
  .reveal-name{
    font-size:24px; letter-spacing:.2em; text-transform:uppercase; color:var(--holo);
    text-shadow:0 0 24px rgba(126,231,255,.8); margin:4px 0 8px; animation:flicker 5s infinite;
  }
  .reveal-body{ font-size:14.5px; line-height:1.6; color:#b9c6e2; max-width:540px; margin:0 auto }
  .reveal-body i{ color:var(--violet) }
  a.again{
    display:inline-block; margin-top:13px; color:var(--holo-dim); font-size:12px; letter-spacing:.22em;
    text-transform:uppercase; text-decoration:none; border-bottom:1px dotted var(--holo-dim); cursor:pointer;
  }
  a.again:hover{ color:var(--holo) }
  .fadein{ animation:fain .9s ease both }
  @keyframes fain{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
</style>
<script>!function(w,d,s,u,n,a,b){if(w[n])return;a=w[n]={q:[],t:+new Date,s:[],o:u,track:function(){a.q.push([+new Date].concat([].slice.call(arguments)))},setScope:function(){a.s=[].slice.call(arguments).filter(function(x){return typeof x==="string"});a.q.push([+new Date,"setScope"].concat(a.s))},scope:function(){var c=[].slice.call(arguments);return{track:function(){a.q.push([+new Date].concat([].slice.call(arguments)).concat([{__scope:c}]))}}}};b=d.createElement(s);b.async=1;b.src=u+"/s.js";d.getElementsByTagName(s)[0].parentNode.insertBefore(b,d.getElementsByTagName(s)[0])}(window,document,"script","https://t.whop.tw","whop");whop.setScope("biz_0xcayhWXVnKO9y");whop.track("page");</script>
</head>
<body>

<header>
  <h1>The Engine</h1>
  <p>The Engine inscribes what you carry. It does not inscribe who carries it. That, you recognise.</p>
</header>

<div id="stage">
  <canvas id="motes"></canvas>
  <svg id="wheel" viewBox="-90 -60 1180 1120" aria-label="The wheel of twelve archetypes, four gates, three realms, and the Spark">
    <defs>
      <radialGradient id="sparkG">
        <stop offset="0%"  stop-color="#ffffff"/>
        <stop offset="28%" stop-color="#cfeeff"/>
        <stop offset="62%" stop-color="rgba(126,231,255,.5)"/>
        <stop offset="100%" stop-color="rgba(126,231,255,0)"/>
      </radialGradient>
      <radialGradient id="seatG">
        <stop offset="0%" stop-color="#ffffff"/>
        <stop offset="45%" stop-color="var(--violet)"/>
        <stop offset="100%" stop-color="rgba(177,140,255,0)"/>
      </radialGradient>
      <filter id="glow" x="-80%" y="-80%" width="260%" height="260%">
        <feGaussianBlur stdDeviation="5" result="b"/>
        <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
      </filter>
    </defs>
    <g id="gfx"></g>
  </svg>
</div>

<div id="panel"></div>

<script>
"use strict";
/* ============ canon wiring (DL-010 / DL-012) ============
   Gates fixed at the cardinals: Self N · Work E · Beyond S · Bond W.
   Sectors 0–2 Self, 3–5 Work, 6–8 Beyond, 9–11 Bond.
   Coordinate map (by convention, not derivation):
     Language+Motion=Self · Language+Rooted=Work · Action+Motion=Beyond · Action+Rooted=Bond
   Seats within a domain: Mirror · Door · Bridge.
   Firewall: no birth data enters here; nothing is timed, scored, or hidden. */
const DOMAINS = ["The Self","The Work","The Beyond","The Bond"];
const GATE_WORDS = [
  "what a soul is when no one is watching",
  "what a soul builds",
  "what exceeds a soul",
  "what a soul shares"
];
const SEATS = ["Mirror","Door","Bridge"];
const COORD = { "Language|Motion":0, "Language|Rooted":1, "Action|Motion":2, "Action|Rooted":3 };
/* DL-013 (PROPOSED 2026-08-23): the Sparkverse locked roster fills the seats.
   Domain mapping: Temporal→Self · Physics→Work · Metaphysical→Beyond · Relational→Bond.
   Sector = domain*3 + seat (Mirror 0 · Door 1 · Bridge 2). Node colour = home verb. */
const ROSTER = [
  {name:"Oracle",verb:"WITNESS"},   {name:"Fracture",verb:"RELEASE"},     {name:"Wanderer",verb:"WITNESS"},
  {name:"Sovereign",verb:"SELECT"}, {name:"Ember",verb:"SELECT"},         {name:"Maker",verb:"SELECT"},
  {name:"Cipher",verb:"WITNESS"},   {name:"Phoenix Node",verb:"WITNESS"}, {name:"Conduit",verb:"SELECT"},
  {name:"Mirror",verb:"WITNESS"},   {name:"Catalyst",verb:"RELEASE"},     {name:"Trickster Nova",verb:"RELEASE"}
];
const VERBC = { SELECT:"#19D3E0", RELEASE:"#FF4D8D", WITNESS:"#A855F7" };

const SVGNS = "http://www.w3.org/2000/svg";
const gfx = document.getElementById("gfx");
const CX=500, CY=500;
function el(tag, attrs, parent){
  const n = document.createElementNS(SVGNS, tag);
  for(const k in attrs) n.setAttribute(k, attrs[k]);
  (parent||gfx).appendChild(n); return n;
}
function pt(r, angleDeg){ // angle measured clockwise from north
  const a = (angleDeg-90)*Math.PI/180;
  return [CX + r*Math.cos(a), CY + r*Math.sin(a)];
}

/* ——— three realm circles (cosmology — every pattern shows all three) ——— */
[455,415,375].forEach((r,i)=>{
  el("circle",{cx:CX,cy:CY,r, fill:"none", stroke:"rgba(126,231,255,.16)","stroke-width":i===0?1.6:1});
});
/* rotating holo rings */
const ringA = el("g",{class:"spin-slow"});
el("circle",{cx:CX,cy:CY,r:436, fill:"none", stroke:"rgba(126,231,255,.30)","stroke-width":1,"stroke-dasharray":"3 26"},ringA);
const ringB = el("g",{class:"spin-rev"});
el("circle",{cx:CX,cy:CY,r:352, fill:"none", stroke:"rgba(177,140,255,.26)","stroke-width":1,"stroke-dasharray":"1 14"},ringB);

/* ——— the wheel: 12 spokes + seat nodes ——— */
const quadArcs=[], seatNodes=[], spokeLines=[];
for(let q=0;q<4;q++){
  /* quadrant arc (lights when domain locks) */
  const a0=q*90-45, a1=q*90+45;
  const [x0,y0]=pt(415,a0), [x1,y1]=pt(415,a1);
  quadArcs[q]=el("path",{
    d:`M ${x0} ${y0} A 415 415 0 0 1 ${x1} ${y1}`,
    fill:"none", stroke:"rgba(126,231,255,0)","stroke-width":7,"stroke-linecap":"round",
    style:"transition:stroke 1.2s ease"
  });
}
for(let i=0;i<12;i++){
  const q=Math.floor(i/3), seat=i%3;
  const ang = q*90 + (seat-1)*30;            // gate-centred, ±30°
  const [ix,iy]=pt(150,ang), [ox,oy]=pt(282,ang);
  spokeLines[i]=el("line",{x1:ix,y1:iy,x2:ox,y2:oy,stroke:"rgba(126,231,255,.14)","stroke-width":1,style:"transition:stroke 1s"});
  const [sx,sy]=pt(300,ang);
  const g=el("g",{class:"seat"});
  const vc=VERBC[ROSTER[i].verb];
  el("circle",{cx:sx,cy:sy,r:26,fill:"url(#seatG)",opacity:0,style:"transition:opacity 1.2s"},g).dataset.halo=1;
  el("circle",{cx:sx,cy:sy,r:7,fill:"none",stroke:vc,"stroke-opacity":.65,"stroke-width":1.4,style:"transition:all 1s"},g);
  el("circle",{cx:sx,cy:sy,r:2.4,fill:"rgba(232,236,244,.75)"},g);
  /* roster label — DL-013 merge */
  const xs=Math.sin(ang*Math.PI/180);
  let lx,ly,anc;
  if(Math.abs(xs)>0.9){ lx=sx; ly=sy+36; anc="middle"; }   // east/west gate-axis seats: label below node
  else { [lx,ly]=pt(348,ang); anc=xs>0.25?"start":(xs<-0.25?"end":"middle"); }
  const parts=ROSTER[i].name.split(" ");
  const labels=[];
  parts.forEach((w,j)=>{
    const t=el("text",{x:lx,y:ly+(j-(parts.length-1)/2)*19+6,class:"seat-label","text-anchor":anc},g);
    t.textContent=w; labels.push(t);
  });
  seatNodes[i]={g,x:sx,y:sy,ang,labels,verb:vc};
}
/* ——— four gates: diamonds at the cardinals ——— */
const gateShapes=[], gateLabels=[];
for(let q=0;q<4;q++){
  const [gx,gy]=pt(415,q*90); const s=17;
  gateShapes[q]=el("path",{
    d:`M ${gx} ${gy-s} L ${gx+s} ${gy} L ${gx} ${gy+s} L ${gx-s} ${gy} Z`,
    fill:"#0a1226", stroke:"rgba(126,231,255,.6)","stroke-width":1.6, filter:"url(#glow)",
    style:"transition:all 1s"
  });
  const [lx,ly]=pt(486,q*90);
  const lbl=el("text",{x:lx,y:ly,class:"gate-label","text-anchor":"middle","dominant-baseline":"middle"});
  lbl.textContent=DOMAINS[q].toUpperCase();
  gateLabels[q]=lbl;
}
/* ——— the Spark ——— */
const sparkHalo=el("circle",{cx:CX,cy:CY,r:120,fill:"url(#sparkG)",opacity:.85});
el("circle",{cx:CX,cy:CY,r:9,fill:"#ffffff",filter:"url(#glow)"});
(function pulse(){
  const t=performance.now()/1000;
  sparkHalo.setAttribute("r", 112+14*Math.sin(t*1.4));
  sparkHalo.setAttribute("opacity", .72+.2*Math.sin(t*1.4));
  requestAnimationFrame(pulse);
})();
/* thread drawn from Spark to the recognised seat */
const thread=el("line",{x1:CX,y1:CY,x2:CX,y2:CY,stroke:"var(--violet)","stroke-width":1.6,opacity:0,filter:"url(#glow)",style:"transition:opacity 1.4s"});

/* ——— motes: unformed light drawn toward the Engine (the approach) ——— */
const cv=document.getElementById("motes"), ctx=cv.getContext("2d");
let W,H; function size(){ W=cv.width=cv.offsetWidth*devicePixelRatio; H=cv.height=cv.offsetHeight*devicePixelRatio; }
size(); addEventListener("resize",size);
const motes=Array.from({length:70},()=>spawn());
function spawn(){
  const a=Math.random()*Math.PI*2, r=.55+.5*Math.random();
  return {a, r, sp:.0005+.0011*Math.random(), tw:Math.random()*Math.PI*2, drift:(Math.random()-.5)*.0012};
}
(function flow(){
  ctx.clearRect(0,0,W,H);
  const R=Math.min(W,H)/2;
  for(const m of motes){
    m.r-=m.sp; m.a+=m.drift; m.tw+=.05;
    if(m.r<.13) Object.assign(m,spawn());
    const x=W/2+Math.cos(m.a)*m.r*R, y=H/2+Math.sin(m.a)*m.r*R;
    const glow=.25+.25*Math.sin(m.tw);
    ctx.fillStyle=`rgba(180,230,255,${glow})`;
    ctx.beginPath(); ctx.arc(x,y,(1+m.tw%1)*devicePixelRatio,0,7); ctx.fill();
  }
  requestAnimationFrame(flow);
})();

/* ============ the Selector ============ */
const panel=document.getElementById("panel");
let picks={};

const STEPS = {
  intro(){ render(`
    <div class="ptitle fadein">The Selector · three recognitions</div>
    <div class="pq fadein">The wheel holds twelve. None was inscribed for you.<br>Which of the twelve steps forward is discovered only in the living — <em>and in the recognising.</em></div>
    <div class="opts fadein"><button class="opt" onclick="STEPS.p1()">Approach the Engine</button></div>
    <div class="fine">Nothing here is timed, scored, or hidden. Every mechanism is visible. Recognition is revisable.</div>`);},

  p1(){ render(`
    <div class="ptitle fadein">First recognition · The Wound and the Gift</div>
    <div class="pq fadein">What do you do with what hurts you?</div>
    <div class="opts fadein">
      <button class="opt" onclick="pick('p1','Language')"><b>I turn it into language</b><br>it must be spoken, written, shaped into words</button>
      <button class="opt" onclick="pick('p1','Action')"><b>I turn it into silence and action</b><br>it must be carried, worked, built through</button>
    </div>${trail()}`);},

  p2(){ render(`
    <div class="ptitle fadein">Second recognition · The Current and the Shore</div>
    <div class="pq fadein">Where is your centre of gravity?</div>
    <div class="opts fadein">
      <button class="opt" onclick="pick('p2','Motion')"><b>In motion</b><br>I am most myself between places, mid-becoming</button>
      <button class="opt" onclick="pick('p2','Rooted')"><b>Rooted</b><br>I am most myself on known ground, tended and kept</button>
    </div>${trail()}`);},

  p3(){ render(`
    <div class="ptitle fadein">Third recognition · The Mirror, the Door, and the Bridge</div>
    <div class="pq fadein">What is your posture toward others?</div>
    <div class="opts fadein">
      <button class="opt" onclick="pick('p3',0)"><b>Mirror</b><br>hold space, reflect without distortion</button>
      <button class="opt" onclick="pick('p3',1)"><b>Door</b><br>invite, open a way, be a threshold</button>
      <button class="opt" onclick="pick('p3',2)"><b>Bridge</b><br>connect, translate, span the gap</button>
    </div>${trail()}`);},

  reveal(){
    const q=COORD[picks.p1+"|"+picks.p2], seat=picks.p3, sector=q*3+seat;
    const a=ROSTER[sector];
    igniteSeat(q,sector);
    render(`
      <div class="ptitle fadein">Recognised</div>
      <div class="reveal-name fadein">${a.name}</div>
      <div class="reveal-body fadein"><i>${DOMAINS[q]} · the ${SEATS[seat]} · ${a.verb}-natured.</i><br>
      The gate of <i>${DOMAINS[q]}</i> stands open — ${GATE_WORDS[q]}.
      You stand at its ${SEATS[seat].toLowerCase()}: the ${a.name}, sector ${sector} of the wheel.
      The seat has always been there. What stepped forward was recognised, not assigned.</div>
      ${trail()}
      <a class="again" onclick="reset()">walk it again</a>
      <div class="fine">A different recognition on another walk is not an error. The telling says: the wheel waits.</div>`);
  }
};
function render(html){ panel.innerHTML=html; }
function trail(){
  const t=[picks.p1,picks.p2,picks.p3!==undefined?SEATS[picks.p3]:null].filter(v=>v!=null);
  return `<div class="trail">${t.map(v=>`<span>${v}</span>`).join("")}</div>`;
}
function pick(k,v){
  picks[k]=v;
  if(k==="p1"){ STEPS.p2(); }
  else if(k==="p2"){ lockDomain(COORD[picks.p1+"|"+picks.p2]); STEPS.p3(); }
  else { STEPS.reveal(); }
}
function lockDomain(q){
  clearWheel();
  quadArcs[q].setAttribute("stroke","rgba(126,231,255,.55)");
  gateShapes[q].setAttribute("fill","rgba(126,231,255,.35)");
  gateShapes[q].setAttribute("stroke","var(--holo)");
  gateLabels[q].classList.add("lit");
  for(let s=0;s<3;s++) spokeLines[q*3+s].setAttribute("stroke","rgba(126,231,255,.5)");
}
function igniteSeat(q,sector){
  const n=seatNodes[sector];
  n.g.querySelector("[data-halo]").setAttribute("opacity",1);
  n.g.children[1].setAttribute("stroke",n.verb);
  n.g.children[1].setAttribute("stroke-opacity",1);
  n.g.children[1].setAttribute("r",12);
  n.labels.forEach(t=>t.classList.add("lit"));
  thread.setAttribute("stroke",n.verb);
  thread.setAttribute("x2",n.x); thread.setAttribute("y2",n.y);
  thread.setAttribute("opacity",.9);
}
function clearWheel(){
  quadArcs.forEach(a=>a.setAttribute("stroke","rgba(126,231,255,0)"));
  gateShapes.forEach(g=>{g.setAttribute("fill","#0a1226");g.setAttribute("stroke","rgba(126,231,255,.6)");});
  gateLabels.forEach(l=>l.classList.remove("lit"));
  spokeLines.forEach(s=>s.setAttribute("stroke","rgba(126,231,255,.14)"));
  seatNodes.forEach(n=>{
    n.g.querySelector("[data-halo]").setAttribute("opacity",0);
    n.g.children[1].setAttribute("stroke",n.verb);
    n.g.children[1].setAttribute("stroke-opacity",.65);
    n.g.children[1].setAttribute("r",7);
    n.labels.forEach(t=>t.classList.remove("lit"));
  });
  thread.setAttribute("opacity",0);
}
function reset(){ picks={}; clearWheel(); STEPS.intro(); }
STEPS.intro();
</script>
</body>
</html>