:root{--ink:#fff;--ink-dim:#ffffffc7;--bar:#0810209e;--bar-edge:#ffffff24;--hi:#829ede;--fade:.4s;--fs-xs:12px;--fs-s:14px;--fs-m:16px;--nodes-h:120px}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%}body{color:var(--ink);background:#0b1424;flex-direction:column;margin:0;font:14px/1.6 Microsoft YaHei,PingFang SC,system-ui,sans-serif;display:flex;overflow:hidden}a{color:inherit}#bg,#shade{position:fixed;inset:0}#bg{z-index:-2}#bg .bg{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity var(--fade) ease;position:absolute;inset:0}#bg .bg.on{opacity:1}#shade{z-index:-1;background:linear-gradient(#04091400 38%,#04091473 68%,#040914c7 100%),linear-gradient(#0409148c 0%,#04091400 18%),radial-gradient(60% 45% at 12% 72%,#04091473 0%,#04091400 70%)}header{justify-content:space-between;align-items:center;gap:16px;padding:18px 40px;display:flex}.brand{align-items:center;gap:12px;min-width:0;text-decoration:none;display:flex}.logo{filter:drop-shadow(0 1px 3px #0000008c);flex:none;width:auto;height:44px}.name{letter-spacing:.06em;white-space:nowrap;text-overflow:ellipsis;text-shadow:0 1px 3px #00000080;border-left:1px solid #ffffff8c;padding-left:14px;font-size:20px;font-weight:600;line-height:1.2;overflow:hidden}.tools{font-size:var(--fs-s);flex:none;align-items:center;gap:22px;display:flex}.tools a,.tools button{color:var(--ink);font:inherit;cursor:pointer;text-shadow:0 1px 3px #00000080;background:0 0;border:0;padding:4px 0;text-decoration:none}.tools a:hover,.tools button:hover{text-underline-offset:4px;text-decoration:underline}.tools .btn-line{border:1px solid #ffffffb3;border-radius:18px;padding:5px 18px}.tools .btn-line:hover{background:#ffffff24;text-decoration:none}#acct{align-items:center;gap:14px;display:flex}#acct .who{color:var(--ink-dim)}.phone{position:relative}#phonePop{z-index:5;color:#1f2937;text-align:center;width:200px;font-size:var(--fs-xs);background:#fff;border-radius:8px;padding:14px;line-height:1.5;position:absolute;top:calc(100% + 10px);right:0;box-shadow:0 8px 28px #00000059}#phonePop p{margin:8px 0 0}#phonePop small{color:#6b7280}#phoneQr{width:168px;height:168px;margin:0 auto}#phoneQr svg{width:100%;height:100%;display:block}:focus-visible{outline-offset:3px;outline:2px solid #fff}main{flex:1;align-items:flex-end;min-height:0;padding:0 40px 44px;display:flex;position:relative}#hero{max-width:640px}#hero h1{letter-spacing:.06em;text-shadow:0 2px 8px #0000008c;margin:0;font-size:32px;font-weight:700;line-height:1.3}#hero p{font-size:var(--fs-m);color:var(--ink-dim);text-shadow:0 1px 4px #0009;margin:8px 0 0}#hero.swap h1,#hero.swap p{opacity:0}#hero h1,#hero p{transition:opacity calc(var(--fade) / 2) ease}.hero-act{align-items:center;gap:16px;min-height:40px;margin-top:20px;display:flex}.btn-go{background:var(--hi);color:#0b1424;font-size:var(--fs-m);transition:filter .15s ease, background-color var(--fade) ease;border-radius:20px;align-items:center;gap:8px;padding:8px 26px;font-weight:600;text-decoration:none;display:inline-flex;box-shadow:0 4px 14px #0000004d}.btn-go:hover{filter:brightness(1.12)}.btn-go[aria-disabled=true]{color:var(--ink);cursor:default;filter:none;background:#ffffff38}#heroNote{font-size:var(--fs-s);color:var(--ink-dim);text-shadow:0 1px 3px #0009}#play{width:40px;height:40px;color:var(--ink);cursor:pointer;background:#08102059;border:1px solid #fff9;border-radius:50%;place-items:center;display:grid;position:absolute;bottom:44px;right:40px}#play:hover{background:#08102099}#play svg{fill:none;stroke:currentColor;stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}#play .i-play{fill:currentColor;stroke:none;display:none}#play[aria-pressed=true] .i-pause{display:none}#play[aria-pressed=true] .i-play{display:inline}#nodes{height:var(--nodes-h);background:var(--bar);border-top:1px solid var(--bar-edge);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);flex:none;grid-template-columns:repeat(2,minmax(0,2fr)) repeat(8,minmax(0,1fr));display:grid}.node{color:var(--ink);font:inherit;text-align:center;cursor:pointer;background:0 0;border:0;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:0 6px;font-size:15px;text-decoration:none;transition:background-color .2s;display:flex;position:relative}.node.wide{text-align:left;background:#ffffff09;flex-direction:row;justify-content:flex-start;gap:14px;padding:0 18px 0 28px}.node+.node:before{content:"";background:var(--bar-edge);width:1px;position:absolute;top:28%;bottom:28%;left:0}.node.wide+.node:not(.wide):before{background:#fff6;top:16%;bottom:16%}.node:hover,.node.on,.node.wide:hover,.node.wide.on{background:#ffffff17}.node:after{content:"";background:var(--c,var(--hi));border-radius:2px 2px 0 0;height:3px;transition:transform .25s;position:absolute;bottom:0;left:22%;right:22%;transform:scaleX(0)}.node.on:after{transform:scaleX(1)}.node .ico{border:1.5px solid #ffffffbf;border-radius:50%;flex:none;place-items:center;width:52px;height:52px;transition:border-color .2s,background-color .2s;display:grid}.node.on .ico{border-color:var(--c,var(--hi));background:#ffffff0f}.node .ico svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:26px;height:26px}.node.wide .ico{border-width:2px;width:60px;height:60px}.node.wide .ico svg{width:30px;height:30px}.node .lbl{white-space:nowrap;text-overflow:ellipsis;min-width:0;max-width:100%;line-height:1.3;overflow:hidden}.node .lbl small{font-size:var(--fs-xs);color:var(--ink-dim);display:block}.node.wide .lbl{letter-spacing:.06em;font-size:19px;font-weight:600}.node.wide .lbl em{font-style:normal;font-weight:400;font-size:var(--fs-xs);letter-spacing:.02em;color:var(--ink-dim);text-overflow:ellipsis;margin-top:4px;display:block;overflow:hidden}@media (width<=1500px){.node.wide{gap:12px;padding:0 12px 0 20px}.node.wide .ico{width:52px;height:52px}.node.wide .ico svg{width:26px;height:26px}.node.wide .lbl{font-size:18px}}@media (width<=1100px){body{overflow:auto}header{padding:14px 24px}main{min-height:52vh;padding:0 24px 32px}#play{bottom:32px;right:24px}#nodes{grid-template-columns:repeat(4,minmax(0,1fr));height:auto}.node{padding:16px 6px}.node.wide{grid-column:span 2;padding:16px 20px}#nodes>.node:nth-child(3):before,#nodes>.node:nth-child(7):before{display:none}.tools{gap:16px}}@media (width<=860px){.logo{height:36px}.name{padding-left:10px;font-size:17px}#hero h1{font-size:26px}}@media (prefers-reduced-motion:reduce){#bg .bg,#hero h1,#hero p,.node:after,.btn-go{transition:none}}
