/* Hero-to-skills transition: preserve the full height of the skills content. */
.hero-skills-transition{position:relative;isolation:isolate;background:#0c0d10;overflow:clip}
.hero-skills-transition>#home{position:sticky;top:var(--hero-sticky-top,0px);transform:scale(var(--exit-scale,1)) rotate(var(--exit-rotation,0deg));transform-origin:50% 50%;z-index:0}
.hero-skills-transition>#about{position:sticky;top:var(--skills-sticky-top,0px);z-index:1;transform:scale(var(--enter-scale,.8)) rotate(var(--enter-rotation,5deg));transform-origin:50% 0;--paper:#e7ebf0;--ink:#fafafa;--blue:#183f73;--accent:#183f73;padding-block:clamp(72px,8vw,128px)}
.hero-skills-transition>#about{border-radius:32px;box-shadow:0 -12px 36px #00000024}
@media(max-width:700px){.hero-skills-transition>#about{border-radius:22px}}
.hero-skills-transition.transition-running>#home,.hero-skills-transition.transition-running>#about{will-change:transform}
.hero-skills-transition>#projects{position:relative;z-index:2;border-radius:0;box-shadow:0 -18px 45px #0005;transform:translateZ(0)}
@media(prefers-reduced-motion:reduce){.hero-skills-transition>#home{position:relative;top:auto;transform:none}.hero-skills-transition>#about{position:relative;top:auto;transform:none}}
/* The canvas replaces only the hero grid, retaining its spacing and texture. */
#home.kinetic-grid-ready{background-image:none;background-color:#0c0d10}
#home .hero-kinetic-grid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#home .name-track{z-index:1}
/* Scoped 3D skills cards, preserving tooltip overflow and existing layout. */
#about .skill-card.tilt-card{position:relative;transform-style:preserve-3d;animation:none;transition:box-shadow .3s}
#about .skill-card.tilt-card:hover{transform:none}
#about .skill-card.tilt-moving{will-change:transform}
#about .skill-card.tilt-active{z-index:2}
#about .skill-card.tilt-card:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(var(--sheen-angle,135deg),transparent 30%,#ffffff20 50%,transparent 70%);opacity:0;transition:opacity .3s;transform:translateZ(1px)}
#about .skill-card.tilt-active:after{opacity:1}
#about .skill-card.tilt-card>h2,#about .skill-card.tilt-card>.skill-tools{transform:translateZ(14px)}
#about .skill-card.tilt-card>.skill-tools{position:relative;z-index:3}
@media(prefers-reduced-motion:reduce),(hover:none){#about .skill-card.tilt-card{transform:none!important}#about .skill-card.tilt-card:after{display:none}#about .skill-card.tilt-card>h2,#about .skill-card.tilt-card>.skill-tools{transform:none}}
/* Skill icon interaction: bottom-up fill and a sliding tooltip. */
#about .skill-tool{position:relative;overflow:visible;gap:9px;padding:7px 12px 7px 7px;cursor:default}
#about .skill-tool:hover{transform:none}
#about .skill-tool>.skill-icon-disc{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;border-radius:50%;overflow:hidden;background:#e7ebf0;transition:box-shadow .3s}
#about .skill-icon-disc:before{content:"";position:absolute;inset:0;background:#183f73;transform:translateY(101%);transition:transform .3s ease-in-out;z-index:-1}
#about .skill-icon-disc>svg,#about .skill-icon-disc>img,#about .skill-icon-disc>span{position:relative;width:28px;height:28px;display:grid;place-items:center;color:#171717;line-height:1;font-size:28px;transition:filter .3s,color .3s}
#about .skill-tool>.skill-icon-name{display:inline;width:auto;height:auto;font-size:12px}
#about .skill-tool>.skill-icon-tooltip{position:absolute;z-index:10;top:calc(100% + 5px);left:50%;display:block;width:max-content;height:auto;max-width:220px;padding:8px 12px;border-radius:7px;background:#102b52;color:#fff;font-size:12px;font-weight:500;line-height:1.4;opacity:0;visibility:hidden;transform:translate(-50%,-5px);transition:opacity .3s,transform .3s,visibility .3s;pointer-events:auto}
#about .skill-icon-tooltip:before{content:"";position:absolute;bottom:100%;left:0;right:0;height:10px}
#about .skill-tool:is(:hover,:focus-visible) .skill-icon-disc:before{transform:translateY(0)}
#about .skill-tool:is(:hover,:focus-visible) .skill-icon-disc{box-shadow:0 5px 12px #0c0d1030}
#about .skill-tool:is(:hover,:focus-visible) .skill-icon-disc>svg,#about .skill-tool:is(:hover,:focus-visible) .skill-icon-disc>img{filter:drop-shadow(0 1px 1px #ffffff80)}
#about .skill-tool:is(:hover,:focus-visible) .skill-icon-disc>span{color:#fff}
#about .skill-tool:is(:hover,:focus-visible):not(.tooltip-dismissed)>.skill-icon-tooltip{opacity:1;visibility:visible;transform:translate(-50%,3px)}
@media(prefers-reduced-motion:reduce){#about .skill-icon-disc,#about .skill-icon-disc:before,#about .skill-icon-disc>svg,#about .skill-icon-disc>img,#about .skill-icon-disc>span,#about .skill-tool>.skill-icon-tooltip{transition:none}}
/* All rules intentionally exclude #home and the floating navigation. */
main>.section, #study-dialog{
  --paper:#e7ebf0;--ink:#fafafa;--blue:#183f73;--accent:#183f73;
  --surface-black:#0c0d10;--surface-white:#e7ebf0;
}
main>.section{padding-block:clamp(72px,8vw,128px)}
#about{background:#e7ebf0}
#about .skill-design .skill-tool,#about .skill-human .skill-tool,
.personal .polaroid,:is(#projects,#study-dialog) .mini-window{background:#e7ebf0}
main>.section ::selection,#study-dialog ::selection{background:#183f73;color:#fff}
#about .skills-heading{padding-bottom:36px;border-bottom:1px solid #17171724}
#about .skills-kicker{color:#183f73}
#about .skills-grid{gap:24px;align-items:stretch}
#about .skill-card{display:flex;flex-direction:column;border-radius:18px;padding:clamp(24px,3vw,42px);box-shadow:0 8px 14px #0c0d1014,0 20px 36px -12px #0c0d1038}
#about .skill-card[hidden]{display:none}
#about .skill-detail{margin-top:auto}
#about .skill-design,#about .skill-human{background:#183f73;color:#fff;--card-accent:#fff}
#about .skill-design .skill-detail,#about .skill-human .skill-detail{border-color:#ffffff40}
#about .skill-dimension{background:#191919;color:#fafafa;--card-accent:#5685c1}
#about .skill-dimension .skill-detail{border-color:#ffffff30}
#about .skill-dimension .skill-tool{background:#303030;color:#fff;border-color:#ffffff20}
#about .skill-card:hover{box-shadow:0 12px 20px #0c0d101c,0 28px 44px -12px #0c0d1045}
#about .skills-filter button:hover{border-color:#183f73}
#about .skills-filter button[aria-pressed=true]{background:#183f73;border-color:#183f73;color:#fff}
#about .skills-filter button[aria-pressed=true] span{color:#fff}
#about .skills-signoff{border-top:1px solid #17171724;padding-top:26px}
#projects{background:#0c0d10}
#projects .project-heading{border-bottom:1px solid #ffffff26;padding-bottom:36px}
#projects .project-heading h2 em{color:#5685c1}
#projects .study-card{border-radius:18px;border:1px solid #ffffff28}
#projects .study-orange{background:#e7ebf0;color:#171717}
#projects .type-art>span{color:#171717}
#projects .type-art .outline-type{color:transparent;-webkit-text-stroke-color:#183f73}
#projects .art-star{color:#183f73}
#projects .study-blue{background:#183f73;color:#fff}
#projects .study-blue .mini-window{color:#171717;box-shadow:12px 18px 0 #0002}
#projects .study-dark{background:#1c1c1c}
#projects .orbit-core{color:#5685c1}
#projects .orbit-ring{border-color:#5685c180}
#projects .orbit-word em{color:#5685c1}
#projects .hover-label{background:#183f73;color:#fff}
#projects .study-blue .hover-label{background:#e7ebf0;color:#171717}
#projects .study-card:hover{border-color:#5685c1;box-shadow:0 18px 40px #0003}
#playground{background:#0c0d10;border-top:0;padding-top:36px}
#playground .play-heading{border-top:1px solid #ffffff26;padding-top:64px}
#playground .play-stage{background:#e7ebf0;border:0;color:#171717;--mood:#183f73;border-radius:18px}
#playground .play-grid{background-image:linear-gradient(#0c0d1009 1px,transparent 1px),linear-gradient(90deg,#0c0d1009 1px,transparent 1px)}
#playground .kinetic-object span:nth-child(2){-webkit-text-stroke-color:#183f73}
#playground .kinetic-object span:nth-child(3){-webkit-text-stroke-color:#171717}
#playground .stage-label{bottom:40px}
.personal.light-section{background:#e7ebf0;border-top:6px solid #183f73}
.personal .personal-layout{gap:10%;padding-block:24px}
.personal .polaroid{border:1px solid #17171718;box-shadow:12px 14px 0 #183f73,0 24px 50px #0c0d1015}
.personal .tape{background:#183f7359}
.personal .eyebrow{color:#183f73}
.personal .personal-copy h2{padding-bottom:28px;border-bottom:1px solid #17171724}
.personal .signature-name{color:#183f73}
#contact{background:#0c0d10;border-top:0}
#contact>p{color:#5685c1}
#contact h2{max-width:1150px}
#contact .footer-rotator{color:#5685c1}
#contact .contact-spark{color:#5685c1}
#contact .contact-note{padding-bottom:36px;border-bottom:1px solid #ffffff26}
#contact .footer-bottom{border-top:0;padding-top:0}
#contact .footer-name{color:#fafafa}
#contact .footer-name>span{color:#183f73}
#study-dialog{background:#e7ebf0;border:1px solid #17171720;border-radius:18px}
#study-dialog .eyebrow{color:#183f73}
#study-dialog .dialog-close{background:#e7ebf0;color:#171717}
#study-dialog .dialog-done{background:#183f73;color:#fff}
#study-dialog .dialog-done:hover{background:#214b80}
#dialog-art:has(.type-art){background:#e7ebf0!important;border:1px solid #17171720}
#dialog-art .type-art .art-star{color:#183f73}
#dialog-art:has(.ui-art){background:#183f73!important}
#dialog-art .mini-window{color:#171717}
#dialog-art .orbit-core{color:#5685c1}
#dialog-art .floating-sticker,#projects .floating-sticker{background:#e7ebf0;color:#171717;border:2px solid #183f73}
main>.section :focus-visible,#study-dialog :focus-visible{outline:3px solid #183f73;outline-offset:5px}
#projects :focus-visible,#contact :focus-visible{outline-color:#5685c1}
@media(max-width:700px){
  #about .skills-heading{padding-bottom:24px}
  #about .skills-grid{gap:18px}
  #projects .project-heading{padding-bottom:28px}
  #playground .play-heading{padding-top:40px}
  #playground .stage-label{bottom:30px}
  .personal .personal-layout{gap:60px}
}
/* Layered glass cards adapted to the existing skills and shared spring loop. */
#about .skill-card.tilt-card{border:1px solid #ffffff30;border-radius:28px;overflow:visible}
#about .skill-card.tilt-card:before{content:"";position:absolute;inset:8px;border-radius:21px;border:1px solid #ffffff24;border-bottom-color:#ffffff40;border-left-color:#ffffff40;background:linear-gradient(145deg,#ffffff16,#ffffff03 65%);pointer-events:none;transform:translateZ(8px)}
#about .skill-card.tilt-card:after{inset:9px;border-radius:20px;transform:translateZ(9px);background:linear-gradient(var(--sheen-angle,135deg),transparent 20%,#ffffff12 50%,transparent 80%)}
#about .skill-card.tilt-card>.skill-card-top,
#about .skill-card.tilt-card>p,
#about .skill-card.tilt-card>.skill-tags{position:relative;transform:translateZ(16px)}
#about .skill-card.tilt-card>h2{position:relative;transform:translateZ(24px)}
#about .skill-card.tilt-card>.skill-tools{transform:translateZ(26px);transform-style:preserve-3d}
#about .skill-glass-layers{position:absolute;top:12px;right:12px;width:110px;height:110px;pointer-events:none;transform-style:preserve-3d}
#about .skill-glass-layers>span{position:absolute;top:calc(var(--layer)*8px);right:calc(var(--layer)*8px);width:calc(100px - var(--layer)*20px);aspect-ratio:1;border-radius:50%;border:1px solid #ffffff12;background:#ffffff09;box-shadow:-5px 8px 16px #0000000c;transform:translateZ(calc(12px + var(--layer)*8px));transition:transform .45s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--layer)*45ms)}
#about .skill-card:is(.tilt-active,:focus-within) .skill-glass-layers>span{transform:translateZ(calc(20px + var(--layer)*14px))}
#about .skill-card:is(.tilt-active,:focus-within){box-shadow:14px 25px 35px -20px #0c0d1070,0 16px 28px -12px #0c0d1040}
#about .skill-card .skill-tool{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s;transition-delay:calc(var(--tool-order,0)*35ms)}
#about .skill-card.tilt-active .skill-tool{transform:translateZ(12px);box-shadow:-3px 9px 14px -8px #0005}
#about .skill-card .skill-tool:is(:hover,:focus-visible){transform:translateZ(22px) translateY(-3px);transition-delay:0s}
@media(max-width:700px){#about .skill-glass-layers{width:80px;height:80px;transform:scale(.72);transform-origin:top right}}
@media(prefers-reduced-motion:reduce),(hover:none){
 #about .skill-card.tilt-card:before,#about .skill-card.tilt-card>h2,#about .skill-card.tilt-card>.skill-card-top,#about .skill-card.tilt-card>p,#about .skill-card.tilt-card>.skill-tags,#about .skill-card.tilt-card>.skill-tools,#about .skill-glass-layers>span,#about .skill-card:is(.tilt-active,:focus-within) .skill-glass-layers>span,#about .skill-card .skill-tool:is(:hover,:focus-visible){transform:none;transition:none}
}
/* Filtering temporarily owns card transforms while the deck rearranges. */
#about .skills-grid.is-shuffling .skill-card{pointer-events:none;will-change:transform,opacity}
#about .skills-grid{position:relative}
#about .skills-grid.is-shuffling{align-items:start;overflow-anchor:none}
#about .skills-grid.is-shuffling .skill-card{transform-origin:top left;transition:none}
/* Solid card surfaces throughout the shuffle. */
#about .skills-grid.is-shuffling .skill-card{opacity:1;will-change:transform}
/* Equal layout slots keep filtering strictly translational, without resizing. */
#about .skills-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
#about .skills-grid .skill-card{box-sizing:border-box;height:var(--skill-card-height,auto)}
@media(max-width:700px){#about .skills-grid{grid-template-columns:minmax(0,1fr)}}
/* Soft depth for the skills cards, including the resting state. */
#about .skill-card.tilt-card{box-shadow:0 3px 8px #0c0d100d,0 12px 24px -10px #0c0d1026}
#about .skill-card.tilt-card:is(:hover,.tilt-active,:focus-within){box-shadow:0 5px 12px #0c0d1012,0 18px 30px -12px #0c0d1030}

/* The skills now read as clean cards without filter controls or secondary tag rows. */
#about .skills-filter,
#about .skill-tags{display:none}

/* Open edge-to-edge paths, following the four curves in the blueprint. */
#projects{position:relative;min-height:860px;height:calc(100dvh + 48px);max-height:none;padding:0;overflow:hidden;overflow:clip;contain:paint;isolation:isolate}
#projects .study-grid{display:none}
#projects .project-heading{display:block;position:absolute;left:50%;top:50%;width:34%;transform:translate(-50%,-50%);text-align:center;border:0;padding:0;margin:0;z-index:2;pointer-events:none}
#projects .project-heading h2{font-size:clamp(28px,3.4vw,54px);line-height:1.08}
#projects .project-heading p{max-width:24ch;margin:20px auto 0;font-size:13px;line-height:1.7;color:#969994}
.hobby-orbits,.hobby-orbit,.hobby-arc-stream{position:absolute;inset:0;pointer-events:none}
.hobby-orbits{overflow:hidden;overflow:clip;contain:paint}
.hobby-orbit-center{position:absolute;width:96px;display:flex;align-items:center;flex-direction:column;gap:12px}
.hobby-orbit-center svg{width:43.7px;height:43.7px;color:#5685c1}
.hobby-orbit-center .hobby-camera-icon{display:block;width:70px;height:43.7px;object-fit:contain}
.hobby-orbit-center h3{margin:0;max-width:13ch;text-align:center;font-size:12px;font-weight:500;letter-spacing:.04em;color:#e7ebf0}
.hobby-photography .hobby-orbit-center{left:11%;top:11%;transform:translate(-50%,-50%)}
.hobby-travel .hobby-orbit-center{right:11%;top:11%;transform:translate(50%,-50%)}
.hobby-gaming .hobby-orbit-center{left:11%;bottom:11%;transform:translate(-50%,50%)}
.hobby-music .hobby-orbit-center{right:11%;bottom:11%;transform:translate(50%,50%)}
.hobby-image-placeholder{position:absolute;left:0;top:0;width:clamp(132px,15.6vw,211.2px);aspect-ratio:4/3;pointer-events:auto;opacity:1;transform:translate3d(-400px,-400px,0)}
.hobby-image-surface{position:absolute;inset:0;background:#242526;border:1px solid #ffffff24;border-radius:7px;box-shadow:0 8px 14px #0007,0 20px 32px #0005;overflow:hidden;pointer-events:none;transform:scale(1);transition:transform .38s cubic-bezier(.22,1,.36,1)}
@media(hover:hover) and (pointer:fine){
 .hobby-image-placeholder:hover{z-index:5}
 .hobby-image-placeholder:hover .hobby-image-surface{transform:scale(1.265)}
}
@media(prefers-reduced-motion:reduce){.hobby-image-surface{transition:none}}
.hobby-image-placeholder img{display:block;width:100%;height:100%;object-fit:cover}
#projects.orbits-running .hobby-image-placeholder:not([hidden]){will-change:transform}
@media(max-width:900px){
 #projects{height:calc(100dvh + 48px);min-height:780px}
 #projects .project-heading{width:72%}
 #projects .project-heading h2{font-size:32px}
 #projects .project-heading p{font-size:12px;margin-top:12px}
 .hobby-image-placeholder{width:clamp(79.2px,22.8vw,132px)}
 .hobby-orbit-center{width:64px;gap:8px}
 .hobby-orbit-center svg{width:31.05px;height:31.05px}
 .hobby-orbit-center .hobby-camera-icon{width:50px;height:31.05px}
 .hobby-orbit-center h3{font-size:10px;max-width:10ch}
 .hobby-photography .hobby-orbit-center,.hobby-gaming .hobby-orbit-center{left:12%}
 .hobby-travel .hobby-orbit-center,.hobby-music .hobby-orbit-center{right:12%}
 .hobby-photography .hobby-orbit-center,.hobby-travel .hobby-orbit-center{top:10%}
 .hobby-gaming .hobby-orbit-center,.hobby-music .hobby-orbit-center{bottom:10%}
}

/* A flush white fourth page, with no section translation at the shared edge. */
#playground{position:relative;z-index:3;background:#fff;color:#171717;--ink:#171717;--accent:#183f73;transform:none;will-change:auto}
#playground .play-heading{border-top-color:#17171720}
#playground .play-heading h2{color:#171717}
#playground .play-heading h2 em{color:#183f73}
#playground .play-stage{background:#f5f7fa;border:1px solid #172d4914;color:#171717;--mood:#183f73}
#playground .stage-label{color:#171717}
#playground .stage-label em{color:#183f73}
#photography-camera{display:block;position:relative;width:126px;height:106px;padding:0;border:0;background:transparent;pointer-events:auto;cursor:pointer;touch-action:manipulation;border-radius:12px}
#photography-camera canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
#photography-camera .hobby-camera-icon{margin:auto}
#photography-camera.camera-ready .hobby-camera-icon{display:none}
#photography-camera:focus-visible{outline:2px solid #5685c1;outline-offset:3px}
.photography-empty-frame{aspect-ratio:4/3;background:#222426;border:1px solid #ffffff20;border-radius:8px}
@media(max-width:900px){#photography-camera{width:90px;height:76px}}

/* The controller shares the camera interaction footprint and gallery layout. */
#gaming-controller{display:block;position:relative;width:126px;height:106px;padding:0;border:0;background:transparent;pointer-events:auto;cursor:pointer;touch-action:manipulation;border-radius:12px}
#gaming-controller canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
#gaming-controller .gaming-controller-fallback{margin:auto}
#gaming-controller.camera-ready .gaming-controller-fallback{display:none}
#gaming-controller:focus-visible{outline:2px solid #5685c1;outline-offset:3px}
.gaming-empty-frame{aspect-ratio:4/3;background:#222426;border:1px solid #ffffff20;border-radius:8px}
@media(max-width:900px){#gaming-controller{width:90px;height:76px}}
#gaming-controller .gaming-controller-fallback svg{margin:auto}

/* Traveling aircraft uses the same interaction footprint. */
#travel-plane{display:block;position:relative;width:151.2px;height:127.2px;padding:0;border:0;background:transparent;pointer-events:auto;cursor:pointer;touch-action:manipulation;border-radius:12px}
#travel-plane canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
#travel-plane .travel-plane-fallback{margin:auto}
#travel-plane.camera-ready .travel-plane-fallback{display:none}
#travel-plane:focus-visible{outline:2px solid #5685c1;outline-offset:3px}
.travel-empty-frame{aspect-ratio:4/3;background:#222426;border:1px solid #ffffff20;border-radius:8px}
@media(max-width:900px){#travel-plane{width:108px;height:91.2px}}
#travel-plane .travel-plane-fallback svg{margin:auto}

/* Music player preserves the shared hobby interaction footprint. */
#music-walkman{display:block;position:relative;width:126px;height:106px;padding:0;border:0;background:transparent;pointer-events:auto;cursor:pointer;touch-action:manipulation;border-radius:12px}
#music-walkman canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
#music-walkman .music-walkman-fallback{margin:auto}
#music-walkman.camera-ready .music-walkman-fallback{display:none}
#music-walkman:focus-visible{outline:2px solid #5685c1;outline-offset:3px}
.music-empty-frame{aspect-ratio:4/3;background:#222426;border:1px solid #ffffff20;border-radius:8px}
@media(max-width:900px){#music-walkman{width:90px;height:76px}}
#music-walkman .music-walkman-fallback svg{margin:auto}

/* Alpha-based shadows follow the rendered silhouette through orbit and hover.
   Keep the filter on each small canvas so no extra WebGL shadow pass is needed. */
#projects :is(#photography-camera,#gaming-controller,#travel-plane,#music-walkman){overflow:visible}
#projects :is(#photography-camera,#gaming-controller,#travel-plane,#music-walkman)>canvas,
#projects #photography-camera>.hobby-camera-icon,
#projects :is(.gaming-controller-fallback,.travel-plane-fallback,.music-walkman-fallback){filter:drop-shadow(0 10px 8px #000c)}
@media(max-width:900px){
 #projects :is(#photography-camera,#gaming-controller,#travel-plane,#music-walkman)>canvas,
 #projects #photography-camera>.hobby-camera-icon,
 #projects :is(.gaming-controller-fallback,.travel-plane-fallback,.music-walkman-fallback){filter:drop-shadow(0 7px 6px #000c)}
}

/* Photography media retains the existing card dimensions and crop. */
.hobby-photography .hobby-image-surface video{display:block;width:100%;height:100%;object-fit:cover}

/* Traveling media uses the existing card crop and gallery sizing. */
.hobby-travel .hobby-image-surface video{display:block;width:100%;height:100%;object-fit:cover}

/* Video frames stay on the same compositor path as each moving card. */
.hobby-image-surface .hobby-video-canvas{display:block;width:100%;height:100%;transform:translateZ(0);backface-visibility:hidden}
/* Shared hobby overlays: fixed header, bounded media, independent scrolling. */
dialog.hobby-gallery{width:min(1060px,calc(100vw - 40px));height:min(780px,88dvh);max-width:none;max-height:88dvh;margin:auto;padding:0;box-sizing:border-box;background:#141516;color:#f4f1e9;border:1px solid #ffffff24;border-radius:18px;overflow:hidden;overscroll-behavior:contain;box-shadow:0 24px 80px #0006}
dialog.hobby-gallery[open]{display:flex;flex-direction:column}
dialog.hobby-gallery::backdrop{background:rgba(0,0,0,.78)}
dialog.hobby-gallery header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 30px 22px;border-bottom:1px solid #ffffff18;flex:0 0 auto;background:#141516}
dialog.hobby-gallery h2{font-size:clamp(28px,4vw,42px);line-height:1.1;margin:8px 0 0}
dialog.hobby-gallery .eyebrow{color:#5685c1}
dialog.hobby-gallery header button{display:grid;place-items:center;width:44px;height:44px;padding:0;flex:0 0 44px;border:1px solid #ffffff30;border-radius:50%;background:#242526;color:#fff;font-size:28px;line-height:1;cursor:pointer}
dialog.hobby-gallery :focus-visible{outline:2px solid #5685c1;outline-offset:4px}
/* The camera opens an isolated editorial filmstrip inside its existing dialog. */
dialog#photography-gallery{width:calc(100vw - 32px);height:calc(100dvh - 32px);max-height:none;border-radius:0;background:#0c0d10}
dialog#photography-gallery>header{position:absolute;top:16px;right:16px;z-index:10;padding:0;border:0;background:transparent}
dialog#photography-gallery>header>div{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
dialog#photography-gallery>header>button{width:46px;height:46px;flex-basis:46px;font-size:27.6px;background:#0004;border-color:#ffffff70}
dialog#photography-gallery .hobby-gallery-content{position:relative;padding:0;overflow:hidden;scrollbar-gutter:auto;isolation:isolate}
dialog#photography-gallery .photography-carousel-mount{width:100%;height:100%}
dialog#photography-gallery .photography-gallery-status{position:absolute;inset:0;z-index:1;display:grid;place-items:center;margin:0;pointer-events:none;color:#e7ebf0;font-size:13px;letter-spacing:.1em}
dialog#photography-gallery .photography-gallery-status[hidden]{display:none}
dialog#photography-gallery .photography-gallery-grid{display:none}
dialog#photography-gallery.photo-carousel-fallback .hobby-gallery-content{padding:64px 24px 24px;overflow-y:auto}
dialog#photography-gallery.photo-carousel-fallback .photography-carousel-mount{display:none}
dialog#photography-gallery.photo-carousel-fallback .photography-gallery-status{position:static;display:block;margin:0 0 20px}
dialog#photography-gallery.photo-carousel-fallback .photography-gallery-grid{display:grid}
@media(max-width:700px){dialog#photography-gallery{width:100vw;height:100dvh;border:0}dialog#photography-gallery>header{top:max(12px,env(safe-area-inset-top));right:12px}}
.hobby-gallery-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:26px 30px 30px;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-color:#626971 #141516}
.hobby-gallery-content p{color:#aeb3bb;font-size:14px;margin:0 0 24px}
.hobby-gallery-content [class$="-gallery-grid"]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.hobby-gallery-content figure{margin:0;min-width:0;background:#222426;border:1px solid #ffffff18;border-radius:8px;overflow:hidden;aspect-ratio:4/3;position:relative}
.hobby-gallery-content figure>a{display:block;width:100%;height:100%}
.hobby-gallery-content figure>img,.hobby-gallery-content figure>video,.hobby-gallery-content figure>a{position:absolute;inset:0}
.hobby-gallery-content figure img,.hobby-gallery-content figure video{display:block;width:100%;height:100%;max-width:100%;max-height:100%;aspect-ratio:auto;object-fit:contain;border-radius:0;background:#222426}
.hobby-gallery-content figcaption{position:absolute;inset:auto 0 0;padding:10px 12px;background:#141516e8;font-size:13px;line-height:1.4}
.travel-video-player{position:absolute;inset:0;background:#000}
.travel-video-player:fullscreen{width:100%;height:100%}
.travel-video-controls{position:absolute;inset:auto 0 0;display:flex;align-items:center;gap:8px;padding:20px 10px 8px;background:linear-gradient(transparent,#000c);color:#fff;transition:opacity .15s}
.travel-video-controls button{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;padding:0;border:0;border-radius:4px;background:transparent;color:inherit;font-size:15px;cursor:pointer}
.travel-video-controls button:hover{background:#ffffff20}
.travel-video-controls button[hidden]{display:none}
.travel-video-controls input{min-width:0;flex:1;accent-color:#5685c1;cursor:pointer}
.travel-video-time{font-size:11px;font-variant-numeric:tabular-nums;min-width:3ch}
@media(hover:hover) and (pointer:fine){.travel-video-player.is-playing:not(:hover):not(:focus-within) .travel-video-controls{opacity:0;pointer-events:none}}
@media(max-width:700px){dialog.hobby-gallery{width:calc(100vw - 24px);height:90dvh;max-height:90dvh;border-radius:14px}dialog.hobby-gallery header{padding:20px;gap:16px}.hobby-gallery-content{padding:20px}.hobby-gallery-content [class$="-gallery-grid"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(max-width:380px){.hobby-gallery-content [class$="-gallery-grid"]{grid-template-columns:minmax(0,1fr)}}

/* Optional travel locations, rendered only for labelled media. */
.travel-location-label{position:absolute;left:auto;right:8px;top:8px;bottom:auto;max-width:calc(100% - 16px);z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:0;background:none;color:#000;text-shadow:none;font:500 13.2px/1.35 system-ui,sans-serif;pointer-events:none}
.travel-location-label.travel-location-light{color:#fff;text-shadow:0 1px 3px #000}
.travel-location-label img.travel-location-pin{position:static;display:block;width:16px;height:24px;min-width:16px;max-width:none;max-height:none;aspect-ratio:2/3;flex:none;object-fit:contain;background:none;border-radius:0}
.travel-location-label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.travel-gallery-grid .travel-location-label{font-size:14.4px}

/* Vinyl records retain the existing 4:3 orbit bounds and shared arc clock. */
.hobby-music .hobby-image-surface{display:grid;place-items:center;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.music-record{position:relative;width:74%;aspect-ratio:1;border-radius:50%;isolation:isolate;background:repeating-radial-gradient(circle at center,transparent 0 2px,#ffffff09 2.5px 3px,transparent 3.5px 5px),conic-gradient(from -35deg,#0b0d10 0deg,#353a40 35deg,#121518 60deg,#080a0c 140deg,#30353b 210deg,#121518 240deg,#080a0c 320deg,#0b0d10 360deg);border:1px solid #545a63;box-shadow:inset 0 0 0 3px #090a0b,inset 0 0 0 5px #ffffff0c,0 8px 16px #0005;transform:rotate(0deg);transition:transform .65s cubic-bezier(.22,1,.36,1)}
.music-record-label{position:absolute;inset:32%;border-radius:50%;overflow:hidden;background:var(--record-label,#183f73);border:1px solid #ffffff30;box-shadow:0 0 0 3px #050709,0 0 0 4px #ffffff12}
.music-record-label::after{content:'';position:absolute;inset:12%;border:1px solid #ffffff24;border-radius:50%;pointer-events:none}
.hobby-music .music-record-label img,.music-gallery-grid .music-record-label img{position:static;width:100%;height:100%;object-fit:cover;background:none;border-radius:50%}
.music-record-hole{position:absolute;left:50%;top:50%;width:5%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#111;border:1px solid #d0d5dc88;box-shadow:0 0 0 2px #0004;z-index:2}
.music-gallery-grid .music-record-frame{display:grid;place-items:center;background:#181a1d}
.music-gallery-grid .music-record{width:68%}
@media(hover:hover) and (pointer:fine){.hobby-music .hobby-image-placeholder:hover .music-record,.music-record-frame:hover .music-record{transform:rotate(14deg)}}
@media(prefers-reduced-motion:reduce){.music-record{transition:none}.hobby-music .hobby-image-placeholder:hover .music-record,.music-record-frame:hover .music-record{transform:rotate(0deg)}}

.hobby-music .music-record{box-shadow:inset 0 0 0 3px #090a0b,inset 0 0 0 5px #ffffff0c,0 8px 14px #0007,0 20px 32px #0005}
.music-record-caption{position:absolute;top:calc(100% + 5px);left:-12%;right:-12%;text-align:center;opacity:0;transition:opacity .2s;pointer-events:none;font:12px/1.35 system-ui,sans-serif;color:#eee;text-shadow:0 1px 3px #000}
.music-record-caption strong,.music-record-caption>span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.music-record-caption>span{color:#b8bec8;font-size:10px;margin-top:2px}
@media(hover:hover) and (pointer:fine){.hobby-music .hobby-image-placeholder:hover .music-record-caption{opacity:1}}
@media(prefers-reduced-motion:reduce){.music-record-caption{transition:none}}

/* Full-disc album artwork, retaining the vinyl rim and spindle hole. */
.music-record-label{inset:0;border:0;box-shadow:none}
.music-record-label::after{inset:0;border:0;border-radius:50%;background:repeating-radial-gradient(circle at center,transparent 0 3px,#ffffff08 3.5px 4px,transparent 4.5px 6px);box-shadow:inset 0 0 0 2px #ffffff24,inset 0 0 0 5px #080a0c66}



/* Scroll entrance uses compositor transforms on the existing model containers. */
#projects:not(.hobbies-intro-ready) .hobby-orbit-center{visibility:hidden}
#projects .hobby-arc-stream{opacity:1}
#projects:not(.hobby-images-entering) .hobby-image-placeholder{visibility:hidden!important;pointer-events:none}
body.hobbies-intro-active #projects .hobby-orbit-center button{pointer-events:none}
@media(prefers-reduced-motion:reduce){#projects .hobby-arc-stream{opacity:1}}

/* Keep the approaching orbit behind the central heading. */
#projects .hobby-orbit-center{z-index:1}

/* Lenis owns scroll easing; avoid combining it with native CSS smoothing. */
html.lenis{scroll-behavior:auto!important}

/* Sticky hero layers can still intersect while covered by the next page. */
#home.hero-covered .hero-star-layer,#home.hero-covered .hero-retro-lines,#home.hero-covered .name-track,#home.hero-idle .name-track{animation-play-state:paused}

.ambient-paused,.ambient-paused *{animation-play-state:paused!important}

/* Dark blue Batman palette: colour overrides only; existing geometry and motion remain intact. */
:root{--bg:#0c0d10;--ink:#e7ebf0;--muted:#a4aab3;--accent:#183f73;--paper:#18191d;--blue:#183f73;--lime:#5685c1;--line:#5685c112}
main>.section,main>dialog,#study-dialog,.hero-skills-transition>#about{--paper:#18191d;--ink:#e7ebf0;--blue:#183f73;--lime:#5685c1;--accent:#183f73;--surface-black:#0c0d10;--surface-white:#242529}
.floating-nav{background:#18191ded;border-color:#5685c126}
.floating-nav a:hover{color:#5685c1}
.badge,.badge-face{background-color:#183f73;color:#e7ebf0}
.badge-face{background-image:radial-gradient(circle at 1px 1px,#96b7df50 1px,transparent 1.5px),linear-gradient(138deg,#ffffff12,transparent 42%,#0e244530)}
.badge-bottom{background:#17181c;color:#5685c1;justify-content:center}
.badge-bottom>span{font-size:1.2em;font-weight:700}
#home .badge>img{filter:url('#badge-soft-shadow')}
#about,.hero-skills-transition>#about{background:#18191d;color:#e7ebf0}
#about .skills-heading,#about .skills-signoff{border-color:#e7ebf024}
#about .skills-heading>p,#about .skills-signoff,.personal .personal-copy p{color:#a4aab3}
#about .skill-design,#about .skill-human{background:#142840;color:#e7ebf0;--card-accent:#5685c1}
#about .skill-frontend,#about .skill-dimension{background:#242529;color:#e7ebf0;--card-accent:#5685c1}
#about .skill-card.tilt-card{border-color:#5685c130}
#about .skill-design .skill-tool,#about .skill-human .skill-tool,#about .skill-frontend .skill-tool,#about .skill-dimension .skill-tool{background:#18191d;color:#e7ebf0;border-color:#e7ebf020}
#about .skill-tool>.skill-icon-disc{background:#303136}
#about .skill-icon-disc>svg,#about .skill-icon-disc>img,#about .skill-icon-disc>span{color:#5685c1}
#about .skill-icon-disc:before{background:#183f73}
#about .skill-tool>.skill-icon-tooltip{background:#102b52;color:#fff}
#about .skill-tool:is(:hover,:focus-visible) .skill-icon-disc>span{color:#e7ebf0}
#about .skills-filter button{color:#e7ebf0;border-color:#e7ebf030}
#about .skills-filter button[aria-pressed=true]{color:#e7ebf0}
#projects,#contact{background:#0c0d10}
#projects .project-heading p,#contact .contact-note p>span,#contact .footer-bottom{color:#a4aab3}
#playground{background:#18191d;color:#e7ebf0;--ink:#e7ebf0;--accent:#183f73}
#playground .play-heading{border-top-color:#e7ebf020}
#playground .play-heading h2,#playground .stage-label{color:#e7ebf0}
#playground .play-stage{background:#242529;color:#e7ebf0;border-color:#5685c114;--mood:#183f73}
#playground .play-grid{background-image:linear-gradient(#e7ebf009 1px,transparent 1px),linear-gradient(90deg,#e7ebf009 1px,transparent 1px)}
#playground .kinetic-object span:nth-child(3){-webkit-text-stroke-color:#e7ebf0}
.personal.light-section{background:#18191d;color:#e7ebf0}
.personal .personal-copy h2{border-color:#e7ebf024}
.personal .polaroid{background:#242529;border-color:#e7ebf018;color:#e7ebf0}
.personal .polaroid>div{background:#303136}
.personal .eyebrow{color:#183f73}
#study-dialog{background:#18191d;color:#e7ebf0;border-color:#e7ebf020}
#study-dialog .dialog-close{background:#242529;color:#e7ebf0;border-color:#e7ebf040}
#study-dialog>p{color:#a4aab3}
#study-dialog .dialog-done{color:#e7ebf0}
#dialog-art:has(.type-art){background:#242529!important;border-color:#e7ebf020}
#projects .study-orange,#projects .study-blue{background:#242529;color:#e7ebf0}
#projects .type-art>span,#dialog-art .type-art>span{color:#e7ebf0}
#projects .type-art .outline-type,#dialog-art .type-art .outline-type{color:transparent;-webkit-text-stroke-color:#183f73}
:is(#projects,#study-dialog) .mini-window{background:#303136;color:#e7ebf0}
#projects .study-blue .mini-window,#dialog-art .mini-window{color:#e7ebf0}
#projects .hover-label{color:#e7ebf0}
#projects .study-blue .hover-label{background:#183f73;color:#e7ebf0}
#dialog-art .floating-sticker,#projects .floating-sticker{background:#242529;color:#e7ebf0}
#photography-camera .hobby-camera-icon{filter:grayscale(1) sepia(1) saturate(3) hue-rotate(175deg)}
.hobby-image-surface,dialog.hobby-gallery{border-color:#5685c124}
.hobby-gallery-content{scrollbar-color:#102b52 #0c0d10}
.hobby-gallery-content figure{border-color:#5685c118}

/* The existing skill icons travel from above into one complete circular orbit. */
#about,.hero-skills-transition>#about{position:relative;height:calc(100dvh + 48px);min-height:740px;padding:0;overflow:hidden;overflow:clip;--skills-disc-size:clamp(64px,7vw,96px)}
#about .skills-heading{position:absolute;left:50%;top:50%;width:min(340px,calc(var(--skills-ring-radius,240px)*1.4));display:block;transform:translate(-50%,-50%);text-align:center;gap:0;padding:0;margin:0;border:0;z-index:2;pointer-events:none}
#about .skills-heading h1{font-size:clamp(23px,3.8vw,52px);line-height:1.08}
#about .skills-heading>p{font-size:clamp(11px,1vw,14px);line-height:1.65;max-width:none;margin:18px auto 0}
#about .skills-orbit-stage{position:absolute;inset:0;isolation:isolate}
#about .skills-orbit-list{position:absolute;inset:0;padding:0;margin:0;list-style:none}
#about .skills-orbit-slot{position:absolute;left:0;top:0;width:var(--skills-disc-size);height:var(--skills-disc-size);visibility:hidden}
#about.skills-orbit-running .skills-orbit-slot{will-change:transform}
#about .skills-orbit-slot:has(.skills-orbit-disc:is(:hover,:focus-visible)){z-index:3}
#about .skills-orbit-disc{position:relative;display:grid;place-items:center;width:100%;height:100%;padding:0;border:1px solid #5685c166;border-radius:50%;background:radial-gradient(circle at 30% 20%,#2a3a50,#17263b 65%,#142034);color:#dbe7f5;box-shadow:inset 0 1px 1px #ffffff20,0 8px 14px #0006,0 20px 30px #0004;outline-offset:5px;transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s;cursor:default}
#about .skills-orbit-disc>:is(svg,img){display:block;width:48%;height:48%;object-fit:contain}
#about .skills-orbit-disc>span[aria-hidden]{font-size:calc(var(--skills-disc-size)*.45);line-height:1}
#about .skills-orbit-name{position:absolute;top:calc(100% + 10px);left:50%;width:max-content;max-width:120px;padding:6px 8px;border:1px solid #5685c14d;border-radius:7px;background:#152742;color:#e7ebf0;font:500 11px/1.4 Inter,Helvetica,sans-serif;text-align:center;opacity:0;transform:translate(-50%,-4px);transition:opacity .2s,transform .2s;pointer-events:none}
#about .skills-orbit-disc:is(:hover,:focus-visible){transform:scale(1.1);border-color:#88acd9;box-shadow:inset 0 1px 1px #ffffff30,0 10px 18px #0007,0 24px 36px #0005}
#about .skills-orbit-disc:is(:hover,:focus-visible) .skills-orbit-name{opacity:1;transform:translate(-50%,0)}
#about .skills-orbit-disc:focus-visible{outline:2px solid #88acd9}
@media(max-width:700px){#about,.hero-skills-transition>#about{min-height:680px}#about .skills-heading>p{margin-top:14px}}
@media(max-width:380px){#about,.hero-skills-transition>#about{--skills-disc-size:clamp(40px,14vw,54px)}#about .skills-heading h1{font-size:20px}#about .skills-heading>p{font-size:10px;line-height:1.5;margin-top:12px}}
@media(prefers-reduced-motion:reduce){#about .skills-orbit-disc,#about .skills-orbit-name{transition:none}#about .skills-orbit-disc:is(:hover,:focus-visible){transform:none}}

/* Skills and hobbies share one viewport: no covering panel or section boundary. */
.skills-hobbies-scene{position:relative;background:#0c0d10}
.skills-hobbies-viewport{position:relative;transform-origin:50% 0}
.hero-skills-transition.transition-running .skills-hobbies-viewport{will-change:transform}
.scene-pinned{height:calc(max(860px,100dvh + 48px)*var(--scene-scroll-length,3.56398625))}
.scene-pinned .skills-hobbies-viewport{position:sticky;top:var(--scene-sticky-top,-48px);height:max(860px,calc(100dvh + 48px));overflow:clip;isolation:isolate;transform:scale(var(--enter-scale,1)) rotate(var(--enter-rotation,0deg))}
.scene-pinned #about,.scene-pinned #projects{position:absolute;inset:0;height:100%;min-height:0;max-height:none;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;transform:none;pointer-events:none}
.scene-pinned #about{z-index:2}
.scene-pinned #projects{z-index:1}
.scene-pinned #about .skills-orbit-disc{pointer-events:auto}
.scene-pinned #about .skills-heading{opacity:var(--scene-skills-copy,1)}
.scene-pinned #projects .project-heading{opacity:var(--scene-hobbies-copy,0)}
.scene-pinned :is(.skills-heading,.project-heading){transition:none}
.scene-pinned #projects .hobby-orbit-center{opacity:var(--scene-model-opacity,0);visibility:hidden;pointer-events:none}
.scene-pinned #projects .hobby-orbit-center.scene-model-visible{visibility:visible}
.scene-pinned #projects .hobby-orbits{overflow:clip}
.scene-pinned #projects .hobby-arc-stream{opacity:var(--scene-hobby-media,0)}
@media(max-width:900px){.scene-pinned{height:calc(max(780px,100dvh + 48px)*var(--scene-scroll-length,3.56398625))}.scene-pinned .skills-hobbies-viewport{height:max(780px,calc(100dvh + 48px))}}
@media(prefers-reduced-motion:reduce){.skills-hobbies-viewport{transform:none}.skills-hobbies-scene #about,.skills-hobbies-scene #projects{transform:none;border-radius:0;box-shadow:none;background:#0c0d10}}