/* spt-test.ru — мир «Школьная доска». Ни одной рамки: разделы делят меловые линии. */
@font-face{font-family:"Geologica";src:url(/assets/fonts/geologica-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geologica";src:url(/assets/fonts/geologica-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Geologica";src:url(/assets/fonts/geologica-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Neucha";src:url(/assets/fonts/neucha-regular.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --board:#2F4A3E; --board-deep:#243b31; --board-light:#3a5a4c;
  --chalk:#F3F1E6; --chalk-dim:#cfd3c6; --chalk-faint:rgba(243,241,230,.55);
  --yellow:#F2D14B; --pink:#E58FA6; --blue:#8FC5E6;
  --wood:#6b5034; --wood-dark:#4a371f; --wood-light:#85653f;
  --sans:"Geologica",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hand:"Neucha","Segoe Print",cursive;
  --pad:clamp(16px,5vw,80px);
  --measure:68ch;
  /* волокно дерева: шум, растянутый вдоль рейки */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='64'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.06 2.2' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .10 0 0 0 0 .06 0 0 0 0 .02 0 0 0 .85 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  --grain2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='64'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.9' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .30 0 0 0 0 .21 0 0 0 0 .12 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--chalk-dim) var(--board-deep)}
body{margin:0;background:var(--board);color:var(--chalk);font:400 18px/1.62 var(--sans);letter-spacing:.005em;
  background-image:
    /* следы губки: широкие мягкие мазки */
    radial-gradient(ellipse 38% 9% at 22% 26%, rgba(255,255,255,.055), transparent 72%),
    radial-gradient(ellipse 30% 7% at 68% 41%, rgba(255,255,255,.045), transparent 72%),
    radial-gradient(ellipse 44% 8% at 40% 63%, rgba(255,255,255,.04), transparent 72%),
    radial-gradient(ellipse 26% 6% at 80% 78%, rgba(255,255,255,.035), transparent 72%),
    radial-gradient(ellipse 60% 40% at 20% 12%, rgba(255,255,255,.035), transparent 70%),
    radial-gradient(ellipse 90% 30% at 50% 100%, rgba(0,0,0,.2), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-attachment:fixed,fixed,fixed,fixed,fixed,fixed,scroll;
}
::selection{background:var(--yellow);color:#1d2b24}
a{color:var(--blue);text-decoration-thickness:1.5px;text-underline-offset:.18em}
a:hover{color:var(--chalk)}
a:focus-visible,button:focus-visible{outline:2px dashed var(--yellow);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--yellow);color:#1d2b24;padding:8px 14px;font-weight:500}
.skip:focus{left:12px;z-index:100}
mark{background:none;color:inherit;background-image:linear-gradient(transparent 62%, rgba(242,209,75,.55) 62%, rgba(242,209,75,.55) 92%, transparent 92%);padding:0 .08em}
s.myth{text-decoration:none;position:relative;color:var(--chalk-dim)}
s.myth::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:3px;background:var(--pink);transform:rotate(-1.5deg);border-radius:2px;opacity:.9}
strong{font-weight:500;color:#fff}

/* ── деревянная рейка с навигацией ── */
.rail{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:28px;height:64px;padding:0 var(--pad);
  background-color:var(--wood);
  background-image:var(--grain), var(--grain2), repeating-linear-gradient(180deg, rgba(255,255,255,.07) 0 1px, transparent 1px 7px, rgba(0,0,0,.1) 7px 9px, transparent 9px 19px), linear-gradient(180deg,var(--wood-light),var(--wood) 42%,var(--wood-dark));
  background-size:300px 64px, 900px 64px, auto, auto;
  box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 -3px 0 rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.14)}
.brand{display:inline-flex;align-items:baseline;gap:2px;color:#fff6e4;text-decoration:none;font-family:var(--hand);font-size:30px;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.brand-sub{font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.02em}
.nav{display:flex;gap:4px;margin-left:auto;overflow:hidden}
.nav a{color:#fff6e4;text-decoration:none;font-size:15.5px;font-weight:500;padding:8px 12px;border-radius:2px;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.nav a:hover{background:rgba(0,0,0,.22)}
.nav a[aria-current]{background:rgba(0,0,0,.3);box-shadow:inset 0 -2px 0 var(--yellow)}
.burger{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:26px;height:3px;background:#fff6e4;margin:5px 0;border-radius:2px;transition:transform .25s,opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mnav{display:none}
.mnav[hidden]{display:none}
body.menu-open .mnav{display:grid;position:sticky;top:64px;z-index:19;grid-template-columns:1fr 1fr;gap:2px 18px;padding:14px var(--pad) 18px;background:var(--board-deep);border-bottom:3px solid var(--wood-dark)}
.mnav a{color:var(--chalk);text-decoration:none;font-family:var(--hand);font-size:22px;padding:6px 0;border-bottom:1px dashed rgba(243,241,230,.25)}
.mnav a:hover{color:#fff;border-bottom-color:var(--yellow)}

/* ── доска ── */
.board{padding:0 var(--pad) 56px}
.crumbs{padding:22px 0 6px;font-size:14.5px;color:var(--chalk-dim);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.crumbs a{color:var(--chalk-dim)}
.crumbs .sep{width:16px;height:2px;font-size:0;overflow:hidden;background:var(--chalk-faint);border-radius:2px;transform:rotate(-1deg);display:inline-block}
.crumbs [aria-current]{color:var(--chalk)}

h1,h2,h3{font-family:var(--hand);font-weight:400;line-height:1.08;letter-spacing:.005em;color:#fff;text-wrap:balance;margin:0}
h1{font-size:clamp(34px,5.4vw,68px)}
h2{font-size:clamp(27px,3.2vw,40px);margin:52px 0 14px;position:relative;padding-bottom:10px}
h2::after{content:"";position:absolute;left:0;bottom:0;width:min(100%,14ch);height:2px;background:var(--chalk-faint);border-radius:2px;transform:rotate(-.3deg)}
h3{font-size:clamp(22px,2.3vw,29px);margin:34px 0 8px;color:var(--chalk)}
p{margin:0 0 1.1em}
.lead{font-size:clamp(18px,1.4vw,21px);line-height:1.5;color:var(--chalk);max-width:60ch;margin:14px 0 0}

/* ── главная: hero ── */
.front .hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,1fr);gap:clamp(20px,4vw,72px);align-items:center;min-height:calc(100dvh - 64px);padding:32px 0 40px}
.hero-text{position:relative;padding-top:12px}
.front h1{max-width:14ch}
.entries{display:grid;gap:16px;margin-top:30px;max-width:560px}
.entry{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:baseline;text-decoration:none;color:var(--chalk);padding:8px 0;position:relative}
.entry .who{font-family:var(--hand);font-size:clamp(25px,2.4vw,32px);color:#fff;white-space:nowrap;position:relative}
.entry .who::after{content:"";position:absolute;left:-4px;right:-4px;bottom:-2px;height:3px;background:var(--yellow);border-radius:2px;transform:scaleX(.55) rotate(-.6deg);transform-origin:left;transition:transform .35s cubic-bezier(.19,1,.22,1)}
.entry:hover .who::after,.entry:focus-visible .who::after{transform:scaleX(1) rotate(-.6deg)}
.entry .what{color:var(--chalk-dim);font-size:16px;line-height:1.35}
/* меловая стрелка вместо глифа */
.entry::before{content:"";position:absolute;left:-30px;top:19px;width:18px;height:3px;background:var(--yellow);border-radius:2px;opacity:0;transform:translateX(-6px) rotate(-1deg);transition:opacity .3s,transform .3s}
.entry::after{content:"";position:absolute;left:-18px;top:14px;width:11px;height:3px;background:var(--yellow);border-radius:2px;opacity:0;transform:rotate(38deg);transition:opacity .3s}
.entry:hover::before{opacity:1;transform:rotate(-1deg)}
.entry:hover::after{opacity:1}
.hero-diagram{justify-self:end;width:100%;max-width:540px}
.chalk-diagram{width:100%;height:auto;display:block}
.chalk-text{font-family:var(--hand)}
.dg-legend{font-family:var(--hand);color:var(--chalk-dim);font-size:19px;line-height:1.35;margin:10px 0 0;max-width:44ch}
.dg-legend b{color:var(--chalk);font-weight:400}

/* ── страница ── */
.sheet{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,5vw,96px);align-items:start;padding-top:14px}
.page article{max-width:calc(var(--measure) + 2ch)}
.page-head{max-width:calc(var(--measure) + 2ch);padding-top:8px}
.page-head .lead{margin-top:16px}
.prose{max-width:var(--measure);margin-top:8px}
.prose ul,.prose ol{padding-left:1.35em;margin:0 0 1.2em}
.prose li{margin:0 0 .45em}
.prose ul{list-style:none;padding-left:1.2em}
.prose ul li{position:relative}
.prose ul li::before{content:"";position:absolute;left:-1.2em;top:.72em;width:.55em;height:3px;background:var(--chalk);border-radius:2px;transform:rotate(-8deg);opacity:.8}
.prose ol{counter-reset:n;list-style:none;padding-left:1.7em}
.prose ol li{counter-increment:n;position:relative}
.prose ol li::before{content:counter(n);position:absolute;left:-1.7em;top:-.05em;font-family:var(--hand);font-size:1.35em;color:var(--yellow)}
.chalk-rule{border:0;height:3px;margin:40px 0;background:linear-gradient(90deg,transparent,var(--chalk-faint) 8%,var(--chalk-faint) 92%,transparent);border-radius:2px}
.disclaimer{font-size:15px;color:var(--chalk-dim);border-top:1px dashed rgba(243,241,230,.35);padding-top:12px;margin-top:36px}

blockquote.doc{margin:22px 0 26px;padding:14px 0 6px;position:relative;color:var(--chalk)}
blockquote.doc::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--blue);opacity:.75;border-radius:2px;transform:rotate(-.3deg)}
blockquote.doc p{margin:0;font-style:italic}
blockquote.doc cite{display:block;margin-top:8px;font-style:normal;font-family:var(--hand);font-size:18px;color:var(--blue)}

/* блоки: миф/правда, родителям, на полях */
.blk{margin:26px 0 30px;padding:14px 0 6px;position:relative}
.blk::before,.blk::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px}
.blk::before{top:0}
.blk::after{bottom:0}
.blk-t{font-family:var(--hand);font-size:24px;margin-bottom:8px;line-height:1.1}
.blk-myth::before,.blk-myth::after{background:var(--pink);opacity:.8}
.blk-myth .blk-t{color:var(--pink)}
.blk-parent::before,.blk-parent::after{background:var(--blue);opacity:.8}
.blk-parent .blk-t{color:var(--blue)}
.blk-note::before,.blk-note::after{background:var(--yellow);opacity:.8}
.blk-note .blk-t{color:var(--yellow)}
.blk-steps::before,.blk-steps::after{background:var(--chalk-faint)}
.blk-steps .blk-t{color:#fff}
.blk p:last-child,.blk ul:last-child,.blk ol:last-child{margin-bottom:.6em}

/* таблицы: меловая сетка */
.tablewrap{overflow-x:auto;margin:20px 0 28px}
table{border-collapse:collapse;width:100%;font-size:16.5px;font-variant-numeric:tabular-nums}
th,td{text-align:left;vertical-align:top;padding:10px 14px 10px 0;border-bottom:1px solid rgba(243,241,230,.28)}
th{font-family:var(--hand);font-size:21px;font-weight:400;color:#fff;border-bottom:2px solid var(--chalk-faint)}
td:first-child,th:first-child{padding-left:0}
tbody tr:last-child td{border-bottom:2px solid var(--chalk-faint)}

/* поля (боковая колонка) */
.margin{position:sticky;top:84px;display:grid;gap:26px;font-family:var(--hand);font-size:19px;line-height:1.3;transform:rotate(-.6deg);transform-origin:top left}
.mnote{margin:0;color:var(--chalk-dim)}
.mnote-t{display:block;color:var(--yellow);font-size:17px;margin-bottom:6px;letter-spacing:.02em}
.mnote ol,.mnote ul{margin:0;padding-left:1.2em}
.mnote li{margin:0 0 4px}
.mnote a{color:var(--chalk-dim);text-decoration:none;border-bottom:1px dashed rgba(243,241,230,.35)}
.mnote a:hover{color:#fff;border-bottom-color:var(--yellow)}
.mnote.fact{color:var(--chalk)}

/* ── лоток для мела (футер) ── */
.tray{margin-top:24px;padding:0 var(--pad) 40px;background-color:var(--wood-dark);
  background-image:var(--grain), var(--grain2), repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 1px, transparent 1px 8px, rgba(0,0,0,.09) 8px 10px, transparent 10px 21px), linear-gradient(180deg,var(--wood-dark),var(--wood) 30%,var(--wood-dark));
  background-size:300px 64px, 900px 120px, auto, auto;
  box-shadow:inset 0 7px 16px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.1)}
.chalks{display:flex;align-items:flex-end;gap:16px;padding:20px 0 10px;position:relative}
.chalks::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(0,0,0,.35);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.chalks i{display:block;height:18px;border-radius:2px;position:relative;
  clip-path:polygon(2% 10%,6% 0,94% 3%,100% 26%,99% 82%,95% 100%,7% 97%,0 70%);
  box-shadow:0 3px 5px rgba(0,0,0,.5), inset 0 -3px 4px rgba(0,0,0,.18), inset 0 2px 2px rgba(255,255,255,.5)}
.chalks .c-white{background:linear-gradient(180deg,#fffdf5,var(--chalk) 52%,#cfccbd);width:88px}
.chalks .c-yellow{background:linear-gradient(180deg,#f9e492,var(--yellow) 52%,#bf9f28);width:54px;height:16px}
.chalks .c-pink{background:linear-gradient(180deg,#f4c2ce,var(--pink) 52%,#bb6580);width:40px;height:15px}
.chalks .c-blue{background:linear-gradient(180deg,#c1e2f4,var(--blue) 52%,#639bbd);width:68px}
.tray-text{color:#fdf3e2;font-size:15px;max-width:80ch;padding-top:14px;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.tray-text p{margin:0 0 8px}
.tray-links{display:flex;flex-wrap:wrap;gap:6px 20px}
.tray-links a{color:#fff6e4;text-decoration-color:rgba(255,246,228,.55)}

/* ── адаптив ── */
@media (max-width:1100px){
  .nav a{font-size:14.5px;padding:8px 9px}
}
@media (max-width:980px){
  .nav{display:none}
  .burger{display:block}
  /* поля распускаются в поток: короткий факт и оглавление над статьёй, соседние страницы под ней */
  .sheet{display:flex;flex-direction:column;gap:0}
  .sheet > article{order:3}
  .margin{display:contents}
  .margin .fact{order:1;padding:14px 0 16px;margin:0;border-bottom:1px dashed rgba(243,241,230,.3)}
  .margin .toc{order:2;padding:16px 0 4px}
  .margin .near{order:4;padding-top:20px;margin-top:24px;border-top:1px dashed rgba(243,241,230,.3)}
  /* страница с демо: интерактив идёт первым, пометки на полях уходят под него */
  .has-demo .sheet > article{order:0}
  .has-demo .margin .fact{order:5;border-bottom:0;border-top:1px dashed rgba(243,241,230,.3);padding-top:16px}
  .has-demo .margin .toc{order:6}
}
@media (max-width:820px){
  .front .hero{grid-template-columns:minmax(0,1fr);min-height:0;padding:22px 0 26px}
  .hero-diagram{justify-self:start;max-width:520px;margin-top:12px}
  .entries{margin-top:22px}
  .entry{grid-template-columns:1fr;gap:2px;padding:7px 0}
  .entry::before,.entry::after{display:none}
}
@media (max-width:600px){
  body{font-size:17px}
  .rail{height:58px;gap:12px}
  body.menu-open .mnav{top:58px;grid-template-columns:1fr}
  .brand{font-size:26px}
  .margin{grid-template-columns:1fr}
  .chalk-diagram text{font-size:26px}
  .dg-legend{font-size:17px}
  /* таблицы: строка = блок с подписями колонок */
  .tablewrap table,.tablewrap tbody,.tablewrap tr,.tablewrap td{display:block;width:100%}
  .tablewrap thead{position:absolute;left:-9999px}
  .tablewrap tr{padding:10px 0;border-bottom:1px solid rgba(243,241,230,.28)}
  .tablewrap tr:last-child{border-bottom:2px solid var(--chalk-faint)}
  .tablewrap td{border:0;padding:2px 0 2px 0;font-size:16px}
  .tablewrap td::before{content:attr(data-h);display:block;font-family:var(--hand);font-size:17px;color:var(--yellow);line-height:1.2}
  .tablewrap td:empty{display:none}
}
@media (max-width:400px){
  h1{font-size:32px}
  .lead{font-size:16px;line-height:1.45;margin-top:12px}
  .front .hero{padding:16px 0 22px}
  .entries{gap:10px;margin-top:18px}
  .entry .who{font-size:24px}
  .entry .what{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ── демо-прохождение: участок доски, который только что вытерли ── */
.demo{margin:34px 0 40px;padding:24px 0 28px;position:relative}
.demo::before,.demo::after{content:"";position:absolute;left:0;right:0;height:3px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--chalk-faint) 6%,var(--chalk-faint) 94%,transparent);opacity:.75}
.demo::before{top:0}
.demo::after{bottom:0}
.demo-lede{margin:0 0 18px;color:var(--chalk-dim);font-size:15.5px;line-height:1.5;max-width:62ch}
.demo-stage{min-height:0}
.demo-ask{min-height:340px}
.demo-screen{transition:opacity .32s cubic-bezier(.2,.7,.3,1),transform .32s cubic-bezier(.2,.7,.3,1),filter .32s}
.demo-screen:focus{outline:none}
.demo-screen.demo-in{opacity:0;transform:translateY(7px);filter:blur(2px)}

.demo-go{display:inline-block;margin:6px 0 0;padding:2px 4px 8px;background:none;border:0;cursor:pointer;
  font-family:var(--hand);font-size:34px;line-height:1.1;color:var(--chalk);position:relative}
.demo-go::after{content:"";position:absolute;left:2px;right:2px;bottom:0;height:4px;border-radius:2px;
  background:var(--yellow);transform:scaleX(.82) rotate(-.7deg);transform-origin:left;transition:transform .28s}
.demo-go:hover::after,.demo-go:focus-visible::after{transform:scaleX(1) rotate(-.7deg)}
.demo-go:active{transform:translateY(1px)}
.demo-note{margin:16px 0 0;color:var(--chalk-dim);font-size:15.5px;line-height:1.55;max-width:58ch}

.demo-bar{display:grid;grid-template-columns:repeat(15,minmax(0,17px));align-items:flex-end;gap:5px;height:16px;margin-bottom:14px}
.demo-tick{display:block;width:100%;height:3px;border-radius:2px;background:var(--chalk-faint);opacity:.5;transition:background .2s,height .2s}
.demo-tick.is-done{background:var(--yellow);opacity:.95}
.demo-tick.is-now{background:var(--chalk);height:10px;opacity:1}
.demo-count{margin:0 0 10px;font-family:var(--hand);font-size:19px;color:var(--yellow)}
.demo-statement{margin:0 0 26px;font-family:var(--hand);font-size:clamp(25px,3.3vw,37px);line-height:1.14;color:#fff;
  min-height:2.3em;text-wrap:balance}

.demo-scale{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;position:relative;padding-bottom:4px}
.demo-scale::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--chalk-faint) 5%,var(--chalk-faint) 95%,transparent);transform:rotate(-.2deg)}
.demo-v{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 0 10px;background:none;border:0;
  cursor:pointer;position:relative;min-height:56px;justify-content:flex-end}
.demo-v-tick{display:block;width:3px;height:22px;border-radius:2px;background:var(--chalk-faint);transform:rotate(-1deg);
  transition:height .18s,background .18s}
.demo-v-n{font-family:var(--hand);font-size:22px;line-height:1;color:var(--chalk-dim);transition:color .18s}
.demo-v:hover .demo-v-tick,.demo-v:focus-visible .demo-v-tick{height:32px;background:var(--chalk)}
.demo-v:hover .demo-v-n,.demo-v:focus-visible .demo-v-n{color:#fff}
.demo-v.is-picked .demo-v-n{color:var(--yellow)}
.demo-v.is-picked .demo-v-tick{background:var(--yellow);height:30px}
.demo-ring{position:absolute;left:50%;bottom:-7px;width:52px;height:54px;transform:translateX(-50%);pointer-events:none}
.demo-ring path{fill:none;stroke:var(--yellow);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:172;stroke-dashoffset:172;animation:demo-draw .42s cubic-bezier(.3,.8,.4,1) forwards}
@keyframes demo-draw{to{stroke-dashoffset:0}}
.demo-ends{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-family:var(--hand);font-size:17px;color:var(--chalk-dim)}

.demo-rh{margin:0 0 6px;font-family:var(--hand);font-size:clamp(24px,2.6vw,31px);line-height:1.1;color:#fff}
.demo-table td{vertical-align:top}
.demo-ans{font-family:var(--hand);font-size:23px;color:var(--yellow);text-align:center;white-space:nowrap}
.demo-k{font-family:var(--hand);font-size:19px;line-height:1.25}
.demo-k-risk{color:var(--pink)}
.demo-k-protect{color:var(--blue)}
.demo-k-lie{color:var(--yellow)}
.demo-note-blk{margin:24px 0;padding:13px 0 8px;position:relative}
.demo-note-blk::before,.demo-note-blk::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;opacity:.8}
.demo-note-blk::before{top:0}
.demo-note-blk::after{bottom:0}
.demo-note-blk p{margin:0 0 .5em}
.demo-note-t{font-family:var(--hand);font-size:23px;line-height:1.1;margin-bottom:6px !important}
.demo-c-yellow::before,.demo-c-yellow::after{background:var(--yellow)}
.demo-c-yellow .demo-note-t{color:var(--yellow)}
.demo-c-pink::before,.demo-c-pink::after{background:var(--pink)}
.demo-c-pink .demo-note-t{color:var(--pink)}
.demo-c-blue::before,.demo-c-blue::after{background:var(--blue)}
.demo-c-blue .demo-note-t{color:var(--blue)}
.demo-final{margin:22px 0 26px}
.demo-again{font-size:27px}

.demo-all{margin-top:26px}
.demo-all summary{font-family:var(--hand);font-size:19px;color:var(--chalk-dim);cursor:pointer;
  border-bottom:1px dashed rgba(243,241,230,.35);display:inline-block;padding-bottom:2px}
.demo-all summary:hover{color:#fff;border-bottom-color:var(--yellow)}
.demo-all[open] summary{margin-bottom:14px}
.demo-static-t{font-family:var(--hand);font-size:23px;color:#fff;margin:0 0 10px}
.demo-list .demo-q{margin:0}
.demo-list .demo-sc{margin:2px 0 0;font-family:var(--hand);font-size:18px;color:var(--chalk-dim)}
.demo-list li{margin-bottom:1em}

.hero-try{margin:22px 0 0;font-family:var(--hand);font-size:21px;line-height:1.25}
.hero-try a{color:var(--yellow);text-decoration:none;border-bottom:2px solid rgba(242,209,75,.5);padding-bottom:2px}
.hero-try a:hover{color:#fff;border-bottom-color:var(--chalk)}
.hero-try-n{display:block;font-family:var(--sans);font-size:14.5px;color:var(--chalk-dim);margin-top:6px}

@media (max-width:560px){
  .demo-ask{min-height:392px}
  .demo-scale{grid-template-columns:repeat(5,1fr);gap:4px 2px;padding-bottom:0}
  .demo-scale::after{display:none}
  .demo-v{min-height:62px;padding:10px 0 8px}
  .demo-v-tick{height:18px}
  .demo-ends{font-size:15px;gap:8px}
  .demo-bar{gap:3px}
  .demo-statement{min-height:2.6em;margin-bottom:18px}
  .demo-lede{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .demo-screen,.demo-v-tick,.demo-v-n,.demo-go::after{transition:none}
  .demo-screen.demo-in{opacity:1;transform:none;filter:none}
  .demo-ring path{animation:none;stroke-dashoffset:0}
}