:root{
  --stone:#EDEEF0; --ink:#141C26; --meridian:#1F4FD8; --brass:#A87D2C;
  --panel:#F6F7F8; --line:#C9CDD4; --dim:#5A6472; --err:#B23A2E; --ok:#1E6B41;
  --display:"Fraunces", Georgia, serif;
  --body:"Public Sans", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
}
*{box-sizing:border-box; margin:0}
body{background:var(--stone); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6}
.wrap{max-width:820px; margin:0 auto; padding:0 20px}
code{font-family:var(--mono); font-size:.86em; background:var(--panel); padding:1px 5px; border-radius:2px}
.dim{color:var(--dim)}

header{padding:56px 0 8px}
.title{font-family:var(--display); font-weight:700; font-size:clamp(40px,7vw,60px); letter-spacing:-.02em; line-height:.95}
.title .gk{color:var(--brass); font-weight:400; font-size:.4em; vertical-align:.9em}
.tagline{font-family:var(--display); font-style:italic; font-size:20px; color:var(--dim); margin-top:8px}
.lede{max-width:60ch; margin-top:16px; font-size:16px}

.steps{list-style:none; margin:26px 0 8px; padding:0; display:grid; gap:6px}
.steps li{font-size:14.5px; color:var(--dim)}
.steps b{color:var(--ink); font-family:var(--display); font-weight:600}

.card{background:var(--panel); border:1px solid var(--line); border-top:3px solid var(--meridian);
  border-radius:3px; padding:22px; margin:28px 0}
.fieldlabel{display:block; font-family:var(--display); font-weight:600; font-size:15px; margin:14px 0 6px}
.fieldlabel:first-child{margin-top:0}
.fieldlabel.small{font-size:13px; font-weight:600; color:var(--dim)}
input[type=text], textarea{width:100%; font-family:var(--body); font-size:15px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:2px; padding:11px 13px}
input[type=text]{font-family:var(--mono); font-size:14px}
textarea{resize:vertical; min-height:80px; line-height:1.5}
#graph-input{font-family:var(--mono); font-size:13px; min-height:120px}
.ref-row{margin-top:4px}
.hint{font-size:12.5px; color:var(--dim); margin-top:6px}

.disclosure{display:block; width:100%; text-align:left; background:none; border:none;
  font-family:var(--mono); font-size:12.5px; color:var(--meridian); cursor:pointer; padding:14px 0 4px}
.disclosure:hover{text-decoration:underline}
.graph-wrap{border-left:2px solid var(--line); padding-left:14px; margin:8px 0}

.run-row{display:flex; align-items:center; gap:14px; margin-top:18px; flex-wrap:wrap}
.run{font-family:var(--display); font-weight:600; font-size:16px; background:var(--ink); color:var(--stone);
  border:none; border-radius:2px; padding:12px 26px; cursor:pointer; transition:background .15s}
.run:hover{background:var(--meridian)}
.run:disabled{opacity:.5; cursor:not-allowed}
.status{font-family:var(--mono); font-size:12.5px}
.status.err{color:var(--err)} .status.ok{color:var(--ok)} .status.busy{color:var(--brass)}

.results{margin:24px 0}
.rule{display:flex; align-items:center; gap:12px; margin:22px 0 10px}
.rule::before{content:""; width:12px; height:12px; border:2px solid var(--meridian); transform:rotate(45deg); flex-shrink:0}
.rule span{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--meridian)}
.rule::after{content:""; flex:1; height:2px; background:linear-gradient(90deg,var(--meridian),transparent)}
.download{margin-left:auto; font-family:var(--body); font-weight:600; font-size:12.5px; background:none;
  border:1px solid var(--line); color:var(--ink); border-radius:2px; padding:5px 12px; cursor:pointer}
.download:hover{border-color:var(--ink)} .download:disabled{opacity:.4; cursor:not-allowed}
pre{background:var(--ink); color:#D8DEE6; border-radius:3px; padding:16px; overflow-x:auto;
  font-family:var(--mono); font-size:12.5px; line-height:1.7; white-space:pre-wrap; word-break:break-word}
#receipt-output{max-height:420px; overflow-y:auto}
.verify-note{font-size:13px; color:var(--dim); margin-top:10px; border-left:3px solid var(--brass); padding-left:12px}

/* Error / info panel — prominent, styled, never a thin status string.
   Red left-border for failures; brass for the benign empty-selection note. */
.error-panel{margin:22px 0}
.error-panel .rule::before{border-color:var(--err)}
.error-panel .rule span{color:var(--err)}
.error-panel .rule::after{background:linear-gradient(90deg,var(--err),transparent)}
#error-output{background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--err);
  border-radius:3px; padding:16px 18px; color:var(--ink); font-size:15px; line-height:1.55}
#error-output .ecode{display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--err); margin-bottom:7px}
/* Benign empty-selection note — same panel, brass instead of red. */
.error-panel.info .rule::before{border-color:var(--brass)}
.error-panel.info .rule span{color:var(--brass)}
.error-panel.info .rule::after{background:linear-gradient(90deg,var(--brass),transparent)}
.error-panel.info #error-output{border-left-color:var(--brass)}
.error-panel.info #error-output .ecode{color:var(--brass)}

footer{margin:48px 0 40px; font-size:13px; color:var(--dim); display:flex; gap:16px; flex-wrap:wrap; align-items:center}
footer a{color:var(--meridian)}
@media (max-width:560px){ header{padding:36px 0 4px} .run{width:100%} }