:root{
  --paper:hsl(328,22%,12%);
  --ink:hsl(328,18%,94%);
  --accent:hsl(328,42%,76%);
  --wash:hsl(328,22%,20%)
}


*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scrollbar-color:var(--accent) var(--wash);
  scrollbar-width:auto;
  scrollbar-gutter:stable
}
body{
  margin:0 auto;
  padding:0 28px;
  max-width:1180px;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.65 'Segoe UI',Arial,sans-serif
}
a{
  color:inherit;
  text-underline-offset:4px
}
a:hover{
  color:var(--accent)
}
h1,h2,h3{
  line-height:1.2
}
p{
  margin:.8rem 0 1.2rem
}
img,svg{
  max-width:100%
}
button,input,select,textarea{
  font:inherit;
  color:var(--ink)
}
button,.action{
  border:1px solid transparent;
  border-radius:6px;
  padding:.8rem 1.15rem;
  background:var(--accent);
  color:var(--paper);
  font-weight:600;
  text-decoration:none;
  display:inline-block;
  cursor:pointer
}
button:hover,.action:hover{
  filter:brightness(1.12);
  color:var(--paper)
}
button:active,.action:active{
  transform:translateY(1px)
}
button:disabled{
  opacity:.45;
  cursor:default;
  transform:none
}
button.secondary{
  background:transparent;
  color:var(--ink);
  border-color:var(--accent)
}
input,select,textarea{
  max-width:100%;
  border:1px solid var(--accent);
  border-radius:6px;
  padding:.7rem;
  background:var(--paper)
}
textarea{
  resize:vertical;
  min-height:140px
}
select,summary{
  cursor:pointer
}
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:4px
}
footer{
  padding:1.5rem 0;
  margin-top:2rem;
  border-top:1px solid var(--accent);
  font-size:.8rem
}
.eyebrow{
  font-size:11px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--accent)
}
.lead{
  font-size:1.12rem;
  line-height:1.7
}
.hint{
  font-size:.85rem
}
.feedback{
  min-height:3.4em;
  font-size:.85rem;
  line-height:1.5
}
[hidden]{
  display:none!important
}
.skip{
  position:absolute;
  top:-100px;
  left:1rem;
  background:var(--paper);
  color:var(--ink);
  z-index:10;
  padding:.6rem
}
.skip:focus{
  top:.5rem
}
::-webkit-scrollbar{
  width:12px;
  height:12px
}
::-webkit-scrollbar-track{
  background:var(--wash)
}
::-webkit-scrollbar-thumb{
  background:var(--accent);
  border:3px solid var(--wash);
  border-radius:8px
}
::-webkit-scrollbar-thumb:hover{
  background:var(--ink)
}
::-webkit-scrollbar-thumb:active{
  background:var(--ink)
}
@media(forced-colors:active){
  *{
  scrollbar-color:auto
}

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

}
@media(max-width:650px){
  body{
  padding:0 20px
}
footer{
  margin-top:1rem
}
.lead{
  font-size:1rem
}

}


.orbit-nav{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:2rem 0;
  border-bottom:1px solid var(--wash);
  font:12px Consolas,monospace;
  letter-spacing:.12em
}
.orbit-nav a{
  text-decoration:none
}
.orbit-opening{
  max-width:790px;
  margin:3rem 0
}
.orbit-opening h1{
  font:500 clamp(3rem,6vw,5.5rem)/1.04 'Trebuchet MS',sans-serif;
  letter-spacing:-.045em;
  margin:1.2rem 0
}
.orbit-opening .lead{
  max-width:650px;
  color:var(--accent)
}
.orbit-system{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:2rem;
  align-items:center
}
.orbit-map{
  position:relative;
  aspect-ratio:1;
  max-width:450px
}
.orbital,.sun,.planet{
  position:absolute;
  display:block;
  border-radius:50%;
  transform:translate(-50%,-50%);
  top:50%;
  left:50%
}
.orbital{
  border:1px solid var(--accent);
  opacity:.35
}
.o-one{
  width:28%;
  height:28%
}
.o-two{
  width:49%;
  height:49%
}
.o-three{
  width:72%;
  height:72%
}
.o-four{
  width:96%;
  height:96%
}
.sun{
  width:40px;
  height:40px;
  background:#edc77e
}
.planet{
  width:13px;
  height:13px;
  background:#a4b3bc
}
.p-one{
  top:37%;
  left:45%
}
.p-two{
  top:65%;
  left:69%;
  background:#d7af74;
  width:19px;
  height:19px
}
.p-three{
  top:20%;
  left:70%;
  background:#81b9ce;
  width:20px;
  height:20px
}
.p-four{
  top:78%;
  left:11%;
  background:#c27b68;
  width:16px;
  height:16px
}
.planet-sheet{
  background:var(--wash);
  border-radius:20px;
  padding:2rem
}
.planet-picks{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:2rem
}
.planet-picks button{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--accent);
  padding:.6rem .7rem;
  border-radius:30px;
  font-size:.85rem
}
.planet-picks button[aria-pressed=true]{
  background:var(--accent);
  color:var(--paper)
}
.planet-sheet h2{
  font-size:2.5rem;
  margin:.8rem 0
}
.planet-sheet>p:not(.eyebrow){
  min-height:6em
}
.planet-sheet dl{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  border-top:1px solid var(--accent);
  padding-top:1rem
}
.planet-sheet dt{
  font-size:.8rem;
  color:var(--accent)
}
.planet-sheet dd{
  margin:.5rem 0;
  font-weight:700
}
.orbit-note{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:2rem;
  margin:3rem 0
}
@media(max-width:700px){
  .orbit-system,.orbit-note{
  grid-template-columns:1fr
}
.orbit-map{
  width:100%;
  max-width:330px;
  justify-self:center
}
.planet-sheet{
  padding:1.3rem
}
.orbit-note{
  gap:0
}
.orbit-nav{
  font-size:10px
}
.planet-sheet>p:not(.eyebrow){
  min-height:0
}

}