:root {
    --chalk-black: #151515;
    --graphite: #242424;
    --chalk-white: #F7F3EA;
    --chalk-muted: #BEB9AD;
    --paper: #FFF7E8;
    --lime: #B7FF00;
    --purple: #7B2CFF;
    --violet: #A855F7;
    --pink: #FF4FD8;
    --yellow: #FFE94D;
    --line: rgba(247, 243, 234, 0.82);
    --font-display: "Bungee", "Space Grotesk", sans-serif;
    --font-body: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 8%, rgba(183,255,0,0.16), transparent 22%),
        radial-gradient(circle at 92% 12%, rgba(123,44,255,0.18), transparent 24%),
        linear-gradient(135deg, rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(45deg, rgba(255,255,255,0.025) 1px, transparent 1px),
        var(--chalk-black);
    background-size: auto, auto, 34px 34px, 48px 48px, auto;
    color: var(--chalk-white);
    font-family: var(--font-body);
    cursor: none;
}

a {
    color: inherit;
}

a,
button,
.case-board,
.repo-card,
.skill-stickers span,
.contact-card {
    cursor: none;
}

.neon-cursor {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    width: 0;
    height: 0;
    pointer-events: none;
}

.neon-cursor-dot,
.neon-cursor-ring {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
}

.neon-cursor-dot {
    width: 9px;
    height: 9px;
    background: var(--lime);
    box-shadow:
        0 0 10px rgba(183,255,0,0.95),
        0 0 24px rgba(183,255,0,0.55);
}

.neon-cursor-ring {
    width: 36px;
    height: 36px;
    border: 2px solid var(--chalk-white);
    box-shadow:
        0 0 0 2px rgba(123,44,255,0.56),
        0 0 18px rgba(123,44,255,0.65),
        inset 0 0 14px rgba(183,255,0,0.26);
    opacity: 0.95;
    transition: width 0.16s, height 0.16s, border-color 0.16s, opacity 0.16s;
}

.neon-cursor.is-hovering .neon-cursor-dot {
    background: var(--pink);
    box-shadow:
        0 0 10px rgba(255,79,216,0.95),
        0 0 26px rgba(255,79,216,0.56);
}

.neon-cursor.is-hovering .neon-cursor-ring {
    width: 52px;
    height: 52px;
    border-color: var(--lime);
}

@media (pointer: coarse) {
    body,
    a,
    button,
    .case-board,
    .repo-card,
    .skill-stickers span,
    .contact-card {
        cursor: auto;
    }

    .neon-cursor {
        display: none;
    }
}

.chalk-noise {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    opacity: 0.16;
    mix-blend-mode: screen;
    background:
        repeating-radial-gradient(circle at 18% 22%, rgba(255,255,255,0.24) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 7px);
}

.wall-nav {
    position: fixed;
    left: 50%;
    top: 16px;
    z-index: 60;
    display: flex;
    gap: 4px;
    padding: 6px;
    border: 2px solid var(--line);
    border-radius: 999px;
    background: rgba(21,21,21,0.74);
    box-shadow: 0 0 0 4px rgba(21,21,21,0.5), 0 0 24px rgba(183,255,0,0.12);
    transform: translateX(-50%);
    backdrop-filter: blur(8px);
}

.wall-nav a {
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--chalk-white);
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.wall-nav a:hover {
    background: var(--lime);
    color: var(--chalk-black);
}

.chalkboard {
    overflow: hidden;
}

.panel {
    position: relative;
    min-height: 100vh;
    padding: clamp(86px, 9vw, 120px) clamp(18px, 5vw, 64px);
}

.panel::before {
    content: "";
    position: absolute;
    inset: 28px;
    border: 2px dashed rgba(247,243,234,0.16);
    pointer-events: none;
}

.hero-wall {
    display: grid;
    align-content: center;
    gap: 26px;
}

.eyebrow {
    justify-self: start;
}

.sticker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 30px;
    padding: 6px 14px;
    border: 3px solid var(--chalk-white);
    border-radius: 8px;
    color: var(--chalk-black);
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 5px 5px 0 rgba(0,0,0,0.24);
    transform: rotate(-1.4deg);
}

.sticker-white {
    background: var(--paper);
}

.sticker-purple {
    background: var(--purple);
    color: var(--chalk-white);
}

.sticker-lime {
    background: var(--lime);
}

.hero-title {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: clamp(2px, 1vw, 12px);
    max-width: 1120px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(70px, 15vw, 220px);
    line-height: 0.78;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hero-title span {
    display: inline-block;
    color: var(--lime);
    -webkit-text-stroke: clamp(2px, 0.45vw, 7px) var(--chalk-white);
    text-shadow:
        8px 8px 0 var(--purple),
        0 0 28px rgba(183,255,0,0.32);
    transform: rotate(var(--r, -2deg)) translateY(var(--y, 0));
}

.hero-title span:nth-child(2) {
    --r: 2deg;
    --y: 8px;
    color: var(--purple);
    text-shadow: 8px 8px 0 var(--lime), 0 0 28px rgba(123,44,255,0.32);
}

.hero-title span:nth-child(3) {
    --r: -1deg;
    color: var(--chalk-black);
}

.hero-title span:nth-child(4) {
    --r: 2.6deg;
}

.hero-title small {
    margin-left: 10px;
    color: var(--chalk-white);
    font-size: clamp(24px, 4vw, 58px);
    line-height: 1;
    text-shadow: 4px 4px 0 var(--purple);
}

.hero-card {
    max-width: 760px;
}

.chalk-card,
.paper-card,
.case-board,
.repo-card,
.contact-card,
.portrait-card,
.pixel-companion-card {
    border: 3px solid var(--line);
    border-radius: 10px;
    background: rgba(32,32,32,0.82);
    box-shadow: 9px 9px 0 rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.04);
}

.chalk-card {
    padding: 22px;
}

.hero-role,
.paper-label {
    margin: 0 0 12px;
    color: var(--lime);
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero-card p:last-child,
.paper-card p,
.wall-intro,
.case-copy p,
.repo-card p,
.contact-card span,
.contact-card a {
    color: var(--chalk-muted);
    font-size: 15px;
    line-height: 1.75;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-meta span,
.github-chip,
.daily-download-chip {
    padding: 7px 12px;
    border: 2px solid rgba(247,243,234,0.56);
    border-radius: 999px;
    color: var(--chalk-white);
    font-family: var(--font-display);
    font-size: 11px;
}

.github-chip {
    border-color: var(--lime);
    background: rgba(183,255,0,0.14);
    color: var(--lime);
    box-shadow: 0 0 18px rgba(183,255,0,0.16);
}

.github-chip:hover {
    background: var(--lime);
    color: var(--chalk-black);
}

.daily-download-chip {
    border-color: var(--pink);
    background: rgba(255,79,216,0.14);
    color: var(--chalk-white);
    box-shadow: 0 0 18px rgba(255,79,216,0.16);
}

.daily-download-chip::after {
    content: "PDF";
    margin-left: 8px;
    color: var(--lime);
}

.daily-download-chip:hover,
.daily-download-chip:focus-visible {
    background: var(--pink);
    color: var(--chalk-black);
}

.daily-download-chip:disabled {
    opacity: 0.72;
}

.hero-doodles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.doodle-star {
    position: absolute;
    color: var(--chalk-white);
    font-size: clamp(36px, 5vw, 70px);
    text-shadow: 0 0 16px rgba(255,255,255,0.22);
}

.star-a {
    right: 14vw;
    top: 14vh;
    transform: rotate(12deg);
}

.star-b {
    left: 6vw;
    bottom: 18vh;
    color: var(--lime);
}

.doodle-loop {
    position: absolute;
    right: -34px;
    top: 20vh;
    width: 190px;
    height: 190px;
    border: 14px solid var(--lime);
    border-radius: 50%;
    box-shadow: 0 0 24px rgba(183,255,0,0.42);
}

.doodle-zigzag {
    position: absolute;
    left: 6vw;
    top: 18vh;
    width: 96px;
    height: 42px;
    border-top: 4px solid var(--chalk-white);
    border-bottom: 4px solid var(--chalk-white);
    transform: skew(-28deg) rotate(-10deg);
    opacity: 0.72;
}

.section-heading {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: clamp(26px, 5vw, 46px);
}

.section-number {
    color: var(--purple);
    font-family: var(--font-display);
    font-size: clamp(36px, 7vw, 82px);
    text-shadow: 4px 4px 0 rgba(183,255,0,0.2);
}

.section-heading h2 {
    margin: 0;
    padding: 7px 18px;
    border: 3px solid var(--line);
    border-radius: 8px;
    background: var(--chalk-black);
    color: var(--chalk-white);
    font-family: var(--font-display);
    font-size: clamp(24px, 4vw, 52px);
    line-height: 1;
    text-transform: uppercase;
}

.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.62fr) minmax(220px, 0.44fr);
    gap: 24px;
    align-items: stretch;
}

.paper-card {
    padding: 24px;
    background: var(--paper);
    color: var(--chalk-black);
    transform: rotate(-1deg);
}

.paper-card h3 {
    margin: 0 0 12px;
    color: var(--chalk-black);
    font-family: var(--font-display);
    font-size: clamp(30px, 5vw, 54px);
}

.paper-card p,
.paper-card li {
    color: #333;
}

.paper-card ul {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding-left: 20px;
}

.portrait-card {
    position: relative;
    padding: 14px;
    background: rgba(32,32,32,0.88);
    transform: rotate(1.3deg);
}

.portrait-card img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border: 3px solid var(--chalk-white);
    background: var(--paper);
    filter: saturate(1.03) contrast(1.04);
}

.portrait-card figcaption {
    margin-top: 10px;
    color: var(--lime);
    font-family: var(--font-display);
    font-size: 11px;
    text-transform: uppercase;
}

.pixel-companion-card {
    position: relative;
    display: grid;
    align-content: space-between;
    min-height: 454px;
    padding: 14px;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 18%, rgba(183,255,0,0.22), transparent 22%),
        radial-gradient(circle at 78% 18%, rgba(255,79,216,0.18), transparent 24%),
        rgba(32,32,32,0.88);
    transform: rotate(1.3deg);
}

.pixel-companion-card::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 2px dashed rgba(247,243,234,0.22);
    pointer-events: none;
}

.pixel-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 360px;
    border: 3px solid var(--chalk-white);
    border-radius: 8px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(247,243,234,0.05) 1px, transparent 1px),
        linear-gradient(0deg, rgba(247,243,234,0.05) 1px, transparent 1px),
        radial-gradient(circle at 50% 28%, rgba(183,255,0,0.16), transparent 32%),
        #181818;
    background-size: 16px 16px, 16px 16px, auto, auto;
    image-rendering: pixelated;
    --look-x: 0px;
    --look-y: 0px;
}

.pixel-sun {
    position: absolute;
    right: 28px;
    top: 28px;
    width: 42px;
    height: 42px;
    background: var(--yellow);
    box-shadow:
        0 0 0 8px rgba(255,233,77,0.18),
        0 0 24px rgba(255,233,77,0.34);
    clip-path: polygon(50% 0, 62% 28%, 92% 14%, 76% 44%, 100% 50%, 76% 58%, 92% 86%, 62% 72%, 50% 100%, 38% 72%, 8% 86%, 24% 58%, 0 50%, 24% 44%, 8% 14%, 38% 28%);
    animation: pixel-sun-pulse 2.4s steps(2, end) infinite;
}

.pixel-shadow {
    position: absolute;
    left: 50%;
    bottom: 54px;
    width: 104px;
    height: 14px;
    background: rgba(0,0,0,0.42);
    transform: translateX(-50%);
    clip-path: polygon(8% 20%, 92% 20%, 100% 50%, 92% 80%, 8% 80%, 0 50%);
    animation: pixel-shadow-breathe 1.4s steps(2, end) infinite;
}

.pixel-thoughts {
    position: absolute;
    left: 24px;
    top: 34px;
    display: grid;
    grid-template-columns: repeat(3, 12px);
    gap: 8px;
    opacity: 0.78;
}

.pixel-thoughts span {
    width: 12px;
    height: 12px;
    background: var(--lime);
    box-shadow:
        0 0 0 3px rgba(247,243,234,0.18),
        0 0 18px rgba(183,255,0,0.28);
    animation: pixel-thought-pop 2.4s steps(4, end) infinite;
}

.pixel-thoughts span:nth-child(2) {
    background: var(--pink);
    animation-delay: 0.22s;
}

.pixel-thoughts span:nth-child(3) {
    background: var(--purple);
    animation-delay: 0.44s;
}

.pixel-character {
    position: relative;
    z-index: 1;
    width: min(190px, 66%);
    height: auto;
    overflow: visible;
    transform: translate(var(--look-x), var(--look-y)) translateY(8px);
    animation: pixel-idle 1.8s steps(4, end) infinite;
    image-rendering: pixelated;
    shape-rendering: crispEdges;
}

.pixel-character * {
    vector-effect: non-scaling-stroke;
}

.pc-face,
.pc-ear,
.pc-neck,
.pc-skin,
.pc-hand {
    fill: #F2A582;
    stroke: #1A1412;
    stroke-width: 4;
}

.pc-ear,
.pc-neck,
.pc-hand {
    fill: #D9896F;
}

.pc-hair-back,
.pc-hair-side {
    fill: #4A2A23;
    stroke: #1A1412;
    stroke-width: 4;
}

.pc-bang {
    fill: #2F1B18;
    stroke: #1A1412;
    stroke-width: 4;
    animation: pixel-bangs-sway 1.8s steps(4, end) infinite;
}

.pc-eye {
    fill: #111;
    transform: translate(var(--eye-x, 0), var(--eye-y, 0));
    animation: pixel-svg-blink 4.4s steps(1, end) infinite;
}

.pc-cheek {
    fill: #FF75A8;
}

.pc-mouth {
    fill: #7D3A38;
}

.pc-shirt {
    fill: #7134FF;
    stroke: #1A1412;
    stroke-width: 4;
}

.pc-shirt-light {
    fill: #9A55FF;
}

.pc-scarf,
.pc-scarf-tail {
    fill: var(--lime);
    stroke: #1A1412;
    stroke-width: 4;
    animation: pixel-scarf-sway 0.9s steps(2, end) infinite;
}

.pc-leg {
    fill: #2C3145;
    stroke: #1A1412;
    stroke-width: 4;
}

.pc-shoe {
    fill: #141824;
    stroke: #1A1412;
    stroke-width: 4;
}

.pc-laptop {
    animation: pixel-laptop-glow 1.8s steps(3, end) infinite;
}

.pc-laptop-screen {
    fill: #ECE8D8;
    stroke: #1A1412;
    stroke-width: 4;
}

.pc-laptop-base {
    fill: #A7A39A;
    stroke: #1A1412;
    stroke-width: 4;
}

.pc-laptop-glow {
    fill: var(--lime);
}

.pc-arm-left {
    animation: pixel-left-arm 1.8s steps(4, end) infinite;
    transform-origin: 36px 104px;
}

.pc-arm-right {
    animation: pixel-wave 3.2s steps(5, end) infinite;
    transform-origin: 92px 104px;
}

.pc-leg-left {
    animation: pixel-leg-left 1.8s steps(4, end) infinite;
    transform-origin: 53px 137px;
}

.pc-leg-right {
    animation: pixel-leg-right 1.8s steps(4, end) infinite;
    transform-origin: 77px 137px;
}

.pixel-companion-card figcaption {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 4px;
    margin-top: 10px;
    color: var(--lime);
    font-family: var(--font-display);
    font-size: 11px;
    text-transform: uppercase;
}

.pixel-companion-card figcaption span {
    color: var(--chalk-muted);
    font-size: 10px;
}

.pixel-companion-card.is-coding .arm-right {
    animation: pixel-type 0.46s steps(2, end) infinite;
}

.pixel-companion-card.is-coding .pc-arm-right {
    animation: pixel-type 0.46s steps(2, end) infinite;
}

.pixel-companion-card.is-coding .pixel-laptop,
.pixel-companion-card.is-coding .pc-laptop {
    animation: pixel-laptop-glow 0.7s steps(2, end) infinite;
}

.pixel-companion-card.is-looking .pixel-character {
    animation: pixel-look 1.05s steps(3, end) infinite;
}

.pixel-companion-card.is-looking .pixel-eye {
    --eye-x: 2px;
}

.pixel-companion-card.is-looking .pc-eye {
    --eye-x: 2px;
}

.pixel-companion-card.is-waving .arm-right {
    animation: pixel-big-wave 0.72s steps(4, end) 2;
}

.pixel-companion-card.is-waving .pc-arm-right {
    animation: pixel-big-wave 0.72s steps(4, end) 2;
}

.pixel-companion-card.is-waving .pixel-character {
    animation: pixel-hop 0.72s steps(4, end) 2;
}

.pixel-companion-card.is-waving .pixel-thoughts span {
    animation-duration: 0.72s;
}

.pixel-stage.is-tracking .pixel-character {
    transition: transform 0.08s steps(2, end);
}

.mini-index {
    display: grid;
    align-content: start;
    gap: 14px;
    transform: rotate(-2deg);
}

.mini-index span {
    padding: 12px;
    border: 2px solid var(--line);
    border-radius: 8px;
    background: rgba(123,44,255,0.2);
    color: var(--chalk-white);
    font-family: var(--font-display);
    font-size: 13px;
}

.experience-wall {
    display: grid;
    align-content: center;
}

.experience-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1.14fr);
    gap: clamp(18px, 3vw, 30px);
    align-items: stretch;
}

.experience-card {
    display: grid;
    align-content: start;
    gap: 18px;
    min-height: 520px;
    padding: clamp(22px, 4vw, 38px);
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 18%, rgba(183,255,0,0.18), transparent 26%),
        radial-gradient(circle at 86% 10%, rgba(255,79,216,0.18), transparent 28%),
        rgba(20,20,20,0.88);
    transform: rotate(-0.8deg);
}

.experience-card::after {
    content: "AI / FDE";
    position: absolute;
    right: -34px;
    bottom: 34px;
    padding: 8px 42px;
    border: 2px solid rgba(247,243,234,0.72);
    background: var(--purple);
    color: var(--chalk-white);
    font-family: var(--font-display);
    font-size: 12px;
    transform: rotate(-12deg);
}

.experience-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.experience-topline .sticker {
    margin: 0;
}

.experience-topline span {
    color: var(--lime);
    font-family: var(--font-display);
    font-size: 13px;
}

.experience-card h3 {
    margin: 10px 0 0;
    color: var(--chalk-white);
    font-family: var(--font-display);
    font-size: clamp(44px, 8vw, 96px);
    line-height: 0.95;
    text-shadow: 6px 6px 0 rgba(123,44,255,0.72);
}

.experience-card p {
    max-width: 620px;
    color: rgba(247,243,234,0.84);
    font-size: clamp(16px, 1.7vw, 20px);
    line-height: 1.75;
}

.experience-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 8px;
}

.experience-tags span {
    padding: 7px 10px;
    border: 2px solid rgba(247,243,234,0.74);
    border-radius: 999px;
    background: rgba(0,0,0,0.28);
    color: var(--chalk-white);
    font-family: var(--font-display);
    font-size: 10px;
}

.experience-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.experience-note {
    position: relative;
    min-height: 238px;
    padding: 22px;
    transform: rotate(var(--note-rotate, 1deg));
}

.experience-note:nth-child(2) {
    --note-rotate: -1.2deg;
}

.experience-note:nth-child(3) {
    --note-rotate: -0.8deg;
}

.experience-note:nth-child(4) {
    --note-rotate: 1.4deg;
}

.experience-note > span {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
    border: 3px solid var(--chalk-black);
    border-radius: 50%;
    background: var(--lime);
    color: var(--chalk-black);
    font-family: var(--font-display);
    font-size: 13px;
}

.experience-note h3 {
    margin: 0 0 10px;
    font-size: clamp(20px, 2.4vw, 30px);
    line-height: 1.08;
}

.experience-note p {
    margin: 0;
    color: #333;
    font-size: 15px;
    line-height: 1.7;
}
.case-wall {
    display: grid;
    gap: 28px;
}

.case-board {
    position: relative;
    display: grid;
    grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
    gap: 24px;
    padding: clamp(18px, 3vw, 28px);
    overflow: hidden;
}

.case-board-wide {
    min-height: 450px;
}

.case-board::after {
    content: "✦";
    position: absolute;
    right: 18px;
    top: 12px;
    color: var(--lime);
    font-size: 30px;
}

.case-copy h3 {
    margin: 16px 0 12px;
    color: var(--chalk-white);
    font-family: var(--font-display);
    font-size: clamp(26px, 4.5vw, 54px);
    line-height: 1.04;
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0;
}

.tag-row span {
    padding: 6px 10px;
    border: 2px solid var(--line);
    border-radius: 999px;
    background: var(--chalk-black);
    color: var(--lime);
    font-family: var(--font-display);
    font-size: 10px;
}

.contribution {
    padding-left: 14px;
    border-left: 5px solid var(--purple);
}

.evidence-strip {
    position: relative;
    min-height: 330px;
}

.evidence-slider {
    position: relative;
    min-width: 0;
    border: 4px solid var(--chalk-white);
    border-radius: 12px;
    background: rgba(0,0,0,0.26);
    box-shadow: 10px 10px 0 rgba(0,0,0,0.3);
    overflow: hidden;
}

.evidence-slider.compact {
    min-height: 320px;
}

.evidence-track {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.evidence-track::-webkit-scrollbar {
    display: none;
}

.evidence-track img {
    flex: 0 0 100%;
    width: 100%;
    height: clamp(320px, 38vw, 520px);
    object-fit: contain;
    object-position: center;
    scroll-snap-align: center;
    background:
        linear-gradient(135deg, rgba(183,255,0,0.08), transparent 42%),
        #101010;
    padding: 12px;
    cursor: zoom-in;
}

.evidence-slider.compact .evidence-track img {
    height: 320px;
}

.evidence-slider.phone .evidence-track img {
    object-fit: contain;
    background: #111;
}

.system-evidence .evidence-track img {
    object-fit: contain;
    background:
        linear-gradient(135deg, rgba(183,255,0,0.06), transparent 36%),
        rgba(245,248,252,0.96);
    padding: 10px;
}

.evidence-lightbox {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(18px, 4vw, 46px);
    background: rgba(10,10,10,0.88);
    backdrop-filter: blur(10px);
}

.evidence-lightbox.is-open {
    display: flex;
}

.evidence-lightbox img {
    display: block;
    max-width: min(1180px, 88vw);
    max-height: 86vh;
    object-fit: contain;
    border: 3px solid var(--chalk-white);
    border-radius: 10px;
    background: #101010;
    box-shadow: 14px 14px 0 rgba(0,0,0,0.34), 0 0 34px rgba(183,255,0,0.14);
}

.evidence-lightbox-close,
.evidence-lightbox-nav {
    position: absolute;
    display: inline-grid;
    place-items: center;
    border: 2px solid var(--chalk-white);
    background: rgba(21,21,21,0.88);
    color: var(--chalk-white);
    font-family: var(--font-display);
    box-shadow: 5px 5px 0 rgba(0,0,0,0.28);
}

.evidence-lightbox-close {
    top: clamp(18px, 3vw, 34px);
    right: clamp(18px, 3vw, 34px);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    font-size: 24px;
    line-height: 1;
}

.evidence-lightbox-nav {
    top: 50%;
    width: 46px;
    height: 58px;
    border-radius: 10px;
    font-size: 34px;
    transform: translateY(-50%);
}

.evidence-lightbox-prev {
    left: clamp(14px, 3vw, 42px);
}

.evidence-lightbox-next {
    right: clamp(14px, 3vw, 42px);
}

.evidence-lightbox-close:hover,
.evidence-lightbox-nav:hover,
.evidence-lightbox-close:focus-visible,
.evidence-lightbox-nav:focus-visible {
    background: var(--lime);
    color: var(--chalk-black);
}

.evidence-lightbox-nav:disabled {
    opacity: 0.34;
}

.evidence-lightbox-count {
    position: absolute;
    left: 50%;
    bottom: clamp(16px, 3vw, 32px);
    padding: 7px 12px;
    border: 2px solid rgba(247,243,234,0.68);
    border-radius: 999px;
    background: rgba(21,21,21,0.86);
    color: var(--chalk-white);
    font-family: var(--font-display);
    font-size: 11px;
    transform: translateX(-50%);
}

body.evidence-lightbox-open {
    overflow: hidden;
}

.evidence-track .evidence-card {
    flex: 0 0 100%;
    min-height: clamp(320px, 38vw, 520px);
    padding: clamp(24px, 4vw, 42px);
    scroll-snap-align: center;
    background:
        linear-gradient(135deg, rgba(183,255,0,0.12), transparent 36%),
        radial-gradient(circle at 86% 18%, rgba(255,77,232,0.2), transparent 26%),
        #101010;
    border-left: 1px solid rgba(255,255,255,0.16);
    color: var(--chalk-white);
}

.evidence-kicker {
    display: inline-flex;
    margin: 0 0 14px;
    padding: 6px 10px;
    border: 2px solid var(--lime);
    color: var(--lime);
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0;
    background: rgba(0,0,0,0.38);
}

.evidence-card h4 {
    max-width: 620px;
    margin: 0 0 18px;
    color: var(--chalk-white);
    font-family: var(--font-display);
    font-size: clamp(26px, 4vw, 48px);
    line-height: 1.05;
}

.evidence-card p,
.evidence-card li {
    max-width: 680px;
    color: rgba(247,247,239,0.82);
    font-size: 15px;
    line-height: 1.8;
}

.system-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 28px 0 22px;
}

.system-flow span,
.capability-matrix span {
    border: 2px solid rgba(247,247,239,0.72);
    border-radius: 8px;
    background: rgba(0,0,0,0.34);
    box-shadow: 5px 5px 0 rgba(0,0,0,0.22);
}

.system-flow span {
    padding: 10px 12px;
    color: var(--lime);
    font-family: var(--font-display);
    font-size: 12px;
}

.system-flow i {
    width: 26px;
    height: 2px;
    background: var(--purple);
    box-shadow: 0 0 12px rgba(255,77,232,0.6);
}

.capability-matrix {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
}

.capability-matrix span {
    min-height: 64px;
    display: grid;
    place-items: center;
    padding: 10px;
    color: var(--chalk-white);
    text-align: center;
    font-weight: 800;
}

.delivery-card ul {
    display: grid;
    gap: 12px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.delivery-card li {
    position: relative;
    padding-left: 20px;
}

.delivery-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.82em;
    width: 8px;
    height: 8px;
    background: var(--lime);
    box-shadow: 0 0 12px rgba(183,255,0,0.7);
}

.evidence-nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 3px solid var(--chalk-white);
    border-radius: 50%;
    background: rgba(21,21,21,0.82);
    color: var(--lime);
    font-family: var(--font-display);
    font-size: 34px;
    line-height: 1;
    transform: translateY(-50%);
    box-shadow: 0 0 18px rgba(183,255,0,0.22);
}

.evidence-nav:hover {
    background: var(--lime);
    color: var(--chalk-black);
}

.evidence-nav:disabled {
    opacity: 0.28;
    pointer-events: none;
    box-shadow: none;
}

.evidence-prev {
    left: 12px;
}

.evidence-next {
    right: 12px;
}

.evidence-strip img,
.evidence-stack img,
.phone-collage img {
    position: absolute;
    border: 4px solid var(--chalk-white);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: 9px 9px 0 rgba(0,0,0,0.34);
    object-fit: cover;
    object-position: top center;
}

.evidence-strip img:nth-child(1) {
    left: 0;
    top: 8px;
    z-index: 3;
    width: 72%;
    height: 190px;
    transform: rotate(-2deg);
}

.evidence-strip img:nth-child(2) {
    right: 0;
    top: 92px;
    z-index: 2;
    width: 58%;
    height: 170px;
    transform: rotate(2deg);
}

.evidence-strip img:nth-child(3) {
    left: 14%;
    bottom: 0;
    z-index: 1;
    width: 70%;
    height: 150px;
    transform: rotate(-0.6deg);
}

.case-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.case-pair .case-board {
    grid-template-columns: 1fr;
    min-height: 560px;
}

.evidence-stack,
.phone-collage {
    position: relative;
    min-height: 260px;
}

.evidence-stack img:nth-child(1) {
    left: 0;
    top: 0;
    width: 78%;
    height: 170px;
    transform: rotate(-2deg);
}

.evidence-stack img:nth-child(2) {
    right: 0;
    bottom: 0;
    width: 72%;
    height: 150px;
    transform: rotate(2deg);
}

.phone-collage img {
    width: 32%;
    height: 255px;
    object-fit: cover;
}

.phone-collage img:nth-child(1) {
    left: 0;
    top: 0;
    transform: rotate(-3deg);
}

.phone-collage img:nth-child(2) {
    left: 34%;
    top: 18px;
    transform: rotate(1deg);
}

.phone-collage img:nth-child(3) {
    right: 0;
    top: 0;
    transform: rotate(3deg);
}

.wall-intro {
    max-width: 760px;
    margin: -18px 0 28px;
}

.draw-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 0 0 24px;
}

.draw-button {
    min-height: 42px;
    padding: 9px 16px;
    border: 3px solid var(--chalk-white);
    border-radius: 999px;
    background: var(--lime);
    color: var(--chalk-black);
    font-family: var(--font-display);
    font-size: 12px;
    text-transform: uppercase;
    box-shadow: 5px 5px 0 rgba(123,44,255,0.62);
}

.draw-button-ghost {
    background: rgba(32,32,32,0.84);
    color: var(--chalk-white);
}

.draw-button:hover {
    transform: translateY(-2px);
}

.draw-count,
.draw-hint {
    color: var(--chalk-muted);
    font-family: var(--font-display);
    font-size: 12px;
    text-transform: uppercase;
}

.draw-hint {
    color: rgba(247,243,234,0.62);
}

.repo-grid {
    position: relative;
    min-height: min(620px, 76vh);
    padding: 0;
    overflow: hidden;
    border: 3px dashed rgba(247,243,234,0.18);
    border-radius: 18px;
    background:
        radial-gradient(circle at 20% 30%, rgba(123,44,255,0.16), transparent 26%),
        radial-gradient(circle at 78% 52%, rgba(183,255,0,0.12), transparent 22%),
        rgba(0,0,0,0.18);
    perspective: 1400px;
}

.repo-card {
    position: absolute;
    left: 0;
    top: 0;
    width: clamp(158px, 14vw, 208px);
    min-height: 258px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
    touch-action: none;
    user-select: none;
    transform: translate(0, 0) rotate(var(--spread-rotate, -2deg));
    transform-style: preserve-3d;
    transition: filter 0.22s ease, scale 0.22s ease;
}

.repo-card:hover,
.repo-card.is-dragging {
    z-index: 8;
    filter: brightness(1.08);
    scale: 1.04;
}

.repo-card.is-dragging {
    filter: brightness(1.12) drop-shadow(0 0 24px rgba(183,255,0,0.2));
}

.repo-card-inner {
    position: relative;
    display: block;
    width: 100%;
    min-height: 258px;
    padding: 0;
    border: 0;
    background: transparent;
    transform-style: preserve-3d;
    transition: transform 0.58s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.repo-card.is-revealed .repo-card-inner {
    transform: rotateY(180deg);
}

.repo-back,
.repo-front {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-height: 258px;
    padding: 18px;
    border: 3px solid var(--chalk-white);
    border-radius: 14px;
    overflow: hidden;
    backface-visibility: hidden;
    box-shadow: 8px 9px 0 rgba(0,0,0,0.3), 0 0 24px rgba(183,255,0,0.08);
}

.repo-back {
    align-items: center;
    justify-content: center;
    gap: 12px;
    background:
        radial-gradient(circle at 50% 44%, rgba(183,255,0,0.2), transparent 22%),
        radial-gradient(circle at 50% 44%, transparent 0 32%, rgba(123,44,255,0.24) 33% 35%, transparent 36%),
        linear-gradient(135deg, transparent 0 44%, rgba(247,243,234,0.16) 45% 46%, transparent 47%),
        repeating-linear-gradient(90deg, rgba(183,255,0,0.14) 0 2px, transparent 2px 12px),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 10px),
        #181818;
}

.repo-back::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 2px dashed rgba(247,243,234,0.38);
    border-radius: 10px;
}

.repo-back::after {
    content: "✦";
    position: absolute;
    left: 50%;
    top: 22px;
    color: var(--card-accent, var(--lime));
    font-size: 24px;
    text-shadow: 0 0 16px currentColor;
    transform: translateX(-50%);
}

.repo-back strong {
    position: relative;
    z-index: 1;
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    border: 3px solid var(--chalk-white);
    border-radius: 50%;
    color: var(--card-accent, var(--lime));
    font-family: var(--font-display);
    font-size: 54px;
    line-height: 1;
    background: rgba(0,0,0,0.28);
    box-shadow: 0 0 28px color-mix(in srgb, var(--card-accent, var(--lime)) 42%, transparent);
    text-shadow: 4px 4px 0 rgba(123,44,255,0.72), 0 0 24px currentColor;
}

.repo-back em {
    position: relative;
    z-index: 1;
    color: var(--chalk-white);
    font-family: var(--font-display);
    font-size: 11px;
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.repo-front {
    justify-content: flex-start;
    background:
        linear-gradient(135deg, rgba(183,255,0,0.12), transparent 46%),
        rgba(32,32,32,0.94);
    transform: rotateY(180deg);
}

.pin-card {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 3;
    min-height: 26px;
    padding: 4px 8px;
    border: 2px solid var(--chalk-white);
    border-radius: 999px;
    background: rgba(0,0,0,0.34);
    color: var(--chalk-white);
    font-family: var(--font-display);
    font-size: 9px;
    letter-spacing: 0.06em;
    box-shadow: 0 0 14px rgba(255,255,255,0.12);
}

.pin-card:hover {
    background: var(--lime);
    color: var(--chalk-black);
}

.repo-card.is-pinned .pin-card {
    background: var(--card-accent, var(--lime));
    color: var(--chalk-black);
}

.repo-card.is-pinned .repo-front {
    opacity: 0.76;
    filter: saturate(0.82);
}

.repo-card.is-pinned::after {
    content: "已读";
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 5;
    padding: 4px 8px;
    border: 2px solid var(--card-accent, var(--lime));
    border-radius: 999px;
    color: var(--card-accent, var(--lime));
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
}

.repo-front em {
    width: fit-content;
    margin-bottom: 12px;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--card-accent, var(--purple));
    color: var(--chalk-black);
    font-family: var(--font-display);
    font-size: 10px;
    font-style: normal;
    text-transform: uppercase;
}

.repo-front h3 {
    margin: 0 0 10px;
    color: var(--lime);
    font-family: var(--font-display);
    font-size: clamp(17px, 1.65vw, 24px);
    line-height: 1.12;
}

.repo-front p {
    margin: 0 0 14px;
    color: var(--chalk-muted);
    font-size: 13px;
    line-height: 1.55;
}

.repo-front a {
    margin-top: auto;
    color: var(--card-accent, var(--lime));
    font-family: var(--font-display);
    font-size: 11px;
    text-transform: uppercase;
}

.repo-card[data-accent="lime"] { --card-accent: var(--lime); }
.repo-card[data-accent="purple"] { --card-accent: var(--purple); }
.repo-card[data-accent="pink"] { --card-accent: var(--pink); }
.repo-card[data-accent="cyan"] { --card-accent: #56D6FF; }

.repo-card[data-accent="purple"] .repo-front em,
.repo-card[data-accent="pink"] .repo-front em,
.repo-card[data-accent="cyan"] .repo-front em {
    color: var(--chalk-white);
}

.repo-card.is-revealed .repo-front {
    box-shadow: 8px 9px 0 rgba(0,0,0,0.3), 0 0 28px color-mix(in srgb, var(--card-accent, var(--lime)) 36%, transparent);
}

.github-board-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 48px;
    margin-top: 26px;
    padding: 10px 18px;
    border: 3px solid var(--chalk-white);
    border-radius: 10px;
    background: var(--lime);
    color: var(--chalk-black);
    font-family: var(--font-display);
    font-size: clamp(13px, 1.8vw, 18px);
    line-height: 1.2;
    text-transform: uppercase;
    box-shadow: 7px 7px 0 rgba(123,44,255,0.78), 0 0 22px rgba(183,255,0,0.22);
    transform: rotate(-1deg);
    transition: transform 0.18s, box-shadow 0.18s;
}

.github-board-link:hover {
    transform: translateY(-3px) rotate(0deg);
    box-shadow: 9px 10px 0 rgba(123,44,255,0.9), 0 0 30px rgba(183,255,0,0.3);
}

.skill-stickers {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(10px, 2vw, 18px);
    max-width: 1060px;
}

.skill-stickers span {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 8px 16px;
    border: 3px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--chalk-black);
    font-family: var(--font-display);
    font-size: clamp(13px, 1.5vw, 19px);
    box-shadow: 5px 6px 0 rgba(0,0,0,0.22);
    transform: rotate(var(--r, -2deg));
}

.skill-stickers span:nth-child(3n) {
    --r: 2deg;
    background: var(--lime);
}

.skill-stickers span:nth-child(4n) {
    --r: -1deg;
    background: var(--purple);
    color: var(--chalk-white);
}

.contact-wall {
    display: grid;
    align-content: center;
}

.daily-pdf-stage {
    position: fixed;
    left: -10000px;
    top: 0;
    width: 794px;
    padding: 34px;
    background:
        radial-gradient(circle at 18% 14%, rgba(99,74,37,0.12), transparent 26%),
        radial-gradient(circle at 78% 82%, rgba(99,74,37,0.1), transparent 24%),
        repeating-linear-gradient(0deg, rgba(31,24,16,0.035) 0 1px, transparent 1px 7px),
        #F2E2BF;
    color: #1B1712;
    font-family: "Songti SC", "SimSun", "STSong", "Noto Serif CJK SC", serif;
    pointer-events: none;
}

.daily-pdf-paper {
    width: 726px;
    min-height: 1055px;
    margin: 0 0 34px;
    border: 4px double #1B1712;
    padding: 20px 22px 22px;
    background:
        linear-gradient(90deg, rgba(27,23,18,0.04) 1px, transparent 1px),
        rgba(255,248,230,0.42);
    background-size: 18px 18px;
    box-shadow: inset 0 0 0 1px rgba(27,23,18,0.32);
}

.daily-pdf-continuation {
    display: flex;
    flex-direction: column;
}

.daily-pdf-continuation-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 8px 0;
    border-top: 3px double #1B1712;
    border-bottom: 3px double #1B1712;
    font-family: "Songti SC", "SimSun", "STSong", serif;
    font-size: 16px;
    font-weight: 900;
}

.daily-pdf-kicker,
.daily-pdf-meta,
.daily-pdf-section,
.daily-pdf-story-category {
    font-family: "Songti SC", "SimSun", "STSong", serif;
    font-weight: 700;
    letter-spacing: 0;
}

.daily-pdf-masthead {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 56px;
    gap: 16px;
    align-items: stretch;
    border-bottom: 5px double #1B1712;
    padding-bottom: 12px;
}

.daily-pdf-title-block {
    display: grid;
    align-content: center;
    text-align: center;
}

.daily-pdf-ear {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    align-items: center;
    justify-items: center;
    border: 2px solid #1B1712;
    padding: 8px 4px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.08;
}

.daily-pdf-ear span {
    writing-mode: vertical-rl;
    text-orientation: upright;
}

.daily-pdf-kicker {
    width: fit-content;
    margin: 0 auto 8px;
    padding: 3px 12px;
    border-top: 1px solid #1B1712;
    border-bottom: 1px solid #1B1712;
    color: #1B1712;
    font-size: 14px;
    text-align: center;
}

.daily-pdf-title {
    margin: 0;
    font-size: 62px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.08em;
    text-align: center;
    text-shadow: 2px 2px 0 rgba(27,23,18,0.12);
}

.daily-pdf-meta {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 12px auto 0;
    border-top: 2px solid #1B1712;
    border-bottom: 1px solid #1B1712;
    font-size: 13px;
}

.daily-pdf-meta span {
    padding: 5px 12px;
    border-right: 1px solid #1B1712;
}

.daily-pdf-meta span:last-child {
    border-right: 0;
}

.daily-pdf-lead {
    margin: 16px 0 14px;
    padding: 0 0 12px;
    border-bottom: 3px double #1B1712;
}

.daily-pdf-headline {
    margin: 4px 0 8px;
    font-size: 38px;
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: 0.02em;
}

.daily-pdf-summary {
    margin: 0;
    font-size: 18px;
    line-height: 1.72;
    text-indent: 2em;
}

.daily-pdf-signals {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 2px solid #1B1712;
    background:
        repeating-linear-gradient(90deg, rgba(27,23,18,0.04) 0 1px, transparent 1px 9px),
        rgba(255,248,230,0.68);
}

.daily-pdf-signals ul {
    columns: 2;
    column-gap: 26px;
    margin: 8px 0 0;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.55;
}

.daily-pdf-section,
.daily-pdf-story-category {
    margin: 0;
    color: #1B1712;
    font-size: 13px;
}

.daily-pdf-stories {
    column-count: 3;
    column-gap: 18px;
    column-rule: 2px solid rgba(27,23,18,0.42);
    border-top: 2px solid #1B1712;
    padding-top: 12px;
}

.daily-pdf-story {
    break-inside: avoid;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(27,23,18,0.32);
}

.daily-pdf-story h4 {
    margin: 4px 0 6px;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.16;
}

.daily-pdf-story p {
    margin: 0 0 8px;
    font-family: "Songti SC", "SimSun", "STSong", serif;
    font-size: 12.5px;
    line-height: 1.64;
    text-indent: 2em;
}

.daily-pdf-source {
    color: #4D3826;
    font-family: "Songti SC", "SimSun", "STSong", serif;
    font-size: 10px;
    font-weight: 700;
    word-break: break-word;
}

.contact-card {
    position: relative;
    display: grid;
    gap: 12px;
    max-width: 640px;
    padding: clamp(24px, 5vw, 48px);
    background:
        linear-gradient(90deg, var(--purple) 0 18px, transparent 18px),
        rgba(32,32,32,0.88);
}

.contact-card h3 {
    margin: 0;
    color: var(--chalk-white);
    font-family: var(--font-display);
    font-size: clamp(38px, 7vw, 86px);
    line-height: 0.96;
    text-transform: uppercase;
}

.contact-card a:hover {
    color: var(--lime);
}

@keyframes pixel-idle {
    0%, 100% { transform: translate(var(--look-x), var(--look-y)) translateY(8px) scale(1); }
    25% { transform: translate(var(--look-x), var(--look-y)) translateY(4px) scale(1); }
    50% { transform: translate(var(--look-x), var(--look-y)) translateY(0) scale(1); }
    75% { transform: translate(var(--look-x), var(--look-y)) translateY(4px) scale(1); }
}

@keyframes pixel-look {
    0%, 100% { transform: translate(calc(var(--look-x) - 5px), calc(var(--look-y) + 6px)) scale(1); }
    34% { transform: translate(calc(var(--look-x) + 5px), var(--look-y)) scale(1); }
    68% { transform: translate(calc(var(--look-x) + 2px), calc(var(--look-y) + 3px)) scale(1); }
}

@keyframes pixel-hop {
    0%, 100% { transform: translate(var(--look-x), var(--look-y)) translateY(8px) scale(1); }
    25% { transform: translate(var(--look-x), var(--look-y)) translateY(-8px) scale(1); }
    50% { transform: translate(var(--look-x), var(--look-y)) translateY(2px) scale(1); }
    75% { transform: translate(var(--look-x), var(--look-y)) translateY(-4px) scale(1); }
}

@keyframes pixel-shadow-breathe {
    0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 0.42; }
    50% { transform: translateX(-50%) scaleX(0.86); opacity: 0.28; }
}

@keyframes pixel-sun-pulse {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(12deg) scale(1.08); }
}

@keyframes pixel-thought-pop {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.45; }
    25% { transform: translateY(-6px) scale(1); opacity: 1; }
    50% { transform: translateY(0) scale(1.18); opacity: 0.86; }
    75% { transform: translateY(4px) scale(1); opacity: 0.62; }
}

@keyframes pixel-blink {
    0%, 92%, 100% { height: var(--px); }
    94%, 96% { height: calc(var(--px) / 2); transform: translateY(calc(var(--px) / 2)); }
}

@keyframes pixel-svg-blink {
    0%, 92%, 100% { transform: translate(var(--eye-x, 0), var(--eye-y, 0)) scaleY(1); }
    94%, 96% { transform: translate(var(--eye-x, 0), calc(var(--eye-y, 0) + 3px)) scaleY(0.25); }
}

@keyframes pixel-wave {
    0%, 84%, 100% { transform: translate(0, 0) rotate(0deg); }
    88% { transform: translate(6px, -6px) rotate(-24deg); }
    92% { transform: translate(12px, -12px) rotate(-42deg); }
    96% { transform: translate(6px, -6px) rotate(-18deg); }
}

@keyframes pixel-big-wave {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(6px, -6px) rotate(-28deg); }
    50% { transform: translate(12px, -18px) rotate(-56deg); }
    75% { transform: translate(6px, -6px) rotate(-20deg); }
}

@keyframes pixel-type {
    0%, 100% { transform: translate(0, 7px) rotate(10deg); }
    50% { transform: translate(-5px, 11px) rotate(2deg); }
}

@keyframes pixel-left-arm {
    0%, 100% { transform: translateY(0); }
    25%, 75% { transform: translateY(3px); }
    50% { transform: translateY(6px); }
}

@keyframes pixel-hair-sway {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(calc(var(--px) / -2)); }
}

@keyframes pixel-bangs-sway {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(2px); }
}

@keyframes pixel-scarf-sway {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

@keyframes pixel-leg-left {
    0%, 100% { transform: translateX(0); }
    25%, 75% { transform: translateX(-2px); }
    50% { transform: translateX(-5px); }
}

@keyframes pixel-leg-right {
    0%, 100% { transform: translateX(0); }
    25%, 75% { transform: translateX(2px); }
    50% { transform: translateX(5px); }
}

@keyframes pixel-laptop-glow {
    0%, 100% { filter: brightness(1); }
    35% { filter: brightness(1.28); }
    70% { filter: brightness(1.12); }
}

@media (max-width: 980px) {
    .about-grid,
    .experience-layout,
    .case-board,
    .case-pair {
        grid-template-columns: 1fr;
    }

    .experience-card,
    .case-pair .case-board {
        min-height: auto;
    }

    .evidence-strip,
    .evidence-stack,
    .phone-collage {
        min-height: 320px;
    }
}

@media (max-width: 640px) {
    .wall-nav {
        left: 12px;
        right: 12px;
        justify-content: space-between;
        overflow-x: auto;
        transform: none;
    }

    .panel {
        padding: 92px 18px 70px;
    }

    .panel::before {
        inset: 14px;
    }

    .hero-title {
        font-size: clamp(58px, 24vw, 108px);
    }

    .section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .portrait-card img {
        height: 320px;
    }

    .pixel-companion-card {
        min-height: 390px;
    }

    .pixel-stage {
        min-height: 292px;
    }

    .pixel-character {
        width: min(160px, 62%);
        transform: translateY(8px);
    }

    .evidence-strip img:nth-child(1),
    .evidence-strip img:nth-child(2),
    .evidence-strip img:nth-child(3),
    .evidence-stack img:nth-child(1),
    .evidence-stack img:nth-child(2) {
        width: 84%;
    }

    .phone-collage img {
        width: 44%;
        height: 230px;
    }

    .phone-collage img:nth-child(2) {
        left: 28%;
    }

    .capability-matrix,
    .experience-notes {
        grid-template-columns: 1fr;
    }

    .system-flow {
        align-items: flex-start;
        flex-direction: column;
    }

    .system-flow i {
        width: 2px;
        height: 18px;
        margin-left: 18px;
    }

    .repo-card {
        width: 154px;
    }
}

.daily-preview {
  position: relative;
  z-index: 2;
  width: min(980px, 100%);
  margin: 24px auto 0;
  padding: 22px;
  display: grid;
  gap: 16px;
  background: rgba(255, 247, 232, 0.94);
  color: #221b15;
}

.daily-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.daily-preview-head span {
  font: 700 0.78rem/1.2 var(--font-body);
  color: #7a3d00;
  text-transform: uppercase;
}

.daily-preview h2 {
  margin: 0;
  max-width: 860px;
  font: 800 clamp(1.45rem, 3vw, 2.35rem)/1.05 var(--font-display);
  letter-spacing: 0;
}

.daily-preview > p {
  margin: 0;
  max-width: 880px;
  font: 600 1rem/1.7 var(--font-body);
  color: #45382c;
}

.daily-preview-signals {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  list-style: none;
}

.daily-preview-signals li {
  padding: 10px 12px;
  border: 2px solid rgba(34, 27, 21, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.46);
  font: 700 0.88rem/1.45 var(--font-body);
}

.daily-preview-stories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.daily-preview-story {
  min-height: 190px;
  padding: 14px;
  border: 2px solid rgba(34, 27, 21, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  display: grid;
  align-content: start;
  gap: 8px;
}

.daily-preview-story p,
.daily-preview-story h3 {
  margin: 0;
}

.daily-preview-story h3 {
  font: 800 1rem/1.25 var(--font-display);
  letter-spacing: 0;
}

.daily-preview-category {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: #16110d;
  color: #fff7e8;
  font: 800 0.68rem/1 var(--font-body);
  text-transform: uppercase;
}

.daily-preview-body {
  font: 600 0.9rem/1.55 var(--font-body);
  color: #4f4033;
}

.daily-preview-story a {
  align-self: end;
  color: #7a3d00;
  font: 800 0.82rem/1.2 var(--font-body);
  text-decoration: underline;
}

@media (max-width: 720px) {
  .daily-preview {
    padding: 16px;
  }

  .daily-preview-signals,
  .daily-preview-stories {
    grid-template-columns: 1fr;
  }
}

.daily-preview[hidden] {
  display: none !important;
}