/* Art direction: washed editorial imagery, pale cyan light, dark ink, and sparing coral. */
:root{
  --display:'Sora',sans-serif;
  --body:'Sora',sans-serif;
  --mono:'Sora',sans-serif;
  --bg:#f2f3ef;
  --text:#151b1c;
  --muted:#5e6c6e;
  --line:#c8d2d0;
  --accent:#48b8be;
  --signal:#d34e5c;
  --ice:#dff3f1;
  --ink:#101719;
}
body{
  font-family:var(--body);
  background:
    radial-gradient(ellipse at 88% 14%,#89d9d75c 0,transparent 35%),
    radial-gradient(ellipse at 8% 78%,#8baeb82d 0,transparent 40%),
    linear-gradient(135deg,#f7f7f2 0%,#edf1ef 54%,#e6eeee 100%);
  color:var(--text);
}
button,input{font-family:var(--body)}
.atmosphere{background:radial-gradient(ellipse at 78% 45%,#58c9ca45,transparent 55%),radial-gradient(ellipse at 25% 72%,#789aa51f,transparent 46%)}
.atmosphere:before,.atmosphere:after{content:"";position:absolute;pointer-events:none;filter:blur(55px);border-radius:50%}
.atmosphere:before{width:30vw;height:42vw;right:4vw;top:-12vw;background:#79d8d45e;transform:rotate(-22deg)}
.atmosphere:after{width:22vw;height:32vw;left:-8vw;bottom:-9vw;background:#91aeb932}
#hologram{opacity:.67;mix-blend-mode:multiply}

/* Native cursor with a motion- and click-responsive shockwave. */
#hologram{display:none}
.astrale-shockwave,.astrale-click-wave{position:fixed;left:0;top:0;z-index:299;pointer-events:none;translate:-50% -50%;border-radius:50%}
.astrale-shockwave{width:32px;height:32px;opacity:0;will-change:transform,opacity}
.astrale-shockwave.is-visible{opacity:calc(.18 + var(--wave-energy,0) * .82)}
.astrale-shockwave i{position:absolute;border:1px solid #2da8ad;border-radius:50%;box-shadow:0 0 12px #48b8be52;transform-origin:center}
.astrale-shockwave i:nth-child(1){inset:7px;transform:scale(calc(.8 + var(--wave-energy,0) * .55));background:#48b8be12}
.astrale-shockwave i:nth-child(2){inset:2px;border-color:#48b8bea6;transform:scale(calc(.88 + var(--wave-energy,0) * .78));opacity:.74}
.astrale-shockwave i:nth-child(3){inset:-5px;border-color:#48b8be66;transform:scale(calc(.8 + var(--wave-energy,0) * 1.15));opacity:.48}
.astrale-click-wave{width:30px;height:30px;margin:-15px 0 0 -15px;translate:none;border:1px solid #2da8ad;box-shadow:0 0 18px #48b8be70,inset 0 0 10px #48b8be32;animation:astrale-click-wave .72s cubic-bezier(.16,.72,.28,1) both}
@keyframes astrale-click-wave{0%{opacity:.95;scale:.55}55%{opacity:.45}100%{opacity:0;scale:4.8}}
@media(pointer:coarse),(prefers-reduced-motion:reduce){.astrale-shockwave,.astrale-click-wave{display:none!important}}

/* Identity and navigation */
.title-lockup>p,#experience>.experience-title>p{color:#667476;letter-spacing:.24em}
.title-lockup h1{font-family:var(--display);font-weight:700;letter-spacing:-.045em;line-height:1.02;text-transform:uppercase}
#experience>.experience-title h1{font-family:'ASVHEN',sans-serif;font-style:italic;font-weight:400;letter-spacing:.005em;line-height:1.02;text-transform:uppercase}
.title-lockup h1 span,#experience>.experience-title h1 span{color:#269fa7;text-shadow:-1px 0 #60cbd060,1px 0 #d34e5c24,0 12px 35px #5bbfc138}
#experience>.game-nav{gap:9px}
#experience>.game-nav a,.game-nav .menu-settings{
  font-family:var(--display);
  font-size:clamp(14px,1.35vw,20px);
  font-weight:400;
  letter-spacing:-.025em;
  text-transform:uppercase;
  border:1px solid #aebdbc78;
  border-left:1px solid #aebdbc78;
  border-radius:13px;
  background:linear-gradient(112deg,#ffffffcf,#edf4f1a8);
  color:#293335;
  box-shadow:0 8px 28px #31585e0a,inset 0 1px #fff;
  overflow:hidden;
}
#experience>.game-nav a:before{inset:10px auto 10px 0;width:3px;height:calc(100% - 20px);border-radius:0 3px 3px 0;background:var(--accent);box-shadow:0 0 18px #48b8be78;opacity:0}
#experience>.game-nav a[aria-current=page]:before,#experience>.game-nav a:hover:before{width:3px;height:calc(100% - 20px);opacity:1}
#experience>.game-nav a:after{inset:-35% -5%;background:radial-gradient(ellipse at 12% 50%,#62cdd047,transparent 58%);opacity:0;animation:none}
#experience>.game-nav a[aria-current=page],#experience>.game-nav a:hover,#experience>.game-nav a:focus-visible{color:#102427;background:linear-gradient(108deg,#d8f1ef,#ffffffd9 56%,#e9f2f0);border-color:#75bfc0a3;text-shadow:none}
#experience>.game-nav a[aria-current=page]:after,#experience>.game-nav a:hover:after,#experience>.game-nav a:focus-visible:after{opacity:1}
#experience>.game-nav small{display:none}
.game-nav .menu-settings:hover,.game-nav .menu-settings:focus-visible{color:#173437;border-color:#83c7c7;background:#f7fbf9}

/* Softer editorial content surface */
.content-shell{
  padding:20px;
  border:1px solid #a8b8b77a;
  border-radius:18px;
  background:linear-gradient(135deg,#ffffffc9,#edf4f1b8);
  box-shadow:0 28px 80px #31545a16,inset 0 1px #fff;
  backdrop-filter:blur(18px) saturate(.9);
}
.content-shell:before{inset:0;border-radius:inherit;background:linear-gradient(118deg,#fff6,transparent 38%,#8ad4d312 68%,#fff5);opacity:1}
.content-shell:after{display:none}
#experience .content-shell>main{scrollbar-color:#8cb5b5 transparent}
#experience .content-shell h2{font-family:var(--display);font-size:clamp(25px,3.2vw,42px);font-weight:700;line-height:1.05;letter-spacing:-.04em;text-transform:uppercase;color:#20292b}
#experience .content-shell h2 span,.music-header h3 span{display:none}
.edge-trail-red{stroke:var(--signal)}
.edge-trail-blue{stroke:#48b8be}
.edge-trail-sparks{stroke:#7fd8d5}

/* Filters become quiet utility pills. */
#work .section-heading{align-items:center}
#work .filters{gap:7px;border:0;background:transparent}
#work .filters button{display:flex;align-items:center;gap:7px;min-width:auto;height:36px;padding:0 13px;border:1px solid #aab9b883;background:#ffffff80;color:#647274;box-shadow:none}
#work .filters button svg{width:17px;height:17px;flex:0 0 17px;fill:currentColor}
#work .filters button span{white-space:nowrap}
#work .filters .filter-all{border-radius:8px}
#work .filters .filter-sound{border-radius:999px}
#work .filters .filter-technical{padding-inline:16px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
#work .filters .filter-music{border-radius:13px 4px 13px 4px}
#work .filters button:before{display:none}
#work .filters button:after{display:none}
#work .filters button:hover{color:#142527;border-color:#7abfc0;background:#fff}
#work .filters button.active{color:#143638;border-color:#6fc4c5;background:#d9f2ef;box-shadow:inset 0 0 0 1px #fff}

/* Image-led portfolio cards. */
#work .projects{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#work .project{
  --project-accent:#48b8be;
  --project-glow:#48b8be28;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  gap:0;
  min-height:0;
  padding:0;
  border:1px solid #b7c3c177;
  border-radius:14px;
  background:#f8faf7d9;
  color:var(--text);
  box-shadow:0 12px 30px #2d52570c;
  overflow:hidden;
}
#work .project:before{display:none}
#work .project-art{position:relative;grid-column:1/-1;display:block;width:100%;aspect-ratio:16/8.7;overflow:hidden;background:#101719}
#work .project-art video{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(.22) saturate(.55) contrast(1.12) brightness(.88) hue-rotate(8deg);transform:scale(1.02);transition:filter .5s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
#work .project-wash{position:absolute;inset:0;background:linear-gradient(135deg,#9ce7e32e,transparent 48%,#0711134d),linear-gradient(0deg,#0914169e,transparent 55%);mix-blend-mode:screen;transition:opacity .35s}
#work .project-art-audio{background:radial-gradient(circle at 36% 45%,#d7ffff 0 7%,transparent 8%),radial-gradient(circle at 48% 53%,#66cfd0 0 13%,transparent 14%),radial-gradient(circle at 68% 38%,#101719 0 20%,transparent 21%),linear-gradient(132deg,#f1f1ec,#78c8c8 48%,#122225)}
#work .project-art-audio:before{content:"";position:absolute;inset:-18%;background:repeating-radial-gradient(ellipse at 48% 52%,transparent 0 12px,#e9ffff4f 13px 14px,transparent 15px 23px);transform:rotate(-16deg);filter:blur(.25px)}
#work .project-orbit{position:absolute;width:44%;aspect-ratio:1;right:13%;top:50%;translate:0 -50%;border:1px solid #e9ffff99;border-radius:50%;box-shadow:0 0 38px #9df4ef4f,inset 0 0 24px #0c181b66}
#work .project-play{position:absolute;left:14px;bottom:13px;width:25px;height:25px;color:#f6ffff;filter:drop-shadow(0 2px 8px #071113)}
#work .project-index{align-self:center;padding:13px 0 13px 14px;color:#708082;font:9px var(--mono);letter-spacing:.08em}
#work .project-info{padding:12px 34px 13px 8px}
#work .project-info h3{margin:0 0 4px;font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:-.035em;text-transform:none;color:#1b2527}
#work .project-info p{font-size:9px;color:#687779;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#work .project-arrow{position:absolute;right:13px;bottom:18px;width:17px;height:17px;color:#469fa4}
#work .project:hover,#work .project:focus-visible{color:var(--text);border-color:#67bdbe;background:#fff;box-shadow:0 18px 42px #2e72761c}
#work .project:hover .project-art video,#work .project:focus-visible .project-art video{filter:grayscale(.05) saturate(.82) contrast(1.08) brightness(.98);transform:scale(1.065)}
#work .project:hover .project-wash,#work .project:focus-visible .project-wash{opacity:.62}

/* Showreel, profile, credits, and settings share the same visual grammar. */
#experience .reel-preview-button{border:1px solid #83a7aa80;border-left:1px solid #83a7aa80;border-radius:15px;background:#101719;box-shadow:0 20px 50px #213e431e}
.reel-preview-media video{filter:grayscale(.15) saturate(.62) contrast(1.08) brightness(.82) hue-rotate(7deg)}
.reel-preview-shade{background:linear-gradient(90deg,#071113c7,transparent 70%),linear-gradient(0deg,#071113a8,transparent 52%)}
.reel-preview-label{min-height:90px;border-top:1px solid #8ed9d77a;background:linear-gradient(90deg,#0c1719e8,#183234b8 66%,#3a74746e)}
.reel-preview-label small{color:#a7ccca}.reel-preview-play{color:#76d7d4}
.reel-preview-button:hover .reel-preview-media video,.reel-preview-button:focus-visible .reel-preview-media video{filter:grayscale(0) saturate(.82) contrast(1.04) brightness(.94) hue-rotate(4deg)}
#about{position:relative;gap:clamp(30px,5vw,70px)}
#about>div:last-child{padding:24px;border:1px solid #b8c5c37a;border-radius:15px;background:linear-gradient(135deg,#ffffffb5,#e4f2ef9c);box-shadow:0 16px 45px #254d5210}
#about .large-copy{font-size:clamp(22px,2.5vw,34px);line-height:1.35;letter-spacing:-.035em;color:#172224}
#about .tools{padding-top:15px;border-top:1px solid #aebdbb82;color:#536668}
#about .resume-button{border:1px solid #75babb8c;border-left:1px solid #75babb8c;border-radius:12px;background:#f7fbf9;color:#173335}
#about .resume-button:before{display:block;background:linear-gradient(90deg,#7bd3d02e,transparent 70%)}
#about .resume-button>span{display:flex}
#about .resume-document,#about .resume-arrow{color:#3faab0}
#about .resume-button strong{font-weight:700;letter-spacing:-.025em;text-transform:uppercase}
#about .resume-button:hover,#about .resume-button:focus-visible{color:#143638;border-color:#48b8be;background:#e3f5f2;box-shadow:0 14px 36px #31888d1a}
#about .profile-heading{display:flex;flex-direction:column;align-items:flex-start}
#about .profile-socials{position:static;z-index:auto;display:flex;align-items:center;gap:9px;margin-left:0}
#about .profile-socials a{display:grid;place-items:center;width:42px;height:42px;border:1px solid #8ebfc0;border-radius:3px;background:#ffffffb8;color:var(--accent);box-shadow:0 7px 20px #31888d12;transition:color .2s,border-color .2s,background .2s,transform .2s,box-shadow .2s}
#about .profile-socials svg{width:19px;height:19px}
#about .profile-socials a:hover,#about .profile-socials a:focus-visible{color:#fff;border-color:var(--accent);background:var(--accent);transform:translateY(-2px);box-shadow:0 10px 24px #31888d26}
#about .about-copy{display:flex;flex-direction:column;gap:9px}
#about .about-intro{display:grid;grid-template-columns:116px minmax(0,1fr);gap:21px;align-items:center;margin-bottom:2px}
#about .about-portrait{display:block;width:116px;aspect-ratio:1;border:2px solid #70bec0;border-radius:50%;overflow:hidden;background:#152123;box-shadow:0 10px 28px #1f646b24}
#about .about-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:saturate(1.22) contrast(1.08) brightness(1.12)}
#about .about-intro .large-copy{margin:0;font-size:clamp(18px,1.85vw,26px);line-height:1.32}
#about .about-copy>p{margin:0!important;max-width:850px!important;font-size:clamp(11px,.86vw,13px)!important;line-height:1.58!important}
#about .about-highlight{color:#208d93;font-weight:700}
#about .about-footer{display:flex;align-items:stretch;gap:12px;max-width:850px;margin-top:7px}
#about .profile-actions{display:block;flex:1;max-width:480px;margin:0}
#about .profile-actions .contact-button{height:100%;min-height:42px}
#credits .credit{margin:10px 0 0;padding:22px;border:1px solid #b5c2c07a;border-radius:13px;background:linear-gradient(110deg,#ffffffb8,#e8f2ef94)}
#credits .credit:first-of-type{margin-top:0}
#credits .credit h3{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:-.02em;text-transform:uppercase}
#credits .credit>span{color:#388f94}
#settings .settings-toggle,#settings .volume{border:1px solid #aebcba82;border-left:1px solid #aebcba82;border-radius:12px;background:linear-gradient(110deg,#ffffffc9,#e8f2ef9e)}
#settings .settings-toggle[aria-pressed=true]{color:#217d82;border-color:#6ababb;background:linear-gradient(90deg,#bfe9e53d,#fff 42%,#e5f2ef)}
#settings .settings-toggle[aria-pressed=true]:before{border-color:#3daeb3;background:#48b8be;box-shadow:0 0 14px #48b8be77}
#settings .settings-toggle[aria-pressed=true]:after{color:#277d82}
#settings .volume:hover{border-left-color:#48b8be;background:#fff}

/* Boot and media surfaces carry the palette without becoming literal mood-board copies. */
.cinema-shell{border-color:#9bb0af;border-radius:12px;background:#eef4f1;color:#172224}
.cinema-header{background:linear-gradient(120deg,#fff,#e3efec);border-bottom-color:#9db7b5}.cinema-header:before{background:#48b8be}
.cinema-controls{border-top-color:#48b8be;background:linear-gradient(110deg,#fbfcfa,#e5efed)}
.cinema-center,#reelPlay{background:var(--signal)}
.cinema-center:hover,#reelPlay:hover{background:#b83d4a}
.music-shell{border-color:#9eafad;background:#e8eeeb}
.music-header h3 span{color:var(--signal)}
.music-tracks button.active:before{background:#48b8be}
.music-control-row #musicPlay{border-color:#c0475478;background:var(--signal)}
.music-control-row #musicPlay:hover{background:#b43d49}

/* Compact work launches echo the cinematic showreel control. */
#work .projects{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#work .project{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  min-height:82px;
  padding:14px 16px;
  border:1px solid #83a7aa80;
  border-left:4px solid var(--project-accent);
  border-radius:12px;
  background:#101719;
  color:#fff;
  box-shadow:0 14px 34px #213e4318;
}
#work .project-sound{--project-accent:#48b8be;--project-glow:#48b8be30}
#work .project-technical{--project-accent:#e06470;--project-glow:#e0647032}
#work .project-music{--project-accent:#9a78d0;--project-glow:#9a78d034}
#work .project-thumbnail{opacity:.78;filter:grayscale(.15) saturate(.62) contrast(1.08) brightness(.72) hue-rotate(7deg)}
#work .project:before{display:block;content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,#071113e8 0%,#0d1721bd 56%,#07111373 100%),linear-gradient(0deg,#0711138f,transparent 72%);opacity:1;transition:opacity .25s;pointer-events:none}
#work .project-sound:before{background:linear-gradient(90deg,#071113e8 0%,#123336c4 58%,#143e4075 100%),linear-gradient(0deg,#0711138f,transparent 72%)}
#work .project-technical:before{background:linear-gradient(90deg,#100b0de8 0%,#3d1d24c7 58%,#5d263175 100%),linear-gradient(0deg,#10090c91,transparent 72%)}
#work .project-music:before{background:linear-gradient(90deg,#0d0a12e8 0%,#2a203bc7 58%,#4d376c75 100%),linear-gradient(0deg,#0d091391,transparent 72%)}
#work .project-play{position:relative;z-index:2;left:auto;bottom:auto;width:29px;height:25px;flex:0 0 29px;color:var(--project-accent);filter:drop-shadow(0 2px 8px #071113)}
#work .project-info{position:relative;z-index:2;display:block;min-width:0;flex:1;padding:0}
#work .project-info h3{margin:0 0 6px;font:700 clamp(10px,.9vw,13px)/1.45 var(--display);letter-spacing:-.02em;text-transform:uppercase;color:#fff;overflow-wrap:normal;text-shadow:0 2px 10px #000}
#work .project-info p{margin:0;color:#b7c8d3;font:600 11px/1.45 var(--mono);letter-spacing:.04em;text-transform:uppercase;white-space:normal;overflow:visible;text-shadow:0 2px 8px #000}
#work .project:hover,#work .project:focus-visible{color:#fff;border-color:var(--project-accent);background:#101719;box-shadow:0 0 34px var(--project-glow)}
#work .project:hover .project-thumbnail,#work .project:focus-visible .project-thumbnail{opacity:.9;filter:grayscale(0) saturate(.84) contrast(1.06) brightness(.86) hue-rotate(4deg)}
#work .project:hover:before,#work .project:focus-visible:before{opacity:.78}
#work .filters [data-filter="sound"].active{color:#1c6e73;border-color:#48b8be;background:#d9f2ef}
#work .filters [data-filter="technical"].active{color:#85313a;border-color:#e06470;background:#f7dfe1}
#work .filters [data-filter="music"].active{color:#59417d;border-color:#9a78d0;background:#ebe3f6}
#work .filters .filter-all.active{color:#234b4e;border-color:#83b5b6;background:#e6f0ee}

/* The All view reads as three disciplines instead of one undifferentiated button grid. */
#work .projects.projects-grouped{grid-template-columns:1.12fr .9fr 1fr;gap:12px;min-height:362px}
#work .project-group{display:grid;grid-template-rows:auto minmax(0,1fr);gap:9px;min-width:0;padding:11px;border:1px solid #b5c4c183;border-radius:13px;background:#f5f8f5a3;overflow:hidden}
#work .project-group-sound{border-top:3px solid #48b8be;background:linear-gradient(180deg,#dff3f138,#f7f9f6b8 26%)}
#work .project-group-technical{border-top:3px solid #e06470;background:linear-gradient(180deg,#f4dfe13d,#f7f9f6b8 26%)}
#work .project-group-music{border-top:3px solid #9a78d0;background:linear-gradient(180deg,#ebe3f63d,#f7f9f6b8 26%)}
#work .project-group-heading{display:flex;align-items:center;gap:8px;width:100%;margin:0;padding:1px 2px 5px;color:#344749;font:700 9px/1 var(--mono);letter-spacing:.11em;text-align:left;text-transform:uppercase}
#work .project-group-heading small{margin-left:auto;color:currentColor;font:700 8px/1 var(--mono);opacity:.62}
#work .project-group-heading:hover,#work .project-group-heading:focus-visible{color:#17292b}
#work .project-group-heading:hover .project-group-icon,#work .project-group-heading:focus-visible .project-group-icon{transform:scale(1.12)}
#work .project-group-sound .project-group-heading{color:#277f84}
#work .project-group-technical .project-group-heading{color:#9a3943}
#work .project-group-music .project-group-heading{color:#64498d}
#work .project-group-icon{width:18px;height:18px;flex:0 0 18px;transition:transform .18s}
#work .project-group-grid{display:grid;gap:7px;min-height:0}
#work .project-group-sound .project-group-grid{grid-template-rows:repeat(4,minmax(0,1fr))}
#work .project-group-technical .project-group-grid{grid-template-rows:minmax(0,1fr)}
#work .project-group-music .project-group-grid{grid-template-rows:repeat(2,minmax(0,1fr))}
#work .project-group .project{height:100%;min-height:0;padding:11px 12px;gap:11px;border-radius:9px}
#work .project-group .project-info h3{font-size:10px;margin-bottom:3px}
#work .project-group .project-info p{font-size:8px;line-height:1.35}
#work .project-group .project-play{width:23px;height:21px;flex-basis:23px}
#work .project-group-technical .project{flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:20px 17px;gap:13px}
#work .project-group-technical .project-play{width:38px;height:34px;flex:0 0 34px}
#work .project-group-technical .project-info h3{font-size:15px;margin-bottom:7px}
#work .project-group-technical .project-info p{font-size:10px;line-height:1.45}
#work .projects-filtered{grid-template-columns:repeat(3,minmax(0,1fr))}
#work .project-filter-state{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-start;padding:2px 2px 8px;border-bottom:1px solid #bac8c6}
#work .projects-back{display:flex;align-items:center;gap:8px;padding:8px 12px;color:#40585a;background:rgba(255,255,255,.58);border:1px solid rgba(70,126,128,.48);border-radius:3px;box-shadow:0 3px 10px rgba(35,76,78,.08),inset 0 0 0 1px rgba(255,255,255,.5);font:800 10px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}
#work .projects-back::before{content:'\2190';font:700 16px/1 var(--body);letter-spacing:0;transition:transform .18s ease}
#work .projects-back:hover::before,#work .projects-back:focus-visible::before{transform:translateX(-3px)}
#work .projects-back:hover,#work .projects-back:focus-visible{color:#116f75;background:rgba(230,252,250,.86);border-color:#43aeb0;box-shadow:0 5px 14px rgba(28,114,118,.16),inset 0 0 0 1px rgba(255,255,255,.72);transform:translateY(-1px)}

@media(min-width:901px){
  #work.work-overview{display:flex;height:100%;padding-bottom:0}
  #work.work-overview .projects-grouped{flex:1;min-height:0}
}

/* Cyan is the shared interaction color across both media players. */
.cinema-header .close:hover{background:#48b8be;color:#fff}
.cinema-center,#reelPlay{background:#3aaeb4}
.cinema-center:hover,#reelPlay:hover{background:#278f96}
.cinema-control-row button:hover{color:#278f96;border-color:#80c6c7;background:#fff}
.cinema-shell input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#3aaeb4 var(--fill),#aebecb var(--fill))}
.cinema-shell input[type=range]::-moz-range-track{background:linear-gradient(90deg,#3aaeb4 var(--fill),#aebecb var(--fill))}
.cinema-shell input[type=range]::-webkit-slider-thumb{background:#3aaeb4;box-shadow:0 0 0 3px #f5f8fa}
.cinema-shell input[type=range]::-moz-range-thumb{background:#3aaeb4;box-shadow:0 0 0 3px #f5f8fa}
.music-header h3 span{color:#3aaeb4}
.music-header .close:hover{color:#17666b;border-color:#69bfc1;background:#dff5f2}
.music-control-row #musicPlay{border-color:#339fa680;background:#3aaeb4}
.music-control-row #musicPlay:hover{background:#278f96}
#musicPlayer button:focus-visible,#musicPlayer input:focus-visible{outline-color:#3aaeb4}

/* One continuous geometric display voice across navigation, projects, and media UI. */
#about .resume-button strong,
#settings .settings-toggle,
#settings .volume,
.reel-preview-label strong,
.cinema-header h3,
.music-header h3,
.music-stage-copy strong,
.music-tracks span,
.boot-name,
.boot-start{
  font-family:var(--display);
  font-weight:400;
}
.reel-preview-label strong{letter-spacing:-.025em;text-transform:uppercase}
.cinema-header h3,.music-header h3{font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.music-stage-copy strong{font-size:clamp(22px,3vw,40px);line-height:1.05;letter-spacing:-.05em;text-transform:uppercase}
.music-stage-copy small{display:none}
.music-tracks span{font-size:9px;letter-spacing:-.015em;text-transform:uppercase}
.boot-start{letter-spacing:.05em;text-transform:uppercase}
.reel-preview-label strong,.cinema-header h3,.music-header h3,.music-stage-copy strong,.boot-name{font-weight:700}

@media(min-width:901px){
  #experience>.experience-title h1{font-size:clamp(32px,3vw,52px)}
}

@media(max-width:900px){
  #experience>.game-nav a,.game-nav .menu-settings{border-radius:10px}
  .content-shell{border-radius:14px}
  #work .projects{grid-template-columns:repeat(2,minmax(0,1fr))}
  #work .projects.projects-grouped{grid-template-columns:1fr 1fr;min-height:0}
  #work .project-group-music{grid-column:1/-1}
  #work .project-group-music .project-group-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr}
  #work .filters button{padding-inline:10px}
  #work .filters button span{font-size:8px}
}
@media(max-width:560px){
  #experience>.game-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  #experience>.game-nav a{min-height:44px;padding:10px 13px;font-size:10px}
  #experience>.experience-title h1{font-size:clamp(24px,6.5vw,34px)}
  #experience>.game-nav a:last-of-type{grid-column:1/-1}
  #work .projects{grid-template-columns:1fr}
  #work .projects.projects-grouped{grid-template-columns:1fr}
  #work .project-group-music{grid-column:auto}
  #work .project-group-sound .project-group-grid,#work .project-group-music .project-group-grid{grid-template-columns:1fr;grid-template-rows:none}
  #work .project-group .project{min-height:74px}
  #work .project-group-technical .project{min-height:170px}
  #work .section-heading{align-items:flex-start}
  #work .filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  #work .filters button{justify-content:flex-start;width:100%;padding-inline:12px}
  #about>div:last-child{padding:17px}
  #about .about-intro{grid-template-columns:86px minmax(0,1fr);gap:14px}
  #about .about-portrait{width:86px}
  #about .about-intro .large-copy{font-size:18px}
  #about .about-footer{flex-wrap:wrap}
  #about .profile-actions{width:100%;max-width:none;flex-basis:100%}
  #about .profile-socials{margin-left:0}
}
@media(prefers-reduced-motion:reduce){#work .project-art video{transition:none}}

/* Technical audio case study */
.technical-dialog{width:min(1120px,calc(100vw - 34px));max-width:none;max-height:calc(100dvh - 34px);padding:0;border:1px solid #7bbfc1a8;border-radius:18px;background:#eef3f1;color:#172123;box-shadow:0 35px 110px #07111378;overflow:hidden;-webkit-user-select:none;user-select:none}
.technical-dialog::backdrop{background:#071113c7;backdrop-filter:blur(9px)}
.technical-shell{max-height:calc(100dvh - 36px);overflow:auto;scrollbar-color:#75bfc0 #dce5e2}
.technical-header{position:sticky;z-index:4;top:0;display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;height:auto;margin:0;padding:21px 24px;border-bottom:1px solid #b5c6c3;background:#edf3f1eb;backdrop-filter:blur(16px)}
.technical-header small{display:block;margin-bottom:6px;color:#4d7779;font:700 9px/1.2 var(--mono);letter-spacing:.14em}
.technical-header h3{margin:0;font:700 clamp(20px,2.7vw,36px)/1.05 var(--display);letter-spacing:-.045em;text-transform:uppercase}
.technical-header .close{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border:1px solid #9db5b3;border-radius:50%;background:#fff;color:#224245}
.technical-header .close svg{width:19px;height:19px}
.technical-header .close:hover,.technical-header .close:focus-visible{border-color:#48b8be;background:#48b8be;color:#fff}
.technical-intro{padding:27px 24px;background:radial-gradient(circle at 88% 12%,#76d2ce48,transparent 32%),linear-gradient(135deg,#f9fbf8,#e4eeeb)}
.technical-intro>p{max-width:760px;margin:0;font:500 clamp(16px,1.75vw,23px)/1.5 var(--display);letter-spacing:-.025em}
.technical-demo,.technical-logic{padding:31px 24px;border-top:1px solid #c5d2cf}
.technical-section-heading{margin-bottom:16px}
.technical-section-heading h4{margin:0 0 5px;font:700 16px/1.25 var(--display);letter-spacing:-.02em;text-transform:uppercase}
.technical-section-heading p{margin:0;color:#5b6d6f;font:500 12px/1.55 var(--body)}
.technical-videos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.technical-videos figure{margin:0;border:1px solid #9db6b4;border-radius:12px;background:#101719;overflow:hidden}
.technical-player{position:relative;background:#050909;overflow:hidden}
.technical-videos video{display:block;width:100%;aspect-ratio:16/9;background:#050909;object-fit:contain;-webkit-user-drag:none}
.technical-center-play{position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;width:58px;height:58px;border:1px solid #a7d9da9c;border-radius:50%;background:#3aaeb4dd;color:#fff;box-shadow:0 8px 28px #07111388;transition:transform .18s,background .18s}
.technical-center-play:hover{color:#fff;background:#278f96;transform:scale(1.06)}
.technical-center-play svg{width:23px;height:23px;margin-left:3px}
.technical-controls{position:absolute;left:0;right:0;bottom:0;padding:22px 11px 9px;background:linear-gradient(transparent,#071113e8)}
.technical-controls>div{display:flex;align-items:center;gap:8px}
.technical-controls>div>span{flex:1}
.technical-controls button{display:grid;place-items:center;width:29px;height:29px;padding:5px;border:1px solid #a9c6cf45;border-radius:50%;background:#eef6f30d;color:#eaf8f7}
.technical-controls button:hover,.technical-controls button:focus-visible{border-color:#78cccd;background:#48b8be;color:#fff}
.technical-controls button svg{width:16px;height:16px}
.technical-controls output{color:#d9e8e8;font:600 9px var(--mono);font-variant-numeric:tabular-nums}
.technical-seek{display:block;width:100%;height:12px;margin:0 0 5px;appearance:none;background:transparent;cursor:pointer}
.technical-seek::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,#48b8be var(--fill),#aebecb8c var(--fill))}
.technical-seek::-webkit-slider-thumb{width:11px;height:11px;margin-top:-4px;appearance:none;border:0;border-radius:50%;background:#eaf8f7;box-shadow:0 0 0 2px #48b8be}
.technical-seek::-moz-range-track{height:3px;border-radius:3px;background:linear-gradient(90deg,#48b8be var(--fill),#aebecb8c var(--fill))}
.technical-seek::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:#eaf8f7;box-shadow:0 0 0 2px #48b8be}
.technical-logic{background:#e7eeeb}
.technical-logic-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:18px;align-items:start}
.blueprint-image{position:relative;display:block;width:100%;padding:0;border:1px solid #759697;border-radius:12px;background:#1d2326;overflow:hidden;box-shadow:0 18px 40px #23474b16;cursor:zoom-in}
.blueprint-image img{display:block;width:100%;height:auto;-webkit-user-drag:none;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.blueprint-image:hover img,.blueprint-image:focus-visible img{transform:scale(1.012)}
.blueprint-expand-hint{position:absolute;right:12px;bottom:12px;padding:7px 10px;border:1px solid #bfe7e59c;border-radius:4px;background:#071113c7;color:#e8f7f5;font:700 8px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;box-shadow:0 5px 16px #07111369;transition:background .18s,border-color .18s,transform .18s}
.blueprint-image:hover .blueprint-expand-hint,.blueprint-image:focus-visible .blueprint-expand-hint{border-color:#6fe0df;background:#249aa1;transform:translateY(-2px)}
.blueprint-lightbox{width:min(1500px,calc(100vw - 30px));max-width:none;max-height:calc(100dvh - 30px);padding:0;border:1px solid #7bbfc1a8;border-radius:14px;background:#0b1113;box-shadow:0 35px 120px #020607c7;overflow:hidden;-webkit-user-select:none;user-select:none}
.blueprint-lightbox::backdrop{background:#020607e6;backdrop-filter:blur(10px)}
.blueprint-lightbox-shell{position:relative;max-height:calc(100dvh - 32px);overflow:auto;background:#0b1113}
.blueprint-lightbox img{display:block;width:100%;height:auto;min-width:900px;-webkit-user-drag:none}
.blueprint-lightbox .close{position:sticky;z-index:2;float:right;top:14px;right:14px;display:grid;place-items:center;width:44px;height:44px;margin-bottom:-58px;border:1px solid #bfe7e59c;border-radius:50%;background:#071113db;color:#edfafa;box-shadow:0 8px 26px #020607a6}
.blueprint-lightbox .close svg{width:20px;height:20px}
.blueprint-lightbox .close:hover,.blueprint-lightbox .close:focus-visible{border-color:#6fe0df;background:#249aa1;color:#fff}
.logic-steps{display:grid;gap:8px;counter-reset:logic}
.logic-steps>div{position:relative;padding:13px 14px 13px 43px;border:1px solid #b7c9c6;border-radius:10px;background:#f8faf7;counter-increment:logic}
.logic-steps>div:before{content:counter(logic,decimal-leading-zero);position:absolute;left:13px;top:14px;color:#299ca2;font:700 9px var(--mono)}
.logic-steps strong{display:block;margin-bottom:4px;font:700 11px/1.3 var(--display);letter-spacing:.02em;text-transform:uppercase}
.logic-steps p{margin:0;color:#58686a;font:500 10px/1.55 var(--body)}
@media(max-width:780px){.technical-videos,.technical-logic-grid{grid-template-columns:1fr}.technical-header{padding:17px}.technical-intro,.technical-demo,.technical-logic{padding:23px 17px}.technical-logic-grid{gap:13px}}
@media(max-width:520px){.technical-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}.technical-shell{max-height:calc(100dvh - 18px)}.technical-header small{font-size:7px}.technical-header h3{font-size:18px}.technical-center-play{width:48px;height:48px}}