@import url('./theme.css');
@import url('./adventure/adventure.css');
@import url('./homepage.css');
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; font-size: 17px; line-height: 1.6; }
a { color: inherit; } button, input { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } button { cursor: pointer; }
button, .primary, .secondary { min-height: 46px; } a { text-underline-offset: 4px; }
:focus-visible { outline: 3px solid #a33d28; outline-offset: 5px; } main:focus { outline: none; }
.skip { position: absolute; left: 20px; top: -100px; z-index: 10; padding: 12px; background: white; }.skip:focus { top: 10px; }
.site-header { max-width: 1220px; margin: auto; padding: 24px 38px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 25px; font-weight: 800; letter-spacing: -1px; }.brand-light { font-weight: 400; }.brand-icon { position: relative; display: grid; place-content: center; color: white; background: var(--green); width: 43px; height: 43px; border-radius: 14px; font-size: 23px; }.brand-icon span { position: absolute; top: -12px; right: -6px; font-size: 20px; color: var(--green); }
nav { display: flex; gap: 30px; } nav a { text-decoration: none; font-size: 15px; padding: 8px 0; color: var(--muted); } nav a[aria-current] { color: var(--green); border-bottom: 2px solid var(--green); font-weight: 700; }
.demo-label { font-size: 12px; background: #eceee2; border: 1px solid #dce1ce; border-radius: 30px; padding: 7px 12px; }.demo-label span { color: #5c7741; margin-right: 6px; }
main { max-width: 1144px; margin: auto; padding: 32px 20px 42px; min-height: calc(100vh - 185px); }
h1, h2, h3, p { margin-top: 0; }h1 { font-size: clamp(36px, 4.3vw, 58px); letter-spacing: -2.4px; line-height: 1.12; margin-bottom: 22px; }h2 { font-size: 27px; letter-spacing: -.7px; line-height: 1.3; margin-bottom: 12px; }h3 { font-size: 24px; line-height: 1.3; margin-bottom: 7px; letter-spacing: -.5px; }p { color: var(--muted); margin-bottom: 20px; }.eyebrow { text-transform: uppercase; letter-spacing: 1.8px; font-size: 11px; color: var(--green); font-weight: 800; margin-bottom: 13px; }.coral { color: #bb5a42; }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; padding: 26px 18px 45px; }.hero p:not(.eyebrow) { font-size: 16px; line-height: 1.8; }.garden-art { width: 100%; max-width: 500px; }.primary, .secondary { display: inline-flex; justify-content: center; align-items: center; gap: 28px; padding: 11px 21px; border-radius: 9px; text-decoration: none; font-size: 15px; font-weight: 700; border: 1px solid var(--green); }.primary { background: var(--green); color: #fffdf5; box-shadow: 0 3px 0 #173f30; }.primary:hover { background: #184832; }.secondary { background: transparent; color: var(--green); }.hero-note { font-size: 11px; display: block; margin-top: 13px; color: var(--muted); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 15px 0 22px; }.section-heading h2, .section-heading h1 { margin-bottom: 0; }.section-heading .eyebrow { margin-bottom: 7px; }.discovery-count { font-size: 13px; color: var(--green); }.adventure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }.adventure-card { text-decoration: none; padding: 23px 26px; border: 1px solid #dfded1; border-radius: 18px; transition: transform .15s; }.adventure-card:hover { transform: translateY(-3px); }.typing-card { background: #f2eddf; }.pointer-card { background: #e6ece5; }.card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.pill { font-size: 10px; font-weight: 800; letter-spacing: 1px; background: #fffdf8; padding: 5px 9px; border-radius: 5px; }.small { font-size: 12px; color: var(--muted); }.card-picture { height: 115px; display: flex; align-items: center; justify-content: center; gap: 24px; }.big-key { position: relative; display: grid; place-items: center; font-family: monospace; font-size: 41px; width: 69px; height: 67px; border: 2px solid #bdba9f; box-shadow: 0 5px 0 #d2cdb9; border-radius: 12px; background: #fffdf4; transform: rotate(-8deg); }.big-key:last-child { transform: rotate(8deg); }.big-key i { position: absolute; bottom: 9px; width: 19px; border-bottom: 3px solid #8d9577; }.sprout { color: #ad523d; font-size: 48px; }.card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; }.card-bottom p { margin: 0; font-size: 13px; }.round-arrow { border: 1px solid #a2b1a0; border-radius: 50%; width: 39px; height: 39px; display: grid; place-items: center; flex-shrink: 0; }.firefly-picture { position: relative; color: #617743; font-size: 44px; gap: 43px; }.firefly-picture span:nth-child(2) { font-size: 65px; color: #947320; }.firefly-picture b { font-size: 51px; color: #285d49; margin-left: -25px; margin-top: 33px; }
.kind-note { display: flex; align-items: center; gap: 18px; border-top: 1px solid var(--line); margin-top: 32px; padding: 23px 6px 0; }.kind-note > span { font-size: 34px; color: #927023; }.kind-note strong { font-size: 14px; }.kind-note p { font-size: 13px; margin: 0; }.kind-note a { margin-left: auto; font-size: 12px; }footer { max-width: 1144px; margin: auto; padding: 19px 20px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.game-top { display: flex; align-items: center; justify-content: space-between; }.game-top a { font-size: 14px; }.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 25px; align-items: start; }.panel { background: #fffdf7; border: 1px solid var(--line); border-radius: 18px; padding: 28px; }.lesson-status { display: flex; justify-content: space-between; font-size: 13px; }progress { width: 100%; height: 9px; border: 0; border-radius: 10px; overflow: hidden; margin: 13px 0; accent-color: var(--green); }progress::-webkit-progress-bar { background: #e8eadc; }progress::-webkit-progress-value { background: var(--green); }progress::-moz-progress-bar { background: var(--green); }.typing-prompt { text-align: center; }.typing-prompt .eyebrow { display: block; margin: 3px 0; }.typing-prompt strong { display: block; font: 800 88px/1.1 monospace; color: var(--green); }.typing-prompt p { font-size: 13px; margin: 8px 0 16px; }.practice-label { display: block; text-align: center; font-size: 13px; }.practice-input { display: block; width: min(100%, 340px); padding: 10px; margin: 12px auto; border-radius: 8px; border: 2px solid #8a9c7a; background: #fff; text-align: center; }.feedback { text-align: center; font-size: 14px; min-height: 25px; margin: 13px 0; color: var(--green); }.feedback.try-again { color: #914329; }.keyboard { padding: 14px 0 0; }.key-row { display: flex; justify-content: center; gap: 6px; margin: 7px 0; }.key { display: grid; place-items: center; border: 1px solid #cccfc1; border-bottom-width: 3px; border-radius: 6px; width: 43px; height: 39px; font-size: 14px; color: #5e685b; }.home-key { text-decoration: underline; text-underline-offset: 5px; }.key.active { background: var(--green); color: white; border-color: var(--green); }.coach { background: #eeefe2; }.coach-icon { font-size: 40px; color: #b25d43; }.coach h2 { font-size: 24px; }.coach p { font-size: 14px; }.coach .eyebrow { font-size: 10px; }.coach .small { font-size: 12px; margin: 20px 0 0; }.coach-tip { padding-top: 18px; border-top: 1px solid #d7dac7; font-size: 13px; color: var(--green); }kbd { border: 1px solid #aab59c; border-radius: 4px; padding: 2px 6px; background: #fffdf7; }.text-button { background: transparent; color: var(--green); padding: 8px 4px; border: 0; text-decoration: underline; font-size: 13px; }.meadow { height: 340px; position: relative; overflow: hidden; border-radius: 12px; background: #203e39; background-image: radial-gradient(circle at 18% 20%, #708176 1px, transparent 2px), radial-gradient(circle at 74% 40%, #708176 1px, transparent 2px); background-size: 87px 83px, 129px 119px; }.moon { position: absolute; right: 30px; top: 26px; border-radius: 50%; width: 30px; height: 30px; background: #c6d1b0; }.meadow-caption { position: absolute; bottom: 20px; left: 0; right: 0; color: #c6d1b0; text-align: center; font-size: 11px; letter-spacing: 1px; }.firefly { position: absolute; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: #f4df8a; border: 5px solid #d2bd6f; color: #364a35; box-shadow: 0 0 32px #ecde7d55; font-size: 36px; display: grid; place-items: center; line-height: 1; }.firefly:focus-visible { outline-color: white; }.firefly.resting { opacity: .25; }.grass { position: absolute; bottom: 34px; color: #769b7e; font-size: 46px; width: 100%; text-align: center; pointer-events: none; }.night { color: #617743; }.completion { max-width: 750px; margin: 30px auto; text-align: center; padding: 45px; }.completion h1 { font-size: 40px; }.award, .badge-icon { display: inline-grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: #edf0d9; color: #8b6525; font-size: 63px; margin-bottom: 20px; }.result { display: inline-flex; flex-direction: column; margin: 5px 0 20px; }.result strong { font-size: 40px; }.result span { font-size: 13px; }.actions { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; margin-bottom: 20px; }.muted { color: var(--muted); }.discoveries { margin: 32px 0; }.undiscovered { opacity: .45; filter: grayscale(1); }.guide { max-width: 820px; margin: auto; }.guide h1 { font-size: 42px; }.guide h2 { font-size: 23px; margin-top: 28px; }
@media (min-width: 1000px) and (max-height: 800px) { main { padding-top: 22px; }.hero { padding-top: 5px; padding-bottom: 26px; }.hero h1 { font-size: 49px; }.garden-art { max-height: 250px; }.card-picture { height: 90px; }.adventure-card { padding: 18px 24px; }.kind-note { margin-top: 23px; padding-top: 16px; }.site-header { padding-top: 18px; padding-bottom: 18px; } }
@media (max-width: 800px) { .site-header { padding: 18px 20px; flex-wrap: wrap; gap: 15px; }.demo-label { display: none; }.hero { padding: 15px 0 30px; }.hero h1 { font-size: 42px; }.game-layout { grid-template-columns: 1fr; }.coach { display: none; }.adventure-card { padding: 18px; }.card-top { align-items: flex-start; flex-direction: column; }.card-picture { height: 120px; }.firefly-picture { gap: 18px; }.big-key { width: 55px; }.sprout { display: none; }.kind-note a { display: none; } }
@media (max-width: 550px) { body { font-size: 16px; }.brand { font-size: 22px; }nav { gap: 17px; }nav a { font-size: 12px; }.hero { grid-template-columns: 1fr; }.garden-art { display: none; }.adventure-grid { grid-template-columns: 1fr; }.section-heading { align-items: flex-start; }.discovery-count { max-width: 90px; font-size: 11px; }.section-heading h2 { font-size: 24px; }.panel { padding: 18px; }.key-row { gap: 3px; }.key { width: 27px; height: 33px; font-size: 12px; }.meadow { height: 320px; }.completion { padding: 25px 18px; }.completion h1 { font-size: 34px; }footer { flex-direction: column; gap: 5px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

.dino-card-picture { justify-content: flex-end; position: relative; overflow: visible; padding-right: 25px; gap: 14px; }.dino-card-picture img { position: absolute; left: 10px; height: 140px; width: 175px; object-fit: contain; bottom: -15px; }

/* Account and classroom controls stay outside the gameplay stage. */
.account-panel{max-width:960px;margin:1.5rem auto}.account-panel form{display:grid;gap:1rem;max-width:520px;margin:1.2rem 0}.account-panel label{display:grid;gap:.4rem}.account-panel input:not([type=checkbox]),.account-panel select{font:inherit;padding:.75rem;border:1px solid #a3b8a5;border-radius:10px;background:#fffdf5;max-width:100%;min-width:0}.account-panel input[readonly]{width:100%;font-size:.8rem}.account-panel input[type=checkbox]{width:20px;height:20px}.account-panel button{margin:.3rem}.classroom-card{border-top:1px solid #c6d7c8;padding:1.5rem 0;margin-top:1.5rem;overflow-x:auto}.classroom-card table{width:100%;text-align:left}.classroom-card td,.classroom-card th{padding:.6rem}.account-status{min-height:1.5em}.student-username{font:bold 1.2rem monospace;overflow-wrap:anywhere}.sync-notice{padding:.5rem 1rem;background:#e8efdd;font-size:.85rem}.sync-notice:empty{display:none}.sync-notice[data-error=true]{background:#fff0d7}.account-link{font-size:.85rem;white-space:nowrap}
.sync-notice{position:fixed;right:12px;bottom:8px;z-index:50;max-width:min(440px,calc(100vw - 24px));border-radius:12px;box-shadow:0 2px 10px #173f3020;pointer-events:none}