@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --bg: #090a0d;
  --panel: rgba(19, 21, 26, 0.94);
  --panel-soft: rgba(30, 32, 38, 0.86);
  --text: #ecebe7;
  --muted: #9c9b98;
  --line: rgba(255,255,255,0.12);
  --warm: #c9a98d;
  --red: #bd6670;
  --shadow: 0 24px 70px rgba(0,0,0,0.55);
  --body: 'Inter', Arial, sans-serif;
  --title: 'Barlow Condensed', Arial, sans-serif;
}

* { box-sizing: border-box; }
button, input { font: inherit; }
button { color: inherit; }
body { margin: 0; overflow: hidden; color: var(--text); background: var(--bg); font-family: var(--body); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.computer-shell, .lock-screen, .desktop { width: 100vw; height: 100vh; min-height: 520px; }
.computer-shell::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .17;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 3px 4px);
}

.lock-screen {
  position: relative; overflow: hidden;
  background: #08090c url('../../img/Ecran Mireya.png') center/cover no-repeat;
  transition: opacity .65s ease, transform .8s ease, filter .65s ease;
}
.lock-vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(3,4,6,.08) 35%, rgba(3,4,6,.2) 55%, rgba(3,4,6,.78) 100%),
    radial-gradient(circle at 50% 44%, transparent 22%, rgba(3,4,6,.4) 100%);
}
.lock-panel {
  position: absolute; z-index: 2; top: 66%; left: 50%;
  width: min(360px, calc(100vw - 2rem)); transform: translate(-50%, -50%);
}
.page-label { color: var(--muted); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; }
.password-row { display: grid; grid-template-columns: 1fr 52px; overflow: hidden; border: 1px solid rgba(255,255,255,.36); border-radius: 5px; background: rgba(8,9,12,.75); backdrop-filter: blur(12px); }
.password-row:focus-within { border-color: rgba(201,169,141,.8); box-shadow: 0 0 0 3px rgba(201,169,141,.12); }
.password-row input, .password-row button { min-width: 0; border: 0; color: var(--text); background: transparent; }
.password-row input { padding: .9rem 1rem; outline: 0; }
.password-row button { border-left: 1px solid var(--line); cursor: pointer; font-size: 1.25rem; }
.password-row button:hover { background: rgba(255,255,255,.08); }
.login-denied { animation: denied .38s ease; }
@keyframes denied { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-8px) } 55% { transform: translateX(7px) } 80% { transform: translateX(-3px) } }
.chapter-return { color: rgba(255,255,255,.65); font-size: .68rem; letter-spacing: .11em; text-decoration: none; text-transform: uppercase; }
.chapter-return:hover { color: white; }
.lock-return, .lock-offline { position: absolute; z-index: 2; bottom: 1.25rem; }
.lock-return { left: 1.25rem; }
.lock-offline { right: 1.25rem; margin: 0; color: rgba(255,255,255,.4); font-size: .64rem; text-transform: uppercase; }

.desktop {
  position: fixed; inset: 0; visibility: hidden; opacity: 0; overflow: hidden;
  background: #101115 url('wallpaper.png') center/cover no-repeat;
  transition: opacity .75s ease;
}
.desktop::before { content: ""; position: absolute; inset: 0; background: linear-gradient(130deg, rgba(5,6,8,.32), rgba(5,6,8,.08) 55%, rgba(5,6,8,.5)); pointer-events: none; }
.is-unlocking .lock-screen { filter: blur(5px); transform: scale(1.03); opacity: 0; }
.is-unlocked .lock-screen { display: none; }
.is-unlocked .desktop { visibility: visible; opacity: 1; }
.system-bar {
  position: relative; z-index: 1000; display: flex; align-items: center; gap: 1rem; height: 38px; padding: 0 1rem;
  border-bottom: 1px solid var(--line); color: rgba(255,255,255,.64); background: rgba(9,10,13,.82); backdrop-filter: blur(16px); font-size: .66rem; text-transform: uppercase;
}
.system-brand { color: white; font: 700 1rem var(--title); letter-spacing: .12em; }
.system-session { letter-spacing: .1em; }
.system-spacer { flex: 1; }
.desktop-icons {
  position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; grid-template-columns: repeat(4, 104px); gap: 2rem 1.3rem; transform: translate(-50%,-50%);
}
.desktop-icon {
  display: grid; justify-items: center; gap: .55rem; min-height: 94px; padding: .7rem .35rem; border: 1px solid transparent; border-radius: 7px;
  background: transparent; cursor: pointer; text-shadow: 0 2px 8px #000;
}
.desktop-icon:hover, .desktop-icon:focus-visible { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); outline: 0; }
.desktop-icon span { display: grid; place-items: center; width: 54px; height: 48px; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; background: rgba(22,23,28,.88); box-shadow: 0 7px 20px rgba(0,0,0,.35); font: 700 1.7rem var(--title); }
.desktop-icon img { width: 27px; height: 27px; filter: invert(1); opacity: .82; }
.desktop-icon:hover img, .desktop-icon:focus-visible img { opacity: 1; }
.desktop-icon strong { font-size: .72rem; font-weight: 500; }
.desktop-footer {
  position: absolute; z-index: 1000; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; padding: .7rem 1rem;
  border-top: 1px solid var(--line); color: rgba(255,255,255,.45); background: rgba(9,10,13,.76); backdrop-filter: blur(12px); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
}

.window-layer { position: absolute; inset: 38px 0 38px; z-index: 5; pointer-events: none; }
.os-window {
  position: absolute; display: flex; flex-direction: column; width: min(720px, calc(100vw - 2rem)); height: min(560px, calc(100vh - 100px));
  overflow: hidden; border: 1px solid rgba(255,255,255,.17); border-radius: 7px; background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(18px); pointer-events: auto;
}
.os-window.maximized { inset: 8px !important; width: auto; height: auto; }
.text-window { width: min(560px, calc(100vw - 2rem)); height: min(430px, calc(100vh - 100px)); }
.window-titlebar {
  display: flex; align-items: center; min-height: 39px; padding-left: .85rem; border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.025); cursor: move; user-select: none; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
}
.window-actions { display: flex; margin-left: auto; align-self: stretch; }
.window-actions button { width: 42px; border: 0; border-left: 1px solid var(--line); background: transparent; cursor: pointer; }
.window-actions button:hover { background: rgba(255,255,255,.08); }
.window-actions button:last-child:hover { background: rgba(189,102,112,.65); }
.window-content { flex: 1; min-height: 0; overflow: auto; }

.file-explorer { min-height: 100%; }
.explorer-toolbar { display: flex; align-items: center; gap: .7rem; min-height: 44px; padding: .45rem .8rem; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.025); color: var(--muted); font-size: .67rem; }
.explorer-toolbar button { width: 32px; height: 30px; border: 1px solid var(--line); border-radius: 3px; background: rgba(255,255,255,.04); cursor: pointer; }
.explorer-toolbar button:hover:not(:disabled) { background: rgba(255,255,255,.1); }
.explorer-toolbar button:disabled { cursor: default; opacity: .3; }
.file-list { display: grid; padding: .8rem; }
.file-row, .track-row {
  display: grid; align-items: center; width: 100%; border: 0; border-bottom: 1px solid rgba(255,255,255,.07); background: transparent; cursor: pointer; text-align: left;
}
.file-row { grid-template-columns: 48px 1fr; gap: .8rem; padding: .75rem; }
.file-row:hover, .track-row:hover, .track-row.active { background: rgba(255,255,255,.06); }
.folder-row:hover { background: rgba(201,169,141,.08); }
.file-row strong, .file-row small { display: block; }
.file-row strong { margin-bottom: .25rem; font-size: .78rem; }
.file-row small { color: var(--muted); font-size: .65rem; }
.file-symbol { display: grid; place-items: center; width: 38px; height: 42px; border: 1px solid var(--line); border-radius: 3px; color: #bbb4aa; background: rgba(255,255,255,.04); font-size: .55rem; }
.folder-symbol { border-color: rgba(201,169,141,.35); color: var(--warm); background: rgba(201,169,141,.08); }
.file-symbol.damaged { color: var(--red); font-size: 1rem; }
.text-document { flex: 1; min-height: 0; overflow-y: auto; padding: 1.4rem; background: #d9d5c9; color: #242321; }
.text-document p { margin: 0 0 1.5rem; color: #77736c; font-size: .58rem; letter-spacing: .14em; }
.text-document pre { margin: 0; white-space: pre-wrap; font: 500 .86rem/1.9 var(--body); }
.text-correction { display: inline-flex; flex-wrap: wrap; gap: .45rem; align-items: baseline; }
.text-erased { color: #77736c; text-decoration: line-through 2px rgba(126, 57, 57, .75); text-decoration-skip-ink: none; }
.text-replacement { color: #242321; font-style: italic; }
.trash-header { padding: .8rem 1rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .65rem; }

.image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; padding: 1rem; }
.image-card { overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.03); cursor: pointer; text-align: left; }
.image-card:hover { border-color: rgba(201,169,141,.65); transform: translateY(-2px); }
.image-card img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: saturate(.7); }
.image-card span { display: block; padding: .65rem; color: var(--muted); font-size: .66rem; }
.image-viewer { position: fixed; inset: 0; z-index: 10000; display: none; place-items: center; padding: 2rem; background: rgba(3,4,6,.92); }
.image-viewer.active { display: grid; }
.image-viewer button { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: #121318; cursor: pointer; font-size: 1.3rem; }
.image-viewer figure { margin: 0; text-align: center; }
.image-viewer img { display: block; max-width: min(100%, 1100px); max-height: 78vh; border: 1px solid var(--line); box-shadow: var(--shadow); }
.image-viewer figcaption { margin-top: .8rem; color: var(--muted); font-size: .72rem; }

.music-layout { display: grid; grid-template-columns: 1.2fr .8fr; grid-template-rows: minmax(420px, 1fr) auto; min-height: 100%; }
.track-list { padding: .7rem; border-right: 1px solid var(--line); }
.track-row { grid-template-columns: 32px 1fr auto; gap: .5rem; padding: .75rem .5rem; }
.track-row span, .track-row small { color: var(--muted); font-size: .64rem; }
.track-row strong { font-size: .72rem; font-weight: 500; }
.audio-player { min-height: 0; padding: 1.3rem; text-align: center; }
.player-main { display: grid; align-content: center; justify-items: center; min-height: 100%; }
.audio-player p { color: var(--muted); font-size: .58rem; letter-spacing: .14em; }
.audio-player h3 { margin: .6rem 0 .25rem; font: 700 1.45rem var(--title); }
.audio-player > strong, .audio-player small { color: var(--muted); font-size: .65rem; font-weight: 400; }
.player-disc { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle, #1c1d22 0 14%, #08090b 15% 48%, #27282e 49% 51%, #0d0e11 52%); font-size: 1.2rem; }
.progress { width: 100%; margin: 1.2rem 0 .7rem; accent-color: var(--warm); cursor: pointer; }
.player-controls { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; font-size: .6rem; }
.player-controls button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
.volume-control { display: grid; grid-template-columns: auto 1fr 30px; align-items: center; gap: .55rem; width: 100%; margin-bottom: 1rem; color: var(--muted); font-size: .6rem; }
.volume-control input { min-width: 0; accent-color: var(--warm); cursor: pointer; }
.volume-control strong { color: var(--text); font-size: .58rem; font-weight: 500; text-align: right; }
.music-lyrics { grid-column: 1 / -1; max-height: 460px; overflow-y: auto; border-top: 1px solid var(--line); background: rgba(8,9,12,.42); }
.music-lyrics:empty, .music-lyrics[hidden] { display: none; }
.lyrics-panel { width: min(760px, 100%); margin: auto; padding: 1.4rem 2rem 2.5rem; text-align: left; }
.lyrics-panel header { position: sticky; top: -1.4rem; z-index: 1; display: flex; justify-content: space-between; gap: 1rem; margin: -1.4rem -2rem 1rem; padding: 1rem 2rem; border-bottom: 1px solid var(--line); color: var(--muted); background: rgba(13,14,17,.96); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.lyrics-panel header strong { color: var(--text); }
.lyrics-copy h4 { margin: 1.4rem 0 .7rem; color: var(--warm); font-size: .58rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.lyrics-copy p { display: grid; gap: .18rem; margin: 0 0 .8rem; letter-spacing: 0; line-height: 1.4; }
.lyrics-copy p span { color: var(--text); font-size: .76rem; font-weight: 500; }
.lyrics-copy p em { color: var(--muted); font-size: .69rem; font-style: normal; }

.window-content:has(.messages-layout) { overflow: hidden; }
.messages-layout { display: grid; grid-template-columns: 210px 1fr; height: 100%; min-height: 0; overflow: hidden; }
.conversation-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--line); }
.conversation-list button { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: .65rem; width: 100%; padding: .75rem; border: 0; border-bottom: 1px solid rgba(255,255,255,.06); background: transparent; cursor: pointer; text-align: left; }
.conversation-list button.active, .conversation-list button:hover { background: rgba(255,255,255,.06); }
.conversation-list span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #34353a; font-size: .7rem; }
.conversation-list strong { font-size: .7rem; font-weight: 500; }
.conversation-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: rgba(9,10,13,.42); }
.conversation-pane header { padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.conversation-pane header strong, .conversation-pane header small { display: block; }
.conversation-pane header strong { font-size: .75rem; }
.conversation-pane header small { margin-top: .2rem; color: var(--muted); font-size: .56rem; }
.message-thread { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1rem; }
.message { width: fit-content; max-width: 72%; margin: .35rem 0; padding: .55rem .7rem; border-radius: 8px; background: #303137; font-size: .7rem; line-height: 1.45; }
.message.me { margin-left: auto; background: #53483f; }
.message.system { margin: 1rem auto; padding: .25rem; color: var(--muted); background: transparent; font-size: .58rem; font-style: italic; }
.message-time { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .7rem; margin: 1.4rem 0; color: var(--muted); font-size: .55rem; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.message-time::before, .message-time::after { content: ""; height: 1px; background: linear-gradient(90deg, transparent, var(--line)); }
.message-time::after { background: linear-gradient(90deg, var(--line), transparent); }

.browser-app { display: flex; flex-direction: column; min-height: 100%; height: 100%; }
.browser-toolbar { flex: none; border-bottom: 1px solid var(--line); color: var(--muted); background: #202127; font-size: .6rem; }
.browser-tabs { display: flex; align-items: end; min-height: 34px; padding: .35rem .45rem 0; gap: .25rem; background: #17181d; }
.browser-tabs button { height: 29px; border: 0; border-radius: 6px 6px 0 0; color: var(--muted); background: transparent; cursor: pointer; }
.browser-tabs > button:last-child { width: 30px; font-size: 1rem; }
.browser-tab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; width: 230px; padding: 0 .65rem; }
.browser-tab.active { color: var(--text); background: #292a31; }
.browser-tab strong { overflow: hidden; font-size: .6rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.browser-address-row { display: grid; grid-template-columns: auto minmax(160px, 1fr) auto auto; align-items: center; gap: .55rem; padding: .45rem .6rem; }
.browser-nav { display: flex; gap: .15rem; }
.browser-nav button, .browser-menu { width: 28px; height: 28px; border: 0; border-radius: 50%; color: var(--muted); background: transparent; cursor: pointer; }
.browser-nav button:hover:not(:disabled), .browser-menu:hover { color: white; background: rgba(255,255,255,.08); }
.browser-nav button:disabled { opacity: .25; cursor: default; }
.address-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .45rem; padding: .2rem .45rem .2rem .7rem; border: 1px solid transparent; border-radius: 20px; background: #15161a; }
.address-bar:focus-within { border-color: rgba(201,169,141,.5); }
.address-bar input { min-width: 0; padding: .3rem 0; border: 0; outline: 0; color: #d8d7d3; background: transparent; font-size: .62rem; }
.address-bar button { border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: .9rem; }
.address-bar button.active { color: var(--warm); }
.browser-offline { padding: .3rem .45rem; border-radius: 3px; color: #d0a3a8; background: rgba(189,102,112,.12); text-transform: uppercase; }
.browser-favorites { display: flex; align-items: center; gap: .35rem; overflow-x: auto; padding: .35rem .7rem .45rem; border-top: 1px solid rgba(255,255,255,.06); white-space: nowrap; }
.browser-favorites strong { color: rgba(255,255,255,.75); font-size: .57rem; letter-spacing: .1em; text-transform: uppercase; }
.browser-favorites button { padding: .3rem .5rem; border: 0; border-radius: 3px; color: var(--muted); background: rgba(255,255,255,.04); cursor: pointer; font-size: .58rem; }
.browser-favorites button:hover { color: white; background: rgba(255,255,255,.08); }
.browser-layout { display: grid; flex: 1; grid-template-columns: 230px 1fr; min-height: 0; background: #d5d1c5; }
.browser-layout > aside { overflow: auto; padding: .65rem; border-right: 1px solid var(--line); background: var(--panel-soft); color: var(--text); }
.browser-side-title { display: flex; align-items: center; justify-content: space-between; }
.browser-side-title button { border: 0; color: var(--muted); background: transparent; }
.browser-layout aside h3 { margin: .5rem .4rem; color: var(--muted); font-size: .57rem; letter-spacing: .12em; text-transform: uppercase; }
.history-search { display: grid; grid-template-columns: auto 1fr; gap: .35rem; margin: .3rem 0 .7rem; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 4px; background: rgba(0,0,0,.15); }
.history-search input { min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: .58rem; }
.browser-layout > aside > button { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: .1rem .35rem; width: 100%; padding: .5rem .4rem; border: 0; border-radius: 3px; background: transparent; cursor: pointer; text-align: left; }
.browser-layout > aside > button span { grid-row: 1 / 3; color: #797a80; font-size: .53rem; }
.browser-layout > aside > button strong, .browser-layout > aside > button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-layout > aside > button strong { font-size: .61rem; font-weight: 500; }
.browser-layout > aside > button small { color: var(--muted); font-size: .52rem; }
.browser-layout > aside > button:hover, .browser-layout > aside > button.active { background: rgba(255,255,255,.07); }
.browser-layout aside p { margin: .35rem .4rem; color: var(--muted); font-size: .6rem; }
.browser-layout > article { min-height: 100%; overflow: auto; background: #e4e1d9; color: #242321; }
.browser-page { display: grid; grid-template-columns: minmax(0, 1fr) 180px; max-width: 850px; min-height: 100%; margin: auto; background: #f0eee8; }
.browser-page-header { display: flex; grid-column: 1 / -1; align-items: center; gap: .65rem; height: fit-content; padding: .7rem 1rem; border-bottom: 1px solid #cbc7bd; background: #dad6cc; }
.site-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: white; background: #47484d; font: 700 1rem var(--title); }
.browser-page-header div { display: grid; gap: .12rem; }
.browser-page-header strong { font-size: .68rem; }
.browser-page-header small { color: #77736c; font-size: .52rem; }
.browser-page-header button { margin-left: auto; padding: .35rem .7rem; border: 1px solid #aaa69d; border-radius: 3px; background: transparent; font-size: .55rem; }
.browser-page main { padding: 1.8rem 2rem 2.5rem; }
.browser-layout h2 { margin: 1rem 0 .2rem; font: 700 2rem var(--title); }
.browser-layout em { color: #77736c; font-size: .7rem; }
.browser-copy { max-width: 560px; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid #aaa69d; font-size: .76rem; line-height: 1.8; }
.browser-copy p { margin: 0 0 1rem; }
.browser-page footer { display: grid; gap: .35rem; margin-top: 1.6rem; padding: 1rem; border: 1px solid #cbc7bd; background: #e5e1d8; font-size: .58rem; }
.browser-page footer span { color: #77736c; }
.page-related { padding: 1.6rem .8rem; border-left: 1px solid #cbc7bd; background: #e8e5dd; }
.page-related strong { display: block; margin-bottom: .7rem; color: #77736c; font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; }
.page-related button { display: block; width: 100%; padding: .65rem 0; border: 0; border-bottom: 1px solid #cbc7bd; color: #3d5269; background: transparent; cursor: pointer; text-align: left; font-size: .62rem; line-height: 1.4; }
.browser-search-page { max-width: 650px; margin: auto; padding: 2.5rem; }
.search-brand { color: #665c52; font: 700 2rem var(--title); letter-spacing: .06em; }
.browser-search-page > p { color: #77736c; font-size: .68rem; line-height: 1.6; }
.browser-search-page div { display: grid; margin-top: 1.5rem; }
.browser-search-page button { display: grid; gap: .25rem; padding: 1rem 0; border: 0; border-bottom: 1px solid #cbc7bd; background: transparent; cursor: pointer; text-align: left; }
.browser-search-page button small { color: #65735f; font-size: .52rem; }
.browser-search-page button strong { color: #3d5269; font: 700 1.05rem var(--title); }
.browser-search-page button span { color: #77736c; font-size: .58rem; }

@media (max-width: 720px) {
  .computer-shell, .lock-screen, .desktop { min-height: 100dvh; height: 100dvh; }
  .system-session, .system-bar span:nth-last-of-type(2), .desktop-footer span { display: none; }
  .desktop-icons { top: 48%; width: min(340px, calc(100vw - 2rem)); grid-template-columns: repeat(3, 1fr); gap: 1.1rem .5rem; }
  .desktop-icon { min-height: 82px; padding: .4rem .2rem; }
  .desktop-icon span { width: 47px; height: 43px; }
  .window-layer { inset: 38px 0 39px; }
  .os-window, .text-window, .os-window.maximized { inset: 0 !important; width: 100%; height: 100%; border: 0; border-radius: 0; }
  .window-titlebar { cursor: default; }
  .image-grid { grid-template-columns: repeat(2, 1fr); }
  .music-layout, .messages-layout, .browser-layout { grid-template-columns: 1fr; }
  .music-layout { grid-template-rows: auto auto auto; }
  .track-list, .conversation-list, .browser-layout > aside { max-height: 38vh; border-right: 0; border-bottom: 1px solid var(--line); }
  .audio-player { min-height: 300px; }
  .music-lyrics { grid-column: 1; max-height: none; }
  .lyrics-panel { padding: 1.2rem; }
  .lyrics-panel header { top: -1.2rem; margin: -1.2rem -1.2rem 1rem; padding: 1rem 1.2rem; }
  .browser-app { height: auto; min-height: 100%; }
  .browser-address-row { grid-template-columns: auto 1fr auto; }
  .browser-offline { display: none; }
  .browser-layout { height: auto; }
  .browser-layout > article { min-height: 50vh; }
  .browser-page { grid-template-columns: 1fr; }
  .browser-page main { padding: 1.3rem; }
  .page-related { border-top: 1px solid #cbc7bd; border-left: 0; }
  .lock-offline { display: none; }
  .lock-screen { background-position: center top; }
  .lock-vignette {
    background: linear-gradient(180deg, rgba(3,4,6,.04) 20%, rgba(3,4,6,.3) 56%, rgba(3,4,6,.92) 100%);
  }
  .lock-panel {
    top: auto; right: 1rem; bottom: 3.5rem; left: 1rem; width: auto;
    transform: none;
  }
}

@media (max-width: 420px) {
  .system-bar { gap: .6rem; padding: 0 .6rem; }
  .image-grid { grid-template-columns: 1fr; }
  .lock-return { right: 1.25rem; text-align: center; }
}