/* Geometry and colors from the mobile Figma guide, 830:3254.
   One em is one Figma pixel at full size; container units scale the whole scene. */
@font-face{font-family:Lato;src:url('/assets/mobile-demo/Lato-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Lato;src:url('/assets/mobile-demo/Lato-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
.app-demo{container-type:inline-size;position:relative;width:100%;max-width:342px;margin-inline:auto;overflow:hidden;color:#1e3149;font-family:Lato,sans-serif;isolation:isolate}
.app-canvas{position:relative;width:342em;font-size:min(.292397661cqw,1px);line-height:1;font-family:Lato,sans-serif}
.app-canvas div,.app-canvas i{box-sizing:border-box}
.app-canvas p{margin:0}.app-canvas i{font-style:normal}.app-canvas img{display:block;width:100%;height:100%;object-fit:cover}
.app-source{aspect-ratio:342/252}.app-source .app-canvas{height:252em}
.app-tile{position:absolute;border:1em solid #0003;border-radius:16em;background:#fff;overflow:hidden}
.app-link{inset:0 0 auto;height:90em}.app-tile-title{position:absolute;left:.785714em;top:.642857em;font-size:14em;font-weight:700;line-height:1.428571}
.app-link .app-tile-title{left:1.071428em}
.app-address{position:absolute;left:15em;top:35em;width:310em;height:40em;border-radius:10em;background:#f3f6fa}
.app-source-icon{position:absolute;left:6em;top:5em;width:30em;height:30em;border-radius:10em;background:#d6e7ff;display:grid;place-items:center}
.app-source-icon img{width:22em;height:22em;object-fit:contain}
.app-url{position:absolute;left:40em;top:8em;width:182em;height:24em;overflow:hidden}
.app-url span{display:block;white-space:nowrap;font-size:15em;line-height:1.4}
.app-cursor{position:absolute;left:222em;top:10em;width:2em;height:21em;background:#2865ba}
.app-images,.app-archive{top:102em;width:165em;height:150em}
.app-images{left:0}.app-archive{left:177em}
.app-selected-image{position:absolute;top:37em;left:11em;width:42em;height:62em;border:1em solid #2865ba;border-radius:6em}
.app-selected-image img{border-radius:5em}.app-selected-image:nth-of-type(2){left:59em}.app-selected-image:nth-of-type(3){left:107em}
.app-selected-image i{position:absolute;top:2em;left:20em;width:18em;height:18em;border-radius:9em;background:#2865ba;color:#fff;display:grid;place-items:center}
.app-selected-image i span{font-size:11em;line-height:1}
.app-source-caption{position:absolute;left:1em;top:10.363636em;font-size:11em;line-height:1.454545;color:#000b}
.app-archive .app-source-icon{left:18em;top:44em}
.app-zip-name{position:absolute;left:.7em;top:8.1em;font-size:10em;line-height:1.4;color:#000b}
.app-canvas .app-zip-arrow{position:absolute;left:71em;top:58em;width:20em;height:20em}
.app-unpacked{position:absolute;left:95em;top:41em;width:38em;height:48em;background:#fff;border:1em solid #0003;border-radius:4em;padding:10em 6em}
.app-unpacked:nth-of-type(3){left:101em;top:46em}.app-unpacked:nth-of-type(4){left:107em;top:51em}
.app-unpacked i{display:block;height:2em;margin-bottom:5em;background:#0003}

@font-face{font-family:'Crimson Text';src:url('/assets/mobile-demo/CrimsonText-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'App Japanese';src:url('/assets/mobile-demo/NotoSansJP.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'App Arabic';src:url('/assets/mobile-demo/NotoSansArabic.ttf') format('truetype');font-weight:400;font-display:swap}
.app-languages{aspect-ratio:342/242}.app-languages .app-canvas{height:242em}
.app-language{position:absolute;width:166em;height:42em;border:1em solid #0003;background:white;border-radius:21em}
.app-language-0{left:0;top:0;border:1.5em solid #2865ba}.app-language-1{left:176em;top:0}
.app-language-2{left:0;top:50em}.app-language-3{left:176em;top:50em}
.app-language-4{left:0;top:100em}.app-language-5{left:176em;top:100em}
.app-language-6{left:0;top:150em}.app-language-7{left:176em;top:150em}
.app-language-8{left:0;top:200em}.app-language-9{left:176em;top:200em}
.app-language i{position:absolute;left:5em;top:6em;width:28em;height:28em;border-radius:14em;background:#f3f6fa;display:grid;place-items:center}
.app-language i span{font-size:14em;font-weight:700;color:#000b}
.app-language b{position:absolute;left:2.5625em;top:.5em;font-size:16em;line-height:1.4375;white-space:nowrap}
.app-language [lang=ar]{font-family:'App Arabic',sans-serif;font-weight:400;line-height:1.75;top:.3125em}

/* Mobile onboarding page two: Collection, Search, Jobs and Ranking. */
.app-space-collection{max-width:360px;aspect-ratio:310/174;border-radius:12px;background:#dfecfd}
.app-space-collection .app-canvas{width:310em;height:174em;font-size:min(.32258065cqw,1.16129px)}
.app-space-search,.app-space-jobs{max-width:198px;aspect-ratio:165/132;border:1px solid #0002;border-radius:16px;background:#fff}
.app-space-ranking{max-width:198px;aspect-ratio:165/124;border:1px solid #0002;border-radius:16px;background:#fff}
.app-space-search .app-canvas,.app-space-jobs .app-canvas,.app-space-ranking .app-canvas{width:165em;font-size:min(.60606061cqw,1.2px)}
.app-space-search .app-canvas,.app-space-jobs .app-canvas{height:132em}.app-space-ranking .app-canvas{height:124em}
.space-collection-glow{position:absolute;left:4em;top:0;width:125em;height:174em;background:radial-gradient(ellipse at center,#fff8,transparent 70%);pointer-events:none}
.space-collection-card{position:absolute;inset:0;transform-origin:center}
.space-cover{position:absolute;width:88em;height:122em;border:3em solid #fff;border-radius:8em;overflow:hidden;box-shadow:0 3em 8em #0002;background:#fff}
.space-cover-back{left:8em;top:23em;rotate:7deg}.space-cover-middle{left:21em;top:34em;rotate:-7deg}.space-cover-front{left:33em;top:34em}
.space-collection-kicker,.space-collection-name,.space-collection-count{position:absolute;left:148em;white-space:nowrap}
.space-collection-kicker{top:20em;color:#2865ba;font-size:12em;letter-spacing:.2em}.space-collection-name{top:43em;font-size:16em;line-height:22em}
.space-collection-count{top:72em;font-size:12em;line-height:16em;color:#000b}.space-count-after{color:#2865ba;opacity:0}
.space-chapter{position:absolute;left:138em;top:106em;width:160em;height:60em;border-radius:12em;background:#fff;overflow:hidden;box-shadow:0 4em 12em #2339511a}
.space-chapter-art{position:absolute;left:8em;top:8em;width:34em;height:44em;border-radius:4em;overflow:hidden}
.space-chapter>span,.space-chapter>strong,.space-chapter>small{position:absolute;left:47em;white-space:nowrap;font-weight:400;font-size:12em;line-height:16em}
.space-chapter>span{top:5em;color:#2865ba;letter-spacing:.2em}.space-chapter>strong{top:22em;font-weight:700;color:#1e3149}.space-chapter>small{top:41em;color:#000b}
.space-add-badge{position:absolute;left:123em;top:92em;width:26em;height:26em;border-radius:50%;background:#2865ba;color:white;display:grid;place-items:center;font-size:18em;line-height:1;box-shadow:0 3em 8em #2865ba55;transform:rotate(15deg)}
.space-check{position:absolute;left:282em;top:145em;width:20em;height:20em;opacity:0}
.space-mini-title{position:absolute;left:11em;top:11em;font-size:16em;line-height:22em;white-space:nowrap}.app-space-jobs .space-mini-title,.app-space-ranking .space-mini-title{font-size:14em;line-height:18em}
.space-mini-icon{position:absolute;left:128em;top:8em;width:24em;height:24em;border-radius:8em;background:#dfecfd;padding:5em}.space-mini-icon.violet{left:132em;top:9em;width:20em;height:20em;border-radius:7em;background:#f0e8fc;padding:4em}
.space-search-field{position:absolute;left:11em;top:49em;width:141em;height:32em;border:1em solid #0003;border-radius:9em;background:#f3f6fa;overflow:hidden}
.space-search-field>img{position:absolute;left:7em;top:8em;width:12em;height:12em}
.space-query{position:absolute;left:24em;top:6em;width:56em;height:20em;overflow:hidden;white-space:nowrap;font-size:12em;line-height:16em}
.space-caret{position:absolute;left:24em;top:8em;width:1.5em;height:14em;border-radius:1em;background:#2865ba}
.space-search-result{position:absolute;left:11em;top:90em;width:141em;height:26em;border-radius:6em;background:#d6e7ff;color:#2865ba;font-size:12em;line-height:26em;padding-left:8em;opacity:0}
.space-jobs-rail{position:absolute;left:11em;top:49em;width:141em;height:67em;border-radius:10em;background:#f3f6fa;overflow:hidden}
.space-capture,.space-spark{position:absolute;top:8em;width:28em;height:28em;border-radius:8em;display:grid;place-items:center}.space-capture{left:8em;background:#dfecfd}.space-spark{left:98em;background:#f0e8fc}.space-capture img{width:14em;height:14em}.space-spark img{width:16em;height:16em}
.space-progress-track,.space-progress-fill{position:absolute;left:38em;top:20em;width:58em;height:4em;border-radius:2em}.space-progress-track{background:#ccd6e5}.space-progress-fill{background:#7a5cb8;width:4em}
.space-pulse{position:absolute;left:38em;top:18em;width:8em;height:8em}.space-job-status{position:absolute;left:5em;top:45em;width:131em;text-align:center;font-size:12em;line-height:16em;white-space:nowrap}.space-job-status.done{color:#2865ba;opacity:0}
.space-ranking-note{position:absolute;left:11em;top:33em;font-size:12em;line-height:16em;color:#000b}
.space-ranking-stage{position:absolute;left:11em;top:61em;width:141em;height:50em;border-radius:10em;background:#f3f6fa;overflow:hidden}
.rank-bar{position:absolute;width:18em;border-radius:5em;transform-origin:center bottom}.rank-bar-3{left:12em;top:28em;height:16em;background:#abc7ed}.rank-bar-1{left:36em;top:12em;height:32em;background:#2f6fc4}.rank-bar-2{left:60em;top:21em;height:23em;background:#6e9cd6}
.rank-badge{position:absolute;left:88em;top:10em;width:38em;height:38em;border:1em solid #9ebde5;border-radius:50%;background:#d6e7ff;color:#2865ba;font-size:12em;line-height:38em;text-align:center;opacity:0}
/* Text elements use their own font as the em unit, so convert frame coordinates here. */
.space-collection-kicker,.space-collection-name,.space-collection-count{left:auto}
.space-collection-kicker{left:12.333em;top:1.667em;letter-spacing:.0167em}.space-collection-name{left:9.25em;top:2.6875em;line-height:1.375em}
.space-collection-count{left:12.333em;top:6em;line-height:1.333em}
.space-chapter>span,.space-chapter>strong,.space-chapter>small{left:3.917em;line-height:1.333em}
.space-chapter>span{top:.417em;letter-spacing:.0167em}.space-chapter>strong{top:1.833em}.space-chapter>small{top:3.417em}
.space-add-badge{left:6.833em;top:5.111em;width:1.444em;height:1.444em;box-shadow:0 .167em .444em #2865ba55}
.space-mini-title{left:.6875em;top:.6875em;line-height:1.375em}.app-space-jobs .space-mini-title,.app-space-ranking .space-mini-title{left:.786em;top:.786em;line-height:1.286em}
.space-query{left:2em;top:.5em;width:4.667em;height:1.667em;line-height:1.333em}
.space-search-result{left:.917em;top:7.5em;width:11.75em;height:2.167em;border-radius:.5em;line-height:2.167em;padding-left:.667em}
.space-job-status{left:.417em;top:3.75em;width:10.917em;line-height:1.333em}
.space-ranking-note{left:.917em;top:2.75em;line-height:1.333em}
.rank-badge{left:7.333em;top:.833em;width:3.167em;height:3.167em;border-width:.0833em;line-height:3.167em}
/* Reader progression from the app's second onboarding page. */
.app-reader-modes{max-width:420px;aspect-ratio:342/172}
.app-reader-modes .app-canvas{width:342em;height:172em;font-size:min(.292397661cqw,1.22807px);display:flex;justify-content:space-between;align-items:flex-start}
.reader-mode-choice{width:104em;display:flex;align-items:center;flex-direction:column;gap:8em}
.reader-mode-choice>strong{font-size:clamp(12px,14em,17px);line-height:1.2857;white-space:nowrap;font-weight:700;color:#1e3149}
.reader-mini-phone{position:relative;width:78em;height:138em;border-radius:12em;background:#1e3149;padding:8em 4em;box-shadow:0 4em 12em #1e314926}
.reader-mini-screen{position:relative;width:70em;height:122em;border-radius:8em;background:#fff;overflow:hidden}
.reader-page-strip{position:absolute;left:0;top:0;display:flex;width:max-content;height:122em;will-change:transform}
.vertical .reader-page-strip{display:flex;flex-direction:column;width:70em;height:max-content}
.flip-right .reader-page-strip{left:-350em}
.reader-preview-page{position:relative;width:70em;height:122em;flex:none;background:#fff}
.reader-preview-page img{position:absolute;left:2em;top:2em;width:66em;height:107em;object-fit:contain}
.reader-preview-page span{position:absolute;left:0;bottom:.2em;width:100%;text-align:center;font-size:8em;line-height:1.25;color:#000b}
.reader-swipe-hand{position:absolute;left:24em;top:58em;width:32em;height:42em;opacity:0;pointer-events:none;will-change:transform}
.flip-left .reader-swipe-hand{left:34em}.flip-right .reader-swipe-hand{left:4em}
.reader-swipe-hand>img:first-child{position:absolute;left:0;top:0;width:29em;height:38em;object-fit:contain}
.reader-swipe-hand .reader-arrow{position:absolute;left:18em;top:2em;width:14em;height:14em;object-fit:contain}
.app-reading{aspect-ratio:342/264}.app-reading .app-canvas{height:264em;display:flex;flex-direction:column;align-items:center;gap:9em}
.app-reading-choice{width:300em;height:82em;border:1em solid #0003;border-radius:12em;background:#fff;display:flex;align-items:center;justify-content:flex-start;gap:28em;padding:8em 22em}
.app-reading-choice.manga{background:#ebe1fa;border-color:#2865ba}
.app-reading-choice>span{font-size:17em;line-height:1.25;letter-spacing:.02em;color:#1e3149;font-weight:700}
.app-panel-shell{width:68em;height:47em;flex:none;position:relative}
.app-panel-diagram{width:42em;height:28em;position:relative;overflow:hidden;transform:scale(1.6);transform-origin:top left}
.app-panel-diagram i{position:absolute;left:0;top:0;width:18em;height:11em;border-radius:2em;background:#e5edf7}
.app-panel-diagram i:nth-child(2){left:22em;background:#2865ba}.app-panel-diagram i:nth-child(3){top:15em}.app-panel-diagram i:nth-child(4){left:22em;top:15em}
.webtoon .app-panel-diagram i{left:4em;width:34em;height:6em}.webtoon .app-panel-diagram i:nth-child(2){top:10em}.webtoon .app-panel-diagram i:nth-child(3){top:20em}
.app-translation{aspect-ratio:342/300}.app-translation .app-canvas{height:300em}
.app-translation-art{position:absolute;left:0;top:0;width:342em;height:272em;border-radius:20em;overflow:hidden}
.app-bubble{position:absolute}.app-bubble-0{left:12em;top:8em;width:118em;height:116em}.app-bubble-1{left:216em;top:76em;width:118em;height:126em}.app-bubble-2{left:10em;top:138em;width:120em;height:130em}
.app-bubble-mask{position:absolute;left:20em;top:19em;width:78em;height:60em;overflow:hidden}
.app-bubble-1 .app-bubble-mask{top:42em}.app-bubble-2 .app-bubble-mask{left:21em;top:54em}
.app-english{position:absolute;left:0;top:0;width:78em;text-align:center;opacity:0}
.app-english span{font:700 14em/1.357142 'Comic Neue',sans-serif}
.app-bubble-2 .app-english{top:9em}
.app-japanese{position:absolute;top:6em;width:16em;text-align:center}
.app-japanese span{font:400 14em/1.107142 'App Japanese',sans-serif}
.app-clear,.app-strip{position:absolute;top:0;width:16em;height:60em;opacity:0;background:white}
.app-strip{background:#2865ba}
.column-0{left:48em}.column-1{left:31em}.column-2{left:14em}
.app-live{position:absolute;left:0;top:284em;height:16em;display:flex;align-items:center;gap:7em;color:#000b}
.app-live i{width:7em;height:7em;background:#288547;border-radius:50%}
.app-live span{font-size:12em;line-height:1.33333}
.app-pro{max-width:390px;aspect-ratio:390/224;border-radius:24px}
/* Crop only the mobile navigation area; the hero geometry and motion stay intact. */
.app-pro .app-canvas{font-size:min(.256410256cqw,1px);width:390em;height:272em;top:-48em}
.app-pro-background{position:absolute;inset:0;background:linear-gradient(105.438deg,#060e21 0%,#0e1f4f 55%,#331a4a 100%)}
.app-pro-ribbons{position:absolute;left:0;top:72em;width:390em;height:194em;overflow:hidden}
.app-ribbon{position:absolute;display:flex;align-items:center;justify-content:center}
.ribbon-a{left:-3.14em;top:2em;width:646.749em;height:112.42em}.ribbon-b{left:0;top:80.74em;width:554.805em;height:109.21em}
.ribbon-a.ribbon-copy{left:648.86em}.ribbon-b.ribbon-copy{left:-560em}
.app-ribbon-rotation{flex:none;transform:rotate(2deg)}.ribbon-b .app-ribbon-rotation{transform:rotate(-2deg)}
.app-ribbon-panels{width:644em;height:90em;display:flex;gap:6em}.ribbon-b .app-ribbon-panels{width:552em}
.app-ribbon-panels>div{width:86em;height:84em;flex:none;border:1.5em solid #ffffffe6;border-radius:5em;overflow:hidden}
.ribbon-a .app-ribbon-panels>div:nth-child(odd),.ribbon-b .app-ribbon-panels>div:nth-child(even){margin-top:3em}
.app-pro-scrim{position:absolute;left:0;top:62em;width:390em;height:220em;background:linear-gradient(90deg,#050d21f7 0%,#050d21cc 42%,#050d2138 72%,#050d210a 100%)}
.app-pro-vignette{position:absolute;left:0;top:218em;width:390em;height:92em;background:linear-gradient(#050d2100,#050d21eb)}
.app-pro-label{position:absolute;left:24em;top:94em;color:#fac740}.app-pro-label span{font-size:11em;line-height:1.2;letter-spacing:.12em;font-weight:700}
.app-pro-headline{position:absolute;left:24em;top:118em;color:#fff;width:182em}.app-pro-headline span{font:600 30em/1.033333 'Crimson Text',serif}
.app-pro-description{position:absolute;left:24em;top:198em;width:164em;color:#c7d9fa}.app-pro-description span{font-size:12em;line-height:1.416667}
.app-pro-rule{position:absolute;left:24em;top:110em;width:26em;height:2em;border-radius:1em;background:#fac740}
/* Static fallback: show one complete, readable state. No blank masks or stacked dialogue. */
.app-strip,.app-clear{pointer-events:none}