/* ═══════════════════════════════════════════════════════════════════
   THE UILLEANN PIPES — DISASSEMBLED
   Technical-documentation dark theme. Hairlines, hard corners, mono
   labels over a readable long-form column.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --bg:#0b0d10;
  --bg-2:#0f1318;
  --panel:#12171d;
  --panel-2:#161c23;
  --line:#242c36;
  --line-2:#334050;
  --ink:#e2e8ef;
  --ink-2:#a4b0bf;
  --mute:#7b8797;
  --cy:#31d9ff;
  --cy-dim:#155d73;
  --am:#ffb648;
  --rd:#ff6b5a;
  --gr:#66e2a0;
  --mono:ui-monospace,"Cascadia Mono","JetBrains Mono","Consolas","SF Mono",monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --measure:70ch;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:64px; -webkit-text-size-adjust:100%; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  overflow-x:hidden;
  font-feature-settings:"kern" 1;
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

::selection{ background:var(--cy); color:#04121a; }

a{ color:var(--cy); text-decoration:none; border-bottom:1px solid var(--cy-dim); }
a:hover{ border-bottom-color:var(--cy); }

/* ───────── shared bits ───────── */
.mono{ font-family:var(--mono); }
.kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cy); display:block; margin-bottom:12px;
}
.wrap{ max-width:1240px; margin:0 auto; padding:0 24px; }
.col{ max-width:var(--measure); }
.lede{ font-size:20px; line-height:1.55; color:var(--ink); }
.muted{ color:var(--ink-2); }
small.note{ display:block; font-family:var(--mono); font-size:12px; color:var(--mute); line-height:1.6; }

h1,h2,h3,h4{ line-height:1.15; font-weight:650; letter-spacing:-0.015em; }
h2{ font-size:clamp(28px,4vw,44px); margin-bottom:14px; }
h3{ font-size:clamp(20px,2.4vw,26px); margin:38px 0 10px; }
h4{ font-size:16px; margin:24px 0 6px; font-family:var(--mono); letter-spacing:.04em;
    text-transform:uppercase; color:var(--am); font-weight:600; }
p + p{ margin-top:14px; }
section > .wrap > .col > p{ color:var(--ink-2); }
strong{ color:var(--ink); font-weight:640; }
em{ color:var(--ink); }

.eq{
  font-family:var(--mono); background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--cy); padding:14px 18px; margin:20px 0;
  font-size:15px; color:var(--ink); overflow-x:auto; white-space:nowrap;
}
.eq b{ color:var(--cy); font-weight:600; }
.eq .why{ display:block; white-space:normal; font-family:var(--sans);
          font-size:14px; color:var(--mute); margin-top:8px; }

blockquote{
  border-left:3px solid var(--am); padding:6px 0 6px 18px; margin:22px 0;
  color:var(--ink); font-size:18px;
}
blockquote cite{ display:block; font-size:13px; font-family:var(--mono);
                 color:var(--mute); font-style:normal; margin-top:8px; }

/* ───────── nav ───────── */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(11,13,16,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-in{ max-width:1240px; margin:0 auto; padding:0 24px; height:56px;
         display:flex; align-items:center; gap:22px; }
.nav-brand{ font-family:var(--mono); font-size:12px; letter-spacing:.16em;
            text-transform:uppercase; color:var(--ink); border:0; white-space:nowrap; }
.nav-brand b{ color:var(--cy); }
.nav-links{ display:flex; gap:2px; margin-left:auto; overflow-x:auto; scrollbar-width:none; }
.nav-links::-webkit-scrollbar{ display:none; }
.nav-links a{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mute); padding:7px 10px; border:1px solid transparent; white-space:nowrap;
}
.nav-links a:hover{ color:var(--ink); border-color:var(--line); }
.nav-links a.on{ color:var(--cy); border-color:var(--cy-dim); background:#0d1a20; }

/* ───────── hero ───────── */
.hero{ border-bottom:1px solid var(--line); background:
  radial-gradient(1200px 500px at 70% -10%, #16222c 0%, transparent 60%), var(--bg); }
.hero-in{ max-width:1240px; margin:0 auto; padding:64px 24px 34px; }
.hero h1{ font-size:clamp(38px,7.2vw,86px); letter-spacing:-0.035em; margin-bottom:6px; }
.hero h1 span{ color:var(--cy); }
.hero .sub{ font-family:var(--mono); font-size:13px; letter-spacing:.16em;
            text-transform:uppercase; color:var(--mute); margin-bottom:22px; }
.hero .lede{ max-width:64ch; }
.pron{ display:inline-block; font-family:var(--mono); font-size:12px; color:var(--am);
       border:1px solid var(--line); padding:3px 8px; margin-left:8px; vertical-align:middle;
       letter-spacing:.06em; }

.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
        gap:1px; background:var(--line); border:1px solid var(--line); margin-top:34px; }
.fact{ background:var(--bg-2); padding:16px 18px; }
.fact b{ display:block; font-size:26px; font-family:var(--mono); color:var(--cy);
         letter-spacing:-0.02em; }
.fact span{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
            text-transform:uppercase; color:var(--mute); margin-top:4px; }

/* ═════════ 3D STAGE ═════════ */
.stage{
  position:relative; height:min(88vh,860px); min-height:540px;
  background:#0b0d10; border-bottom:1px solid var(--line); overflow:hidden;
}
.stage-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block;
               touch-action:none; cursor:grab; }
.stage-canvas:active{ cursor:grabbing; }
.stage-labels{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }

.v-label{
  position:absolute; transform:translate(10px,-50%); pointer-events:auto;
  display:flex; align-items:center; gap:7px;
  background:rgba(9,13,17,.86); border:1px solid var(--line-2);
  color:var(--ink-2); font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 8px 3px 5px; cursor:pointer;
  transition:opacity .2s, color .15s, border-color .15s; white-space:nowrap;
}
.v-label i{ width:5px; height:5px; background:var(--mute); display:block; }
.v-label:hover{ color:var(--ink); border-color:var(--cy-dim); }
.v-label.is-sel{ color:#04121a; background:var(--cy); border-color:var(--cy); }
.v-label.is-sel i{ background:#04121a; }

/* toolbar */
.v-bar{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  background:rgba(10,14,18,.9); border:1px solid var(--line-2);
  padding:10px 14px; backdrop-filter:blur(10px); z-index:6; max-width:calc(100% - 24px);
}
.v-slider{ display:flex; align-items:center; gap:10px; }
.v-slider label{ font-family:var(--mono); font-size:10px; letter-spacing:.16em;
                 text-transform:uppercase; color:var(--mute); }
.v-slider output{ font-family:var(--mono); font-size:11px; color:var(--cy); min-width:34px;
                  text-align:right; }
input[type=range]{
  -webkit-appearance:none; appearance:none; width:180px; height:3px;
  background:var(--line-2); outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:20px; background:var(--cy);
  cursor:grab; border:0;
}
input[type=range]::-moz-range-thumb{ width:14px; height:20px; background:var(--cy);
  cursor:grab; border:0; border-radius:0; }

.btn{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  background:transparent; color:var(--ink-2); border:1px solid var(--line-2);
  padding:7px 11px; cursor:pointer; transition:.14s; white-space:nowrap;
}
.btn:hover{ color:var(--ink); border-color:var(--cy-dim); background:#0d1a20; }
.btn[aria-pressed=true]{ background:var(--cy); color:#04121a; border-color:var(--cy); }
.btn.primary{ background:var(--cy); color:#04121a; border-color:var(--cy); font-weight:600; }
.btn.primary:hover{ background:#5fe4ff; color:#04121a; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--am); outline-offset:2px; }

/* part list */
.v-parts{
  position:absolute; left:0; top:0; bottom:0; width:224px; z-index:5;
  background:linear-gradient(90deg,rgba(9,12,15,.94),rgba(9,12,15,.55));
  border-right:1px solid var(--line); overflow-y:auto; padding:14px 0 90px;
}
.v-parts::-webkit-scrollbar{ width:6px; }
.v-parts::-webkit-scrollbar-thumb{ background:var(--line-2); }
.v-sys{ font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; color:var(--cy);
        padding:14px 16px 5px; text-transform:uppercase; }
.v-item{
  display:block; width:100%; text-align:left; background:none; border:0;
  border-left:2px solid transparent; color:var(--ink-2); font-family:var(--mono);
  font-size:11.5px; letter-spacing:.05em; padding:6px 16px; cursor:pointer; transition:.12s;
}
.v-item:hover{ color:var(--ink); background:rgba(49,217,255,.06); }
.v-item.on{ color:var(--cy); border-left-color:var(--cy); background:rgba(49,217,255,.1); }

/* info panel */
.v-panel{
  position:absolute; right:0; top:0; bottom:0; width:360px; z-index:5;
  background:rgba(9,12,15,.95); border-left:1px solid var(--line);
  overflow-y:auto; padding:22px 22px 92px; transform:translateX(100%);
  transition:transform .34s cubic-bezier(.2,.8,.2,1);
}
.v-panel.open{ transform:none; }
.v-panel::-webkit-scrollbar{ width:6px; }
.v-panel::-webkit-scrollbar-thumb{ background:var(--line-2); }
.v-panel .sys{ font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; color:var(--cy); }
.v-panel h3{ margin:6px 0 2px; font-size:24px; }
.v-panel .ir{ font-family:var(--mono); font-size:11px; color:var(--am); letter-spacing:.06em; }
.v-panel .tag{ font-size:15px; color:var(--ink); margin:10px 0 16px; line-height:1.45; }
.v-panel h5{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
             color:var(--am); margin:18px 0 5px; font-weight:600; }
.v-panel p{ font-size:14.5px; line-height:1.6; color:var(--ink-2); }
.v-close{ position:absolute; top:12px; right:14px; background:none; border:1px solid var(--line-2);
          color:var(--mute); width:26px; height:26px; cursor:pointer; font-family:var(--mono); }
.v-close:hover{ color:var(--ink); border-color:var(--cy-dim); }
.spec{ display:grid; grid-template-columns:auto 1fr; gap:1px; background:var(--line);
       border:1px solid var(--line); margin-top:10px; font-family:var(--mono); font-size:11.5px; }
.spec dt{ background:var(--panel); padding:6px 9px; color:var(--mute); white-space:nowrap; }
.spec dd{ background:var(--panel-2); padding:6px 9px; color:var(--ink); }

.v-hint{
  position:absolute; left:238px; top:16px; z-index:4; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.1em; color:var(--mute); text-transform:uppercase;
  pointer-events:none; max-width:280px; line-height:1.8;
}
.v-hint b{ color:var(--cy); }
.v-fallback{ position:absolute; inset:0; display:none; place-items:center; text-align:center;
             padding:40px; }
.stage.no-webgl .v-fallback{ display:grid; }
.stage.no-webgl .v-bar,.stage.no-webgl .v-parts,.stage.no-webgl .v-hint{ display:none; }

@media (max-width:1080px){
  .v-panel{ width:320px; }
  .v-hint{ display:none; }
}
@media (max-width:820px){
  .stage{ height:auto; min-height:0; }
  .stage-canvas{ position:relative; height:62vh; min-height:380px; }
  .v-parts{ position:relative; inset:auto; width:100%; height:auto; display:flex;
            overflow-x:auto; padding:8px; gap:6px; border-right:0;
            border-top:1px solid var(--line); background:var(--bg-2); }
  .v-sys{ display:none; }
  .v-item{ border:1px solid var(--line-2); border-left-width:1px; padding:6px 10px;
           white-space:nowrap; width:auto; }
  .v-item.on{ border-color:var(--cy); }
  .v-panel{ position:relative; inset:auto; width:100%; transform:none; display:none;
            border-left:0; border-top:1px solid var(--line); padding:20px 18px 30px; }
  .v-panel.open{ display:block; }
  .v-bar{ position:relative; left:auto; bottom:auto; transform:none; margin:0;
          border-left:0; border-right:0; border-bottom:0; }
  input[type=range]{ width:130px; }
}

/* ───────── sections ───────── */
section{ padding:84px 0; border-bottom:1px solid var(--line); }
section:nth-of-type(even){ background:var(--bg-2); }
.sec-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.sec-num{ font-family:var(--mono); font-size:12px; color:var(--cy); letter-spacing:.2em; }

/* anatomy cards */
.sys-block{ margin-top:44px; }
.sys-title{ display:flex; align-items:center; gap:14px; padding-bottom:10px;
            border-bottom:1px solid var(--line); margin-bottom:22px; }
.sys-title h3{ margin:0; font-family:var(--mono); font-size:15px; letter-spacing:.16em;
               text-transform:uppercase; color:var(--cy); }
.sys-title p{ font-size:14px; color:var(--mute); margin:0; }
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:1px;
        background:var(--line); border:1px solid var(--line); }
.card{ background:var(--panel); padding:22px; display:flex; flex-direction:column; }
.card:hover{ background:var(--panel-2); }
.card h4{ margin:0 0 2px; color:var(--ink); font-size:19px; font-family:var(--sans);
          text-transform:none; letter-spacing:-0.01em; }
.card .ir{ font-family:var(--mono); font-size:11px; color:var(--am); }
.card .tag{ font-size:14px; color:var(--cy); margin:8px 0 12px; }
.card p{ font-size:14.5px; color:var(--ink-2); margin-bottom:12px; }
.card .lbl{ font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; color:var(--am);
            text-transform:uppercase; display:block; margin-bottom:3px; }
.card .go{ margin-top:auto; align-self:flex-start; }

/* generic panel/figure */
.fig{ background:var(--panel); border:1px solid var(--line); padding:22px; margin:26px 0; }
.fig-head{ display:flex; align-items:center; justify-content:space-between; gap:16px;
           flex-wrap:wrap; margin-bottom:16px; }
.fig-head h4{ margin:0; color:var(--cy); }
.fig canvas{ display:block; width:100%; height:auto; background:#0a0e12;
             border:1px solid var(--line); }
.fig-cap{ font-family:var(--mono); font-size:11.5px; color:var(--mute); margin-top:12px;
          line-height:1.7; }
.ctrls{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.ctrls label{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--mute);
              text-transform:uppercase; }
select, input[type=number]{
  font-family:var(--mono); font-size:12px; background:var(--bg-2); color:var(--ink);
  border:1px solid var(--line-2); padding:6px 8px; }

.readout{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:1px;
          background:var(--line); border:1px solid var(--line); margin-top:14px; }
.readout div{ background:var(--bg-2); padding:12px 14px; }
.readout b{ display:block; font-family:var(--mono); font-size:20px; color:var(--cy); }
.readout span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:var(--mute);
               text-transform:uppercase; }

/* fingering chart */
.fing{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.fing button{ font-family:var(--mono); font-size:12px; padding:8px 12px; min-width:46px; }
.chart{ display:flex; gap:26px; align-items:flex-start; flex-wrap:wrap; }
.holes{ display:flex; flex-direction:column; gap:9px; align-items:center;
        background:var(--bg-2); border:1px solid var(--line); padding:18px 22px; }
.hole{ width:26px; height:26px; border:2px solid var(--line-2); border-radius:50%;
       display:grid; place-items:center; font-family:var(--mono); font-size:9px;
       color:var(--mute); transition:.16s; }
.hole.closed{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
.hole.back{ border-style:dashed; }
.hole.knee{ border-radius:0; width:44px; height:14px; font-size:8px; }
.chart-info{ flex:1; min-width:240px; }

/* tables */
table{ width:100%; border-collapse:collapse; font-size:14.5px; margin:22px 0; }
th,td{ border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; }
th{ background:var(--panel-2); font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--am); font-weight:600; }
td{ background:var(--panel); color:var(--ink-2); }
td:first-child{ color:var(--ink); font-family:var(--mono); font-size:13px; white-space:nowrap; }

/* lists */
ul.ticks, ol.steps{ margin:18px 0 18px 0; padding-left:0; list-style:none; }
ul.ticks li{ position:relative; padding-left:26px; margin-bottom:10px; color:var(--ink-2); }
ul.ticks li::before{ content:"▸"; position:absolute; left:4px; color:var(--cy);
                     font-family:var(--mono); }
ol.steps{ counter-reset:s; }
ol.steps li{ position:relative; padding-left:44px; margin-bottom:16px; color:var(--ink-2);
             counter-increment:s; }
ol.steps li::before{
  content:counter(s,decimal-leading-zero); position:absolute; left:0; top:1px;
  font-family:var(--mono); font-size:12px; color:var(--cy);
  border:1px solid var(--line-2); padding:2px 6px; }
ol.steps b{ color:var(--ink); }

dl.gloss{ display:grid; grid-template-columns:minmax(150px,auto) 1fr; gap:1px;
          background:var(--line); border:1px solid var(--line); font-size:14.5px; }
dl.gloss dt{ background:var(--panel-2); padding:11px 14px; font-family:var(--mono);
             font-size:13px; color:var(--cy); }
dl.gloss dd{ background:var(--panel); padding:11px 14px; color:var(--ink-2); }
@media (max-width:640px){ dl.gloss{ grid-template-columns:1fr; } }

/* timeline */
.tl{ border-left:1px solid var(--line-2); margin-left:8px; padding-left:26px; }
.tl-item{ position:relative; margin-bottom:30px; }
.tl-item::before{ content:""; position:absolute; left:-31px; top:9px; width:9px; height:9px;
                  background:var(--cy); }
.tl-item time{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--am); }
.tl-item h4{ margin:4px 0 4px; font-family:var(--sans); text-transform:none; color:var(--ink);
             font-size:18px; letter-spacing:-0.01em; }
.tl-item p{ font-size:14.5px; color:var(--ink-2); }

/* audio bar */
.audio{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:14px;
        background:var(--bg-2); border:1px solid var(--line); margin-top:16px; }
.audio .warn{ font-family:var(--mono); font-size:10.5px; color:var(--mute);
              letter-spacing:.08em; width:100%; }

/* footer */
footer{ padding:56px 0 70px; background:var(--bg); }
footer .wrap{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; }
footer p{ font-family:var(--mono); font-size:11.5px; color:var(--mute); line-height:1.9;
          letter-spacing:.04em; }
footer b{ color:var(--ink-2); }

.disclaimer{ border:1px solid var(--am); border-left-width:3px; background:#171208;
             padding:18px 20px; margin-top:30px; }
.disclaimer h4{ margin-top:0; }
.disclaimer p{ font-size:14px; color:var(--ink-2); }