html { scroll-behavior: smooth; }
  html, body { overflow-x: clip; }
  body {
    font-family: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Noto Sans JP", "Malgun Gothic", sans-serif;
    background-color: #0A0E17;
    background-image:
      radial-gradient(900px 420px at 50% -8%, rgba(0, 200, 83, .16), transparent 60%),
      radial-gradient(640px 320px at 110% 18%, rgba(126, 182, 255, .10), transparent 55%),
      radial-gradient(520px 280px at -10% 88%, rgba(228, 195, 106, .08), transparent 50%);
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }
  section { scroll-margin-top: 4.75rem; }
  ::selection { background: #00C853; color: #06210f; }
  :focus-visible { outline: 2px solid #00C853; outline-offset: 2px; }
  button, a, input, select, textarea, summary { touch-action: manipulation; }
  input, select, textarea { font-size: 16px; }
  input[type="range"] { accent-color: #00C853; width: 100%; height: 28px; }
  .ex-btn {
    border: 1px solid rgba(255, 255, 255, .12);
    background: #101826;
    color: #d5deec;
  }
  .ex-btn.is-on {
    border-color: #00C853;
    background: rgba(0, 200, 83, .14);
    color: #f3fff7;
    box-shadow: inset 0 0 0 1px rgba(0, 200, 83, .25);
  }
  .dock-btn {
    background: linear-gradient(180deg, #3ee676 0%, #00C853 48%, #009e40 100%);
    color: #06210f;
    box-shadow: 0 10px 28px rgba(0, 200, 83, .28);
  }
  .perforation {
    height: 1px;
    background-image: linear-gradient(90deg, rgba(154, 171, 196, .75) 42%, transparent 0);
    background-size: 8px 1px;
    background-repeat: repeat-x;
  }
  .chev { transition: transform .2s ease; }
  button[aria-expanded="true"] .chev { transform: rotate(180deg); }
  .tick { opacity: 0; }
  [aria-checked="true"] .tick { opacity: 1; }
  .skip {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 80;
    background: #00C853;
    color: #06210f;
    padding: .5rem .75rem;
    border-radius: .75rem;
  }
  .skip:focus { top: .75rem; }
  #lbMount svg { height: auto; display: block; }
  .scenery {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
      radial-gradient(ellipse 90% 55% at -10% -15%, rgba(0, 200, 83, .34), transparent 58%),
      radial-gradient(ellipse 70% 50% at 115% 8%, rgba(80, 150, 255, .32), transparent 52%),
      radial-gradient(ellipse 65% 42% at 90% 108%, rgba(228, 195, 106, .28), transparent 50%),
      radial-gradient(ellipse 50% 36% at 8% 78%, rgba(0, 90, 70, .45), transparent 55%),
      linear-gradient(165deg, #10182a 0%, #070b14 42%, #121018 100%);
  }
  .scenery .mesh {
    position: absolute;
    inset: -30%;
    background-image:
      linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 32px 32px;
    transform: rotate(-12deg);
    mask-image: radial-gradient(circle at 35% 25%, #000 0%, transparent 68%);
  }
  .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
  }
  .orb-a {
    width: 220px; height: 220px; left: -70px; top: 18%;
    background: radial-gradient(circle, rgba(0, 200, 83, .45), transparent 68%);
    animation: drift 14s ease-in-out infinite;
  }
  .orb-b {
    width: 260px; height: 180px; right: -90px; top: 42%;
    background: radial-gradient(circle, rgba(126, 182, 255, .4), transparent 70%);
    animation: drift 18s ease-in-out infinite reverse;
  }
  .orb-c {
    width: 200px; height: 200px; left: 20%; bottom: 6%;
    background: radial-gradient(circle, rgba(228, 195, 106, .32), transparent 68%);
    animation: drift 16s ease-in-out infinite;
  }
  .ribbon {
    position: absolute;
    left: -10%;
    top: 22%;
    width: 120%;
    height: 140px;
    background: linear-gradient(90deg, transparent, rgba(0, 200, 83, .14), rgba(126, 182, 255, .12), transparent);
    transform: rotate(-8deg);
  }
  @keyframes drift {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(18px, -22px, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .orb-a, .orb-b, .orb-c { animation: none; }
  }
  .shell { position: relative; z-index: 1; }
  .route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.15rem minmax(0, 1fr);
    grid-template-areas:
      "s1 j1 s2"
      "s3 j2 s4"
      "s5 s5 s5";
    gap: .55rem .15rem;
    align-items: center;
    margin-top: 1rem;
  }
  .route a {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    min-height: 44px;
    padding: .3rem .55rem .3rem .3rem;
    border-radius: 999px;
    text-decoration: none;
    color: #e7eef8;
    background: rgba(10, 16, 28, .55);
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: .78rem;
    font-weight: 600;
    backdrop-filter: blur(8px);
  }
  .route a span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .route a[data-route="assess"] { grid-area: s1; }
  .route a[data-route="screen"] { grid-area: s2; }
  .route a[data-route="diagrams"] { grid-area: s3; }
  .route a[data-route="faq"] { grid-area: s4; }
  .route a[data-route="apply"] { grid-area: s5; justify-self: center; width: 58%; }
  .route a b {
    width: 1.55rem;
    height: 1.55rem;
    flex: 0 0 1.55rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #00C853;
    color: #06210f;
    font-size: .72rem;
  }
  .route a[data-route="screen"] b { background: #7EB6FF; }
  .route a[data-route="diagrams"] b { background: #E4C36A; }
  .route a[data-route="faq"] b { background: #9ad7ff; color: #06210f; }
  .route a[data-route="apply"] b { background: #3ee676; }
  .route a.is-here {
    border-color: rgba(0, 200, 83, .8);
    box-shadow: 0 0 0 1px rgba(0, 200, 83, .35), 0 8px 20px rgba(0, 0, 0, .25);
  }
  .route-join {
    width: .48rem;
    height: .48rem;
    border-top: 2px solid #E4C36A;
    border-right: 2px solid #E4C36A;
    transform: rotate(45deg);
    justify-self: center;
  }
  .route-join:nth-of-type(1) { grid-area: j1; }
  .route-join:nth-of-type(2) { grid-area: j2; }
  .trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
    margin-top: .85rem;
    align-items: stretch;
  }
  .trust li {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    border-radius: 999px;
    padding: .45rem .35rem;
    font-size: .72rem;
    line-height: 1.25;
    text-align: center;
    background: rgba(16, 24, 38, .72);
    border: 1px solid rgba(255, 255, 255, .1);
  }
  .trust li:nth-child(2) { border-color: rgba(228, 195, 106, .45); }
  .trust li:nth-child(3) { border-color: rgba(126, 182, 255, .45); }
  .block-head { position: relative; min-height: 3.2rem; padding-right: 3.2rem; }
  .ghost {
    position: absolute;
    right: 0;
    top: -.35rem;
    font-size: 3.4rem;
    font-weight: 800;
    line-height: .85;
    letter-spacing: -.04em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(228, 195, 106, .45);
    pointer-events: none;
  }
  .ghost-sky { -webkit-text-stroke-color: rgba(126, 182, 255, .5); }
  .ghost-mint { -webkit-text-stroke-color: rgba(0, 200, 83, .5); }
  .sheet {
    position: relative;
    background:
      linear-gradient(180deg, rgba(24, 34, 52, .88), rgba(10, 16, 28, .82));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(10px);
  }
  .sheet-gold { border-radius: 1.7rem 1.15rem 1.7rem 1.15rem; border-color: rgba(228, 195, 106, .38); margin-right: .4rem; }
  .sheet-sky { border-radius: 1.15rem 1.7rem 1.15rem 1.7rem; border-color: rgba(126, 182, 255, .42); margin-left: .4rem; }
  .sheet-mix { border-radius: 1.5rem 1.5rem .7rem 1.5rem; }
  .sheet-mint { border-radius: 1.2rem 1.8rem 1.5rem .8rem; border-color: rgba(0, 200, 83, .4); }
  .field-step { display: grid; grid-template-columns: 1.7rem 1fr; gap: .55rem; margin-top: 1rem; }
  .field-step .n {
    width: 1.7rem; height: 1.7rem; margin-top: .1rem;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: .72rem; font-weight: 800;
    background: rgba(0, 200, 83, .16); color: #8dffbe;
  }
  .field-step.sky .n { background: rgba(126, 182, 255, .16); color: #b9d7ff; }
  .next {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    min-height: 44px;
    margin-top: .35rem;
    color: #9ec8ff;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
  }
  .next i {
    width: 1.4rem; height: 1.4rem; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(126, 182, 255, .16);
    font-style: normal;
  }
  #exGroup { display: flex; flex-wrap: wrap; gap: .5rem; }
  #exGroup .ex-btn { flex: 0 1 auto; min-width: 6.6rem; padding-inline: .9rem; }
  .more-ex {
    flex: 0 1 auto;
    min-width: 6.6rem;
    border: 1px dashed rgba(228, 195, 106, .7);
    background: rgba(228, 195, 106, .08);
    color: #E4C36A;
  }
  .ex-more { display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; }
  #moreEx[hidden] { display: none; }
  #explorerJump {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .faq-card { background: rgba(14, 20, 32, .78); backdrop-filter: blur(8px); }
  .faq-card:nth-child(odd) { border-radius: 1.2rem 1.2rem 1.2rem .45rem; }
  .faq-card:nth-child(even) { border-radius: .45rem 1.2rem 1.2rem 1.2rem; margin-left: .65rem; }
  .extra-btn {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    min-height: 48px;
    padding: .55rem .7rem;
    border-radius: .95rem;
    border: 1px solid #f0d48a;
    background: linear-gradient(180deg, #f3d78a 0%, #c9963a 48%, #8c5a16 100%);
    color: #2a1a06;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    letter-spacing: .01em;
    box-shadow: 0 8px 22px rgba(201, 150, 58, .45);
    animation: extraGlow 1.8s ease-in-out infinite;
  }
  .extra-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 28%, rgba(255, 255, 255, .55) 50%, transparent 72%);
    transform: translateX(-120%);
    animation: extraSheen 1.8s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes extraGlow {
    0%, 100% { transform: scale(1); box-shadow: 0 6px 16px rgba(201, 150, 58, .35); }
    50% { transform: scale(1.03); box-shadow: 0 0 22px 3px rgba(243, 215, 138, .75); }
  }
  @keyframes extraSheen {
    0% { transform: translateX(-120%); }
    55%, 100% { transform: translateX(120%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .extra-btn, .extra-btn::after { animation: none; }
  }
  .ex-logos {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px 5px;
    flex: 1;
    min-width: 0;
    align-content: center;
  }
  .ex-logo {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    max-height: 28px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    overflow: hidden;
  }
  .ex-logo svg { display: block; width: 100%; height: 100%; }
  .ex-logo.is-on { outline: 2px solid #00C853; outline-offset: 1px; }
  .dock-wrap {
    background: linear-gradient(180deg, transparent, rgba(7, 11, 20, .72) 28%, rgba(7, 11, 20, .92));
  }
  .welcome {
    background:
      radial-gradient(ellipse 80% 50% at 50% 0%, rgba(228, 195, 106, .28), transparent 55%),
      rgba(5, 7, 12, .82);
  }
  .welcome-card {
    animation: welcomeIn .55s ease, welcomeFloat 2.2s ease-in-out .55s infinite;
  }
  .welcome-logo {
    animation: welcomePop .7s ease;
    filter: drop-shadow(0 10px 18px rgba(201, 150, 58, .45));
  }
  .welcome-copy {
    position: relative;
    overflow: hidden;
    margin-top: 1rem;
    padding: .9rem .85rem;
    border-radius: 1.1rem;
    border: 1px solid #fff1c2;
    background: linear-gradient(180deg, #fff6d4 0%, #f0d48a 42%, #c9963a 100%);
    color: #2a1a06;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.45;
    box-shadow: 0 10px 24px rgba(201, 150, 58, .45);
  }
  .welcome-copy::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: extraSheen 1.6s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes welcomeIn {
    from { opacity: 0; transform: translateY(16px) scale(.92); }
    to { opacity: 1; transform: none; }
  }
  @keyframes welcomePop {
    0% { transform: scale(.55) rotate(-8deg); opacity: 0; }
    70% { transform: scale(1.08) rotate(3deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
  }
  @keyframes welcomeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .welcome-card, .welcome-logo, .welcome-copy::after { animation: none; }
  }