*{box-sizing:border-box;margin:0}
html{background:#0f1220}
body{background:#0f1220;color:#2a2a34;font:13px/18px ui-monospace,Menlo,"Courier New",monospace;min-height:100vh;padding:14px}
a{color:#7a4a20;text-decoration:underline;text-decoration-color:#c8a870;text-underline-offset:2px}
a:hover{background:#f0c048;text-decoration:none}
h1,h2,h3{font-weight:700}
h1{font-size:15px;letter-spacing:1px}
h2{color:#8c5c30;font-size:12px;font-variant-caps:small-caps;letter-spacing:1px;margin:22px 0 6px}
h2:first-child{margin-top:0}
h3{font-size:13px;margin:14px 0 4px}
p,ul,ol,table,pre,dl{margin:0 0 10px}
ul,ol{padding-left:20px}
li{margin:2px 0}
small,.dim{color:#8c8880}
code{background:#fffdf6;border:1px solid #d8d2c0;font:inherit;overflow-wrap:anywhere;padding:0 3px}
pre{background:#fffdf6;border:1px solid #2a2a34;font:12px/16px ui-monospace,Menlo,"Courier New",monospace;overflow-wrap:anywhere;overflow-x:auto;padding:8px 56px 8px 10px;position:relative;white-space:pre-wrap}
pre code{background:none;border:0;padding:0}
pre .copy{background:#e8d8a0;border:1px solid #2a2a34;box-shadow:1px 1px 0 #8c5c30;color:#2a2a34;cursor:pointer;font:9px/12px inherit;font-family:inherit;padding:0 5px;position:absolute;right:4px;top:4px}
pre .copy:hover{background:#f0c048}
table{border-collapse:collapse;width:100%}
th,td{border-bottom:1px dashed #b0ada0;padding:3px 6px 3px 0;text-align:left;vertical-align:top}
th{color:#8c5c30;font-size:11px;font-variant-caps:small-caps;font-weight:700;letter-spacing:1px}
dl{display:grid;gap:2px 10px;grid-template-columns:max-content 1fr}
dt{color:#8c8880}
.cap{background:#f4f0e4;border:1px solid #2a2a34;box-shadow:0 1px 0 #8c5c30;display:inline-block;font-size:9px;line-height:12px;min-width:16px;padding:0 3px;text-align:center}
.tag{background:#e8d8a0;border:1px solid #8c5c30;font-size:10px;line-height:13px;padding:0 4px}

/* the paper and the wood */
.sheet{background:#f4f0e4 var(--paper,none) repeat;background-size:64px 64px;border:3px solid #2a2a34;box-shadow:3px 3px 0 0 rgba(0,0,0,.6);image-rendering:pixelated}
.strip{align-items:center;background:#8c5c30 var(--wood,none) repeat;background-size:32px 32px;border-bottom:3px solid #2a2a34;color:#f4f0e4;display:flex;gap:10px;image-rendering:pixelated;padding:4px 10px}
.strip a{color:#f4f0e4;text-decoration:none}
.strip a:hover{background:none;color:#f0c048}
.strip .title{font-size:13px;font-variant-caps:small-caps;font-weight:700;letter-spacing:1px}
.strip nav{display:flex;flex:1;font-size:11px;gap:12px;justify-content:flex-end;letter-spacing:1px}
.body{padding:12px 16px 16px}
.mark{display:inline-block;image-rendering:pixelated}

/* sprites: atlas cells, scaled by the inline style */
.sprite{background:url(/atlas.png) no-repeat;display:inline-block;image-rendering:pixelated;vertical-align:middle}
.swatch{border:1px solid #2a2a34;display:inline-block;height:12px;vertical-align:middle;width:12px}
.btn{background:#e8d8a0;border:1px solid #2a2a34;box-shadow:2px 2px 0 #8c5c30;color:#2a2a34;display:inline-block;font-variant-caps:small-caps;letter-spacing:2px;padding:6px 20px;text-decoration:none}
.btn:hover{background:#f0c048}
.btn:active{box-shadow:none;transform:translate(2px,2px)}
input.search{background:#fffdf6;border:1px solid #2a2a34;color:#2a2a34;font:inherit;outline:none;padding:4px 6px;width:100%}

/* the door */
.door body,body.door{align-items:center;display:flex;justify-content:center}
.door .sheet{text-align:center;width:min(520px,100vw - 20px)}
.door .body{padding:18px 22px 16px}
.door .mark{margin:2px auto 12px}
.door .line{font-size:14px;font-weight:700;margin-bottom:10px}
.door .three{color:#4a4a54;margin-bottom:10px}
.door .live{color:#8c5c30;font-size:11px;font-variant-caps:small-caps;letter-spacing:1px;margin-bottom:10px}
.door .postcard{border:3px solid #2a2a34;box-shadow:2px 2px 0 rgba(0,0,0,.4);display:block;height:auto;image-rendering:pixelated;margin:0 auto 14px;max-width:100%}
.door .btns{display:flex;gap:14px;justify-content:center;margin-bottom:12px}
.door .foot{color:#8c8880;font-size:11px}

/* docs and the wiki: a left nav and one column */
.page{display:flex;gap:14px;margin:0 auto;max-width:960px}
.page nav.side{align-self:flex-start;flex:0 0 170px;font-size:11px;position:sticky;top:14px}
.page nav.side .body{padding:8px 10px}
.page nav.side a{display:block;padding:1px 0;text-decoration:none}
.page nav.side a:hover{background:none;text-decoration:underline}
.page nav.side .sub{padding-left:10px}
.page main.sheet{flex:1;min-width:0}
.page main .body{padding:14px 20px 20px}
.crumb{color:#8c8880;font-size:11px;margin-bottom:6px}
.head{align-items:center;display:flex;gap:12px;margin-bottom:8px}
.head h1{font-size:16px}
.head .kind{color:#8c8880;font-size:11px}
.grid{display:grid;gap:3px 12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.grid a{overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}
.grid a:hover{background:none;text-decoration:underline}
.grid .sprite{margin-right:4px}
.map{display:inline-block;line-height:0;margin:6px 0}
.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}
.foot{border-top:1px dashed #b0ada0;color:#8c8880;font-size:11px;margin-top:20px;padding-top:8px}
@media (max-width:720px){.page{flex-direction:column}.page nav.side{position:static;flex:none}}