:root {
    --bg: #0f1221;
    --body-bg: #0b0f1d;
    --code-bg: #0b1020;
    --code-btn: #0e1324;
    --panel: #14182b;
    --output: #0a0e1a;
    --btn-text: #0b111f;
    --muted: #8b93a7;
    --txt: #e9ecf1;
    --brand: #7dd3fc;
    --brand-2: #60a5fa;
    --ok: #22c55e;
    --ok-2: #34d399;
    --warn: #eab308;
    --warn-2: #f59e0b;
    --err: #ef4444;
    --white: #ffffff;
    --poison: #00ff00;
    --radius: 1.134rem;
    --gap: 0.875rem;
    --heading: 'Lora';
    --type: 'Muli';
}

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

@font-face {
    font-family: 'Muli';
    src: url('/fonts/Muli-Regular.woff'),
         url('/fonts/Muli-Regular.woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Muli';
    src: url('/fonts/Muli-Italic.woff'),
         url('/fonts/Muli-Italic.woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Muli';
    src: url('/fonts/Muli-Bold.woff'),
         url('/fonts/Muli-Bold.woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lora';
    src: url('/fonts/Lora-Regular.woff'),
         url('/fonts/Lora-Regular.woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lora';
    src: url('/fonts/Lora-Italic.woff'),
         url('/fonts/Lora-Italic.woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

html, body {
    height: 100%;
}

body {
    font-family: var(--type), sans-serif;
    background: linear-gradient(180deg, var(--body-bg), var(--bg) 35%);
    color: var(--txt);
    font-size: 1rem;
}

h1, h2, h3, h4, h5, h6 , label {
    font-family: var(--heading);
}

header {
    padding: 1.25rem;
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.15), rgba(125, 211, 252, 0.1));
    border-bottom: .063rem solid rgba(255, 255, 255, 0.06);
}

.container {
    max-width: 75rem;
    margin-inline: auto;
    padding: .875rem;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-weight: 700;
}

.brand .logo {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: .625rem;
    background: url('/image/favicon.png' ) center / cover no-repeat;
}

.title {
    font-family: var(--heading);
    font-size: clamp(1.125rem, 2vw, 1.375rem);
}

main {
    max-width: 94.75rem;
    margin-inline: auto;
    padding: 1.125rem;
    display: grid;
    grid-template-columns: 17.5rem 1fr 22.5rem;
    gap: var(--gap);
}

@media (max-width: 68.75rem) {
    main {
        grid-template-columns: 1fr;
    }
}

.card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03));
    border: .063rem solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    box-shadow: 0 .625rem 1.875rem rgba(0, 0, 0, 0.25);
}

.panel {
    padding: 1rem;
}

h2, h3 {
    margin: 0 0 .75rem;
}

.muted {
    color: var(--muted);
    font-size: .813rem;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .625rem;
    flex-wrap: wrap;
    justify-content: space-between;
}

.btn {
    appearance: none;
    border: none; 
    background: linear-gradient(180deg, var(--brand-2), var(--brand));
    color: var(--btn-text);
    font-weight: 700;
    padding: .625rem var(--gap);
    border-radius: .75rem;
    cursor: pointer;
}

.btn.secondary {
    background: transparent;
    border: .063rem solid rgba(255, 255, 255, 0.15);
    color: var(--txt);
}

.btn.warn {
    background: linear-gradient(180deg, var(--warn-2), var(--warn));
}

.btn.ok {
    background: linear-gradient(180deg, var(--ok-2), var(--ok));
}

.select, select, .text {
    background: rgba(255, 255, 255, 0.03);
    border: .063rem solid rgba(255, 255, 255, 0.12);
    color: var(--txt);
    padding: .625rem .75rem;
    border-radius: .75rem;
}

textarea.text {
    width: 100%;
    min-height: 7.5rem;
}

.tabs {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.tab {
    padding: .5rem .75rem;
    border-radius: .625rem;
    border: .063rem solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    font-weight: 700;
    color: var(--white);
}

.tab.active {
    background: linear-gradient(180deg, rgba(125, 211, 252, 0.18), rgba(96, 165, 250, 0.18));
    color: var(--poison) !important;
}

.editor-wrap {
    position: relative;
    border: .063rem solid rgba(255, 255, 255, 0.12);
    border-radius: var(--gap);
    overflow: hidden;
    min-height: 17.5rem;
    background-color: var(--code-bg);
}

.editor {
    inline-size: 100%;
    block-size: 23.75rem;
}

iframe.preview {
    inline-size: 100%;
    block-size: 23.75rem;
    border: .063rem solid rgba(255, 255, 255, 0.12);
    border-radius: var(--gap);
    background-color: var(--white);
}

.out {
    background: var(--output);
    border: .063rem solid rgba(255, 255, 255, 0.12);
    border-radius: .75rem;
    padding: .625rem;
    min-height: 10rem;
    overflow: auto;
    white-space: pre-wrap;
}

.footer {
    opacity: 0.7;
    font-size: .75rem;
    text-align: center;
    padding: .75rem;
}

.kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Cascadia Code', monospace;
    background-color: var(--code-btn);
    border: .063rem solid rgba(255, 255, 255, 0.15);
    border-radius: .5rem;
    padding: .125rem .375rem;
    line-height: 2;
}

.scoot {
    padding: 0 0 0 1.25rem;
}