@font-face{font-family:'Cherry Bomb One';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/cherry-bomb-one.ttf') format('truetype')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/nunito-regular.ttf') format('truetype')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700 900;font-display:swap;src:url('fonts/nunito-bold.ttf') format('truetype')}
@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:400 500;font-display:swap;src:url('fonts/pixelify-sans.ttf') format('truetype')}

/* A little pastel internet nostalgia, with plenty of breathing room. */
/* Keep temporarily hidden sections and navigation out of the layout. */
#play[hidden],.rail a[hidden]{display:none!important}
:root{
  --paper:#fcf7ff;--ink:#493756;--plum:#8056a4;--muted:#7d6a8b;
  --line:#a688bd44;--lavender:#ae89d0;--pink:#f2adcf;--blue:#b9d5f5;
  --surface:#fffaff;--soft:#f2e8fb;--outline:#815599;
  --serif:'Cherry Bomb One','Arial Rounded MT Bold',sans-serif;
  --sans:'Nunito','Trebuchet MS',sans-serif;--pixel:'Pixelify Sans',monospace;
}
html[data-theme="dark"]{
  --paper:#0d0b16;--ink:#f3ebfa;--plum:#d3b3ef;--muted:#b9abc9;
  --line:#9e80bb38;--lavender:#b393d0;--pink:#e6b0cf;--blue:#b4cff6;
  --surface:#171221;--soft:#20182d;--outline:#75538b;
}
body,[data-theme="dark"] body{
  background:radial-gradient(ellipse at 82% 8%,#dab9f22b,transparent 32%),radial-gradient(ellipse at 2% 26%,#fac8dd24,transparent 29%),var(--paper);
  font-weight:400;
}
body:after{opacity:.09}[data-theme="dark"] body:after{opacity:.035}
.ambient-light{background:radial-gradient(ellipse at 70% 24%,#e5d6ff55,transparent 44%),radial-gradient(ellipse at 0 2%,#ffe6f14d,transparent 40%)}
[data-theme="dark"] body{background:radial-gradient(ellipse at 82% 8%,#38224f15,transparent 38%),radial-gradient(ellipse at 2% 26%,#2434500d,transparent 35%),var(--paper)}
[data-theme="dark"] body:after{opacity:.015}
[data-theme="dark"] .ambient-light{background:radial-gradient(ellipse at 75% 18%,#65568d0b,transparent 46%),radial-gradient(ellipse at 4% 6%,#647aa809,transparent 42%)}
::selection,[data-theme="dark"] ::selection{background:#e6b7ee;color:#432a55}
.shell{width:min(1080px,calc(100% - 112px))}
.topbar{padding-top:30px}
.brand{font:400 28px/1.2 var(--serif);letter-spacing:.01em;gap:9px;color:var(--plum)}
.brand .star{color:#d796bf;font-size:28px}
.eyebrow{font-family:var(--pixel);font-size:13px;font-weight:400;letter-spacing:.06em}
.topbar .eyebrow{font:12px var(--pixel);letter-spacing:.02em;text-transform:lowercase}
.hero{min-height:max(760px,calc(100svh - 65px));padding-block:85px 105px;justify-content:center}
.hero-overline{font-size:12px;letter-spacing:.04em;margin-bottom:24px;text-transform:lowercase;color:var(--muted);gap:10px}
.hero-overline:before{display:none}
.pixel-star{color:#b992da;font:20px var(--pixel)}
.hero h1{font-family:var(--serif);font-size:clamp(96px,11.8vw,165px);line-height:1.04;letter-spacing:-.028em;isolation:isolate}
.hero h1 .dawn{display:flex;width:fit-content;position:relative}
.hero h1 .dev{display:flex;align-items:baseline;margin:.025em 0 0 .32em;font-style:normal;font-size:.8em;white-space:nowrap;position:relative}
.hero h1 .as{display:inline-flex;font-size:.49em;letter-spacing:-.02em;font-style:normal;margin-right:.25em;vertical-align:baseline;align-self:center}
.dev-word{display:inline-flex}
.bubble-letter{display:inline-block;transform-origin:50% 85%;--tilt:-8deg;position:relative}
.bubble-letter:nth-child(even){--tilt:8deg}
.glyph{display:inline-block;color:var(--pink);-webkit-text-stroke:1.7px var(--outline);paint-order:stroke fill;text-shadow:0 3px #fff4fc,0 6px #ae88c6;transform-origin:50% 85%}
.dawn .bubble-letter:nth-child(2) .glyph{color:#efbfdf}
.dawn .bubble-letter:nth-child(3) .glyph{color:#e0b8ef}
.dev-word .glyph{color:var(--blue)}
.dev-word .bubble-letter:nth-child(2) .glyph{color:#c8c0f3}
.as .glyph{color:#d8bfee;-webkit-text-stroke:1.2px var(--outline);text-shadow:0 2px #fff4fc,0 4px #ae88c6}
.title-heart{font-family:var(--sans);font-size:.34em;font-weight:700;align-self:flex-start;margin:.32em 0 0 .3em;color:#c983b0;rotate:14deg}
.js .hero h1>span{animation:none}
.is-popping .bubble-letter{animation:bubble-pop .8s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--i) * 65ms)}
@keyframes bubble-pop{
  0%{opacity:0;transform:translateY(30px) scale(.3,.45) rotate(var(--tilt))}
  48%{opacity:1;transform:translateY(-13px) scale(1.1,.94) rotate(calc(var(--tilt) * -.45))}
  70%{transform:translateY(4px) scale(.96,1.07) rotate(2deg)}
  86%{transform:translateY(-3px) scale(1.025,.98)}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}
}
@keyframes letter-boop{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-12px) scale(1.1,.93) rotate(-5deg)}65%{transform:translateY(3px) scale(.97,1.05)}}
@media(hover:hover){.bubble-letter:hover .glyph{animation:letter-boop .6s ease}}
.hero-copy{margin-top:31px;max-width:470px;font-size:18px;line-height:1.7}
.hero-copy strong{font-weight:800}
.hero-copy .dawn-name{color:var(--plum)}
.hero-copy .greeting{display:inline-block;margin-top:2px}
.greeting>span{color:#cc8bb9;display:inline-block;margin-left:4px}
.hero-copy .name{font-size:12px;margin-top:13px;color:var(--muted)}
.hero-actions{display:flex;align-items:center;gap:24px;position:relative;z-index:2;margin-top:26px;width:fit-content}
.hero-link,[data-theme="dark"] .hero-link{margin:0;background:var(--soft);color:var(--ink);font-size:13px;font-weight:700;border:1px solid #bba0cd;border-radius:9px;box-shadow:inset 0 2px #ffffff70,0 3px 0 #bca1d3;padding:13px 18px;gap:28px}
.hero-link:hover,[data-theme="dark"] .hero-link:hover{background:var(--surface);transform:translateY(-2px)}
.replay-pop{font:12px var(--pixel);padding:10px 0;border:0;color:var(--muted);display:flex;gap:6px;align-items:center}
.replay-pop>span{font-family:var(--sans);font-size:20px}
.replay-pop:hover{color:var(--plum)}
.replay-pop:disabled{opacity:.45;cursor:default}
.hero-foot{font:10px var(--pixel);letter-spacing:.04em;bottom:28px}
.hero-foot .line{background:repeating-linear-gradient(90deg,var(--line) 0 3px,transparent 3px 7px);width:90px}
.hero-sparkles{position:absolute;inset:0;pointer-events:none;z-index:1}
.hero-sparkles span{position:absolute;color:#c09ad8;animation:pastel-twinkle 5s ease-in-out infinite;font-size:25px}
.hero-sparkles span:nth-child(1){left:48%;top:18%;color:#d6ba7d;font-size:24px}
.hero-sparkles span:nth-child(2){right:2%;top:26%;color:#dba4c7;font-size:26px;rotate:15deg;animation-delay:.8s}
.hero-sparkles span:nth-child(3){right:42%;top:55%;font-size:31px;animation-delay:1.6s}
.hero-sparkles span:nth-child(4){right:10%;top:64%;color:#b7c6e8;font-size:16px;animation-delay:2.4s}
@keyframes pastel-twinkle{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}
.hero:not(.in-view) .hero-sparkles span{animation-play-state:paused}
.sculpture{width:clamp(290px,39vw,510px);right:-5%;top:15%}
.celestial{width:clamp(280px,34vw,460px);right:-2%;top:20%;color:#b898d2;opacity:.65}
.hero::before{background:#eaddf5;opacity:.45;width:27vw;right:4%;top:25%}
[data-theme="dark"] .hero::before{background:#2a1b3c;opacity:.24}
.rail a{font:13px var(--pixel);padding-block:14px}
.rail:before{right:9.5px}
.rail i{display:grid;place-items:center;flex:0 0 20px;width:20px;height:24px;border:0;border-radius:0;background:transparent;transform:none;color:var(--muted);transition:color .25s,filter .25s}
.dawn-nav-icon{display:block;width:20px;height:24px;overflow:visible}
.dawn-nav-body{fill:currentColor;fill-opacity:.16;stroke:currentColor;stroke-width:.9;stroke-linejoin:round;transition:fill-opacity .25s}
.dawn-nav-highlight{fill:#fff5ff;opacity:.12;transition:opacity .25s}
.rail a:hover i,.rail a:focus-visible i{color:var(--plum)}
.rail a[aria-current] i,[data-theme="dark"] .rail a[aria-current] i{background:transparent;border:0;box-shadow:none;color:var(--plum);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--plum) 40%,transparent))}
.rail a[aria-current] .dawn-nav-body{fill-opacity:1}
.rail a[aria-current] .dawn-nav-highlight{opacity:.65}
.theme-toggle,.motion{font:11px var(--pixel)}
.section{padding-block:95px}
.section-heading{align-items:baseline;gap:30px}
.section-heading .eyebrow{font-size:12px}
.section-heading h2{font-size:clamp(38px,4.8vw,62px);line-height:1.14;letter-spacing:-.01em}
h2 em{font-style:normal;color:var(--plum)}
.project-title{font:400 clamp(30px,3.45vw,44px)/1.25 var(--serif);letter-spacing:0}
.project-number{font:14px var(--pixel);padding-top:9px}
.project{grid-template-columns:36px 1fr 160px 25px;gap:24px}
.project-art{width:160px}
.project-description{font-size:14px}
.project .status{font:11px/1.6 var(--pixel);letter-spacing:.025em}
.project[data-project="hm"],[data-theme="dark"] .project[data-project="hm"]{background:linear-gradient(120deg,#e2c9f225,#f6c9df18),var(--soft);border:1px solid var(--line);border-radius:10px;box-shadow:inset 0 2px #ffffff40,3px 3px 0 var(--line)}
.project[data-project="hm"]:hover,[data-theme="dark"] .project[data-project="hm"]:hover{background-color:var(--surface)}
.project:hover,[data-theme="dark"] .project:hover{background-color:var(--soft)}
.project-art [fill="#f5f1ee"],[data-theme="dark"] .project-art [fill="#f5f1ee"],[data-theme="dark"] .project[data-project="hm"] .project-art [fill="#f5f1ee"]{fill:var(--paper)}
.project-note{font-family:var(--pixel);font-size:12px}
.about{grid-template-columns:1fr 1.1fr;gap:65px}
.about .section-heading h2{line-height:1.12}
.about-mark{font-style:normal;color:#ceb0df;font-size:100px}
.about-mark:after{color:#deb0cf}
.about-intro{font:700 24px/1.5 var(--sans)}
.about-intro em{font-style:normal;color:var(--plum)}
.about-description{font-size:15px}
.skills{gap:9px;max-width:450px}
.skills span{background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:5px 9px}
.about-detail .eyebrow{font-size:11px;letter-spacing:.03em}
.sky,[data-theme="dark"] .sky{background:radial-gradient(ellipse,#bca0df15,transparent 70%)}
.sky-star{color:#b08bc9}
.sky-star small{font:11px var(--pixel)}
.contact h2{font-size:clamp(60px,8vw,108px);line-height:1.15;letter-spacing:-.015em}
.contact-email{font-weight:700}
footer{font:11px/1.6 var(--pixel)}
dialog,[data-theme="dark"] dialog{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:5px 5px 0 var(--line),0 20px 100px #27162b25;padding-top:62px}
dialog:before{content:'a closer look';position:absolute;top:0;left:0;right:0;padding:9px 17px;background:var(--soft);border-bottom:1px solid var(--line);font:12px var(--pixel);color:var(--muted)}
.dialog-close{top:8px;right:13px;z-index:1;font-size:20px}
dialog h2{font-size:42px;line-height:1.16;overflow-wrap:anywhere}
.dialog-status,dialog h3{font-family:var(--pixel);letter-spacing:.03em}
.dialog-tags{gap:8px}
.dialog-tags span{background:var(--soft);padding:3px 8px;border-radius:5px}
.project-site:not([hidden]),[data-theme="dark"] .project-site{background:var(--soft);border:1px solid var(--line);color:var(--ink);border-radius:6px;box-shadow:0 2px 0 var(--line);font-weight:700}
.project-site:hover{background-color:var(--paper)}

@media(min-width:1600px){.hero{min-height:850px}}
@media(max-width:1000px){
  .shell{width:calc(100% - 70px)}
  .hero{min-height:760px;padding-block:80px 110px}
  .hero h1{font-size:clamp(90px,12vw,120px)}
  .sculpture{width:36vw;right:-8%;top:19%}
  .hero-sparkles span:nth-child(1){left:50%;top:17%}
  .hero-sparkles span:nth-child(3){right:29%;top:58%}
  .hero-copy{font-size:17px}
  .hero-copy .name{max-width:285px}
  .hero-foot{font-size:9px;gap:18px}
  .hero-foot .line{width:35px}
  .section-heading{flex-wrap:wrap;gap:16px}
  .section-heading .eyebrow{flex-basis:100%}
  .project{grid-template-columns:25px 1fr 90px 20px;gap:16px}
  .project-art{width:90px;height:100px}
  .project-title{font-size:32px}
  .about{gap:35px}
  .about .section-heading h2{font-size:42px}
}
@media(max-width:650px){
  .shell{width:calc(100% - 44px)}
  .topbar{padding-top:24px;gap:12px}
  .brand{font-size:26px}
  .topbar .eyebrow{font-size:10px;max-width:135px;line-height:1.5}
  .hero{min-height:0;justify-content:flex-start;padding-block:96px 100px}
  .hero-overline{order:1;font-size:11px;margin-bottom:22px}
  .hero h1{order:2;font-size:clamp(78px,23vw,140px);line-height:1.08}
  .hero h1 .dev{margin-left:.2em}
  .glyph{-webkit-text-stroke:1.3px var(--outline);text-shadow:0 2px #fff4fc,0 5px #ae88c6}
  .as .glyph{-webkit-text-stroke:1px var(--outline);text-shadow:0 2px #fff4fc,0 3px #ae88c6}
  .hero-copy{order:3;margin-top:30px;font-size:17px;line-height:1.7;max-width:90%}
  .hero-copy .name{font-size:11px;max-width:235px;margin-top:14px}
  .hero-actions{order:4;gap:20px;flex-wrap:wrap;margin-top:25px}
  .hero-link{font-size:12px;padding:12px 15px;gap:16px}
  .replay-pop{font-size:11px}
  .sculpture{order:5;position:relative;align-self:flex-end;width:clamp(175px,43vw,235px);right:auto;top:auto;margin-top:14px}
  .celestial{width:clamp(175px,43vw,235px);right:0;top:auto;bottom:100px}
  .hero::before{width:30vw;right:6%;top:auto;bottom:140px}
  .hero-sparkles span:nth-child(1){left:auto;right:6%;top:100px;font-size:19px}
  .hero-sparkles span:nth-child(2){right:5%;top:330px;font-size:22px}
  .hero-sparkles span:nth-child(3){right:auto;left:8%;top:auto;bottom:165px;font-size:23px}
  .hero-sparkles span:nth-child(4){display:none}
  .hero-foot{bottom:38px;font-size:8px;gap:15px;line-height:1.5}
  .hero-foot>span:last-child{text-align:right;max-width:120px}
  .hero-foot .line{width:25px}
  .rail,[data-theme="dark"] .rail{background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--line);border-radius:10px;box-shadow:0 3px 0 var(--line),0 4px 25px #3827430a;padding:4px}
  .rail a{font:12px var(--pixel);padding:9px 7px;gap:7px}
  .rail i{width:15px;height:18px;flex:none}
  .rail .dawn-nav-icon{width:15px;height:18px}
  .rail a[aria-current] i,[data-theme="dark"] .rail a[aria-current] i{box-shadow:none}
  .motion,.theme-toggle{top:81px;font-size:10px}
  .section{padding-block:70px}
  .section-heading h2{font-size:clamp(35px,9.3vw,52px)}
  .section-heading .eyebrow{font-size:11px}
  .project{grid-template-columns:23px 1fr 18px;gap:10px;padding-block:28px}
  .project-title{font-size:clamp(25px,7vw,37px)}
  .project-description{font-size:13px}
  .project .status{font-size:10px}
  .about{display:block}
  .about .section-heading h2{font-size:clamp(35px,9.3vw,52px)}
  .about .section-heading br{display:none}
  .about .section-heading em:before{content:' '}
  .about-intro{font-size:23px}
  .about-description{font-size:14px}
  .play-header p{font-size:13px}
  .contact{padding-bottom:110px}
  .contact h2{font-size:clamp(51px,13.5vw,78px)}
  .contact-email{font-size:19px;gap:24px}
  footer{font-size:10px;gap:20px}
  dialog{padding:58px 25px 30px}
  dialog h2{font-size:34px}
}
@media(max-width:370px){
  .hero-copy{font-size:16px}.hero-copy .name{max-width:205px}
  .hero-actions{gap:14px}
  .hero-foot .line{display:none}.replay-pop{font-size:10px}
}
.quiet .bubble-letter,.quiet .glyph{transform:none!important;opacity:1!important}
@media(prefers-reduced-motion:reduce){.bubble-letter,.glyph{transform:none!important;opacity:1!important}}

/* Small, one-shot reactions for a curious cursor. */
.cursor-sparkles{display:none;position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:80}
.cursor-sparkle{position:absolute;display:block;pointer-events:none;font:16px/1 var(--sans);color:var(--sparkle-color,var(--pink));opacity:0;transform-origin:center;will-change:transform,opacity}
.project-art{translate:0 0;rotate:0deg}
@keyframes cursor-sparkle-pop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3,.55) rotate(0deg)}
  18%{opacity:.9;transform:translate(-50%,-50%) scale(1.1,.9) rotate(calc(var(--twirl,25deg) * .15))}
  45%{opacity:.75}
  100%{opacity:0;transform:translate(calc(-50% + var(--drift-x,0px)),calc(-50% + var(--drift-y,-30px))) scale(.45) rotate(var(--twirl,25deg))}
}
@keyframes skill-hop{
  0%,100%{translate:0 0;scale:1}
  38%{translate:0 -4px;scale:1.025 .98}
  68%{translate:0 1px;scale:.99 1.02}
}
@keyframes arrow-hop{
  0%,100%{translate:0 0}
  40%{translate:3px -5px}
  72%{translate:-1px 1px}
}
@keyframes nav-wobble{
  0%,100%{rotate:0deg;scale:1}
  30%{rotate:-14deg;scale:1.1}
  60%{rotate:10deg;scale:.95}
  80%{rotate:-4deg;scale:1.02}
}
@media(prefers-reduced-motion:no-preference){
  html:not(.quiet) .hero-link:focus-visible>span,
  html:not(.quiet) .contact-email:focus-visible>span{animation:arrow-hop .5s ease-out}
  html:not(.quiet) .rail a:focus-visible i{animation:nav-wobble .55s ease-out}
}
@media(prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  html:not(.quiet) .cursor-sparkles{display:block}
  html:not(.quiet) .cursor-sparkle{animation:cursor-sparkle-pop .8s ease-out both}
  html:not(.quiet) .project-art{
    translate:var(--peek-x,0px) var(--peek-y,0px);rotate:var(--peek-turn,0deg);
    transition:transform .4s,translate .45s cubic-bezier(.2,.7,.2,1),rotate .45s cubic-bezier(.2,.7,.2,1);
  }
  html:not(.quiet) .skills span:hover{animation:skill-hop .55s ease-out}
  html:not(.quiet) .hero-link:hover>span,
  html:not(.quiet) .contact-email:hover>span{animation:arrow-hop .5s ease-out}
  html:not(.quiet) .rail a:hover i{animation:nav-wobble .55s ease-out}
}
.quiet .cursor-sparkles{display:none}
.quiet .project-art{translate:0 0!important;rotate:0deg!important}
@media(prefers-reduced-motion:reduce){
  .cursor-sparkles{display:none}
  .project-art{translate:0 0!important;rotate:0deg!important}
}

/* A few different reactions throughout the rest of the page. */
.section-heading h2 em,.contact h2 em,.hero-copy strong,.about-intro em{display:inline-block;transform-origin:50% 85%}
.contact h2{width:fit-content;max-width:100%}
.contact-links a{position:relative;display:inline-block}
.contact-links a::after{content:'';position:absolute;right:-10px;top:-4px;width:5px;height:5px;border:1px solid var(--lavender);opacity:0;rotate:45deg;pointer-events:none}
.hero-overline .pixel-star,.motion:before,.theme-toggle>span:first-child{display:inline-block}

@keyframes word-jelly{
  0%,100%{translate:0 0;scale:1;rotate:0deg}
  32%{translate:0 -5px;scale:1.035 .96;rotate:-2deg}
  62%{translate:0 2px;scale:.985 1.025;rotate:1deg}
  82%{translate:0 -1px;scale:1.01 .995}
}
@keyframes little-spin{from{rotate:0deg}to{rotate:360deg}}
@keyframes label-jelly{
  0%,100%{scale:1;rotate:0deg}
  38%{scale:1.045 .97;rotate:-2deg}
  70%{scale:.99 1.025;rotate:1deg}
}
@keyframes tiny-diamond{
  0%,100%{opacity:0;scale:.3;translate:0 0}
  30%{opacity:.9;scale:1.25;translate:0 -3px}
  65%{opacity:.65;scale:.9;translate:2px -5px}
}
@keyframes status-bloom{0%,100%{box-shadow:0 0 0 0 #bd91d100}40%{box-shadow:0 0 0 5px #bd91d12e}85%{box-shadow:0 0 0 8px #bd91d100}}

@media(prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  html:not(.quiet) .section-heading h2:hover em,
  html:not(.quiet) .contact h2:hover em,
  html:not(.quiet) .hero-copy strong:hover,
  html:not(.quiet) .about-intro:hover em{animation:word-jelly .65s ease-out}
  html:not(.quiet) .project:hover .project-title{animation:label-jelly .6s ease-out;transform-origin:left center}
  html:not(.quiet) .project:hover .project-number{animation:skill-hop .55s ease-out}
  html:not(.quiet) .project:hover .status:before{animation:status-bloom .8s ease-out}
  html:not(.quiet) .rail a:hover span,
  html:not(.quiet) .about-mark:hover,
  html:not(.quiet) footer>span:hover{animation:label-jelly .65s ease-out}
  html:not(.quiet) .greeting:hover>span,
  html:not(.quiet) .hero-overline:hover .pixel-star,
  html:not(.quiet) .about-mark:hover:after,
  html:not(.quiet) .theme-toggle:hover>span:first-child,
  html:not(.quiet) .motion:not(:disabled):hover:before{animation:little-spin .85s cubic-bezier(.2,.7,.2,1)}
  html:not(.quiet) .about-detail>p:not(.eyebrow),
  html:not(.quiet) .about-detail>small{transition:translate .3s ease-out}
  html:not(.quiet) .about-detail:hover>p:not(.eyebrow),
  html:not(.quiet) .about-detail:hover>small{translate:4px 0}
  html:not(.quiet) .certificates li:hover{animation:skill-hop .55s ease-out;color:var(--plum)}
  html:not(.quiet) .contact-links a:hover,
  html:not(.quiet) .reset:hover,
  html:not(.quiet) .project-site:hover,
  html:not(.quiet) .dialog-tags span:hover{animation:skill-hop .55s ease-out}
  html:not(.quiet) .contact-links a:hover::after{animation:tiny-diamond .75s ease-out}
}
@media(prefers-reduced-motion:no-preference){
  html:not(.quiet) .project:focus-visible .project-title{animation:label-jelly .6s ease-out;transform-origin:left center}
  html:not(.quiet) .project:focus-visible .status:before{animation:status-bloom .8s ease-out}
  html:not(.quiet) .contact-links a:focus-visible,
  html:not(.quiet) .reset:focus-visible,
  html:not(.quiet) .project-site:focus-visible{animation:skill-hop .55s ease-out}
  html:not(.quiet) .contact-links a:focus-visible::after{animation:tiny-diamond .75s ease-out}
}
.quiet .about-detail>p:not(.eyebrow),.quiet .about-detail>small{translate:0 0}
@media(prefers-reduced-motion:reduce){.about-detail>p:not(.eyebrow),.about-detail>small{translate:0 0}}

/* A quiet night sky. Positions stay fixed; only the light scintillates. */
.night-sky{display:none;position:fixed;inset:0;overflow:hidden;pointer-events:none;user-select:none;z-index:0;contain:strict}
[data-theme="dark"] .night-sky{display:block}
.night-star{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:var(--star-color,#dce6ff);opacity:var(--light);box-shadow:0 0 calc(var(--size) * 2) color-mix(in srgb,var(--star-color,#dce6ff) 45%,transparent);animation:starlight var(--period) linear var(--phase) infinite;animation-play-state:paused}
[data-theme="dark"] .night-star{animation-play-state:running}
.night-star-bright{animation-name:bright-starlight;animation-duration:calc(var(--period) * .46);animation-timing-function:ease-in-out}
.night-star-bright::before{content:'';position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--star-color,#dce6ff) 45%,transparent),transparent 65%)}
.night-star-bright::after{content:'';position:absolute;inset:-6px;opacity:0;background:linear-gradient(90deg,transparent,#eef0ff,transparent) center/100% 1px no-repeat,linear-gradient(0deg,transparent,#eef0ff,transparent) center/1px 100% no-repeat;animation:star-glint calc(var(--period) * .46) ease-in-out var(--phase) infinite;animation-play-state:paused}
[data-theme="dark"] .night-star-bright::after{animation-play-state:running}
@keyframes bright-starlight{
  0%,100%{opacity:.28;filter:brightness(.85);box-shadow:0 0 3px #c6d2ff40}
  22%{opacity:.48;filter:brightness(1)}
  43%{opacity:1;filter:brightness(1.6);box-shadow:0 0 9px #c6d2ffb3,0 0 17px #b7a4ec38}
  62%{opacity:.32;filter:brightness(.9);box-shadow:0 0 3px #c6d2ff40}
  78%{opacity:.87;filter:brightness(1.25);box-shadow:0 0 7px #c6d2ff80}
  90%{opacity:.38;filter:brightness(1)}
}
@keyframes star-glint{
  0%,20%,62%,100%{opacity:0;scale:.55}
  43%{opacity:.95;scale:1.15}
  78%{opacity:.5;scale:.8}
}
@keyframes starlight{
  0%,100%{opacity:calc(var(--light) * .62);filter:brightness(1)}
  13%{opacity:calc(var(--light) * .86)}
  21%{opacity:calc(var(--light) * .42)}
  27%{opacity:calc(var(--light) * .78)}
  46%{opacity:var(--light);filter:brightness(1.3)}
  51%{opacity:calc(var(--light) * .52)}
  57%{opacity:calc(var(--light) * .95);filter:brightness(1.15)}
  72%{opacity:calc(var(--light) * .38)}
  86%{opacity:calc(var(--light) * .85)}
}
.quiet .night-star{animation:none!important;opacity:calc(var(--light) * .75)}
.quiet .night-star-bright::after{animation:none!important;opacity:0}
@media(prefers-reduced-motion:reduce){.night-star{animation:none!important;opacity:calc(var(--light) * .75)}.night-star-bright::after{animation:none!important;opacity:0}}
@media(max-width:650px){.night-star:nth-child(n+13){display:none}}
.night-meteor{position:absolute;width:var(--trail,110px);height:1.5px;opacity:0;transform-origin:right center;border-radius:100%;background:linear-gradient(90deg,transparent 0%,#b2beff0d 20%,#c6d2ff65 65%,#f3f5ff 100%);filter:drop-shadow(0 0 3px #c5ccff65);pointer-events:none}
.night-meteor::after{content:'';position:absolute;right:0;top:50%;width:2.5px;height:2.5px;translate:0 -50%;border-radius:50%;background:#f5f6ff;box-shadow:0 0 5px #e1e6ff99}
.night-meteor[hidden],.quiet .night-meteor,.page-away .night-meteor{display:none}
@media(prefers-reduced-motion:reduce){.night-meteor{display:none}}

/* Let the sculpture sit directly in the sky, without a circular backdrop. */
.hero::before{content:none}

/* Keep surfaces and highlights in the same midnight palette. */
[data-theme="dark"] .hero-link{border-color:#8c6ba65c;box-shadow:inset 0 1px #ffffff0c,0 3px 0 #453153}
[data-theme="dark"] .project[data-project="hm"]{background:linear-gradient(120deg,#9c73bc09,#d693b506),var(--soft);box-shadow:inset 0 1px #ffffff0a,3px 3px 0 var(--line)}
[data-theme="dark"] .contact .contact-email{border-color:#8c6ba580;box-shadow:inset 0 1px #ffffff0c,0 4px 0 #453153}
[data-theme="dark"] .contact .contact-email:hover{box-shadow:inset 0 1px #ffffff0c,0 7px 0 #453153}
[data-theme="dark"] .contact .contact-email:active{box-shadow:0 1px 0 #453153}
[data-theme="dark"] .contact-postcard-wrap::before{background:radial-gradient(ellipse,#b682cf0a,transparent 68%)}
[data-theme="dark"] .contact-postcard{border-color:#9170ac59;box-shadow:5px 6px 0 var(--soft),8px 10px 0 #9e80bb20,0 20px 50px #0003}

/* A small gathering of visitors, with a Dawn-shaped greeter. */
.visitor-badge{position:fixed;top:27px;right:28px;z-index:35;display:flex;align-items:center;gap:9px;max-width:calc(100vw - 44px);padding:10px 13px 10px 10px;border:1px solid var(--line);border-radius:17px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 3px 0 var(--soft),0 8px 22px #38274308;backdrop-filter:blur(12px);isolation:isolate}
.visitor-mascot{position:relative;width:27px;height:33px;flex:none}
.visitor-mascot svg{width:27px;height:33px;overflow:visible}
.visitor-star{fill:var(--pink);stroke:var(--plum);stroke-width:.6;stroke-linejoin:round}
.visitor-face{fill:#5b3769;stroke:#5b3769;stroke-width:.7;stroke-linecap:round}
.visitor-face path{fill:none}
.visitor-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.visitor-count{font:700 12px/1.25 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.visitor-detail{font:10px/1.2 var(--pixel);color:var(--muted);white-space:nowrap}
.visitor-dot{width:5px;height:5px;margin-left:2px;border-radius:50%;background:var(--lavender);flex:none;opacity:.45}
.visitor-badge[data-state="live"] .visitor-dot{background:#7ba791;opacity:1;box-shadow:0 0 0 3px #7ba79116}
.visitor-badge[data-state="offline"] .visitor-mascot{opacity:.65}
.visitor-welcome{position:absolute;right:-7px;top:-3px;opacity:0;color:var(--plum);font:16px/1 var(--sans);pointer-events:none}
@keyframes visitor-greeting{0%,100%{rotate:0deg;translate:0 0}25%{rotate:-10deg;translate:0 -2px}55%{rotate:8deg;translate:0 -3px}80%{rotate:-3deg;translate:0 -1px}}
@keyframes visitor-heart{0%{opacity:0;translate:0 2px;scale:.6}30%{opacity:1;scale:1}100%{opacity:0;translate:2px -14px;scale:.8}}
@media(prefers-reduced-motion:no-preference){
  html:not(.quiet) .visitor-hello .visitor-mascot svg{animation:visitor-greeting .8s ease-out}
  html:not(.quiet) .visitor-hello .visitor-welcome{animation:visitor-heart 1s ease-out}
}
[data-theme="dark"] .visitor-badge{box-shadow:0 3px 0 #20182d70,0 8px 22px #0002}
@media(max-width:650px){
  .visitor-badge{position:absolute;top:20px;right:22px;padding:8px 9px;gap:7px;border-radius:14px}
  .visitor-mascot,.visitor-mascot svg{width:23px;height:28px}
  .visitor-count{font-size:11px}
  .visitor-detail{font-size:9px}
}