.lesson-catalogue{padding:0 0 55px}.catalogue-heading h2{font:400 clamp(27px,3.1vw,43px)/1.2 Georgia,serif;letter-spacing:-.035em}.catalogue-heading p{font-size:17px;color:#c4d4e6;margin-top:13px}.topic-filters{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0 24px}.exhibit-page .topic-filters button{background:transparent;color:#cbddef;border-color:#516782;font-size:14px;padding:11px 18px}.topic-filters button span{opacity:.75;margin-left:10px}.exhibit-page .topic-filters button[aria-pressed=true]{background:#d7eafa;color:#172c42;border-color:#d7eafa}.lesson-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.lesson-cards a{position:relative;display:block;text-decoration:none;padding:23px 21px 45px;background:linear-gradient(135deg,#1b2c43,#111c2b);border:1px solid #405873;border-radius:5px;transition:transform .2s,border-color .2s}.lesson-cards a:hover{transform:translateY(-4px);border-color:#a0c5e7}.lesson-cards a[aria-current]{border-color:#c0def7;box-shadow:inset 0 2px #c0def7}.lesson-cards h3{font-size:20px;line-height:1.3;margin-top:15px}.lesson-cards p{font-size:15px;line-height:1.7;color:#c5d3e3;margin-top:12px}.lesson-cards a>span{font-size:11px;color:#adcae7;letter-spacing:.025em}.lesson-cards a>b{position:absolute;bottom:17px;right:20px;font-size:22px;color:#b2d5f5;font-weight:400}.lesson-pager{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:20px 0 70px}.lesson-pager a{font-size:15px;text-align:center}.lesson-pager button:disabled{opacity:.4;cursor:default}.learning-experiment{outline:none!important}.lab-input{display:block;width:100%;padding:14px 16px;min-height:49px;background:#142337;color:#eaf2fa;border:1px solid #536f8d;border-radius:5px;font:400 18px/1.5 system-ui,sans-serif;margin:10px 0 24px;box-sizing:border-box}.field-label,.input-pair>label{display:block;font-size:16px;color:#d4e2f0;margin:25px 0 8px}.field-label output{float:right;color:#b1d4f4}.input-pair{display:grid;grid-template-columns:1fr 1fr;gap:28px}.readout-bar{font-size:17px;color:#c2d9ef;padding:19px 0}.encoding-cells{display:flex;flex-wrap:wrap;gap:12px}.encoding-cells>div{display:flex;align-items:center;justify-content:center;flex-direction:column;min-width:100px;gap:13px;border:1px solid #496885;background:#142438;padding:20px;border-radius:4px}.encoding-cells strong{font:400 31px/1.3 system-ui}.encoding-cells code{font:14px ui-monospace,monospace;color:#aecfec}.color-lab{display:grid;grid-template-columns:1fr 1fr;gap:38px;margin-top:35px}#color-preview{min-height:270px;display:grid;place-items:center;border-radius:6px;border:1px solid #6c8cae}#color-hex{font:500 27px/1.4 ui-monospace,monospace;color:#fff;background:#0b1425d9;border-radius:6px;padding:12px 17px}.color-sliders{align-self:center}.color-sliders label{display:block;font-size:17px;margin-bottom:6px}.color-sliders output{float:right;color:#b2d7f5}.color-sliders input,.wide-range{width:100%;accent-color:#b9d8f8;height:34px;margin:0 0 22px;cursor:pointer}.mono-note{font:16px/1.8 ui-monospace,monospace;color:#b9d5ed;margin-top:20px!important;overflow-wrap:anywhere}.transfer-display{background:#142338;padding:30px;border:1px solid #405a75;margin:5px 0 25px}.transfer-display>span{font-size:15px;color:#c2d3e4}.transfer-display output{display:block;font:400 clamp(29px,4vw,51px)/1.3 Georgia,serif;margin-top:13px}.transfer-track{height:9px;background:#2d435c;border-radius:99px;margin-top:26px;overflow:hidden}.transfer-track>span{display:block;width:0%;height:100%;background:#c6e3fd}.subnet-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:9px;margin:20px 0 30px}.exhibit-page .subnet-blocks button{border-radius:5px;min-height:52px;background:#18334f;color:#e6f2fc;border-color:#6683a2;padding:10px;font:16px ui-monospace,monospace}.exhibit-page .subnet-blocks button[aria-pressed=true]{background:#d4eaff;color:#102238}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:28px 0}.result-grid>div{border-top:1px solid #4f6a87;padding-top:17px;min-width:0}.result-grid dt{font-size:14px;color:#afc8e3}.result-grid dd{font-size:19px;color:#e5f0fa;margin:7px 0 0;line-height:1.65;overflow-wrap:anywhere}.dns-path{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:32px 0}.dns-path>span{background:#162b43;border:1px solid #506d8b;padding:20px;text-align:center;border-radius:5px;font-size:17px;flex:1}.dns-path>span.is-active{background:#d0e5f9;color:#132941;border-color:#e9f7ff}.dns-path>b{font-size:24px;color:#b7d5f3}.handshake-lanes{display:flex;justify-content:space-between;border-bottom:1px solid #46607e;padding:20px 30px;font-size:20px}.handshake-log{min-height:165px;list-style:none;margin:0;padding:20px 0}.handshake-log li{font:500 18px/1.6 ui-monospace,monospace;margin-bottom:13px;padding:12px 22px;background:#203b56;max-width:70%;border-radius:6px}.handshake-log .from-server{margin-left:auto;text-align:right;background:#304361}.firewall-rules{list-style:none;padding:0;margin:30px 0}.firewall-rules li{display:flex;justify-content:space-between;align-items:center;gap:15px;border:1px solid #445f7b;background:#142437;border-radius:5px;padding:20px;margin:12px 0;font-size:18px}.firewall-rules li>div{display:flex;gap:8px}.exhibit-page .firewall-rules button{min-height:44px;width:44px;padding:8px;border-radius:5px;font-size:20px}.firewall-rules button:disabled{opacity:.35;cursor:default}.factor-options,.backup-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:27px 0}.exhibit-page .factor-options button,.exhibit-page .backup-options button{display:flex;flex-direction:column;align-items:start;justify-content:start;text-align:left;border-radius:6px;padding:24px;background:#15283f;color:#e1eefc;border:1px solid #547292}.factor-options strong,.backup-options strong{font-size:20px;font-weight:500;line-height:1.35}.factor-options span,.backup-options span,.backup-options small{font-size:14px;color:#b9cde1;line-height:1.65;margin-top:12px}.exhibit-page .factor-options button[aria-pressed=true]{background:#d5e9fa;color:#142537}.factor-options button[aria-pressed=true] span{color:#2e4b66}.backup-options strong{margin-top:10px}.backup-options span{margin-top:0}.practice-email{background:#f0f3f7;border:1px solid #d7e0e8;color:#122337;border-radius:7px;padding:32px;margin:25px 0}.practice-email p{color:#24364c;margin:19px 0}.practice-email .email-logo{font-size:16px;font-weight:600;letter-spacing:.02em;margin:0 0 22px}.practice-email h3{font-size:25px;margin:25px 0 15px}.exhibit-page .practice-email button.clue{border:1px dashed #6687a6;border-radius:4px;display:block;text-align:left;background:#dce8f3;color:#18334e;width:100%;padding:16px;font-size:17px;line-height:1.7;margin:15px 0;white-space:normal;overflow-wrap:anywhere}.practice-email button.clue>span{display:block;color:#3f5e7d;font-size:13px;margin-bottom:5px}.exhibit-page .practice-email button.clue[data-examined]{background:#fae8c8;border-color:#826431}.digest-results{display:grid;grid-template-columns:1fr;gap:18px;margin:25px 0}.digest-results>div{border:1px solid #4b6381;padding:22px;background:#142336}.digest-results span:not(.digest-different){font-size:15px;color:#bacee4}.digest-results output{font:17px/2 ui-monospace,monospace;overflow-wrap:anywhere;word-break:break-all;display:block;margin-top:13px;color:#d4e4f7}.digest-results output>span{font:inherit!important;color:inherit}.digest-results output>span.digest-different{color:#ffd2a0;background:#82552a3b}.input-pair textarea{min-height:100px;resize:vertical}.scenario-card{border:1px solid #526d8b;padding:29px;background:#15263d;border-radius:5px;margin:30px 0}.scenario-card span{font-size:14px;color:#b7cde4}.scenario-card p{font:400 27px/1.6 Georgia,serif;margin-top:18px}.learning-experiment .lab-input:focus-visible{outline:3px solid #c2dffe;outline-offset:3px}
@media(max-width:1050px){.lesson-cards{grid-template-columns:repeat(3,1fr)}.factor-options{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.lesson-cards{grid-template-columns:1fr 1fr;gap:12px}.lesson-cards a{padding:18px 16px 42px}.lesson-cards h3{font-size:19px}.lesson-cards p{font-size:14px;line-height:1.7}.lesson-cards a>span{font-size:10px}.topic-filters{gap:8px}.exhibit-page .topic-filters button{font-size:12px;padding:11px 13px}.topic-filters button span{margin-left:7px}.catalogue-heading h2{font-size:30px}.catalogue-heading p{font-size:16px}.input-pair,.color-lab,.backup-options{grid-template-columns:1fr;gap:8px}.color-lab{gap:25px}#color-preview{min-height:210px}.result-grid{gap:20px 18px}.result-grid dd{font-size:17px}.dns-path{flex-direction:column;gap:7px}.dns-path>span{width:100%;padding:16px}.dns-path>b{transform:rotate(90deg)}.firewall-rules li{padding:15px;font-size:16px}.firewall-rules li>span{max-width:195px}.exhibit-page .firewall-rules button{width:39px;min-width:39px;padding:6px}.factor-options{grid-template-columns:1fr 1fr;gap:12px}.exhibit-page .factor-options button{padding:18px 15px}.factor-options strong{font-size:18px}.factor-options span{font-size:13px}.practice-email{padding:22px 18px}.exhibit-page .practice-email button.clue{font-size:16px;padding:14px}.digest-results>div{padding:19px}.digest-results output{font-size:15px}.scenario-card{padding:22px}.scenario-card p{font-size:24px}.lesson-pager{flex-wrap:wrap;gap:15px}.lesson-pager a{order:3;width:100%;padding:14px}.lesson-pager button{font-size:14px!important}.encoding-cells{gap:8px}.encoding-cells>div{padding:15px;min-width:80px}.encoding-cells code{font-size:13px}.mono-note{font-size:14px}.lab-input{font-size:16px}}
@media(max-width:360px){.lesson-cards{grid-template-columns:1fr}.factor-options{grid-template-columns:1fr}.result-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.lesson-cards a{transition:none;transform:none!important}.lab-more *{scroll-behavior:auto}}
.exhibit-page .backup-options button:hover,.exhibit-page .factor-options button:hover,.exhibit-page .subnet-blocks button:hover,.exhibit-page .topic-filters button:hover{background:#2c4c6b;color:#f0f6fd;border-color:#a8cfee}
.exhibit-page .factor-options button[aria-pressed=true]:hover,.exhibit-page .subnet-blocks button[aria-pressed=true]:hover,.exhibit-page .topic-filters button[aria-pressed=true]:hover{background:#d5e9fa;color:#142537}