/* Tools — one machined bar of keys. Rounded housing, square inner keys, fine seams.
   Tuning knobs live on .tools: --k (key), --seam (gap between keys), --tol (cutout to key),
   --rad (housing radius), --glow (active bloom). */

body{--k:40px;--seam:.5px;--tol:1px;--rad:13px;--glow:1;--ico:18px}
.tools{padding-top:34px;padding-bottom:10px}
.tools-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.tools-h h2{font:var(--f-disp-w,500) clamp(40px,6vw,64px)/.95 var(--f-disp);letter-spacing:calc(-.05em * var(--f-disp-ls,1))}
.tools-h h2 em{font:var(--f-em-st,italic) var(--f-em-w,400) calc(1.05em * var(--f-em-sz,1)) var(--f-em);letter-spacing:-.02em}
.tools-h p{max-width:620px;font-size:15px;opacity:.72;margin-top:10px}

/* ---------- tuner */
.tuner{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:12px 16px;border-radius:16px;background:#ffffff8c;box-shadow:inset 0 0 0 1px #fff;margin-bottom:14px}
html[data-theme=dark] .tuner{background:#ffffff0a;box-shadow:inset 0 0 0 1px #ffffff12}
.tuner label{display:flex;align-items:center;gap:8px;font:var(--sw-label);letter-spacing:var(--sw-label-ls);text-transform:uppercase;opacity:.85}
.tuner input{width:96px;accent-color:var(--acc)}
.tuner output{font:var(--sw-readout);letter-spacing:var(--sw-readout-ls);min-width:40px}
.tuner button{margin-left:auto;padding:7px 12px;border-radius:9px;font:var(--f-cap-w,600) 11px var(--f-cap);letter-spacing:calc(.08em * var(--f-cap-ls,1));text-transform:uppercase;background:#0000000f}
html[data-theme=dark] .tuner button{background:#ffffff14}

/* ---------- panes: each carries its own tone so light and dark sit side by side */
.panes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,560px),1fr));gap:14px}
.pane{position:relative;border-radius:28px;padding:22px;display:grid;gap:14px;overflow:hidden}
.pane-h{display:flex;justify-content:space-between;align-items:center}
.pane-h .lbl{text-shadow:none}
.pane[data-tone=dark]{
  --pg:repeating-linear-gradient(90deg,#ffffff05 0 1px,#0000000d 1px 2px),radial-gradient(120% 90% at 50% 0%,var(--dk-panel-a),var(--dk-panel-b) 75%);
  --pg-sh:inset 0 1px 0 #ffffff14,0 0 0 1px #000;
  --ink:var(--dk-ink);--ink3:var(--dk-dim);
  --hs:linear-gradient(180deg,var(--dk-housing-a),var(--dk-housing-b));
  --hs-sh:inset 0 2px 4px #000,inset 0 0 0 1px #000,0 1px 0 #ffffff1a,0 -1px 0 #00000040;
  --kf-a:var(--dk-key-a);--kf-b:var(--dk-key-b);
  --kf-sh:inset 0 1px 0 #ffffff17,inset 0 -1px 0 #00000040;
  --kf-sh-v:inset 1px 0 0 #ffffff12,inset -1px 0 0 #00000038,inset 0 1px 0 #ffffff0a;
  --ki:var(--dk-icon);--ki-sh:drop-shadow(0 -1px 0 #00000080);
  --hov:#ffffff;--hov-o:.045;--hov-ki:var(--dk-ink);
  --dim:#000;--dim-o:.1;
  --on-sh:inset 0 1px 2px #00000070,inset 0 0 0 .5px #00000059;
  --on-ico:color-mix(in oklab,var(--acc-glow) 70%,var(--acc));
  --lab:var(--dk-ink);--kbd:var(--dk-lab-dim);--lab-on:#fff;
}
.pane[data-tone=light]{
  --pg:repeating-linear-gradient(90deg,#ffffff1c 0 1px,#0000000a 1px 2px),radial-gradient(120% 90% at 50% 0%,var(--lt-panel-a),var(--lt-panel-b) 75%);
  --pg-sh:inset 0 1px 0 #fff,0 0 0 1px #0000001a;
  --ink:var(--lt-ink);--ink3:var(--lt-dim);
  --hs:linear-gradient(180deg,var(--lt-housing-a),var(--lt-housing-b));
  --hs-sh:inset 0 2px 4px #00000052,inset 0 0 0 1px #0000002e,0 1px 0 #ffffffe0,0 -1px 0 #0000000d;
  --kf-a:var(--lt-key-a);--kf-b:var(--lt-key-b);
  --kf-sh:inset 0 1px 0 #ffffffd0,inset 0 -1px 0 #0000001c;
  --kf-sh-v:inset 1px 0 0 #ffffffb0,inset -1px 0 0 #00000017,inset 0 1px 0 #ffffff80;
  --ki:var(--lt-icon);--ki-sh:drop-shadow(0 1px 0 #ffffffc0);
  --hov:#ffffff;--hov-o:.5;--hov-ki:var(--lt-ink);
  --dim:#000;--dim-o:.05;
  --on-sh:inset 0 1px 2px #00000030,inset 0 0 0 .5px #00000026;
  --on-ico:var(--acc-on-light,var(--acc));
  --lab:var(--lt-ink);--kbd:var(--lt-lab-dim);--lab-on:#1d1f22;
}
.pane{background:var(--pg);box-shadow:var(--pg-sh);color:var(--ink)}
.pane .lbl{color:var(--ink3)}
.examples{display:grid;grid-template-columns:auto 1fr;gap:26px 34px;align-items:start}
@media (max-width:640px){.examples{grid-template-columns:1fr}}
.ex{display:grid;gap:12px;align-content:start;justify-items:start;min-width:0}
.ex.fly-v{min-height:calc(var(--k) * 7 + 40px)}
.ex.fly-h{min-height:calc(var(--k) * 6.2 + 40px)}
.ex-cap{font:var(--sw-label);letter-spacing:var(--sw-label-ls);text-transform:uppercase;color:var(--ink3)}

/* ---------- the bar */
.tb{position:relative;display:inline-grid;gap:var(--seam);padding:var(--tol);border-radius:var(--rad);background:var(--hs);box-shadow:var(--hs-sh);--ir:max(1px,calc(var(--rad) - var(--tol)))}
.tb.v{grid-auto-flow:row}
.tb.h{grid-auto-flow:column}
.key{position:relative;width:var(--k);height:var(--k);display:grid;place-items:center;border-radius:0;background:repeating-linear-gradient(90deg,#ffffff05 0 1px,#0000 1px 2px),linear-gradient(180deg,var(--kf-a),var(--kf-b));box-shadow:var(--kf-sh);color:var(--ki);transition:color .03s}
.key>svg{width:var(--ico);height:var(--ico);fill:currentColor;stroke:none;filter:var(--ki-sh);position:relative;z-index:1;transition:color .03s,filter .03s}
/* vertical bars shade left to right so the whole column reads as one surface */
.tb.v>.key{background:repeating-linear-gradient(0deg,#ffffff05 0 1px,#0000 1px 2px),linear-gradient(90deg,var(--kf-a),var(--kf-b));box-shadow:var(--kf-sh-v)}
/* only the ends of the bar follow the housing radius */
.tb.v>.key:first-child{border-radius:var(--ir) var(--ir) 0 0}
.tb.v>.key:last-child{border-radius:0 0 var(--ir) var(--ir)}
.tb.h>.key:first-child{border-radius:var(--ir) 0 0 var(--ir)}
.tb.h>.key:last-child{border-radius:0 var(--ir) var(--ir) 0}
.tb>.key:only-child{border-radius:var(--ir)}
.tb.v>.key.brk{margin-bottom:calc(var(--tol) * 1.3)}
.tb.h>.key.brk{margin-right:calc(var(--tol) * 1.3)}

/* hover: the face catches a little more light */
.key:before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,var(--hov),transparent 120%);opacity:0;transition:opacity .04s;pointer-events:none}
/* hover: no lightening — the icon previews the active accent */
.key:hover{color:var(--on-ico)}

/* press: a few percent darker with a hairline inner shadow, then it springs back flush and stays lit */
.key:after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--dim);opacity:0;pointer-events:none}
.key:active:after,.key.tap:after{opacity:var(--dim-o);transition-duration:0s}
.key:active,.key.tap,.tb.v>.key:active,.tb.v>.key.tap{box-shadow:var(--on-sh);transition:none}
.key[aria-pressed=true]{color:var(--on-ico)}
.key[aria-pressed=true]:hover{color:var(--on-ico)}
.key[aria-pressed=true]>svg{filter:drop-shadow(0 0 calc(3px * var(--glow)) color-mix(in oklab,var(--on-ico) 60%,transparent))}
.key:focus-visible{outline:2px solid var(--acc-glow);outline-offset:-2px;z-index:2}

/* group mark: tiny engraved triangle in the corner */
.key .grp{position:absolute;right:3px;bottom:3px;width:5px;height:5px;background:currentColor;clip-path:polygon(100% 0,100% 100%,0 100%);opacity:.55;z-index:1}
.key[aria-pressed=true] .grp{opacity:.9}

/* ---------- flyouts */
.flywrap{position:relative;display:inline-block}
.fly{position:absolute;z-index:6;opacity:0;visibility:hidden;transition:opacity .14s,transform .18s cubic-bezier(.3,1.3,.5,1),visibility .14s}
.fly.open{opacity:1;visibility:visible;transform:none}
.fly .tb{box-shadow:var(--hs-sh),0 14px 26px -12px #000a}
/* vertical bar → horizontal flyout bar to the right, aligned to its key */
.fly.right{left:calc(100% + 8px);transform:translateX(-4px)}
/* horizontal bar → menu drops below its key */
.fly.down{top:calc(100% + 8px);transform:translateY(-4px)}
.menu-bar{display:grid;grid-auto-flow:row}
.menu-bar .key{width:auto;min-width:196px;height:calc(var(--k) * .92);grid-template-columns:var(--ico) 1fr auto;justify-items:start;gap:12px;padding:0 12px}
.menu-bar .key .nm{font:var(--sw-body);letter-spacing:var(--sw-body-ls);color:var(--lab);position:relative;z-index:1;text-shadow:var(--lab-sh,none)}
.menu-bar .key .sc{font:var(--sw-readout);letter-spacing:var(--sw-readout-ls);color:var(--kbd);position:relative;z-index:1}
.menu-bar .key[aria-pressed=true] .nm{color:var(--lab-on)}
.menu-bar .key[aria-pressed=true] .sc{color:var(--on-ico)}
.pane[data-tone=light] .menu-bar .key .nm{text-shadow:0 1px 0 #ffffffb0}
.pane[data-tone=light] .menu-bar .key[aria-pressed=true] .nm{text-shadow:none}

/* ---------- hover label readout under each example */
.readout{display:inline-flex;align-items:center;gap:8px;padding:4px 8px;border-radius:6px;background:linear-gradient(180deg,#141416,#050506);box-shadow:0 0 0 1px #0000004d,inset 0 1px 3px #000;font:var(--sw-readout);letter-spacing:var(--sw-readout-ls);color:#f2f2f0;min-width:150px}
.readout b{font-weight:800;color:var(--acc-glow)}