@font-face { font-family: "Areal Mono"; src: url("/static/fonts/ABCArealMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Areal Mono"; src: url("/static/fonts/ABCArealMono-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Areal Mono"; src: url("/static/fonts/ABCArealMono-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Areal Mono"; src: url("/static/fonts/ABCArealMono-RegularItalic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Areal Mono"; src: url("/static/fonts/ABCArealMono-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Areal Mono"; src: url("/static/fonts/ABCArealMono-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
:root { color-scheme: dark; --accent:#f6b8d0; --bg:#100b10; --panel:#181018; --dim:#c79eb1; --border:#583348; --font-size:15px; --halo:0.08; --radius:6px; --motion-fast:160ms; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body,.output,.pet-panel,.message-log,.user-list,dialog { scrollbar-width:none; }
html::-webkit-scrollbar,body::-webkit-scrollbar,.output::-webkit-scrollbar,.pet-panel::-webkit-scrollbar,.message-log::-webkit-scrollbar,.user-list::-webkit-scrollbar,dialog::-webkit-scrollbar { display:none; width:0; height:0; }
html { width:100%; height:100%; overflow:hidden; }
body { margin:0; width:100%; height:100vh; height:100dvh; padding:0; overflow:hidden; color:var(--accent); font:700 var(--font-size)/1.6 "Areal Mono",monospace; background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--accent) 10%,var(--bg)),var(--bg) 75%); }
button,input,select { font:inherit; }
button,select,input[type="text"] { color:var(--accent); border:1px solid var(--border); background:var(--panel); border-radius:var(--radius); padding:8px 12px; }
button { cursor:pointer; transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease; }
button:hover { background:color-mix(in srgb,var(--accent) 12%,var(--panel)); }
button:disabled { opacity:.5; cursor:wait; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
::selection { background:var(--accent); color:var(--bg); }
.terminal { position:relative; display:flex; flex-direction:column; width:100%; max-width:none; height:100%; min-height:0; margin:0; overflow:hidden; border:0; border-radius:0; background:var(--panel); box-shadow:inset 0 0 80px rgb(246 184 208 / var(--halo)); padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px); }
.terminal-header, .command-line, .terminal > footer { flex-shrink:0; }
.terminal-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 22px; border-bottom:1px solid var(--border); font-size:.75em; letter-spacing:.06em; }
.brand { font-weight:700; white-space:nowrap; }
.version { color:var(--dim); margin-left:8px; font-weight:400; }
.header-actions { display:flex; align-items:center; gap:18px; min-width:0; }
.user-directory { position:relative; }
.user-directory > summary { list-style:none; cursor:pointer; color:var(--accent); border:1px solid var(--border); background:var(--panel); border-radius:5px; padding:8px 12px; }
.user-directory > summary::-webkit-details-marker { display:none; }
.user-directory > summary:hover,.user-directory[open] > summary { background:color-mix(in srgb,var(--accent) 12%,var(--panel)); }
.user-list { position:absolute; z-index:20; top:calc(100% + 8px); right:0; display:grid; gap:5px; width:min(280px,calc(100vw - 24px)); max-height:min(420px,65vh); padding:10px; overflow:auto; border:1px solid var(--border); border-radius:7px; background:var(--panel); box-shadow:0 15px 40px #0008; }
.user-entry { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; text-align:left; }
.user-entry:disabled { cursor:default; opacity:1; }
.rank-label { color:var(--dim); font-size:.68em; letter-spacing:.08em; text-transform:uppercase; }
.rank-admin { color:#ff7f8f; text-shadow:0 0 9px #ff526988; }
.rank-friend { color:#72e6b1; text-shadow:0 0 8px #72e6b155; }
.rank-user { color:var(--accent); }
.terminal-tabs { flex-shrink:0; display:flex; gap:4px; min-height:42px; padding:7px 14px 0; overflow-x:auto; border-bottom:1px solid var(--border); background:var(--bg); }
.terminal-tab { position:relative; flex:none; min-width:100px; padding:6px 12px; border-bottom:0; border-radius:5px 5px 0 0; color:var(--dim); }
.terminal-tab.active { color:var(--accent); background:var(--panel); border-color:var(--accent); }
.terminal-tab.has-unread::after { content:attr(data-unread); display:inline-grid; place-items:center; min-width:18px; height:18px; margin-left:8px; padding:0 4px; color:var(--bg); background:var(--accent); border-radius:20px; font-size:.7em; }
.music-player { position:relative; flex-shrink:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(210px,320px); align-items:center; gap:24px; min-height:64px; padding:10px 22px 12px 48px; border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--accent) 3%,var(--panel)); }
.music-player::before { content:""; width:7px; height:7px; position:absolute; left:22px; top:50%; transform:translateY(-50%); border-radius:50%; background:var(--border); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 6%,transparent); }
.music-player.is-playing::before { background:var(--accent); box-shadow:0 0 12px var(--accent); }
.music-readout { display:flex; min-width:0; flex-direction:column; line-height:1.25; }
.music-kicker { color:var(--dim); font-size:.55em; letter-spacing:.14em; }
#music-track { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.72em; }
.volume-control { display:grid; grid-template-columns:minmax(160px,1fr) 3ch; align-items:center; gap:12px; min-height:48px; padding:6px 12px; color:var(--accent); font-size:.72em; letter-spacing:.1em; border:2px solid var(--accent); border-radius:7px; background:var(--bg); box-shadow:0 0 14px color-mix(in srgb,var(--accent) 22%,transparent); }
.volume-tilt { --tilt:0deg; --position:50%; position:relative; display:block; width:100%; min-width:120px; height:38px; transform:rotate(var(--tilt)); transform-origin:center; transition:transform 420ms cubic-bezier(.2,1.8,.4,1); filter:drop-shadow(0 5px 4px color-mix(in srgb,var(--bg) 75%,transparent)); }
.volume-tilt.is-struggling { animation:lever-rattle 90ms steps(2,end) infinite; transition:transform 60ms linear; }
.volume-tilt.just-slipped { filter:blur(1px) drop-shadow(8px 5px 3px color-mix(in srgb,var(--accent) 35%,transparent)); }
.lever-track { position:absolute; inset:14px 0 auto; display:block; height:10px; border:2px solid var(--accent); border-radius:99px; background:var(--bg); box-shadow:inset 0 0 0 2px var(--panel),0 0 10px color-mix(in srgb,var(--accent) 35%,transparent); pointer-events:none; }
.lever-track::before { content:""; position:absolute; left:50%; top:-8px; width:2px; height:22px; background:var(--accent); opacity:.45; }
.lever-handle { position:absolute; z-index:1; left:clamp(10px,var(--position),calc(100% - 10px)); top:50%; display:block; width:22px; height:22px; border:3px solid var(--panel); border-radius:4px; background:var(--accent); box-shadow:0 0 0 2px var(--accent),0 0 14px var(--accent); transform:translate(-50%,-50%); }
#music-volume { position:absolute; z-index:3; inset:0; display:block; width:100%; height:38px; margin:0; opacity:1; cursor:grab; accent-color:var(--accent); background:transparent; }
#music-volume:active { cursor:grabbing; }
.volume-tilt:focus-within { outline:2px solid var(--accent); outline-offset:4px; border-radius:4px; }
@keyframes lever-rattle { 0% { transform:rotate(calc(var(--tilt) - 1.2deg)) translateY(-1px); } 50% { transform:rotate(calc(var(--tilt) + 1deg)) translateY(1px); } 100% { transform:rotate(var(--tilt)); } }
#music-volume-value { text-align:right; color:var(--accent); }
#system-status { color:var(--dim); overflow-wrap:anywhere; }
.output { flex:1; min-height:0; overflow-y:auto; padding:28px; scrollbar-color:var(--border) var(--panel); }
.output > p { white-space:pre-wrap; overflow-wrap:anywhere; margin:0 0 18px; }
.welcome { margin:25px 0 50px; }
.eyebrow { color:var(--dim); font-size:.7em; letter-spacing:.18em; }
h1 { font-size:clamp(24px,4vw,42px); line-height:1.3; letter-spacing:-.04em; font-weight:500; margin:18px 0 24px; }
.system-message { color:var(--dim); }
.error-message { color:#ff9ea9; }
.response-message { border-left:2px solid var(--accent); padding-left:16px; }
.command-line { display:flex; align-items:center; gap:12px; padding:18px 22px; border-top:1px solid var(--border); }
.command-line label { flex-shrink:0; max-width:45%; overflow-wrap:anywhere; }
#command { min-width:0; flex:1; border:0; background:transparent; color:var(--accent); padding:8px 0; caret-color:var(--accent); }
#command::placeholder { color:var(--dim); opacity:.8; }
footer { display:flex; justify-content:space-between; gap:12px; padding:8px 22px; color:var(--dim); font-size:.65em; letter-spacing:.07em; border-top:1px solid var(--border); }
#audit-notice::before { content:"●"; margin-right:7px; color:var(--accent); font-size:.75em; }
.message-workspace { flex:1; min-height:0; display:flex; flex-direction:column; }
.message-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 22px; color:var(--dim); border-bottom:1px solid var(--border); font-size:.72em; letter-spacing:.08em; }
.message-heading small { display:block; max-width:55vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--dim); font-size:.72em; letter-spacing:.04em; }
.message-log { flex:1; min-height:0; overflow-y:auto; padding:24px; }
.direct-message { max-width:min(720px,88%); margin:0 0 18px; padding:10px 14px; border:1px solid var(--border); border-radius:6px; white-space:pre-wrap; overflow-wrap:anywhere; background:var(--bg); }
.direct-message.mine { margin-left:auto; border-color:var(--accent); }
.message-meta { display:block; margin-bottom:4px; color:var(--dim); font-size:.68em; letter-spacing:.06em; }
.message-empty { color:var(--dim); }
.new-message-form label { display:block; margin:18px 0 6px; font-size:.85em; }
.new-message-form > div { display:flex; gap:8px; }
.new-message-form input { min-width:0; flex:1; }
.message-threads { display:grid; gap:8px; margin-top:14px; }
.message-thread { display:grid; grid-template-columns:1fr auto; gap:3px 12px; width:100%; text-align:left; }
.message-thread small { grid-column:1; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.message-thread .unread-count { grid-column:2; grid-row:1 / span 2; align-self:center; color:var(--bg); background:var(--accent); border-radius:99px; padding:1px 7px; }
body.scanlines .terminal::after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(transparent 0px,transparent 3px,#0002 3px,#0002 4px); }
dialog { width:min(460px,calc(100vw - 32px)); max-height:90dvh; overflow:auto; background:var(--panel); color:var(--accent); border:1px solid var(--border); border-radius:10px; padding:24px; }
dialog::backdrop { background:#08050bba; backdrop-filter:blur(5px); }
.settings-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
h2 { margin:0; font-size:1.25em; font-weight:500; }
dialog p { font-size:.8em; }
dialog > label { display:flex; justify-content:space-between; margin:18px 0 6px; font-size:.85em; }
dialog > select,dialog > input { width:100%; }
input[type="range"],input[type="checkbox"] { accent-color:var(--accent); }
input[type="color"] { height:38px; border:1px solid var(--border); padding:3px; background:var(--panel); cursor:pointer; }
dialog .toggle { justify-content:flex-start; align-items:center; gap:10px; }
#reset-settings { margin-top:12px; width:100%; }
#message-crypto-form > label { display:block; margin:18px 0 6px; font-size:.85em; }
#message-crypto-form > input { width:100%; color:var(--accent); border:1px solid var(--border); background:var(--bg); border-radius:5px; padding:9px 12px; }
#message-crypto-submit { width:100%; margin-top:12px; }
.crypto-warning { padding:12px 14px; color:#ffb7c0; border:2px solid #ff7f8f; border-radius:6px; background:color-mix(in srgb,#ff5269 10%,var(--bg)); box-shadow:0 0 16px #ff526933; font-size:.82em; font-weight:700; }
@media(max-width:650px) { .terminal-header { padding:12px; flex-wrap:wrap; } .header-actions { flex:1; flex-wrap:wrap; justify-content:flex-end; gap:10px; } #system-status { width:100%; text-align:right; font-size:.8em; } .music-player { grid-template-columns:1fr; padding:10px 12px 10px 38px; gap:8px; } .music-player::before { left:15px; } .volume-control { grid-template-columns:1fr 3ch; } .output,.message-log { padding:18px; } .command-line { padding:12px; flex-wrap:wrap; gap:6px; } .command-line label { width:100%; max-width:100%; } footer { padding:8px 12px; font-size:.55em; } }

/* Use the supplied Areal Mono Bold face throughout the interface. */
body,
body * {
    font-weight: 700;
}