/* Minimal monospace theme */
:root{
  --bg:#000;
  --fg:#fff;
  --muted:#bbb;
  --border:#fff;
  --gap: clamp(12px, 2.5vw, 24px);
  --radius: 0;
  --max: 1100px;
  --line: 1.6;
  --bw: 3px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font: 16px/var(--line) ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  text-rendering: optimizeLegibility;
}

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(var(--gap) * 1.5) var(--gap);
}

a{color:var(--fg); text-decoration: underline; text-underline-offset: 2px}
a:hover{opacity:.85}

h1,h2,h3{margin:0 0 var(--gap) 0; line-height:1.15; letter-spacing:.02em}
h1{font-size: clamp(28px, 5.5vw, 64px); font-weight: 800}
h2{font-size: clamp(18px, 3vw, 24px)}
h3{font-size: clamp(16px, 2.5vw, 20px)}

.subtitle{color:var(--muted); margin-top:.5rem}

.card{
  border: var(--bw) solid var(--border);
  padding: var(--gap);
  background: transparent;
}

.grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--gap);
  align-items: stretch;
}

.box{display:flex; flex-direction:column; justify-content:space-between}
.title h1{letter-spacing:.06em}
.meta-table{width:100%; border-collapse: collapse}
.meta-table th,
.meta-table td{border: var(--bw) solid var(--border); padding:.6rem .8rem; text-align:left}
.meta-table th{width:40%}

.debug-toggle{display:inline-flex; align-items:center; gap:.5rem; margin-top:.8rem; user-select:none}
.debug-toggle input{width:1.1rem; height:1.1rem}

.content{display:grid; gap: var(--gap)}
.contents{display:grid; gap:.4rem; list-style: square; padding-left:1.2rem}

.section table{width:100%; border-collapse:collapse}
.section table th,
.section table td{border: var(--bw) solid var(--border); padding:.5rem}

.section form{display:grid; gap:.6rem; max-width:420px}
.section input, .section button{
  background:#111; color:var(--fg); border:var(--bw) solid var(--border);
  padding:.5rem .6rem; font: inherit
}
.section button{cursor:pointer}

.demo-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap);
}
.demo-grid .cell{
  border: var(--bw) dashed var(--border);
  padding: 1.2rem; text-align:center
}

.media{display:grid; gap:.5rem}
.media img{width:100%; display:block; border:var(--bw) solid var(--border)}

.footer{color:var(--muted); text-align:center; padding-bottom: calc(var(--gap) * 2)}

body.debug *{outline:1px dashed #0ff44a44; outline-offset:-1px}

@media (max-width: 820px){
  .grid{grid-template-columns: 1fr}
}