@font-face{font-family:Caveat;src:url(/fonts/caveat-latin.woff2)format("woff2");font-weight:400 700;font-display:swap}@font-face{font-family:Patrick Hand;src:url(/fonts/patrick-hand-latin.woff2)format("woff2");font-display:swap}:root{--paper:#f7f1e1;--ink:#1d3f91;--ink-soft:#4a5f96;--pencil:#3a3a42;--rule:#547db83d;--highlight:#fade5299;--line:34px;--hand:"Caveat", "Segoe Script", cursive;--body:"Patrick Hand", "Comic Sans MS", cursive;--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--wobbly:255px 15px 225px 15px / 15px 225px 15px 255px;--paper-texture:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.007' numOctaves='4' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .5 0 0 0 0 .3 1 0 0 0 -.36'/%3E%3C/filter%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09 .16' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .32 0 0 0 0 .2 1.1 0 0 0 -.5'/%3E%3C/filter%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .29 0 0 0 0 .18 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23m)' opacity='.2'/%3E%3Crect width='640' height='640' filter='url(%23f)' opacity='.1'/%3E%3Crect width='640' height='640' filter='url(%23g)'/%3E%3C/svg%3E")}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{min-height:100vh;color:var(--pencil);background-color:var(--paper);background-image:var(--paper-texture);font-family:var(--body);font-size:21px;line-height:var(--line);margin:0;overflow-x:hidden}a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1.5px}a:hover{background:var(--highlight)}:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--wobbly)}h1,h2,h3{font-family:var(--hand);color:var(--ink);margin:0;font-weight:700}p{margin:0 0 var(--line)}.hero{max-width:1240px;padding:var(--line) 32px 0;margin:0 auto}.title{font-size:60px;line-height:calc(var(--line) * 2);align-items:center;gap:14px;display:flex}.hero-body{grid-template-columns:minmax(280px,340px) minmax(0,1fr);align-items:center;gap:24px;display:grid}.atom{width:100%;height:min(70vh,660px);min-height:420px}.atom canvas{display:block}.card{border:2px solid var(--ink);border-radius:var(--wobbly);background:#fffdf5;padding:20px 26px 16px;line-height:1.25;transform:rotate(-1.2deg);box-shadow:3px 4px #1d3f9129}.card p{margin:0}.written{animation:.8s ease-out both write}@keyframes write{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -5% 0 0)}}.card-number{color:var(--ink-soft);font-size:24px}.card-symbol{font-family:var(--hand);color:var(--ink);font-size:118px;font-weight:700;line-height:.95}.card-name{overflow-wrap:anywhere;font-size:40px;line-height:1.15}.card-facts{margin:12px 0 0;font-size:19px}.card-facts div{border-top:1px dashed var(--rule);justify-content:space-between;gap:16px;padding:3px 0;display:flex}.card-facts dt{color:var(--ink-soft)}.card-facts dd{text-align:right;margin:0}.card-nav{font-family:var(--hand);justify-content:space-between;margin-top:12px;font-size:26px;font-weight:700;display:flex}.card-nav a{padding:2px 8px;text-decoration:none}main{max-width:1240px;margin:0 auto;padding:0 32px}.section{max-width:880px;margin-bottom:calc(var(--line) * 2)}.section h2{font-size:46px;line-height:calc(var(--line) * 2)}.table-section{max-width:none}.table-scroll{padding:6px 4px;overflow-x:auto}.table{grid-template-rows:repeat(7,auto) 10px repeat(2,auto);grid-template-columns:repeat(18,minmax(36px,1fr));gap:3px;min-width:720px;display:grid}.cell{aspect-ratio:1;color:var(--pencil);background-color:var(--tint);border-radius:var(--wobbly);background-image:repeating-linear-gradient(115deg,#0000 0 3px,#fffdf58c 3px 5px);justify-content:center;align-items:center;font-size:19px;line-height:1;text-decoration:none;display:flex;position:relative}.cell-number{opacity:.7;font-size:11px;position:absolute;top:2px;left:4px}.cell:hover{outline:2px solid var(--ink);background-color:var(--tint)}.cell.selected{outline:3px solid var(--ink);outline-offset:1px;color:var(--ink);z-index:1;font-weight:700}.legend{flex-wrap:wrap;gap:2px 18px;margin:12px 0 0;padding:0;font-size:18px;list-style:none;display:flex}.legend li:before{content:"";vertical-align:-2px;background:var(--tint);border-radius:var(--wobbly);width:16px;height:16px;margin-right:7px;display:inline-block}.family-alcalins{--tint:#f3b0a2}.family-alcalino-terreux{--tint:#f6cf96}.family-metaux-de-transition{--tint:#f3e38e}.family-metaux-pauvres{--tint:#bfe0a0}.family-metalloides{--tint:#9fdcc6}.family-non-metaux{--tint:#a4d4ea}.family-halogenes{--tint:#adbff0}.family-gaz-nobles{--tint:#c9b6ec}.family-lanthanides{--tint:#eeb6d8}.family-actinides{--tint:#e6a6b6}.family-non-classes{--tint:#d3cfc4}.endpoints{margin:0;padding:0;list-style:none}.endpoint{margin-bottom:var(--line)}.endpoint h3{font-size:31px;line-height:var(--line)}.endpoint p{margin:0}.endpoint-url{border:1.5px solid var(--ink-soft);border-radius:var(--wobbly);background:#fffdf5;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:6px 0;padding:6px 12px;line-height:1.4;display:flex}.endpoint-url code{min-width:0;font-family:var(--mono);color:var(--pencil);overflow-wrap:anywhere;flex:240px;font-size:15px}.verb{color:#2c7a4b;font-size:18px;font-weight:700}.param{color:#b23a3a}.options{font-family:var(--mono);font-size:15px}button{font:inherit;color:var(--ink);border:1.5px solid var(--ink);border-radius:var(--wobbly);cursor:pointer;background:0 0;padding:0 10px;font-size:18px}button:hover{background:var(--highlight)}.footer{padding:var(--line) 32px calc(var(--line) * 2);text-align:center;font-family:var(--hand);font-size:28px;font-weight:700}@media (width<=820px){body{font-size:19px}.hero,main{padding-left:16px;padding-right:16px}.title{font-size:46px}.hero-body{grid-template-columns:minmax(0,1fr)}.atom{order:-1;height:90vw;min-height:0;max-height:70vh}.section h2{font-size:38px}}@media (prefers-reduced-motion:reduce){.written{animation:none}}