:root {
          --shell-max-width: 920px;
          --legal-shell-max-width: 980px;
          --bg-0: #03040a;
          --bg-1: #13100d;
          --bg-2: #493c31;
          --card: rgba(19, 14, 10, 0.84);
          --line: rgba(221, 149, 92, 0.22);
          --text: #eef1fb;
          --muted: rgba(231, 221, 205, 0.72);
          --muted-soft: rgba(212, 196, 176, 0.56);
          --orange: #ff8a1f;
          --orange-strong: #f06a16;
          --chip: rgba(235, 153, 88, 0.12);
          --chip-border: rgba(223, 145, 85, 0.3);
          --shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
      }

      * {
          box-sizing: border-box;
      }

      body {
          margin: 0;
          min-height: 100vh;
          font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
          color: var(--text);
          background:
              radial-gradient(circle at 14% 18%, rgba(255, 138, 31, 0.22) 0%, transparent 32%),
              radial-gradient(circle at 88% 2%, rgba(255, 180, 112, 0.1) 0%, transparent 24%),
              radial-gradient(circle at 50% 100%, rgba(255, 138, 31, 0.14) 0%, transparent 34%),
              linear-gradient(145deg, var(--bg-0) 0%, var(--bg-1) 48%, var(--bg-2) 100%);
          padding: 20px clamp(12px, 3.5vw, 36px) 24px;
          display: grid;
          place-items: center;
      }

      .install-wrap {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 40;
          min-height: 66px;
          display: grid;
          grid-template-columns: auto 1fr auto;
          align-items: center;
          gap: 12px;
          padding: 10px 12px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.16);
          background: linear-gradient(90deg, #2a1509 0%, #6d2e0e 48%, #9e3f10 100%);
          color: #fff;
      }

      .install-wrap[hidden] {
          display: none;
      }

      .install-dismiss {
          width: 32px;
          height: 32px;
          display: grid;
          place-items: center;
          border: 0;
          border-radius: 8px;
          padding: 0;
          min-height: 0;
          font-size: 1.35rem;
          line-height: 1;
          color: rgba(255, 255, 255, 0.92);
          background: transparent;
          box-shadow: none;
          cursor: pointer;
      }

      .install-copy {
          display: grid;
          gap: 2px;
      }

      .install-title {
          font-size: 0.98rem;
          font-weight: 700;
          line-height: 1.1;
      }

      .install-text {
          font-size: 0.9rem;
          line-height: 1.2;
          color: rgba(255, 255, 255, 0.9);
      }

      .install-cta {
          border: 0;
          border-radius: 999px;
          min-height: 40px;
          padding: 0 18px;
          background: #fff;
          color: #7a2e08;
          font-size: 0.92rem;
          font-weight: 700;
          cursor: pointer;
          box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
      }

      .shell {
          width: min(100%, var(--shell-max-width));
          margin: 0 auto;
      }

      .panel {
          position: relative;
          overflow: hidden;
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 24px;
          background: #63300f;
          backdrop-filter: blur(16px);
          box-shadow: var(--shadow);
          animation: riseIn 420ms ease-out;
      }

      .panel::before {
          content: "";
          position: absolute;
          inset: 0;
          background: #63300f;
          pointer-events: none;
      }

      .content {
          padding: clamp(14px, 2vw, 22px);
          position: relative;
      }

      .badge {
          display: block;
          color: var(--muted);
          font-size: 0.98rem;
          text-align: center;
          margin-bottom: 8px;
          font-weight: 500;
      }

      .download-counter {
          margin: 0 auto 12px;
          width: fit-content;
          display: flex;
          align-items: baseline;
          gap: 10px;
          padding: 8px 14px;
          border-radius: 999px;
          border: 1px solid var(--chip-border);
          background: var(--chip);
      }

      /* Force-hidden per current product requirement. */
      #download-counter {
          display: none !important;
      }

      .download-counter-label {
          color: var(--muted-soft);
          font-size: 0.82rem;
          text-transform: uppercase;
          letter-spacing: 0.1em;
          font-weight: 700;
      }

      .download-counter-value {
          color: #fff;
          font-size: 1.05rem;
          font-weight: 800;
      }

      h1 {
          margin: 0 0 16px;
          font-size: clamp(1.28rem, 4vw, 1.6rem);
          font-weight: 700;
          letter-spacing: 0.01em;
          text-align: center;
      }

      .subtitle {
          margin: 0 0 16px;
          text-align: center;
          color: var(--muted-soft);
          font-size: 0.95rem;
          line-height: 1.45;
      }

      .platform-tabs {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 0;
          margin: 0;
          border-radius: 16px;
          border: 1px solid var(--chip-border);
          overflow: hidden;
          background: rgba(34, 22, 14, 0.5);
      }

      .site-logo {
          display: block;
          grid-column: 1 / -1;
          width: clamp(120px, 32vw, 180px);
          height: auto;
          margin: 10px auto 8px;
      }

      .tab {
          border: 0;
          background: transparent;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          min-height: 44px;
          color: var(--muted);
          font-size: 1.02rem;
          font-weight: 700;
          cursor: pointer;
      }

      .tab.active {
          color: #fff;
          background:
              linear-gradient(180deg, rgba(255, 138, 31, 0.25), rgba(255, 138, 31, 0.12)),
              rgba(34, 19, 10, 0.95);
          box-shadow: inset 0 0 0 1px rgba(255, 138, 31, 0.4);
      }

      .tab-mark {
          font-size: 1rem;
      }

      .download-card,
      .steps-card {
          margin-top: 16px;
          border: 1px solid var(--line);
          background: linear-gradient(180deg, rgba(12, 11, 10, 0.94), rgba(19, 14, 11, 0.88));
          border-radius: 18px;
          padding: 16px;
      }

      .download-form {
          display: grid;
          gap: 12px;
      }

      label {
          font-weight: 800;
          font-size: 0.86rem;
          text-transform: uppercase;
          letter-spacing: 0.12em;
          color: var(--muted-soft);
      }

      .row {
          display: grid;
          grid-template-columns: 1fr auto;
          gap: 10px;
      }

      input[type="url"] {
          width: 100%;
          border: 1px solid rgba(157, 169, 213, 0.24);
          border-radius: 12px;
          font-size: 1rem;
          padding: 14px 14px;
          color: var(--text);
          background: rgba(255, 255, 255, 0.04);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
          transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
      }

      input[type="url"]::placeholder {
          color: rgba(244, 247, 251, 0.34);
      }

      input[type="url"]:focus {
          outline: none;
          border-color: rgba(255, 138, 31, 0.55);
          box-shadow: 0 0 0 4px rgba(255, 138, 31, 0.16);
          transform: translateY(-1px);
      }

      .paste-btn {
          border: 0;
          border-radius: 12px;
          padding: 0 16px;
          min-height: 50px;
          color: var(--muted);
          background: rgba(127, 139, 183, 0.13);
          border: 1px solid rgba(157, 169, 213, 0.28);
          font-size: 0.95rem;
          font-weight: 700;
          cursor: pointer;
      }

      .submit-btn {
          border: 0;
          border-radius: 12px;
          padding: 0 24px;
          min-height: 52px;
          cursor: pointer;
          font-size: 1.03rem;
          font-weight: 800;
          letter-spacing: 0.01em;
          color: #fff;
          background: linear-gradient(180deg, var(--orange) 0%, var(--orange-strong) 100%);
          box-shadow: 0 18px 36px rgba(255, 138, 31, 0.32);
          transition: transform 140ms ease, box-shadow 140ms ease;
      }

      .submit-btn:hover:not(:disabled) {
          transform: translateY(-1px);
          box-shadow: 0 22px 44px rgba(255, 138, 31, 0.38);
      }

      .submit-btn:disabled {
          cursor: not-allowed;
          opacity: 0.7;
      }

      .status {
          min-height: 1.25em;
          font-size: 0.95rem;
          margin: 0;
      }

      .status.ok {
          color: #8cd3ff;
      }

      .status.error {
          color: #ff9b91;
      }

      .microcopy {
          margin: 0;
          color: var(--muted-soft);
          font-size: 0.86rem;
          line-height: 1.5;
      }

      .steps-title {
          margin: 0 0 12px;
          font-size: 0.88rem;
          letter-spacing: 0.13em;
          font-weight: 800;
          text-transform: uppercase;
          color: var(--muted-soft);
      }

      .recent-card {
          margin-top: 12px;
      }

      .recent-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 10px;
          margin-bottom: 10px;
      }

      .recent-title {
          margin: 0;
      }

      .history-tabs {
          display: flex;
          gap: 8px;
          margin-bottom: 10px;
      }

      .history-tab {
          border: 1px solid rgba(157, 169, 213, 0.28);
          border-radius: 999px;
          min-height: 32px;
          padding: 0 12px;
          color: var(--muted);
          background: rgba(127, 139, 183, 0.08);
          font-size: 0.8rem;
          font-weight: 700;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          cursor: pointer;
      }

      .history-tab.active {
          color: #fff;
          border-color: rgba(255, 138, 31, 0.54);
          background: rgba(255, 138, 31, 0.18);
      }

      .recent-clear {
          border: 1px solid rgba(157, 169, 213, 0.28);
          border-radius: 10px;
          min-height: 34px;
          padding: 0 12px;
          color: var(--muted);
          background: rgba(127, 139, 183, 0.1);
          font-size: 0.86rem;
          font-weight: 700;
          cursor: pointer;
      }

      .recent-clear:disabled {
          opacity: 0.5;
          cursor: not-allowed;
      }

      .recent-list {
          display: grid;
          gap: 8px;
      }

      .history-card {
          border: 1px solid rgba(157, 169, 213, 0.24);
          border-radius: 12px;
          padding: 10px 12px;
          color: var(--text);
          background: rgba(255, 255, 255, 0.04);
          cursor: pointer;
          text-align: left;
      }

      .history-card:hover {
          border-color: rgba(255, 138, 31, 0.55);
          background: rgba(255, 138, 31, 0.12);
      }

      .history-media {
          display: grid;
          grid-template-columns: 64px minmax(0, 1fr);
          gap: 12px;
          align-items: start;
      }

      .history-thumb {
          width: 64px;
          height: 64px;
          border-radius: 8px;
          object-fit: cover;
          border: 1px solid rgba(157, 169, 213, 0.22);
          background: rgba(255, 255, 255, 0.06);
      }

      .history-details {
          min-width: 0;
      }

      .history-meta {
          display: flex;
          align-items: center;
          gap: 8px;
          flex-wrap: wrap;
          margin-bottom: 6px;
      }

      .history-platform {
          display: inline-flex;
          align-items: center;
          border: 1px solid rgba(255, 138, 31, 0.38);
          background: rgba(255, 138, 31, 0.18);
          border-radius: 999px;
          padding: 2px 8px;
          font-size: 0.68rem;
          font-weight: 800;
          letter-spacing: 0.09em;
      }

      .history-user,
      .history-time {
          color: var(--muted);
          font-size: 0.78rem;
      }

      .history-description {
          margin: 0;
          color: var(--text);
          font-size: 0.9rem;
          font-weight: 600;
          line-height: 1.35;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          margin-bottom: 6px;
      }

      .history-url {
          margin: 0;
          color: var(--muted-soft);
          font-size: 0.78rem;
          line-height: 1.3;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
      }

      .history-actions {
          display: flex;
          justify-content: flex-end;
          margin-top: 8px;
      }

      .history-open {
          display: inline-flex;
          align-items: center;
          border: 1px solid rgba(157, 169, 213, 0.28);
          border-radius: 999px;
          padding: 4px 10px;
          color: var(--muted);
          background: rgba(127, 139, 183, 0.1);
          text-decoration: none;
          font-size: 0.75rem;
          font-weight: 700;
          letter-spacing: 0.05em;
          text-transform: uppercase;
      }

      .history-open:hover {
          color: #fff;
          border-color: rgba(255, 138, 31, 0.55);
          background: rgba(255, 138, 31, 0.18);
      }

      .history-preview-panel {
          margin-top: 12px;
      }

      .history-preview-player-wrap {
          border: 1px solid rgba(157, 169, 213, 0.2);
          border-radius: 12px;
          background: rgba(255, 255, 255, 0.03);
          overflow: hidden;
      }

      .history-preview-frame {
          width: 100%;
          aspect-ratio: 16 / 9;
          border: 0;
          background: #07080f;
      }

      .history-preview-fallback {
          padding: 12px;
          display: grid;
          gap: 10px;
          justify-items: start;
      }

      .history-preview-content {
          display: grid;
          grid-template-columns: 140px minmax(0, 1fr);
          gap: 14px;
          align-items: start;
      }

      .history-preview-thumb {
          width: 140px;
          height: 140px;
          border-radius: 12px;
          object-fit: cover;
          border: 1px solid rgba(157, 169, 213, 0.22);
          background: rgba(255, 255, 255, 0.06);
      }

      .history-preview-copy {
          min-width: 0;
          display: grid;
          gap: 8px;
          margin-top: 12px;
      }

      .history-preview-meta {
          margin: 0;
          color: var(--muted);
          font-size: 0.82rem;
      }

      .history-preview-title {
          margin: 0;
          color: var(--text);
          font-size: 0.96rem;
          line-height: 1.4;
          font-weight: 700;
      }

      .history-preview-url {
          margin: 0;
          color: var(--muted-soft);
          font-size: 0.78rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }

      .history-preview-actions {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
      }

      .history-stats {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
      }

      .history-stat {
          border: 1px solid rgba(157, 169, 213, 0.24);
          border-radius: 10px;
          padding: 8px 10px;
          background: rgba(255, 255, 255, 0.03);
          display: grid;
          gap: 4px;
      }

      .history-stat-wide {
          grid-column: 1 / -1;
      }

      .history-stat-label {
          color: var(--muted-soft);
          font-size: 0.72rem;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          font-weight: 700;
      }

      .history-stat-value {
          color: var(--text);
          font-size: 0.92rem;
          font-weight: 700;
          line-height: 1.3;
      }

      .history-preview-actions .recent-clear,
      .history-preview-actions .history-open {
          min-height: 38px;
          min-width: 120px;
          justify-content: center;
      }

      .recent-item {
          display: block;
          width: 100%;
          text-align: left;
          border: 1px solid rgba(157, 169, 213, 0.24);
          border-radius: 10px;
          padding: 10px 12px;
          color: var(--text);
          background: rgba(255, 255, 255, 0.04);
          text-decoration: none;
          font-size: 0.9rem;
          line-height: 1.35;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          cursor: pointer;
      }

      .recent-item:hover {
          border-color: rgba(255, 138, 31, 0.55);
          background: rgba(255, 138, 31, 0.12);
      }

      .feature-stack {
          display: grid;
          gap: 12px;
          margin-top: 0;
      }

      .feature {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          padding: 0;
      }

      .feature-mark {
          width: 28px;
          height: 28px;
          display: grid;
          place-items: center;
          flex: 0 0 auto;
          border-radius: 999px;
          border: 1px solid rgba(157, 169, 213, 0.3);
          font-size: 0.84rem;
          font-weight: 700;
          color: var(--muted);
          background: var(--chip);
      }

      .feature-copy {
          margin-top: 2px;
          font-size: 0.98rem;
          color: rgba(233, 238, 252, 0.8);
          line-height: 1.45;
      }

      .footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          gap: 16px;
          margin-top: 16px;
          padding-top: 14px;
          border-top: 1px solid var(--line);
          color: var(--muted-soft);
          font-size: 0.8rem;
      }

      .footer-links {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
      }

      .footer-links a {
          color: var(--muted-soft);
          text-decoration: none;
      }

      .footer-links a:hover {
          color: #fff;
          text-decoration: underline;
      }

      .top-links-sticky {
          position: sticky;
          top: 10px;
          z-index: 30;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
          gap: 10px;
          margin-bottom: 12px;
          padding: 10px 12px;
          border: 1px solid var(--line);
          border-radius: 14px;
          background: linear-gradient(180deg, rgba(12, 11, 10, 0.94), rgba(19, 14, 11, 0.88));
          backdrop-filter: blur(10px);
          box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
      }

      .top-links-sticky a {
          color: var(--muted-soft);
          text-decoration: none;
          font-size: 0.82rem;
          font-weight: 700;
          letter-spacing: 0.02em;
          padding: 4px 0;
      }

      .top-brand {
          color: #fff;
          font-size: 0.92rem;
          font-weight: 800;
          letter-spacing: 0.02em;
          white-space: nowrap;
      }

      .top-links-row {
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-end;
          gap: 10px;
      }

      .top-links-sticky a:hover {
          color: #fff;
          text-decoration: underline;
      }

      .legal-shell {
          width: min(100%, var(--legal-shell-max-width));
      }

      .legal-content {
          padding: 16px;
      }

      .legal-page-card {
          margin-top: 10px;
      }

      .legal-page-card h1 {
          margin: 0;
          text-align: left;
      }

      .legal-updated {
          margin-top: 4px;
          margin-bottom: 16px;
          color: rgba(233, 238, 252, 0.72);
          font-size: 0.9rem;
      }

      .legal-page-card h2 {
          margin: 18px 0 6px;
          font-size: 1rem;
          color: var(--text);
      }

      .legal-page-card p,
      .legal-page-card li {
          margin: 0;
          color: rgba(233, 238, 252, 0.9);
          line-height: 1.6;
      }

      .legal-page-card p+p {
          margin-top: 10px;
      }

      .legal-page-card ul {
          margin: 8px 0 0;
          padding-left: 18px;
          display: grid;
          gap: 6px;
      }

      .legal-nav {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
          margin-top: 20px;
          padding-top: 14px;
          border-top: 1px solid var(--line);
      }

      .legal-nav a {
          color: var(--muted-soft);
          text-decoration: none;
      }

      .legal-nav a:hover {
          color: #fff;
          text-decoration: underline;
      }

      .accordion {
          display: grid;
          gap: 10px;
      }

      .accordion-item {
          border: 1px solid var(--line);
          border-radius: 16px;
          background: linear-gradient(160deg, rgba(255,138,31,0.05) 0%, rgba(12,11,10,0.82) 100%);
          overflow: hidden;
          transition: border-color 200ms ease, box-shadow 200ms ease;
      }

      .accordion-item:hover {
          border-color: rgba(255, 138, 31, 0.38);
          box-shadow: 0 4px 24px rgba(255, 138, 31, 0.08);
      }

      .accordion-item[open] {
          border-color: rgba(255, 138, 31, 0.45);
          box-shadow: 0 6px 32px rgba(255, 138, 31, 0.12);
      }

      .accordion-summary {
          list-style: none;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 14px;
          padding: 14px 16px;
          font-size: 0.97rem;
          font-weight: 700;
          color: rgba(233, 238, 252, 0.88);
          cursor: pointer;
          user-select: none;
          transition: color 150ms ease;
      }

      .accordion-summary::-webkit-details-marker {
          display: none;
      }

      .accordion-summary::before {
          content: "";
          flex-shrink: 0;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: var(--orange);
          opacity: 0.7;
          transition: opacity 150ms ease, transform 150ms ease;
      }

      .accordion-item[open] > .accordion-summary::before {
          opacity: 1;
          transform: scale(1.3);
      }

      .accordion-summary::after {
          content: "›";
          flex-shrink: 0;
          margin-left: auto;
          font-size: 1.3rem;
          font-weight: 400;
          color: var(--orange);
          opacity: 0.7;
          transition: transform 220ms ease, opacity 150ms ease;
          line-height: 1;
      }

      .accordion-item[open] > .accordion-summary::after {
          transform: rotate(90deg);
          opacity: 1;
      }

      .accordion-item[open] > .accordion-summary {
          color: #fff;
          border-bottom: 1px solid var(--line);
          padding-bottom: 13px;
      }

      .accordion-body {
          padding: 16px 18px;
          display: grid;
          gap: 12px;
      }

      .accordion-body p,
      .accordion-body li {
          margin: 0;
          font-size: 0.93rem;
          color: rgba(233, 238, 252, 0.82);
          line-height: 1.65;
      }

      .accordion-body h3 {
          margin: 0;
          font-size: 0.8rem;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 0.11em;
          color: var(--orange);
          opacity: 0.85;
      }

      .accordion-body ul {
          margin: 0;
          padding: 0;
          list-style: none;
          display: grid;
          gap: 6px;
      }

      .accordion-body ul li {
          display: flex;
          align-items: flex-start;
          gap: 8px;
      }

      .accordion-body ul li::before {
          content: "–";
          flex-shrink: 0;
          color: var(--orange);
          opacity: 0.7;
          font-weight: 700;
          margin-top: 0.05em;
      }

      @keyframes riseIn {
          from {
              opacity: 0;
              transform: translateY(18px) scale(0.985);
          }

          to {
              opacity: 1;
              transform: translateY(0) scale(1);
          }
      }

      @media (max-width: 640px) {
          body {
              padding: 84px 12px 12px;
          }

          .install-wrap {
              min-height: 62px;
              gap: 10px;
              padding: 8px 10px;
          }

          .install-title {
              font-size: 0.92rem;
          }

          .install-text {
              font-size: 0.8rem;
          }

          .content {
              padding: 12px;
          }

          .legal-content {
              padding: 12px;
          }

          .top-links-sticky {
              top: 8px;
              justify-content: center;
              gap: 8px 10px;
              padding: 8px 10px;
          }

          .top-links-row {
              justify-content: center;
          }

          .top-links-sticky a {
              font-size: 0.78rem;
          }

          .top-brand {
              width: 100%;
              text-align: center;
              font-size: 0.84rem;
          }

          .row {
              grid-template-columns: 1fr;
          }

          .paste-btn {
              min-height: 46px;
          }

          .history-preview-content {
              grid-template-columns: 1fr;
          }

          .history-preview-thumb {
              width: 100%;
              height: 180px;
          }

      }