:root{--base-color:white;--base-variant:#eee;--border-color:#ddd;--icon-color:#262626;--text-color:black;--secondary-text:#555;--accent-color:#0077cc}
*{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth;font-family:'Inter'}body{background-color:var(--base-color);color:var(--text-color);line-height:1.6}
header{background-color:var(--base-color);padding:2rem 2rem}.navbar{display:flex;justify-content:space-between;align-items:center}
.navbar a,#theme-switch{display:flex;align-items:center}nav a h2{font-size:1.2rem;font-weight:bold;margin-bottom:.8rem}nav .star{font-size:1.3rem}
nav ul li a{position:relative;text-decoration:none;color:var(--secondary-text,#555);transition:all .3s ease}nav ul li a:hover{transform:scale(1.05);color:var(--text-color,black)}
nav ul li a::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:2px;background-color:var(--text-color,black);transition:width .3s ease}
nav ul li a:hover::after{width:100%}section{min-height:100vh;width:100%;scroll-snap-align:start;text-align:center;justify-content:center;padding:7.5% 2rem;box-sizing:border-box}
@keyframes appear{from{opacity:0;scale:.5}to{opacity:1;scale:1}}.block{animation:appear linear;animation-timeline:view();animation-range:0% cover 30%}
.logo{text-decoration:none;font-weight:bold;font-size:1.2rem;color:var(--text-color)}.navbar ul{display:flex;gap:1.5rem;list-style:none;align-items:center}
#theme-switch{height:50px;width:50px;border:none;border-radius:50%;padding:0;background-color:var(--base-variant);color:var(--secondary-text);display:flex;cursor:pointer;justify-content:center;align-items:center;position:relative;transition:all .3s ease-in-out}
#theme-switch:hover{color:var(--text-color)}#theme-switch:active{transform:scale(.8)}#theme-switch span{fill:var(--icon-color)}#theme-switch span:last-child{display:none}
.gradient-cs{background:linear-gradient(90deg,#6a11cb,#2575fc);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.gradient-business{background:linear-gradient(90deg,#ff7e5f,#feb47b);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero h1{font-size:clamp(1.5rem,5vw,2.5rem);font-weight:300;max-width:900px;margin:.5rem auto}.hero em{font-style:italic;font-weight:500}.hero strong{font-weight:500}
.wrapper {width: 60%;max-width: 1536px;margin-inline: auto;position: relative;height: 50px;margin-top: 2rem;overflow: hidden;mask-image: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,1) 20%,rgba(0,0,0,1) 80%,rgba(0,0,0,0));}@keyframes scrollLeft{to{left: -100px;}}
.item{width: 100px;height: 50px;background-size: contain;  /* keep aspect ratio of icons */background-repeat: no-repeat;background-position: center;border-radius: 6px;position: absolute;left: max(calc(100px * 8), 100%);animation-name: scrollLeft;animation-duration: 20s;animation-timing-function: linear;animation-iteration-count: infinite;}
.item::after{content: "";position: absolute;inset: 0;background: inherit;filter: grayscale(100%);background-size: inherit;background-repeat: inherit;background-position: inherit;transition: filter 0.3s ease-in-out;}.item:hover::after{filter: grayscale(0%);}
.item1{background-image: url("icons/java-icon.png");animation-delay: calc(20s / 8 * (8 - 1) * -1);}.item2{background-image: url("icons/javaScript-icon.png");animation-delay: calc(20s / 8 * (8 - 2) * -1);}
.item3{background-image: url("icons/MySQL-icon.png");animation-delay: calc(20s / 8 * (8 - 3) * -1);}.item4{background-image: url("icons/html-icon.png");animation-delay: calc(20s / 8 * (8 - 4) * -1);}
.item5{background-image: url("icons/python-icon.png");animation-delay: calc(20s / 8 * (8 - 5) * -1);}.item6{background-image: url("icons/css-icon.png");animation-delay: calc(20s / 8 * (8 - 6) * -1);}
.item7{background-image: url("icons/swift-icon.png");animation-delay: calc(20s / 8 * (8 - 7) * -1);}.item8{background-image: url("icons/vsCode-icon.png");animation-delay: calc(20s / 8 * (8 - 8) * -1);}
.about-section{padding:6rem 2rem;background:var(--base-color)}.about-section h2{font-size:2rem;font-weight:600;margin-bottom:2rem}.about-container{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:3rem;align-items:center}
.about-text{flex:1 1 500px}.jp{font-family:'Noto Sans JP'}.about-text h2{text-align:left;font-size:2rem;font-weight:300;margin-bottom:1.5rem;line-height:1.3}.about-text h2 em{font-style:italic;font-weight:600}.about-text h2 strong{font-weight:600}
.about-text p{text-align:left;font-size:1rem;line-height:1.8;color:var(--secondary-text);margin-bottom:1.2rem}.about-image{flex:1 1 400px;display:flex;justify-content:center}.about-image img{max-width:100%;border-radius:1rem;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.projects{padding:6rem 2rem;width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:6rem}.project{display:flex;flex-direction:column;align-items:center;gap:2rem;max-width:1000px;margin:0 auto}.project.reverse{flex-direction:column-reverse}
@media(min-width:900px){.project{flex-direction:row;justify-content:space-between}.project.reverse{flex-direction:row-reverse}}.project-media{flex:1;min-width:440px;border-radius:16px;overflow:hidden;box-shadow:0 10px 25px rgba(0,0,0,.08);background:linear-gradient(135deg,#f3f3f3,#fafafa)}
model-viewer{display:block;width:100%;height:320px;background:transparent}.project-media.origami{background:linear-gradient(135deg,#b4f2d2,#f7fbd9)}.project-media.heart{background:linear-gradient(135deg,#dcd2f2,#f2e7da)}.project-media.quant{background:linear-gradient(135deg,#f0b2a8,#94d5f4)}
.project-content{flex:1;padding:1rem 2rem;text-align:left}.project-content h3{font-size:1.75rem;font-weight:600;margin-bottom:1rem}.project-content p{font-size:1rem;color:var(--secondary-text,#555);line-height:1.6;margin-bottom:1.5rem}
.view-project{text-decoration:none;color:#2563eb;font-weight:500;transition:color .2s ease}.unfinished-project{text-decoration:none;color:#ff4d4d;font-weight:500}.view-project:hover{color:#1d4ed8}
.site-footer{background:var(--base-color);padding:0;border-top:1px solid var(--text-color);font-family:sans-serif}.footer-banner{position:relative;overflow:hidden;border-bottom:1px solid var(--text-color);background:var(--base-color);height:2rem;display:flex;align-items:center}
.banner-track{display:flex;width:max-content;animation:scrollBanner 20s linear infinite}.banner-track span{flex:none;flex-shrink:0;white-space:nowrap;font-size:.9rem;text-transform:uppercase}
@keyframes scrollBanner{from{transform:translateX(0)}to{transform:translateX(-50%)}}.footer-content{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;max-width:1200px;margin:0 auto;padding:2.5rem 2rem}
.footer-left h2{font-size:1.6rem;font-weight:bold;margin-bottom:.8rem}.footer-left .star{font-size:1.7rem}.footer-left .subtitle{font-size:1rem;color:var(--secondary-text);margin-bottom:1rem}.footer-left .credit{font-size:.9rem;color:var(--secondary-text)}
.footer-middle h3,.footer-right h3{font-size:.95rem;font-weight:bold;margin-bottom:.6rem}.footer-middle ul,.footer-right ul{list-style:none;padding:0}.footer-middle li,.footer-right li{margin-bottom:.5rem}
.footer-middle a,.footer-right a{text-decoration:none;color:var(--text-color);font-size:.95rem}.footer-middle a:hover,.footer-right a:hover{text-decoration:underline}
@media(max-width:768px){.footer-content{grid-template-columns:1fr;text-align:center}.footer-middle,.footer-right{margin-top:1.5rem}}