*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --bg: #080a0f; --violet: #8b7fff; --teal: #3fe8c8;
    --amber: #f5c842; --rose: #ff6b8a; --text: #c0c4d4;
    --muted: #444860; --white: #eef0fa;
}
html, body { width:100%; height:100%; background:var(--bg); color:var(--white);
font-family:'DM Mono',monospace; overflow:hidden; user-select:none; }

#stage { width:100vw; height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; }

#pattern-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 0.6s ease; cursor:crosshair; }

#formula-panel { position:relative; z-index:10; display:flex;
    flex-direction:column; align-items:center; gap:24px;
    text-align:center; padding:0 24px; pointer-events:none; }

#piece-label { font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
    color:var(--violet); opacity:0; transform:translateY(8px);
    transition:opacity 0.5s, transform 0.5s; }

#piece-title { font-family:'Syne',sans-serif; font-size:clamp(1.8rem,5vw,3rem);
    font-weight:800; color:var(--white); line-height:1.1; opacity:0;
    transform:translateY(12px); transition:opacity 0.5s 0.1s, transform 0.5s 0.1s; }

#formula-box { background:rgba(255,255,255,0.04);
    border:1px solid rgba(139,127,255,0.25); border-radius:4px;
    padding:28px 40px; min-width:260px; display:flex; align-items:center;
    justify-content:center; position:relative; overflow:hidden; opacity:0;
    transform:translateY(12px); transition:opacity 0.5s 0.25s, transform 0.5s 0.25s; }

#formula-box::after { content:''; position:absolute; top:0; left:-100%;
    width:100%; height:100%;
    background:linear-gradient(90deg,transparent 0%,rgba(139,127,255,0.18) 50%,transparent 100%);
    animation:none; }
#formula-box.scanning::after { animation:scan 1.1s ease forwards; }
@keyframes scan { from{left:-100%} to{left:100%} }

#formula-render { color:var(--white); line-height:1; }
#formula-render svg { fill:currentColor; }

#piece-desc { font-size:12.5px; color:var(--muted); max-width:440px;
    line-height:1.7; opacity:0; transform:translateY(8px);
    transition:opacity 0.5s 0.4s, transform 0.5s 0.4s; }

  /* interact hint shown during pattern phase */
#interact-hint { position:fixed; top:28px; left:50%; transform:translateX(-50%);
    font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--muted); z-index:20; opacity:0;
    transition:opacity 0.6s; pointer-events:none; white-space:nowrap; }
#interact-hint.show { opacity:1; }

#dots { position:fixed; bottom:36px; left:50%; transform:translateX(-50%);
    display:flex; gap:10px; z-index:20; }
  .dot { width:6px; height:6px; border-radius:50%; background:var(--muted);
    cursor:pointer; transition:background 0.3s, transform 0.3s; }
  .dot.active { background:var(--violet); transform:scale(1.4); }

  .nav-btn { position:fixed; top:50%; transform:translateY(-50%); z-index:20;
    background:none; border:1px solid var(--muted); color:var(--muted);
    font-family:'DM Mono',monospace; font-size:18px; width:40px; height:40px;
    border-radius:50%; cursor:pointer; display:flex; align-items:center;
    justify-content:center; transition:border-color 0.2s, color 0.2s; }
  .nav-btn:hover { border-color:var(--violet); color:var(--violet); }
#btn-prev { left:24px; } #btn-next { right:24px; }

#counter { position:fixed; top:28px; right:32px; font-size:11px;
    letter-spacing:0.12em; color:var(--muted); z-index:20; }

#hint { position:fixed; bottom:72px; left:50%; transform:translateX(-50%);
    font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--muted); z-index:20; animation:pulse 2.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:0.4} 50%{opacity:1} }

#overlay { position:fixed; inset:0; background:var(--bg); z-index:30;
    pointer-events:none; opacity:0; transition:opacity 0.35s; }
#overlay.on { opacity:1; }

  /* ── END CARD ── */
#end-card {
    position:fixed; inset:0; z-index:15;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:32px; text-align:center; padding:40px 24px;
    opacity:0; pointer-events:none; transition:opacity 0.7s;
  }
#end-card.show { opacity:1; pointer-events:auto; }
#end-card .end-eyebrow {
    font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--violet);
  }
#end-card .end-title {
    font-family:'Syne',sans-serif; font-size:clamp(2rem,6vw,3.8rem);
    font-weight:800; color:var(--white); line-height:1.08; letter-spacing:-0.02em;
  }
#end-card .end-title span { color:var(--violet); }
#end-card .end-sub {
    font-size:13px; color:var(--muted); max-width:420px; line-height:1.75;
  }
#end-card .suggestions {
    display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:560px;
  }
#end-card .tag {
    font-size:11px; letter-spacing:0.1em; padding:7px 14px;
    border:1px solid var(--muted); border-radius:2px; color:var(--muted);
    cursor:default; transition:border-color 0.25s, color 0.25s;
  }
#end-card .tag:hover { border-color:var(--violet); color:var(--violet); }
#end-card .end-cta {
    font-size:12px; color:var(--muted); margin-top:8px;
  }
#end-card .end-cta a {
    color:var(--teal); text-decoration:none;
    border-bottom:1px solid var(--teal); padding-bottom:1px;
  }
  /* ambient particle canvas behind end card */
#end-canvas {
    position:fixed; inset:0; z-index:14;
    opacity:0; transition:opacity 0.7s; pointer-events:none;
  }
#end-canvas.show { opacity:0.5; }