:root { --blue:#0000cc; --cyan:#bff7ff; --pink:#ffe4f4; --nav:#eeeeff; }
* { box-sizing: border-box; }
html { background:#9ff3ff; }
body { margin:0; color:#111; font-family:Arial, Helvetica, sans-serif; background-color:#d7fbff; background-image:linear-gradient(45deg,rgba(0,180,220,.13) 25%,transparent 25%),linear-gradient(-45deg,rgba(0,180,220,.13) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.8) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.8) 75%); background-size:48px 48px; background-position:0 0,0 24px,24px -24px,-24px 0; }
a { color:#0000ee; text-decoration:underline; }
a:visited { color:#7b00a8; }
.top-strip { display:flex; justify-content:space-between; padding:4px 8px; border-bottom:1px solid #7aa; background:#efffff; font:12px "Courier New",monospace; }
.site-header { width:min(950px,94%); margin:8px auto 0; padding:18px; text-align:center; color:white; background:linear-gradient(90deg,#0808c6,#2461e9,#9ee8ff); border:3px outset #b9d9ff; box-shadow:5px 5px 0 #16488e; }
.site-header h1 { margin:0; font:700 clamp(30px,5vw,52px) "Trebuchet MS",Arial; letter-spacing:.14em; text-shadow:3px 3px 0 #000; }
.site-header p { margin:8px 0 0; color:#ffff00; font-weight:bold; }
.ticker { width:min(950px,94%); margin:12px auto; padding:5px; color:#000080; background:#fff; border:2px inset #ccc; font-weight:bold; overflow:hidden; white-space:nowrap; }
.ticker span { display:inline-block; min-width:100%; animation:scroll 16s linear infinite; }
@keyframes scroll { from{transform:translateX(100%)} to{transform:translateX(-100%)} }
.layout { width:min(1100px,96%); margin:12px auto 30px; display:grid; grid-template-columns:220px 1fr; gap:14px; }
.sidebar { padding:12px; background:var(--nav); border:3px ridge #bbb; min-height:650px; }
.side-title { margin:-6px -6px 12px; padding:7px; text-align:center; color:white; background:#2222bb; border:2px outset #88aaff; font-weight:bold; }
.menu { list-style:none; padding:0; margin:0; }
.menu li { margin:11px 0; padding:8px 4px; border-bottom:1px dotted #999; font-weight:bold; }
.menu li::before { content:"●"; margin-right:8px; color:#ff3c9e; }.menu li:nth-child(2)::before{color:#16d431}.menu li:nth-child(3)::before{color:#00cce8}.menu li:nth-child(4)::before{color:#1649ff}.menu li:nth-child(5)::before{color:#a400c8}.menu li:nth-child(6)::before{color:#ff8b00}
.counter { margin-top:30px; padding:8px; text-align:center; background:#000; color:#00ff3c; border:3px inset #888; font:18px "Courier New",monospace; }
.best-viewed { margin-top:18px; text-align:center; font:11px "Times New Roman",serif; }
.content { min-width:0; }
.panel { margin-bottom:15px; padding:18px; background:#fff; border:3px outset #ddd; box-shadow:4px 4px 0 #16488e; }
.panel h2 { margin:-18px -18px 16px; padding:8px; color:white; text-align:center; background:linear-gradient(90deg,#0303ba,#659bea,#bff7ff); border-bottom:2px solid #000080; font-size:21px; }
.welcome { text-align:center; }.welcome h3 { color:#0000cc; font:italic 34px Georgia,serif; text-shadow:2px 2px #b9e3ff; }.welcome .big { font-size:21px; font-weight:bold; }
.new-badge { display:inline-block; padding:7px 18px; color:#fff; background:red; border-radius:50%; border:3px outset #ff8b8b; transform:rotate(-7deg); font:bold 15px Georgia,serif; }
.link-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.link-card { min-height:105px; padding:12px; background:#fff; border:3px outset #ddd; box-shadow:3px 3px 0 #103b90; }
.link-card:link,.link-card:visited { color:#111; text-decoration:none; }
.link-card:hover b { color:#cc0000; }
.link-card b { display:block; margin-bottom:8px; color:#0000dd; font-size:20px; text-decoration:underline; }.link-card .icon { float:left; width:62px; height:62px; margin-right:12px; display:block; flex:0 0 62px; background-color:#e9ffff; border:2px inset #ccc; overflow:hidden; }
.icon-sprite { background-image:url('/retro-icons.png?v=20260718-1'); background-repeat:no-repeat; background-size:200% 200%; image-rendering:pixelated; }
.icon-dev { background-position:0 0; }
.icon-vps { background-position:100% 0; }
.icon-company { background-position:0 100%; }
.icon-mail { background-position:100% 100%; }
.rainbow { animation:rainbow 1.8s steps(1) infinite; } @keyframes rainbow { 0%{color:red} 20%{color:#ff00ff} 40%{color:#0000ff} 60%{color:#00a000} 80%{color:#ff7600} }
.info-table { width:100%; border-collapse:collapse; background:white; }.info-table th,.info-table td{padding:9px;border:1px solid #777;text-align:left}.info-table th{width:180px;background:#d6e8ff;color:#000080}
.feature-list li { margin:10px 0; }.feature-list li::marker { content:"★  "; color:#ff0000; }
.hero-box { padding:16px; text-align:center; color:#fff; background:#000; border:4px ridge #aaa; }.hero-box h3 { margin:6px; color:#00ff00; font:32px "Comic Sans MS",cursive; }.hero-box p { color:#fff; }
.fake-window { margin:15px 0; border:3px outset #bbb; background:#eee; }.fake-title { padding:4px 7px; color:#fff; background:#000080; font:bold 13px Tahoma,Arial; }.fake-body { padding:14px; color:#0f0; background:#000; font:14px "Courier New",monospace; }
.footer { width:min(950px,94%); margin:0 auto 20px; padding:14px; text-align:center; border-top:2px solid #000080; background:rgba(255,255,255,.75); font:12px "Times New Roman",serif; }
.web-badges { margin:12px auto 2px; display:flex; flex-wrap:wrap; justify-content:center; gap:5px; }
.web-badge { width:88px; height:31px; display:grid; grid-template-columns:25px 1fr; align-items:center; color:#fff; background:#111; border:2px outset #ccc; box-shadow:1px 1px 0 #000; font:bold 9px Arial,sans-serif; line-height:1.05; text-align:left; text-decoration:none; }
.web-badge strong { height:27px; display:grid; place-items:center; color:#fff; background:#e34c26; font:bold 13px Arial; }
.web-badge.css strong { background:#264de4; }.web-badge.svg strong { background:#ff9900; color:#111; }.web-badge.w3c strong { background:#045a9c; }.web-badge.browser strong { background:#008b45; }.web-badge.note strong { background:#777; color:#ffff00; }
.web-badge span { padding-left:4px; }
.privacy-line { margin-top:12px; font:bold 12px Arial,sans-serif; }
.privacy-line button { padding:0; color:#0000ee; background:none; border:0; font:inherit; text-decoration:underline; cursor:pointer; }
.cookie-box { position:fixed; z-index:9999; left:50%; bottom:10px; transform:translateX(-50%); width:min(720px,calc(100% - 20px)); color:#111; background:#eee; border:4px outset #fff; box-shadow:6px 6px 0 rgba(0,0,0,.55); font:14px Arial,sans-serif; }
.cookie-title { padding:5px 8px; color:#fff; background:#000080; font:bold 14px Tahoma,Arial,sans-serif; letter-spacing:.04em; }
.cookie-body { padding:13px; background:#ffffe7; }
.cookie-body p { margin:8px 0; }
.cookie-body code { color:#800000; background:#fff; border:1px inset #ccc; padding:1px 3px; }
.cookie-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:12px; }
.cookie-actions button,.retro-button { padding:7px 11px; color:#000; background:#ddd; border:3px outset #fff; font:bold 12px Tahoma,Arial,sans-serif; cursor:pointer; }
.cookie-actions button:active,.retro-button:active { border-style:inset; }
.policy-note { padding:10px; background:#ffffcc; border:2px inset #ccc; }
.blink { animation:blink 1s steps(1) infinite; } @keyframes blink { 50%{visibility:hidden} }
@media(max-width:700px){.layout{grid-template-columns:1fr}.sidebar{min-height:auto}.menu{display:grid;grid-template-columns:1fr 1fr}.link-grid{grid-template-columns:1fr}.site-header h1{font-size:27px}.top-strip{font-size:10px}}
@media(prefers-reduced-motion:reduce){.ticker span,.rainbow,.blink{animation:none}}