/* =====================================================================
   BLIGHT AUDIO — technical drawing sheet
   Three grounds share the same tokens: ink (black), paper, blueprint.
   ===================================================================== */
:root {
  --bg: #0F0F0F;
  --ink: #E0DDE8;
  --ink2: rgba(224, 221, 232, .64);
  --ink3: rgba(224, 221, 232, .36);
  --line: rgba(224, 221, 232, .52);
  --grid: rgba(255, 255, 255, .026);
  --grid2: rgba(255, 255, 255, .052);
  --panel1: #18181B;
  --panel2: #0E0E10;
  --hi: rgba(255, 255, 255, .07);
  --acc: #FF3B2F;
  --solid-fg: #0F0F0F;

  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --head: "Archivo", "Arial Narrow", sans-serif;
  --pad: clamp(16px, 4vw, 64px);
  --frame: 12px;
}
:root[data-theme="paper"] {
  --bg: #ECE8DF;
  --ink: #17171A;
  --ink2: rgba(23, 23, 26, .68);
  --ink3: rgba(23, 23, 26, .40);
  --line: rgba(23, 23, 26, .60);
  --grid: rgba(23, 23, 26, .045);
  --grid2: rgba(23, 23, 26, .085);
  --panel1: #F4F1EA;
  --panel2: #E6E1D6;
  --hi: rgba(255, 255, 255, .6);
  --acc: #D7261B;
  --solid-fg: #ECE8DF;
}
:root[data-theme="blue"] {
  --bg: #0C2340;
  --ink: #DCE9F7;
  --ink2: rgba(220, 233, 247, .70);
  --ink3: rgba(220, 233, 247, .40);
  --line: rgba(220, 233, 247, .58);
  --grid: rgba(220, 233, 247, .045);
  --grid2: rgba(220, 233, 247, .09);
  --panel1: #112C4F;
  --panel2: #0B2140;
  --hi: rgba(255, 255, 255, .08);
  --acc: #FFB547;
  --solid-fg: #0C2340;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  position: relative;
  margin: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid2) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid2) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  color: var(--ink);
  font: 400 15px/1.6 var(--mono);
  overflow-x: hidden;
  transition: background-color .4s, color .4s;
}
::selection { background: var(--ink); color: var(--bg); }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* ------------------------------------------------------------ TECH layer */
#tk-layer { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 5; overflow: visible; }
.tk-line { fill: none; stroke: var(--line); stroke-width: 1; }
.tk-dash { stroke-dasharray: 4 4; }
.tk-axis { stroke: var(--ink3); stroke-dasharray: 14 3 2 3; }
.tk-mask { fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: square;
  transition: stroke-dashoffset var(--t) cubic-bezier(.65, 0, .25, 1) var(--d); }
.tk-mask.go { stroke-dashoffset: 0; }
.tk-text { font: 500 10.5px var(--mono); letter-spacing: .06em; fill: var(--ink2); opacity: 0;
  transition: opacity .25s var(--d); }
.tk-text { paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.tk-dimtext { fill: var(--ink3); }
.tk-dot { fill: var(--ink); opacity: 0; transition: opacity .3s; }
.tk.on .tk-text, .tk.on .tk-dot { opacity: 1; }
.instant, .instant * { transition: none !important; }

/* ------------------------------------------------------------ frame + crosshair */
#frame { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }
#frame .fr { fill: none; stroke: var(--line); stroke-width: 1; }
#frame .fz { font: 500 9px var(--mono); fill: var(--ink3); text-anchor: middle; dominant-baseline: middle; }
#xhair { position: fixed; inset: 0; pointer-events: none; z-index: 39; opacity: 0; transition: opacity .2s; }
#xhair.on { opacity: 1; }
#xhair i { position: absolute; background: var(--ink3); opacity: .5; }
.xh-h { left: 0; right: 0; height: 1px; top: 0; }
.xh-v { top: 0; bottom: 0; width: 1px; left: 0; }
.xh-read { position: absolute; left: 0; top: 0; font: 500 10px var(--mono); color: var(--ink2);
  background: var(--bg); padding: 2px 6px; border: 1px solid var(--ink3); white-space: nowrap; }
@media (pointer: coarse) { #xhair { display: none; } }

/* ------------------------------------------------------------ nav */
#nav {
  position: fixed; z-index: 50; top: var(--frame); left: var(--frame); right: var(--frame);
  display: flex; align-items: center; gap: 24px;
  padding: 14px calc(var(--pad) - var(--frame));
  background: transparent;
  transition: background .3s;
}
#nav.scrolled { background: color-mix(in srgb, var(--bg) 94%, transparent); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 13px var(--mono); letter-spacing: .14em; }
.brand em { font-style: normal; color: var(--ink3); margin: 0 2px; }
.logo-mark { width: 26px; height: 26px; background: var(--ink); display: inline-block;
  -webkit-mask: url(../img/blight_logo.png) center / contain no-repeat;
          mask: url(../img/blight_logo.png) center / contain no-repeat; }
.logo-mark.big { width: 64px; height: 64px; opacity: .85; }
.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a { text-decoration: none; font: 500 12px var(--mono); letter-spacing: .1em; color: var(--ink2); white-space: nowrap; transition: color .2s; }
.nav-links a b { color: var(--ink3); font-weight: 500; margin-right: 4px; }
.nav-links a:hover, .nav-links a.act { color: var(--ink); }
.nav-links a.act b { color: var(--acc); }
.theme-btn { font: 500 11px var(--mono); letter-spacing: .1em; color: var(--ink2); background: none;
  border: 1px solid var(--ink3); padding: 6px 10px; cursor: pointer; }
.theme-btn + .theme-btn { margin-left: -16px; }
.theme-btn:hover { color: var(--ink); border-color: var(--ink2); }
.theme-btn span { color: var(--ink); }

/* ------------------------------------------------------------ sheets */
main { position: relative; z-index: 1; }
.sheet { position: relative; padding: 120px var(--pad) 80px; max-width: 1360px; margin: 0 auto; }
.sh { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 0 22px; margin-bottom: 64px; }
.sh-no { grid-row: span 2; font: 700 13px var(--mono); border: 1px solid var(--line); padding: 10px 12px; letter-spacing: .1em; align-self: start; }
.sh h2 { margin: 0; font: 800 clamp(44px, 7vw, 96px)/.86 var(--head); font-stretch: 62%; letter-spacing: .01em; }
.sh-desc { margin: 10px 0 0; color: var(--ink2); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

/* ------------------------------------------------------------ hero */
.hero { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 40px; padding-top: 110px; }
.eyebrow { display: block; width: fit-content; font-size: 11.5px; letter-spacing: .16em; color: var(--ink2); margin: 0 0 18px; }
.hero-title { display: block; width: fit-content; white-space: nowrap; margin: 0; font: 900 clamp(110px, 17vw, 250px)/.8 var(--head); font-stretch: 62%; letter-spacing: -.005em; }
.hero-sub { max-width: 440px; color: var(--ink2); margin: 46px 0 34px; font-size: 14px; }
.hero-stats { display: flex; gap: 34px; padding: 0; margin: 0 0 44px; list-style: none; flex-wrap: wrap; }
.hero-stats li { display: flex; flex-direction: column; padding: 2px 4px; }
.hero-stats b { font: 800 34px/1 var(--head); font-stretch: 75%; }
.hero-stats span { font-size: 10.5px; letter-spacing: .14em; color: var(--ink2); margin-top: 6px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-fig { margin: 0; }
#knob { width: 100%; height: auto; overflow: visible; }

/* knob drawing */
#knob .dr { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 1.4s cubic-bezier(.65, 0, .25, 1) forwards; }
#knob .dr.thin { stroke-width: .8; stroke: var(--ink2); }
#knob .dr.thick { stroke-width: 2.4; }
#knob .hatchfill { fill: url(#hatch); }
#knob .hatch { stroke: var(--ink3); stroke-width: 1; }
#knob .cl { stroke: var(--ink3); stroke-width: .8; stroke-dasharray: 16 3 2 3; }
#knob .proj { stroke: var(--ink3); stroke-width: .6; stroke-dasharray: 2 4; }
#knob .hidden { fill: none; stroke: var(--ink2); stroke-width: .9; stroke-dasharray: 5 3; }
#knob .dim { stroke: var(--ink2); stroke-width: .8; fill: none; }
#knob .ticks line { stroke: var(--ink); stroke-width: 1.2; }
#knob .ticks line.mn { stroke: var(--ink3); }
#knob .knurl line { stroke: var(--ink3); stroke-width: .7; }
#knob .fillc { fill: var(--ink); }
#knob .lbl { font: 500 11px var(--mono); fill: var(--ink2); letter-spacing: .06em; }
#knob .lbl.mid { text-anchor: middle; }
#knob .lbl.end { text-anchor: end; }
#knob .dimtx { fill: var(--ink3); font-size: 10px; }
#knob .readout { font: 700 13px var(--mono); fill: var(--ink); text-anchor: middle; letter-spacing: .12em; }
#knob .cl, #knob .proj, #knob .hidden, #knob .dim, #knob text, #knob .ticks, #knob .knurl, #knob .fillc {
  opacity: 0; animation: fade .6s ease forwards .9s; }
#knobPtr { transform-origin: 190px 220px; transform-box: view-box; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

/* ------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer;
  font: 700 12px var(--mono); letter-spacing: .12em; color: var(--ink);
  padding: 13px 18px; border: 1px solid var(--line); background: transparent;
  transition: background .2s, color .2s, border-color .2s; }
.btn:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.btn.solid { background: var(--ink); color: var(--solid-fg); border-color: var(--ink); }
.btn.solid:hover { background: transparent; color: var(--ink); }

/* ------------------------------------------------------------ window + panel */
.win { border: 1px solid var(--ink3); background: linear-gradient(var(--panel1), var(--panel2)); border-radius: 6px;
  box-shadow: inset 0 1px 0 var(--hi); }
.win-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--ink3);
  font: 500 11px var(--mono); letter-spacing: .08em; color: var(--ink2); }
.win-bar i { width: 7px; height: 7px; border: 1px solid var(--ink3); border-radius: 50%; }
.win-bar span { margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-bar em { margin-left: auto; font-style: normal; color: var(--ink3); }
.shot { position: relative; padding: 10px; }
.shot img { width: 100%; height: auto; border-radius: 3px; }
.hs { position: absolute; width: 1px; height: 1px; }

.feature { display: grid; grid-template-columns: 1.45fr 1fr; gap: 56px; align-items: start; margin-bottom: 110px; }
.feature-info h3 { font: 900 64px/.9 var(--head); font-stretch: 62%; margin: 8px 0 18px; }
.feature-info p { color: var(--ink2); font-size: 14px; }
.tag { font-size: 11px !important; letter-spacing: .14em; color: var(--ink) !important; display: flex; align-items: center; gap: 8px; margin: 0; }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.spec { width: 100%; border-collapse: collapse; margin: 22px 0 28px; font-size: 12px; }
.spec th, .spec td { text-align: left; padding: 9px 0; border-top: 1px solid var(--ink3); vertical-align: top; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 1px solid var(--ink3); }
.spec th { color: var(--ink3); font-weight: 500; letter-spacing: .12em; width: 30%; }

/* ------------------------------------------------------------ cards */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 36px; }
.card { display: flex; flex-direction: column; }
.card .art { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--ink3); border-radius: 6px;
  background: linear-gradient(var(--panel1), var(--panel2)); box-shadow: inset 0 1px 0 var(--hi); overflow: hidden; }
.card .art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.card .art svg * { vector-effect: non-scaling-stroke; }
.card .art .ph { stroke: var(--ink3); stroke-width: 1; fill: none; }
.card .art .ph-t { font: 500 10px var(--mono); fill: var(--ink3); letter-spacing: .1em; }
.card .meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; font-size: 10.5px; letter-spacing: .14em; color: var(--ink3); }
.card h3 { font: 800 34px/1 var(--head); font-stretch: 70%; margin: 6px 0 8px; }
.card p { color: var(--ink2); font-size: 13px; margin: 0 0 16px; flex: 1; }
.card .btn { align-self: flex-start; }

/* ------------------------------------------------------------ beats (BOM) */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.filters button { font: 500 11px var(--mono); letter-spacing: .1em; color: var(--ink2); background: none;
  border: 1px solid var(--ink3); padding: 7px 11px; cursor: pointer; }
.filters button.act { color: var(--solid-fg); background: var(--ink); border-color: var(--ink); }
.bom { border: 1px solid var(--line); }
.bom-head, .row { display: grid; grid-template-columns: 52px 1fr 130px 70px 70px 150px; align-items: center; gap: 12px; padding: 0 14px; }
.bom-head { height: 36px; font-size: 10.5px; letter-spacing: .14em; color: var(--ink3); border-bottom: 1px solid var(--line); }
.row { position: relative; min-height: 58px; border-bottom: 1px solid var(--ink3); font-size: 13px; cursor: pointer; transition: background .15s; }
.row:last-child { border-bottom: 0; }
.row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.row .no { color: var(--ink3); }
.row .nm { font-weight: 500; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .nm small { display: block; color: var(--ink3); font-size: 10.5px; letter-spacing: .1em; }
.row .g, .row .bpm, .row .dur { color: var(--ink2); font-size: 12px; }
.row .act { display: flex; gap: 6px; justify-content: flex-end; }
.row .act a, .row .act button { font: 700 10.5px var(--mono); letter-spacing: .1em; padding: 7px 10px; border: 1px solid var(--ink3);
  color: var(--ink); background: none; cursor: pointer; text-decoration: none; }
.row .act a:hover, .row .act button:hover { border-color: var(--ink); }
.row .prog { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--acc); width: 0; }
.row.playing { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.row.playing .no { color: var(--acc); }
.lic { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; margin-top: 44px; }
.lic div { display: flex; flex-direction: column; padding: 2px 4px; }
.lic b { font: 800 22px/1 var(--head); font-stretch: 75%; }
.lic span { font-size: 11px; color: var(--ink2); margin-top: 6px; }
.lic .btn { margin-left: auto; }

/* ------------------------------------------------------------ works */
.credits { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 120px; margin: 10px 0 110px; }
.cr-col { display: flex; flex-direction: column; gap: 26px; }
.cr-col:first-child { align-items: flex-end; }
.cr-col:last-child { align-items: flex-start; }
.node { display: inline-block; font: 800 26px/1 var(--head); font-stretch: 70%; letter-spacing: .02em; padding: 10px 14px; border: 1px solid var(--ink3); background: var(--bg); }
.node.core { font-size: 44px; padding: 16px 22px; border-color: var(--ink); }
#spotWin { max-width: 900px; }
#spotWin iframe { display: block; border: 0; padding: 10px; }

/* ------------------------------------------------------------ apply form */
.spec-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 28px; padding: 30px;
  border: 1px solid var(--line); background: linear-gradient(var(--panel1), var(--panel2)); border-radius: 6px; }
.f { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.f.wide, .form-act.wide { grid-column: 1 / -1; }
.f > span, .f legend { font-size: 10.5px; letter-spacing: .14em; color: var(--ink3); padding: 0; }
.f input, .f textarea { font: 400 14px var(--mono); color: var(--ink); background: transparent; border: 0;
  border-bottom: 1px solid var(--ink3); padding: 8px 0; outline: none; border-radius: 0; resize: vertical; }
.f input:focus, .f textarea:focus { border-bottom-color: var(--ink); }
.f input.bad { border-bottom-color: var(--acc); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-block; font: 500 11px var(--mono); letter-spacing: .1em; color: var(--ink2);
  border: 1px solid var(--ink3); padding: 8px 12px; cursor: pointer; transition: all .15s; }
.chips input:checked + span { background: var(--ink); color: var(--solid-fg); border-color: var(--ink); }
.chips input:focus-visible + span { outline: 1px solid var(--ink); outline-offset: 2px; }
.form-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.form-note { flex: 1 1 260px; margin: 0; font-size: 11px; color: var(--ink3); }

/* ------------------------------------------------------------ title block */
.tblock { position: relative; z-index: 1; display: grid; grid-template-columns: 96px repeat(4, 1fr) 2fr 1.4fr 1fr;
  margin: 60px var(--pad) calc(var(--frame) + 40px); max-width: calc(1360px - 2 * var(--pad)); border: 1px solid var(--line); }
@media (min-width: 1360px) { .tblock { margin-left: auto; margin-right: auto; } }
.tb-cell { padding: 10px 12px; border-right: 1px solid var(--ink3); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tb-cell:last-child { border-right: 0; }
.tb-cell small { font-size: 9.5px; letter-spacing: .16em; color: var(--ink3); }
.tb-cell b { font: 700 13px var(--mono); letter-spacing: .08em; }
.tb-cell b.norm { font-weight: 500; font-size: 12px; letter-spacing: .02em; }
.tb-cell a { font-size: 12px; text-decoration: none; color: var(--ink2); overflow-wrap: anywhere; }
.tb-cell a:hover { color: var(--ink); text-decoration: underline; }
.tb-logo { align-items: center; justify-content: center; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 130px; }
  .hero-fig { max-width: 560px; }
  .feature { grid-template-columns: 1fr; }
  .grid3 { grid-template-columns: repeat(2, 1fr); }
  .credits { gap: 60px; }
  .tblock { grid-template-columns: 80px repeat(4, 1fr); }
  .tb-wide { grid-column: span 2; border-top: 1px solid var(--ink3); }
  .tblock .tb-cell:last-child { border-top: 1px solid var(--ink3); }
}
@media (max-width: 760px) {
  :root { --frame: 0px; }
  #frame { display: none; }
  body { font-size: 14px; }
  #nav { flex-wrap: wrap; gap: 10px 14px; padding: 12px 16px; }
  .nav-links { order: 3; width: 100%; margin: 0; gap: 16px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .nav-links::-webkit-scrollbar { display: none; }
  .theme-btn { margin-left: auto; }
  #motionBtn { display: none; }
  .sheet { padding: 96px 16px 56px; }
  .hero { padding-top: 140px; }
  .hero-sub { margin-top: 40px; }
  .sh { margin-bottom: 40px; }
  .grid3 { grid-template-columns: 1fr; }
  .bom-head { display: none; }
  .row { grid-template-columns: 34px 1fr auto; padding: 10px 12px; gap: 4px 10px; }
  .row .g, .row .bpm, .row .dur { display: none; }
  .row .act { grid-column: 3; grid-row: 1; }
  .credits { grid-template-columns: 1fr; gap: 14px; justify-items: center; margin-bottom: 70px; }
  .cr-col { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; align-items: center !important; }
  .cr-mid { order: -1; margin-bottom: 10px; }
  .node { font-size: 20px; }
  .spec-form { grid-template-columns: 1fr; padding: 20px; }
  .lic .btn { margin-left: 0; }
  .tblock { grid-template-columns: 1fr 1fr; margin: 40px 16px 30px; }
  .tb-logo { grid-column: span 2; border-right: 0; border-bottom: 1px solid var(--ink3); }
  .tb-cell { border-bottom: 1px solid var(--ink3); }
  .tb-wide { grid-column: span 2; }
}
html.rm { scroll-behavior: auto; }
html.rm #knob .dr { animation: none; stroke-dashoffset: 0; }
html.rm #knob * { animation: none !important; opacity: 1 !important; }
html.rm .dot-live { animation: none; }

/* local drawing layer (moves with pinned sections) */
[data-tk-layer] { position: relative; }
.tk-local { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 5; }

/* =====================================================================
   LOOK — Edit Kit's Blight_Look: vignette, grain, red glow, white glow
   ===================================================================== */
:root { --glow: 0 0 18px rgba(255, 255, 255, .22), 0 0 2px rgba(255, 255, 255, .35); --glowf: drop-shadow(0 0 5px rgba(255, 255, 255, .32)); --vig: rgba(0, 0, 0, .62); --grainA: .07; }
:root[data-theme="paper"] { --glow: none; --glowf: none; --vig: rgba(80, 60, 30, .16); --grainA: .09; }
:root[data-theme="blue"] { --glow: 0 0 18px rgba(170, 210, 255, .25); --glowf: drop-shadow(0 0 5px rgba(170, 210, 255, .35)); --vig: rgba(0, 8, 24, .55); }

#bgfx { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.vig { position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, var(--vig) 100%); }
.redglow { position: fixed; left: 50%; bottom: -45vh; width: 120vw; height: 80vh; transform: translateX(-50%); z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 20%, transparent), color-mix(in srgb, var(--acc) 6%, transparent) 55%, transparent 100%); opacity: .55; }
:root[data-theme="paper"] .redglow { opacity: .25; }
.grain { position: fixed; inset: -6%; z-index: 60; pointer-events: none; opacity: calc(var(--grainA) * .55);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 9 -4.5  0 0 0 9 -4.5  0 0 0 9 -4.5  0 0 0 0 .55'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain .9s steps(5) infinite; will-change: transform; }
@keyframes grain { 0% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(-3%, 2%, 0); } 40% { transform: translate3d(2%, -3%, 0); }
  60% { transform: translate3d(-2%, -1%, 0); } 80% { transform: translate3d(3%, 3%, 0); } 100% { transform: translate3d(0, 0, 0); } }

.hero-title, .sh h2, .feature-info h3, .node.core, .hero-stats b { text-shadow: var(--glow); }
.tk-link .tk-line { stroke: color-mix(in srgb, var(--acc) 75%, transparent); }
.tk-link .tk-dot { fill: var(--acc); }

/* 3D hero */
.hero-fig.has3d #knob { display: none; }
.k3 { position: relative; width: 100%; aspect-ratio: 560 / 470; }
.k3 canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.k3 svg.k3-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.k3-lab { position: absolute; left: 0; top: 0; font: 500 10.5px var(--mono); letter-spacing: .08em; color: var(--ink2); white-space: nowrap;
  text-shadow: 0 0 4px var(--bg), 0 0 4px var(--bg); pointer-events: none; will-change: transform, opacity; }
.k3-lab b { color: var(--ink); font-weight: 700; margin-right: 6px; }
.k3-read { display: flex; justify-content: center; gap: 26px; font: 700 12px var(--mono); letter-spacing: .12em; margin-top: 4px; }
.k3-read span { color: var(--ink3); font-weight: 500; }
.k3-cap { text-align: left; font: 500 10px var(--mono); color: var(--ink3); letter-spacing: .08em; margin-top: 10px; }

html.rm .grain { animation: none; }

/* motion helpers */
.ch, .wd { display: inline-block; }
.wbox { display: inline-block; white-space: nowrap; }
.sh { position: relative; }
.sh.wipe::after { content: ""; position: absolute; left: 0; right: 0; bottom: -22px; height: 1px; background: linear-gradient(90deg, var(--acc), transparent 70%);
  transform: scaleX(0); transform-origin: left; opacity: .8; transition: transform 1.1s cubic-bezier(.12, 0, .1, 1), opacity 1.6s ease 1.1s; }
.sh.wipe.go::after { transform: scaleX(1); opacity: .35; }
.hero { z-index: 3; }

/* =====================================================================
   KINETIC TOUR — TANITIM + ODAK
   ===================================================================== */
.kt { position: relative; height: 100vh; display: grid; grid-template-columns: minmax(260px, 29%) 1fr; grid-template-rows: auto 1fr;
  gap: 0 52px; align-items: center; padding: 86px 0 36px; }
.kt-hud, .ch-hud { grid-column: 1 / -1; align-self: start; display: flex; justify-content: space-between; gap: 20px;
  font: 500 11px var(--mono); letter-spacing: .12em; color: var(--ink3); border-bottom: 1px solid var(--ink3); padding-bottom: 10px; }
.kt-hud b, .ch-hud b { color: var(--ink); font-weight: 700; }
.kt-hud span:last-child, .ch-hud span:last-child { color: var(--ink); }
.kt-cap { position: relative; height: 330px; }
.kt-step { position: absolute; inset: 0; opacity: 0; transform: translateY(16px); filter: blur(8px);
  transition: opacity .45s, transform .6s cubic-bezier(.12, 0, .1, 1), filter .45s; pointer-events: none; }
.kt-step.on { opacity: 1; transform: none; filter: none; }
.kt-no { font: 900 120px/1 var(--head); font-stretch: 62%; color: transparent; -webkit-text-stroke: 1px var(--ink2); }
.kt-step h3 { font: 900 50px/.92 var(--head); font-stretch: 62%; margin: 8px 0 14px; text-shadow: var(--glow); }
.kt-step p { color: var(--ink2); font-size: 14px; max-width: 340px; margin: 0; }
.kt-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink3); }
.kt-prog i { display: block; height: 1px; background: var(--acc); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 8px var(--acc); }
.kt-view { perspective: 1700px; perspective-origin: 50% 40%; align-self: center; }
.kt-tilt { transform-style: preserve-3d; will-change: transform; opacity: 0; }
.kt .win { box-shadow: 0 50px 120px rgba(0, 0, 0, .55), inset 0 1px 0 var(--hi); }
.kt .shot { overflow: hidden; }
.kt-cam { position: relative; transform-origin: 0 0; will-change: transform; }
.kt-ov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.kt-dim { fill: rgba(0, 0, 0, .66); opacity: 0; }
:root[data-theme="paper"] .kt-dim { fill: rgba(30, 26, 20, .45); }
.kt-frame { fill: none; stroke: var(--acc); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; }
.feature.tour { grid-template-columns: 1fr; margin-top: 40px; }
.feature.tour .feature-info { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; align-items: start; }
.feature.tour .feature-info .spec { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }

/* =====================================================================
   SİNYAL ZİNCİRİ
   ===================================================================== */
.chain { position: relative; margin: 20px 0 130px; padding-bottom: 80px; }
.ch-row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 72px; margin-top: 46px; }
.ch-node { border: 1px solid var(--ink3); border-radius: 6px; padding: 10px 10px 8px; background: linear-gradient(var(--panel1), var(--panel2));
  box-shadow: inset 0 1px 0 var(--hi); transition: border-color .35s, box-shadow .35s, transform .5s cubic-bezier(.12, 0, .1, 1); }
.ch-node.on { border-color: var(--ink); transform: translateY(-4px);
  box-shadow: inset 0 1px 0 var(--hi), 0 0 0 1px color-mix(in srgb, var(--ink) 60%, transparent), 0 18px 50px rgba(0, 0, 0, .45), 0 0 34px color-mix(in srgb, var(--ink) 14%, transparent); }
.ch-top { display: flex; align-items: baseline; gap: 8px; }
.ch-top b { font: 700 12px var(--mono); color: var(--ink3); }
.ch-node.on .ch-top b { color: var(--acc); }
.ch-top span { font: 800 22px/1 var(--head); font-stretch: 70%; }
.ch-top em { margin-left: auto; font: 400 10px var(--mono); font-style: normal; color: var(--ink3); white-space: nowrap; }
.ch-scr { display: block; width: 100%; height: 66px; margin-top: 10px; border-top: 1px solid var(--ink3); background: rgba(0, 0, 0, .18); }
.ch-cables { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.ch-cable { fill: none; stroke: var(--ink2); stroke-width: 1.4; }
.ch-jack { fill: var(--bg); stroke: var(--ink); stroke-width: 1.2; }
.ch-loop { fill: none; stroke: var(--acc); stroke-width: 1.2; opacity: .75; }
.ch-pulse { fill: var(--ink); stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 6; }
.ch-pulse.red { fill: var(--acc); stroke: color-mix(in srgb, var(--acc) 30%, transparent); }
.ch-tag { position: absolute; left: 0; top: 0; z-index: 3; font: 700 10px var(--mono); letter-spacing: .12em; color: var(--acc);
  border: 1px solid var(--acc); padding: 3px 9px; background: var(--bg); }
@media (max-width: 1080px) { .ch-row { grid-template-columns: repeat(2, 1fr); gap: 56px; } }
@media (max-width: 760px) { .ch-row { grid-template-columns: 1fr; gap: 44px; } .chain { padding-bottom: 20px; } }

/* =====================================================================
   PARÇA KARTI
   ===================================================================== */
.pk { display: grid; grid-template-columns: 210px 1fr; gap: 26px; padding: 16px; margin-bottom: 28px;
  border: 1px solid var(--ink3); border-radius: 6px; background: linear-gradient(var(--panel1), var(--panel2));
  box-shadow: inset 0 1px 0 var(--hi), 0 30px 80px rgba(0, 0, 0, .35); transition: border-color .4s, box-shadow .4s; }
.pk.playing { border-color: var(--ink2); box-shadow: inset 0 1px 0 var(--hi), 0 30px 80px rgba(0, 0, 0, .35), 0 0 40px color-mix(in srgb, var(--acc) 14%, transparent); }
.pk-cover { aspect-ratio: 1; border-radius: 3px; overflow: hidden; filter: grayscale(1) contrast(1.05) brightness(.85); transition: filter .6s; }
.pk.playing .pk-cover { filter: none; }
.pk-cover svg { width: 100%; height: 100%; display: block; }
.pk-body { display: flex; flex-direction: column; min-width: 0; }
.pk-top { display: flex; justify-content: space-between; gap: 12px; font: 500 10.5px var(--mono); letter-spacing: .14em; color: var(--ink3); }
.pk-src b { color: var(--ink); }
.pk-meta { color: var(--acc); }
.pk-title { margin: 8px 0 2px; font: 900 44px/.95 var(--head); font-stretch: 62%; text-shadow: var(--glow); }
.pk-sub { margin: 0 0 12px; font-size: 11px; letter-spacing: .12em; color: var(--ink2); }
.pk-wave { position: relative; flex: 1; min-height: 86px; cursor: pointer; border-top: 1px solid var(--ink3); border-bottom: 1px solid var(--ink3); }
.pk-wave canvas { position: absolute; inset: 6px 0; width: 100%; height: calc(100% - 12px); }
.pk-peak { position: absolute; top: 3px; bottom: 3px; border: 1px solid var(--acc); box-shadow: 0 0 10px color-mix(in srgb, var(--acc) 40%, transparent) inset; }
.pk-peak span { position: absolute; left: -1px; bottom: -19px; font: 700 9.5px var(--mono); letter-spacing: .1em; color: var(--bg); background: var(--acc); padding: 1px 6px; white-space: nowrap; }
.pk-ph { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--acc); box-shadow: 0 0 8px var(--acc); left: 0; }
.pk-load { position: absolute; right: 0; top: -20px; font: 500 10px var(--mono); font-style: normal; color: var(--ink3); letter-spacing: .1em; transition: opacity .3s; }
.pk-bot { display: flex; align-items: center; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.pk-time { font: 700 12px var(--mono); letter-spacing: .06em; min-width: 140px; }
.pk-act { display: flex; gap: 8px; }
.pk-act .btn { padding: 9px 14px; font-size: 11px; }
.pk-brand { margin-left: auto; font: 500 10px var(--mono); letter-spacing: .14em; color: var(--ink3); }
@media (max-width: 760px) {
  .pk { grid-template-columns: 96px 1fr; gap: 14px; padding: 12px; }
  .pk-title { font-size: 30px; }
  .pk-wave { grid-column: 1 / -1; }
  .pk-body { display: contents; }
  .pk-top, .pk-title, .pk-sub { grid-column: 2; }
  .pk-cover { grid-row: 1 / span 3; }
  .pk-wave, .pk-bot { grid-column: 1 / -1; }
  .pk-brand { display: none; }
}

/* =====================================================================
   SAMPLE AĞACI
   ===================================================================== */
.tree { position: relative; margin: 0 0 110px; padding-top: 10px; }
.tree-core { display: flex; justify-content: center; position: relative; z-index: 2; }
.tree-cables { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.tr-cable { fill: none; stroke: var(--ink2); stroke-width: 1.3; transition: stroke .3s; }
.tr-cable.hot { stroke: var(--acc); filter: drop-shadow(0 0 4px var(--acc)); }
.shelf { --ry: 0deg; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(8, 1fr); gap: 22px; margin-top: 170px; perspective: 1300px; }
.sleeve { display: flex; flex-direction: column; align-items: center; }
.sl-3d { position: relative; width: 100%; max-width: 190px; aspect-ratio: 1; transform-style: preserve-3d;
  transform: rotateX(16deg) rotateY(var(--ry)); transition: transform .6s cubic-bezier(.12, 0, .1, 1); }
.sleeve:hover .sl-3d { transform: rotateX(4deg) rotateY(var(--ry)) translateY(-8px); }
.sl-cover { position: absolute; inset: 0; z-index: 2; transform: translateZ(2px); border-radius: 3px; overflow: hidden; box-shadow: 0 24px 40px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .08);
  filter: grayscale(1) brightness(.8); transition: filter .5s; }
.sl-cover svg, .vl-label svg, .sl-cover img, .vl-label img { width: 100%; height: 100%; display: block; object-fit: cover; }
.sleeve:hover .sl-cover, .tree.on .sleeve:hover .sl-cover { filter: none; }
.vinyl { position: absolute; z-index: 1; left: 6%; top: 6%; width: 88%; aspect-ratio: 1; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, #111 0 2px, #1b1b1d 2px 3px), #111;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 0 24px rgba(255, 255, 255, .06), inset 0 0 30px rgba(255, 255, 255, .07);
  transform: translateZ(-2px) translateY(0); transition: transform 1.2s cubic-bezier(.12, 0, .1, 1) calc(.3s + var(--i) * .12s); }
.vinyl::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 20%, rgba(255, 255, 255, .09) 25%, transparent 32% 70%, rgba(255, 255, 255, .06) 75%, transparent 80%); }
.vl-label { position: absolute; left: 33%; top: 33%; width: 34%; height: 34%; border-radius: 50%; overflow: hidden; animation: spin 3.2s linear infinite; }
.vl-label::after { content: ""; position: absolute; left: 45%; top: 45%; width: 10%; height: 10%; border-radius: 50%; background: #0F0F0F; }
.tree.on .vinyl { transform: translateZ(-2px) translateY(-44%); }
.sleeve:hover .vinyl { transform: translateZ(-2px) translateY(-58%); transition-delay: 0s; }
@keyframes spin { to { transform: rotate(360deg); } }
.sl-name { margin-top: 16px; font: 800 17px/1.05 var(--head); font-stretch: 70%; letter-spacing: .02em; text-align: center; }
.sl-art { margin-top: 5px; font: 400 10.5px/1.35 var(--mono); color: var(--ink2); text-align: center; letter-spacing: .02em; }
.sl-name b { font: 700 10px var(--mono); color: var(--ink3); margin-right: 6px; vertical-align: middle; }
.sl-tag { margin-top: 6px; font: 700 9px var(--mono); letter-spacing: .12em; color: var(--acc); border: 1px solid var(--acc); padding: 1px 6px; }
html.rm .vl-label { animation: none; }
@media (max-width: 1180px) { .shelf { grid-template-columns: repeat(4, 1fr); row-gap: 90px; gap: 90px 28px; } }
@media (max-width: 760px) { .shelf { grid-template-columns: repeat(2, 1fr); gap: 80px 18px; margin-top: 140px; } .sl-name { font-size: 15px; } }
@media (hover: none) { .sl-cover { filter: none; } }

/* =====================================================================
   GEÇİŞ — blur-shift section entry + velocity skew + glitch
   ===================================================================== */
.sheet::before { content: ""; position: absolute; left: 0; right: 0; top: 70px; height: 140px; pointer-events: none; z-index: -1;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 16%, transparent) 45%, color-mix(in srgb, var(--acc) 22%, transparent) 55%, transparent);
  filter: blur(18px); transform: translateX(-110%) scaleY(.4); opacity: 0; }
.sheet.sweep::before { animation: sweep 1.1s cubic-bezier(.12, 0, .1, 1) forwards; }
@keyframes sweep { 0% { transform: translateX(-110%) scaleY(.4); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateX(110%) scaleY(1); opacity: 0; } }
.hero::before { display: none; }
.sh h2, .card .art { transform-origin: 0 50%; }
.hero-title:hover { animation: glitch .45s steps(2) 1; }
@keyframes glitch {
  0% { text-shadow: 3px 0 var(--acc), -3px 0 #3d7bff; transform: translate(0); }
  20% { text-shadow: -4px 0 var(--acc), 4px 0 #3d7bff; transform: translate(-3px, 1px); clip-path: inset(10% 0 55% 0); }
  40% { text-shadow: 2px 0 var(--acc), -2px 0 #3d7bff; transform: translate(3px, -1px); clip-path: inset(50% 0 10% 0); }
  60% { text-shadow: -2px 0 var(--acc), 2px 0 #3d7bff; transform: translate(-1px); clip-path: inset(30% 0 30% 0); }
  80% { text-shadow: var(--glow); transform: translate(1px); clip-path: none; }
  100% { text-shadow: var(--glow); transform: none; clip-path: none; } }
html.rm .hero-title:hover { animation: none; }

/* =====================================================================
   PRODUCT SHEETS — kits + FLANDELIST
   ===================================================================== */
.prod { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin: 0 0 110px; }
.prod.rev .prod-media { order: 2; }
.prod-info h3 { font: 900 64px/.9 var(--head); font-stretch: 62%; margin: 8px 0 18px; text-shadow: var(--glow); }
.prod-info > p { color: var(--ink2); font-size: 14px; max-width: 520px; }
.prod-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.prod-info .spec td { line-height: 1.45; }
.dot-free { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }

.cover3d { position: relative; aspect-ratio: 1; border-radius: 4px; overflow: hidden; transform-style: preserve-3d;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 0 1px var(--ink3); transition: transform .5s cubic-bezier(.12, 0, .1, 1); }
.cover3d img { width: 100%; height: 100%; display: block; object-fit: cover; }
.cover3d .shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, .22), transparent 45%); mix-blend-mode: screen; }
.cover3d:hover .shine { opacity: 1; }

.flow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; margin: 4px 0 6px; font: 500 10px var(--mono); letter-spacing: .1em; color: var(--ink3); }
.flow i { width: 16px; height: 1px; background: var(--ink3); position: relative; }
.flow i::after { content: ""; position: absolute; right: 0; top: -2px; border-left: 4px solid var(--ink3); border-top: 2.5px solid transparent; border-bottom: 2.5px solid transparent; }
.flow b { display: flex; flex-direction: column; align-items: center; border: 1px solid var(--ink2); padding: 5px 8px; color: var(--ink); font: 700 11px var(--mono); letter-spacing: .08em; }
.flow b em { font: 400 9px var(--mono); font-style: normal; color: var(--ink3); letter-spacing: .04em; margin-top: 2px; }

.yt-win { max-width: 980px; margin: -40px auto 120px; }
.yt { position: relative; display: block; width: 100%; padding: 10px; border: 0; background: none; cursor: pointer; }
.yt img { width: 100%; height: auto; display: block; border-radius: 3px; filter: grayscale(.4) brightness(.8); transition: filter .4s; }
.yt:hover img { filter: none; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%;
  display: grid; place-items: center; font-size: 24px; color: var(--solid-fg); background: var(--ink); box-shadow: 0 0 0 10px color-mix(in srgb, var(--ink) 18%, transparent);
  transition: transform .3s cubic-bezier(.12, 0, .1, 1); padding-left: 4px; }
.yt:hover .yt-play { transform: scale(1.08); }
.yt-frame { display: block; width: calc(100% - 20px); margin: 10px; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 3px; }

.lab { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; border: 1px dashed var(--ink3); padding: 16px 20px; margin: -30px 0 40px; }
.lab-k { font: 700 11px var(--mono); letter-spacing: .14em; color: var(--acc); }
.lab p { margin: 0; flex: 1 1 300px; font-size: 13px; color: var(--ink2); }
.lab a { font: 700 11px var(--mono); letter-spacing: .1em; text-decoration: none; }
.lab a:hover { text-decoration: underline; }

@media (max-width: 1080px) {
  .prod { grid-template-columns: 1fr; gap: 36px; }
  .prod.rev .prod-media { order: 0; }
  .prod-media { max-width: 560px; }
}
@media (max-width: 760px) {
  .prod-info h3 { font-size: 46px; }
  .yt-win { margin: -50px 0 80px; }
  .flow b { padding: 4px 6px; font-size: 10px; }
}

/* KINETIC waitlist */
.wl { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; align-items: end; max-width: 520px; }
.wl-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wl-f span { font-size: 10.5px; letter-spacing: .14em; color: var(--ink3); }
.wl-f input { font: 400 15px var(--mono); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink2);
  padding: 10px 0; outline: none; border-radius: 0; min-width: 0; }
.wl-f input:focus { border-bottom-color: var(--ink); }
.wl-f input.bad { border-bottom-color: var(--acc); }
.wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wl-msg { grid-column: 1 / -1; margin: 2px 0 0; font-size: 11px !important; color: var(--ink3) !important; }
.wl .btn:disabled { opacity: .6; cursor: wait; }
.wl.ok .wl-f, .wl.ok .btn, .wl.ok .wl-msg { display: none; }
.wl-done { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 16px;
  border: 1px solid var(--ink2); padding: 14px 18px; position: relative; animation: wlIn .7s cubic-bezier(.12, 0, .1, 1); }
.wl-done::before, .wl-done::after { content: ""; position: absolute; width: 10px; height: 10px; border: 1px solid var(--acc); }
.wl-done::before { left: -5px; top: -5px; border-right: 0; border-bottom: 0; }
.wl-done::after { right: -5px; bottom: -5px; border-left: 0; border-top: 0; }
.wl-done b { grid-row: span 2; font: 900 54px/1 var(--head); font-stretch: 62%; text-shadow: var(--glow); }
.wl-done span { font: 700 12px var(--mono); letter-spacing: .16em; color: var(--acc); }
.wl-done em { font: 400 12px var(--mono); font-style: normal; color: var(--ink2); }
@keyframes wlIn { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@media (max-width: 760px) { .wl { grid-template-columns: 1fr; } .wl .btn { justify-self: start; } }
.wl-done[hidden] { display: none; }
@media (max-width: 760px) {
  .brand { font-size: 11.5px; letter-spacing: .08em; gap: 8px; }
  .brand .logo-mark { width: 22px; height: 22px; }
  .theme-btn { padding: 5px 8px; font-size: 10px; }
}
@media (max-width: 400px) { .brand em, .brand .b-sub { display: none; } }

/* =====================================================================
   GENERAL NOTES — KVKK (the "notes" block of a technical drawing)
   ===================================================================== */
.kvkk { position: relative; z-index: 1; max-width: calc(1360px - 2 * var(--pad)); margin: 40px var(--pad) 0; border: 1px solid var(--line); padding: 22px 26px 18px; }
@media (min-width: 1360px) { .kvkk { margin-left: auto; margin-right: auto; } }
.kv-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; cursor: pointer; list-style: none; user-select: none; }
.kv-head::-webkit-details-marker { display: none; }
.kv-head span { margin-left: auto; }
.kvkk[open] .kv-head { border-bottom: 1px solid var(--ink3); padding-bottom: 12px; margin-bottom: 6px; }
.kv-tog { position: relative; flex: 0 0 18px; width: 18px; height: 18px; border: 1px solid var(--ink2); align-self: center; transition: transform .35s cubic-bezier(.12, 0, .1, 1), border-color .2s; }
.kv-tog::before, .kv-tog::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 1px; margin: -.5px 0 0 -4px; background: var(--ink); }
.kv-tog::after { transform: rotate(90deg); transition: transform .35s cubic-bezier(.12, 0, .1, 1); }
.kvkk[open] .kv-tog::after { transform: rotate(0deg); }
.kv-head:hover .kv-tog { border-color: var(--ink); }
.kv-head:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.kvkk { padding-bottom: 22px; }
.kvkk[open] { padding-bottom: 18px; }
.kvkk[open] .kv-list { animation: kvOpen .5s cubic-bezier(.12, 0, .1, 1); }
@keyframes kvOpen { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
html.rm .kvkk[open] .kv-list { animation: none; }
.kv-head h2 { margin: 0; font: 900 30px/1 var(--head); font-stretch: 62%; letter-spacing: .02em; }
.kv-head span { font-size: 10px; letter-spacing: .14em; color: var(--ink3); }
.kv-list { list-style: none; margin: 0; padding: 0; columns: 2 380px; column-gap: 40px; }
.kv-list li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px dashed var(--ink3); break-inside: avoid; }
.kv-list b { font: 700 11px var(--mono); color: var(--acc); padding-top: 2px; }
.kv-list p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--ink2); }
.kv-list strong { color: var(--ink); font-weight: 600; }
.kv-list a, .form-note a, .tb-cell a[href="#kvkk"] { color: var(--ink); }
.tblock { margin-top: 24px; }
.wl-ok { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: 11px; line-height: 1.5; color: var(--ink2); cursor: pointer; }
.wl-ok input { appearance: none; -webkit-appearance: none; flex: 0 0 14px; width: 14px; height: 14px; margin: 2px 0 0; border: 1px solid var(--ink2); background: transparent; cursor: pointer; display: grid; place-items: center; }
.wl-ok input:checked { background: var(--ink); border-color: var(--ink); }
.wl-ok input:checked::after { content: "✓"; font: 700 10px/1 var(--mono); color: var(--solid-fg); }
.wl-ok input:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.wl-ok.bad input { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
.wl-ok a { color: var(--ink); }
.wl.ok .wl-ok { display: none; }
@media (max-width: 760px) { .kvkk { margin: 30px 16px 0; padding: 18px 16px 12px; } .kv-list { columns: 1; } }
@media (max-width: 760px) { .wl-f { order: 1; } .wl-ok { order: 2; } .wl .btn { order: 3; } .wl-msg { order: 4; } .wl-done { order: 5; } }

/* KINETIC page link */
.nav-links a.nav-k { color: var(--ink); border: 1px solid var(--acc); padding: 3px 8px; margin: -4px 0; }
.nav-links a.nav-k:hover { background: color-mix(in srgb, var(--acc) 18%, transparent); }
.kp-more { margin: 0 0 22px; }
@media (max-width: 760px) { .nav-links a.nav-k { margin: 0; } }