:root { --cream:#f7f3e8; --paper:#fffdf7; --ink:#27313a; --muted:#6f777d; --blue:#7ca7c7; --green:#91b49b; --coral:#e58a6b; --line:#d9d4c7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; }
a { color:inherit; }
.wrap { width:min(1120px,calc(100% - 48px)); margin-inline:auto; }
.site-header { height:70px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100vw - 1120px)/2)); border-bottom:1px solid var(--line); background:rgba(247,243,232,.9); position:sticky; top:0; z-index:10; backdrop-filter:blur(10px); }
.brand { display:flex; align-items:center; gap:9px; font:700 15px/1 ui-monospace,SFMono-Regular,Consolas,monospace; text-decoration:none; }
.status-dot { width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(145,180,155,.2); }
nav { display:flex; align-items:center; gap:28px; }
nav a { font-size:13px; text-decoration:none; }
nav a:hover { text-decoration:underline; text-underline-offset:5px; }
.hero { min-height:680px; padding-block:100px; display:grid; grid-template-columns:1.1fr .9fr; gap:80px; align-items:center; }
.kicker,.small-label { color:#53758d; margin:0 0 18px; font:700 12px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.05em; }
h1 { font-size:clamp(30px,5vw,62px); line-height:1.2; letter-spacing:-.055em; margin:0; }
.hero-line { display:block; white-space:nowrap; }
.hero-line.accent { color:#5b88a7; }
.lead { max-width:650px; margin:30px 0 0; color:#596169; font-size:17px; line-height:1.9; }
.hero-links { margin-top:38px; display:flex; align-items:center; gap:24px; }
.button { display:inline-block; border-radius:999px; padding:14px 22px; background:var(--coral); color:#fff; text-decoration:none; font-weight:700; font-size:14px; box-shadow:0 4px 0 #bd6d53; transition:transform .15s,box-shadow .15s; }
.button:hover { transform:translateY(2px); box-shadow:0 2px 0 #bd6d53; }
.plain-link { text-underline-offset:5px; font:600 14px ui-monospace,SFMono-Regular,Consolas,monospace; }
.terminal { background:#25303a; border:3px solid #34414c; border-radius:18px; overflow:hidden; transform:rotate(1.5deg); box-shadow:16px 18px 0 rgba(124,167,199,.22); }
.terminal-bar { height:48px; display:flex; align-items:center; gap:8px; padding:0 17px; background:#333f49; }
.terminal-bar span { width:11px; height:11px; border-radius:50%; background:#e58a6b; }.terminal-bar span:nth-child(2){background:#e5bc6b}.terminal-bar span:nth-child(3){background:#91b49b}.terminal-bar p{margin:auto;color:#aab6be;font:12px ui-monospace,monospace;transform:translateX(-24px)}
.terminal-body { padding:32px 36px 40px; color:#e8ecee; font:15px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; }
.terminal-body p { margin:18px 0 2px; color:#a5b1ba; }.terminal-body p:first-child{margin-top:0}.terminal-body b{color:#91b49b}.terminal-body strong{font-weight:500;color:#fff}.cursor{display:inline-block;width:8px;height:16px;background:#7ca7c7;vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.about { padding-block:110px; border-top:1px dashed #c9c1b1; }
.section-title { display:flex; gap:18px; align-items:flex-start; margin-bottom:56px; }.section-title>span{padding-top:5px;color:#8c969c;font:12px ui-monospace,monospace}.section-title p{margin:0 0 5px;color:#5b88a7;font:700 11px ui-monospace,monospace;letter-spacing:.15em}.section-title h2,footer h2{margin:0;font-size:clamp(32px,4vw,50px);letter-spacing:-.04em}
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.note-card { padding:38px; background:#fff6c9; border:1px solid #dfd19d; border-radius:4px 24px 24px 24px; box-shadow:8px 8px 0 rgba(225,206,135,.28); transform:rotate(-1deg); }
.note-card p { margin:0; font-size:17px; line-height:1.9; }.note-card p+p{margin-top:15px;color:#6e6856}
.topics { padding:34px 8px; }.topic-list{display:flex;flex-wrap:wrap;gap:10px}.topic-list span{padding:10px 16px;border:1px solid #bdc7ca;border-radius:999px;background:var(--paper);font-size:14px}.topic-note{margin-top:28px;color:#7b8286;font-size:12px;line-height:1.7}
.cert-section { padding-block:110px; background:#dce9e8; border-block:1px solid #c4d4d3; }
.cert-card { display:grid; grid-template-columns:minmax(280px,.75fr) 1.25fr; gap:clamp(40px,7vw,90px); align-items:center; background:var(--paper); border:1px solid #c3d0cf; border-radius:28px; padding:clamp(30px,5vw,64px); box-shadow:10px 10px 0 rgba(86,123,126,.12); }
.badge-link { display:block; transition:transform .2s; }.badge-link:hover{transform:rotate(-2deg) scale(1.02)}.badge-link img{display:block;width:100%;max-width:380px;height:auto;margin:auto}.cert-copy h3{margin:0;font-size:clamp(32px,4vw,52px);line-height:1.12;letter-spacing:-.04em}.cert-copy>p:not(.small-label){color:#626b70;line-height:1.8}.cert-description{margin:22px 0 28px!important}.button.dark{background:#34414c;box-shadow:0 4px 0 #1e272e}
footer { padding-block:64px; background:#25303a; color:#fff; }.footer-inner{display:flex;justify-content:flex-end;align-items:flex-end;gap:40px}.footer-links{text-align:right;display:grid;gap:18px}.social-list{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:12px}.social-item{min-width:170px;padding:14px 16px;border:1px solid #46545f;border-radius:12px;background:#2d3943;text-align:left;text-decoration:none}.social-item span{display:block;margin-bottom:5px;color:#91b49b;font:11px ui-monospace,monospace;letter-spacing:.06em}.social-item strong{font:600 13px ui-monospace,monospace;color:#fff}.social-list a:hover{border-color:#7ca7c7;background:#34434f}.back-link{font-size:13px;text-underline-offset:4px}.footer-links p{margin:0;color:#8f9ba4;font-size:11px}
@media (max-width:800px){nav a:first-child{display:none}.hero{grid-template-columns:1fr;gap:55px;padding-block:70px}.terminal{max-width:560px}.about-grid,.cert-card{grid-template-columns:1fr}.badge-link img{max-width:300px}.footer-inner{align-items:stretch;flex-direction:column}.footer-links{text-align:left}.social-list{justify-content:flex-start}.cert-section,.about{padding-block:80px}}
@media (max-width:480px){.wrap{width:min(100% - 32px,1120px)}.site-header{padding-inline:16px}nav{gap:15px}nav a{font-size:12px}.hero{min-height:0}.hero-links{align-items:flex-start;flex-direction:column}.terminal-body{padding:26px 22px}.note-card{padding:28px}.cert-card{padding:25px 20px}.social-list{display:grid}.social-item{min-width:0}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}