:root {
  color-scheme: light;
  --ink: #172035;
  --muted: #60708a;
  --blue: #3169e8;
  --blue-dark: #1f4cb1;
  --cyan: #48c7ef;
  --lime: #b9ea61;
  --paper: #ffffff;
  --line: #dfe7f2;
  --wash: #f2f6fc;
  --shadow: 0 20px 60px rgba(36, 67, 125, .12);
  font-family: Inter, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--wash); }
a { color: inherit; }
img { max-width: 100%; }
.site-header { position: relative; overflow: hidden; padding: 28px 24px 82px; color: #fff; background: linear-gradient(125deg, #173c92, #3169e8 58%, #3fbfe9); }
.site-header::before,.site-header::after { content:""; position:absolute; border-radius:999px; background:rgba(255,255,255,.1); }
.site-header::before { width:340px; height:340px; right:-80px; top:-170px; }
.site-header::after { width:180px; height:180px; left:7%; bottom:-120px; }
.nav,.hero,.main { width:min(1180px,100%); margin-inline:auto; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:20px; position:relative; z-index:1; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:850; font-size:1.1rem; letter-spacing:-.02em; }
.brand-mark { display:grid; place-items:center; width:44px; height:44px; border-radius:15px; color:#173c92; background:var(--lime); box-shadow:0 10px 22px rgba(17,36,76,.22); font-size:1.25rem; }
.nav-links { display:flex; gap:8px; flex-wrap:wrap; }
.nav-links a { padding:10px 14px; border-radius:999px; text-decoration:none; font-weight:700; color:rgba(255,255,255,.88); }
.nav-links a:hover,.nav-links a:focus-visible { background:rgba(255,255,255,.15); color:#fff; }
.hero { position:relative; z-index:1; padding-top:76px; }
.eyebrow { margin:0 0 14px; text-transform:uppercase; letter-spacing:.16em; font-size:.76rem; font-weight:850; color:var(--lime); }
.hero h1 { max-width:820px; margin:0; font-size:clamp(2.7rem,8vw,6rem); line-height:.94; letter-spacing:-.065em; }
.hero p { max-width:720px; margin:26px 0 0; font-size:clamp(1.05rem,2vw,1.35rem); line-height:1.65; color:rgba(255,255,255,.84); }
.main { padding:58px 24px 88px; }
.section { margin-top:70px; scroll-margin-top:24px; }
.section:first-child { margin-top:0; }
.section-heading { display:block; margin-bottom:24px; }
.section-heading h2 { margin:0; font-size:clamp(1.75rem,4vw,2.6rem); letter-spacing:-.045em; }
.section-heading p { margin:8px 0 0; color:var(--muted); }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.project-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:26px; background:var(--paper); box-shadow:var(--shadow); transition:transform .22s ease, box-shadow .22s ease; }
.project-card:hover { transform:translateY(-5px); box-shadow:0 26px 70px rgba(36,67,125,.18); }
.project-card a { display:block; height:100%; text-decoration:none; }
.project-image { position:relative; aspect-ratio:16/9; overflow:hidden; background:#dce6f7; }
.project-image img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.project-card-quiz .project-image { aspect-ratio:5/2; }
.project-card-quiz .project-image img { object-fit:contain; }
.project-card:hover .project-image img { transform:scale(1.025); }
.project-type { position:absolute; top:16px; left:16px; padding:7px 11px; border-radius:999px; color:#fff; background:rgba(16,29,54,.78); backdrop-filter:blur(10px); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.project-copy { padding:24px; }
.project-copy h3 { margin:0; font-size:clamp(1.25rem,3vw,1.65rem); letter-spacing:-.035em; }
.project-copy p { margin:10px 0 0; color:var(--muted); line-height:1.55; }
.project-action { display:inline-flex; align-items:center; gap:8px; margin-top:18px; color:var(--blue); font-weight:800; }
.project-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.project-actions a { display:inline-flex; align-items:center; justify-content:center; height:auto; min-height:44px; padding:0 15px; border-radius:13px; font-weight:800; text-decoration:none; }
.project-actions .quiz-link { color:#fff; background:var(--blue); }
.project-actions .learn-link { color:var(--blue); background:#edf3ff; }
.site-footer { padding:28px 24px; color:#71809a; text-align:center; border-top:1px solid var(--line); background:#fff; }
.back-button { display:inline-flex; align-items:center; gap:9px; min-height:46px; padding:0 17px; border:1px solid rgba(255,255,255,.24); border-radius:14px; color:#fff; background:rgba(11,22,45,.48); backdrop-filter:blur(12px); text-decoration:none; font-weight:800; }
.viewer-shell { height:100dvh; overflow:hidden; background:#050812; color:#fff; }
.viewer-topbar { position:fixed; z-index:20; top:18px; left:18px; right:18px; display:flex; align-items:center; justify-content:space-between; gap:18px; pointer-events:none; }
.viewer-topbar > * { pointer-events:auto; }
.viewer-title { margin:0; padding:12px 16px; border-radius:14px; background:rgba(11,22,45,.58); backdrop-filter:blur(12px); font-size:clamp(1rem,2.5vw,1.3rem); }
.video-frame,.model-canvas { width:100%; height:100%; border:0; display:block; }
.viewer-help { position:fixed; z-index:15; left:50%; bottom:18px; transform:translateX(-50%); max-width:calc(100% - 36px); padding:10px 14px; border-radius:999px; background:rgba(11,22,45,.7); color:rgba(255,255,255,.82); backdrop-filter:blur(12px); font-size:.85rem; text-align:center; }
.viewer-status { position:fixed; z-index:15; inset:0; display:grid; place-items:center; pointer-events:none; color:rgba(255,255,255,.78); }
.viewer-status[hidden] { display:none; }
.quiz-page { min-height:100dvh; padding:24px; background:linear-gradient(145deg,var(--quiz-a,#14294f),var(--quiz-b,#2d6a4f)); color:#fff; }
.quiz-shell { width:min(860px,100%); margin:auto; }
.quiz-nav { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.quiz-card { margin-top:32px; padding:clamp(24px,6vw,52px); border:1px solid rgba(255,255,255,.2); border-radius:30px; background:rgba(8,16,33,.58); box-shadow:0 30px 90px rgba(0,0,0,.25); backdrop-filter:blur(16px); }
.quiz-logo { display:block; width:min(560px,92%); aspect-ratio:5/2; margin:0 auto 30px; border-radius:18px; object-fit:cover; }
.quiz-card h1 { margin:0; text-align:center; font-size:clamp(2rem,7vw,4rem); letter-spacing:-.055em; }
.quiz-intro { margin:18px auto 30px; max-width:620px; color:rgba(255,255,255,.78); text-align:center; line-height:1.6; }
.quiz-progress { height:7px; margin:24px 0; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.16); }
.quiz-progress span { display:block; height:100%; width:0; border-radius:inherit; background:var(--lime); transition:width .25s ease; }
.quiz-question { font-size:clamp(1.35rem,4vw,2rem); line-height:1.25; font-weight:850; }
.quiz-choices { display:grid; gap:12px; margin-top:24px; }
.quiz-choice,.primary-button { min-height:54px; border:0; border-radius:15px; cursor:pointer; font:inherit; font-weight:800; }
.quiz-choice { display:flex; align-items:center; gap:14px; padding:11px 18px; color:var(--ink); background:#fff; text-align:left; transition:transform .18s ease,background .18s ease; }
.quiz-choice-letter { display:inline-grid; place-items:center; flex:0 0 34px; width:34px; height:34px; border-radius:50%; background:#16864b; color:#fff; font-size:.95rem; font-weight:900; line-height:1; }
.quiz-choice-label { min-width:0; }
.quiz-choice:hover,.quiz-choice:focus-visible { transform:translateY(-2px); background:#eef5ff; }
.primary-button { display:inline-flex; align-items:center; justify-content:center; padding:0 24px; color:#173c92; background:var(--lime); text-decoration:none; }
.quiz-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:28px; }
.error-page { min-height:100dvh; display:grid; place-items:center; padding:24px; background:var(--wash); }
.error-card { max-width:580px; padding:42px; border-radius:28px; background:#fff; box-shadow:var(--shadow); text-align:center; }
@media (max-width:720px) {
  .project-card-quiz .project-image img { object-fit:cover; }
  .site-header { padding:20px 18px 62px; }
  .nav-links { display:none; }
  .hero { padding-top:54px; }
  .main { padding:42px 18px 66px; }
  .section { margin-top:54px; }
  .section-heading { display:block; }
  .section-heading p { margin-top:8px; }
  .project-grid { grid-template-columns:1fr; gap:18px; }
  .project-card { border-radius:21px; }
  .project-copy { padding:20px; }
  .viewer-title { display:none; }
  .viewer-topbar { top:12px; left:12px; right:12px; }
  .quiz-page { padding:16px; }
  .quiz-card { margin-top:22px; border-radius:24px; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }