/* ==========================================================================
   Windows 11 desktop shell + VS Code IDE portfolio experience.
   ========================================================================== */

:root {
  --font-ui: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Fira Code", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

  --taskbar-h: 48px;

  /* Windows chrome */
  --win-accent: #8b5cf6;
  --win-accent-tint: #a78bfa;
  --win-glass: rgba(32, 34, 40, 0.55);
  --win-glass-strong: rgba(20, 22, 27, 0.78);
  --win-border: rgba(255, 255, 255, 0.1);

  /* VS Code Dark+ palette */
  --vsc-bg: #1e1e1e;
  --vsc-sidebar-bg: #181818;
  --vsc-titlebar-bg: #23262b;
  --vsc-activitybar-bg: #17181c;
  --vsc-tabbar-bg: #1a1a1a;
  --vsc-tab-active-bg: #1e1e1e;
  --vsc-statusbar-bg: #0e639c;
  --vsc-border: rgba(255, 255, 255, 0.08);
  --vsc-text: #d4d4d4;
  --vsc-text-muted: #8a8a8a;
  --vsc-key: #9cdcfe;
  --vsc-string: #ce9178;
  --vsc-punct: #d4d4d4;
  --vsc-comment: #6a9955;
  --vsc-number: #b5cea8;
  --vsc-func: #dcdcaa;
  --vsc-keyword: #569cd6;
  --vsc-type: #4ec9b0;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Design-system panel tokens — reused by every modal/popover for consistency */
  --panel-bg: #14161f;
  --panel-bg-2: #0d0f14;
  --panel-border: var(--win-border);
  --panel-radius: 14px;
  --panel-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

/* ---------------- Global scrollbars ---------------- */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #3a3d4a;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #4a4d5c;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #3a3d4a transparent;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font-ui);
  background: #0b0e14;
  color: var(--vsc-text);
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: #fff;
  color: #000;
  padding: 0.6rem 1rem;
  border-radius: 6px;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* ---------------- Desktop ---------------- */
.desktop {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--taskbar-h));
  overflow: hidden;
}

.wallpaper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  background-image: url("../assets/images/os/wallpaper.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  transform: scale(1.015);
  animation: wallpaperDrift 50s ease-in-out infinite alternate;
}

/* A very subtle breathing effect — scale never drops below 1.0 (so the
   image always fully covers the viewport, no matter its aspect ratio)
   and never drifts far enough to reveal an edge. */
@keyframes wallpaperDrift {
  from { transform: scale(1.015); }
  to { transform: scale(1.035); }
}

.wallpaper-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 6, 12, 0.15) 0%, rgba(4, 6, 12, 0.05) 40%, rgba(4, 6, 12, 0.35) 100%);
}

/* ---------------- Boot overlay ---------------- */
.boot-overlay {
  position: absolute;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background: #05070c;
  animation: bootFadeOut 600ms var(--ease-out) 1600ms forwards;
}

.boot-overlay[hidden] {
  display: none;
}

@keyframes bootFadeOut {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

.boot-logo-mark {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 600;
  color: #eef1f7;
  letter-spacing: 0.02em;
}

.boot-spinner {
  display: flex;
  gap: 8px;
}

.boot-spinner span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--win-accent);
  animation: bootPulse 1s ease-in-out infinite;
}

.boot-spinner span:nth-child(2) { animation-delay: 0.1s; }
.boot-spinner span:nth-child(3) { animation-delay: 0.2s; }
.boot-spinner span:nth-child(4) { animation-delay: 0.3s; }
.boot-spinner span:nth-child(5) { animation-delay: 0.4s; }

@keyframes bootPulse {
  0%, 60%, 100% { transform: scale(1); opacity: 0.5; }
  30% { transform: scale(1.5); opacity: 1; }
}

/* Desktop content fades/slides in after boot */
[data-boot-reveal] {
  opacity: 0;
  transform: translateY(10px);
  animation: revealIn 600ms var(--ease-out) 2000ms forwards;
}

@keyframes revealIn {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .wallpaper { animation: none; }
  .boot-overlay { animation-delay: 200ms; animation-duration: 200ms; }
  [data-boot-reveal] { animation-delay: 250ms; }
}

/* ---------------- Desktop widgets (clock, status) ---------------- */
.desktop-widgets {
  position: absolute;
  top: 1.5rem;
  right: 1.75rem;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
  text-align: right;
}

.widget-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: var(--win-glass);
  border: 1px solid var(--win-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #f2f2f2;
  font-size: 0.8rem;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #39d98a;
  box-shadow: 0 0 6px #39d98a;
  flex-shrink: 0;
}

/* ---------------- Desktop icons ---------------- */
.desktop-icons {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 5;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(6, 84px);
  grid-auto-columns: 84px;
  gap: 0.25rem;
}

@media (max-width: 760px) {
  .desktop-icons { top: .75rem; left: .5rem; grid-template-rows: repeat(3, 76px); grid-auto-columns: 68px; }

}

.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 84px;
  padding: 0.6rem 0.4rem;
  border-radius: 8px;
  text-align: center;
}

.desktop-icon:hover,
.desktop-icon:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

.desktop-icon:active {
  background: rgba(139, 92, 246, 0.22);
}

.desktop-icon-glyph {
  font-size: 1.9rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.desktop-icon-label {
  font-size: 0.72rem;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  word-break: break-word;
  line-height: 1.25;
}

/* ---------------- IDE window ---------------- */
.ide-window {
  position: absolute;
  inset: 3vh 4vw;
  z-index: 20;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background: var(--vsc-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: scale(0.94) translateY(24px);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}

.ide-window[hidden] {
  display: none;
}

.ide-window.is-open {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.ide-window.is-minimized {
  opacity: 0;
  transform: scale(0.5) translateY(60vh);
  pointer-events: none;
}

.ide-window.is-maximized {
  inset: 0;
  border-radius: 0;
}

.ide-titlebar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding-inline: 0.75rem;
  background: var(--vsc-titlebar-bg);
  border-bottom: 1px solid var(--vsc-border);
  cursor: default;
  user-select: none;
}

.ide-titlebar-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--vsc-text-muted);
  min-width: 0;
}

.ide-mobile-menu-btn {
  display: none;
  flex-shrink: 0;
  font-size: 0.95rem;
  color: var(--vsc-text-muted);
  padding: 0.2rem 0.4rem;
}

.ide-titlebar-controls {
  display: flex;
  align-items: center;
}

/* ---------------- Menu bar (decorative) ---------------- */
.ide-menubar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.4rem 0.9rem;
  font-size: 0.76rem;
  color: var(--vsc-text-muted);
  background: var(--vsc-titlebar-bg);
  border-bottom: 1px solid var(--vsc-border);
}

.ide-menubar span:hover {
  color: #fff;
}

@media (max-width: 760px) {
  .ide-menubar { display: none; }
}

/* ---------------- Breadcrumbs ---------------- */
.ide-breadcrumbs {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 1rem;
  font-size: 0.74rem;
  color: var(--vsc-text-muted);
  background: var(--vsc-bg);
  border-bottom: 1px solid var(--vsc-border);
  min-height: 28px;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.ide-breadcrumbs::-webkit-scrollbar {
  display: none;
}

.ide-breadcrumbs .crumb-sep {
  opacity: 0.5;
}

.ide-breadcrumbs .crumb-current {
  color: var(--vsc-text);
}

.ide-win-btn {
  width: 44px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--vsc-text-muted);
}

.ide-win-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.ide-win-btn-close:hover {
  background: #e81123;
  color: #fff;
}

.ide-body {
  flex: 1;
  min-height: 0;
  display: flex;
}

.ide-activitybar {
  flex-shrink: 0;
  width: 46px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-block: 0.6rem;
  background: var(--vsc-activitybar-bg);
  border-right: 1px solid var(--vsc-border);
}

.activity-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.activity-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--win-accent);
  color: #042033;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

.activity-btn {
  position: relative;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--vsc-text-muted);
  border-radius: 6px;
  opacity: 0.7;
}

.activity-btn:hover {
  opacity: 1;
}

.activity-btn.is-active {
  opacity: 1;
  color: #fff;
  box-shadow: inset 2px 0 0 var(--win-accent);
}

.ide-sidebar {
  flex-shrink: 0;
  width: 300px;
  overflow-y: auto;
  background: var(--vsc-sidebar-bg);
  border-right: 1px solid var(--vsc-border);
  padding-bottom: 1rem;
}

.ide-sidebar-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vsc-text-muted);
  padding: 0.9rem 1rem 0.4rem;
}

.ide-sidebar-section {
  border-top: 1px solid var(--vsc-border);
  margin-top: 0.5rem;
}

.ide-sidebar-collapsible {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.55rem 0.9rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--vsc-text);
}

.ide-sidebar-collapsible:hover {
  background: rgba(255, 255, 255, 0.06);
}

.collapse-chevron {
  transition: transform 150ms var(--ease-out);
}

.ide-sidebar-collapsible.is-collapsed .collapse-chevron {
  transform: rotate(0deg);
}

.ide-sidebar-collapsible:not(.is-collapsed) .collapse-chevron {
  transform: rotate(90deg);
}

.ide-sidebar-collapsible-body {
  padding: 0.2rem 1rem 0.9rem 1.65rem;
  font-size: 0.72rem;
  color: var(--vsc-text-muted);
  line-height: 1.5;
}

.ide-sidebar-collapsible.is-collapsed + .ide-sidebar-collapsible-body {
  display: none;
}

.ide-tree-root {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--vsc-text);
  padding: 0.3rem 0.75rem;
}

.ide-tree,
.ide-tree-nested {
  list-style: none;
  font-size: 0.78rem;
}

.ide-tree-nested {
  margin-left: 0.9rem;
  overflow: hidden;
  max-height: 400px;
  transition: max-height 220ms var(--ease-out);
}

.tree-folder.is-collapsed + .ide-tree-nested {
  max-height: 0;
}

.tree-file,
.tree-folder {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.32rem 0.75rem 0.32rem 1.4rem;
  color: var(--vsc-text-muted);
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-folder {
  padding-left: 0.75rem;
  color: var(--vsc-text);
}

.tree-file:hover,
.tree-folder:hover {
  background: rgba(255, 255, 255, 0.06);
}

.tree-file.is-active {
  background: rgba(139, 92, 246, 0.14);
  color: #fff;
}

.file-ico {
  vertical-align: -3px;
  margin-right: 0.4rem;
  flex-shrink: 0;
}

/* ---------------- Editor / tabs ---------------- */
.ide-editor {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ide-tabbar {
  flex-shrink: 0;
  display: flex;
  overflow-x: auto;
  background: var(--vsc-tabbar-bg);
  border-bottom: 1px solid var(--vsc-border);
  scrollbar-width: thin;
}

.ide-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.55rem 0.9rem;
  font-size: 0.78rem;
  color: var(--vsc-text-muted);
  background: var(--vsc-tabbar-bg);
  border-right: 1px solid var(--vsc-border);
  white-space: nowrap;
}

.ide-tab.is-active {
  background: var(--vsc-tab-active-bg);
  color: #fff;
  box-shadow: inset 0 2px 0 var(--win-accent);
}

.ide-tab-close {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-size: 0.9rem;
  line-height: 1;
  opacity: 0.6;
}

.ide-tab-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.12);
}

.ide-panes {
  flex: 1;
  min-height: 0;
  position: relative;
}

.ide-pane {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 1.5rem clamp(1rem, 3vw, 2.5rem);
}

.ide-pane[hidden] {
  display: none;
}

.ide-pane-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr);
  gap: 2rem;
  align-items: start;
}

/* ---------------- Code typography ---------------- */
.code-block {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--vsc-text);
}

pre.code-block {
  margin: 0;
}

/* ---------------- Resume (code-styled, two-column) ---------------- */
.resume-pane {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  align-items: start;
}

.resume-photo {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--vsc-border);
  margin-bottom: 1rem;
}

.resume-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.resume-enums {
  margin-bottom: 1rem;
}

.resume-left .preview-btn {
  display: block;
  text-align: center;
}

@media (max-width: 900px) {
  .resume-pane {
    grid-template-columns: 1fr;
  }
  .resume-photo {
    width: 140px;
  }
}

.ln {
  color: var(--vsc-text-muted);
  display: inline-block;
  width: 2rem;
  text-align: right;
  margin-right: 1.1rem;
  user-select: none;
}

.tok-key { color: var(--vsc-key); }
.tok-string { color: var(--vsc-string); }
.tok-punct { color: var(--vsc-punct); }
.tok-comment { color: var(--vsc-comment); font-style: italic; }
.tok-number { color: var(--vsc-number); }
.tok-func { color: var(--vsc-func); }
.tok-keyword { color: var(--vsc-keyword); }
.tok-type { color: var(--vsc-type); }

.is-streaming::after {
  content: "▍";
  color: #fff;
  animation: blink 0.9s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ---------------- Live preview card ---------------- */
.preview-card {
  position: sticky;
  top: 0;
  height: min(640px, 74vh);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
  overflow: hidden;
  transition: border-color 200ms var(--ease-out);
}

.preview-card:hover {
  border-color: var(--win-accent);
}

/* Browser-tab chrome standing in for a real embedded preview. */
.preview-browser-tabs {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: 0.3rem;
  padding: 0.6rem 0.6rem 0;
  background: var(--panel-bg-2);
}

.preview-browser-tab {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 200px;
  padding: 0.5rem 0.9rem;
  border-radius: 8px 8px 0 0;
  background: var(--panel-bg);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--vsc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-browser-tab-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #39d98a;
  animation: previewPulse 1.8s ease-in-out infinite;
}

@keyframes previewPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.preview-browser-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--panel-border);
}

.preview-browser-nav {
  color: var(--vsc-text-muted);
  font-size: 0.8rem;
  line-height: 1;
}

.preview-browser-url {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--vsc-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-browser-url svg {
  flex-shrink: 0;
  color: #39d98a;
}

.preview-card-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.4rem;
}

.preview-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 0.9rem;
  padding: 2px;
  background: var(--win-accent);
}

.preview-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #17181c;
}

.preview-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}

.preview-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.6rem;
}

.preview-contribution {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--win-accent);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg-2);
  white-space: nowrap;
}

.preview-role {
  font-size: 0.83rem;
  color: var(--win-accent);
  margin-top: 0.2rem;
  font-weight: 500;
}

.preview-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(57, 217, 138, 0.12);
  font-size: 0.7rem;
  font-weight: 600;
  color: #39d98a;
}

.preview-quote {
  position: relative;
  margin-top: 1.1rem;
  padding: 1rem 1.1rem 1rem 1.4rem;
  border-radius: 10px;
  background: rgba(139, 92, 246, 0.06);
  border-left: 3px solid var(--win-accent);
  font-size: 0.81rem;
  color: var(--vsc-text);
  line-height: 1.65;
  font-style: italic;
}

.preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.1rem;
}

.preview-tag {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--vsc-text-muted);
}

.preview-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-top: 1.35rem;
}

.preview-stat {
  text-align: center;
  padding: 0.7rem 0.3rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 150ms var(--ease-out), border-color 150ms var(--ease-out);
}

.preview-stat:hover {
  transform: translateY(-2px);
  border-color: rgba(139, 92, 246, 0.3);
}

.preview-stat strong {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--win-accent);
}

.preview-stat span {
  font-size: 0.64rem;
  color: var(--vsc-text-muted);
}

/* Flat glyph tile standing in for a project screenshot. */
.preview-icon-tile {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  border-radius: 14px;
  background: var(--panel-bg-2);
  border: 1px solid var(--panel-border);
  margin-bottom: 0.9rem;
}

.preview-category-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--win-accent);
  margin-bottom: 0.35rem;
}

/* Contact.env — same flat bordered-tile recipe as the Expertise grid. */
.contact-method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.contact-method-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 0.4rem;
  border-radius: 12px;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--panel-border);
  transition: border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.contact-method-card:hover {
  border-color: var(--win-accent);
  transform: translateY(-2px);
}

.contact-method-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  border-radius: 10px;
  background: var(--panel-bg-2);
}

.contact-method-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
}

.preview-links {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

/* Secondary/disabled tier: muted, de-emphasized, no hover animation. */
.preview-btn {
  flex: 1;
  order: 1;
  text-align: center;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--vsc-text-muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Primary tier: dark fill, light text, subtle (non-animated) hover shift. */
.preview-btn.is-primary {
  order: 2;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.preview-btn.is-primary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--win-accent);
}

.preview-metric-row {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

/* ---------------- Terminal-style pane (skills / contact) ---------------- */
.terminal-pane {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.8;
}

.terminal-prompt {
  color: #39d98a;
}

.terminal-cmd {
  color: #fff;
}

/* ---------------- IDE boot/loading sequence ---------------- */
.ide-boot-terminal {
  height: 100%;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.7;
}

.ide-boot-cmd {
  color: #fff;
}

.ide-boot-cursor {
  display: inline-block;
  color: var(--win-accent);
  animation: bootCursorBlink 1s step-end infinite;
}

@keyframes bootCursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.ide-boot-log {
  margin-top: 0.9rem;
  white-space: pre-wrap;
  color: var(--vsc-text-muted);
  font-size: 0.8rem;
}

.ide-boot-log[hidden] {
  display: none;
}

.ide-reload-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 16, 21, 0.55);
  opacity: 0;
  transition: opacity 140ms var(--ease-out);
}

.ide-reload-overlay.is-visible {
  opacity: 1;
}

.ide-reload-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--win-accent);
  animation: bootSpin 700ms linear infinite;
}

@keyframes bootSpin {
  to { transform: rotate(360deg); }
}

.skill-bar-track {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.skill-bar-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--win-accent), var(--win-accent-tint));
  width: 0%;
  transition: width 900ms var(--ease-out);
}

/* ---- Skills page ---- */
.skills-pane {
  font-size: 0.85rem;
}

.skills-terminal-line {
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.skills-terminal-log {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--vsc-text-muted);
  margin: 0.5rem 0 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--vsc-border);
}

.skills-group {
  margin-bottom: 1.75rem;
}

.skills-group-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--win-accent);
  margin-bottom: 0.85rem;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.9rem;
}

.skill-card {
  padding: 0.9rem 1rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--vsc-border);
  transition: border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.skill-card:hover {
  border-color: var(--win-accent);
  transform: translateY(-2px);
}

.skill-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.skill-card-name {
  font-weight: 600;
  color: #fff;
  font-size: 0.83rem;
}

.skill-card-level {
  flex-shrink: 0;
  font-size: 0.68rem;
  color: var(--vsc-text-muted);
}

/* Experience — git-log style */
.commit-row {
  display: flex;
  gap: 0.9rem;
  padding: 0.85rem 0;
  border-bottom: 1px dashed var(--vsc-border);
}

.commit-row:last-child {
  border-bottom: none;
}

.commit-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--win-accent);
  margin-top: 0.4rem;
}

.commit-hash {
  color: var(--vsc-comment);
}

.commit-msg {
  color: #fff;
  font-weight: 600;
  margin-top: 0.15rem;
}

.commit-meta {
  color: var(--vsc-text-muted);
  font-size: 0.76rem;
  margin-top: 0.2rem;
}

/* Experience.json — Live Preview timeline, same flat bordered-row recipe. */
.exp-preview-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.exp-preview-row {
  padding: 0.8rem 0.9rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--panel-border);
  transition: border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.exp-preview-row:hover {
  border-color: var(--win-accent);
  transform: translateX(2px);
}

.exp-preview-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.exp-preview-company {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}

.exp-preview-period {
  flex-shrink: 0;
  font-size: 0.68rem;
  color: var(--vsc-text-muted);
}

.exp-preview-role {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--win-accent);
  margin-top: 0.15rem;
}

.exp-preview-note {
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--vsc-text-muted);
  margin-top: 0.3rem;
}

/* Contact links */
.contact-line {
  display: block;
}

.contact-line a {
  color: var(--vsc-string);
}

.contact-line a:hover {
  text-decoration: underline;
}

/* ---------------- DIJA assistant alert (shares the one site-wide accent) ---------------- */
:root {
  --dija-accent: #8b5cf6;
  --dija-accent-2: #a78bfa;
}

.dija-backdrop {
  position: fixed;
  inset: 0;
  z-index: 7;
  background: rgba(6, 8, 12, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.dija-backdrop[hidden] {
  display: none;
}

.dija-alert {
  position: fixed;
  top: 1rem;
  right: 1rem;
  bottom: calc(var(--taskbar-h) + 1rem);
  left: auto;
  z-index: 220;
  display: flex;
  flex-direction: column;
  width: min(430px, calc(100vw - 2rem));
  max-height: calc(100dvh - var(--taskbar-h) - 2rem);
  padding: 1rem;
  overflow: hidden;
  background: var(--panel-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  border-radius: var(--panel-radius);
  color: #fff;
  /* Baked into every keyframe below so the centering transform never gets
     clobbered by the animation's own transform values. */
  animation: dijaSideIn 280ms var(--ease-out) both;
}

.dija-alert[hidden] {
  display: none;
}

@keyframes dijaSideIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .dija-alert {
    animation: none;
    transform: none;
  }
}

/* Traffic-light titlebar, like a code editor window. */
.dija-alert-controls {
  display: flex; align-items: center; gap: .5rem; flex-shrink: 0;
  margin: 0 0 .8rem; padding: 0 0 .7rem; border-bottom: 1px solid var(--panel-border);
}
.dija-alert-controls::before { content: "DIJA · AI Assistant"; order: 0; margin-right: auto; color: #e8e7f2; font-size: .9rem; font-weight: 700; }
.dija-alert-controls::after { display: none; }
.dija-alert-close { order: 3; width: 30px; height: 30px; font-size: 18px; color: #fff; background: rgba(255,95,87,.92); }
.dija-alert-min { order: 2; width: 30px; height: 30px; font-size: 18px; color: #fff; background: rgba(255,255,255,.12); }

.dija-alert-controls::after {
  content: "";
  order: 3;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #28c840;
}

.dija-alert-min,
.dija-alert-close {
  width: 11px;
  height: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: rgba(0, 0, 0, 0.55);
  font-size: 0;
  line-height: 1;
  transition: font-size 150ms var(--ease-out);
}

.dija-alert-close { order: 1; background: #ff5f57; }
.dija-alert-min { order: 2; background: #febc2e; }



.dija-alert-top {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.dija-alert-avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(126deg, #151417, var(--dija-accent-2));
  /* box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.16); */
  animation: dijaBob 2.6s ease-in-out infinite;
}

@keyframes dijaBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.dija-alert-body {
  flex: 1;
  min-width: 0;
  padding-right: 1.5rem;
  padding-top: 0.3rem;
}

.dija-alert-name {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: linear-gradient(90deg, var(--dija-accent), var(--dija-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.3rem;
}

.dija-alert-text {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--vsc-comment);
  min-height: 3.1em;
}

.dija-alert-text::before {
  content: "// ";
}

.dija-alert-prompts {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 1.4rem;
}

.dija-prompt {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--panel-border);
  color: var(--vsc-string);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  animation: dijaPromptIn 400ms var(--ease-out) forwards;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.dija-prompt::before {
  content: "$ ";
  color: var(--vsc-comment);
  flex-shrink: 0;
}

.dija-prompt:nth-child(1) { animation-delay: 2.0s; }
.dija-prompt:nth-child(2) { animation-delay: 2.15s; }
.dija-prompt:nth-child(3) { animation-delay: 2.3s; }
.dija-prompt:nth-child(4) { animation-delay: 2.45s; }

@keyframes dijaPromptIn {
  to { opacity: 1; transform: translateY(0); }
}

.dija-prompt::after {
  content: "›";
  margin-left: auto;
  color: var(--dija-accent);
  font-size: 1.1rem;
}

.dija-prompt:hover {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.16), rgba(139, 92, 246, 0.05));
  border-color: var(--dija-accent);
  transform: translateX(2px);
}

/* ---- Minimized launcher ---- */
.dija-mini {
  position: fixed;
  right: 1.5rem;
  bottom: calc(var(--taskbar-h) + 1.25rem);
  z-index: 9;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:linear-gradient(126deg, #151417, var(--dija-accent-2));
  /* box-shadow: 0 10px 30px rgba(167, 139, 250, 0.4); */
  animation: dijaBob 2.6s ease-in-out infinite;
}

.dija-mini[hidden] {
  display: none;
}

.dija-mini:hover {
  box-shadow: 0 12px 36px rgba(167, 139, 250, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .dija-alert-avatar,
  .dija-mini { animation: none; }
  .dija-prompt { animation: none; opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .dija-alert {
    width: calc(100vw - 2rem);
    padding: 1.5rem 1.4rem 1.75rem;
  }
}

/* ---------------- DIJA carousel ---------------- */
.dija-carousel {
  position: fixed;
  inset: 0 0 var(--taskbar-h) 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: rgba(9, 11, 16, 0.94);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  color: #fff;
  transform: translateX(100%);
  transition: transform 340ms var(--ease-out);
}

.dija-carousel[hidden] {
  display: none;
}

.dija-carousel.is-open {
  transform: translateX(0);
}

.dija-carousel-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
  border-bottom: 1px solid var(--win-border);
}

.dija-carousel-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
}

.dija-carousel-back:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dija-carousel-title {
  flex: 1;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
}

.dija-carousel-spacer {
  width: 84px;
}

.dija-carousel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(1rem, 2vw, 1.5rem);
}

.dija-panel {
  max-width: 1320px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ---- Projects panel ---- */
.dija-project-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.9rem 1.2rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--win-border);
  cursor: pointer;
  text-align: left;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.dija-project-row:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--dija-accent);
  transform: translateX(2px);
}

.dija-project-thumb {
  flex-shrink: 0;
  width: 140px;
  aspect-ratio: 16/10;
  border-radius: 8px;
  overflow: hidden;
  background: #14161c;
}

.dija-project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dija-project-thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.dija-project-info {
  flex: 1;
  min-width: 0;
}

.dija-project-info-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.dija-project-name {
  font-size: 1.05rem;
  font-weight: 700;
}

.dija-project-chevron {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.5);
  transform: rotate(-90deg);
}

.dija-project-tagline {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 0.2rem;
}

.dija-project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.6rem;
}

.dija-project-tag {
  font-size: 0.68rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--vsc-text-muted);
}

/* ---- Project detail drawer (slides in from the left) ---- */
.project-drawer-backdrop {
  position: fixed;
  inset: 0 0 var(--taskbar-h) 0;
  z-index: 69;
  background: rgba(0, 0, 0, 0.001);
}

.project-drawer-backdrop[hidden] {
  display: none;
}

/* ---- Shared traffic-light dots, reused across drawer/modal titlebars ---- */
.win-dot {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  border-radius: 50%;
}

.win-dot-red { background: #ff5f57; }
.win-dot-yellow { background: #febc2e; }
.win-dot-green { background: #28c840; }

/* The red dot doubles as the real close control — glyph-free, like macOS. */
button.win-dot-red {
  display: inline-flex;
  transition: filter 150ms var(--ease-out);
}

button.win-dot-red:hover {
  filter: brightness(1.2);
}

.project-drawer {
  position: fixed;
  left: 0;
  top: 0;
  bottom: var(--taskbar-h);
  z-index: 70;
  width: min(94vw, 1600px);
  display: flex;
  flex-direction: column;
  background: var(--panel-bg-2);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-right: 1px solid var(--panel-border);
  box-shadow: 24px 0 60px rgba(0, 0, 0, 0.45);
  color: #fff;
  transform: translateX(-100%);
  transition: transform 300ms var(--ease-out);
  overflow: hidden;
}

.project-drawer[hidden] {
  display: none;
}

.project-drawer.is-open {
  transform: translateX(0);
}

.project-drawer-titlebar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.3rem;
  border-bottom: 1px solid var(--panel-border);
}

/* Image stays put; only .project-drawer-scroll below it moves. */
.project-drawer-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.project-drawer-thumb-card {
  flex-shrink: 0;
  margin: 1.5rem clamp(1.5rem, 4vw, 3.5rem) 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
}

.project-drawer-thumb-dots {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--panel-border);
  background: var(--panel-bg-2);
}

.project-drawer-thumb {
  width: 100%;
  max-height: 38vh;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.08), #14161c 75%);
}

.project-drawer-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.project-drawer-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 clamp(1.5rem, 4vw, 3.5rem) 3rem;
}

.project-drawer-name {
  font-size: 1.6rem;
  font-weight: 800;
  margin-top: 1.5rem;
}

.project-drawer-tagline {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 0.35rem;
}

.dija-project-detail-inner {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--win-border);
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}

.dija-project-detail-inner h4 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--win-accent);
  margin-top: 1rem;
  margin-bottom: 0.4rem;
}

.dija-project-detail-inner h4:first-child {
  margin-top: 0;
}

.dija-project-detail-inner ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.dija-project-detail-inner li::before {
  content: "— ";
  color: var(--win-accent);
}

.dija-project-detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.85rem;
}

.dija-project-detail-links a {
  flex: 1;
  min-width: 140px;
  text-align: center;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--vsc-text-muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.project-drawer-nav {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--panel-border);
}

/* ---- Experience panel ---- */
.dija-exp-row {
  display: flex;
  gap: 1.25rem;
  padding: 1.1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--win-border);
}

.dija-exp-logo {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
}

.dija-exp-role {
  font-size: 1rem;
  font-weight: 700;
}

.dija-exp-company {
  font-size: 0.85rem;
  color: var(--win-accent);
  margin-top: 0.1rem;
}

.dija-exp-period {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.15rem;
}

.dija-exp-desc {
  font-size: 0.84rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 0.5rem;
}

/* ---- Expertise panel ---- */
.dija-expertise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.1rem;
}

.dija-expertise-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 1.6rem 1rem;
  min-height: 150px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--win-border);
  text-align: center;
  transition: transform 180ms var(--ease-out), background 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.dija-expertise-tile:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--dija-accent);
}

.dija-expertise-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
}

.dija-expertise-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dija-expertise-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 640px) {
  .dija-project-row {
    flex-direction: column;
  }
  .dija-project-thumb {
    width: 100%;
  }
}

/* ---------------- Start Menu ---------------- */
.start-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(0, 0, 0, 0.001); /* invisible but click-catching, matches real Win11 (no dim) */
}

.start-backdrop[hidden] {
  display: none;
}

.start-menu {
  position: fixed;
  left: 50%;
  bottom: calc(var(--taskbar-h) + 10px);
  z-index: 151;
  width: min(1440px, 90vw);
  height: 90vh;
  max-height: calc(100vh - var(--taskbar-h) - 20px);
  display: flex;
  flex-direction: column;
  border-radius: var(--panel-radius);
  overflow: hidden;
  background: var(--win-glass-strong);
  backdrop-filter: blur(36px);
  -webkit-backdrop-filter: blur(36px);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  color: #fff;
  transform: translate(-50%, 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}

.start-menu[hidden] {
  display: flex; /* keep animatable; visibility handled by is-open */
}

.start-menu.is-open {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

/* Traffic-light titlebar strip, matching the DIJA card treatment. */
.start-menu-dots {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem clamp(1.4rem, 3vw, 3rem) 0.9rem;
  border-bottom: 1px solid var(--panel-border);
}

.start-menu-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.start-menu-dots span:nth-child(1) { background: #ff5f57; }
.start-menu-dots span:nth-child(2) { background: #febc2e; }
.start-menu-dots span:nth-child(3) { background: #28c840; }

.start-search {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: clamp(1rem, 2.5vh, 1.6rem) clamp(1.4rem, 3vw, 3rem) 1.2rem;
  padding: 0.8rem 1.2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}

.start-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.95rem;
}

.start-search input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.start-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 clamp(1.4rem, 3vw, 3rem) 2rem;
}

.start-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.6rem;
}

/* "Pinned" row hidden per request — kept in the DOM so JS wiring (search
   filter, tile clicks) stays intact; just not shown. */
.start-body > .start-section-head:first-child,
#startPinnedGrid {
  display: none;
}

.start-body > .start-section-head:nth-child(3) {
  margin-top: 0 !important;
}

.start-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 0.35rem;
}

.start-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0.3rem;
  border-radius: 8px;
  text-align: center;
  color: #fff;
}

.start-tile:hover {
  background: rgba(255, 255, 255, 0.1);
}

.start-tile-glyph {
  font-size: 1.6rem;
}

.start-tile-label {
  font-size: 0.68rem;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.85);
}

.start-recent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.1rem;
  padding-bottom: 0.5rem;
}

.start-recent-item {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--panel-border);
  text-align: left;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out);
}

.start-recent-item:hover {
  transform: translateY(-4px) rotate(0deg);
  border-color: var(--win-accent);
}

.start-recent-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Small phone-mockup silhouette standing in for a real screenshot. */
.start-recent-phone {
  width: 96px;
  height: 152px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.9rem 0.7rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3);
}

.start-recent-phone-glyph {
  font-size: 1.9rem;
  line-height: 1;
}

.start-recent-phone-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(20, 20, 30, 0.14);
}

.start-recent-phone-bar.short {
  width: 55%;
}

.start-recent-badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  color: #fff;
  background: rgba(13, 15, 20, 0.75);
  backdrop-filter: blur(6px);
  border: 1px solid var(--panel-border);
}

.start-recent-info {
  padding: 0.85rem 1rem 1rem;
}

.start-recent-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.start-recent-sub {
  font-size: 0.76rem;
  color: var(--vsc-text-muted);
  margin-top: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.start-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.15);
}

.start-profile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
}

.start-profile:hover {
  background: rgba(255, 255, 255, 0.1);
}

.start-profile img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.start-power {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
}

.start-power:hover {
  background: rgba(255, 255, 255, 0.1);
}

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

/* ---------------- Taskbar ---------------- */
/* Real Windows 11 layout: Start + Search + pinned apps form a single group
   that sits dead-center on the bar, with the tray pinned to the right — not
   Start/Search stuck at the left edge. A matching empty spacer on the left
   is what keeps the center group visually centered against the right tray. */
.taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  height: var(--taskbar-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-inline: 0.5rem;
  background: var(--win-glass-strong);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--win-border);
}

.taskbar-spacer {
  min-width: 0;
}

.taskbar-center {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.taskbar-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  font-size: 1.1rem;
  color: #fff;
  flex-shrink: 0;
}

.taskbar-start:hover {
  background: rgba(255, 255, 255, 0.1);
}

.taskbar-search {
  display: none;
  align-items: center;
  gap: 0.5rem;
  height: 32px;
  padding: 0 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.78rem;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .taskbar-search { display: inline-flex; }
}

.taskbar-search:hover {
  background: rgba(255, 255, 255, 0.1);
}

.taskbar-pinned {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.taskbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  color: #fff;
  position: relative;
  flex-shrink: 0;
}

.taskbar-icon svg {
  display: block;
}

.taskbar-icon:hover {
  background: rgba(255, 255, 255, 0.1);
}

.taskbar-icon.is-running::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--win-accent);
}

.taskbar-tray {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding-right: 0.4rem;
  color: #fff;
}

.tray-battery {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.5rem;
  border-radius: 4px;
  opacity: 0.9;
}

.tray-icon-svg {
  display: block;
  flex-shrink: 0;
}

.tray-fullscreen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  color: #fff;
  opacity: 0.9;
}

.tray-fullscreen:hover {
  background: rgba(255, 255, 255, 0.1);
  opacity: 1;
}

/* ---------------- Small-screen fullscreen nudge ---------------- */
.fs-nudge {
  position: fixed;
  left: 50%;
  bottom: calc(var(--taskbar-h) + 1rem);
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem 0.7rem 1.1rem;
  border-radius: 10px;
  background: var(--win-glass-strong);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--win-border);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 0.8rem;
  max-width: calc(100vw - 2rem);
}

.fs-nudge[hidden] {
  display: none;
}

.fs-nudge button {
  flex-shrink: 0;
}

#fsNudgeBtn {
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: var(--win-accent);
  color: #06121f;
  font-weight: 700;
  font-size: 0.76rem;
}

#fsNudgeDismiss {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.6);
}

#fsNudgeDismiss:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ---------------- Social link confirm modal ---------------- */
.social-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(6, 8, 12, 0.55);
  backdrop-filter: blur(4px);
}

.social-modal-backdrop[hidden] {
  display: none;
}

.social-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 211;
  width: min(500px, calc(100vw - 3rem));
  border-radius: var(--panel-radius);
  background: var(--panel-bg);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.social-modal[hidden] {
  display: none;
}

.social-modal-titlebar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.1rem 0.9rem;
  border-bottom: 1px solid var(--panel-border);
  text-align: left;
}

.social-modal-icon {
  width: 56px;
  height: 56px;
  margin: 1.6rem auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}

.social-modal-icon svg {
  display: block;
}

.social-modal-title {
  font-size: 1.05rem;
  font-weight: 800;
  padding: 0 1.75rem;
}

.social-modal-text {
  margin-top: 0.5rem;
  margin-bottom: 1.3rem;
  padding: 0 1.75rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
}

.social-modal .dija-prompt {
  margin: 0 1.75rem 1.75rem;
}

/* ---------------- Resume PDF viewer modal ---------------- */
.pdf-modal-backdrop {
  position: fixed;
  inset: 0 0 var(--taskbar-h) 0;
  z-index: 220;
  background: rgba(6, 8, 12, 0.7);
}

.pdf-modal-backdrop[hidden] {
  display: none;
}

.pdf-modal {
  position: fixed;
  left: 50%;
  top: 3vh;
  transform: translateX(-50%);
  z-index: 221;
  width: min(90vw, 900px);
  height: calc(100vh - var(--taskbar-h) - 6vh);
  display: flex;
  flex-direction: column;
  border-radius: var(--panel-radius);
  overflow: hidden;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
  color: #fff;
}

.pdf-modal[hidden] {
  display: none;
}

.pdf-modal-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--win-border);
}

.pdf-modal-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.pdf-modal-actions a {
  color: var(--win-accent);
  font-weight: 600;
  font-size: 0.8rem;
}

.pdf-modal-actions a:hover {
  text-decoration: underline;
}

#pdfModalClose {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1rem;
}

#pdfModalClose:hover {
  background: rgba(255, 255, 255, 0.1);
}

.pdf-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--panel-bg-2);
}

.pdf-modal-loading {
  margin: auto;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
}

.pdf-modal-body canvas {
  max-width: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ---------------- Scrollbars (Chromium/Edge — Firefox uses scrollbar-width above) ---------------- */
.ide-pane::-webkit-scrollbar-corner {
  background: transparent;
}

/* ---------------- PDF preview pane (Resume.pdf) ---------------- */
.pdf-pane {
  height: calc(100% - 3rem);
  min-height: 480px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--vsc-border);
  background: #525659;
}

.pdf-embed {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.pdf-fallback {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
  color: var(--vsc-text-muted);
  font-family: var(--font-ui);
  font-size: 0.85rem;
}

.pdf-fallback .preview-btn {
  flex: none;
}

.pdf-fallback code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--vsc-text);
}

.tray-battery:hover {
  background: rgba(255, 255, 255, 0.1);
}

.tray-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-size: 0.72rem;
  color: #fff;
  line-height: 1.35;
}

.tray-clock:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 760px) {
  .desktop-icons {
    grid-template-rows: repeat(6, auto);
  }

  .desktop-widgets {
    left: 6.5rem;
    right: 1rem;
    align-items: flex-end;
  }

  .widget-status {
    font-size: 0.68rem;
    padding: 0.35rem 0.65rem;
    white-space: normal;
    text-align: right;
  }

  .ide-window {
    inset: 0;
    border-radius: 0;
  }

  .ide-activitybar { display: none; }

  .ide-mobile-menu-btn { display: inline-flex; }

  .ide-titlebar-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ide-sidebar {
    position: absolute;
    inset: 0 20% 0 0;
    z-index: 5;
    transform: translateX(-100%);
    transition: transform 200ms var(--ease-out);
  }

  .ide-sidebar.is-open {
    transform: translateX(0);
  }

  .ide-pane-split {
    grid-template-columns: 1fr;
  }

  .preview-card {
    position: static;
  }

  .taskbar-pinned {
    justify-content: flex-start;
    overflow-x: auto;
  }
}


/* ---------------- DIJA question guide: polished, compact, accessible ---------------- */
/* About: editorial information hierarchy, no decorative gradients */
.about-highlights { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0; }
.about-highlight { border:1px solid #30343e; background:#191c25; border-radius:9px; padding:14px; min-width:0; }
.about-highlight-label { display:block; color:#a8a0c9; font:600 10px/1.5 var(--font-mono); letter-spacing:.09em; margin-bottom:9px; }
.about-highlight strong { display:block; color:#f2f1f6; font-size:13px; line-height:1.45; }
.about-highlight p { margin-top:8px; color:#aeb2bd; font-size:12px; line-height:1.65; }
.about-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.about-action { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:8px 12px; border:1px solid #3a3c48; border-radius:7px; color:#e5e6eb; font-size:12px; font-weight:600; background:#1c1f28; transition:background .18s,border-color .18s; }
.about-action:hover { background:#292d38; border-color:#8b78c7; }
.about-action:focus-visible { outline:2px solid #b6a0ff; outline-offset:3px; }
.about-action-primary { background:#7153bb; border-color:#7153bb; color:white; }
.about-action-primary:hover { background:#8062c8; }
@media(max-width:650px) { .about-highlights { grid-template-columns:1fr; } .about-actions { flex-direction:column; } .about-action { width:100%; } }
@media(prefers-reduced-motion:reduce) { .about-action { transition:none; } }

/* Portfolio content polish: make the About story and its actions visible together */
.preview-card-body:has(.about-highlights) { padding: 1rem; }
.preview-card-body:has(.about-highlights) .preview-avatar { width: 54px; height: 54px; margin-bottom: .55rem; }
.preview-card-body:has(.about-highlights) .preview-name { font-size: 1.04rem; }
.preview-card-body:has(.about-highlights) .preview-status { margin-top: .45rem; }
.preview-card-body:has(.about-highlights) .preview-quote { margin-top: .7rem; padding: .75rem .85rem .75rem 1rem; font-size: .76rem; line-height: 1.5; }
.preview-card-body:has(.about-highlights) .about-highlights { gap: 8px; margin: .7rem 0; }
.preview-card-body:has(.about-highlights) .about-highlight { padding: 10px; }
.preview-card-body:has(.about-highlights) .about-highlight-label { margin-bottom: 5px; font-size: 9px; }
.preview-card-body:has(.about-highlights) .about-highlight strong { font-size: 12px; }
.preview-card-body:has(.about-highlights) .about-highlight p { margin-top: 5px; font-size: 11px; line-height: 1.45; }
.preview-card-body:has(.about-highlights) .preview-tags { gap: 5px; margin-top: .65rem; }
.preview-card-body:has(.about-highlights) .preview-tag { font-size: 10px; padding: 4px 8px; }
.preview-card-body:has(.about-highlights) .about-actions { gap: 7px; margin-top: .8rem; }
.preview-card-body:has(.about-highlights) .about-action { min-height: 32px; padding: 6px 10px; font-size: 11px; }
.dija-project-detail-inner { margin-top: 1rem; padding: 1rem; border: 1px solid var(--panel-border); border-radius: 9px; background: var(--panel-bg-2); }
.dija-project-detail-inner h4 { margin: 0 0 .6rem; font-size: .78rem; color: var(--vsc-text); letter-spacing: .02em; }
.dija-project-detail-inner ul { margin: 0; padding-left: 1.1rem; color: var(--vsc-text-muted); font-size: .75rem; line-height: 1.65; }
.dija-project-detail-inner li + li { margin-top: .25rem; }
.preview-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:1rem; }
.preview-links .preview-btn { display:inline-flex; align-items:center; justify-content:center; min-height:34px; }
@media(max-height:760px) { .preview-card-body:has(.about-highlights) { padding: .8rem; } .preview-card-body:has(.about-highlights) .about-highlight p { line-height:1.35; } }
@media(max-width:650px) { .preview-card-body:has(.about-highlights) .about-highlights { grid-template-columns:1fr; } }

/* Project previews: visual, evidence-based case-study layout */
.project-preview-hero { position:relative; overflow:hidden; border:1px solid var(--panel-border); border-radius:10px; margin-bottom:1rem; background:#101219; }
.project-preview-image { display:block; width:100%; height:148px; object-fit:cover; object-position:center; }
.project-preview-fallback { min-height:130px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:var(--vsc-text-muted); background:#191c24; font-size:11px; }
.project-preview-fallback span:first-child { font-size:30px; }
.project-preview-hero-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:7px; padding:9px 11px; border-top:1px solid var(--panel-border); color:var(--vsc-text-muted); font-size:10px; }
.project-preview-status { display:inline-flex; align-items:center; gap:5px; }
.project-preview-status i { width:6px; height:6px; border-radius:50%; background:#39d98a; }
.project-preview-title { align-items:flex-start; margin-top:4px; }
.project-preview-description { color:var(--vsc-text-muted); font-size:12px; line-height:1.65; margin:12px 0 15px; }
.project-preview-section-label { display:block; margin:14px 0 7px; color:var(--vsc-text-muted); font:600 9px/1.5 var(--font-mono); letter-spacing:.1em; }
.project-architecture { margin-top:13px; padding:12px; border-left:2px solid var(--win-accent); background:var(--panel-bg-2); border-radius:0 7px 7px 0; }
.project-architecture p { color:var(--vsc-text-muted); font-size:11px; line-height:1.6; }
.project-preview-hero img[hidden], .project-preview-fallback[hidden] { display:none !important; }
@media(max-width:650px) { .project-preview-image { height:120px; } .project-preview-hero-meta { font-size:9px; } }


/* DIJA Projects: launchable project applications instead of a long list */
.dija-project-app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); align-content: start; gap: 1rem; }
.dija-project-app-hint { grid-column: 1 / -1; margin: 0 0 .15rem; color: var(--vsc-text-muted); font-size: .85rem; }
.dija-project-app-card {
  display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: .55rem; padding: .9rem;
  text-align: left; border: 1px solid var(--win-border); border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  transition: transform 160ms var(--ease-out), border-color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.dija-project-app-card:hover, .dija-project-app-card:focus-visible { transform: translateY(-2px); border-color: var(--dija-accent); background: rgba(255,255,255,.075); outline: none; }
.dija-project-app-icon {
  position: relative; display: grid; place-items: center; width: 100%; height: 112px; overflow: hidden;
  border-radius: 9px; border: 1px solid rgba(255,255,255,.12); background: #171a22;
}
.dija-project-app-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dija-project-app-icon.is-fallback { background: linear-gradient(135deg, rgba(139,92,246,.25), #171a22); }
.dija-project-app-fallback { font-size: 2rem; }
.dija-project-app-name { color: var(--vsc-text); font-size: .95rem; font-weight: 700; }
.dija-project-app-tagline { min-height: 2.7em; color: var(--vsc-text-muted); font-size: .76rem; line-height: 1.4; }
.dija-project-app-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.dija-project-app-tags span { padding: .2rem .4rem; border: 1px solid var(--win-border); border-radius: 999px; color: var(--vsc-text-muted); font-size: .62rem; }
.dija-project-app-open { display: flex; width: 100%; justify-content: space-between; margin-top: auto; padding-top: .45rem; color: var(--dija-accent); font-size: .72rem; font-weight: 600; }
@media (max-width: 600px) {
  .dija-project-app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .dija-project-app-card { padding: .65rem; }
  .dija-project-app-icon { height: 82px; }
}


/* Four desktop quick-launch apps mirror DIJA navigation */
.desktop-quick-apps {
  position: absolute;
  top: 1.35rem;
  right: 1.5rem;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(4, minmax(76px, 94px));
  gap: .55rem;
}
.desktop-quick-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  padding: .6rem .4rem;
  color: #f7f7fb;
  font-size: .72rem;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(18,20,27,.34);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.desktop-quick-app:hover,.desktop-quick-app:focus-visible {
  background: rgba(35,38,48,.82);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-2px);
  outline: none;
}
.desktop-quick-app-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 1.45rem;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 7px 18px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.24);
}
.quick-projects { background: linear-gradient(145deg,#8b5cf6,#5b3cc4); }
.quick-experience { background: linear-gradient(145deg,#0ea5e9,#155eaa); }
.quick-expertise { background: linear-gradient(145deg,#10b981,#047857); }
.quick-explore { background: linear-gradient(145deg,#f59e0b,#c2410c); }
@media(max-width:760px) {
  .desktop-quick-apps {
    top: .7rem; right: .5rem;
    grid-template-columns: repeat(2, minmax(66px, 76px));
    gap: .25rem;
  }
  .desktop-quick-app { padding: .35rem .2rem; font-size: .63rem; gap: .25rem; }
  .desktop-quick-app-icon { width: 32px; height: 32px; border-radius: 9px; font-size: 1.1rem; }
}

/* DIJA right-side chat panel */
.dija-alert[hidden] { display:none !important; }
.dija-backdrop { display:none !important; }
.dija-alert-top { flex-shrink:0; gap:.75rem; }
.dija-alert-top .dija-alert-avatar { width:42px; height:42px; }
.dija-alert-text { min-height:0; margin:0; font-size:.8rem; }
.dija-chat { display:flex; flex:1; min-height:0; flex-direction:column; margin-top:.8rem; }
.dija-chat-intro { margin:0 0 .65rem; color:#aeb2c1; font-size:.78rem; line-height:1.5; }
.dija-chat-messages { display:flex; flex:1; min-height:100px; flex-direction:column; gap:.65rem; overflow-y:auto; padding:.15rem .15rem .75rem 0; scrollbar-width:thin; }
.dija-chat-message { max-width:94%; white-space:pre-wrap; overflow-wrap:anywhere; padding:.72rem .82rem; border-radius:13px; font-size:.82rem; line-height:1.55; }
.dija-chat-message.assistant { align-self:flex-start; color:#e6e7ef; background:rgba(255,255,255,.065); border:1px solid rgba(255,255,255,.08); border-top-left-radius:4px; }
.dija-chat-message.user { align-self:flex-end; color:#fff; background:rgba(124,88,235,.28); border:1px solid rgba(167,139,250,.3); border-top-right-radius:4px; }
.dija-chat-form { display:flex; align-items:flex-end; gap:.55rem; flex-shrink:0; padding:.6rem; border:1px solid rgba(255,255,255,.14); border-radius:15px; background:rgba(6,8,13,.82); }
.dija-chat-form textarea { flex:1; min-width:0; max-height:120px; resize:none; border:0; outline:0; color:#f5f5fa; background:transparent; font:inherit; font-size:16px; line-height:1.45; }
.dija-chat-form textarea::placeholder { color:#7f8494; }
.dija-chat-form button { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; border-radius:11px; color:#fff; background:#7c55e8; font-size:1.1rem; }
.dija-chat-form button:disabled { opacity:.55; cursor:wait; }
.dija-chat-footnote { flex-shrink:0; margin:.5rem 0 0; color:#777d8d; font-size:.65rem; line-height:1.4; }
.taskbar { height: calc(var(--taskbar-h) + 8px); }
.taskbar-nav-app { width:auto; min-width:72px; height:48px; padding:3px 7px; flex-direction:column; gap:2px; }
.taskbar-nav-glyph { display:grid; place-items:center; width:25px; height:25px; border-radius:7px; color:#fff; font-size:1.1rem; line-height:1; }
.nav-projects { background:#7651dc; } .nav-experience { background:#087fb8; } .nav-expertise { background:#07865e; } .nav-explore { background:#c76a08; }
.taskbar-nav-label { font-size:.78rem; line-height:1.1; color:rgba(255,255,255,.94); }
@media(max-width:760px) {
 .dija-alert { top:.5rem; right:.5rem; bottom:calc(var(--taskbar-h) + .5rem); width:calc(100vw - 1rem); max-height:calc(100dvh - var(--taskbar-h) - 1rem); padding:.8rem; }
 .taskbar-nav-app { min-width:48px; padding:2px 3px; }
 .taskbar-nav-label { font-size:.65rem; }
 .taskbar-nav-glyph { width:22px; height:22px; }
}


/* Premium Windows portfolio release styles. Keep these component overrides in one place. */

/* Taskbar: equal hit areas, consistent icon sizing, and labels on hover/focus only */
.taskbar-pinned { align-items:center; gap:4px; }
.taskbar-center { gap:6px; }
.taskbar-pinned .taskbar-icon {
  position:relative; display:inline-flex; flex:0 0 42px; width:42px; min-width:42px; height:42px;
  padding:0; align-items:center; justify-content:center; border:1px solid transparent;
  border-radius:10px; background:transparent;
  transition:background 140ms ease,border-color 140ms ease,transform 140ms ease;
}
.taskbar-pinned .taskbar-icon:hover,
.taskbar-pinned .taskbar-icon:focus-visible {
  background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.13);
  transform:translateY(-2px); outline:none;
}
.taskbar-pinned .taskbar-icon svg { display:block; width:23px; height:23px; flex:0 0 23px; }
.taskbar-pinned .taskbar-nav-app { position:relative; }
.taskbar-pinned .taskbar-nav-app .taskbar-nav-glyph {
  display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px;
  border-radius:8px; font-size:19px; line-height:1;
}
.taskbar-pinned .taskbar-nav-label {
  position:absolute; left:50%; bottom:calc(100% + 9px); z-index:20;
  transform:translate(-50%,4px); padding:6px 9px; border:1px solid rgba(255,255,255,.14);
  border-radius:7px; color:#fff; background:rgba(18,20,28,.97);
  font-size:12px; line-height:1; white-space:nowrap; opacity:0; visibility:hidden;
  pointer-events:none; transition:opacity 120ms ease,transform 120ms ease,visibility 120ms ease;
}
.taskbar-pinned .taskbar-nav-app:hover .taskbar-nav-label,
.taskbar-pinned .taskbar-nav-app:focus-visible .taskbar-nav-label {
  opacity:1; visibility:visible; transform:translate(-50%,0);
}
.taskbar-pinned .taskbar-nav-app:hover .taskbar-nav-glyph,
.taskbar-pinned .taskbar-nav-app:focus-visible .taskbar-nav-glyph { filter:brightness(1.13); }
.dija-alert-controls::before { content:"DIJA · AI Assistant"; }
.dija-alert-controls .dija-alert-min { display:none !important; }
.dija-alert-controls .dija-alert-close {
  order:3; width:30px; height:30px; border-radius:8px; font-size:0;
  color:#fff; background:transparent;
}
.dija-alert-controls .dija-alert-close::before { content:"×"; font-size:25px; font-weight:400; line-height:1; }
.dija-alert-controls .dija-alert-close:hover { background:rgba(255,255,255,.1); }
.dija-alert-controls::after { display:none !important; }
.dija-alert .dija-ask,
.dija-alert-top,
.dija-chat-intro,
.dija-chat-footnote { display:none !important; }
.dija-chat-messages { padding:.25rem .2rem .85rem 0; gap:.7rem; }
.dija-chat-message.assistant:first-child {
  border-color:rgba(167,139,250,.2);
  background:linear-gradient(135deg,rgba(167,139,250,.09),rgba(255,255,255,.045));
}

/* Experience and Expertise open as right-side panels, not a full-screen carousel */
.dija-carousel.is-sidepanel {
  inset:0 0 var(--taskbar-h) auto; width:min(560px,calc(100vw - 1rem));
  border-left:1px solid rgba(255,255,255,.14); box-shadow:-22px 0 70px rgba(0,0,0,.4);
  background:rgba(14,16,23,.98); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
}
.dija-carousel.is-sidepanel .dija-carousel-header { padding:.9rem 1rem; }
.dija-carousel.is-sidepanel .dija-carousel-title { text-align:left; padding-left:.75rem; }
.dija-carousel.is-sidepanel .dija-carousel-spacer { display:none; }
.dija-carousel.is-sidepanel .dija-carousel-body { padding:1rem; }
.dija-carousel.is-sidepanel .dija-panel { gap:.75rem; }
.dija-carousel.is-sidepanel .dija-exp-row,
.dija-carousel.is-sidepanel .dija-expertise-tile { border-radius:13px; }
.dija-carousel.is-sidepanel .dija-exp-row { padding:.9rem; gap:.8rem; background:rgba(255,255,255,.045); }
.dija-carousel.is-sidepanel .dija-exp-desc { line-height:1.55; }
.dija-carousel.is-sidepanel .dija-expertise-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.dija-carousel.is-sidepanel .dija-expertise-tile { min-height:94px; padding:.85rem .6rem; background:rgba(255,255,255,.045); }

/* VS Code-inspired editor and browser preview: balanced columns, no detached sticky card */
.ide-pane-split {
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(1rem,1.8vw,1.65rem); align-items:stretch;
}
.ide-pane-split .code-block {
  min-width:0; max-width:100%; overflow:auto; overscroll-behavior:contain;
  padding:clamp(.9rem,1.3vw,1.2rem); border:1px solid rgba(255,255,255,.075);
  border-radius:12px; background:#17191f; line-height:1.75;
  font-size:clamp(.73rem,.78vw,.82rem);
}
.ide-pane-split .preview-card {
  position:relative; top:auto; width:100%; min-width:0; height:auto;
  min-height:420px; max-height:min(690px,calc(100dvh - 180px));
  border-radius:14px; border-color:rgba(255,255,255,.1);
  background:#13151c; box-shadow:0 14px 36px rgba(0,0,0,.2);
}
.ide-pane-split .preview-card-body {
  min-width:0; padding:clamp(.9rem,1.35vw,1.25rem); overflow-x:hidden;
}
.ide-pane-split .preview-name,
.ide-pane-split .preview-tag,
.project-architecture p { overflow-wrap:anywhere; }
.ide-pane-split .preview-tags { gap:.4rem; }
.project-preview-hero { border-radius:10px; border-color:rgba(255,255,255,.09); }
.project-preview-image { display:block; width:100%; height:auto; max-height:190px; aspect-ratio:16 / 9; object-fit:cover; }
.project-preview-hero-meta { align-items:center; padding:.65rem .75rem; }
.project-preview-title { gap:.5rem; flex-wrap:wrap; }
.project-preview-title .preview-name { font-size:1.12rem; line-height:1.3; }
.project-preview-description { font-size:.82rem; line-height:1.7; }
.project-preview-section-label { font-size:.65rem; letter-spacing:.09em; }
.project-architecture { padding:.85rem .95rem; border-radius:0 8px 8px 0; }
.preview-links { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.preview-links .preview-btn { max-width:100%; }

/* Contact preview: wrap long values and keep the action cards balanced */
.ide-pane-split:has(.contact-method-grid) {
  grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr);
  gap:clamp(.9rem,1.6vw,1.4rem);
}
.ide-pane-split:has(.contact-method-grid) .code-block {
  align-self:start; display:flex; flex-direction:column; gap:.45rem;
  padding:.85rem; border:1px solid rgba(255,255,255,.07); border-radius:14px;
  background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  font-size:.74rem; line-height:1.65; overflow-wrap:anywhere;
}
.ide-pane-split:has(.contact-method-grid) .code-block .tok-comment {
  display:block; margin-bottom:.4rem; padding-bottom:.8rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ide-pane-split:has(.contact-method-grid) .contact-line {
  display:grid; grid-template-columns:76px minmax(0,1fr); gap:.4rem;
  align-items:start; padding:.5rem .55rem; border-radius:8px;
  background:rgba(255,255,255,.025);
}
.ide-pane-split:has(.contact-method-grid) .contact-line a { overflow-wrap:anywhere; }
.ide-pane-split:has(.contact-method-grid) .preview-card {
  min-height:420px; max-height:min(650px,calc(100dvh - 180px));
  background:radial-gradient(ellipse at 95% 0%,rgba(124,88,235,.13),transparent 42%),#13151c;
}
.ide-pane-split:has(.contact-method-grid) .preview-card-body { padding:clamp(1rem,1.5vw,1.35rem); }
.ide-pane-split:has(.contact-method-grid) .preview-name { font-size:1.25rem; }
.ide-pane-split:has(.contact-method-grid) .contact-method-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.ide-pane-split:has(.contact-method-grid) .contact-method-card {
  min-width:0; min-height:72px; padding:.75rem; gap:.65rem;
  border-radius:13px; background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.085);
}
.ide-pane-split:has(.contact-method-grid) .contact-method-icon {
  width:38px; height:38px; border:1px solid rgba(255,255,255,.06);
}
.ide-pane-split:has(.contact-method-grid) .contact-method-label { overflow-wrap:anywhere; }

/* Project launcher cards remain application-like and quiet, with clear hover feedback */
.dija-project-app-card { border-color:rgba(255,255,255,.09); background:#171920; }
.dija-project-app-card:hover,
.dija-project-app-card:focus-visible { border-color:rgba(167,139,250,.55); background:#1b1d27; }
.dija-project-app-icon { aspect-ratio:16 / 9; height:auto; min-height:100px; }
.dija-project-app-icon img { object-fit:cover; }
.dija-project-app-tagline { min-height:2.8em; }

@media (max-width:1050px) {
  .ide-pane-split,
  .ide-pane-split:has(.contact-method-grid) { grid-template-columns:minmax(0,1fr); }
  .ide-pane-split .preview-card,
  .ide-pane-split:has(.contact-method-grid) .preview-card { min-height:390px; max-height:none; }
  .ide-pane-split .code-block { max-height:42vh; }
}
@media (max-width:760px) {
  .taskbar-pinned .taskbar-icon { flex-basis:36px; width:36px; min-width:36px; height:38px; }
  .taskbar-pinned .taskbar-icon svg { width:20px; height:20px; flex-basis:20px; }
  .taskbar-pinned .taskbar-nav-app .taskbar-nav-glyph { width:28px; height:28px; flex-basis:28px; }
  .taskbar-pinned { gap:1px; }
}
@media (max-width:600px) {
  .dija-carousel.is-sidepanel { width:100vw; }
  .ide-pane { padding:.9rem; }
  .ide-pane-split .preview-card,
  .ide-pane-split:has(.contact-method-grid) .preview-card { min-height:360px; }
  .ide-pane-split:has(.contact-method-grid) .contact-line { grid-template-columns:1fr; }
  .ide-pane-split:has(.contact-method-grid) .contact-method-grid { grid-template-columns:1fr; }
  .project-preview-image { max-height:150px; }
}
@media (prefers-reduced-motion:reduce) {
  .taskbar-pinned .taskbar-icon,
  .dija-project-app-card,
  .ide-pane-split .preview-card { transition:none; }
}

/* Release: code-first VS Code + on-demand browser */
.ide-pane-split { display:block; }
.ide-pane-split > .code-block { width:100%; max-width:none; }
.ide-pane .preview-card { display:none !important; }
.ide-pane .resume-pane { display:block; }
.ide-pane .resume-left { display:none; }
.ide-pane .resume-right { min-width:0; }
.ide-preview-toolbar { position:sticky; top:-1.5rem; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:-1.5rem calc(clamp(1rem, 3vw, 2.5rem) * -1) 1.15rem; padding:.55rem clamp(1rem, 3vw, 2.5rem); background:rgba(24,26,32,.97); border-bottom:1px solid var(--vsc-border); backdrop-filter:blur(14px); }
.ide-preview-file-label { color:var(--vsc-text-muted); font:500 .76rem var(--font-mono); }
.ide-preview-open-btn { display:inline-flex; align-items:center; gap:.45rem; padding:.42rem .78rem; border:1px solid rgba(167,139,250,.42); border-radius:6px; background:rgba(139,92,246,.17); color:#eee9ff; font-size:.78rem; font-weight:600; }
.ide-preview-open-btn:hover,.ide-preview-open-btn:focus-visible { background:rgba(139,92,246,.3); outline:2px solid rgba(167,139,250,.5); outline-offset:2px; }
.browser-preview-backdrop { position:fixed; inset:0; z-index:1000; background:rgba(3,4,8,.28); }
.browser-preview-window { position:fixed; z-index:1001; top:7vh; right:2vw; bottom:calc(var(--taskbar-h) + 1.5rem); width:min(900px,calc(100vw - 360px)); min-width:420px; display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:12px; background:#f4f5f7; box-shadow:0 28px 90px rgba(0,0,0,.62); opacity:0; transform:translateY(10px) scale(.99); transition:opacity 180ms ease,transform 180ms ease; }
.browser-preview-window.is-open { opacity:1; transform:translateY(0) scale(1); }
.browser-preview-titlebar { display:flex; align-items:center; justify-content:space-between; min-height:42px; padding:0 .55rem; background:#202127; color:#e5e7eb; }
.browser-preview-tab { display:flex; align-items:center; gap:.55rem; min-width:0; max-width:80%; padding:.55rem .85rem; border-radius:8px 8px 0 0; background:#303139; font-size:.76rem; }
.browser-preview-tab > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.browser-preview-tab-dot { width:8px; height:8px; flex:none; border-radius:50%; background:#43c98b; }
.browser-preview-close { width:32px; height:30px; border-radius:5px; color:#ddd; font-size:1.25rem; }
.browser-preview-close:hover { background:#c42b3a; color:white; }
.browser-preview-toolbar { display:flex; align-items:center; gap:.85rem; padding:.55rem .8rem; color:#bfc2ca; background:#292a31; }
.browser-preview-address { display:flex; align-items:center; gap:.55rem; flex:1; min-width:0; padding:.48rem .7rem; border:1px solid #41434c; border-radius:20px; background:#1b1c22; color:#d5d7de; font:.75rem var(--font-mono); }
.browser-preview-page { flex:1; min-height:0; overflow:auto; padding:clamp(1rem,2.2vw,2rem); color:#e7e8ee; background:#11131a; }
#browserPreviewPage .preview-card-body { display:block; width:100%; max-width:none; height:auto; max-height:none; overflow:visible; padding:0; }
#browserPreviewPage .preview-card-body > * { max-width:100%; }
#browserPreviewPage .project-preview-image { display:block; width:100%; max-height:300px; object-fit:cover; }
#browserPreviewPage .resume-left { display:block; max-width:220px; margin-bottom:1.5rem; }
#browserPreviewPage .resume-pane { display:block; }
#browserPreviewPage .resume-right { min-width:0; }
.browser-preview-fallback { max-width:680px; margin:3rem auto; }
.browser-preview-eyebrow { color:#a78bfa; font-size:.75rem; letter-spacing:.15em; font-weight:700; }
.browser-preview-fallback h1 { margin:.75rem 0; font-size:clamp(2rem,5vw,3.8rem); }
.browser-preview-fallback p { color:#a5a9b7; line-height:1.7; }
.browser-preview-window[hidden], .browser-preview-backdrop[hidden] { display:none !important; }
@media (max-width:760px) { .browser-preview-window { inset:4vh .5rem calc(var(--taskbar-h) + .5rem); width:auto; min-width:0; } .browser-preview-toolbar { gap:.5rem; } .ide-preview-toolbar { top:-.9rem; margin:-.9rem -.9rem 1rem; padding:.55rem .9rem; } }

/* Full website experience inside the on-demand browser preview */
.browser-preview-page { padding:0; background:#0f1117; }
.browser-site-shell { display:grid; grid-template-columns:228px minmax(0,1fr); min-height:100%; color:#e8eaf0; background:#0f1117; }
.browser-site-sidebar { display:flex; flex-direction:column; gap:0; min-height:100%; padding:1.1rem .75rem .85rem; background:#15171f; border-right:1px solid #292c36; }
.browser-site-brand { display:flex; align-items:center; gap:.7rem; padding:.35rem .55rem 1.4rem; color:#f5f6fb; text-decoration:none; }
.browser-site-brand-mark { display:grid; place-items:center; width:37px; height:37px; flex:none; border:1px solid rgba(167,139,250,.45); border-radius:11px; background:linear-gradient(145deg,#8b5cf6,#4730a5); font-weight:800; font-size:.8rem; }
.browser-site-brand strong,.browser-site-brand small { display:block; }
.browser-site-brand strong { font-size:.78rem; }
.browser-site-brand small { margin-top:.2rem; color:#9298a8; font-size:.68rem; }
.browser-site-nav { display:flex; flex-direction:column; gap:.2rem; }
.browser-site-nav-label { margin:.75rem .55rem .4rem; color:#737b8e; font-size:.62rem; font-weight:800; letter-spacing:.14em; }
.browser-site-nav-item { display:flex; align-items:center; gap:.65rem; width:100%; min-width:0; padding:.62rem .65rem; border:1px solid transparent; border-radius:7px; background:transparent; color:#b9bfce; text-align:left; font-size:.75rem; cursor:pointer; transition:background .15s ease,color .15s ease,border-color .15s ease; }
.browser-site-nav-item:hover { background:#222530; color:#f5f6fb; }
.browser-site-nav-item.is-active { border-color:rgba(167,139,250,.2); background:rgba(139,92,246,.16); color:#d8caff; }
.browser-site-nav-icon { display:grid; place-items:center; width:20px; flex:none; color:#9d87f7; font-size:1rem; }
.browser-site-nav-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.browser-site-sidebar-footer { display:flex; align-items:center; gap:.5rem; margin-top:auto; padding:.9rem .55rem .2rem; color:#a5adbc; font-size:.69rem; }
.browser-site-online-dot { width:7px; height:7px; border-radius:50%; background:#34d399; box-shadow:0 0 9px rgba(52,211,153,.45); }
.browser-site-main { min-width:0; padding:clamp(1rem,2.5vw,2.2rem); overflow-wrap:anywhere; }
.browser-site-main .preview-card-body,.browser-site-main .skills-pane,.browser-site-main .dija-project-detail-inner { display:block; width:100%; max-width:none; height:auto; max-height:none; overflow:visible; padding:0; margin:0 auto; }
.browser-site-main .preview-avatar { width:72px; height:72px; }
.browser-site-main .preview-name { font-size:clamp(1.5rem,3vw,2.2rem); }
.browser-site-main .preview-quote { max-width:680px; line-height:1.8; }
.browser-site-main .about-highlights,.browser-site-main .contact-method-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.browser-site-main .skills-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.browser-site-main .project-preview-image { width:100%; max-height:340px; object-fit:cover; border-radius:12px; }
.browser-site-main .project-preview-description { line-height:1.8; }
.browser-site-main .preview-links { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.25rem; }
.browser-resume-download { display:inline-flex; margin-top:1.25rem; padding:.7rem .95rem; border:1px solid rgba(167,139,250,.45); border-radius:7px; background:rgba(139,92,246,.16); color:#d8caff; text-decoration:none; font-size:.8rem; }
@media (max-width:680px) {
 .browser-site-shell { grid-template-columns:150px minmax(0,1fr); }
 .browser-site-sidebar { padding:.7rem .45rem; }
 .browser-site-brand { gap:.45rem; padding:.25rem .3rem 1rem; }
 .browser-site-brand-mark { width:30px; height:30px; border-radius:8px; }
 .browser-site-brand strong { font-size:.67rem; }
 .browser-site-brand small { font-size:.59rem; }
 .browser-site-nav-item { gap:.35rem; padding:.58rem .35rem; font-size:.67rem; }
 .browser-site-nav-icon { width:16px; font-size:.85rem; }
 .browser-site-main { padding:1rem .75rem; }
 .browser-site-main .about-highlights,.browser-site-main .contact-method-grid,.browser-site-main .skills-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:420px) { .browser-site-shell { grid-template-columns:112px minmax(0,1fr); } .browser-site-brand small { display:none; } .browser-site-nav-item { font-size:.62rem; } }

.browser-preview-backdrop { inset:0 0 var(--taskbar-h,52px) 0; background:rgba(3,4,8,.18); }
.browser-preview-window { top:8px; left:10px; right:10px; bottom:calc(var(--taskbar-h,52px) + 8px); width:auto; min-width:0; border-radius:12px; }
.browser-preview-page { padding:0; background:#101219; }
.browser-site-shell { grid-template-columns:244px minmax(0,1fr); min-height:100%; height:100%; }
.browser-site-sidebar { min-height:0; overflow:auto; }
.browser-site-main { min-width:0; overflow:auto; padding:clamp(1.25rem,3vw,3rem); }
.browser-taskbar-app.is-running { background:rgba(255,255,255,.14); }
.browser-taskbar-glyph { display:block; width:26px; height:26px; border-radius:50%; border:3px solid #4285f4; background:conic-gradient(#34a853 0 120deg,#fbbc05 120deg 240deg,#ea4335 240deg); box-shadow:inset 0 0 0 3px #202127; }
.profile-page { max-width:1000px; margin:0 auto; }
.profile-hero { padding:clamp(1.1rem,2.5vw,2rem); border:1px solid #2c3040; border-radius:18px; background:radial-gradient(ellipse at top right,rgba(124,92,246,.15),transparent 48%),#151821; }
.profile-identity { display:flex; align-items:center; gap:1.1rem; }
.profile-avatar { width:82px; height:82px; flex:none; border:2px solid #8b5cf6; box-shadow:0 0 0 5px rgba(139,92,246,.12); }
.profile-eyebrow { margin-bottom:.45rem; color:#a78bfa; font-size:.67rem; font-weight:800; letter-spacing:.13em; }
.profile-name { margin:.15rem 0 .3rem; font-size:clamp(1.8rem,3.2vw,2.65rem); line-height:1.1; letter-spacing:-.035em; }
.profile-location { margin-top:.45rem; color:#a8afc0; font-size:.8rem; }
.profile-status { display:inline-flex; margin-top:1rem; }
.profile-summary { max-width:850px; margin:1.25rem 0 0; padding:1rem 1.1rem; border-left:3px solid #8b5cf6; border-radius:0 10px 10px 0; background:#1b1c29; color:#e2e5ee; font-size:clamp(.92rem,1.3vw,1.08rem); line-height:1.8; }
.profile-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin:1rem 0 1.8rem; }
.profile-stat { display:flex; flex-direction:column; gap:.35rem; padding:1rem; border:1px solid #2d3140; border-radius:12px; background:#171a22; }
.profile-stat strong { color:#f5f6fb; font-size:1rem; } .profile-stat span { color:#929aab; font-size:.75rem; }
.profile-section { margin:1.8rem 0; }
.profile-section-heading,.project-profile-section-heading { display:flex; align-items:center; gap:.7rem; margin-bottom:.75rem; }
.profile-section-heading > span,.project-profile-section-heading > span { color:#a78bfa; font:700 .72rem var(--font-mono,monospace); }
.profile-section-heading h2,.project-profile-section-heading h3 { margin:0; color:#f4f5fa; font-size:1.08rem; }
.profile-body-copy { max-width:850px; color:#b9c0cf; font-size:.92rem; line-height:1.9; }
.profile-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }
.profile-feature-card { padding:1.1rem; border:1px solid #2c3040; border-radius:12px; background:#171a22; }
.profile-feature-icon { display:grid; place-items:center; width:34px; height:34px; margin-bottom:.75rem; border-radius:9px; background:rgba(139,92,246,.17); color:#c4b5fd; }
.profile-feature-card h3 { margin:0 0 .5rem; color:#f5f6fb; font-size:.9rem; }
.profile-feature-card p { margin:0; color:#aeb5c5; font-size:.8rem; line-height:1.7; }
.profile-tags { margin-top:.4rem; } .profile-actions { margin-top:1.4rem; }
.project-profile-heading { padding-bottom:1.3rem; border-bottom:1px solid #2b2e3a; }
.project-profile-kicker { margin-bottom:.8rem; color:#a78bfa; font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.project-profile-kicker span { padding:0 .3rem; color:#687083; }
.project-profile-section { margin:1.4rem 0; padding:1.1rem 1.2rem; border:1px solid #2b2f3b; border-radius:12px; background:#151821; }
.project-profile-section > p { margin:.2rem 0 0; color:#b9c0cf; font-size:.87rem; line-height:1.85; }
.project-profile-feature-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem 1.2rem; margin:.6rem 0 0; padding-left:1.1rem; color:#c4cad7; font-size:.84rem; line-height:1.7; }
.project-profile-feature-list li::marker { color:#a78bfa; } .project-detail-note { color:#929aab !important; font-size:.8rem !important; }
.project-profile-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-top:1.2rem; }
.project-role-card { display:flex; flex-direction:column; gap:.35rem; padding:.8rem 1rem; border:1px solid #343044; border-radius:10px; background:rgba(139,92,246,.09); }
.project-role-card span { color:#a78bfa; font-size:.63rem; font-weight:800; letter-spacing:.12em; } .project-role-card strong { color:#ece9ff; font-size:.85rem; }
.project-profile-footer .preview-links { margin-top:0; }
.browser-resume-frame { display:block; width:100%; height:100%; min-height:650px; border:0; background:#fff; }
@media (max-width:760px) { .browser-site-shell { grid-template-columns:190px minmax(0,1fr); } .profile-stats,.profile-feature-grid { grid-template-columns:1fr; } .project-profile-feature-list { grid-template-columns:1fr; } .browser-site-main { padding:1rem; } }
@media (max-width:520px) { .browser-preview-window { inset:4px 4px calc(var(--taskbar-h,52px) + 4px); } .browser-site-shell { grid-template-columns:132px minmax(0,1fr); } .browser-site-sidebar { padding:.65rem .35rem; } .browser-site-brand { gap:.35rem; padding:.2rem .2rem .8rem; } .browser-site-brand-mark { width:28px; height:28px; } .browser-site-brand strong { font-size:.62rem; } .browser-site-nav-item { font-size:.62rem; padding:.5rem .3rem; } .browser-site-main { padding:.75rem; } .profile-identity { align-items:flex-start; gap:.75rem; } .profile-avatar { width:58px; height:58px; } .profile-eyebrow { font-size:.55rem; } .profile-location { font-size:.7rem; } }

/* EmailJS contact form, shown inside the full-width browser preview. */
.contact-form-page { max-width:760px; margin:0 auto; padding:clamp(1rem,2.8vw,2rem); }
.contact-form-intro { margin-bottom:1.35rem; }
.contact-form-intro .preview-avatar { margin-bottom:.8rem; }
.contact-form-intro .preview-name { font-size:clamp(1.4rem,2.5vw,2rem); }
.contact-form-intro .preview-role { max-width:550px; line-height:1.7; }
.portfolio-email-form { display:grid; gap:1rem; margin-top:1.3rem; }
.contact-form-row { display:grid; gap:.45rem; }
.contact-form-row label { color:#dce0eb; font-size:.8rem; font-weight:650; }
.contact-form-row input,.contact-form-row textarea { width:100%; min-width:0; padding:.8rem .9rem; border:1px solid #34394a; border-radius:9px; outline:none; background:#171a23; color:#f4f5fb; font:inherit; font-size:.88rem; transition:border-color .16s,box-shadow .16s; }
.contact-form-row input::placeholder,.contact-form-row textarea::placeholder { color:#777f91; }
.contact-form-row input:focus,.contact-form-row textarea:focus { border-color:#9b7afa; box-shadow:0 0 0 3px rgba(139,92,246,.16); }
.contact-form-row textarea { resize:vertical; min-height:125px; line-height:1.6; }
.contact-send-button { display:inline-flex; justify-content:center; align-items:center; gap:.55rem; min-height:44px; padding:.75rem 1.1rem; border:1px solid #8b6be8; border-radius:9px; background:#7953cf; color:#fff; font:inherit; font-size:.86rem; font-weight:750; cursor:pointer; transition:filter .15s,transform .15s; }
.contact-send-button:hover:not(:disabled) { filter:brightness(1.12); transform:translateY(-1px); }
.contact-send-button:disabled { cursor:wait; opacity:.65; }
.contact-form-status { margin:0; color:#9ca5b8; font-size:.76rem; line-height:1.7; overflow-wrap:anywhere; }
.contact-form-status a,.contact-form-direct a { color:#b8a2ff; text-decoration:underline; text-underline-offset:3px; }
.contact-form-status.is-success { color:#6ee7b7; } .contact-form-status.is-error { color:#fca5a5; } .contact-form-status.is-setup-pending { color:#fcd34d; }
.contact-form-honeypot { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.contact-form-direct { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem; padding-top:1rem; border-top:1px solid #2c3040; color:#9ca5b8; font-size:.78rem; }
@media(max-width:560px) { .contact-form-page { padding:.8rem; } .contact-form-direct { flex-direction:column; } }