@font-face{font-family:Nunito;font-weight:700;src:url('/simulations/vendor/fonts/nunito-700-latin.woff2') format('woff2');font-display:swap}
@font-face{font-family:Nunito;font-weight:800 900;src:url('/simulations/vendor/fonts/nunito-800-latin.woff2') format('woff2');font-display:swap}
*{box-sizing:border-box}
:root{color-scheme:light;--canvas:#fff9ec;--card:#fff;--ink:#182335;--muted:#5b6679;--line:#e4e8ef;--green:#138535;--mint:#e3f6e9;--mint-ink:#11702e;--honey:#fbba06;--honey-soft:#fff3cc;--shadow:0 6px 20px -14px #18233530;--hatch:repeating-linear-gradient(135deg,var(--card) 0 5px,var(--line) 5px 7px)}
@media(prefers-color-scheme:dark){:root{color-scheme:dark;--canvas:#000;--card:#0a0a0a;--ink:#f5f5f5;--muted:#a3a3a3;--line:#2e2e2e;--green:#5bd68a;--mint:#0f2a19;--mint-ink:#7fe0a4;--honey-soft:#2b2205;--shadow:0 6px 20px -14px #000}}
body{margin:0;background:var(--canvas);color:var(--ink);font:700 14px/1.5 Nunito,system-ui,sans-serif}
#lab{padding:20px;max-width:1720px;margin:auto}
header{display:flex;align-items:center;gap:24px;margin:0 0 18px}header>div{flex:1}
.brand{color:var(--green);font-size:22px;font-weight:900;text-decoration:none;white-space:nowrap}.brand span{color:var(--honey);margin-inline-start:4px}
h1{font-size:clamp(21px,2.4vw,32px);line-height:1.15;letter-spacing:-.03em;margin:3px 0 0;font-weight:900}
h2{font-size:16px;margin:0 0 12px}h3{font-size:13px;margin:0 0 8px}p{margin:0 0 12px}
.eyebrow{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);font-weight:900;margin:0 0 6px}
.mini,.hint{font-size:12px;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[hidden]{display:none!important}
a{color:var(--green)}

/* ---- layout ---- */
.workspace{display:grid;grid-template-columns:250px minmax(0,1fr);grid-template-areas:"setup board" "learn board";grid-template-rows:auto 1fr;gap:16px;align-items:start}
#setup{grid-area:setup}#board{grid-area:board}#learn{grid-area:learn}
.panel{min-width:0;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow)}
.main-panel{padding:14px 14px 10px}
label{display:block;font-weight:800;margin:14px 0 7px;font-size:13px}
select,button,input[type=search]{font:800 13px/1.3 Nunito,system-ui,sans-serif;min-height:40px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);padding:9px 12px}
select{width:100%;cursor:pointer}button{cursor:pointer}
button:hover{background:var(--mint);border-color:var(--green)}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.primary{background:var(--green);border-color:var(--green);color:var(--card)}.primary:hover{background:#0f6e2c;color:#fff}
@media(prefers-color-scheme:dark){.primary{background:#1ba544;color:#000}.primary:hover{background:#2bbf58;color:#000}}
.wide{width:100%;margin-top:10px}
.check{display:flex;gap:8px;align-items:center;font-weight:700}.check input{accent-color:var(--green);width:17px;height:17px;margin:0}
.control label{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.control output{color:var(--green);font-variant-numeric:tabular-nums;white-space:nowrap;direction:ltr;unicode-bidi:isolate}
input[type=range]{width:100%;accent-color:var(--green);margin:4px 0 8px;min-height:24px;cursor:pointer}
#temperature{accent-color:#e0604f}
.presets{display:flex;flex-wrap:wrap;gap:6px}.preset{min-height:32px;padding:5px 9px;font-size:12px;border-radius:999px}.preset[aria-pressed=true]{background:var(--mint);border-color:var(--green);color:var(--mint-ink)}
.families{display:grid;gap:2px}.family{margin:0;padding:5px 2px;font-size:13px}.family i{width:12px;height:12px;border-radius:4px;background:var(--bg);border:2px solid var(--mid);flex:none}
#families-box h3{margin:16px 0 6px}
#learn h2{font-size:20px;line-height:1.2;margin-top:6px;color:var(--green)}#learn p{font-size:13.5px}
.counts{color:var(--muted);font-size:12.5px!important;border-top:1px solid var(--line);padding-top:10px}
details{border-top:1px solid var(--line);padding-top:12px;font-size:12px;color:var(--muted)}summary{font-weight:800;cursor:pointer;margin-bottom:8px;color:var(--ink)}

/* ---- board ---- */
.board-top{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:0 0 10px}
.search{position:relative;flex:1 1 220px;max-width:380px}
.search svg{position:absolute;inset-inline-start:12px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round;pointer-events:none}
.search input{width:100%;padding-inline-start:38px;border-radius:999px;background:var(--canvas)}
.board-actions{display:flex;gap:8px;flex-wrap:wrap}
#stage{position:relative;overflow-x:auto;overflow-y:hidden;padding:6px 2px 8px;perspective:1700px;scrollbar-width:thin}
.legend{display:flex;flex-wrap:wrap;gap:6px 8px;justify-content:center;margin:6px 0 2px}
.chip{display:inline-flex;gap:7px;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:12px;line-height:1.4;min-height:30px;color:var(--ink)}
.chip i{width:12px;height:12px;border-radius:4px;background:var(--bg,var(--line));border:2px solid var(--mid,var(--muted));flex:none}
.chip b{color:var(--muted);font-weight:800;font-variant-numeric:tabular-nums}
button.chip[aria-pressed=false]{opacity:.45;text-decoration:line-through}
.chip.undiscovered i,.chip.nodata i,.chip.ph-unknown i,.chip.nophoto i{background:var(--hatch);border:1.5px dashed var(--muted)}
.chip.photo-chip i{background:linear-gradient(135deg,#d7c38a,#7d6f5a);border-color:#7d6f5a}
.scale{display:inline-flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);direction:ltr}
.scale i{width:min(260px,36vw);height:12px;border-radius:999px;background:linear-gradient(90deg,#fff6d5,#fdd36a,#f6a04d,#e0604f,#9b2f6e);border:1px solid var(--line)}
#status{font-size:12.5px;color:var(--mint-ink);min-height:20px;margin:6px 0 0;text-align:center}

/* ---- the table ---- */
#table{--cell:54px;--gap:max(2px,calc(var(--cell)*.07));--ch:calc(var(--cell)*1.12);display:grid;grid-template-columns:calc(var(--cell)*.55) repeat(18,var(--cell));grid-template-rows:calc(var(--cell)*.42) repeat(7,var(--ch)) calc(var(--cell)*.3) repeat(2,var(--ch));gap:var(--gap);width:max-content;margin:0 auto;direction:ltr;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.axis{display:flex;align-items:center;justify-content:center;font-size:max(9px,calc(var(--cell)*.2));color:var(--muted);font-weight:800;cursor:default;user-select:none}
.tile{--mid:#9aa3b2;--bg:color-mix(in srgb,var(--mid) 20%,var(--card));--c:color-mix(in srgb,var(--mid) 60%,var(--ink));--num:color-mix(in srgb,var(--ink) 74%,transparent);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-width:0;min-height:0;padding:0 2px;border:1px solid color-mix(in srgb,var(--mid) 42%,transparent);border-radius:calc(var(--cell)*.15);background:var(--bg);color:var(--ink);font:inherit;cursor:pointer;transform-style:preserve-3d;transition:transform .18s ease,box-shadow .18s ease,opacity .3s ease,filter .3s ease,background-color .35s ease,border-color .35s ease}
.tile:hover{background-color:var(--bg)}
.tile .num{position:absolute;top:calc(var(--cell)*.05);inset-inline-start:calc(var(--cell)*.08);font-size:max(8px,calc(var(--cell)*.18));line-height:1.2;color:var(--num);font-weight:800;font-variant-numeric:tabular-nums}
.tile .sym{font-size:calc(var(--cell)*.42);font-weight:900;line-height:1;color:var(--c);margin-top:calc(var(--cell)*.14);letter-spacing:-.02em}
.tile .name{display:block;max-width:100%;font-size:max(7px,min(calc(var(--cell)*.155),calc(var(--cell)*1.75/var(--len,8))));line-height:1.25;margin-top:calc(var(--cell)*.05);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);opacity:.86}
.tile .val{font-size:max(7px,calc(var(--cell)*.13));line-height:1.2;color:var(--num);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;max-width:100%}
.tile .val:empty{display:none}
#table[data-size=s] .tile .name,#table[data-size=s] .tile .val,#table[data-size=m] .tile .val{display:none}
#table[data-size=s] .tile .sym{margin-top:calc(var(--cell)*.2)}
.tile:not(.link):hover,.tile.hot{transform:translateY(-2px) scale(1.14);z-index:5;box-shadow:0 12px 24px -12px rgb(24 35 53/.55);border-color:var(--mid)}
.tile:focus-visible{outline:3px solid var(--green);outline-offset:2px;z-index:6}
.tile.selected{box-shadow:0 0 0 3px var(--honey),0 10px 20px -12px rgb(24 35 53/.6);z-index:4}
.tile.link{cursor:default}.tile.link::after{content:attr(data-label);font-size:max(8px,calc(var(--cell)*.2));font-weight:900;color:var(--c)}
.tile.dim,.searching .tile:not(.match):not(.link){background:transparent;border-color:var(--line);--c:var(--num)}
.tile.link.dim{opacity:.3}
#table[data-focus] .tile:not(.link){opacity:.22;filter:saturate(.3)}
#table[data-focus=alkali] .f-alkali,#table[data-focus=alkaline] .f-alkaline,#table[data-focus=transition] .f-transition,#table[data-focus=post] .f-post,#table[data-focus=metalloid] .f-metalloid,#table[data-focus=nonmetal] .f-nonmetal,#table[data-focus=halogen] .f-halogen,#table[data-focus=noble] .f-noble,#table[data-focus=lanthanide] .f-lanthanide,#table[data-focus=actinide] .f-actinide{opacity:1!important;filter:none!important}
.tile.predicted{border-style:dashed}
.tile.match{box-shadow:0 0 0 3px var(--honey);z-index:3}
.quizzing .tile .name,.quizzing .tile .val{visibility:hidden}

/* family, phase, era and block colours: one mid-tone each; tint and ink follow light/dark theme */
.f-alkali{--mid:#f2783a}.f-alkaline{--mid:#e3a92a}.f-transition{--mid:#5b7be0}.f-post{--mid:#8794aa}.f-metalloid{--mid:#8fb83a}.f-nonmetal{--mid:#2fae62}.f-halogen{--mid:#22a7c7}.f-noble{--mid:#9061e8}.f-lanthanide{--mid:#d050c8}.f-actinide{--mid:#e2506f}
.ph-solid{--mid:#6b7f9e}.ph-liquid{--mid:#1d9bf0}.ph-gas{--mid:#f59e0b}
.era-ancient{--mid:#b08850}.era-1{--mid:#e2506f}.era-2{--mid:#2fae62}.era-3{--mid:#5b7be0}.era-4{--mid:#9061e8}
.bl-s{--mid:#f2783a}.bl-p{--mid:#e3a92a}.bl-d{--mid:#5b7be0}.bl-f{--mid:#2fae62}
.tile.ph-unknown,.tile.nodata,.tile.nophoto{background:var(--hatch);border:1px dashed color-mix(in srgb,var(--muted) 60%,transparent);--c:var(--muted)}
.tile.ph-gas .sym{text-shadow:0 0 calc(var(--cell)*.18) color-mix(in srgb,var(--mid) 70%,transparent)}
.tile.ph-liquid::after{content:'';position:absolute;inset:auto 0 0;height:22%;border-radius:0 0 calc(var(--cell)*.14) calc(var(--cell)*.14);background:color-mix(in srgb,var(--mid) 35%,transparent);pointer-events:none}
.tile.estimated{border-style:dashed}
.tile.undiscovered{background:transparent;border:1.5px dashed color-mix(in srgb,var(--muted) 45%,transparent);--c:var(--num)}
.tile.born{animation:born .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes born{0%{transform:scale(.4);box-shadow:0 0 0 0 var(--honey)}60%{transform:scale(1.2);box-shadow:0 0 0 8px transparent}100%{transform:none}}
.tile.heat{background:var(--heat);border-color:color-mix(in srgb,var(--heat) 70%,#000);--c:var(--heat-ink)}
.tile.heat .num,.tile.heat .name,.tile.heat .val{color:var(--heat-ink);opacity:1}
.tile.photo{background:linear-gradient(to top,rgb(0 0 0/.72),rgb(0 0 0/.2) 42%,transparent 68%),radial-gradient(circle at 0 0,rgb(0 0 0/.35),transparent 40%),var(--photo) center/cover no-repeat,#333;border-color:transparent;--c:#fff}
.tile.photo .num,.tile.photo .name{color:#fff;opacity:.92}.tile.photo .sym,.tile.photo .name,.tile.photo .num{text-shadow:0 1px 3px rgb(0 0 0/.8)}

/* quiz feedback */
.tile.right{animation:right .9s ease;box-shadow:0 0 0 4px var(--green)!important;z-index:6}
.tile.wrong{animation:wrong .45s ease;box-shadow:0 0 0 3px #e0604f!important}
.tile.reveal{animation:pulse 1s ease infinite;box-shadow:0 0 0 4px var(--honey)!important;z-index:6}
@keyframes right{0%{transform:scale(1)}35%{transform:scale(1.3)}100%{transform:scale(1.08)}}
@keyframes wrong{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes pulse{50%{transform:scale(1.18)}}

/* the inspector in the gap above the transition metals */
.inspector{grid-column:4/14;grid-row:2/5;align-self:stretch;display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:calc(var(--cell)*.24);align-items:center;padding:calc(var(--cell)*.14) calc(var(--cell)*.2);margin:0 calc(var(--cell)*.15) calc(var(--cell)*.2);border-radius:calc(var(--cell)*.24);background:linear-gradient(120deg,color-mix(in srgb,var(--mid,#9aa3b2) 14%,var(--card)),var(--card) 70%);border:1px solid var(--line);min-width:0;overflow:hidden;box-shadow:var(--shadow)}
.inspector.empty{display:flex;justify-content:center;text-align:center;border-style:dashed;background:transparent;box-shadow:none}
.ins-hint{margin:0;color:var(--muted);font-size:max(11px,calc(var(--cell)*.22));max-width:32em}
.ins-tile{--c:color-mix(in srgb,var(--mid) 60%,var(--ink));height:calc(var(--ch)*2.7);aspect-ratio:.86;border-radius:calc(var(--cell)*.2);background:color-mix(in srgb,var(--mid) 22%,var(--card));border:2px solid var(--mid);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:4px}
.ins-tile .num{position:absolute;top:calc(var(--cell)*.1);inset-inline-start:calc(var(--cell)*.14);font-size:calc(var(--cell)*.26);color:color-mix(in srgb,var(--ink) 74%,transparent)}
.ins-tile .sym{font-size:calc(var(--cell)*.95);line-height:1;color:var(--c);font-weight:900;letter-spacing:-.03em}
.ins-tile .name{font-size:calc(var(--cell)*.24);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ins-tile .mass{font-size:calc(var(--cell)*.2);color:color-mix(in srgb,var(--ink) 74%,transparent);font-variant-numeric:tabular-nums}
.ins-photo{height:calc(var(--ch)*2.7);aspect-ratio:1;border-radius:calc(var(--cell)*.2);overflow:hidden;background:var(--hatch);display:grid;place-items:center;border:1px solid var(--line)}
.ins-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ins-photo .sym{font-size:calc(var(--cell)*.6);color:var(--muted)}
.ins-info{display:flex;flex-direction:column;gap:calc(var(--cell)*.08);min-width:0}
.ins-chip{align-self:flex-start;font-size:max(10px,calc(var(--cell)*.2));padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--mid) 25%,var(--card));color:color-mix(in srgb,var(--mid) 70%,var(--ink));font-weight:900}
.ins-line{font-size:max(11px,calc(var(--cell)*.25));line-height:1.3}
.ins-config{font-size:max(10px,calc(var(--cell)*.21));color:var(--muted);direction:ltr;unicode-bidi:isolate}
#table[data-size=s] .ins-photo{display:none}
#table[data-size=s] .inspector{grid-template-columns:auto minmax(0,1fr)}

/* 3D bars for the trends */
#stage.bars{overflow:visible;padding-top:calc(var(--cell,54px)*.4)}
#stage.bars #table{transform:rotateX(50deg) rotateZ(22deg) scale(.8);margin-top:-40px;margin-bottom:-60px}
#stage.bars .axis,#stage.bars .inspector,#stage.bars .tile.link{visibility:hidden}
#stage.bars .tile{transform:translateZ(calc(var(--h,0)*var(--cell)*3.2 + 1px));border-radius:3px;box-shadow:none}
#stage.bars .tile::before,#stage.bars .tile.heat::after{content:'';position:absolute;pointer-events:none}
#stage.bars .tile.heat::before{left:-1px;right:-1px;top:100%;height:calc(var(--h,0)*var(--cell)*3.2);background:color-mix(in srgb,var(--heat) 78%,#000);transform-origin:top;transform:rotateX(-90deg)}
#stage.bars .tile.heat::after{top:-1px;bottom:-1px;left:100%;width:calc(var(--h,0)*var(--cell)*3.2);background:color-mix(in srgb,var(--heat) 62%,#000);transform-origin:left;transform:rotateY(90deg)}
#stage.bars .tile:hover{transform:translateZ(calc(var(--h,0)*var(--cell)*3.2 + 6px));box-shadow:0 0 0 2px var(--ink)}
#stage.bars .tile .name,#stage.bars .tile .val{display:none}

/* quiz bar */
#quiz-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;margin:0 0 10px;border-radius:16px;background:var(--honey-soft);border:1px solid color-mix(in srgb,var(--honey) 55%,transparent)}
#quiz-photo{width:88px;height:88px;border-radius:12px;object-fit:cover;box-shadow:var(--shadow)}
.quiz-text{display:flex;flex-direction:column;flex:1;min-width:160px}#quiz-ask{font-size:18px;line-height:1.25}
.badge{background:var(--mint);color:var(--mint-ink);padding:5px 10px;border-radius:999px;font-size:13px;font-weight:900;white-space:nowrap}
.icon{display:inline-grid;place-items:center;width:40px;padding:0}.icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}

/* ---- the element card ---- */
#card{padding:0;border:0;border-radius:26px;width:min(1000px,calc(100vw - 24px));max-height:calc(100vh - 24px);background:var(--card);color:var(--ink);box-shadow:0 40px 90px -30px rgb(0 0 0/.55);overflow:hidden}
#card::backdrop{background:rgb(16 22 34/.5);backdrop-filter:blur(4px)}
#card[open] .card-shell{animation:card-in .32s cubic-bezier(.2,.9,.3,1.15)}
@keyframes card-in{from{transform:translateY(16px) scale(.97);opacity:0}}
.card-shell{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);max-height:calc(100vh - 24px)}
.card-media{display:flex;align-items:center;justify-content:center;padding:22px;background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--mid) 30%,var(--card)),color-mix(in srgb,var(--mid) 10%,var(--canvas)) 70%)}
.card-media figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
#card-photo{display:block;max-width:100%;max-height:min(58vh,500px);border-radius:18px;object-fit:contain;box-shadow:0 22px 40px -22px rgb(0 0 0/.6);background:#fff}
#card-credit{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.5}
#card-nophoto{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;max-width:320px}
#card-nophoto svg{width:min(240px,60vw);height:auto;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--mid) 26%,transparent),transparent 68%)}
#nophoto-symbol{font:900 44px Nunito,system-ui,sans-serif;fill:color-mix(in srgb,var(--mid) 70%,var(--ink))}
.nophoto-ring{fill:none;stroke:color-mix(in srgb,var(--mid) 60%,transparent);stroke-width:1.5;stroke-dasharray:3 5;transform-origin:100px 100px;animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{opacity:.35;transform:scale(1.04)}}
#card-nophoto-text{font-size:14px;margin:0}
.card-body{overflow:auto;padding:22px 26px 16px;max-height:calc(100vh - 24px);container-type:inline-size}
.card-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:12px}
.card-tile{--c:color-mix(in srgb,var(--mid) 60%,var(--ink));flex:none;width:92px;height:104px;border-radius:18px;background:color-mix(in srgb,var(--mid) 22%,var(--card));border:2px solid var(--mid);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.card-tile span:first-child{position:absolute;top:6px;inset-inline-start:10px;font-size:13px;color:color-mix(in srgb,var(--ink) 74%,transparent)}
.card-tile strong{font-size:42px;line-height:1;color:var(--c);font-weight:900;margin-top:8px}
.card-tile span:last-child{font-size:12px;color:color-mix(in srgb,var(--ink) 74%,transparent);margin-top:4px;font-variant-numeric:tabular-nums}
.card-title{flex:1;min-width:0}.card-title .eyebrow{color:color-mix(in srgb,var(--mid) 70%,var(--ink))}
#card-name{font-size:clamp(26px,3.4vw,36px);line-height:1.05;margin:0 0 8px;font-weight:900;letter-spacing:-.02em}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chips .chip{min-height:26px;padding:2px 9px;font-size:11.5px}
.note{font-size:12.5px;padding:8px 12px;border-radius:12px;background:var(--honey-soft);border:1px dashed color-mix(in srgb,var(--honey) 70%,transparent)}
.card-body h3{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
#card-summary{font-size:15.5px;line-height:1.55}
.uses{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 6px}
.uses li{padding:5px 11px;border-radius:999px;background:color-mix(in srgb,var(--mid) 16%,var(--card));border:1px solid color-mix(in srgb,var(--mid) 35%,transparent);font-size:13px}
.fact{margin:14px 0 6px;padding:12px 16px;border-radius:16px;background:var(--honey-soft);border-inline-start:5px solid var(--honey)}
.fact h3{margin:0 0 4px;color:color-mix(in srgb,var(--honey) 35%,var(--ink))}.fact p{margin:0;font-size:14.5px}
.atom-facts{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;align-items:start;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.bohr{margin:0;text-align:center}.bohr svg{width:100%;height:auto;display:block;direction:ltr}
.bohr figcaption{display:flex;flex-direction:column;gap:2px;font-size:12px}
.bohr-glow{fill:color-mix(in srgb,var(--mid) 8%,transparent)}
.orbit{fill:none;stroke:color-mix(in srgb,var(--mid) 45%,var(--line));stroke-width:1.2}
.electrons{transform-origin:120px 120px;animation:spin 10s linear infinite}
.electron{fill:color-mix(in srgb,var(--mid) 80%,var(--ink))}
.nucleus{fill:color-mix(in srgb,var(--mid) 75%,var(--ink))}
.nucleus-label{font:900 20px Nunito,system-ui,sans-serif;fill:var(--card)}
@keyframes spin{to{transform:rotate(360deg)}}
#card-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin:0;font-size:12.5px}
#card-facts dt{color:var(--muted);font-size:11.5px}
#card-facts dd{margin:1px 0 0;font-weight:900;font-size:13.5px;overflow-wrap:anywhere;unicode-bidi:plaintext;text-align:start}
.card-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.card-nav button{max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[dir=rtl] .card-nav [aria-hidden=true]{display:inline-block;transform:scaleX(-1)}

/* ---- inside the catalogue page: the side panels own the controls ---- */
#lab:fullscreen{background:var(--canvas);max-width:none;overflow:auto}
html[data-kb-host=offload] #lab{padding:6px}
html[data-kb-host=offload] header{display:none}
html[data-kb-host=offload] .workspace{grid-template-columns:minmax(0,1fr);grid-template-areas:"board"}
html[data-kb-host=offload] .main-panel{border:0;box-shadow:none;padding:4px 6px;background:transparent}
html[data-kb-host=offload] .board-top{justify-content:center}

@container (max-width:500px){.atom-facts{grid-template-columns:1fr}.bohr{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center;text-align:start}.bohr svg{max-width:150px}}
@media(max-width:1100px){.workspace{grid-template-columns:210px minmax(0,1fr)}}
@media(max-width:820px){
  #lab{padding:12px}header{gap:12px;flex-wrap:wrap}header .brand{font-size:17px}header #fullscreen{display:none}
  .workspace{display:flex;flex-direction:column}.panel{width:100%}
  #board{order:0}#setup{order:1}#learn{order:2}
  .card-shell{grid-template-columns:1fr;overflow:auto}.card-body{max-height:none;overflow:visible}
  .card-media{padding:16px}#card-photo{max-height:34vh}
  .atom-facts{grid-template-columns:1fr}.bohr svg{max-width:220px;margin:auto}
}
@media(max-width:480px){.board-actions{width:100%}.board-actions button{flex:1}.search{max-width:none}#card-facts{grid-template-columns:1fr 1fr}.card-tile{width:76px;height:88px}.card-tile strong{font-size:34px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}