.fp {
--m-white: var(--c-surface); --m-ink: var(--c-ink); --m-ink2: var(--c-ink-2); --m-line: var(--c-line);
--m-lime: var(--c-hero); --m-lime-ink2: var(--c-hero-ink-2); --m-deep: var(--c-deep); --m-deep-2: #2A2A1B;
--m-deep-ink2: var(--c-deep-ink-2); --m-deep-line: var(--c-deep-line); --m-cyan: var(--c-soft);
--m-muted: var(--c-muted); --m-pop: var(--c-pop);
display: block; place-items: normal;
}
.fp { container-type: inline-size; container-name: fp; background: var(--m-white); color: var(--m-ink); font: 16px/1.5 var(--font-sans); overflow: hidden; overflow: clip; }
.fp *:where(:not(.fk-b *, .cap-hpb *)) { box-sizing: border-box; }
.fp h1, .fp h2, .fp h3, .fp p:where(:not(.fk-b *, .cap-hpb *)) { margin: 0; }
.fp h1, .fp h2, .fp h3 { text-wrap: balance; }
.fp .in:where(:not(.fk-b *, .cap-hpb *)) { max-width: 1160px; margin: 0 auto; padding-inline: 20px; }
.fp .band { padding-block: 52px; }
@container (min-width: 760px) {
.fp .band { padding-block: 92px; }
.fp .in:where(:not(.fk-b *, .cap-hpb *)) { padding-inline: 40px; }
}
.fp .g-lime { background: var(--m-lime); }
.fp .g-muted { background: var(--m-muted); }
.fp .g-cyan { background: var(--m-cyan); }
.fp .g-deep { background: var(--m-deep); color: #fff; }
.fp .eb { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 2px solid currentColor; font: 500 13px/1 var(--font-mono); letter-spacing: .02em; }
.fp .h1 { font: 650 clamp(38px, 6.6cqi, 80px)/.98 var(--font-sans); letter-spacing: -.045em; }
.fp .h2 { font: 650 clamp(30px, 4.6cqi, 56px)/1.02 var(--font-sans); letter-spacing: -.04em; }
.fp .h3 { font: 650 clamp(22px, 2.5cqi, 32px)/1.1 var(--font-sans); letter-spacing: -.025em; }
.fp .lead { font-size: clamp(17px, 1.75cqi, 22px); line-height: 1.4; letter-spacing: -.012em; max-width: 32em; }
.fp .body { font-size: clamp(16px, 1.35cqi, 19px); line-height: 1.5; max-width: 31em; }
.fp .ink2 { color: var(--m-ink2); }
.fp .g-deep .ink2 { color: var(--m-deep-ink2); }
.fp .spud { display: flex; align-items: flex-end; gap: 6px; }
.fp .spud img { image-rendering: pixelated; flex: none; }
.fp .spud .bub { border-radius: 14px 14px 4px 14px; }
.fp .bub:where(:not(.fk-b *, .cap-hpb *)) { position: relative; padding: 8px 11px; border-radius: 14px 14px 14px 4px; background: #fff; color: var(--m-ink); border: 2px solid var(--m-ink); font: 600 13px/1.3 var(--font-sans); max-width: 15em; margin-bottom: 18px; }
.fp .faq details { border-top: 2px solid var(--m-ink); padding-block: 14px; }
.fp .faq details:last-child { border-bottom: 2px solid var(--m-ink); }
.fp .faq summary { cursor: pointer; font: 650 clamp(17px, 1.8cqi, 21px)/1.25 var(--font-sans); 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: 500 22px/1 var(--font-mono); }
.fp .faq details[open] summary::after { content: "–"; }
.fp .faq details p { margin-top: 8px; color: var(--m-ink2); }
.fp .closing { font: 650 clamp(40px, 8cqi, 112px)/.95 var(--font-sans); letter-spacing: -.05em; }
.fp .hand { margin: 0; font: 600 clamp(16px, 1.5cqi, 19px)/1.25 var(--font-sans); letter-spacing: -.01em; }
.fp a { color: inherit; }
.tA .faqg { display: grid; gap: 24px; }
@container (min-width: 760px) {
.tA .faqg { grid-template-columns: .8fr 1.2fr; }
}
.tA .closeg { display: grid; gap: 24px; justify-items: start; }
.tD .hero-d { display: grid; gap: 30px; align-items: center; }
@container (min-width: 760px) {
.tD .hero-d { grid-template-columns: .95fr 1.05fr; gap: 40px; }
}
.tD .scene { position: relative; padding: 70px 0 0 0; }
@container (min-width: 760px) {
.tD .scene { padding: 80px 0 0 150px; }
}
.tD .scene .presenter { position: absolute; z-index: 3; left: 0; bottom: -14px; }
.tD .scene .presenter img { width: clamp(84px, 12cqi, 140px); height: auto; image-rendering: pixelated; display: block; }
.tD .scene .talk { position: absolute; z-index: 4; top: 0; left: 0; max-width: min(300px, 80%); padding: 14px 16px; border-radius: 22px; background: #fff; border: 3px solid var(--m-ink); box-shadow: 5px 5px 0 var(--m-ink); }
.tD .scene .talk::after { content: ""; position: absolute; left: 34px; bottom: -14px; width: 22px; height: 22px; background: #fff; border-right: 3px solid var(--m-ink); border-bottom: 3px solid var(--m-ink); transform: rotate(45deg) skew(8deg, 8deg); }
.tD .scene .talk .hand { font-size: clamp(17px, 1.7cqi, 20px); }
.tD .px { position: absolute; z-index: 1; width: 12px; height: 12px; background: var(--m-ink); box-shadow: 12px 0 0 var(--m-ink), -12px 0 0 var(--m-ink), 0 12px 0 var(--m-ink), 0 -12px 0 var(--m-ink); }
.tD .px.s1 { top: 22px; right: 12%; background: #fff; box-shadow: 12px 0 0 #fff, -12px 0 0 #fff, 0 12px 0 #fff, 0 -12px 0 #fff; }
.tD .px.s2 { bottom: 26%; right: 2px; width: 8px; height: 8px; box-shadow: 8px 0 0 var(--m-ink), -8px 0 0 var(--m-ink), 0 8px 0 var(--m-ink), 0 -8px 0 var(--m-ink); }
.tP .hero-copy { display: grid; gap: 16px; justify-items: start; }
.tP .secg2 { display: grid; gap: 34px; align-items: center; }
@container (min-width: 760px) {
.tP .secg2 { grid-template-columns: .9fr 1.1fr; gap: 56px; }
}
.tP .sec-copy { display: grid; gap: 18px; justify-items: start; }
.tP .seal-k { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: var(--m-lime); color: var(--m-ink); font: 500 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.tP .seal-k svg { width: 15px; height: 15px; }
.tP .tc { text-decoration: none; justify-self: start; display: inline-flex; padding: 14px 22px; border-radius: 999px; background: var(--m-lime); color: var(--m-ink); font: 600 16px/1 var(--font-sans); box-shadow: 4px 4px 0 #3E3D31; }
.tP .g-deep :is(a, button):focus-visible:where(:not(.fk-b *, .cap-hpb *)) { outline-color: var(--lime); }
.tP .vault { position: relative; aspect-ratio: 1; width: 100%; max-width: 600px; justify-self: center; border-radius: 28px; background: var(--m-deep); border: 2px solid #3E3D31; box-shadow: 6px 6px 0 var(--m-lime); overflow: hidden; container-type: inline-size; perspective: 1400px; --t-bolts: 3s; --t-bang: 3s; --t-tag: 3.05s; --t-says: 3.2s; --t-cards: 3.4s; }
.tP .vault > * { position: absolute; }
.tP .vault .vframe { left: 0; top: 0; width: 100%; height: 100%; }
.tP .vault .door { left: 12.667%; top: 19.333%; width: 58%; height: 58%; transform-origin: 0% 50%; }
.tP .vault .door > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tP .vault .seal-m { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; color: var(--m-ink); pointer-events: none; }
.tP .vault .seal-m svg { width: 6cqi; height: 6cqi; }
.tP .vault .seal-m b { font: 650 9cqi/1 var(--font-sans); letter-spacing: -.04em; }
.tP .vault .seal-m span { font: 600 3.4cqi/1.2 var(--font-sans); }
.tP .vault .lever { position: absolute; right: -6%; top: 46.5%; width: 14%; height: 6%; border-radius: 99px; background: var(--m-lime); border: 2px solid var(--m-ink); }
.tP .vault .tag { left: 41.7%; top: 10.5%; translate: -50% 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--m-lime); color: var(--m-ink); border: 2px solid var(--m-ink); font: 500 clamp(9px, 2.1cqi, 13px)/1 var(--font-mono); white-space: nowrap; z-index: 4; }
.tP .vault .disc { display: grid; place-items: center; border-radius: 50%; background: #F6F7F2; z-index: 5; }
.tP .vault .disc img { width: 82%; height: auto; image-rendering: pixelated; }
.tP .vault .hero-s { left: 71.3%; top: 30.7%; width: 26%; aspect-ratio: 1; }
.tP .vault > * { margin-top: 5.5cqi; }
.tP .vault.v-live { --t-bolts: 1.8s; --t-tag: 1.75s; --t-cards: 2.05s; }
.tP .vault.armed.v-live .door, .tP .vault.armed.v-live .hero-s { transform: translateX(43.5cqi); }
.tP .vault.armed .bolts { opacity: .2; }
.tP .vault.armed .tag { opacity: 0; transform: scale(.6); }
.tP .vault.run.v-live .door, .tP .vault.run.v-live .hero-s { animation: door-slide 1.45s cubic-bezier(.6,0,.2,1) .35s both; }
.tP .vault.run .bolts { animation: bolts .3s ease var(--t-bolts) both; }
.tP .vault.run .tag { animation: pop .3s cubic-bezier(.3,1.6,.5,1) var(--t-tag) both; }
@keyframes door-slide { from { transform: translateX(43.5cqi); } to { transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes bolts { from { opacity: .2; } to { opacity: 1; } }
.tP .hero-v3 .scene { position: relative; padding: 70px 0 0 0; }
@container (min-width: 760px) {
.tP .hero-v3 .scene { padding: 56px 0 0 110px; }
}
.tP .hpb { position: relative; width: 100%; max-width: 560px; margin: 44px 0 0 auto; visibility: hidden; }
@container (max-width: 759px) {
.tP .hpb { margin-top: 56px; }
}
.tP .hpb.ready { visibility: visible; }
.tP .hero-v3 .presenter { position: absolute; z-index: 3; left: 0; bottom: 0; }
@container (min-width: 760px) {
.tP .hero-v3 .scene { padding-left: 150px; }
.tP .hero-v3 .talk { top: auto; left: 2px; bottom: calc(clamp(84px, 12cqi, 140px) + 20px); max-width: 160px; padding: 10px 14px 12px; }
.tP .hero-v3 .talk .hand { font-size: clamp(16px, 1.3cqi, 18px); line-height: 1.25; text-wrap: balance; }
.tP .hero-v3 .talk::after { left: 30px; }
}
@container (max-width: 759px) {
.tP .hero-v3 .talk { left: auto; right: 94px; top: 10px; max-width: min(250px, calc(100% - 104px)); padding: 10px 14px; }
.tP .hero-v3 .talk::after { left: auto; right: -13px; bottom: auto; top: 50%; margin-top: -11px; transform: rotate(-45deg) skew(8deg, 8deg); }
}
.tP .hero-v3 .presenter img { width: clamp(84px, 12cqi, 140px); height: auto; image-rendering: pixelated; display: block; }
@container (max-width: 759px) {
.tP .hero-v3 .presenter { left: auto; right: 0; top: 0; bottom: auto; }
.tP .hero-v3 .presenter img { width: 76px; }
}
.tP .nomore-g { display: grid; gap: 22px; align-items: center; }
@container (min-width: 760px) {
.tP .nomore-g { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; }
}
.tP .nomore { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.tP .nomore li { width: fit-content; }
.fp .g-pop { background: var(--m-pop); }
.tP .rc-copy { display: grid; gap: 14px; justify-items: start; position: relative; z-index: 2; }
.tP .rc-copy .h3, .tP .ways .rc-copy .h3 { font-size: clamp(32px, 4cqi, 56px); line-height: 1; letter-spacing: -.04em; max-width: 8.15em; text-wrap: balance; }
.tP .ways .g-lime .uses span, .tP .ways .g-cyan .uses span, .tP .ways .g-pop .uses span { background: #fff; }
.tP .g-deep .rc-copy { color: #F6F7F2; }
.tP .g-deep .rc-copy .eb { color: var(--m-lime); }
.tP .g-deep .uses-l { color: var(--m-deep-ink2); }
.tP .g-deep .uses span, .tP .ways .g-deep .uses span { background: var(--m-deep-2); border-color: var(--m-deep-line); color: #F6F7F2; }
.tP .rc-art { position: relative; }
.tP .wfree { position: relative; z-index: 1; width: 100%; aspect-ratio: 1; max-width: 600px; margin-inline: auto; translate: 0 calc(var(--py, 0) * -22px); }
.tP .rcb { position: relative; overflow: hidden; overflow: clip; }
.tP .rcb-in { display: grid; gap: 30px; align-items: center; }
@container (min-width: 760px) {
.tP .rcb-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; }
.tP .rcb.flip .rc-copy { order: 2; }
.tP .rcb .wfree { margin-block: -40px; }
}
.tP .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tP .nm-mq { position: relative; display: grid; gap: 14px; padding-bottom: 8px; }
.tP .nm-row { overflow: hidden; padding: 4px 0 10px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%); }
.tP .nm-track { display: flex; width: max-content; animation: nm-x var(--dur, 46s) linear infinite; will-change: transform; }
.tP .nm-row.rev .nm-track { animation-direction: reverse; }
.tP .nm-track .nomore { flex-wrap: nowrap; gap: 14px; }
.tP .nm-track .nomore { padding-right: 14px; }
.tP .nm-track li { white-space: nowrap; }
@keyframes nm-x { to { transform: translateX(-50%); } }
.tP .nm-mq:hover .nm-track, .tP .nm-mq:focus-within .nm-track, .tP .nm-mq.paused .nm-track { animation-play-state: paused; }
.tP .nm-mq { --sl: max(14px, calc((100cqi - 1160px) / 2 + 20px)); --sw: clamp(76px, 9cqi, 124px); }
.tP .nm-band .nm-mq { margin-top: clamp(56px, 7.5cqi, 104px); }
.tP .nm-spud { position: absolute; z-index: 2; right: var(--sl); top: 0; translate: 0 calc(-100% + 8px); width: clamp(64px, 7cqi, 96px); line-height: 0; pointer-events: none; }
.tP .nm-spud img { width: 100%; height: auto; }
.tP .nm-mq .nm-row { padding-left: 0; }
@media (prefers-reduced-motion: reduce) {
.tP .nm-track { animation: none; }
}
.tP .wsub { margin: 12px 0 0; max-width: 24em; font: 500 clamp(17px, 1.75cqi, 21px)/1.38 var(--font-sans); letter-spacing: -.012em; opacity: .84; text-wrap: pretty; }
@container (min-width: 760px) {
.tP .rcb:not(.flip) .rc-copy { padding-right: clamp(24px, 6.4cqi, 92px); }
.tP .rcb.flip .rc-copy { padding-left: clamp(24px, 6.4cqi, 92px); }
}
@container (max-width: 759px) {
.tP .rcb .rc-art { margin-top: 64px; }
}
.tP .rcb .rc-art::before { content: ""; position: absolute; inset: 4% 6%; z-index: 0; background-image: radial-gradient(rgba(28,27,13,.15) 1.6px, transparent 1.8px); background-size: 16px 16px; -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent); mask-image: radial-gradient(closest-side, #000 50%, transparent); translate: 0 calc(var(--py, 0) * 50px); }
.tP .rcb.g-deep .rc-art::before { background-image: radial-gradient(rgba(210,255,81,.24) 1.6px, transparent 1.8px); }
.tP .wspud { position: absolute; z-index: 3; display: block; width: clamp(84px, 10cqi, 132px); translate: 0 calc(var(--py, 0) * 36px); pointer-events: none; }
.tP .wspud img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.tP .wspud.stand { left: 0; bottom: 0; margin-left: calc(-1 * clamp(60px, 8cqi, 110px)); }
.tP .flip .wspud.stand { left: auto; right: 0; margin-left: 0; margin-right: calc(-1 * clamp(60px, 8cqi, 110px)); }
.tP .g-deep .wspud { padding: 10px; border-radius: 50%; background: var(--m-lime); border: 2px solid var(--m-ink); box-shadow: 4px 4px 0 rgba(0,0,0,.35); }
@container (max-width: 759px) {
.tP .wspud.stand, .tP .flip .wspud.stand { left: auto; right: 0; bottom: auto; top: -54px; margin: 0; }
}
@keyframes sp-pop { from { opacity: 0; scale: .4; rotate: -12deg; } 60% { opacity: 1; scale: 1.12; rotate: 4deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
.tP .fp-land.armed:not(.on) .wspud { opacity: 0; }
.tP .fp-land.on .wspud { animation: sp-pop .65s cubic-bezier(.3,1.4,.5,1) .55s both; }
@keyframes rc-in { from { opacity: 0; translate: -26px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes rc-pop { from { opacity: 0; scale: .7; } 70% { scale: 1.06; } to { opacity: 1; scale: 1; } }
.tP .fp-land.armed:not(.on) .rc-copy > *, .tP .fp-land.armed:not(.on) .uses span { opacity: 0; }
.tP .fp-land.on .rc-copy > *, .tP .row.fp-land.on .row-copy > :not(.wspud) { animation: rc-in .55s cubic-bezier(.2,.8,.2,1) both; }
.tP .fp-land.on .rc-copy > :nth-child(2) { animation-delay: .07s; }
.tP .fp-land.on .rc-copy > :nth-child(3) { animation-delay: .14s; }
.tP .fp-land.on .rc-copy > :nth-child(4) { animation-delay: .21s; }
.tP .fp-land.on .rc-copy > :nth-child(5) { animation-delay: .28s; }
.tP .fp-land.on .uses span { animation: rc-pop .45s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(.35s + var(--u, 0) * 90ms); }
.tP .ways { margin-top: 56px; }
.tP #ben-sec + .ways { margin-top: 0; }
.tP .ways .h3 { font-size: clamp(24px, 2.6cqi, 34px); }
.tP .ways .uses span { background: #fff; }
.fp.tP #ben-sec { padding-block: 40px; }
@container (min-width: 760px) {
.fp.tP #ben-sec { padding-block: 56px; }
}
.tP .nomore li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px; background: #fff; border: 2px solid var(--m-ink); box-shadow: 4px 4px 0 var(--m-ink); font: 650 clamp(18px, 2.1cqi, 24px)/1.2 var(--font-sans); letter-spacing: -.02em; }
.tP .nomore li i { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--m-ink); color: var(--m-lime); font: 650 15px/1 var(--font-sans); font-style: normal; }
.nmi-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.tP .nomore li i.nmi { position: relative; width: 40px; height: 40px; border-radius: 12px; background: var(--m-muted); color: var(--m-ink); border: 2px solid var(--m-ink); }
.tP .nomore li .nmi svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tP .nomore li .nmi b { position: absolute; right: -7px; top: -7px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--m-ink); color: var(--m-lime); border: 2px solid #fff; font: 650 10px/1 var(--font-sans); }
.tP .uses { display: flex; flex-wrap: wrap; gap: 8px; }
.tP .uses span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 14px; background: var(--m-muted); border: 2px solid var(--m-ink); font: 600 14.5px/1.25 var(--font-sans); }
.tP .uses span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--m-lime); box-shadow: 0 0 0 1.5px var(--m-ink); flex: none; }
.tP .uses-l { font: 500 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--m-ink2); }
.tP .rcb:not(.g-deep) .uses-l { color: var(--m-ink); }
.fp .cta { display: inline-flex; align-items: center; justify-self: start; }
.fp .h1 .h1-l { display: block; }
.cap-hpb { --k-u: 1px }
.cap-hpb .kp { --k-u: calc(var(--kp-w, var(--phone-w)) / 374); position: relative; flex: 0 0 auto; box-sizing: border-box; width: var(--kp-w, var(--phone-w)); padding: calc(11 * var(--k-u)); border-radius: calc(56 * var(--k-u)); background: var(--c-ink); rotate: -2deg; box-shadow: inset 0 0 0 calc(1.5 * var(--k-u)) var(--c-deep-line), inset 0 0 0 calc(3 * var(--k-u)) var(--c-ink), 0 calc(60 * var(--k-u)) calc(80 * var(--k-u)) calc(-48 * var(--k-u)) rgba(28, 27, 13, .55), 0 calc(22 * var(--k-u)) calc(34 * var(--k-u)) calc(-22 * var(--k-u)) rgba(28, 27, 13, .4); }
.cap-hpb .kp::before { content: ""; position: absolute; left: calc(-3 * var(--k-u)); top: calc(150 * var(--k-u)); width: calc(3 * var(--k-u)); height: calc(50 * var(--k-u)); border-radius: calc(2 * var(--k-u)) 0 0 calc(2 * var(--k-u)); background: var(--c-deep-line); box-shadow: 0 calc(64 * var(--k-u)) 0 var(--c-deep-line); }
.cap-hpb .kp::after { content: ""; position: absolute; right: calc(-3 * var(--k-u)); top: calc(190 * var(--k-u)); width: calc(3 * var(--k-u)); height: calc(80 * var(--k-u)); border-radius: 0 calc(2 * var(--k-u)) calc(2 * var(--k-u)) 0; background: var(--c-deep-line); }
.cap-hpb .kp-isl { position: absolute; z-index: 3; top: calc(21 * var(--k-u)); left: 50%; width: calc(110 * var(--k-u)); height: calc(32 * var(--k-u)); margin-left: calc(-55 * var(--k-u)); border-radius: calc(20 * var(--k-u)); background: var(--c-ink); }
.cap-hpb .kp-scr { position: relative; box-sizing: border-box; width: 100%; aspect-ratio: 402 / 874; overflow: hidden; border-radius: calc(45 * var(--k-u)); background: var(--c-surface); color: var(--c-ink); font: 400 calc(14 * var(--k-u))/1.35 var(--font-sans); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; gap: calc(10 * var(--k-u)); padding: calc(50 * var(--k-u)) calc(11 * var(--k-u)) calc(11 * var(--k-u)); }
.cap-hpb .kp-head { display: flex; align-items: center; justify-content: center; gap: calc(7 * var(--k-u)); height: calc(24 * var(--k-u)); flex: 0 0 auto; font-weight: 600; font-size: calc(15 * var(--k-u)); letter-spacing: -0.01em; }
.cap-hpb .kp-head .k-dot { width: calc(9 * var(--k-u)); height: calc(9 * var(--k-u)); box-shadow: 0 0 0 calc(1.5 * var(--k-u)) var(--c-ink); }
.cap-hpb .kp-body { flex: 1 1 0%; min-height: 0px; display: flex; flex-direction: column; gap: calc(10 * var(--k-u)); }
.cap-hpb .kp-foot { margin-top: auto; flex: 0 0 auto; }
.cap-hpb .k { --k-bg: var(--c-surface); --k-ink: var(--c-ink); --k-ink-2: var(--c-ink-2); --k-line: var(--c-line); --k-sub: var(--c-muted); --k-edge: var(--border) solid var(--c-ink); --k-shadow: var(--shadow-hard); --k-r: calc(16 * var(--k-u)); --k-pill: var(--c-ink); --k-pill-ink: var(--c-surface); --k-ok-edge: var(--c-ink); box-sizing: border-box; width: 100%; max-width: calc(320 * var(--k-u)); background: var(--k-bg); color: var(--k-ink); border: var(--k-edge); border-radius: var(--k-r); box-shadow: var(--k-shadow); font: 400 calc(14 * var(--k-u))/1.35 var(--font-sans); text-align: left; -webkit-font-smoothing: antialiased; }
.cap-hpb .k b { font-weight: 600; }
.cap-hpb .k p { margin: 0px; }
.cap-hpb .k ul { list-style: none; margin: 0px; padding: 0px; }
.cap-hpb .k svg { display: block; flex: 0 0 auto; }
.cap-hpb .kp-scr .k { --k-edge: var(--hairline) solid var(--c-line); --k-shadow: none; --k-r: calc(14 * var(--k-u)); --k-bg: var(--c-surface); --k-ink: var(--c-ink); --k-ink-2: var(--c-ink-2); --k-line: var(--c-line); --k-sub: var(--c-muted); --k-pill: var(--c-ink); --k-pill-ink: var(--c-surface); max-width: none; }
.cap-hpb .k-mi { display: block; font: 500 calc(10.5 * var(--k-u))/1.3 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--k-ink-2, var(--c-ink-2)); }
.cap-hpb .k-sub { font-size: calc(12.5 * var(--k-u)); color: var(--k-ink-2); }
.cap-hpb .k-dot { width: calc(11 * var(--k-u)); height: calc(11 * var(--k-u)); border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 calc(1.5 * var(--k-u)) var(--c-ink), 0 0 0 calc(5 * var(--k-u)) rgba(210, 255, 81, .5); flex: 0 0 auto; }
.cap-hpb .k-ok { width: calc(20 * var(--k-u)); height: calc(20 * var(--k-u)); border-radius: 50%; background: var(--c-accent); color: var(--c-ink); box-shadow: inset 0 0 0 calc(1.5 * var(--k-u)) var(--k-ok-edge); display: grid; place-items: center; flex: 0 0 auto; }
.cap-hpb .abx * { box-sizing: border-box; }
.cap-hpb .abx p { margin: 0px; }
.cap-hpb .abx .ab { position: absolute; left: 0px; top: 0px; width: 600px; height: 600px; overflow: hidden; transform-origin: 0px 0px; transform: scale(var(--s)); color: var(--c-ink); font: 400 16px/1.35 var(--font-sans); -webkit-font-smoothing: antialiased; --k-ok-edge: var(--c-ink); }
.cap-hpb .abx .ab .abs { position: absolute; margin: 0px; }
.cap-hpb .abx .ab p { margin: 0px; }
.cap-hpb .abx .ab ul { list-style: none; margin: 0px; padding: 0px; }
.cap-hpb .abx .ab .k { text-align: left; }
@media (prefers-reduced-motion: reduce) {
.cap-hpb .abx * { transition: none !important; animation: auto ease 0s 1 normal none running none !important; scroll-behavior: auto !important; }
}
.cap-hpb .abx .va-mk { background: var(--c-accent); color: var(--c-ink); padding: 0px 0.12em; border-radius: 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-seg { align-self: center; margin-top: calc(4 * var(--k-u)); }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-rec { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--k-u)); padding: calc(12 * var(--k-u)) 0 calc(6 * var(--k-u)); }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-live { display: inline-flex; align-items: center; gap: calc(6 * var(--k-u)); font: 500 calc(11 * var(--k-u))/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink); background: var(--c-accent); border-radius: 999px; padding: calc(5 * var(--k-u)) calc(10 * var(--k-u)); }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-live i { width: calc(8 * var(--k-u)); height: calc(8 * var(--k-u)); border-radius: 50%; background: var(--c-ink); }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-time { font: 500 calc(54 * var(--k-u))/1 var(--font-mono); letter-spacing: -0.03em; color: var(--c-ink); }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-wave { display: flex; align-items: center; gap: calc(3.5 * var(--k-u)); height: calc(84 * var(--k-u)); color: var(--c-ink); }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-wave i { width: calc(4.5 * var(--k-u)); border-radius: calc(3 * var(--k-u)); background: currentcolor; }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-wave i:nth-child(n+20) { opacity: 0.25; }
.cap-hpb .abx .ab.r3-voice-memo-a .kp-scr .k.vm-tr { padding: calc(11 * var(--k-u)) calc(12 * var(--k-u)); display: grid; gap: calc(6 * var(--k-u)); }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-tr p { font-size: calc(13.5 * var(--k-u)); line-height: 1.45; color: var(--c-ink); }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-caret { display: inline-block; width: calc(2 * var(--k-u)); height: 1em; vertical-align: -0.15em; margin-left: 2px; background: var(--c-ink); }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-foot { display: flex; align-items: center; justify-content: space-between; padding: 0 calc(20 * var(--k-u)) calc(4 * var(--k-u)); }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-side { font: 600 calc(13 * var(--k-u))/1 var(--font-sans); color: var(--c-ink-2); width: calc(50 * var(--k-u)); text-align: center; }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-stop { width: calc(66 * var(--k-u)); height: calc(66 * var(--k-u)); border-radius: 50%; background: var(--c-ink); display: grid; place-items: center; box-shadow: 0 0 0 calc(5 * var(--k-u)) var(--c-surface), 0 0 0 calc(7 * var(--k-u)) var(--c-ink); }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-stop i { width: calc(20 * var(--k-u)); height: calc(20 * var(--k-u)); border-radius: calc(4 * var(--k-u)); background: var(--c-accent); }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-pk { padding: 12px 14px; display: grid; gap: 8px; background: var(--c-surface); border: 2px solid var(--c-ink); box-shadow: 4px 4px 0 var(--c-ink); border-radius: 16px; }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-pk .k-mi { font: 500 11px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-2); }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-pk ul { display: grid; gap: 6px; }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-pk li { display: flex; align-items: center; gap: 8px; font: 600 14px/1.2 var(--font-sans); color: var(--c-ink); }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-seg { display: inline-flex; border-radius: 999px; box-shadow: inset 0 0 0 calc(1.5 * var(--k-u)) var(--c-line); padding: calc(3 * var(--k-u)); }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-seg span { padding: calc(6 * var(--k-u)) calc(16 * var(--k-u)); border-radius: 999px; font-weight: 600; font-size: calc(13 * var(--k-u)); }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-seg .is-on { background: var(--c-ink); color: var(--c-surface); }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-rec { padding: calc(26 * var(--k-u)) 0 calc(22 * var(--k-u)); gap: calc(12 * var(--k-u)); }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-time { font-size: calc(62 * var(--k-u)); }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-wave { height: calc(96 * var(--k-u)); }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-tr p { font-size: calc(15 * var(--k-u)); }
.cap-hpb .abx .ab.r3-voice-memo-a .vm-pk li { font-size: 13.5px; }
.cap-hpb .abx .ab[class*="r2d-"] { cursor: auto; }
.cap-hpb .abx .ab .r2-badge { box-sizing: border-box; padding: 26px 12px 12px; border-radius: 12px; background: var(--c-surface); border: 2px solid var(--c-ink); display: grid; justify-items: center; text-align: center; gap: 2px; color: var(--c-ink); box-shadow: rgba(28, 27, 13, 0.35) 3px 3px 0px; }
.cap-hpb .abx .ab .r2-badge-clip { position: absolute; top: 8px; left: 50%; width: 34px; height: 8px; margin-left: -17px; border-radius: 4px; background: var(--c-muted); border: 1.5px solid var(--c-ink); }
.cap-hpb .abx .ab .r2-badge-clip::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 14px; height: 60px; margin-left: -7px; background: var(--c-pop); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-bottom: 0px; }
.cap-hpb .abx .ab .r2-badge-h { width: calc(100% + 24px); margin: 0px -12px 6px; padding: 5px 0px; background: var(--c-ink); color: var(--c-hero); font: 500 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.cap-hpb .abx .ab .r2-badge-hi { font: 500 9px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-2); }
.cap-hpb .abx .ab .r2-badge b { font: 650 21px/1.1 var(--font-sans); letter-spacing: -0.02em; margin-top: 2px; }
.cap-hpb .abx .ab .r2-badge-co { font: 500 11.5px/1.2 var(--font-sans); }
.cap-hpb .abx .ab .r2-badge-org { margin-top: 4px; padding: 3px 8px; border-radius: 999px; background: var(--c-soft); border: 1.5px solid var(--c-ink); font: 600 11px/1 var(--font-sans); }
.cap-hpb .abx .ab.r2d-capture-badge .r2c-print { width: 252px; padding: 12px 12px 14px; background: var(--c-surface); border: 2px solid var(--c-ink); border-radius: 6px; box-shadow: 5px 5px 0 var(--c-ink); display: grid; gap: 10px; }
.cap-hpb .abx .ab.r2d-capture-badge .r2c-photo { position: relative; height: 256px; border-radius: 3px; overflow: hidden; background: linear-gradient(180deg, var(--c-soft) 0 62%, var(--c-muted) 62%); }
.cap-hpb .abx .ab.r2d-capture-badge .r2c-cap { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-ink-2); }
.cap-hpb .abx .ab.r2d-capture-badge .r2c-cam { position: relative; display: grid; place-items: center; width: calc(50 * var(--k-u)); height: calc(50 * var(--k-u)); border-radius: 50%; background: var(--c-accent); border: calc(2 * var(--k-u)) solid var(--c-ink); color: var(--c-ink); }
.cap-hpb .abx .ab.r2d-capture-badge .r2c-cam i { position: absolute; right: -4px; top: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--c-pop); border: 1.5px solid var(--c-ink); font-variant-ligatures: ; font-variant-caps: ; font-variant-numeric: ; font-variant-east-asian: ; font-variant-alternates: ; font-variant-position: ; font-variant-emoji: ; font-weight: ; font-stretch: ; font-size: ; line-height: ; font-family: ; font-optical-sizing: ; font-size-adjust: ; font-kerning: ; font-feature-settings: ; font-variation-settings: ; font-language-override: ; font-style: normal; text-align: center; }
.cap-hpb .abx .ab.r2d-capture-badge .r2c-att { margin-top: 8px; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--c-muted); font-size: 11px; }
.cap-hpb .abx .ab.r2d-capture-badge .r2c-att > span { display: grid; }
.cap-hpb .abx .ab.r2d-capture-badge .r2c-att b { font-size: 11.5px; }
.cap-hpb .abx .ab.r2d-capture-badge .r2c-att i { font-style: normal; color: var(--c-ink-2); font-size: 10.5px; }
.cap-hpb .abx .ab.r2d-capture-badge .vm-tr { padding-bottom: 10px; }
.cap-hpb .abx .ab.r2d-capture-badge .r2c-pk li { font-size: 14.5px; }
.cap-hpb .hp-asset { width: 100%; max-width: var(--board-max); justify-self: end; min-width: 0px; }
.cap-hpb .hp-tile { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; max-width: 100%; border-radius: var(--r-lg); overflow: hidden; border: 2px solid var(--c-ink); box-shadow: 6px 6px 0 var(--c-ink); background: var(--c-surface); }
@media (max-width: 899px) {
.cap-hpb .hp-asset { justify-self: center !important; }
}
.cap-hpb .k.hp-snap { display: flex; align-items: center; gap: calc(12 * var(--k-u)); padding: calc(10 * var(--k-u)) calc(12 * var(--k-u)) calc(10 * var(--k-u)) calc(10 * var(--k-u)); }
.cap-hpb .hp-snap-ph { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: calc(72 * var(--k-u)); height: calc(72 * var(--k-u)); border-radius: calc(14 * var(--k-u)); background: var(--c-deep); }
.cap-hpb .hp-snap-c { position: absolute; inset: calc(6 * var(--k-u)); --cc: var(--c-accent); --cl: calc(12 * var(--k-u)); --cw: calc(2.5 * var(--k-u)); background: linear-gradient(var(--cc), var(--cc)) left top / var(--cl) var(--cw) no-repeat, linear-gradient(var(--cc), var(--cc)) left top / var(--cw) var(--cl) no-repeat, linear-gradient(var(--cc), var(--cc)) right top / var(--cl) var(--cw) no-repeat, linear-gradient(var(--cc), var(--cc)) right top / var(--cw) var(--cl) no-repeat, linear-gradient(var(--cc), var(--cc)) left bottom / var(--cl) var(--cw) no-repeat, linear-gradient(var(--cc), var(--cc)) left bottom / var(--cw) var(--cl) no-repeat, linear-gradient(var(--cc), var(--cc)) right bottom / var(--cl) var(--cw) no-repeat, linear-gradient(var(--cc), var(--cc)) right bottom / var(--cw) var(--cl) no-repeat; }
.cap-hpb .hp-mbadge { position: relative; display: grid; justify-items: center; gap: calc(2 * var(--k-u)); width: calc(42 * var(--k-u)); padding: calc(10 * var(--k-u)) calc(3 * var(--k-u)) calc(5 * var(--k-u)); border-radius: calc(5 * var(--k-u)); background: var(--c-surface); rotate: -5deg; }
.cap-hpb .hp-mbadge i { position: absolute; top: 0px; left: 0px; right: 0px; height: calc(6 * var(--k-u)); border-radius: calc(5 * var(--k-u)) calc(5 * var(--k-u)) 0 0; background: var(--c-ink); }
.cap-hpb .hp-mbadge b { font: 650 calc(7.5 * var(--k-u))/1.05 var(--font-sans); text-align: center; color: var(--c-ink); }
.cap-hpb .hp-mbadge s { text-decoration: none; padding: calc(1 * var(--k-u)) calc(3 * var(--k-u)); border-radius: 999px; background: var(--c-soft); font: 600 calc(5.5 * var(--k-u))/1.1 var(--font-sans); color: var(--c-ink); }
.cap-hpb .hp-snap-t { display: grid; gap: calc(2 * var(--k-u)); min-width: 0px; flex: 1 1 0%; }
.cap-hpb .hp-snap-t b { font-size: calc(16 * var(--k-u)); letter-spacing: -0.01em; text-wrap: balance; }
.cap-hpb .hp-snap-cam { display: grid; place-items: center; flex: 0 0 auto; width: calc(40 * var(--k-u)); height: calc(40 * var(--k-u)); border-radius: 50%; background: var(--c-accent); color: var(--c-ink); box-shadow: inset 0 0 0 calc(2 * var(--k-u)) var(--c-ink); }
.cap-hpb .hp-snap-t b { white-space: nowrap; }
@keyframes k-in { from { opacity: 0; translate: 0 calc(18 * var(--k-u)); scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
.cap-hpb [data-ground="deep"] :is(a,button):focus-visible { outline-color:var(--c-hero) }
.cap-hpb .abx { container-type:inline-size }
.cap-hpb .abx .ab { --s:.59 }
@container (min-width:400px) {
.cap-hpb .abx .ab { --s:.66 }
}
@container (min-width:480px) {
.cap-hpb .abx .ab { --s:.8 }
}
@container (min-width:560px) {
.cap-hpb .abx .ab { --s:.93 }
}
@container (min-width:592px) {
.cap-hpb .abx .ab { --s:.98 }
}
@supports (width:calc(1px * tan(atan2(100cqw,600px)))) {
.cap-hpb .abx .ab { --tile-w:100cqw;--s:tan(atan2(var(--tile-w),600px)) }
}
.cap-hpb .ab>*:nth-child(2) { --i:1 }
.cap-hpb .ab>*:nth-child(3) { --i:2 }
.cap-hpb .ab>*:nth-child(4) { --i:3 }
.cap-hpb .hp-tile.k-armed:not(.k-run) .ab>:not(.r4-slide,.r4-dots) { opacity:0 }
.cap-hpb .hp-tile.k-armed.k-run .ab>:not(.r4-slide,.r4-dots) { animation:k-in var(--dur-enter) var(--spring) both;animation-delay:calc(var(--i,0) * var(--beat) / 2) }
.cap-hpb .hp-tile.k-armed:not(.k-run) { --k-u:1px }
@media (prefers-reduced-motion:reduce) {
.cap-hpb .hp-tile.k-armed:not(.k-run) .ab>* { opacity:1 }
}
.cap-hpb .abx .mo-only { display: none !important; }
@media (max-width: 699px) {
.cap-hpb #features .hp-tile.abx:has(> .ab.r3-voice-memo-a.r2d-capture-badge) { aspect-ratio: 461 / 588 !important; height: auto !important; max-height: 592px !important; background: var(--c-hero) !important; }
.cap-hpb #features .ab.r3-voice-memo-a.r2d-capture-badge { width: 600px !important; height: 600px !important; overflow: hidden !important; --mo-s: 0.77; transform: scale(var(--mo-s)) translate(-6px, -2px) !important; }
@supports (width: calc(1px * tan(atan2(100cqw, 600px)))) {
.cap-hpb #features .ab.r3-voice-memo-a.r2d-capture-badge { --tile-w: 100cqw; --mo-s: min(1, tan(atan2(var(--tile-w), 461px))); transform: scale(var(--mo-s)) translate(calc(-6px + max(0px, (100cqw / var(--mo-s) - 461px) / 2)), -2px) !important; }
}
.cap-hpb #features .ab.r3-voice-memo-a.r2d-capture-badge > div.kp { left: 24px !important; top: 20px !important; rotate: 0deg !important; }
.cap-hpb #features .ab.r3-voice-memo-a.r2d-capture-badge > div.kp > div.kp-scr > div.kp-body > div.k.vm-tr, .cap-hpb #features .ab.r3-voice-memo-a.r2d-capture-badge > div.r2c-print { display: none !important; }
.cap-hpb #features .ab.r3-voice-memo-a.r2d-capture-badge > div.k.k--sticker.vm-pk.r2c-pk { left: 128px !important; top: 352px !important; z-index: 4 !important; }
.cap-hpb #features .ab.r3-voice-memo-a.r2d-capture-badge > div.k.hp-snap { position: absolute !important; left: 190px !important; top: 100px !important; width: 256px !important; max-width: none !important; rotate: 4deg !important; z-index: 3 !important; --k-u: 1px; opacity: 1 !important; transform: none !important; display: flex !important; }
}
.cap-hpb #hpw { --board-max:100% }
.cap-hpb #hpw>div { background:transparent!important }
.cap-hpb #hpw .hp-asset { max-width:none }
.cap-hpb #hpw.notile #features .hp-tile.abx { background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important }
.cap-hpb #hpw.notile .ab { background:transparent!important }
.fk-b { --r-lg: 28px; --r-pill: 999px; --border: 2px; --hairline: 1px; --shadow-hard: 4px 4px 0 var(--c-ink); --spring: cubic-bezier(.34, 1.56, .64, 1); --dur-enter: 480ms; --beat: 600ms; --phone-w: clamp(260px, 26vw, 360px) }
.fk-b { --c-bg: #FFFFFF; --c-surface: #FFFFFF; --c-line: #E0E1DB; --c-ink: #1C1B0D; --c-ink-2: #6B6B62; --c-hero: #D2FF51; --c-hero-ink: #1C1B0D; --c-hero-ink-2: #49493D; --c-deep: #1C1B0D; --c-deep-ink: #FFFFFF; --c-deep-ink-2: #B0AFAA; --c-deep-line: #3E3D31; --c-soft: #B1EAF1; --c-soft-ink: #1C1B0D; --c-muted: #F6F7F2; --c-accent: #D2FF51; --c-deep-accent: #D2FF51; --c-on-accent: #1C1B0D; --c-pop: #F1A6FF }
.fk-b [data-ground="page"] { --g-bg: var(--c-bg); --g-ink: var(--c-ink); --g-ink-2: var(--c-ink-2); --g-line: var(--c-line); --g-accent: var(--c-accent); --g-chip: var(--c-ink); --g-chip-ink: var(--c-bg); }
.fk-b [data-ground="hero"] { --g-bg: var(--c-hero); --g-ink: var(--c-hero-ink); --g-ink-2: var(--c-hero-ink-2); --g-line: var(--c-hero-ink); --g-accent: var(--c-hero-ink); --g-chip: var(--c-hero-ink); --g-chip-ink: var(--c-hero); }
.fk-b [data-ground="deep"] { --g-bg: var(--c-deep); --g-ink: var(--c-deep-ink); --g-ink-2: var(--c-deep-ink-2); --g-line: var(--c-deep-line); --g-accent: var(--c-deep-accent); --g-chip: var(--c-deep-accent); --g-chip-ink: var(--c-on-accent); }
.fk-b [data-ground="soft"] { --g-bg: var(--c-soft); --g-ink: var(--c-soft-ink); --g-ink-2: var(--c-soft-ink); --g-line: var(--c-soft-ink); --g-accent: var(--c-soft-ink); --g-chip: var(--c-soft-ink); --g-chip-ink: var(--c-soft); }
.fk-b [data-ground] { background: var(--g-bg); color: var(--g-ink); }
.fk-b { --k-u: 1px }
.fk-b .kp { --k-u: calc(var(--kp-w, var(--phone-w)) / 374); position: relative; flex: none; box-sizing: border-box; width: var(--kp-w, var(--phone-w)); padding: calc(11 * var(--k-u)); border-radius: calc(56 * var(--k-u)); background: var(--c-ink); rotate: -2deg; box-shadow: inset 0 0 0 calc(1.5 * var(--k-u)) var(--c-deep-line), inset 0 0 0 calc(3 * var(--k-u)) var(--c-ink), 0 calc(60 * var(--k-u)) calc(80 * var(--k-u)) calc(-48 * var(--k-u)) rgba(28, 27, 13, .55), 0 calc(22 * var(--k-u)) calc(34 * var(--k-u)) calc(-22 * var(--k-u)) rgba(28, 27, 13, .4); }
.fk-b .kp::before { content: ""; position: absolute; left: calc(-3 * var(--k-u)); top: calc(150 * var(--k-u)); width: calc(3 * var(--k-u)); height: calc(50 * var(--k-u)); border-radius: calc(2 * var(--k-u)) 0 0 calc(2 * var(--k-u)); background: var(--c-deep-line); box-shadow: 0 calc(64 * var(--k-u)) 0 var(--c-deep-line); }
.fk-b .kp::after { content: ""; position: absolute; right: calc(-3 * var(--k-u)); top: calc(190 * var(--k-u)); width: calc(3 * var(--k-u)); height: calc(80 * var(--k-u)); border-radius: 0 calc(2 * var(--k-u)) calc(2 * var(--k-u)) 0; background: var(--c-deep-line); }
.fk-b [data-ground="deep"] .kp { box-shadow: inset 0 0 0 calc(1.5 * var(--k-u)) var(--c-deep-line), inset 0 0 0 calc(3 * var(--k-u)) var(--c-ink), 0 0 0 1px var(--c-deep-line), 0 calc(60 * var(--k-u)) calc(80 * var(--k-u)) calc(-48 * var(--k-u)) rgba(0, 0, 0, .6); }
.fk-b [data-ground="deep"] .kp::before { background: var(--c-deep-ink-2); box-shadow: 0 calc(64 * var(--k-u)) 0 var(--c-deep-ink-2); }
.fk-b [data-ground="deep"] .kp::after { background: var(--c-deep-ink-2); }
.fk-b .kp-isl { position: absolute; z-index: 3; top: calc(21 * var(--k-u)); left: 50%; width: calc(110 * var(--k-u)); height: calc(32 * var(--k-u)); margin-left: calc(-55 * var(--k-u)); border-radius: calc(20 * var(--k-u)); background: var(--c-ink); }
.fk-b .kp-scr { position: relative; box-sizing: border-box; width: 100%; aspect-ratio: 402 / 874; overflow: hidden; border-radius: calc(45 * var(--k-u)); background: var(--c-surface); color: var(--c-ink); font: 400 calc(14 * var(--k-u))/1.35 var(--font-sans); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; gap: calc(10 * var(--k-u)); padding: calc(50 * var(--k-u)) calc(11 * var(--k-u)) calc(11 * var(--k-u)); }
.fk-b .kp-head { display: flex; align-items: center; justify-content: center; gap: calc(7 * var(--k-u)); height: calc(24 * var(--k-u)); flex: none; font-weight: 600; font-size: calc(15 * var(--k-u)); letter-spacing: -.01em; }
.fk-b .kp-head .k-dot { width: calc(9 * var(--k-u)); height: calc(9 * var(--k-u)); box-shadow: 0 0 0 calc(1.5 * var(--k-u)) var(--c-ink); }
.fk-b .kp-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(10 * var(--k-u)); }
.fk-b .kp-foot { margin-top: auto; flex: none; }
.fk-b .k { --k-bg: var(--c-surface); --k-ink: var(--c-ink); --k-ink-2: var(--c-ink-2); --k-line: var(--c-line); --k-sub: var(--c-muted); --k-edge: var(--border) solid var(--c-ink); --k-shadow: var(--shadow-hard); --k-r: calc(16 * var(--k-u)); --k-pill: var(--c-ink); --k-pill-ink: var(--c-surface); --k-ok-edge: var(--c-ink); box-sizing: border-box; width: 100%; max-width: calc(320 * var(--k-u)); background: var(--k-bg); color: var(--k-ink); border: var(--k-edge); border-radius: var(--k-r); box-shadow: var(--k-shadow); font: 400 calc(14 * var(--k-u))/1.35 var(--font-sans); text-align: left; -webkit-font-smoothing: antialiased; }
.fk-b .k b { font-weight: 600; }
.fk-b .k p { margin: 0; }
.fk-b .k ul { list-style: none; margin: 0; padding: 0; }
.fk-b .k svg { display: block; flex: none; }
.fk-b [data-ground="deep"] .k { --k-shadow: 4px 4px 0 var(--c-accent); }
.fk-b .kp-scr .k { --k-edge: var(--hairline) solid var(--c-line); --k-shadow: none; --k-r: calc(14 * var(--k-u)); --k-bg: var(--c-surface); --k-ink: var(--c-ink); --k-ink-2: var(--c-ink-2); --k-line: var(--c-line); --k-sub: var(--c-muted); --k-pill: var(--c-ink); --k-pill-ink: var(--c-surface); max-width: none; }
.fk-b .k-mi { display: block; font: 500 calc(10.5 * var(--k-u))/1.3 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--k-ink-2, var(--c-ink-2)); }
.fk-b .k-dot { width: calc(11 * var(--k-u)); height: calc(11 * var(--k-u)); border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 calc(1.5 * var(--k-u)) var(--c-ink), 0 0 0 calc(5 * var(--k-u)) rgba(210, 255, 81, .5); flex: none; }
.fk-b .k-ok { width: calc(20 * var(--k-u)); height: calc(20 * var(--k-u)); border-radius: 50%; background: var(--c-accent); color: var(--c-ink); box-shadow: inset 0 0 0 calc(1.5 * var(--k-u)) var(--k-ok-edge); display: grid; place-items: center; flex: none; }
.fk-b .k-av { width: calc(32 * var(--k-u)); height: calc(32 * var(--k-u)); border-radius: 50%; display: grid; place-items: center; background: var(--c-hero); color: var(--c-ink); font: 700 calc(11 * var(--k-u))/1 var(--font-sans); box-shadow: inset 0 0 0 calc(1.5 * var(--k-u)) var(--c-ink); flex: none; }
.fk-b .k-tag { display: inline-flex; align-items: center; justify-self: start; padding: calc(2 * var(--k-u)) calc(8 * var(--k-u)); border-radius: var(--r-pill); font: 500 calc(10.5 * var(--k-u))/1.35 var(--font-mono); letter-spacing: .03em; white-space: nowrap; color: var(--c-ink); }
.fk-b .k-tag--new { background: var(--c-accent); box-shadow: inset 0 0 0 calc(1.2 * var(--k-u)) var(--c-ink); }
.fk-b .k-tag--pop { background: var(--c-pop); }
.fk-b .k-ic { width: calc(32 * var(--k-u)); height: calc(32 * var(--k-u)); border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 calc(1.5 * var(--k-u)) var(--k-line); flex: none; }
.fk-b .k-upd { overflow: hidden; }
.fk-b .k-upd header { display: flex; align-items: center; gap: calc(10 * var(--k-u)); padding: calc(11 * var(--k-u)) calc(14 * var(--k-u)); border-bottom: 1px solid var(--k-line); }
.fk-b .k-upd header b { flex: 1; font-size: calc(15 * var(--k-u)); }
.fk-b .k-upd li { display: flex; gap: calc(10 * var(--k-u)); align-items: flex-start; padding: calc(10 * var(--k-u)) calc(14 * var(--k-u)); border-top: 1px solid var(--k-line); }
.fk-b .k-upd li:first-child { border-top: 0; }
.fk-b .k-upd .k-tx { display: grid; gap: calc(2 * var(--k-u)); }
.fk-b .k-toast { --k-bg: var(--c-deep); --k-ink: var(--c-deep-ink); --k-ink-2: var(--c-deep-ink-2); --k-ok-edge: var(--c-deep); --k-r: var(--r-pill); display: flex; align-items: center; gap: calc(10 * var(--k-u)); padding: calc(7 * var(--k-u)) calc(8 * var(--k-u)) calc(7 * var(--k-u)) calc(10 * var(--k-u)); }
.fk-b .k-toast .k-tx { flex: 1; font-weight: 600; font-size: calc(13.5 * var(--k-u)); }
.fk-b .k-toast .k-undo { color: var(--c-deep-accent); font-weight: 600; font-size: calc(13.5 * var(--k-u)); padding: calc(6 * var(--k-u)) calc(10 * var(--k-u)); border-radius: var(--r-pill); }
.fk-b .k-note { display: grid; grid-template-columns: calc(32 * var(--k-u)) minmax(0, 1fr) auto; column-gap: calc(10 * var(--k-u)); row-gap: calc(3 * var(--k-u)); align-items: center; padding: calc(10 * var(--k-u)) calc(12 * var(--k-u)) calc(11 * var(--k-u)); }
.fk-b .k-note .k-nic { grid-row: 1 / span 3; align-self: start; width: calc(32 * var(--k-u)); height: calc(32 * var(--k-u)); border-radius: calc(9 * var(--k-u)); display: grid; place-items: center; background: var(--c-muted); color: var(--c-ink); box-shadow: inset 0 0 0 calc(1.5 * var(--k-u)) var(--c-ink); }
.fk-b .k-note .k-when { justify-self: end; }
.fk-b .k-note b { grid-column: 2 / -1; font-size: calc(14.5 * var(--k-u)); line-height: 1.25; letter-spacing: -.01em; }
.fk-b .k-note .k-meta { grid-column: 2 / -1; justify-self: start; margin-top: calc(3 * var(--k-u)); }
.fk-b { color-scheme:light; box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px) }
.fk-b { scroll-padding-top:env(safe-area-inset-top,0px) }
.fk-b { margin:0; padding:0; font:14px -apple-system,BlinkMacSystemFont,sans-serif; background:#fff; color:#000 }
.fk-b { --pg: #FFFFFF; --tx: #1C1B0D }
@media (prefers-color-scheme: dark) {
.fk-b:not([data-theme="light"]) { --pg: #1C1B0D; --pg-2: #24231A; --tx: #F6F7F2; --tx-2: #B0AFAA; --ln: #3E3D31; --ln-2: #55554A; --card: #24231A; --hard: #000000; --sel: #D2FF51; --chk: #3A3420; --on-chk: #F3DE9C; --pill: #D2FF51; --on-pill: #1C1B0D; --tag: #2E2D23; color-scheme: dark; }
}
.fk-b * { box-sizing: border-box; }
.fk-b { scroll-padding-top: calc(76px + env(safe-area-inset-top, 0px)) }
.fk-b { background: var(--pg); color: var(--tx); font: 16px/1.5 var(--font-sans); -webkit-font-smoothing: antialiased }
.fk-b::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--pg); }
.fk-b p { margin: 0; }
.fk-b .ab { position: absolute; left: 0; top: 0; width: 600px; height: 600px; overflow: hidden; transform-origin: 0 0; transform: scale(var(--s, .6)); color: var(--c-ink); font: 400 16px/1.35 var(--font-sans); -webkit-font-smoothing: antialiased; --k-ok-edge: var(--c-ink); cursor: zoom-in; }
.fk-b .ab:not([data-ground]) { background: #FFFFFF; }
.fk-b .ab .abs { position: absolute; margin: 0; }
.fk-b .ab p { margin: 0; }
.fk-b .ab ul { list-style: none; margin: 0; padding: 0; }
.fk-b .ab .mono { display: block; font: 500 11px/1.3 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--g-ink-2, var(--c-ink-2)); }
.fk-b .ab .k { text-align: left; }
.fk-b .nd { display: grid; place-items: center; border-radius: 50%; background: var(--c-surface); border: 2px solid var(--c-ink); box-shadow: 3px 3px 0 var(--c-ink); font: 700 17px/1 var(--font-sans); }
.fk-b .nd--you { background: var(--c-hero); font-size: 21px; font-weight: 650; box-shadow: 4px 4px 0 var(--c-ink); }
@media (prefers-reduced-motion: reduce) {
.fk-b * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.fk-b .va-mk { background: var(--c-accent); color: var(--c-ink); padding: 0 .12em; border-radius: .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.fk-b .va-type { display: flex; align-items: center; gap: calc(4 * var(--k-u)); margin-top: auto; padding: calc(6 * var(--k-u)) calc(6 * var(--k-u)) calc(6 * var(--k-u)) calc(14 * var(--k-u)); border-radius: var(--r-pill); box-shadow: inset 0 0 0 calc(1.5 * var(--k-u)) var(--c-ink); font-size: calc(14 * var(--k-u)); }
.fk-b .va-type > span:first-child { white-space: nowrap; }
.fk-b .va-type--t > span:first-child { flex: 1; color: var(--c-ink-2); }
.fk-b .va-send { margin-left: auto; width: calc(30 * var(--k-u)); height: calc(30 * var(--k-u)); border-radius: 50%; background: var(--c-ink); color: var(--c-accent); display: grid; place-items: center; flex: none; }
.fk-b .va-thr { display: flex; flex-direction: column; gap: calc(7 * var(--k-u)); padding-top: calc(4 * var(--k-u)); }
.fk-b .va-b { max-width: 80%; padding: calc(9 * var(--k-u)) calc(12 * var(--k-u)); border-radius: calc(18 * var(--k-u)) calc(18 * var(--k-u)) calc(18 * var(--k-u)) calc(6 * var(--k-u)); background: var(--c-muted); font-size: calc(13.5 * var(--k-u)); line-height: 1.35; align-self: flex-start; }
.fk-b .va-b--me { align-self: flex-end; background: var(--c-accent); border-radius: calc(18 * var(--k-u)) calc(18 * var(--k-u)) calc(6 * var(--k-u)) calc(18 * var(--k-u)); box-shadow: inset 0 0 0 calc(1.2 * var(--k-u)) var(--c-ink); }
.fk-b .va-cam { position: relative; height: calc(400 * var(--k-u)); margin: calc(-6 * var(--k-u)) calc(-11 * var(--k-u)) 0; background: var(--c-deep); display: grid; place-items: center; }
.fk-b .va-cam-c { position: absolute; width: calc(34 * var(--k-u)); height: calc(34 * var(--k-u)); border: calc(3 * var(--k-u)) solid var(--c-accent); }
.fk-b .va-cam-c1 { left: calc(34 * var(--k-u)); top: calc(70 * var(--k-u)); border-right: 0; border-bottom: 0; }
.fk-b .va-cam-c2 { right: calc(34 * var(--k-u)); top: calc(70 * var(--k-u)); border-left: 0; border-bottom: 0; }
.fk-b .va-cam-c3 { left: calc(34 * var(--k-u)); bottom: calc(70 * var(--k-u)); border-right: 0; border-top: 0; }
.fk-b .va-cam-c4 { right: calc(34 * var(--k-u)); bottom: calc(70 * var(--k-u)); border-left: 0; border-top: 0; }
.fk-b .va-cam-tag { position: absolute; top: calc(22 * var(--k-u)); left: 50%; translate: -50% 0; padding: calc(5 * var(--k-u)) calc(10 * var(--k-u)); border-radius: var(--r-pill); background: var(--c-accent); color: var(--c-ink); font: 500 calc(10.5 * var(--k-u))/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.fk-b .va-ctx { display: grid; gap: calc(4 * var(--k-u)); padding: calc(10 * var(--k-u)) calc(12 * var(--k-u)); border-radius: calc(12 * var(--k-u)); box-shadow: inset 0 0 0 calc(1.5 * var(--k-u)) var(--c-ink); }
.fk-b .va-ctx p { font-size: calc(13.5 * var(--k-u)); line-height: 1.35; }
.fk-b .va-shut { display: flex; align-items: center; justify-content: space-between; padding: calc(4 * var(--k-u)) calc(18 * var(--k-u)); margin-top: auto; }
.fk-b .va-thumb { width: calc(36 * var(--k-u)); height: calc(36 * var(--k-u)); border-radius: calc(8 * var(--k-u)); background: var(--c-soft); box-shadow: inset 0 0 0 calc(1.5 * var(--k-u)) var(--c-ink); }
.fk-b .va-sbtn { width: calc(62 * var(--k-u)); height: calc(62 * var(--k-u)); border-radius: 50%; box-shadow: inset 0 0 0 calc(3 * var(--k-u)) var(--c-ink); display: grid; place-items: center; }
.fk-b .va-sbtn i { width: calc(48 * var(--k-u)); height: calc(48 * var(--k-u)); border-radius: 50%; background: var(--c-accent); box-shadow: inset 0 0 0 calc(1.5 * var(--k-u)) var(--c-ink); }
.fk-b .va-flip { width: calc(36 * var(--k-u)); height: calc(36 * var(--k-u)); border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 calc(1.5 * var(--k-u)) var(--c-ink); font-size: calc(15 * var(--k-u)); }
.fk-b .va-table { width: 380px; height: 380px; border-radius: 50%; background: var(--c-surface); border: 2.5px solid var(--c-ink); box-shadow: 6px 6px 0 var(--c-ink); }
.fk-b .va-mug { width: 66px; height: 66px; border-radius: 50%; background: var(--c-pop); border: 2.5px solid var(--c-ink); box-shadow: inset 0 0 0 10px var(--c-surface), inset 0 0 0 12px var(--c-ink); }
.fk-b .va-mug::after { content: ""; position: absolute; right: -20px; top: 22px; width: 20px; height: 18px; border: 2.5px solid var(--c-ink); border-left: 0; border-radius: 0 10px 10px 0; }
.fk-b .va-mug2 { background: var(--c-soft); }
.fk-b .va-flat { width: 118px; height: 200px; border-radius: 24px; background: var(--c-ink); border: 2.5px solid var(--c-ink); box-shadow: 4px 4px 0 rgba(28,27,13,.25); display: grid; place-items: center; align-content: center; gap: 10px; color: var(--c-hero); }
.fk-b .va-flat b { font: 500 18px/1 var(--font-mono); }
.fk-b .va-tent { padding: 12px 18px; display: flex; align-items: center; gap: 9px; background: var(--c-surface); border: 2.5px solid var(--c-ink); border-radius: 6px; box-shadow: 4px 4px 0 var(--c-ink); font: 500 13px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.fk-b .va-lab { padding: 7px 12px; border-radius: 999px; background: var(--c-surface); border: 2px solid var(--c-ink); font-weight: 600; font-size: 14px; white-space: nowrap; }
.fk-b .va-bcard { box-sizing: border-box; width: 18em; padding: 1.1em 1.3em 1.2em; background: var(--c-surface); border: .14em solid var(--c-ink); border-radius: .6em; display: grid; gap: .25em; color: var(--c-ink); }
.fk-b .va-bcard b { font-size: 1.4em; letter-spacing: -.02em; line-height: 1.1; }
.fk-b .va-bcard > span { font-size: .95em; }
.fk-b .va-bcard .mono { font-size: .72em; letter-spacing: .04em; text-transform: none; color: var(--c-ink-2); }
.fk-b .va-bc-l { display: block; height: .25em; width: 3em; background: var(--c-accent); border-radius: 1em; margin: .35em 0 .3em; box-shadow: inset 0 0 0 .07em var(--c-ink); }
.fk-b .va-bcard--in { font-size: calc(14.5 * var(--k-u)); rotate: -3deg; }
.fk-b .vb-dash { width: 544px; height: 300px; box-sizing: border-box; padding: 14px; border-radius: 30px; background: var(--c-ink); box-shadow: 6px 6px 0 rgba(28, 27, 13, .25); }
.fk-b .vb-dash-scr { height: 100%; box-sizing: border-box; border-radius: 18px; background: var(--c-surface); padding: 14px 18px 16px; display: grid; grid-template-rows: auto 1fr; gap: 12px; }
.fk-b .vb-dash-top { display: flex; align-items: center; gap: 10px; }
.fk-b .vb-dash-app { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; font-size: 16px; }
.fk-b .vb-dash-app .k-dot { width: 10px; height: 10px; }
.fk-b .vb-dash-pill { font: 500 11.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: var(--c-hero); box-shadow: inset 0 0 0 1.5px var(--c-ink); }
.fk-b .vb-dash-clock { margin-left: auto; font: 500 16px/1 var(--font-mono); }
.fk-b .vb-dash-body { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; align-items: center; }
.fk-b .vb-dash-cap { display: grid; justify-items: center; gap: 6px; text-align: center; }
.fk-b .vb-dash-mic { width: 118px; height: 118px; border-radius: 50%; background: var(--c-hero); display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--c-ink), 4px 4px 0 var(--c-ink); }
.fk-b .vb-dash-cap b { font-size: 20px; font-weight: 650; margin-top: 4px; }
.fk-b .vb-dash-cap span:last-child { font-size: 13px; color: var(--c-ink-2); }
.fk-b .vb-dash-list { display: grid; gap: 8px; }
.fk-b .vb-dash-list li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--c-line); }
.fk-b .vb-dash-list li > span:last-child { display: grid; gap: 2px; min-width: 0; }
.fk-b .vb-dash-list b { font-size: 15px; font-weight: 600; line-height: 1.2; }
.fk-b .vb-dash-list i { font-style: normal; font-size: 12.5px; color: var(--c-ink-2); }
.fk-b .vb-dash-ic { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--c-ink); }
.fk-b .vb-dash-ic--on { background: var(--c-ink); color: var(--c-hero); box-shadow: none; }
.fk-b .vb-tap { width: 44px; height: 44px; border-radius: 50%; background: rgba(210, 255, 81, .85); box-shadow: 0 0 0 3px var(--c-ink); }
.fk-b .vb-tap { width: 36px; height: 36px; background: rgba(210, 255, 81, .45); box-shadow: 0 0 0 3px var(--c-ink); }
.fk-b .ab.r3-lock-screen-a2 .kp-scr.r3ls-scr { position: relative; padding: calc(70 * var(--k-u)) calc(16 * var(--k-u)) calc(18 * var(--k-u)); background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%20430%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%231C1B0D%22/%3E%3Cstop%20offset%3D%22.6%22%20stop-color%3D%22%233E3D31%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2349493D%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22200%22%20height%3D%22430%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%22170%22%20cy%3D%2238%22%20r%3D%2216%22%20fill%3D%22%23D2FF51%22/%3E%3Ccircle%20cx%3D%22177%22%20cy%3D%2233%22%20r%3D%2214%22%20fill%3D%22%232A2918%22/%3E%3Cg%20fill%3D%22%23F6F7F2%22%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%22150%22%20r%3D%221.4%22/%3E%3Ccircle%20cx%3D%22170%22%20cy%3D%22210%22%20r%3D%221%22/%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%22230%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%22140%22%20r%3D%221%22/%3E%3Ccircle%20cx%3D%2296%22%20cy%3D%22170%22%20r%3D%221%22/%3E%3C/g%3E%3Cpath%20d%3D%22M0%20300%20C50%20270%2090%20290%20130%20280%20S180%20270%20200%20285%20V430%20H0Z%22%20fill%3D%22%23B1EAF1%22%20opacity%3D%22.35%22/%3E%3Cpath%20d%3D%22M0%20345%20C40%20320%20100%20340%20140%20330%20S190%20320%20200%20330%20V430%20H0Z%22%20fill%3D%22%236B6B62%22/%3E%3Cpath%20d%3D%22M0%20385%20C60%20365%20120%20380%20200%20370%20V430%20H0Z%22%20fill%3D%22%231C1B0D%22/%3E%3C/svg%3E") center / cover no-repeat; }
.fk-b .ab.r3-lock-screen-a2 .r3ls { flex: 1; display: flex; flex-direction: column; align-items: center; }
.fk-b .ab.r3-lock-screen-a2 .r3ls-time { font: 600 calc(80 * var(--k-u))/1 var(--font-sans); letter-spacing: -.04em; color: var(--c-surface); }
.fk-b .ab.r3-lock-screen-a2 .r3ls-date { margin-top: calc(6 * var(--k-u)); font-size: calc(15 * var(--k-u)); font-weight: 600; color: var(--c-surface); opacity: .8; }
.fk-b .ab.r3-lock-screen-a2 .r3ls-cap { margin-top: calc(56 * var(--k-u)); width: 100%; display: grid; justify-items: center; gap: calc(12 * var(--k-u)); padding: calc(18 * var(--k-u)) calc(16 * var(--k-u)) calc(16 * var(--k-u)); border-radius: calc(30 * var(--k-u)); background: rgba(28,27,13,.9); backdrop-filter: blur(6px); color: var(--c-surface); box-shadow: 0 calc(10 * var(--k-u)) calc(30 * var(--k-u)) rgba(28,27,13,.35); }
.fk-b .ab.r3-lock-screen-a2 .r3ls-app { display: inline-flex; align-items: center; gap: calc(6 * var(--k-u)); font: 500 calc(11 * var(--k-u))/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-deep-ink-2); }
.fk-b .ab.r3-lock-screen-a2 .r3ls-app i { width: calc(14 * var(--k-u)); height: calc(14 * var(--k-u)); border-radius: calc(4 * var(--k-u)); background: var(--c-hero); }
.fk-b .ab.r3-lock-screen-a2 .r3ls-orb { position: relative; width: calc(132 * var(--k-u)); height: calc(132 * var(--k-u)); border-radius: 50%; display: grid; place-items: center; background: var(--c-hero); color: var(--c-ink); box-shadow: 0 0 0 calc(10 * var(--k-u)) rgba(210,255,81,.28), 0 0 0 calc(22 * var(--k-u)) rgba(210,255,81,.12); }
.fk-b .ab.r3-lock-screen-a2 .r3ls-orb--paused { background: var(--c-surface); box-shadow: 0 0 0 calc(10 * var(--k-u)) rgba(255,255,255,.14); }
.fk-b .ab.r3-lock-screen-a2 .r3ls-st { display: grid; justify-items: center; gap: calc(2 * var(--k-u)); }
.fk-b .ab.r3-lock-screen-a2 .r3ls-st b { font: 500 calc(30 * var(--k-u))/1 var(--font-mono); letter-spacing: -.02em; }
.fk-b .ab.r3-lock-screen-a2 .r3ls-st span { font-weight: 650; font-size: calc(14 * var(--k-u)); color: var(--c-hero); display: inline-flex; align-items: center; gap: calc(6 * var(--k-u)); }
.fk-b .ab.r3-lock-screen-a2 .r3ls-btns { display: flex; gap: calc(8 * var(--k-u)); width: 100%; }
.fk-b .ab.r3-lock-screen-a2 .r3ls-b { flex: 1; text-align: center; padding: calc(10 * var(--k-u)) 0; border-radius: 999px; font-weight: 650; font-size: calc(14 * var(--k-u)); box-shadow: inset 0 0 0 calc(1.5 * var(--k-u)) rgba(255,255,255,.6); }
.fk-b .ab.r3-lock-screen-a2 .r3ls-b--on { background: var(--c-hero); color: var(--c-ink); box-shadow: none; }
.fk-b .ab.r3-lock-screen-a2 .r3ls-note { margin-top: auto; width: 100%; }
.fk-b .ab.r3-photo-a .va-cam { height: calc(536 * var(--k-u)); }
.fk-b .ab.r3-photo-a .va-shut { margin-top: auto; padding-bottom: calc(4 * var(--k-u)); }
.fk-b .ab.r3-photo-a .kp-body { gap: calc(12 * var(--k-u)); }
.fk-b .ab.r3-photo-a .va-bcard--in { scale: 1.12; }
.fk-b .ab.r3-type-it-a2 .t2-pop { scale: .86; transform-origin: 0 0; }
.fk-b .ab.r3-voice-memo-a .vm-seg { align-self: center; margin-top: calc(4 * var(--k-u)); }
.fk-b .ab.r3-voice-memo-a .vm-rec { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--k-u)); padding: calc(12 * var(--k-u)) 0 calc(6 * var(--k-u)); }
.fk-b .ab.r3-voice-memo-a .vm-live { display: inline-flex; align-items: center; gap: calc(6 * var(--k-u)); font: 500 calc(11 * var(--k-u))/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink); background: var(--c-accent); border-radius: 999px; padding: calc(5 * var(--k-u)) calc(10 * var(--k-u)); }
.fk-b .ab.r3-voice-memo-a .vm-live i { width: calc(8 * var(--k-u)); height: calc(8 * var(--k-u)); border-radius: 50%; background: var(--c-ink); }
.fk-b .ab.r3-voice-memo-a .vm-time { font: 500 calc(54 * var(--k-u))/1 var(--font-mono); letter-spacing: -.03em; color: var(--c-ink); }
.fk-b .ab.r3-voice-memo-a .vm-wave { display: flex; align-items: center; gap: calc(3.5 * var(--k-u)); height: calc(84 * var(--k-u)); color: var(--c-ink); }
.fk-b .ab.r3-voice-memo-a .vm-wave i { width: calc(4.5 * var(--k-u)); border-radius: calc(3 * var(--k-u)); background: currentColor; }
.fk-b .ab.r3-voice-memo-a .vm-wave i:nth-child(n+20) { opacity: .25; }
.fk-b .ab.r3-voice-memo-a .kp-scr .k.vm-tr { padding: calc(11 * var(--k-u)) calc(12 * var(--k-u)); display: grid; gap: calc(6 * var(--k-u)); }
.fk-b .ab.r3-voice-memo-a .vm-tr p { font-size: calc(13.5 * var(--k-u)); line-height: 1.45; color: var(--c-ink); }
.fk-b .ab.r3-voice-memo-a .vm-caret { display: inline-block; width: calc(2 * var(--k-u)); height: 1em; vertical-align: -.15em; margin-left: 2px; background: var(--c-ink); }
.fk-b .ab.r3-voice-memo-a .vm-foot { display: flex; align-items: center; justify-content: space-between; padding: 0 calc(20 * var(--k-u)) calc(4 * var(--k-u)); }
.fk-b .ab.r3-voice-memo-a .vm-side { font: 600 calc(13 * var(--k-u))/1 var(--font-sans); color: var(--c-ink-2); width: calc(50 * var(--k-u)); text-align: center; }
.fk-b .ab.r3-voice-memo-a .vm-stop { width: calc(66 * var(--k-u)); height: calc(66 * var(--k-u)); border-radius: 50%; background: var(--c-ink); display: grid; place-items: center; box-shadow: 0 0 0 calc(5 * var(--k-u)) var(--c-surface), 0 0 0 calc(7 * var(--k-u)) var(--c-ink); }
.fk-b .ab.r3-voice-memo-a .vm-stop i { width: calc(20 * var(--k-u)); height: calc(20 * var(--k-u)); border-radius: calc(4 * var(--k-u)); background: var(--c-accent); }
.fk-b .ab.r3-voice-memo-a .vm-pk { padding: 12px 14px; display: grid; gap: 8px; background: var(--c-surface); border: 2px solid var(--c-ink); box-shadow: 4px 4px 0 var(--c-ink); border-radius: 16px; }
.fk-b .ab.r3-voice-memo-a .vm-pk .k-mi { font: 500 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-2); }
.fk-b .ab.r3-voice-memo-a .vm-pk ul { display: grid; gap: 6px; }
.fk-b .ab.r3-voice-memo-a .vm-pk li { display: flex; align-items: center; gap: 8px; font: 600 14px/1.2 var(--font-sans); color: var(--c-ink); }
.fk-b .ab.r3-voice-memo-a .vm-seg { display: inline-flex; border-radius: 999px; box-shadow: inset 0 0 0 calc(1.5 * var(--k-u)) var(--c-line); padding: calc(3 * var(--k-u)); }
.fk-b .ab.r3-voice-memo-a .vm-seg span { padding: calc(6 * var(--k-u)) calc(16 * var(--k-u)); border-radius: 999px; font-weight: 600; font-size: calc(13 * var(--k-u)); }
.fk-b .ab.r3-voice-memo-a .vm-seg .is-on { background: var(--c-ink); color: var(--c-surface); }
.fk-b .ab.r3-voice-memo-a .vm-rec { padding: calc(26 * var(--k-u)) 0 calc(22 * var(--k-u)); gap: calc(12 * var(--k-u)); }
.fk-b .ab.r3-voice-memo-a .vm-time { font-size: calc(62 * var(--k-u)); }
.fk-b .ab.r3-voice-memo-a .vm-wave { height: calc(96 * var(--k-u)); }
.fk-b .ab.r3-voice-memo-a .vm-tr p { font-size: calc(15 * var(--k-u)); }
.fk-b .ab.r3-voice-memo-a .vm-pk li { font-size: 13.5px; }
.fk-b { background:transparent }
.fk-b { display:block }
.fk-b .ab { background:transparent!important;overflow:visible!important;cursor:default!important }
.fk-b .ab>.mono.abs:first-child { display:none }
.fk-b .armed:not(.run)>* { opacity:0 }
.fk-b .run>* { animation:wf-in .7s cubic-bezier(.3,1.3,.5,1) backwards;animation-delay:calc(var(--i,0)*110ms + 120ms) }
@keyframes wf-in { from{opacity:0;translate:0 40px;scale:.9;rotate:-4deg} }
.fk-b .ab.r3-type-it-a2s .va-b { font-size: calc(15.5 * var(--k-u)); padding: calc(11 * var(--k-u)) calc(14 * var(--k-u)); }
.fk-b .ab.r3-type-it-a2s .va-thr { gap: calc(10 * var(--k-u)); margin-top: auto; padding-bottom: calc(12 * var(--k-u)); }
.fk-b .ab.r3-type-it-a2s .va-thr + .va-type { margin-top: 0; }
.fk-b .ab.r3-type-it-a2s .t2-pop { scale: 1; }
.tP .hero-v3 .scene .hero-free { max-width: 540px; margin-left: auto; }
.fp .hero-v3 .h1.h1-s { font-size: clamp(38px, 5.2cqi, 64px); }
.fp #ben-sec { scroll-margin-top: 76px; }
.fk-b { --c-line-dashed: #CACBC4; }
.fk-b .mast { background: #D2FF51; color: #1C1B0D; }
.fk-b .pe-cc { box-sizing: border-box; width: 104px; height: 84px; padding: 10px; border-radius: 8px; border: 2px solid var(--c-ink); background: var(--c-surface); box-shadow: 3px 3px 0 var(--c-ink); }
.fk-b .pe-cc i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--c-muted); box-shadow: inset 0 0 0 1.5px var(--c-ink); font: 700 11px/1 var(--font-sans); font-style: normal; }
.fk-b .pe-cc u { display: block; height: 6px; width: 72%; margin-top: 8px; border-radius: 3px; background: var(--c-line); text-decoration: none; }
.fk-b .pe-cc u.s { width: 46%; margin-top: 5px; }
.fk-b .pe-cc.is-on { background: var(--c-hero); }
.fk-b .pe-cc.is-on i { background: var(--c-surface); }
.fk-b .pe-cc.is-on u { background: rgba(28, 27, 13, .25); }
.fk-b .pe-cc-flag { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c-pop); box-shadow: inset 0 0 0 1.5px var(--c-ink); }
.fk-b .pe-cc-flag svg { width: 15px; height: 15px; }
.fk-b .pe-ask { padding: 14px 20px; border-radius: 20px; border: 2px solid var(--c-ink); background: var(--c-surface); box-shadow: 4px 4px 0 var(--c-ink); }
.fk-b .pe-ask b { font-size: 27px; letter-spacing: -.02em; }
.fk-b .pe-ask::after { content: ""; position: absolute; left: 36px; bottom: -11px; width: 18px; height: 18px; background: var(--c-surface); border-right: 2px solid var(--c-ink); border-bottom: 2px solid var(--c-ink); rotate: 45deg; }
.fk-b .pe-found { padding: 8px 14px; border-radius: 999px; border: 2px solid var(--c-ink); background: var(--c-pop); font: 600 14px/1 var(--font-sans); }
.fk-b .ab.r3-who-matters-c3 .r3pan { box-sizing:border-box; border-radius:18px; padding:16px; display:flex; flex-direction:column; overflow:hidden; }
.fk-b .ab.r3-who-matters-c3 .r3pan--old { background:var(--c-muted); border:2px dashed var(--c-line-dashed); color:var(--c-ink-2); }
.fk-b .ab.r3-who-matters-c3 .r3pan--new { background:var(--c-hero); border:2.5px solid var(--c-ink); box-shadow:5px 5px 0 var(--c-ink); gap:15px; }
.fk-b .ab.r3-who-matters-c3 .r3lab { font:500 11px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; }
.fk-b .ab.r3-who-matters-c3 .r3pan--new .r3lab { color:var(--c-ink); margin-bottom:2px; }
.fk-b .ab.r3-who-matters-c3 .r3srch { font:400 13px/1 var(--font-sans); background:var(--c-surface); border-radius:10px; padding:9px 10px; margin-bottom:8px; color:var(--c-ink-2); border:1px solid var(--c-line); }
.fk-b .ab.r3-who-matters-c3 .r3hd { font:600 11px/1 var(--font-mono); padding:8px 0 4px; border-bottom:1px solid var(--c-line); }
.fk-b .ab.r3-who-matters-c3 .r3nm { display:flex; align-items:center; gap:8px; font:400 14px/1 var(--font-sans); padding:7px 0; border-bottom:1px solid var(--c-line); width:200px; }
.fk-b .ab.r3-who-matters-c3 .r3nm i { width:18px; height:18px; border-radius:50%; background:var(--c-line); flex:none; }
.fk-b .ab.r3-who-matters-c3 .r3vs { width:56px; height:56px; border-radius:50%; background:var(--c-ink); color:var(--c-hero); display:grid; place-items:center; font:700 18px/1 var(--font-sans); z-index:2; box-shadow:3px 3px 0 var(--c-pop); }
.fk-b .ab.r3-who-matters-c3 .r3card { display:flex; align-items:center; gap:10px; background:var(--c-surface); border:2px solid var(--c-ink); border-radius:14px; box-shadow:3px 3px 0 var(--c-ink); padding:14px 12px; }
.fk-b .ab.r3-who-matters-c3 .r3card .k-av { width:34px; height:34px; font-size:12px; flex:none; }
.fk-b .ab.r3-who-matters-c3 .r3card span:last-child { display:grid; gap:2px; }
.fk-b .ab.r3-who-matters-c3 .r3card b { font:650 16px/1.1 var(--font-sans); }
.fk-b .ab.r3-who-matters-c3 .r3card i { font:400 12.5px/1.2 var(--font-sans); font-style:normal; color:var(--c-ink-2); }
.fk-b .ab.r3-who-matters-c3 .r3card--owe .k-av { background:var(--c-pop); }
.fk-b .ab.r3-who-matters-c3 .r3card--news .k-av { background:var(--c-soft); }
.fk-b .ab.r3-who-matters-c3 .r3card--gap .k-av { background:var(--c-surface); }
.fk-b .ab.r3-who-matters-c3 .r3more { margin-top:auto; font:500 11px/1 var(--font-mono); letter-spacing:.05em; text-transform:uppercase; }
.fk-b .ab.r3-who-matters-c3 .r3foot { font:500 11px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; }
.fk-b .ab[data-ground="deep"]>svg [stroke="var(--c-ink)"] { stroke:#B0AFAA }
.fk-b .ab.x2 { font-family: var(--font-sans); color: #1C1B0D; }
.fk-b .ab.x2 .c { background: #FFFFFF; color: #1C1B0D; border: 3px solid #1C1B0D; border-radius: 22px; box-shadow: 6px 6px 0 #1C1B0D; }
.fk-b .ab.x2[data-ground=deep] .c { box-shadow: 6px 6px 0 #D2FF51; }
.fk-b .ab.x2 .m { display: block; font: 500 14px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.fk-b .ab.x2 .av { display: inline-grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; border: 3px solid #1C1B0D; font: 650 19px/1 var(--font-sans); letter-spacing: -.02em; background: #D2FF51; color: #1C1B0D; }
.fk-b .ab.x2 .av.cy { background: #B1EAF1; }
.fk-b .ab.x2 .av.po { background: #F1A6FF; }
.fk-b .ab.x2 .av.wh { background: #FFFFFF; }
.fk-b .ab.x2 .av.gr { background: #E4E4DC; border-color: #B0AFAA; color: #6B6B62; }
.fk-b .ab.x2 .nm { font: 650 26px/1.1 var(--font-sans); letter-spacing: -.025em; }
.fk-b .ab.x2 .ln { font: 500 19px/1.25 var(--font-sans); letter-spacing: -.01em; }
.fk-b .ab.x2 .chip { display: inline-block; font: 500 13px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; border: 2px solid #1C1B0D; background: #FFFFFF; }
.fk-b .ab.x2 .chip.li { background: #D2FF51; }
.fk-b .ab.x2 .chip.cy { background: #B1EAF1; }
.fk-b .ab.x2 .chip.po { background: #F1A6FF; }
.fk-b .ab.x2 .chip.ink { background: #1C1B0D; color: #D2FF51; }
.fk-b .x2-file .tabs { left: 58px; top: 70px; display: flex; gap: 10px; }
.fk-b .x2-file .tabs .chip { font-size: 15px; padding: 9px 13px; }
.fk-b .x2-file .bk { left: 70px; width: 460px; height: 170px; padding: 16px 22px; }
.fk-b .x2-file .bk .nm { font-size: 22px; }
.fk-b .x2-file .bk .ln { font-size: 16px; }
.fk-b .x2-file .b1 { top: 128px; background: #B1EAF1; rotate: -2deg; }
.fk-b .x2-file .b2 { top: 176px; background: #F1A6FF; rotate: 1.5deg; }
.fk-b .x2-file .b3 { top: 224px; background: #F6F7F2; rotate: -1deg; }
.fk-b .x2-file .fr { left: 50px; top: 278px; width: 500px; padding: 22px 26px 24px; }
.fk-b .x2-file .fr .nm { font-size: 42px; letter-spacing: -.035em; }
.fk-b .x2-file .fr .ln { font-size: 24px; margin-top: 6px; }
.fk-b .x2-file .fr .chips { display: flex; gap: 8px; margin-top: 16px; }
.fk-b .x2-file .base { left: 150px; top: 472px; width: 300px; height: 44px; border-radius: 0 0 22px 22px; background: #1C1B0D; }
.fk-b .x2-cvp .ct { left: 18px; top: 110px; width: 214px; padding: 18px; background: #F6F7F2; box-shadow: none; border-color: #B0AFAA; }
.fk-b .x2-cvp .ct .av { width: 64px; height: 64px; font-size: 22px; }
.fk-b .x2-cvp .ct .nm { font-size: 24px; margin-top: 12px; color: #49493D; }
.fk-b .x2-cvp .ct .ln { font-size: 17px; color: #6B6B62; margin-top: 6px; }
.fk-b .x2-cvp .ct .note { margin-top: 18px; padding-top: 12px; border-top: 2px solid #E4E4DC; }
.fk-b .x2-cvp .ct .blank { height: 12px; border-radius: 6px; background: #E4E4DC; margin-top: 10px; width: 80%; }
.fk-b .x2-cvp .vs { left: 202px; top: 270px; width: 56px; height: 56px; border-radius: 50%; background: #1C1B0D; color: #D2FF51; display: grid; place-items: center; font: 600 16px/1 var(--font-mono); }
.fk-b .x2-cvp .pg { left: 254px; top: 34px; width: 328px; padding: 0 0 18px; overflow: hidden; }
.fk-b .x2-cvp .pg .hd { background: #D2FF51; border-bottom: 3px solid #1C1B0D; padding: 16px 18px 14px; }
.fk-b .x2-cvp .pg .who { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.fk-b .x2-cvp .pg .ph { flex: none; width: 96px; height: 96px; border: 3px solid #1C1B0D; border-radius: 20px; background: #B1EAF1; overflow: hidden; }
.fk-b .x2-cvp .pg .ph .sp { display: block; width: 100%; height: 100%; }
.fk-b .x2-cvp .pg .hd .nm { font-size: 27px; }
.fk-b .x2-cvp .pg .hd .ln { font-size: 16px; margin-top: 4px; }
.fk-b .x2-cvp .pg .sec { padding: 14px 20px 0; }
.fk-b .x2-cvp .pg .sec .ln { font-size: 20px; margin-top: 4px; }
.fk-b .x3-card .m { font-size: 13px; }
.fk-b .x3-card .pc { position: absolute; background: #D2FF51; border: 4px solid #1C1B0D; border-radius: 24px; box-shadow: 8px 8px 0 #1C1B0D; padding: 14px 16px 16px; box-sizing: border-box; }
.fk-b .x3-card .pc .top { display: flex; justify-content: space-between; align-items: center; }
.fk-b .x3-card .pc .pic { position: relative; margin-top: 10px; border: 3px solid #1C1B0D; border-radius: 14px; background: #B1EAF1; overflow: hidden; }
.fk-b .x3-card .pc .pic::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: #4F8DF5; border-top: 3px solid #1C1B0D; }
.fk-b .x3-card .pc .pic .sp { position: relative; z-index: 1; display: block; margin: 0 auto; }
.fk-b .x3-card .pc .ban { position: relative; z-index: 2; margin: -24px 10px 0; background: #1C1B0D; color: #D2FF51; border-radius: 12px; padding: 9px 12px 10px; text-align: center; font: 650 30px/1 var(--font-sans); letter-spacing: .01em; text-transform: uppercase; }
.fk-b .x3-card .pc .pos { text-align: center; font: 600 19px/1.2 var(--font-sans); margin-top: 10px; }
.fk-b .x3-card .st { background: #FFFFFF; border: 3px solid #1C1B0D; border-radius: 14px; overflow: hidden; }
.fk-b .x3-card .st .r { display: grid; grid-template-columns: 128px 1fr; align-items: baseline; gap: 10px; padding: 9px 14px; border-top: 2px solid #E4E4DC; }
.fk-b .x3-card .st .r:first-child { border-top: 0; }
.fk-b .x3-card .st .r b { font: 650 23px/1.15 var(--font-sans); letter-spacing: -.02em; }
.fk-b .x3-card .bk { position: absolute; background: #FFFFFF; border: 4px solid #1C1B0D; border-radius: 22px; box-shadow: 8px 8px 0 #1C1B0D; overflow: hidden; }
.fk-b .x3-card .bk .hd { display: flex; align-items: center; gap: 14px; background: #1C1B0D; color: #FFFFFF; padding: 14px 18px; }
.fk-b .x3-card .bk .hd .nm { color: #D2FF51; text-transform: uppercase; letter-spacing: .01em; }
.fk-b .x3-card .bk .st { border: 0; border-radius: 0; }
.fk-b .x3-card .bk .ft { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 18px; border-top: 3px solid #1C1B0D; background: #F6F7F2; }
.fk-b .x3-e3 .pc { left: 20px; top: 34px; width: 250px; rotate: -6deg; padding: 12px 12px 14px; }
.fk-b .x3-e3 .pc .pic { height: 186px; margin-top: 8px; }
.fk-b .x3-e3 .pc .pic .sp { width: 186px; height: 186px; }
.fk-b .x3-e3 .pc .ban { font-size: 22px; margin: -20px 6px 0; }
.fk-b .x3-e3 .pc .pos { font-size: 17px; }
.fk-b .x3-e3 .bk { left: 262px; top: 120px; width: 320px; rotate: 3deg; }
.fk-b .x3-e3 .bk .hd { padding: 12px 16px; }
.fk-b .x3-e3 .bk .hd .nm { font-size: 26px; }
.fk-b .x3-e3 .bk .st .r { grid-template-columns: 1fr; gap: 2px; padding: 9px 16px; }
.fk-b .x3-e3 .bk .st .r b { font-size: 23px; }
.fk-b .x3-e3 .bk .ft .ln { font-size: 16px; }
.fk-b .x3-e3 .flip { left: 60px; top: 470px; rotate: -4deg; font-size: 15px; padding: 9px 13px; }
.fk-b .x3-upd .av { width: 58px; height: 58px; font-size: 21px; }
.fk-b .ab.x3-upd[data-ground=deep] .arr { background: #D2FF51; color: #1C1B0D; }
.fk-b .x3-upd .new { display: inline-block; font: 600 13px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 6px 9px; border-radius: 8px; border: 2px solid #1C1B0D; background: #D2FF51; }
.fk-b .x3-np .np { left: 22px; top: 22px; width: 400px; padding: 14px 20px 18px; background: #F6F7F2; border: 3px solid #1C1B0D; border-radius: 6px; box-shadow: 6px 6px 0 #1C1B0D; rotate: -3deg; }
.fk-b .ab.x3-np[data-ground=deep] .np { box-shadow: 6px 6px 0 #D2FF51; }
.fk-b .x3-np .np .mast { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 4px double #1C1B0D; padding-bottom: 8px; font: 650 22px/1 var(--font-sans); letter-spacing: -.01em; }
.fk-b .x3-np .np .mast .m { font-size: 13px; }
.fk-b .x3-np .np .hl { font: 700 36px/1.04 var(--font-sans); letter-spacing: -.035em; margin-top: 12px; }
.fk-b .x3-np .np .dk { font: 500 19px/1.25 var(--font-sans); margin-top: 8px; }
.fk-b .x3-np .np .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 14px; }
.fk-b .x3-np .np .cols i { display: block; height: 9px; border-radius: 5px; background: #D9D8CF; }
.fk-b .x3-np .arr { left: 470px; top: 228px; width: 64px; height: 64px; border-radius: 50%; background: #1C1B0D; color: #D2FF51; display: grid; place-items: center; font: 650 32px/1 var(--font-sans); }
.fk-b .x3-np .pg { left: 196px; top: 300px; width: 384px; padding: 0; overflow: hidden; rotate: 1.5deg; }
.fk-b .x3-np .pg .hd { display: flex; align-items: center; gap: 12px; background: #D2FF51; border-bottom: 3px solid #1C1B0D; padding: 14px 16px; }
.fk-b .x3-np .pg .hd .chip { margin-left: auto; }
.fk-b .x3-np .pg .r { padding: 12px 16px; border-top: 2px solid #E4E4DC; }
.fk-b .x3-np .pg .r .ln { font-size: 21px; font-weight: 600; margin-top: 6px; }
.fk-b .x2-grp .t { left: 30px; top: 32px; padding: 10px 16px; font-size: 16px; }
.fk-b .x2-grp .g { left: 30px; width: 520px; padding: 16px 20px; }
.fk-b .x2-grp .g .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fk-b .x2-grp .g .nm { font-size: 28px; }
.fk-b .x2-grp .g .ct { font: 650 20px/1 var(--font-sans); }
.fk-b .x2-grp .g .bot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.fk-b .x2-grp .g .avs { display: flex; }
.fk-b .x2-grp .g .avs .av { width: 44px; height: 44px; font-size: 16px; margin-right: -8px; }
.fk-b .x2-grp .g1 { top: 96px; }
.fk-b .x2-grp .g2 { top: 252px; left: 50px; }
.fk-b .x2-grp .g3 { top: 408px; }
.fk-b .x2-grp .g .avs .av.hl { box-shadow: 0 0 0 4px #F1A6FF, 0 0 0 7px #1C1B0D; position: relative; z-index: 1; margin: 0 6px 0 7px; }
.tP .hero-v3 .scene.nosp { padding: 0 }
.fk-b .ab .hand { font: 650 19px/1.2 var(--font-sans); letter-spacing: -.01em; color: var(--g-ink, var(--c-ink)) }
.fk-b .ab .stk { background: var(--c-surface); color: var(--c-ink); border: 2px solid var(--c-ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--c-ink) }
.fk-b .ab[data-ground="deep"] .stk { box-shadow: 4px 4px 0 var(--c-accent) }
.fk-b .tkt { display: grid; grid-template-columns: 58px minmax(0, 1fr); min-height: 152px; background: var(--tk); border: 2px solid var(--c-ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--c-ink); overflow: hidden }
.fk-b .tkt-stub { position: relative; display: grid; place-items: center; border-right: 2px dashed var(--c-ink) }
.fk-b .tkt-stub span { writing-mode: vertical-rl; transform: rotate(180deg); font: 500 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase }
.fk-b .tkt-stub::before, .fk-b .tkt-stub::after { content: ""; position: absolute; right: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--g-bg); border: 2px solid var(--c-ink) }
.fk-b .tkt-stub::before { top: -12px }
.fk-b .tkt-stub::after { bottom: -12px }
.fk-b .tkt-main { padding: 18px 22px 18px 24px; display: grid; gap: 6px; align-content: center }
.fk-b .tkt-main .mono { color: var(--c-ink) }
.fk-b .tkt-main b { font-size: 27px; line-height: 1.05; letter-spacing: -.025em; font-weight: 650; max-width: 240px }
.fk-b .tkt-sub { font-size: 14.5px }
.fk-b .tkt-stamp { position: absolute; right: 18px; top: 50%; translate: 0 -50%; rotate: 12deg; width: 76px; height: 76px; border-radius: 50%; background: var(--sf); border: 2px solid var(--c-ink); display: grid; place-items: center; text-align: center; font: 500 10.5px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase }
.fk-b .bub { background: var(--c-surface); color: var(--c-ink); border: 2px solid var(--c-ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--c-hero); padding: 16px 18px 14px; display: grid; gap: 12px }
.fk-b .bub::after { content: ""; position: absolute; left: 34px; bottom: -11px; width: 18px; height: 18px; background: var(--c-surface); border-right: 2px solid var(--c-ink); border-bottom: 2px solid var(--c-ink); rotate: 45deg }
.fk-b .card { padding: 16px 18px 18px; display: grid; gap: 8px }
.fk-b .card b { font-size: 22px; font-weight: 650; letter-spacing: -.02em }
.fk-b .tl { display: flex; gap: 18px; align-items: flex-start; width: 530px }
.fk-b .ab .td-on-deep { color: var(--c-deep-ink-2) }
.fk-b .ab .td-face { width: 112px; text-align: center; color: var(--c-ink) }
.fk-b .ab .td-ltag { width: 184px; padding: 16px 16px 16px 32px; background: var(--c-surface); border: 2px solid var(--c-ink); border-radius: 6px 18px 18px 6px; box-shadow: 4px 4px 0 var(--c-ink); display: grid; gap: 5px }
.fk-b .ab .td-ltag b { font-size: 18px; line-height: 1.2; letter-spacing: -.015em; font-weight: 650 }
.fk-b .ab .td-ltag-h { position: absolute; left: 10px; top: 50%; margin-top: -7px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--c-ink); background: var(--c-hero) }
.fk-b .ab .td-guesspill { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 999px }
.fk-b .ab .td-guesspill .mono { color: var(--c-ink) }
.fk-b .ab .td-chg { font: 650 14px/1 var(--font-sans); padding: 7px 12px; border-radius: 999px; background: var(--c-ink); color: var(--c-surface) }
.fk-b .ab .td-rod { width: 8px; height: 410px; border-radius: 4px 4px 0 0; background: var(--c-surface); box-shadow: 0 0 0 2px var(--c-ink); z-index: 0 }
.fk-b .ab .td-spk { z-index: 2 }
.fk-b .ab .td-rod::before { content: ""; position: absolute; left: 0; top: -10px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 12px solid var(--c-surface) }
.fk-b .ab .td-base { width: 260px; height: 26px; border-radius: 8px; background: var(--c-pop); border: 2px solid var(--c-ink); box-shadow: 4px 4px 0 var(--c-hero); z-index: 5 }
.fk-b .ab .td-spk { width: 260px; box-sizing: border-box; padding: 34px 18px 16px; background: var(--c-surface); border: 2px solid var(--c-ink); border-radius: 4px; box-shadow: 4px 4px 0 var(--c-hero); display: grid; gap: 4px }
.fk-b .ab .td-spk b { font-size: 19px; line-height: 1.15; letter-spacing: -.02em; font-weight: 650; text-decoration: line-through; text-decoration-thickness: 2px }
.fk-b .ab .td-spk > span:not(.td-hole):not(.td-done) { font-size: 13.5px; color: var(--c-ink-2) }
.fk-b .ab .td-hole { position: absolute; left: 120px; top: 8px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, var(--c-surface) 0 3px, var(--c-ink) 3.5px 5px, var(--c-deep) 5.5px); border: 2px solid var(--c-ink); box-sizing: border-box }
.fk-b .ab .td-done { position: absolute; right: 12px; top: 10px; padding: 4px 8px; border-radius: 999px; background: var(--c-hero); border: 1.5px solid var(--c-ink); font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase }
.fk-b .ab[data-ground="deep"]>svg [stroke="#1C1B0D"] { stroke:#B0AFAA }
.fk-b .ab.x2 .row { display: flex; align-items: center; gap: 14px }
.fk-b .ab.x2 .cb { flex: none; width: 34px; height: 34px; border-radius: 9px; border: 3px solid #1C1B0D; background: #FFFFFF; display: grid; place-items: center }
.fk-b .ab.x2 .cb.on { background: #D2FF51 }
.fk-b .ab.x2 .cb.on::after { content: ""; width: 14px; height: 8px; border-left: 4px solid #1C1B0D; border-bottom: 4px solid #1C1B0D; rotate: -45deg; translate: 0 -2px }
.fk-b .ab.x2 .pill { display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: 999px; background: #1C1B0D; color: #D2FF51; font: 650 20px/1.1 var(--font-sans); letter-spacing: -.01em; box-shadow: 4px 4px 0 rgba(28,27,13,.25) }
.fk-b .ab.x2 .pill svg { width: 22px; height: 22px; flex: none }
.fk-b .ab.x2 .wave { display: inline-flex; align-items: center; gap: 3px; height: 22px }
.fk-b .ab.x2 .wave i { display: block; width: 4px; border-radius: 2px; background: currentColor }
.fk-b .ab.x2 .s { text-decoration: line-through; text-decoration-thickness: 3px; color: #6B6B62 }
.fk-b .x3-line .sp { position: absolute; left: 121px; top: 66px; width: 236px; height: 236px }
.fk-b .x3-line .belt { left: 0; top: 392px; width: 472px; height: 34px; border-radius: 17px; border: 3px solid #1C1B0D; background: #1C1B0D repeating-linear-gradient(90deg, transparent 0 26px, rgba(210,255,81,.6) 26px 30px) }
.fk-b .x3-line .rl { top: 436px; width: 26px; height: 26px; border-radius: 50%; background: #FFFFFF; border: 3px solid #1C1B0D }
.fk-b .x3-line .leg { top: 456px; width: 18px; height: 140px; background: #1C1B0D; border-radius: 4px }
.fk-b .x3-line .t { top: 288px; width: 142px; height: 104px; padding: 12px 12px 10px; display: grid; align-content: space-between; border-radius: 16px; box-shadow: 5px 5px 0 #1C1B0D }
.fk-b .x3-line .t b { display: block; font: 650 20px/1.06 var(--font-sans); letter-spacing: -.025em }
.fk-b .x3-line .t .cb { width: 28px; height: 28px; border-radius: 8px }
.fk-b .x3-line .t .cb.on { background: #1C1B0D }
.fk-b .x3-line .t .cb.on::after { width: 12px; height: 6px; border-width: 0 0 3.5px 3.5px; border-color: #D2FF51 }
.fk-b .x3-line .t .row { justify-content: space-between }
.fk-b .x3-line .t .chip { font-size: 11px; padding: 5px 8px }
.fk-b .x3-line .t.done { background: #D2FF51 }
.fk-b .x3-line .t.done b { text-decoration: line-through; text-decoration-thickness: 2.5px }
.fk-b .x3-line .t2 { left: 8px }
.fk-b .x3-line .t3 { left: 168px; rotate: -3deg; scale: 1.05; box-shadow: 8px 8px 0 #1C1B0D }
.fk-b .x3-line .t4 { left: 328px }
.fk-b .x3-line .t5 { left: 462px; top: 392px; width: 112px; height: 88px; padding: 10px 10px 8px; rotate: 22deg }
.fk-b .x3-line .t5 b { font-size: 17px }
.fk-b .x3-line .t5 .cb { width: 24px; height: 24px }
.fk-b .x3-line .pk { top: 452px; width: 70px; height: 40px; background: #D2FF51; border: 3px solid #1C1B0D; border-radius: 8px }
.fk-b .x3-line .crate { left: 456px; top: 470px; width: 128px; height: 104px; background: #FFFFFF; border: 3px solid #1C1B0D; border-radius: 6px 6px 14px 14px; box-shadow: 5px 5px 0 #1C1B0D; display: grid; place-content: center; text-align: center }
.fk-b .x3-line .crate b { display: block; font: 650 46px/1 var(--font-sans); letter-spacing: -.04em }
.fk-b .x3-line .crate .m { font-size: 12px; margin-top: 4px }
.fk-b .x3-line .bub { left: 372px; top: 96px; padding: 14px 20px; border-radius: 22px; background: #FFFFFF; border: 3px solid #1C1B0D; box-shadow: 5px 5px 0 #1C1B0D; font: 650 26px/1.05 var(--font-sans); letter-spacing: -.025em }
.fk-b .x3-line .bub .tl { position: absolute; left: 14px; bottom: -27px; width: 34px; height: 30px }
.fk-b .x3-fil .in { display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: 999px; border: 3px solid #1C1B0D; font: 650 21px/1 var(--font-sans); letter-spacing: -.015em; box-shadow: 4px 4px 0 #D2FF51; color: #1C1B0D }
.fk-b .x3-fil .in svg { width: 22px; height: 22px }
.fk-b .x3-fil .in .wave { height: 18px }
.fk-b .x3-fil .i1 { left: 40px; top: 34px; rotate: -4deg; background: #D2FF51; box-shadow: 4px 4px 0 #FFFFFF }
.fk-b .x3-fil .i2 { left: 262px; top: 28px; rotate: 3deg; background: #B1EAF1 }
.fk-b .x3-fil .i3 { left: 70px; top: 112px; rotate: 2deg; background: #FFFFFF }
.fk-b .x3-fil .i4 { left: 372px; top: 106px; rotate: -3deg; background: #F1A6FF }
.fk-b .x3-fil .fun { left: 60px; top: 182px; width: 480px; height: 150px }
.fk-b .x3-fil .lbl { left: 0; right: 0; top: 206px; text-align: center; font: 650 34px/1 var(--font-sans); letter-spacing: -.04em }
.fk-b .x3-fil .lbl i { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: #1C1B0D; margin-right: 10px; vertical-align: 3px }
.fk-b .x3-fil .td { width: 470px; padding: 18px 20px; display: flex; align-items: center; gap: 16px; border: 3px solid #1C1B0D; border-radius: 18px; box-shadow: 6px 6px 0 #FFFFFF }
.fk-b .x3-fil .td .nm { flex: 1; font-size: 27px }
.fk-b .x3-fil .td .chip { font-size: 14px }
.fk-b .x3-fil .t1 { left: 64px; top: 360px; rotate: -1.5deg; background: #D2FF51 }
.fk-b .x3-fil .t2 { left: 70px; top: 470px; rotate: 1deg; background: #F1A6FF }
.fk-b .x3-prj .card { left: 44px; top: 50px; width: 512px; padding: 24px 26px 18px }
.fk-b .x3-prj .top { display: flex; align-items: center; gap: 20px }
.fk-b .x3-prj .ring { width: 104px; height: 104px; flex: none }
.fk-b .x3-prj .top b { display: block; font: 650 38px/1 var(--font-sans); letter-spacing: -.045em }
.fk-b .x3-prj .top .m { color: #6B6B62; margin-top: 10px }
.fk-b .x3-prj .ppl { display: flex; align-items: center; gap: 10px; margin: 20px 0 6px }
.fk-b .x3-prj .ppl .av { width: 48px; height: 48px; font-size: 16px; margin-right: -18px }
.fk-b .x3-prj .ppl .ln { margin-left: 26px }
.fk-b .x3-prj .it { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-top: 2px solid #E4E4DC }
.fk-b .x3-prj .it .nm { flex: 1; font-size: 25px }
.fk-b .x3-prj .add { left: 250px; top: 480px; rotate: 3deg }
.fk-b .x3-ve .say { left: 30px; top: 34px; width: 452px; padding: 18px 22px 20px; rotate: -2deg }
.fk-b .x3-ve .say .row { gap: 10px; margin-bottom: 8px }
.fk-b .x3-ve .say .m { color: #6B6B62 }
.fk-b .x3-ve .say p { font: 650 31px/1.1 var(--font-sans); letter-spacing: -.03em }
.fk-b .x3-ve .td { left: 96px; top: 196px; width: 474px; padding: 20px 24px 12px; rotate: 1deg }
.fk-b .x3-ve .td .m { color: #6B6B62 }
.fk-b .x3-ve .td > b { display: block; font: 650 30px/1.06 var(--font-sans); letter-spacing: -.035em; margin: 6px 0 8px }
.fk-b .x3-ve .f { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 12px; padding: 12px 0; border-top: 2px solid #E4E4DC; font: 500 22px/1.1 var(--font-sans) }
.fk-b .x3-ve .f .m { font-size: 13px }
.fk-b .x3-ve .f .s { margin-right: 10px }
.fk-b .x3-ve .f .new { display: inline-block; padding: 5px 11px; border-radius: 10px; background: #D2FF51; border: 2px solid #1C1B0D; font-weight: 650 }
.fk-b .x3-ve .ok { left: 40px; top: 526px; rotate: -2deg }
.fk-b { --lime: #D2FF51 }
.fp.tP .nm-still { display: none; }
@media (prefers-reduced-motion: reduce) {
.fp.tP .nm-mq { display: none; }
.fp.tP .nm-still { display: block; }
}
.fk-b { container-type: inline-size; aspect-ratio: 1; }
.fk-b > .ab { transform-origin: 0 0; transform: scale(var(--s, .6)); --s: .6; }
@container (min-width: 420px) { .fk-b > .ab { --s: .7; } }
@container (min-width: 480px) { .fk-b > .ab { --s: .8; } }
@container (min-width: 540px) { .fk-b > .ab { --s: .9; } }
@container (min-width: 600px) { .fk-b > .ab { --s: 1; } }
@supports (width: calc(1px * tan(atan2(100cqw, 600px)))) {
.fk-b > .ab { --tile-w: 100cqw; --s: tan(atan2(var(--tile-w), 600px)); }
}