/* Hilltop share page: an index card on a felt desk. Paper tones only, one accent (pumpkin for autumn). */
:root { --felt: #4f6b3a; --felt-dark: #3c5330; --card: #f6f1e4; --ink: #2d2a24; --ink-soft: #6b665b; --rule: #c9bfa6; --accent: #d86a2e; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: radial-gradient(ellipse at 30% 20%, var(--felt), var(--felt-dark)); color: var(--ink);
       font: 17px/1.45 -apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums;
       display: grid; place-items: center; padding: 24px 16px; }
.card { width: min(420px, 100%); background: var(--card); border-radius: 6px; padding: 22px 22px 26px;
        box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 2px 0 rgba(255,255,255,.4) inset;
        background-image: repeating-linear-gradient(transparent 0 27px, rgba(201,191,166,.35) 27px 28px); }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.handle { font-weight: 600; }
.day { color: var(--ink-soft); font-size: 15px; }
.diagram { margin: 18px 0 8px; display: grid; justify-items: center; }
.diagram svg { width: 58%; height: auto; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.18)); }
.diagram figcaption { color: var(--ink-soft); font-size: 14px; margin-top: 8px; }
.distance { margin: 8px 0 0; font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: -1px; }
.distance .unit { font-size: 24px; font-weight: 500; color: var(--ink-soft); }
.meta { margin: 6px 0 0; color: var(--ink-soft); }
.dotted { border: 0; border-top: 2px dotted var(--rule); margin: 18px 0; height: 0; }
.code { margin: 0 0 18px; font-size: 14px; color: var(--ink-soft); word-break: break-all; }
.code code { color: var(--ink); font-size: 13px; }
.badge { display: block; text-align: center; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600;
         padding: 13px 16px; border-radius: 6px; box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.store { display: block; text-align: center; margin-top: 12px; color: var(--ink-soft); font-size: 15px; }
.lede { font-size: 19px; }
h1 { margin: 0 0 8px; font-size: 34px; letter-spacing: -0.5px; }
/* The crease pattern (pattern.js): the paper that is left, its own edge, cuts, and creases by kind. */
.sheet { fill: #fff; stroke: #fff; stroke-width: 0.3; stroke-linejoin: round; }
.edge { stroke: var(--rule); stroke-width: 0.8; stroke-linecap: round; fill: none; }
.crease { stroke: var(--ink); stroke-width: 0.9; stroke-dasharray: 2.2 2.2; fill: none; }
.crease.mountain { stroke-dasharray: 4 1.5 1 1.5; }
.crease.open { stroke: var(--rule); stroke-width: 0.6; stroke-dasharray: none; }
.cut { stroke: var(--accent); stroke-width: 1; stroke-linecap: round; fill: none; }