/* transoperability.com v2 preview — The Expedition. Same void palette and type as v0.1. */
:root{
  --void:#050506; --ink:#E9E4DA; --dim:#8C877E; --faint:#4A4741; --rule:#24221F; --panel:#0D0D0F;
  --light:#FFF4E2; --warm:#E8C998; --refuted:#D9826B; --ok:#B9C9A4; --open:#9FB6D4;
  --serif:"Newsreader","Noto Serif KR",Georgia,serif; --sans:"IBM Plex Sans","Noto Sans KR",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--void);color:var(--ink);scroll-behavior:smooth}
body{margin:0;font:400 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased;background:var(--void)}
:lang(ko){word-break:keep-all}
h1,h2,h3{font-family:var(--serif);font-weight:300;margin:0;text-wrap:balance}
a{color:var(--ink);text-decoration-color:var(--faint);text-underline-offset:3px}
a:hover{text-decoration-color:var(--warm)}
button{font:inherit;color:inherit;cursor:pointer}
.wrap{max-width:980px;margin:0 auto;padding-inline:24px}
.wrap.wide{max-width:1320px}
.mono{font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;color:var(--dim)}
.eyebrow{font:400 .72rem var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin:0}
.btn{display:inline-block;padding:.75em 1.25em;border:1px solid var(--warm);color:var(--light);text-decoration:none;font-size:.95rem}
.btn:hover{background:var(--warm);color:var(--void)}

/* header */
.top{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding:calc(14px + env(safe-area-inset-top,0px)) 24px 14px;
  background:color-mix(in srgb,var(--void) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.mark{font:400 .72rem var(--mono);letter-spacing:.24em;text-decoration:none;color:var(--ink)}
.top nav{display:flex;gap:22px;flex:1}
.top nav a,.lang a{font:400 .74rem var(--mono);letter-spacing:.1em;text-decoration:none;color:var(--dim)}
.top nav a[aria-current],.lang a[aria-current],.top nav a:hover{color:var(--ink)}
.lang{display:flex;flex-wrap:wrap;gap:12px;margin:0}

/* hero */
.hero{position:relative;overflow:hidden;padding-block:clamp(96px,16vh,180px) clamp(64px,12vh,140px)}
.glow{position:absolute;left:50%;top:44%;width:min(120vmax,2400px);height:min(120vmax,2400px);transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(255,244,226,.13) 0,rgba(232,201,152,.05) 18%,transparent 46%);animation:breathe 9s ease-in-out infinite}
@keyframes breathe{50%{opacity:.6;transform:translate(-50%,-50%) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.glow{animation:none}html{scroll-behavior:auto}}
.hero .wrap{position:relative}
.hero h1{font-size:clamp(3rem,9vw,7.4rem);line-height:.98;letter-spacing:-.02em;margin:.35em 0 .5em;color:var(--light)}
.ladder{display:flex;flex-wrap:wrap;gap:.3em .7em;align-items:baseline;font:300 clamp(1.1rem,2.2vw,1.6rem) var(--serif);color:var(--warm);margin:0 0 2.2em}
.ladder .arr{color:var(--faint)}
.ladder span:last-child{color:var(--light)}
.intro{font:400 clamp(1.2rem,2vw,1.5rem)/1.4 var(--serif);margin:0 0 .6em}
.crew{color:var(--dim);margin:0 0 .4em}
.ctas{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:2.4em}

/* route */
.route{padding-block:0 clamp(64px,12vh,140px)}
.route>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--faint);margin-top:14px}
.route a{display:flex;flex-direction:column;gap:4px;padding:20px 20px 0 0;text-decoration:none}
.route b{font:400 .74rem var(--mono);color:var(--warm);letter-spacing:.2em}
.route span{font:400 1.5rem var(--serif)}
.route small{color:var(--dim);font-size:.9rem}

/* rooms */
.room{padding-block:clamp(72px,12vh,140px);border-top:1px solid var(--rule)}
.room h2{font-size:clamp(2.2rem,5vw,4rem);line-height:1.05;margin:.3em 0 .4em;color:var(--light)}
.lead{font-size:1.1rem;color:var(--ink);max-width:56ch;margin:0 0 2.4em}

.premises{display:grid;gap:16px}
.premise{border:1px solid var(--rule);background:var(--panel);padding:24px 26px}
.premise h3{font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.3;margin:.3em 0 .6em}
.premise.next{opacity:.55}
.premise.live{border-color:var(--faint)}
.premise.live.is-broken{border-color:var(--warm)}
.premise.live.is-broken h3{text-decoration:line-through;text-decoration-color:var(--warm);text-decoration-thickness:1px}
.tag{font:400 .68rem var(--mono);letter-spacing:.18em;color:var(--ok);margin:0}
.tag.refuted{color:var(--refuted)}
.toggle{display:inline-flex;border:1px solid var(--faint);margin:0 0 1.2em}
.toggle button{background:none;border:0;padding:.5em 1.1em;font-size:.9rem;color:var(--dim)}
.toggle button[aria-pressed=true]{background:var(--ink);color:var(--void)}
.qs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px}
.qt{font:300 1.35rem/1.35 var(--serif);margin:.2em 0}
.q.new .qt{color:var(--warm)}
.diff{color:var(--dim);font-size:.95rem}

.steps{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-wrap:wrap;gap:8px}
.steps button{background:none;border:1px solid var(--faint);padding:.55em 1em;font-size:.88rem}
.steps button b{font:400 .75rem var(--mono);color:var(--warm);margin-right:.4em}
.steps button.on{border-color:var(--warm);color:var(--light)}
.steps button:disabled{opacity:.35;cursor:default}
.console{min-height:220px;border:1px solid var(--rule);background:var(--panel);padding:22px 26px}
.out-h{font:300 1.3rem var(--serif);margin:0 0 1em;color:var(--light)}
.agents{list-style:none;padding:0;margin:.4em 0 1.4em}
.agents li{padding:6px 0;border-top:1px solid var(--rule);font-size:.95rem}
.v{display:inline-block;min-width:4.4em;font:500 .72rem var(--mono);letter-spacing:.14em;padding:.2em .5em;margin-right:.6em;text-align:center}
.v.ok{color:var(--void);background:var(--ok)}
.v.bad{color:var(--void);background:var(--refuted)}
.big{font-size:1.05rem}
.big b{font:300 1.6rem var(--serif);color:var(--light)}
.trace{font:400 .86rem var(--mono);color:var(--warm);padding-left:1.4em;margin:0 0 1.2em}
.open{color:var(--open)}
.ghost{background:none;border:1px solid var(--open);color:var(--open);padding:.45em 1em;font-size:.88rem}
.note{font-size:.88rem;color:var(--dim);max-width:72ch;margin-top:18px}
.after{margin-top:22px}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.filters button{background:none;border:1px solid var(--faint);padding:.35em .9em;font:400 .72rem var(--mono);letter-spacing:.12em;color:var(--dim)}
.filters button[aria-pressed=true]{border-color:var(--ink);color:var(--ink)}
.scroll{overflow-x:auto}
.vault{border-collapse:collapse;width:100%;min-width:980px;font-size:.92rem}
.vault th{text-align:left;font:400 .7rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);padding:10px 14px 10px 0;border-bottom:1px solid var(--faint)}
.vault td{vertical-align:top;padding:16px 14px 16px 0;border-bottom:1px solid var(--rule);color:var(--dim)}
.vault td.claim{font:300 1.12rem/1.35 var(--serif);color:var(--ink);min-width:16em}
.vault td.mono{font-size:.72rem}
.st{display:inline-block;font:500 .64rem var(--mono);letter-spacing:.12em;padding:.2em .45em;margin:0 4px 4px 0;border:1px solid}
.st.proved{color:var(--ok)} .st.known{color:var(--ink)} .st.refuted{color:var(--refuted)} .st.retracted{color:var(--warm)} .st.open{color:var(--open)}
.hold{font:400 .7rem var(--mono);color:var(--refuted);margin:.6em 0 0}
.crew-h{margin-top:56px}
.crewlist{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:14px 0 0}
.crewlist div{border-top:1px solid var(--faint);padding-top:10px}
.crewlist dt{font:400 1.05rem var(--serif)} .crewlist dd{margin:0;color:var(--dim);font-size:.88rem}

footer{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;padding-block:40px calc(40px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--rule);color:var(--dim);font-size:.85rem}
footer p{margin:0}
.draft{color:var(--refuted);font-family:var(--mono)}

@media (min-width:2200px){body{font-size:19px}.wrap{max-width:1180px}.wrap.wide{max-width:1680px}}
@media (max-width:760px){
  .top nav{order:3;flex-basis:100%;overflow-x:auto}
  .route>div,.qs{grid-template-columns:1fr}
  .route a{padding-bottom:16px;border-bottom:1px solid var(--rule)}
  .crewlist{grid-template-columns:1fr 1fr}
  .console,.premise{padding:18px}
}