/* Console layout with the charcoal theme from theme.html. */
:root {
  color-scheme: dark;
  --bg: #161615;
  --surface: #1e1e1c;
  --ink: #ebeae6;
  --muted: #a8a69f;
  --faint: #5f5d58;
  --line: #31302d;
  --accent: #7fd49b;
  --soft: #22322a;
  --code: #121211;
  --hover: #262624;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--ink);
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
}

h1, h2, h3, p {
  margin:0
}

a {
  color:inherit;
  text-underline-offset:4px
}

button {
  font:inherit
}

a, button, summary {
  -webkit-tap-highlight-color:transparent
}

button, summary {
  cursor:pointer
}

[hidden] {
  display:none!important
}

::selection {
  background:var(--accent);
  color:#0e2216
}

:where(a, button, summary, [tabindex]):focus-visible {
  outline:3px solid var(--accent);
  outline-offset:4px
}

section[id], div[id] {
  scroll-margin-top:24px
}

svg {
  width:26px;
  height:26px
}

code, .mono, .eyebrow {
  font-family:var(--mono)
}

.muted {
  color:var(--muted)
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}

.skip-link {
  position:absolute;
  left:20px;
  top:0;
  z-index:10;
  background:var(--surface);
  padding:12px;
  transform:translateY(-200%)
}

.skip-link:focus {
  transform:translateY(4px)
}

.eyebrow {
  color:var(--muted);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:500
}

.prompt-mark {
  color:var(--accent);
  font-weight:700
}

.label {
  font-family:var(--mono);
  font-size:11px;
  color:var(--accent);
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:4px;
  white-space:nowrap
}

.page-shell {
  max-width:1240px;
  margin:0 auto;
  padding:0 36px
}

.site-header {
  height:96px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:24px
}

.brand {
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  font-size:22px;
  letter-spacing:-.8px;
  font-weight:700;
  white-space:nowrap
}

.brand-icon {
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid var(--accent);
  border-radius:5px;
  font:18px var(--mono);
  color:var(--accent);
  margin-right:11px;
  letter-spacing:-3px;
  padding-right:3px
}

.brand-dot {
  color:var(--accent)
}

.header-note {
  font-size:10px;
  letter-spacing:.07em;
  color:var(--muted);
  margin-left:auto
}

.header-tor {
  font:12px var(--mono);
  text-decoration:none;
  padding:12px 0;
  margin-left:12px
}

.header-tor:hover {
  color:var(--accent)
}

.hero {
  padding:50px 0 36px
}

.hero h1 {
  font-size:clamp(38px,4.4vw,60px);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-2.8px;
  margin:16px 0 22px
}

.hero h1>span {
  color:var(--accent)
}

.hero-description {
  font-size:16px;
  line-height:1.65;
  color:var(--muted);
  max-width:560px
}

.section-nav {
  display:flex;
  gap:10px
}

.section-nav a {
  display:flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  min-height:44px;
  padding:10px 14px;
  font:12px var(--mono);
  border-radius:5px
}

.section-nav a:hover {
  color:var(--accent);
  background:var(--soft)
}

.nav-number {
  color:var(--muted);
  font-size:10px
}

.nav-slash {
  display:none
}

.horizontal {
  gap:22px;
  padding:0 0 22px;
  flex-wrap:wrap
}

.horizontal a {
  padding:9px 0;
  gap:8px
}

.horizontal a:hover {
  background:none;
  text-decoration:underline
}

.group-intro {
  display:flex;
  align-items:baseline;
  gap:20px
}

.group-intro h2 {
  font-size:23px;
  letter-spacing:-.6px;
  font-weight:600
}

.group-intro .eyebrow {
  display:none
}

.group-note {
  font-size:13px;
  color:var(--muted)
}

.group-count {
  font-size:10px;
  color:var(--muted);
  margin-left:auto
}

.service-group {
  margin-bottom:30px
}

.entries {
  margin-top:16px
}

.service-link {
  position:relative;
  display:grid;
  align-items:center;
  text-decoration:none;
  min-width:0;
  color:var(--ink);
  transition:background 120ms ease,border-color 120ms ease
}

.service-link:hover, .service-link:focus-visible {
  background:var(--hover)
}

.service-name {
  display:block;
  font-size:17px;
  font-weight:600;
  letter-spacing:-.25px
}

.service-description {
  display:block;
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
  margin-top:3px
}

.service-domain {
  font-family:var(--mono);
  font-size:11px;
  color:var(--muted);
  overflow-wrap:anywhere
}

.entry-copy {
  min-width:0
}

.entry-number {
  font-family:var(--mono);
  font-size:11px;
  color:var(--muted)
}

.open-arrow {
  color:var(--accent);
  font-size:18px;
  font-weight:400
}

.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:14px
}

.section-heading .eyebrow {
  margin-bottom:10px
}

.section-heading h2 {
  font-size:28px;
  letter-spacing:-1px;
  font-weight:600;
  line-height:1.2
}

.section-description {
  color:var(--muted);
  font-size:14px;
  margin-bottom:24px
}

.tor-section {
  margin-top:54px;
  border-top:1px solid var(--line);
  padding-top:36px
}

.onion-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}

.onion-entry {
  min-width:0;
  background:var(--surface);
  border:1px solid var(--line);
  padding:20px;
  border-radius:8px
}

.onion-link {
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px 16px;
  text-decoration:none
}

.onion-link:hover .onion-name {
  color:var(--accent)
}

.onion-name {
  font:500 14px var(--mono);
  overflow-wrap:anywhere
}

.onion-description {
  grid-column:1/-1;
  font-size:13px;
  color:var(--muted)
}

.address-line {
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
  display:flex;
  gap:14px;
  align-items:center
}

.onion-address {
  font-size:10px;
  line-height:1.7;
  overflow-wrap:anywhere;
  color:var(--muted);
  min-width:0;
  flex:1
}

.copy-onion {
  flex:none;
  min-height:44px;
  min-width:64px;
  padding:8px 12px;
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:5px;
  color:var(--accent);
  font:11px var(--mono)
}

.copy-onion:hover {
  border-color:var(--accent)
}

.current-onion {
  display:block;
  font:11px var(--mono);
  color:var(--accent);
  margin-top:10px
}

.connection-section {
  margin-top:28px
}

.connection-section details {
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface)
}

summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  list-style:none;
  padding:20px 24px;
  gap:20px
}

summary::-webkit-details-marker {
  display:none
}

summary .eyebrow {
  display:block;
  font-size:10px;
  margin-bottom:6px
}

#connection-heading {
  font-size:17px;
  font-weight:600
}

.summary-meta {
  display:flex;
  align-items:center;
  gap:22px;
  font:11px var(--mono);
  color:var(--muted)
}

.disclosure {
  font-size:22px;
  color:var(--accent)
}

.disclosure:before {
  content:'+'
}

details[open] .disclosure:before {
  content:'−'
}

.connection-content {
  padding:24px;
  border-top:1px solid var(--line);
  font-size:13px
}

.connection-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px
}

.connection-grid>div {
  min-width:0
}

.connection-grid h3 {
  font:500 11px var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em
}

dl {
  margin:18px 0 0
}

dl>div {
  display:grid;
  grid-template-columns:95px minmax(0,1fr);
  gap:16px;
  padding:8px 0;
  border-top:1px solid var(--line);
  font-size:12px
}

dt {
  color:var(--muted)
}

dd {
  margin:0;
  overflow-wrap:anywhere
}

#connection-note {
  color:var(--muted);
  margin:22px 0 10px;
  max-width:86ch
}

.connection-content>a {
  color:var(--accent)
}

.privacy-section {
  margin-top:48px
}

.privacy-copy {
  max-width:86ch;
  color:var(--muted);
  font-size:14px;
  line-height:1.75
}

.privacy-copy h3 {
  font-size:15px;
  color:var(--ink);
  margin:22px 0 6px;
  font-weight:600
}

.privacy-command {
  font-size:12px;
  color:var(--muted)
}

.site-footer {
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding:30px 0;
  margin-top:44px;
  font-size:12px;
  color:var(--muted)
}

.footer-brand {
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  color:var(--ink)
}

.footer-brand span {
  color:var(--accent)
}

.site-footer nav {
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  margin-left:auto
}

.site-footer nav a {
  text-decoration:none
}

.site-footer nav a:hover {
  color:var(--accent);
  text-decoration:underline
}

.keyboard-note {
  font:10px var(--mono);
  width:100%;
  color:var(--muted)
}

.console .page-shell {
  max-width:1192px
}

.console .hero {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px
}

.console .hero h1 {
  font-family:var(--mono);
  font-size:clamp(32px,3.7vw,50px);
  font-weight:500;
  letter-spacing:-2.2px;
  line-height:1.15
}

.console .hero-description {
  font-size:15px
}

.console-stamp {
  width:208px;
  border-left:1px solid var(--line);
  padding-left:35px;
  display:flex;
  flex-direction:column;
  gap:9px;
  color:var(--muted);
  font:9px var(--mono);
  letter-spacing:.06em
}

.console-stamp b {
  font-size:36px;
  font-weight:400;
  line-height:1.25;
  color:var(--ink);
  letter-spacing:-2px
}

.console-stamp b span {
  font-size:12px;
  color:var(--muted);
  letter-spacing:0
}

.command-line {
  display:flex;
  justify-content:space-between;
  gap:24px;
  border:1px solid var(--line);
  border-radius:7px 7px 0 0;
  padding:15px 20px;
  background:var(--code);
  font:12px var(--mono);
  margin-bottom:30px
}

.command-line b {
  color:var(--accent);
  font-weight:500
}

.command-note {
  font-size:10px;
  color:var(--muted)
}

.console .group-intro {
  padding:0 20px
}

.console .group-intro h2 {
  font:500 15px var(--mono)
}

.console .group-intro h2::before {
  content:'./';
  color:var(--accent)
}

.console .group-note {
  font-size:12px
}

.console .entries {
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  background:var(--surface)
}

.console .service-link {
  grid-template-columns:28px minmax(0,1fr) auto 16px;
  gap:18px;
  padding:17px 20px
}

.console .service-link+.service-link {
  border-top:1px solid var(--line)
}

.console .service-name {
  font:500 14px var(--mono)
}

.console .service-description {
  font-size:14px
}

.console .service-domain {
  font-size:10px
}

.console .service-link:focus-visible {
  outline-offset:-3px
}

.console .section-heading h2 {
  font-family:var(--mono);
  font-size:24px;
  letter-spacing:-1px
}

.console .privacy-section {
  padding-left:20px
}

.console .onion-entry {
  border-radius:5px
}

@media(max-width:1050px) {
.console .service-domain {
  display:none
}

.console .service-link {
  grid-template-columns:26px minmax(0,1fr) 16px
}
}

@media(max-width:760px) {
.page-shell {
  padding:0 22px
}

.site-header {
  height:76px
}

.header-note {
  display:none
}

.header-tor {
  margin-left:auto
}

.hero {
  padding-top:32px
}

.hero h1 {
  letter-spacing:-1.8px
}

.console-stamp {
  display:none
}

.console .hero {
  padding-bottom:24px
}

.console .hero h1 {
  font-size:38px
}

.horizontal {
  gap:4px 18px;
    padding-bottom:16px
}

.horizontal a {
  font-size:11px
}

.nav-number {
  font-size:9px
}

.command-line {
  padding:13px 16px;
    margin-bottom:24px
}

.command-note {
  display:none
}

.console .group-intro {
  padding:0 4px;
    gap:12px
}

.console .group-note {
  display:none
}

.console .service-link {
  padding:17px 15px;
    gap:12px;
    grid-template-columns:20px minmax(0,1fr) 14px
}

.console .service-name {
  font-size:14px
}

.console .service-description {
  font-size:14px
}

.onion-list {
  grid-template-columns:1fr
}

.section-heading h2, .console .section-heading h2 {
  font-size:23px
}

.section-heading {
  flex-wrap:wrap;
    gap:10px
}

.connection-grid {
  grid-template-columns:1fr
}

.summary-meta>span:first-child {
  display:none
}

summary {
  padding:18px
}

.connection-content {
  padding:18px
}

.privacy-command {
  display:none
}

.site-footer {
  gap:20px
}

.site-footer nav {
  margin-left:0;
    gap:16px
}

.keyboard-note span {
  display:none
}

.console .privacy-section {
  padding-left:0
}
}

@media(max-width:430px) {
.page-shell {
  padding:0 18px
}

.brand {
  font-size:21px
}

.brand-icon {
  width:30px;
    height:30px;
    font-size:16px
}

.header-tor {
  font-size:11px
}

.console .hero h1 {
  font-size:32px
}

.hero-description {
  font-size:14px
}

.desktop-break {
  display:none
}

.console .horizontal {
  gap:0 16px
}

.horizontal .nav-number {
  display:none
}

.command-line {
  font-size:10px;
    padding:12px
}

.console .service-link {
  grid-template-columns:minmax(0,1fr) 14px;
    padding:15px 14px
}

.console .entry-number {
  display:none
}

.console .service-name {
  font-size:14px
}

.console .service-description {
  font-size:14px
}

.onion-entry {
  padding:17px
}

.address-line {
  gap:9px
}

.copy-onion {
  padding:8px;
    min-width:58px
}

.onion-address {
  font-size:10px
}

.connection-content dl>div {
  grid-template-columns:76px minmax(0,1fr);
    gap:10px
}

.tor-section {
  margin-top:38px;
    padding-top:28px
}

.privacy-section {
  margin-top:34px
}
}

@media(prefers-reduced-motion:reduce) {
*, *:before, *:after {
  animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
}
}

.service-link:hover .service-name,
.service-link:focus-visible .service-name {
  color: var(--accent);
}

.connection-content > a:hover,
.site-footer nav a:hover {
  color: #a3e2b7;
}