:root {
      color-scheme: dark;
      --bg: #121212;
      --text: #C8C8C8;
      --heading: #FFFFFF;
      --muted: #A1A1A1;
      --muted-2: #8A8A8A;
      --line: rgba(255, 255, 255, .08);
      --line-strong: rgba(255, 255, 255, .16);
      --glass: rgba(18, 18, 18, .85);
      --panel: #171717;
      --soft: rgba(30, 30, 30, .85);
      --ink: #121212;
      --accent: #BFF264;
      --accent-soft: rgba(191, 242, 100, .12);
      --accent-ring: rgba(191, 242, 100, .36);
      --accent-text: #121212;
      --grid: rgba(255, 255, 255, .035);
      --glow: rgba(191, 242, 100, .06);
      --shadow: none;
      --content: 1040px;
      --article: 700px;
      --font: Geist, "Geist SemiBold", "Geist Medium", "Geist Regular", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      min-height: 100vh;
      background: var(--bg);
      color: var(--text);
      font-family: var(--font);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
      font-feature-settings: "ss02";
    }

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

    body::before {
      background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent 78%);
    }

    body::after {
      z-index: -1;
      height: 780px;
      background:
        radial-gradient(circle at top center, var(--glow), transparent 62%),
        radial-gradient(circle at 76% 10%, var(--accent-soft), transparent 26%);
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    input {
      font: inherit;
    }

    .page-shell {
      width: min(100%, 1280px);
      margin: 0 auto;
      padding: 0 24px 96px;
    }

    .topbar {
      position: sticky;
      top: 16px;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      width: min(100%, var(--content));
      margin: 0 auto;
      padding: 8px 12px 8px 16px;
      background: rgba(12, 12, 12, .7);
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, .08);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
    }

    .brand {
      display: flex;
      align-items: center;
      min-width: 0;
      gap: 12px;
    }

    .brand-mark {
      display: grid;
      place-items: center;
      position: relative;
      width: 48px;
      height: 48px;
      flex: 0 0 auto;
      border-radius: 14px;
      color: #121212;
      font-size: 13px;
      font-weight: 800;
      background: var(--accent);
    }

    .brand-mark::after {
      content: "";
      position: absolute;
      right: -6px;
      bottom: -5px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(191, 242, 100, .3);
      border: 1px solid rgba(255, 255, 255, .08);
      backdrop-filter: blur(10px);
    }

    .brand-copy {
      display: grid;
      line-height: 1.18;
    }

    .brand-copy strong {
      color: var(--heading);
      font-size: 14px;
      font-weight: 800;
      white-space: nowrap;
    }

    .brand-copy span {
      color: var(--muted-2);
      font-size: 12px;
      white-space: nowrap;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 4px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 600;
    }

    .nav-links a {
      padding: 8px 12px;
      border-radius: 999px;
      color: rgba(255, 255, 255, .75);
      transition: color .18s ease, background .18s ease;
    }

    .nav-links a:hover,
    .nav-links a.is-active {
      color: var(--accent);
      background: var(--accent-soft);
    }

    .nav-actions {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .icon-button {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border: 0;
      border-radius: 999px;
      color: rgba(255, 255, 255, .75);
      background: rgba(255, 255, 255, .06);
      cursor: pointer;
      transition: color .18s ease, background .18s ease;
    }

    .icon-button:hover {
      color: var(--accent);
      background: rgba(255, 255, 255, .1);
    }

    .menu-button { display: none; }

    .mobile-menu {
      display: none;
      width: min(100%, var(--content));
      margin: 12px auto 0;
      padding: 12px;
      background: rgba(18, 18, 18, .92);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 16px;
      backdrop-filter: blur(24px);
    }

    .mobile-menu a {
      display: block;
      padding: 10px 12px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
    }

    .hero {
      width: min(100%, var(--content));
      margin: 0 auto;
      padding: 96px 0 64px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 340px;
      gap: 64px;
      align-items: center;
    }

    .hero-grid > div:first-child {
      padding-top: 48px;
    }

    .eyebrow,
    .section-kicker {
      margin: 0;
      color: var(--accent);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.3;
    }

    h1,
    h2,
    h3,
    p {
      margin-top: 0;
    }

    h1 {
      max-width: 780px;
      margin: 18px 0 24px;
      color: var(--heading);
      font-size: clamp(38px, 7vw, 72px);
      font-weight: 800;
      line-height: 1.04;
      letter-spacing: 0;
    }

    .lead {
      max-width: var(--article);
      margin-bottom: 32px;
      color: var(--muted);
      font-size: 16px;
    }

    .meta-row,
    .chips,
    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .pill,
    .cta,
    .chip,
    .tag,
    .mini-state {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 36px;
      padding: 8px 16px;
      border: 0;
      border-radius: 365px;
      background: rgba(255, 255, 255, .06);
      color: var(--text);
      font-size: 14px;
      font-weight: 600;
    }

    .cta,
    .chip {
      cursor: pointer;
      font-weight: 700;
      transition: transform .18s ease, background .18s ease;
    }

    .cta {
      background: var(--accent);
      color: var(--accent-text);
      border-radius: 365px;
      padding: 12px 24px;
      font-size: 16px;
    }

    .cta:hover,
    .chip:hover {
      transform: translateY(-1px);
    }

    .cta:hover {
      filter: brightness(1.05);
    }

    .chip:hover {
      background: rgba(255, 255, 255, .12);
    }

    .chip.is-selected,
    .tag.is-strong {
      color: var(--accent-text);
      background: var(--accent);
    }

    /* ===== Phone Mockup - New Design ===== */
    .phone {
      position: relative;
      width: 320px;
      min-height: 680px;
      padding: 12px 12px 20px;
      color: #fff;
      background: #0a0a0a;
      border-radius: 36px;
      box-shadow: 0 28px 90px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .1);
      overflow: hidden;
      flex-shrink: 0;
    }

    .phone-notch {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 120px;
      height: 28px;
      background: #0a0a0a;
      border-radius: 0 0 20px 20px;
      z-index: 10;
    }

    .phone-screen {
      height: 656px;
      overflow: hidden;
      border-radius: 28px;
      background: linear-gradient(180deg, #0d1f1a 0%, #0a0f0d 40%, #050505 100%);
      position: relative;
    }

    .phone-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 16px 6px;
      color: rgba(255, 255, 255, .9);
      font-size: 14px;
      font-weight: 700;
    }

    .phone-status span:last-child {
      display: flex;
      gap: 4px;
      align-items: center;
    }

    .phone-home-bar {
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      width: 120px;
      height: 4px;
      background: rgba(255, 255, 255, .3);
      border-radius: 2px;
    }

    /* Phone Content Views */
    .phone-view {
      display: none;
      height: 100%;
      overflow-y: auto;
      padding: 0 12px 20px;
    }

    .phone-view.is-active {
      display: block;
    }

    /* Image Gallery / Carousel */
    .img-gallery {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
    }

    .img-gallery-frame {
      width: 300px;
      height: 640px;
      border-radius: 28px;
      overflow: hidden;
      background: #0a0a0a;
      box-shadow: 0 20px 60px rgba(0,0,0,.35);
      flex-shrink: 0;
    }

    .img-gallery-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .img-gallery-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--heading);
      font-size: 18px;
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: all .2s ease;
      flex-shrink: 0;
    }

    .img-gallery-btn:hover {
      background: var(--accent-soft);
      color: var(--accent);
      border-color: var(--accent);
    }

    .img-gallery-dots {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-top: 12px;
    }

    .img-gallery-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255,255,255,.2);
      cursor: pointer;
      transition: all .2s ease;
    }

    .img-gallery-dot.is-active {
      background: var(--accent);
      width: 24px;
      border-radius: 4px;
    }

    /* Horizontal Step Tabs (replaces left sidebar) */
    .step-tabs-horizontal {
      display: flex;
      gap: 1px;
      overflow: hidden;
      background: var(--line);
      outline: 1px solid var(--line);
      border-radius: 12px;
      margin-bottom: 24px;
    }

    .step-tab-h {
      flex: 1;
      border: 0;
      padding: 18px;
      background: var(--panel);
      color: var(--muted);
      text-align: center;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      transition: color .18s ease, background .18s ease;
    }

    .step-tab-h b {
      display: block;
      margin-bottom: 4px;
      color: inherit;
      font-size: 15px;
    }

    .step-tab-h span {
      display: block;
      font-size: 12px;
    }

    .step-tab-h.is-active {
      color: var(--accent);
      background: var(--accent-soft);
      box-shadow: inset 0 -3px 0 var(--accent);
    }

    /* Home View - Room List */
    .phone-tabs {
      display: flex;
      gap: 16px;
      padding: 8px 4px;
      font-size: 14px;
      font-weight: 600;
    }

    .phone-tabs span {
      color: rgba(255, 255, 255, .5);
      cursor: pointer;
    }

    .phone-tabs span.is-active {
      color: #fff;
    }

    .featured-card {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      background: linear-gradient(135deg, rgba(20, 224, 170, .15), rgba(100, 100, 255, .1));
      border: 1px solid rgba(255, 255, 255, .1);
      margin-bottom: 12px;
    }

    .featured-card img {
      width: 100%;
      height: 140px;
      object-fit: cover;
      opacity: .8;
    }

    .featured-info {
      padding: 12px;
    }

    .featured-info b {
      display: block;
      font-size: 15px;
      margin-bottom: 4px;
    }

    .featured-info span {
      font-size: 11px;
      color: rgba(255, 255, 255, .6);
    }

    .featured-tags {
      display: flex;
      gap: 6px;
      margin-top: 8px;
    }

    .featured-tag {
      padding: 3px 8px;
      border-radius: 12px;
      font-size: 10px;
      background: rgba(20, 224, 170, .2);
      color: #14e0aa;
    }

    .party-list-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px;
      background: rgba(255, 255, 255, .04);
      border-radius: 12px;
      margin-bottom: 8px;
      border: 1px solid rgba(255, 255, 255, .06);
    }

    .party-list-item img {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      object-fit: cover;
    }

    .party-list-info {
      flex: 1;
    }

    .party-list-info b {
      font-size: 13px;
      display: block;
    }

    .party-list-info span {
      font-size: 11px;
      color: rgba(255, 255, 255, .5);
    }

    .party-list-meta {
      text-align: right;
      font-size: 11px;
      color: rgba(255, 255, 255, .4);
    }

    .phone-bottom-tabs {
      position: absolute;
      bottom: 16px;
      left: 12px;
      right: 12px;
      display: flex;
      justify-content: space-around;
      padding: 10px 0;
      background: rgba(0, 0, 0, .7);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, .08);
    }

    .phone-bottom-tab {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      font-size: 9px;
      color: rgba(255, 255, 255, .5);
    }

    .phone-bottom-tab.is-active {
      color: #14e0aa;
    }

    .phone-bottom-tab svg {
      width: 20px;
      height: 20px;
    }

    /* Create Entry View */
    .create-entry-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 4px 16px;
    }

    .create-entry-header h3 {
      font-size: 18px;
      margin: 0;
    }

    .create-entry-card {
      padding: 16px;
      border-radius: 16px;
      margin-bottom: 12px;
      border: 1px solid rgba(255, 255, 255, .1);
      position: relative;
      overflow: hidden;
    }

    .create-entry-card.recommended {
      background: linear-gradient(135deg, rgba(20, 224, 170, .12), rgba(100, 100, 255, .08));
    }

    .create-entry-card.normal {
      background: rgba(255, 255, 255, .04);
    }

    .create-entry-card .rec-badge {
      position: absolute;
      top: 12px;
      right: 12px;
      padding: 3px 8px;
      border-radius: 10px;
      font-size: 10px;
      background: #14e0aa;
      color: #000;
      font-weight: 700;
    }

    .create-entry-card h4 {
      margin: 0 0 6px;
      font-size: 16px;
    }

    .create-entry-card p {
      margin: 0 0 12px;
      font-size: 12px;
      color: rgba(255, 255, 255, .6);
      line-height: 1.5;
    }

    .create-entry-features {
      display: flex;
      gap: 12px;
    }

    .create-entry-feature {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      color: rgba(255, 255, 255, .7);
    }

    .create-entry-btn {
      width: 100%;
      padding: 12px;
      margin-top: 12px;
      border-radius: 12px;
      border: none;
      background: linear-gradient(90deg, #14e0aa, #0db896);
      color: #000;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    /* Step Progress Indicator */
    .step-progress-dots {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 16px 0;
    }

    .step-dot {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 12px;
      font-weight: 800;
      border: 2px solid rgba(255, 255, 255, .2);
      color: rgba(255, 255, 255, .5);
      background: transparent;
    }

    .step-dot.is-active {
      border-color: #14e0aa;
      color: #14e0aa;
      background: rgba(20, 224, 170, .15);
    }

    .step-dot.is-completed {
      border-color: #14e0aa;
      background: #14e0aa;
      color: #000;
    }

    .step-line {
      width: 40px;
      height: 2px;
      background: rgba(255, 255, 255, .15);
    }

    .step-line.is-active {
      background: #14e0aa;
    }

    /* Step 1 - Party Mode */
    .phone-step-title {
      text-align: center;
      margin-bottom: 16px;
    }

    .phone-step-title h3 {
      margin: 0 0 4px;
      font-size: 18px;
    }

    .phone-step-title p {
      margin: 0;
      font-size: 12px;
      color: rgba(255, 255, 255, .5);
    }

    .phone-input {
      width: 100%;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, .1);
      background: rgba(255, 255, 255, .05);
      color: #fff;
      font-size: 14px;
      margin-bottom: 16px;
    }

    .phone-input::placeholder {
      color: rgba(255, 255, 255, .3);
    }

    .phone-section-label {
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 10px;
      color: #fff;
    }

    .phone-section-sublabel {
      font-size: 11px;
      color: rgba(255, 255, 255, .5);
      margin-bottom: 12px;
      margin-top: -6px;
    }

    .party-mode-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 16px;
    }

    .party-mode-item {
      padding: 14px 10px;
      border-radius: 14px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
      text-align: center;
      cursor: pointer;
      position: relative;
      transition: all .2s ease;
    }

    .party-mode-item.is-selected {
      border-color: #14e0aa;
      background: rgba(20, 224, 170, .1);
      box-shadow: 0 0 20px rgba(20, 224, 170, .1);
    }

    .party-mode-item img {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      margin-bottom: 8px;
      object-fit: cover;
    }

    .party-mode-item b {
      display: block;
      font-size: 12px;
      margin-bottom: 2px;
    }

    .party-mode-item span {
      font-size: 10px;
      color: rgba(255, 255, 255, .5);
    }

    .party-mode-check {
      position: absolute;
      top: 8px;
      right: 8px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #14e0aa;
      display: grid;
      place-items: center;
      font-size: 10px;
      color: #000;
    }

    .topic-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 16px;
    }

    .topic-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border-radius: 14px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
      cursor: pointer;
      transition: all .2s ease;
    }

    .topic-item.is-selected {
      border-color: #14e0aa;
      background: rgba(20, 224, 170, .1);
    }

    .topic-item img {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      object-fit: cover;
    }

    .topic-item-info {
      flex: 1;
    }

    .topic-item-info b {
      font-size: 13px;
      display: block;
      margin-bottom: 2px;
    }

    .topic-item-info span {
      font-size: 11px;
      color: rgba(255, 255, 255, .5);
    }

    .topic-check {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, .2);
      display: grid;
      place-items: center;
      font-size: 11px;
      color: transparent;
    }

    .topic-item.is-selected .topic-check {
      border-color: #14e0aa;
      background: #14e0aa;
      color: #000;
    }

    .phone-btn-primary {
      width: 100%;
      padding: 14px;
      border-radius: 14px;
      border: none;
      background: linear-gradient(90deg, #14e0aa, #0db896);
      color: #000;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      margin-top: 8px;
    }

    .phone-btn-primary:disabled {
      opacity: .4;
      cursor: not-allowed;
    }

    /* Step 2 - Host Selection */
    .host-carousel {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding: 8px 0 16px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }

    .host-carousel::-webkit-scrollbar {
      display: none;
    }

    .host-card-phone {
      flex: 0 0 220px;
      scroll-snap-align: center;
      border-radius: 20px;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(100, 80, 200, .3), rgba(20, 20, 40, .9));
      border: 1px solid rgba(255, 255, 255, .1);
      position: relative;
    }

    .host-card-phone img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .host-card-info {
      padding: 14px;
    }

    .host-card-info b {
      font-size: 18px;
      display: block;
      margin-bottom: 4px;
    }

    .host-card-info .host-welcome {
      font-size: 12px;
      color: rgba(255, 255, 255, .7);
      line-height: 1.5;
      padding: 10px;
      background: rgba(0, 0, 0, .3);
      border-radius: 10px;
      margin: 10px 0;
    }

    .host-abilities {
      display: flex;
      justify-content: space-around;
      padding-top: 10px;
      border-top: 1px solid rgba(255, 255, 255, .1);
    }

    .host-ability {
      text-align: center;
    }

    .host-ability-label {
      font-size: 11px;
      color: rgba(255, 255, 255, .6);
      margin-bottom: 4px;
    }

    .host-ability-stars {
      display: flex;
      gap: 2px;
      justify-content: center;
    }

    .host-ability-stars span {
      font-size: 12px;
      color: rgba(255, 255, 255, .2);
    }

    .host-ability-stars span.is-filled {
      color: #ffd700;
    }

    .host-advanced-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      padding: 12px;
      margin: 12px 0;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, .2);
      background: transparent;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
    }

    /* Step 3 - Invite Participants */
    .invite-ai-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 16px;
    }

    .invite-ai-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border-radius: 14px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .08);
    }

    .invite-ai-item img {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
    }

    .invite-ai-info {
      flex: 1;
    }

    .invite-ai-name {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 6px;
    }

    .invite-ai-name b {
      font-size: 14px;
    }

    .ai-badge {
      padding: 2px 6px;
      border-radius: 8px;
      font-size: 9px;
      background: linear-gradient(90deg, #8b5cf6, #6366f1);
      color: #fff;
      font-weight: 700;
    }

    .invite-ai-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .invite-ai-tag {
      padding: 3px 8px;
      border-radius: 10px;
      font-size: 10px;
      background: rgba(255, 255, 255, .08);
      color: rgba(255, 255, 255, .7);
      border: 1px solid rgba(255, 255, 255, .1);
    }

    .invite-ai-action {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, .2);
      background: transparent;
      color: #fff;
      display: grid;
      place-items: center;
      cursor: pointer;
      font-size: 16px;
    }

    .invite-ai-action.is-selected {
      background: #14e0aa;
      border-color: #14e0aa;
      color: #000;
    }

    .invite-section-title {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .invite-section-subtitle {
      font-size: 11px;
      color: rgba(255, 255, 255, .5);
      margin-bottom: 12px;
    }

    .phone-create-btn {
      position: absolute;
      bottom: 24px;
      left: 12px;
      right: 12px;
      padding: 16px;
      border-radius: 16px;
      border: none;
      background: linear-gradient(90deg, #14e0aa, #0db896);
      color: #000;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
    }

    /* Phone View Switcher */
    .phone-switcher {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-top: 16px;
    }

    .phone-switcher-btn {
      padding: 8px 16px;
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, .15);
      background: rgba(255, 255, 255, .05);
      color: rgba(255, 255, 255, .7);
      font-size: 13px;
      cursor: pointer;
      transition: all .2s ease;
    }

    .phone-switcher-btn.is-active {
      background: var(--accent-soft);
      color: var(--accent);
      border-color: var(--accent);
    }

    main {
      display: grid;
      gap: 76px;
      width: min(100%, var(--content));
      margin: 0 auto;
    }

    section {
      scroll-margin-top: 108px;
    }

    .section-head {
      display: grid;
      gap: 10px;
      max-width: var(--article);
      margin-bottom: 28px;
    }

    h2 {
      margin: 0;
      color: var(--heading);
      font-size: clamp(28px, 4vw, 44px);
      font-weight: 800;
      line-height: 1.12;
      letter-spacing: 0;
    }

    .section-head p,
    .body-copy {
      color: var(--muted);
      font-size: 15px;
    }

    .split {
      display: grid;
      grid-template-columns: minmax(0, var(--article)) minmax(280px, 1fr);
      gap: 48px;
      align-items: start;
    }

    .cards,
    .two-col,
    .three-col,
    .rules-grid,
    .accept-grid {
      display: grid;
      gap: 1px;
      overflow: hidden;
      background: var(--line);
      border: 1px solid var(--line);
      border-radius: 12px;
    }

    .two-col { grid-template-columns: repeat(2, 1fr); }
    .three-col { grid-template-columns: repeat(3, 1fr); }
    .accept-grid { grid-template-columns: repeat(2, 1fr); }

    .card,
    .metric,
    .rule-card {
      padding: 24px;
      background: var(--panel);
    }

    .glass-card {
      padding: 24px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .06);
    }

    .card h3,
    .rule-card h3,
    .glass-card h3 {
      margin: 0 0 10px;
      color: var(--heading);
      font-size: 20px;
      font-weight: 800;
      line-height: 1.25;
    }

    .card p,
    .rule-card p,
    .glass-card p,
    .metric span {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .metric b {
      display: block;
      margin-bottom: 8px;
      color: var(--heading);
      font-size: 28px;
      line-height: 1;
    }

    .list {
      display: grid;
      gap: 14px;
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .list li {
      position: relative;
      padding-left: 22px;
      color: var(--muted);
      font-size: 15px;
    }

    .list li::before {
      content: "";
      position: absolute;
      top: .72em;
      left: 0;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 6px var(--accent-soft);
    }

    .entry-sheet {
      display: grid;
      gap: 1px;
      overflow: hidden;
      background: var(--line);
      outline: 1px solid var(--line);
    }

    .entry-option {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 20px;
      align-items: center;
      padding: 28px;
      background: var(--panel);
    }

    .entry-option .tags {
      margin-top: 14px;
    }

    .wizard {
      display: grid;
      grid-template-columns: 260px minmax(0, 1fr);
      gap: 1px;
      overflow: hidden;
      background: var(--line);
      outline: 1px solid var(--line);
    }

    .step-nav {
      display: grid;
      align-content: start;
      gap: 1px;
      background: var(--line);
      border-radius: 12px;
      overflow: hidden;
    }

    .step-tab {
      width: 100%;
      border: 0;
      padding: 18px;
      background: var(--panel);
      color: var(--muted);
      text-align: left;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      transition: color .18s ease, background .18s ease;
    }

    .step-tab b {
      display: block;
      margin-bottom: 4px;
      color: inherit;
      font-size: 14px;
    }

    .step-tab span {
      display: block;
      font-size: 12px;
    }

    .step-tab.is-active {
      color: var(--accent);
      background: var(--accent-soft);
      box-shadow: inset 4px 0 0 var(--accent);
    }

    .step-stage {
      min-height: 610px;
      padding: 30px;
      background: var(--panel);
      border-radius: 12px;
    }

    .step-progress-control {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      overflow: hidden;
      margin-bottom: 24px;
      background: var(--line);
      outline: 1px solid var(--line);
    }

    .progress-step {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      min-height: 82px;
      border: 0;
      padding: 16px;
      background: var(--panel);
      color: var(--muted);
      text-align: left;
      cursor: pointer;
      transition: background .18s ease, color .18s ease, box-shadow .18s ease;
    }

    .progress-step strong {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      color: var(--accent);
      background: var(--accent-soft);
      font-size: 14px;
      font-weight: 800;
      transition: background .18s ease, color .18s ease, box-shadow .18s ease;
    }

    .progress-step b,
    .progress-step em {
      display: block;
      font-style: normal;
      line-height: 1.35;
    }

    .progress-step b {
      color: var(--heading);
      font-size: 14px;
      font-weight: 800;
    }

    .progress-step em {
      margin-top: 3px;
      color: var(--muted-2);
      font-size: 12px;
    }

    .progress-step:hover,
    .progress-step.is-active {
      color: var(--accent);
      background: var(--accent-soft);
      box-shadow: inset 0 0 0 2px var(--accent);
    }

    .progress-step.is-active strong {
      color: var(--bg);
      background: var(--accent);
      box-shadow: 0 0 24px var(--accent-ring);
    }

    .step-panel {
      display: none;
      gap: 24px;
    }

    .step-panel.is-active {
      display: grid;
    }

    .step-title {
      display: grid;
      gap: 8px;
      max-width: 620px;
    }

    .step-title h3 {
      margin: 0;
      color: var(--heading);
      font-size: 28px;
      line-height: 1.18;
    }

    .step-title p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .field {
      display: grid;
      gap: 8px;
      max-width: 560px;
    }

    .field label {
      color: var(--heading);
      font-size: 13px;
      font-weight: 800;
    }

    .field input {
      width: 100%;
      min-height: 50px;
      border: 0;
      padding: 0 14px;
      color: var(--heading);
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 12px;
    }

    .option-grid,
    .flow-grid,
    .agent-grid,
    .invite-grid {
      display: grid;
      gap: 1px;
      overflow: hidden;
      background: var(--line);
      outline: 1px solid var(--line);
    }

    .option-grid { grid-template-columns: repeat(2, 1fr); }
    .flow-grid { grid-template-columns: repeat(2, 1fr); }
    .agent-grid { grid-template-columns: repeat(3, 1fr); }
    .invite-grid { grid-template-columns: repeat(4, 1fr); }

    .option,
    .flow-card,
    .agent-card,
    .friend-card {
      padding: 20px;
      background: var(--panel);
      border-radius: 12px;
    }

    .option.is-selected,
    .flow-card.is-selected,
    .agent-card.is-added,
    .friend-card.is-invited {
      box-shadow: inset 0 0 0 2px var(--accent);
    }

    .option b,
    .flow-card b,
    .agent-card b,
    .friend-card b {
      display: block;
      margin-bottom: 6px;
      color: var(--heading);
      font-size: 15px;
    }

    .option span,
    .flow-card span,
    .agent-card span,
    .friend-card span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.48;
    }

    .host-card {
      display: grid;
      grid-template-columns: 128px minmax(0, 1fr);
      gap: 24px;
      max-width: 720px;
      padding: 28px;
      background: var(--panel);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 16px;
    }

    .host-portrait,
    .agent-avatar,
    .friend-avatar {
      background:
        radial-gradient(circle at 34% 22%, rgba(255, 255, 255, .36), transparent 24%),
        linear-gradient(160deg, #365314, #18181b 68%);
    }

    .host-portrait {
      min-height: 176px;
    }

    .agent-avatar,
    .friend-avatar {
      width: 46px;
      height: 46px;
      margin-bottom: 12px;
      border-radius: 50%;
    }

    .score-row {
      display: grid;
      gap: 8px;
      margin-top: 16px;
      color: var(--muted);
      font-size: 13px;
    }

    .score-row span {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--line);
    }

    .share-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .room-preview {
      display: grid;
      gap: 12px;
      padding: 24px;
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 16px;
    }

    .room-card-demo {
      display: grid;
      grid-template-columns: 92px 1fr auto;
      gap: 18px;
      align-items: center;
      padding: 20px;
      background: var(--bg);
      outline: 1px solid var(--line);
    }

    .review-room-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 1px;
      overflow: hidden;
      background: transparent;
      border-radius: 16px;
    }

    .review-room-card {
      display: grid;
      align-content: start;
      gap: 14px;
      min-height: 220px;
      border: 0;
      padding: 24px;
      background: var(--panel);
      color: var(--heading);
      text-align: left;
      cursor: pointer;
      border-radius: 16px;
      transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    .review-room-card:hover,
    .review-room-card.is-active {
      background: var(--accent-soft);
      box-shadow: inset 0 0 0 2px var(--accent);
      transform: translateY(-1px);
    }

    .review-room-card small {
      color: var(--accent);
      font-size: 12px;
      font-weight: 800;
    }

    .review-room-card b {
      color: var(--heading);
      font-size: 18px;
      line-height: 1.25;
    }

    .review-room-card span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .review-detail {
      display: grid;
      gap: 24px;
      margin-top: 24px;
      padding: 28px;
      background: var(--bg);
      outline: 1px solid var(--line);
      border-radius: 16px;
    }

    .review-detail-head {
      display: grid;
      gap: 12px;
    }

    .review-detail-head h3 {
      margin: 0;
      color: var(--heading);
      font-size: clamp(26px, 4vw, 40px);
      line-height: 1.1;
    }

    .review-detail-head p {
      margin: 0;
      max-width: var(--article);
      color: var(--muted);
      font-size: 15px;
    }

    .review-meta-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      overflow: hidden;
      background: var(--line);
      outline: 1px solid var(--line);
    }

    .review-meta-item {
      padding: 16px;
      background: var(--bg);
    }

    .review-meta-item b {
      display: block;
      margin-bottom: 4px;
      color: var(--heading);
      font-size: 13px;
    }

    .review-meta-item span {
      color: var(--muted);
      font-size: 13px;
    }

    .script-rounds {
      display: grid;
      gap: 1px;
      overflow: hidden;
      background: var(--line);
      outline: 1px solid var(--line);
    }

    .script-rounds.is-collapsed {
      display: none;
    }

    .config-block.is-collapsed {
      display: none;
    }

    .collapse-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--panel);
      color: var(--muted);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all .18s ease;
      margin-bottom: 16px;
    }

    .collapse-btn:hover {
      color: var(--accent);
      border-color: var(--accent);
    }

    .collapse-btn .arrow {
      display: inline-block;
      transition: transform .2s ease;
    }

    .collapse-btn.is-collapsed .arrow {
      transform: rotate(-90deg);
    }

    .script-round {
      display: grid;
      grid-template-columns: 160px minmax(0, 1fr);
      gap: 20px;
      padding: 18px;
      background: var(--bg);
    }

    .script-round h4 {
      margin: 0;
      color: var(--heading);
      font-size: 14px;
      line-height: 1.35;
    }

    .script-round pre,
    .config-block pre {
      margin: 0;
      white-space: pre-wrap;
      color: var(--muted);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 12px;
      line-height: 1.65;
    }

    .config-block {
      display: grid;
      gap: 18px;
      padding: 24px;
      background: rgba(255, 255, 255, .03);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 12px;
    }

    .config-block h3 {
      margin: 0;
      color: var(--heading);
      font-size: 18px;
    }

    .bilingual-script {
      display: grid;
      gap: 10px;
    }

    .msg-line {
      display: grid;
      grid-template-columns: 90px 1fr;
      gap: 8px;
      padding: 6px 0;
      border-bottom: 1px solid var(--line);
    }

    .msg-line:last-child {
      border-bottom: 0;
    }

    .msg-speaker {
      color: var(--accent);
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
    }

    .msg-body {
      display: grid;
      gap: 2px;
    }

    .msg-en {
      color: var(--heading);
      font-size: 13px;
      line-height: 1.5;
      font-weight: 600;
    }

    .msg-cn {
      color: var(--muted-2);
      font-size: 12px;
      line-height: 1.45;
    }

    .room-cover {
      width: 92px;
      height: 112px;
      background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .34), transparent 26%),
        linear-gradient(150deg, #0f766e, #18181b);
    }

    .table-wrap {
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 12px;
    }

    table {
      width: 100%;
      min-width: 720px;
      border-collapse: collapse;
      background: var(--panel);
    }

    th,
    td {
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: top;
      font-size: 14px;
    }

    th {
      color: var(--heading);
      background: rgba(255, 255, 255, .04);
      font-size: 13px;
      font-weight: 700;
    }

    td {
      color: var(--muted);
    }

    .flowchart {
      display: grid;
      gap: 1px;
      overflow: hidden;
      background: var(--line);
      outline: 1px solid var(--line);
    }

    .flow-step {
      display: grid;
      grid-template-columns: 54px 1fr;
      gap: 16px;
      align-items: center;
      padding: 18px;
      background: var(--bg);
    }

    .flow-step strong {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      color: var(--accent);
      background: var(--accent-soft);
      font-size: 14px;
    }

    .flow-step b {
      display: block;
      color: var(--heading);
      font-size: 15px;
    }

    .flow-step span {
      color: var(--muted);
      font-size: 13px;
    }

    .quote {
      max-width: var(--article);
      padding: 32px;
      color: var(--heading);
      background: var(--panel);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 25px;
      font-size: 22px;
      font-weight: 700;
      line-height: 1.45;
    }

    footer {
      width: min(100%, var(--content));
      margin: 80px auto 0;
      padding-top: 24px;
      border-top: 1px solid var(--line);
      color: var(--muted-2);
      font-size: 13px;
    }

    @media (max-width: 940px) {
      .hero-grid,
      .split,
      .wizard {
        grid-template-columns: 1fr;
      }

      .two-col,
      .three-col,
      .accept-grid,
      .option-grid,
      .flow-grid,
      .agent-grid,
      .invite-grid,
      .review-room-grid,
      .review-meta-grid,
      .script-round {
        grid-template-columns: 1fr;
      }

      .step-nav {
        grid-template-columns: repeat(3, 1fr);
      }

      .phone {
        min-height: auto;
      }
    }

    @media (max-width: 680px) {
      .page-shell {
        padding: 0 12px 72px;
      }

      .topbar {
        top: 8px;
      }

      .brand-copy span,
      .nav-links {
        display: none;
      }

      .menu-button {
        display: grid;
      }

      .mobile-menu.is-open {
        display: block;
      }

      .hero {
        padding: 64px 0 44px;
      }

      .hero-grid {
        gap: 36px;
      }

      .phone-screen {
        height: 588px;
      }

      .step-nav,
      .step-progress-control,
      .room-card-demo,
      .host-card {
        grid-template-columns: 1fr;
      }

      .step-stage {
        padding: 20px;
      }

      .host-portrait {
        min-height: 220px;
      }
    }