/* A small corner of the universe, with the original starfield. */
:root {
    color-scheme: dark;
    /* Retro space palette: cream, vivid magenta, orange, and amber; green for the author's name. */
    --background: #000000;
    --star-tile-size: 576px;
    --surface: #111111;
    --surface-hover: #ffffff24;
    --text: #fff8dc;
    --muted: #c3bea5;
    --accent: #e700fc;
    --accent-hover: #ee4dff;
    --warm: #f07800;
    --highlight: #f4c452;
    --reference: #99c7ee;
    --research-accent: #e88991;
    --name-highlight: #83e556;
    --focus: #ffe782;
    --line: #38352f;
    --divider-spectrum: linear-gradient(90deg, #ff65d5cc, #7896ffcc 17%, #52d5ffcc 34%, #b5e379cc 50%, #ffe16acc 66%, #ff9b4bcc 83%, #ff65d5cc);
    --divider-duration: 4s;
    --font: "PT Serif", Georgia, "Times New Roman", Times, serif;
}

* { box-sizing: border-box; }
html { min-width: 280px; scroll-padding-top: 2rem; }
body {
    margin: 0;
    padding: 0 2rem;
    min-height: 100vh;
    background: var(--background);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.75;
    isolation: isolate;
}
body::before, body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
/* A roomier original starfield, with faint nebula wisps near the edges. */
body::before {
    background:
        radial-gradient(ellipse 22% 5% at 5% 35%, #a5abc41a, #a5abc400 75%) 0 0 / 100% 100% no-repeat,
        radial-gradient(ellipse 42% 16% at 0% 33%, #4d6d9a38, #32466c1a 42%, #32466c00 76%) 0 0 / 100% 100% no-repeat,
        radial-gradient(ellipse 30% 10% at 12% 38%, #805a8d2b, #50345e12 45%, #50345e00 78%) 0 0 / 100% 100% no-repeat,
        radial-gradient(ellipse 27% 24% at 104% 79%, #62418226, #302b5710 40%, #302b5700 78%) 0 0 / 100% 100% no-repeat,
        url("images/starfiel.gif") 0 0 / var(--star-tile-size) var(--star-tile-size) repeat;
    background-blend-mode: screen;
}
body::after {
    /* Keep the colored flares softer through the main reading area. */
    -webkit-mask-image: linear-gradient(90deg, #000 8%, #000a 28%, #000a 72%, #000 92%);
    mask-image: linear-gradient(90deg, #000 8%, #000a 28%, #000a 72%, #000 92%);
    background:
        /* Extra crisp white stars amongst the original fine grain. */
        radial-gradient(1.3px 1.3px at 51px 88px, #fff 35%, #ffffff00 100%) 0 0 / 421px 487px,
        radial-gradient(1.4px 1.4px at 194px 276px, #fff 35%, #ffffff00 100%) 0 0 / 487px 659px,
        radial-gradient(1.2px 1.2px at 409px 352px, #fff 35%, #ffffff00 100%) 0 0 / 617px 509px,
        radial-gradient(1.5px 1.5px at 96px 438px, #fff 35%, #ffffff00 100%) 0 0 / 701px 613px,
        radial-gradient(1.3px 1.3px at 574px 227px, #fff 35%, #ffffff00 100%) 0 0 / 787px 569px,
        radial-gradient(1.4px 1.4px at 637px 516px, #fff 35%, #ffffff00 100%) 0 0 / 853px 797px,
        /* Bright cores and amber halos align with the original orange crosses. */
        radial-gradient(2px 2px at 44.7266% 1.3672%, #fff7d6 12%, #ffbe4d 48%, #ff6a0000 100%) 0 0 / var(--star-tile-size) var(--star-tile-size),
        radial-gradient(2.5px 2.5px at 67.1875% 18.1641%, #fff7d6 12%, #ffbe4d 48%, #ff6a0000 100%) 0 0 / var(--star-tile-size) var(--star-tile-size),
        radial-gradient(2.3px 2.3px at 23.0469% 53.5156%, #fff7d6 12%, #ffbe4d 48%, #ff6a0000 100%) 0 0 / var(--star-tile-size) var(--star-tile-size),
        radial-gradient(2.5px 2.5px at 79.6875% 82.2266%, #fff7d6 12%, #ffbe4d 48%, #ff6a0000 100%) 0 0 / var(--star-tile-size) var(--star-tile-size),
        radial-gradient(6px 6px at 44.7266% 1.3672%, #ff8b004d, #ff8b001a 40%, #ff8b0000 100%) 0 0 / var(--star-tile-size) var(--star-tile-size),
        radial-gradient(7px 7px at 67.1875% 18.1641%, #ff8b0059, #ff8b001a 40%, #ff8b0000 100%) 0 0 / var(--star-tile-size) var(--star-tile-size),
        radial-gradient(6px 6px at 23.0469% 53.5156%, #ff8b004d, #ff8b001a 40%, #ff8b0000 100%) 0 0 / var(--star-tile-size) var(--star-tile-size),
        radial-gradient(7px 7px at 79.6875% 82.2266%, #ff8b0059, #ff8b001a 40%, #ff8b0000 100%) 0 0 / var(--star-tile-size) var(--star-tile-size),
        /* A few cool blue and violet stars, with small gradient glows. */
        radial-gradient(1.8px 1.8px at 82px 46px, #eefaff 20%, #67c6ff 55%, #438fff00 100%) 0 0 / 643px 577px,
        radial-gradient(1.6px 1.6px at 519px 386px, #eefaff 20%, #78b1ff 55%, #438fff00 100%) 0 0 / 719px 641px,
        radial-gradient(1.9px 1.9px at 284px 158px, #faf1ff 20%, #c99aff 55%, #a260ff00 100%) 0 0 / 811px 683px,
        radial-gradient(1.6px 1.6px at 643px 72px, #faf1ff 20%, #b28aff 55%, #a260ff00 100%) 0 0 / 883px 757px,
        radial-gradient(1.7px 1.7px at 138px 487px, #faf1ff 20%, #c99aff 55%, #a260ff00 100%) 0 0 / 697px 739px,
        radial-gradient(5px 5px at 82px 46px, #438fff33, #438fff00 100%) 0 0 / 643px 577px,
        radial-gradient(5px 5px at 519px 386px, #438fff2b, #438fff00 100%) 0 0 / 719px 641px,
        radial-gradient(5.5px 5.5px at 284px 158px, #a260ff33, #a260ff00 100%) 0 0 / 811px 683px,
        radial-gradient(5px 5px at 643px 72px, #a260ff2b, #a260ff00 100%) 0 0 / 883px 757px,
        radial-gradient(5px 5px at 138px 487px, #a260ff2b, #a260ff00 100%) 0 0 / 697px 739px;
}
::selection { background: var(--accent); color: var(--background); }
main, nav, .site-footer { width: 100%; max-width: 960px; margin-inline: auto; }
nav { padding-top: 2.5rem; }
.nav-links {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.65rem;
    overflow-x: auto;
    padding: 0.45rem;
    scrollbar-width: thin;
    scrollbar-color: var(--warm) var(--background);
}
.nav-link { flex: 0 0 auto; white-space: nowrap; }
.nav-link:first-child { margin-inline-start: auto; }
.nav-link:last-child { margin-inline-end: auto; }
.nav-link, .material-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 46px;
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--surface);
    color: var(--text);
    font: 400 0.875rem/1.5 var(--font);
    text-decoration: none;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.nav-link { background: transparent; border-color: transparent; }
.nav-link[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}
.nav-link:hover, .material-button:hover {
    background: var(--surface-hover);
    border-color: #ffffff;
    color: #ffffff;
}
.nav-link::before { content: ""; flex: 0 0 17px; height: 17px; background: currentColor; mask: var(--nav-icon) center / contain no-repeat; }
.nav-link[href="index.html"] {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1Z'/%3E%3C/svg%3E");
}
.nav-link[href="about_thesis.html"] {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h10l4 4v14H5Z M14 3v5h5 M8 12h8 M8 16h6'/%3E%3C/svg%3E");
}
.nav-link[href="code.html"] {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 6-6 6 6 6 M17 6l6 6-6 6 M14 3l-4 18'/%3E%3C/svg%3E");
}
.nav-link[href="aboutme.html"] {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M4 21v-2a8 8 0 0 1 16 0v2'/%3E%3C/svg%3E");
}
/* The original rainbow spirit, with a vivid, translucent spectrum. */
body > hr {
    width: 100%; max-width: 960px; height: 2px; margin: 2rem auto 0; border: 0; border-radius: 2px;
    background: var(--divider-spectrum);
    background-size: 200% 100%;
}
.page-content { padding-top: 2rem; }
.page-intro { display: flow-root; padding-bottom: 1rem; }
h1, h2, h3 { color: var(--text); line-height: 1.25; }
h1 { margin: 0 0 0.8rem; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; }
h2 { margin: 0 0 0.9rem; font-size: 1.2rem; font-weight: 700; }
h3 { margin: 1.5rem 0 0.75rem; font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 0.9rem; }
.page-intro > p:last-child { margin-bottom: 0; }
.intro-description { color: #e5dfc0; font-size: 1.05rem; }
.intro-bio { color: #eee6c9; }
.content-section { padding: 1rem 0 0.25rem; }
.content-section > h2 {
    display: table;
    max-width: 100%;
    margin-bottom: 0.75rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #fff8dc80;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0;
}
ul, ol { margin: 0 0 0.75rem; padding-left: 1.3rem; }
li { padding-left: 0.3rem; }
li + li { margin-top: 0.5rem; }
li::marker { color: var(--muted); font-size: 0.8em; }
.research-list { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; padding-left: 0; list-style: none; }
.research-list li { display: flex; min-width: 0; padding-left: 0; }
.research-list li + li { margin-top: 0; }
.research-link { display: flex; align-items: center; gap: 0.65rem; min-width: 0; color: inherit; text-decoration: none; }
/* Large, simple physics symbols, drawn entirely with CSS. */
.research-icon { position: relative; display: inline-block; flex: 0 0 72px; width: 72px; height: 72px; color: var(--text); isolation: isolate; }
.research-lattice { --research-accent: var(--reference); }
.research-qubit { --research-accent: var(--highlight); }
/* Three smooth worldlines, with gaps at the two undercrossings.
   Native CSS clipping paths draw each strand inside the 72px square. */
.braid-strand { position: absolute; inset: 0; background: currentColor; }
.braid-strand-a {
    color: var(--research-accent);
    z-index: 1;
    clip-path: path("M 10 4 C 10 20 34 20 34 36 C 34 52 58 52 58 68 L 62 68 C 62 52 38 52 38 36 C 38 20 14 20 14 4 Z");
}
.braid-strand-b {
    clip-path: path("M 34 4 C 34 20 10 20 10 36 L 10 68 L 14 68 L 14 36 C 14 20 38 20 38 4 Z");
    -webkit-mask-image: radial-gradient(circle at 24px 20px, transparent 4px, #000 4.5px);
    mask-image: radial-gradient(circle at 24px 20px, transparent 4px, #000 4.5px);
}
.braid-strand-c {
    clip-path: path("M 58 4 L 58 36 C 58 52 34 52 34 68 L 38 68 C 38 52 62 52 62 36 L 62 4 Z");
    -webkit-mask-image: radial-gradient(circle at 48px 52px, transparent 4px, #000 4.5px);
    mask-image: radial-gradient(circle at 48px 52px, transparent 4px, #000 4.5px);
}
/* A bold sphere outline, one equator, and a state arrow. */
.research-qubit::before { content: ""; position: absolute; inset: 6px; border: 3px solid currentColor; border-radius: 50%; }
.research-qubit::after { content: ""; position: absolute; left: 33px; top: 33px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.qubit-equator { position: absolute; left: 6px; top: 26px; width: 60px; height: 20px; border: 2px solid currentColor; border-radius: 50%; opacity: 0.55; }
.qubit-state { position: absolute; left: 34px; top: 11px; width: 4px; height: 25px; color: var(--research-accent); background: linear-gradient(transparent 7px, currentColor 7px); transform: rotate(35deg); transform-origin: bottom center; }
.qubit-state::before { content: ""; position: absolute; left: 50%; top: 0; width: 12px; height: 10px; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: translateX(-50%); }
/* Straight columns and inward-bowed rows, with nodes at each intersection. */
.research-lattice::before { content: ""; position: absolute; inset: 11.5px 5.5px; border: 1px solid currentColor; opacity: 0.55; }
.lattice-line { position: absolute; opacity: 0.55; }
.lattice-column-left, .lattice-column-right { top: 12px; width: 1px; height: 48px; background: currentColor; }
.lattice-column-left { left: 25.5px; }
.lattice-column-right { left: 45.5px; }
.lattice-row-top, .lattice-row-bottom { left: 6px; width: 60px; height: 10px; border: 1px solid currentColor; border-radius: 50%; }
.lattice-row-top { top: 23px; clip-path: inset(50% 0 0); }
.lattice-row-bottom { top: 39px; clip-path: inset(0 0 50%); }
.lattice-nodes {
    position: absolute; left: 3px; top: 9px; width: 6px; height: 6px;
    color: var(--research-accent); background: currentColor; border-radius: 50%;
    box-shadow:
        20px 0, 40px 0, 60px 0,
        0 16px, 20px 20px, 40px 20px, 60px 16px,
        0 32px, 20px 28px, 40px 28px, 60px 32px,
        0 48px, 20px 48px, 40px 48px, 60px 48px;
}
.list_item { margin-left: 0; }
.link, .pdf-link {
    color: var(--accent); text-decoration: underline; text-decoration-color: #e700fc99;
    text-underline-offset: 4px; text-decoration-thickness: 1px;
    transition: color 160ms ease, text-decoration-color 160ms ease;
}
.pdf-link { color: var(--warm); text-decoration-color: #f07800b3; text-decoration-style: dotted; text-decoration-thickness: 1px; }
.file-meta { display: inline-block; margin-inline-start: 0.4rem; color: var(--muted); font-size: 0.6875rem; line-height: 1.4; white-space: nowrap; }
.link:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
.pdf-link:hover { color: #ff9b32; text-decoration-color: currentColor; }
.link img, .material-button img { margin-left: 0.25rem; opacity: 0.65; filter: grayscale(1) brightness(3); }
.material-button img { flex-shrink: 0; margin-left: 0; }
.highlight-name { color: var(--name-highlight); font-weight: 600; }
.publication-title { font-size: 1.05rem; font-weight: 600; line-height: 1.55; }
.publication-authors,
.publication-journal { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.6; }
.publication-authors { color: #ffffff; }
img { max-width: 100%; height: auto; }
/* The image and normalized state collapse together on hover or keyboard focus. */
.linkimage { position: relative; display: block; float: right; width: 178px; margin: 0.15rem 1.25rem 1rem 2rem; color: var(--muted); text-decoration: none; }
.img1 { display: block; width: 100%; max-width: 152px; margin-inline: auto; opacity: 0.88; }
/* Frosted equation panels keep the starfield soft and the notation crisp. */
.math-display {
    border: 1px solid #ffffff33;
    border-radius: 12px;
    background:
        linear-gradient(135deg, #ffffff1a, #ffffff05 55%, #ffffff0d),
        #17191e9c;
    box-shadow: 0 10px 28px #0000004d, inset 0 1px 0 #ffffff26;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
}
.cat-equation { display: grid; place-items: center; min-height: 2.75rem; margin-top: 0.65rem; color: #ffffff; text-align: center; }
.cat-equation math { font-family: "Cambria Math", "STIX Two Math", serif; font-size: 0.875rem; white-space: nowrap; }
.cat-measured { display: none; }
.linkimage:is(:hover, :focus-visible) .cat-unmeasured { display: none; }
.linkimage:is(:hover, :focus-visible) .cat-measured { display: block; }
.linkimage:is(:hover, :focus-visible) .cat-equation { color: var(--highlight); }
.linkimage:is(:hover, :focus-visible) .img1 { opacity: 1; }
/* Avoid an extra transparency layer when painting the PNG on touch screens. */
@media (hover: none) {
    .linkimage .img1 { opacity: 1; }
}
.article-content > p { color: #eee6c9; }
.thesis-figure { clear: both; max-width: 559px; margin: 1.75rem auto; }
.img2 { display: block; width: 100%; border-radius: 8px; }
.math-display { clear: both; max-width: 100%; overflow-x: auto; padding: 0.9rem 1.25rem; margin: 1.5rem 0; }
.footnote-reference, .footnote-reference:hover { color: var(--reference); text-decoration-color: currentColor; }
.footnote, .article-content > .footnote { clear: both; margin: 1.5rem 0; color: var(--reference); font-size: 0.8rem; }
.footnote-box { display: inline-block; padding: 0.25rem 0.75rem; background: #99c7ee12; }
.code-block { clear: both; margin: 1.75rem 0; }
.code-caption { margin: 0; padding: 0.65rem 1rem; border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--surface); color: var(--muted); font: 0.75rem/1.5 Consolas, monospace; }
.code-block pre[class*="language-"] { margin: 0; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: 0 0 10px 10px; background: #000000; overflow: auto; }
.code-block pre.line-numbers { padding-left: 3.8em; }
.code-block code { font-family: Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.875rem; line-height: 1.75; }
.code-block .line-numbers .line-numbers-rows { border-right-color: var(--line); }
.contact-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 1.5rem; }
.contact-item { display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; max-width: 100%; }
.contact-icon { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 51px; }
.contact-icon img { display: block; max-width: 44px; max-height: 51px; }
.contact-details { flex: 1; min-width: 0; }
.contact-value { display: block; overflow-wrap: anywhere; }
.copy-email { appearance: none; margin: 0; padding: 0; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; user-select: text; }
.email-copy-status { display: block; color: var(--muted); font-size: 0.75rem; line-height: 1.5; }
.contact-label { display: block; margin-bottom: 0.1rem; color: var(--muted); font-size: 0.75rem; }
.site-footer {
    margin-top: 2rem; padding: 1rem 0 1.5rem;
    background: var(--divider-spectrum) top left / 200% 1px no-repeat;
    color: var(--muted); font-size: 0.75rem;
}
body > hr, .site-footer {
    background-repeat: repeat-x;
    animation: divider-flow var(--divider-duration) linear infinite;
}
@keyframes divider-flow {
    from { background-position: 0% 0; }
    to { background-position: 200% 0; }
}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
.skip-link { position: absolute; top: -100px; left: 1rem; z-index: 2; padding: 0.5rem 1rem; background: var(--focus); color: var(--background); border-radius: 3px; }
.skip-link:focus { top: 0.5rem; }
@media (max-width: 720px) {
    body { padding-inline: 1.4rem; font-size: 15px; }
    nav { padding-top: 1.5rem; }
    .nav-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
        overflow-x: visible;
    }
    .nav-link { min-width: 0; min-height: 46px; padding: 0.6rem 0.4rem; gap: 0.4rem; font-size: 0.75rem; white-space: normal; text-align: center; }
    .nav-link:first-child, .nav-link:last-child { margin-inline: 0; }
    .nav-link::before { flex-basis: 15px; height: 15px; }
    body > hr { margin-top: 1.5rem; }
    .page-content { padding-top: 1.5rem; }
    .page-intro { padding-bottom: 0.75rem; }
    .linkimage { width: 144px; margin: 0.4rem 0 1.5rem 1.25rem; }
    .img1 { max-width: 112px; }
    .cat-equation math { font-size: 0.8125rem; }
    .intro-description { font-size: 0.95rem; }
    h2 { font-size: 1.125rem; }
    .content-section > h2 { font-size: 1.25rem; }
    .research-list { display: block; }
    .research-list li + li { margin-top: 0.4rem; }
    .contact-links { grid-template-columns: 1fr; justify-items: start; gap: 1rem; }
    .site-footer { margin-top: 1.5rem; }
}
@media (max-width: 420px) {
    body { padding-inline: 1rem; }
    .nav-link { font-size: 0.8rem; }
    .linkimage { width: 128px; margin-left: 0.85rem; }
    .img1 { max-width: 88px; }
    .cat-equation math { font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
    body > hr, .site-footer { animation-duration: 20s; }
}