/* Crimson clouds, memory addresses, and a quieter kind of genjutsu. */
:root { --red: #f04450; --muted: #99959e; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; }
main, .site-footer { position: relative; z-index: 1; }
body { isolation: isolate; }
.archive-transition { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; overflow: hidden; visibility: hidden; opacity: 0; background: transparent; pointer-events: none; contain: paint; }
.archive-transition::before,.archive-transition::after { content: ""; position: absolute; inset: -15%; }
.archive-transition::before { z-index: 1; background: repeating-conic-gradient(from 12deg at 50% 50%,transparent 0 22deg,rgba(240,68,80,.08) 23deg,transparent 24deg 45deg),radial-gradient(circle at center,rgba(198,31,48,.28) 0 8%,rgba(60,10,18,.22) 25%,transparent 54%); transform: scale(.4); opacity: 0; }
.archive-transition::after { z-index: 4; inset: 0; opacity: 0; background: repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.52) 4px); }
.archive-transition.is-active { visibility: visible; animation: vault-veil .18s ease-out both; }
.archive-transition.is-active::before { animation: vault-aperture 1.18s .22s cubic-bezier(.16,.74,.2,1) both; }
.archive-transition.is-active::after { animation: vault-scanlines .25s .3s ease both; }
.route-eyelid { position: absolute; z-index: 1; left: 0; width: 100%; height: 50.5%; background: radial-gradient(ellipse at 50% 100%,#18070b 0,transparent 48%),#030305; will-change: transform; }
.route-eyelid::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,#a61f2d 20% 80%,transparent); box-shadow: 0 0 20px #d52b3a77; }
.route-eyelid-top { top: 0; transform: translateY(-101%); }
.route-eyelid-top::after { bottom: 0; }
.route-eyelid-bottom { bottom: 0; transform: translateY(101%); background: radial-gradient(ellipse at 50% 0,#18070b 0,transparent 48%),#030305; }
.route-eyelid-bottom::after { top: 0; }
.archive-transition.is-active .route-eyelid-top { animation: route-lid-top .56s cubic-bezier(.22,1,.36,1) both; }
.archive-transition.is-active .route-eyelid-bottom { animation: route-lid-bottom .56s cubic-bezier(.22,1,.36,1) both; }
.vault-coordinates { position: absolute; z-index: 3; top: clamp(22px,5vh,52px); left: clamp(20px,5vw,72px); right: clamp(20px,5vw,72px); display: flex; justify-content: space-between; color: #6e434a; font: 8px var(--mono); letter-spacing: .18em; animation: vault-coordinates 1.05s .18s ease both; }
.vault-coordinates span:last-child { color: #e5616c; }
.archive-transition .vault-eye { position: relative; z-index: 2; display: grid; place-items: center; width: min(26vw,220px); aspect-ratio: 1; will-change: transform,opacity; animation: vault-shell 1.22s .18s cubic-bezier(.16,.76,.18,1) both; }
.archive-transition .vault-eye::before,.archive-transition .vault-eye::after { content: ""; position: absolute; inset: -21%; border: 1px dashed #e9485675; border-radius: 50%; animation: vault-ring 1.1s .2s cubic-bezier(.17,.67,.24,1) both; }
.archive-transition .vault-eye::after { inset: 7%; border-style: solid; border-color: #ff6d7852; animation-direction: reverse; }
.archive-transition .vault-symbol { position: absolute; inset: 0; display: block; transform: translateZ(0); transform-origin: center center; -webkit-transform-origin: center center; background-color: transparent; background-image: url('/static/img/mangekyou.png'); background-position: center; background-repeat: no-repeat; background-size: contain; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform,opacity; animation: vault-eye 1.2s .22s linear both; }
.archive-transition .vault-reticle { position: absolute; inset: -35%; border: 1px solid #5b252d; border-radius: 50%; opacity: .55; animation: vault-reticle 1.1s ease both; }
.archive-transition .vault-reticle::before,.archive-transition .vault-reticle::after { content: ""; position: absolute; inset: 50% -10% auto; height: 1px; background: linear-gradient(90deg,transparent,#b83745 20%,transparent 20% 80%,#b83745 80%,transparent); }
.archive-transition .vault-reticle::after { transform: rotate(90deg); }
.archive-transition .vault-eye i { position: absolute; z-index: 3; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px #fff,0 0 28px var(--red); animation: vault-node 1.05s ease both; }
.archive-transition .vault-eye i:nth-of-type(1) { top: 2%; left: 50%; }
.archive-transition .vault-eye i:nth-of-type(2) { right: 8%; bottom: 25%; }
.archive-transition .vault-eye i:nth-of-type(3) { left: 8%; bottom: 25%; }
.vault-caption { position: absolute; z-index: 3; bottom: clamp(38px,9vh,95px); display: flex; align-items: center; animation: vault-caption 1.08s .18s ease both; }
.archive-transition .vault-caption p { display: grid; grid-template-columns: auto auto; gap: 3px 18px; margin: 0; color: #d8a0a6; font: 700 9px var(--mono); letter-spacing: .2em; }
.archive-transition .vault-caption p small { grid-column: 1/-1; color: #70474d; font: 7px var(--mono); }
.archive-transition .vault-caption p b { font: inherit; }
.archive-transition .vault-caption p span { color: #ff4d59; }
body.vault-opening { overflow: hidden; }
.brand-eye { width: 32px; height: 32px; transition: transform .7s var(--ease); }
.brand:hover .brand-eye { transform: rotate(120deg); }
.site-header nav a { white-space: nowrap; }
.site-header nav a:last-child { color: #b17b82; }
.akatsuki-cloud { width: 160px; fill: #911622; stroke: #e35a63; stroke-width: 2; }
.akatsuki-cloud .cloud-whorl { fill: none; stroke: #0a090d; stroke-width: 4; stroke-linecap: round; }
.ambient-clouds { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ambient-clouds .akatsuki-cloud { position: absolute; width: 420px; opacity: .018; animation: cloud-drift 35s ease-in-out infinite alternate; }
.ambient-clouds .akatsuki-cloud:first-child { left: -220px; top: 25%; transform: rotate(-18deg); }
.ambient-clouds .akatsuki-cloud:last-child { right: -180px; bottom: 12%; animation-delay: -15s; transform: rotate(20deg); }
.scroll-address { --scroll-progress:0%; position:fixed; z-index:850; top:50%; left:max(8px,calc((100vw - var(--max))/2 - 50px)); display:grid; justify-items:center; gap:8px; width:32px; padding:3px 0; color:#80777f; font-family:var(--mono); pointer-events:none; transform:translateY(-50%); }
.scroll-address::before { content:""; position:absolute; z-index:-1; top:22px; bottom:16px; left:50%; width:1px; background:linear-gradient(transparent,#3b363d 18% 82%,transparent); }
.scroll-address::after { content:""; width:5px; height:5px; border:1px solid #88414a; background:#09090b; transform:rotate(45deg); }
.scroll-address b { padding:3px 4px; background:#e8e4df; color:#111014; font-size:7px; letter-spacing:.1em; }
.scroll-address > span { color:#c88a92; font:700 8px var(--mono); letter-spacing:.12em; writing-mode:vertical-rl; transform:rotate(180deg); }
.scroll-address > i { position:relative; width:3px; height:54px; overflow:hidden; background:repeating-linear-gradient(to bottom,#38333a 0 2px,transparent 2px 5px); }
.scroll-address > i em { position:absolute; right:0; bottom:0; left:0; height:var(--scroll-progress); background:#d54a56; box-shadow:0 0 9px #d54a56; transition:height .12s linear; }
.scroll-address small { color:#5f5960; font:6px var(--mono); letter-spacing:.16em; }
.scroll-address.is-scrolling > span { color:#f0a0a8; text-shadow:0 0 10px #d54a5670; }
.hero { gap: 45px; }
.hero h1 { white-space: nowrap; font-size: clamp(76px, 10.2vw, 135px); }
.hero-copy > .eyebrow { margin-bottom: 34px; }
.hero-description { max-width: 510px; }
.hero-sharingan { position: absolute; width: 650px; height: 650px; opacity: .07; animation: orbit 65s linear infinite; }
.hero-visual { isolation: isolate; }
.hero-visual .orbit { z-index: -1; }
.hero-links, .post-meta, .entry-meta { color: #a49ba7; }
.hero-role { font-size: 12px; line-height: 1.8; }
.section-heading .eyebrow { color: #ece9e5; }
.section-heading .eyebrow span { color: #8b858c; }
.portrait-image img { object-position: 54% 28%; }
.posts-grid { align-items: stretch; }
.post-meta { flex-wrap: wrap; }
.projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.timeline-item .company { color: #aa747c; }
.timeline-item > p:not(.eyebrow):not(.company) { color: #e5e2de; }
.project-tech { padding: 9px 11px; border-left: 2px solid #527f91; background: #0b1114; color: #86b5c7; line-height: 1.65; }
.certifications { align-self: start; }
.terminal-fetch { gap: 20px; }
.terminal-content { padding: 20px; }
.visitor-telemetry { position: relative; display: grid; grid-template-columns: minmax(280px,.85fr) minmax(350px,1.15fr); min-height: 245px; margin-top: 90px; margin-bottom: 90px; overflow: hidden; border: 1px solid #3a3039; background: radial-gradient(circle at 72% 45%,#b91e2e22,transparent 27%),linear-gradient(120deg,#0f0f14,#09090c); }
.visitor-telemetry::before { content: "0xVISITOR"; position: absolute; right: 22px; bottom: 22px; color: rgba(255,255,255,.025); font: 800 72px var(--mono); letter-spacing: -.08em; pointer-events: none; }
.telemetry-copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: 42px; border-right: 1px solid #352d35; }
.telemetry-copy .eyebrow { margin: 0 0 24px; }
.telemetry-copy code { width: max-content; margin-bottom: 16px; padding: 7px 10px; border: 1px solid #342f36; background: #09090c; color: #817b84; font: 9px var(--mono); }
.telemetry-copy code b { color: var(--red); margin-right: 7px; }
.visit-seal { position: relative; display: grid; grid-template-columns: 46px 1fr; align-items: center; width: min(100%,260px); min-height: 64px; border: 1px solid #64303a; background: linear-gradient(110deg,#170a0f,#0a090c 72%); box-shadow: inset 3px 0 0 #bd2634,0 12px 35px #0005; overflow: hidden; }
.visit-seal::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg,transparent 0 19px,#ef2b3608 20px); pointer-events: none; }
.visit-kana { position: relative; z-index: 1; display: grid; place-items: center; align-self: stretch; border-right: 1px solid #48232a; color: #f04450; font: 700 17px var(--mono); text-shadow: 0 0 16px #f04450; }
.visit-seal > div { position: relative; z-index: 1; display: grid; gap: 5px; padding: 10px 14px; }
.visit-seal small { color: #806c72; font: 7px var(--mono); letter-spacing: .17em; }
.visit-seal img { display: block; width: auto; height: 20px; image-rendering: auto; }
.visit-seal > i { position: absolute; right: 10px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: #72e28d; box-shadow: 0 0 12px #72e28d; animation: telemetry-ping 2.4s ease-out infinite; }
.telemetry-radar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 34px; padding: 30px; }
.radar-eye { position: relative; display: grid; place-items: center; width: 118px; height: 118px; border: 1px dashed #6c3540; border-radius: 50%; }
.radar-eye::before,.radar-eye::after { content: ""; position: absolute; width: 160px; height: 160px; border: 1px solid #462d34; border-radius: 50%; }
.radar-eye::after { width: 205px; height: 205px; border-style: dashed; opacity: .5; }
.radar-eye img { width: 92px; height: 92px; opacity: .65; animation: orbit 24s linear infinite; }
.radar-eye i { position: absolute; z-index: 2; width: 5px; height: 5px; border-radius: 50%; background: #f7a1a9; box-shadow: 0 0 13px var(--red); animation: telemetry-ping 2.4s ease-out infinite; }
.radar-eye i:nth-of-type(1) { top: -22px; right: 15px; }
.radar-eye i:nth-of-type(2) { right: -42px; bottom: 28px; animation-delay: -.8s; }
.radar-eye i:nth-of-type(3) { left: -31px; bottom: 3px; animation-delay: -1.6s; }
.packet-log { display: grid; gap: 8px; color: #6f6972; font: 9px var(--mono); text-transform: uppercase; }
.packet-log span,.packet-log b { padding-left: 10px; border-left: 1px solid #4c333a; }
.packet-log b { color: #60df84; font-weight: 500; }
.telemetry-privacy { position: relative; z-index: 2; grid-column: 1/-1; display: flex; justify-content: space-between; gap: 25px; margin: 0; padding: 13px 20px; border-top: 1px solid #332b33; background: #08080ba8; color: #746e77; font: 8px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.telemetry-privacy b { color: #bf6670; }
/* Three focused destinations: Home, Challenge Archive, and Projects. */
.archive-hero { display: grid; grid-template-columns: minmax(0,1fr) 170px; gap: 42px; align-items: center; margin: 58px 0 48px; }
.archive-hero h1 { margin: 0; font-size: clamp(52px,7vw,82px); line-height: .93; letter-spacing: -.065em; }
.archive-lede { max-width: 610px; margin: 24px 0 0; color: #8f8b91; font-size: 15px; }
.archive-sigil { display: grid; place-items: center; }
.archive-sigil img { width: 145px; height: 145px; opacity: .3; animation: orbit 60s linear infinite; }
.archive-collections { display: grid; gap: 78px; margin-top: 48px; }
.challenge-collection { min-width: 0; }
.collection-heading { display: grid; grid-template-columns:minmax(230px,.8fr) minmax(260px,1fr) auto; gap: 34px; align-items:end; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #302d33; }
.collection-heading div > p { margin: 0 0 7px; color: #655f66; font: 7px var(--mono); letter-spacing: .16em; }
.collection-heading h2 { margin: 0; color: #e8e5e2; font-size: clamp(26px,3vw,38px); line-height: 1; letter-spacing: -.04em; }
.collection-heading > p { max-width: 430px; margin: 0; color: #77737a; font-size: 11px; }
.collection-heading > span { color: #7a747c; font: 8px var(--mono); text-transform: uppercase; }
.archive-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; align-items: stretch; }
.archive-entry { min-width: 0; border: 1px solid #2e2c31; background: #0d0d10; }
.archive-entry:last-child { border: 1px solid #2e2c31; }
.archive-entry.challenge-card { position: relative; overflow: hidden; transition: border-color .22s,transform .25s var(--ease),background .22s; }
.archive-entry.challenge-card::before { content: ""; position: absolute; z-index: 3; inset: 0 auto 0 0; width: 2px; background: var(--red); opacity: 0; transition: opacity .22s; }
.challenge-card:hover { transform: translateY(-2px); border-color: #4a464d; background: #111115; }
.challenge-card:hover::before { opacity: .72; }
.archive-entry.challenge-card > a { display: flex; flex-direction: column; align-items: stretch; gap: 0; height: 100%; padding: 0; }
.archive-entry.challenge-card > a:hover { padding: 0; background: transparent; }
.challenge-card-art { position: relative; height: 50px; border-bottom: 1px solid #262429; background: #0a0a0d; }
.card-address { position: absolute; inset: 0 auto 0 20px; display: flex; align-items: center; gap: 10px; font-family: var(--mono); }
.card-address small { color: #5e5960; font-size: 6px; letter-spacing: .16em; }
.card-address b { color: #9a9299; font-size: 9px; font-weight: 500; letter-spacing: .05em; }
.card-collection { position: absolute; top: 50%; right: 18px; color: #4f4b51; font: 7px var(--mono); letter-spacing: .12em; transform: translateY(-50%); }
.challenge-card-content { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.challenge-card .entry-meta { display: flex; gap: 9px; font-size: 7px; flex-wrap: wrap; }
.challenge-card .entry-meta span:last-child { margin-left: auto; color: #716c73; }
.challenge-card .tag { border-color: #353138; background: transparent; color: #9d777c; }
.challenge-card h2 { margin: 15px 0 8px; font: 700 17px/1.35 var(--mono); overflow-wrap: anywhere; }
.function-suffix { color: #81777e; }
.challenge-card p { display: -webkit-box; overflow: hidden; min-height: 3.2em; margin: 0; color: #817d84; font-size: 11px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.challenge-card-footer { display: flex; align-items:center; justify-content:space-between; gap: 9px; margin-top: 18px; padding-top: 13px; border-top: 1px solid #29272c; color: #aaa5aa; font: 8px var(--mono); }
.challenge-card-footer span:last-child { color: #8d444d; font-size: 12px; }
.note-toggle { margin-top: 26px; padding-top: 16px; border-top: 1px solid #302833; display: flex; justify-content: space-between; font: 10px var(--mono); color: #eb8390; }
.projects-page { padding-top: 80px; padding-bottom: 120px; }
.projects-hero { display: grid; grid-template-columns: 1fr 310px; gap: 70px; align-items: center; padding: 70px 0 55px; border-bottom: 1px solid var(--line); }
.projects-hero h1 { margin: 0; font-size: clamp(58px, 8vw, 105px); line-height: .92; letter-spacing: -.07em; }
.projects-hero > div:first-child > p:last-child { max-width: 700px; margin: 28px 0 0; color: var(--copy); font-size: 18px; }
.project-orbit { display: grid; place-items: center; position: relative; }
.project-orbit img { width: 210px; height: 210px; opacity: .28; animation: orbit 70s linear infinite reverse; }
.project-orbit::before,.project-orbit::after { content: ""; position: absolute; border: 1px dashed #38343a; border-radius: 50%; width: 255px; height: 255px; }
.project-orbit::after { width: 170px; height: 170px; border-color: #493138; }
.project-orbit code { position: absolute; bottom: -12px; z-index: 1; padding: 7px 10px; border: 1px solid #302e33; background: #0a090d; color: #806f75; font: 8px var(--mono); }
.projects-intro { display: flex; align-items: center; justify-content: space-between; gap: 35px; padding: 35px 0; }
.projects-intro p { max-width: 650px; margin: 0; color: #8f8992; font-size: 14px; }
.project-trace { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; margin: 4px 0 28px; border: 1px solid #333036; background: #0b0b0e; }
.project-trace::before { content: "PROJECT TRACE"; position: absolute; left: 14px; top: -7px; padding: 0 7px; background: var(--bg); color: #a84d58; font: 7px var(--mono); letter-spacing: .18em; }
.project-trace:focus-within { border-color: #6f454c; }
.project-trace label { display: flex; align-items: center; min-width: 0; padding: 0 20px; }
.trace-prompt { color: var(--red); font: 700 18px var(--mono); animation: trace-prompt 1.4s steps(2,end) infinite; }
.project-trace input { min-width: 0; width: 100%; height: 64px; padding: 0 14px; border: 0; outline: 0; background: transparent; color: #eee9e6; font: 13px var(--mono); }
.project-trace input::placeholder { color: #615b63; }
.trace-status { display: flex; align-items: center; gap: 16px; padding: 0 18px; border-left: 1px solid #352c34; color: #716a73; font: 8px var(--mono); letter-spacing: .06em; white-space: nowrap; }
.trace-status > span { display: inline-flex; align-items: center; gap: 7px; }
.trace-status i,.search-readout i { width: 5px; height: 5px; border-radius: 50%; background: #6ae485; box-shadow: 0 0 9px #6ae485; }
.trace-status b { color: #c67882; font-weight: 500; }
.trace-status button { border: 0; background: transparent; padding: 5px; color: #ed6570; cursor: pointer; font: 8px var(--mono); }
.project-empty { padding: 75px 20px; border: 1px dashed #4b333a; background: radial-gradient(circle at center,#8f1d2920,transparent 48%); text-align: center; }
.project-empty > span { display: block; color: #a92b38; font: 700 45px var(--mono); text-shadow: 0 0 25px #ef2b3655; }
.project-empty h2 { margin: 10px 0 5px; }
.project-empty p { color: #7e777f; }
.project-case-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; align-items: start; }
.project-case { position: relative; min-width: 0; overflow: hidden; border: 1px solid #302e33; background: #0d0d10; scroll-margin-top: 100px; transition: border-color .25s,transform .3s var(--ease); }
.project-case::before { content: ""; position: absolute; z-index: 3; inset: 0 0 auto; height: 1px; background: #71353d; opacity: .45; }
.project-case:not([open]):hover { transform: translateY(-2px); border-color: #4b474e; }
.project-case summary { display: flex; flex-direction: column; min-height: 0; list-style: none; cursor: pointer; }
.project-case summary::-webkit-details-marker { display: none; }
.project-case-head { display:flex; align-items:center; justify-content:space-between; height:50px; padding:0 18px 0 20px; border-bottom:1px solid #262429; background:#0a0a0d; }
.project-case-head > span:first-child { display:flex; align-items:center; gap:10px; }
.project-case-head small { color:#5e5960; font:6px var(--mono); letter-spacing:.16em; }
.project-case-head b { color:#9a9299; font:500 9px var(--mono); letter-spacing:.05em; }
.project-case-head > span:last-child { color:#4f4b51; font:7px var(--mono); letter-spacing:.12em; }
.project-case-copy { display: flex; flex-direction: column; min-height: 215px; padding: 22px; }
.project-case-copy .entry-meta { display:flex; flex-wrap: wrap; gap:9px; font-size:7px; }
.project-case-copy .tag { border-color:#353138; background:transparent; color:#9d777c; }
.source-status { display:inline-flex; align-items:center; gap:6px; margin-left:auto; color:#716c73; }
.source-status i { width:5px; height:5px; border-radius:50%; background:#70a97d; }
.project-case-copy h2 { margin: 17px 0 10px; color:#ebe8e4; font-size: 27px; line-height: 1.08; letter-spacing: -.035em; }
.project-case-copy > p { display: -webkit-box; overflow: hidden; margin: 0; color: #aaa5ab; font-size: 13px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.project-stack { display: flex; flex-wrap: wrap; gap: 5px; margin: 16px 0 0; }
.project-stack span { padding: 4px 7px; border: 1px solid #304852; background: #0b1114; color: #86b5c7; font: 7px var(--mono); }
.project-case-copy .note-toggle { margin-top: auto; padding-top: 14px; }
.project-case[open] { grid-column: 1/-1; border-color: #625057; box-shadow: 0 22px 60px #0006; }
.project-case[open] summary { min-height: 0; }
.project-case[open] .project-case-copy .note-toggle > span:first-child { font-size: 0; }
.project-case[open] .project-case-copy .note-toggle > span:first-child::after { content: "Close case notes"; font-size: 10px; }
.project-case[open] .project-case-copy .note-toggle > span:last-child { transform: rotate(45deg); }
.project-note-body { max-width: 850px; margin: 0 auto; padding: 55px 35px 45px; border-top: 1px solid #362a32; }
.project-note-body h2 { font-size: 29px; }
.project-note-body .lead { font-size: 21px; }
.project-note-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 42px; padding-top: 25px; border-top: 1px solid var(--line); }
.project-card { min-height: 260px; }
.project-card { box-shadow: inset 0 1px 0 #63313980; background: #0e0e11; }
.project-card:hover { background: #121216; }
.project-card .text-link { margin-top: 22px; }
.project-case summary { min-height: 0; }
.archive-toolbar { position: relative; overflow: visible; border-color: #333036; background: #0b0b0e; transition: border-color .22s; }
.archive-toolbar:focus-within { border-color: #6f454c; }
.archive-search .archive-opcode { color: #b85b63; font: 700 10px var(--mono); letter-spacing: .04em; white-space: nowrap; }
.archive-search kbd { margin-left: 8px; color: #5f5a61; }
.archive-search input { height: 54px; font-size: 12px; }
.archive-search input::placeholder { color: #5c585e; }
.sort-control { display: flex; align-items: center; gap: 8px; padding-left: 14px; }
.sort-control > span { white-space: nowrap; color: #5f5a61; }
.sort-control select { height: 54px; background: #0e0e11; }
.archive-filterbar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding: 14px 0; border-bottom: 1px solid #29272c; }
.archive-filters { align-items:center; gap: 3px; padding: 0; }
.archive-filters > span,.collection-control > span { margin-right: 8px; color:#625e64; font: 7px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.archive-filters button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 8px; border: 0; background: transparent; color: #767178; letter-spacing: .02em; }
.archive-filters button span { min-width: auto; margin: 0; padding: 0; border: 0; color: #514d53; text-align: right; }
.archive-filters button[aria-pressed="true"] { border: 0; background: #171318; color: #c78187; box-shadow: inset 0 -1px 0 #93414a; }
.collection-control { display:flex; align-items:center; }
.collection-control select { height: 36px; border: 1px solid #302e33; background:#0d0d10; color:#817c83; }
.archive-readout { display: flex; align-items: center; justify-content:space-between; gap: 16px; min-height:38px; color:#625d64; }
.archive-readout > span { color: #5c585e; font: 7px var(--mono); letter-spacing: .08em; }
.archive-readout > span.is-match { color: #7caf89; text-shadow: none; }
.archive-readout > b { color: #81777e; font: 500 8px var(--mono); }
.search-vault { width: min(840px,calc(100% - 32px)); max-height: min(760px,calc(100dvh - 32px)); padding: 0; overflow: hidden; border: 1px solid #73333d; background: #09090c; color: var(--ink); box-shadow: 0 45px 160px #000,0 0 80px #b51f2d22; }
.search-vault::backdrop { background: rgba(2,2,4,.91); -webkit-backdrop-filter: none; backdrop-filter: none; }
dialog[open].search-vault { display: grid; grid-template-columns: 138px minmax(0,1fr); animation: search-vault-in .3s cubic-bezier(.16,.8,.2,1) both; }
.search-vault-mark { position: relative; grid-row: 1/7; display: grid; place-items: center; overflow: hidden; border-right: 1px solid #3e2931; background: radial-gradient(circle at center,#991c2c2e,transparent 48%),repeating-linear-gradient(0deg,transparent 0 24px,#ed3a4708 25px),#0b090d; }
.search-vault-mark::before { content: ""; position: absolute; width: 190px; aspect-ratio: 1; border: 1px dashed #622c36; border-radius: 50%; animation: orbit 35s linear infinite; }
.search-vault-mark span { width: 76px; aspect-ratio: 1; background: url('/static/img/mangekyou.png') center/contain no-repeat; opacity: .72; animation: orbit 18s linear infinite reverse; }
.search-vault-mark small { position: absolute; bottom: 22px; color: #8b4b55; font: 7px var(--mono); letter-spacing: .16em; }
.search-vault .dialog-top,.search-vault .search-command,.search-vault .search-scopes,.search-vault .search-readout,.search-vault #search-results,.search-vault .dialog-bottom { grid-column: 2; }
.search-vault .dialog-top { padding: 20px 22px; background: linear-gradient(90deg,#100c11,#0b0b0e); }
.search-vault .dialog-top h2 { margin: 3px 0 0; font-size: 20px; letter-spacing: -.03em; }
.dialog-address { color: #8d4b54; font: 7px var(--mono); letter-spacing: .16em; }
.search-vault .dialog-top button { border-color: #4f3037; background: #130d11; color: #b76871; }
.search-command { display: flex; align-items: center; gap: 11px; padding: 0 22px; border-bottom: 1px solid #3b2d35; background: #07070a; }
.search-command > span:first-child { color: var(--red); font: 700 21px var(--mono); text-shadow: 0 0 14px #ef2b3666; }
.search-command input { min-width: 0; width: 100%; height: 72px; padding: 0; border: 0; outline: 0; background: transparent; color: #f0ece8; font: 17px var(--mono); }
.search-command input::placeholder { color: #5f5861; }
.search-scopes { display: flex; gap: 7px; padding: 13px 20px; border-bottom: 1px solid #30272e; background: #0d0c10; }
.search-scopes button { padding: 7px 10px; border: 1px solid #393139; background: transparent; color: #777079; cursor: pointer; font: 8px var(--mono); letter-spacing: .08em; }
.search-scopes button[aria-pressed="true"] { border-color: #b23a46; background: #60172238; color: #f17a84; box-shadow: inset 2px 0 0 var(--red); }
.search-readout { display: flex; justify-content: space-between; padding: 10px 20px; color: #68616a; font: 7px var(--mono); letter-spacing: .1em; }
.search-readout span { display: inline-flex; align-items: center; gap: 7px; }
.search-readout b { color: #a35a64; font-weight: 500; }
.search-vault #search-results { max-height: min(390px,48dvh); overflow: auto; border-top: 1px solid #211c21; }
.search-vault .search-result { position: relative; display: grid; grid-template-columns: 62px 38px minmax(0,1fr) auto; gap: 13px; align-items: center; padding: 14px 20px; border-bottom: 1px solid #292129; background: #0b0a0e; transition: background .2s,padding-left .2s,border-color .2s; }
.search-vault .search-result:hover,.search-vault .search-result:focus { padding-left: 25px; outline: 0; border-color: #4b2931; background: linear-gradient(90deg,#2a0d14,#101014 40%); }
.result-address { color: #72525a; font: 7px var(--mono); }
.result-sigil { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #54303a; background: #170c11; color: #e75a66; font: 9px var(--mono); }
.search-result[data-kind="Project"] .result-sigil { border-color: #514323; color: #d2a84f; }
.result-copy { min-width: 0; }
.result-copy em { display: block; margin-bottom: 3px; color: #a5555e; font: 7px var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.result-copy strong { display: block; overflow: hidden; color: #e5e0dd; font: 700 13px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.result-copy small { display: block; overflow: hidden; margin-top: 3px; color: #716b72; font: 8px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.result-arrow { color: var(--red); }
.search-empty { grid-template-columns: 44px 1fr !important; min-height: 90px; }
.search-vault .dialog-bottom { justify-content: flex-start; gap: 22px; border: 0; background: #09090c; color: #5f5961; }
.search-vault .dialog-bottom span { color: #756d76; }
.search-result[download] .result-sigil { color: #ebbc68; }
.search-trigger { min-width: 42px; min-height: 42px; }
@keyframes cloud-drift { to { translate: 30px -50px; } }
@keyframes telemetry-ping { 0% { scale: .45; opacity: 0; } 35% { opacity: 1; } 100% { scale: 2.6; opacity: 0; } }
@keyframes vault-veil { 0% { opacity: 0; } 12%,100% { opacity: 1; } }
@keyframes route-lid-top { from { transform: translateY(-101%); } to { transform: translateY(0); } }
@keyframes route-lid-bottom { from { transform: translateY(101%); } to { transform: translateY(0); } }
@keyframes vault-scanlines { from { opacity: 0; } to { opacity: 1; } }
@keyframes vault-aperture { 0% { transform: scale(.35) rotate(-12deg); opacity: 0; } 35% { opacity: 1; } 100% { transform: scale(1.2) rotate(22deg); opacity: .75; } }
@keyframes vault-shell { 0% { transform: scale(.58); opacity: 0; } 22% { opacity: 1; } 62%,100% { transform: scale(1); opacity: 1; } }
@keyframes vault-ring { 0% { transform: scale(.3) rotate(160deg); opacity: 0; } 45% { opacity: 1; } 100% { transform: scale(1.08) rotate(-200deg); opacity: .5; } }
@keyframes vault-eye { 0% { transform: translateZ(0) scale(.72) rotate(0deg); opacity: .1; } 18% { transform: translateZ(0) scale(.94) rotate(130deg); opacity: 1; } 50% { transform: translateZ(0) scale(1) rotate(360deg); opacity: 1; } 82% { transform: translateZ(0) scale(1) rotate(590deg); opacity: 1; } 100% { transform: translateZ(0) scale(1) rotate(720deg); opacity: .98; } }
@keyframes vault-reticle { 0% { transform: scale(.2) rotate(90deg); opacity: 0; } 70% { opacity: .65; } 100% { transform: scale(1) rotate(-30deg); opacity: .25; } }
@keyframes vault-node { 0%,35% { opacity: 0; transform: scale(0); } 68% { opacity: 1; transform: scale(1.5); } 100% { opacity: .75; transform: scale(1); } }
@keyframes vault-caption { 0%,38% { opacity: 0; transform: translateY(12px); } 68%,100% { opacity: 1; transform: translateY(0); } }
@keyframes vault-coordinates { 0%,28% { opacity: 0; } 55%,100% { opacity: 1; } }
@keyframes search-vault-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes trace-prompt { 50% { opacity: .38; } }
@media (max-width: 1340px) {
  .scroll-address { top:auto; bottom:12px; left:12px; display:flex; width:auto; gap:8px; padding:7px 9px; border:1px solid #353139; background:rgba(8,8,11,.92); box-shadow:0 8px 24px #0008; transform:none; }
  .scroll-address::before,.scroll-address::after { display:none; }
  .scroll-address > span { font-size:7px; letter-spacing:.06em; writing-mode:horizontal-tb; transform:none; }
  .scroll-address > i { width:36px; height:3px; background:repeating-linear-gradient(to right,#38333a 0 2px,transparent 2px 5px); }
  .scroll-address > i em { top:0; right:auto; bottom:0; width:var(--scroll-progress); height:100%; transition:width .12s linear; }
  .scroll-address small { display:none; }
}
@media (max-width: 1050px) {
  .archive-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { grid-template-columns: minmax(0,1fr) 360px; gap: 24px; }
  .hero h1 { font-size: 100px; }
  .hero-prefix { display: none; }
}
@media (max-width: 800px) {
  .site-header nav a:nth-child(3) { display: block; }
  .hero { grid-template-columns: 1fr; padding-top: 65px; }
  .hero h1 { font-size: clamp(90px, 19vw, 130px); }
  .archive-hero { grid-template-columns: 1fr 150px; gap: 20px; }
  .archive-sigil img { width: 140px; height: 140px; }
  .collection-heading { grid-template-columns:minmax(0,1fr) auto; gap:12px 24px; }
  .collection-heading > p { grid-column:1/-1; grid-row:2; }
  .about-grid { gap: 40px; }
  .projects-hero { grid-template-columns: 1fr 170px; gap: 25px; }
  .project-orbit img { width: 150px; height: 150px; }
  .project-orbit::before { width: 180px; height: 180px; }
  .project-orbit::after { width: 115px; height: 115px; }
  .project-case-copy { min-height:220px; }
}
@media (max-width: 620px) {
  .archive-transition .vault-eye { width: min(43vw,170px); }
  .vault-coordinates { justify-content: center; top: 26px; }
  .vault-coordinates span:first-child { display: none; }
  .vault-caption { bottom: max(38px,7vh); }
  .archive-transition .vault-caption p { max-width: 255px; grid-template-columns: 1fr; gap: 4px; letter-spacing: .12em; }
  .archive-transition .vault-caption p small { grid-column: 1; }
  dialog[open].search-vault { grid-template-columns: minmax(0,1fr); width: calc(100% - 20px); max-height: calc(100dvh - 20px); }
  .search-vault-mark { display: none; }
  .search-vault .dialog-top,.search-vault .search-command,.search-vault .search-scopes,.search-vault .search-readout,.search-vault #search-results,.search-vault .dialog-bottom { grid-column: 1; }
  .search-vault .dialog-top { position: relative; overflow: hidden; padding: 17px 16px; }
  .search-vault .dialog-top::after { content: ""; position: absolute; right: 42px; width: 58px; aspect-ratio: 1; background: url('/static/img/mangekyou.png') center/contain no-repeat; opacity: .15; transform: rotate(-18deg); }
  .search-command { padding: 0 16px; }
  .search-command input { height: 62px; font-size: 13px; }
  .search-scopes { gap: 5px; padding: 11px 12px; overflow-x: auto; }
  .search-scopes button { flex: 1; padding: 7px 6px; font-size: 7px; white-space: nowrap; }
  .search-vault .search-result { grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; padding: 13px 15px; }
  .search-vault .search-result:hover,.search-vault .search-result:focus { padding-left: 18px; }
  .result-address { display: none; }
  .result-copy strong { font-size: 11px; }
  .result-copy small { font-size: 7px; }
  .search-vault .dialog-bottom { gap: 15px; padding: 13px 15px; font-size: 7px; }
  .site-header { gap: 12px; }
  .site-header nav { flex: 1; justify-content: space-evenly; gap: 10px; }
  .site-header nav a { font-size: 10px; }
  .brand-eye { width: 28px; height: 28px; }
  .hero h1 { font-size: 25vw; }
  .hero-copy > .eyebrow { font-size: 9px; }
  .hero-role { font-size: 10px; }
  .hero-links { gap: 15px; font-size: 10px; }
  .hero-sharingan { width: 420px; height: 420px; }
  .archive-card-grid, .projects-grid { grid-template-columns: 1fr; }
  .archive-hero { grid-template-columns: 1fr; position: relative; margin-top: 45px; }
  .archive-hero > div:first-child { position: relative; z-index: 1; }
  .archive-hero h1 { font-size: clamp(47px, 12vw, 72px); }
  .archive-lede { max-width:85%; font-size:13px; }
  .archive-sigil { position: absolute; top: 0; right: -30px; opacity: .2; }
  .archive-filterbar { align-items:stretch; flex-direction:column; gap:10px; padding:12px 0; }
  .archive-filters { gap: 2px; flex-wrap: nowrap; overflow-x:auto; }
  .archive-filters > span { display:none; }
  .archive-filters button { flex:0 0 auto; padding: 8px; white-space:nowrap; }
  .collection-control { justify-content:space-between; }
  .archive-search { padding: 0 13px; }
  .archive-search .archive-opcode { font-size: 9px; }
  .archive-search kbd { display: none; }
  .sort-control { justify-content: space-between; padding-left: 13px; }
  .archive-readout { width: 100%; justify-content: space-between; }
  .archive-collections { gap:58px; margin-top:36px; }
  .collection-heading { grid-template-columns:minmax(0,1fr) auto; gap:11px 16px; margin-bottom:14px; padding-bottom:16px; }
  .collection-heading h2 { font-size:27px; }
  .collection-heading > p { font-size:10px; }
  .collection-heading > span { font-size:7px; }
  .terminal-content { padding: 14px; font-size: 10px; }
  .terminal-fetch { gap: 12px; }
  .terminal-fetch b { width: 60px; }
  .arch-ascii { font-size: 9px; }
  .terminal-fetch strong { font-size: 11px; }
  .terminal-output { font-size: 10px; }
  .section-heading h2 { font-size: 37px; }
  .visitor-telemetry { grid-template-columns: 1fr; margin-top: 65px; margin-bottom: 65px; }
  .telemetry-copy { padding: 30px 24px; border-right: 0; border-bottom: 1px solid #352d35; }
  .telemetry-radar { min-height: 225px; gap: 25px; overflow: hidden; }
  .telemetry-privacy { grid-column: 1; flex-direction: column; gap: 4px; }
  .visitor-telemetry::before { font-size: 58px; bottom: 25px; }
  .projects-page { padding-top: 48px; }
  .projects-hero { grid-template-columns: 1fr; padding: 55px 0 40px; }
  .projects-hero h1 { font-size: 14vw; }
  .project-orbit { position: absolute; right: -20px; top: 95px; opacity: .14; }
  .project-orbit code { display: none; }
  .projects-intro { align-items: flex-start; flex-direction: column; }
  .project-trace { grid-template-columns: 1fr; }
  .project-trace input { height: 58px; font-size: 11px; }
  .trace-status { min-height: 42px; justify-content: space-between; gap: 9px; padding: 0 15px; border-top: 1px solid #352c34; border-left: 0; }
  .trace-status > span { font-size: 7px; }
  .project-case-grid { grid-template-columns: 1fr; }
  .project-case summary,.project-case[open] summary { min-height: 0; }
  .project-case-head { padding:0 15px; }
  .project-case-copy { padding: 20px; }
  .project-case-copy h2 { font-size: 24px; }
  .project-note-body { padding: 40px 20px 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-sharingan, .archive-sigil img, .ambient-clouds .akatsuki-cloud, .radar-eye img, .radar-eye i { animation: none; }
  .archive-transition { display: none; }
}
body.motion-off [data-reveal] { opacity: 1; transform: none; }
body.motion-off .hero-sharingan, body.motion-off .archive-sigil img, body.motion-off .ambient-clouds .akatsuki-cloud, body.motion-off .radar-eye img, body.motion-off .radar-eye i { animation: none; }
@media print { .ambient-clouds, .scroll-address, .hero-sharingan, .archive-sigil, .archive-transition { display: none; } }