:root{color-scheme:dark;--bg:#050505;--text:#e8e5dd;--muted:#aaa99f;--copper:#c9a077;--line:#514b41;font-family:'SFMono-Regular',Consolas,'Liberation Mono',monospace}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}#app{height:100dvh;display:flex;flex-direction:column;padding:20px 4%}nav{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding:0 0 18px;font-size:13px}nav>div{display:flex;align-items:center;gap:20px}.brand{font-size:21px;font-weight:bold;color:var(--text)}button,a{font:inherit;color:var(--copper);text-decoration:none}button{border:0;background:none;cursor:pointer;padding:6px 0}a:hover,button:hover{text-decoration:underline}a:focus-visible,button:focus-visible,#screen:focus-visible{outline:1px solid var(--copper);outline-offset:3px}#screen{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-color:#6d5d48 #090909;scrollbar-width:thin;margin:8px 0 16px;position:relative}#buffer,#hero-buffer{font:14px/19px 'SFMono-Regular',Consolas,'Liberation Mono',monospace;margin:0;white-space:pre;position:relative;min-width:0}.terminal-row{height:19px;white-space:pre}.copper{color:var(--copper)}.muted{color:var(--muted)}.rule{color:var(--line)}.bright{color:var(--text);font-weight:bold}.art{color:var(--text)}footer{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:12px;color:var(--muted);font-size:11px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(min-width:1500px){#buffer,#hero-buffer{font-size:16px;line-height:22px}.terminal-row{height:22px}}@media(max-width:650px){#app{padding:12px}nav{align-items:flex-start;flex-direction:column;gap:8px}nav>div{gap:12px;flex-wrap:wrap;font-size:12px}#buffer,#hero-buffer{font-size:12px;line-height:17px}.terminal-row{height:17px}footer{flex-wrap:wrap;font-size:10px}}

.cell{display:inline-block;width:var(--cell);font-style:normal;text-align:center;overflow:visible}

[class^="title-"]{display:inline-block;position:relative;vertical-align:top;height:19px;font-size:28px;line-height:38px;white-space:pre;font-weight:400}
[class^="title-"] .cell{width:calc(var(--cell)*2)}
.title-copper{color:var(--copper)}.italic{font-style:italic}.italic .cell{font-style:italic}
@media(max-width:650px){[class^="title-"]{height:17px;font-size:24px;line-height:34px}}
@media(min-width:1500px){[class^="title-"]{height:22px;font-size:32px;line-height:44px}}

/* The full-size terminal mark is the initial B of the scrolling wordmark. */
nav{justify-content:flex-end}
.brand{display:flex;align-items:center;gap:0;line-height:1;width:fit-content;padding:20px 0 0;font-size:36px;letter-spacing:-1.5px;font-weight:500}
#brand-art{display:inline-block;width:304px;margin-right:-55px;color:var(--text);flex-shrink:0}
.brand-art-row{display:block;height:19px;font-size:14px;line-height:19px;white-space:pre;font-weight:400}
.brand-art-row i{display:inline-block;width:8px;font-style:normal;text-align:center}
@media(max-width:650px){
 .brand{font-size:27px;letter-spacing:-1px;padding-top:10px}
 #brand-art{width:190px;margin-right:-34px}
 .brand-art-row{height:12px;font-size:9px;line-height:12px}
 .brand-art-row i{width:5px}
}

/* Keep the wordmark and introductory copy in two balanced terminal panes. */
#entry{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:40px;padding:38px 0 24px}
#entry .brand{justify-self:center;padding:0;font-size:32px}
#hero-buffer{min-width:0}
@media(min-width:761px) and (max-width:1100px){
 #entry{gap:28px}
 #entry .brand{font-size:27px;letter-spacing:-1px}
 #brand-art{width:228px;margin-right:-41px}
 .brand-art-row{height:15px;font-size:11px;line-height:15px}
 .brand-art-row i{width:6px}
}
@media(max-width:760px){
 #entry{grid-template-columns:1fr;gap:20px;padding:10px 0 20px}
 #entry .brand{justify-self:start}
}

/* Character cells are inline blocks, so underline each cell explicitly. */
a:hover,button:hover,a:focus-visible,button:focus-visible{color:#fff4df;text-decoration:underline;text-underline-offset:4px}
.terminal-row a:hover .cell,.terminal-row a:focus-visible .cell{text-decoration:underline;text-underline-offset:4px}
.brand:hover #brand-art,.brand:focus-visible #brand-art{color:var(--copper)}