:root{--primary:#2a5f7f;--primary-light:#3a7fa5;--teal:#4fb3a0;--teal-light:#6ec9b8;--dark-blue:#1a3d5c;--secondary:#2c3e50;--accent:#5dade2;--bg-dark:#1a3d5c;--bg-light:#f8f9fa;--text-dark:#2c3e50;--text-light:#6c757d;--gradient-1:linear-gradient(135deg,#1a3d5c 0%,#2a5f7f 50%,#4fb3a0 100%);--gradient-2:linear-gradient(135deg,#2a5f7f 0%,#4fb3a0 100%);--gradient-3:linear-gradient(135deg,#4fb3a0 0%,#6ec9b8 100%);--shadow-sm:0 2px 4px #1a3d5c0f;--shadow-md:0 4px 12px #1a3d5c1a;--shadow-lg:0 8px 24px #1a3d5c26;--shadow-xl:0 16px 48px #1a3d5c33}*{box-sizing:border-box}body{color:var(--text-dark);background:var(--bg-light);margin:0;padding:0;font-family:"M PLUS 1p",Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;line-height:1.7}header{background:var(--gradient-1);width:38%;height:100vh;position:fixed;top:0;left:0;overflow:hidden}header:before{content:"";background:radial-gradient(circle at 20% 80%,#4fb3a04d 0%,#0000 50%),radial-gradient(circle at 80% 20%,#3a7fa540 0%,#0000 50%),radial-gradient(circle at 40% 40%,#5dade233 0%,#0000 50%);width:200%;height:200%;animation:20s ease-in-out infinite float;position:absolute;top:-50%;left:-50%}@keyframes float{0%,to{transform:translate(0)rotate(0)}33%{transform:translate(2%,2%)rotate(1deg)}66%{transform:translate(-1%,1%)rotate(-1deg)}}header .intro{z-index:1;text-align:center;padding:40px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}header .profile{width:200px;height:200px;box-shadow:0 0 0 4px #ffffff1a,var(--shadow-xl),0 0 60px #6366f166;background-image:url(/img/hiroki.png);background-position:50%;background-size:cover;border:4px solid #ffffff4d;border-radius:50%;margin:0 auto 24px;transition:transform .3s,box-shadow .3s}header .profile:hover{box-shadow:0 0 0 6px #fff3,var(--shadow-xl),0 0 80px #ec489980;transform:scale(1.05)}header .name{text-align:center;color:#fff;text-shadow:0 2px 10px #0003;margin-bottom:24px}header .name-ja{letter-spacing:.02em;font-size:32px;font-weight:700}header .name-en{opacity:.9;margin-top:6px;font-size:18px;font-weight:400}header .social-links{justify-content:center;align-items:center;gap:20px;margin-top:24px;display:flex}header .social-links a{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;background:#ffffff26;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:all .3s cubic-bezier(.4,.4,0,1);display:flex}header .social-links a:hover{background:#ffffff40;border-color:#fff6;transform:translateY(-3px);box-shadow:0 8px 16px #0003}header .social-links a svg{filter:drop-shadow(0 1px 2px #0003)}main{background:var(--bg-light);min-height:100vh;margin-left:38%;padding:0}.nav-tabs{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;box-shadow:0 1px 0 #1a3d5c14,var(--shadow-sm);-webkit-overflow-scrolling:touch;scrollbar-width:thin;background:#fffffffa;border-bottom:1px solid #1a3d5c14;flex-wrap:nowrap;gap:0;padding:6px 16px;display:flex;position:sticky;top:0;overflow-x:auto;border:none!important}.nav-tabs::-webkit-scrollbar{height:3px}.nav-tabs::-webkit-scrollbar-track{background:0 0}.nav-tabs::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--primary),var(--teal));border-radius:2px}.nav-tabs .nav-link{white-space:nowrap;flex-shrink:0;position:relative;letter-spacing:0!important;color:var(--text-light)!important;background:0 0!important;border:none!important;border-bottom:2px solid #0000!important;border-radius:0!important;padding:8px 12px!important;font-size:11px!important;font-weight:500!important;transition:all .3s cubic-bezier(.4,.4,0,1)!important}.nav-tabs .nav-link:after{content:"";background:linear-gradient(90deg,var(--primary),var(--teal));height:2px;transition:transform .3s cubic-bezier(.4,.4,0,1);position:absolute;bottom:-1px;left:0;right:0;transform:scaleX(0)}.nav-tabs .nav-link:hover{color:var(--primary)!important;background:#2a5f7f0a!important}.nav-tabs .nav-link.active{color:var(--dark-blue)!important;background:0 0!important;font-weight:600!important}.nav-tabs .nav-link.active:after{transform:scaleX(1)}.tab-content{padding:32px}main section{width:100%;max-width:800px;margin:0 auto;animation:.4s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}main h2{letter-spacing:-.02em;color:var(--dark-blue);border-bottom:1px solid;border-image:linear-gradient(90deg,var(--primary)0%,var(--teal)40%,transparent 100%)1;margin:48px 0 24px;padding-bottom:16px;font-size:28px;font-weight:600;display:inline-block;position:relative}main h2:after{content:"";background:linear-gradient(90deg,var(--primary),var(--teal));border-radius:2px;width:60px;height:3px;position:absolute;bottom:-1px;left:0}main h3{letter-spacing:-.01em;color:var(--primary);align-items:center;gap:10px;margin:32px 0 16px;font-size:20px;font-weight:600;display:flex}main h3:before{content:"";background:linear-gradient(180deg,var(--primary),var(--teal));border-radius:2px;width:3px;height:22px}main ul{padding:0;list-style:none}main li{box-shadow:var(--shadow-sm);background:#fff;border-left:3px solid #0000;border-radius:4px;margin:10px 0;padding:18px 24px;list-style:none;transition:all .4s cubic-bezier(.4,.4,0,1);position:relative}main li:before{content:"";background:linear-gradient(180deg,var(--primary),var(--teal));opacity:0;width:3px;transition:opacity .3s;position:absolute;top:0;bottom:0;left:0}main li:hover{box-shadow:var(--shadow-md);transform:translate(4px)}main li:hover:before{opacity:1}main li ul{margin-top:12px;padding-left:16px}main li li{background:var(--bg-light);border-left:2px solid var(--teal);box-shadow:none;border-radius:3px;margin:8px 0;padding:10px 16px;position:relative}main li li:before{opacity:0;background:linear-gradient(180deg,var(--teal),var(--teal-light));width:2px}main li li:hover{background:#4fb3a014;transform:translate(3px)}main li li:hover:before{opacity:1}main a{color:var(--primary);border-bottom:1px solid #0000;font-weight:500;text-decoration:none;transition:all .3s;position:relative}main a:hover{color:var(--teal);border-bottom-color:var(--teal)}.code-block-wrapper{margin:16px 0;position:relative}.copy-button{background:linear-gradient(135deg,var(--primary),var(--teal));color:#fff;letter-spacing:.02em;cursor:pointer;box-shadow:var(--shadow-sm);z-index:10;border:none;border-radius:4px;align-items:center;gap:6px;padding:8px 16px;font-size:11px;font-weight:600;transition:all .4s cubic-bezier(.4,.4,0,1);display:flex;position:absolute;top:16px;right:16px}.copy-button:hover{box-shadow:var(--shadow-md);opacity:.9;transform:translateY(-2px)}.copy-button:active{transform:translateY(0)}main pre,main code{font-family:SF Mono,Fira Code,monospace}main pre{white-space:pre-wrap;color:var(--text-dark);box-shadow:var(--shadow-sm);background:linear-gradient(135deg,#f8f9fa 0%,#f1f3f5 100%);border:1px solid #1a3d5c1a;border-radius:4px;padding:60px 24px 24px;font-size:14px;line-height:1.6;overflow-x:auto}main p{color:var(--text-light);margin:16px 0;line-height:1.8}main section a[href*="drive.google.com"]{background:linear-gradient(135deg,var(--primary),var(--teal));letter-spacing:.02em;box-shadow:var(--shadow-md);border-radius:4px;align-items:center;gap:10px;padding:14px 28px;font-size:14px;font-weight:600;transition:all .4s cubic-bezier(.4,.4,0,1);display:inline-flex;color:#fff!important;border:none!important}main section a[href*="drive.google.com"]:before{content:"📥";font-size:18px}main section a[href*="drive.google.com"]:hover{box-shadow:var(--shadow-lg);opacity:.95;transform:translateY(-2px)}@media screen and (max-width:1000px){header{width:100%;height:auto;min-height:400px;padding:60px 20px;position:relative}header .intro{padding:20px;position:relative;top:auto;left:auto;transform:none}header .profile{width:150px;height:150px}header .name-ja{font-size:26px}header .name-en{font-size:16px}header .social-links{gap:16px;margin-top:20px}header .social-links a{width:40px;height:40px}main{margin-left:0;padding:0}.nav-tabs{justify-content:center;gap:6px;padding:12px 16px}.nav-tabs .nav-link{padding:8px 14px!important;font-size:12px!important}.tab-content{padding:20px 16px}main h2{margin:24px 0 16px;font-size:22px}main h3{margin:20px 0 12px;font-size:18px}main li{margin:10px 0;padding:14px 16px;font-size:15px}main pre{padding:14px;font-size:12px}}@media screen and (max-width:600px){header{min-height:350px;padding:40px 16px}header .profile{width:120px;height:120px}header .name-ja{font-size:22px}header .name-en{font-size:14px}header .social-links{gap:12px;margin-top:16px}header .social-links a{width:36px;height:36px}header .social-links a svg{width:16px;height:16px}.nav-tabs{padding:10px 12px}.nav-tabs .nav-link{padding:6px 12px!important;font-size:11px!important}}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#1a3d5c0d}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--primary),var(--teal));background-clip:content-box;border:2px solid #0000;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--primary-light),var(--teal-light));background-clip:content-box}::selection{color:var(--dark-blue);background:#4fb3a040}