/* Embedded in a blog post via an iframe: one card, transparent around it. */
/* The post's colour code ("Three kinds of characters", "16 bytes, one pass", "The Rewriter"):
   yellow = ASCII, white = stable, blue = unstable (the Unicode chain), light blue = non-ASCII bytes,
   orange = a pass-2 rule firing, green = changed. Grey/green = before/after; red = the lookup count. */
:root{--before:#B8B2A6;--after:var(--green);--lookup:var(--red);--changed:var(--green);--rule:var(--orange);
  --ascii:var(--yellow);--unstable:var(--blue);--checked:var(--blue-soft)}
[hidden]{display:none!important}
html,body{background:transparent}
body{font-size:16px}
main.embed{max-width:1120px;padding:6px 14px 18px 6px}
.card{box-shadow:5px 5px 0 var(--ink)}
.card>.panel-head{align-items:center;font-size:12px;padding:8px 10px 8px 16px}
.card>.panel-head>.title{margin:0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font:20px var(--display);text-transform:none;letter-spacing:0}
.card>.panel-head .title .meta{font-size:11px}

.switch{box-shadow:2px 2px 0 var(--ink);padding:3px}
.switch button{border:0;background:none;padding:4px 12px;border-radius:999px;color:var(--soft);cursor:pointer;font:11.5px var(--mono);letter-spacing:.04em;text-transform:uppercase}
.switch button.on{background:var(--ink);color:#fff}

/* One title per section, and one two-column grid (same gap) for the pickers and the results. */
.section{grid-column:1/-1;margin:0;font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
.stepper>.section{padding:10px 16px 0}
.top{display:grid;gap:10px;padding:12px 16px 12px}
.intro{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;padding:8px 16px;border-bottom:2px solid var(--ink);background:var(--surface)}
.intro .hint{margin:0;font-size:12.5px;color:var(--soft)}
.intro kbd{font:11px var(--mono);border:1.5px solid var(--ink);border-radius:4px;padding:0 4px;background:#fff}
.ribbon{display:flex;flex-wrap:wrap;gap:4px;align-items:center;list-style:none;margin:0;padding:0;font:9.5px var(--mono);letter-spacing:.05em;text-transform:uppercase}
.ribbon li{border:1.5px solid var(--ink);border-radius:999px;padding:1px 7px;color:var(--soft);background:#fff}
.ribbon li+li::before{content:"→";margin:0 4px 0 -2px;color:var(--muted)}
.ribbon li+li{border:0;padding-left:0;background:none}
.ribbon li.on{background:var(--orange);color:var(--ink)}
textarea{display:block;width:100%;padding:8px 12px;font:13px/1.55 var(--mono);tab-size:4;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:10px;resize:vertical;outline:none}
textarea:focus{border-color:var(--blue);box-shadow:2px 2px 0 var(--blue)}
.pickers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 24px}
.pickers label{display:grid;gap:4px;min-width:0}
.pickers .label{font-size:10px}
select{width:100%;font:12px var(--mono);border:2px solid var(--ink);border-radius:999px;padding:4px 10px;background:var(--surface);box-shadow:2px 2px 0 var(--ink);cursor:pointer}

.glyphs{display:flex;flex-wrap:wrap;gap:2px;font:14px/1 var(--mono)}
.glyphs .g{border:1.5px solid var(--ink);border-radius:4px;padding:3px 3px;min-width:18px;text-align:center;background:#fff;white-space:pre}
.glyphs .g.multi{background:var(--tint-blue)}
.glyphs .g.changed{background:var(--changed);color:#fff}
.glyphs.small{font-size:13px}
.empty-text{font:11px var(--mono);color:var(--muted)}

.stepper{border-top:2px solid var(--ink);background:var(--row-hi)}
.controls{display:flex;align-items:center;gap:8px;padding:10px 16px}
.controls .switch{flex:none}
.switch button[data-mode=before].on{background:var(--before);color:var(--ink)}
.switch button[data-mode=after].on{background:var(--after);color:#fff}
.controls .btn.small{font-size:13px;padding:3px 11px;border-width:2px;box-shadow:2px 2px 0 var(--ink)}
.controls .btn.small:hover{background:var(--yellow);color:var(--ink)}
.controls .next{font-size:12px;padding:5px 14px;justify-content:center;box-shadow:2px 2px 0 var(--ink);white-space:nowrap}
.controls .btn:disabled{opacity:.35;cursor:default;box-shadow:none}
.progress{flex:1;height:12px;border:2px solid var(--ink);border-radius:999px;background:#fff;cursor:pointer;overflow:hidden}
.progress i{display:block;height:100%;width:calc(100% * var(--w,0));background:var(--yellow);border-right:2px solid var(--ink);transition:width .25s}
#step-count{min-width:44px;text-align:right}

.bytes{display:flex;flex-wrap:wrap;gap:5px 3px;max-height:150px;overflow-y:auto;padding:4px 16px 8px}
.bytes .br{flex-basis:100%;height:0}
.bytes .c{display:inline-flex;flex-direction:column;align-items:center;gap:2px}
.bytes .c>b{font:500 13px/1 var(--mono);min-height:13px;white-space:pre}
.bytes .bs{display:flex;gap:1px}
.bytes .b{font:500 9px/1 var(--mono);font-style:normal;padding:3px 2px;border:1.5px solid var(--ink);border-radius:3px;background:#fff;transition:background .15s,transform .15s}
.bytes .c.multi .b{background:var(--tint-blue)}
.bytes .c .b.scanned{background:var(--checked)}
.bytes .c .b.skip{background:var(--ascii)}
.bytes .c .b.block,.bytes .c .b.ascii{background:var(--ascii);transform:translateY(-3px)}
.bytes .c .b.stable{background:#fff;transform:translateY(-3px)}
.bytes .c .b.unstable,.bytes .c .b.unicode{background:var(--unstable);color:#fff;transform:translateY(-3px)}
.bytes .c .b.hit{background:var(--ink);color:#fff;transform:translateY(-4px)}


.legend{display:flex;flex-wrap:wrap;gap:4px 14px;list-style:none;margin:0;padding:2px 16px 8px;font:10.5px var(--mono);color:var(--soft)}
.legend li{display:flex;align-items:center;gap:5px}
.legend i{width:11px;height:11px;border:1.5px solid var(--ink);border-radius:3px}
.k-multi{background:var(--tint-blue)}
.k-ascii{background:var(--ascii)}
.k-stable{background:#fff}
.k-unstable{background:var(--unstable)}
.k-checked{background:var(--checked)}
.k-hit{background:var(--ink)}

.caption{background:var(--surface);border-top:2px solid var(--ink);padding:10px 16px 8px;min-height:230px}
.caption .kicker{display:block;font:10.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--soft);margin-bottom:2px}
.caption h3.display{font-size:24px;line-height:1.1;margin:0 0 4px}
.caption p{margin:0 0 10px;font-size:15.5px;line-height:1.5}

/* CharacterCache: chars, an elbow arrow, and the 256-entry pages (red: unstable, green: stable). */
.cache{position:relative;border:2px solid var(--ink);border-radius:10px;background:#fff;padding:6px 10px 8px;display:grid;gap:30px}
.cache-head{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font:10.5px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--soft);margin-bottom:-24px}
.cache-count{color:var(--ink);font-weight:500;white-space:nowrap}
.cache-replay{margin-left:auto;font:10.5px var(--mono);border:1.5px solid var(--ink);border-radius:999px;background:var(--surface);padding:1px 8px;cursor:pointer;white-space:nowrap}
.cache-chars{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.cache-chars .g{transition:opacity .2s,box-shadow .2s}
.cache-chars .g.read{opacity:.45}
.cache-chars .g.on{box-shadow:0 0 0 3px var(--orange)}
.cache-pages{display:flex;flex-wrap:wrap;gap:14px;align-items:end}
.page{display:grid;gap:3px;justify-items:center;font:10.5px var(--mono);color:var(--soft)}
.page-grid{position:relative;width:72px;height:72px;border:2px dashed var(--bar-base);border-radius:6px;transition:box-shadow .3s}
.page.built .page-grid{border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.page.fresh .page-grid{box-shadow:0 0 0 4px var(--orange)}
.page-grid canvas{display:block;width:100%;height:100%;image-rendering:pixelated;border-radius:3px}
.page-grid .cell{position:absolute;width:6.25%;height:6.25%;outline:2.5px solid var(--orange);outline-offset:1px}
.cache-arrow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cache-arrow path{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.cache-arrow path.head{fill:var(--ink)}
.lanes{border:2px solid var(--ink);border-radius:10px;background:#fff;padding:6px 10px;overflow-x:auto}
.lanes-head{display:flex;justify-content:space-between;gap:12px;font:10.5px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--soft);margin-bottom:6px}
.lane-row{display:grid;grid-template-columns:70px repeat(16,minmax(26px,1fr));gap:2px;margin-top:2px}
.lane-label{font:10.5px var(--mono);color:var(--soft);align-self:center}
.lane{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1.5px solid var(--ink);border-radius:4px;background:#fff;padding:1px 0;font:500 12px/1.05 var(--mono);white-space:pre}
.lane small{font-size:9px;color:var(--soft)}
.lane.multi{background:var(--tint-blue)}
.lane.hit{background:var(--ink);color:#fff}
.lane.hit small{color:#ddd}
.lane.changed{background:var(--changed);color:#fff}
.lane.changed small{color:#E8F5EC}
.lane.bit{background:var(--tint-neutral);font-size:10px;color:var(--muted)}
.lane.bit.on{background:var(--unstable);color:#fff}
.lane.bit.up{background:var(--rule);color:var(--ink)}

/* One row per stage, name on the left, like the post's "Five small steps" figure. */
.stages{display:grid;gap:3px;border:2px solid var(--ink);border-radius:10px;background:#fff;padding:6px 10px;margin-top:8px}
.stage{display:grid;grid-template-columns:124px minmax(0,1fr);gap:8px;align-items:center}
.stage+.stage{border-top:1px solid var(--line);padding-top:3px}
.stages.inline{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 8px}
.stages.inline .stage{display:grid;grid-template-columns:none;gap:3px;justify-items:start;border:0;padding:0}
.stages .arrow{font:15px var(--mono);color:var(--muted);padding-bottom:3px}
.stage-name{display:flex;gap:5px;align-items:center;font:9.5px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--soft);white-space:nowrap}
.stage-name .removed{border:1.5px solid var(--ink);border-radius:999px;padding:0 5px;color:var(--ink);background:#fff}


.summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 24px;border-top:2px solid var(--ink);padding:12px 16px 14px}
.sum-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px;min-height:31px}
.sum-head .label{font-size:10px}
.sum-head b.display{font-size:20px;font-weight:400}
.sum-bar{display:grid;grid-template-columns:50px 1fr 78px;gap:8px;align-items:center;margin-top:4px;font:11px var(--mono);color:var(--soft)}
.sum-bar i{display:block;height:14px;width:calc(100% * var(--w,0));min-width:4px;border:2px solid var(--ink);border-radius:0 6px 6px 0;background:var(--before);transition:width .3s}
.sum-bar.after i{background:var(--after)}
.sum-bar b{font-weight:500;color:var(--ink);text-align:right}

@media (max-width:1039px){
  /* Stacked: a fixed caption height, so stepping doesn't push the rest of the page around. */
  .caption{height:400px;min-height:0;overflow-y:auto}
  .bytes{height:150px}
}
/* Medium (the blog's 704px iframe): full-width inputs, the step-through, then the results, all in a
   fixed-height card whose caption takes what's left. */
@media (min-width:680px) and (max-width:1039px){
  .card{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto;height:947px}
  .top{grid-row:3}
  .stepper{grid-row:4;display:flex;flex-direction:column;min-height:0}
  .summary{grid-row:5}
  .stepper .caption{height:auto;flex:1;min-height:0}
  textarea{height:7.4em;resize:none}
  .bytes{height:120px}
}
@media (max-width:679px){
  main.embed{padding:4px 10px 14px 4px}
  .card>.panel-head{flex-wrap:wrap;gap:6px}
  .summary,.pickers{grid-template-columns:1fr}
  .lane-row{grid-template-columns:58px repeat(16,minmax(22px,1fr))}
  .controls{flex-wrap:wrap}
  .controls .switch{width:100%;display:flex;justify-content:center}
  .caption{height:440px}
  .stage{grid-template-columns:1fr;gap:2px}
  .stages .glyphs.small{font-size:12px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  .stages .glyphs .g{min-width:15px;padding:2px;flex:none}
  textarea{min-height:9.4em}
}
/* Wide screens: setup and results on the left, the step-through on the right. */
@media (min-width:1040px){
  /* Fixed height, so stepping through never resizes the card: the caption scrolls instead. */
  .card{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);grid-template-rows:auto auto 1fr auto;height:700px}
  .intro{grid-column:1/-1;grid-row:2}
  .card>.panel-head{grid-column:1/-1}
  .top{grid-column:1;grid-row:3;grid-template-rows:auto auto 1fr;min-height:0}
  .summary{grid-column:1;grid-row:4;grid-template-columns:1fr}
  .stepper{grid-column:2;grid-row:3/5;border-top:0;border-left:2px solid var(--ink);display:flex;flex-direction:column;min-width:0;min-height:0}
  .stepper .caption{flex:1;min-height:0;overflow-y:auto}
  textarea{min-height:8em;height:100%;resize:none}
  .bytes{flex:none;max-height:150px}
  .sum-head{flex-wrap:wrap}
}