:root{--bg:#f4f6fb;--card:#fff;--fg:#14213d;--line:#d9deea;--ac:#3b5bdb;--mut:#64708a;--err:#c92a2a}
body.dark{--bg:#0f1420;--card:#182033;--fg:#e8ecf5;--line:#2a3550;--ac:#7c93ff;--mut:#98a3bd;--err:#ff8787}
*{box-sizing:border-box}body{margin:0;font:16px/1.5 system-ui,Segoe UI,sans-serif;background:var(--bg);color:var(--fg)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--card);padding:6px;z-index:9}
header{position:sticky;top:0;z-index:5;display:flex;gap:12px;align-items:center;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line)}
.logo{font-size:1.4rem;font-weight:500;color:var(--fg);text-decoration:none}.logo b{color:var(--ac)}
#search{flex:1;max-width:420px;margin-left:auto}#menuBtn{display:none}
button,input,textarea{font:inherit;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 12px}
button{cursor:var(--cur-pointer,pointer)}button:hover{border-color:var(--ac)}:focus-visible{outline:3px solid var(--ac);outline-offset:2px}
nav{position:fixed;top:57px;bottom:0;left:0;width:200px;padding:12px;background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
nav a{padding:8px 10px;border-radius:8px;color:var(--fg);text-decoration:none}nav a:hover,nav a.on{background:var(--bg);color:var(--ac)}nav .off{padding:8px 10px;color:var(--mut)}
main{margin-left:200px;padding:20px;max-width:1000px}h2{margin-top:0}h3{margin:20px 0 8px;color:var(--mut);font-size:.9rem;text-transform:uppercase;letter-spacing:.05em}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.card{position:relative;display:block;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:12px;color:var(--fg);text-decoration:none}
a.card:hover{border-color:var(--ac)}.card .ic{font-size:1.8rem}.card b{display:block}.card small{color:var(--mut)}.card.off{opacity:.6}
.star{position:absolute;top:8px;right:8px;border:0;background:none;padding:4px;font-size:1.1rem}
.badge{font-size:.75rem;color:var(--mut)}.link{border:0;background:none;color:var(--mut);text-decoration:underline;margin-top:12px;padding:0}
.tabs,.btns,.fields{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.tabs button.on{background:var(--ac);color:#fff;border-color:var(--ac)}
.fields label{display:flex;flex-direction:column;flex:1;min-width:140px;font-size:.85rem;color:var(--mut)}.fields.small label{min-width:90px}
label{display:block;margin-bottom:8px;font-size:.85rem;color:var(--mut)}textarea{width:100%;font-family:ui-monospace,monospace}
.screen{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;max-width:420px}
#hist{font-size:.85rem;color:var(--mut);max-height:7.5em;overflow:auto;text-align:right}#hist div{cursor:var(--cur-pointer,pointer)}
#expr{width:100%;font-size:1.2rem;border:0;border-bottom:1px solid var(--line);border-radius:0;text-align:right;background:transparent}
#out{min-height:2.2em;font-size:1.6rem;text-align:right;word-break:break-all}#mode{margin-bottom:10px}
.keys{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:420px}.keys button{padding:12px 0}.keys .num{font-weight:700}.keys .enter{background:var(--ac);color:#fff;border-color:var(--ac)}
canvas{width:100%;max-width:720px;border:1px solid var(--line);border-radius:12px;touch-action:none;cursor:crosshair;display:block}
.muted{color:var(--mut);font-size:.9rem;margin:6px 0}.err{color:var(--err)}pre{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px;white-space:pre-wrap}
@media(max-width:760px){#menuBtn{display:block}nav{transform:translateX(-100%);transition:transform .2s;z-index:4}nav.open{transform:none}main{margin-left:0}}

.frame{position:fixed;top:57px;left:200px;right:0;bottom:0;width:calc(100% - 200px);height:calc(100% - 57px);border:0;background:var(--bg)}
@media(max-width:760px){.frame{left:0;width:100%}}
.ti{width:310px;max-width:100%;margin:0 auto;background:#0d0e10;border-radius:30px 30px 44px 44px;padding:16px 14px 22px;box-shadow:0 10px 28px #0007}
.lcd{position:relative;display:flex;flex-direction:column;height:200px;background:#f3f4ef;color:#111;border:3px solid #26282b;border-radius:6px;font:14px/1.3 ui-monospace,Menlo,Consolas,monospace}
.sbar{background:#15171a;color:#e6e8e0;font-size:10px;padding:2px 5px;white-space:nowrap;overflow:hidden}
#hist{flex:1;overflow:auto;padding:3px 6px}#hist .li{text-align:left;word-break:break-all}#hist .lr{text-align:right;word-break:break-all}#hist .le{font-weight:700}
.lcd #expr{border:0;border-radius:0;background:transparent;color:#111;font:inherit;padding:3px 6px 5px;width:100%;text-align:left}.lcd #expr:focus-visible{outline:0;background:#e8eadf}
#mmenu{position:absolute;inset:18px 0 0 0;background:#f3f4ef;overflow:auto;padding:4px}#mmenu button{display:block;width:100%;text-align:left;border:0;background:none;color:#111;font:inherit;padding:2px 6px;border-radius:0}#mmenu button:hover{background:#111;color:#f3f4ef}
.tikeys{display:grid;grid-template-columns:repeat(5,1fr);gap:6px 7px;margin-top:14px}
.k{position:relative;padding-top:13px}.k .l2,.k .la{position:absolute;top:0;font-size:9px;line-height:12px;white-space:nowrap}.k .l2{left:1px;color:#5aa9ff}.k .la{right:1px;color:#6fd36f}
.k button{width:100%;height:30px;border:0;border-radius:15px/11px;background:#2c2f34;color:#fff;font-weight:700;font-size:12px;padding:0}.k button:hover{filter:brightness(1.25)}
.k.n button{background:#fff;color:#111;font-size:16px}.k.top{padding-top:4px}.k.top .l2{display:none}.k.top button{background:#c8cbd0;color:#111}.k.b button{background:#3a8fd9}.k.g button{background:#4caf50;color:#111}
.dpad{grid-column:4/6;grid-row:2/4;position:relative;align-self:center;justify-self:center;width:100%;max-width:110px;aspect-ratio:1;border-radius:50%;background:#2c2f34}
.dpad button{position:absolute;width:32%;height:32%;padding:0;border:0;border-radius:50%;background:transparent;color:#e6e6e6;font-size:11px}.dpad .u{top:6%;left:34%}.dpad .d{bottom:6%;left:34%}.dpad .l{left:6%;top:34%}.dpad .r{right:6%;top:34%}
select{font:inherit;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px}
.tabs2{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.tabs2 button.on{background:var(--ac);color:#fff;border-color:var(--ac)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--card);margin:6px 0}.grow{flex:1;min-width:140px}.late{border-color:var(--err)}.done{text-decoration:line-through;color:var(--mut)}
.fcard{display:block;width:100%;max-width:520px;min-height:180px;font-size:1.3rem;margin:10px 0;padding:24px;text-align:center}.fcard.back{background:var(--ac);color:#fff}
.opt{display:block;width:100%;max-width:520px;text-align:left;margin:6px 0}.opt.good{border-color:#2f9e44;background:#d3f9d8;color:#111}.opt.bad{border-color:var(--err)}.big{font-size:3rem;font-weight:700}
.nlay{display:grid;grid-template-columns:230px 1fr;gap:16px}.nside input,.nside select,.nside button{width:100%;margin-bottom:6px}.nitem{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nitem.on{border-color:var(--ac)}
#nbody{min-height:260px;border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--card);margin:8px 0}@media(max-width:760px){.nlay{grid-template-columns:1fr}}
.k.top button{font-size:11px}

/* ===== Home redesign ===== */
body.dark{--bg:#060c1d;--card:#0e1a3a;--fg:#eaf0ff;--line:#1c2d5e;--ac:#6b8cff;--mut:#9aa8cf;--side:#091230}
:root{--side:#fff}
svg.i{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
i[data-i]{display:inline-grid;font-style:normal}
header{height:76px;padding:0 24px;gap:20px;background:var(--side)}
.logo{display:flex;align-items:center;gap:10px;width:196px;font-size:1.5rem;font-weight:700;line-height:1.1}.logo b{color:var(--fg)}
.logo small{display:block;font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);font-weight:600}
.srch{flex:1;max-width:540px;margin-right:auto;display:flex;align-items:center;gap:10px;padding:0 14px;height:44px;border:1px solid var(--line);border-radius:22px;background:var(--card);color:var(--mut)}
.srch input,.hs input{flex:1;min-width:0;border:0;background:none;padding:0;color:var(--fg)}#search{max-width:none;margin:0}
.srch input:focus-visible,.hs input:focus-visible{outline:0}.srch:focus-within,.hs:focus-within{border-color:var(--ac);box-shadow:0 0 0 3px #6b8cff44}
kbd{font:600 .7rem system-ui;padding:3px 7px;border:1px solid var(--line);border-radius:6px}
.hb{width:40px;height:40px;padding:0;border-radius:50%;display:grid;place-items:center;background:none;border:0;color:var(--mut);font-size:1.1rem}
.me{display:flex;align-items:center;gap:10px;font-weight:600}.av{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#7c3aed);color:#fff;font-size:.85rem}
nav{top:76px;width:220px;padding:16px 12px;background:var(--side);gap:2px;overflow:auto}
nav a,nav .off,nav .nb{display:flex;align-items:center;gap:14px;width:100%;padding:11px 14px;border:0;border-radius:10px;background:none;color:var(--fg);font-size:.95rem;text-align:left}
nav a:hover{background:var(--bg);color:var(--ac)}nav a.on,nav a.on:hover{background:#2a47c9;color:#fff}nav .off{opacity:.5}nav .nb:hover{background:var(--bg)}
nav hr{width:100%;border:0;border-top:1px solid var(--line);margin:10px 0}nav .gap{flex:1}
.quote{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:12px;font-size:.85rem}.quote small{display:block;margin-top:8px;color:var(--mut);text-align:right}
main{margin-left:220px;max-width:none;padding:24px 28px}.frame{top:76px;left:220px;width:calc(100% - 220px);height:calc(100% - 76px)}
.hero{position:relative;overflow:hidden;min-height:250px;border:1px solid #2a4db8;border-radius:18px;background:#070d1f;color:#fff}
.hero .art{position:absolute;inset:0;width:100%;height:100%}.hero:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#070d1fe6,#070d1f80 50%,#0000)}
.hin{position:relative;z-index:2;max-width:640px;padding:34px 40px}.hin small{font-size:.75rem;font-weight:600;letter-spacing:.35em;text-transform:uppercase}
.hin h1{margin:4px 0 12px;font-size:clamp(2.6rem,6vw,4.2rem);line-height:1;letter-spacing:-.03em}
.hin h1 span{background:linear-gradient(90deg,#4f8cff,#a066ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hin p{max-width:26em;margin:0 0 20px;font-size:1.1rem}
.hs{display:flex;align-items:center;gap:12px;height:48px;padding:0 14px 0 16px;border:2px solid #3a63e0;border-radius:24px;background:#0a1330cc;color:#cdd7f5}.hs input{color:#fff}
.hand{position:absolute;z-index:2;top:30px;right:48px;margin:0;font:italic 1.3rem/1.35 "Segoe Script","Bradley Hand","Brush Script MT",cursive;color:#fff;transform:rotate(-8deg)}
.sh{display:flex;gap:14px;align-items:center;margin:26px 0 14px}.sh h2{margin:0;font-size:1.5rem}.sh p{margin:0;color:var(--mut);font-size:.9rem}
.tile{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:var(--c,var(--ac));color:#fff;font-size:1.4rem}.tile.big{background:linear-gradient(135deg,#5b8cff,#3b5bdb)}
.c-calc{--c:#4f5bf0}.c-study{--c:#17b26a}.c-notes{--c:#a24df0}.c-science{--c:#f59e0b}.c-ap{--c:#ef4565}.c-plan{--c:#12b8a6}.c-code{--c:#7c5cf0}.c-lib{--c:#2b8af5}.c-chat{--c:#0ea5e9}.c-games{--c:#d946ef}
#tools{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.card{display:flex;flex-direction:column;min-height:166px;padding:18px;border-radius:16px;border:1px solid color-mix(in srgb,var(--c,var(--ac)) 45%,var(--line));background:linear-gradient(140deg,color-mix(in srgb,var(--c,var(--ac)) 24%,var(--card)),var(--card) 75%)}
.card .tile{width:56px;height:56px;margin-bottom:12px;border-radius:16px;font-size:1.8rem}.card b{font-size:1.15rem}.card small{max-width:80%;margin-top:4px;font-size:.88rem}
.go{position:absolute;right:16px;bottom:16px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--c) 70%,#000);color:#fff}.card .badge{position:absolute;right:16px;bottom:18px}
.row2{display:grid;grid-template-columns:1fr 1.1fr .8fr;gap:20px;margin-top:22px}.col{display:grid;gap:20px;align-content:start}
.panel{padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.panel h3{display:flex;gap:10px;align-items:center;margin:0 0 4px;font-size:1.05rem;letter-spacing:0;text-transform:none;color:var(--fg)}.sub{margin:0 0 10px;color:var(--mut);font-size:.8rem}
.qrow{display:flex;align-items:center;gap:12px;margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--c) 10%,var(--bg));color:var(--fg);text-decoration:none}
.qrow .tile{width:38px;height:38px;border-radius:10px;font-size:1.1rem}.qrow .mt{display:grid;flex:1}.qrow small,.qrow time{color:var(--mut);font-size:.78rem}.empty{margin:8px 0;color:var(--mut);font-size:.9rem}
.goals{display:flex;gap:16px;align-items:center;margin-top:12px}.goals ul{margin:0;padding:0;list-style:none}.goals li{margin:6px 0}.goals label{display:flex;gap:8px;align-items:center;margin:0;color:var(--fg);font-size:.85rem}
.ring{flex:none;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;text-align:center;font-size:1.2rem;font-weight:700;line-height:1.1;background:radial-gradient(var(--card) 58%,#0000 59%),conic-gradient(#19e3c0 calc(var(--p)*1%),var(--line) 0)}.ring small{display:block;font-size:.55rem;font-weight:400;color:var(--mut)}
#gin{width:100%;margin-top:12px;font-size:.85rem}
.feat{display:flex;align-items:center;gap:14px;margin-top:10px;padding:14px;border:1px solid #3a63e0;border-radius:12px;background:linear-gradient(120deg,#2a47c955,#0000)}.feat .tile{background:linear-gradient(135deg,#f0845b,#a855f7);font-size:1rem;font-weight:700}.feat small{display:block;color:var(--mut)}
footer{display:flex;align-items:center;gap:20px;margin-top:28px;padding:18px 0;border-top:1px solid var(--line);color:var(--mut);font-size:.8rem}footer b{margin-right:auto;color:var(--fg)}
@media(max-width:1100px){.row2{grid-template-columns:1fr 1fr}.col{grid-column:1/-1}}
@media(max-width:760px){header{padding:0 12px;gap:8px}.logo{width:auto}.logo span,.me span,kbd,.hand{display:none}main{margin-left:0;padding:16px}.frame{left:0;width:100%}.row2{grid-template-columns:1fr}.hin{padding:24px}}
.pt{display:grid;grid-template-columns:repeat(18,minmax(38px,1fr));gap:3px;overflow-x:auto;padding-bottom:6px}.pt button{padding:3px 0;border-radius:6px;font-size:.82rem;font-weight:700;line-height:1.1;border-color:var(--c);background:color-mix(in srgb,var(--c) 28%,var(--card))}.pt small{display:block;font-size:.55rem;font-weight:400;opacity:.7}
.pt+.panel{margin-top:12px}.logo img{width:44px;height:44px;object-fit:contain}
a.me{color:var(--fg);text-decoration:none}.setp label{display:flex;flex-direction:column;gap:4px;margin:10px 0}.setp .btns{margin:10px 0}

/* Stogademy night: navy landing look */
body.dark{--bg:#030a2e;--card:#061552;--fg:#eaf1ff;--line:#1b3a9a;--ac:#4f8cff;--mut:#8fa6e8;background:radial-gradient(ellipse 60% 40% at 80% 8%,#2a1d8a55,transparent),radial-gradient(circle at 5% 25%,#1a3fc044,transparent 30%),var(--bg)}
body.dark header{background:#040f4acc;backdrop-filter:blur(10px);border-bottom:1px solid #12307f}
body.dark nav{background:#04104a}
.hero2{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:24px;min-height:430px;padding:24px 8px}
.h2txt small{font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:#37e0ff;font-weight:600}
.h2txt h1{margin:12px 0 14px;font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.035em;font-weight:700}
.h2txt h1 span{background:linear-gradient(90deg,#4f8cff,#a066ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.h2txt p{margin:0 0 24px;font-size:1.2rem;color:#9db2f0;max-width:26em}
.h2btn{display:flex;gap:12px;flex-wrap:wrap}
.h2btn .pri,.h2btn .sec{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:14px;font-weight:600;text-decoration:none;color:#fff;cursor:var(--cur-pointer,pointer)}
.h2btn .pri{border:0;background:linear-gradient(90deg,#1f7bff,#7a5cff);box-shadow:0 0 24px #2f8bff66}
.h2btn .sec{border:1px solid #2a4db8;background:#061552aa}
.h2art{position:relative;min-height:380px}
.ringo{position:absolute;inset:8% 4%;border:1px solid #3a63e0aa;border-radius:50%;transform:rotate(-14deg) scaleY(.72);box-shadow:0 0 40px #2f8bff44}
.mainlogo{position:absolute;left:50%;top:50%;width:230px;height:230px;transform:translate(-50%,-50%);object-fit:contain;filter:drop-shadow(0 0 36px #4f8cff)}
.subj,.pct,.fcard{position:absolute;border:1px solid #2a4db8;background:#0a2282cc;backdrop-filter:blur(6px);border-radius:14px;box-shadow:0 8px 30px #0006}
.subj{left:0;width:200px;padding:10px 14px}.subj b{display:block;font-size:.9rem;margin-bottom:6px}
.subj i{display:block;height:6px;border-radius:6px;background:#12307f}.subj i:after{content:"";display:block;height:100%;width:var(--w);border-radius:6px;background:linear-gradient(90deg,#37e0ff,#4f8cff)}
.s1{top:4%}.s2{top:22%;left:-2%}.s3{top:40%;left:-4%}
.pct{right:2%;top:2%;width:116px;height:116px;border-radius:50%;display:grid;place-content:center;text-align:center;background:conic-gradient(#37e0ff 0 78%,#12307f 0) padding-box}
.pct b{font-size:1.5rem}.pct small{font-size:.65rem;color:#cfdcff}
.fcard{left:6%;bottom:6%;padding:16px 18px;max-width:200px;background:#eaf1ff;color:#0a1a5a;font-weight:600;transform:rotate(-6deg)}
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:12px 0 18px}
.feats a{display:flex;gap:14px;padding:18px;border:1px solid #1b3a9a;border-radius:16px;background:linear-gradient(135deg,#0a2282aa,#061552);color:var(--fg);text-decoration:none}
.feats a:hover{border-color:#37e0ff}.feats b{display:block;font-size:1.1rem}.feats small{color:#9db2f0}
.pillbar{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin:0 auto 28px;padding:12px 24px;width:fit-content;max-width:100%;border:1px solid #1b3a9a;border-radius:999px;background:#061552aa;color:#cfdcff;font-size:.9rem}
.pillbar span{display:inline-flex;align-items:center;gap:8px}
@media(max-width:860px){.hero2{grid-template-columns:1fr}.h2art{min-height:320px}}

/* exact landing layout */
nav#nav,#menuBtn,.srch,.hb,.me{display:none!important}
main{margin:0 auto!important;max-width:1304px!important;padding:0 24px!important}
header{height:80px;padding:0 max(24px,calc((100% - 1304px)/2 + 24px));gap:0}
.logo img{width:52px;height:52px;object-fit:contain}.logo span b{font-size:1.65rem;font-weight:600;color:#fff}
.tl{display:flex;gap:40px;margin-left:44px}.tl a{color:#cfdcff;text-decoration:none;font-size:.95rem}.tl a:hover{color:#fff}
.signin,.start{padding:10px 20px;border-radius:12px;text-decoration:none;color:#fff;font-size:.95rem}
.signin{margin-left:auto;border:1px solid #2a4db8}.start{margin-left:14px;background:linear-gradient(90deg,#1f7bff,#37a0ff);box-shadow:0 0 18px #2f8bff66}
.fhead{text-align:center;margin:34px 0 22px}.fhead small{color:#37e0ff;letter-spacing:.3em;text-transform:uppercase;font-size:.75rem;font-weight:600}.fhead h2{margin:8px 0 0;font-size:2rem;font-weight:600}
.feats a{position:relative;align-items:center}.feats .go{position:absolute;right:16px;bottom:16px;width:30px;height:30px;border:1px solid #37a0ff;border-radius:50%;display:grid;place-items:center}
.cal{position:absolute;right:0;bottom:2%;width:230px;padding:12px;border:1px solid #2a4db8;border-radius:14px;background:#0a2282cc;transform:rotate(3deg);font-size:.7rem}
.cal div{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:6px;text-align:center}.cal i{font-style:normal;padding:3px 0;border-radius:50%}.cal i.on{background:#2f8bff}
footer{display:flex!important;align-items:center;gap:32px;border-top:1px solid #12307f;margin-top:34px;padding:20px 0;color:#cfdcff}footer b{margin-right:auto;display:flex;align-items:center;gap:10px;font-size:1.2rem;color:#fff}
.frame{top:0!important;left:0!important;width:100%!important;height:100%!important;z-index:30}
#orbx{position:fixed;right:6px;bottom:6px;z-index:31;width:26px;height:26px;padding:0;border-radius:50%;opacity:.35;line-height:1}#orbx:hover{opacity:1}
@media(max-width:860px){.tl{display:none}}

/* polish */
body,button,input,textarea{font-family:Outfit,system-ui,Segoe UI,sans-serif}
.hs[hidden]{display:none!important}
.tl{margin-left:64px}
.h2txt h1{font-weight:700;letter-spacing:-.04em}
.h2art{min-height:400px}
.mainlogo{left:48%;top:42%;width:250px;height:250px}
.s1{top:2%}.s2{top:19%;left:-3%}.s3{top:36%;left:-6%}
.pct{right:6%;top:0;background:conic-gradient(#37e0ff 0 78%,#12307f 0);border:0}
.pct:before{content:"";position:absolute;inset:9px;border-radius:50%;background:#061a6a}.pct b,.pct small{position:relative}
.fcard{left:2%;bottom:4%;max-width:176px;font-size:.95rem;line-height:1.3;transform:rotate(-5deg);padding:16px}
.cal{width:200px;right:0;bottom:0}
.feats a{padding-right:62px}.feats small{line-height:1.45}
.hero2{padding:36px 8px 28px}
.card{background:linear-gradient(135deg,#0a2282aa,#061552);border-color:#1b3a9a}a.card:hover{border-color:#37e0ff;box-shadow:0 0 20px #2f8bff44}
.panel{background:linear-gradient(135deg,#0a2282aa,#061552);border:1px solid #1b3a9a;border-radius:16px}

/* Google sign-in */
button.signin{background:transparent;font:inherit;font-size:.95rem;cursor:var(--cur-pointer,pointer)}button.signin:hover{border-color:#37a0ff}button.signin:disabled{opacity:.6;cursor:wait}
#userbox{margin-left:auto;display:flex;align-items:center;gap:12px;color:#fff;font-size:.95rem}#userbox[hidden],button.signin[hidden]{display:none}#userbox .signin{margin-left:0}
#authmsg{position:fixed;top:88px;left:50%;transform:translateX(-50%);z-index:50;max-width:min(560px,92vw);padding:12px 18px;border-radius:12px;background:#0a2282;border:1px solid #37a0ff;color:#fff;font-size:.95rem;box-shadow:0 8px 30px #0008}#authmsg[hidden]{display:none}

/* Get started + account modal */
button.start{border:0;font:inherit;font-size:.95rem;cursor:var(--cur-pointer,pointer)}
#amodal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:rgba(2,6,23,.72)}
.acard{position:relative;width:min(420px,100%);max-height:92vh;overflow:auto;padding:26px 24px 22px;border:1px solid #2a4db8;border-radius:16px;background:#061552;color:#fff;box-shadow:0 20px 60px #000a}
.acard h2{margin:0 0 4px;font-size:1.4rem;font-weight:600}.amuted{margin:0 0 8px;color:#9db2f0;font-size:.88rem}
.acard label{display:flex;flex-direction:column;gap:6px;margin:12px 0 0;font-size:.9rem;color:#cfdcff}
.acard input{padding:11px 12px;border:1px solid #2a4db8;border-radius:10px;background:#0a2282;color:#fff;font:inherit}
.acard input:focus{outline:2px solid #37a0ff;outline-offset:1px}
#acf{margin-top:14px;min-height:20px}.aerr{min-height:1.2em;margin:10px 0 0;color:#ff8a9b;font-size:.88rem}
.apri{width:100%;margin-top:6px;padding:12px;border:0;border-radius:12px;background:linear-gradient(90deg,#1f7bff,#37a0ff);color:#fff;font:inherit;font-weight:600;cursor:var(--cur-pointer,pointer)}
.apri:disabled{opacity:.6;cursor:wait}.aswap{text-align:center;margin:14px 0 0}.alink{background:none;border:0;color:#37e0ff;font:inherit;font-size:.9rem;cursor:var(--cur-pointer,pointer);text-decoration:underline}
.ax{position:absolute;top:8px;right:10px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:#cfdcff;font-size:1.5rem;line-height:1;cursor:var(--cur-pointer,pointer)}.ax:hover{background:#0a2282}

/* round edges: default radius for boxes that had none (zero specificity, so any explicit radius still wins) */
:root{--round:10px}
:where(button,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea,img,video,canvas,iframe,dialog,details,summary,pre,kbd,progress,meter,fieldset,blockquote,aside,article,nav,header,footer,.card,.panel,.modal){border-radius:var(--round,10px)}
:where(header){border-radius:var(--round,10px)}
:where(nav){border-radius:var(--round,10px)}
:where(nav a.on){border-radius:var(--round,10px)}
:where(.tabs button.on){border-radius:var(--round,10px)}
:where(.keys .enter){border-radius:var(--round,10px)}
:where(.frame){border-radius:var(--round,10px)}
:where(.sbar){border-radius:var(--round,10px)}
:where(#mmenu){border-radius:var(--round,10px)}
:where(.k.n button){border-radius:var(--round,10px)}
:where(.k.top button){border-radius:var(--round,10px)}
:where(.k.b button){border-radius:var(--round,10px)}
:where(.k.g button){border-radius:var(--round,10px)}
:where(.tabs2 button.on){border-radius:var(--round,10px)}
:where(.fcard.back){border-radius:var(--round,10px)}
:where(.opt.good){border-radius:var(--round,10px)}
:where(.hin h1 span){border-radius:var(--round,10px)}
:where(.tile.big){border-radius:var(--round,10px)}
:where(.feat .tile){border-radius:var(--round,10px)}
:where(.h2txt h1 span){border-radius:var(--round,10px)}
:where(.h2btn .pri){border-radius:var(--round,10px)}
:where(.h2btn .sec){border-radius:var(--round,10px)}
:where(.fcard){border-radius:var(--round,10px)}
:where(.signin){border-radius:var(--round,10px)}
:where(.start){border-radius:var(--round,10px)}
:where(.cal i.on){border-radius:var(--round,10px)}
:where(.pct){border-radius:var(--round,10px)}
:where(.card){border-radius:var(--round,10px)}

/* ---------- phones and small tablets ---------- */
@media(max-width:860px){
  header{position:relative!important;height:auto!important;min-height:60px;flex-wrap:wrap;padding:8px 14px!important;gap:8px!important;row-gap:4px!important}
  .logo{flex:none;width:auto!important}.logo img{width:40px!important;height:40px!important}
  .tl{display:flex!important;order:10;flex:0 0 100%;margin:0!important;gap:22px!important;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tl::-webkit-scrollbar{display:none}.tl a{padding:8px 0;font-size:.9rem}
  .signin,.start{padding:9px 14px!important;font-size:.88rem!important;white-space:nowrap;min-height:40px;box-sizing:border-box}
  .signin{margin-left:auto!important}.start{margin-left:0!important}
  #userbox{gap:8px;font-size:.88rem}#uname{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  main{padding:0 14px!important}
  footer{flex-wrap:wrap;gap:10px 22px!important}
}
@media(max-width:520px){
  .lg{display:none}
  .fhead h2{font-size:1.6rem}
  .signin,.start{padding:9px 12px!important}
}