*{box-sizing:border-box}html{scroll-behavior:smooth;background:#060805;color:white;font:16px Arial,"Microsoft JhengHei",sans-serif}body{margin:0}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button,input{font:inherit}button{background:#adff00;color:#111;border:none;border-radius:100px;font-weight:900;cursor:pointer}button:disabled{cursor:default}button:hover:not(:disabled){background:#ceff6e}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #fff;outline-offset:3px}header{position:absolute;top:0;width:100%;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:18px 4vw;background:linear-gradient(#020401b3,transparent)}.brand{font-size:24px;font-weight:900}.brand b,i{color:#adff00}nav{display:flex;gap:2em;font-weight:700}nav a{text-shadow:0 1px 6px #000}.hero{background:linear-gradient(0deg,#060805 0%,transparent 26%),url('/portrait.jpg') center top/cover no-repeat;position:relative;overflow:hidden;padding:clamp(80px,6vw,115px) 4vw 12px}.copy{max-width:76%}h1{margin:0;line-height:.98;letter-spacing:-.06em;font-weight:1000;text-shadow:0 3px 18px #0005}h1>*{display:block}h1 small{font-size:clamp(54px,6.3vw,116px)}h1 strong{font-size:clamp(90px,12vw,210px);color:#adff00;margin:.04em 0 .08em}h1 span{font-size:clamp(42px,5.8vw,115px)}#event{line-height:1.65;font-size:clamp(14px,1.2vw,20px);text-shadow:0 1px 5px #000}#event a{font-size:.8em;text-decoration:underline}.ballot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:22px 0 10px}.action{text-align:center}.action small{display:block;color:#ddd;margin-top:7px}.total{display:flex;align-items:center;gap:16px;font-weight:700}.total strong{font:800 clamp(38px,4.3vw,80px)/1 Arial;color:#adff00}#vote{padding:.35em 1.25em .45em;font-size:clamp(26px,2.8vw,50px);letter-spacing:-.04em}#vote i{color:inherit;font-style:normal}.clocks{margin:0 4vw;display:flex;justify-content:space-between;padding:14px 0;border-block:1px solid #64685f}.clocks div{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:bold}.clocks time{font:700 clamp(17px,2vw,34px)/1 monospace}#voices{padding:18px 4vw 35px}.wallhead{display:flex;align-items:center;justify-content:space-between;gap:10px}h2{font-size:22px;margin:0 0 10px}.wallhead small,.action small,#empty{color:#b7bdb3}form{display:flex;border:1px solid #b6c0af;border-radius:48px;padding:5px;align-items:center}input{min-width:0;flex:1;color:#fff;background:transparent;border:none;padding:9px 15px}form button{padding:7px 22px}output:not(:empty){display:block;color:#d8ff9c;margin-top:6px}#empty{font-size:14px}#wall{margin-top:12px}.row{position:relative;overflow:hidden;border-bottom:1px solid #47503e}.track{display:flex;width:max-content;animation:slide var(--speed,35s) linear infinite}.group{flex:none;display:flex;align-items:center;justify-content:space-around;min-width:92vw}.group span{white-space:pre;padding:10px 14px;font-weight:bold}.group span:before{content:'✳';color:#adff00;margin-right:18px}@keyframes slide{to{transform:translateX(-50%)}}
@media(max-width:700px){header{padding:14px 5vw}.brand{font-size:18px}nav{gap:12px;font-size:13px}.hero{padding:200px 5vw 14px;background-size:auto,auto 470px;background-position:center,64% top;background-image:linear-gradient(0deg,#060805 16%,transparent 75%),url('/portrait.jpg')}.copy{max-width:100%}h1 small{font-size:12vw}h1 strong{font-size:22vw}h1 span{font-size:9.2vw}#event{font-size:14px}.ballot{display:flex;flex-direction:column;gap:12px;padding-top:4px}.total{font-size:13px}.total strong{font-size:30px}#vote{font-size:30px}.clocks{display:grid;grid-template-columns:1fr 1fr;gap:12px}.clocks div{display:grid;gap:4px;font-size:12px}.clocks div:first-child{grid-column:1/-1;display:flex}.wallhead small{font-size:11px}}
em[lang="en"] {
  display: block;
  font: 500 0.76rem/1.35 Arial, sans-serif;
  letter-spacing: 0.015em;
  color: #bac3b3;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand b { font-size: 1.4em; }
nav a { text-align: center; }
.headline-en { margin: 16px 0 20px; font: 500 clamp(16px,1.65vw,28px)/1.25 Arial,sans-serif; letter-spacing: -.025em; }
.headline-en b { color: #b5ff33; }
#event { max-width: min(55vw,710px); padding: 0 0 0 16px; border-left: 2px solid #89cb19; }
#event h2, .wallhead h2 { margin: 0; }
#event h2 { font-size: 17px; }
h2 em[lang="en"] { display: inline; margin-left: 6px; }
#event p { margin: 4px 0 0; font-size: 15px; line-height: 1.55; }
#event p[lang="en"] { color: #d5dbd0; font-size: 14px; }
.ballot { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
#vote {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65em;
  padding: .38em .48em .38em 1em;
  border: 1px solid #e2ff98;
  background: linear-gradient(150deg,#d8ff81 0%,#acfc22 44%,#81cf08 100%);
  box-shadow: inset 0 2px 1px #ffffff98, inset 0 -3px 3px #4e770266,0 4px 14px #05090090;
  transition: transform .18s ease, filter .18s ease;
}
#vote::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: -2px;
  border-radius: inherit;
  box-shadow: 0 0 8px 2px #a1ff2480, 0 0 28px 6px #8af00962;
  opacity: 0;
}
#vote:enabled::before { animation: breathe 3.4s ease-in-out infinite; }
@keyframes breathe { 0%,100% { opacity: .24; } 50% { opacity: .95; } }
.vote-label { display: grid; gap: 3px; line-height: 1.1; }
.vote-label em[lang="en"] { color: #263c06; font-size: clamp(11px,.95vw,15px); font-weight: 700; }
#vote i { display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: #16240c; color: #c8ff64; font: 700 .85em/1 Arial; transition: transform .2s ease; }
@media (hover:hover) {
  #vote:enabled:hover { transform: translateY(-2px); filter: brightness(1.07); }
  #vote:enabled:hover i { transform: rotate(8deg); }
}
#vote:enabled:active { transform: translateY(1px) scale(.985); }
#vote:disabled { background: #b2c397; border-color: #c9d8b7; }
.action small { margin-top: 10px; }
.action small em, #empty em { display: inline; margin-left: .4em; }
.wallhead { margin-bottom: 10px; }
.wallhead small { text-align: right; }
@media (max-width: 700px) {
  #event { max-width: 100%; background: linear-gradient(90deg,#060805e8,#06080580); }
  #event p { font-size: 14px; }
  #event p[lang="en"] { font-size: 13px; }
  .headline-en { margin: 12px 0 18px; }
  .ballot { padding-top: 20px; }
  .wallhead h2 em, .action small em { display: block; margin-left: 0; }
  .wallhead { align-items: flex-end; }
  .brand em, nav em { font-size: 10px; }
  form button { padding: 8px 13px; }
  input { font-size: 14px; padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #vote:enabled::before { animation: none; opacity: .48; }
  #vote, #vote i { transition: none; }
  #vote:enabled:hover, #vote:enabled:active, #vote:enabled:hover i { transform: none; }
}
.brand canvas { width: clamp(36px,3vw,50px); height: auto; flex: none; filter: drop-shadow(0 0 5px #a7ff1038); }
#count { display: inline-block; transform-origin: center bottom; }
#count.near-milestone { animation: count-hop 1.55s ease-in-out infinite; }
@keyframes count-hop {
  0%,45%,100% { transform: translateY(0); }
  60% { transform: translateY(-.14em); }
  74% { transform: translateY(0); }
  83% { transform: translateY(-.04em); }
}
@media (prefers-reduced-motion: reduce) {
  #count.near-milestone { animation: none; text-shadow: 0 0 12px #98ef3866; }
}
.hero { isolation:isolate; background:#060805; }
.portrait-stage { position:absolute; inset:0; overflow:hidden; z-index:-2; container-type:size; }
.art-frame { position:absolute; width:max(100cqw,177.68cqh); aspect-ratio:1672/941; top:0; left:50%; transform:translateX(-50%); --dx:0px;--dy:0px; }
.circuit-art,.person-art,.sunlight { position:absolute;inset:0;pointer-events:none; }
.circuit-art,.person-art { background:url('/portrait.jpg') center/100% 100% no-repeat;transition:transform .18s ease-out; }
.circuit-art { transform:translate(calc(var(--dx)*.28),calc(var(--dy)*.28)) scale(1.004); }
.person-art { transform:translate(var(--dx),var(--dy));clip-path:polygon(66% 0,79% 0,83% 12%,82% 30%,80% 39%,91% 43%,100% 46%,100% 100%,44% 100%,46% 75%,51% 57%,62% 47%,66% 43%,61% 33%,59% 20%,60% 10%); }
.face-detail { position:absolute;left:67.2847%;top:17.0032%;width:12.56%;height:auto;pointer-events:none; }
.sunlight { background:radial-gradient(ellipse at 98% 0%,#ffcf7e66,transparent 30%),linear-gradient(149deg,transparent 51%,#ffcf7e17 54%,transparent 58%); mix-blend-mode:screen; animation:sunrise 1.5s ease-out both; }
@keyframes sunrise { from { opacity:0; } to { opacity:1; } }
.portrait-stage { animation:portrait-dawn 1.5s ease-out both; }
@keyframes portrait-dawn { from{filter:brightness(.78)}to{filter:brightness(1)} }
.lens-light { position:absolute; inset:0; opacity:var(--glint,0); pointer-events:none; transition:opacity .16s; }
.lens-light i { position:absolute; width:1.85%; height:1.2%; border-radius:50%; transform:translate(-50%,-50%) rotate(-14deg); background:radial-gradient(ellipse,#fff9e2 0%,#ffeab298 26%,transparent 72%); }
.person-art .lens-light i:first-child {left:68.25%;top:20.4%}
.person-art .lens-light i:last-child {left:75.1%;top:18.45%}
.front-pose .lens-light i:first-child {left:66.9%;top:29.6%}
.front-pose .lens-light i:last-child {left:73.8%;top:29.05%}
.shoulder-anchor { position:absolute;left:92%;top:45%;transform:translate(var(--dx),var(--dy)); }
button.portrait-touch,button.portrait-touch:hover { position:absolute;left:59%;top:2%;width:26%;height:48%;padding:0;background:transparent;border:0;border-radius:38%;touch-action:manipulation; }
.hero::after { content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(0deg,#060805 0%,transparent 32%); }
.copy,.ballot,#event { position:relative;pointer-events:none; }
#event p,#event h2,.action,.total { pointer-events:auto; }
.copy h1,.headline-en {width:fit-content}
.vote-circuit { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1; }
.vote-circuit path,.vote-circuit circle {opacity:0;stroke-linejoin:round;stroke-linecap:round;}
.circuit-line {stroke:#84e03a;stroke-width:2}
.circuit-signal {stroke:#d6ffa7;stroke-width:3;stroke-dasharray:16 110;filter:drop-shadow(0 0 5px #80ff29)}
.shoulder-flare {fill:#e3ffbb;filter:drop-shadow(0 0 6px #9dff1a)}
header {pointer-events:none}.brand {pointer-events:auto}
@media(max-width:700px){
  .hero { display:flex;flex-direction:column;padding:clamp(180px,52vw,260px) 5vw 22px; }
  .portrait-stage { bottom:auto;height:clamp(300px,84vw,480px); }
  .art-frame { width:177.68cqh; left:auto;right:-5%;transform:none; }
  .hero::after {background:linear-gradient(to bottom,transparent 120px,#060805 365px); }
  .copy {order:1} .ballot {order:2;padding-block:14px;} #event {order:3;}
  .copy h1 {font-size:1em} h1 strong {font-size:clamp(65px,18.5vw,106px)}
  h1 small {font-size:clamp(36px,9.8vw,55px)} h1 span{font-size:clamp(28px,8vw,54px)}
  .headline-en {margin:10px 0 0}
  #event p,#event p[lang="en"] {font-size:15px;line-height:1.6}
  .action {max-width:100%}
  #vote {min-height:54px; max-width:100%}
  #voices input {font-size:16px}
  form button {min-height:44px}
  .clocks time {white-space:nowrap}
}
@media (min-width:701px) and (max-width:1000px) {
  .clocks {gap:12px}.clocks div {flex-direction:column; align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){.sunlight,.portrait-stage{animation:none}.person-art,.circuit-art{transform:none}.lens-light{transition:none}}

@media(min-width:701px) and (max-width:1100px) {
  .art-frame {left:auto;right:0;transform:none;}
}
button.portrait-touch {-webkit-tap-highlight-color:transparent;}
.front-pose {
  position:absolute;inset:0;pointer-events:none;
  mask-image:linear-gradient(to right,transparent 36%,#000 50%);
  opacity:0;transform-origin:71% 50%;transform:perspective(1000px) rotateY(-3deg);
  transition:opacity .38s ease-in-out,transform .45s ease-out;
}
.front-ready.looks-forward .front-pose {opacity:1;transform:none}
.front-pose img {width:100%;height:100%;display:block}
.front-ready.looks-forward .person-art .lens-light {visibility:hidden}
.looks-forward .shoulder-anchor {left:91%;top:58%}
@media(prefers-reduced-motion:reduce){.front-pose{transition:none;transform:none}}
header {justify-content:flex-start;gap:clamp(12px,2vw,32px)}
.brand {flex:none}
.visitor-strip {min-width:0;border-left:1px solid #76b90099;padding-left:clamp(10px,1.3vw,22px);color:#f5f9f0;pointer-events:auto;text-shadow:0 1px 4px #000}
.visitor-strip h2 {font-size:12px;margin:0 0 5px;letter-spacing:.06em}
.visitor-strip small {font:500 10px/1.1 Arial,sans-serif;color:#c9d5c2}
.flag-symbols {position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.flag {display:inline-block;width:21px;height:14px;vertical-align:-1px}
.flag.us {width:26px}
.visitor-window {overflow:hidden}
.visitor-strip ul {margin:0;padding:0;display:flex;flex-wrap:wrap;gap:3px 14px;list-style:none}
.visitor-strip li {flex:none;align-self:center;font-size:14px;white-space:nowrap}
.visitor-strip b {color:#b0f54a;font-size:22px;line-height:1.1;font-variant-numeric:tabular-nums}
.visitor-strip ul[aria-hidden="true"] {display:none}
@media(min-width:701px) and (max-width:1100px){.hero {padding-top:100px}}
@media(max-width:700px){
  header {position:relative;align-items:flex-start;padding:10px 4vw 5px;gap:9px;background:#080d06}
  .brand {gap:5px;align-self:center}
  .visitor-strip {flex:1}
  .visitor-track {display:flex;width:max-content;min-width:200%}
  .visitor-track.is-looping {animation:visitor-loop 22s linear infinite}
  .visitor-strip ul,.visitor-strip ul[aria-hidden="true"] {display:flex;flex:1 0 auto;flex-wrap:nowrap;justify-content:space-around;gap:18px;padding-right:18px}
  .visitor-strip li {font-size:13px}
  .visitor-strip b {font-size:21px}
  .visitor-strip h2 {font-size:11px;margin:0 0 3px}
}
@keyframes visitor-loop {to{transform:translateX(-50%)}}
.music-controls {position:relative;flex:none;align-self:center;display:flex;align-items:center;margin-left:auto;border:1px solid #657752;border-radius:26px;background:#0a100bed;color:#d5e4cc;pointer-events:auto;box-shadow:0 2px 8px #0006}
.music-controls button {display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;background:transparent;color:inherit}
.music-controls button:hover:not(:disabled),.music-controls button[aria-expanded="true"] {background:#24341c;color:#bcff72}
.music-controls button svg {width:20px;height:20px;fill:currentColor}
#music-toggle {color:#b4ef67}
.sound-waves,.mute-mark {fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.pause-mark,.playing .play-mark,.mute-mark,.silent .sound-waves {display:none}
.playing .pause-mark,.silent .mute-mark {display:inline}
#volume-panel {position:absolute;z-index:3;top:calc(100% + 6px);right:0;display:grid;grid-template-columns:1fr auto;align-items:center;min-width:186px;padding:12px 14px 6px;gap:4px 8px;border:1px solid #61784f;background:#0c140cf5;border-radius:12px;box-shadow:0 6px 22px #0008}
#volume-panel[hidden] {display:none}
#volume-panel label {font-weight:700;font-size:14px}
#volume-panel small {color:#b2c0a8;font:11px Arial,sans-serif}
#volume-panel output {margin:0;color:#b4ef67;font-variant-numeric:tabular-nums;font-size:13px}
#music-volume {grid-column:1/-1;appearance:auto;width:100%;height:34px;accent-color:#95dd41;margin:0;padding:0;cursor:pointer}
.music-feedback:not(:empty){position:absolute;top:100%;right:0;width:180px;padding:6px;background:#10170d;color:#fff;font-size:12px}
@media(max-width:700px){.music-controls button{width:38px;height:44px}.music-controls{align-self:center}.music-controls button svg{width:18px;height:18px}}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
  .visitor-track.is-looping {animation:none}
  .visitor-track {display:block;width:auto;min-width:0}
  .visitor-strip ul {flex-wrap:wrap;justify-content:flex-start;gap:4px 12px;padding-right:0}
  .visitor-strip ul[aria-hidden="true"] {display:none}
}