:root {
  --bg: #090c0a;
  --panel: #151a17;
  --panel2: #1b221d;
  --line: #343b36;
  --text: #f2f3ef;
  --muted: #a7aea8;
  --cyan: #bdff35;
  --cyan-dim: #28371a;
  --mint: #bdff35;
  --orange: #eac57d;
  --red: #ff8e93;
  --max: 980px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 100% 0, #bdff3512, transparent 28rem),
    linear-gradient(180deg, #101510, var(--bg));
  color: var(--text);
  font: 15px/1.5 Arial, Helvetica, sans-serif;
}
button, input { font: inherit; }
button { cursor: pointer; }

.masthead, main, footer { width: min(calc(100% - 32px), var(--max)); margin-inline: auto; }
.masthead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 34px 0 22px;
  border-bottom: 6px solid var(--cyan);
}
.kicker, .instrument-label {
  color: var(--cyan);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
h1 { margin: 4px 0 0; font-size: clamp(1.9rem, 5vw, 3.3rem); line-height: 1; letter-spacing: -.035em; text-transform: uppercase; }
h2 { margin: 4px 0 0; font-size: 1.35rem; letter-spacing: -.02em; }
p { color: var(--muted); }
.model { padding: 10px 14px; background: var(--cyan); color: #11180c; font-size: 1.05rem; font-weight: 950; white-space: nowrap; }

main { padding-bottom: 48px; }
.notice {
  display: flex;
  gap: 10px;
  margin: 22px 0;
  padding: 13px 16px;
  border: 1px solid #bdff3555;
  background: #bdff350b;
  color: var(--muted);
}
.notice strong { color: var(--mint); white-space: nowrap; }
.control-deck, .score-panel, .section-block, .limits, .settings, .progress-panel {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #1b221d, #111612);
}
.control-deck { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px; }
.status-row { display: flex; align-items: center; gap: 9px; font-size: .8rem; font-weight: 900; letter-spacing: .1em; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px #bdff3588; }
.status-dot.running { background: var(--cyan); animation: pulse 1s infinite; }
.status-dot.error { background: var(--red); box-shadow: 0 0 12px #ff8e9388; }
.control-deck p { margin: 6px 0 0; }
.control-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); color: var(--text); background: transparent; font-size: .78rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.button:hover { border-color: var(--cyan); }
.button:disabled { opacity: .45; cursor: not-allowed; }
.button.primary { background: var(--cyan); border-color: var(--cyan); color: #11180c; }
.button.cancel { background: var(--red); border-color: var(--red); color: #19090b; }
.settings { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 18px 22px; border-top: 0; }
.switch-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.switch-row span, .switch-row small { display: block; }
.switch-row small, .settings-note { color: var(--muted); }
.switch-row input { width: 22px; height: 22px; accent-color: var(--cyan); }

.progress-panel { padding: 16px 20px; border-top: 0; }
.progress-track { height: 4px; background: #343b3688; overflow: hidden; }
.progress-bar { width: 0; height: 100%; background: var(--cyan); transition: width .25s ease; }
.stages { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 9px 0 0; padding: 0; color: #a7aea8; font-size: .66rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.stages li:nth-child(n+2) { text-align: center; }
.stages li:last-child { text-align: right; }
.stages li.active, .stages li.complete { color: var(--cyan); }

.score-panel { display: grid; grid-template-columns: 1fr auto; gap: 25px; margin-top: 18px; padding: 26px; border-left: 4px solid var(--cyan); }
.score-line, .reading { display: flex; align-items: baseline; gap: 7px; }
.score-line span { font-size: clamp(4rem, 11vw, 7.2rem); font-weight: 900; line-height: .95; letter-spacing: -.07em; }
.score-line small, .reading small { color: var(--muted); font-weight: 800; }
.score-panel p { margin: 8px 0 0; }
.grade-wrap { min-width: 190px; align-self: center; }
.grade { padding: 11px 14px; border: 1px solid var(--line); color: var(--muted); font-size: 1.4rem; font-weight: 950; text-align: center; }
.grade.good { color: var(--mint); border-color: #bdff3555; background: #bdff350c; }
.grade.usable { color: var(--orange); border-color: #eac57d55; background: #eac57d0c; }
.grade.poor { color: #ff8e93; border-color: #ff8e9355; background: #ff8e930c; }
.grade-wrap span { display: block; margin-top: 7px; color: var(--muted); font-size: .72rem; text-align: center; }

.meter { margin: 18px 0 28px; }
.meter-labels { display: flex; justify-content: space-between; color: var(--muted); font-size: .65rem; font-weight: 900; }
.meter-track { position: relative; display: grid; grid-template-columns: 40fr 30fr 30fr; height: 18px; margin-top: 5px; border: 2px solid #586158; background: #151a17; }
.zone.poor { background: linear-gradient(90deg, var(--red), var(--orange)); }
.zone.usable { background: linear-gradient(90deg, var(--orange), #dbd06c); }
.zone.strong { background: linear-gradient(90deg, #91d77d, var(--cyan)); }
.needle { position: absolute; top: -7px; width: 3px; height: 29px; background: white; box-shadow: 0 0 7px #fff; transform: translateX(-1px); transition: left .45s ease; }

.readout-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.readout { min-height: 160px; padding: 20px; border: 1px solid var(--line); background: #111612; }
.reading span { font-size: clamp(2.1rem, 5vw, 3.5rem); font-weight: 850; letter-spacing: -.05em; }
.readout p { margin: 7px 0 0; font-size: .76rem; }

.section-block, .limits { margin-top: 26px; padding: 24px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.bounded { color: var(--muted); font-size: .62rem; font-weight: 900; letter-spacing: .1em; }
.activity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }
.activity { display: grid; grid-template-columns: 1fr auto; gap: 7px; padding: 15px; border: 1px solid var(--line); background: #ffffff05; }
.activity strong { display: block; }
.activity small { display: block; color: var(--muted); margin-top: 3px; }
.verdict { align-self: center; padding: 4px 7px; border: 1px solid currentColor; font-size: .65rem; font-weight: 950; text-transform: uppercase; }
.verdict.good { color: var(--mint); }
.verdict.usable { color: var(--orange); }
.verdict.poor { color: #ff8e93; }
.empty-state { grid-column: 1 / -1; padding: 24px; border: 1px dashed var(--line); color: var(--muted); text-align: center; }

.context-block { display: grid; grid-template-columns: .8fr 1.2fr; gap: 30px; }
.context-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.context-grid div { padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.context-grid dt { color: var(--muted); font-size: .7rem; text-transform: uppercase; }
.context-grid dd { margin: 3px 0 0; font-weight: 800; }
.save-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 18px; }
.save-row input { min-width: 0; padding: 11px 13px; border: 1px solid var(--line); outline: none; background: #090c0a; color: var(--text); }
.save-row input:focus { border-color: var(--cyan); }
.text-button { border: 0; background: transparent; color: var(--muted); text-decoration: underline; }
.history-list { display: grid; gap: 8px; margin-top: 13px; }
.history-item { display: grid; grid-template-columns: 1fr auto; gap: 15px; padding: 13px 15px; border: 1px solid var(--line); background: #ffffff04; }
.history-item strong, .history-item small { display: block; }
.history-item small { color: var(--muted); margin-top: 2px; }
.history-score { color: var(--cyan); font-size: 1.35rem; font-weight: 950; }
.limits { border-left: 4px solid var(--orange); }
.limits ul { margin: 13px 0 0; padding-left: 20px; color: var(--muted); }
.limits li + li { margin-top: 7px; }
footer { display: flex; justify-content: space-between; gap: 15px; padding: 25px 0 36px; border-top: 1px solid var(--line); color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .07em; }
.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; }

@keyframes pulse { 50% { opacity: .35; } }
@media (max-width: 760px) {
  .readout-grid { grid-template-columns: 1fr 1fr; }
  .context-block { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .masthead, main, footer { width: min(calc(100% - 22px), var(--max)); }
  .masthead { align-items: start; padding-top: 22px; }
  .model { padding: 8px 10px; font-size: .85rem; }
  .notice, .control-deck { display: block; }
  .notice strong { display: block; margin-bottom: 3px; }
  .control-buttons { margin-top: 16px; }
  .control-buttons .button { flex: 1; }
  .settings { grid-template-columns: 1fr; }
  .score-panel { grid-template-columns: 1fr; }
  .grade-wrap { min-width: 0; }
  .readout { min-height: 145px; padding: 16px; }
  .activity-grid, .context-grid { grid-template-columns: 1fr; }
  .save-row { grid-template-columns: 1fr; }
  .section-head { align-items: start; }
  footer { display: block; }
  footer span { display: block; margin-top: 4px; }
}

/* PIRATE FREQUENCY / CFI — presentation layer only */
:root{color-scheme:dark;--pink:#ff52c8;--max:1080px}
body{background:radial-gradient(ellipse at 5% 0%,#25301b66,transparent 45%),#090c0a}
.masthead,main,footer{width:min(calc(100% - 80px),var(--max))}
.masthead{align-items:flex-start;position:relative;border-bottom:1px solid var(--line);padding:44px 0 30px;gap:24px}
.kicker,.instrument-label,.model,.status-row,.button,.stages,.bounded,.meter-labels,.context-grid dt,footer{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.kicker{font-size:10px;letter-spacing:.18em}.brand-divider{color:var(--pink);padding-inline:8px}
h1{font-size:clamp(38px,5.6vw,68px);font-weight:900;line-height:.98;letter-spacing:-.055em;margin-top:18px;text-transform:none}
h1:after{content:'';display:block;width:114px;height:5px;background:var(--pink);transform:rotate(-3deg);margin:19px 0 0;box-shadow:16px 4px 0 -1px #ff52c84d}
.masthead-note{font-size:13px;margin:20px 0 0}.identity-tag{text-align:right;flex-shrink:0;margin-top:8px}.identity-tag>span{font:9px ui-monospace,monospace;letter-spacing:.12em;color:var(--muted)}
.model{display:table;margin:12px 0 0 auto;background:transparent;border:1px solid var(--pink);color:var(--pink);font-size:12px;padding:10px 14px;transform:rotate(4deg)}
.notice{margin:24px 0;padding:0 0 0 12px;border:0;border-left:2px solid var(--cyan);background:none;font-size:12px;gap:16px;line-height:1.6}
.notice strong{font:700 10px/1.9 ui-monospace,monospace;letter-spacing:.08em}
.control-deck{padding:24px;gap:20px;border-top:2px solid var(--cyan)}.control-deck>div:first-child{min-width:0}.status-row{font-size:10px;line-height:1.6}.status-dot{flex-shrink:0;box-shadow:none}.control-deck p{font-size:13px}
.button{min-height:48px;padding:13px 20px;font-size:11px;transition:border-color .15s,background-color .15s}.button:not(:disabled):hover{border-color:var(--pink)}.primary:not(:disabled):hover{background:#ccff65;border-color:#ccff65}.button.secondary{background:#202821}.button.cancel{background:#ff8e93;color:#19090b}.control-buttons{flex-shrink:0}
button:focus-visible,input:focus-visible,.skip-link:focus-visible{outline:3px solid var(--pink);outline-offset:4px}.text-button{min-height:44px;padding:8px;color:#c6cec7}.button:disabled{opacity:.5}
.settings{font-size:13px}.switch-row input{width:28px;height:28px;flex-shrink:0}.switch-row{min-height:44px}.settings-note{line-height:1.6}
.progress-panel{background:#101510;padding:17px 24px 20px}.progress-track{height:3px;background:#343b36}.stages{font-size:9px;letter-spacing:.08em;margin-top:12px}
.score-panel{margin-top:24px;padding:30px;border-left:1px solid var(--line);position:relative;background:linear-gradient(115deg,#1b221d,#101510 70%)}
.score-line{margin-top:18px}.score-line span{font:600 clamp(78px,11vw,124px)/.95 ui-monospace,monospace;letter-spacing:-.08em;color:var(--cyan);font-variant-numeric:tabular-nums}.score-line small{font:14px ui-monospace,monospace;padding-left:8px}.score-panel p{font-size:13px;line-height:1.6;margin-top:16px;max-width:500px}
.instrument-label{font-size:10px;color:var(--muted);letter-spacing:.15em}.score-panel .instrument-label{color:var(--cyan)}
.grade{font:700 20px ui-monospace,monospace;letter-spacing:.04em;padding:14px}.grade-wrap{max-width:230px}.grade-wrap span{font-size:12px;line-height:1.5;margin-top:12px}
.meter{margin:16px 0 26px}.meter-labels{font-size:9px;letter-spacing:.09em}.meter-track{height:9px;border:0;margin-top:10px}.needle{height:21px;top:-6px;box-shadow:none;width:2px}.zone.poor{background:#b05f63}.zone.usable{background:#b99f65}.zone.strong{background:#9dcf43}
.readout-grid{gap:10px;counter-reset:channels}.readout{position:relative;min-width:0;min-height:166px;padding:20px;background:linear-gradient(145deg,#1b221d,#111612);counter-increment:channels}
.readout:before{content:'0' counter(channels);position:absolute;right:12px;top:12px;font:9px ui-monospace,monospace;color:#879487}.readout .instrument-label{padding-right:16px;min-height:28px;line-height:1.5}.reading{gap:5px;flex-wrap:wrap}.reading span{font:500 clamp(29px,4vw,44px)/1.3 ui-monospace,monospace;letter-spacing:-.06em;font-variant-numeric:tabular-nums}.reading small{font:11px ui-monospace,monospace}.readout:last-child{border-bottom:2px solid var(--pink)}
.section-block{margin-top:24px;padding:26px;background:#111612}h2{font-size:24px;letter-spacing:-.04em}.section-head{align-items:center}.bounded{font-size:9px;max-width:130px;text-align:right;line-height:1.5}.activity{background:#171d18;padding:18px;min-width:0}.activity small{font-size:12px;line-height:1.6}.activity strong{font-size:14px}.verdict{font:700 9px ui-monospace,monospace;padding:6px 8px}.empty-state{font-size:13px;padding:28px 16px;line-height:1.6}
.context-block{gap:24px}.context-grid{gap:16px}.context-grid dt{font-size:9px;letter-spacing:.08em}.context-grid dd{font-size:14px;margin-top:8px}.save-row input{min-height:48px;font-size:16px;border-radius:0}.save-row input::placeholder{color:#a7aea8}.history-item strong{overflow-wrap:anywhere}.history-item small{font-size:12px;line-height:1.6}.history-score{font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums}
.limits{background:transparent;border:0;border-left:2px solid var(--pink);padding:0 0 0 20px;margin-top:32px}.limits h2{font-size:19px}.limits ul{font-size:12px;line-height:1.7;max-width:780px}footer{font-size:9px;line-height:1.6;letter-spacing:.06em}
.skip-link{position:fixed;top:8px;left:8px;z-index:10;transform:translateY(-200%);background:var(--cyan);color:#11180c;padding:12px}.skip-link:focus{transform:none}main:focus{outline:none}
@media(max-width:760px){.masthead,main,footer{width:calc(100% - 36px)}.masthead{padding-top:28px}.identity-tag>span{font-size:8px}.control-deck{align-items:stretch;flex-direction:column}.control-buttons{margin-top:0;display:grid;grid-template-columns:1fr 1.6fr}.readout-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.score-panel{padding:24px}.grade-wrap{min-width:0;max-width:none}.context-block{grid-template-columns:1fr}}
@media(max-width:560px){.masthead{gap:8px}.kicker{font-size:9px;letter-spacing:.09em}.identity-tag>span{display:block;max-width:70px}.model{font-size:10px;padding:8px}.masthead h1{font-size:clamp(32px,8.7vw,48px)}.masthead-note{font-size:12px}.notice strong{margin-bottom:5px}.control-deck{display:flex;padding:20px 16px}.status-row{font-size:9px;letter-spacing:.06em}.score-panel{grid-template-columns:1fr;gap:20px;padding:22px}.grade-wrap{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}.grade{font-size:16px;padding:10px}.grade-wrap span{text-align:left;margin:0;font-size:11px}.score-line span{font-size:86px}.score-panel p{font-size:12px}.progress-panel{padding-inline:16px}.stages{font-size:8px;letter-spacing:.02em}.readout{padding:16px;min-height:145px}.reading span{font-size:32px}.readout .instrument-label{font-size:9px}.readout p{font-size:11px}.section-block{padding:20px 16px}.section-head{gap:12px}.section-head h2{font-size:22px}.bounded{font-size:8px;max-width:95px}.activity-grid{grid-template-columns:1fr}.context-grid{grid-template-columns:1fr 1fr}.save-row{grid-template-columns:1fr}.limits{padding-left:14px}footer{padding-bottom:calc(28px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
