@font-face {
 font-family: "IyagiGGC";
 src: url("https://cdn.jsdelivr.net/gh/JuwanPark/IyagiGGC@latest/IyagiGGC.woff") format("woff");
 font-weight: normal;
 font-style: normal;
 font-display: swap;
}

:root {
 --bg: #0000aa;
 --fg: #ffffff;
 --accent: #55ffff;
 --accent2: #ffff55;
 --card-bg: #0000aa;
 --border: #ffffff;
 --heading: #ffff55;
 --muted: #9fdcff;
 --code: #55ffff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
 font-family: "IyagiGGC", "Courier New", "Lucida Console", monospace;
 background: var(--bg);
 color: var(--fg);
 line-height: 1.45;
 min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent2); text-decoration: none; }

.container {
 max-width: 980px;
 margin: 0 auto;
 padding: 2rem;
 background: #0000aa;
 color: #ffffff;
}

.lang-switch {
 position: absolute;
 top: 1rem;
 left: 1rem;
 display: inline-flex;
 gap: 0.5rem;
 align-items: center;
 font-size: 0.85rem;
 z-index: 2;
}

.lang-btn {
 padding: 0.2rem 0.5rem;
 border: 1px solid var(--border);
 color: var(--accent);
 background: #0000aa;
 font-family: inherit;
 font-size: inherit;
 cursor: pointer;
}

.lang-btn:hover,
.lang-btn:focus-visible {
 background: #000077;
 color: #ffff55;
 outline: none;
}

.lang-btn.is-active {
 color: #ffff55;
 background: #000077;
}

@media (max-width: 720px) {
 .lang-switch {
  position: static;
  justify-content: center;
  margin-bottom: 1rem;
 }
}

.support-float-btn {
 position: fixed;
 top: 1rem;
 right: 1rem;
 background: #0000aa;
 color: var(--accent2);
 border: 1px solid var(--border);
 border-radius: 0;
 height: 42px;
 display: inline-flex;
 align-items: center;
 padding: 0 1rem;
 font-size: 0.9rem;
 font-weight: 700;
 line-height: 1.1;
 text-decoration: none;
 box-shadow: 0 0 0 1px #000077;
 z-index: 1000;
}

.support-float-btn:hover {
 background: #000077;
 color: #ffff55;
 text-decoration: none;
}

@media (max-width: 640px) {
 .support-float-btn {
 right: 1rem;
 height: 38px;
 padding: 0 0.8rem;
 font-size: 0.8rem;
 }
}

header {
 text-align: center;
 padding: 4rem 2rem;
 border-bottom: 1px solid var(--border);
 position: relative;
 overflow: hidden;
}

header h1 {
 font-size: 3rem;
 margin-bottom: 0.5rem;
 color: var(--heading);
 letter-spacing: 0.04em;
}

header .tagline {
 font-size: 1.15rem;
 color: var(--muted);
}

.header-top-line {
 width: 100%;
 border: 0;
 border-top: 1px solid var(--border);
 margin: 0.35rem 0 1rem;
}

.hero-top-image {
 display: block;
 width: 100%;
 max-width: 440px;
 margin: 0 auto 1.25rem;
 border: 1px solid var(--border);
 image-rendering: pixelated;
}

.header-actions {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 0.75rem;
 flex-wrap: wrap;
 margin-top: 1rem;
}

.header-actions .btn {
 margin-top: 0;
 display: inline-flex;
 align-items: center;
 justify-content: center;
}

.hero-graphic {
 margin: 2rem auto;
 max-width: 500px;
}

.hero-badge {
 display: inline-block;
 background: var(--card-bg);
 border: 1px solid var(--border);
 border-radius: 0;
 padding: 0.75rem 1.25rem;
 font-weight: 700;
 color: var(--accent);
}

section {
 padding: 3rem 0;
 border-bottom: 1px solid var(--border);
}

section:last-child { border-bottom: none; }

section h2 {
 font-size: 1.75rem;
 margin-bottom: 1rem;
 color: var(--heading);
 letter-spacing: 0.03em;
}

section p { margin-bottom: 1rem; }

@keyframes iyagi-bounce {
 0% { transform: scale(1); box-shadow: 0 2px 8px rgba(24, 86, 201, 0.13); }
 35% { transform: scale(1.14, 0.9); }
 50% { transform: scale(0.96, 1.09); }
 65% { transform: scale(1.07, 0.96); }
 90% { transform: scale(0.995, 1.003); }
 100% { transform: scale(1); }
}

.iyagi-word-wrap {
 display: inline-block;
 position: relative;
}

.iyagi-word {
 display: inline-block;
 position: relative;
 background: linear-gradient(90deg, #1856c9 60%, #60caf7 100%);
 color: #ffffff;
 border-radius: 0.35em;
 padding: 0.07em 0.6em 0.13em 0.6em;
 font-weight: 900;
 font-size: 1.09em;
 box-shadow: 0 2px 8px rgba(24, 86, 201, 0.13);
 animation: iyagi-bounce 0.7s 1;
 transition: background 0.2s;
}

.iyagi-word-ref {
 font-size: 0.68em;
 line-height: 1;
 letter-spacing: 0.04em;
 position: absolute;
 top: -0.88em;
 right: 0.05em;
 font-weight: 600;
}

.iyagi-word-link {
 text-decoration: none;
 color: #ffe400;
}

.iyagi-word-sep {
 pointer-events: none;
 color: #ffe400;
}

.quickstart-note {
 margin-top: 1.5rem;
}

.docs-list {
 margin-left: 1.5rem;
 margin-top: 0.5rem;
}

.donation-section {
 text-align: center;
}

.flow-diagram {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 0.55rem;
 flex-wrap: wrap;
 margin-top: 1rem;
}

.flow-node {
 min-width: 130px;
 text-align: center;
 padding: 0.65rem 0.75rem;
 border: 1px solid var(--border);
 background: #000099;
 color: var(--accent2);
 font-weight: 700;
}

.flow-arrow {
 color: var(--accent);
 font-size: 1.15rem;
 line-height: 1;
 padding: 0 0.1rem;
}

.flow-caption {
 margin-top: 0.8rem;
 text-align: center;
 color: var(--muted);
}

.intro-video {
 margin: 1rem auto 0;
 border: 1px solid var(--border);
 background: #000099;
 padding: 0;
 width: min(86vw, 860px);
 max-width: none;
 line-height: 0;
 overflow: hidden;
}

.intro-video video {
 display: block;
 width: 100%;
 aspect-ratio: 16 / 9;
 border: 0;
}

.intro-video-credit {
 margin: 0.6rem 0 0;
 text-align: center;
}

.features {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 1.5rem;
 margin-top: 1.5rem;
}

.feature {
 background: var(--card-bg);
 border: 1px solid var(--border);
 border-radius: 0;
 padding: 1.5rem;
}

.feature h3 {
 font-size: 1.1rem;
 margin-bottom: 0.5rem;
 color: var(--accent2);
}

pre {
 background: var(--card-bg);
 border: 1px solid var(--border);
 border-radius: 0;
 padding: 1rem;
 overflow-x: auto;
 font-size: 0.9rem;
 margin: 1rem 0;
}

code {
 font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
 color: var(--code);
}

.btn {
 display: inline-block;
 background: #0000aa;
 color: var(--accent2);
 padding: 0.75rem 1.5rem;
 border: 1px solid var(--border);
 border-radius: 0;
 font-weight: 600;
 margin-top: 1rem;
}

.btn:hover {
 background: #000077;
 color: #ffff55;
 text-decoration: none;
}

.secondary-btn {
 background: #0000aa;
 border: 1px solid var(--border);
}

.secondary-btn:hover {
 background: #000077;
}

.github-btn {
 background: #0000aa;
 color: var(--accent);
 border: 1px solid var(--border);
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
}

.github-btn:hover {
 background: #000077;
 color: #ffff55;
}

.github-icon {
 flex: 0 0 auto;
}

.screenshot-single {
 margin: 1rem auto 0;
 max-width: 520px;
}

.screenshot-box {
 background: #000099;
 border: 1px dashed #55ffff;
 border-radius: 0;
 width: 100%;
 min-height: 220px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--accent);
 text-align: center;
 padding: 1rem;
}

.screenshot-image {
 display: block;
 width: 100%;
 height: auto;
 border: 1px solid var(--border);
}

.screenshot-single figcaption {
 margin-top: 0.7rem;
 color: var(--muted);
}

.video-placeholder {
 margin: 1rem auto 0;
 background: #000099;
 border: 1px solid var(--border);
 border-radius: 0;
 padding: 0;
 width: min(86vw, 860px);
 max-width: none;
 position: relative;
 left: 50%;
 transform: translateX(-50%);
 line-height: 0;
 overflow: hidden;
}

.video-inner {
 min-height: 240px;
 border: 1px dashed #55ffff;
 border-radius: 0;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 0.4rem;
 color: var(--accent);
}

.video-preview {
 display: block;
 width: 100%;
 height: auto;
 border: 0;
 background: #000099;
}

.modal {
 position: fixed;
 inset: 0;
 display: none;
 z-index: 1100;
}

.modal.is-open {
 display: block;
}

.modal-backdrop {
 position: absolute;
 inset: 0;
 background: rgba(0, 0, 80, 0.75);
}

.modal-panel {
 position: relative;
 max-width: 900px;
 margin: 6vh auto 0;
 background: var(--card-bg);
 border: 1px solid var(--border);
 border-radius: 0;
 padding: 1.2rem;
 z-index: 2;
}

.modal-panel h3 {
 margin-bottom: 1rem;
 color: var(--heading);
}

.modal-close {
 float: right;
 border: 1px solid var(--border);
 background: #0000aa;
 color: #ffff55;
 border-radius: 0;
 padding: 0.4rem 0.8rem;
 cursor: pointer;
}

.modal-close:hover {
 background: #000077;
}

.modal-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 gap: 1rem;
 margin-top: 1rem;
}

footer {
 text-align: center;
 padding: 2rem;
 color: var(--muted);
 font-size: 0.9rem;
}

.footer-logo {
 max-width: 320px;
 width: 100%;
 height: auto;
 margin-bottom: 0.9rem;
 opacity: 1;
 filter: none;
}

footer a { color: var(--muted); }
footer a:hover { color: var(--accent); }

.footer-meta {
 font-size: 1.3rem;
 line-height: 1.6;
}

/* Manual page layout rendered from markdown */
.manual-page {
 max-width: 900px;
 margin: 0 auto;
 padding: 2rem;
}

.manual-page header {
 border-bottom: 1px solid var(--border);
 margin-bottom: 1.5rem;
 padding: 0 0 1rem;
 text-align: left;
}

header.manual-simple-header {
 border-bottom: none;
 margin-bottom: 1.2rem;
 padding: 0 0 0.6rem;
 position: relative;
 overflow: visible;
}

.manual-simple-header h1 {
 margin: 0 0 0.5rem;
}

.manual-simple-header hr {
 display: none;
}

header.manual-simple-header::after {
 content: "";
 position: absolute;
 left: 50%;
 bottom: 0;
 width: 100vw;
 border-top: 1px solid var(--border);
 transform: translateX(-50%);
}

.manual-page h1,
.manual-page h2,
.manual-page h3 {
 color: var(--heading);
}

.manual-page ul,
.manual-page ol {
 margin-left: 1.3rem;
 margin-bottom: 1rem;
}

.manual-page p {
 margin-bottom: 0.9rem;
}

.manual-page pre {
 background: #000099;
}