.site-header,.site-main,.site-footer {width:min(1240px,calc(100% - 80px)); margin-inline:auto}
.site-header {height:80px; display:flex; align-items:center; gap:48px; border-bottom:1px solid var(--line)}
.site-nav {display:flex; gap:28px; font-size:13px; color:var(--ink-dim)}
.site-nav a:hover {color:var(--ink)}
.site-actions {margin-left:auto; display:flex; align-items:center; gap:12px}
.button {display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:44px; padding:11px 18px; border:1px solid transparent; border-radius:6px; background:var(--ink); color:var(--bg); font:600 13px/1.5 var(--sans); text-decoration:none; transition:background .15s,color .15s}
.button:hover {background:var(--ink-soft)}
.button-small {min-height:38px; padding:8px 14px; gap:20px}
.hero {padding:64px 0 40px}
.eyebrow {margin:0 0 20px}
.status-dot {display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:var(--accent); vertical-align:middle}
.hero h1 {margin:0 0 26px; font-size:clamp(36px,4.1vw,58px); font-weight:550; line-height:1.12; letter-spacing:-2.4px; text-wrap:balance}
.hero h1 span {color:var(--ink-dim)}
.hero-bottom {display:flex; align-items:flex-end; justify-content:space-between; gap:32px}
.hero-bottom p {max-width:580px; margin:0; color:var(--ink-dim); font-size:15px; line-height:1.7}
.hero-actions {display:flex; flex-direction:column; align-items:flex-start; gap:15px; flex-shrink:0}
.hero-actions .button {background:var(--accent); color:var(--button-ink)}
.hero-actions .button:hover {background:var(--accent-hover)}
.text-link {font-size:13px}
.text-link span {margin-left:12px}
.product-preview {border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--panel)}
.preview-top {height:48px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 20px; border-bottom:1px solid var(--line); font:11px var(--mono)}
.preview-brand {font-weight:600; font-size:13px}
.preview-brand span,.preview-context span {color:var(--line-strong); margin:0 10px}
.preview-label {color:var(--ink-dim); font-family:var(--sans)}
.preview-context {color:var(--ink-dim)}
.preview-layout {display:grid; grid-template-columns:180px minmax(0,1fr)}
.preview-sidebar {padding:24px 12px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--ink-dim); background:var(--bg-soft)}
.preview-sidebar>span {padding:9px 10px}
.preview-sidebar .eyebrow {margin-bottom:3px; font-size:10px}
.preview-sidebar .preview-nav-active {background:var(--panel-3); border-radius:5px; color:var(--ink)}
.preview-sidebar-bottom {margin-top:auto; padding:36px 10px 0; font-size:10px}
.preview-content {padding:26px 28px 0; min-width:0}
.preview-heading {display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:26px}
.preview-heading .eyebrow {font-size:10px; margin-bottom:7px}
.preview-heading h2 {margin:0; font-size:19px; font-weight:550; letter-spacing:-.5px}
.preview-status {font:10px var(--mono); color:var(--ok); background:var(--ok-bg); padding:6px 8px; border-radius:4px}
.preview-analysis {display:grid; grid-template-columns:180px minmax(0,1fr); gap:28px}
.preview-parameters {padding-right:24px; border-right:1px solid var(--line)}
.preview-parameters .eyebrow {font-size:10px}
.preview-parameters dl {margin:14px 0 18px; font:12px/1.6 var(--mono)}
.preview-parameters dl div {display:flex; justify-content:space-between; padding:6px 0}
.preview-parameters dt {color:var(--ink-dim)}
.preview-parameters dd {margin:0; color:var(--accent)}
.preview-parameter-note {font-size:10px; color:var(--ink-muted)}
.preview-results {min-width:0}
.preview-tabs {display:flex; gap:20px; border-bottom:1px solid var(--line); font-size:11px; color:var(--ink-dim); white-space:nowrap; overflow:auto}
.preview-tabs span {padding:0 0 12px}
.preview-tabs .selected {color:var(--ink); border-bottom:1px solid var(--accent)}
.preview-metrics {display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:20px 0}
.preview-metrics>div>span {display:block; font-size:10px; color:var(--ink-dim); margin-bottom:8px}
.preview-metrics strong {font:400 24px/1.2 var(--mono); letter-spacing:-1px; font-variant-numeric:tabular-nums}
.preview-metrics strong span {font-size:14px; color:var(--ink-dim)}
.preview-table-wrap {overflow:auto}
.preview-table {width:100%; border-collapse:collapse; font-size:11px; text-align:left; white-space:nowrap}
.preview-table th {color:var(--ink-dim); font-weight:400; padding:9px 0; border-bottom:1px solid var(--line)}
.preview-table td {padding:10px 12px 10px 0; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:10px}
.preview-table tr:last-child td {border:0}
.preview-table th:last-child,.preview-table td:last-child {text-align:right; padding-right:0}
.result-pass {color:var(--ok)}
.result-borderline {color:var(--warn)}
.preview-foot {display:flex; justify-content:space-between; gap:20px; color:var(--ink-muted); border-top:1px solid var(--line); padding:14px 0; margin-top:24px; font-size:10px}
.preview-foot>span:last-child {font-family:var(--mono); white-space:nowrap}
.workflow {display:grid; grid-template-columns:1fr 1.2fr; margin-top:64px; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.workflow-heading {padding:36px 32px 36px 0; border-right:1px solid var(--line)}
.workflow h2 {font-size:27px; line-height:1.3; letter-spacing:-.8px; font-weight:500; margin:0 0 28px}
.workflow h2 span {color:var(--ink-dim)}
.workflow-steps article {display:flex; gap:24px; padding:28px 0 28px 32px; border-bottom:1px solid var(--line)}
.workflow-steps article:last-child {border:0}
.step-number {font:12px var(--mono); color:var(--accent); padding-top:4px}
.workflow h3 {font-size:16px; font-weight:500; margin:0 0 8px}
.workflow p:not(.eyebrow) {font-size:13px; line-height:1.7; margin:0; color:var(--ink-dim); max-width:440px}
.closing {padding:38px 0; display:flex; justify-content:space-between; align-items:center; gap:24px}
.closing .eyebrow {margin-bottom:12px}
.closing h2 {font-size:26px; font-weight:500; letter-spacing:-.8px; margin:0}
.site-footer {padding:24px 0; border-top:1px solid var(--line); display:flex; gap:24px; justify-content:space-between; color:var(--ink-dim); font-size:11px}
.footer-muted {color:var(--ink-muted); margin-left:12px}
dialog {width:min(420px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:32px; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg)}
dialog::backdrop {background:#0009}
.dialog-close {position:absolute; right:12px; top:12px; width:32px; height:32px; border:0; border-radius:5px; background:transparent; color:var(--ink-dim); font-size:23px}
.dialog-close:hover {background:var(--panel-2)}
dialog .eyebrow {margin-bottom:22px}
dialog h2 {font-size:25px; font-weight:550; letter-spacing:-.6px; margin:0 0 10px}
.auth-description {font-size:13px; line-height:1.6; color:var(--ink-dim); margin:0 0 24px}
dialog label {display:block; font-size:12px; margin:16px 0 8px}
dialog input {width:100%; height:42px; border:1px solid var(--line-strong); border-radius:5px; padding:10px 12px; background:var(--bg); color:var(--ink); font-size:14px}
dialog form>.button {width:100%; background:var(--accent); color:var(--button-ink)}
.auth-error {font-size:13px; line-height:1.5; color:var(--bad); min-height:20px; margin:12px 0}
.auth-hint {font-size:12px; color:var(--ink-dim); margin:8px 0}
.auth-toggle {width:100%; padding:14px 0 0; background:none; border:0; color:var(--ink-dim); font-size:13px}
.auth-toggle:hover {color:var(--ink)}
@media(min-width:1500px) {.hero{padding-top:80px}}
@media(max-width:1050px) {.preview-sidebar{display:none}.preview-layout{grid-template-columns:1fr}.hero-bottom{align-items:flex-start}.hero-bottom p{max-width:450px}.desktop-break{display:none}.hero h1{font-size:48px}.site-header{gap:32px}}
@media(max-width:760px) {
  .site-header,.site-main,.site-footer{width:calc(100% - 40px)}
  .site-header{height:auto;min-height:70px;flex-wrap:wrap;gap:0;padding:16px 0}
  .site-actions{gap:8px}.site-nav{order:3;width:100%;gap:24px;margin-top:18px;font-size:12px}
  .hero{padding:40px 0 28px}.hero>.eyebrow{font-size:9px;letter-spacing:.05em;max-width:300px;line-height:1.8}
  .hero h1{font-size:38px;letter-spacing:-1.6px}.hero-bottom{display:block}.hero-bottom p{font-size:14px}.hero-actions{margin-top:24px;flex-direction:row;align-items:center;gap:20px;flex-wrap:wrap}
  .preview-content{padding:20px 18px 0}.preview-heading{align-items:flex-start;flex-direction:column;gap:10px;margin-bottom:22px}.preview-top{padding:0 16px}.preview-context{display:none}
  .preview-analysis{grid-template-columns:1fr;gap:16px}.preview-parameters{padding:0 0 16px;border:0;border-bottom:1px solid var(--line)}
  .preview-parameters dl{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;margin:6px 0}.preview-parameter-note{display:none}
  .preview-tabs{gap:22px}.preview-foot>span:last-child{display:none}.preview-foot{line-height:1.5}
  .workflow{grid-template-columns:1fr;margin-top:36px}.workflow-heading{border-right:0;padding:28px 0 24px;border-bottom:1px solid var(--line)}.workflow h2{font-size:25px;margin-bottom:20px}.workflow-steps article{padding:24px 0;gap:20px}
  .closing{align-items:flex-start;flex-direction:column;padding:30px 0}.closing h2{font-size:24px}.site-footer{line-height:1.7}.footer-muted{display:none}
}
@media(max-width:390px) {.hero h1{font-size:33px}.preview-metrics strong{font-size:21px}.site-nav{gap:18px}.preview-label{font-size:10px}}