:root{
  --paper:#f4f1ea;
  --card:#fffdf9;
  --ink:#17140f;
  --ink-2:#4a443a;
  --muted:#8a8377;
  --line:rgba(23,20,15,.14);
  --line-strong:rgba(23,20,15,.34);
  --accent:#2f5cff;
  --accent-ink:#1b3ec4;
  --good:#1a7f4b;
  --bad:#b4351f;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Inter,Roboto,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px,64px 64px;
  background-position:-1px -1px;
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:940px;margin:0 auto;padding:0 22px}
a{color:var(--accent-ink)}

/* ---------------------------------------------------------------- masthead */
.masthead{padding:46px 0 0}
.mast-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px
}
h1{
  font-size:clamp(34px,7vw,62px);line-height:.95;letter-spacing:-.035em;font-weight:800;margin:0
}
.mast-meta{
  font-family:var(--mono);font-size:12px;color:var(--ink-2);max-width:330px;
  display:flex;gap:9px;align-items:flex-start;padding-bottom:6px
}
.dot{
  width:7px;height:7px;border-radius:50%;background:var(--good);flex:0 0 auto;margin-top:6px;
  box-shadow:0 0 0 3px rgba(26,127,75,.16)
}
.rule{border:0;border-top:2px solid var(--ink);margin:20px 0 0}

/* ------------------------------------------------------------------ shelf */
main{padding:0 0 40px}
.shelf{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.loading,.empty{
  font-family:var(--mono);font-size:13px;color:var(--muted);padding:38px 0;text-align:center
}

.item{
  display:grid;
  grid-template-columns:58px 1fr auto;
  gap:18px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
  position:relative;
  transition:background .18s ease;
}
.item:hover{background:rgba(255,253,249,.72)}
.idx{
  font-family:var(--mono);font-size:12px;color:var(--muted);padding-top:5px;letter-spacing:.06em
}
.body{min-width:0}

.title-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.item h2{
  font-size:22px;letter-spacing:-.02em;margin:0;font-weight:750;line-height:1.2
}
.chip{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line-strong);border-radius:999px;padding:3px 9px;color:var(--ink-2);
  white-space:nowrap
}
.chip.win{border-color:rgba(47,92,255,.5);color:var(--accent-ink)}
.chip.apk{border-color:rgba(26,127,75,.5);color:var(--good)}
.tagline{margin:7px 0 0;color:var(--ink);font-size:15px;font-weight:550}
.desc{margin:9px 0 0;color:var(--ink-2);font-size:14px;max-width:62ch}
.desc[hidden]{display:none}

.meta{
  font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:11px;
  display:flex;gap:16px;flex-wrap:wrap
}
.meta b{color:var(--ink-2);font-weight:600}

/* --------------------------------------------------------------- controls */
.actions{display:flex;flex-direction:column;gap:10px;align-items:stretch;min-width:186px}
.btn-dl{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--ink);color:#fff;border:0;border-radius:3px;
  padding:13px 15px;font-size:14px;font-weight:650;cursor:pointer;
  font-family:var(--sans);text-decoration:none;letter-spacing:-.01em;
  transition:transform .12s ease,background .15s ease
}
.btn-dl:hover{background:#000;transform:translateY(-1px)}
.btn-dl:active{transform:translateY(0)}
.btn-dl .n{font-family:var(--mono);font-size:11px;opacity:.62;font-weight:400}

.vote-row{display:flex;gap:8px}
.vote{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  background:var(--card);border:1px solid var(--line-strong);border-radius:3px;
  padding:9px 8px;font-family:var(--mono);font-size:12px;color:var(--ink-2);cursor:pointer;
  transition:border-color .15s ease,background .15s ease,color .15s ease
}
.vote:hover{border-color:var(--ink);color:var(--ink)}
.vote.up.on{border-color:var(--good);color:var(--good);background:rgba(26,127,75,.07)}
.vote.down.on{border-color:var(--bad);color:var(--bad);background:rgba(180,53,31,.07)}
.vote[disabled]{opacity:.5;cursor:not-allowed}
.emoji{font-size:14px;line-height:1}

.toggle{
  background:none;border:0;padding:0;font-family:var(--mono);font-size:11.5px;color:var(--muted);
  cursor:pointer;text-align:left;letter-spacing:.02em
}
.toggle:hover{color:var(--accent-ink)}

/* -------------------------------------------------------------- comments */
.panel{grid-column:1/-1;margin-top:18px;border-top:1px dashed var(--line-strong);padding-top:18px}
.panel[hidden]{display:none}
.cmt-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:14px}
.cmt{border-left:2px solid var(--line-strong);padding-left:13px}
.cmt-head{font-family:var(--mono);font-size:11px;color:var(--muted);display:flex;gap:9px;align-items:center;margin-bottom:3px}
.cmt-vote{font-size:12px}
.cmt-body{margin:0;font-size:14px;color:var(--ink-2);white-space:pre-wrap;word-break:break-word}
.cmt-none{font-family:var(--mono);font-size:12px;color:var(--muted);margin:0 0 18px}

.form{display:flex;flex-direction:column;gap:10px;max-width:560px}
.form label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
input[type=text],textarea{
  width:100%;background:var(--card);border:1px solid var(--line-strong);border-radius:3px;
  padding:11px 12px;font-family:var(--sans);font-size:14px;color:var(--ink);resize:vertical
}
input[type=text]:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.form-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.btn-send{
  background:var(--accent);color:#fff;border:0;border-radius:3px;padding:11px 20px;
  font-family:var(--sans);font-size:13.5px;font-weight:650;cursor:pointer
}
.btn-send:hover{background:var(--accent-ink)}
.btn-send[disabled]{opacity:.55;cursor:wait}
.hint{font-family:var(--mono);font-size:11px;color:var(--muted)}
.trap{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}

/* ----------------------------------------------------------------- footer */
.foot{border-top:1px solid var(--line);padding-top:22px;padding-bottom:56px}
.foot p{font-size:13px;color:var(--ink-2);margin:0 0 8px;max-width:70ch}
.foot-fine{font-family:var(--mono);font-size:11px;color:var(--muted)}

/* ------------------------------------------------------------------ toast */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);
  background:var(--ink);color:#fff;border-radius:3px;padding:12px 18px;
  font-size:13.5px;max-width:90vw;transition:transform .28s cubic-bezier(.2,.9,.3,1.2);z-index:50
}
.toast.show{transform:translate(-50%,0)}

@media (max-width:720px){
  .item{grid-template-columns:1fr;gap:14px;padding:22px 0}
  .idx{padding-top:0}
  .actions{min-width:0;flex-direction:column}
  .vote-row{max-width:none}
  .masthead{padding-top:32px}
}