html:root { --board:#f7faff; --chalk:#142c50; --dim:#56708f; --faint:#6e85a4; --panel:#fff; --edge:#d6e3f5; --task:#2463eb; --quiz:#2463eb; --good:#147d58; --top-bg:#fffffff2; --top-line:#dce6f5; --lift:#31599215; --book:var(--ui); color-scheme:light; }
html body { font-family:var(--ui); background:radial-gradient(ellipse at 80% 0,#e5efff,transparent 58%),#f8fbff; color:#142c50; }
html body::before { background:none; }
.cover-language { position:absolute; right:max(22px,calc((100vw - 1300px)/2)); top:24px; display:flex; align-items:center; gap:10px; z-index:8; font-size:14px; color:#5e7698; }
.cover-language select { padding:8px 12px; background:#fff; color:#16345b; border:1px solid #c9d9ee; border-radius:9px; font:500 15px/1.5 var(--ui); }
body.open .cover-language { position:relative; top:0; right:0; padding:12px 22px; justify-content:flex-end; background:#f8fbff; }
html #cover { padding:56px 22px 52px; min-height:100svh; }
.cover-brand { display:flex; align-items:center; gap:16px; margin:0 0 30px; color:#476caa; font-size:14px; font-weight:700; letter-spacing:2px; }
html #cover .cover-brand .mascot { margin:0; }
html #cover .kicker { font-size:13px; letter-spacing:2.4px; color:#3367b6; animation:none; }
html #cover h1 { font:750 clamp(38px,5.5vw,76px)/1.2 var(--ui); letter-spacing:-2.2px; max-width:1100px; margin:16px 0 12px; animation:none; text-wrap:balance; }
.cover-sub { color:#547295; margin:0 0 25px; font-size:clamp(18px,2vw,25px); max-width:1000px; text-wrap:balance; }
.cover-demo { display:flex; gap:24px; max-width:900px; width:100%; justify-content:center; margin:0 0 24px; animation:none!important; }
.mini-sequence { border:1px solid #d2e1f7; background:#ffffffe6; border-radius:20px; padding:20px 24px; min-width:365px; text-align:left; box-shadow:0 14px 50px #42689b09; }
.mini-sequence>span { font-size:12px; font-weight:700; letter-spacing:1.5px; color:#2463eb; }
.mini-tiles { display:flex; justify-content:center; align-items:center; gap:12px; margin:18px 0 15px; }
.mini-tiles b { display:grid; place-items:center; width:63px; height:61px; border:1px solid #bcd3f5; border-radius:10px; background:#eef5ff; color:#2463eb; font:600 27px ui-monospace,monospace; }
.mini-tiles i { font:500 45px ui-monospace,monospace; font-style:normal; color:#3e75d8; }
.mini-sequence p { margin:0; font-size:15px; color:#647b9b; text-align:center; }
.mini-sequence.tuple { border-color:#cce6e8; }
.tuple .mini-tiles b { background:#f0fafa; color:#087e8b; border-color:#b4dbdf; }
.tuple .mini-tiles i,.tuple>span { color:#087e8b; }
.new-tile { animation:add-item 5s ease-in-out infinite; }
@keyframes add-item { 0%,14%{opacity:0;transform:translateY(-12px)} 25%,85%{opacity:1;transform:translateY(0)} 96%,100%{opacity:0;transform:translateY(-12px)} }
html #cover .lede { font-size:17px; max-width:710px; line-height:1.65; margin-bottom:23px; animation:none; }
html .btn.go { background:#2463eb; color:#fff; box-shadow:0 8px 24px #2463eb18; }
html .btn.quiet { background:#fff; color:#345c93; }
html #cover .acts { animation:none; }
html .meta { margin-top:19px; font-size:14px; letter-spacing:0; animation:none; }
.feature-chips { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:16px; }
.feature-chips span { border:1px solid #dce6f6; border-radius:999px; padding:6px 12px; background:#ffffffb0; color:#617b9c; font-size:12px; }
html .top { padding:20px max(24px,calc(50% - 590px)); }
html .home strong { font:650 22px/1.4 var(--ui); }
html .unit { background:linear-gradient(110deg,#f1f6ff,#f8fcff); border:1px solid #d6e3f7; border-radius:23px; overflow:hidden; padding:26px; }
html .unit h2 { font-family:var(--ui); }
html .unit .title { font-family:var(--ui); font-weight:650; }
html .unit .label { color:#6581a6; }
html .unit-art { color:#2463eb; opacity:.6; }
html .unit-art .a { color:#4277bd; }
html .unit .grid { grid-template-columns:1fr; position:relative; z-index:1; }
html .ch { background:#fff; min-height:118px; padding:23px; }
html .ch span { font-size:23px; font-weight:600; }
html .ch b { font-family:var(--ui); font-weight:600; }
.outline-cards { max-width:1212px; padding:0 16px; margin:25px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }
.outline-cards article { border:1px solid #dae5f4; border-radius:18px; padding:25px; background:#fff; }
.outline-cards b { color:#7796c3; font:600 14px var(--ui); }
.outline-cards h3 { font-size:19px; line-height:1.5; margin:12px 0 10px; color:#224878; }
.outline-cards p { font-size:15px; line-height:1.7; color:#6780a2; margin:0; }
.book-footer { max-width:1160px; margin:35px auto 0; padding:0 24px; color:#7489a4; font-size:13px; text-align:center; line-height:1.7; }
.book-footer nav { display:flex; flex-wrap:wrap; justify-content:center; gap:22px; margin-top:15px; }
.book-footer a { color:#5073a2; text-decoration:underline; text-underline-offset:4px; }
@media(max-width:760px){.cover-language{top:14px;right:16px}.cover-language label{display:none}html #cover{padding-top:65px}.cover-brand{margin-bottom:20px}html #cover h1{font-size:44px;letter-spacing:-1.5px}.cover-demo{gap:12px}.mini-sequence{min-width:0;flex:1;padding:14px 12px}.mini-tiles{gap:6px}.mini-tiles b{width:42px;height:46px;font-size:22px}.mini-tiles i{font-size:31px}.mini-sequence p{font-size:12px}.outline-cards{grid-template-columns:1fr}.home strong{font-size:17px!important}.unit-art{opacity:.27!important}.cover-sub{font-size:18px}.mini-sequence>span{font-size:11px}html .unit{margin:16px;padding:18px}html .ch span{font-size:19px}}
@media(max-width:430px){html #cover h1{font-size:37px}.cover-demo{flex-direction:column;max-width:340px}.mini-sequence{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:5px 4px}.mini-sequence p{grid-column:1/-1}.mini-tiles{margin:2px 0 8px}.cover-brand{margin-bottom:19px}html #cover .lede{font-size:15px}.feature-chips{gap:6px}.feature-chips span{font-size:11px}}
@media(prefers-reduced-motion:reduce){.new-tile{animation:none}html #cover>*{animation:none}}