/* Today's Pick — todayspick.net
   Palette comes from the app's fortune-stick scene; each scene tile uses that scene's own colours. */
:root{
  --bg:#FFFBFC; --hero:#F4E7EE; --ink:#3A1F3D; --muted:#7A5E78; --line:#E6D3DE;
  --wine:#7A2E4A; --on-wine:#FFF3F7; --gold:#E9C46A; --paper:#FFF9EC; --paper-ink:#3A1F3D;
  --font: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "PingFang HK", "PingFang TC",
          "Noto Sans CJK HK", "Noto Sans HK", "Microsoft JhengHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#17101A; --hero:#1E1320; --ink:#F4E4EE; --muted:#B79DB2; --line:#3E2A40;
    --wine:#A2466A; --on-wine:#FFF3F7; --paper:#2B1C2D; --paper-ink:#F4E4EE;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--font);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul,dl,dd{margin:0}
ul{padding:0}
a{color:var(--wine); text-underline-offset:.18em}
@media (prefers-color-scheme: dark){ a{color:#E7A9C2} }
a:focus-visible,button:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:6px}
.wrap{max-width:1040px; margin:0 auto; padding-left:20px; padding-right:20px}
.skip{position:absolute; left:-999px; top:8px; background:var(--wine); color:var(--on-wine); padding:8px 14px; border-radius:8px; z-index:10}
.skip:focus{left:8px}

/* header */
.site-head{background:var(--hero)}
.page-support .site-head,.page-privacy .site-head{border-bottom:1px solid var(--line)}
.head-row{flex-wrap:wrap; display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; padding-bottom:14px}
.brand{white-space:nowrap; display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.05rem; color:var(--ink); text-decoration:none}
.brand-mark{width:32px; height:32px; flex:none}
.site-head nav{display:flex; align-items:center; gap:2px}
.site-head nav a{white-space:nowrap; color:var(--ink); text-decoration:none; padding:8px 10px; border-radius:999px; font-size:.95rem; font-weight:600}
.site-head nav a:hover{background:rgba(122,46,74,.1)}
.site-head nav a[aria-current="page"]{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.35em}
.site-head nav a.lang{border:1.5px solid var(--line); margin-left:4px; padding:6px 12px}

/* hero */
.hero{background:var(--hero); padding:36px 0 64px}
.hero-grid{display:grid; gap:40px; align-items:center}
.hero h1{font-size:clamp(2.5rem, 8.5vw, 4.4rem); line-height:1.05; letter-spacing:-.02em; font-weight:800; text-wrap:balance}
:lang(zh-Hant-HK) .hero h1{letter-spacing:0; line-height:1.2}
.lede{font-size:1.18rem; line-height:1.55; max-width:34em}
.hero .lede{margin-top:20px; max-width:30em}
.store{margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px}
.soon{display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:var(--bg); font-weight:700; padding:11px 18px 11px 14px; border-radius:14px; font-size:1rem}
.soon svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.free{color:var(--muted); font-size:.98rem}

/* draw demo */
.draw{display:flex; flex-direction:column; align-items:center; text-align:center}
.tube{background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; border-radius:24px}
.tube-svg{display:block; width:210px; height:auto; overflow:visible}
.tube-svg text{font-family:"Songti TC","Noto Serif CJK TC","PMingLiU",serif}
.tube-g{transform-box:view-box; transform-origin:50% 90%}
.stick-pick{transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.has-pick .stick-pick{transform:translateY(-30px)}
.tube.shaking .tube-g{animation:shake .9s ease-in-out}
.tube.shaking .sticks{animation:rattle .15s linear 6}
@keyframes shake{
  0%{transform:rotate(0)} 12%{transform:rotate(-9deg)} 26%{transform:rotate(8deg)} 40%{transform:rotate(-7deg)}
  54%{transform:rotate(6deg)} 70%{transform:rotate(-4deg)} 86%{transform:rotate(2deg)} 100%{transform:rotate(0)}
}
@keyframes rattle{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}}
.slip{
  margin-top:8px; width:min(100%, 340px); min-height:84px; display:flex; align-items:center; justify-content:center;
  background:var(--paper); color:var(--paper-ink); border-radius:6px; padding:14px 18px;
  border-top:10px solid #C2413B; box-shadow:0 10px 24px -14px rgba(58,31,61,.55);
}
.slip-text{font-size:1.35rem; font-weight:700; line-height:1.3; text-wrap:balance}
.slip-text.is-empty{font-size:1rem; font-weight:500; color:var(--muted)}
.slip-text.pop{animation:pop .35s ease-out}
@keyframes pop{0%{opacity:0; transform:translateY(-10px) scale(.96)} 100%{opacity:1; transform:none}}
.btn{
  font:inherit; font-weight:700; font-size:1.05rem; border:0; cursor:pointer; margin-top:18px;
  background:var(--wine); color:var(--on-wine); padding:13px 28px; border-radius:999px; min-height:48px;
}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:translateY(1px)}
.demo-note{margin-top:12px; font-size:.9rem; color:var(--muted)}

/* bands */
.band{padding:64px 0 0}
.band h2{font-size:clamp(1.7rem, 4.5vw, 2.3rem); line-height:1.15; letter-spacing:-.01em; font-weight:800}
.sub{margin-top:10px; color:var(--muted); max-width:36em}

/* scenes: each tile wears its scene's colours from the app */
.scenes{list-style:none; display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-top:28px}
.scene{background:var(--s-bg); color:var(--s-ink); border-radius:22px; padding:18px 16px 20px}
.scene svg{width:44px; height:44px; fill:none; stroke:var(--s-accent); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.scene h3{margin-top:10px; font-size:1.1rem; line-height:1.25}
.scene p{margin-top:4px; font-size:.95rem; line-height:1.45; opacity:.85}
.scene-jar{--s-bg:#EEF1F6; --s-ink:#1E2A3A; --s-accent:#5B6CFF}
.scene-temple{--s-bg:#F4E7EE; --s-ink:#3A1F3D; --s-accent:#7A2E4A}
.scene-gacha{--s-bg:#FFF1E6; --s-ink:#3A2418; --s-accent:#FF6B4A}
.scene-scratch{--s-bg:#EAF6F0; --s-ink:#173A2C; --s-accent:#1F9D74}
.scene-wheel{--s-bg:#FFF8E1; --s-ink:#3B2F12; --s-accent:#D98A00}
.scene-cards{--s-bg:#1F1B3A; --s-ink:#F3EEFF; --s-accent:#C9A7FF}
@media (prefers-color-scheme: dark){
  .scene-jar{--s-bg:#151A24; --s-ink:#EEF1F7; --s-accent:#8794FF}
  .scene-temple{--s-bg:#2A1A2D; --s-ink:#F4E4EE; --s-accent:#E9C46A}
  .scene-gacha{--s-bg:#1F1612; --s-ink:#FBEDE3; --s-accent:#FF6B4A}
  .scene-scratch{--s-bg:#122019; --s-ink:#E6F5EE; --s-accent:#34C194}
  .scene-wheel{--s-bg:#1E1A10; --s-ink:#FFF4D6; --s-accent:#F59E0B}
  .scene-cards{--s-bg:#211C40; --s-ink:#F3EEFF; --s-accent:#C9A7FF}
}

/* features */
.feats{margin-top:20px}
.feat{padding:20px 0; border-bottom:1px solid var(--line)}
.feat:last-child{border-bottom:0}
.feat dt{font-weight:700; font-size:1.15rem; line-height:1.3}
.feat dd{margin-top:6px; max-width:38em}

.end{padding-bottom:72px; text-align:center}
.end h2{max-width:20em; margin:0 auto; text-wrap:balance}
.end p{margin-top:22px}
.end .sub{margin-left:auto; margin-right:auto}

/* support + privacy */
.prose{max-width:760px; padding-top:44px; padding-bottom:72px}
.prose h1{font-size:clamp(2.2rem, 7vw, 3.2rem); line-height:1.1; letter-spacing:-.02em; font-weight:800}
.prose .date{margin-top:8px; color:var(--muted)}
.prose .lede{margin-top:20px}
.prose h2{margin-top:48px; font-size:1.55rem; line-height:1.2; font-weight:800}
.prose h3{margin-top:30px; font-size:1.12rem; line-height:1.35}
.prose p{margin-top:12px}
.prose ul{margin-top:12px; padding-left:1.3em}
.prose li{margin-top:6px}
.lost{padding-top:18vh; text-align:center}
.lost .lede{margin-left:auto; margin-right:auto}

/* footer */
.site-foot{border-top:1px solid var(--line); padding:26px 0 36px; font-size:.93rem; color:var(--muted)}
.foot-row{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px}
.foot-links{display:flex; flex-wrap:wrap; gap:6px 18px}
.foot-links a{color:inherit}

@media (min-width:640px){
  .wrap{padding-left:32px; padding-right:32px}
  .scenes{grid-template-columns:repeat(3, 1fr); gap:16px}
  .scene{padding:24px 22px 26px}
  .feat{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 9fr); gap:32px; align-items:baseline}
  .feat dd{margin-top:0}
}
@media (min-width:880px){
  .hero{padding:56px 0 88px}
  .hero-grid{grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:56px}
  .tube-svg{width:250px}
  .band{padding-top:88px}
}
@media (max-width:420px){ .head-row{gap:6px} .site-head nav{gap:0} .site-head nav a{padding:8px 5px; font-size:.85rem} .site-head nav a.lang{padding:5px 9px; margin-left:2px} .brand{gap:7px; font-size:.98rem} .brand-mark{width:28px; height:28px} }
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .tube.shaking .tube-g,.tube.shaking .sticks,.slip-text.pop{animation:none}
  .stick-pick{transition:none}
}