#tokennau-homepage-prototype {
      --tn-ink: #10233f;
      --tn-muted: #61708a;
      --tn-soft: #f5f8fc;
      --tn-line: #dfe7f1;
      --tn-brand: #2457d6;
      --tn-brand-dark: #173d9b;
      --tn-cyan: #18a5b8;
      --tn-green: #1a9b72;
      --tn-purple: #7957d5;
      --tn-orange: #df8a2e;
      color: var(--tn-ink);
      background: #ffffff;
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.5;
      letter-spacing: .01em;
    }

    #tokennau-homepage-prototype *,
    #tokennau-homepage-prototype *::before,
    #tokennau-homepage-prototype *::after { box-sizing: border-box; }

    #tokennau-homepage-prototype a { color: inherit; text-decoration: none; }

    .tn-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

    .tn-nav {
      height: 72px; display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid rgba(223,231,241,.85); background: rgba(255,255,255,.92);
      position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px);
    }
    .tn-brand { display: flex; gap: 11px; align-items: center; font-weight: 700; font-size: 18px; letter-spacing: -.02em; }
    .tn-logo { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--tn-brand), var(--tn-cyan)); position: relative; overflow: hidden; }
    .tn-logo-img { width: 32px; height: 32px; object-fit: contain; display: block; }
    .tn-logo::before, .tn-logo::after { content: ""; position: absolute; border: 2px solid rgba(255,255,255,.86); border-radius: 999px; }
    .tn-logo::before { width: 22px; height: 10px; left: 5px; top: 6px; transform: rotate(24deg); }
    .tn-logo::after { width: 18px; height: 8px; left: 7px; top: 17px; transform: rotate(-24deg); }
    .tn-navlinks { display: flex; align-items: center; gap: 30px; margin-left: 44px; flex: 1; }
    .tn-navlinks a { color: #4f607c; font-size: 14px; transition: color .2s; }
    .tn-navlinks a:hover { color: var(--tn-brand); }
    .tn-navlinks a.is-active { color: var(--tn-brand); font-weight: 600; }
    .tn-nav-actions { display: flex; gap: 10px; align-items: center; }

    .tn-btn { border: 1px solid var(--tn-line); background: white; color: var(--tn-ink); padding: 10px 17px; border-radius: 9px; font-size: 14px; cursor: pointer; font-family: inherit; transition: transform .2s, box-shadow .2s, background .2s; }
    .tn-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(28,66,125,.10); }
    .tn-btn-primary { background: var(--tn-brand); border-color: var(--tn-brand); color: white; box-shadow: 0 8px 18px rgba(36,87,214,.2); }
    .tn-btn-primary:hover { background: var(--tn-brand-dark); }
    .tn-btn-quiet { border-color: transparent; background: transparent; color: var(--tn-brand); }

    .tn-hero { position: relative; overflow: hidden; padding: 104px 0 92px; background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%); }
    .tn-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .58; background-image: linear-gradient(rgba(75,126,209,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(75,126,209,.055) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(180deg, rgba(0,0,0,.78), transparent 85%); }
    .tn-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 16% 20%, rgba(62,152,210,.10) 0 2px, transparent 3px), radial-gradient(circle at 84% 28%, rgba(36,87,214,.10) 0 2px, transparent 3px), radial-gradient(circle at 74% 75%, rgba(24,165,184,.10) 0 2px, transparent 3px), linear-gradient(26deg, transparent 0 24%, rgba(36,87,214,.075) 24.1% 24.2%, transparent 24.3% 100%), linear-gradient(154deg, transparent 0 67%, rgba(24,165,184,.07) 67.1% 67.2%, transparent 67.3% 100%); }
    .tn-hero-grid { display: block; position: relative; z-index: 1; }
    .tn-hero-grid > div:first-child { max-width: 860px; margin: 0 auto; text-align: center; }
    .tn-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--tn-brand); font-size: 13px; font-weight: 600; margin-bottom: 20px; }
    .tn-eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--tn-cyan); box-shadow: 0 0 0 5px rgba(24,165,184,.11); }
    .tn-h1 { font-size: clamp(38px, 5vw, 58px); line-height: 1.12; letter-spacing: -.055em; max-width: 900px; margin: 0 auto 20px; font-weight: 700; }
    .tn-hero-copy { color: var(--tn-muted); font-size: 18px; line-height: 1.75; max-width: 770px; margin: 0 auto 31px; }
    .tn-hero-cta { display: flex; justify-content: center; gap: 12px; align-items: center; flex-wrap: wrap; }
    .tn-hero-note { color: #8793a6; font-size: 12px; margin-top: 15px; }
    .tn-hero-network { width: min(760px, 90%); height: 76px; margin: 37px auto 0; position: relative; opacity: .62; }
    .tn-hero-network::before { content: ""; position: absolute; left: 7%; right: 7%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(74,127,205,.28) 18%, rgba(74,127,205,.16) 50%, rgba(24,165,184,.25) 82%, transparent); }
    .tn-hero-network::after { content: ""; position: absolute; width: 42%; height: 1px; left: 29%; top: 50%; background: rgba(24,165,184,.18); transform: rotate(22deg); transform-origin: center; }
    .tn-network-node { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #83b9d4; box-shadow: 0 0 0 6px rgba(131,185,212,.10); }
    .tn-network-node:nth-child(1) { left: 8%; top: 43%; }
    .tn-network-node:nth-child(2) { left: 28%; top: 19%; border-color: #91aee8; box-shadow: 0 0 0 6px rgba(145,174,232,.10); }
    .tn-network-node:nth-child(3) { left: 49%; top: 47%; width: 16px; height: 16px; border-color: var(--tn-brand); box-shadow: 0 0 0 7px rgba(36,87,214,.11); }
    .tn-network-node:nth-child(4) { left: 71%; top: 25%; border-color: #8cbfd0; box-shadow: 0 0 0 6px rgba(140,191,208,.10); }
    .tn-network-node:nth-child(5) { left: 89%; top: 53%; border-color: #a3b9df; box-shadow: 0 0 0 6px rgba(163,185,223,.10); }

    .tn-console { border: 1px solid #d9e3f0; border-radius: 18px; background: #fff; box-shadow: 0 24px 70px rgba(25,65,125,.15); overflow: hidden; }
    .tn-console-top { height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-bottom: 1px solid #eaf0f7; background: #fbfcfe; }
    .tn-dot { width: 7px; height: 7px; border-radius: 50%; background: #cad5e4; }
    .tn-console-body { padding: 20px; }
    .tn-console-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
    .tn-console-title strong { font-size: 13px; }
    .tn-status { color: var(--tn-green); font-size: 11px; display: flex; align-items: center; gap: 5px; }
    .tn-status::before { content: ""; width: 6px; height: 6px; background: var(--tn-green); border-radius: 50%; }
    .tn-console-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .tn-metric { border: 1px solid #e6edf6; border-radius: 11px; padding: 13px; background: #fcfdff; }
    .tn-metric small { color: #7e8ba0; font-size: 11px; display: block; margin-bottom: 8px; }
    .tn-metric b { font-size: 20px; letter-spacing: -.03em; }
    .tn-metric em { color: var(--tn-green); font-size: 11px; font-style: normal; margin-left: 4px; }
    .tn-route { margin-top: 13px; border: 1px solid #e6edf6; border-radius: 11px; padding: 13px; }
    .tn-route-head { display: flex; justify-content: space-between; color: #6f7f95; font-size: 11px; margin-bottom: 12px; }
    .tn-route-line { display: flex; align-items: center; gap: 7px; font-size: 12px; }
    .tn-route-line + .tn-route-line { margin-top: 10px; }
    .tn-route-name { width: 62px; color: #4c5e78; }
    .tn-route-bar { height: 7px; border-radius: 99px; background: #e9eff8; flex: 1; overflow: hidden; }
    .tn-route-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--tn-brand), #5e91ed); }
    .tn-route-value { width: 34px; text-align: right; color: #5b6f8b; font-size: 11px; }

    .tn-proof { border-bottom: 1px solid #edf2f7; background: #fff; }
    .tn-proof-row { display: grid; grid-template-columns: repeat(4, 1fr); padding: 22px 0; gap: 18px; }
    .tn-proof-item { display: flex; align-items: center; gap: 12px; }
    .tn-proof-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--tn-brand); background: #eef4ff; font-size: 15px; font-weight: 700; }
    .tn-proof-item b { display: block; font-size: 14px; }
    .tn-proof-item span { color: #8090a6; font-size: 12px; }

    .tn-section { padding: 88px 0; }
    .tn-section-soft { background: var(--tn-soft); }
    .tn-section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 35px; }
    .tn-kicker { color: var(--tn-brand); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 9px; }
    .tn-h2 { font-size: 32px; letter-spacing: -.045em; line-height: 1.2; margin: 0; }
    .tn-section-desc { margin: 0; color: var(--tn-muted); max-width: 430px; font-size: 15px; line-height: 1.7; }

    .tn-agent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
    .tn-agent { min-height: 238px; background: white; border: 1px solid var(--tn-line); border-radius: 14px; padding: 24px 21px; position: relative; transition: transform .22s, box-shadow .22s, border-color .22s; }
    .tn-agent:hover { transform: translateY(-4px); border-color: #aac1ee; box-shadow: 0 16px 28px rgba(27,67,130,.10); }
    .tn-agent-num { color: #a7b5c9; font-size: 12px; font-weight: 700; }
    .tn-agent h3 { font-size: 18px; margin: 29px 0 10px; letter-spacing: -.03em; }
    .tn-agent p { margin: 0; color: var(--tn-muted); font-size: 13px; line-height: 1.65; }
    .tn-agent-result { position: absolute; left: 21px; bottom: 21px; color: var(--tn-brand); font-size: 12px; font-weight: 600; }
    .tn-agent-result::after { content: "→"; margin-left: 7px; }
    .tn-agent:nth-child(2) .tn-agent-result { color: var(--tn-cyan); }
    .tn-agent:nth-child(3) .tn-agent-result { color: var(--tn-purple); }
    .tn-agent:nth-child(4) .tn-agent-result { color: var(--tn-green); }

    .tn-scenario-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
    .tn-scenario { border: 1px solid var(--tn-line); border-radius: 14px; padding: 25px; background: #fff; min-height: 268px; }
    .tn-scenario-top { display: flex; justify-content: space-between; align-items: center; }
    .tn-scenario-index { color: #9aa9bd; font-size: 12px; font-weight: 700; }
    .tn-scenario-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--tn-brand); background: #eef4ff; font-size: 16px; font-weight: 700; }
    .tn-scenario:nth-child(2) .tn-scenario-mark { color: var(--tn-purple); background: #f1edff; }
    .tn-scenario:nth-child(3) .tn-scenario-mark { color: var(--tn-orange); background: #fff4e7; }
    .tn-scenario h3 { margin: 29px 0 9px; font-size: 19px; letter-spacing: -.03em; }
    .tn-scenario p { margin: 0; color: var(--tn-muted); font-size: 13px; line-height: 1.7; }
    .tn-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 19px; }
    .tn-tag { color: #63728a; background: #f5f7fa; border-radius: 999px; padding: 5px 9px; font-size: 11px; }

    .tn-landing { display: grid; grid-template-columns: .85fr 1.15fr; gap: 58px; align-items: start; }
    .tn-landing-intro p { color: var(--tn-muted); font-size: 15px; line-height: 1.8; margin: 17px 0 25px; }
    .tn-landing-list { display: grid; gap: 13px; }
    .tn-landing-item { display: grid; grid-template-columns: 34px 1fr; gap: 13px; align-items: start; }
    .tn-landing-icon { width: 31px; height: 31px; border-radius: 9px; display: grid; place-items: center; background: #eef4ff; color: var(--tn-brand); font-size: 12px; font-weight: 700; }
    .tn-landing-item h3 { font-size: 15px; margin: 0 0 4px; }
    .tn-landing-item p { margin: 0; color: var(--tn-muted); font-size: 13px; line-height: 1.55; }
    .tn-architecture { border: 1px solid var(--tn-line); border-radius: 16px; background: #fff; padding: 23px; }
    .tn-architecture-title { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 20px; }
    .tn-architecture-title span { color: #8291a6; font-size: 11px; }
    .tn-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; position: relative; }
    .tn-flow::before { content: ""; position: absolute; left: 7%; right: 7%; top: 22px; height: 1px; background: #d9e4f2; }
    .tn-flow-step { text-align: center; position: relative; z-index: 1; }
    .tn-flow-dot { width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 10px; display: grid; place-items: center; background: #eef4ff; color: var(--tn-brand); border: 5px solid #fff; box-shadow: 0 0 0 1px #cbdaf1; font-size: 12px; font-weight: 700; }
    .tn-flow-step:nth-child(2) .tn-flow-dot { color: var(--tn-cyan); background: #eaf9fb; box-shadow: 0 0 0 1px #bae8ed; }
    .tn-flow-step:nth-child(3) .tn-flow-dot { color: var(--tn-purple); background: #f1edff; box-shadow: 0 0 0 1px #d9ccff; }
    .tn-flow-step:nth-child(4) .tn-flow-dot { color: var(--tn-green); background: #eaf8f2; box-shadow: 0 0 0 1px #bfe8d5; }
    .tn-flow-step b { display: block; font-size: 12px; }
    .tn-flow-step span { color: #8391a5; font-size: 11px; }
    .tn-architecture-note { margin-top: 24px; padding-top: 16px; border-top: 1px solid #edf1f7; display: flex; justify-content: space-between; gap: 15px; color: #718199; font-size: 12px; }
    .tn-architecture-note b { color: var(--tn-ink); font-size: 13px; }

    .tn-final { padding: 72px 0 84px; background: #fff; color: #09090b; border-top: 1px solid rgba(3,8,10,.09); }
    .tn-final-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
    .tn-final h2 { font-size: 30px; letter-spacing: -.04em; margin: 0 0 10px; }
    .tn-final p { color: #71717a; margin: 0; font-size: 14px; }
    .tn-final .tn-btn { background: #fff; border-color: rgba(3,8,10,.16); color: #09090b; }
    .tn-final .tn-btn-primary { background: #09090b; border-color: #09090b; color: #fff; }
    .tn-footer { padding: 22px 0; background: #fff; color: #71717a; font-size: 12px; }
    .tn-footer-inner { display: flex; justify-content: space-between; gap: 20px; }


    @media (max-width: 900px) {
      .tn-navlinks { gap: 15px; margin-left: 22px; }
      .tn-navlinks a:nth-child(4) { display: none; }
      .tn-hero-grid, .tn-landing { grid-template-columns: 1fr; gap: 38px; }
      .tn-hero { padding-top: 65px; }
      .tn-agent-grid { grid-template-columns: repeat(2, 1fr); }
      .tn-proof-row { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 620px) {
      .tn-wrap { padding: 0 19px; }
      .tn-nav { height: 62px; }
      .tn-navlinks { display: none; }
      .tn-nav-actions .tn-btn:first-child { display: none; }
      .tn-h1 { font-size: 39px; }
      .tn-hero-copy { font-size: 16px; }
      .tn-console-grid, .tn-scenario-grid, .tn-agent-grid { grid-template-columns: 1fr; }
      .tn-proof-row { grid-template-columns: 1fr 1fr; gap: 17px 12px; }
      .tn-proof-item { gap: 8px; }
      .tn-proof-item b { font-size: 12px; }
      .tn-proof-item span { font-size: 10px; }
      .tn-section { padding: 65px 0; }
      .tn-section-head { display: block; margin-bottom: 25px; }
      .tn-section-desc { margin-top: 13px; }
      .tn-flow { grid-template-columns: repeat(2, 1fr); gap: 22px 8px; }
      .tn-flow::before { display: none; }
      .tn-architecture-note, .tn-final-inner, .tn-footer-inner { display: block; }
      .tn-architecture-note > div + div { margin-top: 10px; }
      .tn-final .tn-hero-cta { margin-top: 24px; }
    }