/* Beary Sums styles */
:root{
  box-sizing:border-box;
  color-scheme:light;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#ebe3fa; --body:#ffe3ee; --screen:#e1f1fc; --ink:#5b4763; --soft:#6f6690;
  --num:#e9defc; --num-s:#cfc0f0; --op:#ffb7d1; --op-s:#ee93b6;
  --fn:#cde6fb; --fn-s:#a6cbee; --eq:#c6f1dc; --eq-s:#9bdcbb; --face:#5b4763; --cheek:#ffc4d4;
  --grid:rgba(120,90,140,.16); --bad:#f28b9b; --err:#b8405f; --shadow:rgba(150,90,150,.22);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Fredoka",ui-rounded,"Nunito","Segoe UI",system-ui,sans-serif;line-height:1.5}
header.top{display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--bg);box-shadow:0 6px 14px -12px rgba(91,71,99,.45);margin:0;padding:14px max(24px,calc((100vw - 1152px)/2))}
.logo{font-weight:600;font-size:22px;display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;white-space:nowrap}
.logo-bear{width:38px;height:38px;flex:none}
.hero{max-width:1200px;margin:0 auto;padding:32px 24px 80px;display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
.copy h1{font-size:clamp(36px,5.5vw,60px);line-height:1.05;margin:0 0 16px;font-weight:600}
.copy p{font-size:19px;color:var(--soft);max-width:30em;margin:0 0 28px}
.stage{display:flex;justify-content:center;padding-top:44px}
.keysec{max-width:1200px;margin:0 auto;padding:0 24px 80px}
.keysec h2{font-size:30px;margin:0 0 8px}
.keysec>p{margin:0 0 20px;color:var(--soft)}
.kl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 28px}
.kl div{display:flex;align-items:center;gap:12px}
kbd{font:inherit;font-weight:500;background:var(--num);border-radius:10px;padding:3px 12px;box-shadow:0 3px 0 var(--num-s);white-space:nowrap}
.graphing{max-width:1200px;margin:0 auto;padding:0 24px 80px}
.gcard{position:relative;background:var(--body);border-radius:36px;padding:24px;display:grid;grid-template-columns:320px 1fr;gap:28px;box-shadow:0 8px 0 var(--shadow),0 24px 40px rgba(91,71,99,.12)}
.gcard h2{font-size:30px;margin:0 0 6px}
.gcard p{margin:0 0 16px;color:var(--soft)}
.fr{display:flex;align-items:center;gap:8px;margin-bottom:10px;background:var(--screen);border-radius:18px;padding:4px 12px;font-weight:500}
.fr i{width:14px;height:14px;border-radius:50%;flex:none}
.fr input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:18px;color:var(--ink);padding:8px 4px;outline:none}
.fr:focus-within{outline:3px solid var(--ink);outline-offset:2px}
.fr.bad{outline:3px solid var(--bad)}
.gbtns{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.gb{height:46px;min-width:52px;padding:0 16px;font-size:22px;border-radius:16px;box-shadow:0 4px 0 var(--num-s);background:var(--fn)}
.gb:active{transform:translateY(3px);box-shadow:0 1px 0 var(--num-s)}
.gb:disabled{opacity:.45;cursor:default;transform:none;box-shadow:0 4px 0 var(--num-s)}
.gb.sm{font-size:16px}
#gread{min-height:48px;margin-bottom:12px;font-size:16px}
.gcard .ghelp{font-size:14px;margin:0}
#gc{width:100%;height:520px;display:block;border-radius:24px;background:var(--screen);touch-action:none;cursor:grab;box-shadow:inset 0 3px 0 rgba(74,53,80,.08)}
[hidden]{display:none!important}
#pick{appearance:none;-webkit-appearance:none;font:inherit;font-size:18px;font-weight:600;color:var(--ink);background-color:var(--op);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235b4763' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px;border:0;border-radius:22px;padding:10px 42px 10px 18px;box-shadow:0 4px 0 var(--op-s);cursor:pointer}
#pick:focus-visible,.sel:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.sel{font:inherit;color:var(--ink);background:var(--screen);border:0;border-radius:12px;padding:6px 8px}
.sci{max-width:2200px;margin:0 auto;padding:clamp(16px,2.5vw,36px)}
#v-scientific{max-width:2280px}
.sdisp{background:var(--screen);border-radius:24px;padding:18px 26px;margin-bottom:24px;box-shadow:inset 0 3px 0 rgba(74,53,80,.08)}
.sdisp:focus-within{outline:3px solid var(--ink);outline-offset:2px}
.sdisp input{width:100%;border:0;background:transparent;font:inherit;font-size:clamp(28px,4vw,60px);font-weight:600;color:var(--ink);text-align:right;outline:none;padding:4px 0}
#sr{min-height:36px;text-align:right;color:var(--soft);font-size:28px}
.skeys{display:flex;gap:clamp(12px,2.8vw,44px)}
.sg{flex:1 1 0;min-width:0;container-type:inline-size;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,20px);align-content:start}
@media (max-width:700px){.skeys{flex-direction:column}.skeys .sbtn{height:52px;font-size:14px}.mpair{grid-template-columns:1fr}}
.sbtn{height:clamp(52px,4.8vw,68px);font-size:clamp(13px,1.5vw,24px);font-size:clamp(12px,3.4cqw,30px);border-radius:22px;padding:0;min-width:0;overflow:hidden;white-space:nowrap}
.sp4{grid-column:span 4}
.gtop{grid-column:1/-1;margin:-6px 0 -14px}
.gsh{height:32px;padding:0 16px;font-size:14px;border-radius:16px;margin-right:10px;background:var(--fn);box-shadow:0 3px 0 var(--fn-s)}
.gsh:active{transform:translateY(2px);box-shadow:0 1px 0 var(--fn-s)}
.gview{position:relative;min-width:0}
.gtools{position:absolute;top:14px;right:14px;display:flex;gap:8px}
.gt{width:44px;height:44px;min-width:0;padding:0;font-size:24px;border-radius:14px;background:var(--body);box-shadow:0 3px 0 var(--num-s);display:flex;align-items:center;justify-content:center}
.gt:active{transform:translateY(2px);box-shadow:0 1px 0 var(--num-s)}
#gread2{position:absolute;left:16px;bottom:14px;background:var(--body);border-radius:14px;padding:6px 12px;font-size:15px;pointer-events:none;display:none}
.gview.full #gread2{display:block}
.gview.full #gread2:empty{display:none}
.gview.full{position:fixed;inset:0;z-index:100;background:var(--bg);padding:12px}
.gview.full #gc{height:100%}
#gpin{background:var(--screen);border-radius:16px;padding:10px 14px;margin-bottom:12px;font-size:16px;line-height:1.6}
.pet .tail.wag{animation-duration:.45s}
header nav{display:flex;align-items:center;gap:12px}
.hl{margin-top:16px;display:grid;gap:6px}
.hl:empty{display:none}
.hi{height:auto;display:flex;align-items:center;gap:12px;width:100%;font-size:16px;font-weight:400;padding:8px 14px;border-radius:14px;background:var(--screen);box-shadow:none;text-align:left}
.hi:active{transform:none;box-shadow:none}
.hi span{margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--soft)}
.hi b{font-weight:600}
.hi i{font-style:normal;font-size:13px;color:var(--soft)}
.gdet{margin-top:10px;background:var(--screen);border-radius:16px;padding:10px 14px}
.gdet summary{cursor:pointer;font-weight:500}
#gtab table{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
#gtab td,#gtab th{padding:3px 6px;text-align:right}
#gint,#gkey{font-size:15px;margin-top:6px}
.kp{margin-top:8px;line-height:1.55}
.kp+.kp{padding-top:8px;border-top:1px solid var(--grid)}
.mini{grid-template-columns:1fr 1fr}
.fld{display:block;margin-bottom:14px;font-weight:500}
.fld input,.fld select{display:block;width:100%;margin-top:6px;font:inherit;font-size:20px;color:var(--ink);background:var(--screen);border:0;border-radius:14px;padding:12px 14px}
.fld input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.mout{background:var(--screen);border-radius:20px;padding:20px;font-size:18px;line-height:1.6;color:var(--soft)}
.mout b{display:block;font-size:30px;color:var(--ink);margin-bottom:6px;overflow-wrap:anywhere}
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#5b4763;color:#fff;padding:10px 18px;border-radius:16px;opacity:0;pointer-events:none;transition:.2s;z-index:200}
#toast.show{opacity:1;transform:translate(-50%,0)}
.sleepy .pet .hop{animation:snooze 3.2s ease-in-out infinite}
.sleepy .pet::after{content:"z z";position:absolute;top:-6px;right:-10px;font-size:12px;font-weight:600;color:var(--soft);animation:zz 3.2s ease-in-out infinite}
@keyframes snooze{50%{transform:scale(1.04,.96)}}
:root[data-page]{--bg:hsl(var(--h) 75% 95%);--body:hsl(var(--h) 85% 91%);--screen:hsl(var(--h) 90% 97%);--num:hsl(var(--h) 85% 96%);--num-s:hsl(var(--h) 50% 82%);--op:hsl(var(--h) 85% 80%);--op-s:hsl(var(--h) 55% 66%);--fn:hsl(calc(var(--h) + 45) 90% 88%);--fn-s:hsl(calc(var(--h) + 45) 55% 72%);--eq:hsl(calc(var(--h) - 45) 80% 86%);--eq-s:hsl(calc(var(--h) - 45) 50% 70%)}
:root[data-page=home],:root[data-page=simple],.pcard[data-go=simple]{--h:330}
:root[data-page=tip],.pcard[data-go=tip]{--h:0}
:root[data-page=units],.pcard[data-go=units]{--h:30}
:root[data-page=percent],.pcard[data-go=percent]{--h:60}
:root[data-page=date],.pcard[data-go=date]{--h:90}
:root[data-page=gpa],.pcard[data-go=gpa]{--h:120}
:root[data-page=graphing],.pcard[data-go=graphing]{--h:150}
:root[data-page=loan],.pcard[data-go=loan]{--h:180}
:root[data-page=scientific],.pcard[data-go=scientific]{--h:210}
:root[data-page=savings],.pcard[data-go=savings]{--h:240}
:root[data-page=matrix],.pcard[data-go=matrix]{--h:270}
:root[data-page=discount],.pcard[data-go=discount]{--h:300}
.quietbtn{height:42px;padding:0 14px;font-size:16px;font-weight:600;border-radius:21px;display:inline-flex;align-items:center;gap:8px;background:var(--op);box-shadow:0 4px 0 var(--op-s);white-space:nowrap}
.quietbtn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--op-s)}
.qsw{width:36px;height:20px;border-radius:10px;background:rgba(255,255,255,.7);position:relative;box-shadow:inset 0 0 0 2px var(--op-s);flex:none}
.qsw::after{content:"";position:absolute;top:4px;left:4px;width:12px;height:12px;border-radius:50%;background:var(--op-s);transition:left .15s}
.quietbtn[aria-pressed=true]{background:var(--fn);box-shadow:0 4px 0 var(--fn-s)}
.quietbtn[aria-pressed=true] .qsw{box-shadow:inset 0 0 0 2px var(--fn-s)}
.quietbtn[aria-pressed=true] .qsw::after{left:20px;background:var(--fn-s)}
.modebtn{width:42px;height:42px;padding:0;font-size:19px;border-radius:21px;background:var(--fn);box-shadow:0 4px 0 var(--fn-s);flex:none;display:inline-flex;align-items:center;justify-content:center}
.modebtn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--fn-s)}
@media (max-width:360px){.qsw{display:none}}
.pet .say{position:absolute;bottom:100%;left:50%;transform:translate(-50%,6px);margin-bottom:2px;white-space:nowrap;background:#fff;color:#5b4763;padding:4px 10px;border-radius:12px;font-size:13px;font-weight:500;box-shadow:0 2px 0 var(--num-s);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.pet.talk .say{opacity:1;transform:translate(-50%,0)}
.pet.spin .hop{animation:spinr .6s ease-in-out}
@keyframes spinr{to{transform:rotate(360deg)}}
.pet.wave .hop{animation:wave .9s ease-in-out}
@keyframes wave{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-10deg)}80%{transform:rotate(8deg)}}
.pet.stretch .hop{animation:stretchy .8s ease-out}
@keyframes stretchy{30%{transform:scale(.88,1.18)}60%{transform:scale(1.06,.94)}}
.conf{position:absolute;width:8px;height:12px;border-radius:2px;pointer-events:none;z-index:50;animation:confall 1.4s ease-out forwards}
@keyframes confall{0%{opacity:1;transform:translate(0,-30px) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}}
.quiet .pet,.quiet .pet .hop,.quiet .pet *,.quiet .face .eye{animation:none!important;transition:none!important}
@media (max-width:520px){.qt{display:none}.quietbtn{padding:0 10px}}
.backbar{max-width:1200px;margin:0 auto;padding:28px 24px 24px}
.back{height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 18px 0 14px;font-size:18px;font-weight:500;border-radius:16px;background:var(--op);box-shadow:0 4px 0 var(--op-s)}
.back:active{transform:translateY(3px);box-shadow:0 1px 0 var(--op-s)}
.homehead{display:grid;grid-template-columns:minmax(0,570px) auto;justify-content:space-between;align-items:center;column-gap:60px;margin-bottom:28px}
.homehead .copy{display:contents}
.homehead h1{grid-column:1/-1;grid-row:1}
.homehead p{grid-column:1;grid-row:2;margin-bottom:0}
.kofi{grid-column:2;grid-row:2;justify-self:end;margin-right:10px}
.kofi-link{display:inline-block;background:var(--op);color:var(--ink);text-decoration:none;font-weight:600;font-size:18px;padding:14px 22px;border-radius:22px;box-shadow:0 5px 0 var(--op-s);white-space:nowrap}
.kofi-link:active{transform:translateY(4px);box-shadow:0 1px 0 var(--op-s)}
.kofi-link:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media (max-width:700px){.homehead{display:flex;flex-direction:column;align-items:flex-start;gap:16px}.homehead .copy{display:block;order:-1}.homehead p{margin-bottom:0}}
@media (max-width:520px){header.top{gap:8px;padding:10px 16px}.logo{font-size:18px;gap:8px}.logo-bear{width:30px;height:30px}header nav{gap:8px}#pick{font-size:15px;padding:8px 32px 8px 14px;max-width:42vw;text-overflow:ellipsis;background-position:right 12px center;background-size:10px}.modebtn{width:38px;height:38px;font-size:17px}.quietbtn{height:38px}}
@media (max-width:520px){.qsw{display:none}.quietbtn{width:38px;padding:0;justify-content:center;flex:none}#pick{min-width:0}header nav{min-width:0}}
@media (max-width:440px){.logo .lt{display:none}}
@media (max-width:360px){.logo-bear{width:26px;height:26px}}
@keyframes zz{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}
.mat{grid-template-columns:1.7fr 1fr}
.mpair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mh{display:flex;align-items:center;gap:8px;margin:12px 0 8px;font-weight:600}
.mg{display:grid;gap:8px;align-content:start}
.mg input{width:100%;min-width:0;text-align:center;font:inherit;font-size:20px;color:var(--ink);background:var(--screen);border:0;border-radius:12px;padding:14px 4px}
.mg input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.mg input.bad{outline:3px solid var(--bad)}
.mres-g{display:grid;gap:8px;align-content:start}
.mres-g div{background:var(--screen);border-radius:12px;padding:14px 6px;text-align:center;font-size:20px;min-width:0;overflow-wrap:anywhere}
.mres .big{background:var(--screen);border-radius:12px;padding:14px;text-align:center;font-size:26px;font-weight:600}
.mres .merr{color:var(--err);font-size:18px;font-weight:500}
.mres .hint{font-size:18px;font-weight:400;color:var(--soft)}
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.1;font-size:.85em}
.frac span+span{border-top:2px solid currentColor;padding-top:1px;min-width:100%;text-align:center}
.seg{display:inline-flex;gap:6px;margin-left:auto}
.seg button{height:32px;padding:0 12px;font-size:14px;border-radius:12px;box-shadow:0 3px 0 var(--num-s)}
.seg button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--num-s)}
.seg button[aria-pressed=true]{background:var(--fn);box-shadow:0 3px 0 var(--fn-s);font-weight:600}
#msteps{margin-top:14px}
.mst{margin-top:12px}
.mst>b{display:block;font-weight:500;margin-bottom:6px}
.mst .mres-g{gap:5px}
.mst .mres-g div{padding:6px 4px;font-size:15px;background:var(--body)}
.home{max-width:1200px;margin:0 auto;padding:32px 24px 56px;display:flex;flex-direction:column;min-height:calc(100vh - 110px)}
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));grid-auto-rows:minmax(150px,1fr);gap:20px;flex:1}
.pcard{height:100%;display:block;width:100%;text-align:left;padding:28px;border-radius:28px;font-size:18px;font-weight:500;line-height:1.45;color:var(--ink);text-decoration:none;background:hsl(var(--h,330) 85% 86%)!important;box-shadow:0 6px 0 hsl(var(--h,330) 55% 70%);transition:transform .08s,box-shadow .08s;-webkit-tap-highlight-color:transparent}
.pcard:active{transform:translateY(4px);box-shadow:0 1px 0 hsl(var(--h,330) 55% 70%)}
.pcard:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.pcard b{display:block;font-size:28px;font-weight:600;margin-bottom:6px}
.gcard>*{min-width:0}
@media (max-width:820px){.gcard{grid-template-columns:minmax(0,1fr)}#gc{height:320px}}
@media (max-width:520px){.graphing{padding:0 12px 56px}.gcard{padding:20px 16px;border-radius:30px}}
footer{text-align:center;padding:32px 24px 56px;color:var(--soft)}
@media (max-width:820px){.hero{grid-template-columns:1fr;gap:20px;padding-bottom:56px}.stage{padding-top:48px}}
.calc{position:relative;width:100%;max-width:600px;background:var(--body);border-radius:36px;padding:20px;
  box-shadow:0 8px 0 var(--shadow),0 24px 40px rgba(91,71,99,.12)}
.screen{background:var(--screen);border-radius:24px;padding:14px 18px 12px;margin-bottom:18px;
  display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;
  box-shadow:inset 0 3px 0 rgba(74,53,80,.08)}
.face{grid-row:1/3;width:64px;height:64px}
.face .eye{transform-box:fill-box;transform-origin:center;animation:blink 4.5s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.face .mouth{fill:none;stroke:var(--face);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:d .15s}
.face .mouth.fill{fill:var(--face)}
.face .cheek{fill:var(--cheek);opacity:.7}
.hist{min-height:20px;text-align:right;color:var(--soft);font-size:15px;overflow:hidden;white-space:nowrap}
.out{text-align:right;font-size:54px;font-weight:600;line-height:1.1;overflow:hidden;white-space:nowrap;min-height:58px}
.out.small{font-size:38px}
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
button{font:inherit;font-size:28px;font-weight:500;color:var(--ink);border:0;border-radius:22px;height:72px;cursor:pointer;
  background:var(--num);box-shadow:0 5px 0 var(--num-s);transition:transform .08s,box-shadow .08s;-webkit-tap-highlight-color:transparent}
button:active,button.press{transform:translateY(4px);box-shadow:0 1px 0 var(--num-s)}
button:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.fn{background:var(--fn);box-shadow:0 5px 0 var(--fn-s)}
.fn:active,.fn.press{box-shadow:0 1px 0 var(--fn-s)}
.op{background:var(--op);box-shadow:0 5px 0 var(--op-s)}
.op:active,.op.press{box-shadow:0 1px 0 var(--op-s)}
.op.on{outline:3px solid var(--ink);outline-offset:-3px}
.eq{background:var(--eq);box-shadow:0 5px 0 var(--eq-s)}
.eq:active,.eq.press{box-shadow:0 1px 0 var(--eq-s)}
.zero{grid-column:span 2}
.bar{display:flex;justify-content:flex-end;margin:-6px 0 8px}
.snd{height:32px;width:46px;font-size:15px;border-radius:16px;box-shadow:0 3px 0 var(--num-s)}
.snd:active{transform:translateY(2px);box-shadow:0 1px 0 var(--num-s)}
.pet{position:absolute;left:0;top:0;width:38px;height:44px;pointer-events:none;z-index:5;transition:transform .6s cubic-bezier(.45,.05,.4,1)}
.pet .hop{width:100%;height:100%;transform-origin:50% 100%}
.pet svg{display:block;overflow:visible}
.pet .ear{transform-box:fill-box;transform-origin:50% 100%;animation:wig 3.6s infinite}
.pet.go .hop{animation:hop .6s ease-in-out}
.pet.cheer .hop{animation:cheer .45s ease-in-out 2}
@keyframes hop{20%{transform:scale(1.08,.88)}50%{transform:translateY(-26px) scale(.94,1.1)}85%{transform:translateY(0) scale(1.1,.88)}}
@keyframes cheer{50%{transform:translateY(-20px) scale(.94,1.1)}}
@keyframes wig{0%,88%,100%{transform:rotate(0)}94%{transform:rotate(-9deg)}}
.pet .tail{transform-box:fill-box;transform-origin:0% 100%;animation:swish 2.4s ease-in-out infinite}
@keyframes swish{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(10deg)}}
@media (prefers-reduced-motion:reduce){.face .eye,.pet .ear,.pet .tail{animation:none}button,.pcard{transition:none}.pet{transition:none}.pet .hop{animation:none!important}}

/* ---- dark mode: pastel buttons and cards on a soft plum night ---- */
:root[data-mode=dark]{color-scheme:dark;--ink:#f6eef9;--soft:#cdbfe0;--grid:rgba(235,215,250,.14);--bad:#ff9fb4;--err:#ffaec2;--shadow:rgba(0,0,0,.3);
  --bg:#2a2235;--body:#372d44;--screen:#221b2c;--num:#e6d9fb;--num-s:#a594c9;--op:#ffb7d1;--op-s:#c97f9d;--fn:#cde6fb;--fn-s:#8fb2d6;--eq:#c6f1dc;--eq-s:#88c2a6}
:root[data-mode=dark][data-page]{--bg:hsl(var(--h) 24% 16%);--body:hsl(var(--h) 22% 22%);--screen:hsl(var(--h) 26% 12%);--num:hsl(var(--h) 70% 90%);--num-s:hsl(var(--h) 32% 62%);--op:hsl(var(--h) 85% 82%);--op-s:hsl(var(--h) 42% 60%);--fn:hsl(calc(var(--h) + 45) 85% 85%);--fn-s:hsl(calc(var(--h) + 45) 38% 60%);--eq:hsl(calc(var(--h) - 45) 70% 83%);--eq-s:hsl(calc(var(--h) - 45) 35% 58%)}
/* pastel things keep the dark plum text, everything on the night background gets light text */
:root[data-mode=dark] :is(button,.pcard,.kofi-link,#pick,kbd){color:#5b4763}
:root[data-mode=dark] .hi{color:var(--ink)}
:root[data-mode=dark] .hi span,:root[data-mode=dark] .hi i{color:var(--soft)}
:root[data-mode=dark] .gt{background:var(--num)}
:root[data-mode=dark] .pcard{box-shadow:0 6px 0 hsl(var(--h,330) 40% 58%)}
:root[data-mode=dark] .pcard:active{box-shadow:0 1px 0 hsl(var(--h,330) 40% 58%)}
:root[data-mode=dark] button:focus-visible,:root[data-mode=dark] .pcard:focus-visible,:root[data-mode=dark] .kofi-link:focus-visible,:root[data-mode=dark] #pick:focus-visible{outline-color:#fff}
:root[data-mode=dark] .face{--face:var(--ink)}
:root[data-mode=dark] header.top{box-shadow:0 6px 14px -10px rgba(0,0,0,.6)}
:root[data-mode=dark] .sdisp,:root[data-mode=dark] .screen,:root[data-mode=dark] #gc{box-shadow:inset 0 3px 0 rgba(0,0,0,.22)}