:root{
  --bg:#f5f0e8;
  --fg:#111;
  --muted:#555;
  --panel:#fffdf8;
  --border:#111;
  --good:#0b7a3b;
  --bad:#b00020;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background:var(--bg);
  color:var(--fg);
}

.skip{
  position:absolute;
  left:12px;
  top:12px;
  padding:10px 12px;
  border:3px solid var(--border);
  background:var(--panel);
  color:var(--fg);
  transform:translateY(-140%);
}
.skip:focus-visible{transform:translateY(0)}

.btn:focus-visible,
.link:focus-visible,
.input:focus-visible,
summary:focus-visible{
  outline:3px solid var(--border);
  outline-offset:2px;
}

.site{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:16px;
  padding:16px 20px;
  border-bottom:4px solid var(--border);
  background:var(--panel);
}
.brand{
  color:var(--fg);
  text-decoration:none;
  font-weight:800;
  font-size:20px;
  letter-spacing:1px;
}
.tag{color:var(--muted); font-size:12px}
.app{max-width:980px; margin:0 auto; padding:20px}
.foot{
  max-width:980px;
  margin:0 auto;
  padding:0 20px 24px 20px;
  color:var(--muted);
  font-size:12px;
}
.foot-links{margin-top:0}

.grid{display:grid; grid-template-columns:1fr; gap:16px}
.grid-2{grid-template-columns:1fr}
@media (min-width: 900px){
  .grid-2{grid-template-columns:1fr 1.4fr}
}

.panel{
  padding:16px;
  border:4px solid var(--border);
  background:var(--panel);
}
.card{
  margin-top:12px;
  padding:12px;
  border:2px dashed var(--border);
}

.h1{margin:0 0 8px 0; font-size:34px}
.h2{margin:0 0 10px 0; font-size:18px}
.lead{margin:0; color:var(--muted); line-height:1.4}

.bar{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin-bottom:16px;
}
.bar-right{display:flex; gap:12px}
.code-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.code{font-size:28px; font-weight:800; letter-spacing:2px}
.kicker{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px}

.label{display:block; margin:10px 0}
.input{
  display:block;
  width:100%;
  margin-top:6px;
  padding:10px 12px;
  border:2px solid var(--border);
  background:#fff;
  color:var(--fg);
  font:inherit;
}
.btn{
  width:100%;
  padding:10px 12px;
  border:3px solid var(--border);
  background:var(--fg);
  color:var(--bg);
  font-weight:800;
  cursor:pointer;
}
.btn.small{
  width:auto;
  padding:6px 10px;
  border-width:2px;
  font-size:12px;
}
.btn.small{min-height:44px}
@media (pointer: fine){
  .btn.small{min-height:auto}
}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.ghost{
  margin-top:10px;
  background:transparent;
  color:var(--fg);
}
.btn.ghost.small{margin-top:0}

.alert{
  margin-top:12px;
  padding:10px 12px;
  border:3px solid var(--bad);
  background:#fff;
  color:var(--bad);
  font-weight:700;
}
.muted{color:var(--muted)}
.mono{font-family:inherit}
.word{letter-spacing:1px; font-weight:800}
.good{color:var(--good); font-weight:800}
.bad{color:var(--bad); font-weight:800}

.list{list-style:none; padding:0; margin:8px 0; display:flex; flex-direction:column; gap:8px}
.li{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.pill{
  display:inline-block;
  padding:2px 6px;
  border:2px solid var(--border);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}
.pill.bad{border-color:var(--bad)}

.dot{
  width:10px; height:10px; border:2px solid var(--border); display:inline-block;
}
.dot.on{background:var(--good)}
.dot.off{background:var(--bad); border-color:var(--bad)}

.status{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
}
.status.on{color:var(--good)}
.status.off{color:var(--bad)}

.radios{display:flex; flex-direction:column; gap:8px; margin:10px 0}
.radio{display:flex; align-items:center; gap:10px; cursor:pointer}
.radio input{accent-color:var(--fg)}
.link{color:var(--fg); text-decoration:underline}

.row{display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-bottom:10px}

.secret-card{margin-top:0}
.secret-placeholder{display:none; margin-top:0}
html.secret-hidden .secret-card{display:none}
html.secret-hidden .secret-placeholder{display:block}
.when-secret-hidden{display:none}
html.secret-hidden .when-secret-hidden{display:inline}
html.secret-hidden .when-secret-shown{display:none}

.rules{margin:12px 0 0 0; padding:0 0 0 22px; line-height:1.4}
.rules li{margin:8px 0}

.settings{margin:10px 0}
.settings summary{cursor:pointer; font-weight:800}
.settings[open] summary{margin-bottom:10px}
.settings .label{margin:0}
.settings .label + .label{margin-top:10px}

.label .row{margin-bottom:6px}
.input.range{padding:0; height:38px; accent-color:var(--fg)}

.card .row + form{margin-top:12px}
.card p + form{margin-top:12px}
.card .list + form{margin-top:12px}