:root{
  --bg:#e4e4e0; --paper:#ffffff;
  --fg:#000000; --fg-2:#3a3a38; --muted:#737375;   
  --accent:#000000; --on-accent:#ffffff; --hot:#d4351c;
  --rule:#c9c9c4; --rule-hair:#dedeD9;
  --card-bg:#ffffff; --card-border:none; --ph-bg:#ecece8;
  --chip-bg:#000000; --chip-fg:#ffffff;
  --nav-bg:#ffffff;
  --hover-bg:#f2f2ee;   
  --radius:0; --radius-pill:0; --shadow:none; --shadow-hover:none;
  --font:"Noto Sans TC","PingFang TC","Microsoft JhengHei",Arial,sans-serif;
  --font-display:var(--font); --font-num:var(--font);
  --wrap:1120px; --fs:15.5px;
}

body{ background:var(--bg); text-wrap:pretty; }
:focus-visible{ outline:2px solid var(--fg); outline-offset:2px; }
.num{ font-variant-numeric:tabular-nums; letter-spacing:0; }

.press-rule{ height:6px; background:var(--fg); transform-origin:left center; animation:press .5s cubic-bezier(.2,.7,.3,1) both; }
@keyframes press{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }
@media (prefers-reduced-motion:reduce){ .press-rule{ animation:none; } }

.site-head{ background:var(--paper); }
.site-head-in{ max-width:var(--wrap); margin:0 auto; padding:12px 34px 10px; display:grid; grid-template-columns:1fr auto; gap:16px 24px; align-items:end; }
.site-logo{ display:block; margin:0; font-size:0; line-height:0; }
.site-logo svg{ display:block; width:clamp(200px, calc(100vw - 594px), 430px); max-width:100%; height:auto; overflow:visible; }
.site-logo .word,
.site-logo .hit,
.site-logo .brand{ cursor:pointer; }
.site-logo .brand{ outline:none; }
.site-logo .brand:hover{ opacity:.88; }
.site-logo .brand:focus-visible{ outline:2px solid var(--fg); outline-offset:2px; }
@media (max-width:600px){ .site-logo .brand, .site-logo .brand *{ pointer-events:none; cursor:default; } }
.mast-right{ gap:14px; }

.site-head-in.vf-head{ grid-template-columns:auto minmax(0,1fr) auto; column-gap:0; }
.vf-head .mast-right{ margin-left:24px; }
.vf-stage{ --vfpad:10px; position:relative; height:calc(104px + var(--vfpad)); margin-bottom:calc(-1 * var(--vfpad)); min-width:0; overflow:hidden; align-self:end; }
.vf-stage svg{ display:block; width:100%; height:100%; }
#vf text{ font-family:var(--font); }
#vf .vf-bub text{ font-size:12.5px; font-weight:700; letter-spacing:.04em; fill:#000; }
#vfPath, #vfTip, #vfBubbles, #vfRide, #vfTool3, .vf-sc:not(#vfFin){ pointer-events:none; }
#vfFin, #vfReplay{ outline:none; }
#vfFin.live{ cursor:pointer; }
#vfFin:focus-visible .box{ stroke-width:2.6; }
#vfReplay{ cursor:pointer; }
#vfReplay:hover rect, #vfReplay:focus-visible rect{ stroke-width:2; }
@media (max-width:900px){
  .vf-stage{ --vfpad:8px; }
  .site-head-in.vf-head{ grid-template-columns:auto minmax(0,1fr); }   
}
@media (max-width:600px){
  .vf-stage{ --vfpad:6px; justify-self:end; width:86px; overflow:visible; }   
  .vf-stage svg{ overflow:visible; }
  #vf.mini .vf-sc:not(#vfFin), #vf.mini #vfPath, #vf.mini #vfTip,
  #vf.mini #vfRide, #vf.mini #vfTool3, #vf.mini #vfBubbles, #vf.mini #vfReplay{ display:none; }   
}

.topnav{ background:var(--paper); border-top:3px solid var(--fg); border-bottom:1px solid var(--fg); }
.topnav-in{ padding:0 20px; gap:0; align-items:stretch; min-height:46px; }
.nav-count{ flex:1; display:flex; align-items:center; gap:8px; padding:0 16px 0 14px; white-space:nowrap; }   
.nav-count b{ font-size:30px; font-weight:900; line-height:1; color:var(--hot); font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.cd-txt{ display:flex; flex-direction:column; gap:2px; line-height:1.2; }
.nav-count .u{ font-size:12.5px; font-weight:700; letter-spacing:.08em; color:var(--fg); }
.nav-count .d{ font-size:11.5px; font-weight:400; color:var(--fg-2); letter-spacing:0; font-variant-numeric:tabular-nums; }
.topnav-in::after{ content:""; flex:1; }
.tabs{ gap:0; margin:0; }
.tab{ display:flex; align-items:center; font-size:13.5px; font-weight:700; letter-spacing:.06em; padding:0 18px; color:var(--fg-2); border-right:1px solid var(--rule-hair); }
.tab:first-child{ border-left:1px solid var(--rule-hair); }
.tab:hover{ background:var(--hover-bg); color:var(--fg); }
.tab.on{ background:var(--fg); color:var(--paper); }

.info{ border-top:1px solid var(--fg); padding-top:8px; }
.info .k{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.3em; color:var(--fg-2); }
.info .v{ display:block; font-size:15px; font-weight:900; letter-spacing:.02em; line-height:1.4; margin-top:4px; }
.info .n{ display:block; font-size:12px; color:var(--muted); margin-top:3px; line-height:1.5; }
.info a.v:hover{ text-decoration:underline; text-underline-offset:4px; }
.foot .info .v{ color:var(--fg); }
.foot .info a.v{ text-decoration:underline; text-underline-offset:4px; }
.foot .info{ border-top:0; padding-top:0; }

.fab{ display:none; position:fixed; right:14px; bottom:calc(18px + var(--cdbar, 0px)); z-index:30; flex-direction:column; align-items:flex-end; gap:8px; }
.fab-main{ width:46px; height:46px; background:var(--fg); color:var(--paper); border:1px solid var(--fg); font-size:24px; line-height:1; cursor:pointer;
           box-shadow:0 0 0 2px var(--paper), 0 2px 10px rgba(0,0,0,.25); }   
.fab.on .fab-main{ background:var(--hot); border-color:var(--hot); }
.fab-menu{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.fab-item{ background:var(--paper); color:var(--fg); border:1px solid var(--fg); padding:9px 14px; font-size:13px; font-weight:700; letter-spacing:.06em; cursor:pointer;
           box-shadow:0 2px 8px rgba(0,0,0,.18); }
.fab-item:active{ background:var(--fg); color:var(--paper); }

.wrap{ background:var(--paper); border-left:1px solid var(--rule); border-right:1px solid var(--rule); padding:0 34px 60px; }
.masthead{ padding:26px 0 14px; border-bottom:3px solid var(--fg); display:block; }
.masthead .kicker{ font-size:12px; font-weight:700; letter-spacing:.4em; color:var(--fg-2); margin-bottom:8px; }
.masthead h1{ font-size:34px; font-weight:900; letter-spacing:.02em; line-height:1.1; }
.masthead .sub{ font-size:14px; color:var(--fg-2); margin-top:8px; }
.share a{ background:none; border:1px solid var(--fg); color:var(--fg); font-size:11.5px; font-weight:700; padding:4px 11px; letter-spacing:.05em; }
.share a:hover{ background:var(--fg); color:var(--paper); border-color:var(--fg); }
.api-note{ border:1px solid var(--hot); border-left-width:4px; color:var(--fg); margin-top:16px; }

.hero-split{ display:block; margin-top:0; padding-top:34px; }
.hero-main{ display:block; background:none; border-radius:0; box-shadow:none; }
.hero-img{ aspect-ratio:16/9; background:var(--ph-bg); }
#heroMain:empty::before{ content:""; display:block; aspect-ratio:16/9; background:var(--ph-bg); }
#heroMain:empty::after{ content:""; display:block; height:115px; }
@media (max-width:900px){ #heroMain:empty::after{ height:99px; } }
@media (max-width:600px){ #heroMain:empty::after{ height:129px; } }
.hero-list:empty{ min-height:100vh; }
.hero-main:hover .hero-img img{ transform:none; }
.hero-main:hover .hero-title{ text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; }
.hero-cap{ padding:16px 0 0; display:block; }
.hero-cap .kicker{ font-size:12px; font-weight:700; letter-spacing:.3em; color:var(--hot); }
.hero-title{ font-size:32px; font-weight:900; line-height:1.28; letter-spacing:.02em; margin:6px 0 0; }
.hero-cap .meta{ margin-top:8px; font-size:12.5px; line-height:1.5; color:var(--muted); letter-spacing:.04em; font-variant-numeric:tabular-nums; }

.hero-side{ display:block; margin-top:34px; padding:0; background:none; border:none;
            border-top:3px solid var(--fg); border-bottom:1px solid var(--fg); }   
.side-head{ border-bottom:none; font-size:13px; font-weight:900; letter-spacing:.22em; padding:12px 0 6px; margin-bottom:0; }
.side-head::before,
.feed-title::before{ content:""; width:9px; height:9px; background:var(--hot); flex:none; }
.side-head .updated{ font-size:11px; color:var(--muted); letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.refresh{ font:inherit; font-size:11px; font-weight:700; letter-spacing:.12em; padding:3px 10px; margin-left:10px; border:1px solid var(--fg); border-radius:0;
          background:none; color:var(--fg); cursor:pointer; line-height:1.4; white-space:nowrap; }
.refresh:hover{ background:var(--hover-bg); }
.refresh:disabled, .refresh[aria-busy="true"]{ opacity:.45; cursor:default; background:none; }   
.feed-tools{ margin-left:auto; display:flex; align-items:center; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; padding-right:2px; }
.hero-list{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 22px; overflow:visible; }
.hero-list li{ border-bottom:none; }
.hero-list a{ display:block; padding:12px 0 8px; }
.li-thumb{ display:block; aspect-ratio:16/9; overflow:hidden; background:var(--ph-bg); margin-bottom:9px; }
.li-thumb:empty{ display:none; }
.li-thumb img{ width:100%; height:100%; object-fit:cover; }
.li-thumb img,
.card-img img{ filter:grayscale(.15); transition:filter .2s; }
.hero-list a:hover .li-thumb img,
.card:hover .card-img img{ filter:none; }
.li-title{ font-size:14.5px; font-weight:700; line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.hero-list .meta{ font-size:11.5px; color:var(--muted); margin-top:4px; letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.more-btn{ display:block; width:max-content; margin:14px 0 18px auto; background:none; color:var(--fg); border:1px solid var(--fg); padding:7px 20px; font-size:12.5px; font-weight:700; letter-spacing:.1em; }
.more-btn:hover{ background:var(--fg); color:var(--paper); }

.feed-title{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; font-size:15px; font-weight:900; letter-spacing:.2em; margin-bottom:16px; }
.feed-title .t{ font:inherit; letter-spacing:inherit; white-space:nowrap; flex:none; }
.feed-title .sub{ font-size:12px; font-weight:400; letter-spacing:.05em; color:var(--muted); }
.feed-title .tools{ margin-left:auto; display:flex; align-items:center; font-size:11px; font-weight:400; letter-spacing:.02em;
                    color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }

.feed{ margin-top:52px; }
#races > .feed:first-child{ margin-top:20px; }   
#feed{ scroll-margin-top:calc(var(--navh, 50px) + 14px); }   
.feed-head{ border-bottom:3px solid var(--fg); padding-bottom:0; align-items:stretch; gap:0; }
.seg button{ font-size:16px; font-weight:900; letter-spacing:.16em; padding:9px 20px; border-bottom:none; color:var(--muted); }
.seg button.on{ background:var(--fg); color:var(--paper); }
.seg button:hover:not(.on){ color:var(--fg); background:var(--hover-bg); }
.hashtags{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:10px; padding:6px 0 6px 18px; }
.hash{ font:inherit; font-size:13px; font-weight:700; letter-spacing:.04em; padding:4px 12px; border:1px solid var(--fg); border-radius:0;
       background:none; color:var(--fg); cursor:pointer; }
.hash:hover, .hash.on{ background:var(--hover-bg); }   

.grid{ gap:30px 26px; margin-top:24px; }
.card{ background:none; box-shadow:none; display:flex; flex-direction:column; }
.card:hover{ transform:none; box-shadow:none; }
.card-img{ aspect-ratio:16/9; margin-top:0; }
.card .body{ padding:11px 0 0; flex:1; display:flex; flex-direction:column; align-items:flex-start; }
.chip{ padding:2px 8px; font-size:10.5px; font-weight:700; letter-spacing:.18em; }
.card h3{ font-size:16px; font-weight:700; line-height:1.5; margin-top:8px; }
.card:hover h3{ text-decoration:underline; text-underline-offset:4px; }
.card .meta{ font-size:11.5px; color:var(--muted); margin-top:auto; padding-top:9px; font-variant-numeric:tabular-nums; }

.sentinel{ border-top:1px solid var(--rule-hair); margin-top:34px; letter-spacing:.18em; font-size:12px; }
.source{ font-size:11.5px; letter-spacing:.04em; margin-top:14px; }
.foot{ border-top:3px solid var(--fg); margin-top:34px; padding:18px 0 30px; text-align:left; font-size:12px; letter-spacing:.06em; }
.foot-info{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 26px; margin-bottom:22px; }
.foot-info .nw{ white-space:nowrap; }   
.foot-brand{ display:flex; align-items:center; gap:14px; width:max-content; max-width:100%; margin:0 0 14px auto; color:var(--fg);
             font-size:12.5px; font-weight:700; letter-spacing:.08em; }
.foot-brand img{ display:block; width:117px; height:auto; }
.foot-copy{ margin:0; text-align:right; }

@media (max-width:900px){
  .wrap{ padding:0 18px 40px; border-left:none; border-right:none; }
  .hero-split{ padding-top:18px; }
  .site-head-in{ grid-template-columns:1fr; padding:10px 18px 8px; gap:12px; }
  .site-logo svg{ width:clamp(200px, calc(100vw - 386px), 430px); }   
  .masthead{ padding:20px 0 12px; }
  .masthead h1{ font-size:28px; }
  .foot-info{ grid-template-columns:1fr 1fr; gap:14px 18px; }
  .fab{ display:flex; }
  .side-head{ padding-right:56px; }
  @media (max-width:359px){
    .side-head{ padding-right:50px; }   
    .side-head .updated{ font-size:0; }
    .side-head .updated .updated-time{ font-size:11px; }
  }
  .mast-right{ display:none; }
  :root{ --cdbar:calc(40px + env(safe-area-inset-bottom, 0px)); }
  body{ padding-bottom:var(--cdbar); }
  .nav-count{ position:fixed; left:0; right:0; bottom:0; height:var(--cdbar); flex:none; justify-content:center; gap:10px;
              padding:0 12px env(safe-area-inset-bottom, 0px); background:var(--paper); border-top:1px solid var(--fg); }
  .nav-count b{ font-size:22px; }
  .cd-txt{ flex-direction:row; align-items:baseline; gap:10px; }   
  .nav-count .u{ font-size:12px; }
  .nav-count .d{ font-size:11px; }
  .topnav-in::after{ display:none; }
  .topnav-in{ padding:0; }
  .tabs{ flex:1 1 auto; min-width:0; }
  .tab{ flex:1 1 auto; justify-content:center; padding:0 3px; font-size:clamp(11px, 3.2vw, 13px); letter-spacing:.02em; }
  .tab:first-child{ border-left:none; }
  .tab:last-child{ border-right:none; }
  .hero-cap{ padding-top:12px; }
  .hero-title{ font-size:22px; letter-spacing:.01em; line-height:1.35; }
  .hero-side{ margin-top:30px; }
  .hero-list{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .site-head-in{ padding:8px 18px 6px; gap:0; }
  .site-logo svg{ width:clamp(190px, calc(100vw - 130px), 262px); }   
  .masthead h1{ font-size:24px; }
  .foot-info{ grid-template-columns:1fr; gap:10px; }
  .hero-list{ grid-template-columns:1fr; }
  .seg button{ font-size:14px; padding:8px 13px; letter-spacing:.08em; }
  .feed-head{ border-bottom:none; }
  .seg{ order:0; border-bottom:3px solid var(--fg); }
  .feed-tools{ order:1; flex:1 1 auto; justify-content:flex-end; border-bottom:3px solid var(--fg); }
  .hashtags{ order:2; width:100%; margin-left:0; padding:10px 0 0; }
  .hash{ font-size:12.5px; padding:4px 10px; }
}

.vf-stage.vfm-fixes{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.vf-say{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.vf-lift{ transition:transform .08s ease-out; }
@media (hover:hover){
  #vf.vfm-tempo #vfFin.live:not(.voting):hover .vf-lift{ transform:translateY(-1.5px); }
  #vf.vfm-tempo #vfFin.live:not(.voting):hover .box{ stroke-width:2.2; }
}
#vf.vfm-tempo #vfFin:focus-visible .box{ stroke-width:2.6; }
#vfFin.press .vf-lift{ transform:translateY(1.5px); }
@media (prefers-reduced-motion:reduce){ .vf-lift{ transition:none; transform:none !important; } }
#vfSnd, #vfShare{ cursor:pointer; outline:none; }
#vfSnd:hover .f, #vfSnd:focus-visible .f, #vfShare:hover .f, #vfShare:focus-visible .f{ stroke-width:2; }
#vfShare text{ font-size:12px; font-weight:700; letter-spacing:.04em; }
#vf:not(.mini) #vfSnd .hit, #vf:not(.mini) #vfShare .hit, #vf:not(.mini) #vfShare .m, #vf.mini #vfShare .d{ display:none; }
#vf .hit2{ display:none; }
@media (pointer:coarse){ #vf:not(.mini) .hit2{ display:inline; } }
.vf-dlg{ margin:auto; padding:0; border:0; background:transparent; max-width:none; max-height:none; overflow:visible; color:var(--fg); }   
.vf-dlg::backdrop{ background:rgba(0,0,0,.4); }
.vf-dlg [hidden]{ display:none !important; }
.vf-dlg-card{ position:relative; box-sizing:border-box; width:min(400px, calc(100vw - 32px)); max-height:90vh; overflow:auto; overscroll-behavior:contain;
  background:#fff; border:1px solid #000; border-top:4px solid #000; padding:20px; font-family:var(--font); line-height:1.5; }
.vf-dlg[open] .vf-dlg-card{ animation:vfDlgIn .2s ease-out; }
@keyframes vfDlgIn{ from{ transform:translateY(12px); opacity:0; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce){ .vf-dlg[open] .vf-dlg-card{ animation:none; } }
.vf-dlg-x{ position:absolute; top:0; right:0; width:36px; height:36px; border:0; background:transparent; color:#000; font-size:18px; line-height:1; cursor:pointer; }
.vf-dlg-k{ margin:0 0 6px; font-size:12px; font-weight:700; letter-spacing:.3em; color:#C14D4D; }
.vf-dlg-t{ margin:0 36px 12px 0; font-size:20px; font-weight:900; line-height:1.3; }
.vf-dlg-img{ width:100%; height:auto; border:1px solid #E7E5E8; box-sizing:border-box; }
.vf-dlg-p{ margin:12px 0 6px; font-size:14px; line-height:1.6; }
.vf-dlg-tip{ margin:0 0 14px; font-size:13px; line-height:1.6; display:flex; gap:8px; align-items:baseline; }
.vf-dlg-tip::before{ content:''; flex:none; width:8px; height:8px; background:#C14D4D; }
.vf-dlg-btns{ display:flex; flex-wrap:wrap; gap:8px; }
.vf-dlg-btn{ flex:1 1 auto; box-sizing:border-box; height:40px; padding:0 12px; border:1px solid #000; border-radius:0; background:#fff; color:#000;
  font:inherit; font-size:13px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; white-space:nowrap; }
.vf-dlg-btn.main{ background:#000; color:#fff; border-bottom:3px solid #C14D4D; }
.vf-dlg-btn:focus-visible{ outline:2px solid #000; outline-offset:2px; }
.vf-dlg-foot{ margin:12px 0 0; font-size:12px; color:#6b6b68; }
@media (max-width:600px){
  .vf-dlg{ width:100%; max-width:none; max-height:88dvh; margin:auto 0 0; }
  .vf-dlg-card{ width:100%; max-height:88dvh; border:0; border-top:3px solid #000; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); }
  .vf-dlg-img{ max-height:44vh; object-fit:contain; }
  .vf-dlg-btns{ display:grid; grid-template-columns:1fr 1fr; }
  .vf-dlg-btn{ height:44px; }
  .vf-dlg-btn.main{ grid-column:1 / -1; }
  .vf-dlg-btns.odd .vf-dlg-btn:last-child{ grid-column:1 / -1; }   
}

@media (max-height:500px){
  .vf-dlg-img{ max-height:calc(90vh - 140px); width:auto; max-width:100%; display:block; margin:0 auto; object-fit:contain; }
}