@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/inter-tight-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#141414; --mute:#6f6b63; --ground:#f6f4ef; --accent:#c4542f;
  --blue:#141414; --green:#141414; --red:#141414; --black:#141414; --coral:#ec6a4b; --paper:#fffdf8; --line:#dcd8cf;
  --font:"Inter Tight","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ground);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
html,body{overflow-x:clip}
body.locked{overflow:hidden}
a{color:inherit;text-decoration:none}

.nav{position:fixed;inset:0 0 auto 0;height:88px;display:flex;align-items:center;padding:0 5.4vw;z-index:50;opacity:0;transition:height .45s cubic-bezier(.2,.8,.2,1),background-color .45s,box-shadow .45s,backdrop-filter .45s}
.nav.scrolled{height:64px;background-color:rgba(246,244,239,.96);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:20px;letter-spacing:-.02em}
.brand img{width:28px;height:28px;border-radius:7px}
.links{margin-left:auto;display:flex;gap:34px;font-size:15px;font-weight:500;letter-spacing:-.01em}
.links span{display:inline-flex;align-items:center;gap:6px}
.links .dot{width:13px;height:13px;border-radius:50%;background:var(--ink);display:inline-block}
.icons{display:flex;gap:8px;margin-left:46px}
.icons i{width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.04)}

/* stage */
.stage{position:relative;height:100vh;overflow:hidden}
.silk{position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:
   radial-gradient(55% 38% at 18% 28%,rgba(255,255,255,.95),transparent 70%),
   radial-gradient(45% 30% at 82% 62%,rgba(255,255,255,.85),transparent 70%),
   radial-gradient(60% 40% at 40% 88%,rgba(255,255,255,.7),transparent 70%),
   radial-gradient(50% 35% at 70% 20%,rgba(226,226,226,.7),transparent 70%),
   radial-gradient(40% 30% at 30% 62%,rgba(228,228,228,.6),transparent 70%)}

.hero-h1{position:absolute;top:17vh;left:0;right:0;text-align:center;font-weight:500;font-size:clamp(36px,4.5vw,68px);line-height:1.08;letter-spacing:-.03em}
.mark{background:linear-gradient(var(--ink),var(--ink)) no-repeat 0 96%/var(--u,0%) .045em;padding-bottom:.06em}
.hero-plat{position:absolute;top:calc(70vh + 104px);left:0;right:0;text-align:center;font-size:13px;color:#6f6b63;opacity:0}
.hero-val{position:absolute;left:max(7vw,40px);right:max(7vw,40px);bottom:2.2vh;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,36px);opacity:0}
.hero-val div{border-top:1px solid var(--line);padding-top:12px;font-size:13px;color:#77726a;line-height:1.5}
.hero-val b{display:block;font-size:clamp(20px,1.8vw,28px);font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.hero-val b span{font-size:.6em;font-weight:500;color:#77726a;letter-spacing:0}
.hero-sub{position:absolute;top:70vh;color:#4b4740;left:0;right:0;text-align:center;font-size:clamp(16px,1.35vw,21px);letter-spacing:-.01em}
.hero-cta{position:absolute;top:calc(70vh + 44px);left:0;right:0;display:flex;justify-content:center;gap:10px}
.btn{height:46px;padding:0 28px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;letter-spacing:-.01em;white-space:nowrap}
.btn.dark{background:var(--black);color:#fff}
.btn.light{background:#ececec;color:var(--ink)}
.btn svg{width:15px;height:15px;fill:currentColor}

.cards{position:absolute;inset:0;perspective:1100px;pointer-events:none}
.card{position:absolute;left:50%;top:50%;width:var(--w);aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:#ddd;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.28),0 3px 8px rgba(0,0,0,.08);will-change:transform}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.card.c-print{aspect-ratio:auto;overflow:visible;background:var(--paper);padding:calc(var(--w)*.05) calc(var(--w)*.05) calc(var(--w)*.17);border-radius:calc(var(--w)*.075);box-shadow:0 1px 2px rgba(0,0,0,.05),0 22px 36px -22px rgba(0,0,0,.4)}
.card.c-print img{height:auto;aspect-ratio:3/4;border-radius:calc(var(--w)*.045)}
.card.c-print small{position:absolute;left:calc(var(--w)*.08);right:calc(var(--w)*.06);bottom:calc(var(--w)*.045);font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-size:calc(var(--w)*.072);color:#7d7568;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .kk{display:inline-block;align-self:flex-start;font-size:.62em;font-weight:600;padding:.35em .8em;border-radius:999px;background:rgba(255,255,255,.18)}
.card .src{font-size:.55em;opacity:.6;margin-top:auto}
.card{font-size:calc(var(--w) * .1)}
.c-portrait{background:#f3ead8}
.c-portrait img{height:78%}
.c-portrait .lab{height:22%;padding:.45em .7em;display:flex;flex-direction:column;justify-content:center;background:#fff}
.c-portrait .lab b{font-size:.78em;font-weight:600;letter-spacing:-.02em}
.c-portrait .lab span{font-size:.56em;color:#888;margin-top:.15em}
.c-ask,.c-quote,.c-listen{display:flex;flex-direction:column;gap:.6em;padding:.9em .85em}
.c-ask{background:#2a2722;color:#fff}
.c-ask b,.c-quote b{font-size:1.02em;font-weight:600;line-height:1.25;letter-spacing:-.02em}
.c-ask p,.c-quote p{font-size:.64em;line-height:1.5;opacity:.85}
.c-quote{background:#fff8ea;color:#2a2116}
.c-quote .kk{background:#2a2116;color:#fff}
.c-quote b{font-size:1.5em;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-weight:600}
.c-listen{background:#141414;color:#fff;align-items:center;text-align:center}
.c-listen .kk{align-self:center}
.bars{flex:1;width:100%;display:flex;align-items:center;justify-content:center;gap:3%}
.bars i{will-change:transform;display:block;width:3%;border-radius:2px;background:#ec6a4b;animation:eq 1.1s ease-in-out infinite alternate;transform-origin:center}
@keyframes eq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.c-listen .mic{width:2.4em;height:2.4em;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center}
.c-listen .mic svg{width:55%;height:55%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.c-skc{background:#fbfaf7}
.c-scene .cap{position:absolute;left:.6em;bottom:.6em;font-size:.55em;font-weight:600;color:#fff;background:rgba(0,0,0,.35);padding:.3em .6em;border-radius:999px;}

.tag{position:absolute;left:50%;top:50%;padding:.32em .78em .4em;border-radius:999px;color:#fff;font-size:clamp(14px,1.35vw,21px);font-weight:500;letter-spacing:-.02em;white-space:nowrap;opacity:0;z-index:30}
.tag::after{content:"";position:absolute;left:50%;bottom:-6px;width:13px;height:13px;background:inherit;border-radius:2px;transform:translateX(-50%) rotate(45deg);z-index:-1}
.tag.blue{background:var(--blue)} .tag.green{background:var(--green)} .tag.red{background:var(--red)} .tag.black{background:var(--black)}

.s2{position:absolute;left:7.3vw;top:0;width:44vw}
.kicker{position:absolute;top:10.2vh;left:7.3vw;font-size:13px;font-weight:600;letter-spacing:.32em}
.s2-h{position:absolute;top:13.4vh;left:7.3vw;font-weight:500;font-size:clamp(38px,4.6vw,72px);line-height:1.1;letter-spacing:-.035em}
.s2-h em{font-style:normal;color:var(--accent)}
.s2-p{position:absolute;top:47vh;left:7.3vw;width:25vw;min-width:280px;font-size:clamp(16px,1.3vw,20px);line-height:1.5;letter-spacing:-.01em}
.s2-cta{position:absolute;top:63vh;left:7.3vw;display:flex;gap:10px}
.arrows{position:absolute;right:5.2vw;top:51vh;display:flex;flex-direction:column;gap:8px;opacity:0}
.arrows i{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;font-style:normal;font-size:13px;color:#555}

/* gateway */
.gate{position:relative;padding:12vh 0 0}
.gate-k{margin-left:7.3vw;font-size:13px;font-weight:600;letter-spacing:.3em}
.gate-h{margin:12px 0 0 7.3vw;font-weight:500;font-size:clamp(40px,4.6vw,72px);line-height:1.08;letter-spacing:-.035em;position:relative}
.gate .tag{position:absolute;left:auto;top:auto;right:8vw;margin-top:-56px;transform:rotate(-6deg)}
.banner{position:relative;margin:4vh 7.3vw 0;height:max(84vh,700px);border-radius:24px;overflow:hidden;background:#fcf7ed;box-shadow:0 1px 0 rgba(0,0,0,.04),0 40px 80px -60px rgba(0,0,0,.4)}
.bart{position:absolute;inset:0;z-index:0}
.bart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:0}
.banner::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#fcf7ed 0%,rgba(252,247,237,.94) 28%,rgba(252,247,237,.55) 40%,rgba(252,247,237,0) 52%)}
.scn{position:absolute;left:5%;top:0;bottom:0;width:31%;display:flex;flex-direction:column;justify-content:center;color:#1d1b17;z-index:3}
.scn-i{all:unset;display:block;cursor:pointer;padding:16px 0 15px;border-top:1px solid rgba(29,27,23,.12);opacity:.45;transition:opacity .35s}
.scn-i:last-child{border-bottom:1px solid rgba(29,27,23,.12)}
.scn-i:hover{opacity:.8}.scn-i.on{opacity:1;cursor:default}
.scn-i .tm{font-size:13px;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:#c4542f;font-weight:600}
.scn-i h3{text-wrap:balance;margin-top:5px;font-weight:500;font-size:clamp(20px,1.6vw,25px);letter-spacing:-.025em;line-height:1.2;transition:font-size .45s cubic-bezier(.2,.8,.2,1)}
.scn-i.on h3{font-size:clamp(28px,2.5vw,40px)}
.scn-i .bd{height:0;overflow:hidden}
.scn-i .bd p{padding-top:12px;font-size:clamp(15px,1.12vw,17px);line-height:1.7;color:#4a463f}
.scn-i .bd small{display:block;margin-top:10px;font-size:13px;color:#6f6b63}
.banner .phone{position:absolute;right:5%;top:50%;width:min(37vh,25vw,370px);translate:0 -50%;z-index:2}
.bhint{position:absolute;right:calc(5% + min(37vh,25vw,370px) + 18px);bottom:7%;max-width:min(240px,22vw);text-align:right;color:#1d1b17;font-size:14px;line-height:1.55;z-index:3;padding:9px 13px;border-radius:14px;background:rgba(252,247,237,.95)}
.bhint::after{content:" →";color:#c4542f;font-weight:600}
.bhint:empty{display:none}
.banner .phone.wide + .bhint::after{content:none}
.banner .phone.wide + .bhint{right:3.5%;left:auto;width:min(42vw,600px);max-width:none;text-align:center;bottom:4%;top:auto;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.replay{position:absolute;right:26px;bottom:24px;height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(29,27,23,.2);background:rgba(252,247,237,.85);color:#1d1b17;font:500 14px var(--font);cursor:pointer;z-index:5;transition:background .2s}
.replay:hover{background:#fff}
.replay{left:5%;right:auto}
.ghost{position:absolute;left:0;top:0;width:26px;height:26px;margin:-4px 0 0 -6px;z-index:9;pointer-events:none;opacity:0;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}

/* demo pages inside the phone */
.dp{position:relative;padding:1cqw 7cqw 0;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.dhd{display:flex;justify-content:space-between;align-items:center;font-size:3.4cqw;color:#9a958b;margin:1cqw 0 6cqw}
.ptx{font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-size:4.6cqw;line-height:1.8;color:#2a2722;margin:0 0 4cqw;position:relative;transition:background .6s}
.ptx.cur{box-shadow:-3.4cqw 0 0 -2.2cqw #ec6a4b}
.ptx.flash{background:rgba(236,106,75,.14);border-radius:2cqw}
.nm{text-decoration:underline;text-decoration-color:rgba(236,106,75,.55);text-decoration-thickness:.16em;text-underline-offset:.28em;cursor:pointer}
.dz{cursor:pointer;border-radius:1cqw;transition:background .3s;background-image:linear-gradient(90deg,#c9c3b6 50%,transparent 50%);background-size:1.6cqw .35cqw;background-repeat:repeat-x;background-position:0 100%}
.dz.sel{background:#ffd98a;box-shadow:0 0 0 .6cqw #ffd98a}
.mn2{position:absolute;display:flex;background:#141414;color:#fff;border-radius:2.6cqw;font-size:3.8cqw;font-weight:600;overflow:hidden;box-shadow:0 3cqw 7cqw -2cqw rgba(0,0,0,.45);opacity:0;white-space:nowrap;z-index:4}
.mn2 span{padding:2.4cqw 3.6cqw;cursor:pointer}
.mn2 span:first-child{background:#c4542f}
.ex2{overflow:hidden;height:0;margin:3cqw 0 4cqw}
.ex2 .in{padding:4cqw 4.4cqw;border-radius:3.4cqw;background:#fff;border:.45cqw solid #e9e4d8;font-size:4.1cqw;line-height:1.7;color:#2a2722}
.ex2 b{display:block;font-size:3.6cqw;color:#c4542f;margin-bottom:1.4cqw}
.ex2 .more{display:inline-block;margin-top:2.6cqw;font-size:3.6cqw;font-weight:600;color:#2a2722;cursor:pointer;opacity:0}
.vn{overflow:hidden;height:0;margin:0 0 4cqw}
.vn .in{padding:3.8cqw 4.2cqw;border-left:.9cqw solid #141414;background:#f1ece1;font-size:4.1cqw;line-height:1.65}
.vn .q{display:block;color:#8a8275;font-size:3.6cqw;margin-bottom:1cqw}
.bm{position:absolute;left:-5.6cqw;top:0;width:2.6cqw;height:5cqw;background:#ec6a4b;clip-path:polygon(0 0,100% 0,100% 100%,50% 75%,0 100%);opacity:0}
.cap2{position:absolute;left:6cqw;right:6cqw;bottom:6cqw;height:15cqw;border-radius:7.5cqw;background:#141414;display:flex;align-items:center;gap:3cqw;padding:0 3cqw 0 3cqw;z-index:3}
.cap2 .pp{width:10cqw;height:10cqw;border-radius:50%;background:#2a2a2a;color:#fff;display:grid;place-items:center;font-size:3.4cqw}
.cap2 .wv{flex:1;display:flex;gap:1.2cqw;align-items:center;height:52%;transition:opacity .4s}
.cap2 .wv i{flex:1;height:100%;border-radius:1cqw;background:#ec6a4b;animation:eq 1s ease-in-out infinite alternate}
.cap2.dip .wv{opacity:.25}
.cap2 .mic{width:10cqw;height:10cqw;border-radius:50%;background:#ec6a4b;display:grid;place-items:center;cursor:pointer}
.cap2 .mic svg{width:52%;height:52%;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.said{position:absolute;right:6cqw;bottom:25cqw;max-width:74%;background:#141414;color:#fff;font-size:4cqw;line-height:1.45;padding:2.8cqw 4cqw;border-radius:4cqw 4cqw 1cqw 4cqw;opacity:0;z-index:3;cursor:pointer}
.said.ok{background:#ec6a4b}
.toast{position:absolute;left:50%;bottom:25cqw;translate:-50% 0;background:rgba(20,20,20,.86);color:#fff;font-size:3.6cqw;padding:2cqw 3.6cqw;border-radius:99px;opacity:0;white-space:nowrap;z-index:3}
.sheet{position:absolute;left:0;right:0;bottom:0;height:74%;background:#fff;border-radius:6cqw 6cqw 0 0;box-shadow:0 -4cqw 12cqw -6cqw rgba(0,0,0,.35);padding:5cqw 6cqw;z-index:4}
.sheet .grab{width:12cqw;height:1.3cqw;border-radius:1cqw;background:#ddd;margin:-1.6cqw auto 4cqw}
.sheet .shh{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 5cqw;font-size:inherit;letter-spacing:0;line-height:1.4}
.sheet .shh b{font-size:5cqw}.sheet .shh span{font-size:3.4cqw;color:#999}
.qb{display:none;margin-left:auto;width:fit-content;max-width:80%;background:#2a2722;color:#fff;font-size:4cqw;line-height:1.45;padding:2.8cqw 4cqw;border-radius:4cqw 4cqw 1cqw 4cqw}
.srch{display:none;margin-top:5cqw;font-size:3.6cqw;color:#8a8275}
.srch .book{position:relative;height:3cqw;border-radius:1cqw;margin-top:2.4cqw;overflow:hidden;background:repeating-linear-gradient(90deg,#e8e2d5 0 .5cqw,#f6f2ea .5cqw 1cqw)}
.srch .book i{position:absolute;top:0;bottom:0;width:18%;background:linear-gradient(90deg,transparent,rgba(236,106,75,.85),transparent);left:-20%}
.an2{margin-top:5cqw;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-size:4.4cqw;line-height:1.75;color:#2a2722}
.an2 b{font-family:var(--font);font-weight:600}
.bk2{display:inline-block;margin-top:3cqw;font-size:3.7cqw;font-weight:600;color:#2a2722;background:#e8edfc;border-radius:99px;padding:1.8cqw 3.6cqw;cursor:pointer;opacity:0}
.inp2{position:absolute;left:6cqw;right:6cqw;bottom:6cqw;height:12.5cqw;border-radius:6.25cqw;border:.45cqw solid #e2ddd2;display:flex;align-items:center;justify-content:space-between;padding:0 2cqw 0 4.4cqw;color:#aaa;font-size:3.9cqw;cursor:text;background:#fff}
.inp2.typing{color:#141414}
.inp2 .send{width:8.6cqw;height:8.6cqw;border-radius:50%;background:#141414;color:#fff;display:grid;place-items:center;font-size:4cqw}
.pc2{position:absolute;left:0;right:0;bottom:0;height:80%;background:#fff;border-radius:6cqw 6cqw 0 0;box-shadow:0 -4cqw 12cqw -6cqw rgba(0,0,0,.35);padding:5cqw 7cqw;z-index:4;text-align:center}
.pc2 .fw{position:relative;width:40cqw;height:40cqw;margin:0 auto;border-radius:50%;box-shadow:0 0 0 1.6cqw #f3ead8;overflow:hidden;background:#f3ead8}
.pc2 .fw img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s}
.pc2 b{display:block;margin-top:5cqw;font-size:5.4cqw}
.pc2 .role{display:block;margin-top:1cqw;font-size:3.6cqw;color:#8a8275}
.pc2 .yrs{display:flex;justify-content:center;gap:2cqw;margin-top:6cqw}
.pc2 .yrs span{font-size:3.5cqw;font-weight:600;padding:1.6cqw 3.4cqw;border-radius:99px;background:#f1ede4;color:#8a8275;cursor:pointer;transition:background .3s,color .3s}
.pc2 .yrs span.on{background:#141414;color:#fff}
.pc2 .cap{display:block;margin-top:3cqw;font-size:3.4cqw;color:#a39c8f}
.pc2 .tl{margin-top:7cqw;text-align:left;border-top:.3cqw solid #eee6d8;padding-top:4cqw}
.pc2 .tl .r{position:relative;padding:2.6cqw 0 2.6cqw 4cqw;border-left:.3cqw solid #eee6d8}
.pc2 .tl .r small{display:block;font-size:3.2cqw;color:#a39c8f;margin-bottom:1.4cqw}
.pc2 .tl .r .ln{margin:1.6cqw 0}
.pc2 .tl .r.me::before{content:"";position:absolute;left:-1.5cqw;top:3cqw;width:2.6cqw;height:4.4cqw;background:#ec6a4b;clip-path:polygon(0 0,100% 0,100% 100%,50% 75%,0 100%)}
.pulse{animation:pulse 1.5s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(236,106,75,.55)}100%{box-shadow:0 0 0 3.5cqw rgba(236,106,75,0)}}
.ptx .pulse,.dz.pulse,.nm.pulse{animation:none;background-color:rgba(236,106,75,.16);border-radius:1cqw}
.dots3{position:absolute;right:28px;top:22px;z-index:5;color:#fff;font-size:18px;letter-spacing:2px}
.pager{position:absolute;right:26px;bottom:26px;display:flex;gap:8px;z-index:5}
.pager button{width:40px;height:40px;border-radius:50%;border:0;background:#fff;font:600 13px var(--font);cursor:pointer}


.trust{padding:14vh 0 16vh}
.trust-h{margin:0 7.3vw;text-wrap:balance;font-weight:500;font-size:clamp(30px,3vw,46px);letter-spacing:-.035em}
.trust-h .g{color:#9a9a9a}
.trust-p{margin:12px 0 0 7.3vw;font-size:16px;color:var(--mute)}
.devstage{position:relative;width:min(88vw,1240px);margin:8vh auto 0;padding-top:84px;display:flex;align-items:flex-end;justify-content:center;gap:clamp(16px,2.6vw,40px)}
.dv{position:relative;margin:0;flex:none;display:flex;flex-direction:column;align-items:center;transition:translate .55s cubic-bezier(.2,.8,.2,1),opacity .6s}
.dv:hover{translate:0 -8px}
.dv .fr,.dv .mac-base,.dv .dvc{transition:opacity .6s}
.devstage.live .dv:not(.on) .fr,.devstage.live .dv:not(.on) .mac-base,.devstage.live .dv:not(.on) figcaption{opacity:.42}
.dv .dvc{display:block;margin-top:20px;text-align:center;width:max-content;max-width:15em}
.dv .dvc b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.dv .dvc .when{display:block;margin-top:3px;font-size:13px;color:#6f6b63}
.dv .dvc .line{display:block;margin-top:8px;font-size:13.5px;line-height:1.5;color:#555}
.fr{position:relative;background:#141414;box-shadow:0 34px 50px -34px rgba(0,0,0,.55)}
.fr .scr{position:relative;width:100%;height:100%;overflow:hidden;background:#fbfaf7}
.f-iphone{width:clamp(64px,8.6vw,124px);aspect-ratio:9/19.5;border-radius:18%/8.3%;padding:3.4%}
.f-iphone .scr{border-radius:15%/7%}
.f-android{width:clamp(64px,8.6vw,124px);aspect-ratio:9/20;border-radius:10%/4.6%;padding:2.8%;background:#25272b}
.f-android .scr{border-radius:8%/3.6%}
.f-ipad{width:clamp(130px,17.5vw,250px);aspect-ratio:3/4;border-radius:6.5%/4.9%;padding:3.6%}
.f-ipad .scr{border-radius:3%/2.2%}
.mac{display:flex;flex-direction:column;align-items:center}
.f-mac{width:clamp(250px,33vw,470px);aspect-ratio:16/10.4;border-radius:3% 3% 0 0/4.6% 4.6% 0 0;padding:1.8% 1.8% 2.6%;box-shadow:none}
.f-mac .scr{border-radius:.6%}
.mac-base{position:relative;width:118%;height:clamp(8px,1vw,14px);background:linear-gradient(#e4e4e4,#bdbdbd);border-radius:0 0 14px 14px/0 0 12px 12px;box-shadow:0 30px 40px -26px rgba(0,0,0,.55)}
.mac-base::before{content:"";position:absolute;left:50%;top:0;width:16%;height:38%;translate:-50% 0;background:#c9c9c9;border-radius:0 0 8px 8px}
.rpg{container-type:inline-size;position:absolute;inset:0}
.rpg .in{position:absolute;left:0;right:0;top:0;padding:0 9cqw}
.rpg .bar{height:11cqw;display:flex;align-items:center;justify-content:space-between;font-size:3.6cqw;font-weight:600;color:#141414}
.rpg .bar .isl{width:24cqw;height:7cqw;border-radius:4cqw;background:#141414}
.rpg .hole{width:4.6cqw;height:4.6cqw;border-radius:50%;background:#141414}
.rpg .tt{height:4.4cqw;width:46%;border-radius:1.4cqw;background:#2a2722;margin:5cqw 0 6cqw}
.rpg i.l{display:block;height:2.4cqw;border-radius:1.2cqw;background:#e6e2da;margin:3.2cqw 0}
.rpg .para{position:relative;margin:5cqw -3cqw;padding:2.2cqw 3cqw;border-radius:2cqw;transition:background .6s}
.rpg .para i.l{transition:background .6s}
.rpg .para.cur{background:rgba(236,106,75,.10)}
.rpg .para.cur i.l{background:#e9a48f}
.rpg .para::before{content:"";position:absolute;left:0;top:2cqw;bottom:2cqw;width:1.2cqw;border-radius:1cqw;background:#ec6a4b;scale:1 0;transition:scale .5s cubic-bezier(.2,.8,.2,1)}
.rpg .para.cur::before{scale:1 1}
.rpg .mk{position:absolute;right:2cqw;top:-4.2cqw;font-size:3.6cqw;font-weight:600;color:#fff;background:#ec6a4b;padding:1cqw 2.6cqw;border-radius:99px;opacity:0;scale:.6;transition:opacity .35s,scale .45s cubic-bezier(.3,1.6,.5,1)}
.rpg .para.cur .mk{opacity:1;scale:1}
.rpg .pic{display:block;width:calc(100% + 18cqw);margin:4cqw -9cqw;aspect-ratio:3/2;object-fit:cover}
.rpg .cap{position:absolute;left:7cqw;right:7cqw;bottom:6cqw;height:12cqw;border-radius:6cqw;background:#141414;display:flex;align-items:center;gap:2cqw;padding:0 2.4cqw 0 5cqw}
.rpg .cap i{flex:1;height:44%;border-radius:1cqw;background:#ec6a4b;animation:eq 1s ease-in-out infinite alternate}
.rpg .cap b{width:8cqw;height:8cqw;border-radius:50%;background:#ec6a4b;flex:none}
.rpg.web{display:grid;grid-template-columns:19% 1fr 27%}
.rpg.web .rail,.rpg.web .side{padding:3cqw 2cqw;border-right:.2cqw solid #eee;display:flex;flex-direction:column;gap:1.6cqw}
.rpg.web .side{border-right:0;border-left:.2cqw solid #eee}
.rpg.web .rail i,.rpg.web .side i{display:block;height:1.1cqw;border-radius:.6cqw;background:#e6e2da}
.rpg.web .rail i.on{background:#2a2722}
.rpg.web .side .q{align-self:flex-end;width:70%;height:3.6cqw;border-radius:1.6cqw 1.6cqw .4cqw 1.6cqw;background:#2a2722}
.rpg.web .mid{position:relative;overflow:hidden}
.rpg.web .mid .in{padding:0 5cqw}
.rpg.web .tt{height:2.2cqw;margin:4cqw 0 3cqw}
.rpg.web i.l{height:1.2cqw;margin:1.7cqw 0}
.rpg.web .para{margin:3cqw -1.6cqw;padding:1.2cqw 1.6cqw;border-radius:1cqw}
.rpg.web .para::before{width:.6cqw;top:1cqw;bottom:1cqw}
.rpg.web .mk{font-size:1.5cqw;top:-2.2cqw;padding:.5cqw 1.2cqw}
.rpg.ipad .bar{height:7cqw;font-size:2.6cqw}
.rpg.ipad .tt{height:3cqw;margin:3cqw 0 4cqw}
.rpg.ipad i.l{height:1.7cqw;margin:2.3cqw 0}
.rpg.ipad .para{margin:3.4cqw -2cqw;padding:1.6cqw 2cqw}
.rpg.ipad .mk{font-size:2.4cqw;top:-3cqw}
.devarc{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:5}
.devarc path{fill:none;stroke:#ec6a4b;stroke-width:1.6;stroke-dasharray:4 5;opacity:.85}
.devarc circle{fill:#ec6a4b}
.syncpill{position:absolute;z-index:6;top:0;left:0;translate:-50% 0;white-space:nowrap;font-size:13px;font-weight:600;background:#141414;color:#fff;padding:7px 13px;border-radius:99px;opacity:0;box-shadow:0 10px 20px -10px rgba(0,0,0,.5)}
.syncpill::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#ec6a4b;margin-right:7px;vertical-align:1px}
@media (max-width:900px){.dv .dvc .line{display:none}.devstage{gap:14px}}


.w{display:inline-block;white-space:pre}
.ico{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}


/* ---------- skeleton mockups: grey bones, one feature in colour, a callout pointing at it ---------- */
.skphone{position:relative;aspect-ratio:9/19.5;border-radius:14%/6.5%;background:#141414;padding:2.8%;box-shadow:0 40px 70px -30px rgba(0,0,0,.45)}
.skphone .scr{position:relative;width:100%;height:100%;border-radius:11.5%/5.3%;overflow:hidden}
.skp{container-type:inline-size;position:relative;width:100%;height:100%;background:#fbfaf7;overflow:hidden;color:#141414;font-family:var(--font)}
.skp .pad{padding:3cqw 8cqw 0}
.sbar{position:relative;z-index:2;background:#fbfaf7;display:flex;justify-content:space-between;align-items:center;height:12cqw;padding:0 8cqw;font-size:3.6cqw;font-weight:600}
.sbar .isl{width:26cqw;height:7.4cqw;border-radius:4cqw;background:#141414}
.skp .ttl{display:block;height:4.8cqw;width:56%;background:#1d1d1d;border-radius:1.4cqw;margin:3cqw 0 6cqw}
.skp .ln{display:block;height:2.6cqw;border-radius:1.3cqw;background:#e5e2db;margin:3.4cqw 0}
.skp .ln.d{background:#bdb9b0}
.skp .selrow{position:relative;display:flex;gap:1.8cqw;align-items:center;margin:3.4cqw 0}
.skp .selrow .ln{margin:0;flex:0 0 auto}
.skp .sel{display:block;height:4.4cqw;border-radius:1cqw;background:#ffd98a;box-shadow:0 0 0 .6cqw #f0b43c}
.skp .menu{position:absolute;left:12%;bottom:calc(100% + 2.6cqw);display:flex;background:#141414;color:#fff;border-radius:2.6cqw;font-size:3.7cqw;font-weight:600;overflow:hidden;box-shadow:0 3cqw 7cqw -2cqw rgba(0,0,0,.4);white-space:nowrap}
.skp .menu span{padding:2.3cqw 3.4cqw}
.skp .menu .on{background:#2a2722}
.skp .exp{margin:5cqw 0;padding:4cqw 4.4cqw;border-radius:3.4cqw;background:#fff;border:.45cqw solid #e9e4d8;box-shadow:0 3cqw 8cqw -4cqw rgba(0,0,0,.25)}
.skp .exp b{display:block;font-size:3.8cqw;color:#2a2722;margin-bottom:1cqw}
.skp .cur{border-left:1.3cqw solid #ec6a4b;padding-left:3cqw;margin-left:-4.3cqw}
.skp .note{display:block;margin:5cqw 0;padding:3.8cqw 4.2cqw;border-left:.9cqw solid #141414;background:#f1ece1;font-family:"Kaiti SC","STKaiti","KaiTi",serif;font-size:4cqw;line-height:1.5}
.skp .note .q{display:block;color:#7a7266}
.skp .capsule{position:absolute;left:7cqw;right:7cqw;bottom:7cqw;height:15cqw;border-radius:7.5cqw;background:#141414;display:flex;align-items:center;gap:3cqw;padding:0 3cqw 0 6cqw}
.skp .wv{flex:1;display:flex;gap:1.3cqw;align-items:center;height:56%}
.skp .wv i{flex:1;height:100%;border-radius:1cqw;background:#ec6a4b;animation:eq 1s ease-in-out infinite alternate}
.skp .mic{width:10cqw;height:10cqw;border-radius:50%;background:#ec6a4b;display:grid;place-items:center;box-shadow:0 0 0 2cqw rgba(236,106,75,.25)}
.skp .mic svg{width:52%;height:52%;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.skp .ahd{display:flex;justify-content:space-between;align-items:baseline;margin:2cqw 0 7cqw}
.skp .ahd b{font-size:5.4cqw;letter-spacing:-.02em}
.skp .ahd span{font-size:3.4cqw;color:#999}
.skp .bub{display:block;margin-left:auto;width:fit-content;max-width:76%;background:#2a2722;color:#fff;font-size:4cqw;line-height:1.4;padding:3cqw 4cqw;border-radius:4cqw 4cqw 1cqw 4cqw}
.skp .ans{display:block;margin-top:6cqw;font-size:4.6cqw;font-weight:600;line-height:1.4}
.skp .back{display:inline-block;margin-top:2cqw;font-size:3.5cqw;font-weight:600;color:#2a2722;padding:1.8cqw 3.4cqw;border-radius:99px;background:#e8edfc}
.skp .inp{position:absolute;left:7cqw;right:7cqw;bottom:7cqw;height:12.5cqw;border-radius:6.25cqw;background:#fff;border:.45cqw solid #e2ddd2;display:flex;align-items:center;padding:0 4.4cqw;color:#aaa;font-size:3.8cqw}
.skp .spic{display:block;width:calc(100% + 16cqw);margin:5cqw -8cqw;aspect-ratio:3/2;object-fit:cover;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.skp .face{display:flex;gap:4cqw;align-items:center;margin:2cqw 0 5cqw}
.skp .face img{width:22cqw;height:22cqw;border-radius:50%;object-fit:cover;background:#f3ead8}
.skp .face b{display:block;font-size:5cqw}.skp .face span{font-size:3.4cqw;color:#999}
.call{position:absolute;z-index:3;padding:1.8cqw 3.6cqw 2.2cqw;border-radius:99px;color:#fff;font-size:4.3cqw;font-weight:600;white-space:nowrap;letter-spacing:-.01em;box-shadow:0 2cqw 5cqw -2cqw rgba(0,0,0,.4)}
.call::after{content:"";position:absolute;left:var(--tx,50%);bottom:-1.4cqw;width:3.4cqw;height:3.4cqw;background:inherit;border-radius:.5cqw;transform:translateX(-50%) rotate(45deg);z-index:-1}
.call.up::after{bottom:auto;top:-1.4cqw}
.call.blue{background:#2a2722}.call.red{background:#141414}.call.green{background:#141414}.call.black{background:#141414}

.skb{container-type:inline-size;position:relative;width:100%;aspect-ratio:16/10.5;background:#fff;border-radius:1.4cqw;overflow:hidden;box-shadow:0 4cqw 8cqw -4cqw rgba(0,0,0,.35);border:.15cqw solid #e6e3dc;font-family:var(--font)}
.skb .bbar{height:4.4cqw;background:#f1efea;display:flex;align-items:center;gap:.7cqw;padding:0 1.6cqw}
.skb .bbar i{width:1.1cqw;height:1.1cqw;border-radius:50%;background:#d6d2c8}
.skb .url{margin-left:2cqw;width:32%;height:2.6cqw;border-radius:1.3cqw;background:#fff;font-size:1.3cqw;color:#888;display:flex;align-items:center;padding:0 1.4cqw}
.skb .panes{display:grid;grid-template-columns:20% 1fr 28%;height:calc(100% - 4.4cqw)}
.skb .rail,.skb .side{padding:2.6cqw 1.8cqw;display:flex;flex-direction:column;gap:1.5cqw}
.skb .rail{border-right:.15cqw solid #eee}.skb .side{border-left:.15cqw solid #eee;position:relative}
.skb .rail i,.skb .side i,.skb .main i{display:block;height:1cqw;border-radius:.5cqw;background:#e5e2db}
.skb .rail i.on{background:#141414}
.skb .main{padding:3.6cqw 4.4cqw;display:flex;flex-direction:column;gap:1.5cqw;background:#fbfaf7}
.skb .main .t{height:2.3cqw;width:44%;background:#1d1d1d;border-radius:.6cqw;margin-bottom:1.6cqw}
.skb .main i.sel{background:#ffd98a;height:1.5cqw;box-shadow:0 0 0 .3cqw #f0b43c}
.skb .side b{font-size:1.6cqw;margin-bottom:.6cqw}
.skb .side .q{align-self:flex-end;background:#2a2722;color:#fff;font-size:1.35cqw;padding:1cqw 1.4cqw;border-radius:1.4cqw 1.4cqw .4cqw 1.4cqw;max-width:88%}
.skb .side .a{font-size:1.5cqw;font-weight:600;margin-top:.8cqw}
.skb .side .in{position:absolute;left:1.8cqw;right:1.8cqw;bottom:2cqw;height:3.6cqw;border-radius:1.8cqw;border:.15cqw solid #e2ddd2;font-size:1.25cqw;color:#aaa;display:flex;align-items:center;padding:0 1.2cqw}
.skb .call{font-size:1.5cqw;padding:.7cqw 1.4cqw .9cqw}
.skb .call::after{width:1.3cqw;height:1.3cqw;bottom:-.55cqw}


/* interaction details: separate translate/scale properties so they never fight GSAP's transforms */
.btn,.bcta,.replay,.viewall{transition:translate .45s cubic-bezier(.2,.8,.2,1),scale .16s ease,background .25s,box-shadow .35s;cursor:pointer}
.btn:active,.bcta:active,.replay:active,.viewall:active,.scn-i:active{scale:.96}
.btn.dark:hover{box-shadow:0 14px 28px -12px rgba(0,0,0,.55)}
.btn.light:hover{background:#e3e3e3}
.links span{position:relative;cursor:pointer}
.links span::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.links span:hover::after{transform:scaleX(1);transform-origin:left}
.bc,.ec,.sf{transition:translate .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.bc:hover,.ec:hover{translate:0 -6px;box-shadow:0 36px 60px -34px rgba(0,0,0,.5)}
.sf{cursor:pointer}.sf:hover{translate:0 -4px}
.sf .t img{transition:scale .6s cubic-bezier(.2,.8,.2,1),rotate .6s cubic-bezier(.2,.8,.2,1)}
.sf:hover .t img{scale:1.08;rotate:3deg}
.tile,.gt{transition:scale .4s cubic-bezier(.2,.8,.2,1)}
.tile:hover,.gt:hover{scale:1.12}
.pc{transition:translate .5s cubic-bezier(.2,.8,.2,1)}.pc:hover{translate:0 -8px}

/* Slack off mode demo: a laptop whose book hides inside work tools (web reader desk mode, desk-mode-design 2026-09-17) */
.banner .phone.wide{width:min(42vw,600px);right:3.5%}
.lapw{display:flex;flex-direction:column;align-items:center}
.lap{position:relative;width:100%;aspect-ratio:16/10.4;background:#141414;border-radius:2.4% 2.4% 0 0/3.6% 3.6% 0 0;padding:1.6% 1.6% 2.2%;box-shadow:0 40px 60px -36px rgba(0,0,0,.55)}
.lap .scr{container-type:inline-size;position:relative;width:100%;height:100%;overflow:hidden;border-radius:.5%;background:#fff}
.lapbase{width:116%;height:clamp(9px,1vw,14px);background:linear-gradient(#e6e6e6,#bdbdbd);border-radius:0 0 14px 14px}
.keys{display:flex;gap:16px;margin-top:22px}
.kw{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12.5px;color:#6b665c}
.key{all:unset;min-width:58px;height:44px;padding:0 14px;box-sizing:border-box;border-radius:10px;background:#fff;border:1px solid #d9d4c8;box-shadow:0 4px 0 #d3cdbf,0 10px 18px -12px rgba(0,0,0,.35);display:grid;place-items:center;font:600 15px var(--font);color:#1d1b17;cursor:pointer;transition:translate .09s,box-shadow .09s}
.key.down{translate:0 4px;box-shadow:0 0 0 #d3cdbf,0 4px 8px -6px rgba(0,0,0,.3)}
.key.pulse{animation:keypulse 1.5s ease-out infinite}
@keyframes keypulse{0%{box-shadow:0 4px 0 #d3cdbf,0 0 0 0 rgba(236,106,75,.55)}100%{box-shadow:0 4px 0 #d3cdbf,0 0 0 12px rgba(236,106,75,0)}}
.bb{position:absolute;left:0;right:0;top:0;height:6.4cqw;background:#e9e9e9;display:flex;align-items:flex-end;gap:1cqw;padding:0 2cqw}
.bb .dots{display:flex;gap:.8cqw;align-self:center;margin-right:2cqw}.bb .dots i{width:1.3cqw;height:1.3cqw;border-radius:50%;background:#c9c9c9}
.bb .tab{height:4.6cqw;min-width:30cqw;padding:0 2cqw;border-radius:1.2cqw 1.2cqw 0 0;background:#fff;font-size:1.75cqw;color:#333;display:flex;align-items:center;gap:1.2cqw}
.bb .tab b{width:2cqw;height:2cqw;border-radius:.5cqw;background:#888}
.ds{position:absolute;left:0;right:0;top:6.4cqw;bottom:0;opacity:0;transition:opacity .18s}
.ds.on{opacity:1}
.bk{transition:opacity .15s}
.ds.code{background:#1f2128;display:grid;grid-template-columns:5cqw 21cqw 1fr;font-family:ui-monospace,Menlo,monospace}
.ds.code .act{background:#2a2c33}.ds.code .tree{background:#24262c;padding:2cqw 1.6cqw}
.ds.code .tree i{display:block;height:1.1cqw;border-radius:.6cqw;background:#3b3e47;margin:1.6cqw 0}
.ds.code .tree i.on{background:#56607a}
.ds.code .ed{padding:2.2cqw 2.4cqw;font-size:1.7cqw;line-height:3.1cqw;color:#c8ccd4;overflow:hidden}
.ds.code .ln{display:flex;gap:2cqw;white-space:nowrap}
.ds.code .ln em{font-style:normal;color:#5a5e68;width:3cqw;text-align:right;flex:none}
.ds.code .c{display:inline-block;height:1.2cqw;border-radius:.6cqw;vertical-align:middle;margin-right:1cqw}
.ds.code .cm{color:#7fa86a}
.ds.xl{background:#fff;font-size:1.6cqw;color:#333}
.ds.xl .rib{height:5cqw;background:#1f7244;display:flex;align-items:center;gap:1.4cqw;padding:0 2cqw}.ds.xl .rib i{width:7cqw;height:1.2cqw;border-radius:.6cqw;background:rgba(255,255,255,.45)}
.ds.xl table{width:100%;border-collapse:collapse;table-layout:fixed}
.ds.xl td,.ds.xl th{border:.15cqw solid #e3e3e3;height:4.4cqw;padding:0 1cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}
.ds.xl th{background:#f3f3f3;color:#777;font-size:1.4cqw}
.ds.xl td i{display:inline-block;height:1.1cqw;border-radius:.6cqw;background:#e2e2e2}
.ds.xl tr.sel td{background:#e8f2ec}.ds.xl tr.sel td.sum{box-shadow:inset 0 0 0 .3cqw #1f7244}
.ds.chat{background:#fff;display:grid;grid-template-columns:24cqw 1fr;font-size:1.75cqw}
.ds.chat .side{background:#f4f5f7;padding:2cqw 1.6cqw;display:flex;flex-direction:column;gap:2cqw}
.ds.chat .side div{display:flex;gap:1.2cqw;align-items:center}.ds.chat .side b{width:4cqw;height:4cqw;border-radius:1cqw;background:#cfd6e4;flex:none}
.ds.chat .side i{display:block;height:1.1cqw;border-radius:.6cqw;background:#dfe2e8;flex:1}
.ds.chat .side div.on{background:#e3e9f7;border-radius:1.2cqw;padding:.8cqw}
.ds.chat .main{padding:2cqw 3cqw;display:flex;flex-direction:column;gap:2.2cqw}
.ds.chat .hd{height:2cqw;width:30%;border-radius:1cqw;background:#e4e6ea;margin-bottom:1cqw}
.ds.chat .m{display:flex;gap:1.4cqw;align-items:flex-start}
.ds.chat .m b{width:4.4cqw;height:4.4cqw;border-radius:50%;background:#c6cfdf;flex:none}
.ds.chat .m small{display:block;font-size:1.35cqw;color:#999;margin-bottom:.6cqw}
.ds.chat .m span.bub{display:inline-block;background:#f2f3f5;border-radius:.4cqw 1.6cqw 1.6cqw 1.6cqw;padding:1.2cqw 1.8cqw;line-height:1.55;color:#222}
/* 4 · sentence over a shuffling deck */
.s4{position:relative;height:100vh;overflow:hidden}
.s4-sent{position:absolute;left:0;right:0;top:36vh;padding:0 8vw;text-align:center;font-weight:500;font-size:clamp(30px,3.4vw,54px);line-height:1.3;letter-spacing:-.03em;z-index:1}
.s4-sent .w{color:#cdcdcd}
.inl{display:inline-block;vertical-align:-.12em;margin:0 .18em}
.inl.av{width:.85em;height:.85em;border-radius:50%;overflow:hidden;background:#ddd}
.inl.av img,.inl.st img{width:100%;height:100%;object-fit:cover;display:block}
.inl.st{width:.62em;height:.92em;border-radius:3px;overflow:hidden;transform:rotate(-9deg)}
.s4-icons{position:absolute;left:50%;top:70vh;transform:translateX(-50%);display:flex;gap:8px;z-index:1}
.s4-icons i{width:26px;height:26px;padding:5px;border-radius:50%;background:#fff;color:#111;display:block;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.dk{position:absolute;left:50%;top:50%;width:var(--w4);aspect-ratio:2/3;z-index:2}
.dk .in{width:100%;height:100%;border-radius:12px;overflow:hidden;background:#ddd;box-shadow:0 18px 36px -14px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.08)}
.dk img{width:100%;height:100%;object-fit:cover;display:block}
.dk .in{position:relative}
.dk .face{position:absolute;inset:0;background:#f3ead8}
.dk.txt .in{background:#fff;padding:12% 11%;display:flex;flex-direction:column;justify-content:space-between}
.dk.txt b{font-size:clamp(13px,1.15vw,18px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.dk.txt p{font-size:clamp(10px,.8vw,13px);color:var(--mute);line-height:1.45}
.dk.txt .ring{position:absolute;right:9%;top:7%;width:18px;height:18px;border-radius:50%;background:#111;box-shadow:inset 0 0 0 5px #111,inset 0 0 0 7px #fff}
.vision{position:absolute;left:7.3vw;top:50%;translate:0 -50%;width:max(34vw,270px)}
.vision .vk{display:block;font-size:13px;font-weight:600;letter-spacing:.3em;color:#8a8a8a}
.vision h3{margin-top:14px;font-weight:500;font-size:clamp(34px,4vw,64px);line-height:1.08;letter-spacing:-.04em}
.vision p{margin-top:18px;font-size:clamp(15px,1.2vw,18px);line-height:1.65;color:#555;max-width:22em}
.langwrap{position:absolute;left:max(46vw,330px);right:6vw;top:0;bottom:0;display:flex;align-items:center;pointer-events:none}
.lang{position:relative;width:100%;max-width:620px;pointer-events:auto;background:#fff;border-radius:24px;padding:clamp(18px,2.4vw,34px);box-shadow:0 1px 0 rgba(0,0,0,.04),0 40px 80px -48px rgba(0,0,0,.35);opacity:0;z-index:1}
.seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:4px;border-radius:999px;background:#f1efea}
.seg .pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 10px -4px rgba(0,0,0,.12)}
.seg button{all:unset;position:relative;text-align:center;padding:9px 0;font-size:clamp(13px,1vw,15px);font-weight:600;color:#6f6b63;cursor:pointer;transition:color .35s}
.seg button.on{color:#141414}
.seg button:hover:not(.on){color:#4a463f}
.lbook{display:flex;gap:16px;align-items:center;margin-top:clamp(20px,2.4vw,30px)}
.lcov{flex:none;width:clamp(56px,5vw,74px);aspect-ratio:2/3;border-radius:6px;object-fit:cover;box-shadow:0 10px 20px -10px rgba(0,0,0,.45);visibility:hidden}
.lbook b{display:block;font-size:clamp(19px,1.6vw,24px);font-weight:600;letter-spacing:-.02em}
.lbook span{display:block;margin-top:3px;font-size:14px;color:#6f6b63}
.lpara{margin-top:clamp(18px,2vw,26px);min-height:6.6em;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",Charter,Georgia,serif;font-size:clamp(16px,1.3vw,20px);line-height:1.8;color:#2a2722}
.lpara.en{font-family:Charter,"Iowan Old Style",Georgia,serif;line-height:1.65}
.lpara span{display:inline-block;white-space:pre}
.lbones i{display:block;height:9px;border-radius:5px;background:#efece5;margin:12px 0}
.lfoot{display:flex;justify-content:space-between;align-items:center;margin-top:clamp(18px,2vw,26px);padding-top:16px;border-top:1px solid #f0ede6;font-size:14px;color:#6f6b63}
.lfoot b{color:#141414;font-weight:600}

/* 5 · wall of covers */
.wall{position:relative;height:100vh;overflow:hidden}
.band{position:absolute;left:0;display:flex;gap:2.1vw;width:max-content;align-items:flex-start}
.band.top{top:9vh}.band.bot{top:68vh}
.tile{width:clamp(56px,5vw,80px);aspect-ratio:1;border-radius:12px;background:#f3ead8;overflow:hidden;box-shadow:0 8px 16px -8px rgba(0,0,0,.35)}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.wall-c{position:absolute;left:0;right:0;top:35vh;text-align:center}
.wall-c .spark{width:16px;height:16px;margin:0 auto 14px;color:#111;opacity:0}
.wall-c h2{font-weight:500;font-size:clamp(42px,4.6vw,72px);line-height:1.1;letter-spacing:-.035em}
.wall-c p{margin-top:14px;font-size:16px;color:#555}
.ph{background:#fff3b0;border-radius:6px;padding:0 .15em}

/* 6 · story bento */
.story{padding:14vh 0 8vh}
.sk{text-align:center;font-size:13px;font-weight:600;letter-spacing:.3em}
.sk .c{color:var(--accent)}
.sh{text-align:center;margin-top:12px;font-weight:500;font-size:clamp(42px,4.4vw,68px);line-height:1.1;letter-spacing:-.035em}
.bento{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:min(76vw,1100px);margin:7vh auto 0}
.col{display:flex;flex-direction:column;gap:18px}.col.r{margin-top:9vh}
.bc{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 20px 40px -32px rgba(0,0,0,.4)}
.bc .m{position:relative;height:30vh;overflow:hidden}
.bc .b{padding:22px 26px 26px}
.bc h3{font-size:21px;font-weight:600;letter-spacing:-.02em}
.bc p{margin-top:8px;font-size:15.5px;color:#666;line-height:1.55;max-width:32ch}
.bc a{display:inline-block;margin-top:14px;font-size:14px;color:#111;border-bottom:1px solid #ccc}
.bc .chip{position:absolute;left:16px;top:14px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
.bc .chip b{width:12px;height:12px;border-radius:50%;background:#111;display:inline-block}
.bc .os{position:absolute;right:14px;top:12px;font-size:10px;color:#999}
.mini{position:absolute;width:23%;aspect-ratio:2/3;border-radius:8px;overflow:hidden;box-shadow:0 12px 24px -10px rgba(0,0,0,.35)}
.mini img{width:100%;height:100%;object-fit:cover}
.bc .tag{position:absolute;left:auto;top:auto;opacity:1;font-size:13px}
.bc.blue .m{background:#ece6da}
.bc.blue .shot{position:absolute;left:50%;top:10%;width:40%;transform:translateX(-50%) rotate(-5deg)}
.bc .skw{position:absolute}
.bc.blue .b{background:#f0f0f0}
.bc .pic{width:100%;height:100%;object-fit:cover}
.bc.dark .m{height:40vh;display:grid;place-items:end center;background:#fff}
.slab{width:46%;height:86%;background:#141414;border-radius:20px 20px 0 0;color:#fff;padding:22px 18px;text-align:center}
.slab small{display:block;font-size:13px;color:#777;line-height:1.6}
.slab b{display:block;margin:12px 0;font-size:20px;font-weight:600}
.slab .hl{background:#2a2722;border-radius:4px;padding:0 4px;color:#fff}
.bc .pin{position:absolute;right:16px;top:14px;width:24px;height:24px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;font-size:11px}

/* 7 · shelves */
.shelves{position:relative;padding:16vh 7.3vw 12vh}
.shk{font-size:13px;font-weight:600;letter-spacing:.3em}.shk .c{color:var(--accent)}
.shh{margin-top:12px;font-weight:500;font-size:clamp(40px,4vw,62px);line-height:1.08;letter-spacing:-.035em}
.shp{margin-top:14px;font-size:16px;color:#555;line-height:1.55;max-width:34em}
.viewall{position:absolute;right:7.3vw;top:24vh;height:38px;padding:0 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;display:flex;align-items:center}
.track{position:absolute;left:31vw;top:38vh;display:flex;gap:1.3vw}
.sf{width:14vw;min-width:150px}
.sf .t{aspect-ratio:1;border-radius:10px;overflow:hidden;position:relative;display:grid;place-items:center}
.sf .t img{width:46%;border-radius:4px;box-shadow:0 14px 26px -10px rgba(0,0,0,.45);transform:rotate(-4deg)}
.sf span{display:block;margin-top:10px;font-size:15px;font-weight:600}
.shnav{position:absolute;left:29vw;bottom:5vh;display:flex;gap:6px;align-items:center}
.shnav i{width:22px;height:22px;border-radius:50%;background:#fff;display:grid;place-items:center;font-style:normal;font-size:10px;color:#777}
.bar{position:absolute;left:29vw;bottom:2.5vh;width:12.5vw;height:2px;background:#ddd}
.bar b{display:block;height:100%;width:40%;background:#111}

/* 8 · dock, the rising card, the grid */
.dockstage{position:relative;height:100vh;overflow:hidden}
.dock{opacity:0;position:absolute;left:50%;top:40vh;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:8px 12px;background:#fff;border-radius:16px;box-shadow:0 16px 30px -20px rgba(0,0,0,.35);z-index:3}
.dock i{width:26px;height:26px;color:#111;display:block}
.dock i.app{width:46px;height:46px;border-radius:12px;overflow:hidden;box-shadow:0 8px 16px -8px rgba(0,0,0,.4)}
.dock i.app img{width:100%;height:100%}
.riser{position:absolute;left:50%;top:50%;border-radius:22px;background:#1b1a18;overflow:hidden;z-index:2}
.riser .phone2{position:absolute;left:50%;top:12%;width:60%;max-width:250px;transform:translateX(-50%)}
.riser video{width:100%;height:100%;object-fit:cover;border-radius:24px;display:block}
.riser .rtag{position:absolute;left:8%;top:12%;opacity:0}
.riser .rtag.tag{left:8%;top:12%;transform:rotate(-6deg)}
.riser .like{position:absolute;right:7%;top:5%;height:28px;padding:0 12px;border-radius:999px;background:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;opacity:0}
.riser .who{position:absolute;left:6%;right:6%;bottom:4%;display:flex;gap:8px;align-items:center;color:#fff;font-size:14px;opacity:0}
.riser .who img{width:26px;height:26px;border-radius:6px;object-fit:cover}
.riser .who small{display:block;opacity:.7;font-size:12px}
.gt{position:absolute;left:50%;top:50%;width:clamp(70px,7.2vw,110px);aspect-ratio:3/4;border-radius:12px;overflow:hidden;box-shadow:0 12px 24px -12px rgba(0,0,0,.35);opacity:0;z-index:1}
.gt img{width:100%;height:100%;object-fit:cover}
.gt{background:#f3ead8}

/* 9 · membership */
.price{position:relative;display:grid;grid-template-columns:1fr 1.15fr;align-items:center;padding:16vh 7.3vw 8vh}
.price .eye{width:16px;height:16px;color:#111;margin-bottom:12px}
.price h3{font-weight:500;font-size:clamp(38px,3.8vw,60px);letter-spacing:-.035em}
.price p{margin-top:14px;font-size:17px;color:#555;line-height:1.55;max-width:26ch}
.pcards{position:relative;height:34vh}
.pc{position:absolute;width:clamp(180px,13.5vw,220px);padding:16px 18px 18px;border-radius:14px;background:#fff;box-shadow:0 26px 40px -26px rgba(0,0,0,.4)}
.pc .l{font-size:14px;font-weight:500}
.pc .a{margin-top:8px;font-weight:600;font-size:clamp(44px,4vw,64px);letter-spacing:-.05em;line-height:1}
.pc .a sup{font-size:.36em;vertical-align:.9em;margin-right:1px}.pc .a small{font-size:.32em;letter-spacing:0;margin-left:2px}
.pc .n{margin-top:16px;font-size:12.5px;color:#999}
.pc.hot{background:var(--ink);color:#fff}.pc.hot .a{color:#f3a184}.pc.hot .n{color:rgba(255,255,255,.8)}
.pc .badge{position:absolute;right:10px;top:10px;height:24px;padding:0 10px;border-radius:999px;background:var(--coral);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;transform:rotate(8deg)}
.pc.old .a{color:#bbb;text-decoration:line-through;text-decoration-thickness:3px}
.pnote{position:absolute;left:7.3vw;bottom:2vh;font-size:14px;color:#888}

/* 10 · lime band */
.limesec{position:relative;padding:4vh 3.4vw 0}
.lime{position:relative;height:56vh;background:var(--ink);color:#f6f4ef;border-radius:18px;overflow:hidden}
.marq{position:absolute;left:0;top:4.5vh;display:flex;white-space:nowrap;width:max-content}
.marq span{font-weight:500;font-size:clamp(40px,4.6vw,72px);letter-spacing:-.045em;display:inline-flex;align-items:center;gap:.25em;padding-right:.35em}
.marq img{height:.82em;width:auto;border-radius:5px;box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}
.marq .stamp{display:inline-flex;flex-direction:column;align-items:center;gap:2px;font-size:clamp(9px,.7vw,11px);font-weight:600;letter-spacing:0;line-height:1.2;padding:0 .8em}
.marq .stamp img{height:6em;width:6em;object-fit:cover;border-radius:10px}
.lime .ghost{position:absolute;left:-2vw;top:14vh;font-size:22vw;font-weight:600;color:rgba(255,255,255,.05);letter-spacing:-.06em;line-height:.8;pointer-events:none}
#limeicons{position:absolute;inset:0}
.lime .fl{position:absolute;width:30px;height:30px;color:#cfc8bb}

/* 11 · two end cards */
.endcards{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:4vh 7.3vw 10vh}
.ec{position:relative;height:74vh;border-radius:18px;overflow:hidden}
.ec.l{background:var(--ink)}
.ec.l .shot{position:absolute;left:50%;top:7%;width:38%;transform:rotate(4deg)}
.ec.r{background:#fff}
.ec.r .pic{position:absolute;left:0;right:0;top:0;height:54%;background:#f2efe8;display:grid;place-items:center;padding:0 7%;overflow:hidden}
.ec .tx{position:absolute;left:36px;bottom:36px;right:36px}
.ec .tx .ic{width:18px;height:18px;margin-bottom:10px}
.ec h3{font-weight:500;font-size:clamp(34px,3.3vw,52px);line-height:1.05;letter-spacing:-.035em}
.ec p{margin-top:10px;font-size:16px;line-height:1.55;max-width:30ch}
.ec.l{color:#fff}.ec.l p{color:rgba(255,255,255,.8)}.ec.r p{color:#666}
.ec .btns{margin-top:16px;display:flex;gap:8px}
.ec .btn{height:42px;padding:0 22px;font-size:14px}
.ec .btn.white{background:#fff;color:#111}

/* footer */

/* ---------- flat page (2026-10-19): static sections, one gentle fade-in, native scrolling ---------- */
.nav{opacity:1}
.hero{position:relative;padding:150px 0 0;text-align:center;overflow:hidden}
.hero .silk{z-index:0}
.hero > *{position:relative;z-index:1}
.hero h1{font-weight:500;font-size:clamp(36px,4.5vw,68px);line-height:1.12;letter-spacing:-.03em}
.hero .mark{--u:100%}
.hero .sub{margin-top:30px;font-size:clamp(16px,1.35vw,21px);color:#4b4740;letter-spacing:-.01em}
.hero .cta{margin-top:22px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.hero .plat{margin-top:16px;font-size:13px;color:#6f6b63}
.hfan{position:relative;height:clamp(250px,24vw,330px);width:min(1060px,94vw);margin:42px auto 0}
.pr{--w:clamp(100px,11.4vw,158px);position:absolute;left:50%;top:0;width:var(--w);background:var(--paper);padding:calc(var(--w)*.05) calc(var(--w)*.05) calc(var(--w)*.17);border-radius:calc(var(--w)*.075);box-shadow:0 1px 2px rgba(0,0,0,.05),0 22px 36px -22px rgba(0,0,0,.4);transition:translate .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.pr:hover{translate:0 -10px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 32px 44px -24px rgba(0,0,0,.45);z-index:20}
.pr img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:calc(var(--w)*.045)}
.pr small{position:absolute;left:calc(var(--w)*.08);right:calc(var(--w)*.06);bottom:calc(var(--w)*.045);font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-size:calc(var(--w)*.072);color:#7d7568;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.hfan .tag{opacity:1;left:auto;top:auto}
.hero .hero-val{position:static;opacity:1;width:min(1180px,86vw);margin:64px auto 0;text-align:left}
.gate{padding-top:16vh}
.langsec{display:grid;grid-template-columns:minmax(260px,.9fr) 1.15fr;gap:6vw;align-items:center;padding:16vh 7.3vw 8vh}
.langsec .vision{position:static;translate:none;width:auto}
.langsec .langwrap{position:static;display:block;pointer-events:auto}
.devarc circle{opacity:0;transition:opacity .2s}.devarc.go circle{opacity:1}
.ec.l .shot{left:58%;width:32%;top:9%}
.ec.l .tx{right:46%}
.langsec .lang{opacity:1;max-width:620px}
.langsec .lcov{visibility:visible}
.illus{padding:14vh 7.3vw 6vh;text-align:center}
.illus .sk{margin-bottom:10px}
.illus p.lead{margin:14px auto 0;max-width:34em;font-size:16px;line-height:1.7;color:#555}
.faces{margin:6vh auto 0;max-width:1100px;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,1.4vw,18px)}
.faces figure{margin:0;width:clamp(64px,7vw,92px)}
.faces img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;background:#f3ead8;box-shadow:0 10px 20px -14px rgba(0,0,0,.45);transition:scale .4s cubic-bezier(.2,.8,.2,1)}
.faces figure:hover img{scale:1.08}
.faces figcaption{margin-top:6px;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:11.5px;color:#6f6b63;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shelves{padding-bottom:10vh}
.shelves .track{position:static;margin:5vh 0 0;display:flex;gap:1.3vw;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 14px;scrollbar-width:thin}
.shelves .sf{scroll-snap-align:start;flex:none}
.shelves .viewall{top:16vh}
.price .pcards{height:34vh}
.price .pc:nth-child(1){rotate:-4deg}.price .pc:nth-child(2){rotate:-1deg}.price .pc:nth-child(3){rotate:5deg}
.trust{padding-top:14vh}
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
@media (max-width:820px){.langsec{grid-template-columns:1fr}}
@media (max-width:900px){.endcards{grid-template-columns:1fr}.ec{height:62vh;min-height:460px}.foot{grid-template-columns:1fr 1fr}.foot .about{grid-column:1/-1}}

/* ================= craft pass (2026-10-20) ================= */
:root{--h2:clamp(34px,3.6vw,54px);--lead:clamp(16px,1.2vw,18px);--gut:7.3vw;--sec:clamp(110px,13vw,170px)}
body{background-color:var(--ground);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .46 0 0 0 0 .38 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
::selection{background:rgba(236,106,75,.22)}

/* nav */
.nav .links span{display:inline-flex}
.nav .links .dot{display:none}
.nav .nav-r{margin-left:40px;display:flex;align-items:center;gap:18px}
.nav .lang-sw{font-size:13px;font-weight:600;color:#6b665c;cursor:pointer;letter-spacing:.04em}
.nav .lang-sw:hover{color:var(--ink)}
.nav .nav-cta{height:38px;padding:0 18px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;display:inline-flex;align-items:center;transition:scale .15s,box-shadow .3s}
.nav .nav-cta:hover{box-shadow:0 10px 22px -12px rgba(0,0,0,.55)}
.nav .nav-cta:active{scale:.96}

/* one header system: a coral rule, a quiet label, a heading, a lead */
.gate-k,.sk,.shk,.vision .vk,.eyb{display:block;text-align:left;font-size:12.5px;font-weight:600;letter-spacing:.22em;color:#6f6b63;margin:0}
.gate-k::before,.sk::before,.shk::before,.vision .vk::before,.eyb::before{content:"";display:inline-block;vertical-align:middle;margin:-2px 12px 0 0;width:20px;height:1.5px;border-radius:1px;background:var(--coral)}
.sk .c,.shk .c{color:inherit}
.gate-h,.sh,.shh,.vision h3,.trust-h,.price h3,.wall-c h2{font-size:var(--h2);font-weight:500;line-height:1.14;letter-spacing:-.03em;text-wrap:balance}
.gate-h,.sh,.shh,.vision h3,.trust-h,.price h3{margin-top:18px}
.trust-h .g{color:#a39d92}
.trust-p,.shp,.price p,.vision p,.illus p.lead{font-size:var(--lead);line-height:1.75;color:#5e5950;max-width:30em;margin-top:18px}
.gate{padding:var(--sec) 0 0}
.gate-h{margin-left:var(--gut)}
.gate .banner{margin-top:56px}
.story{padding:var(--sec) var(--gut) 0;text-align:left}
.story .sh,.illus .sh{text-align:left}
.langsec{padding:var(--sec) var(--gut) 0}
.illus{padding:var(--sec) var(--gut) 0;text-align:left}
.illus p.lead{margin-left:0}
.trust{padding:var(--sec) 0 0}
.trust-h,.trust-p{margin-left:var(--gut);margin-right:var(--gut)}
.trust .eyb{margin-left:var(--gut)}
.shelves{padding:var(--sec) var(--gut) 0}
.price{padding:var(--sec) var(--gut) 0}
.price .eye{display:none}
.price p{max-width:22em}
.pnote{position:static;margin-top:26px;font-size:13.5px;color:#6f6b63}
.endcards{padding:var(--sec) var(--gut) 120px}

/* hero: tighter rhythm and a pencil underline */
.hero{padding-top:148px}
.hero h1 .mark{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10.5C58 6.2 118 12.4 176 8.6S300 5.2 397 9.4' fill='none' stroke='%23ec6a4b' stroke-width='4.2' stroke-linecap='round' opacity='.92'/%3E%3Cpath d='M8 12.6C80 9.8 170 13.2 250 10.6S350 9.2 392 11.4' fill='none' stroke='%23ec6a4b' stroke-width='1.6' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") no-repeat 0 100%/100% .26em;padding-bottom:.12em}
.hfan{margin-top:48px;height:clamp(240px,23vw,316px)}
.hero .sub{margin-top:18px}
.hfan .tag{font-size:15px;padding:.42em .9em .48em;box-shadow:0 10px 18px -10px rgba(0,0,0,.5)}
.hero .hero-val{margin-top:72px;padding-bottom:20px}
.hero .hero-val b{font-variant-numeric:tabular-nums}

/* features: an even two by two, one media ground, links with an arrow */
.bento{width:100%;max-width:none;margin:56px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bento .col{display:contents}
.bc{display:flex;flex-direction:column;background:var(--paper);border:1px solid rgba(0,0,0,.04);box-shadow:0 1px 2px rgba(0,0,0,.03),0 30px 50px -40px rgba(0,0,0,.35)}
.bc .m,.bc.blue .m,.bc.dark .m{height:clamp(260px,24vw,340px);background:#ede7db;display:block;place-items:initial}
.bc .b,.bc.blue .b{background:transparent;padding:26px 30px 30px}
.bc .chip,.bc .m > .tag{display:none}
.bc .pin{display:none}
.bc h3{font-size:22px;letter-spacing:-.02em}
.bc p{font-size:16px;max-width:34ch}
.bc a{border:0;font-weight:600;font-size:14px;display:inline-flex;gap:6px;align-items:center;margin-top:16px;cursor:pointer}
.bc a::after{content:"→";transition:translate .3s cubic-bezier(.2,.8,.2,1)}
.bc:hover a::after{translate:4px 0}
.bc.dark .slab{position:absolute;left:50%;bottom:0;translate:-50% 0;width:44%;height:84%}
.bc .skw,.bc.blue .shot{filter:drop-shadow(0 26px 30px rgba(0,0,0,.22))}

/* languages */
.langsec .lang{box-shadow:0 1px 2px rgba(0,0,0,.04),0 40px 70px -46px rgba(0,0,0,.4);border:1px solid rgba(0,0,0,.04)}

/* illustrated books: one person across the years, and the casts of three books */
.illus-grid{margin-top:56px;display:grid;grid-template-columns:minmax(300px,.85fr) 1.6fr;gap:clamp(28px,4vw,64px);align-items:start}
.age{background:var(--paper);border:1px solid rgba(0,0,0,.04);border-radius:22px;padding:30px 28px 26px;box-shadow:0 30px 50px -40px rgba(0,0,0,.35)}
.age-row{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.age-row::before{content:"";position:absolute;left:16%;right:16%;top:calc(50% - 14px);height:1px;background:repeating-linear-gradient(90deg,#c9c2b4 0 5px,transparent 5px 10px)}
.age-row figure{position:relative;margin:0;text-align:center}
.age-row img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;background:#f3ead8;box-shadow:0 0 0 5px var(--paper),0 0 0 6px #e6dfd2}
.age-row figcaption{margin-top:12px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.age-row figcaption span{display:block;font-weight:400;color:#6f6b63;font-size:12px;margin-top:2px}
.age-cap{margin-top:22px;padding-top:18px;border-top:1px solid #ebe5d9;font-size:14.5px;line-height:1.7;color:#5e5950}
.age-cap b{color:var(--ink);font-weight:600}
.casts{display:flex;flex-direction:column;gap:30px}
.cast{display:grid;grid-template-columns:168px 1fr;gap:20px;align-items:start;padding-top:22px;border-top:1px solid var(--line)}
.cast:first-child{padding-top:0;border-top:0}
.cast h5{font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-size:17px;font-weight:600;line-height:1.35}
.cast h5 small{display:block;margin-top:6px;font-family:var(--font);font-size:12px;font-weight:400;color:#6f6b63;letter-spacing:.02em}
.faces2{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 12px}
.faces2 figure{margin:0;text-align:center}
.faces2 img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;background:#f3ead8;box-shadow:0 12px 22px -16px rgba(0,0,0,.5);transition:translate .4s cubic-bezier(.2,.8,.2,1)}
.faces2 figure:hover img{translate:0 -4px}
.faces2 figcaption{margin-top:7px;font-size:12px;color:#5e5950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* shelves: no scrollbar, arrows, a fade at the edge, three covers per shelf */
.shelves .track{scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);scroll-behavior:smooth;padding-right:12vw}
.shelves .track::-webkit-scrollbar{display:none}
.shelves .viewall{top:auto;bottom:auto}
.sh-ctl{position:absolute;right:var(--gut);top:calc(var(--sec) + 30px);display:flex;gap:10px;align-items:center}
.sh-ctl .viewall{position:static}
.sh-ctl button{all:unset;width:40px;height:40px;border-radius:50%;border:1px solid #d6d0c4;display:grid;place-items:center;cursor:pointer;color:#141414;transition:background .2s,border-color .2s}
.sh-ctl button:hover{background:#fff;border-color:#c4bdb0}
.sf{width:clamp(200px,17vw,250px)}
.sf .t{aspect-ratio:5/4;border-radius:16px;background:#ede7db !important;overflow:hidden}
.sf .t img{position:absolute;width:30%;border-radius:4px;box-shadow:0 14px 22px -10px rgba(0,0,0,.45);transition:translate .5s cubic-bezier(.2,.8,.2,1),rotate .5s cubic-bezier(.2,.8,.2,1)}
.sf .t img:nth-child(1){left:18%;top:20%;rotate:-9deg}
.sf .t img:nth-child(2){left:35%;top:14%;rotate:0deg;z-index:2}
.sf .t img:nth-child(3){left:52%;top:20%;rotate:9deg}
.sf:hover .t img:nth-child(1){translate:-8px 2px;rotate:-13deg}
.sf:hover .t img:nth-child(3){translate:8px 2px;rotate:13deg}
.sf:hover .t img{scale:1}
.sf span{font-size:16px;margin-top:14px}
.sf small{display:block;margin-top:4px;font-size:13px;color:#6f6b63}

/* footer */

@media (max-width:900px){.illus-grid{grid-template-columns:1fr}.cast{grid-template-columns:1fr}.sh-ctl{position:static;margin-top:20px}}
@media (max-width:640px){.faces2{grid-template-columns:repeat(3,minmax(0,1fr))}.bento{grid-template-columns:1fr}}

.incl{list-style:none;margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;max-width:34em}
.incl li{position:relative;padding-left:26px;font-size:15px;color:#3b3833;line-height:1.5}
.incl li::before{content:"";position:absolute;left:0;top:.28em;width:16px;height:16px;border-radius:50%;background:#efe3d5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%23c4542f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.price{align-items:start}
.price .pcards{margin-top:70px}

@media (max-width:1000px){.price{grid-template-columns:1fr}.price .pcards{margin:90px 0 0 4vw !important;height:300px}.price .pc{width:200px}.price .pc:nth-child(2){left:200px !important}.price .pc:nth-child(3){left:400px !important}}

/* ================= craft pass 2 (2026-10-20) ================= */
/* Chinese headings: proportional punctuation so a comma does not leave a full-width hole */
h1,h2,h3,h4,h5,.scn-i h3,.hero-val b,.lbook b{font-feature-settings:"palt" 1;font-kerning:normal}
h1,h2,h3{letter-spacing:-.02em}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:6px}

/* five moments: a smaller phone with air around it, and a progress line under the active moment */
.banner .phone{width:min(33vh,25vw,340px)}
.bhint{right:calc(5% + min(33vh,25vw,340px) + 18px)}
.scn-i{position:relative}
.scn-i .prog{position:absolute;left:0;bottom:-1px;height:1.5px;width:0;background:var(--coral);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.scn-i:not(.on) .prog{width:0 !important;transition:none}
.scn-i .tm{letter-spacing:.06em}

/* languages: no filler lines; a quiet meta line under the switch */
.lbones{display:none}
.lmeta{margin-top:14px;font-size:12.5px;color:#6f6b63;letter-spacing:.02em}
.lpara{min-height:5.4em}

/* devices: the ones not in play recede gently, not to grey */
.devstage.live .dv:not(.on) .fr,.devstage.live .dv:not(.on) .mac-base,.devstage.live .dv:not(.on) figcaption{opacity:.62}
.syncpill{translate:none}

/* footer links underline from the left on hover */

.pun{margin-right:-.4em}
.pun-l{margin-left:-.4em}


.trust-h .g{display:block}

/* ================= craft pass 3 ================= */
html{scroll-behavior:smooth;scroll-padding-top:84px}
.links a{position:relative;color:#4a463f;transition:color .25s}
.links a:hover,.links a.on{color:var(--ink)}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1.5px;border-radius:1px;background:var(--coral);transform:scaleX(0);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.links a.on::after{transform:scaleX(1)}
.fade-img{opacity:0;transition:opacity .7s ease}
.fade-img.ok{opacity:1}
.bc .skw{filter:drop-shadow(0 26px 30px rgba(0,0,0,.2))}

/* craft pass 4: the narrow desktop window */
.gate-k{margin-left:var(--gut)}
@media (max-width:900px){
  .bc .m,.bc.blue .m,.bc.dark .m{height:clamp(220px,34vw,300px)}
  .bc .b,.bc.blue .b{padding:22px 24px 26px}
  .bc h3{font-size:20px}.bc p{font-size:15px}
  .foot{grid-template-columns:repeat(3,1fr)}
  .ec{height:600px;min-height:0}
  .ec.r .pic{height:50%}
  .ec.l .shot{width:30%;left:62%}
}

/* ================= shelves grid + drawer ================= */
.shelves .shgrid{margin-top:56px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 18px}
.shc{all:unset;box-sizing:border-box;display:flex;flex-direction:column;cursor:pointer;border-radius:18px;transition:translate .45s cubic-bezier(.2,.8,.2,1)}
.shc:hover{translate:0 -5px}
.shc .t{position:relative;aspect-ratio:5/4;border-radius:16px;background:#ede7db;overflow:hidden;transition:background .4s}
.shc:hover .t{background:#e6dfd1}
.shc .t .cv{position:absolute;width:30%;aspect-ratio:2/3;border-radius:4px;box-shadow:0 14px 22px -10px rgba(0,0,0,.45);transition:translate .55s cubic-bezier(.2,.8,.2,1),rotate .55s cubic-bezier(.2,.8,.2,1)}
.shc .t .cv:nth-child(1){left:18%;top:20%;rotate:-9deg}
.shc .t .cv:nth-child(2){left:35%;top:14%;z-index:2}
.shc .t .cv:nth-child(3){left:52%;top:20%;rotate:9deg}
.shc:hover .t .cv:nth-child(1){translate:-10px 2px;rotate:-14deg}
.shc:hover .t .cv:nth-child(3){translate:10px 2px;rotate:14deg}
.shc .stag{position:absolute;left:12px;top:12px;z-index:3;font-size:12px;font-weight:600;color:#5e5950;background:rgba(252,250,245,.92);padding:4px 10px;border-radius:999px}
.shc b{margin-top:14px;font-size:16.5px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.shc small{margin-top:6px;font-size:13.5px;line-height:1.55;color:#7a756b}
.shc .open{margin-top:10px;font-size:13px;font-weight:600;color:var(--ink);display:inline-flex;gap:6px}
.shc .open::after{content:"→";transition:translate .3s cubic-bezier(.2,.8,.2,1)}
.shc:hover .open::after{translate:4px 0}
img.cv,.tcv{object-fit:cover;display:block}
.tcv{display:flex;flex-direction:column;justify-content:space-between;padding:9% 9% 10%;background:#fbf7ee;border:1px solid #e3dccd;color:#2a2722;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;overflow:hidden}
.tcv b{font-size:clamp(8px,.7vw,11px);line-height:1.3;font-weight:600;margin:0}
.tcv i{font-style:normal;font-family:var(--font);font-size:clamp(6px,.5vw,8px);color:#6f6b63}
.tcv::before{content:"";display:block;width:30%;height:1.5px;background:var(--coral);margin-bottom:8%}
.dr-back{position:fixed;inset:0;z-index:80;background:rgba(20,18,15,.32);opacity:0;pointer-events:none;transition:opacity .35s}
.dr-back.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:12px;right:12px;bottom:12px;z-index:81;width:min(460px,calc(100vw - 24px));background:var(--paper);border-radius:22px;box-shadow:0 40px 80px -30px rgba(0,0,0,.5);padding:34px 32px 0;display:flex;flex-direction:column;translate:calc(100% + 24px) 0;transition:translate .5s cubic-bezier(.2,.8,.2,1);outline:none}
.drawer.on{translate:0 0}
.dr-x{all:unset;position:absolute;right:18px;top:18px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#5e5950;font-size:14px;transition:background .2s}
.dr-x:hover{background:#efe9dd}
.dr-tag{align-self:flex-start;font-size:12px;font-weight:600;color:#c4542f;background:#f6e6dd;padding:4px 10px;border-radius:999px}
.dr-name{margin-top:14px;font-size:28px;font-weight:600;letter-spacing:-.025em;line-height:1.2}
.dr-note{margin-top:8px;font-size:15px;color:#5e5950;line-height:1.6}
.dr-lead{margin-top:20px;padding-top:16px;border-top:1px solid #ebe5d9;font-size:12.5px;color:#6f6b63;letter-spacing:.02em}
.dr-list{list-style:none;margin:10px -12px 0;padding:0 0 12px;overflow:auto;flex:1;scrollbar-width:thin}
.dr-list li{display:grid;grid-template-columns:auto 46px 1fr;gap:14px;align-items:center;padding:12px;border-radius:14px;opacity:0;translate:16px 0}
.drawer.on .dr-list li{opacity:1;translate:0 0;transition:opacity .45s ease,translate .5s cubic-bezier(.2,.8,.2,1),background .2s}
.dr-list li:hover{background:#f4efe5}
.dr-list .n{width:18px;font-size:12px;color:#b0a99c;font-variant-numeric:tabular-nums;text-align:right}
.dr-list .cv{width:46px;aspect-ratio:2/3;border-radius:3px;box-shadow:0 8px 14px -8px rgba(0,0,0,.45)}
.dr-list .tcv{padding:12% 10%}
.dr-list .tcv b{font-size:6.5px}.dr-list .tcv i{display:none}
.dr-list .tt{font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-size:16px;font-weight:600;line-height:1.35}
.dr-list .sub{display:block;margin-top:3px;font-size:12.5px;color:#6f6b63;line-height:1.45}
.dr-foot{display:flex;align-items:center;gap:14px;padding:18px 0 24px;border-top:1px solid #ebe5d9}
.dr-foot span{font-size:12.5px;color:#6f6b63}
body.dr-open{overflow:hidden}
@media (max-width:1100px){.shelves .shgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}


.shp,.trust-p,.price p,.illus p.lead,.vision p,.bc p{text-wrap:pretty}

@media (max-width:1100px){.shc .t{aspect-ratio:16/10}.shc .t .cv{width:24%}.shc .t .cv:nth-child(1){left:22%}.shc .t .cv:nth-child(2){left:38%;top:12%}.shc .t .cv:nth-child(3){left:54%}}

/* ================= craft pass 5 ================= */
/* devices: frames stay ink; only what is on the screen and the caption recede */
.devstage.live .dv:not(.on) .fr,.devstage.live .dv:not(.on) .mac-base{opacity:1}
.dv .fr .scr::after{content:"";position:absolute;inset:0;background:#f6f4ef;opacity:0;transition:opacity .6s;pointer-events:none;z-index:9}
.devstage.live .dv:not(.on) .fr .scr::after{opacity:.5}
.devstage.live .dv:not(.on) figcaption{opacity:.5}
.dv.on figcaption b::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--coral);margin-left:6px;vertical-align:2px}
.trust{padding-bottom:20px}
/* price: a hand-drawn strike, cards centred against the copy, a call to act */
.price{align-items:center}
.price .pcards{margin-top:0}
.pc.old .a{color:#b8b2a6;text-decoration:none}
.pc.old .strike{position:relative;display:inline-block}
.pc.old .strike::after{content:"";position:absolute;left:-6%;right:-6%;top:52%;height:.1em;border-radius:.05em;background:var(--coral);rotate:-9deg;opacity:.9}
.pcta{margin-top:30px;display:flex;align-items:center;gap:16px}
.pcta span{font-size:13px;color:#6f6b63}
.pnote{margin-top:16px}
/* hero: the value row reads as one ledger */
.hero .hero-val div{position:relative}
.hero .hero-val div:first-child b{color:var(--ink)}
.hero .hero-val div:nth-child(2) b{color:#b8b2a6;text-decoration:line-through;text-decoration-color:var(--coral);text-decoration-thickness:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}html{scroll-behavior:auto}}

/* ================= search (iOS books-tab search) ================= */
.nav-search{all:unset;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#3b3833;transition:background .2s}
.nav-search:hover{background:#ebe6dc}
.nav-search svg,.sbar-cap svg,.sr-field svg,.sr-row .ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.sbar-cap{all:unset;box-sizing:border-box;margin-top:30px;display:flex;align-items:center;gap:10px;width:min(520px,100%);height:48px;padding:0 10px 0 16px;border-radius:999px;background:var(--paper);border:1px solid #e3dccd;color:#6f6b63;font-size:15px;cursor:text;transition:border-color .25s,box-shadow .25s}
.sbar-cap:hover{border-color:#cfc6b5;box-shadow:0 10px 24px -18px rgba(0,0,0,.4)}
.sbar-cap span{flex:1}
.sbar-cap kbd,.sr-note kbd{font:600 12px var(--font);color:#6f6b63;border:1px solid #ddd5c6;border-bottom-width:2px;border-radius:6px;padding:1px 7px;background:#fbf8f2}
.sr-back{position:fixed;inset:0;z-index:90;background:rgba(20,18,15,.3);opacity:0;pointer-events:none;transition:opacity .3s}
.sr-back.on{opacity:1;pointer-events:auto}
.srch-panel{position:fixed;z-index:91;left:50%;top:9vh;width:min(640px,calc(100vw - 24px));max-height:min(78vh,720px);translate:-50% -14px;opacity:0;pointer-events:none;background:var(--paper);border-radius:22px;box-shadow:0 40px 90px -30px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden;transition:opacity .25s,translate .4s cubic-bezier(.2,.8,.2,1)}
.srch-panel.on{opacity:1;translate:-50% 0;pointer-events:auto}
.sr-head{display:flex;align-items:center;gap:12px;padding:16px 16px 12px 18px;border-bottom:1px solid #ece6da}
.sr-field{flex:1;display:flex;align-items:center;gap:10px;height:44px;padding:0 6px 0 14px;border-radius:12px;background:#fff;border:1px solid #e3dccd;color:#6f6b63}
.sr-field:focus-within{border-color:#c9bfad}
.sr-field input{all:unset;flex:1;font-size:16px;color:var(--ink)}
.sr-field input::placeholder{color:#a39d92}
.sr-field input::-webkit-search-cancel-button{display:none}
.sr-clear{all:unset;width:30px;height:30px;border-radius:50%;display:none;place-items:center;font-size:11px;color:#fff;background:#bdb6a9;cursor:pointer}
.sr-field.has .sr-clear{display:grid}
.sr-cancel{all:unset;font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;padding:8px 4px}
.sr-body{overflow:auto;padding:8px 18px 14px;flex:1}
.sr-h{display:flex;justify-content:space-between;align-items:center;margin:14px 0 6px;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-size:17px;font-weight:600}
.sr-h button{all:unset;font:700 14px var(--font);color:#6f6b63;cursor:pointer}
.sr-h.big{font-size:21px;margin-top:10px}
.sr-recent{list-style:none;margin:0;padding:0}
.sr-recent li{display:flex;align-items:center;gap:12px;min-height:46px;border-bottom:1px solid #efe9dd;color:#3b3833;font-size:16px;cursor:pointer}
.sr-recent li .clk{color:#a39d92;font-size:14px}
.sr-recent li span.q{flex:1}
.sr-recent li button{all:unset;width:40px;height:40px;display:grid;place-items:center;color:#a39d92;font-size:12px;cursor:pointer}
.sr-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.sr-chips button{all:unset;height:36px;padding:0 15px;border-radius:999px;background:#fff;border:1px solid #e3dccd;font-size:14px;font-weight:700;color:#3b3833;cursor:pointer;transition:background .2s}
.sr-chips button:hover{background:#f4efe5}
.sr-row{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:10px 8px;margin:0 -8px;border-radius:12px;cursor:pointer}
.sr-row:hover,.sr-row.sel{background:#f4efe5}
.sr-row .cv{width:44px;aspect-ratio:2/3;border-radius:3px;object-fit:cover;box-shadow:0 6px 12px -8px rgba(0,0,0,.45)}
.sr-row .tcv{padding:12% 10%}.sr-row .tcv b{font-size:6px}.sr-row .tcv i{display:none}
.sr-row .t{font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-size:16px;line-height:1.35;color:#3b3833}
.sr-row .t mark,.sr-row .a mark{background:none;color:var(--ink);font-weight:700}
.sr-row .a{display:block;font-size:13px;color:#6f6b63;margin-top:2px}
.sr-row .why{display:block;font-size:12.5px;color:#c4542f;margin-top:3px}
.sr-row .go{font-size:13px;color:#a39d92}
.sr-empty{margin:18px 0 6px;padding:22px;border-radius:16px;background:#f4efe5;text-align:center}
.sr-empty b{display:block;font-size:17px}
.sr-empty p{margin-top:6px;font-size:14px;color:#6b665c;line-height:1.6;white-space:pre-line}
.sr-empty .btn{margin-top:14px}
.sr-note{margin:0;padding:10px 18px 14px;font-size:12px;color:#a39d92;border-top:1px solid #ece6da}
.dr-list li.hit{background:#f6e6dd}
body.sr-open{overflow:hidden}

.links{gap:clamp(14px,2.2vw,34px)}.links a,.nav-cta,.brand{white-space:nowrap}
@media (max-width:1000px){.nav .nav-r{margin-left:16px;gap:10px}.nav .nav-cta{padding:0 14px}.links{font-size:14px}}

/* ================= search entries ================= */
.sh-top{display:grid;grid-template-columns:1fr minmax(320px,440px);gap:40px;align-items:end}
.sh-find .sbar-cap{margin-top:0;width:100%;height:56px;font-size:16px;padding:0 12px 0 20px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04),0 18px 36px -26px rgba(0,0,0,.4)}
.sh-find-hint{margin-top:12px;font-size:13px;color:#6f6b63}
.sh-find-hint b{font-weight:600;color:#3b3833;cursor:pointer;border-bottom:1px solid #d6cfc1}
.sh-find-hint b:hover{border-color:var(--ink)}
.nav-search{width:auto;height:36px;padding:0 14px 0 12px;gap:7px;display:inline-flex;align-items:center;border-radius:999px;border:1px solid #ddd5c6;background:#fff;font-size:14px;font-weight:600;color:#3b3833;transition:background .2s}
.nav-search svg{width:16px;height:16px}
.hero-find{all:unset;margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;padding:6px 2px;border-bottom:1.5px solid rgba(236,106,75,.5);transition:border-color .25s}
.hero-find:hover{border-color:var(--coral)}
.hero-find svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.hero-find i{font-style:normal;transition:translate .3s cubic-bezier(.2,.8,.2,1)}
.hero-find:hover i{translate:4px 0}
.hero .plat{margin-top:14px}
@media (max-width:1000px){.sh-top{grid-template-columns:1fr;gap:24px}.sh-find{max-width:560px}}


/* ================= interaction pass ================= */
.sr-n{margin-left:10px;font-family:var(--font);font-size:13px;font-weight:500;color:#6f6b63;margin-right:auto}
.sr-row{animation:srIn .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes srIn{from{opacity:0;transform:translateY(6px)}}
.sr-row .go{opacity:0;translate:-4px 0;transition:opacity .2s,translate .25s}
.sr-row.sel .go,.sr-row:hover .go{opacity:1;translate:0 0}
.sr-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #ece6da;padding:10px 18px 14px}
.sr-foot .sr-note{border:0;padding:0}
.sr-keys{flex:none;font-size:12px;color:#a39d92;white-space:nowrap}
.sr-keys kbd{font:600 11px var(--font);border:1px solid #ddd5c6;border-bottom-width:2px;border-radius:5px;padding:0 5px;margin:0 1px;background:#fbf8f2;color:#6b665c}
@media (max-width:700px){.sr-keys{display:none}}
.shc:focus-visible{outline:2px solid var(--coral);outline-offset:4px}
.shc:active{translate:0 -2px;transition-duration:.1s}
.seg button:focus-visible{outline:2px solid var(--coral);outline-offset:-2px;border-radius:999px}
.dr-list li{cursor:default}
.drawer .dr-x:focus-visible,.sr-cancel:focus-visible{outline:2px solid var(--coral);outline-offset:2px}

.sr-row .t mark,.sr-row .a mark{box-shadow:inset 0 -.38em rgba(236,106,75,.2);border-radius:2px}

/* ================= interaction pass 2 ================= */
.pc.pick{cursor:pointer;outline:none}
.pc.pick::after{content:"";position:absolute;inset:-5px;border-radius:18px;border:2px solid var(--coral);opacity:0;scale:.97;transition:opacity .25s,scale .3s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.pc.pick.on::after{opacity:1;scale:1}
.pc.pick:focus-visible::after{opacity:1;border-style:dashed}
.pc .chk{position:absolute;right:12px;bottom:12px;width:20px;height:20px;border-radius:50%;border:1.5px solid #d6cfc1;display:grid;place-items:center;transition:background .2s,border-color .2s}
.pc.on .chk{background:var(--coral);border-color:var(--coral)}
.pc.on .chk::after{content:"";width:8px;height:4px;border:solid #fff;border-width:0 0 2px 2px;rotate:-45deg;translate:0 -1px}
#planNote{transition:opacity .2s}
.dv{cursor:pointer}
.dv:focus-visible{outline:2px solid var(--coral);outline-offset:8px;border-radius:12px}
.scn-i:focus-visible{outline:2px solid var(--coral);outline-offset:4px;border-radius:6px}

/* ================= chapters ================= */
.chap{display:flex !important;align-items:center;gap:12px}
.chap::before{display:none !important}
.chap .cn{display:inline-flex;gap:4px}
.chap .cn i{width:14px;height:3px;border-radius:2px;background:#ddd5c6}
.chap .cn i.on{background:var(--coral)}
.chap .cn i.done{background:#c9a597}
.chap b{font-weight:600;color:var(--ink);letter-spacing:.22em}
.bridge{display:flex;align-items:center;gap:14px;width:fit-content;margin:clamp(70px,8vw,110px) 0 0;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-size:clamp(20px,1.8vw,26px);color:#7a756b;cursor:pointer;transition:color .3s}
.bridge i{font-style:normal;width:38px;height:38px;border-radius:50%;border:1px solid #d6cfc1;display:grid;place-items:center;font-size:16px;color:var(--ink);transition:translate .35s cubic-bezier(.2,.8,.2,1),background .25s}
.bridge:hover{color:var(--ink)}.bridge:hover i{translate:0 4px;background:#fff}
.gate .bridge,.trust .bridge{margin-left:var(--gut)}
.langsec{grid-template-rows:auto auto}.langsec .bridge{grid-column:1/-1}
.illus{padding-bottom:0}

/* ================= hero: rotating headline and living covers ================= */
.hero h1.rot{display:grid;justify-items:center}
.rot .sl{white-space:nowrap;grid-area:1/1;opacity:0;translate:0 10px;transition:opacity .9s cubic-bezier(.4,0,.2,1),translate 1.1s cubic-bezier(.16,1,.3,1);pointer-events:none}
.rot .sl.on{opacity:1;translate:0 0;pointer-events:auto;transition-delay:.25s}
.rot .sl.out{opacity:0;translate:0 -10px;transition-duration:.6s}
.rot .sl .mark{background-size:0% .26em;transition:background-size .8s cubic-bezier(.2,.8,.2,1) .35s}
.rot .sl.on .mark{background-size:100% .26em}
.rot .sl.en{font-family:"Inter Tight",var(--font);letter-spacing:-.035em}
.rot-dots{display:flex;justify-content:center;gap:6px;margin-top:18px}
.rot-dots button{all:unset;cursor:pointer;padding:6px 2px}
.rot-dots i{display:block;width:16px;height:3px;border-radius:2px;background:#ddd5c6;overflow:hidden;position:relative;transition:width .4s cubic-bezier(.2,.8,.2,1)}
.rot-dots .on i{width:34px}
.rot-dots .on i::after{content:"";position:absolute;inset:0;background:var(--coral);transform-origin:left;animation:dotfill 6.5s linear forwards}
.rot-dots.hold .on i::after{animation-play-state:paused}
@keyframes dotfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rot-dots button:focus-visible i{outline:2px solid var(--coral);outline-offset:3px}
.hfan{margin-top:30px}
.hc{--w:clamp(96px,10.6vw,150px);position:absolute;left:50%;top:0;width:var(--w);transition:translate .45s cubic-bezier(.2,.8,.2,1)}
.hc:hover{translate:0 -10px;z-index:20 !important}
.hc .bk{position:relative;display:block;aspect-ratio:2/3;border-radius:3px 6px 6px 3px;overflow:hidden;background:#e7e0d2;box-shadow:0 1px 2px rgba(0,0,0,.12),0 22px 36px -18px rgba(0,0,0,.5);transition:scale .5s cubic-bezier(.2,.8,.2,1)}
.hc .bk::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.22) 0,rgba(255,255,255,.18) 3%,rgba(0,0,0,.06) 6%,transparent 12%,transparent 88%,rgba(0,0,0,.08) 100%)}
.hc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s ease}
.hc img.on{opacity:1}
.hc.turn .bk{animation:turn .7s cubic-bezier(.2,.8,.2,1)}
@keyframes turn{0%{scale:1}35%{scale:.94;translate:0 -6px}100%{scale:1;translate:0 0}}
.hero .sub{margin-top:24px}
@media (prefers-reduced-motion:reduce){.rot .sl{translate:none;filter:none}.hc.turn .bk{animation:none}}

.hero h1.rot{font-size:clamp(28px,4.5vw,68px)}
@media (max-width:640px){.hero h1.rot{font-size:7.2vw}}

/* covers: a gliding shelf, edges dissolve into the page */
.hfan{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);width:min(1240px,100vw);overflow:visible;height:clamp(290px,25vw,360px);margin-top:20px}
.hfan .hc{left:50%;top:44px;will-change:transform;transition:none;transform-origin:50% 60%}
.hfan .hc img{opacity:1;transition:none}
.hfan .tag{top:6px !important}
.hfan .hc:hover{translate:none}
.hfan .hc .bk{box-shadow:0 1px 2px rgba(0,0,0,.12),0 26px 34px -20px rgba(0,0,0,.45)}
.hfan .tag{z-index:200}

/* ================= quiet pass ================= */
.hero .plat{display:flex;justify-content:center;gap:18px;color:#a39d92;margin-top:18px}
.hero .plat svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.shc small{margin-top:6px}
.dr-name{margin-top:0}
.bhint,.syncpill,#planNote,.dr-tag,.chap{display:none !important}
.replay{width:40px;height:40px;padding:0;font-size:17px;display:grid;place-items:center}
.vision h3{margin-top:0}
.gate-h,.sh,.shh,.trust-h,.price h3{margin-top:0}
.dv .dvc{margin-top:16px}
.pc .n:empty{display:none}
/* the tap-a-word card */
.lookcard{position:relative}
.lpara.en{font-size:clamp(17px,1.35vw,20px);line-height:1.85;margin-top:22px}
.lw{all:unset;cursor:pointer;border-radius:4px;padding:0 1px;background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-repeat:no-repeat;background-position:0 92%;background-color:transparent;transition:background-color .25s,color .25s}
.lw:hover{background-color:rgba(236,106,75,.12)}
.lw.on{background-color:rgba(236,106,75,.22);color:#1d1b17}
.lw:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.dict{position:absolute;z-index:5;width:300px;padding:16px 18px 16px;border-radius:16px;background:#1d1b17;color:#f6f4ef;box-shadow:0 24px 50px -24px rgba(0,0,0,.6);opacity:0;translate:0 6px;scale:.97;transform-origin:var(--ax,50%) 0;pointer-events:none;transition:opacity .25s,translate .35s cubic-bezier(.2,.8,.2,1),scale .35s cubic-bezier(.2,.8,.2,1)}
.dict.show{opacity:1;translate:0 0;scale:1;pointer-events:auto}
.dict::before{content:"";position:absolute;top:-6px;left:calc(var(--ax,50%) - 6px);width:12px;height:12px;background:#1d1b17;border-radius:2px;rotate:45deg}
.dict .dh{display:flex;align-items:baseline;gap:8px}
.dict .dh b{font-family:Charter,Georgia,serif;font-size:20px;font-weight:600}
.dict .dh i{font-size:13px;color:#a8a196}
.dict p{margin-top:6px;font-family:Charter,Georgia,serif;font-size:15px;line-height:1.55;color:#e8e3d9}
.dict .dctx{margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12)}
.dict .dctx span{font-size:12px;color:#f3a184;font-weight:600}
.dict .dctx p{margin-top:4px}
.lookcard{padding-bottom:clamp(150px,13vw,190px)}

/* ================= illustrated reading ================= */
.illus2{display:grid;grid-template-columns:minmax(260px,.85fr) 1.15fr;gap:clamp(32px,6vw,96px);align-items:center}
.il-copy .lead{margin-top:18px}
.il-copy .il-off{margin-top:8px;color:#6f6b63}
.il-page{max-width:560px;background:#fcf7ed;border-radius:22px;padding:22px clamp(22px,3vw,40px) 30px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 40px 70px -46px rgba(0,0,0,.4);border:1px solid rgba(0,0,0,.04);font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:clamp(15px,1.15vw,17px);line-height:1.75;color:#2a2722}
.il-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-family:var(--font)}
.il-book{font-size:13px;color:#6f6b63}
.il-sw{all:unset;position:relative;width:44px;height:26px;border-radius:999px;background:#d6cfc1;cursor:pointer;transition:background .3s}
.il-sw i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.il-sw.on{background:var(--ink)}
.il-sw.on i{translate:18px 0}
.il-sw:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.il-page p + p,.il-fig + p{margin-top:0}
.il-fig{margin:14px calc(-1 * clamp(22px,3vw,40px));overflow:hidden;display:grid;grid-template-rows:1fr;transition:grid-template-rows .7s cubic-bezier(.4,0,.2,1),margin .7s cubic-bezier(.4,0,.2,1),opacity .5s}
.il-fig img{min-height:0;width:100%;aspect-ratio:3/2;object-fit:cover;display:block;-webkit-mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent)}
.il-fig.off{grid-template-rows:0fr;margin-top:6px;margin-bottom:6px;opacity:0}
@media (max-width:900px){.illus2{grid-template-columns:1fr}}

/* ================= store badges ================= */
.sbadge{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 20px 0 16px;border-radius:14px;text-decoration:none;transition:translate .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s,scale .15s;cursor:pointer}
.sbadge .gl{width:24px;height:24px;flex:none}
.sbadge span{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.sbadge small{font-size:11px;font-weight:500;opacity:.72;letter-spacing:.02em}
.sbadge b{font-size:18px;font-weight:600;letter-spacing:-.01em;margin-top:2px}
.sbadge.dark{background:#141414;color:#fff}
.sbadge.light{background:#fff;color:#141414;box-shadow:inset 0 0 0 1px #ddd5c6}
.sbadge.white{background:#fff;color:#141414}
.sbadge:hover{translate:0 -2px;box-shadow:0 14px 26px -14px rgba(0,0,0,.5)}
.sbadge:active{scale:.97}
.sbadge:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.hero .cta{gap:12px}
.ec .btns{gap:10px;flex-wrap:wrap}
/* logo mark: the app icon's bookmark at its own proportions, corners included */
.brand img{width:auto !important;height:28px !important;border-radius:0}

/* hero search: a card over the shelf while the search line is up */
.hfan .hc{transition:opacity .8s cubic-bezier(.4,0,.2,1)}
.hfan.searching .hc{opacity:.3}
.hsq{position:absolute;left:50%;top:calc(50% + 22px);z-index:300;width:min(460px,86vw);translate:-50% -42%;opacity:0;pointer-events:none;background:#fffdf8;border-radius:22px;text-align:left;overflow:hidden;cursor:pointer;box-shadow:0 0 0 1px rgba(29,27,23,.06),0 34px 64px -26px rgba(29,27,23,.5);transition:opacity .5s cubic-bezier(.4,0,.2,1),translate .8s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.hfan.searching .hsq{opacity:1;translate:-50% -50%;pointer-events:auto}
.hsq:hover{box-shadow:0 0 0 1.5px var(--coral),0 34px 64px -26px rgba(29,27,23,.5)}
.hsq-f{display:flex;align-items:center;gap:12px;height:62px;padding:0 22px;font-size:20px;letter-spacing:-.01em}
.hsq-f svg{flex:none;width:21px;height:21px;fill:none;stroke:#8d877c;stroke-width:2;stroke-linecap:round}
.sqt{white-space:nowrap;overflow:hidden;color:var(--ink)}
.sqt.hold{color:#b3ac9f;order:3}
.sqc{order:2;flex:none;width:2px;height:23px;margin-left:-10px;border-radius:1px;background:var(--coral);animation:sqblink 1.05s steps(1) infinite}
.hsq-f:has(.hold) .sqc{margin:0 -10px 0 0}
@keyframes sqblink{50%{opacity:0}}
.hsq-r{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:0 22px;max-height:0;opacity:0;border-top:1px solid transparent;transition:max-height .55s cubic-bezier(.2,.8,.2,1),padding .55s cubic-bezier(.2,.8,.2,1),opacity .35s,border-color .3s}
.hsq-r.on{max-height:100px;opacity:1;padding:12px 22px 14px;border-top-color:rgba(29,27,23,.08)}
.hsq-r img{width:42px;height:63px;object-fit:cover;border-radius:2px 4px 4px 2px;box-shadow:0 8px 14px -8px rgba(0,0,0,.5)}
.hsq-r b{display:block;font-family:Charter,Georgia,"Hiragino Mincho ProN","Yu Mincho",serif;font-size:18px;font-weight:600;color:var(--ink)}
.hsq-r small{display:block;margin-top:3px;font-size:13.5px;color:#8d877c}
.hsq-r i{font-style:normal;font-size:22px;color:#b3ac9f}

/* ================= Xiaoman's story bands ================= */
.sband{position:relative;margin:var(--sec) var(--gut) 0;height:clamp(340px,40vw,560px);border-radius:24px;overflow:hidden;background:#fcf7ed;box-shadow:0 1px 0 rgba(0,0,0,.04),0 40px 80px -64px rgba(0,0,0,.45)}
.sband > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 45%}
.sband::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#fcf7ed 0%,rgba(252,247,237,.93) 30%,rgba(252,247,237,.4) 46%,rgba(252,247,237,0) 58%)}
.sband figcaption{position:absolute;z-index:2;left:clamp(24px,5%,72px);top:50%;translate:0 -50%;width:min(40%,460px)}
.sband .tm{font-size:13px;font-weight:600;letter-spacing:.06em;color:#c4542f;font-variant-numeric:tabular-nums}
.sband .tm{display:inline-flex;align-items:center;gap:7px}.sband .tm .clk{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.sband .ln{margin-top:14px;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-size:clamp(22px,2.1vw,32px);line-height:1.55;color:#1d1b17;text-wrap:balance}
.sband .who{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:13px;color:#6b665c}
.sband .who img{width:30px;height:30px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fcf7ed,0 0 0 3px #e3dccd}
.sband + section{padding-top:clamp(56px,6vw,84px) !important}
.sband + .gate .gate-k{margin-top:0}
@media (max-width:640px){.sband{height:auto;display:flex;flex-direction:column}.sband > img{position:static;aspect-ratio:4/3;height:auto;order:-1;object-position:74% 50% !important}.sband::before{display:none}.sband figcaption{position:static;translate:none;width:auto;padding:22px 22px 26px}}
@media (min-width:641px) and (max-width:900px){.sband figcaption{width:52%}.sband::before{background:linear-gradient(90deg,#fcf7ed 0%,rgba(252,247,237,.94) 42%,rgba(252,247,237,.3) 62%,rgba(252,247,237,0) 74%)}}
/* the selected sentence in the I don't understand demo stays inline; .skp .sel is the skeleton's selection bar */
.skp .dz.sel{display:inline;height:auto;border-radius:1cqw;box-shadow:0 0 0 .6cqw #ffd98a}

/* ================= footer ================= */
.ft{--ft-ink:#2a2722;--ft-mute:#8f877a;--ft-line:rgba(42,39,34,.1);position:relative;overflow:hidden;margin:0 1.2vw 1.2vw;border-radius:28px;background:#eee8dc;background-image:radial-gradient(120% 80% at 85% 0%,rgba(255,253,248,.75),transparent 60%);box-shadow:inset 0 0 0 1px rgba(42,39,34,.05);padding:clamp(48px,7vw,96px) 6vw 0;color:var(--ft-ink)}
.ft a{color:inherit;text-decoration:none}
.ft-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.6fr);gap:6vw;align-items:start}
.ft-logo{display:inline-flex;align-items:center;gap:10px;font-size:18px;font-weight:600;letter-spacing:-.02em}
.ft-logo img{width:auto;height:24px;border-radius:0}
.ft-line{margin-top:22px;font-family:Charter,Georgia,"Hiragino Mincho ProN","Yu Mincho",serif;font-size:clamp(20px,1.7vw,26px);line-height:1.5;letter-spacing:-.01em;color:#3d3933;text-wrap:balance}
.ft-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3vw}
.ft-cols h3{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--ft-mute)}
.ft-cols ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:13px;font-size:15.5px;font-weight:500}
.ft-cols li{display:flex;align-items:center;gap:8px;min-width:0}
.ft-cols li a{position:relative;overflow-wrap:anywhere;background:linear-gradient(currentColor,currentColor) no-repeat 100% 100%/0 1px;padding-bottom:2px;transition:background-size .4s cubic-bezier(.2,.8,.2,1),color .25s}
.ft-cols li a:hover{background-position:0 100%;background-size:100% 1px}
.ft-cols li small{font-size:11px;font-weight:600;padding:2px 7px 3px;border-radius:999px;background:var(--coral);color:#fff;line-height:1}
.ft-bar{margin-top:clamp(48px,6vw,84px);padding:22px 0;border-top:1px solid var(--ft-line);display:flex;align-items:center;gap:24px;font-size:13px;color:var(--ft-mute)}
.ft-copy{letter-spacing:.02em;margin-right:auto}
.ft-soc{display:flex;gap:6px}
.ft-soc a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#5e584f;transition:background .25s,color .25s,translate .35s cubic-bezier(.2,.8,.2,1)}
.ft-soc a:hover{background:#fffdf8;color:var(--ft-ink);translate:0 -2px}
.ft-soc svg{width:17px;height:17px}
.ft-lang{display:flex;flex-wrap:wrap;align-items:center;gap:2px 20px;padding-left:24px;border-left:1px solid var(--ft-line);font-weight:500;font-size:13.5px}
.ft-lang>*{display:inline-flex;align-items:center;height:30px;position:relative;line-height:1;color:var(--ft-mute);white-space:nowrap;transition:color .25s}
.ft-lang a:hover{color:var(--ft-ink)}
.ft-lang .on{color:var(--ft-ink);font-weight:600}
.ft-lang .on::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1.5px;border-radius:1px;background:var(--coral)}
.ft-mark{cursor:pointer;overflow:hidden;margin-top:6px;user-select:none}
.ft-mark span{display:block;width:max-content;margin-bottom:-.06em;padding-right:.06em;font-weight:600;letter-spacing:-.055em;line-height:.9;color:#e7dfd1;text-shadow:0 1px 0 rgba(255,253,248,.85),0 -1px 0 rgba(42,39,34,.05);transition:color .6s}
.ft-mark:hover span{color:#ddd3c1}
@media (max-width:900px){.ft-top{grid-template-columns:1fr;gap:44px}}
@media (max-width:600px){.ft{border-radius:22px;padding-top:44px}.ft-cols{grid-template-columns:1fr 1fr;row-gap:34px}.ft-cols>div:last-child{grid-column:1/-1}
  .ft-bar{flex-wrap:wrap;gap:14px}.ft-copy{order:3;width:100%}}

/* language menu */
.lang-m{position:relative}
.lang-b{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px 0 9px;border-radius:999px;font-size:14px;font-weight:600;color:#4a463f;transition:background .2s,color .2s}
.lang-b:hover,.lang-m.open .lang-b{background:#ebe6dc;color:var(--ink)}
.lang-b:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.lang-b svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.lang-b .g{width:17px;height:17px;stroke-width:1.5}
.lang-b .c{width:14px;height:14px;stroke-width:2;transition:rotate .3s cubic-bezier(.2,.8,.2,1)}
.lang-m.open .lang-b .c{rotate:180deg}
.lang-l{list-style:none;position:absolute;right:0;top:calc(100% + 10px);z-index:60;min-width:168px;padding:6px;border-radius:16px;background:#fffdf8;box-shadow:0 0 0 1px rgba(29,27,23,.07),0 22px 44px -18px rgba(29,27,23,.4);opacity:0;translate:0 -6px;scale:.98;transform-origin:top right;pointer-events:none;transition:opacity .2s,translate .3s cubic-bezier(.2,.8,.2,1),scale .3s cubic-bezier(.2,.8,.2,1)}
.lang-m.open .lang-l{opacity:1;translate:0 0;scale:1;pointer-events:auto}
.lang-l a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 12px;border-radius:10px;font-size:14.5px;font-weight:500;color:#3b3833;white-space:nowrap}
.lang-l a:hover,.lang-l a:focus-visible{background:#f2ede3;outline:none}
.lang-l a[aria-current]{color:var(--ink);font-weight:600}
.lang-l svg{width:16px;height:16px;fill:none;stroke:var(--coral);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:600px){.ft-lang{padding-left:0;border-left:0}}

/* English: Latin text runs wider than the Chinese it replaces */
.hero h1{font-size:clamp(34px,4.1vw,62px);letter-spacing:-.025em}
.sband .ln{letter-spacing:-.01em}
.lpara.en{letter-spacing:0}
.ptx,.ptx *{font-family:Charter,Georgia,"Times New Roman",serif}
/* Phones: the section links do not fit beside the language menu and the call to action. */
@media (max-width:640px){.nav .links{display:none}.nav .nav-r{margin-left:auto;gap:6px}.nav .lang-b>span,.nav .nav-search>span{display:none}.nav .nav-search{padding:0;width:36px;justify-content:center}.nav .nav-cta{padding:0 12px;font-size:13px}.nav .brand{font-size:18px}}
/* Phones: the download card stacks its phone above the words instead of squeezing them into a column. */
@media (max-width:640px){.ec.l{height:740px}.ec.l .shot{left:50%;top:32px;width:46%;margin-left:-23%}.ec.l .tx{left:24px;right:24px;bottom:28px}}

/* banner on a phone: the scenes become a row of chips that scrolls sideways, the screen sits below at a readable size */
@media (max-width:820px){
  .banner{height:auto;margin:32px 16px 0;padding:22px 0 28px;display:flex;flex-direction:column;border-radius:20px;min-height:calc(min(60vw,290px) * 2.17 + 200px)}
  .banner::before{background:linear-gradient(180deg,#fcf7ed 0%,#fcf7ed 30%,rgba(252,247,237,.55) 52%,rgba(252,247,237,.15) 100%)}
  .bart{inset:auto 0 0 0;height:70%}
  .scn{position:relative;left:auto;top:auto;bottom:auto;width:auto;flex-direction:row;justify-content:flex-start;align-items:flex-start;gap:8px;overflow-x:auto;padding:0 16px 4px;scroll-padding-inline:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .scn::-webkit-scrollbar{display:none}
  .scn-i,.scn-i:last-child{flex:0 0 auto;max-width:72vw;padding:10px 14px 11px;border:1px solid rgba(29,27,23,.12);border-radius:14px;background:rgba(252,247,237,.9);opacity:.7}
  .scn-i.on{opacity:1;border-color:rgba(236,106,75,.55);width:72vw}
  .scn-i h3,.scn-i.on h3{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .scn-i.on h3{white-space:normal}
  .scn-i .tm{font-size:12px}
  .scn-i .bd p{padding-top:6px;font-size:14.5px;line-height:1.6}
  .scn-i .prog{left:14px;right:14px;bottom:5px;max-width:calc(100% - 28px)}
  .banner .phone,.banner .phone.wide{position:relative;right:auto;top:auto;translate:none;z-index:2;width:min(60vw,290px);margin:22px auto 0}
  .banner .phone.wide{width:calc(100% - 32px)}
  .replay{left:16px;right:auto;bottom:16px}
}
/* Each feature card opens its page: its one link covers the whole card. */
.bc{position:relative}.bc .b a::before{content:"";position:absolute;inset:0;z-index:1}

/* banner phone: real app captures with a highlight ring */
.skphone.real .scr{background:#f7f2e8}
.skphone.real .rs{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;transition:opacity .45s ease}
.skphone.real .rs.on{opacity:1}
.rring{all:unset;position:absolute;z-index:2;box-sizing:border-box;border:2px solid var(--coral);border-radius:10px;box-shadow:0 0 0 4px rgba(236,106,75,.18);cursor:pointer;transition:left .55s cubic-bezier(.2,.8,.2,1),top .55s cubic-bezier(.2,.8,.2,1),width .55s cubic-bezier(.2,.8,.2,1),height .55s cubic-bezier(.2,.8,.2,1),border-radius .55s}
.rring.round{border-radius:50%}
.rring[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.skphone.real .rs,.rring{transition:none}}

/* hero shelf: hidden until the covers on screen have decoded, then rises in as one */
.hfan .hc{transition:opacity .6s ease,translate .9s cubic-bezier(.16,1,.3,1)}
.hfan.wait .hc{opacity:0;translate:0 14px}
/* while the search line is up, one veil dims the shelf instead of fifteen covers fading each */
.hfan::before{content:"";position:absolute;inset:0;z-index:150;pointer-events:none;background:var(--ground);opacity:0;transition:opacity .8s cubic-bezier(.4,0,.2,1)}
.hfan.searching::before{opacity:.7}
/* the search card: the field never moves; the result drops in below it with opacity and translate only */
.hsq{background:none;overflow:visible;box-shadow:none;will-change:opacity,translate;top:calc(50% - 22px)}
.hsq:hover{box-shadow:none}
.hsq-f{position:relative;z-index:1;background:#fffdf8;border-radius:22px;box-shadow:0 0 0 1px rgba(29,27,23,.06),0 34px 64px -26px rgba(29,27,23,.5);transition:box-shadow .3s,border-radius .3s}
.hsq:hover .hsq-f{box-shadow:0 0 0 1.5px var(--coral),0 34px 64px -26px rgba(29,27,23,.5)}
.hsq:has(.hsq-r.on) .hsq-f{border-radius:22px 22px 0 0}
.hsq-r,.hsq-r.on{position:absolute;z-index:2;left:0;right:0;top:100%;max-height:none;padding:12px 22px 14px;background:#fffdf8;border-radius:0 0 22px 22px;border-top:1px solid rgba(29,27,23,.08);box-shadow:0 0 0 1px rgba(29,27,23,.06),0 30px 50px -26px rgba(29,27,23,.45);transition:opacity .35s ease,translate .5s cubic-bezier(.2,.8,.2,1)}
.hsq-r{opacity:0;translate:0 -8px}
.hsq-r.on{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){.hfan .hc,.hsq-r{transition:none}}

/* The hero offers the store this visitor's own device uses, and the other ways in as plain links
   (decision 330). A computer gets a code that opens the same choice on a phone. With no script, all
   three badges show as they always did. */
.hero .cta .getqr{display:none !important;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px #ddd5c6;color:var(--ink);text-align:left;font-size:12.5px;line-height:1.35;font-weight:500}
.hero .cta .getqr img{width:54px;height:54px;display:block;color:#141414}
html[data-device=desktop] .hero .cta .getqr{display:inline-flex !important}
html[data-device=ios] .hero .cta,html[data-device=android] .hero .cta{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:10px 22px}
html[data-device=ios] .hero .cta .sbadge,html[data-device=android] .hero .cta .sbadge{order:2;justify-self:center;height:auto;padding:4px 0;border-radius:0;background:none;box-shadow:none;color:#6f6b63;translate:none}
html[data-device=ios] .hero .cta .sbadge .gl,html[data-device=android] .hero .cta .sbadge .gl,html[data-device=ios] .hero .cta .sbadge small,html[data-device=android] .hero .cta .sbadge small{display:none}
html[data-device=ios] .hero .cta .sbadge b,html[data-device=android] .hero .cta .sbadge b{font-size:14px;font-weight:500;margin:0;text-decoration:underline;text-underline-offset:3px}
html[data-device=ios] .hero .cta a[href*="apps.apple.com"],html[data-device=android] .hero .cta a[href*="play.google.com"]{order:1;grid-column:1/-1;justify-self:center;justify-content:center;height:60px;padding:0 26px 0 20px;border-radius:16px;background:#141414;color:#fff;box-shadow:0 4px 0 #000}
html[data-device=ios] .hero .cta a[href*="apps.apple.com"] .gl,html[data-device=android] .hero .cta a[href*="play.google.com"] .gl,html[data-device=ios] .hero .cta a[href*="apps.apple.com"] small,html[data-device=android] .hero .cta a[href*="play.google.com"] small{display:block}
html[data-device=ios] .hero .cta a[href*="apps.apple.com"] b,html[data-device=android] .hero .cta a[href*="play.google.com"] b{font-size:20px;font-weight:600;text-decoration:none}
html[data-device=ios] .hero .cta a[href*="apps.apple.com"]:active,html[data-device=android] .hero .cta a[href*="play.google.com"]:active{translate:0 4px;box-shadow:none;scale:1}
@media (prefers-reduced-motion:reduce){html[data-device] .hero .cta a[href*="apps.apple.com"]:active,html[data-device] .hero .cta a[href*="play.google.com"]:active{translate:none}}

/* A computer visitor can read a chapter of Shoe Dog without an account (decision 331). */
.hero-try{display:none;margin:18px 0 0 22px;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#6f6b63;text-decoration:none;padding:6px 2px}
.hero-try i{font-style:normal;transition:translate .3s cubic-bezier(.2,.8,.2,1)}
.hero-try:hover{color:var(--ink)}.hero-try:hover i{translate:4px 0}
.hero-try:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:6px}
html[data-device=desktop] .hero-try{display:inline-flex}

/* Topic links in the page itself, so a crawler reaches the books without running the shelf script. */
.topics{max-width:1180px;margin:0 auto;padding:84px 5.4vw 24px}
.topics .sh{font-size:clamp(30px,3.4vw,46px);margin:0}
.topics{text-align:center}
.topics ul{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;list-style:none;padding:0;margin:28px 0 22px}
.topics li a{display:inline-block;padding:10px 18px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #ddd5c6;color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;transition:translate .25s cubic-bezier(.2,.8,.2,1)}
.topics li a:hover{translate:0 -2px}
.topics li a:focus-visible,.topics-all:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.topics-all{display:inline-flex;gap:8px;align-items:center;font-weight:600;font-size:16px;color:var(--ink);text-decoration:none;border-bottom:1.5px solid rgba(236,106,75,.5);padding:4px 2px}
.topics-all i{font-style:normal}