/* loadsofchodes.com skin, from the Claude Design project
   "96f586e7-3c28-4c53-9eba-99822a4f4f3a" (2026-10-02). The mockups used inline
   styles; this file is the same look expressed as classes. System fonts only, no JS. */

body { margin: 0; padding: 8px; background-color: #000033;
  background-image: radial-gradient(#ffff00 1px, transparent 1.6px), radial-gradient(#ff66ff 1px, transparent 1.6px);
  background-size: 44px 44px, 70px 70px; background-position: 0 0, 22px 35px;
  font-family: Verdana, Geneva, sans-serif; font-size: 14px; color: #000; }
a { color: #0000ee; } a:visited { color: #551a8b; } a:hover { color: #ff0000; background: #ffff00; }
.comic { font-family: 'Comic Sans MS', 'Comic Sans', cursive; }
.mono { font-family: 'Courier New', monospace; }
.small { font-size: 12px; }
.muted { color: #333; }

#page { max-width: 820px; margin: 0 auto; background: #ffffee; border: 6px ridge #ff00ff; }
#content { padding: 14px 10px; display: flex; flex-direction: column; gap: 16px; }

/* ---- header ---- */
#masthead { background: #000080; border-bottom: 4px ridge #ffff00; padding: 14px 12px 10px; }
.mast-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 12px; }
.site-title { text-decoration: none; line-height: 1; }
.site-title:hover { background: none; }
.site-title .big { font-family: Impact, 'Arial Black', sans-serif; font-size: clamp(30px, 8vw, 54px); color: #ffff00;
  text-shadow: 3px 3px 0 #ff00ff, 6px 6px 0 #00ffff; letter-spacing: 1px; }
.site-title .tld { font-family: Impact, 'Arial Black', sans-serif; font-size: clamp(18px, 4vw, 26px); color: #00ff00;
  text-shadow: 2px 2px 0 #ff00ff; }
.whoami { font-family: 'Comic Sans MS', 'Comic Sans', cursive; font-size: 13px; color: #00ffff; }
.whoami b { color: #ffff00; }
.ticker { display: block; margin: 12px 0 10px; background: #000; color: #00ff00; font-family: 'Courier New', monospace;
  font-size: 14px; font-weight: bold; padding: 4px 0; border: 2px inset #808080; }
.site-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.site-nav form { display: contents; }

/* ---- buttons (nav links, pager, submit) ---- */
.btn { display: inline-block; background: #c0c0c0; color: #000; border: 3px outset #ffffff; padding: 10px 12px;
  font-family: Verdana, Geneva, sans-serif; font-size: 13px; font-weight: bold; text-decoration: none; cursor: pointer; }
a.btn, a.btn:visited { color: #000; }
a.btn:hover { background: #ffff00; color: #ff0000; }
.btn:active { border-style: inset; }
.btn.go { background: #00ff00; border-color: #ccffcc; }
.btn.danger { background: #ff3333; color: #fff; border-color: #ff9999; }
.btn.pink { background: #ff00ff; color: #fff; border-color: #ffccff; }
.btn.big { font-size: 15px; padding: 10px 18px; min-height: 44px; }
.btn.off { color: #808080; cursor: default; }
.btn.tiny { font-size: 12px; padding: 7px 8px; min-height: 36px; border-width: 2px; white-space: nowrap; }
.btn.tiny.danger { background: #ff0000; }
.linkish { background: none; border: 0; padding: 0; color: #0000ee; text-decoration: underline; cursor: pointer; font: inherit; }
.linkish.danger { color: #cc0000; }
form.inline { display: inline; }

/* ---- shared chrome ---- */
.titlebar { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-weight: bold; font-size: 14px;
  padding: 5px 8px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.titlebar.pink { background: linear-gradient(90deg, #800080, #ff00ff); }
.titlebar .sub { font-weight: normal; }
.window { border: 3px outset #c0c0c0; background: #c0c0c0; }
.window-body { padding: 14px 12px; display: flex; flex-direction: column; gap: 12px; }
.page-h1 { margin: 0; font-family: Impact, 'Arial Black', sans-serif; font-size: clamp(28px, 7vw, 40px); color: #ff00ff;
  text-shadow: 2px 2px 0 #000; letter-spacing: 1px; }
.lede { margin: 0; font-family: 'Comic Sans MS', 'Comic Sans', cursive; font-size: 14px; }
.flash { background: #ffff00; border: 3px dashed #ff0000; padding: 8px 10px; font-weight: bold; font-size: 13px; }
.flash p { margin: 0; }
.greentext { color: #557711; }

/* ---- forms ---- */
.field { display: flex; flex-direction: column; gap: 5px; }
.field label, .field legend { font-weight: bold; font-size: 13px; }
.field .req { color: #cc0000; }
fieldset.field { border: 2px groove #ffffff; margin: 0; padding: 10px; }
fieldset.field legend { padding: 0 4px; }
.input { width: 100%; box-sizing: border-box; border: 2px inset #c0c0c0; padding: 10px 8px;
  font-family: 'Courier New', monospace; font-size: 16px; background: #ffffff; }
textarea.input { padding: 8px; resize: vertical; }
.input.code { background: #ffffcc; text-transform: uppercase; }
input[type=file].input { font-family: Verdana, Geneva, sans-serif; font-size: 14px; padding: 8px; max-width: 100%; }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.form-actions.split { justify-content: space-between; }

/* ---- feed rows (home + profile) ---- */
.post-list { border: 2px solid #000080; border-top: 0; }
.post-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px; background: #ffffff; border-bottom: 2px dotted #ff00ff; }
.post-row:nth-child(even) { background: #e6f0ff; }
.post-row:last-child { border-bottom: 0; }
.thumb { flex: none; width: 72px; height: 72px; display: block; text-decoration: none; }
.thumb:hover { background: none; }
.thumb img { width: 72px; height: 72px; box-sizing: border-box; object-fit: cover; border: 3px inset #ffffff; display: block; }
.badge { width: 72px; height: 72px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  border: 3px outset #ffffff; font-family: 'Courier New', monospace; font-weight: bold; font-size: 13px; }
.badge-video { background: #ff0000; color: #fff; }
.badge-audio { background: #9900cc; color: #fff; }
.badge-link { background: #0000ff; color: #fff; }
.badge-text { background: #ffff00; color: #000; }
.post-summary { flex: 1; min-width: 0; }
.post-title { font-family: 'Comic Sans MS', 'Comic Sans', cursive; font-size: 17px; font-weight: bold; overflow-wrap: anywhere; line-height: 1.25; }
.post-meta { font-size: 12px; margin-top: 5px; color: #333; }
.n-comments { display: inline-block; margin-top: 5px; font-size: 12px; font-weight: bold; color: #cc0000; }
a.n-comments:visited { color: #cc0000; }
.empty { padding: 14px; background: #fff; margin: 0; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.pager .where { font-family: 'Comic Sans MS', 'Comic Sans', cursive; font-size: 13px; }

/* ---- single post ---- */
.back { font-size: 13px; font-weight: bold; }
.post-full { border: 3px outset #c0c0c0; background: #ffffff; }
.post-full .titlebar { font-size: 13px; }
.post-full-body { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.post-h1 { margin: 0; font-family: 'Comic Sans MS', 'Comic Sans', cursive; font-size: clamp(22px, 5vw, 30px); line-height: 1.15; color: #cc0000; overflow-wrap: anywhere; }
.post-media img, .post-media video { max-width: 100%; max-height: 80vh; display: block; border: 3px inset #808080; box-sizing: border-box; }
.post-media video { width: 100%; background: #000; }
.post-media audio { width: 100%; }
.post-link { font-size: 13px; background: #ffffcc; border: 2px dashed #ff9900; padding: 8px; overflow-wrap: anywhere; }
.post-body { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.comments { display: flex; flex-direction: column; gap: 10px; }
.comments-h { font-family: Impact, 'Arial Black', sans-serif; font-size: 24px; color: #000080; letter-spacing: 1px; }
.comment { border: 2px solid #000080; background: #ffffff; }
.comment-meta { background: #c0c0c0; border-bottom: 2px solid #000080; padding: 5px 8px; font-size: 12px;
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.comment-meta a { font-weight: bold; }
.comment-body { padding: 8px 10px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.reply-form { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.reply-form label { font-weight: bold; font-size: 13px; }

/* ---- login / join ---- */
.warning-banner { text-align: center; font-family: 'Comic Sans MS', 'Comic Sans', cursive; font-size: 16px; }
.warning-banner b { color: #cc0000; }
.auth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; align-items: start; }
.center { text-align: center; }

/* ---- profile ---- */
.profile-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.avatar { width: 96px; height: 96px; flex: none; box-sizing: border-box; border: 3px ridge #00ffff;
  background: repeating-linear-gradient(45deg, #dddddd 0 6px, #bbbbbb 6px 12px); display: flex; align-items: center;
  justify-content: center; font-family: Impact, 'Arial Black', sans-serif; font-size: 44px; color: #0000cc; text-shadow: 2px 2px 0 #ffff00; }
.profile-name { margin: 0; font-family: Impact, 'Arial Black', sans-serif; font-size: clamp(32px, 8vw, 46px); color: #0000cc;
  text-shadow: 2px 2px 0 #ffff00, 4px 4px 0 #ff00ff; letter-spacing: 1px; overflow-wrap: anywhere; }
.profile-tag { font-family: 'Comic Sans MS', 'Comic Sans', cursive; font-size: 14px; color: #cc0000; }
.facts { border-collapse: collapse; background: #ffffff; border: 2px solid #000080; font-size: 14px; width: 100%; max-width: 420px; }
.facts th { text-align: left; background: #c0c0c0; border: 1px solid #000080; padding: 7px 10px; width: 40%; }
.facts td { border: 1px solid #000080; padding: 7px 10px; }

/* ---- tables (members + invites) ---- */
.table-wrap { overflow-x: auto; border: 2px solid #000080; background: #ffffff; }
.titlebar + .table-wrap { border-top: 0; }
.grid { border-collapse: collapse; width: 100%; font-size: 13px; }
.grid.members { min-width: 560px; }
.grid.invites { min-width: 420px; }
.grid th { text-align: left; padding: 7px 8px; border: 1px solid #9999cc; background: #c0c0c0; }
.grid.members thead tr { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; }
.grid.members th { background: transparent; border-color: #000080; }
.grid td { padding: 7px 8px; border: 1px solid #9999cc; }
.grid tbody tr:nth-child(even) { background: #e6f0ff; }
.grid .num { text-align: right; font-family: 'Courier New', monospace; font-weight: bold; }
.grid .nowrap { white-space: nowrap; }
.grid .actions { padding: 5px 8px; }
.grid .actions form { display: inline; }
.grid tr.banned { background: #ffdddd !important; }
.grid tr.banned .who a { text-decoration: line-through; }
.who a { font-weight: bold; }
.crown { color: #cc0000; font-weight: bold; }
.banned-tag { background: #ff0000; color: #fff; font-weight: bold; font-size: 11px; padding: 1px 4px; margin-left: 4px; }
.you { font-style: italic; color: #555; }
.open-tag { background: #00ff00; color: #000; font-weight: bold; padding: 1px 5px; }
.emperor-banner { background: #ffff00; border: 3px dashed #ff0000; padding: 8px 10px; font-weight: bold; font-size: 13px; }
.make-invite { padding: 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.make-invite span { font-size: 13px; max-width: 440px; }
.new-invite { background: #ffff00; border: 4px dashed #ff00ff; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.new-invite .shout { font-family: 'Comic Sans MS', 'Comic Sans', cursive; font-weight: bold; font-size: 16px; color: #cc0000; }
.new-invite .input { font-weight: bold; }

/* ---- error ---- */
.error-page { padding: 28px 10px 36px; align-items: center; gap: 20px; text-align: center; }
.error-code { font-family: Impact, 'Arial Black', sans-serif; font-size: clamp(90px, 26vw, 170px); line-height: 0.9; color: #ff0000;
  text-shadow: 5px 5px 0 #ffff00, 10px 10px 0 #000080; }
.error-box { width: 100%; max-width: 440px; text-align: left; }
.error-box .titlebar { font-size: 13px; align-items: center; }
.error-box .x { background: #c0c0c0; color: #000; border: 2px outset #ffffff; width: 18px; height: 16px; display: flex;
  align-items: center; justify-content: center; font-size: 11px; }
.error-msg { padding: 16px 14px; display: flex; gap: 14px; align-items: flex-start; }
.error-msg .bang { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #ff0000; color: #fff; display: flex;
  align-items: center; justify-content: center; font-weight: bold; font-size: 22px; border: 2px solid #800000; }
.error-msg div { display: flex; flex-direction: column; gap: 6px; }
.error-msg b { font-size: 15px; }
.error-msg span { font-size: 13px; line-height: 1.45; }
.error-ok { display: flex; justify-content: center; padding: 0 14px 14px; }
.error-ok .btn { padding: 10px 28px; font-size: 14px; outline: 1px dotted #000; outline-offset: -6px; }
.error-back { font-family: 'Comic Sans MS', 'Comic Sans', cursive; font-size: 15px; font-weight: bold; }

/* ---- footer ---- */
#footer { background: #000; border-top: 4px ridge #00ff00; padding: 18px 12px; text-align: center; font-size: 12px; color: #cccccc;
  display: flex; flex-direction: column; align-items: center; gap: 10px; }
.counter-label { font-family: 'Comic Sans MS', 'Comic Sans', cursive; font-size: 14px; color: #ffff00; }
.counter { display: flex; gap: 2px; padding: 4px; background: #333; border: 3px inset #888; }
.counter span { background: #000; color: #ff2a2a; font-family: 'Courier New', monospace; font-weight: bold; font-size: 24px;
  padding: 2px 6px; border: 1px solid #444; }
.buttons88 { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.b88 { width: 88px; height: 31px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; }
.b88.ads { background: #ff0000; color: #fff; border: 2px outset #ff9999; font-family: 'Arial Black', Impact, sans-serif; font-size: 11px; }
.b88.algo { background: #0000ff; color: #fff; border: 2px outset #9999ff; font-weight: bold; font-size: 9px; line-height: 1.1; }
.b88.html { background: #ffff00; color: #000; border: 2px outset #ffffcc; font-family: 'Courier New', monospace; font-weight: bold; font-size: 11px; }
.b88.js { background: #00cc00; color: #000; border: 2px outset #99ff99; font-family: 'Comic Sans MS', cursive; font-weight: bold; font-size: 10px; }
.copyright { color: #ff66ff; }