/* StudyCount: exam-booklet blue, highlighter yellow, red-pen results */
:root{
  --blue:#2437E8; --blue-deep:#141C8F; --ink:#0A1033; --paper:#F4F5FF; --panel:#FFFFFF;
  --muted:#4F5A82; --rule:#D3D8F0; --rule-soft:#E7EAFB; --pen:#D81B33; --link:#2437E8;
  --yellow:#FFE14D; --mint:#86EBC0; --lilac:#CDBDFF; --sky:#A5DBFF; --peach:#FFC9A9;
  --dark:#0A1033; --shadow:#0A1033; --onink:#FFFFFF;
  --maxw:1080px; --prose:66ch;
}
@media (prefers-color-scheme:dark){:root{
  --blue:#1B25A6; --blue-deep:#0F1570; --ink:#ECEFFF; --paper:#0A0F2B; --panel:#131A40; --muted:#A3ADD3;
  --rule:#2A3470; --rule-soft:#1A2255; --pen:#FF7A8A; --link:#9DB4FF; --shadow:#000; --onink:#0A1033}
  input,select{color-scheme:dark}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:1.0625rem;line-height:1.6;font-optical-sizing:auto}
a{color:var(--link);text-underline-offset:3px}
a:hover{color:var(--pen)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;border-radius:4px;box-shadow:0 0 0 5px var(--ink)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* ---------- hero band: graph paper in blue ---------- */
.band{position:relative;overflow:hidden;color:#fff;background-color:var(--blue);
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:36px 36px;background-position:-1px -1px;padding-bottom:132px}
.band.slim{padding-bottom:110px}
.band.flat{padding-bottom:42px}
.band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;background:linear-gradient(transparent,rgba(10,16,51,.22))}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:1.45rem;letter-spacing:-.03em}
.brand:hover{color:#fff}
.brand svg{width:34px;height:30px}
.site-head nav{display:flex;gap:6px;flex-wrap:wrap;font-weight:600;font-size:.95rem}
.site-head nav a{color:#fff;text-decoration:none;padding:8px 14px;border-radius:999px}
.site-head nav a:hover{background:rgba(255,255,255,.16);color:#fff}
.site-head nav a[aria-current]{background:var(--yellow);color:var(--dark)}
.hero-copy{position:relative;z-index:2;padding-top:28px}
.hero-copy>*{max-width:760px}
.crumbs{font-size:.92rem;color:rgba(255,255,255,.8);margin:0 0 16px}
.crumbs a{color:#fff}
h1,h2,h3{font-weight:800;letter-spacing:-.03em;line-height:1.04;margin:0}
h1{font-size:clamp(2.5rem,7vw,4.9rem);text-wrap:balance}
.band h1{color:#fff}
h2{font-size:clamp(1.55rem,3.4vw,2.2rem);margin:0 0 .6em;text-wrap:balance}
h3{font-size:1.15rem;margin:1.4em 0 .4em;letter-spacing:-.015em}
p{margin:0 0 1em}
.lede{font-size:1.25rem;color:rgba(255,255,255,.9);max-width:46ch;margin:1em 0 0}
.prose{max-width:var(--prose)}
.prose li{margin-bottom:.4em}
.deco{position:absolute;inset:0;pointer-events:none;z-index:1}
.deco svg{position:absolute}
.stamp{right:7%;top:62px;width:210px;transform:rotate(12deg)}
.pencil{right:2%;top:250px;width:310px;transform:rotate(-24deg)}
.tally{right:8%;top:150px;width:110px;transform:rotate(-8deg);opacity:.9}

/* ---------- the report card ---------- */
.pull{margin-top:-96px;position:relative;z-index:3}
.band.slim + .pull{margin-top:-78px}
.tool{background:var(--panel);color:var(--ink);border:3px solid var(--ink);border-radius:22px;padding:26px;box-shadow:9px 9px 0 var(--shadow);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:26px}
.tool.one{grid-template-columns:1fr}
.tool-in{min-width:0}
.tool-out{background:var(--yellow);color:var(--dark);border:3px solid var(--ink);border-radius:16px;position:relative;padding:22px 20px 20px 46px;align-self:start;position:sticky;top:18px;min-height:250px;
  background-image:repeating-linear-gradient(transparent 0 33px,rgba(10,16,51,.14) 33px 34px)}
.tool-out::before{content:"";position:absolute;left:26px;top:0;bottom:0;border-left:2px solid var(--pen)}
.grid .head,.grid .row{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,.8fr) 36px;gap:10px;align-items:center}
.grid.has-level .head,.grid.has-level .row{grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr) minmax(0,.7fr) minmax(0,1.1fr) 36px}
.grid.cols3 .head,.grid.cols3 .row{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr) 36px}
.grid .head{font-size:.85rem;font-weight:700;color:var(--muted);padding:0 0 8px}
.grid .row{padding:6px 0}
input,select{font:inherit;font-weight:500;color:var(--ink);background:var(--paper);border:2px solid var(--rule);border-radius:10px;padding:9px 12px;width:100%;min-height:46px;min-width:0}
select{appearance:none;-webkit-appearance:none;padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234F5A82' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
input:hover,select:hover{border-color:var(--blue)}
input:focus,select:focus{border-color:var(--blue);background-color:var(--panel)}
input::placeholder{color:#8A93B8}
.rm{appearance:none;background:none;border:0;color:var(--muted);font-size:1.5rem;line-height:1;cursor:pointer;min-height:44px;border-radius:10px}
.rm:hover{color:var(--pen);background:var(--rule-soft)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px;align-items:center}
.btn{font:inherit;font-weight:700;cursor:pointer;border-radius:999px;padding:10px 20px;min-height:46px;border:2.5px solid var(--ink);background:var(--blue);color:#fff;box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.ghost{background:var(--panel);color:var(--ink)}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px 16px;margin-bottom:6px}
.field label{display:block;font-size:.88rem;font-weight:700;margin-bottom:5px}
.field small{display:block;color:var(--muted);font-size:.82rem;margin-top:4px}
.bonus{display:flex;flex-wrap:wrap;gap:14px;margin:16px 0 0;padding:14px;border:2px dashed var(--rule);border-radius:12px}
.bonus .field{min-width:150px;flex:1}
.scalepick{margin-bottom:14px;max-width:340px}
.saved{font-size:.85rem;color:var(--muted)}

/* ---------- the result: a notebook page, marked in red pen ---------- */
.result{display:flex;flex-direction:column;gap:14px}
.marks{display:flex;flex-wrap:wrap;gap:6px 22px}
.mk{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.mark{position:relative;width:176px;height:104px;display:grid;place-items:center}
.mark svg{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);overflow:visible}
.ring{fill:none;stroke:var(--pen);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:0;animation:pen .6s ease-out}
@keyframes pen{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}
.num{position:relative;font-weight:800;font-size:2.9rem;color:#C0152C;letter-spacing:-.04em;transform:rotate(-4deg);line-height:1}
.num.small{font-size:2rem}
.lab{font-weight:800;font-size:.95rem;background:var(--ink);color:#fff;padding:1px 9px;border-radius:5px}
.teach{font-family:'Caveat','Bricolage Grotesque',cursive;font-weight:700;font-size:1.85rem;line-height:1.1;color:#C0152C;transform:rotate(-2deg);margin:2px 0 0}
.sub{color:#1B2250;margin:0;font-size:.98rem}
.sub strong{color:var(--dark)}
.empty .ring{display:none}
.empty .num{color:rgba(10,16,51,.35)}
.out-actions{display:flex;gap:10px;flex-wrap:wrap}
.out-actions .btn{padding:6px 14px;min-height:38px;font-size:.9rem;box-shadow:2px 2px 0 var(--ink)}
.needs{width:100%;margin-top:10px;border-collapse:collapse;font-size:.95rem}
.needs td,.needs th{padding:6px 4px;border-top:1.5px solid rgba(10,16,51,.3);text-align:left}
.needs th{font-weight:600}
.table-note{width:100%;border-collapse:collapse;font-size:.95rem;margin:.5em 0 1.2em;background:var(--panel);border:2px solid var(--ink);border-radius:10px;overflow:hidden}
.table-note th,.table-note td{border-bottom:1px solid var(--rule);padding:7px 12px;text-align:left}
.table-note th{background:var(--yellow);color:var(--dark);font-weight:800}

/* ---------- word tools ---------- */
.tool.one{display:block}
.wfields{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px 16px}
textarea{font:inherit;font-weight:500;color:var(--ink);background:var(--paper);border:2px solid var(--rule);border-radius:10px;padding:10px 12px;width:100%;resize:vertical}
textarea:hover{border-color:var(--blue)}textarea:focus{border-color:var(--blue);background-color:var(--panel)}
.wout{margin-top:22px;padding-top:20px;border-top:3px solid var(--ink);min-height:70px}
.wbar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;margin-bottom:6px}
.wsum{margin:0;font-size:1.02rem}
.wsum.muted{color:var(--muted)}
.wg{margin:18px 0 8px;font-size:1.05rem;display:flex;gap:8px;align-items:center}
.wg span{background:var(--ink);color:var(--onink);border-radius:999px;font-size:.78rem;padding:1px 9px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-block;padding:3px 11px;border:2px solid var(--ink);border-radius:9px;background:var(--panel);font-weight:600;font-size:.98rem}
.chip.pan{background:var(--yellow);color:var(--dark)}
.chip.ok{background:var(--mint);color:var(--dark)}
.chip.no{background:var(--peach);color:var(--dark)}
.btn.small{padding:5px 14px;min-height:36px;font-size:.88rem;box-shadow:2px 2px 0 var(--ink);margin-top:10px}
.wbar .btn.small{margin-top:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hero-links{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 0}
.hero-links .btn{text-decoration:none;display:inline-block}
.fcols{display:grid;grid-template-columns:1fr 1fr;gap:24px}

/* ---------- page body ---------- */
main section{padding:34px 0}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:52px;align-items:start;padding-top:38px}
.cols section:first-child{padding-top:0}
.aside{position:sticky;top:20px;background:var(--panel);border:2.5px solid var(--ink);border-radius:16px;padding:18px 18px 8px;box-shadow:5px 5px 0 var(--shadow)}
.aside h2{font-size:1.05rem;margin-bottom:.6em}
.aside ul{list-style:none;margin:0;padding:0}
.aside li{margin:0 0 10px}
.aside a{font-weight:600}
.example{border:2.5px solid var(--ink);border-radius:14px;background:var(--panel);padding:16px 20px;margin:0 0 1.2em;max-width:var(--prose);box-shadow:5px 5px 0 var(--mint)}
.example p:last-child{margin:0}
details{border:2px solid var(--rule);border-radius:12px;padding:12px 16px;margin-bottom:10px;max-width:var(--prose);background:var(--panel)}
details[open]{border-color:var(--ink)}
summary{cursor:pointer;font-weight:700;list-style:none;padding-right:26px;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:2px;top:-2px;font-weight:700;font-size:1.3rem;color:var(--blue)}
details[open] summary::after{content:"–"}
details p{margin:.6em 0 0;color:var(--muted)}

/* ---------- home ---------- */
.tiles{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.tile{display:flex;flex-direction:column;gap:6px;min-height:178px;padding:16px 18px 18px;border:2.5px solid var(--ink);border-radius:18px;text-decoration:none;color:var(--dark);box-shadow:5px 5px 0 var(--shadow);transition:transform .14s,box-shadow .14s;background:var(--c,var(--yellow))}
.tile:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--shadow);color:var(--dark)}
.tile i{font-style:normal;font-weight:800;font-size:2.3rem;letter-spacing:-.04em;line-height:1;margin-bottom:auto}
.tile b{font-size:1.1rem;font-weight:800;letter-spacing:-.015em;line-height:1.2}
.tile span{font-size:.93rem;line-height:1.35;opacity:.85}
.facts{background:var(--ink);color:#fff;margin-top:50px}
.facts .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding-top:44px;padding-bottom:44px}
.facts h3{margin:0 0 .35em;font-size:1.3rem;color:var(--yellow)}
.facts p{margin:0;color:#D5DAF5}
@media (prefers-color-scheme:dark){.facts{background:#050820}}

/* ---------- footer ---------- */
.site-foot{background:var(--blue-deep);color:#fff;padding:36px 0 44px;font-size:.95rem}
.site-foot .wrap{display:grid;grid-template-columns:1fr 2fr;gap:28px}
.site-foot h2{font-size:1rem;margin:0 0 .6em;color:var(--yellow)}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:7px;break-inside:avoid}
.site-foot a{color:#fff}
.site-foot a:hover{color:var(--yellow)}
.fine{color:#C5CCF5;font-size:.9rem;margin-top:10px}

@media (max-width:900px){
  .tool{grid-template-columns:1fr}
  .tool-out{position:relative;top:0;min-height:0}
  .cols{grid-template-columns:1fr;gap:20px}
  .aside{position:static}
  .site-foot .wrap{grid-template-columns:1fr}
  .facts .wrap{grid-template-columns:1fr;gap:22px}
  .stamp{width:140px;right:3%;top:90px}
  .pencil,.tally{display:none}
}
@media (max-width:620px){
  body{font-size:1rem}
  .wrap{padding:0 16px}
  .band{padding-bottom:116px}
  .tool{padding:16px;box-shadow:5px 5px 0 var(--shadow);border-radius:18px}
  .grid .head{display:none}
  .grid .row,.grid.has-level .row,.grid.cols3 .row{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:9px 0;border-top:1px solid var(--rule)}
  .grid .row .nm{grid-column:1/3}
  .grid .row .rm{grid-column:3;grid-row:1;justify-self:end;width:44px}
  .site-head nav a:not(:last-child){display:none}
  select{padding:9px 24px 9px 8px}
  .stamp{display:none}
  .fcols{grid-template-columns:1fr}
  .tool-out{padding-left:40px}
  .tool-out::before{left:22px}
}
@media print{.band,.site-foot,.facts,.aside,.actions,.out-actions,.deco{display:none}body{background:#fff}.tool{box-shadow:none;grid-template-columns:1fr}.pull{margin-top:0}}


/* ---- motion ---- */
.hero-copy h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.hero-copy h1 .w>span{display:inline-block;transform:translateY(105%);animation:rise .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0ms)}
@keyframes rise{to{transform:none}}
.stamp{animation:thump .55s cubic-bezier(.3,1.5,.5,1) .35s both}
@keyframes thump{0%{opacity:0;transform:rotate(30deg) scale(2.2)}60%{opacity:1}100%{opacity:1;transform:rotate(12deg) scale(1)}}
.pencil{animation:slidep .7s cubic-bezier(.2,.8,.2,1) .6s both}
@keyframes slidep{from{opacity:0;transform:translateX(160px) rotate(-24deg)}to{opacity:1;transform:rotate(-24deg)}}
.tl{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .45s ease-out forwards;animation-delay:calc(var(--i)*.12s + .5s)}
@keyframes draw{to{stroke-dashoffset:0}}
.logo .tl,.brand .tl{animation-delay:calc(var(--i)*.09s + .1s)}
.teach{clip-path:inset(0 100% 0 0);animation:write .9s steps(18,end) .45s forwards}
@keyframes write{to{clip-path:inset(0 0 0 0)}}
.mark .num{animation:numin .4s ease-out both}
@keyframes numin{from{opacity:0;transform:rotate(-4deg) scale(.7)}to{opacity:1;transform:rotate(-4deg) scale(1)}}
.chip{animation:pop .28s cubic-bezier(.3,1.6,.5,1) both}
.chips .chip:nth-child(2){animation-delay:.02s}.chips .chip:nth-child(3){animation-delay:.04s}.chips .chip:nth-child(4){animation-delay:.06s}.chips .chip:nth-child(5){animation-delay:.08s}.chips .chip:nth-child(6){animation-delay:.1s}.chips .chip:nth-child(7){animation-delay:.12s}.chips .chip:nth-child(8){animation-delay:.14s}.chips .chip:nth-child(n+9){animation-delay:.16s}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.still .chip,.still .teach,.still .num,.still .ring{animation:none;clip-path:none;opacity:1}
.tile i{display:inline-block;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.tile:hover i{transform:rotate(-8deg) scale(1.15)}
.ticker{background:var(--ink);color:var(--yellow);overflow:hidden;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);position:relative;z-index:1}
.tk-track{display:flex;width:max-content;gap:0;padding:11px 0;animation:tick 38s linear infinite;font-weight:800;font-size:1.05rem;letter-spacing:-.01em;white-space:nowrap}
.tk-track span{padding:0 22px}.tk-track i{font-style:normal;color:var(--pen);font-weight:800}
.ticker:hover .tk-track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .tl{stroke-dashoffset:0}.teach{clip-path:none}.hero-copy h1 .w>span{transform:none}
  .tk-track{width:auto;flex-wrap:wrap;justify-content:center}
}
.main .ticker,main .ticker{margin:56px -4vw 0;transform:rotate(-1.3deg);border-radius:6px;box-shadow:5px 5px 0 var(--shadow)}
@media (prefers-reduced-motion:reduce){main .ticker{transform:none}}

.answer{margin:0 0 22px;padding:14px 18px;background:var(--yellow);color:var(--dark);border:2.5px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--shadow);font-size:1.08rem;line-height:1.45}
.answer b{font-weight:800;margin-right:4px}
.stamp-line{margin:28px 0 0;font-size:.9rem;opacity:.7}