/* Clear separation and aligned project stack */
#growth .growth-viewport::after{width:min(760px,94vw);height:100%;border-radius:48px;background:rgba(27,27,34,.78);-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);-webkit-mask-image:none;mask-image:none;box-shadow:0 0 35px 24px rgba(27,27,34,.6)}
#growth .project-fan-card[data-slot="0"]{transform:translate(0,0);opacity:1}#growth .project-fan-card[data-slot="1"]{transform:translate(0,-14px) scale(.96);opacity:1}#growth .project-fan-card[data-slot="2"]{transform:translate(0,-28px) scale(.92);opacity:1}

#growth .project-fan-card[data-slot="1"]{transform:translate(-18px,6px) rotate(-4deg) scale(.96);opacity:1}#growth .project-fan-card[data-slot="2"]{transform:translate(18px,6px) rotate(4deg) scale(.96);opacity:1}

/* Local frosted layer between awards and project cards */
#growth .growth-viewport::after{content:"";position:absolute;pointer-events:none;z-index:3;left:50%;top:50%;width:min(760px,92vw);height:calc(100% - 12px);transform:translate(-50%,-50%);background:rgba(24,24,30,.42);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);-webkit-mask-image:radial-gradient(ellipse farthest-side,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse farthest-side,#000 72%,transparent 100%)}
#growth .project-fan-halo{display:none}

#growth .growth-viewport{-webkit-mask-image:none;mask-image:none}

:root{--ink:#1d1d1f;--muted:#6e6e73;--bg:#f5f5f7;--blue:#0066cc}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;color:var(--ink);background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Apple SD Gothic Neo",sans-serif;font-size:17px;line-height:1.65;word-break:keep-all}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:6px}nav{position:sticky;top:0;z-index:5;background:#fafafae8;backdrop-filter:blur(18px);border-bottom:1px solid #0000000c}.navin{max-width:1160px;margin:auto;height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 32px}.brand{font-size:17px;font-weight:650;letter-spacing:-.6px}.brand span{font-weight:400;color:var(--muted);margin-left:9px}.navlinks{display:flex;gap:30px;font-size:14px}.navlinks a:hover{color:var(--blue)}.wrap{max-width:1160px;margin:auto;padding:0 32px}.hero{text-align:center;padding:98px 0 0;overflow:hidden;background:#fff}.eyebrow{font-size:13px;letter-spacing:2.3px;font-weight:650;color:var(--muted)}h1{font-size:clamp(44px,6.2vw,78px);line-height:1.17;letter-spacing:-4px;font-weight:700;margin:23px 0 25px}h1 span{color:#85858a}.intro{max-width:530px;margin:0 auto;color:var(--muted);font-size:20px;line-height:1.7}.actions{display:flex;gap:26px;align-items:center;justify-content:center;margin-top:30px;font-size:16px}.primary{background:var(--ink);color:white;padding:11px 23px;border-radius:28px}.textlink{color:var(--blue)}.textlink:hover{text-decoration:underline}.system{margin:58px auto 0;max-width:750px;height:224px;position:relative;background:radial-gradient(ellipse at 50% 100%,#dceafa 0,transparent 67%)}.topology{display:flex;align-items:center;justify-content:center;gap:38px;position:relative;padding:34px 0}.node{background:linear-gradient(150deg,#fff,#f1f2f5);border:1px solid #e4e5e8;border-radius:20px;width:172px;padding:24px 10px;box-shadow:0 12px 26px #172b4710;text-align:center;position:relative}.node strong{display:block;font-size:18px;letter-spacing:-.4px}.node small{font-size:12px;color:var(--muted)}.node:before{content:"";position:absolute;width:39px;height:1px;background:#bdc8d4;left:-39px;top:50%}.node:first-child:before{display:none}.node:nth-child(2){transform:translateY(-16px);border-color:#bdd5ee}.systemcaption{font-size:12px;letter-spacing:2px;color:#747b83}.section{padding:102px 0}.sectionhead{display:flex;justify-content:space-between;align-items:end;margin-bottom:36px;gap:24px}.sectionhead h2,.about h2{font-size:clamp(32px,4vw,48px);line-height:1.2;letter-spacing:-2px;margin:9px 0}.sectionhead p{margin:0;color:var(--muted);font-size:16px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.card{display:flex;flex-direction:column;overflow:hidden;border-radius:28px;background:#fff;transition:transform .25s,box-shadow .25s;min-height:420px}.card:hover{transform:translateY(-5px);box-shadow:0 18px 50px #18213110}.card.featured{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;min-height:385px}.cardbody{padding:40px;display:flex;align-items:start;flex-direction:column}.category{color:var(--muted);font-size:13px;font-weight:600;letter-spacing:1px}.card h3{font-size:34px;letter-spacing:-1.7px;line-height:1.3;margin:16px 0}.card p{color:var(--muted);max-width:390px;margin:0 0 24px;font-size:16px}.card .read{margin-top:auto;color:var(--blue);font-size:15px}.art{padding:40px;display:flex;align-items:center;justify-content:center;background:#edf0f5;min-height:220px}.featured .art{background:#e9eef5}.metric{width:100%;max-width:340px}.metricheader{display:flex;justify-content:space-between;font-size:12px;letter-spacing:1px;color:#687482;border-bottom:1px solid #cfd7e1;padding-bottom:14px}.barrow{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:18px;margin-top:26px;font-size:13px;color:#626f80}.track{height:10px;background:#d6dfe9;border-radius:10px;overflow:hidden}.bar{height:100%;background:#6a89b3;border-radius:10px}.metricnote{font-size:12px;color:#6e7888;margin-top:26px}.codeart{width:100%;font-family:ui-monospace,monospace;font-size:14px;color:#596578;line-height:2}.codeart b{color:#2d4d76;font-weight:500}.layerart{display:flex;flex-direction:column;gap:10px;width:100%;max-width:310px}.layerart div{background:#ffffffa8;border:1px solid #d6dfeb;padding:9px 15px;border-radius:10px;font-size:13px;color:#55687d;display:flex;justify-content:space-between}.about{background:#fff}.aboutgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px}.aboutcopy{font-size:22px;line-height:1.75;letter-spacing:-.5px}.aboutcopy p{margin:0;color:#626268}.aboutcopy ul{list-style:none;padding:18px 0 0;font-size:16px;color:#6e6e73}.aboutcopy li{padding:16px 0;border-bottom:1px solid #ededf0}.skills{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}.skills span{font-size:14px;border:1px solid #dddde2;border-radius:99px;padding:6px 14px;color:#56565c}.closing{text-align:center;padding:95px 20px}.closing h2{font-size:38px;line-height:1.35;letter-spacing:-1.8px;margin:0 0 18px}.closing p{color:var(--muted)}footer{max-width:1096px;margin:auto;padding:24px 0 32px;border-top:1px solid #dcdce0;display:flex;justify-content:space-between;font-size:12px;color:#76767d}.detail{max-width:780px;margin:auto;padding:74px 28px 100px}.detail h1{font-size:52px;letter-spacing:-2px}.detail h2,.detail h3{font-size:25px;letter-spacing:-.8px;margin-top:48px}.detail p,.detail li{color:#55555b}.notice{font-size:14px;padding:16px 20px;border-radius:14px;background:#e9eef5;color:#53677e;margin:30px 0}.back{font-size:15px;color:var(--blue)}@media(max-width:700px){.navin{padding:0 22px;height:60px}.brand span{display:none}.navlinks{gap:20px}.wrap{padding:0 22px}.hero{padding-top:68px}h1{letter-spacing:-2.5px}.intro{font-size:17px;padding:0 24px}.actions{gap:16px;font-size:14px}.actions a{white-space:nowrap}.primary{padding:11px 19px}.system{height:auto;min-height:188px;margin-top:40px;padding-bottom:20px}.node small{display:none}.topology{gap:15px;padding:30px 18px}.node{width:31%;padding:19px 5px;border-radius:15px}.node strong{font-size:15px}.node small{font-size:11px}.node:before{width:16px;left:-16px}.section{padding:68px 0}.sectionhead{display:block}.sectionhead p{margin-top:18px}.grid{grid-template-columns:1fr}.card.featured{grid-column:auto;display:flex}.cardbody{padding:30px}.card h3{font-size:30px}.art{padding:30px}.aboutgrid{grid-template-columns:1fr;gap:28px}.aboutcopy{font-size:19px}footer{margin:0 22px;gap:20px}.detail h1{font-size:38px}.closing h2{font-size:30px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Quiet scroll narrative */
body{background:#f5f5f7}.hero{padding-top:92px}.hero h1{font-size:clamp(44px,6vw,76px)}.hero .intro{max-width:570px}.scrollcue{padding:48px 0 36px;color:#8b8b91;font-size:12px;letter-spacing:1px}.scrollcue span{display:block;font-size:22px;margin-top:9px}.scroll-story{height:340vh;position:relative;background:#fff}.scene{height:calc(100svh - 68px);min-height:560px;position:sticky;top:68px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 75%,rgba(220,222,226,var(--glow,.2)),transparent 60%),#fff}.scene-inner{width:min(100%,1000px);height:580px;position:relative;margin:auto}.storycopy{position:absolute;inset:22px 24px auto;text-align:center;height:150px}.storycopy>div{position:absolute;inset:0;opacity:0;transform:translateY(16px);transition:opacity .3s,transform .3s;pointer-events:none}.storycopy>div.active{opacity:1;transform:translateY(0)}.storycopy .eyebrow{font-size:12px;letter-spacing:2px}.storycopy h2{font-size:clamp(33px,4vw,51px);letter-spacing:-2px;line-height:1.28;margin:13px 0}.storycopy p{color:#78787e;font-size:16px;margin:0}.storyprogress{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:10px}.storyprogress span{width:34px;height:3px;background:#e3e3e7;border-radius:3px;overflow:hidden}.storyprogress i{height:100%;display:block;background:#6c6c73;transform-origin:left;transform:scaleX(0)}.scenehint{position:absolute;bottom:48px;text-align:center;left:0;right:0;color:#939399;font-size:12px}.section{padding-top:100px}.card.featured .art{background:#ececef}.art{background:#efeff1}.bar{background:#8a8a96}.track{background:#dcdce3}.metricheader,.barrow,.metricnote,.codeart,.codeart b,.layerart div{color:#71717d}.layerart div{border-color:#dadade}.textlink,.card .read{color:#51515b}.about h2{font-size:42px}.closing{background:#fff}footer{padding-left:22px;padding-right:22px}.story-static{display:none}@media(max-width:700px){.hero{padding-top:65px}.hero h1{font-size:44px}.scrollcue{padding-top:35px}.scroll-story{height:340vh}.scene{top:60px;height:calc(100svh - 60px);min-height:530px}.scene-inner{height:590px}.storycopy{top:22px}.storycopy h2{font-size:32px;letter-spacing:-1.5px}.storycopy p{font-size:14px;max-width:300px;margin:auto}.scenehint{bottom:44px}.about h2{font-size:33px}}
/* Left-hand wave index and a single readable milestone. */
.scroll-story{height:520vh}.scene-inner{width:min(100%,1100px);height:590px}
.journey{position:absolute;top:222px;left:52px;right:52px;text-align:left}
.journey-header{display:flex;justify-content:space-between;align-items:center;margin:0 0 24px 120px}
.journey-label{font-size:12px;font-weight:600;color:#62626b}.journey-range{font-size:10px;letter-spacing:1.6px;color:#92929a}
.wave-rail{display:none;position:absolute;left:0;top:0;width:72px;height:300px}
.wave-caption{font-size:9px;letter-spacing:1.2px;color:#91919a;position:absolute;left:0;top:0}.wave-caption.end{top:auto;bottom:0}
.wave-ticks{position:absolute;top:27px;bottom:27px;left:0;right:0;display:flex;flex-direction:column;justify-content:space-between}
.wave-tick{display:block;height:2px;width:7px;background:#c9c9d0;transform-origin:left;will-change:width,background-color}
.wave-anchors{position:absolute;top:27px;bottom:27px;left:0;right:0}
.wave-anchor{position:absolute;left:-8px;width:76px;height:30px;transform:translateY(-50%);border:0;background:transparent;cursor:pointer;border-radius:4px}
.wave-anchor:focus-visible{outline:2px solid #8e8e98;outline-offset:3px}
.wave-anchor .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.timeline-window{outline-offset:6px}.timeline-track{list-style:none;margin:0;padding:0;display:grid;gap:32px}
.milestone{position:relative;min-width:0}.milestone-date{font-size:15px;font-variant-numeric:tabular-nums;color:#777780;margin-bottom:15px}.milestone-node{display:none}.milestone-kind{font-size:10px;letter-spacing:1.7px;color:#929299;margin:0 0 10px}
.milestone h3{font-size:clamp(25px,3.3vw,36px);line-height:1.35;letter-spacing:-1px;margin:0 0 18px;word-break:keep-all;max-width:700px}
.milestone p{font-size:17px;line-height:1.85;color:#717179;margin:0;word-break:keep-all;max-width:630px}
.journey-footer{display:flex;justify-content:space-between;align-items:center;margin-top:22px;font-size:11px;color:#92929a}.journey-footer>span{font-size:11px}
.journey-controls{display:none;gap:7px}.journey-controls button{width:33px;height:33px;border:1px solid #e0e0e5;border-radius:50%;background:transparent;color:#777780;font-size:16px;cursor:pointer}.journey-controls button:hover{background:#eeeeF2}.journey-controls button:focus-visible{outline:2px solid #888;outline-offset:3px}.journey-controls button:disabled{opacity:.25;cursor:default}
.motion-ready .wave-rail{display:block}.motion-ready .timeline-window{margin-left:120px;overflow:visible;height:225px}.motion-ready .timeline-track{display:block;position:relative;width:100%;height:100%;transform:none!important}.motion-ready .milestone{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s,transform .3s,visibility .3s;pointer-events:none}.motion-ready .milestone.current{opacity:1;visibility:visible;transform:none;pointer-events:auto}.motion-ready .journey-footer{margin-left:120px}.motion-ready .journey-controls{display:flex}
.scenehint,.storyprogress{display:none}.storycopy p{line-height:1.65}
[data-theme="dark"] .wave-tick{background:#494952}[data-theme="dark"] .wave-caption{color:#747480}
@media(max-width:700px){.scene-inner{height:610px}.scene{min-height:650px}.journey{left:24px;right:24px;top:232px}.journey-header{margin-left:60px;margin-bottom:22px;gap:10px}.journey-range{font-size:9px;letter-spacing:1px}.journey-label{font-size:11px}.wave-rail{width:40px;height:316px}.wave-anchor{width:48px}.motion-ready .timeline-window{margin-left:60px;height:255px}.motion-ready .journey-footer{margin-left:60px}.milestone h3{font-size:25px;letter-spacing:-.6px}.milestone p{font-size:15px;line-height:1.8}.milestone-date{font-size:13px}.journey-footer>span{max-width:130px;line-height:1.6}.storycopy h2{font-size:clamp(26px,7vw,32px)}}
/* Small-height windows and reduced motion use an ordinary vertical timeline. */
@media(max-height:560px),(prefers-reduced-motion:reduce){.scroll-story{height:auto}.scene{position:relative;top:0;height:auto;min-height:0;padding:60px 0}.scene-inner{height:auto}.storycopy{position:relative;inset:auto;margin:0 24px;height:auto}.storycopy>div{position:relative;inset:auto;opacity:1;transform:none;transition:none;margin-bottom:35px}.journey{position:relative;inset:auto;margin:45px 24px 0}.journey-header{margin-left:0}.timeline-track{display:grid;gap:40px}.milestone{border-left:1px solid #d6d6dc;padding-left:22px}.milestone:before{content:"";position:absolute;left:-4px;top:4px;width:7px;height:7px;border-radius:50%;background:#8e8e98}.journey-controls,.wave-rail{display:none!important}.journey-footer{margin-left:0!important}.milestone h3{font-size:25px}.milestone p{font-size:15px}}
/* This index is an in-section rail, so it does not inherit the page header. */
.scroll-story nav.wave-rail{background:transparent;border:0;backdrop-filter:none;z-index:auto}

/* Page navigation lives at the viewport edge; this story only contains text. */
.journey{left:150px;right:110px}.journey-header,.motion-ready .timeline-window,.motion-ready .journey-footer{margin-left:0}.wave-rail{display:none!important}
@media(max-width:900px){.journey{left:65px;right:45px}}
@media(max-width:700px){.journey{left:26px;right:24px}.journey-header,.motion-ready .timeline-window,.motion-ready .journey-footer{margin-left:0}}

/* Keep the home-page timeline rail continuous while its nodes sit above it. */
.scroll-story.horizontal-story .timeline-window{position:relative}
.scroll-story.horizontal-story .timeline-window::before{content:"";position:absolute;z-index:0;left:0;right:0;top:55px;height:1px;background:#d0d0d7;pointer-events:none}
.scroll-story.horizontal-story .timeline-track{position:relative;z-index:1}
.scroll-story.horizontal-story .milestone-node{z-index:1;background:transparent!important}
.scroll-story.horizontal-story .milestone-node::before{content:"";display:block;position:absolute;z-index:0;left:-5px;top:50%;width:20px;height:20px;border-radius:50%;background:#fff;transform:translateY(-50%)}
.scroll-story.horizontal-story .milestone-node::after{z-index:1}
[data-theme="dark"] .scroll-story.horizontal-story .timeline-window::before{background:#50505d}
[data-theme="dark"] .scroll-story.horizontal-story .milestone-node::before{background:#19191e}

.profile-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:72px;align-items:center;max-width:1040px}
.profile-photo{margin:0}.profile-photo img{display:block;width:100%;height:auto;border-radius:22px;background:#f5f5f7}
.profile-name{font-size:22px;font-weight:600;margin:14px 0 20px}.profile-name span{display:block;font-size:14px;font-weight:400;color:#73737b;margin-top:3px}
.profile-copy h2{font-size:clamp(26px,3vw,36px);letter-spacing:-1.2px;line-height:1.45;max-width:580px;margin:0 0 18px}
.profile-description{font-size:16px;line-height:1.9;color:#6e6e73;max-width:550px}
.profile-contact{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:27px}.profile-email{font-size:16px;text-decoration:underline;text-underline-offset:5px;overflow-wrap:anywhere}.profile-contact .primary{font-size:15px;white-space:nowrap}
.mail-hint{font-size:12px;color:#777780;margin:12px 0 0}
@media(max-width:700px){.profile-grid{grid-template-columns:1fr;gap:30px}.profile-photo{max-width:170px}.profile-contact{align-items:flex-start;flex-direction:column;gap:18px}.profile-copy h2{font-size:28px}}
.work-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:64px;align-items:start}
.work-selected{display:grid;gap:20px}.work-card{display:block;padding:32px 36px;background:#fff;border:1px solid #e9e9ed;border-radius:24px;transition:transform .2s,box-shadow .2s}.work-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px #20202a08}.work-card-meta{display:flex;align-items:center;justify-content:space-between;color:#74747d;font-size:13px;letter-spacing:.5px}.work-card-number{font-size:20px;font-weight:500;color:#b4b4bb}.work-card h3{font-size:28px;line-height:1.35;letter-spacing:-1px;margin:16px 0}.work-card p{font-size:16px;color:#6b6b75;line-height:1.8;margin:0 0 28px}.work-card-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:#777780}.work-card-bottom span{color:#404049}
.work-index{position:sticky;top:110px;align-self:start}.work-index-title{font-size:12px;letter-spacing:1.6px;margin:0 0 6px;color:#53535d;font-weight:600}.work-index-sub{font-size:12px;color:#7c7c86;margin:0 0 26px}.work-index ol{list-style:none;padding:0;margin:0 0 26px}.work-index li{position:relative;margin-left:5px;border-left:1px solid #d8d8df}.work-index li:last-child{border-color:transparent}.work-index a[data-project]{position:relative;display:block;padding:0 0 24px 23px;color:#72727c;font-size:14px;line-height:1.55;transition:color .2s}.work-index a[data-project]:hover,.work-index a[aria-current="location"]{color:#18181e}.work-index time{display:block;font-size:12px;font-variant-numeric:tabular-nums;color:#8a8a93;margin-bottom:5px}.work-dot{position:absolute;top:5px;left:-5px;width:9px;height:9px;background:#f5f5f7;border:1px solid #a3a3ad;border-radius:50%;transition:background .2s,box-shadow .2s}.work-index a[aria-current="location"] .work-dot{background:#494952;border-color:#494952;box-shadow:0 0 0 4px #e7e7ed}.work-index a[aria-current="location"] time{color:#45454f}.work-all{display:inline-block;font-size:14px;border-bottom:1px solid #bdbdc6;padding-bottom:4px;white-space:nowrap}.work-back{display:inline-block;color:#686873;font-size:14px}.work-archive{padding-top:46px;padding-bottom:80px}.work-archive-header{padding:48px 0 60px}.work-archive-header h1{font-size:clamp(38px,5vw,60px);letter-spacing:-2.5px;line-height:1.25;margin:17px 0}.work-archive-header p{font-size:18px;color:#71717b;margin:0 0 24px}.work-count{font-size:12px;letter-spacing:1.4px;color:#7d7d87}.work-entry{background:white;border:1px solid #e9e9ed;border-radius:24px;padding:36px;margin-bottom:28px;scroll-margin-top:100px}.work-entry-top{display:flex;align-items:center;justify-content:space-between;gap:20px;color:#777781;font-size:14px}.work-entry-number{font-size:30px;font-weight:500;color:#b9b9c0}.work-entry-company{font-size:13px;color:#808089;margin:19px 0 12px}.work-entry h2{font-size:29px;letter-spacing:-1px;line-height:1.45;margin:0 0 18px}.work-tags{display:flex;flex-wrap:wrap;gap:8px}.work-tags span{font-size:12px;color:#61616a;background:#f3f3f6;padding:4px 10px;border-radius:5px}.work-summary{font-size:17px;color:#555560;line-height:1.9;margin:26px 0}.work-duties{border-top:1px solid #ededf1;padding-top:22px}.work-duties h2{font-size:16px;letter-spacing:0;margin:0 0 14px}.work-duties ul{padding-left:20px;margin:0;color:#686873;font-size:15px;line-height:1.9}.work-duties li+li{margin-top:9px}.work-end{margin-top:12px}
@media(max-width:1000px){.work-layout{gap:32px;grid-template-columns:minmax(0,1fr) 210px}.work-card,.work-entry{padding:28px}}
@media(max-width:760px){.work-layout{grid-template-columns:1fr;gap:32px}.work-index{position:static;grid-row:1}.work-index-inner{padding-bottom:8px}.work-index ol{display:flex;overflow-x:auto;margin:18px 0 10px;padding-top:8px;padding-bottom:6px}.work-index li{flex:0 0 156px;border-left:0;border-top:1px solid #d8d8df;margin-left:0}.work-index li:last-child{border-top-color:#d8d8df}.work-index a[data-project]{padding:18px 14px 4px 0;font-size:13px}.work-dot{left:0;top:-5px}.work-index-sub{margin-bottom:0}.work-index .work-all{display:none}.work-archive-header{padding:34px 0}.work-archive-header h1{font-size:38px}.work-card h3,.work-entry h2{font-size:25px}.work-card,.work-entry{padding:26px 24px}.work-archive .work-entry{scroll-margin-top:80px}.work-card-bottom{font-size:12px}.work-archive-header p{font-size:16px}}
.navlinks{align-items:center}.theme-toggle{min-height:40px;padding:6px 13px;border-radius:20px;border:1px solid #d6d6de;background:transparent;color:#45454f;font-size:13px;cursor:pointer;white-space:nowrap}.theme-toggle:hover{background:#ededf1}
html[data-theme="dark"]{--ink:#f1f1f4;--muted:#b2b2bc;--bg:#141417;--blue:#a9c9ee;background:#141417}
[data-theme="dark"] body{background:#141417;color:#f1f1f4}
[data-theme="dark"] nav{background:#17171beb;border-color:#34343c}
[data-theme="dark"] .theme-toggle{color:#e0e0e8;border-color:#50505d}
[data-theme="dark"] .theme-toggle:hover{background:#303038}
[data-theme="dark"] :is(.hero,.about,.closing,.scroll-story){background:#19191e}
[data-theme="dark"] .scene{background:radial-gradient(ellipse at 50% 75%,rgba(90,90,110,var(--glow,.2)),transparent 60%),#19191e}
[data-theme="dark"] :is(.card,.work-card,.work-entry){background:#222228;border-color:#3b3b45}
[data-theme="dark"] :is(.storycopy p,.profile-description,.work-card p,.work-summary,.work-duties ul,.detail p,.detail li,.aboutcopy p,.card p){color:#bcbcc6}
[data-theme="dark"] :is(.eyebrow,.category,.profile-name span,.mail-hint,.work-back,.work-card-meta,.work-card-bottom,.work-entry-top,.work-entry-company,.work-count,.work-archive-header p,.work-index-sub,.work-index time,.journey-range,.journey-footer,.milestone-date,.milestone-kind,.milestone p){color:#a8a8b5}
[data-theme="dark"] :is(.textlink,.card .read,.work-all,.profile-email,.work-card-bottom span,.journey-label,.work-index-title){color:#dedee7}
[data-theme="dark"] .primary{background:#eeeef3;color:#202026}
[data-theme="dark"] :is(.work-tags span,.notice){background:#34343f;color:#c6c6d1}
[data-theme="dark"] :is(.work-duties,footer,.aboutcopy li){border-color:#3b3b46}
[data-theme="dark"] .work-index a[data-project]{color:#b3b3c1}
[data-theme="dark"] :is(.work-index a[data-project]:hover,.work-index a[aria-current="location"],.work-index a[aria-current="location"] time){color:#fff}
[data-theme="dark"] .work-index li{border-left-color:#50505d}
[data-theme="dark"] .work-index li:last-child{border-left-color:transparent}
[data-theme="dark"] .work-dot{background:#141417;border-color:#aaaab8}
[data-theme="dark"] .work-index a[aria-current="location"] .work-dot{background:#eeeef5;border-color:#eeeef5;box-shadow:0 0 0 4px #383843}
[data-theme="dark"] .milestone-node:before{background:#51515e}
[data-theme="dark"] .milestone-node:after{background:#19191e;border-color:#aaaab8}
[data-theme="dark"] .milestone.reached .milestone-node:before{background:#aaaab8}
[data-theme="dark"] .milestone.reached .milestone-node:after{background:#dddde6;border-color:#dddde6}
[data-theme="dark"] .milestone.current .milestone-node:after{box-shadow:0 0 0 5px #3e3e4b}
[data-theme="dark"] .journey-controls button{background:#292931;border-color:#565661;color:#e5e5ef}
[data-theme="dark"] .storyprogress span{background:#3b3b47}
[data-theme="dark"] .storyprogress i{background:#c5c5d1}
[data-theme="dark"] :is(.art,.card.featured .art){background:#2a2a33}
[data-theme="dark"] :is(.metricheader,.barrow,.metricnote,.codeart,.codeart b,.layerart div){color:#bebecd}
[data-theme="dark"] .layerart div{background:#34343f;border-color:#555563}
[data-theme="dark"] .track{background:#454551}[data-theme="dark"] .bar{background:#b1b1c4}
[data-theme="dark"] .skills span{border-color:#555561;color:#c6c6d3}
@media(max-width:700px){.navlinks{gap:14px}.theme-toggle{font-size:12px;padding:6px 9px}.navin{padding:0 16px}}
@media(max-width:760px){[data-theme="dark"] .work-index li,[data-theme="dark"] .work-index li:last-child{border-top-color:#50505d}}
/* Remove this file and rebuild to undo these visual accents. */
.openstack-accent{color:#ac666b}
[data-theme="dark"] .openstack-accent{color:#c48b90}
html:not([data-theme="dark"]) .hero{background:#fff}
html:not([data-theme="dark"]) .scroll-story{border-top:1px solid #eeeeF2;border-bottom:1px solid #eeeef2}
html:not([data-theme="dark"]) #projects{background:#f4f4f6}
html:not([data-theme="dark"]) .about{background:#fdfdfd;border-top:1px solid #e9e9ee}
html:not([data-theme="dark"]) .closing{background:#f8f8fa;border-top:1px solid #efeff3}
/* Fixed contents, including each dated milestone in newest-first order. */
nav.page-wave{position:fixed;left:22px;top:50%;transform:translateY(-50%);width:212px;height:clamp(420px,72vh,640px);z-index:12;background:transparent!important;border:0!important;backdrop-filter:none;pointer-events:none}
.page-wave-ticks{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;width:34px;pointer-events:none}.page-wave-tick{height:2px;width:6px;display:block;background:var(--ink,#1d1d1f);opacity:.12}
.page-wave-links{position:absolute;inset:0;pointer-events:none}.page-wave-link{position:absolute;left:-8px;top:var(--position);width:220px;height:44px;transform:translateY(-50%);display:flex;align-items:center;border-radius:5px;cursor:pointer;pointer-events:auto;text-decoration:none}
.page-wave-label{display:block;margin-left:48px;max-width:166px;opacity:0;transition:opacity .2s,transform .2s;line-height:1.45;color:var(--muted,#74747b)}.page-wave-date{display:block;font-size:9px;font-variant-numeric:tabular-nums;letter-spacing:.25px;margin-bottom:3px}.page-wave-title{display:block;font-size:11px;word-break:keep-all;line-height:1.4}.page-wave-link.is-current .page-wave-label{opacity:1;transform:translateX(4px);color:var(--ink,#1d1d1f)}.page-wave-link.is-current .page-wave-title{font-weight:650}.page-wave-link:hover .page-wave-label,.page-wave-link:focus-visible .page-wave-label{opacity:1}.page-wave-link:focus-visible{outline:2px solid #888893;outline-offset:3px}
@media(min-width:701px) and (max-width:1700px){.page-toc-enabled .wrap,.page-toc-enabled .navin{padding-left:240px}.page-toc-enabled .storycopy{left:240px}.page-toc-enabled .journey{left:240px;right:40px}}
@media(max-width:1050px) and (min-width:701px){nav.page-wave{left:12px;width:168px}.page-wave-link{width:175px}.page-wave-label{margin-left:40px;max-width:130px}.page-wave-title{font-size:10px}.page-toc-enabled .wrap,.page-toc-enabled .navin{padding-left:195px}.page-toc-enabled .storycopy,.page-toc-enabled .journey{left:195px}}
@media(max-height:720px){nav.page-wave{height:72vh}.page-wave-link{height:36px}.page-wave-date{font-size:8px;margin-bottom:1px}.page-wave-title{font-size:10px}}
@media(max-width:700px){nav.page-wave{left:8px;width:28px;height:clamp(220px,64vh,440px)}.page-wave-link{width:34px;height:28px}.page-wave-label{display:none}.hero,.section,.closing,.scroll-story{padding-left:24px}}
@media(prefers-reduced-motion:reduce){.page-wave *{transition:none!important}}

/* Only the current label is visible until the whole rail is hovered. */
nav.page-wave{pointer-events:auto}
.page-wave:hover .page-wave-label,.page-wave:focus-within .page-wave-label{opacity:.70}
.page-wave:hover .page-wave-link.is-current .page-wave-label,.page-wave:focus-within .page-wave-link.is-current .page-wave-label,.page-wave-link:hover .page-wave-label,.page-wave-link:focus-visible .page-wave-label{opacity:1}
/* Compact project gallery — image above, details below. */
#projects .work-selected{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch}
#projects .work-card{display:flex;flex-direction:column;padding:0;overflow:hidden;border-radius:22px;background:#fff;border:1px solid #e5e5e9;box-shadow:0 3px 12px #20202a03}
#projects .work-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px #20202a0a}
#projects .work-card-media{aspect-ratio:16/10;margin:0;background:linear-gradient(145deg,#e9eaed,#f3f3f5);border-bottom:1px solid #e5e5e9;display:flex;align-items:center;justify-content:center;overflow:hidden}
#projects .work-card-media img{width:100%;height:100%;object-fit:cover}
#projects .work-card-media svg{width:32px;height:32px;color:#b9bbc2;stroke-width:1;opacity:.65}
#projects .work-card-body{display:flex;flex-direction:column;flex:1;padding:23px 25px 24px}
#projects .work-card-meta{font-size:10px;line-height:1.6;letter-spacing:.65px;gap:8px}
#projects .work-card-number{font-size:12px}
#projects .work-card h3{font-size:23px;letter-spacing:-.7px;line-height:1.35;margin:12px 0}
#projects .work-card p{font-size:13px;line-height:1.8;margin:0 0 24px}
#projects .work-card-bottom{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:16px;font-size:11px}
#projects .work-card-bottom span{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:12px}
#projects .work-card-bottom i{font-style:normal;border:1px solid #dedee3;width:26px;height:26px;display:grid;place-items:center;border-radius:50%}
[data-theme="dark"] #projects .work-card{background:#222228;border-color:#34343c;box-shadow:none}
[data-theme="dark"] #projects .work-card-media{background:linear-gradient(145deg,#2e2e36,#27272f);border-color:#34343c}
[data-theme="dark"] #projects .work-card-media svg{color:#74747f}
[data-theme="dark"] #projects .work-card-bottom i{border-color:#42424b}
@media(max-width:1100px){#projects .work-layout{gap:30px;grid-template-columns:minmax(0,1fr) 190px}#projects .work-card-body{padding:20px}#projects .work-card h3{font-size:21px}}
@media(max-width:900px){#projects .work-layout{grid-template-columns:1fr}#projects .work-index{position:static}}
@media(max-width:540px){#projects .work-selected{grid-template-columns:1fr}#projects .work-card-media{aspect-ratio:16/9}#projects .work-card-body{padding:24px}}
@media(prefers-reduced-motion:reduce){#projects .work-card{transition:none}#projects .work-card:hover{transform:none}}
/* Independent timed carousel, with the existing typography and controls. */
.scroll-story.auto-story{height:auto!important;scroll-margin-top:80px}
.auto-story .scene{position:relative;top:0;height:auto;min-height:760px;padding:80px 0;overflow:visible}
.auto-story .scene-inner{height:auto;min-height:590px}
.auto-story .storycopy{position:relative;inset:auto;margin:0 24px;height:160px}
.auto-story .storycopy>div{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transform:translateY(8px)}
.auto-story .storycopy>div.active{opacity:1;visibility:visible;transform:none}
.auto-story .journey{position:relative;inset:auto;margin:50px 110px 0 150px}
.auto-story .timeline-window{height:auto;min-height:225px;margin-left:0}
.auto-story .timeline-track{display:grid!important;height:auto;gap:0}
.auto-story .milestone{position:relative!important;inset:auto!important;grid-area:1/1;border:0;padding:0}
.auto-story .milestone:before{display:none}
.auto-story .journey-pages{display:flex;justify-content:center;gap:9px;margin:26px 0 12px}
.auto-story .journey-pages button{position:relative;width:32px;height:24px;padding:0;border:0;background:transparent;cursor:pointer}
.auto-story .journey-pages button:before,.auto-story .journey-pages i{content:'';position:absolute;left:0;right:0;top:10px;height:3px;border-radius:3px;background:#d7d7dd}
.auto-story .journey-pages i{background:#777781;transform:scaleX(0);transform-origin:left}
.auto-story .journey-pages button.active:before{background:#bcbcc5}
.auto-story .journey-pages button:focus-visible{outline:2px solid #888;outline-offset:2px;border-radius:4px}
.auto-story .journey-controls{display:flex!important;gap:8px}
.auto-story .journey-controls button{width:36px;height:36px}
.auto-story .journey-pause{font-size:13px}
.auto-story .journey-footer{margin-left:0!important}
[data-theme="dark"] .auto-story .journey-pages button:before{background:#41414c}
[data-theme="dark"] .auto-story .journey-pages i{background:#c2c2cc}
@media(max-width:900px){.auto-story .journey{margin:42px 45px 0 65px}}
@media(max-width:700px){.auto-story .scene{min-height:0;padding:60px 0}.auto-story .scene-inner{min-height:0}.auto-story .journey{margin:35px 24px 0}.auto-story .timeline-window{min-height:240px}.auto-story .storycopy{height:175px}.auto-story .journey-footer>span{max-width:150px}}
@media(prefers-reduced-motion:reduce){.auto-story .storycopy>div,.auto-story .milestone{transition:none}}
[data-theme="dark"] .auto-story .journey-pages button.active:before{background:#9999a6}
@media(max-width:900px){#projects .work-layout{grid-template-columns:minmax(0,1fr)}#projects .work-selected,#projects .work-index{min-width:0}}
/* Horizontal dated rail: neighbouring milestones remain readable. */
.horizontal-story .scene-inner{width:min(100%,1320px)}
.horizontal-story .journey{margin:50px 40px 0 240px;left:auto!important;right:auto!important}
.horizontal-story .timeline-window{overflow:hidden;min-height:290px;padding:8px 0 10px}
.horizontal-story .timeline-track{display:flex!important;width:100%;transform:translateX(var(--offset,0px))!important;transition:transform 1s cubic-bezier(.45,0,.15,1)}
.horizontal-story .milestone{flex:0 0 calc(100% / var(--visible-count,3));grid-area:auto;padding:0 28px 0 8px;opacity:1;visibility:visible;transform:none;pointer-events:auto}
.horizontal-story .milestone-date{font-size:15px;margin-bottom:22px}
.horizontal-story .milestone-node{display:block;position:relative;height:1px;background:#d0d0d7;margin:0 -28px 26px 0}
.horizontal-story .milestone-node:before{display:none}
.horizontal-story .milestone-node:after{content:'';position:absolute;box-sizing:border-box;left:-1.5px;top:50%;width:12px;height:12px;transform:translateY(-50%);border:1px solid #9999a4;border-radius:50%;background:#fafafa;transition:background .3s,box-shadow .3s}
.horizontal-story .milestone.current .milestone-node:after{background:#777783;border-color:#777783;box-shadow:0 0 0 5px #e6e6ec}
.horizontal-story .milestone-kind{font-size:10px;letter-spacing:1.4px}
.horizontal-story .milestone h3{font-size:23px;line-height:1.4;letter-spacing:-.6px;min-height:65px;margin-bottom:18px}
.horizontal-story .milestone p{font-size:15px;line-height:1.85}
[data-theme="dark"] .horizontal-story .milestone-node{background:#50505d}
[data-theme="dark"] .horizontal-story .milestone.current .milestone-node:after{background:#dddde6;border-color:#dddde6;box-shadow:0 0 0 5px #3e3e4b}
@media(min-width:1701px){.horizontal-story .journey{margin-left:70px;margin-right:70px}}
@media(max-width:1050px){.horizontal-story .journey{margin-left:195px;margin-right:30px}}
@media(max-width:700px){.horizontal-story .journey{margin:35px 24px 0}.horizontal-story .milestone{padding-right:16px}.horizontal-story .milestone-node{margin-right:-16px}.horizontal-story .milestone h3{min-height:0;font-size:25px}.horizontal-story .timeline-window{min-height:270px}}
@media(prefers-reduced-motion:reduce){.horizontal-story .timeline-track{transition:none}}
/* Cross-fade the active progress segment without delaying its timer. */
.auto-story .journey-pages button:before{transition:background-color .55s ease-in-out}
.auto-story .journey-pages i{opacity:0;transition:opacity .55s ease-in-out}
.auto-story .journey-pages button.active i{opacity:1}
@media(prefers-reduced-motion:reduce){.auto-story .journey-pages button:before,.auto-story .journey-pages i{transition:none}}
/* The earliest milestone opens into a quiet origin statement. */
.horizontal-story .journey-origin{height:26px;margin:12px 8px 0;text-align:right;font-size:14px;letter-spacing:-.2px;color:var(--muted);opacity:0;transition:opacity .6s ease}
.horizontal-story.at-beginning .journey-origin{opacity:1}
.horizontal-story .milestone:last-child .milestone-node{width:calc(100% * var(--visible-count,3));background:linear-gradient(to right,#a0a0ab,transparent)}
[data-theme="dark"] .horizontal-story .milestone:last-child .milestone-node{background:linear-gradient(to right,#666673,transparent)}
@media(max-width:700px){.horizontal-story .journey-origin{font-size:12px}}
.horizontal-story .milestone .journey-origin{position:absolute;right:8px;bottom:12px;width:max-content;max-width:none;height:auto;margin:0;font-size:14px;font-weight:400;line-height:1.5;color:var(--muted);white-space:nowrap;pointer-events:none}
@media(max-width:700px){.horizontal-story .milestone .journey-origin{font-size:11px;bottom:5px;right:4px}}
/* Soften section labels as the wave travels to its next position. */
.page-wave-label{transition:opacity .45s ease,transform .55s cubic-bezier(.22,.61,.36,1),color .45s ease}
@media(prefers-reduced-motion:reduce){.page-wave-label{transition:none}}
/* Career duration, calculated in Korean standard time. */
.career-clock{margin:38px auto 0;padding:0 20px;text-align:center}.career-clock-label{font-size:14px;color:var(--muted);letter-spacing:-.25px;margin:0 0 10px}.career-clock-value{display:flex;justify-content:center;align-items:baseline;gap:20px;margin:0;color:var(--ink)}.career-clock-part{display:inline-flex;align-items:baseline;gap:5px}.career-clock-part b{font-size:30px;font-weight:550;letter-spacing:-1px;font-variant-numeric:tabular-nums}.career-clock-part small{font-size:13px;color:var(--muted)}.career-clock-since{font-size:11px;color:var(--muted);opacity:.75;margin:10px 0 0}.hero .career-clock+.scrollcue{padding-top:32px}
@media(max-width:700px){.career-clock{margin-top:30px;padding:0 8px}.career-clock-label{font-size:12px}.career-clock-value{gap:12px}.career-clock-part{gap:3px}.career-clock-part b{font-size:25px}.career-clock-part small{font-size:11px}}
/* Career time belongs to the introduction, ahead of the journey. */
.profile-copy .career-clock{text-align:left;padding:22px 0 0;margin:24px 0 0;border-top:1px solid #e3e3e8;max-width:550px}.profile-copy .career-clock-value{justify-content:flex-start}.profile-copy .career-clock-label{font-size:13px}.profile-copy .career-clock-part b{font-size:28px}[data-theme="dark"] .profile-copy .career-clock{border-color:#36363f}

/* Full-screen centered cover; profile follows on scroll. */
body .hero{min-height:calc(100svh - 68px);display:flex;align-items:center;justify-content:center;padding:48px 24px;box-sizing:border-box}
.page-toc-enabled .hero .wrap{width:100%;max-width:900px;padding:0 24px;margin:0 auto;box-sizing:border-box}
.hero .scrollcue{padding:30px 0 0}
@media(max-width:700px){body .hero{min-height:calc(100svh - 60px);padding:40px 28px}.page-toc-enabled .hero .wrap{padding:0}}
/* Profile supporting copy matches the email hint. */
.profile-copy .profile-description{font-size:12px;line-height:1.8}
.hero .wrap,#about .profile-grid{will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){.hero .wrap,#about .profile-grid{will-change:auto}}
/* Side-by-side sliding scenes; no profile scaling. */
.cover-profile-sequence.sliding{position:relative}.sliding .cover-profile-stage{position:sticky;top:68px;overflow:hidden}.sliding .cover-profile-stage>.hero,.sliding .cover-profile-stage>#about{position:absolute;top:0;left:0;width:100%;box-sizing:border-box;will-change:transform}.sliding .cover-profile-stage>.hero{height:100%}.sliding .cover-profile-stage>#about{min-height:100%;display:flex;align-items:center}.sliding #about>.wrap{width:100%;box-sizing:border-box}
/* Keep departing content clear of the fixed navigation rail. */
.sliding .cover-profile-stage{-webkit-mask-image:linear-gradient(to right,transparent 0,transparent 84px,#000 156px,#000 100%);mask-image:linear-gradient(to right,transparent 0,transparent 84px,#000 156px,#000 100%)}
@media(min-width:1051px) and (max-width:1700px){.page-toc-enabled .sliding #about>.profile-grid{width:calc(100% - 208px);max-width:832px;padding-left:32px;padding-right:32px;margin-left:auto;margin-right:auto}}
@media(min-width:900px) and (max-width:1050px){.page-toc-enabled .sliding #about>.profile-grid{width:calc(100% - 163px);max-width:877px;padding-left:32px;padding-right:32px;margin-left:auto;margin-right:auto}}
/* Keep one continuous backdrop underneath the masked moving scenes. */
.cover-profile-sequence.sliding{background:#fff}
[data-theme="dark"] .cover-profile-sequence.sliding{background:#19191e}
.sliding .cover-profile-stage>.hero,.sliding .cover-profile-stage>#about{background:transparent}
.profile-photo img{background:transparent;border-radius:0;-webkit-mask-image:linear-gradient(#000 0%,#000 86%,transparent 100%);mask-image:linear-gradient(#000 0%,#000 86%,transparent 100%)}
/* Compact introduction: portrait and personal details share one visual weight. */
#about .profile-copy>h2{display:none}
#about .profile-grid{grid-template-columns:300px minmax(0,1fr);gap:64px;align-items:center}
.page-toc-enabled .sliding #about>.profile-grid{width:calc(100% - 200px);max-width:920px;padding:0 32px;margin:0 auto}
#about .profile-photo{margin:0;width:100%;align-self:center}
#about .profile-photo img{width:100%;max-width:none;display:block}
#about .profile-copy>.eyebrow{font-size:10px;letter-spacing:.18em;margin-bottom:22px;display:block}
#about .profile-name{font-size:34px;line-height:1.2;margin:0 0 22px;letter-spacing:-.035em}
#about .profile-name span{font-size:14px;line-height:1.5;letter-spacing:0;margin-top:10px;display:block}
#about .profile-description{font-size:12px;line-height:1.85;margin:0;max-width:390px}
#about .career-clock{margin:25px 0 0;padding:22px 0 0}
#about .career-clock-label{font-size:12px;margin:0 0 15px}
#about .career-clock-value{margin:0;gap:15px;flex-wrap:wrap}
#about .career-clock-part b{font-size:28px}
#about .profile-contact{margin-top:28px;gap:16px;flex-wrap:wrap}
#about .profile-email{font-size:14px}
#about .profile-contact .primary{font-size:12px;padding:11px 17px}
#about .mail-hint{font-size:12px;margin-top:13px}
@media(max-width:1050px){#about .profile-grid{grid-template-columns:260px minmax(0,1fr);gap:38px}.page-toc-enabled .sliding #about>.profile-grid{width:calc(100% - 160px)}}
@media(max-width:899px){#about .profile-grid{grid-template-columns:220px minmax(0,1fr);gap:32px}#about .profile-name{font-size:30px}}
@media(max-width:650px){#about .profile-grid{grid-template-columns:1fr;gap:24px}#about .profile-photo{width:230px;margin:0 auto}#about .profile-copy{max-width:390px;margin:auto;width:100%}#about .profile-name{font-size:30px}}
/* Portrait frame matches the career divider. */
#about .profile-photo{border:1px solid #e3e3e8;border-radius:18px;overflow:hidden;box-sizing:border-box}
[data-theme="dark"] #about .profile-photo{border-color:#36363f}
/* Ground the portrait within its frame instead of fading into empty space. */
#about .profile-photo{border-radius:16px;background:linear-gradient(180deg,transparent 45%,rgba(128,128,140,.045) 100%);line-height:0}
#about .profile-photo img{-webkit-mask-image:none;mask-image:none;display:block;border-radius:0}
/* Personal name and direct contact hierarchy. */
#about .profile-copy{display:flex;flex-direction:column}
#about .profile-copy>.eyebrow{order:0}
#about .profile-name{order:1;margin-bottom:0}
#about .profile-name .name-ko{font-weight:600;letter-spacing:.22em;margin-right:14px}
#about .profile-name .name-en{font-size:12px;font-weight:400;letter-spacing:.02em;color:var(--muted,#888);white-space:nowrap;vertical-align:middle}
#about .profile-description{display:none}
#about .profile-contact{order:2;margin-top:24px}
#about .mail-hint{order:3}
#about .career-clock{order:4}
/* Give identity, contact and experience distinct breathing room. */
#about .profile-name .name-ko{letter-spacing:.25em;margin-right:20px}
#about .profile-name .name-en{letter-spacing:.05em}
#about .profile-name span{margin-top:18px;line-height:1.65;letter-spacing:.025em}
#about .profile-contact{margin-top:42px;gap:22px}
#about .mail-hint{margin-top:17px;line-height:1.7}
#about .career-clock{margin-top:34px;padding-top:28px}
#about .career-clock-label{margin-bottom:20px;line-height:1.7}
@media(max-width:650px){#about .profile-contact{margin-top:32px}#about .career-clock{margin-top:28px;padding-top:24px}}
/* Stable columns while the live experience counter settles and ticks. */
#about .career-clock-value{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}
#about .career-clock-part{display:inline-flex;align-items:baseline;gap:5px}
#about .career-clock-part b{font-size:25px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";min-width:2ch;text-align:center}
#about .career-clock-part small{font-size:10px}
@media(max-width:650px){#about .career-clock-value{gap:12px}#about .career-clock-part b{font-size:22px}}
/* One continuous rule connects the portrait and introduction. */
#about .profile-grid{position:relative}
#about .profile-grid:before{content:"";position:absolute;top:0;left:32px;right:32px;border-top:1px solid #e3e3e8}
[data-theme="dark"] #about .profile-grid:before{border-color:#36363f}
#about .profile-photo{align-self:stretch;display:flex;align-items:flex-end;border-top:0;border-right:0;border-radius:0 0 0 16px}
#about .profile-copy{padding-top:32px}
#about .profile-copy>.eyebrow{position:absolute;top:-27px;margin:0;line-height:16px}
@media(max-width:650px){#about .profile-grid:before{display:none}#about .profile-photo{border:1px solid #e3e3e8;border-radius:16px}[data-theme="dark"] #about .profile-photo{border-color:#36363f}#about .profile-copy{padding-top:0}#about .profile-copy>.eyebrow{position:static;margin-bottom:22px}}
/* Matching soft lower corners on the portrait. */
#about .profile-photo{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}
#about .profile-photo img{border-bottom-left-radius:15px;border-bottom-right-radius:15px}
/* Open-ended editorial rules rather than a rectangular frame. */
@media(min-width:651px){
#about .profile-grid:before{left:48px;right:32px;height:1px;border:0;background:linear-gradient(90deg,transparent 0%,#e3e3e8 9%,#e3e3e8 72%,transparent 100%)}
[data-theme="dark"] #about .profile-grid:before{border:0;background:linear-gradient(90deg,transparent 0%,#36363f 9%,#36363f 72%,transparent 100%)}
#about .profile-photo{position:relative;border:0;overflow:visible;background:none}
#about .profile-photo:before{content:"";position:absolute;left:-1px;top:28px;bottom:24px;width:1px;background:linear-gradient(180deg,transparent,#e3e3e8 18%,#e3e3e8 75%,transparent);pointer-events:none}
[data-theme="dark"] #about .profile-photo:before{background:linear-gradient(180deg,transparent,#36363f 18%,#36363f 75%,transparent)}
#about .profile-photo img{border-radius:0 0 16px 16px}
}
/* A quieter portrait and lighter framing. */
@media(min-width:900px){#about .profile-grid{grid-template-columns:264px minmax(0,1fr);gap:68px}#about .profile-photo{align-self:center}#about .profile-copy{padding-top:22px}}
#about .profile-grid:before{opacity:.5}
#about .profile-photo:before{opacity:.35}
#about .profile-name .name-ko{font-weight:500}
/* Let the section label carry a single quiet rule; leave the portrait open. */
@media(min-width:651px){#about .profile-grid:before,#about .profile-photo:before{display:none}#about .profile-copy>.eyebrow{position:static;display:flex;align-items:center;gap:20px;margin:0 0 28px;white-space:nowrap}#about .profile-copy>.eyebrow:after{content:"";height:1px;flex:1;min-width:30px;background:linear-gradient(90deg,#d8d8df,transparent)}[data-theme="dark"] #about .profile-copy>.eyebrow:after{background:linear-gradient(90deg,#45454e,transparent)}#about .profile-copy{padding-top:0}}
/* Keep the next project heading below the timeline landing viewport. */
@media(min-width:900px){.scroll-story.auto-story,.scroll-story.auto-story>.scene{min-height:calc(100svh - 68px);box-sizing:border-box}}
/* Compact, continuously updating hours:minutes:seconds. */
.career-clock-time{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}.career-clock-colon{font-size:20px;font-weight:400;color:var(--muted);transform:translateY(-1px)}
/* Mobile reading layout: keep text and controls inside the available width. */
@media(max-width:899px){
  .wrap,.scene-inner,#about .profile-copy,.work-layout,.work-selected{min-width:0}
  #about .profile-grid{width:100%;max-width:760px}
}
@media(max-width:700px){
  .navin{padding:0 16px;gap:12px}.navlinks{gap:12px;font-size:12px}.theme-toggle{font-size:11px;padding:6px 10px}
  body .hero{padding:48px 26px 48px 38px}.hero h1{font-size:clamp(30px,8.6vw,44px);letter-spacing:-.055em;line-height:1.3;overflow-wrap:anywhere}.hero .eyebrow{font-size:10px;letter-spacing:.14em}.hero .intro{padding:0;font-size:15px;line-height:1.8}.hero .actions{flex-wrap:wrap;gap:16px}
  #about{padding:60px 0}#about .profile-grid{grid-template-columns:minmax(0,1fr);padding:0 22px 0 38px;gap:30px}
  #about .profile-photo{width:min(58vw,230px);max-width:230px;align-self:center;margin:0 auto}
  #about .profile-copy{width:100%;max-width:440px;margin:auto;padding:0}
  #about .profile-copy>.eyebrow{position:static;margin:0 0 22px;font-size:10px}
  #about .profile-name{font-size:28px}#about .profile-name span{font-size:13px;overflow-wrap:anywhere}
  #about .profile-name .name-ko{margin-right:12px}#about .profile-name .name-en{font-size:11px}
  #about .profile-contact{flex-direction:row;align-items:center;gap:14px;margin-top:28px}#about .profile-email{font-size:13px;overflow-wrap:anywhere}
  #about .mail-hint{font-size:11px;margin-top:14px}#about .career-clock{margin-top:26px;padding-top:22px}
  #about .career-clock-value{gap:10px}#about .career-clock-part{gap:3px}#about .career-clock-part b{font-size:clamp(18px,5.2vw,24px)}.career-clock-time{gap:3px}.career-clock-colon{font-size:18px}
  .horizontal-story.auto-story .scene{height:auto;min-height:calc(100svh - 60px);padding:52px 0}
  .horizontal-story .scene-inner{height:auto;min-height:0}
  .auto-story .storycopy{display:grid;height:auto;margin:0 22px 0 38px}
  .auto-story .storycopy>div{position:relative;inset:auto;grid-area:1/1}
  .auto-story .storycopy h2{font-size:clamp(25px,7vw,32px);overflow-wrap:anywhere;letter-spacing:-.04em}.auto-story .storycopy p{font-size:13px}
  .horizontal-story .journey{margin:36px 22px 0 38px}
  .horizontal-story .timeline-window{height:auto;min-height:0;padding:8px 0 20px}
  .horizontal-story .milestone{padding-right:16px}.horizontal-story .milestone h3{font-size:23px;overflow-wrap:anywhere}.horizontal-story .milestone p{font-size:14px;overflow-wrap:anywhere}
  .auto-story .journey-pages{gap:6px;margin-top:18px}.auto-story .journey-pages button{flex:1;max-width:36px;min-width:0;height:32px}
  .journey-footer{gap:12px;flex-wrap:wrap}.auto-story .journey-controls button{width:42px;height:42px}.journey-footer>span{flex:1;min-width:110px}
  .work-selected{grid-template-columns:minmax(0,1fr)}.work-card{min-width:0}.work-card h3,.work-card p,.work-card-meta{overflow-wrap:anywhere}
  .sectionhead{overflow-wrap:anywhere}.sectionhead h2{font-size:32px}.work-entry{padding:24px 18px}.work-entry-top{flex-wrap:wrap;gap:8px}
  footer{flex-wrap:wrap}.closing h2{overflow-wrap:anywhere}
}
@media(max-width:360px){.navlinks{gap:8px}.brand{font-size:15px}.theme-toggle{padding:5px 8px}#about .career-clock-value{gap:8px}#about .career-clock-part b{font-size:18px}#about .career-clock-part small{font-size:9px}}
/* Quiet identity and contact hierarchy — 2026-10-15. */
#about .profile-contact .primary,#about .mail-hint{display:none}
#about .profile-name .name-en{vertical-align:baseline}
#about .profile-name span{margin-top:12px}
#about .profile-contact{margin-top:32px}
#about .profile-email{display:inline-flex;align-items:center;gap:14px;text-decoration:none;border-bottom:1px solid rgba(128,128,140,.3);padding:7px 0;font-size:14px}
#about .profile-email:after{content:'↗';font-size:15px;color:var(--muted);transition:transform .2s}
#about .profile-email:hover:after{transform:translate(2px,-2px)}
#about .career-clock{margin-top:32px;padding-top:22px}
#about .career-clock-label{font-size:11px;margin-bottom:14px}
#about .career-clock-time .career-clock-part b{font-size:19px;font-weight:400;color:var(--muted)}
#about .career-clock-colon{font-size:16px;opacity:.7}
@media(min-width:900px){#about .profile-grid{grid-template-columns:240px minmax(0,1fr);gap:64px;align-items:end}#about .profile-photo{align-self:end}#about .profile-copy{padding-top:0}#about .profile-copy>.eyebrow{margin-bottom:25px}}
@media(max-width:700px){#about .profile-contact{margin-top:24px}#about .career-clock{margin-top:26px}#about .career-clock-time .career-clock-part b{font-size:18px}}
/* Subtle technology pills between contact and career duration. */
#about .profile-tech-stack{order:3;display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:22px 0 0}
#about .profile-tech-stack li{font-size:11px;line-height:1.5;font-weight:400;letter-spacing:.015em;padding:6px 13px;border-radius:999px;background:rgba(110,110,125,.07);color:var(--muted);border:1px solid rgba(110,110,125,.05)}
[data-theme="dark"] #about .profile-tech-stack li{background:rgba(190,190,205,.065);border-color:rgba(190,190,205,.035)}
#about .career-clock{margin-top:28px}
@media(max-width:700px){#about .profile-tech-stack{gap:7px;margin-top:20px}#about .profile-tech-stack li{font-size:10px;padding:6px 11px}}
/* Give the portrait and name a clearer visual priority. */
#about .profile-name{font-size:40px;line-height:1.25}
#about .profile-name .name-en{font-size:12px}
#about .profile-name>span{font-size:14px;margin-top:14px;letter-spacing:.015em}
#about .profile-tech-stack{order:1;margin-top:19px}
#about .profile-contact{order:2;margin-top:30px}
#about .profile-tech-stack li:first-child{background:rgba(95,129,160,.12);border-color:rgba(95,129,160,.12);color:#536e87}
[data-theme="dark"] #about .profile-tech-stack li:first-child{background:rgba(130,165,195,.12);border-color:rgba(130,165,195,.1);color:#b8cadb}
@media(min-width:900px){#about .profile-grid{grid-template-columns:274px minmax(0,1fr);gap:60px}#about .profile-photo{align-self:end}}
@media(max-width:700px){#about .profile-name{font-size:34px}#about .profile-photo{width:min(64vw,250px);max-width:250px}#about .profile-name>span{font-size:13px}#about .profile-contact{margin-top:26px}}
/* Equally subtle colors across the technical specialties. */
#about .profile-tech-stack li:nth-child(2){background:rgba(139,118,167,.1);border-color:rgba(139,118,167,.12);color:#79628e}
#about .profile-tech-stack li:nth-child(3){background:rgba(81,145,134,.1);border-color:rgba(81,145,134,.12);color:#477c72}
#about .profile-tech-stack li:nth-child(4){background:rgba(100,128,155,.1);border-color:rgba(100,128,155,.12);color:#58758d}
[data-theme="dark"] #about .profile-tech-stack li:nth-child(2){background:rgba(166,144,194,.12);border-color:rgba(166,144,194,.1);color:#c9b9db}
[data-theme="dark"] #about .profile-tech-stack li:nth-child(3){background:rgba(123,173,160,.12);border-color:rgba(123,173,160,.1);color:#b0cfc5}
[data-theme="dark"] #about .profile-tech-stack li:nth-child(4){background:rgba(141,158,186,.12);border-color:rgba(141,158,186,.1);color:#bac6dc}
/* Keep only the career section divider. */
#about .profile-email{border-bottom:0;text-decoration:none}
#about .profile-detail-link{order:5;align-self:flex-end;display:inline-flex;align-items:center;gap:13px;margin-top:24px;font-size:12px;color:var(--muted);padding:8px 0}
#about .profile-detail-link:hover{color:var(--ink)}
.intro-flight{position:fixed;inset:0;z-index:100;pointer-events:none;overflow:hidden}.intro-flight i{position:absolute;left:-100%;width:90%;height:1px;background:linear-gradient(90deg,transparent,rgba(145,165,190,.4) 65%,#c6d4e5);box-shadow:0 0 12px rgba(145,165,190,.25);transform:translateX(0)}.intro-flight.running i{animation:intro-line-flight .85s cubic-bezier(.4,0,.15,1) both}.intro-flight.running i+i{animation-delay:.09s}@keyframes intro-line-flight{to{transform:translateX(235%)}}
.intro-detail-route .cover-profile-sequence,.intro-detail-route .page-wave-nav,.intro-detail-route .page-toc,.intro-detail-route body>main,.intro-detail-route body>footer{display:none!important}
.intro-detail-page{max-width:1040px;margin:auto;padding:64px 48px 80px;animation:intro-detail-arrive .55s ease both}.intro-detail-back{font-size:13px;color:var(--muted)}.intro-detail-page header{margin:70px 0 68px}.intro-detail-page h1{font-size:clamp(32px,4.4vw,54px);letter-spacing:-.045em;line-height:1.3}.intro-detail-lead{font-size:17px;line-height:1.9;color:var(--muted)}.intro-detail-sections{display:grid;gap:0}.intro-detail-sections section{padding:34px 0;border-top:1px solid rgba(130,130,145,.2)}.intro-detail-sections section>span{font-size:10px;letter-spacing:.15em;color:var(--muted)}.intro-detail-page h2{font-size:25px;letter-spacing:-.035em;margin:12px 0 18px}.intro-detail-sections p{max-width:700px;font-size:16px;line-height:1.9;color:var(--muted)}.intro-detail-page .profile-tech-stack{display:flex;gap:8px;flex-wrap:wrap}.intro-detail-page .profile-tech-stack span{padding:5px 12px;border-radius:30px;background:rgba(140,155,180,.1);font-size:12px;color:var(--muted)}.intro-detail-page footer{margin-top:34px;padding:32px 0;align-items:center;gap:24px}.intro-detail-page footer a{font-size:14px;overflow-wrap:anywhere}@keyframes intro-detail-arrive{from{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:700px){.intro-detail-page{padding:34px 24px 54px}.intro-detail-page header{margin:42px 0}.intro-detail-page h1{font-size:32px}.intro-detail-lead,.intro-detail-sections p{font-size:15px}.intro-detail-page footer{flex-direction:column;align-items:flex-start}#about .profile-detail-link{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.intro-detail-page,.intro-flight.running i{animation:none}}

.intro-detail-route .page-wave{display:none!important}
/* Center the detail action on the right-hand edge of the profile. */
@media(min-width:1100px){#about .profile-grid{padding-right:140px!important}#about .profile-detail-link{position:absolute;right:0;top:50%;transform:translateY(-50%);margin:0;display:flex;flex-direction:column;gap:13px;font-size:12px;letter-spacing:.015em;padding:18px 10px;text-align:center}#about .profile-detail-link span{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(140,150,170,.23);border-radius:50%;background:rgba(140,150,170,.055);font-size:20px;transition:background .25s,transform .25s}#about .profile-detail-link:hover span{background:rgba(140,150,170,.13);transform:translateX(3px)}}
@media(min-width:701px) and (max-width:1099px){#about .profile-detail-link{position:absolute;right:24px;top:50%;transform:translateY(-50%);margin:0;padding:10px 14px;background:var(--bg);border:1px solid rgba(140,150,170,.18);border-radius:24px}#about .profile-grid{padding-right:150px!important}}
@media(max-width:700px){#about .profile-detail-link{align-self:flex-end;border:1px solid rgba(140,150,170,.2);border-radius:24px;padding:10px 16px}}
.cover-profile-sequence{transition:opacity .5s ease,filter .5s ease}.intro-leaving .cover-profile-sequence{opacity:0;filter:blur(3px)}
.intro-detail-page{animation:intro-soft-arrive .85s cubic-bezier(.2,.65,.2,1) both}
@keyframes intro-soft-arrive{from{opacity:0;transform:translateY(18px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.cover-profile-sequence{transition:none}.intro-detail-page{animation:none}}
/* An open curved cue, with a generous click target. */
#about .profile-contact{row-gap:9px}#about .profile-invitation{flex:0 0 100%;margin:0;font-size:12px;line-height:1.7;color:var(--muted)}
#about .profile-detail-link{border:0;background:transparent;min-width:105px;min-height:150px;justify-content:center;gap:0;touch-action:manipulation;z-index:2}
#about .profile-detail-link .detail-action-label{display:block;width:auto;height:auto;border:0;border-radius:0;background:none;font-size:12px;white-space:nowrap;transform:none}
#about .profile-detail-link:hover .detail-action-label{background:none;transform:none}
.detail-curve{width:62px;height:132px;overflow:visible;transition:transform .35s ease}.detail-curve path{stroke:currentColor;stroke-width:1.2;opacity:.32;vector-effect:non-scaling-stroke}.detail-curve circle{fill:currentColor;opacity:.9}.detail-curve .detail-arrow-tip{opacity:.8}.profile-detail-link:hover .detail-curve{transform:translateX(4px)}
@media(max-width:700px){#about .profile-detail-link{flex-direction:row;min-height:44px;gap:12px;padding:0}.detail-curve{width:28px;height:60px}}

/* Do not let focus scroll the horizontal stage independently of page scroll. */
.sliding .cover-profile-stage{overflow:clip}
/* Quiet open curve, aligned with the surrounding typography. */
#about .profile-detail-link{flex-direction:row;align-items:center;justify-content:flex-end;gap:9px;min-height:100px;min-width:118px;padding:10px 0}
#about .profile-detail-link .detail-action-label{font-size:11px;letter-spacing:0;color:var(--muted)}
#about .profile-detail-link .detail-curve{width:27px;height:96px;flex-shrink:0}
#about .profile-detail-link .detail-curve .detail-arrow-tip{display:none}
#about .profile-detail-link .detail-curve path{stroke-width:1;opacity:.25}
#about .profile-detail-link .detail-curve circle{r:2.4;opacity:.65}
#about .profile-detail-link:hover .detail-curve{transform:translateX(2px)}
@media(max-width:700px){#about .profile-detail-link{min-height:60px;gap:8px}#about .profile-detail-link .detail-curve{height:60px;width:22px}}
/* Detail action echoes the page index's quiet wave of ticks. */
#about .profile-detail-link{gap:18px;min-height:100px;min-width:128px}
#about .profile-detail-link .detail-action-label{font-size:12px;font-weight:500;color:var(--muted)}
#about .profile-detail-link .detail-wave{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:5px;width:38px;height:84px;border:0;border-radius:0;background:none;transform:none;flex-shrink:0}
#about .detail-wave i{display:block;width:var(--tick-width);height:1.5px;background:currentColor;opacity:var(--tick-opacity);transform-origin:right;transition:transform .3s ease,opacity .3s ease}
#about .profile-detail-link:hover .detail-wave{background:none;transform:none}
#about .profile-detail-link:hover .detail-wave i{transform:scaleX(1.12)}
#about .profile-detail-link:hover .detail-action-label{color:var(--ink)}
@media(max-width:700px){#about .profile-detail-link{min-height:70px;gap:14px}#about .profile-detail-link .detail-wave{height:66px;gap:4px;width:32px}#about .detail-wave i{width:calc(var(--tick-width)*.8);height:1px}}
@media(prefers-reduced-motion:reduce){#about .detail-wave i{transition:none}}
/* A plain, readable detail link. */
#about .profile-detail-link{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:12px;min-width:0;min-height:44px;padding:10px 4px;border:0;border-radius:0;background:none;color:var(--muted)}
#about .profile-detail-link .detail-wave{display:none}
#about .profile-detail-link .detail-action-label{font-size:12px;font-weight:400;letter-spacing:0}
#about .profile-detail-link:after{content:'→';font-size:18px;line-height:1;transition:transform .25s ease}
#about .profile-detail-link:hover{color:var(--ink)}
#about .profile-detail-link:hover:after{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){#about .profile-detail-link:after{transition:none}}
/* Keep the return link available while reading the introduction. */
.intro-detail-page .intro-detail-back{position:sticky;top:80px;z-index:4;display:table;width:max-content;max-width:100%;padding:10px 15px;margin-left:-15px;border-radius:22px;background:rgba(245,245,247,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);line-height:1.5}
[data-theme="dark"] .intro-detail-page .intro-detail-back{background:rgba(20,20,23,.92)}
@media(max-width:700px){.intro-detail-page .intro-detail-back{top:70px;font-size:12px}}
/* Separate technical specialties from the contact invitation. */
#about .profile-contact{margin-top:46px}
@media(max-width:700px){#about .profile-contact{margin-top:38px}}
/* Center the text block against the portrait instead of aligning their bottoms. */
@media(min-width:701px){#about .profile-grid{align-items:center}#about .profile-photo,#about .profile-copy{align-self:center}}
/* Shared same-origin page transitions, including browser back/forward. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:portfolio-page-out .28s ease-in both}
::view-transition-new(root){animation:portfolio-page-in .42s cubic-bezier(.2,.65,.2,1) both}
@keyframes portfolio-page-out{to{opacity:0;transform:translateY(-4px)}}
@keyframes portfolio-page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
html{scroll-behavior:smooth}
body.portfolio-navigating{opacity:0;transition:opacity .22s ease}
@supports not (view-transition-name:root){body{animation:portfolio-page-in .4s ease both}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}body.portfolio-navigating{transition:none}html{scroll-behavior:auto}}
/* The same live business card moves between the profile and introduction. */
#about .profile-grid{view-transition-name:business-card}
::view-transition-group(business-card){animation-duration:.85s;animation-timing-function:cubic-bezier(.22,.68,.15,1)}
::view-transition-old(business-card),::view-transition-new(business-card){height:100%;mix-blend-mode:normal;animation-duration:.85s}
.intro-leaving .cover-profile-sequence{opacity:1;filter:none}
.intro-detail-page{animation:none}
.intro-detail-page #about{display:block!important;background:transparent;padding:42px 0 36px;min-height:0;position:relative;inset:auto;width:100%}
.intro-detail-page #about .profile-grid{display:grid;width:100%!important;max-width:none;margin:0;padding:0!important;grid-template-columns:210px minmax(0,1fr);gap:56px;align-items:center}
.intro-detail-page #about .profile-photo{width:210px;max-width:none;align-self:center;margin:0}
.intro-detail-page #about .profile-copy{max-width:none;width:100%;padding:0;align-self:center}
.intro-detail-page #about .profile-detail-link{display:none}
.intro-detail-page #about .profile-copy>.eyebrow{margin-bottom:20px}
.intro-detail-page #about .profile-name{font-size:36px}
.intro-detail-page #about .profile-contact{margin-top:28px}
.intro-detail-page #about .career-clock{margin-top:22px;padding-top:18px;max-width:none}
.intro-detail-page #about .career-clock-label{margin-bottom:10px}
.intro-detail-page header{margin:48px 0 52px;padding-top:42px;border-top:1px solid rgba(130,130,145,.2)}
.intro-detail-page header h1{font-size:clamp(29px,3.5vw,42px)}
@media(max-width:700px){.intro-detail-page #about{padding:34px 0 20px}.intro-detail-page #about .profile-grid{grid-template-columns:120px minmax(0,1fr);gap:22px}.intro-detail-page #about .profile-photo{width:120px;align-self:start}.intro-detail-page #about .profile-name{font-size:26px}.intro-detail-page #about .profile-name .name-en{display:block;margin-top:8px}.intro-detail-page #about .profile-name>span{font-size:12px}.intro-detail-page #about .profile-copy>.eyebrow{font-size:9px}.intro-detail-page #about .profile-tech-stack{gap:5px}.intro-detail-page #about .profile-tech-stack li{padding:4px 8px;font-size:9px}.intro-detail-page #about .profile-contact{margin-top:22px}.intro-detail-page #about .profile-email{font-size:12px}.intro-detail-page #about .profile-invitation{font-size:11px}.intro-detail-page header{margin-top:30px}}
@media(max-width:380px){.intro-detail-page #about .profile-grid{grid-template-columns:1fr}.intro-detail-page #about .profile-photo{width:140px;margin:auto}}
@media(prefers-reduced-motion:reduce){::view-transition-group(business-card),::view-transition-old(business-card),::view-transition-new(business-card){animation-duration:0s}}
/* Move portrait and text separately, without stretching a screenshot of the card. */
#about .profile-grid{view-transition-name:none}
#about .profile-photo{view-transition-name:card-portrait}
#about .profile-copy{view-transition-name:card-copy}
::view-transition{pointer-events:none}
::view-transition-group(card-portrait),::view-transition-group(card-copy){animation-duration:.6s;animation-timing-function:cubic-bezier(.22,.7,.2,1)}
::view-transition-old(card-portrait),::view-transition-new(card-portrait),::view-transition-old(card-copy),::view-transition-new(card-copy){height:auto;mix-blend-mode:normal;animation-duration:.35s}
.intro-detail-page #about .profile-grid{grid-template-columns:274px minmax(0,1fr);gap:56px}
.intro-detail-page #about .profile-photo{width:274px}
.intro-detail-page #about .profile-name{font-size:40px}
@media(max-width:700px){.intro-detail-page #about .profile-grid{grid-template-columns:1fr;gap:24px}.intro-detail-page #about .profile-photo{width:min(64vw,250px);margin:auto}.intro-detail-page #about .profile-name{font-size:34px}}
@media(prefers-reduced-motion:reduce){::view-transition-group(card-portrait),::view-transition-group(card-copy){animation-duration:0s}}
/* Compact destination with a gentle scale-and-position landing. */
.intro-detail-page #about .profile-grid{grid-template-columns:230px minmax(0,1fr);gap:52px}
.intro-detail-page #about .profile-photo{width:230px}
.intro-detail-page #about .profile-copy{zoom:.92}
.intro-detail-page #about .profile-name{font-size:38px}
@media(max-width:700px){.intro-detail-page #about .profile-grid{grid-template-columns:1fr;gap:24px}.intro-detail-page #about .profile-photo{width:min(56vw,220px)}.intro-detail-page #about .profile-name{font-size:34px}}
/* Keep the detail action at its settled position during route fades. */
#about .profile-photo,#about .profile-copy{view-transition-name:none}
#about .profile-detail-link{transition:opacity .16s ease}
.intro-routing #about .profile-detail-link{opacity:0;pointer-events:none;transition:none}
/* Dedicated return-navigation column beside the introduction. */
@media(min-width:1000px){
 .intro-detail-page{display:grid;grid-template-columns:180px minmax(0,944px);column-gap:48px;max-width:1220px;padding:64px 24px 80px}
 .intro-detail-page>.intro-detail-back{grid-column:1;grid-row:1 / span 4;align-self:start;justify-self:start;margin:0;top:88px}
 .intro-detail-page>#about,.intro-detail-page>header,.intro-detail-page>.intro-detail-sections,.intro-detail-page>footer{grid-column:2;min-width:0}
 .intro-detail-page>#about{grid-row:1}
 .intro-detail-page>header{grid-row:2}
 .intro-detail-page>.intro-detail-sections{grid-row:3}
 .intro-detail-page>footer{grid-row:4}
}
/* Airy, opposing document galleries. */
.growth-gallery{padding:clamp(100px,10vw,170px) 0 clamp(110px,12vw,190px);overflow:hidden;color:var(--ink);background:var(--bg)}
.growth-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:68px}.growth-heading h2{font-size:clamp(32px,4vw,48px);letter-spacing:-1.8px;line-height:1.25;margin:18px 0}.growth-heading p{font-size:16px;color:var(--muted);margin:0}.growth-toggle{flex:none;border:1px solid color-mix(in srgb,var(--muted) 25%,transparent);background:transparent;color:var(--muted);border-radius:22px;font-size:12px;padding:8px 15px;cursor:pointer}.growth-toggle span{margin-left:10px}
.growth-viewport{display:grid;gap:56px;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}.growth-row{width:100%;overflow:hidden}.growth-track{display:flex;width:max-content;animation:growth-drift 85s linear infinite;animation-play-state:paused;will-change:transform}.growth-row:nth-child(2) .growth-track{animation-direction:reverse;animation-duration:96s}.growth-gallery.is-visible:not(.is-paused) .growth-track{animation-play-state:running}.growth-viewport:hover .growth-track,.growth-viewport:focus-within .growth-track{animation-play-state:paused!important}.growth-group{display:flex;gap:36px;padding-right:36px;flex-shrink:0}.growth-card{display:block;width:clamp(250px,23vw,340px);flex:none}.growth-paper{height:clamp(270px,27vw,370px);position:relative;display:grid;place-items:center;padding:25px;background:color-mix(in srgb,var(--muted) 7%,var(--bg));border:1px solid color-mix(in srgb,var(--muted) 15%,transparent);border-radius:8px;overflow:hidden;transition:background .3s,border-color .3s}.growth-paper img{width:100%;height:100%;object-fit:contain;position:absolute;inset:0;padding:25px;filter:saturate(.8);transition:filter .35s,transform .35s}.growth-card:hover img{filter:saturate(1);transform:scale(1.025)}.growth-card:hover .growth-paper{border-color:color-mix(in srgb,var(--muted) 45%,transparent)}.growth-paper-fallback{max-width:200px;text-align:center;font-size:20px;line-height:1.6;color:var(--muted)}.growth-paper.loaded .growth-paper-fallback{visibility:hidden}.growth-caption{padding:19px 3px 0}.growth-caption small{font-size:10px;letter-spacing:1.6px;color:var(--muted)}.growth-caption h3{font-size:15px;font-weight:500;line-height:1.5;margin:7px 0 0;letter-spacing:-.2px}.growth-gallery+.closing{padding-top:100px}
@keyframes growth-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:700px){.growth-heading{align-items:flex-start;margin-bottom:38px}.growth-heading p{font-size:14px}.growth-toggle{font-size:11px;padding:7px 11px}.growth-heading .eyebrow{font-size:10px;letter-spacing:1.5px}.growth-viewport{gap:34px;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}.growth-group{gap:20px;padding-right:20px}.growth-card{width:240px}.growth-paper{height:280px;padding:19px}.growth-paper img{padding:19px}.growth-caption h3{font-size:14px}.growth-track{animation-duration:95s}.growth-row:nth-child(2) .growth-track{animation-duration:105s}}
@media(prefers-reduced-motion:reduce){.growth-track{animation:none!important;transform:none!important;will-change:auto}.growth-group[aria-hidden]{display:none}.growth-row{overflow-x:auto;padding:0 24px}.growth-viewport{mask-image:none}.growth-paper img{transition:none}}
/* Let the documents float freely, without card frames. */
.growth-paper,.growth-card:hover .growth-paper{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;overflow:visible}
.growth-paper img{padding:0;filter:none}
.growth-card:hover img{filter:none;transform:none}
@media(max-width:700px){.growth-paper,.growth-paper img{padding:0}}

/* Uniform document images with soft corners, no surrounding frame. */
.growth-card{width:clamp(240px,22vw,310px)}
.growth-paper,.growth-card:hover .growth-paper{height:auto;aspect-ratio:4/5;border:0;background:transparent;border-radius:18px;overflow:hidden;padding:0;box-shadow:none}
.growth-paper img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:0;border-radius:18px;background:#fff;filter:none}
.growth-caption{padding:18px 2px 0}
@media(max-width:700px){.growth-card{width:230px}.growth-paper{height:auto;border-radius:16px}.growth-paper img{padding:0;border-radius:16px}}

.growth-paper img[alt="AWS Certified Cloud Practitioner"]{background:#232f3e}

/* Compact, centered growth images. */
.growth-card{width:210px}.growth-paper,.growth-card:hover .growth-paper{aspect-ratio:4/5;border-radius:14px}.growth-paper img{border-radius:14px;object-position:center}.growth-group{gap:30px;padding-right:30px}.growth-viewport{gap:32px}.growth-heading{margin-bottom:42px}.growth-gallery{padding:90px 0 100px}.growth-caption{padding-top:13px}.growth-caption h3{font-size:13px}.growth-caption small{font-size:9px}@media(max-width:700px){.growth-card{width:170px}.growth-group{gap:20px;padding-right:20px}.growth-viewport{gap:26px}.growth-gallery{padding:70px 0 80px}}

@keyframes growth-drift{from{transform:translateX(0)}to{transform:translateX(-25%)}}

/* Compact gallery; hovering must not freeze scroll motion. */
.growth-gallery{padding:52px 0 60px}.growth-heading{margin-bottom:28px}.growth-heading h2{font-size:34px;margin:12px 0}.growth-card{width:170px}.growth-group{gap:26px;padding-right:26px}.growth-viewport{gap:22px}.growth-caption{padding-top:8px}.growth-caption h3{font-size:12px;margin-top:4px}.growth-gallery.is-visible:not(.is-paused) .growth-viewport:hover .growth-track{animation-play-state:running!important}.growth-gallery .growth-viewport:focus-within .growth-track{animation-play-state:running!important}.growth-gallery.is-paused .growth-track{animation-play-state:paused!important}.growth-group{translate:var(--growth-shift,0px) 0}@media(max-width:700px){.growth-gallery{padding:40px 0 48px}.growth-card{width:145px}.growth-heading h2{font-size:28px}.growth-viewport{gap:18px}}

.growth-group{min-width:100vw;justify-content:space-around}

/* Separate growth records from project work. */
#growth{background:#f0f0f3} [data-theme="dark"] #growth{background:#1c1c22} #growth .growth-card{cursor:default}

.growth-more{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:48px;padding-top:28px;border-top:1px solid rgba(100,100,120,.2)}.growth-more-caption>span{font-size:10px;letter-spacing:2px;color:var(--muted)}.growth-more-caption p{margin:8px 0 0;font-size:13px;color:var(--muted)}.growth-more-link{display:flex;align-items:center;gap:32px;border:0;background:none;padding:14px 0 14px 18px;color:var(--ink);font-size:16px;font-weight:500;cursor:default}.growth-more-link svg{width:44px;height:24px;fill:none;stroke:currentColor;stroke-width:1.25;transition:transform .35s ease}.growth-more-link:hover svg{transform:translateX(5px)}.growth-more-link:focus-visible{outline:2px solid currentColor;outline-offset:6px}@media(max-width:700px){.growth-more{margin:32px 24px 0;padding:24px 0 0;align-items:flex-start;flex-direction:column;gap:12px}.growth-more-link{width:100%;justify-content:space-between;padding:10px 0;font-size:15px}}

/* Compact growth gallery spacing. */
#growth{padding:34px 0 30px}#growth .growth-heading{margin-bottom:22px}#growth .growth-heading h2{font-size:30px;margin-top:8px;margin-bottom:8px}#growth .growth-card{width:145px}#growth .growth-viewport{gap:14px}#growth .growth-caption{padding-top:6px}#growth .growth-more{margin-top:26px;padding-top:16px}#growth .growth-more-caption p{margin-top:5px}@media(max-width:700px){#growth{padding:28px 0 24px}#growth .growth-card{width:125px}#growth .growth-heading h2{font-size:26px}#growth .growth-more{margin-top:22px;padding-top:16px}}

/* Give the heading room below the section boundary. */
#growth{padding-top:68px}@media(max-width:700px){#growth{padding-top:48px}}

/* Align both edges of introduction paragraphs. */
.intro-detail-sections section p{text-align:justify;text-align-last:left;text-justify:inter-word;word-break:normal;overflow-wrap:break-word}

/* Match paragraph edges to the section divider. */
.intro-detail-sections section p{width:100%;max-width:none;box-sizing:border-box}

/* Centered introduction closing */
.intro-detail-page>footer.intro-closing{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:none;box-sizing:border-box;margin:96px auto 0;padding:48px 16px 56px;border:0;text-align:center;gap:18px}.intro-detail-page>footer.intro-closing::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(360px,70%);height:1px;background:linear-gradient(to right,transparent,currentColor,transparent);opacity:.28}.intro-detail-page>footer.intro-closing h2{margin:0;font-size:clamp(22px,2.2vw,30px);font-weight:500;line-height:1.5;letter-spacing:-.035em}.intro-detail-page>footer.intro-closing a{font-size:14px;opacity:.65}@media(max-width:600px){.intro-detail-page>footer.intro-closing{margin-top:64px;padding-top:36px;padding-bottom:40px}}

/* Three same-size project cards; original image aspect ratios stay intact. */
#growth .growth-viewport{position:relative}.project-fan{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:min(470px,68vw);isolation:isolate}.project-fan-halo{position:absolute;z-index:-1;inset:-70px -100px;background:rgba(20,20,26,.52);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);mask-image:radial-gradient(ellipse,black 25%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse,black 25%,transparent 72%);pointer-events:none}.project-fan-deck{position:relative;width:100%;aspect-ratio:1.42;touch-action:pan-y}.project-fan-card{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:18px;background:transparent;cursor:pointer;transform-origin:50% 90%;transition:transform .65s cubic-bezier(.22,.7,.2,1),opacity .5s;filter:drop-shadow(0 14px 22px rgba(0,0,0,.28));overflow:hidden}.project-fan-card img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.project-fan-card[data-slot="0"]{z-index:3;transform:translate(0,0) rotate(0);opacity:1}.project-fan-card[data-slot="1"]{z-index:2;transform:translate(-30px,8px) rotate(-7deg) scale(.96);opacity:.85}.project-fan-card[data-slot="2"]{z-index:1;transform:translate(30px,12px) rotate(7deg) scale(.93);opacity:.7}.project-fan-card:focus-visible,.project-fan-controls button:focus-visible{outline:2px solid #aabbd7;outline-offset:4px}.project-fan-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px;color:var(--ink)}.project-fan-controls button{flex:0 0 36px;height:36px;border-radius:50%;border:1px solid rgba(160,165,180,.28);background:var(--bg);color:inherit;cursor:pointer;font-size:18px}.project-fan-caption{text-align:center;font-size:12px;line-height:1.6;max-width:270px;text-shadow:0 1px 12px var(--bg)}@media(max-width:600px){.project-fan{width:72vw}.project-fan-card{border-radius:12px}.project-fan-card[data-slot="1"]{transform:translate(-14px,6px) rotate(-6deg) scale(.96)}.project-fan-card[data-slot="2"]{transform:translate(14px,9px) rotate(6deg) scale(.93)}.project-fan-controls{gap:8px;margin-top:18px}.project-fan-caption{font-size:10px}.project-fan-halo{inset:-45px -40px}}@media(prefers-reduced-motion:reduce){.project-fan-card{transition:none}}

/* A slightly larger deck with an image-shaped backdrop. */
.project-fan{width:min(530px,72vw)}.project-fan-halo{inset:0 0 60px;background:rgba(20,20,26,.56);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);mask-image:var(--fan-mask);-webkit-mask-image:var(--fan-mask);mask-size:contain;-webkit-mask-size:contain;mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;transform:scale(1.12);filter:blur(18px)}@media(max-width:600px){.project-fan{width:76vw}.project-fan-halo{inset:0 0 54px;filter:blur(12px)}}

/* Quiet background, aligned stack, unhurried transitions. */
#growth .growth-viewport>.growth-row{filter:blur(3px);opacity:.34;transition:filter .8s ease,opacity .8s ease}.project-fan-halo{display:none}.project-fan-card{transition:transform 1s cubic-bezier(.22,.61,.36,1),opacity .85s ease;filter:drop-shadow(0 12px 20px rgba(0,0,0,.18));transform-origin:center}.project-fan-card[data-slot="0"]{transform:translateY(0) scale(1);opacity:1;z-index:3}.project-fan-card[data-slot="1"]{transform:translateY(-16px) scale(.96);opacity:.65;z-index:2}.project-fan-card[data-slot="2"]{transform:translateY(-32px) scale(.92);opacity:.4;z-index:1}@media(max-width:600px){#growth .growth-viewport>.growth-row{filter:blur(2px)}.project-fan-card[data-slot="1"]{transform:translateY(-12px) scale(.96)}.project-fan-card[data-slot="2"]{transform:translateY(-24px) scale(.92)}}@media(prefers-reduced-motion:reduce){.project-fan-card{transition:none}}

/* Local feathered backdrop around the deck, not the gallery. */
#growth .growth-viewport>.growth-row{filter:none;opacity:1}.project-fan-halo{display:block;inset:-28px -42px 34px;transform:none;border-radius:38px;background:rgba(24,24,30,.24);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);filter:none;mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent),linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent),linear-gradient(to bottom,transparent,black 15%,black 85%,transparent);mask-composite:intersect;-webkit-mask-composite:source-in;mask-size:100% 100%;-webkit-mask-size:100% 100%}.project-fan-card{transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .7s ease}.project-fan-card[data-slot="0"]{transform:translate(0,0) rotate(0);opacity:1}.project-fan-card[data-slot="1"]{transform:translate(-12px,6px) rotate(-2deg) scale(.96);opacity:.85}.project-fan-card[data-slot="2"]{transform:translate(-24px,12px) rotate(-4deg) scale(.92);opacity:.7}@media(max-width:600px){#growth .growth-viewport>.growth-row{filter:none}.project-fan-halo{inset:-20px -28px 30px}.project-fan-card[data-slot="1"]{transform:translate(-8px,5px) rotate(-2deg) scale(.96)}.project-fan-card[data-slot="2"]{transform:translate(-16px,10px) rotate(-4deg) scale(.92)}}

/* Soft local backdrop behind the project stack */
.project-fan-halo{inset:-66px -100px -14px;background:rgba(24,24,30,.56);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:56px;mask-image:linear-gradient(to right,transparent,black 18%,black 82%,transparent),linear-gradient(to bottom,transparent,black 20%,black 80%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 18%,black 82%,transparent),linear-gradient(to bottom,transparent,black 20%,black 80%,transparent)}
@media(max-width:600px){.project-fan-halo{inset:-45px -54px -12px}}

.project-fan-halo{z-index:0;mask-image:radial-gradient(ellipse closest-side,black 65%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse closest-side,black 65%,transparent 100%);mask-composite:add;-webkit-mask-composite:source-over}.project-fan-deck,.project-fan-controls{position:relative;z-index:1}

.project-fan{isolation:auto}.project-fan-halo{inset:-90px -150px -35px;background:rgba(24,24,30,.68);mask-image:radial-gradient(ellipse farthest-side,black 58%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse farthest-side,black 58%,transparent 100%)}@media(max-width:600px){.project-fan-halo{inset:-60px -65px -28px}}

/* Clear separation and aligned project stack */
#growth .growth-viewport::after{width:min(760px,94vw)!important;height:100%!important;border-radius:48px!important;background:rgba(27,27,34,.78)!important;-webkit-backdrop-filter:blur(28px)!important;backdrop-filter:blur(28px)!important;-webkit-mask-image:none!important;mask-image:none!important;box-shadow:0 0 35px 24px rgba(27,27,34,.6)}

#growth .project-fan-card[data-slot="1"]{transform:translate(-18px,6px) rotate(-4deg) scale(.96);opacity:1}#growth .project-fan-card[data-slot="2"]{transform:translate(18px,6px) rotate(4deg) scale(.96);opacity:1}


/* Contour shadows with a quiet caption backdrop */
#growth .growth-viewport::after{display:none!important}
#growth .project-fan-halo{display:none!important}
#growth .project-fan-card{filter:drop-shadow(0 8px 14px rgba(0,0,0,.3)) drop-shadow(0 2px 4px rgba(0,0,0,.18))}
#growth .project-fan-caption{padding:8px 16px;border-radius:999px;background:rgba(24,24,30,.58);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 2px 12px rgba(0,0,0,.1);color:var(--text);text-align:center}

#growth .project-fan-caption{background:color-mix(in srgb,var(--bg) 84%,transparent);color:var(--text);box-shadow:0 2px 10px rgba(0,0,0,.08);border:1px solid color-mix(in srgb,var(--text) 9%,transparent)}

/* Stable caption and arrow positions across project slides. */
#growth .project-fan-controls{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;gap:12px;width:min(430px,90vw);max-width:none;margin:24px 0 0;position:relative;left:50%;transform:translateX(-50%);align-items:center}
#growth .project-fan-caption{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;max-width:none;height:52px;min-width:0;padding:8px 12px;font-variant-numeric:tabular-nums;line-height:1.5;word-break:keep-all}
#growth .project-fan-controls button{width:36px;height:36px;padding:0}
@media(max-width:600px){#growth .project-fan-controls{gap:8px;margin-top:18px}#growth .project-fan-caption{font-size:10px;padding:6px 8px}}

/* Compact fixed caption, sized for the longest project title. */
#growth .project-fan-controls{width:min(328px,90vw);gap:10px}
#growth .project-fan-caption{height:36px;padding:5px 10px}
@media(max-width:600px){#growth .project-fan-controls{width:min(296px,92vw);gap:8px}#growth .project-fan-caption{padding:4px 8px}}

/* Awards-only gallery; project-card version archived as 카드. */
#growth .project-fan{display:none!important}

/* Quiet champagne highlight for the growth detail link. */
#growth .growth-more-link{--growth-gold:#987027;--growth-glint:#ba9147;gap:18px;font-weight:500;background:linear-gradient(105deg,var(--ink) 0%,var(--ink) 42%,var(--growth-gold) 48%,var(--growth-glint) 51%,var(--growth-gold) 54%,var(--ink) 60%,var(--ink) 100%);background-size:300% 100%;background-position:100% 50%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:growth-gold-sweep 5.6s ease-in-out infinite}
[data-theme="dark"] #growth .growth-more-link{--growth-gold:#c8ab72;--growth-glint:#f1dfb4}
#growth .growth-more-link svg{width:30px;height:22px;stroke:currentColor;color:var(--ink);animation:growth-gold-arrow 5.6s ease-in-out infinite}
#growth .growth-more-link:hover{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--growth-gold) 25%,transparent))}
@keyframes growth-gold-sweep{0%,64%{background-position:100% 50%}94%,100%{background-position:0% 50%}}
@keyframes growth-gold-arrow{0%,80%,100%{color:var(--ink);filter:none}88%{color:var(--growth-glint);filter:drop-shadow(0 0 3px color-mix(in srgb,var(--growth-gold) 35%,transparent))}}
@media(prefers-reduced-motion:reduce){#growth .growth-more-link,#growth .growth-more-link svg{animation:none}#growth .growth-more-link{background:none;-webkit-text-fill-color:currentColor}#growth .growth-more-link:hover{color:var(--growth-gold)}}

/* Matching detail actions and balanced footer spacing. */
#growth{padding-bottom:0}
#growth .growth-more{padding-top:28px;padding-bottom:28px;align-items:center}
#growth .growth-more-link,#about .profile-detail-link{
 display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:12px;
 min-width:0;min-height:44px;padding:10px 4px;border:0;border-radius:0;
 font-family:inherit;font-size:12px;font-weight:400;letter-spacing:0;line-height:1.65;
 color:var(--muted);cursor:pointer;--growth-gold:#987027;--growth-glint:#ba9147;
 background:linear-gradient(105deg,var(--muted) 0%,var(--muted) 42%,var(--growth-gold) 48%,var(--growth-glint) 51%,var(--growth-gold) 54%,var(--muted) 60%,var(--muted) 100%);
 background-size:300% 100%;background-position:100% 50%;
 -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
 animation:growth-gold-sweep 5.6s ease-in-out infinite
}
[data-theme="dark"] #growth .growth-more-link,[data-theme="dark"] #about .profile-detail-link{--growth-gold:#c8ab72;--growth-glint:#f1dfb4}
#about .profile-detail-link .detail-action-label{font:inherit;color:inherit}
#growth .growth-more-link svg{display:none}
#growth .growth-more-link::after,#about .profile-detail-link::after{
 content:'→';font-family:inherit;font-size:18px;font-weight:400;line-height:1;
 color:var(--muted);-webkit-text-fill-color:currentColor;
 transition:transform .25s ease;animation:growth-gold-arrow 5.6s ease-in-out infinite
}
#growth .growth-more-link:hover::after,#about .profile-detail-link:hover::after{transform:translateX(3px)}
#growth .growth-more-link:hover,#about .profile-detail-link:hover{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--growth-gold) 25%,transparent))}
@keyframes growth-gold-arrow{0%,80%,100%{color:var(--muted);filter:none}88%{color:var(--growth-glint);filter:drop-shadow(0 0 3px color-mix(in srgb,var(--growth-gold) 35%,transparent))}}
@media(max-width:700px){#growth{padding-bottom:0}#growth .growth-more{padding-top:24px;padding-bottom:24px}#growth .growth-more-link{width:auto;align-self:flex-end}}
@media(prefers-reduced-motion:reduce){#growth .growth-more-link,#about .profile-detail-link{animation:none;background:none;-webkit-text-fill-color:currentColor}#growth .growth-more-link::after,#about .profile-detail-link::after{animation:none;transition:none}}

/* Shared, slightly quicker gold cadence for all detail links. */
#projects .work-all{--growth-gold:#987027;--growth-glint:#ba9147;background:linear-gradient(105deg,var(--muted) 0%,var(--muted) 42%,var(--growth-gold) 48%,var(--growth-glint) 51%,var(--growth-gold) 54%,var(--muted) 60%,var(--muted) 100%);background-size:300% 100%;background-position:100% 50%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:growth-gold-sweep 4.4s ease-in-out infinite}
[data-theme="dark"] #projects .work-all{--growth-gold:#c8ab72;--growth-glint:#f1dfb4}
#projects .work-all span{-webkit-text-fill-color:currentColor;animation:growth-gold-arrow 4.4s ease-in-out infinite}
#growth .growth-more-link,#about .profile-detail-link,#growth .growth-more-link::after,#about .profile-detail-link::after{animation-duration:4.4s}
#projects .work-all:hover{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--growth-gold) 25%,transparent))}
@media(prefers-reduced-motion:reduce){#projects .work-all{animation:none;background:none;-webkit-text-fill-color:currentColor}#projects .work-all span{animation:none}}

/* Archive endings: one shared closing rule for university and professional records. */
.growth-records .gr-shell>.gr-end,.work-archive.records-layout>.work-end{display:block;margin-top:120px;margin-right:0;padding:22px 22px 32px;border-top:1px solid #dcdce0;text-align:center;font-size:13px;line-height:1.65;color:var(--muted)}
[data-theme="dark"] .growth-records .gr-shell>.gr-end,[data-theme="dark"] .work-archive.records-layout>.work-end{border-top-color:#3b3b46}
@media(max-width:700px){.growth-records .gr-shell>.gr-end,.work-archive.records-layout>.work-end{margin-top:80px}}

/* Narrow viewports: balance the outer gutters without changing layout or motion. */
@media(min-width:701px) and (max-width:1050px){
 .page-toc-enabled .navin{padding-left:32px;padding-right:32px}
 .page-toc-enabled .wrap{padding-left:60px;padding-right:60px}
 nav.page-wave{width:34px}
 .page-wave-link{width:34px}
 .page-wave-label{display:none}
 .page-toc-enabled .auto-story .storycopy{left:auto;right:auto;margin-left:60px;margin-right:60px}
 .horizontal-story .journey{margin-left:60px;margin-right:60px}
}
@media(max-width:700px){
 body .hero{padding-left:32px;padding-right:32px}
 #about .profile-grid{padding-left:30px;padding-right:30px}
 .section,.closing,.scroll-story{padding-right:24px}
}

/* Phone-only overflow repairs; existing alignment and transitions stay intact. */
@media(max-width:700px){
 body .navin{max-width:100%;min-width:0}
 body .navin .nav-dropdown{max-width:100vw;box-sizing:border-box}
 body .navin .menu-group{min-width:0}
 body #projects .sectionhead{flex-wrap:wrap;gap:18px}
 body #projects .work-card-number{flex-shrink:0;white-space:nowrap;overflow-wrap:normal}
 body #projects .work-card-meta>span:first-child{min-width:0}
 body #about .career-clock-value{flex-wrap:wrap;row-gap:8px}
 body #about .profile-contact{flex-wrap:wrap}
 body :is(.professional-detail-content,.project-reading,.about-tab-panel,.gr-body,.work-entry-body){min-width:0;overflow-wrap:anywhere}
 body :is(.professional-detail-content,.project-reading) pre{max-width:100%;min-width:0;box-sizing:border-box;overflow-x:auto}
 body :is(.professional-detail-content,.project-reading) table{display:block;max-width:100%;overflow-x:auto}
 body :is(.professional-detail-content,.project-reading) img{max-width:100%;height:auto}
 body .professional-detail-shell{min-width:0;max-width:100%;box-sizing:border-box}
 body .about-record{min-width:0}
 body .about-tabs{max-width:100%;flex-wrap:wrap}
 body .about-tab{white-space:normal}
 body .gpm-head{gap:12px;flex-wrap:wrap}
 body .gpm-content{min-width:0}
}
@media(max-width:480px){
 body .navin{height:auto;min-height:110px;align-content:center;row-gap:4px;padding-top:10px;padding-bottom:8px}
 body .navin .brand{flex-basis:100%;justify-content:center}
 body .navin .navlinks{flex-shrink:0;max-width:100%}
 body .navin .nav-dropdown{top:110px}
 body .navin .nav-dropdown strong{overflow-wrap:anywhere}
 body #projects>.wrap{padding-inline:16px}
 body #projects .work-card-body{padding:20px}
 body #about .profile-skill-group{max-width:100%;min-width:0}
 body #about .skill-logo-art{max-width:100%}
 body #about .skill-logo-art img{max-width:100%;object-fit:contain}
 body .professional-detail h1{overflow-wrap:anywhere}
}

/* Mobile navigation, left-aligned skill tiles and swipeable project deck. */
@media(max-width:700px){
 html body .navin{height:68px;min-height:68px;flex-wrap:nowrap;justify-content:space-between!important;padding:0 16px!important;gap:8px!important}
 html body .navin .brand{flex-basis:auto;justify-content:flex-start;margin-left:0!important;min-width:0;gap:0!important}
 html body .navin .brand-person{margin-left:0!important;gap:5px;font-size:12px}
 html body .navin .brand-word,html body .navin .brand-divider{display:none}
 html body .navin .navlinks{gap:10px!important}
 html body .navin .nav-disclosure-toggle{font-size:11px}
 html body .navin .theme-toggle{font-size:10px;padding:6px 8px;white-space:nowrap}
 html body .navin .nav-dropdown{top:68px}
 html body .cover-profile-stage #about .profile-skills-grid{justify-content:flex-start}
 html body .cover-profile-stage #about .profile-skill-group{width:100%;min-width:0}
 html body .cover-profile-stage #about .profile-skill-group ul,
 html body .cover-profile-stage #about .profile-skill-group:first-child ul,
 html body .cover-profile-stage #about .profile-skill-group:nth-child(2) ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-content:start;gap:10px;max-width:100%}
 html body .cover-profile-stage #about .profile-skill-group .skill-logo-tile{width:100%;min-width:0;height:112px;min-height:112px;flex-basis:auto;font-size:10px;overflow-wrap:anywhere}
 html body .cover-profile-stage #about .skill-logo-art .brand-wide{width:58px;max-width:100%}
 body #projects .mobile-work-deck{display:grid;grid-template-columns:minmax(0,1fr);padding:24px 10px 12px;isolation:isolate;touch-action:pan-y;gap:0}
 body #projects .mobile-work-deck>.work-card{grid-area:1/1;align-self:start;width:100%;margin:0;transform-origin:50% 85%;transition:transform .45s cubic-bezier(.22,.7,.2,1),opacity .35s;box-shadow:0 5px 18px #0002}
 body #projects .mobile-work-deck>.work-card[data-mobile-slot="0"]{transform:none;z-index:4;opacity:1;pointer-events:auto}
 body #projects .mobile-work-deck>.work-card[data-mobile-slot="1"]{transform:translate(7px,-10px) rotate(3deg) scale(.97);z-index:3;opacity:1;pointer-events:none}
 body #projects .mobile-work-deck>.work-card[data-mobile-slot="2"]{transform:translate(-7px,-17px) rotate(-3deg) scale(.94);z-index:2;opacity:1;pointer-events:none}
 body #projects .mobile-work-deck>.work-card[data-mobile-slot="3"]{transform:translateY(-23px) scale(.91);z-index:1;opacity:0;pointer-events:none}
 .mobile-deck-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 10px 24px;color:var(--muted);font-size:12px}
 .mobile-deck-controls button{width:44px;height:44px;flex:none;border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);border-radius:50%;background:var(--bg);color:var(--ink);font-size:20px;cursor:pointer}
 .mobile-deck-controls span{min-width:0;text-align:center}
 html body :is(#projects .work-index,.records-layout .work-index,.gr-timeline) ol{overflow-x:auto;overflow-y:hidden;padding-top:10px;padding-bottom:14px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 35%,transparent) transparent}
 html body :is(#projects .work-index,.records-layout .work-index,.gr-timeline) li{min-width:150px;flex:0 0 150px;scroll-snap-align:start}
 html body :is(#projects .work-index,.records-layout .work-index,.gr-timeline) :is(a,button){white-space:normal;overflow-wrap:anywhere}
}
@media(max-width:360px){html body .navin{padding-inline:10px!important}.navin .brand .brand-person{font-size:11px!important}html body .navin .navlinks{gap:7px!important}}
@media(prefers-reduced-motion:reduce){body #projects .mobile-work-deck>.work-card{transition:none}}

@media(max-width:700px){
 /* One rail and one centred node per item, shared by all mobile indexes. */
 html body :is(#projects .work-index,.records-layout .work-index,.gr-timeline) ol{display:flex;gap:0;border:0;margin:0;padding:6px 4px 16px;list-style:none}
 html body :is(#projects .work-index,.records-layout .work-index,.gr-timeline) ol::before{display:none!important}
 html body :is(#projects .work-index,.records-layout .work-index,.gr-timeline) li{position:relative;border:0;margin:0;padding:26px 20px 0 0;flex:0 0 158px;min-width:158px}
 html body :is(#projects .work-index,.records-layout .work-index,.gr-timeline) li::before{content:'';display:block!important;position:absolute;left:4px;right:-4px;top:10px;height:1px;width:auto;background:color-mix(in srgb,var(--ink) 25%,transparent)}
 html body :is(#projects .work-index,.records-layout .work-index,.gr-timeline) li:last-child::before{right:20px}
 html body :is(#projects .work-index,.records-layout .work-index,.gr-timeline) :is(a,button){display:block;position:relative;border:0;padding:0;line-height:1.5}
 html body :is(#projects .work-index,.records-layout .work-index,.gr-timeline) :is(.work-dot,.gr-timeline-dot){display:block;position:absolute;box-sizing:border-box;left:4px;top:-16px;transform:translate(-50%,-50%);width:8px;height:8px;border:1px solid var(--muted);border-radius:50%;background:var(--bg)}
 html body :is(#projects .work-index,.records-layout .work-index,.gr-timeline) [aria-current="location"] :is(.work-dot,.gr-timeline-dot){background:var(--ink);border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 14%,transparent)}
 html body .navin .brand-divider{display:none!important}
 html body #about .profile-name{border-left:0!important}
 html body #about .profile-name::before,html body #about .name-ko::before{display:none!important}
 /* Vector icon avoids the coloured emoji substitution in iOS. */
 html body .navin .theme-toggle{font-size:0!important;display:inline-flex;align-items:center;gap:5px}
 html body .navin .theme-toggle::after{content:'다크 모드';font-size:10px}
 html[data-theme="dark"] body .navin .theme-toggle::after{content:'라이트 모드'}
 html body .navin .theme-toggle::before{content:'';width:13px;height:13px;display:block;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.5A8.5 8.5 0 0 1 8.5 4 8.5 8.5 0 1 0 20 15.5Z' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.5A8.5 8.5 0 0 1 8.5 4 8.5 8.5 0 1 0 20 15.5Z' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E") center/contain no-repeat}
 html[data-theme="dark"] body .navin .theme-toggle::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5'/%3E%3C/g%3E%3C/svg%3E")}
 html body #about .profile-skill-group .skill-logo-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px 6px 20px!important;text-align:center}
 html body #about .profile-skill-group .skill-logo-art{display:flex;align-items:center;justify-content:center;align-self:center;width:100%;height:38px;min-height:38px;margin:0;padding:0;flex:none}
 html body #about .profile-skill-group .skill-logo-art :is(img,svg){display:block;position:static;margin:0 auto;max-width:100%;max-height:38px;object-fit:contain;object-position:center}
 html body #about .profile-skill-group .skill-logo-tile>span:last-of-type{width:100%;min-height:30px;display:flex;align-items:center;justify-content:center;text-align:center;margin:0}
 body #projects .mobile-work-deck>.work-card{transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .55s ease;backface-visibility:hidden}
}

/* Centre each tile's actual content group; no empty subtitle row. */
@media(max-width:700px){
 html body #about#about .profile-skill-group .skill-logo-tile{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:8px!important;height:112px!important;min-height:112px!important;padding:12px 6px!important;text-align:center}
 html body #about#about .profile-skill-group .skill-logo-tile>.skill-logo-art{width:100%;height:32px!important;min-height:32px;display:flex!important;justify-content:center!important;align-items:center!important;margin:0!important;flex:0 0 32px}
 html body #about#about .profile-skill-group .skill-logo-tile>span:last-of-type{display:flex!important;align-items:center!important;justify-content:center!important;width:100%;height:auto!important;min-height:0!important;line-height:15px!important;margin:0!important;flex:none}
 html body #about#about .profile-skill-group .skill-logo-tile>small{position:static!important;align-self:center!important;margin:-3px 0 0!important;line-height:13px!important;font-size:9px;flex:none}
 html body #about#about .profile-skill-group .skill-logo-art :is(img,svg){height:28px!important;max-height:28px!important;margin:0!important;flex-shrink:1;object-fit:contain;object-position:center}
 html body #about#about .profile-skill-group .skill-logo-art .synology-mark{transform:scale(2)!important;width:60px!important;max-width:60%}
}
@media(max-width:700px){
 html body #about .profile-detail-link.unified-detail-cta.home-popup-22{position:relative!important;top:auto!important;right:auto!important;transform:none!important}
}

/* iOS: opaque, edge-to-edge work layer; don't paint the inert home behind it. */
@media(max-width:700px){
 html body>iframe[title="실무 프로젝트 상세보기"]{
  display:block;left:-1px!important;right:-1px!important;
  width:calc(100% + 2px)!important;max-width:none!important;
  margin:0!important;border:0!important;box-sizing:border-box;
  background:var(--bg,#131316)!important;
 }
 html body>iframe[title="실무 프로젝트 상세보기"][hidden]{display:none!important}
 html body:has(>iframe[title="실무 프로젝트 상세보기"]:not([hidden]))>[inert]{
  visibility:hidden!important;
 }
}

/* Phone reading: preserve copy, avoid stretched justification and crushed columns. */
@media(max-width:700px){
 html body :is(.professional-detail,.project-page,.intro-detail-page,.growth-records,.records-layout) :is(p,li,dd){
  text-align:left!important;text-align-last:auto!important;text-justify:auto!important;
  word-break:keep-all;overflow-wrap:break-word;
 }
 html body :is(.professional-detail,.project-page,.intro-detail-page) :is(p,li,dd) code{
  white-space:normal;overflow-wrap:anywhere;word-break:normal;
 }
 html body .mobile-table-viewport{
  display:block;max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;
 }
 html body table.mobile-readable-table{
  display:table!important;table-layout:auto!important;width:max-content!important;
  min-width:100%!important;max-width:none!important;overflow:visible!important;
 }
 html body table.mobile-readable-table :is(th,td){
  min-width:140px;max-width:420px;white-space:normal!important;
  word-break:keep-all!important;overflow-wrap:normal!important;
 }
 html body table.mobile-readable-table :is(th,td):first-child{
  white-space:nowrap!important;max-width:none;
 }
 html body table.mobile-readable-table code{
  white-space:nowrap!important;word-break:normal!important;overflow-wrap:normal!important;
 }
}

/* Touch taps must not leave the desktop hover underline latched after a popup. */
@media(max-width:700px) and (hover:none){
 html body :is(.unified-detail-cta.unified-detail-cta,#about-panel-3 a.award-popup-22):not(:active):not(.popup-tap-pending)>.unified-detail-label::after,
 html body .work-detail-link:not(:active):not(.popup-tap-pending)>.work-detail-label::after,
 html body :is(.gpm-open,.gpm-related,.gpm-close,.project-page-back):not(:active):not(.popup-tap-pending)::after{
  transform:scaleX(0)!important;opacity:0!important;
 }
}

/* Popup triggers are app controls on touch screens, not Safari preview links. */
@media(max-width:700px) and (hover:none){
 html body :is(.about-evidence a,[aria-haspopup="dialog"],.project-popup-cta,[data-award-index],a[data-doc],a[data-pdf],a[data-sheet],a[data-code],a[data-notebook],.gpm-file,.evidence-viewer img),
 html body :is(.about-evidence a,[aria-haspopup="dialog"],.project-popup-cta,[data-award-index],a[data-doc],a[data-pdf],a[data-sheet],a[data-code],a[data-notebook],.gpm-file) *{
  -webkit-touch-callout:none!important;
  -webkit-user-select:none!important;user-select:none!important;
 }
}

/* Professional detail CTA: restore the shared gold rule and text/arrow treatment. */
html body .work-detail-link.work-detail-link{
 position:relative!important;padding-left:16px!important;
}
html body .work-detail-link.work-detail-link::before{
 content:""!important;display:block!important;position:absolute!important;
 left:0!important;top:50%!important;width:2px!important;height:22px!important;
 background:color-mix(in srgb,var(--cta-gold) 75%,transparent)!important;
 transform:translateY(-50%)!important;
}
html body .work-detail-link.work-detail-link>.work-detail-label{
 background:linear-gradient(110deg,var(--muted) 35%,var(--cta-gold) 46%,var(--cta-glint) 50%,var(--cta-gold) 54%,var(--muted) 65%)!important;
 background-size:300% 100%!important;background-clip:text!important;-webkit-background-clip:text!important;
 -webkit-text-fill-color:transparent!important;animation:cta-text-glint 4.4s ease-in-out infinite!important;
}
html body .work-detail-link.work-detail-link>.work-detail-label::after{
 background:linear-gradient(90deg,transparent,var(--cta-gold) 22%,var(--cta-glint) 50%,var(--cta-gold) 78%,transparent)!important;
}
@media(max-width:700px) and (hover:none){
 html body :is(.unified-detail-cta,#about-panel-3 a.award-popup-22).popup-tap-pending>.unified-detail-label::after,
 html body .work-detail-link.popup-tap-pending>.work-detail-label::after,
 html body :is(.gpm-open,.gpm-related).popup-tap-pending::after{
  transform:scaleX(1)!important;opacity:.65!important;
  transition:transform 420ms cubic-bezier(.22,.61,.36,1),opacity 320ms ease!important;
 }
}
@media(prefers-reduced-motion:reduce){
 html body .work-detail-link.work-detail-link>.work-detail-label{
  background:none!important;-webkit-text-fill-color:currentColor!important;animation:none!important;
 }
}

@media(max-width:700px){
 html body .mobile-popup-tap-anchor{position:relative!important}
 html body .mobile-popup-tap-line{
  position:absolute!important;display:block!important;pointer-events:none;
  left:0;right:0;bottom:-5px;height:1px;
  background:linear-gradient(90deg,transparent,var(--cta-gold,#c8ab72) 22%,var(--cta-glint,#f1dfb4) 50%,var(--cta-gold,#c8ab72) 78%,transparent)!important;
  transform:scaleX(0);transform-origin:center;opacity:0;
 }
 html body .popup-tap-pending>.unified-detail-label::after,
 html body .popup-tap-pending>.work-detail-label::after{display:none!important}
 html body .professional-detail .professional-detail-back{
  position:sticky!important;top:8px!important;z-index:5;align-self:start;
  max-width:100%;padding:10px 15px;margin-left:-15px;border-radius:22px;
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
 }
}
@media(max-width:700px){
 html body .professional-detail .professional-detail-shell{display:block}
 html body .professional-detail .professional-detail-back{
  margin-bottom:18px;background:color-mix(in srgb,var(--bg) 94%,transparent)!important;
 }
 html body :is(.unified-detail-cta,#about-panel-3 a.award-popup-22).popup-tap-pending>.unified-detail-label::after{display:none!important}
}

/* Shared popup underline timing across intro, work and university projects. */
html body .unified-detail-cta.unified-detail-cta>.unified-detail-label::after,
html body #about-panel-3 a.award-popup-22>.unified-detail-label::after,
html body .work-detail-link.work-detail-link>.work-detail-label::after{
 transition:transform 620ms cubic-bezier(.3,0,.2,1),opacity 420ms ease!important;
}
@media(max-width:700px){
 html body .mobile-popup-tap-anchor{display:inline-block}
 html body :is(.gpm-open,.gpm-related).popup-tap-pending::after{display:none!important}
}
@media(prefers-reduced-motion:reduce){
 html body .unified-detail-cta.unified-detail-cta>.unified-detail-label::after,
 html body #about-panel-3 a.award-popup-22>.unified-detail-label::after,
 html body .work-detail-link.work-detail-link>.work-detail-label::after{transition:none!important}
}

/* Seal mobile university overlays against subpixel seams in Safari compositing. */
@media(max-width:700px){
 html body :is(.growth-records,.project-page){
  box-sizing:border-box!important;
  left:0!important;right:0!important;width:100%!important;max-width:none!important;
  overflow-x:hidden!important;
  background:var(--bg,#131316)!important;
  box-shadow:0 0 0 2px var(--bg,#131316);
  isolation:isolate;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
 }
}

/* Keep the mobile finance timeline's fade outside its readable content. */
@media(max-width:700px){
 html body .finance-main-timeline{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8px,#000 calc(100% - 8px),transparent 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0,#000 8px,#000 calc(100% - 8px),transparent 100%)!important;
 }
}

/* On touch devices only the explicit tap animation draws an underline.
   Suppress Safari's pre-click :active/:hover line as well as its retained hover. */
html.touch-popup-feedback body .unified-detail-cta.unified-detail-cta>.unified-detail-label::after,
html.touch-popup-feedback body #about-panel-3 a.award-popup-22>.unified-detail-label::after,
html.touch-popup-feedback body .work-detail-link.work-detail-link>.work-detail-label::after,
html.touch-popup-feedback body :is(.gpm-open,.gpm-related)::after{
 display:none!important;transition:none!important;animation:none!important;
}

@media(max-width:700px){
 html body .navin .nav-dropdown{
  transition:clip-path .55s cubic-bezier(.4,0,.2,1),transform .55s cubic-bezier(.4,0,.2,1),opacity .45s ease,visibility 0s linear .55s!important;
  pointer-events:none;
 }
 html body .navin .nav-disclosure.is-open .nav-dropdown{
  transition-delay:0s!important;pointer-events:auto;
 }
 html body .navin .nav-dropdown a{transition:opacity .4s ease,transform .5s cubic-bezier(.4,0,.2,1)!important}
 html body .work-archive.records-layout>.work-back:not(.work-end){
  position:sticky!important;top:calc(var(--work-header-height,68px) + 8px)!important;
  z-index:6;align-self:start;width:max-content!important;max-width:100%;
  background:color-mix(in srgb,var(--bg) 94%,transparent)!important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
 }
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
 html body .navin .nav-dropdown,html body .navin .nav-dropdown a{transition:none!important}
}

/* A scroll dismissal fades out gently without the fast upward clipping motion. */
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
 html body .navin .nav-disclosure:not(.is-open) .nav-dropdown{
  clip-path:inset(0)!important;transform:translateY(-4px)!important;
  transition:opacity .72s cubic-bezier(.4,0,.6,1) .08s,transform .8s cubic-bezier(.4,0,.2,1),visibility 0s linear .8s!important;
 }
 html body .navin .nav-disclosure:not(.is-open) .nav-dropdown a{
  transform:translateY(0)!important;
  transition:opacity .68s cubic-bezier(.4,0,.6,1) .08s!important;
 }
}

@media(max-width:700px){
 html body .navin .nav-disclosure.mobile-menu-closing .nav-dropdown{
  visibility:visible!important;clip-path:inset(0)!important;
  transform:translateY(0)!important;transition:none!important;pointer-events:none!important;
 }
 html body .navin .nav-disclosure.mobile-menu-closing .nav-dropdown a{
  opacity:1!important;transform:none!important;transition:none!important;
 }
}

/* End a completed fade without falling back into the CSS exit transition. */
@media(max-width:700px){
 html body .navin .nav-disclosure.mobile-menu-dismissed:not(.is-open) .nav-dropdown{
  opacity:0!important;visibility:hidden!important;transition:none!important;pointer-events:none!important;
 }
}

/* University detail return controls stay below their own mobile site header. */
@media(max-width:700px){
 html body .project-page .project-page-layout{display:block!important}
 html body .project-page .project-page-nav{
  position:sticky!important;top:calc(var(--university-header-height,68px) + 8px)!important;
  z-index:10;align-self:start;width:max-content!important;max-width:100%;
  margin-bottom:18px!important;
 }
 html body .project-page .project-page-nav .project-page-back{
  display:inline-flex!important;align-items:center;width:max-content;max-width:100%;
  margin:0!important;padding:10px 15px!important;border-radius:22px!important;
  background:color-mix(in srgb,var(--bg) 94%,transparent)!important;
  backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;
 }
}

/* University popup CTAs retain an arrow independently of the underline. */
html body :is(.growth-records,.project-page) .unified-detail-cta.unified-detail-cta::after{
 content:"→"!important;display:block!important;position:static!important;
 width:auto!important;height:auto!important;flex:none;opacity:1!important;
 background:none!important;color:var(--muted);-webkit-text-fill-color:currentColor!important;
 font-size:18px!important;line-height:1!important;
}
html body :is(.growth-records,.project-page) .gpm-open:not(.unified-detail-cta){display:inline-flex!important;align-items:center;gap:12px}
html body :is(.growth-records,.project-page) .gpm-open:not(.unified-detail-cta)::before{
 content:"→";display:block;order:2;font-size:18px;line-height:1;color:var(--muted);
}
html body :is(.growth-records,.project-page) .gpm-open:not(.unified-detail-cta)>svg{display:none!important}

html body :is(.growth-records,.project-page) :is(.unified-detail-cta,.project-popup-cta,.gpm-open,.gpm-file):has(>.university-popup-arrow){display:inline-flex!important;align-items:center!important;gap:12px!important}
html body :is(.growth-records,.project-page) .unified-detail-cta.unified-detail-cta:has(>.university-popup-arrow)::after,
html body :is(.growth-records,.project-page) .gpm-open:has(>.university-popup-arrow)::after,
html body :is(.growth-records,.project-page) .gpm-open:not(.unified-detail-cta):has(>.university-popup-arrow)::before{display:none!important;content:none!important}
html body :is(.growth-records,.project-page) svg.university-popup-arrow{
 display:block!important;position:static!important;width:20px!important;height:20px!important;
 flex:0 0 20px!important;order:2;opacity:1!important;visibility:visible!important;
 fill:none!important;stroke:var(--muted)!important;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}

/* Use the exact homepage glyph and gold glint, independently of tap underlines. */
html body :is(.growth-records,.project-page) span.university-popup-arrow{
 display:block!important;position:static!important;flex:none;order:2;
 width:auto!important;height:auto!important;font-family:inherit!important;
 font-size:18px!important;font-weight:400!important;line-height:1!important;
 opacity:1!important;visibility:visible!important;background:none!important;
 color:var(--muted);-webkit-text-fill-color:currentColor!important;
 animation:cta-arrow-glint 4.4s ease-in-out infinite!important;
 transition:transform 320ms cubic-bezier(.2,.7,.3,1);
}
html body span.university-popup-arrow::before{content:"→"}
@media(hover:hover){
 html body :is(.growth-records,.project-page) :is(a,button):hover>span.university-popup-arrow{transform:translateX(3px)}
}
@media(max-width:700px){
 html body .growth-records .gr-shell>.gr-nav{
  position:sticky!important;top:calc(var(--university-header-height,68px) + 8px)!important;
  z-index:10;padding:0!important;margin-top:24px;width:max-content;max-width:100%;
 }
}
@media(prefers-reduced-motion:reduce){
 html body :is(.growth-records,.project-page) span.university-popup-arrow{animation:none!important;transition:none!important}
}

/* Mobile university tabs respond immediately, without hover or color fade lag. */
@media(max-width:700px){
 html body .project-page :is(.cwpp-tabs,.standard-tabs) button{
  touch-action:manipulation;transition:none!important;-webkit-tap-highlight-color:transparent;
 }
 html body .project-page :is(.cwpp-tabs,.standard-tabs) button[aria-selected="false"]:hover{
  background:transparent!important;color:var(--muted)!important;border-color:#8884!important;
 }
 html body .project-page :is(.cwpp-tabs,.standard-tabs) button[aria-selected="true"],
 html body .project-page :is(.cwpp-tabs,.standard-tabs) button:active{
  background:var(--ink,#eee)!important;color:var(--bg,#131316)!important;
  border-color:transparent!important;
 }
}

/* Site navigation must paint above sticky return controls on every mobile view. */
@media(max-width:700px){
 html body>nav[data-menu-shell],
 html body .growth-records>.gr-site-nav,
 html body .project-page>.gr-site-nav,
 html body .intro-detail-page>nav[data-menu-shell]{z-index:200!important}
 html body .growth-records .gr-shell>.gr-nav,
 html body .project-page .project-page-nav,
 html body .professional-detail .professional-detail-back,
 html body .work-archive.records-layout>.work-back:not(.work-end),
 html body .intro-detail-page .intro-detail-back{z-index:5!important}
}

/* Phone orientation guard only. Viewport geometry uses the 1030/1031-1019
   browser defaults; no safe-area extension, reserved strip, or height override. */
html.phone-landscape{overflow:hidden!important}
.phone-portrait-guard:not([open]){display:none!important}
html.phone-display dialog.phone-portrait-guard[open]{
 position:fixed;inset:0;z-index:2147483647;width:100%;max-width:none;height:100dvh;max-height:none;
 box-sizing:border-box;margin:0;border:0;border-radius:0;padding:24px;
 padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
 background:var(--bg,#141417);color:var(--ink,#eee);text-align:center;overscroll-behavior:none;
}
.phone-portrait-guard::backdrop{background:var(--bg,#141417)}
.phone-portrait-guard h2{margin:0;font-size:20px;line-height:1.4}
.phone-portrait-guard p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}
.phone-portrait-icon{display:block;width:30px;height:48px;border:2px solid currentColor;border-radius:7px;position:relative}
.phone-portrait-icon::after{content:'';position:absolute;bottom:4px;left:9px;right:9px;height:2px;background:currentColor;border-radius:2px}


/* Solid browser edge for ordinary pages and fixed reading layers alike.
   >10px avoids WebKit treating it as a thin decorative border. No viewport
   resizing, transformed scroll parent, transition timing, or input capture. */
html.phone-display body>.phone-browser-edge{
 position:fixed;left:0;right:0;bottom:0;height:12px;
 background:var(--bg);pointer-events:none;z-index:999999;
}

/* The user requested that the gold work-page sweep cross the browser-reserved
   strip too. Its existing horizontal animation is untouched. Normal document
   paint reaches behind Safari's translucent toolbar; fixed paint is clipped. */
html.phone-display.phone-gold-sweep body>.page-route-curtain{
 position:absolute!important;top:calc(var(--phone-gold-scroll-y) - 2px)!important;
 bottom:auto!important;height:calc(100lvh + 4px)!important;
}
html.phone-display.phone-gold-sweep body>.phone-browser-edge{
 position:absolute;top:calc(var(--phone-gold-scroll-y) + 100dvh - 12px);
 bottom:auto;height:calc(max(0px,100lvh - 100dvh) + 14px);
}

body > footer.portfolio-copyright{display:block;max-width:none;width:100%;box-sizing:border-box;margin:0;padding:30px 28px 34px;border-top:1px solid color-mix(in srgb,var(--muted) 18%,transparent);color:var(--muted);font-size:11px;line-height:1.85;text-align:left}
.portfolio-copyright .copyright-inner{max-width:1080px;margin:0 auto}
.portfolio-copyright p{margin:0}.portfolio-copyright .copyright-owner{color:var(--ink)}
.portfolio-copyright .copyright-meta{display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;margin-bottom:0;font-size:12px}
.portfolio-copyright .copyright-meta>span{white-space:nowrap}
.portfolio-copyright .copyright-notices{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.portfolio-copyright .copyright-notice{overflow-wrap:anywhere}
.portfolio-copyright .copyright-notice[lang="ko"]{word-break:keep-all}
@media(max-width:700px){body > footer.portfolio-copyright{padding:24px 20px}.portfolio-copyright .copyright-meta{gap:4px;margin-bottom:0}.portfolio-copyright .copyright-notices{grid-template-columns:1fr;gap:10px}}

/* Palette reference: Radix Colors, pure Gray scale (gray2/3/4/6/7/11/12).
   https://www.radix-ui.com/colors/docs/palette-composition/composing-a-palette */
/* Light mode: color-only overrides. Keep layout, imagery and motion intact. */
html:not([data-theme="dark"]) {
  --ink: #202020;
  --muted: #646464;
  --bg: #f0f0f0;
  --line: #d9d9d9;
  background-color: var(--bg);
}
html:not([data-theme="dark"]) body { background-color: var(--bg); }
html:not([data-theme="dark"]) body > nav {
  background-color: rgba(240, 240, 240, .91);
  border-color: #d9d9d9;
}
html:not([data-theme="dark"]) .theme-toggle {
  color: #646464;
  border-color: #cecece;
}
html:not([data-theme="dark"]) .theme-toggle:hover { background-color: #e8e8e8; }

/* One continuous tone across the existing masked introduction sequence. */
html:not([data-theme="dark"]) .cover-profile-sequence,
html:not([data-theme="dark"]) .cover-profile-stage,
html:not([data-theme="dark"]) .cover-profile-stage > .hero,
html:not([data-theme="dark"]) .cover-profile-stage > #about {
  background-color: #f0f0f0 !important;
}
html:not([data-theme="dark"]) .hero,
html:not([data-theme="dark"]) .about { background-color: #f0f0f0; border-color: #d9d9d9; }
html:not([data-theme="dark"]) .scroll-story,
html:not([data-theme="dark"]) .scene { background-color: #e8e8e8; }
html:not([data-theme="dark"]) #projects { background-color: #f0f0f0; }
html:not([data-theme="dark"]) #growth.growth-gallery { background-color: #e8e8e8; }
html:not([data-theme="dark"]) .closing { background-color: #f0f0f0; border-color: #d9d9d9; }
html:not([data-theme="dark"]) footer.portfolio-copyright { background-color: #e8e8e8; }

/* Distinguish surfaces through their fill; retain every existing border width. */
html:not([data-theme="dark"]) #about .profile-skill-group .skill-logo-tile,
html:not([data-theme="dark"]) #about .profile-skill-group .skill-logo-tile:hover {
  background-color: #e8e8e8 !important;
  border-color: #d9d9d9 !important;
}
html:not([data-theme="dark"]) #projects .work-card {
  background-color: #f9f9f9;
  border-color: #d9d9d9;
}
html:not([data-theme="dark"]) #projects .work-card-bottom i { border-color: #cecece; }
html:not([data-theme="dark"]) .intro-detail-page .intro-detail-back {
  background-color: rgba(240, 240, 240, .92);
}
html[data-theme="light"] .portfolio-return-control,
html[data-theme="light"] .growth-records .gr-nav .gr-back,
html[data-theme="light"] .growth-records .gr-nav .gr-back:hover {
  background-color: rgba(240, 240, 240, .92) !important;
}