/* DaKota OS — an early-2000s desktop shell around the portfolio. */
:root {
  --xp-blue: #245edb;
  --xp-blue-dark: #0b2f8b;
  --xp-blue-light: #4e8df5;
  --xp-green: #3c9b28;
  --xp-panel: #ece9d8;
  --xp-shadow: #003d8f;
}

html,
body.desktop-mode {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body.desktop-mode {
  margin: 0;
  background: #087a8b;
}

.desktop-environment {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  font-family: Tahoma, Verdana, sans-serif;
  color: #fff;
  user-select: none;
}

.desktop-wallpaper {
  position: absolute;
  inset: 0 0 40px;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 18%, rgba(98, 238, 223, .25), transparent 24%),
    radial-gradient(circle at 25% 78%, rgba(9, 47, 106, .32), transparent 36%),
    linear-gradient(145deg, #073b77 0%, #087b8a 44%, #0b9f91 72%, #06567e 100%);
}

.wallpaper-orb {
  position: absolute;
  display: block;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  box-shadow: inset 0 0 80px rgba(255,255,255,.06), 0 0 80px rgba(2,30,72,.18);
}

.orb-one { width: 56vw; height: 56vw; right: -13vw; top: -21vw; }
.orb-two { width: 45vw; height: 45vw; left: 13vw; bottom: -32vw; }
.wallpaper-grid { position:absolute; inset:0; opacity:.12; background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(120deg,transparent 5%,#000 60%,transparent); }

.desktop-brand { position:absolute; right:5vw; bottom:90px; display:grid; grid-template-columns:auto auto; align-items:end; gap:0 9px; opacity:.9; text-shadow:0 2px 8px rgba(0,31,67,.4); }
.desktop-brand span { font-size:clamp(2rem,5vw,5.2rem); font-weight:300; letter-spacing:-.07em; line-height:.8; }
.desktop-brand strong { color:#ff7045; font-size:clamp(2rem,5vw,5.2rem); line-height:.8; }
.desktop-brand small { grid-column:1/-1; justify-self:end; margin-top:12px; font-size:12px; letter-spacing:.08em; color:rgba(255,255,255,.76); }

.desktop-icons { position:absolute; top:26px; left:18px; width:112px; }
.browser-shortcut { top:220px; }
.desktop-icon { width:112px; padding:8px 5px; display:flex; flex-direction:column; align-items:center; gap:7px; border:1px solid transparent; background:transparent; color:#fff; font:400 14px/1.2 Tahoma,Verdana,sans-serif; text-shadow:1px 1px 2px #00375c; border-radius:2px; touch-action:none; }
.desktop-icon:hover,.desktop-icon:focus-visible,.desktop-icon.selected { background:rgba(27,67,151,.42); border-color:rgba(190,220,255,.72); outline:none; }
.desktop-icon.is-dragging { background:rgba(27,67,151,.5); border-color:rgba(220,238,255,.88); filter:brightness(1.08); cursor:grabbing; }
.desktop-icon-image { width:62px; height:62px; display:grid; place-items:center; filter:drop-shadow(2px 3px 2px rgba(0,30,64,.45)); }
.desktop-icon-image img { width:58px; height:58px; }
.desktop-icon-label { padding:2px 4px; }
.desktop-icon.selected .desktop-icon-label { background:#0b4fbd; outline:1px dotted #fff; }
.desktop-instruction { position:static; margin:6px 0 0; width:100%; text-align:center; color:rgba(255,255,255,.88); font:12px/1.5 Tahoma,Verdana,sans-serif; text-shadow:1px 1px 2px #00375c; pointer-events:none; }
.desktop-touch-instruction { display:none; }

.desktop-taskbar { position:fixed; z-index:80; left:0; right:0; bottom:0; height:40px; display:flex; align-items:center; gap:3px; color:#fff; background:linear-gradient(#3169e7 0%,#1e52cd 50%,#1943b3 100%); border-top:2px solid #3f83f7; box-shadow:0 -1px #0b3a9e; font-family:Tahoma,Verdana,sans-serif; }
.start-button { align-self:stretch; min-width:106px; padding:0 15px 1px 10px; display:flex; align-items:center; gap:7px; color:#fff; border:0; border-radius:0 14px 14px 0; background:linear-gradient(#5eb34a,#2f8f27 56%,#1f7520); box-shadow:inset -2px 0 3px rgba(4,70,9,.6),inset 0 2px rgba(255,255,255,.3); font:italic 700 18px/1 Tahoma,Verdana,sans-serif; text-shadow:1px 1px #174c14; }
.start-button:hover,.start-button[aria-expanded="true"] { filter:brightness(1.08); }
.start-mark { width:25px; height:25px; display:grid; place-items:center; border-radius:4px; background:#fff; color:#2056c8; font:800 10px/1 Tahoma,sans-serif; text-shadow:none; transform:rotate(-3deg); }
.taskbar-divider { width:2px; height:30px; margin:0 7px; border-left:1px solid #123a9b; border-right:1px solid #5885ec; }
.taskbar-app { min-width:0; max-width:260px; flex:0 1 220px; height:31px; padding:0 10px; display:flex; align-items:center; gap:8px; color:#fff; background:linear-gradient(#245fc7,#17489f); border:1px solid #0d3790; border-radius:3px; box-shadow:inset 1px 1px rgba(255,255,255,.15); font:14px Tahoma,sans-serif; }
.taskbar-app span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.taskbar-app img { flex-shrink:0; }
.taskbar-app[hidden] { display:none; }
.taskbar-app img { width:21px; height:21px; }
.taskbar-app.active { background:#123c91; box-shadow:inset 1px 1px 2px rgba(0,0,0,.35); }
.system-tray { margin-left:auto; align-self:stretch; min-width:105px; padding:0 12px; display:flex; align-items:center; justify-content:flex-end; gap:10px; background:linear-gradient(#20a5e8,#1183cd 55%,#0d73bd); border-left:1px solid #0f4da3; box-shadow:inset 1px 0 rgba(255,255,255,.25); font:12px Tahoma,sans-serif; }
.tray-status { color:#6dff6a; font-size:10px; text-shadow:0 0 5px #fff; }

.start-menu { position:fixed; z-index:81; left:0; bottom:40px; width:min(390px,calc(100vw - 12px)); max-height:calc(100dvh - 40px); overflow:auto; color:#151515; background:var(--xp-panel); border:2px solid #1748b5; border-radius:8px 8px 0 0; box-shadow:5px -5px 18px rgba(0,25,86,.35); transform:translateY(calc(100% + 48px)); visibility:hidden; transition:transform .16s ease,visibility .16s; font-family:Tahoma,Verdana,sans-serif; }
.start-menu.open { transform:none; visibility:visible; }
.start-menu-user { min-height:72px; padding:10px 13px; display:flex; align-items:center; gap:12px; color:#fff; background:linear-gradient(90deg,#1452bd,#3d82eb); border-radius:5px 5px 0 0; }
.start-menu-user img { width:48px; height:48px; border:2px solid #fff; border-radius:5px; }
.start-menu-user strong { font-size:18px; text-shadow:1px 1px #123b80; }
.start-menu-links { padding:10px 7px; background:#fff; }
.start-menu-links a,.start-menu-links button { width:100%; min-height:58px; padding:7px 10px; display:flex; align-items:center; gap:12px; color:#191919; text-decoration:none; border:0; background:transparent; text-align:left; font-family:Tahoma,sans-serif; }
.start-menu-links a:hover,.start-menu-links button:hover { color:#fff; background:#316ac5; }
.start-menu-links img,.shortcut-glyph { width:36px; height:36px; flex:0 0 auto; }
.shortcut-glyph { display:grid; place-items:center; color:#fff; background:#2862bc; border-radius:4px; font-weight:700; }
.start-menu-links span:last-child { display:grid; gap:3px; }
.start-menu-links strong { font-size:14px; }
.start-menu-links small { font-size:11px; color:#626262; }
.start-menu-links :is(a,button):hover small { color:#eaf2ff; }
.start-menu-footer { padding:8px 12px; color:#fff; background:linear-gradient(90deg,#1452bd,#3d82eb); font-size:11px; text-align:right; }
.start-menu-footer span { color:#70ff6d; }

.portfolio-app { position:fixed; z-index:20; top:26px; left:max(26px,calc((100vw - 1180px)/2)); right:auto; bottom:auto; width:min(1180px,calc(100vw - 52px)); height:calc(100dvh - 100px); display:flex; flex-direction:column; overflow:hidden; contain:layout paint; color:#111; background:var(--xp-panel); border:3px solid var(--xp-blue); border-radius:8px 8px 2px 2px; box-shadow:0 14px 45px rgba(0,24,75,.48),inset 0 0 0 1px #76a8ff; }
.portfolio-app.is-closed,.portfolio-app.is-minimized { visibility:hidden; pointer-events:none; }
.portfolio-titlebar { flex:0 0 34px; padding:3px 4px 3px 7px; display:flex; align-items:center; justify-content:space-between; color:#fff; background:linear-gradient(#4b91fb 0%,#1f62dc 18%,#1050c7 70%,#1745aa 100%); border-bottom:1px solid #063282; text-shadow:1px 1px #0b3385; font:12px Tahoma,Verdana,sans-serif; }
.portfolio-titlebar { touch-action:none; user-select:none; min-width:0; font-size:14px; }
.portfolio-titlebar:focus-visible { outline:2px dotted white; outline-offset:-3px; }
.portfolio-titlebar img,.desktop-icon img { -webkit-user-drag:none; user-select:none; }
.desktop-dragging,.desktop-dragging * { user-select:none !important; }
.desktop-dragging .portfolio-window-body,.desktop-dragging .browser-pages { pointer-events:none; }
.portfolio-app:not(.active-window) .portfolio-titlebar { filter:saturate(.65); }
.portfolio-app:not(.maximized) .portfolio-titlebar { cursor:move; }
.portfolio-app.is-dragging { transition:none; }
.portfolio-title { display:flex; align-items:center; gap:7px; min-width:0; }
.portfolio-title img { width:22px; height:22px; border-radius:3px; }
.portfolio-title strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.window-actions { display:flex; align-items:center; gap:3px; }
.window-actions button { width:26px; height:25px; padding:0 0 3px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#6ba2f4,#1d5dcc); border:1px solid #fff; border-radius:3px; box-shadow:inset 1px 1px rgba(255,255,255,.35),1px 1px #10327d; font:700 16px/1 Tahoma,sans-serif; text-shadow:1px 1px #0c347c; }
.window-actions button:hover { filter:brightness(1.16); }
.window-actions .window-close { background:linear-gradient(135deg,#f29d7f,#d84022 60%,#a51e08); }
.portfolio-window-body { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; background:var(--ink); scroll-behavior:smooth; scroll-padding-top:88px; }
.portfolio-window-body .site-header { position:sticky; top:0; }
.portfolio-app .scroll-progress { position:absolute; top:34px; left:0; }
.portfolio-window-body .mobile-menu { top:36px; height:calc(100% - 36px); }
.portfolio-app.maximized { inset:0 0 40px; width:auto; height:auto; border-width:0; border-radius:0; }
.portfolio-app.maximized .portfolio-titlebar { flex-basis:36px; }
.portfolio-app.maximized .scroll-progress { top:36px; }

@media (max-width:650px) {
  .desktop-brand { right:18px; bottom:82px; }
  .desktop-brand span,.desktop-brand strong { font-size:2.4rem; }
  .desktop-brand small { font-size:10px; }
  .portfolio-app { inset:5px 5px 45px; width:auto; height:auto; border-width:2px; }
  .portfolio-app.maximized { inset:0 0 40px; width:auto; height:auto; }
  .taskbar-app { min-width:0; flex:1; }
  .taskbar-app span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .system-tray { min-width:72px; padding:0 8px; }
  .start-button { min-width:82px; padding-inline:8px; }
  .taskbar-divider { margin-inline:2px; }
  .taskbar-app { padding-inline:6px; }
  .window-actions button { width:32px; height:30px; }
  .portfolio-titlebar { flex-basis:40px; }
}

@media (pointer:coarse) {
  .desktop-mouse-instruction { display:none; }
  .desktop-touch-instruction { display:inline; }
}

.browser-app { top:56px; left:max(40px,calc((100vw - 960px)/2)); width:min(960px,calc(100vw - 80px)); height:calc(100dvh - 130px); font-family:Tahoma,Verdana,sans-serif; }
.browser-toolbar { display:flex; align-items:center; gap:8px; padding:9px; color:#242424; background:#ece9d8; border-bottom:1px solid #c5c1af; font-size:14px; }
.browser-toolbar label { flex-shrink:0; }
.browser-toolbar input { width:100%; min-width:0; padding:7px; color:#252525; background:white; border:1px solid #8d99a4; box-shadow:inset 1px 1px 2px #0002; font:14px Tahoma,sans-serif; cursor:text; }
.browser-toolbar a { flex-shrink:0; padding:8px 12px; border:1px solid #8493a4; border-radius:3px; color:#172f5e; background:linear-gradient(#fff,#e0e6ed); font-size:14px; font-weight:bold; text-decoration:none; }
.browser-toolbar a:hover { background:#fff; border-color:#2868ce; }
.browser-tabs { display:flex; gap:4px; padding:8px 10px 0; background:#ece9d8; border-bottom:1px solid #9dabc0; }
.browser-tabs button { padding:10px 24px; border:1px solid #9dabc0; border-bottom:0; border-radius:5px 5px 0 0; color:#45546a; background:#d7dce3; font:14px Tahoma,sans-serif; }
.browser-tabs button[aria-selected="true"] { color:#162b48; background:#fff; box-shadow:inset 0 3px #efa83c; }
.browser-pages { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; color:#20252a; background:#fff; font-family:Arial,sans-serif; font-size:16px; line-height:1.6; }
.profile-page { min-height:100%; background:white; }
.profile-service { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 24px; border-bottom:1px solid #d4dae2; color:#24292f; }
.profile-service > strong { font-size:23px; letter-spacing:-1px; }
.profile-service > span { font-size:12px; color:#576474; }
.github-profile-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:28px; padding:28px; }
.profile-avatar { display:block; object-fit:cover; border-radius:50%; border:1px solid #cdd4de; background:white; }
.github-profile-summary .profile-avatar { width:min(100%,180px); height:auto; aspect-ratio:1; margin-bottom:18px; }
.profile-page h2 { margin:0; color:#24292f; font:700 25px/1.2 Arial,sans-serif; letter-spacing:-.6px; }
.profile-page h3 { margin:0 0 16px; color:#24292f; font:600 20px/1.3 Arial,sans-serif; }
.profile-page h4 { margin:0 0 5px; color:#24292f; font:600 16px/1.4 Arial,sans-serif; }
.profile-page p { margin:10px 0; }
.profile-page .profile-handle { margin:4px 0 18px; font-size:20px; color:#57606a; }
.profile-page .profile-metadata { font-size:13px; color:#576474; line-height:1.6; }
.browser-repo-list { display:grid; gap:12px; }
.browser-repo { padding:18px; border:1px solid #d0d7de; border-radius:6px; overflow-wrap:anywhere; }
.browser-repo h4 a { color:#0969da; text-decoration:none; }
.browser-repo h4 a:hover { text-decoration:underline; }
.browser-repo p { font-size:14px; line-height:1.6; }
.linkedin-page { background:#f3f2ef; padding-bottom:24px; }
.linkedin-page .profile-service { background:white; }
.linkedin-page .profile-service > strong { color:#0a66c2; }
.linkedin-page .profile-service strong span { padding:0 2px; margin-left:2px; background:#0a66c2; color:white; border-radius:2px; }
.linkedin-cover { height:115px; margin:22px 24px 0; border-radius:8px 8px 0 0; background:linear-gradient(110deg,#164b70,#548d9c); }
.linkedin-profile-card { padding:0 24px 20px; margin:0 24px 16px; border:1px solid #ddd; border-top:0; border-radius:0 0 8px 8px; background:white; }
.linkedin-profile-card .profile-avatar { position:relative; width:110px; height:110px; margin-top:-44px; margin-bottom:16px; border:4px solid white; }
.linkedin-profile-card p { margin:6px 0; }
.linkedin-section { margin:16px 24px; padding:22px 24px; border:1px solid #ddd; border-radius:8px; background:white; }
.profile-entry { padding:16px 0; border-top:1px solid #e2e4e8; }
.profile-entry p { margin:2px 0; }
.browser-status { padding:7px 10px; display:flex; justify-content:space-between; gap:16px; color:#424b56; background:#ece9d8; border-top:1px solid #b7bac3; font:12px/1.5 Tahoma,sans-serif; }
.browser-app :focus-visible,.desktop-taskbar :focus-visible,.start-menu :focus-visible { outline:2px solid #eeab39; outline-offset:-3px; }

@media (max-width:800px) {
  .github-profile-layout { grid-template-columns:1fr; padding:20px; gap:24px; }
  .github-profile-summary .profile-avatar { width:110px; }
}
@media (max-width:650px) {
  .browser-app { inset:5px 5px 45px; width:auto; height:auto; }
  .browser-toolbar { flex-wrap:wrap; gap:6px; }
  .browser-toolbar label { display:none; }
  .browser-toolbar input { flex:1 1 120px; width:120px; font-size:14px; }
  .browser-toolbar a { padding:9px 8px; font-size:13px; }
  .browser-status { display:block; }
  .browser-status span { display:block; }
  .profile-service { padding:12px 16px; }
  .profile-service > span { max-width:135px; text-align:right; }
  .linkedin-cover { margin:16px 12px 0; }
  .linkedin-profile-card { margin:0 12px 12px; padding-inline:18px; }
  .linkedin-section { margin:12px; padding:18px; }
}

@media (prefers-reduced-motion:reduce) {
  .portfolio-app,.start-menu { transition:none; }
}