/* =====================================================================
   Akash Gaur · Portfolio v2.0
   Editorial · dark-first · full-bleed rail
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}

:root{
  /* Type */
  --f-display:"Instrument Serif", "Times New Roman", serif;
  --f-body:"Inter", system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, monospace;

  /* ── Variant SAFE (default) ── */
  --bg:#0E0D0C;
  --bg-2:#141211;
  --paper:#F4F1EB;
  --ink:#F4F1EB;
  --ink-dim:rgba(244,241,235,0.62);
  --ink-fade:rgba(244,241,235,0.32);
  --line:rgba(244,241,235,0.12);
  --line-2:rgba(244,241,235,0.22);

  --sage:oklch(0.78 0.09 150);
  --coral:oklch(0.76 0.13 40);
  --amber:oklch(0.82 0.12 80);

  --accent:var(--sage);
  --accent-2:var(--coral);

  --radius:18px;
  --radius-sm:10px;

  --dur:420ms;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ── Variant BOLD ── */
body[data-theme="bold"]{
  --bg:#05060a;
  --bg-2:#0a0b10;
  --paper:#F5FFE8;
  --ink:#F5FFE8;
  --ink-dim:rgba(245,255,232,0.68);
  --ink-fade:rgba(245,255,232,0.34);
  --line:rgba(245,255,232,0.14);
  --line-2:rgba(245,255,232,0.26);
  --sage:oklch(0.88 0.23 130);      /* electric lime */
  --coral:oklch(0.72 0.28 340);     /* magenta */
  --amber:oklch(0.78 0.22 60);      /* hi-vis orange */
  --accent:var(--sage);
  --accent-2:var(--coral);
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  cursor:none;
}
body[data-cursor="off"]{cursor:auto}

em{font-style:italic;font-family:var(--f-display);font-weight:400}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase}

/* ============== PROGRESS ============== */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;background:transparent}
.progress #progressBar{display:block;height:100%;width:0;background:var(--accent);transition:width 100ms linear}

/* ============== CURSOR ============== */
.cursor{position:fixed;top:0;left:0;pointer-events:none;z-index:100;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:opacity 200ms var(--ease)}
body[data-cursor="off"] .cursor{display:none}
.cursor__ring{
  display:block;width:12px;height:12px;border-radius:50%;
  background:var(--paper);
  transition:width var(--dur) var(--ease), height var(--dur) var(--ease), background var(--dur);
}
.cursor__label{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--f-mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:transparent;white-space:nowrap;
  transition:color 200ms;
}
.cursor.is-hover .cursor__ring{width:64px;height:64px;background:var(--accent)}
.cursor.is-hover .cursor__label{color:#0E0D0C}
.cursor.is-drag .cursor__ring{width:96px;height:96px;background:var(--paper)}
.cursor.is-drag .cursor__label{color:#0E0D0C}

/* ============== NAV ============== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:16px 32px;
  backdrop-filter:blur(12px);
  background:color-mix(in srgb, var(--bg) 60%, transparent);
  border-bottom:1px solid var(--line);
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__mark{display:flex;align-items:center;gap:10px;font-weight:500}
.nav__mark-glyph{color:var(--accent);font-size:14px}
.nav__mark-name{font-family:var(--f-display);font-size:22px;letter-spacing:-0.01em;line-height:1}
@media (max-width:780px){.nav__mark-name{font-size:18px}}
.nav__links{display:flex;gap:22px}
.nav__links a{font-size:13px;color:var(--ink-dim);transition:color 200ms}
.nav__links a:hover{color:var(--ink)}
.nav__meta{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-dim)}
.nav__dot{width:6px;height:6px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 4px color-mix(in srgb, var(--sage) 25%, transparent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px color-mix(in srgb, var(--sage) 0%, transparent)}}

@media (max-width:780px){
  .nav__links{display:none}
  .nav{padding:14px 20px}
}

/* ============== HERO ============== */
.hero{
  position:relative;
  min-height:100vh;
  padding:120px 48px 40px;
  display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;
}
.hero__grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:96px 96px;
  mask-image:radial-gradient(ellipse at 60% 40%, #000 0%, transparent 70%);
  opacity:0.5;
}
.hero__meta-top{position:relative;display:flex;justify-content:flex-end;color:var(--ink-dim);max-width:1400px;margin:0 auto;width:100%}

.hero__body{position:relative;padding:80px 0 40px;max-width:1400px;margin:0 auto;width:100%}
.hero__intro{display:inline-flex;align-items:center;gap:10px;color:var(--ink-dim);margin-bottom:40px}
.intro-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 2.4s ease-in-out infinite}

.hero__title{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(56px, 12vw, 180px);
  line-height:0.92;
  letter-spacing:-0.02em;
  margin:0;
}
.hero__line{display:block}
.hero__line--em em{color:var(--accent)}

.hero__foot{
  display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;
  margin-top:64px;max-width:1400px;
}
.hero__lede{max-width:520px;font-size:18px;line-height:1.45;color:var(--ink-dim);margin:0}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap}

.hero__marquee{
  position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:18px 0;margin:0 -48px -40px;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hero__marquee-track{
  display:flex;gap:40px;width:max-content;animation:marq 50s linear infinite;
  font-family:var(--f-display);font-size:42px;letter-spacing:-0.02em;
}
.hero__marquee-track span{color:var(--ink-dim)}
.hero__marquee-track span:nth-child(4n+1){color:var(--ink)}
.hero__marquee-track span:nth-child(6n+2){color:var(--accent);font-style:italic}
@keyframes marq{to{transform:translateX(-50%)}}

@media (max-width:780px){
  .hero{padding:100px 20px 20px}
  .hero__body{padding:40px 0 20px}
  .hero__foot{grid-template-columns:1fr;gap:24px}
  .hero__marquee{margin:0 -20px -20px}
  .hero__marquee-track{font-size:28px;gap:24px}
}

/* ============== PILLS ============== */
.pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:999px;
  font-size:14px;font-weight:500;
  border:1px solid var(--line-2);
  transition:transform var(--dur) var(--ease), background var(--dur), color var(--dur), border-color var(--dur);
  cursor:none;
}
body[data-cursor="off"] .pill{cursor:pointer}
.pill--solid{background:var(--accent);color:#0E0D0C;border-color:var(--accent)}
.pill--solid:hover{transform:translateY(-2px);background:var(--paper);border-color:var(--paper)}
.pill--ghost{background:transparent;color:var(--ink)}
.pill--ghost:hover{background:var(--bg-2);border-color:var(--ink-dim)}
.pill--sm{padding:10px 16px;font-size:13px}

/* ============== SECTION COMMON ============== */
.section-label{color:var(--accent);margin-bottom:16px}
.section-title{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(40px, 6vw, 88px);line-height:0.98;letter-spacing:-0.02em;
  margin:0 0 48px;
}
.section-title em{color:var(--accent)}

/* ============== WORK ============== */
.work{padding:120px 0 80px;position:relative}
.work__header{display:flex;justify-content:space-between;align-items:flex-end;padding:0 48px;margin-bottom:32px;gap:24px;flex-wrap:wrap}
.work__help{color:var(--ink-dim)}
.drag-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line-2);border-radius:999px}
.drag-chip__dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2s ease-in-out infinite}

.filters{display:flex;gap:8px;padding:0 48px 28px;flex-wrap:wrap}
.chip{
  padding:10px 16px;border-radius:999px;border:1px solid var(--line-2);
  font-size:12px;font-family:var(--f-mono);letter-spacing:0.06em;text-transform:uppercase;
  color:var(--ink-dim);transition:all var(--dur) var(--ease);
  display:inline-flex;align-items:center;gap:8px;cursor:none;
}
body[data-cursor="off"] .chip{cursor:pointer}
.chip span{opacity:0.5;font-size:10px}
.chip:hover{color:var(--ink);border-color:var(--ink-dim)}
.chip--active{background:var(--ink);color:#0E0D0C;border-color:var(--ink)}
.chip--active span{opacity:0.6}

/* Rail */
.rail{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:8px 0 40px;
}
.rail::-webkit-scrollbar{display:none}
.rail.is-grab{cursor:grabbing}
.rail__track{
  display:flex;gap:24px;
  padding:0 48px 0;
  width:max-content;
  will-change:transform;
}

/* Tile */
.tile{
  flex:0 0 560px;
  scroll-snap-align:start;
  position:relative;
  transition:opacity var(--dur) var(--ease), filter var(--dur), flex var(--dur) var(--ease);
}
.tile.is-hidden{opacity:0.18;filter:grayscale(1)}
.tile__inner{
  position:relative;height:680px;
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px;
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:border-color var(--dur), transform var(--dur) var(--ease);
}
.tile:hover .tile__inner{border-color:var(--line-2);transform:translateY(-4px)}

.tile[data-accent="sage"]{--accent:var(--sage)}
.tile[data-accent="coral"]{--accent:var(--coral)}
.tile[data-accent="amber"]{--accent:var(--amber)}

.tile__head{display:flex;justify-content:space-between;color:var(--ink-fade);margin-bottom:24px}
.tile__num{color:var(--accent)}
.tile__title{
  font-family:var(--f-display);font-weight:400;
  font-size:56px;line-height:0.94;letter-spacing:-0.02em;
  margin:0 0 16px;
}
.tile__title--sm{font-size:44px}
.tile__desc{font-size:15px;line-height:1.55;color:var(--ink-dim);margin:0 0 20px;max-width:440px}

.tile__tags{display:flex;gap:6px;flex-wrap:wrap;margin:auto 0 20px;padding-top:16px}
.tile__tags span{
  font-family:var(--f-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--line);border-radius:999px;color:var(--ink-dim);
}

.tile__cta{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 0;border-top:1px solid var(--line);
  color:var(--ink-dim);transition:color var(--dur);
}
.tile__cta:hover{color:var(--accent)}
.cta-plus{font-size:20px;font-family:var(--f-display);transition:transform var(--dur) var(--ease)}
.tile.is-open .cta-plus{transform:rotate(45deg)}
.tile.is-open .cta-text::after{content:""}

/* Expand mode */
.tile.is-open{flex:0 0 min(1100px, calc(100vw - 120px))}
.tile.is-open .tile__inner{height:auto;min-height:680px;overflow:visible}
.tile.is-open .mock{flex:0 0 auto;min-height:260px}
.tile__detail{
  border-top:1px solid var(--line);
  padding-top:24px;margin-top:20px;
  animation:fadeUp 400ms var(--ease) both;
}
.tile__detail .pill{margin-top:8px}
.detail__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:20px}
.detail__h{font-family:var(--f-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.detail__grid p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-dim)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}}

@media (max-width:780px){
  .detail__grid{grid-template-columns:1fr}
  .tile{flex:0 0 86vw}
  .tile.is-open{flex:0 0 92vw}
  .tile__inner{height:auto;min-height:600px;padding:24px}
  .tile__title{font-size:44px}
  .work__header,.filters,.rail__track{padding-left:20px;padding-right:20px}
}

/* ============== MOCKUPS ============== */
.mock{
  background:#0a0908;border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;margin:0 0 20px;
  flex:1;min-height:220px;display:flex;flex-direction:column;
}
body[data-theme="bold"] .mock{background:#02030a}
.mock__head{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  border-bottom:1px solid var(--line);
  font-size:10px;color:var(--ink-fade);
}
.mock__dots{display:flex;gap:4px}
.mock__dots i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.mock__head .mono{flex:1}
.mock__live{display:inline-flex;align-items:center;gap:6px;color:var(--accent)}
.mock__live b{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:blink 1.4s ease-in-out infinite}
.mock__live--warn{color:var(--coral)}
.mock__live--warn b{background:var(--coral)}
.mock__live--ok{color:var(--sage)}
.mock__live--ok b{background:var(--sage)}
@keyframes blink{50%{opacity:0.25}}

.mock__body{padding:14px;flex:1;display:flex;flex-direction:column;gap:10px}

/* KPIs */
.mock__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kpi{padding:10px;background:color-mix(in srgb, var(--accent) 6%, transparent);border:1px solid color-mix(in srgb, var(--accent) 18%, transparent);border-radius:8px;display:flex;flex-direction:column;gap:2px}
.kpi__l{color:var(--ink-fade);font-size:9px}
.kpi__v{font-family:var(--f-display);font-size:32px;line-height:1;color:var(--accent)}
.kpi__v em{font-family:var(--f-body);font-size:16px;font-style:normal;color:var(--ink-dim);margin-left:2px}

/* Chart */
.mock__chart{position:relative;flex:1;min-height:90px}
.mock__chart svg{position:absolute;inset:0;width:100%;height:100%}
.mock__bars{position:absolute;inset:auto 0 0 0;height:32px;display:flex;gap:3px;align-items:flex-end}
.mock__bars span{flex:1;background:var(--ink-fade);height:var(--h,50%);border-radius:2px 2px 0 0}
.mock__bars span:nth-child(3n){background:var(--accent)}

/* Option chain */
.mock__body--chain{flex-direction:row;gap:12px;padding:10px}
.chain{width:100%;border-collapse:collapse;font-family:var(--f-mono);font-size:10px}
.chain th{color:var(--ink-fade);font-weight:400;text-align:center;padding:6px 4px;letter-spacing:0.06em}
.chain td{text-align:center;padding:6px 4px;color:var(--ink-dim);border-top:1px solid var(--line)}
.chain td.k{color:var(--ink);font-weight:500}
.chain td.hi{color:var(--accent);font-weight:500}
.chain tr.atm td{background:color-mix(in srgb, var(--accent) 8%, transparent)}
.chain tr.atm td.k{color:var(--accent)}
.chain__side{display:flex;flex-direction:column;gap:6px;min-width:90px}
.greek{padding:8px 10px;border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column;gap:2px}
.greek .mono{color:var(--ink-fade);font-size:9px}
.greek b{font-family:var(--f-display);font-size:20px;line-height:1;color:var(--accent)}

/* VBA code + pnl */
.mock__body--code{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;padding:12px}
.code{margin:0;font-family:var(--f-mono);font-size:11px;line-height:1.55;color:var(--ink-dim);white-space:pre;overflow:hidden}
.c-k{color:var(--coral)}
.c-f{color:var(--accent)}
.c-s{color:var(--amber)}
.c-c{color:var(--ink-fade);font-style:italic}
.mock__pnl{display:flex;flex-direction:column;gap:6px}
.pnl__row{display:flex;justify-content:space-between;padding:8px 10px;border:1px solid var(--line);border-radius:6px;align-items:center}
.pnl__row b{font-family:var(--f-display);font-size:18px}
.pnl__row .up{color:var(--sage)}
.pnl__row .dn{color:var(--coral)}
.pnl__spark{height:38px;border:1px solid var(--line);border-radius:6px;padding:4px}
.pnl__spark svg{width:100%;height:100%;display:block}

/* Closer tile */
.tile--closer .tile__inner{
  background:var(--accent);color:#0E0D0C;border-color:var(--accent);
  justify-content:center;align-items:flex-start;gap:12px;
}
.tile--closer .tile__title{color:#0E0D0C}
.tile--closer .tile__desc{color:rgba(14,13,12,0.7);font-size:16px}
.tile--closer .mono{color:rgba(14,13,12,0.6)}
.tile--closer .pill{background:#0E0D0C;color:var(--paper);border-color:#0E0D0C;margin-top:12px}

/* Rail progress */
.rail__progress{margin:0 48px;height:2px;background:var(--line);border-radius:2px;overflow:hidden;max-width:400px}
.rail__progress span{display:block;height:100%;width:20%;background:var(--accent);transition:width 120ms linear, margin-left 120ms linear}

/* ============== ABOUT ============== */
.about{padding:140px 48px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.about__grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;max-width:1400px;margin:0 auto}
.about__lead{font-family:var(--f-display);font-size:clamp(24px, 3vw, 36px);line-height:1.25;margin:0 0 24px;color:var(--ink)}
.about__col p{font-size:16px;line-height:1.6;color:var(--ink-dim);margin:0 0 16px;max-width:580px}
.about__meta{display:flex;flex-wrap:wrap;gap:24px;margin-top:32px;color:var(--ink-dim)}
.about__meta b{color:var(--accent);margin-right:6px}

@media (max-width:780px){
  .about{padding:80px 20px}
  .about__grid{grid-template-columns:1fr;gap:32px}
}

/* ============== STACK ============== */
.stack{padding:140px 48px;max-width:1400px;margin:0 auto}
.stack__groups{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:48px}
.stack__h{color:var(--accent);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.stack__group ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.stack__group li{font-family:var(--f-display);font-size:22px;color:var(--ink);line-height:1.2}
.stack__group li:hover{color:var(--accent)}

@media (max-width:780px){
  .stack{padding:80px 20px}
  .stack__groups{grid-template-columns:repeat(2,1fr);gap:24px}
}

/* ============== XP ============== */
.xp{padding:140px 48px;max-width:1400px;margin:0 auto;border-top:1px solid var(--line)}
.xp__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.xp__row{
  display:grid;grid-template-columns:200px 1fr;gap:40px;
  padding:32px 0;border-top:1px solid var(--line);
  transition:background var(--dur);
}
.xp__row:last-child{border-bottom:1px solid var(--line)}
.xp__row:hover{background:color-mix(in srgb, var(--accent) 3%, transparent)}
.xp__period{color:var(--ink-fade);padding-top:6px}
.xp__role{font-family:var(--f-display);font-size:32px;margin:0 0 4px;font-weight:400;letter-spacing:-0.01em;display:flex;align-items:center;gap:12px}
.xp__badge{font-family:var(--f-mono);font-size:10px;padding:3px 8px;border-radius:4px;background:var(--accent);color:#0E0D0C;letter-spacing:0.08em;text-transform:uppercase}
.xp__org{margin:0 0 12px;color:var(--accent);font-size:14px}
.xp__desc{margin:0;font-size:15px;line-height:1.55;color:var(--ink-dim);max-width:680px}

@media (max-width:780px){
  .xp{padding:80px 20px}
  .xp__row{grid-template-columns:1fr;gap:8px}
  .xp__role{font-size:24px}
}

/* ============== CERTS ============== */
.certs{padding:140px 48px;max-width:1400px;margin:0 auto;border-top:1px solid var(--line)}
.certs__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.cert{padding:28px 24px;border:1px solid var(--line);border-radius:var(--radius-sm);transition:all var(--dur) var(--ease)}
.cert:hover{border-color:var(--accent);transform:translateY(-2px)}
.cert .mono{color:var(--accent);margin-bottom:10px;display:block}
.cert h4{font-family:var(--f-display);font-size:22px;font-weight:400;margin:0;line-height:1.2}

@media (max-width:780px){
  .certs{padding:80px 20px}
  .certs__grid{grid-template-columns:1fr;gap:12px}
}

/* ============== CONTACT ============== */
.contact{padding:160px 48px 80px;border-top:1px solid var(--line)}
.contact__inner{max-width:1100px;margin:0 auto}
.contact__title{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(56px, 9vw, 128px);line-height:0.94;letter-spacing:-0.02em;margin:16px 0 40px;
}
.contact__title em{color:var(--accent)}
.contact__lede{font-size:18px;color:var(--ink-dim);max-width:520px;margin:0 0 48px}

.contact__links{display:flex;flex-direction:column}
.contact__big{
  display:grid;grid-template-columns:140px 1fr;align-items:center;gap:32px;
  padding:28px 0;border-top:1px solid var(--line);
  transition:padding var(--dur) var(--ease), color var(--dur);
  position:relative;
}
.contact__big:last-child{border-bottom:1px solid var(--line)}
.contact__big .mono{color:var(--ink-fade)}
.contact__big>span:last-child{font-family:var(--f-display);font-size:clamp(28px, 4vw, 48px);color:var(--ink)}
.contact__big:hover{padding-left:24px;color:var(--accent)}
.contact__big:hover .mono{color:var(--accent)}

@media (max-width:780px){
  .contact{padding:80px 20px}
  .contact__big{grid-template-columns:1fr;gap:4px;padding:20px 0}
}

/* ============== FOOTER ============== */
.foot{padding:32px 48px;border-top:1px solid var(--line)}
.foot__inner{display:flex;justify-content:space-between;color:var(--ink-fade)}
@media (max-width:780px){
  .foot{padding:24px 20px}
  .foot__inner{flex-direction:column;gap:6px}
}

/* ============== TWEAKS PANEL ============== */
.tweaks{
  position:fixed;bottom:24px;right:24px;z-index:80;
  width:260px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  box-shadow:0 20px 40px rgba(0,0,0,0.4);
}
.tweaks__head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.tweaks__head button{font-size:20px;color:var(--ink-dim);width:24px;height:24px;border-radius:50%;line-height:1}
.tweaks__head button:hover{color:var(--ink);background:var(--line)}
.tweaks__body{padding:16px}
.tw-label{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-dim);margin:12px 0 6px}
.tw-label:first-child{margin-top:0}
.tw-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:3px;background:var(--bg);border:1px solid var(--line);border-radius:8px}
.tw-seg__b{padding:8px;font-size:12px;border-radius:5px;color:var(--ink-dim);transition:all 200ms}
.tw-seg__b.is-active{background:var(--ink);color:#0E0D0C}
.tw-note{font-size:10px;line-height:1.5;color:var(--ink-fade);margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.tw-note b{color:var(--accent);font-weight:500}

/* ============== REVEAL ============== */
.reveal-ready{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease), transform 700ms var(--ease)}
.reveal-on{opacity:1;transform:none}