/* Tree intro: the logo grows into a tree whose fruits are the app icons, then they settle into product notes. */
html { background: #fbf5ef; }
body { background: #fbf5ef; }
body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--hero-bg, 1); background: radial-gradient(ellipse at 78% 13%, rgba(228,215,184,.3), transparent 55%), radial-gradient(ellipse at 15% 68%, rgba(220,229,207,.26), transparent 55%), linear-gradient(180deg,#fffdf9,#faf8f2); }
.page { position: relative; z-index: 1; isolation: isolate; overflow: clip; }
.hero { pointer-events: auto; position: relative; display: block; min-height: 110svh; height: 110svh; padding: 0 24px; margin: 0; background: transparent; }
.hero > div.orbit-center { position: relative; top: auto; display: flex; flex-direction: column; height: 100svh; min-height: 0; padding: 0; align-items: center; justify-content: center; text-align: center; z-index: 2; gap: 0; }
.hero .global-logo-group { position: relative; left: auto; top: auto; transform: none; width: clamp(82px, 8vw, 112px); height: auto; aspect-ratio: 1341/1173; margin: 0 0 30px; filter: none; }
.hero h1 { max-width: min(620px, 100%); font-size: clamp(54px,6.3vw,88px); letter-spacing: -.055em; line-height: 1.08; margin: 0; text-wrap: balance; }
html:lang(zh) .hero h1 { font-family: "Songti SC", "STSong", var(--serif); font-size: clamp(42px,4.9vw,68px); font-weight: 500; letter-spacing: .025em; line-height: 1.28; }
.hero-visual { display: none !important; }
/* The headline's fade in and out is driven by the intro timeline in JS. */
.orbit-center h1 { opacity: 0; }
.tree-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tree-back { z-index: 1; }
/* Front foliage sits above the flying icons so fruits tuck into the canopy. */
.tree-front { z-index: 9; }
.orbit-layer { position: fixed; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }
.orbit-icon { transform-origin: 40px 40px; position: absolute; top: 0; left: 0; width: 80px; height: 80px; opacity: 0; }
.orbit-icon img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 21%; box-shadow: 0 12px 22px -12px rgba(47,39,25,calc(.28 * var(--flight-shadow,1))), 0 2px 5px rgba(47,39,25,calc(.06 * var(--flight-shadow,1))); }
.orbit-icon[data-app="albumbee"] img { object-fit: contain; filter: contrast(1.15); mix-blend-mode: normal; box-shadow: none; outline: 0; border-radius: 0; }

/* Notes: the group title sits in a left rail; notes are laid like bricks (every other column
   drops by one step). Each anchor is 357px wide but the paper inside is ~250px, so anchors
   overlap their transparent margins. One rule of offset only: no random scatter. */
#apps.notes-section { position: relative; background: transparent; padding: 30px clamp(12px, 3vw, 56px) 100px; }
#apps > .notes-board { display: block; max-width: 1480px; margin: 0 auto; padding: 0; }
.app-platform { --cols: 3; --step: 8px; width: 100%; box-sizing: border-box; padding: 28px 0 0; }
.app-platform + .app-platform { margin-top: 96px; }
/* The group title gets its own row, aligned to the left edge of the notes below it. */
.platform-heading { display: flex; align-items: baseline; gap: 15px; max-width: calc(var(--cols) * 317px); margin: 0 auto 34px; padding: 0 0 0 22px; box-sizing: border-box; color: #373a2f; }
.platform-heading h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 4.2vw, 60px); letter-spacing: -.04em; margin: 0; }
.platform-heading span { font-size: 12px; color: #8a8679; font-variant-numeric: tabular-nums; }
.platform-grid { display: flex; flex-wrap: wrap; justify-content: flex-start; max-width: calc(var(--cols) * 317px); margin: 0 auto; padding-bottom: var(--step); }
#apps > .notes-board .note-anchor { transform: none; }
.platform-grid > .note-anchor { flex: none; width: 357px; margin: -18px -20px; }
/* Calm the tilt: the paper is drawn at -8°/-5°/2°; turning the whole note (shadow included) back leaves about -3°/-2°/2°. */
.platform-grid > .note-anchor:has(.gc-rot[style*="rotate(-8deg)"]) { rotate: 5deg; }
.platform-grid > .note-anchor:has(.gc-rot[style*="rotate(-5deg)"]) { rotate: 3deg; }
@media (min-width: 761px) and (max-width: 1039px) {
  .app-platform { --cols: 2; }
  .platform-grid > .note-anchor:nth-child(2n) { translate: 0 var(--step); }
}
@media (min-width: 1040px) and (max-width: 1399px) {
  .platform-grid > .note-anchor:nth-child(3n+2) { translate: 0 var(--step); }
}
@media (min-width: 1400px) {
  .app-platform { --cols: 4; }
  .platform-grid > .note-anchor:nth-child(2n) { translate: 0 var(--step); }
}
/* The notes are already grouped by platform, so the bare platform label on each note is redundant.
   Labels that carry a status ("Coming soon") have a data-en attribute and stay. Hidden, not removed, so the footer layout holds. */
.platform-grid .gc-plat:not([data-en]) { visibility: hidden; }
/* A status label ("Coming soon") moves up between the title and the description, centred. */
.platform-grid .gcard .gc-plat[data-en] { left: 0; right: 0; top: 141px; text-align: center; font-size: 11px; letter-spacing: .04em; opacity: .55; }
.platform-grid .gcard:has(.gc-plat[data-en]) .gc-desc { top: 162px; }
/* Description: a little larger, and allowed to run slightly wider than the 191px frame (the paper is ~250px). */
.platform-grid .gcard .gc-desc { left: -12px; width: 215px; font-size: 13px; line-height: 1.5; }
/* "View details" appears only on hover/focus, centred at the bottom of the text area. Behind it sits a patch
   of the note's own paper colour that fades out in every direction, so it can cover a long description
   without a hard edge and without reaching past the paper. */
.platform-grid .gcard .gc-more { left: 0; right: 0; top: 226px; text-align: center; font-size: 12px; color: rgba(0,0,0,.68); opacity: 0; transition: opacity .22s ease; isolation: isolate; }
.platform-grid .gcard .gc-more::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 176px; height: 58px; translate: -50% -50%; background: radial-gradient(ellipse closest-side, var(--gc-paper, #f4efe4) 52%, transparent 100%); }
.platform-grid .gcard:hover .gc-more, .platform-grid .gcard:focus-visible .gc-more { opacity: 1; }
/* Variant A (the 2° notes): the shadow pokes out on the left and bottom, so the note reads as
   floating. Tuck it under the paper. The offset stays on hover too, so the only motion then is
   the existing shadow morph (growing down and to the right) rather than a slide back left first. */
.notes-board .gcard[data-variant="A"] .gc-s2 { translate: 15px -9px; }
.notes-board .gcard[data-variant="A"] .gc-s1 { translate: 7px -4px; }
/* Variant B (the -5° notes): its content block sits about 22px higher on the paper than on the other two
   variants, so the icon rides high and the hover button isn't level with its neighbours. Lower the whole block. */
.gcard[data-variant="B"] > .gc-layer:not(.gc-paper-merged):not(.gc-tsh-static):not(.gc-tsh-hover) { translate: 0 22px; }

/* Keep the page's gradient continuous. Only the return control floats above the content. */
.app-detail-view { --detail-back-background: #fffdf8; }
.app-detail-view[data-app="3body"] { --detail-back-background: #171b20; }
.app-detail-view.is-dam-detail { --detail-back-background: #fffdf3; }
.app-detail-view .app-detail-scroll { padding-top: 92px; }
.app-detail-view .detail-back {
  position: fixed; z-index: 5; top: max(12px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left)); min-height: 44px;
  margin: 0; padding: 0 16px; border-radius: 999px;
  background: var(--detail-back-background);
  box-shadow: 0 2px 6px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
}
.app-detail-view .detail-back:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
body.has-app-detail .app-detail-view .gc-ic { opacity: 1 !important; }
.orbit-center .global-logo-group { animation: orbit-enter .7s .1s ease-out both; }
@keyframes orbit-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes orbit-text { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 760px) {
  .hero h1 { font-size: clamp(35px,8.8vw,58px); }
  html:lang(zh) .hero h1 { font-size: clamp(32px,7.8vw,46px); }
  .hero .global-logo-group { width: 70px; margin-bottom: 22px; }
  /* Phones: one note per row, stacked, no scatter. */
  #apps.notes-section { padding-inline: 0; }
  #apps > .notes-board { max-width: 390px; }
  .app-platform { --cols: 1; }
  .platform-grid { max-width: 357px; padding-bottom: 0; }
  .platform-grid > .note-anchor { margin: 0; rotate: none !important; }
  .platform-heading { padding: 0 0 0 38px; margin: 0 0 20px; }
  .platform-heading h2 { font-size: 36px; }
  .app-platform + .app-platform { margin-top: 56px; }
}
@media (max-width: 356px) {
  .platform-grid { max-width: 300px; }
  .platform-grid > .note-anchor { width: 300px; height: 389px; }
  .platform-grid .note.gcard { zoom: .84; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.orbit-bee-layer { mix-blend-mode: darken; }
.notes-board .gcard[data-app="albumbee"] .gc-ic img { filter: contrast(1.15); }
body.has-geticon-detail .orbit-layer, body.has-app-detail .orbit-layer, body.has-geticon-detail .tree-front, body.has-app-detail .tree-front { visibility: hidden; }