/* Adapted from the owner's onyu.club design. System type, permanent dark. */
:root { color-scheme: only dark; font-family: Arial, Helvetica, sans-serif; background: #080808; color: #e9e9e7; font-synthesis: none; -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
body { margin: 0; overflow-x: clip; }
h1,h2,p { margin: 0; }
::selection { background: #dededb; color: #080808; }
.page { --gutter: clamp(1.5rem, 6vw, 4rem); width: min(100%, 48rem); min-height: 100vh; min-height: 100svh; padding-inline: var(--gutter); display: flex; flex-direction: column; }
main { flex: 1; padding-top: var(--gutter); padding-bottom: 6rem; }
.wordmark { font-size: clamp(2.5rem, 10vw, 6.5rem); line-height: 1.1; font-weight: 600; letter-spacing: -.065em; color: #c7c7c4; overflow-wrap: anywhere; }
.hero { position: relative; isolation: isolate; }
.wordmark, .intro { position: relative; z-index: 1; width: fit-content; pointer-events: none; }
#ak-art { --center-y: calc(var(--gutter) + 5.1rem); position: absolute; width: min(62vw, 38rem); height: max(24rem, min(62vw, 38rem)); left: calc(clamp(5rem, 21vw, 15rem) - .75rem); top: calc(-1 * var(--gutter)); z-index: 0; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
#ak-art:active { cursor: grabbing; }
#ak-art:focus-visible { outline: 1px solid #80613c; outline-offset: -2rem; border-radius: 2rem; }
.server { position: relative; z-index: 1; }
.intro { margin-top: 2.6rem; color: #c6c6c3; font-size: 1.125rem; line-height: 1.75; }
.server { width: 60%; margin-top: 3rem; padding: 1.25rem; border: 1px solid #343434; border-radius: .35rem; background: #0c0c0c; }
.server-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1.25rem; }
h2 { font-size: 1rem; line-height: 1.75; font-weight: 400; }
.status { color: #aaa9a4; font-family: 'Courier New', monospace; font-size: .875rem; line-height: 1.75; }
.mode { margin-top: .5rem; color: #aaa9a6; font-size: .875rem; line-height: 1.8; }
.mode span { color: #656563; padding-inline: .4rem; }
.note { max-width: 29rem; margin-top: .85rem; color: #989896; font-size: 1rem; line-height: 1.6; }
footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-block: 1.5rem max(1.5rem, env(safe-area-inset-bottom)); color: #989896; font-size: .875rem; line-height: 1.75; }
.year { font-family: 'Courier New', monospace; }
@media (max-width: 40rem) { .server { width: 100%; max-width: 24rem; } #ak-art { --center-y: calc(var(--gutter) + 3.62rem); left: calc(clamp(5rem, 21vw, 15rem) - .5rem); } }
@media (max-width: 30rem) { main { padding-bottom: 4rem; } }