:root { --ink:#0f172a; --muted:#475569; --paper:#f7f7f5; --surface:#ffffff; --line:#e4e1d9; --navy:#0b0b0c; --teal:#d4a72c; --teal-pale:#fbf5df; --gold:#d4a72c; --dark-gold:#b88916; --wrong:#bd4b4b; --violet:#d4a72c; --radius:16px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Noto Sans",sans-serif; line-height:1.55; }
button { font:inherit; }
.app-shell { max-width:1440px; margin:auto; padding:0 28px 48px; }
.topbar { min-height:82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { color:var(--navy); display:flex; align-items:center; gap:11px; text-decoration:none; font-family:"Fira Sans",sans-serif; font-weight:700; letter-spacing:-.02em; }
.brand em { color:var(--dark-gold); font-style:normal; font-weight:500; }
.brand-copy { display:grid; line-height:1.15; }
.brand-copy small { color:#80745a; font-family:"Noto Sans",sans-serif; font-size:10px; font-weight:600; letter-spacing:0; margin-top:3px; }
.brand-mark { background:var(--navy); border-radius:9px; box-shadow:0 5px 13px rgba(11,11,12,.17); height:38px; object-fit:cover; width:38px; }
.prototype-tag { color:var(--muted); font-size:13px; }
.hero-banner { align-items:center; background:radial-gradient(circle at 78% 20%,rgba(212,167,44,.22),transparent 22rem),linear-gradient(125deg,#070708,#101012 63%,#1e1910); border-radius:0 0 25px 25px; color:#fff; display:grid; gap:34px; grid-template-columns:minmax(0,1.3fr) minmax(250px,.7fr); margin:0 -12px 30px; min-height:410px; overflow:hidden; padding:62px 8%; position:relative; }
.hero-banner::after { background:linear-gradient(90deg,transparent,rgba(212,167,44,.22),transparent); content:""; height:1px; opacity:.8; position:absolute; right:0; top:78px; width:42%; }
.hero-copy { position:relative; z-index:1; }
.hero-banner .eyebrow { color:#e8c66d; }
.hero-banner h1 { color:#fff; font-size:clamp(40px,5vw,66px); margin:0; max-width:700px; }
.hero-banner h1 span { color:var(--gold); }
.hero-banner p:not(.eyebrow) { color:#d2d0cb; font-size:18px; margin:18px 0 0; max-width:630px; }
.hero-points { display:flex; flex-wrap:wrap; gap:9px; margin-top:27px; }
.hero-points span { border:1px solid rgba(255,255,255,.18); border-radius:99px; color:#e9e7e1; font-size:13px; padding:7px 10px; }
.hero-cta { color:#17130a; background:var(--gold); border-radius:8px; display:inline-flex; font-family:"Fira Sans",sans-serif; font-weight:700; gap:10px; margin-top:28px; padding:13px 16px; text-decoration:none; transition:background .18s ease,transform .18s ease; }
.hero-cta:hover { background:#e7c15b; transform:translateY(-2px); }
.hero-cta span { font-size:20px; line-height:.8; }
.hero-logo-panel { align-items:center; display:flex; justify-content:center; min-height:310px; }
.hero-logo-panel img { border:1px solid rgba(212,167,44,.42); border-radius:16px; box-shadow:0 18px 35px rgba(0,0,0,.3); display:block; max-width:100%; object-fit:cover; width:100%; }
.intro { background:#fff; border:1px solid var(--line); border-radius:var(--radius); display:flex; justify-content:space-between; gap:36px; align-items:end; margin:0 0 30px; padding:38px 7%; box-shadow:0 8px 22px rgba(11,11,12,.04); }
.eyebrow { color:var(--dark-gold); font-family:"Fira Sans",sans-serif; font-size:12px; font-weight:700; letter-spacing:.11em; margin:0 0 8px; text-transform:uppercase; }
h1,h2,h3 { font-family:"Fira Sans",sans-serif; line-height:1.14; letter-spacing:-.028em; }
h1 { font-size:clamp(38px,5vw,62px); margin:0; color:var(--navy); }
.intro h1 { color:var(--navy); }
.intro .lede { color:var(--muted); }
.lede { color:var(--muted); font-size:18px; max-width:680px; margin:16px 0 0; }
.case-meta { display:flex; flex-wrap:wrap; gap:9px; max-width:310px; }
.case-meta span { background:#fbf7eb; border:1px solid #ead79d; border-radius:99px; color:#775b13; font-size:13px; padding:7px 10px; white-space:nowrap; }
.lab-catalog { background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 8px 24px rgba(11,11,12,.05); margin:0 0 28px; padding:27px 7%; }
.lab-catalog h2 { color:var(--navy); font-size:28px; margin:0 0 18px; }
.lab-cards { display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.lab-card { background:#fff; border:1px solid #dde2e8; border-radius:14px; cursor:pointer; display:flex; flex-direction:column; align-items:flex-start; min-height:286px; padding:30px; text-align:left; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.lab-card:hover,.lab-card.selected { border-color:var(--gold); box-shadow:0 14px 28px rgba(11,11,12,.09); transform:translateY(-4px); }
.lab-icon { align-items:center; background:var(--navy); border-radius:11px; display:flex; height:55px; justify-content:center; margin-bottom:28px; width:55px; }
.lab-icon svg { fill:none; height:25px; stroke:var(--gold); stroke-linecap:round; stroke-linejoin:round; stroke-width:1.9; width:25px; }
.lab-domain { color:var(--dark-gold); font-family:"Fira Sans",sans-serif; font-size:11px; font-weight:700; letter-spacing:.07em; margin-bottom:5px; text-transform:uppercase; }
.lab-card strong { color:var(--navy); font-family:"Fira Sans",sans-serif; font-size:23px; line-height:1.16; }
.lab-card small { color:#526581; font-size:16px; line-height:1.55; margin-top:13px; }
.lab-explore { color:var(--navy); font-family:"Fira Sans",sans-serif; font-size:15px; font-weight:700; margin-top:auto; padding-top:24px; }
.lab-explore b { color:var(--dark-gold); font-size:20px; font-weight:400; margin-left:4px; vertical-align:-1px; }
.mode-bar { align-items:center; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; margin-top:22px; padding-top:18px; }
.mode-bar span:first-child { display:grid; }
.mode-bar small { color:var(--muted); }
.mode-toggle { background:#e7ece8; border-radius:8px; display:flex; padding:3px; }
.mode-toggle button { background:transparent; border:0; border-radius:6px; color:var(--muted); cursor:pointer; font-size:13px; font-weight:700; padding:7px 10px; }
.mode-toggle button.active { background:#fff; color:var(--navy); box-shadow:0 1px 3px rgba(20,40,43,.15); }
.timer-toggle { color:var(--muted); font-size:13px; }
.timer { color:var(--navy); font-variant-numeric:tabular-nums; font-weight:700; }
.environment-intro { align-items:center; background:linear-gradient(120deg,#0b0b0c,#1e1b15); border-radius:var(--radius); box-shadow:0 14px 30px rgba(11,11,12,.16); color:#fff; display:flex; gap:28px; justify-content:space-between; margin:0 0 28px; padding:32px 7%; }
.environment-intro .eyebrow { color:#e4bd58; }
.environment-intro h2 { font-size:30px; margin:0; }
.environment-intro p:not(.eyebrow) { color:#d9e8e8; margin:8px 0 0; max-width:690px; }
.environment-intro .primary-button { background:var(--gold); color:#17130a; white-space:nowrap; }
.environment { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 12px 35px rgba(28,43,47,.06); margin:0 0 28px; overflow:hidden; }
.workspace-header { align-items:center; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; padding:25px 32px; }
.workspace-header h2 { color:var(--navy); font-size:28px; margin:0; }
.text-button { background:transparent; border:0; color:var(--teal); cursor:pointer; font-weight:700; text-decoration:underline; }
.workspace-tabs { background:#f4f6f2; border-bottom:1px solid var(--line); display:flex; gap:6px; overflow:auto; padding:0 24px; }
.workspace-tab { background:transparent; border:0; border-bottom:3px solid transparent; color:var(--muted); cursor:pointer; font-weight:700; padding:15px 16px 12px; }
.workspace-tab.active { border-color:var(--teal); color:var(--navy); }
.workspace-content { min-height:390px; padding:30px 32px 36px; }
.workspace-content h3 { color:var(--navy); font-size:27px; margin:0 0 8px; }
.workspace-lede { color:var(--muted); margin:0 0 23px; }
.data-layout,.model-layout,.security-layout { display:grid; gap:28px; grid-template-columns:minmax(0,1.3fr) minmax(265px,.7fr); }
.table-wrap { border:1px solid var(--line); border-radius:11px; overflow:auto; }
table { border-collapse:collapse; font-size:13px; min-width:600px; width:100%; }
th { background:#eef3f0; color:var(--navy); font-weight:700; text-align:left; }
td,th { border-bottom:1px solid #e6e6e0; padding:11px 13px; }
tr:last-child td { border-bottom:0; }
.field-list,.insight-card,.challenge { background:#f2f7f5; border-radius:12px; padding:19px; }
.field-list h4,.insight-card h4,.challenge h4 { color:var(--navy); margin:0 0 9px; }
.field-list ul { color:#40545a; font-size:14px; margin:0; padding-left:19px; }
.field-list li { margin:5px 0; }
.model-canvas { background:linear-gradient(135deg,#f0f5f2,#f9faf7); border:1px solid #d5dfd9; border-radius:12px; display:grid; gap:14px; grid-template-columns:repeat(3,1fr); padding:20px; position:relative; }
.model-card { background:#fff; border:1px solid #b9cbc5; border-radius:9px; box-shadow:0 3px 8px rgba(29,55,55,.06); padding:12px; }
.model-card strong { color:var(--navy); display:block; font-size:14px; }
.model-card span { color:var(--muted); display:block; font-size:12px; margin-top:4px; }
.model-card.alert { border:2px solid var(--gold); }
.model-card.fixed { border:2px solid #328c68; }
.relationship-note { background:#fff7e9; border-left:4px solid var(--gold); border-radius:0 8px 8px 0; color:#72572d; font-size:14px; margin-top:15px; padding:12px; }
.challenge { align-self:start; background:#edf5f3; }
.challenge p { color:#425559; font-size:14px; }
.choice-set { display:grid; gap:9px; margin:15px 0; }
.choice-set label { align-items:flex-start; background:#fff; border:1px solid #cbd8d2; border-radius:8px; cursor:pointer; display:flex; font-size:14px; gap:9px; padding:10px; }
.choice-set input { accent-color:var(--teal); margin-top:3px; }
.workspace-feedback { border-left:4px solid var(--teal); color:#264c4a; font-size:14px; margin-top:15px; padding:10px 13px; }
.workspace-feedback.incorrect { border-color:var(--gold); color:#72572d; }
.report-layout { display:grid; gap:15px; grid-template-columns:repeat(3,1fr); }
.metric { border:1px solid var(--line); border-radius:11px; padding:17px; }
.metric span { color:var(--muted); display:block; font-size:13px; }
.metric strong { color:var(--navy); font-family:Fraunces,serif; font-size:29px; }
.chart-card { border:1px solid var(--line); border-radius:11px; grid-column:span 2; padding:19px; }
.chart-card h4 { margin:0 0 18px; }
.bars { align-items:end; display:flex; gap:14px; height:155px; }
.bar-item { align-items:center; color:var(--muted); display:flex; flex:1; flex-direction:column; font-size:11px; gap:7px; height:100%; justify-content:end; }
.bar-item span { background:var(--teal); border-radius:5px 5px 0 0; width:100%; }
.report-note { background:#fef6e8; border-radius:11px; color:#685735; font-size:14px; padding:19px; }
.assessment-layout { background:var(--surface); border:1px solid rgba(255,255,255,.9); border-radius:var(--radius); display:grid; grid-template-columns:minmax(280px,.83fr) minmax(0,1.45fr); min-height:570px; overflow:hidden; box-shadow:0 18px 42px rgba(30,56,86,.09); }
.case-panel { background:linear-gradient(180deg,#eff9f7,#f7fbfd); border-right:1px solid var(--line); padding:32px 28px; }
.panel-heading h2 { color:var(--navy); font-size:27px; margin:0; }
.panel-heading > p:last-child { color:var(--muted); font-size:14px; margin:8px 0 24px; }
.case-sections { display:grid; gap:8px; }
details { border-bottom:1px solid #d2dfd9; padding:0 0 9px; }
summary { cursor:pointer; color:var(--navy); font-weight:700; list-style:none; padding:10px 0; display:flex; justify-content:space-between; gap:12px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; color:var(--teal); font-size:20px; font-weight:400; line-height:.8; }
details[open] summary::after { content:"−"; }
.case-copy { color:#45555a; font-size:14px; padding:0 4px 8px 0; }
.case-copy p { margin:0 0 10px; }
.case-copy ul { margin:0; padding-left:18px; }
.case-copy li { margin:0 0 6px; }
.question-panel { padding:42px clamp(28px,6vw,78px); align-self:center; }
.progress-row { display:flex; align-items:center; color:var(--muted); font-size:14px; gap:16px; margin-bottom:36px; }
.flag-button { background:transparent; border:1px solid #ccd5d0; border-radius:7px; color:var(--muted); cursor:pointer; font-size:12px; font-weight:700; padding:6px 9px; }
.flag-button.flagged { background:#fff5df; border-color:var(--gold); color:#805c1f; }
.question-nav { display:flex; flex-wrap:wrap; gap:6px; margin:-22px 0 26px; }
.question-nav button,.summary-nav button { background:#fff; border:1px solid #ccd5d0; border-radius:6px; color:var(--muted); cursor:pointer; font-size:12px; font-weight:700; min-width:28px; padding:5px 8px; }
.question-nav button.active { background:var(--navy); border-color:var(--navy); color:#fff; }
.question-nav button.answered:not(.active) { border-color:#5aa27e; color:#23704b; }
.question-nav button.flagged { box-shadow:inset 0 -3px 0 var(--gold); }
.progress-track { background:#e7e9e5; border-radius:50px; flex:1; height:7px; overflow:hidden; }
.progress-track span { background:var(--teal); border-radius:inherit; display:block; height:100%; transition:width .3s ease; }
.question-type { color:var(--teal); font-size:13px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.question-panel h2 { color:var(--navy); font-size:clamp(28px,3vw,39px); margin:8px 0 28px; max-width:700px; }
.evidence-button { background:#eef6f4; border:1px solid #bbd6cf; border-radius:8px; color:#176b68; cursor:pointer; font-size:14px; font-weight:700; margin:-8px 0 22px; padding:10px 13px; }
.evidence-button:hover { background:#e1f0ec; }
.evidence-button span { font-size:17px; margin-right:5px; }
.answers { display:grid; gap:12px; }
.selection-hint { color:var(--muted); font-size:14px; margin:-10px 0 16px; }
.order-list { display:grid; gap:10px; }
.order-list label { align-items:center; background:#fff; border:1px solid #ccd2ce; border-radius:10px; display:flex; gap:12px; padding:12px; }
.order-list select { border:1px solid #9db7ae; border-radius:6px; color:var(--navy); font-weight:700; padding:5px; }
.answer { background:#fff; border:1px solid #ccd2ce; border-radius:12px; color:var(--ink); cursor:pointer; display:flex; gap:15px; padding:16px 18px; text-align:left; transition:border-color .15s, background .15s, transform .15s; }
.answer:hover:not(:disabled) { border-color:var(--teal); transform:translateY(-1px); }
.answer:disabled { cursor:default; }
.answer-key { background:#eef3f0; border-radius:50%; color:var(--navy); flex:0 0 25px; font-size:13px; font-weight:700; height:25px; line-height:25px; text-align:center; }
.answer.selected { border-color:var(--teal); box-shadow:0 0 0 2px rgba(19,127,128,.15); }
.answer.correct { background:#edf8f3; border-color:#328c68; }
.answer.incorrect { background:#fff3f1; border-color:var(--wrong); }
.feedback { border-left:4px solid var(--teal); background:var(--teal-pale); border-radius:0 10px 10px 0; margin-top:24px; padding:17px 18px; }
.feedback.incorrect { background:#fff4eb; border-color:var(--gold); }
.feedback p { margin:5px 0 0; }
.feedback strong { color:var(--navy); }
.actions { align-items:center; display:flex; gap:16px; margin-top:26px; }
.primary-button,.secondary-button { border:0; border-radius:9px; cursor:pointer; font-weight:700; padding:12px 18px; }
.primary-button { background:var(--navy); box-shadow:none; color:#fff; }
.primary-button:hover { background:var(--gold); color:#17130a; transform:translateY(-1px); }
.secondary-button { background:#e6ebe7; color:var(--navy); }
.hidden { display:none; }
.results { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-top:30px; padding:clamp(28px,6vw,70px); text-align:center; }
.results h2 { color:var(--navy); font-size:42px; margin:5px 0 12px; }
.score { color:var(--teal); font-family:Fraunces,serif; font-size:65px; font-weight:700; line-height:1; margin:25px 0; }
.score small { color:var(--muted); font-family:"DM Sans",sans-serif; font-size:22px; font-weight:500; }
.review { display:grid; gap:12px; margin:36px auto 0; max-width:800px; text-align:left; }
.review-item { border:1px solid var(--line); border-left:5px solid var(--wrong); border-radius:8px; padding:15px 18px; }
.review-item.correct { border-left-color:#328c68; }
.review-item h3 { font-family:"DM Sans",sans-serif; font-size:15px; margin:0 0 6px; }
.review-item p { color:var(--muted); font-size:14px; margin:0; }
.feedback-icon { align-items:center; background:var(--navy); border:1px solid rgba(212,167,44,.45); border-radius:14px; box-shadow:0 10px 22px rgba(11,11,12,.12); display:inline-flex; font-size:29px; height:58px; justify-content:center; margin:0 auto 17px; width:58px; }
.feedback-gate-copy { color:var(--muted); margin:0 auto 25px; max-width:540px; }
.feedback-form { background:linear-gradient(145deg,#fff,#fcfbf7); border:1px solid var(--line); border-radius:16px; box-shadow:0 13px 28px rgba(11,11,12,.06); display:grid; gap:22px; margin:30px auto 0; max-width:620px; padding:28px; text-align:left; }
.feedback-form fieldset { background:#fbfaf6; border:1px solid #ece8dc; border-radius:12px; margin:0; padding:17px; }
.feedback-form legend,.feedback-comment,.feedback-email { color:var(--navy); display:grid; font-family:"Fira Sans",sans-serif; font-size:15px; font-weight:700; gap:9px; }
.rating-row { display:flex; gap:9px; margin-top:13px; }
.rating-row label { align-items:center; background:#fff; border:1px solid #ded9ca; border-radius:8px; color:#a9a49a; cursor:pointer; display:flex; font-family:"Fira Sans",sans-serif; font-size:20px; justify-content:center; min-height:42px; min-width:44px; padding:7px 10px; transition:border-color .16s,background .16s,transform .16s,color .16s; }
.rating-row label:hover { border-color:var(--gold); transform:translateY(-1px); }
.rating-row label:has(input:checked) { background:#fff6d9; border-color:var(--gold); box-shadow:0 0 0 2px rgba(212,167,44,.16); color:var(--dark-gold); }
.rating-row input { appearance:none; height:1px; margin:0; position:absolute; width:1px; }
.sr-only { height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; clip:rect(0,0,0,0); white-space:nowrap; }
.rating-caption { color:var(--muted); display:flex; font-size:11px; justify-content:space-between; margin-top:8px; }
.feedback-form textarea,.feedback-form input[type="email"] { background:#fff; border:1px solid #ded9ca; border-radius:8px; color:var(--ink); font:inherit; padding:12px; transition:border-color .16s,box-shadow .16s; }
.feedback-form textarea:focus,.feedback-form input[type="email"]:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,167,44,.12); outline:0; }
.feedback-form textarea { min-height:116px; resize:vertical; }
.feedback-status { color:var(--muted); font-size:14px; margin:0; }
.feedback-form .primary-button { justify-self:start; }
.result-message { align-items:center; background:linear-gradient(135deg,#fcf8e9,#fff); border:1px solid #eadb9d; border-radius:14px; display:flex; gap:15px; margin:25px auto 0; max-width:590px; padding:16px 18px; text-align:left; }
.result-emoji { align-items:center; background:var(--navy); border-radius:10px; display:flex; flex:0 0 45px; font-size:23px; height:45px; justify-content:center; }
.result-message strong { color:var(--navy); font-family:"Fira Sans",sans-serif; font-size:17px; }
.result-message p { color:var(--muted); font-size:14px; margin:3px 0 0; }
 .summary-nav { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
@media (max-width:850px) { .hero-banner { grid-template-columns:1fr; padding:46px 8%; } .hero-logo-panel { display:none; } .intro { padding:34px 7%; display:block; } .case-meta { margin-top:20px; max-width:none; } .assessment-layout { grid-template-columns:1fr; } .case-panel { border-bottom:1px solid var(--line); border-right:0; padding:25px; } .question-panel { padding:34px 26px; } }
@media (max-width:850px) { .environment-intro,.workspace-header { align-items:flex-start; flex-direction:column; } .data-layout,.model-layout,.security-layout { grid-template-columns:1fr; } .report-layout { grid-template-columns:1fr; } .chart-card { grid-column:span 1; } }
@media (max-width:650px) { .lab-cards { grid-template-columns:1fr; } .mode-bar { align-items:flex-start; flex-direction:column; } }
@media (max-width:500px) { .app-shell { padding:0 15px 30px; } .topbar { min-height:65px; } .prototype-tag { display:none; } .brand em { display:none; } .question-panel h2 { font-size:28px; } .progress-row { gap:10px; } }