@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Caslon+Display&display=swap');

:root{--linen:#f7f0e3;--paper:#fcf8ef;--ink:#49382b;--muted:#786958;--berry:#9b3547;--berry-dark:#7b2534;--line:#d8cbb8;--serif:'Libre Caslon Display',Georgia,serif;--sans:'DM Sans',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:auto;scroll-padding-top:34px}body{margin:0;background:var(--linen);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.24;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23756343' opacity='.25' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}a{color:inherit;text-decoration:none}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--berry);outline-offset:6px}::selection{background:#e9c7c8}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:400}em{color:var(--berry);font-weight:400}.header{max-width:1440px;margin:auto;padding:28px 6%;display:flex;align-items:center;justify-content:space-between;gap:32px}.brand{font-family:var(--serif);font-size:33px;line-height:1;display:inline-flex;align-items:center;white-space:nowrap}.brand-mark{display:block;width:1em;height:1em;flex:none;margin-right:11px}.trademark{font-family:var(--sans);font-size:10px;align-self:flex-start;margin:5px 0 0 3px}.header nav{display:flex;align-items:center;gap:35px;font-size:14px}.header nav>a:not(.nav-cta){transition:color .2s}.header nav>a:hover{color:var(--berry)}.nav-cta{border:1px solid var(--berry);color:var(--berry);border-radius:5px;padding:10px 20px}.nav-cta span{margin-left:15px}.menu-toggle{display:none}.hero{position:relative;max-width:1440px;min-height:770px;margin:auto;padding:35px 10% 100px;display:grid;grid-template-columns:1.2fr 1fr;gap:55px;align-items:center}.eyebrow{font-size:12px;letter-spacing:2.4px;font-weight:600;line-height:1.7}.tiny-stitch{font-size:22px;vertical-align:middle;margin-right:8px;color:var(--berry)}h1{font-family:var(--serif);font-size:clamp(62px,6.5vw,94px);line-height:1.03;letter-spacing:-3px;margin:25px 0}h1 em{white-space:nowrap}.hero-description{font-size:16px;color:var(--muted);line-height:1.9}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;background:var(--berry);color:var(--paper);padding:15px 25px;border-radius:5px;font-size:14px;font-weight:500;margin-top:31px;box-shadow:0 4px 10px #68332012;transition:background .2s,transform .2s}.button:hover{background:var(--berry-dark);transform:translateY(-2px)}.button span{font-size:21px;line-height:1}.hero-footnote{display:flex;align-items:center;gap:10px;margin-top:21px;font-size:12px;color:var(--muted)}.hero-footnote span{font-size:21px;color:var(--berry)}.hero-art{position:relative;justify-self:center;width:290px;padding-top:22px;transform:rotate(3deg)}.poster{overflow:hidden;border-radius:145px 145px 9px 9px;box-shadow:0 16px 40px #66432124,0 0 0 7px var(--linen),0 0 0 8px #d6c5aa;background:#ecddc5}.poster img{display:block;width:100%;height:auto}.art-caption{font-size:10px;text-align:center;letter-spacing:2px}.top-caption{position:absolute;top:-10px;left:0;right:0;font-family:var(--serif);font-style:italic;font-size:18px;letter-spacing:.4px;color:var(--muted)}.bottom-caption{margin-top:23px;color:var(--muted)}.art-note{position:absolute;right:-98px;bottom:53px;transform:rotate(-10deg);font-family:var(--serif);font-size:23px;font-style:italic;line-height:1.15;color:var(--berry);background:var(--linen);padding:11px 4px}.art-note span{font-size:27px}.scroll-cue{position:absolute;bottom:30px;left:10%;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:13px}.scroll-cue>span{font-size:22px;color:var(--berry)}.stitch-divider{display:flex;align-items:center;gap:20px;max-width:1160px;margin:0 auto;color:var(--berry)}.stitch-divider:before,.stitch-divider:after{content:"";height:1px;flex:1;border-top:1px dashed #c6b69d}.stitch-divider span{font-size:24px}.section-width{max-width:1160px;margin:auto}.introduction{padding:78px 0 84px;text-align:center}h2{font-family:var(--serif);font-size:59px;line-height:1.08;letter-spacing:-1.4px}.introduction h2{margin:22px 0}.introduction>p{color:var(--muted);font-size:16px}.qualities{display:grid;grid-template-columns:repeat(3,1fr);text-align:left;margin-top:57px}.qualities article{padding:0 35px;border-right:1px solid var(--line)}.qualities article:first-child{padding-left:0}.qualities article:last-child{border:0;padding-right:0}.quality-number{font-size:12px;letter-spacing:1px;color:var(--berry)}h3{font-family:var(--serif);font-size:29px;line-height:1.3;margin:12px 0}.qualities p{color:var(--muted);font-size:14px;line-height:1.9;max-width:300px}.quiet-section{display:grid;grid-template-columns:1fr 1fr;background:#eee3d0;border-top:1px solid #decfb6;border-bottom:1px solid #decfb6;min-height:540px}.quiet-art{position:relative;overflow:hidden;min-height:540px}.quiet-art img{width:150%;height:270%;object-fit:cover;max-width:none;position:absolute;left:-25%;top:-60%}.quiet-copy{padding:76px 12% 76px 11%;align-self:center}.quiet-copy .eyebrow{font-size:11px}.quiet-copy h2{font-size:57px;margin:23px 0}.quiet-copy p{font-size:15px;color:var(--muted)}.text-link{display:inline-flex;gap:25px;align-items:center;color:var(--berry);font-size:14px;border-bottom:1px solid #b87a80;padding-bottom:5px;margin-top:29px}.text-link:hover{color:var(--berry-dark)}.launch{text-align:center;padding:81px 20px 88px}.launch-heart{display:block;color:var(--berry);font-family:Georgia,serif;font-size:43px;line-height:1;margin-bottom:20px}.launch h2{margin:22px 0}.launch>p{color:var(--muted)}.coming-soon{display:inline-block;margin-top:26px;padding:13px 27px;border:1px dashed #bc8a8e;border-radius:5px;color:var(--berry);font-size:14px;font-weight:500}.launch .launch-note{font-size:12px;margin-top:15px}.footer{max-width:1280px;margin:auto;border-top:1px dashed #c6b69d;padding:30px 30px 35px;display:flex;align-items:center;justify-content:space-between;gap:20px}.footer .brand{font-size:27px}.footer .brand-mark{font-size:26px}.footer p{font-family:var(--serif);font-size:19px;font-style:italic;color:var(--muted)}.footer>span{font-size:12px;color:var(--muted)}.skip-link{position:fixed;top:10px;left:10px;z-index:10;transform:translateY(-160%);padding:10px 20px;background:var(--paper);border:1px solid var(--berry)}.skip-link:focus{transform:translateY(0)}
@media(min-width:1500px){.quiet-art img{width:125%;left:-12.5%;height:300%;top:-72%}}
@media(max-width:1200px){.hero{padding-left:7%;padding-right:9%;gap:25px;min-height:750px}.hero-art{width:260px}.art-note{right:-75px;font-size:21px}.section-width,.stitch-divider{margin-left:7%;margin-right:7%}.scroll-cue{left:7%}.quiet-copy{padding:65px 10%}.quiet-copy h2{font-size:49px}.footer{margin:0 5%;padding-left:0;padding-right:0}}
@media(max-width:800px){.header{padding:25px 6%}.brand{font-size:30px}.header nav{gap:20px}.hero{min-height:660px;padding:40px 7% 95px;gap:25px;grid-template-columns:1.3fr 1fr}.hero-art{width:210px}h1{font-size:61px;letter-spacing:-2px}.hero .eyebrow{font-size:10px;letter-spacing:1.5px}.hero-description{font-size:15px}.desktop-break{display:none}.hero-footnote{font-size:11px}.art-note{font-size:18px;right:-26px;bottom:37px}.art-caption{font-size:9px}.top-caption{font-size:16px}.introduction{padding-top:65px}h2{font-size:52px}.qualities article{padding:0 20px}h3{font-size:26px}.quiet-section{min-height:460px}.quiet-art{min-height:460px}.quiet-copy{padding:50px 9%}.quiet-copy h2{font-size:42px}.quiet-copy .eyebrow{letter-spacing:1.4px}.quiet-art img{width:200%;left:-50%;height:240%;top:-41%}.footer p{display:none}}
@media(max-width:620px){html{scroll-padding-top:22px}.header{padding:23px 6%;position:relative;z-index:5}.brand{font-size:30px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;align-items:center;border:1px solid var(--line);width:42px;height:42px;background:transparent;border-radius:4px}.menu-toggle span{width:18px;height:1px;background:var(--ink);transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}.header nav{display:none;position:absolute;top:83px;left:6%;right:6%;padding:23px;background:var(--paper);box-shadow:0 9px 20px #49382b14;border:1px solid var(--line);border-radius:5px;align-items:stretch;gap:18px}.header nav.is-open{display:flex;flex-direction:column}.nav-cta{text-align:center}.hero{display:flex;flex-direction:column;gap:51px;padding:41px 7% 65px;min-height:0}.hero-copy{text-align:center;width:100%}.hero .eyebrow{font-size:10px;letter-spacing:1.6px}h1{font-size:clamp(53px,12vw,73px);line-height:1.06;margin:22px 0;letter-spacing:-2px}.hero-description{font-size:15px;max-width:340px;margin:auto;line-height:1.8}.button{margin-top:27px;font-size:14px;padding:14px 25px}.hero-footnote{justify-content:center;margin-top:16px;font-size:11px}.hero-art{width:245px;margin-bottom:24px;transform:rotate(2deg)}.art-note{right:-40px;bottom:43px;font-size:20px}.top-caption{font-size:17px}.scroll-cue{position:static;align-self:center;margin-top:-27px}.introduction{padding:57px 0}.eyebrow{font-size:10px;letter-spacing:2px}h2{font-size:45px}.introduction>p{font-size:15px;line-height:1.9}.qualities{grid-template-columns:1fr;margin-top:35px}.qualities article,.qualities article:first-child,.qualities article:last-child{padding:23px 0;border-right:0;border-bottom:1px solid var(--line)}.qualities article:last-child{border-bottom:0;padding-bottom:0}.quality-number{float:left;margin-top:10px;width:42px}h3{font-size:28px;margin:0 0 9px 42px}.qualities p{max-width:none;margin-left:42px;font-size:14px}.quiet-section{grid-template-columns:1fr}.quiet-art{height:365px;min-height:0}.quiet-art img{width:130%;left:-15%;height:320%;top:-78%}.quiet-copy{padding:45px 8% 55px;text-align:center}.quiet-copy h2{font-size:48px}.quiet-copy p{font-size:15px}.launch{padding:60px 0}.launch h2{font-size:50px}.launch>p{font-size:15px}.launch .launch-note{font-size:12px}.footer{padding:25px 0;flex-wrap:wrap}.footer .brand{font-size:25px}.footer>span{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* Keep the embroidered patch centered at every screen size. */
.quiet-art img{height:400%;width:auto;max-width:none;left:50%;top:50%;transform:translate(-50%,-34.2%)}
@media(max-width:360px){.hero-art{width:220px}.art-note{right:-15px;font-size:18px}.hero .eyebrow{letter-spacing:1px}.hero-footnote{font-size:10px}h1{font-size:49px}}

/* Real app previews and mode-by-mode gameplay. */
.hero-description { max-width: 410px; }
.app-preview { width: 278px; }
.app-preview .poster {
  border-radius: 34px;
  border: 7px solid #43352a;
  box-shadow: 0 18px 42px #49382b26, 0 0 0 1px #776653;
}
.app-preview .poster img { border-radius: 26px; }
.app-preview .top-caption { top: -15px; }
.app-preview .art-note { right: -76px; bottom: 51px; }
.gameplay-section { padding: 76px 0 88px; background: #f1e8d9; border-top: 1px dashed var(--line); }
.gameplay-heading { text-align: center; }
.gameplay-heading h2 { margin: 22px 0 16px; }
.gameplay-heading > p { color: var(--muted); }
.mode-tabs { display: inline-flex; gap: 6px; padding: 6px; margin: 30px 0 54px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.mode-tabs button { border: 0; border-radius: 7px; background: transparent; color: var(--ink); padding: 12px 32px; cursor: pointer; font-size: 17px; line-height: 1.4; transition: background .2s, color .2s; }
.mode-tabs button span { display: block; font-size: 12px; margin-top: 3px; opacity: .8; }
.mode-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.mode-tabs button:hover:not([aria-selected="true"]) { background: #eee3d0; }
.mode-panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: start; }
.mode-panel[hidden] { display: none; }
.gameplay-figure { margin: 0; justify-self: center; width: min(100%, 300px); }
.video-frame { border: 7px solid #43352a; border-radius: 35px; overflow: hidden; background: var(--ink); box-shadow: 0 20px 38px #49382b20; }
.video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 720 / 1562; background: #f5efe3; }
.gameplay-figure figcaption { text-align: center; font-size: 13px; line-height: 1.65; margin: 20px 0 0; color: var(--ink); }
.gameplay-figure figcaption span { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; }
.mode-guide { max-width: 500px; padding-top: 8px; }
.mode-label { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; line-height: 1.8; }
.trace-label { color: #206a88; }
.challenge-label { color: var(--berry); }
.mode-guide > h3 { font-size: 49px; line-height: 1.08; letter-spacing: -1px; margin: 19px 0 22px; }
.mode-guide > p { color: var(--muted); font-size: 16px; line-height: 1.8; }
.play-steps { list-style: none; padding: 0; margin: 28px 0 0; counter-reset: step; }
.play-steps li { position: relative; padding: 0 0 22px 42px; counter-increment: step; }
.play-steps li:before { content: "0" counter(step); position: absolute; left: 0; top: 2px; font-size: 12px; color: var(--berry); letter-spacing: 1px; }
.play-steps h4 { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.play-steps p { font-size: 14px; color: var(--muted); line-height: 1.8; }
.in-app-guide { border-top: 1px dashed #c6b69d; margin-top: 5px; padding-top: 17px; }
.in-app-guide summary { cursor: pointer; color: var(--berry); font-size: 14px; padding: 3px 0; }
.in-app-guide summary:focus-visible { outline: 2px solid var(--berry); outline-offset: 6px; }
.in-app-guide img { display: block; width: 100%; max-width: 380px; height: auto; margin: 20px auto 0; border: 1px solid var(--line); border-radius: 18px; }
@media (max-width: 1200px) {
  .app-preview { width: 260px; }
  .app-preview .art-note { right: -54px; }
  .mode-panel { gap: 45px; }
}
@media (max-width: 800px) {
  .app-preview { width: 210px; }
  .app-preview .poster { border-width: 5px; border-radius: 27px; }
  .app-preview .poster img { border-radius: 20px; }
  .app-preview .art-note { right: -27px; }
  .mode-panel { gap: 30px; grid-template-columns: .85fr 1fr; }
  .mode-guide > h3 { font-size: 39px; }
  .video-frame { border-width: 5px; border-radius: 27px; }
}
@media (max-width: 620px) {
  .app-preview { width: 250px; }
  .app-preview .art-note { right: -30px; }
  .gameplay-section { padding: 57px 0 60px; }
  .gameplay-heading > p { font-size: 15px; }
  .mode-tabs { display: flex; margin-bottom: 36px; }
  .mode-tabs button { flex: 1; padding: 12px 10px; font-size: 16px; }
  .mode-tabs button span { font-size: 12px; }
  .mode-panel { grid-template-columns: 1fr; gap: 34px; }
  .gameplay-figure { width: min(100%, 290px); }
  .mode-guide { padding-top: 0; }
  .mode-guide > h3 { margin-left: 0; font-size: 44px; }
  .mode-label { font-size: 11px; letter-spacing: .7px; }
  .play-steps { margin-top: 25px; }
  .play-steps li { padding-left: 35px; }
}
@media (max-width: 360px) {
  .app-preview { width: 220px; }
  .app-preview .art-note { right: -12px; }
  .mode-tabs button { padding-inline: 7px; }
  .mode-guide > h3 { font-size: 40px; }
}
.recording-toggle { display: flex; width: 100%; justify-content: center; align-items: center; gap: 12px; cursor: pointer; border: 1px solid #bc8a8e; border-radius: 6px; color: var(--berry); background: var(--paper); padding: 12px 10px; margin-top: 20px; font-size: 14px; }
.recording-toggle:hover { background: #eadbd0; }

/* Shared legal navigation. */
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 14px; }
.footer-links a:hover { color: var(--berry); text-decoration: underline; text-underline-offset: 4px; }
.footer { flex-wrap: wrap; }
@media(max-width:620px){.footer-links { width: 100%; order: 3; gap: 24px; }.footer>span{max-width:170px;text-align:right;}}

.tiny-stitch { width: 22px; height: 22px; object-fit: contain; }
.recording-toggle:disabled { cursor: wait; opacity: .7; }
.recording-status, .recording-download { text-align: center; font-size: 13px; margin-top: 12px; }
.recording-download { color: var(--berry); text-decoration: underline; }
.recording-download:not([hidden]) { display: block; }