@font-face { font-family: "DM Sans"; font-weight: 500; font-display: swap; src: url(fonts/DMSans-500-latin.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url(fonts/DMSans-700-latin.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 800; font-display: swap; src: url(fonts/DMSans-800-latin.woff2) format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 700; font-display: swap; src: url(fonts/Caveat-700-latin.woff2) format("woff2"); }

:root {
  --ink: #2b2630; --ink-soft: #6b6370; --paper: #fdf7fa; --dot: #ecdde7;
  --pink: #ff9ec4; --pink-deep: #e2649a; --blush: #ffe0ec; --butter: #fff3c4; --mint: #d6f3e3; --lilac: #e8ddff; --sky: #dbecff; --peach: #ffe6d3;
  --butter-d: #f8e08a; --mint-d: #a8e6c3; --sky-d: #aed3ff; --lilac-d: #cdb8ff; --pink-d: #ffb8d2; --peach-d: #ffc8a6;
  --mochi: #33c7ff;
  --font: "DM Sans", system-ui, -apple-system, sans-serif; --hand: "Caveat", "Comic Sans MS", cursive; --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--ink); background-color: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background-image: radial-gradient(var(--dot) 1.4px, transparent 1.6px); background-size: 22px 22px; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
h1, h2 { margin: 0; letter-spacing: -.04em; line-height: 1.02; }
h1 { font: 800 clamp(46px, 6vw, 92px)/.98 var(--font); letter-spacing: -.05em; }
h2 { font: 800 clamp(34px, 4.4vw, 64px)/1.02 var(--font); }
p { margin: 0; }
.center { text-align: center; }
.tag { font: 600 13px/1 var(--mono); color: var(--pink-deep); margin-bottom: 16px; }
.tag.light { color: #ffb8d4; } .tag.small { font-size: 12px; margin: 20px 0 0; }
.sub { font: 500 19px/1.5 var(--font); color: var(--ink-soft); margin: 16px auto 0; max-width: 46ch; }
.fine { margin-top: 18px; font: 500 14px/1.4 var(--font); color: var(--ink-soft); } .fine b { color: var(--ink); }
.fine.small { font-size: 13px; }

/* pills */
.pill { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font: 700 17px/1 var(--font); text-decoration: none; color: var(--ink); white-space: nowrap; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); border: 0; cursor: pointer; background: none; }
.pill::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff; box-shadow: 0 8px 22px rgba(120, 70, 110, .12), inset 0 0 0 1.5px #f0dce8; filter: url(#wobs); }
.pill:hover { transform: translateY(-2px) scale(1.04); }
.pill.dark { color: #fff; } .pill.dark::before { background: var(--ink); box-shadow: 0 12px 28px rgba(43, 38, 48, .28); }
.pill.small { padding: 11px 18px; font-size: 14.5px; }
.pill.ghost { color: #fff; } .pill.ghost::before { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.pill svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* nav */
.nav { position: fixed; top: 14px; left: 50%; translate: -50% 0; z-index: 50; width: min(1120px, calc(100% - 32px)); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 10px 9px 16px; border-radius: 999px; background: rgba(255, 255, 255, .78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(120, 70, 110, .1), inset 0 0 0 1px #f3e3ec; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 18px/1 var(--font); letter-spacing: -.02em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.links { display: flex; gap: 4px; }
.links a { padding: 9px 14px; border-radius: 999px; text-decoration: none; font: 600 15px/1 var(--font); color: var(--ink-soft); }
.links a:hover { background: var(--blush); color: var(--ink); }

/* shared bits */
.window { position: relative; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 50px 100px rgba(90, 50, 90, .22), 0 0 0 1px rgba(0, 0, 0, .05); }
.window .bar { position: relative; height: 32px; display: flex; align-items: center; gap: 7px; padding-left: 14px; background: #f6f1f5; border-bottom: 1px solid #ece3ea; }
.window .bar i { width: 11px; height: 11px; border-radius: 50%; } .window .bar i:nth-child(1) { background: #ff6158; } .window .bar i:nth-child(2) { background: #ffbd2e; } .window .bar i:nth-child(3) { background: #28c840; }
.window .bar span { position: absolute; inset: 0; text-align: center; font: 600 12px/32px var(--font); color: #8a8290; }
.window video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #faf6f9; }
.sticky { padding: 14px 16px; font: 700 21px/1.05 var(--hand); box-shadow: 0 14px 30px rgba(90, 50, 90, .14); border-radius: 4px 6px 5px 3px; }
.sticky.butter { background: var(--butter-d); } .sticky.mint { background: var(--mint-d); } .sticky.pink { background: var(--pink-d); } .sticky.sky { background: var(--sky-d); }
.swatch { width: 110px; padding: 8px 8px 10px; border-radius: 14px; background: #fff; box-shadow: 0 14px 30px rgba(90, 50, 90, .14); display: grid; gap: 2px; }
.swatch i { height: 70px; border-radius: 9px; margin-bottom: 6px; } .swatch b { font: 700 13px/1.1 var(--font); } .swatch small { font: 500 11px/1 var(--mono); color: var(--ink-soft); }
.chip { padding: 10px 16px; border-radius: 999px; background: #fff; font: 700 15px/1 var(--font); box-shadow: 0 12px 26px rgba(90, 50, 90, .14); white-space: nowrap; }
.stamp { width: 64px; image-rendering: pixelated; }

/* 1 · hero */
.hero { position: relative; height: 210vh; }
.hero-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; justify-items: center; align-content: start; padding-top: 104px; }
.hero-copy { text-align: center; padding: 0 20px; transition: opacity .2s; }
.hero-goo { width: 84px; height: 74px; margin: 0 auto 14px; image-rendering: pixelated; }
.bub { position: relative; display: inline-block; z-index: 0; padding: 0 .12em; }
.bub::before { content: ""; position: absolute; inset: .1em -.08em -.02em; z-index: -1; border-radius: 999px; background: var(--pink); filter: url(#wob); transform: rotate(-1.5deg); }
.lede { font: 500 clamp(17px, 1.5vw, 20px)/1.5 var(--font); color: var(--ink-soft); margin: 22px auto 28px; max-width: 46ch; }
.hero-win { position: absolute; left: 50%; top: 100%; width: min(1100px, 88vw); translate: -50% 0; will-change: transform; }
.live-btn { position: absolute; right: 18px; bottom: 18px; padding: 12px 18px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 700 15px/1 var(--font); cursor: pointer; box-shadow: 0 12px 26px rgba(43, 38, 48, .3); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.live-btn:hover { transform: scale(1.05); }
.float { position: absolute; z-index: 2; will-change: transform; }
.f1 { left: -6%; top: 12%; rotate: -6deg; } .f2 { right: -5%; top: 4%; rotate: 5deg; } .f3 { right: -7%; bottom: 14%; rotate: 7deg; }
.f4 { left: -8%; bottom: 20%; rotate: -4deg; } .f5 { left: 46%; top: -46px; width: 72px; rotate: -8deg; }

/* 2 · orbit */
.orbit { position: relative; height: 260vh; }
.orbit-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.orbit-line { position: absolute; top: 15vh; left: 0; right: 0; text-align: center; padding: 0 20px; font: 800 clamp(30px, 3.8vw, 56px)/1.08 var(--font); letter-spacing: -.04em; z-index: 3; }
.orbit-line span { color: var(--pink-deep); }
.orbit-goo { position: relative; z-index: 2; width: clamp(150px, 18vw, 250px); height: auto; image-rendering: pixelated; }
.orbit-ring { position: absolute; inset: 0; }
.ob { position: absolute; left: 50%; top: 54%; will-change: transform; }
.card-img { width: 210px; padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 18px 40px rgba(90, 50, 90, .16); }
.card-img img { border-radius: 10px; aspect-ratio: 16 / 10; object-fit: cover; }
.todo { width: 190px; padding: 14px 16px; border-radius: 16px; background: #fff; display: grid; gap: 6px; font: 600 14px/1.2 var(--font); box-shadow: 0 18px 40px rgba(90, 50, 90, .16); }
.todo b { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.voice { width: 200px; height: 64px; padding: 0 16px; border-radius: 999px; background: var(--lilac); display: flex; align-items: center; gap: 12px; box-shadow: 0 18px 40px rgba(90, 50, 90, .16); }
.voice i { font-style: normal; font-size: 13px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; }
.voice em { flex: 1; height: 26px; background: repeating-linear-gradient(90deg, #9b84e6 0 3px, transparent 3px 7px); -webkit-mask: linear-gradient(transparent 0 0), radial-gradient(ellipse at center, #000 30%, transparent 75%); mask: radial-gradient(ellipse 60% 50% at center, #000 40%, rgba(0,0,0,.5) 70%, transparent 100%); border-radius: 6px; }
.voice small { font: 600 12px/1 var(--mono); color: #6b5aa8; }
.link { width: 190px; padding: 14px 16px; border-radius: 16px; background: var(--sky); display: grid; gap: 4px; box-shadow: 0 18px 40px rgba(90, 50, 90, .16); }
.link b { font: 700 15px/1.2 var(--font); } .link small { font: 500 12px/1 var(--mono); color: var(--ink-soft); }

/* 3 · forms shelf */
.forms { position: relative; height: 320vh; }
.forms-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 44px; }
.shelf { width: max-content; }
.forms-head { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.shelf { display: flex; gap: 22px; padding: 10px max(20px, calc((100vw - 1120px) / 2)); will-change: transform; }
.kind { flex: none; width: 300px; display: grid; gap: 8px; }
.kind b { font: 700 19px/1.2 var(--font); margin-top: 8px; } .kind small { font: 500 15px/1.4 var(--font); color: var(--ink-soft); }
.demo { position: relative; height: 260px; border-radius: 26px; background: #fff; box-shadow: 0 20px 44px rgba(90, 50, 90, .1), inset 0 0 0 1px #f3e5ee; overflow: hidden; display: grid; place-items: center; }
.kind:nth-child(6n+1) .demo { background: var(--blush); } .kind:nth-child(6n+2) .demo { background: var(--butter); } .kind:nth-child(6n+3) .demo { background: var(--sky); }
.kind:nth-child(6n+4) .demo { background: var(--lilac); } .kind:nth-child(6n+5) .demo { background: var(--mint); } .kind:nth-child(6n) .demo { background: var(--peach); }
.d-note .sticky { position: absolute; width: 150px; } .d-note .sticky:nth-child(1) { left: 26px; top: 42px; rotate: -5deg; } .d-note .sticky:nth-child(2) { right: 24px; bottom: 40px; rotate: 4deg; }
.d-doc { align-content: center; gap: 12px; padding: 0 40px; justify-items: start; } .d-doc::before { content: "Rebrand plan"; font: 800 20px/1 var(--font); margin-bottom: 4px; }
.docline { height: 10px; border-radius: 6px; background: rgba(43, 38, 48, .14); } .w80 { width: 200px; } .w60 { width: 150px; } .w90 { width: 220px; } .w40 { width: 100px; }
.d-wire { display: flex; gap: 22px; } .phone { width: 92px; height: 180px; border-radius: 18px; background: #fff; border: 3px solid var(--ink); padding: 14px 10px; display: grid; gap: 8px; align-content: start; }
.phone i { height: 14px; border-radius: 6px; background: var(--sky-d); } .phone i.w { height: 44px; background: var(--pink-d); }
.d-swatch { display: flex; gap: 10px; } .d-swatch i { width: 42px; height: 120px; border-radius: 14px; box-shadow: 0 10px 20px rgba(90, 50, 90, .12); } .d-swatch i:nth-child(even) { translate: 0 14px; }
.d-voice { display: flex; align-items: center; gap: 14px; padding: 0 30px; } .d-voice span { width: 48px; height: 48px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 16px; box-shadow: 0 8px 18px rgba(90, 50, 90, .14); }
.d-voice em { width: 170px; height: 60px; background: repeating-linear-gradient(90deg, #5fbf8d 0 4px, transparent 4px 9px); mask: radial-gradient(ellipse 60% 50% at center, #000 35%, rgba(0,0,0,.45) 70%, transparent 100%); -webkit-mask: radial-gradient(ellipse 60% 50% at center, #000 35%, rgba(0,0,0,.45) 70%, transparent 100%); }
.d-link { gap: 12px; align-content: center; } .lk { width: 220px; padding: 14px 16px; border-radius: 14px; background: #fff; display: grid; gap: 4px; box-shadow: 0 10px 20px rgba(90, 50, 90, .1); }
.lk b { font: 700 15px/1.2 var(--font); } .lk small { font: 500 12px/1 var(--mono); color: var(--ink-soft); } .lk:nth-child(2) { rotate: 2deg; translate: 14px 0; }
.d-stamp { display: flex; gap: 14px; align-items: center; } .d-stamp img { width: 64px; image-rendering: pixelated; } .d-stamp span { font-size: 44px; }
.d-stamp > :nth-child(odd) { translate: 0 -14px; rotate: -8deg; } .d-stamp > :nth-child(even) { rotate: 8deg; }
.d-canvas { display: flex; gap: 16px; } .mini { width: 120px; height: 96px; border-radius: 14px; background: #fff; padding: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-content: start; box-shadow: 0 10px 20px rgba(90, 50, 90, .1);
  background-image: radial-gradient(#ecdde7 1px, transparent 1.2px); background-size: 10px 10px; }
.mini i { width: 40px; height: 26px; border-radius: 4px; background: var(--butter-d); } .mini i:nth-child(2) { background: var(--pink-d); } .mini i:nth-child(3) { background: var(--mint-d); } .mini.m2 { rotate: 4deg; translate: 0 18px; }

/* 4 · ask mochi */
.ask { width: min(1120px, calc(100% - 40px)); margin: 60px auto 0; padding: 80px 0; display: grid; grid-template-columns: .82fr 1.18fr; gap: 56px; align-items: center; }
.ask-copy > p:not(.tag):not(.fine) { font: 500 19px/1.55 var(--font); color: var(--ink-soft); margin-top: 16px; }
.asks { margin-top: 26px; display: grid; gap: 10px; justify-items: start; }
.asks button { position: relative; padding: 13px 18px 13px 44px; border: 0; border-radius: 999px; background: #fff; font: 700 16px/1 var(--font); color: var(--ink); cursor: pointer; box-shadow: 0 8px 20px rgba(90, 50, 90, .1), inset 0 0 0 1.5px #f0dce8; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .2s; }
.asks button::before { content: "✦"; position: absolute; left: 18px; color: var(--pink-deep); }
.asks button:hover { transform: translateX(4px); } .asks button.on { background: var(--ink); color: #fff; } .asks button.on::before { color: var(--pink); }
.board { position: relative; height: 480px; border-radius: 30px; background: #fff; box-shadow: 0 40px 80px rgba(90, 50, 90, .16), inset 0 0 0 1px #f1e2ec; overflow: hidden;
  background-image: radial-gradient(#efe2ea 1.3px, transparent 1.5px); background-size: 20px 20px; }
.n { position: absolute; width: 150px; padding: 12px 14px; font: 700 19px/1.05 var(--hand); border-radius: 4px 6px 5px 3px; box-shadow: 0 10px 22px rgba(90, 50, 90, .14); transition: left .8s cubic-bezier(.34, 1.3, .64, 1), top .8s cubic-bezier(.34, 1.3, .64, 1), rotate .8s, background .5s; }
.n[data-g="0"] { background: var(--butter-d); } .n[data-g="1"] { background: var(--mint-d); } .n[data-g="2"] { background: var(--pink-d); }
.bd-titles .t { position: absolute; padding: 8px 14px; border-radius: 999px; font: 800 14px/1 var(--font); color: var(--ink); opacity: 0; translate: 0 8px; transition: opacity .4s, translate .5s; }
.bd-titles .t.in { opacity: 1; translate: 0 0; }
.bd-extra > * { position: absolute; opacity: 0; scale: .7; transition: opacity .4s, scale .6s cubic-bezier(.34, 1.56, .64, 1); }
.bd-extra > .in { opacity: 1; scale: 1; }
.bd-extra .todo { width: 230px; }
.bd-extra .phone { width: 96px; height: 186px; }
.bd-mochi { position: absolute; right: 18px; bottom: 16px; display: flex; align-items: flex-end; gap: 8px; z-index: 5; }
.bd-mochi canvas { width: 64px; height: 56px; image-rendering: pixelated; }
.bd-say { max-width: 230px; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--ink); color: #fff; font: 600 14px/1.35 var(--font); margin-bottom: 30px; }

/* 5 · templates */
.templates { width: min(1100px, calc(100% - 40px)); margin: 0 auto; padding: 110px 0 40px; }
.tpl-grid { margin-top: 48px; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.tpl { position: relative; isolation: isolate; width: 240px; padding: 22px 22px 22px; display: grid; gap: 4px; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.tpl::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 22px; background: var(--c); box-shadow: 0 14px 30px rgba(90, 50, 90, .1); filter: url(#wobs); }
.tpl:nth-child(odd) { rotate: -1.6deg; } .tpl:nth-child(even) { rotate: 1.4deg; translate: 0 8px; }
.tpl:hover { transform: translateY(-6px) rotate(1deg) scale(1.03); }
.tpl .ti { width: 48px; height: 48px; margin-bottom: 10px; border-radius: 15px; display: grid; place-items: center; background: rgba(255, 255, 255, .78); box-shadow: 0 4px 10px rgba(90, 50, 90, .08); }
.tpl .ti svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tpl b { font: 700 18px/1.2 var(--font); } .tpl small { font: 500 14px/1.4 var(--font); color: var(--ink-soft); }

/* 6 · bento */
.bento-wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 110px 0 20px; }
.bento { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 250px; gap: 18px; }
.bx { position: relative; border-radius: 26px; background: #fff; padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; overflow: hidden; box-shadow: 0 20px 44px rgba(90, 50, 90, .1), inset 0 0 0 1px #f3e5ee; }
.bx b { font: 700 19px/1.2 var(--font); position: relative; } .bx small { font: 500 14.5px/1.4 var(--font); color: var(--ink-soft); position: relative; }
.bx.big { grid-column: span 2; grid-row: span 2; }
.b-video { padding: 0; justify-content: stretch; background: var(--blush); }
.b-video video { position: absolute; inset: 14px 14px 76px; width: calc(100% - 28px); height: calc(100% - 90px); object-fit: cover; object-position: top; border-radius: 16px; background: #faf6f9; }
.b-video .bx-cap { position: absolute; left: 24px; right: 24px; bottom: 18px; display: grid; gap: 2px; }
.bento .b-video:not(.big) { background: var(--lilac); }
.b-offline { background: var(--sky); } .b-offline .cloud { position: absolute; top: 34px; left: 50%; translate: -50% 0; font-size: 92px; line-height: 1; color: #fff; text-shadow: 0 10px 24px rgba(90, 120, 170, .25); }
.b-offline .cloud i { position: absolute; left: 6px; right: 6px; top: 52%; height: 6px; border-radius: 3px; background: var(--ink); rotate: -32deg; }
.b-cmdk { background: var(--butter); } .keys { position: absolute; top: 46px; left: 50%; translate: -50% 0; display: flex; gap: 10px; }
.keys kbd { width: 72px; height: 72px; border-radius: 18px; background: #fff; display: grid; place-items: center; font: 700 30px/1 var(--font); box-shadow: 0 6px 0 #e9d9a0, 0 14px 24px rgba(90, 50, 90, .12); }
.b-ask { background: var(--mint); } .price { position: absolute; top: 56px; left: 50%; translate: -50% 0; padding: 14px 20px; border-radius: 18px; background: #fff; font: 800 22px/1 var(--font); box-shadow: 0 12px 26px rgba(90, 50, 90, .12); white-space: nowrap; }
.b-dark { background: linear-gradient(135deg, #fff 0 50%, #2b2630 50%); } .b-dark b, .b-dark small { color: var(--ink); } .b-dark small { max-width: 60%; }
.toggle { position: absolute; top: 60px; left: 50%; translate: -50% 0; width: 110px; height: 60px; border-radius: 999px; background: var(--pink); box-shadow: inset 0 0 0 3px #fff, 0 10px 22px rgba(90, 50, 90, .16); }
.toggle i { position: absolute; top: 7px; left: 7px; width: 46px; height: 46px; border-radius: 50%; background: #fff; animation: flip 3s ease-in-out infinite; }
@keyframes flip { 0%, 40% { translate: 0 0; } 50%, 90% { translate: 50px 0; } 100% { translate: 0 0; } }

/* 7 · helpers */
.helpers { width: min(1000px, calc(100% - 40px)); margin: 0 auto; padding: 110px 0 20px; }
.logos { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.lg { width: 230px; padding: 26px 20px; border-radius: 24px; background: #fff; display: grid; justify-items: center; gap: 6px; text-align: center; box-shadow: 0 16px 36px rgba(90, 50, 90, .1), inset 0 0 0 1px #f3e5ee; }
.lg img { width: 54px; height: 54px; object-fit: contain; border-radius: 12px; margin-bottom: 6px; } .lg b { font: 700 17px/1.2 var(--font); } .lg small { font: 500 14px/1.3 var(--font); color: var(--ink-soft); }
.lg:nth-child(1) { rotate: -2deg; } .lg:nth-child(3) { rotate: 2deg; }

/* 8 · download */
.download { width: min(980px, calc(100% - 40px)); margin: 0 auto; padding: 120px 0 40px; }
.dl-card { position: relative; isolation: isolate; padding: 70px 44px 44px; text-align: center; }
.dl-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 40px; background: linear-gradient(160deg, #ffe3ef, #fff6d6 55%, #e3f2ff); box-shadow: 0 40px 80px rgba(90, 50, 90, .16); filter: url(#wob); }
.dl-goo { position: absolute; left: 50%; top: -56px; translate: -50% 0; width: 128px; height: 112px; image-rendering: pixelated; }
.dl-card > p { font: 500 19px/1.5 var(--font); color: var(--ink-soft); margin: 14px 0 22px; }
.stat-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 26px; }
.stat { padding: 9px 16px; border-radius: 999px; background: rgba(255, 255, 255, .8); font: 500 15px/1 var(--font); color: var(--ink-soft); } .stat b { color: var(--ink); font-weight: 800; }
.note { margin-top: 22px; font: 500 14px/1.5 var(--font); color: var(--ink-soft); }

/* 9 · faq */
.faq { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: 110px 0 120px; }
.faq h2 { margin-bottom: 30px; }
details { margin-top: 10px; padding: 18px 22px; border-radius: 18px; background: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 1px #f2e2ec; }
summary { cursor: pointer; list-style: none; font: 700 18px/1.3 var(--font); display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-weight: 500; color: var(--pink-deep); transition: transform .3s; } details[open] summary::after { transform: rotate(45deg); }
details p { margin-top: 12px; font: 500 16.5px/1.6 var(--font); color: var(--ink-soft); }

/* footer: dark band, Mochi hopping along the giant wordmark */
.foot { background: #241f28; color: #fff; padding: 80px 24px 40px; text-align: center; overflow: hidden; }
.foot-line { font: 500 19px/1.5 var(--font); color: #d9cfdc; max-width: 40ch; margin: 0 auto; } .foot-line a { color: #ffb8d4; }
.foot-links { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mb-hop { --wm: #ff9ec4; position: relative; width: 100%; margin: 60px auto 0; text-align: center; user-select: none; }
.mb-hop canvas { position: absolute; left: 0; top: 0; z-index: 2; image-rendering: pixelated; pointer-events: none; transform-origin: 50% 100%; }
.mb-hop .wm { display: inline-block; white-space: nowrap; font: 800 120px/.86 var(--font); letter-spacing: -.06em; color: var(--wm); text-decoration: none; }
.mb-hop .wm span { display: inline-block; transform-origin: 50% 100%; padding: 0 .02em; margin: 0 -.02em;
  background: linear-gradient(115deg, #ff8fc2, #f8c95a, #6fd3a0, #8cc1ff, #b89bff, #ff8fc2) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; }
.mb-hop .wm span.boing { animation: mbBoing .62s cubic-bezier(.3, 1.6, .5, 1), mbBloom 2.4s ease-out; }
@keyframes mbBoing { 0% { transform: scale(1.06, .8); } 35% { transform: scale(.96, 1.08) translateY(-7%); } 65% { transform: scale(1.02, .97); } 100% { transform: none; } }
@keyframes mbBloom { 0% { color: var(--wm); background-position: 0 0; } 12%, 55% { color: transparent; } 100% { color: var(--wm); background-position: 100% 0; } }

/* the real app, in a big friendly window */
.live { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 3vh 3vw; background: rgba(255, 230, 240, .7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.live[hidden] { display: none; }
.live-panel { position: relative; width: 100%; height: 100%; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 40px 100px rgba(90, 50, 90, .3); }
.live-panel iframe { width: 100%; height: 100%; border: 0; display: block; }
.live-x { position: absolute; right: 14px; top: 12px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--ink); color: #fff; font: 500 24px/1 var(--font); cursor: pointer; }

/* scroll-in */
.rise { opacity: 0; translate: 0 26px; transition: opacity .7s ease, translate .8s cubic-bezier(.2, .8, .2, 1); }
.rise.in { opacity: 1; translate: 0 0; }

@media (max-width: 900px) {
  .links { display: none; }
  .hero { height: 170vh; } .hero-sticky { padding-top: 92px; } .hero-win { width: 94vw; }
  .f1, .f4 { left: -2%; } .f2, .f3 { right: -2%; } .float.sticky { font-size: 16px; padding: 10px 12px; } .f3 { display: none; } .chip { font-size: 13px; }
  .orbit { height: 200vh; } .card-img { width: 140px; } .todo, .link { width: 150px; font-size: 12.5px; } .voice { width: 150px; } .ob .sticky { font-size: 16px; }
  .forms { height: 360vh; } .kind { width: 250px; } .demo { height: 220px; }
  .ask { grid-template-columns: 1fr; gap: 30px; padding: 40px 0; } .board { height: 440px; }
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; } .bx.big { grid-column: span 2; grid-row: span 1; height: 300px; }
  .tpl { width: calc(50% - 9px); }
}
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .bx.big { grid-column: auto; } .tpl { width: 100%; } .n { width: 120px; font-size: 16px; } .pill { padding: 14px 20px; font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; translate: none; } html { scroll-behavior: auto; } .toggle i { animation: none; } }
/* shelf previews that lay things out in a row: keep them centered in their box */
.d-wire, .d-swatch, .d-voice, .d-stamp, .d-canvas { justify-content: center; align-items: center; }
.d-swatch i:nth-child(odd) { translate: 0 -8px; } .d-swatch i:nth-child(even) { translate: 0 8px; }   /* the zig-zag stays balanced around the middle */
.d-link .lk:nth-child(2) { translate: 0 0; }
.d-canvas .mini.m2 { translate: 0 0; }
.d-stamp > :nth-child(odd) { translate: 0 -8px; } .d-stamp > :nth-child(even) { translate: 0 8px; }

/* real cards from the app */
.float.real { width: 190px; height: auto; filter: drop-shadow(0 18px 30px rgba(90, 50, 90, .16)); }
.f3.real { width: 120px; } .f4.real { width: 230px; } .f5.real { width: 150px; top: -70px; }
.ob.real { width: 200px; height: auto; border-radius: 18px; filter: drop-shadow(0 18px 34px rgba(90, 50, 90, .16)); }
.ob.real.w { width: 290px; }
.demo.real { background: #fbf8fc !important; padding: 14px; }
.demo.real img, .demo.real video { width: 100%; height: 100%; object-fit: contain; }
.kind { width: 340px; } .kind .demo { height: 280px; }
@media (max-width: 900px) { .float.real { width: 120px; } .f3.real { width: 80px; } .f4.real { width: 140px; } .f5.real { width: 100px; } .ob.real { width: 130px; } .ob.real.w { width: 180px; } .kind { width: 270px; } .kind .demo { height: 230px; } }

/* ---------- the shelf: live components, built like the app's own cards ---------- */
.kind .demo { overflow: visible; background: var(--bg) !important; padding: 0; isolation: isolate; }
.mcard { position: absolute; isolation: isolate; color: #494848; }
.mcard > .fr { position: absolute; inset: 0; z-index: -1; border-radius: 18px; background: var(--fill, #fff); filter: url(#wob); box-shadow: 0 14px 34px rgba(120, 80, 120, .16), 0 1px 3px rgba(0, 0, 0, .04); }
.pop-in { animation: popIn .55s cubic-bezier(.2, .9, .3, 1.4) both; }
.pop-out { animation: popOut .35s ease-in both; }
@keyframes popIn { from { opacity: 0; scale: .5; } to { opacity: 1; scale: 1; } }
@keyframes popOut { to { opacity: 0; scale: .7; } }
/* notes: white cards that pop onto the pink */
.c-notes .note { width: 150px; padding: 16px 16px 30px; font: 500 14px/1.45 var(--font); opacity: 0; }
.c-notes .n1 { left: 22px; top: -18px; rotate: -5deg; } .c-notes .n2 { right: 18px; top: 52px; rotate: 4deg; } .c-notes .n3 { left: 70px; bottom: -22px; rotate: -2deg; }
/* voice memo: records, stops, writes itself out */
.c-voice .audio { left: 50%; top: 50%; width: 270px; translate: -50% -50%; padding: 14px 16px; display: grid; gap: 10px; opacity: 0; }
.au-top { display: flex; align-items: center; gap: 8px; } .au-top b { flex: 1; font: 700 14px/1.25 var(--font); }
.au-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff5a6e; animation: blink 1s ease-in-out infinite; } @keyframes blink { 50% { opacity: .3; } }
.au-time { font: 600 11.5px/1 var(--font); color: #8d8595; font-variant-numeric: tabular-nums; }
.au-live { height: 34px; display: flex; align-items: center; gap: 3px; } .au-live i { flex: 1; border-radius: 2px; background: #ff5a6e; height: 20%; transition: height .12s; }
.au-row { display: none; align-items: center; gap: 10px; } .au-play { width: 30px; height: 30px; border-radius: 50%; background: #494848; display: grid; place-items: center; flex: none; } .au-play svg { width: 11px; fill: #fff; }
.au-wave { flex: 1; height: 30px; display: flex; align-items: center; gap: 2px; } .au-wave i { flex: 1; min-width: 1px; border-radius: 2px; background: #b9b2c2; } .au-wave i.past { background: #f27aa8; }
.au-tx { display: none; font: 400 12.5px/1.5 var(--font); padding: 9px 11px; border-radius: 12px; background: #faf5fb; min-height: 40px; }
.c-voice.done .au-live { display: none; } .c-voice.done .au-row { display: flex; } .c-voice.done .au-tx { display: block; } .c-voice.done .au-dot { display: none; }
/* drawing: ink straight on the board, no box */
.c-draw .ink { position: absolute; inset: -10px -14px; width: calc(100% + 28px); height: calc(100% + 20px); overflow: visible; }
.c-draw .ink path { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.c-draw .ink path.mk { stroke-width: 7; } .c-draw .ink path.hl { stroke-width: 16; opacity: .45; }
.pen-tip { position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 6px 14px rgba(90, 50, 90, .2); translate: -6px -24px; opacity: 0; transition: opacity .2s; }
.pen-tip svg { width: 16px; fill: none; stroke: #494848; stroke-width: 1.7; stroke-linejoin: round; }
/* colors: two swatch cards, tilted, poking out */
.c-colors .swatch { width: 128px; padding: 8px 8px 10px; display: grid; gap: 3px; }
.c-colors .swatch i { height: 112px; border-radius: 12px; margin-bottom: 6px; } .c-colors .swatch b { font: 700 13px/1.2 var(--font); padding: 0 4px; } .c-colors .swatch span { font: 500 10px/1 var(--font); letter-spacing: .06em; color: #8d8595; padding: 0 4px; }
.c-colors .s1 { left: 44px; top: -24px; rotate: -9deg; animation: bob 4s ease-in-out infinite; } .c-colors .s2 { right: 40px; top: 30px; rotate: 7deg; animation: bob 4s ease-in-out -2s infinite; }
@keyframes bob { 50% { translate: 0 -8px; } }
/* shapes: one shape, always changing */
.c-shapes .shape { position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; translate: -50% -50%; overflow: visible; filter: drop-shadow(0 16px 26px rgba(90, 50, 90, .18)); transition: rotate .5s; }
.c-shapes .shape path { transition: fill .4s; }
.c-shapes .shape.swap { animation: shapeSwap .5s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes shapeSwap { 0% { scale: .6; } 100% { scale: 1; } }
/* checklist: ticks itself off */
.c-todo .todo { left: 50%; top: 50%; width: 250px; translate: -50% -50%; rotate: -2deg; padding: 18px 20px 16px; }
.c-todo .head { font: 700 24px/1 var(--hand); margin-bottom: 10px; }
.c-todo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .c-todo li { display: flex; gap: 9px; align-items: center; font: 500 14px/1.3 var(--font); }
.c-todo .cb { flex: none; width: 16px; height: 16px; border-radius: 4px; border: 1.8px solid #8d8595; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.c-todo li.done .cb { background: #f27aa8; border-color: #f27aa8; } .c-todo li.done .cb::after { content: ""; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -1px; }
.c-todo li span { position: relative; transition: color .3s; } .c-todo li span::after { content: ""; position: absolute; left: 0; top: 52%; height: 1.5px; width: 0; background: #b9b2c2; transition: width .4s ease; }
.c-todo li.done span { color: #b9b2c2; } .c-todo li.done span::after { width: 100%; }
.c-todo .add { margin-top: 10px; font: 700 16px/1 var(--hand); color: #8d8595; }
/* wireframe: one phone building itself, turned a little */
.phone-wf { position: absolute; left: 50%; top: -26px; width: 150px; translate: -50% 0; rotate: -10deg; transform: perspective(700px) rotateY(14deg); }
.wf-name { font: 600 11px/1 var(--font); color: #6b6370; margin: 0 0 6px 4px; }
.wf-body { height: 300px; border-radius: 22px; background: #fff; box-shadow: 0 24px 44px rgba(90, 50, 90, .22), inset 0 0 0 1px rgba(0, 0, 0, .06); padding: 16px 12px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; }
.wf-body .p { display: block; border-radius: 6px; opacity: 0; translate: 0 10px; transition: opacity .35s, translate .45s cubic-bezier(.2, .9, .3, 1.3); }
.wf-body .p.in { opacity: 1; translate: 0 0; }
.wf-body .bar { height: 10px; width: 40%; background: #e4dfe7; } .wf-body .img { height: 90px; background: #e9e4ee; border-radius: 12px; }
.wf-body .h1 { height: 14px; width: 80%; background: #494848; } .wf-body .t1 { height: 8px; width: 92%; background: #d7d0de; } .wf-body .t2 { height: 8px; width: 64%; background: #d7d0de; }
.wf-body .btn { margin-top: auto; height: 30px; border-radius: 999px; background: #494848; } .wf-body .btn2 { height: 30px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px #494848; }
/* stamps: one stamp, swapping */
.c-stamp .stampx { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; translate: -50% -50%; display: grid; place-items: center;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 12px 18px rgba(90, 50, 90, .22)); }
.c-stamp .stampx span { font-size: 92px; line-height: 1; display: grid; place-items: center; } .c-stamp .stampx img { width: 110px; image-rendering: pixelated; }
.c-stamp .stampx.go { animation: stampin .4s cubic-bezier(.2, .9, .3, 1.5); }
@keyframes stampin { 0% { scale: 1.6; opacity: 0; rotate: -14deg; } 100% { scale: 1; opacity: 1; } }
/* canvas: the canvas card on its own */
.c-canvas .canvas { left: 50%; top: 50%; width: 270px; height: 214px; translate: -50% -50%; rotate: 3deg; }
.c-canvas .cv-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 8px; font: 700 15px/1 var(--font); }
.c-canvas .cv-head svg { width: 18px; fill: #494848; }
.c-canvas .cv-prev { position: absolute; left: 12px; right: 12px; top: 48px; bottom: 12px; border-radius: 12px; background: #faf5fb; overflow: hidden; background-image: radial-gradient(#ece2ee 1px, transparent 1.2px); background-size: 10px 10px; }
.c-canvas .m { position: absolute; padding: 7px 8px; font: 500 9.5px/1.25 var(--font); font-style: normal; border-radius: 6px; box-shadow: 0 4px 8px rgba(90, 50, 90, .1); opacity: 0; scale: .6; transition: opacity .3s, scale .45s cubic-bezier(.2, .9, .3, 1.5); }
.c-canvas .m.in { opacity: 1; scale: 1; }
.c-canvas .m1 { left: 14px; top: 14px; width: 92px; height: 50px; background: #fff5c8; rotate: -3deg; } .c-canvas .m2 { left: 122px; top: 22px; width: 96px; height: 50px; background: #ffe0ec; rotate: 3deg; }
.c-canvas .m3 { left: 40px; top: 86px; width: 92px; height: 46px; background: #dcf5e7; rotate: 2deg; } .c-canvas .sw { left: 160px; top: 84px; width: 46px; height: 56px; background: #fff; padding: 4px; rotate: -4deg; }
.c-canvas .sw::before { content: ""; display: block; height: 32px; border-radius: 4px; background: #ff9ec4; }
@media (prefers-reduced-motion: reduce) { .c-notes .note, .c-voice .audio, .wf-body .p, .c-canvas .m { opacity: 1 !important; translate: none; scale: 1; } }
.shelf { padding-top: 46px; padding-bottom: 46px; }

/* ---------- orbit + hero: real components, no backgrounds ---------- */
.ob, .float { position: absolute; }
.ob .mcard, .float .mcard { position: relative; }
.ob .note, .float .note { width: 170px; padding: 15px 16px 22px; font: 500 14px/1.45 var(--font); }
.ob .note .nn, .float .note .nn { display: block; font: 700 14px/1.3 var(--font); margin-bottom: 4px; }
.ob .note p, .float .note p { margin: 0; }
.ob .note.sm { width: 112px; padding: 9px 10px 12px; font-size: 11px; }
.ob .audio { width: 250px; padding: 13px 15px; display: grid; gap: 9px; }
.ob .audio .au-row { display: flex; } .ob .audio .au-tx { display: block; font-size: 11.5px; padding: 8px 10px; }
.ob .todo, .float .todo { width: 200px; padding: 16px 18px 14px; }
.ob .todo .head, .float .todo .head { font: 700 21px/1 var(--hand); margin-bottom: 8px; }
.ob .todo ul, .float .todo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ob .todo li, .float .todo li { display: flex; gap: 8px; align-items: center; font: 500 13px/1.3 var(--font); }
.ob .cb, .float .cb { flex: none; width: 14px; height: 14px; border-radius: 4px; border: 1.8px solid #8d8595; display: grid; place-items: center; }
.ob li.done .cb, .float li.done .cb { background: #f27aa8; border-color: #f27aa8; } .ob li.done .cb::after, .float li.done .cb::after { content: ""; width: 3px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -1px; }
.ob li.done span, .float li.done span { color: #b9b2c2; text-decoration: line-through; }
.ob .swatch, .float .swatch { width: 112px; padding: 8px 8px 10px; display: grid; gap: 3px; }
.ob .swatch i, .float .swatch i { height: 92px; border-radius: 12px; margin-bottom: 6px; } .ob .swatch b, .float .swatch b { font: 700 12.5px/1.2 var(--font); padding: 0 4px; } .ob .swatch span, .float .swatch span { font: 500 10px/1 var(--font); letter-spacing: .06em; color: #8d8595; padding: 0 4px; }
.oshape { width: 110px; height: 110px; overflow: visible; filter: drop-shadow(0 14px 22px rgba(90, 50, 90, .18)); }
.ostamp { width: 74px; height: 74px; display: grid; place-items: center; filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 10px 14px rgba(90, 50, 90, .2)); }
.ostamp img { width: 70px; image-rendering: pixelated; } .ostamp span { font-size: 58px; line-height: 1; }
.ob .canvas { width: 240px; height: 190px; } .ob .canvas .cv-head { display: flex; align-items: center; gap: 10px; padding: 13px 15px 8px; font: 700 14px/1 var(--font); }
.ob .canvas .ic { width: 17px; fill: #494848; } .ob .canvas .cv-prev { position: absolute; left: 11px; right: 11px; top: 44px; bottom: 11px; border-radius: 12px; background: #faf5fb; background-image: radial-gradient(#ece2ee 1px, transparent 1.2px); background-size: 10px 10px; overflow: hidden; }
.ob .canvas .m { position: absolute; padding: 6px 7px; font: 500 9px/1.25 var(--font); font-style: normal; border-radius: 6px; box-shadow: 0 4px 8px rgba(90, 50, 90, .1); }
.ob .canvas .m1 { left: 12px; top: 12px; width: 84px; height: 44px; background: #fff5c8; rotate: -3deg; } .ob .canvas .m2 { left: 112px; top: 18px; width: 86px; height: 44px; background: #ffe0ec; rotate: 3deg; } .ob .canvas .m3 { left: 46px; top: 76px; width: 84px; height: 40px; background: #dcf5e7; rotate: 2deg; }
.ob .link { width: 220px; height: 190px; display: flex; flex-direction: column; overflow: hidden; } .ob .link > .fr { overflow: hidden; }
.ob .link .thumb { flex: 1; margin: 8px 8px 0; border-radius: 12px; background: #dbecff center top / cover; }
.ob .link .meta { padding: 10px 14px 12px; } .ob .link .meta b { display: block; font: 700 14px/1.25 var(--font); } .ob .link .meta span { display: block; margin-top: 3px; font: 500 12px/1 var(--font); color: #8d8595; }
.ob .doc { height: 52px; padding: 0 18px; display: flex; align-items: center; gap: 10px; font: 600 14px/1 var(--font); white-space: nowrap; }
.ob .doc .ic, .ob .doc .st { width: 19px; fill: none; stroke: #494848; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ob .font { width: 150px; padding: 12px 14px 14px; display: grid; gap: 2px; } .ob .font .aa { font: 700 64px/1.05 var(--hand); color: #494848; } .ob .font b { font: 700 13px/1.2 var(--font); } .ob .font span { font: 500 11px/1 var(--font); color: #8d8595; }
.ocoll { position: relative; width: 150px; } .ocoll .ch { height: 34px; border-radius: 12px; background: #ffb8d2; display: grid; place-items: center; font: 700 13px/1 var(--font); color: #494848; }
.ocoll .cf { margin-top: 8px; padding: 10px; border-radius: 18px; background: #ffe3ee; display: grid; gap: 8px; justify-items: center; } .ocoll .note { position: relative; }
.ob .image { width: 170px; height: 200px; padding: 8px; } .ob .image img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.owire { width: 104px; height: 200px; border-radius: 18px; background: #fff; box-shadow: 0 18px 32px rgba(90, 50, 90, .18), inset 0 0 0 1px rgba(0, 0, 0, .06); padding: 12px 10px; display: flex; flex-direction: column; gap: 7px; }
.owire .p { display: block; border-radius: 5px; } .owire .bar { height: 7px; width: 40%; background: #e4dfe7; } .owire .img { height: 60px; border-radius: 9px; background: #e9e4ee; }
.owire .h1 { height: 10px; width: 80%; background: #494848; } .owire .t1 { height: 6px; width: 90%; background: #d7d0de; } .owire .btn { margin-top: auto; height: 22px; border-radius: 999px; background: #494848; }
.oink { width: 170px; height: 96px; overflow: visible; } .oink path { fill: none; stroke-width: 4; stroke-linecap: round; } .oink path.hl { stroke-width: 12; opacity: .45; }
.otitle { font: 800 46px/1 var(--font); letter-spacing: -.04em; color: #494848; white-space: nowrap; }
.float .note { width: 180px; }
@media (max-width: 900px) { .orbit-ring .ob { scale: .62; } .float { scale: .7; } }
/* the line always reads on top of the cards drifting past */
.orbit-ring { z-index: 1; } .orbit-goo { z-index: 2; }
.orbit-line { z-index: 4; text-shadow: 0 0 18px var(--paper), 0 0 6px var(--paper), 0 0 2px var(--paper); }
/* works offline: sleepy Mochi with a pixel no-wifi sign */
.b-offline .offline-art { position: absolute; top: 26px; left: 50%; translate: -50% 0; width: 170px; height: 120px; }
.b-offline .om { position: absolute; left: 10px; bottom: 0; width: 110px; image-rendering: pixelated; filter: drop-shadow(0 10px 16px rgba(20, 128, 219, .25)); }
.b-offline .ow { position: absolute; right: 0; top: 0; width: 64px; image-rendering: pixelated; animation: bob 3s ease-in-out infinite; filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff); }
.b-offline .cloud { display: none; }
/* light and dark: a light card that goes dark when the switch flips */
.b-dark { background: #fff !important; transition: background .5s ease, color .5s; cursor: pointer; }
.b-dark b, .b-dark small { transition: color .5s; } .b-dark small { max-width: none; }
.b-dark .toggle { border: 0; padding: 0; cursor: pointer; background: #f1eaf2; box-shadow: inset 0 0 0 2px #e6dcea, 0 8px 18px rgba(90, 50, 90, .12); transition: background .4s; }
.b-dark .toggle i { animation: none; transition: translate .45s cubic-bezier(.34, 1.56, .64, 1), background .4s; }
.b-dark.on { background: #241f28 !important; } .b-dark.on b { color: #fff; } .b-dark.on small { color: #cfc6d6; }
.b-dark.on .toggle { background: var(--pink); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25), 0 8px 18px rgba(0, 0, 0, .3); } .b-dark.on .toggle i { translate: 50px 0; }
.b-offline .offline-art { width: 210px; } .b-offline .om { left: 0; width: 116px; } .b-offline .ow { right: 0; top: -6px; width: 76px; }
/* hero sits a little lower under the nav */
.hero-sticky { padding-top: 150px; }
@media (max-width: 900px) { .hero-sticky { padding-top: 116px; } }

/* ---------- phones: a calm stacked layout, no pinned scroll tricks ---------- */
@media (max-width: 900px) {
  .hero, .orbit, .forms { height: auto; }
  .hero-sticky, .orbit-sticky, .forms-sticky { position: static; height: auto; overflow: visible; }
  /* hero: the words, then the app window right under them with a few cards poking out */
  .hero-sticky { padding: 112px 0 30px; }
  .hero-win { position: relative; top: auto; left: auto; translate: none; width: calc(100% - 40px); margin: 44px auto 0; }
  .hero-win .window { rotate: -1.5deg; }
  .hero-win .float { scale: .62; transform-origin: center; }
  .hero-win .f1 { left: -34px; top: auto; bottom: -46px; } .hero-win .f2 { right: -38px; top: -40px; } .hero-win .f3 { display: none; }
  .hero-win .f4 { display: none; } .hero-win .f5 { left: 8px; top: -44px; }
  .live-btn { right: 10px; bottom: 10px; padding: 9px 13px; font-size: 13px; }
  /* orbit: the line, Mochi, then two rows of real cards drifting sideways */
  .orbit-sticky { display: grid; justify-items: center; padding: 80px 0 30px; gap: 22px; overflow: hidden; }
  .orbit-line { position: static; order: 1; }
  .orbit-goo { order: 2; width: 120px; }
  .orbit-ring { position: static; order: 3; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 10px; padding: 10px 12px; }
  .orbit-ring .ob { position: relative; left: auto; top: auto; transform: none !important; scale: 1; }
  .orbit-ring .ob:nth-child(odd) { rotate: -3deg; } .orbit-ring .ob:nth-child(even) { rotate: 3deg; translate: 0 8px; }
  .orbit-ring .ob:nth-child(n+11) { display: none; }   /* ten favorites on a phone */
  .ob .note { width: 150px; } .ob .audio { width: 230px; } .ob .canvas { width: 220px; } .ob .link { width: 190px; height: 170px; } .ob .image { width: 150px; height: 180px; }
  /* shelf: swipe sideways with your thumb */
  .forms-sticky { padding: 70px 0 10px; gap: 10px; }
  .shelf { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 46px 20px 50px; }
  .shelf::-webkit-scrollbar { display: none; }
  .kind { scroll-snap-align: center; width: 280px; } .kind .demo { height: 250px; }
}
@media (max-width: 900px) {
  .bento { grid-auto-rows: minmax(220px, auto); }
  .bento .bx.big { height: auto; min-height: 330px; grid-row: span 1; }
}
/* works offline: just the pixel no-wifi sign, centered */
.b-offline .offline-art { width: 120px; height: 120px; top: 30px; }
.b-offline .ow { left: 0; right: 0; top: 0; width: 120px; }
@media (max-width: 900px) { .b-offline .offline-art { top: 24px; } }
/* the card under your cursor comes forward */
.ob { transition: filter .25s; } .ob.hovered { z-index: 5; filter: drop-shadow(0 22px 30px rgba(90, 50, 90, .22)); }
/* phones: the seven templates become a swipeable row of smaller cards */
@media (max-width: 900px) {
  .templates { width: 100%; padding-top: 80px; }
  .templates h2, .templates .sub, .templates .tag { padding: 0 20px; }
  .tpl-grid { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 12px; margin-top: 30px; padding: 16px 20px 26px; }
  .tpl-grid::-webkit-scrollbar { display: none; }
  .tpl { flex: none; width: 190px; padding: 16px 16px 18px; scroll-snap-align: center; }
  .tpl .ti { width: 40px; height: 40px; margin-bottom: 8px; border-radius: 12px; } .tpl .ti svg { width: 20px; height: 20px; }
  .tpl b { font-size: 16px; } .tpl small { font-size: 13px; }
  .tpl:nth-child(even) { translate: 0 6px; }
}
@media (max-width: 900px) { .bento-wrap, .helpers { padding-top: 56px; } .templates { padding-bottom: 0; } }

/* ---------- custom cursor: Mochi-blue pixel arrow, pixel hand over anything you can press ---------- */
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: image-set(url(media/px/cursor-arrow@1x.png) 1x, url(media/px/cursor-arrow@2x.png) 2x) 2 2, auto; }
  a, button, summary, [data-q], [data-tpl], .tpl, .ob, .b-dark, label, .live-btn, .pill, .asks button, .toggle { cursor: image-set(url(media/px/cursor-hand@1x.png) 1x, url(media/px/cursor-hand@2x.png) 2x) 12 2, pointer !important; }
}
/* a tiny Mochi tags along behind the cursor */
.buddy { position: fixed; left: 0; top: 0; z-index: 200; width: 34px; height: 30px; image-rendering: pixelated; pointer-events: none; opacity: 0; transition: opacity .3s; will-change: transform; }
.buddy.on { opacity: 1; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .buddy { display: none; } }

/* ---------- custom scrollbar: a soft pink pill on the paper ---------- */
html { scrollbar-width: thin; scrollbar-color: #ff9ec4 #fdf2f7; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #fdf2f7; }
::-webkit-scrollbar-thumb { background: #ffb8d4; border-radius: 999px; border: 3px solid #fdf2f7; }
::-webkit-scrollbar-thumb:hover { background: #ff8fc2; }
::-webkit-scrollbar-thumb:active { background: #e2649a; }
::-webkit-scrollbar-corner { background: #fdf2f7; }
/* the pinned scenes only clip sideways: floating cards can drift in from above (and the window's soft shadow can fade)
   instead of being sliced by a hard line where one section meets the next */
.hero-sticky, .orbit-sticky, .forms-sticky { overflow: visible; overflow-x: clip; }