:root {
  --cn-ink: #26252b;
  --cn-muted: #666477;
  --cn-plum: #6f43c0;
  --cn-plum-dark: #4b2790;
  --cn-orange: #ff812b;
  --cn-paper: #fffef8;
  --cn-rule: rgba(70, 54, 92, 0.12);
}

html.no-blue-background,
body.no-blue-background,
body.no-blue-background main {
  background: var(--cn-paper) !important;
  background-color: var(--cn-paper) !important;
  --page-bg: var(--cn-paper) !important;
}

body.no-blue-background main {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cn-page {
  color: var(--cn-ink);
  font-family: Inter, ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: clip;
}

.cn-page * { box-sizing: border-box; }
.cn-shell { width: min(1320px, calc(100% - 48px)); margin-inline: auto; }

.cn-nav {
  position: sticky;
  top: 64px;
  z-index: 20;
  background: rgba(255, 254, 248, 0.92);
  border-bottom: 1px solid var(--cn-rule);
  backdrop-filter: blur(18px);
}

.cn-nav__inner { min-height: 78px; display: flex; align-items: center; gap: 24px; }
.cn-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--cn-ink); font-weight: 800; font-size: 1.05rem; text-decoration: none; }
.cn-brand img { border-radius: 10px; box-shadow: 0 6px 14px rgba(64, 38, 15, 0.14); }
.cn-nav__links { margin-left: auto; display: flex; gap: 24px; }
.cn-nav__links a { color: #575364; font-size: 0.94rem; font-weight: 650; text-decoration: none; }
.cn-nav__links a:hover { color: var(--cn-plum); }
.cn-nav__download { flex: 0 0 max-content; text-align: center; }
.cn-nav__download .cn-button { width: 100%; padding-inline: 0; }
.cn-nav__download > span { display: block; margin-top: 5px; color: #6c6673; font-size: .62rem; font-weight: 650; line-height: 1.15; white-space: nowrap; }

.cn-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border-radius: 14px;
  border: 1px solid rgba(77, 49, 112, 0.16);
  color: var(--cn-plum-dark);
  background: #fff;
  box-shadow: 0 8px 22px rgba(63, 35, 99, 0.08);
  font-weight: 760;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.cn-button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(63, 35, 99, 0.14); }
.cn-button:focus-visible { outline: 3px solid rgba(255, 129, 43, 0.46); outline-offset: 3px; }
.cn-button--small { min-height: 40px; padding-inline: 17px; border-radius: 12px; background: var(--cn-plum); color: #fff; }
.cn-button--primary { background: linear-gradient(135deg, #7c4dcc, #5a31a7); color: #fff; border-color: transparent; }
.cn-button--quiet { background: rgba(255, 255, 255, 0.78); }

.cn-hero {
  position: relative;
  padding: 96px 0 84px;
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 232, 92, 0.34), transparent 27rem),
    radial-gradient(circle at 86% 38%, rgba(132, 219, 207, 0.28), transparent 30rem),
    linear-gradient(180deg, #fffef8 0%, #fffaf0 100%);
}

.cn-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.25;
  background-image: linear-gradient(rgba(78, 56, 94, 0.08) 1px, transparent 1px);
  background-size: 100% 32px;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 80%, transparent);
}

.cn-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(460px, 1.08fr); align-items: center; gap: 70px; }
.cn-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: var(--cn-plum); font-size: 0.84rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.cn-eyebrow span { width: 9px; height: 9px; border-radius: 99px; background: var(--cn-orange); box-shadow: 0 0 0 6px rgba(255, 129, 43, 0.14); }
.cn-hero h1 { margin: 0; max-width: 700px; color: #222127; font-size: clamp(3rem, 5vw, 5.25rem); letter-spacing: -0.055em; line-height: 0.98; }
.cn-hero h1 em { color: var(--cn-plum); font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.cn-lead { max-width: 650px; margin: 30px 0 0; color: var(--cn-muted); font-size: clamp(1.08rem, 1.35vw, 1.24rem); line-height: 1.72; }
.cn-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.cn-trust { display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0 0; color: #4f4c59; font-size: 0.92rem; font-weight: 650; }
.cn-trust span::before { content: "✓"; margin-right: 6px; color: #1c9b6d; }
.cn-release-meta { display: flex; flex-wrap: nowrap; gap: 4px; margin-top: 15px; overflow-x: auto; scrollbar-width: none; }
.cn-release-meta::-webkit-scrollbar { display: none; }
.cn-release-meta a,
.cn-release-meta span { flex: 0 0 auto; padding: 5px; border: 1px solid rgba(86, 60, 102, .14); border-radius: 999px; color: #5e5867; background: rgba(255,255,255,.72); font-size: .64rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.cn-release-meta a { color: var(--cn-plum-dark); border-color: rgba(111,67,192,.25); }
.cn-release-meta a:hover { background: #fff; text-decoration: underline; }

.cn-hero__visual { position: relative; min-height: 570px; perspective: 1200px; }
.cn-note { position: absolute; width: 330px; min-height: 250px; padding: 52px 28px 26px; border: 1px solid rgba(66, 47, 59, 0.12); border-radius: 13px 13px 28px 13px; box-shadow: 0 28px 60px rgba(62, 47, 49, 0.18), 0 3px 8px rgba(62, 47, 49, 0.08); }
.cn-note::after { content: ""; position: absolute; right: 0; bottom: 0; border-style: solid; border-width: 0 0 30px 30px; border-color: transparent transparent rgba(255,255,255,.62) transparent; filter: drop-shadow(-2px -2px 2px rgba(0,0,0,.05)); }
.cn-note__bar { position: absolute; top: 0; left: 0; right: 0; height: 38px; display: grid; grid-template-columns: 20px 1fr 20px; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid rgba(44, 37, 37, 0.11); color: rgba(34, 30, 33, 0.64); font-size: 0.7rem; font-weight: 680; text-align: center; }
.cn-note__bar > span:first-child { width: 10px; height: 10px; border-radius: 50%; background: #ff6159; box-shadow: 0 0 0 3px rgba(255,255,255,.45); }
.cn-note__bar b { font-size: 1.1rem; font-weight: 400; }
.cn-note h2 { margin: 0 0 16px; font-size: 1.62rem; line-height: 1.08; letter-spacing: -0.035em; }
.cn-note p { margin: 0 0 12px; font-size: 0.98rem; line-height: 1.5; }
.cn-note--yellow { z-index: 3; top: 78px; left: 0; background: #fff08a; transform: rotate(-4deg); }
.cn-note--mint { z-index: 2; top: 0; right: 3px; width: 310px; background: #c8f1df; transform: rotate(4deg); }
.cn-note--mint img { display: block; width: 100%; height: 110px; object-fit: contain; margin-bottom: 12px; }
.cn-note--mint p { font-size: 0.82rem; line-height: 1.35; }
.cn-note--blue { z-index: 4; right: 35px; bottom: 0; width: 290px; min-height: 205px; background: #cce8ff; transform: rotate(-1.7deg); }
.cn-hand { margin-top: 26px !important; font-family: "Bradley Hand", "Comic Sans MS", cursive; color: #675f39; font-size: 1.05rem !important; }
.cn-app-icon { position: absolute; z-index: 5; left: 27px; bottom: 2px; border-radius: 27px; filter: drop-shadow(0 20px 18px rgba(60, 37, 30, 0.22)); transform: rotate(3deg); }

.cn-preview-strip { padding: 23px 0; color: #fff; background: linear-gradient(100deg, #4f2a91, #7c4dcc 56%, #9a5ddb); }
.cn-preview-strip p { max-width: 980px; margin: 0 auto; font-size: 1.03rem; line-height: 1.55; text-align: center; text-wrap: balance; }
.cn-preview-strip p span { display: block; }

.cn-section { padding: 104px 0; }
.cn-section__heading { max-width: 770px; margin: 0 auto 50px; text-align: center; }
.cn-section__heading h2,
.cn-transform h2,
.cn-faq h2,
.cn-final h2 { margin: 0; color: #242229; font-size: clamp(2.25rem, 4vw, 3.85rem); line-height: 1.05; letter-spacing: -0.045em; }
.cn-section__heading > p:last-child { max-width: 700px; margin: 20px auto 0; color: #656170; font-size: 1.08rem; line-height: 1.68; }
.cn-kicker { margin: 0 0 15px; color: var(--cn-plum); font-size: 0.8rem; font-weight: 850; letter-spacing: 0.11em; text-transform: uppercase; }

.cn-story { background: #fffefb; }
.cn-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cn-feature { position: relative; min-height: 235px; padding: 30px; border: 1px solid rgba(68, 53, 81, 0.11); border-radius: 22px; background: #fff; box-shadow: 0 16px 36px rgba(67, 46, 81, 0.07); overflow: hidden; }
.cn-feature::after { content: ""; position: absolute; inset: auto -28px -48px auto; width: 120px; height: 120px; border-radius: 50%; background: var(--feature-glow, #f7e970); opacity: .34; }
.cn-feature--1 { --feature-glow: #ffe868; }
.cn-feature--2 { --feature-glow: #ffb4b8; }
.cn-feature--3 { --feature-glow: #acd9ff; }
.cn-feature--4 { --feature-glow: #b6edcf; }
.cn-feature--5 { --feature-glow: #cabcf0; }
.cn-feature--6 { --feature-glow: #ffd1a8; }
.cn-feature__symbol { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 30px; border-radius: 15px; color: #4d2f74; background: color-mix(in srgb, var(--feature-glow) 60%, white); font-size: 1.35rem; font-weight: 850; }
.cn-feature h3 { position: relative; z-index: 1; margin: 0 0 10px; color: #27242b; font-size: 1.18rem; letter-spacing: -0.02em; }
.cn-feature p { position: relative; z-index: 1; margin: 0; color: #686471; font-size: 0.95rem; line-height: 1.58; }

.cn-scraps { background: linear-gradient(180deg, #fffefb 0%, #fff7e8 100%); }
.cn-scraps .cn-section__heading { max-width: 880px; }
.cn-scrap-board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 34px 24px; align-items: start; padding: 52px; border: 1px solid rgba(95, 65, 104, .12); border-radius: 38px; background: radial-gradient(circle at 18% 24%, rgba(255, 225, 91, .16), transparent 26%), radial-gradient(circle at 80% 76%, rgba(135, 97, 206, .12), transparent 29%), #fbfafc; box-shadow: inset 0 1px 0 #fff, 0 30px 80px rgba(73, 50, 81, .1); overflow: hidden; }
.cn-real-note { position: relative; grid-column: 1 / 4; align-self: center; width: min(530px, 115%); aspect-ratio: 1; margin: -24px -8% -34px; transform: rotate(1.8deg); filter: drop-shadow(0 30px 22px rgba(52, 41, 24, .16)); }
.cn-real-note img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cn-real-note blockquote { position: absolute; z-index: 1; inset: 22% 17% 22% 15%; display: flex; align-items: center; margin: 0; color: #29271f; font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive; font-size: clamp(1.55rem, 3.15vw, 2.6rem); font-weight: 600; line-height: 1.28; letter-spacing: .01em; transform: rotate(-1.4deg); }
.cn-old-note-copy { grid-column: 4 / 7; align-self: center; padding: 20px 18px 20px 28px; }
.cn-old-note-copy .cn-kicker { margin-bottom: 12px; }
.cn-old-note-copy h3 { max-width: 460px; margin: 0 0 22px; color: #29262d; font-size: clamp(2rem, 3.5vw, 3.25rem); line-height: 1.03; letter-spacing: -.045em; }
.cn-old-note-copy > p:not(.cn-kicker) { margin: 0 0 17px; color: #625d69; font-size: 1rem; line-height: 1.62; }
.cn-old-note-copy__punchline { padding: 16px 0 16px 20px; border-left: 4px solid var(--cn-orange); color: #332e38 !important; }
.cn-use-note { position: relative; min-height: 265px; padding: 56px 28px 28px; color: #29262d; border: 1px solid rgba(58, 45, 54, .13); border-radius: 12px 12px 27px 12px; box-shadow: 0 24px 38px rgba(71, 53, 58, .18); }
.cn-use-note::after { content: ""; position: absolute; right: 0; bottom: 0; border-style: solid; border-width: 0 0 27px 27px; border-color: transparent transparent rgba(255,255,255,.55) transparent; }
.cn-use-note__bar { position: absolute; inset: 0 0 auto; display: grid; grid-template-columns: 16px 1fr 16px; align-items: center; min-height: 38px; padding: 0 12px; border-bottom: 1px solid rgba(42, 37, 40, .12); color: rgba(42, 37, 40, .62); font-size: .69rem; text-align: center; }
.cn-use-note__bar > span { width: 9px; height: 9px; border-radius: 50%; background: #ff6159; box-shadow: 0 0 0 3px rgba(255,255,255,.45); }
.cn-use-note__bar b { font-size: 1.05rem; font-weight: 400; }
.cn-use-note h3 { margin: 0 0 15px; font-size: 1.35rem; letter-spacing: -.025em; }
.cn-use-note p { margin: 0; line-height: 1.55; }
.cn-use-note--recipe { grid-column: span 2; background: #fff08a; transform: rotate(-2deg); }
.cn-use-note--recipe ul { margin: 0; padding-left: 19px; line-height: 1.7; }
.cn-use-note__aside { margin-top: 18px !important; font-family: "Bradley Hand", "Comic Sans MS", cursive; color: #62572f; }
.cn-use-note--poem { grid-column: span 2; min-height: 285px; background: #f5c4cb; transform: translateY(12px) rotate(1.5deg); }
.cn-use-note__poem { font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; font-style: italic; line-height: 1.75 !important; }
.cn-use-note--phone { grid-column: span 2; min-height: 240px; background: #c9e9ff; transform: rotate(-1deg); }
.cn-use-note__name { color: #5c6670; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cn-use-note--phone a { display: block; margin: 10px 0 14px; color: #263c4c; font-size: clamp(1.45rem, 2.2vw, 2rem); font-weight: 850; letter-spacing: -.04em; text-decoration: none; }
.cn-use-note--dates { grid-column: span 3; min-height: 320px; background: #c9eedc; transform: rotate(1deg); }
.cn-date-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cn-date-list p { display: grid; grid-template-columns: 28px 1fr; align-items: center; padding: 13px; border-radius: 12px; background: rgba(255,255,255,.4); }
.cn-date-list p > span { grid-row: span 2; font-size: 1.12rem; }
.cn-date-list strong { font-size: .84rem; }
.cn-date-list small { color: #51695d; font-size: .7rem; }
.cn-use-note--invention { grid-column: span 3; display: grid; grid-template-columns: .7fr 1.3fr; align-items: center; min-height: 320px; padding-bottom: 18px; background: #d5c9f2; transform: rotate(-1.4deg); }
.cn-use-note--invention img { display: block; width: 100%; max-height: 245px; object-fit: contain; filter: drop-shadow(0 12px 8px rgba(50, 31, 73, .11)); }
.cn-invention-copy h3 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); }
.cn-invention-copy p { color: #5e5270; font-family: "Bradley Hand", "Comic Sans MS", cursive; font-size: 1.02rem; }

.cn-privacy { color: #fff; background: radial-gradient(circle at 11% 14%, rgba(255, 164, 82, .16), transparent 24rem), radial-gradient(circle at 90% 83%, rgba(157, 104, 242, .18), transparent 28rem), #26212d; }
.cn-privacy__heading { max-width: 860px; margin-bottom: 50px; }
.cn-privacy__heading .cn-kicker { color: #ffb06e; }
.cn-privacy__heading h2 { margin: 0; color: #fff; font-size: clamp(2.25rem, 4vw, 3.85rem); line-height: 1.05; letter-spacing: -.045em; }
.cn-privacy__heading > p:last-child { max-width: 720px; margin: 22px 0 0; color: #d7cfdf; font-size: 1.08rem; line-height: 1.68; }
.cn-privacy__compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cn-privacy-card { position: relative; min-height: 500px; padding: 34px; border: 1px solid rgba(255,255,255,.13); border-radius: 28px; overflow: hidden; }
.cn-privacy-card__label { display: flex; align-items: center; gap: 9px; margin: 0 0 17px; color: #cfc5d7; font-size: .76rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.cn-privacy-card__label span { color: #ffad68; }
.cn-privacy-card h3 { max-width: 450px; margin: 0; color: #fff; font-size: clamp(1.7rem, 3vw, 2.7rem); letter-spacing: -.035em; }
.cn-privacy-card--paper { background: rgba(255,255,255,.055); }
.cn-paper-note { width: min(340px, 88%); min-height: 195px; margin: 35px auto 30px; padding: 39px 30px 24px; color: #3d382a; background: #ffeb75; box-shadow: 0 22px 38px rgba(0,0,0,.28); transform: rotate(-3.4deg); }
.cn-paper-note span { display: block; color: #776b35; font-size: .68rem; font-weight: 850; letter-spacing: .12em; }
.cn-paper-note strong { display: block; margin: 18px 0 7px; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: clamp(1.1rem, 2vw, 1.5rem); }
.cn-paper-note small { color: #756b3e; font-family: "Bradley Hand", "Comic Sans MS", cursive; }
.cn-privacy-card--paper > p:last-child { max-width: 450px; margin: 0 auto; color: #cfc6d6; line-height: 1.6; text-align: center; }
.cn-privacy-card--locked { background: linear-gradient(145deg, rgba(116,75,186,.34), rgba(68,42,102,.5)); }
.cn-private-note { display: grid; grid-template-columns: 62px 1fr; align-items: center; width: min(390px, 94%); min-height: 130px; margin: 35px auto 28px; padding: 24px; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(18,13,25,.43); box-shadow: 0 22px 40px rgba(0,0,0,.22); }
.cn-private-note__lock { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid #c9a8ff; border-radius: 15px; color: #e8d9ff; font-size: 2rem; transform: rotate(-18deg); }
.cn-private-note strong { color: #fff; }
.cn-private-note small { color: #cbbddd; }
.cn-privacy-card ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.cn-privacy-card li { position: relative; padding-left: 29px; color: #e1d9e7; line-height: 1.5; }
.cn-privacy-card li::before { content: "✓"; position: absolute; left: 0; color: #8de2ba; font-weight: 900; }

.cn-transform { background: linear-gradient(180deg, #f7f2ff 0%, #fffef8 100%); }
.cn-transform__copy { max-width: 850px; }
.cn-transform__copy > p:not(.cn-kicker):not(.cn-quote) { margin: 24px 0 0; color: #625d6a; font-size: 1.08rem; line-height: 1.7; }
.cn-transform kbd { display: inline-block; padding: 0.12em 0.48em; border: 1px solid #cfc4db; border-bottom-width: 3px; border-radius: 7px; color: #44384f; background: #fff; font-family: inherit; font-size: 0.84em; font-weight: 750; }
.cn-quote { max-width: 560px; margin: 36px auto 0; padding: 18px 0 0; border-top: 2px solid rgba(255,129,43,.45); color: #4d4457; }
.cn-quote em { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 1.18rem; line-height: 1.5; }
.cn-quote span { display: block; margin-top: 8px; color: #777080; font-size: .82rem; font-weight: 700; }
.cn-transform__showcase { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.cn-transform__visual { display: grid; grid-template-rows: auto 42px auto; justify-items: center; align-items: center; gap: 12px; min-height: 670px; padding: 30px; border: 1px solid rgba(75, 39, 144, 0.1); border-radius: 30px; background: rgba(255,255,255,.72); box-shadow: 0 28px 70px rgba(78, 54, 106, .12); }
.cn-mini-note,
.cn-page-note { position: relative; color: #29262c; background: #ffef85; box-shadow: 0 22px 38px rgba(74, 58, 45, .17); }
.cn-mini-note { width: min(190px, 90%); min-height: 165px; padding: 52px 24px 24px; transform: rotate(-3deg); border-radius: 9px 9px 20px 9px; }
.cn-page-note { width: 100%; min-height: 310px; padding: 58px 30px 28px; transform: rotate(1.2deg); border-radius: 11px 11px 24px 11px; }
.cn-mini-note > span,
.cn-page-note > span { position: absolute; top: 0; left: 0; right: 0; height: 34px; padding-top: 9px; border-bottom: 1px solid rgba(45,42,35,.12); color: #6a6246; font-size: .72rem; font-weight: 750; text-align: center; }
.cn-mini-note strong,
.cn-page-note strong { font-size: 1.04rem; line-height: 1.35; }
.cn-page-note p { margin: 20px 0; color: #544f3e; line-height: 1.55; }
.cn-page-note ul { margin: 0; padding-left: 20px; color: #544f3e; font-size: .9rem; line-height: 1.75; }
.cn-transform__arrow { color: var(--cn-orange); font-size: 2.3rem; font-weight: 300; text-align: center; transform: rotate(90deg); }
.cn-mini-note--rose,
.cn-page-note--rose { background: #f8c8cf; }
.cn-mini-note--blue,
.cn-page-note--blue { background: #cde9ff; }
.cn-poem { font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; font-style: italic; }
.cn-page-note small { display: block; color: #76636b; font-size: .72rem; line-height: 1.45; }
.cn-equations { display: grid; gap: 9px; margin-top: 20px; }
.cn-equations b { display: block; padding: 8px 10px; border-radius: 8px; color: #3e4d59; background: rgba(255,255,255,.44); font-family: Georgia, "Times New Roman", serif; font-size: 1rem; text-align: center; }
.cn-mini-note code { display: block; margin: 4px 0 15px; color: #233b50; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 1.04rem; font-weight: 800; }
.cn-mini-note p { margin: 0; color: #425566; font-size: .78rem; line-height: 1.45; }

.cn-learn { color: #fff; background: #27232e; }
.cn-section__heading--light h2 { color: #fff; }
.cn-section__heading--light > p:last-child { color: #d7d0df; }
.cn-section__heading--light .cn-kicker { color: #ffad68; }
.cn-lesson-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.cn-lesson-card { min-height: 450px; padding: 22px; color: #2c2930; border-radius: 14px 14px 30px 14px; box-shadow: 0 24px 50px rgba(0,0,0,.28); }
.cn-lesson-card:nth-child(1) { transform: rotate(-1.4deg); }
.cn-lesson-card:nth-child(2) { transform: translateY(20px) rotate(1deg); }
.cn-lesson-card:nth-child(3) { transform: rotate(-.5deg); }
.cn-lesson-card--interest { background: #fff08a; }
.cn-lesson-card--gravity { background: #c9e8ff; }
.cn-lesson-card--circuit { background: #c5edda; }
.cn-lesson-card > div { display: flex; align-items: center; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid rgba(35,31,33,.14); }
.cn-lesson-card > div span { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(45,40,43,.22); border-radius: 50%; font-size: .74rem; font-weight: 800; }
.cn-lesson-card > div strong { font-size: 1.04rem; }
.cn-lesson-card img { display: block; width: 100%; height: 250px; margin: 16px 0; object-fit: contain; }
.cn-lesson-card > p { margin: 0; font-size: .9rem; line-height: 1.5; }
.cn-topic-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 62px; }
.cn-topic-list span { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.11); border-radius: 11px; color: #ece7f2; background: rgba(255,255,255,.05); font-size: .84rem; }
.cn-topic-list b { color: #ffad68; font-size: .68rem; letter-spacing: .05em; }
.cn-learn__note { max-width: 780px; margin: 28px auto 0; color: #bdb5c6; font-size: .88rem; line-height: 1.6; text-align: center; }

.cn-matrix { background: #fffefb; }
.cn-matrix .cn-section__heading { max-width: 960px; }
.cn-matrix__title span { display: block; }
.cn-table-wrap { border: 1px solid #d9c96e; border-radius: 18px; background: #fff8af; box-shadow: 0 20px 50px rgba(110, 85, 27, .12); overflow: hidden; }
.cn-table-wrap table { width: 100%; border-collapse: collapse; }
.cn-table-wrap th,
.cn-table-wrap td { padding: 16px 22px; border-bottom: 1px solid rgba(116, 91, 25, .15); text-align: left; }
.cn-table-wrap thead th { color: #3e351c; background: #f4db57; font-size: .83rem; letter-spacing: .02em; }
.cn-table-wrap thead th:last-child { width: 164px; text-align: center; }
.cn-table-wrap tbody th { width: 27%; color: #342f39; font-size: .91rem; }
.cn-table-wrap tbody td { color: #5f5849; font-size: .9rem; line-height: 1.45; }
.cn-table-wrap tbody td:last-child { text-align: center; }
.cn-table-wrap tbody tr:nth-child(even) { background: rgba(255,255,255,.34); }
.cn-table-wrap tbody tr:hover { background: #fff3a0; }
.cn-table-wrap tbody tr:last-child th,
.cn-table-wrap tbody tr:last-child td { border-bottom: 0; }
.cn-check { display: inline-grid; place-items: center; width: 27px; height: 27px; border: 1px solid #188053; border-radius: 50%; color: #fff; background: linear-gradient(#55cf82, #188b5a); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 4px rgba(27,111,75,.2); font-weight: 900; text-shadow: 0 1px rgba(0,0,0,.18); }
.cn-short-label { display: none; }
.cn-table-note { margin: 18px 0 0; color: #6c6773; font-size: .82rem; text-align: center; }

.cn-copypaste { padding: 54px 0; background: #efe8fa; }
.cn-copypaste__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 30px 34px; border: 1px solid rgba(87,54,126,.13); border-radius: 26px; background: rgba(255,255,255,.78); box-shadow: 0 18px 42px rgba(65,40,91,.08); }
.cn-copypaste__icons { display: flex; align-items: center; gap: 10px; }
.cn-copypaste__icons img { border-radius: 20px; filter: drop-shadow(0 10px 12px rgba(50,31,68,.16)); }
.cn-copypaste__icons span { color: var(--cn-orange); font-size: 1.6rem; font-weight: 800; }
.cn-copypaste__copy h2 { margin: 0; color: #29242f; font-size: clamp(1.55rem, 2.5vw, 2.35rem); letter-spacing: -.035em; line-height: 1.08; }
.cn-copypaste__copy > p:last-child { max-width: 700px; margin: 10px 0 0; color: #68606f; font-size: .93rem; line-height: 1.55; }

.cn-pricing { background: linear-gradient(180deg, #fff7df 0%, #fffefb 100%); }
.cn-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.cn-plan { position: relative; display: flex; flex-direction: column; min-height: 350px; padding: 34px; border: 1px solid rgba(82,60,93,.14); border-radius: 24px; background: rgba(255,255,255,.92); box-shadow: 0 18px 42px rgba(68,48,79,.09); }
.cn-plan--featured { border: 2px solid var(--cn-plum); transform: translateY(-9px); box-shadow: 0 25px 55px rgba(90,49,167,.17); }
.cn-plan__flag { position: absolute; top: -14px; right: 24px; padding: 6px 11px; border-radius: 999px; color: #fff; background: var(--cn-plum); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.cn-plan h3 { margin: 0; color: #342e3b; font-size: 1.15rem; }
.cn-plan__price { margin: 24px 0 15px; }
.cn-plan__price strong { display: block; color: #231f27; font-size: 3.3rem; line-height: 1; letter-spacing: -.05em; }
.cn-plan__price span { display: block; margin-top: 8px; color: #77707e; font-size: .82rem; }
.cn-plan > p:not(.cn-plan__price) { margin: 0 0 28px; color: #68616f; line-height: 1.55; }
.cn-button--plan { width: 100%; margin-top: auto; }
.cn-plan--featured .cn-button--plan { color: #fff; background: var(--cn-plum); }
.cn-trial-after { display: grid; grid-template-columns: 94px 1fr; align-items: center; gap: 24px; max-width: 840px; margin: 50px auto 0; padding: 28px 32px; border: 1px solid rgba(93, 63, 112, .13); border-radius: 22px; background: #fff; }
.cn-trial-after > div:first-child { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 22px; color: #55349a; background: #eee7ff; font-size: 2.15rem; font-weight: 900; transform: rotate(-3deg); }
.cn-trial-after h3 { margin: 0 0 7px; color: #302b35; font-size: 1.08rem; }
.cn-trial-after p { margin: 0; color: #69636f; font-size: .92rem; line-height: 1.55; }

.cn-faq { background: #f4f0f8; }
.cn-faq__grid { display: grid; grid-template-columns: .68fr 1.32fr; gap: 72px; align-items: start; }
.cn-faq__intro { max-width: 350px; margin: 22px 0 0; color: #68616e; line-height: 1.65; }
.cn-faq__items { border-top: 1px solid rgba(73,52,85,.16); }
.cn-faq details { border-bottom: 1px solid rgba(73,52,85,.16); }
.cn-faq summary { display: grid; grid-template-columns: 1fr 28px; gap: 20px; align-items: center; padding: 23px 0; color: #332d39; cursor: pointer; font-size: 1rem; font-weight: 760; list-style: none; }
.cn-faq summary::-webkit-details-marker { display: none; }
.cn-faq summary span { color: var(--cn-plum); font-size: 1.45rem; font-weight: 400; transition: transform 160ms ease; }
.cn-faq details[open] summary span { transform: rotate(45deg); }
.cn-faq details p { margin: -6px 54px 24px 0; color: #69616f; line-height: 1.65; }

.cn-final { padding: 58px 0; color: #fff; background: linear-gradient(120deg, #392064, #6334ad 55%, #814cc8); }
.cn-final__inner { display: grid; grid-template-columns: 112px 1fr auto; align-items: center; gap: 30px; }
.cn-final img { border-radius: 24px; filter: drop-shadow(0 18px 16px rgba(20,12,31,.28)); }
.cn-final .cn-kicker { color: #ffc28d; }
.cn-final h2 { max-width: 650px; color: #fff; font-size: clamp(1.8rem, 3vw, 2.8rem); }
.cn-final__actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cn-final__actions .cn-button { white-space: nowrap; }
.cn-final__actions p { margin: 0; color: #dfd0ef; font-size: .74rem; }
.cn-final__actions > div { display: flex; align-items: center; gap: 8px; color: #aa8fca; }
.cn-final__link { color: #e9ddf7; font-size: .86rem; font-weight: 700; text-decoration: none; }

html[data-theme="dark"] .cn-page,
html[data-theme="dark"] .cn-story,
html[data-theme="dark"] .cn-scraps,
html[data-theme="dark"] .cn-matrix { background: #111017; }
html[data-theme="dark"] .cn-scrap-board { background: #19161f; border-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .cn-old-note-copy h3 { color: #f5f0f8; }
html[data-theme="dark"] .cn-old-note-copy > p:not(.cn-kicker) { color: #c7bfce; }
html[data-theme="dark"] .cn-old-note-copy__punchline { color: #fff !important; }
html[data-theme="dark"] .cn-hero { background: radial-gradient(circle at 15% 10%, rgba(113,74,30,.35), transparent 29rem), radial-gradient(circle at 88% 35%, rgba(35,112,102,.25), transparent 30rem), #111017; }
html[data-theme="dark"] .cn-nav { background: rgba(17,16,23,.92); border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .cn-brand,
html[data-theme="dark"] .cn-nav__links a,
html[data-theme="dark"] .cn-hero h1,
html[data-theme="dark"] .cn-section__heading h2,
html[data-theme="dark"] .cn-transform h2,
html[data-theme="dark"] .cn-faq h2 { color: #f7f2fb; }
html[data-theme="dark"] .cn-lead,
html[data-theme="dark"] .cn-section__heading > p:last-child,
html[data-theme="dark"] .cn-transform__copy > p:not(.cn-kicker):not(.cn-quote),
html[data-theme="dark"] .cn-faq__intro { color: #c3bdca; }
html[data-theme="dark"] .cn-feature,
html[data-theme="dark"] .cn-table-wrap,
html[data-theme="dark"] .cn-plan,
html[data-theme="dark"] .cn-trial-after { background: #1d1a24; border-color: rgba(255,255,255,.11); }
html[data-theme="dark"] .cn-feature h3,
html[data-theme="dark"] .cn-plan h3,
html[data-theme="dark"] .cn-plan__price strong,
html[data-theme="dark"] .cn-trial-after h3,
html[data-theme="dark"] .cn-faq summary,
html[data-theme="dark"] .cn-table-wrap tbody th { color: #f1edf5; }
html[data-theme="dark"] .cn-feature p,
html[data-theme="dark"] .cn-plan > p:not(.cn-plan__price),
html[data-theme="dark"] .cn-trial-after p,
html[data-theme="dark"] .cn-faq details p,
html[data-theme="dark"] .cn-table-wrap tbody td { color: #bdb6c6; }
html[data-theme="dark"] .cn-transform,
html[data-theme="dark"] .cn-pricing,
html[data-theme="dark"] .cn-faq { background: #17141d; }
html[data-theme="dark"] .cn-table-wrap thead th { color: #2f2817; background: #e3c94c; }
html[data-theme="dark"] .cn-table-wrap tbody tr:nth-child(even) { background: #24202b; }
html[data-theme="dark"] .cn-table-wrap tbody tr:hover { background: #2c2734; }
html[data-theme="dark"] .cn-table-wrap th,
html[data-theme="dark"] .cn-table-wrap td,
html[data-theme="dark"] .cn-faq__items,
html[data-theme="dark"] .cn-faq details { border-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .cn-copypaste { background: #18141f; }
html[data-theme="dark"] .cn-copypaste__inner { background: #211b29; border-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .cn-copypaste__copy h2 { color: #f5eff9; }
html[data-theme="dark"] .cn-copypaste__copy > p:last-child { color: #beb5c6; }

@media (max-width: 980px) {
  .cn-nav { top: 64px; }
  .cn-nav__links { display: none; }
  .cn-hero { padding-top: 66px; }
  .cn-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .cn-hero__copy { text-align: center; }
  .cn-eyebrow, .cn-hero__actions, .cn-trust { justify-content: center; }
  .cn-lead { margin-inline: auto; }
  .cn-release-meta { justify-content: center; }
  .cn-hero__visual { width: min(650px, 100%); margin-inline: auto; }
  .cn-features { grid-template-columns: repeat(2, 1fr); }
  .cn-scrap-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cn-real-note { grid-column: span 1; width: 112%; margin-inline: -6%; }
  .cn-old-note-copy { grid-column: span 1; padding: 10px 8px 10px 14px; }
  .cn-use-note { grid-column: span 1; }
  .cn-use-note--dates,
  .cn-use-note--invention { grid-column: span 1; }
  .cn-date-list { grid-template-columns: 1fr; }
  .cn-privacy__compare { grid-template-columns: 1fr; }
  .cn-transform__showcase { grid-template-columns: 1fr; }
  .cn-transform__visual { grid-template-columns: 190px 44px minmax(310px, 1fr); grid-template-rows: 1fr; min-height: 420px; }
  .cn-transform__visual--equation { grid-template-columns: minmax(310px, 1fr) 44px 190px; }
  .cn-transform__arrow { transform: none; }
  .cn-topic-list { grid-template-columns: repeat(2, 1fr); }
  .cn-faq__grid { grid-template-columns: 1fr; gap: 40px; }
  .cn-faq__intro { max-width: 650px; }
  .cn-copypaste__inner { grid-template-columns: auto 1fr; }
  .cn-copypaste__inner > .cn-button { grid-column: 1 / -1; width: min(320px, 100%); margin-inline: auto; }
  .cn-final__inner { grid-template-columns: 88px 1fr; }
  .cn-final img { width: 88px; height: 88px; }
  .cn-final__actions { grid-column: 1 / -1; flex-direction: row; justify-content: center; }
}

@media (max-width: 640px) {
  .cn-shell { width: min(100% - 28px, 1320px); }
  .cn-nav__inner { min-height: 76px; gap: 12px; }
  .cn-brand img { width: 36px; height: 36px; }
  .cn-nav__download { flex-basis: max-content; margin-left: auto; }
  .cn-nav__download > span { font-size: .57rem; }
  .cn-button--small { width: auto; min-height: 38px; padding-inline: 15px; }
  .cn-hero { padding: 48px 0 58px; }
  .cn-hero h1 { font-size: clamp(2.72rem, 13vw, 4rem); }
  .cn-lead { font-size: 1rem; line-height: 1.62; }
  .cn-hero__actions { flex-direction: column; }
  .cn-button { width: 100%; }
  .cn-trust { gap: 8px 14px; font-size: 0.82rem; }
  .cn-release-meta { justify-content: flex-start; }
  .cn-release-meta a,
  .cn-release-meta span { font-size: .64rem; padding-inline: 7px; }
  .cn-hero__visual { min-height: 580px; transform: scale(0.92); transform-origin: center top; margin-bottom: -45px; }
  .cn-note--yellow { left: 1%; }
  .cn-note--mint { right: -10%; }
  .cn-note--blue { right: 0; }
  .cn-app-icon { left: 4%; }
  .cn-section { padding: 76px 0; }
  .cn-features,
  .cn-lesson-gallery,
  .cn-plans { grid-template-columns: 1fr; }
  .cn-feature { min-height: auto; }
  .cn-scrap-board { grid-template-columns: 1fr; gap: 24px; padding: 28px 18px; border-radius: 28px; }
  .cn-real-note { grid-column: auto; width: 112%; margin: -12% -6% -18%; }
  .cn-real-note blockquote { font-size: clamp(1.22rem, 7vw, 1.75rem); }
  .cn-old-note-copy { grid-column: auto; padding: 8px 10px 20px; }
  .cn-old-note-copy h3 { font-size: 2.2rem; }
  .cn-use-note,
  .cn-use-note--dates,
  .cn-use-note--invention { grid-column: auto; min-height: 0; transform: none; }
  .cn-use-note--poem { min-height: 250px; }
  .cn-use-note--invention { grid-template-columns: .8fr 1.2fr; }
  .cn-privacy-card { min-height: 0; padding: 26px 20px; }
  .cn-transform__visual,
  .cn-transform__visual--equation { grid-template-columns: 1fr; grid-template-rows: auto 42px auto; justify-items: center; min-height: 0; padding: 26px 18px; }
  .cn-transform__arrow { transform: rotate(90deg); }
  .cn-mini-note { width: 180px; }
  .cn-page-note { width: min(100%, 340px); }
  .cn-lesson-card { min-height: 400px; transform: none !important; }
  .cn-lesson-card:nth-child(2) { transform: none; }
  .cn-lesson-card img { height: 220px; }
  .cn-topic-list { grid-template-columns: 1fr 1fr; margin-top: 36px; }
  .cn-table-wrap { border-radius: 16px; }
  .cn-table-wrap th,
  .cn-table-wrap td { padding: 13px 11px; }
  .cn-table-wrap tbody th { width: 39%; font-size: .79rem; }
  .cn-table-wrap tbody td { font-size: .78rem; }
  .cn-table-wrap thead th { font-size: .72rem; }
  .cn-table-wrap thead th:last-child { width: 74px; }
  .cn-wide-label { display: none; }
  .cn-short-label { display: inline; }
  .cn-plan--featured { transform: none; }
  .cn-copypaste { padding: 42px 0; }
  .cn-copypaste__inner { grid-template-columns: 1fr; padding: 26px; text-align: center; }
  .cn-copypaste__icons { justify-content: center; }
  .cn-copypaste__icons img { width: 70px; height: 70px; }
  .cn-copypaste__copy > p:last-child { margin-inline: auto; }
  .cn-copypaste__inner > .cn-button { grid-column: auto; }
  .cn-trial-after { grid-template-columns: 1fr; padding: 25px; text-align: center; }
  .cn-trial-after > div:first-child { margin-inline: auto; }
  .cn-faq summary { font-size: .94rem; }
  .cn-faq details p { margin-right: 0; }
  .cn-final__inner { grid-template-columns: 1fr; text-align: center; }
  .cn-final img { margin-inline: auto; }
  .cn-final__actions { grid-column: auto; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .cn-button { transition: none; }
}