*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#F0F0FA;font-family:'Silkscreen',cursive;font-weight:400;font-size:14px;line-height:2.0;color:#4A4A5A;overflow-x:hidden;position:relative}
.bokeh{position:fixed;border-radius:50%;pointer-events:none;z-index:0}
.b1{width:160px;height:160px;background:radial-gradient(circle,rgba(232,184,76,0.05),transparent 70%);top:20%;right:10%}
.b2{width:120px;height:120px;background:radial-gradient(circle,rgba(176,176,208,0.06),transparent 70%);top:50%;left:5%}
.b3{width:140px;height:140px;background:radial-gradient(circle,rgba(224,224,240,0.06),transparent 70%);bottom:15%;right:25%}
.chrome-bar{position:fixed;top:0;left:0;right:0;height:100px;background:linear-gradient(180deg,#E8E8F0 0%,#B0B0C0 40%,#8A8A9A 70%,#E0E0F0 100%);display:flex;align-items:center;justify-content:space-between;padding:0 40px;z-index:100;box-shadow:0 2px 8px rgba(42,42,58,0.12)}
.site-name{font-family:'Press Start 2P',cursive;font-size:clamp(14px,2vw,22px);color:#2A2A3A;letter-spacing:0.02em}
.live-indicator{font-family:'Press Start 2P',cursive;font-size:10px;color:#E8B84C;display:flex;align-items:center;gap:8px;letter-spacing:0.08em}
.live-dot{width:8px;height:8px;background:#E8B84C;display:inline-block;animation:blink 1s step-start infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.content{max-width:780px;margin:0 auto;padding:120px 20px 80px;margin-left:60px;position:relative;z-index:1}
.block{opacity:0;transition:opacity 0.3s ease}
.block.visible{opacity:1}
.block:hover{transform:scale(1.04);box-shadow:0 0 12px rgba(58,58,90,0.15)}
.block{transition:opacity 0.3s ease,transform 0.2s ease-out,box-shadow 0.2s ease-out;padding:20px;border-radius:4px}
h1{font-family:'Press Start 2P',cursive;font-weight:400;font-size:clamp(16px,2.5vw,28px);color:#2A2A3A;margin-bottom:12px;line-height:1.6}
h2{font-family:'Press Start 2P',cursive;font-weight:400;font-size:clamp(12px,2vw,20px);color:#2A2A3A;margin-bottom:12px;line-height:1.6}
.desc{color:#4A4A5A;margin-bottom:12px}
.meta{font-family:'Press Start 2P',cursive;font-weight:400;font-size:10px;letter-spacing:0.08em;color:#8A8A9A;display:block;margin-bottom:16px}
.divider{border:none;height:2px;background:linear-gradient(90deg,#B0B0C0,#E0E0F0,#B0B0C0);margin:40px 0;image-rendering:pixelated}
.pixel-flow{margin:20px 0}
.state-diagram{width:100%;max-width:400px;height:auto}
@media(max-width:768px){.content{margin-left:20px;max-width:100%}.chrome-bar{height:60px;padding:0 16px}.site-name{font-size:12px}}