@font-face{font-family:"Onest";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/onest-400.ttf") format("truetype")}
@font-face{font-family:"Onest";font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/onest-500.ttf") format("truetype")}
@font-face{font-family:"Onest";font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/onest-600.ttf") format("truetype")}
@font-face{font-family:"Onest";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/onest-700.ttf") format("truetype")}
:root{color-scheme:light;--text:#2c2c2b;--muted:#787774;--line:#e9e9e7}*{box-sizing:border-box}body{margin:0;color:var(--text);background:#fff;font-family:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}.topbar{height:45px;padding:0 18px;display:flex;align-items:center;gap:8px;font-size:14px;position:sticky;top:0;background:#fff;z-index:5}.topbar a{color:inherit;text-decoration:none}.topbar span{color:#b5b5b3}.document{max-width:912px;padding:80px 96px 120px;margin:auto}.document.full-width{max-width:none}.page-title{font-size:40px;font-weight:700;line-height:1.2;letter-spacing:-.4px;margin:0 0 24px;padding:3px 8px}.block{padding:3px 2px;margin:1px 0;min-width:0;overflow-wrap:break-word}.document>.block{margin-left:8px;margin-right:8px}.text{white-space:pre-wrap}.text strong{font-weight:600}a{color:inherit;text-decoration-color:#cecdca;text-underline-offset:3px}a:hover{color:#171717;background:#f5f5f4}h1.block,h2.block,h3.block{font-weight:600;line-height:1.3;margin-top:1.4em;margin-bottom:1px}h1.block{font-size:30px}h2.block{font-size:24px}h3.block{font-size:20px}.column_list{display:flex;gap:46px;padding:0}.column{min-width:0;padding:12px 0 0}.column>.block:first-child{margin-top:0}.bulleted_list,.numbered_list{display:flex;gap:8px}.bullet{width:20px;flex:none;text-align:center}.bulleted_list>div,.numbered_list>div{flex:1}figure.block{padding:0;margin:12px auto;line-height:0}figure img{display:block;width:100%;height:auto}figure a{display:block;background:none}figcaption{padding:6px 0;font-size:14px;color:var(--muted);line-height:1.5}a.page{display:flex;align-items:center;text-decoration:none;font-weight:600;line-height:1.5}.page strong{text-decoration:underline;text-decoration-color:#ddd;text-underline-offset:3px}details summary{cursor:pointer;list-style:none;position:relative;padding-left:24px;min-height:24px}details summary::before{content:'▶';font-size:11px;position:absolute;left:3px;top:4px}details[open]>summary::before{transform:rotate(90deg)}details summary:hover{background:#f5f5f4;border-radius:3px}.indent{padding-left:24px}.indent .block{margin:1px 0}.color-gray{color:#787774}.color-brown{color:#9f6b53}.color-orange{color:#d9730d}.color-yellow{color:#cb912f}.color-green{color:#448361}.color-blue{color:#337ea9}.color-purple{color:#9065b0}.color-pink{color:#c14c8a}.color-red{color:#d44c47}.color-gray_background{background:#f1f1ef}.color-yellow_background{background:#fbf3db}.color-blue_background{background:#e7f3f8}.color-green_background{background:#edf3ec}.color-red_background{background:#fdebec}blockquote{border-left:3px solid currentColor;padding-left:14px!important;margin:6px 0}aside.callout{display:flex;gap:12px;background:#f1f1ef;border-radius:3px;padding:16px}pre{background:#f7f6f3;white-space:pre-wrap;padding:20px!important;border-radius:3px}code{font-family:monospace;font-size:85%;background:#f1f1ef;color:#eb5757;padding:2px 4px;border-radius:3px}pre code{color:inherit;background:none}hr{border:0;border-top:1px solid var(--line);margin:16px 0}table{border-collapse:collapse;width:100%}td{border:1px solid var(--line);padding:8px}.mention{background:#f1f1ef;border-radius:4px;text-decoration:none;padding:2px 5px;font-size:14px}.document-icon{font-size:72px;margin-top:-48px}.cover{margin:-80px -96px 36px;height:260px}.cover img{width:100%;height:100%;object-fit:cover}video{width:100%}dialog{padding:0;border:0;max-width:95vw;max-height:95vh;background:transparent;overflow:visible}dialog::backdrop{background:rgba(0,0,0,.85)}dialog img{display:block;max-width:95vw;max-height:90vh;object-fit:contain}dialog button{position:absolute;right:0;top:-35px;color:#fff;background:none;border:0;font-size:28px;cursor:pointer}body:has(dialog[open]){overflow:hidden}@media(max-width:768px){.document,.document.full-width{padding:48px 24px 80px}.page-title{font-size:32px}.column_list{display:block}.column{padding-top:16px}.column_list>.column+.column{margin-top:18px}.cover{margin:-48px -24px 32px;height:180px}.topbar{font-size:13px;white-space:nowrap;overflow:hidden}.document>.block{margin-left:0;margin-right:0}.page-title{padding-left:0;padding-right:0}}
/* Block spacing measured from the published Notion page. */
.document{padding-top:83px}.block{padding:8px;margin:0}.document>.block{margin-left:0;margin-right:0}.page-title{margin:0 0 8px;padding:0 8px}.column_list{padding:12px 0;gap:46px}.column{padding:0}.column>.block:first-child{margin-top:0}.text{white-space:break-spaces}figure.block{padding:8px;margin:0 auto}h1.block,h2.block,h3.block{margin:0;padding:24px 8px 8px}h3.block{padding-top:24px}h2.block{padding-top:28px}h1.block{padding-top:32px}.bulleted_list,.numbered_list{gap:6px;padding:3px 8px}.block:not(.bulleted_list)+.bulleted_list,.block:not(.numbered_list)+.numbered_list{padding-top:8px}.bulleted_list:has(+.block:not(.bulleted_list)),.numbered_list:has(+.block:not(.numbered_list)){padding-bottom:8px}.bullet{width:24px}details{padding:8px 6px!important}.indent .block{margin:0}.text a{color:#6b6b69}@media(max-width:768px){.document,.document.full-width{padding-top:48px}.column_list{padding:12px 0}.page-title{padding-left:8px}}

.table-scroll{max-width:100%;overflow-x:auto;margin:8px 0;overscroll-behavior-x:contain}.table-scroll table{min-width:720px;table-layout:fixed}.table-scroll td{vertical-align:top;overflow-wrap:anywhere}

/* Image hover matches zelorlyata.ru media gallery. */
.portfolio-card figure a,.portfolio-card figure .image-frame{display:block;overflow:hidden;border-radius:12px}
.portfolio-card figure img{transform:scale(1);transform-origin:center;transition:transform .4s cubic-bezier(.46,0,0,1)}
@media (hover:hover) and (pointer:fine){.portfolio-card:hover figure img{transform:scale(1.1)}}
.portfolio-card:has(a:focus-visible) figure img{transform:scale(1.1)}

/* Scroll reveal matches the reference media gallery. */
.portfolio-gallery.is-reveal-pending .portfolio-card{opacity:0}
.portfolio-gallery.is-revealed .portfolio-card{animation:portfolio-card-reveal .6s cubic-bezier(0,0,.18,1) .4s both}
@keyframes portfolio-card-reveal{from{opacity:0}to{opacity:1;transform:translateY(0)}}

/* Main portfolio title: 1.5 times the original size. */
.document.full-width>.page-title{font-size:60px}
@media(max-width:768px){.document.full-width>.page-title{font-size:48px}}

/* Portfolio and test assignment headings share the same size. */
h2.block[id="3494b62f-5ba2-80aa-895d-fd68cb4349c4"],
h2.block[id="3494b62f-5ba2-807e-8fca-d5e3884085ea"]{font-size:36px}

/* Match the spacing after the Portfolio heading's column row. */
h2.block[id="3494b62f-5ba2-807e-8fca-d5e3884085ea"]{margin-bottom:12px}

@media(max-width:768px){
  .document.full-width>.page-title{font-size:38.4px}
  h2.block[id="3494b62f-5ba2-80aa-895d-fd68cb4349c4"],
  h2.block[id="3494b62f-5ba2-807e-8fca-d5e3884085ea"]{font-size:28.8px}
  [id="3494b62f-5ba2-807e-8140-ed399cb4e460"]{display:none}
}

/* Set the visible gap after the tools list to 96px. */
h2.block[id="3494b62f-5ba2-80aa-895d-fd68cb4349c4"]{padding-top:28px;margin-top:34px}

/* Project titles use the same typography as the “Делаю” heading. */
.portfolio-card>.block:first-child{font-size:20px;line-height:1.3;font-weight:600}

/* Cards follow reading order; shared grid rows align headings, copy and images. */
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:46px;row-gap:0;padding:12px 0}
.portfolio-grid>.portfolio-card{display:grid;grid-template-rows:subgrid;grid-row:span 4;min-width:0;margin-bottom:40px}
.portfolio-grid>.portfolio-card:nth-last-child(-n+2){margin-bottom:0}
.portfolio-grid>.portfolio-card>figure{width:100%;margin:0}
.portfolio-card-extra>.text:has(>br:only-child){display:none}
.portfolio-card-extra>.text:last-child>br{display:none}
.portfolio-card-extra>.toggle:last-child>summary br{display:none}
@media(max-width:768px){
  .portfolio-grid{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .portfolio-grid>.portfolio-card{display:block;grid-row:auto;margin-bottom:0}
}