:root{
  --paper:#EDE4D0;
  --ink:#2B241C;               /* umber */
  --moss:#4E7A3A;              /* the one accent */
  --moss-2:#6E9A57;
  --umber:#5A4632;
  --granite:#8A8983; --sandstone:#C4A272; --slate:#5D6A76; --basalt:#3A3835;
  --limestone:#D5CBB2; --ochre:#B06F2E; --clay:#A2583C; --shale:#6F705F;
  --accent:var(--moss);
  --stone:var(--granite);      /* the current task's rock */
  --ease:cubic-bezier(.2,.9,.3,1.15);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Atkinson Hyperlegible",system-ui,sans-serif;
  font-size:16px;
  line-height:1.4;
  display:flex; flex-direction:column;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
/* paper grain over everything */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:50;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.16; mix-blend-mode:multiply;
}

.top{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:22px 28px 0;
}
.wordmark{
  margin:0;
  font-family:"Fraunces",serif;
  font-variation-settings:"opsz" 144,"SOFT" 60,"WONK" 1;
  font-weight:500; font-style:italic;
  font-size:34px; letter-spacing:-.01em;
  color:var(--ink);
  position:relative;
}
/* misregistered second ink under the wordmark */
.wordmark::before{
  content:"cairn"; position:absolute; left:2px; top:-1.5px; z-index:-1;
  color:var(--moss); opacity:.6;
}
.date{font-size:15px; opacity:.75}

.stage{
  flex:1; display:grid;
  grid-template-columns:1.25fr minmax(300px,420px);
  gap:0; align-items:stretch;
  padding:8px 28px 0;
}
#stack{width:100%; height:100%; min-height:440px; display:block}

.panel{
  display:flex; flex-direction:column; justify-content:center;
  padding:0 0 0 32px;
}
.view{display:none}
.view.is-on{display:block; animation:in .35s var(--ease)}
@keyframes in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.field{display:block; margin-bottom:22px}
.field-label{
  display:block; font-size:13px; letter-spacing:.06em; text-transform:lowercase;
  opacity:.7; margin-bottom:8px;
}
.field-row{display:flex; gap:8px; align-items:stretch}
input[type=text]{
  flex:1; min-width:0;
  font:inherit; font-size:20px;
  background:transparent; color:var(--ink);
  border:0; border-bottom:2px solid var(--ink);
  padding:8px 2px; outline:none;
}
input[type=text]::placeholder{color:var(--ink); opacity:.32; font-style:italic}
input[type=text]:focus{border-bottom-color:var(--moss)}

.mic{
  width:44px; border:2px solid var(--ink); background:transparent; color:var(--ink);
  cursor:pointer; display:grid; place-items:center;
  box-shadow:2px 2px 0 var(--moss);
  transition:transform .15s var(--ease);
}
.mic:hover{transform:translate(-1px,-1px)}
.mic.is-listening{background:var(--moss); border-color:var(--umber); color:var(--paper); box-shadow:2px 2px 0 var(--ink); animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(.94)}}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin:-8px 0 22px}
.chips:empty{display:none}
.chips button, .goals label.custom{
  font:inherit; font-size:15px;
  background:transparent; color:var(--ink);
  border:2px solid var(--ink); padding:6px 12px;
  cursor:pointer; position:relative;
  box-shadow:2px 2px 0 var(--chip,var(--slate));
  transition:transform .15s var(--ease), background .15s;
}
.chips button:hover{transform:translate(-1px,-1px)}
.chips button.is-picked{background:var(--ink); color:var(--paper)}
.chips button .dot{display:inline-block; width:9px; height:9px; margin-right:7px; background:var(--chip); vertical-align:0}
.goals{margin-top:0}
.goals button{font-family:"Fraunces",serif; font-variation-settings:"opsz" 30; font-weight:600; font-size:18px; min-width:56px; --chip:var(--sandstone)}
.goals label.custom{display:flex; align-items:center; gap:4px; --chip:var(--sandstone); padding:2px 10px}
.goals label.custom input{width:44px; font:inherit; border:0; background:transparent; outline:none; color:var(--ink); font-family:"Fraunces",serif; font-size:18px; font-weight:600}
.goals label.custom input::-webkit-inner-spin-button{appearance:none}
.goals label.custom span{font-size:13px; opacity:.7}

button.place, button.primary{
  font:inherit; font-size:18px; font-weight:700;
  background:var(--ink); color:var(--paper);
  border:2px solid var(--ink); padding:12px 28px;
  cursor:pointer; box-shadow:3px 3px 0 var(--accent);
  transition:transform .15s var(--ease), box-shadow .15s;
}
button.place:hover, button.primary:hover{transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--accent)}
button.place:active, button.primary:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--accent)}

.row{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.row button{font:inherit; font-size:16px; padding:10px 18px; border:2px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer; box-shadow:2px 2px 0 var(--moss)}
.row button.primary{box-shadow:3px 3px 0 var(--accent)}
button.quiet{border:0 !important; box-shadow:none !important; background:transparent; text-decoration:underline; text-underline-offset:4px; padding:8px 4px !important; opacity:.7; cursor:pointer; font:inherit; color:var(--ink)}
button.quiet:hover{opacity:1}

.run-task{font-size:15px; letter-spacing:.04em; opacity:.75; display:flex; align-items:center; gap:8px}
.run-task .dot{width:10px; height:10px; background:var(--stone); display:inline-block}
.run-time{
  font-family:"Fraunces",serif;
  font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;
  font-weight:300; font-size:112px; line-height:1;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.03em; margin:6px 0 8px;
}
.run-sub{font-size:15px; opacity:.7}

.ask{font-family:"Fraunces",serif; font-variation-settings:"opsz" 72,"WONK" 1; font-size:30px; font-weight:400; margin:0 0 4px; line-height:1.15}
.ask em{font-style:italic; opacity:.7; font-size:.7em; display:block; margin-top:6px}
.hint{font-size:13px; opacity:.55; margin:14px 0 0}

.ratings{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px}
.ratings button{
  font:inherit; font-size:17px; padding:14px 10px;
  border:2px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer;
  font-family:"Fraunces",serif; font-variation-settings:"opsz" 30,"WONK" 1; font-weight:500;
  transition:transform .15s var(--ease);
}
.ratings button:nth-child(1){box-shadow:2px 2px 0 var(--clay); transform:rotate(-.6deg)}
.ratings button:nth-child(2){box-shadow:2px 2px 0 var(--sandstone); transform:rotate(.4deg)}
.ratings button:nth-child(3){box-shadow:2px 2px 0 var(--moss); transform:rotate(.5deg)}
.ratings button:nth-child(4){box-shadow:2px 2px 0 var(--basalt); transform:rotate(-.3deg)}
.ratings button:hover{transform:translate(-1px,-1px) rotate(0)}

.foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 28px 20px; font-size:14px;
}
.today{opacity:.75}
.tools{display:flex; align-items:center; gap:18px}
.toggle{display:inline-flex; align-items:center; gap:6px; cursor:pointer; opacity:.75}
.toggle input{accent-color:var(--ink)}
.toggle.test{opacity:.45}

.toast{
  position:fixed; left:50%; bottom:64px; transform:translateX(-50%);
  background:var(--ink); color:var(--paper); padding:14px 18px; margin:0;
  font:inherit; font-size:14px; white-space:pre; z-index:60;
  box-shadow:3px 3px 0 var(--moss);
  animation:in .3s var(--ease);
}

@media (max-width:820px){
  .stage{grid-template-columns:1fr; padding:0 18px}
  #stack{min-height:300px; height:44vh}
  .panel{padding:16px 0 0}
  .run-time{font-size:84px}
  .top,.foot{padding-left:18px; padding-right:18px}
  .foot{flex-direction:column; align-items:flex-start}
}

/* ---------- v2: nav, dial, menus, dialogs, pages, mini ---------- */
a{color:var(--moss)}
.nav a{color:var(--ink)}
.wordmark{text-decoration:none; display:inline-block}
.nav{display:flex; gap:18px; align-items:baseline; font-size:15px}
.nav a, .nav .link{color:var(--ink); opacity:.75; text-decoration:none; background:none; border:0; font:inherit; cursor:pointer; padding:0}
.nav a:hover, .nav .link:hover{opacity:1; text-decoration:underline; text-underline-offset:4px}
.nav a[aria-current]{opacity:1; border-bottom:2px solid var(--moss)}

kbd{
  font:inherit; font-size:11px; opacity:.5; margin-right:6px; letter-spacing:.02em;
  display:inline-block; vertical-align:1px;
}
button.place kbd{opacity:.6; margin:0 0 0 8px; font-size:12px}
.row kbd, .ratings kbd{margin-left:8px; margin-right:0}
.goals button kbd{margin-right:4px; font-family:"Atkinson Hyperlegible",sans-serif; font-weight:400}

.goal-row{display:flex; align-items:center; gap:18px}
.goals{margin:0}
.dial{position:relative; width:88px; height:88px; cursor:grab; flex:none; user-select:none; touch-action:none}
.dial:active{cursor:grabbing}
.dial canvas{width:88px; height:88px; display:block}
.dial-num{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  font-family:"Fraunces",serif; font-variation-settings:"opsz" 30; font-weight:600; font-size:22px; padding-top:2px;
}

select.more{
  font:inherit; font-size:15px; color:var(--ink); background:transparent;
  border:2px dashed var(--ink); padding:6px 10px; cursor:pointer; appearance:none; -webkit-appearance:none;
  opacity:.8;
}
select.more:hover{opacity:1}

.menu{position:relative}
.menu-list{
  position:absolute; bottom:calc(100% + 6px); right:0; min-width:200px;
  background:var(--paper); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--moss);
  display:flex; flex-direction:column; z-index:40; padding:4px 0;
}
.menu-list[hidden]{display:none}
.menu-list button{font:inherit; font-size:15px; text-align:left; background:none; border:0; padding:8px 14px; cursor:pointer; color:var(--ink)}
.menu-list button:hover{background:var(--ink); color:var(--paper)}

dialog.sheet{
  border:2px solid var(--ink); background:var(--paper); color:var(--ink); padding:0;
  box-shadow:5px 5px 0 var(--accent); max-width:440px; width:calc(100vw - 40px);
}
dialog.sheet::backdrop{background:rgba(35,31,32,.35)}
.sheet-body{padding:26px 28px 22px; margin:0}
.sheet-body .ask{font-size:26px; margin-bottom:10px}
.sheet-body .hint{margin:0 0 18px}
.sheet-body input[type=email], .sheet-body input[type=password], .sheet-body input[type=text]{
  width:100%; font:inherit; font-size:18px; background:transparent; color:var(--ink);
  border:0; border-bottom:2px solid var(--ink); padding:8px 2px; outline:none;
}
.sheet-body input:focus{border-bottom-color:var(--accent)}
.error{color:var(--clay); font-size:14px; margin:0 0 8px}
.keys{border-collapse:collapse; font-size:15px; margin:6px 0 14px}
.keys td{padding:6px 12px 6px 0; vertical-align:top}
.keys kbd{font-size:13px; opacity:1; border:1.5px solid var(--ink); padding:1px 6px; margin:0 2px 0 0}

/* pages */
.page{max-width:1040px; margin:0 auto; padding:10px 28px 40px; flex:1; width:100%}
.page h2{font-family:"Fraunces",serif; font-variation-settings:"opsz" 72,"WONK" 1; font-weight:400; font-size:30px; margin:26px 0 10px}
.page h2:first-child{margin-top:8px}
.page .lede{opacity:.7; max-width:56ch; margin:0 0 18px}
.tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:14px; margin:6px 0 10px}
.tile{border:2px solid var(--ink); padding:14px 16px 12px; box-shadow:3px 3px 0 var(--tile,var(--umber))}
.tile .n{font-family:"Fraunces",serif; font-variation-settings:"opsz" 96; font-weight:300; font-size:42px; line-height:1; letter-spacing:-.02em}
.tile .l{font-size:13px; opacity:.7; margin-top:6px; letter-spacing:.04em}
.trailwrap{overflow-x:auto; padding-bottom:6px}
canvas.trail{display:block; height:220px}
table.stats{width:100%; border-collapse:collapse; font-size:15px}
table.stats th{text-align:left; font-weight:400; opacity:.6; font-size:13px; letter-spacing:.05em; padding:6px 10px 6px 0; border-bottom:2px solid var(--ink)}
table.stats td{padding:9px 10px 9px 0; border-bottom:1px solid rgba(35,31,32,.15); vertical-align:middle}
table.stats td.num, table.stats th.num{text-align:right; font-variant-numeric:tabular-nums}
table.stats .dot{display:inline-block; width:10px; height:10px; margin-right:8px; vertical-align:0}
.bars{display:flex; gap:6px; align-items:flex-end; height:90px; margin:8px 0 2px}
.bars div{flex:1; background:var(--ink); opacity:.85; position:relative; min-height:2px}
.bars div span{position:absolute; bottom:100%; left:0; right:0; text-align:center; font-size:11px; opacity:.7; padding-bottom:3px}
.barlabels{display:flex; gap:6px; font-size:11px; opacity:.6}
.barlabels div{flex:1; text-align:center}
.locked{border:2px dashed var(--ink); padding:30px; text-align:center; max-width:520px; margin:30px auto}

/* tasks page */
.tasklist{list-style:none; margin:0; padding:0; max-width:640px}
.tasklist li{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid rgba(35,31,32,.15)}
.tasklist li.is-archived{opacity:.45}
.tasklist .name{flex:1; font:inherit; font-size:17px; background:transparent; border:0; border-bottom:2px solid transparent; color:var(--ink); padding:4px 0; outline:none; min-width:0}
.tasklist .name:focus{border-bottom-color:var(--accent)}
.tasklist .uses{font-size:13px; opacity:.6; min-width:70px; text-align:right}
.swatch{width:22px; height:22px; border:2px solid var(--ink); cursor:pointer; flex:none; position:relative}
.swatches{display:flex; gap:6px}
.swatches button{width:22px; height:22px; border:2px solid transparent; cursor:pointer; padding:0}
.swatches button.is-on{border-color:var(--ink)}
.pin{font:inherit; font-size:13px; background:none; border:2px solid var(--ink); padding:3px 8px; cursor:pointer; color:var(--ink)}
.pin.is-on{background:var(--ink); color:var(--paper)}
.iconbtn{background:none; border:0; cursor:pointer; opacity:.5; font:inherit; font-size:18px; color:var(--ink); padding:2px 6px}
.iconbtn:hover{opacity:1}
.addrow{display:flex; gap:8px; margin:14px 0 6px; max-width:640px}
.addrow input{flex:1; font:inherit; font-size:17px; background:transparent; color:var(--ink); border:0; border-bottom:2px solid var(--ink); padding:8px 2px; outline:none}

/* mini window */
body.mini{min-height:0; height:100vh; overflow:hidden}
body.mini .top{padding:10px 14px 0; cursor:move}
body.mini .wordmark{font-size:22px}
body.mini .nav{gap:10px; font-size:12px}
body.mini .nav a{display:none}
body.mini .stage{grid-template-columns:1fr; grid-template-rows:140px 1fr; padding:0 14px}
body.mini #stack{min-height:0; height:140px}
body.mini .chips .hint{display:none}
body.mini .top{-webkit-app-region:drag}
body.mini .nav, body.mini input, body.mini button, body.mini .dial{-webkit-app-region:no-drag}
body.mini .panel{padding:8px 0 0}
body.mini .field{margin-bottom:12px}
body.mini .field-label{display:none}
body.mini input[type=text]{font-size:16px; padding:6px 2px}
body.mini .mic{width:36px}
body.mini .chips{margin:-4px 0 8px; gap:6px}
body.mini .chips:empty{display:none}
body.mini .chips button{font-size:13px; padding:4px 8px}
body.mini .goals button{font-size:15px; min-width:40px; padding:4px 8px}
body.mini .goals button kbd, body.mini .place kbd, body.mini .row kbd, body.mini .ratings kbd{display:none}
body.mini .dial{width:56px; height:56px}
body.mini .dial canvas{width:56px; height:56px}
body.mini .dial-num{font-size:15px}
body.mini .goal-row{gap:10px}
body.mini button.place{font-size:15px; padding:8px 18px; width:100%}
body.mini .run-time{font-size:56px; margin:2px 0 4px}
body.mini .run-sub{font-size:12px}
body.mini .ask{font-size:20px}
body.mini .ratings{gap:6px}
body.mini .ratings button{font-size:14px; padding:8px 6px}
body.mini .row button{font-size:14px; padding:8px 12px}
body.mini .foot{padding:6px 14px 10px; font-size:12px; flex-direction:row}
body.mini .foot .today{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
body.mini .toggle{display:none}

/* the line under the wordmark */
.motto{font-family:"Fraunces",serif; font-style:italic; font-variation-settings:"opsz" 30,"WONK" 1; font-size:14px; opacity:.6; margin-left:14px; letter-spacing:.01em}
body.mini .motto{display:none}

/* travelers */
.travelers{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; margin:8px 0 4px}
.traveler{border:2px solid var(--ink); box-shadow:3px 3px 0 var(--moss); padding:12px 14px 10px; position:relative}
.traveler h3{margin:0; font-family:"Fraunces",serif; font-variation-settings:"opsz" 30,"WONK" 1; font-weight:500; font-size:20px}
.traveler .status{font-size:13px; opacity:.75; margin:2px 0 6px}
.traveler .status.is-today{color:var(--moss); opacity:1}
.traveler canvas{display:block; width:100%; height:120px}
.traveler .leave{position:absolute; top:8px; right:10px}
.asked-row{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid rgba(43,36,28,.15); max-width:640px; font-size:15px}
.asked-row .who{flex:1}
.stack-travelers{font-size:14px; opacity:.8; display:flex; gap:14px; flex-wrap:wrap}
.stack-travelers span b{font-weight:400; color:var(--moss)}
body.mini .stack-travelers{display:none}

.hide-win{font-size:22px; line-height:1; margin-left:6px; padding:2px 8px !important; border:1.5px solid var(--ink) !important; opacity:.8}
.hide-win:hover{background:var(--ink); color:var(--paper); text-decoration:none !important; opacity:1}
body.mini .hide-win{display:inline-block}
body.mini .nav{align-items:center}


/* ==================== v3 · type and paper ==================== */
:root{
  --serif:"Alegreya", Georgia, serif;
  --sc:"Alegreya SC", "Alegreya", Georgia, serif;
  --sans:"Alegreya Sans", system-ui, sans-serif;
  --rule:rgba(43,36,28,.35);
  --paper-edge:#E2D6BC;
}
body{
  font-family:var(--sans); font-size:17px;
  background:var(--paper);
  background-image:radial-gradient(ellipse 120% 90% at 50% 45%, rgba(0,0,0,0) 55%, rgba(90,70,50,.14) 100%);
  background-attachment:fixed;
}
body::after{opacity:.13}

/* wordmark: cut in small caps, no second ink */
.wordmark{font-family:var(--sc); font-style:normal; font-weight:500; font-size:30px; letter-spacing:.14em; font-variation-settings:normal}
.wordmark::before{display:none}
.motto{font-family:var(--serif); font-style:italic; font-size:16px; opacity:.6; margin-left:14px; font-variation-settings:normal}
.nav{font-family:var(--sc); font-size:15px; letter-spacing:.08em}
.nav a[aria-current]{border-bottom-color:var(--moss)}
.date{font-family:var(--serif); font-style:italic}

/* labels in small caps, like an inscription */
.field-label, table.stats th, .tile .l, .barlabels, .run-task, .today, .status, .keys td:first-child{
  font-family:var(--sc); letter-spacing:.12em; text-transform:lowercase; font-size:13px;
}
.today{font-size:14px}
.run-task{font-size:15px}

/* inputs */
input[type=text], .sheet-body input, .addrow input{font-family:var(--serif); font-size:22px; border-bottom-width:1px; border-bottom-color:var(--rule)}
input[type=text]::placeholder{font-style:italic}
.tasklist .name{font-family:var(--serif); font-size:19px}

/* buttons: hairline rules, no coloured drop shadows */
.chips button, .goals label.custom, .mic, .row button, .ratings button, .pin, select.more, .addrow button{
  border-width:1px; border-color:var(--ink); box-shadow:none; font-family:var(--sans); font-size:16px;
}
.chips button:hover, .row button:hover, .ratings button:hover, .pin:hover, .mic:hover{background:var(--ink); color:var(--paper); transform:none}
.chips button.is-picked, .pin.is-on{background:var(--ink); color:var(--paper)}
.goals button{font-family:var(--serif); font-size:20px; font-feature-settings:"onum" 1; font-variation-settings:normal}
.goals button kbd{font-family:var(--sans)}
.ratings button{font-family:var(--sc); letter-spacing:.06em; font-size:17px; transform:none; font-variation-settings:normal}
.ratings button:nth-child(n){box-shadow:none}
.ratings button:hover{transform:none}
button.place, button.primary{
  font-family:var(--sc); letter-spacing:.1em; font-weight:500; font-size:18px;
  box-shadow:none; border-color:var(--ink);
}
button.place:hover, button.primary:hover{transform:none; box-shadow:none; background:var(--moss); border-color:var(--moss)}
button.place:active, button.primary:active{transform:translateY(1px); box-shadow:none}
button.place kbd{font-family:var(--sans); letter-spacing:0}
button.quiet{font-family:var(--sans)}
.mic{box-shadow:none}
.mic.is-listening{box-shadow:none}
.dial-num{font-family:var(--serif); font-feature-settings:"onum" 1; font-size:24px; font-variation-settings:normal}

/* the timer and the questions */
.run-time{font-family:var(--serif); font-weight:400; font-size:108px; letter-spacing:-.01em; font-feature-settings:"lnum" 1,"tnum" 1; font-variation-settings:normal}
.run-sub{font-family:var(--serif); font-style:italic; font-size:16px}
.ask{font-family:var(--serif); font-weight:400; font-size:32px; font-variation-settings:normal}
.ask em{font-size:.62em}
.hint, .lede{font-family:var(--serif); font-style:italic; font-size:16px}
.page .lede{font-size:17px}

/* pages: headings with a rule running out to the margin */
.page h2{font-family:var(--serif); font-weight:400; font-size:28px; display:flex; align-items:center; gap:16px; font-variation-settings:normal}
.page h2::after{content:""; flex:1; height:1px; background:var(--rule)}

/* the ledger: numbers in a row with hairlines, not cards */
.tiles{display:flex; flex-wrap:wrap; gap:0; margin:6px 0 14px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.tile{border:0; box-shadow:none; padding:14px 18px 12px 0; margin-right:18px; border-right:1px solid var(--rule); min-width:0; flex:1 1 0}
@media (max-width:640px){.tile{flex:1 1 40%}}
.tile:last-child{border-right:0; margin-right:0}
.tile .n{font-family:var(--serif); font-weight:400; font-size:40px; font-feature-settings:"onum" 1,"pnum" 1; letter-spacing:0; font-variation-settings:normal}
.tile .l{margin-top:4px; opacity:.65}
table.stats{font-family:var(--sans); font-size:16px}
table.stats th{border-bottom:1px solid var(--ink); opacity:.7}
table.stats td{border-bottom-color:rgba(43,36,28,.12)}
table.stats td.num{font-family:var(--serif); font-feature-settings:"onum" 1,"tnum" 1; font-size:17px}
.bars div{background:var(--umber)}
.traveler{box-shadow:none; border-width:1px}
.traveler h3{font-family:var(--serif); font-weight:500; font-size:22px; font-variation-settings:normal}
.traveler .status{font-family:var(--serif); font-style:italic; letter-spacing:0; text-transform:none; font-size:15px}
.traveler .status.is-today{color:var(--moss)}

/* dialogs, menus, toast */
dialog.sheet{box-shadow:none; border-width:1px}
.sheet-body .ask{font-size:28px}
.menu-list{box-shadow:none; border-width:1px}
.menu-list button{font-family:var(--sans)}
.toast{box-shadow:none; font-family:var(--sans); font-size:15px}
.keys{font-family:var(--sans)}
.keys kbd{font-family:var(--sans); border-width:1px}
kbd{font-family:var(--sans)}
.locked{border-width:1px}
.error{font-family:var(--serif); font-style:italic}

/* mini window keeps the same type, smaller */
body.mini .wordmark{font-size:20px}
body.mini .run-time{font-size:54px}
body.mini .goals button{font-size:16px}
body.mini .ratings button{font-size:14px}
body.mini button.place{font-size:15px}

/* the lockup */
.wordmark{display:inline-flex; align-items:center; gap:10px; text-decoration:none; letter-spacing:0}
.wordmark .mark{width:34px; height:34px; display:block}
.wordmark .wm{display:flex; flex-direction:column; line-height:1}
.wordmark .wm-name{font-family:var(--sc); font-weight:500; font-size:26px; letter-spacing:.16em}
.wordmark .wm-sub{font-family:var(--sans); font-weight:500; font-size:9.5px; letter-spacing:.42em; color:var(--moss); text-transform:uppercase; margin-top:3px; margin-left:2px}
body.mini .wordmark .mark{width:22px; height:22px}
body.mini .wordmark .wm-name{font-size:17px}
body.mini .wordmark .wm-sub{font-size:7px; margin-top:1px}
input[type=email], input[type=password]{font-family:var(--serif); font-size:20px; background:transparent; color:var(--ink); border:0; border-bottom:1px solid var(--rule); padding:8px 2px; outline:none; width:100%}
input[type=email]:focus, input[type=password]:focus{border-bottom-color:var(--moss)}

/* the landing, below the fold of the app */
.below{border-top:1px solid var(--rule); margin-top:24px; padding:40px 0 20px}
body.mini .below{display:none}
.below h1{font-family:var(--serif); font-weight:400; font-size:44px; line-height:1.1; margin:0 0 14px; max-width:20ch}
.below .lede.big{font-size:20px; max-width:62ch}
.below h2{margin-top:44px}
.below h3{font-family:var(--serif); font-weight:500; font-size:21px; margin:0 0 6px}
.cols{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:28px 36px; margin:28px 0 8px}
.cols p{margin:0; font-size:16px; line-height:1.5; opacity:.85}
.get{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:18px; margin:14px 0 8px}
.get-card{border:1px solid var(--ink); padding:18px 20px 16px}
.get-card p{font-size:16px; line-height:1.5; margin:0 0 12px}
.get-card .hint{font-size:14px; margin:10px 0 0}
.get-card .soon{font-family:var(--serif); font-style:italic; color:var(--moss); margin:0}
kbd.k{font-family:var(--sans); font-size:13px; opacity:1; border:1px solid var(--ink); padding:1px 6px; margin:0 2px}
.dl{display:inline-block; font-family:var(--sc); letter-spacing:.1em; font-weight:500; font-size:17px; background:var(--ink); color:var(--paper); border:1px solid var(--ink); padding:10px 22px; text-decoration:none; cursor:pointer}
.dl:hover{background:var(--moss); border-color:var(--moss)}
.dl[hidden]{display:none}
.colophon{margin-top:56px; padding-top:22px; border-top:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.colophon p{margin:0; font-family:var(--serif); font-style:italic; font-size:16px}
.colophon a{color:var(--moss)}

.cmd{font-family:ui-monospace, Menlo, monospace; font-size:13px; background:rgba(43,36,28,.08); border:1px solid var(--rule); padding:8px 10px; margin:8px 0; white-space:pre-wrap; word-break:break-all; user-select:all}

.adv{margin-top:14px; border-top:1px solid var(--rule); padding-top:10px}
.adv summary{cursor:pointer; font-family:var(--serif); font-style:italic; font-size:15px; color:var(--moss)}
.adv p{margin:10px 0}
.get-card b{font-weight:700}

/* install guide */
.howto{display:grid; grid-template-columns:repeat(auto-fit, minmax(380px, 1fr)); max-width:900px; gap:28px 32px; margin:18px 0 6px}
.how{border-top:1px solid var(--rule); padding-top:14px}
.how h3{margin-bottom:10px}
.fig{display:block; width:100%; max-width:340px; height:auto; margin:4px 0 12px}
.how ol{margin:0; padding-left:22px; font-size:16px; line-height:1.55}
.how ol li{margin:0 0 6px}
.how ol li::marker{font-family:var(--serif); font-feature-settings:"onum" 1; color:var(--moss)}
.how b{font-weight:700}
.how .hint{margin:8px 0 0}
.dl.small{font-size:13px; padding:4px 12px; vertical-align:1px}
.soon-line{margin-top:26px; color:var(--moss)}