/* Generated from the app's canonical design tokens. Run npm run sync:design after an app design change. */
:root{--canvas:#111820;--surface:#1C2530;--text:#F7F8F6;--muted:#A8B3BE;--border:#2C3846;--accent:#14806A;--on-accent:#F7F8F6;--primary-lip:#0D4E40;--button-shape:18px 12px 22px 12px;--button-lip:4px;--target:44px;--font-stack:Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--type-display:1.875rem;--type-heading:1.4375rem;--type-body:0.96875rem;--type-small:0.78125rem;--content-width:768px;--art-width:340px;--space-xxs:0.25rem;--space-xs:0.5rem;--space-sm:0.75rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-screenGutter:1rem}
*{box-sizing:border-box}
html{background:var(--canvas);color:var(--text);color-scheme:dark;font-family:var(--font-stack);font-size:100%;text-underline-offset:.2em;text-underline-position:from-font}
body{margin:0;font-size:var(--type-body);line-height:1.6}
a{color:inherit;text-decoration-thickness:1px}
a:focus-visible{outline:2px solid var(--text);outline-offset:4px;border-radius:2px}
p{margin:0 0 var(--space-md)}
.site-shell{max-inline-size:var(--content-width);min-block-size:100svh;margin-inline:auto;padding-inline:var(--space-lg);display:flex;flex-direction:column}
.site-header{padding-block:var(--space-lg);display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:var(--space-xs);min-block-size:var(--target);font-weight:600;text-decoration:none}
.brand img{flex:none;inline-size:32px;block-size:32px}
.back-link{font-size:var(--type-small);min-block-size:var(--target);display:inline-flex;align-items:center}
main{flex:1;min-inline-size:0}
.home main{display:grid;align-items:center;padding-block:var(--space-lg)}
.home-intro{text-align:center;max-inline-size:100%;padding-block:var(--space-md) var(--space-xl)}
.hero-art{display:block;inline-size:min(100%,var(--art-width));block-size:auto;margin:0 auto var(--space-lg)}
h1{font-size:var(--type-display);font-weight:700;line-height:1.2;letter-spacing:-.02em;margin:0 0 var(--space-md);text-wrap:balance}
.tagline{font-size:var(--type-heading);font-weight:600;line-height:1.4;margin-block-end:var(--space-sm);text-wrap:balance}
.intro-copy{color:var(--muted);margin-block-end:var(--space-lg)}
.surface{position:relative;display:inline-block;border-radius:var(--button-shape);padding:0 var(--button-lip) var(--button-lip) 0;text-decoration:none;isolation:isolate}
.surface::before{content:"";position:absolute;inset:var(--button-lip) 0 0 var(--button-lip);background:var(--primary-lip);border-radius:inherit;z-index:-1}
.surface-face{display:flex;justify-content:center;align-items:center;min-block-size:50px;padding:var(--space-xs) var(--space-lg);border-radius:inherit;background:var(--accent);color:var(--on-accent);font-weight:600}
.quiet-note{font-size:var(--type-small);color:var(--muted);margin:var(--space-md) 0 0}
.site-footer{padding-block:var(--space-lg);display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs) var(--space-lg);flex-wrap:wrap;color:var(--muted);font-size:var(--type-small)}
.site-footer p{margin:0}
.site-footer nav{display:flex;gap:var(--space-md);flex-wrap:wrap}
.site-footer a{display:inline-flex;align-items:center;min-block-size:var(--target)}
[aria-current="page"]{color:var(--text);text-decoration-thickness:2px}
.prose{padding-block:var(--space-xl);max-inline-size:68ch;overflow-wrap:anywhere}
.prose h2{font-size:var(--type-heading);font-weight:600;line-height:1.4;margin:0 0 var(--space-sm);text-wrap:balance}
.prose section{margin-block-start:var(--space-xl)}
.prose p{color:var(--muted)}
.prose a{color:var(--text)}
.prose address{font-style:normal;color:var(--text);margin-block-end:var(--space-md)}
.page-lead{font-size:var(--type-small);margin-block-end:var(--space-xl)}
.identifier{white-space:nowrap}
.skip-link{position:absolute;inset-block-start:var(--space-xs);inset-inline-start:var(--space-xs);padding:var(--space-sm);background:var(--surface);z-index:10;transform:translateY(-200%)}
.skip-link:focus{transform:none}
@media (min-width:744px){.home h1{font-size:calc(var(--type-display)*1.2)}.site-shell{padding-inline:var(--space-xl)}}
@media (hover:hover){a:hover{text-decoration-thickness:2px}.primary-link:hover .surface-face{filter:brightness(1.08)}}
@media (prefers-reduced-motion:no-preference){.surface-face{transition:transform 90ms ease-out}.surface:active .surface-face{transform:translate(var(--button-lip),var(--button-lip))}}
@media (forced-colors:active){.surface-face{border:1px solid ButtonText}.surface::before{display:none}}

.hero-art .pose,.hero-art .pop,.hero-art .twinkle,.hero-art .tile,.hero-art .ribbon,.hero-art .marker{transform-box:fill-box;transform-origin:50% 50%}
.hero-art .ribbon{transform-origin:0 50%}
@media (prefers-reduced-motion:no-preference){
.hero-art .phone .pose{animation:hero-loop-phoneIn-0 15000ms cubic-bezier(0.23, 1, 0.32, 1) 0ms infinite both}
@keyframes hero-loop-phoneIn-0{0%{opacity:0;transform:translateY(10px)}1.733333%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.hero-art .tileA{animation:hero-loop-tileIn-180 15000ms cubic-bezier(0.23, 1, 0.32, 1) 0ms infinite both}
@keyframes hero-loop-tileIn-180{0%{opacity:0;transform:scale(.92)}1.2%{opacity:0;transform:scale(.92)}2.8%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.hero-art .tileA .pop{animation:hero-loop-markPop-220 15000ms cubic-bezier(0.23, 1, 0.32, 1) 0ms infinite both}
@keyframes hero-loop-markPop-220{0%{opacity:0;transform:scale(.55)}1.466667%{opacity:0;transform:scale(.55)}2.666667%{opacity:1;transform:scale(1.12)}3.466667%{transform:none}100%{transform:none}}
.hero-art .tileB{animation:hero-loop-tileIn-270 15000ms cubic-bezier(0.23, 1, 0.32, 1) 0ms infinite both}
@keyframes hero-loop-tileIn-270{0%{opacity:0;transform:scale(.92)}1.8%{opacity:0;transform:scale(.92)}3.4%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.hero-art .tileB .pop{animation:hero-loop-markPop-310 15000ms cubic-bezier(0.23, 1, 0.32, 1) 0ms infinite both}
@keyframes hero-loop-markPop-310{0%{opacity:0;transform:scale(.55)}2.066667%{opacity:0;transform:scale(.55)}3.266667%{opacity:1;transform:scale(1.12)}4.066667%{transform:none}100%{transform:none}}
.hero-art .tileC{animation:hero-loop-tileIn-360 15000ms cubic-bezier(0.23, 1, 0.32, 1) 0ms infinite both}
@keyframes hero-loop-tileIn-360{0%{opacity:0;transform:scale(.92)}2.4%{opacity:0;transform:scale(.92)}4%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.hero-art .tileC .pop{animation:hero-loop-markPop-400 15000ms cubic-bezier(0.23, 1, 0.32, 1) 0ms infinite both}
@keyframes hero-loop-markPop-400{0%{opacity:0;transform:scale(.55)}2.666667%{opacity:0;transform:scale(.55)}3.866667%{opacity:1;transform:scale(1.12)}4.666667%{transform:none}100%{transform:none}}
.hero-art .tileD{animation:hero-loop-tileIn-450 15000ms cubic-bezier(0.23, 1, 0.32, 1) 0ms infinite both}
@keyframes hero-loop-tileIn-450{0%{opacity:0;transform:scale(.92)}3%{opacity:0;transform:scale(.92)}4.6%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.hero-art .tileD .pop{animation:hero-loop-markPop-490 15000ms cubic-bezier(0.23, 1, 0.32, 1) 0ms infinite both}
@keyframes hero-loop-markPop-490{0%{opacity:0;transform:scale(.55)}3.266667%{opacity:0;transform:scale(.55)}4.466667%{opacity:1;transform:scale(1.12)}5.266667%{transform:none}100%{transform:none}}
.hero-art .star0 .twinkle{animation:hero-loop-starIn-120 15000ms cubic-bezier(0.23, 1, 0.32, 1) 0ms infinite both}
@keyframes hero-loop-starIn-120{0%{opacity:0;transform:scale(.4)}0.8%{opacity:0;transform:scale(.4)}2.933333%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.hero-art .star1 .twinkle{animation:hero-loop-starIn-180 15000ms cubic-bezier(0.23, 1, 0.32, 1) 0ms infinite both}
@keyframes hero-loop-starIn-180{0%{opacity:0;transform:scale(.4)}1.2%{opacity:0;transform:scale(.4)}3.333333%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.hero-art .star2 .twinkle{animation:hero-loop-starIn-240 15000ms cubic-bezier(0.23, 1, 0.32, 1) 0ms infinite both}
@keyframes hero-loop-starIn-240{0%{opacity:0;transform:scale(.4)}1.6%{opacity:0;transform:scale(.4)}3.733333%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.hero-art .star3 .twinkle{animation:hero-loop-starIn-300 15000ms cubic-bezier(0.23, 1, 0.32, 1) 0ms infinite both}
@keyframes hero-loop-starIn-300{0%{opacity:0;transform:scale(.4)}2%{opacity:0;transform:scale(.4)}4.133333%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.hero-art .star4 .twinkle{animation:hero-loop-starIn-360 15000ms cubic-bezier(0.23, 1, 0.32, 1) 0ms infinite both}
@keyframes hero-loop-starIn-360{0%{opacity:0;transform:scale(.4)}2.4%{opacity:0;transform:scale(.4)}4.533333%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.hero-art .owl .pose{animation:hero-loop-owlIn-420 15000ms cubic-bezier(0.34, 1.3, 0.64, 1) 0ms infinite both}
@keyframes hero-loop-owlIn-420{0%{opacity:0;transform:translateY(-16px)}2.8%{opacity:0;transform:translateY(-16px)}4.48%{opacity:1}5.6%{transform:none}100%{transform:none}}
.hero-art .rabbit .pose{animation:hero-loop-rabbitIn-500 15000ms cubic-bezier(0.34, 1.3, 0.64, 1) 0ms infinite both}
@keyframes hero-loop-rabbitIn-500{0%{opacity:0;transform:translateY(22px)}3.333333%{opacity:0;transform:translateY(22px)}5.093333%{opacity:1}6.266667%{transform:none}100%{transform:none}}
.hero-art .fox .pose{animation:hero-loop-foxIn-580 15000ms cubic-bezier(0.34, 1.3, 0.64, 1) 0ms infinite both}
@keyframes hero-loop-foxIn-580{0%{opacity:0;transform:translateX(-18px) rotate(-6deg)}3.866667%{opacity:0;transform:translateX(-18px) rotate(-6deg)}5.626667%{opacity:1}6.8%{transform:none}100%{transform:none}}
.hero-art .ribbon{animation:hero-loop-ribbonTick-520 15000ms linear 0ms infinite both}
@keyframes hero-loop-ribbonTick-520{0%{transform:scaleX(1.3514)}3.466667%{transform:scaleX(1.3514)}9.466667%{transform:none}100%{transform:none}}
.hero-art .marker{animation:hero-loop-markerTick-520 15000ms linear 0ms infinite both}
@keyframes hero-loop-markerTick-520{0%{transform:translateX(19.76px)}3.466667%{transform:translateX(19.76px)}9.466667%{transform:none}100%{transform:none}}
.hero-art .thief .pose{animation:hero-loop-thiefPeek-760 15000ms ease-out 0ms infinite both}
@keyframes hero-loop-thiefPeek-760{0%{opacity:0;transform:translateX(-28px)}5.066667%{opacity:0;transform:translateX(-28px)}6%{opacity:1}6.7%{transform:translateX(2px) rotate(-12deg)}7.773333%{transform:rotate(8deg)}8.706667%{transform:rotate(-3deg)}9.733333%{transform:none}100%{transform:none}}
}