#root{min-height:100vh}*{box-sizing:border-box;margin:0;padding:0}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}html{scroll-behavior:smooth;scrollbar-width:none}html::-webkit-scrollbar{display:none}body::-webkit-scrollbar{display:none}.project-page::-webkit-scrollbar{display:none}body{color:#222;-ms-overflow-style:none;scrollbar-width:none;background:#fff;padding:60px;font-family:Arial,Helvetica,sans-serif;font-size:13px}a{color:inherit;text-decoration:none}button{font-family:inherit}.hidden{display:none!important}.icon{width:18px;height:18px;display:block}.app-icon{width:38px;height:38px;display:block}.social-icon{vertical-align:middle;width:15px;height:15px;display:inline-block}header{grid-template-columns:1fr 1fr;align-items:start;gap:60px;margin-bottom:80px;display:grid}.name{letter-spacing:-5px;max-width:650px;margin-bottom:55px;font-size:clamp(48px,8vw,108px);font-weight:400;line-height:.92;animation:.6s both fadeSlideUp}.info-block{color:#555;max-width:440px}.section-title,.about-title{color:#333;margin-bottom:12px;font-size:13px}.row{border-bottom:1px solid #f0f0f0;justify-content:space-between;gap:20px;margin-bottom:9px;padding-bottom:9px;display:flex}.desktop-nav{text-align:right;margin-bottom:48px;animation:.6s .12s both fadeSlideUp}.menu-btn{z-index:100;cursor:pointer;background:#fff;border:1px solid #e6e6e6;border-radius:999px;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:44px;height:44px;transition:background .25s;display:none;position:fixed;top:22px;right:22px;box-shadow:0 6px 20px #0000000f}.menu-btn span{background:#222;border-radius:2px;width:18px;height:2px;transition:transform .3s;display:block}.menu-btn.open span:first-child{transform:translateY(4px)rotate(45deg)}.menu-btn.open span:last-child{transform:translateY(-4px)rotate(-45deg)}.menu-overlay{z-index:90;-webkit-backdrop-filter:blur(12px);background:#fffffff7;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.menu-overlay.open{display:flex}.menu-nav{flex-direction:column;align-items:center;gap:28px;margin:0;display:flex}.menu-nav a{color:#222;margin:0;font-size:32px;transition:opacity .25s}.menu-nav a:hover{opacity:.5}.desktop-nav a{color:#111;margin-left:32px;font-size:12px}.desktop-nav a:first-child{color:#111;font-style:normal}.about{letter-spacing:-1.8px;color:#222;max-width:650px;margin-bottom:32px;font-size:clamp(24px,3.2vw,46px);line-height:1.08;animation:.6s .24s both fadeSlideUp}.about-title{letter-spacing:0;color:#777;font-size:13px}.social-line{flex-wrap:wrap;gap:10px 18px;margin-top:8px;display:flex}.social-line a,.footer-column a.social-link{border-bottom:none;align-items:center;gap:7px;display:inline-flex}.portfolio-grid{grid-template-columns:1fr 1fr;gap:34px 22px;margin-bottom:80px;animation:.7s .4s both fadeSlideUp;display:grid}.project{cursor:pointer;width:100%}.project-box{background:#f4f4f4;border-radius:14px;height:380px;position:relative;overflow:hidden}.screen{opacity:0;justify-content:center;align-items:center;transition:opacity .4s,transform .4s;display:flex;position:absolute;inset:0;transform:scale(.96)}.screen img{object-fit:contain;filter:drop-shadow(0 18px 24px #0000001f);width:auto;max-width:90%;height:82%;display:block}.screen-main{opacity:1;z-index:5;transform:scale(1)}.caption{color:#555;margin-top:10px;font-size:13px;line-height:1.45}.caption strong{color:#222;font-weight:500}@media (hover:hover) and (pointer:fine){.project-box:hover .screen{opacity:1}.project-box:hover .screen-main{z-index:5;transform:translate(-135px)translateY(-4px)scale(.68)}.project-box:hover .screen:nth-child(2){z-index:4;transform:translate(-45px)translateY(-20px)scale(.7)}.project-box:hover .screen:nth-child(3){z-index:3;transform:translate(45px)translateY(4px)scale(.72)}.project-box:hover .screen:nth-child(4){z-index:2;transform:translate(135px)translateY(28px)scale(.68)}}.project-page{min-height:100vh}.back-btn{z-index:20;color:#222;cursor:pointer;background:#fff;border:1px solid #e6e6e6;border-radius:999px;justify-content:center;align-items:center;width:48px;height:48px;transition:background .25s,transform .25s,border-color .25s;display:flex;position:fixed;top:28px;left:28px;box-shadow:0 12px 30px #00000014}.back-btn:hover{background:#f5f5f5;border-color:#d8d8d8;transform:scale(1.06)}.project-template{text-align:center;max-width:1120px;margin:0 auto;padding:74px 0 90px;animation:.6s both fadeSlideUp}.project-title-block{max-width:780px;margin:0 auto 34px}.project-kicker{color:#777;margin-bottom:12px}.project-title-block h1{letter-spacing:-5px;margin-bottom:22px;font-size:clamp(48px,8vw,104px);font-weight:400;line-height:.92}.project-title-block p{color:#555;max-width:660px;margin:0 auto;font-size:14px;line-height:1.75}.project-carousel-wrap{max-width:980px;margin:0 auto 18px;position:relative}.project-carousel{background:#f4f4f4;border-radius:26px;height:620px;position:relative;overflow:hidden}.project-carousel img{object-fit:contain;opacity:0;filter:drop-shadow(0 18px 24px #0000001f);max-width:88%;max-height:88%;margin:auto;transition:opacity .35s,transform .35s;position:absolute;inset:0;transform:scale(.96)}.project-carousel img.active{opacity:1;transform:scale(1)}.carousel-controls{pointer-events:none;position:absolute;inset:0}.carousel-controls button{color:#222;cursor:pointer;pointer-events:auto;background:#fff;border:1px solid #dedede;border-radius:999px;justify-content:center;align-items:center;width:48px;height:48px;transition:background .25s,transform .25s,border-color .25s;display:flex;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 10px 28px #0000001a}.carousel-controls button:hover{background:#f5f5f5;border-color:#cfcfcf;transform:translateY(-50%)scale(1.08)}.prev-btn{left:22px}.next-btn{right:22px}.slide-counter{color:#666;background:#fff;border:1px solid #e8e8e8;border-radius:999px;justify-content:center;align-items:center;margin-top:14px;padding:9px 14px;font-size:12px;display:inline-flex}.concept-showcase{text-align:left;grid-template-columns:1fr 1fr;gap:18px;max-width:980px;margin:44px auto 0;display:grid}.concept-brand-card,.palette-card,.diagram-card,.showcase-card{background:#fff;border:1px solid #eee;border-radius:24px;padding:26px}.concept-brand-card{align-items:center;gap:20px;display:flex}.concept-logo{background:#fff;border:1px solid #eee;border-radius:24px;flex-shrink:0;justify-content:center;align-items:center;width:82px;height:82px;display:flex;box-shadow:0 10px 30px #0000000f}.concept-label{color:#777;margin-bottom:10px;font-size:12px}.concept-brand-card h2{letter-spacing:-1px;margin-bottom:8px;font-size:28px;font-weight:400}.concept-brand-card p,.palette-card p{color:#555;line-height:1.65}.palette-row{flex-wrap:wrap;gap:10px;display:flex}.swatch{border:1px solid #00000014;border-radius:18px;width:64px;height:64px;margin-bottom:22px;position:relative}.swatch span{color:#777;white-space:nowrap;font-size:11px;position:absolute;top:72px;left:0}.project-writeup{text-align:left;max-width:780px;margin:46px auto 0}.project-writeup p{color:#444;margin-bottom:22px;font-size:15px;line-height:1.85}.project-writeup p:first-child{color:#222;font-size:18px;line-height:1.7}.showcase-section{text-align:left;max-width:980px;margin:54px auto 0}.showcase-heading{letter-spacing:-2px;margin-bottom:22px;font-size:clamp(28px,4vw,54px);font-weight:400;line-height:.98}.showcase-grid{grid-template-columns:repeat(2,1fr);gap:18px;display:grid}.showcase-card h3{letter-spacing:-.6px;margin-bottom:12px;font-size:20px;font-weight:400}.showcase-card p{color:#444;font-size:14px;line-height:1.75}.tag-list{flex-wrap:wrap;gap:10px;display:flex}.tag{color:#444;background:#fff;border:1px solid #e8e8e8;border-radius:999px;padding:9px 12px;font-size:12px}.flow-diagram{grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px;display:grid}.flow-step{background:#fafafa;border:1px solid #eee;border-radius:18px;min-height:120px;padding:16px;position:relative}.flow-number{color:#fff;border-radius:999px;justify-content:center;align-items:center;width:28px;height:28px;margin-bottom:14px;font-size:11px;display:flex}.flow-step h4{margin-bottom:8px;font-size:14px;font-weight:500}.flow-step p{color:#555;font-size:12px;line-height:1.55}.system-grid{grid-template-columns:repeat(3,1fr);gap:18px;display:grid}.system-item{border-top:1px solid #eee;padding-top:18px}.system-item p{color:#444;font-size:14px;line-height:1.7}.mini-diagram{grid-template-columns:1fr;gap:10px;margin-top:14px;display:grid}.diagram-row{background:#fafafa;border:1px solid #eee;border-radius:16px;justify-content:space-between;align-items:center;gap:18px;padding:14px;display:flex}.diagram-row span:first-child{color:#222}.diagram-row span:last-child{color:#777;text-align:right}.next-project-card{text-align:left;cursor:pointer;border-top:1px solid #eee;border-bottom:1px solid #eee;justify-content:space-between;align-items:center;gap:30px;max-width:980px;margin:54px auto 0;padding:26px 0;display:flex}.next-project-card h3{letter-spacing:-1.8px;margin-bottom:8px;font-size:clamp(26px,4vw,48px);font-weight:400}.next-project-card p{color:#555;max-width:540px;line-height:1.7}.next-project-card button{color:#222;cursor:pointer;background:#fff;border:1px solid #dedede;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;transition:background .25s,transform .25s;display:flex}.next-project-card:hover button{background:#f5f5f5;transform:translate(4px)}.contact-section{border-top:1px solid #f0f0f0;max-width:1120px;margin:0 auto;padding:80px 0 100px;animation:.7s .55s both fadeSlideUp}.contact-section-inner{grid-template-columns:1fr 1fr;align-items:start;gap:50px;display:grid}.contact-title{letter-spacing:-3px;color:#222;font-size:clamp(36px,6vw,64px);font-weight:400;line-height:.92}.contact-body p{color:#555;margin-bottom:18px;line-height:1.7}.contact-email{margin-bottom:18px}.contact-email a{color:#222;border-bottom:1px solid #ccc;font-size:15px}.contact-section .social-line{margin-top:0}footer{color:#555;background:#fff;border-top:1px solid #e8e8e8;padding-top:44px}.footer-main{grid-template-columns:1.2fr .8fr .8fr;gap:34px;padding-top:34px;display:grid}.footer-brand strong{color:#222;letter-spacing:-.4px;margin-bottom:10px;font-size:20px;font-weight:500;display:block}.footer-brand p{color:#555;max-width:420px;line-height:1.7}.footer-column-title{color:#222;margin-bottom:14px}.footer-column a{color:#555;border-bottom:1px solid #ddd;width:fit-content;margin-bottom:10px;transition:color .25s,border-color .25s;display:block}.footer-column a.social-link{align-items:center;gap:7px;display:inline-flex}.footer-column a:hover{color:#222;border-bottom-color:#222}.footer-bottom{color:#888;border-top:1px solid #eee;justify-content:space-between;gap:20px;margin-top:46px;padding:18px 0 0;display:flex}.footer-bottom a{color:#555;border-bottom:1px solid #ddd}.footer-bottom a:hover{color:#222;border-bottom-color:#222}@media (width<=900px){body{padding:28px}.menu-btn{display:flex}.desktop-nav{display:none}header{gap:34px;min-height:auto;margin-bottom:50px}header,.portfolio-grid,.contact-section-inner,.footer-main,.concept-showcase,.showcase-grid,.system-grid,.flow-diagram{grid-template-columns:1fr}.name{letter-spacing:-2.5px;margin-bottom:38px;font-size:clamp(46px,15vw,76px)}.about{font-size:clamp(25px,8vw,38px)}.info-block{max-width:none}.social-icon{width:20px;height:20px}.project-box{height:330px}.screen{opacity:0;transform:scale(.96)}.screen.mobile-active{opacity:1;z-index:10;transform:scale(1)}.screen img{height:84%}.project-template{padding-top:76px}.project-title-block h1{letter-spacing:-2.5px}.project-carousel{border-radius:20px;height:430px}.footer-bottom{gap:12px;display:grid}.concept-brand-card{align-items:flex-start}}@media (width<=600px){.next-project-card{align-items:flex-start}}@media (width<=480px){body{padding:20px}.name{margin-bottom:32px}.social-icon{width:22px;height:22px}.social-line{gap:14px}.project-box{border-radius:12px;height:280px}.caption{font-size:12px}.back-btn{width:42px;height:42px;top:18px;left:18px}.project-carousel{border-radius:16px;height:330px}.carousel-controls button{width:42px;height:42px}.prev-btn{left:12px}.next-btn{right:12px}.project-title-block h1{font-size:44px}.contact-section{padding:50px 0}.showcase-heading{letter-spacing:-1.8px;font-size:40px}.concept-brand-card{display:block}.concept-logo{margin-bottom:18px}.swatch{width:56px;height:56px}.diagram-row,.diagram-row span{display:block}.diagram-row span:last-child{text-align:left;margin-top:6px}}