:root{color-scheme:light;--bg:#fff;--text:#000;--muted:#626262;--line:#dedede;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--text);font-family:Onest,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid #000;outline-offset:5px}a:hover{text-decoration:underline;text-underline-offset:5px}button:active{transform:scale(.99)}.skip{position:absolute;left:20px;top:-80px;background:#fff;padding:16px;z-index:1}.skip:focus{top:16px}.intro,main,footer{width:calc(100% - 96px);max-width:1440px;margin-inline:auto}.intro{padding-top:30px}.intro-top{display:flex;justify-content:space-between;align-items:center;font-size:14px}.intro-top a{display:flex;min-height:44px;align-items:center}h1{font-family:Unbounded,sans-serif;font-size:clamp(60px,11.5vw,170px);font-weight:600;letter-spacing:-.075em;line-height:1.18;margin:28px 0 12px} .intro>p{font-size:clamp(17px,1.6vw,22px);margin:0;line-height:1.5}.canvas{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:28px;row-gap:68px;padding-top:68px;align-items:start}.project{min-width:0}.almaz{grid-column:1/8;grid-row:1}.bubble{grid-column:9/13;grid-row:1;margin-top:92px}.skills{grid-column:2/8;grid-row:2;margin-top:12px}.auto{grid-column:9/13;grid-row:2;margin-top:100px}.tula{grid-column:1/9;grid-row:3;margin-top:4px}.preview{display:block;width:100%;text-align:left;transition:opacity 200ms var(--ease),transform 240ms var(--ease)}.preview:hover{opacity:.9;transform:translateY(-3px)}.preview img{display:block;width:100%;height:auto}.desktop-preview{aspect-ratio:1.787;overflow:hidden;background:#f7f7f7;border-radius:12px}.desktop-preview img{height:100%;object-fit:cover;object-position:top}.phone-triptych,.phone-pair{display:grid;align-items:start;gap:10px}.phone-triptych{grid-template-columns:repeat(3,minmax(0,1fr));padding-bottom:22px}.phone-triptych img,.phone-pair img{border-radius:12px}.phone-triptych img:nth-child(2){margin-top:22px}.phone-triptych img:nth-child(3){margin-top:9px}.phone-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding-bottom:28px}.phone-pair img:nth-child(2){margin-top:28px}.project-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}h2{font-family:Unbounded,sans-serif;font-size:clamp(17px,1.8vw,26px);line-height:1.4;letter-spacing:-.045em;font-weight:500;margin:0}h2 button{text-align:left;line-height:1.4;min-height:44px}.open{width:44px;height:44px;flex-shrink:0;font-size:28px;line-height:1}.open:hover{transform:rotate(90deg);transition:transform 200ms var(--ease)}.project>p{font-size:15px;line-height:1.55;max-width:48ch;margin:3px 0 10px;color:var(--muted)}.visit{font-size:14px;min-height:44px;display:inline-flex;align-items:center;gap:12px}.brand-links{display:flex;flex-wrap:wrap;gap:22px}.brand-links a{font-size:14px;display:inline-flex;min-height:44px;align-items:center}footer{display:flex;justify-content:space-between;align-items:center;margin-top:100px;margin-bottom:26px;padding-top:20px;border-top:1px solid var(--line);font-size:14px}footer a{display:flex;min-height:44px;align-items:center}dialog{padding:0;border:0;background:#fff;color:#000;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;overflow-y:auto;overscroll-behavior:contain}dialog::backdrop{background:#fff}body:has(dialog[open]){overflow:hidden}.case-top{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:16px 48px;background:#fff;z-index:1;border-bottom:1px solid var(--line);font-size:14px}.case-top button{display:flex;gap:22px;min-height:44px;align-items:center}.case-top button span{font-size:28px}.case-content{max-width:1100px;margin:auto;padding:48px 32px 70px}.case-content h2{font-size:clamp(26px,4.7vw,64px);line-height:1.2;overflow-wrap:anywhere}.case-content>p{font-size:clamp(17px,1.7vw,21px);line-height:1.6;max-width:64ch;margin:22px 0 12px}.case-links{display:flex;flex-wrap:wrap;column-gap:30px;margin-bottom:36px}.case-links a{min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:5px}.gallery-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px;font-size:14px;color:var(--muted)}.gallery-controls>div{display:flex;gap:10px}.gallery-controls button{width:48px;height:44px;color:#000;border:1px solid var(--line);font-size:24px}.gallery-controls button:hover{background:#f3f3f3}figure{margin:0}#case-image{display:block;width:auto;height:auto;max-width:100%;max-height:72dvh;margin-inline:auto;object-fit:contain;border-radius:12px}figcaption{text-align:center;color:var(--muted);font-size:14px;margin-top:16px}.gallery:has(.image-error)::after{content:'Скриншот не загрузился. Попробуй открыть проект по ссылке выше.';display:block;padding:30px;text-align:center}
@media(min-width:1700px){h1{font-size:180px}.intro{padding-top:40px}.canvas{padding-top:80px}}
@media(max-width:1050px){.intro,main,footer{width:calc(100% - 56px)}.canvas{column-gap:22px;row-gap:50px}.almaz{grid-column:1/8}.bubble{grid-column:8/13;margin-top:68px}.skills{grid-column:1/8}.auto{grid-column:8/13;margin-top:70px}.tula{grid-column:1/10}.project>p{font-size:14px}.phone-triptych,.phone-pair{gap:8px}}
@media(max-width:767px){.intro,main,footer{width:calc(100% - 36px)}.intro{padding-top:12px}.intro-top{font-size:13px}h1{font-size:clamp(37px,10.9vw,83px);margin:30px 0 14px;letter-spacing:-.07em}.intro>p{font-size:17px}.canvas{display:flex;flex-direction:column;gap:42px;padding-top:42px}.project{width:100%;margin:0}.bubble,.auto{max-width:460px}.bubble{align-self:flex-end;width:94%}.skills{width:96%}.auto{width:88%;align-self:center}.tula{width:100%}h2{font-size:20px}.project-heading{margin-top:10px}.project>p{font-size:15px}.phone-triptych{gap:8px}.phone-triptych img,.phone-pair img{border-radius:10px}.case-top{padding:10px 18px;gap:20px}.case-content{padding:30px 18px 40px}.case-content h2{font-size:29px}.case-content>p{font-size:17px}.case-links{column-gap:22px;margin-bottom:24px}#case-image{max-height:65dvh}.gallery-controls{gap:8px}.gallery-controls>span{max-width:65%}footer{margin-top:60px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.preview:hover{transform:none}}