@font-face { font-family:"DM Sans"; src:url("fonts/dm-sans.woff2") format("woff2"); font-weight:400 720; font-display:swap }
@font-face { font-family:"IBM Plex Mono"; src:url("fonts/ibm-plex-mono.woff2") format("woff2"); font-weight:400; font-display:swap }
:root { --ink:#131416; --gray:#555b63; --line:#d8dbe0; --orange:#f65d05; font-family:"DM Sans","Segoe UI",Arial,sans-serif; color:var(--ink); }
* { box-sizing:border-box }
body { margin:0; background:white }
.wrap { width:min(1450px,94%); margin-inline:auto }
a { color:inherit; text-decoration:none }
input,button { font:inherit }
:focus-visible { outline:3px solid #994400; outline-offset:3px }
header { border-bottom:1px solid var(--line) }
.nav, nav { display:flex; align-items:center }
.nav { justify-content:space-between; min-height:72px; gap:16px }
.brand img { display:block; width:clamp(150px,16vw,238px); height:auto }
nav { gap:clamp(16px,3vw,45px); font-weight:650 }
nav a:hover { color:#a23a00 }
.login { padding-left:clamp(14px,3vw,40px); border-left:1px solid var(--line) }
.signup, .entry button { background:var(--orange); border-radius:7px; color:white; font-weight:700 }
.signup { padding:11px 20px }
.signup:hover,.entry button:hover { background:#c34500; color:white }
.hero { display:grid; grid-template-columns:43% 57%; align-items:center; padding-block:8px; min-height:220px }
h1,h2,p { margin:0 }
h1 { font-size:clamp(45px,5vw,79px); line-height:1.05; letter-spacing:-.055em; font-weight:720 }
.hero p { font-size:clamp(17px,1.7vw,27px); letter-spacing:-.025em; color:var(--gray); margin-top:16px; line-height:1.4 }
.mascot { width:100%; height:auto; max-height:355px; object-fit:contain; mask-image:linear-gradient(90deg,transparent,#000 5%,#000 96%,transparent) }
h2 { font-size:clamp(22px,2.1vw,32px); letter-spacing:-.025em; line-height:1.2; font-weight:500 }
#locations { margin:0 0 20px; scroll-margin-top:15px }
.cities { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px }
.city { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:12px; min-height:clamp(112px,9.5vw,148px); padding:18px 15px; isolation:isolate }
.city:hover { border-color:#f7a677 }
.city[aria-current] { border-color:var(--orange); box-shadow:inset 0 0 0 1px var(--orange) }
.city img { position:absolute; z-index:-1; right:3px; bottom:4px; width:66%; height:90%; object-fit:contain; object-position:right bottom }
.city-label { display:flex; align-items:baseline; gap:10px }
.city-label i { flex:none; align-self:flex-start; margin-top:3px; width:18px; height:18px; border:1.5px solid #8c9299; border-radius:50%; background:white }
.city[aria-current] i { border-color:var(--orange); background:var(--orange); box-shadow:inset 0 0 0 3px white }
.city strong,.city small { display:table; background:#fff; border-radius:2px; padding-right:3px }
.city strong { font-size:clamp(16px,1.5vw,23px); line-height:1.25; letter-spacing:-.025em; font-weight:600 }
.city small, #host { font-family:"IBM Plex Mono",monospace }
.city small { margin-top:3px; color:var(--gray); font-size:14px }
.workspace { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:22px; margin:clamp(22px,3vw,44px) 0 32px }
.tool,.results { min-width:0; border-radius:12px; padding:clamp(18px,1.8vw,28px) }
.tool { border:1px solid var(--line) }
.commands { display:flex; padding:0; margin:13px 0 17px; border:0; border-bottom:1px solid var(--line); min-width:0 }
.commands label { position:relative; text-align:center; cursor:pointer; flex:1 }
.commands input,.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.commands span { display:block; padding:13px 1px; margin-bottom:-1px; border-bottom:3px solid transparent; font-weight:600; white-space:nowrap }
.commands input:checked + span { color:#bc4603; border-color:var(--orange) }
.commands input:focus-visible + span { outline:2px solid var(--orange); outline-offset:-2px }
.target { display:block; margin-bottom:9px; font-weight:600 }
.entry { display:flex; gap:10px }
.entry input { min-width:0; flex:1; border:1px solid #a9aeb4; border-radius:7px; padding:11px 13px; color:var(--ink) }
.entry button { display:flex; gap:12px; align-items:center; justify-content:center; border:0; padding:12px 17px; cursor:pointer; white-space:nowrap }
.entry button:disabled { opacity:.65; cursor:default }
.commands span,.target,.entry button { font-weight:500 }
.results { position:relative; min-height:220px; padding:0; overflow:hidden; color:#e5e5e7; background:#1d1e21; border:1px solid #38383b; box-shadow:0 5px 14px #15161a16 }
.result-head { position:relative; display:flex; align-items:center; justify-content:center; height:34px; padding:0 60px; background:linear-gradient(#414144,#373739); border-bottom:1px solid #151516 }
.result-head h2 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:500; letter-spacing:.005em }
.lights { position:absolute; left:12px; display:flex; gap:8px }
.lights i { width:12px; height:12px; border-radius:50%; background:#ff6058 }
.lights i:nth-child(2) { background:#ffbd2e }
.lights i:nth-child(3) { background:#28c840 }
.session { position:absolute; inset:34px 0 0; overflow:auto; padding:12px 15px; font:13px/1.44 "IBM Plex Mono",Menlo,Consolas,monospace }
.session:focus-visible { outline-offset:-3px }
.session pre { margin:0; font:inherit; white-space:pre; tab-size:4 }
.prompt { color:#c7dcbf }
.cursor { display:inline-block; width:.6em; height:1.05em; vertical-align:-.12em; background:#d4d4d6 }
#state { color:#d2d5d9 }
#state.error { color:#ffbda4 }
@media(max-width:860px) {
 .cities { grid-template-columns:repeat(2,minmax(0,1fr)) }
 .workspace { grid-template-columns:1fr }
 .results { min-height:185px }
 .hero { min-height:190px }
}
@media(max-width:560px) {
 .wrap { width:92% }
 .nav { min-height:64px; flex-wrap:wrap; gap:6px; padding:7px 0 }
 .brand img { width:124px }
 nav { gap:10px; font-size:12px }
 .login { border:0; padding:0 }
 .signup { padding:8px 10px }
 .hero { grid-template-columns:1fr; padding:24px 0 12px }
 .hero p { margin-top:8px }
 .mascot { justify-self:end; width:88%; max-height:155px }
 #locations { margin-bottom:12px }
 .cities { gap:8px }
 .city { padding:10px; min-height:104px }
 .city-label { gap:6px }
 .city-label i { width:14px; height:14px }
 .city small { font-size:12px }
 .commands span { font-size:14px }
 .workspace { gap:12px }
 .entry button { padding:10px; font-size:14px }
}
@media(max-width:380px) { .nav { justify-content:center } }