#inline-guide{
  --bg:#0b0d10; --panel:#111419; --ink:#e8ecf1; --muted:#aab6c4; --accent:#ff4c4c;
  --ring:#2a3340; --link:#65b3ff; --code:#1a1f27;
  --wrap-pad:24px;
  /* offset used by sticky table headers (aligns under the page header divider) */
  --sticky-top:0px;
}
#inline-guide *{box-sizing:border-box}
#inline-guide,#inline-guide{margin:0;height:100%;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
#inline-guide a{color:var(--link);text-decoration:none}
#inline-guide a:hover{text-decoration:underline}

/* ===== Shared layout ===== */
#inline-guide .wrap{max-width:1120px;margin:0 auto;padding:var(--wrap-pad)}

/* ===== Page header (matches User Guide) ===== */
#inline-guide .page-head{
  padding: max(20px, calc(20px + env(safe-area-inset-top))) 0 18px;
  border-bottom:1px solid var(--ring);
  /* ensure sections after header see a tiny breathing room without extra divs */
  margin-bottom: 8px;
}
@media (min-width:900px){
  #inline-guide .page-head{ padding: calc(28px + env(safe-area-inset-top)) 0 22px; }
}
#inline-guide .page-head .eyebrow{
  display:inline-block;padding:4px 10px;border:1px solid var(--ring);border-radius:999px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  margin-bottom:10px;
}
#inline-guide .page-head h1{font-size:clamp(32px,5vw,56px);line-height:1.1;margin:0}
#inline-guide .page-head .sub{max-width:820px;color:var(--muted);font-size:18px;margin:10px 0 0}

/* Make the page-head full-bleed with only vertical padding;
   put horizontal padding on the inner .wrap like the User Guide */
#inline-guide .page-head{
  padding: max(20px, calc(20px + env(safe-area-inset-top))) 0 18px;
  border-bottom:1px solid var(--ring);
  margin-bottom:8px;
}
@media (min-width:900px){
  #inline-guide .page-head{ padding: calc(28px + env(safe-area-inset-top)) 0 22px; }
}

/* Override default .wrap padding so we don't double top/bottom spacing */
#inline-guide .page-head > .wrap{
  padding-left: var(--wrap-pad);
  padding-right: var(--wrap-pad);
  padding-top: 0;
  padding-bottom: 0;
}
/* Panels & grids */
#inline-guide .panel{background:var(--panel);border:1px solid var(--ring);border-radius:18px;padding:22px}
#inline-guide .grid{display:grid;gap:18px}
#inline-guide .grid.features{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
#inline-guide .feature h3{margin:8px 0 6px;font-size:20px}
#inline-guide .feature p{margin:0;color:var(--muted)}

/* What's New */
#inline-guide .whatsnew{display:flex;gap:14px;align-items:flex-start}
#inline-guide .badge-new{display:inline-block;font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(255,76,76,.12);color:#ff9a9a;border:1px solid rgba(255,76,76,.35)}

/* Controls */
#inline-guide .controls-row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
#inline-guide .mode-wrap{display:flex;align-items:center;gap:10px;margin-left:auto}
#inline-guide .badge{font-size:12px;padding:6px 10px;border:1px solid var(--ring);border-radius:999px;color:var(--muted);background:rgba(255,255,255,.03)}
#inline-guide .btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;border:1px solid var(--ring);background:transparent;color:var(--ink);font-weight:600;cursor:pointer}
#inline-guide .btn:hover{filter:brightness(1.08)}
#inline-guide .btn.toggle{padding:10px 14px;border-radius:12px}

/* Gallery */
#inline-guide .gallery{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
#inline-guide figure.swatch{margin:0;border-radius:16px;border:1px solid var(--ring);overflow:hidden;background:var(--code);box-shadow:0 1px 0 rgba(0,0,0,.25),0 10px 24px rgba(0,0,0,.18)}
#inline-guide figure.swatch header{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--ring);background:rgba(0,0,0,.65);backdrop-filter:blur(6px)}
#inline-guide figure.swatch header h3{margin:0;font-size:16px;font-weight:800;letter-spacing:.2px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
#inline-guide figure.swatch header .meta{font-size:12px;color:#e0e7ef;opacity:1}
#inline-guide .bar{height:120px}
@media(max-width:720px){#inline-guide .bar{height:96px}}
#inline-guide .label{padding:12px 14px;border-top:1px solid var(--ring);font-size:13px;color:#d9e3ef;background:rgba(255,255,255,.02)}

/* Mode switching visibility */
#inline-guide .gallery[data-mode="smooth"] .bar.smooth{display:block}
#inline-guide .gallery[data-mode="smooth"] .bar.exact{display:none}
#inline-guide .gallery[data-mode="exact"] .bar.smooth{display:none}
#inline-guide .gallery[data-mode="exact"] .bar.exact{display:block}

/* Smooth gradient demos */
#inline-guide .g-hypernova{background:linear-gradient(90deg,#0b0d10 0%,#3a2b8f 14%,#6a32b6 28%,#b437e0 42%,#ff4c4c 56%,#ffb74d 70%,#fff176 84%,#fff 100%)}
#inline-guide .g-fire{background:linear-gradient(90deg,#120507 0%,#3b0a0a 12%,#7b1311 24%,#c33310 36%,#ff6a00 50%,#ffb300 66%,#ffe066 82%,#fff 100%)}
#inline-guide .g-ocean{background:linear-gradient(90deg,#04121a 0%,#0a2a3b 16%,#0e4b6a 32%,#147aa6 48%,#1bb0d9 64%,#66d5ff 80%,#d9f3ff 100%)}
#inline-guide .g-neon{background:linear-gradient(90deg,#080808 0%,#00ff95 25%,#00c3ff 50%,#b400ff 75%,#ff00c3 100%)}
#inline-guide .g-amber{background:linear-gradient(90deg,#1b0f00 0%,#3a2300 20%,#7a4200 40%,#c46a00 60%,#ffb300 80%,#ffe7a3 100%)}
#inline-guide .g-forest{background:linear-gradient(90deg,#061307 0%,#10331a 20%,#1f5a2d 40%,#2f803e 60%,#4db06a 80%,#a8e6a3 100%)}
#inline-guide .g-ice{background:linear-gradient(90deg,#060a12 0%,#0c223a 20%,#1a4f7a 40%,#3e8ccc 60%,#9ad7ff 80%,#e8f6ff 100%)}
#inline-guide .g-chrome{background:linear-gradient(90deg,#000 0%,#262626 16%,#4f4f4f 32%,#7f7f7f 48%,#bdbdbd 64%,#e5e5e5 80%,#fff 100%)}
#inline-guide .g-sunset{background:linear-gradient(90deg,#170726 0%,#3a1462 16%,#7a2196 32%,#d83b6a 48%,#ff7a3a 64%,#ffd55e 80%,#fff5b8 100%)}
#inline-guide .g-aurora{background:linear-gradient(90deg,#071018 0%,#0d2c2a 16%,#154b2f 32%,#1f7a49 48%,#3dbb7b 64%,#9ef0d0 80%,#eafff9 100%)}
#inline-guide .g-plasma{background:linear-gradient(90deg,#020012 0%,#1f0066 20%,#7a00ff 40%,#ff0080 60%,#ff6a00 80%,#ffef00 100%)}
#inline-guide .g-candy{background:linear-gradient(90deg,#12000f 0%,#6a004a 20%,#d4006e 40%,#ff4da6 60%,#ff99cc 80%,#ffe6f2 100%)}

/* Exact LUT steps (8-step demo) */
#inline-guide .steps{display:grid;grid-template-columns:repeat(8,1fr);height:120px}
#inline-guide .steps span{display:block;height:100%;min-height:0;min-width:0;outline:1px solid rgba(0,0,0,.08)}
@media(max-width:720px){#inline-guide .steps{height:96px}}

/* Per-palette step colors */
#inline-guide .s-hypernova span:nth-child(1){background:#0b0d10}
#inline-guide .s-hypernova span:nth-child(2){background:#3a2b8f}
#inline-guide .s-hypernova span:nth-child(3){background:#6a32b6}
#inline-guide .s-hypernova span:nth-child(4){background:#b437e0}
#inline-guide .s-hypernova span:nth-child(5){background:#ff4c4c}
#inline-guide .s-hypernova span:nth-child(6){background:#ffb74d}
#inline-guide .s-hypernova span:nth-child(7){background:#fff176}
#inline-guide .s-hypernova span:nth-child(8){background:#ffffff}
#inline-guide .s-fire span:nth-child(1){background:#120507}
#inline-guide .s-fire span:nth-child(2){background:#3b0a0a}
#inline-guide .s-fire span:nth-child(3){background:#7b1311}
#inline-guide .s-fire span:nth-child(4){background:#c33310}
#inline-guide .s-fire span:nth-child(5){background:#ff6a00}
#inline-guide .s-fire span:nth-child(6){background:#ffb300}
#inline-guide .s-fire span:nth-child(7){background:#ffe066}
#inline-guide .s-fire span:nth-child(8){background:#ffffff}
#inline-guide .s-ocean span:nth-child(1){background:#04121a}
#inline-guide .s-ocean span:nth-child(2){background:#0a2a3b}
#inline-guide .s-ocean span:nth-child(3){background:#0e4b6a}
#inline-guide .s-ocean span:nth-child(4){background:#147aa6}
#inline-guide .s-ocean span:nth-child(5){background:#1bb0d9}
#inline-guide .s-ocean span:nth-child(6){background:#66d5ff}
#inline-guide .s-ocean span:nth-child(7){background:#d9f3ff}
#inline-guide .s-ocean span:nth-child(8){background:#ffffff}
#inline-guide .s-neon span:nth-child(1){background:#080808}
#inline-guide .s-neon span:nth-child(2){background:#00ff95}
#inline-guide .s-neon span:nth-child(3){background:#00c3ff}
#inline-guide .s-neon span:nth-child(4){background:#b400ff}
#inline-guide .s-neon span:nth-child(5){background:#ff00c3}
#inline-guide .s-neon span:nth-child(6){background:#080808}
#inline-guide .s-neon span:nth-child(7){background:#00ff95}
#inline-guide .s-neon span:nth-child(8){background:#00c3ff}
#inline-guide .s-amber span:nth-child(1){background:#1b0f00}
#inline-guide .s-amber span:nth-child(2){background:#3a2300}
#inline-guide .s-amber span:nth-child(3){background:#7a4200}
#inline-guide .s-amber span:nth-child(4){background:#c46a00}
#inline-guide .s-amber span:nth-child(5){background:#ffb300}
#inline-guide .s-amber span:nth-child(6){background:#ffe7a3}
#inline-guide .s-amber span:nth-child(7){background:#ffffff}
#inline-guide .s-amber span:nth-child(8){background:#ffffff}
#inline-guide .s-forest span:nth-child(1){background:#061307}
#inline-guide .s-forest span:nth-child(2){background:#10331a}
#inline-guide .s-forest span:nth-child(3){background:#1f5a2d}
#inline-guide .s-forest span:nth-child(4){background:#2f803e}
#inline-guide .s-forest span:nth-child(5){background:#4db06a}
#inline-guide .s-forest span:nth-child(6){background:#a8e6a3}
#inline-guide .s-forest span:nth-child(7){background:#e8ffe3}
#inline-guide .s-forest span:nth-child(8){background:#ffffff}
#inline-guide .s-ice span:nth-child(1){background:#060a12}
#inline-guide .s-ice span:nth-child(2){background:#0c223a}
#inline-guide .s-ice span:nth-child(3){background:#1a4f7a}
#inline-guide .s-ice span:nth-child(4){background:#3e8ccc}
#inline-guide .s-ice span:nth-child(5){background:#9ad7ff}
#inline-guide .s-ice span:nth-child(6){background:#e8f6ff}
#inline-guide .s-ice span:nth-child(7){background:#ffffff}
#inline-guide .s-ice span:nth-child(8){background:#ffffff}
#inline-guide .s-chrome span:nth-child(1){background:#000}
#inline-guide .s-chrome span:nth-child(2){background:#262626}
#inline-guide .s-chrome span:nth-child(3){background:#4f4f4f}
#inline-guide .s-chrome span:nth-child(4){background:#7f7f7f}
#inline-guide .s-chrome span:nth-child(5){background:#bdbdbd}
#inline-guide .s-chrome span:nth-child(6){background:#e5e5e5}
#inline-guide .s-chrome span:nth-child(7){background:#fff}
#inline-guide .s-chrome span:nth-child(8){background:#fff}
#inline-guide .s-sunset span:nth-child(1){background:#170726}
#inline-guide .s-sunset span:nth-child(2){background:#3a1462}
#inline-guide .s-sunset span:nth-child(3){background:#7a2196}
#inline-guide .s-sunset span:nth-child(4){background:#d83b6a}
#inline-guide .s-sunset span:nth-child(5){background:#ff7a3a}
#inline-guide .s-sunset span:nth-child(6){background:#ffd55e}
#inline-guide .s-sunset span:nth-child(7){background:#fff5b8}
#inline-guide .s-sunset span:nth-child(8){background:#ffffff}
#inline-guide .s-aurora span:nth-child(1){background:#071018}
#inline-guide .s-aurora span:nth-child(2){background:#0d2c2a}
#inline-guide .s-aurora span:nth-child(3){background:#154b2f}
#inline-guide .s-aurora span:nth-child(4){background:#1f7a49}
#inline-guide .s-aurora span:nth-child(5){background:#3dbb7b}
#inline-guide .s-aurora span:nth-child(6){background:#9ef0d0}
#inline-guide .s-aurora span:nth-child(7){background:#eafff9}
#inline-guide .s-aurora span:nth-child(8){background:#ffffff}
#inline-guide .s-plasma span:nth-child(1){background:#020012}
#inline-guide .s-plasma span:nth-child(2){background:#1f0066}
#inline-guide .s-plasma span:nth-child(3){background:#7a00ff}
#inline-guide .s-plasma span:nth-child(4){background:#ff0080}
#inline-guide .s-plasma span:nth-child(5){background:#ff6a00}
#inline-guide .s-plasma span:nth-child(6){background:#ffef00}
#inline-guide .s-plasma span:nth-child(7){background:#fff7a3}
#inline-guide .s-plasma span:nth-child(8){background:#ffffff}
#inline-guide .s-candy span:nth-child(1){background:#12000f}
#inline-guide .s-candy span:nth-child(2){background:#6a004a}
#inline-guide .s-candy span:nth-child(3){background:#d4006e}
#inline-guide .s-candy span:nth-child(4){background:#ff4da6}
#inline-guide .s-candy span:nth-child(5){background:#ff99cc}
#inline-guide .s-candy span:nth-child(6){background:#ffd6ea}
#inline-guide .s-candy span:nth-child(7){background:#ffeef7}
#inline-guide .s-candy span:nth-child(8){background:#ffffff}

/* Mini compare */
#inline-guide .compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#inline-guide .compare .box{border:1px solid var(--ring);border-radius:12px;overflow:hidden;background:var(--code)}
#inline-guide .compare header{padding:10px 12px;border-bottom:1px solid var(--ring);font-size:12px;color:#fff;background:rgba(0,0,0,.75)}
#inline-guide .compare .wide{height:72px;background:repeating-linear-gradient(90deg,#3a2b8f 0 8px,#6a32b6 8px 16px,#b437e0 16px 24px,#ff4c4c 24px 32px,#ffb74d 32px 40px,#fff176 40px 48px)}
#inline-guide .compare .ultra{height:72px;background:repeating-linear-gradient(90deg,#3a2b8f 0 1px,#6a32b6 1px 2px,#b437e0 2px 3px,#ff4c4c 3px 4px,#ffb74d 4px 5px,#fff176 5px 6px)}
#inline-guide .callout{border-left:4px solid var(--accent);padding:12px 14px;background:rgba(255,76,76,.08);border-radius:12px;margin-top:10px}
#inline-guide kbd,#inline-guide .kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:var(--code);color:#e8ecf1;border:1px solid var(--ring);border-radius:6px;padding:2px 6px}
#inline-guide .note{font-size:13px;color:var(--muted);margin-top:10px}

/* Chips */
#inline-guide .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
#inline-guide .chip{font-size:12px;padding:6px 10px;border:1px solid var(--ring);border-radius:999px;color:var(--muted);background:rgba(255,255,255,.03)}

/* Palette table */
#inline-guide #paletteTable .th,#inline-guide  #paletteTable .td { padding: 10px; border-bottom: 1px solid var(--ring); font-size: 15px; }
#inline-guide #paletteTable .th { cursor: pointer; user-select:none; }
#inline-guide #paletteTable tr:hover td { background: rgba(255,255,255,.03); }
/* sticky just under the page header divider */
#inline-guide #paletteTable thead th { position: sticky; top: var(--sticky-top); background: var(--panel); z-index: 1; }