:root {
  color-scheme: dark;
  --ink: #02080f;
  --surface: #10262c;
  --mint: #b7f8db;
  --sky: #50a7c2;
  --white: #f4f8f6;
  --muted: #bbcacb;
  --border: #ffffff24;
  --glass-sheen: linear-gradient(150deg, #dfefe923, #c2d8d916);
  --glass-edge: #ffffff3d;
  --glass-highlight: inset 0 1px 0 #ffffff18;
  --glass-blur: 22px;
  --window-tint: #0b202a9c;
  --window-copy: #e4ede8;
  --window-secondary: #d4e2da;
  --tooltip-fill: rgb(209 211 209 / 80%);
  font-family: var(--font-interface);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { color: var(--white); background: var(--ink); overflow: hidden; }
body:has(.window[open]) { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button { border: 0; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--mint); outline-offset: 5px; }
button:disabled { cursor: default; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 12px; background: var(--ink); }
.skip-link:focus { top: 50px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.wallpaper { position: fixed; inset: 0; z-index: -2; background: #377caa; }
.wallpaper::before { content: ""; position: absolute; inset: 0; background: var(--wallpaper-image, url('assets/xp-meadow-wallpaper.png')) center / cover no-repeat; }
.wallpaper::after { content: ""; position: absolute; inset: 0; background: var(--wallpaper-shade, linear-gradient(90deg, #081e333d, transparent 44%, #081e3324), linear-gradient(0deg, #10241661, transparent 48%, #081e3324)); }
html[data-wallpaper="snow-leopard"] { --wallpaper-image: url('assets/wallpapers/snow-leopard.jpg'); --wallpaper-shade: linear-gradient(90deg, #150b343d, #1006230a 50%, #10062333); }
html[data-wallpaper="mavericks"] { --wallpaper-image: url('assets/wallpapers/mavericks.jpg'); --wallpaper-shade: linear-gradient(90deg, #05232466, #05192312 55%, #0519233d), linear-gradient(0deg, #0618214d, transparent 50%); }
html[data-wallpaper="mojave"] { --wallpaper-image: url('assets/wallpapers/mojave.jpg'); --wallpaper-shade: linear-gradient(90deg, #101d426b, #14132426 55%, #18122240), linear-gradient(0deg, #12122261, transparent 50%); }
html[data-wallpaper="big-sur"] { --wallpaper-image: url('assets/wallpapers/big-sur.jpg'); --wallpaper-shade: linear-gradient(90deg, #0f18425c, #14143314 55%, #14143347), linear-gradient(0deg, #061b3447, transparent 50%); }
/* Uniform shading keeps movable desktop labels readable across the entire rug. */
html[data-wallpaper="carpet"] { --wallpaper-image: url('assets/wallpapers/carpet.jpg'); --wallpaper-shade: linear-gradient(#1c10184d, #1c10184d); }
html[data-wallpaper="carpet"] .desktop-intro, html[data-wallpaper="carpet"] .desktop-note { text-shadow: 0 2px 5px #000, 0 3px 18px #000; }
.wallpaper-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 7px; min-height: 32px; padding: 0 8px; background: transparent; border-radius: 5px; font-size: .8125rem; }
.wallpaper-toggle:hover, .wallpaper-toggle[aria-expanded="true"] { background: #ffffff14; }
.wallpaper-picker { position: fixed; z-index: 12; top: 56px; right: 24px; width: 374px; max-width: calc(100% - 24px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; padding: 20px; border-radius: 14px; scrollbar-width: thin; scrollbar-color: #bbcacb66 transparent; }
.wallpaper-picker[hidden] { display: none; }
.wallpaper-picker-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.wallpaper-picker h2 { margin: 0; font-size: 1rem; font-weight: 600; }
#wallpaper-status { margin: 5px 0 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }
#wallpaper-status.is-error { color: #ffd0be; }
.wallpaper-close { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; margin: -5px -6px 0 0; background: transparent; border-radius: 7px; color: var(--muted); }
.wallpaper-close:hover { background: #ffffff14; color: var(--white); }
.wallpaper-options { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 14px; }
.wallpaper-option { min-width: 0; padding: 0; text-align: left; background: transparent; border-radius: 7px; }
.wallpaper-thumbnail { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 7px; background: #061a20; }
.wallpaper-thumbnail::after { content: ""; position: absolute; inset: 0; border: 1px solid #ffffff26; border-radius: inherit; pointer-events: none; }
.wallpaper-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.wallpaper-option:hover .wallpaper-thumbnail::after { border-color: #ffffffb3; }
.wallpaper-option[aria-pressed="true"] .wallpaper-thumbnail::after { border: 2px solid var(--mint); }
.wallpaper-check { position: absolute; right: 6px; bottom: 6px; display: none; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; background: var(--mint); color: #10262c; }
.wallpaper-option[aria-pressed="true"] .wallpaper-check { display: flex; }
.wallpaper-option[aria-busy="true"] .wallpaper-thumbnail { opacity: .65; }
.wallpaper-name, .wallpaper-detail { display: block; overflow-wrap: anywhere; }
.wallpaper-name { margin-top: 8px; font-size: .8125rem; line-height: 1.35; font-weight: 550; }
.wallpaper-detail { margin-top: 3px; color: var(--muted); font-size: .6875rem; line-height: 1.4; }
.menubar { height: 44px; position: relative; z-index: 5; display: flex; align-items: center; padding: 0 28px; gap: 34px; background: #08202685; border-bottom: 1px solid #ffffff14; backdrop-filter: blur(24px); font-size: .875rem; }
.brand { display: flex; align-items: center; gap: 15px; min-height: 44px; white-space: nowrap; }
.brand strong { font-weight: 600; }
.brand-logo { display: block; flex: 0 0 32px; width: 32px; height: 32px; object-fit: contain; }
.menubar nav { display: flex; gap: 3px; height: 100%; }
.menubar nav button { background: none; padding: 0 13px; font-size: .875rem; }
.menubar nav button:hover { background: #ffffff14; }
.menubar-right { margin-left: auto; display: flex; gap: 26px; align-items: center; font-variant-numeric: tabular-nums; }
.location { color: var(--muted); }
.language-switch { display: flex; align-items: center; gap: 2px; flex-shrink: 0; padding-left: 15px; border-left: 1px solid var(--border); }
.language-switch button { position: relative; min-width: 34px; min-height: 32px; padding: 0 7px; border-radius: 5px; background: transparent; color: #d3deda; font-size: .6875rem; font-weight: 650; letter-spacing: .04em; transition: background .15s, color .15s; }
.language-switch button:hover { background: #ffffff14; color: var(--white); }
.language-switch button[aria-pressed="true"] { background: #b7f8db26; color: var(--mint); }
.language-switch button:focus-visible { outline-offset: 1px; }
.desktop { position: relative; height: calc(100dvh - 44px); min-height: 580px; outline: none; }
.desktop-intro { position: absolute; top: 5.7%; left: 4.4%; pointer-events: none; text-shadow: 0 2px 12px #102d4659; }
.desktop-intro p { font-size: .875rem; color: #f0f6fa; margin: 0 0 13px; }
.desktop-intro h1 { font-size: clamp(28px, 3.25vw, 52px); line-height: 1.05; font-weight: 450; letter-spacing: -.05em; margin: 0; }
.desktop-note { position: absolute; right: 4.4%; top: 7.5%; color: #f0f6fa; font-size: 1rem; line-height: 1.5; text-shadow: 0 1px 5px #142b42b3; }
.projects { position: absolute; inset: 0 0 126px; }
.desktop-marquee { position: absolute; z-index: 9; pointer-events: none; border: 1px solid #c1e9fff0; border-radius: 3px; background: #79baff26; }
.desktop-marquee[hidden] { display: none; }
.desktop-done { position: fixed; z-index: 12; top: max(60px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); min-width: 84px; min-height: 44px; padding: 10px 18px; border-radius: 12px; background: var(--mint); color: #143a30; font-weight: 600; box-shadow: 0 4px 16px #071b2933; }
.desktop-done[hidden] { display: none; }
.desktop :is(.project, .about-file, .recommendations-file) { touch-action: manipulation; -webkit-touch-callout: none; }
.desktop :is(.project, .about-file, .recommendations-file) img { -webkit-touch-callout: none; user-select: none; }
.desktop.is-touch-editing :is(.project, .about-file, .recommendations-file) { touch-action: none; cursor: grab; }
.desktop.is-touch-editing .project-cover--logo img,
.desktop.is-touch-editing .profile-stamp,
.desktop.is-touch-editing .recommendations-file > img { animation: desktop-jiggle .16s ease-in-out infinite alternate; transform-origin: 50% 65%; }
.desktop.is-touch-editing .project:nth-child(2n) img { animation-delay: -.11s; animation-duration: .18s; }
.desktop.is-touch-editing .project:nth-child(3n) img { animation-delay: -.06s; }
.desktop.is-touch-editing .project .project-cover--logo img { transform: none; }
.desktop.is-touch-editing .recommendations-file:is(:hover, :focus-visible) > img { transform: none; }
.desktop.is-touch-editing .is-touch-dragging { z-index: 9; cursor: grabbing; }
.desktop.is-touch-editing .is-touch-dragging :is(.project-cover--logo img, .profile-stamp),
.desktop.is-touch-editing .recommendations-file.is-touch-dragging > img { animation: none; rotate: 0deg; scale: 1.06; }
@keyframes desktop-jiggle { from { rotate: -.9deg; } to { rotate: .9deg; } }
.desktop.is-selecting, .desktop.is-moving-projects { user-select: none; }
.desktop.is-selecting { cursor: crosshair; }
.desktop.is-moving-projects, .desktop.is-moving-projects .project { cursor: grabbing; }
.project.is-selected .project-cover--logo::before { opacity: 1; border-color: #c1e9ffd9; background: #79baff38; }
.project.is-selected .project-name { background: #2b638fc9; text-shadow: 0 1px 3px #0007; }
.project.is-selected .project-cover:not(.project-cover--logo) { outline: 2px solid #c1e9ffd9; outline-offset: 3px; }
.desktop:is(.is-selecting, .is-moving-projects) .project-cover,
.desktop:is(.is-selecting, .is-moving-projects) .project-cover--logo img { transition: none; transform: none; }
.project { position: absolute; left: var(--x); top: var(--y); width: var(--w, 190px); padding: 10px; background: transparent; border-radius: 8px; user-select: none; touch-action: none; text-align: center; transition: background .15s; }
.project.is-dragging, .about-file.is-dragging, .recommendations-file.is-dragging { z-index: 8; cursor: grabbing; }
.project-cover { display: block; position: relative; aspect-ratio: 1.85; border: 1px solid #ffffff52; border-radius: 5px; overflow: hidden; box-shadow: 0 9px 24px #0006; background: var(--tile); transform: rotate(var(--rotation, 0deg)); transition: transform .22s, box-shadow .22s; }
.project-cover img { width: 100%; height: 100%; display: block; object-fit: contain; }
.project:hover .project-cover, .project:focus-visible .project-cover { transform: translateY(-4px) rotate(0) scale(1.08); box-shadow: 0 15px 26px #0006; }
.project-cover--logo { width: min(124px, 100%); aspect-ratio: 1; margin-inline: auto; padding: 16px; border: 0; border-radius: 12px; background: transparent; overflow: visible; transform: none; box-shadow: none; }
.project-cover--logo::before { content: ""; position: absolute; inset: 0; border: 2px solid #d6e4ee66; border-radius: inherit; background: #15263299; box-shadow: 0 0 0 2px #e8f0fa12, inset 0 1px 0 #ffffff12; opacity: 0; transition: opacity .18s; pointer-events: none; }
.project-cover--logo img { position: relative; border-radius: 25%; box-shadow: 0 9px 24px #0006; transition: transform .22s, box-shadow .22s; }
.project:hover .project-cover--logo, .project:focus-visible .project-cover--logo { transform: none; box-shadow: none; }
.project:hover .project-cover--logo::before, .project:focus-visible .project-cover--logo::before, .project.is-dragging .project-cover--logo::before { opacity: 1; }
.project:hover .project-cover--logo img, .project:focus-visible .project-cover--logo img { transform: scale(1.08); box-shadow: 0 12px 24px #0006; }
.project:has(.project-cover--logo):focus-visible { outline: none; }
.project:focus-visible .project-cover--logo::before { border-color: var(--mint); }
.project-name { display: table; max-width: 100%; margin: 11px auto 0; font-size: .875rem; font-weight: 550; line-height: 1.3; text-shadow: 0 2px 6px #000; padding: 2px 7px; border-radius: 4px; }
.project:has(.project-cover--logo) .project-name { margin-top: 5px; }
.project:focus-visible .project-name { background: #467765; }
.project-category { display: block; margin-top: 3px; color: #d5dedc; font-size: .75rem; font-weight: 400; text-shadow: 0 1px 4px #000; }
.project-tag { position: absolute; right: 8px; top: 8px; padding: 4px 6px; background: #061114b3; color: var(--mint); font-size: .65rem; border-radius: 3px; backdrop-filter: blur(5px); }
.about-file { position: absolute; left: 48%; bottom: 158px; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 120px; background: transparent; padding: 10px; border-radius: 8px; font-size: .875rem; text-shadow: 0 2px 6px #000; cursor: grab; user-select: none; touch-action: none; }
.about-file:hover { background: #ffffff14; }
.recommendations-file { position: absolute; left: calc(100% - 172px); top: 23%; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 144px; padding: 10px 6px; border-radius: 8px; background: transparent; font-size: .875rem; line-height: 1.35; text-align: center; text-shadow: 0 2px 6px #000; cursor: grab; user-select: none; touch-action: none; }
.recommendations-file > img { display: block; width: 88px; height: 88px; border-radius: 20px; box-shadow: 0 9px 24px #0005; transition: transform .2s; }
.recommendations-file:hover { background: #ffffff14; }
.recommendations-file:is(:hover, :focus-visible) > img { transform: translateY(-3px); }
.recommendations-file.is-dragging > img { transform: none; }
.recommendations-file > span { max-width: 100%; overflow-wrap: anywhere; }
.profile-stamp { position: relative; display: block; width: 88px; height: 108px; background: #f3f1e7; padding: 5px 5px 26px; transform: rotate(-6deg); box-shadow: 0 5px 18px #0006; }
.profile-stamp > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.profile-greeting { position: absolute; left: 12px; right: 12px; bottom: 3px; height: 23px; display: grid; place-items: center; pointer-events: none; }
.profile-greeting svg { display: block; width: 100%; height: 100%; overflow: visible; }
.about-file.hello-is-paused .profile-greeting *, body:has(.window[open]) .profile-greeting * { animation-play-state: paused !important; }
.desktop-footer { position: absolute; bottom: 27px; left: 28px; right: 28px; display: flex; justify-content: space-between; gap: 20px; color: #edf4e9; font-size: .875rem; line-height: 1.5; text-shadow: 0 1px 4px #102416; pointer-events: none; }
.dock { --dock-blur: 9px; --dock-icon-size: 52px; position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; padding: 11px 13px 10px; z-index: 10; border: 1px solid transparent; border-radius: 25px; background: transparent; }
/* A separate glass layer keeps wallpaper detail and leaves tooltip overflow clear. */
.dock::before { content: ""; position: absolute; inset: -1px; z-index: -1; border: 1px solid #eff5ee52; border-radius: inherit; background: linear-gradient(180deg, #f4f8f32b 0%, #dce5de0c 46%, #ebf1eb1a 100%); box-shadow: inset 0 1px 1px #ffffff45, inset 0 -1px 1px #ffffff1c, 0 9px 28px #08130c2b; -webkit-backdrop-filter: blur(var(--dock-blur)) saturate(145%) brightness(1.08); backdrop-filter: blur(var(--dock-blur)) saturate(145%) brightness(1.08); pointer-events: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dock::before { background: #657168ed; } }
.dock-group { display: flex; align-items: center; gap: inherit; }
.dock-item { position: relative; display: block; padding: 0; background: none; border-radius: 12px; }
.dock-tool { user-select: none; }
.dock-tile { position: relative; display: flex; align-items: center; justify-content: center; width: var(--dock-icon-size); height: var(--dock-icon-size); border-radius: 12px; box-shadow: inset 0 1px 1px #ffffff70, 0 3px 7px #0004; transition: transform .2s; font-size: 2rem; }
.dock-item:hover .dock-tile, .dock-item:focus-visible .dock-tile { transform: translateY(-9px) scale(1.09); }
.dock-tooltip, .header-tooltip {
  --tooltip-translate: -50%;
  --tooltip-body-edge: top;
  --tooltip-arrow-edge: bottom;
  --tooltip-arrow-x: 50%;
  --tooltip-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 11'%3E%3Cpath fill='white' d='M0 0h18l-8 9a1.3 1.3 0 0 1-2 0Z'/%3E%3C/svg%3E");
  position: absolute; left: 50%; z-index: 2; isolation: isolate;
  transform: translate(var(--tooltip-translate), 3px);
  white-space: nowrap; padding: 7px 15px; border: 0;
  color: #202421; font-size: .875rem; font-weight: 400; line-height: 20px; letter-spacing: normal;
  text-shadow: none; filter: drop-shadow(0 3px 5px #07100a26);
  opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s; pointer-events: none;
}
/* One masked glass layer joins the pill and arrow without double opacity or a blur seam. */
.dock-tooltip::before, .header-tooltip::before {
  content: ""; position: absolute; inset: 0 0 -10px; z-index: -1;
  background: var(--tooltip-fill);
  -webkit-backdrop-filter: blur(10px) saturate(90%); backdrop-filter: blur(10px) saturate(90%);
  --tooltip-mask:
    linear-gradient(#000 0 0) center var(--tooltip-body-edge) / calc(100% - 32px) 34px no-repeat,
    radial-gradient(circle closest-side, #000 98%, transparent 100%) left var(--tooltip-body-edge) / 34px 34px no-repeat,
    radial-gradient(circle closest-side, #000 98%, transparent 100%) right var(--tooltip-body-edge) / 34px 34px no-repeat,
    var(--tooltip-arrow) var(--tooltip-arrow-x) var(--tooltip-arrow-edge) / 18px 11px no-repeat;
  -webkit-mask: var(--tooltip-mask); mask: var(--tooltip-mask);
}
.dock-tooltip { bottom: calc(100% + 25px); }
.header-tooltip {
  --tooltip-body-edge: bottom; --tooltip-arrow-edge: top;
  --tooltip-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 11'%3E%3Cpath fill='white' d='M0 11h18L10 2a1.3 1.3 0 0 0-2 0Z'/%3E%3C/svg%3E");
  top: calc(100% + 17px); transform: translate(var(--tooltip-translate), -3px);
}
.header-tooltip::before { inset: -10px 0 0; }
.language-switch button:last-child .header-tooltip { --tooltip-translate: 0%; --tooltip-arrow-x: calc(100% - 8px); left: auto; right: 0; }
.dock-item:hover, .dock-item:focus-visible { z-index: 2; }
.dock-item:hover .dock-tooltip, .dock-item:focus-visible .dock-tooltip,
.language-switch button:is(:hover, :focus-visible) .header-tooltip,
.wallpaper-toggle[aria-expanded="false"]:is(:hover, :focus-visible) .header-tooltip { opacity: 1; visibility: visible; transform: translate(var(--tooltip-translate), 0); }
.tile-work, .tile-contact { padding: 0; background: transparent; line-height: 0; }
.tile-work img, .tile-contact img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: contain; }
.tile-tool img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; display: block; }
.tile-profile { overflow: hidden; background: linear-gradient(145deg, #f9fbff, #dce8f5); padding: 2px 2px 0; }
.tile-profile img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.tile-linkedin { background: linear-gradient(#3189ca, #116199); }
.tile-social, .tile-contact { padding: 0; line-height: 0; }
.tile-social img { display: block; width: 60%; height: 60%; object-fit: contain; object-position: center; }
.tile-instagram { background: radial-gradient(circle at 28% 105%, #ffd776, #ff9c3f 23%, #f32972 52%, #a331c4 75%, #5a54d5); }
.tile-telegram { background: linear-gradient(#35b7ed, #1592d0); }
.dock-divider { height: 39px; width: 1px; background: #14281d40; box-shadow: 1px 0 0 #ffffff1f; margin: 0 1px; }
.dock-indicator { position: absolute; bottom: -7px; left: calc(50% - 2px); width: 4px; height: 4px; background: #121b15; border-radius: 50%; }
/* Shared glass shell for every current and future popup. */
.window, .wallpaper-picker { --muted: var(--window-secondary); border: 1px solid var(--glass-edge); color: #f3f8f5; background: var(--glass-sheen), var(--window-tint); box-shadow: var(--glass-highlight), 0 30px 90px #0007; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(135%); backdrop-filter: blur(var(--glass-blur)) saturate(135%); }
.window { padding: 0; position: fixed; margin: auto; width: min(920px, calc(100vw - 64px)); max-width: none; max-height: calc(100dvh - 108px); border-radius: 16px; overflow: hidden; }
.window[open] { display: flex; flex-direction: column; animation: window-open .2s ease-out; }
.window::backdrop { background: #02091033; }
.window.expanded { width: calc(100vw - 32px); height: calc(100dvh - 64px); max-height: calc(100dvh - 64px); }
.window-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 0 0 47px; padding: 0 16px; background: linear-gradient(180deg, #ffffff12, #ffffff05); border-bottom: 1px solid #ffffff1f; touch-action: none; cursor: grab; user-select: none; }
.window-bar h2 { margin: 0; font-size: .875rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.window-controls { display: flex; align-items: center; gap: 8px; width: 58px; flex-shrink: 0; }
.window-controls button { display: grid; place-items: center; width: 12px; height: 12px; padding: 0; border-radius: 50%; flex-shrink: 0; }
.window-close { background: #ff625a; }
.window-minimize { background: #edba46; }
.window-expand { background: #49bd78; }
.window-controls button { position: relative; }
.window-controls button::before { content: ""; position: absolute; inset: -7px; }
.window-control-icon { position: absolute; inset: 0; margin: auto; display: block; width: 10px; height: 10px; color: #183022; opacity: 0; pointer-events: none; }
.window-controls:hover .window-control-icon, .window-controls button:focus-visible .window-control-icon { opacity: 1; }
.window.no-enter { animation: none; }
.window.window-in-flight { opacity: 0; pointer-events: none; }
.window.window-in-flight::backdrop { background: transparent; }
/* Temporary, non-interactive top-layer mesh; only exists during Genie motion. */
.genie-layer { position: fixed; inset: 0; margin: 0; padding: 0; border: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; overflow: visible; background: transparent; pointer-events: none; }
.genie-layer::backdrop { background: transparent; pointer-events: none; }
.genie-slice { position: absolute; left: 0; top: 0; overflow: hidden; transform-origin: 0 0; will-change: transform, opacity; }
.window.genie-window { display: flex; flex-direction: column; position: absolute; left: 0; margin: 0; max-height: none; animation: none; pointer-events: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-sheen), #25434f; }
.genie-window .window-content { scrollbar-width: none; }
.genie-window .window-control-icon { opacity: 1; }
.dock-minimized { display: flex; align-items: center; gap: 10px; min-width: 68px; max-width: 192px; padding: 0 7px 0 13px; border-left: 1px solid #ffffff29; overflow-x: auto; scrollbar-width: none; }
.dock-minimized::-webkit-scrollbar { display: none; }
.dock-minimized[hidden] { display: none; }
.minimized-window { position: relative; isolation: isolate; flex: 0 0 var(--dock-icon-size); width: var(--dock-icon-size); height: var(--dock-icon-size); }
.dock-minimized .dock-item { width: 100%; height: 100%; }
.dock-minimized .dock-item:focus-visible { outline-offset: 1px; }
/* The thumbnail rises to z-index: 2 on hover/focus; its close button stays above it. */
.minimized-close { position: absolute; z-index: 3; top: 0; right: 0; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 50%; background: transparent; color: #17332f; opacity: 0; pointer-events: none; transition: opacity .12s; }
.minimized-close::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #e5eee9; border: 1px solid #ffffffb3; box-shadow: 0 2px 5px #0005; transition: background .12s; }
.minimized-close svg { position: relative; display: block; width: 10px; height: 10px; pointer-events: none; }
.minimized-window:hover .minimized-close, .minimized-window:focus-within .minimized-close { opacity: 1; pointer-events: auto; }
.minimized-close:hover::before { background: #ff8078; }
.minimized-close:focus-visible { outline-offset: 0; }
@media (hover: none), (pointer: coarse) { .minimized-close { opacity: 1; pointer-events: auto; } }
.minimized-preview { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding-top: 7px; overflow: hidden; border: 1px solid #d7ece8aa; border-radius: 6px; background: linear-gradient(145deg, #7199a3, #203e48); box-shadow: 0 3px 7px #0004; transition: filter .18s; }
.minimized-preview::before { content: ''; position: absolute; inset: 0 0 auto; height: 7px; background: #d7ece847; border-bottom: 1px solid #ffffff30; }
.minimized-preview img { width: 25px; height: 25px; object-fit: cover; border-radius: 5px; }
.minimized-preview svg { width: 22px; height: 22px; color: #d1eee1; }
.dock-minimized .dock-item:is(:hover, :focus-visible) .minimized-preview { filter: brightness(1.08); }
.dock { max-width: calc(100vw - 24px); }
.dock > .dock-group, .dock > .dock-divider { flex-shrink: 0; }
@media (min-width: 761px) and (max-width: 1100px) {
  .dock { --dock-icon-size: 44px; gap: 8px; padding-inline: 10px; }
  .dock-minimized { max-width: 130px; }
}
.window-bar-spacer { width: 58px; }
.window-content { overflow: auto; overscroll-behavior: contain; min-height: 0; scrollbar-width: thin; scrollbar-color: #d4e2da66 transparent; }
.project-detail { padding: 34px; }
.project-detail.project-detail--case { padding: 0; }
.case-reading-hint { display: none; }
.case-study { background: #0e0f12; }
.case-study-page { display: block; cursor: zoom-in; }
.case-study-page img { display: block; width: 100%; height: auto; }
.case-study-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #030303; }
.case-study-page--after-hero { overflow: hidden; }
.case-study-page--after-hero img { margin-block-start: var(--hero-offset); }
.case-study-body { position: relative; }
.case-ranks { position: absolute; left: 0; width: 100%; aspect-ratio: 1920 / 1080; pointer-events: none; }
.case-rank { position: absolute; padding: 0; border: 0; border-radius: 0; background: none; opacity: 0; pointer-events: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.case-rank.is-ready { opacity: 1; pointer-events: auto; }
.case-rank-erase, .case-rank-pendant { position: absolute; left: 13.181818%; top: 7.79589%; width: 73.636364%; height: 66.33664%; pointer-events: none; }
.case-rank-erase { background-image: url('assets/cases/jamskins/ranks/background.png'); background-size: 1481.481481% 576.923077%; }
.case-rank-pendant { display: block; transform-origin: 50% 0; }
.case-rank-pendant img { display: block; width: 100%; height: 100%; }
.case-rank-pendant::after { content: ''; position: absolute; left: 16.049383%; top: 0; width: 64.814815%; height: 17.628205%; background: linear-gradient(#090c0e, #090c0e99); }
.case-rank--first .case-rank-pendant::after { display: none; }
.case-rank:focus-visible { outline: 2px solid #04d9df; outline-offset: 2px; }
.case-study-video:focus-visible { outline: 3px solid var(--mint); outline-offset: -3px; }
.case-study-page:focus-visible { outline: 3px solid var(--mint); outline-offset: -3px; }
.project-detail--case .detail-footer { padding: 28px 34px 34px; }
.project-detail--case .detail-meta { border-top: 0; padding-top: 0; }
.detail-heading { display: flex; align-items: start; gap: 24px; margin-bottom: 24px; }
.detail-heading h3 { font-size: clamp(28px, 4vw, 44px); margin: 5px 0 7px; line-height: 1.1; letter-spacing: -.04em; font-weight: 550; }
.detail-heading p { margin: 0; color: var(--window-secondary); font-size: .875rem; }
.detail-description { color: var(--window-copy); max-width: 65ch; font-size: 1rem; line-height: 1.7; margin: 0 0 28px; }
.detail-visual { width: 100%; height: auto; display: block; border-radius: 6px; margin: 0 0 22px; }
.detail-visual--logo { width: 144px; max-width: 100%; border-radius: 25%; }
.detail-meta { display: flex; gap: 36px; padding: 22px 0; border-top: 1px solid var(--border); margin: 0 0 12px; }
.detail-meta dt { font-size: .75rem; color: var(--window-secondary); margin-bottom: 7px; }
.detail-meta dd { margin: 0; font-size: .875rem; }
.detail-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: center; margin-top: 14px; }
.detail-actions > button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; }
.detail-actions > button > span { flex-shrink: 0; }
.text-link { text-decoration: underline; text-underline-offset: 5px; color: var(--mint); font-size: .875rem; padding: 8px 0; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; background: var(--mint); color: #102c27; border-radius: 7px; padding: 13px 19px; font-weight: 600; font-size: .875rem; }
.primary-button:hover { background: #d5ffe9; }
.secondary-button { border: 1px solid #ffffff2d; color: #e0ece8; background: transparent; border-radius: 7px; padding: 12px 18px; font-size: .875rem; }
.about-layout { padding: 34px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; }
.about-header { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.about-avatar { width: 76px; height: 76px; object-fit: cover; object-position: center 25%; border-radius: 50%; }
.about-header h3 { font-size: 1.9rem; letter-spacing: -.04em; margin: 0 0 5px; font-weight: 550; }
.about-layout p { line-height: 1.7; font-size: 1rem; color: var(--window-copy); }
.about-layout .about-lead { color: var(--white); font-size: 1.0625rem; }
.about-header p { color: var(--mint); font-size: .875rem; margin: 0; }
.about-layout h4 { font-size: 1rem; font-weight: 550; margin: 26px 0 14px; }
.skills { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 0; list-style: none; }
.skills li { border: 1px solid var(--border); padding: 6px 9px; font-size: .8125rem; line-height: 1.35; border-radius: 5px; color: var(--window-copy); }
.about-history > h4:first-child { margin-top: 4px; }
.experience { padding: 0; margin: 0; list-style: none; }
.experience li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding-bottom: 22px; }
.experience li:last-child { padding-bottom: 0; }
.experience-logo { width: 44px; height: 44px; object-fit: contain; border-radius: 11px; }
.experience strong { display: block; font-weight: 550; margin-bottom: 5px; }
.experience span, .experience small { display: block; font-size: .8125rem; line-height: 1.6; color: var(--window-copy); }
.experience small { color: var(--window-secondary); margin-top: 4px; font-size: .75rem; }
.experience p { margin: 9px 0 0; font-size: .8125rem; line-height: 1.55; color: var(--window-secondary); }
.about-recommendations { margin-top: 24px; background: transparent; text-align: left; line-height: 1.5; }
.about-links { display: flex; flex: 0 0 auto; gap: 16px; flex-wrap: wrap; align-items: center; padding: 16px 34px; border-top: 1px solid #ffffff1f; background: #ffffff05; }
.about-links[hidden] { display: none; }
.contact-content { padding: 42px; }
.contact-content h3 { font-size: clamp(32px, 5vw, 54px); letter-spacing: -.05em; font-weight: 500; margin: 0 0 20px; }
.contact-content p { color: var(--window-copy); line-height: 1.7; max-width: 50ch; }
.contact-links { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 13px; }
.contact-links > a { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; }
.contact-social-icon { flex: 0 0 18px; width: 18px; height: 18px; background: currentColor; mask: var(--social-icon) center / contain no-repeat; }
.contact-social-icon--telegram { --social-icon: url('assets/icons/telegram.svg'); }
.contact-social-icon--linkedin { --social-icon: url('assets/icons/linkedin.svg'); }
.contact-social-icon--instagram { --social-icon: url('assets/icons/instagram.svg'); }
.toast { position: fixed; bottom: 132px; left: 50%; transform: translate(-50%, 10px); background: #183933ed; border: 1px solid var(--border); border-radius: 10px; color: white; padding: 12px 18px; font-size: .875rem; opacity: 0; pointer-events: none; z-index: 30; transition: opacity .2s, transform .2s; text-align: center; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.noscript { position: fixed; top: 45%; left: 10%; right: 10%; padding: 25px; text-align: center; background: var(--ink); }
.noscript a { text-decoration: underline; }
@keyframes window-open { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (min-width: 1700px) { .project { width: calc(var(--w, 190px) * 1.15); } }
@media (max-height: 700px) and (min-width: 761px) { .desktop { min-height: 0; } .desktop-intro h1 { font-size: 28px; } .project { width: calc(var(--w, 190px) * .85); } .about-file { bottom: 122px; } .desktop-footer { bottom: 16px; } .dock { bottom: 26px; } }
@media (min-width: 761px) and (max-width: 1500px) { .desktop-footer { bottom: 12px; } .dock { bottom: 48px; } }
@media (max-width: 1000px) and (min-width: 761px) { .menubar { gap: 18px; padding-inline: 20px; } .menubar-right { gap: 16px; } .menubar nav button { padding-inline: 10px; } .project { width: calc(var(--w, 190px) * .8); } .desktop-footer .desktop-hint { display: none; } }
@media (max-width: 760px) {
  body { overflow-y: auto; }
  .wallpaper::before { background-position: 46% center; }
  .wallpaper::after { background: var(--wallpaper-shade, linear-gradient(180deg, #081e3347, #081e3314 42%, #10241670)); }
  .menubar { padding: 0 18px; height: 52px; gap: 12px; }
  .brand { gap: 9px; }
  .brand strong { font-size: .8125rem; }
  .menubar nav, .menubar-right { display: none; }
  .language-switch { margin-left: auto; padding-left: 10px; }
  .language-switch button { min-height: 44px; }
  .desktop { height: auto; min-height: calc(100dvh - 52px); padding: 35px 16px 236px; }
  .desktop-intro { position: static; padding: 0 9px; }
  .desktop-intro p { font-size: .8125rem; }
  .desktop-intro h1 { font-size: clamp(29px, 8.8vw, 38px); overflow-wrap: anywhere; }
  .desktop-note { position: static; margin: 22px 9px 28px; }
  .desktop-note br { display: none; }
  .projects { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 19px 6px; align-items: start; }
  .project { position: relative; width: 100%; left: auto !important; top: auto !important; padding: 9px; touch-action: pan-y; }
  .project-cover { aspect-ratio: 1.6; }
  .project-cover--logo { width: min(108px, 100%); padding: 12px; aspect-ratio: 1; }
  .project-name { font-size: .875rem; }
  .project-category { font-size: .75rem; }
  .project-tag { display: none; }
  .about-file { display: none; }
  .recommendations-file { position: relative; left: auto !important; top: auto !important; bottom: auto !important; margin: 26px auto 0; touch-action: pan-y; }
  .desktop-footer { bottom: 182px; left: 25px; right: 25px; justify-content: center; }
  .desktop-hint { display: none; }
  .dock { --dock-icon-size: 44px; bottom: max(18px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto 1px auto; max-width: calc(100vw - 24px); padding: 10px; gap: 8px; border-radius: 22px; }
  .dock-tools { grid-column: 1 / -1; justify-content: center; gap: 12px; }
  .dock-minimized { grid-column: 1 / -1; min-width: 0; max-width: 100%; padding: 8px 7px 0; border-left: 0; border-top: 1px solid #ffffff29; }
  body:has(.dock-minimized:not([hidden])) .desktop { padding-bottom: 302px; }
  body:has(.dock-minimized:not([hidden])) .desktop-footer { bottom: 248px; }
  .dock .dock-tools-divider { grid-column: 1 / -1; width: 100%; height: 1px; }
  .dock-divider { margin: 0; }
  .window, .window.expanded { width: calc(100% - 20px); max-height: calc(100dvh - 32px); height: auto; border-radius: 11px; }
  .window-bar { cursor: default; padding: 0 14px; }
  .window-expand { visibility: hidden; }
  .window-bar-spacer { width: 10px; }
  .project-detail { padding: 22px; }
  .project-detail--case .detail-footer { padding: 22px; }
  .detail-heading h3 { font-size: 32px; }
  .detail-meta { gap: 22px; flex-wrap: wrap; }
  .about-layout { grid-template-columns: 1fr; padding: 25px; gap: 8px; }
  .about-links { padding: 14px 20px; gap: 10px; align-items: stretch; }
  .about-links > a, .about-links > button { flex: 1 1 0; min-width: 0; padding: 12px 10px; gap: 8px; text-align: center; }
  .about-header h3 { font-size: 1.65rem; }
  .about-avatar { width: 66px; height: 66px; }
  .contact-content { padding: 28px; }
  .contact-links { flex-direction: column; align-items: stretch; }
  .toast { bottom: 170px; width: max-content; max-width: calc(100% - 32px); }
}
@media (max-width: 360px) {
  .menubar { padding-inline: 12px; gap: 8px; }
  .dock { padding-inline: 5px; gap: 3px; }
}
/* Phone cases use the available viewport in both orientations. The browser
   remains free to rotate naturally; no forced orientation or rotated content. */
@media (max-width: 760px), (max-width: 1100px) and (max-height: 600px) {
  .window.window--project:not(.genie-window) { inset: 0; margin: 0; width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .window--project .window-bar { flex-basis: 48px; padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px)); cursor: default; }
  .window--project .window-controls { width: 88px; gap: 0; }
  .window--project .window-controls button { width: 44px; height: 44px; padding: 16px; background-clip: content-box; }
  .window--project .window-controls button::before { inset: 0; }
  .window--project .window-control-icon { opacity: 1; }
  .window--project .window-expand { display: none; }
  .window--project .window-bar-spacer { width: 20px; }
  .window--project .window-content { flex: 1; padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px); }
  .window--project .detail-footer { padding-bottom: max(22px, env(safe-area-inset-bottom, 0px)); }
  .detail-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 10px; }
  .detail-actions > button { padding: 12px 10px; gap: 8px; line-height: 1.45; }
}
@media (max-width: 760px) and (orientation: portrait) {
  .case-reading-hint { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--border); }
  .case-rotate-animation { display: block; width: 176px; max-width: 56%; height: auto; flex-shrink: 0; pointer-events: none; }
  .case-reading-hint a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .8125rem; }
}
@media (max-width: 1000px) { .wallpaper-toggle > [data-i18n="wallpapers"] { display: none; } }
@media (max-width: 760px) {
  .wallpaper-toggle { width: 34px; min-height: 44px; margin-left: auto; padding: 0; }
  .language-switch { margin-left: 0; }
  .wallpaper-picker { top: 62px; right: 12px; max-height: calc(100dvh - 74px); padding: 18px; }
  .wallpaper-close { width: 44px; height: 44px; margin-top: -10px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .window, .wallpaper-picker { background: #142b32; }
}
@media (prefers-reduced-transparency: reduce) {
  .window, .wallpaper-picker { background: #142b32; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dock-tooltip::before, .header-tooltip::before { background: #d1d3d1; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }