:root { --brand:#6c4ef6; --brand-dark:#4027b5; --cyan:#08a8df; --green:#4ba900; --coral:#ff8057; --ink:#172033; --muted:#5c667a; --line:#dbe1eb; --surface:#fff; --soft:#f6f7fb; --radius:16px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--soft); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; }
button,input { font:inherit; }
a { color:inherit; }
.skip-link { position:fixed; z-index:10; left:1rem; top:-5rem; background:#fff; padding:.75rem 1rem; border:2px solid var(--brand); }
.skip-link:focus { top:1rem; }
.topbar { height:72px; display:flex; align-items:center; gap:2rem; padding:0 2rem; border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0; z-index:4; }
.brand { display:flex; align-items:center; gap:.65rem; font-size:1.2rem; font-weight:800; text-decoration:none; color:var(--brand-dark); }
.brand-mark { width:36px; height:36px; border-radius:50% 50% 50% 8px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--brand),var(--cyan)); }
.project-context { display:flex; gap:.75rem; align-items:center; margin-left:auto; font-size:.9rem; }
.icon-button { display:none; min-width:44px; min-height:44px; border:1px solid var(--line); border-radius:10px; background:white; }
.shell-grid { min-height:calc(100vh - 72px); display:grid; grid-template-columns:240px minmax(0,1fr); }
.sidebar { padding:1.5rem 1rem; border-right:1px solid var(--line); background:var(--surface); }
.sidebar a { display:block; padding:.75rem 1rem; border-radius:10px; text-decoration:none; margin:.15rem 0; }
.sidebar a:hover { background:var(--soft); }
.sidebar a[aria-current="page"] { color:var(--brand-dark); background:#eeeaff; font-weight:700; }
.nav-label { padding:.6rem 1rem .2rem; color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
main { width:100%; max-width:1180px; margin:0 auto; padding:3rem clamp(1.25rem,4vw,4rem) 5rem; }
.page-heading > p { color:var(--brand-dark); font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:.78rem; }
h1 { max-width:780px; font-size:clamp(2rem,4vw,3.35rem); line-height:1.05; margin:.4rem 0 1rem; letter-spacing:-.04em; }
.lede { max-width:760px; color:var(--muted); font-size:1.08rem; line-height:1.65; }
.page-content { margin-top:2rem; }
.progress { height:6px; background:#e9e7f5; border-radius:10px; margin-top:2rem; overflow:hidden; }
.progress span { display:block; height:100%; background:linear-gradient(90deg,var(--brand),var(--cyan)); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; box-shadow:0 8px 30px rgb(29 34 51 / 5%); }
.card h2 { font-size:1.05rem; margin:0 0 .75rem; }
.card p { line-height:1.55; }
.hero-grid,.two-column,.choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.choice-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.button { min-height:44px; border:1px solid var(--brand); border-radius:10px; padding:.72rem 1rem; background:var(--brand); color:#fff; font-weight:750; cursor:pointer; }
.button:hover { background:var(--brand-dark); }
.button-secondary { background:transparent; color:var(--brand-dark); }
.button-secondary:hover { background:#eeeaff; }
button:focus-visible,a:focus-visible,input:focus-visible,.node:focus-visible { outline:3px solid #006fe6; outline-offset:3px; }
.section-title { margin-top:2.5rem; }
.journey { display:grid; grid-template-columns:repeat(6,1fr); list-style:none; padding:0; gap:.6rem; }
.journey li { display:grid; gap:.5rem; color:var(--muted); font-size:.85rem; }
.journey span { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#eeeaff; color:var(--brand-dark); font-weight:800; }
.dropzone { min-height:220px; border:2px dashed #ae9ef5; border-radius:14px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.75rem; text-align:center; background:#faf9ff; }
.privacy-line { color:#347b12; font-weight:700; }
.clean-list { list-style:none; padding:0; margin:.5rem 0; }
.clean-list li { padding:.65rem 0; border-bottom:1px solid #edf0f5; line-height:1.45; }
.clean-list li:last-child { border:0; }
.badge { display:inline-flex; padding:.25rem .55rem; border-radius:999px; font-size:.72rem; font-weight:800; background:#edf0f5; }
.badge-success { color:#246e08; background:#e9f7e2; }.badge-warning { color:#805200; background:#fff3d6; }.badge-info { color:#075985; background:#e0f4ff; }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1rem; }
.metric { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem; }
.metric span { display:block; color:var(--muted); font-size:.85rem; }.metric strong { display:block; font-size:1.9rem; margin-top:.35rem; }
.actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.25rem; }
.muted { color:var(--muted); }
.sem-layout { display:grid; grid-template-columns:180px minmax(420px,1fr) 220px; gap:1rem; }
.sem-canvas { position:relative; min-height:360px; background:radial-gradient(#d7dce5 1px,transparent 1px),#fff; background-size:20px 20px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.sem-canvas svg { position:absolute; inset:0; width:100%; height:100%; }.sem-canvas path { stroke:var(--brand); stroke-width:3; fill:none; }.sem-canvas text { fill:var(--ink); font-weight:800; }
.node { position:absolute; z-index:2; width:150px; padding:1rem; text-align:center; background:white; border:2px solid var(--brand); border-radius:50%; box-shadow:0 5px 18px #6c4ef630; }
.node span { display:block; margin-top:.4rem; color:var(--muted); font-size:.75rem; }.node-a { left:8%; top:35%; }.node-b { right:8%; top:35%; }
.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; } caption { text-align:left; font-weight:700; padding:.5rem 0; } th,td { padding:.8rem; border-bottom:1px solid var(--line); text-align:left; }
.callout { border-left:4px solid var(--cyan); background:#effaff; padding:1rem; }
.report-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:1rem; }.report-layout article { display:grid; gap:1rem; }.report-nav { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1rem; align-self:start; position:sticky; top:90px; }
label { display:grid; gap:.5rem; font-weight:700; } input[type="email"] { min-height:44px; padding:.7rem; border:1px solid var(--line); border-radius:9px; }.toggle { display:flex; align-items:center; gap:.7rem; }
.toast { position:fixed; right:1.2rem; bottom:1.2rem; max-width:360px; background:var(--ink); color:white; border-radius:10px; padding:.8rem 1rem; box-shadow:0 10px 30px #0003; }.toast:empty { display:none; }
.high-contrast { --ink:#000; --muted:#222; --line:#707070; --brand-dark:#250092; }
@media(max-width:900px){.choice-grid{grid-template-columns:1fr}.sem-layout{grid-template-columns:1fr}.sem-canvas{min-height:320px}.journey{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.topbar{padding:0 1rem}.project-context{display:none}.icon-button{display:block;margin-left:auto}.shell-grid{display:block}.sidebar{display:none;position:fixed;z-index:3;top:72px;right:0;bottom:0;width:260px;box-shadow:-10px 0 30px #0002}.sidebar-open{display:block}.hero-grid,.two-column,.metric-grid,.report-layout{grid-template-columns:1fr}.report-nav{position:static}main{padding-top:2rem}.journey{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media(forced-colors:active){.button,.node,.card{border:1px solid ButtonText}}