@font-face{font-family:Editorial;src:url("/explorations/typography/fonts/PPEditorialOld-Ultralight.woff2")}
@font-face{font-family:Right;src:url("/explorations/typography/fonts/PPRightGroteskText-Regular.woff2")}
*{box-sizing:border-box}
html{scrollbar-color:#cbd2c7 #202220}
body{margin:0;padding:35px 40px 28px;background:#202220;color:#eaf0e6;font:15px/1.4 Right,Arial,sans-serif}
::selection{background:#e3f959;color:#202220}
:focus-visible{outline:2px solid #dafa43;outline-offset:4px}
header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eaf0e645;padding-bottom:18px}
header a.wordmark{font:34px/1 Editorial,serif;color:inherit;text-decoration:none}
header .aux{font:12px/1.4 Right,Arial,sans-serif;color:#c9d1c3;margin:0;display:flex;gap:18px;align-items:center}
header .aux a{color:inherit}
main{max-width:1800px;margin:auto}
.intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(18rem,0.8fr);gap:40px;padding:44px 0 36px;align-items:end}
h1{font:clamp(52px,6.4vw,100px)/.94 Editorial,serif;letter-spacing:-.03em;font-weight:normal;margin:0;max-width:14ch}
.intro .lede{margin:0;max-width:62ch;color:#c9d1c3}
.intro .lede p{margin:0 0 1em}
.intro .lede p:last-child{margin-bottom:0}
.browse{display:flex;align-items:end;gap:24px;padding:18px 0 20px;border-block:1px solid #eaf0e645}
.browse label{display:grid;gap:8px;font-size:12px;flex:1}
.browse input,.browse select{font:15px/1.4 Right,Arial,sans-serif;color:inherit;background:#202220;border:0;border-bottom:1px solid #c9d1c380;border-radius:0;padding:8px 0;width:100%;min-height:38px;color-scheme:dark}
.browse input::placeholder{color:#bfc6ba;opacity:1}
.browse select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#c9d1c3 50%),linear-gradient(135deg,#c9d1c3 50%,transparent 50%);background-position:calc(100% - 12px) calc(50% + 3px),calc(100% - 6px) calc(50% + 3px);background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:22px}
.browse output{font-size:12px;color:#c9d1c3;white-space:nowrap;padding-bottom:10px;min-width:78px;text-align:right;font-variant-numeric:tabular-nums}
.desk-browse{flex-wrap:wrap;align-items:end}
.desk-browse .narrow{flex:0 1 12.5rem}
.batch{grid-column:1/-1;font:clamp(28px,3vw,44px)/1 Editorial,serif;letter-spacing:-.02em;font-weight:normal;margin:36px 0 0;padding-top:8px}
.worlds .batch:first-child{margin-top:4px}
.provenance{color:#edf2e8;margin-bottom:8px}
.worlds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px;padding:28px 0 10px}
.world{display:block;color:inherit;text-decoration:none}
.preview{aspect-ratio:1.44;overflow:hidden;background:#354035;position:relative}
.preview img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.world:hover img{transform:scale(1.025)}
.preview-name{font:clamp(36px,5vw,76px)/1 Editorial,serif;padding:32px;display:block;max-width:90%}
.world-title{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid #eaf0e650;padding:15px 0 12px;gap:15px}
.world-title h2{font:30px/1.05 Editorial,serif;letter-spacing:-.02em;font-weight:normal;margin:0;text-wrap:balance}
.world-title>span{font-size:24px;line-height:1}
.description{display:block;line-height:1.5;font-size:12px;margin-top:12px;color:#c9d1c3}
.description p{margin:0}
.description .gesture{color:#edf2e8;margin-top:8px}
.recorded{color:#e3f959;margin-top:8px}
.empty{padding:70px 0;font:26px/1.3 Editorial,serif}
footer{margin-top:65px;padding-top:20px;border-top:1px solid #eaf0e645;display:flex;justify-content:space-between;gap:24px;font-size:12px;color:#c9d1c3}
footer p{margin:0}
footer a{color:inherit}
[hidden]{display:none!important}

body.viewer{padding:0;height:100dvh;overflow:hidden;display:grid;grid-template-rows:auto 1fr;grid-template-columns:1fr minmax(280px,22rem)}
body.viewer header{grid-column:1/-1;padding:14px 22px;align-items:center}
body.viewer header .study-name{font:22px/1 Editorial,serif}
.stage{min-width:0;min-height:0;background:#111311}
.stage iframe{width:100%;height:100%;border:0;background:#fff}
.ballot{border-left:1px solid #eaf0e645;padding:18px 20px 28px;overflow:auto;min-height:0}
.ballot h2{font:28px/1.05 Editorial,serif;font-weight:normal;margin:0 0 12px;letter-spacing:-.02em}
.ballot p.hint{margin:0 0 16px;font-size:13px;color:#c9d1c3}
.field{display:grid;gap:7px;margin:0 0 16px;font-size:12px}
.field input[type=text],.field textarea,.field input[type=password],.field input[type=search]{font:15px/1.4 Right,Arial,sans-serif;color:inherit;background:#202220;border:0;border-bottom:1px solid #c9d1c380;border-radius:0;padding:8px 0;width:100%;color-scheme:dark}
.field input[aria-invalid=true]{border-bottom-color:#ffb4a8}
.field textarea{min-height:7rem;resize:vertical;border:1px solid #c9d1c345;padding:10px}
.scores{display:flex;flex-wrap:wrap;gap:6px}
.scores button,.sure{appearance:none;font:13px/1 Right,Arial,sans-serif;color:inherit;background:transparent;border:1px solid #c9d1c355;min-width:2rem;height:2rem;padding:0 8px;cursor:pointer}
.scores button[aria-pressed=true],.sure[aria-pressed=true]{background:#e3f959;color:#202220;border-color:#e3f959}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:0 0 16px}
.check input{margin-top:3px;accent-color:#dafa43}
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.name-echo{margin:0;font-size:12px;color:#c9d1c3}
.name-echo.need{color:#ffb4a8}
.actions button[type=submit],.actions button.secondary{appearance:none;font:14px/1 Right,Arial,sans-serif;padding:10px 14px;border:0;cursor:pointer}
.actions button[type=submit]{background:#e3f959;color:#202220}
.actions button.secondary,.inspect-toggle{background:transparent;color:inherit;border:1px solid #c9d1c355;padding:8px 12px;cursor:pointer;font:12px/1 Right,Arial,sans-serif}
.status{font-size:13px;color:#c9d1c3;margin:12px 0 0}
.status.error{color:#ffb4a8}
.reveal{margin-top:18px;padding-top:16px;border-top:1px solid #eaf0e645}
.reveal p{margin:0;font:22px/1.2 Editorial,serif}
.next-study{display:inline-block;margin-top:16px;background:#e3f959;color:#202220;text-decoration:none;font:14px/1 Right,Arial,sans-serif;padding:10px 14px}
.desk-note{font:13px/1.4 Right,Arial,sans-serif!important;color:#c9d1c3;margin:0 0 10px!important}
.inspect{position:fixed;inset:auto 22px 22px auto;width:min(28rem,calc(100vw - 44px));max-height:min(70dvh,520px);overflow:auto;background:#2a2c2a;color:#eaf0e6;padding:18px 18px 22px;box-shadow:0 18px 40px #0008;z-index:4}
.inspect h2{font:24px/1 Editorial,serif;font-weight:normal;margin:0 0 8px}
.inspect p{margin:0 0 12px;font-size:13px;color:#c9d1c3}
.swatches{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.swatch{display:grid;gap:4px;font-size:11px;min-width:5.5rem}
.swatch button{appearance:none;border:0;width:100%;height:28px;cursor:pointer;padding:0}
.cut-list{display:grid;gap:8px;margin:0;padding:0;list-style:none;font-size:13px}
.cut-list span{display:block;color:#c9d1c3;font-size:12px}

body.review{max-width:1400px;margin:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;vertical-align:top;padding:10px 8px;border-bottom:1px solid #eaf0e628}
th{font-weight:400;color:#c9d1c3;font-size:12px}
.note{max-width:62ch;color:#c9d1c3}
.scatter{width:100%;max-width:420px;height:280px;border:1px solid #eaf0e645;margin:20px 0}
.quotes{white-space:pre-wrap}

@media(min-width:1700px){.world-title h2{font-size:36px}}
@media(max-width:1050px){
  .worlds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .intro{grid-template-columns:1fr;align-items:start}
  body.viewer{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}
  .ballot{border-left:0;border-top:1px solid #eaf0e645;max-height:46dvh}
}
@media(max-width:750px){
  body{padding:22px}
  .intro h1{font-size:clamp(48px,9vw,70px)}
  .browse{flex-wrap:wrap}
  .desk-browse .narrow{flex:1 1 10rem}
  .worlds{grid-template-columns:1fr}
  footer{flex-direction:column}
  body.viewer header{padding:12px 14px}
}
@media(prefers-reduced-motion:reduce){.preview img{transition:none}}