/* Every value below the tokens comes from them. docs/DESIGN.md says what they mean; core/test/design.test.ts checks it. */
:root {
  --ground: #efebe1;
  --ink: #2a2926;
  --on-ink: #f4f1e9;
  --rake: #cfc9ba;
  --line: rgba(42, 41, 38, 0.18);
  --hover: rgba(42, 41, 38, 0.07);
  /* Stones: darker means harder to get back. --s is the stone, --t the text on it. */
  --s-content: #2a2926;
  --s-tools: #75726a;
  --s-caches: #d3cec0;
  --s-system: #e3ded2;
  --s-mass: #ddd8cb;
  --t-content: #f4f1e9;
  --t-tools: #ffffff;
  --t-caches: #2a2926;
  --t-system: #55524a;
  --t-mass: #2a2926;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; /* the system picks the right Han forms from <html lang> */
  --mono: "SF Mono", ui-monospace, Menlo, monospace;
  --text-caption: 12px;
  --text-small: 13px;
  --text-body: 14px;
  --text-lead: 16px;
  --text-title: 18px;
  --text-heading: 26px;
  --text-unit: 32px;
  --text-compact: 56px;
  --text-hero: 100px;
  --weight-thin: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --radius: 8px;
  --radius-small: 5px;
  --stroke: 1px;
  --stroke-mark: 1.25px;
  --stroke-strong: 2px;
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.3 6.2l1.9 1.9 3.5-4' fill='none' stroke='black' stroke-width='1.25'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.7l3 3 3-3' fill='none' stroke='black' stroke-width='1.25'/%3E%3C/svg%3E");
  --lead: 24px;
  --check: 16px;
  --mark: 14px;
  --fade: 32px;
  --leading: 1.5;
  --control: 36px;
  --row: 26px;
  --bar: 40px;

  --fast: 0.12s;
  --mid: 0.24s;
  --slow: 0.6s;
  --spin: 1.6s;
  --dim: 0.8;
  --disabled: 0.45;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ground: #1a1916; --ink: #e8e3d7; --on-ink: #1a1916; --rake: #3a3832; --line: rgba(232, 227, 215, 0.2); --hover: rgba(232, 227, 215, 0.08);
    --s-content: #e8e3d7; --s-tools: #96938a; --s-caches: #3f3d37; --s-system: #282723; --s-mass: #2e2c27;
    --t-content: #1a1916; --t-tools: #14130f; --t-caches: #e8e3d7; --t-system: #bdb9ad; --t-mass: #e8e3d7;
  }
}
/* The site follows docs/DESIGN.md: no cards, no shadows, one solid button, and sand and stones from the app. */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: var(--text-lead); line-height: var(--leading); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
/* The map keeps its shape, so no stone is cut off and the corner it leaves always fits the words. */
.hero { position: relative; aspect-ratio: 1440 / 900; max-width: 1760px; margin: 0 auto; overflow: hidden; }
.bed { display: block; width: 100%; height: 100%; }
.bed.wide { position: absolute; inset: 0; }
.rings { fill: none; stroke: var(--rake); stroke-width: var(--stroke); }
.stone text, .free-label text { text-anchor: middle; font-size: var(--text-small); }
.stone .size, .free-label .size { font-size: var(--text-caption); }
.stone .big, .free-label .big { font-size: var(--text-lead); }
.stone .size.big, .free-label .size.big { font-weight: var(--weight-light); }
.free-label text { fill: var(--ink); }
.f-content .shape { fill: var(--s-content); } .f-content text { fill: var(--t-content); }
.f-tools .shape { fill: var(--s-tools); } .f-tools text { fill: var(--t-tools); }
.f-caches .shape { fill: var(--s-caches); stroke: var(--rake); stroke-width: var(--stroke); } .f-caches text { fill: var(--t-caches); }
.f-system .shape { fill: var(--s-system); stroke: var(--rake); stroke-width: var(--stroke); } .f-system text { fill: var(--t-system); }
.f-unknown .shape { fill: transparent; stroke: var(--ink); stroke-width: var(--stroke); stroke-dasharray: 1.5 5; stroke-linecap: round; } .f-unknown text { fill: var(--ink); }
.stone.hole .shape { fill: transparent; stroke: var(--ink); stroke-width: var(--stroke-strong); }
.stone.hole text { fill: var(--ink); }
.intro { position: absolute; left: 40px; top: 36px; width: min(36vw, 500px); }
.name { display: flex; align-items: center; gap: var(--space-5); margin: 0; font-size: var(--text-title); font-weight: var(--weight-medium); }
.name img { display: block; }
h1 { margin: 28px 0 0; font-size: clamp(30px, 3vw, 42px); font-weight: var(--weight-light); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.lead { margin: var(--space-6) 0 0; font-size: var(--text-title); }
.cta { margin-top: 24px; }
.btn { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border: var(--stroke) solid var(--ink); border-radius: var(--radius); font-size: var(--text-lead); text-decoration: none; }
.btn.primary { background: var(--ink); color: var(--on-ink); font-weight: var(--weight-medium); }
.btn.primary:hover { opacity: var(--dim); }
.btn[aria-disabled] { opacity: var(--disabled); }
.requires { margin: var(--space-5) 0 0; font-size: var(--text-small); }
.narrowmap { display: none; }
main { max-width: 760px; margin: 0 auto; padding: 56px 24px 24px; }
section { margin-bottom: 56px; }
h2 { margin: 0 0 var(--space-5); font-size: 28px; font-weight: var(--weight-light); line-height: 1.25; }
h3 { margin: 0; font-size: var(--text-lead); font-weight: var(--weight-medium); }
p { margin: 0; }
.steps { list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.steps li { padding: var(--space-6) 0; border-top: var(--stroke) solid var(--line); }
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: var(--space-5) 0; border-top: var(--stroke) solid var(--line); }
.shot { max-width: 1120px; margin: 0 auto 56px; padding: 0; width: calc(100vw - 48px); position: relative; left: 50%; transform: translateX(-50%); }
.shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: var(--stroke) solid var(--rake); }
footer { max-width: 760px; margin: 0 auto; padding: 24px 24px 56px; border-top: var(--stroke) solid var(--line); font-size: var(--text-small); }
/* The language control is the app's select: a boxed control with a chevron, and a list with a tick on the current choice. */
.topline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.language { position: relative; flex: none; }
.language summary { list-style: none; display: inline-flex; align-items: center; gap: var(--space-6); height: var(--control); padding: 0 var(--space-5); border: var(--stroke) solid var(--ink); border-radius: var(--radius); font-size: var(--text-body); cursor: default; }
.language summary::-webkit-details-marker { display: none; }
.language summary::after { content: ""; width: 12px; height: 12px; background: var(--ink); -webkit-mask: var(--chevron) center / 100% no-repeat; mask: var(--chevron) center / 100% no-repeat; }
.language summary:hover, .language[open] summary { background: var(--hover); }
.language ul { position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: 2; min-width: 220px; margin: 0; padding: var(--space-2); list-style: none; background: var(--ground); border: var(--stroke) solid var(--ink); border-radius: var(--radius); }
.language a { display: flex; align-items: center; justify-content: space-between; height: var(--row); padding: 0 var(--space-4); border-radius: var(--radius-small); font-size: var(--text-body); text-decoration: none; white-space: nowrap; }
.language a:hover, .language a:focus-visible { background: var(--hover); outline: none; }
.language a[aria-current]::after { content: ""; width: 12px; height: 12px; background: var(--ink); -webkit-mask: var(--tick) center / 100% no-repeat; mask: var(--tick) center / 100% no-repeat; }
footer p { margin: 0 0 var(--space-2); }
.links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.links a, footer p a { text-decoration: none; } .links a:hover, footer p a:hover { text-decoration: underline; }
.legal-head { max-width: 760px; margin: 0 auto; padding: 32px 24px 0; }
.legal-head .name { display: inline-flex; text-decoration: none; }
.legal main { padding-top: 32px; }
.legal h1 { margin: 0; font-size: 36px; }
.legal main h2 { margin: 32px 0 var(--space-4); font-size: var(--text-title); font-weight: var(--weight-medium); }
.legal main p, .legal main ul { margin: 0 0 var(--space-5); }
.legal main ul { padding-left: 20px; }
.legal code { font-family: var(--mono); font-size: var(--text-body); word-break: break-word; }
.updated { font-size: var(--text-small); }
:focus-visible { outline: var(--stroke-strong) solid var(--ink); outline-offset: 2px; }
@media (max-width: 1180px) {
  .hero { aspect-ratio: auto; overflow: visible; }
  .bed.wide { display: none; }
  .intro { position: static; width: auto; padding: 24px; }
  .narrowmap { display: block; max-width: 560px; margin: 0 auto; padding: 0 12px; }
  .narrowmap .bed { height: auto; }
  main { padding-top: 32px; }
}