/* Happy Lucky Fish Club — shared theme. No external fonts, no frameworks. */
:root{
  --void:#02070d;
  --panel:rgba(6,32,43,.55);
  --cy:#5ff6ff;
  --cy-dim:rgba(95,246,255,.62);
  --cy-faint:rgba(95,246,255,.16);
  --mag:#ff4fd8;
  --mag-dim:rgba(255,79,216,.55);
  --warn:#ffcf5a;
  --text:#eef6f8;      /* body copy: near-white cool grey (was teal-tinted #d3f4f7) */
  --muted:#c3d5da;     /* secondary text: light cool grey (was #8fb9c0) */
  --cy-text:#a8f8fc;   /* small cyan labels/HUD text: solid, brighter than --cy-dim (which stays for borders/glows) */
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono","Courier New",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --body-font:var(--sans); /* swap to var(--mono) for an all-terminal look */
  --hud-inset:clamp(8px,2vw,22px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100%;
  background:var(--void) radial-gradient(90% 60% at 50% 0%,#06202b 0%,var(--void) 70%) no-repeat;
  background-attachment:fixed;
  color:var(--text);font-family:var(--body-font);font-size:17px;line-height:1.65;font-weight:500;
}
@media (min-width:900px){body{font-size:18px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- atmosphere overlays (decorative, never block clicks) ---------- */
.scan,.vig,.hud-frame{position:fixed;inset:0;pointer-events:none;z-index:50}
.scan{background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.vig{background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.55))}
.hud-frame{inset:var(--hud-inset)}
.hud-frame::before,.hud-frame::after{content:"";position:absolute;width:26px;height:26px;border:1px solid var(--cy-dim)}
.hud-frame::before{top:0;left:0;border-right:0;border-bottom:0}
.hud-frame::after{bottom:0;right:0;border-left:0;border-top:0}
.hud-frame i::before,.hud-frame i::after{content:"";position:absolute;width:14px;height:14px;border:1px solid var(--mag-dim)}
.hud-frame i::before{top:0;right:0;border-left:0;border-bottom:0}
.hud-frame i::after{bottom:0;left:0;border-right:0;border-top:0}
/* content pages: lighter scanlines so long text stays readable */
.page .scan{opacity:.28}
.page .vig{opacity:.6}

.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--cy);color:var(--void);padding:8px 12px;font-family:var(--mono)}
.skip:focus{left:12px;top:12px}

/* ---------- links ---------- */
a{color:var(--cy);text-decoration-color:var(--cy-dim);text-underline-offset:3px}
a:hover{text-shadow:0 0 8px var(--cy);text-decoration-color:var(--cy)}
a:focus-visible,button:focus-visible,canvas:focus-visible{outline:1px dashed var(--cy);outline-offset:4px}

/* ---------- site header / nav ---------- */
.site-head{
  position:sticky;top:0;z-index:40;
  background:rgba(2,7,13,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid var(--cy-faint);
}
.site-head .bar{max-width:78rem;margin:0 auto;padding:10px calc(var(--hud-inset) + 18px);display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--mono);text-decoration:none;color:var(--cy);letter-spacing:.14em;text-transform:uppercase;font-size:13px;white-space:nowrap}
.brand img{width:44px;height:auto;border:1px solid var(--cy-faint)}
.brand small{display:block;font-size:11px;letter-spacing:.24em;color:var(--cy-text)}
.site-nav{display:flex;gap:6px;flex-wrap:wrap;margin:0;padding:0;border:0;font-family:var(--mono)}
.site-nav a{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--cy);
  background:rgba(95,246,255,.04);border:1px solid var(--cy-faint);padding:7px 10px;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  transition:background .2s,border-color .2s;
}
.site-nav a:hover{background:rgba(95,246,255,.12);border-color:var(--cy-dim)}
.site-nav a[aria-current=page]{background:var(--cy);color:var(--void);border-color:var(--cy);text-shadow:none}
@media (max-width:760px){
  .site-head .bar{padding:8px 14px;gap:8px}
  .site-nav{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:4px;scrollbar-width:thin}
  .site-nav a{white-space:nowrap}
}

/* ---------- content layout ---------- */
.wrap{max-width:60rem;margin:0 auto;padding:28px calc(var(--hud-inset) + 22px) 64px;position:relative;z-index:1}
@media (max-width:640px){.wrap{padding:20px 18px 56px}}
h1,h2,h3{font-family:var(--mono);font-weight:400;color:var(--cy);line-height:1.25}
h1{font-size:clamp(24px,4.4vw,40px);letter-spacing:.1em;text-transform:uppercase;text-shadow:0 0 18px rgba(95,246,255,.5);margin:.6em 0 .4em}
h2{font-size:clamp(18px,2.6vw,24px);letter-spacing:.06em;margin:2em 0 .6em;padding-top:.5em;border-top:1px solid var(--cy-faint)}
h2::before{content:"// ";color:var(--mag)}
h3{font-size:18px;letter-spacing:.05em;margin:1.6em 0 .5em;color:#9ff9ff}
h3::before{content:"> ";color:var(--cy-dim)}
[id]{scroll-margin-top:90px}
strong{color:#fff}
em{color:#d2fbfd}
code{font-family:var(--mono);font-size:.92em;color:var(--warn);background:rgba(255,207,90,.07);padding:1px 4px;border:1px solid rgba(255,207,90,.18)}
hr{border:0;border-top:1px dashed var(--cy-faint);margin:2.2em 0}
ul,ol{padding-left:1.4em}
li{margin:.3em 0}
li::marker{color:var(--cy-dim)}
img{max-width:100%;height:auto}
p img{display:block;border:1px solid var(--cy-faint);background:#fff}
blockquote{margin:1em 0;padding:.6em 1em;border-left:2px solid var(--mag);background:rgba(255,79,216,.05)}

/* cards and disclaimer callouts */
.disclaimer,.card,.callout{
  position:relative;margin:1.2em 0;padding:14px 16px;background:var(--panel);
  border:1px solid var(--cy-faint);
}
.disclaimer{border-color:rgba(255,207,90,.4);background:rgba(255,207,90,.05);font-size:.96em}
.disclaimer::before,.card::before,.callout::before{
  content:attr(data-tag);position:absolute;top:-9px;left:12px;padding:0 6px;background:var(--void);
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--warn)
}
.card::before,.callout::before{color:var(--cy-text)}
.card>h2:first-child,.card>h3:first-child{margin-top:.2em;border-top:0;padding-top:0}
.placeholder{border:1px dashed var(--mag);background:rgba(255,79,216,.06)}
.placeholder::before{color:var(--mag)}

/* jump bars (first <p> of links under the nav) */
.jump{font-family:var(--mono);font-size:14px;letter-spacing:.03em;line-height:2;color:var(--muted);padding:10px 12px;border:1px solid var(--cy-faint);background:rgba(95,246,255,.03)}

/* tables: scroll sideways on small screens instead of overflowing the page */
table{display:block;overflow-x:auto;max-width:100%;border-collapse:collapse;margin:1em 0;font-size:.95em;-webkit-overflow-scrolling:touch}
th,td{border:1px solid var(--cy-faint);padding:8px 10px;text-align:left;vertical-align:top}
th{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--cy);background:rgba(95,246,255,.07)}
tbody tr:nth-child(even) td{background:rgba(95,246,255,.025)}
tbody tr:hover td{background:rgba(95,246,255,.07)}

footer.site-foot,.wrap footer{
  margin-top:3em;padding-top:1em;border-top:1px solid var(--cy-faint);
  font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--muted)
}
.site-foot{max-width:60rem;margin:0 auto 40px;padding:16px calc(var(--hud-inset) + 22px) 0}

/* ---------- home hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;
  background:radial-gradient(90% 70% at 50% 85%,#06202b 0%,var(--void) 70%)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.hero canvas:active{cursor:grabbing}
.hero-fallback{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);width:min(78vw,640px);height:auto;opacity:.9;
  border:1px solid var(--cy-faint);box-shadow:0 0 40px rgba(95,246,255,.12)}
.holo-on .hero-fallback{display:none}
.no-holo .hero canvas{display:none}
.hero .hud{position:absolute;inset:var(--hud-inset);pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;z-index:2}
.hero .row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:14px 16px}
.hero .id small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.26em;color:var(--cy-text);text-transform:uppercase}
.hero .id h1{font-family:"Helvetica Neue",Arial,sans-serif;font-weight:200;font-size:clamp(24px,4.4vw,48px);letter-spacing:.14em;margin:6px 0 0;border:0}
.hero .id p{max-width:38ch;font-family:var(--mono);font-size:14px;line-height:1.6;color:#e2f4f6;margin:10px 0 0;text-shadow:0 0 6px rgba(2,4,14,.9)}
.hero .id .model{color:var(--cy)}
.tele{font-family:var(--mono);font-size:12px;line-height:1.85;text-align:right;color:var(--cy-text);font-variant-numeric:tabular-nums}
.tele b{color:var(--cy);font-weight:400}
.tele .sig{display:inline-flex;gap:2px;vertical-align:middle;margin-left:6px;align-items:flex-end}
.tele .sig i{width:3px;background:var(--cy);opacity:.25;transition:opacity .2s}
.tele .sig i.on{opacity:1}
.ctrl{pointer-events:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-family:var(--mono)}
.ctrl button,.ctrl a{
  font:inherit;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cy);text-decoration:none;
  background:rgba(2,7,13,.78);border:1px solid var(--cy-faint);padding:10px 14px;cursor:pointer;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:background .25s,border-color .25s,color .25s,text-shadow .25s;
}
.ctrl button:hover,.ctrl a:hover{background:rgba(95,246,255,.12);border-color:var(--cy-dim);text-shadow:0 0 8px var(--cy)}
.ctrl button[aria-pressed=true]{background:var(--cy);color:var(--void);border-color:var(--cy);text-shadow:none}
.ctrl .sep{width:1px;height:22px;background:var(--cy-faint);margin:0 4px}
.ctrl .enter{border-color:var(--mag-dim);color:#ffd0f4}
.status{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cy-text)}
.status b{color:var(--warn);font-weight:400}
.status .blink{animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.hint{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cy-text)}
/* JS-only controls stay hidden until holo.js confirms the canvas works */
html:not(.holo-on) .ctrl button,html:not(.holo-on) .ctrl .sep,html:not(.holo-on) .hint,html:not(.holo-on) .tele,html:not(.holo-on) .status{display:none}
@media (max-width:640px){
  .hero{height:92svh;min-height:480px}
  .tele{display:none}
  .hero .row{padding:10px 8px}
  .hero .bottom{flex-direction:column;align-items:flex-start}
  .ctrl button,.ctrl a{padding:9px 9px;font-size:11px;letter-spacing:.1em}
  .ctrl .sep{display:none}
  .hero .id p{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.status .blink{animation:none}}

/* home content below the hero */
.home .logo{display:block;max-width:420px;width:100%;border:1px solid var(--cy-faint);margin:1em 0}
.lead{font-size:1.08em;color:var(--text)}
ul.sitemap{list-style:none;padding:0}
ul.sitemap li{padding:10px 12px;border:1px solid var(--cy-faint);margin:8px 0;background:rgba(95,246,255,.03)}
ul.sitemap li a{font-family:var(--mono);letter-spacing:.06em}

/* print: drop the effects */
@media print{
  .scan,.vig,.hud-frame,.hero,.site-nav{display:none}
  body{background:#fff;color:#000}
  a,h1,h2,h3,strong{color:#000;text-shadow:none}
}
.h1-like{font-size:clamp(22px,3.6vw,34px);letter-spacing:.1em;text-transform:uppercase;border-top:0;text-shadow:0 0 18px rgba(95,246,255,.45)}
.h1-like::before{content:none}
.home .site-head{top:0}

/* ---------- tosakin page ---------- */
.btn{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:10px 14px;border:1px solid var(--mag-dim);color:#ffd0f4;background:rgba(255,79,216,.06);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.unc{font-family:var(--mono);font-size:.8em;color:var(--warn);white-space:nowrap}
.hint-line{font-family:var(--mono);font-size:14px;color:var(--cy-text)}
.ja,[lang=ja]{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","Noto Sans CJK JP","Noto Sans Mono CJK JP",sans-serif}
.ja-quote{color:var(--muted);font-size:.95em}
.tosa-fig{margin:1em 0 1.5em;border:1px solid var(--cy-faint);background:#02070d;padding:8px}
.tosa-fig figcaption{font-family:var(--mono);font-size:13px;letter-spacing:.03em;color:var(--muted);padding:8px 4px 2px}
.svg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tosa-fig svg{display:block;width:100%;height:auto}
@media (max-width:700px){.tosa-fig .tosa-top{min-width:680px}.tosa-fig.side svg{min-width:0}}
.tosa-fig .ln{fill:none;stroke:var(--cy);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.tosa-fig .thin{fill:none;stroke:var(--cy);stroke-width:1.6;opacity:.7}
.tosa-fig .fill{fill:#02070d;stroke:var(--cy);stroke-width:3;stroke-linejoin:round}
.tosa-fig .zone{fill:rgba(95,246,255,.04);stroke:none;transition:fill .2s}
.tosa-fig .ring{fill:none;stroke:var(--mag);stroke-width:2;stroke-dasharray:6 8;opacity:.8}
.tosa-fig .cross{fill:none;stroke:var(--cy);stroke-width:1;stroke-dasharray:4 10;opacity:.35}
.tosa-fig .dim{fill:none;stroke:var(--warn);stroke-width:2}
.tosa-fig .lead{fill:none;stroke:var(--warn);stroke-width:1.5;opacity:.85}
.tosa-fig .dot{fill:var(--warn)}
.tosa-fig text{font-family:var(--mono);fill:var(--text)}
.tosa-fig .en{font-size:28px;fill:var(--cy)}
.tosa-fig .ja{font-size:30px;fill:#fff}
.tosa-fig .ro{font-size:22px;fill:var(--muted)}
.tosa-side text{font-size:24px}
.tosa-side .ja{font-size:24px}
.tosa-side .ok{stroke:var(--cy);stroke-width:5;fill:none}
.tosa-side .bad{stroke:var(--mag);stroke-width:4;fill:none;stroke-dasharray:12 8}
.tosa-side .mag{fill:var(--mag)} .tosa-side .cy{fill:var(--cy)}
.tosa-top .part,.tosa-top .call,.tosa-top .fin{transition:opacity .2s}
.tosa-top .call{cursor:pointer;outline:none}
.tosa-top .part{cursor:pointer}
.tosa-top.has-hl .part:not(.hl),.tosa-top.has-hl .call:not(.hl),.tosa-top.has-hl .fin{opacity:.28}
.tosa-top .part.hl .zone{fill:rgba(95,246,255,.22)}
.tosa-top .part.hl .ln,.tosa-top .part.hl .fill,.tosa-top .part.hl .dim{stroke:#fff;filter:drop-shadow(0 0 6px rgba(95,246,255,.9))}
.tosa-top .part.hl .ring{stroke:#fff;opacity:1}
.tosa-top .call.hl .lead{stroke:var(--mag);stroke-width:3;opacity:1}
.tosa-top .call.hl .en{fill:#fff}
.tosa-top .call:focus-visible .en{text-decoration:underline}
table.parts td:nth-child(2){white-space:nowrap;font-size:1.05rem;color:#fff}
table.parts td:nth-child(3){white-space:nowrap;color:var(--muted)}
table.parts tr{cursor:pointer}
table.parts tr.hl td{background:rgba(95,246,255,.14)}
table.parts tr:focus-visible{outline:1px dashed var(--cy)}
.tosa-top .num{display:none}
.tosa-top .num circle{fill:#02070d;stroke:var(--warn);stroke-width:3}
.tosa-top .num text{font-size:28px;font-weight:700;fill:var(--warn)}
.tosa-top.compact .num{display:inline}
.tosa-top.compact .call>text,.tosa-top.compact .lead{display:none}
.tosa-top.compact .call.hl .num circle{fill:var(--mag);stroke:#fff}
.tosa-top.compact .call.hl .num text{fill:#fff}
.tosa-fig .tosa-top.compact{min-width:0}
.badge{display:inline-block;min-width:1.6em;text-align:center;font-family:var(--mono);font-size:11px;line-height:1.6em;border:1px solid var(--warn);color:var(--warn);border-radius:1em;margin-right:4px}
tr.hl .badge{background:var(--mag);border-color:#fff;color:#fff}
.tosa-top.has-hl .part:not(.hl),.tosa-top.has-hl .call:not(.hl),.tosa-top.has-hl .fin{opacity:.18}
.tosa-top .part.hl .zone{fill:rgba(95,246,255,.34)}
@media (max-width:700px){
  table.parts{display:block;overflow:visible}
  table.parts thead{display:none}
  table.parts tbody,table.parts tr,table.parts td{display:block}
  table.parts tr{border:1px solid var(--cy-faint);margin:10px 0;padding:6px 0}
  table.parts td{border:0;padding:4px 12px}
  table.parts td:nth-child(2),table.parts td:nth-child(3){display:inline-block;padding-top:0}
}

/* ---------- projector light: default 2049 (.light-pink.light-2049), ?light=pink (.light-pink), ?light=cyan (.light-cyan = base styles) — classes set by the inline <head> script in index.html ---------- */
.light-pink .hero{background:
  radial-gradient(55% 38% at 50% 92%,rgba(255,43,214,.16) 0%,transparent 70%),
  radial-gradient(90% 70% at 50% 85%,#0b1626 0%,var(--void) 70%)}
.light-2049 .hero{background:
  radial-gradient(60% 45% at 50% 95%,rgba(255,43,214,.30) 0%,rgba(255,43,214,0) 70%),
  radial-gradient(110% 80% at 50% 100%,rgba(150,40,200,.38) 0%,rgba(90,30,160,.12) 55%,transparent 80%),
  radial-gradient(80% 60% at 15% 10%,rgba(40,60,170,.22) 0%,transparent 70%),
  linear-gradient(180deg,#05081a 0%,#0d0820 55%,#1a0a2a 100%)}
.light-2049 .vig{background:radial-gradient(ellipse at center,transparent 55%,rgba(8,0,18,.6))}
.light-2049 .hero .id h1{text-shadow:0 0 18px rgba(95,246,255,.45),0 0 42px rgba(255,43,214,.25)}
/* keep the small HUD status text readable over the pink haze */
.light-pink .hint{opacity:1}
.light-2049 .status,.light-2049 .hint{color:#b4f3f8;text-shadow:0 0 6px rgba(6,3,20,.95),0 0 2px rgba(6,3,20,.95)}

/* diagram caption: shows the tapped part's number, name and definition (tosakin.js) */
.tosa-fig figcaption.cap-live{border-top:1px solid var(--cy-faint);margin-top:6px}
.cap-stack{display:grid;overflow:hidden;min-height:3.2em;transition:height .25s ease}
.cap-stack>div{grid-area:1/1;align-self:start;transition:opacity .2s ease}
.cap-orig{opacity:1}
.cap-info{opacity:0;visibility:hidden;color:var(--text);font-family:var(--body-font);font-size:15px;line-height:1.55;letter-spacing:0;overflow-wrap:anywhere}
.cap-on .cap-orig{opacity:0;visibility:hidden}
.cap-on .cap-info{opacity:1;visibility:visible}
.cap-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:4px}
.cap-num{display:inline-block;min-width:1.8em;padding:0 .35em;text-align:center;font-family:var(--mono);font-size:13px;line-height:1.8em;border-radius:1em;background:var(--mag);border:1px solid #fff;color:#fff;font-weight:700}
.cap-name strong{color:#fff}
.cap-ja{color:#fff}
.cap-ro{color:var(--muted)}
.cap-def{color:var(--text)}
@media (prefers-reduced-motion:reduce){.cap-stack,.cap-stack>div{transition:none}}

/* ---------- nav: "Varieties" dropdown (native <details>: tap / click / Enter opens it, no hover needed; nav.js only adds close-on-outside-tap and Escape) ---------- */
.nav-drop{position:relative}
.nav-drop>summary{
  list-style:none;cursor:pointer;user-select:none;-webkit-user-select:none;white-space:nowrap;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cy);
  background:rgba(95,246,255,.04);border:1px solid var(--cy-faint);padding:7px 10px;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  transition:background .2s,border-color .2s;
}
.nav-drop>summary::-webkit-details-marker{display:none}
.nav-drop>summary::after{content:"";display:inline-block;width:0;height:0;margin-left:8px;vertical-align:2px;
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--mag);transition:transform .2s}
.nav-drop[open]>summary::after{transform:rotate(180deg)}
.nav-drop>summary:hover,.nav-drop[open]>summary{background:rgba(95,246,255,.12);border-color:var(--cy-dim)}
.nav-drop.cur>summary{background:var(--cy);color:var(--void);border-color:var(--cy)}
.nav-drop.cur>summary::after{border-top-color:var(--void)}
.nav-drop>summary:focus-visible{outline:1px dashed var(--cy);outline-offset:3px}
.nav-panel{
  position:absolute;top:calc(100% + 8px);left:0;z-index:45;min-width:240px;
  display:flex;flex-direction:column;gap:6px;padding:10px;
  background:linear-gradient(rgba(95,246,255,.035),rgba(95,246,255,.035)),#02070d;border:1px solid var(--cy-dim);
  box-shadow:0 0 0 1px rgba(255,79,216,.18),0 12px 32px rgba(0,0,0,.6),0 0 24px rgba(95,246,255,.12);
}
.nav-panel::before{content:"// varieties";font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mag);padding:0 2px 2px}
.site-nav .nav-panel a{display:flex;justify-content:space-between;gap:14px;white-space:nowrap;padding:9px 12px}
.site-nav .nav-panel a span[lang]{text-transform:none;letter-spacing:.04em;color:var(--cy-text)}
.site-nav .nav-panel a[aria-current=page] span[lang]{color:var(--void)}
.site-nav .nav-panel a.all{border-style:dashed;color:var(--cy-text);background:transparent}
@media (max-width:760px){
  /* the nav row scrolls sideways on phones, so the panel hangs from the whole header instead (not clipped by the scroller) */
  .nav-drop{position:static}
  .nav-drop>summary{display:block}
  .nav-panel{top:calc(100% - 2px);left:14px;right:14px;min-width:0}
  .site-nav .nav-panel a{padding:12px 14px;font-size:13px}
}

/* ---------- home hero: "Parts diagram" link follows the selected model (holo.js setParts) ---------- */
.ctrl .parts{border-color:var(--cy-dim);background:linear-gradient(rgba(95,246,255,.16),rgba(95,246,255,.16)),rgba(2,7,13,.9);color:#e6feff}
.ctrl .parts:hover{background:linear-gradient(rgba(95,246,255,.26),rgba(95,246,255,.26)),rgba(2,7,13,.9)}
.ctrl .parts[aria-disabled=true]{border-style:dashed;border-color:var(--cy-dim);background:rgba(2,7,13,.86);color:var(--muted);cursor:default}
.ctrl .parts[aria-disabled=true]:hover{background:rgba(2,7,13,.86);border-color:var(--cy-dim);text-shadow:none}
html:not(.holo-on) .ctrl .parts{display:none}

/* variety pages: "View hologram" link directly above the top diagram */
.diag-tools{margin:.4em 0 .7em}

/* ---------- site search (search.js injects it; NoScript visitors get nothing) ---------- */
/* headings and rows land just below the sticky header (search.js measures it; NoScript keeps the 90px above) */
.has-search [id]{scroll-margin-top:var(--ss-hdr,90px)}
.ss-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ss-toggle{display:none}
.site-search{position:relative;flex:1 1 200px;min-width:190px;max-width:320px;margin-left:auto;font-family:var(--mono)}
.site-search input{
  width:100%;box-sizing:border-box;font:inherit;font-size:13px;letter-spacing:.04em;color:#f4fbfc;
  background:rgba(2,7,13,.92);border:1px solid var(--cy-dim);padding:8px 10px 8px 32px;border-radius:0;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%235ff6ff' stroke-width='2'/%3E%3Cpath d='M15.5 15.5 21 21' stroke='%23ff4fd8' stroke-width='2.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:9px 50%;background-size:16px 16px;
  -webkit-appearance:none;appearance:none;
}
.site-search input::placeholder{color:#a9c3c9;opacity:1}
.site-search input:focus{outline:none;border-color:var(--cy);box-shadow:inset 0 0 0 1px var(--cy),0 0 14px rgba(95,246,255,.25)}
.site-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:14px;height:14px;cursor:pointer;
  background:linear-gradient(45deg,transparent 43%,var(--mag) 43%,var(--mag) 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,var(--mag) 43%,var(--mag) 57%,transparent 57%)}
.ss-list{
  position:absolute;top:calc(100% + 8px);right:0;z-index:46;width:min(480px,calc(100vw - 28px));max-height:min(70vh,560px);overflow-y:auto;
  display:flex;flex-direction:column;gap:4px;padding:8px;box-sizing:border-box;
  background:linear-gradient(rgba(95,246,255,.035),rgba(95,246,255,.035)),#02070d;border:1px solid var(--cy-dim);
  box-shadow:0 0 0 1px rgba(255,79,216,.18),0 12px 32px rgba(0,0,0,.6),0 0 24px rgba(95,246,255,.12);
}
.ss-list[hidden]{display:none}
.ss-list::before{content:"// results";font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mag);padding:0 4px 2px}
.ss-opt{display:block;padding:9px 11px;text-decoration:none;color:var(--text);border:1px solid transparent;border-left:2px solid var(--cy-faint);font-family:var(--sans);line-height:1.4}
.ss-opt:hover,.ss-opt[aria-selected=true]{background:rgba(95,246,255,.10);border-color:var(--cy-dim);border-left-color:var(--mag);text-shadow:none}
.ss-opt[aria-selected=true]{outline:1px dashed var(--cy);outline-offset:-3px}
.ss-page{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cy-text)}
.ss-head{display:block;font-family:var(--mono);font-size:14px;color:#f4fbfc;margin:2px 0 3px}
.ss-parent{color:var(--muted)}
.ss-snip{display:block;font-size:13px;color:#dfeaed}
.ss-list mark{background:rgba(255,79,216,.28);color:#fff;padding:0 1px;box-shadow:inset 0 -1px 0 var(--mag)}
.ss-page mark,.ss-head mark{background:transparent;color:#ffd0f4;box-shadow:inset 0 -1px 0 var(--mag)}
.ss-empty{padding:10px 11px;font-size:13px;color:var(--muted)}
@media (max-width:760px){
  /* phones: an icon in the brand row opens a full-width search row under the (sideways-scrolling) nav */
  .ss-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;width:44px;height:36px;padding:0;cursor:pointer;
    color:var(--cy);background:rgba(95,246,255,.04);border:1px solid var(--cy-dim);
    clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
  .ss-toggle[aria-expanded=true]{background:var(--cy);color:var(--void);border-color:var(--cy)}
  .ss-toggle:focus-visible{outline:1px dashed var(--cy);outline-offset:3px}
  .site-search{display:none;flex:1 1 100%;max-width:none;min-width:0;margin:2px 0 2px}
  .ss-open .site-search{display:block}
  .site-search input{font-size:16px;padding:10px 12px 10px 34px}   /* 16px stops iOS zooming on focus */
  .ss-list{left:0;right:0;width:auto;max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px)}
  .ss-opt{padding:11px 12px}
}
@media print{.site-search,.ss-toggle{display:none}}