:root{--bg:#050908;--panel:#07110e;--panel2:#091612;--accent:#39ff68;--accent-rgb:57 255 104;--accent-dim:#17a94a;--green:var(--accent);--green-dim:var(--accent-dim);--line:rgb(var(--accent-rgb) / .27);--text:#e9f0ed;--muted:#899993;--mono:"DM Mono",monospace;--display:"Space Grotesk",sans-serif;--wrap:1400px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--display);line-height:1.6;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 75% 20%,rgb(var(--accent-rgb) / .13),transparent 48%),linear-gradient(90deg,transparent 49.9%,rgb(var(--accent-rgb) / .025) 50%,transparent 50.1%)}a{color:inherit;text-decoration:none}button{font:inherit}.scanlines{position:fixed;inset:0;pointer-events:none;z-index:10;opacity:.08;background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(0,0,0,.55) 4px)}.site-header{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,24px);position:sticky;top:0;z-index:20;background:rgba(5,9,8,.92);backdrop-filter:blur(14px)}.brand{font-size:38px;font-weight:700;letter-spacing:-3px}.brand span,em{color:var(--green);font-style:normal}.nav{display:flex;gap:clamp(24px,4vw,62px);font:12px var(--mono);text-transform:uppercase;letter-spacing:.08em}.nav a,.header-cta,.text-link,.back-top{transition:color .2s}.nav a:hover,.text-link:hover,.back-top:hover{color:var(--green)}.header-cta{border:1px solid var(--green);padding:10px 16px;font:12px var(--mono);letter-spacing:.08em;box-shadow:inset 0 0 15px rgb(var(--accent-rgb) / .04)}.header-cta span{color:var(--green);margin-left:12px}.menu-toggle{display:none;background:none;border:0;color:var(--green)}.section-wrap{width:min(var(--wrap),90%);margin-inline:auto}.hero{min-height:620px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4%;padding-top:70px;padding-bottom:70px;position:relative}.eyebrow{font:500 12px var(--mono);letter-spacing:.17em;color:var(--green);display:flex;align-items:center;gap:13px;margin:0 0 24px}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;box-shadow:0 0 12px var(--green);flex:none}.hero h1{font-size:clamp(42px,4.1vw,66px);line-height:1.08;letter-spacing:-.055em;margin:0 0 20px;font-weight:600}.hero-subtitle{font:14px var(--mono);color:var(--muted);margin:0 0 14px}.hero-subtitle span{color:var(--green);padding:0 5px}.intro{color:#bdc9c3;max-width:420px;margin:0 0 26px;font-size:15px}.hero-actions,.contact-actions{display:flex;gap:16px;flex-wrap:wrap}.button{min-height:46px;padding:13px 22px;display:inline-flex;align-items:center;justify-content:center;gap:18px;font:12px var(--mono);letter-spacing:.06em;border:1px solid #61716a;transition:transform .2s,border-color .2s,box-shadow .2s}.button:hover{transform:translateY(-2px);border-color:var(--green)}.button-primary{border-color:var(--green);box-shadow:0 0 20px rgb(var(--accent-rgb) / .10),inset 0 0 14px rgb(var(--accent-rgb) / .05)}.button-primary span{color:var(--green);font-size:18px}.button-primary:hover{box-shadow:0 0 24px rgb(var(--accent-rgb) / .20)}.hero-meta{display:flex;gap:22px;margin-top:55px;color:#597268;font:10px var(--mono);letter-spacing:.08em}.hero-visual{min-height:390px;position:relative;border:1px solid var(--line);background:linear-gradient(130deg,rgba(5,20,14,.92),rgba(2,8,6,.8));overflow:hidden;isolation:isolate}.hero-visual:before,.hero-visual:after{content:"";position:absolute;inset:0;pointer-events:none}.hero-visual:before{background:linear-gradient(90deg,transparent 49.8%,rgb(var(--accent-rgb) / .08) 50%,transparent 50.2%),linear-gradient(transparent 49.8%,rgb(var(--accent-rgb) / .08) 50%,transparent 50.2%);background-size:42px 42px;mask-image:linear-gradient(90deg,black,transparent)}.hero-visual:after{border:1px solid rgb(var(--accent-rgb) / .12);inset:12px}.hud{position:absolute;z-index:2;display:flex;align-items:center;gap:6px;font:9px var(--mono);color:var(--green)}.hud-top{top:16px;left:18px;right:18px;border-bottom:1px solid var(--line);padding-bottom:12px}.hud-top span{width:7px;height:7px;border-radius:50%;background:var(--green)}.hud-top b{margin-left:auto;font-weight:400;letter-spacing:.12em}.code-window{position:absolute;z-index:3;left:7%;top:22%;font:clamp(9px,.85vw,12px)/1.65 var(--mono);color:#d3e5db;text-shadow:0 0 10px rgb(var(--accent-rgb) / .12)}.code-window p{margin:0}.code-muted{color:color-mix(in srgb,var(--accent) 45%,#d3e5db)}.indent{padding-left:18px}.code-purple{color:#b8a4ff}.code-green{color:var(--green)}.terminal-cursor{color:var(--green);animation:blink 1s steps(2,start) infinite}.orb-wrap{position:absolute;right:9%;top:24%;width:42%;aspect-ratio:1;display:grid;place-items:center}.orb{width:100%;aspect-ratio:1;border-radius:50%;border:1px solid rgb(var(--accent-rgb) / .55);background:repeating-radial-gradient(circle,transparent 0 13px,rgb(var(--accent-rgb) / .18) 14px 15px),conic-gradient(from 20deg,transparent,rgb(var(--accent-rgb) / .23),transparent,rgb(var(--accent-rgb) / .12),transparent);box-shadow:0 0 50px rgb(var(--accent-rgb) / .10),inset 0 0 35px rgb(var(--accent-rgb) / .12);animation:rotate 30s linear infinite;position:relative}.orb:before,.orb:after{content:"";position:absolute;inset:13%;border:1px solid rgb(var(--accent-rgb) / .65);transform:rotate(35deg) skew(8deg);clip-path:polygon(50% 0,100% 25%,80% 100%,20% 100%,0 25%)}.orb:after{transform:rotate(95deg) scale(.78);border-color:rgb(var(--accent-rgb) / .35)}.orb-core{position:absolute;width:23%;height:23%;left:39%;top:39%;background:var(--green);border-radius:50%;filter:blur(13px);box-shadow:0 0 35px 12px rgb(var(--accent-rgb) / .35)}.orb-label{position:absolute;bottom:-25px;right:0;font:9px/1.7 var(--mono);color:var(--green);letter-spacing:.1em}.hud-stats{position:absolute;bottom:28px;left:7%;right:7%;display:grid;grid-template-columns:1fr 1fr;gap:8px;font:9px var(--mono);color:color-mix(in srgb,var(--accent) 45%,#e9f0ed)}.hud-stats b{color:var(--green);font-weight:400;margin-left:6px}.hud-stats>span:last-child{grid-column:1/-1}.meter{height:3px;background:color-mix(in srgb,var(--accent) 18%,#07100d)}.meter i{display:block;width:78%;height:100%;background:var(--green);box-shadow:0 0 10px var(--green)}.crosshair{position:absolute;color:var(--green);font:22px var(--mono)}.crosshair-one{top:18%;right:8%}.crosshair-two{bottom:22%;left:53%}.visual-caption{position:absolute;right:18px;bottom:10px;color:color-mix(in srgb,var(--accent) 38%,#e9f0ed);font:8px var(--mono);letter-spacing:.1em}.scroll-cue{position:absolute;bottom:18px;left:0;display:flex;align-items:center;gap:12px;font:9px var(--mono);letter-spacing:.12em;color:color-mix(in srgb,var(--accent) 45%,#e9f0ed)}.scroll-cue span{width:26px;height:1px;background:var(--green)}.section-block{padding-top:75px;padding-bottom:78px;border-top:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.section-heading .eyebrow{margin:0}.heading-line{width:22px;height:2px;background:var(--green);display:inline-block}.section-index{font:10px var(--mono);color:color-mix(in srgb,var(--accent) 45%,#e9f0ed);letter-spacing:.12em}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:start}.about-grid h2,.skills-layout h2,.contact-inner h2{font-size:clamp(34px,4vw,54px);line-height:1.12;letter-spacing:-.045em;margin:0;font-weight:600}.about-content{max-width:610px;color:#aab9b1;font-size:15px}.about-content p{margin:0 0 18px}.text-link{display:inline-flex;gap:15px;align-items:center;font:11px var(--mono);letter-spacing:.08em;color:var(--green);margin-top:8px}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.project-card{position:relative;padding:18px;border:1px solid var(--line);background:linear-gradient(150deg,rgba(7,18,13,.9),rgba(4,10,8,.72));transition:border-color .25s,transform .25s}.project-card:hover{border-color:rgb(var(--accent-rgb) / .70);transform:translateY(-4px)}.project-top{display:flex;align-items:center;gap:13px;margin-bottom:15px;font:10px var(--mono);letter-spacing:.08em}.project-number{font-size:17px;color:var(--green)}.project-rule{height:1px;width:40px;background:var(--green-dim)}.project-type{color:#d7e2dc}.project-art{height:155px;display:block;position:relative;overflow:hidden;border:1px solid rgb(var(--accent-rgb) / .15);background:#07100d;margin-bottom:18px}.art-one{background:radial-gradient(ellipse at 75% 80%,#1c392b,transparent 45%),linear-gradient(135deg,#15251e,#050807)}.mock-browser{position:absolute;inset:15px 12% -5px;border:1px solid color-mix(in srgb,var(--accent) 45%,#07100d);transform:rotate(-3deg);background:linear-gradient(135deg,#0c1711,#020504);box-shadow:0 8px 28px #000}.mock-bar{height:20px;border-bottom:1px solid color-mix(in srgb,var(--accent) 30%,#07100d);display:flex;gap:4px;align-items:center;padding:0 8px}.mock-bar i{width:4px;height:4px;background:var(--green);border-radius:50%}.mock-bar span{font:6px var(--mono);color:color-mix(in srgb,var(--accent) 55%,#e9f0ed);margin-left:7px}.mock-site{padding:16px;display:flex;align-items:flex-start;flex-direction:column;gap:9px}.mock-site small{font:6px var(--mono);color:var(--green)}.mock-site strong{font-size:17px;line-height:1.05}.mock-pill{background:var(--green);color:#001b09;padding:4px 6px;font:6px var(--mono)}.art-two{background:radial-gradient(circle at center,rgb(var(--accent-rgb) / .14),transparent 48%),#030a07}.data-panel{position:absolute;inset:12px 10%;border:1px solid rgb(var(--accent-rgb) / .28);padding:9px;display:grid;grid-template-columns:1fr 1fr;gap:6px}.data-title{grid-column:1/-1;font:7px var(--mono);color:var(--green)}.data-title .status-dot{width:5px;height:5px;margin-right:5px}.data-ring{border:1px solid rgb(var(--accent-rgb) / .55);border-radius:50%;aspect-ratio:1;width:80px;max-width:100%;display:grid;place-items:center;box-shadow:inset 0 0 18px rgb(var(--accent-rgb) / .10);font:8px var(--mono);color:var(--green);text-align:center;justify-self:center;align-self:center}.data-bars{display:flex;flex-direction:column;justify-content:center;gap:8px}.data-bars i{height:5px;background:linear-gradient(90deg,var(--accent) 65%,color-mix(in srgb,var(--accent) 18%,#07100d) 65%)}.data-panel small{grid-column:1/-1;font:6px var(--mono);color:color-mix(in srgb,var(--accent) 50%,#e9f0ed)}.art-three{background:radial-gradient(ellipse at 50% 70%,rgb(var(--accent-rgb) / .16),transparent 45%),linear-gradient(140deg,#07120c,#020504)}.wire-cube{position:absolute;width:90px;height:90px;left:50%;top:45%;transform:translate(-50%,-50%) rotate(30deg);border:1px solid var(--green);box-shadow:0 0 25px rgb(var(--accent-rgb) / .14)}.wire-cube span{position:absolute;inset:12px;border:1px solid rgb(var(--accent-rgb) / .60);transform:rotate(45deg)}.wire-cube span:nth-child(2){transform:rotate(20deg) scale(.75)}.wire-cube span:nth-child(3){transform:rotate(70deg) scale(.75)}.wire-cube span:nth-child(4){inset:-10px;border-color:rgb(var(--accent-rgb) / .20);transform:rotate(15deg)}.wire-cube b{position:absolute;inset:0;display:grid;place-items:center;color:var(--green);font:25px var(--mono);transform:rotate(-30deg)}.art-coordinate{position:absolute;right:9px;bottom:8px;font:6px/1.7 var(--mono);color:color-mix(in srgb,var(--accent) 48%,#e9f0ed)}.project-card h3{font-size:17px;margin:0 0 6px}.project-card>p{font-size:12px;color:#98a9a0;min-height:42px;margin:0 0 16px}.tags{display:flex;gap:14px;flex-wrap:wrap;font:9px var(--mono);color:var(--green);padding-right:25px}.card-arrow{position:absolute;right:18px;bottom:16px;color:var(--green);font-size:19px}.placeholder-note{color:#60766a;font:10px var(--mono);margin:18px 0 0}.skills-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:7%;align-items:start}.skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.skill{display:flex;align-items:center;gap:12px;border-bottom:1px solid rgb(var(--accent-rgb) / .16);padding:16px 0;min-width:0}.skill-icon{width:35px;height:35px;display:grid;place-items:center;border:1px solid var(--line);color:var(--green);font:10px var(--mono);flex:none}.skill h3{font-size:13px;margin:0}.skill p{font-size:10px;color:#7e9388;margin:2px 0 0}.skill-status{margin-left:auto;font:7px var(--mono);color:color-mix(in srgb,var(--accent) 48%,#e9f0ed);letter-spacing:.05em}.contact-section{border-block:1px solid var(--line);background:radial-gradient(ellipse at 70% 40%,rgb(var(--accent-rgb) / .12),transparent 50%),#060c09}.contact-inner{padding-top:80px;padding-bottom:82px}.contact-inner h2{font-size:clamp(42px,5vw,68px);margin-bottom:20px}.contact-copy{color:#9aada2;max-width:470px;margin-bottom:26px}.edit-hint{font:10px var(--mono);color:#61776a;margin-top:22px}.edit-hint code{color:color-mix(in srgb,var(--accent) 65%,#e9f0ed)}.site-footer{min-height:82px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px}.site-footer .brand{font-size:30px}.site-footer p,.back-top{font:9px var(--mono);letter-spacing:.1em;color:#779084}.site-footer p{grid-column:2;justify-self:center;text-align:center;margin:0}.site-footer>.brand{grid-column:1;justify-self:start}.site-footer>.back-top{grid-column:3;justify-self:end}.site-footer p span{margin-left:14px;color:var(--green)}.back-top{color:var(--green)}@keyframes blink{50%{opacity:0}}@keyframes rotate{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:35px;padding-top:55px;padding-bottom:65px}.hero-visual{min-height:360px}.hero h1{font-size:clamp(44px,8vw,64px)}.hero-meta{margin-top:35px}.scroll-cue{bottom:18px}.project-grid{grid-template-columns:1fr 1fr}.project-card:last-child{grid-column:1/-1}.project-card:last-child .project-art{height:190px}.skills-layout{grid-template-columns:1fr;gap:30px}.skills-layout h2 br{display:none}}
@media(max-width:620px){.site-header{height:66px;padding-inline:5%}.brand{font-size:32px}.header-cta{font-size:10px;padding:9px 10px;margin-left:auto;margin-right:12px}.menu-toggle{display:flex;flex-direction:column;gap:5px;order:3;padding:8px}.menu-toggle span{width:22px;height:1px;background:var(--green);display:block}.nav{display:none;position:absolute;top:65px;left:0;right:0;padding:20px 6%;background:#050b08;border-bottom:1px solid var(--line);flex-direction:column;gap:20px}.nav.open{display:flex}.section-wrap{width:90%}.hero{padding-top:48px;gap:28px;min-height:auto}.hero h1{font-size:clamp(39px,10.2vw,56px)}.hero-subtitle{font-size:11px}.intro{font-size:14px}.hero-actions{gap:10px}.button{font-size:10px;padding:12px 14px;min-height:43px}.hero-visual{min-height:320px}.code-window{top:22%;font-size:9px}.orb-wrap{right:5%;width:35%;top:30%}.orb-label{font-size:7px}.hud-stats{bottom:25px}.hero-meta{font-size:8px;gap:12px;flex-wrap:wrap}.scroll-cue{position:static;margin-top:5px}.section-block{padding-top:54px;padding-bottom:55px}.section-heading{gap:12px;align-items:flex-start}.section-index{font-size:8px;text-align:right}.about-grid{grid-template-columns:1fr;gap:22px}.about-grid h2,.skills-layout h2{font-size:39px}.about-content{font-size:14px}.project-grid{grid-template-columns:1fr;gap:15px}.project-card:last-child{grid-column:auto}.project-card:last-child .project-art{height:155px}.project-card>p{min-height:0}.skills-grid{grid-template-columns:1fr;gap:0}.skill-status{font-size:8px}.contact-inner{padding-top:58px;padding-bottom:60px}.contact-inner h2{font-size:45px}.contact-copy{font-size:14px}.site-footer{min-height:100px;flex-wrap:wrap;padding-block:18px}.site-footer p{grid-column:1/-1;grid-row:2;justify-self:center;text-align:center;width:100%;margin:0}.site-footer>.brand{grid-column:1;grid-row:1}.site-footer>.back-top{grid-column:2;grid-row:1}.site-footer .brand{font-size:28px}.back-top{font-size:8px}}


/* Accent color settings */
:root[data-accent="green"]{--green:#39ff68;--green-dim:#17a94a;--line:rgb(var(--accent-rgb) / .27)}
:root[data-accent="blue"]{--accent:#36a3ff;--accent-rgb:54 163 255;--accent-dim:#2476d1}
:root[data-accent="purple"]{--accent:#c084fc;--accent-rgb:192 132 252;--accent-dim:#9254d4}
:root[data-accent="red"]{--accent:#ff4d5e;--accent-rgb:255 77 94;--accent-dim:#c72e42}
.header-tools{display:flex;align-items:center;gap:12px;position:relative}
.settings-toggle{background:transparent;border:1px solid var(--line);color:var(--text);padding:10px 12px;display:flex;align-items:center;gap:8px;font:11px var(--mono);letter-spacing:.08em;cursor:pointer;transition:border-color .2s,color .2s}
.settings-toggle:hover,.settings-toggle[aria-expanded="true"]{border-color:var(--green);color:var(--green)}
.settings-toggle span{font-size:9px}
.settings-panel{position:absolute;right:5vw;top:calc(100% + 10px);z-index:30;width:min(340px,90vw);padding:20px;background:rgba(5,12,9,.98);border:1px solid var(--line);box-shadow:0 15px 50px rgba(0,0,0,.5),0 0 24px color-mix(in srgb,var(--green) 10%,transparent);backdrop-filter:blur(18px)}
.settings-panel[hidden]{display:none}
.settings-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.eyebrow-mini{font:10px var(--mono);letter-spacing:.15em;color:var(--green)}
.settings-panel h2{font-size:22px;line-height:1.2;margin:5px 0 0}
.settings-panel>p{font-size:12px;color:var(--muted);margin:12px 0 18px}
.settings-close{background:none;border:1px solid var(--line);color:var(--green);font-size:24px;line-height:1;width:32px;height:32px;cursor:pointer}
.accent-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.accent-option{display:flex;align-items:center;gap:9px;text-align:left;background:#08110d;border:1px solid rgba(130,160,140,.2);padding:10px 9px;color:var(--text);font:10px var(--mono);cursor:pointer;transition:border-color .2s,background .2s}
.accent-option:hover,.accent-option[aria-pressed="true"]{border-color:var(--green);background:color-mix(in srgb,var(--green) 8%,#08110d)}
.accent-option[aria-pressed="true"]::after{content:"✓";color:var(--green);margin-left:auto}
.swatch{width:13px;height:13px;border-radius:50%;display:inline-block;box-shadow:0 0 12px currentColor;flex:none}
.swatch-green{background:#39ff68;color:#39ff68}.swatch-blue{background:#36a3ff;color:#36a3ff}.swatch-purple{background:#c084fc;color:#c084fc}.swatch-red{background:#ff4d5e;color:#ff4d5e}
.settings-footer{display:flex;gap:8px;align-items:center;margin-top:16px;color:#81968a;font:9px/1.5 var(--mono)}
.settings-live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);flex:none}
@media(max-width:620px){.header-tools{gap:7px}.settings-toggle{padding:9px 8px;font-size:10px}.settings-toggle span{display:none}.header-cta{margin-left:0;margin-right:0}.settings-panel{right:5%;top:calc(100% + 8px)}}


/* Enhanced interaction polish */
:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.nav a[aria-current="location"]{color:var(--green)}
.project-art{transition:filter .25s,border-color .25s,transform .35s}
.project-card:hover .project-art{border-color:var(--line);filter:saturate(1.15)}
.project-card:hover .wire-cube{box-shadow:0 0 34px color-mix(in srgb,var(--green) 24%,transparent)}
.button:focus-visible,.header-cta:focus-visible,.settings-toggle:focus-visible{outline-offset:5px}
.reveal-ready{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.reveal-ready.is-visible{opacity:1;transform:translateY(0)}
.project-card:nth-child(2){transition-delay:.08s}.project-card:nth-child(3){transition-delay:.16s}
.settings-panel{animation:panel-in .18s ease-out}
@keyframes panel-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.reveal-ready{opacity:1;transform:none;transition:none}.settings-panel{animation:none}}

/* Settings control: full settings button on desktop; icon-only button on mobile */
@media (min-width: 621px){.settings-toggle{display:flex;align-items:center;justify-content:center}.settings-toggle span:first-child{font-size:13px}.settings-toggle span#settings-label{display:inline}}
@media (max-width: 620px){.settings-toggle{display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;font-size:0}.settings-toggle span:first-child{display:inline;font-size:17px;line-height:1}.settings-toggle span#settings-label{display:none}}

/* Project card banners: purpose-built artwork for each repository */
.project-art{height:180px;padding:13px 14px 11px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;isolation:isolate}
.banner-kicker,.banner-footer{display:flex;align-items:center;gap:7px;font:7px/1.4 var(--mono);letter-spacing:.08em;color:#b7c9bf;min-width:0}
.banner-kicker{white-space:nowrap}.banner-index{margin-left:auto;color:var(--green);font-size:6px}.banner-footer{justify-content:space-between;border-top:1px solid rgb(var(--accent-rgb) / .2);padding-top:7px;color:var(--green);font-size:6px}
.art-one{background:radial-gradient(ellipse at 50% 60%,rgb(var(--accent-rgb) / .18),transparent 60%),linear-gradient(140deg,#0b1b12,#020705)}
.apk-tiles{display:flex;justify-content:center;align-items:stretch;gap:10px;flex:1;padding:12px 0;min-height:0}
.apk-tile{width:66px;max-width:28%;border:1px solid rgb(var(--accent-rgb) / .35);background:linear-gradient(145deg,rgb(var(--accent-rgb) / .11),rgba(0,0,0,.3));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--green);box-shadow:inset 0 0 18px rgb(var(--accent-rgb) / .04)}
.apk-tile b{font:700 18px var(--mono)}.apk-tile small{font:6px var(--mono);letter-spacing:.06em}.apk-main{transform:translateY(-3px);border-color:rgb(var(--accent-rgb) / .7);box-shadow:0 0 18px rgb(var(--accent-rgb) / .08)}.apk-main b{font-size:22px}
.art-two{background:radial-gradient(ellipse at 50% 50%,rgb(var(--accent-rgb) / .12),transparent 65%),#030907}
.terminal-banner{border:1px solid rgb(var(--accent-rgb) / .3);background:rgba(0,0,0,.38);margin:8px 2px;flex:1;min-height:0;overflow:hidden}
.terminal-banner-bar{height:18px;display:flex;align-items:center;gap:4px;padding:0 7px;border-bottom:1px solid rgb(var(--accent-rgb) / .17);color:#789084;font:6px var(--mono)}.terminal-banner-bar i{width:4px;height:4px;border-radius:50%;background:var(--green);opacity:.8}.terminal-banner-bar span{margin-left:5px}
.terminal-lines{padding:7px 9px;font:clamp(7px,.65vw,9px)/1.55 var(--mono);color:#b9c9c0}.terminal-lines p{margin:0;white-space:nowrap}.terminal-lines p b,.terminal-lines p span{color:var(--green);font-weight:400}.terminal-lines p span{float:right}.terminal-lines .terminal-success{color:var(--green);font-size:7px}.terminal-cursor{animation:blink 1s steps(2,start) infinite}
.art-three{background:radial-gradient(ellipse at 50% 58%,rgb(var(--accent-rgb) / .18),transparent 52%),linear-gradient(140deg,#07120c,#020504)}
.voice-banner{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:18px;position:relative}.voice-orb{width:53px;height:53px;flex:none;border-radius:50%;display:grid;place-items:center;border:1px solid rgb(var(--accent-rgb) / .7);background:radial-gradient(circle,rgb(var(--accent-rgb) / .24),rgba(0,0,0,.3) 68%);box-shadow:0 0 22px rgb(var(--accent-rgb) / .14),inset 0 0 18px rgb(var(--accent-rgb) / .15);color:var(--green);font:700 15px var(--mono);position:relative}.voice-orb:before,.voice-orb:after{content:"";position:absolute;inset:-6px;border:1px solid rgb(var(--accent-rgb) / .22);border-radius:50%}.voice-orb:after{inset:-12px;border-style:dashed;animation:rotate 18s linear infinite}.voice-wave{height:50px;display:flex;align-items:center;gap:3px;min-width:0}.voice-wave i{display:block;width:2px;height:var(--bar);max-height:43px;background:var(--green);opacity:.75;box-shadow:0 0 5px rgb(var(--accent-rgb) / .3);border-radius:2px}.voice-label{position:absolute;bottom:3px;left:0;right:0;text-align:center;color:#9bb0a4;font:6px var(--mono);letter-spacing:.14em}.voice-label span{color:var(--green);margin:0 4px}
.project-card .project-art:hover{filter:brightness(1.12) saturate(1.08)}
@media(max-width:900px){.project-card:last-child .project-art{height:180px}}
@media(max-width:620px){.project-art{height:175px}.project-card:last-child .project-art{height:175px}.banner-kicker{font-size:6px}.banner-index{font-size:5px}.banner-footer{font-size:5px}.terminal-lines{font-size:7px}}

/* Project-link and responsive polish */
.project-title-link{display:inline-flex;align-items:baseline;gap:4px;max-width:100%;color:var(--text);transition:color .2s ease}
.project-title-link span{color:var(--green);font-size:.8em;transition:transform .2s ease}
.project-title-link:hover{color:var(--green)}
.project-title-link:hover span{transform:translate(2px,-2px)}
.project-art:focus-visible,.card-arrow:focus-visible,.project-title-link:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:2px}
.project-card{min-width:0;overflow:hidden}
.project-art{width:100%;min-width:0;cursor:pointer}
.banner-kicker{overflow:hidden;text-overflow:ellipsis}
.banner-footer span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:420px){.project-art{padding:11px 10px 9px}.banner-kicker{letter-spacing:.035em}.apk-tiles{gap:7px}.voice-banner{gap:12px}.voice-wave{gap:2px}.voice-wave i{width:2px}.terminal-lines{padding-inline:6px;font-size:6.5px}.project-type{max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.project-title-link,.project-title-link span{transition:none}}


/* Floating back-to-top control: appears after scrolling and hides near the top. */
.back-top{position:fixed;right:clamp(16px,3vw,38px);bottom:clamp(16px,3vw,30px);z-index:25;display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 14px;border:1px solid var(--line);background:rgba(5,12,9,.94);color:var(--green);box-shadow:0 8px 26px rgba(0,0,0,.32);backdrop-filter:blur(12px);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);transition:opacity .22s ease,transform .22s ease,visibility .22s,border-color .2s}
.back-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.back-top:hover{border-color:var(--green);color:var(--green)}
@media(prefers-reduced-motion:reduce){.back-top{transition:none}}


/* Polished navigation, cards, and keyboard accessibility */
.nav a{position:relative;padding-block:8px;color:#b8c8bf}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--green);transition:right .22s ease}
.nav a:hover::after,.nav a[aria-current="location"]::after{right:0}
.nav a[aria-current="location"]{color:var(--green)}
.project-card{border-radius:3px;box-shadow:0 8px 26px rgb(0 0 0 / .12)}
.project-art{border-radius:2px;transition:transform .28s ease,border-color .28s ease,filter .28s ease}
.project-card:hover .project-art{border-color:rgb(var(--accent-rgb) / .48);filter:brightness(1.08)}
.project-title-link{transition:color .2s ease}
.project-title-link:hover,.project-title-link:focus-visible{color:var(--green)}
.project-title-link span{display:inline-block;color:var(--green);transition:transform .2s ease}
.project-title-link:hover span{transform:translate(3px,-2px)}
.button:focus-visible,.nav a:focus-visible,.text-link:focus-visible,.project-art:focus-visible,.card-arrow:focus-visible,.back-top:focus-visible,.brand:focus-visible,.menu-toggle:focus-visible,.settings-toggle:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.project-card:focus-within{border-color:rgb(var(--accent-rgb) / .65)}
@media(max-width:620px){.project-card{padding:15px}.project-top{flex-wrap:wrap}.project-type{overflow-wrap:anywhere}.tags{gap:8px 12px}.site-footer{row-gap:8px}}
@media(prefers-reduced-motion:reduce){.nav a::after,.project-art,.project-title-link span{transition:none}}


/* Keep the header brand anchored to the left edge. */
.site-header{justify-content:space-between}
.site-header>.brand{flex:0 0 auto;margin:0 auto 0 0;text-align:left;justify-self:start}
.site-header>.nav{margin-inline:auto}
.site-header>.header-cta{flex:0 0 auto}
@media(max-width:620px){.site-header>.brand{margin-right:auto}.site-header>.nav{margin-inline:0}}

/* Final alignment: keep the J. brand at the left and copyright centered. */
.site-header{display:grid;grid-template-columns:auto 1fr auto;column-gap:24px;justify-content:initial}
.site-header>.brand{grid-column:1;justify-self:start;margin:0;text-align:left}
.site-header>.nav{grid-column:2;justify-self:center;margin:0}
.site-header>.header-cta{grid-column:3;justify-self:end}
@media(max-width:620px){.site-header{display:flex;justify-content:space-between}.site-header>.brand{margin:0 auto 0 0}.site-header>.nav{margin-inline:0}}


/* Mobile navigation: stable header layout, accessible animated dropdown. */
@media (max-width: 620px) {
  .site-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    height: 66px;
    padding-inline: max(4%, 12px);
  }
  .site-header > .brand { grid-column: 1; margin: 0; justify-self: start; }
  .site-header > .header-tools { grid-column: 2; justify-self: end; min-width: 0; gap: 7px; }
  .site-header > .menu-toggle { grid-column: 3; display: flex; order: initial; justify-self: end; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 9px; cursor: pointer; }
  .menu-toggle span { transform-origin: center; transition: transform .22s ease, opacity .18s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .nav,
  .site-header > .nav {
    display: flex;
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0 5%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    background: rgba(4, 10, 7, .98);
    border-bottom: 1px solid transparent;
    box-shadow: 0 18px 28px rgba(0, 0, 0, .28);
    transition: max-height .32s ease, opacity .22s ease, transform .26s ease, visibility .26s, padding .26s ease, border-color .26s ease;
  }
  .nav.open,
  .site-header > .nav.open {
    max-height: min(70vh, 420px);
    padding-block: 10px 16px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    border-bottom-color: var(--line);
    overflow-y: auto;
  }
  .nav a { display: block; padding: 13px 8px; border-bottom: 1px solid rgb(var(--accent-rgb) / .09); }
  .nav a:last-child { border-bottom: 0; }
  .nav a::after { bottom: 6px; left: 8px; right: 100%; width: auto; }
  .header-cta { white-space: nowrap; padding: 9px 10px; font-size: 9px; }
  .settings-toggle { flex: 0 0 38px; width: 38px; height: 38px; }
}

/* Smoother, consistent motion without adding layout jank. */
:where(a, button, .project-card, .skill, .accent-option, .skill-icon) {
  -webkit-tap-highlight-color: transparent;
}
.nav a, .header-cta, .settings-toggle, .accent-option, .skill-icon, .card-arrow {
  transition: color .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .25s ease, transform .25s cubic-bezier(.2,.75,.25,1);
}
.project-card { will-change: transform; }
.project-card:hover { box-shadow: 0 14px 32px rgba(0, 0, 0, .18); }
.project-art::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 25%, rgb(var(--accent-rgb) / .08) 48%, transparent 70%); transform: translateX(-100%); transition: transform .65s ease, opacity .25s ease; }
.project-card:hover .project-art::before, .project-art:focus-visible::before { opacity: 1; transform: translateX(100%); }
.button, .project-title-link, .text-link, .back-top { transition-timing-function: cubic-bezier(.2,.75,.25,1); }
.reveal-ready { transition: opacity .65s ease, transform .65s cubic-bezier(.2,.75,.25,1); }
.project-card.reveal-ready { transition-property: opacity, transform, border-color, box-shadow; }
@media (hover: none) {
  .project-card:hover { transform: none; box-shadow: none; }
  .project-card:hover .project-art::before { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-toggle span, .nav, .nav a, .header-cta, .settings-toggle, .accent-option, .skill-icon, .card-arrow,
  .project-card, .project-art::before, .reveal-ready { transition: none !important; animation: none !important; }
  .project-card:hover { transform: none; }
}

/* Mobile-first refinement: predictable header grid, comfortable tap targets, and compact layouts. */
@media (max-width: 620px) {
  html { scroll-padding-top: 76px; }
  .site-header {
    grid-template-columns: auto minmax(0, 1fr) 40px;
    grid-template-areas: "brand tools menu";
    column-gap: clamp(6px, 2vw, 12px);
    min-height: 66px;
    height: 66px;
    padding-inline: max(4vw, 12px);
  }
  .site-header > .brand { grid-area: brand; font-size: 31px; line-height: 1; letter-spacing: -2.5px; }
  .site-header > .header-tools {
    grid-area: tools;
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 7px;
    min-width: 0;
  }
  .site-header > .menu-toggle { grid-area: menu; width: 40px; min-width: 40px; height: 42px; border: 1px solid rgb(var(--accent-rgb) / .2); border-radius: 2px; }
  .menu-toggle:focus-visible { outline-offset: 2px; }
  .header-cta { padding: 9px 8px; font-size: clamp(8px, 2.3vw, 10px); letter-spacing: .025em; }
  .header-cta span { margin-left: 4px; }
  .settings-toggle { width: 36px; height: 38px; flex-basis: 36px; }
  .site-header > .nav {
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 0;
    padding: 0 max(5vw, 16px);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 20px 35px rgb(0 0 0 / .38);
  }
  .site-header > .nav.open {
    max-height: min(68dvh, 430px);
    padding-block: 10px max(16px, env(safe-area-inset-bottom));
    overflow-y: auto;
  }
  .site-header > .nav a {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 12px 10px;
    font-size: 12px;
    letter-spacing: .12em;
  }
  .site-header > .nav a::after { bottom: 5px; left: 10px; }
  .section-wrap { width: min(90%, 560px); }
  .hero { padding-top: 38px; padding-bottom: 48px; gap: 24px; }
  .hero h1 { font-size: clamp(36px, 9.5vw, 52px); overflow-wrap: anywhere; }
  .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hero-actions .button { width: 100%; padding-inline: 9px; gap: 8px; text-align: center; }
  .hero-visual { min-height: clamp(270px, 78vw, 340px); }
  .hud-top { left: 12px; right: 12px; }
  .code-window { left: 5%; max-width: 62%; overflow-wrap: anywhere; }
  .orb-wrap { width: 31%; right: 5%; }
  .hud-stats { left: 5%; right: 5%; }
  .section-block { padding-top: 44px; padding-bottom: 48px; }
  .section-heading { flex-wrap: wrap; margin-bottom: 24px; }
  .section-heading .eyebrow { max-width: 100%; font-size: 10px; letter-spacing: .11em; }
  .section-index { margin-left: auto; }
  .project-grid { gap: 14px; }
  .project-card { padding: 13px; }
  .project-card h3 { overflow-wrap: anywhere; }
  .tags span { max-width: 100%; overflow-wrap: anywhere; }
  .contact-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .contact-actions .button { width: 100%; }
  .site-footer { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .site-footer > .brand { justify-self: start; }
  .site-footer > .back-top { justify-self: end; }
  .site-footer p { grid-column: 1 / -1; grid-row: 2; justify-self: center; text-align: center; }
}
@media (max-width: 380px) {
  .site-header { grid-template-columns: auto minmax(0, 1fr) 36px; column-gap: 5px; padding-inline: 10px; }
  .site-header > .brand { font-size: 28px; }
  .site-header > .menu-toggle { width: 36px; min-width: 36px; padding: 7px; }
  .header-tools { gap: 4px !important; }
  .settings-toggle { width: 34px; flex-basis: 34px; }
  .header-cta { padding-inline: 6px; font-size: 8px; }
  .hero h1 { font-size: clamp(34px, 9.3vw, 42px); }
  .hero-actions { grid-template-columns: 1fr; }
  .hero-actions .button { justify-content: space-between; }
  .hero-visual { min-height: 265px; }
  .section-heading .eyebrow { font-size: 9px; }
  .project-art { height: 165px; }
  .contact-inner h2 { font-size: clamp(36px, 11vw, 44px); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header > .nav, .site-header > .nav a, .menu-toggle span { transition: none !important; }
}


/* Touch-first motion layer: keep the same motion polish on phones as desktop. */
@media (max-width: 620px) {
  .site-header > .nav a {
    opacity: 0;
    transform: translateY(-7px);
    transition: opacity .24s ease, transform .28s cubic-bezier(.2,.75,.25,1), color .2s ease, background-color .2s ease;
  }
  .site-header > .nav.open a { opacity: 1; transform: translateY(0); }
  .site-header > .nav.open a:nth-child(1) { transition-delay: .025s; }
  .site-header > .nav.open a:nth-child(2) { transition-delay: .055s; }
  .site-header > .nav.open a:nth-child(3) { transition-delay: .085s; }
  .site-header > .nav.open a:nth-child(4) { transition-delay: .115s; }
  .site-header > .nav.open a:nth-child(5) { transition-delay: .145s; }
  .site-header > .nav.open a:nth-child(6) { transition-delay: .175s; }

  .hero .eyebrow, .hero h1, .hero-subtitle, .hero .intro, .hero-actions, .hero-meta, .hero-visual {
    animation: mobile-enter .65s cubic-bezier(.2,.75,.25,1) both;
  }
  .hero h1 { animation-delay: .06s; }
  .hero-subtitle { animation-delay: .10s; }
  .hero .intro { animation-delay: .14s; }
  .hero-actions { animation-delay: .18s; }
  .hero-meta { animation-delay: .22s; }
  .hero-visual { animation-delay: .12s; }

  .project-card { transition: transform .24s cubic-bezier(.2,.75,.25,1), border-color .24s ease, box-shadow .24s ease; }
  .project-card:active { transform: scale(.985); border-color: rgb(var(--accent-rgb) / .72); box-shadow: 0 8px 24px rgb(0 0 0 / .22); }
  .project-card:active .project-art { filter: brightness(1.12) saturate(1.1); }
  .button, .header-cta, .settings-toggle, .accent-option, .text-link, .back-top, .menu-toggle {
    -webkit-tap-highlight-color: transparent;
    transition: transform .2s cubic-bezier(.2,.75,.25,1), color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .button:active, .header-cta:active, .settings-toggle:active, .accent-option:active, .back-top:active, .menu-toggle:active { transform: scale(.97); }
  .skill { transition: border-color .25s ease, transform .25s ease; }
  .skill:active { border-color: rgb(var(--accent-rgb) / .55); transform: translateX(3px); }
  .hero-visual:before { animation: mobile-grid-pulse 7s ease-in-out infinite alternate; }
  .orb { animation-duration: 22s; }
  .wire-cube { animation: mobile-cube-drift 8s ease-in-out infinite; }
  .data-ring { animation: mobile-ring-glow 4s ease-in-out infinite alternate; }
  .voice-orb { animation: mobile-voice-pulse 3.2s ease-in-out infinite; }
  .voice-wave i { animation: mobile-wave 1.25s ease-in-out infinite alternate; }
  .voice-wave i:nth-child(3n) { animation-delay: -.35s; }
  .voice-wave i:nth-child(3n + 1) { animation-delay: -.7s; }
  .project-card:nth-child(2) .data-ring { animation-delay: -.8s; }
  .project-art::before { opacity: .22; transform: translateX(-115%); animation: mobile-banner-sheen 8s ease-in-out infinite; }
  .project-card:nth-child(2) .project-art::before { animation-delay: -2.5s; }
  .project-card:nth-child(3) .project-art::before { animation-delay: -5s; }
  .back-top.is-visible { animation: mobile-back-top-in .32s cubic-bezier(.2,.75,.25,1) both; }
}

@keyframes mobile-enter {
  from { opacity: 0; transform: translateY(13px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mobile-grid-pulse {
  from { opacity: .55; }
  to { opacity: 1; }
}
@keyframes mobile-cube-drift {
  0%, 100% { transform: translate(-50%, -50%) rotate(30deg) scale(.98); }
  50% { transform: translate(-50%, -53%) rotate(38deg) scale(1.03); }
}
@keyframes mobile-ring-glow {
  from { box-shadow: inset 0 0 12px rgb(var(--accent-rgb) / .06); }
  to { box-shadow: inset 0 0 22px rgb(var(--accent-rgb) / .18), 0 0 12px rgb(var(--accent-rgb) / .10); }
}
@keyframes mobile-voice-pulse {
  0%, 100% { box-shadow: 0 0 18px rgb(var(--accent-rgb) / .10), inset 0 0 14px rgb(var(--accent-rgb) / .12); }
  50% { box-shadow: 0 0 28px rgb(var(--accent-rgb) / .24), inset 0 0 22px rgb(var(--accent-rgb) / .2); }
}
@keyframes mobile-wave {
  from { transform: scaleY(.58); opacity: .5; }
  to { transform: scaleY(1); opacity: .95; }
}
@keyframes mobile-banner-sheen {
  0%, 65%, 100% { transform: translateX(-115%); opacity: 0; }
  72% { opacity: .5; }
  90% { transform: translateX(115%); opacity: .18; }
}
@keyframes mobile-back-top-in {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow, .hero h1, .hero-subtitle, .hero .intro, .hero-actions, .hero-meta, .hero-visual,
  .hero-visual:before, .wire-cube, .data-ring, .voice-orb, .voice-wave i, .project-art::before,
  .back-top.is-visible { animation: none !important; }
  .site-header > .nav a { opacity: 1; transform: none; transition: none !important; }
}

/* Unified motion system: the same animation language on desktop, tablet, and touch devices. */
:root {
  --motion-ease: cubic-bezier(.2,.75,.25,1);
  --motion-fast: 180ms;
  --motion-normal: 280ms;
  --motion-slow: 650ms;
}

/* Entrance and scroll-reveal motion is shared across all viewport sizes. */
.hero .eyebrow,
.hero h1,
.hero-subtitle,
.hero .intro,
.hero-actions,
.hero-meta,
.hero-visual {
  animation: unified-enter var(--motion-slow) var(--motion-ease) both;
}
.hero h1 { animation-delay: 60ms; }
.hero-subtitle { animation-delay: 100ms; }
.hero .intro { animation-delay: 140ms; }
.hero-actions { animation-delay: 180ms; }
.hero-meta { animation-delay: 220ms; }
.hero-visual { animation-delay: 120ms; }
.reveal-ready { transition: opacity var(--motion-slow) ease, transform var(--motion-slow) var(--motion-ease); }

/* Decorative visuals remain alive on desktop and mobile, not only on touch screens. */
.hero-visual:before { animation: unified-grid-pulse 7s ease-in-out infinite alternate; }
.wire-cube { animation: unified-cube-drift 8s ease-in-out infinite; }
.data-ring { animation: unified-ring-glow 4s ease-in-out infinite alternate; }
.voice-orb { animation: unified-voice-pulse 3.2s ease-in-out infinite; }
.voice-wave i { transform-origin: center; animation: unified-wave 1.25s ease-in-out infinite alternate; }
.voice-wave i:nth-child(3n) { animation-delay: -.35s; }
.voice-wave i:nth-child(3n + 1) { animation-delay: -.7s; }
.project-card:nth-child(2) .data-ring { animation-delay: -.8s; }
.project-art::before {
  opacity: .18;
  transform: translateX(-115%);
  animation: unified-banner-sheen 8s ease-in-out infinite;
}
.project-card:nth-child(2) .project-art::before { animation-delay: -2.5s; }
.project-card:nth-child(3) .project-art::before { animation-delay: -5s; }

/* Equivalent feedback for mouse hover, keyboard focus, and finger taps. */
.project-card,
.project-art,
.button,
.header-cta,
.settings-toggle,
.accent-option,
.skill,
.skill-icon,
.text-link,
.back-top,
.menu-toggle,
.nav a,
.project-title-link span {
  transition-timing-function: var(--motion-ease);
}
.project-card:active,
.project-card:focus-within {
  border-color: rgb(var(--accent-rgb) / .72);
  box-shadow: 0 8px 24px rgb(0 0 0 / .22);
}
.project-card:active .project-art,
.project-card:focus-within .project-art {
  filter: brightness(1.08) saturate(1.06);
}
.button:active,
.header-cta:active,
.settings-toggle:active,
.accent-option:active,
.back-top:active,
.menu-toggle:active { transform: scale(.97); }
.skill:active { border-color: rgb(var(--accent-rgb) / .55); }
.back-top.is-visible { animation: unified-back-top-in 320ms var(--motion-ease) both; }

@keyframes unified-enter {
  from { opacity: 0; transform: translateY(13px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes unified-grid-pulse { from { opacity: .55; } to { opacity: 1; } }
@keyframes unified-cube-drift {
  0%, 100% { transform: translate(-50%, -50%) rotate(30deg) scale(.98); }
  50% { transform: translate(-50%, -53%) rotate(38deg) scale(1.03); }
}
@keyframes unified-ring-glow {
  from { box-shadow: inset 0 0 12px rgb(var(--accent-rgb) / .06); }
  to { box-shadow: inset 0 0 22px rgb(var(--accent-rgb) / .18), 0 0 12px rgb(var(--accent-rgb) / .10); }
}
@keyframes unified-voice-pulse {
  0%, 100% { box-shadow: 0 0 18px rgb(var(--accent-rgb) / .10), inset 0 0 14px rgb(var(--accent-rgb) / .12); }
  50% { box-shadow: 0 0 28px rgb(var(--accent-rgb) / .24), inset 0 0 22px rgb(var(--accent-rgb) / .2); }
}
@keyframes unified-wave { from { transform: scaleY(.58); opacity: .5; } to { transform: scaleY(1); opacity: .95; } }
@keyframes unified-banner-sheen {
  0%, 65%, 100% { transform: translateX(-115%); opacity: 0; }
  72% { opacity: .42; }
  90% { transform: translateX(115%); opacity: .16; }
}
@keyframes unified-back-top-in {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Keep mobile motion smooth without requiring hover; avoid animations while reduced motion is requested. */
@media (hover: none) {
  .project-card:hover { transform: none; }
  .project-card:active { transform: scale(.99); }
  .project-card:active .project-art::before { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow, .hero h1, .hero-subtitle, .hero .intro, .hero-actions, .hero-meta, .hero-visual,
  .hero-visual:before, .wire-cube, .data-ring, .voice-orb, .voice-wave i, .project-art::before,
  .back-top.is-visible { animation: none !important; }
  .reveal-ready { opacity: 1 !important; transform: none !important; transition: none !important; }
  .project-card, .project-art, .button, .header-cta, .settings-toggle, .accent-option, .skill,
  .skill-icon, .text-link, .back-top, .menu-toggle, .nav a, .project-title-link span {
    transition: none !important;
  }
}

/* Responsive profile/hero: keep the introduction readable and the visual contained on phones. */
.hero-copy,.hero-visual{min-width:0}
.hero h1,.hero-subtitle,.intro{overflow-wrap:anywhere}
@media (max-width: 760px) {
  .hero { grid-template-columns:minmax(0,1fr); gap:30px; padding-top:44px; padding-bottom:56px; }
  .hero-copy { width:100%; max-width:680px; }
  .hero h1 { max-width:12ch; font-size:clamp(2.55rem,9vw,4rem); }
  .hero-visual { width:100%; min-height:clamp(290px,75vw,390px); }
  .hero-meta { margin-top:28px; }
  .scroll-cue { position:static; margin-top:-8px; }
}
@media (max-width: 420px) {
  .hero { gap:24px; padding-top:34px; }
  .hero h1 { font-size:clamp(2.25rem,10vw,2.8rem); }
  .hero .eyebrow { font-size:10px; letter-spacing:.11em; gap:9px; }
  .hero-actions .button { flex:1 1 auto; padding-inline:12px; gap:9px; }
  .hero-visual { min-height:285px; }
  .code-window { left:6%; max-width:58%; font-size:clamp(7px,2.1vw,9px); }
  .hud-top { left:13px; right:13px; font-size:7px; }
  .hud-stats { left:6%; right:6%; bottom:20px; font-size:7px; }
  .visual-caption { right:12px; font-size:6px; }
}

/* Appearance control */
.theme-mode-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:18px 0 14px; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font:10px var(--mono); letter-spacing:.1em; color:var(--muted); }
.theme-mode-toggle { display:inline-flex; align-items:center; gap:9px; padding:9px 12px; border:1px solid var(--line); border-radius:4px; background:var(--panel2); color:var(--text); cursor:pointer; font:11px var(--mono); letter-spacing:0; transition:background .2s,border-color .2s,transform .2s; }
.theme-mode-toggle:hover,.theme-mode-toggle:focus-visible { border-color:var(--accent); outline:none; }
.theme-mode-toggle:active { transform:scale(.97); }
/* J.A.R.V.I.S. interface: deep navy panels, cyan HUD accents, and restrained glow. */
:root[data-theme="jarvis"] {
  --bg:#050b14;
  --panel:#091525;
  --panel2:#0d2034;
  --text:#e4f6ff;
  --muted:#8baabd;
  /* Accent variables are supplied by the selected accent option. */
  --green:var(--accent);
  --green-dim:var(--accent-dim);
  --line:rgb(var(--accent-rgb) / .28);
}
:root[data-theme="jarvis"] body:before {
  background:radial-gradient(ellipse at 75% 18%,rgb(35 155 220 / .16),transparent 48%),
    linear-gradient(90deg,transparent 49.9%,rgb(var(--accent-rgb) / .035) 50%,transparent 50.1%),
    linear-gradient(0deg,transparent 49.9%,rgb(var(--accent-rgb) / .025) 50%,transparent 50.1%);
}
:root[data-theme="jarvis"] .scanlines { opacity:.045; background:repeating-linear-gradient(to bottom,transparent 0,transparent 4px,rgba(30,130,190,.22) 5px); }
:root[data-theme="jarvis"] .site-header { background:rgba(5,11,20,.92); box-shadow:0 8px 28px rgb(0 0 0 / .18); }
:root[data-theme="jarvis"] .intro,
:root[data-theme="jarvis"] .about-content,
:root[data-theme="jarvis"] .contact-copy { color:#b7d0df; }
:root[data-theme="jarvis"] .hero-visual { background:linear-gradient(135deg,rgba(10,32,53,.98),rgba(3,10,20,.98)); box-shadow:inset 0 0 42px rgb(35 155 220 / .07); }
:root[data-theme="jarvis"] .code-window { color:#d8efff; text-shadow:0 0 10px rgb(var(--accent-rgb) / .13); }
:root[data-theme="jarvis"] .code-muted { color:#7db9d7; }
:root[data-theme="jarvis"] .hud-stats,
:root[data-theme="jarvis"] .visual-caption,
:root[data-theme="jarvis"] .section-index,
:root[data-theme="jarvis"] .scroll-cue { color:#8dbbd2; }
:root[data-theme="jarvis"] .meter { background:#16334a; }
:root[data-theme="jarvis"] .project-card { background:linear-gradient(150deg,rgba(11,29,48,.97),rgba(5,14,25,.96)); box-shadow:0 10px 30px rgb(0 0 0 / .2); }
:root[data-theme="jarvis"] .project-type { color:#c4dce9; }
:root[data-theme="jarvis"] .project-art { background-color:#071526; }
:root[data-theme="jarvis"] .skill { background:rgba(9,25,42,.82); }
:root[data-theme="jarvis"] .skill p { color:#a6c2d2; }
:root[data-theme="jarvis"] .contact-section { background:linear-gradient(180deg,transparent,rgba(20,112,166,.07)); }
:root[data-theme="jarvis"] .button { border-color:#35566d; }
:root[data-theme="jarvis"] .nav { color:#c4deed; }
:root[data-theme="jarvis"] .nav a { color:#c4deed; }
:root[data-theme="jarvis"] .nav.open { background:#081525; }
:root[data-theme="jarvis"] .settings-panel { background:rgba(7,19,33,.98); box-shadow:0 20px 60px rgba(0,0,0,.48); }
:root[data-theme="jarvis"] .settings-panel p { color:#a9c4d5; }
:root[data-theme="jarvis"] .theme-mode-toggle { background:#102941; }
:root[data-theme="jarvis"] .site-footer { color:#a9c4d5; }
:root[data-theme="jarvis"] .orb-label { color:var(--accent); }
:root[data-theme="jarvis"] .orb-core { opacity:.9; }
@media (prefers-reduced-motion: reduce) { .theme-mode-toggle { transition:none; } }

/* Responsive interactive map of the Philippines */
.philippines-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin:0 0 26px; }
.philippines-intro h2 { font-size:clamp(34px,4.2vw,56px); line-height:1.08; letter-spacing:-.045em; margin:0; }
.philippines-intro h2 em { color:var(--green); font-style:normal; }
.philippines-intro p { max-width:360px; margin:0; color:var(--muted); font-size:13px; }
.philippines-map-frame { position:relative; border:1px solid var(--line); background:var(--panel); padding:36px 0; box-shadow:0 0 34px rgb(var(--accent-rgb) / .07); overflow:hidden; }
.philippines-map-frame::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border:1px solid rgb(var(--accent-rgb) / .12); }
.philippines-map-frame iframe { display:block; width:100%; height:clamp(320px,48vw,540px); border:0; background:var(--panel); }
.map-hud { position:absolute; z-index:2; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; background:color-mix(in srgb,var(--panel) 94%,transparent); color:var(--green); font:9px/1.4 var(--mono); letter-spacing:.08em; }
.map-hud-top { top:0; border-bottom:1px solid var(--line); }
.map-hud-bottom { bottom:0; border-top:1px solid var(--line); }
.map-hud-top span:first-child { display:flex; align-items:center; gap:8px; }
.map-hud a { color:var(--green); white-space:nowrap; }
.map-hud a:hover { text-decoration:underline; }
.map-attribution { margin:10px 0 0; color:var(--muted); font:9px/1.5 var(--mono); }
:root[data-theme="jarvis"] .philippines-map-frame { box-shadow:0 0 40px rgb(35 155 220 / .1); }
@media(max-width:620px) {
  .philippines-intro { display:block; }
  .philippines-intro h2 { font-size:clamp(34px,9vw,44px); }
  .philippines-intro p { margin-top:12px; font-size:12px; }
  .philippines-map-frame { padding:34px 0; }
  .philippines-map-frame iframe { height:390px; }
  .map-hud { padding:9px 8px; font-size:7px; letter-spacing:.035em; }
}

/* Visayas-only interactive map: responsive on mobile, tablet and desktop */
.philippines-map-frame { position:relative; padding:34px 0; isolation:isolate; }
#visayas-map { width:100%; height:clamp(360px, 55vw, 660px); min-height:340px; background:var(--panel); z-index:0; }
#visayas-map .leaflet-control-zoom a { background:var(--panel); color:var(--accent); border-color:var(--line); }
#visayas-map .leaflet-control-zoom a:hover { background:var(--accent); color:#07111a; }
#visayas-map .leaflet-control-attribution { font:9px/1.4 var(--mono); background:rgba(5,12,18,.78); color:#c6d5df; }
#visayas-map .leaflet-control-attribution a { color:#6dc8ff; }
#visayas-map .leaflet-popup-content-wrapper, #visayas-map .leaflet-popup-tip { background:#081725; color:#e4f4ff; border:1px solid var(--accent); box-shadow:0 0 20px rgb(var(--accent-rgb) / .15); }
#visayas-map .leaflet-popup-content { margin:12px 14px; font:12px/1.55 var(--mono); }
#visayas-map .leaflet-popup-content strong { display:block; color:var(--accent); font-size:13px; margin-bottom:3px; }
#visayas-map .leaflet-popup-close-button { color:var(--accent) !important; }
.map-controls { position:absolute; z-index:500; top:46px; right:12px; display:flex; gap:7px; }
.map-control-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; padding:8px 11px; border:1px solid var(--line); border-radius:3px; background:color-mix(in srgb,var(--panel) 94%,transparent); color:var(--accent); font:9px/1.2 var(--mono); letter-spacing:.07em; cursor:pointer; backdrop-filter:blur(8px); transition:background .2s ease,color .2s ease,border-color .2s ease; }
.map-control-button:hover, .map-control-button:focus-visible { background:var(--accent); border-color:var(--accent); color:#07111a; outline:none; }
.map-attribution a { color:var(--accent); }
.philippines-map-frame:fullscreen { background:#06101b; padding:38px 0 34px; display:flex; flex-direction:column; }
.philippines-map-frame:fullscreen #visayas-map { height:auto; min-height:0; flex:1; }
.philippines-map-frame:fullscreen .map-controls { top:48px; }
:root[data-theme="jarvis"] .philippines-map-frame { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
@media (max-width:700px) {
  #visayas-map { height:clamp(390px, 62svh, 560px); min-height:360px; }
  .map-controls { left:8px; right:8px; top:42px; justify-content:flex-end; gap:5px; }
  .map-control-button { min-height:34px; padding:7px 8px; font-size:8px; }
  .map-hud { padding:9px 8px; font-size:7px; letter-spacing:.035em; }
  .map-hud-bottom span { max-width:62%; }
  .map-hud-bottom a { font-size:7px; }
  .philippines-map-frame { padding-top:34px; padding-bottom:34px; }
}
@media (max-width:380px) {
  #visayas-map { height:390px; }
  .map-control-button span { font-size:7px; }
  .map-control-button { gap:4px; }
}
@media (prefers-reduced-motion:reduce) { .map-control-button { transition:none; } }
.visayas-map-marker { background:transparent; border:0; }
.visayas-map-marker span { display:block; width:12px; height:12px; border-radius:50%; background:var(--accent); border:2px solid #e8f8ff; box-shadow:0 0 0 4px rgb(var(--accent-rgb) / .2),0 0 16px var(--accent); }


/* Bantayan Island focus: glowing outline, clear label, and touch-friendly controls. */
.bantayan-island-highlight { filter: drop-shadow(0 0 7px rgba(0, 217, 255, .8)); }
.bantayan-map-label { background:rgba(4,18,31,.92); color:#67eaff; border:1px solid #00d9ff; border-radius:2px; box-shadow:0 0 18px rgba(0,217,255,.28); font:700 10px/1.3 var(--mono); letter-spacing:.12em; padding:6px 8px; }
.bantayan-map-label::before { display:none; }
#visayas-map .bantayan-place-marker span { width:11px; height:11px; background:#fff; border-color:#00d9ff; box-shadow:0 0 0 4px rgba(0,217,255,.28),0 0 16px #00d9ff; }
#visayas-map .leaflet-tooltip.bantayan-map-label { white-space:nowrap; }
#visayas-map { touch-action:pan-x pan-y; }
@media (max-width:700px) {
  .map-controls { flex-wrap:wrap; }
  .map-control-button { min-height:38px; }
  #visayas-map .leaflet-tooltip.bantayan-map-label { font-size:8px; letter-spacing:.06em; padding:5px 6px; }
}