.lesson-dialog label { display: block; margin-bottom: 7px; color: var(--muted); font: 10px var(--mono); text-transform: uppercase; }.lesson-answer { width: 100%; min-height: 120px; padding: 13px; resize: vertical; border: 1px solid var(--line); outline: 0; background: #fffdf8; color: var(--ink); font: 12px/1.7 var(--mono); }.lesson-answer:focus { border-color: var(--coral); }.lesson-check { width: 100%; margin-top: 10px; padding: 13px; border: 0; background: var(--ink); color: var(--paper); cursor: pointer; font: 600 11px var(--mono); }.lesson-feedback { min-height: 18px; margin: 11px 0 0; color: #bd5948; font: 11px var(--mono); }.lesson-feedback.is-correct { color: #448b75; }.lesson-start { margin-top: 17px; color: var(--muted); pointer-events: none; }.lesson-start.is-unlocked { color: var(--ink); pointer-events: auto; }
:root {
  --ink: #202321;
  --muted: #6d716c;
  --paper: #f3f1eb;
  --line: #d7d4cb;
  --coral: #ef765f;
  --lavender: #c4b8df;
  --teal: #b9d7ce;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
body:before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .22; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E"); z-index: 5; }
a { color: inherit; text-decoration: none; }
.page-shell { max-width: 1440px; margin: 0 auto; padding: 0 6.3vw; overflow: hidden; }
.site-header { height: 100px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand-lockup { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.brand-lockup img { display: block; width: 57px; height: auto; }
.brand-lockup span { color: var(--ink); font: 700 10px var(--sans); letter-spacing: .02em; }
.wordmark em { color: var(--muted); font-size: 10px; font-style: normal; text-transform: lowercase; font-weight: 500; }
.wordmark-mark { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid var(--ink); border-radius: 50%; color: var(--coral); font-family: var(--mono); font-size: 13px; font-weight: 500; text-transform: none; }
.account-area { display: flex; align-items: center; gap: 13px; margin-left: auto; margin-right: 28px; }.account-button, .logout-button { border: 0; background: transparent; color: var(--ink); cursor: pointer; font: 600 11px var(--mono); }.account-button { padding: 10px 13px; border: 1px solid var(--ink); }.account-button span { color: var(--coral); font-size: 16px; margin-left: 4px; }.account-button.signed-in { border-color: var(--teal); background: var(--teal); }.logout-button { padding: 5px 0; color: var(--muted); }.account-button:hover, .logout-button:hover { color: var(--coral); }
.auth-panel { position: fixed; inset: 0; z-index: 10; display: none; place-items: center; padding: 20px; background: rgba(32,35,33,.45); }
.auth-panel.open { display: grid; }
.auth-box { position: relative; width: min(100%, 420px); padding: 36px; background: var(--paper); box-shadow: 14px 16px 0 var(--coral); }
.auth-box h2 { margin: 0 0 22px; font-size: 3rem; }
.auth-switcher { display: flex; gap: 22px; margin-bottom: 25px; border-bottom: 1px solid var(--line); }
.auth-switch { padding: 0 0 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font: 11px var(--mono); }
.auth-switch.active { border-bottom-color: var(--coral); color: var(--ink); }
.auth-box label { display: block; margin: 14px 0 6px; color: var(--muted); font: 10px var(--mono); text-transform: uppercase; }
.auth-box input { width: 100%; padding: 11px 0; border: 0; border-bottom: 1px solid var(--ink); background: transparent; font: 14px var(--sans); }
.auth-box button { margin-top: 20px; padding: 12px; border: 0; background: var(--ink); color: var(--paper); cursor: pointer; font: 11px var(--mono); }
.auth-close { float: right; margin: 0; padding: 0; background: transparent; color: var(--ink); font-size: 22px; }
.auth-message { min-height: 18px; color: #bd5948; font: 11px var(--mono); }
.discord-button, .github-button, .profile-logout, .auth-gate-button { width: 100%; margin-top: 10px; padding: 12px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; font: 11px var(--mono); }.discord-button span, .github-button span, .auth-gate-button span { float: right; color: var(--coral); }.profile-modal { position: fixed; inset: 0; z-index: 11; display: none; place-items: center; padding: 20px; background: rgba(32,35,33,.45); }.profile-modal.open { display: grid; }.profile-dialog { position: relative; width: min(100%, 420px); padding: 42px; background: var(--paper); box-shadow: 14px 16px 0 var(--teal); }.profile-dialog h2 { margin-bottom: 28px; font-size: 3.4rem; }.profile-email { margin-bottom: 8px; font: 15px var(--sans); word-break: break-word; }.profile-status { color: #448b75; font: 11px var(--mono); }.profile-logout { margin-top: 25px; background: var(--ink); color: var(--paper); }.auth-gate { position: fixed; inset: 0; z-index: 8; display: none; place-items: center; align-content: center; padding: 30px; background: var(--paper); text-align: center; }.auth-gate h2 { margin-bottom: 22px; font-size: clamp(3rem, 7vw, 6rem); }.auth-gate p:not(.eyebrow) { max-width: 320px; margin: 0 auto 25px; color: var(--muted); font-size: 14px; line-height: 1.7; }.auth-gate-button { width: auto; min-width: 255px; margin: 0; background: var(--ink); color: var(--paper); }.auth-required .auth-gate { display: grid; }.auth-required main, .auth-required .site-footer { visibility: hidden; pointer-events: none; }
.site-nav { display: flex; align-items: center; gap: 38px; color: #555a54; font-size: 12px; }
.site-nav a { transition: color .2s ease; }.site-nav a:hover, .site-nav a:last-child { color: var(--ink); }.site-nav a:last-child span { color: var(--coral); font-size: 16px; margin-left: 5px; }
.lessons-page { min-height: calc(100vh - 100px); padding: 96px 0 120px; }.lessons-intro { display: flex; justify-content: space-between; align-items: end; gap: 40px; padding-bottom: 52px; border-bottom: 1px solid var(--ink); }.lessons-intro h1 { max-width: 680px; margin: 0; }.lessons-intro-copy { max-width: 300px; margin: 0 5vw 6px 0; color: var(--muted); font-size: 13px; line-height: 1.75; }.lesson-toolbar { display: grid; grid-template-columns: 1.4fr .7fr .7fr; gap: 12px; padding: 25px 0; border-bottom: 1px solid var(--line); }.lesson-control { min-width: 0; padding: 13px 14px; border: 1px solid var(--line); outline: 0; background: transparent; color: var(--ink); font: 11px var(--mono); }.lesson-control:focus { border-color: var(--coral); }.lesson-count { margin: 25px 0 13px; color: var(--muted); font: 10px var(--mono); text-transform: uppercase; }.lesson-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.lesson-card { min-height: 225px; padding: 24px; display: flex; flex-direction: column; border-top: 3px solid var(--teal); background: #ebe9e2; }.lesson-card:nth-child(3n + 2) { border-top-color: var(--lavender); }.lesson-card:nth-child(3n) { border-top-color: #f0b16d; }.lesson-number { color: var(--coral); font: 10px var(--mono); }.lesson-card h2 { margin: 28px 0 12px; font: 600 24px/1.05 var(--serif); letter-spacing: 0; }.lesson-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }.lesson-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 20px; color: var(--muted); font: 9px var(--mono); text-transform: uppercase; }.lesson-pagination { display: flex; justify-content: center; align-items: center; gap: 17px; margin-top: 38px; }.lesson-pagination button { min-width: 36px; height: 36px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; font: 10px var(--mono); }.lesson-pagination button.active, .lesson-pagination button:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }.lesson-pagination button:disabled { opacity: .35; cursor: default; }.lesson-page-label { color: var(--muted); font: 10px var(--mono); }
.discord-page { min-height: calc(100vh - 100px); display: grid; place-items: center; padding: 100px 0 130px; }.discord-hero { width: min(100%, 900px); display: grid; grid-template-columns: 1fr .8fr; gap: 70px; align-items: center; }.discord-hero h1 { margin: 0 0 28px; }.discord-copy { max-width: 430px; color: var(--muted); font-size: 15px; line-height: 1.8; }.discord-join { display: inline-flex; align-items: center; justify-content: space-between; width: min(100%, 360px); margin-top: 28px; padding: 17px 20px; background: #5865f2; color: #fff; font: 600 12px var(--mono); }.discord-join span { font-size: 20px; }.discord-mark { display: grid; place-items: center; aspect-ratio: 1; background: var(--lavender); color: #5865f2; font: 700 clamp(5rem, 13vw, 10rem) var(--sans); box-shadow: 18px 20px 0 var(--teal); }
.discord-request { display: inline-flex; justify-content: space-between; align-items: center; gap: 18px; width: min(100%, 360px); margin-top: 12px; padding: 14px 20px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; text-align: left; font: 600 11px var(--mono); }.discord-request span { color: var(--coral); font-size: 18px; }
.nav-action { padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.nav-request { color: var(--ink) !important; font-weight: 700 !important; }
.nav-request:hover, .nav-request:focus-visible { color: var(--coral) !important; outline: none; }
.bots-page { min-height: calc(100vh - 100px); padding: 96px 0 120px; }.bots-intro { display: flex; justify-content: space-between; align-items: end; gap: 50px; padding-bottom: 52px; border-bottom: 1px solid var(--ink); }.bots-intro h1 { margin: 0; }.bots-intro > p { max-width: 300px; margin: 0 5vw 6px 0; color: var(--muted); font-size: 13px; line-height: 1.75; }.bot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 25px; }.bot-card { min-height: 330px; padding: 26px; display: flex; flex-direction: column; }.bot-card-teal { background: var(--teal); }.bot-card-lavender { background: var(--lavender); }.bot-card-orange { background: #f0b16d; }.bot-index { color: var(--muted); font: 10px var(--mono); }.bot-card h2 { margin: auto 0 15px; font: 600 32px/.95 var(--serif); }.bot-card p { max-width: 250px; margin: 0 0 24px; font-size: 13px; line-height: 1.65; }.bot-card a { display: flex; justify-content: space-between; padding-top: 14px; border-top: 1px solid rgba(32,35,33,.35); font: 600 11px var(--mono); }.bot-card a span { color: var(--coral); font-size: 18px; }.bot-card a:hover span { transform: translate(3px, 3px); }.oauth-page { min-height: 100vh; display: grid; place-items: center; padding: 30px; }.oauth-shell { width: min(100%, 700px); }.oauth-card { padding: clamp(30px, 6vw, 64px); background: #ebe9e2; box-shadow: 18px 20px 0 var(--teal); }.oauth-card h1 { margin-bottom: 27px; font-size: clamp(3rem, 7vw, 5.8rem); }.oauth-copy { max-width: 400px; margin-bottom: 36px; color: var(--muted); font-size: 14px; line-height: 1.75; }.oauth-permissions { margin: 0 0 32px; padding: 0; list-style: none; border-top: 1px solid var(--ink); }.oauth-permissions li { display: flex; gap: 20px; padding: 19px 0; border-bottom: 1px solid var(--line); }.oauth-permissions li > span { color: var(--coral); font: 10px var(--mono); }.oauth-permissions strong, .oauth-permissions small { display: block; }.oauth-permissions strong { margin-bottom: 5px; font: 600 15px var(--sans); }.oauth-permissions small { color: var(--muted); font-size: 12px; line-height: 1.5; }.oauth-actions { display: flex; align-items: center; gap: 24px; }.oauth-accept { display: flex; justify-content: space-between; min-width: 230px; padding: 14px 17px; border: 0; background: var(--ink); color: var(--paper); cursor: pointer; font: 600 11px var(--mono); }.oauth-accept span { color: var(--coral); font-size: 17px; }.oauth-cancel { color: var(--muted); font: 11px var(--mono); }.oauth-accept:hover, .oauth-accept:focus-visible { background: var(--coral); color: var(--ink); outline: none; }
 .discord-join, .discord-request { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }.discord-join:hover, .discord-request:hover, .discord-join:focus-visible, .discord-request:focus-visible { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); outline: none; }.discord-request:hover, .discord-request:focus-visible { background: var(--teal); }.discord-page .discord-copy { margin-bottom: 0; }.lesson-dialog .request-form { border-top-color: var(--line); }.lesson-dialog .request-field label { color: var(--ink); }
@media (max-width: 700px) { .bots-page { padding: 70px 0 90px; }.bots-intro { display: block; }.bots-intro > p { margin: 25px 0 0; }.bot-grid { display: block; }.bot-card { min-height: 290px; margin-bottom: 12px; }.oauth-page { padding: 18px; }.oauth-card { padding: 30px 22px; box-shadow: 8px 10px 0 var(--teal); }.oauth-card h1 { font-size: 3rem; }.oauth-actions { align-items: stretch; flex-direction: column; gap: 16px; }.oauth-accept { width: 100%; } }
.lesson-modal { width: min(92vw, 620px); max-height: 90vh; padding: 0; border: 0; background: transparent; }.lesson-modal::backdrop { background: rgba(32,35,33,.48); }.lesson-dialog { position: relative; max-height: 90vh; overflow-y: auto; padding: 42px; background: var(--paper); box-shadow: 14px 16px 0 var(--teal); }.lesson-dialog h2 { margin-bottom: 25px; font-size: 3.4rem; }.lesson-close { position: absolute; top: 14px; right: 18px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font: 24px var(--sans); }.lesson-dialog .request-field { padding: 15px 0; }.lesson-dialog .request-submit { margin-bottom: 0; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 20px; margin-top: 6px; }
.request-page { min-height: calc(100vh - 100px); padding: 96px 0 120px; }.request-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 9vw; max-width: 1050px; margin: 0 auto; }.request-intro h1 { margin-bottom: 30px; }.request-intro > p:not(.eyebrow) { max-width: 330px; margin-bottom: 30px; color: var(--muted); font-size: 14px; line-height: 1.8; }.request-form { padding-top: 2px; border-top: 1px solid var(--ink); }.request-field { padding: 22px 0; border-bottom: 1px solid var(--line); }.request-field label { display: block; margin-bottom: 10px; color: var(--muted); font: 10px var(--mono); text-transform: uppercase; }.request-field label span { color: var(--coral); }.request-field input, .request-field select, .request-field textarea { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: 14px/1.6 var(--sans); }.request-field input, .request-field select { padding: 5px 0; }.request-field textarea { min-height: 75px; padding: 5px 0; resize: vertical; }.request-field input:focus, .request-field select:focus, .request-field textarea:focus { box-shadow: 0 1px 0 var(--coral); }.request-field small { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; }.request-submit { display: flex; justify-content: space-between; width: 100%; margin-top: 25px; padding: 15px 18px; border: 0; background: var(--ink); color: var(--paper); cursor: pointer; font: 600 11px var(--mono); }.request-submit span { color: var(--coral); font-size: 18px; }.request-notice { margin-bottom: 20px; padding: 14px 16px; font: 11px/1.6 var(--mono); }.request-success { background: var(--teal); }.request-error { background: #f3c0b4; color: #7a3026; }
.menu-toggle { display: none; background: none; border: 0; color: var(--ink); font: 500 12px var(--mono); }
.menu-toggle span { color: var(--coral); font-size: 17px; margin-left: 5px; }
.section-pad { padding: 126px 0; }.hero { min-height: 650px; display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 5vw; padding-top: 96px; }
.eyebrow { margin: 0 0 26px; color: var(--muted); font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }.eyebrow-dot { display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--coral); }
h1, h2, h3, p { margin-top: 0; }h1, h2 { font: 600 clamp(3.5rem, 7vw, 7rem)/.88 var(--serif); letter-spacing: -.03em; }h1 i, h2 i { color: var(--coral); font-style: italic; font-weight: 500; }
.hero-intro { max-width: 370px; margin: 34px 0 32px; color: var(--muted); font-size: 15px; line-height: 1.75; }.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 20px; margin-top: 6px; }.text-link { display: inline-flex; gap: 20px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--ink); font-size: 12px; font-weight: 700; }.text-link span { color: var(--coral); font-size: 18px; transition: transform .2s ease; }.text-link:hover span { transform: translate(3px, 3px); }
.hero-art { position: relative; min-height: 440px; background: var(--lavender); }.art-sun { position: absolute; top: 37px; right: 11%; width: 94px; height: 94px; border-radius: 50%; background: var(--coral); }.code-card { position: absolute; z-index: 1; top: 94px; left: 8%; width: 86%; background: #fbfaf5; box-shadow: 15px 18px 0 rgba(32,35,33,.1); }.window-bar { display: flex; align-items: center; gap: 5px; height: 35px; padding: 0 13px; border-bottom: 1px solid var(--line); }.window-bar span { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }.window-bar span:nth-child(2) { background: #b7d8ad; }.window-bar span:nth-child(3) { background: #e7c27a; }.window-bar small { margin-left: auto; color: var(--muted); font: 9px var(--mono); }.code-lines { padding: 25px 23px 27px; font: 11px/2 var(--mono); }.code-lines p { margin: 0; }.code-lines b { display: inline-block; width: 25px; color: #b7b7b0; font-weight: 400; }.purple { color: #8b6eaf; }.orange { color: #d36c4d; }.teal { color: #4e9b88; }.code-lines strong { color: #397b70; font-weight: 500; }.code-lines .blank { height: 12px; }.art-caption { position: absolute; right: 8%; bottom: 26px; left: 8%; display: flex; justify-content: space-between; color: #675d7d; font: 10px/1.5 var(--mono); text-transform: uppercase; }.art-caption span:last-child { text-align: right; text-transform: none; font-family: var(--sans); }
.workbench { display: grid; grid-template-columns: .75fr 1.25fr; gap: 8vw; border-top: 1px solid var(--line); }.workbench-intro h2 { margin-bottom: 27px; font-size: clamp(2.8rem, 5vw, 5.2rem); }.workbench-intro > p:last-child { max-width: 290px; margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }.playground { overflow: hidden; background: #252725; color: #f3f1eb; box-shadow: 14px 16px 0 var(--lavender); }.playground-top { display: flex; justify-content: space-between; align-items: center; padding: 15px 19px; border-bottom: 1px solid #474b47; color: #babeb7; font: 10px var(--mono); }.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #dfb16c; }.status-dot.ready { background: #75bf9e; }.file-label { color: #81877f; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }.playground textarea { display: block; width: 100%; min-height: 235px; padding: 24px 20px; resize: vertical; border: 0; outline: 0; background: #1d201e; color: #d9c9ed; font: 12px/1.85 var(--mono); tab-size: 4; }.playground textarea:focus { box-shadow: inset 0 0 0 1px var(--coral); }.playground-actions { display: flex; align-items: center; gap: 17px; padding: 14px 19px; border-top: 1px solid #474b47; }.run-button, .reset-button { border: 0; font: 600 11px var(--mono); cursor: pointer; }.run-button { padding: 11px 15px; background: var(--coral); color: var(--ink); }.run-button:disabled { cursor: wait; opacity: .65; }.run-button span { margin-right: 5px; font-size: 9px; }.reset-button { padding: 9px 0; background: transparent; color: #c7cbc3; }.shortcut { margin-left: auto; color: #747a72; font: 9px var(--mono); }.spinner { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border: 1px solid var(--ink); border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }.output-panel { margin: 0 19px 19px; padding: 14px 15px; min-height: 93px; background: #303431; }.output-label { margin-bottom: 10px; color: #90968d; font: 9px var(--mono); text-transform: uppercase; }.output-label span { float: right; color: #75bf9e; }.output-panel pre { margin: 0; white-space: pre-wrap; color: #d7ded4; font: 11px/1.6 var(--mono); }.output-panel pre.error { color: #f19a84; }@keyframes spin { to { transform: rotate(360deg); } }
.principles { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; border-top: 1px solid var(--line); }.section-heading h2 { margin: 0; font-size: clamp(2.7rem, 5vw, 5.2rem); }.principle-list { border-top: 1px solid var(--ink); }.principle { display: grid; grid-template-columns: 45px 1fr 25px; gap: 18px; padding: 27px 0 31px; border-bottom: 1px solid var(--line); }.principle-number, .note-meta { color: var(--coral); font: 10px var(--mono); }.principle h3 { margin-bottom: 10px; font: 600 22px var(--serif); }.principle p { max-width: 460px; margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }.principle-arrow { align-self: start; font-size: 19px; }.field-notes { border-top: 1px solid var(--line); }.notes-top { display: flex; justify-content: space-between; align-items: baseline; }.notes-top .eyebrow { margin-bottom: 0; }.note-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 15px; margin-top: 45px; }.note-card { min-height: 365px; padding: 29px; display: flex; flex-direction: column; }.note-feature { background: var(--teal); }.note-small { background: var(--lavender); }.orange-card { background: #f0b16d; }.note-meta { display: flex; justify-content: space-between; color: var(--ink); }.note-card h2 { margin-top: auto; margin-bottom: 18px; font-size: clamp(2.6rem, 4vw, 4.5rem); }.note-card h3 { margin-top: auto; margin-bottom: 20px; font: 600 29px/.98 var(--serif); }.note-card p { max-width: 330px; margin-bottom: 26px; font-size: 13px; line-height: 1.65; }.note-card a { display: flex; justify-content: space-between; padding-top: 14px; border-top: 1px solid rgba(32,35,33,.4); font: 600 11px var(--mono); }.note-graphic { height: 60px; color: rgba(32,35,33,.35); font: 48px var(--serif); }.note-graphic span { color: var(--coral); }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 10vw; align-items: end; border-top: 1px solid var(--line); }.contact h2 { margin-bottom: 27px; font-size: clamp(3rem, 5vw, 5.3rem); }.contact-copy > p:last-child { max-width: 315px; margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }.signup-form { padding-bottom: 11px; }.signup-form label { display: block; margin-bottom: 12px; font: 10px var(--mono); color: var(--muted); text-transform: uppercase; }.input-row { display: flex; border-bottom: 1px solid var(--ink); }.input-row input { flex: 1; min-width: 0; padding: 13px 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 15px var(--sans); }.input-row input::placeholder { color: #999b95; }.input-row button { width: 45px; border: 0; background: none; color: var(--coral); font-size: 25px; cursor: pointer; }.form-success { margin-top: 14px; color: #448b75; font: 12px var(--mono); }.site-footer { display: flex; justify-content: space-between; padding: 26px 0 34px; border-top: 1px solid var(--line); color: var(--muted); font: 10px var(--mono); }.site-footer a { color: var(--ink); }
.reveal { animation: rise .8s both; }.hero-copy { animation-delay: .08s; }.hero-art { animation-delay: .18s; }.principle:nth-child(2) { animation-delay: .1s; }.principle:nth-child(3) { animation-delay: .2s; }.note-card:nth-child(2) { animation-delay: .1s; }.note-card:nth-child(3) { animation-delay: .2s; } @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) { .page-shell { padding: 0 20px; }.site-header { height: 78px; }.site-nav { position: absolute; top: 78px; right: 20px; left: 20px; z-index: 3; display: none; padding: 20px; flex-direction: column; align-items: flex-start; gap: 18px; background: var(--paper); border: 1px solid var(--line); }.site-nav.is-open { display: flex; }.menu-toggle { display: block; }.section-pad { padding: 80px 0; }.hero { display: block; min-height: auto; padding-top: 76px; }.hero h1 { font-size: clamp(3.5rem, 17vw, 6rem); }.hero-art { min-height: 340px; margin-top: 70px; }.code-card { top: 68px; left: 5%; width: 90%; }.code-lines { padding: 17px 12px; font-size: 8px; }.code-lines b { width: 20px; }.workbench, .principles, .contact { display: block; }.workbench-intro { margin-bottom: 54px; }.workbench-intro h2 { font-size: 3.3rem; }.playground { box-shadow: 8px 10px 0 var(--lavender); }.playground textarea { min-height: 220px; font-size: 10px; }.shortcut { display: none; }.section-heading { margin-bottom: 54px; }.principles h2 { font-size: 3.3rem; }.principle { grid-template-columns: 32px 1fr 20px; gap: 8px; }.principle h3 { font-size: 20px; }.note-grid { display: block; }.note-card { min-height: 330px; margin-bottom: 12px; }.note-card h2 { font-size: 3.2rem; }.contact-copy { margin-bottom: 54px; }.contact h2 { font-size: 3.5rem; }.site-footer { gap: 18px; flex-wrap: wrap; line-height: 1.5; }.request-page { padding: 70px 0 90px; }.request-layout { display: block; }.request-intro { margin-bottom: 55px; }.request-intro h1 { font-size: 3.5rem; }.discord-hero { display: block; }.discord-mark { max-width: 360px; margin-top: 70px; }.lesson-modal { width: calc(100vw - 24px); }.lesson-dialog { padding: 32px 20px 24px; }.lesson-dialog h2 { font-size: 2.7rem; } }

/* IDE workspace */
.workbench { display: block; margin-right: calc(-6.3vw); margin-left: calc(-6.3vw); padding-right: 6.3vw; padding-left: 6.3vw; background: #e9e7e0; }
\.workbench-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 42px; }
.workbench-heading h2 { margin: 0; font-size: clamp(3rem, 5vw, 5.4rem); }
.workbench-heading > p { max-width: 270px; margin: 0 7vw 5px 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.playground { width: 100%; min-height: 700px; box-shadow: 18px 20px 0 var(--lavender); }
.ide-titlebar { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 18px; background: #303331; color: #b8beb8; font: 10px var(--mono); }
.traffic-lights { display: flex; gap: 7px; }.traffic-lights span { width: 10px; height: 10px; border-radius: 50%; background: #ec7662; }.traffic-lights span:nth-child(2) { background: #e4be6d; }.traffic-lights span:nth-child(3) { background: #76b696; }.ide-title { margin-left: 70px; }.ide-title b { color: #68716a; font-weight: 400; }.ide-actions { color: #828981; font-size: 13px; }
.ide-body { display: flex; min-height: 605px; background: #1e2020; }.file-rail { position: relative; width: 230px; flex: 0 0 230px; padding: 22px 0; border-right: 1px solid #353a37; color: #89918a; font: 10px var(--mono); }.rail-heading { padding: 0 22px 22px; color: #d3d8d1; font-size: 10px; letter-spacing: .1em; }.project-name { padding: 9px 22px; color: #c6ccc5; font-size: 9px; }.project-name span { color: var(--coral); }.file-item { padding: 10px 22px 10px 42px; color: #8f9890; }.file-item.active { background: #343936; color: #f3f1eb; border-left: 2px solid var(--coral); padding-left: 40px; }.python-file { color: #e8c16e; }.text-file { color: #6eb3d0; }.folder-file { color: #9ca59c; }.rail-footer { position: absolute; right: 0; bottom: 24px; left: 22px; color: #69736b; line-height: 2.6; }
.file-menu { position: absolute; z-index: 2; top: 75px; left: 42px; width: 150px; padding: 5px 0; background: #303331; border: 1px solid #4a514b; box-shadow: 8px 8px 0 rgba(0,0,0,.2); }.file-menu button { display: block; width: 100%; padding: 9px 12px; border: 0; background: transparent; color: #dce2db; text-align: left; cursor: pointer; font: 10px var(--mono); }.file-menu button:hover { background: #3b423d; color: #fff; }.file-menu button[data-action="delete"] { color: #f19a84; }
.editor-column { display: flex; min-width: 0; flex: 1; flex-direction: column; }.editor-tabs { display: flex; height: 43px; background: #292c2a; border-bottom: 1px solid #3a3e3a; }.editor-tab { display: flex; align-items: center; gap: 9px; padding: 0 17px; color: #8f9790; border-right: 1px solid #3a3e3a; font: 10px var(--mono); }.editor-tab.active { background: #1e2020; color: #e4e8e1; border-top: 2px solid var(--coral); }.tab-close { margin-left: 13px; color: #7b847b; font-size: 16px; }.editor-tab-add { padding: 11px 16px; color: #778078; font-size: 17px; }.CodeMirror { flex: 0 0 370px; height: 370px; background: #1e2020; color: #d7ded5; font: 13px/1.75 var(--mono); }.CodeMirror-gutters { background: #1e2020; border-right: 0; }.CodeMirror-linenumber { padding: 0 18px 0 12px; color: #566058; }.CodeMirror-cursor { border-left: 2px solid var(--coral); }.cm-s-material-palenight .cm-keyword { color: #c792ea; }.cm-s-material-palenight .cm-def { color: #82aaff; }.cm-s-material-palenight .cm-string { color: #c3e88d; }.cm-s-material-palenight .cm-variable { color: #f07178; }.cm-s-material-palenight .cm-comment { color: #69766d; }.cm-s-material-palenight .cm-number { color: #f78c6c; }
.playground-actions { min-height: 49px; }.branch-label { color: #788278; font: 10px var(--mono); }.terminal-symbol { color: var(--coral); font-size: 13px; }.output-panel { flex: 1; min-height: 120px; margin-top: 0; }.ide-statusbar { display: flex; justify-content: space-between; padding: 8px 17px; background: #397b70; color: #dce9e2; font: 9px var(--mono); }
.file-item, .editor-tab, .editor-tab-add { appearance: none; border: 0; border-radius: 0; cursor: pointer; font-family: var(--mono); }.file-item { display: block; width: 100%; text-align: left; }.file-item:hover { background: #2b302d; color: #eef1eb; }.editor-tab { background: transparent; }.editor-tab-add { background: transparent; }
.auth-modal { position: fixed; inset: 0; z-index: 10; display: none; place-items: center; overflow-y: auto; padding: 20px; background: rgba(32,35,33,.45); }.auth-modal.open { display: grid; }.auth-dialog { position: relative; width: min(100%, 440px); max-height: min(90vh, 720px); margin: auto; overflow-y: auto; padding: 42px; background: var(--paper); box-shadow: 14px 16px 0 var(--coral); }.auth-dialog h2 { margin-bottom: 29px; font-size: 3.4rem; }.auth-close { position: absolute; top: 16px; right: 18px; border: 0; background: transparent; color: var(--muted); font: 24px var(--sans); cursor: pointer; }.auth-switcher { display: flex; gap: 22px; margin-bottom: 25px; border-bottom: 1px solid var(--line); }.auth-switch { padding: 0 0 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font: 11px var(--mono); }.auth-switch.active { border-bottom-color: var(--coral); color: var(--ink); }.auth-dialog label { display: block; margin: 17px 0 7px; color: var(--muted); font: 10px var(--mono); text-transform: uppercase; }.auth-dialog input { width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--ink); outline: 0; background: transparent; color: var(--ink); font: 15px var(--sans); }.auth-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 12px; }.auth-reset-button { padding: 10px 14px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; font: 600 11px var(--mono); transition: background .2s ease, color .2s ease; }.auth-reset-button:hover, .auth-reset-button:focus-visible { background: var(--ink); color: var(--paper); outline: none; }.auth-reset-link { padding: 0; border: 0; background: transparent; color: var(--coral); cursor: pointer; font: 600 11px var(--mono); text-decoration: underline; text-underline-offset: 2px; }.auth-captcha { margin-top: 20px; display: flex; justify-content: center; min-height: 72px; }.auth-captcha .h-captcha { width: 100%; max-width: 300px; }.auth-submit { width: 100%; margin-top: 27px; padding: 14px; border: 0; background: var(--ink); color: var(--paper); cursor: pointer; font: 600 11px var(--mono); }.auth-submit span { float: right; color: var(--coral); font-size: 17px; }.auth-submit:disabled { opacity: .55; cursor: wait; }.auth-message { min-height: 16px; margin: 13px 0 0; color: #bd5948; font: 11px var(--mono); }
@media (max-width: 700px) { .auth-modal { padding: 12px 12px 40px; }.auth-dialog { width: min(100%, 360px); max-height: 84vh; padding: 32px 20px 24px; } .auth-dialog h2 { font-size: 2.7rem; } .workbench { margin-right: -20px; margin-left: -20px; padding-right: 20px; padding-left: 20px; }.workbench-heading { display: block; margin-bottom: 35px; }.workbench-heading > p { margin: 25px 0 0; }.playground { min-height: 590px; box-shadow: 8px 10px 0 var(--lavender); }.ide-title { margin-left: 0; }.ide-actions { display: none; }.file-rail { width: 46px; flex-basis: 46px; padding-top: 19px; }.rail-heading, .project-name, .file-item { overflow: hidden; width: 46px; padding-right: 0; padding-left: 16px; white-space: nowrap; }.file-item.active { padding-left: 14px; }.rail-footer { left: 14px; font-size: 0; }.rail-footer:first-letter { font-size: 14px; }.CodeMirror { flex-basis: 290px; height: 290px; font-size: 10px; }.CodeMirror-linenumber { padding-right: 10px; padding-left: 6px; }.playground-actions { flex-wrap: wrap; gap: 11px; }.shortcut { display: none; }.ide-statusbar span:nth-child(2) { display: none; } }

.lesson-card { cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }.lesson-card:hover, .lesson-card:focus-visible { transform: translateY(-4px); box-shadow: 8px 8px 0 var(--lavender); outline: none; }.lesson-modal { position: fixed; inset: 0; z-index: 20; display: none; overflow-y: auto; padding: 24px; background: rgba(32,35,33,.55); }.lesson-modal.open { display: block; }.lesson-dialog { position: relative; width: min(100%, 620px); height: calc(100vh - 48px); max-height: calc(100vh - 48px); margin: 0 auto; overflow-y: scroll; padding: 42px; background: var(--paper); box-shadow: 14px 16px 0 var(--coral); }.lesson-modal-close { position: absolute; top: 14px; right: 18px; border: 0; background: transparent; color: var(--muted); font: 26px var(--sans); cursor: pointer; }.lesson-dialog h2 { margin-bottom: 20px; font-size: clamp(2.4rem, 5vw, 4.5rem); }.lesson-modal-detail { color: var(--muted); font-size: 14px; line-height: 1.7; }.lesson-example { margin: 26px 0; padding: 18px; overflow-x: auto; background: #252725; color: #d9e6d8; font: 12px/1.7 var(--mono); }.lesson-start { display: flex; justify-content: space-between; padding-top: 15px; border-top: 1px solid var(--line); font: 600 11px var(--mono); }.lesson-start span { color: var(--coral); font-size: 18px; }
dialog.lesson-modal:not([open]) { display: none; } dialog.lesson-modal[open] { display: block; }