:root{
  color-scheme:dark;
  --paper:#0a0a0a;
  --ink:#ece7dc;
  --muted:#8f897d;
  --line:#262422;
  --accent:#e2774f;
  --serif:"Sitka Text","Iowan Old Style","Charter","Palatino Linotype","Book Antiqua",Georgia,serif;
  --display:"Sitka Display","Sitka Heading","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --mono:"Cascadia Mono",Consolas,monospace
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:18px/1.6 var(--serif);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility
}
a{color:inherit}
button{font:inherit;color:inherit}
button,summary{cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
::selection{background:var(--accent);color:var(--paper)}

.shell{max-width:1040px;margin:auto;padding:0 40px}
.skip{position:absolute;left:20px;top:-70px;padding:12px;background:var(--ink);color:var(--paper);z-index:5}
.skip:focus{top:12px}

header{
  display:flex;
  align-items:center;
  gap:32px;
  padding:28px 0;
  font-size:16px
}
.brand{font-weight:700;text-decoration:none;letter-spacing:-.01em}
nav{display:flex;gap:24px;margin-left:auto}
nav a,footer a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;text-decoration-thickness:1px}
nav a:hover,footer a:hover{text-decoration-color:currentColor}
nav a[aria-current]{text-decoration:none;color:var(--muted)}

.language-picker{position:relative;display:flex;align-items:center;flex-shrink:0;z-index:20}
.language-picker button{min-height:40px;background:none;border:0;font-size:14px}
.language-picker button:hover{color:var(--accent)}
.language{display:flex;align-items:center;gap:8px;padding:0 8px;white-space:nowrap}
.language img,.language-menu img{width:18px;height:13px;object-fit:cover;flex-shrink:0;box-shadow:0 0 0 1px #fff2}
.language-name{max-width:11ch;overflow:hidden;text-overflow:ellipsis}
.language-caret{color:var(--muted)}
.language-neighbor{display:flex;align-items:center;gap:4px;padding:0 4px;color:var(--muted)!important}
.language-neighbor:hover{color:var(--ink)!important}
.language-neighbor>span:not(.language-preview){font-size:20px;line-height:1}
.language-preview{display:none}
.language-random{display:grid;place-items:center;width:34px;color:var(--muted)!important}
.language-random:hover{color:var(--ink)!important}
.language-random svg{transition:transform .3s ease-out}
.language-random:active svg{transform:scale(.85)}
.is-spinning .language{overflow:hidden}
.is-spinning .language-random{color:var(--accent)!important}
.is-spinning .language-random svg{animation:language-roulette .5s cubic-bezier(.3,.6,.4,1) infinite}
@keyframes language-roulette{
  0%{transform:rotate(0) scale(1)}
  50%{transform:rotate(180deg) scale(1.15)}
  100%{transform:rotate(360deg) scale(1)}
}
.language-menu{position:absolute;top:calc(100% + 6px);right:0;width:180px;max-height:min(440px,calc(100dvh - 120px));overflow:auto;padding:4px;background:var(--paper);border:1px solid var(--line);box-shadow:0 10px 30px #000c}
.language-menu[hidden]{display:none}
.language-menu button{display:flex;align-items:center;gap:12px;width:100%;padding:6px 10px;text-align:left}
.language-menu button[aria-checked="true"]{color:var(--accent)}
.language-menu button[aria-checked="true"]::after{content:'✓';margin-left:auto}
.language-menu button:focus-visible{outline-offset:-2px}

.hero{padding:72px 0 88px}
.motto{margin:0 0 20px;font-size:14px;letter-spacing:.08em;color:var(--muted)}
h1{
  margin:0;
  font:400 clamp(72px,13vw,164px)/.95 var(--display);
  letter-spacing:-.035em
}
.projects-button{
  display:inline-flex;
  margin-top:36px;
  gap:10px;
  padding:10px 18px;
  border:1px solid var(--ink);
  border-radius:999px;
  text-decoration:none;
  font-size:16px;
  transition:background .15s,color .15s
}
.projects-button:hover{background:var(--ink);color:var(--paper)}

.row{
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  gap:40px;
  padding:48px 0 56px;
  border-top:1px solid var(--line)
}
.row>h2{margin:6px 0 0;font:italic 400 17px/1.4 var(--serif);color:var(--muted)}
.row>div{max-width:620px}
.row p{margin:0 0 18px}
html:is(:lang(zh),:lang(ja),:lang(ko)) h1{line-height:1.3;letter-spacing:0}

.specialties{display:flex;flex-wrap:wrap;margin:24px 0 0;padding:0;list-style:none;color:var(--muted);font-size:16px}
.specialties li+li::before{content:"·";margin:0 .6em}

.focus-list{margin:0;padding:0;list-style:none}
.focus-list li{padding:12px 0;border-top:1px solid var(--line)}
.focus-list li:last-child{border-bottom:1px solid var(--line)}

.verdict{
  position:fixed;
  top:112px;
  right:24px;
  width:min(260px,calc(100vw - 24px));
  max-height:calc(100dvh - 24px);
  overflow:auto;
  z-index:10;
  background:var(--paper);
  border:1px solid #3a3734;
  box-shadow:0 12px 36px #0009
}
.poll-handle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:32px;
  padding:6px 12px;
  border:0;
  border-bottom:1px solid var(--line);
  background:var(--paper);
  color:var(--muted);
  font:11px var(--mono);
  cursor:grab;
  touch-action:none;
  user-select:none
}
.poll-handle:focus-visible{outline-offset:-3px}
.poll-handle:active{cursor:grabbing}
.poll-grip{font-size:20px;line-height:1;color:var(--accent)}
.vote-content{padding:12px}
.vote-question{margin-bottom:12px}
.vote-question h2{margin:0 0 4px;font:400 24px/1.2 var(--display);letter-spacing:-.01em;overflow-wrap:anywhere}
.vote-question>span{font:11px var(--mono);color:var(--muted)}
#total{font-weight:400;color:var(--ink)}
.vote-controls{display:grid;gap:6px}
.vote-controls button{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:38px;
  padding:9px 10px;
  border:1px solid #3a3734;
  background:transparent;
  font-size:15px;
  text-align:left
}
.vote-controls button::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:var(--result,0%);
  background:#ece7dc0d;
  z-index:-1;
  transition:width .4s ease
}
.vote-controls button[data-vote="yes"]::before{background:#e2774f26}
.poll-radio{width:12px;height:12px;border:1px solid var(--muted);border-radius:50%;flex-shrink:0}
.vote-controls button[aria-pressed="true"] .poll-radio{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px var(--paper)}
.vote-controls button>span:last-child{margin-left:auto;font:11px var(--mono);color:var(--muted)}
.vote-controls button:hover:enabled{border-color:var(--accent)}
.vote-controls button:disabled{cursor:default}
#status{min-height:16px;margin:12px 0 0;font:11px/1.6 var(--mono);color:var(--muted)}

footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:28px 0 40px;
  border-top:1px solid var(--line);
  font-size:14px;
  color:var(--muted)
}

@media(max-width:820px){
  .shell{padding:0 24px}
  header{flex-wrap:wrap;gap:12px 24px;padding:20px 0}
  .language-picker{margin-left:auto}
  .hero{padding:48px 0 64px}
  .row{grid-template-columns:1fr;gap:12px;padding:36px 0 44px}
  .row>h2{margin:0}
  .verdict{top:140px;right:12px;width:min(240px,calc(100vw - 24px))}
}
@media(max-width:480px){
  body{font-size:17px}
  .shell{padding:0 18px}
  nav{margin-left:0;gap:18px}
  .language-picker{margin-left:-8px}
  header{display:grid;grid-template-columns:auto 1fr;}
  nav{justify-self:end}
  .language-picker{grid-column:1 / -1}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}