:root{--acc: #74e0a8;--bg: #0a0d16;--text: #e7ecf5;--text-2: #9aa5bd;--muted: #5b6884;--faint: #4a5570;--icon: #3d4a6b;--line: rgba(231, 236, 245, .08);--line-hover: rgba(231, 236, 245, .18);--card: rgba(255, 255, 255, .03);--card-hover: rgba(255, 255, 255, .045);--acc-line: rgba(116, 224, 168, .35);--acc-line: color-mix(in srgb, var(--acc) 35%, transparent);--acc-glow: rgba(116, 224, 168, .35);--acc-glow: color-mix(in srgb, var(--acc) 35%, transparent);--acc-wash: rgba(116, 224, 168, .06);--acc-wash: color-mix(in srgb, var(--acc) 6%, transparent);--sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;padding:0;background:var(--bg)}body{font-family:var(--sans);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased}a{color:var(--acc);text-decoration:none}a:hover{color:#9ef0c4}#sky{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;display:block}#fx{position:fixed;inset:0;width:100vw;height:100vh;z-index:60;pointer-events:none;display:block}.page{position:relative;z-index:1;max-width:1060px;margin:0 auto;padding:56px 32px 96px}.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:44px}h1{margin:0;font-size:44px;font-weight:700;letter-spacing:-.02em;line-height:1.05}.d20-btn{flex-shrink:0;padding:8px;line-height:0;background:none;border:0;cursor:pointer;color:var(--icon);opacity:.7;transition:color .2s,opacity .2s,transform .2s}.d20-btn:hover,.d20-btn:focus-visible{color:var(--acc);opacity:1;transform:rotate(12deg)}.d20-btn svg{display:block}.tabs{display:flex;gap:8px;margin-bottom:32px;border-bottom:1px solid var(--line)}.tabs [role=tab]{margin-bottom:-1px;padding:10px 18px 14px;background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;font:500 15px var(--sans);color:var(--muted);transition:color .15s}.tabs [role=tab]:hover{color:var(--text-2)}.tabs [role=tab][aria-selected=true]{color:var(--text);border-bottom-color:var(--acc)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:24px}.card{display:flex;flex-direction:column;height:100%;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color .2s,background .2s}.card:hover,.card:focus-visible{color:inherit;border-color:var(--line-hover);background:var(--card-hover)}.card .shot{display:block;width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;background:#121828}.card .body{flex:1;display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px}.card .head{display:flex;align-items:center;gap:10px}.card h2{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em}.card p{flex:1;margin:0;font-size:14px;line-height:1.5;color:var(--text-2)}.badge{--badge: #b39ddb;--badge-line: rgba(179, 157, 219, .35);padding:3px 7px;border:1px solid var(--badge-line);border-radius:4px;font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--badge)}.badge.web{--badge: var(--acc);--badge-line: var(--acc-line)}.badge.playdate{--badge: #ffc73d;--badge-line: rgba(255, 199, 61, .35)}.badge.macos,.badge.ios{--badge: #9db4e8;--badge-line: rgba(157, 180, 232, .35)}.empty{grid-column:1 / -1;margin:0;padding:28px 0;font:12.5px var(--mono);color:var(--faint)}.site-footer{margin-top:72px;text-align:center;font:11.5px var(--mono);color:var(--faint)}.overlay{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;background:#06080ed1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;animation:overlayIn .2s ease}.die-stage{position:relative;display:flex;align-items:center;justify-content:center;width:min(560px,92vw);height:400px}.die-mount{position:absolute;inset:0}.die-mount canvas{display:block}.die-result{position:absolute;left:50%;bottom:-6px;transform:translate(-50%);font-size:46px;font-weight:700;color:var(--text);pointer-events:none}.die-result.crit{color:var(--acc);text-shadow:0 0 28px var(--acc-glow),0 0 6px var(--acc-glow);animation:critPop .7s cubic-bezier(.2,1.4,.4,1)}@keyframes critPop{0%{transform:translate(-50%) scale(.4);opacity:0}60%{transform:translate(-50%) scale(1.35);opacity:1}to{transform:translate(-50%) scale(1)}}.die-2d{position:relative;width:220px;height:220px}.die-2d.rolling{animation:d20wobble .4s ease infinite}.die-2d svg{display:block;stroke:var(--acc);filter:drop-shadow(0 0 24px var(--acc-glow))}.die-2d-face{fill:var(--acc-wash)}.die-2d-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-bottom:14px;font-size:44px;font-weight:700;color:var(--text)}.roll-label{min-height:20px;font:14px var(--mono);letter-spacing:.06em;color:var(--text-2)}.roll-label.crit{color:var(--acc)}.roll-label.fail{color:#ff6b5a}.die-result.fail{color:#ff6b5a;text-shadow:0 0 26px rgba(255,80,60,.55);animation:critPop .7s cubic-bezier(.2,1.4,.4,1)}.die-stage.quake{animation:quake .6s ease-out}@keyframes quake{0%{transform:none}10%{transform:translate(-9px,6px) rotate(-.4deg)}20%{transform:translate(8px,-5px) rotate(.3deg)}30%{transform:translate(-7px,4px)}40%{transform:translate(6px,-3px) rotate(-.2deg)}55%{transform:translate(-4px,2px)}70%{transform:translate(3px,-2px)}85%{transform:translate(-1px,1px)}to{transform:none}}.roll-hint{font:11px var(--mono);color:var(--faint)}.toast{position:fixed;left:50%;bottom:36px;z-index:40;transform:translate(-50%);max-width:calc(100vw - 32px);padding:12px 20px;background:#101420f2;border:1px solid var(--acc-line);border-radius:8px;font:12.5px var(--mono);color:#c9d4e8;text-align:center;animation:toastIn .25s ease;pointer-events:none}@keyframes d20wobble{0%{transform:rotate(0) scale(1)}25%{transform:rotate(14deg) scale(1.06)}50%{transform:rotate(-10deg) scale(.97)}75%{transform:rotate(6deg) scale(1.03)}to{transform:rotate(0) scale(1)}}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}@media(max-width:640px){.page{padding:40px 20px 72px}.site-header{margin-bottom:32px}h1{font-size:34px}}@media(prefers-reduced-motion:reduce){.overlay,.toast,.die-2d.rolling,.die-result.crit,.die-result.fail,.die-stage.quake{animation:none}.d20-btn,.card,.tabs [role=tab]{transition:none}}