* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: #fff; font-family: 'JetBrains Mono', monospace; font-size: 16px; color: #4a4a49; }
a { color: #000; text-decoration: underline dashed 2px; text-underline-offset: 4px; }

/* site */
.page { text-align: center; margin-bottom: 20px; }
.header { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; }
#sigil { overflow: hidden; height: 260px; text-decoration: none; }
#sigil video { margin-bottom: -10px; pointer-events: none; }
#quote { font: 16px/1.6 'Playfair', Georgia, serif; color: #333; }
hr { width: 500px; margin: 10px auto 40px auto; }

/* terminal */
#terminal { overflow-y: auto; max-height: 400px; max-width: 500px; margin: 0 auto; text-align: left; }
.welcome { margin-bottom: 1em; }
.output { margin-top: 0.25em; line-height: 1.6; }
.journal { font-family: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.cipher {
    font-family: 'JetBrains Mono', monospace;
    word-break: break-all;
    overflow-wrap: anywhere;
    line-height: 1.5;
}
.typewriter span { display: block; overflow: hidden; white-space: nowrap; max-width: 0; animation: type calc(var(--c) * 28ms) steps(var(--c)) var(--d) forwards; }
@keyframes type { to { max-width: 100%; } }
.prompt { display: flex; align-items: center; margin-top: 0.5em; }
.prompt label { white-space: nowrap; flex-shrink: 0; }
.prompt input { flex: 1; border: 0; outline: 0; font: inherit; color: inherit; background: transparent; }

/* guestbook */
#gb { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.5); display: none; align-items: center; justify-content: center; }
.gb-open #gb { display: flex; }
.gb { background: #eef2ff; width: 90%; max-width: 550px; min-height: 80vh; max-height: 80vh; overflow-y: auto; border: 1px solid #b7c5e4; position: relative; font: 13px 'Inter', sans-serif; color: #000; }
.gb h1 { text-align: center; padding: 10px; border-bottom: 1px solid #b7c5e4; font-size: 28px; color: #800000; letter-spacing: -1px; }
.gb-x { position: absolute; top: 8px; right: 12px; z-index: 1001; color: red; font: bold 18px/1 sans-serif; text-decoration: none; }
.gb-x:hover { color: #c00; }
.gb-body { padding: 10px; }
.gb-pin { background: #d6daf0; border: 1px solid #b7c5e4; padding: 8px; margin-bottom: 10px; }
.admin { color: #800080; font-weight: bold; }
.trip { color: #228854; }
.gb-form { padding: 10px 10px 0; margin-bottom: 10px; }
.gb-form table { margin: 0 auto; }
.gb-form td { padding: 2px 4px; }
.gb-form td:first-child { font-weight: bold; text-align: right; }
.gb-form input[type="text"] { width: 300px; padding: 2px 4px; font-size: 13px; border: 1px solid #aaa; }
.gb-form textarea { width: 300px; height: 80px; padding: 2px 4px; font: 13px/1.4 inherit; border: 1px solid #aaa; resize: vertical; }
.gb-form input[type="submit"] { padding: 2px 12px; font-size: 13px; cursor: pointer; }
.post { background: #d6daf0; border: 1px solid #b7c5e4; padding: 4px 6px; margin-bottom: 4px; }
.post-name { color: #117743; font-weight: bold; }
.post-date { color: #666; margin-left: 8px; font-size: 12px; }
.post-id { color: #800000; margin-left: 8px; font-size: 12px; }
.post-body { padding-top: 4px; white-space: pre-wrap; word-break: break-word; }
.gb-empty { text-align: center; color: #666; padding: 20px; font-style: italic; }