:root {
  color-scheme: dark;
  --ink: #e7e7e3 !important;
  --ink-strong: #f0f0ec !important;
  --muted: rgba(231, 231, 227, 0.58) !important;
  --paper: #111214 !important;
  --surface: #1a1c1e !important;
  --surface-soft: #151719 !important;
  --card: rgba(24, 26, 28, 0.9) !important;
  --line: rgba(231, 231, 227, 0.15) !important;
  --line-strong: rgba(231, 231, 227, 0.38) !important;
  --accent: #b9bcbd !important;
  --accent-strong: #e7e7e3 !important;
  --accent-soft: rgba(231, 231, 227, 0.08) !important;
  --brand: #303336 !important;
  --brand-gray: #9a9d9f !important;
  --green: #b9bcbd !important;
  --green-dark: #e7e7e3 !important;
  --lime: #26292b !important;
  --blue: #c0c3c5 !important;
  --teal: #b9bcbd !important;
  --gold: #c7c3b8 !important;
  --orange: #a9abad !important;
  --shadow: 0 22px 64px rgba(0, 0, 0, 0.28) !important;
}

html {
  background: #111214;
}

body {
  min-width: 320px;
  color: var(--ink) !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.027) 1px, transparent 1px),
    radial-gradient(circle at 76% 26%, rgba(220, 222, 223, 0.085), transparent 34rem),
    #111214 !important;
  background-size: 72px 72px, 72px 72px, auto, auto !important;
  -webkit-font-smoothing: antialiased;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: 0;
  opacity: 0.58;
  background-image: radial-gradient(circle, rgba(231, 231, 227, 0.22) 0.7px, transparent 0.9px);
  background-size: 6px 6px;
  background-position: 1px 1px;
  -webkit-mask-image:
    radial-gradient(ellipse 48% 38% at 79% 28%, black 0%, rgba(0, 0, 0, 0.78) 36%, transparent 76%),
    radial-gradient(ellipse 42% 35% at 18% 82%, rgba(0, 0, 0, 0.72) 0%, transparent 74%);
  mask-image:
    radial-gradient(ellipse 48% 38% at 79% 28%, black 0%, rgba(0, 0, 0, 0.78) 36%, transparent 76%),
    radial-gradient(ellipse 42% 35% at 18% 82%, rgba(0, 0, 0, 0.72) 0%, transparent 74%);
}

body::after {
  z-index: 3;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

a {
  color: inherit;
}

.site-header,
body > header {
  border-color: var(--line) !important;
  background: rgba(17, 18, 20, 0.88) !important;
  backdrop-filter: blur(16px);
}

.site-footer,
body > footer {
  border-color: var(--line) !important;
  background: rgba(14, 15, 17, 0.94) !important;
  color: var(--muted) !important;
}

.site-nav,
.header-nav,
.lead,
.section-lead,
.hero-lead,
.masthead-copy,
.visual-note,
.price-summary,
.pricing-fineprint,
.contact-note,
.field-help,
.utility,
.note {
  color: var(--muted) !important;
}

.eyebrow,
.section-kicker,
.feature-label,
.node-kicker,
.branch-index,
.brand,
.app-offer,
.home-nav {
  color: var(--accent) !important;
}

.button,
.app-action,
.store-button,
.link-list a,
.actions a,
button,
input[type="submit"] {
  border-color: rgba(231, 231, 227, 0.42) !important;
  border-radius: 0 !important;
  background: rgba(231, 231, 227, 0.045) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.language-switch a,
.utility a,
.contact-note a,
.contact a {
  border: 0 !important;
  background: transparent !important;
  color: var(--accent) !important;
}

.button.primary,
.app-action.primary,
.store-button,
.nav-cta,
button[type="submit"],
input[type="submit"] {
  border-color: var(--ink) !important;
  background: var(--ink) !important;
  color: #111214 !important;
}

input,
textarea,
select {
  border-color: rgba(231, 231, 227, 0.22) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(231, 231, 227, 0.62) !important;
  outline: 1px solid rgba(231, 231, 227, 0.18) !important;
}

label {
  color: rgba(231, 231, 227, 0.76) !important;
}

.auth-shell main,
body > main:has(> .eyebrow),
body > main:has(> .brand),
body > main:has(> .status) {
  border-color: var(--line) !important;
  background: rgba(22, 24, 26, 0.9) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.3) !important;
}

.auth-brand {
  color: var(--ink) !important;
}

.auth-brand img,
.site-header .brand img,
.brand-mark {
  filter: saturate(0) brightness(2.4);
}

.status.success,
.notice,
.reason,
.guidance {
  border-color: rgba(231, 231, 227, 0.22) !important;
  background: rgba(231, 231, 227, 0.065) !important;
  color: rgba(231, 231, 227, 0.82) !important;
}

.status.error,
.alert,
.error {
  border-color: rgba(200, 147, 133, 0.48) !important;
  background: rgba(111, 55, 45, 0.18) !important;
  color: #e0b4a9 !important;
}

/* Products directory */
body > main:has(.apps) {
  border-color: var(--line) !important;
  background: rgba(18, 19, 21, 0.72) !important;
}

.app,
.app--jugyo,
.app--spdl,
.app--crystalking {
  border-color: var(--line) !important;
  border-radius: 0 !important;
  background: rgba(26, 28, 30, 0.88) !important;
}

.app-visual,
.hero-visual,
.feature-shot img,
.product-video video,
.gallery img,
.numbered-shot {
  border-color: rgba(231, 231, 227, 0.2) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Public product stories */
.section,
.intro,
.feature-story,
.faq,
.video-roadmap,
.pricing,
.closing,
.product-video {
  background-color: transparent !important;
}

.section.alt,
.promise,
.product-video,
.video-roadmap,
.pricing,
.closing {
  border-color: var(--line) !important;
  background: rgba(22, 24, 26, 0.72) !important;
}

.feature,
.privacy-list,
.screen-guide-text,
.detail-grid article,
.principle-grid article,
.model-card,
.explicit-gate,
.android-app-panel,
.platform-intro,
.platform-card,
.price-card,
.ai-price-note,
.roadmap-status,
.faq details {
  border-color: var(--line) !important;
  border-radius: 0 !important;
  background: rgba(26, 28, 30, 0.88) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.android-app-actions .text-link {
  color: var(--accent) !important;
}

.hero:not(.masthead) {
  border-bottom: 1px solid var(--line);
}

.hero:has(.hero-visual) {
  background:
    radial-gradient(circle at 78% 28%, rgba(220, 222, 223, 0.09), transparent 32rem),
    linear-gradient(135deg, rgba(25, 27, 29, 0.96), rgba(17, 18, 20, 0.98)) !important;
}

.hero-catch {
  border-color: rgba(231, 231, 227, 0.26) !important;
  border-radius: 0 !important;
  background: rgba(17, 18, 20, 0.84) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.hero-catch strong,
.hero h1,
.hero h1 em,
.hero-catch .hero-catch-text,
.hero-principle strong,
.source-vault,
.more-features {
  color: var(--ink) !important;
}

.source-vault,
.more-features,
.context-principle {
  background: #151719 !important;
}

.context-principle .section-kicker,
.principle-index,
.principle-lead h2 em,
.principle-grid span,
.direction-note strong,
.more-features .section-kicker,
.detail-grid span,
.source-vault > span,
.source-vault strong,
.platform-intro .section-kicker {
  color: var(--accent) !important;
}

.principle-copy p,
.principle-grid p,
.direction-note,
.detail-grid p,
.source-vault li,
.roadmap-status p {
  color: var(--muted) !important;
}

.principle-copy strong,
.direction-note {
  border-color: rgba(231, 231, 227, 0.3) !important;
}

.source-vault li::before {
  background: var(--accent) !important;
}

.roadmap-status strong {
  color: var(--ink) !important;
}

.window-bar {
  border-color: var(--line) !important;
  background: #202326 !important;
}

.window-bar span,
.shot-number,
.roadmap-badge {
  background: #85898c !important;
}

.hero::after {
  color: rgba(231, 231, 227, 0.035) !important;
}

/* Site map */
.map-frame,
.root-card,
.branch-head,
.branch,
.node-link,
.cluster-links {
  border-color: var(--line) !important;
  background: rgba(22, 24, 26, 0.82) !important;
  box-shadow: none !important;
}

.node-tag {
  border-color: rgba(231, 231, 227, 0.28) !important;
  background: rgba(231, 231, 227, 0.07) !important;
  color: var(--ink) !important;
}

@media (max-width: 680px) {
  body::before {
    opacity: 0.48;
    -webkit-mask-image:
      radial-gradient(ellipse 72% 34% at 88% 18%, black 0%, transparent 76%),
      radial-gradient(ellipse 70% 30% at 8% 76%, rgba(0, 0, 0, 0.68) 0%, transparent 74%);
    mask-image:
      radial-gradient(ellipse 72% 34% at 88% 18%, black 0%, transparent 76%),
      radial-gradient(ellipse 70% 30% at 8% 76%, rgba(0, 0, 0, 0.68) 0%, transparent 74%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}