@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;--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;--ease:120ms ease-out;--purple:color-mix(in srgb,var(--sky) 45%,var(--blood));--px1:8px;--px2:16px;--px3:24px;--wide:720px} /* six: the dark - slate: ink paper, lamp-lit text, the same wood; the system's preference by default, pins one (the same tokens as web/tokens.css) */ :root[data-theme=slate]{--paper:#2a2520;--paper-deep:#211d19;--paper-wash:#3a332c;--wood:#6b4522;--wood-dark:#d9a868;--ink:#efe3c8;--ink-soft:#b8a88c;--shadow:0 1px 0 rgba(0,0,0,.5)} @media (prefers-color-scheme:dark){:root:not([data-theme=paper]){--paper:#2a2520;--paper-deep:#211d19;--paper-wash:#3a332c;--wood:#6b4522;--wood-dark:#d9a868;--ink:#efe3c8;--ink-soft:#b8a88c;--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)}} *{box-sizing:border-box;margin:0} html{background:var(--paper);-webkit-text-size-adjust:100%} body{background:var(--paper) repeating-linear-gradient(0deg,rgba(43,33,24,.025) 0 1px,transparent 1px 4px);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} a{color:var(--wood-dark);text-decoration:underline;text-decoration-color:var(--paper-wash);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color var(--ease)} a:hover{text-decoration-color:var(--wood)} h1,h2,h3,th,.chip,.key,.doors,.side,footer,.btn,.live{font-family:var(--font-pixel);font-weight:400;letter-spacing:0} h1{font-size:var(--px3);line-height:32px;margin:0 0 var(--s3)} h2{border-bottom:var(--line) solid var(--wood);color:var(--wood-dark);font-size:var(--px2);line-height:24px;margin:var(--s4) 0 var(--s2);padding-bottom:var(--s1)} h2:first-child{margin-top:0} h3{color:var(--ink-soft);font-size:var(--px2);line-height:24px;margin:var(--s3) 0 var(--s1)} p,ul,ol,table,pre,dl,figure{margin:0 0 var(--s2)} 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(--grass);color:var(--ink)} .chip.blue{background:var(--sky);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(--blood);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{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 */ .top,.page,footer{margin:0 auto;max-width:var(--wide);width:100%} .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:20px;width:20px} .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);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 */ .door .page{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} .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)} .three{list-style:none;padding:0} .three li{color:var(--ink-soft);margin:0 0 var(--s1)} .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{color:var(--ink-soft);font-size:var(--px2);line-height:24px;margin:var(--s2) 0 0} .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 .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}}