:root { box-sizing: border-box; }
body { margin: 0px; background: rgb(250, 249, 245); }
img { max-width: 100%; }
[hidden] { display: none !important; }
.sw7 { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom,0px) + 12px); transform: translateX(-50%); z-index: 2147483000; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(18, 18, 20, 0.82); backdrop-filter: blur(20px) saturate(1.4); box-shadow: rgba(0, 0, 0, 0.35) 0px 8px 30px, rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset; font: 600 13px / 1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; color: rgb(244, 244, 245); -webkit-font-smoothing: antialiased; }
.sw7 a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; height: 34px; border-radius: 999px; }
.sw7 .ar { width: 34px; }
.sw7 .nm { padding: 0px 12px; gap: 8px; white-space: nowrap; }
.sw7 .nm small { font-weight: 500; opacity: 0.55; }
.sw7 a:hover { background: rgba(255, 255, 255, 0.1); }
.sw7 svg { width: 16px; height: 16px; }
:root { color-scheme: light; --arial: Arial, "Helvetica Neue", Helvetica, sans-serif; }
html { background: rgb(255, 255, 255); text-size-adjust: 100%; }
body { margin: 0px; font-family: var(--arial); -webkit-font-smoothing: antialiased; background: var(--bg, #fff); color: var(--ink, #111); }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0px; text-wrap: balance; }
p, ol, ul, dl, dd, figure, blockquote { margin: 0px; }
ol, ul { padding: 0px; list-style: none; }
:focus-visible { outline: 2px solid var(--link, #00707a); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; }
.th { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: var(--soft); }
.th img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease-out; }
a:hover .th img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) {
.th img { transition: none; }
a:hover .th img { transform: none; }
}
.pad-end { height: 92px; }
.wide, .wrap { box-sizing: border-box; width: 100%; }
img[src="shared/face-cut-ol.png"] { border-radius: 0px !important; background: none !important; }
.vc { display: flex; flex-direction: column; gap: 9px; text-decoration: none; min-width: 0px; }
.vc .vt { font-weight: 700; font-size: 16px; line-height: 1.3; }
.vc .vm { font-size: 14px; color: var(--mid); font-variant-numeric: tabular-nums; }
.signup { display: flex; flex-wrap: wrap; gap: 8px; max-width: 480px; }
.signup input { flex: 1 1 200px; min-width: 0px; font-size: 16px; padding: 13px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); color: var(--ink); }
.signup input::placeholder { color: var(--mid); }
.signup button { flex: 0 0 auto; font-weight: 700; font-size: 15px; padding: 13px 18px; border-radius: 10px; border: 0px; background: var(--ink); color: var(--bg); cursor: pointer; }
.fine { font-size: 14px; color: var(--mid); margin-top: 10px; }
.done { font-size: 17px; font-weight: 700; line-height: 1.4; }
.vctl { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; }
.chips, .sort { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button, .sort button { border: 1px solid var(--line); background: transparent; padding: 8px 13px; border-radius: 999px; font-size: 14px; cursor: pointer; color: var(--ink); }
.chips button[aria-pressed="true"], .sort button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chips b { font-weight: 400; opacity: 0.6; margin-left: 4px; font-variant-numeric: tabular-nums; }
.memx { --bg: #050607; --ink: #f1f4f4; --mid: #a9b1b3; --line: #242a2e; --soft: #11161a; --field: #0d1114; --link: #6fd3da; background: var(--bg); color: var(--ink); }
.s1-mem { border-block: 1px solid rgb(27, 33, 37); }
.memx .glass { background: rgba(255, 255, 255, 0.05); border-radius: 16px; box-shadow: rgba(255, 255, 255, 0.07) 0px 1px 0px inset, rgba(0, 0, 0, 0.4) 0px 20px 50px; backdrop-filter: blur(28px) saturate(1.4); }
.memx .art { position: relative; }
.memx .art img { width: 100%; mask-image: radial-gradient(closest-side, rgb(0, 0, 0) 72%, transparent 100%); }
.memx .eq { font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.memx .eq i { font-style: normal; color: var(--mid); font-weight: 400; padding-inline: 0.12em; }
.mp { max-width: 1100px; margin-inline: auto; padding: 32px 20px 0px; display: flex; flex-direction: column; gap: 88px; }
.mp-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; align-items: center; }
.mp-hero h1 { font-size: clamp(38px, 6vw, 68px); line-height: 1; letter-spacing: -0.04em; }
.mp-hero .copy { display: flex; flex-direction: column; gap: 20px; }
.mp-hero .copy > p { font-size: 18px; line-height: 1.55; color: var(--mid); max-width: 32em; }
.mp-hero .beta { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mid); }
.mp-hero .beta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgb(63, 217, 78); }
.mp-how { display: flex; flex-direction: column; gap: 22px; max-width: 780px; }
.mp-how h2 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.03em; }
.mp-how p { font-size: 19px; line-height: 1.55; color: var(--mid); }
.mp-how .eq { font-size: clamp(34px, 7.4vw, 84px); color: var(--ink); }
.mp-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: st 0; }
.mp-steps li { padding: 20px; display: flex; flex-direction: column; gap: 10px; counter-increment: st 1; }
.mp-steps li::before { content: counter(st); font-size: 34px; font-weight: 700; letter-spacing: -0.04em; color: var(--mid); font-variant-numeric: tabular-nums; }
.mp-steps h3 { font-size: 19px; }
.mp-steps p { font-size: 15px; line-height: 1.5; color: var(--mid); }
.mp-demo { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.mp-demo .glass { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.mp-demo h3 { font-size: 15px; color: var(--mid); font-weight: 400; }
.mp-demo .q { font-size: 20px; font-weight: 700; line-height: 1.3; }
.mp-demo .row { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; padding-block: 8px; border-top: 1px solid var(--line); }
.mp-demo .row span:last-child { color: var(--mid); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp-demo-cap { font-size: 14px; color: var(--mid); }
.mp-note { max-width: 680px; display: flex; flex-direction: column; gap: 16px; }
.mp-note h2 { font-size: 22px; }
.mp-note p { font-size: 19px; line-height: 1.6; }
.mp-note .sig { color: var(--mid); }
.mp-join { display: flex; flex-direction: column; gap: 16px; padding: 28px; max-width: 640px; }
.mp-join h2 { font-size: 28px; letter-spacing: -0.02em; }
.mp-join a { color: var(--link); }
@media (max-width: 900px) {
.mp { gap: 64px; }
.mp-hero { grid-template-columns: 1fr; }
.mp-steps { grid-template-columns: 1fr; }
.mp-steps li { flex-flow: wrap; align-items: baseline; column-gap: 14px; }
.mp-steps li::before { font-size: 26px; }
.mp-steps li > div { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px; }
.mp-demo { grid-template-columns: 1fr; }
}
.s1 { --bg: #0b0b0c; --ink: #f2f2f3; --mid: #a7a7ad; --line: #26262a; --soft: #161618; --field: #121214; --link: #6fcfd6; --topbg: rgba(11, 11, 12, 0.86); color-scheme: dark; }
.s1.page-memento { --topbg: rgba(5, 6, 7, 0.86); --ink: #f1f4f4; --mid: #a9b1b3; --line: #242a2e; --bg: #050607; }
.s1 .wrap { max-width: 720px; margin-inline: auto; padding-inline: 20px; }
.s1 .wide { max-width: 1100px; margin-inline: auto; padding-inline: 20px; }
.s1-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--topbg); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--line); }
.s1-top .bar { max-width: 1100px; margin-inline: auto; padding: 12px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.s1-top .name { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; text-decoration: none; color: var(--ink); }
.s1-top .name img { width: 32px; height: 32px; object-fit: contain; }
.s1-top nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; }
.s1-top nav a { text-decoration: none; color: var(--mid); padding-block: 4px; }
.s1-top nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.s1 .btns { display: flex; flex-wrap: wrap; gap: 10px; }
.s1 .btn { display: inline-flex; align-items: center; padding: 13px 18px; border-radius: 10px; background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 700; font-size: 15px; }
.s1 .btn.ghost { background: var(--soft); color: var(--ink); }
.s1 .more { color: var(--link); font-size: 15px; white-space: nowrap; text-underline-offset: 3px; }
.s1-hero { padding-block: 48px 8px; display: flex; flex-direction: column; gap: 22px; }
.s1-hero .me { width: 132px; border-radius: 14px; }
.s1-hero h1 { font-size: clamp(36px, 6.4vw, 60px); line-height: 1.02; letter-spacing: -0.035em; }
.s1-hero .lede { font-size: clamp(19px, 2.2vw, 22px); line-height: 1.5; max-width: 34em; }
@media (min-width: 820px) {
.s1-hero { display: grid; grid-template-columns: 1fr 260px; gap: 22px 64px; align-items: center; padding-top: 72px; }
.s1-hero > * { grid-column: 1; }
.s1-hero .me { grid-area: 1 / 2 / span 3; width: 260px; }
}
.s1-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 36px; }
.s1-stats b { display: block; font-size: 30px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.s1-stats span { font-size: 14px; color: var(--mid); }
@media (max-width: 560px) {
.s1-stats { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
}
.s1 .sec { padding-block: 44px; display: flex; flex-direction: column; gap: 22px; }
.s1 .sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.s1 .sec-head h2 { font-size: 24px; letter-spacing: -0.015em; }
.s1 .sec > p { font-size: 18px; line-height: 1.6; }
.s1-feature { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: center; text-decoration: none; }
.s1-feature .txt { display: flex; flex-direction: column; gap: 10px; }
.s1-feature .tag { font-size: 14px; color: var(--mid); }
.s1-feature h3 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.025em; line-height: 1.08; }
@media (max-width: 700px) {
.s1-feature { grid-template-columns: 1fr; gap: 14px; }
}
.s1 .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 18px; }
@media (max-width: 860px) {
.s1 .grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
.s1 .vc .vt { font-size: 15px; }
}
.s1-mem { margin-block: 20px; }
.s1-mem .in { max-width: 1100px; margin-inline: auto; padding: 64px 20px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 24px 48px; align-items: center; }
.s1-mem .copy { display: flex; flex-direction: column; gap: 18px; }
.s1-mem .kick { font-size: 16px; color: var(--mid); }
.s1-mem h2 { font-size: clamp(34px, 5vw, 54px); letter-spacing: -0.035em; line-height: 1.02; }
.s1-mem .copy > p { font-size: 17px; line-height: 1.6; color: var(--mid); }
.s1-mem .eq { font-size: clamp(22px, 3vw, 30px); }
.s1-mem ol { display: flex; flex-direction: column; gap: 10px; }
.s1-mem ol li { font-size: 16px; line-height: 1.5; color: var(--mid); }
.s1-mem ol b { color: var(--ink); }
.s1-mem .more { color: var(--link); }
@media (max-width: 860px) {
.s1-mem .in { grid-template-columns: 1fr; padding-block: 44px; }
.s1-mem .art { order: -1; margin-inline: -20px; }
}
.s1-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 700px) {
.s1-tools { grid-template-columns: 1fr; }
}
.tool { display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.tool .pic { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
.tool .pic img { width: 100%; height: 100%; object-fit: cover; }
.tool h3 { font-size: 20px; }
.tool p { font-size: 16px; line-height: 1.5; color: var(--mid); }
.tool .go { color: var(--link); font-size: 15px; font-weight: 700; }
.audit-pic { box-shadow: rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset; background: rgb(14, 14, 16); color: rgb(255, 255, 255); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; }
.audit-pic b { font-size: clamp(30px, 4vw, 42px); letter-spacing: -0.045em; }
.audit-pic small { font-size: 13px; color: rgb(154, 154, 162); }
.audit-pic .q { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; align-items: center; font-size: 15px; color: rgb(230, 230, 234); }
.audit-pic .q span:last-child { padding: 9px 26px; border-radius: 8px; background: rgb(255, 255, 255); color: rgb(17, 17, 17); font-weight: 700; }
.s1-beliefs { counter-reset: b 0; display: flex; flex-direction: column; }
.s1-beliefs li { counter-increment: b 1; position: relative; padding: 13px 0px 13px 40px; border-top: 1px solid var(--line); font-size: 18px; line-height: 1.5; }
.s1-beliefs li::before { content: counter(b); position: absolute; left: 0px; top: 15px; color: var(--mid); font-size: 15px; font-variant-numeric: tabular-nums; }
.s1-short { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: start; }
.s1-short img { border-radius: 12px; }
.s1-short p { font-size: 18px; line-height: 1.6; }
.s1-short .more { display: inline-block; margin-top: 10px; }
@media (max-width: 520px) {
.s1-short { grid-template-columns: 1fr; }
.s1-short img { width: 120px; }
}
.s1-links { display: flex; flex-direction: column; }
.s1-links a { display: grid; grid-template-columns: 110px 1fr auto; gap: 14px; align-items: baseline; padding: 15px 0px; border-top: 1px solid var(--line); text-decoration: none; }
.s1-links a b { font-size: 17px; }
.s1-links a span { color: var(--mid); font-size: 16px; }
.s1-links a i { font-style: normal; color: var(--link); }
@media (max-width: 520px) {
.s1-links a { grid-template-columns: 1fr auto; }
.s1-links a span { grid-area: 2 / 1; }
.s1-links a i { grid-area: 1 / 2 / span 2; align-self: center; }
}
.s1-foot { border-top: 1px solid var(--line); margin-top: 32px; }
.s1-foot .wide { padding-block: 40px 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px; }
.s1-foot h2 { font-size: 22px; margin-bottom: 14px; }
.s1-foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 16px; }
.s1-foot nav a { color: var(--link); text-underline-offset: 3px; }
.s1-foot .tagline { font-size: 15px; color: var(--mid); margin-top: 16px; }
.s1-page-head { padding-block: 48px 8px; display: flex; flex-direction: column; gap: 14px; }
.s1-page-head h1 { font-size: clamp(36px, 6vw, 56px); letter-spacing: -0.035em; line-height: 1.02; }
.s1-page-head p { font-size: 19px; line-height: 1.55; color: var(--mid); max-width: 36em; }
.s1 .vgrid { padding-block: 28px 20px; }
.s1 .ab { display: flex; flex-direction: column; gap: 44px; padding-block: 36px 20px; }
.s1 .ab-hero { display: flex; flex-direction: column; gap: 18px; }
.s1 .ab-hero img { width: min(300px, 70%); border-radius: 16px; }
.s1 .ab-hero h1 { font-size: clamp(44px, 8vw, 72px); letter-spacing: -0.04em; }
.s1 .ab-sec { display: flex; flex-direction: column; gap: 14px; }
.s1 .ab-sec h2 { font-size: 22px; }
.s1 .ab-sec p { font-size: 18px; line-height: 1.65; }
.s1 .pull { font-size: clamp(24px, 3.4vw, 32px); line-height: 1.25; letter-spacing: -0.02em; font-weight: 700; padding-left: 20px; border-left: 3px solid var(--ink); }
.s1 .tl { display: flex; flex-direction: column; }
.s1 .tl li { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 11px 0px; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.5; }
.s1 .tl b { font-variant-numeric: tabular-nums; }
.s1 .bul li { position: relative; padding: 8px 0px 8px 22px; font-size: 17px; line-height: 1.55; }
.s1 .bul li::before { content: ""; position: absolute; left: 4px; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.s1 .books li { padding: 10px 0px; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.5; }
.s1 .books span { color: var(--mid); }
.s1 .lessons { counter-reset: l 0; }
.s1 .lessons li { counter-increment: l 1; display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; padding: 13px 0px; border-top: 1px solid var(--line); }
.s1 .lessons li::before { content: counter(l); grid-row: span 2; color: var(--mid); font-variant-numeric: tabular-nums; font-size: 16px; padding-top: 2px; }
.s1 .lessons b { font-size: 17px; }
.s1 .lessons span { font-size: 16px; color: var(--mid); line-height: 1.5; }
.s1 .mottos li { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; padding: 12px 0px; border-top: 1px solid var(--line); line-height: 1.35; }
.s1 .mottos small { display: block; font-weight: 400; font-size: 15px; color: var(--mid); margin-top: 4px; }
.s1 .ab a { color: var(--link); }
.fr { display: flex; flex-direction: column; gap: 48px; padding-block: 12px 20px; }
.fr-tool { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: start; }
.fr-tool .pic { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; }
.fr-tool .pic img { width: 100%; height: 100%; object-fit: cover; }
.fr-tool .txt { display: flex; flex-direction: column; gap: 14px; }
.fr-tool h2 { font-size: clamp(28px, 4vw, 38px); letter-spacing: -0.03em; }
.fr-tool p { font-size: 18px; line-height: 1.6; }
.fr-tool .sub { color: var(--mid); }
.fr-tool ol { counter-reset: q 0; display: flex; flex-direction: column; }
.fr-tool ol li { counter-increment: q 1; display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 9px 0px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.45; }
.fr-tool ol li::before { content: counter(q); color: var(--mid); font-variant-numeric: tabular-nums; }
.fr-tool ol small { display: block; color: var(--mid); font-size: 14px; }
.fr-tool .cta { align-self: flex-start; display: inline-flex; padding: 13px 18px; border-radius: 10px; background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 700; font-size: 15px; }
@media (max-width: 800px) {
.fr-tool { grid-template-columns: 1fr; }
}
.fr-more { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fr-more a { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 12px; background: var(--soft); text-decoration: none; }
.fr-more b { font-size: 18px; }
.fr-more span { color: var(--mid); font-size: 15px; line-height: 1.5; }
@media (max-width: 600px) {
.fr-more { grid-template-columns: 1fr; }
}
.calc { display: grid; grid-template-columns: 340px 1fr; gap: 28px 48px; align-items: start; padding-top: 10px; }
@media (max-width: 900px) {
.calc { grid-template-columns: 1fr; }
}
.calc .ctl { display: flex; flex-direction: column; gap: 20px; }
.calc .f { display: flex; flex-direction: column; gap: 8px; }
.calc .f label { font-size: 16px; font-weight: 700; }
.calc .f small { font-size: 14px; color: var(--mid); }
.calc .age { display: flex; align-items: baseline; gap: 10px; }
.calc input[type="number"] { font-size: 44px; font-weight: 700; letter-spacing: -0.04em; width: 2.6em; padding: 0px 0px 4px; border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; border-bottom: 2px solid var(--ink); background: transparent; border-radius: 0px; }
.calc input[type="number"]::-webkit-inner-spin-button { appearance: none; }
.calc .age span { font-size: 18px; color: var(--mid); }
.calc input[type="range"] { width: 100%; accent-color: var(--ink); }
.calc .rv { font-weight: 700; font-variant-numeric: tabular-nums; }
.calc .out { display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.calc .out div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0px; border-bottom: 1px solid var(--line); font-size: 16px; }
.calc .out b { font-variant-numeric: tabular-nums; }
.calc .out .doomrow b { color: var(--doom); }
.calc .res { font-size: clamp(40px, 6vw, 64px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.95; }
.calc .res + p { font-size: 17px; line-height: 1.45; }
.calc .note { font-size: 14px; color: var(--mid); line-height: 1.5; }
.weeks { display: flex; flex-direction: column; gap: 12px; min-width: 0px; }
.weeks canvas { width: 100%; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--mid); }
.legend i { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; }
.bars { display: flex; flex-direction: column; }
.bar { display: grid; grid-template-columns: 128px 1fr; gap: 6px 16px; align-items: center; padding: 10px 0px; border-bottom: 1px solid var(--line); text-decoration: none; }
.bar .th { grid-row: span 2; border-radius: 6px; }
.bar .bt { font-size: 17px; font-weight: 700; line-height: 1.3; }
.bar .bv { display: flex; align-items: center; gap: 10px; }
.bar .bv i { display: block; height: 10px; background: var(--ink); min-width: 3px; }
.bar .bv span { font-size: 14px; color: var(--mid); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar:hover .bt { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
.bar { grid-template-columns: 96px 1fr; }
.bar .bt { font-size: 15px; }
}
.s5 .cta { display: inline-flex; align-self: flex-start; padding: 13px 18px; border-radius: 10px; background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 700; font-size: 15px; }
.tt-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.tt { background: var(--soft); border-radius: 12px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; }
.tt .mo { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.tt .mo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tt .mo img:first-child { grid-column: span 2; }
.tt .lb { padding: 14px 14px 4px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tt .lb b { font-size: 17px; }
.tt .lb span { color: var(--mid); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt .ds { padding: 0px 14px 16px; font-size: 14px; color: var(--mid); line-height: 1.45; }
.tt:hover .lb b { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) {
.tt-grid { grid-template-columns: repeat(2, 1fr); }
.tt:last-child { grid-column: span 2; }
.tt:last-child .mo { grid-template-columns: 2fr 1fr 1fr; }
.tt:last-child .mo img:first-child { grid-column: auto; }
}
.facts { display: flex; flex-wrap: wrap; gap: 8px; }
.facts span { background: var(--soft); padding: 8px 12px; border-radius: 999px; font-size: 14px; }
.s5-hero { padding-block: 64px 16px; display: flex; flex-direction: column; gap: 22px; }
.s5-hero .hi { display: flex; align-items: center; gap: 12px; font-size: 18px; }
.s5-hero .hi img { width: 50px; height: 50px; object-fit: contain; }
.s5-hero h1 { font-size: clamp(46px, 8.4vw, 104px); line-height: 0.94; letter-spacing: -0.055em; max-width: 11em; }
.s5-hero .lede { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.5; max-width: 32em; }
.s5-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.s5-feat a { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 14px; background: var(--soft); text-decoration: none; min-height: 230px; }
.s5-feat .tp { font-size: 14px; color: var(--mid); }
.s5-feat h3 { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.03em; line-height: 1.08; }
.s5-feat p { font-size: 15px; color: var(--mid); line-height: 1.5; margin-top: auto; }
@media (max-width: 860px) {
.s5-feat { grid-template-columns: 1fr; }
.s5-feat a { min-height: 0px; }
}
.elist { display: flex; flex-direction: column; }
.elist a { display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; padding: 18px 0px; border-top: 1px solid var(--line); text-decoration: none; }
.elist h3 { font-size: 20px; letter-spacing: -0.015em; line-height: 1.25; }
.elist p { font-size: 15px; color: var(--mid); line-height: 1.5; grid-column: 1; }
.elist .m { grid-area: 1 / 2; font-size: 14px; color: var(--mid); white-space: nowrap; padding-top: 4px; }
.elist a:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 560px) {
.elist a { grid-template-columns: 1fr; }
.elist .m { grid-area: auto / 1; padding-top: 0px; }
}
.s5-ideas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0px 48px; }
.idea { padding: 22px 0px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.idea h3 { font-size: 24px; letter-spacing: -0.025em; }
.idea p { font-size: 17px; line-height: 1.6; }
.idea .n { font-size: 14px; color: var(--mid); }
.s5-ideas .idea:last-child:nth-child(2n+1) { grid-column: 1 / -1; }
.s5-ideas .idea:last-child:nth-child(2n+1) p { max-width: 42em; }
@media (max-width: 760px) {
.s5-ideas { grid-template-columns: 1fr; }
}
.sys { display: flex; flex-direction: column; gap: 18px; }
.sys > p { font-size: 19px; line-height: 1.6; max-width: 36em; }
.sys ol { counter-reset: s 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) {
.sys ol { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.sys ol { grid-template-columns: 1fr; }
}
.sys li { counter-increment: s 1; background: var(--soft); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.sys li::before { content: counter(s); font-size: 32px; font-weight: 700; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.sys li b { font-size: 18px; }
.sys li span { font-size: 15px; line-height: 1.55; color: var(--mid); }
.made { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; }
.made a { display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.made .pic { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: rgb(5, 6, 7); }
.made .pic img { width: 100%; height: 100%; object-fit: cover; }
.made h3 { font-size: 19px; }
.made p { font-size: 15px; line-height: 1.5; color: var(--mid); }
@media (max-width: 860px) {
.made { grid-template-columns: 1fr; }
}
.watch { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 700px) {
.watch { grid-template-columns: 1fr 1fr; }
.watch > :nth-child(3) { display: none; }
}
.idea-page { display: flex; flex-direction: column; gap: 64px; padding-block: 24px 20px; }
.idea-sec { display: flex; flex-direction: column; gap: 18px; }
.idea-sec h2 { font-size: clamp(36px, 6vw, 64px); letter-spacing: -0.05em; line-height: 0.95; }
.idea-sec .take { font-size: 20px; line-height: 1.6; max-width: 36em; }
.idea-sec .vids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 700px) {
.idea-sec .vids { grid-template-columns: 1fr 1fr; }
.idea-sec .vids > :nth-child(3) { display: none; }
}
.pr { counter-reset: p 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0px 40px; }
.pr li { counter-increment: p 1; position: relative; padding: 13px 0px 13px 38px; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.5; }
.pr li::before { content: counter(p); position: absolute; left: 0px; top: 15px; color: var(--mid); font-size: 14px; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
.pr { grid-template-columns: 1fr; }
}
.reader { max-width: 680px; margin-inline: auto; padding: 40px 20px 0px; box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; }
.reader .back { font-size: 15px; color: var(--link); text-decoration: none; }
.reader .tp { font-size: 14px; color: var(--mid); }
.reader h1 { font-size: clamp(36px, 6.4vw, 60px); letter-spacing: -0.045em; line-height: 1; }
.reader .dek { font-size: 21px; line-height: 1.45; color: var(--mid); }
.reader .by { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--mid); border-block: 1px solid var(--line); padding-block: 12px; }
.reader .by img { width: 36px; height: 36px; object-fit: contain; }
.reader .body { display: flex; flex-direction: column; gap: 22px; }
.reader .body p { font-size: 19px; line-height: 1.75; }
.reader .pull { font-size: clamp(24px, 3.4vw, 30px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; padding: 10px 0px 10px 20px; border-left: 3px solid var(--ink); }
.reader .end { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.reader .end h2 { font-size: 24px; letter-spacing: -0.02em; }
.reader .end a { color: var(--link); }
.reader .next { display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 12px; background: var(--soft); text-decoration: none; margin-top: 12px; color: var(--ink) !important; }
.reader .next span { font-size: 14px; color: var(--mid); }
.reader .next b { font-size: 20px; letter-spacing: -0.02em; }
.s7 { --fill: rgba(255, 255, 255, .05); --fill2: rgba(255, 255, 255, .085); --hi: inset 0 1px 0 rgba(255, 255, 255, .07); --green: #3fd94e; --ease: cubic-bezier(.2, .7, .2, 1); --text: #dcdce1; --gp: 24px; }
.s7-val { display: flex; flex-direction: column; }
.s7 .s7-val .bridge { font-size: clamp(24px, 3vw, 36px); font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; max-width: 22em; text-wrap: balance; }
.s7 .s7-val .stmt { margin-top: clamp(24px, 3vw, 44px); font-size: min(-8.16327px + 20.4082vw, 176px); font-weight: 700; line-height: 0.86; letter-spacing: -0.06em; margin-left: -0.05em; }
.s7 .s7-val .stmt span { display: block; }
.s7 .s7-val .intro { margin-top: clamp(28px, 4vw, 52px); font-size: clamp(19px, 1.75vw, 23px); line-height: 1.5; color: var(--text); max-width: 31em; }
.s7 .s7-val .bridge .good { font-size: 0.5em; font-weight: 700; margin-left: 0.25em; color: var(--mid); vertical-align: super; letter-spacing: 0px; }
.s7 .s7-val .lockin em { font-style: italic; }
.s7 .s7-val .lockin { margin-top: clamp(56px, 7vw, 104px); font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
.p7s-list { margin-top: 20px; border-top: 1px solid var(--line); }
.p7s { border-bottom: 1px solid var(--line); }
.p7s h3 { font: inherit; margin: 0px; }
.p7s__h { display: grid; grid-template-columns: 40px minmax(0px, 1fr); gap: 6px 12px; align-items: start; width: 100%; padding: 24px 0px 22px; border: 0px; background: none; text-align: left; cursor: pointer; color: var(--text); font: inherit; }
.p7s__n { grid-row: 1 / span 3; font-size: 32px; font-weight: 700; line-height: 0.95; letter-spacing: -0.04em; color: rgb(164, 164, 172); font-variant-numeric: tabular-nums; transition: color .3s var(--ease); }
.p7s__name { font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; line-height: 1.05; letter-spacing: -0.035em; color: var(--ink); }
.p7s__lead { grid-column: 2; font-size: 17px; line-height: 1.5; max-width: 36em; }
.p7s__more { grid-column: 2; margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: underline 1px rgba(255, 255, 255, 0.4); text-underline-offset: 0.25em; }
.p7s__pm { grid-area: 1 / 3 / span 3; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--fill2); box-shadow: var(--hi); color: var(--ink); transition: background-color .2s var(--ease); }
.p7s__pm svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.p7s__h:hover .p7s__pm { background: rgba(255, 255, 255, 0.14); }
.p7s.open .p7s__n { color: var(--green); }
.p7s.open .p7s__pm svg { transform: rotate(45deg); }
.p7s__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .36s var(--ease); }
.p7s.open .p7s__body { grid-template-rows: 1fr; }
.p7s__body > div { overflow: hidden; min-height: 0px; }
.p7s__body[hidden] { display: none; }
.p7s__body p { padding: 0px 0px 28px; margin-left: 52px; font-size: 17px; line-height: 1.65; color: var(--text); max-width: 40em; opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .36s var(--ease); }
.p7s.open .p7s__body p { opacity: 1; transform: none; }
@media (min-width: 900px) {
.p7s__h { grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: 8px var(--gp); padding: 32px 0px 30px; }
.p7s__n { grid-column: 1; font-size: 48px; }
.p7s__name { grid-area: 1 / 2 / auto / span 4; }
.p7s__lead { grid-area: 1 / 6 / span 2 / span 6; font-size: 19px; }
.p7s__more { grid-area: 2 / 2 / auto / span 4; }
.p7s__pm { grid-column: 12; justify-self: end; }
.p7s__body > div { margin-top: -26px; }
.p7s__body p { padding-bottom: 36px; margin-left: calc((100% + var(--gp)) * 5 / 12); max-width: min(40em, calc((100% + var(--gp)) * 6 / 12 - var(--gp))); font-size: 19px; }
}
.s7-val .l25 { margin-top: clamp(64px, 8vw, 112px); }
.k7-sub { margin-top: 14px; font-size: clamp(19px, 1.75vw, 23px); line-height: 1.5; color: var(--text); max-width: 30em; }
.k7-grid { display: grid; gap: 12px; margin-top: clamp(32px, 4vw, 56px); padding: 0px; list-style: none; }
.k7-grid li { display: flex; }
.k7 { position: relative; flex: 1 1 0%; display: flex; flex-direction: column; border-radius: 16px; background: var(--fill); box-shadow: var(--hi); overflow: hidden; color: var(--text); text-decoration: none; transition: background-color .3s var(--ease), transform .3s var(--ease); }
.k7:hover { background: rgba(255, 255, 255, 0.075); transform: translateY(-3px); }
.k7__vis { position: relative; height: 240px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.k7__tx { flex: 1 1 0%; display: flex; flex-direction: column; gap: 8px; padding: 4px 22px 24px; }
.k7__nm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); }
.k7__d { font-size: 17px; line-height: 1.5; }
.k7__h { font-size: 15px; color: rgb(208, 208, 214); }
.k7__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; font-size: 16px; font-weight: 700; color: var(--ink); }
.k7__go svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.k7:hover .k7__go svg { transform: translate(2px, -2px); }
.k7__badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 10px; border-radius: 999px; background: var(--fill2); box-shadow: var(--hi); font-size: 13px; font-weight: 700; letter-spacing: 0px; color: var(--ink); }
.k7__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.k7wk { position: absolute; inset: 22px 22px 0px; overflow: hidden; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.92) 1.1px, rgba(255, 255, 255, 0) 1.6px); background-size: 9px 9px; mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 33%, rgba(0, 0, 0, 0.2) 35%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%); }
.k7--mem .k7__vis .mm2.small .mm2-sway { height: 84%; }
.k7fn { width: 100%; padding: 0px 22px; display: grid; gap: 10px; }
.k7fn__ex { justify-self: start; padding: 5px 10px; border-radius: 999px; background: var(--fill2); font-size: 12px; font-weight: 700; color: rgb(208, 208, 214); }
.k7fn__k { font-size: 15px; color: rgb(208, 208, 214); }
.k7fn__n { font-size: clamp(38px, 3.6vw, 50px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.k7fn__bar { position: relative; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.k7fn__bar i { position: absolute; left: 0px; top: 0px; bottom: 0px; width: 12%; border-radius: 999px; background: var(--green); }
.k7fn__c { font-size: 14px; color: rgb(208, 208, 214); }
@media (min-width: 900px) {
.k7-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: var(--gp); }
.k7__vis { height: 290px; }
}
@media (prefers-reduced-motion: reduce) {
.p7s__body, .p7s__body p, .p7s__pm svg, .k7 { transition: none; }
}
.drop { margin: clamp(48px, 7vw, 96px) 0px 0px; display: flex; }
.drop.r { justify-content: flex-end; }
.drop.c { justify-content: center; }
.drop img { width: clamp(220px, 30vw, 380px); height: auto; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.9) 0px 30px 60px -20px, rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset; transform: rotate(var(--rot, -2deg)); }
.drop.pair { gap: clamp(16px, 4vw, 48px); align-items: flex-start; justify-content: center; }
.drop.pair img:nth-child(2) { margin-top: clamp(40px, 8vw, 110px); --rot: 2.5deg; }
@media (max-width: 620px) {
.drop img { width: 72vw; }
.drop.pair { flex-direction: column; align-items: center; }
.drop.pair img { width: 66vw; }
.drop.pair img:nth-child(2) { margin-top: -24px; margin-left: 18vw; }
}
.s7-sis { display: flex; flex-direction: column; gap: 24px; }
.s7-sis .art { position: relative; margin-top: 8px; }
.s7-sis .art > img { width: 100%; border-radius: 14px; display: block; }
.s7-sis .art .lol { position: absolute; right: clamp(-8px, -1vw, 0px); bottom: clamp(-40px, -4vw, -20px); width: clamp(140px, 22vw, 260px); border-radius: 6px; transform: rotate(4deg); box-shadow: rgba(0, 0, 0, 0.95) 0px 24px 50px -16px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; }
.s7 .s7-sis .myth { margin-top: clamp(40px, 6vw, 72px); font-size: clamp(19px, 1.75vw, 23px); line-height: 1.55; color: var(--text); max-width: 34em; }
.s7 .s7-sis .why { font-size: clamp(34px, 5.6vw, 76px); font-weight: 700; line-height: 1; letter-spacing: -0.045em; max-width: 14em; text-wrap: balance; }
.s7-sis .go { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 13px 18px; border-radius: 10px; background: rgb(255, 0, 51); color: rgb(255, 255, 255); font-weight: 700; font-size: 15px; text-decoration: none; }
.s7-sis .go svg { width: 16px; height: 16px; }
.s7-me { display: grid; grid-template-columns: minmax(0px, 1fr) 300px; gap: 24px 56px; align-items: center; padding-block: 64px 8px; }
.s7-me .tx { display: flex; flex-direction: column; gap: 20px; }
.s7-me .hi { font-size: 18px; color: var(--mid); }
.s7-me h1 { font-size: clamp(46px, 7.6vw, 100px); line-height: 0.92; letter-spacing: -0.055em; }
.s7-me .lede { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.5; max-width: 32em; }
.s7-me .ph { margin: 0px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.s7-me .ph img { width: 100%; max-width: 300px; margin-inline: auto; }
.s7-me .ph .tag { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); text-align: center; max-width: 16em; }
.s1.s7 .btn.yt { background: rgb(255, 0, 51); color: rgb(255, 255, 255); gap: 8px; }
.s1.s7 .btn.yt:hover { background: rgb(230, 0, 46); }
.s1.s7 .btn.dc { background: rgb(88, 101, 242); color: rgb(255, 255, 255); gap: 9px; }
.s1.s7 .btn.dc:hover { background: rgb(71, 82, 196); }
.s1.s7 .btn.dc svg { width: 20px; height: 16px; flex: 0 0 auto; }
.s1.s7 .btn.yt svg { width: 18px; height: 18px; flex: 0 0 auto; }
@media (max-width: 820px) {
.s7-me { grid-template-columns: 1fr; padding-top: 40px; }
.s7-me .ph { order: -1; flex-direction: row; align-items: center; gap: 18px; }
.s7-me .ph img { max-width: 132px; margin: 0px; }
.s7-me .ph .tag { text-align: left; font-size: 16px; max-width: 11em; }
}
.s7-mission { padding-block: 80px 8px; display: flex; flex-direction: column; gap: 20px; }
.s7-mission h2 { font-size: clamp(34px, 5.4vw, 70px); line-height: 1.02; letter-spacing: -0.05em; max-width: 15em; }
.s7-mission h2 span { color: var(--mid); }
.s7-mission p { font-size: clamp(18px, 2vw, 21px); line-height: 1.6; max-width: 36em; }
.s7-mission .words { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: clamp(22px, 3vw, 32px); letter-spacing: -0.03em; }
.s7-about p { font-size: 19px; line-height: 1.6; max-width: 38em; }
.s7-think { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.s7-think div { padding: 20px; border-radius: 14px; background: var(--soft); display: flex; flex-direction: column; gap: 10px; }
.s7-think b { font-size: 20px; letter-spacing: -0.02em; }
.s7-think p { font-size: 16px; line-height: 1.55; color: rgb(212, 212, 216); }
@media (max-width: 900px) {
.s7-think { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.s7-think { grid-template-columns: 1fr; }
}
.s7-time .s7-line { padding-block: 16px 8px; }
.s7-me h1 { font-size: clamp(44px, 7.4vw, 96px); line-height: 0.95; letter-spacing: -0.055em; }
.s7-me .lede a { color: var(--ink); text-decoration-line: underline; text-decoration-style: initial; text-decoration-color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.s7-story { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.s7-story .st { padding: 20px; border-radius: 14px; background: var(--soft); display: flex; flex-direction: column; gap: 8px; }
.s7-story b { font-size: 19px; letter-spacing: -0.02em; }
.s7-story p { font-size: 16px; line-height: 1.6; color: rgb(212, 212, 216); }
.s7-story p a { color: var(--ink); text-decoration-color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 900px) {
.s7-story { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.s7-story { grid-template-columns: 1fr; }
}
.ymos { display: flex; flex-direction: column; gap: 14px; }
.ymos canvas { display: block; width: 100%; touch-action: pan-y; cursor: pointer; }
.ymos .cap { font-size: 15px; color: var(--mid); }
#mpick .yc { max-width: 560px; }
.ymarq { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; mask-image: linear-gradient(to right, transparent 0px, rgb(0, 0, 0) 6%, rgb(0, 0, 0) 94%, transparent 100%); }
.ymarq .row { display: flex; gap: 12px; width: max-content; align-items: stretch; animation: ymove var(--dur, 200s) linear infinite; will-change: transform; }
.ymarq .row.rev { animation-direction: reverse; }
.ymarq .yc { width: 320px; flex: 0 0 auto; }
.ymarq .yc .tx { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes ymove { 
  100% { transform: translateX(-50%); }
}
@media (max-width: 620px) {
.ymarq .yc { width: 262px; }
.ymarq .yc .tx { font-size: 13px; line-height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.ymarq { overflow-x: auto; }
.ymarq .row { animation: auto ease 0s 1 normal none running none; }
}
.ytw-head { display: flex; flex-direction: column; gap: 10px; }
.ytw-head .n { font-size: clamp(44px, 7vw, 92px); font-weight: 700; letter-spacing: -0.055em; line-height: 0.95; font-variant-numeric: tabular-nums; }
.ytw-head p { font-size: 18px; color: var(--mid); max-width: 38em; line-height: 1.5; }
.ytw { position: relative; height: clamp(600px, 82vh, 780px); overflow: hidden; display: grid; gap: 14px; mask-image: linear-gradient(transparent 0px, rgb(0, 0, 0) 10%, rgb(0, 0, 0) 90%, transparent 100%); }
.ytw .col { display: flex; flex-direction: column; gap: 14px; animation: ytup var(--dur, 90s) linear infinite; will-change: transform; }
.ytw:hover .col, .ytw:focus-within .col { animation-play-state: paused; }
@keyframes ytup { 
  100% { transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.ytw { overflow-y: auto; }
.ytw .col { animation: auto ease 0s 1 normal none running none; }
}
.yc { display: grid; grid-template-columns: 40px minmax(0px, 1fr); gap: 12px; padding: 14px 14px 12px; border-radius: 12px; background: rgb(18, 18, 20); box-shadow: rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset; text-decoration: none; color: rgb(241, 241, 241); font-family: Roboto, Arial, sans-serif; transition: background 0.2s ease-out; }
.yc .av { display: block; width: 40px; height: 40px; border-radius: 50%; background: url("av-sprite.jpg") 0% 0% / 1280px auto no-repeat rgb(42, 42, 46); }
.ytall { columns: 3; column-gap: 14px; margin-top: 8px; }
.ytall .yc { break-inside: avoid; margin-bottom: 14px; }
@media (max-width: 1000px) {
.ytall { columns: 2; }
}
@media (max-width: 620px) {
.ytall { columns: 1; }
}
.ytbtn { align-self: center; border: 1px solid var(--line); background: transparent; color: var(--ink); padding: 12px 18px; border-radius: 999px; font-size: 15px; cursor: pointer; }
.yc .hd { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.yc .hd b { font-size: 13px; font-weight: 500; color: rgb(241, 241, 241); letter-spacing: 0.01em; }
.yc .hd span { font-size: 12px; color: rgb(170, 170, 170); }
.yc .tx { font-size: 14px; line-height: 20px; margin-top: 3px; color: rgb(241, 241, 241); overflow-wrap: anywhere; white-space: pre-line; }
.yc .ac { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: rgb(241, 241, 241); }
.yc .ac svg { width: 18px; height: 18px; fill: currentcolor; }
.yc .ac .ct { font-size: 12px; color: rgb(170, 170, 170); margin-right: 10px; font-variant-numeric: tabular-nums; }
.yc .ac .rp { font-size: 12px; font-weight: 500; padding: 6px 10px; border-radius: 999px; margin-left: 4px; }
.yc .ht { position: relative; width: 18px; height: 18px; margin-left: 4px; }
.yc .ht img { width: 18px; height: 18px; border-radius: 50%; object-fit: contain; background: rgb(42, 42, 46); }
.yc .ht i { position: absolute; right: -5px; bottom: -4px; font-style: normal; font-size: 11px; color: rgb(255, 78, 69); line-height: 1; }
.yc .on { font-size: 12px; color: rgb(143, 143, 150); margin-top: 4px; }
.s7 { --empty: #232326; --doom: #2ec4cf; --now: #6fcfd6; }
.s7-hero { position: relative; }
.s7-hero .in { position: relative; z-index: 2; max-width: 1100px; margin-inline: auto; padding: 72px 20px 8px; box-sizing: border-box; width: 100%; display: flex; flex-direction: column; gap: 18px; }
.s7-hero h1 { font-size: clamp(46px, 8.6vw, 112px); line-height: 0.92; letter-spacing: -0.055em; max-width: 10em; }
.s7-hero p { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.45; max-width: 30em; color: rgb(230, 230, 234); }
.s7-hero .hi { display: flex; align-items: center; gap: 12px; font-size: 17px; color: rgb(230, 230, 234); }
.s7-hero .hi img { width: 52px; height: 52px; object-fit: contain; }
.s7-time { padding-block: 56px 16px; display: flex; flex-direction: column; gap: 22px; }
.s7-ask { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; font-size: clamp(22px, 3vw, 32px); font-weight: 700; letter-spacing: -0.03em; }
.s7-ask input { font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: clamp(34px, 5vw, 56px); letter-spacing: -0.04em; width: 2.2em; padding: 0px 0px 2px; border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; border-bottom: 2px solid var(--ink); background: transparent; color: var(--ink); border-radius: 0px; text-align: center; }
.s7-ask input::-webkit-inner-spin-button { appearance: none; }
.s7-count { display: flex; flex-direction: column; gap: 6px; }
.s7-count .big { font-size: clamp(36px, 7.4vw, 104px); font-weight: 700; letter-spacing: -0.055em; line-height: 0.95; font-variant-numeric: tabular-nums; }
.s7-count .sm { font-size: clamp(17px, 2vw, 21px); color: var(--mid); line-height: 1.45; }
.s7-count .sm b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.s7-grid { position: relative; }
.s7-grid canvas { width: 100%; display: block; }
.s7-grid .now { position: absolute; background: var(--now); box-shadow: rgba(111, 207, 214, 0.25) 0px 0px 0px 3px, rgba(111, 207, 214, 0.6) 0px 0px 18px; animation: 1.6s ease-in-out 0s infinite normal none running s7pulse; }
@keyframes s7pulse { 
  50% { box-shadow: rgba(111, 207, 214, 0.12) 0px 0px 0px 5px, rgba(111, 207, 214, 0.35) 0px 0px 26px; }
}
@media (prefers-reduced-motion: reduce) {
.s7-grid .now { animation: auto ease 0s 1 normal none running none; }
}
.s7-grid .legend { margin-top: 12px; }
.s7-where { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px 24px; align-items: end; padding: 18px; border-radius: 14px; background: var(--soft); }
.s7-where .f { display: flex; flex-direction: column; gap: 8px; }
.s7-where label { font-size: 15px; font-weight: 700; }
.s7-where .rv { color: var(--mid); font-weight: 400; font-variant-numeric: tabular-nums; }
.s7-where input[type="range"] { width: 100%; accent-color: var(--doom); }
.s7-where .res { font-size: 15px; color: var(--mid); line-height: 1.4; max-width: 16em; }
.s7-where .res b { display: block; font-size: 28px; color: var(--doom); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
.s7-where { grid-template-columns: 1fr; }
}
.s7-line { font-size: clamp(28px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -0.045em; font-weight: 700; max-width: 17em; padding-block: 40px 0px; }
.s7-line span { color: var(--mid); }
.s7-stuck { display: flex; flex-direction: column; gap: 22px; }
.s7-stuck .opts { display: flex; flex-wrap: wrap; gap: 10px; }
.s7-stuck .opts button { border: 1px solid var(--line); background: transparent; color: var(--ink); padding: 12px 16px; border-radius: 999px; font-size: 16px; cursor: pointer; }
.s7-stuck .opts button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 700; }
.s7-path { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.s7-path .quote { grid-column: 1 / -1; font-size: clamp(24px, 3.4vw, 38px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; max-width: 22em; padding: 6px 0px 10px; }
.s7-path a { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: var(--soft); text-decoration: none; min-width: 0px; }
.s7-path .k { font-size: 13px; color: var(--mid); }
.s7-path h3 { font-size: 19px; line-height: 1.25; letter-spacing: -0.015em; }
.s7-path p { font-size: 15px; line-height: 1.5; color: var(--mid); }
.s7-path .th { border-radius: 8px; }
.s7-path .tool { background: rgb(15, 20, 22); box-shadow: rgba(111, 207, 214, 0.18) 0px 0px 0px 1px inset; }
@media (max-width: 860px) {
.s7-path { grid-template-columns: 1fr; }
}
.s7-wall { columns: 3; column-gap: 14px; }
.s7-wall .cm { break-inside: avoid; margin: 0px 0px 14px; padding: 18px; border-radius: 14px; background: var(--soft); display: flex; flex-direction: column; gap: 12px; }
.s7-wall .cm q { quotes: none; font-size: 17px; line-height: 1.5; color: var(--ink); }
.s7-wall .cm.big q { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.35; }
.s7-wall .cm .meta { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--mid); }
.s7-wall .cm .meta span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.s7-wall .cm:nth-child(n+19) { display: none; }
.s7-wall.all .cm:nth-child(n+19) { display: block; }
.s7-wallmore { align-self: center; border: 1px solid var(--line); background: transparent; color: var(--ink); padding: 12px 18px; border-radius: 999px; font-size: 15px; cursor: pointer; }
@media (max-width: 1000px) {
.s7-wall { columns: 2; }
}
@media (max-width: 620px) {
.s7-wall { columns: 1; }
.s7-wall .cm:nth-child(n+11) { display: none; }
.s7-wall.all .cm:nth-child(n+11) { display: block; }
}
.s1.s7 { --bg: #000; --topbg: rgba(0, 0, 0, 0.82); --soft: rgba(255, 255, 255, 0.05); --field: #0a0a0b; --line: #1d1d21; }
.s7 .memx { --bg: #000; --soft: rgba(255, 255, 255, 0.05); --line: #1d1d21; }
.s7 .yc { background: rgb(255, 255, 255); box-shadow: none; color: rgb(15, 15, 15); }
.s7 .yc .hd b, .s7 .yc .tx, .s7 .yc .ac { color: rgb(15, 15, 15); }
.s7 .yc .hd span, .s7 .yc .ac .ct, .s7 .yc .on { color: rgb(96, 96, 96); }
.s7 .yc .av { background-color: rgb(229, 229, 229); }
.s7-h { font-size: clamp(30px, 4.4vw, 52px); letter-spacing: -0.045em; line-height: 1.04; }
.s7 .ytw-head h2 { font-size: clamp(34px, 5vw, 64px); letter-spacing: -0.05em; line-height: 1; }
.s7 .ytw-head p { color: var(--ink); font-size: clamp(17px, 2vw, 20px); }
.s7-sub { font-size: 18px; margin-top: -8px; }
.s7-stuck { gap: 26px; }
.s7-stuck .opts button { border: 0px; background: rgba(255, 255, 255, 0.06); box-shadow: rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset; padding: 14px 20px; font-size: 17px; font-weight: 700; transition: background-color 0.15s ease-out, color 0.15s ease-out; }
.s7-stuck .opts button:hover { background: rgba(255, 255, 255, 0.1); }
.s7-stuck .opts button[aria-pressed="true"] { background: var(--ink); color: rgb(0, 0, 0); box-shadow: none; }
.s7-path { display: grid; grid-template-columns: minmax(0px, 1.05fr) minmax(0px, 1fr); gap: 24px 48px; align-items: center; }
.s7-path .q { margin: 0px; padding: 8px 0px; }
.s7-path .q p { color: var(--ink); font-size: clamp(30px, 3.8vw, 50px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.08; }
.s7-path .q cite { display: block; margin-top: 18px; font-style: normal; font-size: 16px; color: var(--mid); }
.s7-path .go-col { display: grid; gap: 12px; }
.s7-path .go { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); box-shadow: rgba(255, 255, 255, 0.07) 0px 0px 0px 1px inset; text-decoration: none; transition: background-color 0.15s ease-out; }
.s7-path .go:hover { background: rgba(255, 255, 255, 0.08); }
.s7-path .go.vid { grid-template-columns: minmax(0px, 0.95fr) minmax(0px, 1fr); align-items: center; }
.s7-path .go .th { border-radius: 10px; }
.s7-path .gx { display: flex; flex-direction: column; gap: 8px; min-width: 0px; }
.s7-path .k { font-size: 14px; font-weight: 700; color: var(--link); }
.s7-path .gx b { font-size: clamp(20px, 2vw, 24px); line-height: 1.2; letter-spacing: -0.02em; }
.s7-path .gx .d { font-size: 16px; line-height: 1.5; color: var(--ink); }
@media (max-width: 860px) {
.s7-path { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
.s7-path .go.vid { grid-template-columns: 1fr; }
}
.s7-tools { gap: 22px; }
.s7-three { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 14px; }
.t3 { position: relative; display: flex; flex-direction: column; border-radius: 18px; background: rgba(255, 255, 255, 0.04); text-decoration: none; overflow: hidden; transition: transform 0.2s ease-out, background-color 0.2s ease-out; }
.t3:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.06); }
.t3::after { content: ""; position: absolute; inset: 0px; border-radius: inherit; box-shadow: rgba(255, 255, 255, 0.09) 0px 0px 0px 1px inset; pointer-events: none; }
.t3.mem::after { box-shadow: rgba(111, 207, 214, 0.34) 0px 0px 0px 1px inset; }
.t3 .vis { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; background: rgb(0, 0, 0); box-shadow: rgba(255, 255, 255, 0.06) 0px -1px 0px inset; overflow: hidden; }
.t3 .tx { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 22px; flex: 1 1 0%; }
.t3 .nm { font-size: 24px; letter-spacing: -0.03em; }
.t3 .d { font-size: 16px; line-height: 1.5; color: var(--ink); }
.t3 .h { font-size: 15px; color: var(--mid); }
.t3 .go3 { margin-top: auto; padding-top: 8px; font-weight: 700; font-size: 16px; color: var(--link); }
.t3.audit .wk { height: 80%; aspect-ratio: 52 / 75; background: linear-gradient(90deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 24%, transparent 24%) 0px 0px / calc(1.92308%) 100%, linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 24%, transparent 24%) 0px 0px / 100% calc(1.33333%), linear-gradient(rgb(242, 242, 243) 0px, rgb(242, 242, 243) 33.4%, rgb(111, 207, 214) 33.4%, rgb(111, 207, 214) 34.8%, rgb(42, 42, 47) 34.8%, rgb(42, 42, 47) 86.7%, rgb(255, 93, 82) 86.7%); }
.t3.mem .vis img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 0.3s ease-out; }
.t3.mem:hover .vis img { transform: scale(1.12); }
.t3 .wip { position: absolute; left: 12px; top: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(16px); box-shadow: rgba(255, 255, 255, 0.14) 0px 0px 0px 1px inset; font-size: 13px; font-weight: 700; }
.t3.free .fn { width: 80%; display: flex; flex-direction: column; gap: 10px; }
.t3.free .fk { font-size: 14px; color: var(--mid); }
.t3.free .fnum { font-size: clamp(30px, 3.2vw, 44px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.t3.free .fbar { height: 8px; border-radius: 4px; background: rgb(29, 29, 33); overflow: hidden; }
.t3.free .fbar i { display: block; width: 12%; height: 100%; background: rgb(63, 217, 78); border-radius: 4px; }
.t3.free .fcap { font-size: 13px; color: var(--mid); }
@media (max-width: 900px) {
.s7-three { grid-template-columns: 1fr; }
.t3 .vis { aspect-ratio: 16 / 9; }
}
.s7-phil { gap: 18px; }
.s7 .s7-phil .big3 { font-size: clamp(40px, 7vw, 96px); font-weight: 700; letter-spacing: -0.055em; line-height: 0.95; margin-top: 4px; }
.s7 .s7-phil .intro { font-size: clamp(18px, 2vw, 21px); line-height: 1.6; max-width: 38em; }
.steps7 { display: flex; flex-direction: column; margin-top: 10px; }
.steps7 li { box-shadow: inset 0 1px 0 var(--line); }
.steps7 li:last-child { box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.steps7 summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 64px minmax(0px, 1fr) auto; gap: 6px 18px; align-items: baseline; padding: 22px 0px; }
.steps7 summary::-webkit-details-marker { display: none; }
.steps7 .n { font-size: clamp(32px, 4vw, 48px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--mid); }
.steps7 .st { display: flex; flex-direction: column; gap: 6px; }
.steps7 .st b { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.03em; }
.steps7 .lead { font-size: 17px; line-height: 1.55; max-width: 44em; }
.steps7 .rd { font-size: 14px; font-weight: 700; color: var(--link); white-space: nowrap; }
.steps7 details[open] .rd { visibility: hidden; }
.steps7 details > p { padding: 0px 0px 26px 82px; font-size: 17px; line-height: 1.65; max-width: 46em; }
@media (max-width: 620px) {
.steps7 summary { grid-template-columns: 44px minmax(0px, 1fr); }
.steps7 .rd { grid-column: 2; }
.steps7 details > p { padding-left: 62px; }
}
.l25 { margin-top: 28px; display: grid; grid-template-columns: 240px minmax(0px, 1fr); gap: 28px; align-items: center; padding: 24px; border-radius: 18px; background: rgba(255, 255, 255, 0.04); box-shadow: rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset; }
.l25-cover { aspect-ratio: 3 / 4; border-radius: 12px; background: radial-gradient(80% 60% at 30% 20%, rgba(111, 207, 214, 0.2), rgba(111, 207, 214, 0) 70%), rgb(0, 0, 0); box-shadow: rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.9) 0px 30px 60px -30px; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; gap: 8px; }
.l25-cover b { font-size: 72px; letter-spacing: -0.06em; line-height: 0.9; }
.l25-cover b span { color: var(--link); }
.l25-cover small { font-size: 15px; font-weight: 700; line-height: 1.3; }
.l25-tx { display: flex; flex-direction: column; gap: 14px; }
.l25-tx h3 { font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -0.035em; line-height: 1.1; }
.l25-tx > p { font-size: 17px; line-height: 1.55; }
.l25-tx .fine { margin-top: -4px; }
.l25-ok { font-size: 15px; color: var(--link); }
.l25-ok a { color: var(--ink); }
@media (max-width: 700px) {
.l25 { grid-template-columns: 1fr; }
.l25-cover { max-width: 200px; }
}
.s7-mem { margin-top: 96px; overflow: hidden; border-block: 1px solid rgb(17, 17, 20); }
.s7-mem .in { max-width: 1180px; margin-inline: auto; padding: 72px 20px; display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.05fr); gap: 32px 56px; align-items: center; }
.s7-mem .copy { display: flex; flex-direction: column; gap: 20px; }
.s7-mem .kick { font-size: 16px; color: var(--mid); }
.s7-mem h2 { font-size: clamp(38px, 5.4vw, 72px); letter-spacing: -0.05em; line-height: 0.98; }
.s7-mem .lead { font-size: 19px; line-height: 1.55; color: var(--ink); }
.s7-mem .eq { font-size: clamp(24px, 3vw, 34px); }
.s7-mem .eq7 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block: 6px; }
.s7-mem .eq7 span { padding: 14px 18px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.08) 0px 1px 0px inset; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.s7-mem .eq7 i { font-style: normal; font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; color: var(--link); line-height: 1; }
@media (max-width: 620px) {
.s7-mem .eq7 { flex-direction: column; align-items: stretch; gap: 6px; }
.s7-mem .eq7 span { padding: 16px 18px; font-size: 26px; }
.s7-mem .eq7 i { align-self: center; font-size: 20px; }
}
.s7-mem ol { display: flex; flex-direction: column; gap: 12px; }
.s7-mem ol li { font-size: 17px; line-height: 1.5; color: var(--ink); }
.s7-mem .fine { margin-top: -8px; }
.s7-mem .art { position: relative; }
.s7-mem .art::before { content: ""; position: absolute; inset: -10%; background: radial-gradient(closest-side, rgba(111, 207, 214, 0.14), rgba(111, 207, 214, 0)); pointer-events: none; }
.s7-mem .art .card { display: block; position: relative; }
.s7-mem .art img { width: 100%; max-width: 620px; margin-inline: auto; mask-image: radial-gradient(closest-side, rgb(0, 0, 0) 80%, transparent 100%); transition: transform 0.3s ease-out; }
.s7-mem .art .card:hover img { transform: scale(1.02); }
@media (max-width: 900px) {
.s7-mem .in { grid-template-columns: 1fr; padding-block: 48px; }
.s7-mem .art { order: -1; }
}
.dcbtn { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 18px; border-radius: 10px; background: rgb(88, 101, 242); font-weight: 700; font-size: 15px; transition: background-color 0.15s ease-out; color: rgb(255, 255, 255) !important; text-decoration: none !important; }
.dcbtn:hover { background: rgb(71, 82, 196); }
.dcbtn svg { width: 20px; height: 16px; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) {
.t3, .t3 .vis img, .s7-mem .art img { transition: none; }
}
.ymarq.is-all { animation: 0.45s ease-out 0s 1 normal none running yin; }
@keyframes yin { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.ynote { align-self: center; font-size: 16px; color: var(--ink); margin-top: 6px; }
.mm-stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; --sk1: rgba(0,255,190,.95); --sk2: rgba(150,90,255,.85); --sk3: rgba(40,200,255,.9); --sk4: rgba(255,90,200,.7); --plat-op: .10; --face: linear-gradient(165deg,#050b12,#02040a); --mark: rgba(238,246,255,.95); --skin-rgb: 0,255,190; --rim-rgb: 0,255,190; --rim-core: 158,255,230; }
.mm-stage.big { height: clamp(420px, 44vw, 600px); margin-bottom: 70px; }
.mm-stage.small { height: 80%; }
.mm-wrap { position: relative; display: block; height: 100%; aspect-ratio: 33 / 43; max-width: 100%; border-radius: 22px; animation: 14s ease-in-out 0s infinite normal none running mmTilt; will-change: transform; box-shadow: 0 12px 38px rgba(0,0,0,0.28), 0 0 10px rgba(255,255,255,0.46), 0 0 32px rgba(232,246,255,0.27), 0 0 72px rgba(var(--skin-rgb),0.20), 0 0 140px rgba(var(--skin-rgb),0.10); }
.mm-stage.small .mm-wrap { border-radius: 12px; }
@keyframes mmTilt { 
  0%, 100% { transform: perspective(1100px) rotateY(-4.5deg); }
  50% { transform: perspective(1100px) rotateY(4.5deg); }
}
.mm-card { position: absolute; inset: 0px; border-radius: inherit; background: var(--face); box-shadow: rgba(255, 255, 255, 0.22) 0px 1px 0px inset; clip-path: inset(0px round 22px); contain: paint; }
.mm-stage.small .mm-card { clip-path: inset(0px round 12px); }
.mm-liq { position: absolute; inset: -28%; pointer-events: none; z-index: 0; filter: blur(46px) saturate(1.5); }
.mm-stage.small .mm-liq { filter: blur(22px) saturate(1.5); }
.mm-b { position: absolute; border-radius: 50%; mix-blend-mode: screen; will-change: transform; }
.mm-b1 { width: 94%; height: 72%; left: -12%; top: -14%; background: radial-gradient(circle, var(--sk1), transparent 66%); animation: 13s ease-in-out 0s infinite normal none running mmD1; }
.mm-b2 { width: 150%; height: 120%; left: -25%; top: -8%; background: radial-gradient(circle, var(--sk2), transparent 66%); opacity: 0.82; animation: 16s ease-in-out 0s infinite normal none running mmD2; }
.mm-b3 { width: 98%; height: 76%; right: -14%; bottom: -16%; background: radial-gradient(circle, var(--sk3), transparent 64%); animation: 14s ease-in-out 0s infinite normal none running mmD3; }
.mm-b5 { width: 66%; height: 54%; right: 4%; top: 28%; background: radial-gradient(circle, var(--sk4), transparent 68%); opacity: 0.5; animation: 19s ease-in-out 0s infinite reverse none running mmD2; }
@keyframes mmD1 { 
  0%, 100% { transform: translate(0px, 0px) scale(1); }
  50% { transform: translate(5%, 4%) scale(1.07); }
}
@keyframes mmD2 { 
  0%, 100% { transform: translate(0px, 0px) scale(1); }
  50% { transform: translate(-4%, 5%) scale(1.05); }
}
@keyframes mmD3 { 
  0%, 100% { transform: translate(0px, 0px) scale(1); }
  50% { transform: translate(4%, -4%) scale(1.08); }
}
.mm-iri { position: absolute; inset: -30%; pointer-events: none; z-index: 1; background: conic-gradient(from 210deg at 50% 40%, rgba(220, 225, 255, 0.1), rgba(167, 139, 250, 0.07), rgba(94, 162, 247, 0.05), rgba(235, 235, 245, 0.09), rgba(220, 225, 255, 0.1)); filter: blur(22px); mix-blend-mode: screen; opacity: 0.55; }
.mm-sheen { position: absolute; inset: 0px; border-radius: inherit; pointer-events: none; z-index: 2; background: radial-gradient(150% 45% at 50% -12%, rgba(255, 255, 255, 0.1), transparent 56%); mix-blend-mode: screen; opacity: 0.9; }
.mm-burn { position: absolute; inset: 0px; border-radius: inherit; z-index: 3; pointer-events: none; mix-blend-mode: screen; padding: 1.5px; background: conic-gradient(rgba(212, 224, 255, 0) 0deg, rgba(212, 224, 255, 0) 70deg, rgba(234, 240, 255, 0.98) 135deg, rgba(212, 224, 255, 0) 200deg, rgba(212, 224, 255, 0) 250deg, rgba(234, 240, 255, 0.98) 315deg, rgba(212, 224, 255, 0) 360deg); mask: linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px) content-box exclude, linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px); animation: 10.8s ease-in-out 0s infinite normal none running mmGlim; }
@keyframes mmGlim { 
  0%, 100% { opacity: 0.216; }
  50% { opacity: 0.3; }
}
.mm-plat { position: absolute; inset: -12%; z-index: 4; pointer-events: none; opacity: var(--plat-op); background: radial-gradient(58% 52% at 50% 42%, rgba(255, 255, 255, 0.92) 0%, rgba(226, 236, 248, 0.62) 46%, rgba(190, 208, 228, 0.26) 78%, rgba(190, 208, 228, 0) 100%); filter: blur(20px) saturate(1.04); }
.mm-tint { position: absolute; inset: 0px; border-radius: inherit; z-index: 5; pointer-events: none; opacity: 0.217; background: radial-gradient(58% 50% at 26% 16%, rgba(58, 217, 245, 0.85) 0%, rgba(58, 217, 245, 0) 70%), radial-gradient(58% 50% at 76% 84%, rgba(63, 217, 78, 0.85) 0%, rgba(63, 217, 78, 0) 70%); }
.mm-rim { position: absolute; inset: 0px; border-radius: inherit; z-index: 6; pointer-events: none; box-shadow: inset 0 0 0 4.2px rgba(var(--rim-core), 1), inset 0 0 16px 3px rgba(var(--rim-core), 1), inset 0 0 38px rgba(var(--rim-rgb), 0.78), inset 0 0 78px rgba(var(--rim-rgb), 0.46), inset 0 0 150px rgba(var(--rim-rgb), 0.24); }
.mm-stage.small .mm-rim { box-shadow: inset 0 0 0 2.2px rgba(var(--rim-core), 1), inset 0 0 8px 2px rgba(var(--rim-core), 1), inset 0 0 20px rgba(var(--rim-rgb), 0.78), inset 0 0 40px rgba(var(--rim-rgb), 0.46), inset 0 0 80px rgba(var(--rim-rgb), 0.24); }
.mm-body { position: absolute; inset: 0px; z-index: 7; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.mm-emblem { width: 42%; height: auto; display: block; fill: var(--mark); filter: drop-shadow(rgba(255, 255, 255, 0.75) 0px 1.5px 0px) drop-shadow(rgba(0, 0, 0, 0.3) 0px -1.5px 1.5px); }
.mm-floor { position: absolute; left: 50%; top: 100%; transform: translateX(-50%) scaleY(-1); width: 120%; height: 42%; z-index: -1; pointer-events: none; overflow: hidden; border-radius: 22px; opacity: 0.62; filter: blur(20px) saturate(1.5) brightness(0.92); mask-image: linear-gradient(to top, transparent 0%, rgb(0, 0, 0) 14%, rgba(0, 0, 0, 0.48) 52%, transparent 82%), linear-gradient(to right, transparent 3%, rgb(0, 0, 0) 30%, rgb(0, 0, 0) 70%, transparent 97%); mask-composite: intersect; }
.mm-floor .mm-b { animation: auto ease 0s 1 normal none running none; }
.mm-fcard { position: absolute; left: 8.333%; right: 8.333%; bottom: 0px; height: 238%; border-radius: 22px; overflow: hidden; background: var(--face); }
.mm-stage.small .mm-floor { display: none; }
.mm-room { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 210%; height: 170%; z-index: -2; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(var(--skin-rgb), 0.20) 0%, rgba(var(--skin-rgb), 0.07) 42%, rgba(var(--skin-rgb), 0) 72%); filter: blur(26px); }
.mm-stage.small .mm-room { width: 150%; height: 150%; }
.s7-mem .art::before { display: none; }
.s7-mem .art .card { display: block; }
.s7-mem .art .card:hover .mm-wrap { animation-play-state: paused; }
.t3.mem .vis { isolation: isolate; }
@media (prefers-reduced-motion: reduce) {
.mm-wrap, .mm-b, .mm-burn { animation: auto ease 0s 1 normal none running none; }
}
.ybtns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ybtns .ytbtn { align-self: auto; }
.ywall { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.ywall-top { font-size: clamp(22px, 3vw, 34px); font-weight: 700; letter-spacing: -0.03em; }
.ywall-cols { columns: 250px 4; column-gap: 12px; }
.ywall-cols .yc { break-inside: avoid; margin-bottom: 12px; }
.ywall > .ytbtn { align-self: center; }
.mcard { position: relative; width: 100%; aspect-ratio: 320 / 452; border-radius: 14px; }
.mcard__gl { position: absolute; display: block; pointer-events: none; }
.mcard--nogl { background: linear-gradient(165deg, rgb(16, 20, 24), rgb(7, 9, 12)); box-shadow: rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset; }
.mcard__m { position: absolute; left: 50%; top: 50%; width: 37%; transform: translate(-50%, -50%); pointer-events: none; fill: rgba(236, 240, 246, 0.62); transition: fill 1s cubic-bezier(0.2, 0.7, 0.2, 1); filter: drop-shadow(rgba(255, 255, 255, 0.3) 0px 1.5px 0px) drop-shadow(rgba(0, 0, 0, 0.6) 0px -1.5px 0.75px); }
.mcard--darkmark .mcard__m { filter: drop-shadow(rgba(255, 255, 255, 0.75) 0px 1.5px 0px) drop-shadow(rgba(0, 0, 0, 0.3) 0px -1.5px 0.75px); }
.mcard__name, .mcard__cortex { display: none; }
.mm2 { position: relative; display: flex; align-items: center; justify-content: center; }
.mm2.big { padding: 80px 0px; }
.mm2.big .mm2-sway { width: clamp(260px, 30vw, 400px); }
.mm2.small { height: 100%; width: 100%; }
.mm2.small .mm2-sway { height: 80%; aspect-ratio: 320 / 452; }
.mm2-sway { position: relative; display: block; animation: 12s ease-in-out 0s infinite normal none running mm2Sway; }
@keyframes mm2Sway { 
  0%, 100% { transform: perspective(1400px) rotateY(-2.6deg) rotateX(0.6deg); }
  50% { transform: perspective(1400px) rotateY(2.6deg) rotateX(-0.6deg); }
}
.mm2-card { display: block; }
.mm2-halo { position: absolute; left: 50%; top: 50%; width: 240%; height: 170%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; opacity: 0.85; background: radial-gradient(closest-side, rgba(235, 255, 250, 0.5), rgba(0, 255, 190, 0.26) 26%, rgba(40, 200, 255, 0.16) 48%, rgba(150, 90, 255, 0.07) 70%, rgba(0, 0, 0, 0) 100%); }
.mm2.small .mm2-halo { width: 200%; height: 150%; opacity: 0.7; }
.s7-mem .art .card:hover .mm2-sway { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.mm2-sway { animation: auto ease 0s 1 normal none running none; }
}
@media (max-width: 820px) {
.s7-me { grid-template-columns: minmax(0px, 1fr) clamp(112px, 31vw, 230px); grid-template-areas: "h ph" "l l" "b b"; gap: 22px 18px; align-items: center; padding-top: 36px; }
.s7-me .tx { display: contents; }
.s7-me h1 { grid-area: h; font-size: clamp(40px, 10.6vw, 76px); line-height: 0.95; }
.s7-me .lede { grid-area: l; }
.s7-me .btns { grid-area: b; }
.s7-me .ph { grid-area: ph; order: 0; flex-direction: column; align-items: center; gap: 10px; }
.s7-me .ph img { max-width: 100%; margin: 0px auto; }
.s7-me .ph .tag { text-align: center; font-size: clamp(13px, 3.4vw, 16px); max-width: 10em; }
.s7-me.mB { grid-template-areas: "h h" "l ph" "b b"; align-items: center; }
.s7-me.mB h1 { font-size: clamp(44px, 11.6vw, 84px); }
.s7-me.mB .lede { font-size: 18px; }
}
.s1-top .bar { border-bottom: 0px; }
.s7 main { overflow-x: clip; }
.s7-mission h2 { font-size: clamp(38px, 5vw, 64px); }
.s7 .ysec { padding-top: clamp(72px, 9vw, 112px); }
.s7 .ytw-head { gap: 12px; }
.s7 .ytw-head h2, .s7-about .sec-head h2 { font-size: clamp(30px, 4.4vw, 52px); letter-spacing: -0.045em; line-height: 1.04; }
.s7 .ytw-head p { font-size: 16px; color: var(--ink); }
.s7 .ybtns { gap: 12px; margin-top: 10px; }
.s7 .ytbtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0px 22px; border: 0px; border-radius: 12px; background: rgb(22, 22, 24); color: var(--ink); font: 700 16px/1 var(--arial); letter-spacing: -0.01em; cursor: pointer; box-shadow: rgba(255, 255, 255, 0.09) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.06) 0px 1px 0px inset; transition: background-color 0.15s, transform 0.15s; }
.s7 .ytbtn:hover { background: rgb(32, 32, 36); }
.s7 .ytbtn[hidden] { display: none; }
.s7 .ytbtn:active { transform: scale(0.98); }
.s7 #ytallbtn { background: rgb(242, 242, 243); color: rgb(0, 0, 0); box-shadow: none; padding: 0px 24px; }
.s7 #ytallbtn:hover { background: rgb(255, 255, 255); }
.s7 .ytbtn .chev { width: 18px; height: 18px; fill: none; stroke: currentcolor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s ease-out; }
.s7 .ytbtn[aria-expanded="true"] .chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
.s7 .ytbtn, .s7 .ytbtn .chev { transition: none; }
}
.s7-me .ph .say { max-width: none; display: flex; flex-direction: column; align-items: center; gap: 0px; margin: 0px 0px -4px; }
.s7-me .ph .say span { display: block; font-family: Caveat, "Bradley Hand", "Segoe Print", cursive; font-weight: 700; font-size: clamp(26px, 2.6vw, 38px); line-height: 0.98; letter-spacing: 0px; text-align: center; max-width: 8.5em; color: var(--ink); transform: rotate(-6deg); }
.s7-me .ph .say-arrow { width: 46px; height: 34px; margin: 2px 0px 0px 34%; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 820px) {
.s7-me .ph .say span { font-size: clamp(19px, 5vw, 34px); max-width: 7.5em; }
.s7-me .ph .say-arrow { width: 30px; height: 22px; margin: 2px 0px -2px 30%; stroke-width: 2.2; }
.s7-me .ph .tag.say { max-width: none; }
}
.s7-me .ph .say { margin: 0px 0px 18px; }
.s7-me .ph .say .bubble { position: relative; display: block; background: rgb(247, 247, 245); color: rgb(11, 11, 12); font-family: Caveat, "Bradley Hand", "Segoe Print", cursive; font-weight: 700; font-size: clamp(24px, 2.3vw, 32px); line-height: 1; text-align: center; max-width: 9em; padding: 16px 22px 18px; border-radius: 30px 34px 28px 32px / 32px 28px 34px 30px; transform: rotate(-4deg); box-shadow: rgba(0, 0, 0, 0.45) 0px 10px 30px; }
.s7-me .ph .say .bubble::after { content: ""; position: absolute; left: 40%; bottom: -24px; width: 30px; height: 28px; background: inherit; clip-path: polygon(0px 0px, 100% 0px, 38% 100%); }
@media (max-width: 820px) {
.s7-me .ph .say { margin: 0px 0px 12px; }
.s7-me .ph .say .bubble { font-size: clamp(17px, 4.6vw, 28px); max-width: 8em; padding: 10px 14px 12px; border-radius: 20px 24px 18px 22px / 22px 18px 24px 20px; transform: rotate(-4deg); }
.s7-me .ph .say .bubble::after { bottom: -16px; width: 20px; height: 18px; }
}
.s7-me .ph .say { margin: -26px 0px 0px; position: relative; z-index: 1; }
.s7-me .ph .say .bubble { background: rgb(0, 0, 0); color: var(--ink); border: 1.5px solid rgba(242, 242, 243, 0.9); border-radius: 18px; box-shadow: none; transform: rotate(-2deg); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.02; max-width: 10em; padding: 12px 20px 14px; }
.s7-me .ph .say .bubble::after { content: ""; left: 50%; top: -9px; bottom: auto; width: 16px; height: 16px; margin-left: -8px; background: rgb(0, 0, 0); clip-path: none; border-left: 1.5px solid rgba(242, 242, 243, 0.9); border-top: 1.5px solid rgba(242, 242, 243, 0.9); border-top-left-radius: 3px; transform: rotate(45deg); }
@media (max-width: 820px) {
.s7-me .ph .say { margin: -2px 0px 0px; }
.s7-me .ph .say .bubble { font-size: clamp(17px, 4.4vw, 26px); max-width: 8em; padding: 8px 12px 10px; border-radius: 14px; transform: rotate(-2deg); }
.s7-me .ph .say .bubble::after { top: -7px; width: 12px; height: 12px; margin-left: -6px; }
}
.s7-me .ph .say .bubble { font-family: var(--arial); font-weight: 700; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.3; letter-spacing: -0.01em; max-width: 14em; padding: 12px 18px 13px; }
@media (max-width: 820px) {
.s7-me .ph .say .bubble { font-size: clamp(13px, 3.5vw, 18px); line-height: 1.3; max-width: 11em; padding: 8px 11px 9px; }
}
@media (max-width: 820px) {
.s7-me h1 .l { display: block; white-space: nowrap; }
.s7-me h1 { font-size: clamp(32px, -11px + 12.8vw, 64px); }
}
/* ======================= malikpeace.com additions (2026-10-24) ======================= */
/* header: name, pages, then Flash bang mode + Desktop mode */
.s1-top .bar { gap: 8px 18px; }
.s1-top nav { margin-right: auto; margin-left: 12px; }
.mp-acts { display: flex; align-items: center; gap: 8px; }
.mp-act { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border: 0; border-radius: 999px; font: 700 13.5px/1 var(--arial, Arial, sans-serif); letter-spacing: -0.005em; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .12s ease-out, background-color .2s ease-out, color .2s ease-out; }
.mp-act svg { width: 15px; height: 15px; flex: none; }
.mp-act:active { transform: scale(0.96); }
.mp-act.fb { background: var(--ink); color: var(--bg); }
/* both labels (each with its icon) share one cell, so the button keeps one width and a fast run of taps can't miss it as the words change */
.mp-act .lbl { display: inline-grid; justify-items: center; }
.mp-act .lbl > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 7px; }   /* icon + words centred together */
html[data-theme="light"] .mp-act .lb-l, html:not([data-theme="light"]) .mp-act .lb-d { visibility: hidden; }
.mp-act.dm { background: var(--fill2, rgba(255,255,255,.085)); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.mp-act:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
@media (max-width: 720px) {
  .s1-top .bar { padding-block: 10px; }
  .s1-top .name { order: 1; }
  .mp-acts { order: 2; }
  .s1-top nav { order: 3; width: 100%; margin: 0; }
  .mp-act { height: 32px; padding: 0 11px; font-size: 13px; }
  .mp-act.dm .lbl { display: none; }
  .mp-act.dm { width: 32px; padding: 0; justify-content: center; }
}

/* switching modes: the new mode grows out of the centre in a circle, a small dot that speeds up like the Action orb
   ((32^f - 1) / 31; 71% of the circle's reference box is half the screen's diagonal). While it swaps, every colour fade
   is off, so a fast run of taps can never catch the page half way between black and white (grey). */
html.mp-swap *, html.mp-swap *::before, html.mp-swap *::after { transition: none !important; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.mp-swap::view-transition-new(root) { animation: mp-orb .5s linear both; }
/* taps go through the circle to the real page, so mashing the button keeps switching instead of being swallowed */
::view-transition { pointer-events: none; }
@keyframes mp-orb {
  0% { clip-path: circle(calc(6px + (71% - 2px) * 0.0000) at 50% 50%); }
  5% { clip-path: circle(calc(6px + (71% - 2px) * 0.0061) at 50% 50%); }
  10% { clip-path: circle(calc(6px + (71% - 2px) * 0.0134) at 50% 50%); }
  15% { clip-path: circle(calc(6px + (71% - 2px) * 0.0220) at 50% 50%); }
  20% { clip-path: circle(calc(6px + (71% - 2px) * 0.0323) at 50% 50%); }
  25% { clip-path: circle(calc(6px + (71% - 2px) * 0.0445) at 50% 50%); }
  30% { clip-path: circle(calc(6px + (71% - 2px) * 0.0590) at 50% 50%); }
  35% { clip-path: circle(calc(6px + (71% - 2px) * 0.0762) at 50% 50%); }
  40% { clip-path: circle(calc(6px + (71% - 2px) * 0.0968) at 50% 50%); }
  45% { clip-path: circle(calc(6px + (71% - 2px) * 0.1212) at 50% 50%); }
  50% { clip-path: circle(calc(6px + (71% - 2px) * 0.1502) at 50% 50%); }
  55% { clip-path: circle(calc(6px + (71% - 2px) * 0.1847) at 50% 50%); }
  60% { clip-path: circle(calc(6px + (71% - 2px) * 0.2258) at 50% 50%); }
  65% { clip-path: circle(calc(6px + (71% - 2px) * 0.2746) at 50% 50%); }
  70% { clip-path: circle(calc(6px + (71% - 2px) * 0.3327) at 50% 50%); }
  75% { clip-path: circle(calc(6px + (71% - 2px) * 0.4018) at 50% 50%); }
  80% { clip-path: circle(calc(6px + (71% - 2px) * 0.4839) at 50% 50%); }
  85% { clip-path: circle(calc(6px + (71% - 2px) * 0.5815) at 50% 50%); }
  90% { clip-path: circle(calc(6px + (71% - 2px) * 0.6977) at 50% 50%); }
  95% { clip-path: circle(calc(6px + (71% - 2px) * 0.8358) at 50% 50%); }
  100% { clip-path: circle(calc(6px + (71% - 2px) * 1.0000) at 50% 50%); }
}

/* comments: grab a row and fling it; tap one to pin it */
.ymarq .row { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.ymarq .row.grab { cursor: grabbing; }
/* cards off screen are skipped (site.js pins each row's height first); width stays the card's own */
.ymarq .row.cv > .yc { content-visibility: auto; contain-intrinsic-size: auto 262px auto 120px; }
.pin7 { position: fixed; inset: 0; z-index: 2147482000; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top, 0px)) 16px max(20px, env(safe-area-inset-bottom, 0px)); background: rgba(0, 0, 0, 0); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); transition: background-color .22s ease-out, backdrop-filter .22s ease-out, -webkit-backdrop-filter .22s ease-out; }
.pin7.on { background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.pin7-card { position: relative; width: min(560px, 100%); opacity: 0; transform: scale(.92) translateY(10px); transition: opacity .22s ease-out, transform .26s cubic-bezier(.2, .8, .2, 1); }
.pin7.on .pin7-card { opacity: 1; transform: none; }
.pin7 .yc { padding: 22px 22px 18px; border-radius: 16px; grid-template-columns: 48px minmax(0, 1fr); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.pin7 .yc .av { width: 48px; height: 48px; background-size: 1536px auto; }
.pin7 .yc .tx { font-size: 20px; line-height: 1.45; -webkit-line-clamp: unset; display: block; }
.pin7 .yc .hd b { font-size: 15px; }
.pin7-x { position: absolute; top: -14px; right: -10px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.pin7-x svg { width: 16px; height: 16px; }

/* email forms (Beehiiv, the same list as mementoapp.co) */
.bhwrap { margin-top: 4px; max-width: 460px; }
.bh { min-height: 56px; --bh-inset: 19px; width: calc(100% + var(--bh-inset) * 2) !important; max-width: none !important; margin-left: calc(-1 * var(--bh-inset)) !important; }
.bh iframe { width: 100%; border: 0; background: transparent; color-scheme: normal; }

@media (prefers-reduced-motion: reduce) { .mp-act, .pin7, .pin7-card { transition: none; } }

/* ======================= Flash bang mode: the light theme ======================= */
html[data-theme="light"] { color-scheme: light; background: #fff; }
html[data-theme="light"] body.s1.s7 {
  --bg: #ffffff; --ink: #0b0b0c; --mid: #5c5c66; --line: #e3e3e8; --soft: #f3f3f5; --field: #f4f4f6; --link: #0a8189;
  --topbg: rgba(255, 255, 255, 0.86); --text: #2b2b31; --fill: rgba(0, 0, 0, .035); --fill2: rgba(0, 0, 0, .06); --hi: inset 0 1px 0 rgba(255, 255, 255, .7);
  --empty: #e7e7ea; --now: #0a8189; --doom: #0a8189;
  background: #fff; color: var(--ink);
}
html[data-theme="light"] .s7 .yc { background: #f4f4f6; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
html[data-theme="light"] .s7 #ytallbtn { background: #0b0b0c; color: #fff; }
html[data-theme="light"] .s7 #ytallbtn:hover { background: #26262a; }
/* light mode keeps the book cover dark (it is an object), and gives the sign-up form a dark plate so Beehiiv's dark form reads */
html[data-theme="light"] .l25-cover { color: #f2f2f3; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 24px 50px -18px rgba(0, 0, 0, .35); }
html[data-theme="light"] .l25-cover b span { color: #6fcfd6; }
html[data-theme="light"] .bhwrap { background: #0b0b0c; border-radius: 16px; padding: 6px 4px 2px; }

/* the mode button: Desktop mode on a computer, Mobile mode on a phone (same page, it lays itself out per device) */
.mp-act .ic-phone { display: none; }
@media (max-width: 899px) { .mp-act .ic-mac { display: none; } .mp-act .ic-phone { display: block; } }

/* the bridge's second paragraph (his line break) */
.s7 .s7-val .bridge2 { margin-top: .7em; }

/* "look at anyone great": real people in three rows drifting sideways (grab one and fling it). Each card is just the
   photo, the name, what they relentlessly did, and what came of it (Malik 2026-10-27: no subtext, nothing to hover,
   and the rows never stop under the mouse, like the comments). */
.great7 { margin-top: clamp(56px, 7vw, 104px); display: flex; flex-direction: column; gap: 26px; }
.great-h { margin: 0; font-size: clamp(24px, 3vw, 36px); font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; max-width: 24em; text-wrap: balance; color: var(--ink); }
.great-row { width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding-block: 4px 6px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%); }
.great-row .row { display: flex; gap: 12px; width: max-content; list-style: none; margin: 0; padding: 0; align-items: stretch; animation: ymove var(--dur, 120s) linear infinite; will-change: transform; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.great-row .row.rev { animation-direction: reverse; }
.great-row .row.grab { cursor: grabbing; }
.great-row img { -webkit-user-drag: none; pointer-events: none; }
.gp { flex: 0 0 auto; width: 344px; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0 16px; align-items: start; align-content: start; padding: 14px 18px 16px 14px; border-radius: 16px; background: var(--fill, rgba(255, 255, 255, .05)); box-shadow: inset 0 0 0 1px var(--line); }
.gp-ph { grid-row: 1 / span 3; display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #111113; }
.gp-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }   /* each photo in its own colours (black and white ones stay that way) */
.gp-ph img.me { object-fit: contain; object-position: center bottom; padding: 8px 6px 0; }
.gp-n { font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.gp-did { margin-top: 6px; font-size: 14px; line-height: 1.42; color: var(--text, var(--ink)); }
.gp-got { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.35; font-weight: 700; letter-spacing: -0.005em; color: var(--ink); }
@media (max-width: 620px) {
  .gp { width: 300px; grid-template-columns: 70px minmax(0, 1fr); gap: 0 13px; padding: 12px 14px 14px 12px; }
  .gp-did { font-size: 13.5px; }
  .gp-got { font-size: 14px; }
}
.great-cr { font-size: 12.5px; color: var(--mid); }
.great-cr summary { cursor: pointer; width: max-content; white-space: nowrap; }
.great-cr p { margin: 8px 0 0; line-height: 1.6; max-width: 70em; }
.great-cr a { color: inherit; }
@media (prefers-reduced-motion: reduce) { .great-row { overflow-x: auto; } .great-row .row { animation: none; } }

/* ======================= alternating bands (Malik 2026-10-25): sections switch between black and white for contrast =======================
   dark mode:  hero B / mission W / comments B / the lock-in story W (with the people row B inside it) / tools B / 25+5 W / Memento B / footer W
   Flash bang: each band flips, except the Memento section (always dark) and the 25+5 and footer (they stay on the page colour) */
.band-tok-w, html:not([data-theme="light"]) :is(.s7-mission, .s7-val, .l25, .s1-foot), html[data-theme="light"] .great7 {
  --bg: #ffffff; --ink: #0b0b0c; --mid: #5c5c66; --line: #e3e3e8; --soft: #f3f3f5; --field: #f4f4f6; --link: #0a8189; --text: #2b2b31;
  --fill: rgba(0, 0, 0, .035); --fill2: rgba(0, 0, 0, .06); --hi: inset 0 1px 0 rgba(255, 255, 255, .7); --u: rgba(0, 0, 0, .35);
  color: var(--ink);
}
.band-tok-b, html:not([data-theme="light"]) .great7, html[data-theme="light"] :is(.s7-mission, .s7-val) {
  --bg: #000000; --ink: #f2f2f3; --mid: #a7a7ad; --line: #1d1d21; --soft: rgba(255, 255, 255, .05); --field: #0a0a0b; --link: #6fcfd6; --text: #dcdce1;
  --fill: rgba(255, 255, 255, .05); --fill2: rgba(255, 255, 255, .085); --hi: inset 0 1px 0 rgba(255, 255, 255, .07); --u: rgba(255, 255, 255, .4);
  color: var(--ink);
}
/* the band paints edge to edge without changing the layout (the shadow never adds scroll width) */
.s7-mission, .s7-val, .great7, html:not([data-theme="light"]) :is(.l25, .s1-foot) {
  background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax);
}
/* breathing room inside every band, and no stray gaps between them */
.s7-me { padding-bottom: clamp(56px, 8vw, 104px); }
.s7-mission { padding-block: clamp(64px, 9vw, 120px); }
.s7 .ysec { padding-block: clamp(64px, 9vw, 120px); }
.s7-val { padding-block: clamp(64px, 9vw, 120px); }
.great7 { margin-block: clamp(56px, 7vw, 104px) 0; padding-block: clamp(56px, 8vw, 104px); }
.s7-tools { padding-block: clamp(64px, 9vw, 120px) clamp(64px, 9vw, 120px); }
.s7-mem { margin-top: 0; }
.pad-end { display: none; }
html:not([data-theme="light"]) .s7-tools { padding-bottom: 0; }
html:not([data-theme="light"]) .l25 { margin-top: clamp(64px, 8vw, 112px); padding-block: clamp(56px, 8vw, 104px); padding-inline: 0; border-radius: 0; }
html:not([data-theme="light"]) .s1-foot { margin-top: 0; border-top: 0; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
html:not([data-theme="light"]) .s1-foot .wide { padding-block: clamp(48px, 7vw, 88px) 24px; }
/* things that must read on either band */
.l25-cover { color: #f2f2f3; }
.l25-cover b span { color: #6fcfd6; }
.p7s__more { text-decoration-color: var(--u, rgba(255, 255, 255, .4)); }
.p7s__n { color: var(--mid); }
html:not([data-theme="light"]) :is(.l25, .s1-foot) .bhwrap { background: #0b0b0c; border-radius: 16px; padding: 6px 4px 2px; }

/* round 2 of the bands: the people row, the lock-in heading and the steps share ONE band (the 25+5 card is off for now)
   dark:  hero B / mission W / comments B / the story W / people + steps B / tools W / Memento B / footer W
   light: hero W / mission B / comments W / the story B / people + steps W / tools W / Memento B / footer W */
html:not([data-theme="light"]) .great7, html[data-theme="light"] .great7 { background: none; box-shadow: none; clip-path: none; }
.great7 { margin-block: 0; padding-block: 0; }
.steps7 { display: flex; flex-direction: column; margin-top: clamp(64px, 9vw, 120px); padding-block: clamp(64px, 9vw, 120px); background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); }
.steps7 .lockin { margin-top: clamp(64px, 8vw, 112px); }
.s7-val { padding-bottom: 0; }
html:not([data-theme="light"]) .steps7 {
  --bg: #000000; --ink: #f2f2f3; --mid: #a7a7ad; --line: #1d1d21; --soft: rgba(255, 255, 255, .05); --field: #0a0a0b; --link: #6fcfd6; --text: #dcdce1;
  --fill: rgba(255, 255, 255, .05); --fill2: rgba(255, 255, 255, .085); --hi: inset 0 1px 0 rgba(255, 255, 255, .07); --u: rgba(255, 255, 255, .4); color: var(--ink);
}
html[data-theme="light"] .steps7 {
  --bg: #ffffff; --ink: #0b0b0c; --mid: #5c5c66; --line: #e3e3e8; --soft: #f3f3f5; --field: #f4f4f6; --link: #0a8189; --text: #2b2b31;
  --fill: rgba(0, 0, 0, .035); --fill2: rgba(0, 0, 0, .06); --hi: inset 0 1px 0 rgba(255, 255, 255, .7); --u: rgba(0, 0, 0, .35); color: var(--ink);
}
/* the tools sit on the page's own colour in both modes (Malik 2026-10-27: dark with white text in dark mode, white in
   Flash bang), with a hairline above them like the other same-colour neighbours */
html:not([data-theme="light"]) .s7-tools { padding-bottom: clamp(64px, 9vw, 120px); }
.s7-tools { border-top: 1px solid var(--line); }
/* the three tool cards stay dark objects on any band (their visuals and small print are drawn for dark) */
.s7-tools .k7 {
  --bg: #000000; --ink: #f2f2f3; --mid: #a7a7ad; --line: #1d1d21; --soft: rgba(255, 255, 255, .05); --field: #0a0a0b; --link: #6fcfd6; --text: #dcdce1;
  --fill: rgba(255, 255, 255, .05); --fill2: rgba(255, 255, 255, .085); --hi: inset 0 1px 0 rgba(255, 255, 255, .07); --u: rgba(255, 255, 255, .4);
  color: var(--ink); background: #0b0b0d; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 50px -24px rgba(0, 0, 0, .45);
}
/* the 25+5 card links to the lessons (cover and title) */
.l25-cover-a { display: block; text-decoration: none; color: inherit; border-radius: 12px; transition: transform .2s ease-out; }
.l25-cover-a:hover { transform: translateY(-2px) rotate(-.6deg); }
.l25-link { color: inherit; text-decoration: none; }
.l25-link:hover { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 2px; }
@media (prefers-reduced-motion: reduce) { .l25-cover-a { transition: none; } .l25-cover-a:hover { transform: none; } }
/* a step can hold several paragraphs, indents and lists (Malik writes them in edit mode) */
.p7s__body > div > :not(:last-child) { padding-bottom: 14px; }
.p7s__body > div > :is(ul, ol, blockquote) { margin: 0 0 0 52px; padding: 0 0 28px 1.3em; font-size: 17px; line-height: 1.65; color: var(--text); max-width: 40em; opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .36s var(--ease); }
.p7s.open .p7s__body > div > :is(ul, ol, blockquote) { opacity: 1; transform: none; }
.p7s__body > div > blockquote { padding-left: 1.6em; }
.p7s__body :is(blockquote, li) p { margin-left: 0; padding-bottom: 0; opacity: 1; transform: none; font-size: inherit; }
.p7s__body :is(ul, ol) :is(ul, ol), .p7s__body blockquote blockquote { margin: 4px 0; padding: 0 0 0 1.3em; }
.p7s__body li + li { margin-top: 4px; }
@media (min-width: 900px) { .p7s__body > div > :is(ul, ol, blockquote) { margin-left: calc((100% + var(--gp)) * 5 / 12); max-width: min(40em, calc((100% + var(--gp)) * 6 / 12 - var(--gp))); font-size: 19px; padding-bottom: 36px; } }
@media (prefers-reduced-motion: reduce) { .p7s__body > div > :is(ul, ol, blockquote) { transition: none; } }
.p7s__body ul { list-style: disc; } .p7s__body ol { list-style: decimal; } .p7s__body :is(ul, ol) :is(ul, ol) { list-style-type: circle; }
.p7s__body li { display: list-item; border: 0 !important; padding: 0 0 0 .2em; background: none; }
.p7s__body li::before, .p7s__body li::after { content: none !important; }
.p7s__body li::marker { color: var(--mid); }
.p7s__body li { box-shadow: none !important; }

/* "Hello": tap it and it says hello another way. The button is plain heading text; its own line height is tiny so no
   typeface, however tall, can push the heading's lines apart (the letters just draw past it). */
.s7-me h1 .hi { font: inherit; color: inherit; letter-spacing: inherit; line-height: .5; display: inline-block; vertical-align: baseline; white-space: nowrap; background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.s7-me h1 .hi-line { white-space: nowrap; }   /* the comma always stays with the greeting */
.s7-me h1 .hi:focus-visible { outline: 2px solid var(--link); outline-offset: 6px; border-radius: 6px; }
.s7-me h1 .hi.swap { transition: width .26s cubic-bezier(.2, .8, .2, 1); }
.hi-v { display: inline-block; transition: opacity .15s ease-in, filter .15s ease-in, transform .15s ease-in; }
.hi-v.out { opacity: 0; filter: blur(6px); transform: translateY(-.06em); }
.hi-v.in { animation: hi-in .24s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes hi-in { from { opacity: 0; filter: blur(6px); transform: translateY(.08em); } }
.hi-svg svg { display: inline-block; width: 2.96em; height: 1.25em; vertical-align: -.11em; margin-top: -.36em; overflow: visible; }
.hi-svg path { fill: none; stroke: currentColor; stroke-width: 17; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .s7-me h1 .hi.swap, .hi-v { transition: none; } .hi-v.in { animation: none; } }

/* "tools" in the opening line: bold, never underlined */
.s7-me .lede a { color: var(--ink); font-weight: 700; text-decoration: none; }
@media (hover: hover) { .s7-me .lede a:hover { opacity: .72; } }

/* everything readable in both modes (contrast pass 2026-10-27: every text measured against what is behind it, AA or better) */
html[data-theme="light"] .s7 .ytbtn:not(#ytallbtn) { background: #f0f0f2; color: #0b0b0c; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
html[data-theme="light"] .s7 .ytbtn:not(#ytallbtn):hover { background: #e6e6ea; }
html[data-theme="light"] .p7s.open .p7s__n { color: #1c9e31; }   /* the bright green is too pale on white */
.s1.s7 .btn.yt { background: #e6002e; }   /* YouTube red, one step deeper so the white words read */
.s1.s7 .btn.yt:hover { background: #cc0029; }

/* "(good!)" sits on "life" like an exponent: small, tight to the top right of the word, never taller than the line */
.s7 .s7-val .bridge .good { font-size: .38em; margin-left: .05em; vertical-align: baseline; position: relative; top: -1.25em; line-height: 0; }

/* the comments' "Show all" asks first: a plain line and two buttons in place of the usual pair */
.yask { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.yask[hidden] { display: none; }
.s7 .ytbtn.pri { background: #f2f2f3; color: #000; box-shadow: none; padding: 0 24px; }
.s7 .ytbtn.pri:hover { background: #fff; }
html[data-theme="light"] .s7 .ytbtn.pri:not(#ytallbtn) { background: #0b0b0c; color: #fff; box-shadow: none; }
html[data-theme="light"] .s7 .ytbtn.pri:not(#ytallbtn):hover { background: #26262a; }

/* "Show all": every comment drifting sideways in rows all the way down the page; rows off screen skip themselves
   entirely, so a hundred moving rows cost about what ten do */
.ymarq.is-all .row { content-visibility: auto; contain-intrinsic-size: auto 176px; }
@media (max-width: 620px) { .ymarq.is-all .row { contain-intrinsic-size: auto 166px; } }
.yall-top { text-align: center; margin: 0 0 6px; scroll-margin-top: 96px; }
.yall-top[hidden] { display: none; }

/* the Focus Room's card: flat and inverted like the filled room, just the time and the rail of tick marks (Malik
   2026-10-27: no gradient, the Focus Room is flat). Four tool cards sit two by two on wide screens. */
.k7fr { position: absolute; inset: 22px 22px 16px; overflow: hidden; border-radius: 12px; background: #f2f2f3; display: flex; align-items: flex-end; padding: 0 26px 26px; }
.k7fr__rail { position: absolute; right: 22px; top: 24px; bottom: 24px; width: 10px; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .26) 0 1.5px, transparent 1.5px 10px); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); }
.k7fr__rail::after { content: ""; position: absolute; right: 0; top: 58%; width: 20px; height: 2px; border-radius: 1px; background: #0b0b0c; }
.k7fr__n { position: relative; font-size: clamp(52px, 5vw, 72px); font-weight: 700; letter-spacing: -0.05em; line-height: .9; color: #0b0b0c; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .s7 .k7-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ======================= the tool cards, one system (Malik 2026-10-27: "make this look a LOT better") =======================
   Every card's picture is the same tile: inset 22px, radius 12px, one big thing anchored bottom left. Tiles alternate
   light and dark like a checkerboard (Life Audit light, 25+5 dark / Freedom Number dark, Focus Room light). */
.k7la, .k7bk, .k7fn, .k7fr { position: absolute; inset: 22px 22px 16px; overflow: hidden; border-radius: 12px; }
.k7bk, .k7fn { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }

/* the Life Audit: a life in weeks, flat and printed. Lived weeks dark, this week green, the rest still open. The field is
   a whole number of 12px weeks wide and tall, so no dot is ever cut at an edge. */
.k7la { background: #f2f2f3; }
.k7la__f { position: absolute; inset: 24px 26px; }
.k7la__f i { position: absolute; left: 0; top: 0; background-size: 12px 12px; background-position: 0 0; }
.k7la__all { width: round(down, 100%, 12px); height: round(down, 100%, 12px); background-image: radial-gradient(circle at 6px 6px, rgba(11, 11, 12, .17) 0 2.1px, transparent 2.6px); }
.k7la__lived { width: round(down, 100%, 12px); height: 48px; background-image: radial-gradient(circle at 6px 6px, #0b0b0c 0 2.1px, transparent 2.6px); }
.k7la__row { top: 48px !important; width: 204px; height: 12px; background-image: radial-gradient(circle at 6px 6px, #0b0b0c 0 2.1px, transparent 2.6px); }
.k7la__now { left: 204px !important; top: 48px !important; width: 12px; height: 12px; background: radial-gradient(circle at 6px 6px, #1fb83a 0 3px, transparent 3.5px); }

/* 25+5: flat black, just the title mark, big, with the +5 as an exponent (Malik 2026-10-27: cleaner, flatter) */
.k7bk { display: flex; align-items: flex-end; padding: 0 26px 22px; color: #f2f2f3; background: #000; }
.k7bk__n { font-size: clamp(88px, 8.4vw, 124px); font-weight: 700; letter-spacing: -0.055em; line-height: .78; }
.k7bk__n i { font-style: normal; font-size: .4em; letter-spacing: -0.03em; line-height: 1; vertical-align: top; margin-left: .06em; }   /* black and white, no accent (Malik 2026-10-27) */

/* the Freedom Number: the example result as the tile, its bar the one bit of green */
.k7fn { width: auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 0 26px 24px;
  background: radial-gradient(90% 75% at 15% 100%, rgba(63, 217, 78, .11), rgba(63, 217, 78, 0) 70%), #000; }
.k7fn__ex { position: absolute; left: 22px; top: 20px; }
.k7fn__n { font-size: clamp(44px, 4.4vw, 64px); line-height: .95; }
.k7fn__bar { margin-top: 4px; }

/* the 25+5's card links in the same tab, like the other tools */
.k7--l25 .k7__nm { max-width: 18em; }

/* ======================= email forms (Malik 2026-10-27: "why do the boxes look weird and off") =======================
   Beehiiv draws its field and Join button inside its own 76px frame with 16px of padding, at most 432px wide. The box
   pulls that padding back out (so the field lines up with the words above it) and is never wider than the form, so the
   dark plate hugs the field and button with the same 10px on every side. */
.bhwrap { box-sizing: content-box; max-width: 400px; }
.bh { width: calc(100% + 32px) !important; max-width: 432px !important; margin: -16px !important; min-height: 76px; }
.bh iframe { display: block; }
html[data-theme="light"] .bhwrap, html:not([data-theme="light"]) .s1-foot .bhwrap { padding: 10px; border-radius: 17px; }
/* the story section ends where its steps band ends (.s1 .sec's 44px of bottom padding left a strip of the story's own
   colour between the steps and the tools: white in dark mode, black in Flash bang) */
.s1 .s7-val { padding-bottom: 0; }
/* the same room under the tool cards in both modes (.s1 .sec's 44px won in Flash bang) */
.s1 .s7-tools { padding-bottom: clamp(64px, 9vw, 120px); }