/* The bright draft: the same page on warm white, with the sun-washed Mediterranean café. Loaded after landing.css. */
:root { --bg:#FBF8F3; --panel:#ffffff; --panel2:#F5F2EC; --line:rgba(21,29,32,.09); --tx:#151D20; --mut:#55636B; --dim:#8E9AA0; --sky:#1F8FD6; }
html, body { background:#FBF8F3; color:#151D20; }
/* why stands on the DS Sand 50, no photo */
.fbg { background:#FAF7F0; }
.product .sbg.full { background-color:transparent; background-position:center 60%; -webkit-mask:linear-gradient(transparent,#000 10%,#000 90%,transparent); mask:linear-gradient(transparent,#000 10%,#000 90%,transparent); }
.art { --hairline-plate:#FBF8F3; }
/* panels: white cards with a soft lift */
.pn { box-shadow:0 1px 0 rgba(21,29,32,.04), 0 1.4rem 3rem -1.6rem rgba(28,80,107,.28); }
.msg, .ag .bd, .d-trust .bd, .draft, .cx, .ax li, .fe { color:#3C4A51; }
.chip { background:rgba(21,29,32,.04); }
.chip.sky { color:#1A6FB0; } .chip.ok { color:#23794E; } .chip.warn { color:#A8620F; } .chip.bad { color:#C23D3D; }
.tab:hover { background:rgba(21,29,32,.04); } .tab.on { background:#fff; box-shadow:0 0 0 1px var(--line), 0 .4rem 1rem -.6rem rgba(28,80,107,.35); }
.seg { background:rgba(21,29,32,.05); } .seg .on { background:#fff; box-shadow:0 1px 2px rgba(21,29,32,.08); }
.colx { background:rgba(21,29,32,.035); } .colx h5 em { background:rgba(21,29,32,.07); }
.ac { box-shadow:0 1px 0 rgba(21,29,32,.04), 0 .5rem 1rem -.7rem rgba(28,80,107,.3); }
.ac.src { box-shadow:inset 3px 0 0 var(--sky), 0 1px 0 rgba(21,29,32,.04), 0 .5rem 1rem -.7rem rgba(28,80,107,.3); }
.d-orch .msg.mine { background:rgba(31,143,214,.06); box-shadow:inset 0 0 0 1px rgba(31,143,214,.25); }
.acts .go { background:#151D20; color:#fff; border-color:#151D20; } .acts .go.pressed { box-shadow:0 0 0 3px rgba(21,29,32,.15); }
.ck .b.go { color:#fff; }
.cn .lg, .ag .ph .tile, .cx .lg { box-shadow:inset 0 0 0 1px var(--line); }
/* the night card in "Works while you're away" stays a night card */
.desk { --tx:#f7f8f8; --mut:#8a8f98; --dim:#7c8088; --line:rgba(255,255,255,.08); --panel2:#16171a; color:#f7f8f8; background:radial-gradient(120% 90% at 70% 0%,#24344f 0%,#111a2a 50%,#0d1118 100%); }
.desk .ph small { color:#9aa3b0; }
/* the end: words over the bright sky are dark */
/* the end is the café at night, seen from above like Poly's desk: the words sit low over a dark scrim, white */
.end::after { content:""; position:absolute; inset:auto 0 0; height:60%; background:linear-gradient(rgba(8,10,18,0),rgba(8,10,18,.82)); z-index:1; pointer-events:none; }
/* as Poly's end: the mark in the middle of the table, the words and the button under it, the line bottom left, links bottom right */
.end .txt { top:66%; color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.55); } .end p { color:rgba(255,255,255,.86); max-width:31rem; margin-inline:auto; } .end .row { margin-top:1.6rem; }
.end .drop { width:10vw; margin-left:-5vw; }
/* ANIMA on the wood: a dark contact shadow right under it, and its blue light spilling over the varnish, as Poly's crystal throws colour */
.end .glow { width:8.4vw; height:1.3vw; margin-top:-.25vw; background:radial-gradient(closest-side, rgba(3,4,8,1) 0%, rgba(3,4,8,.85) 50%, rgba(3,4,8,0) 100%); }
/* the candle is behind and to the left, so the long soft shadow falls toward the viewer and to the right */
.end .glow::before { content:""; position:absolute; left:60%; top:50%; width:14vw; height:3.4vw; transform:translate(-50%,-30%) rotate(12deg); border-radius:50%;
  background:radial-gradient(closest-side, rgba(3,4,8,.7), rgba(3,4,8,0)); filter:blur(8px); }
.end .glow::after { content:""; position:absolute; left:50%; top:50%; width:26vw; height:7vw; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(closest-side, rgba(66,191,255,.32), rgba(66,191,255,.08) 55%, rgba(66,191,255,0)); mix-blend-mode:screen; }
/* the candle light on ANIMA itself: warm on the upper left, falling off to a cool shade on the lower right, clipped to its shape */
.end .drop::after { content:""; position:absolute; inset:0; background:linear-gradient(125deg, rgba(255,165,85,.5) 22%, rgba(255,165,85,0) 50%, rgba(8,10,28,0) 54%, rgba(8,10,28,.5) 80%);
  -webkit-mask:url(buddy-spin.webp) var(--mp, 0%) 0/800% 100% no-repeat; mask:url(buddy-spin.webp) var(--mp, 0%) 0/800% 100% no-repeat; }
.end .foot b { font-weight:700; font-size:clamp(1.2rem,1.6vw,1.7rem); letter-spacing:-.01em; }
.foot { color:#151D20; } .end .foot { color:#fff; }
/* the floating nav as light glass */
.dock { background:rgba(255,255,255,.72); border-color:rgba(21,29,32,.1); box-shadow:0 1rem 2.4rem -1rem rgba(28,80,107,.35); }
.dock button { color:#151D20; } .dock button:hover { background:rgba(21,29,32,.05); } .dock button.on { background:rgba(21,29,32,.07); box-shadow:inset 0 0 0 1px rgba(21,29,32,.08); }
.dock button + button::before { background:rgba(21,29,32,.12); }

/* the counter: dark on the bright café too, except over the footer photo where it stays dark as well */
.ctr.lt { --tx:#151D20; --dim:rgba(21,29,32,.45); --mut:#55636B; text-shadow:none; }
@media (max-width:1023px) { .end .txt { top:auto; } .end .drop { width:clamp(4rem,6vw,6.5rem); margin-left:calc(clamp(4rem,6vw,6.5rem) / -2); } .end .glow { width:clamp(6rem,10vw,10rem); height:1.3rem; } }

/* frame 2, measured off Linear's hero at 1710 × 981: headline 64px at y 272, a 15px line at y 432, the window 1320px wide
   at y 527 with a 1px edge and 12px corners, the app inside close to its own size. The frame scrolls inside itself, as
   Linear's page does, so the window keeps that size and its lower half comes up as you scroll */
@media (min-width:1024px) {
  /* the hundredth of a pixel: GSAP lifts a fixed frame with no transform (an identity one counts as none) out of the
     DOM to read its matrix, and that reloads the six app windows inside on every slide; a transform of its own keeps
     them loaded */
  .product.scrolls { display:block; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; transform:translate(.01px, 0); }
  .product.scrolls::-webkit-scrollbar { display:none; }
  /* the parts as snap stops: the window holds near the top while the frame scrolls under it */
  /* the page drives this frame's scroll, a part per swipe, so the browser's own scrolling (and an iframe's) is off */
  .product.snap { overflow-y:hidden; }
  .product.snap .pbody { position:sticky; top:88px; }
  .product .stops { position:absolute; left:0; top:0; width:1px; pointer-events:none; }
  .product .stops i { position:absolute; left:0; height:1px; scroll-snap-align:start; scroll-snap-stop:always; }
  .product.scrolls .sbg.full { position:sticky; top:0; height:100vh; height:100dvh; margin-bottom:-100vh; margin-bottom:-100dvh; }
  .product .pfit { position:relative; width:min(1400px, 100% - 6rem); padding:max(7.5rem, 17vh) 0 40px; }
  /* the headline steps back to a section title; the window and its parts carry the frame */
  .product.scrolls .ph2 { font-size:36px; line-height:1.15; text-align:center; padding-left:0; }
  .product .prow { display:flex; align-items:baseline; justify-content:center; gap:2rem; margin-top:12px; padding:0; font-size:17px; color:#55636B; font-weight:400; letter-spacing:-.01em; text-align:center; }
  /* the parts on the left, the window on the right; the whole body is stuck under the header, so the parts stay in
     view at every stop and the picked one's name and line change with the frame */
  .product .pbody { display:grid; grid-template-columns:280px minmax(0,1fr); gap:48px; align-items:start; margin-top:44px; }
  .product .side { display:block; padding-top:2px; align-self:center; }
  .product .tabs { position:relative; display:flex; flex-direction:column; gap:2px; }
  .product .tabs .ind { position:absolute; left:0; right:0; top:0; height:40px; border-radius:10px; background:rgba(255,255,255,.78); box-shadow:0 0 0 1px rgba(21,29,32,.08), 0 .4rem 1rem -.6rem rgba(28,80,107,.35); pointer-events:none; }
  .product .tab, .product .tab.on, .product .tab:hover { position:relative; z-index:1; display:flex; align-items:center; gap:12px; height:40px; padding:0 12px; border:0; border-radius:10px; background:none; box-shadow:none; color:#55636B; font:500 15px/1 'Nunito Sans','Noto Sans TC',system-ui,sans-serif; letter-spacing:-.01em; cursor:pointer; transition:color .2s; }
  .product .tab:hover { color:#151D20; background:rgba(21,29,32,.04); }
  .product .tab.on { color:#151D20; }
  .product .tab svg { width:18px; height:18px; stroke-width:1.8; }
  .product .say { margin:36px 0 0; padding:0 12px; min-height:250px; font-size:17px; }
  .product .say b { display:block; font:600 30px/1.15 'Nunito Sans','Noto Sans TC',system-ui,sans-serif; letter-spacing:-.01em; color:#151D20; }
  .product .say span { display:block; margin-top:12px; font:400 17px/1.55 'Nunito Sans','Noto Sans TC',system-ui,sans-serif; letter-spacing:-.01em; color:#2E3B42; text-wrap:pretty; }
  .product .dev { width:100%; margin:0; padding:0; border-radius:12px; background:none; box-shadow:0 0 0 1px rgba(21,29,32,.14), 0 2.5rem 6rem -2.5rem rgba(28,60,90,.45); }
  .product .dev::after { display:none; }
  .product .dev .scr { border-radius:12px; }
}

/* Linear's headline type: one sans face, weight 510, tracking -0.022em, tight leading; the serif accent and the drawn line go */
.product .ph2, .ph2, .gal-p .gal h2, .end h2, .spirit .lead { font-family:'Nunito Sans','Noto Sans TC',system-ui,sans-serif; font-weight:700; letter-spacing:-.01em; line-height:1.04; }
/* under 900px the parts are a row of chips (landing.css): no sliding highlight */
@media (max-width:1023px) { .product .tabs .ind { display:none; } }
.ph2 .sf, .gal-p .gal h2 .sf, .end h2 em { font:inherit; font-size:1em; letter-spacing:inherit; line-height:inherit; }
.ph2 .underline, .gal-p .gal h2 .underline { display:none; }
.body, .end p { letter-spacing:-.01em; }
body .tile .cap h3 { font-family:'Nunito Sans','Noto Sans TC',system-ui,sans-serif; font-weight:700; font-size:1.375rem; line-height:1.2; letter-spacing:-.01em; }

.top.sc { background:none; box-shadow:none; }

/* the features run from noon to the blue hour: the frame's ground is one tall gradient that scrolls with the tiles */
/* day to dusk in the design system's colours only (Depth 50 → Current 50 → Sand 100 → Sand 300 → Depth 400 → Depth 700 → Current 900) */
.gal-p.gal-p { background:linear-gradient(180deg,#F6F8F9 0%,#E9EEFC 18%,#FDF4E4 38%,#EBD6B5 56%,#8BA4B0 74%,#33454E 88%,#0D255E 100%); background-attachment:local; }

/* frame 2 sits on the table: no wash at its top and bottom edges, the wood runs to the frame */
.product .sbg.full { -webkit-mask:none; mask:none; }
.product.scrolls .sbg.full { background:none; }

/* the hero: dark words over the pale liquid glass, the second line under a drawn line */
.hero .title { color:#151D20; } .hero .body { color:#2C3A41; }
.hero .body { text-wrap:balance; }
.hero .underline path { stroke:#151D20; }
.hero .shade { background:linear-gradient(180deg,rgba(244,247,251,.6) 0%,rgba(244,247,251,.25) 30%,rgba(244,247,251,0) 50%); }

/* frame 3, measured off Linear's "A new species of product tool" at 1710 wide: a 1280px column, the line at 48px
   breaking near 1180px, the three figures across the same column */
/* why speaks in the DS section inks: --sec-ink (Depth 700) titles and the ANIMA lines, --sec-ink-2 (Mist 600) body,
   --sec-ink-3 (Depth 500) small labels, --sec-accent (Current 500) the ANIMA label; Sand 300 rules */
.spirit { --tx:#33454E; --mut:#595959; --dim:#5C7E8E; --line:#EBD6B5; }
.spirit .wrap { width:min(1280px, 100% - 4rem); max-width:none; margin:0 auto; }
/* title, then the line under it on its own row; each figure's name sits a clear step above its text */
.spirit .lead { font-size:inherit; max-width:1180px; }
.spirit .lead h2 { font:700 min(56px, 4vw)/1.04 'Nunito Sans','Noto Sans TC',system-ui,sans-serif; letter-spacing:-.01em; color:var(--tx); }
.spirit .lead p { margin-top:20px; max-width:640px; font:400 20px/1.5 'Nunito Sans','Noto Sans TC',system-ui,sans-serif; letter-spacing:-.01em; color:var(--mut); }
.spirit .fig h3 { font:600 20px/1.3 'Nunito Sans','Noto Sans TC',system-ui,sans-serif; letter-spacing:-.012em; color:var(--tx); }
.spirit .fig p { margin-top:8px; font-size:16px; line-height:1.55; color:var(--mut); }

/* the first load, as Poly's: the mark over the page colour and a hairline that fills as every app page and image comes in */
.boot { position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; background:#FBF8F3; transition:opacity .6s ease, visibility .6s; }
.boot img { width:56px; height:auto; animation:bootp 1.6s ease-in-out infinite; }
.boot i { width:160px; height:2px; border-radius:1px; background:rgba(21,29,32,.1); overflow:hidden; }
.boot b { display:block; height:100%; width:100%; background:#151D20; transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }
.boot.done { opacity:0; visibility:hidden; }
@keyframes bootp { 50% { opacity:.55 } }

/* four figures across the 1280 column */
@media (min-width:1024px) { .spirit .figs { grid-template-columns:repeat(4, minmax(0, 1fr)); } .spirit .fig { padding:0 1.6rem; } .spirit .fig:first-child { padding-left:0; } .spirit .art { width:100%; max-width:15rem; } }


/* FAQ under the night sky: the top of the end's tall shot, drawn exactly as the end's film draws its first frame */
.faq { background:#0B1430 url(end-tilt.jpg) center top / 100% auto no-repeat; color:#fff; }
.faq .fq { width:min(840px, 100% - 4rem); margin:0 auto; font-family:var(--font-sans); }
/* the design system's FAQ (ANIMAFaqSection), drawn on <details> so the page keeps its own markup: centred 36/700 title, 840px list,
   18/700 questions 21px in from the edge, a rounded chevron that flips, 1px --sec-rule between items only, answers 16/1.7 --sec-ink-2.
   The section is data-theme="dark" so the tokens are the dark ones: it sits on the night sky */
.faq h2 { margin:0 0 52px; text-align:center; font:700 36px/1.35 var(--font-sans); letter-spacing:0; color:var(--sec-ink); text-wrap:balance; }
.faq details + details { border-top:1px solid var(--sec-rule); }
.faq summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:24px; padding:22px 21px; font:700 18px/1.45 var(--font-sans); letter-spacing:0; color:var(--sec-ink); transition:color 160ms var(--ease-standard, ease); }
.faq summary:hover { color:var(--nav-ink-muted); }
.faq summary:focus-visible { outline:2px solid var(--anima-sky-300); outline-offset:2px; border-radius:4px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:""; flex:none; margin-left:auto; width:20px; height:20px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform 400ms var(--ease-nav-gentle, ease); }
.faq details[open] summary::after { transform:rotate(180deg); }
.faq details p { margin:0; padding:0 65px 26px 21px; font-size:16px; line-height:1.7; color:var(--sec-ink-2); text-wrap:pretty; }
/* open and close slide like the component does (browsers without ::details-content just snap) */
.faq details { interpolate-size:allow-keywords; }
.faq details::details-content { block-size:0; overflow:hidden; transition:block-size 450ms var(--ease-nav-gentle, ease), content-visibility 450ms allow-discrete; }
.faq details[open]::details-content { block-size:auto; }
.faq details p { opacity:0; transform:translateY(-6px); transition:opacity 350ms var(--ease-nav-gentle, ease), transform 450ms var(--ease-nav-gentle, ease); }
.faq details[open] p { opacity:1; transform:none; transition-delay:120ms, 0ms; }
/* the questions sit centred as they are when all are closed, and hang from there, so opening an answer never moves the title */
.faq.panel { justify-content:flex-start; padding-top:var(--fq-top, 22vh); }

/* the end: ANIMA, alive, stands in the middle of the desk. It is simply there once the camera has settled */
.end.tilt .drop, .end.tilt .glow { display:none; }
.end .buddy { position:absolute; left:50%; top:calc(60vh - 18vw * 1.08 * .9); width:18vw; aspect-ratio:1 / 1.08; z-index:3; opacity:0; transform:translateX(-50%) scale(.94); pointer-events:none; }
.end .buddy.on { opacity:1; transform:translateX(-50%); pointer-events:auto; transition:opacity .3s ease, transform .45s cubic-bezier(.2,.9,.3,1.25); }
/* Nami (nami-buddy.js) is wider than the old drop; her feet sit at the foot of her canvas, on the same line of the desk */
.end .buddy { width:21.7vw; aspect-ratio:808 / 690; top:calc(60vh - 21.7vw * 690 / 808 * .97); }
/* the tour's side block sits on the sky where it turns from pale to deep blue: a frosted panel keeps its words at full contrast */
@media (min-width:1024px) {
  .product .side { padding:12px 12px 20px; border-radius:18px; background:rgba(255,255,255,.8); -webkit-backdrop-filter:blur(22px) saturate(1.2); backdrop-filter:blur(22px) saturate(1.2); box-shadow:inset 0 0 0 1px rgba(255,255,255,.75), 0 1.6rem 3rem -2rem rgba(28,60,90,.45); }
  .product .tabs .ind { background:#fff; }
  .product .tab, .product .tab.on, .product .tab:hover { color:#33424A; }
  .product .tab.on { color:#151D20; font-weight:600; }
  .product .say { margin-top:24px; }
  .product .say b { color:#0F171A; }
  .product .say span { color:#1E2A30; }
}
/* the picker is the app's own rail, opened up: the same lavender frame as the window, the same height, and the same sky
   pill as the rail's knob, sliding with the same timing, so choosing here and the rail inside move as one */
@media (min-width:1024px) {
  .product .pbody { align-items:stretch; gap:16px; }
  .product .side { align-self:stretch; display:flex; flex-direction:column; justify-content:center; padding:20px 16px; border-radius:12px;
    background-color:#E9EEFC; background-image:radial-gradient(80% 50% at 0% 0%,#BACCF5 0%,rgba(186,204,245,0) 70%),radial-gradient(80% 50% at 100% 100%,#BACCF5 0%,rgba(186,204,245,0) 70%),linear-gradient(160deg,#DCE4FA 0%,#E9EEFC 55%);
    -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 0 0 1px rgba(21,29,32,.14), 0 2.5rem 6rem -2.5rem rgba(28,60,90,.45); }
  /* the knob is plain white with dark type: no gradient, no glow */
  .product .tabs .ind { border-radius:22px; background:#fff; box-shadow:none; }
  .product .tab, .product .tab.on, .product .tab:hover { height:44px; border-radius:22px; padding:0 16px; color:#33454E; transition:color .3s; }
  .product .tab:hover { background:rgba(255,255,255,.6); }
  .product .tab.on, .product .tab.on:hover { color:#fff; background:none; font-weight:600; }
  .product .say { margin-top:28px; padding:0 16px; }
}
/* the picker wears the features' glass (tile 08's ticket): dark, translucent, white type; it sits centred beside the window */
@media (min-width:1024px) {
  .product .pbody { align-items:center; }
  .product .side { align-self:center; padding:16px 14px 24px; border-radius:1.6rem; background:rgba(26,34,54,.62); background-image:none;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 2rem 3rem -2rem rgba(0,0,0,.5); color:#fff; }
  .product .tab, .product .tab.on, .product .tab:hover { color:rgba(255,255,255,.8); transition:color .15s, background-color .2s; }
  .product .tab:hover { background:rgba(255,255,255,.1); color:#fff; }
  /* the dark label follows the knob (landing.js sets .lit as it slides under), not the pick */
  .product .tab.on, .product .tab.on:hover { color:rgba(255,255,255,.8); }
  .product .tab.lit, .product .tab.lit:hover { color:#1F59E0; }
  .product .say b { color:#fff; }
  .product .say span { color:rgba(255,255,255,.8); }
}

/* the picker and the window are one sheet of the features' glass: the picker is the only rail (the app's own is left out
   of the tour), the window is let into the sheet beside it, and the sheet carries the one shadow */
@media (min-width:1024px) {
  .product .pbody { grid-template-columns:252px minmax(0,1fr); gap:14px; align-items:stretch; padding:14px; border-radius:22px; background:rgba(26,34,54,.62);
    -webkit-backdrop-filter:blur(22px) saturate(1.2); backdrop-filter:blur(22px) saturate(1.2);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 2rem 4rem -2rem rgba(0,0,0,.55); }
  .product .side { align-self:stretch; justify-content:center; padding:8px 6px 14px; border-radius:0; background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  /* the site's frosted frame: 22 px outside, the window in it 12 px (the design system's glass frame) */
  .product .dev { border-radius:12px; box-shadow:0 0 0 1px rgba(255,255,255,.16); background:#F7F8FB; }
  .product .dev .scr { border-radius:12px; }
}

/* while the camera moves between the café and the product (landing.js adds .gazing to <html>), the sheet's backdrop blur is off:
   a live blur over layers that are scaling and fading is what a Retina screen drops frames on */
@media (min-width:1024px) { .gazing .product .pbody { -webkit-backdrop-filter:none; backdrop-filter:none; } }
/* the six app windows are not drawn during the move (visibility keeps their layout and does not reload them), then fade in once it ends.
   Under them lies a still of the Inbox as it first shows (assets/app/inbox.html at 1280 × 800, taken at 2x), so the window
   arrives full rather than empty grey, and the live Inbox fades in over the same picture */
.product .dev .scr > .still { display:none; }
@media (min-width:1024px) {
  .product .dev .scr > .still { display:block; position:absolute; left:0; top:0; width:100%; height:auto; pointer-events:none; }
  .product .dev iframe { transition:opacity .25s ease-out; }
  .gaze-apps .product .dev iframe { visibility:hidden; opacity:0; transition:none; }
}

/* the tour's apps are laid out at 1280 × 800 (landing.js APPW), so their type reads at the window's size */
@media (min-width:1024px) { .product .dev iframe { width:1280px; height:800px; } }
/* when the picker beside it is the taller, the window stretches to its height and the app inside is laid out to fill it (landing.js fit) */
@media (min-width:1024px) { .product .dev { display:flex; } .product .dev .scr { flex:1; } }


/* the end's line breaks evenly, so its last line is never one word (or, in Chinese, one character) */
.end p { text-wrap:balance; }
/* in Chinese it breaks only at punctuation and spaces, never inside a word like 加入 */
:lang(zh) .end p { word-break:keep-all; }