:root { --background:#c0c0c0; --foreground:#000; --primary:#000080; --primary-foreground:#fff; --input:#808080; --ring:#000080; --muted-foreground:#444; }
* { box-sizing:border-box; }
html { color-scheme:light; }
body { margin:0; background-color:#000066; background-image:radial-gradient(circle,#56569d 1px,transparent 1px),radial-gradient(circle,#242478 1px,transparent 1px); background-size:16px 16px; background-position:0 0,8px 8px; color:#000; font-family:"Times New Roman",Times,serif; font-size:1rem; line-height:1.4; }
button,input,textarea { font:inherit; }
a { color:#0000ee; text-decoration:underline; }
a:visited { color:#551a8b; }
a:focus-visible,button:focus-visible { outline:2px dotted #fff; outline-offset:4px; }
::selection { background:#000080; color:#fff; }
.site-shell { width:calc(100% - 32px); max-width:640px; margin:28px auto 48px; }
.gif-frame { width:fit-content; max-width:100%; padding:5px; margin:0 auto 24px; border:4px ridge #c0c0c0; background:#000; }
.gif-frame a,.gif-frame img { display:block; }
.gif-frame img { width:480px; max-width:100%; height:auto; }
.discussion-section { border:4px ridge #d7d7d7; padding:3px; background:#c0c0c0; box-shadow:3px 3px 0 #000; }
.discussion-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; background:#000080; color:#fff; padding:5px 10px; }
.discussion-heading h2 { margin:0; font-size:1.4rem; font-weight:700; }
.comment-count { font-family:"Courier New",monospace; font-size:.875rem; color:#fff; }
.composer { padding:18px 16px; border-bottom:2px groove #eee; }
.composer label { display:block; margin:0 0 4px; font-size:1rem; font-weight:700; }
.username-field { max-width:280px; margin-bottom:12px; }
.composer .field { width:100%; min-height:36px; height:auto; color:#000; background:#fff; border:2px inset #eee; border-radius:0; padding:5px 8px; font-family:"Courier New",monospace; font-size:1rem; box-shadow:none; }
.composer .field:focus-visible { border:2px inset #eee; outline:2px dotted #000080; outline-offset:2px; box-shadow:none; }
.composer textarea.field { min-height:100px; resize:vertical; line-height:1.4; }
.form-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:14px; }
.form-note { margin:0; font-size:.875rem; }
.composer .post-button,.load-more { color:#000; background:#c0c0c0; border:2px outset #eee; border-radius:0; padding:5px 14px; min-height:36px; font-family:Arial,Helvetica,sans-serif; font-weight:400; font-size:.875rem; box-shadow:none; cursor:pointer; }
.composer .post-button:hover,.load-more:hover { background:#d0d0d0; }
.composer .post-button:active,.load-more:active { border-style:inset; }
.composer .post-button:focus-visible,.load-more:focus-visible,.text-button:focus-visible { outline:2px dotted #000; outline-offset:2px; }
.composer .post-button:disabled { opacity:.65; cursor:wait; }
.message { margin:12px 0 0; font-size:1rem; }
.error { color:#8b0000; }
.success { color:#005500; }
.list-header { display:flex; justify-content:space-between; gap:10px; margin:0; padding:10px 16px; font-size:.875rem; }
.list-header > span:first-child { font-weight:700; }
.text-button { color:#0000ee; background:transparent; border:0; padding:0; text-decoration:underline; cursor:pointer; }
.comments { list-style:none; padding:0; margin:0 8px 8px; border:2px inset #eee; }
.comment { background:#eee; padding:12px; border-bottom:1px dotted #808080; }
.comment:nth-child(even) { background:#ddd; }
.comment:last-child { border-bottom:0; }
.comment-content { min-width:0; }
.comment-meta { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 12px; }
.comment-name { color:#000080; font-size:1rem; font-weight:700; overflow-wrap:anywhere; }
.comment-time { font-family:"Courier New",monospace; color:#444; font-size:.8125rem; }
.comment-body { margin:6px 0 0; font-size:1rem; white-space:pre-wrap; overflow-wrap:anywhere; }
.empty-state { text-align:center; border:2px inset #eee; margin:0 8px 8px; padding:20px 12px; background:#eee; }
.empty-state p { margin:0; }
.loading-state { padding:12px 16px; margin:0; }
.discussion-section > .error { margin:0 16px 12px; }
.load-more { display:block; margin:12px auto; }
@media(max-width:480px) { .site-shell { width:calc(100% - 20px); margin-top:14px; } .gif-frame { margin-bottom:18px; } .composer { padding:14px 12px; } .username-field { max-width:none; } .form-actions { gap:10px; } .discussion-heading { padding:5px 8px; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }

[hidden] { display:none !important; }
button,input,textarea { font:inherit; }