:root{--bg: #f7f7f7;--bg-card: #ffffff;--bg-dim: rgba(128, 128, 128, .12);--border: rgba(0, 0, 0, .07);--text: #111111;--text-2: #666666;--accent: #6c5ce7;--accent-mid: rgba(108, 92, 231, .4);--accent-dim: rgba(108, 92, 231, .08);--font-body: 16px;--font-section-title: 20px;--font-title: 50px;--font-subtitle: 14px;--font-weight-bold: 600;--font-title-spacing: -.02em;--font: "Inter", system-ui, -apple-system, sans-serif;--s1: .5rem;--s2: 1rem;--s3: 1.5rem;--s4: 2rem;--s6: 3rem;--s8: 4rem;--r: 10px;--nav-h: 52px;--max-w: 1100px;--icon-size: 30px;--img-size: 18px;--ease: cubic-bezier(.16, 1, .3, 1);--t: .15s ease}[data-theme=dark]{--bg: #080808;--bg-card: #101010;--bg-dim: rgba(128, 128, 128, .12);--border: rgba(255, 255, 255, .06);--text: #f0f0f0;--text-2: #888;--accent: #8b7cf8;--accent-mid: rgb(139, 124, 248, .4);--accent-dim: rgb(139, 124, 248, .08)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scrollbar-gutter:stable}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .2s ease,color .2s ease;min-height:100vh}a{color:inherit;text-decoration:none}ul{list-style:none}img{display:block;max-width:100%}button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r)}::-webkit-scrollbar{width:0}#app{min-height:calc(100vh - var(--nav-h))}.view{max-width:none;padding:var(--s2);animation:view-enter .22s var(--ease) both;position:relative}.view__bg{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:url(/d20-pattern.svg);background-repeat:repeat;background-size:600px;z-index:0}@keyframes view-enter{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}html{scroll-behavior:auto}}.site-header{position:sticky;top:0;z-index:100;height:var(--nav-h);background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--border);transition:background-color .2s ease,border-color .2s ease}.header{display:flex;align-items:center;justify-content:space-between;max-width:var(--max-w);margin:0 auto;padding:0 var(--s4);height:100%}.logo{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.logo:hover{opacity:.65}.logo img.rolling{animation:d20-roll .6s var(--ease)}@keyframes d20-roll{0%{transform:rotate(0) scale(1)}25%{transform:rotate(160deg) scale(1.25)}65%{transform:rotate(340deg) scale(.9)}to{transform:rotate(360deg) scale(1)}}.logo__name{font-size:var(--font-section-title);font-weight:var(--font-weight-bold);letter-spacing:var(--font-title-spacing);color:var(--text)}.nav__links{display:flex;align-items:center;gap:2px}.nav__links a{padding:.4rem .75rem;border-color:var(--border);border-radius:var(--r);font-size:var(--font-body);font-weight:500;color:var(--text);transition:color var(--t),background var(--t)}.nav__links a:hover{color:var(--text-2)}.nav__links a.current-view{color:var(--accent)}.header__controls{display:flex;align-items:center;gap:2px}.menu-toggle{display:none;align-items:center;justify-content:center;width:var(--icon-size);height:var(--icon-size);border-radius:var(--r);color:var(--text-2);transition:color var(--t),background var(--t)}.menu-toggle:hover{color:var(--text);background:var(--bg-dim)}.menu-toggle svg{width:var(--img-size);height:var(--img-size)}.icon-x{display:none}#main-nav.open~* .icon-menu,.menu-toggle[aria-expanded=true] .icon-menu{display:none}.menu-toggle[aria-expanded=true] .icon-x{display:block}.theme-toggle{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--icon-size);height:var(--icon-size);border-radius:var(--r);color:var(--text-2);transition:color var(--t),background var(--t)}.theme-toggle:hover{color:var(--text);background:var(--bg-dim)}.theme-toggle svg{width:var(--img-size);height:var(--img-size)}.icon-moon{display:none}.icon-sun,[data-theme=light] .icon-moon{display:block}[data-theme=light] .icon-sun{display:none}@media (max-width: 768px){.menu-toggle{display:flex}#main-nav{display:none;position:absolute;top:var(--nav-h);left:0;right:0;z-index:99;background:color-mix(in srgb,var(--bg) 96%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--border);padding:0 var(--s2) var(--s2);grid-template-rows:0fr;transition:grid-template-rows .22s var(--ease);overflow:hidden}#main-nav.open{display:grid;grid-template-rows:1fr}#main-nav>ul{min-height:0;overflow:hidden}.nav__links{flex-direction:column;gap:2px;padding-top:var(--s1)}.nav__links a{display:block;padding:.65rem .75rem;font-size:var(--font-body);border-radius:var(--r)}}.hero{max-width:var(--max-w);margin:0 auto;padding-left:var(--s6);padding-right:var(--s6);position:relative;z-index:10}.hero__title{font-size:var(--font-title);vertical-align:baseline;font-weight:var(--font-weight-bold);letter-spacing:var(--font-title-spacing);line-height:1.1;margin-bottom:var(--s2);padding-top:var(--s8)}.hero__subtitle{font-size:var(--font-body);color:var(--text-2);line-height:1.65;margin-bottom:var(--s2)}.hero__buttons{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s4)}.hero__button{display:inline-flex;align-items:center;padding:.7rem 1.4rem;border-color:var(--accent);border-radius:var(--r);background:var(--accent);color:var(--bg);font-size:var(--font-body);font-weight:var(--font-weight-bold);letter-spacing:var(--font-title-spacing);transition:filter var(--t)}.hero__button:hover{color:var(--text);background:var(--accent-mid)}.hero__chip{padding:.3rem .75rem;border-radius:var(--r);background:var(--accent-dim);color:var(--text);font-size:var(--font-body);margin-bottom:var(--s1)}@media (max-width: 768px){.hero{padding-left:var(--s2);padding-right:var(--s2)}.hero__buttons{flex-direction:column}.hero__button{display:inline-block;margin-right:var(--s1);margin-bottom:var(--s1)}.hero__chip{display:inline-block}.view__bg{background-size:300px}}.section{margin-bottom:var(--s6)}.section .title{font-size:var(--font-section-title);font-weight:var(--font-weight-bold);letter-spacing:var(--font-title-spacing);text-transform:uppercase;color:var(--accent);margin-bottom:var(--s1);display:flex;gap:var(--s1)}.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;gap:1px;position:relative;z-index:1}.listItem{display:flex;align-items:center;gap:var(--s3);padding:var(--s1);margin:var(--s1);background:var(--bg-card);cursor:pointer;transition:background var(--t);position:relative;outline-offset:-2px;border-style:solid;border-color:var(--bg-card);border-width:1px;border-radius:var(--r)}.listItem:hover,.listItem:active{background:var(--bg-dim);border-color:var(--accent)}.card__thumb{flex-shrink:0;width:46px;height:46px;border-radius:var(--r);overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--accent-dim)}.card__thumb img{width:100%;height:100%;object-fit:cover}.card__thumb svg{width:var(--img-size);height:var(--img-size);color:var(--accent);opacity:.65}.card__text{flex:1;min-width:0;overflow:hidden}.card__title{font-size:var(--font-body);font-weight:var(--font-weight-bold);color:var(--text);overflow:hidden;transition:color var(--t)}.listItem:hover .card__title{color:var(--accent)}.card__subtitle{font-size:var(--font-subtitle);color:var(--text-2);margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.icon-button{display:flex;align-items:center;justify-content:center;width:var(--icon-size);height:var(--icon-size);border-radius:var(--r);color:var(--text-2);transition:color var(--t),background var(--t)}.icon-button:hover{color:var(--text);background:var(--bg-card)}.icon-button svg{width:var(--img-size);height:var(--img-size)}body.modal-open{overflow:hidden}.modal{position:fixed;top:0;right:0;bottom:0;left:0;margin:auto;width:min(95vw,900px);height:min(90vh,1000px);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);padding:0;overflow:hidden;color:var(--text)}.modal[open]{display:grid;grid-template-rows:auto 1fr;animation:modal-enter .22s var(--ease) both}.modal::backdrop{background:var(--bg-dim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}@keyframes modal-enter{0%{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.modal__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:0 .875rem;height:44px;border-bottom:1px solid var(--border);flex-shrink:0}.modal__title{font-size:var(--font-body);font-weight:var(--font-weight-bold);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:var(--icon-size);height:var(--icon-size);border-radius:var(--r);background:transparent;color:var(--text);transition:color var(--t),background var(--t)}.modal__close:hover{color:var(--text);background:var(--bg-dim)}.modal__close svg{width:var(--img-size);height:var(--img-size)}.modal__content{min-height:0;overflow:hidden}.modal__content--image{display:flex;align-items:center;justify-content:center;background:#000}.dialog-image{max-width:100%;max-height:100%;object-fit:contain}.dialog-pdf{display:block;width:100%;height:100%;border:none}.modal__content--error{display:flex;align-items:center;justify-content:center}.dialog-error{display:flex;flex-direction:column;align-items:center;gap:var(--s2);text-align:center;padding:var(--s4);max-width:320px}.dialog-error__icon{display:flex;align-items:center;justify-content:center;width:var(--icon-size);height:var(--icon-size);border-radius:var(--r);background:#ffffff0a;color:var(--text-2)}.dialog-error__icon svg{width:var(--img-size);height:var(--img-size)}.dialog-error__title{font-size:var(--font-section-title);font-weight:var(--font-weight-bold);color:var(--text)}.dialog-error__text{font-size:var(--font-body);color:var(--text-2);line-height:1.5}@media (max-width: 768px){.list{grid-template-columns:1fr}.listItem{gap:var(--s2);padding-left:var(--s2);padding-right:var(--s2);flex-wrap:nowrap}.listItem .icon-button{display:none}}