:root{color-scheme:light;--navy:#000080;--yellow:#ffff00;--red:#f10b16;--green:#008000;--gray:#c0c0c0}
*{box-sizing:border-box}html{height:100%;scroll-behavior:smooth}body{margin:0;height:100%;background:#c0c0c0;color:#171717;font-family:"MS PGothic","Yu Gothic",Meiryo,sans-serif;font-size:14px}
button,input,textarea{font:inherit}button{cursor:pointer}a{color:#0000ee;text-decoration:underline}a:visited{color:#800080}a:hover{color:#f00}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px dashed #ff00cf;outline-offset:3px}svg{display:block}
.sprite-defs{position:absolute;width:0;height:0;overflow:hidden}.desktop{display:flex;height:100%;flex-direction:column;padding:4px;min-height:440px}
.window-title{background:var(--navy);color:white;min-height:28px;padding:3px 7px;display:flex;align-items:center;justify-content:space-between;gap:10px;font:12px Arial,sans-serif;font-weight:bold;letter-spacing:.5px}
.title-left{display:flex;align-items:center;gap:7px}.title-icon{width:19px;height:19px}.window-controls{display:flex;gap:3px;color:#000}.window-controls span{width:17px;height:17px;text-align:center;background:#c0c0c0;border:2px outset #eee;line-height:13px}
.frames{display:grid;grid-template-columns:205px minmax(0,1fr);gap:5px;flex:1;min-height:0;margin-top:5px}
.side-frame,.main-frame{min-width:0;border:2px inset #f4f4f4;overflow:auto;scrollbar-color:#c0c0c0 #e3e3e3;scrollbar-width:auto}
.side-frame{background:#ffffc4;padding:12px 13px 18px;text-align:center}.mini-welcome{background:#008000;color:#fff;padding:3px;border:2px ridge #9bff51;font:11px "Courier New",monospace;letter-spacing:2px}
.side-crab{width:80px;height:65px;margin:13px auto 0}.side-name{color:#f00;font-size:20px;font-weight:900;letter-spacing:2px;margin:0 0 4px}.since{font:11px "Courier New",monospace;color:#646464}
.dotted-rule{border:0;border-top:2px dotted #f00;margin:16px 0}.menu-heading{color:#000080;font:bold 19px "Times New Roman",serif;letter-spacing:4px;margin:14px 0}
.nav-menu{display:grid;gap:7px;text-align:left}.nav-menu a{padding:7px 7px;border:3px outset #d7e0ff;background:#c6d3ff;font-weight:700;color:#0000ee;display:flex;align-items:center;gap:7px;white-space:nowrap}
.nav-menu a{position:relative;min-width:0}.nav-menu .new{position:absolute;right:3px;top:-5px;font-size:9px}.nav-menu a.active{background:#00ffff;border-color:#8affff}.nav-menu a:active{border-style:inset}.nav-icon{color:#f00;font-family:Arial;font-size:16px;width:16px;text-align:center}
.new{font:italic 900 11px Arial,sans-serif;background:#ff0;color:#f00;padding:1px 3px;display:inline-block;vertical-align:middle;animation:blink 1.7s steps(1,end) infinite}
.side-note{font-size:11px;line-height:1.8;color:#333;margin:13px 0}.status-box{border:2px groove white;background:#fff;padding:8px;font-size:11px;line-height:1.7}.status-box strong{color:#008000}
.tiny-control{border:2px outset #eee;background:#c0c0c0;padding:4px 7px;color:#111;font-size:11px}.side-controls{display:grid;gap:6px;margin-top:11px}.side-controls .tiny-control{width:100%}
.mini-banner{display:flex;justify-content:center;align-items:center;gap:6px;min-height:32px;border:2px outset #fff;margin:8px auto 0;font:bold 11px Arial,sans-serif;max-width:153px}
.browser-banner{background:#060968;color:#fff;text-align:left;font-size:9px}.browser-banner b{font:bold italic 25px Georgia,serif;color:#00e1ff}.html-banner{background:#222;color:#ff0;font-family:"Courier New",monospace}
.main-frame{background:#fffef0;position:relative;scroll-behavior:smooth}.page-topline{display:flex;justify-content:space-between;gap:8px;background:#e8e8e8;border-bottom:2px groove #fff;padding:5px 14px;font:11px "Courier New",monospace;color:#444}
.main-inner{max-width:1130px;margin:0 auto;padding:17px 25px 22px}.visitor-note{text-align:center;color:#008000;font-size:12px;letter-spacing:1px;margin:0 0 12px}
.hero{position:relative;overflow:hidden;text-align:center;background-color:#030539;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='124' height='102'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M13 11h1v5h-1zM11 13h5v1h-5zM77 68h1v5h-1zM75 70h5v1h-5z'/%3E%3Cpath d='M48 31h1v1h-1zM101 14h1v1h-1zM20 87h1v1h-1zM108 83h1v1h-1z'/%3E%3C/g%3E%3Cg fill='%235d80db'%3E%3Cpath d='M88 35h2v2h-2zM50 92h2v2h-2zM5 48h2v2h-2z'/%3E%3C/g%3E%3C/svg%3E");border:5px ridge #8f9bca;padding:18px 12px 16px;color:white}
.hero-kicker{font:bold 12px "Courier New",monospace;color:#0ff;letter-spacing:4px;margin:0 0 14px}.hero-title-row{display:flex;align-items:center;justify-content:center;gap:22px}
.hero-crab{width:125px;height:110px;flex-shrink:0;filter:drop-shadow(4px 4px 0 #000);animation:bob 1.5s steps(2,end) infinite}.hero-crab.right{animation-delay:-.75s;transform:scaleX(-1)}
h1{margin:0;font-family:"MS PMincho","Yu Mincho",serif;font-size:clamp(31px,3.4vw,52px);line-height:1.45;font-weight:900;letter-spacing:4px;text-shadow:2px 2px #000,-1px -1px white}
.name-line{font-size:1.12em;white-space:nowrap}.name-line span:nth-child(1){color:#ff3737}.name-line span:nth-child(2){color:#ff8d23}.name-line span:nth-child(3){color:#ffff00}.name-line span:nth-child(4){color:#00ff43}.name-line span:nth-child(5){color:#00eaff}.name-line span:nth-child(6){color:#8795ff}.name-line span:nth-child(7){color:#ff61dd}
.welcome-line{display:block;color:#ffff00;font-size:.7em;letter-spacing:2px}.hero-sub{font-family:"Courier New",monospace;color:#fc94ed;font-size:12px;letter-spacing:2px;margin:14px 0 16px}
.rainbow-rule{height:5px;border:0;background:linear-gradient(90deg,#f00 0 16.6%,#ff0 16.6% 33.3%,#0f0 33.3% 50%,#0ff 50% 66.6%,#00f 66.6% 83.3%,#f0f 83.3%);margin:0}
.counter-line{display:flex;justify-content:center;align-items:center;gap:9px;font-size:12px;margin:14px 0 8px;flex-wrap:wrap}.counter{display:inline-flex;gap:3px;border:3px inset #a7a7a7;background:#000;padding:2px 4px}
.counter span{color:#ff4a16;background:linear-gradient(#232323 48%,#050505 49% 53%,#1b1b1b 54%);font:bold 24px "Courier New",monospace;border:1px solid #444;padding:1px 4px;line-height:28px;text-shadow:0 0 4px #f40}
.kiriban{background:none;border:0;padding:0;text-decoration:underline;color:#0ff;font-size:11px}.blink{animation:blink 2s steps(1,end) infinite}.hero-bottom{font-size:11px;color:#ddd}.hero-bottom em{color:#ffff00;font-style:normal}
.marquee{background:#ff0;border:2px solid #f00;color:#f00;margin-top:9px;overflow:hidden;white-space:nowrap;font-weight:bold;font-size:13px;padding:6px 0}
.marquee span{display:inline-block;min-width:max-content;padding-left:100%;animation:marquee 24s linear infinite}.marquee:hover span{animation-play-state:paused}
.intro{text-align:center;line-height:1.9;margin:16px 0 18px;font-size:13px}.intro p{margin:3px 0}.intro mark{background:linear-gradient(transparent 35%,#a4ff45 35%);font-weight:bold;color:#003c00;padding:0 3px}.intro .red{color:#f00}
.content-columns{display:grid;grid-template-columns:1.22fr 1fr;gap:16px}.retro-panel{border:3px ridge #bebebe;background:#fff;margin:0 0 15px;scroll-margin-top:14px}
.panel-heading{display:flex;align-items:center;gap:7px;justify-content:space-between;font-size:15px;font-weight:700;color:#fff;background:#000080;padding:6px 10px;margin:0;border-bottom:2px groove #fff;letter-spacing:1px}
.panel-heading small{font:10px "Courier New",monospace;letter-spacing:0}.panel-heading.green{background:#008000}.panel-heading.pink{background:#970077}.panel-heading.red{background:#d60000}.panel-body{padding:12px}
.update-list{margin:0;padding:0;list-style:none;font-size:12px;line-height:1.7}.update-list li{display:grid;grid-template-columns:74px 1fr;gap:8px;padding:8px 0;border-bottom:1px dotted #aaa}
.update-list li:first-child{padding-top:0}.update-list time{font-family:"Courier New",monospace;color:#555}.update-list li:last-child{border:0;padding-bottom:0}.update-list strong{color:#f00}.update-foot{margin:11px 0 0;font-size:10px;text-align:right;color:#777}
.profile-body{display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:start}.portrait{background:#a8ffff;border:2px inset #bbb;padding:9px 2px;text-align:center}.portrait svg{width:65px;height:58px;margin:auto}.portrait span{font-size:9px}
.profile-table{border-collapse:collapse;font-size:12px;width:100%}.profile-table td{border-bottom:1px dotted #bbb;padding:4px 0;vertical-align:top}.profile-table td:first-child{color:#008000;width:58px;font-weight:bold}
.profile-quote{font-size:12px;color:#d00000;font-weight:bold;text-align:center;margin:13px 0 0;line-height:1.7}.diary-date{color:#777;font:11px "Courier New",monospace}.diary-title{color:#000080;margin:9px 0;font-size:16px}
.diary-text{font-size:12px;line-height:1.9;margin:0}.diary-text mark{background:#ff0}.diary-sign{text-align:right;font:11px "Courier New",monospace;margin-top:9px;color:#777}
.crab-art{font:12px "Courier New",monospace;white-space:pre;text-align:center;color:#e60000;line-height:1.3;margin:10px 0}.construction{margin:0 0 10px;border:2px solid #111;background:repeating-linear-gradient(135deg,#111 0 10px,#ff0 10px 20px);padding:7px}
.construction div{background:#ff0;border:1px solid #000;text-align:center;font-size:12px;font-weight:bold;padding:7px 4px}.gallery-note{font-size:11px;text-align:center;line-height:1.7;margin:0}
.guest-strip{border:3px ridge #bbb;background:#ffddff;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 14px;margin:2px 0 16px}
.guest-strip strong{display:block;color:#800080;font-size:15px;letter-spacing:1px;margin-bottom:4px}.guest-strip p{font-size:11px;margin:0;line-height:1.8}
.retro-button{border:3px outset #eee;background:#c0c0c0;color:#000080;font-weight:bold;padding:7px 12px;box-shadow:1px 1px #000;white-space:nowrap}.retro-button:active{border-style:inset;box-shadow:none;transform:translate(1px,1px)}
.guest-actions{display:flex;gap:9px;flex-shrink:0}.clap-button{color:#f00;background:#ffff9a;border-color:#ffffd0}
.link-zone{border-top:3px double #008000;text-align:center;padding-top:13px;scroll-margin-top:12px}.link-zone h2{font-size:13px;color:#008000;margin:0 0 9px}.banners{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.web-banner{width:155px;height:42px;text-align:center;border:3px outset #b6b6b6;background:var(--navy);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:"MS PMincho",serif;font-size:12px;font-weight:bold;text-decoration:none;line-height:1.3;cursor:pointer}
.web-banner:visited{color:#fff}.web-banner small{font:8px "Courier New",monospace;letter-spacing:1px}.web-banner.crab-banner{color:#ff0;background:repeating-linear-gradient(45deg,#000053 0 3px,#03037d 3px 6px)}
.web-banner.ring-banner{color:#fff;background:#008080}.web-banner.net-banner{color:#fff;background:#000;font:bold italic 15px Georgia,serif}.web-banner.net-banner small{color:#0f0}.link-note{font-size:10px;margin:9px 0;color:#666}
.footer{text-align:center;font-size:10px;line-height:1.9;padding:13px 0 0;color:#666}.footer p{margin:0}.footer a{font-size:11px}
.page-status{padding:3px 7px;font:11px "Courier New",monospace;border:2px inset #eee;margin-top:4px;display:flex;justify-content:space-between;gap:8px;color:#444;background:#c0c0c0}.online-light{display:inline-block;width:7px;height:7px;background:#00aa00;margin-right:5px;border:1px inset #eee}
.toast{position:fixed;bottom:39px;left:50%;transform:translateX(-50%);background:#ffffb3;border:3px outset #fff;padding:12px 20px;z-index:10;box-shadow:4px 4px #0008;max-width:90vw;font-size:13px;text-align:center}.toast[hidden]{display:none}
dialog{padding:4px;background:#c0c0c0;border:3px outset #eee;max-width:min(460px,94vw);width:460px;color:#111;box-shadow:6px 6px #0007}dialog::backdrop{background:#0008}.dialog-title{background:#000080;color:#fff;font-weight:bold;padding:6px 8px;display:flex;align-items:center;justify-content:space-between}
.close-dialog{background:#c0c0c0;border:2px outset #fff;line-height:16px;width:23px;color:#000;padding:0}.dialog-body{background:#ffffeb;margin:6px 2px 2px;padding:16px;max-height:70vh;overflow:auto}.dialog-body p{line-height:1.8;font-size:12px}.dialog-body h2{font-size:20px;color:#f00;text-align:center}
.dialog-body label{font-size:12px;display:block;margin:10px 0 4px}.dialog-body input,.dialog-body textarea{display:block;width:100%;padding:7px;border:2px inset #ddd;background:#fff;border-radius:0}.dialog-body textarea{resize:vertical;min-height:80px}.dialog-body .retro-button{margin:12px 0 0}
.form-note{color:#666;font-size:10px!important}.entries{border-top:2px groove #fff;margin-top:16px}.entry{border-bottom:1px dotted #999;padding:10px 0;font-size:12px;overflow-wrap:anywhere}.entry strong{color:#000080}.entry small{color:#777;float:right}.entry p{white-space:pre-wrap;margin:6px 0;font-size:12px}.kiriban-crab{width:100px;height:85px;margin:0 auto}
.paused *{animation-play-state:paused!important;scroll-behavior:auto!important}
@keyframes blink{0%,65%{opacity:1}66%,100%{opacity:.25}}@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -7px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}.marquee span{padding-left:10px;white-space:normal}.marquee{white-space:normal}}
@media(min-width:1450px){.main-inner{padding-top:22px}.hero{padding-top:24px;padding-bottom:23px}.hero-title-row{gap:34px}.hero-crab{width:145px;height:120px}}
@media(max-width:1050px){.frames{grid-template-columns:177px minmax(0,1fr)}.side-frame{padding:10px 9px}.main-inner{padding:13px 16px}.hero-title-row{gap:10px}.hero-crab{width:75px;height:80px}h1{font-size:34px;letter-spacing:2px}.content-columns{gap:12px}.guest-strip{align-items:flex-start;flex-direction:column}.guest-actions{align-self:center}.profile-body{grid-template-columns:1fr}.portrait{display:none}}
@media(max-width:690px){.desktop{height:auto;min-height:100%;padding:3px}.frames{grid-template-columns:minmax(0,1fr);gap:5px}.side-frame{padding:8px;overflow:visible}.mini-welcome,.side-crab,.side-name,.since,.dotted-rule,.menu-heading,.side-note,.status-box,.mini-banner{display:none}
.nav-menu{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.nav-menu a{padding:5px 3px;font-size:11px;justify-content:center;gap:4px;border-width:2px}.nav-icon{display:none}.nav-menu .new{display:none}
.side-controls{display:flex;justify-content:center;margin-top:7px;gap:8px}.side-controls .tiny-control{width:auto;font-size:10px;padding:3px 10px}.main-frame{overflow:visible}.page-topline{font-size:9px;padding:5px 7px}.main-inner{padding:12px 8px}
.visitor-note{font-size:10px;letter-spacing:0}.hero{padding:14px 5px 13px;border-width:4px}.hero-kicker{font-size:9px;letter-spacing:2px;margin-bottom:9px}.hero-crab{width:42px;height:48px}.hero-title-row{gap:4px}h1{font-size:clamp(25px,6.6vw,38px);letter-spacing:1px}
.welcome-line{font-size:.65em;letter-spacing:0}.hero-sub{font-size:9px;letter-spacing:1px;margin:11px 0}.counter-line{gap:5px;font-size:10px}.counter span{font-size:20px;padding:0 3px;line-height:25px}.hero-bottom{font-size:9px}.intro{font-size:11px;margin:13px 0}
.content-columns{grid-template-columns:1fr;gap:0}.profile-body{grid-template-columns:78px 1fr}.portrait{display:block}.guest-strip{padding:12px 9px}.guest-actions{flex-wrap:wrap;justify-content:center}.window-title{font-size:9px;letter-spacing:0}
.window-controls span{width:14px;height:14px;line-height:10px}.page-status{font-size:9px}.page-status .right-status{display:none}.banners{gap:6px}.web-banner{width:142px}.toast{font-size:11px;padding:10px}
.content-columns>div:nth-child(2),.content-columns>div:nth-child(1){display:contents}#profile{order:2}#diary{order:3}#gallery{order:4}#news{order:1}}
@media(max-width:380px){.hero-crab{width:28px;height:38px}.hero-title-row{gap:2px}h1{font-size:24px}.nav-menu a{font-size:10px}.panel-heading{font-size:13px}.hero-kicker{font-size:8px;letter-spacing:1px}}


.center-text{text-align:center}.diary-text{white-space:pre-wrap;overflow-wrap:anywhere}.diary-archive-button{margin-top:7px}.pagination{display:flex;align-items:center;justify-content:center;gap:15px;margin:14px 0 0;font-size:11px}.pagination button:disabled{opacity:.45;cursor:default}.archive-entry{border-bottom:2px groove #fff;padding:12px 0}.archive-entry:last-child{border-bottom:0}.error-text{color:#bd0000}.bot-field{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.dialog-body .diary-text{font-size:12px}.entry p{white-space:pre-wrap;overflow-wrap:anywhere}button:disabled{cursor:wait;opacity:.65}#diary-dialog{width:580px}.counter{max-width:100%}.counter span{flex-shrink:1;min-width:0}