downward. Hide it to keep the layout stable for anyone using the extension. */ #shadowLL { display: none !important; } html, body { height: 100%; } body { margin: 0; min-height: 100vh; font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; background: var(--bg); color: var(--ink); line-height: 1.5; overflow: hidden; transition: background-color 0.25s ease, color 0.25s ease; display: grid; place-items: start center; /* svh (small viewport height) locks to the smallest viewport height so the top padding doesn't grow when the mobile address bar collapses mid-load — otherwise the card visibly shifts downward after first paint. */ padding: clamp(3rem, 30svh, 14rem) 1.2rem 1.6rem; } /* slime canvas */ #bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; } /* above-card canvas — for slimes that should render in front of the text card (perched slimes, usurper passing through during a coup). Transparent and pointer-event-passthrough so the text card stays interactive. */ #bg-top { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; display: block; } main { position: relative; z-index: 1; width: 100%; max-width: 38rem; max-height: calc(100vh - 3.2rem); padding: 1.6rem 1.9rem 1.4rem; background: var(--card); border-radius: 13px; box-shadow: var(--card-shadow); display: flex; flex-direction: column; overflow: hidden; } .panels { flex: 0 1 auto; max-height: 40vh; overflow: hidden; margin: 0 -0.5rem; padding: 0 0.5rem; } /* Only the research panel has long content that needs scrolling. The others (about, resources, me) all fit inside 50vh, so they get overflow: hidden — no scrollbar appears, no gutter is reserved, and the me-photo doesn't reflow when switching tabs. */ .panels:has(.panel[data-panel="research"].is-active) { overflow-y: auto; } h1 { font-family: "Nunito", system-ui, sans-serif; font-size: clamp(1.75rem, 3.4vw, 2.1rem); font-weight: 700; letter-spacing: -0.015em; margin: 0 0 0.2rem; line-height: 1; } p { margin: 0 0 0.7rem; } header { margin-bottom: 0.9rem; } header .role { color: var(--ink-soft); margin: 0 0 0.4rem; font-style: italic; font-weight: 500; } header .links { color: var(--ink-soft); margin: 0; font-size: 0.95rem; } header .links a { color: var(--ink-soft); text-decoration: none; } .theme-toggle { background: none; border: none; color: var(--ink-soft); font: inherit; cursor: pointer; padding: 0 0.15em; margin: 0; line-height: 1; } .theme-toggle:hover { color: var(--ink); } .bio { margin-bottom: 0.9rem; } .bio p { font-size: 0.94rem; margin-bottom: 0.55rem; } /* Underline-only links: text inherits the surrounding body color, only the underline carries the link color. Reads as quiet prose with highlighted bits rather than a list of links — better for the link-dense bio paragraph. */ a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--link); text-underline-offset: 3px; transition: color 0.15s, text-decoration-color 0.15s; } a:hover { color: var(--accent); text-decoration-color: var(--accent); } /* ── tabs ─────────────────────────────────────── */ .tabs { display: flex; gap: 1.4rem; border-bottom: 1px solid var(--rule); margin: 0 0 0.9rem; flex-wrap: wrap; flex-shrink: 0; } .tab { background: none; border: none; color: var(--ink-soft); font: 500 italic 0.98rem "Nunito", system-ui, sans-serif; cursor: pointer; padding: 0.55rem 0; position: relative; transition: color 0.15s; } .tab:hover { color: var(--ink); } .tab[aria-selected="true"] { color: var(--ink); font-weight: 600; } .tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); border-radius: 1px; } /* ── panels ──────────────────────────────────── */ .panel { display: none; } .panel.is-active { display: block; animation: fade-in 0.22s ease-out; } @keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .panel .lede { color: var(--ink-soft); font-style: italic; margin-bottom: 1.2rem; } .me-photo { display: block; width: 77%; height: auto; aspect-ratio: 4 / 3; border-radius: 8px; margin: 0 auto; -webkit-user-drag: none; user-select: none; } .pub { margin: 0 0 0.9rem; font-size: 0.95rem; line-height: 1.5; } .pub strong { font-weight: 700; color: var(--ink); } .pub em { font-style: italic; } .pub-links { color: var(--ink-soft); font-size: 0.95rem; white-space: nowrap; } .pub-links a { color: var(--ink-soft); text-decoration: none; } .demo { margin: 0 0 0.7rem; font-size: 0.95rem; line-height: 1.45; } .demo strong { font-weight: 700; color: var(--ink); } .demo a { text-decoration: none; } .footnote { color: var(--ink-faint); font-size: 0.88rem; margin-top: 0.6rem; } details { margin-top: 1.1rem; } details summary { cursor: pointer; color: var(--ink-soft); font-size: 0.95rem; font-style: italic; } details > *:not(summary) { margin-top: 0.75rem; } details ul { padding-left: 1.25rem; } details li { margin-bottom: 0.25rem; } code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.86em; background: color-mix(in srgb, var(--ink) 8%, transparent); padding: 0.1em 0.4em; border-radius: 3px; color: var(--ink); } @media (prefers-reduced-motion: reduce) { body, .panel.is-active { animation: none; transition: none; } }