:root{
  --bg:#17140f;
  --bg-2:#1e1a15;
  --panel:#221d17;
  --line:#332c22;
  --line-soft:#241f19;
  --fg:#e8dfd1;
  --fg-title:#d6ccbb;
  --fg-dim:#9c9384;
  --fg-faint:#6c6559;
  --accent:#c9ad86;
  --good:#7bb98a;
  --bad:#c98a8a;
  --sans:"Inter","SF Pro Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0;border-radius:0}

html{
  font-size:clamp(15px, 13.7px + 0.4vw, 19px);
  -webkit-text-size-adjust:100%;
}
::selection{background:rgba(201,173,134,.25);color:#fff}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.65;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:clamp(3rem, 3rem + 5vh, 6.5rem) clamp(1.25rem, 5vw, 2.25rem);
  -webkit-font-smoothing:antialiased;
}

.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:.4;
  background:
    radial-gradient(circle at 50% -10%, rgba(201,173,134,.05), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
}

.wrap{
  width:100%;
  max-width:min(46rem, 94vw);
  position:relative;
  z-index:1;
}

/* ---------- header ---------- */
.head{text-align:center;display:flex;flex-direction:column;align-items:center}

h1{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:clamp(2.4rem, 1.7rem + 3.4vw, 3.3rem);
  line-height:1;
  letter-spacing:.015em;
  color:var(--fg-title);
}

.sub{
  margin-top:.9rem;
  display:flex;align-items:center;gap:.55rem;
  font-size:.85rem;color:var(--fg-dim);
}
.sub .status{display:inline-flex;align-items:center;gap:.4rem}
.sep{color:var(--fg-faint)}
.dot{
  width:.4rem;height:.4rem;
  background:var(--good);
  box-shadow:0 0 0 0 rgba(123,185,138,.5);
  animation:pulse 2.6s ease-out infinite;
}

.tagline{
  margin-top:1.1rem;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.05rem, .9rem + .7vw, 1.35rem);
  color:var(--fg-dim);
}
.tagline .q{color:var(--fg-faint)}

.meta{
  margin-top:.9rem;
  display:flex;align-items:center;gap:.6rem;
  font-size:.8rem;color:var(--fg-faint);
}
.meta a{color:var(--fg-dim);text-decoration:none}
.meta a:hover{color:var(--accent)}

/* ---------- rules ---------- */
.rule{border:0;height:1px;background:var(--line-soft);margin:1.9rem 0}

/* ---------- dropzone ---------- */
.drop{
  border:1px dashed var(--line);
  background:var(--bg-2);
  padding:clamp(2rem,4vw,3.25rem) 1.5rem;
  text-align:center;
  cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  transition:border-color .2s ease,background .2s ease;
}
.drop:hover,.drop:focus-visible{border-color:var(--accent);background:var(--panel);outline:none}
.drop.drag{border-color:var(--accent);background:var(--panel)}
.drop-ic{width:2rem;height:2rem;color:var(--fg-dim);margin-bottom:.25rem}
.drop-main{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--fg-title)}
.drop-main .link{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.drop-sub{font-size:.72rem;color:var(--fg-faint);letter-spacing:.02em}

/* ---------- results ---------- */
.file-card{margin-top:1.9rem;border-top:1px solid var(--line-soft);padding-top:1.6rem}
.file-card:first-child{border-top:0;padding-top:0;margin-top:1.6rem}

.fc-top{display:flex;gap:1.25rem;align-items:flex-start;flex-wrap:wrap}
.fc-preview{
  width:9rem;height:9rem;flex:none;
  border:1px solid var(--line);background:var(--bg-2);
  object-fit:contain;background-size:contain;background-repeat:no-repeat;background-position:center;
}
.fc-head{min-width:12rem;flex:1}
.fc-name{
  font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--fg-title);
  line-height:1.2;word-break:break-all;
}
.fc-facts{margin-top:.5rem;display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.78rem;color:var(--fg-dim)}
.fc-facts b{color:var(--fg-title);font-weight:500}
.fc-err{color:var(--bad);font-size:.85rem;margin-top:.4rem}

.actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.btn{
  background:none;border:1px solid var(--line);color:var(--fg);
  font:inherit;font-size:.8rem;padding:.42rem .8rem;cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.done{border-color:var(--good);color:var(--good)}

.map-link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.8rem;color:var(--accent);text-decoration:none;
  border:1px solid var(--line);padding:.42rem .8rem;
}
.map-link:hover{border-color:var(--accent)}

/* ---------- metadata groups ---------- */
.group{margin-top:1.4rem}
.group-head{
  display:flex;align-items:baseline;gap:.7rem;
  font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--fg-dim);
  padding-bottom:.5rem;border-bottom:1px solid var(--line);
}
.group-head .count{font-family:var(--sans);font-style:normal;font-size:.68rem;color:var(--fg-faint);letter-spacing:.08em}

table.tags{width:100%;border-collapse:collapse;font-size:.82rem;table-layout:fixed}
table.tags td{
  padding:.4rem .6rem .4rem 0;
  border-bottom:1px solid var(--line-soft);
  vertical-align:top;
}
table.tags tr:last-child td{border-bottom:0}
table.tags td.k{
  width:38%;color:var(--fg-dim);font-family:var(--mono);font-size:.76rem;
  word-break:break-word;
}
table.tags td.v{
  color:var(--fg);font-family:var(--mono);font-size:.76rem;
  word-break:break-word;white-space:pre-wrap;
}
table.tags tr:hover td{background:rgba(201,173,134,.04)}

.empty-note{font-size:.85rem;color:var(--fg-faint);font-style:italic;font-family:var(--serif);padding:.8rem 0}

/* ---------- collapsible about block ---------- */
.block{overflow:hidden}
.block-head{
  width:100%;-webkit-appearance:none;appearance:none;
  background:transparent;border:0;margin:0;
  display:flex;align-items:center;gap:1rem;
  padding:.95rem .25rem .8rem;cursor:pointer;color:inherit;font:inherit;text-align:left;
}
.block-head:focus-visible{outline:1px solid var(--line);outline-offset:2px}
.label{
  font-family:var(--serif);font-style:italic;font-size:1.06rem;color:var(--fg-dim);
  letter-spacing:.01em;flex:none;transition:color .2s ease;
}
.block-head:hover .label{color:var(--fg-title)}
.hair{flex:1 1 auto;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.chev{
  flex:none;width:.45rem;height:.45rem;
  border-right:1px solid var(--fg-faint);border-bottom:1px solid var(--fg-faint);
  transform:translateY(-.12rem) rotate(45deg);
  transition:transform .3s ease,border-color .2s ease;
}
.block-head:hover .chev{border-color:var(--fg-dim)}
.block[data-open="false"] .chev{transform:translateY(0) rotate(-45deg)}
.block-body{overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s ease}
.block[data-open="false"] .block-body{max-height:0 !important;opacity:0}
.prose{padding:.5rem .25rem 1rem;font-size:.88rem;color:var(--fg-dim);line-height:1.7}
.prose p{margin-bottom:.7rem}
.prose p:last-child{margin-bottom:0}
.prose b{color:var(--fg-title);font-weight:500}
.prose a{color:var(--accent);text-decoration:none}
.prose a:hover{text-decoration:underline}
.prose .faint{font-size:.8rem;color:var(--fg-faint)}

/* ---------- footer ---------- */
footer{
  display:flex;justify-content:space-between;
  margin-top:1.9rem;padding-top:1.25rem;
  border-top:1px solid var(--line-soft);
  font-size:.75rem;color:var(--fg-faint);
}
footer a{color:var(--fg-faint);text-decoration:none}
footer a:hover{color:var(--fg-dim)}

/* ---------- 404 ---------- */
.nf{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.1rem;margin-top:4rem}
.nf .code{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(3.5rem,2rem + 9vw,7rem);line-height:1;color:var(--fg-title)}
.nf p{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,.9rem + .7vw,1.35rem);color:var(--fg-dim)}
.nf a{margin-top:.4rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);text-decoration:none;border:1px solid var(--line);padding:.6rem 1.1rem;transition:border-color .2s ease,color .2s ease}
.nf a:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:2rem;transform:translateX(-50%) translateY(1rem);
  background:var(--panel);border:1px solid var(--line);color:var(--fg);
  font-size:.82rem;padding:.6rem 1rem;z-index:5;
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;
}
.toast.show{opacity:1;transform:translateX(-50%)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(1rem);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(123,185,138,.4)}
  70%{box-shadow:0 0 0 .5rem rgba(123,185,138,0)}
  100%{box-shadow:0 0 0 0 rgba(123,185,138,0)}
}

/* ---------- breadcrumb ---------- */
.crumbs{
  display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
  font-size:.74rem;color:var(--fg-faint);margin-bottom:1.4rem;
}
.crumbs a{color:var(--fg-dim);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{color:var(--line)}

/* ---------- long-form content ---------- */
.article{margin-top:2.2rem;font-size:.92rem;line-height:1.75;color:var(--fg-dim)}
.article h2{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:1.4rem;color:var(--fg-title);margin:2rem 0 .7rem;letter-spacing:.01em;
}
.article h2:first-child{margin-top:0}
.article h3{font-size:1rem;color:var(--fg-title);margin:1.3rem 0 .4rem;font-weight:500}
.article p{margin-bottom:.9rem}
.article ul,.article ol{margin:0 0 .9rem 1.1rem}
.article li{margin-bottom:.35rem}
.article b,.article strong{color:var(--fg-title);font-weight:500}
.article a{color:var(--accent);text-decoration:none}
.article a:hover{text-decoration:underline}
.article code{
  font-family:var(--mono);font-size:.82em;background:var(--bg-2);
  border:1px solid var(--line-soft);padding:.05rem .35rem;color:var(--fg);
}
.article .lead{font-family:var(--serif);font-style:italic;font-size:1.12rem;color:var(--fg);line-height:1.6}

/* ---------- related tools ---------- */
.related{margin-top:2.4rem}
.related h2{
  font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--fg-dim);
  padding-bottom:.5rem;border-bottom:1px solid var(--line);margin-bottom:.4rem;
}
.related ul{list-style:none}
.related li{border-bottom:1px solid var(--line-soft)}
.related li:last-child{border-bottom:0}
.related a{
  display:flex;align-items:baseline;gap:.7rem;padding:.85rem .25rem;
  text-decoration:none;color:var(--fg);transition:padding .25s ease,color .2s ease;
}
.related a:hover{padding-left:.6rem;color:var(--fg-title)}
.related .r-name{font-size:.9rem}
.related .r-desc{font-size:.78rem;color:var(--fg-faint);margin-left:auto;text-align:right;max-width:60%}

@media (max-width:480px){
  table.tags td.k{width:44%}
  .fc-preview{width:100%;height:12rem}
  .related .r-desc{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
}