:root {
  --bg: #061827;
  --bg-2: #0a2235;
  --surface: #ffffff;
  --surface-2: #f3f8fb;
  --surface-3: #e8f2f8;
  --ink: #102a3d;
  --muted: #61788a;
  --line: #d8e5ed;
  --accent: #00a4ef;
  --accent-strong: #0078d4;
  --accent-dark: #005a9e;
  --accent-soft: #e7f6fd;
  --accent-border: #a8dcf5;
  --good: #14855f;
  --good-bg: #eaf8f2;
  --warn: #a96d0b;
  --warn-bg: #fff6df;
  --bad: #b83a4b;
  --bad-bg: #fff0f2;
  --info: #0078d4;
  --info-bg: #eaf5fc;
  --purple: #7256c8;
  --purple-bg: #f3efff;
  --shadow: 0 24px 65px rgba(3,30,48,.14);
  --shadow-soft: 0 12px 35px rgba(3,30,48,.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #eaf2f7;
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .58; }
code, textarea { font-family: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.app-shell { min-height: 100vh; }

.topbar {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 38px;
  padding: 0 max(24px, calc((100vw - 1180px)/2));
  color: #d9e5f2;
  background: var(--bg);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: relative;
  z-index: 20;
}
.brand { display:flex; align-items:center; gap:10px; font-size:17px; font-weight:780; letter-spacing:-.025em; color:#fff; white-space:nowrap; }
.brand-mark { width:32px; height:32px; display:grid; place-items:center; color:var(--accent); }
.brand-mark svg { width:100%; height:100%; }
.topnav { display:flex; gap:23px; font-size:13px; color:#9eafc3; }
.topnav a { transition:color .15s ease; }
.topnav a:hover { color:#fff; }
.privacy-pill { margin-left:auto; display:flex; align-items:center; gap:8px; font-size:12px; color:#aebccd; white-space:nowrap; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(0,164,239,.1); }

.hero {
  min-height: 510px;
  background: var(--bg);
  color:#fff;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(430px,.88fr);
  gap:70px;
  align-items:center;
  padding:72px max(24px, calc((100vw - 1180px)/2)) 104px;
  position:relative;
  overflow:hidden;
}
.hero::after {
  content:"";
  position:absolute;
  width:560px;
  height:560px;
  border-radius:50%;
  right:-240px;
  top:-195px;
  border:1px solid rgba(0,164,239,.08);
  box-shadow:0 0 0 75px rgba(0,164,239,.025),0 0 0 150px rgba(0,164,239,.018);
  pointer-events:none;
}
.hero-copy { position:relative; z-index:1; }
.eyebrow,.section-kicker { margin:0 0 10px; text-transform:uppercase; letter-spacing:.16em; font-weight:820; font-size:10.5px; color:var(--accent-strong); }
.hero .eyebrow { color:var(--accent); }
.hero h1 { font-size:clamp(45px,5vw,69px); line-height:.99; letter-spacing:-.055em; margin:0; max-width:700px; }
.hero h1 span { color:var(--accent); }
.lede { color:#9fb0c5; line-height:1.72; font-size:16px; max-width:590px; margin:24px 0 0; }
.hero-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:25px; }
.hero-badges span { border:1px solid rgba(255,255,255,.11); background:rgba(255,255,255,.045); border-radius:999px; padding:7px 10px; color:#b9c7d7; font-size:10.5px; font-weight:700; }

.quick-card {
  background:rgba(255,255,255,.98);
  color:var(--ink);
  border-radius:18px;
  padding:25px;
  box-shadow:0 30px 80px rgba(0,0,0,.25);
  position:relative;
  z-index:2;
}
.quick-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:20px; }
.quick-card-head h2 { margin:0; font-size:22px; letter-spacing:-.035em; }
.quick-card-head .section-kicker { margin-bottom:4px; color:#8491a1; }
.recipe-count { color:var(--accent-dark); background:var(--accent-soft); border-radius:999px; padding:6px 9px; font-size:10px; font-weight:800; white-space:nowrap; }
.quick-card > label { display:block; font-size:11px; color:#526174; font-weight:760; margin:14px 0 7px; }
.quick-card select,.quick-card input { width:100%; min-height:45px; border:1px solid #d4dde7; border-radius:9px; background:#fff; color:var(--ink); padding:10px 12px; outline:none; }
.quick-card select:focus,.quick-card input:focus { border-color:var(--accent-strong); box-shadow:0 0 0 3px rgba(0,120,212,.11); }
.primary-button { border:0; border-radius:9px; background:var(--accent-strong); color:#fff; min-height:46px; padding:0 18px; display:inline-flex; gap:9px; align-items:center; justify-content:center; font-weight:750; transition:background .15s ease,transform .15s ease; }
.primary-button:hover { background:var(--accent-dark); transform:translateY(-1px); }
.primary-button svg { width:18px; }
.quick-card .primary-button { width:100%; margin-top:17px; }
.form-note { margin:14px 0 0; font-size:10.5px; line-height:1.55; color:#8794a4; }

.workspace { position:relative; z-index:4; }
.section-block { max-width:1180px; margin:0 auto 78px; scroll-margin-top:88px; }
.recipes-section { margin-top:-38px; }
.section-heading { margin-bottom:25px; }
.section-heading h2 { margin:0; font-size:32px; letter-spacing:-.045em; }
.section-heading > p:last-child,.section-heading div > p:last-child { margin:9px 0 0; color:var(--muted); font-size:13px; line-height:1.6; }
.split-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:26px; }
.recipe-filter { width:min(320px,100%); background:#fff; border:1px solid var(--line); border-radius:10px; display:grid; grid-template-columns:34px 1fr; align-items:center; padding:3px 8px; }
.recipe-filter span { color:#8996a4; text-align:center; font-size:19px; }
.recipe-filter input { min-width:0; border:0; outline:0; padding:10px 6px; color:var(--ink); }

.recipe-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.recipe-card { min-height:190px; border:1px solid rgba(210,220,230,.9); background:#fff; border-radius:14px; padding:18px; text-align:left; color:var(--ink); display:flex; flex-direction:column; position:relative; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; overflow:hidden; }
.recipe-card::after { content:""; position:absolute; width:95px; height:95px; right:-42px; top:-42px; border-radius:50%; background:var(--accent-soft); opacity:.82; }
.recipe-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-soft); border-color:#9fd7f2; }
.recipe-card.selected { border-color:var(--accent-strong); box-shadow:0 0 0 3px rgba(0,120,212,.1),var(--shadow-soft); }
.recipe-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative; z-index:1; }
.recipe-icon { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--surface-2); font-size:20px; }
.category-badge { border-radius:999px; padding:5px 7px; background:var(--surface-2); color:var(--muted); font-size:8.5px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.recipe-badges { display:flex; align-items:center; justify-content:flex-end; gap:5px; flex-wrap:wrap; }
.source-badge { border-radius:999px; padding:5px 7px; background:var(--good-bg); color:var(--good); font-size:8px; font-weight:850; text-transform:uppercase; letter-spacing:.07em; }
.recipe-card h3 { margin:21px 0 7px; font-size:14px; letter-spacing:-.018em; }
.recipe-card p { margin:0; color:var(--muted); font-size:10.5px; line-height:1.55; }
.recipe-card-footer { margin-top:auto; padding-top:15px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.recipe-card-footer span:first-child { color:var(--accent-dark); font-size:10px; font-weight:800; }
.risk-dot { display:inline-flex; align-items:center; gap:5px; color:var(--muted)!important; font-size:9px!important; font-weight:700!important; }
.risk-dot::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--good); }
.risk-dot.medium::before { background:var(--warn); }
.risk-dot.high::before { background:var(--bad); }
.empty-recipes { grid-column:1/-1; border:1px dashed #c8d1dc; border-radius:14px; padding:30px; text-align:center; color:var(--muted); background:rgba(255,255,255,.55); }

.builder-layout { display:grid; grid-template-columns:minmax(300px,.72fr) minmax(0,1.55fr); gap:14px; align-items:start; }
.panel { background:#fff; border:1px solid rgba(213,221,231,.82); border-radius:14px; overflow:hidden; }
.panel-head { padding:20px 21px; display:flex; justify-content:space-between; align-items:center; gap:14px; border-bottom:1px solid var(--line); }
.panel-head h3 { margin:0; font-size:18px; letter-spacing:-.025em; }
.panel-head .section-kicker { margin-bottom:4px; color:#8491a1; }
.risk-badge { border-radius:999px; padding:6px 9px; font-size:9.5px; font-weight:800; white-space:nowrap; }
.risk-low { color:var(--good); background:var(--good-bg); }
.risk-medium { color:var(--warn); background:var(--warn-bg); }
.risk-high { color:var(--bad); background:var(--bad-bg); }
.config-intro { padding:17px 21px; display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:start; border-bottom:1px solid var(--line); }
.recipe-icon-large { width:42px; height:42px; border-radius:11px; background:var(--surface-2); display:grid; place-items:center; font-size:22px; }
.config-intro p { margin:2px 0 0; color:var(--muted); font-size:11px; line-height:1.58; }
.recipe-workflow { padding:18px 21px 20px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fbfdff 0%,#f3f9fc 100%); }
.workflow-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:13px; }
.workflow-head h4 { margin:0; font-size:13px; letter-spacing:-.015em; }
.workflow-head .section-kicker { margin-bottom:3px; }
.uploaded-badge { border:1px solid #cbe6de; border-radius:999px; padding:5px 8px; background:var(--good-bg); color:var(--good); font-size:8.5px; font-weight:850; white-space:nowrap; }
.workflow-steps { display:grid; gap:9px; }
.workflow-steps article { display:grid; grid-template-columns:30px 1fr; gap:10px; align-items:start; padding:11px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.workflow-letter { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; font-size:10px; font-weight:900; }
.workflow-letter.detection { color:#1769aa; background:#e9f4fd; }
.workflow-letter.remediation { color:var(--good); background:var(--good-bg); }
.workflow-steps strong { display:block; margin:1px 0 4px; font-size:10px; }
.workflow-steps p { margin:0; color:var(--muted); font-size:9.2px; line-height:1.52; }
.workflow-notes { margin:12px 0 0; padding:0 0 0 17px; color:#5e6f82; font-size:9px; line-height:1.52; }
.workflow-notes li + li { margin-top:5px; }
.workflow-sources { margin-top:13px; padding-top:11px; border-top:1px dashed #d7e1e7; }
.workflow-sources > strong { display:block; margin-bottom:7px; color:#6c7b8d; font-size:8.5px; text-transform:uppercase; letter-spacing:.08em; }
.workflow-sources > div { display:flex; flex-wrap:wrap; gap:5px; }
.workflow-sources code { max-width:100%; overflow-wrap:anywhere; border-radius:5px; padding:4px 6px; background:#edf3f6; color:#3d5267; font-size:8px; }
.config-form { padding:18px 21px 4px; display:grid; gap:14px; }
.form-field { display:grid; gap:6px; }
.form-field label { color:#526174; font-size:10.5px; font-weight:780; }
.form-field label span { color:#929eac; font-weight:550; }
.form-field input,.form-field select,.form-field textarea,.setting-grid select { width:100%; border:1px solid #d6dee8; background:#fbfcfd; border-radius:8px; outline:none; padding:9px 10px; color:var(--ink); font-size:12px; }
.form-field textarea { resize:vertical; min-height:75px; line-height:1.5; }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus,.setting-grid select:focus { border-color:var(--accent-strong); box-shadow:0 0 0 3px rgba(0,120,212,.1); background:#fff; }
.field-help { color:#8a96a5; font-size:9.5px; line-height:1.45; }
.checkbox-field { display:flex; align-items:flex-start; gap:9px; padding:10px 11px; border:1px solid var(--line); border-radius:9px; background:#fafbfd; }
.checkbox-field input { width:16px; height:16px; margin:1px 0 0; accent-color:var(--accent-strong); flex:0 0 auto; }
.checkbox-field div { min-width:0; }
.checkbox-field strong { display:block; font-size:11px; }
.checkbox-field span { display:block; color:var(--muted); font-size:9.5px; line-height:1.45; margin-top:2px; }
.package-settings { margin:15px 21px 0; padding:16px; background:var(--surface-2); border-radius:11px; }
.subheading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.subheading h4 { margin:0; font-size:12px; }
.subheading span { color:var(--muted); font-size:8.5px; }
.setting-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.setting-grid label { display:grid; gap:5px; color:#637184; font-size:9.5px; font-weight:700; }
.setting-grid select { padding:8px; font-size:10.5px; background:#fff; }
.config-warnings { display:grid; gap:8px; padding:14px 21px 0; }
.config-warning { border-radius:9px; padding:10px 11px; font-size:9.5px; line-height:1.5; display:grid; grid-template-columns:18px 1fr; gap:7px; }
.config-warning.warn { color:#7b5b1f; background:var(--warn-bg); }
.config-warning.info { color:#285e99; background:var(--info-bg); }
.config-warning.bad { color:#8f2e3d; background:var(--bad-bg); }
.full-button { width:calc(100% - 42px); margin:17px 21px 21px; }

.scripts-column { display:grid; gap:14px; min-width:0; }
.builder-status { min-height:70px; padding:14px 17px; display:flex; justify-content:space-between; gap:18px; align-items:center; }
.builder-status > div { display:flex; align-items:center; gap:11px; }
.builder-status strong { display:block; font-size:12px; }
.builder-status p { margin:3px 0 0; color:var(--muted); font-size:10px; }
.status-dot { width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.status-dot.good { background:var(--good); box-shadow:0 0 0 5px var(--good-bg); }
.status-dot.warn { background:var(--warn); box-shadow:0 0 0 5px var(--warn-bg); }
.status-dot.bad { background:var(--bad); box-shadow:0 0 0 5px var(--bad-bg); }
.ghost-button { border:1px solid var(--line); background:#fff; border-radius:8px; padding:8px 10px; color:#5f6f82; font-size:10.5px; }
.ghost-button:hover { background:var(--surface-2); }
.script-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; min-width:0; }
.script-card { min-width:0; }
.script-head { padding:14px 15px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); }
.script-head > div:first-child { display:flex; gap:9px; align-items:center; min-width:0; }
.file-icon { width:32px; height:32px; border-radius:8px; display:grid; place-items:center; font-size:10px; font-weight:900; flex:0 0 auto; }
.file-icon.detection { color:var(--info); background:var(--info-bg); }
.file-icon.remediation { color:var(--good); background:var(--good-bg); }
.script-head h3 { margin:0; font-size:12.5px; }
.script-head p { margin:3px 0 0; color:var(--muted); font-size:8.8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.script-actions { display:flex; gap:5px; }
.icon-button { border:1px solid var(--line); background:#fff; color:#5b697a; border-radius:7px; padding:6px 7px; font-size:8.8px; font-weight:720; }
.icon-button:hover { background:var(--surface-2); }
.code-editor { display:block; width:100%; min-height:560px; resize:vertical; border:0; outline:0; padding:17px; background:#0a1422; color:#d5e2ef; font-size:10.4px; line-height:1.62; tab-size:4; white-space:pre; overflow:auto; }
.code-editor:focus { box-shadow:inset 0 0 0 2px rgba(0,164,239,.35); }
.script-meta { min-height:36px; padding:9px 13px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; color:#7c8998; font-size:8.8px; background:#fbfcfd; border-top:1px solid var(--line); }
.script-meta span:last-child { margin-left:auto; color:var(--good); font-weight:720; }

.simulation-badge { color:var(--purple); background:var(--purple-bg); padding:7px 10px; border-radius:999px; font-size:10px; font-weight:800; white-space:nowrap; }
.test-layout { display:grid; grid-template-columns:minmax(270px,.85fr) minmax(330px,1.15fr) minmax(260px,.75fr); gap:14px; align-items:stretch; }
.test-config-card { display:flex; flex-direction:column; }
.count-badge { background:var(--surface-2); min-width:30px; text-align:center; border-radius:30px; padding:5px 9px; font-size:10px; font-weight:750; color:#556477; }
.test-form { padding:17px 20px 5px; display:grid; gap:12px; }
.test-buttons { padding:12px 20px 5px; display:grid; gap:8px; }
.test-buttons .primary-button,.test-buttons .secondary-button { width:100%; min-height:42px; }
.secondary-button { border:1px solid #cfd8e2; background:#fff; border-radius:8px; padding:9px 12px; color:var(--ink); font-size:10.5px; font-weight:720; }
.secondary-button:hover { background:var(--surface-2); }
.local-test-note { margin:auto 20px 18px; padding:10px 11px; color:#6f5a28; background:var(--warn-bg); border-radius:8px; font-size:9.3px; line-height:1.5; }
.console-card { background:#091321; border-color:#18283c; color:#dbe7f2; display:grid; grid-template-rows:auto 1fr auto; }
.console-head { min-height:43px; padding:0 15px; display:flex; align-items:center; justify-content:space-between; gap:15px; border-bottom:1px solid #1a2a3e; color:#8497aa; font-family:"Cascadia Code",Consolas,monospace; font-size:9.5px; }
.terminal-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; }
.terminal-dot.red { background:#ef6a6a; }
.terminal-dot.yellow { background:#e8b858; }
.terminal-dot.green { background:#61c79b; }
.test-console { min-height:260px; padding:18px; font-family:"Cascadia Code",Consolas,monospace; font-size:10px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }
.console-muted { color:#71859a; }
.console-line { display:block; }
.console-line.prompt { color:var(--accent); }
.console-line.info { color:#c9d8e7; }
.console-line.success { color:#75dfb6; }
.console-line.warn { color:#f0c872; }
.console-line.error { color:#f493a1; }
.exit-result { min-height:75px; padding:13px 16px; border-top:1px solid #1a2a3e; display:grid; grid-template-columns:auto 44px; grid-template-rows:auto auto; gap:2px 12px; align-items:center; }
.exit-result span { color:#7e91a6; font-size:9px; text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.exit-result strong { grid-row:1/3; grid-column:2; width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background:#132239; color:#dbe7f2; font-size:18px; }
.exit-result p { margin:0; color:#9eafc0; font-size:10px; }
.exit-result.success strong { color:#75dfb6; background:rgba(20,133,95,.18); }
.exit-result.issue strong { color:#f0c872; background:rgba(169,109,11,.19); }
.exit-result.error strong { color:#f493a1; background:rgba(184,58,75,.18); }
.validation-card { display:flex; flex-direction:column; }
.validation-score { border-radius:999px; padding:6px 8px; background:var(--surface-2); color:#58677a; font-size:10px; font-weight:850; }
.validation-score.good { color:var(--good); background:var(--good-bg); }
.validation-score.warn { color:var(--warn); background:var(--warn-bg); }
.validation-list { padding:7px 18px 13px; }
.validation-item { display:grid; grid-template-columns:24px 1fr; gap:9px; align-items:start; padding:10px 0; border-bottom:1px solid #edf0f4; }
.validation-item:last-child { border-bottom:0; }
.validation-icon { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:900; }
.validation-item.pass .validation-icon { color:var(--good); background:var(--good-bg); }
.validation-item.warn .validation-icon { color:var(--warn); background:var(--warn-bg); }
.validation-item.fail .validation-icon { color:var(--bad); background:var(--bad-bg); }
.validation-item strong { display:block; font-size:10.5px; }
.validation-item p { margin:2px 0 0; color:var(--muted); font-size:8.8px; line-height:1.42; }

.exit-code-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.exit-code-card { border:1px solid var(--line); background:#fff; border-radius:14px; padding:22px; display:grid; grid-template-columns:52px 1fr; gap:15px; align-items:start; }
.exit-code-card > span { width:52px; height:52px; border-radius:12px; display:grid; place-items:center; font-size:17px; font-weight:900; }
.exit-code-card.success > span { color:var(--good); background:var(--good-bg); }
.exit-code-card.issue > span { color:var(--warn); background:var(--warn-bg); }
.exit-code-card.error > span { color:var(--bad); background:var(--bad-bg); font-size:10px; }
.exit-code-card h3 { margin:4px 0 6px; font-size:14px; }
.exit-code-card p { margin:0; color:var(--muted); font-size:10.5px; line-height:1.55; }

.download-card { background:var(--bg); color:#fff; border-radius:18px; padding:31px 32px; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr); gap:48px; align-items:center; position:relative; overflow:hidden; box-shadow:var(--shadow); }
.download-card::after { content:""; position:absolute; width:270px; height:270px; border-radius:50%; right:-120px; top:-125px; border:1px solid rgba(0,164,239,.1); box-shadow:0 0 0 52px rgba(0,164,239,.03),0 0 0 104px rgba(0,164,239,.018); }
.download-copy,.download-actions { position:relative; z-index:1; }
.download-copy .eyebrow { color:var(--accent); }
.download-copy h2 { margin:0; font-size:31px; letter-spacing:-.045em; }
.download-copy > p:last-of-type { color:#9fb0c5; font-size:12px; line-height:1.65; margin:10px 0 18px; }
.package-summary { margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 13px; font-size:9.5px; }
.package-summary dt { color:#7f93a9; }
.package-summary dd { margin:0; color:#c9d6e3; font-family:"Cascadia Code",Consolas,monospace; overflow-wrap:anywhere; }
.download-actions { display:grid; gap:10px; }
.download-primary { min-height:68px; border:0; border-radius:12px; background:var(--accent); color:var(--bg); padding:12px 15px; display:flex; align-items:center; gap:13px; text-align:left; transition:background .15s ease,transform .15s ease; }
.download-primary:hover { background:#39b9f3; transform:translateY(-1px); }
.download-symbol { width:39px; height:39px; border-radius:10px; display:grid; place-items:center; background:rgba(7,17,31,.09); font-size:21px; font-weight:900; }
.download-primary strong { display:block; font-size:12px; }
.download-primary small { display:block; margin-top:3px; color:#064b72; font-size:9px; }
.download-secondary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.download-secondary-grid button { min-height:38px; border:1px solid rgba(255,255,255,.13); border-radius:8px; background:rgba(255,255,255,.05); color:#c1cfdd; font-size:8.8px; font-weight:720; }
.download-secondary-grid button:hover { background:rgba(255,255,255,.1); color:#fff; }

.requirements-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
.requirements-grid article { background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px; }
.requirements-grid article > span { color:var(--accent-dark); font-size:9.5px; font-weight:850; letter-spacing:.12em; }
.requirements-grid h3 { margin:19px 0 7px; font-size:13px; }
.requirements-grid p { margin:0; color:var(--muted); font-size:10px; line-height:1.58; }
.requirements-grid code { color:#38506b; background:var(--surface-2); border-radius:4px; padding:1px 3px; font-size:9px; }
.learn-link { display:inline-flex; align-items:center; gap:6px; margin-top:16px; color:var(--accent-dark); font-size:11px; font-weight:800; }
.learn-link:hover { text-decoration:underline; }

.coffee-section { max-width:1180px; margin:0 auto 80px; }
.coffee-card { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr); gap:36px; align-items:center; padding:30px 32px; border-radius:18px; background:var(--bg); color:#fff; box-shadow:0 24px 60px rgba(2,13,28,.14); position:relative; overflow:hidden; }
.coffee-card::after { content:""; position:absolute; width:260px; height:260px; border-radius:50%; right:-110px; top:-120px; border:1px solid rgba(0,164,239,.12); box-shadow:0 0 0 45px rgba(0,164,239,.035),0 0 0 90px rgba(0,164,239,.02); pointer-events:none; }
.coffee-copy { display:grid; grid-template-columns:56px 1fr; gap:18px; align-items:start; position:relative; z-index:1; }
.coffee-icon { width:56px; height:56px; display:grid; place-items:center; border-radius:14px; background:rgba(0,164,239,.12); border:1px solid rgba(0,164,239,.18); font-size:27px; }
.coffee-copy .eyebrow { color:var(--accent); margin-bottom:5px; }
.coffee-copy h2 { margin:0 0 8px; font-size:27px; letter-spacing:-.035em; }
.coffee-copy p:last-child { margin:0; max-width:650px; color:#a9b8ca; font-size:12px; line-height:1.65; }
.coffee-action { position:relative; z-index:1; display:grid; gap:12px; padding:18px; border-radius:14px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); }
.coffee-price { display:flex; justify-content:space-between; gap:14px; align-items:baseline; }
.coffee-price strong { font-size:24px; letter-spacing:-.03em; color:#fff; }
.coffee-price span { font-size:9px; color:#9fb0c5; text-align:right; }
.coffee-button { min-height:48px; border-radius:9px; background:var(--accent); color:var(--bg); display:flex; align-items:center; justify-content:center; gap:10px; padding:0 16px; font-size:12px; font-weight:800; transition:transform .15s ease,background .15s ease; }
.coffee-button:hover { background:#39b9f3; transform:translateY(-1px); }
.coffee-button svg { width:18px; }
.coffee-note { margin:0; color:#8fa1b6; font-size:9px; line-height:1.5; }

footer { min-height:90px; background:#fff; border-top:1px solid var(--line); display:flex; align-items:center; gap:28px; padding:0 max(24px,calc((100vw - 1180px)/2)); }
footer > span { font-weight:800; font-size:12px; white-space:nowrap; }
footer p { color:var(--muted); font-size:9.5px; line-height:1.5; }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; pointer-events:none; z-index:100; border-radius:10px; padding:11px 15px; color:#fff; background:#0b1728; box-shadow:0 15px 45px rgba(2,13,28,.25); font-size:11px; font-weight:720; transition:opacity .18s ease,transform .18s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast.good { background:#0f7354; }
.toast.warn { background:#8f5d0c; }
.toast.bad { background:#9b3040; }

@media (max-width:1100px) {
  .recipe-grid { grid-template-columns:repeat(3,1fr); }
  .script-grid { grid-template-columns:1fr; }
  .code-editor { min-height:430px; }
  .test-layout { grid-template-columns:1fr 1fr; }
  .validation-card { grid-column:1/-1; }
  .validation-list { display:grid; grid-template-columns:1fr 1fr; column-gap:24px; }
}

@media (max-width:940px) {
  .topnav { display:none; }
  .hero { grid-template-columns:1fr; gap:38px; padding-top:56px; }
  .quick-card { max-width:620px; }
  .recipes-section { margin-top:-30px; }
  .builder-layout { grid-template-columns:1fr; }
  .config-panel { display:grid; grid-template-columns:1fr 1fr; align-items:start; }
  .config-panel > .panel-head,.config-panel > .config-intro,.config-panel > .recipe-workflow,.config-panel > .full-button { grid-column:1/-1; }
  .config-form { border-right:1px solid var(--line); }
  .package-settings { margin:18px 20px 0; }
  .config-warnings { padding:14px 20px 0; }
  .exit-code-grid { grid-template-columns:1fr; }
  .download-card { grid-template-columns:1fr; gap:25px; }
  .requirements-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:700px) {
  .topbar { height:64px; padding:0 18px; }
  .privacy-pill { display:none; }
  .brand { font-size:14px; }
  .brand-mark { width:29px; height:29px; }
  .hero { padding:47px 18px 76px; }
  .hero h1 { font-size:45px; }
  .lede { font-size:14px; }
  .section-block { margin-left:12px; margin-right:12px; margin-bottom:58px; }
  .split-heading { align-items:flex-start; flex-direction:column; }
  .section-heading h2 { font-size:27px; }
  .recipe-filter { width:100%; }
  .recipe-grid { grid-template-columns:1fr 1fr; }
  .config-panel { display:block; }
  .config-form { border-right:0; }
  .setting-grid { grid-template-columns:1fr; }
  .script-grid { grid-template-columns:1fr; }
  .script-head { align-items:flex-start; flex-direction:column; }
  .script-actions { align-self:stretch; }
  .icon-button { flex:1; }
  .code-editor { min-height:400px; font-size:9.5px; }
  .test-layout { grid-template-columns:1fr; }
  .validation-card { grid-column:auto; }
  .validation-list { display:block; }
  .download-card { padding:26px 20px; }
  .download-secondary-grid { grid-template-columns:1fr; }
  .requirements-grid { grid-template-columns:1fr; }
  .coffee-section { margin-left:12px; margin-right:12px; margin-bottom:45px; }
  .coffee-card { grid-template-columns:1fr; gap:22px; padding:24px 20px; }
  .coffee-copy { grid-template-columns:1fr; }
  .coffee-icon { width:50px; height:50px; }
  .coffee-price { align-items:flex-start; flex-direction:column; gap:3px; }
  .coffee-price span { text-align:left; }
  footer { padding:25px 18px; flex-direction:column; align-items:flex-start; gap:5px; }
}

@media (max-width:460px) {
  .recipe-grid { grid-template-columns:1fr; }
  .quick-card { padding:19px; }
  .hero-badges { gap:6px; }
  .hero-badges span { font-size:9.5px; }
  .builder-status { align-items:flex-start; flex-direction:column; }
  .ghost-button { align-self:stretch; }
  .exit-code-card { grid-template-columns:45px 1fr; padding:18px; }
  .exit-code-card > span { width:45px; height:45px; }
}


/* Category filtering and ASR guide */
.recipe-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:-7px 0 18px;
}
.category-filters {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.category-filter-button {
  border:1px solid #d7e0e8;
  border-radius:999px;
  min-height:35px;
  padding:0 11px;
  background:#fff;
  color:#5c6d80;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
  transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease;
}
.category-filter-button:hover {
  transform:translateY(-1px);
  border-color:#7cccf1;
  color:var(--accent-dark);
}
.category-filter-button.active {
  border-color:var(--accent-strong);
  background:var(--accent-soft);
  color:var(--accent-dark);
  box-shadow:0 0 0 2px rgba(0,120,212,.09);
}
.filter-count {
  min-width:17px;
  height:17px;
  padding:0 4px;
  border-radius:999px;
  display:inline-grid;
  place-items:center;
  background:var(--surface-2);
  color:#7b8999;
  font-size:8px;
}
.category-filter-button.active .filter-count {
  background:#fff;
  color:var(--accent-dark);
}
.recipe-result-summary {
  display:flex;
  align-items:center;
  gap:11px;
  color:#8592a1;
  font-size:9px;
  white-space:nowrap;
}
.text-button {
  border:0;
  padding:0;
  background:transparent;
  color:var(--accent-dark);
  font-size:9px;
  font-weight:820;
}

.asr-guide-section {
  padding-top:4px;
}
.asr-count-badge {
  border:1px solid #a8dcf5;
  border-radius:999px;
  padding:9px 13px;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}
.asr-count-badge strong {
  font-size:16px;
  margin-right:4px;
}
.asr-intro-card {
  border-radius:18px;
  padding:27px;
  background:linear-gradient(135deg,#061827 0%,#082b45 100%);
  color:#fff;
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(280px,.8fr);
  gap:30px;
  position:relative;
  overflow:hidden;
}
.asr-intro-card::before {
  content:"";
  position:absolute;
  width:230px;
  height:230px;
  left:-140px;
  bottom:-160px;
  border-radius:50%;
  border:1px solid rgba(0,164,239,.1);
  box-shadow:0 0 0 55px rgba(0,164,239,.022);
}
.asr-intro-copy {
  display:flex;
  align-items:flex-start;
  gap:17px;
  position:relative;
  z-index:1;
}
.asr-hero-icon {
  flex:0 0 auto;
  width:65px;
  height:65px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:rgba(0,164,239,.12);
  border:1px solid rgba(0,164,239,.19);
  color:var(--accent);
  font-size:14px;
  font-weight:900;
  letter-spacing:.09em;
}
.asr-intro-copy h3 {
  margin:3px 0 8px;
  font-size:23px;
  letter-spacing:-.035em;
}
.asr-intro-copy p {
  margin:0;
  color:#a9b8ca;
  font-size:10.5px;
  line-height:1.65;
}
.asr-prerequisites {
  border:1px solid rgba(255,255,255,.11);
  border-radius:13px;
  padding:17px;
  background:rgba(255,255,255,.04);
  display:grid;
  gap:9px;
  position:relative;
  z-index:1;
}
.asr-prerequisites strong {
  color:var(--accent);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.asr-prerequisites span {
  color:#b8c5d5;
  font-size:8.5px;
  line-height:1.45;
}
.asr-prerequisites span::before {
  content:"✓";
  color:var(--accent);
  margin-right:8px;
  font-weight:900;
}
.asr-setup-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:14px 0;
}
.asr-setup-grid article {
  min-height:145px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:19px;
  background:#fff;
}
.asr-setup-grid article > span {
  color:var(--accent-dark);
  font-size:9px;
  font-weight:900;
  letter-spacing:.1em;
}
.asr-setup-grid h3 {
  margin:18px 0 7px;
  font-size:13px;
}
.asr-setup-grid p {
  margin:0;
  color:var(--muted);
  font-size:8.7px;
  line-height:1.55;
}
.asr-mode-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  margin-bottom:30px;
}
.asr-mode-grid article {
  min-height:58px;
  border:1px solid var(--line);
  border-radius:11px;
  padding:10px;
  background:#fff;
  display:grid;
  grid-template-columns:34px 1fr;
  grid-template-rows:auto auto;
  column-gap:9px;
  align-items:center;
}
.asr-mode-grid strong {
  grid-row:1/3;
  width:34px;
  height:34px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:var(--surface-3);
  color:#607287;
  font-size:12px;
}
.asr-mode-grid span {
  font-size:9px;
  font-weight:850;
}
.asr-mode-grid p {
  margin:1px 0 0;
  color:var(--muted);
  font-size:7px;
  line-height:1.35;
}
.asr-mode-grid .mode-block strong {
  color:var(--bad);
  background:var(--bad-bg);
}
.asr-mode-grid .mode-audit strong {
  color:var(--info);
  background:var(--info-bg);
}
.asr-mode-grid .mode-warn strong {
  color:var(--warn);
  background:var(--warn-bg);
}
.asr-rules-toolbar {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:22px;
  margin-bottom:13px;
}
.asr-rules-toolbar h3 {
  margin:0;
  font-size:24px;
  letter-spacing:-.035em;
}
.asr-search {
  width:min(350px,100%);
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  display:grid;
  grid-template-columns:35px 1fr;
  align-items:center;
  padding:3px 8px;
}
.asr-search span {
  color:#8996a4;
  text-align:center;
}
.asr-search input {
  min-width:0;
  border:0;
  outline:0;
  padding:10px 5px;
  color:var(--ink);
}
.asr-category-filters {
  margin-bottom:14px;
}
.asr-rules-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.asr-rule-card {
  border:1px solid #d7e0e8;
  border-left:3px solid #b7c3cf;
  border-radius:13px;
  padding:15px;
  background:#fff;
}
.asr-rule-card.standard {
  border-color:#7accf1;
  border-left-color:var(--accent-strong);
}
.asr-rule-head {
  display:grid;
  grid-template-columns:35px 1fr auto;
  align-items:start;
  gap:10px;
}
.asr-rule-number {
  width:35px;
  height:35px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:var(--surface-2);
  color:#617287;
  font-size:8px;
  font-weight:900;
}
.asr-rule-card.standard .asr-rule-number {
  background:var(--accent-soft);
  color:var(--accent-dark);
}
.asr-rule-head h4 {
  margin:1px 0 3px;
  font-size:11px;
  line-height:1.35;
}
.asr-rule-intune-name {
  margin:0;
  color:#8996a5;
  font-size:7px;
  line-height:1.4;
}
.asr-recommendation {
  border-radius:999px;
  padding:5px 7px;
  font-size:6.5px;
  font-weight:900;
  text-transform:uppercase;
  white-space:nowrap;
}
.asr-recommendation.block {
  color:var(--good);
  background:var(--good-bg);
}
.asr-recommendation.audit {
  color:var(--info);
  background:var(--info-bg);
}
.asr-rule-description {
  margin:13px 0 10px;
  color:var(--muted);
  font-size:8.5px;
  line-height:1.55;
}
.asr-rule-meta {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-bottom:10px;
}
.asr-rule-meta span {
  border-radius:999px;
  padding:4px 6px;
  background:var(--surface-2);
  color:#607287;
  font-size:6.5px;
  font-weight:750;
}
.asr-guid-row {
  border:1px solid var(--line);
  border-radius:9px;
  padding:7px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  background:#f9fbfc;
}
.asr-guid-row code {
  min-width:0;
  color:#52677d;
  font-size:7px;
  word-break:break-all;
}
.asr-guid-row button {
  flex:0 0 auto;
  border:0;
  border-radius:6px;
  padding:6px 7px;
  background:var(--surface-3);
  color:#516275;
  font-size:6.5px;
  font-weight:800;
}
.asr-rule-note {
  margin:10px 0 0;
  padding-top:9px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:7.5px;
  line-height:1.5;
}
.asr-rule-note strong {
  color:#42566c;
}
.asr-empty {
  grid-column:1/-1;
  border:1px dashed #c9d4de;
  border-radius:13px;
  padding:28px;
  text-align:center;
  color:var(--muted);
  background:rgba(255,255,255,.6);
}
.asr-production-note {
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:13px;
  padding:17px 19px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.asr-production-note strong {
  font-size:10px;
}
.asr-production-note p {
  max-width:760px;
  margin:5px 0 0;
  color:var(--muted);
  font-size:8px;
  line-height:1.5;
}
.asr-links {
  display:grid;
  gap:5px;
  text-align:right;
}
.asr-links a {
  color:var(--accent-dark);
  font-size:7.5px;
  font-weight:800;
  white-space:nowrap;
}

@media (max-width:1100px) {
  .asr-setup-grid { grid-template-columns:repeat(2,1fr); }
  .asr-mode-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:940px) {
  .recipe-toolbar { align-items:flex-start; flex-direction:column; }
  .asr-intro-card { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  .category-filters {
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:4px;
  }
  .recipe-result-summary { width:100%; justify-content:space-between; }
  .asr-setup-grid { grid-template-columns:1fr; }
  .asr-mode-grid { grid-template-columns:1fr 1fr; }
  .asr-rules-toolbar { align-items:flex-start; flex-direction:column; }
  .asr-search { width:100%; }
  .asr-rules-grid { grid-template-columns:1fr; }
  .asr-production-note { align-items:flex-start; flex-direction:column; }
  .asr-links { text-align:left; }
}
@media (max-width:460px) {
  .asr-intro-card { padding:20px; }
  .asr-intro-copy { flex-direction:column; }
  .asr-mode-grid { grid-template-columns:1fr; }
  .asr-rule-head { grid-template-columns:35px 1fr; }
  .asr-recommendation { grid-column:2; justify-self:start; }
}