:root { --ink:#17252a; --muted:#637278; --gold:#c9962d; --gold-soft:#f7f0e2; --teal:#176b69; --teal-soft:#e8f3f1; --line:#d9e3e1; --white:#fff; --shadow:0 12px 28px rgba(23,37,42,.08); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#fbfcfb; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.topbar { height:64px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; background:var(--white); border-bottom:1px solid var(--line); }
.brand { display:flex; gap:12px; align-items:center; color:var(--ink); }.wordmark { color:var(--teal); font-family:"Avenir Next", "Helvetica Neue", Inter, ui-sans-serif, system-ui, sans-serif; font-size:22px; font-weight:750; letter-spacing:-.07em; line-height:1; }.wordmark-product { padding-left:12px; border-left:1px solid var(--line); color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.02em; }.mode { color:var(--muted); font-size:10px; letter-spacing:.09em; }.dot { width:7px; height:7px; border-radius:50%; background:#4bb38f; display:inline-block; margin:0 6px; }.topbar-actions { display:flex; align-items:center; gap:18px; }.text-button { border:0; background:transparent; color:var(--teal); font:inherit; font-size:11px; font-weight:750; cursor:pointer; padding:7px 0; }.text-button:hover { color:#0d4f4d; text-decoration:underline; }
.shell { width:min(1160px, 90vw); margin:0 auto; padding:50px 0 34px; }.hero { display:flex; justify-content:space-between; gap:40px; align-items:flex-end; margin-bottom:30px; }.kicker { margin:0 0 8px; color:var(--teal); font-size:11px; font-weight:800; letter-spacing:.12em; }.hero h1 { margin:0; max-width:710px; color:var(--ink); font-size:clamp(34px, 5vw, 62px); line-height:1.03; letter-spacing:-.045em; }.lede { max-width:700px; margin:18px 0 0; color:var(--muted); font-size:17px; line-height:1.55; }.hero-note { width:235px; padding:18px; color:var(--teal); background:var(--teal-soft); border-left:3px solid var(--gold); font-size:13px; line-height:1.5; }
.panel { background:var(--white); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:24px; }.controls { margin-bottom:26px; }.control-title,.section-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }.controls h2,.panel h2 { margin:0; font-size:22px; letter-spacing:-.02em; }.controls p { margin:6px 0 17px; color:var(--muted); }.button { border:0; border-radius:10px; padding:11px 16px; font:inherit; font-size:13px; font-weight:750; cursor:pointer; transition:transform .15s, box-shadow .15s, opacity .15s; }.button:hover { transform:translateY(-1px); box-shadow:0 6px 14px rgba(23,37,42,.13); }.button:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }.primary { background:var(--teal); color:white; }.secondary { background:var(--gold); color:#fff; }
.drop { min-height:86px; display:flex; align-items:center; justify-content:center; gap:15px; border:1.5px dashed #b9ccca; border-radius:12px; background:#fcfefd; color:var(--teal); cursor:pointer; }.drop input { display:none; }.drop span { display:block; color:var(--muted); font-size:12px; margin-top:3px; }.drop-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--teal-soft); color:var(--teal); font-size:20px; }.drop.drag { border-color:var(--gold); background:var(--gold-soft); }.thresholds { display:flex; align-items:end; gap:18px; flex-wrap:wrap; margin-top:17px; }.thresholds label { color:var(--muted); font-size:12px; font-weight:700; }.thresholds label span { display:block; margin-top:5px; color:var(--ink); font-weight:500; }.thresholds input { width:105px; padding:9px 8px; border:1px solid var(--line); border-radius:8px; font:inherit; }
.pilot-notice { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 26px; padding:14px 17px; border:1px solid #cce3df; border-radius:12px; background:#f4fbf9; }.pilot-notice > div { display:flex; align-items:flex-start; gap:11px; }.pilot-notice strong { display:block; color:var(--teal); font-size:12px; }.pilot-notice p { max-width:840px; margin:3px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }.notice-icon { display:grid; place-items:center; flex:0 0 auto; width:23px; height:23px; border-radius:50%; background:var(--teal); color:#fff; font-size:13px; font-weight:900; }.small-button { border:1px solid var(--teal); color:var(--teal); background:#fff; border-radius:8px; padding:7px 10px; font:inherit; font-size:11px; font-weight:750; cursor:pointer; white-space:nowrap; }.small-button:hover { background:var(--teal-soft); }
.hidden { display:none; }.summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:18px; }.summary-card { padding:18px; border:1px solid var(--line); border-radius:13px; background:white; }.summary-card .value { font-size:30px; font-weight:800; letter-spacing:-.04em; color:var(--teal); }.summary-card .label { margin-top:3px; color:var(--muted); font-size:12px; }.summary-card.alert { background:var(--gold-soft); border-color:#e9d5a4; }.summary-card.alert .value { color:#9a6a0b; }.workspace-grid { display:grid; grid-template-columns:1.35fr .85fr; gap:18px; align-items:start; }.muted { color:var(--muted); font-size:13px; line-height:1.5; }.tag { padding:6px 9px; color:var(--teal); background:var(--teal-soft); border-radius:99px; font-size:11px; font-weight:800; }.area { margin-top:15px; padding:15px; border:1px solid var(--line); border-radius:12px; background:#fff; }.area-row { display:flex; justify-content:space-between; align-items:center; gap:10px; }.area-name { font-weight:800; }.area-meta { color:var(--muted); font-size:12px; margin-top:4px; }.score { font-size:23px; font-weight:800; color:var(--teal); }.score small { color:var(--muted); font-size:10px; font-weight:500; }.chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }.chip { padding:5px 8px; border-radius:99px; background:#f1f5f4; color:var(--muted); font-size:11px; }.chip.high { background:#fff0d6; color:#8c6110; }.area-actions { margin-top:13px; display:flex; justify-content:space-between; align-items:center; }.recommend { font-size:11px; font-weight:800; letter-spacing:.05em; }.recommend.required { color:#aa5a15; }.recommend.recommended { color:#8c7610; }.recommend.observe { color:var(--teal); }.small-button { border:1px solid var(--teal); color:var(--teal); background:#fff; border-radius:8px; padding:7px 10px; font:inherit; font-size:11px; font-weight:750; cursor:pointer; }
.plan-panel { position:sticky; top:18px; }.plan-panel h2 { margin:0 0 9px; }.plan-list { margin:17px 0 0; padding:0; list-style:none; }.plan-list li { padding:10px 0; border-top:1px solid var(--line); font-size:12px; line-height:1.45; }.plan-list strong { display:block; color:var(--teal); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }.copy-area { width:100%; min-height:100px; resize:vertical; padding:10px; margin-top:15px; border:1px solid var(--line); border-radius:8px; color:var(--muted); font:11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }.timeline { margin-top:18px; }.timeline-grid { display:grid; grid-template-columns:repeat(5,1fr); margin-top:19px; }.timeline-grid > div { padding:0 14px; border-left:1px solid var(--line); }.timeline-grid > div:first-child { padding-left:0; border-left:0; }.timeline-grid span { display:block; color:var(--gold); font-size:12px; font-weight:900; }.timeline-grid strong { display:block; margin-top:6px; font-size:14px; }.timeline-grid p { color:var(--muted); font-size:12px; line-height:1.45; }.pilot-cta { display:flex; justify-content:space-between; align-items:center; gap:25px; margin-top:18px; padding:22px 25px; border-radius:16px; background:linear-gradient(110deg, #176b69, #2b8981); color:white; }.pilot-cta .kicker { color:#e9d5a4; }.pilot-cta h2 { margin:0; max-width:760px; font-size:23px; letter-spacing:-.025em; }.pilot-cta p { max-width:780px; margin:7px 0 0; color:#d6ebe8; font-size:13px; line-height:1.45; }.pilot-cta .button { background:var(--gold); white-space:nowrap; }footer { margin-top:26px; color:var(--muted); font-size:11px; text-align:center; }
@media (max-width: 850px) { .hero { display:block; }.hero-note { width:auto; margin-top:20px; }.summary-grid { grid-template-columns:repeat(2,1fr); }.workspace-grid { grid-template-columns:1fr; }.plan-panel { position:static; }.timeline-grid { grid-template-columns:1fr; }.timeline-grid > div,.timeline-grid > div:first-child { padding:12px 0; border-left:0; border-top:1px solid var(--line); }.timeline-grid > div:first-child { border-top:0; }.pilot-cta { display:block; }.pilot-cta .button { margin-top:15px; } }
@media (max-width: 520px) { .topbar { padding:0 5vw; }.wordmark-product,.mode { display:none; }.topbar-actions { gap:0; }.shell { width:90vw; padding-top:35px; }.control-title { display:block; }.control-title .button { margin-bottom:18px; }.thresholds { display:block; }.thresholds label { display:block; margin-top:10px; }.thresholds .button { margin-top:16px; width:100%; }.summary-grid { grid-template-columns:1fr 1fr; }.panel { padding:18px; }.pilot-notice { align-items:flex-start; flex-direction:column; }.onboarding-modal,.boundary-modal { padding:22px; }.onboarding-grid,.choice-grid { grid-template-columns:1fr; } }
.modal-backdrop { position:fixed; z-index:10; inset:0; display:grid; place-items:center; padding:20px; background:rgba(23,37,42,.42); backdrop-filter:blur(3px); }.modal-backdrop[hidden] { display:none; }.onboarding-modal,.boundary-modal { width:min(620px, 100%); max-height:min(700px, calc(100vh - 40px)); overflow:auto; padding:28px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 24px 70px rgba(23,37,42,.22); }.boundary-modal { width:min(570px, 100%); }.onboarding-top { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }.onboarding-top h2 { margin:0; color:var(--ink); font-size:28px; line-height:1.1; letter-spacing:-.035em; }.close-button { border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:26px; line-height:1; padding:0 0 4px 8px; }.close-button:hover { color:var(--ink); }.progress { display:flex; gap:6px; margin:22px 0 25px; }.progress span { display:block; height:4px; flex:1; border-radius:99px; background:#e6eeec; }.progress span.active { background:var(--gold); }.onboarding-step h3 { margin:0 0 9px; color:var(--teal); font-size:18px; }.onboarding-step p { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }.onboarding-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:19px; }.onboarding-grid > div { padding:14px; border-radius:11px; background:var(--teal-soft); }.onboarding-grid > div:last-child { background:var(--gold-soft); }.onboarding-grid strong,.onboarding-grid span { display:block; }.onboarding-grid strong { margin-bottom:4px; color:var(--teal); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }.onboarding-grid span { color:var(--muted); font-size:12px; line-height:1.45; }.plain-list { margin:17px 0 0; padding-left:19px; color:var(--muted); font-size:13px; line-height:1.7; }.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }.choice-card { padding:15px; text-align:left; border:1px solid var(--line); border-radius:11px; background:#fff; cursor:pointer; }.choice-card:hover,.choice-card.selected { border-color:var(--teal); background:var(--teal-soft); }.choice-card strong,.choice-card span { display:block; }.choice-card strong { color:var(--teal); font-size:13px; }.choice-card span { margin-top:6px; color:var(--muted); font-size:12px; line-height:1.45; }.mode-note { margin-top:12px !important; color:var(--teal) !important; font-size:12px !important; font-weight:700; }.check-row { display:flex; gap:10px; align-items:flex-start; margin-top:17px; color:var(--muted); font-size:13px; line-height:1.45; cursor:pointer; }.check-row input { width:17px; height:17px; margin-top:1px; accent-color:var(--teal); }.onboarding-actions { display:flex; align-items:center; gap:13px; margin-top:28px; }.onboarding-actions .ghost { color:var(--teal); background:#fff; border:1px solid var(--line); }.onboarding-actions .ghost:disabled { visibility:hidden; }.step-counter { flex:1; color:var(--muted); text-align:center; font-size:11px; }.button.ghost:hover { background:var(--teal-soft); }.boundary-box { display:grid; gap:5px; margin:18px 0; padding:14px; border-left:3px solid var(--gold); border-radius:0 10px 10px 0; background:var(--gold-soft); }.boundary-box strong { color:#8c6110; font-size:12px; }.boundary-box span,.modal-footnote { color:var(--muted); font-size:12px; line-height:1.5; }.modal-footnote { margin-bottom:19px; }