/* 漁網 (the net): places are knots on a diamond mesh, friends are threads pulled to one knot.
   Square corners, hairlines, flat colour. Orange is the meeting place; the only other orange is the small knots
   scattered on the mesh behind the page, like the knot in the logo (owner's request).
   One column on a phone; on a wide screen the map stays on the right. */
:root{
  --bg:#f4f8f8; --ink:#0e2a3c; --soft:#4f6b79; --rule:#bdd0d6; --field:#ffffff; --meet:#ee6416; --warn:#9a4300; --dot:#9db4bd;
  --f1:#0f7a80; --f2:#9a6f00; --f3:#7a4fb5; --f4:#c2325f; --f5:#3a6fd8; --f6:#44791f;
  --f7:#2b3c8f; --f8:#b0279a; --f9:#80501f; --f10:#7a1f2e; --on-f:#ffffff;
  --face:"Avenir Next","Avenir",-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
  --bg:#0a1c28; --ink:#e4eef0; --soft:#8ea8b4; --rule:#25414f; --field:#0f2634; --meet:#ff8a3d; --warn:#ffb36b; --dot:#3d5a69;
  --f1:#3cc4c9; --f2:#e8bd3f; --f3:#b79cf0; --f4:#f0759a; --f5:#7da8ff; --f6:#8fcf5f;
  --f7:#a9b6bf; --f8:#c98f8f; --f9:#d8c9a0; --f10:#cfe36a; --on-f:#0a1c28}}
:root[data-theme="dark"]{color-scheme:dark;
  --bg:#0a1c28; --ink:#e4eef0; --soft:#8ea8b4; --rule:#25414f; --field:#0f2634; --meet:#ff8a3d; --warn:#ffb36b; --dot:#3d5a69;
  --f1:#3cc4c9; --f2:#e8bd3f; --f3:#b79cf0; --f4:#f0759a; --f5:#7da8ff; --f6:#8fcf5f;
  --f7:#a9b6bf; --f8:#c98f8f; --f9:#d8c9a0; --f10:#cfe36a; --on-f:#0a1c28}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;--bar:45px;scroll-padding-top:calc(var(--bar) + 76px)}   /* --bar: the height of the bar that stays on top; jumps within the page stop below it and the strip under it */
body{margin:0;background-color:var(--bg);color:var(--ink);font:16px/1.5 var(--face);position:relative;
  --mesh:color-mix(in srgb,var(--ink) 7%,transparent);   /* a browser without color-mix simply shows no mesh here */
  background-image:linear-gradient(45deg,transparent 48%,var(--mesh) 48%,var(--mesh) 52%,transparent 52%),linear-gradient(-45deg,transparent 48%,var(--mesh) 48%,var(--mesh) 52%,transparent 52%);
  background-size:22px 22px}
/* knots: the shape comes from a repeating mask (each one sits on a crossing of the 22px mesh), the colour from the theme */
body::before,.top::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--meet)}
body::before{z-index:-1;opacity:.4;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='264' height='352'%3E%3Cpath d='M209 29.5l3.5 3.5-3.5 3.5-3.5-3.5zM44 194.5l3.5 3.5-3.5 3.5-3.5-3.5z'/%3E%3C/svg%3E") 0 0/264px 352px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='264' height='352'%3E%3Cpath d='M209 29.5l3.5 3.5-3.5 3.5-3.5-3.5zM44 194.5l3.5 3.5-3.5 3.5-3.5-3.5z'/%3E%3C/svg%3E") 0 0/264px 352px}
button{font:inherit;color:inherit;cursor:pointer;border-radius:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--meet);outline-offset:2px}
[hidden]{display:none!important}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px 36px;display:grid;gap:26px}
@media (min-width:900px){.wrap{grid-template-columns:minmax(0,440px) minmax(0,1fr);align-items:start;column-gap:28px}
  .wrap > *{grid-column:1} .mapbox{grid-column:2;grid-row:1 / span 7;position:sticky;top:calc(var(--bar) + 16px);margin-top:20px}}

/* the bar: logo and language, on the mesh, always at the top of the screen (owner's request, 2026-11-12) */
.bar{position:sticky;top:0;z-index:1100;background-color:var(--bg);background-image:linear-gradient(45deg,transparent 48%,var(--rule) 48%,var(--rule) 52%,transparent 52%),linear-gradient(-45deg,transparent 48%,var(--rule) 48%,var(--rule) 52%,transparent 52%);background-size:22px 22px;border-bottom:1px solid var(--rule)}
.bar .brand{max-width:1180px;height:44px;margin:0 auto;padding:0 16px}
.bar .mark{background:var(--bg);background:color-mix(in srgb,var(--bg) 82%,transparent);padding:2px 6px;margin-left:-6px}
/* heading on the mesh: this part scrolls away under the bar */
.top{display:grid;gap:10px;justify-items:start;margin:0 -16px;padding:14px 16px 16px;background-color:var(--bg);
  background-image:linear-gradient(45deg,transparent 48%,var(--rule) 48%,var(--rule) 52%,transparent 52%),linear-gradient(-45deg,transparent 48%,var(--rule) 48%,var(--rule) 52%,transparent 52%);
  background-size:22px 22px;position:relative}
.top::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='132'%3E%3Cpath d='M187 7l4 4-4 4-4-4zM99 95l4 4-4 4-4-4zM22 40l4 4-4 4-4-4z'/%3E%3C/svg%3E") 0 0/220px 132px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='132'%3E%3Cpath d='M187 7l4 4-4 4-4-4zM99 95l4 4-4 4-4-4zM22 40l4 4-4 4-4-4z'/%3E%3C/svg%3E") 0 0/220px 132px}
/* words sit on a wash of the page colour: the mesh still shows faintly behind them, but does not cut through the letters */
.top > *{position:relative;background:var(--bg);background:color-mix(in srgb,var(--bg) 82%,transparent);padding:2px 6px;margin:0 0 0 -6px}
.brand,.subrow{display:flex;align-items:center;justify-content:space-between;gap:10px;justify-self:stretch;margin-right:-6px}
.subrow{align-items:baseline}
.mark{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:800;letter-spacing:.06em;font-size:15px}
.mark svg{height:22px;width:auto;display:block}
.lang{display:grid;grid-auto-flow:column;border:1px solid var(--ink)}
.lang button{padding:3px 8px;border:0;border-left:1px solid var(--ink);background:var(--bg);font-size:12px;line-height:1.5}
.lang button:first-child{border-left:0}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--bg);font-weight:700}
.home{font-size:12px;color:var(--soft);text-underline-offset:3px;text-align:right}
.zh{font-size:13px;color:var(--soft);letter-spacing:.2em}
:lang(en) .zh{letter-spacing:.04em}
h1{font-size:27px;line-height:1.18;font-weight:700;text-wrap:balance}
.lede{color:var(--soft);font-size:15px}
/* the strip under the heading: four tags hung on one thread, each from its knot (about, how to use, data, support). The
   knots and the thread are the net; the box under each knot is what says "press me". The last knot is the orange one */
.quick{position:sticky;top:var(--bar);z-index:1090;margin:-26px -16px 0;padding:10px 16px 8px;background:var(--bg);border-bottom:1px solid var(--ink);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}   /* follows the heading with no gap; once it reaches the bar it stays under it */
.quick a,.quick button{position:relative;display:grid;grid-template-rows:auto 1fr;justify-items:center;padding:2px 3px 6px;border:0;background:none;color:var(--ink);font-size:13px;line-height:1.25;text-decoration:none;text-align:center}
.quick i{width:11px;height:11px;border:1.5px solid var(--ink);background:var(--bg);transform:rotate(45deg);position:relative;z-index:2}
.quick span{position:relative;z-index:1;margin-top:-6px;display:flex;align-items:center;justify-content:center;align-self:stretch;justify-self:stretch;padding:10px 4px 7px;border:1px solid var(--ink);background:var(--bg);font-weight:600;box-shadow:2px 2px 0 var(--rule)}
.quick > * + *::before{content:"";position:absolute;top:7px;right:50%;width:100%;border-top:1px solid var(--ink)}   /* the thread, from the knot before to this one */
.quick .give i{border-color:var(--meet);background:var(--meet)}
.quick a:hover span,.quick button:hover span,.quick :focus-visible span,.quick a:active span,.quick button:active span{background:var(--ink);color:var(--bg);box-shadow:none}
@media (max-width:350px){.quick a,.quick button{font-size:12px;padding-inline:2px}}
/* how to use: a shade over the real page, a frame round one control, a card that explains it (placed from script) */
.tour-shade{position:fixed;inset:0;z-index:2000}
.tour-hole{position:absolute;z-index:2001;border:2px solid var(--meet);box-shadow:0 0 0 200vmax rgba(6,18,26,.68);pointer-events:none}
.tour-card{position:absolute;z-index:2002;background:var(--field);color:var(--ink);border:1px solid var(--ink);padding:14px 16px 12px;display:grid;gap:6px;outline:0}
.tour-card::before,.tour-card::after{content:"";position:absolute;width:9px;height:9px;background:var(--meet);transform:rotate(45deg);top:-5px}
.tour-card::before{left:-5px} .tour-card::after{right:-5px}
.tour-card p{margin:0}
.tour-n{font-family:var(--mono);font-size:12px;color:var(--soft)}
.tour-t{font-size:17px;font-weight:700;line-height:1.3;padding-right:26px}
.tour-b{font-size:14px;line-height:1.55}
.tour-go{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.tour-go button{padding:8px 16px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);font-size:14px;font-weight:700}
.tour-go button.quiet{background:var(--field);color:var(--ink);font-weight:400}
.tour-x{position:absolute;top:6px;right:8px;border:0;background:none;font-size:22px;line-height:1;padding:4px 6px;color:var(--soft)}

.sec{display:grid;gap:12px}
h2{margin:0;font-size:17px;font-weight:700;display:flex;align-items:center;gap:12px}
.no{width:22px;height:22px;display:grid;place-items:center;background:var(--ink);color:var(--bg);transform:rotate(45deg);font-family:var(--mono);font-size:13px;font-weight:700;margin-left:4px;flex:none}
.no span{transform:rotate(-45deg)}
.tag{width:26px;height:26px;display:grid;place-items:center;font-size:13px;font-weight:800;background:var(--c);color:var(--on-f);transform:rotate(45deg) scale(.82)}
.tag span{transform:rotate(-45deg)}

/* who */
.people{display:grid;gap:14px}
.friend{display:grid;grid-template-columns:30px minmax(0,1fr);gap:4px 10px;align-items:center}
.friend > :not(.tag){grid-column:2}
/* a name or nickname: a quiet line, not a second box. 16px so that iPhone does not zoom in when it is tapped */
.name{font:inherit;font-size:16px;line-height:1.3;padding:2px 0 3px;border:0;border-bottom:1px dashed var(--rule);border-radius:0;background:transparent;color:var(--ink);width:100%;max-width:260px;-webkit-appearance:none;appearance:none}
.name::placeholder{color:var(--soft);opacity:.75}
.name:focus{outline:0;border-bottom:1px solid var(--c)}
.inwrap{position:relative}
.inwrap input{width:100%;font:inherit;font-size:16px;padding:9px 10px;border:1px solid var(--ink);border-radius:0;background:var(--field);color:var(--ink);-webkit-appearance:none;appearance:none}
.inwrap input:focus{outline:2px solid var(--c);outline-offset:0}
.inwrap input::placeholder{color:var(--soft);opacity:.8}
.ways{display:flex;flex-wrap:wrap;gap:4px 14px}
.ways button,.linkbtn,.add,.more{border:0;background:none;padding:2px 0;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;font-size:14px;text-align:left}
.ways .pick[aria-pressed="true"]{color:var(--c);font-weight:700;text-decoration-thickness:2px}
.ways .rm{margin-left:auto;color:var(--soft)}
.snap{margin:0;font-size:13px;color:var(--soft);min-height:19px}
.snap b{color:var(--ink);font-weight:600}
.snap .far{color:var(--warn)}
/* adding a friend is the one thing here people must find: a full-width button with the orange knot */
.add{justify-self:stretch;display:flex;align-items:center;justify-content:center;gap:12px;padding:11px 12px;border:1.5px solid var(--meet);background:var(--field);background:color-mix(in srgb,var(--meet) 8%,var(--field));color:var(--ink);font-size:15px;font-weight:700;text-decoration:none;text-align:center}
.add .plus{width:20px;height:20px;display:grid;place-items:center;background:var(--meet);color:var(--bg);transform:rotate(45deg);font-size:15px;line-height:1;flex:none}
.add .plus span{transform:rotate(-45deg)}
.sugg{position:absolute;z-index:1000;left:0;right:0;top:100%;background:var(--field);border:1px solid var(--ink);border-top:0}
.sugg button{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:10px;border:0;border-top:1px solid var(--rule);background:transparent}
.sugg button:hover,.sugg button.on{background:var(--bg)}
.sugg small{color:var(--soft);text-align:right}
.sugg .none{margin:0;padding:10px;font-size:14px;color:var(--soft);border-top:1px solid var(--rule)}
.areas{border:1px solid var(--rule);padding:10px;display:grid;gap:8px;background:var(--field)}
.areas .step{margin:0;font-size:13px;color:var(--soft);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.areas .chips{display:flex;flex-wrap:wrap;gap:6px}
.areas .chips button{padding:6px 9px;border:1px solid var(--ink);background:var(--bg);font-size:14px;display:inline-flex;align-items:center;gap:7px;text-align:left}
.kd{width:7px;height:7px;background:var(--c);transform:rotate(45deg);flex:none}

/* when */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--ink)}
.seg button{padding:10px 4px;border:0;border-left:1px solid var(--ink);background:transparent;font-size:14px;line-height:1.3}
.seg button:first-child{border-left:0}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg);font-weight:700}
.hint{margin:-4px 0 0;font-size:13px;color:var(--soft)}
/* the time slot: smaller and paler than the two choices above it */
.when{display:flex;align-items:center;gap:10px;margin-top:2px}
.when > span{font-size:13px;color:var(--soft)}
.seg.minor{display:inline-grid;border-color:var(--rule)}
.seg.minor button{padding:6px 12px;font-size:13px;color:var(--soft);border-left-color:var(--rule)}
.seg.minor button[aria-pressed="true"]{background:var(--rule);color:var(--ink);font-weight:700}

/* answer */
.verdict{margin:0;font-size:22px;font-weight:700;line-height:1.25;text-wrap:balance}
.sub{margin:2px 0 0;font-size:14px;color:var(--soft)}
.empty{margin:0;color:var(--soft);font-size:15px}
.far-note{margin:6px 0 0;font-size:14px;color:var(--warn)}
.linked{margin:0 0 8px;font-size:13px;line-height:1.5;color:var(--soft);border-left:3px solid var(--meet);padding:2px 0 2px 10px}   /* this answer came in by a shared link */
/* taking the answer to the group chat */
.take{margin:12px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.take button{padding:9px 16px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);font-size:14px;font-weight:700;line-height:1.3}
.take button.quiet{background:var(--field);color:var(--ink);font-weight:400}
.take span{font-size:13px;color:var(--soft)}
/* the picture, where it cannot go straight to a share sheet */
.pic{margin:10px 0 0;display:grid;gap:8px}
.pic img{display:block;width:100%;max-width:380px;height:auto;border:1px solid var(--rule)}
.pic p{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:13px;color:var(--soft)}
.pic a{padding:8px 14px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);font-size:14px;font-weight:700;text-decoration:none}
.taketext{margin:8px 0 0;width:100%;font:13px/1.5 var(--face);padding:8px 10px;border:1px solid var(--rule);border-radius:0;background:var(--field);color:var(--ink);resize:none}
.far-note .linkbtn{margin-left:6px}
ol{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.place{display:grid;border:1px solid var(--ink);padding:12px;position:relative;background:var(--field)}
.place::before,.place::after{content:"";position:absolute;width:9px;height:9px;background:var(--ink);transform:rotate(45deg);top:-5px}
.place::before{left:-5px} .place::after{right:-5px}
.place.on::before,.place.on::after{background:var(--meet)}
.place-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;text-align:left;border:0;background:none;padding:0}
.place-head b{font-size:21px;line-height:1.25;font-weight:700;border-bottom:3px solid transparent;padding-bottom:1px}
.place.on .place-head b{border-bottom-color:var(--meet)}
.place-head small{font-size:13px;color:var(--soft);text-align:right}
.place-rows{display:grid;gap:9px;padding:12px 0 6px}
.leg{display:grid;grid-template-columns:30px minmax(0,1fr) 64px;gap:2px 10px;align-items:center}
.leg .tag{width:24px;height:24px;font-size:12px}
.track{position:relative;height:16px;display:block;margin-right:6px}
.track::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--rule)}
.track i{position:absolute;left:0;top:50%;width:var(--w);height:2px;margin-top:-1px;background:var(--ink);display:block}
.track i::after{content:"";position:absolute;right:-5px;top:-4px;width:10px;height:10px;background:var(--c);transform:rotate(45deg)}
.min{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;font-size:15px;font-weight:700;white-space:nowrap}
.min small{font-family:var(--face);font-weight:400;font-size:12px;color:var(--soft)}
.how{grid-column:2 / 4;font-size:12px;color:var(--soft)}
.place-late{margin:0;padding:8px 0;font-size:13px;border-top:1px solid var(--rule);display:grid;gap:3px}
.place-late b{font-size:12px;color:var(--soft);font-weight:700}
.late-list{display:flex;flex-wrap:wrap;gap:2px 14px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.late-all + .late-list{color:var(--soft)}
.place-go{border-top:1px solid var(--rule)}
.place-go summary{list-style:none;cursor:pointer;padding:10px 0 0;font-size:15px;font-weight:700;display:flex;justify-content:space-between}
.place-go summary::-webkit-details-marker{display:none}
.place-go summary::after{content:"＋";font-family:var(--mono);font-weight:400}
.place-go[open] summary{padding-bottom:10px}
.place-go .tap{font-weight:400;color:var(--soft)}
.place-go[open] .tap{display:none}   /* "tap here" has done its job once the details are open */
.place-go[open] summary::after{content:"－"}
.trip{display:grid;gap:6px;padding:0 0 12px}
.trip p{margin:0;font-size:14px}
.links{display:flex;flex-wrap:wrap;gap:8px}
.links a{font-size:14px;padding:7px 10px;border:1px solid var(--ink);text-decoration:none;font-weight:700}
.links a::after{content:" ↗";font-family:var(--mono);font-weight:400}
.tell{margin:0;font-size:12px;color:var(--soft)}
.more{justify-self:center;text-align:center}
.hot{display:grid;gap:8px;margin-top:6px;overflow-x:auto}
.hot.tight table{font-size:12px}
.hot.tight th,.hot.tight td{padding:6px 1px}
.hot.tight td:last-child{font-size:11px}
.hot h3{margin:0;font-size:15px;font-weight:700}
.hot table{width:100%;border-collapse:collapse;font-size:14px}
.hot th,.hot td{padding:7px 3px;border-top:1px solid var(--rule);text-align:right;font-variant-numeric:tabular-nums;font-weight:400}
.hot th:first-child{text-align:left}
.hot thead th{color:var(--soft);font-size:12px;border-top:0;vertical-align:bottom}
.hot tbody th button{border:0;background:none;padding:0;font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-align:left}
.hot td:last-child{color:var(--soft);font-size:12px}

/* map */
.mapbox{display:grid;gap:8px}
#map{height:62vh;min-height:340px;max-height:720px;border:1px solid var(--ink);background:var(--field)}
.leaflet-container{background:var(--field);font:13px/1.4 var(--face)}
.leaflet-control-attribution{background:var(--field)!important;color:var(--soft)!important;font-size:11px}
.leaflet-control-attribution a{color:var(--soft)!important}
.leaflet-bar{border:1px solid var(--ink)!important;border-radius:0!important;box-shadow:none!important}
.leaflet-bar a{background:var(--field)!important;color:var(--ink)!important;border-color:var(--rule)!important;border-radius:0!important}
.maphint{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:var(--soft);min-height:30px}
.maphint button{white-space:nowrap;padding:5px 10px;border:1px solid var(--ink);background:var(--field);font-size:13px}
.maphint .mode{color:var(--ink);font-weight:700}
.lbl{background:transparent;border:0;box-shadow:none;color:var(--ink);font-weight:700;font-size:13px;text-shadow:0 0 3px var(--field),0 0 3px var(--field),0 0 6px var(--field)}
.lbl:before{display:none}

.tip{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;border-top:1px solid var(--rule);padding:14px 0 0}
.tip p{margin:0;font-size:14px;color:var(--soft);flex:1 1 200px}
.tip a{font-size:14px;font-weight:700;padding:8px 12px;border:1px solid var(--ink);text-decoration:none;white-space:nowrap}
.tip a.kofi{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:var(--bg);border:0;border-radius:7px;padding:9px 14px;box-shadow:1px 1px 0 rgba(0,0,0,.2)}   /* the page's own ink (navy; pale in dark mode), not Ko-fi's default blue */
.kofi img{display:block;animation:kofi-wiggle 3s infinite}
@keyframes kofi-wiggle{0%,75%{transform:rotate(0) scale(1)}80%{transform:scale(1.1)}84%,92%{transform:rotate(-10deg) scale(1.1)}88%,96%{transform:rotate(10deg) scale(1.1)}100%{transform:rotate(0) scale(1)}}
.foot{display:grid;gap:8px;font-size:12px;line-height:1.6;color:var(--soft)}
.foot p{margin:0}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;animation:none!important}}

/* a friend's colour, and a kind of transport's colour, as classes (the site's Content-Security-Policy forbids style="") */
.c1{--c:var(--f1)} .c2{--c:var(--f2)} .c3{--c:var(--f3)} .c4{--c:var(--f4)} .c5{--c:var(--f5)} .c6{--c:var(--f6)}
.c7{--c:var(--f7)} .c8{--c:var(--f8)} .c9{--c:var(--f9)} .c10{--c:var(--f10)}
.k-mtr{--c:var(--f4)} .k-lr{--c:var(--f2)} .k-ferry{--c:var(--f5)} .k-bus{--c:var(--f3)}

/* document pages (/story/, /about/): the same header, numbered sections and panels as the main page */
.doc{max-width:760px}
.dochead{display:grid;gap:10px;justify-self:stretch}
.dochead h1{margin:0}
.doc article{display:grid;gap:24px}
.doc article > p{margin:0}
.doc .note{font-size:13px;line-height:1.55;color:var(--soft);border-left:3px solid var(--meet);padding:2px 0 2px 10px}
.doc .panel{position:relative;border:1px solid var(--ink);background:var(--field);padding:14px 16px;display:grid;gap:10px;font-size:15px;line-height:1.65}
.doc .panel::before,.doc .panel::after{content:"";position:absolute;width:9px;height:9px;background:var(--ink);transform:rotate(45deg);top:-5px}
.doc .panel::before{left:-5px} .doc .panel::after{right:-5px}
.doc p,.doc ul{margin:0}
.doc ul{list-style:none;padding:0;display:grid;gap:8px}
.doc li{position:relative;padding-left:18px}
.doc li::before{content:"";position:absolute;left:2px;top:.68em;width:6px;height:6px;background:var(--dot);transform:rotate(45deg)}
.doc a{text-underline-offset:3px;overflow-wrap:anywhere}
.doc code{font-family:var(--mono);font-size:.92em}
.back{font-size:14px;text-underline-offset:4px}
.quick [aria-current] i{background:var(--ink)}
.quick [aria-current] span{background:var(--ink);color:var(--bg);box-shadow:none}

/* the password page shown during the private beta */
.gate{max-width:420px;margin:0 auto;padding:0 16px 36px;display:grid;gap:16px}
.gate form{display:grid;gap:10px}
.gate label{font-size:14px;font-weight:700}
.gate input{font:inherit;font-size:16px;padding:9px 10px;border:1px solid var(--ink);border-radius:0;background:var(--field);color:var(--ink)}
.gate button{padding:10px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);font-weight:700}
.gate .bad{margin:0;color:var(--warn);font-size:14px}
.hint.far{color:var(--warn)}
@media (min-width:900px){.wrap.doc{grid-template-columns:minmax(0,1fr)}}