@font-face{font-family:pixel;src:url(/pixel.ttf) format("truetype");font-display:swap}
@font-face{font-family:departure;src:url(/departure.woff2) format("woff2");font-display:swap}
:root{--paper:#f4ead6;--paper-deep:#e9dcc0;--paper-wash:#d9c9a5;--wood:#8a5a2b;--wood-dark:#5c3a1a;--ink:#2b2118;--ink-soft:#5a4a3a;--grass:#7bbf5a;--sky:#7ab8d9;--ember:#e2632f;--gold:#e0b13a;--blood:#c23b3b;--grey:#b0ada0;--green:#7bbf5a;--blue:#4fa4d8;--purple:#b070d8;--red:#e04848;--kind-ink:#5a4a3a;--field:#fbf3e2;--focus:#8a5a2b;--selection:#d9c9a5;--disabled:#a4988a;--s1:4px;--s2:8px;--s3:16px;--s4:24px;--corner:2px;--line:1px;--shadow:0 1px 0 rgba(43,33,24,.4);--on-wood:#f4ead6;--font-pixel:departure,pixel,ui-monospace,monospace;--font-prose:departure,ui-monospace,Menlo,monospace;--grain:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAABLUlEQVR4nO2aOw7CMBAFfdqcixNRc4AUFCkoOACiQytFG382s8GvmAYJMzsCO0Qp79daZgYXoCnPx235hRayRPspQDahXo/a1xWAGiALuABN+AdE/2Tu67Z8UYDRAbJsdtEoAC1AgwvQ4AI0uAANLuDRuhnvHY92PXzA6QJQx2uaP0PTBzgb71IZF1SA4AE98AEUwCHdTVEF+DNwARpcgAYXoMEFWuk9/hQgKsAosbNQACs+y+1wBbABPGrDXCWkArS+8eiDCNk3RQWIWtiG8H4KtY+2jPJSAPorSIML0Axb6CrHngL0BojelBQge4Dsg9ZeiCmAt2DrpezogaMuqRWAGogKakMqwNmDZAMXoMEFaHABmu4F6M3xKHvHqALQYjS4AA0uUHvzVAEG8wG0Doy1Oo8IAgAAAABJRU5ErkJggg==);--ease:120ms ease-out;--px1:8px;--px2:16px;--px3:24px;--wide:720px}
/* eight: the dark - slate defines every token the paper palette does (the same set as
   web/tokens.css: the inks and grounds, the woods, the named colours, the rarity ramp, the kind
   glyph ink, field/focus/selection/disabled) so nothing falls back to paper's value. the site's
   wood-dark stays lamp-lit: links and headings wear it, so they read.
   eleven: frame - the dark grain is a true whisper now: a paper-coloured veil rides over the
   speckle so only a breath of texture is left (light keeps its full grain); and blood lifts to
   the lamp-lit red so error lines read on the dark paper */
:root[data-theme=slate]{--grain:linear-gradient(rgba(42,37,32,.88),rgba(42,37,32,.88)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAABDUlEQVR42u2bPQ7CMAxGcxqGzt24BDsn4B7ckeOAEEJClVDaJql/vjd4axXn1Z/jxGmZprl4tOfjcnpb7bn77Xr+ta3jFAAYTbDV8V4GAK+OHQUYAFEnGD4HhAEwejmylhwAkIA6gLUhDgAkMDZ5WX0IAKhsev75AYAsyWyvhABAJQiAHAcbAEACAADAGgmlLYTCADh607Oc+HJ8AJAEAaDZFAUAEgDAB0D0NnirFAGQPcnVCjEAZC2B3a0C8gCoA1QB9A79Xkn26xcA1DY/su1x8yS4F0SrhGrvA8BbyNbG7+0fACiEAJCzBSZ3SWoYAOtWVpj/BdIC4IqMOgDvV11b/QVAtEPM3gc18gBe3iDRFIUOlb8AAAAASUVORK5CYII=);--paper:#2a2520;--paper-deep:#211d19;--paper-wash:#3a332c;--wood:#6b4522;--wood-dark:#d9a868;--ink:#f2e8d2;--ink-soft:#c2b298;--on-wood:#efe3c8;--grass:#7bbf5a;--sky:#7ab8d9;--ember:#e2632f;--gold:#e0b13a;--blood:#e05a5a;--grey:#6f6a60;--green:#7bbf5a;--blue:#4fa4d8;--purple:#b070d8;--red:#e05a5a;--kind-ink:#c2b298;--field:#211d19;--focus:#d9a868;--selection:#3a332c;--disabled:#6f6a60;--shadow:0 1px 0 rgba(0,0,0,.5)}
@media (prefers-color-scheme:dark){:root:not([data-theme=paper]){--grain:linear-gradient(rgba(42,37,32,.88),rgba(42,37,32,.88)),url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAABDUlEQVR42u2bPQ7CMAxGcxqGzt24BDsn4B7ckeOAEEJClVDaJql/vjd4axXn1Z/jxGmZprl4tOfjcnpb7bn77Xr+ta3jFAAYTbDV8V4GAK+OHQUYAFEnGD4HhAEwejmylhwAkIA6gLUhDgAkMDZ5WX0IAKhsev75AYAsyWyvhABAJQiAHAcbAEACAADAGgmlLYTCADh607Oc+HJ8AJAEAaDZFAUAEgDAB0D0NnirFAGQPcnVCjEAZC2B3a0C8gCoA1QB9A79Xkn26xcA1DY/su1x8yS4F0SrhGrvA8BbyNbG7+0fACiEAJCzBSZ3SWoYAOtWVpj/BdIC4IqMOgDvV11b/QVAtEPM3gc18gBe3iDRFIUOlb8AAAAASUVORK5CYII=);--paper:#2a2520;--paper-deep:#211d19;--paper-wash:#3a332c;--wood:#6b4522;--wood-dark:#d9a868;--ink:#f2e8d2;--ink-soft:#c2b298;--on-wood:#efe3c8;--grass:#7bbf5a;--sky:#7ab8d9;--ember:#e2632f;--gold:#e0b13a;--blood:#e05a5a;--grey:#6f6a60;--green:#7bbf5a;--blue:#4fa4d8;--purple:#b070d8;--red:#e05a5a;--kind-ink:#c2b298;--field:#211d19;--focus:#d9a868;--selection:#3a332c;--disabled:#6f6a60;--shadow:0 1px 0 rgba(0,0,0,.5)}}
/* seven: in the dark the wordmark (ink on clear) flips to lamp-light and keeps its green; the
   lit wood is what links and headings wear, so they read */
:root[data-theme=slate] .mark img{filter:invert(1) hue-rotate(180deg)}
@media (prefers-color-scheme:dark){:root:not([data-theme=paper]) .mark img{filter:invert(1) hue-rotate(180deg)}}
/* the live line's sky glyph is ink pigment; in the dark it flips to lamp-light, as the game's
   glyphs do (web/style.css) */
:root[data-theme=slate] .live .sprite{filter:invert(1) hue-rotate(180deg)}
@media (prefers-color-scheme:dark){:root:not([data-theme=paper]) .live .sprite{filter:invert(1) hue-rotate(180deg)}}
*{box-sizing:border-box;margin:0}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{background-color:var(--paper);background-image:var(--grain);background-repeat:repeat;image-rendering:pixelated;color:var(--ink);display:flex;flex-direction:column;font:14px/22px var(--font-prose);min-height:100vh;padding:0 var(--s3) env(safe-area-inset-bottom)}
img,.sprite{image-rendering:pixelated}
/* nits: the underline is the link's own colour, faded — it reads on paper and on slate alike */
a{color:var(--wood-dark);text-decoration:underline;text-decoration-color:var(--paper-wash);text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color var(--ease)}
a:hover{text-decoration-color:currentColor}
h1,h2,h3,th,.chip,.key,.doors,.side,footer,.btn,.live{font-family:var(--font-pixel);font-weight:400;letter-spacing:0}
/* nits: the headings step like markdown - 32, 24, 16 - so the sections read in the dark too */
h1{font-size:32px;line-height:40px;margin:0 0 var(--s3)}
h2{border-bottom:var(--line) solid var(--wood);color:var(--wood-dark);font-size:var(--px3);line-height:32px;margin:32px 0 var(--s2);padding-bottom:var(--s1)}
h2:first-child{margin-top:0}
h3{color:var(--ink);font-size:var(--px2);line-height:24px;margin:var(--s4) 0 var(--s1)}
p,ul,ol,table,pre,dl,figure{margin:0 0 var(--s2)}
p{margin-bottom:12px}
ul,ol{padding-left:var(--s4)}
li{margin:var(--s1) 0}
i,em{font-style:italic}
small,.dim{color:var(--ink-soft)}
hr{border:0;border-top:var(--line) solid var(--wood);margin:var(--s4) 0}
code{background:var(--paper-deep);border-radius:var(--corner);font:13px/20px var(--font-prose);overflow-wrap:anywhere;padding:0 var(--s1)}
pre{background:var(--paper-deep);border-radius:var(--corner);font:13px/20px var(--font-prose);overflow-wrap:anywhere;overflow-x:auto;padding:var(--s2) 44px var(--s2) var(--s3);position:relative;white-space:pre-wrap}
pre code{background:none;padding:0}
pre .copy{align-items:center;background:var(--paper);border:var(--line) solid var(--paper-wash);border-radius:var(--corner);color:var(--ink-soft);cursor:pointer;display:flex;height:32px;justify-content:center;padding:0;position:absolute;right:var(--s1);top:var(--s1);transition:color var(--ease);width:32px}
pre .copy:hover{color:var(--ink)}
pre .copy .icon+.icon,pre .copy.done .icon:first-child{display:none}
pre .copy.done .icon+.icon{color:var(--grass);display:block}
table{border-collapse:collapse;width:100%}
th,td{border-top:var(--line) solid var(--paper-wash);padding:var(--s1) var(--s2) var(--s1) 0;text-align:left;vertical-align:top}
tr:first-child>th,tr:first-child>td{border-top:0}
th{color:var(--wood-dark);font-size:var(--px2);line-height:24px}
dl{display:grid;gap:var(--s1) var(--s3);grid-template-columns:max-content 1fr}
dt{color:var(--ink-soft)}
dd{min-width:0}
/* seven: small clicky key caps: half the old height, a 1px lip, dense */
.key{align-items:center;background:var(--paper);border:var(--line) solid var(--ink);border-bottom-width:2px;border-radius:var(--corner);box-shadow:0 1px 0 var(--paper-wash);color:var(--ink);display:inline-flex;font-size:11px;height:16px;justify-content:center;line-height:14px;margin:0 1px;min-width:16px;padding:0 var(--s1);vertical-align:middle}
.key .icon{color:var(--ink);height:8px;width:8px}
.chip{background:var(--paper-deep);border-radius:var(--corner);color:var(--ink-soft);display:inline-block;font-size:var(--px2);line-height:20px;padding:0 var(--s2);vertical-align:middle;white-space:nowrap}
.chip.grey{background:var(--paper-wash);color:var(--ink)}
.chip.green{background:var(--green);color:var(--ink)}
.chip.blue{background:var(--blue);color:var(--ink)}
.chip.purple{background:var(--purple);color:var(--paper)}
.chip.gold{background:var(--gold);color:var(--ink)}
.chip.open{background:var(--grass);color:var(--ink)}
/* seven: wiki — the rarity ramp's last colour (a relic is red) and the chip's inked face */
.chip.red{background:var(--red);color:var(--paper)}
.chip.rarity.green,.chip.rarity.blue,.chip.rarity.gold{color:#2b2118}
.chips{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);margin:0 0 var(--s2)}
.btn{align-items:center;background:var(--wood);border:var(--line) solid var(--wood-dark);border-radius:var(--corner);box-shadow:var(--shadow);color:var(--on-wood);display:inline-flex;font-size:var(--px2);justify-content:center;line-height:24px;min-height:44px;padding:0 var(--s4);text-decoration:none;transition:background var(--ease)}
.btn:hover{background:var(--wood-dark);color:var(--paper)}
.btn:active{background:var(--ink);box-shadow:none;color:var(--paper);transform:translateY(1px)}
.btns{display:flex;flex-wrap:wrap;gap:var(--s3)}
.sprite{background:url(/atlas.png) no-repeat;display:block}
.box.ringed{box-shadow:inset 0 0 0 2px var(--rarity,transparent)}
.craft{align-items:center;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);margin:0 0 var(--s3)}
.craft .mats{align-items:flex-end;display:flex;flex-wrap:wrap;gap:var(--s1)}
.craft .mat{align-items:flex-end;display:inline-flex;gap:3px;text-decoration:none}
.craft .mat b{font:13px/18px var(--font-pixel);font-weight:400}
.craft>.icon{color:var(--ink-soft);flex:none}
.craft .time{font-family:var(--font-pixel);font-size:var(--px2)}
.craft .how{align-items:center;color:var(--ink);display:inline-flex;flex-wrap:wrap;gap:0 var(--s2)}
.thing{align-items:center;display:inline-flex;gap:4px;vertical-align:-4px;white-space:nowrap}
.thing .sprite{flex:none}
.box{align-items:center;background:var(--paper-deep);border-radius:var(--corner);display:inline-flex;flex:none;justify-content:center;overflow:hidden;vertical-align:middle}
.swatch{border:var(--line) solid var(--ink);border-radius:var(--corner);display:inline-block;height:12px;vertical-align:middle;width:12px}
.field{align-items:center;background:var(--paper);border:var(--line) solid var(--paper-wash);border-radius:var(--corner);color:var(--ink-soft);display:flex;gap:var(--s2);margin:0 0 var(--s3);min-height:44px;padding:0 var(--s3);transition:border-color var(--ease)}
.field:focus-within{border-color:var(--wood)}
.field input{background:none;border:0;color:var(--ink);flex:1;font:inherit;min-width:0;outline:none;padding:var(--s2) 0}

/* the shell: one column, the strip, the doors, the footer. the strip and the footer hold one
   width on every page, so the doors never shift underfoot between the wiki and the rest */
.top,.page,footer{margin:0 auto;max-width:var(--wide);width:100%}
.top,footer{max-width:920px}
.top{align-items:center;border-bottom:var(--line) solid var(--wood);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);justify-content:space-between;padding:var(--s3) 0}
.mark{display:inline-flex;line-height:0}
.mark img{display:block;height:auto;max-width:100%}
.doors{display:flex;flex-wrap:wrap;font-size:var(--px2);gap:0 var(--s3);line-height:24px}
.doors a{color:var(--ink);padding:10px 0;text-decoration:none;transition:color var(--ease)}
.doors a:hover{color:var(--wood-dark)}
.doors a[aria-current]{text-decoration:underline;text-decoration-color:var(--grass);text-decoration-thickness:2px;text-underline-offset:4px}
.page{flex:1;padding:var(--s4) 0}
main{min-width:0}
footer{align-items:center;border-top:var(--line) solid var(--wood);color:var(--ink-soft);display:flex;flex-wrap:wrap;font-size:var(--px2);gap:0 var(--s3);line-height:24px;padding:var(--s3) 0}
footer a{color:var(--ink-soft);padding:10px 0;text-decoration:none}
footer a:hover{color:var(--ink)}
footer .by{align-items:center;display:inline-flex;gap:var(--s2);margin-right:auto;padding:10px 0}
footer .rubric{display:block;height:16px;width:16px}
.crumb{color:var(--ink-soft);font-size:13px;line-height:20px;margin:0 0 var(--s2)}
.foot{color:var(--ink-soft);margin-top:var(--s4)}
.grid{display:grid;gap:0 var(--s3);grid-template-columns:repeat(auto-fill,minmax(160px,1fr));list-style:none;padding:0}
.grid a{align-items:center;display:flex;gap:var(--s2);min-height:36px;overflow:hidden;text-decoration:none;white-space:nowrap}
.grid a span:last-child{overflow:hidden;text-overflow:ellipsis}
.grid a:hover{text-decoration:underline}
.grid a[hidden]{display:none}
.head{align-items:center;display:flex;gap:var(--s3);margin:0 0 var(--s3)}
.head h1{margin:0}
.head .box{flex:none}
.map{display:inline-block;line-height:0;margin:0 0 var(--s2)}
.map .row{white-space:nowrap}
.map .cell{display:inline-block;height:32px;position:relative;vertical-align:top;width:32px}
.map .cell .sprite{left:0;position:absolute;top:0}
.steps{counter-reset:s;list-style:none;padding:0}
.steps li{margin:0 0 var(--s2);padding-left:32px;position:relative}
.steps li::before{color:var(--wood-dark);content:counter(s);counter-increment:s;font:var(--px2)/22px var(--font-pixel);left:0;position:absolute}
.routes p{margin:var(--s3) 0 var(--s1)}
.routes p code{font-weight:700}

/* seven: the guide — pictures in the prose, section postcards, the book's screenshots, dense
   tables, the drawn tree, and a lead line */
.lead{font-size:15px;line-height:24px;margin:0 0 var(--s3)}
.pic{display:inline-flex;margin:0 3px 0 0;vertical-align:-3px}
.pic .sprite{display:inline-block}
h4{color:var(--ink-soft);font:var(--px2)/24px var(--font-pixel);margin:var(--s3) 0 var(--s1)}
h4 .pic{vertical-align:-2px}
.scene{border:var(--line) solid var(--ink);border-radius:var(--corner);box-shadow:var(--shadow);display:block;height:auto;margin:0 0 var(--s3);max-width:100%}
.shot{margin:var(--s2) 0 var(--s3)}
.shot img{border:var(--line) solid var(--ink);border-radius:var(--corner);box-shadow:var(--shadow);display:block;height:auto;max-width:100%}
.shot figcaption{color:var(--ink-soft);font-size:13px;line-height:20px;margin:var(--s1) 0 0}
table.dense{font-size:13px;line-height:18px}
.scroll{margin:0 0 var(--s2);overflow-x:auto}
.scroll table{margin:0}
table.dense th,table.dense td{padding:3px var(--s2) 3px 0}
table.dense th{font-size:13px;line-height:18px}
table.keys{font-size:13px;line-height:18px}
table.keys th{font-family:var(--font-prose);padding:3px var(--s2) 3px 0;white-space:nowrap}
table.keys td{padding:3px 0}
.steps li{margin:0 0 var(--s2)}
.treebox{margin:0 0 var(--s2);overflow-x:auto;padding-bottom:var(--s1)}
.tree{position:relative}
.tree svg{left:0;position:absolute;top:0}
.tree .age{color:var(--ink-soft);font:11px/14px var(--font-pixel);padding:0 0 0 4px;position:absolute;top:0;white-space:nowrap}
.tree .age b{align-items:center;color:var(--wood-dark);display:flex;font-size:11px;font-weight:400;gap:4px;line-height:18px}
.tree .age b .pic{margin:0;vertical-align:0}
.tree .age span{display:block;padding-left:20px}
.tree svg{color:var(--wood)}
.tree svg path{stroke-linejoin:round}
.nowrap{white-space:nowrap}
.tree .node{align-items:center;background:var(--paper);border:var(--line) solid var(--ink);border-radius:var(--corner);box-shadow:var(--shadow);color:var(--ink);display:flex;font:11px/14px var(--font-pixel);gap:3px;overflow:hidden;padding:0 3px;position:absolute;text-decoration:none;white-space:nowrap}
.tree .node:hover{background:var(--paper-deep)}
.tree .node .pic{margin:0;vertical-align:0}
.tree .node .sprite{flex:none}

/* the left nav: beside the column from 720 up, a wrapping row under it */
.with-side{--wide:920px}
.with-side .page{display:grid;gap:var(--s4);grid-template-columns:176px minmax(0,720px)}
.side{align-self:start;font-size:var(--px2);line-height:24px;position:sticky;top:var(--s3)}
.side a{color:var(--ink);display:block;padding:6px 0;text-decoration:none}
.side a:hover{color:var(--wood-dark)}
.side a.sub{padding-left:var(--s3)}
.side a[aria-current]{text-decoration:underline;text-decoration-color:var(--grass);text-decoration-thickness:2px;text-underline-offset:4px}
.side b{color:var(--ink-soft);display:block;padding:var(--s3) 0 var(--s1)}
@media (max-width:719px){
 .with-side .page{display:block}
 .side{border-bottom:var(--line) solid var(--paper-wash);display:flex;gap:0 var(--s3);margin:0 -16px var(--s4);overflow-x:auto;padding:0 var(--s3);position:static;scrollbar-width:none;white-space:nowrap}
 .side::-webkit-scrollbar{display:none}
 .side a{padding:10px 0}.side a.sub{padding-left:0}.side b{display:none}
 dl{grid-template-columns:1fr}dt{margin-top:var(--s1)}
 .scroll table{min-width:560px}
}
@media (pointer:coarse){pre .copy{height:44px;width:44px}pre{padding-right:56px}.side a{padding:10px 0}}

/* the door: the words on the left, the postcard on the right; one column on a phone.
   eleven: frame - the hero stands in the middle of the viewport, not against the strip: the
   page is the flexed room between strip and footer and the words rest at its centre */
.door{--wide:920px}
.door .page{display:flex;flex-direction:column;justify-content:center;padding-bottom:var(--s4);padding-top:var(--s4)}
.door main{display:grid;gap:var(--s2) var(--s4);grid-template-columns:minmax(0,1fr) 304px}
.door .card{grid-column:2;grid-row:1/span 6}
/* ten: glass - the playtest banner: one quiet card in the house voice */
.door .banner.playtest{background:var(--paper-deep);border:var(--line) solid var(--wood);border-radius:var(--corner);color:var(--ink);font-size:var(--px2);grid-column:1;max-width:58ch;padding:var(--s2) var(--s3)}
.tagline{color:var(--wood-dark);font:var(--px2)/24px var(--font-pixel);margin:0 0 var(--s1)}
.sentence{font-size:19px;line-height:28px;margin:0 0 var(--s3)}
.first{border-top:var(--line) solid var(--paper-wash);color:var(--ink-soft);display:flex;gap:var(--s3);justify-content:space-between;margin:var(--s2) 0 0;padding:var(--s2) 0 0}
.first time{flex:none;font-size:13px}
.postcard{border:var(--line) solid var(--ink);border-radius:var(--corner);box-shadow:var(--shadow);display:block;line-height:0;overflow:hidden;position:relative;width:304px;max-width:100%}
.postcard img{display:block;height:auto;max-width:100%}
.postcard .tint{inset:0;mix-blend-mode:multiply;pointer-events:none;position:absolute}
.live{align-items:center;color:var(--ink-soft);display:flex;font-size:var(--px2);gap:var(--s2);line-height:24px;margin:var(--s2) 0 0}
.live .sprite{flex:none}
.log{list-style:none;margin:var(--s2) 0;padding:0}
.log li{border-top:var(--line) solid var(--paper-wash);display:flex;gap:var(--s3);justify-content:space-between;margin:0;padding:var(--s1) 0}
.log li:first-child{border-top:0}
.log time{color:var(--ink-soft);flex:none;font-size:13px}
.log .none{color:var(--ink-soft)}
.door .btns{margin:var(--s2) 0 0}
.install{color:var(--ink-soft);display:none;font-size:13px;line-height:20px;margin:var(--s2) 0 0}
@media (max-width:719px){
 .door main{display:flex;flex-direction:column}
 .door .banner.playtest{order:2} .door .card{order:3}.door .first,.door .log{order:4}.door .btns{order:5}.door .install{order:6}
 .postcard{margin:0 auto}.door .btns .btn{flex:1}
}
@media (max-width:719px) and (pointer:coarse){.install{display:block}}
@media (display-mode:standalone){.install{display:none}}