@font-face{font-family:system-fallback;src:local('Arial')}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:#fbfcfd;color:#172c43;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #3b77e3;outline-offset:5px}.wrap{width:min(1240px,calc(100% - 96px));margin-inline:auto}.header{height:94px;display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid #e3e8ee}.brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:750;letter-spacing:-1px}.brand img{border-radius:9px}.brand-dot{color:#387be3}.header nav{display:flex;align-items:center;margin-left:auto;gap:34px;font-size:15px;color:#5d6b7b}.header nav a:hover{color:#2864c2}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;padding:15px 22px;border-radius:7px;font-size:13px;font-weight:650;line-height:1.5;transition:background .2s,transform .2s}.button:hover{transform:translateY(-2px)}.button.blue{background:#3272db;color:white;box-shadow:0 4px 9px #1e5dc71c}.button.blue:hover{background:#235db8}.button.dark{background:#1b3047;color:#fff}.button.dark:hover{background:#304e70}.button.small{padding:11px 17px;font-size:12px}.hero{padding-top:70px}.hero-top{display:grid;grid-template-columns:1.45fr 1fr;align-items:center;gap:60px;margin-bottom:47px}.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:700;display:flex;align-items:center;gap:8px;color:#6e7f91}.status-dot{display:inline-block;background:#347cda;width:6px;height:6px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 4px #347cda10}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(38px,4.25vw,63px);font-weight:650;line-height:1.12;letter-spacing:-2.7px;margin:22px 0 0}h1>span{color:#3475d8}.hero-intro{padding:23px 0 0;max-width:365px;justify-self:end}.hero-intro p{font-size:15px;color:#647487;line-height:1.85;margin-bottom:24px}.micro{font-size:10px;color:#85909d;margin-top:12px;letter-spacing:.1px}.showcase{width:min(1040px,88%);margin-inline:auto;border:0;overflow:hidden;background:transparent;box-shadow:none;position:relative}.app-screenshot{border:0;padding:0;display:block;width:100%;background:transparent;position:relative}.app-screenshot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:contain}.hero-bottom{display:flex;align-items:center;gap:32px;color:#7b8897;font-size:11px;padding:25px 0;border-bottom:1px solid #e2e8ef}.hero-bottom>span{display:flex;align-items:center;gap:7px}.mini-icon{font-size:16px;color:#7b96b6}.hero-bottom>a{margin-left:auto;color:#375a82}.hero-bottom>a span{margin-left:17px}.section{padding-block:105px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:55px;margin-bottom:43px}.section-heading h2,h2{font-size:40px;font-weight:600;letter-spacing:-1.5px;line-height:1.18;margin:17px 0 0}.section-heading>p,.section-heading>div>p{max-width:340px;color:#7c8795;font-size:13px;line-height:1.9;margin:0 0 5px}.explore-grid{display:grid;grid-template-columns:.82fr 1.4fr;gap:40px;align-items:center}.feature-tabs{display:flex;flex-direction:column;gap:8px}.feature-tab{display:flex;align-items:flex-start;text-align:left;padding:23px 19px;gap:13px;background:transparent;border:1px solid transparent;border-radius:8px;color:#7d8997;line-height:1.65}.feature-tab.active{background:#eff4fc;border-color:#dce6f6;color:#5d7596}.tab-num{font-size:10px;padding-top:4px;color:#92a3b8}.feature-tab strong{display:block;color:#283c53;font-size:14px;margin-bottom:5px;font-weight:650}.feature-tab>span>span{display:block;font-size:12px;max-width:265px}.feature-tab b{font-weight:400;margin-left:auto;color:#3f79cf;font-size:18px}.feature-visual{background:#eaf0f8;border:1px solid #dfe7f1;padding:19px;border-radius:10px}.visual-label{display:flex;align-items:center;gap:10px;font-size:8px;letter-spacing:1.5px;color:#6d86a5;margin:0 0 15px 3px}.feature-visual .app-screenshot{border:1px solid #d9e0e9;border-radius:6px;overflow:hidden;box-shadow:0 10px 30px #25457010}.packages-section{background:#f0f3f7;border-block:1px solid #e8edf3}.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:19px}.package-card{border:1px solid #e1e5ec;background:#fcfdff;padding:29px;border-radius:9px}.package-icon{width:43px;height:43px;border-radius:10px;display:grid;place-items:center;font-size:25px;margin-bottom:24px;color:#8976b7;background:#f0ebf8}.school .package-icon{color:#b89147;background:#f7f1e5}.animal .package-icon{color:#5d9e8a;background:#e9f5ee}.package-meta{font-size:8px;color:#8b95a4;letter-spacing:1.1px;font-weight:600}.package-card h3{font-size:23px;letter-spacing:-.6px;font-weight:600;margin:9px 0 12px}.package-card p{font-size:12px;line-height:1.9;color:#7c8795;min-height:70px}.package-tag{display:block;border-top:1px solid #e9edf2;padding-top:17px;font-size:10px;color:#8a96a5}.schulgram{display:grid;grid-template-columns:.8fr 1.5fr;gap:38px;align-items:center;margin-top:22px;padding:37px;background:#e2eaf6;border:1px solid #d6e1f0;border-radius:9px;overflow:hidden}.pill{display:inline-block;padding:4px 9px;border:1px solid #b8cbe5;border-radius:5px;color:#587ba8;font-size:9px}.schulgram h3{font-size:32px;line-height:1.15;letter-spacing:-1px;font-weight:600;margin:20px 0 15px}.schulgram p{font-size:12px;line-height:1.9;color:#73849b;max-width:310px}.schulgram .package-meta{color:#7d90a9;margin:23px 0}.text-link{font-size:11px;font-weight:600;color:#386aac;display:inline-flex;gap:25px;align-items:center}.schulgram-image{border:1px solid #c8d5e6;border-radius:7px;overflow:hidden;box-shadow:0 16px 35px #203e6b18}.section-heading>div>.text-link{margin-top:18px}.teacher-workspace{display:grid;grid-template-columns:.72fr 1.4fr;border:1px solid #e4e6ec;border-radius:10px;overflow:hidden;background:#f5f4f9}.teacher-side{padding:37px 30px}.teacher-side .pill{background:#f3edf9;border-color:#e0d6ed;color:#8f74a8}.teacher-side h3{font-size:26px;font-weight:600;line-height:1.2;letter-spacing:-.9px;margin:19px 0 30px}.teacher-side ol{padding:0;list-style:none;margin:0;display:grid;gap:22px}.teacher-side li{display:flex;gap:13px}.teacher-side li>span{background:#eae4f3;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;color:#8d77a9;flex-shrink:0;font-size:10px}.teacher-side li strong{font-size:11px;font-weight:600}.teacher-side li p{color:#9391a1;font-size:11px;line-height:1.7;margin:4px 0 0;max-width:230px}.teacher-shot{padding:37px 28px 20px 0;align-self:center}.teacher-shot .app-screenshot{border:1px solid #dedae5;border-radius:6px;overflow:hidden;box-shadow:0 15px 40px #4d2e7a10}.download-section{background:#edf3fb;border-block:1px solid #e1eaf6}.download-heading{text-align:center;margin-bottom:38px}.download-heading .eyebrow{justify-content:center}.download-heading h2{font-size:46px;margin-bottom:17px}.download-heading p{font-size:13px;color:#7e8fa6}.download-grid{max-width:940px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:20px}.download-card{padding:34px;background:#fff;border:1px solid #dbe5f1;border-radius:10px}.edition{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:26px}.edition img{border-radius:12px}.edition>span:last-child{font-size:8px;letter-spacing:1.4px;color:#8c9bb0}.teacher-mark{width:52px;height:52px;display:grid;place-items:center;background:#ece7f6;border-radius:12px;color:#8c74af;font-size:30px}.download-card h3{font-size:27px;letter-spacing:-.8px;font-weight:600;margin:0 0 8px}.download-card p{font-size:12px;color:#8290a1}.download-card ul{padding:19px 0 25px;list-style:none;margin:0;font-size:11px;line-height:2.7;color:#6b7e95}.download-card li:before{content:'✓';margin-right:9px;color:#6c91bf}.download-card .button{width:100%}.download-card .micro{text-align:center;font-size:9px}.install-note{max-width:800px;margin:29px auto 0;display:flex;align-items:center;gap:16px;color:#7e90a9}.install-note>span{font-size:24px}.install-note p{font-size:11px;line-height:1.9;margin:0}.install-note strong{font-weight:600;color:#5a728f}.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}.faq h2{font-size:33px}.faq-list details{border:0}.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:16px;padding:21px 0;color:#455c76}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary>span{font-size:19px;color:#9babc0;font-weight:300}.faq-list details[open] summary>span{transform:rotate(45deg)}.faq-list p{font-size:12px;color:#7b8a9b;padding-right:30px;line-height:1.9}.footer{border-top:1px solid #e3e8ef;padding-block:28px;display:flex;align-items:center;justify-content:space-between;gap:25px}.footer .brand{font-size:20px}.footer>span,.footer>a:last-child{font-size:10px;color:#8a97a7}.skip{position:fixed;left:15px;top:-80px;z-index:20;padding:10px;background:#fff}.skip:focus{top:15px}@media(min-width:1550px){.hero{padding-top:88px}}@media(max-width:1050px){.wrap{width:calc(100% - 56px)}.hero-top{gap:30px;grid-template-columns:1.4fr 1fr}h1{font-size:44px;letter-spacing:-2px}.hero-intro p{font-size:13px}.section{padding-block:75px}.explore-grid{gap:20px;grid-template-columns:1fr 1.3fr}.feature-tab{padding:16px 12px}.feature-visual{padding:12px}.teacher-workspace{grid-template-columns:.9fr 1.2fr}.teacher-side{padding:30px 24px}.package-card{padding:24px}.schulgram{padding:28px;gap:25px}.schulgram h3{font-size:28px}}@media(max-width:740px){.wrap{width:calc(100% - 36px)}.header{height:76px;gap:12px}.header nav a{display:none}.brand{font-size:24px}.header .button{font-size:11px;padding:10px 13px;gap:15px}.hero{padding-top:40px}.hero-top{grid-template-columns:1fr;gap:22px;margin-bottom:30px}.eyebrow{font-size:8px;letter-spacing:1.1px}h1{font-size:clamp(32px,7.6vw,53px);letter-spacing:-1.8px;line-height:1.15;margin-top:18px}.hero-intro{justify-self:start;padding:0;max-width:440px}.hero-intro p{font-size:13px;margin-bottom:19px}.hero-intro p br{display:none}.hero-intro .micro{display:inline-block;margin-left:12px;font-size:8px}.showcase{width:100%}.hero-bottom{gap:13px;font-size:8px;flex-wrap:wrap;padding:17px 0}.hero-bottom>a{display:none}.mini-icon{font-size:12px}.section{padding-block:58px}.section-heading{display:block;margin-bottom:28px}.section-heading h2,h2{font-size:32px;letter-spacing:-1.2px}.section-heading>p,.section-heading>div>p{margin-top:20px;max-width:100%;font-size:12px}.explore-grid{display:flex;flex-direction:column;gap:20px}.feature-tabs{width:100%;gap:4px}.feature-tab{padding:16px}.feature-tab>span>span{max-width:100%;font-size:11px}.feature-tab strong{font-size:13px}.feature-visual{width:100%}.package-grid{grid-template-columns:1fr}.package-card{padding:23px}.package-icon{float:right;margin-bottom:0}.package-meta{font-size:8px;padding-top:7px}.package-card p{min-height:0;max-width:85%;font-size:12px}.package-tag{padding-top:12px}.schulgram{grid-template-columns:1fr;padding:24px;gap:27px}.schulgram p{max-width:100%}.schulgram h3{font-size:31px}.schulgram .package-meta{margin:18px 0}.teacher-workspace{grid-template-columns:1fr}.teacher-side{padding:28px}.teacher-side h3 br{display:none}.teacher-side li p{max-width:100%}.teacher-shot{padding:0 18px 20px}.download-heading h2{font-size:35px}.download-grid{grid-template-columns:1fr}.download-card{padding:28px}.download-card ul{padding:12px 0 22px}.edition{margin-bottom:20px}.install-note{align-items:flex-start}.faq{grid-template-columns:1fr;gap:20px}.faq-list summary{font-size:14px}.footer{flex-wrap:wrap;padding-block:24px;gap:18px}.footer>span{order:3;width:100%;font-size:9px}.footer>a:last-child{font-size:9px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}


/* Site-wide appearance. The original light palette remains the default. */
html,
html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --dark-page: #101923;
  --dark-surface: #1b2939;
  --dark-section: #141f2c;
  --dark-blue-surface: #1a2c43;
  --dark-border: #334458;
  --dark-text: #e5edf6;
  --dark-muted: #a4b4c7;
  --dark-accent: #94baf3;
  background: var(--dark-page);
}

html[data-theme="dark"] body {
  background: var(--dark-page);
  color: var(--dark-text);
}

html[data-theme="dark"] :is(
  .header,
  .hero-bottom,
  .footer
) {
  border-color: var(--dark-border);
}

html[data-theme="dark"] :is(
  .header nav,
  .eyebrow,
  .hero-intro p,
  .micro,
  .hero-bottom,
  .section-heading > p,
  .section-heading > div > p,
  .feature-tab,
  .package-meta,
  .package-card p,
  .package-tag,
  .schulgram p,
  .schulgram .package-meta,
  .edition > span:last-child,
  .download-card p,
  .download-card ul,
  .install-note,
  .faq-list p,
  .footer > span,
  .footer > a:last-child
) {
  color: var(--dark-muted);
}

html[data-theme="dark"] :is(
  .brand-dot,
  h1 > span,
  .header nav a:hover,
  .hero-bottom > a,
  .feature-tab b,
  .text-link,
  .download-card li::before
) {
  color: var(--dark-accent);
}

html[data-theme="dark"] .status-dot {
  background: var(--dark-accent);
  box-shadow: 0 0 0 4px #94baf314;
}

html[data-theme="dark"] :is(.mini-icon, .tab-num, .visual-label, .faq-list summary > span) {
  color: #a7bdd9;
}

html[data-theme="dark"] :is(.feature-tab strong, .faq-list summary, .install-note strong) {
  color: #d5e2f2;
}

html[data-theme="dark"] .button.blue {
  background: #376fd0;
  color: #fff;
  box-shadow: 0 4px 12px #0002;
}

html[data-theme="dark"] .button.blue:hover {
  background: #2c60bb;
}

html[data-theme="dark"] .button.dark {
  background: #dbe7f6;
  color: #182c44;
}

html[data-theme="dark"] .button.dark:hover {
  background: #c4d7ef;
}

html[data-theme="dark"] .feature-tab.active {
  background: var(--dark-blue-surface);
  border-color: #385576;
  color: #b6c9e1;
}

html[data-theme="dark"] .feature-visual {
  background: #17273a;
  border-color: var(--dark-border);
}

html[data-theme="dark"] :is(.feature-visual .app-screenshot, .schulgram-image) {
  border-color: #3b506a;
  box-shadow: 0 10px 30px #0003;
}

html[data-theme="dark"] .packages-section {
  background: var(--dark-section);
  border-color: #28394c;
}

html[data-theme="dark"] .package-card {
  background: var(--dark-surface);
  border-color: var(--dark-border);
}

html[data-theme="dark"] .package-icon {
  background: #302d45;
  color: #c0aedf;
}

html[data-theme="dark"] .school .package-icon {
  background: #3b3528;
  color: #d8bf86;
}

html[data-theme="dark"] .animal .package-icon {
  background: #203e39;
  color: #94c8b5;
}

html[data-theme="dark"] .package-tag {
  border-color: var(--dark-border);
}

html[data-theme="dark"] .schulgram {
  background: var(--dark-blue-surface);
  border-color: #344d6e;
}

html[data-theme="dark"] .pill {
  border-color: #516e94;
  color: #b3cdef;
}

html[data-theme="dark"] .teacher-workspace {
  background: #211f31;
  border-color: #403b53;
}

html[data-theme="dark"] .teacher-side .pill {
  background: #302d45;
  border-color: #574b6f;
  color: #c8b7e7;
}

html[data-theme="dark"] :is(.teacher-side li > span, .teacher-mark) {
  background: #37304b;
  color: #c8b7e7;
}

html[data-theme="dark"] .teacher-side li p {
  color: #b7aecb;
}

html[data-theme="dark"] .teacher-shot .app-screenshot {
  border-color: #514961;
  box-shadow: 0 15px 40px #0003;
}

html[data-theme="dark"] .download-section {
  background: #152337;
  border-color: #30435d;
}

html[data-theme="dark"] .download-card {
  background: var(--dark-surface);
  border-color: #3b4e68;
}

html[data-theme="dark"] .skip {
  background: #26394f;
  color: var(--dark-text);
  border-color: #4a5c73;
}

html[data-theme="dark"] :is(button, a, summary):focus-visible {
  outline-color: #a0c5ff;
}

html[data-theme="dark"] ::selection {
  background: #385b8c;
  color: #fff;
}

/* Installation links remain easy to identify in both themes. */
.install-note { align-items:flex-start; }
.install-note p + p { margin-top:12px; }
.install-note a { text-decoration:underline; text-underline-offset:3px; color:#386aac; }
html[data-theme="dark"] .install-note a { color:var(--dark-accent); }
