:root { color-scheme: light; --ink:#16263a; --muted:#5a6b80; --line:#dbe4ec; --paper:#fff; --accent:#315ed3; --good:#147c68; --warn:#a15b14; }
* { box-sizing:border-box; }
body { margin:0; background:linear-gradient(145deg,#f4f8fd,#eaf3f0); color:var(--ink); font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; }
.shell { width:min(1100px,calc(100% - 32px)); margin:42px auto 58px; }
.hero { padding:28px 2px 24px; }
.eyebrow { color:var(--accent); font-size:.72rem; letter-spacing:.18em; font-weight:800; }
h1 { font-size:clamp(2rem,4vw,3.35rem); line-height:1.14; margin:12px 0 14px; letter-spacing:-.035em; max-width:900px; }
.hero p { color:var(--muted); max-width:780px; margin:0 0 18px; }
.hero-links { display:flex; flex-wrap:wrap; gap:18px; font-size:.9rem; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.notice { padding:13px 17px; background:#fff7e8; border:1px solid #f2dcac; border-radius:12px; color:#704b1c; margin-bottom:18px; }
.grid { display:grid; grid-template-columns:1.12fr .88fr; gap:18px; align-items:start; }
.panel { background:var(--paper); border:1px solid var(--line); border-radius:18px; box-shadow:0 9px 28px #1b3c5d0b; padding:25px; }
.section-heading { display:flex; align-items:center; gap:11px; margin-bottom:15px; }
.step { color:var(--accent); background:#e9efff; border-radius:9px; padding:4px 8px; font-size:.75rem; font-weight:800; }
h2 { font-size:1.18rem; margin:0; }
label { display:block; font-weight:650; margin:16px 0 7px; }
label small { display:block; color:var(--muted); font-size:.79rem; font-weight:400; }
textarea,input[type=text] { width:100%; border:1px solid #c8d5e2; border-radius:11px; padding:10px 12px; color:var(--ink); background:#fbfdff; font:inherit; outline:none; resize:vertical; }
textarea:focus,input[type=text]:focus { border-color:var(--accent); box-shadow:0 0 0 3px #315ed329; }
.examples { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:15px; font-size:.8rem; color:var(--muted); }
button { cursor:pointer; font:inherit; }
.example { border:1px solid #cbd8e9; color:#31527d; background:#f4f8fe; border-radius:999px; padding:4px 10px; font-size:.78rem; }
.example:hover { background:#e8f1ff; }
.hint { color:var(--muted); font-size:.83rem; margin:4px 0 14px; }
.check { display:flex; align-items:flex-start; gap:10px; margin:12px 0; font-weight:500; line-height:1.35; cursor:pointer; }
.check input { margin:3px 0 0; width:17px; height:17px; accent-color:var(--accent); flex:none; }
.gate-status { margin:20px 0 16px; padding:13px 14px; border:1px solid var(--line); border-radius:11px; background:#f7f9fb; font-size:.89rem; }
.gate-status.ok { border-color:#b5d9d0; background:#ecf8f4; color:#116b59; }
.gate-status.skip { border-color:#eed7ae; background:#fff8ed; color:#855313; }
.threshold-label { display:flex; justify-content:space-between; margin-top:19px; }
input[type=range] { width:100%; accent-color:var(--accent); }
.primary { width:100%; border:0; border-radius:11px; color:white; background:var(--accent); font-weight:700; padding:12px 18px; margin-top:7px; }
.primary:hover:not(:disabled) { background:#244caf; }
.primary:disabled { opacity:.45; cursor:not-allowed; }
.result-panel { margin-top:18px; min-height:190px; }
.empty { color:var(--muted); margin:0; }
.answer { font-size:1.45rem; font-weight:760; margin:3px 0 2px; }
.meta { color:var(--muted); font-size:.85rem; }
.badge { display:inline-block; border-radius:999px; font-size:.73rem; font-weight:750; padding:4px 9px; margin-bottom:10px; }
.badge.ok { background:#e7f7f1; color:var(--good); }
.badge.warn { background:#fff1dc; color:var(--warn); }
.prob { margin:11px 0; }
.prob-head { display:flex; justify-content:space-between; gap:12px; font-size:.87rem; }
.bar { height:8px; border-radius:99px; background:#e8edf4; overflow:hidden; margin-top:4px; }
.fill { height:100%; border-radius:99px; background:var(--accent); }
footer { margin-top:23px; color:var(--muted); font-size:.8rem; }
footer p { margin:6px 0; }
@media(max-width:760px) { .shell{margin:22px auto 36px;} .grid{grid-template-columns:1fr;} .panel{padding:19px;} }