/* Layout: exercise-book page — ruled paper with a red margin line, a chalkboard hero, red-pen marking (circles, ticks, scores) as the one flourish. Single light look by choice (matches printed worksheets). */
:root{
  --paper:#fbfaf4; --rule:#d9e3ef; --margin:#e6857a;
  --ink:#1c2731; --muted:#5a6672; --board:#1f3b33; --board-2:#284a40; --chalk:#eef1e6;
  --pen:#d23f31; --pencil:#f2b632; --blue:#2c63a8; --ok:#1f8a5b;
  --f-disp:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --f-hand:"Caveat","Comic Sans MS",cursive;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px);background-size:100% 32px}
.wrap{max-width:1100px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-disp);font-weight:800;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.01em}
h2{font-size:clamp(32px,5vw,50px)}
h3{font-size:clamp(22px,3vw,28px);font-weight:700}
p{margin:0}
.hand{font-family:var(--f-hand);font-weight:700;color:var(--pen)}
.label{font-family:var(--f-disp);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lead{font-size:19px;color:var(--muted);max-width:62ch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f-disp);font-weight:700;font-size:18px;text-decoration:none;color:#fff;background:var(--pen);border:2px solid var(--pen);border-radius:8px;padding:12px 22px;cursor:pointer;transition:transform .12s,background .12s}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--chalk);border-color:var(--chalk)}
.btn:focus-visible,button:focus-visible,label:focus-within,summary:focus-visible{outline:3px solid var(--pencil);outline-offset:3px}

/* sheet = a page torn from the book */
.sheet{background:#fff;border:1px solid #dcd8c9;border-radius:4px;box-shadow:0 1px 0 #e9e5d6,0 10px 24px -14px rgba(28,39,49,.35)}

/* margin line on main sections */
.ruled{position:relative}
.ruled::before{content:"";position:absolute;top:0;bottom:0;left:max(6px,calc(50% - 600px));width:2px;background:var(--margin);opacity:.55}
section{padding-block:64px}

/* hero: chalkboard */
.board{background:var(--board);color:var(--chalk);background-image:radial-gradient(ellipse at 20% 0%,var(--board-2),transparent 60%);border-bottom:10px solid #8a5a35}
.board .wrap{padding-block:44px 56px}
.board .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.board .label{color:#b8c6b8}
.board h1{font-size:clamp(40px,6.6vw,74px);margin-top:14px;color:#fff}
.board h1 .u{position:relative;white-space:nowrap}
.board h1 .u::after{content:"";position:absolute;left:-2%;right:-2%;bottom:-.05em;height:.18em;background:var(--pencil);border-radius:40% 60% 50% 50%/60% 40% 60% 40%;z-index:-1;opacity:.9}
.board h1 .u{z-index:0}
.board .lead{color:#cfd8cc;margin-top:20px}
.board .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.chalk3m{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}
.chalk3m span{font-family:var(--f-hand);font-size:30px;line-height:1;color:var(--chalk);border-bottom:2px dashed rgba(238,241,230,.4);padding-bottom:4px}
.covers{position:relative;height:430px}
.covers img{position:absolute;width:60%;border-radius:3px;box-shadow:0 18px 34px rgba(0,0,0,.45);background:#fff}
.covers img:first-child{left:2%;top:40px;transform:rotate(-5deg)}
.covers img:nth-child(2){right:2%;top:0;transform:rotate(4deg)}
.covers .score{position:absolute;right:6%;bottom:6%;z-index:2;width:120px;height:120px;border:3px solid var(--pen);border-radius:50%;display:grid;place-items:center;text-align:center;background:#fff;color:var(--pen);transform:rotate(-8deg);font-family:var(--f-hand);font-size:22px;line-height:1}
.covers .score b{display:block;font-size:44px}

/* facts row */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:-34px;position:relative;z-index:2}
.facts div{padding:18px 20px;border-right:1px dashed #d6d1bf}
.facts div:last-child{border-right:0}
.facts b{display:block;font-family:var(--f-disp);font-weight:800;font-size:40px;line-height:1;font-variant-numeric:tabular-nums}
.facts span{font-size:15px;color:var(--muted);font-weight:700}

/* section heads */
.shead{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;margin-bottom:32px}
.qnum{font-family:var(--f-hand);font-size:40px;line-height:1;color:var(--pen);padding-top:2px}
.shead .stack{display:flex;flex-direction:column;gap:12px;min-width:0}
.price{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--f-disp);font-weight:800;font-size:20px;background:var(--pencil);padding:3px 12px;border-radius:4px;transform:rotate(-1deg)}

/* subjects */
.subj{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.subj figure{margin:0;display:flex;flex-direction:column;overflow:hidden}
.subj img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;border-bottom:1px solid #e6e2d4}
.subj figcaption{padding:10px 12px 14px;display:flex;flex-direction:column;gap:6px}
.subj figcaption b{font-family:var(--f-disp);font-size:19px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--blue);border:1.5px solid currentColor;border-radius:4px;padding:0 6px}

.teacher{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.teacher article{overflow:hidden;display:flex;flex-direction:column}
.teacher .shot{height:210px;overflow:hidden;border-bottom:1px solid #e6e2d4}
.teacher .shot img{width:100%;display:block}
.teacher .t{padding:14px 18px 18px;display:flex;flex-direction:column;gap:4px}
.teacher .t b{font-family:var(--f-disp);font-size:20px}
.teacher .t span{color:var(--muted);font-size:15.5px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin:26px 0 0;padding:0}
.checks li{list-style:none;display:flex;gap:12px;align-items:flex-start;font-weight:700}
.checks li::before{content:"✓";flex:none;font-family:var(--f-hand);font-size:30px;line-height:.8;color:var(--pen)}

/* misi */
.mods{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mod{display:flex;flex-direction:column}
.mod header{padding:16px 20px 12px;border-bottom:2px solid var(--c)}
.mod header small{display:block;font-family:var(--f-disp);font-weight:700;letter-spacing:.1em;font-size:12.5px;color:var(--c)}
.mod header b{font-family:var(--f-disp);font-weight:800;font-size:30px}
.mod header em{display:block;font-style:normal;font-weight:700;font-size:15px;color:var(--muted)}
.mod ul{margin:0;padding:14px 20px 20px 38px;display:flex;flex-direction:column;gap:5px;font-size:15.5px}
.gift{margin-top:20px;padding:18px 22px;border:2px dashed var(--pen);border-radius:6px;background:#fff8f4;display:flex;flex-direction:column;gap:4px}
.gift b{font-family:var(--f-disp);font-size:19px}
.gift small{font-size:14px;color:var(--muted);font-weight:700}

.mods.two{grid-template-columns:repeat(2,1fr)}
.kafa{padding:14px 20px 20px;display:flex;flex-direction:column;gap:10px;font-size:15.5px}
.kafa .pages{display:flex;flex-wrap:wrap;gap:8px 20px;font-weight:700;color:var(--muted)}
.kafa .pages b{font-family:var(--f-disp);font-weight:800;font-size:26px;color:var(--ink);font-variant-numeric:tabular-nums;margin-right:4px}
.kafa .chips i{font-size:14px;padding:2px 8px;color:var(--ok)}
.kafa .fit{font-weight:700;border-top:1px dashed #d6d1bf;padding-top:10px}
.info{display:grid;grid-template-columns:1fr;gap:18px;margin-top:18px}
.k3m .chips i{color:var(--pen)}
.info>div{padding:20px 22px;min-width:0}
.checks.one{grid-template-columns:1fr;margin-top:12px}
.gift small{font-size:16px}

/* games: playground band */
.games{background:transparent}
.playground{position:relative;overflow:hidden;padding:28px 26px 24px;background-color:#fff;
  background-image:
    radial-gradient(circle at 12% 18%,rgba(242,182,50,.28) 0 7px,transparent 8px),
    radial-gradient(circle at 88% 12%,rgba(210,63,49,.22) 0 9px,transparent 10px),
    radial-gradient(circle at 94% 78%,rgba(44,99,168,.22) 0 6px,transparent 7px),
    radial-gradient(circle at 1.6% 55%,rgba(31,138,91,.24) 0 8px,transparent 9px),
    radial-gradient(rgba(44,99,168,.10) 1.4px,transparent 1.6px),
    linear-gradient(180deg,#f2f8ff 0,#fff 60%,#f3faef 100%);
  background-size:auto,auto,auto,auto,22px 22px,auto}
.playground::before{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:repeating-linear-gradient(90deg,var(--ok) 0 18px,#46a873 18px 36px)}
.playground .gchecks{margin-top:26px;padding:0}
.phones{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.phone{min-width:0;background:var(--ink);border-radius:26px;padding:7px;box-shadow:0 14px 28px -10px rgba(28,39,49,.5);transition:translate .18s ease}
.phone:hover{translate:0 -6px}
.phone img{display:block;width:100%;aspect-ratio:9/19;object-fit:cover;object-position:top;border-radius:20px;background:#2a3744}
.phone p{color:#fff;font-family:var(--f-disp);font-weight:700;font-size:15px;text-align:center;padding:7px 2px 3px;line-height:1.2}
.phone p small{display:block;font-family:var(--f-body);font-weight:700;font-size:12.5px;opacity:.75}
.pc.wide{grid-column:1/-1}

/* pricing */
.pricing{background:var(--board);color:var(--chalk);background-image:radial-gradient(ellipse at 80% 0%,var(--board-2),transparent 60%)}
.pricing h2{color:#fff}
.pricing .label{color:#b8c6b8}
.pricing .lead{color:#cfd8cc}
.solo{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:30px}
.pc{color:var(--ink);padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pc .n{font-family:var(--f-disp);font-weight:800;font-size:24px;display:block}
.pc .d{color:var(--muted);font-size:15px;font-weight:700}
.rm{font-family:var(--f-disp);font-weight:800;font-size:52px;line-height:1;font-variant-numeric:tabular-nums}
.rm small{font-size:22px;margin-right:2px}
.combos{display:grid;grid-template-columns:1fr 1.15fr;gap:18px;margin-top:18px}
.combos.one{grid-template-columns:1fr}
.combos.three{grid-template-columns:repeat(3,1fr);align-items:stretch}
.combos.three .cb ul{margin-bottom:8px}
.combos.three .cb .row{margin-top:auto}
.combos.three .cb .rm{font-size:64px}
.best.alt{background:var(--paper);border:1.5px solid var(--ink)}
.cb{position:relative;color:var(--ink);padding:28px 26px 24px;display:flex;flex-direction:column;gap:8px}
.cb.c2{outline:4px solid var(--pencil);outline-offset:-4px}
.cb .n{font-family:var(--f-disp);font-weight:800;font-size:30px;line-height:1.05}
.cb ul{margin:4px 0 0;padding-left:20px;font-weight:700;font-size:16px}
.cb .row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-top:8px}
.cb .rm{font-size:72px}
.cb .rm.circled{position:relative;padding:0 10px}
.cb .rm.circled::after{content:"";position:absolute;inset:-10px -6px -6px -10px;border:3px solid var(--pen);border-radius:52% 48% 55% 45%/50% 55% 45% 50%;transform:rotate(-4deg)}
.cb s{font-family:var(--f-disp);font-weight:700;font-size:26px;color:var(--muted);text-decoration-color:var(--pen);text-decoration-thickness:3px;padding-bottom:8px}
.save{position:absolute;top:14px;right:18px;font-family:var(--f-hand);font-size:30px;line-height:1;color:var(--pen);transform:rotate(6deg)}
.best{display:inline-block;align-self:flex-start;font-family:var(--f-disp);font-weight:700;font-size:12.5px;letter-spacing:.1em;background:var(--pencil);color:var(--ink);padding:3px 10px;border-radius:3px}
.calc{font-size:14.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.savetable{margin-top:28px;overflow-x:auto}
.savetable table{color:inherit;width:100%;border-collapse:collapse;font-size:15.5px;min-width:520px}
.savetable th,.savetable td{text-align:left;padding:10px 12px;border-bottom:1px dashed rgba(238,241,230,.25)}
.savetable th{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#b8c6b8}
.savetable td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
.savetable td.j{color:var(--pencil);font-family:var(--f-disp);font-weight:800}

/* order */
.order{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;margin-top:28px}
.order>*{min-width:0}
.steps{counter-reset:s;display:flex;flex-direction:column;gap:12px;margin:0;padding:0}
.steps li{list-style:none;display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start;font-weight:700}
.steps li::before{counter-increment:s;content:counter(s) ".";font-family:var(--f-hand);font-size:32px;line-height:.9;color:var(--pen)}
.pick{display:flex;flex-direction:column;gap:10px;border:0;padding:0;margin:22px 0 0}
.pick legend{margin-bottom:10px}
.pick label{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 16px;cursor:pointer}
.pick input{width:22px;height:22px;accent-color:var(--pen)}
.pick label b{font-family:var(--f-disp);font-size:18px}
.pick label small{display:block;color:var(--muted);font-weight:700;font-size:13.5px}
.pick label .p{font-family:var(--f-disp);font-weight:800;font-size:22px;font-variant-numeric:tabular-nums}
.pick label:has(input:checked){border-color:var(--pen);box-shadow:0 0 0 2px var(--pen)}
.msg{padding:22px;display:flex;flex-direction:column;gap:12px}
.pay{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;background:var(--board);color:var(--chalk);border-radius:6px;padding:16px}
.pay .lbl{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#b8c6b8}
.pay .amt{font-family:var(--f-disp);font-weight:800;font-size:56px;line-height:1;color:var(--pencil);font-variant-numeric:tabular-nums}
.pay .pkgname{font-weight:700;font-size:15px}
.qr{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.qr .box{width:min(296px,100%);aspect-ratio:1;background:#fff;border:1px solid #dcd8c9;border-radius:10px;padding:8px;display:grid;place-items:center}
.qr .box canvas,.qr .box svg{display:block;width:100%!important;height:auto!important}
.qr .box p{font-size:14px;color:var(--muted);text-align:center}
.dlqr{font-size:16px;padding:9px 18px;margin-top:4px;border-color:#D61959;color:#D61959}
.qr figcaption{font-size:15px;color:var(--muted);font-weight:700}
.tip{font-size:14px;color:var(--muted);background:var(--paper);border-left:3px solid var(--blue);padding:10px 12px}
.field{font:inherit;font-size:16px;border:1.5px solid #cfd6de;border-radius:6px;padding:10px 12px;background:var(--paper);color:var(--ink);width:100%}
.btn.wa{background:var(--ok);border-color:var(--ok);width:100%}
.btn.plain{background:#fff;color:var(--ink);border-color:var(--ink)}
.alt-pay summary{cursor:pointer;font-weight:700;font-size:15px;color:var(--muted)}
.alt-pay[open]{display:flex;flex-direction:column;gap:10px}
.alt-pay p{font-size:15px}
.num{font-family:var(--f-disp);font-size:18px;user-select:all}
textarea.field{min-height:140px;resize:vertical}
.toast{font-weight:700;color:var(--ok);min-height:1.4em}

/* faq */
.faq{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.faq details{padding:14px 20px}
.faq summary{font-family:var(--f-disp);font-weight:700;font-size:19px;cursor:pointer}
.faq details p{margin-top:8px;color:var(--muted)}

footer{background:var(--board);color:#cfd8cc;border-top:10px solid #8a5a35;background-image:radial-gradient(ellipse at 15% 0%,var(--board-2),transparent 60%);font-size:15px}
footer .wrap{padding-block:48px 28px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.fgrid>div{min-width:0;display:flex;flex-direction:column;gap:10px}
.fbrand{font-family:var(--f-disp);font-weight:800;font-size:28px;line-height:1.1;color:#fff}
.fbrand span{color:var(--pencil)}
.fhand{font-family:var(--f-hand);font-size:26px;line-height:1.1;color:var(--chalk)}
footer .label{color:#b8c6b8}
footer nav{display:flex;flex-direction:column;gap:6px}
footer a{color:var(--chalk);text-decoration:none;font-weight:700}
footer a:hover{color:var(--pencil)}
.fwa b{font-family:var(--f-disp);font-size:22px;color:#fff;user-select:all}
.fbottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin-top:36px;padding-top:16px;border-top:1px dashed rgba(238,241,230,.25);font-size:13.5px;color:#9fb0a2}

/* motion */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes dropA{from{opacity:0;transform:translateY(-40px) rotate(-16deg)}to{opacity:1;transform:rotate(-5deg)}}
@keyframes dropB{from{opacity:0;transform:translateY(-40px) rotate(14deg)}to{opacity:1;transform:rotate(4deg)}}
@keyframes stamp{0%{opacity:0;transform:scale(1.9) rotate(-24deg)}65%{opacity:1;transform:scale(.9) rotate(-6deg)}100%{opacity:1;transform:scale(1) rotate(-8deg)}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes fade{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes wiggle{0%,100%{transform:rotate(6deg)}50%{transform:rotate(-3deg) scale(1.08)}}
@keyframes dockup{from{transform:translateY(100%)}to{transform:none}}
.board .grid>div:first-child>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.board .grid>div:first-child>:nth-child(2){animation-delay:.08s}
.board .grid>div:first-child>:nth-child(3){animation-delay:.18s}
.board .grid>div:first-child>:nth-child(4){animation-delay:.26s}
.board .grid>div:first-child>:nth-child(5){animation-delay:.34s}
.covers img:first-child{animation:dropA .8s cubic-bezier(.2,.8,.25,1.15) .2s both}
.covers img:nth-child(2){animation:dropB .8s cubic-bezier(.2,.8,.25,1.15) .35s both}
.covers .score{animation:stamp .55s cubic-bezier(.3,.7,.3,1) 1s both}
.board h1 .u::after{transform-origin:left center;animation:draw .6s cubic-bezier(.6,0,.2,1) .75s both}
.facts{animation:rise .7s cubic-bezier(.2,.7,.2,1) .45s both}
.pay .amt.bump{animation:bump .35s ease-out}
.qr .box canvas{animation:fade .5s ease-out both}
.save{animation:wiggle 2.8s ease-in-out infinite}
.pc,.cb,.subj figure,.mod,.teacher article,.pick label{transition:translate .18s ease,box-shadow .18s ease}
.pc:hover,.cb:hover,.subj figure:hover,.mod:hover,.teacher article:hover{translate:0 -4px;box-shadow:0 1px 0 #e9e5d6,0 18px 30px -16px rgba(28,39,49,.45)}
.pick label:hover{translate:4px 0}
@supports (animation-timeline:view()){
  main .shead,main .sheet:not(.pick label),main .gift,main .checks li,.savetable,footer .fgrid>div{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
}

.dock{display:none}
@media (max-width:860px){
  .dock{animation:dockup .5s cubic-bezier(.2,.7,.2,1) 1.2s both}
  .board .grid,.order,.combos,.solo{grid-template-columns:1fr}
  .covers{height:340px;max-width:420px;margin:0 auto;width:100%}
  .covers .score{width:96px;height:96px;font-size:18px}
  .covers .score b{font-size:34px}
  .facts{grid-template-columns:1fr 1fr}
  .facts div:nth-child(2){border-right:0}
  .facts div:nth-child(-n+2){border-bottom:1px dashed #d6d1bf}
  .subj{grid-template-columns:repeat(2,1fr)}
  .subj figure:last-child{grid-column:1/-1}
  .subj figure:last-child img{aspect-ratio:16/10}
  .teacher,.mods,.mods.two,.info,.fgrid,.combos.three{grid-template-columns:1fr}
  .phones{grid-template-columns:repeat(5,minmax(150px,1fr));overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
  .phone{scroll-snap-align:start}
  footer .wrap{padding-bottom:96px}
  .checks{grid-template-columns:1fr}
  .ruled::before{display:none}
  .shead{gap:6px;grid-template-columns:1fr}
  .qnum{font-size:32px}
  .cb{padding-top:52px}
  .save{top:12px;right:14px}
  .dock{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;gap:10px;align-items:center;justify-content:space-between;background:var(--board);color:var(--chalk);
    padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  .dock span{font-weight:700;font-size:14.5px;line-height:1.25}
  .dock b{font-family:var(--f-disp);color:var(--pencil)}
  .dock .btn{font-size:16px;padding:8px 16px}
}

:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}body{margin:0}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
.back{display:inline-block;margin-bottom:14px;font-family:var(--f-disp);font-weight:700;font-size:15px;color:var(--chalk);text-decoration:none;opacity:.85}.back:hover{opacity:1;color:var(--pencil)}

/* Utilities (formerly inline style attributes) */
.row{display:flex;gap:10px;flex-wrap:wrap}
.mt-10{margin-top:10px}.mt-12{margin-top:12px}.mt-18{margin-top:18px}.mt-48{margin-top:48px}
.flabel{font-weight:700;font-size:15px}
.self-start{align-self:flex-start}
.c-pen{--c:var(--pen)}.c-ok{--c:var(--ok)}.c-blue{--c:var(--blue)}