:root{
  --ink:      #0d0b08;
  --umber:    #1a1510;
  --umber-2:  #221b13;
  --rule:     rgba(237,230,214,0.14);
  --paper:    #ede6d6;
  --muted:    #a99f8d;
  --amber:    #d9a24b;
  --amber-dim:#8a6b34;
  --green:    #6bbf7b;
  --red:      #c25b4f;

  --font-display: 'Anton', sans-serif;
  --font-mono: 'Courier Prime', monospace;
  --font-body: 'Inter', sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
body{
  background:
    radial-gradient(ellipse at top left, rgba(217,162,75,0.06), transparent 45%),
    var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  line-height:1.6;
  min-height:100vh;
}
a{ color:var(--amber); text-decoration:none; }
a:hover{ text-decoration:underline; }

.scanlines{
  position:fixed; inset:0; pointer-events:none; z-index:100;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,0.015) 0px, transparent 1px, transparent 3px);
  opacity:0.5;
}

header{
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 6%;
  border-bottom:1px solid var(--rule);
}
.logo{ font-family:var(--font-mono); font-weight:700; }
.logo span{ color:var(--amber); }
.repo-link{ font-family:var(--font-mono); font-size:13px; color:var(--muted); }
.repo-link:hover{ color:var(--amber); }

main{ max-width:880px; margin:0 auto; padding:0 6%; }

.hero{ padding:70px 0 40px; }
.case-tag{
  display:inline-block;
  font-family:var(--font-mono); font-size:11px; letter-spacing:2px;
  color:var(--amber); border:1px dashed var(--amber-dim);
  padding:5px 12px; margin-bottom:22px; transform:rotate(-1deg);
}
h1{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(40px, 7vw, 64px); letter-spacing:1px;
}
h1 span{ color:var(--amber); }
.dek{ color:var(--muted); max-width:560px; margin-top:16px; font-size:15px; }
.dek em{ color:var(--paper); font-style:normal; }

.terminal-card{
  background:var(--umber);
  border:1px solid var(--rule);
  border-radius:10px;
  overflow:hidden;
  margin-bottom:50px;
  box-shadow:0 30px 60px rgba(0,0,0,0.4);
}
.terminal-bar{
  display:flex; align-items:center; gap:8px;
  padding:12px 16px; background:var(--umber-2); border-bottom:1px solid var(--rule);
}
.dot{ width:10px; height:10px; border-radius:50%; }
.dot.red{ background:#c25b4f; } .dot.yellow{ background:#d9a24b; } .dot.green{ background:#6bbf7b; }
.terminal-title{ font-family:var(--font-mono); font-size:12px; color:var(--muted); margin-left:8px; }

.terminal-body{ padding:30px; }
.field-label{ display:block; font-family:var(--font-mono); font-size:13px; color:var(--muted); margin-bottom:10px; }

.input-row{ display:flex; gap:8px; margin-bottom:20px; }
#pw-input{
  flex:1; background:var(--ink); border:1px solid var(--rule); color:var(--paper);
  font-family:var(--font-mono); font-size:16px; padding:14px 16px; border-radius:6px;
  outline:none; transition:border-color 0.2s;
}
#pw-input:focus{ border-color:var(--amber-dim); }
#toggle-visibility{
  background:var(--ink); border:1px solid var(--rule); border-radius:6px; color:var(--muted);
  width:48px; cursor:pointer; font-size:16px;
}
#toggle-visibility:hover{ color:var(--amber); border-color:var(--amber-dim); }

.meter-row{ display:flex; align-items:center; gap:14px; margin-bottom:30px; }
.meter-track{ flex:1; height:8px; background:var(--ink); border-radius:99px; overflow:hidden; border:1px solid var(--rule); }
.meter-fill{ height:100%; width:0%; background:var(--red); transition:width 0.35s ease, background 0.35s ease; }
.meter-label{ font-family:var(--font-mono); font-size:13px; color:var(--muted); min-width:90px; text-align:right; }

.grid-two{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:26px; }
.readout-block{ background:var(--ink); border:1px solid var(--rule); border-radius:8px; padding:18px; }
.readout-title{ font-family:var(--font-mono); font-size:11px; color:var(--amber); letter-spacing:1px; margin-bottom:12px; text-transform:uppercase; }
.readout-line{ display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px dashed var(--rule); }
.readout-line:last-child{ border-bottom:none; }
.readout-line span{ color:var(--muted); }
.readout-line b{ font-family:var(--font-mono); font-weight:700; }

.breach-block{ background:var(--ink); border:1px solid var(--rule); border-radius:8px; padding:18px; margin-bottom:22px; }
#breach-result{ font-family:var(--font-mono); font-size:14px; }
.breach-idle{ color:var(--muted); }
.breach-safe{ color:var(--green); }
.breach-hit{ color:var(--red); }
.breach-checking{ color:var(--amber); }

.privacy-note{ font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.privacy-note summary{ cursor:pointer; color:var(--amber); margin-bottom:8px; }
.privacy-note p{ line-height:1.7; font-family:var(--font-body); font-size:13px; }

.notes{ padding-bottom:70px; }
.notes p{ color:var(--muted); max-width:600px; margin-top:14px; font-size:14px; }

footer{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding:26px 6%; font-family:var(--font-mono); font-size:12px; color:var(--muted);
  border-top:1px solid var(--rule);
}

@media(max-width:640px){
  .grid-two{ grid-template-columns:1fr; }
  header{ flex-direction:column; gap:10px; text-align:center; }
}