/* Mewbi site · colour chapters taken from the B1 cat (cream, tangerine, night, ear pink, ink). */
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque.woff2) format("woff2-variations"),url(fonts/bricolage-grotesque.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Silkscreen";src:url(fonts/silkscreen.woff2) format("woff2");font-weight:400;font-display:swap}

:root{--cream:#FBEBD3;--cream2:#F2DCBE;--tan:#F0872F;--night:#170D08;--night2:#26170F;--pink:#F2B4B0;--ink:#1E0F08;--soft:#CDBBA6;
  --eo:cubic-bezier(.22,1,.36,1);--ex:cubic-bezier(.16,1,.3,1);--io:cubic-bezier(.76,0,.24,1)}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"Bricolage Grotesque","PingFang SC","Hiragino Sans GB","Noto Sans SC",-apple-system,system-ui,sans-serif;font-size:19px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.pg{overflow-x:clip}
button{font:inherit;color:inherit}
img,video{max-width:100%}
a{color:inherit}
.wrap{max-width:1440px;margin:0 auto;padding:0 32px}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
:lang(zh) .h1,:lang(zh) .h2{letter-spacing:-.01em;line-height:1.02}

/* chapters */
.c-cream{background:var(--cream);color:var(--ink)}
.c-tan{background:var(--tan);color:var(--ink)}
.c-night{background:var(--night);color:var(--cream)}
.c-pink{background:var(--pink);color:var(--ink)}

/* type */
.h1{margin:0;font-weight:700;font-size:clamp(52px,8.3vw,132px);line-height:.9;letter-spacing:-.05em}
.h2{margin:0;font-weight:700;font-size:clamp(44px,6.4vw,104px);line-height:.92;letter-spacing:-.045em}
.lead{margin:0;font-size:clamp(19px,1.6vw,24px);line-height:1.45;max-width:34ch}
:lang(zh) .lead{max-width:24em}
.stmt{margin:0;font-size:clamp(22px,2.2vw,32px);line-height:1.3;letter-spacing:-.01em;max-width:30ch}
:lang(zh) .stmt{max-width:20em}
.small{font-size:16px;line-height:1.5}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border-radius:999px;border:0;cursor:pointer;font-weight:600;font-size:18px;text-decoration:none;white-space:nowrap;transition:transform 140ms var(--eo),background-color 180ms ease,color 180ms ease}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.55;cursor:progress}
.btn svg{width:18px;height:18px;flex:none}
.b-ink{background:var(--ink);color:var(--cream)}.b-ink:hover{background:#3A2216}
.b-tan{background:var(--tan);color:var(--ink)}.b-tan:hover{background:#FF9A45}
.wide{width:100%}
.lnk{background:none;border:0;padding:6px 0;cursor:pointer;font-weight:600;font-size:18px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;transition:text-underline-offset 180ms var(--eo)}
.lnk:hover{text-underline-offset:9px}
.lnk.sm{font-size:16px}
:focus-visible{outline:3px solid var(--tan);outline-offset:4px}
.c-tan :focus-visible,.plan.pro :focus-visible{outline-color:var(--ink)}

/* nav: a plain bar in the colour of the chapter beneath it */
.nav{position:sticky;top:0;z-index:40;transition:background-color 300ms ease,color 300ms ease}
.nav-in{height:76px;display:flex;align-items:center;gap:36px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Silkscreen",monospace;font-size:22px;text-decoration:none}
.brand i{width:30px;height:26px;background:url(media/sprites/cat-idle.png) 0 0/30px 26px no-repeat}
.links{display:flex;gap:30px;margin-left:auto}
.links a{text-decoration:none;font-weight:500;font-size:17px;padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size 240ms var(--eo)}
.links a:hover{background-size:100% 2px}
.lang{min-width:56px;height:44px;padding:0 14px;border-radius:999px;border:0;cursor:pointer;font-weight:600;font-size:16px;background:rgba(30,15,8,.08);transition:background-color 180ms ease}
.lang:hover{background:rgba(30,15,8,.16)}
.nav.c-night .lang{background:rgba(251,235,211,.12)}
.nav .btn{min-height:44px;padding:0 20px;font-size:16px}
.nav.c-night .nav-dl{background:var(--tan);color:var(--ink)}

/* hero */
.hero{padding-top:56px}
.hero-top{align-items:end;row-gap:36px}
.hero-top .h1{grid-column:1/span 8}
.hero-side{grid-column:9/span 4;display:flex;flex-direction:column;gap:28px;padding-bottom:10px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.req{font-size:16px}
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln>span{display:block;transform:translateY(105%);animation:lineUp 1000ms var(--ex) forwards}
.ln.l2>span{animation-delay:90ms}
.in1{opacity:0;transform:translateY(24px);animation:inUp 800ms 320ms var(--eo) forwards}
.in2{opacity:0;transform:translateY(24px);animation:inUp 800ms 410ms var(--eo) forwards}
@keyframes lineUp{to{transform:none}}
@keyframes inUp{to{opacity:1;transform:none}}

.film{position:relative;margin-top:110px}
.film-frame{position:relative;height:min(56.25vw,100svh);clip-path:inset(0 32px round 26px);background:var(--night);overflow:hidden}
.film-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;animation:filmIn 1400ms 250ms var(--ex) both}
@keyframes filmIn{from{transform:scale(1.12);opacity:0}to{transform:none;opacity:1}}
.film-cap{position:absolute;left:64px;bottom:40px;z-index:2;margin:0;color:var(--cream);font-size:18px;font-weight:500;max-width:30ch;background:rgba(23,13,8,.72);padding:12px 16px;border-radius:12px}
.hint{position:absolute;right:64px;top:-46px;font-size:15px;font-weight:500}

/* the cat that lives on the film's top edge */
.ledge{position:absolute;left:32px;right:32px;top:0;height:0;z-index:5}
.cat-rig{position:absolute;bottom:0;left:140px;margin-bottom:-3px;transform:translateX(-50%);transition-property:left;transition-timing-function:linear}
.cat-rig.hop{animation:hop 720ms cubic-bezier(.3,.75,.35,1)}
@keyframes hop{0%{translate:0 0}42%{translate:0 -84px}100%{translate:0 0}}
.cat-btn{display:block;padding:0;border:0;background:none;cursor:pointer;border-radius:8px}
.bubble{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);white-space:nowrap;padding:8px 12px 7px;background:#FFF8EE;color:var(--ink);font:13px/1.2 "Silkscreen",monospace;box-shadow:0 0 0 2px var(--ink),4px 4px 0 0 var(--ink)}
:lang(zh) .bubble{font-family:"PingFang SC",sans-serif;font-weight:600;font-size:14px}
.cat-rig .bubble{animation:pop 260ms steps(3)}
@keyframes pop{from{transform:translateX(-50%) scale(.4)}to{transform:translateX(-50%) scale(1)}}

/* sprites (sheets are 2x; frames step, never tween) */
.spr{display:block;background-repeat:no-repeat}
.s-walk{width:97px;height:84px;background-image:url(media/sprites/cat-walk.png);background-size:582px 84px;animation:kWalk .62s steps(6) infinite}
.s-idle{width:94px;height:82px;background-image:url(media/sprites/cat-idle.png);background-size:94px 82px}
.s-sleep{width:90px;height:79px;background-image:url(media/sprites/cat-rest.png);background-size:360px 79px;background-position:-180px 0;transform-origin:50% 100%;animation:breathe 3.2s ease-in-out infinite}
.s-react{width:94px;height:81px;background-image:url(media/sprites/cat-react.png);background-size:282px 81px;animation:kReact .5s steps(3) 1 forwards}
.s-react.loop{animation:kReact 3.2s steps(3) infinite alternate}
.s-jump{width:119px;height:109px;background-image:url(media/sprites/cat-jump.png);background-size:595px 109px;animation:kJump .72s steps(5) 1 forwards}
.s-groom{width:85px;height:81px;background-image:url(media/sprites/cat-groom.png);background-size:340px 81px;animation:kGroom 1.6s steps(4) infinite}
@keyframes kWalk{from{background-position:0 0}to{background-position:-582px 0}}
@keyframes kReact{from{background-position:0 0}to{background-position:-282px 0}}
@keyframes kJump{from{background-position:0 0}to{background-position:-595px 0}}
@keyframes kGroom{from{background-position:0 0}to{background-position:-340px 0}}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.965)}}

/* sections */
.sec{padding:180px 0}
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:28px;align-items:end;margin-bottom:96px}
.sec-head .h2{grid-column:1/span 8}
.sec-head .lead{grid-column:9/span 4}

/* manners */
.manners{align-items:start}
.stage{grid-column:1/span 6;position:sticky;top:120px;height:520px;border-radius:26px;background:var(--night);overflow:hidden}
.mlist{grid-column:8/span 5;display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.mrow{display:block;width:100%;text-align:left;background:none;border:0;border-radius:20px;padding:26px 28px;cursor:pointer;transition:background-color 240ms ease,color 240ms ease}
.mrow:hover{background:rgba(30,15,8,.07)}
.mrow.on{background:var(--ink);color:var(--cream)}
.mrow h3{margin:0;font-size:clamp(24px,2.2vw,32px);line-height:1.1;letter-spacing:-.02em;font-weight:700}
.mrow p{margin:10px 0 0;font-size:18px;line-height:1.5}
.scn{position:absolute;inset:0;animation:scnIn 600ms var(--eo)}
@keyframes scnIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.mwin{position:absolute;left:12%;right:12%;bottom:0;top:58%;border-radius:14px 14px 0 0;background:#FFF8EE}
.mwin .bar{display:flex;gap:7px;padding:14px 16px}
.mwin .bar i{width:11px;height:11px;border-radius:50%;background:#E5D3BC}
.mwin .txt{padding:6px 24px;font-size:20px;color:var(--ink);font-weight:500;white-space:nowrap}
.tw{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;width:0;animation:type 5s steps(22) infinite}
:lang(zh) .tw{animation-name:typeZh}
@keyframes type{0%{width:0}55%,100%{width:22ch}}
@keyframes typeZh{0%{width:0}55%,100%{width:10em}}
.caret{display:inline-block;width:3px;height:22px;background:var(--ink);vertical-align:-3px;margin-left:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.on-win{position:absolute;bottom:42%;transform:scale(1.4);transform-origin:50% 100%}
.m1-cat{right:22%}
.m2-win{animation:fs 7s var(--io) infinite}
@keyframes fs{0%,22%{left:12%;right:12%;top:58%;border-radius:14px 14px 0 0}36%,74%{left:0;right:0;top:0;border-radius:0}88%,100%{left:12%;right:12%;top:58%;border-radius:14px 14px 0 0}}
.m2-cat{animation:m2 7s linear infinite}
@keyframes m2{0%{left:40%;opacity:1}20%{left:46%;opacity:1}32%{left:108%;opacity:1}33%,80%{left:108%;opacity:0}81%{left:-25%;opacity:0}82%{left:-25%;opacity:1}100%{left:40%;opacity:1}}
.m3-cat{left:50%;margin-left:-47px;animation:vanish 6s steps(1) infinite}
@keyframes vanish{0%,26%{opacity:1}30%{opacity:.6}34%{opacity:.25}38%,76%{opacity:0}80%{opacity:.4}84%,100%{opacity:1}}
.rec,.quiet{position:absolute;left:28px;top:28px;display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:#FFF8EE;color:var(--ink);font-size:16px;font-weight:600}
.rec{animation:recOn 6s steps(1) infinite}
.rec i{width:10px;height:10px;border-radius:50%;background:#E5483A}
@keyframes recOn{0%,34%{opacity:0}38%,76%{opacity:1}80%,100%{opacity:0}}
.m4-cat{left:50%;margin-left:-45px}
.zz{position:absolute;left:58%;bottom:66%;font:18px "Silkscreen",monospace;color:var(--cream);opacity:0;animation:zz 3.6s ease-out infinite}
.zz.b{animation-delay:1.2s;font-size:14px}.zz.c{animation-delay:2.4s;font-size:22px}
@keyframes zz{0%{opacity:0;transform:none}20%{opacity:1}100%{opacity:0;transform:translate(30px,-70px)}}
.quiet b{position:relative;width:34px;height:20px;border-radius:999px;background:var(--tan)}
.quiet b::after{content:"";position:absolute;right:3px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--ink)}

/* toys */
.toys{align-items:start}
.tlist{grid-column:1/span 4;margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.toy{display:grid;grid-template-columns:18px minmax(0,1fr) auto;column-gap:16px;align-items:baseline;width:100%;text-align:left;background:none;border:0;border-radius:16px;padding:16px 18px;cursor:pointer;color:var(--soft);transition:color 180ms ease,background-color 240ms ease,transform 240ms var(--eo)}
.toy:hover{color:var(--cream);transform:translateX(6px)}
.toy .dot{width:12px;height:12px;border-radius:3px;align-self:center;transition:background-color 240ms ease}
.toy .nm{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.toy .tier{font-size:15px;font-weight:500}
.toy .tier.free{color:var(--tan)}
.toy .ds{grid-column:2/span 2;font-size:16px;line-height:1.45;max-height:0;overflow:hidden;opacity:0;transition:max-height 400ms var(--eo),opacity 300ms ease,margin 400ms var(--eo)}
.toy.on{color:var(--cream);background:var(--night2)}
.toy.on .dot{background:var(--tan)}
.toy.on .ds{max-height:80px;opacity:1;margin-top:8px}
.player{grid-column:5/span 8;position:sticky;top:110px}
.screen{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#000}
.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 0 0 100%);transition:clip-path 800ms var(--io)}
.screen video.on{clip-path:inset(0);z-index:2}
.pmeta{display:flex;justify-content:space-between;gap:20px;margin-top:20px;font-size:17px;color:var(--soft)}
.pmeta [data-toy-caption]{color:var(--cream);font-weight:600}
.prog{height:4px;border-radius:4px;background:var(--night2);margin-top:18px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--tan);transform-origin:0 50%;transform:scaleX(0)}
.prog.run i{animation:prog 5.5s linear forwards}
.prog.stop i{transform:scaleX(1)}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* bond */
.bond{align-items:center;row-gap:64px}
.frag{grid-column:1/span 6;position:relative;margin-top:110px}
.settings{border-radius:20px;background:#FFF8EE;color:#2A2420;padding:30px 30px 34px;font-family:-apple-system,"SF Pro Text","PingFang SC",system-ui,sans-serif}
.settings .hd{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.settings .av{width:44px;height:44px;border-radius:10px;background:#F3E7D6 url(media/sprites/cat-idle.png) 50% 60%/34px 30px no-repeat}
.settings .hd b{display:block;font-size:17px}
.settings .hd span{font-size:13px;color:#6F6457}
.srow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;border-radius:12px;background:#F6EDE0}
.srow+.srow{margin-top:8px}
.srow label,.srow .lbl{font-size:15px;font-weight:600}
.srow small{display:block;font-size:13px;font-weight:400;color:#6F6457;margin-top:2px}
.srow input{width:200px;max-width:52%;height:40px;border-radius:9px;border:1px solid #D9CBB8;background:#fff;padding:0 12px;font:500 16px -apple-system,"PingFang SC",system-ui,sans-serif;color:#2A2420;text-align:right}
.srow input:focus{outline:3px solid var(--tan);outline-offset:1px}
.seg{display:flex;background:#E9DCCA;border-radius:9px;padding:3px}
.seg span{padding:7px 12px;border-radius:7px;font-size:14px}
.seg span.on{background:#fff;font-weight:600}
.frag-cat{position:absolute;left:62%;bottom:100%;margin-bottom:-3px}
.frag-cat .spr{transform:scale(1.6);transform-origin:50% 100%}
.frag-cat .bubble{bottom:calc(100% + 64px)}
.bond-copy{grid-column:8/span 5;display:flex;flex-direction:column;gap:32px}
.perch{border-radius:18px;overflow:hidden;aspect-ratio:16/9;background:#000}
.perch video{width:100%;height:100%;object-fit:cover;display:block}
.cap{margin:-18px 0 0;font-size:16px}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:24px;align-items:stretch}
.plan{grid-column:span 5;border-radius:26px;padding:44px 44px 40px;display:flex;flex-direction:column;position:relative}
.plan.free{background:var(--cream2)}
.plan.pro{grid-column:span 7;background:var(--tan)}
.plan h3{margin:0;font-size:24px;font-weight:700;letter-spacing:-.01em}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:18px 0 6px}
.price b{font-size:clamp(64px,6.4vw,96px);font-weight:700;letter-spacing:-.05em;line-height:.9}
.price span{font-size:18px;font-weight:500}
.feat{list-style:none;margin:30px 0 40px;padding:0;display:flex;flex-direction:column;gap:14px;flex:1}
.feat li{position:relative;padding-left:24px;font-size:18px;line-height:1.45}
.feat li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border-radius:3px;background:var(--ink)}
.plan .btn{align-self:flex-start}
.plan-cat{position:absolute;right:56px;bottom:100%;margin-bottom:-3px}
.interop{grid-column:1/span 12;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:20px;margin-top:72px;align-items:start}
.interop .stmt{grid-column:1/span 7}
.interop .small{grid-column:9/span 4;margin:0}

/* faq */
.faq-g{align-items:start}
.faq-g .h2{grid-column:1/span 4}
.faq{grid-column:6/span 7;display:flex;flex-direction:column;gap:8px}
.faq details{border-radius:18px;background:var(--night2)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 26px;cursor:pointer;list-style:none;font-size:21px;font-weight:600;letter-spacing:-.01em;line-height:1.3;border-radius:18px;transition:background-color 200ms ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:#33200F}
.faq .pm{flex:none;width:36px;height:36px;border-radius:50%;background:var(--tan);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600;transition:transform 300ms var(--eo)}
.faq details[open] .pm{transform:rotate(45deg)}
.faq details p{margin:0;padding:0 26px 26px;font-size:18px;line-height:1.6}
.faq details[open] p{animation:scnIn 400ms var(--eo)}

/* close and footer */
.close{padding-top:170px}
.close-top{align-items:end;row-gap:32px}
.close-top .h2{grid-column:1/span 7}
.close-top .cta-row{grid-column:9/span 4}
.mark{position:relative;margin-top:120px;overflow:hidden;padding-top:110px;margin-bottom:-2px}
.mark-word{display:block;font-family:"Silkscreen",monospace;font-size:24.5vw;line-height:.78;letter-spacing:-.02em;text-align:center;white-space:nowrap}
.mark-run{position:absolute;left:0;right:0;top:110px;height:0}
.runner{position:absolute;bottom:0;animation:run 26s linear infinite}
@keyframes run{from{left:-110px}to{left:100%}}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px;padding:40px 32px 48px;font-size:16px}
.foot nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.foot a{text-decoration:underline;text-underline-offset:4px}
.foot .lnk{font-size:16px;padding:0}
.noscript{text-align:center;padding:16px;font-size:16px}

/* dialogs (they float, so a shadow is honest here) */
.sheet{width:min(560px,calc(100% - 32px));max-height:calc(100svh - 40px);border:0;border-radius:28px;background:var(--cream);color:var(--ink);padding:40px 40px 36px;box-shadow:0 40px 120px rgba(0,0,0,.45);overflow:auto}
.sheet[open]{animation:sheetIn 450ms var(--ex)}
.sheet::backdrop{background:rgba(23,13,8,.62)}
@keyframes sheetIn{from{opacity:0;transform:translateY(40px) scale(.97)}to{opacity:1;transform:none}}
.sheet h3{margin:0 0 12px;font-size:34px;line-height:1.05;letter-spacing:-.03em;font-weight:700;padding-right:48px}
.sheet p{margin:0 0 22px;font-size:18px;line-height:1.5}
.x{position:absolute;right:20px;top:20px;width:44px;height:44px;border-radius:50%;border:0;background:var(--cream2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.x:hover{background:#E9CFAE}
.x svg{width:18px;height:18px}
.steps{margin:6px 0 26px;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:12px}
.steps li{counter-increment:s;position:relative;padding-left:50px;min-height:36px;font-size:18px;line-height:1.45;padding-top:5px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--cream);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}
.dlmeta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.dlmeta span{padding:7px 12px;border-radius:999px;background:var(--cream2);font-size:15px;font-weight:500}
.bar{height:8px;border-radius:8px;background:var(--cream2);overflow:hidden;margin:0 0 26px}
.bar i{display:block;height:100%;background:var(--tan);transform-origin:0 50%;animation:dl 2.6s var(--eo) forwards}
@keyframes dl{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.field{display:flex;flex-direction:column;gap:8px;margin:0 0 18px}
.field label{font-size:16px;font-weight:600}
.field input{height:58px;border-radius:14px;border:2px solid #E2C9A8;background:#FFF8EE;padding:0 18px;font:500 19px "Bricolage Grotesque","PingFang SC",sans-serif;color:var(--ink);width:100%}
.field input:focus{outline:none;border-color:var(--ink)}
.field input.code{font-size:28px;letter-spacing:.32em;text-align:center;font-variant-numeric:tabular-nums}
.err{color:#A3260F;font-size:16px!important;font-weight:600;margin:-6px 0 16px!important}
.row2{display:flex;justify-content:space-between;align-items:center;gap:12px 16px;margin-top:16px;flex-wrap:wrap}
.note{margin:18px 0 0!important}
.sha{margin:16px 0 0!important;word-break:break-all;font-size:13px!important}
.who{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px 16px;border-radius:14px;background:var(--cream2);font-size:16px;margin:0 0 22px}
.who b{font-weight:600;word-break:break-all}
.sum{border-radius:18px;background:var(--tan);padding:22px 24px;margin:0 0 22px}
.sum .r{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-weight:600}
.sum .r b{font-size:40px;letter-spacing:-.04em;line-height:1}
.sum ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:16px}
.spin{width:44px;height:44px;border-radius:50%;border:4px solid var(--cream2);border-top-color:var(--ink);animation:spin 800ms linear infinite;margin:10px 0 22px}
@keyframes spin{to{transform:rotate(360deg)}}
.stripe{display:flex;align-items:center;gap:10px;font-size:15px!important;margin:16px 0 0!important}
.stripe svg{width:16px;height:16px;flex:none}

/* scroll-linked layer: progressive enhancement over a complete still page */
@supports (animation-timeline: view()){
  .film-frame{animation:filmOpen linear both;animation-timeline:view();animation-range:cover 18% cover 48%}
  @keyframes filmOpen{from{clip-path:inset(0 32px round 26px)}to{clip-path:inset(0 0 round 0)}}
  .r1,.r2,.r3{animation:rise linear both;animation-timeline:view()}
  .r1{animation-range:entry 5% entry 65%}
  .r2{animation-range:entry 15% entry 80%}
  .r3{animation-range:entry 25% entry 95%}
  @keyframes rise{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
  .mark-word{animation:markUp linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
  @keyframes markUp{from{transform:translateY(22%);opacity:.2}to{transform:none;opacity:1}}
}

/* tablet */
@media (max-width:1080px){
  .links{display:none}
  .lang{margin-left:auto}
  .hero-top .h1,.hero-side,.sec-head .h2,.sec-head .lead,.stage,.mlist,.tlist,.player,.frag,.bond-copy,.faq-g .h2,.faq,.close-top .h2,.close-top .cta-row{grid-column:1/-1}
  .stage{position:relative;top:0;height:420px;margin-bottom:28px}
  .toys{display:flex;flex-direction:column}
  .player{position:relative;top:0;order:-1;margin-bottom:28px;width:100%}
  .plan,.plan.pro,.interop .stmt,.interop .small{grid-column:1/-1}
  .faq{margin-top:48px}
}
/* phone: its own composition */
@media (max-width:640px){
  .wrap{padding:0 20px}
  body{font-size:17px}
  .nav-in{gap:12px;height:64px}
  .nav .btn{display:none}
  html{scroll-padding-top:64px}
  .hero{padding-top:36px}
  .h1{font-size:clamp(46px,13.5vw,64px)}
  .film{margin-top:90px}
  .film-frame{height:auto;aspect-ratio:4/5;clip-path:inset(0 20px round 20px)}
  .ledge{left:20px;right:20px}
  .film-cap{left:36px;right:36px;bottom:24px;font-size:16px}
  .hint{display:none}
  .sec{padding:120px 0}
  .sec-head{margin-bottom:56px}
  .stage{height:340px}
  .mrow{padding:20px}
  .toy .nm{font-size:21px}
  .plan{padding:34px 26px 30px}
  .plan-cat{right:24px}
  .faq summary{font-size:18px;padding:20px}
  .faq details p{padding:0 20px 20px;font-size:17px}
  .sheet{padding:32px 24px 28px;border-radius:24px}
  .sheet h3{font-size:28px}
  .srow{flex-direction:column;align-items:flex-start}
  .srow input{max-width:100%;width:100%;text-align:left}
  .frag-cat{left:70%}
  .foot{padding:32px 20px 40px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .film-frame,.r1,.r2,.r3,.mark-word{animation:none!important}
  .ln>span,.in1,.in2{transform:none;opacity:1}
}

.hero-side .release-note{margin:0;font-size:14px;line-height:1.5;max-width:34ch}