Native CSS nesting — interactive playground

<div class="pg">
    <h1 class="pg-title">🧩 Native CSS nesting — write nested, watch it flatten</h1>
    <p class="pg-sub">
      Edit the nested CSS on the left. Watch <code>&amp;</code> expand differently depending on
      what follows it — live, in both the flattened CSS and a genuinely rendered card.
    </p>

<div class="layout">
      <div class="panel">
        <div class="panel-label"><span class="n">1</span> Nested CSS — edit me</div>
        <label class="ctl-label" for="src" style="display:block; margin-bottom:6px;">Source</label>
        <textarea id="src" spellcheck="false" autocapitalize="off" autocorrect="off" rows="14" aria-describedby="srcHint"></textarea>
        <div class="presets" style="margin-top:12px">
          <button class="btn sm" type="button" data-preset="card">Card (default)</button>
          <button class="btn sm" type="button" data-preset="mistake">The &amp;__child mistake</button>
        </div>
        <div class="btn-row" style="margin-top:10px">
          <button class="btn ghost sm" type="button" id="reset">Reset</button>
        </div>
        <p class="hint" id="srcHint">Type here. Every keystroke re-flattens the CSS below and re-renders the card at the bottom — nothing is precomputed.</p>
      </div>

<div class="col">
        <div class="panel">
          <div class="panel-label"><span class="n">2</span> What each form expands to</div>
          <div class="seg" id="kindSeg" role="group" aria-label="Highlight a nesting form">
            <button type="button" data-kind="all" aria-pressed="true">All</button>
            <button type="button" data-kind="modifier" aria-pressed="false">&amp;</button>
            <button type="button" data-kind="explicit-descendant" aria-pressed="false">&amp; .child</button>
            <button type="button" data-kind="implicit-descendant" aria-pressed="false">.child</button>
            <button type="button" data-kind="pseudo" aria-pressed="false">&amp;:hover</button>
          </div>
          <p class="hint" id="kindCaption">Pick a form above to see exactly what it compiles to, highlighted on the right.</p>
        </div>

<div class="panel">
          <div class="panel-label"><span class="n">3</span> Compiled / flattened CSS</div>
          <div class="code" id="compiled" aria-live="polite"></div>
          <p class="hint">This is a plain-text illustration of what the browser resolves internally — it is not what runs the preview below.</p>
        </div>

<div class="panel">
          <div class="panel-label"><span class="n">4</span> Live preview — real browser nesting, not a simulation</div>
          <div class="row between" style="margin-bottom:10px; gap:10px;">
            <div class="seg" id="viewportSeg" role="group" aria-label="Preview viewport width">
              <button type="button" data-vp="wide" aria-pressed="true">Wide (≥480px)</button>
              <button type="button" data-vp="narrow" aria-pressed="false">Narrow (&lt;480px)</button>
            </div>
            <label class="toggle">
              <input type="checkbox" id="featuredToggle" /><span class="switch"></span>
              <span>Featured (&amp;.card--featured)</span>
            </label>
          </div>
          <div class="stage-wrap" id="stageWrap">
            <iframe id="stageFrame" title="Live rendered card, styled by your nested CSS" scrolling="no"></iframe>
          </div>
          <div class="status" id="parseStatus" style="margin-top:12px">
            <span class="dot good" id="parseDot"></span><span id="parseText">Parsed OK — updated live.</span>
          </div>
          <p class="hint">The card above renders inside a real sandboxed page using your exact nested CSS — the browser is doing the parsing, nothing here is faked. Toggle the viewport width to trigger the nested <code>@media</code> query.</p>
        </div>
      </div>
    </div>
  </div>

const srcEl = $("src");
  const compiledEl = $("compiled");
  const frame = $("stageFrame");
  const stageWrap = $("stageWrap");
  const kindSeg = $("kindSeg");
  const kindCaption = $("kindCaption");
  const viewportSeg = $("viewportSeg");
  const featuredToggle = $("featuredToggle");
  const parseDot = $("parseDot");
  const parseText = $("parseText");
  const supportBanner = $("supportBanner");

let currentKind = "all";
  let debounceTimer = null;

const DEFAULT_CSS =
`.card {
  padding: 1.5rem;
  border-radius: 10px;
  background: var(--surface);

&:hover {
    background: var(--surface-hover);
  }

& .card__title {
    font-weight: 700;
  }

.card__meta {
    color: var(--muted);
  }

&.card--featured {
    border: 2px solid var(--accent);
  }

@media (min-width: 480px) {
    padding: 2rem;
  }
}`;

const MISTAKE_CSS =
`.card {
  padding: 1.5rem;
  background: var(--surface);

&__title {
    font-weight: 700;
    color: var(--accent);
  }
}`;

const CAPTIONS = {
    all: "Pick a form above to see exactly what it compiles to, highlighted on the right.",
    modifier: "& fused directly to a class, ID, or pseudo — nothing in between — stays on the SAME element. &.card--featured → .card.card--featured: one element, two classes, no space.",
    "explicit-descendant": "& followed by a space, then a selector, is an explicit descendant combinator. & .card__title → .card .card__title — matches that class anywhere inside .card.",
    "implicit-descendant": "Leave & off entirely and nesting still assumes a descendant. .card__meta → .card .card__meta — exactly the same result as writing & .card__meta.",
    pseudo: "& glued straight to a pseudo-class fuses onto the same element too, just like Sass. &:hover → .card:hover.",
  };

const FRAME_HTML =
`<!doctype html><html><head><meta charset="utf-8">

</head>
<body>
  <div class="card">
    <p class="card__title">Card title</p>
    <p class="card__meta">Edit the CSS on the left — this card is real, sandboxed HTML.</p>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.