:root { color-scheme: light; scroll-padding-top: 16px; }
* { box-sizing: border-box; }
html { min-width: 280px; }
body { margin: 0; padding: 34px 16px 42px; color: #292942; font: 13px/1.85 "MS PGothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; background: #080e35 url("/stars.svg"); }
body[data-wallpaper="paper"] { background-color: #dad7c8; background-image: repeating-linear-gradient(45deg, transparent 0 4px, #ffffff55 4px 5px); }
body[data-wallpaper="mint"] { background-color: #164847; }
a { color: #0000c0; text-underline-offset: 3px; }
a:visited { color: #651b8f; }
a:hover { color: #b31440; }
a:focus-visible, button:focus-visible { outline: 3px solid #ca321e; outline-offset: 4px; }
button { color: #181822; background: #e9e6d9; border: 2px outset #fbfaf4; border-radius: 0; font: inherit; line-height: 1.5; padding: 5px 13px; min-height: 34px; cursor: pointer; }
button:active { border-style: inset; }
[hidden] { display: none !important; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 5; padding: 8px 12px; background: #fff; }
.skip-link:focus { top: 8px; }
.web-page { max-width: 860px; margin: 0 auto; border: 3px ridge #c7ceda; background: #f6f3df; box-shadow: 7px 7px 0 #0007; }
.connection { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 5px 12px; background: #d4d4d4; border-bottom: 2px outset #eee; color: #353b48; font: 10px/1.6 "Courier New", monospace; letter-spacing: .3px; }
.online-light { width: 7px; height: 7px; background: #259c32; box-shadow: inset 1px 1px 0 #baffb0; }
.connection-right { margin-left: auto; }
.masthead { text-align: center; padding: 19px 10px 22px; background: #e9f0f1; background-image: linear-gradient(90deg, #d8e9ed55 1px, transparent 1px), linear-gradient(#d8e9ed55 1px, transparent 1px); background-size: 12px 12px; }
.welcome { margin: 0 0 7px; color: #2c536f; font: italic 13px/1.8 Georgia, serif; }
h1 { color: #152b71; margin: 0; font: bold clamp(25px, 5.6vw, 46px)/1.15 "Times New Roman", serif; letter-spacing: -1px; text-shadow: 2px 2px 0 #fff, 3px 3px 0 #bac2d9; }
h1 span { color: #873e64; font-style: italic; }
.tagline { margin: 16px 0 9px; color: #3e4762; font-size: 13px; letter-spacing: 2px; }
.era-label { display: inline-block; color: #73592b; font-size: 10px; letter-spacing: 1px; background: #fffce7; padding: 2px 11px; border: 1px dotted #ad9860; }
.rainbow-rule { height: 5px; background: linear-gradient(90deg, #a8547f, #cb7762, #dac879, #90b296, #69a2b8, #5f72a6, #976791); }
.announcement { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px dashed #b8b6a6; color: #665434; background: #fffbea; font-size: 12px; }
.new-badge { display: inline-block; flex-shrink: 0; font: bold italic 10px/1.3 Arial, sans-serif; color: #b1262e; letter-spacing: .5px; }
.announcement-star { color: #c39937; margin-left: auto; }
.page-columns { display: grid; grid-template-columns: 174px minmax(0, 1fr); gap: 20px; padding: 22px 20px 8px; }
.window { margin: 0 0 17px; border: 2px outset #fffef3; outline: 1px solid #aaa997; background: #fffdf2; }
.window-title { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 9px; background: #414d74; color: #fffdee; font-size: 12px; font-weight: normal; letter-spacing: 1px; line-height: 1.8; }
.title-en { margin-left: auto; font: 9px/1.5 "Courier New", monospace; letter-spacing: 1px; color: #e2e3ec; }
.section-body { padding: 16px 20px; }
.section-body > :first-child { margin-top: 0; }
.section-body > :last-child { margin-bottom: 0; }
.menu-window { background: #ecebdf; }
.menu-window .window-title { background: #8a5664; }
nav { padding: 5px 8px; }
nav a { display: block; padding: 7px 1px; border-bottom: 1px dotted #c5c0ad; font-size: 11px; }
nav a:last-child { border-bottom: 0; }
nav a > span { font-size: 8px; color: #997044; padding-right: 2px; }
nav small { color: #b1262e; font: italic bold 8px Arial, sans-serif; text-decoration: none; }
.mini-window { text-align: center; margin-top: 20px; }
.mini-window .window-title { justify-content: center; background: #637567; font: 10px/1.9 "Courier New", monospace; }
.pixel-computer { width: 70px; margin: 22px auto 11px; image-rendering: pixelated; }
.monitor { height: 49px; padding: 5px; border: 3px outset #e0dfcc; background: #aaa993; box-shadow: 3px 2px 0 #96947d; }
.monitor > span { display: block; height: 32px; border: 2px inset #858a79; background: #153d34; color: #a2dc92; font: 20px/1.2 "Courier New", monospace; text-align: left; padding-left: 7px; }
.cursor { animation: terminal 1.6s steps(1) infinite; }
.monitor-stand { background: #c4c2ad; border: 2px outset #e9e7d5; width: 24px; height: 9px; margin: 0 auto; }
.keyboard { height: 10px; width: 69px; margin: 1px auto; background: repeating-linear-gradient(90deg, #d6d4c2 0 4px, #9c9c8b 4px 5px); border: 2px outset #d6d4c2; transform: skew(-12deg); }
.webmaster-name { font: bold 12px/1.6 "Courier New", monospace; margin: 9px 0 4px; }
.small-note { font-size: 10px; line-height: 1.8; color: #686757; margin: 0 6px 17px; }
.retro-stamps { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 23px; }
.stamp { display: flex; flex-direction: column; justify-content: center; width: 116px; height: 35px; border: 2px outset #e2dfc8; background: #343c66; text-align: center; color: #ffef99; box-shadow: 1px 1px #898a7d; }
.stamp b { font: bold 12px/1.15 "Courier New", monospace; letter-spacing: 1px; }
.stamp > span { font: 7px/1.6 Arial, sans-serif; letter-spacing: 1px; }
.noframe-stamp { background: #ddd8bd; color: #4f533d; }
.noframe-stamp b { font-size: 10px; }
.sound-stamp { background: #6b414b; color: #fff1c8; }
.sound-stamp b { font: bold 11px/1.2 Meiryo, sans-serif; }
.sidebar-note { text-align: center; color: #787263; font-size: 9px; margin-top: 17px; }
.hello { font-weight: bold; color: #6c3656; font-size: 14px; }
.greeting .section-body { padding-top: 18px; padding-bottom: 18px; }
.greeting p { margin: 0 0 13px; }
.signature { text-align: right; font-size: 11px; color: #6c655c; }
.signature span { margin-left: 6px; color: #76526c; }
.links-window .window-title { background: #546d67; }
.learn-link { display: flex; align-items: center; gap: 13px; line-height: 1.7; }
.learn-banner { display: flex; flex-shrink: 0; flex-direction: column; align-items: center; justify-content: center; width: 88px; height: 45px; border: 2px outset #cad9e9; background: #244f85; color: #fff; text-align: center; text-decoration: none; }
.learn-banner b { font: bold italic 24px/1.15 "Times New Roman", serif; }
.learn-banner small { font: 7px/1.4 "Courier New", monospace; letter-spacing: .5px; }
.learn-link > span:nth-child(2) { flex: 1; }
.learn-link strong { display: block; font-size: 12px; }
.learn-link > span:nth-child(2) > small { display: block; margin-top: 3px; color: #65665b; font-size: 10px; text-decoration: none; }
.link-arrow { font: 28px/1 Georgia, serif; color: #8a907b; }
.link-note { color: #7c7569; font-size: 9px; margin: 12px 0 0; }
.diary-window .window-title { background: #7d654f; }
.update-list { list-style: none; margin: 0; padding: 0; font-size: 11px; }
.update-list li { display: flex; align-items: baseline; gap: 15px; }
.update-list time { font-family: "Courier New", monospace; color: #7a4a37; white-space: nowrap; }
.update-detail { color: #7b7667; font-size: 10px; }
.construction { display: flex; align-items: center; gap: 12px; border-top: 1px dashed #c9bfa2; padding-top: 14px; margin-top: 17px; }
.construction-icon { display: block; flex-shrink: 0; width: 33px; height: 29px; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: repeating-linear-gradient(45deg, #f3ce58 0 6px, #343638 6px 10px); color: #151515; font: bold 18px/2 Arial, sans-serif; text-align: center; text-shadow: 0 0 3px #fff; }
.construction p { margin: 0; font-size: 11px; line-height: 1.8; }
.construction p span { color: #787164; font-size: 10px; }
.souvenir-window .window-title { background: #785e7b; }
.souvenir-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 15px; }
.souvenir-grid h3 { font-size: 11px; color: #715c69; margin: 0 0 8px; }
.fortune-box { border-right: 1px dotted #c6bca8; padding-right: 12px; }
#fortune { min-height: 44px; color: #514754; margin: 0 0 8px; font-size: 11px; }
.fortune-box button { font-size: 10px; min-height: 30px; padding: 4px 11px; }
.tiny-note { color: #777164; font-size: 9px; line-height: 1.8; margin-top: 10px; }
.banner-box img { image-rendering: pixelated; border: 0; display: block; margin-top: 12px; }
.back-to-top { font-size: 10px; text-align: right; padding-top: 1px; }
footer { border-top: 2px groove #fff; text-align: center; margin: 0 20px; padding: 16px 4px 17px; color: #7b7464; }
.footer-line { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; margin-bottom: 13px; }
.footer-line > span:nth-child(2) { font: 9px/1.6 "Courier New", monospace; letter-spacing: 1px; }
.era-digits { font: bold 17px/1.4 "Courier New", monospace; color: #b6d998; background: #242b20; border: 2px inset #ddd4b5; padding: 1px 5px 0; white-space: pre; }
.footer-line button { font-size: 9px; min-height: 28px; padding: 3px 7px; }
footer > p { margin: 3px 0; font-size: 9px; }
.app-version { font-family: "Courier New", monospace; margin-top: 11px; }
@keyframes terminal { 50% { opacity: 0; } }
@media (max-width: 650px) {
  body { padding: 14px 10px 24px; }
  .page-columns { grid-template-columns: 1fr; gap: 0; padding: 17px 14px 5px; }
  .sidebar { display: contents; }
  .mini-window, .retro-stamps, .sidebar-note { display: none; }
  .menu-window { margin-bottom: 18px; }
  .menu-window .window-title { font-size: 10px; padding-top: 2px; padding-bottom: 2px; }
  nav { display: grid; grid-template-columns: 1fr 1fr; padding: 3px 9px; column-gap: 14px; }
  nav a { padding: 6px 0; }
  nav a:nth-child(3) { border-bottom: 0; }
  .welcome { font-size: 10px; }
  .masthead { padding: 17px 9px 19px; }
  .tagline { font-size: 11px; letter-spacing: .8px; margin-top: 14px; }
  .era-label { font-size: 9px; letter-spacing: .3px; }
  .announcement { padding: 9px 12px; font-size: 10px; gap: 6px; }
  .section-body { padding: 14px 14px; }
  .greeting p { font-size: 12px; }
  .greeting .hello { font-size: 13px; }
  .greeting .signature { font-size: 10px; }
  .learn-link { gap: 10px; }
  .learn-link strong { font-size: 11px; }
  .learn-banner { width: 74px; }
  .link-arrow { display: none; }
  .update-list li { flex-direction: column; gap: 4px; }
  .souvenir-grid { gap: 11px; }
  footer { margin: 0 14px; }
  footer > p { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; } }