/* Portfolio interface layer. The original desktop styles remain in style.css. */
:root {
  --glass: rgba(230,235,244,.08);
  --glass-strong: rgba(230,235,244,.14);
  --glass-border: rgba(238,244,255,.18);
  --text-soft: #b4bbc7;
  --accent: #c4d8ce;
  --panel: linear-gradient(135deg,rgba(74,81,94,.72),rgba(29,34,44,.78));
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid #c4e7ef; outline-offset: 4px; }
.desktop { isolation: isolate; background: radial-gradient(ellipse at 70% 8%,#46505b 0,transparent 48%),linear-gradient(130deg,#191c23 20%,#262e37 65%,#14181e); }
.desktop::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.3' filter='url(%23n)'/%3E%3C/svg%3E"); }
.orb-one { background: #abbcb4; opacity: .15; top: -180px; right: 10%; }
.orb-two { background: #8e87a6; opacity: .12; }
.wallpaper-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; transform: translate(var(--drift-x,0),var(--drift-y,0)); transition: transform .8s ease-out; }
.wallpaper-ring { width: 78vw; height: 78vw; max-width: 1300px; max-height: 1300px; border: 1px solid rgba(222,232,228,.16); border-radius: 50%; position: absolute; left: 24%; top: -53%; transform: rotate(-30deg); box-shadow: inset 18px 12px 100px rgba(198,219,215,.08),25px 32px 90px rgba(0,0,0,.24); }
.wallpaper-ring::after { content:''; position: absolute; inset: 48px; border-radius: 50%; border: 1px solid rgba(219,232,228,.07); }
.wallpaper-plane { position: absolute; width: 78vw; height: 30vw; top: 35%; left: 27%; transform: rotate(-35deg); border-radius: 50%; background: linear-gradient(180deg,rgba(205,219,212,.08),transparent); filter: blur(18px); }
.menu-bar { height: 36px; background: rgba(17,22,28,.38); font-size: 11px; }
.menu-bar button { padding: 8px 0; background: none; color: #c9ced7; border: 0; font-size: 11px; }
.menu-bar button:hover { color: white; }
.menu-edition { font-size: 9px; letter-spacing: .12em; opacity: .65; }
.hero { left: 5vw; bottom: 15vh; width: 83vw; pointer-events: none; }
.hero h1 { font-size: clamp(66px,8.2vw,148px); line-height: .9; font-weight: 500; letter-spacing: -.075em; color: #edf0eb; text-shadow: 0 6px 35px rgba(0,0,0,.07); }
.hero-meta { color: #aeb8bc; font-size: 9px; letter-spacing: .18em; margin-bottom: 24px; }
.hero-bottom { margin-top: 26px; gap: 60px; font-size: 11px; color: #bdc5c6; }
.desktop-files { top: 76px; right: 40px; gap: 24px 15px; }
.desktop-item { min-height: 112px; border: 1px solid transparent; transition: background .15s,border-color .15s; }
.desktop-item:focus { outline: none; }
.desktop-item:focus-visible { outline: 2px solid #c4e7ef; }
.desktop-item.selected { border-color: rgba(204,224,235,.26); background: rgba(189,213,226,.14); }
.desktop-item small { display: block; color: #c1d0db; font-size: 8px; margin-top: 4px; }
#portfolioIcon { background: rgba(189,218,225,.08); border-color: rgba(209,233,241,.18); }
#portfolioIcon > span { font-weight: 650; }
.folder-body { background: linear-gradient(160deg,#bcdaed,#79a6c2); }
.folder-tab { background: #95c0da; }
.document-icon { width: 42px; height: 53px; margin-top: 6px; opacity: .85; }
.contact-icon { font-size: 25px; background: #d4ddd2; }
.desktop-widgets { position: absolute; left: 5vw; top: 11vh; display: flex; gap: 16px; z-index: 3; }
.desktop-widget { box-sizing: border-box; width: 190px; height: 168px; padding: 19px; text-align: left; color: #e6ece6; border: 1px solid var(--glass-border); border-radius: 20px; background: linear-gradient(125deg,rgba(221,230,223,.13),rgba(255,255,255,.03)); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: inset 0 1px rgba(255,255,255,.07),0 16px 36px rgba(0,0,0,.1); display: flex; flex-direction: column; }
.widget-eyebrow { font-size: 8px; letter-spacing: .13em; color: #c2ceca; }
.work-widget strong { font-size: 49px; font-weight: 400; letter-spacing: -.07em; line-height: 1.1; margin: 10px 0 4px; }
.work-widget > span:not(.widget-eyebrow) { font-size: 11px; }
.widget-note { font-size: 9px !important; color: #aebbb8; margin-top: 5px; }
.work-widget { transition: background .2s, transform .2s; }
.work-widget:hover { background: rgba(222,236,224,.17); transform: translateY(-3px); }
.location-widget { width: 190px; position: relative; }
.location-widget strong { margin-top: 35px; font-size: 20px; font-weight: 450; line-height: 1.1; letter-spacing: -.03em; }
.location-orbit { position: absolute; right: 18px; top: 44px; font-size: 28px; opacity: .25; }
.glass-window { background: var(--panel); backdrop-filter: blur(42px) saturate(115%); -webkit-backdrop-filter: blur(42px) saturate(115%); border-radius: 24px; border-color: rgba(228,239,248,.23); box-shadow: 0 30px 90px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.13); }
.window-header { height: 52px; color: #e6eaf0; font-size: 11px; background: rgba(224,232,237,.035); }
.window-actions { font-size: 9px; align-items: center; gap: 6px; }
.status-dot { width: 5px; height: 5px; background: #bfd5c1; border-radius: 50%; }
.traffic { width: 11px; height: 11px; }
.traffic.red::after { content:'×'; display:block; line-height: 10px; color: #511b18; font-size: 12px; opacity: 0; }
.traffic.red:hover::after, .traffic.red:focus-visible::after { opacity: 1; }
.finder-window { width: min(1220px,92vw); height: min(820px,82vh); top: 47%; }
.finder-layout { grid-template-columns: 210px minmax(0,1fr); }
.finder-sidebar { display: flex; flex-direction: column; padding: 22px 14px 18px; background: rgba(12,18,26,.12); overflow-y: auto; }
.sidebar-brand { display:flex; align-items:center; gap:9px; font-size:11px; font-weight: 550; margin: 0 7px 30px; }
.sidebar-brand .sergio-mark { width: 29px; height:29px; background:#cad5d0; flex-shrink:0; }
.sidebar-brand small { display:block; margin-top:5px; font-size:6px; font-weight:400; letter-spacing:.08em; color:#a3afb9; }
.sidebar-label { font-size:8px; color:#a3aebc; letter-spacing:.12em; }
.sidebar-item { min-height: 38px; font-size: 11px; justify-content: space-between; gap: 8px; padding: 9px 10px; margin:2px 0; color:#c9d0d9; transition:background .15s; }
.sidebar-item:hover { background:rgba(255,255,255,.06); }
.sidebar-item.active { background:rgba(207,226,223,.13); box-shadow:inset 0 0 0 1px rgba(240,247,245,.06); color:#f1f4f2; }
.sidebar-item > span:last-child { font-size:9px; opacity:.65; }
.category-item > span:first-child { font-size: 10px; }
.sidebar-bottom { margin-top:auto; padding-top:24px; }
.sidebar-footnote { font-size:9px; line-height:1.6; color:#9ca7b5; margin:20px 10px 0; }
.finder-main { overflow:hidden; }
.finder-toolbar { height:58px; gap:10px; padding:0 28px; border-color:rgba(255,255,255,.06); }
.toolbar-arrows { margin-right:4px; }
.toolbar-arrows button { font-size:18px; background:rgba(255,255,255,.04); }
#folderPath { font-size:10px; color:#c5cdd7; font-weight:400; }
.project-search { margin-left:auto; width:190px; min-width:120px; display:flex; align-items:center; gap:8px; border:1px solid rgba(233,241,255,.11); border-radius:9px; padding:7px 10px; background:rgba(0,0,0,.12); }
.project-search input { width:100%; min-width:0; color:white; background:none; border:0; outline:none; font-size:10px; }
.project-search:focus-within { border-color:#b7d0d3; }
.project-search input::placeholder { color:#a6afb9; }
.collection-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:26px 28px 22px; }
.eyebrow { font-size:8px; letter-spacing:.17em; color:#bac8c7; font-weight:500; }
.collection-heading .eyebrow { margin:0 0 10px; }
.collection-heading h2 { font-size:clamp(24px,2.6vw,38px); font-weight:450; letter-spacing:-.045em; line-height:1.1; margin:0 0 10px; }
.collection-heading p:not(.eyebrow) { font-size:11px; color:#b5bfca; margin:0; line-height:1.5; }
#resultCount { font-size:9px; white-space:nowrap; color:#c0c9d1; padding-bottom:3px; }
.project-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 17px; padding:0 28px 28px; overflow-y:auto; min-height:0; align-content:start; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent; }
.project-file { width:100%; min-width:0; text-align:left; align-items:stretch; padding:0 0 14px; gap:0; border:1px solid rgba(238,246,255,.09); border-radius:14px; overflow:hidden; background:rgba(211,225,233,.035); transition:background .2s,transform .2s,border-color .2s,box-shadow .2s; }
.project-file:hover { background:rgba(227,236,242,.095); border-color:rgba(228,243,250,.28); transform:translateY(-3px); box-shadow:0 10px 20px rgba(0,0,0,.12); }
.project-file:focus { background:rgba(227,236,242,.095); }
.project-thumbnail { width:100%; height:auto; aspect-ratio:4/3; border-radius:0; box-shadow:none; position:relative; display:grid; place-items:center; background:rgba(0,0,0,.12); }
.project-thumbnail img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.project-file:hover .project-thumbnail img { transform:scale(1.025); }
.card-arrow { position:absolute; right:10px; bottom:10px; width:26px; height:26px; border-radius:50%; background:rgba(28,34,38,.5); backdrop-filter:blur(15px); display:grid; place-items:center; border:1px solid rgba(255,255,255,.3); color:white; font-size:14px; }
.card-category { font-size:7px; text-transform:uppercase; letter-spacing:.12em; color:#aebdc6; padding:14px 13px 7px; }
.project-file strong { margin:0; padding:0 13px; font-size:12px; font-weight:550; letter-spacing:-.015em; line-height:1.4; }
.project-file > .card-client { font-size:9px; color:#bbc3cd; padding:5px 13px 0; line-height:1.4; }
.empty-folder { min-height:180px; }
.empty-folder p { font-size:13px; }
.empty-folder button { font-size:11px; }
.mobile-filters { display:none; }
.project-window { width:min(940px,88vw); height:min(920px,84vh); top:47%; }
.project-content { padding:32px 36px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.25) transparent; }
.project-intro { margin-bottom:30px; }
.project-intro h2 { font-weight:450; font-size:36px; }
.project-intro .project-client { color:var(--accent); }
.image-zoom { display:block; width:100%; padding:0; border:0; background:transparent; color:inherit; cursor:zoom-in; border-radius:4px; }
.project-image { width:100%; height:auto; max-width:none; }
#projectMedia figure { margin:0 0 30px; }
#projectMedia video { display:block; width:100%; height:auto; max-height:70vh; background:#111; border-radius:8px; }
#projectMedia iframe { display:block; width:100%; height:65vh; border:1px solid var(--glass-border); background:#fff; }
#projectMedia a { color:#dce9e8; display:inline-block; margin-top:12px; }
#projectMedia figcaption { font-size:9px; color:#acb8c2; margin-top:12px; letter-spacing:.04em; }
.about-content h2 { font-weight:450; }
.about-content { overflow-y:auto; max-height:calc(84vh - 52px); }
.contact-link { display:inline-block; margin-top:26px; font-size:14px; color:#e2eee9; text-underline-offset:5px; overflow-wrap:anywhere; }
.about-content .contact-location { margin-top:25px; font-size:10px; }
.dock { height:65px; border-radius:20px; background:rgba(209,222,228,.09); bottom:18px; padding:8px 10px; gap:10px; box-shadow:0 12px 35px rgba(0,0,0,.23),inset 0 1px rgba(255,255,255,.1); }
.app-icon { width:46px; height:46px; font-size:18px; }
.dock-app:hover { transform:translateY(-7px) scale(1.12); }
/* Native dialog is above all desktop layers and traps keyboard focus. */
.quick-look { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; color:#f0f2ef; background:rgba(15,19,24,.96); backdrop-filter:blur(35px); -webkit-backdrop-filter:blur(35px); overflow:hidden; }
.quick-look[open] { display:flex; flex-direction:column; }
.quick-look::backdrop { background:rgba(5,8,13,.75); }
.quick-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 30px; border-bottom:1px solid rgba(255,255,255,.1); flex-shrink:0; }
.quick-toolbar h2 { margin:5px 0 0; font-size:15px; font-weight:450; }
.quick-toolbar .eyebrow { font-size:7px; }
.quick-look button { width:40px; height:40px; flex-shrink:0; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:white; font-size:18px; }
.quick-look button:hover { background:rgba(255,255,255,.12); }
.quick-look button:disabled { opacity:.3; }
.quick-viewport { flex:1; min-height:0; overflow:auto; padding:24px; overscroll-behavior:contain; }
#quickImage { display:block; max-width:none; height:auto; margin:0 auto; }
.quick-controls { display:flex; align-items:center; justify-content:center; gap:12px; padding:12px 20px max(12px,env(safe-area-inset-bottom)); border-top:1px solid rgba(255,255,255,.1); flex-shrink:0; }
#quickCounter { min-width:50px; text-align:center; font-size:11px; color:#c1cbd5; }
#quickFit { width:58px; font-size:11px; }
.control-divider { width:1px; height:20px; background:rgba(255,255,255,.15); margin:0 8px; }
.hidden { display:none; }
@media (max-width:1150px) and (min-width:901px) {
  .finder-layout { grid-template-columns:185px minmax(0,1fr); }
  .sidebar-brand { font-size:9px; margin-left:0; gap:7px; }
  .sidebar-brand small { font-size:5px; }
  .project-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .desktop-widgets { transform:scale(.85); transform-origin:top left; }
}
@media (max-height:750px) and (min-width:901px) {
  .desktop-widgets { transform:scale(.8); transform-origin:top left; top:9vh; }
  .hero { bottom:16vh; }
  .hero h1 { font-size:clamp(60px,7.5vw,115px); }
  .hero-meta { margin-bottom:15px; }
  .hero-bottom { margin-top:18px; }
  .collection-heading { padding-top:18px; padding-bottom:18px; }
}
/* Touch layout: a scrollable introduction and full-screen application panels. */
@media (max-width:900px) {
  html,body { overflow:auto; min-height:100%; height:auto; }
  .desktop { min-height:100dvh; height:auto; padding-bottom:110px; overflow:hidden; }
  .menu-bar { position:relative; padding:0 20px; height:48px; }
  .menu-left { gap:14px; }
  .menu-left strong { display:block; font-size:10px; }
  .menu-left button { display:none; }
  .menu-edition { display:none; }
  .menu-right { gap:10px; font-size:10px; }
  .hero { position:relative; left:auto; bottom:auto; width:auto; padding:58px 24px 34px; }
  .hero h1 { font-size:clamp(54px,10vw,86px); line-height:.96; letter-spacing:-.065em; }
  .hero-meta { font-size:8px; gap:22px; margin-bottom:20px; }
  .hero-bottom { gap:24px; font-size:10px; margin-top:24px; }
  .desktop-files { position:relative; inset:auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:0 24px; z-index:4; }
  .desktop-item { position:static !important; inset:auto !important; transform:none !important; width:100%; min-width:0; padding:12px 4px; min-height:110px; border-radius:14px; background:rgba(255,255,255,.035); }
  .desktop-item > span { font-size:10px; overflow-wrap:anywhere; }
  .desktop-item small { font-size:7px; }
  .folder-icon { transform:scale(.85); transform-origin:bottom center; }
  .desktop-widgets { position:relative; inset:auto; padding:26px 24px 0; transform:none; }
  .desktop-widget { width:50%; height:154px; }
  .location-widget { width:50%; }
  .location-widget strong { margin-top:25px; }
  .glass-window { position:fixed !important; inset:0 !important; width:100% !important; height:100dvh !important; max-height:none; transform:none !important; border-radius:0; border:0; background:linear-gradient(135deg,rgba(47,55,68,.98),rgba(26,32,41,.98)); }
  .window-header { height:58px; padding:0 55px; cursor:default; }
  .window-title { max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .window-actions { display:none; }
  .traffic-lights { left:12px; }
  .traffic.red { width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.09); }
  .traffic.red::after { opacity:1; color:white; font-size:22px; line-height:30px; }
  .traffic.yellow,.traffic.green { display:none; }
  .finder-layout { height:calc(100% - 58px); display:flex; }
  .finder-sidebar { display:none; }
  .finder-main { width:100%; }
  .finder-toolbar { padding:0 18px; height:54px; gap:6px; }
  .toolbar-arrows { gap:4px; }
  .toolbar-arrows button { height:36px; width:30px; }
  #folderPath { display:none; }
  .project-search { width:auto; flex:1; padding:9px 12px; }
  .project-search input { font-size:16px; }
  .collection-heading { padding:18px 20px; }
  .collection-heading h2 { font-size:29px; }
  .collection-heading p:not(.eyebrow) { font-size:10px; }
  .collection-heading .eyebrow { font-size:7px; }
  .mobile-filters { display:flex; align-items:center; gap:12px; padding:0 20px 18px; font-size:10px; color:var(--text-soft); }
  .mobile-filters select { flex:1; min-width:0; border:1px solid var(--glass-border); border-radius:9px; padding:10px; color:white; background:#384351; font-size:14px; }
  .project-list { padding:0 20px 30px; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .project-file { border-radius:12px; }
  .project-file:hover { transform:none; }
  .card-category { font-size:6px; padding:11px 10px 6px; }
  .project-file strong { padding:0 10px; font-size:11px; }
  .project-file > .card-client { font-size:8px; padding:5px 10px 0; }
  .project-content { height:calc(100% - 58px); padding:24px 16px; }
  .project-intro h2 { font-size:30px; }
  .project-intro p { line-height:1.5; }
  .about-content { padding:35px 25px; max-height:calc(100dvh - 58px); }
  .about-content h2 { font-size:32px; }
  .dock { position:relative; inset:auto; transform:none; width:max-content; margin:28px auto -75px; z-index:5; }
  .quick-toolbar { padding:12px 16px; }
  .quick-viewport { padding:16px; }
  .quick-controls { gap:7px; padding-left:10px; padding-right:10px; }
  .quick-look button { width:36px; height:40px; }
  .control-divider { margin:0 2px; }
  .wallpaper-ring { width:140vw; height:140vw; top:-10%; left:15%; }
}
@media (max-width:360px) { .desktop-files { grid-template-columns:repeat(2,minmax(0,1fr)); } .hero h1 { font-size:49px; } .project-list { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
@media (max-width:900px) {
  .menu-bar { z-index: 2; }
  .glass-window .window-header { padding-top:env(safe-area-inset-top); }
}
.quick-toolbar > div { min-width: 0; }
.quick-toolbar h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Cinematic collection. Intrinsic rows and non-shrinking covers prevent overlap. */
.finder-window { width:min(1380px,95vw); height:min(920px,86vh); }
.finder-main { min-height:0; }
.finder-toolbar,.collection-heading,.mobile-filters { flex-shrink:0; }
.collection-heading { padding-top:20px; padding-bottom:18px; }
.collection-heading h2 { font-size:28px; }
.collection-heading .eyebrow { margin-bottom:7px; }
.project-list {
  flex:1 1 0; min-height:0; min-width:0;
  grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:max-content;
  align-items:start; align-content:start; gap:24px 20px;
  padding-top:4px; padding-bottom:36px;
}
.project-file {
  display:block; position:relative; height:auto; min-height:0; align-self:start;
  max-width:100%; padding:0 0 18px; overflow:visible;
  background:linear-gradient(135deg,rgba(235,243,250,.12),rgba(232,240,248,.035));
  border:1px solid rgba(235,245,255,.15); border-radius:17px;
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 8px 22px rgba(0,0,0,.09);
}
.project-file:hover { transform:translateY(-2px); }
.project-thumbnail {
  display:block; position:relative; width:100%; height:auto; aspect-ratio:4/3;
  flex:none; min-height:0; overflow:hidden; border-radius:16px 16px 0 0;
}
.project-thumbnail img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.project-file .card-category { display:block; padding:17px 17px 8px; font-size:8px; }
.project-file strong {
  display:block; padding:0 17px; font-size:15px; line-height:1.4; font-weight:550;
  white-space:normal; overflow:visible; overflow-wrap:anywhere; text-overflow:clip;
  max-height:none; min-height:0;
}
.project-file > .card-client { display:block; padding:7px 17px 0; font-size:11px; white-space:normal; overflow-wrap:anywhere; }
.card-arrow { width:32px; height:32px; right:12px; bottom:12px; }
.catalogue-label { grid-column:1/-1; font-size:18px; font-weight:450; letter-spacing:-.025em; margin:3px 0 -7px; }
.portfolio-spotlight {
  grid-column:1/-1; position:relative; isolation:isolate; min-width:0; min-height:360px;
  display:grid; align-items:center; border-radius:23px; overflow:hidden;
  border:1px solid rgba(240,248,255,.2); background:#1b222d;
  box-shadow:0 18px 40px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.1);
}
.spotlight-art { position:absolute; inset:0 0 0 auto; width:72%; height:100%; object-fit:cover; object-position:center; z-index:-2; }
.portfolio-spotlight::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg,rgba(18,24,34,.98) 0%,rgba(18,24,34,.86) 30%,rgba(18,24,34,.23) 65%,rgba(18,24,34,.02)),linear-gradient(0deg,rgba(14,19,28,.65),transparent 60%); }
.spotlight-body { width:60%; padding:36px 34px 80px; }
.spotlight-eyebrow { font-size:9px; letter-spacing:.18em; color:#d3e4df; margin:0 0 18px; }
.spotlight-body h3 { font-size:clamp(28px,3vw,46px); line-height:1.06; font-weight:500; letter-spacing:-.045em; margin:0 0 16px; overflow-wrap:anywhere; }
.spotlight-meta { max-width:350px; font-size:11px; line-height:1.8; color:#d3dbe4; margin:0 0 22px; }
.spotlight-open { background:rgba(239,246,243,.94); border:1px solid rgba(255,255,255,.5); border-radius:30px; padding:13px 20px; color:#222c31; font-size:12px; font-weight:550; }
.spotlight-open:hover { background:white; }
.spotlight-controls { position:absolute; right:24px; bottom:22px; display:flex; gap:12px; align-items:center; }
.spotlight-controls button { width:38px; height:38px; border-radius:50%; background:rgba(233,242,247,.14); border:1px solid rgba(244,250,255,.23); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); color:white; font-size:18px; }
.spotlight-controls button:hover { background:rgba(240,247,250,.25); }
.spotlight-controls button:disabled { opacity:.35; }
.spotlight-controls span { font-size:9px; color:#d7e1eb; font-variant-numeric:tabular-nums; }
.hidden { display:none; }
@media (max-width:1150px) {
  .project-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .spotlight-body { width:65%; padding-left:26px; }
  .portfolio-spotlight { min-height:330px; }
}
@media (max-width:900px) {
  .project-list { gap:18px 14px; }
  .collection-heading h2 { font-size:25px; }
  .project-file strong { font-size:13px; padding:0 12px; }
  .project-file .card-category { padding:12px 12px 7px; font-size:7px; }
  .project-file > .card-client { padding:6px 12px 0; font-size:10px; }
  .spotlight-body { width:75%; padding:28px 22px 75px; }
  .spotlight-body h3 { font-size:32px; }
  .spotlight-art { width:100%; }
  .portfolio-spotlight::after { background:linear-gradient(90deg,rgba(18,24,34,.92),rgba(18,24,34,.2)),linear-gradient(0deg,rgba(18,24,34,.8),transparent); }
  .catalogue-label { font-size:17px; }
}
@media (max-width:500px) {
  .project-list { grid-template-columns:minmax(0,1fr); }
  .project-thumbnail { aspect-ratio:16/11; }
  .project-file strong { font-size:16px; }
  .project-file > .card-client { font-size:11px; }
  .spotlight-body { width:100%; padding-right:24px; }
  .spotlight-body h3 { max-width:85%; }
  .spotlight-meta { max-width:80%; }
  .spotlight-art { opacity:.8; }
  .portfolio-spotlight { min-height:350px; }
}

/* Personal desktop: split-flap clock, portrait and in-window CV. */
.flip-widget { width:225px; }
.flip-clock { display:flex; align-items:center; justify-content:center; gap:8px; margin:23px 0 11px; }
.flip-tile { display:grid; place-items:center; position:relative; width:74px; height:67px; font-size:43px; line-height:1; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.05em; border-radius:9px; border:1px solid rgba(238,246,255,.2); background:linear-gradient(#454e58 49.5%,#222b34 50%,#333e48 52%); box-shadow:0 5px 12px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.1); transform-origin:center; }
.flip-tile::after { content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(0,0,0,.4); box-shadow:0 1px rgba(255,255,255,.08); }
.flip-colon { font-size:26px; color:#c6d3d5; }
.flip-widget .widget-note { text-align:center; }
.profile-portrait { width:156px; height:156px; border-radius:50%; overflow:hidden; margin:0 auto 28px; border:3px solid rgba(240,247,245,.25); box-shadow:0 10px 35px rgba(0,0,0,.2); }
.profile-portrait img { display:block; width:100%; height:100%; object-fit:cover; object-position:58% 46%; transform:scale(1.8); transform-origin:56% 46%; }
.about-profile { text-align:center; }
.about-profile h2 { font-size:30px; }
.about-profile p { margin:0 auto 17px; line-height:1.75; }
.about-disciplines { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:24px; }
.about-disciplines span { padding:7px 10px; border:1px solid var(--glass-border); border-radius:20px; background:var(--glass); font-size:9px; color:#d4dfdf; }
.cv-window { width:min(850px,88vw); height:min(900px,84vh); left:50%; top:47%; transform:translate(-50%,-50%); }
.cv-toolbar { display:flex; align-items:center; gap:8px; padding:12px 20px; height:62px; border-bottom:1px solid var(--glass-border); }
.cv-toolbar button { padding:9px 15px; border-radius:9px; border:1px solid var(--glass-border); background:var(--glass); color:white; font-size:12px; }
.cv-toolbar button[aria-pressed="true"] { background:#d1dfda; color:#23322d; }
.cv-toolbar > span { margin-left:auto; color:var(--text-soft); font-size:10px; }
.cv-content { height:calc(100% - 114px); overflow:auto; padding:22px; overscroll-behavior:contain; }
#cvPreview { display:block; width:100%; height:auto; box-shadow:0 12px 35px rgba(0,0,0,.2); }
.wallpaper-ring { animation:glass-breathe 22s ease-in-out infinite alternate; }
.wallpaper-plane { animation:glass-sweep 26s ease-in-out infinite alternate; }
.orb-one { animation:glass-glow 18s ease-in-out infinite alternate; }
@keyframes glass-breathe { from { transform:rotate(-30deg) scale(1); opacity:.65; } to { transform:rotate(-22deg) scale(1.035); opacity:1; } }
@keyframes glass-sweep { from { transform:translate(-1%,0) rotate(-35deg); opacity:.55; } to { transform:translate(2%,-2%) rotate(-31deg); opacity:.9; } }
@keyframes glass-glow { from { transform:translate(0,0); } to { transform:translate(-22px,14px); } }
@media (max-width:1150px) and (min-width:901px) { .desktop-widgets { transform:scale(.75); } }
@media (max-width:900px) {
 .desktop-widgets { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
 .desktop-widget { width:100%; }
 .flip-widget { grid-column:1/-1; height:158px; }
 .flip-clock { margin:14px 0 5px; }
 .cv-content { height:calc(100% - 120px); padding:12px; }
 .cv-toolbar { padding:10px 15px; }
 .about-profile h2 { font-size:28px; }
}
@media (prefers-reduced-motion:reduce) { .wallpaper-ring,.wallpaper-plane,.orb-one { animation:none; } }
.hidden { display:none; }

/* Continuous, readable glass movement; desktop widgets have their own handles. */
.wallpaper-ring { animation:glass-orbit-visible 12s ease-in-out infinite; border-color:rgba(230,243,245,.3); }
.wallpaper-plane { animation:glass-drift-visible 14s ease-in-out infinite; filter:blur(12px); background:linear-gradient(180deg,rgba(220,237,232,.22),transparent); }
.orb-one { opacity:.23; animation:glass-glow-visible 10s ease-in-out infinite; }
@keyframes glass-orbit-visible { 0%,100% { transform:translate(-2%,0) rotate(-30deg) scale(.96); } 50% { transform:translate(4%,5%) rotate(-14deg) scale(1.05); } }
@keyframes glass-drift-visible { 0%,100% { transform:translate(-5%,1%) rotate(-35deg); opacity:.5; } 50% { transform:translate(7%,-8%) rotate(-23deg); opacity:1; } }
@keyframes glass-glow-visible { 0%,100% { transform:translate(0,0) scale(.9); } 50% { transform:translate(-65px,35px) scale(1.15); } }
.desktop-widgets { transform:none; }
.widget-drag-handle { cursor:grab; display:block; min-height:20px; user-select:none; -webkit-user-select:none; }
.widget-drag-handle::after { content:' ⠿'; opacity:.5; float:right; margin-left:8px; }
.desktop-widget.dragging .widget-drag-handle { cursor:grabbing; }
.desktop-widget.dragging { transition:none; }
.work-widget:hover { transform:none; }
.spotlight-art { inset:0; width:100%; height:100%; opacity:1; object-fit:cover; object-position:center; }
.portfolio-spotlight::after { background:linear-gradient(90deg,rgba(12,18,24,.28),transparent 80%); }
.spotlight-body { width:58%; margin:24px; padding:24px; border-radius:18px; background:rgba(30,39,47,.28); border:1px solid rgba(243,248,255,.18); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.portfolio-spotlight { padding-bottom:60px; }
.profile-portrait { width:186px; height:186px; }
.profile-portrait img { object-position:58% 48%; transform:scale(2); transform-origin:56% 48%; }
@media (max-width:900px) {
 .desktop-widget { position:static !important; width:100% !important; inset:auto !important; transform:none !important; }
 .widget-drag-handle { cursor:default; }
 .widget-drag-handle::after { display:none; }
 .spotlight-body { width:calc(100% - 36px); margin:18px; padding:22px; }
 .spotlight-body h3,.spotlight-meta { max-width:100%; }
 .profile-portrait { width:176px; height:176px; }
}
@media (prefers-reduced-motion:reduce) { .wallpaper-ring,.wallpaper-plane,.orb-one { animation:none; } }
@media (min-width:901px) {
 .desktop-widgets { gap:12px; }
 .desktop-widget { width:clamp(155px,15vw,190px); }
 .flip-widget { width:clamp(190px,18vw,225px); }
}

/* Free drag, grid at release, and restrained cool colour in the glass. */
.desktop-widget,.desktop-widget * { user-select:none; -webkit-user-select:none; }
.desktop-widget { cursor:grab; }
.desktop-widget.dragging,.desktop-widget.dragging * { cursor:grabbing; }
.desktop-widget.dragging,.desktop-item.dragging { transition:none; }
.wallpaper-plane { background:linear-gradient(150deg,rgba(132,195,231,.24),rgba(94,130,193,.17) 48%,rgba(157,139,192,.18) 76%,transparent); }
.wallpaper-ring { border-color:rgba(172,200,236,.35); box-shadow:inset 25px 15px 110px rgba(122,167,205,.14),25px 32px 90px rgba(94,80,143,.14); }
.orb-one { background:#88bde4; opacity:.25; }
.orb-two { background:#9a83bf; opacity:.21; animation:violet-drift 16s ease-in-out infinite; }
@keyframes violet-drift { 0%,100% { transform:translate(0,0); } 50% { transform:translate(55px,-35px); } }
.pr { background:#17104b; color:#c2a6ff; }
.chatgpt { background:#fff; overflow:hidden; }
.chatgpt img { display:block; width:100%; height:100%; object-fit:contain; }
@media (max-width:900px) { .desktop-widget { cursor:default; } }
@media (max-width:380px) { .dock { gap:7px; padding:8px; } .app-icon { width:40px; height:40px; } }
@media (prefers-reduced-motion:reduce) { .orb-two { animation:none; } }

/* Blue-hour collection: a modular glass canvas, with clear independent regions. */
#portfolioWindow {
 background:radial-gradient(ellipse at 92% 4%,rgba(130,102,192,.27),transparent 52%),radial-gradient(ellipse at 5% 85%,rgba(67,154,208,.2),transparent 55%),linear-gradient(130deg,rgba(44,68,102,.83),rgba(32,36,62,.85));
 border-color:rgba(178,205,255,.33); box-shadow:0 30px 90px rgba(9,17,39,.42),inset 0 1px rgba(215,231,255,.22);
}
#portfolioWindow .window-header { background:linear-gradient(90deg,rgba(98,162,224,.09),rgba(174,138,234,.09)); }
.finder-sidebar { background:linear-gradient(175deg,rgba(20,39,68,.25),rgba(55,35,86,.2)); border-right-color:rgba(175,205,246,.16); }
.sidebar-brand .sergio-mark { background:linear-gradient(135deg,#b5e3ef,#b8a5eb); }
.sidebar-item.active { background:linear-gradient(115deg,rgba(97,173,232,.22),rgba(149,123,221,.22)); border-color:rgba(181,213,255,.3); }
.category-item { display:grid; grid-template-columns:18px minmax(0,1fr) auto; }
.category-item::before { content:'◇'; color:#a9d9fb; font-size:17px; transition:transform .2s,color .2s; }
.category-item[data-discipline="Campaigns"]::before { content:'↗'; color:#b7b5fa; }
.category-item[data-discipline="Digital & Editorial"]::before { content:'▤'; }
.category-item[data-discipline="Product Design"]::before { content:'⬡'; color:#c6b5f4; }
.category-item[data-discipline="Motion"]::before { content:'▷'; }
.category-item[data-discipline="Archive"]::before { content:'⊞'; }
.category-item > span:first-child { line-height:1.4; }
.project-list { grid-template-columns:repeat(12,minmax(0,1fr)); gap:22px; }
.portfolio-spotlight { grid-column:span 8; min-height:410px; height:100%; border-radius:24px; }
.portfolio-spotlight.spotlight-solo { grid-column:1/-1; }
.spotlight-body { width:calc(100% - 44px); max-width:430px; margin:22px; background:linear-gradient(120deg,rgba(37,66,99,.4),rgba(70,50,104,.3)); border-color:rgba(210,227,255,.3); }
.spotlight-body h3 { font-size:clamp(27px,2.8vw,39px); }
.spotlight-controls { right:20px; bottom:18px; }
.spotlight-open { background:linear-gradient(115deg,#def4ff,#d9d1f6); }
.discovery-panel { grid-column:span 4; min-width:0; padding:22px 17px; border-radius:24px; border:1px solid rgba(193,213,249,.2); background:linear-gradient(150deg,rgba(99,157,224,.13),rgba(144,110,211,.13)); box-shadow:inset 0 1px rgba(226,239,255,.1); display:flex; flex-direction:column; gap:12px; }
.discovery-eyebrow { font-size:7px; letter-spacing:.14em; color:#b4d1ec; margin:0; }
.discovery-panel h3 { font-size:21px; font-weight:450; line-height:1.15; letter-spacing:-.035em; margin:0 0 5px; }
.discovery-links { display:grid; gap:11px; }
.discovery-link { display:flex; align-items:center; gap:10px; width:100%; min-width:0; padding:11px 9px; text-align:left; color:#eff4ff; border:1px solid rgba(183,210,250,.12); border-radius:13px; background:rgba(21,36,64,.24); transition:background .2s,border-color .2s; }
.discovery-link img { width:48px; height:55px; flex-shrink:0; object-fit:cover; border-radius:9px; }
.discovery-link > span:not(.discovery-arrow) { min-width:0; flex:1; }
.discovery-link strong { display:block; font-size:11px; font-weight:500; line-height:1.45; overflow-wrap:anywhere; }
.discovery-link small { display:block; font-size:8px; color:#b8c9e4; margin-top:5px; line-height:1.4; }
.discovery-arrow { flex-shrink:0; font-size:15px; color:#bce2ff; transition:transform .2s; }
.discovery-footer { font-size:8px; line-height:1.7; color:#afbfdd; margin:auto 0 0; padding-top:8px; }
.catalogue-label { display:flex; align-items:center; gap:14px; color:#ebf1ff; }
.catalogue-label::after { content:''; height:1px; flex:1; background:linear-gradient(90deg,rgba(148,193,241,.35),rgba(161,134,215,.07)); }
.project-file { grid-column:span 4; background:linear-gradient(145deg,rgba(92,158,217,.14),rgba(126,106,189,.12)); border-color:rgba(163,199,244,.22); }
.project-file.editorial-wide { grid-column:span 6; }
.project-file.editorial-wide .project-thumbnail { aspect-ratio:16/10; }
.project-file[data-discipline="Brand Identity"],.project-file[data-discipline="Product Design"] { background:linear-gradient(135deg,rgba(119,110,201,.18),rgba(77,120,185,.1)); }
.project-file .card-category { color:#b4dfff; }
.project-file strong { font-size:15px; }
.project-file .card-client { color:#c2cde3; }
.card-arrow { background:rgba(56,85,133,.46); border-color:rgba(193,222,255,.5); transition:transform .22s,background .22s; }
.project-search { background:rgba(34,55,88,.25); border-color:rgba(164,199,243,.22); }
#resultCount { border:1px solid rgba(174,194,242,.23); background:rgba(126,111,192,.16); padding:7px 10px; border-radius:20px; }
/* Hover affects visual accents, never the dimensions of the layout. */
@media (hover:hover) {
 .category-item:hover::before { transform:rotate(-8deg) scale(1.14); color:#e1e6ff; }
 .category-item[data-discipline="Campaigns"]:hover::before { transform:translate(2px,-2px); }
 .category-item[data-discipline="Motion"]:hover::before { transform:translateX(3px); }
 .discovery-link:hover { background:rgba(111,143,208,.2); border-color:rgba(168,203,255,.38); }
 .discovery-link:hover .discovery-arrow { transform:translate(2px,-2px); }
 .project-file:hover .card-arrow { transform:rotate(7deg) scale(1.08); background:rgba(87,106,172,.72); }
 .project-file:hover { box-shadow:0 12px 24px rgba(14,24,60,.24),inset 0 1px rgba(212,230,255,.12); border-color:rgba(170,206,255,.45); }
 .spotlight-open { transition:box-shadow .2s,background .2s; }
 .spotlight-open:hover { box-shadow:0 0 24px rgba(160,204,255,.27); background:#e9e5ff; }
 .spotlight-controls button { transition:transform .2s,background .2s; }
 .spotlight-controls button:hover:not(:disabled) { transform:scale(1.07); background:rgba(138,159,216,.4); }
 .desktop-item:hover .folder-icon { transform:translateY(-3px); }
 .desktop-item:hover .document-icon { transform:rotate(-3deg); }
 .folder-icon,.document-icon { transition:transform .2s; }
 .desktop-item.dragging .folder-icon,.desktop-item.dragging .document-icon { transform:none; }
}
@media (max-width:1150px) and (min-width:901px) {
 .project-list { gap:16px; }
 .portfolio-spotlight { grid-column:span 7; }
 .discovery-panel { grid-column:span 5; padding:18px 13px; }
 .project-file { grid-column:span 6; }
 .spotlight-body { margin:16px; width:calc(100% - 32px); padding:20px; }
}
@media (max-width:900px) {
 #portfolioWindow { background:radial-gradient(ellipse at top right,rgba(102,77,158,.35),transparent 65%),linear-gradient(140deg,#283e59,#272c48); }
 .portfolio-spotlight,.portfolio-spotlight.spotlight-solo { grid-column:1/-1; min-height:350px; }
 .discovery-panel { grid-column:1/-1; padding:18px; }
 .discovery-links { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .discovery-link { flex-direction:column; align-items:flex-start; }
 .discovery-link img { width:100%; height:85px; }
 .discovery-arrow { display:none; }
 .discovery-panel h3 { font-size:19px; }
 .project-file,.project-file.editorial-wide { grid-column:span 6; }
 .project-thumbnail,.project-file.editorial-wide .project-thumbnail { aspect-ratio:4/3; }
}
@media (max-width:500px) {
 .project-list { gap:18px; }
 .project-file,.project-file.editorial-wide { grid-column:1/-1; }
 .discovery-links { grid-template-columns:1fr; }
 .discovery-link { flex-direction:row; align-items:center; }
 .discovery-link img { width:52px; height:56px; }
 .discovery-arrow { display:block; }
}
.hidden { display:none; }

/* Integrated Dock caption and a richer animated blue/violet wallpaper. */
.dock { height:92px; padding:33px 12px 10px; }
.dock-label { position:absolute; top:11px; left:12px; right:12px; text-align:center; font-size:10px; font-weight:500; letter-spacing:.055em; color:#dbe6f4; line-height:14px; pointer-events:none; user-select:none; -webkit-user-select:none; }
.dock-app > span { bottom:80px; }
.orb-one { background:#53a9ed; opacity:.46; filter:blur(64px); }
.orb-two { background:#9870df; opacity:.4; filter:blur(65px); }
.wallpaper-plane { background:linear-gradient(145deg,rgba(104,200,255,.48),rgba(73,131,226,.36) 44%,rgba(167,110,234,.4) 75%,transparent); filter:blur(8px); }
.wallpaper-ring { border-color:rgba(142,204,255,.58); background:linear-gradient(145deg,rgba(104,178,238,.07),transparent 45%,rgba(147,106,223,.13)); box-shadow:inset 30px 20px 100px rgba(89,164,231,.24),30px 40px 100px rgba(134,89,212,.22); }
.wallpaper-ring::after { border-color:rgba(165,167,241,.26); }
@media (max-width:380px) { .dock { padding:33px 8px 10px; } }

/* Supplied Portfolio artwork, framed around its central app symbol. */
.portfolio-app-icon { position:relative; width:70px; height:70px; flex-shrink:0; overflow:hidden; border-radius:30%; box-shadow:0 8px 22px rgba(72,62,242,.3); transition:transform .2s ease,box-shadow .2s ease; }
.portfolio-app-icon img { position:absolute; display:block; width:290.91%; max-width:none; height:auto; left:-95.64%; top:-59.27%; pointer-events:none; }
@media (hover:hover) {
  #portfolioIcon:hover .portfolio-app-icon { transform:translateY(-3px); box-shadow:0 12px 26px rgba(72,62,242,.4); }
}
@media (prefers-reduced-motion:reduce) { .portfolio-app-icon { transition:none; } }

/* About artwork: crop its outer canvas and harmonize cyan with the blue/violet palette. */
.about-app-icon { position:relative; width:62px; height:62px; flex-shrink:0; overflow:hidden; border-radius:25%; box-shadow:0 8px 22px rgba(76,96,222,.25); transition:transform .2s ease,box-shadow .2s ease; }
.about-app-icon img { position:absolute; display:block; width:140.05%; max-width:none; height:auto; left:-17.65%; top:-21.72%; filter:hue-rotate(35deg) saturate(.8); pointer-events:none; }
@media (hover:hover) { #aboutIcon:hover .about-app-icon { transform:translateY(-3px); box-shadow:0 12px 26px rgba(87,93,224,.35); } }
@media (prefers-reduced-motion:reduce) { .about-app-icon { transition:none; } }

/* CV artwork framed around the square symbol, preserving the original asset. */
.cv-app-icon { position:relative; width:62px; height:62px; flex-shrink:0; overflow:hidden; border-radius:20%; box-shadow:0 8px 22px rgba(76,96,222,.25); transition:transform .2s ease,box-shadow .2s ease; }
.cv-app-icon img { position:absolute; display:block; width:181.27%; max-width:none; height:auto; left:-40.63%; top:-85.8%; pointer-events:none; }
@media (hover:hover) { #cvIcon:hover .cv-app-icon { transform:translateY(-3px); box-shadow:0 12px 26px rgba(87,93,224,.35); } }
@media (prefers-reduced-motion:reduce) { .cv-app-icon { transition:none; } }

/* Contact artwork with a cool tint matching the other home apps. */
.contact-app-icon { position:relative; width:62px; height:62px; flex-shrink:0; overflow:hidden; border-radius:23%; background:#5268ee; box-shadow:0 8px 22px rgba(76,96,222,.25); transition:transform .2s ease,box-shadow .2s ease; }
.contact-app-icon img { position:absolute; display:block; width:258.06%; max-width:none; height:auto; left:-78.92%; top:-41.94%; filter:saturate(.65); pointer-events:none; }
.contact-app-icon::after { content:''; position:absolute; inset:0; background:linear-gradient(145deg,#50b5f7,#7664e9); mix-blend-mode:color; opacity:.75; pointer-events:none; }
@media (hover:hover) { #contactIcon:hover .contact-app-icon { transform:translateY(-3px); box-shadow:0 12px 26px rgba(87,93,224,.35); } }
@media (prefers-reduced-motion:reduce) { .contact-app-icon { transition:none; } }

/* A curated conversation inside the existing window manager. */
.chat-window { width:min(1120px,92vw); height:min(780px,84vh); left:50%; top:48%; transform:translate(-50%,-50%); color:#292b30; background:#fafafa; }
.chat-window .window-header { background:#e9ecf3; color:#343842; border-bottom:1px solid #dadde5; }
.chat-layout { display:flex; height:calc(100% - 52px); min-height:0; }
.chat-sidebar { flex:0 0 235px; display:flex; flex-direction:column; padding:26px 16px 18px; background:#f0f1f5; border-right:1px solid #e3e4ea; overflow:auto; }
.chat-brand { font-size:20px; padding:0 10px 25px; }
.chat-history-label,.chat-history-note { color:#737785; font-size:11px; padding:0 10px; }
.chat-current { padding:12px 10px; border-radius:10px; background:#e0e5f2; font-size:13px; font-weight:600; }
.chat-history { list-style:none; padding:0; margin:8px 0; font-size:12px; color:#666b77; }
.chat-history li { padding:12px 10px; line-height:1.4; cursor:default; }
.chat-history-note { font-size:10px; }
.chat-account { display:flex; align-items:center; gap:10px; margin-top:auto; padding:24px 10px 0; font-size:12px; }
.chat-account > span { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#dce4fa; }
.chat-account small { display:block; font-size:10px; color:#737785; margin-top:4px; }
.chat-main { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; }
.chat-topline { display:flex; justify-content:space-between; align-items:center; padding:20px 26px; gap:12px; }
.chat-topline strong { font-size:18px; }
.chat-topline > span,.chat-topline strong span { font-size:11px; color:#797f8d; }
.chat-conversation { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:16px clamp(18px,4vw,55px) 28px; }
.chat-question { width:fit-content; max-width:90%; margin:0 0 30px auto; padding:14px 20px; border-radius:24px 24px 6px 24px; background:#eaeef7; font-size:15px; }
.chat-answer { display:flex; gap:15px; font-size:14px; line-height:1.8; }
.chat-answer > img { flex-shrink:0; border-radius:50%; margin-top:4px; }
.chat-answer p { margin:0 0 18px; }
.chat-answer strong { font-weight:600; }
.chat-cta { display:flex; flex-wrap:wrap; gap:10px; padding-top:4px; }
.chat-cta button { min-height:44px; border:1px solid #cbd5ef; border-radius:22px; background:#eef2fc; color:#374e85; padding:10px 16px; cursor:pointer; }
.chat-cta button:hover { background:#e0e7fa; }
.chat-footer { flex-shrink:0; padding:10px 24px 16px; }
.chat-composer { display:flex; justify-content:space-between; align-items:center; gap:12px; border:1px solid #e0e3ea; border-radius:26px; padding:14px 18px; color:#7c818c; font-size:12px; background:white; box-shadow:0 3px 14px #25366008; }
.chat-composer span { font-size:20px; }
.chat-footer p { font-size:10px; color:#7b808c; text-align:center; line-height:1.5; margin:10px 0 0; }
@media (max-width:900px) {
 .chat-window { background:#fafafa !important; }
 .chat-layout { height:calc(100% - 58px); }
 .chat-window .traffic.red::after { color:#343842; }
 .chat-sidebar { display:none; }
 .chat-topline { padding:16px 20px; }
 .chat-conversation { padding:12px 18px 24px; }
 .chat-answer { gap:10px; font-size:14px; }
 .chat-answer > img { width:23px; height:23px; }
 .chat-footer { padding:10px 14px 14px; }
 .chat-composer { font-size:11px; }
}
/* Keep the conversation viewport at its natural start rather than centering overflow. */
.chat-conversation { overflow-anchor:none; scroll-behavior:auto; }
.chat-question { flex-shrink:0; }

.chat-composer > p { margin:0; color:#666e7d; text-align:left; font-size:12px; line-height:1.5; }
.chat-composer > button { flex-shrink:0; min-height:44px; padding:10px 16px; border:0; border-radius:22px; background:#465fc5; color:white; font-size:12px; font-weight:600; cursor:pointer; }
.chat-composer > button:hover { background:#364dab; }
.chat-composer > button:focus-visible { outline:2px solid #465fc5; outline-offset:3px; }
@media (max-width:500px) { .chat-composer { flex-wrap:wrap; border-radius:20px; } .chat-composer > button { margin-left:auto; } }

.chat-home-icon { width:62px; height:62px; border-radius:24%; overflow:hidden; background:white; box-shadow:0 8px 22px #263f7833; }
.chat-home-icon img { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.dock-app { cursor:pointer; }
.dock-app .app-icon { transition:box-shadow .18s ease,filter .18s ease; }
.dock-app:active { transform:translateY(2px) scale(.94); }
.dock-app:focus-visible { outline:2px solid #c8d9ff; outline-offset:5px; border-radius:12px; }
@media (hover:hover) { .dock-app:hover .app-icon { filter:brightness(1.13); box-shadow:0 8px 22px #8fafff55,inset 0 0 0 1px #ffffff55; } }
@media (min-width:901px) { .dock .app-icon { width:50px; height:50px; } }
@media (prefers-reduced-motion:reduce) { .dock-app .app-icon { transition:none; } }

/* Desktop: exposed flip clock and illustrated location widget. */
@media (min-width:901px) {
 .flip-widget { background:none; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding:0; height:120px; display:flex; justify-content:center; }
 .flip-widget > .widget-eyebrow,.flip-widget > .widget-note { display:none; }
 .flip-clock { margin:0; }
 .location-widget { overflow:hidden; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end; color:#223d47; background:#dbe9de; }
 .location-widget .widget-eyebrow,.location-widget .location-orbit { display:none; }
 .location-widget strong { position:relative; margin:0; z-index:1; font-size:18px; }
 .location-widget .widget-note { position:relative; z-index:1; color:#49626a; }
  .mobile-map { display:block; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,#eff3eafa 0%,#eff3eaeb 24%,transparent 60%),linear-gradient(130deg,#d3e8d4,#d9e8ec); }
  .map-park { position:absolute; width:80px; height:80px; border-radius:24px; background:#adcfaa; top:-20px; right:-5px; transform:rotate(25deg); }
  .map-road { position:absolute; height:10px; width:230px; background:#fff; border:1px solid #c7d7d9; top:46px; left:-28px; transform:rotate(-25deg); }
  .road-two { transform:rotate(65deg); left:-65px; top:35px; }
  .road-three { transform:rotate(65deg); left:30px; top:35px; }
  .map-pin { position:absolute; top:27px; left:calc(50% - 17px); width:34px; height:34px; display:grid; place-items:center; color:white; font-size:15px; font-weight:700; border:3px solid white; border-radius:50% 50% 50% 6px; transform:rotate(-12deg); background:#3478ed; box-shadow:0 4px 12px #244d8240; }
  .mobile-map { background:linear-gradient(0deg,#eff3ea 0%,#eff3eae8 24%,transparent 60%),repeating-linear-gradient(12deg,transparent 0 22px,#ffffff90 23px 26px,transparent 27px 43px),#dce8e1; }
  .map-block { position:absolute; border:1px solid #bbc9ce; border-radius:3px; background:repeating-linear-gradient(90deg,#cbd7da 0 8px,#dde5e5 8px 10px); transform:rotate(-25deg); }
  .block-one { width:33px; height:19px; left:5px; top:10px; }
  .block-two { width:32px; height:22px; right:5px; top:57px; }
  .block-three { width:22px; height:17px; left:24px; top:65px; }
  .map-garden { position:absolute; top:6px; right:7px; width:30px; height:20px; border-radius:8px; background:radial-gradient(circle at 25% 45%,#88b88b 0 3px,transparent 4px),radial-gradient(circle at 70% 65%,#8fbd91 0 4px,transparent 5px),#b9d6ad; transform:rotate(15deg); }
  .map-street { position:absolute; width:170px; height:4px; background:#fff; border-bottom:1px solid #c4d3d6; transform:rotate(-25deg); left:-15px; }
  .street-one { top:22px; }
  .street-two { top:71px; }
  .street-three { top:36px; left:-50px; transform:rotate(65deg); }
  .map-place { position:absolute; top:7px; right:10px; font-size:5px; font-weight:600; color:#5b8267; letter-spacing:.04em; }
  .map-pin { z-index:2; width:29px; height:29px; top:32px; left:calc(50% - 14px); font-size:12px; }
 .location-widget .mobile-map { display:block; }
}

/* Desktop calendar replaces the project counter; mobile keeps its current widgets. */
.work-widget,.calendar-widget { display:none; }
@media (min-width:901px) {
 .calendar-widget { display:flex; width:220px; height:220px; flex-shrink:0; border-radius:26px; background:rgba(255,255,255,.96); color:#222; padding:20px; box-shadow:0 12px 30px #15203725,inset 0 1px white; }
 .calendar-widget .widget-eyebrow { color:#e75954; font-size:11px; font-weight:700; letter-spacing:.03em; }
 .calendar-day { display:block; font-size:46px; font-weight:400; letter-spacing:-.06em; line-height:1.1; margin:0 0 12px; }
 .calendar-tasks { display:grid; gap:7px; }
 .calendar-task { border-left:4px solid #39acd3; border-radius:4px; background:#e8f6fc; color:#287e9b; padding:6px 8px; font-size:12px; font-weight:650; }
 .calendar-task small { display:block; font-size:9px; font-weight:400; margin-top:3px; line-height:1.2; }
 .workout-task { border-color:#d65089; background:#fce9f0; color:#a6436a; }
}

/* Desktop widgets: calendar first, map second, aligned along the left edge. */
@media (min-width:901px) {
 .flip-widget { display:none; }
 .desktop-widgets { left:5vw; top:11vh; display:flex; align-items:flex-start; gap:16px; }
 .calendar-widget { order:0; }
 .location-widget { order:1; }
}

/* Balanced desktop widgets and a lighter, cool-toned wallpaper. */
@media (min-width:901px) {
 .desktop-widgets .calendar-widget,
 .desktop-widgets .location-widget {
   width:220px !important;
   height:220px;
   flex:0 0 220px;
   padding:20px;
   border-radius:26px;
 }
 .desktop {
   background:
     radial-gradient(ellipse at 10% 35%,rgba(99,174,200,.32) 0,transparent 55%),
     radial-gradient(ellipse at 90% 65%,rgba(127,111,201,.3) 0,transparent 60%),
     linear-gradient(155deg,#2b3e5b,#28546b 55%,#34304d);
 }
}

/* Keep window contents scrollable when their height is limited above the Dock. */
@media (min-width:901px) {
 .glass-window { overflow:hidden; }
 .about-window .about-content { max-height:calc(100% - 52px); overflow-y:auto; }
 .window-header .traffic.red { position:relative; }
 .window-header .traffic.red::before { content:''; position:absolute; inset:-7px; }
}

/* Language control and a consistent desktop window workspace. */
.language-switch { display:flex; padding:3px; gap:2px; border:1px solid #ffffff26; background:#ffffff12; border-radius:10px; }
.menu-bar .language-switch button { display:block; color:#dfe7f3; font-size:10px; font-weight:600; min-width:32px; padding:5px 8px; border-radius:7px; }
.language-switch button[aria-pressed="true"] { background:#ffffff28; box-shadow:0 1px 5px #0002; }
.minimized-windows { position:fixed; right:16px; bottom:20px; z-index:1901; display:flex; gap:6px; max-width:calc(50vw - 260px); overflow:auto; }
.minimized-windows button { flex-shrink:0; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid #ffffff30; border-radius:12px; padding:12px; color:white; background:#354867dc; backdrop-filter:blur(16px); }
@media (min-width:901px) {
 .glass-window { resize:both; min-width:340px; min-height:240px; }
 .glass-window.is-maximized { resize:none; }
 .traffic.yellow,.traffic.green { padding:0; border:0; cursor:pointer; position:relative; }
 .traffic.yellow::after { content:'−'; }
 .traffic.green::after { content:'↗'; }
 .traffic.yellow::after,.traffic.green::after { display:block; font-size:10px; line-height:12px; color:#233328; opacity:0; }
 .traffic.yellow:hover::after,.traffic.green:hover::after,.traffic:focus-visible::after { opacity:1; }
 .glass-window .window-header { touch-action:none; }
 .project-content,.finder-layout,.chat-layout,.cv-content { min-height:0; }
}
.project-search:focus-within { outline:2px solid #aabff5; outline-offset:2px; }
.project-file:focus-visible { outline:2px solid #c7d7ff; outline-offset:3px; }
.finder-main { overscroll-behavior:contain; }
@media (max-width:900px) {
 .menu-right { gap:8px; }
 .menu-bar .language-switch button { min-height:36px; min-width:36px; padding:6px; }
 .minimized-windows { display:none; }
 .glass-window { resize:none; max-width:none !important; max-height:none !important; }
 .collection-heading p:not(.eyebrow) { font-size:12px; line-height:1.5; }
 .project-search { border-radius:14px; }
 .mobile-filters { position:relative; gap:10px; }
 .mobile-filters select { border-radius:12px; }
 .project-list { gap:18px; }
 .spotlight-body h3 { overflow-wrap:anywhere; }
 .menu-left strong { max-width:120px; }
}