/* Gematria — quiet chart aesthetic */
:root{
  --bg:#F7F5F0; --paper:#FBFAF7; --ink:#1C1B19; --ink2:#33302B; --muted:#4A4640; --dim:#6B675F;
  --rule:#D9D4CA; --line:#C9C3B8; --clay:#A9705C; --badge:#EAE5DB;
  --serif:'Source Serif 4',Georgia,serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0; max-width:100%; overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
body{background:var(--bg); color:var(--ink); font-family:var(--serif); font-size:20px; line-height:1.6; -webkit-font-smoothing:antialiased}
a{color:var(--ink)}
[hidden]{display:none!important}
button{font:inherit}
:focus-visible{outline:2px solid var(--clay); outline-offset:3px}

.top{border-bottom:1px solid var(--rule); display:flex; justify-content:center; padding:14px 20px}
.brand{font-family:var(--mono); font-size:15px; letter-spacing:.42em; text-decoration:none; min-height:44px; display:flex; align-items:center; padding-left:.42em}

main{max-width:720px; margin:0 auto; padding:40px 20px 70px; display:flex; flex-direction:column; gap:36px}
.eyebrow{margin:0; font-family:var(--mono); font-size:14px; letter-spacing:.3em; color:var(--dim)}
h1{margin:0; font-weight:500; font-size:clamp(34px,6vw,52px); line-height:1.12; letter-spacing:-.01em}
.lead{margin:0; max-width:30em; font-size:21px; color:var(--muted)}
.muted{margin:0; color:var(--muted)}

.intro{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center}
.ask{width:100%; max-width:26em; margin:14px auto 0; display:flex; flex-direction:column; align-items:center; gap:16px}
#nm{width:100%; min-width:0; min-height:62px; padding:0 .3em; border:none; border-bottom:1px solid var(--ink); border-radius:0; background:transparent; color:var(--ink); text-align:center; font-family:var(--serif); font-size:28px; outline:none; -webkit-appearance:none}
#nm::placeholder{color:#A39E95}
#nm:focus{border-bottom-width:2px}
.err{margin:0; color:#8E3B24; font-size:18px}
.btn-ink{cursor:pointer; min-height:58px; padding:0 2.2em; border:1px solid var(--ink); border-radius:2px; background:var(--ink); color:var(--bg); font-family:var(--mono); font-size:16px; letter-spacing:.26em}
.btn-ink:hover{background:#000}
.btn-big{width:100%; min-height:62px}
.link{align-self:center; cursor:pointer; min-height:48px; padding:0 .4em; border:none; background:transparent; color:var(--ink); font-family:var(--mono); font-size:14px; letter-spacing:.16em; text-decoration:underline; text-underline-offset:5px}

.status{display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center}
.spelled{margin:0; font-size:34px; font-weight:500; letter-spacing:.08em; word-break:break-word}

.cells{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); display:grid; grid-template-columns:repeat(3,minmax(0,1fr))}
.cell{padding:24px 6px 22px; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center}
.cell + .cell{border-left:1px solid var(--rule)}
.badge{width:58px; height:58px; border-radius:50%; background:var(--badge); border:1px solid #DDD7CB; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:500; margin-bottom:8px}
.cell .lab{font-family:var(--mono); font-size:13px; letter-spacing:.22em; color:var(--dim)}
.cell .val{font-size:24px; font-weight:500; line-height:1.2}
.cell .det{font-family:var(--mono); font-size:13px; color:var(--dim)}

.wheel{position:relative; width:100%; aspect-ratio:1}
.wheel svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.ring{transform-origin:300px 300px; transform:rotate(-12deg) scale(.94); opacity:.55; transition:transform 2.4s cubic-bezier(.3,.7,.2,1), opacity 1s ease}
.wheel.live .ring{transform:none; opacity:1}
.ring text{transition:fill .35s ease}
.lines{transition:stroke 1.2s ease}
.newseg{transition:stroke-dashoffset .38s ease-out}
.closeseg{transition:stroke-dashoffset 1s ease}
.spoke{transition:stroke-dashoffset 1.2s ease}
.pulse{transition:r 1.6s ease-out, stroke-opacity 1.6s ease-out}
.halo{transition:r .38s ease-out, stroke-opacity .38s ease-out}
.center{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:30%; aspect-ratio:1; border-radius:50%; background:var(--bg); border:1px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; transition:opacity .6s ease}
.wheel.live .center{opacity:1}
.c-label{font-family:var(--mono); font-size:clamp(9px,1.8vw,12px); letter-spacing:.26em; color:var(--dim)}
.c-num{font-size:clamp(30px,7vw,52px); font-weight:500; line-height:1.1; font-variant-numeric:lining-nums tabular-nums; transition:font-size .6s ease}
.c-num.big{font-size:clamp(38px,9vw,64px)}
.c-sub{font-family:var(--mono); font-size:clamp(10px,2vw,13px); color:var(--clay); min-height:1.4em}

#s-result{display:flex; flex-direction:column; gap:30px}
.headline{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; margin-top:-10px}
.headline h1{font-size:clamp(32px,5.4vw,46px)}
.sumline{margin:0; font-family:var(--mono); font-size:14px; color:var(--dim); word-break:break-word}

.chap{border-top:1px solid var(--rule); padding:28px 0 30px; display:flex; flex-direction:column; gap:12px}
.chap .hd{display:flex; align-items:baseline; gap:16px}
.chap .no{font-family:var(--mono); font-size:14px; letter-spacing:.2em; color:var(--clay); flex:none}
.chap h2{margin:0; font-weight:500; font-size:clamp(24px,3.6vw,29px); line-height:1.25}
.chap p{margin:0; font-size:21px; line-height:1.72}
.chap .q{font-style:italic; font-size:24px}
.lock{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:13px; letter-spacing:.24em; color:var(--dim)}
.blurwrap{position:relative}
.blurwrap p{filter:blur(6px); user-select:none; color:var(--muted)}
.blurwrap a{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; min-height:48px; padding:0 22px; border:1px solid var(--ink); border-radius:2px; background:var(--bg); text-decoration:none; font-family:var(--mono); font-size:13px; letter-spacing:.22em; white-space:nowrap}

.offer{border:1px solid var(--ink); background:var(--paper); padding:30px 24px; display:flex; flex-direction:column; gap:14px; text-align:center}
.offer h2{margin:0; font-weight:500; font-size:30px; line-height:1.2}
.assure{margin:0; font-family:var(--mono); font-size:13px; letter-spacing:.12em}
.fine{margin:0; font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--dim)}
.note{margin:0; font-size:16px; color:var(--muted)}
.after{display:flex; flex-direction:column; align-items:center; gap:14px; border-top:1px solid var(--ink); padding-top:22px; text-align:center}
.thanks{margin:0; color:var(--muted)}

.about{border-top:1px solid var(--rule); padding-top:8px; color:var(--muted); font-size:18px}
.about summary{cursor:pointer; min-height:44px; display:flex; align-items:center; font-family:var(--mono); font-size:13px; letter-spacing:.2em; color:var(--ink); list-style:none}
.about p{margin:6px 0 0}

.foot{border-top:1px solid var(--rule); padding:10px 20px 24px}
.foot nav{display:flex; flex-wrap:wrap; justify-content:center; gap:0 22px}
.foot a{font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--dim); min-height:44px; display:flex; align-items:center}

@media (max-width:520px){
  body{font-size:19px}
  main{padding-top:28px; gap:28px}
  #nm{font-size:24px}
  .badge{width:48px; height:48px; font-size:20px}
  .cell .val{font-size:19px}
  .cell .lab{font-size:11px; letter-spacing:.16em}
  .chap p{font-size:19px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{
  .top,.foot,#s-input,#s-status,.offer,.after,.link,.about,.blurwrap a{display:none!important}
  body{background:#fff}
  .wheel{max-width:420px; margin:0 auto}
}