@font-face{font-family:"Melodrama";src:url("assets/fonts/Melodrama-Variable.woff2") format("woff2");font-weight:300 700;font-display:swap}
/* The garden (the Pond, in canon) in line art (2 Oct): cream and ink, the Plate's own palette, so the plan's ending and the garden
   read as one drawing. Re yellow is only yours (your lotus, wherever it is drawn, keyed in ink) and what you can enter (the Café's
   tables, the doors, the waitlist); samples are drawn in grey; dashed is not yet. Since 3 Oct the palette follows the device's light
   or dark setting (the Plate's dark palette, as on every page); the sun moves only the drawing (lotus.js: data-phase is the hour's,
   for the lotus's openness, the stars and the jasmine). The header, the lotus button and every sheet are the site's own (chrome.css) */
:root{
  --paper:#F4EFE2; --ink:#1F1C16; --muted:#625B4E; --yellow:#F2CB38; --line:#D3CAB6; --sheet:#FBF8F0; --focus:#B8920F;
  --display:"Melodrama","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Consolas,monospace;
}
/* a dark setting: the Plate's dark palette */
@media (prefers-color-scheme:dark){:root{--paper:#171511; --ink:#EDE6D6; --muted:#A99F90; --line:#3A342B; --sheet:#1F1C17; --focus:#F2CB38}}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
/* the page stands under the site's fixed header (chrome.css, --head-h) */
body{background:var(--paper);color:var(--ink);font:15px/1.5 var(--sans);-webkit-tap-highlight-color:transparent;overflow:hidden;display:flex;flex-direction:column;height:100dvh;padding-top:var(--head-h,56px);transition:background-color 1.2s,color 1.2s}
.gbar,#dial,.hint{flex:none}
button,input,select{font:inherit;color:inherit}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* the garden's own bar, under the header: where you are · the preview mark · the ☾ hour preview. One row, 56 px, at every width */
.gbar{position:relative;z-index:5;display:flex;align-items:center;gap:10px;height:var(--gbar-h,56px);padding:0 16px;background:var(--paper);border-bottom:1px solid var(--line);transition:background-color 1.2s}
#crumbs{flex:0 1 auto;min-width:0;display:flex;gap:6px;align-items:center;font-size:13px;color:var(--muted);overflow:hidden;white-space:nowrap}
#crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
#crumbs a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:4px}
#crumbs span[aria-current]{color:var(--ink);overflow:hidden;text-overflow:ellipsis}
#crumbs i{font-style:normal;opacity:.5}
/* the preview mark, pinned: Bloom your own is coming soon, and the one way in is the waitlist (the enquiry sheet). On a phone the
   tag and the link alone */
.preview{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0;font-size:12.5px;color:var(--muted);white-space:nowrap}
.pv-tag{flex:none;font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border:1px dashed var(--ink);border-radius:3px;padding:4px 6px}
.pv-line{min-width:0;overflow:hidden;text-overflow:ellipsis}
.preview a{flex:none;display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:4px}
.pv-soon{display:none}
@media (max-width:639.98px){.pv-line{display:none}.pv-soon{display:inline;flex:none}.gbar{gap:8px;padding:0 12px}} /* a phone: Preview · coming soon · Join the waitlist */
.btn{border:1px solid var(--ink);background:transparent;border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer;min-height:44px;min-width:44px;white-space:nowrap;display:inline-grid;place-items:center}
#sunBtn{flex:none;width:44px;padding:0;font-size:17px}
.btn:hover{background:var(--sheet)}
.btn[aria-pressed="true"]{background:var(--yellow);color:#1F1C16;border-color:#1F1C16}
.btn:focus-visible,#crumbs a:focus-visible,.preview a:focus-visible,.enter:focus-visible,.quiet:focus-visible,.chip:focus-visible,input:focus-visible,select:focus-visible,.act:focus-visible,.keep-link a:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
/* (no control holds motion: the ♪ stopped holding it on 3 Oct and left the header on 4 Oct, so html[data-anthem] is no longer
   written at all. A visitor who asks for reduced motion is answered by the @media rule at the foot of this file and by lotus.js) */
@media (max-width:430px){
  #crumbs>:not(:last-child){display:none}
  #crumbs>:last-child{overflow:hidden;text-overflow:ellipsis}
}

/* the sun dial: preview another hour (the drawing only: the palette follows the device) */
#dial{position:relative;z-index:4;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:10px 16px;background:var(--sheet);border-bottom:1px solid var(--line);font-size:13px}
#dial[hidden]{display:none}
#dial input[type=range]{flex:1;min-width:160px;accent-color:#C9A21A;min-height:44px}
#dial output{font:600 13px var(--sans);min-width:9ch}
#dial .note{flex-basis:100%;color:var(--muted);font:italic 12px/1.4 var(--serif)}

/* the stage: the drawing's region (main#main, the skip link's target) */
.stage{flex:1 1 auto;min-height:0;position:relative;transition:padding .3s}
.stage:focus{outline:none}
.stage:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
/* a pinch zooms the garden (lotus.js), so the scene keeps panning but not the page's own pinch */
#scene{position:absolute;inset:6px 10px 0;width:calc(100% - 20px);height:calc(100% - 6px);display:block;touch-action:pan-x pan-y}
#scene text{pointer-events:none;user-select:none}
/* the hint under the stage, clear of the lotus button's corner (chrome.css, --fab-reserve) on both sides; the one toast stands in
   its row while it shows (html.toasting) */
.hint{position:relative;text-align:center;font:12.5px/1.45 var(--sans);color:var(--muted);padding:6px var(--fab-reserve,80px) calc(12px + env(safe-area-inset-bottom));margin:0;transition:opacity .3s}
@media (max-width:560px){.hint{text-align:left;padding:6px var(--fab-reserve,80px) calc(12px + env(safe-area-inset-bottom)) 16px}}
.hint b{font-weight:600;color:var(--ink)}
:root.toasting .hint{opacity:0}

/* petals: paper and ink line art; a petal you point at, or are on, lifts to the sheet with a firmer line. Your lotus is Re yellow
   keyed in ink, wherever it is drawn (lotus.js marks its group .yours), so its focus ring is ink */
.petal{cursor:pointer;outline:none}
.petal .pf{fill:var(--paper);stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round;transition:fill .2s,stroke-width .2s}
.petal.bud .pf{stroke-dasharray:3.5 2.5}
.petal:hover .pf,.petal.current .pf{fill:var(--sheet);stroke-width:1.9}
.petal:focus-visible .pf{stroke:var(--focus);stroke-width:3.2}
.karnika{cursor:pointer;outline:none}
.karnika:hover .pod,.karnika.current .pod{fill:var(--sheet);stroke-width:2}
.karnika:focus-visible .pod{stroke:var(--focus);stroke-width:3.2}
.yours .petal .pf,.yours .petal.bud .pf,.yours .petal:hover .pf,.yours .petal.current .pf,.yours .karnika .pod{fill:var(--yellow);stroke:#1F1C16}
.yours .petal:focus-visible .pf,.yours .karnika:focus-visible .pod{stroke:#1F1C16;stroke-width:3.4}
/* closed for the night, the pod is under the folded petals: still the seed pod's tap and stop, unseen */
.karnika .pod.shut,.karnika:hover .pod.shut,.karnika.current .pod.shut,.yours .karnika .pod.shut{fill:transparent;stroke:none}
.sample .petal .pf,.sample .karnika .pod{stroke:var(--muted)} /* a sample's lotus: grey, at .7 (lotus.js) */
.pondlotus,.cafemark{cursor:pointer;outline:none}
/* focus: an ink ring with a gold one inside it, legible on any tile, day or night (the gold alone was faint on the fields) */
.focusring,.focusring-in{opacity:0;fill:none}
.focusring-in{stroke:var(--focus);stroke-width:1.3}
.pondlotus:focus-visible .focusring,.cafemark:focus-visible .focusring{stroke:var(--ink);stroke-width:3.2;opacity:1}
.pondlotus:focus-visible .focusring-in,.cafemark:focus-visible .focusring-in{opacity:1}
.pondlotus:hover .focusring,.cafemark:hover .focusring{opacity:.5}
/* the bloom's arrival (lotus.js, startArrival): your lotus ringed in Re yellow, two pulses outward (1.3 s each), then the ring at
   rest for this visit; its words over it for 4 s. Under reduced motion only the ring at rest and the words */
.arrive-pulse{opacity:0;transform-box:fill-box;transform-origin:center;animation:arrive-pulse 1.3s cubic-bezier(.2,.6,.3,1) 2}
@keyframes arrive-pulse{from{transform:scale(1);opacity:.95}to{transform:scale(1.25);opacity:0}}
.arrive-rest{opacity:.55}
.pulsing .arrive-rest{animation:arrive-rest 2.6s ease both}
@keyframes arrive-rest{0%,72%{opacity:0}100%{opacity:.55}}
.arrived-said{animation:arrived-said 4s ease both}
@keyframes arrived-said{0%{opacity:0}9%,88%{opacity:1}100%{opacity:0}}
.mudzone{cursor:pointer;outline:none}
path.mudzone:hover{filter:brightness(.95)}
/* the mud's one stop for the keyboard: the mud you can see inside the leaf's margins, never the mud's whole reach (lotus.js) */
.mudkey{cursor:pointer;outline:none}
.surface-card{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:4px 14px;pointer-events:none;background:var(--paper);border:1px solid var(--line);border-radius:10px;opacity:.96}
.surface-card p{margin:0 0 6px;font:italic 16px/1.35 var(--serif);color:var(--ink);background:linear-gradient(transparent 62%,var(--line) 62%);display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.surface-card span{margin-top:8px;font:600 9px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* motion: a lotus blooms, petals rise in order */
.bloom{transform-box:view-box;transform-origin:0 0;animation:bloom .95s cubic-bezier(.2,.75,.2,1) backwards;animation-delay:calc(var(--i,0) * 55ms + var(--d,0ms))}
@keyframes bloom{from{opacity:0;transform:scale(.16) rotate(-26deg)}}
.fade{animation:fade .8s ease backwards;animation-delay:var(--d,0ms)}
@keyframes fade{from{opacity:0}}
/* the three zooms: the view you leave scales into the one you arrive at, about the lotus under your eye (lotus.js, zoomBetween) */
#world,.outgoing{transform-box:view-box;transform-origin:0 0}
.outgoing{pointer-events:none}
.leaving .petal:not(.chosen),.leaving .ring,.leaving .karnika:not(.chosen){opacity:0;transition:opacity .25s}
.leaving .chosen{transform:scale(1.5);opacity:0;transition:transform .34s ease-in,opacity .3s .08s}
.petal,.karnika{transform-box:view-box;transform-origin:0 0}
.halo{transform-box:view-box;transform-origin:0 0;animation:ripple 5.5s linear infinite}
@keyframes ripple{from{transform:scale(.55);opacity:.9}to{transform:scale(1.9);opacity:0}}
.twinkle{animation:tw 4s ease-in-out infinite alternate}
@keyframes tw{from{opacity:.25}to{opacity:.9}}

/* the panel: the flat 2D sheet where the work happens. The site's one dialog look without the dialog (chrome.css, .sheet-look: its
   surface, its bar and its one 44 px ×); here only where it stands. Under 900 px a sheet from the bottom (html.panel-open, set by
   lotus.js, hides the lotus button meanwhile); from 900 px a column on the right, under the garden's bar, clear of the lotus button's
   corner. Opening it is one step of history; ×, Esc and Back close it (lotus.js, H4) */
#page{position:fixed;z-index:10;left:0;right:0;bottom:0;max-height:80dvh;display:flex;flex-direction:column;overflow:hidden;color:var(--ink);border-width:1px 0 0;border-radius:22px 22px 0 0;transform:translateY(0);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
#page[hidden]{display:flex;transform:translateY(105%);visibility:hidden;transition:transform .2s,visibility 0s .2s}
#page.dragging{transition:none}
#pTitle{margin:0 0 8px;font:400 34px/1.05 var(--display);outline:none}
.lede{margin:0 0 14px;font:italic 18px/1.4 var(--serif)}
.body p{margin:0 0 10px;max-width:60ch}
.tags{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.sec{margin:22px 0 0}
.sec h3{margin:0 0 6px;font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.list li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.list li>svg{flex:none}
.list .lbl{flex:1;min-width:0}
.list small{display:block;color:var(--muted);font-size:11.5px}
.chip{flex:none;border:1px solid var(--line);background:transparent;border-radius:999px;padding:2px 9px;font:600 10.5px/1.6 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:default}
button.chip{cursor:pointer;border-color:var(--ink);color:var(--ink);min-height:28px}
.chip.ask{border-color:var(--muted);color:var(--muted)}
.chip.offer{background:var(--yellow);border-color:#1F1C16;color:#1F1C16}
.members{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;padding:12px;border:1px dashed var(--line);border-radius:6px;font-size:13.5px}
.members svg{flex:none;margin-top:2px}
.members b{display:block;font-weight:600;color:var(--muted)}
.members[hidden],.plink[hidden]{display:none}
.plink{margin:14px 0 0;font-size:14px}
a{text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px} /* one link style (the final loop, item 23): underlined in Re yellow, 2 px */
.plink a{color:var(--ink);text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px}
#page a:not([class]),.hint a{color:var(--ink);text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px}
#page a:not([class]):focus-visible,.hint a:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
/* what this page keeps, under the one footer at the foot of the panel (shared/_footer.html, styled by chrome.css alone) */
.keep-link{margin:8px 0 0;font-size:11.5px}
.keep-link a{color:var(--muted)}
.tablewrap{overflow-x:auto;margin:0 -4px}
table{border-collapse:collapse;width:100%;font-size:13px}
table.wide{min-width:420px}
th{text-align:left;font:600 10.5px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:6px 6px;border-bottom:1.5px solid var(--ink)}
td{padding:7px 6px;border-bottom:1px solid var(--line);vertical-align:top}
td.k{font-weight:600;white-space:nowrap}
.honest{margin:16px 0 0;font:italic 12.5px/1.4 var(--serif);color:var(--muted)}
.form{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
/* native controls follow the palette (chrome.css sets color-scheme; the paper and ink here); a select never wider than the panel */
.form input[type=text],.form input[type=url],.form input:not([type]),.form select{flex:1 1 180px;min-width:0;max-width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--ink);border-radius:8px;background:var(--paper);color:var(--ink)}
.form select{flex-basis:100%;text-overflow:ellipsis}
.form label{flex-basis:100%;font-size:12.5px;color:var(--muted)}
.act{min-height:44px;border:1.5px solid var(--ink);background:var(--yellow);color:#1F1C16;border-radius:999px;padding:8px 16px;font-weight:600;cursor:pointer}
.act.ghost{background:transparent;color:var(--ink)}
.depth{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0}
.depth button{min-height:44px;border:1px solid var(--ink);border-radius:6px;background:transparent;padding:4px 10px;cursor:pointer;font-size:13px}
.depth button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.depth button:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media (min-width:900px){
  #page{left:auto;right:16px;top:calc(var(--head-h,56px) + var(--gbar-h,56px) + 12px);bottom:var(--fab-reserve,80px);width:430px;max-height:none;border-width:1px;border-radius:22px}
  #page[hidden]{transform:translateX(calc(100% + 32px))}
  body.paged .stage,body.paged .hint{padding-right:462px}
}
@media (min-width:900px) and (max-width:1099px){body.paged #scene{width:calc(100% - 482px)}}

/* threshold: the words, then the garden */
#entry{position:fixed;inset:0;z-index:20;background:var(--paper);display:grid;place-items:center;padding:24px;text-align:center;transition:opacity .9s,visibility 0s .9s;overflow:auto}
#entry.gone{opacity:0;visibility:hidden}
#entry .in{max-width:31rem}
#entry .small{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
#entry h1{font:400 clamp(40px,11vw,68px)/1 var(--display);margin:14px 0 14px}
#entry h1 span{display:block}
#entry p{font:italic 18px/1.45 var(--serif);margin:0 auto 10px;max-width:26rem}
#entry .mud{font:13px/1.5 var(--sans);font-style:normal;color:var(--muted);margin-top:14px}
.enter{margin-top:22px;border:1.5px solid var(--ink);background:var(--yellow);color:#1F1C16;border-radius:999px;padding:12px 26px;font:600 15px/1 var(--sans);cursor:pointer;min-height:46px}
.quiet{display:inline-block;margin-top:12px;background:none;border:0;color:var(--muted);font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:36px}

/* the one toast (lotus.js, toast): one at a time, in one slot, the hint's own row under the stage, clear of the lotus button's corner;
   while it shows the hint steps aside (html.toasting). So it never crosses the header, the garden's bar, the map's controls or the
   drawing's words; on a phone it stands over the hint, left, as the hint does */
#toast{position:fixed;left:50%;bottom:calc(8px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:15;background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:18px;font-size:12.5px;line-height:1.4;opacity:0;pointer-events:none;transition:opacity .4s;width:max-content;max-width:calc(100vw - 2 * var(--fab-reserve,80px));text-align:center}
@media (max-width:560px){#toast{left:16px;transform:none;text-align:left;max-width:calc(100vw - 16px - var(--fab-reserve,80px))}}
#toast.on{opacity:.94}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
#entry .small{margin-top:14px}
#waves path{stroke:var(--ink)}

/* ---------- launch: pop ---------- */
#entry .in{position:relative;transition:opacity .9s,transform .9s}
#entry h1 mark,#posterCard mark{background:linear-gradient(transparent 58%,var(--yellow) 58%);color:inherit;padding:0 .04em}
#entry .small s{opacity:.55;text-decoration-thickness:2px}
#entry .aside{margin-top:22px;font:12.5px/1.5 var(--sans);font-style:normal;color:var(--muted)}
#entry .aside a{color:var(--ink);text-underline-offset:3px}
#ribbon{flex:none;display:block;text-align:center;padding:7px 16px;background:var(--yellow);color:#1F1C16;font:600 12.5px/1.35 var(--sans);text-decoration:none;border-bottom:1px solid #1F1C16}
#ribbon:hover{text-decoration:underline;text-decoration-color:#1F1C16;text-underline-offset:3px} /* (on Re yellow the line is ink) */
#ribbon:focus-visible{outline:3px solid #1F1C16;outline-offset:-3px}
#ribbon[hidden]{display:none}
.petal{transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.petal[role=button]:hover{transform:scale(1.035)}
.sway{transform-box:view-box;transform-origin:0 0;animation:sway 11s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-.7deg)}to{transform:rotate(.7deg)}}
.plink{display:flex;flex-direction:column;gap:6px}
.plain{max-width:34rem;margin:40px auto;padding:0 20px;font:16px/1.55 var(--serif)}
.plain h1{font:400 40px/1.05 var(--display)}
.plain a{color:var(--ink)}
#posterCard{display:none}
body.poster .gbar,body.poster #ribbon,body.poster .hint,body.poster #entry,body.poster #dial{display:none!important}
body.poster{padding-top:0}
body.poster #posterCard{display:block;position:fixed;left:64px;top:84px;z-index:6;max-width:430px;background:var(--paper);padding:18px 22px 16px;border:1.5px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
#posterCard .small{margin:0;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
#posterCard .pc-h{margin:10px 0 8px;font:400 50px/1 var(--display)}
#posterCard p:last-child{margin:0;font:italic 19px/1.35 var(--serif)}

:root{--silt:#D8CCAE}
@media (prefers-color-scheme:dark){:root{--silt:#4A3F31}}
.silt{cursor:pointer;outline:none}
.silt-hit{fill:transparent}

#spawn{position:fixed;z-index:14;left:50%;bottom:22px;transform:translateX(-50%);width:min(460px,calc(100vw - 24px));background:var(--sheet);color:var(--ink);border:1.5px solid var(--ink);border-radius:14px;padding:16px 18px 10px;box-shadow:6px 6px 0 var(--ink)}
#spawn[hidden]{display:none}
#spawn h2{margin:4px 0 10px;font:400 24px/1.15 var(--display)}
#spawn .chips{display:flex;flex-wrap:wrap;gap:6px}
#spawn .chips button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:4px 10px;font-size:12.5px;cursor:pointer;color:var(--ink);min-height:30px}
#spawn .chips button:hover{border-color:var(--ink)}
#spawn .honest{margin-top:8px}
body.poster #spawn{display:none!important}

/* the hex world's ground: the world's land as the sheet (in the dark palette one step lighter than the water, so the world stays seen),
   rivers as ink-water (the map's own two inks) */
:root{--land:#FBF8F0;--river:#5B7A8C}
@media (prefers-color-scheme:dark){:root{--land:#3E3446;--river:#8FA9B8}}

/* townsquare theme */
:root{--grass:#DCDDB9;--stone:#EFE8D6;--canopy:#9DA774}
@media (prefers-color-scheme:dark){:root{--grass:#2E3326;--stone:#3A3440;--canopy:#4E5638}}
.gate{cursor:pointer;outline:none;transition:opacity .25s,filter .2s}
.gate:hover{filter:brightness(1.04) drop-shadow(0 2px 0 rgba(33,30,23,.25))}
.gate.current polygon{stroke:var(--focus);stroke-width:1.8}
.gate.parcel{opacity:.8}
.leaving .gate:not(.chosen){opacity:0}
.leaving .gate.chosen{opacity:0;transition:opacity .3s .05s}
.awake{animation:tw 2.4s ease-in-out infinite alternate}
.agentOut{margin:10px 0 0;padding:10px 12px;border-left:3px solid var(--yellow);background:var(--paper);font-size:14px}
.agentOut:empty{display:none}
.agentOut p{margin:0 0 6px}
.agentOut a{color:var(--ink);text-underline-offset:3px}
.agentOut .chip{margin:4px 6px 0 0}
.labels text{paint-order:stroke;stroke:var(--paper);stroke-width:3.2px;stroke-linejoin:round}
.mud-labels text{stroke:var(--sheet);stroke-width:6px} /* in the mud, the halo is the mud's own ground */
/* the pond of the globe: a prefecture is a cluster of tiles; focus rings every tile of it */
.hexp{cursor:pointer;outline:none}
.hexp:hover .face{filter:brightness(1.05)}
.hexp.current .face{stroke:var(--focus);stroke-width:2;stroke-opacity:1}
.hexp:focus-visible .face{stroke:var(--ink);stroke-width:1.2;stroke-opacity:1}
/* the focus ring of every mark in the drawing (lotus.js, ringFocus): its outline drawn over it, ink with gold inside, a constant
   width at any scale, as a focused prefecture's outline is drawn over the board */
.focusover{pointer-events:none;fill:none;stroke-linejoin:round;stroke-linecap:round}
.focusover *{vector-effect:non-scaling-stroke}
.focusover .fo-ink{stroke:var(--ink);stroke-width:3.4}
.focusover .fo-gold{stroke:var(--focus);stroke-width:1.4}
/* on a phone the board's tiles are smaller than a fingertip: the first tap looks closer (lotus.js, loupe), the second opens */
#world.loupe{transition:transform .45s cubic-bezier(.3,.7,.2,1)}
/* the pond of the globe: terrain is Pañca Ṛṇa, in the miniature's own inks (the charter board's TERRAIN hues mixed into paper).
   The mud and the silt stay Conway Debt's and your feeds'; no real land is painted with them. */
:root{--t-deva:#C9C1C8;--t-rsi:#ABB793;--t-pitr:#EAD7A0;--t-manusya:#D4D8B5;--t-bhuta:#DCB79C;--t-desert:#EEE1BF}
@media (prefers-color-scheme:dark){:root{--t-deva:#625A68;--t-rsi:#525A47;--t-pitr:#7A6A48;--t-manusya:#686A59;--t-bhuta:#735548;--t-desert:#5A4F48}}
.robber{cursor:pointer;outline:none}
.port .fade{}

/* the charter board's own genre: tabletop (tokens in design/tokens.json → board.*) */
:root{--table:#9A6B45;--table-grain:#7C5334;--b-edge:#2B2320;--b-sea:#4E9BC9;--b-hills:#D27A4A;--b-pasture:#A9CF6A;--b-fields:#F0C63F;--b-forest:#4E8A43;--b-mountains:#9A9DB0;--b-desert:#E6CF95;--b-plaza:#F2E7CF;--plaque:#FBF3DF;--piece:#F2CB38;--meeple:#7B4F9E}
@media (prefers-color-scheme:dark){:root{--table:#4A3424;--table-grain:#3A2819;--b-sea:#2E5E7E;--plaque:#E9DFC7}}
.plaques rect{filter:none}
.act[disabled]{opacity:.55;cursor:not-allowed;background:transparent}

/* moving between the pages crossfades where the browser can (chrome.css opts every page in and names the header's three marks);
   the garden names only what carries across from the Plate. */
/* the door: the Plate's V names its stem's lotus "door"; arriving here, your lotus carries the same name for the length
   of the transition (lotus.js lays a copy of it over the scene), so the automaton's yellow lotus becomes yours */
.vt-door{position:fixed;z-index:3;pointer-events:none;overflow:visible;view-transition-name:door}
/* arriving in section (the Plate's elevation), the Plate's line and its ⊥ carry across the same way: its hairline becomes your water
   line, its bar your stem (under the door, as the lotus stands over its stem) */
.vt-water,.vt-stem{position:fixed;z-index:2;pointer-events:none}
.vt-water{overflow:hidden;view-transition-name:waterline}
.vt-stem{overflow:visible;view-transition-name:stem}
/* a line and a bar change their proportions on the way: each image fills its box, never overflowing it, and the Plate's keeps its
   own proportions as it goes (a line stays a line, never a slab) */
::view-transition-old(waterline),::view-transition-new(waterline),::view-transition-old(stem),::view-transition-new(stem){height:100%}
::view-transition-old(waterline),::view-transition-old(stem){object-fit:contain}
/* what carries across moves at the Plate's tape's own pace (its slide, 0.72 s), not the browser's quarter second; the page still crossfades */
::view-transition-group(door),::view-transition-group(waterline),::view-transition-group(stem),::view-transition-old(door),::view-transition-new(door),::view-transition-old(waterline),::view-transition-new(waterline),::view-transition-old(stem),::view-transition-new(stem){animation-duration:.72s;animation-timing-function:cubic-bezier(.5,0,.2,1)}
/* the bloom (the Plate's V on the journey: garden.html?arrive=bloom, the pond, top down; lotus.js pagereveal): both pages are cream
   and ink line art (or both the dark palette), so the crossing is a plain cross-fade, one drawing settling: the plan fades out over
   0.7 s, the pond fades in from 0.2 s to 1 s, no scale; your lotus, the door, lands on yours in the pond in 1 s */
:root:active-view-transition-type(from-bloom)::view-transition-old(root){animation:bloom-leave .7s cubic-bezier(.4,0,.2,1) both}
:root:active-view-transition-type(from-bloom)::view-transition-new(root){animation:bloom-enter .8s cubic-bezier(.4,0,.2,1) .2s both}
@keyframes bloom-leave{from{opacity:1}to{opacity:0}}
@keyframes bloom-enter{from{opacity:0}to{opacity:1}}
:root:active-view-transition-type(from-bloom)::view-transition-group(door),:root:active-view-transition-type(from-bloom)::view-transition-old(door),:root:active-view-transition-type(from-bloom)::view-transition-new(door){animation-duration:1s;animation-timing-function:cubic-bezier(.45,0,.2,1)}
.vt-hide{visibility:hidden}
/* the bloom's arrival: the Plate's line art lands on lotuses on paper, yours in yellow; the map's furniture (the meridian, the ripples,
   the Sabha and every word) waits until the crossing has settled, then comes in (lotus.js: .furn, :root.arriving) */
.furn{transition:opacity .8s ease}
:root.arriving .furn{opacity:0}
@media (prefers-reduced-motion:reduce){.furn{transition:none}}

/* the map's own controls, as a map carries them: the views of the zoom you are on (a map's layers) and the zoom along the garden's
   scale. On a wide screen they float over the stage's bottom left (a row of no height under the stage, its controls rising over it;
   the lotus button keeps the bottom right); on a phone they are their own row under the stage, so they never cover the drawing.
   Paper and ink, the pond's genre; the list opens upward */
.mapctl{position:relative;flex:none;height:0;z-index:4}
.mapctl .ctl{position:absolute;left:18px;bottom:16px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.zoom{display:flex;flex-direction:column;border:1px solid var(--ink);border-radius:22px;background:var(--paper);box-shadow:2px 2px 0 var(--ink);overflow:hidden;transition:background-color 1.2s}
.zbtn{display:flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 14px;border:0;background:transparent;color:var(--ink);cursor:pointer}
.zsign{font:400 22px/1 var(--sans);width:16px;text-align:center}
/* the scale's four stops between + and −, in at the top: guild · lotus · pond · map, the one you are on lit (a map's zoom, named) */
.zscale{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.zscale a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;font:600 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.zscale a:hover{background:var(--sheet);color:var(--ink)}
.zscale a.here{background:var(--yellow);color:#1F1C16}
.zscale a:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.zbtn:hover{background:var(--sheet)}
.zbtn[disabled]{cursor:default;background:transparent}
.zbtn[disabled] .zsign{opacity:.28}
.zbtn:focus-visible{outline:3px solid var(--ink);outline-offset:-4px;border-radius:18px}
.views{position:relative}
.views[hidden]{display:none}
.vbtn{display:flex;align-items:center;gap:8px;min-width:44px;min-height:44px;padding:0 15px 0 10px;border:1px solid var(--ink);border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:2px 2px 0 var(--ink);font:600 12.5px/1 var(--sans);cursor:pointer;transition:background-color 1.2s}
.vbtn:hover{background:var(--sheet)}
.vbtn[aria-expanded="true"]{background:var(--yellow);color:#1F1C16;border-color:#1F1C16}
.vbtn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
/* one view only (your guild; the map on next): the control stays, so the rail never moves, and says that view's name, inert */
.vbtn:disabled{cursor:default;box-shadow:none;border-style:dashed;color:var(--muted)}
.vbtn:disabled:hover{background:var(--paper)}
.vg{width:24px;height:24px;flex:none;overflow:visible}
.glyphs{position:absolute;width:0;height:0;overflow:hidden}
.vpanel{position:absolute;left:0;bottom:calc(100% + 8px);width:min(318px,calc(100vw - 40px));max-height:calc(100dvh - 190px);overflow:auto;background:var(--sheet);color:var(--ink);border:1.5px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);padding:8px 6px 6px}
.vpanel[hidden]{display:none}
.vhead{margin:2px 10px 2px;font:600 10.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.vpanel fieldset{border:0;margin:0;padding:0;min-width:0}
.vpanel fieldset[hidden]{display:none}
.vpanel legend{padding:0 10px 4px;font:400 20px/1.2 var(--display)}
.vpanel label{display:flex;align-items:center;gap:10px;min-height:48px;padding:7px 10px;border-radius:10px;cursor:pointer;color:var(--ink);text-decoration:none}
.vpanel label:hover{background:var(--sheet)}
.vpanel label:has(input:checked){background:var(--sheet)}
.vpanel label:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:-3px}
.vpanel input{margin:0;flex:none;width:16px;height:16px;accent-color:#B8920F}
.vpanel label .vg{width:28px;height:28px}
.vpanel b{display:block;font:600 13.5px/1.25 var(--sans)}
.vpanel small{display:block;font:12px/1.35 var(--sans);color:var(--muted)}
.vpanel label.soon{cursor:not-allowed;color:var(--muted)}
.vpanel label.soon .vg{stroke-dasharray:2 2;opacity:.6}
.vpanel label.soon:hover{background:transparent}
.vpanel label[hidden]{display:none}
@media (max-width:699px){
  .mapctl{height:auto;padding:8px 16px 0}
  .mapctl .ctl{position:static;flex-direction:row;align-items:center;gap:10px}
  /* on a phone the four stops are the zoom (a tap goes straight there), clear of the lotus button; + and − stay a keyboard's, on wider screens */
  .zoom{flex-direction:row}
  .zbtn{display:none}
  .zscale{flex-direction:row;border:0}
  .zscale a{min-height:44px;padding:0 9px;letter-spacing:.08em}
  .zscale li+li a{border-left:1px solid var(--line)}
  .vbtn{padding:0 10px}
  .vname{display:none} /* on a phone the views button is its mark; its name is its label */
}
/* zoom in, your guild: your lotus as your own work-life city (guild-city.js draws it, guild-city.css styles it) */
/* your lotus from above: the water's one move, a stop for the keyboard too */
.stirline{cursor:pointer;outline:none}
.stirline:hover text{opacity:.9}

body.poster .mapctl{display:none}
/* the epic's board: its tiles focus in gold; its names keep a light halo on any tile, day or night */
.hex{cursor:pointer;outline:none}
.hex:hover polygon:first-of-type{filter:brightness(1.05)}
.hex.current polygon:first-of-type{stroke:var(--focus);stroke-width:2.4}
.tile-labels text{stroke:#FBF8F0}

/* ---------- the phone pass (4 Oct, his word: the site is not mobile optimised) ----------
   Phone widths only; the garden's own bar and its hour dial. Nothing here is read above 640 px */
/* the crumb is the only thing saying which view you are in, and .preview was taking the row's room: now the crumb keeps a floor
   and the preview gives way, so Guwahati is not Guwah… and your guild is not Your gui… . The dashed PREVIEW tag already says
   preview, so the words beside it stand down at this width */
@media (max-width:430px){
  #crumbs{flex:0 0 auto;max-width:16ch}
  .preview{flex:1 1 0;min-width:0}
  .pv-soon{display:none}
}
/* at 320 the row's own content is wider than the screen and the tag was drawn over the sun: the tag stands down, the waitlist
   link saying what it says */
@media (max-width:359.98px){.pv-tag{display:none}}
/* the hour dial: four rows took 165 px of the drawing at 375 (the mud's names printed over each other under it); one row and its
   note take about 90 px, and the header's row gave 36 px back, so the drawing keeps a legible scale */
@media (max-width:639.98px){
  #dial{gap:6px 10px;padding:8px 12px}
  #dial input[type=range]{min-width:120px}
  #dial .note{font-size:11px;line-height:1.35}
}
/* at 320 the hour, its slider, the time and Now stand on one row only if the slider gives up another 32 px */
@media (max-width:359.98px){#dial{gap:6px 8px;padding:8px 10px}#dial input[type=range]{min-width:88px}}
/* a phone: the column held the whole screen and no more, so the bar, the dial and the hint each came straight out of the drawing —
   204 px of pond at 320 × 568 with the dial open and 276 px at 360 × 640, every drawn word at 4 to 5 px: the nine places, the café,
   the mud's names, the Conway Debt line, "tap the mud to stir it". The floor is the height a short screen cannot give, not a width,
   so the drawing keeps 420 px wherever the screen is shorter than that leaves room for, and the column scrolls instead, as every
   other page does. Where the screen is tall enough the column still fills it exactly and nothing scrolls, as before */
@media (max-width:639.98px){
  body{overflow:auto;height:auto;min-height:100dvh}
  .stage{flex:1 0 auto;min-height:420px}
  /* the column scrolls here, so a panel coming up from the foot holds it still while it is open, as a sheet already does (chrome.css) */
  html.panel-open{overflow:hidden}
  /* the zoom pills name where you are (Guild · Lotus · Pond · Map): reading words, at the 12 px floor, which also brings Map's own
     box up from 43 px to the 44 px reach the rest of the row already had */
  .zscale a{font-size:12px}
}