.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body {
    background-color: #090e0b;
    color: #d7f0e4;
    font-family: 'Lexend', 'Noto Sans JP', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
}
a { color: #2cde85; text-decoration: none; transition: color 0.2s; }
a:hover { color: #6ef0b0; }
a:visited { color: #1aab5f; }

.container {
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}

.hero, .section-header, th, .footer-table {
    text-align: center;
}

hr {
    border: 0;
    border-top: 2px solid #1e5c3a;
    margin: 20px 0;
}

h2.section-header {
    width: 100%;
    background-color: #0d1a12;
    color: #2cde85;
    border-bottom: 2px solid #2cde85;
    padding: 8px 0;
    margin: 30px 0 15px 0;
    font-size: 1.2em;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(44, 222, 133, 0.3);
}
.section-header span { color: #2cde85; opacity: 0.6; }

table {
    width: 100%;
    border: 2px solid #1e5c3a;
    border-collapse: separate;
    border-spacing: 2px;
    background-color: #090e0b;
    margin: 15px 0;
}
th {
    color: #2cde85;
    background-color: #0d1a12;
    padding: 8px;
    border: 1px solid #1e5c3a;
    vertical-align: middle;
}
td {
    padding: 8px;
    border: 1px solid #1e5c3a;
    background-color: #090e0b;
    vertical-align: top;
}
#download-table td {
    text-align: center;
}

.alert {
    margin: 20px 0;
    padding: 2px;
    border: 2px solid #1e5c3a;
    background-color: #090e0b;
}
.alert-title {
    font-weight: bold;
    padding: 8px 15px;
    background-color: #0d1a12;
    color: #2cde85;
    border: 1px solid #1e5c3a;
    margin: 0 0 2px 0;
}
.alert ul, .alert ol { 
    padding: 10px 15px 10px 40px; 
    margin: 0; 
    border: 1px solid #1e5c3a;
    background-color: #090e0b;
}

details {
    background-color: #090e0b;
    border: 2px solid #1e5c3a;
    margin: 10px 0;
    padding: 2px;
    overflow-x: auto;
}
summary {
    background-color: #0d1a12;
    border: 1px solid #1e5c3a;
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
    color: #2cde85;
}
details[open] summary { margin-bottom: 2px; }

details > p, details > h3, details > h4, details > ul, details > ol {
    background-color: #090e0b;
    border: 1px solid #1e5c3a;
    padding: 10px;
    margin: 0 0 2px 0;
}
details > *:last-child, .alert > *:last-child { margin-bottom: 0; }
details h3, details h4 { font-size: 1.1em; }
details ul, details ol { padding-left: 40px; }

details[open] summary + table, details[open] summary + p { margin-top: 0; }
details table { 
    margin: 0; 
    border: 2px solid #1e5c3a;
    border-spacing: 2px;
}
details th, details td { border: 1px solid #1e5c3a; white-space: nowrap; }

.footer-info { font-size: 0.8em; margin-top: 20px; }

code { background: linear-gradient(transparent 70%, rgba(44, 222, 133, 0.3) 70%); font-family: 'JetBrains Mono', monospace; color: #d7f0e4; padding: 0 2px; font-weight: bold; cursor: pointer; transition: background 0.2s, color 0.2s; }
code:hover { background: rgba(44, 222, 133, 0.4); }
code:active { background: #2cde85; color: #090e0b; }

.hero {
    margin: 20px 0;
    text-align: center;
}

.hero-title-static {
    display: block;
    width: 100%;
    text-align: center;
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    font-weight: bold;
    color: #2cde85;
    margin: 10px 0;
    user-select: text;
    text-shadow: 0 0 12px rgba(44, 222, 133, 0.25);
}

@media (max-width: 600px) {
    .hero-title-static {
        font-size: clamp(1.4rem, 6vw, 2rem);
    }
}