* { box-sizing: border-box; }
body { margin: 0; padding: 20px; font: 16px 'Times New Roman', serif; color: #111; }
a { color: #0000ee; text-decoration: underline; }
button, select, input { font: 13px Arial, sans-serif; }
button { cursor: pointer; border: 2px outset #ddd; background: #e6e6e6; color: #111; padding: 3px 8px; border-radius: 0; }
button:focus-visible, a:focus-visible { outline: 3px solid #f00; outline-offset: 3px; }
button[aria-pressed=true] { color: #b00000; border-style: inset; background: #fff1af; }
p { margin: 8px 0; }
h1, h2, h3 { margin: 0; }
.site { max-width: 1060px; margin: 0 auto; }
.brand { display: block; width: 390px; height: 210px; overflow: hidden; background: #fff; flex-shrink: 0; }
.brand img { display: block; width: 100%; height: auto; margin-top: -22px; }
.header { display: flex; align-items: center; justify-content: center; gap: 35px; padding: 8px 18px; background: #fff; }
.header-note { max-width: 340px; text-align: center; }
.header-note h1 { font-size: 25px; }
.accounts { font-size: 14px; margin-top: 17px; }
.ribbon { text-align: center; padding: 6px; font: bold 13px 'Courier New', monospace; }
.nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 9px; padding: 9px; border: 2px outset #ddd; background: #d1d1d1; font-weight: bold; }
.nav a { padding: 0 10px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 2px inset #b0b0b0; padding: 7px 9px; }
.section-head h2 { font-size: 21px; }
.section-head small { font: 12px Arial, sans-serif; }
.media { margin: 0; padding: 5px; border: 2px ridge #aaa; background: #fff; min-width: 0; }
.photo { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #7b7b7b; }
.photo::before { content: ''; position: absolute; width: 100%; aspect-ratio: 1; top: var(--focus, 50%); left: 0; transform: translateY(calc(-1 * var(--focus, 50%))); background: url('media-atlas.png') var(--x) var(--y) / 400% 300%; }
.photo.wide { aspect-ratio: 16 / 9; }
.photo.square { aspect-ratio: 1; }
.play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.play span { display: block; border: 2px outset #aaa; background: #ddd; color: #111; padding: 4px 9px 5px 11px; font: bold 25px Arial, sans-serif; }
.duration { position: absolute; bottom: 5px; right: 5px; padding: 2px 4px; background: #000; color: #fff; font: 12px 'Courier New', monospace; }
.media-kind { position: absolute; top: 5px; left: 5px; padding: 2px 4px; background: #fff900; border: 1px solid #111; font: bold 10px Arial, sans-serif; }
.caption { padding: 7px 3px 3px; }
.caption a { font-weight: bold; font-size: 16px; }
.card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 6px; font: 11px 'Courier New', monospace; }
.counter { display: inline-block; background: #111; border: 2px inset #777; color: #52ff37; letter-spacing: 3px; padding: 3px 5px; font: bold 15px 'Courier New', monospace; }
.badge { display: inline-block; padding: 3px 6px; border: 2px outset #aaa; font: bold 10px 'Courier New', monospace; margin: 3px; background: #ddd; }
.badge.yellow { background: #fff000; color: #111; }
.badge.blue { background: #001e86; color: #fff; }
.footer { padding: 14px; text-align: center; font-size: 13px; }
.footer p { margin: 4px; }
.future { font-size: 12px; color: #555; }
.demo-note { max-width: 1060px; margin: 12px auto 0; color: #666; font: 11px Arial, sans-serif; text-align: center; }
.demo-note a { color: inherit; }

/* A: a personal page, a sidebar, and a mixed media feed. */
body.home { background: #c7e8f7; background-image: radial-gradient(#6ca6be 1px, transparent 1px); background-size: 11px 11px; }
.home .site { border: 4px ridge #a0a0a0; background: #ffffdf; }
.home .header-note h1 { color: #cd0000; font-family: 'Comic Sans MS', 'Trebuchet MS', cursive; transform: rotate(-2deg); }
.home .ribbon { color: #03008a; background: #fff800; border-block: 3px solid #e00000; }
.home .page-body { display: grid; grid-template-columns: 165px 1fr; gap: 10px; padding: 10px; }
.home .sidebar { border: 3px ridge #888; background: #ececec; padding: 9px; }
.home .sidebar h2 { font: bold 18px 'Times New Roman', serif; color: #bf0000; text-align: center; margin: 4px 0 10px; }
.home .sidebar a { display: block; margin: 10px 2px; font-weight: bold; }
.home .sidebar hr { margin: 15px 0; }
.home .sidebar .tiny { font-size: 12px; text-align: center; }
.home .sidebar .warning { margin-top: 18px; padding: 7px; background: #ffe900; border: 2px dashed #111; text-align: center; font: bold 12px 'Courier New', monospace; transform: rotate(-3deg); }
.home .section-head { background: #b9ccff; }
.home .hero-feed { display: grid; grid-template-columns: 1.7fr 1fr; gap: 8px; margin-top: 8px; }
.home .hero-feed .main-media .photo { aspect-ratio: 4 / 3; }
.home .side-media { display: grid; gap: 8px; }
.home .side-media .photo { aspect-ratio: 16 / 9; }
.home .side-media .caption a { font-size: 14px; }
.home .latest-title { color: #bf0000; margin: 15px 0 7px; font: bold 20px 'Comic Sans MS', 'Trebuchet MS', cursive; }
.home .small-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.home .small-grid .caption a { font-size: 14px; }
.home .small-grid .card-bottom { flex-wrap: wrap; }
.home .guest-line { padding: 8px; text-align: center; background: #fff6a5; border: 1px solid #999; font-weight: bold; margin-top: 10px; }
.home .footer { border-top: 3px ridge #999; background: #ddd; }

/* B: starfield, table borders, and a dense thumb gallery. */
body.wall { background-color: #050527; background-image: radial-gradient(1px 1px at 9px 11px, #fff 90%, transparent), radial-gradient(2px 2px at 63px 47px, #c9a5ff 70%, transparent), radial-gradient(1px 1px at 101px 97px, #fff 90%, transparent); background-size: 127px 113px; }
.wall .site { border: 5px ridge #d3d3d3; background: #ccc; }
.wall .header { gap: 50px; }
.wall .brand { width: 345px; height: 185px; }
.wall .brand img { margin-top: -20px; }
.wall .header-note h1 { font: bold 30px 'Courier New', monospace; color: #02027b; }
.wall .header-note h1 b { color: #cb0000; }
.wall .header-note .silly { color: #e00000; font: italic bold 18px 'Times New Roman', serif; }
.wall .ribbon { background: #0a086b; color: #fff500; border-block: 2px ridge #aaa; }
.wall .nav { justify-content: space-between; padding-inline: 15px; }
.wall .gallery-body { padding: 9px; }
.wall .gallery-tools { display: flex; gap: 15px; align-items: center; padding: 4px 1px 10px; font: 13px Arial, sans-serif; }
.wall .gallery-tools h2 { font: bold 20px 'Times New Roman', serif; margin-right: auto; color: #9c0000; }
.wall .wall-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.wall .media { border: 2px inset #eee; padding: 4px; background: #eee; }
.wall .photo { aspect-ratio: 1.4; }
.wall .caption a { font-size: 14px; }
.wall .media-kind { background: #faf7bb; }
.wall .page-links { padding: 14px 5px 4px; text-align: center; }
.wall .page-links a { padding: 0 10px; font-weight: bold; }
.wall .footer { border-top: 3px ridge #eee; font-size: 12px; padding: 9px; background: #eee; }
.wall .demo-note { color: #c2c2d3; }

/* C: an amateur television page, player and playlist lead. */
body.tv { background: #fff296; background-image: repeating-linear-gradient(135deg, transparent 0, transparent 13px, #eadb7b 13px, #eadb7b 14px); }
.tv .site { border: 4px solid #111; background: #fffcd6; }
.tv .header { justify-content: space-between; border-bottom: 4px solid #111; }
.tv .brand { width: 355px; height: 193px; }
.tv .brand img { margin-top: -20px; }
.tv .tv-sign { text-align: center; flex: 1; }
.tv .tv-sign h1 { font: bold 62px 'Courier New', monospace; letter-spacing: -4px; color: #ca0000; text-shadow: 3px 3px #ffcf00; transform: rotate(2deg); }
.tv .tv-sign p { font: bold 17px 'Times New Roman', serif; }
.tv .tv-sign .accounts { font-size: 13px; }
.tv .ribbon { background: #c90000; color: #fff900; border-bottom: 3px solid #111; }
.tv .nav { background: #dedede; justify-content: space-between; padding-inline: 18px; }
.tv .tv-body { padding: 12px; }
.tv .screen-layout { display: grid; grid-template-columns: 1.75fr 1fr; gap: 12px; }
.tv .player { background: #777; border: 6px ridge #bbb; padding: 8px; }
.tv .player-bar { display: flex; justify-content: space-between; margin-bottom: 7px; background: #000080; color: #fff; font: bold 13px Arial, sans-serif; padding: 3px 5px; }
.tv .player .photo { aspect-ratio: 16/9; }
.tv .player-controls { display: flex; align-items: center; gap: 7px; padding-top: 7px; font: 12px 'Courier New', monospace; color: #fff; }
.tv .player-controls .timeline { height: 6px; flex: 1; background: #333; border: 1px inset #ddd; }
.tv .player-controls .timeline span { display: block; width: 25%; height: 100%; background: #ffed00; }
.tv .player-description { background: #fff; border: 2px solid #111; padding: 8px; margin-top: 8px; }
.tv .player-description h2 { font: bold 22px 'Times New Roman', serif; color: #0000b4; }
.tv .playlist { border: 2px solid #111; padding: 8px; background: #e6e6e6; }
.tv .playlist h2 { background: #fff500; border: 2px solid #111; padding: 5px; font: bold 20px 'Courier New', monospace; margin-bottom: 7px; }
.tv .queue-card { display: grid; grid-template-columns: 44% 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid #999; }
.tv .queue-card .photo { aspect-ratio: 4/3; border: 2px inset #eee; }
.tv .queue-card a { font-size: 15px; font-weight: bold; }
.tv .queue-card small { display: block; margin: 5px 0; font: 11px Arial, sans-serif; }
.tv .playlist .queue-note { font: 12px 'Courier New', monospace; color: #444; padding: 7px; text-align: center; }
.tv .film-head { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 8px; }
.tv .film-head h2 { color: #be0000; font: bold 23px 'Comic Sans MS', 'Trebuchet MS', cursive; transform: rotate(-1deg); }
.tv .film-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.tv .film-grid .media { border: 2px solid #111; }
.tv .film-grid .caption a { font-size: 14px; }
.tv .film-grid .card-bottom { flex-wrap: wrap; }
.tv .footer { background: #ddd; border-top: 3px solid #111; }

@media(max-width: 760px) {
  body { padding: 8px; }
  .header { flex-direction: column; gap: 5px !important; padding: 10px; }
  .brand, .wall .brand, .tv .brand { width: min(100%, 350px); height: auto; aspect-ratio: 1.85; }
  .brand img { margin-top: -19px; }
  .header-note { max-width: none; }
  .accounts { margin-top: 8px; }
  .nav { gap: 10px; justify-content: center !important; }
  .nav a { padding: 0 3px; }
  .home .page-body { display: block; }
  .home .sidebar { margin-bottom: 10px; }
  .home .sidebar .sidebar-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 15px; }
  .home .sidebar .sidebar-extra { display: none; }
  .home .hero-feed, .tv .screen-layout { grid-template-columns: 1fr; }
  .home .side-media { grid-template-columns: repeat(2, 1fr); }
  .home .small-grid, .wall .wall-grid { grid-template-columns: repeat(2, 1fr); }
  .wall .gallery-tools { flex-wrap: wrap; gap: 8px; }
  .wall .gallery-tools h2 { width: 100%; }
  .tv .film-grid { grid-template-columns: repeat(2, 1fr); }
  .tv .tv-sign h1 { font-size: 45px; }
  .section-head { flex-wrap: wrap; }
  .card-bottom { flex-wrap: wrap; }
}