:root{
  --paper:#f6f1e1;
  --card:#fbf8ef;
  --ink:#22241f;
  --muted:#5f5d50;
  --sage:#5e7d63;
  --sage-deep:#4a6850;
  --sage-soft:#a9bfa9;
  --rule:#d9cfb2;
  --steel:#526d86;
  --wood:#9a612b;
  --gold:#9a5e14;
  --hand:"Gochi Hand", cursive;
  --wobble:14px 16px 15px 13px / 15px 13px 16px 14px;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background-color:var(--paper);
  background-image:radial-gradient(rgba(34,36,31,0.03) 1px, transparent 1px);
  background-size:5px 5px;
  color:var(--ink);
  font-family:"Nunito Sans", system-ui, sans-serif;
  font-size:17px;
  line-height:1.65;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(140% 110% at 50% 30%, transparent 55%, rgba(150,128,72,0.14));
}
img{ display:block; max-width:100%; height:auto; }
.wrap{
  max-width:860px;
  margin-left:auto; margin-right:auto;
  padding-left:24px; padding-right:24px;
}
.sr-only{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
a:focus-visible{ outline:3px solid var(--sage); outline-offset:3px; border-radius:4px; }

h1, h2, h3{ font-family:var(--hand); font-weight:400; line-height:1.2; }

.site-head{ padding-top:56px; padding-bottom:8px; text-align:center; }
.site-head h1 img{ width:100%; max-width:760px; margin:0 auto; }
.tagline{
  font-family:var(--hand);
  font-size:1.7rem;
  line-height:1.3;
  margin-top:4px;
}
.tagline .squig{ display:block; margin:10px auto 0; }

section{ padding:44px 0 8px; }
h2{
  font-size:2rem;
  letter-spacing:0.06em;
  margin-bottom:20px;
  display:flex; align-items:center; gap:14px;
}
h2 svg{ flex:none; }
.lead{ max-width:620px; }
.lead + .lead{ margin-top:12px; }

p a{
  color:var(--ink);
  font-weight:700;
  text-decoration:none;
  border-bottom:2px solid var(--sage);
}
p a:hover{ color:var(--sage-deep); }

.cards{ display:grid; grid-template-columns:1.3fr 1fr; gap:26px; margin-top:26px; }
.card{
  --accent:var(--sage);
  background:var(--card);
  border:2px solid var(--ink);
  border-radius:var(--wobble);
  padding:26px 28px 24px;
  position:relative;
  box-shadow:3px 4px 0 color-mix(in srgb, var(--accent) 30%, transparent);
  transform:rotate(-0.35deg);
}
.card:nth-child(2){ transform:rotate(0.4deg); }
.card--3d{ --accent:var(--steel); background:#eff1ed; }
.card--audio{ --accent:var(--wood); background:#fbf4e6; }
.card--2d{ --accent:var(--steel); }
.card--anim{ --accent:var(--gold); }
.card h3{ font-size:1.55rem; margin-bottom:2px; }
.card h3 a{ color:inherit; text-decoration:none; }
.card h3 a:hover{ color:var(--accent); }
.card .pillars{
  font-weight:700;
  font-size:0.86rem;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:12px;
}
.card p{ max-width:560px; }
.card .doodle{ position:absolute; bottom:14px; right:18px; opacity:0.85; }
.card .doodle path{ stroke:var(--accent); }

.card--feature{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0, 290px) 1fr;
  gap:32px;
  align-items:center;
  padding:34px 32px 28px;
  transform:rotate(-0.2deg);
}
.card--feature ~ .card:nth-child(2){ transform:rotate(-0.4deg); }
.card--feature ~ .card:nth-child(3){ transform:rotate(0.45deg); }
.card--feature ~ .card:nth-child(4){ transform:rotate(0.3deg); }
.card--feature ~ .card:nth-child(5){ transform:rotate(-0.3deg); }

.badge{
  position:absolute; top:-13px; right:18px;
  font-family:var(--hand);
  font-size:0.95rem;
  background:var(--paper);
  border:2px dashed var(--accent);
  border-radius:999px;
  color:var(--accent);
  padding:2px 14px;
  transform:rotate(2deg);
}
.badge--live{ background:var(--accent); border-style:solid; color:#fff; }

.photo{ position:relative; display:block; transform:rotate(-2deg); }
.photo img{
  border:2px solid var(--ink);
  border-radius:7px 10px 8px 9px;
  box-shadow:3px 4px 0 color-mix(in srgb, var(--accent, var(--sage)) 35%, transparent);
}
.photo::before{
  content:"";
  position:absolute; z-index:1;
  top:-12px; left:50%;
  width:92px; height:24px;
  margin-left:-46px;
  background:rgba(232,221,184,0.78);
  border:1px solid rgba(150,128,72,0.22);
  transform:rotate(3deg);
}

.actions{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:14px 16px;
  margin-top:20px;
}
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--hand);
  font-size:1.3rem;
  line-height:1.2;
  padding:8px 20px 9px;
  color:var(--ink);
  text-decoration:none;
  background:var(--card);
  border:2px solid var(--ink);
  border-radius:12px 15px 13px 16px / 15px 12px 16px 13px;
  box-shadow:3px 3px 0 color-mix(in srgb, var(--ink) 80%, transparent);
}
.btn svg{ flex:none; }
.btn--main{ background:var(--ink); color:var(--paper); box-shadow:3px 4px 0 var(--sage); }
.btn:active{ transform:translate(2px, 2px); box-shadow:1px 1px 0 var(--ink); }

.sale{
  display:inline-block;
  font-family:var(--hand);
  font-size:1.1rem;
  color:var(--gold);
  background:#fcefc9;
  border:2px dashed #cf9540;
  border-radius:999px;
  padding:2px 15px;
  transform:rotate(-2deg);
}
.sale[hidden]{ display:none; }

.kelpo-note{
  margin-top:26px;
  border-left:3px solid var(--sage-soft);
  padding:6px 0 6px 20px;
  font-style:italic;
  max-width:600px;
}
.kelpo-note b{ font-style:normal; }

footer{
  margin-top:70px;
  padding-top:26px; padding-bottom:40px;
  border-top:2px dashed var(--rule);
  text-align:center;
  font-size:0.9rem;
  color:var(--muted);
}
footer nav{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px 20px; margin-bottom:8px; }
footer nav a{ color:var(--muted); font-weight:700; text-decoration:none; }
footer nav a:hover{ color:var(--sage-deep); }
footer .mini{ font-family:var(--hand); font-size:1.05rem; color:var(--sage); margin-top:6px; }

.topbar{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px;
  padding-top:18px;
}
.topbar a{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--hand);
  font-size:1.25rem;
  color:var(--ink);
  text-decoration:none;
}
.topbar a:hover{ color:var(--sage-deep); }
.topbar img{ width:36px; height:36px; }

.hero{ padding-top:26px; text-align:center; }
.hero h1 img{
  width:100%; max-width:680px;
  margin:0 auto;
  border:2px solid var(--ink);
  border-radius:var(--wobble);
  box-shadow:5px 6px 0 color-mix(in srgb, var(--steel) 30%, transparent);
  transform:rotate(-0.5deg);
}
.hero .tagline{ font-size:2.1rem; margin-top:30px; }
.hero .intro{ max-width:590px; margin:14px auto 0; }
.hero .actions{ justify-content:center; margin-top:24px; }
.hero .sale{ margin-top:18px; }
.facts{ margin-top:16px; font-size:0.92rem; color:var(--muted); }

.video{ margin:0; }
.video-link, .video iframe{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  border:2px solid var(--ink);
  border-radius:var(--wobble);
  overflow:hidden;
  background:#26352b;
  box-shadow:4px 5px 0 color-mix(in srgb, var(--sage) 35%, transparent);
}
.video-link img{ width:100%; height:100%; object-fit:cover; }
.video-link .play{
  position:absolute; left:50%; top:50%;
  width:84px; height:84px;
  transform:translate(-50%, -50%) rotate(-4deg);
}
.video-link:hover .play{ transform:translate(-50%, -50%) rotate(3deg) scale(1.06); }
.video figcaption{ margin-top:14px; max-width:620px; }
.video figcaption b{ font-family:var(--hand); font-weight:400; font-size:1.3rem; line-height:1; }
.video-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:30px;
  align-items:center;
  margin-top:40px;
}
.video-row .video-link, .video-row iframe{ transform:rotate(0.6deg); }
.video-row h3{ font-size:1.5rem; margin-bottom:6px; }
.more{ margin-top:30px; }

.features{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
}
.features li{
  background:var(--card);
  border:2px solid var(--ink);
  border-radius:var(--wobble);
  padding:18px 20px 18px;
  box-shadow:3px 4px 0 color-mix(in srgb, var(--steel) 26%, transparent);
  transform:rotate(-0.4deg);
}
.features li:nth-child(even){ transform:rotate(0.35deg); }
.features h3{
  font-size:1.45rem;
  display:flex; align-items:center; gap:10px;
  margin-bottom:6px;
}
.features h3 svg{ flex:none; }
.features h3 svg path{ stroke:var(--steel); }
.features p{ font-size:0.95rem; line-height:1.55; }

.fit{ display:grid; grid-template-columns:1fr 1fr; gap:26px 34px; margin-top:24px; }
.fit h3{ font-size:1.5rem; margin-bottom:6px; }
.fit ul{ list-style:none; }
.fit li{ position:relative; padding-left:32px; margin:8px 0; }
.fit li::before{
  content:"";
  position:absolute; left:0; top:0.2em;
  width:21px; height:21px;
  background:no-repeat center / contain;
}
.fit .yes li::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M3.5 11.5c2 1.3 3.6 3.2 4.8 5.6C10.6 11.4 14 6.7 19 3.5' fill='none' stroke='%235e7d63' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fit .no li::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M5 5.5c4 3.3 7.8 7.2 11.5 11.5M16.5 4.5C12.4 8.3 8.8 12.6 5.5 17.5' fill='none' stroke='%23a4573b' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }

.note{
  position:relative;
  max-width:430px;
  margin:34px 0 0 auto;
  padding:20px 24px 18px;
  background:#fbeebb;
  border-radius:2px 3px 18px 2px;
  box-shadow:2px 7px 12px rgba(90,76,30,0.16);
  transform:rotate(1.2deg);
}
.note::before{
  content:"";
  position:absolute;
  top:-11px; left:50%;
  width:84px; height:22px;
  margin-left:-42px;
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(150,128,72,0.18);
  transform:rotate(-4deg);
}
.note h3{ font-size:1.4rem; margin-bottom:4px; }
.note ul{ list-style:none; }
.note li{ padding-left:18px; position:relative; }
.note li::before{ content:"~"; position:absolute; left:0; color:var(--gold); font-weight:700; }

.notebook{
  position:relative;
  margin-top:26px;
  background-color:#fdfbf5;
  background-image:linear-gradient(transparent 38px, #d5dfe6 38px, #d5dfe6 40px);
  background-size:100% 40px;
  border:2px solid var(--ink);
  border-radius:var(--wobble);
  padding:40px 24px 0 70px;
  box-shadow:3px 4px 0 color-mix(in srgb, var(--steel) 26%, transparent);
  overflow:hidden;
}
.notebook::before{
  content:"";
  position:absolute; top:0; bottom:0; left:50px;
  width:2px;
  background:#e2a79b;
}
.notebook .heading{
  position:absolute; top:4px; left:70px;
  font-family:var(--hand);
  font-size:1.3rem;
  color:var(--muted);
}
.lessons{ list-style:none; counter-reset:lesson; }
.lessons li{
  counter-increment:lesson;
  position:relative;
  display:flex; align-items:center; gap:12px;
  height:40px;
  font-family:var(--hand);
  font-size:1.35rem;
}
.lessons li::before{
  content:counter(lesson);
  position:absolute; left:-52px;
  width:24px;
  text-align:right;
  color:var(--muted);
}
.lessons a{ color:var(--ink); text-decoration:none; border-bottom:2px solid var(--sage); line-height:1.1; }
.lessons a:hover{ color:var(--sage-deep); }
.soon{
  margin-left:auto;
  font-size:0.95rem;
  line-height:1.3;
  color:var(--muted);
  border:2px dashed var(--rule);
  border-radius:999px;
  padding:0 12px;
  transform:rotate(-2deg);
}

.get{
  display:grid;
  grid-template-columns:minmax(0, 290px) 1fr;
  gap:36px;
  align-items:center;
  padding-top:60px;
}
.get h2{ margin-bottom:10px; }
.get .actions{ margin-top:16px; }
.get .sale{ margin-top:16px; }
.get .small{ margin-top:18px; font-size:0.95rem; }

.lost{ text-align:center; padding-top:80px; padding-bottom:20px; }
.lost img{ width:150px; margin:0 auto 18px; transform:rotate(-6deg); }
.lost h1{ font-size:2.6rem; }
.lost p{ margin-top:10px; }
.lost .actions{ justify-content:center; }

/* Learn: tutorials + manual */
.learn-links{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:10px 12px;
  margin-top:18px;
  font-family:var(--hand);
  font-size:1.15rem;
  color:var(--muted);
}
.learn-links--center{ justify-content:center; }
.learn-links a{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:400;
  font-size:1.15rem;
  line-height:1.2;
  color:var(--ink);
  text-decoration:none;
  background:var(--card);
  border:2px solid var(--ink);
  border-radius:11px 13px 12px 14px / 13px 11px 14px 12px;
  box-shadow:2px 2px 0 color-mix(in srgb, var(--sage) 55%, transparent);
  padding:4px 14px 5px 11px;
}
.learn-links a svg{ flex:none; color:var(--sage-deep); }
.learn-links a:hover{ color:var(--sage-deep); }
.learn-links a:active{ transform:translate(1px, 1px); box-shadow:1px 1px 0 var(--sage); }
.learn{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);
  gap:30px;
  align-items:start;
  margin-top:26px;
}
.learn > div{ scroll-margin-top:24px; }
.learn h3{
  font-size:1.6rem;
  display:flex; align-items:center; gap:10px;
  margin-bottom:12px;
}
.learn .notebook{ margin-top:0; }
.manual-card{ --accent:var(--steel); background:#eff1ed; transform:rotate(0.35deg); }
.manual-card p{ font-size:0.98rem; }
.manual-index{
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 18px;
  margin:12px 0 18px;
}
.manual-index li::before{ content:"~"; color:var(--sage); font-weight:700; margin-right:7px; }
.manual-index a{
  color:var(--ink);
  font-weight:700;
  font-size:0.95rem;
  text-decoration:none;
  border-bottom:2px solid var(--sage-soft);
}
.manual-index a:hover{ color:var(--sage-deep); border-color:var(--sage); }

@media (max-width:760px){
  .card--feature, .get, .video-row, .learn{ grid-template-columns:1fr; }
  .card--feature .photo, .get .photo{ max-width:320px; margin:4px auto 0; }
  .features{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .tagline{ font-size:1.4rem; }
  .hero .tagline{ font-size:1.7rem; }
  h2{ font-size:1.7rem; }
  .cards, .features, .fit{ grid-template-columns:1fr; }
  .card{ padding:22px 20px 20px; }
  .card--feature{ padding:30px 20px 22px; }
  .btn{ font-size:1.2rem; padding:7px 15px 8px; }
  .actions{ gap:12px; }
  .notebook{ padding-left:52px; padding-right:14px; }
  .notebook::before{ left:36px; }
  .notebook .heading{ left:52px; }
  .lessons li{ font-size:1.2rem; }
  .lessons li::before{ left:-48px; }
  .note{ margin-right:6px; }
}
@media (prefers-reduced-motion: no-preference){
  .card, .btn, .video-link .play, .learn-links a{ transition:transform .18s ease, box-shadow .18s ease; }
  .card:hover{ transform:rotate(0deg) translateY(-2px); }
  .btn:hover, .learn-links a:hover{ transform:translate(-1px, -2px); }
  .btn:active{ transform:translate(2px, 2px); }
}