:root { color-scheme: dark; --black:#030304; --background:#19251b; --yellow:#d6bb68; --orange:#d49b4c; --gold:#d6bb68; --lavender:#b9a29a; --periwinkle:#7f9fa0; --coral:#bc7a65; --cream:#f0e3bd; --keyline:rgba(3,3,4,.58); --cut:9px; --corner-cut:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut)); }
* { box-sizing: border-box; }
html, body { max-width:100%; overflow-x:hidden; } body { min-height:100svh; margin:0; background:var(--background); color:var(--cream); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.page { width:100%; min-height:100svh; display:grid; place-items:center; padding:clamp(.5rem, 2vw, 2rem); }

.terminal { position:relative; display:grid; grid-template-rows:auto auto 1fr auto; width:min(100%, 74rem); min-width:0; min-height:min(43rem, calc(100svh - 2rem)); overflow:hidden; background:linear-gradient(rgba(147,149,239,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(147,149,239,.11) 1px, transparent 1px), var(--background); background-size:2.8rem 2.8rem; }
.boot-screen { position:absolute; z-index:4; top:0; right:2.1rem; bottom:.7rem; left:0; display:grid; place-items:center; color:var(--yellow); font-size:clamp(.85rem, 2vw, 1.2rem); font-weight:700; letter-spacing:.18em; text-transform:uppercase; transition:opacity 260ms ease, visibility 260ms ease; }
.boot-screen span { position:absolute; }
.is-loading .eyebrow, .is-loading h1, .is-loading .subtitle, .is-loading .webring { visibility:hidden; }
.is-loading .hello { animation:none; }
body:not(.is-loading) .boot-screen { visibility:hidden; opacity:0; }
.terminal-header { grid-column:1/-1; display:grid; grid-template-columns:1.6rem 1fr auto auto 1.6rem; align-items:center; gap:.45rem; padding:0; clip-path:var(--corner-cut); }
.cap { height:2rem; background:var(--yellow); box-shadow:inset 0 0 0 2px var(--keyline); }
.terminal-header .cap { background:var(--periwinkle); }
.cap-left, .cap-right { clip-path:var(--corner-cut); }.terminal-header .cap { clip-path:none; }
.header-line { height:2rem; background:var(--periwinkle); box-shadow:inset 0 0 0 2px var(--keyline); }
.identity { margin:0; color:var(--orange); font-size:clamp(.72rem, 2vw, 1.25rem); font-weight:700; letter-spacing:-.07em; text-transform:uppercase; white-space:nowrap; }
.online { color:var(--cream); font-size:clamp(.65rem, 1.55vw, 1rem); font-weight:700; text-transform:uppercase; }

.mode-row { display:grid; grid-template-columns:1fr 1fr 3.4fr 1fr; gap:.35rem; min-height:4.5rem; margin-top:1rem; overflow:hidden; clip-path:var(--corner-cut); }
.mode-row span { display:flex; align-items:flex-end; justify-content:flex-end; padding:.8rem; clip-path:var(--corner-cut); box-shadow:inset 0 0 0 2px var(--keyline); color:var(--black); font-size:clamp(.62rem, 1.4vw, .9rem); font-weight:800; text-align:right; text-transform:uppercase; }
.mode-row span { background:var(--coral); }.mode-row span:nth-child(1), .mode-row span:nth-child(4), .mode-row span:nth-child(2), .mode-row span:nth-child(3) { background:var(--coral); }

.hello { position:relative; min-height:24rem; margin-top:.8rem; padding:clamp(3rem, 8vw, 6.5rem) clamp(1.25rem, 7vw, 6rem) calc(2rem + .7rem); overflow:hidden; animation:arrive 700ms ease-out both; }
.hello::before { position:absolute; z-index:0; right:calc(2.1rem - 2px); bottom:0; left:0; height:.7rem; background:linear-gradient(var(--keyline),var(--keyline)) 4.2rem top/calc(100% - 4.2rem) 2px no-repeat, linear-gradient(var(--keyline),var(--keyline)) bottom/100% 2px no-repeat, linear-gradient(var(--keyline),var(--keyline)) left/2px 100% no-repeat, var(--yellow); content:""; pointer-events:none; }
.hello::after { position:absolute; z-index:1; top:0; right:0; bottom:0; width:2.1rem; background:linear-gradient(var(--keyline),var(--keyline)) top/100% 2px no-repeat, linear-gradient(var(--keyline),var(--keyline)) right/2px 100% no-repeat, linear-gradient(var(--keyline),var(--keyline)) bottom/100% 2px no-repeat, linear-gradient(var(--keyline),var(--keyline)) left 4.2rem/2px calc(100% - 4.9rem) no-repeat, var(--yellow); content:""; pointer-events:none; }.stem-join { position:absolute; z-index:2; top:0; right:2.1rem; width:.7rem; height:4.2rem; background:linear-gradient(var(--keyline),var(--keyline)) top/100% 2px no-repeat, linear-gradient(var(--keyline),var(--keyline)) left/2px 100% no-repeat, linear-gradient(var(--keyline),var(--keyline)) bottom/100% 2px no-repeat, var(--yellow); pointer-events:none; }.rail-join { position:absolute; z-index:1; bottom:.7rem; left:0; width:4.2rem; height:.7rem; background:linear-gradient(var(--keyline),var(--keyline)) top/100% 2px no-repeat, linear-gradient(var(--keyline),var(--keyline)) left/2px 100% no-repeat, linear-gradient(var(--keyline),var(--keyline)) right/2px 100% no-repeat, var(--yellow); pointer-events:none; }
.eyebrow { margin:0 0 1rem; color:var(--periwinkle); font-size:.68rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
h1 { display:inline-flex; align-items:stretch; margin:0; color:var(--cream); font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size:clamp(3rem, 8vw, 7rem); font-weight:500; letter-spacing:.015em; line-height:.9; text-transform:uppercase; }
.prompt { align-self:center; display:flex; align-items:center; justify-content:center; margin:0 .32em 0 0; color:var(--orange); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.12em; font-weight:500; letter-spacing:.08em; line-height:1; writing-mode:vertical-rl; transform:rotate(180deg); }
.subtitle { margin:1.25rem 0 0; color:var(--periwinkle); font-size:clamp(.78rem, 1.7vw, 1rem); }

.webring { display:flex; flex-wrap:wrap; align-items:center; gap:.65rem; margin-top:clamp(2.5rem, 8vw, 5rem); }
.webring-label { width:100%; color:var(--orange); font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.webring a { min-width:5.5rem; padding:.55rem 1rem; clip-path:var(--corner-cut); box-shadow:inset 0 0 0 2px var(--keyline); background:var(--periwinkle); color:var(--black); font-size:.68rem; font-weight:800; text-align:center; text-decoration:none; text-transform:uppercase; transition:background 160ms ease, transform 160ms ease; }.webring a:first-of-type { background:var(--yellow); }.webring a:hover, .webring a:focus-visible { background:var(--cream); outline:none; transform:translateY(-2px); }

.terminal-footer { grid-column:1/-1; display:grid; grid-template-columns:1.6rem auto 1fr 1.6rem; align-items:center; gap:.6rem; margin-top:1rem; clip-path:var(--corner-cut); }.terminal-footer .cap { clip-path:none; background:var(--periwinkle); }.terminal-footer b { color:var(--orange); font-size:clamp(.7rem, 1.6vw, 1rem); text-transform:uppercase; white-space:nowrap; }.terminal-footer span:not(.cap), .terminal-footer i { height:2rem; box-shadow:inset 0 0 0 2px var(--keyline); clip-path:none; background:var(--periwinkle); }.terminal-footer .footer-text { display:flex; align-items:center; padding:0 .75rem; color:var(--black); font-size:clamp(.55rem, 1.2vw, .8rem); font-weight:700; text-transform:uppercase; white-space:nowrap; }
@keyframes arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:38rem) { .terminal-header { grid-template-columns:1.1rem minmax(0, 1fr) 1.1rem; }.header-line, .online { display:none; }.identity { font-size:.65rem; }.cap { height:1.5rem; }.mode-row { min-height:3.4rem; margin-top:.5rem; }.mode-row span { padding:.45rem; font-size:.5rem; }.hello { padding:2.8rem calc(1rem + 1.3rem) calc(1.4rem + .7rem) 1rem; }.hello::before { right:calc(1.3rem - 2px); background:linear-gradient(var(--keyline),var(--keyline)) 2.6rem top/calc(100% - 2.6rem) 2px no-repeat, linear-gradient(var(--keyline),var(--keyline)) bottom/100% 2px no-repeat, linear-gradient(var(--keyline),var(--keyline)) left/2px 100% no-repeat, var(--yellow); }.hello::after { width:1.3rem; background:linear-gradient(var(--keyline),var(--keyline)) top/100% 2px no-repeat, linear-gradient(var(--keyline),var(--keyline)) right/2px 100% no-repeat, linear-gradient(var(--keyline),var(--keyline)) bottom/100% 2px no-repeat, linear-gradient(var(--keyline),var(--keyline)) left 2.6rem/2px calc(100% - 3.3rem) no-repeat, var(--yellow); }.stem-join { right:1.3rem; width:.55rem; height:2.6rem; }.rail-join { bottom:.7rem; width:2.6rem; height:.7rem; }.boot-screen { right:1.3rem; }.webring a { flex:1 1 100%; min-width:0; }.terminal-footer { grid-template-columns:1.1rem auto minmax(0, 1fr) 1.1rem; gap:.35rem; margin-top:.5rem; }.terminal-footer .footer-text { min-width:0; overflow:hidden; } }
@media (prefers-reduced-motion:reduce) { .hello { animation:none; } }