/* Acre Hunt. The look of kizmatcher: light paper, white cards, one black slab for the main numbers, lime accent.
   Fonts are self-hosted: Google is blocked for the owner (China). */
@font-face{font-family:"Onest";src:url(/static/fonts/onest-cyrillic.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";src:url(/static/fonts/onest-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--paper:#ecece7;--card:#fff;--ink:#141412;--ink-line:#2f2f2b;--text:#141412;--muted:#66665f;--line:#e7e7e1;
  --on-ink:#f3f3ee;--on-ink-2:#a3a39a;--lime:#9df22b;--green:#3b6600;--coral:#b3380f;--r:24px;
  --sans:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;--ease:cubic-bezier(.22,1,.36,1)}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--text);font:400 15px/1.45 var(--sans);font-variant-numeric:tabular-nums;color-scheme:light}
h1,h2,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}
.small{font-size:13px}
.error{color:var(--coral);font-size:14px}
.mark{width:22px;height:22px;fill:var(--ink)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- header ---------- */
.bar{display:flex;align-items:center;gap:12px;max-width:880px;height:64px;margin:0 auto;padding:0 16px}
.brand{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:600;letter-spacing:-.02em;text-decoration:none}
.switch{position:relative;margin-left:auto;min-width:0}
.switch summary{display:flex;align-items:center;gap:6px;max-width:52vw;height:36px;padding:0 14px;border-radius:999px;background:var(--card);font-size:14px;font-weight:500;cursor:pointer;list-style:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.switch summary::-webkit-details-marker{display:none}
.switch summary::after{content:"";flex:none;width:7px;height:7px;margin-top:-3px;border:solid var(--muted);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.switch ul{position:absolute;right:0;z-index:5;min-width:220px;margin-top:6px;padding:6px;border-radius:16px;background:var(--card);box-shadow:0 12px 32px rgba(20,20,18,.14)}
.switch a{display:block;padding:9px 12px;border-radius:10px;text-decoration:none;font-size:14px}
.switch a:hover{background:var(--paper)}
.switch a[aria-current]{font-weight:600}
.switch .add{color:var(--muted)}
.out button{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:var(--ink);color:var(--on-ink);font-weight:600;cursor:pointer}
.bar .switch+.out{margin-left:0}
.bar>.out:only-of-type{margin-left:auto}
.tabs{display:flex;gap:4px;max-width:880px;margin:0 auto;padding:0 16px 12px;overflow-x:auto}
.tabs a{flex:none;padding:8px 14px;border-radius:999px;color:var(--muted);font-size:14px;font-weight:500;text-decoration:none}
.tabs a[aria-current]{background:var(--ink);color:var(--on-ink)}

/* ---------- page ---------- */
.page{display:flex;flex-direction:column;gap:12px;max-width:880px;margin:0 auto;padding:0 16px 40px}
.page.narrow{max-width:440px;padding-top:8vh}
.card{padding:22px 22px 24px;border-radius:var(--r);background:var(--card)}
.card h1{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.card h2{margin-bottom:14px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.entry{display:flex;flex-direction:column;gap:12px}
.big-mark{width:36px;height:36px}
.head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px}

/* ---------- forms ---------- */
.stack{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.row label{flex:1 1 200px}
label{display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:13px;font-weight:500}
label small{font-weight:400}
label.check{flex-direction:row;align-items:center;gap:8px;color:var(--text);font-size:14px;font-weight:400}
input:not([type=checkbox]),textarea{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:#fafaf7;color:var(--text);font-size:15px}
textarea{resize:vertical;font-family:ui-monospace,Menlo,monospace;font-size:13px;word-break:break-all}
input:focus,textarea:focus{border-color:var(--ink);outline:none;background:#fff}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--ink)}
button,.btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;transition:transform .3s var(--ease),background-color .2s}
button:active{transform:scale(.97)}
button.primary{border-color:var(--ink);background:var(--ink);color:var(--on-ink)}
.stack button{align-self:flex-start}
.entry .stack button.primary{align-self:stretch}
.howto{display:flex;flex-direction:column;gap:8px;margin:14px 0 16px;counter-reset:s}
.howto li{position:relative;padding-left:34px;font-size:14px;counter-increment:s}
.howto li::before{content:counter(s);position:absolute;left:0;top:-1px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--paper);font-size:12px;font-weight:600}
.card>.muted.small{margin-top:12px}

/* ---------- the black slab ---------- */
.slab{padding:22px 24px 26px;border-radius:var(--r);background:var(--ink);color:var(--on-ink)}
.slab-name{color:var(--on-ink-2);font-size:14px;font-weight:500}
.band{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:10px}
.band>div{display:flex;flex-direction:column;min-width:0}
.big{font-size:clamp(56px,14vw,96px);font-weight:200;line-height:1;letter-spacing:-.045em}
.big.lime{color:var(--lime)}
.k{margin-top:8px;color:var(--on-ink-2);font-size:13px}
.slab-note{margin-top:16px;color:var(--on-ink-2);font-size:14px}

/* ---------- steps (the reference: a filled track up to the current step) ---------- */
.steps{--all:5;--done:0;position:relative;display:grid;grid-template-columns:repeat(var(--all),1fr);padding:6px;border-radius:999px;background:var(--paper)}
.steps::before{content:"";position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px) / var(--all) * var(--done));border-radius:999px;background:linear-gradient(90deg,var(--ink),#2c3a12 70%,var(--lime));transition:width .6s var(--ease)}
.steps[data-done="1"]{--done:1}.steps[data-done="2"]{--done:2}.steps[data-done="3"]{--done:3}.steps[data-done="4"]{--done:4}.steps[data-done="5"]{--done:5}
.steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 2px 6px;min-width:0}
.steps .dot{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--muted);font-size:12px;font-weight:600}
.steps .dot svg{width:15px;height:15px;fill:none;stroke:var(--green);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.steps .label{max-width:100%;font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.steps .ok .label{color:var(--on-ink)}
.steps .now .dot{box-shadow:0 0 0 2px var(--lime)}
.steps .later{opacity:.55}
.tip{display:inline-flex;margin-top:14px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-size:13px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.facts>div{display:flex;flex-direction:column;gap:2px}
.facts .k{margin:0;color:var(--muted)}
.facts b{font-size:20px;font-weight:500}

/* ---------- cards list ---------- */
.search{margin:14px 0 6px}
.cards li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;grid-template-areas:"img what money" "img pin pin";align-items:center;gap:4px 14px;padding:12px 0;border-top:1px solid var(--line)}
.cards img,.cards .noimg{grid-area:img;width:48px;height:64px;border-radius:10px;background:var(--paper);object-fit:cover}
.cards .what{grid-area:what;display:flex;flex-direction:column;min-width:0}
.cards .title{overflow:hidden;font-weight:500;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}
.cards .money{grid-area:money;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.cards .money b{font-size:16px;font-weight:600}
.pin{grid-area:pin;display:flex;align-items:center;gap:4px}
.pin button{height:28px;padding:0 10px;font-size:12px;color:var(--muted)}
.pin button.sel{border-color:var(--ink);color:var(--text)}
.watch{display:inline-block;width:10px;height:10px;margin-right:6px;border:1.5px solid var(--muted);border-radius:50%}
.watch.on{border-color:var(--green);background:var(--lime)}
.pager{display:flex;justify-content:space-between;margin-top:14px}
.people li{padding:8px 0;border-top:1px solid var(--line)}
.people{margin-bottom:14px}
@media (min-width:640px){
  .cards li{grid-template-columns:56px minmax(0,1fr) 150px 210px;grid-template-areas:"img what money pin"}
  .cards img,.cards .noimg{width:56px;height:74px}
  .pin{justify-content:flex-end}
}