*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:#f7faff;color:#102647;font-family:Arial,"Yu Gothic",Meiryo,sans-serif;line-height:1.9}a{color:inherit;text-decoration:none}a:focus-visible,summary:focus-visible{outline:3px solid #2588d2;outline-offset:6px}.wrap{width:min(1160px,calc(100% - 64px));margin:auto}.nav{min-height:94px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand{font-size:1.4375rem;font-weight:800;letter-spacing:-1px}.brand span{color:#167cc1;font-weight:400}.nav nav{display:flex;gap:30px;font-size:0.875rem}.nav a:hover{color:#187cbe}.hero{background:#0a2549;color:white;padding:65px 0 55px}.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:65px;align-items:center}.kicker{font:12px/1.6 monospace;letter-spacing:2px;color:#167abd}.hero .kicker{color:#89c8fa}.hero h1{font-size:clamp(2.375rem,4.7vw,4rem);line-height:1.5;letter-spacing:-.035em;margin:20px 0}.hero p{color:#c6d6ec;font-size:1rem;max-width:500px}.logo-panel{background:#fff;border-radius:5px;overflow:hidden;padding:28px 0}.logo-panel img{display:block;width:100%;height:auto}.hero-links{display:flex;gap:25px;flex-wrap:wrap;align-items:center;margin-top:30px}.primary{display:inline-block;background:#288bce;color:white;padding:12px 24px;border-radius:3px;font-size:0.875rem}.secondary{font-size:0.875rem;border-bottom:1px solid #829cbf;padding:8px 0}.hero-bottom{border-top:1px solid #385372;margin-top:50px;padding-top:20px;display:flex;justify-content:space-between;gap:18px;font:12px/1.8 monospace;letter-spacing:1px;color:#a8c3e5}.section{padding:75px 0;border-bottom:1px solid #d9e4ef}.intro{display:grid;grid-template-columns:1fr 1.5fr;gap:70px}.section h2{font-size:2rem;line-height:1.6;letter-spacing:-1px;margin:10px 0 20px}.section p{font-size:1rem;color:#516581}.intro p{margin-top:4px}.stack{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:35px}.stack article{border-top:2px solid #2388ce;padding-top:22px}.num{font:13px monospace;color:#1b7fbe}.stack h3{font-size:1.4375rem;margin:12px 0 5px}.stack .tech{font:13px/1.8 monospace;color:#1766a1}.stack p{font-size:0.9375rem}.architecture{margin-top:35px;padding:25px 30px;background:#eaf2fb;border-left:3px solid #298acb}.architecture h3{margin:0 0 12px;font-size:1.0625rem}.flow{display:flex;gap:15px;flex-wrap:wrap;align-items:center;font-size:0.875rem}.flow span{background:white;padding:8px 15px;border:1px solid #cadcec}.architecture small{display:block;color:#536a86;font-size:0.8125rem;margin-top:14px}.project{display:grid;grid-template-columns:220px 1fr 140px;gap:30px;align-items:center;padding:28px 0;border-top:1px solid #d9e4ef}.project h3{font-size:1.625rem;margin:0}.project p{margin:0;font-size:0.9375rem}.status{font-size:0.75rem;color:#4d6b87}.link{color:#1476b6;font-size:0.875rem;text-decoration:underline;text-underline-offset:5px}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.principles h3{font-size:1.1875rem}.owner{display:flex;justify-content:space-between;align-items:center;gap:35px}.owner p{margin:4px 0}.owner h2{font-size:1.6875rem}.footer{padding:30px 0;display:flex;justify-content:space-between;gap:20px;font-size:0.75rem;color:#5b7089}.skip{position:absolute;top:-100px}.skip:focus{top:10px;background:white;padding:10px;z-index:10}@media(max-width:760px){.wrap{width:calc(100% - 40px)}.nav{min-height:80px;gap:16px}.brand{font-size:1.25rem}.nav nav{gap:16px;font-size:0.75rem}.hero{padding:40px 0}.hero-grid{grid-template-columns:1fr;gap:35px}.hero h1{font-size:clamp(2rem,8vw,2.875rem)}.logo-panel{max-width:440px;padding:10px 0}.hero-bottom{flex-direction:column;margin-top:30px}.intro,.stack,.principles{grid-template-columns:1fr;gap:20px}.section{padding:48px 0}.section h2{font-size:1.75rem}.project{grid-template-columns:1fr;gap:12px}.owner{align-items:flex-start;flex-direction:column;gap:20px}.footer{flex-direction:column;gap:10px}.architecture{padding:22px}.flow{gap:8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.note-wrap{max-width:820px}.note-hero{background:#eaf3fc;padding:55px 0}.note-hero h1{font-size:clamp(2rem,5vw,3.0625rem);line-height:1.5;margin:20px 0;letter-spacing:-1px}.note-hero p,.note-section p{color:#516581;font-size:1rem}.note-status{font-size:0.8125rem;color:#315779}.note-section{padding:35px 0;border-bottom:1px solid #d9e4ef}.note-section h2{font-size:1.4375rem;line-height:1.6}.note-related{display:flex;flex-wrap:wrap;gap:24px;padding:35px 0 55px;color:#1476b6;text-decoration:underline;text-underline-offset:5px}

/* Blue branding on a light hero lets the transparent logo read without a white tile. */
.hero{background:#eaf3fc;color:#102647}.hero .kicker{color:#176ca8}.hero p{color:#4c6482}.logo-panel{background:transparent;padding:0;overflow:visible}.hero-bottom{border-color:#bfd4e9;color:#47688d}.secondary{border-color:#6b99bd}.hero-links .primary:hover{background:#1768a1}

.nav a[aria-current="page"]{color:#12699e;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}.note-related a[aria-current="page"]{font-weight:700}

.nav{flex-wrap:wrap;padding-block:16px}.nav nav{flex-wrap:wrap}.hero-grid>*,.intro>*,.stack>*,.project>*,.principles>*{min-width:0}.hero-bottom,.kicker,.tech{overflow-wrap:anywhere}.flow span{max-width:100%;overflow-wrap:anywhere}.primary{background:#176da6}.stack p,.project p{font-size:1rem}