@font-face {
  font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: block;
  src: url('fonts/marcellus.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: block;
  src: url('fonts/marcellus-ext.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/inter-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/plexmono-400.woff2') format('woff2');
}

:root{
  --bg:#08080C;
  --bone:#E9E4D6;
  --dim:#8E8A7C;
  --faint:#55524A;
  --line:#1A1A22;
  --met:#C8A86B;
  --met-hi:#E8C98A;
  --glow:rgba(200,168,107,.14);
  --build:"26.10-7rinhbq2";
}
@supports not (color: color-mix(in srgb, red 50%, blue)) { :root { --glow-rgb: 200, 168, 107; --glow-r: 200; --glow-g: 168; --glow-b: 107; --glow-a: 0.14; } }
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:radial-gradient(ellipse 90% 70% at 50% 0%, #0D0D14, transparent 60%), var(--bg);
  color:var(--bone);
  font-family:'Inter',system-ui,sans-serif;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

.brand{
  position:fixed;top:22px;left:26px;z-index:40;user-select:none;
  font-family:'Marcellus',serif;font-size:15px;letter-spacing:.42em;color:var(--dim);
}
.atmo{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 62% 46% at 50% 44%, var(--glow), transparent 70%);
  transition:background 1.6s ease;
}
@supports not (inset: 0) { .atmo { top: 0; right: 0; bottom: 0; left: 0; } }
#veil{
  position:fixed;inset:0;background:#050508;opacity:0;pointer-events:none;z-index:50;
  transition:opacity 1.2s ease;
}
@supports not (inset: 0) { #veil { top: 0; right: 0; bottom: 0; left: 0; } }
#veil.on{opacity:1}

.stage{
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:92px 20px 64px;position:relative;
}
.screen{position:relative;z-index:2;width:100%;display:none;flex-direction:column;align-items:center}
.screen.on{display:flex;animation:fadeUp 1.1s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.wordmark{
  font-family:'Marcellus',serif;font-size:clamp(40px,9vw,84px);
  letter-spacing:.34em;text-indent:.34em;color:var(--bone);
}
@supports not (width: min(1px, 2px)) { .wordmark { font-size: 40px; }
  @media (min-width: 444.44px) { .wordmark { font-size: 9vw; } }
  @media (min-width: 933.33px) { .wordmark { font-size: 84px; } } }
.rule{width:54px;height:1px;background:#3A382F;margin:30px 0 24px}
.h1{
  font-family:'Marcellus',serif;font-size:clamp(21px,4.2vw,29px);
  text-align:center;line-height:1.55;max-width:600px;margin:0 auto;
}
@supports not (width: min(1px, 2px)) { .h1 { font-size: 21px; }
  @media (min-width: 500px) { .h1 { font-size: 4.2vw; } }
  @media (min-width: 690.48px) { .h1 { font-size: 29px; } } }
.tagline{
  margin-top:18px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.26em;
  color:var(--dim);text-transform:uppercase;text-align:center;line-height:2.1;
}
.note{margin:32px auto 0;max-width:440px;text-align:center;color:var(--dim);font-size:14px;line-height:1.9}
.micro{
  margin-top:26px;font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.24em;color:var(--faint);text-transform:uppercase;text-align:center;line-height:2;
}
.ritual-line{
  font-family:'Marcellus',serif;font-size:clamp(20px,4vw,27px);text-align:center;
  max-width:580px;line-height:1.55;margin:0 auto;
}
@supports not (width: min(1px, 2px)) { .ritual-line { font-size: 20px; }
  @media (min-width: 500px) { .ritual-line { font-size: 4vw; } }
  @media (min-width: 675px) { .ritual-line { font-size: 27px; } } }
.sub{margin:16px auto 0;color:var(--dim);font-size:13.5px;text-align:center;max-width:460px;line-height:1.85}

.btn{
  margin-top:42px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--bone);background:none;border:1px solid #3A382F;
  border-radius:0;padding:16px 46px;cursor:pointer;
  transition:border-color .4s,background .4s,opacity .4s;
}
.btn:hover { border-color:var(--dim);background:rgba(233,228,214,.03);outline:none }

.btn:hover,.btn:focus-visible{border-color:var(--dim);background:rgba(233,228,214,.03);outline:none}
.btn:focus-visible{outline:1px solid var(--dim);outline-offset:3px}
.btn[disabled]{opacity:.35;cursor:default}
.btn-gold{color:#0B0B0F;background:var(--met);border-color:var(--met)}
.btn-gold:hover{background:var(--met-hi);border-color:var(--met-hi)}
.link{
  margin-top:22px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.24em;
  color:var(--faint);background:none;border:none;cursor:pointer;text-transform:uppercase;
}
.link:hover{color:var(--dim)}

.dob-row{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.dob-field{display:flex;flex-direction:column;gap:10px}
.dob-field label{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--dim);text-align:center;
}
select{
  appearance:auto;background:#0E0E14;color:var(--bone);border:1px solid #34322B;border-radius:0;
  font-family:'Marcellus',serif;font-size:17px;padding:12px 14px;min-width:112px;
  color-scheme:dark;cursor:pointer;transition:border-color .4s;
}
select:focus{outline:none;border-color:var(--dim)}

.tal-wrap{
  position:relative;z-index:1;width:min(58vh,88vw,540px);aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 0 30px rgba(200,168,107,.16));
}
@supports not (width: min(1px, 2px)) { .tal-wrap { width: 88vw; }
  @media (min-width: 613.64px) { .tal-wrap { width: 540px; } }
  @media (min-aspect-ratio: 29/44) { .tal-wrap { width: 58vh; } }
  @media (min-aspect-ratio: 29/44) and (min-height: 931.04px) { .tal-wrap { width: 540px; } } }
.tal-wrap svg{width:100%;height:100%;display:block}
.spin{transform-origin:350px 350px;animation:turn 240s linear infinite}
.spinB{transform-origin:350px 350px;animation:turnB 320s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes turnB{to{transform:rotate(-360deg)}}

.breathe{animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.97}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .spin,.spinB,.breathe{animation:none}
}

.spin,.spinB,.spin-slow,.spinB-slow,#sigAura{
  transform-box:view-box;
}

.reveal{width:min(660px,94vw);text-align:center;margin-top:6px}
@supports not (width: min(1px, 2px)) { .reveal { width: 94vw; }
  @media (min-width: 702.13px) { .reveal { width: 660px; } } }
.stagger{opacity:0;animation:riseIn 1.2s ease forwards}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.path-tag{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--met);
}
.ring-name{
  font-family:'Marcellus',serif;font-size:clamp(28px,6vw,42px);letter-spacing:.16em;
  margin:14px 0 8px;
}
@supports not (width: min(1px, 2px)) { .ring-name { font-size: 28px; }
  @media (min-width: 466.67px) { .ring-name { font-size: 6vw; } }
  @media (min-width: 700px) { .ring-name { font-size: 42px; } } }
.ring-trait{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--dim);
}
.keys{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.key{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--met);border:1px solid #4A3E22;padding:8px 14px;
}
.reading-body{margin-top:28px;font-size:15px;line-height:1.95;color:var(--dim);text-align:left}
.reading-body p{margin-bottom:16px}
.reading-body p.lead{color:var(--bone)}
.reading-body p.shadow{color:var(--faint);font-size:14px}

.why{
  margin-top:26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:22px 4px;text-align:left;
}
.why h4{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--met);margin-bottom:12px;
}
.why p{font-size:14.5px;line-height:1.9;color:var(--dim)}

.facts{
  margin-top:22px;display:flex;gap:26px;justify-content:center;flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);
}
.facts b{color:var(--dim);font-weight:400}

.next-note{margin-top:30px;font-size:13px;color:var(--faint);line-height:1.9}

.actions{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:40px}
.actions .btn{margin-top:0}
.actions .link{margin-top:0;padding:6px 4px}

footer{
  margin-top:60px;text-align:center;font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;letter-spacing:.2em;color:#3A382F;line-height:2.2;
}

.step-head{width:min(660px,94vw);margin:8px auto 0;text-align:center}
@supports not (width: min(1px, 2px)) { .step-head { width: 94vw; }
  @media (min-width: 702.13px) { .step-head { width: 660px; } } }
.step-tag{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--met);margin-bottom:16px;
}
.goal-grid{
  margin-top:30px;width:min(760px,94vw);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:12px;
}
@supports not (width: min(1px, 2px)) { .goal-grid { width: 94vw; }
  @media (min-width: 808.51px) { .goal-grid { width: 760px; } } }
.goal{
  position:relative;text-align:left;cursor:pointer;border:1px solid #2A2820;
  background:rgba(233,228,214,.018);padding:15px 16px 16px;border-radius:0;
  transition:border-color .3s,background .3s,transform .3s;
  color:var(--bone);font-family:'Inter',sans-serif;font-weight:300;
}
.goal:hover{border-color:var(--dim);background:rgba(233,228,214,.045)}
.goal:focus-visible{outline:1px solid var(--dim);outline-offset:3px}
.goal.on{border-color:var(--met);background:rgba(200,168,107,.07)}
.goal .dot{
  display:inline-block;width:11px;height:11px;border-radius:50%;
  margin-right:9px;vertical-align:-1px;box-shadow:0 0 10px currentColor;
}
.goal .gname{font-family:'Marcellus',serif;font-size:17px;letter-spacing:.1em}
.goal .gline{display:block;margin-top:7px;font-size:12.5px;color:var(--dim);line-height:1.65}
.goal .rank{
  position:absolute;top:-1px;right:-1px;background:var(--met);color:#0B0B0F;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.16em;padding:5px 8px;
}

.sig-name{
  font-family:'Marcellus',serif;font-size:clamp(22px,4.6vw,32px);letter-spacing:.1em;
  margin:12px 0 6px;line-height:1.4;
}
@supports not (width: min(1px, 2px)) { .sig-name { font-size: 22px; }
  @media (min-width: 478.26px) { .sig-name { font-size: 4.6vw; } }
  @media (min-width: 695.65px) { .sig-name { font-size: 32px; } } }
.sig-rare{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--met);
}
.sig-rows{margin-top:30px;border-top:1px solid var(--line)}
.sig-row{
  display:flex;gap:16px;align-items:flex-start;text-align:left;
  padding:20px 4px;border-bottom:1px solid var(--line);
}
.sig-swatch{
  flex-shrink:0;width:38px;height:38px;border:1px solid #3A382F;position:relative;
}
.sig-swatch span{position:absolute;inset:4px}
@supports not (inset: 0) { .sig-swatch span { top: 4px; right: 4px; bottom: 4px; left: 4px; } }
.sig-role{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--met);
}
.sig-title{font-family:'Marcellus',serif;font-size:17px;letter-spacing:.08em;margin:5px 0 6px}
.sig-cue{font-size:13.5px;color:var(--dim);line-height:1.85}
.sig-weight{font-size:12.5px;color:var(--faint);margin-top:6px;font-style:italic}

.backbtn{
  position:fixed;top:22px;right:26px;z-index:41;
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim);background:none;border:1px solid #2A2820;
  padding:10px 16px;cursor:pointer;transition:color .3s,border-color .3s;
}
.backbtn:hover{color:var(--bone);border-color:var(--dim)}
.backbtn[hidden]{display:none}

.spin-slow{transform-origin:350px 350px;animation:turn 60s linear infinite}
.spinB-slow{transform-origin:350px 350px;animation:turnB 60s linear infinite}
#sigAura{animation:auraBreathe 16s ease-in-out infinite;transform-origin:350px 350px}
@keyframes auraBreathe{0%,100%{opacity:.86}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .spin-slow,.spinB-slow,#sigAura{animation:none}
}

.sig-swatch span{box-shadow:0 0 18px currentColor}

.soundbtn{
  position:fixed;top:22px;right:120px;z-index:41;
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--met);background:none;border:1px solid #2A2820;
  padding:10px 14px;cursor:pointer;transition:color .3s,border-color .3s,opacity .3s;
}
.soundbtn:hover{border-color:var(--met)}
.soundbtn.off{color:var(--faint)}
.soundbtn[hidden]{display:none}
@media (max-width:560px){
  .backbtn{top:auto;bottom:18px;right:18px}
  .soundbtn{top:auto;bottom:18px;left:18px;right:auto}
}

.screen{align-items:center;text-align:center}
.screen > *{margin-left:auto;margin-right:auto}

.step-head,
.reveal,
.reading-body,
.why,
.facts,
.decode,
.goal-grid,
.dob-row,
.actions,
.keys,
.sig-rows{margin-left:auto;margin-right:auto}

.reading-body{text-align:center}
.reading-body p{text-align:center}
.why{text-align:left}
.why p{text-align:left}

.goal{text-align:center}
.goal .gname,
.goal .gline{text-align:center;display:block}

.step-head,
.next-note,
.core-line,
.coord-line,
.ring-name,
.ring-trait,
.path-tag,
.sig-name,
.sig-rare{text-align:center}

.facts{justify-content:center}
.keys{justify-content:center}
.opts{justify-content:center}
.actions{align-items:center}

.goal-grid{justify-items:stretch}

.goal-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
}
.goal-grid .goal{flex:0 1 214px;max-width:260px}
@media (max-width:520px){
  .goal-grid .goal{flex:1 1 100%;max-width:none}
}

svg text {
  text-rendering: geometricPrecision;
}
.spin, .spinB, .spin-slow, .spinB-slow,
#writing, #writingStat, #step6 {
  will-change: transform;
  transform-origin: 350px 350px;
}

.name-mode .btn { transition: border-color .2s, background .2s, color .2s; }
.name-mode .btn.on {
  border-color: var(--met);
  background: rgba(200,168,107,.10);
  color: var(--met-hi, #FFF6E0);
}
.name-mode .btn.on::after {
  content: ''; display:block; height:1px; margin-top:7px;
  background: var(--met); opacity:.85;
}
.name-form { display:flex; flex-direction:column; align-items:center; gap:18px; margin:6px auto 4px; }
.name-mode { display:flex; gap:10px; }
.name-fields { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

.name-fields[hidden] { display:none; }
.name-input {
  font-family:'Marcellus', Georgia, serif; font-size:17px; letter-spacing:.14em;
  text-align:center; text-transform:uppercase;
  background:#0C0C11; color:var(--bone);
  border:1px solid #2A2820; border-bottom-color:var(--met);
  padding:13px 18px; width:220px; outline:none;
}
.name-input.narrow { width:150px; letter-spacing:.28em; }
.name-input::placeholder { color:#5C5748; letter-spacing:.14em; text-transform:none;
  font-family:'Inter', sans-serif; font-size:14px; }
.name-input:focus { border-color:var(--met); box-shadow:0 0 0 1px rgba(232,201,138,.18); }
@media (max-width:520px){ .name-input{ width:min(78vw,260px); }
@supports not (width: min(1px, 2px)) { .name-input { width: 78vw; }
  @media (min-width: 333.33px) { .name-input { width: 260px; } } } }

.roll { width:min(560px,92vw); margin:4px auto 0; }
@supports not (width: min(1px, 2px)) { .roll { width: 92vw; }
  @media (min-width: 608.7px) { .roll { width: 560px; } } }
.roll-row {
  display:flex; align-items:baseline; gap:14px;
  padding:11px 2px; border-bottom:1px solid #191820;
}
.roll-row:last-child { border-bottom:0; }
.roll-k {
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:#6E6858; width:82px; flex:none;
}
.roll-v { font-family:'Marcellus',Georgia,serif; font-size:16px; color:var(--bone); }
.roll-v em { font-style:normal; color:var(--met); }
.roll-note { font-size:12.5px; color:var(--dim); margin-left:auto; text-align:right; }
@media (max-width:520px){
  .roll-row{ flex-wrap:wrap; gap:4px 12px; }
  .roll-note{ width:100%; text-align:left; margin-left:96px; }
}

.count-line {
  width:min(560px,92vw); margin:22px auto 0; text-align:center;
  font-size:13px; line-height:1.9; color:var(--dim);
}
@supports not (width: min(1px, 2px)) { .count-line { width: 92vw; }
  @media (min-width: 608.7px) { .count-line { width: 560px; } } }
.count-line b { color:var(--met); font-weight:400; }

.sealed { width:min(560px,92vw); margin:26px auto 0;
  border:1px solid #24222C; background:#0B0B10; padding:20px 22px; }
@supports not (width: min(1px, 2px)) { .sealed { width: 92vw; }
  @media (min-width: 608.7px) { .sealed { width: 560px; } } }
.sealed-head {
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--met); margin-bottom:12px;
}
.sealed-list { list-style:none; display:flex; flex-direction:column; gap:11px; }
.sealed-list li { font-size:13.5px; line-height:1.75; color:var(--dim); padding-left:16px; position:relative; }
.sealed-list li::before { content:''; position:absolute; left:0; top:9px;
  width:5px; height:5px; background:var(--met); transform:rotate(45deg); opacity:.8; }
.sealed-list b { color:var(--bone); font-weight:400; }

.actions-seal { gap:14px; flex-wrap:wrap; justify-content:center; }
.btn-seal { font-size:13px; letter-spacing:.2em; padding:16px 34px; }
.seal-note { text-align:center; font-size:11.5px; color:#6E6858; margin-top:12px; letter-spacing:.04em; }

.gallery-note {
  width:min(560px,92vw); margin:16px auto 0; text-align:center;
  font-size:12.5px; line-height:1.85; color:#6E6858;
}
@supports not (width: min(1px, 2px)) { .gallery-note { width: 92vw; }
  @media (min-width: 608.7px) { .gallery-note { width: 560px; } } }
.gallery-note a { color:var(--met); text-decoration:none; border-bottom:1px solid rgba(200,168,107,.4); }

.screen { min-height: 100vh; min-height: 100svh; min-height: 100dvh; }

@supports (padding: max(0px)) {
  .screen {
    padding-left: max(22px, env(safe-area-inset-left));
    padding-right: max(22px, env(safe-area-inset-right));
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
}

#s-intro .wordmark {
  font-size: clamp(13px, 3.4vw, 16px);
  letter-spacing: .62em;
  opacity: 0; animation: riseIn 1.2s .15s ease forwards;
}
@supports not (width: min(1px, 2px)) { #s-intro .wordmark { font-size: 13px; }
  @media (min-width: 382.35px) { #s-intro .wordmark { font-size: 3.4vw; } }
  @media (min-width: 470.59px) { #s-intro .wordmark { font-size: 16px; } } }
#s-intro .rule { opacity: 0; animation: riseIn 1.2s .3s ease forwards; }

#s-intro .h1 {
  font-size: clamp(28px, 6.4vw, 52px);
  line-height: 1.22;
  letter-spacing: .005em;
  max-width: 15ch;
  margin: 22px auto 0;
  opacity: 0; animation: riseIn 1.3s .45s ease forwards;
}
@supports not (width: min(1px, 2px)) { #s-intro .h1 { font-size: 28px; }
  @media (min-width: 437.5px) { #s-intro .h1 { font-size: 6.4vw; } }
  @media (min-width: 812.5px) { #s-intro .h1 { font-size: 52px; } } }
#s-intro .tagline {
  font-size: clamp(10px, 2.4vw, 11.5px);
  letter-spacing: .3em;
  margin-top: 24px;
  opacity: 0; animation: riseIn 1.3s .65s ease forwards;
}
@supports not (width: min(1px, 2px)) { #s-intro .tagline { font-size: 10px; }
  @media (min-width: 416.67px) { #s-intro .tagline { font-size: 2.4vw; } }
  @media (min-width: 479.17px) { #s-intro .tagline { font-size: 11.5px; } } }
#s-intro .note {
  max-width: 46ch;
  font-size: clamp(13.5px, 3.5vw, 15px);
  line-height: 1.95;
  margin: 26px auto 0;
  opacity: 0; animation: riseIn 1.3s .85s ease forwards;
}
@supports not (width: min(1px, 2px)) { #s-intro .note { font-size: 13.5px; }
  @media (min-width: 385.71px) { #s-intro .note { font-size: 3.5vw; } }
  @media (min-width: 428.57px) { #s-intro .note { font-size: 15px; } } }
#s-intro .note + .note { margin-top: 16px; animation-delay: 1s; }
#s-intro .micro { margin-top: 34px; opacity: 0; animation: riseIn 1.2s 1.15s ease forwards; }

#s-intro .btn {
  margin-top: 22px;
  padding: 19px 54px;
  font-size: 12px;
  letter-spacing: .28em;
  opacity: 0; animation: riseIn 1.2s 1.3s ease forwards;
  position: relative;
}

#s-intro .btn::after {
  content: ''; position: absolute; inset: -1px;
  border: 1px solid var(--met); opacity: 0;
  animation: pulseOut 3.6s 2.4s ease-out infinite;
  pointer-events: none;
}
@supports not (inset: 0) { #s-intro .btn::after { top: -1px; right: -1px; bottom: -1px; left: -1px; } }
@keyframes pulseOut {
  0%   { opacity: .5; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(1.06); }
  100% { opacity: 0;  transform: scale(1.06); }
}

#s-intro .under {
  margin-top: 30px; font-size: 12px; opacity: 0;
  animation: riseIn 1.2s 1.5s ease forwards;
}
#s-intro .under a {
  color: #6E6858; text-decoration: none;
  border-bottom: 1px solid rgba(110,104,88,.4); padding-bottom: 2px;
}
#s-intro .under a:hover { color: var(--met); border-bottom-color: var(--met); }

.btn, .goal, .name-input, .file-btn, .pace-pick .btn { min-height: 44px; }
.btn:focus-visible, .goal:focus-visible, .name-input:focus-visible,
a:focus-visible, button:focus-visible {
  outline: 1px solid var(--met); outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .spin, .spinB, .spin-slow, .spinB-slow, .breathe { animation: none !important; }
  #s-intro .wordmark, #s-intro .rule, #s-intro .h1, #s-intro .tagline,
  #s-intro .note, #s-intro .micro, #s-intro .btn, #s-intro .under { opacity: 1; }
}

.tal-wrap { width: min(560px, 88vw); max-width: 560px; }
@supports not (width: min(1px, 2px)) { .tal-wrap { width: 88vw; }
  @media (min-width: 636.36px) { .tal-wrap { width: 560px; } } }
@media (max-width: 420px) { .tal-wrap { width: 92vw; } }
@media (min-height: 900px) and (min-width: 900px) { .tal-wrap { width: min(620px, 60vh); }
@supports not (width: min(1px, 2px)) { .tal-wrap { width: 60vh; }
  @media (min-height: 1033.33px) { .tal-wrap { width: 620px; } } } }

@media (min-width: 1040px) and (min-height: 680px) {
  
  .screen.on:not(#s-intro):not(#s-summary) {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(40px, 5vw, 80px);
    max-width: 1240px;
    margin: 0 auto;
    text-align: left;
  }
@supports not (width: min(1px, 2px)) { .screen.on:not(#s-intro):not(#s-summary) { gap: 40px; }
  @media (min-width: 800px) { .screen.on:not(#s-intro):not(#s-summary) { gap: 5vw; } }
  @media (min-width: 1600px) { .screen.on:not(#s-intro):not(#s-summary) { gap: 80px; } } }
  .screen.on:not(#s-intro):not(#s-summary) .tal-wrap {
    flex: 0 0 auto;
    width: min(500px, 42vw);
    margin: 0;
  }
@supports not (width: min(1px, 2px)) { .screen.on:not(#s-intro):not(#s-summary) .tal-wrap { width: 42vw; }
  @media (min-width: 1190.48px) { .screen.on:not(#s-intro):not(#s-summary) .tal-wrap { width: 500px; } } }
  
  .screen.on:not(#s-intro):not(#s-summary) .step-side {
    flex: 1 1 440px;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
  }
  
  .screen.on:not(#s-intro):not(#s-summary) .step-head,
  .screen.on:not(#s-intro):not(#s-summary) .goal-grid,
  .screen.on:not(#s-intro):not(#s-summary) .name-form,
  .screen.on:not(#s-intro):not(#s-summary) .actions {
    margin-left: 0; margin-right: 0; width: 100%;
  }
  .screen.on:not(#s-intro):not(#s-summary) .actions { justify-content: flex-start; }
  .screen.on:not(#s-intro):not(#s-summary) .step-head { text-align: left; }
}

html, body { overflow-x: hidden; }
.screen, .screen > * { max-width: 100%; box-sizing: border-box; }
.step-head, .goal-grid, .actions, .name-form, .roll, .sealed, .count-line {
  max-width: min(100%, 560px);
}
@supports not (width: min(1px, 2px)) { .step-head, .goal-grid, .actions, .name-form, .roll, .sealed, .count-line { max-width: 560px; } }
.goal-grid { width: 100%; }

body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 46% at 50% 34%, rgba(200,168,107,.055), transparent 72%),
    radial-gradient(90% 70% at 50% 110%, rgba(70,60,110,.05), transparent 70%);
}
@supports not (inset: 0) { body::before { top: 0; right: 0; bottom: 0; left: 0; } }

body::after {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .028; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@supports not (inset: 0) { body::after { top: 0; right: 0; bottom: 0; left: 0; } }

.step-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase;
  color: #6E6858;
}
.ritual-line {
  font-family: 'Marcellus', Georgia, serif;
  font-size: clamp(21px, 4.6vw, 30px);
  line-height: 1.28; color: var(--bone);
  margin-top: 12px; letter-spacing: .01em;
}
@supports not (width: min(1px, 2px)) { .ritual-line { font-size: 21px; }
  @media (min-width: 456.52px) { .ritual-line { font-size: 4.6vw; } }
  @media (min-width: 652.17px) { .ritual-line { font-size: 30px; } } }
.step-head .sub {
  font-size: clamp(13px, 3.3vw, 14px); line-height: 1.9;
  color: var(--dim); margin-top: 14px; max-width: 46ch;
}
@supports not (width: min(1px, 2px)) { .step-head .sub { font-size: 13px; }
  @media (min-width: 393.94px) { .step-head .sub { font-size: 3.3vw; } }
  @media (min-width: 424.24px) { .step-head .sub { font-size: 14px; } } }

.goal {
  position: relative; padding: 17px 18px;
  background: #0B0B10; border: 1px solid #23212C;
  transition: border-color .25s, background .25s, transform .25s;
}
.goal:hover { border-color: #3A3646; background: #0E0E14; }
.goal.on {
  border-color: var(--met); background: rgba(200,168,107,.055);
  transform: translateY(-1px);
}
.goal.on::before {
  content: ''; position: absolute; left: -1px; top: 12%; bottom: 12%;
  width: 2px; background: var(--met);
}
.gname { font-family: 'Marcellus', Georgia, serif; font-size: 16px; color: var(--bone); }
.gline { display: block; font-size: 12.5px; color: var(--dim); line-height: 1.65; margin-top: 5px; }

.btn {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase;
  padding: 16px 34px; border: 1px solid var(--met);
  background: transparent; color: var(--met);
  transition: background .3s, color .3s, letter-spacing .3s;
}
.btn:hover:not(:disabled) {
  background: var(--met); color: #0A0A0C; letter-spacing: .3em;
}
.btn:disabled { opacity: .35; }
.btn-ghost { border-color: #33303C; color: #8A8474; }
.btn-ghost:hover:not(:disabled) { background: transparent; color: var(--met); border-color: var(--met); }

.tal-wrap { position: relative; }
.tal-wrap::before {
  content: ''; position: absolute; inset: -6%;
  border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(200,168,107,.10), transparent 66%);
  animation: caseGlow 11s ease-in-out infinite;
}
@supports not (inset: 0) { .tal-wrap::before { top: -6%; right: -6%; bottom: -6%; left: -6%; } }
@keyframes caseGlow {
  0%, 100% { opacity: .75; transform: scale(.985); }
  50%      { opacity: 1;   transform: scale(1.015); }
}

@media (prefers-reduced-motion: reduce) {
  .tal-wrap::before { animation: none; }
  body::after { display: none; }
}

:root {
  --s1: 6px;   --s2: 12px;  --s3: 18px;  --s4: 26px;
  --s5: 38px;  --s6: 56px;  --s7: 80px;
  --foot-h: 92px;
}

.screen {
  min-height: calc(100vh - var(--foot-h));
  min-height: calc(100svh - var(--foot-h));
  min-height: calc(100dvh - var(--foot-h));
  justify-content: center;
  padding-top: var(--s5);
  padding-bottom: var(--s4);
}
.site-foot {
  margin-top: 0;
  min-height: var(--foot-h);
  padding: var(--s4) var(--s3) var(--s5);
  display: flex; flex-wrap: wrap; gap: var(--s1) 0;
  align-items: center; justify-content: center;
}
.site-foot a { margin: 0 10px; padding: 4px 0; }

.btn { letter-spacing: .24em !important; }
.btn:hover:not(:disabled) { letter-spacing: .24em; }

.page-head { padding-bottom: var(--s3); margin-bottom: var(--s5); }
.page-wrap h1 { margin-top: var(--s3); }
.page-wrap h2 { margin: var(--s5) 0 var(--s2); }
.page-wrap h2:first-of-type { margin-top: var(--s4); }
.page-wrap p, .page-wrap li { margin-bottom: var(--s2); }
.page-wrap { padding: var(--s6) var(--s3) var(--s7); }
.page-foot { margin-top: var(--s6); padding-top: var(--s4); }

.step-head { margin-bottom: var(--s4); }
.goal-grid { gap: var(--s2); margin-bottom: var(--s4); }
.actions { margin-top: var(--s3); gap: var(--s2); }
.tal-wrap { margin-bottom: var(--s4); }

.reg-wrap { padding: var(--s6) var(--s3) var(--s7); }
.reg-head { margin-bottom: var(--s5); }
.reg-grid { gap: var(--s4); }
.reg-card { padding: var(--s3) var(--s3) var(--s4); }
.reg-actions { margin-top: var(--s6); }

.cert-wrap { padding: var(--s6) var(--s3) var(--s7); }
.cert-head { margin-bottom: var(--s5); }
.cert-facts { margin-top: var(--s4); }
.cert-reading { margin-top: var(--s5); }
.read { padding: var(--s4) 0; }
.cert-panel { margin-top: var(--s5); padding: var(--s3) var(--s4); }
.cert-actions { margin-top: var(--s5); }

a { transition: color .2s, border-color .2s; }
.under a, .gallery-note a, .cert-verify a, .page-wrap a {
  border-bottom: 1px solid rgba(200,168,107,.32); padding-bottom: 1px;
}
.under a:hover, .gallery-note a:hover, .cert-verify a:hover, .page-wrap a:hover {
  border-bottom-color: var(--met);
}

.page-wrap p, .page-wrap li, .read p, .reg-intro, .sub, .note { max-width: 68ch; }

@media (min-width: 1040px) and (min-height: 680px) {
  .screen.on:not(#s-intro):not(#s-summary) { padding-top: var(--s4); }
  .screen.on:not(#s-intro):not(#s-summary) .tal-wrap {
    margin-bottom: 0; width: min(460px, 38vw);
  }
@supports not (width: min(1px, 2px)) { .screen.on:not(#s-intro):not(#s-summary) .tal-wrap { width: 38vw; }
  @media (min-width: 1210.53px) { .screen.on:not(#s-intro):not(#s-summary) .tal-wrap { width: 460px; } } }
}

@media (max-width: 380px) {
  .ritual-line { font-size: 19px; }
  .goal-grid { grid-template-columns: 1fr; }
  .btn { padding: 15px 26px; font-size: 11px; }
  .site-foot a { margin: 0 7px; font-size: 11px; }
}

@media print {
  body::before, body::after { display: none; }
  body { background: #fff; color: #111; }
  .site-foot, .btn, .actions { display: none; }
  .page-wrap p, .page-wrap li { color: #333; }
  .page-wrap h1, .page-wrap h2 { color: #111; }
}

@media (max-width: 400px) {
  .name-mode { flex-wrap: wrap; justify-content: center; }
  .name-mode .btn { padding-left: 14px; padding-right: 14px; letter-spacing: .16em; }
}
@media (max-width: 340px) {
  .name-mode .btn { padding-left: 10px; padding-right: 10px; letter-spacing: .1em; }
  
  .name-mode .btn + .btn { margin-top: 12px; }
}