* {  box-sizing: border-box;  margin: 0;  padding: 0;}
.topbar {  position: fixed;  top: 0;  left: 0;  width: 100%;  background-color: navy;  color: #fff;  display: flex;  justify-content: center;  padding: 10px 0;  z-index: 1000;}
.topbar a {  color: #fff;  margin: 0 15px;  text-decoration: none;  font-weight: bold;  transition: color 0.2s;}
.topbar a:hover {  color: #ffcc00;}
.spacer {  height: 62px; }
.section {  width: 95%;  margin: 15px auto;}
.iframe-title {  margin-bottom: 8px;  font-size: 1.2em;  color: #333;}
.external-iframe {  width: 100%;  height: 900px;   border: 1px solid #ccc;  border-radius: 4px;  display: block;}
#wiki-summary {  max-width: 90%;  display: flex;  gap: 1em;  margin-top: 1em;  border-left: 1px solid #3366cc;  padding-left: 1em;}
#wiki-summary img {  max-width: 345px;  height: auto;  border-radius: 4px;}
.wiki-text {  max-width: 70%;  flex: 1;}
a.read-more {  display: inline-block;  margin-top: 1em;  color: #3366cc;  text-decoration: none;}
a.read-more:hover {  text-decoration: underline;}
.message-box {  font-size: 1.5em;  padding: 20px;  margin: auto;  width: 95%;  background: #fff;  border-radius: 12px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);}
.language {  margin-top: 10px;  font-size: 0.9em;  color: #555;}
nav { background: #333; display: flex; flex-wrap: wrap; gap: .5em; padding: .5em; }
nav button {  background: #555; color: white; border: none;  padding: .5em 1em; border-radius: 4px; cursor: pointer;}
nav button:hover { background: #777; }
.iframe-container {  display: none; background: #fff;  padding: 1em; border-bottom: 1px solid #ccc;}
.iframe-container.active { display: block; }
iframe {  width: 98%; height: 600px;  border: 1px solid #ccc; margin-bottom: 1em;}
a.reset-link {  display: inline-block;  margin-bottom: 1em;  color: #007acc;  text-decoration: none;}
a.reset-link:hover { text-decoration: underline; }
.notes-box {  margin-top: 1em;  background: #fefefe;}
textarea {  width: 400px;  height: 200px;  resize: both;   padding: 10px;  font-size: 16px;  border: 1px solid #ccc;  border-radius: 6px;  box-shadow: 0 2px 8px rgba(0,0,0,0.1);}
.notes-toolbar button {  background: #eee; border: 1px solid #ccc; margin-right: .3em;  padding: 0.3em 0.5em; cursor: pointer; font-weight: bold;}
.notes-toolbar button:hover {  background: #ddd;}
.notes-content {  width: 90%; height: 234px;  min-height: 150px;  border: 1px solid #ccc;  padding: 0.5em;  background: #eee;  margin-top: 0.5em;}
.export-btn {  margin-top: 0.7em;  display: inline-block;  background: #007acc; color: #fff;  padding: 0.4em 0.8em; border: none;  border-radius: 4px; cursor: pointer;}
.export-btn:hover {  background: #005fa3;}
footer {  position: fixed;  bottom: 0;  left: 0;  right: 0;  background: silver;  color: green;  display: flex;  justify-content: center;  gap: 1em;  padding: 0.5em 1em;  box-shadow: 0 -2px 5px rgba(0,0,0,0.3);}
footer a {  text-decoration: none;  color: navy;}
footer a:hover {  text-decoration: underline;}
a.open-modal { color: #007acc;  cursor: pointer;  text-decoration: underline;}
.modal-backdrop {  display: none;  position: fixed;  top: 0; left: 0;  width: 100vw;  height: 100vh;  background: rgba(0,0,0,0.5);  color: green;  justify-content: center;   align-items: center;  z-index: 100;}
.modal {  background: #fff;  border-radius: 8px;  padding: 1.5em;  max-width: 500px;  width: 90%;  box-shadow: 0 2px 10px rgba(0,0,0,0.3);  position: relative;}
.modal header {  font-size: 1.25em;  margin-bottom: 0.5em;  color: green;}
.modal .close-btn {  position: absolute;  top: 250px; right: 20px;  border: none;  font-size: 1.4em;  cursor: pointer;}
.embed-container {  margin: 1em 0;  padding: 1em;  border: 2px dotted #e3e3e3;}
.footer-box {  width: 99%;  margin: 0 auto;  overflow-y: auto;}
.footer_box {  width: 99%;  height: 250px !important;  display: block;  overflow-y: hidden;  background:#FFFFFF1A;  border: 1px dotted #e3e3e3;}