:root {
    --color-fg: #101010;
    --color-fg-muted: #888888;
    --color-fg-light: #bbbbbb;
    --color-bg: #d0d0d0;
    --color-nav: #101010;
    --color-nav-bg: #e0e0e0;
    --color-primary: #2266bb;
    --color-primary-muted: #004488;
    --color-primary-light: #4466ff;
    --color-primary-bg: #444488;
    --color-secondary: #cc00cc;
    --color-secondary-muted: #880088;
    --color-secondary-light: #dd22dd;
    --color-secondary-bg: #774477;
    --color-warning: darkorange;
}

[data-theme="dark"] {
    --color-fg: #d0d0d0;
    --color-fg-muted: #444444;
    --color-fg-light: #222222;
    --color-bg: #101010;
    --color-nav: #f0f0f0;
    --color-nav-bg: #222222;
    --color-primary: #00cccc;
    --color-primary-muted: #008888;
    --color-primary-light: #22dddd;
    --color-primary-bg: #447777;
    --color-secondary: #cc00cc;
    --color-secondary-muted: #880088;
    --color-secondary-light: #dd22dd;
    --color-secondary-bg: #774477;
    --color-warning: rgb(119, 65, 0);
}

* {
    box-sizing: border-box;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
}

body {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg);
    color: var(--color-fg);
    font-family: 'Times New Roman', 'I.Ming', serif;
    height: 100vh;
    width: 100%;
    margin: 0;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
    scrollbar-width: thin;
    scrollbar-color: var(--color-nav-bg) var(--color-nav);
}

html::-webkit-scrollbar {
    width: .5em;
    height: .5em;
}

html::-webkit-scrollbar-track {
    background-color: var(--color-primary-bg);
    box-shadow: inset 3px 3px 0px 0px var(--color-fg);
    border-radius: 0;
    box-sizing: content-box;
}

html::-webkit-scrollbar-thumb {
    background-color: var(--color-fg-muted);
    border-left: 3px solid var(--color-fg);
    border-top: 3px solid var(--color-fg);
    border-radius: 0;
}

html::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-bg);
}

html::-webkit-scrollbar-corner {
    background-color: var(--color-primary-bg);
}

nav {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    background-color: var(--color-nav-bg);
    color: var(--color-nav);
    font-family: 'Consolas', 'SimHei', sans-serif;
    height: 2em;
    width: 100%;
    margin: 0;
    padding: 0;
}

.nav-not-fixed {
    position: sticky;
}

.text-link {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 1em;
}

.text-link:hover {
    color: var(--color-primary-light);
    font-weight: bold;
    transition: all .1s ease-in-out;
}

.text-link:active {
    color: var(--color-primary-muted);
    font-weight: bold;
    transform: translateY(.05em);
}

nav .text-link {
    color: var(--color-nav);
}

nav .text-link-here {
    color: var(--color-fg);
    text-decoration: none;
    font-size: 1em;
    font-weight: bold;
    transform: translateY(.05em);
}

nav .text-link-here:hover {
    color: var(--color-primary);
    font-weight: bold;
    transition: all .1s ease-in-out;
}

nav .text-link-here:active {
    color: var(--color-primary-muted);
    transform: translateY(.1em);
}

nav .nav-logo-link {
    display: flex;
    align-items: center;
}

nav .nav-logo {
    height: 1.8em;
    width: auto;
    display: block;
    transition: all .1s ease-in-out;
}

nav .nav-logo:hover {
    filter: invert(1);
}

nav .nav-logo:active {
    transform: translateY(.1em);
}
nav .theme_switch {
    display: none;
}

nav .sun, .moon {
    color: var(--nav);
    font-size: 1.5em;
    -webkit-text-stroke: 1px var(--color-fg-muted);
    paint-order: stroke fill;
    transition: all .1s ease-in-out;
}

nav :is(.sun, .moon):hover {
    filter: brightness(2);
    cursor: pointer;
    transform: translateY(-.05em);
}

nav :is(.sun, .moon):active {
    filter: brightness(0.75);
    transform: translateY(.1em);
}

[data-theme="dark"] .sun,
[data-theme="light"] .moon {
    display: none;
}

main {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 2em;
    flex: 1;
    margin: 1em 0;
}

footer {
    background-color: var(--color-nav-bg);
    color: var(--color-nav);
    font-family: 'Consolas', 'SimHei', sans-serif;
    text-align: center;
    padding: 0;
}

h1 {
    font-size: 3em;
    margin: 0 auto;
}

.popup {
    background-color: var(--color-fg);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.banner {
    display: none;
    background-color: var(--color-muted);
    color: var(--color-fg);
    font-size: 1.2em;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: .4em 0;
}

.hero {
    text-align: center;
    background-color: var(--color-primary-bg);
    color: var(--color-bg);
    line-height: 1;
    height: 20em;
    width: 100%;
    margin: 0;
    padding: 4em 0 4em;
}

.hero h1 {
    font-size: 4em;
    text-align: center;
    user-select: none;
    margin: .75em auto 0;
}

.hero p {
    font-size: 2em;
    font-weight: light;
    text-align: center;
    user-select: none;
}

.introduction-container-imgleft {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    height: 24em;
    width: 60%;
    margin: 1em 0 0;
    box-shadow: 0px 0px 20px 0px currentColor;
    border-radius: 1em;
    transform-origin: bottom center;
    transition: all .1s ease-in-out;
    overflow: hidden;
}

.introduction-container-imgright {
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    height: 24em;
    width: 60%;
    margin: 1em 0 0 0;
    box-shadow: 0px 0px 20px 0px currentColor;
    border-radius: 1em;
    transform-origin: bottom center;
    transition: all .1s ease-in-out;
    overflow: hidden;
}

.animated-card-in {
    animation: card-in .5s ease;
}

@keyframes card-in {
    0% {
        opacity: .5;
        transform: translateY(2em) scale(0.99);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.introduction-container-imgleft h1 {
    color: var(--color-fg);
    font-size: 6em;
    text-align: left;
    margin: .4em;
    user-select: none;
    transition: all .1s ease-in-out;
}

.introduction-container-imgright h1 {
    color: var(--color-fg);
    font-size: 6em;
    text-align: right;
    margin: .4em;
    user-select: none;
    transition: all .1s ease-in-out;
}

:is(.introduction-container-imgleft, .introduction-container-imgright):hover {
    box-shadow: 0px 0px 30px 0px currentColor;
    transform: scale(1.01);
    transition: all .1s ease-in-out;
}

:is(.introduction-container-imgleft, .introduction-container-imgright):hover .introduction-content h1 {
    font-size: 4em;
    margin: .2em;
    transition: all .1s ease-in-out;
}

.introduction-container-imgleft .introduction-content .detailed-text {
    display: none;
    font-size: 2em;
    text-align: left;
    opacity: 0;
    transition: all .1s ease-in-out;
}

.introduction-container-imgright .introduction-content .detailed-text {
    display: none;
    font-size: 2em;
    text-align: right;
    opacity: 0;
    transition: all .1s ease-in-out;
}

.introduction-container-imgleft:hover .introduction-content .detailed-text {
    display: block;
    color: var(--color-fg);
    text-align: left;
    font-size: 1.2em;
    margin: 0 .75em;
    opacity: 1;
    transition: all .1s ease-in-out;
}

.introduction-container-imgright:hover .introduction-content .detailed-text {
    display: block;
    color: var(--color-fg);
    text-align: right;
    font-size: 1.2em;
    margin: 0 .66em;
    opacity: 1;
    transition: all .1s ease-in-out;
}

.introduction-container-imgleft .introduction-content .summary-text {
    display: block;
    color: var(--color-fg);
    text-align: left;
    font-size: 1.66em;
    margin: 0 1.5em;
    opacity: 1;
    transition: all .1s ease-in-out;
}

.introduction-container-imgright .introduction-content .summary-text {
    display: block;
    color: var(--color-fg);
    text-align: right;
    font-size: 1.7em;
    opacity: 1;
    margin: 0 1.5em;
    transition: all .1s ease-in-out;
}

:is(.introduction-container-imgleft, .introduction-container-imgright):hover .introduction-content .summary-text {
    display: block;
    color: var(--color-fg);
    opacity: 1;
    font-size: 1.2em;
    margin: 0 .75em;
    transition: all .1s ease-in-out;
}

:is(.introduction-container-imgleft, .introduction-container-imgright):hover .introduction-img {
    aspect-ratio: 4 / 3;
    object-position: center;
    transition: all .1s ease-in-out;
}

.introduction-container-imgleft .introduction-img {
    flex-shrink: 0;
    height: 100%;
    width: auto;
    margin: 0;
    aspect-ratio: 16 / 9;
    object-fit: cover;  
    object-position: left;
    user-select: none;
    transition: all .1s ease-in-out;
}

.introduction-container-imgright .introduction-img {
    flex-shrink: 0;
    height: 100%;
    width: auto;
    margin: 0;
    aspect-ratio: 16 / 9;
    object-fit: cover;  
    object-position: right;
    user-select: none;
    transition: all .1s ease-in-out;
}

.typer {
    overflow: hidden; 
    white-space: nowrap; 
    width: fit-content; 
    border-right: 0px solid transparent;
    font-family: monospace;
    font-size: 1em;
    margin: 0 auto;
    animation: 
        typing 0.6s steps(20, end) forwards,
        blink 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 24ch; }
}

@keyframes blink {
  from, to { border-color: transparent; }
  50% { border-color: black; }
}

.typer strong {
    font-size: 1.2em;
}

.error-container {
    text-align: center;
    margin: 2em 0;
}

.error-container h1 {
    font-size: 3em;
    margin: .4em;
    user-select: none;
    transition: all .1s ease-in-out;
}

.error-container h2 {
    font-size: 2em;
    margin: .4em;
    user-select: none;
    transition: all .1s ease-in-out;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    height: fit-content;
    min-width: 4em;
    margin: .4em .4em;
    padding: .6em .6em;
    border-radius: 2147483648px;
    transition: all .1s ease-in-out;
    user-select: none;
    cursor: pointer;
}

.btn-project-item {
    margin: auto auto auto .5em;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-bg);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-disabled {
    background-color: var(--color-fg-muted);
    color: var(--color-fg);
    cursor: not-allowed;
}

.btn-primary:hover {
    transform: scale(1.02);
}

.btn-secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-bg);
    border-color: var(--color-bg);
}

.btn-disabled:hover {
    cursor: not-allowed;
}

.btn:active {
    background-color: var(--color-primary-muted);
    transform: scale(0.98);
    box-shadow: none;
}

.btn-disabled:active {
    background-color: var(--color-fg-muted);
    transform: translateY(0);
    color: var(--color-fg);
    cursor: not-allowed;
    box-shadow: none;
}

.btn-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.projects-container {
    display: flex;
    flex-direction: column;
    background-color: var(--color-fg-light);
    width: 48em;
    margin: 2em 0;
    border-radius: 2em;
    overflow: hidden;
}

.projects-container .project-item {
    display: flex;
    flex-direction: row;
    height: 8em;
    margin: 0 1em;
    padding: 0 1em;
    border-top: 1px solid var(--color-fg);
}

.projects-container .project-item img {
    flex-shrink: 0;
    margin: .5em;
}

.projects-container .project-item .project-desc {
    flex: 1;
}

.card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-fg-light);
    font-size: 1.2em;
    line-height: 1.5;
    border-radius: 1em;
    box-shadow: 0 0 20px var(--color-fg-muted);
}

.card-horizontal {
    min-width: 48em;
}

.card-vertical {
    min-height: 30em;
    min-width: 48em;
}

.card h1 {
    font-size: 1.6em;
    align-self: flex-start;
    text-align: start;
    width: 100%;
    margin: .2em .5em 0em;
}

.card hr {
    border-color: var(--color-fg);
    margin: .1em .5em;
}

.card .card-desc {
    margin: .2em 1em;
}

.card-vertical table {
    margin: 0 auto;
    border-collapse: collapse;
    table-layout: fixed;
}

.card-vertical table th {
    font-weight: bold;
}

:is(.card-vertical table) th, td {
    border-bottom: 1px solid var(--color-fg);
    padding: .6em .6em;
    text-align: start;
}

.msg-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1em;
    background-color: var(--color-warning);
    color: white;
    margin: 2em 2em;
    padding: 1em;
    border: 0.05em solid var(--color-fg);
}

.msg-box svg {
    width: 4.8em;
    height: 5.2em;
}

.msg-box .msg-content {
    display: flex;
    flex-direction: column;
    gap: .66em;
}

.msg-box .msg-content h3 {
    font-size: 1.6em;
    margin: 0;
}

.msg-box .msg-content p {
    font-size: 1.2em;
    margin-top: 0;
}

.manual-container {
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg);
    color: var(--color-fg);
    font-family: Consolas, "JetBrains Mono", monospace;
    width: 100%;
    margin: 0;
    padding: 0;
}

.manual-invisible-container {
    padding: 2em;
    max-width: 800px;
    margin: auto;
}

.index-container {
    border: 2px solid var(--color-fg);
    padding: 1em 2em;
}

.faq-container {
    margin-top: 2em;
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.faq-item {
    background-color: var(--color-primary-bg); 
    color: var(--color-bg);
    border-left: 0.5em solid var(--color-primary); 
    padding: 1em;
    border-radius: 0.3em;
}

.faq-item .question {
    font-weight: bold;
    margin-bottom: 0.5em;
}

.faq-item .answer {
    display: none;
    margin-left: 1em;
    color: var(--color-fg-light); 
    line-height: 1.5;
}

.key-shortcut {
    display: inline-block;
    background-color: black;
    color: white;
    font-weight: bold;
    padding: 0.2em 0.5em;
    border-radius: 0.3em;
    border: 0.01em solid white;
    font-family: monospace;
    margin: 0.2em;
}

.quoting-document {
    cursor: pointer;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1; 
    line-clamp: 1;
    -webkit-box-orient: vertical;
    background-color: var(--color-fg);
    color: var(--color-bg);
    padding: 1em;
    border-radius: 0.3em;
    border: 0.01em solid var(--color-fg);
}

.quoting-document.expanded {
    -webkit-line-clamp: unset;
    line-clamp: unset;
}

.faq-item .question::after,
.quoting-document::after {
    content: "▼"; 
    float: right;
    transition: transform 0.2s ease;
}

.faq-item.expanded .question::after,
.quoting-document.expanded::after {
    content: "▲"; 
}

.hsdaohjyomh {
    white-space: nowrap;
}

.left1 {
    display: none;
}