@font-face{font-family:"Unbounded";src:url(/static/display.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Manrope";src:url(/static/font.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/static/mono.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --bg:#0e0c1a;--panel:#171429;--panel-2:#1f1b36;--item:#26213f;--ink:#f1effa;--ink-2:#c9c5e0;--muted:#8f8aae;--line:#2c2749;
  --tear:#5ee6d0;--ember:#ff8a4c;--violet:#9d8cff;--link:#7fdcff;
  --glow:0 0 0 1px rgb(94 230 208/.18),0 18px 50px -20px rgb(94 230 208/.35);
  --shadow:0 20px 50px -24px rgb(0 0 0/.8);
  --max:1180px;
  --display:"Unbounded",system-ui,sans-serif;--sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
:root[data-theme=light]{--bg:#f4f2fb;--panel:#fff;--panel-2:#eeebf8;--item:#e4e0f5;--ink:#17142a;--ink-2:#3d3858;--muted:#6f6a8c;--line:#dcd7ee;--tear:#0e9e8a;--ember:#d9581b;--violet:#5b48d6;--link:#1764b8;--glow:0 0 0 1px rgb(14 158 138/.2),0 18px 50px -24px rgb(60 40 140/.25);--shadow:0 18px 40px -24px rgb(40 30 90/.3);color-scheme:light}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--bg:#f4f2fb;--panel:#fff;--panel-2:#eeebf8;--item:#e4e0f5;--ink:#17142a;--ink-2:#3d3858;--muted:#6f6a8c;--line:#dcd7ee;--tear:#0e9e8a;--ember:#d9581b;--violet:#5b48d6;--link:#1764b8;--glow:0 0 0 1px rgb(14 158 138/.2),0 18px 50px -24px rgb(60 40 140/.25);--shadow:0 18px 40px -24px rgb(40 30 90/.3);color-scheme:light}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:500 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(900px 500px at 85% -10%,rgb(157 140 255/.16),transparent 60%),radial-gradient(700px 400px at -10% 10%,rgb(94 230 208/.10),transparent 60%);background-repeat:no-repeat}
a{color:var(--link);text-underline-offset:3px}
img,svg{max-width:100%}
.wrap,main{max-width:var(--max);margin-inline:auto;padding-inline:20px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-top:1.8em}
h3{font-size:1.1rem}
.lead{font-size:1.15rem;color:var(--ink-2);max-width:62ch}
:focus-visible{outline:3px solid var(--tear);outline-offset:2px}
[hidden]{display:none!important}
kbd{font:500 .8em var(--mono);padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--panel-2)}

/* header */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;height:66px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 1.12rem/1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.logo b{font-weight:800;color:var(--tear);margin-left:.18em}
.logo img{filter:drop-shadow(0 0 10px rgb(94 230 208/.35))}
.top nav{display:flex;gap:2px;margin-left:auto}
.top nav a{color:var(--ink-2);text-decoration:none;font-weight:700;font-size:.92rem;padding:8px 12px;border-radius:9px}
.top nav a:hover,.top nav a[aria-current]{background:var(--panel-2);color:var(--ink)}
.theme-toggle{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);cursor:pointer}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .moon{display:none}
:root[data-theme=light] .theme-toggle .moon{display:block}:root[data-theme=light] .theme-toggle .sun{display:none}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .theme-toggle .moon{display:block}:root:not([data-theme=dark]) .theme-toggle .sun{display:none}}
@media (max-width:820px){.top nav{display:none}.theme-toggle{margin-left:auto}}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.8fr);gap:48px;align-items:center;padding:52px 0 30px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 .74rem/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--tear);margin:0 0 18px}
.tear{width:12px;height:16px;background:var(--tear);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;transform:rotate(180deg);clip-path:polygon(50% 0,100% 55%,100% 100%,0 100%,0 55%);box-shadow:0 0 14px var(--tear)}
.hero h1{font-size:clamp(2.4rem,5.6vw,4.4rem);font-weight:800;letter-spacing:-.035em}
.hero h1 em{display:block;font-style:normal;background:linear-gradient(90deg,var(--tear),var(--violet) 60%,var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-tiers{display:grid;gap:7px;padding:16px;border-radius:18px;background:var(--panel);box-shadow:var(--glow);transform:rotate(2deg)}
.hero-tiers div{display:flex;gap:6px;align-items:center}
.hero-tiers b{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:9px;background:var(--c);color:#14111f;font:800 1.1rem var(--display)}
.hero-tiers i{width:46px;height:46px;border-radius:9px;background:var(--item);opacity:0;animation:pop .45s cubic-bezier(.3,1.4,.5,1) forwards}
.hero-tiers i.w{width:64px;background:linear-gradient(135deg,var(--item),color-mix(in srgb,var(--tear) 30%,var(--item)))}
.hero-tiers div:nth-child(1) i{animation-delay:.2s}.hero-tiers div:nth-child(2) i{animation-delay:.45s}.hero-tiers div:nth-child(3) i{animation-delay:.7s}.hero-tiers div:nth-child(4) i{animation-delay:.95s}.hero-tiers div:nth-child(5) i{animation-delay:1.2s}
.hero-tiers i:nth-of-type(2){animation-delay:inherit}
@keyframes pop{from{opacity:0;transform:translateY(-14px) scale(.8)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero-tiers i{animation:none;opacity:1}}
@media (max-width:820px){.hero{grid-template-columns:1fr;padding-top:30px}.hero-tiers{display:none}}

/* page heads */
.page-head{padding:40px 0 12px}
.crumbs{font-size:.86rem;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--ink);text-decoration:underline}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font:700 .92rem var(--sans);border:1px solid transparent;background:var(--tear);color:#08201c;border-radius:11px;padding:10px 16px;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:var(--panel-2);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--muted)}
.btn.small{padding:8px 13px;font-size:.86rem}
.btn.file{position:relative;overflow:hidden}
.btn.file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.link-btn{background:none;border:0;color:var(--tear);font:700 .92rem var(--sans);cursor:pointer;padding:4px 0}

/* tier list maker */
.maker{margin-top:18px;padding:18px;border-radius:20px;background:var(--panel);box-shadow:var(--glow)}
.maker-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}
.maker-title{flex:1 1 260px;min-width:0;border:0;border-bottom:2px dashed var(--line);background:none;color:var(--ink);font:700 1.35rem var(--display);letter-spacing:-.02em;padding:6px 2px;outline:none}
.maker-title:focus{border-bottom-color:var(--tear)}
.maker-actions{display:flex;flex-wrap:wrap;gap:8px}
.tiers{display:grid;gap:6px}
.tier{display:grid;grid-template-columns:110px 1fr auto;min-height:96px;border-radius:12px;background:var(--panel-2);overflow:hidden}
.tier-label{position:relative;display:grid;place-items:center;background:var(--c);color:#14111f;padding:8px}
.tier-name{background:none;border:0;color:inherit;font:800 1.45rem/1.1 var(--display);cursor:text;text-align:center;overflow-wrap:anywhere;padding:4px}
.tier-dot{position:absolute;right:6px;bottom:6px;width:16px;height:16px;border-radius:50%;border:2px solid rgb(20 17 31/.55);background:conic-gradient(#ff6b6b,#ffd43b,#a9e34b,#4fd1c5,#74c0fc,#9775fa,#ff6b6b);cursor:pointer;opacity:.75}
.tier-dot:hover{opacity:1}
.tier-items{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;padding:7px;min-height:96px}
.tier-ctl{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:4px 6px;border-left:1px solid var(--line)}
.tier-ctl button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:.72rem;padding:3px 6px;border-radius:5px}
.tier-ctl button:hover{color:var(--ink);background:var(--item)}
.drop.over{outline:2px dashed var(--tear);outline-offset:-4px}
.item{width:82px;height:82px;display:grid;place-items:center;text-align:center;padding:6px;border-radius:9px;background:var(--item);color:var(--ink);font:700 .78rem/1.15 var(--sans);cursor:grab;user-select:none;touch-action:none;overflow:hidden;overflow-wrap:anywhere;box-shadow:inset 0 0 0 1px rgb(255 255 255/.04);transition:transform .12s}
.item:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--tear)}
.item.img{padding:0;background:#000}
.item img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.item.dragging{opacity:.25}
.item.ghost{position:fixed;left:0;top:0;z-index:100;pointer-events:none;box-shadow:0 18px 40px rgb(0 0 0/.5),0 0 0 2px var(--tear);cursor:grabbing}
.drop-mark{width:4px;height:82px;border-radius:2px;background:var(--tear);box-shadow:0 0 10px var(--tear)}
.row-tools{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin:10px 2px 0}
.hint{font-size:.84rem;color:var(--muted)}
.pool-wrap{margin-top:16px;border-top:1px dashed var(--line);padding-top:14px}
.pool-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px}
.pool-head h2{margin:0 auto 0 0;font-size:1.05rem}
.pool-head .count{color:var(--muted);font-weight:500}
.add-text{display:flex;gap:6px;flex:1 1 300px;max-width:440px}
.add-text input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--ink);font:600 .92rem var(--sans);padding:9px 12px;outline:none}
.add-text input:focus{border-color:var(--tear)}
.pool{display:flex;flex-wrap:wrap;gap:6px;min-height:96px;padding:8px;border-radius:12px;background:var(--bg)}
.pool-empty{color:var(--muted);font-size:.9rem;margin:8px 2px 0}
@media (max-width:600px){.maker{padding:12px;margin-inline:-8px}.tier{grid-template-columns:64px 1fr auto}.tier-name{font-size:1.1rem}.item{width:66px;height:66px;font-size:.7rem}.drop-mark{height:66px}.tier,.tier-items{min-height:78px}.hint{display:none}}

/* templates */
.templates{margin-top:52px}
.templates h2{margin-top:0}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.tcard{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:14px;background:var(--panel);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s,border-color .15s}
.tcard:hover{transform:translateY(-3px);border-color:var(--tear);box-shadow:var(--glow)}
.tcard strong{font:700 1.02rem var(--display);letter-spacing:-.01em}
.tcard small{color:var(--muted);font-size:.85rem;line-height:1.45}
.tcard em{font:500 .78rem var(--mono);color:var(--tear);font-style:normal;margin-top:auto;padding-top:6px}
.mini{display:grid;gap:3px;margin-bottom:8px}
.mini i{height:7px;border-radius:3px;background:var(--item)}
.mini i:nth-child(1){width:80%;background:linear-gradient(90deg,#ff6b6b 18%,var(--item) 18%)}.mini i:nth-child(2){width:62%;background:linear-gradient(90deg,#ffa94d 23%,var(--item) 23%)}.mini i:nth-child(3){width:92%;background:linear-gradient(90deg,#ffd43b 16%,var(--item) 16%)}.mini i:nth-child(4){width:45%;background:linear-gradient(90deg,#4fd1c5 32%,var(--item) 32%)}
.tgrid.big{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-top:18px}

/* countdown */
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0 8px}
.countdown div{display:flex;flex-direction:column;align-items:center;padding:22px 8px;border-radius:18px;background:var(--panel);box-shadow:var(--glow)}
.countdown b{font:800 clamp(2.4rem,7vw,5rem)/1 var(--display);letter-spacing:-.04em;background:linear-gradient(180deg,#ffd6a8,var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.countdown span{font:500 .78rem var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-top:8px}
.countdown .out{grid-column:1/-1;font:700 1.5rem var(--display);text-align:center}
.cd-note{text-align:center;color:var(--tear);font-weight:700;min-height:1.6em}
@media (max-width:520px){.countdown{gap:6px}.countdown div{padding:14px 4px;border-radius:12px}}

/* Breath of Fire timeline */
.timeline{position:relative;display:grid;gap:14px;margin-top:20px;padding-left:28px}
.timeline::before{content:"";position:absolute;left:8px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--tear),var(--violet),var(--ember))}
.timeline article{position:relative;padding:18px 20px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.timeline article::before{content:"";position:absolute;left:-26px;top:24px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:3px solid var(--tear);box-shadow:0 0 10px var(--tear)}
.timeline .yr{font:500 .8rem var(--mono);color:var(--tear);letter-spacing:.1em}
.timeline h2{margin:4px 0 4px;font-size:1.3rem}
.timeline .meta{font-size:.86rem;color:var(--muted);margin:0 0 8px}
.timeline p{margin:0;color:var(--ink-2)}

/* quiz */
.quiz-progress{position:sticky;top:66px;z-index:5;display:flex;align-items:center;gap:12px;margin:14px 0;padding:8px 0;background:var(--bg)}
.quiz-progress::before{content:"";position:absolute;left:0;right:70px;height:8px;border-radius:4px;background:var(--panel-2)}
.quiz-progress i{position:relative;display:block;height:8px;width:0;border-radius:4px;background:linear-gradient(90deg,var(--tear),var(--violet));transition:width .3s;flex:none;max-width:calc(100% - 70px)}
.quiz-progress span{margin-left:auto;font:500 .85rem var(--mono);color:var(--muted)}
.quiz{display:grid;gap:14px;max-width:820px}
.q{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:16px 18px;margin:0;transition:border-color .3s}
.q.need{border-color:var(--ember)}
.q legend{font:700 1.02rem var(--display);padding:0 6px;letter-spacing:-.01em}
.q legend b{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:8px;border-radius:8px;background:var(--panel-2);color:var(--tear);font:500 .85rem var(--mono)}
.q label{position:relative;display:block;margin-top:8px;cursor:pointer}
.q input{position:absolute;opacity:0}
.q span{display:block;padding:11px 14px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2);font-weight:600;transition:border-color .12s,background .12s}
.q label:hover span{border-color:var(--muted)}
.q input:checked+span{border-color:var(--tear);background:color-mix(in srgb,var(--tear) 14%,var(--panel-2))}
.q input:focus-visible+span{outline:3px solid var(--tear);outline-offset:2px}
.quiz-actions{display:flex;gap:10px}
.result-card{max-width:820px;margin-top:22px;padding:26px;border-radius:20px;background:radial-gradient(circle at 90% 0,rgb(157 140 255/.25),transparent 55%),var(--panel);box-shadow:var(--glow)}
.result-card h2{margin:4px 0 10px;font-size:clamp(2rem,5vw,3rem);background:linear-gradient(90deg,var(--tear),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.result-card .eyebrow{margin:0}
.result-card .again{color:var(--ink-2);border-top:1px dashed var(--line);padding-top:14px}

/* prose */
.prose{max-width:780px;margin-top:40px}
.prose p,.prose li{color:var(--ink-2)}
.prose strong{color:var(--ink)}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:6px 0}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:.94rem;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel);margin:14px 0 18px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line)}
thead th{background:var(--panel-2);font:500 .74rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}
.prose table{display:block;overflow-x:auto}
@media (min-width:700px){.prose table{display:table}}
.steps{counter-reset:s;list-style:none;padding-left:0!important}
.steps>li{counter-increment:s;position:relative;padding-left:48px;margin:0 0 16px}
.steps>li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:10px;background:var(--panel-2);color:var(--tear);display:grid;place-items:center;font:500 .9rem var(--mono);box-shadow:inset 0 0 0 1px var(--line)}
.faq{display:grid;gap:10px}
.faq details{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:0 18px}
.faq summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font:500 1.2rem var(--mono);color:var(--tear)}
.faq details[open] summary::after{content:"–"}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin:0 0 14px}
.updated{font-size:.85rem;color:var(--muted);margin-top:28px}

/* footer */
.bottom{margin-top:90px;border-top:1px solid var(--line);background:var(--panel);padding:40px 0 28px;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:280px 1fr;gap:32px;margin-bottom:18px}
.foot-grid p{color:var(--muted);margin:12px 0 0}
.foot-links{list-style:none;margin:0;padding:0;columns:3 180px;column-gap:24px}
.foot-links li{margin:0 0 6px;break-inside:avoid}
.foot-links a{color:var(--ink-2);text-decoration:none}.foot-links a:hover{color:var(--tear)}
.fine{color:var(--muted);max-width:90ch;font-size:.85rem}
.fine a{color:var(--muted)}
@media (max-width:700px){.foot-grid{grid-template-columns:1fr}}
.to-top{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;box-shadow:var(--shadow);z-index:20}
.to-top svg{width:22px;height:22px}