body.fp {
  --pearl: #FBFAFF;
  --sheet: rgba(255, 255, 255, .78);
  --edge: rgba(255, 255, 255, .92);
  --ink: #17152A;
  --ink-2: #5A5775;
  --ink-3: #77738F;
  --hair: rgba(23, 21, 42, .09);
  --violet: #8B6CFF;
  --glow: 0 24px 60px -18px rgba(108, 86, 210, .2), 0 2px 8px rgba(23, 21, 42, .05);
  --glow-sm: 0 10px 28px -14px rgba(108, 86, 210, .26), 0 1px 3px rgba(23, 21, 42, .05);
  --glow-ink: 0 12px 30px -12px rgba(108, 86, 210, .6), 0 2px 6px rgba(23, 21, 42, .18);
  --r: 16px; --r-sm: 10px;
  --display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --text: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gut: 32px;
  --max: 1240px;
  
  --f0: #F4F0FF; --f1: #8B6CFF; --f2: #FFB38A; --f3: #BFE9D8;
  --acc: var(--ink); --acc-ink: #fff;
  margin: 0; background: var(--pearl); color: var(--ink); font: 400 16px/1.55 var(--text); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
@media (min-width: 1700px) { body.fp { --max: 1480px; --gut: 48px; } }
html[data-brand-mode="brand"] body.fp { --pearl: var(--brand-tint); --ink: var(--brand-ink); --display: var(--brand-display); --acc: var(--brand-accent); --acc-ink: var(--brand-accent-ink); transition: background .6s; }
body.fp *, body.fp *::before, body.fp *::after { box-sizing: border-box; }
.fp h1, .fp h2, .fp h3, .fp p, .fp figure, .fp ol, .fp ul { margin: 0; }
.fp ol, .fp ul { padding: 0; list-style: none; }
.fp button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
.fp a { color: inherit; }
.fp :focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.fp [hidden] { display: none !important; }
.fp img { max-width: 100%; }
.fp .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fp .vi, .fp [data-vi] { width: 18px; height: 18px; flex: none; }


.fp .aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

.fp .aurora i { position: absolute; box-sizing: content-box; padding: 110px; margin: -110px; transition: background 1s; }
.fp .aurora .a1 { width: 62vmax; height: 52vmax; left: -24vmax; top: -30vmax; background: radial-gradient(closest-side, #E4DCFF, 35%, transparent); opacity: .6; }
.fp .aurora .a2 { width: 50vmax; height: 44vmax; right: -22vmax; top: -26vmax; background: radial-gradient(closest-side, #FFE6D9, 35%, transparent); opacity: .45; }
.fp .aurora .a3 { width: 56vmax; height: 50vmax; right: -16vmax; bottom: -26vmax; background: radial-gradient(closest-side, #D3F3E7, 35%, transparent); opacity: .7; }
.fp .aurora .a4 { width: 50vmax; height: 46vmax; left: -18vmax; bottom: -24vmax; background: radial-gradient(closest-side, #D7E5FF, 35%, transparent); opacity: .7; }
html[data-brand-mode="brand"] .fp .aurora .a1 { background: radial-gradient(closest-side, var(--b1-soft, #E4DCFF), 35%, transparent); }
html[data-brand-mode="brand"] .fp .aurora .a2 { background: radial-gradient(closest-side, var(--b2-soft, #FFE6D9), 35%, transparent); }
html[data-brand-mode="brand"] .fp .aurora .a3 { background: radial-gradient(closest-side, var(--b3-soft, #D3F3E7), 35%, transparent); }


.fp .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.fp .wrap.narrow { max-width: 900px; }
.fp .sheet { background: var(--sheet); border: 1px solid var(--edge); border-radius: var(--r); box-shadow: var(--glow); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.fp .s { padding: 56px 0; }
.fp .sh { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 24px; }
.fp .sh h2 { font: 800 clamp(26px, 3.2vw, 38px)/1.08 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.fp .sh p { margin-top: 8px; color: var(--ink-2); font-size: 16.5px; max-width: 62ch; text-wrap: pretty; }
.fp .mark { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--sheet); border: 1px solid var(--edge); box-shadow: var(--glow-sm); color: var(--ink); flex: none; }
.fp .mark .vi, .fp .mark [data-vi] { width: 22px; height: 22px; }
.fp .link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); text-underline-offset: 3px; }
.fp .link:hover { text-decoration-color: currentColor; }
.fp .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 12px 18px; border-radius: var(--r-sm); font: 700 15.5px/1.2 var(--text); text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s; }
.fp .btn.ink { background: var(--ink); color: #fff; box-shadow: var(--glow-ink); }
.fp .btn.ink:hover { transform: translateY(-1px); }
.fp .btn.plain { background: var(--sheet); border: 1px solid var(--hair); color: var(--ink); }
.fp .btn.plain:hover { background: #fff; }


.fp .hero { padding: 28px 0 40px; }
.fp .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; min-height: min(640px, calc(100vh - 110px)); }
.fp .hero h1 { font: 800 clamp(40px, 5.4vw, 72px)/1 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.fp .hero h1 em { font-style: normal; color: var(--acc); }

@media (min-width: 901px) { .fp .hero h1 em { font-size: .8em; } }
html:not([data-brand-mode="brand"]) .fp .hero h1 em { background: linear-gradient(100deg, #5B3FD6, #8B6CFF 55%, #E77FB4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fp .hero .sub { margin-top: 16px; font-size: clamp(17px, 1.5vw, 19px); color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.fp .hero-site, .fp .hero-nosite { margin-top: 26px; }
.fp .fieldwrap { position: relative; max-width: 560px; padding-top: 14px; }
.fp .field { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r); box-shadow: var(--glow); max-width: 560px; }
.fp .field input[type="text"] { flex: 1; min-width: 0; height: 52px; border: 0; outline: 0; background: transparent; font: 500 18px/1 var(--text); color: var(--ink); }
.fp .field input::placeholder, .fp .ideabox textarea::placeholder { color: var(--ink-3); }
.fp .field:focus-within, .fp .ideabox:focus-within { border-color: color-mix(in srgb, var(--violet) 50%, transparent); box-shadow: 0 0 0 4px rgba(139, 108, 255, .14), var(--glow); }
.fp .under { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 14px; font-size: 14.5px; color: var(--ink-2); }
.fp .under .link { font-size: 14.5px; }


@media (max-width: 899px) {
  .fp .under .link, .fp .link#nosite, .fp .link#hurry, .fp a.link, .fp .mine { min-height: 44px; }
  .fp .ba-pause.ba-pause { width: 44px; height: 44px; }
}
.fp .under .link [data-vi], .fp .under .link .vi { width: 16px; height: 16px; }


.fp .nbtn { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 15px 20px 13px 14px; margin-top: 6px; border-radius: var(--r-sm);
  background: var(--acc); color: var(--acc-ink); font: 800 17px/1 var(--display); letter-spacing: -.01em; white-space: nowrap; box-shadow: var(--glow-ink); transition: transform .15s, box-shadow .15s, background .4s; flex: none; }
.fp .nbtn .clap { position: absolute; left: 0; right: 0; top: -10px; height: 11px; border-radius: 4px 4px 0 0; background: repeating-linear-gradient(-55deg, var(--ink) 0 9px, #fff 9px 18px); box-shadow: inset 0 0 0 1.5px var(--ink);
  transform-origin: 4px 100%; transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }
.fp .nbtn:hover { transform: translateY(-1px); }
.fp .nbtn:hover .clap, .fp .nbtn:focus-visible .clap { transform: rotate(-14deg); }
.fp .nbtn:active .clap { transform: rotate(0); transition-duration: .05s; }
.fp .nbtn:active { transform: translateY(1px); }
.fp .nb-eyes { display: inline-flex; gap: 4px; padding: 5px 6px; border-radius: 6px; background: var(--acc-ink); }
.fp .nb-eyes i { width: 6px; height: 9px; border-radius: 3px; background: var(--acc); animation: nblink 4s infinite; }
@keyframes nblink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.fp .nbtn[aria-busy="true"] .nb-eyes i { animation: nblook 0.9s infinite alternate; }
@keyframes nblook { to { transform: translateX(2px); } }


.fp .handnote { position: absolute; right: 150px; top: -58px; pointer-events: none; display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 2px; color: var(--ink); }
.fp .handnote span { font: 700 21px/1.02 'Caveat', 'Bricolage Grotesque', cursive; transform: rotate(-4deg); white-space: nowrap; }
.fp .handnote svg { width: 62px; height: 44px; margin-top: 10px; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 901px) { .fp .hero-site { margin-top: 56px; } }

@media (min-width: 901px) {
  .fp .handnote { right: 153px; top: -50px; }
  .fp .handnote svg { width: 130px; height: 84px; }
}
.fp .handnote path { stroke-dasharray: 220; stroke-dashoffset: 220; animation: drawarrow 1.2s .6s ease forwards; }
@keyframes drawarrow { to { stroke-dashoffset: 0; } }
html.read-started .fp .handnote { opacity: 0; transition: opacity .4s; }

@media (max-width: 900px) {
  .fp .fieldwrap:has(.handnote) { padding-top: 50px; }
  .fp .handnote { right: 4px; top: 2px; gap: 0; }
  .fp .handnote span { font-size: 19px; }
  .fp .handnote svg { width: 70px; height: 54px; margin-top: 8px; }
}


.fp .ideabox { display: flex; align-items: flex-end; gap: 10px; padding: 10px 10px 10px 16px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r); box-shadow: var(--glow); max-width: 560px; }
.fp .ideabox textarea { flex: 1; min-width: 0; border: 0; outline: 0; resize: none; background: transparent; font: 500 17px/25px var(--text); color: var(--ink); padding: 12px 0; height: 49px; max-height: 95px; overflow-y: auto; }
.fp .templ { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; font-size: 13.5px; color: var(--ink-2); max-width: 600px; }
.fp .templ button { padding: 7px 11px; border-radius: var(--r-sm); background: var(--sheet); border: 1px solid var(--hair); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.fp .templ button:hover { background: #fff; }
.fp #backsite { margin-top: 14px; font-size: 14.5px; }
.fp .fade-out { opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s; }
.fp .fade-in { animation: fadein .35s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } }



.fp .herocrew { position: relative; display: flex; align-items: flex-end; gap: 6px; margin-top: 30px; flex-wrap: wrap; }
.fp-home .herocrew { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); align-items: end; gap: 4px; max-width: 560px; }
.fp .hc { width: 62px; height: 68px; display: block; position: relative; overflow: hidden; border-radius: var(--r-sm); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }

.fp .hc img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.fp-home .hc { width: 100%; height: auto; aspect-ratio: 1000 / 1100; }
.fp .hc:hover, .fp .hc.on { transform: translateY(-4px); }
.fp .hbubble { grid-column: 1 / -1; flex-basis: 100%; margin-top: 8px; font-size: 14px; color: var(--ink-2); min-height: 22px; }
.fp .hbubble b { font-family: var(--display); color: var(--ink); margin-right: 2px; }


.fp .resume { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--sheet); border: 1px solid var(--edge); box-shadow: var(--glow-sm); font-size: 14.5px; }
.fp .resume .btn { min-height: 38px; padding: 8px 14px; font-size: 14px; }


.fp .live { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.fp .lv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; }
.fp .lv-top b { font: 800 17px/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp .dots { display: inline-flex; gap: 6px; flex: none; }
.fp .dots i { width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(23, 21, 42, .12); }
.fp .dots i.pop { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes pop { from { transform: scale(0); } }
.fp .lv-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden; background: var(--f0); }
.fp .scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fp .scene .ly { transition: fill .7s; }
.fp .lv-frame.building .ly { animation: layer 6.4s infinite both; }
.fp .lv-frame.building .ly1 { animation-delay: .5s; } .fp .lv-frame.building .ly2 { animation-delay: 1s; } .fp .lv-frame.building .ly3 { animation-delay: 1.5s; }
.fp .lv-frame.building .ly4 { animation-delay: 2s; } .fp .lv-frame.building .ly5 { animation-delay: 2.5s; } .fp .lv-frame.building .ly6 { animation-delay: 3s; }
.fp .lv-frame.building .ly0 { animation: none; }
@keyframes layer { 0% { opacity: 0; transform: translateY(10px); } 8%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.fp .lv-title { position: absolute; left: 13.5%; top: 31%; width: 34%; font: 800 clamp(15px, 2.1vw, 28px)/1.02 var(--display); letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
.fp .lv-frame.building .lv-title { animation: layer 6.4s 1.8s infinite both; }
.fp .lv-tag { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px; background: rgba(255, 255, 255, .86); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.fp .lv-tag [data-vi], .fp .lv-tag .vi { width: 15px; height: 15px; }
.fp .lv-say { display: flex; align-items: flex-end; gap: 10px; min-height: 56px; }
.fp .lv-say img { width: 44px; height: auto; flex: none; margin-bottom: -4px; }
.fp .lv-say p { flex: 1; padding: 10px 13px; border-radius: 12px 12px 12px 4px; background: #fff; border: 1px solid var(--hair); font-size: 15px; line-height: 1.4; }
.fp .lv-say p b { font-family: var(--display); margin-right: 3px; }
.fp .lv-say.bump p { animation: bump .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bump { from { transform: translateY(6px) scale(.97); opacity: .3; } }
.fp .lv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fp .lv-chips li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--hair); font-size: 13.5px; font-weight: 600; max-width: 100%; animation: fly .55s cubic-bezier(.3, 1.4, .5, 1) both; }
.fp .lv-chips li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp .lv-chips li i.sw { width: 12px; height: 12px; border-radius: 4px; display: inline-block; flex: none; }
@keyframes fly { from { opacity: 0; transform: translate(-30px, -16px) scale(.8); } }
.fp .gate { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--ink); color: #fff; box-shadow: var(--glow-ink); text-align: left; animation: fadein .4s ease; }
.fp .gate:hover { transform: translateY(-1px); }
.fp .gate-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: rgba(255, 255, 255, .14); flex: none; }
.fp .gate-t { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.fp .gate-t b { font: 800 16.5px/1.2 var(--display); }
.fp .gate-t small { font-size: 13px; opacity: .78; }
.fp .lv-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; font-size: 13px; color: var(--ink-2); }
.fp .lv-foot:empty { display: none; }
.fp .lv-foot .link { font-size: 13.5px; }


.fp .readbar { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 80; pointer-events: none; }
.fp .readbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--violet), var(--acc)); transition: width 1.2s ease; }


.fp .strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: st; }
.fp .strip li { padding: 14px 14px 18px; display: flex; flex-direction: column; gap: 4px; counter-increment: st; }
.fp .strip li b { font: 800 19px/1.2 var(--display); margin-top: 10px; }
.fp .strip li b::before { content: counter(st) ". "; color: var(--ink-3); }
.fp .strip li > span { color: var(--ink-2); font-size: 15px; }
.fp .pic { aspect-ratio: 16 / 9; border-radius: var(--r-sm); display: grid; place-items: center; overflow: hidden; position: relative; }
.fp .pic-site { background: linear-gradient(140deg, #EEE8FF, #DCE8FF); }
.fp .fakefield { display: flex; align-items: center; gap: 10px; width: 78%; padding: 10px 10px 10px 14px; border-radius: 10px; background: #fff; box-shadow: var(--glow-sm); font-weight: 600; color: var(--ink-2); }
.fp .fakefield span { flex: 1; }
.fp .fakefield [data-vi], .fp .fakefield .vi { width: 30px; height: 30px; padding: 6px; border-radius: 8px; background: var(--ink); color: #fff; }
.fp .pic-you { background: linear-gradient(140deg, #FFE9DD, #FFF4D6); align-content: center; gap: 10px; }
.fp .you-dots { display: flex; gap: 8px; } .fp .you-dots i { width: 26px; height: 26px; border-radius: 8px; }
.fp .you-dots i:nth-child(1) { background: var(--b1, #E8672C); } .fp .you-dots i:nth-child(2) { background: var(--b2, #4C8DF6); } .fp .you-dots i:nth-child(3) { background: var(--b3, #35B178); } .fp .you-dots i:nth-child(4) { background: var(--ink); }
.fp .you-name { font: 800 22px/1 var(--display); }
.fp .pic-film { background: linear-gradient(140deg, #DDF5EA, #E4ECFF); display: flex; align-items: flex-end; justify-content: center; gap: 0; }
.fp .pic-film img { width: 42%; height: auto; margin-bottom: -6%; }

.fp .st-anim .pic { border: 2.5px solid var(--ink, #1C1A27); }
.fp .ff-box { position: relative; display: block; min-width: 0; }
.fp .ff-type { display: inline-block; white-space: nowrap; color: var(--ink, #1C1A27); clip-path: inset(0 100% 0 0); animation: st-type 7s steps(15, end) infinite; }
.fp .ff-type::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--ink, #1C1A27); animation: st-blinkc .8s steps(2, jump-none) infinite; }
.fp .ff-go { animation: st-press 7s ease-in-out infinite; }
.fp .ff-spark { position: absolute; right: 9%; top: 22%; width: 40px; height: 40px; pointer-events: none; }
.fp .ff-spark i { position: absolute; left: 50%; top: 50%; width: 5px; height: 12px; margin: -6px 0 0 -2.5px; border-radius: 3px; background: #FFB020; opacity: 0; animation: st-spark 7s ease-out infinite; }
.fp .ff-spark i:nth-child(2) { --r: 120deg; background: #E8558A; } .fp .ff-spark i:nth-child(3) { --r: 240deg; background: #4C8DF6; }
.fp .you-card { display: grid; gap: 10px; justify-items: center; padding: 12px 16px; border-radius: 14px; background: #fff; border: 2.5px solid var(--ink, #1C1A27); box-shadow: 3px 3px 0 var(--ink, #1C1A27); animation: st-card 7s cubic-bezier(.3, 1.4, .5, 1) infinite; animation-delay: 1.8s; }
.fp .st-anim .you-dots i { border: 2px solid var(--ink, #1C1A27); animation: st-pop 7s cubic-bezier(.3, 1.6, .5, 1) 1.4s infinite; }
.fp .st-anim .you-dots i:nth-child(2) { animation-delay: 1.55s; } .fp .st-anim .you-dots i:nth-child(3) { animation-delay: 1.7s; } .fp .st-anim .you-dots i:nth-child(4) { animation-delay: 1.85s; }
.fp .you-row { display: flex; align-items: baseline; gap: 10px; }
.fp .you-aa { font: 800 20px/1 var(--display); color: var(--b1, #E8672C); animation: st-pop 7s cubic-bezier(.3, 1.6, .5, 1) infinite; animation-delay: 2.1s; }
.fp .st-anim .you-name { font-size: 19px; animation: st-in 7s ease-out infinite; animation-delay: 2.3s; }
.fp .film-mini { position: absolute; left: 10px; top: 10px; width: 64px; height: 38px; border-radius: 6px; background: #fff; border: 2.5px solid var(--ink, #1C1A27); overflow: hidden; }
.fp .film-mini::before { content: ""; position: absolute; left: 8px; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: #FFB020; animation: st-sun 7s ease-in-out infinite; }
.fp .film-mini i { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--b1, #E8672C); transform-origin: 0 50%; transform: scaleX(0); animation: st-fill 7s linear 2.8s infinite; }
.fp .st-cam { transform-origin: 50% 100%; animation: st-film 1.6s ease-in-out infinite alternate; }
.fp .st-dir { transform-origin: 50% 100%; animation: st-nod 3.5s ease-in-out infinite; }
.fp .st-clap { position: absolute; right: 8%; top: 10%; width: 54px; height: auto; }
.fp .st-clap-top { transform-box: fill-box; transform-origin: 6% 90%; animation: st-clap 3.5s ease-in infinite; }
@keyframes st-type { 0%, 4% { clip-path: inset(0 100% 0 0); } 40%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes st-blinkc { 50% { opacity: 0; } }
@keyframes st-press { 0%, 46%, 56%, 100% { transform: scale(1); } 50% { transform: scale(.82); } }
@keyframes st-spark { 0%, 49% { opacity: 0; transform: rotate(var(--r, 0deg)) translateY(0); } 52% { opacity: 1; } 62%, 100% { opacity: 0; transform: rotate(var(--r, 0deg)) translateY(-20px); } }
@keyframes st-pop { 0%, 6% { transform: scale(0); } 14%, 88% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
@keyframes st-in { 0%, 8% { opacity: 0; transform: translateY(6px); } 16%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes st-card { 0%, 4% { transform: scale(.9) rotate(-2deg); } 12%, 90% { transform: scale(1) rotate(0); } 100% { transform: scale(.9) rotate(-2deg); } }
@keyframes st-fill { 0%, 10% { transform: scaleX(0); } 80%, 100% { transform: scaleX(1); } }
@keyframes st-sun { 0%, 100% { transform: translate(0, 10px); } 50% { transform: translate(34px, 0); } }
@keyframes st-film { from { transform: rotate(-3deg); } to { transform: rotate(3deg) translateY(-3px); } }
@keyframes st-nod { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-6px) rotate(-3deg); } }
@keyframes st-clap { 0%, 70%, 100% { transform: rotate(-24deg); } 76%, 84% { transform: rotate(0); } }
.fp .strip.k-io:not(.is-live) *, .fp .strip.k-io:not(.is-live) *::before, .fp .strip.k-io:not(.is-live) *::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .fp .st-anim *, .fp .st-anim *::before, .fp .st-anim *::after { animation: none !important; }
  .fp .ff-type { clip-path: none; } .fp .ff-spark { display: none; } .fp .film-mini i { transform: scaleX(.6); }
}
.fp .routes { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 20px; font-size: 15px; }


.fp .grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fp .feat { padding: 14px 14px 18px; }
.fp .feat h3 { font: 800 18px/1.2 var(--display); margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fp .feat p { color: var(--ink-2); font-size: 14.5px; margin-top: 4px; }
.fp .soon { font: 700 11px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding: 4px 6px; border-radius: 6px; background: rgba(23, 21, 42, .06); }
.fp .fv { aspect-ratio: 16 / 9; border-radius: var(--r-sm); background: linear-gradient(150deg, #F2EEFF, #E9F3FF); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; overflow: hidden; }
.fp .fv.shapes i { display: block; background: var(--f1); border-radius: 5px; opacity: .85; }
.fp .fv.shapes .w { width: 34%; aspect-ratio: 16 / 9; } .fp .fv.shapes .t { width: 15%; aspect-ratio: 9 / 16; background: var(--f2); } .fp .fv.shapes .q { width: 22%; aspect-ratio: 1; background: var(--f3); }
.fp .fv.voices span { padding: 6px 10px; border-radius: 8px; background: #fff; font-weight: 700; font-size: 14px; box-shadow: var(--glow-sm); }
.fp .wave { display: inline-flex; gap: 3px; align-items: center; height: 26px; }
.fp .wave i { width: 4px; border-radius: 2px; background: var(--ink); height: 40%; animation: wave 1.2s infinite ease-in-out; }
.fp .wave i:nth-child(2) { animation-delay: .15s; } .fp .wave i:nth-child(3) { animation-delay: .3s; } .fp .wave i:nth-child(4) { animation-delay: .45s; }
@keyframes wave { 50% { height: 100%; } }
.fp .fv.langs { flex-wrap: wrap; } .fp .fv.langs span { padding: 5px 9px; border-radius: 8px; background: #fff; font-weight: 700; font-size: 14px; box-shadow: var(--glow-sm); }
.fp .fv.change { flex-direction: column; gap: 8px; }
.fp .fv.change .note { padding: 7px 11px; border-radius: 10px 10px 10px 3px; background: #fff; font-weight: 600; font-size: 14px; box-shadow: var(--glow-sm); }
.fp .fv.change .ok { display: inline-flex; gap: 5px; align-items: center; font-weight: 700; font-size: 13.5px; color: #1D7A4E; }


header[data-v-nav]:empty { display: block; min-height: 57px; }
@media (min-width: 900px) { header[data-v-nav]:empty { min-height: 61px; } }


.fp .uses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fp .use { padding: 10px 10px 14px; display: flex; flex-direction: column; transition: transform .3s; }
.fp .use .shot { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden; }
.fp .use .shot svg { display: block; width: 100%; height: 100%; }
.fp .use .shot svg * { transition: fill .7s, stroke .7s; }
.fp .brandtag { position: absolute; right: 8px; top: 8px; padding: 3px 7px; border-radius: 6px; background: rgba(255, 255, 255, .9); font: 800 12px/1.2 var(--display); max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp .use figcaption { display: flex; flex-direction: column; gap: 3px; padding: 10px 4px 0; flex: 1; }
.fp .use figcaption b { font: 800 16.5px/1.25 var(--display); }
.fp .idea-line { color: var(--ink-2); font-size: 14px; flex: 1; }
.fp .mine { align-self: flex-start; margin-top: 8px; padding: 7px 12px; border-radius: var(--r-sm); background: var(--sheet); border: 1px solid var(--hair); font-weight: 700; font-size: 14px; }
.fp .mine:hover { background: #fff; }
.fp .use.mine-ready { animation: ready .6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes ready { 40% { transform: translateY(-6px); } }

.fp .kindtag { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 999px; background: var(--ink, #1C1A27); color: #fff; font: 800 11px/1.2 var(--display); letter-spacing: .02em; }
.fp .use .shot svg [class^="k-"] { transform-box: fill-box; transform-origin: 50% 50%; }
.fp .uses.k-io:not(.is-live) .shot svg * { animation-play-state: paused; }
.fp .use .shot svg text { font-family: var(--display); }
.fp .k-spin-slow { animation: k-spin 12s linear infinite; }
.fp .k-lid { animation: k-lid 2.8s cubic-bezier(.3, 1.5, .5, 1) infinite; }
.fp .k-blink { animation: k-blink 1.4s steps(2, jump-none) infinite; }
.fp .k-lean-l { transform-origin: 50% 100% !important; animation: k-lean-l 3.2s ease-in-out infinite; } .fp .k-lean-r { transform-origin: 50% 100% !important; animation: k-lean-r 3.2s ease-in-out infinite; }
.fp .k-heart { opacity: 0; animation: k-float 3.2s ease-out infinite; }
.fp .k-beat { animation: k-beat 1.6s ease-in-out infinite; }
.fp .k-pop { animation: k-pop 3.6s cubic-bezier(.3, 1.4, .5, 1) infinite; }
.fp .k-pop.p2 { animation-delay: .35s; } .fp .k-pop.p3 { animation-delay: .7s; }
.fp .k-walk-l { animation: k-walk 4s ease-in-out infinite; }
.fp .k-hop { animation: k-hop 2.4s ease-in-out infinite; }
.fp .k-hop.h2 { animation-delay: .3s; } .fp .k-hop.h3 { animation-delay: .6s; }
.fp .k-draw { stroke-dasharray: 1; animation: k-draw 3.6s ease-in-out infinite; }
.fp .k-type { transform-origin: 0 50% !important; animation: k-type 3.4s steps(7) infinite; }
.fp .k-type.t2 { animation-delay: .5s; } .fp .k-type.t3 { animation-delay: 1s; }
@keyframes k-lid { 0%, 40%, 100% { transform: translateY(0) rotate(0); } 55% { transform: translateY(-16px) rotate(-8deg); } 70% { transform: translateY(-10px) rotate(5deg); } }
@keyframes k-blink { 50% { opacity: .25; } }
@keyframes k-walk { 0%, 8% { transform: translateX(0); opacity: 1; } 60% { transform: translateX(118px); opacity: 1; } 72% { transform: translateX(126px) scale(.8); opacity: 0; } 88% { transform: translateX(0); opacity: 0; } 100% { opacity: 1; } }
@keyframes k-beat { 50% { transform: scale(1.14); } }
@keyframes k-spin { to { transform: rotate(360deg); } }
@keyframes k-lean-l { 0%, 100% { transform: translateX(0); } 45%, 70% { transform: translateX(10px) rotate(7deg); } }
@keyframes k-lean-r { 0%, 100% { transform: translateX(0); } 45%, 70% { transform: translateX(-10px) rotate(-7deg); } }
@keyframes k-float { 0%, 40% { opacity: 0; transform: translateY(14px) scale(.5); } 60% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-22px) scale(1.1); } }
@keyframes k-pop { 0%, 8% { transform: scale(.55); opacity: .25; } 24%, 82% { transform: scale(1); opacity: 1; } 100% { transform: scale(.55); opacity: .25; } }
@keyframes k-hop { 0%, 40%, 100% { transform: translateY(0); } 20% { transform: translateY(-14px); } }
@keyframes k-draw { 0% { stroke-dashoffset: 1; } 55%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes k-type { 0% { transform: scaleX(0); } 55%, 100% { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .fp .use .shot svg * { animation: none !important; opacity: 1; } }


.fp .price { display: flex; flex-direction: column; gap: 6px; padding: 18px; text-decoration: none; transition: transform .15s; }
.fp .price:hover { transform: translateY(-2px); }
.fp .pk { font: 700 12px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.fp .pp { font: 800 32px/1.1 var(--display); letter-spacing: -.02em; min-height: 36px; }
.fp .pp small { font: 500 15px/1 var(--text); color: var(--ink-2); letter-spacing: 0; }
.fp .pl { color: var(--ink-2); font-size: 14.5px; }
.fp .fine { margin-top: 14px; font-size: 14px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.fp .fine-from { white-space: nowrap; }
.fp .faq { padding: 6px 18px; }
.fp .faq details { border-bottom: 1px solid var(--hair); }
.fp .faq details:last-child { border-bottom: 0; }
.fp .faq summary { cursor: pointer; padding: 15px 0; font: 700 17px/1.3 var(--display); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.fp .faq summary::-webkit-details-marker { display: none; }
.fp .faq summary::after { content: "+"; font: 600 20px/1 var(--text); color: var(--ink-2); }
.fp .faq details[open] summary::after { content: "\2212"; }
.fp .faq details p { padding: 0 0 16px; color: var(--ink-2); max-width: 70ch; }


.fp .cta { padding: 64px 0; text-align: center; }
.fp .cta h2 { font: 800 clamp(28px, 4vw, 48px)/1.05 var(--display); letter-spacing: -.03em; }
.fp .cta p { margin-top: 10px; color: var(--ink-2); }
.fp .cta .field { margin: 26px auto 0; }
.fp .discord { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 18px 22px; }
.fp .dc-crew { display: flex; } .fp .dc-crew img { width: 76px; height: auto; margin-right: -14px; }
.fp .dc-arrow { width: 70px; height: 46px; fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fp .dc-t { display: flex; flex-direction: column; gap: 3px; }
.fp .dc-t b { font: 800 20px/1.2 var(--display); }
.fp .dc-t span { color: var(--ink-2); font-size: 15px; }
.fp .dc-b { display: flex; gap: 10px; flex-wrap: wrap; }
.fp .dc-check { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--hair); font-size: 15px; animation: fadein .35s ease; }
.fp .dc-check b { font-family: var(--display); }
.fp .dc-check small { flex-basis: 100%; color: var(--ink-2); font-size: 13px; }
.fp .dc-check .btn { min-height: 40px; padding: 8px 14px; font-size: 14.5px; }
.fp .dc-count { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: #fff; font: 800 15px/1 var(--display); }


.fp .ba-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.fp .ba-stage { padding: 10px; }
.fp .ba { --x: 0%; --red: var(--v-cta, #FF6B3D); position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden; background: linear-gradient(140deg, #EEE8FF, #DCE8FF); }
.fp .ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .35s; }
.fp .ba img:not([src]) { opacity: 0; }
.fp .ba.ba-wait img { opacity: .4; }
.fp .ba.ba-out img { opacity: .15; transition-duration: .3s; }
.fp .ba .ba-before { clip-path: inset(0 0 0 var(--x)); }
.fp .ba-bar { position: absolute; top: 0; bottom: 0; left: 0; transform: translateX(var(--xp, 0px)); width: 0; pointer-events: none; opacity: 0; transition: opacity .25s; }
.fp .ba-bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: -2px; width: 4px; border-radius: 2px; background: var(--red); box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 0 18px 2px color-mix(in srgb, var(--red) 70%, transparent); }
.fp .ba-bar::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 46px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--red) 22%, transparent)); }
.fp .ba-bar-t { position: absolute; top: 12px; left: 10px; padding: 5px 8px; border-radius: 6px; background: var(--red); color: #fff; font: 700 12px/1 var(--text); white-space: nowrap; }
.fp .ba[data-phase="sweep"] .ba-bar { opacity: 1; }

.fp .ba { --d: 1; --c: 1; --px: 50%; }
.fp .ba[data-phase="draw"] { background: #FBFAF6; }
.fp .ba[data-phase="draw"] .ba-after { opacity: 0; transition: none; }
.fp .ba[data-phase="draw"] .ba-before { transition: none; clip-path: inset(0 0 calc((1 - var(--d)) * 100%) 0); filter: grayscale(calc(1 - var(--c))) contrast(calc(.45 + .55 * var(--c))) brightness(calc(1.35 - .35 * var(--c))); }
.fp .ba-pen { position: absolute; z-index: 2; left: 0; top: 0; width: 16px; height: 34px; margin: -32px 0 0 -3px; opacity: 0; pointer-events: none; transform: translate(var(--pxp, 0px), var(--dp, 0px)) rotate(28deg); transform-origin: 3px 32px;
  background: linear-gradient(#FFB020 0 70%, #F3D3A8 70% 88%, #1C1A27 88%); clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); border-radius: 3px 3px 0 0; }
.fp .ba[data-phase="draw"] .ba-pen { opacity: calc(1 - var(--c) * 4); }
.fp .ba-chip-d { display: none; }
.fp .ba[data-phase="draw"] .ba-chip-d { display: inline; } .fp .ba[data-phase="draw"] .ba-chip-b { display: none; }
.fp .ba.ba-flip .ba-bar-t { left: auto; right: 10px; }
.fp .ba-chip { position: absolute; top: 10px; right: 52px; font: 700 12.5px/1 var(--text); font-style: normal; color: var(--ink); background: rgba(255, 255, 255, .94); padding: 6px 9px; border-radius: 8px; pointer-events: none; }
.fp .ba-chip-a { display: none; align-items: center; gap: 4px; color: #1D7A4E; }
.fp .ba-chip-a [data-vi], .fp .ba-chip-a .vi { width: 14px; height: 14px; }
.fp .ba[data-phase="done"] .ba-chip-b { display: none; }
.fp .ba[data-phase="sweep"] .ba-chip { opacity: 0; }
.fp .ba[data-phase="done"] .ba-chip-a { display: inline-flex; animation: fadein .35s ease; }
.fp .ba-pause { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border-radius: 8px; background: rgba(255, 255, 255, .9); display: grid; place-items: center; opacity: .8; }
.fp .ba-pause:hover, .fp .ba-pause:focus-visible { opacity: 1; }
.fp .ba-pause span { width: 10px; height: 12px; border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); }
.fp .ba-pause[aria-pressed="true"] span { width: 0; height: 0; border: 0; border-left: 11px solid var(--ink); border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }

.fp .ba.ba-still .ba-bar { opacity: 1; left: 0; transform: none; }
.fp .ba.ba-still .ba-bar::before { left: 0; }
.fp .ba.ba-still .ba-bar::after, .fp .ba.ba-still .ba-bar-t { display: none; }
.fp .ba-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; padding: 10px 4px 2px; font-size: 14px; }
.fp .ba-cap > span:first-child { font: 800 15.5px/1.3 var(--display); }
.fp .ba-fine { color: var(--ink-3); font-size: 12.5px; }
.fp .ba-side { display: flex; flex-direction: column; gap: 16px; }
.fp .ba-tabs { display: flex; gap: 8px; }
.fp .ba-tabs button { --p: 0; position: relative; flex: 1; min-height: 44px; padding: 8px 10px 10px; border-radius: var(--r-sm); background: var(--sheet); border: 1px solid var(--hair); font-weight: 700; font-size: 14.5px; text-align: center; overflow: hidden; color: var(--ink-2); }
.fp .ba-tabs button[aria-selected="true"] { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 30%, transparent); background: #fff; }
.fp .ba-prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--v-cta, #FF6B3D); transform-origin: 0 50%; transform: scaleX(var(--p)); }
.fp .ba-said { display: flex; align-items: flex-end; gap: 10px; min-height: 92px; }
.fp .ba-said img { width: 44px; height: auto; flex: none; margin-bottom: -4px; }
.fp .ba-bub { flex: 1; padding: 12px 14px; border-radius: 12px 12px 12px 4px; background: #fff; border: 1px solid var(--hair); font-size: 15.5px; line-height: 1.45; }
.fp .ba-bub b { font-family: var(--display); margin-right: 3px; }
.fp .ba-fix { font-weight: 700; opacity: 0; transition: opacity .35s; }
.fp .ba-ok { display: inline-block; vertical-align: -3px; margin-left: 4px; width: 18px; height: 18px; color: #1D7A4E; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.fp .ba-said[data-phase="done"] .ba-fix, .fp .ba-said[data-phase="done"] .ba-ok { opacity: 1; transform: none; }
.fp .ba-more { color: var(--ink-2); font-size: 14.5px; }
.fp .ba-go { display: none; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 4px; }
.fp .ba-go .btn { min-height: 50px; font: 800 16.5px/1.2 var(--display); background: var(--acc); color: var(--acc-ink); }
.fp .ba-go span { text-align: center; font-size: 13.5px; color: var(--ink-2); }
@media (max-width: 900px) { .fp .ba-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
@media (max-width: 560px) {
  
  .fp .ba-stage { padding: 0; margin: 0 calc(-1 * var(--gut)); background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .fp .ba { border-radius: 0; }
  .fp .ba-cap { padding: 10px var(--gut) 0; }
  .fp .ba-tabs { gap: 6px; }
  .fp .ba-tabs button { padding: 8px 4px 10px; font-size: 13.5px; }
  .fp .ba-said { min-height: 0; }
  .fp .ba-said img { width: 36px; }
  .fp .ba-bub { font-size: 14.5px; padding: 10px 12px; min-height: calc(4 * 1.45em + 20px); }
}


@media (max-width: 1100px) {
  .fp .grid4, .fp .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp .discord { grid-template-columns: auto minmax(0, 1fr); }
  .fp .dc-arrow { display: none; }
  .fp .dc-b { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  body.fp { --gut: 20px; }
  .fp .hero { padding-top: 18px; }
  .fp .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; min-height: 0; }
  .fp .strip { grid-template-columns: minmax(0, 1fr); }
  .fp .s { padding: 40px 0; }
  
  .fp .gate { scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 560px) {
  body.fp { --gut: 16px; }
  .fp .hero h1 { font-size: clamp(36px, 10.5vw, 46px); }
  .fp .field { flex-wrap: wrap; padding: 8px; }
  .fp .field input[type="text"] { flex-basis: 100%; height: 48px; padding: 0 8px; }
  .fp .field .nbtn { width: 100%; justify-content: center; }
  .fp .ideabox { flex-wrap: wrap; padding: 8px 8px 8px 12px; }
  .fp .ideabox textarea { flex-basis: 100%; }
  .fp .ideabox .nbtn { width: 100%; justify-content: center; }
  .fp .grid4, .fp .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fp .feat { padding: 8px 8px 12px; }
  .fp .feat h3 { font-size: 15.5px; margin-top: 8px; }
  .fp .feat p { font-size: 13px; }
  .fp .fv { padding: 6px; gap: 5px; }
  .fp .fv span, .fp .fv.voices span, .fp .fv.langs span, .fp .fv.change .note { font-size: 11.5px; padding: 4px 6px; }
  .fp .price { padding: 12px; } .fp .pp { font-size: 24px; } .fp .pl { font-size: 13px; }
  .fp .use { padding: 6px 6px 10px; }
  .fp .use figcaption b { font-size: 14.5px; }
  .fp .idea-line { font-size: 12.5px; }
  .fp .mine { font-size: 13px; padding: 6px 9px; }
  .fp .discord { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .fp .dc-crew { display: none; }
  .fp .dc-b .btn { flex: 1; }
  .fp .sh { flex-direction: column; gap: 10px; }
  .fp .lv-title { font-size: clamp(13px, 4.6vw, 22px); }
}
@media (prefers-reduced-motion: reduce) {
  .fp *, .fp *::before, .fp *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .fp .lv-frame.building .ly, .fp .lv-frame.building .lv-title { animation: none !important; opacity: 1; }
}


body.fp { --surface: #FFFFFF; --surface-2: #F3F1FA; --line: rgba(23, 21, 42, .12); --line-strong: rgba(23, 21, 42, .28); --ground: #FFFFFF;
  --font-text: var(--text); --font-display: var(--display); --r-card: 16px; --r-control: 10px; --r-knapp: 10px; --focus: var(--violet); }
body.fp .pm-bak { background: color-mix(in srgb, #17152A 38%, transparent); }
body.fp .pm-ark { box-shadow: 0 32px 80px -24px rgba(60, 40, 140, .35); border-color: var(--edge); }
body.fp .pm-ark .pm-google { --g-bg: #FFFFFF; --g-edge: #747775; --g-ink: #1F1F1F; --g-hover: rgba(31, 31, 31, .08); }
body.fp .pm-ark .pm-lev-microsoft { --l-bg: #FFFFFF; --l-edge: #8C8C8C; --l-ink: #5E5E5E; --l-hover: rgba(0, 0, 0, .06); }
body.fp .pm-ark .pm-lev-apple { --l-bg: #000000; --l-edge: #000000; --l-ink: #FFFFFF; --l-hover: rgba(255, 255, 255, .12); }
body.fp .pm-steg h2 { font-weight: 800; }


.fp .can-line { display: none; }
@media (max-width: 640px) {
  :is(.fp-home, .fp-ch) main { display: flex; flex-direction: column; }
  :is(.fp-home, .fp-ch) #prices { order: 5; } :is(.fp-home, .fp-ch) #faq { order: 7; }
  :is(.fp-home, .fp-ch) main > .cta { order: 8; } :is(.fp-home, .fp-ch) #community { order: 9; }
  
  :is(.fp-home, .fp-ch) #change { order: 1; } :is(.fp-home, .fp-ch) #how { order: 2; } :is(.fp-home, .fp-ch) #can { order: 3; } :is(.fp-home, .fp-ch) #films { order: 4; }
  :is(.fp-home, .fp-ch) .ba-go { display: flex; }
  :is(.fp-home, .fp-ch) .s { padding: 30px 0; }
  :is(.fp-home, .fp-ch) .sh { flex-direction: row; align-items: center; gap: 10px; margin-bottom: 14px; }
  :is(.fp-home, .fp-ch) .sh h2 { font-size: 25px; }
  :is(.fp-home, .fp-ch) .sh p { font-size: 15px; margin-top: 4px; }
  :is(.fp-home, .fp-ch) .sh .mark { display: none; }
  :is(.fp-home, .fp-ch) main .sheet:not(.live):not(.field):not(.ideabox) { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  :is(.fp-home, .fp-ch) #how .routes { display: none; }
  
  :is(.fp-home, .fp-ch) .hero-grid { gap: 14px; }
  :is(.fp-home, .fp-ch) .hero-copy { display: contents; }
  :is(.fp-home, .fp-ch) .hero-copy > * { order: 1; }
  :is(.fp-home, .fp-ch) .hero .live { order: 2; }
  
  :is(.fp-home, .fp-ch) .hero .herocrew { order: 3; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; width: 100%; max-width: calc(5 * 58px + 4 * 6px); }
  :is(.fp-home, .fp-ch) .hero .sub { margin-top: 10px; }
  :is(.fp-home, .fp-ch) .hero-site, :is(.fp-home, .fp-ch) .hero-nosite { margin-top: 16px; }
  :is(.fp-home, .fp-ch) .hc { flex: none; width: calc((100% - 4 * 6px) / 5); max-width: 58px; }
  :is(.fp-home, .fp-ch) .hbubble { display: none; }
  :is(.fp-home, .fp-ch) .herocrew:has(.hc.on) .hbubble { display: block; }
  :is(.fp-home, .fp-ch) .herocrew:has(.hc.on) { flex-wrap: wrap; }
  
  :is(.fp-home, .fp-ch) #how { background: color-mix(in srgb, #FFE9DD 55%, transparent); }
  :is(.fp-home, .fp-ch) #change { background: color-mix(in srgb, #DCE8FF 50%, transparent); }
  :is(.fp-home, .fp-ch) #films { background: color-mix(in srgb, #DDF5EA 55%, transparent); }
  :is(.fp-home, .fp-ch) #prices, :is(.fp-home, .fp-ch) #faq { background: color-mix(in srgb, #EEE8FF 60%, transparent); }
  :is(.fp-home, .fp-ch) #prices { padding-bottom: 8px; }
  :is(.fp-home, .fp-ch) #faq { padding-top: 8px; }
  :is(.fp-home, .fp-ch) #faq .sh { display: none; }
  
  :is(.fp-home, .fp-ch) .strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 6px; scrollbar-width: none; overscroll-behavior-x: contain; }
  :is(.fp-home, .fp-ch) .strip::-webkit-scrollbar { display: none; }
  :is(.fp-home, .fp-ch) .strip li { scroll-snap-align: start; padding: 0; }
  :is(.fp-home, .fp-ch) .strip li b { font-size: 16.5px; }
  :is(.fp-home, .fp-ch) .strip li > span { font-size: 14px; }
  
  :is(.fp-home, .fp-ch) .ba-tabs button { background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--hair); }
  :is(.fp-home, .fp-ch) .ba-tabs button[aria-selected="true"] { background: none; }
  :is(.fp-home, .fp-ch) .ba-bub { background: none; border: 0; padding: 0; }
  :is(.fp-home, .fp-ch) .ba-more { display: none; }
  
  :is(.fp-home, .fp-ch) #can { display: none; }
  :is(.fp-home, .fp-ch) .can-line { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -4px 0 14px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
  :is(.fp-home, .fp-ch) .can-line span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 3px; background: var(--f1); vertical-align: 1px; }
  
  :is(.fp-home, .fp-ch) .uses { display: grid; grid-auto-flow: column; grid-auto-columns: 64%; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--gut)); padding: 2px var(--gut) 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
  :is(.fp-home, .fp-ch) .uses::-webkit-scrollbar { display: none; }
  :is(.fp-home, .fp-ch) .use { scroll-snap-align: start; padding: 0; }
  :is(.fp-home, .fp-ch) .use figcaption { padding: 8px 2px 0; }
  :is(.fp-home, .fp-ch) .use .idea-line { display: none; }
  :is(.fp-home, .fp-ch) #films .routes { margin-top: 10px; }
  
  :is(.fp-home, .fp-ch) .grid4.prices { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--hair); }
  :is(.fp-home, .fp-ch) .price { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 11px 0; border-bottom: 1px solid var(--hair); border-radius: 0; }
  :is(.fp-home, .fp-ch) .price .pk { flex: 1 0 auto; font-size: 12px; }
  :is(.fp-home, .fp-ch) .price .pp { font-size: 20px; min-height: 0; }
  :is(.fp-home, .fp-ch) .price .pl { flex-basis: 100%; font-size: 13px; }
  
  :is(.fp-home, .fp-ch) .faq { padding: 0; border-top: 1px solid var(--hair); }
  :is(.fp-home, .fp-ch) .faq summary { padding: 12px 0; font-size: 15.5px; }
  
  :is(.fp-home, .fp-ch) .cta { padding: 36px 0 8px; }
  :is(.fp-home, .fp-ch) .cta h2 { font-size: 28px; }
  :is(.fp-home, .fp-ch) #community { padding: 18px 0 30px; }
  :is(.fp-home, .fp-ch) .discord { display: flex; flex-direction: column; gap: 10px; padding: 18px 0 0; border-top: 1px solid var(--hair); border-radius: 0; text-align: left; }
  :is(.fp-home, .fp-ch) .discord .dc-crew, :is(.fp-home, .fp-ch) .discord .dc-arrow { display: none; }
  :is(.fp-home, .fp-ch) .dc-t b { font-size: 17px; }
  :is(.fp-home, .fp-ch) .dc-t span { font-size: 14px; }
  :is(.fp-home, .fp-ch) .dc-b { display: flex; gap: 10px; flex-wrap: nowrap; }
  :is(.fp-home, .fp-ch) .dc-b .btn { flex: 1; padding: 12px 8px; font-size: 14.5px; white-space: nowrap; }
}


.nm-fx { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; contain: strict; }
.nm-fx i { position: absolute; display: block; will-change: transform, opacity; }
.nm-wash { width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; border-radius: 50%; opacity: 0; transform: scale(.02); animation: nm-wash 1.2s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes nm-wash { 0% { opacity: .5; transform: scale(.02); } 55% { opacity: .22; } 100% { opacity: 0; transform: scale(1); } }
.nm-bit { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); animation: nm-bit 1.1s cubic-bezier(.15, .8, .3, 1) both; }
@keyframes nm-bit { 0% { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0); } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--r)); } }
@media (max-width: 640px) {
  
  html.nm-reading .fp .lv-frame::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-100%); animation: nm-scan 1.3s ease-in-out infinite; }
  @keyframes nm-scan { to { transform: translateX(100%); } }
  
  .fp .lv-frame.nm-draw .ly { animation: nm-ly .55s cubic-bezier(.3, 1.4, .5, 1) both; transform-box: fill-box; transform-origin: 50% 100%; }
  .fp .lv-frame.nm-draw .ly0 { animation: none; }
  .fp .lv-frame.nm-draw .ly1 { animation-delay: .08s; } .fp .lv-frame.nm-draw .ly2 { animation-delay: .16s; } .fp .lv-frame.nm-draw .ly3 { animation-delay: .24s; }
  .fp .lv-frame.nm-draw .ly4 { animation-delay: .32s; } .fp .lv-frame.nm-draw .ly5 { animation-delay: .4s; } .fp .lv-frame.nm-draw .ly6 { animation-delay: .48s; }
  @keyframes nm-ly { from { opacity: 0; transform: translateY(14px) scale(.85); } }
  .fp .lv-frame.nm-draw .lv-title { animation: nm-pop .6s .45s cubic-bezier(.3, 1.6, .5, 1) both; }
  .fp .lv-frame.nm-draw .lv-tag { animation: nm-pop .5s .7s cubic-bezier(.3, 1.6, .5, 1) both; }
  @keyframes nm-pop { from { opacity: 0; transform: scale(.6); } }
  .fp .lv-dots i.pop { animation-duration: .6s; }
  
  .fp .lv-say img.nm-hop { animation: nm-hop .55s cubic-bezier(.3, 1.6, .5, 1); }
  @keyframes nm-hop { 35% { transform: translateY(-10px) rotate(-6deg); } 70% { transform: translateY(1px); } }
  .fp .herocrew.nm-cheer .hc { animation: nm-hop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
  .fp .herocrew.nm-cheer .hc:nth-child(2) { animation-delay: .08s; } .fp .herocrew.nm-cheer .hc:nth-child(3) { animation-delay: .16s; }
  .fp .herocrew.nm-cheer .hc:nth-child(4) { animation-delay: .24s; } .fp .herocrew.nm-cheer .hc:nth-child(5) { animation-delay: .32s; }
  .fp .herocrew.nm-cheer .hc:nth-child(6) { animation-delay: .4s; } .fp .herocrew.nm-cheer .hc:nth-child(7) { animation-delay: .48s; }
  .fp .herocrew.nm-cheer .hc:nth-child(8) { animation-delay: .56s; } .fp .herocrew.nm-cheer .hc:nth-child(9) { animation-delay: .64s; }
  
  .fp .lv-say .nm-rest { opacity: 0; }
  .fp .lv-say.bump p { animation-duration: .5s; }
  
  .fp .gate.nm-pop { animation: nm-gate .6s cubic-bezier(.3, 1.6, .5, 1) both; }
  @keyframes nm-gate { from { opacity: 0; transform: translateY(16px) scale(.94); } }
}
@media (prefers-reduced-motion: reduce) { .nm-fx { display: none; } }


.fp .lv-frame.nd-on .scene, .fp .lv-frame.nd-on .lv-title { opacity: 0; }
.fp .nd { position: absolute; inset: 0; z-index: 1; }
.fp .lv-frame.nd-on .lv-tag { z-index: 2; }
.fp .nd-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fp .nd-shot { opacity: 0; transition: opacity .45s ease; transform-origin: 320px 180px; }
.fp .nd-shot.nd-here { opacity: 1; }
.fp .nd-part { fill-opacity: 0; stroke: #17152A; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600);
  transition: stroke-dashoffset .42s ease, fill-opacity .3s ease, stroke-opacity .3s ease; }
.fp .nd-part.nd-ink { stroke-dashoffset: 0; }
.fp .nd-part.nd-fill { fill-opacity: 1; stroke-opacity: 0; }
.fp .nd-part.nd-line { stroke: #FFFFFF; stroke-width: 6; }
.fp .nd-part.nd-line.nd-fill { stroke-opacity: 1; }
.fp image.nd-part { opacity: 0; transition: opacity .45s ease; }
.fp image.nd-part.nd-ink { opacity: 1; }
.fp .nd-pen { opacity: 0; transition: transform .38s cubic-bezier(.3, .9, .3, 1), opacity .2s; pointer-events: none; }
.fp .nd-pen.on { opacity: 1; }
.fp .nd-playing .nd-here { animation: nd-push 3.2s ease-out both; }
@keyframes nd-push { from { transform: scale(1.06); } to { transform: none; } }
.fp .nd-playing .nd-here .nd-sun { animation: nd-rise 3s ease-out both; transform-box: fill-box; }
@keyframes nd-rise { from { transform: translateY(36px); } }
.fp .nd-playing .nd-here .nd-bar { animation: nd-grow .8s cubic-bezier(.3, 1.4, .5, 1) both; transform-box: fill-box; transform-origin: 50% 100%; }
.fp .nd-playing .nd-here .nd-bar:nth-of-type(4) { animation-delay: .12s; } .fp .nd-playing .nd-here .nd-bar:nth-of-type(5) { animation-delay: .24s; }
@keyframes nd-grow { from { transform: scaleY(.1); } }
.fp .nd-playing .nd-s3.nd-here image, .fp .nd-playing .nd-s3.nd-here text:first-of-type { animation: nd-logo .7s .2s cubic-bezier(.3, 1.6, .5, 1) both; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes nd-logo { from { transform: scale(.7); opacity: 0; } }
.fp .nd-strip { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.fp .nd-strip button { position: relative; display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px 5px; border-radius: 6px; background: rgba(255, 255, 255, .82); font: 700 11.5px/1 var(--text); color: var(--ink-2); overflow: hidden; }
.fp .nd-strip button i { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--acc); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s; }
.fp .nd-strip button.done i { transform: scaleX(1); }
.fp .nd-strip button.on { color: var(--ink); background: #fff; }
@media (max-width: 400px) { .fp .nd-strip button { padding: 3px 6px 5px; font-size: 10.5px; } }
@media (prefers-reduced-motion: reduce) { .fp .nd-playing .nd-here, .fp .nd-playing .nd-here * { animation: none !important; } }


.fp .rv { display: block; position: relative; overflow: hidden; isolation: isolate; padding: 120px 0 130px; text-align: center; color: var(--ink, #1C1A27); }
.fp-home .rv { order: 1; }

.fp .rv-bg, .fp .rv-beams { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%); }
.fp .rv-bg { position: absolute; inset: 0; z-index: -2; opacity: 0; transition: opacity 1.4s ease; background:
  radial-gradient(120% 80% at 50% 105%, #FFD9B8 0%, transparent 60%), linear-gradient(180deg, #FBFAFF 0%, #E9E1FF 38%, #C9B8FF 72%, #FFC9A8 100%); }
.fp .rv.is-seen .rv-bg { opacity: 1; }
.fp .rv-beams { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 1.6s ease .4s; pointer-events: none; }
.fp .rv.is-seen .rv-beams { opacity: 1; }
.fp .rv-beams i { position: absolute; bottom: -10%; width: 46%; height: 130%; background: linear-gradient(0deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 85%); clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0); transform-origin: 50% 100%; }
.fp .rv-beams i:nth-child(1) { left: 4%; animation: rv-sway-l 7s ease-in-out infinite alternate; }
.fp .rv-beams i:nth-child(2) { right: 4%; animation: rv-sway-r 7s ease-in-out infinite alternate; }
.fp .rv-in { position: relative; width: min(100% - 32px, 760px); margin: 0 auto; display: grid; justify-items: center; gap: 14px; opacity: 0; transform: translateY(16px) scale(.98); transition: opacity 1s ease .3s, transform 1.1s cubic-bezier(.2, .9, .3, 1) .3s; }
.fp .rv.is-seen .rv-in { opacity: 1; transform: none; }
.fp .rv h2 { font: 800 clamp(32px, 7vw, 56px)/1.02 var(--display); letter-spacing: -.03em; margin: 8px 0 0; }
.fp .rv p { margin: 0; max-width: 34ch; font-size: 17.5px; line-height: 1.5; color: #3B3650; }
.fp .rv-go { margin-top: 6px; min-height: 54px; padding: 0 28px; border-radius: 999px; background: var(--ink, #1C1A27); color: #fff; font: 800 17px/1 var(--display); box-shadow: 0 10px 30px -10px rgba(28, 26, 39, .6); }
.fp .rv-set { position: relative; width: min(100%, 520px); aspect-ratio: 16 / 10; display: grid; place-items: center; }
.fp .rv-screen { position: relative; container-type: inline-size; width: 74%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 3px solid var(--ink, #1C1A27); box-shadow: 0 0 0 6px rgba(255, 255, 255, .55), 0 24px 50px -18px rgba(60, 30, 120, .45); background: #FFF9EF; }
.fp .rv-film { display: block; width: 100%; height: 100%; }
.fp .rv-ln { stroke-dasharray: 1; stroke-dashoffset: 1; animation: rv-draw 8s ease-in-out infinite; }
.fp .rv-fill { opacity: 0; animation: rv-fill 8s ease-in-out infinite; }
.fp .rv .s2 { animation-delay: .5s; } .fp .rv .s3 { animation-delay: 1s; } .fp .rv .s4 { animation-delay: 1.4s; } .fp .rv .s5 { animation-delay: 1.8s; } .fp .rv .s6 { animation-delay: 2.2s; }
.fp .rv-c { position: absolute; width: 22%; height: auto; transform-origin: 50% 100%; }
.fp .rv-dir { left: -2%; bottom: 0; animation: rv-bob 2.6s ease-in-out infinite alternate; }
.fp .rv-art { right: -3%; bottom: 2%; width: 20%; transform-origin: 30% 90%; animation: rv-scribble .5s ease-in-out infinite alternate; }

.fp .rv-pencil { position: absolute; left: 0; top: 0; width: 4.5cqw; height: 11cqw; margin: -10cqw 0 0 -1cqw; transform-origin: 1cqw 10cqw; pointer-events: none;
  background: linear-gradient(#FFB020 0 70%, #F3D3A8 70% 88%, #1C1A27 88%); clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); animation: rv-pen 8s ease-in-out infinite; }
@keyframes rv-pen {
  0% { transform: translate(70cqw, 18cqw) rotate(24deg); opacity: 1; } 5% { transform: translate(84cqw, 20cqw) rotate(30deg); }
  8% { transform: translate(2cqw, 41cqw) rotate(24deg); } 18% { transform: translate(55cqw, 42cqw) rotate(30deg); } 24% { transform: translate(98cqw, 38cqw) rotate(24deg); }
  27% { transform: translate(22cqw, 44cqw) rotate(28deg); } 31% { transform: translate(40cqw, 34cqw) rotate(22deg); }
  34% { transform: translate(30cqw, 44cqw) rotate(28deg); } 38% { transform: translate(57cqw, 46cqw) rotate(26deg); } 41% { transform: translate(70cqw, 45cqw) rotate(30deg); }
  44% { transform: translate(10cqw, 13cqw) rotate(24deg); } 48% { transform: translate(27cqw, 13cqw) rotate(30deg); opacity: 1; }
  54%, 96% { transform: translate(104cqw, 30cqw) rotate(30deg); opacity: 0; } 100% { transform: translate(70cqw, 18cqw) rotate(24deg); opacity: 1; } }
@keyframes rv-scribble { from { transform: rotate(-5deg); } to { transform: rotate(4deg) translateY(-2px); } }
.fp .rv-snd { right: 6%; top: -4%; width: 16%; animation: rv-bob 3s ease-in-out -1.2s infinite alternate; }
@keyframes rv-draw { 0%, 4% { stroke-dashoffset: 1; } 30%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes rv-fill { 0%, 24% { opacity: 0; } 38%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes rv-bob { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-6px) rotate(2deg); } }
@keyframes rv-sway-l { from { transform: rotate(-14deg); } to { transform: rotate(10deg); } }
@keyframes rv-sway-r { from { transform: rotate(14deg); } to { transform: rotate(-10deg); } }
.fp .rv.k-io:not(.is-live) *, .fp .rv.k-io:not(.is-live) .rv-beams i { animation-play-state: paused; }
@media (max-width: 600px) { .fp .rv { padding: 90px 0 100px; } .fp .rv-screen { width: 70%; } }
@media (prefers-reduced-motion: reduce) {
  .fp .rv *, .fp .rv-beams i { animation: none !important; transition: none !important; }
  .fp .rv-pencil { display: none; }
  .fp .rv-bg, .fp .rv-beams, .fp .rv-in { opacity: 1; transform: none; } .fp .rv-ln { stroke-dashoffset: 0; } .fp .rv-fill { opacity: 1; }
}

.fp .fs { position: fixed; inset: 0; z-index: 2147481000; display: grid; place-items: center; padding: 16px; }
.fp .fs[hidden] { display: none; }
.fp .fs-dim { position: absolute; inset: 0; background: color-mix(in srgb, var(--b1-soft, #EEE8FF) 55%, rgba(251, 250, 255, .82)); opacity: 0; transition: opacity .25s ease; }
.fp .fs.fs-in .fs-dim { opacity: 1; }
.fp .fs-card { position: relative; margin: 0; width: min(100%, 860px); padding: 14px 14px 12px; border-radius: 22px; background: #fff; border: 2.5px solid var(--ink, #1C1A27); box-shadow: 6px 6px 0 var(--ink, #1C1A27), 0 40px 90px -30px rgba(40, 20, 90, .45);
  opacity: 0; transform: scale(.6) translateY(40px) rotate(-2deg); transition: opacity .2s ease, transform .5s cubic-bezier(.25, 1.5, .45, 1); }
.fp .fs.fs-in .fs-card { opacity: 1; transform: none; }
.fp .fs-top { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 4px 10px; }
.fp .fs-logo { display: inline-flex; height: 28px; max-width: 120px; } .fp .fs-logo img { height: 100%; width: auto; object-fit: contain; }
.fp .fs-name { font: 800 19px/1.1 var(--brand-display, var(--display)); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp .fs-dots { display: flex; gap: 6px; } .fp .fs-dots i { width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--ink, #1C1A27); animation: fs-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes fs-pop { from { transform: scale(0); } }
.fp .fs-frame { border-radius: 14px; }
.fp .fs-tag { display: flex; align-items: center; gap: 8px; margin: 10px 4px 0; font: 700 14.5px/1.3 var(--text); color: var(--ink-2); min-height: 19px; }
.fp .fs-live { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #E8558A; animation: k-blink 1.2s steps(2, jump-none) infinite; }
html.fs-on, html.fs-on body { overflow: hidden; }

html:has(body.fp-home) { scrollbar-gutter: stable; }

html.fs-on .fp .hero { --display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif; }

html.fs-on .pm-bak { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

@media (min-width: 901px) {
  :root { --fs-vw: calc(100vw - var(--sbw, 0px)); --fs-cw: min(688px, calc(var(--fs-vw) - 48px - 512px)); --fs-pad: max(24px, calc((var(--fs-vw) - var(--fs-cw) - 512px) / 2)); }
  .fp .fs { justify-items: start; padding: 24px 24px 24px var(--fs-pad); }
  .fp .fs-card { width: var(--fs-cw); }
  html.fs-on .pm-bak { place-items: center end; padding-right: var(--fs-pad); }
  html.fs-on .pm-ark { width: 480px; }
}
@media (max-width: 900px) {
  .fp .fs { place-items: start center; padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 0; }
  .fp .fs-card { padding: 10px 10px 8px; border-radius: 18px; box-shadow: 4px 4px 0 var(--ink, #1C1A27); }
  .fp .fs-top { min-height: 28px; padding-bottom: 8px; } .fp .fs-name { font-size: 17px; } .fp .fs-dots i { width: 15px; height: 15px; }
  .fp .fs-tag { font-size: 13.5px; margin-top: 8px; }
}
@media (max-width: 620px) {
  
  html.fs-on .pm-ark { max-height: max(calc(100dvh - var(--fs-h, 300px)), min(440px, 92dvh)); }
  
  html.fs-on .pm-ark.pm-epost-open { max-height: min(92dvh, calc(100% - 12px)); }
}
@media (prefers-reduced-motion: reduce) { .fp .fs-card, .fp .fs-dim { transition: none; } .fp .fs-live { animation: none; } }

.fp .fs-idea { display: grid; gap: 10px; margin: 10px 4px 2px; }
.fp .fs-idea[hidden] { display: none; }
.fp .fs-hook { margin: 0; font: 600 16px/1.4 var(--text); color: var(--ink); }
.fp .fs-idea-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.fp .fs-make { min-height: 48px; }
.fp .fs-x { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 2px solid var(--ink, #1C1A27); font: 700 22px/1 var(--text); color: var(--ink); display: grid; place-items: center; z-index: 2; }
.fp .fs-x[hidden] { display: none; }
html.fs-idea-on .fp .fs-top { padding-right: 44px; }
.fp .templ button { transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s ease, background .18s ease; box-shadow: 2px 2px 0 var(--ink, #1C1A27); border-color: var(--ink, #1C1A27); }
.fp .templ button:hover, .fp .templ button:focus-visible { transform: translateY(-2px) rotate(-1deg); background: #FFF6D8; }
.fp .templ button.on { background: #FFE8A3; }
@media (prefers-reduced-motion: reduce) { .fp .templ button { transition: none; } .fp .templ button:hover { transform: none; } }
@media (max-width: 640px) {
  .fp .fs-hook { font-size: 15px; }
  .fp .fs-make { min-height: 44px; }
  .fp .templ { gap: 8px; }
  .fp .templ button { font-size: 14px; padding: 9px 12px; }
}
html.fs-idea-on .fp .fs-name { white-space: normal; overflow: visible; font-size: 22px; line-height: 1.15; }
@media (max-width: 640px) { html.fs-idea-on .fp .fs-name { font-size: 19px; } }

html.fs-idea-on .fp .fs-dim { background: rgba(23, 21, 42, .66); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (min-width: 901px) { html.fs-idea-on .fp .fs { justify-items: center; padding: 24px; } html.fs-idea-on .fp .fs-card { width: min(688px, calc(100vw - 48px)); } }
@media (max-width: 900px) {
  html.fs-idea-on .fp .fs { place-items: end stretch; padding: 0; }
  html.fs-idea-on .fp .fs-card { width: 100%; max-height: calc(100dvh - 12px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain;
    padding: 22px 14px calc(14px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; border-width: 2.5px 0 0; box-shadow: 0 -18px 50px -20px rgba(23, 21, 42, .5);
    transform: translateY(100%); transition: opacity .15s ease, transform .32s cubic-bezier(.2, .9, .3, 1); }
  html.fs-idea-on .fp .fs.fs-in .fs-card { transform: none; }
  html.fs-idea-on .fp .fs-card::before { content: ""; position: absolute; top: 8px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: rgba(23, 21, 42, .22); }
  html.fs-idea-on .fp .fs-x { top: 16px; right: 12px; }
  html.fs-idea-on .fp .fs-idea { margin-top: 12px; }
  html.fs-idea-on .fp .fs-idea-go { flex-direction: column; align-items: stretch; gap: 6px; }
  html.fs-idea-on .fp .fs-make { width: 100%; justify-content: center; min-height: 52px; }
  html.fs-idea-on .fp .fs-other { align-self: center; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { html.fs-idea-on .fp .fs-card { transition: none; } }

.fp .fs-teaser { margin: 10px 4px 2px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--b1-soft, #EEE8FF) 60%, #fff); }
.fp .fs-teaser[hidden] { display: none; }
.fp .fs-tz-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 8px; font: 600 14px/1.3 var(--text); color: var(--ink-2); }
.fp .fs-tz-h b { font: 800 15px/1.2 var(--display); color: var(--ink); }
.fp .fs-tz-l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.fp .fs-tz-l li { position: relative; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 10px; background: #fff; border: 1.5px solid var(--hair); animation: fs-tz-in .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.fp .fs-tz-bar { flex: 1; height: 9px; border-radius: 6px; background: linear-gradient(90deg, var(--b1, #8B6CFF) 0%, var(--b2, #FFB38A) 50%, var(--b1, #8B6CFF) 100%); background-size: 200% 100%; opacity: .45; filter: blur(2px); animation: fs-tz-sh 1.6s linear infinite; }
.fp .fs-tz-l svg { width: 16px; height: 16px; flex: none; opacity: .7; }
.fp .fs-tz-l li:has(.fs-tz-img) { height: auto; flex-direction: column; align-items: stretch; padding: 5px; gap: 5px; }
.fp .fs-tz-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 7px; object-fit: cover; filter: blur(2.5px) saturate(.9); }
.fp .fs-tz-r { flex: 1; display: flex; align-items: center; gap: 6px; padding: 0 4px 2px; }
@keyframes fs-tz-in { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fs-tz-sh { from { background-position: 0 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .fp .fs-tz-l li, .fp .fs-tz-bar { animation: none; } }
@media (max-width: 640px) { .fp .fs-teaser { margin-top: 8px; padding: 8px 10px; } .fp .fs-tz-h { margin-bottom: 6px; font-size: 13px; } .fp .fs-tz-l li { height: 30px; } }

.fp .once { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 22px auto 0; max-width: 640px; padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--glow); text-align: left; }
.fp .once[hidden] { display: none; }
.fp .once img { width: 50px; height: 55px; flex: none; }
.fp .once p { flex: 1; min-width: 200px; margin: 0; display: grid; gap: 2px; font-size: 14.5px; color: var(--ink-2); }
.fp .once p b { font: 800 17px/1.25 var(--display); color: var(--ink); }
.fp .once-go { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 640px) { .fp .once-go { width: 100%; justify-content: center; } }


.fp h1, .fp h2, .fp h3 { text-wrap: balance; }