:root{
      --bg:#000;
      --card:#0b0c0f;
      --line:rgba(255,255,255,.12);
      --text:#f7f4ef;
      --muted:rgba(255,255,255,.62);
      --orange:#ff9500;
      --green:#72ff9f;
      --blue:#7db7ff;
    }

    *{box-sizing:border-box}

    html,body{
      margin:0;
      min-height:100%;
      background:
        radial-gradient(circle at 12% 0%, rgba(255,149,0,.16), transparent 30%),
        radial-gradient(circle at 92% 8%, rgba(255,255,255,.06), transparent 34%),
        linear-gradient(180deg,#000 0%,#070707 45%,#000 100%);
      color:var(--text);
      font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC","Noto Sans JP","Inter",sans-serif;
    }

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

    .topbar{
      width:min(1180px,calc(100% - 48px));
      margin:0 auto;
      padding:22px 0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }

    .brand{
      font-weight:900;
      letter-spacing:-.04em;
      font-size:22px;
    }

    .nav{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .nav a{
      border:1px solid var(--line);
      background:rgba(255,255,255,.045);
      border-radius:999px;
      padding:9px 13px;
      color:rgba(255,255,255,.72);
      font-size:13px;
      font-weight:800;
    }

    .nav a.active{
      background:var(--orange);
      color:#000;
      border-color:var(--orange);
    }

    .hero{
      width:min(1180px,calc(100% - 48px));
      margin:26px auto 24px;
      border:1px solid var(--line);
      border-radius:36px;
      overflow:hidden;
      background:
        radial-gradient(circle at 0% 0%, rgba(255,149,0,.18), transparent 34%),
        linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.024));
      box-shadow:0 28px 90px rgba(0,0,0,.42);
      display:grid;
      grid-template-columns:1.08fr .92fr;
      min-height:520px;
    }

    .hero-copy{
      padding:58px 52px;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }

    .kicker{
      color:var(--orange);
      font-size:12px;
      font-weight:900;
      letter-spacing:.24em;
      text-transform:uppercase;
      margin-bottom:18px;
    }

    h1{
      margin:0;
      font-size:clamp(38px,5.2vw,68px);
      line-height:1.08;
      letter-spacing:-.045em;
      max-width:820px;
    }

    .lead{
      margin:26px 0 0;
      color:var(--muted);
      font-size:16px;
      line-height:1.95;
      max-width:680px;
    }

    .hero-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:34px;
    }

    .btn{
      border:1px solid var(--line);
      background:rgba(255,255,255,.055);
      color:#fff;
      border-radius:999px;
      padding:12px 16px;
      font-weight:900;
      cursor:pointer;
      display:inline-flex;
      justify-content:center;
      align-items:center;
    }

    .btn.primary{
      background:var(--orange);
      color:#000;
      border-color:var(--orange);
    }

    .hero-media{
      background:#000;
      display:flex;
      align-items:center;
      justify-content:center;
      border-left:1px solid rgba(255,255,255,.08);
      position:relative;
      overflow:hidden;
    }

    .hero-media::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 50% 20%, rgba(255,149,0,.18), transparent 34%),
        radial-gradient(circle at 50% 80%, rgba(255,255,255,.08), transparent 38%);
      pointer-events:none;
    }

    .hero-media img{
      position:relative;
      width:90%;
      height:90%;
      object-fit:contain;
      filter:drop-shadow(0 28px 70px rgba(255,149,0,.18));
    }

    .stats{
      width:min(1180px,calc(100% - 48px));
      margin:0 auto 24px;
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:14px;
    }

    .stat{
      border:1px solid var(--line);
      background:rgba(255,255,255,.045);
      border-radius:24px;
      padding:20px;
    }

    .stat b{
      display:block;
      font-size:30px;
      line-height:1.08;
      letter-spacing:-.04em;
    }

    .stat span{
      display:block;
      margin-top:8px;
      color:var(--muted);
      font-size:13px;
    }

    .section{
      width:min(1180px,calc(100% - 48px));
      margin:34px auto 70px;
    }

    .section-head{
      display:flex;
      justify-content:space-between;
      gap:16px;
      align-items:flex-end;
      margin-bottom:24px;
    }

    .section h2{
      margin:0;
      font-size:clamp(28px,3.2vw,44px);
      letter-spacing:-.038em;
      line-height:1.12;
    }

    .section p{
      color:var(--muted);
      line-height:1.85;
      margin:10px 0 0;
      font-size:16px;
    }

    .grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:18px;
    }

    .card{
      border:1px solid var(--line);
      background:
        radial-gradient(circle at 0% 0%, rgba(255,149,0,.10), transparent 30%),
        linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.024));
      border-radius:30px;
      overflow:hidden;
      box-shadow:0 22px 70px rgba(0,0,0,.34);
    }

    .media{
      height:300px;
      background:#000;
      display:flex;
      align-items:center;
      justify-content:center;
      border-bottom:1px solid rgba(255,255,255,.08);
    }

    .media img{
      width:100%;
      height:100%;
      object-fit:contain;
      padding:24px;
    }

    .body{padding:20px}

    .tags{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-bottom:12px;
    }

    .tag{
      border:1px solid rgba(255,149,0,.28);
      background:rgba(255,149,0,.10);
      color:#ffb45c;
      border-radius:999px;
      padding:6px 9px;
      font-size:11px;
      font-weight:900;
    }

    .tag.ready{
      color:var(--green);
      border-color:rgba(114,255,159,.38);
      background:rgba(114,255,159,.10);
    }

    .tag.watch{
      color:#ffd08a;
      border-color:rgba(255,149,0,.45);
      background:rgba(255,149,0,.13);
    }

    .tag.collecting{
      color:var(--blue);
      border-color:rgba(125,183,255,.36);
      background:rgba(125,183,255,.10);
    }

    .card h3{
      margin:0;
      font-size:20px;
      line-height:1.28;
      letter-spacing:-.025em;
    }

    .card p{
      min-height:56px;
      color:var(--muted);
      line-height:1.65;
    }

    .progress{
      margin:16px 0;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.28);
      border-radius:20px;
      padding:14px;
    }

    .progress-top{
      display:flex;
      justify-content:space-between;
      color:rgba(255,255,255,.72);
      font-size:13px;
      margin-bottom:10px;
      gap:12px;
    }

    .bar{
      height:13px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      overflow:hidden;
      border:1px solid rgba(255,255,255,.08);
    }

    .fill{
      height:100%;
      width:0%;
      background:linear-gradient(90deg,#ff9500,#ffd08a);
      border-radius:999px;
    }

    .progress-note{
      margin-top:10px;
      color:rgba(255,255,255,.54);
      font-size:12px;
      line-height:1.55;
    }

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

    .actions button,
    .actions a{
      flex:1;
      min-width:96px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.055);
      color:#fff;
      border-radius:999px;
      padding:11px 12px;
      cursor:pointer;
      font-weight:900;
      text-align:center;
      font-size:13px;
    }

    .actions .primary{
      background:var(--orange);
      color:#000;
      border-color:var(--orange);
    }

    .empty{
      border:1px solid var(--line);
      border-radius:28px;
      padding:34px;
      background:rgba(255,255,255,.04);
      color:var(--muted);
    }

    @media(max-width:980px){
      .hero{grid-template-columns:1fr}
      .hero-media{border-left:0;border-top:1px solid rgba(255,255,255,.08);min-height:360px}
      .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
      .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    }

    @media(max-width:700px){
      .topbar,.hero,.stats,.section{width:calc(100% - 28px)}
      .hero-copy{padding:42px 24px}
      h1{font-size:38px;line-height:1.12;letter-spacing:-.035em}
      .grid{grid-template-columns:1fr}
      .stats{grid-template-columns:1fr}
    }