:root{
  color-scheme:dark;
  --ink:#f1f3e8;
  --muted:#d0d8c1;
  --green:#3c612b;
  --accent:#c0d89f;
  --line:#9aa98a;
  --paper:#3c4630;
  --bg:#22241f;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-size:16px
}

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

*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:24px
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-size:1rem;
  line-height:1.6
}
button,input,select{
  font:inherit
}
button,a,input,select{
  -webkit-tap-highlight-color:transparent
}
a{
  color:var(--accent)
}
a:hover{
  text-decoration-thickness:2px
}
button{
  cursor:pointer
}
button:disabled{
  cursor:wait
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid #d8efa7;
  outline-offset:4px
}
.skip{
  position:absolute;
  left:20px;
  top:-100px;
  padding:12px 20px;
  background:var(--paper);
  z-index:3
}
.skip:focus{
  top:12px
}

.header,main,footer{
  max-width:1160px;
  margin:0 auto;
  padding-left:32px;
  padding-right:32px
}
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding-top:30px;
  padding-bottom:30px;
  border-bottom:1px solid var(--line)
}
.brand{
  display:flex;
  align-items:center;
  gap:16px;
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
  line-height:1.3
}
.brand img{
  width:140px;
  height:auto;
  display:block;
  background:#f1f3e8;
  padding:6px;
  border-radius:8px
}
.header-label{
  font-weight:700;
  text-align:right
}

.intro{
  padding:56px 0 30px;
  max-width:760px
}
.eyebrow{
  font-weight:700;
  color:var(--accent);
  margin:0 0 14px
}
h1,h2,h3,p{
  margin-top:0
}
h1{
  font-family:Georgia,serif;
  font-size:clamp(2.6rem,5vw,4.5rem);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.03em;
  margin-bottom:22px
}
h1 span{
  color:var(--accent)
}
.intro>p:last-child{
  font-size:1.125rem;
  max-width:620px;
  color:var(--muted)
}
.section-nav{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:4px 0 34px
}
.section-nav a{
  display:flex;
  align-items:center;
  min-height:48px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 16px;
  background:#333d2a;
  text-decoration:none;
  font-weight:700
}
.section-nav a:hover{
  background:#465339
}

.directory-section{
  padding:30px 0 44px;
  border-top:1px solid var(--line)
}
.section-heading{
  display:flex;
  align-items:flex-start;
  gap:18px;
  margin-bottom:24px
}
.section-number{
  display:grid;
  place-items:center;
  flex:0 0 44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:50%;
  font-weight:700;
  background:var(--paper)
}
h2{
  font-size:1.6rem;
  line-height:1.25;
  margin-bottom:8px
}
.section-heading p{
  color:var(--muted);
  margin:0
}
.state-controls{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:24px;
  margin-bottom:18px
}
label{
  display:block;
  font-weight:700
}
input,select{
  display:block;
  width:100%;
  min-height:54px;
  background:#2b3025;
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px;
  color:var(--ink);
  margin-top:8px
}
input::placeholder{
  color:var(--muted);
  opacity:1
}
#state-status{
  color:var(--muted)
}
#load-status{
  color:var(--muted)
}
#load-status:empty{
  display:none
}

.entry-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  list-style:none;
  padding:0;
  margin:0
}
.entry{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px 20px;
  align-items:center;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  padding:22px
}
.entry h3{
  font-size:1rem;
  line-height:1.5;
  margin:0 0 6px;
  overflow-wrap:anywhere
}
.entry-value{
  font-size:1.125rem;
  font-variant-numeric:tabular-nums;
  display:block;
  overflow-wrap:anywhere;
  color:var(--ink)
}
.copy-button{
  min-width:96px;
  min-height:48px;
  padding:10px 16px;
  border:1px solid var(--green);
  background:var(--green);
  color:#f7faef;
  border-radius:8px;
  font-weight:700
}
.copy-button:hover{
  background:#325124
}
.copy-feedback{
  grid-column:1/-1;
  margin:0;
  color:var(--ink);
  font-size:1rem
}
.copy-feedback:empty{
  display:none
}
.copy-feedback.error{
  color:#ffd3c8
}
footer{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:18px;
  border-top:1px solid var(--line);
  padding-top:24px;
  padding-bottom:24px;
  color:var(--muted)
}
footer p{
  margin:0
}

@media(max-width:760px){
  .entry-list{
  grid-template-columns:1fr
}
.header,main,footer{
  padding-left:20px;
  padding-right:20px
}
.header{
  gap:16px
}
.brand img{
  width:100px
}
.brand span{
  display:none
}
.intro{
  padding-top:36px
}
.section-nav{
  display:grid
}
.section-nav a{
  justify-content:center;
  text-align:center
}
.state-controls{
  grid-template-columns:1fr;
  padding:18px
}
.directory-section{
  padding-top:24px
}
.section-heading{
  gap:12px
}
h2{
  font-size:1.35rem
}
.entry{
  padding:18px;
  gap:12px
}
.entry-value{
  font-size:1rem
}
footer{
  flex-direction:column;
  gap:6px
}

}

@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto
}

}