:root{
  --bg:#f6f7fb; --panel:#ffffff; --text:#18212f; --muted:#667085; --line:#e4e7ec;
  --accent:#4f46e5; --accent2:#3730a3; --soft:#eef2ff; --danger:#b42318;
  --success:#067647; --warn:#b54708; --shadow:0 12px 34px rgba(16,24,40,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{min-height:100vh}
a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}
.shell{max-width:1480px;margin:0 auto;padding:28px}
.hero{display:flex;justify-content:space-between;gap:28px;align-items:flex-start;margin-bottom:20px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
h1{font-size:clamp(32px,4vw,56px);line-height:1.02;margin:7px 0 12px;letter-spacing:-.035em}
.hero p{max-width:850px;color:var(--muted);font-size:17px;line-height:1.6;margin:0}
.version{white-space:nowrap;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:9px 13px;font-size:13px;color:var(--muted)}
.warning{background:#fffaeb;border:1px solid #fedf89;color:#7a2e0e;border-radius:14px;padding:12px 16px;margin:18px 0 22px;font-size:14px}
.architecture{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:10px;margin:18px 0 24px}
.arch-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.arch-box b{display:block;margin-bottom:3px}
.arch-box span{font-size:13px;color:var(--muted)}
.arrow{color:var(--muted);font-size:24px}
.tabs{display:flex;gap:7px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow:auto}
.tab{border:0;background:transparent;padding:11px 14px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.tab.active{color:var(--accent2);border-color:var(--accent)}
.panel{display:none}
.panel.active{display:block}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px}
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-bottom:16px}
.field{display:flex;flex-direction:column;gap:6px;min-width:260px;flex:1}
label{font-size:13px;font-weight:700}
select,textarea,button{font:inherit}
select{width:100%;border:1px solid var(--line);background:white;border-radius:10px;padding:10px 12px;color:var(--text)}
button.primary{border:0;background:var(--accent);color:white;border-radius:10px;padding:10px 18px;font-weight:750;cursor:pointer}
button.primary:hover{background:var(--accent2)}
button.secondary{border:1px solid var(--line);background:white;color:var(--text);border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.editor-block{min-width:0}
.editor-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.editor-title h3{font-size:14px;margin:0}
small.note{color:var(--muted)}
pre,textarea.code{width:100%;min-height:360px;margin:0;border:1px solid var(--line);border-radius:12px;background:#0f172a;color:#e2e8f0;padding:14px;font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:12.5px;line-height:1.55;overflow:auto;white-space:pre;tab-size:2}
textarea.code{resize:vertical}
.result-grid{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:10px;margin:18px 0}
.metric{background:var(--soft);border:1px solid #c7d2fe;border-radius:13px;padding:12px}
.metric span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px}
.metric b{font-size:14px;word-break:break-word}
.bad{color:var(--danger)} .good{color:var(--success)} .warn{color:var(--warn)}
.output-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.output-grid pre{min-height:300px;background:#101828}
.profile-grid{display:grid;grid-template-columns:280px 1fr;gap:16px}
.profile-list{display:flex;flex-direction:column;gap:8px}
.profile-btn{border:1px solid var(--line);background:white;border-radius:10px;padding:10px;text-align:left;cursor:pointer}
.profile-btn.active{border-color:var(--accent);background:var(--soft)}
.arch-copy{max-width:900px}
.arch-copy h2{font-size:28px;margin-top:0}
.arch-copy h3{margin-top:25px}
.arch-copy p,.arch-copy li{color:#475467;line-height:1.65}
.integrity{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.integrity .case{border:1px solid var(--line);border-radius:14px;padding:14px}
.integrity .case h3{margin:0 0 7px;font-size:15px}
.integrity .case p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
footer{margin:28px 0 12px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between}
@media(max-width:900px){
  .shell{padding:18px}.hero{display:block}.version{display:inline-block;margin-top:12px}
  .architecture{grid-template-columns:1fr}.arrow{transform:rotate(90deg);text-align:center}
  .grid2,.output-grid,.profile-grid,.integrity{grid-template-columns:1fr}
  .result-grid{grid-template-columns:1fr 1fr}
}