@font-face { font-family: Arcade; src: url('press-start-2p.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: Score; src: url('vt323.ttf') format('truetype'); font-display: swap; }
:root { color-scheme: dark; --night:#101025; --surface:#1c1b36; --paper:#f1f0ff; --muted:#b7b6d0; --mint:#3affd6; --pink:#ff4fa3; --orange:#ffaa4c; --line:#3d3b5c; --arcade:Arcade,ui-monospace,monospace; font:18px/1.65 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--paper); background:var(--night); scroll-behavior:smooth; scroll-padding-top:2rem; }
* { box-sizing:border-box; } body { margin:0; } [hidden] { display:none!important; } img { display:block; max-width:100%; height:auto; } button,summary,a { -webkit-tap-highlight-color:transparent; } button { font:inherit; cursor:pointer; } a { color:inherit; text-underline-offset:.25em; } a:hover { color:var(--mint); } a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--pink); outline-offset:5px; } ::selection { background:var(--mint); color:var(--night); } svg { display:block; } p { margin:0 0 1.15rem; }
h1,h2,h3,h4 { margin:0; line-height:1.12; text-wrap:balance; overflow-wrap:break-word; } h1,h2 { font-family:ui-rounded,'SF Pro Rounded',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-weight:850; letter-spacing:-.045em; } h1 { font-size:clamp(3.4rem,6.6vw,5.6rem); } h2 { font-size:clamp(2.2rem,4vw,3.5rem); } h3 { font-size:1.3rem; line-height:1.35; } h4 { font-size:1.55rem; line-height:1.3; }
.section-wrap { max-width:1256px; padding-inline:40px; margin-inline:auto; } .section-heading { display:grid; grid-template-columns:1.1fr 1fr; align-items:end; gap:6rem; margin-bottom:3rem; } .section-heading p,.section-intro { font-size:1.08rem; color:var(--muted); } .section-heading p { margin:0; max-width:34rem; } .section-note { max-width:52rem; color:var(--muted); font-size:.84rem; margin:1.5rem 0 0; } .text-link { text-decoration-thickness:1px; font-weight:650; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:1.2rem; padding:.95rem 1.45rem; border:2px solid transparent; text-decoration:none; font-weight:750; line-height:1.4; text-align:center; min-height:54px; } .button-primary { background:var(--mint); color:var(--night); box-shadow:4px 4px 0 #1f6f68; } .button-primary:hover { color:var(--night); background:#97ffe9; } .button span { font-size:1.5rem; line-height:1; } .skip { position:absolute; left:1rem; top:-10rem; background:var(--mint); color:var(--night); padding:1rem; z-index:30; } .skip:focus { top:1rem; }
/* The masthead keeps the app's own compact pixel wordmark. */
.site-header { max-width:1256px; padding:26px 40px; margin:auto; display:flex; align-items:center; gap:2rem; position:relative; z-index:10; } .wordmark { display:inline-flex; align-items:center; gap:.8rem; font:.78rem/1.6 var(--arcade); text-decoration:none; color:var(--mint); flex-shrink:0; } .wordmark img { width:44px; height:44px; border-radius:10px; image-rendering:pixelated; } .main-nav { display:flex; justify-content:center; gap:2rem; margin-left:auto; } .main-nav a { display:inline-flex; align-items:center; min-height:44px; font-size:.85rem; text-decoration:none; font-weight:550; }
.language-menu { position:relative; margin-left:1.1rem; } .language-menu summary { min-height:44px; display:flex; align-items:center; gap:.5rem; padding:.55rem .75rem; border:1px solid var(--line); border-radius:6px; list-style:none; cursor:pointer; font-size:.77rem; } .language-menu summary::-webkit-details-marker { display:none; } .language-menu summary svg { width:19px; height:19px; flex-shrink:0; } .language-menu summary>span:nth-child(2) { max-width:10rem; overflow-wrap:anywhere; } .language-list { position:absolute; right:0; top:calc(100% + 10px); width:280px; max-height:min(70vh,580px); overflow-y:auto; padding:.5rem; background:#24223d; border:1px solid var(--line); border-radius:8px; box-shadow:0 20px 60px #0008; } .language-list a { display:block; padding:.55rem .8rem; text-decoration:none; font-size:.87rem; border-radius:4px; } .language-list a:hover,.language-list a[aria-current] { background:var(--night); color:var(--mint); }
/* Gio is the one big visual moment; the CRT effect stays on his portrait. */
.hero { display:grid; grid-template-columns:1.15fr 1fr; gap:4rem; align-items:center; padding-block:70px 100px; min-height:730px; } .hero-copy { min-width:0; } .release-status { display:inline-flex; align-items:center; gap:.55rem; font-size:.8rem; color:var(--mint); margin-bottom:1.6rem; } .release-status>span { width:7px; height:7px; background:currentColor; flex-shrink:0; } .hero h1 { max-width:10ch; margin:0 0 1.5rem; } .hero-intro { color:var(--muted); font-size:1.13rem; max-width:29rem; line-height:1.65; } .hero-actions { display:flex; gap:1.7rem; align-items:center; flex-wrap:wrap; margin:2rem 0 1.5rem; } .hero-actions .text-link { font-size:.9rem; } .hero-note { color:var(--muted); font-size:.75rem; margin-bottom:0; }
.hero-stage { position:relative; padding:1.5rem .7rem 0; margin-top:3rem; } .portrait-crt { position:relative; border:5px solid var(--mint); background:#241457; box-shadow:12px 12px 0 #444071; isolation:isolate; } .portrait-crt img { width:100%; image-rendering:pixelated; } .portrait-crt::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent 0 3px,#07092138 3px 5px); pointer-events:none; } .portrait-crt::before { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(transparent 0 40%,#d7ffff18 50%,transparent 60%); background-size:100% 300%; animation:scan 10s linear infinite; pointer-events:none; } @keyframes scan { from { background-position:0 100%; } to { background-position:0 -200%; } }
.speech-bubble { position:absolute; z-index:2; left:-1.2rem; top:-2.9rem; max-width:90%; padding:.85rem 1.1rem; color:var(--night); background:var(--paper); box-shadow:5px 5px 0 #0005; font-weight:700; font-size:1.1rem; line-height:1.4; transform:rotate(-3deg); } .speech-bubble::after { content:''; position:absolute; bottom:-13px; left:36px; border:7px solid transparent; border-top-color:var(--paper); border-left-color:var(--paper); } .portrait-caption { position:relative; z-index:2; display:flex; align-items:center; gap:.8rem; margin:-1.4rem -1.1rem 0 1.3rem; padding:1rem 1.2rem; background:var(--pink); color:var(--night); font-weight:800; transform:rotate(2deg); font-size:1rem; line-height:1.4; } .pixel-star { font-size:1.8rem; line-height:1; } .stage-spark { position:absolute; font-family:var(--arcade); color:var(--orange); } .spark-one { top:-3.5rem; right:-1rem; font-size:1.7rem; } .spark-two { bottom:2rem; left:-2.4rem; font-size:1rem; }
/* A start-to-goal sequence, never a promised schedule. */
.journey-section { padding-block:90px; background:#19182f; border-block:1px solid #2c2a46; } .exercise-picker { display:flex; gap:.5rem; margin-bottom:2rem; flex-wrap:wrap; } .exercise-picker button,.coach-picker button { color:var(--muted); padding:.7rem 1.35rem; background:transparent; border:1px solid var(--line); border-radius:4px; font-weight:650; font-size:.95rem; min-height:48px; } .exercise-picker button[aria-pressed='true'] { background:var(--pink); color:var(--night); border-color:var(--pink); } .exercise-picker button[data-exercise='situps'][aria-pressed='true'] { background:var(--orange); border-color:var(--orange); } .exercise-picker button[data-exercise='squats'][aria-pressed='true'] { background:var(--mint); border-color:var(--mint); }
.exercise-path { --path-color:var(--pink); padding:2rem 2.4rem 2.2rem; background:var(--night); border:1px solid var(--line); margin-top:1rem; } .path-situps { --path-color:var(--orange); } .path-squats { --path-color:var(--mint); } .exercise-path>h3 { color:var(--path-color); font:.7rem/1.5 var(--arcade); margin-bottom:2rem; } .path-stages { display:grid; grid-template-columns:1fr 1.05fr 1fr; gap:2.3rem; } .path-step { position:relative; padding-top:2rem; min-width:0; } .path-step::before { content:''; position:absolute; top:6px; left:0; right:-2.3rem; height:2px; background:var(--line); } .path-step:last-child::before { right:0; } .path-dot { position:absolute; top:0; left:0; width:14px; height:14px; background:var(--path-color); box-shadow:0 0 0 6px var(--night); } .path-goal .path-dot { color:var(--path-color); background:var(--night); font-size:1.6rem; line-height:14px; } .path-label { color:var(--muted); font-size:.76rem; margin:0 0 .65rem; } .path-description { font-size:1.05rem; margin:0; max-width:18rem; line-height:1.5; } .goal-number { font:5.2rem/.85 Score,ui-monospace,monospace; color:var(--path-color); display:block; margin-bottom:.45rem; } .path-goal h4 { font-size:.9rem; font-weight:550; max-width:16rem; }
.how-section { padding-block:110px; display:grid; grid-template-columns:1.35fr 1fr; gap:7rem; align-items:center; } .how-copy h2 { margin-bottom:1.25rem; max-width:12ch; } .quest-steps { list-style:none; padding:0; margin:2.5rem 0; counter-reset:quest; } .quest-steps li { counter-increment:quest; position:relative; padding:0 0 1.8rem 3.6rem; } .quest-steps li::before { content:counter(quest); position:absolute; left:0; top:0; width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--line); color:var(--mint); font:1.6rem Score,monospace; } .quest-steps h3 { font-size:1.07rem; margin-bottom:.5rem; } .quest-steps p { color:var(--muted); font-size:.93rem; margin:0; } .recovery-note { display:flex; gap:1rem; border-top:1px solid var(--line); padding-top:1.5rem; } .recovery-note>span { font-size:2rem; color:#a69df6; line-height:1; } .recovery-note h3 { font-size:.97rem; margin-bottom:.45rem; } .recovery-note p { color:var(--muted); font-size:.8rem; margin:0; }
.app-preview { max-width:330px; margin:0 auto; width:100%; } .phone-frame { border:7px solid #39364f; border-radius:44px; overflow:hidden; background:#0d0d1c; box-shadow:22px 30px 0 #19182e,0 25px 90px #0006; } .phone-frame img { width:100%; } .app-preview figcaption { color:var(--muted); font-size:.73rem; text-align:center; margin-top:2.4rem; }
.coach-section { background:#24203d; padding-block:85px; } .coach-layout { display:grid; grid-template-columns:.8fr 1.25fr; gap:5rem; align-items:center; } .coach-portrait { position:relative; border:4px solid #534774; box-shadow:-12px 12px 0 #151427; } .coach-portrait img { width:100%; image-rendering:pixelated; } .coach-copy h2 { max-width:14ch; margin-bottom:1.2rem; } .coach-picker { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1.8rem; } .coach-picker button { font-size:.84rem; padding:.6rem 1rem; border-color:#65577f; } .coach-picker button[aria-pressed='true'] { background:var(--paper); border-color:var(--paper); color:var(--night); } #coach-quotes { min-height:8.5rem; } blockquote { margin:1.5rem 0 1rem; } blockquote p { font-size:1.4rem; line-height:1.5; font-weight:600; color:var(--mint); margin-bottom:.7rem; } blockquote cite { color:var(--muted); font-size:.78rem; font-style:normal; } .coach-note { font-size:.75rem; color:var(--muted); margin-bottom:0; }
.plans-section { padding-block:100px 85px; } .plans-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; } .plan { padding:2.25rem; border:1px solid var(--line); background:#15142a; } .plan-pro { border-color:#c98648; background:#251e29; } .plan h3 { font-size:1.1rem; color:var(--mint); } .plan-pro h3 { color:var(--orange); } .plan-price { font-size:2.2rem; font-weight:750; letter-spacing:-.04em; margin:.6rem 0; line-height:1.2; } .plan-description { color:var(--muted); font-size:.9rem; margin-bottom:1.7rem; } .plan ul { margin:0; padding:1.6rem 0 0; list-style:none; border-top:1px solid var(--line); } .plan li { position:relative; padding-left:1.5rem; font-size:.9rem; margin-bottom:1rem; } .plan li:last-child { margin-bottom:0; } .plan li::before { content:'✓'; color:var(--mint); position:absolute; left:0; } .plan-pro li::before { color:var(--orange); } .cloud-note { display:flex; gap:2rem; justify-content:space-between; align-items:start; border:1px dashed var(--line); padding:1.5rem 1.8rem; margin-top:2.2rem; } .cloud-note h3 { font-size:1rem; margin-bottom:.5rem; } .cloud-note p { font-size:.84rem; max-width:49rem; color:var(--muted); margin:0; } .development-badge { padding:.3rem .6rem; background:var(--surface); color:var(--muted); font-size:.7rem; white-space:nowrap; }
.privacy-promo { display:flex; gap:1.5rem; align-items:center; padding-block:2.4rem; border-block:1px solid var(--line); } .privacy-symbol { font-size:4rem; color:var(--mint); line-height:1; } .privacy-promo h2 { font-size:1.55rem; letter-spacing:-.025em; margin-bottom:.5rem; } .privacy-promo p { color:var(--muted); font-size:.85rem; max-width:38rem; margin:0; } .privacy-promo .text-link { margin-left:auto; min-width:10rem; max-width:15rem; font-size:.84rem; }
.faq-section { padding-block:90px; display:grid; grid-template-columns:.8fr 1.3fr; gap:5rem; align-items:start; } .faq-section h2 { font-size:2.7rem; position:sticky; top:3rem; } .faq-item { border-bottom:1px solid var(--line); } .faq-item:first-child { border-top:1px solid var(--line); } .faq-item summary { position:relative; cursor:pointer; list-style:none; padding:1.2rem 2rem 1.2rem 0; font-weight:600; font-size:.96rem; line-height:1.5; } .faq-item summary::-webkit-details-marker { display:none; } .faq-item summary::after { content:'+'; position:absolute; right:.3rem; top:1.2rem; color:var(--mint); font-size:1.3rem; line-height:1; } .faq-item[open] summary::after { content:'−'; } .faq-item p { font-size:.9rem; color:var(--muted); margin:0; padding:0 1.8rem 1.5rem 0; }
.closing-section { text-align:center; padding-block:30px 90px; max-width:800px; } .closing-section>img { margin:0 auto 1.5rem; border-radius:18px; } .closing-section h2 { margin-bottom:1rem; } .closing-section>p { color:var(--muted); max-width:34rem; margin-inline:auto; } .closing-section .release-status { color:var(--mint); display:flex; justify-content:center; margin:2rem auto 1.3rem; } .closing-section .text-link { font-size:.85rem; }
.site-footer { border-top:1px solid var(--line); max-width:1176px; margin:auto; padding:2rem 0; display:flex; align-items:center; gap:2rem; flex-wrap:wrap; font-size:.72rem; color:var(--muted); } .footer-brand { font-size:.62rem; } .site-footer p { margin:0; } .site-footer nav { margin-left:auto; display:flex; gap:1.4rem; }
/* The policy keeps a quiet, printable reading layout and stable anchors. */
.policy-main { padding-block:65px 90px; } .policy-heading { max-width:820px; margin-bottom:3rem; } .policy-heading h1 { font-size:clamp(2.8rem,5vw,4.1rem); margin-bottom:1rem; } .updated { color:var(--muted); font-size:.8rem; } .policy-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:4rem; align-items:start; } .contents { position:sticky; top:2rem; font-size:.8rem; } .contents p { color:var(--muted); margin-bottom:.5rem; } .contents a { display:block; padding:.4rem 0; color:var(--mint); } .policy-copy { max-width:44rem; min-width:0; overflow-wrap:anywhere; } .policy-copy section { margin-bottom:3rem; scroll-margin-top:2rem; } .policy-copy h2 { font-size:1.65rem; letter-spacing:-.025em; margin-bottom:1.2rem; } .policy-copy h3 { font-size:1.15rem; margin:1.8rem 0 1rem; } .policy-copy p,.policy-copy li { color:var(--muted); font-size:.94rem; } .policy-copy a { color:var(--mint); } .policy-copy ul { padding-left:1.2rem; } .policy-copy li { padding-left:.2rem; margin-bottom:1rem; } .notice { border-left:3px solid var(--orange); background:var(--surface); padding:1rem 1.25rem; }
.error-main { padding-block:70px 100px; max-width:850px; min-height:70vh; } .error-main img { border-radius:20px; } .error-number { color:var(--pink); font:5rem/1 Score,monospace; margin:1.5rem 0; } .error-main h1 { font-size:3.5rem; margin-bottom:1rem; } .error-main .button { margin-bottom:1.5rem; }
.cjk { line-break:strict; --arcade:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; } .cjk h1,.cjk h2 { letter-spacing:-.02em; line-height:1.3; } .cjk .hero h1 { max-width:none; } .cjk .wordmark { font-family:Arcade,monospace; } .cjk .exercise-path>h3 { font-size:1rem; }
@media (max-width:1100px) { .main-nav { gap:1.2rem; } .language-menu { margin-left:0; } .hero { gap:2.5rem; } .hero h1 { font-size:4.3rem; } .section-heading { gap:3rem; } .how-section { gap:4rem; } .coach-layout { gap:3rem; } .site-footer { margin-inline:40px; } }
@media (max-width:800px) {
 .section-wrap { padding-inline:28px; } .site-header { padding:22px 28px; gap:1rem; flex-wrap:wrap; } .main-nav { order:3; flex-basis:100%; justify-content:flex-start; gap:1.5rem; padding-top:.8rem; } .language-menu { margin-left:auto; } .hero { grid-template-columns:1fr; gap:4.5rem; padding-block:45px 80px; } .hero h1 { font-size:clamp(3.1rem,10vw,5rem); max-width:12ch; } .hero-intro { max-width:34rem; } .hero-stage { width:min(430px,90%); margin:0 auto; } .section-heading { grid-template-columns:1fr; gap:1.4rem; } .journey-section { padding-block:65px; }
 .how-section { grid-template-columns:1fr; gap:3.5rem; padding-block:70px; } .how-copy h2 { max-width:16ch; } .quest-steps { max-width:36rem; } .app-preview { max-width:300px; } .coach-layout { grid-template-columns:1fr; gap:2.5rem; } .coach-portrait { width:220px; } .coach-copy h2 { max-width:17ch; } .coach-section { padding-block:65px; } .plans-section { padding-block:70px; } .plan { padding:1.6rem; } .plan-price { font-size:1.8rem; } .cloud-note { flex-direction:column-reverse; gap:.8rem; }
 .privacy-promo { margin-inline:28px; padding-inline:0; flex-wrap:wrap; } .privacy-symbol { display:none; } .privacy-promo .text-link { margin-left:0; } .faq-section { grid-template-columns:1fr; gap:2rem; padding-block:65px; } .faq-section h2 { position:static; max-width:18ch; } .site-footer { margin-inline:28px; gap:1.2rem; } .site-footer nav { flex-basis:100%; margin:0; flex-wrap:wrap; } .policy-layout { grid-template-columns:1fr; gap:2rem; } .contents { position:static; border-bottom:1px solid var(--line); padding-bottom:1.8rem; }
}
@media (max-width:560px) {
 .cjk .hero h1 { font-size:2.1rem; }
 :root { font-size:17px; } .section-wrap { padding-inline:22px; } .site-header { padding:20px 22px; } .wordmark { font-size:.67rem; gap:.65rem; } .wordmark img { width:36px; height:36px; } .language-menu summary { font-size:.68rem; padding:.55rem; } .language-menu summary>span:nth-child(2) { max-width:8rem; } .language-list { width:min(280px,calc(100vw - 44px)); } .main-nav { gap:1.3rem; justify-content:space-between; } .main-nav a { font-size:.78rem; }
 .hero { padding-block:30px 70px; } .hero-intro { font-size:1.06rem; } .hero-actions { align-items:flex-start; flex-direction:column; gap:1.3rem; } .hero-note { font-size:.72rem; } .hero-stage { width:88%; } .spark-two { left:-1.2rem; } .speech-bubble { font-size:1rem; } .portrait-caption { font-size:.9rem; padding:.8rem; } .portrait-crt { border-width:4px; box-shadow:8px 8px 0 #444071; }
 .exercise-picker { gap:.4rem; } .exercise-picker button { font-size:.85rem; padding:.65rem .9rem; flex-grow:1; } .exercise-path { padding:1.6rem; } .path-stages { grid-template-columns:1fr; gap:1.7rem; } .path-step { padding:0 0 0 1.8rem; } .path-dot { top:.35rem; width:10px; height:10px; } .path-step::before { top:.35rem; bottom:-2rem; right:auto; left:4px; width:1px; height:auto; } .path-step:last-child::before { display:none; } .path-label { font-size:.78rem; margin-bottom:.45rem; } .path-step h4 { font-size:1.4rem; } .path-description { font-size:1rem; max-width:none; } .goal-number { font-size:4.7rem; } .path-goal h4 { font-size:.9rem; max-width:none; }
 .plans-grid { grid-template-columns:1fr; } .plan { padding:1.8rem; } .plan-price { font-size:2.1rem; } .coach-picker button { flex-grow:1; } .privacy-promo { margin-inline:22px; padding-inline:0; } .faq-section h2 { font-size:2.3rem; } .closing-section { padding-block:20px 65px; } .site-footer { margin-inline:22px; } .footer-brand { flex-basis:100%; font-size:.6rem; } .policy-main { padding-block:40px 65px; } .policy-heading h1,.error-main h1 { font-size:2.7rem; }
}
@media (prefers-reduced-motion:reduce) { :root { scroll-behavior:auto; } .portrait-crt::before { animation:none; } }
@media print { :root { color-scheme:light; background:white; color:black; font-size:11pt; } .site-header,.site-footer,.contents,.skip { display:none; } .policy-layout { display:block; } .policy-main { padding:0; } .policy-copy,.policy-heading { max-width:none; } .policy-copy p,.policy-copy li,.updated,a { color:black; } .notice { background:none; border-color:black; } }