:root{--ink:#241f1e;--muted:#756a66;--coral:#ea625b;--coral2:#ff8a82;--peach:#ffe5da;--cream:#f8f3eb;--paper:#fffdf9;--green:#dfeee4;--shadow:0 18px 60px rgba(91,62,48,.12);--r:26px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#fffdf9 0,#f7f1e8 100%);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.wrap{width:min(1160px,calc(100% - 36px));margin:auto}.top{position:sticky;top:0;z-index:20;background:rgba(255,253,249,.88);backdrop-filter:blur(16px);border-bottom:1px solid rgba(80,50,30,.08)}.topin{display:flex;align-items:center;justify-content:space-between;min-height:70px;gap:20px}.logo{font-weight:900;letter-spacing:.07em;font-size:14px}.nav{display:flex;gap:20px;align-items:center}.nav a{text-decoration:none;color:var(--ink);font-weight:650;font-size:14px}.btn{appearance:none;border:0;border-radius:999px;padding:14px 22px;font-weight:850;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn.primary{background:var(--coral);color:white;box-shadow:0 10px 30px rgba(234,98,91,.28)}.btn.soft{background:var(--peach);color:#b7443f}.btn.dark{background:var(--ink);color:white}.btn.out{background:white;border:1px solid #eadbd0;color:var(--ink)}.hero{padding:76px 0 52px}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}.eyebrow{display:inline-flex;padding:8px 12px;border-radius:999px;background:var(--peach);color:var(--coral);font-size:13px;font-weight:900;letter-spacing:.06em}.hero h1{font-size:clamp(42px,6vw,76px);line-height:.96;letter-spacing:-.045em;margin:22px 0 20px}.hero p{font-size:20px;line-height:1.55;color:var(--muted);max-width:720px}.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.micro{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;font-size:13px;color:var(--muted)}.mock{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;transform:none}.mock img{display:block;width:100%;border-radius:0}.section{padding:58px 0}.section h2{font-size:clamp(30px,4vw,48px);letter-spacing:-.03em;margin:0 0 12px}.lead{color:var(--muted);font-size:18px;line-height:1.6;max-width:760px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}.stat{background:white;border:1px solid #eee2d8;border-radius:22px;padding:22px}.stat b{font-size:30px;display:block}.stat span{font-size:14px;color:var(--muted)}.how{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}.how>div{background:white;border-radius:22px;padding:22px;border:1px solid #eee2d8}.how strong{display:block;margin:8px 0 6px}.how em{font-style:normal;color:var(--coral);font-size:12px;font-weight:900}.demo{background:#f3e9de;border-radius:42px;padding:38px}.demo-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:32px;align-items:start}.flip{perspective:1200px;aspect-ratio:4/5;max-width:430px;margin:auto;cursor:pointer}.flipin{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:.55s cubic-bezier(.2,.7,.2,1)}.flip.flipped .flipin{transform:rotateY(180deg)}.face{position:absolute;inset:0;backface-visibility:hidden;background:transparent;border:0;border-radius:0;overflow:visible;box-shadow:none}.face.back{transform:rotateY(180deg)}.face img{display:block;width:100%;height:100%;object-fit:contain;background:transparent;border:0;outline:0;box-shadow:none}.demo-tabs,.theme-tabs{display:flex;gap:8px;flex-wrap:wrap}.chipbtn{border:0;border-radius:999px;padding:10px 14px;background:white;font-weight:800;cursor:pointer}.chipbtn.active{background:var(--coral);color:white}.controls{background:white;border-radius:24px;padding:18px;margin-top:16px;border:1px solid #eee2d8}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}.label{font-size:12px;font-weight:900;color:var(--muted);min-width:85px}.seg{display:flex;padding:4px;background:#f6efe9;border-radius:999px}.seg button{border:0;background:transparent;border-radius:999px;padding:8px 12px;font-weight:800;cursor:pointer}.seg button.active{background:white;box-shadow:0 2px 9px rgba(0,0,0,.08)}.phrase-list{display:grid;gap:10px;margin-top:16px}.phrase{background:white;border:1px solid #eee2d8;border-radius:18px;padding:14px 15px;display:grid;grid-template-columns:88px 1fr auto;gap:12px;align-items:center}.phrase .tag{font-size:11px;color:var(--coral);font-weight:950}.speak{border:0;background:var(--peach);width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:16px}.catalog{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}.cardword{position:relative;background:white;border:1px solid #eee2d8;border-radius:18px;padding:16px;min-height:86px}.cardword b{font-size:20px}.cardword span{display:block;color:var(--muted);font-size:13px;margin-top:5px}.cardword.locked:after{content:"🔒";position:absolute;right:12px;top:12px;font-size:14px}.activity{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}.activity button{border:1px solid #eee2d8;background:white;border-radius:22px;padding:22px;text-align:left;cursor:pointer}.activity b{display:block;font-size:18px;margin:6px 0}.activity small{color:var(--muted)}.activity-output{margin-top:16px;border-radius:22px;background:white;border:1px solid #eee2d8;padding:20px;min-height:82px}.pricebox{background:var(--ink);color:white;border-radius:38px;padding:40px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}.price{font-size:58px;font-weight:950;letter-spacing:-.04em}.pricebox ul{margin:18px 0 0;padding-left:20px;color:#e9ded7;line-height:1.8}.buycol{text-align:center}.buycol .btn{min-width:230px}.buycol small{display:block;color:#cfc3bd;margin-top:10px}.unlock{margin-top:22px;background:#fff7f2;color:var(--ink);border:1px solid #f0d7c8;border-radius:24px;padding:18px}.unlockform{display:flex;gap:8px}.unlock input{flex:1;border:1px solid #e7d8cf;border-radius:999px;padding:13px 16px;font-size:15px}.faq{display:grid;gap:10px}.faq details{background:white;border:1px solid #eee2d8;border-radius:18px;padding:18px}.faq summary{font-weight:850;cursor:pointer}.faq p{color:var(--muted);line-height:1.6}.footer{padding:44px 0 60px;color:var(--muted);font-size:13px}.footgrid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}.footer a{color:var(--muted)}.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--ink);color:white;padding:12px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:.25s;z-index:99}.toast.show{opacity:1;transform:translate(-50%,0)}.legalwarn{background:#fff6d8;color:#6e5314;border:1px solid #ead48b;padding:12px 16px;border-radius:14px;font-size:13px;margin-top:12px}.hidden{display:none!important}@media(max-width:900px){.hero-grid,.demo-grid,.pricebox{grid-template-columns:1fr}.mock{max-width:560px;margin:auto}.stats{grid-template-columns:repeat(2,1fr)}.how,.activity{grid-template-columns:1fr}.catalog{grid-template-columns:repeat(3,1fr)}.buycol{text-align:left}}@media(max-width:640px){.nav a:not(.buy){display:none}.hero{padding-top:42px}.demo{padding:20px;border-radius:28px}.catalog{grid-template-columns:repeat(2,1fr)}.phrase{grid-template-columns:66px 1fr auto}.price{font-size:48px}.section{padding:42px 0}.wrap{width:min(100% - 22px,1160px)}}

[hidden]{display:none!important}#cardWordPanel{font-size:28px;font-weight:700;padding:20px 0}.cardword{cursor:pointer}.phrase>div{overflow-wrap:anywhere}.footgrid a{overflow-wrap:anywhere}

#try,#buy,#cards,#how{scroll-margin-top:90px}.pricebox>*,.demo-grid>*,.hero-grid>*{min-width:0}.buycol{max-width:340px}.unlock input{min-width:0}.btn{white-space:normal;text-align:center}@media(max-width:640px){.topin{gap:10px}.top .btn{padding:10px 12px}.top .logo{font-size:12px;max-width:130px}.pricebox{padding:24px}.buycol .btn{min-width:0;width:100%}.phrase{grid-template-columns:58px minmax(0,1fr) 38px;padding:12px 10px;gap:8px}.unlockform{flex-wrap:wrap}.unlock input{width:100%}.hero h1{font-size:clamp(36px,10vw,42px)}}

/* Mobile card preview only: one visible face, no overlapping 3D surfaces. */
@media(max-width:640px){
 .demo .flip{width:100%;aspect-ratio:4/5;perspective:none;border:0;outline:0;border-radius:0;isolation:isolate}
 .demo .flipin,.demo .flip.flipped .flipin{transform:none;transform-style:flat;transition:none;border:0;outline:0;border-radius:0;background:transparent}
 .demo .face{border:0;outline:0;border-radius:0;box-shadow:none;background:transparent;transform:none;backface-visibility:visible;-webkit-backface-visibility:visible}
 .demo .face img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;border:0;outline:0;box-shadow:none;background:transparent}
 .demo .face.back{visibility:hidden;pointer-events:none}
 .demo .flip.flipped .face.front{visibility:hidden;pointer-events:none}
 .demo .flip.flipped .face.back{visibility:visible;pointer-events:auto}
 .demo .flip::before,.demo .flip::after,.demo .flipin::before,.demo .flipin::after,.demo .face::before,.demo .face::after{content:none}
 .demo .phrase-group{grid-template-columns:minmax(0,1fr);gap:8px}
 .demo .phrase-rows{min-width:0;display:grid;gap:8px}
 .demo .phrase-line{display:grid;grid-template-columns:minmax(0,1fr) 38px;align-items:center;gap:10px}
 .demo .phrase-line>div{min-width:0;overflow-wrap:anywhere}
 .demo .phrase-line .speak{flex-shrink:0}
}

/* Keep the game result container out of layout until a game supplies content. */
#activityOut:empty{display:none}
/* Do not add a second white surface around the uncropped front artwork. */
@media(max-width:640px){
 .demo .face.front,.demo .face.front img{background:transparent}
}