body {
    background:
        radial-gradient(circle at 15% 30%, rgba(0, 119, 255, 0.24), transparent 28%),
        radial-gradient(circle at 75% 20%, rgba(0, 81, 255, 0.20), transparent 24%),
        radial-gradient(circle at 50% 100%, rgba(0, 153, 255, 0.18), transparent 34%),
        linear-gradient(180deg, #050912 0%, #07111d 42%, #081521 100%);
    background-attachment: fixed;
}

.hero-panel {
    background:
        radial-gradient(circle at 50% 80%, rgba(0, 102, 255, 0.28), transparent 36%),
        linear-gradient(180deg, rgba(8, 15, 31, 0.96), rgba(6, 12, 24, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
}

.feature-panel,
.demo-panel {
    border: 1px solid rgba(255, 255, 255, 0.035);
    background: rgba(9, 15, 28, 0.72);
    backdrop-filter: blur(10px);
}

.demo-panel {
    box-shadow: 0 22px 60px rgba(4, 3, 10, 0.48);
}

.feature-panel {
    background: rgba(9, 17, 33, 0.68);
}

.hero-tier,
.promo-feature,
.promo-callout,
.promo-footer {
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(13, 22, 40, 0.58);
    backdrop-filter: blur(10px);
}

.hero-tier {
    max-width: 19rem;
}

.hero-tier-pro,
.promo-panel {
    border: 1px solid rgba(85, 170, 255, 0.14);
    background:
        linear-gradient(180deg, rgba(10, 20, 40, 0.88), rgba(10, 18, 33, 0.78));
}

.promo-panel {
    box-shadow: 0 22px 60px rgba(3, 10, 24, 0.52);
}

.position-sticky {
    top: 1rem !important;
}

.inline-code {
    display: inline-block;
    margin: 0.12rem 0.2rem 0.12rem 0;
    padding: 0.2rem 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    background: rgba(17, 30, 55, 0.72);
    color: #7dd3fc;
    line-height: 1.2;
    vertical-align: baseline;
    white-space: nowrap;
}

.demo-codeblock {
    border: 1px solid rgba(120, 180, 255, 0.14);
    background: linear-gradient(180deg, rgba(18, 32, 58, 0.92), rgba(15, 27, 49, 0.84));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 10px 26px rgba(2, 10, 24, 0.22);
}

.demo-copy {
    margin-bottom: 1.5rem;
}

.demo-copy:last-child {
    margin-bottom: 0;
}

.demo-panel .form-control,
.demo-panel .form-select {
    min-height: 2.85rem;
    border-color: rgba(255, 255, 255, 0.07);
}

.input-surface {
    background: rgba(15, 27, 48, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e6f0ff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.input-surface::placeholder {
    color: rgba(198, 214, 235, 0.55) !important;
}

.input-surface:focus {
    background: rgba(18, 32, 58, 0.95) !important;
    border-color: rgba(80, 170, 255, 0.45) !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.14) !important;
}

.contenteditable-surface {
    min-height: 2.85rem;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.85rem;
    min-width: 2.85rem;
    padding: 0.4rem 0.85rem;
    font-size: 1rem;
    line-height: 1;
    font-weight: 600;
}

.copydown-btn {
    min-height: 2rem;
    min-width: 2rem;
    padding: 0.2rem 0.45rem;
    font-size: 0.875rem;
    line-height: 1;
}

.card-body > .d-flex.flex-nowrap > h2 {
    min-width: 0;
    padding-right: 1rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.card-body > .d-flex.flex-nowrap > .badge {
    flex-shrink: 0;
}

#event_log {
    min-height: 200px;
    max-height: 400px;
}