/* moonpocket's two website appearances share one layout and the same emerald star. */
:root {
  color-scheme: light;
  --site-bg: #EAF4FF;
  --site-surface: #FFFFFF;
  --site-text: #14365C;
  --site-muted: #506981;
  --site-accent: #08785F;
  --site-on-accent: #FFFFFF;
  --site-line: #BCCFE2;
  --site-raised: #F4FAFF;
  --site-blue: #235CC1;
  --site-accent-soft: #D7F3E9;
  --site-glass: #FFFFFFD9;
  --site-shadow: 0 16px 48px #235CC10C;
  --site-hero: radial-gradient(ellipse at 80% 12%, #C1F0ED70, transparent 42%), linear-gradient(155deg, #F7FCFF, #EAF4FF 55%, #E4F4F3);
  --bg: var(--site-bg); --surface: var(--site-surface); --text: var(--site-text);
  --muted: var(--site-muted); --line: var(--site-line); --mint: var(--site-accent); --violet: var(--site-blue);
}
:root[data-color-mode="dark"] {
  color-scheme: dark;
  --site-bg: #10181F;
  --site-surface: #17232D;
  --site-text: #F0F7F6;
  --site-muted: #AFBFCC;
  --site-accent: #9DF6CF;
  --site-on-accent: #10372C;
  --site-line: #344752;
  --site-raised: #1B2C36;
  --site-blue: #BACBFF;
  --site-accent-soft: #213E3B;
  --site-glass: #17232DED;
  --site-shadow: 0 20px 55px #030C122A;
  --site-hero: radial-gradient(ellipse at 80% 12%, #3E837330, transparent 45%), linear-gradient(155deg, #15232B, #10181F 60%, #122127);
}
[hidden] { display: none !important; }
body { -webkit-font-smoothing: antialiased; }
::selection { background: var(--site-accent); color: var(--site-on-accent); }
.appearance-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 9px 14px; flex-shrink: 0;
  border: 1px solid var(--site-line); border-radius: 100px;
  background: var(--site-glass); color: var(--site-text);
  font: 550 12px/1.4 "Segoe UI", Arial, sans-serif; cursor: pointer;
}
.appearance-toggle:before { content: "◐"; font-size: 19px; line-height: 1; }
.appearance-toggle:hover { background: var(--site-accent-soft); }
.appearance-toggle:focus-visible { outline: 3px solid var(--site-accent); outline-offset: 4px; }
.landing { background: var(--site-hero); }
.landing .site-header { gap: 20px; }
.landing .site-header nav { gap: 26px; }
.landing .site-header nav, .landing .hero-description, .landing .hero-principles,
.landing .release-note, .landing .preview-caption, .landing .fine-print,
.landing .feature-number, .landing .theme-status, .landing .swatch-label,
.landing .selected-theme>div>span, .landing .guide-label, .landing .download-guide p,
.landing .download-guide li>span, .landing .copy-link, .landing .faq details p,
.landing .faq summary>span, .landing .site-footer p, .landing .site-footer nav,
.landing .footer-note, .landing .rename-note p, .landing .local-visual>span,
.landing .swap-example>div>span, .landing .mini-ledger small,
.landing .download-copy>p:not(.eyebrow):not(.release-note) { color: var(--site-muted); }
.landing .beta-label { color: var(--site-accent); background: var(--site-accent-soft); border-color: transparent; }
.landing .button { border-radius: 100px; }
.landing .button-primary { color: var(--site-on-accent); background: var(--site-accent); box-shadow: 0 6px 22px color-mix(in srgb, var(--site-accent) 16%, transparent); }
.landing .button-primary:hover { background: color-mix(in srgb, var(--site-accent) 88%, var(--site-text)); }
.landing .button-outline { background: var(--site-glass); border-color: var(--site-line); }
.landing .button-outline:hover { background: var(--site-accent-soft); }
.landing .hero { padding-top: 42px; }
.landing .hero h1 { font-weight: 550; }
.landing .hero-description { line-height: 1.85; }
.landing .status-dot { box-shadow: 0 0 16px color-mix(in srgb, var(--site-accent) 25%, transparent); }
.landing .hero-visual:before { background: radial-gradient(ellipse at 50% 40%, #81DDE638, transparent 62%), radial-gradient(ellipse at 80% 70%, #81C4FA26, transparent 58%); }
.landing .orbit { border-color: color-mix(in srgb, var(--site-blue) 9%, transparent); }
.landing .phone { border-color: #C4D2DE; box-shadow: 0 0 0 1px #9CAEBB, 0 35px 70px #14365C22, 0 1px 0 6px #F8FCFF; }
[data-color-mode="dark"] .landing .phone { border-color: #34454F; box-shadow: 0 0 0 1px #4C626A, 0 35px 70px #0005, 0 1px 0 6px #132029; }
.landing .floating-label { background: var(--site-glass); border-color: var(--site-line); color: var(--site-muted); border-radius: 17px; box-shadow: var(--site-shadow); backdrop-filter: blur(14px); }
.landing .floating-label strong, .landing .rename-note strong { color: var(--site-text); }
.landing .asset-strip { background: color-mix(in srgb, var(--site-surface) 55%, transparent); }
.landing .asset-strip>.wrap>span:first-child, .landing .more-coins, .landing .asset-word svg { color: var(--site-muted); }
.landing .asset-strip strong, .landing .asset-word { color: var(--site-text); }
.landing .feature-grid article { border-radius: 24px; background: var(--site-glass); box-shadow: var(--site-shadow); }
.landing .feature-featured { background: linear-gradient(145deg, var(--site-surface), var(--site-raised)) !important; }
.landing .swap-example { background: var(--site-raised); border-color: var(--site-line); border-radius: 17px; }
.landing .ledger-icon { background: var(--site-accent-soft); }
.landing .ledger-icon.violet { color: var(--site-blue); background: color-mix(in srgb, var(--site-blue) 9%, transparent); }
.landing .feature-grid .feature-local { background: linear-gradient(115deg, var(--site-surface), var(--site-accent-soft)); }
.landing .local-ring { background: var(--site-glass); border-color: var(--site-line); outline-color: color-mix(in srgb, var(--site-accent) 10%, transparent); box-shadow: 0 0 55px #81DDE624; }
.landing .theme-section { background: color-mix(in srgb, var(--site-surface) 50%, transparent); }
.landing .theme-copy em { color: var(--site-accent); }
.landing .selected-dot { border-color: var(--site-surface); box-shadow: 0 0 0 1px var(--site-line); }
.landing .theme-toolbar>div { border-color: var(--site-line); background: var(--site-surface); border-radius: 100px; }
.landing .theme-filter { color: var(--site-muted); border-radius: 100px; }
.landing .theme-filter.active { background: var(--site-accent); color: var(--site-on-accent); }
.landing .theme-swatch[aria-pressed=true] .swatch-preview>i { color: var(--site-on-accent); }
.landing .download-panel { border-color: var(--site-line); border-radius: 28px; background: linear-gradient(125deg, var(--site-surface), var(--site-accent-soft)); box-shadow: var(--site-shadow); }
.landing .download-guide { border-color: var(--site-line); }
.landing .rename-note { background: var(--site-glass); border-radius: 18px; }
.landing .app-icon { box-shadow: 0 14px 36px #14365C16, 0 0 0 1px #BCCFE255; }
.landing .site-footer { padding-block: 38px; }
/* Glacier remains visible before the theme catalog loads, including offline fallback. */
:root:not([data-color-mode="dark"]) .phone:not([data-signature]),
:root:not([data-color-mode="dark"]) .theme-live:not([data-signature]) {
  --p-bg: #EAF4FF; --p-canvas-text: #14365C; --p-canvas-muted: #506981; --p-panel: #FFFFFF;
  --p-text: #14365C; --p-muted: #506981; --p-raised: #F9FAFB; --p-accent: #235CC1;
  --p-primary: #235CC1; --p-positive: #0E654B; --p-border: #BCCFE2; --p-on-accent: #FFFFFF;
  --p-hero-gradient: linear-gradient(135deg, #CDE8FF, #C1F0ED); --p-button-gradient: linear-gradient(#235CC1, #235CC1);
  --p-hero-text: #14365C; --p-hero-muted: #345677; --p-hero-positive: #116144; --p-hero-accent: #536766;
  --p-nav: #FFFFFF; --p-nav-muted: #506981; --p-nav-text: #235CC1; --p-nav-selected: #E5EBF8;
  --p-radius: 20px; --p-control-radius: 13px; --p-hero-radius: 20px; --p-border-width: 1px;
}
@media(max-width:1100px) { .landing .site-header { gap: 16px; } .landing .site-header nav { gap: 18px; } .landing .site-header>.button { display: none; } }
@media(max-width:800px) { .landing .site-header nav { margin-left: auto; } .landing .hero { padding-top: 54px; } }
@media(max-width:580px) {
  .landing .site-header { flex-wrap: wrap; padding-top: 15px; padding-bottom: 8px; gap: 5px 12px; }
  .landing .site-header>.appearance-toggle { margin-left: auto; }
  .landing .site-header nav { order: 3; width: 100%; justify-content: center; gap: 28px; margin: 0; }
  .landing .site-header nav>a:first-child { display: block; }
  .landing .site-header nav a { padding: 12px 0; min-height: 44px; }
  .appearance-toggle { font-size: 11px; padding-inline: 11px; }
  .landing .hero { padding-top: 37px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }