/* Portfolio styles. Page content is in index.html; interactions and project details are in script.js. */
        :root {
            --bg: #141516;
            --surface: #1c1e20;
            --raised: #232528;
            --text: #f2f0e9;
            --muted: #a6a7a8;
            --line: #36383b;
            --accent: #ee986c;
            --accent-ink: #191613;
            --serif: Georgia, 'Times New Roman', serif;
            --sans: Arial, Helvetica, sans-serif;
            --mono: 'Courier New', monospace;
            --width: 1240px
        }

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 100px
        }

        body {
            margin: 0;
            background: var(--bg);
            color: var(--text);
            font-family: var(--sans);
            font-size: 16px;
            line-height: 1.65
        }

        body:has(dialog[open]) {
            overflow: hidden
        }

        a {
            color: inherit;
            text-decoration: none
        }

        button {
            font: inherit
        }

        button,
        a,
        summary {
            -webkit-tap-highlight-color: transparent
        }

        button {
            cursor: pointer
        }

        button:focus-visible,
        a:focus-visible,
        summary:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 6px
        }

        ::selection {
            background: var(--accent);
            color: var(--bg)
        }

        .container {
            max-width: var(--width);
            margin: auto;
            width: calc(100% - 112px)
        }

        .mono {
            font-family: var(--mono);
            font-size: 12px;
            letter-spacing: .06em
        }

        .label {
            text-transform: uppercase;
            font-family: var(--mono);
            font-size: 12px;
            letter-spacing: .11em;
            color: var(--muted)
        }

        .muted {
            color: var(--muted)
        }

        .accent {
            color: var(--accent)
        }

        .skip {
            position: fixed;
            z-index: 100;
            top: -100px;
            background: var(--accent);
            color: #111;
            padding: 12px
        }

        .skip:focus {
            top: 8px
        }

        .nav-shell {
            position: sticky;
            top: 0;
            z-index: 10;
            background: rgba(20, 21, 22, .94);
            backdrop-filter: blur(18px);
            border-bottom: 1px solid var(--line)
        }

        .nav {
            height: 88px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px
        }

        .identity {
            display: flex;
            gap: 14px;
            align-items: center
        }

        .monogram {
            border: 1px solid #5a514b;
            border-radius: 50%;
            width: 43px;
            height: 43px;
            display: grid;
            place-items: center;
            font-family: var(--serif);
            font-size: 23px;
            font-style: italic;
            color: var(--accent)
        }

        .identity-name {
            font-size: 14px;
            font-weight: 600;
            line-height: 1.4
        }

        .identity-name small {
            display: block;
            color: var(--muted);
            font-size: 11px;
            font-weight: 400;
            letter-spacing: .03em
        }

        .nav-links {
            display: flex;
            gap: 31px;
            align-items: center
        }

        .nav-links a {
            font-size: 13px;
            color: var(--muted);
            transition: color .2s
        }

        .nav-links a:hover,
        .nav-links a.active {
            color: var(--accent)
        }

        .nav-links .contact-nav {
            color: var(--text);
            border: 1px solid var(--line);
            border-radius: 5px;
            padding: 8px 16px
        }

        .nav-links .contact-nav:hover {
            border-color: var(--accent)
        }

        .menu-toggle {
            display: none;
            color: var(--text);
            background: transparent;
            border: 1px solid var(--line);
            border-radius: 4px;
            padding: 8px 13px
        }

        .hero {
            display: grid;
            grid-template-columns: 1.25fr 1fr;
            gap: 65px;
            align-items: center;
            min-height: 650px;
            padding-top: 72px;
            padding-bottom: 40px;
            position: relative
        }

        .hero-kicker {
            display: flex;
            gap: 14px;
            align-items: center;
            color: var(--accent);
            margin-bottom: 26px
        }

        .short-line {
            width: 30px;
            height: 1px;
            background: var(--accent)
        }

        h1 {
            font-size: clamp(48px, 5.6vw, 80px);
            line-height: 1.04;
            letter-spacing: -.052em;
            font-weight: 500;
            margin: 0 0 30px
        }

        h1 em {
            display: block;
            font-family: var(--serif);
            font-weight: 400;
            letter-spacing: -.055em;
            color: var(--accent);
            padding-bottom: 8px
        }

        .hero-description {
            font-size: 17px;
            max-width: 470px;
            line-height: 1.8;
            color: var(--muted);
            margin: 0
        }

        .hero-description strong {
            color: var(--text);
            font-weight: 400
        }

        .hero-actions {
            display: flex;
            gap: 24px;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 34px
        }

        .button {
            border: 1px solid var(--accent);
            background: var(--accent);
            color: var(--accent-ink);
            border-radius: 5px;
            display: inline-flex;
            align-items: center;
            gap: 30px;
            padding: 12px 19px;
            font-size: 14px;
            font-weight: 600;
            transition: background .2s, transform .2s
        }

        .button:hover {
            background: #ffb18b;
            transform: translateY(-2px)
        }

        .text-link {
            font-size: 14px;
            display: inline-flex;
            gap: 14px;
            align-items: center;
            border-bottom: 1px solid #5a5c60;
            padding-bottom: 3px
        }

        .text-link:hover {
            color: var(--accent);
            border-color: var(--accent)
        }

        .hero-foot {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--muted);
            font-size: 12px;
            margin-top: 47px
        }

        .hero-foot span+span {
            border-left: 1px solid var(--line);
            padding-left: 12px
        }

        .system {
            border: 1px solid #44413d;
            border-radius: 10px;
            background: #191b1d;
            position: relative;
            box-shadow: 0 25px 65px #0003;
            transform: rotate(1deg)
        }

        .system-top {
            padding: 16px 22px;
            border-bottom: 1px solid var(--line);
            display: flex;
            justify-content: space-between;
            color: var(--muted)
        }

        .system-top .accent {
            font-size: 11px
        }

        .system-content {
            padding: 26px
        }

        .system-title {
            font-family: var(--serif);
            font-size: 27px;
            font-weight: 400;
            margin: 0 0 7px
        }

        .system-note {
            font-size: 12px;
            color: var(--muted);
            margin: 0 0 25px
        }

        .sources {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px
        }

        .source {
            border: 1px solid var(--line);
            padding: 14px 4px;
            text-align: center;
            border-radius: 4px;
            font-size: 12px;
            color: #c3c4c5;
            background: #202225
        }

        .flow-line {
            height: 35px;
            width: 1px;
            background: #696057;
            margin: 0 auto;
            position: relative
        }

        .flow-line:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: -3px;
            border: 4px solid transparent;
            border-top-color: #8e7868;
            border-bottom: 0
        }

        .retrieval {
            border: 1px solid #87604c;
            border-radius: 5px;
            padding: 18px;
            background: #2b241f
        }

        .retrieval-head {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            font-size: 14px
        }

        .retrieval-head span:last-child {
            color: var(--accent)
        }

        .retrieval-types {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px
        }

        .retrieval-types span {
            border: 1px solid #5c4638;
            border-radius: 3px;
            padding: 3px 7px;
            font-family: var(--mono);
            font-size: 11px;
            color: #d6baaa
        }

        .result {
            border: 1px solid var(--line);
            border-radius: 5px;
            padding: 15px 18px;
            display: flex;
            gap: 12px;
            align-items: center
        }

        .result-icon {
            color: var(--accent);
            border: 1px solid #685345;
            border-radius: 4px;
            padding: 2px 8px
        }

        .result strong {
            display: block;
            font-size: 13px;
            font-weight: 400
        }

        .result small {
            display: block;
            color: var(--muted);
            font-size: 11px
        }

        .system-bottom {
            margin-top: 26px;
            border-top: 1px dashed var(--line);
            padding-top: 15px;
            display: flex;
            justify-content: space-between;
            color: var(--muted);
            font-size: 11px
        }

        .margin-note {
            position: absolute;
            right: 15px;
            bottom: -33px;
            font-family: var(--serif);
            font-style: italic;
            color: var(--muted);
            font-size: 15px
        }

        .context-strip {
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            padding: 24px 0;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 30px
        }

        .context-item {
            display: flex;
            gap: 20px;
            align-items: center
        }

        .context-item+.context-item {
            border-left: 1px solid var(--line);
            padding-left: 30px
        }

        .context-item .number {
            font-family: var(--serif);
            font-style: italic;
            color: var(--accent);
            font-size: 26px
        }

        .context-item strong {
            display: block;
            font-size: 14px;
            font-weight: 500
        }

        .context-item small {
            font-size: 12px;
            color: var(--muted)
        }

        section.content {
            padding-top: 60px;
            padding-bottom: 10px
        }

        .section-title {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 20px;
            align-items: end;
            margin-bottom: 38px
        }

        .section-title h2 {
            font-size: clamp(35px, 4vw, 53px);
            font-weight: 400;
            line-height: 1.1;
            letter-spacing: -.04em;
            margin: 14px 0 0
        }

        .section-title h2 em {
            font-family: var(--serif);
            font-weight: 400;
            color: var(--accent)
        }

        .section-title>p {
            font-size: 14px;
            color: var(--muted);
            max-width: 250px;
            margin: 0
        }

        .experience-panel {
            display: grid;
            grid-template-columns: .75fr 1.5fr;
            border: 1px solid var(--line);
            border-radius: 9px;
            overflow: hidden
        }

        .employer {
            padding: 37px;
            background: #202224;
            border-right: 1px solid var(--line);
            display: flex;
            flex-direction: column;
            align-items: flex-start
        }

        .employment-date {
            border: 1px solid #5f5148;
            border-radius: 4px;
            color: var(--accent);
            padding: 5px 9px;
            font-size: 11px
        }

        .employer h3 {
            font-size: 47px;
            font-weight: 500;
            letter-spacing: -.055em;
            margin: 40px 0 0;
            line-height: 1.2
        }

        .employer .department {
            font-size: 13px;
            color: var(--muted);
            margin: 7px 0 28px
        }

        .employer h4 {
            font-size: 20px;
            font-weight: 400;
            margin: 0
        }

        .employer .location {
            font-size: 13px;
            color: var(--muted);
            margin: 4px 0 40px
        }

        .employer-bottom {
            margin-top: auto;
            border-top: 1px solid var(--line);
            padding-top: 22px;
            color: var(--muted);
            font-size: 14px
        }

        .experience-details {
            padding: 18px 36px
        }

        .achievement {
            display: grid;
            grid-template-columns: 32px 1fr;
            gap: 16px;
            padding: 24px 0
        }

        .achievement+.achievement {
            border-top: 1px solid var(--line)
        }

        .achievement .index {
            font-size: 12px;
            color: var(--accent);
            font-family: var(--mono);
            padding-top: 4px
        }

        .achievement h4 {
            font-size: 17px;
            font-weight: 500;
            margin: 0 0 8px
        }

        .achievement p {
            font-size: 14px;
            color: var(--muted);
            margin: 0
        }

        .technology {
            display: flex;
            gap: 7px;
            flex-wrap: wrap;
            margin-top: 17px
        }

        .technology span {
            padding: 4px 9px;
            border: 1px solid var(--line);
            border-radius: 4px;
            color: #c5c5c5;
            font-size: 11px
        }

        .project-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 22px
        }

        .project-card {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 8px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: border-color .2s, transform .2s
        }

        .project-card:hover {
            border-color: #756052;
            transform: translateY(-3px)
        }

        .project-visual {
            height: 220px;
            position: relative;
            overflow: hidden;
            background: #202327;
            border-bottom: 1px solid var(--line);
            padding: 25px 30px;
            display: flex;
            flex-direction: column;
            justify-content: center
        }

        .visual-label {
            position: absolute;
            left: 20px;
            top: 13px;
            font-family: var(--mono);
            font-size: 10px;
            letter-spacing: .09em;
            color: #a7aaac;
            text-transform: uppercase
        }

        .code-block {
            font-family: var(--mono);
            font-size: 12px;
            line-height: 1.85;
            color: #d1d3d4;
            padding: 14px 18px;
            border-left: 2px solid var(--accent);
            background: #191c1f;
            margin-top: 10px
        }

        .code-block .comment {
            color: #8b959c
        }

        .code-block .keyword {
            color: #e9a27d
        }

        .code-block .string {
            color: #b9cda9
        }

        .code-block .indent {
            padding-left: 20px
        }

        .card-body {
            padding: 27px 29px;
            display: flex;
            flex-direction: column;
            flex: 1
        }

        .card-meta {
            display: flex;
            gap: 10px;
            justify-content: space-between;
            color: var(--muted);
            font-family: var(--mono);
            font-size: 10px;
            letter-spacing: .045em;
            text-transform: uppercase
        }

        .card-body h3 {
            font-size: 26px;
            line-height: 1.2;
            font-weight: 400;
            letter-spacing: -.035em;
            margin: 17px 0 13px
        }

        .card-body>p {
            font-size: 14px;
            color: var(--muted);
            margin: 0 0 8px;
            line-height: 1.8
        }

        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid var(--line);
            padding-top: 20px;
            margin-top: 25px;
            gap: 10px
        }

        .card-footer button {
            border: 0;
            background: none;
            color: var(--text);
            padding: 0;
            font-size: 13px
        }

        .card-footer button:hover {
            color: var(--accent)
        }

        .card-footer>a {
            font-size: 12px;
            color: var(--muted)
        }

        .card-footer>a:hover {
            color: var(--accent)
        }

        .pipeline {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 18px
        }

        .pipeline .step {
            border: 1px solid #5a4d44;
            border-radius: 5px;
            background: #28241f;
            flex: 1;
            text-align: center;
            padding: 20px 5px;
            font-size: 12px
        }

        .pipeline .arrow {
            color: var(--accent)
        }

        .pipeline .step small {
            display: block;
            margin-top: 8px;
            color: var(--muted);
            font-size: 10px
        }

        .diagram-caption {
            font-family: var(--mono);
            font-size: 10px;
            color: var(--muted);
            margin-top: 16px;
            text-align: center
        }

        .syntax-flow {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px;
            margin-top: 18px
        }

        .syntax-lane {
            border: 1px solid #59616b;
            border-radius: 5px;
            padding: 16px;
            background: #232830
        }

        .syntax-lane:last-child {
            border-color: #795a48;
            background: #2c251f
        }

        .syntax-lane small {
            font-family: var(--mono);
            font-size: 10px;
            color: var(--muted)
        }

        .syntax-lane strong {
            display: block;
            font-size: 19px;
            font-weight: 400;
            margin: 5px 0;
            color: #d0d8e0
        }

        .syntax-lane:last-child strong {
            color: var(--accent)
        }

        .syntax-lane span {
            font-size: 11px;
            color: var(--muted)
        }

        .video-diagram {
            margin-top: 15px
        }

        .query {
            border-left: 2px solid var(--accent);
            padding-left: 14px;
            font-family: var(--serif);
            font-style: italic;
            font-size: 18px;
            color: #e0ded8
        }

        .time-track {
            margin-top: 24px;
            border: 1px solid #495158;
            background: repeating-linear-gradient(90deg, #2c3339 0, #2c3339 28px, #22272c 28px, #22272c 30px);
            height: 38px;
            position: relative;
            border-radius: 4px
        }

        .time-selection {
            position: absolute;
            left: 32%;
            width: 38%;
            height: 100%;
            background: #ee986c44;
            border: 1px solid var(--accent)
        }

        .time-labels {
            display: flex;
            justify-content: space-between;
            font-family: var(--mono);
            font-size: 10px;
            color: var(--muted);
            margin-top: 8px
        }

        .compact-projects {
            margin-top: 28px;
            border-top: 1px solid var(--line)
        }

        .compact-project {
            display: grid;
            grid-template-columns: 50px 1fr 1fr auto;
            align-items: center;
            gap: 25px;
            padding: 28px 0;
            border-bottom: 1px solid var(--line)
        }

        .compact-project .index {
            font-family: var(--mono);
            color: var(--accent);
            font-size: 12px
        }

        .compact-project h3 {
            font-size: 18px;
            font-weight: 400;
            margin: 0
        }

        .compact-project small {
            color: var(--muted);
            font-size: 11px
        }

        .compact-project p {
            font-size: 13px;
            color: var(--muted);
            margin: 0
        }

        .compact-project a {
            border: 1px solid var(--line);
            border-radius: 50%;
            width: 39px;
            height: 39px;
            display: grid;
            place-items: center
        }

        .compact-project a:hover {
            border-color: var(--accent);
            color: var(--accent)
        }

        .about-layout {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 80px
        }

        .about-copy .large {
            font-family: var(--serif);
            font-size: 30px;
            line-height: 1.45;
            margin: 0 0 22px;
            color: var(--text)
        }

        .about-copy p {
            font-size: 15px;
            color: var(--muted);
            line-height: 1.9
        }

        .languages {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 25px
        }

        .languages span {
            border-bottom: 1px solid #635244;
            padding: 3px 0;
            font-size: 12px;
            margin-right: 10px
        }

        .skill-group {
            display: grid;
            grid-template-columns: 125px 1fr;
            gap: 20px;
            padding: 20px 0;
            border-bottom: 1px solid var(--line)
        }

        .skill-group:first-child {
            padding-top: 0
        }

        .skill-group h3 {
            font-size: 13px;
            color: var(--accent);
            font-weight: 400;
            margin: 3px 0
        }

        .skill-group p {
            font-size: 14px;
            color: var(--muted);
            margin: 0
        }

        .education {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 22px;
            margin-top: 48px
        }

        .degree {
            padding: 26px 28px;
            border: 1px solid var(--line);
            border-radius: 6px;
            position: relative
        }

        .degree h3 {
            font-size: 18px;
            font-weight: 400;
            line-height: 1.45;
            margin: 14px 0 8px
        }

        .degree p {
            color: var(--muted);
            font-size: 13px;
            margin: 0
        }

        .degree .meta {
            color: var(--accent);
            font-family: var(--mono);
            font-size: 11px
        }

        .contact {
            margin-top: 60px;
            border-top: 1px solid var(--line);
            padding: 65px 0 25px;
            background: #1b1d1f
        }

        .contact-grid {
            display: flex;
            justify-content: space-between;
            gap: 40px;
            align-items: end
        }

        .contact h2 {
            font-size: clamp(42px, 6vw, 78px);
            font-weight: 400;
            letter-spacing: -.05em;
            line-height: 1.13;
            margin: 22px 0 30px
        }

        .contact h2 em {
            font-family: var(--serif);
            color: var(--accent);
            font-weight: 400
        }

        .email {
            font-size: clamp(20px, 2.8vw, 32px);
            border-bottom: 1px solid #6c5b50;
            padding-bottom: 7px;
            overflow-wrap: anywhere
        }

        .email:hover {
            color: var(--accent)
        }

        .socials {
            display: flex;
            flex-direction: column;
            min-width: 180px;
            gap: 13px
        }

        .socials a,
        .copy-email {
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            border: 0;
            border-bottom: 1px solid var(--line);
            padding: 8px 0;
            color: var(--muted);
            background: none
        }

        .socials a:hover,
        .copy-email:hover {
            color: var(--accent)
        }

        .footer {
            border-top: 1px solid var(--line);
            padding-top: 23px;
            margin-top: 60px;
            display: flex;
            justify-content: space-between;
            gap: 25px;
            color: var(--muted);
            font-size: 11px
        }

        .footer a:hover {
            color: var(--accent)
        }

        dialog {
            background: var(--surface);
            color: var(--text);
            border: 1px solid #655143;
            border-radius: 12px;
            max-width: 680px;
            width: calc(100% - 36px);
            max-height: 85vh;
            padding: 0;
            box-shadow: 0 30px 150px #0008
        }

        dialog::backdrop {
            background: #090a0bce;
            backdrop-filter: blur(8px)
        }

        .dialog-header {
            padding: 24px 30px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px
        }

        .close-dialog {
            background: none;
            color: var(--text);
            border: 1px solid var(--line);
            border-radius: 50%;
            width: 36px;
            height: 36px;
            font-size: 22px
        }

        .dialog-content {
            padding: 20px 30px 35px
        }

        .dialog-content h2 {
            font-size: 34px;
            font-weight: 400;
            line-height: 1.15;
            letter-spacing: -.035em;
            margin: 0 0 25px
        }

        .dialog-content h3 {
            font-size: 14px;
            font-weight: 400;
            color: var(--accent);
            margin: 24px 0 8px
        }

        .dialog-content p {
            font-size: 15px;
            color: #babdbf;
            line-height: 1.85
        }

        .dialog-links {
            display: flex;
            flex-wrap: wrap;
            gap: 22px;
            margin-top: 28px
        }

        .nojs-note {
            font-size: 13px;
            color: var(--muted)
        }

        .reveal {
            opacity: 1
        }

        .motion-ready .reveal {
            opacity: 0;
            transform: translateY(16px);
            transition: opacity .65s, transform .65s
        }

        .motion-ready .reveal.visible {
            opacity: 1;
            transform: none
        }

        @media(min-width:1550px) {
            .hero {
                min-height: 700px
            }

            .container {
                max-width: 1320px
            }

            h1 {
                font-size: 87px
            }
        }

        @media(max-width:1050px) {
            .container {
                width: calc(100% - 64px)
            }

            .hero {
                gap: 32px;
                min-height: 620px
            }

            h1 {
                font-size: 61px
            }

            .system-content {
                padding: 20px
            }

            .system-title {
                font-size: 23px
            }

            .hero-description {
                font-size: 16px
            }

            .context-item {
                gap: 12px
            }

            .context-item+.context-item {
                padding-left: 20px
            }

            .context-item strong {
                font-size: 12px
            }

            .context-item small {
                font-size: 11px
            }

            .experience-panel {
                grid-template-columns: .85fr 1.5fr
            }

            .employer {
                padding: 28px
            }

            .experience-details {
                padding: 12px 26px
            }

            .about-layout {
                gap: 40px
            }

            .compact-project {
                grid-template-columns: 30px 1fr 1fr auto;
                gap: 18px
            }
        }

        @media(max-width:760px) {
            .container {
                width: calc(100% - 40px)
            }

            .nav {
                height: 74px
            }

            .identity-name small {
                display: none
            }

            .menu-toggle {
                display: block;
                font-size: 12px
            }

            .nav-links {
                display: none;
                position: absolute;
                top: 74px;
                left: 0;
                right: 0;
                background: var(--surface);
                padding: 22px;
                border-bottom: 1px solid var(--line);
                flex-wrap: wrap;
                gap: 22px
            }

            .nav-links.open {
                display: flex
            }

            .hero {
                grid-template-columns: 1fr;
                gap: 50px;
                padding-top: 50px;
                padding-bottom: 30px;
                min-height: 0
            }

            h1 {
                font-size: clamp(48px, 10.5vw, 76px)
            }

            .hero-description {
                max-width: 550px
            }

            .hero-foot {
                margin-top: 30px
            }

            .system {
                transform: none;
                max-width: 540px;
                width: 100%;
                justify-self: center
            }

            .system-content {
                padding: 25px
            }

            .system-title {
                font-size: 27px
            }

            .margin-note {
                font-size: 13px;
                bottom: -29px
            }

            .context-strip {
                grid-template-columns: 1fr;
                gap: 0;
                padding: 5px 0
            }

            .context-item {
                padding: 16px 0
            }

            .context-item+.context-item {
                border-left: 0;
                border-top: 1px solid var(--line);
                padding-left: 0
            }

            .context-item strong {
                font-size: 14px
            }

            .context-item small {
                font-size: 12px
            }

            .context-item .number {
                width: 32px
            }

            .section-title {
                grid-template-columns: 1fr
            }

            .section-title>p {
                max-width: 100%;
                margin-top: 5px
            }

            section.content {
                padding-top: 40px
            }

            .experience-panel {
                grid-template-columns: 1fr
            }

            .employer {
                border-right: 0;
                border-bottom: 1px solid var(--line)
            }

            .employer h3 {
                margin-top: 24px
            }

            .employer .department {
                margin-bottom: 20px
            }

            .employer .location {
                margin-bottom: 25px
            }

            .employer-bottom {
                margin-top: 0
            }

            .experience-details {
                padding: 5px 24px
            }

            .project-grid {
                grid-template-columns: 1fr
            }

            .project-visual {
                height: 210px
            }

            .card-body {
                padding: 24px
            }

            .compact-project {
                grid-template-columns: 25px 1fr auto;
                gap: 12px
            }

            .compact-project p {
                grid-column: 2;
                grid-row: 2
            }

            .compact-project>a {
                grid-column: 3;
                grid-row: 1/3
            }

            .about-layout {
                grid-template-columns: 1fr;
                gap: 30px
            }

            .education {
                grid-template-columns: 1fr
            }

            .contact {
                margin-top: 40px;
                padding-top: 45px
            }

            .contact-grid {
                flex-direction: column;
                align-items: stretch;
                gap: 40px
            }

            .socials {
                max-width: 320px
            }

            .footer {
                margin-top: 40px;
                flex-wrap: wrap
            }

            .hero-actions {
                gap: 20px
            }

            .skill-group {
                grid-template-columns: 100px 1fr
            }

            .card-meta {
                font-size: 10px
            }
        }

        @media(prefers-reduced-motion:reduce) {
            html {
                scroll-behavior: auto
            }

            *,
            *:before,
            *:after {
                transition: none !important;
                animation: none !important
            }

            .motion-ready .reveal {
                opacity: 1;
                transform: none
            }
        }

        @media print {

            .nav-shell,
            .hero-actions,
            .system,
            .contact,
            .card-footer,
            dialog {
                display: none
            }

            body {
                background: white;
                color: black
            }

            .container {
                width: 100%
            }

            .hero {
                min-height: 0;
                padding: 20px 0;
                display: block
            }

            .content {
                break-inside: avoid
            }

            .reveal {
                opacity: 1 !important;
                transform: none !important
            }
        }

        /* Roadmap and project diagrams extend the original visual system. */
        .roadmap {
            list-style: none;
            margin: 24px 0 0;
            padding: 0 0 0 12px
        }

        .roadmap li {
            position: relative;
            border-left: 1px solid #625348;
            padding: 0 0 25px 24px
        }

        .roadmap li:last-child {
            padding-bottom: 0;
            border-color: transparent
        }

        .roadmap li:before {
            content: '';
            position: absolute;
            left: -5px;
            top: 5px;
            width: 9px;
            height: 9px;
            background: var(--surface);
            border: 1px solid var(--accent);
            border-radius: 50%
        }

        .roadmap li.current:before {
            background: var(--accent);
            box-shadow: 0 0 0 4px #ee986c15
        }

        .roadmap-date {
            font-family: var(--mono);
            font-size: 10px;
            color: var(--accent);
            letter-spacing: .05em
        }

        .roadmap h3 {
            font-size: 17px;
            font-weight: 400;
            line-height: 1.4;
            margin: 5px 0 2px
        }

        .roadmap p {
            font-size: 13px;
            color: var(--text);
            margin: 0
        }

        .roadmap small {
            font-size: 11px;
            color: var(--muted)
        }

        .card-body>.technology {
            margin-bottom: 24px
        }

        .card-footer {
            margin-top: auto;
            flex-wrap: wrap
        }

        .repository-links {
            display: flex;
            gap: 15px;
            flex-wrap: wrap
        }

        .repository-links a {
            font-size: 12px;
            color: var(--muted)
        }

        .repository-links a:hover {
            color: var(--accent)
        }

        .agent-loop {
            margin-top: 20px
        }

        .agent-input {
            display: flex;
            gap: 12px;
            justify-content: center;
            font: 10px var(--mono);
            color: var(--muted);
            margin-bottom: 13px
        }

        .agent-input span {
            border: 1px solid var(--line);
            padding: 3px 10px;
            border-radius: 3px
        }

        .loop-row {
            display: flex;
            align-items: center;
            gap: 10px
        }

        .loop-row div {
            padding: 10px 8px;
            border: 1px solid #59616b;
            border-radius: 4px;
            flex: 1;
            text-align: center;
            font-size: 12px
        }

        .loop-row>span {
            color: var(--accent)
        }

        .loop-row .highlight {
            background: #2c251f;
            border-color: #795a48;
            color: var(--accent)
        }

        .loop-return {
            text-align: center;
            font: 11px var(--mono);
            color: var(--muted);
            margin-top: 13px
        }

        .mini-dashboard {
            border: 1px solid #48515a;
            border-radius: 5px;
            margin-top: 15px;
            overflow: hidden
        }

        .mini-dashboard-head {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            padding: 10px 12px;
            border-bottom: 1px solid var(--line);
            font: 9px var(--mono);
            color: var(--muted)
        }

        .mini-columns {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr
        }

        .mini-columns>div {
            padding: 14px 10px;
            text-align: center
        }

        .mini-columns>div+div {
            border-left: 1px solid var(--line)
        }

        .mini-columns small {
            display: block;
            font: 9px var(--mono);
            color: var(--accent)
        }

        .mini-columns strong {
            display: block;
            font-size: 14px;
            font-weight: 400;
            margin: 7px 0
        }

        .mini-columns span {
            font-size: 10px;
            color: var(--muted)
        }

        .collab-diagram {
            margin-top: 20px
        }

        .collab-clients,
        .shared-tools {
            display: flex;
            gap: 15px;
            justify-content: center
        }

        .collab-clients>span {
            border: 1px solid #59616b;
            border-radius: 4px;
            padding: 7px 24px;
            font-size: 12px
        }

        .sync-link {
            text-align: center;
            font: 11px var(--mono);
            color: var(--muted);
            padding: 13px 0
        }

        .shared-tools>div {
            border: 1px solid #795a48;
            border-radius: 4px;
            background: #2c251f;
            padding: 10px 20px;
            font-size: 13px
        }

        .shared-tools span {
            margin-right: 8px
        }

        @media(max-width:400px) {
            .project-visual {
                padding-left: 18px;
                padding-right: 18px
            }

            .mini-columns strong {
                font-size: 12px
            }

            .loop-row {
                gap: 5px
            }

            .roadmap h3 {
                font-size: 16px
            }

            .card-meta {
                flex-wrap: wrap
            }

            .system-top {
                flex-wrap: wrap;
                gap: 8px
            }

            .mini-columns>div {
                padding: 13px 6px
            }
        }

        /* Motion layer: all content remains visible when JavaScript is unavailable. */
        .reading-progress {
            position: fixed;
            inset: 0 0 auto;
            height: 2px;
            background: var(--accent);
            transform: scaleX(0);
            transform-origin: left;
            z-index: 30;
            pointer-events: none
        }

        .nav-shell.is-scrolled {
            box-shadow: 0 8px 28px #0003
        }

        .nav-links a {
            position: relative
        }

        .nav-links a:not(.contact-nav):after {
            content: '';
            position: absolute;
            bottom: -7px;
            left: 0;
            width: 100%;
            height: 1px;
            background: var(--accent);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .25s
        }

        .nav-links a.active:not(.contact-nav):after {
            transform: scaleX(1)
        }

        .project-card {
            position: relative;
            isolation: isolate
        }

        .project-card:after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: radial-gradient(360px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #ee986c0d, transparent 75%);
            opacity: 0;
            transition: opacity .3s;
            z-index: 2
        }

        .project-card.pointer-lit:after {
            opacity: 1
        }

        .technology span {
            transition: color .2s, border-color .2s, background .2s
        }

        .technology span:hover {
            color: var(--text);
            border-color: #84614b;
            background: #ee986c0b
        }

        .button>span,
        .card-footer button>span {
            display: inline-block;
            transition: transform .2s
        }

        .button:hover>span {
            transform: translate(2px, 2px)
        }

        .motion-control {
            background: transparent;
            border: 1px solid var(--line);
            border-radius: 4px;
            color: var(--muted);
            padding: 5px 9px;
            font: 11px var(--mono);
            cursor: pointer
        }

        .motion-control:hover {
            border-color: var(--accent);
            color: var(--accent)
        }

        .video-scan {
            position: absolute;
            inset: 0 auto 0 0;
            width: 2px;
            background: var(--accent);
            opacity: 0;
            box-shadow: 0 0 9px #ee986c66;
            pointer-events: none
        }

        body.motion-disabled .project-card:hover,
        body.motion-disabled .button:hover {
            transform: none
        }

        body.motion-disabled .project-card:after {
            display: none
        }

        body.motion-disabled *,
        body.motion-disabled *:before,
        body.motion-disabled *:after {
            transition: none !important;
            animation: none !important
        }

        html:has(body.motion-disabled) {
            scroll-behavior: auto
        }

        @media(prefers-reduced-motion:reduce) {

            .project-card:hover,
            .button:hover,
            .button:hover>span {
                transform: none
            }

            .project-card:after {
                display: none
            }
        }

        @media print {

            .reading-progress,
            .motion-control {
                display: none
            }
        }

        /* Abbott architecture narrative and original seminar figure. */
        .rag-story {
            padding: 34px 36px
        }

        .rag-story>h3 {
            font-size: 27px;
            font-weight: 400;
            line-height: 1.25;
            letter-spacing: -.025em;
            margin: 12px 0 17px
        }

        .rag-story>p {
            font-size: 14px;
            color: var(--muted);
            line-height: 1.85;
            margin: 18px 0
        }

        .rag-story>.rag-intro {
            font-size: 16px;
            color: var(--text)
        }

        .rag-flow {
            margin: 25px 0;
            display: grid;
            gap: 6px
        }

        .rag-flow>div {
            border: 1px solid #615044;
            border-radius: 5px;
            background: #24211f;
            padding: 13px 17px
        }

        .rag-flow small {
            display: block;
            font: 10px var(--mono);
            letter-spacing: .07em;
            color: var(--accent)
        }

        .rag-flow strong {
            display: block;
            font-size: 15px;
            font-weight: 400;
            margin: 5px 0 2px
        }

        .rag-flow div>span {
            font-size: 12px;
            color: var(--muted)
        }

        .rag-arrow {
            text-align: center;
            color: var(--accent);
            font-size: 15px;
            line-height: 1
        }

        .architecture-visual {
            padding: 35px 16px 10px;
            background: #f7f7f5
        }

        .architecture-visual>.visual-label {
            color: #595b5e
        }

        .architecture-open {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            border: 0;
            padding: 0;
            background: transparent;
            width: 100%;
            min-height: 0;
            height: 100%;
            color: #5b4435
        }

        .architecture-open img {
            display: block;
            max-width: 100%;
            width: auto;
            height: auto;
            max-height: calc(100% - 22px);
            object-fit: contain
        }

        .architecture-open>span {
            font: 10px var(--mono);
            flex-shrink: 0
        }

        .architecture-open:hover>span {
            text-decoration: underline;
            text-underline-offset: 3px
        }

        #architecture-dialog {
            max-width: 1160px
        }

        .architecture-scroll {
            margin: 20px;
            overflow: auto;
            background: #fff;
            border-radius: 5px
        }

        .architecture-scroll img {
            display: block;
            width: 100%;
            min-width: 760px;
            height: auto
        }

        .architecture-help {
            font-size: 13px;
            color: var(--muted);
            margin: 0 22px 22px
        }

        @media(max-width:760px) {
            .rag-story {
                padding: 26px 24px
            }

            .architecture-scroll {
                margin: 15px
            }

            .architecture-help {
                margin: 0 15px 18px
            }
        }

        /* Compact experience: narrative on the left, architecture on the right. */
        .experience-panel {
            grid-template-columns: 1.12fr 1fr
        }

        .employer {
            padding: 30px 32px
        }

        .employer h3 {
            margin-top: 20px;
            font-size: 43px
        }

        .employer .department {
            margin: 5px 0 16px
        }

        .employer h4 {
            font-size: 18px
        }

        .employment-kind {
            font-size: 13px;
            display: inline-block
        }

        .employer .location {
            margin: 5px 0 18px
        }

        .employer-bottom {
            margin-top: 0;
            padding-top: 15px
        }

        .employer-bottom p {
            margin: 0 0 14px;
            font-size: 14px;
            line-height: 1.8
        }

        .employer-bottom p:last-child {
            margin-bottom: 0
        }

        .rag-story {
            padding: 30px 32px;
            display: flex;
            flex-direction: column;
            justify-content: center
        }

        .rag-story>h3 {
            font-size: 25px;
            margin-bottom: 0
        }

        .rag-flow {
            margin: 22px 0 4px
        }

        .rag-story>.technology {
            margin-top: 22px
        }

        /* Reimplemented as SVG: theme colors, native labels, crisp at every zoom. */
        .architecture-visual {
            background: #202327;
            padding: 32px 9px 9px
        }

        .architecture-visual>.visual-label {
            color: var(--muted)
        }

        .architecture-open {
            color: var(--accent);
            gap: 2px
        }

        .architecture-open .decoding-svg {
            width: 100%;
            height: auto;
            max-height: calc(100% - 20px);
            display: block
        }

        .architecture-open>span {
            font-size: 10px
        }

        .architecture-scroll {
            background: #202327;
            border: 1px solid var(--line)
        }

        .architecture-scroll .decoding-svg {
            display: block;
            width: 100%;
            min-width: 960px;
            height: auto
        }

        @media(max-width:760px) {
            .experience-panel {
                grid-template-columns: 1fr
            }

            .employer,
            .rag-story {
                padding: 25px 24px
            }

            .rag-story>h3 br {
                display: none
            }

            .rag-story {
                justify-content: flex-start
            }
        }

        /* Original project results and client testimonial. */
        .project-note {
            margin: 20px 0 4px;
            padding: 18px 20px;
            border-left: 2px solid var(--accent);
            border-radius: 0 5px 5px 0;
            background: #ee986c07
        }

        .project-note blockquote {
            margin: 0
        }

        .project-note blockquote p {
            margin: 0;
            color: #c6c5c1;
            font-size: 14px;
            line-height: 1.85;
            font-style: italic
        }

        .project-note strong {
            color: var(--accent);
            font-weight: 600
        }

        .project-note figcaption {
            margin-top: 13px;
            font: 11px/1.7 var(--mono);
            color: var(--muted)
        }

        .testimonial blockquote p {
            font-family: var(--serif);
            font-size: 16px;
            line-height: 1.75
        }
    
        /* Logo-only additions. Original page content and layout are preserved. */
        .custom-monogram{border:0;border-radius:0;width:46px;height:46px;flex-shrink:0;color:var(--accent)}
        .personal-mark{display:block;width:100%;height:100%;overflow:visible}
        .personal-frame{stroke:#695245;stroke-width:1.3;transition:stroke .25s}
        .personal-stroke{stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
        .personal-detail{stroke:currentColor;stroke-width:1.4;opacity:.55}
        .identity:hover .personal-frame{stroke:var(--accent)}
        .abbott-heading{display:flex;align-items:center;gap:14px}
        .abbott-mark{width:1.08em;height:1.08em;flex-shrink:0;color:var(--text)}
        .abbott-line{stroke:currentColor;stroke-width:10;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0}
        .abbott-mark.logo-in-view .abbott-line{animation:abbott-draw-retract 11.2s cubic-bezier(.45,0,.25,1) infinite}
        /* A→B draw: 100→0; A→B erase: 0→-100.
           B→A draw: -100→0; B→A erase: 0→100. */
        @keyframes abbott-draw-retract{
            0%,4%{stroke-dashoffset:100}
            21%,29%{stroke-dashoffset:0}
            46%,54%{stroke-dashoffset:-100}
            71%,79%{stroke-dashoffset:0}
            96%,100%{stroke-dashoffset:100}
        }
        body.motion-disabled .abbott-line{animation:none!important;stroke-dashoffset:0}
        @media(prefers-reduced-motion:reduce){.abbott-line{animation:none!important;stroke-dashoffset:0}.personal-frame{transition:none}}
        @media print{.abbott-line{animation:none!important;stroke-dashoffset:0;stroke:#191c20}}

        /* Fleet architecture rebuilt from the supplied reference. */
        .fleet-visual{padding:32px 10px 8px}.fleet-open{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;min-height:0;padding:0;border:0;background:transparent;color:var(--accent);gap:3px}
        .fleet-open svg{display:block;width:100%;height:auto;max-height:calc(100% - 19px)}.fleet-open>span{font:10px var(--mono)}.fleet-open:hover>span{text-decoration:underline;text-underline-offset:3px}
        #fleet-dialog{max-width:1160px}.fleet-scroll{margin:20px;background:#202327;border:1px solid var(--line);border-radius:5px;overflow:auto}.fleet-scroll svg{display:block;width:100%;min-width:960px;height:auto}
        .collab-clients>span{padding:7px 12px}.shared-tools>div{padding:10px 12px;font-size:12px}
        @media(max-width:400px){.collab-clients,.shared-tools{gap:8px}.collab-clients>span,.shared-tools>div{padding:8px;font-size:11px}.sync-link{font-size:10px}.fleet-scroll{margin:15px}}

        /* Research links use sibling PDF files, with no script interception. */
        .card-footer>a.paper-link{display:inline-flex;align-items:center;gap:9px;color:var(--text);font-size:13px}.card-footer>a.paper-link:hover{color:var(--accent)}.paper-format{border:1px solid var(--line);padding:1px 5px;border-radius:3px;font:10px var(--mono);color:var(--muted)}
        /* Group collaboration: members converge on two shared tools above the sync service. */
        .collaboration-visual{padding:34px 24px 12px}.group-architecture{width:100%;max-width:480px;margin:auto}.group-members{display:flex;justify-content:space-between;gap:9px}.group-members>span{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;border:1px solid #565b61;border-radius:5px;padding:5px 6px;color:#d2d2cf;font-size:11px;line-height:1.3;background:#25282c}.group-members i{display:block;width:7px;height:7px;border:1px solid var(--accent);border-radius:50%;flex-shrink:0}.member-connectors{display:grid;grid-template-columns:repeat(3,1fr);height:13px}.member-connectors span{width:1px;height:100%;background:#8b6c57;justify-self:center}.group-workspace{position:relative;display:grid;grid-template-columns:1fr 1fr;border:1px solid #876249;border-radius:6px;padding:21px 8px 5px;background:#29231f;gap:8px}.workspace-caption{position:absolute;top:5px;left:0;right:0;text-align:center;font:8px var(--mono);letter-spacing:.07em;color:var(--accent)}.group-feature{padding:0 6px;min-width:0}.group-feature+ .group-feature{border-left:1px solid #594637}.group-feature strong{display:block;text-align:center;font-size:12px;font-weight:400;line-height:1.35;color:var(--text)}.message-lines{height:25px;display:flex;flex-direction:column;gap:3px;padding:5px 12px 1px;max-width:150px;margin:auto}.message-lines span{display:block;height:4px;width:62%;border-radius:2px;background:#a6a7a855}.message-lines span:nth-child(2){align-self:flex-end;width:48%;background:#ee986c88}.message-lines span:nth-child(3){width:40%}.board-flow{display:block;width:100%;height:25px}.group-sync{display:flex;justify-content:space-around;align-items:center;gap:7px;font:9px var(--mono);color:var(--muted);height:22px}.group-sync>span:first-child,.group-sync>span:last-child{color:var(--accent);font-size:15px}.group-backend{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #505760;border-radius:4px;padding:5px 10px;background:#23282e;font-size:11px;line-height:1.25}.client-label{font:9px var(--mono);color:var(--muted)}
        @media(max-width:400px){.collaboration-visual{padding-left:13px;padding-right:13px}.group-members{gap:5px}.group-members>span{font-size:10px;padding:5px 3px;gap:4px}.group-feature strong{font-size:11px}.client-label{font-size:8px}.group-sync{font-size:8px}}

        /* Collaboration services and expanded view. */
        .collaboration-visual{height:250px;padding-bottom:9px}.group-services{display:grid;grid-template-columns:1fr 65px 1fr;align-items:center;gap:6px}.group-service{border:1px solid #505760;border-radius:5px;padding:5px 10px;background:#23282e;text-align:center}.group-service strong{display:block;font-size:12px;font-weight:400;line-height:1.3}.group-service>span{display:block;font:9px/1.5 var(--mono);color:var(--muted)}.database-service{border-color:#80624d;background:#29231f}.group-storage-link{text-align:center;color:var(--accent);line-height:1}.group-storage-link>span{font-size:19px}.group-storage-link small{display:block;margin-top:3px;font:8px var(--mono);color:var(--muted)}.collaboration-open{display:block;margin:6px auto 0;padding:3px;background:transparent;border:0;color:var(--accent);font:10px var(--mono)}.collaboration-open:hover{text-decoration:underline;text-underline-offset:3px}
        #collaboration-dialog{max-width:900px}.collaboration-scroll{margin:24px;overflow:auto;padding:24px;background:#202327;border:1px solid var(--line);border-radius:7px}.collaboration-scroll .group-architecture{max-width:unset;min-width:600px;width:100%}.collaboration-scroll .group-members>span{font-size:16px;padding:14px}.collaboration-scroll .member-connectors{height:30px}.collaboration-scroll .group-workspace{padding:40px 20px 18px}.collaboration-scroll .workspace-caption{font-size:12px;top:13px}.collaboration-scroll .group-feature strong{font-size:19px}.collaboration-scroll .message-lines{height:50px;max-width:210px;padding-top:12px;gap:6px}.collaboration-scroll .message-lines span{height:6px}.collaboration-scroll .board-flow{height:50px}.collaboration-scroll .group-sync{height:48px;font-size:13px}.collaboration-scroll .group-sync>span:first-child,.collaboration-scroll .group-sync>span:last-child{font-size:25px}.collaboration-scroll .group-services{grid-template-columns:1fr 95px 1fr}.collaboration-scroll .group-service{padding:14px}.collaboration-scroll .group-service strong{font-size:20px}.collaboration-scroll .group-service>span{font-size:13px}.collaboration-scroll .group-storage-link small{font-size:11px}.collaboration-scroll .group-storage-link>span{font-size:28px}
        @media(max-width:400px){.collaboration-scroll{margin:14px;padding:18px}.workspace-caption{font-size:7px}}

        .organization-link{color:inherit;text-underline-offset:4px}.organization-link:hover{color:var(--accent);text-decoration:underline}.organization-brand{display:inline-flex;align-items:center;gap:14px}.organization-brand:hover{text-decoration:none}.organization-brand:hover>span{text-decoration:underline}

        .organization-arrow{display:inline-block;font-size:.8em;line-height:1;vertical-align:baseline}.organization-brand .organization-arrow{font-size:.5em;margin-left:-5px}.organization-brand:hover>.organization-arrow{text-decoration:none}
    
/* Numbered responsibilities in the Abbott panel. */

.employer-bottom .experience-point-first {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: 0 0 20px;
}

.employer-bottom .experience-point-number {
    font-family: var(--serif);
    font-style: italic;
    font-size: 26px;
    line-height: 1;
    color: var(--accent);
}

.employer-bottom .experience-point-copy {
    margin: 0;
}

.employer-bottom .experience-point-middle {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    border-top: 1px solid var(--line);
    padding: 20px 0;
}

.employer-bottom .experience-point-last {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    border-top: 1px solid var(--line);
    padding: 20px 0 0;
}


/* Scroll typing: inline glyphs retain the existing fonts and line layout. */
.typing-run { position: relative; }
.typing-character { opacity: 0; }
.typing-character.typed { opacity: 1; }
.typing-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
    .typing-character { opacity: 1 !important; }
}
@media print {
    .typing-character { opacity: 1 !important; }
}