@font-face{font-family:Satoshi;src:url(/assets/fonts/Satoshi-Light.woff2)format("woff2"),url(/assets/fonts/Satoshi-Light.woff)format("woff");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:Satoshi;src:url(/assets/fonts/Satoshi-LightItalic.woff2)format("woff2"),url(/assets/fonts/Satoshi-LightItalic.woff)format("woff");font-weight:300;font-style:italic;font-display:swap}@font-face{font-family:Satoshi;src:url(/assets/fonts/Satoshi-Regular.woff2)format("woff2"),url(/assets/fonts/Satoshi-Regular.woff)format("woff");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Satoshi;src:url(/assets/fonts/Satoshi-Italic.woff2)format("woff2"),url(/assets/fonts/Satoshi-Italic.woff)format("woff");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Satoshi;src:url(/assets/fonts/Satoshi-Medium.woff2)format("woff2"),url(/assets/fonts/Satoshi-Medium.woff)format("woff");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Satoshi;src:url(/assets/fonts/Satoshi-MediumItalic.woff2)format("woff2"),url(/assets/fonts/Satoshi-MediumItalic.woff)format("woff");font-weight:500;font-style:italic;font-display:swap}@font-face{font-family:Satoshi;src:url(/assets/fonts/Satoshi-Bold.woff2)format("woff2"),url(/assets/fonts/Satoshi-Bold.woff)format("woff");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Satoshi;src:url(/assets/fonts/Satoshi-BoldItalic.woff2)format("woff2"),url(/assets/fonts/Satoshi-BoldItalic.woff)format("woff");font-weight:700;font-style:italic;font-display:swap}@font-face{font-family:Satoshi;src:url(/assets/fonts/Satoshi-Black.woff2)format("woff2"),url(/assets/fonts/Satoshi-Black.woff)format("woff");font-weight:900;font-style:normal;font-display:swap}@font-face{font-family:Satoshi;src:url(/assets/fonts/Satoshi-BlackItalic.woff2)format("woff2"),url(/assets/fonts/Satoshi-BlackItalic.woff)format("woff");font-weight:900;font-style:italic;font-display:swap}:root{--color-accent:#e8573d;--color-text-dark:#303030;--color-text-gray:#777;--color-text-light:#aaa;--color-bg:#fafafa;--color-bg-section:#f4f4f4;--color-border:#dedede;--font-family:"Satoshi",system-ui,-apple-system,sans-serif;--header-height:64px}::selection{background-color:var(--color-accent);color:#fff}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%}body{font-family:var(--font-family);color:var(--color-text-dark);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none;font-family:inherit}ul,ol{list-style:none}img{-webkit-user-drag:none;-webkit-user-select:none;user-select:none;pointer-events:none;max-width:100%;display:block}
.app{flex-direction:column;height:100vh;display:flex;overflow:hidden}.app__top{flex-shrink:0;padding:40px 40px 0}.app__content{border:1px solid var(--color-border);border-radius:24px;flex:1;min-height:0;margin:40px;display:flex}.app__sidebar{border-right:1px solid var(--color-border);flex-shrink:0;width:436px;padding:40px 24px;overflow-y:auto}.app__detail{scrollbar-width:none;flex:1;min-width:0;padding:40px 0;overflow:auto hidden}.app__detail::-webkit-scrollbar{display:none}@media (max-width:768px){.app__top{padding:20px 24px 0}.app__content{flex-direction:column;padding:0 24px;overflow-y:auto}.app__sidebar{flex-shrink:0;width:100%;padding-bottom:24px;overflow-y:visible}.app__detail{flex-shrink:0;padding-bottom:32px;overflow:auto visible}}
.header{justify-content:space-between;align-items:center;padding-bottom:16px;display:flex}.header__name{letter-spacing:.2em;color:var(--color-accent);font-size:16px;font-weight:400;line-height:24px}
.hero__title{color:var(--color-text-dark);font-size:32px;font-weight:600;line-height:40px}
.nav-menu{position:relative}.nav-menu__toggle{z-index:11;flex-direction:column;gap:4px;padding:6px;display:flex;position:relative}.nav-menu__line{background-color:var(--color-text-dark);transform-origin:50%;border-radius:1px;width:20px;height:2px;transition:transform .2s,opacity .2s;display:block}.nav-menu--open .nav-menu__line:first-child{transform:translateY(6px)rotate(45deg)}.nav-menu--open .nav-menu__line:nth-child(2){opacity:0}.nav-menu--open .nav-menu__line:nth-child(3){transform:translateY(-6px)rotate(-45deg)}.nav-menu__popover{background:var(--color-bg);border:1px solid var(--color-border);z-index:10;opacity:0;transform-origin:100% 0;pointer-events:none;border-radius:16px;flex-direction:column;gap:16px;min-width:200px;padding:24px;transition:opacity .2s,transform .2s;display:flex;position:absolute;top:-12px;right:-12px;transform:scale(.95)}.nav-menu--open .nav-menu__popover{opacity:1;pointer-events:auto;transform:scale(1)}.nav-menu__link{color:var(--color-text-dark);text-align:left;font-size:18px;font-weight:400;text-decoration:none;transition:opacity .15s}.nav-menu__link:hover{opacity:.7}
.about-modal{opacity:0;background:0 0;border:none;width:calc(100% - 48px);max-width:520px;margin:auto;padding:0;overflow:hidden}.about-modal[open]{opacity:1}.about-modal::backdrop{background:0 0}.about-modal[open]::backdrop{animation:.3s cubic-bezier(.16,1,.3,1) forwards aboutBackdropFadeIn}.about-modal[open].about-modal--closing::backdrop{animation:.25s forwards aboutBackdropFadeOut}.about-modal__card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:32px;flex-direction:column;gap:20px;padding:32px;animation:.3s cubic-bezier(.16,1,.3,1) forwards aboutCardEnter;display:flex;position:relative}.about-modal--closing .about-modal__card{animation:.25s forwards aboutCardExit}@keyframes aboutCardEnter{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes aboutCardExit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(24px)}}@keyframes aboutBackdropFadeIn{0%{-webkit-backdrop-filter:blur();backdrop-filter:blur();background:#fff0}to{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffb3}}@keyframes aboutBackdropFadeOut{0%{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffb3}to{-webkit-backdrop-filter:blur();backdrop-filter:blur();background:#fff0}}.about-modal__close{width:32px;height:32px;color:var(--color-text-light);justify-content:center;align-items:center;font-size:24px;line-height:1;transition:color .15s;display:flex;position:absolute;top:16px;right:16px}.about-modal__close:hover{color:var(--color-text-dark)}.about-modal__header{align-items:center;gap:12px;display:flex}.about-modal__photo{object-fit:cover;border-radius:16px;width:64px;height:64px}.about-modal__meta{flex-direction:column;gap:2px;display:flex}.about-modal__name{color:var(--color-text-dark);font-size:16px;font-weight:500}.about-modal__timestamp{color:var(--color-text-light);font-size:14px;font-weight:400}.about-modal__body{color:var(--color-text-dark);flex-direction:column;gap:16px;font-size:16px;font-weight:400;line-height:1.6;display:flex}
.works-list{flex-direction:column;gap:24px;display:flex}.works-list__label{letter-spacing:.2em;color:var(--color-text-gray);font-size:16px;font-weight:400;line-height:24px}.works-list__items{flex-direction:column;gap:24px;display:flex}@media (max-width:768px){.works-list{padding-right:0}}
.work-item{border:1px solid var(--color-border);cursor:pointer;width:100%;color:var(--color-text-dark);border-radius:16px;align-items:center;gap:8px;padding:8px;transition:background-color .15s;display:flex}.work-item--active,.work-item:hover{background-color:var(--color-bg-section)}.work-item__logo{object-fit:cover;border-radius:10px;flex-shrink:0;width:32px;height:32px}.work-item__text{flex-direction:row;flex:1;align-items:baseline;gap:8px;min-width:0;display:flex}.work-item__company{color:var(--color-text-dark);white-space:nowrap;font-size:14px;font-weight:500;line-height:24px}.work-item__description{color:var(--color-text-dark);white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:400;line-height:24px;overflow:hidden}.work-item__chevron{color:var(--color-text-dark);flex-shrink:0}
@keyframes enterFromLeft{0%{opacity:0;transform:translate(-32px)}to{opacity:1;transform:translate(0)}}@keyframes exitToRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(40px)}}.project-detail{white-space:nowrap;flex-direction:column;align-items:flex-start;gap:40px;height:100%;animation:.35s forwards enterFromLeft;display:flex}.project-detail--exiting{animation:.3s forwards exitToRight}.project-detail__header{white-space:normal;flex-shrink:0;margin-left:40px}.project-detail__header-top{align-items:center;gap:24px;display:flex}.project-detail__logo{object-fit:cover;border-radius:16px;flex-shrink:0;width:64px;height:64px}.project-detail__info{flex-direction:column;gap:8px;display:flex}.project-detail__title{color:var(--color-text-dark);font-size:24px;font-weight:500;line-height:32px}.project-detail__tags{color:var(--color-text-dark);font-size:16px;font-weight:400;line-height:24px}
.project-mockups{scrollbar-width:none;flex:1;align-items:flex-start;gap:24px;min-height:0;display:flex;overflow:auto visible}.project-mockups::-webkit-scrollbar{display:none}.project-mockups__image{aspect-ratio:375/812;object-fit:cover;border:1px solid var(--color-border);border-radius:32px;flex-shrink:0;width:auto;height:100%}.project-mockups__image:first-child{margin-left:40px}.project-mockups__image:last-child{margin-right:40px}.project-mockups__image--desktop{aspect-ratio:1920/1080;border-radius:12px}@media (max-width:768px){.project-mockups__image{height:380px}}