:root{color-scheme:light;--ink:#201D24;--muted:#625D69;--paper:#F5F3F7;--purple:#E0CEE9;--pink:#F4C2F4;--green:#BEE0C6;--blue:#B1DEED;--yellow:#E4D5A4;--gold:#F4D095;--red:#F4C6C6;--line:#e7e2eb;--accent:var(--purple);font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;color:var(--ink);background:#fff;font-size:16px;line-height:1.65}
*{box-sizing:border-box}body{margin:0;background:#fff}a{color:inherit}button,input,select{font:inherit}a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid #625D69;outline-offset:3px}[hidden]{display:none!important}
.shell{max-width:1160px;padding:0 40px;margin:auto}main{padding:28px 0 60px}
/* Series accents: one palette colour per series, applied through --accent. */
.s-vanilla{--accent:var(--purple)}.s-event{--accent:var(--pink)}.s-science{--accent:var(--blue)}.s-myth{--accent:var(--yellow)}.s-norse{--accent:var(--green)}.s-history{--accent:var(--red)}.gift{--accent:var(--gold)}.item{--accent:var(--blue)}

.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:12px;min-height:300px;padding:36px 0 36px 44px;margin-bottom:26px;border-radius:20px;background:linear-gradient(135deg,#F5F3F7 0%,#EEE5F3 100%);overflow:hidden;isolation:isolate}
.hero::after{content:"";position:absolute;inset:auto -60px -120px auto;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(224,206,233,.9),rgba(224,206,233,0) 70%);z-index:-1}
.hero-copy{position:relative;z-index:1;min-width:0}.eyebrow{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.08em;color:var(--muted);margin:0 0 10px}
h1{font-size:clamp(2rem,4.4vw,3rem);line-height:1.2;margin:0;font-weight:800;letter-spacing:.03em}
.lede{max-width:34em;margin:14px 0 0;color:var(--muted)}
.identity{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;padding:5px 12px;border-radius:999px;background:#fff;font-size:.85rem;font-weight:600;box-shadow:0 1px 0 var(--line)}
.identity::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}
.stats{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0}.stats div{min-width:104px;padding:10px 16px;border-radius:12px;background:rgba(255,255,255,.78)}
.stats dt{font-size:.78rem;color:var(--muted)}.stats dd{margin:0;font-size:1.5rem;font-weight:800;line-height:1.3}
.hero-art{display:block;width:118%;max-width:none;height:auto;margin:-24px -14% -48px -4%;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}

.gate{padding:34px;border:1px solid var(--line);border-top:4px solid var(--purple);border-radius:16px;max-width:620px}.gate h2{font-size:1.3rem;margin:0 0 8px}.gate p{color:var(--muted);margin:0 0 20px}
.primary-link,.callout button{display:inline-block;padding:10px 20px;background:var(--purple);border:0;border-radius:9px;text-decoration:none;font-weight:700;color:var(--ink);cursor:pointer}

.callout{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;margin:0 0 20px;border-radius:16px;background:linear-gradient(120deg,rgba(190,224,198,.55),rgba(190,224,198,.18));border:1px solid var(--green)}
.callout h2{font-size:1.2rem;margin:0}.callout p{margin:2px 0 0;font-size:.92rem}.callout .callout-tag{display:inline-block;margin:0 0 4px;padding:1px 8px;border-radius:5px;background:var(--green);font-size:.75rem;font-weight:700}.callout button{flex:0 0 auto;background:var(--green)}

.items{border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:14px;padding:12px 22px;margin:0 0 20px}.items>summary{font-size:1rem;font-weight:700;color:var(--ink);padding:6px 0}.items[open]>summary{margin-bottom:14px}.items .entries{padding-bottom:10px}
.entry.item .description{margin:10px 0 6px}.usage{font-size:.9rem;color:var(--muted);margin:0 0 14px}.entry.item .equipment{margin:0}

.controls{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;background:var(--paper);padding:20px 22px;border-radius:16px}
.controls label{font-size:.875rem;font-weight:600;display:grid;gap:8px;min-width:0}
input,select{width:100%;min-height:46px;border:1px solid #d4cddc;background:#fff;border-radius:9px;padding:9px 12px;color:var(--ink);font-size:1rem}

.series{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer;font-size:.92rem;font-weight:600;white-space:nowrap}
.chip::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:inset 0 0 0 1px rgba(32,29,36,.08)}
.chip:not([class*=" s-"])::before{display:none}
.chip .count{font-size:.78rem;font-weight:600;color:var(--muted);background:var(--paper);border-radius:999px;padding:0 8px}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}.chip[aria-pressed="true"] .count{background:rgba(255,255,255,.7);color:var(--ink)}
.chip:not([class*=" s-"])[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.series-intro{margin:16px 0 0;padding:16px 20px;border-radius:14px;background:linear-gradient(90deg,var(--accent),rgba(255,255,255,0) 85%)}
.series-intro h2{font-size:1.05rem;margin:0}.series-intro p{margin:2px 0 0;font-size:.92rem}
.catalog-meta{display:flex;justify-content:space-between;gap:16px;margin:20px 0 14px;font-size:.875rem;color:var(--muted)}.catalog-meta p{margin:0}

.entries{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;align-items:start}
.entry{position:relative;border:1px solid var(--line);border-radius:16px;padding:20px 22px 18px;min-width:0;background:#fff;overflow:hidden}
.entry::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--accent)}
.entry-heading{display:flex;gap:14px;align-items:center}
.sigil{flex:0 0 auto;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--accent);box-shadow:inset 0 -3px 0 rgba(32,29,36,.08)}
.sigil::after{content:"";width:30%;height:30%;border-radius:2px;background:rgba(255,255,255,.75);transform:rotate(45deg)}
.entry-title{display:grid;gap:4px;min-width:0;flex:1}
.entry h2{font-size:1.15rem;line-height:1.4;margin:0;overflow-wrap:anywhere}
.badge{justify-self:start;font-size:.75rem;background:var(--paper);border-left:3px solid var(--accent);border-radius:4px;padding:1px 8px;color:var(--muted)}
.max-level{align-self:flex-start;font-size:.75rem;font-weight:700;color:var(--muted);white-space:nowrap;letter-spacing:.04em}
.description{margin:14px 0 12px;white-space:pre-line}
.equipment{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.85rem;color:var(--muted);margin:0 0 14px}
.equipment b,.obtain b,.effect b{font-weight:700;color:var(--ink);margin-right:4px}
.slot{padding:1px 9px;border-radius:999px;background:var(--paper);color:var(--ink)}
.levels{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px 12px;margin:0 0 14px;padding:12px 14px;border-radius:12px;background:var(--paper)}
.levels li{display:grid;grid-template-columns:auto 1fr;row-gap:4px;column-gap:8px;align-items:baseline;font-size:.8rem}
.levels b{font-size:.75rem;color:var(--muted);letter-spacing:.04em}
.levels .value{text-align:right;font-weight:700;color:var(--ink)}
.meter{grid-column:1/-1;display:block;height:6px;border-radius:9px;background:#fff;overflow:hidden}
.meter span{display:block;height:100%;border-radius:inherit;background:var(--accent);filter:saturate(1.4) brightness(.9)}
.obtain{margin:0 0 14px;padding:10px 14px;border-radius:12px;border:1px dashed var(--accent);font-size:.88rem}
.obtain ul{margin:4px 0 0;padding-left:1.2em}.obtain li+li{margin-top:2px}
.effect{margin:-4px 0 14px;padding:10px 14px;border-radius:12px;background:var(--paper);border-left:3px solid var(--accent);font-size:.92rem}
details{border-top:1px solid var(--line);padding-top:10px}summary{cursor:pointer;font-size:.88rem;padding:4px 0;color:var(--muted)}details[open] summary{margin-bottom:10px}
.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.85rem}th,td{text-align:left;padding:8px 7px;border-bottom:1px solid var(--line)}th{background:var(--paper);font-weight:600;white-space:nowrap}
.footnote{font-size:.875rem;color:var(--muted);margin:28px 0 0}.empty{padding:32px;text-align:center;background:var(--paper);border-radius:16px}
footer{border-top:1px solid var(--line);padding:24px 0 32px;font-size:.875rem;color:var(--muted);display:flex;justify-content:space-between;gap:15px}

@media(prefers-reduced-motion:no-preference){input,select,.chip,.entry,.callout button,.primary-link{transition:background-color .15s,border-color .15s,box-shadow .2s,transform .2s}.entry:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(32,29,36,.08)}}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding:28px 24px 0;min-height:0}.hero-art{width:min(520px,100%);margin:-8px auto -30px}}
@media(max-width:720px){.shell{padding:0 16px}main{padding-top:16px}.hero{border-radius:16px;padding:24px 20px 0;margin-bottom:20px}.hero-art{width:86%;margin:-8px auto -22px}.stats{gap:8px}.stats div{flex:1;min-width:0;padding:8px 10px}.stats dd{font-size:1.25rem}
.callout{flex-direction:column;align-items:flex-start;padding:18px}.callout button{width:100%}
.controls{grid-template-columns:1fr;padding:16px;gap:12px}
.series{flex-wrap:nowrap;overflow-x:auto;margin:14px -16px 0;padding:2px 16px 6px;scrollbar-width:none}.series::-webkit-scrollbar{display:none}
.catalog-meta{flex-direction:column;gap:2px}.entries{grid-template-columns:1fr}.entry{padding:18px}.sigil{width:42px;height:42px}
.items{padding:10px 16px}.gate{padding:24px}footer{flex-direction:column;gap:2px}}