@layer browser {
    .browser {
        border: 2px solid;
        border-color: var(--chrome-light) var(--chrome-darker) var(--chrome-darker) var(--chrome-light);
        font-family: Tahoma, 'Segoe UI', sans-serif;
        font-size: 11px;
        display: flex;
        flex-direction: column;
        height: 70vh;
    }

    .browser::before {
        content: '';
        position: absolute;
        inset: -25px;
        background: radial-gradient(
            ellipse at center,
            color-mix(in oklch, var(--http) 6%, transparent),
            transparent 70%
        );
        z-index: -1;
        border-radius: 8px;
    }

    .br-titlebar {
        background: linear-gradient(90deg, #000080, #1084D0);
        color: #fff;
        padding: 3px 4px 3px 6px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 700;
        user-select: none;
    }

    .br-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .br-btns { display: flex; gap: 2px; }
    .br-btn {
        width: 16px;
        height: 14px;
        background: var(--chrome);
        border: 1px solid;
        border-color: var(--chrome-light) var(--chrome-dark) var(--chrome-dark) var(--chrome-light);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 8px;
        color: #000;
        cursor: default;
        line-height: 1;
    }

    .br-menubar {
        background: var(--chrome);
        padding: 2px 6px;
        display: flex;
        gap: 12px;
        color: #000;
        user-select: none;
        border-bottom: 1px solid var(--chrome-dark);
    }

    .br-toolbar {
        background: var(--chrome);
        padding: 3px 6px;
        display: flex;
        gap: 4px;
        align-items: center;
        border-bottom: 1px solid var(--chrome-dark);
    }

    .br-nav-btn {
        width: 22px;
        height: 20px;
        background: var(--chrome);
        border: 1px solid;
        border-color: var(--chrome-light) var(--chrome-dark) var(--chrome-dark) var(--chrome-light);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        color: #000;
        cursor: default;
    }

    .br-addressbar {
        background: var(--chrome);
        padding: 3px 6px;
        display: flex;
        align-items: center;
        gap: 6px;
        border-bottom: 1px solid var(--chrome-dark);
    }

    .br-address-label {
        color: #000;
        font-size: 10px;
        white-space: nowrap;
    }

    .br-address-input {
        flex: 1;
        background: #fff;
        border: 1px solid;
        border-color: var(--chrome-dark) var(--chrome-light) var(--chrome-light) var(--chrome-dark);
        padding: 2px 6px;
        font-family: Tahoma, 'Segoe UI', sans-serif;
        font-size: 11px;
        color: #000;
    }

    .br-go-btn {
        background: var(--chrome);
        border: 1px solid;
        border-color: var(--chrome-light) var(--chrome-dark) var(--chrome-dark) var(--chrome-light);
        padding: 2px 8px;
        font-size: 10px;
        cursor: default;
    }

    .br-content {
        background: oklch(0.15 0.02 260);
        flex: 1;
        padding: 1.5em;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .br-statusbar {
        background: var(--chrome);
        padding: 2px 8px;
        font-size: 10px;
        color: #444;
        border-top: 1px solid var(--chrome-dark);
        display: flex;
        align-items: center;
    }

    /* Win98 progress bar */
    .br-progress {
        height: 12px;
        flex: 1;
        background: #fff;
        border: 1px solid;
        border-color: var(--chrome-dark) var(--chrome-light) var(--chrome-light) var(--chrome-dark);
        margin-left: 8px;
        position: relative;
        overflow: hidden;
    }

    .br-progress-fill {
        height: 100%;
        background: #000080;
        width: 0%;
        transition: width 0.1s linear;
    }
}