:root{
    --bg: #ffffff;
    --bg-soft: #f7f7fb;
    --bg-purple-light: #efedfb;
    --bg-purple: #5b48c4;
    --bg-deep: #14102e;
    --bg-deep-2: #271a4f;
    --line: #e6e6f0;
    --line-strong: #c8c6db;
    --ink: #1a1a2e;
    --ink-soft: #4a4a66;
    --ink-mute: #8a8a9e;
    --ink-inv: #ffffff;
    --ink-inv-soft: rgba(255,255,255,0.78);
    --ink-inv-mute: rgba(255,255,255,0.5);
    --accent-blue: #3b82f6;
    --accent-blue-hover: #2563eb;
    --accent-purple: #6c5ce7;
    --accent-magenta: #c0399f;
    --tag-green: #14b87e;
    --tag-amber: #ed8936;
    --tag-good: #10804f;
    --tag-bad: #d44b1e;
    --mono: ui-monospace, 'JetBrains Mono', Menlo, monospace;
    --sans: -apple-system, 'PingFang TC', 'Noto Sans TC', sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0; padding:0;}
  body{background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.65;}
  a{color: var(--accent-blue); text-decoration: none;}
  a:hover{color: var(--accent-blue-hover); text-decoration: underline;}
  code{font-family: var(--mono); background: var(--bg-purple-light); padding: 2px 7px; border-radius: 4px; font-size: 0.9em; color: var(--bg-purple);}

  header.topbar{border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); z-index: 50;}
  .topbar-inner{max-width: 1180px; margin: 0 auto; padding: 16px 28px; display: flex; align-items: center; justify-content: space-between;}
  .brand{display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; color: var(--ink);}
  .brand .dot{width: 14px; height: 14px; background: linear-gradient(135deg, var(--accent-magenta), var(--accent-purple)); display: inline-block; border-radius: 4px;}
  .brand small{color: var(--ink-mute); font-weight: 400; margin-left: 4px; font-family: var(--mono); font-size: 13px;}
  nav.menu{display: flex; gap: 26px; font-size: 14.5px;}
  nav.menu a{color: var(--ink-soft); text-decoration: none;}
  nav.menu a:hover{color: var(--bg-purple); text-decoration: none;}
  .topbar .cta{font-size: 13.5px; background: var(--accent-blue); color: #fff; padding: 8px 16px; border-radius: 6px;}
  .topbar .cta:hover{background: var(--accent-blue-hover); text-decoration: none; color: #fff;}
  .topbar .user-link{font-size: 13.5px; color: var(--ink-soft); text-decoration: none;}
  .topbar .user-link:hover{color: var(--bg-purple); text-decoration: none;}

  section{padding: 88px 28px; border-bottom: 1px solid var(--line);}
  .wrap{max-width: 1180px; margin: 0 auto;}
  .eyebrow{font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--accent-purple); text-transform: uppercase; margin-bottom: 14px; display: inline-block; font-weight: 600;}
  .eyebrow::before{content: ""; display: inline-block; width: 24px; height: 1.5px; background: var(--accent-purple); vertical-align: middle; margin-right: 10px;}
  h2.section-h{font-size: 38px; line-height: 1.2; font-weight: 800; margin: 0 0 16px 0; letter-spacing: -0.02em; color: var(--ink);}
  p.section-lead{font-size: 17px; color: var(--ink-soft); max-width: 700px; margin: 0 0 40px;}

  .hero{position: relative; padding: 120px 28px 110px; background: var(--bg-deep); color: var(--ink-inv); overflow: hidden; border-bottom: 1px solid transparent;}
  .hero::before, .hero::after{content: ""; position: absolute; pointer-events: none; z-index: 0; width: 600px; height: 600px; border-radius: 50%; filter: blur(80px); opacity: 0.55;}
  .hero::before{background: var(--accent-magenta); top: -180px; right: -120px;}
  .hero::after{background: var(--accent-purple); bottom: -200px; left: -160px;}
  .hero-inner{position: relative; z-index: 1; max-width: 1180px; margin: 0 auto;}
  .hero-tag{display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); padding: 6px 14px; border-radius: 100px; font-family: var(--mono); font-size: 13px; color: var(--ink-inv-soft);}
  .hero-tag .blink{width: 8px; height: 8px; background: #4ade80; border-radius: 50%; animation: blink 1.6s infinite;}
  @keyframes blink{50%{opacity: 0.3;}}
  .hero h1{font-size: 80px; line-height: 1.04; font-weight: 800; margin: 22px 0 22px; letter-spacing: -0.03em; color: #fff;}
  .hero h1 .grad{background: linear-gradient(120deg, #ffffff 0%, #d6c4ff 50%, #ff8fcd 100%); -webkit-background-clip: text; background-clip: text; color: transparent;}
  .hero p.lead{font-size: 20px; color: var(--ink-inv-soft); max-width: 620px; margin: 0 0 36px; line-height: 1.6;}
  .hero-actions{display: flex; gap: 12px; flex-wrap: wrap;}
  .hero-prompt-wrap{margin-top: 20px; max-width: 580px;}
  .hero-prompt-label{display: block; font-family: var(--mono); font-size: 11.5px; color: var(--ink-inv-mute); margin-bottom: 6px; letter-spacing: 0.04em;}
  .hero-prompt-text{display: block; margin: 0; width: 100%; padding: 18px 22px; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; color: rgba(255,255,255,0.82); font-family: var(--mono); font-size: 13px; line-height: 1.75; max-height: 280px; overflow: auto; white-space: pre-wrap; word-break: break-word; user-select: text; -webkit-user-select: text;}
  .hero-prompt-text:focus, .hero-prompt-text:focus-visible{outline: none; border-color: rgba(255,255,255,0.32); color: rgba(255,255,255,0.95);}
  .hero-prompt-text::-webkit-scrollbar{width: 8px; height: 8px;}
  .hero-prompt-text::-webkit-scrollbar-thumb{background: rgba(255,255,255,0.18); border-radius: 4px;}
  .hero-prompt-text::-webkit-scrollbar-thumb:hover{background: rgba(255,255,255,0.32);}
  .hero-prompt-text::-webkit-scrollbar-track{background: transparent;}
  .btn.btn-primary.copied{background: #10804f; color: #fff; transform: scale(0.98);}
  .btn.btn-primary.copied::before{content: "✓ ";}
  .btn{font-size: 14.5px; padding: 13px 24px; display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; cursor: pointer; font-weight: 500; text-decoration: none; border: 0; transition: 0.15s;}
  .btn-primary{background: var(--accent-blue); color: #fff;}
  .btn-primary:hover{background: var(--accent-blue-hover);}
  .btn-ghost{background: transparent; color: var(--ink-inv); border: 1px solid rgba(255,255,255,0.3);}
  .btn-ghost:hover{background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5);}

  .stats-section{padding: 0 28px; margin-top: -60px; position: relative; z-index: 2;}
  .stats{max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: 14px; box-shadow: 0 20px 50px -20px rgba(20, 16, 46, 0.35); border: 1px solid var(--line); overflow: hidden;}
  .stat{padding: 28px 28px; border-right: 1px solid var(--line);}
  .stat:last-child{border-right: 0;}
  .stat .n{font-size: 42px; font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(135deg, var(--accent-purple), var(--accent-magenta)); -webkit-background-clip: text; background-clip: text; color: transparent;}
  .stat .l{font-size: 13.5px; color: var(--ink-soft); margin-top: 2px;}

  .pillars{display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
  .pillar{border: 1px solid var(--line); border-radius: 14px; padding: 32px; background: #fff; transition: 0.2s;}
  .pillar:hover{border-color: var(--accent-purple); box-shadow: 0 8px 24px -10px rgba(91, 72, 196, 0.3); transform: translateY(-2px);}
  .pillar .num{font-family: var(--mono); font-size: 12px; color: var(--accent-purple); margin-bottom: 18px; font-weight: 600;}
  .pillar .icon{width: 52px; height: 52px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 16px; background: linear-gradient(135deg, var(--accent-purple), var(--accent-magenta)); color: #fff;}
  .pillar:nth-child(2) .icon{background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));}
  .pillar:nth-child(3) .icon{background: linear-gradient(135deg, var(--accent-magenta), #ff7a59);}
  .pillar h3{margin: 0 0 10px; font-size: 22px; color: var(--ink);}
  .pillar p{margin: 0; color: var(--ink-soft); font-size: 15px;}

  .scenario{background: linear-gradient(180deg, var(--bg-purple) 0%, #4f3eb0 100%); color: var(--ink-inv); border-bottom: 1px solid transparent; position: relative; overflow: hidden;}
  .scenario::before{content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0); background-size: 28px 28px; pointer-events: none;}
  .scenario .wrap{position: relative; z-index: 1;}
  .scenario .eyebrow{color: #ffd1ff;}
  .scenario .eyebrow::before{background: #ffd1ff;}
  .scenario h2.section-h{color: #fff;}
  .scenario p.section-lead{color: var(--ink-inv-soft);}
  .chat{max-width: 800px; margin: 0 auto; background: #fff; color: var(--ink); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5);}
  .chat-head{background: linear-gradient(90deg, var(--bg-deep), var(--bg-deep-2)); color: #fff; padding: 14px 22px; font-family: var(--mono); font-size: 13px; display: flex; justify-content: space-between; align-items: center;}
  .chat-head .who{font-weight: 600;}
  .chat-head .who::before{content: "● "; color: #4ade80;}
  .chat-body{padding: 28px 32px;}
  .msg{margin-bottom: 24px;}
  .msg:last-child{margin-bottom: 0;}
  .msg .role{font-family: var(--mono); font-size: 11px; color: var(--ink-mute); margin-bottom: 8px; letter-spacing: 0.12em; font-weight: 600;}
  .msg.user .role{color: var(--accent-blue);}
  .msg.ai .role{color: var(--accent-purple);}
  .msg.user .role::before{content: "👤  ";}
  .msg.ai .role::before{content: "✨  ";}
  .msg .content{font-size: 16px; line-height: 1.75;}
  .msg.user .content{color: var(--ink);}
  .msg.ai .content{color: var(--ink-soft);}
  .msg.ai .content strong{color: var(--ink);}
  .msg .step{display: inline-block; background: var(--bg-purple-light); color: var(--bg-purple); padding: 3px 11px; border-radius: 100px; font-family: var(--mono); font-size: 12px; margin: 4px 5px 8px 0; font-weight: 500;}
  .msg .cite{margin-top: 14px; padding: 10px 14px; background: var(--bg-soft); font-family: var(--mono); font-size: 12.5px; color: var(--ink-mute); border-left: 3px solid var(--accent-purple); border-radius: 0 6px 6px 0;}
  .scenario-note{text-align: center; margin-top: 28px; color: var(--ink-inv-mute); font-size: 14px; font-family: var(--mono);}

  .demo{display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
  .demo-card{border: 1px solid var(--line); border-radius: 14px; padding: 28px; background: #fff;}
  .demo-card.bad{border-top: 4px solid var(--tag-bad);}
  .demo-card.good{border-top: 4px solid var(--tag-good);}
  .demo-tag{font-family: var(--mono); font-size: 11px; padding: 4px 11px; border-radius: 100px; display: inline-block; margin-bottom: 14px; letter-spacing: 0.06em; font-weight: 600;}
  .t-bad{background: #fee5dc; color: var(--tag-bad);}
  .t-good{background: #d6f1e3; color: var(--tag-good);}
  .demo-card .q{font-size: 14px; padding: 14px 16px; background: var(--bg-soft); border-radius: 8px; margin-bottom: 16px; color: var(--ink);}
  .demo-card .q::before{content: "Q · "; color: var(--ink-mute); font-family: var(--mono); font-size: 12px;}
  .demo-card .a{font-size: 15px; color: var(--ink-soft); line-height: 1.75;}
  .demo-card .a strong{color: var(--ink);}

  .topics{display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;}
  .topic{border: 1px solid var(--line); border-radius: 12px; padding: 24px 18px; background: #fff; display: block; color: var(--ink); text-decoration: none; transition: 0.2s;}
  .topic:hover{border-color: var(--accent-purple); transform: translateY(-3px); box-shadow: 0 12px 24px -12px rgba(91, 72, 196, 0.35); text-decoration: none;}
  .topic .ic{width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 12px;}
  .topic:nth-child(1) .ic{background: #ffe1f3; color: var(--accent-magenta);}
  .topic:nth-child(2) .ic{background: #d8f5e6; color: var(--tag-green);}
  .topic:nth-child(3) .ic{background: #fde7d3; color: var(--tag-amber);}
  .topic:nth-child(4) .ic{background: #dbe8ff; color: var(--accent-blue);}
  .topic:nth-child(5) .ic{background: #e7e1ff; color: var(--accent-purple);}
  .topic .nm{font-weight: 700; font-size: 17px;}
  .topic .desc{font-size: 13px; color: var(--ink-mute); margin-top: 4px;}

  .latest{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px;}
  .latest-col h4{margin: 0 0 16px; font-size: 14px; font-weight: 700; padding-bottom: 12px; border-bottom: 2px solid var(--accent-purple); color: var(--ink); display: flex; align-items: center; gap: 8px;}
  .latest-col ul{list-style: none; padding: 0; margin: 0;}
  .latest-col li{padding: 12px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 14px; font-size: 14.5px;}
  .latest-col li:last-child{border-bottom: 0;}
  .latest-col li a{color: var(--ink); text-decoration: none; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
  .latest-col li a:hover{color: var(--bg-purple);}
  .latest-col li .dt{font-family: var(--mono); font-size: 11.5px; color: var(--ink-mute); white-space: nowrap;}

  .cta-band{background: linear-gradient(135deg, var(--bg-deep) 0%, var(--bg-purple) 100%); color: var(--ink-inv); text-align: center; padding: 72px 28px; border-bottom: 1px solid transparent; position: relative; overflow: hidden;}
  .cta-band::before{content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 50%, rgba(192, 57, 159, 0.35), transparent 60%); pointer-events: none;}
  .cta-band .wrap{position: relative; z-index: 1;}
  .cta-band h2{font-size: 36px; margin: 0 0 12px; color: #fff;}
  .cta-band p{font-size: 17px; margin: 0 0 28px; color: var(--ink-inv-soft);}
  .cta-band .btn{padding: 14px 28px; font-size: 15px;}

  footer{padding: 56px 28px 32px; background: var(--bg-deep); color: var(--ink-inv-soft); font-size: 14px;}
  footer .wrap{display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px;}
  footer h5{color: #fff; margin: 0 0 14px; font-size: 14px; font-weight: 700;}
  footer ul{list-style: none; padding: 0; margin: 0; line-height: 2;}
  footer a{color: var(--ink-inv-soft); text-decoration: none;}
  footer a:hover{color: #fff; text-decoration: none;}
  footer .brand{color: #fff;}
  footer .copy{border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; margin-top: 36px; display: flex; justify-content: space-between; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; color: var(--ink-inv-mute);}

  @media (max-width: 900px){
    .hero h1{font-size: 44px;}
    .stats, .pillars, .demo, .latest, .topics{grid-template-columns: 1fr; gap: 16px;}
    footer .wrap{grid-template-columns: 1fr;}
    .stat{border-right: 0; border-bottom: 1px solid var(--line);}
    .stat:last-child{border-bottom: 0;}
    nav.menu{display: none;}
    section{padding: 64px 20px;}
    .hero{padding: 80px 20px 90px;}
  }