:root{
 --bg:#f6f8fc;--card:#fff;--card2:#eef2f8;--text:#172033;--muted:#687386;--line:#dfe5ee;
 --a:#5b5cf0;--a2:#7c3aed;--soft:#ececff;--success:#087f5b;--warm:#fff6e8;
 --shadow:0 16px 45px rgba(23,32,51,.08)
}
[data-theme=dark]{
 --bg:#0d1118;--card:#151b25;--card2:#1c2532;--text:#f5f7fb;--muted:#a6afbd;--line:#2c3645;
 --a:#8b8cf8;--a2:#a78bfa;--soft:#232442;--success:#5ee6b3;--warm:#2b2419;
 --shadow:0 16px 45px rgba(0,0,0,.26)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
.hide{display:none!important}

.top{height:72px;max-width:1220px;margin:auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.logo{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--a),var(--a2));display:grid;place-items:center;color:#fff;font-size:22px;font-weight:950;flex:0 0 auto}
.brand b{display:block;line-height:1.1;font-size:18px}
.brand small{display:block;color:var(--muted);font-size:10px;letter-spacing:.04em;margin-top:2px}
.topnav{display:flex;align-items:center;gap:8px}
.navbtn,.ghost,.icon,.mini,.back,.fav,.secondary,.primary{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:12px;min-height:42px;padding:0 14px}
.navbtn{font-weight:750}.icon,.fav{width:42px;padding:0;font-size:20px}
main{max-width:1220px;margin:auto;padding:0 24px 54px}

.beginner-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(330px,.72fr);gap:38px;align-items:center;padding:54px 0 28px}
.eyebrow{color:var(--a);font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.hero-copy h1{font-size:clamp(43px,5.4vw,72px);line-height:.98;letter-spacing:-.05em;margin:12px 0 18px;max-width:730px}
.hero-copy h1 span{color:var(--a)}
.lead{font-size:18px;color:var(--muted);max-width:690px;margin:0 0 24px}
.lead b{color:var(--text)}
.search{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:0 13px;max-width:760px;box-shadow:var(--shadow)}
.search>span{font-size:25px;color:var(--muted)}
.search input{flex:1;min-width:0;height:58px;border:0;background:transparent;color:var(--text);outline:0;font-size:16px}
.big-search:focus-within{border-color:var(--a);box-shadow:0 0 0 4px var(--soft)}
kbd{border:1px solid var(--line);background:var(--card2);border-radius:6px;padding:2px 6px;color:var(--muted);font-size:11px}
.search-examples{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:13px;color:var(--muted);font-size:12px}
.search-examples button{border:0;background:var(--soft);color:var(--a);border-radius:999px;padding:6px 10px;font-weight:750}

.quick{background:linear-gradient(160deg,var(--card),var(--card2));border:1px solid var(--line);border-radius:26px;padding:17px;box-shadow:var(--shadow)}
.qhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.qhead small{display:block;color:var(--muted);font-size:10px;letter-spacing:.13em}
.qhead b{font-size:14px}
.display{min-height:104px;padding:15px;border-radius:17px;background:var(--bg);display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;overflow:hidden}
.display div{color:var(--muted);word-break:break-all}.display strong{font-size:38px;line-height:1.05;letter-spacing:-.035em;word-break:break-all}
.qpad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:11px}
.qpad button{height:50px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);font-weight:850;font-size:16px}
.qpad .operator{background:var(--soft);color:var(--a)}.qpad .eq{background:var(--a);color:white;border-color:var(--a)}
.hint{font-size:11px;color:var(--muted);margin-top:10px}

.starter-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border:1px solid var(--line);background:var(--line);border-radius:18px;overflow:hidden;margin:7px 0 44px}
.starter-strip>div{background:var(--card);padding:17px;display:flex;align-items:center;gap:12px}
.starter-strip>div>span{width:34px;height:34px;border-radius:999px;background:var(--soft);color:var(--a);display:grid;place-items:center;font-weight:900;flex:0 0 auto}
.starter-strip p{margin:0}.starter-strip b{display:block}.starter-strip small{display:block;color:var(--muted);font-size:11px;margin-top:2px}

.block{margin:46px 0}
.title,.tools-toolbar{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
.title h2,.tools-toolbar h2,.panel h2{font-size:30px;letter-spacing:-.035em;margin:4px 0 0}
.section-sub{margin:5px 0 0;color:var(--muted);font-size:13px}
.popular-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.popular-card{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:17px;padding:17px;text-align:left;display:flex;gap:12px;align-items:flex-start;min-height:104px;transition:.17s}
.popular-card:hover{border-color:var(--a);transform:translateY(-2px);box-shadow:var(--shadow)}
.popular-card .picon{width:42px;height:42px;display:grid;place-items:center;background:var(--soft);border-radius:12px;font-weight:900;font-size:18px;flex:0 0 auto}
.popular-card b{display:block;font-size:14px}.popular-card small{display:block;color:var(--muted);font-size:11px;margin-top:3px;line-height:1.35}

.friendly-categories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.category-card{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:20px;padding:19px;text-align:left;min-height:164px;transition:.17s;position:relative}
.category-card:hover{border-color:var(--a);transform:translateY(-2px);box-shadow:var(--shadow)}
.category-card .cicon{font-size:27px;margin-bottom:17px}
.category-card h3{font-size:17px;margin:0 0 5px}.category-card p{font-size:12px;color:var(--muted);margin:0;max-width:92%}
.category-card .count-badge{position:absolute;right:15px;top:15px;background:var(--card2);border-radius:999px;padding:4px 8px;font-size:10px;color:var(--muted);font-weight:800}
.category-card .examples{display:block;margin-top:10px;color:var(--a);font-size:11px;font-weight:750}

.tools-toolbar{align-items:center}
.small-action{min-height:38px;font-weight:750}
.accessible-chips{display:flex;gap:7px;flex-wrap:wrap;margin:2px 0 17px}
.chip{border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:999px;padding:8px 11px;font-size:12px;font-weight:700}
.chip.on{background:var(--a);color:#fff;border-color:var(--a)}
.result-title{margin:0 0 10px;justify-content:flex-end}.result-title>span{color:var(--muted);font-size:12px}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.tool{position:relative;text-align:left;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:17px;padding:17px;min-height:150px;transition:.17s}
.tool:hover{transform:translateY(-2px);border-color:var(--a);box-shadow:var(--shadow)}
.ticon{display:grid;place-items:center;width:41px;height:41px;background:var(--card2);border-radius:12px;font-weight:900;font-size:17px;margin-bottom:20px}
.tool h3{margin:0 0 5px;font-size:15px;line-height:1.25}.tool p{margin:0;color:var(--muted);font-size:11.5px;line-height:1.4}
.tag{position:absolute;top:13px;right:13px;background:var(--soft);color:var(--a);border-radius:999px;padding:4px 7px;font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.difficulty{display:inline-block;margin-top:10px;color:var(--muted);font-size:10px}
.empty{text-align:center;color:var(--muted);padding:55px 20px;background:var(--card);border:1px dashed var(--line);border-radius:18px}
.empty-icon{font-size:34px}.empty h3{color:var(--text);margin:6px 0}.empty p{margin:0}

.two{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px}
.panel h2{font-size:22px}
.smalllist{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.smallbtn{border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:10px;padding:8px 10px;font-size:12px}.muted{color:var(--muted);font-size:12px}

.calcview{padding-top:22px}.back{margin-bottom:14px;font-weight:750}
.shell{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:17px;align-items:start}
.maincard{background:var(--card);border:1px solid var(--line);border-radius:23px;padding:28px;min-width:0}
.chead{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:17px}
.chead h1{font-size:34px;letter-spacing:-.04em;margin:5px 0 6px}.chead p{margin:0;color:var(--muted);font-size:14px}.fav{font-size:23px;flex:0 0 42px}

.howto{background:var(--warm);border:1px solid color-mix(in srgb,#f59e0b 28%,var(--line));border-radius:16px;padding:16px;margin:0 0 20px}
.howto-head{display:flex;align-items:center;gap:9px;font-weight:900;margin-bottom:10px}
.howto-head span{width:28px;height:28px;border-radius:999px;background:#f59e0b;color:#fff;display:grid;place-items:center}
.howto-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.howto-step{background:color-mix(in srgb,var(--card) 75%,transparent);border-radius:10px;padding:10px;font-size:11px;color:var(--muted)}
.howto-step b{display:block;color:var(--text);font-size:12px;margin-bottom:2px}

.side{display:grid;gap:11px}.sidecard{background:var(--card);border:1px solid var(--line);border-radius:17px;padding:16px}
.sidecard small{color:var(--a);font-weight:900;letter-spacing:.1em}.sidecard h3{font-size:15px;margin:6px 0}.sidecard p{margin:0;color:var(--muted);font-size:12px}.newbie-side{border-color:color-mix(in srgb,var(--a) 30%,var(--line));background:linear-gradient(160deg,var(--card),var(--soft))}
.related{display:grid;gap:7px;margin-top:10px}.related button{background:var(--bg);border:1px solid var(--line);color:var(--text);text-align:left;border-radius:9px;padding:10px;font-size:12px}

.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field{display:grid;gap:6px;min-width:0}.field.full,.actions,.result,.note,.tapstage,.scipad{grid-column:1/-1}.field label{font-size:13px;font-weight:800}.field small{color:var(--muted)}
input[type=number],input[type=text],input[type=date],input[type=time],select,textarea{width:100%;height:49px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--text);padding:0 12px;outline:none;font-size:16px}
textarea{height:112px;padding:12px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--a);box-shadow:0 0 0 3px var(--soft)}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}.primary,.secondary{height:45px;border:0;font-weight:900}.primary{background:var(--a);color:#fff}.secondary{background:var(--card2);color:var(--text)}
.note{border-left:3px solid var(--a);background:var(--card2);padding:11px 13px;border-radius:0 10px 10px 0;color:var(--muted);font-size:12px}
.result{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:18px}.result small{display:block;color:var(--muted);font-weight:900;letter-spacing:.08em;text-transform:uppercase}.big{font-size:35px;font-weight:950;letter-spacing:-.04em;word-break:break-word}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.rgrid>div{background:var(--card);border-radius:10px;padding:10px}.rgrid span{display:block;color:var(--muted);font-size:10px}.rgrid b{font-size:14px;word-break:break-word}
.tapdisplay{min-height:120px;border:1px solid var(--line);background:var(--bg);border-radius:18px;display:flex;justify-content:flex-end;align-items:center;padding:16px;font-size:clamp(38px,8vw,72px);font-weight:900;overflow:auto}
.tappad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.tappad button{height:62px;border:1px solid var(--line);background:var(--card2);color:var(--text);border-radius:14px;font-size:22px;font-weight:900}
.counter{text-align:center;font-size:78px;font-weight:900}.counterbtn{height:86px!important;font-size:26px!important}
.scipad{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.scipad button{height:44px;border:1px solid var(--line);background:var(--card2);color:var(--text);border-radius:10px;font-weight:800}
.canvas{width:100%;height:380px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.matrix input{text-align:center}.checks{display:flex;gap:8px;flex-wrap:wrap}.badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 9px;background:var(--card2);font-size:11px;color:var(--muted)}

.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:var(--text);color:var(--bg);padding:10px 14px;border-radius:10px;font-size:12px;transition:.2s;z-index:10}.toast.show{opacity:1;transform:translate(-50%,0)}
footer{max-width:1220px;margin:20px auto 0;padding:28px 24px 42px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:11px}footer b{color:var(--text)}

@media(max-width:1000px){
 .popular-grid{grid-template-columns:repeat(3,1fr)}.friendly-categories{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:repeat(3,1fr)}
 .shell{grid-template-columns:1fr}.side{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:780px){
 main,.top{padding-left:14px;padding-right:14px}.topnav .navbtn{display:none}.beginner-hero{grid-template-columns:1fr;padding-top:29px;gap:23px}.hero-copy h1{font-size:45px}
 .starter-strip{grid-template-columns:1fr}.popular-grid{grid-template-columns:repeat(2,1fr)}.friendly-categories{grid-template-columns:repeat(2,1fr)}
 .grid{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:1fr}.side{grid-template-columns:1fr 1fr}.sidecard:last-child{grid-column:1/-1}
 .rgrid{grid-template-columns:1fr 1fr}.scipad{grid-template-columns:repeat(4,1fr)}.howto-steps{grid-template-columns:1fr}
}
@media(max-width:520px){
 .top{height:64px}.brand small{display:none}.hero-copy h1{font-size:38px}.lead{font-size:16px}.quick{border-radius:19px;padding:12px}
 .popular-grid{grid-template-columns:1fr 1fr}.popular-card{padding:13px;min-height:115px;display:block}.popular-card .picon{margin-bottom:9px;width:36px;height:36px}.popular-card small{font-size:10.5px}
 .friendly-categories{grid-template-columns:1fr}.category-card{min-height:140px}.grid{grid-template-columns:1fr}
 .tool{min-height:124px}.ticon{margin-bottom:15px}.form{grid-template-columns:1fr}.field.full,.actions,.result,.note,.tapstage,.scipad{grid-column:1}
 .maincard{padding:17px}.chead h1{font-size:28px}.side{grid-template-columns:1fr}.sidecard:last-child{grid-column:auto}.rgrid{grid-template-columns:1fr}.canvas{height:300px}
 .tools-toolbar{align-items:flex-start}.tools-toolbar h2,.title h2{font-size:26px}footer{flex-direction:column}
}