@font-face{font-family:Inter;src:url('assets/InterVariable.woff2') format('woff2');font-weight:100 900;font-display:swap}
/* Shared palette: https://csri.su/app.css */
:root{--canvas:#f7f8f6;--paper:#fff;--surface:#edf0eb;--ink:#262d27;--strong:#262d27;--muted:#667064;--line:#e0e5dc;--link:#35699a;--focus:#477ead;--cornflower:#6397cb;--wash:rgba(99,151,203,.07);--spot:rgba(99,151,203,.16);color-scheme:light}
:root[data-theme=dark]{--canvas:#1c211f;--paper:#242a27;--surface:#29312b;--ink:#eef1e9;--strong:#eef1e9;--muted:#adb6a6;--line:#3d4741;--link:#99bfe4;--focus:#99bfe4;--cornflower:#83acd5;--wash:rgba(131,172,213,.07);--spot:rgba(131,172,213,.17);color-scheme:dark}
*{box-sizing:border-box;letter-spacing:0}
body{margin:0;background:var(--canvas);color:var(--ink);font:300 14px/1.6 Inter,Arial,sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased}
a{color:inherit}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
.workspace{position:relative;display:flex;flex-direction:column;min-height:100svh;width:min(1040px,100% - 112px);margin:0 auto}.workspace>main{flex:none}.workspace>footer{margin-top:auto}
.preferences{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:0;min-height:40px}
.language-toggle{border:0;background:transparent;min-width:40px;min-height:40px;padding:8px;border-radius:5px;font-size:12px;color:var(--muted)}
.language-toggle{color:var(--link);background:var(--wash);font-weight:400}
.theme-toggle{display:grid;place-items:center;width:40px;height:40px;padding:9px;border:0;border-radius:6px;background:transparent;color:var(--muted)}
.theme-toggle:hover,.language-toggle:hover{background:var(--wash);color:var(--link)}
.theme-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.theme-sun{display:none}:root[data-theme=dark] .theme-sun{display:block}:root[data-theme=dark] .theme-moon{display:none}
.masthead{display:grid;grid-template-columns:80px minmax(0,1fr) auto;align-items:center;gap:24px;padding:40px 0 44px}
.logo{width:80px;height:80px;object-fit:contain;flex:none}
h1{margin:0;font-size:clamp(22px,2.6vw,30px);line-height:1.4;font-weight:300;color:var(--strong)}
.muted{color:var(--muted)}
.project{position:relative;isolation:isolate;display:grid;grid-template-columns:48px minmax(180px,260px) minmax(0,1fr);align-items:center;gap:24px;min-height:104px;padding:24px 16px;border-top:1px solid var(--line);text-decoration:none}

.project::before{content:'';position:absolute;z-index:-1;inset:0;background:var(--wash);opacity:0;transition:opacity .18s ease;pointer-events:none}
@media(hover:hover) and (pointer:fine){a.project::before{background:radial-gradient(340px circle at var(--pointer-x,50%) var(--pointer-y,50%),var(--spot),transparent 85%),var(--wash)}a.project:hover::before{opacity:1}}
a.project:focus-visible::before,a.project:active::before{opacity:1}
.project h3{margin:0;font-size:16px;line-height:1.5;font-weight:400;color:var(--link)}
.project p{margin:0;font-size:14px;font-weight:300;line-height:1.65;max-width:500px}
.project-logo{display:block;width:44px;height:44px;object-fit:contain;flex:none}
.bonya-logo{height:48px}
.skdh-logo{background:var(--ink);mask:url('assets/skdh.svg') center/contain no-repeat}
.monitor-logo{color:var(--muted)}
.project-static h3{color:var(--ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
footer{padding:30px 0;color:var(--muted);font-size:12px}
@media(max-width:760px){.workspace{width:calc(100% - 40px)}.masthead{grid-template-columns:48px minmax(0,1fr) auto;padding:26px 0 32px;gap:12px}.logo{width:48px;height:60px}h1{font-size:18px}.project{grid-template-columns:40px minmax(0,1fr);gap:5px 18px;padding:22px 10px;min-height:0}.project-logo{grid-row:1/3;width:36px;height:40px;align-self:start;margin-top:3px}.project h3{grid-column:2}.project p{grid-column:2}.preferences{gap:2px}}
@media(max-width:420px){.masthead{grid-template-columns:34px minmax(0,1fr) auto;gap:8px}.logo{width:34px;height:48px}h1{font-size:16px}.preferences{gap:0}.language-toggle{min-width:34px;padding:6px}.theme-toggle{width:34px;padding:7px}}
@media(prefers-reduced-motion:reduce){.project::before{transition:none}a.project::before{background:var(--wash)}}
.bonya-page{min-height:100svh;display:flex;flex-direction:column}
.bonya-nav{position:absolute;top:24px;left:32px;z-index:1;padding:12px 18px;border-radius:4px;background:var(--paper);text-decoration:none}
.bonya-page>.preferences{position:absolute;top:20px;right:32px;z-index:1;padding:0 8px;background:var(--paper);border-radius:6px;min-height:44px}
.scene{height:55svh;min-height:300px;background:url('assets/autumn.jpg') center 65% / cover}
.welcome{display:grid;grid-template-columns:1fr 260px;align-items:center;gap:32px;width:100%;max-width:920px;margin:0 auto;padding:40px 32px}
.welcome h1{font-size:32px}.welcome p{margin:16px 0;font-size:14px}.welcome .status{color:var(--muted)}
.bonya{width:100%;height:230px;object-fit:contain}
.bonya-page footer{width:100%;max-width:920px;margin:auto auto 0;padding:12px 32px 24px}
@media(max-width:600px){.scene{height:42svh;background-position:44% center}.bonya-nav{left:20px;top:20px}.bonya-page>.preferences{left:20px;top:80px;right:auto}.welcome{grid-template-columns:1fr;gap:12px;padding:28px 24px}.bonya{width:220px;justify-self:center}.bonya-page footer{padding-left:24px}}

/* Shared shell dimensions and icons from csri.su/services.css, 2026-10-15. */
:root{--sage:#595f48;--blue:#eaf1f8;--shell-width:1440px;--shell-header:84px;--shell-footer:48px}
:root[data-theme=dark]{--sage:#b2bb9c;--blue:#293948}
.workspace{width:100%;min-height:100svh;min-height:100dvh}
.workspace>.masthead{width:100%;max-width:var(--shell-width);margin:0 auto;min-height:var(--shell-header);grid-template-columns:48px minmax(0,1fr) auto;gap:24px;padding:12px 40px 24px}
.masthead .logo{width:44px;height:48px}
.masthead h1{font-size:20px;line-height:1.4;font-weight:300;color:var(--ink)}
.masthead h1 span{color:inherit}
.masthead .preferences{gap:12px;min-height:36px}
.language-toggle{min-width:37px;height:28px;min-height:28px;padding:0 6px;font-size:12px;font-weight:300;border-radius:6px;background:none;color:var(--muted)}
.theme-toggle{width:36px;height:36px;padding:6px;color:var(--muted)}
.theme-toggle .theme-moon,.theme-toggle .theme-sun{width:24px;height:24px;background:currentColor;mask-position:center;mask-repeat:no-repeat;mask-size:16px 16px}
.theme-moon{mask-image:url('assets/theme-moon.svg')}
.theme-sun{mask-image:url('assets/theme-sun.svg')}
.theme-toggle:hover,.language-toggle:hover{box-shadow:inset 0 0 0 1px var(--cornflower);background:var(--blue);color:var(--link)}
.theme-toggle:focus-visible,.language-toggle:focus-visible{outline:2px solid var(--cornflower);outline-offset:2px}
.workspace>main{width:min(1040px,100% - 80px);margin:24px auto 48px}
.workspace>footer{position:relative;display:flex;align-items:center;width:100%;min-height:var(--shell-footer);padding:10px max(24px,calc((100% - 1360px)/2));font-size:12px;line-height:1.5;background:linear-gradient(to bottom,color-mix(in srgb,var(--canvas) 94%,var(--sage)),color-mix(in srgb,var(--canvas) 80%,var(--sage)))}
.workspace>footer::before{content:'';position:absolute;inset:auto 0 100%;height:14px;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--canvas) 94%,var(--sage)));pointer-events:none}
@media(max-width:1024px){.workspace>.masthead{padding-left:20px;padding-right:20px;gap:16px}.masthead h1{font-size:18px}.workspace>main{width:calc(100% - 40px)}}
@media(max-width:700px){:root{--shell-header:64px;--shell-footer:68px}.workspace>.masthead{grid-template-columns:36px minmax(0,1fr) auto;gap:12px;padding:12px 20px}.masthead .logo{width:36px;height:40px}.masthead h1{font-size:16px;line-height:1.5}.masthead .preferences{gap:8px}.workspace>main{margin-top:20px;margin-bottom:32px}.workspace>footer{padding:8px 14px}}
@media(max-width:420px){.workspace>.masthead{grid-template-columns:28px minmax(0,1fr) auto;gap:8px;padding:12px 16px}.masthead .logo{width:28px;height:36px}.masthead h1{font-size:14px;line-height:1.5}.masthead .preferences{gap:4px}}

/* One shared content axis for the brand, project list and copyright. */
.workspace{--content-width:min(1040px,100% - 80px)}
.workspace>.masthead{width:var(--content-width);max-width:none;padding:12px 16px 24px}
.workspace>main{width:var(--content-width)}
.masthead h1{font-weight:400}
.masthead h1 [data-i18n=workspace]{font-weight:600;color:var(--link)}
.workspace>footer{padding-left:max(56px,calc((100% - 1040px)/2 + 16px));padding-right:max(56px,calc((100% - 1040px)/2 + 16px))}
@media(max-width:1024px){.workspace{--content-width:calc(100% - 40px)}.workspace>footer{padding-left:36px;padding-right:36px}}
@media(max-width:760px){.workspace>.masthead{padding-left:10px;padding-right:10px}.workspace>footer{padding-left:30px;padding-right:30px}}
@media(max-width:700px){.workspace>.masthead{padding-top:12px;padding-bottom:12px}}

/* Wordmark follows Blog.Annenkov.Net, with a final cornflower dot. */
.masthead h1.brand-wordmark{font-size:24px;font-weight:700;line-height:1.25;letter-spacing:-.035em;white-space:nowrap}
.masthead h1.brand-wordmark span{color:var(--cornflower)}
@media(max-width:760px){.masthead h1.brand-wordmark{font-size:clamp(16px,3.2vw,22px)}}
@media(max-width:480px){.workspace>.masthead{grid-template-columns:28px minmax(0,1fr);column-gap:10px;row-gap:4px}.masthead h1.brand-wordmark{font-size:clamp(16px,4.6vw,21px)}.masthead .preferences{grid-column:2;justify-self:end}.masthead .logo{grid-row:1/3;align-self:start;margin-top:4px}}
/* Wordmark sizing measured on the published blog release. */
.masthead h1.brand-wordmark{font-size:clamp(14px,1.35vw,20px);font-weight:750;letter-spacing:-.025em}
@media(max-width:760px){.masthead h1.brand-wordmark{font-size:clamp(11px,3.4vw,14px);line-height:1.18}}
/* Shared 1440px shell: same base width and side gutters as SKDH. */
.workspace{--shell-gutter:40px;--content-width:min(1360px,100% - 80px)}
.workspace>.masthead{width:100%;max-width:1440px;padding-left:var(--shell-gutter);padding-right:var(--shell-gutter);grid-template-columns:48px minmax(0,1fr) auto;column-gap:24px}
.workspace>main{width:var(--content-width)}
.workspace .project{padding-left:0;padding-right:0}
.workspace>footer{padding-left:max(40px,calc((100% - 1360px)/2));padding-right:max(40px,calc((100% - 1360px)/2))}
@media(max-width:1024px){.workspace{--shell-gutter:20px;--content-width:calc(100% - 40px)}.workspace>footer{padding-left:20px;padding-right:20px}}
@media(max-width:760px){.workspace>.masthead{grid-template-columns:40px minmax(0,1fr) auto;column-gap:18px}.masthead .logo{width:36px}}
@media(max-width:480px){.workspace>.masthead{grid-template-columns:40px minmax(0,1fr);column-gap:18px}}
/* Enlarge the flower without changing header layout or text alignment. */
.masthead .logo{transform:scale(1.35);transform-origin:left center}
@media(max-width:760px){.masthead .logo{transform:scale(1.25)}}
/* Align the visible flower, accounting for its transparent left margin. */
.masthead .logo{transform:translateX(-8px) scale(1.35)}
@media(max-width:760px){.masthead .logo{transform:translateX(-6px) scale(1.25)}}
.workspace .project:first-child{border-top:0}
/* All portfolio titles share the cornflower accent; only linked rows navigate. */
.workspace .project h3{font-weight:600;color:var(--cornflower)}
/* Keep long RU/EN project summaries to two lines on desktop. */
@media(min-width:761px){.workspace .project p{max-width:760px}}

/* Quiet section labels above the project rows. */
.project-group-title{margin:0 0 4px;font-size:13px;line-height:1.5;font-weight:500;color:var(--muted)}
.project-group+.project-group{margin-top:28px}
.workspace .project-group>.project:nth-child(2){border-top:0}
@media(max-width:760px){.project-group+.project-group{margin-top:22px}}