:root{
    --paper:#EDEAE2; --ink:#22211D; --gray:#9C9A90; --hairline:#D8D5CA;
    --accent:#FF5A1F;
  }
  *{box-sizing:border-box; margin:0; padding:0}
  html,body{height:100%}
  body{
    background:var(--paper); color:var(--ink);
    font-family:'Space Mono',monospace;
    min-height:100%; -webkit-font-smoothing:antialiased;
    position:relative;
  }
  /* paper grain over the whole page, very subtle */
  body::before{
    content:''; position:fixed; inset:0; pointer-events:none; z-index:1;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity:.035; mix-blend-mode:multiply;
  }
  header{
    display:flex; align-items:baseline; justify-content:space-between;
    padding:28px 36px 8px; max-width:1180px; margin:0 auto;
    position:relative; z-index:2;
  }
  .logo{
    font-family:'Instrument Serif',serif; font-weight:400;
    font-size:34px; line-height:1; letter-spacing:-.5px;
  }
  .logo .star{color:var(--accent)}
  .textbtn{
    background:none; border:none; cursor:pointer;
    font-family:'Space Mono',monospace; font-size:12px; font-weight:400;
    letter-spacing:2px; text-transform:uppercase; color:var(--gray); padding:4px 0;
  }
  .textbtn:hover{color:var(--ink)}
  .textbtn:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
  main{
    max-width:1180px; margin:0 auto; padding:20px 36px 70px;
    display:grid; grid-template-columns:1fr 310px; gap:60px; align-items:start;
    position:relative; z-index:2;
  }
  /* ---- wheel ---- */
  .stage{display:flex; flex-direction:column; align-items:center}
  .wheel-wrap{position:relative; width:min(100%,580px); aspect-ratio:1}
  canvas#wheel{width:100%; height:100%; display:block}
  .pointer{
    position:absolute; top:0; left:50%; width:22px; height:30px;
    transform:translateX(-50%); transform-origin:50% 12%;
    transition:transform .07s ease-out; z-index:3; pointer-events:none;
  }
  .spin-btn{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:108px; height:108px; border-radius:50%;
    border:none; cursor:pointer; z-index:2;
    background:var(--ink); color:var(--paper);
    font-family:'Instrument Serif',serif; font-style:italic;
    font-size:26px; letter-spacing:0;
    transition:transform .12s ease;
  }
  .spin-btn:hover{transform:translate(-50%,-50%) scale(1.04)}
  .spin-btn:active{transform:translate(-50%,-50%) scale(.97)}
  .spin-btn:disabled{opacity:.35; cursor:default}
  .spin-btn:focus-visible{outline:2px solid var(--ink); outline-offset:4px}
  .hint{
    margin-top:22px; color:var(--gray); font-size:11px;
    letter-spacing:2.5px; text-transform:uppercase;
  }
  .toggles{display:flex; gap:28px; margin-top:18px; flex-wrap:wrap; justify-content:center}
  .toggle{
    display:inline-flex; align-items:center; gap:9px;
    background:none; border:none; cursor:pointer;
    font-family:'Space Mono',monospace; font-size:11px;
    letter-spacing:2.5px; text-transform:uppercase;
    color:var(--gray); padding:4px 0;
    transition:color .15s ease;
  }
  .toggle .dot{
    width:9px; height:9px; border-radius:50%;
    border:1.5px solid currentColor; background:transparent;
    transition:background .15s ease, border-color .15s ease;
  }
  .toggle[aria-pressed="true"]{color:var(--ink)}
  .toggle[aria-pressed="true"] .dot{background:var(--accent); border-color:var(--accent)}
  .toggle:hover{color:var(--ink)}
  .toggle:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
  .panel-actions + .panel-actions{margin-top:10px}
  /* ---- entries ---- */
  .panel{position:sticky; top:26px}
  .panel .rule{border-top:1.5px solid var(--ink); margin-bottom:16px}
  .bigcount{
    font-family:'Instrument Serif',serif; font-weight:400;
    font-size:96px; line-height:.9; letter-spacing:-2px;
  }
  .panel-label{
    font-size:11px; letter-spacing:3px; text-transform:uppercase;
    color:var(--gray); margin:10px 0 20px;
  }
  textarea#entries{
    width:100%; min-height:250px; resize:vertical;
    background:transparent; color:var(--ink);
    border:none; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
    padding:16px 2px; font-family:'Space Mono',monospace; font-size:14px; line-height:2;
  }
  textarea#entries:focus{outline:none; border-color:var(--ink)}
  textarea#entries::placeholder{color:var(--gray)}
  .panel-actions{display:flex; gap:22px; margin-top:16px}
  /* ---- winner aura ---- */
  .aura{
    position:fixed; inset:0; z-index:10;
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .6s ease;
    background:
      radial-gradient(85% 75% at 18% 18%, #EE8A67 0%, rgba(238,138,103,0) 60%),
      radial-gradient(75% 70% at 84% 14%, #A3CFE8 0%, rgba(163,207,232,0) 62%),
      radial-gradient(85% 85% at 78% 86%, #EFAEC6 0%, rgba(239,174,198,0) 64%),
      radial-gradient(70% 65% at 26% 82%, #EFC77F 0%, rgba(239,199,127,0) 62%),
      #EDE3D2;
  }
  .aura::before{
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
    opacity:.09; mix-blend-mode:overlay;
  }
  .aura.show{opacity:1; pointer-events:auto}
  .aura-inner{
    text-align:center; padding:0 26px; max-width:960px; position:relative;
    transform:translateY(8px); transition:transform .6s ease;
  }
  .aura.show .aura-inner{transform:translateY(0)}
  .aura-label{
    font-size:11px; letter-spacing:4px; text-transform:uppercase;
    color:var(--ink); opacity:.65; margin-bottom:22px;
  }
  .aura-name{
    font-family:'Instrument Serif',serif; font-style:italic; font-weight:400;
    color:var(--ink); letter-spacing:-1px; line-height:1;
    font-size:clamp(52px,10vw,128px); overflow-wrap:anywhere;
  }
  .aura-actions{
    display:flex; gap:34px; justify-content:center; margin-top:56px; flex-wrap:wrap;
  }
  .aura-actions .textbtn{color:var(--ink); opacity:.6}
  .aura-actions .textbtn:hover{opacity:1; color:var(--ink)}
  @media (prefers-reduced-motion:reduce){
    .aura{transition:none}
    .aura-inner{transform:none; transition:none}
  }
  @media (max-width:900px){
    main{grid-template-columns:1fr; gap:40px; padding:12px 22px 48px}
    .panel{position:static}
    header{padding:22px 22px 4px}
    .bigcount{font-size:72px}
    .aura-actions{gap:22px}
  }

/* ---- page content below the tool ---- */
.pagebody{
  max-width:720px; margin:0 auto; padding:24px 34px 40px;
  position:relative; z-index:2;
}
.pagebody .rule{border-top:1.5px solid var(--ink); margin:26px 0 22px}
.pagebody h2{
  font-family:'Instrument Serif',serif; font-weight:400;
  font-size:30px; letter-spacing:-.5px; margin:26px 0 10px;
}
.pagebody p{
  font-family:'Instrument Serif',serif; font-size:19px; line-height:1.55;
  color:var(--ink); margin:0 0 14px;
}
.faq dt{
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:2px;
  text-transform:uppercase; margin:18px 0 6px; color:var(--ink);
}
.faq dd{
  font-family:'Instrument Serif',serif; font-size:18px; line-height:1.5;
  margin:0; color:var(--ink);
}
.related{margin-top:30px}
.related-label{
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:3px;
  text-transform:uppercase; color:var(--gray); margin-bottom:12px;
}
.related a{
  display:inline-block; margin:0 18px 10px 0;
  font-family:'Space Mono',monospace; font-size:13px;
  color:var(--ink); text-decoration:none; border-bottom:1px solid var(--hairline);
  padding-bottom:2px;
}
.related a:hover{border-color:var(--accent); color:var(--accent)}
footer{
  max-width:1180px; margin:30px auto 0; padding:26px 34px 44px;
  border-top:1px solid var(--hairline);
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:baseline;
  position:relative; z-index:2;
}
footer a{
  font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:1.5px;
  text-transform:lowercase; color:var(--gray); text-decoration:none;
}
footer a:hover{color:var(--ink)}
footer .foot-logo{
  font-family:'Instrument Serif',serif; font-size:18px; color:var(--ink);
  letter-spacing:-.3px; margin-right:8px; text-transform:none;
}
footer .foot-logo span{color:var(--accent)}
.logo a{color:inherit; text-decoration:none}
/* CJK / Thai fallbacks for future locales */
:lang(ja) body, :lang(ko) body, :lang(zh) body, :lang(th) body{
  font-family:'Space Mono','Noto Sans JP','Noto Sans KR','Noto Sans SC','Noto Sans Thai',monospace;
}

/* ---- wheel chips (grainy color pills under the toggles) ---- */
.wheelchips{
  display:flex; flex-wrap:wrap; gap:10px 10px; justify-content:center;
  margin-top:24px; max-width:600px; padding:0 10px;
}
.chip{
  position:relative; overflow:hidden; isolation:isolate;
  font-family:'Space Mono',monospace; font-size:10.5px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
  padding:9px 15px 8px; border-radius:999px;
  transition:transform .12s ease, filter .12s ease;
}
.chip::after{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  opacity:.16; mix-blend-mode:multiply;
}
.chip:hover{transform:translateY(-1px)}
.chip:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.chip:nth-child(12n+1){background:#E08D66}
.chip:nth-child(12n+2){background:#94B8A0}
.chip:nth-child(12n+3){background:#8FB0D6}
.chip:nth-child(12n+4){background:#E2C170}
.chip:nth-child(12n+5){background:#D89DB4}
.chip:nth-child(12n+6){background:#A49BC9}
.chip:nth-child(12n+7){background:#C4D6A4}
.chip:nth-child(12n+8){background:#9FC6C9}
.chip:nth-child(12n+9){background:#E0B486}
.chip:nth-child(12n+10){background:#E39B92}
.chip:nth-child(12n+11){background:#B3C0E0}
.chip:nth-child(12n+12){background:#D3BEA3}
/* ---- tightening ---- */
.pagebody{padding-top:8px}
.pagebody h2{font-size:26px; margin:22px 0 8px}
.pagebody .rule{margin:22px 0 18px}
.faq dt{margin:15px 0 5px}
footer{margin-top:22px; padding-top:22px}

/* ---- three-column desktop layout: chips | wheel | entries ---- */
main{
  grid-template-columns:200px 1fr 300px;
  grid-template-areas:"chips stage panel";
}
.wheelchips{grid-area:chips}
.stage{grid-area:stage}
.panel{grid-area:panel}
main .wheelchips{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  margin-top:10px; max-width:none; padding:0;
  position:sticky; top:26px;
}
main .wheelchips .chip{
  white-space:normal; text-align:left; line-height:1.5;
  padding:8px 14px 7px;
}
@media (max-width:900px){
  main{
    grid-template-columns:1fr;
    grid-template-areas:"stage" "chips" "panel";
  }
  main .wheelchips{
    position:static; flex-direction:row; flex-wrap:wrap; justify-content:center;
    max-width:600px; margin:0 auto; padding:0 10px;
  }
  main .wheelchips .chip{white-space:nowrap; text-align:center}
}

/* ---- language switcher + JA typography ---- */
.langswitcher{margin-left:auto; display:inline-flex; gap:10px; align-items:baseline}
.langswitcher a, .lang-current{
  font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:1.5px;
  text-transform:none; text-decoration:none;
}
.langswitcher a{color:var(--gray)}
.langswitcher a:hover{color:var(--ink)}
.lang-current{color:var(--ink); border-bottom:1.5px solid var(--accent); padding-bottom:1px}
:lang(ja) .pagebody h1, :lang(ja) .pagebody h2, :lang(ja) .aura-name{
  font-family:'Noto Serif JP','Instrument Serif',serif !important; letter-spacing:0 !important;
}
:lang(ja) .pagebody p, :lang(ja) .faq dd{font-family:'Noto Serif JP',serif; font-size:16.5px; line-height:1.8}
:lang(ja) .hint, :lang(ja) .toggle, :lang(ja) .panel-label, :lang(ja) .faq dt{letter-spacing:1px}

/* ---- ZH + AR typography & RTL ---- */
:lang(zh) .pagebody h1, :lang(zh) .pagebody h2, :lang(zh) .aura-name{
  font-family:'Noto Serif SC','Instrument Serif',serif !important; letter-spacing:0 !important;
}
:lang(zh) .pagebody p, :lang(zh) .faq dd{font-family:'Noto Serif SC',serif; font-size:16.5px; line-height:1.9}
:lang(zh) .hint, :lang(zh) .toggle, :lang(zh) .panel-label, :lang(zh) .faq dt{letter-spacing:1px}
:lang(ar) .pagebody h1, :lang(ar) .pagebody h2, :lang(ar) .aura-name{
  font-family:'Noto Naskh Arabic','Instrument Serif',serif !important; letter-spacing:0 !important;
}
:lang(ar) .pagebody p, :lang(ar) .faq dd{font-family:'Noto Naskh Arabic',serif; font-size:17.5px; line-height:1.95}
:lang(ar) body, :lang(ar) textarea#entries, :lang(ar) .toggle, :lang(ar) .textbtn,
:lang(ar) .hint, :lang(ar) .panel-label, :lang(ar) .faq dt, :lang(ar) .chip,
:lang(ar) .langswitcher a, :lang(ar) .lang-current{
  font-family:'Noto Sans Arabic','Space Mono',monospace; letter-spacing:0;
}
[dir="rtl"] .langswitcher{margin-left:0; margin-right:auto}
[dir="rtl"] main .wheelchips .chip{text-align:right}
[dir="rtl"] .panel .rule{border-top-width:1.5px}