@font-face{
  font-family:'Sweet Sans Pro'; src:url('../fonts/SweetSansPro-Light.otf') format('opentype');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Sweet Sans Pro'; src:url('../fonts/SweetSansPro-LightItalic.otf') format('opentype');
  font-weight:300; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Sweet Sans Pro'; src:url('../fonts/SweetSansPro-Regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Sweet Sans Pro'; src:url('../fonts/SweetSansPro-Medium.otf') format('opentype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Sweet Sans Pro'; src:url('../fonts/SweetSansPro-Bold.otf') format('opentype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Sweet Sans Pro'; src:url('../fonts/SweetSansPro-Heavy.otf') format('opentype');
  font-weight:800; font-style:normal; font-display:swap;
}
:root{
  --cream:#F5EFE2;
  --paper:#FBF7EE;
  --ink:#49536D;
  --gold:#B78D4E;
  --gold-soft: rgba(183,141,78,.35);
  --font-display:'Sweet Sans Pro', Arial, sans-serif;
  --font-body:'Sweet Sans Pro', Arial, sans-serif;
  color-scheme: light;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--cream); color:var(--ink); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column;
}
a{color:inherit;}
img{max-width:100%;}

header{
  position:sticky; top:0; z-index:10;
  background:rgba(245,239,226,.92); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--gold-soft);
}
.nav{
  max-width:1180px; margin-inline:auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.nav img{height:30px; width:auto; display:block;}
.back{
  font-family:var(--font-body); font-weight:500; font-size:.88rem; letter-spacing:.08em;
  text-decoration:none; color:var(--ink);
}
.back:hover{color:var(--gold);}

main{
  flex:1; width:100%; max-width:900px; margin-inline:auto;
  padding:36px 16px 48px; display:flex; flex-direction:column; align-items:center; gap:20px;
}
.head{text-align:center;}
.eyebrow{
  font-family:var(--font-body); font-weight:500; font-size:.78rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); margin:0;
}
h1{
  margin:8px 0 0; font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.005em; line-height:1.04; font-size:clamp(2rem,5vw,3rem);
}
h1 em{font-style:normal; color:var(--gold);}

.tabs[hidden], .langs[hidden]{display:none;}
.tabs{display:flex; border:1px solid var(--ink); border-radius:10px; overflow:hidden;}
.tabs a{
  font-family:var(--font-body); font-weight:500; font-size:.9rem; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; padding:10px 24px; color:var(--ink);
  transition:background .18s ease, color .18s ease;
}
.tabs a + a{border-left:1px solid var(--ink);}
.tabs a:hover{background:rgba(73,83,109,.08);}
.tabs a[aria-current="page"]{background:var(--ink); color:var(--cream);}

.langs{display:flex; align-items:center; gap:10px;}
.langs a{
  display:block; width:32px; height:22px; border-radius:4px; overflow:hidden;
  text-decoration:none; border:1px solid var(--gold-soft);
  filter:grayscale(.55); opacity:.7; transition:filter .18s ease, opacity .18s ease, border-color .18s ease;
}
.langs a svg{display:block; width:100%; height:100%;}
.langs a:hover{filter:grayscale(0); opacity:1;}
.langs a[aria-current="page"]{filter:grayscale(0); opacity:1; border-color:var(--ink);}

.viewer{
  width:100%; max-width:840px; height:calc(100vh - 60px - 180px); min-height:480px;
  border:1px solid var(--gold-soft); background:var(--paper);
  box-shadow:0 10px 30px rgba(73,83,109,.1); border-radius:10px; overflow:hidden;
}
.viewer iframe{display:block; width:100%; height:100%; border:0;}
.loading{display:flex; align-items:center; justify-content:center; height:100%; color:var(--ink); font-size:.95rem; opacity:.7;}

.actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-body); font-weight:700; font-size:.88rem; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; padding:12px 22px; border-radius:10px;
  border:1px solid var(--ink); transition:background .18s ease, color .18s ease;
}
.btn-ink{background:var(--ink); color:var(--cream);}
.btn-ink:hover{background:#39425a;}
.btn-line{background:transparent; color:var(--ink);}
.btn-line:hover{background:var(--ink); color:var(--cream);}

footer{
  text-align:center; font-size:.78rem; color:var(--ink); opacity:.7;
  padding:18px 16px 26px; border-top:1px solid var(--gold-soft);
}