/* neoborders — old web stylesheet, dark mode. best viewed in 1024x768 :) */
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Silkscreen&display=swap");

* { box-sizing: border-box; }
html { scrollbar-color: #8a4f8f #140a18; color-scheme: dark; }
body {
  margin: 0; padding: 16px;
  font-family: Verdana, Tahoma, Geneva, sans-serif; font-size: 12px; color: #e6d9ec;
  background-color: #0d0710;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><text y='16' font-size='16' fill='%23ff88c4'>%E2%99%A5</text></svg>") 4 4, auto;
}
a { color: #ff9fd0; }
a:visited { color: #c9a3ff; }
a:hover { color: #ffffff; font-style: italic; }
h1, h2, h3, .pixel { font-family: "Press Start 2P", "Silkscreen", monospace; font-weight: normal; }
h1 { font-size: 18px; color: #ff6fb5; margin: 6px 0; text-shadow: 2px 2px 0 #3a0a2a; }
h2 { font-size: 11px; color: #ff6fb5; margin: 4px 0 6px; }
small, .small { font-size: 10px; }
.hint { margin-top: 3px; color: #a58aa8; }
hr.dots { border: 0; border-top: 2px dotted #7a3a6a; margin: 8px 0; }
.blink { animation: blink 0.9s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }
.serif { font-family: "Times New Roman", Georgia, serif; }
.center { text-align: center; }
code { color: #ffd27f; }

/* layout: table-ish page */
.page { max-width: 1240px; margin: 0 auto; background: #160c1a; }
.wrap { display: flex; gap: 12px; align-items: flex-start; }
.side { width: 210px; flex: none; }
.main { flex: 1; min-width: 0; }
.box { background: #1d1022; padding: 6px 8px; margin-bottom: 12px; }
.box-in { background: rgba(22, 12, 26, 0.9); padding: 6px; }
.head { background: #1d1022; }
.gridbox { background: #140a18; }
.winbody { background: #1a0e1f; }

/* classic form controls, dark */
input[type=text], select, textarea {
  font: 12px Verdana, sans-serif; color: #f0e6f4; background: #0f0812; padding: 2px 4px;
  border: 2px inset #4a3550;
}
input[type=text] { width: 100%; }
input::placeholder { color: #7a6680; }
input[type=radio], input[type=checkbox], input[type=range] { accent-color: #ff6fb5; }
button, .btn {
  font: 11px Verdana, sans-serif; color: #f0e6f4; background: #3a2a40; padding: 2px 10px; cursor: pointer;
  border: 2px outset #6a5070; border-right-color: #120a14; border-bottom-color: #120a14;
}
button:active { border-style: inset; }
label { cursor: pointer; }

/* tag cloud */
.cloud a { text-decoration: underline; margin-right: 5px; line-height: 1.6; white-space: nowrap; }
.cloud a.on { background: #ff6fb5; color: #12060f; text-decoration: none; padding: 0 2px; }

/* hit counter */
.counter span { display: inline-block; background: #000; color: #0f0; font: 14px "Courier New", monospace; width: 13px; text-align: center; margin-right: 1px; border: 1px solid #333; }

/* archive grid — sample areas are mid-gray so both black and white borders show */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.card { background: #221428; border: 1px solid #4a2a50; padding: 6px; text-align: center; cursor: pointer; }
.card:hover { border-color: #ff6fb5; background: #2c1834; }
.card .sample { height: 110px; background: #4a4350; margin: 0 auto 4px; display: flex; align-items: center; justify-content: center; color: #d9cde0; font-size: 10px; }
.card .strip { height: 110px; display: flex; flex-direction: column; justify-content: space-between; background: #4a4350; }
.card .strip .small { color: #d9cde0 !important; }
.card .nm { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .id { font-size: 9px; color: #a58aa8; }
.pager { text-align: center; margin: 10px 0; font-size: 12px; }

/* modal window */
.backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); display: none; z-index: 50; }
.backdrop.open { display: block; }
.win { position: fixed; z-index: 60; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; max-height: 94vh; overflow: auto; }
.win.open { display: block; }
.close { float: right; font-size: 11px; }

/* detail view */
.detail { display: flex; gap: 12px; width: min(1050px, 92vw); }
.detail .left { flex: 1.2; min-width: 0; }
.detail .right { flex: 1; min-width: 0; }
.stage { height: 330px; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid #4a2a50; position: relative; background: #4a4350; }
.preview { width: 260px; height: 170px; resize: both; overflow: auto; min-width: 40px; min-height: 30px; max-width: 100%; max-height: 100%;
  font-family: "Times New Roman", serif; font-size: 14px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px; }
.controls { margin: 6px 0; line-height: 2; }
.controls label { margin-right: 10px; white-space: nowrap; }
table.info { border-collapse: collapse; width: 100%; }
table.info td { border: 1px solid #4a2a50; padding: 3px 5px; vertical-align: top; font-size: 11px; word-break: break-all; }
table.info td:first-child { width: 90px; color: #ff88c4; font-weight: bold; word-break: normal; background: #26122c; }
pre.css, textarea.css { width: 100%; font: 11px "Courier New", monospace; color: #f3e3a6; background: #120c08; border: 1px dashed #6a5420; padding: 5px; white-space: pre-wrap; margin: 4px 0; }
textarea.css { height: 120px; }

@media (max-width: 760px) {
  body { padding: 6px; }
  .wrap { flex-direction: column; }
  .side { width: 100%; }
  .detail { flex-direction: column; }
  .stage { height: 240px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

marquee { font-family: "Press Start 2P", monospace; font-size: 9px; color: #ff6fb5; background: #000; padding: 3px 0; border-top: 1px solid #3a1a3a; border-bottom: 1px solid #3a1a3a; }