: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 b { display:block; margin-bottom:8px; color:#0000dd; font-size:20px; text-decoration:underline; }.link-card .icon { float:left; width:55px; height:55px; margin-right:10px; display:grid; place-items:center; background:#e9ffff; border:2px inset #ccc; font-size:30px; }
.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; }
.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}}