:root { --paper:#fff; --accent-blue:#456b99; --accent-soft:#eff4fb; --ink:#26364d; --muted:#5f7088; --line:#e0e7f0; }
body { background:linear-gradient(156deg,#edf2fb 0,#f8fafe 260px,#fff 660px); }
.site-header { position:sticky; top:12px; height:70px; max-width:1180px; margin:16px auto 0; padding:0 26px; border:1px solid rgba(255,255,255,.95); border-radius:8px; background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); box-shadow:0 10px 35px #536b8f0b; }
.brand { font-size:17px; font-weight:500; gap:12px; }
.brand > span:not(.brand-symbol) { font-family:var(--font-reading); }
.brand-symbol { background:#edf3fc; color:#526f98; border:1px solid #e0e8f5; border-radius:6px; }
.brand-secondary { font-family:var(--font-interface); font-size:10px; font-weight:400; color:#5f7088; margin-top:5px; }
.site-header nav { gap:30px; }
.site-header nav a { color:#6b7b90; font-size:13px; }
.site-header nav a:hover { color:#3d628e; }
.site-header .nav-question { color:#456b99; }
main,.site-footer { max-width:1140px; }
.masthead { padding:54px 0 22px; }
.masthead h1 { font-family:var(--font-editorial); font-size:54px; font-weight:600; line-height:1.4; color:#26364d; }
.masthead-bottom { margin-top:13px; }
.masthead-bottom > p { font-family:var(--font-reading); font-size:23px; color:#5f7592; }
.workshop-introduction { margin-top:20px; font-size:14px; line-height:1.9; color:#5f7088; }
.workshop-byline { display:flex; flex-wrap:wrap; gap:10px 30px; font-size:12px; color:#5f7088; padding:0 0 20px; }
.classroom { padding-top:28px; }
.section-kicker { margin-bottom:18px; align-items:center; }
.section-kicker h2 { font-size:25px; font-family:var(--font-reading); font-weight:600; }
.section-kicker > span { font-size:12px; color:#5f7088; }
.session-tabs { padding:7px; gap:8px; background:rgba(244,247,253,.7); border:1px solid #e2e9f5; border-radius:8px; box-shadow:inset 0 1px 0 #fff; backdrop-filter:blur(14px); }
.session-tabs button { border:1px solid transparent; border-radius:6px; padding:16px 19px; background:transparent; }
.session-tabs button + button { border-left:1px solid transparent; }
.session-tabs button[aria-selected="true"] { border-color:#e1e8f4; background:#fff; box-shadow:0 4px 14px #5267860a; }
.session-tabs button:hover { background:rgba(255,255,255,.68); }
.tab-number { font-family:var(--font-reading); color:#5f7088; font-size:23px; width:27px; }
.tab-copy strong { font-family:var(--font-reading); font-size:19px; font-weight:600; color:#425875; }
.tab-copy small { font-size:11px; margin-top:5px; color:#5f7088; }
.tab-state { font-size:10px; color:#5f7088; }
.tab-state svg { color:#7998bc; }
.session-panel { padding-top:30px; }
.session-heading { margin-bottom:22px; }
.session-heading h3 { font-family:var(--font-reading); font-size:25px; font-weight:500; }
.session-heading > p { font-size:12px; color:#5f7088; }
.resource-grid { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:22px; align-items:stretch; }
.resource-card { border-color:#e5ebf4; border-radius:8px; box-shadow:0 9px 27px #435d8107; }
.resource-card:hover { border-color:#c5d4e9; }
.slides-card { grid-row:span 2; }
.slides-card .resource-visual { height:auto; aspect-ratio:16/9; border-bottom:0; }
.slides-card .resource-body { padding:23px 25px 0; }
.resource-body h4 { font-family:var(--font-reading); font-size:23px; font-weight:600; }
.resource-body > p { line-height:1.9; color:#5f7088; }
.resource-meta { font-size:11px; margin-bottom:12px; color:#5f7088; }
.resource-link { color:#456b99; border-top-color:#edf1f7; font-size:13px; font-weight:500; padding:15px 0; }
.resource-link svg { width:16px; height:16px; }
.lab-card,.challenge-card { display:grid; grid-template-columns:142px minmax(0,1fr); }
.lab-card .resource-visual,.challenge-card .resource-visual { height:100%; min-height:190px; padding:0; border-bottom:0; border-right:1px solid #e8edf5; background:#f4f7fc; display:flex; align-items:center; overflow:hidden; }
.lab-card .resource-body,.challenge-card .resource-body { padding:18px 20px 0; }
.lab-card .resource-body h4,.challenge-card .resource-body h4 { font-size:21px; }
.screenshot-visual img { width:310px; max-width:none; border:1px solid #e5ebf5; transform:translateX(13px); box-shadow:0 8px 24px #344e7b12; }
.screenshot-visual:hover img { transform:translateX(13px); }
.resource-card .resource-body > p { font-size:12px; margin-bottom:15px; }
.slides-card .resource-body > p { font-size:13px; }
.session-tools { margin-top:16px; font-size:12px; }
.questions-section { position:relative; margin-top:58px; border:0; background:linear-gradient(120deg,#f0f4fb,#f9fbff); padding:35px 38px; gap:28px; }
.questions-section .overline { color:#5f7088; font-size:11px; font-weight:400; }
.questions-section h2 { font-family:var(--font-reading); font-size:31px; font-weight:500; line-height:1.65; color:#415875; margin:10px 0 12px; }
.question-copy > p { color:#5f7088; line-height:1.9; }
.primary-action { background:#456b99; border-radius:6px; border:1px solid #5277a3; box-shadow:0 5px 14px #456b9910; font-weight:500; }
.primary-action:hover { background:#365981; }
.question-qr { width:158px; }
.question-qr a { border-color:#e0e8f4; padding:12px; border-radius:7px; box-shadow:0 5px 20px #3d59770a; }
.question-qr > span { font-size:10px; color:#5f7088; }
.before-class { padding-top:40px; grid-template-columns:1fr; gap:22px; }
.before-class h2 { font-family:var(--font-reading); font-size:24px; font-weight:500; }
.before-class ul { justify-content:flex-start; gap:50px; }
.before-class li { color:#65758b; }
.before-class li svg { color:#8da5c4; }
.before-class small { color:#5f7088; }
.before-class > p { grid-column:1; color:#5f7088; }
.site-footer { border-top-color:#edf1f7; padding-top:24px; margin-top:0; }
.footer-title { font-family:var(--font-reading); font-size:18px; font-weight:500; }
.footer-title span { font-family:var(--font-interface); font-size:10px; color:#5f7088; }
.site-footer p { color:#5f7088; }
.back-top { color:#5f7088; }
.locked-session { background:linear-gradient(135deg,#f3f6fb,#fcfdff); border-block:0; padding:34px; }
.locked-session h4 { font-family:var(--font-reading); font-size:29px; }
.lock-symbol { background:#fff; color:#95aac6; border-color:#e2e9f5; }
.coming-topics h4 { font-family:var(--font-reading); font-size:20px; }
.coming-topics > div { border-top-color:#e9eef6; }
.overline { text-transform:none; letter-spacing:0; }
.placeholder-page main { max-width:880px; }
.placeholder-page .site-header { width:calc(100% - 40px); }
.placeholder-page h1 { font-size:42px; }
.placeholder-page .overline { display:none; }
@media (max-width:1240px) { .site-header { margin-left:22px; margin-right:22px; } main,.site-footer { margin-left:36px; margin-right:36px; } }
@media (max-width:1000px) { .lab-card,.challenge-card { grid-template-columns:100px minmax(0,1fr); } .resource-grid { gap:16px; } .tab-copy strong { font-size:17px; } .tab-state > span { display:none; } .resource-body h4 { font-size:22px; } }
@media (max-width:760px) { .site-header { top:8px; height:64px; margin:10px 12px 0; padding:0 15px; gap:12px; } .site-header nav { gap:15px; } .site-header nav > a:not(.nav-question) { display:inline-flex; } .site-header nav a { font-size:11px; } .brand { font-size:16px; gap:8px; } .brand-secondary { font-size:8px; } .brand-symbol { width:30px; height:30px; } main,.site-footer { margin-left:22px; margin-right:22px; } .masthead { padding:34px 0 20px; } .masthead h1 { font-size:38px; } .masthead-bottom > p { font-size:19px; line-height:1.8; } .workshop-introduction { font-size:13px; margin-top:16px; } .workshop-byline { font-size:11px; gap:7px 18px; } .section-kicker h2 { font-size:23px; } .section-kicker > span { display:none; } .classroom { padding-top:20px; } .session-tabs { grid-template-columns:1fr; gap:4px; padding:6px; } .session-tabs button + button { border-top:1px solid transparent; } .session-tabs button { padding:14px 12px; } .tab-copy strong { font-size:18px; } .tab-state > span { display:inline; } .session-heading { gap:10px; } .session-heading h3 { font-size:23px; } .resource-grid { grid-template-columns:1fr; gap:16px; } .slides-card { grid-row:auto; } .slides-card .resource-body { padding:20px 22px 0; } .lab-card,.challenge-card { grid-template-columns:105px minmax(0,1fr); } .resource-body h4 { font-size:23px; } .lab-card .resource-body,.challenge-card .resource-body { padding:17px 16px 0; } .lab-card .resource-body h4,.challenge-card .resource-body h4 { font-size:21px; } .session-tools { font-size:11px; } .questions-section { padding:26px 24px; margin-top:40px; gap:25px; } .questions-section h2 { font-size:26px; } .question-qr { width:136px; } .before-class ul { gap:21px; } .before-class h2 { font-size:23px; } .site-footer { margin-top:0; } .placeholder-page h1 { font-size:32px; } }
@media (max-width:390px) { .masthead h1 { font-size:34px; } .site-header nav > a:not(.nav-question) { display:none; } .lab-card,.challenge-card { grid-template-columns:78px minmax(0,1fr); } .lab-card .resource-body h4,.challenge-card .resource-body h4 { font-size:19px; } .resource-meta { font-size:10px; } .tab-copy strong { font-size:17px; } .tab-state > span { display:none; } }