:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: #f6f4ef;
  --muted: rgba(246, 244, 239, .68);
  --line: rgba(255, 255, 255, .18);
  --glass: rgba(25, 28, 29, .76);
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; height: 100%; margin: 0; }
body { overflow: hidden; background: #151718; color: var(--ink); }
button { color: inherit; font: inherit; }
button:focus-visible { outline: 2px solid #d5e2ff; outline-offset: 3px; }
.screen-shell { position: relative; width: 100%; height: 100%; min-height: 540px; overflow: hidden; isolation: isolate; }

/* macOS-inspired login screen */
.login-screen { position: absolute; z-index: 20; inset: 0; overflow: hidden; background: #292a29; transition: opacity .62s cubic-bezier(.2,.75,.2,1), transform .8s cubic-bezier(.2,.75,.2,1), visibility .8s; }
.login-screen.is-unlocking { opacity: 0; transform: scale(1.025); visibility: hidden; pointer-events: none; }
.login-wallpaper, .login-shade, .desktop-wallpaper, .desktop-tint { position: absolute; inset: 0; pointer-events: none; }
.login-wallpaper { background: url("img/danila-profile.jpg") center 42% / cover no-repeat; transform: scale(1.015); }
.login-shade { background: linear-gradient(180deg, rgba(8,12,16,.18), rgba(8,12,16,.1) 50%, rgba(8,12,16,.34)), linear-gradient(90deg, rgba(8,11,12,.12), transparent 72%); }
.login-system-status { position: absolute; z-index: 1; top: 19px; right: 28px; display: flex; height: 20px; align-items: center; gap: 13px; color: rgba(255,255,255,.94); font-size: 11px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,.25); }
.login-system-status img { display: block; object-fit: contain; }
.login-input-source { width: 19px; height: 17px; }
.login-wifi { width: 19px; height: 15px; }
.login-battery { width: 23px; height: 15px; }
.login-content { position: absolute; z-index: 1; bottom: max(34px, calc(22px + env(safe-area-inset-bottom))); left: 50%; display: flex; width: min(290px, calc(100vw - 40px)); flex-direction: column; align-items: center; text-align: center; text-shadow: 0 2px 18px rgba(0,0,0,.26); transform: translateX(-50%); }
.login-avatar { width: 42px; height: 42px; margin-bottom: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.76); border-radius: 50%; box-shadow: 0 4px 15px rgba(0,0,0,.3); }
.login-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 36%; }
.login-content h1 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -.015em; }
.login-role { margin: 4px 0 11px; color: rgba(255,255,255,.82); font-size: 11px; }
.password-entry { display: flex; align-items: center; justify-content: center; gap: 9px; }
.password-field { display: flex; width: 184px; height: 30px; align-items: center; gap: 6px; padding: 0 10px 0 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; background: rgba(22,24,27,.57); box-shadow: 0 4px 16px rgba(0,0,0,.12); backdrop-filter: blur(18px) saturate(1.18); text-align: left; }
.typed-password { display: block; min-width: 0; flex: 1; padding: 0; border: 0; outline: 0; background: transparent; color: white; font: 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: .01em; }
.typed-password::placeholder { color: rgba(255,255,255,.57); letter-spacing: 0; }
.typing-caret { width: 1px; height: 13px; flex: 0 0 auto; background: white; animation: caret 1s steps(2) infinite; }
.password-help { display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; color: rgba(255,255,255,.92); font: 600 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-shadow: none; }
.login-status { max-width: 190px; margin: 8px 0 0; color: rgba(255,255,255,.85); font-size: 10px; line-height: 1.35; }
@media (max-height: 580px) {
  .login-content { bottom: max(18px, calc(12px + env(safe-area-inset-bottom))); }
  .login-avatar { width: 34px; height: 34px; margin-bottom: 5px; }
  .login-role { margin-bottom: 7px; }
  .login-status { margin-top: 5px; }
}
@keyframes caret { 50% { opacity: 0; } }

/* Desktop */
.desktop { position: absolute; inset: 0; overflow: hidden; background: #343d3e; opacity: 0; transition: opacity .55s ease; }
.desktop.is-visible { opacity: 1; }
.desktop-wallpaper { background: url("img/danila-profile.jpg") left 42% / 125% auto no-repeat; transform: scale(1.015); }
.desktop-tint { background: linear-gradient(90deg, rgba(9,23,31,.52), rgba(13,31,42,.28) 52%, rgba(9,23,33,.32)), linear-gradient(0deg, rgba(10,21,30,.4), transparent 38%, transparent 75%, rgba(14,29,41,.18)); }
.menu-bar { position: absolute; z-index: 2; inset: 0 0 auto; display: flex; height: 40px; align-items: center; justify-content: space-between; padding: 0 14px 0 7px; border-bottom: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 13px; text-shadow: 0 1px 3px rgba(0,0,0,.24); }
.menu-left, .menu-right { display: flex; height: 100%; align-items: center; gap: 22px; }
.menu-left button { padding: 0; border: 0; background: none; cursor: pointer; }
.finder-mark { display: grid; width: 20px; height: 26px; margin-right: -10px; place-items: center; }
.finder-mark img { display: block; width: 18px; height: 20px; object-fit: contain; }
.menu-app { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.menu-item { color: rgba(255,255,255,.82); font-size: 13px; }
.menu-item:hover, .menu-left button:hover { color: white; }
.profile-popover { position: absolute; z-index: 8; top: calc(100% + 8px); left: var(--profile-popover-left, 8px); display: flex; width: min(246px, calc(100vw - 24px)); flex-direction: column; gap: 5px; padding: 15px 17px 16px; border: 1px solid rgba(255,255,255,.68); border-radius: 14px; background: rgba(239,243,246,.94); box-shadow: 0 14px 36px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.86); color: #20272c; text-shadow: none; backdrop-filter: blur(22px) saturate(1.35); opacity: 0; pointer-events: none; transform: translateY(-7px) scale(.96); transform-origin: var(--profile-popover-origin, 12px) top; transition: opacity .17s ease, transform .22s cubic-bezier(.2,.8,.2,1), visibility .22s; visibility: hidden; }
.profile-popover.is-open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); visibility: visible; }
.profile-popover strong { color: #20272c; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.profile-popover span { color: rgba(32,39,44,.7); font-size: 12px; letter-spacing: .005em; }
.menu-right { gap: 21px; color: rgba(255,255,255,.94); }
.menu-status { display: grid; width: 20px; height: 24px; place-items: center; }
.menu-status img { display: block; width: 18px; height: 18px; object-fit: contain; }
.wifi-status img { width: 20px; height: 16px; }
.control-center-status img { width: 17px; height: 17px; }
.battery-status img { width: 24px; height: 16px; }
.menu-language { display: grid; width: 22px; height: 18px; flex: 0 0 auto; place-items: center; }
.menu-language img { display: block; width: 22px; height: 18px; object-fit: contain; }
.desktop-widgets { position: absolute; z-index: 1; top: 52px; left: 23px; display: flex; align-items: stretch; gap: 12px; }
.desktop-widget { position: relative; display: flex; width: 216px; height: 216px; flex: 0 0 auto; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 18px; border: 1px solid rgba(255,255,255,.34); border-radius: 18px; background: rgba(224,239,249,.2); box-shadow: 0 12px 30px rgba(10,25,37,.13), inset 0 1px rgba(255,255,255,.2); backdrop-filter: blur(20px) saturate(1.3); color: white; text-align: left; text-shadow: 0 1px 5px rgba(5,20,30,.25); }
button.desktop-widget { cursor: pointer; transition: transform .24s cubic-bezier(.2,.8,.2,1), background .24s ease; }
button.desktop-widget:hover { transform: translateY(-3px); background-color: rgba(236,246,252,.28); }
.widget-label { position: relative; z-index: 1; color: rgba(255,255,255,.74); font-size: 10px; font-weight: 600; }
.profile-widget-main { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; }
.profile-widget-main img { width: 68px; height: 68px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; object-fit: cover; object-position: 45% 36%; box-shadow: 0 4px 12px rgba(6,22,34,.2); }
.profile-widget-main strong, .profile-widget-main small { display: block; }
.profile-widget-main strong { color: #fff; font-size: 18px; font-weight: 600; letter-spacing: -.025em; }
.profile-widget-main small { margin-top: 4px; color: rgba(255,255,255,.77); font-size: 10px; }
.widget-action { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.78); font-size: 10px; }
.widget-action b { font-size: 14px; font-weight: 400; }
.contact-widget { justify-content: flex-start; gap: 12px; }
.contact-links { display: flex; width: 100%; flex: 1; flex-direction: column; justify-content: center; gap: 6px; }
.contact-link { display: flex; min-width: 0; min-height: 42px; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(255,255,255,.075); color: white; text-decoration: none; transition: background .18s ease, transform .18s cubic-bezier(.2,.8,.2,1); }
.contact-link:hover { background: rgba(255,255,255,.17); transform: translateX(2px); }
.contact-link:focus-visible { outline: 2px solid rgba(255,255,255,.9); outline-offset: 2px; }
.contact-link > span { display: block; min-width: 0; }
.contact-link strong, .contact-link small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-link strong { font-size: 11px; font-weight: 600; }
.contact-link small { margin-top: 2px; color: rgba(255,255,255,.72); font-size: 9px; }
.contact-link b { flex: 0 0 auto; color: rgba(255,255,255,.78); font-size: 13px; font-weight: 400; }
.project-grid { position: absolute; z-index: 3; inset: 40px 8px calc(100px + env(safe-area-inset-bottom)); pointer-events: none; }
.project-icon { position: absolute; top: 0; left: 0; display: flex; width: 92px; min-height: 98px; flex-direction: column; align-items: center; padding: 4px; border: 1px solid transparent; border-radius: 9px; background: transparent; cursor: grab; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-drag: none; text-align: center; text-shadow: 0 1px 6px rgba(0,0,0,.6); transition: transform .16s cubic-bezier(.22,1,.36,1), background .16s ease, border-color .16s ease; }
.project-icon:hover { z-index: 2; transform: translateY(-2px); background: rgba(255,255,255,.08); }
.project-icon.is-selected { border-color: rgba(216,235,255,.46); background: rgba(138,183,226,.22); }
.project-icon img { width: 66px; height: 66px; border: 1px solid rgba(255,255,255,.72); border-radius: 7px; background: rgba(15,20,20,.45); box-shadow: 0 5px 16px rgba(0,0,0,.26); object-fit: cover; }
.project-icon span { display: block; max-width: 100%; margin-top: 6px; overflow: hidden; color: white; font-size: 10px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.project-icon img, .project-icon span { pointer-events: none; }
.project-icon.is-dragging { z-index: 4; cursor: grabbing; transform: scale(1.04); transition: none; }

/* Dock */
.dock { position: absolute; z-index: 5; bottom: 15px; left: 50%; display: flex; max-width: calc(100vw - 26px); align-items: end; gap: 8px; padding: 8px 11px 9px; border: 1px solid rgba(255,255,255,.48); border-radius: 19px; background: rgba(224,236,245,.42); box-shadow: 0 16px 42px rgba(8,22,34,.27), inset 0 1px rgba(255,255,255,.45); backdrop-filter: blur(24px) saturate(1.5); transform: translateX(-50%); }
.dock-app { position: relative; display: grid; width: 54px; height: 62px; flex: 0 0 auto; align-items: center; justify-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer; transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.dock-app-static { cursor: default; }
.dock-app:hover { z-index: 1; transform: translateY(-9px) scale(1.12); }
.app-icon { position: relative; display: grid; width: 48px; height: 48px; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.27); border-radius: 12px; background: linear-gradient(145deg, #4d5e62, #1c2225); box-shadow: 0 5px 12px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.2); }
.app-icon-reference { border: 0; background-color: transparent; box-shadow: none; }
.app-icon-image { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: contain; }
.davinci-icon { border-radius: 24%; background: url("img/apps/davinci.png") 61% 77% / 209.8% 182% no-repeat; }
.lightroom-icon { border-radius: 25%; background: url("img/apps/lightroom.png") 40% 0% / 114.5% 110.1% no-repeat; }
.telegram-icon { border-radius: 27%; background: url("img/apps/telegram.png") 45.8% 100% / 178.7% 103.3% no-repeat; }
.dock-divider { width: 1px; height: 36px; flex: 0 0 auto; align-self: center; margin: 0 1px 1px; background: rgba(255,255,255,.28); }
.dock-tip { position: absolute; z-index: 2; top: -42px; left: 50%; visibility: hidden; padding: 7px 12px; border: 1px solid rgba(255,255,255,.72); border-radius: 999px; background: rgba(239,242,244,.96); box-shadow: 0 7px 20px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.8); color: #20272c; font-size: 12px; font-weight: 500; line-height: 1; opacity: 0; transform: translate(-50%,4px); transition: opacity .16s ease, transform .16s ease, visibility .16s; white-space: nowrap; backdrop-filter: blur(16px) saturate(1.25); }
.dock-tip::after { position: absolute; bottom: -6px; left: 50%; width: 0; height: 0; border-top: 6px solid rgba(239,242,244,.96); border-right: 6px solid transparent; border-left: 6px solid transparent; content: ""; transform: translateX(-50%); }
.dock-app:hover .dock-tip, .dock-app:focus-visible .dock-tip { visibility: visible; opacity: 1; transform: translate(-50%,0); }
.dock-app.davinci .dock-tip { left: 0; transform: translateY(4px); }
.dock-app.davinci:hover .dock-tip, .dock-app.davinci:focus-visible .dock-tip { transform: translateY(0); }
.dock-app.youtube .dock-tip { right: 0; left: auto; transform: translateY(4px); }
.dock-app.youtube:hover .dock-tip, .dock-app.youtube:focus-visible .dock-tip { transform: translateY(0); }
.dock-indicator { position: absolute; bottom: 3px; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.75); transform: translateX(-50%); }

/* Finder-style project windows */
.window-layer { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.portfolio-window { position: absolute; top: 50%; left: 50%; display: flex; width: min(900px, calc(100vw - 44px)); height: min(570px, calc(100vh - 210px)); min-height: 330px; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.38); border-radius: 12px; background: rgba(245,244,240,.97); box-shadow: 0 28px 90px rgba(0,0,0,.48), 0 2px 9px rgba(0,0,0,.16); color: #242725; opacity: 0; pointer-events: auto; transform: translate(-50%,-50%) scale(1); transform-origin: center; transition: transform .42s cubic-bezier(.2,.78,.2,1), opacity .25s ease; }
.portfolio-window.is-opening, .portfolio-window.is-closing { opacity: .3; transform: translate(calc(-50% + var(--from-x,0px)), calc(-50% + var(--from-y,0px))) scale(var(--from-sx,.1), var(--from-sy,.1)); }
.portfolio-window.is-open { opacity: 1; transform: translate(calc(-50% + var(--drag-x,0px)),calc(-50% + var(--drag-y,0px))) scale(1); }
.portfolio-window.is-dragging { transition: none; }
.portfolio-window.is-maximized { width: calc(100vw - 56px); height: calc(100vh - 94px); }
.window-titlebar { position: relative; display: flex; height: 43px; flex: 0 0 auto; align-items: center; justify-content: center; border-bottom: 1px solid rgba(21,27,29,.1); background: linear-gradient(#faf9f7,#efeeeb); color: #373a39; cursor: grab; font-size: 12px; font-weight: 600; touch-action: none; user-select: none; }
.portfolio-window.is-dragging .window-titlebar { cursor: grabbing; }
.window-controls { position: absolute; left: 14px; display: flex; gap: 7px; }
.window-control { width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; }
.window-control.close { background: #ff6258; }
.window-control.minimize { background: #f6bd4f; }
.window-control.zoom { background: #37c94a; }
.window-content { display: flex; min-height: 0; flex: 1; opacity: 0; transition: opacity .22s ease .12s; }
.portfolio-window.content-visible .window-content { opacity: 1; }
.project-window-content { display: grid; grid-template-columns: minmax(0,1.34fr) minmax(245px,.66fr); width: 100%; height: 100%; }
.project-main { display: flex; min-width: 0; min-height: 0; flex-direction: column; padding: 15px; }
.project-hero { display: grid; min-height: 0; flex: 1; place-items: center; overflow: hidden; border-radius: 7px; background: #e5e3df; }
.project-image-open { display: grid; width: 100%; height: 100%; min-width: 0; min-height: 0; place-items: center; padding: 0; overflow: hidden; border: 0; border-radius: inherit; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: contain; cursor: zoom-in; }
.project-hero video { width: 100%; height: 100%; background: #111; object-fit: contain; }
.project-thumbs { display: flex; min-height: 64px; flex: 0 0 auto; gap: 8px; overflow: auto hidden; padding-top: 10px; }
.project-thumb { width: 52px; height: 52px; flex: 0 0 auto; padding: 0; overflow: hidden; border: 1px solid transparent; border-radius: 5px; background: #deddd9; cursor: pointer; }
.project-thumb.is-active { border: 2px solid #577f9f; }
.project-thumb img { width: 100%; height: 100%; object-fit: cover; }
.project-details { display: flex; min-width: 0; min-height: 0; flex-direction: column; padding: 29px 25px 24px; overflow-y: auto; border-left: 1px solid rgba(21,27,29,.1); background: rgba(250,249,247,.7); }
.window-kicker { margin: 0 0 13px; color: #757d79; font-size: 9px; }
.project-details h2, .app-window-content h2 { margin: 0; color: #202523; font-size: clamp(23px,3vw,34px); font-weight: 500; letter-spacing: -.055em; line-height: 1.05; }
.project-role { margin: 12px 0 0; color: #57625d; font-size: 12px; line-height: 1.45; }
.project-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 10px; margin-top: auto; padding-top: 24px; }
.meta-label { display: block; margin-bottom: 5px; color: #858b87; font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.meta-value { color: #333a36; font-size: 11px; }
.app-window-content { width: 100%; height: 100%; min-height: 0; padding: 31px; overflow: auto; }
.app-window-content h2 { margin-bottom: 12px; }
.app-intro { max-width: 570px; margin: 0; color: #555c58; font-size: 13px; line-height: 1.65; }
.app-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: 12px; margin-top: 25px; }
.app-project { display: block; min-width: 0; padding: 0; overflow: hidden; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; background: #fff; color: #242725; cursor: pointer; text-align: left; }
.app-project img { display: block; width: 100%; aspect-ratio: 1.25; object-fit: cover; }
.app-project span { display: block; padding: 8px 10px 10px; font-size: 10px; }
.app-project small { display: block; margin-top: 3px; color: #858a86; font: 9px var(--mono); }
.app-about-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(180px,.8fr); gap: 34px; margin-top: 25px; }
.app-about-grid h3 { margin: 0 0 10px; color: #737b76; font: 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.app-about-grid p, .app-about-grid li { color: #4b504e; font-size: 12px; line-height: 1.65; }
.app-about-grid ul { margin: 0; padding: 0; list-style: none; }
.app-about-grid a { color: #315e7a; text-decoration: none; }
.app-about-grid a:hover { text-decoration: underline; }
.video-window { display: grid; width: 100%; height: 100%; min-height: 0; grid-template-columns: minmax(0,1.5fr) minmax(200px,.5fr); grid-template-rows: minmax(0,1fr); gap: 20px; align-items: center; }
.video-window video { width: 100%; min-width: 0; min-height: 0; max-height: 100%; border-radius: 7px; background: #111; object-fit: contain; }
.video-window p { color: #555c58; font-size: 12px; line-height: 1.6; }

/* Full-frame photo viewer */
.image-viewer { position: fixed; z-index: 1000; inset: 0; display: grid; grid-template-rows: 52px minmax(0,1fr) 42px; background: rgba(8,12,16,.96); color: #f4f5f5; }
.image-viewer-top, .image-viewer-bottom { display: flex; min-width: 0; align-items: center; justify-content: space-between; padding: 0 24px; color: rgba(244,245,245,.78); font: 10px var(--mono); letter-spacing: .08em; }
.image-viewer-close, .image-viewer-arrow { display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; }
.image-viewer-close { width: 32px; height: 32px; border-radius: 50%; font: 24px/1 sans-serif; }
.image-viewer-stage { display: grid; min-width: 0; min-height: 0; grid-template-columns: 52px minmax(0,1fr) 52px; gap: 14px; align-items: center; justify-items: center; padding: 0 20px; }
.image-viewer-photo-slot { display: grid; width: 100%; height: 100%; min-width: 0; min-height: 0; place-items: center; }
.image-viewer-image { display: block; width: auto; height: min(calc(100vh - 116px),100%); max-width: 100%; max-height: 100%; object-fit: contain; }
.image-viewer-arrow { width: 42px; height: 54px; border-radius: 22px; font: 34px/1 sans-serif; }
.image-viewer-bottom { justify-content: center; gap: 18px; letter-spacing: .04em; }
.image-viewer-count { color: #fff; }

@media (max-width: 840px) {
  .desktop-widgets { left: 18px; gap: 9px; }
  .desktop-widget { width: 194px; height: 194px; padding: 16px; }
  .project-icon { width: 84px; min-height: 88px; }
  .project-icon img { width: 58px; height: 58px; }
  .project-icon span { font-size: 9px; }
  .menu-bar { padding-inline: 12px; }
  .menu-left, .menu-right { gap: 12px; }
  .menu-item { font-size: 11px; }
  .project-window-content { grid-template-columns: minmax(0,1.15fr) minmax(210px,.85fr); }
  .project-details { padding: 24px 19px 20px; }
}
@media (max-width: 600px) {
  .screen-shell { min-height: 500px; }
  .login-wallpaper { background-position: 43% center; }
  .desktop-wallpaper { background-size: auto 100%; background-position: 36% 42%; }
  .menu-left { gap: 9px; }
  .finder-mark { margin-right: 0; }
  .menu-item { display: none; }
  .menu-right { gap: 9px; }
  .menu-status { width: 17px; }
  .menu-status img { width: 16px; height: 16px; }
  .wifi-status img { width: 18px; height: 16px; }
  .control-center-status img { width: 17px; height: 17px; }
  .battery-status img { width: 21px; height: 15px; }
  .menu-language, .menu-language img { width: 20px; height: 16px; }
  .desktop-widgets { top: 48px; right: 12px; left: 12px; gap: 8px; }
  .desktop-widget { width: calc((100vw - 32px) / 2); height: auto; aspect-ratio: 1 / 1; padding: 12px; border-radius: 16px; }
  .widget-label, .widget-action { font-size: 9px; }
  .profile-widget-main { gap: 7px; }
  .profile-widget-main img { width: 47px; height: 47px; }
  .profile-widget-main strong { font-size: 13px; }
  .profile-widget-main small { font-size: 8px; }
  .contact-widget { gap: 6px; }
  .contact-links { gap: 4px; }
  .contact-link { min-height: 36px; padding: 4px 6px; border-radius: 8px; }
  .contact-link strong { font-size: 9px; }
  .contact-link small { font-size: 7px; }
  .contact-link b { font-size: 11px; }
  .project-grid { top: calc(58px + (100vw - 32px) / 2); right: 6px; bottom: calc(84px + env(safe-area-inset-bottom)); left: 6px; }
  .project-icon { width: 72px; min-height: 76px; padding: 3px; }
  .project-icon img { width: 50px; height: 50px; }
  .project-icon span { max-width: 90px; font-size: 8px; }
  .dock { bottom: 9px; gap: 2px; padding: 6px 6px 8px; border-radius: 14px; }
  .dock-app { width: clamp(31px,10vw,39px); height: 48px; }
  .app-icon { width: clamp(29px,9vw,35px); height: clamp(29px,9vw,35px); border-radius: 9px; }
  .dock-divider { height: 27px; margin-inline: 0; }
  .portfolio-window { width: calc(100vw - 20px); height: min(68vh,600px); min-height: 380px; border-radius: 10px; }
  .window-titlebar { height: 38px; }
  .project-window-content { display: flex; flex-direction: column; overflow: hidden; }
  .project-main { min-height: 0; flex: 1; padding: 10px; }
  .project-hero { min-height: 130px; }
  .project-thumbs { min-height: 50px; gap: 6px; padding-top: 7px; }
  .project-thumb { width: 40px; height: 40px; }
  .project-details { max-height: 34%; flex: 0 0 auto; padding: 12px 15px 14px; overflow-y: auto; border-top: 1px solid rgba(21,27,29,.1); border-left: 0; }
  .window-kicker { margin-bottom: 6px; }
  .project-details h2, .app-window-content h2 { font-size: 23px; }
  .project-role { margin-top: 6px; font-size: 10px; }
  .project-meta { gap: 8px; padding-top: 10px; }
  .app-window-content { padding: 21px 17px; }
  .app-about-grid, .video-window { grid-template-columns: 1fr; gap: 18px; }
  .app-about-grid { margin-top: 18px; }
  .app-about-grid p, .app-about-grid li, .app-intro { font-size: 11px; }
  .image-viewer { grid-template-rows: 46px minmax(0,1fr) 40px; }
  .image-viewer-top, .image-viewer-bottom { padding-inline: 13px; font-size: 9px; }
  .image-viewer-stage { grid-template-columns: 34px minmax(0,1fr) 34px; gap: 5px; padding-inline: 8px; }
  .image-viewer-arrow { width: 32px; height: 46px; font-size: 28px; }
}

@media (max-height: 680px) and (min-width: 601px) {
  .project-icon { min-height: 84px; }
  .project-icon img { width: 58px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}