:root {
  font-family:Inter,Arial,sans-serif;
  color:#142d45;
  background:#fff7e9;
  --navy:#142d45;
  --coral:#ce594c;
  --sun:#f5bd71;
  --muted:#687782;
  --line:#dcdace
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input,select {
  font:inherit
}
button {
  cursor:pointer;
  border:1px solid #aeb7ba;
  border-radius:7px;
  padding:12px 17px;
  color:inherit;
  background:transparent;
  font-weight:600
}
button:hover {
  background:#142d450b
}
button:disabled {
  opacity:.45;
  cursor:default
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #d47b32;
  outline-offset:4px
}
a {
  color:inherit
}
.primary {
  background:var(--coral);
  border-color:var(--coral);
  color:#fff
}
.primary:hover {
  background:#b94b40
}
.sun {
  background:var(--sun);
  border-color:var(--sun);
  color:var(--navy)
}
.quiet {
  border-color:transparent
}
.eyebrow {
  font-size:10px;
  letter-spacing:2.3px;
  font-weight:700
}
header {
  max-width:1360px;
  margin:auto;
  padding:27px 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid var(--line)
}
.brand {
  display:flex;
  align-items:center;
  gap:14px;
  font:19px Georgia,serif;
  letter-spacing:2px;
  text-decoration:none
}
.brand-icon {
  color:var(--coral);
  font-size:48px;
  line-height:1
}
.brand small {
  display:block;
  font:8px Arial,sans-serif;
  letter-spacing:2.8px;
  margin-top:8px
}
.header-actions {
  display:flex;
  align-items:center;
  gap:25px
}
.header-actions button {
  font-size:12px
}
main {
  max-width:1240px;
  margin:auto;
  padding:42px 5%;
  min-height:calc(100vh - 190px)
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2 {
  font-family:Georgia,serif;
  font-weight:400
}
h1 {
  font-size:clamp(52px,6vw,84px);
  line-height:1.02;
  letter-spacing:-2.6px;
  margin:20px 0 24px
}
h2 {
  font-size:30px
}
h3 {
  font-size:15px
}
.lead {
  font-size:17px;
  line-height:1.7;
  color:var(--muted)
}
.hero {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:30px
}
.hero em {
  font-weight:400;
  color:var(--coral)
}
.hero-art {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:340px;
  border-radius:50%;
  background:repeating-radial-gradient(ellipse at center,transparent 0 29px,#ce594c17 30px 31px,transparent 32px 44px)
}
.hero-art:after {
  content:'25° N  /  A LITTLE FURTHER FROM ORDINARY';
  position:absolute;
  bottom:8px;
  font-size:8px;
  letter-spacing:2px
}
.hero-art img {
  width:150px;
  border-radius:10px;
  box-shadow:0 18px 35px #142d4528;
  transform:rotate(12deg) translateX(28px)
}
.hero-art img:first-child {
  position:absolute;
  transform:rotate(-15deg) translateX(-65px);
  width:137px
}
.lobby-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:35px
}
.panel {
  padding:28px;
  background:#fffcf5;
  border:1px solid var(--line);
  border-radius:12px
}
.panel h2 {
  margin:15px 0
}
.panel p {
  font-size:14px;
  line-height:1.7;
  color:var(--muted)
}
.form-row {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:end
}
.field {
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
  min-width:110px
}
label {
  font-size:11px;
  font-weight:600;
  letter-spacing:.6px
}
input,select {
  padding:12px;
  border:1px solid #bfc4c3;
  border-radius:6px;
  background:#fff;
  color:var(--navy);
  width:100%;
  min-width:0
}
input[type=checkbox] {
  width:18px;
  height:18px;
  accent-color:var(--coral)
}
.check {
  display:flex;
  gap:9px;
  align-items:center;
  padding:10px 0;
  min-height:42px
}
.divider {
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-top:20px
}
.actions,.bar {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center
}
.bar {
  justify-content:space-between
}
.table-top {
  margin-bottom:24px;
  align-items:start
}
.table-top h1 {
  font-size:40px;
  letter-spacing:-1px;
  margin:9px 0
}
.muted {
  font-size:12px;
  line-height:1.7;
  color:var(--muted)
}
.banner {
  background:#f7e4c5;
  border:1px solid #e8c891;
  padding:15px 20px;
  border-radius:9px;
  font-size:14px;
  line-height:1.7;
  margin:20px 0
}
.felt {
  background:radial-gradient(ellipse at 50% 40%,#245c72,#142d45 80%);
  color:#fff6e6;
  padding:30px 34px;
  border:7px solid #e5c7a1;
  border-radius:25px;
  box-shadow:0 12px 30px #142d4512
}
.felt h2 {
  font-size:19px;
  font-family:Arial,sans-serif;
  margin:0
}
.felt .muted {
  color:#bed2d6
}
.zone {
  padding:15px 0
}
.zone+.zone {
  border-top:1px solid #ffffff26;
  margin-top:15px;
  padding-top:22px
}
.zone-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:17px
}
.cards {
  display:flex;
  gap:9px;
  justify-content:center;
  max-width:520px;
  margin:0 auto
}
.card-wrap {
  flex:0 1 88px;
  min-width:0;
  text-align:center
}
.card {
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  border-radius:6px;
  position:relative
}
.card img {
  display:block;
  width:100%;
  border-radius:6px;
  aspect-ratio:500/726;
  box-shadow:0 5px 10px #0004
}
.card:disabled {
  opacity:1
}
.card[aria-pressed=true] {
  outline:3px solid var(--sun);
  outline-offset:4px;
  transform:translateY(-7px)
}
.card:not(:disabled):hover {
  transform:translateY(-5px);
  background:none
}
.card-tag {
  display:block;
  font-size:9px;
  color:var(--sun);
  margin-top:8px;
  min-height:12px
}
.mini .card-wrap {
  flex-basis:61px
}
.controls {
  margin-top:22px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:end
}
.controls .field {
  min-width:130px
}
.felt select {
  background:#fff7e9
}
.felt .sun:hover {
  background:#ffd296
}
.felt button:not(.card):not(.sun) {
  color:#fff6e6;
  border-color:#afc2c7
}
.felt button:not(.card):not(.sun):hover {
  background:#ffffff14
}
.recommendation {
  font-size:13px;
  line-height:1.7;
  background:#ffffff0b;
  border:1px solid #ffffff20;
  border-radius:9px;
  padding:14px 16px;
  margin-top:19px
}
.recommendation p {
  margin:0
}
.metrics {
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  margin-top:8px;
  color:#c4d5d7;
  font-size:12px
}
.metrics strong {
  color:var(--sun)
}
.results {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:17px;
  margin:23px 0
}
.result {
  background:#fffcf5;
  border:1px solid var(--line);
  border-top:3px solid var(--coral);
  border-radius:10px;
  padding:23px
}
.result h2 {
  font:20px Georgia,serif;
  margin:8px 0
}
.net {
  font:35px Georgia,serif;
  margin:12px 0
}
.result p {
  font-size:12px;
  line-height:1.8;
  margin-bottom:0
}
.table-scroll {
  overflow-x:auto;
  margin-top:15px
}
table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:12px
}
caption {
  text-align:left;
  font-weight:600;
  margin:10px 0
}
th {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted)
}
th,td {
  padding:13px 10px;
  border-bottom:1px solid var(--line)
}
th:first-child,td:first-child {
  padding-left:0
}
details {
  margin-top:22px
}
summary {
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  padding:9px 0
}
.session-ledger {
  margin-top:30px
}
.end-title {
  max-width:650px;
  margin:35px 0
}
.end-title h1 {
  font-size:56px
}
footer {
  max-width:1240px;
  margin:auto;
  border-top:1px solid var(--line);
  padding:25px 5%;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font-size:11px
}
#message {
  position:fixed;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  max-width:92%;
  background:var(--navy);
  color:white;
  padding:13px 21px;
  border-radius:8px;
  font-size:14px;
  line-height:1.6;
  z-index:5;
  box-shadow:0 5px 25px #0003
}
#message:empty {
  display:none
}
dialog {
  max-width:790px;
  width:calc(100% - 28px);
  max-height:88vh;
  border:0;
  border-radius:15px;
  background:#fffcf5;
  color:var(--navy);
  padding:30px 38px
}
dialog::backdrop {
  background:#142d45b8;
  backdrop-filter:blur(3px)
}
dialog h2 {
  font-size:40px;
  margin:24px 0
}
dialog h3 {
  margin-top:25px
}
dialog p,dialog li {
  font-size:14px;
  line-height:1.8
}
dialog li {
  margin:10px 0
}
dialog button {
  font-size:12px
}
dialog th,dialog td {
  font-size:12px
}
@media(max-width:720px) {
  header {
    padding:19px 4%
  }
  .brand {
    font-size:14px;
    letter-spacing:1px;
    gap:8px
  }
  .brand-icon {
    font-size:35px
  }
  .brand small {
    font-size:6px;
    letter-spacing:1.7px
  }
  .header-actions .eyebrow {
    display:none
  }
  .header-actions button {
    font-size:11px;
    padding:10px
  }
  .hero {
    grid-template-columns:1fr;
    gap:12px
  }
  .hero h1 {
    font-size:59px
  }
  .hero-art {
    min-height:245px
  }
  .hero-art img {
    width:108px
  }
  .hero-art img:first-child {
    width:102px;
    transform:rotate(-15deg) translateX(-48px)
  }
  .hero-art:after {
    font-size:7px
  }
  .lobby-grid {
    grid-template-columns:1fr;
    margin-top:25px;
    gap:15px
  }
  main {
    padding:27px 4%
  }
  .panel {
    padding:23px
  }
  .table-top h1 {
    font-size:30px
  }
  .table-top .actions button {
    font-size:11px;
    padding:9px
  }
  .felt {
    padding:22px 13px;
    border-width:4px;
    border-radius:17px
  }
  .felt h2 {
    font-size:15px
  }
  .cards {
    gap:6px
  }
  .card-wrap {
    flex-basis:67px
  }
  .mini .card-wrap {
    flex-basis:45px
  }
  .controls {
    grid-template-columns:1fr
  }
  .controls .actions {
    justify-content:space-between
  }
  .controls button {
    font-size:12px;
    padding:12px
  }
  .metrics {
    gap:10px
  }
  .recommendation {
    padding:12px
  }
  .table-scroll table {
    min-width:560px
  }
  .result {
    padding:20px
  }
  .end-title h1 {
    font-size:45px
  }
  footer {
    display:block;
    line-height:1.8
  }
  footer span {
    display:block
  }
  dialog {
    padding:24px
  }
  dialog h2 {
    font-size:32px
  }
  dialog .table-scroll table {
    min-width:0
  }
  .zone-heading {
    align-items:start
  }

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

}