:root {
  --paper: #f4ecdc;
  --ink: #2b2a26;
  --ink-2: #6b665c;
  --line: rgba(43, 42, 38, .14);
  --serif: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --round: "Arial Rounded MT Bold", "Avenir Next", "Helvetica Neue", sans-serif;
  --sans: -apple-system, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: #fbf7ee; color: var(--ink); font-family: var(--serif); }
#world.dragging { cursor: grabbing; }
.recentre {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); padding: 8px 14px; border: 0; border-radius: 999px;
  background: #003262; color: #fff; font: 600 .82rem/1.2 var(--sans); cursor: pointer; box-shadow: 0 6px 18px rgba(0, 30, 60, .25);
}
.recentre[hidden] { display: none; }
#world { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; cursor: crosshair; }

.card {
  position: fixed; background: #fffdf8; border: 2px solid #2e2823; border-radius: 14px;
  box-shadow: 4px 4px 0 #2e2823;
}
.eyebrow { margin: 0; font: 600 .68rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.place { top: 16px; left: 16px; padding: 14px 18px 13px; min-width: 230px; max-width: min(380px, calc(100vw - 32px)); }
.place h1 { margin: 7px 0 0; font: 400 1.4rem/1.15 var(--round); }
.place .sub { margin: 4px 0 0; font: 400 .92rem/1.3 var(--serif);  color: var(--ink-2); min-height: 1.2em; }
#find {
  width: 100%; margin: 10px 0 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255, 255, 255, .7);
  font: 400 .9rem/1.2 var(--serif); color: var(--ink); outline: none;
}
#find:focus { border-color: #003262; background: #fff; }
#results button {
  display: block; width: 100%; margin: 4px 0 0; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; text-align: left;
  font: 600 .9rem/1.25 var(--serif); color: var(--ink); cursor: pointer;
}
#results button:hover, #results button:focus { background: rgba(0, 50, 98, .08); outline: none; }
#results span { display: block; font: 400 .74rem/1.3 var(--sans); color: var(--ink-2); }
#results p { margin: 8px 0 0; font: 400 .85rem/1.3 var(--serif); color: var(--ink-2); }
.info { left: 16px; bottom: 34px; width: min(340px, calc(100vw - 32px)); padding: 14px 16px 12px; }
.info h2 { margin: 7px 0 0; font: 400 1.2rem/1.2 var(--round); }
.info .sub { margin: 4px 0 0; font: 400 .9rem/1.35 var(--serif); color: var(--ink-2); }
.info .src { margin: 9px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font: 400 .76rem/1.4 var(--sans); color: var(--ink-2); }
.info .row { display: flex; gap: 8px; margin: 11px 0 0; }
.info button {
  padding: 6px 12px; border: 1px solid #003262; border-radius: 7px; background: #003262; color: #fff; font: 600 .8rem/1.2 var(--sans); cursor: pointer;
}
.info button.quiet { margin-left: auto; background: transparent; color: var(--ink-2); border-color: var(--line); }
.info button[hidden] { display: none; }
.topright { position: fixed; top: 16px; right: 16px; display: flex; gap: 10px; align-items: flex-start; }
.clock { position: static; padding: 12px 16px 10px; text-align: right; }
.clock .time { margin: 5px 0 0; font: 400 1.45rem/1 var(--round); font-variant-numeric: tabular-nums; }
.clock .wx { margin: 5px 0 0; font: 400 .8rem/1.2 var(--serif);  color: var(--ink-2); }
.day { top: 116px; right: 16px; width: 250px; padding: 12px 14px 11px; }
.day p:not(.eyebrow) { margin: 6px 0 0; font: 400 .86rem/1.35 var(--serif); }
.day #next { font-weight: 600; }
.toast {
  position: fixed; left: 50%; top: 22px; transform: translate(-50%, -8px); margin: 0; padding: 8px 16px; border-radius: 999px;
  background: rgba(43, 42, 38, .82); color: #f6efe0; font: 500 .95rem/1.2 var(--serif); opacity: 0;
  transition: opacity .8s, transform .8s; pointer-events: none;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.mini { right: 16px; bottom: 34px; padding: 6px; line-height: 0; }
.mini canvas { border-radius: 6px; width: 220px; height: 176px; }

.hint {
  position: fixed; left: 16px; bottom: 30px; margin: 0; padding: 8px 12px; border-radius: 8px;
  background: rgba(43, 42, 38, .78); color: #f6efe0; font: 400 .8rem/1.5 var(--sans); transition: opacity .8s;
  max-width: calc(100vw - 280px);
}
.hint.gone { opacity: 0; pointer-events: none; }
kbd {
  display: inline-block; min-width: 1.5em; margin: 0 1px; padding: 0 5px; border-radius: 4px; text-align: center;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); font: 600 .72rem/1.5 var(--sans);
}
.credit { position: fixed; right: 16px; bottom: 10px; margin: 0; font: 400 .68rem/1 var(--sans); color: rgba(43, 42, 38, .6); }

@media (max-width: 640px) {
  .mini { display: none; }
  .hint { max-width: calc(100vw - 32px); }
  .place h1 { font-size: 1.2rem; }
}

/* ---- settings and styles */
.gear {
  padding: 9px 14px; border: 2px solid #2e2823; border-radius: 12px;
  background: #fffdf8; color: #2e2823; font: 400 .85rem/1.2 var(--round); cursor: pointer; box-shadow: 3px 3px 0 #2e2823;
}
.settings { top: 16px; right: 16px; width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 14px 16px 12px; z-index: 5; }
.settings h2 { margin: 12px 0 0; font: 400 1.05rem/1.2 var(--round); }
.settings .row button.wide { margin-left: 0; }
.settings dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 10px 0 0; font: 400 .84rem/1.35 var(--serif); }
.settings dt { white-space: nowrap; }
.settings dd { margin: 0; opacity: .85; }
.settings kbd { background: rgba(0, 0, 0, .07); border: 1px solid rgba(0, 0, 0, .2); color: inherit; }
.settings .style {
  display: flex; gap: 12px; align-items: center; width: 100%; margin: 8px 0 0; padding: 9px 10px; border: 2px solid transparent; border-radius: 10px;
  background: rgba(0, 0, 0, .04); text-align: left; cursor: pointer; color: inherit;
}
.settings .style.on { border-color: currentColor; background: transparent; }
.settings .swatch { display: flex; flex: none; }
.settings .swatch i { width: 16px; height: 30px; display: block; }
.settings .swatch i:first-child { border-radius: 6px 0 0 6px; }
.settings .swatch i:last-child { border-radius: 0 6px 6px 0; }
.settings .style-text b { display: block; font: 400 1rem/1.2 var(--round); }
.settings .style-text small { display: block; margin-top: 2px; font: 400 .78rem/1.35 var(--serif); opacity: .75; }
.settings .row { display: flex; gap: 8px; margin: 12px 0 0; }
.settings .row button { padding: 7px 12px; border: 2px solid #2e2823; border-radius: 8px; background: #2e2823; color: #fffdf8; font: 600 .8rem/1.2 var(--sans); cursor: pointer; }
.settings .row button:disabled { opacity: .6; cursor: default; }
.settings .row button.quiet { margin-left: auto; background: transparent; color: inherit; }
.settings .src { margin: 10px 0 0; font: 400 .76rem/1.4 var(--sans); opacity: .7; }

body[data-style="atlas"] { background: #e9dfcb; }
body[data-style="atlas"] .card { background: rgba(250, 245, 234, .94); border: 1px solid rgba(43, 42, 38, .16); border-radius: 10px; box-shadow: 0 8px 24px rgba(60, 45, 20, .14); }
body[data-style="atlas"] .place h1, body[data-style="atlas"] .info h2, body[data-style="atlas"] .clock .time, body[data-style="atlas"] .settings .style-text b { font-family: "Iowan Old Style", Palatino, Georgia, serif; font-weight: 600; }
body[data-style="atlas"] .gear { border-width: 1px; box-shadow: 0 4px 12px rgba(60, 45, 20, .14); }
body[data-style="toy"] { background: #fdf3e3; }
body[data-style="toy"] .card { border: 0; border-radius: 20px; box-shadow: 0 10px 0 rgba(120, 80, 60, .12), 0 14px 30px rgba(120, 80, 60, .16); background: #fffaf2; }
body[data-style="toy"] .gear { border: 0; box-shadow: 0 5px 0 rgba(120, 80, 60, .16); }
body[data-style="blueprint"] { background: #16324f; color: #e8f1fa; }
body[data-style="blueprint"] .card { background: #1b3d61; border: 1px solid #5f8fb8; border-radius: 4px; box-shadow: none; color: #e8f1fa; }
body[data-style="blueprint"] .eyebrow, body[data-style="blueprint"] .sub, body[data-style="blueprint"] .src, body[data-style="blueprint"] .wx { color: #a9c6e0; }
body[data-style="blueprint"] #find { background: #16324f; color: #e8f1fa; border-color: #5f8fb8; }
body[data-style="blueprint"] #results button { color: #e8f1fa; }
body[data-style="blueprint"] .gear { background: #1b3d61; color: #e8f1fa; border: 1px solid #5f8fb8; box-shadow: none; }
body[data-style="blueprint"] .settings kbd { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }