:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: #172331;
  background: #edf7ff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
button, input { font: inherit; }
a { color: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #1765ed; outline-offset: 5px; }

.page-shell {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 0 52px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 41%, #fff 0%, #ffffffb0 18%, #ffffff00 53%),
    radial-gradient(ellipse at 100% 0%, #c5e6ffb0 0%, #c5e6ff00 48%),
    #edf7ff;
}
.site-header, .site-footer { width: 100%; max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.site-header { padding: 30px 0; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: .025em; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; border-radius: 9px; background: #172331; color: #fff; font-size: 15px; font-weight: 700; }
.brand-divider { padding: 0 9px; color: #7f93a4; }
.header-label { font-size: 12px; letter-spacing: .12em; color: #66798c; }
.main-content { flex: 1; display: flex; justify-content: center; align-items: center; padding: 18px 0 46px; }
.landing { width: 100%; max-width: 420px; text-align: center; }
.hero-art { width: 216px; height: 162px; margin: 0 auto 19px; position: relative; display: grid; place-items: center; }
.music-tile { width: 124px; height: 124px; position: relative; z-index: 1; transform: rotate(-10deg); border-radius: 32px; background: linear-gradient(140deg, #fff 4%, #f2faff 48%, #d4eafb 100%); border: 1px solid #fff; box-shadow: 0 18px 32px -17px #34779e66, inset -3px -3px 6px #a3c7dc22; }
.music-tile svg { width: 100%; height: 100%; padding: 7px; }
.note-main { fill: #192331; }
.note-shadow { fill: #63c2ff; }
.orbit { position: absolute; display: block; width: 202px; height: 90px; border: 1px solid #acd5f3; border-radius: 50%; transform: rotate(-26deg); opacity: .68; }
.orbit-two { width: 180px; height: 132px; transform: rotate(33deg); border-style: dashed; border-color: #b4d9f5; opacity: .6; }
.spark { width: 9px; height: 9px; background: #6cb7ec; border-radius: 50%; position: absolute; z-index: 2; }
.spark-one { top: 35px; right: 8px; box-shadow: 0 0 0 5px #cfe9fb; }
.spark-two { left: 5px; bottom: 29px; width: 6px; height: 6px; background: #8ecaf4; }
.art-caption { position: absolute; right: -2px; bottom: 10px; z-index: 3; padding: 7px 10px; border-radius: 6px; background: #fff; color: #34526a; font-size: 9px; font-weight: 700; letter-spacing: .13em; box-shadow: 0 4px 15px #6c98b518; transform: rotate(6deg); }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .14em; color: #4f718b; }
.eyebrow > span { width: 5px; height: 5px; border-radius: 50%; background: #579ed2; }
h1 { margin: 16px 0 18px; font-size: clamp(37px, 4.7vw, 52px); line-height: 1.24; letter-spacing: -.035em; font-weight: 800; }
.intro { color: #66798b; font-size: 14px; line-height: 1.85; margin: 0 0 29px; letter-spacing: .035em; }
.actions { width: 100%; max-width: 344px; margin: 0 auto; display: grid; gap: 11px; }
.button { border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; font-size: 15px; font-weight: 600; min-height: 56px; border-radius: 15px; transition: background-color .18s, transform .18s, box-shadow .18s; }
.button-primary { background: #172331; color: #fff; box-shadow: 0 9px 18px -10px #1723318c; }
.button-primary:hover { background: #2b4055; box-shadow: 0 11px 20px -10px #1723318c; }
.button-primary:active { transform: translateY(1px); }
.button-primary svg { flex-shrink: 0; }
.button-secondary { min-height: 48px; border: 1px solid #c6dcec; background: #ffffff47; color: #46627a; font-size: 13px; font-weight: 500; }
.button-secondary:hover { background: #fff; }
.device-hint { margin: 17px 0 0; font-size: 11px; color: #6b8194; line-height: 1.7; }
.launch-status { max-width: 344px; margin: 16px auto 0; padding: 12px 15px; border: 1px solid #bed6e8; border-radius: 12px; background: #ffffff9c; color: #48657d; font-size: 12px; line-height: 1.8; text-align: left; }
.site-footer { padding: 0 0 25px; color: #7d94a7; font-size: 10px; letter-spacing: .04em; gap: 20px; }
.site-footer span > span { padding: 0 8px; color: #b6c8d5; }

.help-dialog { width: min(400px, calc(100% - 32px)); padding: 0; max-height: calc(100vh - 40px); max-height: calc(100svh - 40px); overflow-y: auto; border: 1px solid #dfebf4; border-radius: 24px; color: #172331; background: #fff; box-shadow: 0 25px 80px #17233130; }
.help-dialog::backdrop { background: #192b4266; backdrop-filter: blur(5px); }
.dialog-content { position: relative; padding: 34px 27px 27px; }
.dialog-close { position: absolute; top: 12px; right: 12px; border: 0; background: #f0f5f9; color: #66798b; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; }
.dialog-close:hover { background: #e5eff6; }
.dialog-icon { width: 52px; height: 52px; background: #eaf5ff; border-radius: 16px; color: #387eb6; display: grid; place-items: center; margin-bottom: 20px; }
.dialog-content h2 { margin: 0 0 12px; font-size: 24px; line-height: 1.4; }
#dialog-description { margin: 0 0 23px; font-size: 14px; line-height: 1.85; color: #65788a; }
.share-link label { display: block; font-size: 11px; color: #718597; margin-bottom: 7px; }
.share-link input { display: block; width: 100%; min-width: 0; padding: 12px; border: 1px solid #d8e6ef; border-radius: 10px; background: #f7fafc; color: #3a556d; font-size: 13px; }
.dialog-copy { width: 100%; margin-top: 14px; min-height: 48px; font-size: 14px; border-radius: 12px; }
.copy-status { min-height: 18px; margin: 9px 0 15px; color: #52768f; font-size: 11px; line-height: 1.6; }
.dialog-fallback { display: block; text-align: center; color: #52768f; font-size: 12px; text-decoration: none; line-height: 1.7; }
.dialog-fallback:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .page-shell { padding: 0 25px; }
  .site-header { padding: 25px 0 15px; }
  .brand { font-size: 12px; gap: 8px; }
  .brand-mark { width: 26px; height: 26px; font-size: 13px; border-radius: 8px; }
  .brand-divider { padding: 0 7px; }
  .header-label { display: none; }
  .main-content { padding: 18px 0 36px; }
  .hero-art { margin-bottom: 17px; }
  h1 { font-size: 42px; margin: 15px 0; }
  .intro { font-size: 13px; margin-bottom: 25px; }
  .site-footer { padding-bottom: max(21px, env(safe-area-inset-bottom)); font-size: 9px; }
}

@media (max-width: 360px), (max-height: 740px) and (max-width: 600px) {
  .page-shell { padding: 0 22px; }
  .site-header { padding: 18px 0 10px; }
  .main-content { padding: 9px 0 23px; }
  .hero-art { height: 125px; width: 190px; margin-bottom: 9px; }
  .music-tile { width: 101px; height: 101px; border-radius: 27px; }
  .orbit { width: 178px; height: 79px; }
  .orbit-two { width: 157px; height: 112px; }
  .art-caption { bottom: 0; right: 0; font-size: 8px; padding: 6px 8px; }
  .spark-one { top: 22px; right: 8px; }
  h1 { font-size: 36px; margin: 12px 0; }
  .intro { margin-bottom: 20px; font-size: 12px; line-height: 1.75; }
  .button { min-height: 51px; font-size: 14px; }
  .button-secondary { min-height: 43px; font-size: 12px; }
  .actions { gap: 9px; }
  .device-hint { font-size: 10px; margin-top: 13px; }
  .site-footer { padding-bottom: max(17px, env(safe-area-inset-bottom)); font-size: 8px; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}