/* The Blink — base theme. Decks use these variables and components; they never hard-code colours. */
:root {
  --paper: #fbfcf8;
  --bg: #e9ece4;
  --ink: #12161c;
  --ink-2: #4a525e;
  --ink-3: #8a929c;
  --line: #12161c;
  --hair: #cfd4c9;

  --phys: #c4622b;  --phys-soft: #f6dfd0;
  --link: #d99a00;  --link-soft: #fbedc4;
  --net:  #1c9a57;  --net-soft:  #d3efdf;
  --tran: #2563e6;  --tran-soft: #d6e2fc;
  --app:  #c02b7c;  --app-soft:  #f7d6e8;
  --ruby: #d0252f;  --ruby-soft: #f9d5d7;
  --good: #1c9a57;  --bad: #d0252f;

  --accent: var(--app); --accent-soft: var(--app-soft);

  --display: 'Bricolage Grotesque', 'Helvetica Neue', sans-serif;
  --body: 'Atkinson Hyperlegible', 'Helvetica Neue', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* paper grain: one static inline SVG, painted once, no runtime cost */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  --road: 0%;              /* how far along the trunk road we are; set by the engine */
  --wash: 4%;              /* how much of the layer colour tints the page */
}
[data-layer="phys"] { --accent: var(--phys); --accent-soft: var(--phys-soft); }
[data-layer="link"] { --accent: var(--link); --accent-soft: var(--link-soft); }
[data-layer="net"]  { --accent: var(--net);  --accent-soft: var(--net-soft); }
[data-layer="tran"] { --accent: var(--tran); --accent-soft: var(--tran-soft); }
[data-layer="app"]  { --accent: var(--app);  --accent-soft: var(--app-soft); }
[data-layer="ruby"] { --accent: var(--ruby); --accent-soft: var(--ruby-soft); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ink); overflow: hidden; }
body { font-family: var(--body); color: var(--ink); -webkit-font-smoothing: antialiased; }

#frame {
  position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px;
  transform-origin: center center; overflow: hidden;
  /* the page: grain over a graph grid over paper washed with this layer's colour */
  background-color: color-mix(in srgb, var(--accent) var(--wash), var(--bg));
  background-image:
    var(--grain),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, color-mix(in srgb, var(--accent) 50%, #12161c) 8%, transparent) 1px, transparent 1.4px);
  background-size: 180px 180px, 24px 24px;
  background-blend-mode: multiply, normal;
  transition: background-color .4s;
}
/* the layer band: the top edge of every page is the colour of the layer you are standing on */
#frame::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; z-index: 15;
  background: var(--accent); box-shadow: 0 1px 0 rgba(18,22,28,.28);
  pointer-events: none; transition: background .4s;
}
/* the page is lit from the middle, not flat */
#frame::after {
  content: ''; position: absolute; inset: 0; z-index: 14; pointer-events: none;
  background: radial-gradient(120% 95% at 50% 42%, transparent 52%, rgba(18,22,28,.085) 100%);
}
#stage { position: absolute; inset: 0 0 56px 0; }

/* ---------- the layer spine: the cake you have built so far, lit at your floor ---------- */
#spine { position: absolute; left: 17px; top: 62px; bottom: 90px; width: 25px; z-index: 12; pointer-events: none; display: flex; flex-direction: column; gap: 7px; }
#spine i { flex: 1; border-radius: 7px; border: 2px solid rgba(18,22,28,.16); border-style: dashed; transition: background .35s, border-color .35s, box-shadow .35s; }
#spine i[data-l="phys"] { --lc: var(--phys); } #spine i[data-l="link"] { --lc: var(--link); }
#spine i[data-l="net"]  { --lc: var(--net); }  #spine i[data-l="tran"] { --lc: var(--tran); }
#spine i[data-l="app"]  { --lc: var(--app); }  #spine i[data-l="ruby"] { --lc: var(--ruby); }
#spine i.built { border-style: solid; border-color: color-mix(in srgb, var(--lc) 55%, transparent); background: color-mix(in srgb, var(--lc) 24%, transparent); }
#spine i.here { border-style: solid; border-color: var(--line); background: var(--lc); box-shadow: 2.5px 3px 0 rgba(18,22,28,.85); }

/* ---------- slide ---------- */
.slide { position: absolute; inset: 0; padding: 52px 84px 36px; display: flex; flex-direction: column; font-size: 22px; line-height: 1.5; }
.slide.enter-fwd { animation: inF .38s cubic-bezier(.2,.7,.2,1) both; }
.slide.enter-back { animation: inB .38s cubic-bezier(.2,.7,.2,1) both; }
@keyframes inF { from { opacity: 0; transform: translateX(26px); } }
@keyframes inB { from { opacity: 0; transform: translateX(-26px); } }

.slide h1 { font-family: var(--display); font-weight: 800; font-size: 60px; line-height: 1.02; letter-spacing: -.025em; margin: 0 0 22px; }
.slide h2 { font-family: var(--display); font-weight: 700; font-size: 38px; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 16px; }
.slide h3 { font-family: var(--display); font-weight: 700; font-size: 24px; margin: 0 0 8px; }
.slide p { margin: 0 0 16px; max-width: 34em; }
.slide b, .slide strong { font-weight: 700; }
.slide em.hl, .slide mark { font-style: normal; background: var(--accent-soft); padding: 0 .2em; border-radius: 4px; color: inherit; }
.kicker { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.kicker::before { content: ''; width: 22px; height: 3px; background: var(--accent); border-radius: 2px; }
.small { font-size: 18px; color: var(--ink-2); }
.tiny { font-size: 15px; color: var(--ink-2); }
.note { font-family: var(--mono); font-size: 13.5px; line-height: 1.45; color: var(--ink-3); max-width: 60em; }
.note::before { content: 'simplified: '; color: var(--ink-2); font-weight: 700; }
.note.plain::before { content: none; }
.mono, code { font-family: var(--mono); font-size: .88em; }
code { background: rgba(18,22,28,.07); padding: .08em .35em; border-radius: 5px; }
kbd { font-family: var(--mono); font-size: .75em; border: 1.5px solid currentColor; border-bottom-width: 3px; border-radius: 5px; padding: 0 .4em; }

/* layout primitives */
.center { margin: auto; text-align: center; max-width: 860px; display: flex; flex-direction: column; align-items: center; }
.center p { margin-left: auto; margin-right: auto; }
.split { display: grid; grid-template-columns: 400px 1fr; gap: 48px; flex: 1; min-height: 0; align-items: center; }
.split.wide-text { grid-template-columns: 500px 1fr; }
.split.flip { grid-template-columns: 1fr 400px; }
.stack { display: flex; flex-direction: column; gap: 18px; flex: 1; min-height: 0; }
.row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; min-height: 0; }
.takeaway { font-family: var(--display); font-size: 34px; font-weight: 700; line-height: 1.18; letter-spacing: -.015em; max-width: 22em; }
.but { font-family: var(--display); font-size: 26px; color: var(--ink-2); max-width: 26em; border-left: 3px solid var(--accent); padding-left: 17px; }
.center .but { border-left: 0; padding-left: 0; }
.but b { color: var(--ink); background: var(--accent-soft); padding: 0 .25em; border-radius: 5px; }

/* demo panel */
.demo { background: var(--paper); border: 2.5px solid var(--line); border-radius: 16px; box-shadow: 5px 6px 0 color-mix(in srgb, var(--accent) 20%, rgba(18,22,28,.9)); padding: 20px; position: relative; }
.demo.flat { box-shadow: none; }
.demo-label { position: absolute; top: -12px; left: 18px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 9px; border-radius: 6px; }
.readout { font-family: var(--mono); font-size: 15px; color: var(--ink-2); }
.readout b { color: var(--ink); font-size: 1.25em; }

/* controls */
.btn { font-family: var(--body); font-size: 18px; font-weight: 700; color: var(--ink); background: var(--paper); border: 2.5px solid var(--line); border-radius: 12px; padding: 9px 18px; cursor: pointer; box-shadow: 3px 3px 0 var(--line); transition: transform .08s, box-shadow .08s, background .15s; }
.btn:hover:not(:disabled) { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--line); background: var(--accent-soft); }
.btn:active:not(:disabled) { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--line); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.08); }
.btn.big { font-size: 22px; padding: 13px 26px; border-radius: 14px; }
.btn.sm { font-size: 15px; padding: 5px 12px; border-radius: 9px; box-shadow: 2px 2px 0 var(--line); }
.chip { font-family: var(--mono); font-size: 14.5px; font-weight: 700; border: 2px solid var(--line); background: var(--paper); border-radius: 999px; padding: 5px 13px; cursor: pointer; color: var(--ink); transition: background .12s; }
.chip:hover { background: var(--accent-soft); }
.chip.on { background: var(--ink); color: var(--paper); }
.chip:disabled { opacity: .4; cursor: default; }
label.ctl { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 14px; color: var(--ink-2); }
label.ctl output { color: var(--ink); font-weight: 700; min-width: 4.5em; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 200px; height: 6px; border-radius: 3px; background: var(--ink); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); border: 2.5px solid var(--ink); cursor: grab; box-shadow: 2px 2px 0 var(--ink); }
input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 2.5px solid var(--ink); cursor: grab; }
input[type=text], textarea { font-family: var(--mono); font-size: 16px; border: 2px solid var(--line); border-radius: 9px; padding: 7px 10px; background: var(--paper); color: var(--ink); outline: none; }
input[type=text]:focus, textarea:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
.toggle { display: inline-flex; border: 2.5px solid var(--line); border-radius: 11px; overflow: hidden; box-shadow: 3px 3px 0 var(--line); }
.toggle button { font-family: var(--mono); font-size: 14.5px; font-weight: 700; background: var(--paper); color: var(--ink); border: 0; padding: 7px 14px; cursor: pointer; border-right: 2px solid var(--line); }
.toggle button:last-child { border-right: 0; }
.toggle button.on { background: var(--ink); color: var(--paper); }

/* code & terminal */
.code { font-family: var(--mono); font-size: 15.5px; line-height: 1.6; background: #151a21; color: #e6e9ee; border-radius: 12px; padding: 16px 20px; white-space: pre; overflow: hidden; border: 2.5px solid var(--line); }
.code .c { color: #7d8794; } .code .k { color: #ff7b89; } .code .s { color: #9bdc8c; } .code .n { color: #7fb4ff; } .code .y { color: #ffd166; }
.code .ln { display: block; padding: 0 6px; margin: 0 -6px; border-radius: 5px; }
.code .ln.on { background: rgba(255,209,102,.18); box-shadow: inset 3px 0 0 #ffd166; }
.term { font-family: var(--mono); font-size: 15px; line-height: 1.55; background: #151a21; color: #cfd6df; border-radius: 12px; border: 2.5px solid var(--line); padding: 14px 18px; white-space: pre-wrap; overflow: hidden; }
.term .out { color: #9bdc8c; } .term .err { color: #ff8f9a; } .term .dim { color: #6f7a88; }

/* doors */
a.door, button.door { font: inherit; color: inherit; cursor: pointer; text-decoration: none; background: linear-gradient(var(--accent-soft), var(--accent-soft)) no-repeat 0 100% / 100% 38%; border: 0; border-bottom: 2.5px dashed var(--accent); padding: 0 .15em; border-radius: 3px 3px 0 0; transition: background-size .18s; white-space: nowrap; }
a.door::after, button.door::after { content: ' ↳'; font-family: var(--mono); font-size: .8em; color: var(--accent); font-weight: 700; }
a.door:hover, button.door:hover { background-size: 100% 100%; }
.doors { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.door-card { font: inherit; text-align: left; cursor: pointer; background: var(--paper); border: 2.5px dashed var(--accent); border-radius: 14px; padding: 12px 16px; max-width: 330px; color: var(--ink); transition: transform .1s, background .15s; }
.door-card:hover { background: var(--accent-soft); transform: translateY(-2px); }
.door-card b { display: block; font-family: var(--display); font-size: 19px; }
.door-card span { font-size: 15px; color: var(--ink-2); }
.door-card b::after { content: ' ↳'; color: var(--accent); font-family: var(--mono); }

/* bets */
.bet { margin-top: 8px; }
.bet-opts { display: flex; gap: 14px; flex-wrap: wrap; justify-content: inherit; }
.center .bet-opts { justify-content: center; }
.bet-opt.picked { background: var(--ink); color: var(--paper); opacity: 1 !important; }
.bet-opt.right:disabled { border-color: var(--good); box-shadow: 3px 3px 0 var(--good); opacity: 1; }
.bet-opt.picked.right { background: var(--good); }
.bet-reply { opacity: 0; transform: translateY(6px); transition: all .35s; margin-top: 18px; font-size: 20px; max-width: 34em; min-height: 3em; }
.bet-reply.show { opacity: 1; transform: none; }
.center .bet-reply { margin-left: auto; margin-right: auto; }

.pkt { overflow: visible; vertical-align: middle; }
.pkt-label { font-family: var(--mono); font-size: 12px; fill: var(--ink-2); }

/* layer pills */
.lay-pill { display: inline-block; font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; border: 2px solid var(--accent); background: var(--accent-soft); color: var(--ink); }

/* ---------- bottom bar ---------- */
#bar { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: var(--ink); color: var(--paper); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 18px; gap: 16px; font-family: var(--mono); font-size: 13.5px; z-index: 20; }
/* the road: the whole trunk, in layer order, with the part you have walked lit */
#bar::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--phys) 0%, var(--link) 12%, var(--net) 26%, var(--tran) 42%, var(--app) 62%, var(--ruby) 88%); }
#bar::after { content: ''; position: absolute; top: 0; left: var(--road, 0%); right: 0; height: 3px; background: rgba(18,22,28,.74); }
#bar button { font-family: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.bar-map { display: flex; align-items: center; gap: 8px; font-size: 13.5px; opacity: .85; padding: 6px 10px; border-radius: 8px; position: absolute; left: 12px; }
.bar-map:hover { opacity: 1; background: rgba(255,255,255,.1); }
.bar-map svg circle { fill: currentColor; } .bar-map svg path { stroke: currentColor; }
.bar-title { padding-left: 92px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .8; display: flex; align-items: center; gap: 9px; }
.bar-title .lay { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); display: inline-block; flex: none; }
.bar-title em { font-style: normal; color: var(--accent); filter: brightness(1.5); }
.dots { display: flex; gap: 9px; justify-content: center; }
.dot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--paper) !important; opacity: .3; padding: 0; transition: transform .12s, opacity .12s; }
.dot.seen { opacity: .85; } .dot.seen:hover { transform: scale(1.25); opacity: 1; }
.dot.on { background: var(--paper) !important; opacity: 1; }
.dot:disabled { cursor: default !important; }
.bar-right { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.gate-hint { opacity: .7; font-size: 12.5px; margin-right: 4px; color: #ffd166; }
.bar-prev, .bar-next { font-size: 19px !important; height: 38px; min-width: 44px; border-radius: 10px; border: 2px solid var(--paper) !important; padding: 0 12px; font-weight: 700; }
.bar-prev:disabled { opacity: .25; cursor: default !important; }
.bar-next { background: var(--paper) !important; color: var(--ink) !important; }
.bar-next.onward { font-size: 14.5px !important; padding: 0 16px; background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
.bar-next.locked { opacity: .3; background: none !important; color: var(--paper) !important; }
.bar-next.pop { animation: pop .5s cubic-bezier(.3,1.6,.5,1); }
.bar-next.nudge { animation: nudge .35s; }
@keyframes pop { 0% { transform: scale(.8); } 60% { transform: scale(1.18); } }
@keyframes nudge { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ---------- map ---------- */
#map { position: absolute; inset: 0; background: var(--ink); color: var(--paper); z-index: 30; opacity: 0; pointer-events: none; transition: opacity .25s;
  background-image: radial-gradient(circle at 1px 1px, rgba(251,252,248,.07) 1px, transparent 1.4px); background-size: 26px 26px; }
#map.open { opacity: 1; pointer-events: auto; }
.map-head { position: absolute; left: 40px; right: 40px; top: 18px; display: flex; align-items: baseline; gap: 22px; z-index: 2; }
.map-head h2 { font-family: var(--display); font-size: 26px; margin: 0; }
.map-cap { flex: 1; margin: 0; font-size: 15px; opacity: .75; font-family: var(--mono); }
.map-cap b { color: #ffd166; }
.map-close { background: none !important; color: var(--paper) !important; border-color: var(--paper) !important; box-shadow: none !important; font-size: 14px !important; padding: 5px 12px !important; }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the road changes colour as the stack gets built under you */
.map-trunk { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; opacity: .92; }
.map-branch { fill: none; stroke: rgba(251,252,248,.45); stroke-width: 2.5; stroke-dasharray: 5 6; }
.map-node { cursor: pointer; outline: none; }
.map-node .hit { fill: transparent; }
.map-node .ring { fill: var(--ink); stroke: var(--accent); stroke-width: 4; transition: r .15s; }
.map-node.part .ring { fill: color-mix(in srgb, var(--accent) 45%, var(--ink)); }
.map-node.done .ring, .map-node.here .ring { fill: var(--accent); }
.map-node .tick { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.map-node .halo { fill: none; stroke: #ffd166; stroke-width: 3; stroke-dasharray: 4 5; animation: spin 9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.map-node text { fill: var(--paper); font-family: var(--mono); font-size: 12.5px; opacity: .8; }
.map-node.branch text { font-size: 11.5px; opacity: .65; }
.map-node:hover text, .map-node:focus text, .map-node.here text { opacity: 1; fill: #ffd166; }
.map-node:hover .ring, .map-node:focus .ring { stroke: #ffd166; }
.map-legend { position: absolute; left: 40px; bottom: 16px; display: flex; gap: 20px; font-family: var(--mono); font-size: 12px; opacity: .85; }
.map-legend span { display: flex; align-items: center; gap: 7px; }
.map-legend i { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); display: inline-block; }