:root{color-scheme:dark;--bg:#0d1120;--text:#f2f3f7;--muted:#a1a6b9;--gold:#ffd34d;--orange:#ff9635;--line:rgba(171,180,211,.14);font-family:"Segoe UI","Noto Sans TC","Microsoft JhengHei",sans-serif;background:var(--bg);color:var(--text)}
*{box-sizing:border-box}
body{margin:0;min-width:280px;background:radial-gradient(ellipse at 78% 40%,rgba(74,36,86,.13),transparent 48%),var(--bg)}
a{color:inherit;text-decoration:none}
button{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
[hidden]{display:none!important}
::selection{background:#ffd34d;color:#0d1120}
.space{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.grid{position:absolute;inset:0;background-image:linear-gradient(rgba(138,146,187,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(138,146,187,.045) 1px,transparent 1px);background-size:76px 76px;mask-image:linear-gradient(90deg,transparent,black 55%,black)}
#particles{position:absolute;inset:0;width:100%;height:100%;opacity:.75}
.scan{position:absolute;inset:0;background:linear-gradient(transparent,rgba(255,150,53,.025),transparent);height:22vh;animation:scan 14s linear infinite}
.page{position:relative;width:min(1280px,calc(100% - 112px));min-height:100svh;margin:auto;display:flex;flex-direction:column}
.header{height:112px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}
.brand{display:inline-flex;align-items:center;gap:11px;font-size:27px;font-weight:650;letter-spacing:-1px}
.brand img{object-fit:contain;border-radius:10px}
.brand-dot{color:var(--orange)}
.header-note{font:11px/1.5 Consolas,monospace;letter-spacing:2px;color:var(--muted)}
.header-note span{color:var(--orange);font-size:19px;margin-left:18px}
.main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:34px 0 46px}
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:530px;gap:16px}
.hero-copy{position:relative;z-index:2;padding-bottom:18px}
.eyebrow{display:flex;align-items:center;gap:12px;font:11px/1.6 Consolas,monospace;letter-spacing:2px;color:#c2af95;margin:0 0 29px}
.dash{width:26px;height:1px;background:var(--orange)}
h1{font-size:clamp(50px,5.7vw,80px);line-height:1.23;letter-spacing:-3px;font-weight:750;margin:0 0 28px}
h1>span{background:linear-gradient(110deg,#ffdd70 3%,#ffb642 46%,#ff8250 95%);background-clip:text;-webkit-background-clip:text;color:transparent}
.intro{font-size:17px;line-height:1.95;letter-spacing:.8px;color:var(--muted);margin:0;max-width:460px}
.process{display:flex;align-items:center;gap:16px;margin-top:34px;color:#c5c7d2;font-size:13px;letter-spacing:3px}
.process i{width:28px;height:1px;background:linear-gradient(90deg,#715047,rgba(113,80,71,.2));position:relative}
.process i:after{content:"";position:absolute;right:0;top:-2px;width:4px;height:4px;border-top:1px solid #715047;border-right:1px solid #715047;transform:rotate(45deg)}
.visual{overflow:clip;height:520px;position:relative;display:grid;place-items:center;min-width:0}
.visual-frame{position:absolute;inset:18px -3px 23px 8px;border-top:1px solid rgba(168,140,115,.12);border-bottom:1px solid rgba(168,140,115,.12);pointer-events:none}
.frame-label,.coordinate{position:absolute;font:10px/1.5 Consolas,monospace;letter-spacing:1.8px;color:#828198;background:var(--bg);padding:0 12px}
.frame-label{left:18px;top:-7px}.coordinate{right:16px;bottom:-7px}
.cross{position:absolute;color:#a87a58;font:18px Consolas,monospace}.cross-top{right:-4px;top:-11px}.cross-bottom{left:-4px;bottom:-10px}
.core{width:min(100%,500px);aspect-ratio:1;position:relative;display:grid;place-items:center;transform:translate(var(--px,0px),var(--py,0px));transition:transform .25s ease-out}
.hero-logo{position:relative;width:85%;height:auto;mix-blend-mode:lighten;z-index:2}
.halo{position:absolute;inset:10%;background:radial-gradient(ellipse,rgba(255,150,53,.11),rgba(103,48,126,.12) 40%,transparent 70%);filter:blur(18px)}
.orbit{position:absolute;inset:3%;border:1px solid rgba(255,164,65,.2);border-radius:50%;box-shadow:0 0 22px rgba(255,150,53,.025);animation:orbit 32s linear infinite}
.orbit:before{content:"";position:absolute;left:15%;top:13%;width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px 3px rgba(255,150,53,.55)}
.orbit-one{transform:rotate(-30deg) scaleY(.69);border-left-color:rgba(255,179,70,.6);animation-name:orbit-one}
.orbit-two{inset:7%;transform:rotate(55deg) scaleY(.8);border-color:rgba(132,76,155,.35);animation:orbit-two 43s linear infinite reverse}
.orbit-two:before{background:#b682c8;box-shadow:0 0 16px #8c50aa}
.orbit-three{inset:0;border-style:dashed;border-color:rgba(178,162,143,.1);animation-duration:95s}
.orbit-three:before{display:none}
.core-star{position:absolute;width:5px;height:5px;background:var(--orange);box-shadow:0 0 20px 4px #ff963544;border-radius:50%}.star-one{top:20%;right:9%}.star-two{bottom:19%;left:10%;width:3px;height:3px}
.connection{position:relative;display:flex;align-items:center;gap:23px;padding:27px 30px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(105deg,rgba(28,32,48,.85),rgba(18,21,36,.9));box-shadow:0 16px 44px #07091422;margin-top:21px}
.connection:before{content:"";position:absolute;left:30px;right:75%;top:-1px;height:1px;background:linear-gradient(90deg,#ffb45488,transparent)}
.connection-icon{width:47px;height:47px;display:grid;place-items:center;border:1px solid #ff963523;border-radius:50%;color:#dfac6b;flex-shrink:0;background:#ff963507}
.connection-icon svg{width:25px;height:25px}
.ip-content{min-width:0;flex:1}
.ip-content h2{margin:0 0 9px;font:11px/1.6 Consolas,monospace;letter-spacing:1.6px;color:#d5ad78;font-weight:400}
.ip-content h2 span{font-family:"Segoe UI","Microsoft JhengHei",sans-serif;font-size:12px;letter-spacing:1px;color:#9399ac;margin-left:9px}
.ip-value{font:clamp(17px,1.8vw,24px)/1.5 Consolas,"Courier New",monospace;letter-spacing:.5px;margin:0;overflow-wrap:anywhere;user-select:all}
.copy-area{flex-shrink:0;max-width:240px}
#copy-ip{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 17px;border:1px solid #73798c4d;border-radius:5px;background:#ffffff03;color:#ced1dd;font-size:14px;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
#copy-ip:hover{border-color:#ffc16788;background:#ff963510;color:#ffcb80}
#copy-ip svg{width:16px;height:16px}
.copy-status{font-size:12px;line-height:1.6;color:#e4bc81;margin:7px 0 0;max-width:230px}.copy-status:empty{display:none}
.footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 0 28px;border-top:1px solid var(--line);color:#9297ab;font:12px/1.7 Consolas,"Microsoft JhengHei",monospace}
.footer-motto{letter-spacing:1px}.footer-motto>span{margin-left:22px;color:#ce975c;font-size:19px;vertical-align:middle}
body.is-paused .orbit,body.is-paused .scan{animation-play-state:paused}
@keyframes scan{from{transform:translateY(-22vh)}to{transform:translateY(105vh)}}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes orbit-one{from{transform:rotate(-30deg) scaleY(.69) rotate(0deg)}to{transform:rotate(-30deg) scaleY(.69) rotate(360deg)}}
@keyframes orbit-two{from{transform:rotate(55deg) scaleY(.8) rotate(0deg)}to{transform:rotate(55deg) scaleY(.8) rotate(360deg)}}
@media(min-width:1500px){.hero{min-height:600px}.visual{height:570px}.core{width:550px}}
@media(min-width:701px) and (max-height:850px){.header{height:88px}.main{padding:24px 0}.hero{min-height:430px}.visual{height:420px}.core{width:min(90%,420px)}}
@media(max-width:1000px){.page{width:calc(100% - 64px)}.hero{min-height:460px}.visual{height:420px}h1{font-size:58px}.eyebrow{font-size:10px;letter-spacing:1.5px}.intro{font-size:16px}.core{width:100%}.main{padding-top:25px}.hero-copy{padding-bottom:0}}
@media(max-width:700px){.page{width:calc(100% - 40px)}.header{height:83px}.brand{font-size:24px}.brand img{width:36px;height:36px}.header-note{font-size:9px;letter-spacing:1px}.header-note span{margin-left:4px}.main{padding:40px 0 30px}.hero{grid-template-columns:1fr;gap:19px;min-height:0}.hero-copy{padding:0 8px}.eyebrow{margin-bottom:22px}h1{font-size:clamp(44px,10vw,64px);letter-spacing:-2px;margin-bottom:22px}.intro{font-size:16px}.process{margin-top:24px}.visual{height:auto;aspect-ratio:1.16;width:min(100%,440px);justify-self:center}.core{width:90%}.visual-frame{inset:19px 0 17px}.frame-label,.coordinate{font-size:9px;letter-spacing:1px}.connection{padding:22px 18px;gap:15px;flex-wrap:wrap;margin-top:28px}.connection-icon{width:38px;height:38px}.connection-icon svg{width:22px;height:22px}.ip-content{flex-basis:calc(100% - 60px)}.ip-value{font-size:18px}.ip-content h2{font-size:10px;letter-spacing:1px}.ip-content h2 span{font-size:11px;margin-left:1px}.copy-area{margin-left:53px;max-width:100%}.copy-status{max-width:none}.footer{align-items:flex-start;font-size:11px;padding:20px 0;gap:12px;flex-wrap:wrap}.footer-motto{font-size:11px}.footer-motto>span{margin-left:9px}.grid{background-size:52px 52px}}
@media(max-width:360px){.header-note{display:none}.hero-copy{padding:0}.desktop-break{display:none}.ip-content h2 span{display:block;margin:0}.connection-icon{display:none}.copy-area{margin-left:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.core{transform:none}.scan,#particles{display:none}}