design: elevate playground UI to a precision-instrument system

A design-lead pass over the 'Kinetic Lab' playground — same DNA, pushed to
ship quality through accent discipline and material depth.

- Accent discipline: lime was over-deployed (LIVE, active step, chip, play
  button, brand all competing). Introduced a 3-tier accent system (line/wash)
  so lime reads as a rare tracking marker. Secondary buttons now lift on a
  neutral surface; lime is reserved for the primary CTA and true signals.
- Material system: --edge / --sheen tokens give every chrome surface (topbar,
  transport, pane-head) a milled, top-lit read instead of flat fills.
- Transport: replaced the loud wide solid-lime 'Pause' pill with a circular
  media-player disc (40px, inset highlight, focus ring); machined scrubber
  groove with a white/lime thumb; tabular clock behind a hairline divider.
- Phase chips: refined active state (lime status dot + faint wash + hairline)
  instead of a shouty solid-lime block.
- Topbar hierarchy: recessed the Area/Gear/Level filters into a secondary
  cluster, made Example the primary control, added a divider before actions.
- Lighter intro strip (small lime tick, white headline).
- Fixed a real defect: the 'Posecode' wordmark rendered as default UA link
  blue (#0000EE) — added a brand color + global anchor reset.

Verified at desktop + mobile; play/pause toggle, active chip, and the How-to
slide-over all render correctly; production build clean.

Author: a-baran-orhan

playground/play.html

@@ -27,24 +27,27 @@
         <span class="tag">playground</span>
       </a>
       <div class="topbar-actions">
-        <label class="field filter">
-          <span>Area</span>
-          <div class="select-wrap sm"><select id="f-body"></select></div>
-        </label>
-        <label class="field filter">
-          <span>Gear</span>
-          <div class="select-wrap sm"><select id="f-equip"></select></div>
-        </label>
-        <label class="field filter">
-          <span>Level</span>
-          <div class="select-wrap sm"><select id="f-level"></select></div>
-        </label>
-        <label class="field">
+        <div class="filter-cluster" role="group" aria-label="Filter examples">
+          <label class="field filter">
+            <span>Area</span>
+            <div class="select-wrap sm"><select id="f-body"></select></div>
+          </label>
+          <label class="field filter">
+            <span>Gear</span>
+            <div class="select-wrap sm"><select id="f-equip"></select></div>
+          </label>
+          <label class="field filter">
+            <span>Level</span>
+            <div class="select-wrap sm"><select id="f-level"></select></div>
+          </label>
+        </div>
+        <label class="field field-primary">
           <span>Example <span id="preset-count" class="count"></span></span>
           <div class="select-wrap">
             <select id="preset"></select>
           </div>
         </label>
+        <span class="tb-divider" aria-hidden="true"></span>
         <button id="how-to" class="btn ghost" aria-label="How to use">
           <span class="ico-help" aria-hidden="true"></span><span class="lbl">How to use</span>
         </button>