:root {
  color-scheme: dark;
  --muted: #aaa8b8;
  --line: rgba(231, 228, 249, .12);
  --purple: #a18bff;
  --surface: rgba(20, 19, 29, .72);
}

html { background: #08080d; scroll-behavior: smooth; }
body {
  color: #f4f2fa;
  background:
    radial-gradient(ellipse at 24% 0%, rgba(98, 82, 155, .17), transparent 46%),
    radial-gradient(ellipse at 90% 34%, rgba(104, 68, 150, .08), transparent 43%),
    #08080d;
  font-family: Inter, system-ui, sans-serif;
}
body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: .2;
  background: linear-gradient(90deg, transparent 49.95%, rgba(226,220,255,.025) 50%, transparent 50.05%);
}
button, a { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
button:hover:not(:disabled), a:hover { filter: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #c7baff; outline-offset: 4px; }

.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  height: 72px;
  border-bottom: 1px solid rgba(238,235,255,.1);
  background: rgba(9,9,15,.76);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
}
.brand { color: #f3f1f8; font-size: 19px; font-weight: 590; letter-spacing: -.055em; }
.brand > svg { width: 34px; height: 34px; color: #c2b5ff; }
.nav-right { gap: 25px; color: #c6c3d0; }
.nav-right > a:hover, .manager-shop-link:hover { color: #fff; }
.nav-divider { background: rgba(236,232,255,.18); }
.outline {
  min-height: 42px;
  border-color: rgba(231,228,249,.17);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
  color: #efedf7;
  box-shadow: inset 0 1px rgba(255,255,255,.045);
}
.outline:hover:not(:disabled) { border-color: rgba(193,177,255,.48); background: rgba(168,146,255,.09); }
.cart-toggle { min-height: 40px; }
#cart-count { background: rgba(180,163,255,.18); color: #e5dfff; }

.shell { max-width: 1320px; width: calc(100% - 72px); }
.creator { margin-top: 24px; }
.cover {
  height: 186px;
  border: 1px solid rgba(232,228,255,.13);
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 72% 28%, rgba(175,153,255,.19), transparent 30%),
    radial-gradient(ellipse at 15% 120%, rgba(119,92,202,.17), transparent 44%),
    repeating-linear-gradient(128deg, #111119 0, #111119 1px, #0d0d14 2px, #111119 5px);
}
.cover::after { background: linear-gradient(90deg, transparent 40%, rgba(8,8,13,.32)); }
.cover-record { border-color: rgba(209,199,255,.23); opacity: .74; }
.creator-row { min-height: 132px; padding: 0 26px; gap: 23px; }
.record-avatar {
  border-color: rgba(216,207,255,.28);
  box-shadow: 0 0 0 6px rgba(8,8,13,.78), 0 20px 50px rgba(0,0,0,.5);
}
.record-label { background: linear-gradient(140deg,#7866d7,#b16dc7 62%,#7252c3); }
.creator-copy h1 { color: #f4f2fa; font-size: 31px; font-weight: 560; letter-spacing: -.07em; }
.handle { color: #9693a3; }
.bio { color: #cfccd8; font-size: 14px; }
.profile-link { margin-left: auto; }

#shop { padding-bottom: 26px; }
.shop-heading {
  min-height: 58px;
  margin: 9px 0 22px;
  border-bottom-color: rgba(234,230,255,.12);
}
.shop-tab { font-size: 15px; }
.shop-tab > span:first-child { padding: 14px 13px; border-bottom-width: 2px; border-color: #b4a3ff; }
.count, .delivery { color: #9996a7; }
.product-grid { gap: 20px; }
.product {
  border-color: rgba(231,228,249,.13);
  border-radius: 20px;
  background: linear-gradient(150deg,rgba(255,255,255,.065),rgba(255,255,255,.019));
  box-shadow: 0 20px 62px rgba(0,0,0,.23), inset 0 1px rgba(255,255,255,.045);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.product:hover { transform: translateY(-3px); border-color: rgba(188,169,255,.35); box-shadow: 0 30px 70px rgba(0,0,0,.34),0 0 50px rgba(120,94,202,.08); }
.product-shot { padding: 8px 8px 0; }
.product-shot img { border-radius: 13px 13px 5px 5px; }
.zoom-label { border-color: rgba(243,239,255,.28); border-radius: 10px; background: rgba(12,11,18,.72); backdrop-filter: blur(16px); }
.product-body { padding: 21px 22px 22px; }
.product-title { align-items: center; gap: 10px; }
.product-title h2 { color: #f5f3fa; font-size: clamp(21px,2vw,26px); font-weight: 540; letter-spacing: -.055em; }
.price { color: #e8e3fb; font-size: 21px; font-weight: 550; }
.tagline { margin-top: 7px; color: #aaa8b8; font-size: 14px; }
.product-meta { margin-top: 13px; color: #a8a5b4; font-size: 11px; }
.pill { border-color: rgba(227,223,247,.13); border-radius: 999px; background: rgba(255,255,255,.05); color: #d6d2e1; box-shadow: none; }
.demo-launch { border-color: rgba(185,166,255,.2); border-radius: 13px; background: rgba(150,126,225,.07); }
.demo-launch:hover { border-color: rgba(185,166,255,.42); background: rgba(150,126,225,.13); }
.demo-launch-icon { background: linear-gradient(140deg,#e3ddff,#a995ff); box-shadow: 0 0 22px rgba(169,145,255,.2); }
.demo-launch-caption { color: #a7a3b4; }
.demo-launch-arrow { color: #c7b9ff; }
.product-actions { gap: 14px; margin-top: 17px; }
.detail-button { color: #d0cddb; font-size: 13px; }
.detail-icon { width: 36px; height: 36px; border-color: rgba(226,222,245,.23); }
.detail-icon svg { width: 15px; }
.buy-button {
  min-height: 49px;
  border: 1px solid rgba(207,194,255,.44);
  border-radius: 13px;
  background: linear-gradient(135deg,#c5b8ff,#9079e7);
  color: #171320;
  box-shadow: 0 8px 26px rgba(123,99,205,.17), inset 0 1px rgba(255,255,255,.56);
  font-size: 13px;
  font-weight: 650;
}
.buy-button:hover:not(:disabled) { background: linear-gradient(135deg,#ded7ff,#a894fb); box-shadow: 0 12px 34px rgba(123,99,205,.27); transform: translateY(-1px); }
.shop-note { margin: 28px 0 34px; color: #868392; font-size: 12px; }

footer { border-top-color: rgba(234,230,255,.1); color: #9996a5; }
.powered { color: #c8c4d2; }
.powered svg { color: #b9a9ff; }
footer button { color: #a29faf; }
footer button:hover { color: #fff; }
.muted { color: #aaa8b8; }
.eyebrow { color: #c0b1ff; letter-spacing: .16em; font-size: 9px; }

dialog {
  border-color: rgba(231,228,249,.18);
  border-radius: 22px;
  background: linear-gradient(150deg,rgba(25,24,36,.96),rgba(13,13,20,.97));
  box-shadow: 0 36px 120px rgba(0,0,0,.68), inset 0 1px rgba(255,255,255,.055);
  backdrop-filter: blur(22px);
}
dialog::backdrop { background: rgba(4,4,9,.72); backdrop-filter: blur(12px); }
.dialog-top h2 { color: #f4f1fb; font-weight: 540; letter-spacing: -.055em; }
.close { border-color: rgba(231,228,249,.12); border-radius: 11px; background: rgba(255,255,255,.055); color: #d4d0df; }
.close:hover { border-color: rgba(193,177,255,.4); background: rgba(168,146,255,.12); }
.cart-row { border-bottom-color: rgba(231,228,249,.1); }
.cart-row img { border: 1px solid rgba(231,228,249,.12); }
.cart-row h3 { color: #f0edf7; }
.cart-summary { border-top: 1px solid rgba(231,228,249,.1); color: #f2eff9; }
.checkout-delivery { border-color: rgba(179,158,255,.2); border-radius: 14px; background: rgba(153,126,228,.065); }
.checkout-delivery h3 { color: #e9e4f7; }
.checkout-delivery a, #detail-content a { color: #c5b5ff; }
.checkout-caption { color: #8f8c9b; }
#checkout-message { color: #d3c7ff; }
#detail-content { color: #b9b6c5; }
.image-dialog { background: #08080d; }
.image-dialog .close { margin-right: 2px; }
.order-panel { padding: 34px 0 22px; }
.order-panel h1 { color: #f4f1fb; font-size: clamp(39px,5vw,60px); font-weight: 540; letter-spacing: -.075em; }
.order-panel > p { max-width: 66ch; }
.download-row { border-color: rgba(231,228,249,.13); border-radius: 18px; background: rgba(255,255,255,.035); }
.download-row h2 { color: #f1eef8; font-size: 21px; font-weight: 540; letter-spacing: -.04em; }
.download-row button { border-radius: 12px; }
.platform-card { border-color: rgba(231,228,249,.13); border-radius: 16px; background: rgba(255,255,255,.035); }
.platform-card h3 { color: #f0edf7; font-weight: 550; }
.platform-card .recommended-platform { border-color: rgba(190,171,255,.46); background: rgba(153,126,228,.08); }
.install-guide { border-color: rgba(231,228,249,.11); }
.install-guide details { border-color: rgba(231,228,249,.12); border-radius: 14px; background: rgba(255,255,255,.025); }
.install-guide summary, .manager-brand-dot { color: #c6b7ff; }
.private-download-note { border-color: #ac9464; }

.manager-hero { padding: 100px 0 72px; gap: 82px; }
.manager-hero h1 { color: #f3f0f9; font-size: clamp(54px,6vw,80px); font-weight: 520; letter-spacing: -.08em; }
.manager-intro { color: #b2afbd; }
.manager-library-preview {
  border-color: rgba(232,228,255,.15); border-radius: 22px;
  background: linear-gradient(145deg,rgba(39,35,58,.9),rgba(14,14,22,.96));
  box-shadow: 0 32px 90px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.06);
}
.manager-preview-heading { border-color: rgba(231,228,249,.11); color: #e9e5f1; }
.manager-preview-label { color: #bcb0e5; }
.manager-preview-product { border-color: rgba(231,228,249,.11); border-radius: 13px; background: rgba(4,4,9,.34); }
.manager-preview-product h2 { color: #f0edf7; }
.manager-preview-product p, .manager-preview-footer { color: #aaa5bb; }
.manager-start { border-color: rgba(231,228,249,.11); }
.manager-start h2 { color: #eae7f1; font-weight: 540; }
.manager-start p { color: #a9a6b5; }
.manager-start li > span { color: #bcaeff; }
.manager-get { padding-top: 68px; }
.manager-get > h2 { color: #f1eef8; font-weight: 520; letter-spacing: -.06em; }
.manager-download-card, .manager-connect {
  border-color: rgba(231,228,249,.13); border-radius: 20px;
  background: linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}
.manager-download-card h3 { color: #f2eff8; font-weight: 540; letter-spacing: -.04em; }
.manager-connect h1 { color: #f3f0f9; font-weight: 540; letter-spacing: -.065em; }
.manager-symbol { background: linear-gradient(140deg,#9984ed,#725bba); box-shadow: 0 15px 35px rgba(134,109,213,.2); }
.manager-approval-note { border-color: rgba(189,169,255,.22); border-radius: 13px; background: rgba(160,137,231,.07); color: #d8d1e8; }
.manager-receipt-help h2 { color: #e8e5ee; font-weight: 540; }
.manager-shop-link { color: #b9b4c8; }
.manager-page footer a { color: #aaa7b5; }

.demo-launch { color: #f0edf7; }
.demo-live-label { color: #d0c2ff; }
.demo-dialog { max-height: calc(100vh - 48px); }
.demo-dialog select { border-color: rgba(231,228,249,.15); border-radius: 10px; background: rgba(6,7,12,.8); }
.demo-dialog input[type=range] { accent-color: #b19dff; }
.demo-controls { color: #e3dfec; }
.demo-player { border-color: rgba(231,228,249,.11); border-radius: 15px; background: rgba(5,6,11,.55); }
.demo-footer { border-top: 1px solid rgba(231,228,249,.09); margin-top: 18px; }

@media (max-width: 1000px) {
  .shell { width: calc(100% - 44px); }
  .creator-row { padding-inline: 16px; }
  .product-body { padding: 17px; }
  .product-title h2 { font-size: 21px; }
  .demo-launch { gap: 10px; }
  .manager-hero { gap: 45px; }
}
@media (max-width: 760px) {
  .shell { width: calc(100% - 32px); }
  .topbar { height: 62px; }
  .brand { font-size: 16px; }
  .brand > svg { width: 30px; height: 30px; }
  .creator { margin-top: 14px; }
  .cover { height: 132px; border-radius: 15px; }
  .creator-row { min-height: 120px; gap: 13px; padding: 0 9px 16px; }
  .record-avatar { width: 108px; height: 108px; margin-top: -27px; }
  .record-label { width: 62px; height: 62px; }
  .record-label svg { width: 48px; height: 48px; }
  .creator-copy h1 { font-size: 23px; }
  .bio { margin-top: 5px; font-size: 12px; }
  .profile-link { margin: 0 0 0 121px; padding: 8px 11px; font-size: 11px; }
  .shop-heading { min-height: 55px; gap: 12px; }
  .delivery { max-width: 145px; font-size: 10px; line-height: 1.45; }
  .product-grid { gap: 18px; }
  .product { border-radius: 17px; }
  .product-shot { padding: 6px 6px 0; }
  .product-shot img { border-radius: 12px 12px 5px 5px; }
  .product-body { padding: 15px; }
  .product-title h2 { font-size: 22px; }
  .product-meta { gap: 10px; font-size: 11px; }
  .demo-launch { margin-top: 13px; }
  .product-actions { gap: 8px; }
  .buy-button { min-height: 47px; padding: 11px 13px; font-size: 12px; }
  .detail-button { gap: 7px; font-size: 11px; }
  .detail-icon { width: 32px; height: 32px; }
  .order-panel { padding-top: 30px; }
  .order-panel h1 { font-size: 38px; }
  .manager-hero { padding: 54px 0 42px; }
  .manager-hero h1 { font-size: 48px; }
  .manager-library-preview { border-radius: 17px; }
  .manager-get > h2 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}