:root { --ink:oklch(.22 .04 252); --night:oklch(.19 .052 252); --night-soft:oklch(.26 .058 252); --blue:oklch(.6 .14 244); --yellow:oklch(.8 .15 86); --paper:oklch(.985 .004 250); --line:oklch(.86 .018 245); --muted:oklch(.48 .025 248); --white:oklch(1 0 0); --body:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif; --display:"Arial Narrow","Roboto Condensed","Noto Sans TC",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.6 var(--body); } a { color:inherit; } a:focus-visible { outline:3px solid var(--yellow); outline-offset:4px; }.wrap { width:min(1120px,calc(100% - 40px)); margin-inline:auto; }.skip-link { position:fixed; z-index:10; left:12px; top:-80px; padding:9px 14px; background:var(--yellow); color:var(--night); border-radius:8px; font-weight:800; }.skip-link:focus { top:12px; }
.site-header { position:sticky; z-index:4; top:0; background:color-mix(in oklch,var(--paper) 92%,transparent); border-bottom:1px solid color-mix(in oklch,var(--line) 80%,transparent); backdrop-filter:blur(14px); }.nav-wrap { min-height:72px; display:flex; align-items:center; gap:24px; }.brand { display:inline-flex; align-items:center; gap:9px; color:var(--night); font-weight:900; font-size:20px; text-decoration:none; letter-spacing:-.025em; }.brand-mark { width:30px; height:30px; object-fit:contain; display:block; }.nav-wrap nav { display:flex; gap:4px; margin-left:auto; }.nav-wrap nav a,.nav-account { color:var(--muted); text-decoration:none; padding:8px 10px; font-size:14px; font-weight:750; }.nav-wrap nav a:hover,.nav-account:hover { color:var(--blue); }.nav-account { color:var(--night); border:1px solid var(--line); border-radius:8px; }
.hero { overflow:hidden; background:var(--night); color:var(--white); }.hero-layout { min-height:620px; padding:clamp(62px,8vw,112px) 0; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.88fr); align-items:center; gap:clamp(42px,8vw,110px); }.hero-copy { position:relative; z-index:1; }.hero-kicker,.section-label { margin:0 0 14px; color:var(--blue); font-size:14px; font-weight:850; }.hero-kicker { color:oklch(.88 .11 91); display:flex; align-items:center; gap:8px; }.pulse,.record-dot { width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 5px color-mix(in oklch,currentColor 17%,transparent); } h1,h2,p { margin-top:0; } h1 { max-width:650px; margin-bottom:24px; font:900 clamp(46px,6.4vw,82px)/.98 var(--display); letter-spacing:-.035em; text-wrap:balance; }.hero-lede { max-width:585px; margin-bottom:28px; color:oklch(.88 .018 250); font-size:clamp(17px,2vw,21px); line-height:1.7; text-wrap:pretty; }.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }.button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:11px 18px; border-radius:8px; font-weight:850; text-decoration:none; }.button-primary,.button-yellow { background:var(--yellow); color:var(--night); }.button-quiet { border:1px solid oklch(.77 .025 250/.55); color:var(--white); }.hero-note { margin:17px 0 0; color:oklch(.74 .028 248); font-size:13px; }
.live-frame { width:min(100%,445px); margin:0; justify-self:end; overflow:hidden; color:var(--white); background:var(--night-soft); border:1px solid oklch(.68 .043 248/.42); border-radius:13px; box-shadow:0 14px 8px oklch(.09 .02 250/.28); }.frame-top { height:48px; display:flex; align-items:center; gap:9px; padding:0 15px; color:oklch(.8 .025 250); font-size:13px; border-bottom:1px solid oklch(.7 .04 250/.28); }.record-dot { color:oklch(.68 .2 28); background:currentColor; }.frame-live { margin-left:auto; color:var(--yellow); font-weight:900; }.court-scene { position:relative; height:255px; overflow:hidden; background:linear-gradient(145deg,oklch(.56 .09 184),oklch(.39 .08 205)); }.court-lines { position:absolute; inset:23px 27px; border:3px solid oklch(.93 .018 204/.92); box-shadow:inset 0 0 0 2px oklch(.93 .018 204/.92); }.court-lines::before,.court-lines::after { content:""; position:absolute; background:oklch(.93 .018 204/.92); }.court-lines::before { width:3px; top:0; bottom:0; left:50%; }.court-lines::after { height:3px; left:0; right:0; top:50%; }.net { position:absolute; top:49%; left:0; width:100%; height:6px; background:oklch(.18 .02 250/.78); box-shadow:0 2px 0 oklch(1 0 0/.35); }.player { position:absolute; width:26px; height:46px; background:var(--yellow); border-radius:50% 50% 9px 9px; transform:skew(-10deg); box-shadow:11px -10px 0 -7px var(--yellow); }.player-a { left:29%; bottom:46px; }.player-b { right:22%; top:58px; background:oklch(.69 .15 35); box-shadow:-11px -10px 0 -7px oklch(.69 .15 35); }.shuttle { position:absolute; left:51%; top:39%; width:8px; height:8px; border-radius:50%; background:var(--white); box-shadow:0 0 20px 5px oklch(1 0 0/.35); }.score-overlay { min-height:76px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding:12px 17px; background:oklch(.16 .038 252/.98); }.score-overlay div { min-width:0; display:grid; gap:2px; font-size:12px; color:oklch(.75 .025 250); }.score-overlay b { color:var(--white); font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.score-overlay .right { text-align:right; }.score-overlay strong { color:var(--yellow); font:900 35px/1 var(--display); letter-spacing:-.02em; white-space:nowrap; }.score-overlay small { font-size:21px; color:oklch(.76 .026 250); }.frame-caption { padding:12px 17px; color:oklch(.75 .027 250); font-size:12px; }
.decision-section { padding:clamp(66px,10vw,122px) 0; display:grid; grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr); gap:clamp(38px,7vw,90px); }.section-intro h2,.stream-section h2,.host-band h2,.account-band h2 { margin-bottom:15px; font:900 clamp(32px,4vw,53px)/1.04 var(--display); letter-spacing:-.032em; text-wrap:balance; }.section-intro>p:last-child { max-width:470px; margin:0; color:var(--muted); font-size:17px; line-height:1.72; }.task-list { border-top:2px solid var(--ink); }.task { display:grid; grid-template-columns:48px 1fr auto; gap:13px; align-items:center; min-height:108px; padding:19px 0; text-decoration:none; border-bottom:1px solid var(--line); }.task-number { color:var(--muted); font:800 16px/1 var(--display); }.task-body { display:grid; gap:5px; }.task-body b { font-size:21px; letter-spacing:-.02em; }.task-body small { color:var(--muted); font-size:14px; }.task-arrow { color:var(--blue); font-size:26px; transition:transform .2s ease; }.task:hover .task-arrow { transform:translateX(5px); }.task:hover .task-body b { color:var(--blue); }
.stream-section { background:var(--night); color:var(--white); }.stream-layout { padding:clamp(64px,9vw,112px) 0; display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px,8vw,115px); align-items:start; }.section-label-light { color:var(--yellow); }.stream-lede { color:oklch(.82 .025 250); font-size:17px; line-height:1.72; max-width:450px; }.stream-flow { list-style:none; padding:0; margin:0; }.stream-flow li { display:grid; grid-template-columns:41px 1fr; gap:17px; padding:0 0 25px; position:relative; }.stream-flow li:not(:last-child)::before { content:""; position:absolute; left:20px; top:43px; width:1px; bottom:4px; background:oklch(.72 .04 248/.45); }.stream-flow li>span { width:41px; height:41px; display:grid; place-items:center; border:1px solid oklch(.76 .05 248/.55); border-radius:50%; color:var(--yellow); font-weight:900; }.stream-flow b { font-size:20px; }.stream-flow p { max-width:470px; margin:5px 0 0; color:oklch(.79 .026 250); }
.live-now { padding:clamp(68px,10vw,116px) 0; }.section-intro.compact { max-width:700px; }.score-row { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:36px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.score-row article { padding:24px; min-height:190px; }.score-row article+article { border-left:1px solid var(--line); }.state { display:block; margin-bottom:28px; color:var(--muted); font-size:13px; font-weight:800; }.live-state { color:oklch(.53 .14 150); }.score-row b { display:block; font-size:16px; }.score-row p { margin:9px 0; font-size:18px; letter-spacing:-.015em; }.score-row strong { color:var(--blue); font:900 25px/1 var(--display); white-space:nowrap; }.score-row small { color:var(--muted); }.text-action { display:inline-flex; gap:10px; margin-top:23px; color:var(--blue); font-weight:850; text-decoration:none; }.text-action:hover span { transform:translateX(4px); }.text-action span { transition:transform .2s ease; }
.host-band { margin-bottom:clamp(68px,10vw,116px); padding:clamp(32px,5vw,58px); display:flex; align-items:end; justify-content:space-between; gap:38px; border:1px solid var(--line); border-radius:13px; background:var(--white); }.host-copy { max-width:670px; }.host-copy p:last-child { max-width:570px; margin:0; color:var(--muted); font-size:17px; }.host-actions { display:grid; gap:14px; min-width:180px; }.button-dark { background:var(--night); color:var(--white); }.plain-link { color:var(--blue); text-align:center; font-size:14px; font-weight:800; }.account-band { background:oklch(.53 .12 244); color:var(--white); }.account-layout { padding:clamp(50px,8vw,90px) 0; display:grid; grid-template-columns:1fr .8fr; gap:clamp(36px,8vw,100px); }.account-layout p { margin:0; color:oklch(.9 .021 245); font-size:17px; line-height:1.75; }.light-action { color:var(--white); border-bottom:1px solid oklch(1 0 0/.5); padding-bottom:3px; }
.site-footer { padding:42px 0; background:var(--night); color:oklch(.75 .027 250); }.footer-layout { display:flex; justify-content:space-between; gap:45px; }.footer-brand { color:var(--white); }.footer-brand .brand-mark { background:transparent; }.site-footer p { max-width:360px; margin:12px 0 0; font-size:14px; }.site-footer nav { display:flex; max-width:470px; flex-wrap:wrap; gap:10px 22px; align-content:flex-start; }.site-footer nav a { color:oklch(.82 .026 250); font-size:14px; font-weight:700; text-decoration:none; }.site-footer nav a:hover { color:var(--yellow); }.footer-statement { margin-top:27px; padding-top:17px; border-top:1px solid oklch(.68 .04 250/.3); color:oklch(.73 .025 250); font-size:12px; line-height:1.7; }
@media (max-width:820px) { .hero-layout,.decision-section,.stream-layout,.account-layout { grid-template-columns:1fr; }.hero-layout { min-height:0; }.live-frame { justify-self:start; }.decision-section { gap:42px; }.score-row { grid-template-columns:1fr; }.score-row article+article { border-left:0; border-top:1px solid var(--line); }.host-band { align-items:start; flex-direction:column; }.host-actions { width:100%; }.footer-layout { flex-direction:column; }.site-footer nav { max-width:none; } }
@media (max-width:620px) { .wrap { width:min(100% - 30px,1120px); }.site-header { position:static; }.nav-wrap { min-height:62px; gap:12px; }.nav-wrap nav { display:none; }.nav-account { margin-left:auto; }.hero-layout { padding:52px 0 61px; }.hero-actions { display:grid; grid-template-columns:1fr; }.button { width:100%; }.live-frame { width:100%; }.court-scene { height:205px; }.score-overlay { padding:11px; gap:7px; }.score-overlay strong { font-size:29px; }.score-overlay div { font-size:10px; }.score-overlay b { font-size:13px; }.decision-section,.live-now { padding:62px 0; }.task { grid-template-columns:37px 1fr auto; min-height:100px; }.task-body b { font-size:19px; }.task-body small { font-size:13px; }.stream-layout { padding:62px 0; }.host-band { margin-bottom:62px; padding:26px; }.account-layout { padding:52px 0; }.site-footer { padding:34px 0; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.task-arrow,.text-action span { transition:none; } }