:root { color-scheme:dark; font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif; color:#ededed; background:#090909; }
    * { box-sizing:border-box; }
    body { margin:0; min-height:100vh; min-height:100svh; background:radial-gradient(ellipse at 50% -12%,#2d2d2d 0%,#151515 33%,transparent 65%),#090909; }
    a { -webkit-tap-highlight-color:transparent; }
    main { position:relative; max-width:1000px; padding:30px 28px 48px; margin:auto; }
    .portal { position:relative; overflow:hidden; overflow:clip; border:1px solid #ffffff14; border-radius:24px; background:linear-gradient(160deg,#181818,#101010 70%); box-shadow:inset 0 1px 0 #ffffff08,0 12px 30px #00000030; }
    .topbar { position:relative; isolation:isolate; overflow:hidden; overflow:clip; min-height:230px; margin-bottom:20px; padding:34px 24px 38px; display:flex; align-items:center; justify-content:center; color:#f5f5f5; border-bottom:1px solid #ffffff0c; border-radius:23px 23px 0 0; }
    .topbar::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse at 50% 44%,#ffffff07 0%,transparent 65%); animation:soft-glow 12s ease-in-out infinite alternate; }
    .topbar::after { content:""; position:absolute; top:15px; left:calc(50% - 22px); width:44px; height:2px; z-index:0; pointer-events:none; background:linear-gradient(90deg,transparent,#bfbfbf,transparent); }
    .brand { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:12px; min-width:0; max-width:100%; text-align:center; }
    h1 { margin:0; font-size:32px; font-weight:600; line-height:1.5; letter-spacing:.06em; text-shadow:0 2px 20px #ffffff0d; }
    .bookmark-tip { margin:0; color:#969696; font-size:14px; line-height:1.6; letter-spacing:.12em; }
    .bookmark-address { display:inline-flex; align-items:center; justify-content:center; gap:11px; min-height:43px; margin:2px 0 0; padding:7px 17px; border:1px solid #ffffff18; border-radius:99px; background:linear-gradient(135deg,#ffffff09,#ffffff02); color:#dedede; cursor:pointer; font:500 19px/1.5 "Segoe UI","Helvetica Neue",sans-serif; letter-spacing:.035em; box-shadow:inset 0 1px 0 #ffffff06,0 4px 14px #00000020; transition:background .2s,border-color .2s; }
    .bookmark-address::after { content:""; width:12px; height:12px; border:1px solid #a0a0a0; border-radius:2px; box-shadow:3px -3px 0 -1px #222,3px -3px 0 0 #777; }
    .bookmark-address:hover { background:#ffffff0e; border-color:#ffffff38; }
    .bookmark-address:focus-visible { outline:2px solid #bdbdbd; outline-offset:4px; }
    .bookmark-address:disabled { cursor:wait; }
    .copy-toast { position:fixed; left:50%; bottom:max(24px,env(safe-area-inset-bottom)); z-index:20; transform:translateX(-50%); max-width:calc(100% - 32px); width:max-content; padding:13px 22px; border:1px solid #d5d5d5; border-radius:10px; background:#f4f4f4; color:#202020; box-shadow:0 10px 36px #00000055; text-align:center; font-size:14px; line-height:1.6; }
    .copy-toast[hidden] { display:none; }
    @keyframes soft-glow { from { opacity:.35; }to { opacity:1; } }
    .navigation { position:relative; padding:20px 20px 17px; }
    .routes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; list-style:none; padding:0; margin:0; }
    .route { position:relative; display:flex; align-items:center; gap:12px; min-height:104px; border:1px solid #ffffff0e; border-radius:15px; padding:16px 20px; color:inherit; text-decoration:none; background:linear-gradient(135deg,#222222,#1b1b1b 55%,#171717); box-shadow:inset 0 1px 0 #ffffff05,0 2px 8px #00000018; transition:transform .22s,border-color .22s,box-shadow .22s; }
    @property --edge-angle { syntax:"<angle>"; initial-value:0deg; inherits:false; }
    @keyframes card-edge-light { to { --edge-angle:360deg; } }
    @supports (mask-composite:exclude) or (-webkit-mask-composite:xor) {
      .topbar::before,.route:not(.pending)::before { content:""; position:absolute; inset:-1px; padding:1px; border-radius:inherit; pointer-events:none; background:conic-gradient(from var(--edge-angle),transparent 0deg 285deg,#ffffff08 305deg,#ffffff45 330deg,#ffffffbb 347deg,transparent 360deg); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.28; animation:card-edge-light 18s linear infinite; }
      .topbar::before { inset:0; opacity:.7; filter:drop-shadow(0 0 3px #ffffff18); animation-duration:16s; }
      .routes li:nth-child(2) .route::before { animation-delay:-3.6s; }
      .routes li:nth-child(3) .route::before { animation-delay:-7.2s; }
      .routes li:nth-child(4) .route::before { animation-delay:-10.8s; }
      .routes li:nth-child(5) .route::before { animation-delay:-14.4s; }
      .routes li:nth-child(6) .route::before { animation-delay:-1.8s; }
    }
    .route-top { display:flex; align-items:center; gap:15px; min-width:0; flex:1; }
    .number { flex-shrink:0; width:30px; height:34px; border-right:1px solid #ffffff14; display:flex; align-items:center; color:#929292; font:400 14px/1 "Segoe UI","Helvetica Neue",sans-serif; font-variant-numeric:tabular-nums; }
    .copy { min-width:0; flex:1; }
    .domain { display:block; color:#f2f2f2; font:500 22px/1.5 "Segoe UI Variable","Segoe UI","Helvetica Neue",sans-serif; letter-spacing:.01em; overflow-wrap:anywhere; }
    .route-bottom { display:flex; flex-direction:column; align-items:flex-end; gap:10px; flex-shrink:0; }
    .reading { display:inline-flex; align-items:center; justify-content:flex-end; gap:7px; min-width:80px; padding:0 5px; color:#98c8ab; font-family:"Segoe UI",sans-serif; font-variant-numeric:tabular-nums; transition:color .3s; }
    .reading[data-level="yellow"] { color:#cebd8e; }
    .reading[data-level="red"] { color:#d3a0a0; }
    .signal { display:flex; align-items:flex-end; gap:2px; height:13px; }
    .signal i { width:3px; border-radius:1px; background:currentColor; }
    .signal i:nth-child(1) { height:5px; }.signal i:nth-child(2) { height:9px; }.signal i:nth-child(3) { height:13px; }
    .reading[data-level="yellow"] .signal i:last-child { opacity:.3; }
    .reading[data-level="red"] .signal i:nth-child(n+2) { opacity:.3; }
    .value { min-width:20px; font-size:14px; font-weight:500; text-align:right; }
    .unit { font-size:11px; margin-left:-4px; opacity:.8; }
    .enter { display:flex; align-items:center; justify-content:center; gap:5px; min-height:31px; min-width:80px; padding:5px 10px; border:1px solid #ffffff1a; border-radius:7px; font-size:12px; line-height:1.6; font-weight:500; color:#232323; background:linear-gradient(#f5f5f3,#ddddda); box-shadow:0 2px 5px #00000020,inset 0 1px 0 #fff; transition:background .22s,color .22s; }
    .route:not(.pending) .enter::after { content:"↗"; font:14px/1 "Segoe UI",sans-serif; }
    .route:focus-visible { outline:3px solid #bdbdbd; outline-offset:4px; border-color:#bdbdbd; }
    .route:not(.pending):active { transform:scale(.985); }
    .route.pending { background:#161616; border-color:#ffffff12; border-style:dashed; box-shadow:none; cursor:default; }
    .pending .number { color:#686868; border-color:#ffffff0d; }
    .pending .domain { font-family:inherit; font-size:17px; font-weight:400; color:#8e8e8e; }
    .pending .enter { color:#8e8e8e; background:transparent; border-color:#ffffff14; box-shadow:none; }
    .footnote { display:flex; align-items:center; justify-content:center; text-align:center; gap:12px; margin:21px 0 0; padding-top:17px; border-top:1px solid #ffffff09; font-size:12px; color:#828282; line-height:1.8; }
    @media(hover:hover) { a.route:not(.pending):hover { transform:translateY(-3px); border-color:#ffffff32; box-shadow:0 12px 24px #00000040,inset 0 1px 0 #ffffff12; }a.route:not(.pending):hover .enter { background:#fff; color:#111; } }
    @media(max-width:640px) {
      main { padding:12px 16px 30px; }.portal { border-radius:20px; }.topbar { min-height:212px; margin-bottom:16px; padding:34px 8px 28px; border-radius:19px 19px 0 0; }h1 { font-size:25px; letter-spacing:.04em; }.bookmark-tip { font-size:13px; }.bookmark-address { font-size:18px; min-height:40px; }
      .navigation { padding:14px 14px 15px; }.routes { grid-template-columns:1fr; gap:12px; }.route { gap:9px; min-height:88px; padding:12px 14px; border-radius:12px; }.route-top { gap:12px; }.number { width:25px; height:30px; font-size:13px; }.domain { font-size:20px; }
      .route-bottom { gap:8px; }.enter { min-height:29px; min-width:76px; padding:4px 8px; font-size:12px; }.value { font-size:13px; }.unit { font-size:10px; }.signal i { width:2px; }.reading { gap:5px; min-width:76px; padding:0 4px; }.footnote { flex-wrap:wrap; gap:3px; margin-top:18px; padding-top:14px; font-size:11px; }
    }
    @media(max-width:350px) { main { padding:12px 10px 24px; }h1 { font-size:23px; }.navigation { padding:13px 10px 15px; }.route { padding:14px 11px; }.number { width:22px; font-size:12px; }.route-top { gap:9px; }.domain { font-size:18px; }.pending .domain { font-size:16px; } }
    @media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; }a.route:hover,.route:active { transform:none; } }