:root{color-scheme:dark;--bg:#0f172a;--panel:#1e293b;--border:#334155;--text:#f8fafc;--muted:#a1aec1;--quiet:#8493a9;--green:#22c55e;--mono:'JetBrains Mono',monospace;--sans:'IBM Plex Sans','Noto Sans KR',sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px}
body{margin:0;font-family:var(--sans);color:var(--text);background:var(--bg);line-height:1.75;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:6px;border-radius:4px}
::selection{background:#22c55e40;color:#fff}
.container{width:min(1100px,100%);margin-inline:auto;padding-inline:32px}
.skip-link{position:fixed;top:-100px;left:20px;z-index:200;background:var(--green);color:var(--bg);padding:10px 20px}
.skip-link:focus{top:20px}
.nav{position:fixed;z-index:20;top:12px;left:12px;right:12px;border:1px solid transparent;border-radius:14px;transition:background .2s,border-color .2s}
.nav.scrolled{background:#0f172aea;backdrop-filter:blur(16px);border-color:#33415599;box-shadow:0 8px 30px #0002}
.nav-inner{display:flex;align-items:center;justify-content:space-between;min-height:54px}
.brand{font-family:var(--mono);font-size:17px;font-weight:600;letter-spacing:-.5px;color:var(--green);white-space:nowrap}
.brand-dim{color:var(--quiet);font-weight:400}
.nav-links{display:flex;gap:32px}
.nav-links a{position:relative;font-size:14px;color:var(--muted);padding:8px 0}
.nav-links a::after{content:'';position:absolute;bottom:4px;left:0;right:0;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--text)}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
.hero{min-height:max(780px,100svh);position:relative;display:grid;place-items:center;padding:118px 24px 130px;background:radial-gradient(ellipse at 27% 40%,#22c55e07,transparent 60%),radial-gradient(ellipse at 80% 65%,#38bdf806,transparent 50%),var(--bg)}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#94a3b814 1px,transparent 1px);background-size:32px 32px}
.hero-content{position:relative;max-width:636px;width:100%}
.hero-greeting{color:var(--green);font-family:var(--mono);font-size:16px;letter-spacing:.5px;margin-bottom:22px}
.hero h1{font-size:clamp(44px,5vw,60px);line-height:1.18;font-weight:700;letter-spacing:-2.5px;margin-bottom:20px}
.name-dot{color:var(--green)}
.hero-role{font-size:24px;font-weight:300;color:var(--muted);margin-bottom:30px;line-height:1.4}
.hero-description{font-size:15px;line-height:1.95;color:var(--muted);word-break:keep-all}
.hero-highlights{list-style:none;padding:0;margin:30px 0;display:grid;gap:17px}
.hero-highlights li{border-left:2px solid #22c55e40;padding-left:16px}
.hero-highlights span{display:block;font-size:14px;color:#e2e8f0}
.hero-highlights strong{display:block;font-size:13px;font-weight:500;color:var(--green);margin-top:3px}
.hero-links{display:flex;gap:27px;flex-wrap:wrap}
.hero-links a{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;transition:color .2s}
.hero-links a:hover{color:var(--green)}
.hero-links svg,.footer-actions svg,.evidence-links svg{width:18px;height:18px;flex-shrink:0}
.scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:10px;color:var(--quiet);font-family:var(--mono);font-size:10px;letter-spacing:2px}
.scroll-hint i{width:1px;height:30px;background:linear-gradient(var(--green),transparent)}
.section{padding:96px 0}
.section-alt{background:var(--panel)}
.section-title{font-size:32px;line-height:1.4;font-weight:600;letter-spacing:-.6px;position:relative;padding-bottom:16px;margin-bottom:55px}
.section-title::after{content:'';width:40px;height:3px;background:var(--green);position:absolute;left:0;bottom:0;border-radius:3px}
.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.section-aside{color:var(--quiet);font-size:12px}
.timeline{position:relative;padding:24px 0 12px}
.timeline::before{content:'';width:2px;position:absolute;left:calc(50% - 1px);top:0;bottom:0;background:linear-gradient(transparent,var(--border) 4%,var(--border) 96%,transparent)}
.timeline-item{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-bottom:58px}
.timeline-item:last-child{margin-bottom:0}
.timeline-dot{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid #536278;z-index:1}
.current .timeline-dot{background:var(--green);border-color:var(--green);box-shadow:0 0 16px #22c55e50}
.timeline-content{padding-right:48px;text-align:right}
.timeline-item:nth-child(even) .timeline-content{grid-column:2;padding:0 0 0 48px;text-align:left}
.badge{display:inline-block;border-radius:20px;padding:2px 10px;background:#334155;color:#b6c2d2;font-size:11px;margin-bottom:10px}
.current .badge{color:var(--green);background:#22c55e12}
.timeline-date{display:block;font-size:11px;color:var(--quiet);font-family:var(--mono);margin-bottom:8px}
.timeline h3{font-size:17px;line-height:1.5;margin-bottom:10px;font-weight:600}
.timeline p{color:var(--muted);font-size:13px;line-height:1.9;word-break:keep-all}
.tags{display:flex;gap:7px;flex-wrap:wrap}
.tags span{border:1px solid #22c55e40;color:var(--green);background:#22c55e04;border-radius:20px;font-size:11px;line-height:1.6;padding:4px 11px}
.timeline .tags{margin-top:15px;justify-content:flex-end;gap:5px}
.timeline .tags span{padding:3px 9px;font-size:10px}
.timeline-item:nth-child(even) .tags{justify-content:flex-start}
.timeline-mark{grid-column:2;grid-row:1;align-self:center;padding-left:60px;color:#728399;display:grid;gap:6px}
.timeline-mark strong{font-size:33px;line-height:1.2;letter-spacing:-1.5px;font-weight:600}
.timeline-mark strong span{font-weight:300}
.timeline-mark>span{font-family:var(--mono);font-size:8px;letter-spacing:1.6px;color:#8b9ab0}
.timeline-item:nth-child(even) .timeline-mark{grid-column:1;text-align:right;padding:0 60px 0 0}
.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.project-card{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:14px;background:var(--panel);overflow:hidden;box-shadow:0 2px 8px #0003;transition:transform .23s,border-color .23s,box-shadow .23s}
.project-card:hover{transform:translateY(-6px);border-color:#22c55e55;box-shadow:0 16px 35px #0004}
.project-art{position:relative;overflow:hidden;aspect-ratio:16/9;background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--art) 7%,transparent),transparent 65%),repeating-linear-gradient(0deg,transparent 0 31px,#94a3b804 31px 32px),repeating-linear-gradient(90deg,transparent 0 31px,#94a3b804 31px 32px),#0c121e;display:flex;flex-direction:column;align-items:center;justify-content:center;border-bottom:1px solid #33415566}
.art-corner{position:absolute;left:20px;top:14px;font-family:var(--mono);font-size:8px;letter-spacing:1px;color:#7d8ba0}
.project-art>svg{width:83%;height:auto;max-height:64%;flex-shrink:0;transition:transform .3s}
.project-card:hover .project-art>svg{transform:translateY(-3px) scale(1.025)}
.art-title{font-size:clamp(15px,1.5vw,20px);font-weight:700;line-height:1.6;color:#e2e8f0;letter-spacing:-.5px}
.art-caption{color:var(--art);opacity:.8;font-family:var(--mono);font-size:8px;letter-spacing:1.7px;margin-top:5px}
.project-body{padding:23px 24px 24px;flex:1;display:flex;flex-direction:column}
.project-category{font:400 9px/1.6 var(--mono);color:var(--quiet);letter-spacing:.7px}
.project-body h3{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:17px;line-height:1.65;font-weight:600;margin:8px 0 10px;letter-spacing:-.4px;word-break:keep-all}
.project-body h3>span{flex-shrink:0;color:var(--quiet);transition:color .2s}
.project-card:hover h3,.project-card:hover h3>span{color:var(--green)}
.project-body p{font-size:13px;line-height:1.85;color:var(--muted);margin-bottom:20px;word-break:keep-all}
.project-body .tags{margin-top:auto}
.skill-categories{display:grid;gap:35px}
.skill-categories h3{font-size:11px;font-weight:500;letter-spacing:1.5px;color:var(--quiet);margin-bottom:15px}
.skill-tags{display:flex;flex-wrap:wrap;gap:10px}
.skill-tag{--skill:#a1aec1;display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border:1px solid var(--border);border-radius:6px;font-size:14px;background:#1e293b;transition:border-color .2s,transform .2s}
.skill-tag b{color:var(--skill);font:600 12px var(--mono);min-width:17px;text-align:center}
.skill-tag:hover{border-color:var(--skill);transform:translateY(-2px)}
footer{background:var(--bg);border-top:1px solid #33415570}
.footer-inner{display:flex;justify-content:space-between;align-items:center;padding-block:30px;color:var(--quiet);font-size:12px;gap:20px}
.footer-actions{display:flex;gap:25px;align-items:center}
.footer-actions>a{display:flex}
.print-button{border:1px solid var(--border);border-radius:6px;color:var(--muted);background:transparent;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;padding:8px 12px}
.print-button:hover{color:var(--text);border-color:var(--green)}
.detail-main{padding-top:115px;padding-bottom:70px}
.back-link{color:var(--muted);font-size:13px}
.back-link:hover{color:var(--green)}
.detail-header{max-width:790px;margin-top:46px;margin-bottom:44px}
.detail-header .project-category{color:var(--green);font-size:11px}
.detail-header h1{font-size:clamp(28px,4vw,42px);line-height:1.4;letter-spacing:-1.3px;margin:16px 0 20px;word-break:keep-all}
.detail-lead{color:var(--muted);font-size:16px;line-height:1.9;margin-bottom:25px;word-break:keep-all}
.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 215px;gap:60px}
.case-study{min-width:0}
.case-study>.project-art{border:1px solid var(--border);border-radius:12px}
.case-study .art-title{font-size:24px}
.case-outcome{margin-top:30px;border-left:2px solid var(--green);background:#22c55e08;padding:20px 24px}
.case-outcome span{color:var(--green);font-size:11px}
.case-outcome p{font-size:16px;margin-top:7px;line-height:1.8;word-break:keep-all}
.case-section{padding-top:50px}
.case-index{color:var(--green);font:12px var(--mono)}
.case-section h2{font-size:22px;line-height:1.5;letter-spacing:-.5px;margin:10px 0 20px;word-break:keep-all}
.case-section p{font-size:15px;color:var(--muted);line-height:2;word-break:keep-all}
.case-sidebar{position:sticky;top:112px;align-self:start;font-size:13px;color:var(--muted)}
.sidebar-label{font:10px var(--mono);color:var(--quiet);margin-bottom:12px}
.sidebar-rule{border-top:1px solid var(--border);margin:25px 0}
.case-sidebar nav{display:grid;gap:15px}
.case-sidebar nav a{display:flex;gap:10px;font-size:11px}
.case-sidebar nav a:hover{color:var(--green)}
.evidence-links{display:flex;gap:12px;flex-wrap:wrap}
.evidence-links a{display:inline-flex;gap:8px;align-items:center;font-size:13px;border:1px solid var(--border);padding:10px 14px;border-radius:6px;color:var(--green)}
.next-project{margin-top:70px;padding-top:27px;border-top:1px solid var(--border);display:grid;gap:8px}
.next-project span{color:var(--quiet);font-size:12px}
.next-project strong{font-weight:500;font-size:19px}
.next-project:hover strong{color:var(--green)}
@media(max-width:760px){
.container{padding-inline:24px}.nav{left:8px;right:8px;top:8px}.nav-inner{min-height:50px;padding-inline:16px}.nav-links{gap:20px}.nav-links a{font-size:12px}.brand{font-size:15px}
.hero{min-height:790px;padding:125px 26px 110px}.hero h1{font-size:49px}.hero-role{font-size:21px}.hero-description{font-size:14px}.hero-highlights strong{font-size:12px}
.section{padding:70px 0}.section-title{font-size:28px;margin-bottom:42px}.section-aside{display:none}
.timeline{padding-top:12px}.timeline::before{left:5px}.timeline-item,.timeline-item:nth-child(even){display:block;padding-left:33px;margin-bottom:45px}.timeline-dot{left:6px}
.timeline-content,.timeline-item:nth-child(even) .timeline-content{text-align:left;padding:0}.timeline .tags{justify-content:flex-start}.timeline-mark{display:none}.timeline h3{font-size:16px}
.projects-grid{grid-template-columns:1fr;gap:24px}.project-body{padding:21px}.project-body h3{font-size:17px}.art-title{font-size:18px}
.skill-tag{font-size:12px;padding:8px 12px}.footer-inner{padding-block:25px}.footer-actions{gap:15px}
.detail-main{padding-top:95px}.detail-header{margin-top:32px}.detail-header h1{font-size:30px}.detail-lead{font-size:14px}.detail-layout{display:block}.case-sidebar{display:none}.case-study .art-title{font-size:18px}.case-section h2{font-size:20px}.case-section p{font-size:14px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{
:root{color-scheme:light;--bg:#fff;--panel:#fff;--text:#111827;--muted:#374151;--quiet:#4b5563;--green:#16763b;--border:#cbd5e1}
body{background:white;color:#111827}.nav,.skip-link,.scroll-hint,.hero-links,footer,.case-sidebar,.next-project,.back-link,.timeline-mark{display:none}
.hero{min-height:auto;padding:30px 0;background:white}.hero::before{display:none}.hero-content{max-width:none;width:100%;padding:0 32px}.hero h1{font-size:38px}.hero-highlights span{color:#111827}
.section{padding:30px 0}.section-title{margin-bottom:25px;font-size:25px}.timeline::before,.timeline-dot{display:none}.timeline-item{display:block;margin-bottom:24px;break-inside:avoid}
.timeline-content,.timeline-item:nth-child(even) .timeline-content{padding:0;text-align:left}.timeline .tags{justify-content:flex-start}.badge,.skill-tag{background:#f1f5f9;color:#334155}
.project-card{break-inside:avoid;box-shadow:none}.project-art{print-color-adjust:exact;-webkit-print-color-adjust:exact}.project-body h3>span{display:none}.projects-grid{gap:16px}.project-body{padding:15px}
.detail-layout{display:block}.detail-main{padding-top:25px}.detail-header{margin-top:0}.case-section{break-inside:avoid;padding-top:25px}.case-outcome{break-inside:avoid}
}

/* Resume-based background and additional experience */
.hero-highlights small{display:block;color:var(--quiet);font-size:11px;margin-top:2px}
.project-stage{color:var(--green);font-size:12px;margin-top:18px}
.section-intro{color:var(--muted);font-size:14px;margin-top:-28px;margin-bottom:32px}
.more-projects{margin-top:32px}
.more-projects summary{cursor:pointer;list-style:none;display:flex;gap:16px;align-items:center;justify-content:center;padding:18px 22px;border:1px solid var(--border);border-radius:10px;color:var(--muted);font-size:14px}
.more-projects summary::-webkit-details-marker{display:none}
.more-projects summary::after{content:'+';font-size:20px;color:var(--green)}
.more-projects[open] summary::after{content:'−'}
.more-projects summary span{font:10px var(--mono);color:var(--quiet)}
.more-projects[open] .projects-grid{margin-top:24px}
.more-projects summary:hover{color:var(--text);border-color:var(--green)}
.more-projects summary:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.background-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:50px 55px}
.group-label{font:500 11px/1.8 var(--mono);letter-spacing:1px;color:var(--green);margin-bottom:22px}
.background-item{padding:18px 0;border-bottom:1px solid #33415580}
.background-item:first-of-type{padding-top:0}
.item-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;justify-content:space-between;margin-bottom:9px}
.item-heading h3{font-size:15px;font-weight:500;word-break:keep-all}
.item-date{font-size:11px;color:var(--quiet)}
.background-item p{color:var(--muted);font-size:13px;line-height:1.9;word-break:keep-all}
.experience-list .background-item{padding:24px 0}
.experience-list .background-item:first-child{padding-top:0}
.experience-list p{max-width:870px}
@media(max-width:760px){.nav-links{gap:12px}.nav-links a{font-size:11px}.nav-inner{padding-inline:12px}.hero{padding-top:110px}.background-grid{grid-template-columns:1fr;gap:38px}.more-projects summary{font-size:12px;gap:10px}.more-projects summary span{display:none}}
@media print{.background-grid{gap:20px}.background-group,.background-item{break-inside:avoid}.hero-highlights small{color:#374151}.more-projects summary{display:none}}

/* Detailed journey: context, concrete contributions, then tools */
.timeline-highlights{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.timeline-highlights li{position:relative;padding-right:14px;font-size:12px;line-height:1.85;color:var(--muted);word-break:keep-all}
.timeline-highlights li::before{content:'·';position:absolute;right:0;top:0;color:var(--green);font-weight:700}
.timeline-highlights strong{font-weight:500;color:#d6dfeb}
.timeline-item:nth-child(even) .timeline-highlights li{padding-right:0;padding-left:14px}
.timeline-item:nth-child(even) .timeline-highlights li::before{right:auto;left:0}
.timeline-note{display:block;font-size:11px;color:var(--quiet);margin-top:2px}
.timeline-detail-link{display:inline-block;font-size:11px;color:var(--green);margin-top:16px}
.timeline-detail-link:hover{text-decoration:underline;text-underline-offset:4px}
.nav-links{flex-shrink:0}
@media(max-width:520px){.nav-inner{flex-wrap:wrap;gap:3px;padding-block:9px}.nav-links{width:100%;justify-content:space-between}.nav-links a{padding:2px 0}.nav-links a::after{bottom:0}}
.timeline-item.current::after{content:'';position:absolute;left:calc(50% - 1px);top:9px;bottom:-12px;width:2px;background:var(--green)}
.timeline-item{margin-bottom:76px}
.timeline-mark{align-self:start;margin-top:75px}
@media(max-width:760px){
.timeline-highlights li,.timeline-item:nth-child(even) .timeline-highlights li{padding-right:0;padding-left:14px}
.timeline-highlights li::before{right:auto;left:0}
.timeline-item.current::after{left:5px}
.timeline-item,.timeline-item:nth-child(even){margin-bottom:48px}
}
@media print{
.timeline-highlights li,.timeline-item:nth-child(even) .timeline-highlights li{padding-right:0;padding-left:14px}
.timeline-highlights li::before{right:auto;left:0}
.timeline-highlights strong{color:#111827}
.timeline-item.current::after,.timeline-detail-link{display:none}
}

/* Long-form case studies */
.case-cover{margin:32px 0 42px}
.case-cover .project-art{aspect-ratio:2.4/1;border:1px solid var(--border);border-radius:14px}
.case-cover .project-art>svg{width:48%;max-height:66%}
.case-cover .art-title{font-size:28px}
.case-cover .art-caption{font-size:10px}
.detail-header{max-width:860px;margin-top:0;margin-bottom:32px}
.detail-header h1{font-size:clamp(28px,3.4vw,40px);letter-spacing:-1px}
.case-facts{display:grid;grid-template-columns:1.3fr 1fr 1.1fr;gap:22px;margin:0;padding:26px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.case-facts div{min-width:0}
.case-facts dt{font-size:11px;color:var(--quiet);margin-bottom:9px}
.case-facts dd{margin:0;color:#cbd5e1;font-size:13px;line-height:1.8;word-break:keep-all}
.case-summary{margin:28px 0 58px}
.detail-layout{grid-template-columns:minmax(0,1fr) 220px;gap:56px}
.case-study{grid-column:1;grid-row:1}
.case-sidebar{grid-column:2;grid-row:1;top:100px;max-height:calc(100svh - 130px);overflow-y:auto;scrollbar-width:thin}
.case-toc summary{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:500;color:var(--text);cursor:pointer;padding-bottom:15px;border-bottom:1px solid var(--border)}
.case-toc summary::-webkit-details-marker{display:none}
.case-toc summary>span{font:9px var(--mono);letter-spacing:1px;color:var(--quiet)}
.case-toc nav{display:grid;gap:5px;padding-top:15px}
.case-toc nav a{padding:7px 0 7px 12px;border-left:2px solid transparent;display:flex;gap:9px;align-items:baseline;color:var(--muted);font-size:11px;line-height:1.7}
.case-toc nav a b{color:var(--quiet);font:10px var(--mono);font-weight:400}
.case-toc nav a:hover,.case-toc nav a[aria-current]{border-color:var(--green);color:var(--green)}
.case-toc nav a[aria-current] b{color:var(--green)}
.case-evidence-label{font-size:10px;color:var(--green);margin-top:28px}
.case-evidence-text{font-size:11px;line-height:1.8;color:var(--quiet);margin-top:7px}
.case-section{padding-top:52px;padding-bottom:4px;border-top:1px solid #33415565;margin-top:45px}
.case-section:first-child{padding-top:0;border-top:0;margin-top:0}
.case-section h2{font-size:24px;line-height:1.55;margin:12px 0 24px;font-weight:600}
.case-section>p{font-size:15px;line-height:2;letter-spacing:-.1px;margin:0 0 20px}
.case-section strong{color:#e2e8f0;font-weight:500}
.case-list{padding-left:20px;color:var(--muted);font-size:14px;line-height:1.9}
.case-list li{margin-bottom:8px}
.case-list li::marker{color:var(--green)}
.case-table-wrap{width:100%;overflow-x:auto;margin:30px 0;border:1px solid var(--border);border-radius:10px;scrollbar-width:thin}
.case-table-wrap:focus-visible,.code-figure pre:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.case-table-wrap table{width:100%;border-collapse:collapse;font-size:12px;line-height:1.8;table-layout:fixed}
.case-table-wrap caption{text-align:left;padding:15px 18px;background:#172235;color:var(--muted);font-size:11px;caption-side:top;border-bottom:1px solid var(--border)}
.case-table-wrap th,.case-table-wrap td{padding:15px 16px;text-align:left;vertical-align:top;border-bottom:1px solid #33415580;word-break:keep-all;overflow-wrap:anywhere}
.case-table-wrap thead th{background:#1e293b;color:#e2e8f0;font-weight:500;font-size:12px}
.case-table-wrap tbody th{color:#d1dae7;font-weight:500;background:#1e293b33}
.case-table-wrap td{color:var(--muted)}
.case-table-wrap tr:last-child>*{border-bottom:0}
.case-table-wrap tbody th:first-child{width:24%}
.case-figure{margin:32px 0;padding:25px 20px 18px;border:1px solid var(--border);border-radius:12px;background:radial-gradient(ellipse at 50% 0%,#22c55e08,transparent 70%),#111b2c}
.flow-steps{list-style:none;counter-reset:flow;display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:14px;margin:0;padding:0}
.flow-steps li{counter-increment:flow;min-width:0;padding:15px 12px;background:#19263a;border:1px solid #365448;border-radius:8px}
.flow-steps li::before{content:counter(flow,decimal-leading-zero);display:block;color:var(--green);font:10px var(--mono);margin-bottom:12px}
.flow-steps strong{display:block;font-size:12px;color:var(--text);font-weight:500;line-height:1.6;word-break:keep-all}
.flow-steps span{display:block;color:var(--muted);font-size:11px;line-height:1.7;margin-top:7px;word-break:keep-all}
.case-figure figcaption{font-size:10px;color:var(--quiet);margin-top:17px;line-height:1.7}
.case-note{margin:28px 0;padding:18px 20px;border-left:2px solid var(--green);background:#22c55e07}
.case-note>strong{font-size:12px;color:var(--green)}
.case-note p{font-size:13px;line-height:1.9;margin-top:8px;color:var(--muted)}
.code-figure{margin:28px 0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#0b1220}
.code-figure figcaption{padding:12px 18px;border-bottom:1px solid var(--border);font-size:10px;color:var(--quiet);background:#172235}
.code-figure pre{margin:0;padding:22px;overflow:auto;color:#b3e0ca;font:12px/2 var(--mono);tab-size:2}
@media(max-width:960px) and (min-width:761px){.detail-layout{grid-template-columns:minmax(0,1fr) 185px;gap:30px}.case-section h2{font-size:22px}.case-table-wrap th,.case-table-wrap td{padding:12px}}
@media(max-width:760px){
.case-cover{margin:25px 0 30px}.case-cover .project-art{aspect-ratio:16/9}.case-cover .project-art>svg{width:80%}.case-cover .art-title{font-size:18px}.case-cover .art-caption{font-size:8px}
.detail-header h1{font-size:28px}.case-facts{grid-template-columns:1fr;gap:18px;padding:22px 0}.case-facts div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px}.case-facts dd{font-size:12px}.case-facts dt{margin:0}.case-summary{margin:24px 0 30px}
.detail-layout{display:flex;flex-direction:column;gap:35px}.case-sidebar{display:block;position:static;width:100%;max-height:none;overflow:visible}.case-toc{padding:19px;border:1px solid var(--border);border-radius:10px;background:#172235}.case-toc nav a{font-size:12px}
.case-evidence-label{margin-top:16px}.case-evidence-text{font-size:10px}.case-section{padding-top:32px;margin-top:32px}.case-section h2{font-size:21px;margin-bottom:20px}.case-section>p{font-size:14px;line-height:1.95}
.case-table-wrap table{min-width:440px;table-layout:auto}.case-table-wrap th,.case-table-wrap td{padding:12px;font-size:11px}.case-table-wrap caption{font-size:10px;padding:12px}
.case-figure{padding:18px 16px 14px}.flow-steps{grid-template-columns:1fr;gap:10px}.flow-steps li{display:grid;grid-template-columns:23px minmax(0,1fr);gap:3px 12px;padding:12px 14px}.flow-steps li::before{grid-row:1/3;margin:3px 0 0}.flow-steps strong{grid-column:2}.flow-steps span{grid-column:2;margin:0}.case-note{padding:15px 18px}.code-figure pre{font-size:11px;padding:16px}
}
@media print{
.case-cover{display:none}.case-facts dd,.case-section strong,.case-table-wrap tbody th,.flow-steps strong{color:#111827}.case-summary{margin-bottom:25px}.detail-layout{display:block}.case-sidebar{display:none}
.case-section{break-inside:auto}.case-section h2{break-after:avoid}.case-table-wrap,.case-figure,.case-note,.code-figure{break-inside:avoid}.case-table-wrap table{min-width:0;font-size:10px}.case-table-wrap th,.case-table-wrap td{padding:8px;color:#374151}.case-table-wrap caption,.case-table-wrap thead th{background:#eef2f6;color:#111827}.case-table-wrap tbody th{background:#f8fafc}
.case-figure,.flow-steps li{background:white}.code-figure,.code-figure figcaption{background:#f8fafc}.code-figure pre{color:#166534;white-space:pre-wrap}.case-note{background:#f0fdf4}.case-section>p{font-size:12px}
}

/* Original product evidence, separate from explanatory diagrams */
.image-case-cover{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:14px;background:#0b1220}
.image-case-cover>img{display:block;width:100%;height:auto;max-height:590px;object-fit:contain}
.image-case-cover>span{position:absolute;left:15px;bottom:13px;background:#0f172ae8;color:#dce8f5;border:1px solid #ffffff20;border-radius:5px;padding:6px 10px;font:9px var(--mono);letter-spacing:1px}
.card-product-image{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0b1220;border-bottom:1px solid var(--border)}
.card-product-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s}
.project-card:hover .card-product-image img{transform:scale(1.025)}
.card-product-image>span{position:absolute;right:12px;bottom:12px;background:#0f172ae8;color:#f1f5f9;border-radius:5px;padding:5px 9px;font-size:10px}
.product-evidence{margin:30px 0;min-width:0}
.evidence-image-link{position:relative;display:block;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#eaf6fa;cursor:zoom-in}
.evidence-image-link img{display:block;width:100%;height:auto}
.image-expand{position:absolute;right:10px;bottom:10px;padding:5px 9px;background:#0f172ae6;border-radius:5px;color:#fff;font-size:10px}
.product-evidence figcaption{margin-top:14px;display:grid;gap:6px}
.product-evidence figcaption strong{font-size:14px;font-weight:500;color:#e2e8f0}
.product-evidence figcaption>span{font-size:12px;line-height:1.85;color:var(--muted)}
.evidence-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.evidence-gallery .product-evidence{margin-top:12px}
.ds-layer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:27px 0}
.ds-layer{min-width:0;padding:17px 16px 18px;border:1px solid var(--border);border-top:2px solid #c084fc;border-radius:8px;background:#172235}
.ds-layer span{display:block;margin-bottom:13px;color:#d8b4fe;font:10px var(--mono);letter-spacing:.5px}
.ds-layer strong{display:block;color:var(--text);font-size:14px;line-height:1.5}
.ds-layer p{margin:8px 0 0;color:var(--muted);font-size:11px;line-height:1.8}
.ds-example-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.ds-example-grid .product-evidence{margin-top:14px}
.design-system-figma .evidence-image-link{height:300px;background:#f3f4f6}
.design-system-figma .evidence-image-link img{max-width:none;height:auto}
.ds-foundation-figure .evidence-image-link img{width:120%;margin-top:-8px}
.ds-text-field-figure .evidence-image-link img{width:270%;margin-top:-70px}
.ds-dropdown-figure .evidence-image-link img{width:210%;margin-top:-55px}
.api-report-evidence{max-width:720px}
.api-report-evidence .evidence-image-link{max-height:460px}
.api-report-evidence .evidence-image-link img{object-fit:cover;object-position:top}
.phone-evidence .evidence-image-link{background:#edf8fd}
.case-section .media-source,.media-source{font-size:11px;line-height:1.8;color:var(--quiet);margin-top:15px}
.media-source a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.case-section .media-scope{font-size:12px;color:var(--muted);line-height:1.9;border-left:2px solid var(--border);padding-left:15px;margin-top:20px}
.experience-evidence{max-width:800px;margin-top:24px}
.experience-evidence .evidence-image-link{background:#0b1220}
.image-lightbox{padding:18px;border:1px solid #475569;border-radius:14px;background:#0b1220;color:var(--text);width:min(1320px,95vw);max-width:95vw;max-height:94svh;overflow:auto}
.image-lightbox::backdrop{background:#030712e8;backdrop-filter:blur(7px)}
.image-lightbox-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:15px}
.image-lightbox-header h2{font-size:15px;font-weight:500}
.image-lightbox-close{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px 13px;cursor:pointer;flex-shrink:0;font-size:13px}
.image-lightbox img{display:block;max-width:100%;max-height:calc(90svh - 110px);width:auto;height:auto;margin:auto;border-radius:6px;object-fit:contain}
.image-lightbox-note{font-size:11px;color:var(--muted);text-align:center;margin-top:12px}
@media(max-width:760px){.evidence-gallery{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(74vw,270px);overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:10px}.evidence-gallery .product-evidence{scroll-snap-align:start}.image-case-cover>span{font-size:7px;padding:4px 7px;left:8px;bottom:8px}.product-evidence figcaption strong{font-size:13px}.image-lightbox{padding:12px}.image-lightbox-header h2{font-size:13px}.image-lightbox-close{font-size:12px}.ds-layer-grid,.ds-example-grid{grid-template-columns:1fr}.ds-layer-grid{gap:9px}.ds-layer{padding:14px 16px}.ds-layer span{margin-bottom:6px}.design-system-figma .evidence-image-link{height:240px}}
@media print{.image-expand,.image-lightbox,.image-case-cover>span{display:none}.product-evidence{break-inside:avoid}.product-evidence figcaption strong{color:#111827}.evidence-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}.image-case-cover{max-width:650px}}
@media print{.design-system-figma .evidence-image-link{height:220px}.ds-layer{background:#f8fafc}.ds-layer strong{color:#111827}.ds-example-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.api-report-evidence .evidence-image-link{max-height:none}}

/* Local AI PM reading path, 2026-09-30. */
.pm-group-heading{margin:46px 0 22px}
.pm-group-heading h3{font-size:21px;letter-spacing:-.4px}
.pm-group-heading p{font-size:14px;color:var(--muted);margin-top:8px;word-break:keep-all}
.projects-grid.primary-projects{grid-template-columns:repeat(3,minmax(0,1fr))}
.primary-projects .project-body{padding:21px 20px}
.primary-projects .project-body h3{font-size:16px}
.primary-projects .project-art .art-title{font-size:15px}
.pm-brief{margin:30px 0 42px;padding:26px 28px;background:#162337;border:1px solid #36516b;border-radius:14px}
.pm-eyebrow{font:500 10px/1.6 var(--mono);color:#69dba6;letter-spacing:1.2px;margin-bottom:8px}
.pm-brief h2{font-size:20px;line-height:1.6;margin-bottom:19px;letter-spacing:-.4px;word-break:keep-all}
.pm-brief dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px}
.pm-brief dt{font-size:11px;letter-spacing:.3px;color:#69dba6;margin-bottom:5px}
.pm-brief dd{margin:0;font-size:14px;line-height:1.85;color:#e2e8f0;word-break:keep-all}
.pm-brief-note{margin-top:20px;padding-top:15px;border-top:1px solid #36516b;color:var(--muted);font-size:12px;line-height:1.9;word-break:keep-all}
.pm-contents-details{margin:20px 0 40px;border-bottom:1px solid var(--border);padding-bottom:17px}
.pm-contents-details>summary{cursor:pointer;color:#dbe8f8;font-size:14px;padding:10px 0}
.pm-contents-details .llm-contents{margin:14px 0 0}
.pm-capability-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.pm-capability-grid a{padding:18px 20px;border:1px solid var(--border);border-radius:9px;background:#172337}
.pm-capability-grid strong{display:block;font-size:15px;color:#e2e8f0}
.pm-capability-grid span{display:block;font-size:13px;color:var(--muted);margin-top:5px;word-break:keep-all}
.pm-capability-grid a:hover{border-color:#4ade8080}
.pm-decision-table{overflow:auto;margin:24px 0;border:1px solid var(--border);border-radius:10px}
.pm-decision-table table{width:100%;border-collapse:collapse;text-align:left;font-size:14px;line-height:1.8}
.pm-decision-table caption{text-align:left;padding:14px 18px;color:var(--muted);background:#172337;font-size:12px}
.pm-decision-table th,.pm-decision-table td{padding:14px 18px;border-top:1px solid var(--border);vertical-align:top;word-break:keep-all}
.pm-decision-table th{color:#dbe8f8;background:#1b2b41;font-weight:500}
.pm-decision-table td{color:var(--muted)}
.case-section .pm-source-line{font-size:12px;color:var(--muted);border-left:2px solid #4ade8080;padding-left:15px;margin-top:20px}
.experience-details{margin-top:0}
.experience-details>summary{justify-content:space-between}
.experience-details>.section-intro{margin:18px 0 24px;padding-inline:22px}
@media(max-width:960px){.projects-grid.primary-projects{grid-template-columns:repeat(2,minmax(0,1fr))}.primary-projects .project-card:last-child{grid-column:1/-1}.primary-projects .project-card:last-child .llm-card-art{max-height:260px}}
@media(max-width:760px){.projects-grid.primary-projects{grid-template-columns:1fr}.primary-projects .project-card:last-child{grid-column:auto}.pm-brief{padding:21px 19px;margin:24px 0 30px}.pm-brief dl,.pm-capability-grid{grid-template-columns:1fr;gap:18px}.pm-brief h2{font-size:18px}.pm-brief dd{font-size:13px}.pm-brief-note{font-size:11px}.pm-group-heading h3{font-size:19px}.pm-group-heading p{font-size:13px}.pm-decision-table table{font-size:12px}.pm-decision-table th,.pm-decision-table td{padding:12px}.pm-decision-table caption{padding:12px;font-size:11px}}
@media print{.pm-brief,.pm-capability-grid a{background:white;color:#111827;break-inside:avoid}.pm-brief dd,.pm-brief-note,.pm-brief dt,.pm-capability-grid strong,.pm-capability-grid span{color:#374151}.pm-brief dl{grid-template-columns:repeat(2,minmax(0,1fr))}.pm-brief{border-color:#cbd5e1}.pm-contents-details{display:none}.pm-decision-table caption,.pm-decision-table th{background:#eef2f6;color:#111827}.pm-decision-table td,.case-section .pm-source-line{color:#374151}}