:root{
  --paper:#f6f7f8;
  --panel:#ffffff;
  --ink:#11161b;
  --muted:#59646e;
  --rule:#dde1e5;
  --accent:#0d6b6b;
  --danger:#9b1c1c;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0d1115;
    --panel:#141a20;
    --ink:#e8edf1;
    --muted:#8a95a0;
    --rule:#222a31;
    --accent:#4fd1c5;
    --danger:#f0a0a0;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent)}
button,input,textarea{font:inherit}
button{
  background:var(--panel);
  color:var(--ink);
  border:1px solid var(--rule);
  border-radius:6px;
  padding:.35rem .7rem;
  cursor:pointer;
}
button:hover{border-color:var(--accent);color:var(--accent)}
button:focus-visible,a:focus-visible,.drop:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
}
.page{max-width:40rem;margin:0 auto;padding:clamp(2.4rem,8vw,4.5rem) 1.25rem 3.5rem}
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0;
}
h1{
  font-family:var(--mono);
  font-size:clamp(1.5rem,5vw,2rem);
  font-weight:600;letter-spacing:-.02em;line-height:1.15;
  margin:.7rem 0 0;
}
.lede{margin:.8rem 0 0;color:var(--muted)}
.drop{
  display:block;margin:1.6rem 0 0;padding:1.6rem 1.1rem;
  border:1px dashed var(--rule);border-radius:8px;
  background:var(--panel);text-align:center;cursor:pointer;
  color:var(--muted);
}
.drop.over{border-color:var(--accent);color:var(--accent)}
.drop strong{display:block;color:var(--ink);font-weight:600;margin-bottom:.25rem}
.privacy{margin:.85rem 0 0;color:var(--muted);font-size:.9rem}
.err{
  margin:1rem 0 0;padding:.75rem .9rem;border-left:3px solid var(--danger);
  color:var(--danger);background:var(--panel);
}
.toolbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1.3rem 0 .4rem}
.count{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.item{border-bottom:1px solid var(--rule)}
.row{
  display:grid;grid-template-columns:1fr auto;gap:.35rem .7rem;
  padding:.85rem 0;align-items:baseline;
}
.name{font-family:var(--mono);font-size:.95rem;font-weight:600}
.meta{grid-column:1/-1;margin:0;color:var(--muted);font-size:.82rem;font-family:var(--mono)}
.actions{display:flex;gap:.4rem}
.preview{
  display:block;margin:0 0 .85rem;width:100%;min-height:12rem;max-height:24rem;
  padding:.8rem .9rem;border:1px solid var(--rule);border-radius:8px;
  background:var(--panel);color:var(--ink);
  font-family:var(--mono);font-size:.8rem;line-height:1.45;resize:vertical;
}
.preview.hidden{display:none}
footer{margin-top:2.4rem;font-size:.87rem;color:var(--muted)}
footer p{margin:.4rem 0 0}
.hidden{display:none}