@font-face{font-family:AptosNarrow;src:url('assets/aptos-narrow-bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url('assets/inter-bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
:root{--blue:#004c9a;--outline:#19365e;--background:#f3f3f3}
*{box-sizing:border-box}
html{background:var(--background);color:var(--blue);font-family:AptosNarrow,'Arial Narrow',Arial,sans-serif;font-weight:700}
body{margin:0;min-height:100vh;display:flow-root}img{display:block}
/* Large white foreground with a narrow, responsive background margin. */
.canvas{--edge:clamp(8px,1.4vw,24px);container-type:inline-size;width:calc(100% - 2 * var(--edge));min-height:calc(100svh - 2 * var(--edge));position:relative;margin:var(--edge) auto}
.sheet{--u:calc(100cqw / 2920);position:relative;width:100%;height:max(calc(100svh - 2 * var(--edge)),calc(1280 * var(--u)));background:#fff}
.frame{position:absolute;border:calc(4 * var(--u)) solid var(--blue);border-radius:calc(16 * var(--u))}
.brand,.search,.blank{height:calc(120 * var(--u))}
.brand,.blank-left{left:calc(24 * var(--u));width:calc(1020 * var(--u))}
.search,.blank-right{left:calc(1140 * var(--u));width:calc(1593 * var(--u))}
.brand,.search{top:calc(24 * var(--u))}.blank{top:calc(192 * var(--u))}
.brand{display:flex;align-items:center;padding:0 calc(24 * var(--u))}.brand img{width:calc(247 * var(--u));height:auto}
.search{display:flex;align-items:center;gap:calc(12 * var(--u));padding:0 calc(24 * var(--u))}
.icon{width:calc(64 * var(--u));height:calc(64 * var(--u));flex:none}.small-icon{width:calc(48 * var(--u));height:calc(48 * var(--u));flex:none}
.search-placeholder{display:flex;align-items:center;flex:1;height:calc(64 * var(--u));min-width:0;border:calc(4 * var(--u)) solid var(--blue);border-radius:calc(8 * var(--u));padding:0 calc(12 * var(--u));font-size:calc(32 * var(--u));white-space:nowrap}
.category{left:calc(24 * var(--u));top:calc(336 * var(--u));width:calc(1020 * var(--u));height:calc(472 * var(--u));padding:calc(24 * var(--u))}
.menu-row{height:calc(64 * var(--u));display:flex;align-items:center;gap:calc(12 * var(--u));margin-bottom:calc(24 * var(--u))}.menu-row:last-child{margin-bottom:0}
.menu-row>.small-icon:last-child{margin-left:calc(12 * var(--u))}
.menu-label{height:calc(64 * var(--u));width:calc(816 * var(--u));display:flex;align-items:center;gap:calc(24 * var(--u));padding:0 calc(12 * var(--u));background:var(--blue);color:#fff;border-radius:calc(8 * var(--u));font-size:calc(32 * var(--u));white-space:nowrap;flex:none}
.current .menu-label{width:calc(756 * var(--u));background:#000}
.level{width:calc(24 * var(--u));height:calc(24 * var(--u));flex:none}.dot{width:calc(24 * var(--u));height:calc(24 * var(--u));border-radius:50%;background:white;margin-left:auto;flex:none}
.notice{left:calc(1140 * var(--u));top:calc(336 * var(--u));width:calc(1593 * var(--u));bottom:calc(104 * var(--u))}
.development-logo{position:absolute;left:50%;top:calc(50% - 320 * var(--u));width:calc(650 * var(--u));transform:translateX(-50%)}
.development-logo img{width:100%;height:auto;transform-origin:center;animation:logo-pulse .9s ease-in-out infinite}
@keyframes logo-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@media(prefers-reduced-motion:reduce){.development-logo img{animation:none}}
.assistant{position:absolute;left:50%;top:calc(50% - 76 * var(--u));width:calc(325 * var(--u));height:calc(406 * var(--u));object-fit:contain;transform:translateX(-50%)}
h1{position:absolute;left:0;right:0;bottom:calc(12 * var(--u));text-align:center;margin:0;font-size:calc(70 * var(--u));line-height:1;white-space:nowrap;letter-spacing:0}
.side-icons img{position:absolute;width:calc(48 * var(--u));height:calc(48 * var(--u))}
.globe,.down{left:calc(2757 * var(--u))}.globe{top:calc(60 * var(--u))}.down,.info{top:calc(336 * var(--u))}
.info,.play,.book,.link,.diagram,.portal-icon{left:calc(2849 * var(--u))}
.play{top:calc(514 * var(--u))}.book{top:calc(660 * var(--u))}.link{top:calc(794 * var(--u))}.diagram{top:calc(948 * var(--u))}
.up{left:calc(2763 * var(--u));bottom:calc(152 * var(--u))}.portal-icon{bottom:calc(152 * var(--u))}
.footer{font-family:Inter,Arial,sans-serif;font-size:calc(20 * var(--u));color:white;line-height:1.2}
.footer>div{position:absolute;bottom:calc(24 * var(--u));height:calc(32 * var(--u));background:#193665;border-radius:calc(4 * var(--u));padding:0 calc(12 * var(--u));display:flex;align-items:center;justify-content:space-between;white-space:nowrap}
.footer-left{left:calc(24 * var(--u));width:calc(1020 * var(--u))}.footer-right{left:calc(1140 * var(--u));width:calc(1593 * var(--u))}.update{margin-left:calc(36 * var(--u))}

.content-side-icons{display:none}

/* Separate mobile composition from the user-supplied reference. */
@media(max-width:900px){
 .canvas{width:100%;margin:0;min-height:0}
 .sheet{--m:calc(100cqw / 1025);--u:calc(100cqw / 1215);height:calc(2094 * var(--m))}
 .sheet::before{content:"";position:absolute;left:0;right:0;top:calc(1014 * var(--m));height:calc(20 * var(--m));background:#f3f3f3}
 .brand,.blank-left{display:none}
 .search,.blank-right,.category,.notice{left:calc(20 * var(--m));width:calc(862 * var(--m))}
 .search{top:calc(20 * var(--m));height:calc(102 * var(--m))}
 .blank-right{top:calc(164 * var(--m));height:calc(100 * var(--m))}
 .category{top:calc(286 * var(--m));height:calc(397 * var(--m))}
 .notice{top:calc(1055 * var(--m));bottom:auto;height:calc(972 * var(--m))}
 .development-logo{top:calc(150 * var(--m));width:calc(540 * var(--m))}
 .assistant{top:calc(384 * var(--m));width:calc(400 * var(--m));height:calc(500 * var(--m))}
 h1{bottom:calc(24 * var(--m));font-size:calc(32 * var(--m));line-height:1;white-space:nowrap}
 .footer{font-size:calc(14 * var(--m))}
 .footer>div{left:calc(20 * var(--m));width:calc(862 * var(--m));height:calc(24 * var(--m));bottom:auto;padding:0 calc(8 * var(--m));border-radius:calc(3 * var(--m))}
 .footer-left{top:calc(974 * var(--m))}
 .footer-right{top:calc(2047 * var(--m))}
 .update{margin-left:calc(12 * var(--m))}
 /* Each mobile section has its own scrolling icon group. */
 .side-icons img,.content-side-icons img{position:absolute;width:calc(40 * var(--m));height:calc(40 * var(--m));left:calc(964 * var(--m));top:auto;bottom:auto}
 .side-icons .globe{left:calc(903 * var(--m));top:calc(45 * var(--m))}
 .side-icons .down{left:calc(903 * var(--m));top:calc(285 * var(--m))}
 .side-icons .info{top:calc(285 * var(--m))}
 .side-icons .play{top:calc(435 * var(--m))}
 .side-icons .book{top:calc(559 * var(--m))}
 .side-icons .link{top:calc(672 * var(--m))}
 .side-icons .diagram{top:calc(802 * var(--m))}
 .side-icons .up{left:calc(909 * var(--m));top:calc(954 * var(--m))}
 .side-icons .portal-icon{top:calc(954 * var(--m))}
 .content-side-icons{display:block}
 .content-side-icons .info{top:calc(1279 * var(--m))}
 .content-side-icons .play{top:calc(1469 * var(--m))}
 .content-side-icons .book{top:calc(1593 * var(--m))}
 .content-side-icons .link{top:calc(1706 * var(--m))}
 .content-side-icons .diagram{top:calc(1836 * var(--m))}
 .content-side-icons .portal-icon{top:calc(1989 * var(--m))}
}