:root { --blue: #277ed0; --blue-deep: #1768b5; --white: #f5f7fb; --ink: #173355; --muted: #b9d7f2; --yellow: #ffda5e; --green: #86da66; --orange: #ffb84c; --window: rgba(247, 250, 255, .97); --maxz: 100; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { margin: 0; color: var(--white); background: var(--blue); font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', 'Microsoft YaHei', monospace; }
body:not(.is-launched) .desktop { transform: scale(1.015); filter: blur(6px); }
button, a { font: inherit; }
button { border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

.boot-screen { position: fixed; inset: 0; z-index: 1000; overflow: hidden; color: #c9d0d5; background: #050706; transition: opacity .7s, visibility .7s; }
.boot-screen::after { content: ''; position: absolute; inset: 0; opacity: .12; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.045) 3px); mix-blend-mode: screen; }
.boot-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.desktop-context-menu [data-context-action="terminal"],
#openPaletteButton,
#commandPalette { display: none !important; }
.linux-boot { position: relative; z-index: 1; width: 100%; height: 100%; padding: clamp(18px, 3vw, 42px); overflow: hidden; color: #bfc7c2; background: radial-gradient(circle at 50% 45%, #111611 0, #060806 60%); font: 12px/1.5 'Cascadia Mono', Consolas, monospace; text-shadow: 0 0 5px rgba(187,255,197,.15); }
.linux-boot-header { display: flex; justify-content: space-between; padding-bottom: 10px; color: #68726b; border-bottom: 1px solid #1c241e; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; }
.linux-boot-logo { position: absolute; top: clamp(64px, 10vh, 100px); right: clamp(25px, 6vw, 100px); display: flex; align-items: baseline; gap: 9px; color: #222b24; user-select: none; }
.linux-boot-logo b { font-size: clamp(28px, 5vw, 72px); letter-spacing: -5px; }
.linux-boot-logo span { color: #405544; font-size: clamp(13px, 2vw, 28px); }
.boot-progress { position: absolute; z-index: 2; top: clamp(82px, 14vh, 138px); left: 50%; width: min(460px, calc(100vw - 48px)); color: #89968d; transform: translateX(-50%); }
.boot-progress-row { display: flex; align-items: center; gap: 12px; }
.boot-progress-value { flex: 0 0 36px; color: #69d276; font-size: 10px; font-weight: 400; text-align: left; text-shadow: 0 0 8px rgba(105, 210, 118, .45); }
.boot-progress-track { position: relative; flex: 1 1 auto; min-width: 0; height: 7px; border: 1px solid #1d2b20; border-radius: 999px; background: #0b120d; box-shadow: inset 0 0 8px rgba(0, 0, 0, .7), 0 0 12px rgba(102, 210, 111, .08); }
.boot-progress-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #438e4d, #76d57d); box-shadow: 0 0 10px rgba(105, 210, 118, .48); transition: width .18s linear; }
.boot-progress-pet { position: absolute; bottom: 100%; left: 0; width: 60px; height: 65px; pointer-events: none; transform: translateX(-50%); transition: left .18s linear; }
.boot-progress-pet-sprite { display: block; width: 60px; height: 65px; background-image: url('./assets/rem-pet/spritesheet-optimized.webp'); background-repeat: no-repeat; background-size: 480px 585px; background-position: 0 -65px; image-rendering: auto; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); will-change: background-position; }
.boot-progress-status { margin: 9px 0 0; color: #657168; font-size: 10px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linux-boot-log { position: absolute; left: clamp(18px, 4vw, 65px); right: clamp(18px, 4vw, 65px); bottom: clamp(220px, 31vh, 300px); max-height: 48vh; overflow: hidden; }
.linux-boot-log p { margin: 2px 0; animation: linux-line .16s steps(2) both; }
.boot-kernel { color: #7c8780; }
.boot-log-line > span { display: inline-block; width: 92px; color: #727c75; }
.boot-log-line.ok > span b { color: #64d26f; font-weight: 700; text-shadow: 0 0 8px rgba(100,210,111,.42); }
.boot-log-line.info > span { color: #d7a746; }
.linux-boot-ready { position: absolute; left: clamp(18px, 4vw, 65px); bottom: clamp(30px, 6vh, 62px); opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; }
.linux-boot-ready.visible { opacity: 1; transform: none; }
.linux-boot-ready p { margin: 3px 0; }
.linux-boot-ready > p:first-child { margin-bottom: 15px; color: #e1e6e2; }
.linux-boot-ready > p:first-child span { color: #73cb7c; }
.boot-login b { color: #e2e6e3; font-weight: 400; }
.boot-last-login { color: #68716a; }
.boot-prompt span { color: #6ed37a; }
.boot-prompt b { color: #5f9dd3; }
.linux-boot-ready button { display: flex; align-items: center; gap: 28px; margin-top: 20px; padding: 10px 14px; color: #0b0e0b; border: 0; background: #a7d7a8; font-size: 11px; }
.linux-boot-ready button:hover, .linux-boot-ready button:focus-visible { color: #fff; outline: 1px solid #76d17d; outline-offset: 3px; background: #23772d; }
.linux-boot-ready button b { font-size: 14px; }
.blink { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes linux-line { from { opacity: 0; transform: translateY(2px); } }
.boot-bar, .window-header { display: flex; align-items: center; justify-content: space-between; }
.window-dot { width: 9px; height: 9px; border-radius: 50%; }.red { background: #ff6d68; }.yellow { background: #ffd05b; }.green { background: #83dc70; }

.desktop { position: relative; width: 100vw; height: 100vh; overflow: hidden; background: radial-gradient(circle at 50% 52%, rgba(255,255,255,.06), transparent 34%), linear-gradient(135deg, var(--blue-deep), var(--blue)); transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .55s; }.desktop::before, .desktop::after { content: ''; position: absolute; pointer-events: none; }.desktop::before { inset: 0; opacity: .78; background-image: radial-gradient(circle, var(--yellow) 0 1px, transparent 1.7px), radial-gradient(circle, rgba(255,255,255,.35) 0 1px, transparent 1.5px); background-position: 4% 10%, 16% 18%; background-size: 170px 140px, 230px 190px; }.desktop::after { left: 9%; bottom: -42%; width: 72%; height: 80%; opacity: .11; border: 1px solid #fff; border-radius: 50%; transform: rotate(-18deg); box-shadow: 0 0 0 50px rgba(255,255,255,.04), 0 0 0 100px rgba(255,255,255,.03); }.stars { position: absolute; z-index: 0; width: 6px; height: 6px; background: var(--yellow); transform: rotate(45deg); filter: drop-shadow(0 0 4px rgba(255,218,94,.8)); }.stars-a { left: 25%; top: 29%; }.stars-b { left: 54%; top: 19%; width: 4px; height: 4px; }.stars-c { left: 71%; top: 66%; width: 8px; height: 8px; }.aurora { position: absolute; z-index: 0; width: 33vw; height: 15vw; opacity: .12; border-radius: 50%; filter: blur(30px); background: #74dcff; transform: rotate(-20deg); }.aurora-a { left: 18%; bottom: -3%; }.aurora-b { right: 17%; top: 13%; background: #f7a7d8; }

.desktop-topbar { position: relative; z-index: 4; display: flex; align-items: center; height: 52px; padding: 0 20px; color: var(--muted); }.os-brand { color: var(--yellow); font-size: 15px; font-weight: 700; font-style: italic; }.os-brand i { color: #fff; font-style: normal; }.top-links { display: flex; gap: 24px; margin-left: 24px; }.top-links button { padding: 5px 0; color: var(--muted); background: transparent; font-size: 12px; }.top-links button:hover { color: white; }.desktop-topbar time { margin-left: auto; font-size: 12px; }
.desktop-art { position: absolute; z-index: 1; left: 50%; bottom: 24%; width: 180px; height: 180px; transform: translateX(-50%); }.desktop-art img { position: absolute; inset: 11px; width: calc(100% - 22px); height: calc(100% - 22px); object-fit: cover; opacity: .9; border: 3px solid rgba(255,255,255,.6); border-radius: 50%; box-shadow: 0 0 35px rgba(255,255,255,.2); }.avatar-orbit { position: absolute; inset: -18px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; transform: rotate(25deg) scaleY(.42); }.avatar-orbit::after { content: '✦'; position: absolute; top: 7px; left: 20%; color: var(--yellow); font-size: 22px; }
.desktop-icons { position: absolute; z-index: 4; top: 74px; right: 32px; display: grid; grid-template-columns: repeat(3, 88px); gap: 18px 24px; }.desktop-icon { width: 88px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35); background: transparent; font-size: 10px; }.desktop-icon:hover { color: var(--yellow); }.desktop-icon:focus-visible { outline: 2px solid var(--yellow); }.icon { width: 48px; height: 44px; display: grid; place-items: center; position: relative; color: #2e79bd; background: #f8fafc; border-radius: 11px; box-shadow: 0 5px 10px rgba(0,0,0,.13); font-size: 10px; font-weight: 700; text-shadow: none; }.folder-icon { color: #6f561b; background: linear-gradient(#ffe782 0 20%, #ffd968 20%); border-radius: 10px 10px 12px 12px; font-size: 0; }.folder-icon::before { content: ''; position: absolute; top: -4px; left: 7px; width: 20px; height: 10px; border-radius: 5px 5px 0 0; background: #ffe782; }.file-icon::after { content: ''; position: absolute; right: 7px; bottom: 7px; width: 23px; height: 4px; background: #2c79be; border-radius: 2px; }.file-icon.html::before { content: '<html>'; position: absolute; top: 9px; color: #2c79be; font-size: 8px; }.app-icon { color: #e97848; font-size: 25px; }.desktop-tip { position: absolute; z-index: 2; left: 25px; bottom: 80px; color: rgba(255,255,255,.75); font-size: 11px; }.prompt { color: #d8f6b8; }.command { color: var(--yellow); }

.dock { position: absolute; z-index: 20; left: 50%; bottom: 28px; display: flex; gap: 4px; padding: 6px; border: 6px solid rgba(255,255,255,.72); border-radius: 35px; background: rgba(236,244,253,.92); box-shadow: 0 10px 30px rgba(0,0,0,.18); transform: translateX(-50%); }.dock-item { min-width: 86px; display: flex; flex-direction: column; gap: 1px; align-items: center; padding: 9px 14px; color: #5f6f86; border-radius: 25px; background: transparent; font-size: 11px; }.dock-item b { color: #9da9b9; font-size: 9px; font-weight: 400; }.dock-item.active, .dock-item:hover { color: #fff; background: #398bd8; }.dock-item.active b, .dock-item:hover b { color: #d6edff; }.dock-contact { min-width: 66px; }

.app-window { position: absolute; z-index: 50; top: 15%; left: 18%; width: min(560px, calc(100vw - 40px)); max-height: 70vh; overflow: hidden; color: var(--ink); border: 1px solid rgba(255,255,255,.85); border-radius: 10px; background: var(--window); box-shadow: 0 18px 45px rgba(7,37,76,.32); }.app-window.focused { box-shadow: 0 22px 60px rgba(7,37,76,.42), 0 0 0 1px rgba(255,255,255,.45); }.app-window.window-enter { animation: window-enter .22s cubic-bezier(.2,.8,.2,1); }.app-window.wide { width: min(760px, calc(100vw - 40px)); }.app-window.small-window { width: min(450px, calc(100vw - 40px)); }.app-window[hidden] { display: none; }.window-header { height: 38px; padding: 0 11px; color: #718094; border-bottom: 1px solid #d9e3ee; background: rgba(232,240,249,.86); font-size: 11px; cursor: grab; user-select: none; touch-action: none; }.window-header:active { cursor: grabbing; }.window-header > span { display: flex; gap: 8px; align-items: center; }.window-header button { width: 25px; height: 25px; color: #8b98a8; background: transparent; font-size: 18px; }.window-header button:hover { color: #1c3654; }.mini-icon { width: 19px; height: 19px; display: inline-grid; place-items: center; border-radius: 5px; color: #fff; font-size: 8px; font-style: normal; }.green-bg { background: #63bf62; }.orange-bg { background: #f0a453; }.blue-bg { background: #4e99d8; }.pink-bg { background: #db82aa; }.window-content { max-height: calc(70vh - 38px); overflow: auto; padding: 28px; }.window-content::-webkit-scrollbar { width: 6px; }.window-content::-webkit-scrollbar-thumb { background: #c4d0de; border-radius: 10px; }.eyebrow { margin: 0 0 12px; color: #408dce; font-size: 10px; letter-spacing: 1.5px; }.window-content h1, .window-content h2 { margin: 0 0 18px; color: var(--ink); font-size: 27px; line-height: 1.25; }.window-content p { color: #64758a; font-size: 12px; }.muted { color: #97a4b2 !important; }.about-content { display: grid; grid-template-columns: 130px 1fr; gap: 25px; align-items: center; }.window-avatar { width: 130px; height: 155px; padding: 5px; background: #eaf2fa; border: 1px solid #c0d5e8; }.window-avatar img { width: 100%; height: 100%; object-fit: cover; }.green-link { display: inline-block; margin-top: 13px; color: #3a9a58; font-size: 11px; }.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.project-grid article { min-height: 190px; display: flex; flex-direction: column; padding: 17px; border: 1px solid #d8e3ee; background: #f8fbff; }.project-no { color: #a3b1bf; font-size: 10px; }.project-grid h3 { margin: 25px 0 8px; color: #28577c; font-size: 16px; }.project-grid p { min-height: 70px; margin: 0; font-size: 10px; }.project-status { margin-top: auto; color: #55a35e; font-size: 9px; }.project-status.pending { color: #c1a056; }.notes { border-top: 1px solid #dbe4ee; }.notes a { display: grid; grid-template-columns: 80px 50px 1fr 16px; gap: 10px; align-items: center; padding: 16px 0; border-bottom: 1px solid #dbe4ee; }.notes time, .note-tag { color: #8b9bad; font-size: 9px; }.note-tag { color: #e0984c; }.notes strong { color: #335b7b; font-size: 11px; font-weight: 500; }.notes b { color: #4c9b68; }.os-list { display: grid; gap: 16px; margin: 30px 0; }.os-list div { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; padding-bottom: 13px; border-bottom: 1px dashed #d4e0ec; color: #61778c; font-size: 11px; }.os-list b { color: #e2a04d; font-weight: 400; }.skill-label { margin-top: 28px; }.tags { display: flex; flex-wrap: wrap; gap: 7px; }.tags span { padding: 6px 8px; color: #477699; border: 1px solid #c8dbea; border-radius: 4px; font-size: 9px; }.online { display: flex; align-items: center; gap: 8px; margin: 20px 0; color: #55a35e; font-size: 10px; }.online i { width: 7px; height: 7px; border-radius: 50%; background: #65c96a; box-shadow: 0 0 8px #65c96a; }.now-content p:not(.eyebrow) { margin-bottom: 18px; }.meter { display: grid; grid-template-columns: 70px 1fr 35px; gap: 8px; align-items: center; margin-top: 12px; color: #8b9bad; font-size: 9px; }.meter > div { height: 5px; background: #dbe7f0; }.meter i { display: block; height: 100%; background: #67b9df; }.meter b { font-weight: 400; text-align: right; }.contact-content h2 { font-size: 34px; }.contact-content .quote { margin: 25px 0; color: #7d90a3; font-size: 12px; line-height: 1.8; }.contact-content a { display: block; margin-top: 14px; color: #438dbe; font-size: 11px; }.contact-content a:hover { color: #dd8b4b; } @keyframes window-enter { from { opacity: 0; transform: translateY(10px) scale(.98); } }

.desktop-icon { touch-action: none; user-select: none; }
.desktop-icon-placeholder { display: block; visibility: hidden; pointer-events: none; }

.site-viewport { position: fixed; z-index: 1; inset: 0; overflow: hidden; touch-action: none; cursor: grab; }
.site-viewport:active { cursor: grabbing; }
.site-track { width: 100%; height: 100%; display: flex; flex-direction: column; will-change: transform; transition: transform .62s cubic-bezier(.22,.76,.22,1); }
.site-track.is-dragging { transition: none; }
.site-page { position: relative; flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden; }
.desktop-page-sidebar {
  position: fixed;
  z-index: 22;
  top: 0;
  right: 0;
  bottom: 0;
  width: 18px;
  padding: 0;
  color: #b8989f;
  border-left: 1px solid rgba(255, 91, 111, .22);
  background: rgba(17, 9, 12, .48);
  box-shadow: -8px 0 28px rgba(0, 0, 0, .18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.desktop-page-sidebar nav { display: flex; flex-direction: column; height: 100%; }
.desktop-page-sidebar-item {
  position: relative;
  flex: 1 1 0;
  min-height: 28px;
  padding: 0;
  color: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: transparent;
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease;
}
.desktop-page-sidebar-item::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 5px;
  left: 5px;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .58);
  transform: translateY(-50%);
  transition: height .18s ease, background .18s ease, box-shadow .18s ease;
}
.desktop-page-sidebar-item:hover,
.desktop-page-sidebar-item[aria-current="true"] { background: rgba(255, 255, 255, .11); }
.desktop-page-sidebar-item[aria-current="true"]::after { height: 9px; background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, .72); }
.desktop-page-sidebar-item:focus-visible { outline: 2px solid #ff6879; outline-offset: -2px; }
.desktop-page-sidebar-item::before { content: none; }

.generated-page-label { color: #a78b91; font: 700 10px/1 Monaco, Consolas, monospace; letter-spacing: 1px; }
.standalone-page { color: #183c5d; background: #f4f7f8; }
.standalone-page::before, .standalone-page::after { content: ''; position: absolute; pointer-events: none; }
.standalone-page::before { width: 48vw; height: 48vw; right: -16vw; top: -25vw; border: 1px solid rgba(29,93,136,.13); border-radius: 50%; box-shadow: 0 0 0 7vw rgba(42,117,169,.035), 0 0 0 14vw rgba(42,117,169,.025); }
.standalone-page::after { left: 0; right: 0; bottom: 0; height: 7px; background: linear-gradient(90deg, #2c82ca 0 28%, #f3bd4c 28% 30%, #77bd70 30% 52%, #e38bae 52% 70%, #2c82ca 70%); }
.standalone-topbar { position: relative; z-index: 3; height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 5vw, 76px); color: #7390a7; border-bottom: 1px solid #d7e2e9; font-size: 9px; letter-spacing: 1.2px; }
.standalone-topbar > span:first-child { display: flex; align-items: center; gap: 9px; color: #336d96; font-weight: 700; }
.standalone-topbar i { width: 7px; height: 7px; border-radius: 50%; background: #6cc672; box-shadow: 0 0 0 4px rgba(108,198,114,.13); }
.standalone-content { position: relative; z-index: 2; width: min(1160px, calc(100vw - 80px)); min-height: calc(100vh - 170px); display: flex; flex-direction: column; justify-content: center; margin: 0 auto; padding: 58px 0 105px; }
.standalone-page .page-heading { margin-bottom: clamp(28px, 5vh, 54px); }
.standalone-page .page-heading h2 { font-size: clamp(42px, 6vw, 82px); letter-spacing: -4px; }
.standalone-page .page-heading > span { padding-bottom: 11px; letter-spacing: 1.5px; }
.page-watermark { position: absolute; z-index: 0; right: 4vw; bottom: 4vh; color: rgba(28,84,124,.035); font: 700 clamp(100px, 18vw, 280px)/.8 Arial, sans-serif; letter-spacing: -12px; pointer-events: none; }
.standalone-page .page-projects { gap: clamp(14px, 2vw, 28px); }
.standalone-page .page-projects article { min-height: clamp(235px, 35vh, 340px); padding: clamp(22px, 3vw, 38px); border: 0; border-top: 3px solid #2f85c9; border-radius: 0; background: #fff; box-shadow: 0 18px 55px rgba(31,69,96,.09); }
.standalone-page .page-projects article:nth-child(2) { border-color: #efb74e; }
.standalone-page .page-projects article:nth-child(3) { border-color: #76bb73; }
.standalone-page .page-projects h3 { margin-top: clamp(32px, 6vh, 68px); font-size: clamp(20px, 2vw, 29px); }
.standalone-page .page-projects p { max-width: 280px; font-size: 11px; line-height: 1.9; }
.standalone-page .page-os-grid { grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 6vw, 90px); align-items: stretch; }
.standalone-page .os-principles { gap: 0; border-top: 1px solid #cad9e4; }
.standalone-page .os-principles article { min-height: 105px; grid-template-columns: 75px 1fr; padding: 17px 10px; border-bottom: 1px solid #cad9e4; }
.standalone-page .os-principles b { font-size: 13px; }
.standalone-page .os-principles span { font-size: clamp(14px, 1.5vw, 19px); }
.standalone-page .os-skills { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 5vw, 66px); border-radius: 0; background: #e3edf3; }
.standalone-page .os-skills .tags { gap: 10px; }
.standalone-page .os-skills .tags span { padding: 10px 12px; border-color: #b8cfde; background: rgba(255,255,255,.45); font-size: 10px; }
.page-contact { color: #edf7ff; background: #153e62; }
.page-contact::before { border-color: rgba(255,255,255,.11); box-shadow: 0 0 0 7vw rgba(255,255,255,.025), 0 0 0 14vw rgba(255,255,255,.018); }
.page-contact .standalone-topbar { color: #91aec4; border-color: rgba(255,255,255,.13); }
.page-contact .standalone-topbar > span:first-child { color: #d6eaff; }
.contact-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(45px, 10vw, 150px); align-items: center; }
.contact-layout h2 { margin: 0; color: #fff; font-size: clamp(46px, 7vw, 94px); line-height: 1.02; letter-spacing: -5px; }
.contact-layout h2 em { color: #71bde9; font-style: normal; }
.contact-layout .contact-lead { color: #91abc0; }
.contact-layout .page-contact-links { border-color: rgba(255,255,255,.18); }
.contact-layout .page-contact-links a { padding-block: 24px; color: #d9ecfa; border-color: rgba(255,255,255,.18); }
.contact-layout .page-contact-links span { color: #79a0bc; }
.page-contact .page-watermark { color: rgba(255,255,255,.035); }

body[data-page]:not([data-page="0"]) .dock { border-color: rgba(255,255,255,.85); }

.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.page-heading > span { flex: 0 0 auto; padding-bottom: 4px; color: #9aabbc; font-size: 8px; letter-spacing: 1px; }
.page-projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.page-projects article { min-height: 230px; display: flex; flex-direction: column; padding: 19px; border: 1px solid #d7e4ef; border-radius: 15px; background: rgba(255,255,255,.7); transition: transform .2s, border-color .2s; }
.page-projects article:hover { border-color: #88b9df; transform: translateY(-4px); }
.page-projects .project-no { color: #70a2c7; font-size: 8px; }
.page-projects h3 { margin: 35px 0 10px; color: #265b83; font-size: 17px; }
.page-projects p { margin: 0; color: #7c8c9c; font-size: 9px; line-height: 1.8; }
.page-projects b { margin-top: auto; color: #65a06c; font-size: 8px; font-weight: 500; }
.page-os-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 35px; }
.os-principles { display: grid; gap: 8px; }
.os-principles article { display: grid; grid-template-columns: 48px 1fr; align-items: center; min-height: 76px; padding: 12px 16px; border-bottom: 1px dashed #cfdeea; }
.os-principles b { color: #e5a349; font-size: 11px; font-weight: 400; }
.os-principles span { color: #5c748a; font-size: 12px; line-height: 1.65; }
.os-skills { padding: 24px; border-radius: 18px; background: #eaf3fa; }
.os-skills .tags { align-content: flex-start; }
.os-skills .tags span { padding: 8px 9px; background: rgba(255,255,255,.55); }
.contact-lead { margin: 26px 0 30px; color: #8999a9; font-size: 11px; }
.page-contact-links { max-width: 680px; border-top: 1px solid #d7e3ed; }
.page-contact-links a { display: grid; grid-template-columns: 80px 1fr 20px; gap: 20px; align-items: center; padding: 18px 4px; color: #487491; border-bottom: 1px solid #d7e3ed; transition: padding .2s, color .2s; }
.page-contact-links a:hover { padding-left: 12px; color: #dd8b4b; }
.page-contact-links span { color: #9baaba; font-size: 8px; }
.page-contact-links b { font-size: 11px; font-weight: 500; }
.page-contact-links i { font-style: normal; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

@media (max-width: 800px) { .desktop-icons { right: 16px; grid-template-columns: repeat(2, 78px); gap: 14px 8px; }.desktop-icon { width: 78px; }.desktop-art { left: 37%; bottom: 32%; transform: translateX(-50%) scale(.8); }.desktop-tip { left: 15px; bottom: 110px; }.dock { bottom: 15px; }.dock-item { min-width: 72px; padding-inline: 9px; }.app-window, .app-window.wide, .app-window.small-window { top: 12%; left: 50%; width: calc(100vw - 30px); transform: translateX(-50%); }.project-grid { grid-template-columns: 1fr; }.project-grid article { min-height: 125px; }.project-grid h3 { margin-top: 12px; }.project-grid p { min-height: auto; }.project-status { margin-top: 15px; } }
@media (max-width: 480px) { .desktop-topbar { padding: 0 13px; }.top-links { gap: 10px; margin-left: 14px; }.top-links button { font-size: 10px; }.desktop-topbar time { font-size: 10px; }.desktop-icons { top: 68px; right: 8px; transform: scale(.82); transform-origin: top right; }.desktop-art { left: 36%; bottom: 31%; transform: translateX(-50%) scale(.62); }.desktop-tip { display: none; }.dock { width: calc(100vw - 20px); justify-content: center; }.dock-item { min-width: 0; flex: 1; padding-inline: 5px; font-size: 9px; }.dock-contact { min-width: 0; }.window-content { padding: 21px; }.about-content { grid-template-columns: 80px 1fr; gap: 15px; }.window-avatar { width: 80px; height: 96px; }.window-content h1, .window-content h2 { font-size: 22px; }.notes a { grid-template-columns: 68px 42px 1fr 12px; gap: 5px; }.notes strong { font-size: 10px; }.notes time, .note-tag { font-size: 8px; } }

@media (max-width: 1040px) {
  .desktop-icons { right: 12px; grid-template-columns: repeat(2, 78px); gap: 14px 8px; }
  .desktop-icon { width: 78px; }
  .standalone-page .page-projects article { min-height: 280px; }
}

@media (max-width: 800px) {
  .desktop-icons, .desktop-tip { display: none; }
  .dock { bottom: 15px; }
  .app-window, .app-window.wide, .app-window.small-window { top: 12%; left: 50%; width: calc(100vw - 30px); transform: translateX(-50%); }
  .standalone-content { width: calc(100vw - 44px); min-height: calc(100vh - 135px); padding: 30px 0 88px; overflow-y: auto; }
  .standalone-page .page-projects { grid-template-columns: 1fr; }
  .standalone-page .page-projects article { min-height: 150px; }
  .standalone-page .page-projects h3 { margin-top: 16px; }
  .standalone-page .page-os-grid, .contact-layout { grid-template-columns: 1fr; gap: 28px; }
  .standalone-page .os-principles article { min-height: 72px; }
}

@media (max-width: 560px) {
  .desktop-topbar { padding: 0 13px; }
  .top-links { display: none; }
  .desktop-topbar time { font-size: 10px; }
  .dock { left: 10px; right: 10px; width: auto; justify-content: center; transform: none; }
  .dock-item { width: 25%; min-width: 0; flex: 0 1 25%; padding-inline: 3px; font-size: 9px; }
  .dock-contact { min-width: 0; }
  .standalone-topbar { height: 52px; padding-inline: 18px; }
  .standalone-topbar > span:last-child { font-size: 0; }
  .standalone-topbar > span:last-child::after { content: attr(data-short); font-size: 8px; }
  .standalone-content { width: calc(100vw - 36px); min-height: calc(100vh - 115px); padding: 22px 0 82px; }
  .standalone-page .page-heading { margin-bottom: 20px; }
  .standalone-page .page-heading h2 { font-size: 37px; letter-spacing: -2px; }
  .page-heading { align-items: flex-start; }
  .standalone-page .page-projects { gap: 8px; }
  .standalone-page .page-projects article { min-height: 135px; padding: 15px; }
  .standalone-page .page-projects p { line-height: 1.55; }
  .standalone-page .page-os-grid { gap: 18px; }
  .standalone-page .os-principles article { min-height: 61px; padding: 7px 10px; }
  .standalone-page .os-principles span { font-size: 11px; }
  .standalone-page .os-skills { padding: 20px; }
  .contact-layout h2 { font-size: 44px; letter-spacing: -3px; }
  .page-contact-links a { grid-template-columns: 58px 1fr 15px; gap: 8px; }
  .page-contact-links b { overflow-wrap: anywhere; font-size: 9px; }
}

/* Black / crimson shadow theme */
:root { --blue: #12090b; --blue-deep: #050405; --white: #f3eded; --ink: #eadfe0; --muted: #ad9699; --yellow: #ff4455; --green: #d43243; --orange: #f05a4f; --window: rgba(19,12,14,.97); }
body { color: #f3eded; background: #070506; }

.linux-boot { color: #cdbfc1; background: radial-gradient(circle at 50% 45%, #180b0e 0, #060405 62%); text-shadow: 0 0 6px rgba(255,45,65,.16); }
.linux-boot-header { color: #725e62; border-color: #29181b; }
.linux-boot-logo { color: #281517; }
.linux-boot-logo span { color: #73323a; }
.boot-kernel, .boot-last-login { color: #78686a; }
.boot-log-line > span { color: #7e6c6f; }
.boot-log-line.ok > span b, .linux-boot-ready > p:first-child span, .boot-prompt span { color: #ff4d5e; text-shadow: 0 0 9px rgba(255,45,65,.45); }
.boot-log-line.info > span { color: #d98655; }
.boot-prompt b { color: #d66b75; }
.linux-boot-ready button { color: #f5e9ea; background: #7d1722; box-shadow: 0 0 24px rgba(213,34,52,.2); }
.linux-boot-ready button:hover, .linux-boot-ready button:focus-visible { border-color: #ff4d5e; background: #bd2635; outline-color: #ff4d5e; }

.desktop { background: radial-gradient(circle at 50% 48%, rgba(168,18,36,.18), transparent 33%), radial-gradient(circle at 80% 15%, rgba(95,8,20,.25), transparent 28%), linear-gradient(135deg, #030304, #16080b 55%, #070405); }
.desktop.has-custom-wallpaper {
  background-image: var(--wallpaper-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.desktop.has-custom-wallpaper::before,
.desktop.has-custom-wallpaper::after,
.desktop.has-custom-wallpaper .stars,
.desktop.has-custom-wallpaper .aurora {
  display: none;
}
.desktop::before { opacity: .48; background-image: radial-gradient(circle, #fa3b50 0 1px, transparent 1.7px), radial-gradient(circle, rgba(255,225,228,.28) 0 1px, transparent 1.5px); }
.desktop::after { opacity: .14; border-color: #d7253b; box-shadow: 0 0 0 50px rgba(137,12,29,.06), 0 0 0 100px rgba(137,12,29,.035); }
.stars { background: #ff354b; filter: drop-shadow(0 0 7px rgba(255,38,61,.9)); }
.aurora { background: #c71731; opacity: .16; }
.aurora-b { background: #5c0917; }
.os-brand { color: #ff4455; text-shadow: 0 0 14px rgba(255,51,72,.35); }
.top-links button, .desktop-topbar { color: #b89ea2; }
.top-links button:hover { color: #ff6675; }
.desktop-art img { border-color: rgba(255,71,89,.55); box-shadow: 0 0 42px rgba(187,18,40,.32); filter: grayscale(.18) contrast(1.08); }
.avatar-orbit { border-color: rgba(255,56,77,.46); }
.avatar-orbit::after { color: #ff3a50; }
.desktop-icon:hover { color: #ff5364; }
.desktop-icon:focus-visible { outline-color: #ff5364; }
.icon { color: #c23041; background: linear-gradient(145deg, #f2e8e9, #cababc); box-shadow: 0 7px 18px rgba(0,0,0,.5), 0 0 0 1px rgba(255,77,94,.16); }
.folder-icon { color: #781420; background: linear-gradient(#e83d50 0 20%, #9f1c2b 20%); }
.folder-icon::before { background: #e83d50; }
.file-icon::after { background: #a91d2d; }
.file-icon.html::before { color: #a91d2d; }
.app-icon { color: #b62435; }
.desktop-tip { color: rgba(226,205,208,.7); }
.prompt, .command { color: #f04a5c; }

.dock { border-color: rgba(255,235,237,.13); background: rgba(18,10,12,.9); box-shadow: 0 14px 38px rgba(0,0,0,.55), 0 0 28px rgba(157,16,34,.18); backdrop-filter: blur(18px); }
.dock-item { color: #9c8589; }
.dock-item b { color: #6f5d60; }
.dock-item.active, .dock-item:hover { color: #fff; background: linear-gradient(135deg, #8d1826, #d12c3e); box-shadow: 0 5px 18px rgba(211,35,56,.28); }
.dock-item.active b, .dock-item:hover b { color: #ffd4d9; }
body[data-page]:not([data-page="0"]) .dock { border-color: rgba(255,77,94,.16); }

.app-window { color: #e8dcde; border-color: rgba(255,74,92,.2); background: rgba(17,11,13,.97); box-shadow: 0 22px 60px rgba(0,0,0,.65), 0 0 35px rgba(139,14,31,.16); }
.app-window.focused { box-shadow: 0 28px 75px rgba(0,0,0,.75), 0 0 0 1px rgba(255,69,87,.25), 0 0 40px rgba(152,15,34,.18); }
.window-header { color: #a68d91; border-color: #332126; background: rgba(35,21,25,.96); }
.window-header button { color: #8e7478; }
.window-header button:hover { color: #ff5364; }
.window-content h1, .window-content h2 { color: #f4ebec; }
.window-content p, .project-grid p, .os-list div, .contact-content .quote { color: #a99195; }
.eyebrow, .green-link, .contact-content a, .notes b { color: #ee4356; }
.muted { color: #78666a !important; }
.window-avatar { border-color: #4d2830; background: #211519; }
.project-grid article { border-color: #39242a; background: #160f11; }
.project-grid h3, .notes strong { color: #e8dadd; }
.project-status, .online { color: #e44355; }
.project-status.pending, .os-list b { color: #cf725e; }
.notes, .notes a { border-color: #342126; }
.notes time, .note-tag { color: #91777b; }
.tags span { color: #caaeb2; border-color: #4b2d33; background: #170f11; }
.meter > div { background: #352126; }
.meter i { background: #cf2d40; }

.standalone-page { color: #d9cacc; background: radial-gradient(circle at 80% 8%, rgba(151,16,35,.17), transparent 35%), linear-gradient(145deg, #0c0809, #170b0e 65%, #080607); }
.standalone-page::before { border-color: rgba(238,45,68,.15); box-shadow: 0 0 0 7vw rgba(174,16,37,.04), 0 0 0 14vw rgba(174,16,37,.025); }
.standalone-page::after { background: linear-gradient(90deg, #5d0b16, #ee344a 45%, #8f1423 70%, #25080d); box-shadow: 0 -5px 25px rgba(229,35,58,.18); }
.standalone-topbar { color: #846f73; border-color: #302024; }
.standalone-topbar > span:first-child { color: #e43a4e; }
.standalone-topbar i { background: #ff3e53; box-shadow: 0 0 0 4px rgba(255,50,73,.12), 0 0 12px rgba(255,50,73,.5); }
.standalone-page .page-heading h2, .page-heading h2 { color: #f3e8e9; text-shadow: 0 8px 38px rgba(0,0,0,.5); }
.page-heading > span { color: #7e696d; }
.page-watermark { color: rgba(234,45,68,.035); }
.standalone-page .page-projects article { border-top-color: #e12f43; background: linear-gradient(145deg, #1a1113, #100b0c); box-shadow: 0 24px 65px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,65,84,.07); }
.standalone-page .page-projects article:nth-child(2) { border-color: #a42032; }
.standalone-page .page-projects article:nth-child(3) { border-color: #711321; }
.page-projects .project-no, .page-projects b { color: #d83b4d; }
.page-projects h3 { color: #f0e2e4; }
.page-projects p { color: #9e8589; }
.standalone-page .os-principles, .standalone-page .os-principles article { border-color: #3b252a; }
.standalone-page .os-principles b { color: #ef4356; }
.standalone-page .os-principles span { color: #c1aaae; }
.standalone-page .os-skills { background: linear-gradient(145deg, #251419, #140d0f); box-shadow: inset 0 0 0 1px rgba(255,67,86,.08); }
.standalone-page .os-skills .tags span { color: #cdb7ba; border-color: #523038; background: rgba(10,6,7,.45); }
.page-contact { color: #eee2e4; background: radial-gradient(circle at 75% 25%, rgba(184,21,43,.22), transparent 34%), linear-gradient(135deg, #080506, #1b0a0e); }
.page-contact .standalone-topbar { color: #8d7478; border-color: #342126; }
.page-contact .standalone-topbar > span:first-child, .contact-layout h2 em { color: #ff4156; }
.contact-layout .contact-lead { color: #9f878b; }
.contact-layout .page-contact-links, .contact-layout .page-contact-links a { border-color: #482a31; }
.contact-layout .page-contact-links a { color: #e9dadd; }
.contact-layout .page-contact-links a:hover { color: #ff5264; }
.contact-layout .page-contact-links span { color: #80686c; }
.page-contact .page-watermark { color: rgba(255,50,73,.035); }

/* Linux status green, classic folders, and Debian red spiral wallpaper */
.boot-log-line.ok > span b, .linux-boot-ready > p:first-child span, .boot-prompt span { color: #53dc68; text-shadow: 0 0 9px rgba(67,224,91,.45); }
.linux-boot-ready button { color: #061008; background: #52c966; box-shadow: 0 0 24px rgba(61,211,85,.22); }
.linux-boot-ready button:hover, .linux-boot-ready button:focus-visible { color: #fff; border-color: #78ee8a; background: #278b39; outline-color: #67df79; }
.folder-icon { color: #715719; background: linear-gradient(#ffe487 0 20%, #f1bf48 20%); box-shadow: 0 7px 18px rgba(0,0,0,.5), 0 0 18px rgba(232,178,47,.14); }
.folder-icon::before { background: #ffe487; }
.desktop { background-color: #020203; background-image: linear-gradient(90deg, rgba(2,2,3,.02), rgba(4,1,2,.08)), url('./assets/debian-red-spiral-wallpaper.webp'); background-size: cover, cover; background-position: center, center 56%; background-repeat: no-repeat; }
.desktop-art { opacity: 0; pointer-events: none; }
@media (max-width: 800px) { .desktop { background-size: cover, cover; background-position: center, 62% 56%; } }

/* Rem desktop pet — source: legeling/awesome-codex-pet (rem--l1). */
.desktop-pet {
  position: absolute;
  z-index: 28;
  right: 148px;
  bottom: 88px;
  display: grid;
  place-items: end center;
  width: 144px;
  height: 182px;
  padding: 0;
  color: #e9d8dd;
  border: 0;
  background: transparent;
  cursor: grab;
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .48));
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.desktop-pet:active, .desktop-pet[data-pet-state="dragging"] { cursor: grabbing; }
.desktop-pet:focus-visible { outline: 2px solid #ff6474; outline-offset: 5px; border-radius: 10px; }
.desktop-pet-sprite {
  display: block;
  width: 144px;
  height: 156px;
  background-image: url('./assets/rem-pet/spritesheet-optimized.webp');
  background-repeat: no-repeat;
  background-size: 1152px 1404px;
  background-position: 0 0;
  image-rendering: auto;
  transition: filter .2s ease, transform .2s ease;
}
.desktop-pet[data-pet-state="hovered"] .desktop-pet-sprite { filter: brightness(1.08); transform: translateY(-3px); }
.desktop-pet[data-pet-state="interacting"] .desktop-pet-sprite { filter: brightness(1.1); transform: translateY(-3px); }
.desktop-pet[data-pet-state="dragging"] .desktop-pet-sprite { filter: brightness(1.06); transform: translateY(-1px); }
.desktop-pet-name { margin-top: -4px; padding: 3px 7px; color: rgba(255, 230, 234, .72); border: 1px solid rgba(255, 109, 127, .22); border-radius: 999px; background: rgba(14, 7, 9, .66); box-shadow: 0 4px 12px rgba(0, 0, 0, .25); font: 700 9px/1 Monaco, Consolas, monospace; letter-spacing: 1.4px; opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease; }
.desktop-pet:not([data-pet-state="idle"]) .desktop-pet-name, .desktop-pet:focus-visible .desktop-pet-name { opacity: 1; transform: translateY(0); }

/* Interactive desktop additions */
.pet-speech {
  position: absolute;
  z-index: 35;
  max-width: 220px;
  padding: 9px 12px;
  color: #f2e7e9;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255, 249, 250, .11), rgba(83, 37, 45, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 25px rgba(0, 0, 0, .28);
  backdrop-filter: blur(13px) saturate(1.15);
  -webkit-backdrop-filter: blur(13px) saturate(1.15);
  font-size: 11px;
  line-height: 1.5;
  pointer-events: none;
}
.desktop-status-card { --status-card-edge: 22px; position: absolute; z-index: 23; right: var(--status-card-edge); top: 70px; width: 264px; padding: 17px 18px; color: #d8c7ca; border: 1px solid rgba(255, 103, 120, .25); border-radius: 12px; background: rgba(16, 9, 11, .82); box-shadow: 0 18px 42px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(255,255,255,.025); backdrop-filter: blur(15px); transform: translateX(0); transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease; will-change: transform; }
.desktop-status-card.is-collapsed { transform: translateX(calc(100% + var(--status-card-edge))); box-shadow: none; }
.status-card-toggle { position: absolute; top: 50%; left: -35px; display: grid; place-items: center; width: 34px; height: 52px; padding: 0; color: #d9bec3; border: 1px solid rgba(255, 103, 120, .28); border-right: 0; border-radius: 11px 0 0 11px; background: rgba(16, 9, 11, .9); box-shadow: -8px 8px 22px rgba(0, 0, 0, .25); cursor: pointer; transform: translateY(-50%); transition: color .18s ease, background .18s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
.status-card-toggle span { display: block; font: 400 24px/1 Arial, sans-serif; transform: translateX(1px); }
.desktop-status-card.is-collapsed .status-card-toggle { transform: translateY(-50%) rotate(180deg); }
.status-card-toggle:hover, .status-card-toggle:focus-visible { color: #fff; outline: 0; background: rgba(139, 24, 39, .94); }
.status-card-heading { display: flex; align-items: center; justify-content: space-between; color: #9f858a; font: 700 10px/1 Monaco, Consolas, monospace; letter-spacing: 1.15px; }
.status-card-heading span { display: flex; align-items: center; gap: 7px; }
.status-card-heading i { width: 7px; height: 7px; border-radius: 50%; background: #53dc68; box-shadow: 0 0 11px rgba(83, 220, 104, .78); }
.status-card-heading button { padding: 3px 5px; color: #d6b9be; border: 1px solid rgba(255, 116, 133, .2); border-radius: 4px; background: transparent; font: 700 8px/1 Monaco, Consolas, monospace; cursor: pointer; }
.status-card-heading button:hover { color: #fff; border-color: rgba(255, 116, 133, .55); }
.status-card-now { margin: 15px 0; color: #f4e9eb; font-size: 14px; font-weight: 600; line-height: 1.5; }
.status-card-metrics { display: grid; gap: 10px; margin: 0; }
.status-card-metrics div { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 9px; }
.status-card-metrics dt { color: #9b7f85; font: 700 9px/1 Monaco, Consolas, monospace; letter-spacing: .75px; }
.status-card-metrics dd { display: grid; grid-template-columns: 1fr 32px; align-items: center; gap: 7px; margin: 0; }
.status-card-metrics i { display: block; height: 5px; border-radius: 99px; background: linear-gradient(90deg, #a91f31 var(--value), #41242b var(--value)); box-shadow: 0 0 11px rgba(223, 48, 68, .3); }
.status-card-metrics b { color: #d4b9be; font: 700 9px/1 Monaco, Consolas, monospace; }
.status-card-post { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 12px; color: #dfb1b8; border-top: 1px solid rgba(255,255,255,.09); font-size: 12px; line-height: 1.45; text-decoration: none; }
.status-card-post:hover { color: #ff6d7e; }
.status-card-runtime { margin: 13px 0 0; color: #90747a; font: 700 9px/1 Monaco, Consolas, monospace; letter-spacing: .85px; }
.status-card-runtime span { color: #bea3a8; }
.terminal-window { width: min(640px, calc(100vw - 40px)); }
.terminal-body { height: min(42vh, 330px); padding: 17px; overflow: auto; color: #d7d0c0; background: #090708; font: 12px/1.65 Monaco, Consolas, monospace; }
.terminal-body p { margin: 0 0 7px; }
.terminal-body span, .terminal-input-row span { color: #55d66b; }.terminal-body b, .terminal-input-row b { color: #e89b64; }.terminal-muted { color: #8d7c80; }.terminal-error { color: #ff7b88; }.terminal-link { color: #6fd4ff; }
.terminal-input-row { display: flex; align-items: center; gap: 7px; padding: 11px 15px; border-top: 1px solid #372128; background: #120b0d; font: 12px/1 Monaco, Consolas, monospace; }
.terminal-input-row label { flex: 0 0 auto; }.terminal-input-row input { width: 100%; color: #f0e5e6; border: 0; outline: 0; background: transparent; font: inherit; }
.desktop-context-menu { position: absolute; z-index: 80; width: 156px; padding: 6px; border: 1px solid rgba(255, 115, 132, .28); border-radius: 8px; background: rgba(25, 13, 16, .98); box-shadow: 0 16px 40px rgba(0,0,0,.48); backdrop-filter: blur(16px); }
.desktop-context-menu button { display: block; width: 100%; padding: 8px 10px; color: #d8c7ca; border: 0; border-radius: 5px; background: transparent; text-align: left; font: 11px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }.desktop-context-menu button:hover { color: #fff; background: rgba(207, 39, 60, .45); }
.command-palette { position: fixed; z-index: 99999; inset: 0; display: grid; place-items: start center; padding-top: min(18vh, 160px); background: rgba(4, 2, 3, .54); backdrop-filter: blur(7px); }
.command-palette-panel { width: min(620px, calc(100vw - 32px)); overflow: hidden; border: 1px solid rgba(255, 131, 146, .35); border-radius: 13px; background: #181012; box-shadow: 0 30px 90px rgba(0,0,0,.65), 0 0 35px rgba(191, 28, 48, .22); }
.command-palette-input { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid #3a2228; }.command-palette-input > span { color: #ff6a7a; font: 18px/1 Monaco, Consolas, monospace; }.command-palette-input input { width: 100%; color: #f3e7e9; border: 0; outline: 0; background: transparent; font: 14px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }.command-palette-input kbd { padding: 3px 5px; color: #a58a8e; border: 1px solid #4b3036; border-radius: 4px; font: 9px/1 Monaco, Consolas, monospace; }
.command-palette-results { max-height: min(45vh, 350px); overflow: auto; padding: 7px; }.command-palette-result { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; width: 100%; padding: 10px; color: #d8c6c9; border: 0; border-radius: 7px; background: transparent; text-align: left; cursor: pointer; }.command-palette-result:hover, .command-palette-result.is-active { color: #fff; background: rgba(194, 37, 57, .36); }.command-palette-result i { color: #ff7080; font-style: normal; }.command-palette-result small { color: #8f777b; }.command-palette-empty { margin: 14px 10px; color: #947d81; font-size: 12px; }.command-palette-help { margin: 0; padding: 10px 16px; color: #856d72; border-top: 1px solid #342026; font-size: 10px; }.command-palette-help code { color: #c6a1a7; }
@media (max-width: 1050px) { .desktop-status-card { --status-card-edge: 18px; width: 244px; } }
@media (max-width: 800px) { .desktop-status-card { display: none; } .command-palette { padding-top: 12vh; } }

/* Desktop geometry and corner utilities */
.desktop-topbar { justify-content: flex-end; gap: 24px; }
.desktop-topbar .top-links { margin-left: 0; }
.os-brand { order: 2; font-style: normal; }
.os-brand i { font-style: italic; }
.desktop-web-search {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 28px;
  align-items: center;
  width: min(340px, 34vw);
  height: 34px;
  padding: 0 4px 0 11px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255, 249, 250, .11), rgba(83, 37, 45, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 25px rgba(0, 0, 0, .28);
  backdrop-filter: blur(13px) saturate(1.15);
  -webkit-backdrop-filter: blur(13px) saturate(1.15);
  transform: translate(-50%, -50%);
  transition: width .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.desktop-web-search:focus-within {
  width: min(370px, 38vw);
  border-color: rgba(255, 78, 101, .42);
  background: linear-gradient(145deg, rgba(255, 250, 251, .15), rgba(126, 28, 44, .12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 28px rgba(0, 0, 0, .34), 0 0 20px rgba(221, 42, 65, .1);
}
.desktop-search-icon {
  position: relative;
  width: 12px;
  height: 12px;
  border: 1.5px solid rgba(226, 210, 214, .68);
  border-radius: 50%;
}
.desktop-search-icon::after {
  content: '';
  position: absolute;
  right: -4px;
  bottom: -3px;
  width: 5px;
  height: 1.5px;
  border-radius: 2px;
  background: rgba(226, 210, 214, .68);
  transform: rotate(45deg);
  transform-origin: left center;
}
.desktop-web-search input {
  min-width: 0;
  height: 100%;
  padding: 0 7px;
  color: #f2e7e9;
  border: 0;
  outline: 0;
  background: transparent;
  font: 11px/1.2 ui-monospace, SFMono-Regular, Consolas, 'Microsoft YaHei', monospace;
}
.desktop-web-search input::placeholder { color: rgba(198, 177, 181, .58); }
.desktop-web-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .45; }
.desktop-web-search button {
  width: 26px;
  height: 26px;
  padding: 0;
  color: rgba(225, 205, 209, .68);
  border-radius: 7px;
  background: transparent;
  transition: color .18s ease, background .18s ease;
}
.desktop-web-search button:hover,
.desktop-web-search button:focus-visible { color: #fff; outline: 0; background: rgba(216, 45, 68, .3); }
@media (max-width: 900px) { .desktop-web-search { width: min(300px, 38vw); } .desktop-web-search:focus-within { width: min(320px, 41vw); } }
@media (max-width: 560px) {
  .desktop-web-search, .desktop-web-search:focus-within { left: 12px; width: calc(100vw - 160px); min-width: 145px; transform: translateY(-50%); }
  .desktop-web-search input { font-size: 10px; }
}
.desktop-clock { position: fixed; z-index: 18; right: 24px; bottom: 18px; margin: 0 !important; padding: 7px 11px; color: #d8c8ca; border: 1px solid rgba(255,70,88,.16); border-radius: 5px; background: rgba(8,4,5,.68); box-shadow: 0 6px 20px rgba(0,0,0,.28); backdrop-filter: blur(10px); font-size: 11px !important; letter-spacing: .3px; }
.desktop-icons { --cell-w: 112px; --cell-h: 96px; top: 68px; right: 22px; bottom: 52px; left: 22px; display: block; width: auto; }
.desktop-icons::before { content: ''; position: absolute; inset: -8px; opacity: 0; pointer-events: none; background-image: linear-gradient(rgba(255,64,82,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,64,82,.055) 1px, transparent 1px); background-size: var(--cell-w) var(--cell-h); transition: opacity .18s ease; }
.desktop-icons.is-arranging::before { opacity: 1; }
.desktop-icon { position: absolute; left: calc(var(--x) * var(--cell-w) + 12px); top: calc(var(--y) * var(--cell-h) + 6px); width: 88px; min-height: 82px; transition: left .2s ease, top .2s ease, transform .12s ease, filter .12s ease; }
.desktop-icon.is-dragging { transition: none; filter: drop-shadow(0 12px 14px rgba(0,0,0,.55)); }
.desktop-icon-placeholder { display: none; }
@media (max-width: 1040px) and (min-width: 801px) { .desktop-icons { right: 18px; left: 18px; display: block; } .desktop-icon { width: 88px; } }
@media (max-width: 800px) { .desktop-icons { display: none; } .desktop-clock { right: 12px; bottom: 86px; } }

/* Keep the mobile compositor light without changing the desktop shadow look. */
@media (max-width: 800px) {
  .aurora { opacity: .08; filter: none; }
  .desktop::after { opacity: .08; box-shadow: none; }
  .dock, .desktop-status-card, .desktop-context-menu, .command-palette {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .dock { background: rgba(18, 10, 12, .97); }
  .desktop-status-card { background: rgba(16, 9, 11, .96); }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-status-card, .status-card-toggle { transition-duration: .01ms; }
  .boot-progress-pet, .boot-progress-fill { transition: none; }
  .desktop::after { box-shadow: none; }
}

/* Data-driven website navigation */
.os-admin-link {
  color: inherit;
  text-decoration: none;
  border-radius: 5px;
  transition: color .18s ease, text-shadow .18s ease;
}
.os-admin-link:hover { color: #ff6678; text-shadow: 0 0 16px rgba(255, 66, 89, .4); }
.os-admin-link:focus-visible { outline: 1px solid #ff6678; outline-offset: 5px; }
.navigation-loading { position: absolute; left: 12px; top: 92px; margin: 0; color: rgba(226, 205, 208, .55); font: 10px/1.4 Monaco, Consolas, monospace; }
.navigation-icon > span:last-child { width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.navigation-link-icon {
  color: var(--navigation-color, #d8c7ca);
  border: 1px solid color-mix(in srgb, var(--navigation-color, #d8c7ca) 35%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--navigation-color, #d8c7ca) 20%, #f1e8ea), #d8cdd0);
  box-shadow: 0 7px 18px rgba(0,0,0,.48), 0 0 18px color-mix(in srgb, var(--navigation-color, #d8c7ca) 16%, transparent);
}
.navigation-favicon { display: grid; place-items: center; color: var(--navigation-color, #aa2537); font: 800 18px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-shadow: none; }
.navigation-favicon.is-text-fallback { font-size: 11px; letter-spacing: -.04em; }
.navigation-favicon img { width: 25px; height: 25px; object-fit: contain; border-radius: 5px; }
.navigation-folder-icon {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 246, 248, .17), rgba(115, 82, 89, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 20px rgba(0, 0, 0, .34), 0 0 16px rgba(210, 39, 62, .07);
  backdrop-filter: blur(11px) saturate(1.18);
  -webkit-backdrop-filter: blur(11px) saturate(1.18);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.navigation-folder-icon::before { content: none; display: none; }
.navigation-icon-folder:hover .navigation-folder-icon,
.navigation-icon-folder:focus-visible .navigation-folder-icon {
  border-color: rgba(255, 91, 112, .34);
  background: linear-gradient(145deg, rgba(255, 248, 250, .22), rgba(151, 39, 56, .11));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .17), 0 10px 24px rgba(0, 0, 0, .42), 0 0 20px rgba(225, 44, 67, .13);
  transform: translateY(-2px);
}
.folder-mini-grid {
  position: absolute;
  inset: 5px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  padding: 2px;
  border-radius: 10px;
  background: rgba(4, 2, 3, .14);
}
.folder-mini-grid .navigation-favicon {
  min-width: 0;
  overflow: hidden;
  color: rgba(248, 229, 233, .88);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 4px;
  background: rgba(255, 255, 255, .09);
  font-size: 7px;
}
.folder-mini-grid .navigation-favicon img { width: 10px; height: 10px; border-radius: 2px; }

.navigation-folder {
  position: absolute;
  z-index: 92;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 80px 24px 110px;
  opacity: 0;
  background: rgba(1, 1, 2, .54);
  backdrop-filter: blur(9px);
  transition: opacity .16s ease;
}
.navigation-folder[hidden] { display: none !important; }
.navigation-folder.is-open { opacity: 1; }
.navigation-folder-panel {
  width: min(560px, 100%);
  max-height: min(620px, calc(100vh - 170px));
  overflow: auto;
  padding: 25px;
  color: #ecdee1;
  border: 1px solid rgba(255, 92, 112, .32);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(35, 20, 24, .98), rgba(13, 9, 10, .98));
  box-shadow: 0 30px 90px rgba(0,0,0,.72), 0 0 45px rgba(185, 20, 43, .18), inset 0 1px rgba(255,255,255,.035);
  transform: translateY(12px) scale(.97);
  transition: transform .2s cubic-bezier(.2,.8,.2,1);
}
.navigation-folder.is-open .navigation-folder-panel { transform: translateY(0) scale(1); }
.navigation-folder-panel header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.075); }
.navigation-folder-kicker { color: #8a7479; font: 700 8px/1 Monaco, Consolas, monospace; letter-spacing: 1.6px; }
.navigation-folder-panel h2 { margin: 8px 0 0; font-size: 24px; letter-spacing: -.5px; }
.navigation-folder-panel header button { width: 34px; height: 34px; padding: 0; color: #a88e93; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; background: transparent; font-size: 23px; cursor: pointer; }
.navigation-folder-panel header button:hover { color: #fff; border-color: rgba(255,92,112,.44); background: rgba(211,35,57,.15); }
.navigation-folder-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 13px; }
.navigation-folder-link { display: grid; justify-items: center; gap: 9px; min-width: 0; padding: 12px 5px; color: #d9c9cd; border: 1px solid transparent; border-radius: 14px; text-decoration: none; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.navigation-folder-link:hover { color: #fff; border-color: rgba(255, 91, 111, .24); background: rgba(255,255,255,.035); transform: translateY(-2px); }
.navigation-folder-link .navigation-favicon { width: 52px; height: 52px; color: var(--navigation-color); border: 1px solid color-mix(in srgb, var(--navigation-color) 38%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--navigation-color) 13%, #1b1114); box-shadow: 0 9px 20px rgba(0,0,0,.34); }
.navigation-folder-link .navigation-favicon img { width: 28px; height: 28px; }
.navigation-folder-link > span:last-child { width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.navigation-folder-empty { margin: 45px 0; color: #8e797e; text-align: center; font-size: 12px; }

@media (max-width: 800px) {
  .desktop-icons {
    display: block;
    top: 62px;
    right: 7px;
    bottom: 154px;
    left: 7px;
    overflow: hidden;
    transform: none;
  }
  .desktop-icon { width: 88px; transform-origin: center; }
  .navigation-folder { position: fixed; padding: 70px 14px 100px; }
  .navigation-folder-panel { max-height: calc(100vh - 140px); padding: 20px 15px; border-radius: 20px; }
  .navigation-folder-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px 8px; }
  .navigation-folder-link { padding-inline: 2px; }
  .navigation-folder-link .navigation-favicon { width: 48px; height: 48px; }
}

@media (max-width: 420px) {
  .desktop-icons { top: 58px; left: 0; right: 0; --cell-w: 96px; --cell-h: 88px; }
  .desktop-icon { left: calc(var(--x) * var(--cell-w) + 4px); top: calc(var(--y) * var(--cell-h) + 4px); width: 84px; min-height: 78px; }
  .navigation-icon > span:last-child { width: 84px; }
}

/* Mobile-only phone shell. Desktop geometry above 800px remains untouched. */
@media (max-width: 800px) {
  .linux-boot {
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    font-size: 9px;
    line-height: 1.35;
  }
  .linux-boot-header { padding-bottom: 8px; font-size: 8px; }
  .linux-boot-logo { display: none; }
  .boot-progress {
    top: calc(env(safe-area-inset-top) + 84px);
    width: calc(100vw - 32px);
  }
  .boot-progress-row { gap: 8px; }
  .boot-progress-value { flex-basis: 32px; font-size: 9px; }
  .boot-progress-pet { width: 48px; height: 52px; }
  .boot-progress-pet-sprite { transform: scale(.8); transform-origin: left bottom; }
  .boot-progress-status { margin-top: 7px; font-size: 9px; }
  .linux-boot-log {
    top: calc(env(safe-area-inset-top) + 142px);
    right: 12px;
    bottom: max(16px, env(safe-area-inset-bottom));
    left: 12px;
    max-height: none;
  }
  .linux-boot-log p {
    margin: 1px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .boot-log-line > span { width: 72px; }

  html, body { overscroll-behavior: none; }
  body { background: #070405; }
  .site-viewport { cursor: default; touch-action: pan-y; }
  .desktop-page-sidebar { display: none !important; }
  .desktop {
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    background:
      radial-gradient(circle at 78% 14%, rgba(178, 28, 51, .32), transparent 31%),
      radial-gradient(circle at 16% 74%, rgba(91, 12, 29, .25), transparent 34%),
      linear-gradient(155deg, #16080b 0%, #080405 54%, #13070a 100%);
  }
  .desktop::before {
    opacity: .26;
    background-size: 132px 116px, 188px 156px;
  }
  .desktop::after {
    left: 50%;
    bottom: -24%;
    width: 118vw;
    height: 58vh;
    opacity: .08;
    transform: translateX(-50%);
  }
  .stars, .aurora, .desktop-art,
  .desktop-status-card, .desktop-context-menu, .desktop-tip { display: none !important; }

  .desktop-pet {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(env(safe-area-inset-bottom) + 138px);
    display: grid;
    width: 96px;
    height: 122px;
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .46));
  }
  .desktop-pet-sprite {
    width: 96px;
    height: 104px;
    background-size: 768px 936px;
  }
  .desktop-pet-name { margin-top: -2px; padding: 2px 6px; font-size: 8px; }
  .pet-speech {
    max-width: min(190px, calc(100vw - 24px));
    padding: 8px 10px;
    font-size: 10px;
  }

  .desktop-topbar {
    position: absolute;
    z-index: 25;
    top: 0;
    right: 0;
    left: 0;
    height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
  }
  .top-links, .os-brand, .desktop-clock-controls { display: none !important; }

  body.os-page {
    --os-mobile-control-border: rgba(255, 255, 255, .09);
    --os-mobile-control-radius: 14px;
    --os-mobile-control-background: rgba(255, 255, 255, .075);
    --os-mobile-control-shadow: inset 0 1px rgba(255, 255, 255, .055);
    --os-mobile-control-filter: blur(16px);
  }

  .desktop-web-search,
  .desktop-web-search:focus-within {
    position: absolute;
    z-index: 24;
    top: calc(env(safe-area-inset-top) + 12px);
    right: calc(max(14px, env(safe-area-inset-right)) + 120px);
    left: max(16px, env(safe-area-inset-left));
    width: auto;
    min-width: 0;
    height: 42px;
    transform: none;
    pointer-events: auto;
    border-color: var(--os-mobile-control-border);
    border-radius: var(--os-mobile-control-radius);
    background: var(--os-mobile-control-background);
    box-shadow: var(--os-mobile-control-shadow);
    backdrop-filter: var(--os-mobile-control-filter);
    -webkit-backdrop-filter: var(--os-mobile-control-filter);
  }
  .desktop-web-search input { font-size: 12px; }
  .desktop-web-search button { width: 34px; height: 34px; }

  .desktop-icons {
    --cell-w: auto;
    --cell-h: auto;
    position: absolute;
    z-index: 6;
    top: calc(env(safe-area-inset-top) + 68px);
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(max(18px, env(safe-area-inset-bottom)) + 56px);
    left: max(12px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(84px, auto);
    align-content: start;
    gap: 13px 6px;
    width: auto;
    padding: 4px 0 22px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    touch-action: pan-y;
    transform: none;
    -webkit-overflow-scrolling: touch;
  }
  .desktop-icons::-webkit-scrollbar { display: none; }
  .desktop-icons::before { content: none; }
  .desktop-icon,
  .desktop-icon.navigation-icon {
    position: relative;
    left: auto !important;
    top: auto !important;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 84px;
    gap: 7px;
    padding: 5px 2px;
    color: #f1e7e9;
    border-radius: 16px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
    transform: none !important;
    touch-action: pan-y;
  }
  .desktop-icon:hover { color: #fff; }
  .desktop-icon:active { background: rgba(255, 255, 255, .055); }
  .desktop-icon:focus-visible { outline: 2px solid #ff6879; outline-offset: -2px; }
  .desktop-icon.is-dragging { filter: none; }
  .desktop-icon > span:last-child,
  .navigation-icon > span:last-child {
    width: 100%;
    max-width: 78px;
    overflow: hidden;
    color: inherit;
    font: 500 10px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .desktop-icon .icon,
  .desktop-icon .navigation-folder-icon,
  .desktop-icon .navigation-link-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 17px;
  }
  .desktop-icon .app-icon { font-size: 25px; }
  .desktop-icon .navigation-favicon img { width: 30px; height: 30px; border-radius: 7px; }
  .desktop-icon .folder-mini-grid { inset: 6px; }
  .desktop-icon .folder-mini-grid .navigation-favicon img { width: 11px; height: 11px; border-radius: 2px; }
  .navigation-loading {
    position: static;
    grid-column: 1 / -1;
    align-self: center;
    margin: 18px 0;
    text-align: center;
  }

  .navigation-folder {
    position: fixed;
    z-index: 10010;
    inset: 0;
    height: 100dvh;
    place-items: start center;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top) + 68px) 10px calc(env(safe-area-inset-bottom) + 82px);
    background: rgba(3, 2, 3, .7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .navigation-folder-panel {
    width: min(560px, 100%);
    max-height: min(68dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 150px), 620px);
    padding: 20px 16px calc(22px + env(safe-area-inset-bottom));
    border-radius: 28px;
    transform: translateY(22px);
  }
  .navigation-folder-panel header {
    position: sticky;
    z-index: 2;
    top: -20px;
    align-items: center;
    margin: -20px -16px 18px;
    padding: 20px 16px 14px;
    background: rgba(22, 13, 16, .97);
  }
  .navigation-folder-panel header button { width: 44px; height: 44px; border-radius: 14px; }
  .navigation-folder-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 6px; }
  .navigation-folder-link { min-height: 90px; padding: 5px 1px; }
  .navigation-folder-link .navigation-favicon { width: 56px; height: 56px; border-radius: 17px; }

  .app-window,
  .app-window.wide,
  .app-window.small-window,
  .terminal-window {
    position: fixed;
    z-index: 10020 !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #140c0f;
    box-shadow: none;
    transform: none !important;
  }
  .app-window.focused { box-shadow: none; }
  .app-window.window-enter { animation: mobile-app-enter .2s cubic-bezier(.2, .8, .2, 1); }
  @keyframes mobile-app-enter { from { opacity: 0; transform: translateY(18px) scale(.985); } }
  .window-header {
    height: calc(54px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 12px 0 16px;
    color: #d5c2c6;
    border-bottom-color: rgba(255, 255, 255, .08);
    background: rgba(17, 10, 12, .98);
    cursor: default;
    touch-action: auto;
  }
  .window-header > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .window-header > div { display: flex; align-items: center; }
  .window-header .minimize-button { display: none; }
  .window-header .close-button {
    position: relative;
    width: 44px;
    height: 44px;
    overflow: hidden;
    color: transparent;
    border-radius: 50%;
    background: rgba(255, 255, 255, .075);
  }
  .window-header .close-button::before {
    content: '‹';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #f2e5e8;
    font: 400 34px/1 Arial, sans-serif;
  }
  .window-content {
    height: calc(100dvh - 54px - env(safe-area-inset-top));
    max-height: none;
    padding: 24px 20px calc(34px + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
  .about-content { grid-template-columns: 88px 1fr; gap: 16px; align-items: start; }
  .window-avatar { width: 88px; height: 105px; }
  .project-grid { grid-template-columns: 1fr; }
  .project-grid article { min-height: 132px; }
  .notes a { grid-template-columns: 62px 42px 1fr 12px; gap: 6px; }
  .terminal-body {
    height: calc(100dvh - 110px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: none;
  }
  .terminal-input-row { padding-bottom: calc(11px + env(safe-area-inset-bottom)); }
}

@media (max-width: 340px) {
  .navigation-folder-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Only the icon surface pages; the desktop frame remains a single fixed surface. */
.desktop-icon-viewport {
  position: absolute;
  z-index: 6;
  top: 68px;
  right: 22px;
  bottom: 52px;
  left: 22px;
  overflow: hidden;
}
.desktop-icon-viewport > .site-track { height: 100%; }
.desktop-icon-viewport .desktop-icons {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}
.desktop-icon-viewport .desktop-icons[aria-hidden="true"] { pointer-events: none; }
.desktop-page-sidebar {
  top: 0;
  right: auto;
  bottom: 0;
  left: 0;
  width: 18px;
  border-right: 1px solid rgba(255, 91, 111, .22);
  border-left: 0;
  box-shadow: 8px 0 28px rgba(0, 0, 0, .18);
}
@media (max-width: 800px) {
  .desktop-icon-viewport {
    top: calc(env(safe-area-inset-top) + 68px);
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(max(18px, env(safe-area-inset-bottom)) + 56px);
    left: max(12px, env(safe-area-inset-left));
  }
  .desktop-icon-viewport > .site-track {
    flex-direction: row;
  }
  .desktop-icon-viewport .desktop-icons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(84px, auto);
    align-content: start;
    gap: 13px 6px;
    padding: 4px 0 22px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    touch-action: pan-y;
    min-width: 100%;
  }
  .desktop-icon-viewport .desktop-icons::-webkit-scrollbar { display: none; }
}
/* The desktop frame is a fixed compositor layer; only its icon viewport is paged. */
html:has(body.os-page) {
  position: fixed;
  inset: 0;
}
body.os-page {
  position: fixed;
  inset: 0;
}
.desktop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}
@media (min-width: 801px) {
  .desktop-icon-viewport {
    top: 92px;
    z-index: 30;
    pointer-events: none;
  }
  .desktop-icon-viewport .desktop-icons {
    pointer-events: auto;
  }
  .desktop-icon-viewport .desktop-icons[aria-hidden="true"] {
    pointer-events: none;
  }
  .desktop-status-card {
    z-index: 20;
    display: none;
  }
  .desktop-page-sidebar {
    top: 52px;
  }
}

@media (min-width: 801px) {
  .desktop-web-search {
    position: fixed;
    top: 26px;
    transform: translateX(-50%);
  }
  .desktop-pet {
    position: fixed;
    z-index: 35;
  }
}

/* The three top-left shortcuts and their content windows use a light surface. */
.os-page .top-links button {
  color: #f7f9fc;
  text-shadow: none;
}
.os-page .top-links button:hover,
.os-page .top-links button:focus-visible {
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, .28);
}

.os-page .app-window:not(.terminal-window) {
  color: #30465d;
  border-color: rgba(255, 255, 255, .82);
  background: rgba(248, 251, 255, .97);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .34);
}
.os-page .app-window:not(.terminal-window).focused {
  box-shadow: 0 28px 75px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .7);
}
.os-page .app-window:not(.terminal-window) .window-header {
  color: #718094;
  border-bottom-color: #d9e3ee;
  background: rgba(232, 240, 249, .96);
}
.os-page .app-window:not(.terminal-window) .window-header button { color: #8b98a8; }
.os-page .app-window:not(.terminal-window) .window-header button:hover { color: #1c3654; }
.os-page .app-window:not(.terminal-window) .window-content h1,
.os-page .app-window:not(.terminal-window) .window-content h2 { color: #173355; }
.os-page .app-window:not(.terminal-window) .window-content p,
.os-page .app-window:not(.terminal-window) .project-grid p,
.os-page .app-window:not(.terminal-window) .os-list div,
.os-page .app-window:not(.terminal-window) .contact-content .quote { color: #64758a; }
.os-page .app-window:not(.terminal-window) .eyebrow,
.os-page .app-window:not(.terminal-window) .green-link,
.os-page .app-window:not(.terminal-window) .contact-content a,
.os-page .app-window:not(.terminal-window) .notes b { color: #408dce; }
.os-page .app-window:not(.terminal-window) .muted { color: #97a4b2 !important; }
.os-page .app-window:not(.terminal-window) .window-avatar { border-color: #c0d5e8; background: #eaf2fa; }
.os-page .app-window:not(.terminal-window) .project-grid article { border-color: #d8e3ee; background: #f8fbff; }
.os-page .app-window:not(.terminal-window) .project-grid h3,
.os-page .app-window:not(.terminal-window) .notes strong { color: #28577c; }
.os-page .app-window:not(.terminal-window) .project-status,
.os-page .app-window:not(.terminal-window) .online { color: #55a35e; }
.os-page .app-window:not(.terminal-window) .project-status.pending,
.os-page .app-window:not(.terminal-window) .os-list b { color: #c1a056; }
.os-page .app-window:not(.terminal-window) .notes,
.os-page .app-window:not(.terminal-window) .notes a { border-color: #dbe4ee; }
.os-page .app-window:not(.terminal-window) .notes time,
.os-page .app-window:not(.terminal-window) .note-tag { color: #8b9bad; }
.os-page .app-window:not(.terminal-window) .tags span { color: #477699; border-color: #c8dbea; background: #fff; }
.os-page .app-window:not(.terminal-window) .meter > div { background: #dbe7f0; }
.os-page .app-window:not(.terminal-window) .meter i { background: #67b9df; }

@media (max-width: 800px) {
  .os-page .app-window:not(.terminal-window) {
    background: #f8fbff;
  }
  .os-page .app-window:not(.terminal-window) .window-header {
    color: #53697d;
    border-bottom-color: #d9e3ee;
    background: rgba(232, 240, 249, .98);
  }
  .os-page .app-window:not(.terminal-window) .window-header .close-button {
    background: rgba(23, 51, 85, .08);
  }
  .os-page .app-window:not(.terminal-window) .window-header .close-button::before {
    color: #2c4f6b;
  }
}

/* Keep the OS search chrome white and free of red accents. */
.os-page .desktop-web-search {
  border-color: rgba(255, 255, 255, .2);
  background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04));
}
.os-page .desktop-web-search:focus-within {
  border-color: rgba(255, 255, 255, .58);
  background: linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 28px rgba(0, 0, 0, .34), 0 0 20px rgba(255, 255, 255, .12);
}
.os-page .desktop-search-icon {
  border-color: rgba(255, 255, 255, .82);
}
.os-page .desktop-search-icon::after {
  background: rgba(255, 255, 255, .82);
}
.os-page .desktop-web-search input {
  color: #fff;
}
.os-page .desktop-web-search input::placeholder {
  color: rgba(255, 255, 255, .62);
}
.os-page .desktop-web-search button {
  color: rgba(255, 255, 255, .78);
}
.os-page .desktop-web-search button:hover,
.os-page .desktop-web-search button:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .18);
}

/* Keep the page switcher subtle while giving Rem a smaller footprint. */
.os-page .desktop-page-sidebar {
  background: rgba(17, 9, 12, .38);
  border-color: rgba(255, 91, 111, .16);
  box-shadow: -8px 0 24px rgba(0, 0, 0, .13);
}
.os-page .desktop-pet {
  width: 124px;
  height: 157px;
}
.os-page .desktop-pet-sprite {
  width: 124px;
  height: 134px;
  background-size: 992px 1206px;
}
.os-page .desktop-pet-name {
  margin-top: -3px;
  padding: 2px 6px;
  font-size: 8px;
}
@media (max-width: 800px) {
  .os-page .desktop-pet {
    width: 82px;
    height: 104px;
  }
  .os-page .desktop-pet-sprite {
    width: 82px;
    height: 89px;
    background-size: 656px 801px;
  }
  .os-page .desktop-pet-name {
    margin-top: -2px;
    padding: 2px 5px;
    font-size: 7px;
  }
}