/* berkayvuran.com : macOS-desktop style. Local Poppins, no external requests. */
@font-face{font-family:'Poppins';font-weight:400;font-display:swap;src:url('/assets/fonts/poppins-400.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:500;font-display:swap;src:url('/assets/fonts/poppins-500.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-weight:600;font-display:swap;src:url('/assets/fonts/poppins-600.woff2') format('woff2')}

:root{
  --bar:32px; --dock-h:92px;
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','Poppins','Segoe UI',Roboto,sans-serif;
}
/* Palette taken from the original site (iOS blue accent on slate). 4 themes: dark, light, matrix, high-contrast */
:root,:root[data-theme="dark"]{
  --text:hsl(0 0% 98%); --muted:hsl(220 15% 68%); --accent:#007AFF; --accent2:#5AC8FA; --on-accent:#fff; --accent-soft:rgba(0,122,255,.2);
  --win:hsla(220,24%,14%,.58); --win2:rgba(255,255,255,.07); --side:rgba(6,10,20,.3); --orb1:rgba(0,122,255,.55); --orb2:rgba(88,86,214,.38); --orb3:rgba(90,200,250,.3); --line:rgba(255,255,255,.09);
  --glass:hsla(220,25%,13%,.62); --glass-line:rgba(255,255,255,.14); --shadow:0 28px 80px rgba(0,0,0,.6);
  --wall:radial-gradient(900px 600px at 72% 22%,rgba(0,122,255,.24),transparent 60%),radial-gradient(800px 600px at 12% 88%,rgba(90,200,250,.11),transparent 60%),linear-gradient(160deg,hsl(220 26% 13%),hsl(220 28% 8%) 55%,hsl(220 32% 5%));
  --wave:rgba(90,200,250,.2); --bg0:hsl(220 28% 6%); --meta:#0b0f17;
  --onwall:#fff; --onwall-muted:rgba(255,255,255,.72); --logo-bg:#fff; --logo-ink:hsl(220 25% 10%);
  --hover:rgba(255,255,255,.14); --tint:rgba(255,255,255,.1); --tint-hover:rgba(255,255,255,.18);
  --w-builder:linear-gradient(145deg,rgba(0,122,255,.4),rgba(90,200,250,.14)); --mark:rgba(255,204,0,.35);
  --scrim:rgba(4,8,16,.5); color-scheme:dark;
}
:root[data-theme="light"]{
  --text:hsl(220 25% 12%); --muted:hsl(220 10% 38%); --accent:#007AFF; --accent2:#0A7BC4; --on-accent:#fff; --accent-soft:rgba(0,122,255,.12);
  --win:rgba(255,255,255,.6); --win2:rgba(255,255,255,.55); --side:rgba(255,255,255,.32); --orb1:rgba(0,122,255,.38); --orb2:rgba(175,82,222,.26); --orb3:rgba(90,200,250,.5); --line:rgba(0,0,0,.09);
  --glass:rgba(255,255,255,.66); --glass-line:rgba(255,255,255,.85); --shadow:0 24px 70px rgba(30,60,120,.28);
  --wall:radial-gradient(900px 600px at 72% 22%,rgba(0,122,255,.16),transparent 60%),radial-gradient(800px 600px at 12% 88%,rgba(90,200,250,.28),transparent 60%),linear-gradient(160deg,#f4f8ff,#e6f0ff 50%,#d9efff);
  --wave:rgba(255,255,255,.85); --bg0:#e6f0ff; --meta:#eef4ff;
  --onwall:hsl(220 30% 14%); --onwall-muted:hsla(220,30%,14%,.68); --logo-bg:hsl(220 30% 14%); --logo-ink:#fff;
  --hover:rgba(0,0,0,.07); --tint:rgba(255,255,255,.62); --tint-hover:rgba(255,255,255,.9);
  --w-builder:linear-gradient(145deg,rgba(0,122,255,.3),rgba(90,200,250,.28)); --mark:rgba(255,204,0,.5);
  --scrim:rgba(20,40,80,.28); color-scheme:light;
}
:root[data-theme="matrix"]{
  --text:#00ff00; --muted:#00cc00; --accent:#00ff00; --accent2:#00ffff; --on-accent:#001a00; --accent-soft:rgba(0,255,0,.14);
  --win:rgba(0,20,0,.62); --win2:rgba(0,255,0,.07); --side:rgba(0,10,0,.35); --orb1:rgba(0,255,0,.3); --orb2:rgba(0,255,255,.16); --orb3:rgba(0,255,0,.14); --line:rgba(0,255,0,.22);
  --glass:rgba(0,16,0,.72); --glass-line:rgba(0,255,0,.32); --shadow:0 0 40px rgba(0,255,0,.18),0 28px 80px rgba(0,0,0,.7);
  --wall:radial-gradient(800px 560px at 70% 25%,rgba(0,255,0,.12),transparent 60%),linear-gradient(160deg,hsl(120 100% 4%),hsl(120 100% 2%) 60%,#000);
  --wave:rgba(0,255,0,.2); --bg0:#000; --meta:#000;
  --onwall:#00ff00; --onwall-muted:#00cc00; --logo-bg:#00ff00; --logo-ink:#001a00;
  --hover:rgba(0,255,0,.16); --tint:rgba(0,255,0,.1); --tint-hover:rgba(0,255,0,.2);
  --w-builder:linear-gradient(145deg,rgba(0,255,0,.2),rgba(0,255,255,.1)); --mark:rgba(0,255,0,.3);
  --scrim:rgba(0,10,0,.6); color-scheme:dark;
}
:root[data-theme="high-contrast"]{
  --text:#fff; --muted:#e6e6e6; --accent:#ffff00; --accent2:#00ffff; --on-accent:#000; --accent-soft:rgba(255,255,0,.18);
  --win:rgba(0,0,0,.82); --win2:rgba(255,255,255,.1); --side:rgba(0,0,0,.6); --orb1:rgba(255,255,0,.16); --orb2:rgba(0,255,255,.12); --orb3:rgba(255,255,255,.08); --line:rgba(255,255,255,.55);
  --glass:rgba(0,0,0,.88); --glass-line:#fff; --shadow:0 0 0 1px #fff,0 28px 80px rgba(0,0,0,.8);
  --wall:#000; --wave:rgba(255,255,255,.35); --bg0:#000; --meta:#000;
  --onwall:#fff; --onwall-muted:#e6e6e6; --logo-bg:#ffff00; --logo-ink:#000;
  --hover:rgba(255,255,255,.25); --tint:rgba(255,255,255,.14); --tint-hover:rgba(255,255,255,.28);
  --w-builder:linear-gradient(145deg,rgba(255,255,0,.25),rgba(0,255,255,.12)); --mark:rgba(255,255,0,.5);
  --scrim:rgba(0,0,0,.7); color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body.desk{font-family:var(--font);font-size:15px;line-height:1.5;color:var(--onwall);background:var(--bg0);overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:fixed;left:12px;top:-60px;z-index:99999;background:#fff;color:#111;padding:8px 14px;border-radius:8px}
.skip:focus{top:8px}

/* wallpaper */
.wallpaper{position:fixed;inset:0;z-index:0;background:var(--wall)}
.wallpaper svg{position:absolute;inset:0;width:100%;height:100%}
.wallpaper path{fill:none;stroke:var(--wave);stroke-width:2}

/* menu bar */
.menubar{position:fixed;top:0;left:0;right:0;height:var(--bar);z-index:9000;display:flex;align-items:center;justify-content:space-between;padding:0 max(12px,env(safe-area-inset-left));background:var(--glass);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);border-bottom:1px solid var(--glass-line);font-size:13px;color:var(--onwall)}
.mb-left,.mb-right{display:flex;align-items:center;gap:14px;min-width:0}
.mb-logo{font-weight:600;font-size:11.5px;letter-spacing:.5px;background:var(--logo-bg);color:var(--logo-ink);border-radius:5px;padding:1px 6px}
.mb-app{font-weight:600;white-space:nowrap}
.mb-menu{display:flex;gap:2px;margin-left:6px}
.mb-menu a{padding:2px 9px;border-radius:5px;color:var(--onwall-muted)}
.mb-menu a:hover,.mb-menu a[aria-current]{background:var(--hover);color:var(--onwall)}
.mb-lang,.mb-theme{display:grid;place-items:center;min-width:28px;height:24px;padding:0 6px;border:0;border-radius:6px;background:none;color:var(--onwall);font:inherit;font-weight:500;cursor:pointer}
.mb-lang:hover,.mb-theme:hover,.mb-search:hover{background:var(--hover)}
.mb-theme svg{width:17px;height:17px}
.mb-clock{font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.9}

/* desktop surface */
.desktop{position:fixed;inset:var(--bar) 0 0 0;z-index:1;overflow:hidden}
.hello{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);text-align:center;width:min(560px,86vw)}
.hello img{border-radius:50%;border:2px solid var(--glass-line);box-shadow:0 10px 40px rgba(0,0,0,.4);width:96px;height:96px}
.hello-name{font-size:30px;font-weight:600;margin:14px 0 2px;line-height:1.2}
.hello-sub{opacity:.78;font-size:14.5px}
.hello-bio{margin-top:12px;font-size:13px;line-height:1.6;color:var(--onwall-muted)}

.icons{position:absolute;top:16px;right:16px;bottom:var(--dock-h);display:flex;flex-direction:column;flex-wrap:wrap-reverse;align-content:flex-start;gap:6px 8px}
.icon{display:block;width:96px;padding:5px 0;border-radius:12px;text-align:center;font-size:12.5px;color:var(--onwall)}
.icon:hover,.icon:focus-visible{background:var(--hover)}
.icon[aria-current="page"],.icon.is-open{background:var(--tint)}
.tile{display:grid;place-items:center;width:60px;height:60px;margin:0 auto 5px;border-radius:15px;box-shadow:0 6px 18px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.35)}
.tile svg{width:30px;height:30px;stroke:#fff}
.lbl{text-shadow:0 1px 4px rgba(0,0,0,.35);color:var(--onwall)}
:root[data-theme="light"] .lbl{text-shadow:none}
.c-about .tile{background:linear-gradient(145deg,#0A84FF,#0060DF)}
.c-cv .tile{background:linear-gradient(145deg,#5AC8FA,#2A9FD6)}
.c-references .tile{background:linear-gradient(145deg,#34C759,#1E9E40)}
.c-showcase .tile{background:linear-gradient(145deg,#FF9F0A,#E27D00)}
.c-blog .tile{background:linear-gradient(145deg,#FF2D55,#E01E3F)}
.c-builder .tile{background:linear-gradient(145deg,#FFD60A,#F5A800)}
.c-linkedin .tile{background:linear-gradient(145deg,#3b82f6,#1d4ed8)}
.c-github .tile{background:linear-gradient(145deg,#3a3a3d,#121214)}
.c-mail .tile{background:linear-gradient(145deg,#94a3b8,#475569)}

/* home widgets */
.widgets{position:absolute;top:18px;left:18px;display:grid;grid-template-columns:290px;gap:14px;align-items:stretch}
.widget{display:block;padding:16px;border-radius:20px;background:var(--glass);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid var(--glass-line);color:var(--onwall)}
.w-builder{display:flex;flex-direction:column;gap:3px;background:var(--w-builder)}
.w-badge{align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;padding:2px 9px;border-radius:99px;background:var(--tint);margin-bottom:6px}
.w-builder b{font-size:18px;line-height:1.3}
.w-builder span:last-child{font-size:12.5px;color:var(--onwall-muted)}
.w-posts h2{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--onwall-muted);font-weight:600;margin-bottom:6px}
.w-posts ul{list-style:none}
.w-posts li a{display:block;padding:9px 0;border-top:1px solid var(--glass-line)}
.w-posts li:first-child a{border-top:0}
.w-posts b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;font-weight:500;line-height:1.35}
.w-posts time{font-size:11.5px;color:var(--onwall-muted)}
.w-posts a:hover b{text-decoration:underline}
.w-now{display:flex;flex-direction:column;gap:2px}
.w-now h2,.w-certs h2,.w-stats h2,.w-quote h2{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--onwall-muted);font-weight:600;margin-bottom:8px}
.w-now b{font-size:16px;line-height:1.35}
.w-now span{font-size:12.5px;color:var(--onwall-muted)}
.w-now em{font-style:normal;font-size:12.5px;margin-top:8px;color:var(--onwall)}
.w-now:hover em{text-decoration:underline}
.w-stats ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.w-stats a{display:flex;flex-direction:column;padding:10px 12px;border-radius:13px;background:var(--tint)}
.w-stats a:hover{background:var(--tint-hover)}
.w-stats b{font-size:24px;line-height:1.1;font-weight:600}
.w-stats span{font-size:11.5px;color:var(--onwall-muted)}
.w-quote blockquote{font-size:13px;line-height:1.6;font-style:italic;color:var(--onwall)}
.w-by{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:12px;color:var(--onwall-muted)}
.w-by img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.w-by>span{display:flex;flex-direction:column;gap:2px;line-height:1.3;min-width:0}
.w-by i{font-style:normal}
.w-by b{font-size:12.5px;color:var(--onwall);font-weight:600}
.w-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.w-thumbs img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
.w-foot{display:block;margin-top:10px;font-size:12.5px;color:var(--onwall-muted)}
.w-foot b{font-size:18px;color:var(--onwall);margin-right:4px}
.widget:is(a):hover{border-color:var(--accent)}
@media (max-width:1099px){body:not(.page-home) .hello,body:not(.page-home) .widgets{visibility:hidden}}

/* dock */
.dock{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:8000;display:flex;align-items:flex-end;gap:10px;padding:8px 12px;border-radius:22px;background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--glass-line)}
.dock .icon{position:relative;width:auto;padding:0;transition:transform .15s ease;transform-origin:bottom;background:none}
.dock .lbl{display:none}
.dock .tile{width:52px;height:52px;margin:0}
.dock .icon:hover{transform:scale(1.22) translateY(-4px)}
.dock .icon[aria-current="page"]::after,.dock .icon.is-open::after{content:'';position:absolute;bottom:-6px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--onwall)}
.dock-sep{width:1px;align-self:stretch;margin:4px 2px;background:var(--glass-line)}

/* window */
.window{position:fixed;z-index:500;display:flex;flex-direction:column;background:var(--win);color:var(--text);border:1px solid var(--glass-line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;animation:pop .18s ease-out}
.window.is-min{display:none}
@keyframes pop{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}}
.titlebar{position:relative;display:flex;align-items:center;justify-content:center;height:44px;flex:none;background:var(--win2);border-bottom:1px solid var(--line);cursor:grab;user-select:none;-webkit-user-select:none}
.titlebar:active{cursor:grabbing}
.titlebar h1{font-size:13px;font-weight:600;opacity:.8}
.dots{position:absolute;left:14px;display:flex;gap:8px}
.dot{width:12px;height:12px;border-radius:50%;border:0;padding:0;cursor:pointer;display:block}
.dot.r{background:#ff5f57}.dot.y{background:#febc2e}.dot.g{background:#28c840}
.back{display:none}
.win-body{flex:1;min-height:0;display:grid;grid-template-columns:224px minmax(0,1fr)}
.no-side .win-body{grid-template-columns:minmax(0,1fr)}
.win-side{overflow:auto;background:var(--side);border-right:1px solid var(--line);padding:14px 10px}
.side-h{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);padding:2px 10px 8px}
.side-list{list-style:none;display:flex;flex-direction:column;gap:2px}
.side-item{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;font-size:13.5px;color:var(--text)}
.side-item:hover{background:var(--accent-soft)}
.side-item[aria-current]{background:var(--accent);color:var(--on-accent)}
.side-item .si{width:18px;height:18px;flex:none;stroke:var(--accent)}
.side-item[aria-current] .si{stroke:var(--on-accent)}
.sl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc{margin-left:auto;font-size:12px;opacity:.65}
.win-main{overflow:auto;padding:22px 26px 36px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.muted{color:var(--muted);font-weight:400}

/* shared bits */
.toolbar{display:flex;justify-content:flex-end;margin-bottom:14px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:9px;background:var(--accent);color:var(--on-accent);font-size:13.5px;font-weight:500}
.btn svg{width:17px;height:17px}
.btn:hover{filter:brightness(1.1)}
.group{margin-bottom:28px}
.group-h{font-size:15px;font-weight:600;margin-bottom:10px}
.group-h .muted{font-size:12.5px;margin-left:6px}

/* about */
.doc{max-width:860px}
.prose p{line-height:1.8;margin-bottom:14px;font-size:15px}
.prose strong{color:var(--text)}
.doc-h{font-size:17px;margin:26px 0 12px}
.cards3{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{background:var(--win2);border-radius:16px;padding:18px}
.card img{margin-bottom:10px}
.card h3{font-size:15px;margin-bottom:6px}
.card p{font-size:13.5px;color:var(--muted);line-height:1.65}

/* cv rows (folder list) */
.rows{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--win)}
.row{border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row summary{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;list-style:none}
.row summary::-webkit-details-marker{display:none}
.row summary::after{content:'';width:7px;height:7px;flex:none;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .15s}
.row[open] summary::after{transform:rotate(45deg)}
.row summary:hover{background:var(--accent-soft)}
.ri{width:22px;height:22px;flex:none;stroke:var(--accent)}
.rt{display:flex;flex-direction:column;min-width:0}
.rt b{font-weight:500;font-size:14.5px}
.org{font-size:12.5px;color:var(--muted)}
.rd{margin-left:auto;font-size:12.5px;color:var(--muted);white-space:nowrap}
.row-body{padding:2px 18px 16px 48px;font-size:14px;line-height:1.7;color:var(--text)}
.row-body p{margin-bottom:8px}
.row-body a{color:var(--accent2)}
.row-body a p{display:inline}
.row-body u{text-decoration:none}
.bul{list-style:none;display:flex;flex-direction:column;gap:9px}
.bul li{position:relative;padding-left:16px}
.bul li::before{content:'';position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* references */
.people{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px;align-items:start}
.person{background:var(--win2);border-radius:16px;padding:14px}
.person summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none}
.person summary::-webkit-details-marker{display:none}
.person img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
.pn{display:flex;flex-direction:column;min-width:0}
.pn b{font-weight:600;font-size:14.5px}
.pn span{font-size:12.5px;color:var(--muted)}
.pn em{font-style:normal;font-size:11.5px;color:var(--accent2);margin-top:2px}
.quote{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.75;color:var(--text)}
.quote p{margin-bottom:10px}

/* showcase */
.grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.tile-card a{display:block;border-radius:14px}
.tile-card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;border:1px solid var(--line);background:var(--win2);transition:transform .15s,box-shadow .15s}
.tile-card a:hover img{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.tc-t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:8px;font-size:13px;font-weight:500;line-height:1.35}
.tc-c{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}

/* blog list */
.posts{list-style:none}
.post{border-bottom:1px solid var(--line);content-visibility:auto;contain-intrinsic-size:auto 84px}
.post a{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 8px;border-radius:10px}
.post a:hover{background:var(--accent-soft)}
.post img{width:120px;height:60px;object-fit:cover;border-radius:8px;background:var(--win2)}
.pt{display:flex;flex-direction:column;gap:3px;min-width:0}
.pt b{font-weight:500;font-size:14.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pe{font-size:12.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.pm{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:12px;color:var(--muted);white-space:nowrap}
.pc{color:var(--accent2);font-weight:500}

/* builder / launchpad */
.hero{margin-bottom:22px}
.intro{max-width:760px;line-height:1.75;color:var(--muted);font-size:14.5px}
.stats{list-style:none;display:flex;gap:28px;margin-top:16px}
.stats li{display:flex;flex-direction:column}
.stats b{font-size:22px;color:var(--accent2);line-height:1.2}
.stats span{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.launchpad{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.app{display:flex;flex-direction:column;gap:6px;height:100%;padding:16px;border-radius:20px;background:var(--win2);border:1px solid transparent;transition:transform .15s,border-color .15s}
.app:hover{transform:translateY(-3px);border-color:var(--accent)}
.app-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:15px;font-size:27px;margin-bottom:4px}
.bci-blue{background:rgba(0,122,255,.18)}.bci-green{background:rgba(52,199,89,.18)}.bci-purple{background:rgba(175,82,222,.18)}.bci-orange{background:rgba(255,159,10,.18)}.bci-red{background:rgba(255,59,48,.18)}.bci-teal{background:rgba(90,200,250,.18)}.bci-pink{background:rgba(255,45,85,.18)}.bci-indigo{background:rgba(88,86,214,.18)}.bci-brown{background:rgba(162,132,94,.2)}
.app-n{font-weight:600;font-size:15px}
.app-d{font-size:13px;color:var(--muted);line-height:1.6;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.app-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:6px}
.app-tags span{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--accent-soft);color:var(--accent2)}

/* ===== desktop (>=1100) ===== */
@media (min-width:1100px){
  .hello{left:calc(50% + 160px);top:40%}
  .hello img{width:168px;height:168px;border-width:3px}
  .hello-name{font-size:34px;margin-top:18px}
  .w-extra{display:none}
  .window{top:52px;bottom:104px;left:340px;right:150px;margin-inline:0;max-width:none}
  .window.is-max{top:var(--bar)!important;bottom:0!important;left:0!important;right:0!important;max-width:none;width:auto!important;height:auto!important;margin:0!important;border-radius:0}
  .window.is-moved{margin:0;max-width:none}
}

@media (min-width:1360px){
  .hello{left:calc(50% + 250px)}
  .w-extra{display:block}
  .widgets{grid-template-columns:repeat(2,290px)}
}
/* ===== tablet (700-1099): iPad home screen + large sheets ===== */
@media (max-width:1099px){
  :root{--dock-h:104px}
  .mb-menu{display:none}
  .hello{position:static;transform:none;margin:0 auto;padding-top:34px}
  .desktop{overflow:auto;padding:0 24px calc(var(--dock-h) + 20px);display:flex;flex-direction:column}
  .hello{order:1}.icons{order:2}.widgets{order:3}
  .widgets{position:static;max-width:700px;margin:28px auto 0;width:100%}
  .widgets{grid-template-columns:1fr 1fr}
  .w-extra{display:block}
  .icons{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:22px 26px;margin:26px auto 0;max-width:740px}
  .icon{width:92px}
  .tile{width:68px;height:68px;border-radius:17px}
  .tile svg{width:34px;height:34px}
  .dock .tile{width:56px;height:56px}
  .window{top:calc(var(--bar) + 12px);left:16px;right:16px;bottom:calc(var(--dock-h) - 4px);border-radius:20px}
  .win-body{grid-template-columns:200px minmax(0,1fr)}
  body:not(.page-home) .desktop{overflow:hidden}
}

/* ===== mobile (<700): iPhone-style home + full-screen apps ===== */
@media (max-width:699px){
  :root{--dock-h:88px}
  .mb-clock{display:none}
  .desktop{padding:0 16px calc(var(--dock-h) + 16px)}
  .hello{padding-top:22px}
  .hello img{width:76px;height:76px}
  .hello-name{font-size:24px}
  .hello-bio{display:none}
  .widgets{grid-template-columns:1fr;margin-top:16px}
  .icons{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 6px;margin-top:22px;max-width:360px;margin-inline:auto}
  .icon{width:100%}
  .tile{width:58px;height:58px;border-radius:15px}
  .tile svg{width:28px;height:28px}
  .lbl{font-size:11.5px}
  .dock{padding:8px 10px;gap:12px;bottom:max(10px,env(safe-area-inset-bottom))}
  .dock .tile{width:50px;height:50px}
  .dock .c-linkedin,.dock .c-github,.dock-sep{display:none}
  /* apps are full screen */
  .window{inset:var(--bar) 0 0 0;border-radius:0;border:0;animation:slide .22s ease-out}
  @keyframes slide{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
  body:not(.page-home) .dock{display:none}
  .titlebar{height:48px;cursor:default;padding:0 8px}
  .dots{display:none}
  .back{display:inline-flex;align-items:center;gap:2px;position:absolute;left:6px;padding:8px;color:var(--accent);font-size:15px}
  .back svg{width:22px;height:22px}
  .titlebar h1{font-size:15px;opacity:1}
  .win-body{display:flex;flex-direction:column}
  .win-side{padding:8px 10px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;flex:none}
  .side-h{display:none}
  .side-list{flex-direction:row;gap:8px}
  .side-item{padding:6px 12px;border-radius:99px;background:var(--win2);white-space:nowrap;font-size:13px}
  .side-item .si{display:none}
  .win-main{flex:1;padding:16px 14px calc(28px + env(safe-area-inset-bottom))}
  .row summary{padding:12px}
  .rd{display:none}
  .row-body{padding:2px 14px 14px 14px}
  .people,.grid{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .post a{grid-template-columns:84px minmax(0,1fr);gap:12px}
  .post img{width:84px;height:56px}
  .pm{grid-column:1 / -1;flex-direction:row;justify-content:space-between}
  .launchpad,.cards3{grid-template-columns:1fr}
  .stats{gap:20px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.menubar,.dock,.icons,.widgets,.wallpaper{display:none}body.desk{overflow:visible}.window{position:static;box-shadow:none}}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hello-sub{min-height:1.5em}
.hello-sub .cursor{margin-left:2px;opacity:.9;animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}

/* avatar fallback */
.av-init{display:inline-grid;place-items:center;flex:none;border-radius:50%;background:linear-gradient(145deg,var(--accent),var(--accent2));color:var(--on-accent);font-weight:600;font-size:15px;letter-spacing:.5px}
.w-av{display:inline-flex;flex:none}
.w-av img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.person .av-init{font-size:18px}

/* spotlight */
.mb-search{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 8px;border:0;border-radius:6px;background:none;color:var(--onwall);font:inherit;cursor:pointer}
.mb-search svg{width:16px;height:16px}
.mb-kbd{font:inherit;font-size:11.5px;opacity:.7;display:none}
@media (min-width:1100px){.mb-kbd{display:inline}}
.spot{position:fixed;inset:0;z-index:9500;background:var(--scrim);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:flex-start;padding:12vh 12px 0}
.spot-panel{width:min(640px,100%);background:var(--win);color:var(--text);border:1px solid var(--glass-line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;animation:pop .14s ease-out}
.spot-bar{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.spot-bar svg{width:20px;height:20px;flex:none;color:var(--muted)}
.spot-bar input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--text);font:inherit;font-size:17px}
.spot-bar kbd{font:inherit;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.spot-list{list-style:none;max-height:min(52vh,420px);overflow:auto;padding:6px}
.spot-h{padding:8px 12px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600}
.spot-item{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;cursor:pointer}
.spot-item[aria-selected="true"]{background:var(--accent);color:var(--on-accent)}
.spot-item .st{display:flex;flex-direction:column;min-width:0;flex:1}
.spot-item b{font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spot-item small{font-size:12px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spot-item .sb{font-size:11px;opacity:.75;white-space:nowrap;border:1px solid currentColor;border-radius:99px;padding:1px 8px;flex:none}
.spot mark{background:var(--mark);color:inherit;border-radius:3px}
.spot-empty{padding:22px;text-align:center;color:var(--muted);font-size:14px}
.spot-foot{display:flex;gap:16px;justify-content:flex-end;padding:8px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}
@media (max-width:699px){.spot{padding-top:48px}.spot-foot{display:none}}

/* theme switcher */
.mb-theme{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border:0;border-radius:6px;background:none;color:var(--onwall);font:inherit;cursor:pointer}
.mb-theme .th-e{font-size:14px;line-height:1}
.mb-theme .th-n{display:none;font-size:12.5px}
@media (min-width:1100px){.mb-theme .th-n{display:inline}}
.mb-themewrap{position:relative}
.theme-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:210px;padding:6px;list-style:none;background:var(--win);color:var(--text);border:1px solid var(--glass-line);border-radius:12px;box-shadow:var(--shadow);z-index:9600;animation:pop .12s ease-out}
.theme-menu button{display:flex;width:100%;align-items:center;gap:10px;padding:8px 10px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.theme-menu button:hover,.theme-menu button:focus-visible{background:var(--accent-soft)}
.theme-menu button[aria-checked="true"]{background:var(--accent);color:var(--on-accent)}
.theme-menu .te{font-size:16px;width:20px;text-align:center}
.theme-menu .tc{margin-left:auto;opacity:0}
.theme-menu button[aria-checked="true"] .tc{opacity:1}
.w-thumbs{grid-template-columns:repeat(3,1fr);gap:6px}
.w-thumbs img{aspect-ratio:16/9}

/* ===== glassmorphism ===== */
.wallpaper{overflow:hidden}
.wallpaper::before,.wallpaper::after{content:'';position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.wallpaper::before{width:62vmax;height:62vmax;left:52%;top:-24%;background:radial-gradient(circle at 50% 50%,var(--orb1),transparent 66%);animation:drift1 32s ease-in-out infinite alternate}
.wallpaper::after{width:56vmax;height:56vmax;left:-14%;top:42%;background:radial-gradient(circle at 50% 50%,var(--orb2),transparent 66%);animation:drift2 38s ease-in-out infinite alternate}
.wallpaper svg{z-index:1}
@keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-8vmax,9vmax,0) scale(1.12)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(10vmax,-7vmax,0) scale(1.1)}}
.window,.spot-panel,.theme-menu{backdrop-filter:blur(30px) saturate(1.7);-webkit-backdrop-filter:blur(30px) saturate(1.7);border-color:var(--glass-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.04),var(--shadow)}
.window.active,.window{background:var(--win)}
.titlebar{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border-bottom:1px solid var(--line)}
.win-side{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.rows,.card,.person,.app{backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.rows{background:var(--win2)}
.app{border-color:var(--line)}
.app:hover{border-color:var(--accent)}
.widget,.dock,.menubar{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 12px 34px rgba(0,0,0,.22)}
.menubar{box-shadow:inset 0 -1px 0 rgba(255,255,255,.05)}
.widget{backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6)}
.dock,.menubar{backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6)}
.post a:hover,.row summary:hover{background:var(--tint)}
.spot{backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root,:root[data-theme="dark"]{--win:hsl(220 22% 13%);--win2:hsl(220 18% 18%);--side:hsl(220 22% 10%)}
  :root[data-theme="light"]{--win:#fff;--win2:hsl(220 22% 96%);--side:hsl(220 25% 97.5%)}
  :root[data-theme="matrix"]{--win:hsl(120 100% 3%);--win2:hsl(120 100% 6%);--side:hsl(120 100% 2%)}
  :root[data-theme="high-contrast"]{--win:#000;--win2:hsl(0 0% 9%);--side:#000}
}
@media (prefers-reduced-motion:reduce){.wallpaper::before,.wallpaper::after{animation:none}}

/* glass toggle (menu) */
.tm-sep{height:1px;margin:6px 4px;background:var(--line);list-style:none}
.sw{position:relative;margin-left:auto;width:34px;height:20px;border-radius:99px;background:var(--line);border:1px solid var(--glass-line);transition:background .15s;flex:none}
.sw::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--text);transition:transform .15s}
[data-glass-toggle][aria-checked="true"] .sw{background:var(--accent);border-color:transparent}
[data-glass-toggle][aria-checked="true"] .sw::after{transform:translateX(14px);background:var(--on-accent)}
.theme-menu button[data-glass-toggle][aria-checked="true"]{background:none;color:inherit}
.theme-menu button[data-glass-toggle]:hover,.theme-menu button[data-glass-toggle]:focus-visible{background:var(--accent-soft)}

/* glass OFF: opaque surfaces, no blur, no orbs */
:root[data-glass="off"] *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
:root[data-glass="off"] .wallpaper::before,:root[data-glass="off"] .wallpaper::after{display:none}
:root[data-glass="off"],:root[data-glass="off"][data-theme="dark"]{--win:hsl(220 22% 13%);--win2:hsl(220 18% 18%);--side:hsl(220 22% 10%);--glass:hsl(220 24% 15%)}
:root[data-glass="off"][data-theme="light"]{--win:#fff;--win2:hsl(220 22% 96%);--side:hsl(220 25% 97.5%);--glass:rgba(244,248,255,.97)}
:root[data-glass="off"][data-theme="matrix"]{--win:hsl(120 100% 3%);--win2:hsl(120 100% 6%);--side:hsl(120 100% 2%);--glass:hsl(120 100% 4%)}
:root[data-glass="off"][data-theme="high-contrast"]{--win:#000;--win2:hsl(0 0% 9%);--side:#000;--glass:#000}
:root[data-glass="off"] .titlebar{background:var(--win2)}
:root[data-glass="off"] .window,:root[data-glass="off"] .widget,:root[data-glass="off"] .dock,:root[data-glass="off"] .spot-panel,:root[data-glass="off"] .theme-menu{box-shadow:var(--shadow)}

/* menus and search need more body so text stays readable over content */
.theme-menu,.spot-panel{background:hsla(220,24%,12%,.88)}
:root[data-theme="light"] .theme-menu,:root[data-theme="light"] .spot-panel{background:rgba(255,255,255,.9)}
:root[data-theme="matrix"] .theme-menu,:root[data-theme="matrix"] .spot-panel{background:rgba(0,14,0,.9)}
:root[data-theme="high-contrast"] .theme-menu,:root[data-theme="high-contrast"] .spot-panel{background:rgba(0,0,0,.95)}
:root[data-glass="off"] .theme-menu,:root[data-glass="off"] .spot-panel{background:var(--win)}

/* nested folders: sub-folders sit one step inside their parent */
.side-list .side-sub{position:relative;margin-left:16px;padding-left:8px;border-left:1px solid var(--line)}
.side-list .side-sub .side-item{padding:6px 10px;font-size:13px}
.side-list .side-sub .si{width:16px;height:16px}
.window{--ox:0px;--oy:0px}
.window:not(.is-moved):not(.is-max){transform:translate(var(--ox),var(--oy))}
.rz{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;z-index:3}
.window:not(.active){box-shadow:0 8px 24px rgba(0,0,0,.28)}
.window.is-min{display:none}
@media (max-width:1099px){.rz{display:none}.side-list .side-sub{margin-left:0;padding-left:0;border-left:0}}

/* native macOS cursors: arrow everywhere, pointing hand only on real links, like a Mac app */
.side-item,summary,.dot,.titlebar,[role="option"],.btn{cursor:default}
.rz{cursor:nwse-resize}
.rz::after{content:'';position:absolute;right:5px;bottom:5px;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);opacity:.6;border-radius:0 0 3px 0}