@font-face{font-family:Unbounded;src:url(assets/Unbounded.woff2) format('woff2');font-weight:200 900;font-display:swap}
@font-face{font-family:Golos;src:url(assets/GolosText.woff2) format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'Golos Text';src:url(assets/GolosText.woff2) format('woff2');font-weight:400 900;font-display:swap}
:root{--ink:#17171d;--paper:#f6f6f8;--white:#fff;--violet:#5733ff;--pink:#ff2eac;--muted:#62626e;--line:#d7d7df;--page:clamp(22px,5vw,80px);--ease:cubic-bezier(.22,1,.36,1);font-family:Golos,Arial,sans-serif;background:var(--paper);color:var(--ink);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-font-smoothing:antialiased}body{margin:0;background:var(--paper);color:var(--ink);font-family:Golos,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}img{display:block;max-width:100%;height:auto}button,a{-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}h1,h2,h3,p{margin:0}p{line-height:1.55;text-wrap:pretty}a:focus-visible,button:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--violet);outline-offset:6px}::selection{background:#ddd5ff;color:var(--ink)}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px var(--page);max-width:1324px;margin:auto}.brand{font-size:21px;font-weight:650;letter-spacing:-.04em;white-space:nowrap}.brand span{color:var(--violet)}.header-controls{display:flex;align-items:center;gap:34px}.site-header nav{display:flex;gap:32px;font-size:15px}.site-header nav a{position:relative;padding:8px 0}.site-header nav a:after{content:'';position:absolute;bottom:2px;left:0;width:100%;height:1px;background:var(--violet);transform:scaleX(0);transform-origin:left;transition:transform .24s var(--ease)}.site-header nav a:hover:after{transform:scaleX(1)}#language-select{font:inherit;font-size:13px;background:transparent;border:1px solid var(--line);border-radius:30px;padding:8px 11px;max-width:130px;cursor:pointer}.skip{position:fixed;top:-70px;left:24px;padding:14px;background:white;z-index:100}.skip:focus{top:12px}
#main{max-width:1324px;margin:auto}.intro{padding:52px var(--page) 84px}.intro-top,.intro-bottom{display:flex;justify-content:space-between;align-items:start;gap:24px}.intro-top p{font-size:13px;color:var(--muted)}.intro h1{font-family:Unbounded,Arial,sans-serif;font-weight:600;letter-spacing:-.04em;font-size:clamp(44px,8.1vw,106px);line-height:1.35;white-space:nowrap;margin:22px 0 16px;overflow:hidden}.intro h1>span{display:inline-block}.title-stop{color:var(--violet)}.intro-bottom{align-items:end}.intro-bottom p{font-size:20px;line-height:1.5;max-width:520px}.text-link{font-size:15px;border-bottom:1px solid var(--ink);padding-bottom:8px;transition:color .2s,border-color .2s}.text-link:hover{color:var(--violet);border-color:var(--violet)}.work-section{padding:0 var(--page) 90px}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.section-head h2{font-size:17px;font-family:Golos,Arial,sans-serif;font-weight:500;letter-spacing:0}.section-head>span{font-size:14px;color:var(--muted)}
.project-shell{position:relative;max-width:1180px;container:portfolio / inline-size;border:1px solid var(--line);border-radius:20px;background:white;transition:border-radius .7s var(--ease),border-color .3s,box-shadow .7s var(--ease)}.project-shell .hero{border-radius:24px 24px 0 0;cursor:pointer;transition:border-radius .7s var(--ease)}.project-shell.is-expanded{border-radius:12px;border-color:#bdb6d7}.project-shell.is-expanded .hero{border-radius:12px 12px 0 0}.project-shell .hero-intro{pointer-events:none}.project-shell .device-screen{cursor:pointer}.case-toggle{position:relative;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:64px;width:100%;padding:10px 5%;border:0;border-top:1px solid var(--line);border-radius:0 0 24px 24px;background:#f6f6f8;cursor:pointer;font-size:16px;transition:color .25s,background .25s}.case-toggle-label{display:flex;align-items:center;gap:20px}.case-toggle-label .open-glyph{display:none}.case-toggle .toggle-glyph{display:grid;place-items:center;width:36px;height:36px;border:1px solid #bdb6d7;border-radius:50%;font-size:28px;color:var(--violet);transition:rotate .65s var(--ease),background .25s,color .25s}.case-toggle:hover{background:#eeebff;color:var(--violet)}.case-toggle:active .toggle-glyph{scale:.93}.is-expanded .case-toggle{border-radius:0;background:#17171d;color:white;border-color:#45454f}.is-expanded .toggle-glyph{rotate:45deg;color:white;border-color:#676774}.project-shell:not(.is-expanded):hover{border-color:#b7a8fa;box-shadow:0 25px 65px #17171d10}.project-shell #case-view{border-radius:0 0 12px 12px}.project-shell .finale{border-radius:0 0 12px 12px}
.case-toolbar{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 5%;background:#17171dee;backdrop-filter:blur(16px);color:white;z-index:5;border-bottom:1px solid #676774}.case-toolbar span{font-size:12px;color:#b7b7c4}.case-close{border:0;background:transparent;color:inherit;font-size:14px;cursor:pointer;padding:7px 0}.case-close span{font-size:24px;color:inherit}.reading-progress{position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:var(--violet);transform:scaleX(0);transform-origin:left}.case-bottom{display:flex;justify-content:center;padding:28px;background:var(--violet);color:white}.case-bottom .case-close{border:1px solid #ffffff60;padding:12px 22px;border-radius:30px}
.about{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:30px var(--page) 110px}.about>*{min-width:0}.about h2{font-family:Golos,Arial,sans-serif;font-size:clamp(33px,4vw,60px);line-height:1.2;font-weight:500;letter-spacing:-.035em}.about p{font-size:19px;max-width:520px}.about p+p{margin-top:20px}.muted{color:var(--muted)}#home-view>footer{display:flex;justify-content:space-between;gap:24px;margin:0 var(--page);padding:25px 0;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
dialog{width:min(1440px,95vw);max-height:94dvh;padding:55px 24px 24px;border:0;border-radius:14px;background:white}dialog::backdrop{background:#17171de5;backdrop-filter:blur(9px)}dialog>img{max-height:75dvh;object-fit:contain;margin:auto}dialog>p{font-size:14px;margin-top:15px;color:var(--muted)}.dialog-close{position:absolute;right:22px;top:12px;border:0;background:var(--paper);padding:8px 16px;border-radius:20px;cursor:pointer}.diagram-view{overflow:auto}.diagram-view>svg{display:block;width:1440px;max-width:none;height:auto;background:white}.diagram-view>.finale-scene{background:var(--violet)}dialog[open]{animation:dialog-enter .3s var(--ease) both}dialog[open]::backdrop{animation:fade-in .2s both}@keyframes dialog-enter{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}@keyframes fade-in{from{opacity:0}to{opacity:1}}
@media(max-width:999px){.project-shell .hero{padding-bottom:28px}.project-shell .hero-intro-note{white-space:normal}.intro{padding-top:32px;padding-bottom:62px}.intro h1{font-size:8.4vw}.intro-top p:first-child{display:none}.intro-bottom p{font-size:18px}.case-toggle{min-height:64px}.about{gap:44px}.diagram-view>svg{width:1200px}}
@media(max-width:760px){.site-header{padding-top:22px;padding-bottom:22px}.header-controls{gap:18px}.site-header nav{gap:24px}#language-select{font-size:12px;padding:7px 9px}.intro-bottom p{font-size:16px}.text-link{font-size:13px;max-width:95px;line-height:1.45}.intro-top p{font-size:12px}.work-section{padding-bottom:64px}.project-shell,.project-shell .hero{border-radius:16px}.project-shell .hero{border-radius:16px 16px 0 0}.case-toggle{font-size:15px;border-radius:0 0 16px 16px}.case-toolbar>span{max-width:135px;text-align:right;font-size:11px}.case-close{font-size:12px}.about{grid-template-columns:1fr;gap:28px;padding-bottom:65px}.about h2{font-size:35px}.about p{font-size:17px}#home-view>footer{font-size:12px}}
@media(max-width:380px){.site-header{display:grid;grid-template-columns:1fr;gap:18px}.header-controls{justify-content:space-between;width:100%}.site-header nav{font-size:14px;gap:22px}#language-select{font-size:13px;padding:7px 9px}.intro h1{font-size:8.4vw}.about h2{font-size:33px}.case-toggle{gap:10px;font-size:14px}.case-toggle .toggle-glyph{width:38px;height:38px;flex:none}.project-shell .cover-meta{gap:14px;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.motion-item{opacity:1!important;translate:none!important;filter:none!important}.hero-device,.history-screen-stage{translate:none!important;scale:1!important}}

.is-expanded .case-toggle{position:sticky;top:0;z-index:5;background:#17171dee;backdrop-filter:blur(16px)}.case-toggle-label [aria-hidden="true"]{display:none}

/* Web layout: the case owns its breakpoints; artwork never drifts away from connectors. */
.project-shell p{text-wrap:initial}.project-shell .hero-intro-note{white-space:normal}
.project-shell .hero-device,.history-screen-stage{translate:none;scale:1}
#overview .overview-tool-copy>small>span[data-i18n]{border:0;margin:0;padding:0;color:inherit}
.cm-eyebrow>span[data-i18n],.yaml-eyebrow>span[data-i18n],.idm-eyebrow>span[data-i18n]{margin:0;border:0;padding:0}
#case-view{overflow:clip;overflow-anchor:none}.case-toggle{overflow-anchor:none}
.project-shell.is-transitioning{overflow:clip}.project-shell.is-transitioning .case-toggle{position:relative}
.case-toggle:focus-visible{outline-offset:-5px}.reading-progress{height:3px}
.case-toggle .toggle-glyph{font-size:0;position:relative;border-radius:50%}
.toggle-glyph::before,.toggle-glyph::after{content:"";position:absolute;width:12px;height:1.5px;background:currentColor;transition:transform .4s var(--ease)}
.toggle-glyph::after{transform:rotate(90deg)}
.case-toggle:hover .toggle-glyph::before{transform:rotate(90deg)}.case-toggle:hover .toggle-glyph::after{transform:rotate(180deg)}
.text-link{display:inline-flex;align-items:center;gap:12px}.text-link:hover{translate:3px 0;transition:translate .3s var(--ease)}
.case-bottom .case-close{transition:background .25s,color .25s,translate .3s var(--ease)}.case-bottom .case-close:hover{background:#fff;color:var(--violet);translate:0 -3px}
@media(min-width:1000px){.intro{padding-top:36px;padding-bottom:64px}.intro h1{margin:12px 0}.intro-bottom p{font-size:18px}.about h2{font-size:44px}}
@media(max-width:760px){:root{--page:18px}.intro h1{font-size:8.6vw}.intro-bottom{align-items:start}.intro-bottom p{max-width:70%}.project-shell .case-toggle{font-size:14px}}
@container portfolio (max-width:839px){.project-shell .hero{padding-bottom:36px}}
@media(prefers-reduced-motion:reduce){.project-shell *{scroll-behavior:auto!important}}

@container portfolio (max-width:959px){
 .cm-job-map{height:auto;display:flex;flex-direction:column;gap:24px;padding-left:18px;border-left:1px solid #baaafc}
 .cm-job-map>div,.cm-job-map>.cm-job-manual{position:relative;inset:auto;width:100%;height:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:12px}
 .cm-job-map>div:before{content:"";position:absolute;left:-19px;top:50%;width:18px;border-top:1px solid #baaafc}
 .cm-job-map .cm-pipeline-wires{display:none}.cm-job-failed{order:0}.cm-job-manual{order:1}.cm-job-approval{order:3}.cm-job-deploy{order:4}
 .cm-job-map b{margin:0}.cm-job-map>.cm-job-manual{padding-left:42px}.cm-job-map .cm-manual-user{left:10px;right:auto;top:50%;transform:translateY(-50%);width:24px;height:24px}.cm-job-manual>span{padding-right:0}
 .cm-job-map>p{position:relative;inset:auto;width:auto;order:2;margin:0;font-size:16px;line-height:1.5}
}

@container portfolio (max-width:839px){
 #history .history-scene{width:min(100%,420px);aspect-ratio:1/1.65;margin:8px auto 0;overflow:hidden}
 #history .history-scene-photo,#history .history-screen-stage{left:-108%;top:0;width:220%;height:auto;aspect-ratio:4/3}
}

#history .history-scene-photo{max-width:none}
@container portfolio (max-width:599px){
 .cm-intro p,.yaml-intro p,.idm-intro p,.cm-input-note p,.arch-intro p,#history .lede{font-size:17px;line-height:1.55}
}
@media(prefers-reduced-motion:no-preference){
 .intro h1>span{animation:signature .85s cubic-bezier(.16,1,.3,1) both}.intro h1>span:nth-child(2){animation-delay:.1s}
 @keyframes signature{from{clip-path:inset(0 100% 0 0);transform:translateX(-12px)}to{clip-path:inset(0 0 0 0);transform:translateX(0)}}
}

/* Small case containers use content flow; fixed artwork keeps its original coordinates. */
@container portfolio (max-width:599px){
 .hero-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .hero-stage>aside,.hero-run>div,.hero-catalog li>span{min-width:0}
 .hero-catalog{margin-right:0}
 .hero-catalog li,.hero-run span,.hero-sub{white-space:normal;overflow-wrap:anywhere}
 .hero-sub{max-width:100%;text-wrap:initial}
 #overview .overview-tools{grid-template-columns:minmax(0,1fr);min-width:0}
 #overview .overview-tool{min-width:0}
 #overview .overview-pipeline{grid-template-columns:minmax(0,1fr);gap:12px}
 #overview .overview-stage>b{white-space:normal;min-width:0;flex-wrap:wrap}
 #overview .overview-link{width:24px;height:32px;justify-self:center;transform:rotate(90deg)}
 #overview .overview-roles{grid-template-columns:minmax(0,1fr);gap:12px}
 #overview .overview-role{min-width:0;min-height:0;padding:14px 16px}
 #overview .overview-role b{font-size:16px;overflow-wrap:anywhere}
 #overview .overview-role:first-child:after,#overview .overview-role:nth-child(3):before,#overview .overview-conflict:before{display:none}
 #overview .overview-role-owner{justify-self:center;position:relative}
 #overview .overview-role-owner:before,#overview .overview-role-owner:after{content:"";position:absolute;left:50%;height:12px;border-left:1px solid var(--overview-line)}
 #overview .overview-role-owner:before{bottom:100%}
 #overview .overview-role-owner:after{top:100%}
 #overview .overview-conflict>span{top:0;margin-bottom:8px}
 #overview .overview-conflict>div{min-width:0}
 #overview .overview-conflict b{min-width:0;overflow-wrap:anywhere}
 .cm-output-states{grid-template-columns:minmax(0,1fr);gap:14px}
 .cm-output-states>span{display:grid;grid-template-columns:27px minmax(0,1fr);column-gap:12px;row-gap:0;min-width:0}
 .cm-output-states>span>svg{grid-column:1;grid-row:1/span 2}
 .cm-output-states>span>span{grid-column:2;min-width:0;overflow-wrap:anywhere}
 .cm-output-states>span>br{display:none}
 .cm-skip-outcomes>div{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);height:auto;padding-block:10px}
 .cm-skip-outcomes>div>span,.cm-skip-outcomes>div>b{min-width:0;overflow-wrap:anywhere}
 .cm-job-map>div{min-width:0;flex-wrap:wrap}
 .cm-job-map>div>span{min-width:0;flex:1 1 100px;overflow-wrap:anywhere}
 .cm-job-map>.cm-job-manual>span{flex-basis:100%}
 .cm-job-map b{min-width:0;max-width:100%;flex-wrap:wrap}
 .cm-pr-facts>div{height:auto;min-height:45px;padding-block:10px;align-items:flex-start}
 .cm-pr-facts b,.cm-pr-facts span{min-width:0;overflow-wrap:anywhere}
 .idm-source-facts{grid-template-columns:minmax(0,1fr);gap:16px}
 .idm-source-facts>span,.idm-source-facts>span>span{min-width:0;overflow-wrap:anywhere}
 #history .history-live-copy,#history .history-output>div{min-width:0}
 #history .history-live{grid-template-columns:156px minmax(0,1fr)}
 #history .history-output{grid-template-columns:88px minmax(0,1fr)}
 #history .history-run-controls>span,#history .history-download>span{min-width:0;overflow-wrap:anywhere}
 .arch-canvas{grid-template-columns:minmax(0,1fr)}
 .arch-canvas>*{min-width:0}
 .arch-canvas h2,.arch-canvas h3,.arch-canvas h4{overflow-wrap:anywhere}
 .arch-layer>div,.arch-history-result>div{min-width:0}
 .arch-layer h3{font-size:clamp(22px,7cqw,27px)}
 .arch-entrance-note{margin-left:0;min-width:0;align-items:flex-start}
 .arch-entrance-note>span{min-width:0;overflow-wrap:anywhere}
 .arch-deploy-summary{flex-wrap:wrap;gap:16px}
 .arch-deploy-summary>div{min-width:0;flex-wrap:wrap}
 .arch-deploy-summary p{max-width:none;flex:1 1 180px}
 .arch-canvas .diagram-zoom{max-width:100%;white-space:normal;text-align:left}
 .arch-canvas .diagram-zoom>span{min-width:0;overflow-wrap:anywhere}
 .arch-history-result>.arch-icon,.arch-entrance-note>.arch-icon{flex:none}
}
@container portfolio (max-width:399px){
 .idm-intro h2{font-size:clamp(22px,8.5cqw,26px);overflow-wrap:anywhere}
 .arch-intro h2{font-size:clamp(27px,10cqw,34px)}
 #history .history-live,#history .history-output{grid-template-columns:minmax(0,1fr);gap:20px}
 #history .history-timer,#history .history-file{justify-self:center}
 #history .history-live h3,#history .history-output h3{overflow-wrap:anywhere}
}

@container portfolio (max-width:599px){.idm-relationship{grid-template-columns:minmax(0,1fr)}.idm-relationship>*{min-width:0}.idm-access h3{overflow-wrap:anywhere}}
@container portfolio (max-width:399px){.idm-access h3{font-size:20px}}