:root { --bg:#060a07; --field:#0a100c; --line:#294032; --muted:#a7b5aa; --text:#ecf3eb; --acid:#a6ff1a; --amber:#f4b758; --error:#f08e72; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; background:var(--bg); color:var(--text); font-family:"Instrument Sans",ui-sans-serif,system-ui,sans-serif; }
button,input { font:inherit; }
.instrument { max-width:920px; margin:0 auto; padding:clamp(18px,4vw,38px); }
.instrument-header { display:flex; justify-content:space-between; align-items:end; gap:20px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.eyebrow,.status,.section-heading p,.length-control,.hint,.group-set legend,.exclusion-set legend,.group-set span,.method-note,.message,.strength { font-family:"IBM Plex Mono",ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.eyebrow { margin:0 0 8px; color:var(--acid); font-size:10px; } h1 { margin:0; font-size:clamp(31px,5vw,52px); line-height:.92; letter-spacing:-.06em; }
.status { display:flex; align-items:center; gap:8px; margin:0; color:var(--muted); font-size:10px; white-space:nowrap; }.status span { width:7px; height:7px; background:var(--acid); }
.controls,.result { margin-top:22px; padding:20px; border:1px solid var(--line); background:var(--field); }.result { margin-top:18px; }
.section-heading { display:flex; justify-content:space-between; gap:16px; align-items:baseline; padding-bottom:17px; border-bottom:1px solid var(--line); }h2 { margin:0; font-size:16px; font-weight:600; }.section-heading p { margin:0; color:var(--muted); font-size:9px; }
.length-control { display:grid; gap:12px; margin-top:21px; color:var(--muted); font-size:10px; }.length-control:first-letter { color:var(--text); }.length-control output { color:var(--acid); float:right; }input[type="range"] { width:100%; accent-color:var(--acid); cursor:pointer; }.hint { margin:7px 0 0; color:var(--muted); font-size:9px; }
fieldset { min-width:0; margin:20px 0 0; padding:0; border:0; }.group-set,.exclusion-set { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); }.group-set legend,.exclusion-set legend { grid-column:1 / -1; width:100%; margin:0; padding:0 0 10px; background:var(--field); color:var(--muted); font-size:9px; }.group-set label,.exclusion-set label { min-width:0; padding:12px; background:var(--field); color:var(--text); font-size:13px; cursor:pointer; }.group-set span { display:block; margin-top:5px; color:var(--muted); font-size:9px; }.exclusion-set { background:transparent; gap:10px; }.exclusion-set label { padding:0; color:var(--muted); font-size:11px; }.exclusion-set legend { margin-bottom:0; }.group-set input,.exclusion-set input { accent-color:var(--acid); }
button { min-height:39px; margin-top:21px; padding:10px 13px; border:1px solid var(--acid); border-radius:0; background:var(--acid); color:#0c1606; cursor:pointer; font:600 10px/1.2 "IBM Plex Mono",ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; }button:disabled { opacity:.55; cursor:not-allowed; }button.quiet { margin:0; border-color:var(--line); background:transparent; color:var(--text); }button:hover:not(:disabled) { border-color:var(--text); }button.quiet:hover { color:var(--acid); border-color:var(--acid); }button:focus-visible,input:focus-visible { outline:2px solid var(--text); outline-offset:3px; }
#password { width:100%; min-height:56px; margin-top:18px; padding:13px; border:1px solid var(--line); border-radius:0; background:#050806; color:var(--text); font:500 clamp(15px,2.3vw,23px)/1.2 "IBM Plex Mono",ui-monospace,monospace; letter-spacing:.025em; }.result-footer { display:flex; justify-content:space-between; align-items:end; gap:18px; margin-top:13px; }.strength { display:grid; grid-template-columns:auto auto; gap:5px 14px; color:var(--muted); font-size:9px; }.strength #strength-value { color:var(--text); }.strength i { grid-column:1 / -1; display:block; width:136px; height:4px; background:linear-gradient(90deg,var(--acid) var(--strength,0%),var(--line) var(--strength,0%)); }.method-note { max-width:680px; margin:18px 0 0; color:var(--muted); font-size:9px; line-height:1.65; }.message { min-height:1.5em; margin:13px 0 0; color:var(--acid); font-size:9px; line-height:1.5; }.message.error { color:var(--error); }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:620px) { .instrument { padding:18px; }.instrument-header,.section-heading { align-items:start; flex-direction:column; }.group-set { grid-template-columns:1fr; }.exclusion-set label { display:flex; align-items:center; min-height:44px; }.result-footer { align-items:start; flex-direction:column; }.result-footer button { width:100%; } input[type="range"] { min-height:44px; } button { min-height:44px; } }