@view-transition{navigation: auto;
}*,*::before,*::after{box-sizing:border-box;padding:0;margin:0}:has(:target){scroll-behavior:smooth}img,svg,picture,canvas,audio,video{display:block;max-inline-size:100%}:root{--font-size-exp:1.125;--font-size-900:calc(1rem * pow(var(--font-size-exp),  8));--font-size-800:calc(1rem * pow(var(--font-size-exp),  5));--font-size-700:calc(1rem * pow(var(--font-size-exp),  3));--font-size-600:calc(1rem * pow(var(--font-size-exp),  2));--font-size-500:calc(1rem * pow(var(--font-size-exp),  1));--font-size-400:calc(1rem * pow(var(--font-size-exp),  0));--font-size-300:calc(1rem * pow(var(--font-size-exp), -1));--font-size-200:calc(1rem * pow(var(--font-size-exp), -2));--font-size-100:calc(1rem * pow(var(--font-size-exp), -3))}*{font-family:inherit}html{font-family:system-ui,sans-serif;line-height:1}h1{font-size:var(--font-size-900)}h2{font-size:var(--font-size-800)}h3{font-size:var(--font-size-700)}h4{font-size:var(--font-size-600)}h5{font-size:var(--font-size-500)}h6{font-size:var(--font-size-400)}h1,h2,h3,h4,h5,h6{text-wrap:balance}p,li,dd,td{line-height:1.5;text-wrap:pretty;max-inline-size:60ch}dt{font-weight:700}ol,ul{list-style-type:none}a{color:inherit;text-decoration:none}html{color-scheme:dark light}body{background-color:var(--color-bg-400);color:var(--color-fg-400)}@media(prefers-color-scheme:dark){:root{--color-bg-400:#111;--color-bg-700:#21252D;--color-fg-400:#DDD;--color-nav-bg:#21252D;--color-br-400:#DDD2}}@media(prefers-color-scheme:light){:root{--color-bg-400:#EEE;--color-bg-700:#CCC;--color-fg-400:#222;--color-nav-bg:#CCC;--color-br-400:#2222}}body{min-block-size:100svh;display:flex;flex-direction:column;main { flex: 1 0 0; }}h1{margin-block:1em .5em}main{max-inline-size:80ch}.content{h2, h3, h4, h5, h6 { margin-block: 2lh 1lh; } dt { margin-block: 2lh 0.5lh; } p, li, dd { margin-block: 0.5rem; } ul, ol { margin-inline-start: 1rem; list-style-type: revert; }}table{border-collapse:collapse;border:.15rem solid var(--color-br-400);margin-block:1rem 2rem;overflow-x:auto}thead,tbody tr:nth-of-type(even){background-color:var(--color-bg-700)}th,td{padding-inline:1rem;padding-block:.75rem;thead & { padding-block: 1.25rem; }}.spell,.skill{padding-inline:1rem;margin-block:1rem;border:.15rem solid var(--color-br-400);border-radius:1rem;background-color:var(--color-bg-700);h2 { font-size: 1.2rem; } h3 { margin-block: 1.5rem 0.5rem; font-size: 1.0rem; } dt { margin-block: 2lh 0.5lh; } dt:first-of-type { margin-block: 1lh 0.5lh; } p { margin-block: 0.5rem 1rem; } summary { padding-block: 0.75rem; display: grid; grid-template: "mana title" 1fr "mana keywords" auto / auto 1fr; align-items: center; column-gap: 0.75rem; .manaLevel { grid-area: mana; box-sizing: revert; width: 1rem; height: 1rem; padding: 0.5rem; border: 0.15rem solid var(--color-br-400); border-radius: 50%; text-align: center; line-height: 1; } .keywords { grid-area: keywords; display: flex; gap: 1rem; font-size: 0.9rem; opacity: 0.9; } }}.special{position:relative;& summary::after { content: "✪"; position: absolute; right: 1rem; font-size: 2rem; }}details[open]{padding-block-end:1lh}details[open] summary~*{animation:sweep .5s ease-in-out}@keyframes sweep{0%{opacity:0}100%{opacity:1}}header{display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:1.2rem;.logo { font-size: 1.8rem; font-weight: 700; text-wrap: balance; } input[type="checkbox"] + label { display: none; }}footer{text-align:center;margin-block:1rem}@media(max-width:720px){table{display:block}body{max-inline-size:calc(100% - 2rem);margin-inline:auto}body>header{margin-block:.5rem;input[type="checkbox"] + label { display: flex; flex-direction: column; row-gap: 0.2rem; z-index: 9; .icon-bar { width: 1.5rem; height: 0.2rem; background-color: var(--color-fg-400); transition: all 0.2s; } } input[type="checkbox"]:checked + label { .top-bar { transform: rotate(45deg); transform-origin: 10% 10%; } .mid-bar { opacity: 0; } .bot-bar { transform: rotate(-45deg); transform-origin: 10% 90%; } } nav { position: fixed; inset: 0 0 0 50%; display: flex; flex-direction: column; gap: 2rem; padding: 4rem 2rem; background-color: var(--color-nav-bg); z-index: 1; transform: translateX(100%); transition: transform 300ms ease-out; } input[type="checkbox"]:checked + label + nav { transform: translateX(0%); }}}@media(min-width:720px){body{display:grid;grid-template:"header main   ." 1fr "header footer ." auto/auto 1fr auto;gap:4rem;header { grid-area: header; } footer { grid-area: footer; } main { grid-area: main; } header { display: flex; flex-direction: column; justify-content: unset; gap: 3rem; padding-block: 2rem; background-color: var(--color-nav-bg); position: sticky; top: 0; height: 100svh; max-width: 20rem; padding-inline-start: 1rem; .logo { padding: 1rem 2rem; } nav { display: flex; flex-direction: column; width: 100%; gap: 1rem; ul { margin: 0; padding: 0; } li { list-style: none; padding: 1rem 2rem; border-radius: 100vw 0 0 100vw; a { display: block; height: 100%; width: 100%; } } li.active::before, li.active::after { --border-radius: 2rem; content: ''; position: absolute; width: var(--border-radius); height: var(--border-radius); right: 0; background-color: var(--color-nav-bg); } li.active::before { top: calc(var(--border-radius) * -1); border-radius: 0 0 100vw 0; box-shadow: calc(var(--border-radius) / 4) calc(var(--border-radius) / 4) 0 calc(var(--border-radius) / 4) var(--color-bg-400); } li.active::after { bottom: calc(var(--border-radius) * -1); border-radius: 0 100vw 0 0; box-shadow: calc(var(--border-radius) / 4) calc(var(--border-radius) / -4) 0 calc(var(--border-radius) / 4) var(--color-bg-400); } li.active { view-transition-name: activeNavTab; background-color: var(--color-bg-400); position: relative; } } }}}details{max-inline-size:60ch;p,dd,dt,li { max-inline-size: revert; }}