.app-window {
    border-radius: 8px 8px 0 0; display: none; flex-direction: column;
    min-height: 220px; min-width: 320px; overflow: hidden; position: absolute;
    z-index: 100; font-family: Tahoma, Arial, sans-serif;
    /* XP's 3px blue frame: the padding shows the window background around the content */
    padding: 0 3px 3px; background: #0b5ae6;
    border: 1px solid #0831d9; border-top-color: #2f7bff;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.4), 0 0 1px rgba(0,0,0,0.3);
}
.app-window.visible { display: flex; }
.app-window.unfocused { background: #7a96b8; border-color: #6d87ad; }
.app-window.maximized {
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: calc(100vh - var(--taskbar-height)) !important;
    border-radius: 0; padding: 0; border: 0;
}
.app-window .title-bar {
    background: linear-gradient(180deg, #0997ff 0%, #0663d0 8%, #0654c4 20%, #0050ee 40%, #0050ee 85%, #06f 93%, #005bff 100%);
    border-radius: 7px 7px 0 0; display: flex; justify-content: space-between; margin: 0 -3px;
    align-items: center; padding: 3px 5px 3px 8px; min-height: 28px; cursor: move; user-select: none; touch-action: none;
}
.app-window.maximized .title-bar { border-radius: 0; margin: 0; }
.app-window.unfocused .title-bar { background: linear-gradient(180deg, #9ab4d6 0%, #8ba4c6 40%, #7a96b8 100%); }
.title-bar-left { display: flex; align-items: center; gap: 5px; overflow: hidden; flex: 1; }
.title-bar-icon { font-size: 14px; flex-shrink: 0; }
.xp-title-icon {
    display: block; width: 16px; height: 16px; object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35));
}
.title-bar-text {
    color: #fff; font-family: 'Trebuchet MS', Tahoma, Arial, sans-serif;
    font-size: 13px; font-weight: bold; user-select: none; letter-spacing: 0.2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 1px 1px #0f1089;
}
.app-window.unfocused .title-bar-text { color: #d8e4f8; text-shadow: none; }
.title-bar-controls { display: flex; gap: 2px; flex-shrink: 0; }
/* Button artwork from XP.css (MIT), see assets/gui/titlebar/LICENSE.txt */
.title-btn {
    width: 21px; height: 21px; padding: 0; border: 0; border-radius: 3px; cursor: pointer;
    background: #0050ee center / 21px 21px no-repeat;
}
.title-btn:focus-visible { outline: 1px dotted #fff; outline-offset: 1px; }
.app-window.unfocused .title-btn { filter: saturate(0.45) brightness(1.12); }
.btn-minimize { background-image: url('../../../assets/gui/titlebar/min.svg'); }
.btn-minimize:hover { background-image: url('../../../assets/gui/titlebar/min-hover.svg'); }
.btn-minimize:active { background-image: url('../../../assets/gui/titlebar/min-active.svg'); }
.btn-maximize { background-image: url('../../../assets/gui/titlebar/max.svg'); }
.btn-maximize:hover { background-image: url('../../../assets/gui/titlebar/max-hover.svg'); }
.btn-maximize:active { background-image: url('../../../assets/gui/titlebar/max-active.svg'); }
.app-window.maximized .btn-maximize { background-image: url('../../../assets/gui/titlebar/restore.svg'); }
.app-window.maximized .btn-maximize:hover { background-image: url('../../../assets/gui/titlebar/restore-hover.svg'); }
.app-window.maximized .btn-maximize:active { background-image: url('../../../assets/gui/titlebar/restore-active.svg'); }
.btn-close { background-image: url('../../../assets/gui/titlebar/close.svg'); }
.btn-close:hover { background-image: url('../../../assets/gui/titlebar/close-hover.svg'); }
.btn-close:active { background-image: url('../../../assets/gui/titlebar/close-active.svg'); }
.window-toolbar {
    background: var(--xp-bg-main, #ece9d8); border-bottom: 1px solid #aca899;
    padding: 2px 6px; display: flex; align-items: center; gap: 4px;
    font-size: 11px; color: #555; min-height: 24px;
}
.window-toolbar .address-bar {
    flex: 1; background: #fff; border: 1px solid #7f9db9;
    padding: 2px 6px; border-radius: 1px; font-size: 11px; color: #333; user-select: text;
}
.toolbar-btn { background: none; border: none; cursor: pointer; color: #555; font-size: 12px; padding: 2px 4px; }
.toolbar-btn:hover { color: #000; }
.resume-toolbar-btn {
    align-items: center; display: inline-flex; gap: 4px; text-decoration: none;
}
.window-body {
    background: #fff; display: flex; flex: 1; flex-direction: column;
    overflow: auto; padding: 16px; font-size: 12px; line-height: 1.5; color: #333;
    scrollbar-width: thin; scrollbar-color: #c0c0c0 #f0f0f0;
}
.window-body::-webkit-scrollbar { width: 16px; }
.window-body::-webkit-scrollbar-track { background: #f0f0f0; }
.window-body::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #c8c8c8, #e0e0e0, #c8c8c8); border: 1px solid #a0a0a0; }
.resume-pdf-body {
    background: #7f7f7f; display: block; flex: 1 1 auto;
    min-height: 0; overflow: auto; padding: 0; position: relative;
}
.resume-pdf-viewer {
    min-height: 100%;
    padding: 18px;
}
.resume-pdf-pages {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.resume-pdf-page {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    line-height: 0;
    max-width: 100%;
}
.resume-pdf-page canvas {
    display: block;
    height: auto;
    max-width: 100%;
}
.resume-pdf-loading {
    color: #fff;
    font-size: 12px;
    padding: 24px;
    text-align: center;
}
.resume-pdf-fallback {
    align-items: center; background: rgba(236, 233, 216, 0.94);
    border: 1px solid #aca899; bottom: 10px; display: flex; gap: 8px;
    padding: 6px 8px; position: absolute; right: 10px; z-index: 1;
}
.resume-pdf-fallback[hidden] { display: none; }
.window-statusbar {
    height: 22px; min-height: 22px; background: var(--xp-bg-main, #ece9d8);
    border-top: 1px solid #aca899; padding: 0 20px 0 8px;
    display: flex; align-items: center; font-size: 11px; color: #555;
}
/* XP size grip in the status bar corner */
.resize-handle {
    position: absolute; bottom: 4px; right: 4px; width: 13px; height: 13px;
    cursor: nwse-resize; touch-action: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cg fill='%23fff'%3E%3Crect x='10' y='2' width='2' height='2'/%3E%3Crect x='6' y='6' width='2' height='2'/%3E%3Crect x='10' y='6' width='2' height='2'/%3E%3Crect x='2' y='10' width='2' height='2'/%3E%3Crect x='6' y='10' width='2' height='2'/%3E%3Crect x='10' y='10' width='2' height='2'/%3E%3C/g%3E%3Cg fill='%23aca899'%3E%3Crect x='9' y='1' width='2' height='2'/%3E%3Crect x='5' y='5' width='2' height='2'/%3E%3Crect x='9' y='5' width='2' height='2'/%3E%3Crect x='1' y='9' width='2' height='2'/%3E%3Crect x='5' y='9' width='2' height='2'/%3E%3Crect x='9' y='9' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E") right bottom no-repeat;
}
.app-window.maximized .resize-handle { display: none; }
@keyframes windowOpen { from{opacity:0;transform:scale(0.92) translate(-8px,-8px)}to{opacity:1;transform:none} }
@keyframes windowClose { from{opacity:1}to{opacity:0;transform:scale(0.95)} }
.window-opening { animation: windowOpen 0.18s ease-out; }
.window-closing { animation: windowClose 0.12s ease-in forwards; }

/* Content styles */
.w-section { margin-bottom: 16px; }
.w-section-title { font-size: 14px; font-weight: 700; color: #003399; margin: 0 0 10px; padding-bottom: 5px; border-bottom: 1px solid #c0d5f0; }
.w-profile { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.w-profile img { width: 72px; height: 72px; border-radius: 50%; border: 3px solid #0054e3; object-fit: cover; }
.w-profile h1 { font-size: 18px; color: #222; margin: 0; }
.w-profile .subtitle { font-size: 11px; color: #666; margin-top: 2px; }
.w-social { display: flex; gap: 6px; margin-top: 8px; }
.w-social a { width: 28px; height: 28px; background: linear-gradient(180deg, #4da0ff, #2d7ad5); border-radius: 3px; border: 1px solid #1b5fb0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; text-decoration: none; transition: filter 0.15s; }
.w-social a:hover { filter: brightness(1.15); }
.w-info-box { background: #f5f5f5; border: 1px solid #d4d4d4; border-radius: 3px; padding: 10px 12px; margin-bottom: 10px; }
.w-info-box h3 { font-size: 12px; font-weight: 700; color: #222; margin: 0 0 3px; }
.w-info-box .meta { font-size: 10px; color: #888; margin-bottom: 5px; }
.w-info-box .info-text { font-size: 11.5px; color: #444; margin: 0 0 8px; line-height: 1.45; }
.w-info-box ul { padding-left: 16px; margin: 0; font-size: 11.5px; color: #444; }
.w-info-box ul li { margin-bottom: 2px; line-height: 1.4; }
.w-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-bottom: 14px; }
.w-stat { background: #f5f5f5; border: 1px solid #d4d4d4; border-radius: 3px; padding: 10px; text-align: center; }
.w-stat .num { font-size: 20px; font-weight: 700; color: #0054e3; }
.w-stat .label { font-size: 10px; color: #666; }
.w-link { color: #0054e3; text-decoration: none; }
.w-link:hover { text-decoration: underline; }
.welcome-body { background: linear-gradient(180deg, #fff 0%, #f3f7ff 100%); }
.welcome-hero {
    display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center;
    margin-bottom: 14px; padding: 12px; border: 1px solid #c0d5f0;
    background: linear-gradient(180deg, #eef6ff, #fff); border-radius: 3px;
}
.welcome-hero img { width: 76px; height: 76px; object-fit: contain; }
.welcome-hero h1 { color: #003399; font-size: 18px; margin: 0 0 4px; }
.welcome-hero p { color: #444; font-size: 12px; margin: 0; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.skill-cat h4 { font-size: 11px; font-weight: 700; color: #003399; margin: 0 0 5px; }
.skill-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.skill-tag { background: linear-gradient(180deg, #e8f0fe, #d0def5); border: 1px solid #a0b8d8; border-radius: 3px; padding: 2px 7px; font-size: 10.5px; color: #333; }
.cert-list { list-style: none; padding: 0; margin: 0; }
.cert-list li { padding: 5px 8px; border-bottom: 1px solid #eee; font-size: 11.5px; display: flex; align-items: center; gap: 6px; }
.cert-list li i { color: #3c9b35; font-size: 11px; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.project-card { background: #f8f8f8; border: 1px solid #ccc; border-radius: 3px; padding: 12px; }
.project-card:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.project-card h3 { font-size: 13px; font-weight: 700; color: #003399; margin: 0 0 2px; }
.project-card .p-type { font-size: 9.5px; color: #999; margin-bottom: 5px; }
.project-card p { font-size: 11.5px; color: #444; margin: 0 0 7px; line-height: 1.4; }
.project-card .p-tech { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 7px; }
.project-card .p-tech span { background: #e8e8e8; border: 1px solid #ccc; border-radius: 2px; padding: 1px 5px; font-size: 9.5px; color: #555; }
.project-card .p-footer { display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-item { display: flex; gap: 8px; margin-bottom: 8px; font-size: 12px; }
.contact-item i { color: #0054e3; font-size: 15px; margin-top: 2px; flex-shrink: 0; }
.xp-form label { display: block; font-size: 11px; font-weight: 700; margin-bottom: 2px; color: #333; }
.xp-form input, .xp-form select, .xp-form textarea { width: 100%; padding: 4px 6px; border: 1px solid #7f9db9; border-radius: 1px; font-size: 12px; font-family: Tahoma, Arial, sans-serif; margin-bottom: 7px; background: #fff; }
.xp-form input:focus, .xp-form select:focus, .xp-form textarea:focus { outline: none; border-color: #0054e3; }
.xp-btn { background: linear-gradient(180deg, #f5f5f5, #e0e0e0); border: 1px solid #999; border-radius: 3px; padding: 4px 14px; font-size: 12px; cursor: pointer; font-family: Tahoma, Arial, sans-serif; }
.xp-btn:hover { background: linear-gradient(180deg, #fff, #e8e8e8); }
.xp-btn-primary { background: linear-gradient(180deg, #4da0ff, #2d7ad5); color: #fff; border-color: #1b5fb0; }
.xp-btn-primary:hover { background: linear-gradient(180deg, #5db0ff, #3d8ae5); }
.edu-item { margin-bottom: 10px; }
.edu-item h3 { font-size: 12px; font-weight: 700; color: #222; margin: 0 0 1px; }
.edu-item .edu-school { font-size: 11px; color: #0054e3; }
.edu-item .edu-date { font-size: 10px; color: #999; }
.blog-card { margin-bottom: 10px; }
.blog-card h3 { font-size: 13px; font-weight: 700; color: #003399; margin: 0 0 2px; }
.blog-card .blog-meta { font-size: 10px; color: #999; margin-bottom: 4px; }
.blog-card p { font-size: 11.5px; color: #444; margin: 0 0 5px; }
.speaking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 768px) {
    .contact-grid, .speaking-grid { grid-template-columns: 1fr; }
    .project-grid { grid-template-columns: 1fr; }
    .skill-grid { grid-template-columns: 1fr; }
    .w-profile { flex-direction: column; text-align: center; }
    .welcome-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .app-window { min-width: 100% !important; width: 100% !important; left: 0 !important; top: 0 !important; height: calc(100vh - var(--taskbar-height)) !important; border-radius: 0; padding: 0; border: 0; }
    .app-window .title-bar { border-radius: 0; margin: 0; }
    .resize-handle { display: none; }
    #welcome-window:not(.maximized) {
        min-width: 0 !important; width: 86% !important;
        left: 7% !important; top: 14vh !important;
        height: auto !important; max-height: 62vh !important;
        border-radius: 8px 8px 0 0; padding: 0 3px 3px; border: 1px solid #0831d9;
    }
    #welcome-window:not(.maximized) .title-bar { border-radius: 7px 7px 0 0; margin: 0 -3px; }
}

/* Explorer-style window with XP task pane */
.explorer-body { flex-direction: row; padding: 0; overflow: hidden; }
.xp-taskpane {
    flex: 0 0 200px; display: flex; flex-direction: column; gap: 12px;
    padding: 12px 10px; overflow-y: auto;
    background: linear-gradient(180deg, #7ba2e7 0%, #6375d6 100%);
}
.xp-task-group { background: #d6dff7; border-radius: 4px 4px 0 0; overflow: hidden; }
.xp-task-group h3 {
    margin: 0; padding: 5px 10px; font-size: 11px; font-weight: 700; color: #215dc6;
    background: linear-gradient(90deg, #fff 0%, #c6d3f7 100%);
}
.xp-task-group ul, .xp-task-group p { border: 1px solid #fff; border-top: 0; margin: 0; }
.xp-task-group ul { list-style: none; padding: 8px 10px; display: flex; flex-direction: column; gap: 7px; }
.xp-task-group p { padding: 8px 10px; font-size: 11px; line-height: 1.45; color: #000; }
.xp-task-link {
    display: flex; align-items: center; gap: 6px; width: 100%;
    background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
    color: #215dc6; font: 11px Tahoma, Verdana, Arial, sans-serif; text-decoration: none;
}
.xp-task-link:hover { color: #428eff; text-decoration: underline; }
.xp-task-link img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.explorer-content {
    flex: 1; overflow: auto; padding: 16px;
    scrollbar-width: thin; scrollbar-color: #c0c0c0 #f0f0f0;
}
.explorer-content .w-section-title { margin-top: 6px; }
.toolbar-label { color: #555; font-size: 11px; }
.exp-item { padding: 8px 0 12px; border-bottom: 1px dashed #d4d4d4; }
.exp-item:last-child { border-bottom: 0; margin-bottom: 8px; }
.exp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.exp-head h3 { font-size: 13px; color: #222; margin: 0; }
.exp-date { font-size: 10.5px; color: #777; white-space: nowrap; }
.exp-org { font-size: 11.5px; font-weight: 700; color: #0054e3; margin: 1px 0 5px; }
.exp-org span { font-weight: 400; color: #777; }
.exp-item ul { list-style: disc; padding-left: 16px; margin: 0 0 6px; }
.exp-item li { font-size: 11.5px; color: #444; line-height: 1.45; margin-bottom: 2px; }
.exp-tech { display: flex; flex-wrap: wrap; gap: 3px; }
.exp-tech span { background: #e8e8e8; border: 1px solid #ccc; border-radius: 2px; padding: 1px 5px; font-size: 9.5px; color: #555; }
.exp-note {
    font-size: 11px; font-style: italic; color: #555; line-height: 1.4;
    background: #ffffe1; border: 1px solid #e3d98c; padding: 6px 8px; margin: -2px 0 4px;
}
@media (max-width: 768px) {
    .xp-taskpane { display: none; }
}

/* Projects window */
.project-group { margin-bottom: 16px; }
.project-group[hidden], .project-card[hidden] { display: none; }
.project-card .p-role { color: #3c9b35; font-size: 10.5px; text-align: right; }
.project-empty { color: #666; font-size: 12px; padding: 20px 0; text-align: center; }
.toolbar-search {
    display: flex; align-items: center; gap: 4px; flex: 0 1 170px;
    background: #fff; border: 1px solid #7f9db9; padding: 1px 5px; color: #7a7a7a;
}
.toolbar-search input {
    border: 0; outline: 0; min-width: 0; width: 100%; padding: 1px 0;
    font: 11px Tahoma, Verdana, Arial, sans-serif; color: #000; background: transparent;
}
@media (max-width: 768px) {
    #projects-window .window-toolbar .address-bar, #projects-window .toolbar-label { display: none; }
    .toolbar-search { flex: 1; }
}

/* Blog & speaking */
.speaking-role {
    font-size: 11.5px; color: #222; line-height: 1.45; margin-bottom: 8px;
    padding: 6px 8px; background: #eef6ff; border: 1px solid #c0d5f0; border-radius: 3px;
}
.speaking-role span { color: #777; font-size: 10.5px; }
.blog-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.blog-actions .xp-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 16px; text-decoration: none; }

/* Menu bar under the title bar (built by menuBar.js) */
.window-menubar {
    display: flex; align-items: stretch; height: 21px; flex-shrink: 0;
    background: #ece9d8; border-bottom: 1px solid #d4d0c8; box-shadow: 0 1px 0 #fff;
}
.menubar-item {
    background: none; border: 0; padding: 0 7px; margin: 1px 0;
    font: 11px Tahoma, Verdana, Arial, sans-serif; color: #000; cursor: default;
}
.menubar-item:hover, .menubar-item.is-open { background: #316ac5; color: #fff; }
.menubar-item:focus-visible { outline: 1px dotted #000; outline-offset: -2px; }
.menubar-flag {
    margin-left: auto; height: 21px; width: 34px; padding: 2px 8px;
    object-fit: contain; border-left: 1px solid #d4d0c8; background: #fff;
}
.app-window.no-statusbar .window-statusbar { display: none; }

/* XP Explorer toolbar buttons: flat until hovered, then a soft raised edge */
.toolbar-btn {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid transparent; border-radius: 3px; text-decoration: none;
}
.toolbar-btn:hover {
    border-color: #cecbbd; color: #000;
    background: linear-gradient(180deg, #fff 0%, #f3f2ee 60%, #e7e5dc 100%);
}
.toolbar-btn:active { background: #e3e1d8; box-shadow: inset 1px 1px 1px rgba(0,0,0,0.15); }
.toolbar-btn img { width: 20px; height: 20px; object-fit: contain; }
.toolbar-sep { width: 1px; align-self: stretch; margin: 2px 3px; background: #d4d0c8; box-shadow: 1px 0 0 #fff; }
@media (max-width: 768px) {
    .window-toolbar { flex-wrap: wrap; }
}

/* Internet Explorer window */
.ie-toolbar { min-height: 34px; }
.ie-toolbar .toolbar-btn { color: #000; font-size: 11px; padding: 2px 6px; }
.ie-toolbar .toolbar-btn img { width: 24px; height: 24px; }
.toolbar-btn:disabled { color: #aca899; cursor: default; }
.toolbar-btn:disabled img { filter: grayscale(1); opacity: 0.55; }
.toolbar-btn:disabled:hover { border-color: transparent; background: none; }
.ie-address {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 2px 6px;
    background: #ece9d8; border-bottom: 1px solid #aca899; font-size: 11px; color: #555;
}
.ie-address-field {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px;
    background: #fff; border: 1px solid #7f9db9; padding: 1px 4px;
}
.ie-address-field img, .ie-go img { width: 16px; height: 16px; }
.ie-address-field input {
    flex: 1; min-width: 0; border: 0; outline: 0; padding: 2px 0; background: transparent;
    font: 11px Tahoma, Verdana, Arial, sans-serif; color: #000;
}
.browser-body { padding: 0; overflow: hidden; position: relative; }
.browser-body iframe { flex: 1; width: 100%; border: 0; display: block; background: #fff; }
.browser-body iframe[hidden], .browser-blocked[hidden] { display: none; }
.browser-blocked { display: flex; gap: 14px; align-items: flex-start; padding: 28px; max-width: 640px; }
.browser-blocked img { width: 40px; height: 40px; object-fit: contain; }
.browser-blocked h2 { font: bold 16px 'Trebuchet MS', Tahoma, sans-serif; color: #1d54b8; margin: 4px 0 8px; }
.browser-blocked p { font-size: 12px; color: #333; margin-bottom: 12px; line-height: 1.5; }
.browser-blocked .xp-btn { display: inline-block; text-decoration: none; }
.browser-statusbar { gap: 8px; }
#browser-status { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-zone { display: flex; align-items: center; gap: 4px; padding-left: 8px; border-left: 1px solid #c5c2b2; white-space: nowrap; }
.browser-zone i { color: #2a7fd4; }
.browser-progress {
    display: none; gap: 2px; width: 90px; height: 11px; padding: 1px; overflow: hidden;
    border: 1px solid #a8a596; background: #fff;
}
.app-window.is-loading .browser-progress { display: flex; }
.browser-progress span { flex: 0 0 8px; background: #2fbf2f; animation: ieProgress 1.2s linear infinite; }
@keyframes ieProgress { from { transform: translateX(-30px); } to { transform: translateX(90px); } }
/* The menu-bar flag "throbs" while a page loads, like IE's */
.app-window.is-loading .menubar-flag { animation: ieThrob 0.9s ease-in-out infinite alternate; }
@keyframes ieThrob { from { transform: scale(0.82); filter: saturate(0.6); } to { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) {
    .browser-progress span, .app-window.is-loading .menubar-flag { animation: none; }
}
@media (max-width: 768px) {
    .ie-toolbar .toolbar-btn img { width: 20px; height: 20px; }
    #browser-newwindow { font-size: 0; gap: 0; }
}