/* Theme tokens — swap these to retheme the site */
:root {
  color-scheme: light;
  --on-ink: #FFFFFF;
  --bg: #FAF7EF;
  --dot: #E6DFCC;
  --ink: #26231F;
  --muted: #5E584E;      /* 6.4:1 on --bg */
  --line: #CFC7B2;
  --paper: #FFFDF7;
  --shadow: #E2D9C3;
  --yellow: #F4D96B;
  --blue-soft: #E8F4FD;
  --blue-ink: #0B3A5C;
  --accent: #0E7AC4;     /* Ripply blue, 4.6:1 on --bg */
  --green: #E3E9DA;
  --pink: #F6E0DA;
  --radius: 14px;
  --hand: "Caveat", "Comic Sans MS", cursive;
  --sans: "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; color: var(--ink); font: 400 1.0625rem/1.65 var(--sans);
  background: var(--bg) radial-gradient(var(--dot) 1.2px, transparent 1.4px) 0 0 / 22px 22px;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--on-ink); padding: 8px 14px; z-index: 10; }
.skip:focus { left: 8px; }
.hand { font-family: var(--hand); font-weight: 700; }

/* Nav */
.nav { display: flex; align-items: center; gap: 24px; padding: 20px 0; border-bottom: 2px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font: 800 1.9rem/1 var(--sans); text-decoration: none; letter-spacing: -.03em; }
.brand-mark { width: 44px; height: 44px; }
.dot { color: var(--accent); }
.nav nav { margin-left: auto; }
.nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav nav a { text-decoration: none; color: var(--muted); }
.nav nav a:hover { color: var(--ink); text-decoration: underline wavy var(--accent); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 26px; border-radius: 12px; font-weight: 600; text-decoration: none; border: 2px solid var(--ink); transition: transform .15s, box-shadow .15s; }
.btn-dark { background: var(--ink); color: var(--on-ink); box-shadow: 5px 5px 0 var(--shadow); }
.btn-ghost { background: transparent; border-color: var(--line); }
.btn-light { background: var(--paper); color: var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--shadow); }
.btn-light:hover { box-shadow: 7px 7px 0 var(--ink); }
.btn-sm { min-height: 44px; padding: 8px 20px; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* Kicker + headings */
.kicker { display: inline-block; margin: 0 0 18px; padding: 2px 10px; background: linear-gradient(transparent 45%, var(--yellow) 45%); font-weight: 800; font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; }
h1, h2 { letter-spacing: -.035em; line-height: 1.05; margin: 0 0 20px; }
h1 { font-size: clamp(2.8rem, 6.5vw, 5.2rem); font-weight: 800; }
h1 em { font-weight: 500; color: var(--accent); font-size: 1.12em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 800; }
h3 { margin: 0 0 6px; font-size: 1.2rem; }
.accent { color: var(--accent); font-size: 1.15em; }
.scribble { background: linear-gradient(transparent 62%, var(--yellow) 62%, var(--yellow) 90%, transparent 90%); }

/* Hero */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; padding: 72px 0 96px; }
.lede { font-size: 1.3rem; color: var(--muted); max-width: 34ch; }
.ctas { display: flex; flex-wrap: wrap; gap: 16px; margin: 32px 0 24px; }
.aside { color: var(--muted); font-size: .95rem; }

.card { position: relative; margin: 0; padding: 40px 44px 56px; background: var(--paper); border: 2px solid var(--line); border-radius: 6px; transform: rotate(2deg); box-shadow: 14px 16px 0 var(--shadow); }
.card-eyebrow { margin: 0 0 12px; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.card-title { font-size: 2.6rem; line-height: 1.15; margin: 0 0 12px; }
.card mark { background: linear-gradient(transparent 50%, var(--yellow) 50%); color: inherit; }
.card blockquote { margin: 18px 0 12px; font-size: 1.6rem; line-height: 1.3; }
.card p.hand { font-size: 1.5rem; margin: 16px 0 8px; }
.sketch { border: 0; height: 2px; background: var(--line); transform: rotate(-.6deg); margin: 16px 0; }
.chip { display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: .9rem; }
.chip-green { background: var(--green); }
.chip-pink { background: var(--pink); }
.chip-yellow { background: var(--yellow); font-weight: 600; }
.buddy, .char { color: #2B2620; overflow: visible; }
:root[data-theme="dark"] .buddy, :root[data-theme="dark"] .char { color: #E8E4DA; }
.buddy { position: absolute; width: 170px; height: 170px; left: -70px; bottom: -70px; transform: rotate(-8deg); animation: bob 3.5s ease-in-out infinite; }
@keyframes bob { 50% { transform: rotate(-3deg) translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .buddy { animation: none; } }

/* Sections */
.section { padding: 80px 0; border-top: 2px dashed var(--line); }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; padding: 0; margin: 40px 0 0; }
.tile { background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius); padding: 28px 24px; box-shadow: 6px 6px 0 var(--shadow); }
.tile p { margin: 0; color: var(--muted); }
.tilt-l { transform: rotate(-1deg); }
.tilt-r { transform: rotate(1deg); }
.ico { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 50% 45% 55% 48%; font-size: 1.5rem; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; list-style: none; padding: 0; margin: 40px 0 0; }
.steps p { color: var(--muted); margin: 0; }
.num { display: block; font-size: 4rem; line-height: 1; color: var(--accent); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.checks { list-style: none; padding: 0; margin: 0; font-size: 1.15rem; }
.checks li { padding: 12px 0 12px 40px; position: relative; border-bottom: 2px dashed var(--line); }
.checks li::before { content: "✓"; position: absolute; left: 4px; font: 700 1.6rem/1 var(--hand); color: var(--accent); top: 12px; }

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); gap: 32px; margin-top: 40px; }
.plan ul { padding-left: 20px; color: var(--muted); margin: 8px 0 24px; }
.price { font: 800 2.8rem/1 var(--sans); margin: 8px 0; }
.price.hand { font-family: var(--hand); color: var(--accent); }
.plan { position: relative; }
.plan > .chip { position: absolute; top: -14px; right: 20px; transform: rotate(4deg); }
.pricing-controls { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 28px; }
.save-tag { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--yellow); color: #26231F; font-size: .78rem; font-weight: 700; }
.consent { max-width: 760px; margin-top: 32px; padding: 18px 22px; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--paper); }
.consent p { margin: 0; color: var(--muted); font-size: .95rem; }
.consent p + p { margin-top: 8px; }
.consent a { color: var(--accent); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.legal table { border-collapse: collapse; width: 100%; margin: 12px 0 20px; font-size: .95rem; }
.legal th, .legal td { text-align: left; padding: 8px 10px; border-bottom: 2px dashed var(--line); vertical-align: top; color: var(--muted); }
.legal th { color: var(--ink); }
.legal .lead { font-size: 1.15rem; color: var(--ink); }
.legal .contact-list { list-style: none; padding: 0; }
.legal .contact-list li { padding: 10px 0; border-bottom: 2px dashed var(--line); }

.faq { max-width: 760px; margin-top: 32px; }
.faq details { border-bottom: 2px dashed var(--line); padding: 6px 0; }
.faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; font-size: 1.15rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 700 1.8rem/1 var(--hand); color: var(--accent); }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 0 0 16px; color: var(--muted); }

.cta-band { margin-block: 40px 64px; padding: 56px 40px; background: var(--ink); color: var(--on-ink); border-radius: 24px; text-align: center; transform: rotate(-.5deg); }
.cta-band .hand { color: var(--yellow); font-size: 1.2em; }

.foot { display: flex; justify-content: space-between; padding: 24px 0 40px; border-top: 2px solid var(--line); color: var(--muted); }

/* Playground: draggable stickies + dotted arrows */
.browser-frame { margin-top: 14px; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 10px 12px 0 var(--shadow); overflow: hidden; }
.frame-bar { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-bottom: 2px solid var(--line); background: #F1ECE0; }
.lights { display: flex; gap: 6px; }
.lights i { width: 11px; height: 11px; border-radius: 50%; background: #E9603A; }
.lights i:nth-child(2) { background: #F6CF3F; } .lights i:nth-child(3) { background: #7CC27A; }
.url { flex: 1; max-width: 420px; padding: 4px 14px; border-radius: 999px; background: var(--paper); font-size: .85rem; color: var(--muted); }
.board { position: relative; min-height: 560px; padding: 32px; touch-action: pan-y; }
.scene-toggle { display: inline-flex; gap: 4px; padding: 4px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); }
.scene-toggle button { min-height: 40px; padding: 6px 16px; border: 0; border-radius: 999px; background: none; font: 600 .95rem var(--sans); color: var(--ink); cursor: pointer; }
.scene-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }

.scene { max-width: 560px; font-size: 1.02rem; }
.scene mark { background: linear-gradient(transparent 45%, var(--yellow) 45%); color: var(--ink); border-radius: 2px; }
.scene mark.blue { background: linear-gradient(transparent 45%, #BFE0F7 45%); }
.scene p { color: var(--muted); }
.scene-docs { display: grid; grid-template-columns: 150px 1fr; gap: 24px; max-width: 640px; }
.docs-side { border-right: 2px solid var(--line); padding-right: 12px; font-size: .88rem; }
.docs-side p { margin: 0 0 6px; padding: 6px 10px; border-radius: 8px; }
.docs-side .on { background: var(--blue-soft); color: var(--ink); font-weight: 600; }
.docs-side .h { font-weight: 800; color: var(--ink); text-transform: uppercase; font-size: .75rem; letter-spacing: .12em; }
/* AI chat demo (dark, modelled on common chat apps) */
.board[data-scene="chat"] { padding: 0; background: var(--c-bg); --c-bg:#212121; --c-rail:#171717; --c-line:#2a2a2a; --c-text:#ECECEC; --c-muted:#B4B4B4; --c-th:#3a3a3a; --c-td:#2f2f2f; --c-comp:#303030; --c-btn:#fff; --c-btn-ink:#111; --c-arrow:#F4D96B; }
.board[data-scene="chat"][data-page-theme="light"] { --c-bg:#fff; --c-rail:#F9F9F9; --c-line:#E5E5E5; --c-text:#0D0D0D; --c-muted:#5D5D5D; --c-th:#D9D9D9; --c-td:#ECECEC; --c-comp:#F4F4F4; --c-btn:#0D0D0D; --c-btn-ink:#fff; --c-arrow:#0B3A5C; }
.scene-chat { display: flex; max-width: none; min-height: 600px; color: var(--c-text); font-size: .98rem; }
.scene-chat p, .scene-chat td { color: var(--c-text); }
.scene-chat mark { color: #111; }
.rail { flex: none; display: flex; flex-direction: column; align-items: center; gap: 22px; width: 56px; padding: 18px 0; background: var(--c-rail); border-right: 1px solid var(--c-line); color: var(--c-muted); }
.rail svg { width: 20px; height: 20px; }
.rail .rail-logo { width: 26px; height: 26px; }
.rail-avatar { margin-top: auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #5d5d5d; font-size: .65rem; color: #fff; }
.chat-col { flex: 1; display: flex; flex-direction: column; padding: 24px 40px 14px; min-width: 0; }
.chat-scroll { flex: 1; max-width: 600px; }
.scene-chat .item { display: flex; gap: 10px; margin: 0 0 14px; line-height: 1.55; }
.scene-chat .item strong { font-weight: 600; }
.ck { flex: none; width: 18px; height: 18px; margin-top: 3px; color: #2FBF71; }
.scene-chat h4 { margin: 22px 0 8px; font-size: 1.1rem; font-weight: 600; }
.scene-chat table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 6px 0 16px; }
.scene-chat th { text-align: left; font-weight: 600; padding: 6px 8px 8px 0; border-bottom: 1px solid var(--c-th); }
.scene-chat td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--c-td); }
.scene-chat .r { text-align: right; white-space: nowrap; }
.chat-actions { display: flex; gap: 16px; align-items: center; color: var(--c-muted); }
.chat-actions svg { width: 18px; height: 18px; }
.composer { display: flex; align-items: center; gap: 14px; max-width: 600px; margin-top: 18px; padding: 10px 12px 10px 18px; border-radius: 999px; background: var(--c-comp); color: var(--c-muted); }
.composer .ph { flex: 1; }
.composer .plus { font-size: 1.3rem; }
.composer .mic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-btn); color: var(--c-btn-ink); font-size: .6rem; }
.disclaimer { max-width: 600px; margin: 8px 0 0; text-align: center; font-size: .75rem; color: var(--c-muted) !important; }

.docs-main h3 { font: 700 1.4rem ui-monospace, Menlo, monospace; }
.docs-main pre { padding: 14px 16px; background: #2B2620; color: #F4EEDF; border-radius: 10px; font-size: .85rem; overflow-x: auto; }
.docs-main code { font-family: ui-monospace, Menlo, monospace; }
.board-hint { color: var(--muted); margin: 0 0 4px; }
.arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.arrows path { fill: none; stroke: var(--blue-ink); stroke-width: 2.2; stroke-dasharray: 2 7; stroke-linecap: round; }
.sticky { position: absolute; width: 220px; padding: 22px 16px 40px 18px; cursor: grab; transform: rotate(var(--r, 0deg)); border-radius: 4px; box-shadow: 4px 6px 0 rgba(38,35,31,.18); z-index: 1; color: #1e293b; }
.sticky textarea { display: block; width: 100%; min-height: 80px; resize: none; overflow: hidden; scrollbar-width: none; border: 0; background: transparent; font: 700 1.35rem/1.2 var(--hand); color: inherit; }
.sticky textarea:focus-visible { outline: 2px dashed var(--accent); outline-offset: 2px; }
.sticky.dragging { transform: rotate(0) scale(1.03) !important; z-index: 3; }

.toolbar { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin-top: 28px; }
.swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; border: 0; margin: 0; padding: 0; }
.swatches legend { float: left; margin-right: 8px; padding: 0; font-weight: 600; font-size: .9rem; }
.swatch { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border: 2px solid transparent; border-radius: 10px; font-size: .8rem; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; }
.swatch:has(input:checked) { border-color: var(--accent); background: var(--blue-soft); }
.swatch:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.mini { position: relative; display: block; width: 30px; height: 26px; }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.count { margin: 0; color: var(--muted); font-size: .95rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* Sticky themes — mirrors src/lib/sticky/themes */
.t-folded-blue { background: linear-gradient(225deg, var(--bg) 0 14px, #93BCE3 14px 20px, transparent 20px), #B5D4F0; color: #2a3850; }
.t-washi-ruled { background: repeating-linear-gradient(transparent 0 27px, rgba(74,114,212,.25) 27px 28px), #BFDBFE; border-radius: 12px; }
.t-washi-ruled::before { content: ""; position: absolute; top: -8px; left: 50%; width: 64px; height: 18px; margin-left: -32px; background: rgba(74,114,212,.75); transform: rotate(-3deg); z-index: 2; }
.t-torn-paper { background: radial-gradient(rgba(142,121,104,.4) 1px, transparent 1.2px) 0 0 / 14px 14px, #FDFAF2; clip-path: polygon(0 3%, 18% 0, 40% 4%, 62% 0, 84% 3%, 100% 1%, 100% 97%, 78% 100%, 50% 96%, 22% 100%, 0 97%); }
.t-grid-paper { background: linear-gradient(225deg, transparent 0 16px, #C4B5FD 16px 23px, transparent 23px), linear-gradient(to right, rgba(138,103,199,.25) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(rgba(138,103,199,.25) 1px, transparent 1px) 0 0 / 14px 14px, #E9D8FD; border-radius: 10px; }
.mini.t-washi-ruled::before { width: 26px; height: 8px; margin-left: -13px; top: -4px; }
.mini.t-torn-paper, .sticky.t-torn-paper { filter: drop-shadow(0 2px 2px rgba(80,60,40,.35)); }

.shelf { display: flex; gap: 40px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; list-style: none; margin: 40px 0 0; padding: 24px max(16px, calc((100vw - 1160px) / 2)) 32px; }
.shelf li { flex: 0 0 260px; scroll-snap-align: start; }
.shelf li:nth-child(odd) .sheet { transform: rotate(-2deg); }
.shelf li:nth-child(even) .sheet { transform: rotate(2deg); }
.sheet { position: relative; height: 260px; padding: 48px 26px; box-shadow: 8px 10px 0 var(--shadow); }
.sheet.t-torn-paper { box-shadow: none; filter: drop-shadow(8px 10px 0 var(--shadow)); }
.sheet p { margin: 0; font-size: 1.7rem; line-height: 1.2; color: #1e293b; }
.shelf h3 { margin-top: 18px; text-align: center; }

/* Doodles & characters */
.hero { position: relative; }
.doodle { position: absolute; pointer-events: none; }
.d1 { width: 40px; height: 40px; top: 70px; left: 46%; }
.d2 { width: 34px; height: 34px; top: 40px; right: 2%; transform: rotate(14deg); }
.d3 { width: 56px; height: 56px; bottom: 30px; left: 44%; }
.bubble { position: absolute; display: inline-block; margin: 0; padding: 8px 18px; font-size: 1.4rem; line-height: 1.1; border: 2.5px solid var(--ink); border-radius: 18px; color: var(--ink); letter-spacing: 0; }
.bubble::after { content: ""; position: absolute; left: 22px; bottom: -11px; width: 16px; height: 16px; background: inherit; border: inherit; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) skew(10deg,10deg); }
.bubble-pink { background: #FBD9DF; right: -18px; top: -26px; transform: rotate(5deg); }
.bubble-blue { position: relative; vertical-align: middle; background: #BFE0F7; font-size: 1.3rem; transform: rotate(-4deg); margin-left: 10px; }
.has-char { position: relative; }
.char { position: absolute; pointer-events: none; }
.char-right { width: 130px; height: 160px; right: 0; top: 56px; }
.cta-band { position: relative; }
.cta-char { width: 110px; height: 130px; left: 4%; bottom: -24px; transform: rotate(-8deg); }

.browsers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 20px 0 0; max-width: 520px; }
.browser { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 96px; padding: 10px 6px; border: 2.5px solid #D98A6E; border-radius: 12px; background: var(--paper); text-decoration: none; font-weight: 600; font-size: .9rem; text-align: center; transform: rotate(-.6deg); transition: transform .15s; }
.browsers li:nth-child(even) .browser { transform: rotate(.7deg); }
.browser img { width: 40px; height: 40px; }
.browser.soon img { filter: grayscale(.4); opacity: .8; }
.browser small { font-weight: 400; font-size: .72rem; color: var(--muted); line-height: 1.2; }
a.browser:hover { transform: translateY(-3px) rotate(-1deg); background: #FFF6D6; }
.browser.soon { border-style: dashed; border-color: var(--line); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .browser { transition: none; } }

/* Responsive */
@media (max-width: 960px) {
  .hero, .split { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .card { margin: 0 12px 0 40px; }
}
@media (max-width: 720px) {
  .nav nav { display: none; }
  .nav .btn-sm { margin-left: auto; }
  .hero { padding: 40px 0 72px; gap: 64px; }
  .grid, .steps, .plans { grid-template-columns: 1fr; }
  .card { padding: 28px 24px 48px; margin: 0 8px 0 24px; }
  .card-title { font-size: 2rem; }
  .buddy { width: 110px; height: 110px; left: -36px; bottom: -50px; }
  .bubble-pink { right: -4px; top: -30px; font-size: 1.15rem; }
  .char-right { width: 80px; height: 100px; top: 40px; }
  .cta-char { display: none; }
  .d1, .d3 { display: none; }
  .browsers { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 56px 0; }
  .cta-band { padding: 40px 20px; }
  .board { padding: 20px 16px; min-height: 760px; }
  .scene-chat, .scene-docs { grid-template-columns: 1fr; }
  .docs-side { display: none; }
  .scene-toggle button { padding: 6px 10px; font-size: .85rem; }
  .sticky { width: 170px; }
}

/* Legal pages */
.legal { max-width: 760px; padding: 56px 0 80px; }
.legal h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.legal h2 { font-size: 1.5rem; margin: 40px 0 10px; letter-spacing: -.02em; }
.legal p, .legal li { color: var(--muted); }
.legal strong { color: var(--ink); }
.legal a { color: var(--accent); }
.legal code { font-size: .9em; background: var(--blue-soft); padding: 1px 6px; border-radius: 4px; }
.updated { font-size: .95rem; }
.board[data-scene="chat"] .arrows path { stroke: var(--c-arrow); }
.scene-chat mark { background: #F4D96B; padding: 0 2px; }
.scene-chat mark.blue { background: #BFE0F7; }
.chat-top { display: flex; justify-content: flex-end; margin: -8px 0 8px; }
.page-theme { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 14px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-comp); color: var(--c-text); font: 500 .85rem var(--sans); cursor: pointer; }
.page-theme:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.chat-col { align-items: center; }
.chat-top { align-self: stretch; }
.chat-scroll, .composer, .disclaimer { width: 100%; max-width: 600px; margin-inline: auto; }

/* Blog demo (modelled on common long-form reading sites) */
.board[data-scene="blog"] { padding: 0; background: #fff; }
.scene-blog { max-width: none; min-height: 640px; color: #242424; }
.scene-blog p { color: #242424; }
.scene-blog svg { width: 20px; height: 20px; }
.m-top { display: flex; align-items: center; gap: 18px; padding: 12px 24px; border-bottom: 1px solid #F2F2F2; color: #6B6B6B; font-size: .9rem; }
.m-logo { font: 700 1.6rem/1 Georgia, "Times New Roman", serif; color: #000; letter-spacing: -.03em; }
.m-search { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #F9F9F9; min-width: 200px; }
.m-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.m-write { display: flex; align-items: center; gap: 6px; }
.m-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #C9DCEB; color: #242424; font-size: .7rem; font-weight: 600; }
.m-av.big { width: 44px; height: 44px; background: #F3D5C4; font-size: .85rem; }
.m-post { max-width: 680px; margin: 0 auto; padding: 40px 24px 48px; }
.m-post h3 { margin: 0 0 8px; font: 700 2.5rem/1.15 "Helvetica Neue", Arial, sans-serif; letter-spacing: -.02em; color: #242424; }
.m-sub { margin: 0 0 24px; font-size: 1.35rem; color: #6B6B6B !important; }
.m-author { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.m-author p { margin: 0; font-size: .95rem; }
.m-follow { color: #1A8917; }
.m-meta { color: #6B6B6B !important; font-size: .85rem !important; }
.m-bar { display: flex; align-items: center; gap: 22px; padding: 10px 6px; margin-bottom: 32px; border-block: 1px solid #F2F2F2; color: #6B6B6B; font-size: .85rem; }
.m-bar span { display: flex; align-items: center; gap: 6px; }
.m-bar .sp { flex: 1; }
.m-post > p { margin: 0 0 26px; font: 400 1.25rem/1.6 Georgia, "Times New Roman", serif; letter-spacing: -.003em; }
.m-drop::first-letter { float: left; font-size: 4.2em; line-height: .8; padding: 6px 8px 0 0; font-weight: 700; }
.tools.below { margin-top: 36px; }
.scene-toggle button { display: inline-flex; align-items: center; gap: 8px; }
.tg-ic { width: 18px; height: 18px; flex: none; }

/* Tighter, real-world spacing inside the demo pages */
.scene { line-height: 1.5; }
.scene-chat { font-size: .94rem; }
.chat-col { padding-top: 16px; }
.scene-chat .item { margin-bottom: 8px; line-height: 1.5; }
.scene-chat h4 { margin: 14px 0 4px; font-size: 1.05rem; }
.scene-chat p { margin: 0 0 8px; }
.scene-chat table { margin: 4px 0 10px; font-size: .86rem; }
.scene-chat th { padding: 4px 8px 6px 0; }
.scene-chat td { padding: 6px 8px 6px 0; }
.composer { margin-top: 12px; padding: 8px 10px 8px 16px; }
.m-post { padding-top: 28px; }
.m-post h3 { font-size: 2.1rem; margin-bottom: 4px; }
.m-sub { margin-bottom: 16px; font-size: 1.15rem; }
.m-author { margin-bottom: 14px; }
.m-bar { margin-bottom: 20px; padding: 6px; }
.m-post > p { margin-bottom: 16px; font-size: 1.12rem; line-height: 1.55; }
.board[data-scene="docs"] { padding: 20px 24px; }
.scene-docs { font-size: .94rem; }
.docs-main h3 { margin: 0 0 8px; font-size: 1.25rem; }
.docs-main p { margin: 0 0 10px; }
.docs-main pre { margin: 6px 0 12px; padding: 10px 14px; line-height: 1.45; }
.docs-side p { margin-bottom: 2px; padding: 4px 10px; }

/* AI chat: match a real chat app's reading rhythm */
.scene-chat { font-size: 1rem; }
.scene-chat .chat-scroll, .scene-chat .composer, .scene-chat .disclaimer { max-width: 680px; }
.scene-chat p { margin: 0 0 14px; line-height: 1.75; }
.scene-chat h4 { margin: 26px 0 14px; font-size: 1.2rem; font-weight: 600; }
.scene-chat .item { gap: 14px; margin-bottom: 14px; line-height: 1.75; }
.scene-chat .item strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.scene-chat .item .d { display: block; }
.ck { margin-top: 5px; }
.scene-chat table { font-size: .92rem; margin: 10px 0 20px; }
.scene-chat th { padding: 8px 8px 12px 0; }
.scene-chat td { padding: 12px 8px 12px 0; }
.composer { margin-top: 18px; padding: 12px 12px 12px 20px; }

/* Scale the chat demo down like a screenshot of a laptop screen */
.scene-chat { font-size: .8rem; }
.scene-chat .chat-scroll, .scene-chat .composer, .scene-chat .disclaimer { max-width: 44em; }
.scene-chat p { margin: 0 0 .8em; }
.scene-chat h4 { margin: 1.4em 0 .8em; font-size: 1.15em; }
.scene-chat .item { gap: .9em; margin-bottom: .8em; }
.scene-chat .item strong { font-size: 1em; margin-bottom: .15em; }
.ck { width: 1.1em; height: 1.1em; margin-top: .35em; }
.scene-chat table { font-size: .92em; margin: .6em 0 1.2em; }
.scene-chat th { padding: .5em .5em .7em 0; }
.scene-chat td { padding: .7em .5em .7em 0; }
.chat-col { padding: 1.2em 2.5em .9em; }
.composer { margin-top: 1em; padding: .7em .7em .7em 1.2em; font-size: 1em; }
.composer .mic { width: 2.2em; height: 2.2em; }
.page-theme { font-size: .78rem; min-height: 30px; }
.scene-chat { min-height: 0; }
.scene-chat { font-size: .74rem; }
.scene-chat p, .scene-chat .item { line-height: 1.65; }

/* Note card controls, mirroring the extension's sticky surface */
.sticky:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sticky[data-locked="1"] { cursor: default; }

/* Selection bar: pin + add, as in SelectionAffordance.ts */
.sel-bar { position: absolute; z-index: 5; display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.sel-bar[hidden] { display: none; }
.sel-bar button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; color: #0B3A5C; cursor: pointer; }
.sel-bar button:hover { background: rgba(11,58,92,.08); }
.sel-bar button:disabled { opacity: .35; cursor: not-allowed; }
.sel-bar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sel-bar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.board[data-page-theme="dark"] .sel-bar { background: #2f2f2f; }
.board[data-page-theme="dark"] .sel-bar button { color: #f4f4f4; }

/* Pricing */
.billing { display: inline-flex; gap: 4px; margin-top: 8px; padding: 4px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); }
.billing button { min-height: 40px; padding: 6px 18px; border: 0; border-radius: 999px; background: none; font: 600 .95rem var(--sans); color: var(--ink); cursor: pointer; }
.billing button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.billing .save { margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: .75rem; }
.per { font-size: 1rem; font-weight: 600; color: var(--muted); margin-left: 4px; }
.plan-note { margin: 0 0 8px !important; font-size: .9rem; }
.plans-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1040px; }
.plan-best { border-width: 3px; box-shadow: 8px 8px 0 var(--accent); }
.plan-best .chip { background: var(--accent); color: #fff; }
.plan .btn { justify-content: center; }
@media (max-width: 960px) { .plans-3 { gap: 16px; } .plans-3 .plan { padding: 24px 18px; } .plans-3 .price { font-size: 2.3rem; } }
@media (max-width: 720px) { .plans-3 { grid-template-columns: 1fr; gap: 28px; max-width: 420px; margin-inline: auto; } .pricing-controls .scene-toggle { width: 100%; } .pricing-controls .scene-toggle button { flex: 1; } }

/* Slim, on-theme scrollbars */
html { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.board[data-page-theme="dark"] * { scrollbar-color: #4a4a4a transparent; }

/* Light / dark for every demo page */
.page-theme { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 12px; border: 1px solid var(--pt-line, #E5E5E5); border-radius: 999px; background: var(--pt-bg, #F4F4F4); color: var(--pt-ink, #242424); font: 500 .78rem var(--sans); cursor: pointer; }
.board[data-scene="chat"] .page-theme { --pt-line: var(--c-line); --pt-bg: var(--c-comp); --pt-ink: var(--c-text); }
.board[data-page-theme="dark"] .page-theme { --pt-line: #3a3a3a; --pt-bg: #2a2a2a; --pt-ink: #ECECEC; }

/* Blog: dark */
.board[data-scene="blog"][data-page-theme="dark"] { background: #121212; }
.board[data-scene="blog"][data-page-theme="dark"] .scene-blog, .board[data-scene="blog"][data-page-theme="dark"] .scene-blog p, .board[data-scene="blog"][data-page-theme="dark"] .m-post h3 { color: #E6E6E6; }
.board[data-scene="blog"][data-page-theme="dark"] .m-logo { color: #fff; }
.board[data-scene="blog"][data-page-theme="dark"] .m-top, .board[data-scene="blog"][data-page-theme="dark"] .m-bar { border-color: #2A2A2A; color: #A8A8A8; }
.board[data-scene="blog"][data-page-theme="dark"] .m-search { background: #1E1E1E; }
.board[data-scene="blog"][data-page-theme="dark"] .m-sub, .board[data-scene="blog"][data-page-theme="dark"] .m-meta { color: #A8A8A8 !important; }
.board[data-scene="blog"][data-page-theme="dark"] .m-follow { color: #4CC764; }

/* Docs: light + dark */
.docs-top { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.board[data-scene="docs"] { background: #fff; }
.board[data-scene="docs"][data-page-theme="dark"] { background: #0F172A; }
.board[data-scene="docs"][data-page-theme="dark"] .scene-docs, .board[data-scene="docs"][data-page-theme="dark"] .scene-docs p, .board[data-scene="docs"][data-page-theme="dark"] .docs-main h3 { color: #E2E8F0; }
.board[data-scene="docs"][data-page-theme="dark"] .docs-side { border-color: #1E293B; }
.board[data-scene="docs"][data-page-theme="dark"] .docs-side .h { color: #F8FAFC; }
.board[data-scene="docs"][data-page-theme="dark"] .docs-side .on { background: #1E3A5F; color: #F8FAFC; }
.board[data-scene="docs"][data-page-theme="dark"] .docs-main pre { background: #020617; border: 1px solid #1E293B; }
.board[data-scene="docs"][data-page-theme="dark"] code { color: #E2E8F0; }

/* Dark theme: opt-in from the nav toggle; warm neutrals like claude.ai, Ripply blue accent */
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #262624;
    --dot: #34332F;
    --ink: #FAF9F5;
    --on-ink: #1F1E1D;
    --muted: #C2C0B6;      /* 8.9:1 on --bg */
    --line: #3E3D39;
    --paper: #30302E;
    --shadow: #1A1918;
    --blue-soft: #333A3F;
    --blue-ink: #D6EAFA;
    --accent: #5AB0F0;     /* 6.4:1 on --bg */
    --green: #2E3329;
    --pink: #3A2E2C;
  }
  :root[data-theme="dark"] .kicker, :root[data-theme="dark"] .chip-yellow, :root[data-theme="dark"] .bubble, :root[data-theme="dark"] .ico { color: #1F1E1D; }
  :root[data-theme="dark"] .scribble { background: linear-gradient(transparent 62%, rgba(244,217,107,.38) 62%, rgba(244,217,107,.38) 90%, transparent 90%); }
  :root[data-theme="dark"] .plan-best .chip { color: #0B2238; }
  :root[data-theme="dark"] .kicker { background: var(--yellow); }
  :root[data-theme="dark"] .card mark, :root[data-theme="dark"] .scene mark { background: var(--yellow); color: #1F1E1D; padding: 0 3px; border-radius: 3px; }
  :root[data-theme="dark"] .tile, :root[data-theme="dark"] .browser, :root[data-theme="dark"] .card, :root[data-theme="dark"] .btn-light { color: var(--ink); }
  :root[data-theme="dark"] .browser:hover { background: #3A3936; }
  :root[data-theme="dark"] .cta-band .hand { color: #8A6A00; }
  :root[data-theme="dark"] .frame-bar { background: #1F1E1D; }
  :root[data-theme="dark"] .url { background: var(--bg); }
  :root[data-theme="dark"] .sticky, :root[data-theme="dark"] .sheet p { color: #1e293b; }
  :root[data-theme="dark"] .sel-bar { background: #2f2f2f; }
  :root[data-theme="dark"] .sel-bar button { color: #f4f4f4; }
  :root[data-theme="dark"] .brand-mark { filter: none; }


/* Docs and blog: compact, real-site text size and rhythm */
.board[data-scene="docs"] { padding: 14px 18px; }
.scene-docs { grid-template-columns: 140px 1fr; gap: 18px; max-width: 680px; font-size: .8rem; line-height: 1.5; }
.docs-side { font-size: .74rem; padding-right: 8px; }
.docs-side p { margin: 0; padding: 3px 8px; line-height: 1.35; }
.docs-side .h { font-size: .66rem; margin-top: 6px; }
.docs-main h3 { margin: 0 0 6px; font: 500 1.1rem/1.25 system-ui, sans-serif; }
.docs-main p { margin: 0 0 7px; }
.docs-main pre { margin: 4px 0 8px; padding: 8px 12px; font-size: .74rem; line-height: 1.4; }
.m-top { padding: 8px 18px; font-size: .78rem; gap: 14px; }
.m-logo { font-size: 1.3rem; }
.m-search { padding: 6px 12px; min-width: 160px; }
.m-av { width: 26px; height: 26px; }
.m-av.big { width: 34px; height: 34px; font-size: .72rem; }
.m-post { max-width: 600px; padding: 22px 20px 32px; }
.m-post h3 { font-size: 1.65rem; margin-bottom: 4px; }
.m-sub { margin-bottom: 12px; font-size: .98rem; }
.m-author { margin-bottom: 10px; gap: 10px; }
.m-author p { font-size: .8rem; }
.m-meta { font-size: .74rem !important; }
.m-bar { margin-bottom: 14px; padding: 4px; font-size: .76rem; gap: 16px; }
.m-post > p { margin-bottom: 12px; font-size: .98rem; line-height: 1.55; }
@media (max-width: 720px) { .scene-docs { grid-template-columns: 1fr; } }

/* Highlight styles showcase */
.hl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.hl-card { min-width: 0; padding: 20px 22px; background: var(--paper); border: 2px solid var(--line); border-radius: 18px; }
.hl-card h3 { margin: 0 0 12px; font-size: 1.05rem; }
.hl-card p { margin: 0 0 12px; font-size: 1.02rem; color: var(--ink); }
.hl-example { grid-column: span 2; }
.hl-example p { line-height: 2.1; }
.hs { --hc: #FFE36E; position: relative; padding: 1px 6px; color: #1d1d1d; }
.hs-marker { background: linear-gradient(100deg, transparent 2%, #FFE36E 4%, #FFE36E 94%, transparent 97%); border-radius: 40% 10% 35% 12% / 60% 30% 70% 40%; }
.hs-brush { background: #E4D4FB; border-radius: 12px 40px 16px 36px / 30px 12px 32px 14px; }
.hs-paint { background: #FFC2D9; border-radius: 6px 30px 8px 24px / 18px 6px 22px 8px; transform: rotate(-1deg); display: inline-block; }
.hs-wavy, .hs-dotted, .hs-dashed { padding: 0; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.hs-wavy { text-decoration-style: wavy; }
.hs-dotted { text-decoration-style: dotted; text-decoration-thickness: 3px; }
.hs-dashed { text-decoration-style: dashed; }
.hs-outline { padding: 2px 8px; border: 2px solid var(--accent); border-radius: 8px; color: var(--ink); }
.hs-bar { padding: 2px 10px; border-left: 4px solid var(--accent); background: #DCEEFB; }
.hs-pill { padding: 3px 12px; border-radius: 999px; background: #CFE8FA; }
.hs-circle { padding: 4px 12px; border: 2.5px solid #E8B800; border-radius: 50% 46% 52% 48% / 60% 55% 62% 52%; color: var(--ink); }
.hs-bracket { padding: 0 8px; color: var(--ink); border-inline: 3px solid var(--accent); border-radius: 4px; }
.hs-arrow { display: inline-block; padding: 2px 22px 2px 12px; background: #FFE36E; clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%, 6% 50%); font-weight: 700; }
.arrow-title { margin: 40px 0 16px; font-size: 1.5rem; }
.arrow-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.arrow-row li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; background: var(--paper); border: 2px solid var(--line); border-radius: 16px; font-weight: 600; font-size: .9rem; }
.arrow-row svg { width: 100%; max-width: 150px; height: 48px; }
.arrow-row path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) { .arrow-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
  .hl-grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin: 24px -16px 0; padding: 4px 16px 14px; }
  .hl-grid::-webkit-scrollbar { height: 6px; }
  .hl-grid::-webkit-scrollbar-thumb { border: 0; }
  .hl-grid:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 12px; }
  .hl-card { flex: 0 0 min(78%, 280px); scroll-snap-align: start; padding: 16px 18px; }
  .hl-card p { margin-bottom: 10px; font-size: .96rem; }
  .hl-card p:last-child { margin-bottom: 0; }
  .hl-example { flex-basis: min(86%, 320px); }
  .hl-example p { line-height: 1.9; }
  .arrow-title { margin: 32px 0 12px; font-size: 1.3rem; }
  .arrow-row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .arrow-row li { gap: 4px; padding: 8px 4px; border-radius: 12px; font-size: .8rem; }
  .arrow-row svg { height: 32px; }
  .grid { gap: 14px; }
  .grid .tile { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 16px 18px; box-shadow: 4px 4px 0 var(--shadow); }
  .grid .tile .ico { grid-row: span 2; width: 44px; height: 44px; margin: 0; }
  .grid .tile h3 { margin: 0 0 4px; font-size: 1.05rem; }
  .grid .tile p { font-size: .94rem; }
}

.theme-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; }
.theme-btn svg { width: 20px; height: 20px; }
.theme-btn .moon, :root[data-theme="dark"] .theme-btn .sun { display: none; }
:root[data-theme="dark"] .theme-btn .moon { display: block; }
@media (max-width: 720px) { .nav .theme-btn { margin-left: auto; } .nav .btn-sm { margin-left: 0; } }

/* Strip themes (from the extension's strips theme) with matching notes */
.strips { display: flex; gap: 22px; overflow-x: auto; padding: 14px max(20px, calc((100vw - 1160px) / 2)) 22px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; scroll-snap-type: x proximity; }
.strips::-webkit-scrollbar { height: 6px; }
.strips::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.strips::-webkit-scrollbar-track { background: transparent; }
.strips li { flex: none; width: 240px; display: flex; flex-direction: column; gap: 18px; scroll-snap-align: start; }
.strip, .pnote { position: relative; isolation: isolate; color: #2b2a27; filter: drop-shadow(0 6px 9px rgba(60,40,20,.2)) drop-shadow(0 1px 1.5px rgba(0,0,0,.08)); }
.strip { display: flex; align-items: center; min-height: 48px; padding: 8px 14px 8px var(--st-pad, 50px); font-weight: 600; font-size: .95rem; }
.pnote { height: 200px; padding: 52px 20px 18px; }
.pnote p { margin: 0; font-size: 1.5rem; line-height: 1.2; color: #2b2a27; }
.st-paper { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.st-paper::before, .st-paper::after { content: ""; position: absolute; inset: 0; clip-path: var(--st-clip, none); border-radius: var(--st-radius, 0); }
.pnote .st-paper::before, .pnote .st-paper::after { clip-path: none; border-radius: 4px; }
.st-paper::before { background: var(--st-paper); }
.st-paper::after { background: radial-gradient(rgba(255,255,255,.2) .8px, transparent 1.1px) 0 0/9px 11px, radial-gradient(rgba(90,70,30,.04) .8px, transparent 1.1px) 0 0/13px 7px; }
.st-ic { position: absolute; width: 22px; height: 22px; fill: none; stroke: var(--st-ic); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.strip .st-ic { left: calc(var(--st-pad, 50px) - 36px); top: 50%; margin-top: -11px; }
.pnote .st-ic { left: 20px; top: 18px; }
.sp-st-night { color: #1c2757; } .sp-st-night .st-ic .fill { fill: #f8e58f; } .sp-st-night .st-paper::after { opacity: .45; }
.sp-st-yellow{--st-paper:linear-gradient(100deg,rgba(255,255,255,.22),transparent 35%,rgba(255,255,255,.12) 55%,rgba(190,150,0,.1)),#f8e07c;--st-clip:polygon(3px 0%,calc(100% - 3px) 0%,calc(100% - 0px) 12.5%,calc(100% - 6px) 25%,calc(100% - 0px) 37.5%,calc(100% - 6px) 50%,calc(100% - 0px) 62.5%,calc(100% - 6px) 75%,calc(100% - 0px) 87.5%,calc(100% - 3px) 100%,3px 100%,0px 87.5%,6px 75%,0px 62.5%,6px 50%,0px 37.5%,6px 25%,0px 12.5%);--st-ic:#f0a020}
.sp-st-graph{--st-paper:repeating-linear-gradient(90deg,rgba(70,135,225,.26) 0 1px,transparent 1px 9px),repeating-linear-gradient(0deg,rgba(70,135,225,.26) 0 1px,transparent 1px 9px),linear-gradient(90deg,rgba(255,255,255,.4),transparent 45%),#bcd8f7;--st-radius:2px;--st-ic:#2c6193}
.sp-st-lavender{--st-paper:radial-gradient(45% 80% at 30% 40%,rgba(255,255,255,.26),transparent 70%),radial-gradient(30% 90% at 80% 60%,rgba(120,80,200,.12),transparent 70%),#dcc5f3;--st-clip:polygon(0% 6%,0.78% 5.56%,1.56% 4.5%,2.34% 3.44%,3.13% 3%,3.91% 3.44%,4.69% 4.5%,5.47% 5.56%,6.25% 6%,7.03% 5.39%,7.81% 3.91%,8.59% 2.43%,9.38% 1.82%,10.16% 2.43%,10.94% 3.91%,11.72% 5.39%,12.5% 6%,13.28% 5.25%,14.06% 3.43%,14.84% 1.61%,15.63% 0.86%,16.41% 1.61%,17.19% 3.43%,17.97% 5.25%,18.75% 6%,19.53% 5.5%,20.31% 4.3%,21.09% 3.09%,21.88% 2.6%,22.66% 3.09%,23.44% 4.3%,24.22% 5.5%,25% 6%,25.78% 5.38%,26.56% 3.9%,27.34% 2.41%,28.13% 1.79%,28.91% 2.41%,29.69% 3.9%,30.47% 5.38%,31.25% 6%,32.03% 5.42%,32.81% 4.02%,33.59% 2.62%,34.38% 2.04%,35.16% 2.62%,35.94% 4.02%,36.72% 5.42%,37.5% 6%,38.28% 5.47%,39.06% 4.18%,39.84% 2.89%,40.63% 2.36%,41.41% 2.89%,42.19% 4.18%,42.97% 5.47%,43.75% 6%,44.53% 5.29%,45.31% 3.56%,46.09% 1.83%,46.88% 1.12%,47.66% 1.83%,48.44% 3.56%,49.22% 5.29%,50% 6%,50.78% 5.52%,51.56% 4.36%,52.34% 3.19%,53.13% 2.71%,53.91% 3.19%,54.69% 4.36%,55.47% 5.52%,56.25% 6%,57.03% 5.41%,57.81% 4%,58.59% 2.58%,59.38% 2%,60.16% 2.58%,60.94% 4%,61.72% 5.41%,62.5% 6%,63.28% 5.14%,64.06% 3.06%,64.84% 0.98%,65.63% 0.11%,66.41% 0.98%,67.19% 3.06%,67.97% 5.14%,68.75% 6%,69.53% 5.3%,70.31% 3.62%,71.09% 1.93%,71.88% 1.23%,72.66% 1.93%,73.44% 3.62%,74.22% 5.3%,75% 6%,75.78% 5.46%,76.56% 4.14%,77.34% 2.83%,78.13% 2.29%,78.91% 2.83%,79.69% 4.14%,80.47% 5.46%,81.25% 6%,82.03% 5.13%,82.81% 3.02%,83.59% 0.91%,84.38% 0.04%,85.16% 0.91%,85.94% 3.02%,86.72% 5.13%,87.5% 6%,88.28% 5.37%,89.06% 3.86%,89.84% 2.35%,90.63% 1.72%,91.41% 2.35%,92.19% 3.86%,92.97% 5.37%,93.75% 6%,94.53% 5.37%,95.31% 3.84%,96.09% 2.31%,96.88% 1.67%,97.66% 2.31%,98.44% 3.84%,99.22% 5.37%,calc(100% - 3px) 0%,calc(100% - 2.63px) 6.25%,calc(100% - 1.73px) 12.5%,calc(100% - 0.83px) 18.75%,calc(100% - 0.46px) 25%,calc(100% - 0.83px) 31.25%,calc(100% - 1.73px) 37.5%,calc(100% - 2.63px) 43.75%,calc(100% - 3px) 50%,calc(100% - 2.76px) 56.25%,calc(100% - 2.19px) 62.5%,calc(100% - 1.61px) 68.75%,calc(100% - 1.37px) 75%,calc(100% - 1.61px) 81.25%,calc(100% - 2.19px) 87.5%,calc(100% - 2.76px) 93.75%,99.22% 94.63%,98.44% 96.16%,97.66% 97.69%,96.88% 98.33%,96.09% 97.69%,95.31% 96.16%,94.53% 94.63%,93.75% 94%,92.97% 94.63%,92.19% 96.14%,91.41% 97.65%,90.63% 98.28%,89.84% 97.65%,89.06% 96.14%,88.28% 94.63%,87.5% 94%,86.72% 94.87%,85.94% 96.98%,85.16% 99.09%,84.38% 99.96%,83.59% 99.09%,82.81% 96.98%,82.03% 94.87%,81.25% 94%,80.47% 94.54%,79.69% 95.86%,78.91% 97.17%,78.13% 97.71%,77.34% 97.17%,76.56% 95.86%,75.78% 94.54%,75% 94%,74.22% 94.7%,73.44% 96.38%,72.66% 98.07%,71.88% 98.77%,71.09% 98.07%,70.31% 96.38%,69.53% 94.7%,68.75% 94%,67.97% 94.86%,67.19% 96.94%,66.41% 99.02%,65.63% 99.89%,64.84% 99.02%,64.06% 96.94%,63.28% 94.86%,62.5% 94%,61.72% 94.59%,60.94% 96%,60.16% 97.42%,59.38% 98%,58.59% 97.42%,57.81% 96%,57.03% 94.59%,56.25% 94%,55.47% 94.48%,54.69% 95.64%,53.91% 96.81%,53.13% 97.29%,52.34% 96.81%,51.56% 95.64%,50.78% 94.48%,50% 94%,49.22% 94.71%,48.44% 96.44%,47.66% 98.17%,46.88% 98.88%,46.09% 98.17%,45.31% 96.44%,44.53% 94.71%,43.75% 94%,42.97% 94.53%,42.19% 95.82%,41.41% 97.11%,40.63% 97.64%,39.84% 97.11%,39.06% 95.82%,38.28% 94.53%,37.5% 94%,36.72% 94.58%,35.94% 95.98%,35.16% 97.38%,34.38% 97.96%,33.59% 97.38%,32.81% 95.98%,32.03% 94.58%,31.25% 94%,30.47% 94.62%,29.69% 96.1%,28.91% 97.59%,28.13% 98.21%,27.34% 97.59%,26.56% 96.1%,25.78% 94.62%,25% 94%,24.22% 94.5%,23.44% 95.7%,22.66% 96.91%,21.88% 97.4%,21.09% 96.91%,20.31% 95.7%,19.53% 94.5%,18.75% 94%,17.97% 94.75%,17.19% 96.57%,16.41% 98.39%,15.63% 99.14%,14.84% 98.39%,14.06% 96.57%,13.28% 94.75%,12.5% 94%,11.72% 94.61%,10.94% 96.09%,10.16% 97.57%,9.38% 98.18%,8.59% 97.57%,7.81% 96.09%,7.03% 94.61%,6.25% 94%,5.47% 94.44%,4.69% 95.5%,3.91% 96.56%,3.13% 97%,2.34% 96.56%,1.56% 95.5%,0.78% 94.44%,0% 94%,2.76px 93.75%,2.19px 87.5%,1.61px 81.25%,1.37px 75%,1.61px 68.75%,2.19px 62.5%,2.76px 56.25%,3px 50%,2.63px 43.75%,1.73px 37.5%,0.83px 31.25%,0.46px 25%,0.83px 18.75%,1.73px 12.5%,2.63px 6.25%,3px 0%);--st-ic:#6b4fc4}
.sp-st-peach{--st-paper:radial-gradient(40% 90% at 25% 50%,rgba(255,255,255,.22),transparent 70%),linear-gradient(90deg,transparent 60%,rgba(220,120,40,.1)),#f8c48c;--st-radius:2px;--st-ic:#e8912a}
.sp-st-lined{--st-paper:linear-gradient(90deg,transparent 24px,rgba(235,90,90,.6) 24px,rgba(235,90,90,.6) 25.5px,transparent 25.5px),repeating-linear-gradient(0deg,transparent 0 17px,rgba(110,160,230,.45) 17px 18.2px) 0 -1px,#f9f5ee;--st-clip:polygon(2.82px 0%,2.5% 0.56%,5% 0.38%,7.5% 0.57%,10% 1.13%,12.5% 0.57%,15% 2.71%,17.5% 1.57%,20% 1.04%,22.5% 1.05%,25% 1.05%,27.5% 0.33%,30% 1.15%,32.5% 0.8%,35% 0.24%,37.5% 0.14%,40% 0.31%,42.5% 0.71%,45% 2.44%,47.5% 0.92%,50% 0.24%,52.5% 1.52%,55% 2.71%,57.5% 1.23%,60% 1.54%,62.5% 0.87%,65% 1.69%,67.5% 0.47%,70% 1.11%,72.5% 0.13%,75% 2.58%,77.5% 0.94%,80% 0.9%,82.5% 1.07%,85% 0.47%,87.5% 1.81%,90% 1.77%,92.5% 0.07%,95% 1.29%,97.5% 1.08%,calc(100% - 2.75px) 0%,calc(100% - 2.7px) 14.29%,calc(100% - 4.83px) 28.57%,calc(100% - 1.6px) 42.86%,calc(100% - 3.5px) 57.14%,calc(100% - 0.11px) 71.43%,calc(100% - 4.7px) 85.71%,calc(100% - 2.9px) 100%,97.5% 97.94%,95% 99.98%,92.5% 97.39%,90% 99.72%,87.5% 99.83%,85% 98.84%,82.5% 97.62%,80% 97.41%,77.5% 98.91%,75% 97.23%,72.5% 98.27%,70% 98.41%,67.5% 99.78%,65% 97.85%,62.5% 99.27%,60% 97.88%,57.5% 97.38%,55% 99.16%,52.5% 98.44%,50% 99.7%,47.5% 97.02%,45% 99.71%,42.5% 98.19%,40% 99.69%,37.5% 97.08%,35% 97.78%,32.5% 99.85%,30% 99.63%,27.5% 99.46%,25% 99.63%,22.5% 97.48%,20% 97.63%,17.5% 98.51%,15% 99.68%,12.5% 99.23%,10% 98.3%,7.5% 97.13%,5% 99.98%,2.5% 99.64%,1.91px 100%,2.05px 85.71%,0.92px 71.43%,2.72px 57.14%,1.4px 42.86%,4.84px 28.57%,0.68px 14.29%);--st-pad:66px;--st-ic:#8d7a68}
.sp-st-green{--st-paper:linear-gradient(95deg,rgba(255,255,255,.2),transparent 40%,rgba(80,140,20,.08)),#cde9a4;--st-clip:polygon(3.69px 0%,calc(100% - 2.15px) 0%,calc(100% - 2.1px) 14.29%,calc(100% - 5.74px) 28.57%,calc(100% - 1.69px) 42.86%,calc(100% - 5.91px) 57.14%,calc(100% - 2.03px) 71.43%,calc(100% - 5.69px) 85.71%,calc(100% - 3.64px) 100%,2.13px 100%,4.09px 85.71%,1.02px 71.43%,3.18px 57.14%,0px 42.86%,4.53px 28.57%,2.82px 14.29%);--st-ic:#5c9a35}
.sp-st-scallop{--st-paper:radial-gradient(40% 100% at 70% 50%,rgba(255,255,255,.18),transparent 70%),#f8c3d6;--st-clip:polygon(0% 9%,0.52% 2.29%,1.04% 0.51%,1.56% 0%,2.08% 0.51%,2.6% 2.29%,3.13% 9%,3.65% 2.29%,4.17% 0.51%,4.69% 0%,5.21% 0.51%,5.73% 2.29%,6.25% 9%,6.77% 2.29%,7.29% 0.51%,7.81% 0%,8.33% 0.51%,8.85% 2.29%,9.38% 9%,9.9% 2.29%,10.42% 0.51%,10.94% 0%,11.46% 0.51%,11.98% 2.29%,12.5% 9%,13.02% 2.29%,13.54% 0.51%,14.06% 0%,14.58% 0.51%,15.1% 2.29%,15.63% 9%,16.15% 2.29%,16.67% 0.51%,17.19% 0%,17.71% 0.51%,18.23% 2.29%,18.75% 9%,19.27% 2.29%,19.79% 0.51%,20.31% 0%,20.83% 0.51%,21.35% 2.29%,21.88% 9%,22.4% 2.29%,22.92% 0.51%,23.44% 0%,23.96% 0.51%,24.48% 2.29%,25% 9%,25.52% 2.29%,26.04% 0.51%,26.56% 0%,27.08% 0.51%,27.6% 2.29%,28.13% 9%,28.65% 2.29%,29.17% 0.51%,29.69% 0%,30.21% 0.51%,30.73% 2.29%,31.25% 9%,31.77% 2.29%,32.29% 0.51%,32.81% 0%,33.33% 0.51%,33.85% 2.29%,34.38% 9%,34.9% 2.29%,35.42% 0.51%,35.94% 0%,36.46% 0.51%,36.98% 2.29%,37.5% 9%,38.02% 2.29%,38.54% 0.51%,39.06% 0%,39.58% 0.51%,40.1% 2.29%,40.63% 9%,41.15% 2.29%,41.67% 0.51%,42.19% 0%,42.71% 0.51%,43.23% 2.29%,43.75% 9%,44.27% 2.29%,44.79% 0.51%,45.31% 0%,45.83% 0.51%,46.35% 2.29%,46.88% 9%,47.4% 2.29%,47.92% 0.51%,48.44% 0%,48.96% 0.51%,49.48% 2.29%,50% 9%,50.52% 2.29%,51.04% 0.51%,51.56% 0%,52.08% 0.51%,52.6% 2.29%,53.13% 9%,53.65% 2.29%,54.17% 0.51%,54.69% 0%,55.21% 0.51%,55.73% 2.29%,56.25% 9%,56.77% 2.29%,57.29% 0.51%,57.81% 0%,58.33% 0.51%,58.85% 2.29%,59.38% 9%,59.9% 2.29%,60.42% 0.51%,60.94% 0%,61.46% 0.51%,61.98% 2.29%,62.5% 9%,63.02% 2.29%,63.54% 0.51%,64.06% 0%,64.58% 0.51%,65.1% 2.29%,65.63% 9%,66.15% 2.29%,66.67% 0.51%,67.19% 0%,67.71% 0.51%,68.23% 2.29%,68.75% 9%,69.27% 2.29%,69.79% 0.51%,70.31% 0%,70.83% 0.51%,71.35% 2.29%,71.88% 9%,72.4% 2.29%,72.92% 0.51%,73.44% 0%,73.96% 0.51%,74.48% 2.29%,75% 9%,75.52% 2.29%,76.04% 0.51%,76.56% 0%,77.08% 0.51%,77.6% 2.29%,78.13% 9%,78.65% 2.29%,79.17% 0.51%,79.69% 0%,80.21% 0.51%,80.73% 2.29%,81.25% 9%,81.77% 2.29%,82.29% 0.51%,82.81% 0%,83.33% 0.51%,83.85% 2.29%,84.38% 9%,84.9% 2.29%,85.42% 0.51%,85.94% 0%,86.46% 0.51%,86.98% 2.29%,87.5% 9%,88.02% 2.29%,88.54% 0.51%,89.06% 0%,89.58% 0.51%,90.1% 2.29%,90.63% 9%,91.15% 2.29%,91.67% 0.51%,92.19% 0%,92.71% 0.51%,93.23% 2.29%,93.75% 9%,94.27% 2.29%,94.79% 0.51%,95.31% 0%,95.83% 0.51%,96.35% 2.29%,96.88% 9%,97.4% 2.29%,97.92% 0.51%,98.44% 0%,98.96% 0.51%,99.48% 2.29%,calc(100% - 5px) 0%,calc(100% - 1.27px) 4.17%,calc(100% - 0.29px) 8.33%,calc(100% - 0px) 12.5%,calc(100% - 0.29px) 16.67%,calc(100% - 1.27px) 20.83%,calc(100% - 5px) 25%,calc(100% - 1.27px) 29.17%,calc(100% - 0.29px) 33.33%,calc(100% - 0px) 37.5%,calc(100% - 0.29px) 41.67%,calc(100% - 1.27px) 45.83%,calc(100% - 5px) 50%,calc(100% - 1.27px) 54.17%,calc(100% - 0.29px) 58.33%,calc(100% - 0px) 62.5%,calc(100% - 0.29px) 66.67%,calc(100% - 1.27px) 70.83%,calc(100% - 5px) 75%,calc(100% - 1.27px) 79.17%,calc(100% - 0.29px) 83.33%,calc(100% - 0px) 87.5%,calc(100% - 0.29px) 91.67%,calc(100% - 1.27px) 95.83%,99.48% 97.71%,98.96% 99.49%,98.44% 100%,97.92% 99.49%,97.4% 97.71%,96.88% 91%,96.35% 97.71%,95.83% 99.49%,95.31% 100%,94.79% 99.49%,94.27% 97.71%,93.75% 91%,93.23% 97.71%,92.71% 99.49%,92.19% 100%,91.67% 99.49%,91.15% 97.71%,90.63% 91%,90.1% 97.71%,89.58% 99.49%,89.06% 100%,88.54% 99.49%,88.02% 97.71%,87.5% 91%,86.98% 97.71%,86.46% 99.49%,85.94% 100%,85.42% 99.49%,84.9% 97.71%,84.38% 91%,83.85% 97.71%,83.33% 99.49%,82.81% 100%,82.29% 99.49%,81.77% 97.71%,81.25% 91%,80.73% 97.71%,80.21% 99.49%,79.69% 100%,79.17% 99.49%,78.65% 97.71%,78.13% 91%,77.6% 97.71%,77.08% 99.49%,76.56% 100%,76.04% 99.49%,75.52% 97.71%,75% 91%,74.48% 97.71%,73.96% 99.49%,73.44% 100%,72.92% 99.49%,72.4% 97.71%,71.88% 91%,71.35% 97.71%,70.83% 99.49%,70.31% 100%,69.79% 99.49%,69.27% 97.71%,68.75% 91%,68.23% 97.71%,67.71% 99.49%,67.19% 100%,66.67% 99.49%,66.15% 97.71%,65.63% 91%,65.1% 97.71%,64.58% 99.49%,64.06% 100%,63.54% 99.49%,63.02% 97.71%,62.5% 91%,61.98% 97.71%,61.46% 99.49%,60.94% 100%,60.42% 99.49%,59.9% 97.71%,59.38% 91%,58.85% 97.71%,58.33% 99.49%,57.81% 100%,57.29% 99.49%,56.77% 97.71%,56.25% 91%,55.73% 97.71%,55.21% 99.49%,54.69% 100%,54.17% 99.49%,53.65% 97.71%,53.13% 91%,52.6% 97.71%,52.08% 99.49%,51.56% 100%,51.04% 99.49%,50.52% 97.71%,50% 91%,49.48% 97.71%,48.96% 99.49%,48.44% 100%,47.92% 99.49%,47.4% 97.71%,46.88% 91%,46.35% 97.71%,45.83% 99.49%,45.31% 100%,44.79% 99.49%,44.27% 97.71%,43.75% 91%,43.23% 97.71%,42.71% 99.49%,42.19% 100%,41.67% 99.49%,41.15% 97.71%,40.63% 91%,40.1% 97.71%,39.58% 99.49%,39.06% 100%,38.54% 99.49%,38.02% 97.71%,37.5% 91%,36.98% 97.71%,36.46% 99.49%,35.94% 100%,35.42% 99.49%,34.9% 97.71%,34.38% 91%,33.85% 97.71%,33.33% 99.49%,32.81% 100%,32.29% 99.49%,31.77% 97.71%,31.25% 91%,30.73% 97.71%,30.21% 99.49%,29.69% 100%,29.17% 99.49%,28.65% 97.71%,28.13% 91%,27.6% 97.71%,27.08% 99.49%,26.56% 100%,26.04% 99.49%,25.52% 97.71%,25% 91%,24.48% 97.71%,23.96% 99.49%,23.44% 100%,22.92% 99.49%,22.4% 97.71%,21.88% 91%,21.35% 97.71%,20.83% 99.49%,20.31% 100%,19.79% 99.49%,19.27% 97.71%,18.75% 91%,18.23% 97.71%,17.71% 99.49%,17.19% 100%,16.67% 99.49%,16.15% 97.71%,15.63% 91%,15.1% 97.71%,14.58% 99.49%,14.06% 100%,13.54% 99.49%,13.02% 97.71%,12.5% 91%,11.98% 97.71%,11.46% 99.49%,10.94% 100%,10.42% 99.49%,9.9% 97.71%,9.38% 91%,8.85% 97.71%,8.33% 99.49%,7.81% 100%,7.29% 99.49%,6.77% 97.71%,6.25% 91%,5.73% 97.71%,5.21% 99.49%,4.69% 100%,4.17% 99.49%,3.65% 97.71%,3.13% 91%,2.6% 97.71%,2.08% 99.49%,1.56% 100%,1.04% 99.49%,0.52% 97.71%,0% 91%,1.27px 95.83%,0.29px 91.67%,0px 87.5%,0.29px 83.33%,1.27px 79.17%,5px 75%,1.27px 70.83%,0.29px 66.67%,0px 62.5%,0.29px 58.33%,1.27px 54.17%,5px 50%,1.27px 45.83%,0.29px 41.67%,0px 37.5%,0.29px 33.33%,1.27px 29.17%,5px 25%,1.27px 20.83%,0.29px 16.67%,0px 12.5%,0.29px 8.33%,1.27px 4.17%,5px 0%);--st-pad:54px;--st-ic:#d45c7d}
.sp-st-night{--st-paper:radial-gradient(circle at 9% 26%,#fff8d0 1.3px,transparent 2.2px),radial-gradient(circle at 24% 74%,rgba(255,255,255,.9) 1px,transparent 1.8px),radial-gradient(circle at 42% 18%,#fff 1.1px,transparent 2px),radial-gradient(circle at 58% 62%,#fff8d0 1.5px,transparent 2.4px),radial-gradient(circle at 70% 30%,rgba(255,255,255,.85) 1px,transparent 1.8px),radial-gradient(circle at 84% 70%,#fff 1.2px,transparent 2px),radial-gradient(circle at 50% 88%,rgba(255,255,255,.7) .9px,transparent 1.6px),radial-gradient(60% 120% at 20% 100%,rgba(95,115,215,.65),transparent 70%),radial-gradient(50% 120% at 65% 0%,rgba(150,175,245,.6),transparent 70%),linear-gradient(90deg,#6f8ad8,#5570c9 45%,#7b93dc 80%,#5f7ccf);--st-clip:polygon(1.28px 0%,2.94% 0.12%,5.88% 0.31%,8.82% 0.54%,11.76% 2.25%,14.71% 1.1%,17.65% 0.47%,20.59% 2.4%,23.53% 0.42%,26.47% 1.82%,29.41% 1.21%,32.35% 2%,35.29% 0.77%,38.24% 1.49%,41.18% 1.14%,44.12% 2.1%,47.06% 1.67%,50% 0.14%,52.94% 0.56%,55.88% 0.63%,58.82% 0.22%,61.76% 0.33%,64.71% 0.21%,67.65% 0.7%,70.59% 0.44%,73.53% 0.62%,76.47% 2.12%,79.41% 1.45%,82.35% 1.93%,85.29% 0.61%,88.24% 1.95%,91.18% 0.13%,94.12% 0.06%,97.06% 2.15%,calc(100% - 1.21px) 0%,calc(100% - 2.11px) 20%,calc(100% - 3.55px) 40%,calc(100% - 0.94px) 60%,calc(100% - 3.61px) 80%,calc(100% - 1.34px) 100%,97.06% 99.37%,94.12% 98.09%,91.18% 97.92%,88.24% 99.04%,85.29% 99.64%,82.35% 97.7%,79.41% 97.51%,76.47% 98.27%,73.53% 98.22%,70.59% 98.57%,67.65% 99.49%,64.71% 98.43%,61.76% 99%,58.82% 97.58%,55.88% 99.72%,52.94% 98.53%,50% 97.56%,47.06% 99.84%,44.12% 99.46%,41.18% 99.71%,38.24% 98.82%,35.29% 98.2%,32.35% 99.25%,29.41% 99.78%,26.47% 99.69%,23.53% 98.8%,20.59% 99.78%,17.65% 98.3%,14.71% 97.55%,11.76% 99.83%,8.82% 98.17%,5.88% 98.47%,2.94% 99.57%,1.23px 100%,3px 80%,0.16px 60%,2.97px 40%,1.18px 20%);--st-ic:#e5c24a}
.sp-st-pink{--st-paper:linear-gradient(95deg,rgba(255,255,255,.2),transparent 40%,rgba(200,60,120,.06)),#f9b8cf;--st-clip:polygon(2.24px 0%,calc(100% - 3.49px) 0%,calc(100% - 0.64px) 14.29%,calc(100% - 5.44px) 28.57%,calc(100% - 2.15px) 42.86%,calc(100% - 4.21px) 57.14%,calc(100% - 2.07px) 71.43%,calc(100% - 5.62px) 85.71%,calc(100% - 4.12px) 100%,4.06px 100%,3.98px 85.71%,1.43px 71.43%,4.17px 57.14%,1.72px 42.86%,3.45px 28.57%,0.71px 14.29%);--st-ic:#d8456f}
.sp-st-stripes{--st-paper:repeating-linear-gradient(120deg,rgba(255,255,255,.38) 0 11px,transparent 11px 24px),#c4e297;--st-radius:2px;--st-ic:#5a9a2a}
.sp-st-dots{--st-paper:radial-gradient(circle,#f5d66a 3px,transparent 3.6px) 0 0/26px 26px,radial-gradient(circle,#f5d66a 2.4px,transparent 3px) 13px 13px/26px 26px,radial-gradient(circle,#f3cd55 2px,transparent 2.6px) 7px 19px/37px 31px,#fcf4d2;--st-radius:3px;--st-ic:#2b2a27}
.sp-st-clouds{--st-paper:radial-gradient(70px 26px at 18% 100%,rgba(255,255,255,.9) 45%,transparent 70%),radial-gradient(44px 30px at 28% 90%,rgba(255,255,255,.85) 45%,transparent 70%),radial-gradient(60px 24px at 62% 0%,rgba(255,255,255,.85) 45%,transparent 70%),radial-gradient(40px 26px at 55% 12%,rgba(255,255,255,.8) 45%,transparent 72%),radial-gradient(80px 28px at 92% 100%,rgba(255,255,255,.9) 45%,transparent 70%),radial-gradient(40px 22px at 84% 86%,rgba(255,255,255,.8) 45%,transparent 72%),#b7daf8;--st-radius:2px;--st-ic:#3f6fa8}
.sp-st-gingham{--st-paper:repeating-linear-gradient(90deg,rgba(176,140,235,.42) 0 13px,transparent 13px 26px),repeating-linear-gradient(0deg,rgba(176,140,235,.42) 0 13px,transparent 13px 26px),#f5edff;--st-radius:2px;--st-ic:#9a5fd0}
.sp-st-airmail{--st-paper:repeating-linear-gradient(45deg,#e8757d 0 8px,transparent 8px 14px,#7591d9 14px 22px,transparent 22px 28px) 0 0/100% 6px no-repeat,repeating-linear-gradient(45deg,#e8757d 0 8px,transparent 8px 14px,#7591d9 14px 22px,transparent 22px 28px) 0 100%/100% 6px no-repeat,repeating-linear-gradient(45deg,#e8757d 0 8px,transparent 8px 14px,#7591d9 14px 22px,transparent 22px 28px) 0 0/6px 100% no-repeat,repeating-linear-gradient(45deg,#e8757d 0 8px,transparent 8px 14px,#7591d9 14px 22px,transparent 22px 28px) 100% 0/6px 100% no-repeat,#fcf5e6;--st-radius:3px;--st-pad:54px;--st-ic:#2b2a27}
.sp-st-kraft{--st-paper:linear-gradient(4deg,transparent 48.6%,rgba(255,255,255,.09) 49.4%,transparent 50.2%),linear-gradient(-3deg,transparent 31%,rgba(120,80,30,.07) 31.6%,transparent 32.4%),linear-gradient(176deg,transparent 64%,rgba(255,255,255,.08) 64.6%,transparent 65.4%),linear-gradient(100deg,rgba(255,255,255,.1),transparent 30%,rgba(110,70,20,.07) 60%,transparent 80%),radial-gradient(50% 120% at 70% 50%,rgba(255,255,255,.1),transparent 70%),#d8b588;--st-radius:3px;--st-ic:#5a3d22}
.sp-st-grid{--st-paper:repeating-linear-gradient(90deg,rgba(120,110,95,.14) 0 1px,transparent 1px 14px),repeating-linear-gradient(0deg,rgba(120,110,95,.14) 0 1px,transparent 1px 14px),#f8f4ec;--st-clip:polygon(0% 0%,100% 0%,100% 100%,0% 100%,0px 84.5%,2.39px 83.75%,4.5px 81.58%,6.06px 78.25%,6.89px 74.17%,6.89px 69.83%,6.06px 65.75%,4.5px 62.42%,2.39px 60.25%,0px 59.5%,0px 40.5%,2.39px 39.75%,4.5px 37.58%,6.06px 34.25%,6.89px 30.17%,6.89px 25.83%,6.06px 21.75%,4.5px 18.42%,2.39px 16.25%,0px 15.5%);--st-pad:62px;--st-ic:#8c7b6b}
.strips li { width: 300px; }
.strip { padding-right: 76px; }
.st-btns { position: absolute; right: 10px; top: 50%; margin-top: -13px; display: flex; gap: 6px; }
.st-btns b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.58); box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.35); }
.sp-st-night .st-btns b { background: rgba(235,240,255,.7); }
.st-btns svg { width: 14px; height: 14px; fill: none; stroke: #2b2a27; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


/* Playground: strip notes */
.sticky.strip-note { width: 290px; min-height: 52px; padding: 9px 106px 9px 46px; background: transparent; border-radius: 0; box-shadow: none; isolation: isolate; color: #2b2a27; filter: drop-shadow(0 6px 9px rgba(60,40,20,.2)) drop-shadow(0 1px 1.5px rgba(0,0,0,.08)); }
.sticky.strip-note .st-ic { left: 14px; top: 12px; }

/* Docs demo: fuller reference page */
.docs-crumb { margin: 0 0 6px !important; font-size: .72rem; color: var(--muted) !important; }
.docs-main h4 { margin: 14px 0 4px; font: 600 .92rem/1.3 system-ui, sans-serif; padding-bottom: 3px; border-bottom: 1px solid var(--line); }
.docs-params { margin: 0 0 8px; }
.docs-params dt { margin-top: 4px; font-weight: 600; }
.docs-params dd { margin: 0 0 4px 16px; }
.docs-params .opt { font-size: .68rem; font-weight: 400; color: var(--muted); }
.docs-callout { margin: 8px 0; padding: 7px 10px; border-left: 3px solid #0E7AC4; background: #E8F2FB; border-radius: 4px; color: #1e293b; }
.docs-table { border-collapse: collapse; margin: 4px 0 8px; font-size: .74rem; }
.docs-table th, .docs-table td { padding: 4px 14px 4px 0; text-align: left; border-bottom: 1px solid var(--line); }
.docs-table td { color: #15803D; font-weight: 600; }
.docs-foot { margin-top: 12px !important; font-size: .7rem; color: var(--muted) !important; }
.board[data-scene="docs"][data-page-theme="dark"] .docs-callout { background: #0B2236; color: #E2E8F0; }
.board[data-scene="docs"][data-page-theme="dark"] .docs-main h4, .board[data-scene="docs"][data-page-theme="dark"] .docs-table th, .board[data-scene="docs"][data-page-theme="dark"] .docs-table td { border-color: #1E293B; }
.board[data-scene="docs"][data-page-theme="dark"] .docs-table td { color: #4ADE80; }
.m-post > p { margin-bottom: 10px; font-size: .94rem; line-height: 1.55; }
.m-h { margin: 16px 0 4px; font: 700 1.05rem/1.3 "Helvetica Neue", Arial, sans-serif; color: inherit; }
.m-quote { margin: 12px 0; padding-left: 14px; border-left: 3px solid currentColor; font: italic 1rem/1.5 Georgia, serif; }
.mini.strip-mini { position: relative; isolation: isolate; width: 44px; height: 20px; background: none; border: 0; box-shadow: none; }
.mini.strip-mini .st-ic { left: 4px; top: 3px; width: 14px; height: 14px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.swatches .swatch { padding: 4px; }
.swatches .mini.strip-mini { width: 52px; height: 22px; }

/* Playground note cards, laid out like the extension's (HighlightTooltip.ts + the strip theme) */
.board .sticky { cursor: grab; }
.board .sticky:not(.strip-note) { width: 230px; padding: 14px 58px 40px 16px; }
.sticky .note-input { display: block; width: 100%; min-height: 72px; padding: 0; resize: none; overflow: hidden; border: 0; background: transparent; color: inherit; font: 500 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; cursor: text; }
.sticky .note-input::placeholder { color: inherit; opacity: .7; font-style: italic; }
.sticky .note-input:focus { outline: none; }
.sticky .note-input:focus-visible { outline: 2px dashed currentColor; outline-offset: 2px; }
.sticky.strip-note { display: flex; align-items: center; }
.sticky.strip-note .note-input { min-height: 24px; }
.sticky[data-resized="1"] { display: flex; flex-direction: column; }
.sticky[data-resized="1"] .note-input { flex: 1; min-height: 0; overflow: auto; }
.sticky[data-locked="1"] { cursor: default; }
.sticky:has(.style-pop:not([hidden])) { z-index: 5; }
.sticky .ic { position: absolute; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 4px; background: none; color: #5c5a54; cursor: pointer; }
.sticky .ic:hover, .sticky .ic.active { background: rgba(0,0,0,.06); color: #2b2a27; }
.sticky .ic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sticky .ic.del:hover { color: #c0392b; background: rgba(231,76,60,.08); }
.sticky .ic[hidden] { display: none; }
.sticky .ic:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Paper cards: delete and pin top-right, pen bottom-left */
.sticky .ic.del { top: 2px; right: 32px; }
.sticky .ic.lk { top: 2px; right: 2px; }
.sticky .ic.sty { left: 10px; bottom: 6px; }
/* Strips: delete, pen, pin in a row on the right, each on a soft chip */
.sticky.strip-note .ic { top: 50%; margin-top: -13px; border-radius: 8px; background: rgba(255,255,255,.58); color: #2b2a27; box-shadow: 0 1px 2px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.35); }
.sticky.strip-note.sp-st-night .ic { background: rgba(235,240,255,.7); }
.sticky.strip-note .ic.del { right: 74px; }
.sticky.strip-note .ic.sty { left: auto; right: 42px; bottom: auto; }
.sticky.strip-note .ic.lk { right: 10px; }
.sticky.strip-note.no-pen .ic.del { right: 42px; }
.sticky.strip-note .ic.del:hover { color: #c0392b; }
/* Pulled out into a card: text fills it, buttons drop to the bottom */
.sticky.strip-note[data-expanded="1"] { flex-direction: column; align-items: stretch; padding: 30px 16px 44px 46px; }
.sticky.strip-note[data-expanded="1"] .st-ic { top: 30px; }
.sticky.strip-note[data-expanded="1"] .ic { top: auto; bottom: 9px; margin-top: 0; }
.rz { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; color: rgba(40,60,90,.55); background: linear-gradient(135deg, transparent 0 46%, currentColor 46% 54%, transparent 54% 64%, currentColor 64% 72%, transparent 72%); }
.sticky[data-locked="1"] .rz { display: none; }

/* The pen popover */
.style-pop { position: absolute; left: 8px; bottom: 38px; z-index: 7; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 9px 10px; background: #fff; color: #2b2a27; border: 1px solid #d9d5ca; border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,.18); font: 12px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; cursor: default; transform: rotate(calc(-1 * var(--r, 0deg))); }
.style-pop[hidden] { display: none; }
.style-pop::after { content: ""; position: absolute; left: 12px; bottom: -6px; width: 10px; height: 10px; background: inherit; border-right: 1px solid #d9d5ca; border-bottom: 1px solid #d9d5ca; transform: rotate(45deg); }
.sticky.strip-note .style-pop { left: auto; right: 8px; bottom: calc(100% + 10px); }
.sticky.strip-note .style-pop::after { left: auto; right: 42px; }
.style-pop.below, .sticky.strip-note .style-pop.below { bottom: auto; top: calc(100% + 6px); }
.style-pop.below::after { bottom: auto; top: -6px; transform: rotate(225deg); }
.pop-section { display: flex; flex-direction: column; gap: 4px; }
.pop-head { display: flex; align-items: baseline; gap: 10px; }
.style-current { font-size: 11px; font-weight: 500; color: #5c5a54; }
.pop-row { display: flex; align-items: center; gap: 10px; }
.pop-label { flex: none; width: 58px; font-size: 11px; font-weight: 600; color: #6b6860; }
.pop-row--top { align-items: flex-start; }
.pop-row--top > .pop-label { padding-top: 8px; }
.pop-items { display: flex; align-items: center; gap: 6px; }
.pop-divider { flex: none; width: 1px; height: 20px; margin: 0 2px; background: #e3dfd5; }
.colors-bar, .widths-bar { display: flex; gap: 5px; }
.styles-bar { display: flex; flex-direction: column; gap: 4px; }
.style-row { display: flex; align-items: center; gap: 4px; }
.style-row .group-label { margin-right: 6px; font-weight: 500; }
.arrows-bar { display: grid; grid-template-columns: repeat(4, 30px); gap: 4px; }
.style-pop button { padding: 0; cursor: pointer; color: inherit; }
.style-pop button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.style-pop .color-btn { width: 20px; height: 20px; border: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.35); }
.style-pop .color-btn:hover { transform: translateY(-1px); }
.style-pop .color-btn.active, .match-btn.active { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #2b2a27; }
.match-btn { flex: none; width: 26px; height: 20px; border: 1px solid rgba(0,0,0,.12); border-radius: 6px; background: var(--st-paper, #fff); }
.t-folded-blue .match-btn { background: #B5D4F0; } .t-washi-ruled .match-btn { background: #BFDBFE; } .t-grid-paper .match-btn { background: #E9D8FD; } .t-torn-paper .match-btn { background: #FDFAF2; }
.style-btn, .arrow-btn, .width-btn { display: flex; align-items: center; justify-content: center; height: 28px; border: 1.5px solid transparent; border-radius: 7px; background: none; transition: border-color .15s, background .15s; }
.style-btn { width: 34px; }
.arrow-btn, .width-btn { width: 30px; }
.style-btn:hover, .arrow-btn:hover, .width-btn:hover { background: rgba(0,0,0,.06); }
.style-btn.active, .arrow-btn.active, .width-btn.active { border-color: #2b2a27; background: rgba(0,0,0,.04); }
.style-glyph { font-size: 13px; font-weight: 600; line-height: 1.15; color: #2b2a27; }
.arrow-btn svg { width: 16px; height: 16px; }
.width-btn svg { width: 18px; height: 16px; }
.arrow-btn svg, .width-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 960px) {
  .sticky.strip-note { width: 250px; }
  .board .sticky:not(.strip-note) { width: 190px; }
  .sticky .note-input { font-size: 14px; min-height: 48px; }
}
@media (max-width: 720px) {
  .sticky.strip-note { width: 220px; padding-left: 36px; }
  .sticky.strip-note .st-ic { left: 10px; }
  .board .sticky:not(.strip-note) { width: 165px; padding: 12px 56px 36px 12px; }
  .style-pop { font-size: 11px; padding: 8px; }
  .pop-label { width: 50px; }
  .style-btn { width: 28px; }
  .arrow-btn, .width-btn { width: 26px; }
  .arrows-bar { grid-template-columns: repeat(4, 26px); }
  .style-pop .color-btn { width: 17px; height: 17px; }
}

/* Demo pages scroll inside the browser frame, like a real tab. Notes and arrows sit on the page and
   scroll with it, as in the extension; each site's own chrome (sidebars, header, composer) stays put. */
.board { --view: clamp(420px, 70vh, 600px); height: var(--view); min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; }
.board:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.board > .scene { min-height: 100%; }
.board .arrows { z-index: 2; }
.board .sticky { z-index: 3; }
.board .sticky.dragging { z-index: 4; }
.rail { position: sticky; top: 0; z-index: 1; align-self: flex-start; height: var(--view); box-sizing: border-box; }
.chat-top { position: sticky; top: 0; z-index: 1; margin: -1.2em -2.5em .5em; padding: .8em 2.5em .5em; background: var(--c-bg); }
.chat-dock { position: sticky; bottom: 0; z-index: 1; align-self: stretch; margin: 0 -2.5em -.9em; padding: 0 2.5em .9em; background: var(--c-bg); }
.chat-dock::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; background: linear-gradient(transparent, var(--c-bg)); pointer-events: none; }
.chat-user { display: flex; justify-content: flex-end; margin: 4px 0 22px; }
.chat-user p { max-width: 75%; margin: 0; padding: 10px 16px; border-radius: 18px; background: var(--c-comp); line-height: 1.5; }
.m-top { position: sticky; top: 0; z-index: 1; background: #fff; }
.board[data-scene="blog"][data-page-theme="dark"] .m-top { background: #121212; }
.docs-side { position: sticky; top: 0; align-self: start; max-height: calc(var(--view) - 28px); overflow-y: auto; scrollbar-width: none; }
.docs-top { position: sticky; top: -14px; z-index: 1; margin: -14px 0 4px; padding: 14px 0 6px; background: #fff; }
.board[data-scene="docs"][data-page-theme="dark"] .docs-top { background: #0F172A; }
@media (max-width: 960px) { .board { --view: clamp(420px, 72vh, 620px); min-height: 0; } }