/* Paper objects share the book's material; the app captures retain their exact geometry. */
:root { --coral-ink:#883d36; --lilac:#b99ed1; --arrive:1; }
.paper-symbols { position:absolute; width:0; height:0; overflow:hidden; }
.paper-icon { display:inline-block; width:22px; height:22px; flex:none; vertical-align:middle; }
.pointer-down { rotate:90deg; }
.site-header { z-index:8; }
.nav-preview { position:relative; border:0; border-radius:0; padding:17px 23px 17px 20px; background:#fcf8ed; box-shadow:0 1px 0 #d2c8b2,0 5px 9px #4939230a; gap:22px; }
.nav-preview::after { content:''; position:absolute; right:0; bottom:-7px; width:14px; height:20px; background:linear-gradient(135deg,#ead497 50%,#bda568 51%); clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%); }
.nav-preview .paper-icon { width:20px; height:20px; color:#977844; }
.site-header nav>a.nav-preview:hover { text-decoration:none; background:#fffdf5; }
.hero-description { max-width:425px; }
.hero-actions { gap:27px; }
.paper-ticket { position:relative; isolation:isolate; padding:20px 30px 20px 24px; min-height:65px; gap:18px; color:#fff9ec; font-size:14px; font-weight:600; border-radius:0; background:none; filter:drop-shadow(3px 6px 0 #b25c4630); transform:rotate(-1deg); transition:transform .22s,filter .22s; }
.paper-ticket::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(#fff0d880,#fff0d880) 12px 8px / calc(100% - 37px) 1px no-repeat,linear-gradient(#fff0d880,#fff0d880) 12px calc(100% - 8px) / calc(100% - 37px) 1px no-repeat,linear-gradient(105deg,#b85243,#c56a53); clip-path:polygon(0 0,calc(100% - 17px) 0,100% 17px,calc(100% - 7px) 50%,100% calc(100% - 17px),calc(100% - 17px) 100%,10px 100%,0 calc(100% - 10px)); }
.paper-ticket::after { content:''; position:absolute; right:0; top:0; width:17px; height:17px; background:linear-gradient(45deg,#e9ac8b 49%,var(--paper) 50%); box-shadow:-1px 1px 1px #73362c20; }
.ticket-book { width:42px; height:29px; flex:none; padding-right:13px; border-right:1px dashed #fff5d878; filter:drop-shadow(0 1px 0 #653d4430); }
.paper-ticket:hover { background:none; transform:rotate(0deg) translateY(-3px); filter:drop-shadow(3px 8px 0 #b25c4620); }
.paper-ticket:active { transform:translateY(1px) rotate(0deg); filter:drop-shadow(1px 2px 0 #b25c4625); }
.paper-world { animation:float-world 10s ease-in-out infinite; }
.paper-label { border:0; box-shadow:1px 2px 0 #e4d8bc,0 7px 18px #213e351a; clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%); animation:tag-drift 11s ease-in-out infinite; }
.paper-label::after { border-radius:0; width:10px; height:10px; top:0; right:0; background:#e4d2a5; }
.label-en { animation-delay:-5s; }
.paper-spark { width:33px; height:33px; animation:star-turn 15s ease-in-out infinite; filter:drop-shadow(1px 4px 2px #9b783020); }
.spark-two { width:44px; height:44px; animation-delay:-6s; }
.scroll-cue .paper-icon { width:23px; height:23px; margin-left:0; color:#a88750; }

/* Both leaves are inset from the hardware and hinge at the centre spine.
   Their free edges lift toward the viewer; the staggered turns clear edge-on. */
.unfold-scene { height:160vh; background:#123f36; }
.unfold-scene::before { background:radial-gradient(ellipse at 50% 43%,#437e5745,transparent 67%); }
.scene-sticky { height:100svh; min-height:650px; max-height:none; padding:42px 38px 29px; }
.scene-heading { margin-bottom:30px; }
.scene-heading h2 { font-size:clamp(38px,4.2vw,62px); font-weight:450; font-variation-settings:"SOFT" 20,"WONK" 1; }
.scene-heading h2>span { color:#efd499; }
.scene-heading>p:last-child { font-size:15px; line-height:1.6; color:#c9d7c6; margin-top:18px; }
.scene-heading>p:last-child>span { display:block; }
.scene-heading h2,.coming-heading h2 { letter-spacing:-.028em; word-spacing:.06em; }
.scene-heading h2 em { color:#efd499; }
.book-reveal { width:min(860px,76vw,calc((100svh - 320px)*1.376)); max-width:none; perspective:5000px; isolation:auto; }
.native-screen { transform:none; z-index:0; }
.book-cover { width:44.8%; top:7%; bottom:7%; border:0; background:none; box-shadow:none; overflow:visible; backface-visibility:hidden; transform-style:preserve-3d; }
.cover-left { left:5.2%; transform-origin:right center; transform:translateZ(3px) rotateY(calc(var(--leaf-left,1)*88deg)); opacity:clamp(0,calc((1 - var(--leaf-left,1))*7),1); }
.cover-right { right:5.2%; transform-origin:left center; transform:translateZ(4px) rotateY(calc(var(--leaf-right,1)*-88deg)); opacity:clamp(0,calc((1 - var(--leaf-right,1))*7),1); }
.unfold-scene[data-opened="true"] .book-cover { visibility:hidden; }
.cover-face { position:absolute; inset:0; backface-visibility:hidden; border:1px solid #eee1bc; background:#f5edda; box-shadow:0 2px 0 #cbbc9a,0 4px 0 #f6e7c5,0 6px 0 #bda984; }
.cover-left .cover-front { border-radius:1px 3px 6px 1px; background:linear-gradient(90deg,#d7c9a8,#faf2dd 5%,#f5edda 78%,#e8dcbf 94%,#bcab87); }
.cover-right .cover-front { border-radius:3px 1px 1px 6px; background:linear-gradient(90deg,#bcab87,#e8dcbf 6%,#f5edda 22%,#faf2dd 95%,#d7c9a8); }
.cover-front::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(100deg,transparent 0 3px,#5d453604 3px 4px); pointer-events:none; }
.cover-border { inset:5%; border-color:#bca977; }
.cover-star { width:45px; height:45px; }
.cover-title { font-size:clamp(20px,3vw,42px); }
.cover-flower { color:#c57565; font-size:82px; }
.cover-back { transform:rotateY(180deg); background:linear-gradient(105deg,#d6bbad,#ead7c2 16%,#ead7c2 82%,#c4a7a0); overflow:hidden; }
.cover-right .cover-back { background:linear-gradient(75deg,#a88daf,#d2b9d7 16%,#d2b9d7 82%,#ae93b4); }
.cover-back::before,.cover-back::after { content:''; position:absolute; inset:5%; border:1px solid #faf0d75e; }
.cover-back::after { inset:8%; }
.cover-back>svg { position:absolute; width:55%; height:55%; left:22%; top:22%; opacity:.8; }
.cover-crease { position:absolute; inset:0; background:linear-gradient(130deg,transparent 49.8%,#fff5dc55 50%,#9d768425 50.3%,transparent 50.7%); }
.fold-character { z-index:4; }
.character-star { width:48px; left:-70px; top:14%; }
.character-bird { width:66px; right:-86px; bottom:8%; }
.character-bird svg { animation:crane-rest 13s ease-in-out infinite; }
.character-star svg { animation:star-turn 15s ease-in-out infinite; }
.scene-footer { width:min(860px,76vw,calc((100svh - 320px)*1.376)); margin-top:24px; text-transform:none; letter-spacing:.015em; font-size:13px; }
.scene-device { display:flex; align-items:center; gap:7px; color:#bfd0be; }
.scene-device strong { color:#f5edda; font-weight:500; }
.scene-device .paper-icon { width:24px; height:24px; margin-right:4px; }
.scene-footer a { display:flex; align-items:center; gap:10px; }
.scene-footer a:hover { color:#efd499; }
.scene-footer .paper-icon { color:#e7c789; width:18px; height:18px; }
.scene-caption { font-size:10px; letter-spacing:.025em; color:#9ebba9; margin-top:17px; }
.enlarge-label { display:flex; align-items:center; gap:7px; border:0; box-shadow:0 2px 0 #a59b8050; opacity:1; }
.enlarge-label .paper-icon { width:14px; height:14px; }

/* A crane rests beside the word lesson; gold stars continue into the library. */
.word-section { position:relative; padding-top:132px; }
.word-intro { position:relative; z-index:1; }
.paper-flight { position:absolute; pointer-events:none; filter:drop-shadow(0 7px 4px #62486b1c); }
.word-flight { width:132px; height:110px; top:23px; right:5%; transform:translate(calc((1 - var(--arrive))*60px),calc((1 - var(--arrive))*35px)) rotate(calc(-12deg + var(--arrive)*7deg)); }
.paper-flight>svg { position:relative; z-index:1; width:100%; height:100%; animation:crane-rest 13s ease-in-out infinite; }
.flight-crease { position:absolute; left:-65%; top:45%; width:78%; height:70%; border-bottom:1px dashed #bf9fcb; border-radius:0 0 50% 50%; transform:rotate(-15deg); opacity:.55; }
.word-demo { box-shadow:0 3px 0 #e8ddc8,0 6px 0 #faf4e7,0 7px 0 #d9cdb6,0 18px 35px #2c382409; }
.word-demo::before { border-width:0 35px 35px 0; border-color:transparent var(--paper) #ccb7db transparent; }
.word-tab { padding:12px 15px 12px 17px; background:#e7dcef; border:0; box-shadow:2px 3px 0 #c1a6c74d; clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%); }
.word-tab .explain-label { font-size:12px; font-weight:600; }
.word-tab:hover { background:#dfcfe9; color:#563869; }
.text-button .paper-icon { width:20px; height:20px; }
.word-tab[aria-expanded="true"] .paper-icon { rotate:90deg; }
.stories-section { background:#ece0e9; padding-block:108px 94px; overflow:clip; }
.stories-section::before { content:''; position:absolute; left:0; right:0; top:0; height:10px; background:linear-gradient(174deg,#d9c5d0 49%,#f4eaf0 50%); opacity:.65; }
.stories-section::after { display:none; }
.stories-section>.section-wrap { position:relative; }
.shelf-stars { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.shelf-star { position:absolute; width:35px; height:35px; filter:drop-shadow(2px 4px 2px #8d617e20); animation:star-turn 17s ease-in-out infinite; }
.star-a { top:30px; left:51%; rotate:13deg; }
.star-b { top:69px; left:57%; width:19px; height:19px; animation-delay:-7s; }
.star-c { bottom:29px; right:11%; width:26px; height:26px; animation-delay:-11s; }
.book-action { box-shadow:0 3px 0 #d6bea190; background:#fff5e5f2; }
.book-action .paper-icon { width:19px; height:19px; color:#ad795a; }
.library-footnote a { display:flex; align-items:center; gap:18px; }
.library-footnote .paper-icon { width:18px; height:18px; }

/* A pop-up paper spread presents three native layouts, with Duo as the anchor. */
.coming-section { display:block; position:relative; padding:93px 0 80px; overflow:clip; background:radial-gradient(ellipse at 52% 46%,#eae0f1 0,transparent 56%),var(--paper); }
.coming-heading { position:relative; z-index:2; }
.coming-heading .eyebrow { color:#8d716e; }
.coming-heading h2 { font-size:clamp(54px,5.8vw,84px); }
.coming-heading h2 em { color:#8b6295; }
.coming-heading>p:last-child { font-size:15px; margin:25px auto 0; color:#697467; max-width:440px; line-height:1.7; }
.device-stage { --arrive:1; height:clamp(465px,45vw,600px); position:relative; margin-top:48px; perspective:1800px; }
.stage-paper { position:absolute; inset:0; pointer-events:none; }
.paper-leaf { position:absolute; transform-origin:50% 100%; box-shadow:0 2px 0 #d7c0b1; }
.leaf-coral { width:44%; height:65%; left:5%; bottom:16%; background:linear-gradient(145deg,#e6b496 49.7%,#cf8f80 50%,#e4a991 50.7%); clip-path:polygon(0 10%,87% 0,100% 100%,12% 95%); transform:rotate(calc(-4deg - var(--arrive)*13deg)); }
.leaf-violet { width:51%; height:67%; right:5%; bottom:14%; background:linear-gradient(48deg,#b99ecb 49.7%,#d9c2e3 50%,#c8afd8 50.7%); clip-path:polygon(13% 0,100% 9%,85% 100%,0 96%); transform:rotate(calc(4deg + var(--arrive)*12deg)); }
.leaf-cream { width:55%; height:36%; left:23%; bottom:8%; background:linear-gradient(175deg,#fdf4d9,#e8d2a9); clip-path:polygon(2% 0,92% 2%,100% 88%,47% 100%,0 90%); transform:rotate(-3deg); }
.paper-ground { position:absolute; bottom:4%; left:4%; right:3%; height:20%; background:linear-gradient(175deg,#f2e0c5 49.7%,#d4b491 50%,#e5c9a8 50.7%); clip-path:polygon(13% 0,88% 0,100% 68%,50% 100%,0 70%); filter:drop-shadow(0 12px 7px #6e543014); }
.stage-foliage { position:absolute; width:10%; height:34%; bottom:16%; filter:drop-shadow(2px 3px 0 #52725116); }
.foliage-left { left:3%; transform:rotate(calc(-12deg - var(--arrive)*16deg)); }
.foliage-right { right:2%; bottom:20%; transform:rotate(calc(12deg + var(--arrive)*14deg)); }
.stage-star { position:absolute; top:0; left:17%; width:40px; height:40px; animation:star-turn 18s ease-in-out infinite; filter:drop-shadow(2px 5px 2px #88633425); }
.launch-device { margin:0; position:absolute; transform-origin:50% 85%; }
.launch-device button { display:block; width:100%; padding:0; background:none; filter:drop-shadow(0 15px 13px #43332b25); transition:filter .2s; }
.launch-device button:hover { filter:drop-shadow(0 18px 16px #43332b38); }
.launch-device img { display:block; width:100%; height:auto; }
.device-duo { width:36%; left:20%; top:2%; z-index:3; transform:translateY(calc((1 - var(--arrive))*74px)) rotate(calc((1 - var(--arrive))*-3deg)); }
.device-iphone { width:17%; left:0; top:15%; z-index:4; transform:translate(calc((1 - var(--arrive))*36px),calc((1 - var(--arrive))*110px)) rotate(calc(-4deg + var(--arrive)*3deg)); }
.device-ipad { width:43%; right:0; top:21%; z-index:2; transform:translate(calc((1 - var(--arrive))*-35px),calc((1 - var(--arrive))*104px)) rotate(calc(5deg - var(--arrive)*3deg)); }
.launch-device figcaption { font-family:var(--serif); font-size:19px; letter-spacing:-.03em; position:relative; display:inline-flex; gap:10px; align-items:center; margin-top:16px; color:#675450; }
.device-duo figcaption { font-size:24px; color:var(--forest); margin-top:12px; }
.device-caption-line { display:block; width:25px; height:1px; background:currentColor; opacity:.45; }
.device-iphone figcaption { font-size:16px; }
.device-ipad figcaption { margin-left:30%; }
.coming-actions { position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; gap:20px; margin-top:4px; }
.coming-actions>p { font-size:13px; color:#73816e; }
.coming-actions .paper-ticket { min-height:66px; }
.motion-toggle { position:fixed; bottom:16px; right:17px; z-index:20; display:flex; align-items:center; gap:6px; background:#fff9eccf; color:#6c6253; padding:9px 12px 9px 9px; font-size:10px; border:1px solid #dacbb4; box-shadow:0 3px 8px #48311d12; border-radius:0; backdrop-filter:blur(8px); }
.motion-toggle .paper-icon { width:16px; height:16px; }
.motion-toggle:hover { background:#fff9ec; }
.motion-toggle[aria-pressed="true"] .motion-symbol { rotate:90deg; }
.site-footer { padding-bottom:20px; }

@keyframes tag-drift { 0%,100% { translate:0 0; } 50% { translate:0 -5px; } }
@keyframes crane-rest { 0%,18%,82%,100% { translate:0 0; rotate:0deg; } 42%,58% { translate:4px -7px; rotate:3deg; } }
@keyframes star-turn { 0%,25%,80%,100% { rotate:-5deg; translate:0 0; } 48%,58% { rotate:15deg; translate:0 -4px; } }
.motion-paused .paper-world,.motion-paused .paper-label,.motion-paused .paper-spark,.motion-paused .paper-flight>svg,.motion-paused .character-bird svg,.motion-paused .character-star svg,.motion-paused .shelf-star,.motion-paused .stage-star { animation-play-state:paused!important; }
html[data-motion="paused"] * { animation:none!important; transition:none!important; }
html[data-motion="paused"] { scroll-behavior:auto; }
html[data-motion="paused"] .unfold-scene { height:auto; }
html[data-motion="paused"] .scene-sticky { position:relative; height:auto; min-height:0; padding-block:70px 40px; }
html[data-motion="paused"] .book-cover { display:none; }
html[data-motion="paused"] .fold-character,html[data-motion="paused"] .native-screen,html[data-motion="paused"] .launch-device,html[data-motion="paused"] .word-flight { transform:none; opacity:1; }

@media(max-width:1100px) {
  .hero-actions { gap:18px; }
  .paper-ticket { font-size:13px; padding-inline:19px 25px; gap:14px; }
  .ticket-book { width:37px; height:25px; padding-right:12px; }
  .scene-sticky { min-height:640px; }
  .book-reveal { width:min(66vw,calc((100svh - 290px)*1.376)); }
  .cover-title { font-size:clamp(24px,3.4vw,36px); }
  .scene-footer { width:66vw; }
  .device-stage { height:46vw; min-height:390px; }
  .device-iphone { width:17%; left:0; }
  .device-ipad { width:43%; }
  .launch-device figcaption { font-size:17px; }
  .device-duo figcaption { font-size:21px; }
}
@media(max-width:800px) {
  .nav-preview { padding:13px 18px 13px 13px; gap:11px; font-size:10px; }
  .nav-preview .paper-icon { width:18px; height:18px; }
  .paper-ticket { min-height:60px; padding:16px 23px 16px 19px; font-size:13px; }
  .hero-actions .button { gap:13px; font-size:13px; }
  .hero-art { margin-top:10px; }
  .spark-one { width:25px; height:25px; }
  .spark-two { width:31px; height:31px; }
  .unfold-scene { height:auto; }
  .scene-sticky { height:auto; min-height:0; position:relative; padding:68px 24px 37px; }
  .scene-heading { margin-bottom:32px; }
  .scene-heading h2 { font-size:clamp(38px,7vw,56px); }
  .book-reveal { width:83%; max-width:580px; }
  .cover-title { font-size:clamp(19px,4vw,32px); }
  .cover-small { font-size:7px; }
  .cover-flower { font-size:49px; }
  .cover-star { width:28px; height:28px; }
  .character-star { width:50px; left:-28px; }
  .character-bird { width:65px; right:-26px; }
  .scene-footer { width:100%; margin-top:26px; font-size:8px; }
  .scene-caption { font-size:8px; margin-top:15px; }
  .enlarge-label { bottom:8%; right:7%; font-size:7px; gap:3px; }
  .enlarge-label .paper-icon { width:11px; height:11px; }
  .word-section { padding-top:104px; }
  .word-flight { top:12px; width:92px; height:77px; right:6%; }
  .word-tab { padding:11px 14px; }
  .word-tab .explain-label { font-size:11px; }
  .stories-section { padding:75px 0 66px; }
  .star-a { top:23px; left:70%; width:26px; height:26px; }
  .star-b { top:55px; left:80%; width:15px; height:15px; }
  .star-c { bottom:25px; right:10%; width:23px; height:23px; }
  .coming-section { padding:70px 0 70px; }
  .coming-heading h2 { font-size:clamp(50px,9vw,68px); }
  .coming-heading>p:last-child { font-size:13px; margin-top:22px; }
  .device-stage { height:auto; min-height:0; margin-top:36px; width:calc(100% - 36px); display:grid; grid-template-columns:.3fr .7fr; align-items:end; gap:40px 28px; padding:0 15px 35px; }
  .launch-device { position:relative; }
  .device-duo { width:84%; left:auto; top:auto; grid-column:1 / -1; justify-self:center; }
  .device-iphone { width:92%; left:auto; top:auto; justify-self:end; }
  .device-ipad { width:100%; right:auto; top:auto; }
  .device-duo figcaption { font-size:22px; margin-top:12px; }
  .device-iphone figcaption { font-size:15px; margin-top:12px; }
  .device-ipad figcaption { font-size:18px; margin-left:0; margin-top:15px; }
  .device-caption-line { width:16px; }
  .leaf-coral { width:53%; left:2%; bottom:14%; height:69%; }
  .leaf-violet { width:53%; right:3%; bottom:11%; height:60%; }
  .leaf-cream { width:74%; left:14%; bottom:10%; height:34%; }
  .paper-ground { bottom:6%; height:15%; }
  .stage-foliage { height:24%; width:12%; }
  .foliage-left { left:1%; bottom:25%; }
  .foliage-right { right:1%; bottom:37%; }
  .stage-star { left:4%; top:4%; width:26px; height:26px; }
  .coming-actions { margin-top:0; }
  .coming-actions>p { font-size:12px; }
  .coming-actions .paper-ticket { min-height:60px; }
  .motion-toggle { bottom:10px; right:10px; padding:7px 9px 7px 7px; font-size:9px; }
  .site-footer { padding-bottom:48px; }
}
@media(max-width:500px) {
  .hero-art { margin-top:15px; }
  .hero-actions { gap:18px; }
  .availability { font-size:9px; }
  .availability strong { font-size:11px; }
  .book-reveal { width:84%; }
  .cover-title { font-size:21px; }
  .cover-small { font-size:6px; }
  .cover-flower { font-size:44px; }
  .cover-border { padding:4px; }
  .scene-progress { display:none; }
  .scene-footer { font-size:7px; gap:10px; }
  .scene-footer a { gap:6px; }
  .scene-footer .paper-icon { width:15px; height:15px; }
  .device-stage { width:calc(100% - 28px); gap:35px 22px; padding:0 8px 28px; }
  .device-duo { width:96%; left:auto; }
  .device-iphone { width:100%; left:auto; top:auto; }
  .device-ipad { width:100%; right:auto; top:auto; }
  .device-duo figcaption { font-size:21px; }
  .device-iphone figcaption { font-size:14px; gap:6px; }
  .device-ipad figcaption { font-size:17px; }
  .leaf-coral { bottom:10%; height:77%; }
  .leaf-violet { bottom:12%; height:70%; }
  .leaf-cream { bottom:7%; }
  .paper-ground { bottom:4%; }
  .stage-star { left:0; top:0; width:20px; height:20px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .unfold-scene { height:auto; }
  .scene-sticky { position:relative; height:auto; min-height:0; padding-block:70px 40px; }
  .book-cover { display:none; }
  .book-reveal { width:min(760px,80vw); }
  .native-screen,.fold-character,.launch-device,.word-flight { transform:none; opacity:1; }
  .motion-toggle { display:none; }
}