/* ============ ATHARV.OS — Win95 in 3D ============ */
:root {
  --w95-gray: #C0C0C0;
  --w95-dark: #808080;
  --w95-darker: #404040;
  --w95-light: #DFDFDF;
  --w95-white: #FFFFFF;
  --w95-navy: #000080;
  --w95-navy-grad: #1084D0;
  --w95-teal: #008080;
  --w95-text: #000000;
  --snow: #F5EBD8;
  --sunset: #D69E2E;
  --granite: #2D3748;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Pixelated MS Sans Serif', 'MS Sans Serif', 'Microsoft Sans Serif', Tahoma, Geneva, sans-serif;
  -webkit-font-smoothing: none;
  font-smooth: never;
  -moz-osx-font-smoothing: grayscale;
  background: #000;
  color: var(--w95-text);
  user-select: none;
  cursor: default;
}

#root { width: 100%; height: 100%; }

/* ============ Boot Splash ============ */
.splash-img {
  position: fixed; inset: 0; z-index: 100000;
  background: #2a3340;
  overflow: hidden;
}
.splash-photo {
  position: absolute; inset: 0;
  background: url('assets/loading-splash.png') center/cover no-repeat;
}
.splash-bar {
  position: absolute;
  left: 31%; top: 68%;
  width: 38%;
  height: 2.6%;
  border: 2px solid #1a2230;
  background: #1a2230;
  padding: 2px;
  box-sizing: border-box;
  overflow: hidden;
}
.splash-fill {
  height: 100%;
  background: repeating-linear-gradient(90deg, #6a9bd1 0 12px, transparent 12px 14px);
  transition: width 0.15s linear;
}

/* ============ Volumetric scene ============ */
.scene {
  position: fixed; inset: 0;
  background: #2b3440 url('assets/wallpaper.png') center/cover no-repeat;
  overflow: hidden;
}
.scene::before {
  /* dust particles */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 88% 24%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 24% 78%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 64% 64%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 42% 32%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 78% 88%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 8% 92%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 52% 8%, rgba(255,255,255,0.5), transparent);
  animation: drift 60s linear infinite;
}
@keyframes drift {
  from { transform: translate(0,0); }
  to { transform: translate(-30px, -20px); }
}

@keyframes drift {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-40px, -30px, 0); }
}
@keyframes drift2 {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(60px, 40px, 0); }
}

.stage3d {
  position: absolute; inset: 0;
}

/* ============ Desktop ============ */
.desktop {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 28px;
  background: transparent;
  box-shadow:
    inset 0 0 200px rgba(0,0,0,0.35),
    inset 0 0 80px rgba(0,0,0,0.18);
  overflow: hidden;
  transform-style: preserve-3d;
}

.desktop.crt::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0 1px, transparent 1px 3px);
  z-index: 9999;
  mix-blend-mode: multiply;
}

/* ============ Desktop icons ============ */
.dicons {
  position: absolute; top: 12px; left: 12px;
  display: grid;
  grid-template-columns: repeat(2, 78px);
  gap: 4px 8px;
  z-index: 10;
}
.dicon {
  width: 76px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 4px 2px;
  cursor: pointer;
  text-align: center;
}
.dicon .ico {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,0.4));
}
.dicon .lbl {
  color: #fff;
  font-size: 11px;
  text-shadow: 1px 1px 0 #000;
  line-height: 1.1;
  padding: 1px 3px;
  max-width: 76px;
  word-wrap: break-word;
}
.dicon.selected .lbl {
  background: var(--w95-navy);
  outline: 1px dotted #fff;
}
.dicon.selected .ico {
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,0.4)) brightness(0.85) hue-rotate(180deg);
}

/* ============ Window chrome ============ */
.win {
  position: absolute;
  background: var(--w95-gray);
  border: 2px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  box-shadow:
    1px 1px 0 #000,
    0 2px 0 -1px #909090,
    0 4px 0 -2px #707070,
    0 6px 0 -3px #555,
    8px 14px 30px rgba(0,0,0,0.55),
    20px 30px 60px rgba(0,0,0,0.35);
  display: flex; flex-direction: column;
  min-width: 260px;
  transform-origin: 50% 100%;
  transition: transform 0.32s cubic-bezier(.2,.9,.25,1.1), box-shadow 0.32s cubic-bezier(.2,.9,.25,1.1), filter 0.25s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}
.win:not(.focused) {
  filter: blur(0.6px) brightness(0.94);
}
.win.dragging {
  transform: translateZ(60px) rotateX(2deg) rotateY(var(--drag-roll,-1deg));
  box-shadow:
    1px 1px 0 #000,
    0 2px 0 -1px #909090,
    0 4px 0 -2px #707070,
    0 6px 0 -3px #555,
    30px 50px 70px rgba(0,0,0,0.6),
    60px 90px 140px rgba(0,0,0,0.45);
  filter: none;
}
.win.opening {
  animation: winOpen 0.22s ease-out;
}
@keyframes winOpen {
  from { transform: scale(0.6) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.win.minimizing { animation: winMin 0.28s ease-in forwards; }
@keyframes winMin {
  to { transform: scale(0.05) translate(-40vw, 60vh); opacity: 0; }
}
.win.closing { animation: winClose 0.3s ease-out forwards; }
@keyframes winClose {
  to { transform: scale(0.9); opacity: 0; filter: blur(6px); }
}

.tbar {
  background: linear-gradient(90deg, var(--w95-darker) 0%, var(--w95-dark) 100%);
  color: #fff;
  padding: 3px 3px 3px 4px;
  display: flex; align-items: center; gap: 4px;
  height: 22px;
  cursor: grab;
  user-select: none;
}
.win.focused .tbar {
  background: linear-gradient(90deg, var(--w95-navy) 0%, var(--w95-navy-grad) 100%);
}
.tbar.dragging { cursor: grabbing; }
.tbar .ttl {
  flex: 1;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; gap: 6px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.tbar .ico { width: 16px; height: 16px; flex-shrink: 0; }
.tctrls { display: flex; gap: 2px; }
.tctrl {
  width: 16px; height: 14px;
  background: var(--w95-gray);
  border: 1px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  color: #000;
  font-size: 10px; font-weight: 700;
  font-family: inherit;
  display: grid; place-items: center;
  cursor: pointer;
  padding: 0;
}
.tctrl:active { border-color: #404040 #FFFFFF #FFFFFF #404040; }

.menubar {
  padding: 1px 2px;
  display: flex; gap: 0;
  background: var(--w95-gray);
  font-size: 11px;
  border-bottom: 1px solid var(--w95-dark);
}
.menubar button {
  background: transparent; border: 1px solid transparent;
  padding: 2px 7px;
  font: inherit; color: #000; cursor: pointer;
}
.menubar button:hover { background: var(--w95-navy); color: #fff; }
.menubar .u { text-decoration: underline; }

.tbtoolbar {
  padding: 4px;
  display: flex; gap: 2px;
  background: var(--w95-gray);
  border-top: 1px solid #FFF;
  border-bottom: 1px solid var(--w95-dark);
}
.tbbtn {
  background: var(--w95-gray);
  border: 1px solid var(--w95-gray);
  padding: 3px 7px;
  font: inherit; font-size: 11px;
  cursor: pointer;
  min-width: 28px;
}
.tbbtn:hover { border-color: #FFFFFF #404040 #404040 #FFFFFF; }
.tbbtn:active, .tbbtn.active { border-color: #404040 #FFFFFF #FFFFFF #404040; }
.tbsep { width: 1px; background: var(--w95-dark); box-shadow: 1px 0 0 #fff; margin: 2px 4px; }

.wbody {
  flex: 1;
  overflow: auto;
  background: var(--w95-gray);
  padding: 6px;
  font-size: 11px;
  position: relative;
}
.wbody.white { background: #fff; }
.wbody.sunken {
  border: 2px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
  margin: 2px;
  flex: 1; min-height: 0;
}

.statusbar {
  background: var(--w95-gray);
  border-top: 1px solid #FFF;
  padding: 2px;
  display: flex; gap: 2px;
  font-size: 11px;
}
.scell {
  background: var(--w95-gray);
  border: 1px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
  padding: 2px 8px;
}
.scell.flex { flex: 1; }

.btn {
  background: var(--w95-gray);
  border: 2px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  padding: 4px 14px;
  font: inherit; font-size: 11px;
  cursor: pointer;
  min-width: 70px;
}
.btn:active { border-color: #404040 #FFFFFF #FFFFFF #404040; }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }

.sunken {
  border: 2px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
}
.raised {
  border: 2px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
}

input.w95-input, textarea.w95-input {
  background: #fff;
  border: 2px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
  padding: 3px 5px;
  font: inherit; font-size: 11px;
}

/* ============ Taskbar ============ */
.taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 28px;
  background: var(--w95-gray);
  border-top: 2px solid #FFF;
  display: flex; align-items: center;
  padding: 2px;
  z-index: 100000;
  gap: 3px;
}
.startbtn {
  background: var(--w95-gray);
  border: 2px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  padding: 0 8px 0 6px;
  font-weight: 700; font-size: 13px;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  height: 24px; min-width: 64px;
}
.startbtn.open { border-color: #404040 #FFFFFF #FFFFFF #404040; }
.startbtn .logo { width: 16px; height: 16px; image-rendering: pixelated; display: inline-flex; }
.startbtn .logo svg { display: block; image-rendering: pixelated; }
.tbsep-v { width: 1px; height: 18px; background: var(--w95-dark); box-shadow: 1px 0 0 #fff; margin: 0 3px; }

.tasks { flex: 1; display: flex; gap: 3px; min-width: 0; padding-left: 4px; }
.taskitem {
  background: var(--w95-gray);
  border: 2px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  padding: 2px 6px;
  height: 22px;
  font-size: 11px;
  display: flex; align-items: center; gap: 4px;
  cursor: pointer;
  max-width: 160px; min-width: 100px;
  overflow: hidden; white-space: nowrap;
}
.taskitem.active { border-color: #404040 #FFFFFF #FFFFFF #404040; background: #b0b0b0; }
.taskitem .lbl { overflow: hidden; text-overflow: ellipsis; }
.taskitem .ico16 { width: 16px; height: 16px; flex-shrink: 0; }

.tray {
  border: 1px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
  box-shadow: inset 1px 1px 0 #000;
  height: 22px;
  display: flex; align-items: center; gap: 6px;
  padding: 2px 6px;
  margin-right: 2px;
  font-size: 11px;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
}
.tray-icon {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  image-rendering: pixelated;
}
.tray-icon svg { display: block; image-rendering: pixelated; }
.tray-en { width: 18px; }
.tray-dot { width: 8px; height: 8px; cursor: default; }
.tray-icon.blinking { animation: trayBlink 0.4s ease-in-out; }
.tray-icon.pulsing { animation: trayPulse 1.4s ease-in-out infinite; }
@keyframes trayBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes trayPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.tray-clock {
  color: #000;
  font-size: 11px;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  cursor: pointer;
  padding: 0 2px;
  user-select: none;
}

/* Win 95 yellow tooltip */
.w95-tip {
  position: fixed;
  transform: translate(-50%, -100%);
  background: #FFFFE1;
  border: 1px solid #000;
  color: #000;
  font: 11px 'MS Sans Serif', Tahoma, sans-serif;
  padding: 2px 5px;
  pointer-events: none;
  z-index: 200001;
  white-space: nowrap;
}

/* Volume popup */
.vol-popup {
  position: fixed;
  right: 8px;
  bottom: 32px;
  width: 110px;
  background: var(--w95-gray);
  border: 2px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  padding: 8px;
  z-index: 200000;
  font: 11px 'MS Sans Serif', Tahoma, sans-serif;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
}
.vol-title { text-align: center; font-weight: 700; margin-bottom: 6px; }
.vol-slider { display: flex; justify-content: center; padding: 6px 0; }
.vol-range {
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  writing-mode: bt-lr;
  width: 24px; height: 90px;
}
.vol-pct { text-align: center; margin-top: 4px; }
.vol-mute { display: flex; align-items: center; gap: 4px; margin-top: 6px; cursor: pointer; }

/* Date/Time dialog */
.dt-dialog {
  position: fixed;
  width: 360px;
  background: var(--w95-gray);
  border: 2px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  font: 11px 'MS Sans Serif', Tahoma, sans-serif;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
}
.dt-body { display: flex; gap: 12px; padding: 12px; }
.dt-section { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.dt-lbl { font-weight: 700; }
.dt-row { display: flex; gap: 6px; }
.dt-cal { background: #fff; border: 2px solid; border-color: #404040 #FFFFFF #FFFFFF #404040; padding: 4px; }
.dt-cal-head, .dt-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.dt-dow { text-align: center; font-weight: 700; padding: 2px 0; border-bottom: 1px solid #808080; }
.dt-cell { text-align: center; padding: 2px 0; cursor: pointer; }
.dt-cell:hover:not(.empty) { background: var(--w95-navy); color: #fff; }
.dt-cell.today { background: var(--w95-navy); color: #fff; font-weight: 700; }
.dt-clock-face { display: flex; justify-content: center; padding: 6px; }
.dt-time-display {
  background: #fff; border: 2px solid; border-color: #404040 #FFFFFF #FFFFFF #404040;
  padding: 4px; text-align: center; font: 14px 'Fixedsys', 'Courier New', monospace;
}
.dt-buttons { display: flex; gap: 6px; padding: 0 12px 12px; justify-content: flex-end; }
.dt-buttons .btn { min-width: 70px; }

/* Tray context menu */
.tray-ctx {
  position: fixed;
  background: var(--w95-gray);
  border: 2px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  font: 11px 'MS Sans Serif', Tahoma, sans-serif;
  padding: 2px;
  min-width: 140px;
  z-index: 200002;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.4);
}
.tray-ctx-item { padding: 3px 16px 3px 22px; cursor: pointer; }
.tray-ctx-item:hover { background: var(--w95-navy); color: #fff; }
.tray-ctx-sep { height: 1px; background: #808080; margin: 2px 0; box-shadow: 0 1px 0 #fff; }

/* Taskbar slide-up boot animation */
.taskbar.slide-in { animation: taskbarSlide 0.6s cubic-bezier(.2,.8,.3,1.1); }
@keyframes taskbarSlide {
  from { transform: translateY(28px); }
  to { transform: translateY(0); }
}

/* ============ Start menu ============ */
.startmenu {
  position: fixed;
  left: 2px;
  bottom: 30px;
  width: 220px;
  background: var(--w95-gray);
  border: 2px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
  z-index: 100001;
  display: flex;
  padding: 2px;
}
.startmenu .strip {
  width: 28px;
  background: linear-gradient(180deg, #000080 0%, #1084D0 100%);
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  letter-spacing: -0.02em;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 8px 0 12px 0;
}
.startmenu .strip span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
  white-space: nowrap;
}
  transform: rotate(180deg);
  letter-spacing: 1px;
}
.startmenu .items { flex: 1; display: flex; flex-direction: column; }
.smitem {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 6px;
  font-size: 12px;
  cursor: pointer;
  position: relative;
}
.smitem:hover { background: var(--w95-navy); color: #fff; }
.smitem .ico { width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center; }
.smitem .arrow { margin-left: auto; font-size: 10px; }
.smitem.divider { border-top: 1px solid var(--w95-dark); border-bottom: 1px solid #fff; padding: 0; height: 2px; pointer-events: none; }
.submenu {
  position: absolute;
  left: 100%; top: -2px;
  width: 200px;
  background: var(--w95-gray);
  border: 2px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
  display: none;
  z-index: 100002;
  flex-direction: column;
  padding: 2px;
}
.smitem:hover > .submenu { display: flex; }

/* ============ Specific window content ============ */
.about-tabs { display: flex; gap: 0; padding: 4px 4px 0 4px; }
.about-tab {
  background: var(--w95-gray);
  border: 2px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  border-bottom: none;
  padding: 4px 14px;
  font-size: 11px;
  cursor: pointer;
  position: relative;
  margin-right: -1px;
}
.about-tab.active {
  background: var(--w95-gray);
  z-index: 2;
  padding-bottom: 6px;
  margin-bottom: -2px;
}
.about-pane {
  border: 2px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  background: var(--w95-gray);
  padding: 14px;
  margin: 0 4px 4px 4px;
  flex: 1;
  overflow: auto;
  font-size: 12px;
  line-height: 1.5;
}
.about-pane .row { display: flex; gap: 14px; align-items: flex-start; }
.about-pane .photo {
  width: 110px; height: 110px;
  border: 2px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
  padding: 3px;
  background: #fff;
  flex-shrink: 0;
}
.about-pane .photo img { width: 100%; height: 100%; object-fit: cover; }
.about-pane h2 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.about-pane .kv { display: grid; grid-template-columns: 110px 1fr; gap: 4px 10px; margin-top: 8px; font-size: 11px; }
.about-pane .kv .k { color: #404040; }
.about-pane p { font-size: 11px; margin-bottom: 8px; }
.about-pane ul { margin-left: 18px; margin-bottom: 8px; }
.about-pane li { margin-bottom: 3px; font-size: 11px; }
.about-pane a { color: var(--w95-navy); }

/* explorer */
.explorer { display: flex; height: 100%; }
.exp-tree { width: 180px; background: #fff; border: 2px solid; border-color: #404040 #FFFFFF #FFFFFF #404040; overflow: auto; padding: 6px; font-size: 11px; }
.exp-tree .node { padding: 2px 4px; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.exp-tree .node.active { background: var(--w95-navy); color: #fff; }
.exp-tree .node:hover { background: var(--w95-navy); color: #fff; }
.exp-tree .indent { padding-left: 18px; }
.exp-content { flex: 1; background: #fff; border: 2px solid; border-color: #404040 #FFFFFF #FFFFFF #404040; margin-left: 4px; padding: 8px; overflow: auto; }

.icogrid { display: grid; grid-template-columns: repeat(auto-fill, 88px); gap: 8px; }
.icogrid .item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px; cursor: pointer; text-align: center; }
.icogrid .item:hover { background: rgba(0,0,128,0.1); }
.icogrid .item.selected { background: rgba(0,0,128,0.2); outline: 1px dotted #000; }
.icogrid .item .ico { width: 32px; height: 32px; display: grid; place-items: center; }
.icogrid .item .lbl { font-size: 11px; line-height: 1.2; color: #000; }

.detailtable { width: 100%; font-size: 11px; border-collapse: collapse; }
.detailtable th { text-align: left; padding: 3px 6px; background: var(--w95-gray); border: 1px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF; font-weight: 400; }
.detailtable td { padding: 3px 6px; border-bottom: 1px dotted #ccc; }
.detailtable tr:hover { background: var(--w95-navy); color: #fff; }

/* project banner */
.proj-banner {
  height: 96px;
  border: 2px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
  margin-bottom: 8px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.proj-banner .pbtxt h2 { font-size: 18px; font-weight: 700; letter-spacing: 0.5px; }
.proj-banner .pbtxt .tagline { font-size: 11px; opacity: 0.85; margin-top: 2px; }
.proj-banner .pbicon { width: 56px; height: 56px; opacity: 0.9; }
.proj-banner .pbmetric {
  position: absolute; right: 14px; bottom: 8px;
  font-size: 10px; font-family: 'Fixedsys', 'Courier New', monospace;
  background: rgba(0,0,0,0.4); padding: 2px 6px;
  border: 1px solid rgba(255,255,255,0.3);
}

.tag-row { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.tag {
  background: var(--w95-gray);
  border: 1px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  padding: 2px 6px;
  font-size: 10px;
}

.proj-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--w95-dark); margin-bottom: 0; padding-left: 4px; }
.proj-tab { background: var(--w95-gray); border: 2px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF; border-bottom: none; padding: 3px 12px; font-size: 11px; cursor: pointer; margin-right: -1px; }
.proj-tab.active { padding-bottom: 5px; margin-bottom: -1px; z-index: 2; position: relative; }
.proj-pane { border: 2px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF; background: var(--w95-gray); padding: 10px; flex: 1; overflow: auto; font-size: 11px; line-height: 1.5; min-height: 220px; }
.proj-pane h3 { font-size: 12px; margin: 6px 0 4px 0; }
.proj-pane ul { margin-left: 18px; }
.proj-pane li { margin-bottom: 4px; }
.proj-pane .meta { display: grid; grid-template-columns: 100px 1fr; gap: 4px 10px; }
.proj-pane .meta .k { color: var(--w95-darker); }
.proj-pane .links { display: flex; gap: 8px; flex-wrap: wrap; }
.proj-pane a.btn { text-decoration: none; color: #000; display: inline-flex; align-items: center; gap: 4px; }

/* media player */
.mp-body { display: flex; gap: 6px; padding: 6px; flex: 1; min-height: 0; }
.mp-left {
  width: 200px;
  background: #fff;
  border: 2px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
  overflow: auto;
}
.mp-lh { background: var(--w95-gray); border-bottom: 1px solid var(--w95-dark); padding: 4px 6px; font-size: 11px; font-weight: 700; }
.pl-item { padding: 5px 8px; font-size: 11px; cursor: pointer; display: flex; align-items: center; gap: 6px; border-bottom: 1px dotted #ccc; line-height: 1.3; }
.pl-item:hover { background: var(--w95-navy); color: #fff; }
.pl-item.active { background: var(--w95-navy); color: #fff; font-weight: 700; }
.pl-item .pli { width: 16px; height: 16px; flex-shrink: 0; }
.mp-right { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mp-embed {
  background: #000;
  border: 2px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
  box-shadow: inset 1px 1px 0 #000;
  padding: 0;
  overflow: hidden;
}
.mp-embed iframe {
  width: 100%; height: 352px;
  border: 0; display: block;
  border-radius: 0 !important;
}
.viz {
  background: #000;
  border: 2px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
  box-shadow: inset 1px 1px 0 #000;
  height: 110px;
  padding: 4px 6px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 3px;
  image-rendering: pixelated;
  overflow: hidden;
}
.viz-bar {
  flex: 0 0 8px;
  background: #39D353;
  box-shadow: inset 0 1px 0 #7FFF7F, inset -1px 0 0 #1A8F2E, inset 1px 0 0 #7FFF7F;
  transition: height 0.08s ease-out;
  image-rendering: pixelated;
}
.viz.disabled .viz-bar { background: #404040; box-shadow: none; }

.transport {
  background: var(--w95-gray);
  padding: 6px;
  border: 2px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  display: flex; align-items: center; gap: 6px;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
}
.tp-btn {
  width: 30px; height: 26px;
  background: var(--w95-gray);
  border: 2px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.tp-btn svg { display: block; image-rendering: pixelated; }
.tp-btn:active { border-color: #404040 #FFFFFF #FFFFFF #404040; }
.tp-btn:active svg { transform: translate(1px, 1px); }

.marquee {
  flex: 1;
  background: #000;
  color: #39D353;
  font-family: 'MS Sans Serif', 'Courier New', monospace;
  font-size: 11px;
  font-smooth: never;
  -webkit-font-smoothing: none;
  padding: 4px 8px;
  border: 2px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
  box-shadow: inset 1px 1px 0 #000;
  overflow: hidden;
  white-space: nowrap;
  height: 22px;
  display: flex; align-items: center;
}
.marquee-text { display: inline-block; animation: scroll 16s linear infinite; padding-left: 100%; text-shadow: none; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

.vol {
  display: flex; align-items: center; gap: 6px;
  padding: 0 6px;
  border-left: 1px solid var(--w95-dark);
  box-shadow: 1px 0 0 #fff;
}
.vol .w95-trackbar {
  -webkit-appearance: none;
  appearance: none;
  width: 80px; height: 18px;
  background: transparent;
  cursor: pointer;
}
.vol .w95-trackbar::-webkit-slider-runnable-track {
  height: 4px;
  background: #808080;
  border: 1px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
}
.vol .w95-trackbar::-moz-range-track {
  height: 4px;
  background: #808080;
  border: 1px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
}
.vol .w95-trackbar::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px; height: 18px;
  background: var(--w95-gray);
  border: 2px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  margin-top: -8px;
}
.vol .w95-trackbar::-moz-range-thumb {
  width: 10px; height: 18px;
  background: var(--w95-gray);
  border: 2px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  border-radius: 0;
}

/* now playing widget */
.np-widget {
  position: fixed;
  right: 12px;
  bottom: 36px;
  width: 220px;
  z-index: 99;
  pointer-events: auto;
}
.np-content { padding: 8px 10px; font-size: 11px; }
.np-row { display: flex; gap: 8px; align-items: center; }
.np-eq { display: flex; gap: 2px; align-items: flex-end; height: 14px; flex-shrink: 0; }
.np-eq-bar { width: 3px; background: var(--w95-navy); }
.np-track { font-weight: 700; font-size: 11px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-pl { font-size: 10px; color: var(--w95-darker); }

/* photos */
.photogrid { display: grid; grid-template-columns: repeat(auto-fill, 140px); gap: 10px; padding: 8px; }
.photogrid .photo {
  width: 140px;
  border: 2px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
  padding: 4px;
  background: #fff;
  cursor: pointer;
}
.photogrid .photo .img {
  width: 130px; height: 100px;
  background-size: cover; background-position: center;
  border: 1px solid #000;
}
.photogrid .photo .cap { font-size: 10px; padding: 4px 2px 0; line-height: 1.3; }
.photo-viewer { padding: 12px; display: flex; gap: 12px; }
.photo-viewer .full { flex: 1; border: 2px solid; border-color: #404040 #FFFFFF #FFFFFF #404040; padding: 4px; background: #fff; }
.photo-viewer .full .img { width: 100%; height: 320px; background-size: cover; background-position: center; }
.photo-viewer .meta { width: 200px; font-size: 11px; line-height: 1.5; }
.photo-viewer .meta h3 { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.exif {
  background: var(--w95-gray);
  border: 2px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
  padding: 6px 8px; margin-top: 10px; font-family: 'Fixedsys', 'Courier New', monospace; font-size: 10px;
}

/* notepad */
.notepad-body {
  background: #fff;
  border: 2px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
  margin: 2px;
  flex: 1;
  padding: 8px 12px;
  font-family: 'Fixedsys', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.6;
  overflow: auto;
  white-space: pre-wrap;
  color: #000;
  outline: none;
}

/* awards */
.awards-grid { display: grid; grid-template-columns: repeat(auto-fill, 130px); gap: 16px; padding: 16px; }
.award-card {
  text-align: center;
  cursor: pointer;
  padding: 10px;
}
.award-card:hover { background: rgba(0,0,128,0.08); }
.award-card .trophy { width: 64px; height: 64px; margin: 0 auto 6px; }
.award-card .ttl { font-size: 11px; font-weight: 700; }
.award-card .yr { font-size: 10px; color: var(--w95-darker); }
.award-detail { padding: 16px; }
.award-detail .photo-frame {
  border: 2px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
  padding: 4px;
  background: #fff;
  margin: 0 auto 12px;
  max-width: 100%;
}
.award-detail .photo-frame img { display: block; max-width: 100%; max-height: 320px; margin: 0 auto; }
.award-detail .cap { font-size: 11px; text-align: center; padding: 8px 4px; }
.award-detail h3 { font-size: 14px; margin-bottom: 6px; }
.award-detail p { font-size: 11px; line-height: 1.5; }

/* skills */
.skills-list { padding: 8px; }
.skill-row { display: grid; grid-template-columns: 200px 1fr 70px; gap: 10px; align-items: center; padding: 4px 0; font-size: 11px; border-bottom: 1px dotted #ccc; }
.skill-bar { height: 16px; background: var(--w95-gray); border: 2px solid; border-color: #404040 #FFFFFF #FFFFFF #404040; padding: 1px; }
.skill-bar .fill {
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--w95-navy) 0 8px, transparent 8px 10px);
  background-color: var(--w95-navy);
}
.skills-cats { display: grid; grid-template-columns: repeat(auto-fill, 88px); gap: 8px; padding: 8px; }

/* network */
.netgrid { display: grid; grid-template-columns: repeat(auto-fill, 110px); gap: 10px; padding: 10px; }
.netgrid .item { text-align: center; cursor: pointer; padding: 6px; }
.netgrid .item:hover { background: rgba(0,0,128,0.1); }
.netgrid .item .ico { width: 48px; height: 48px; margin: 0 auto 4px; }
.netgrid .item .lbl { font-size: 11px; }

/* run dialog */
.run-dialog { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.run-dialog .row { display: flex; gap: 8px; align-items: center; }
.run-dialog input { flex: 1; }

/* boot */
.boot {
  position: fixed; inset: 0;
  background: #000;
  color: #c8c8c8;
  font-family: 'Fixedsys', 'Courier New', monospace;
  font-size: 14px;
  z-index: 999999;
  padding: 24px 36px;
  white-space: pre;
  overflow: hidden;
}
.boot .skip {
  position: absolute; bottom: 18px; right: 24px;
  background: #222; color: #ccc; border: 1px solid #444;
  padding: 6px 14px; cursor: pointer; font: inherit;
}

.splash {
  position: fixed; inset: 0;
  background: linear-gradient(180deg, #4080a0 0%, #002030 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 999999;
  color: #fff;
}
.splash .logo { width: 96px; height: 108px; margin-bottom: 20px; filter: drop-shadow(4px 6px 12px rgba(0,0,0,0.5)); }
.splash .word {
  font-size: 36px; font-weight: 700; letter-spacing: -1px;
  color: #fff; text-shadow: 3px 3px 0 rgba(0,0,0,0.4);
  margin-bottom: 4px;
}
.splash .micro { font-size: 12px; opacity: 0.85; letter-spacing: 4px; }
.splash .pbar {
  width: 240px; height: 14px; background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.4); margin-top: 32px;
  padding: 1px;
}
.splash .pbar .pf {
  height: 100%; background: linear-gradient(90deg, #4dd, #2af);
  width: 0;
  animation: pgrow 2.6s linear forwards;
}
@keyframes pgrow { to { width: 100%; } }

/* shutdown */
.shutdown-screen {
  position: fixed; inset: 0;
  background: #000;
  color: #FFA500;
  font-family: 'Fixedsys', 'Courier New', monospace;
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  z-index: 999999;
  text-shadow: 0 0 8px rgba(255,165,0,0.6);
}

/* bsod */
.bsod {
  position: fixed; inset: 0;
  background: #0000aa;
  color: #fff;
  font-family: 'Fixedsys', 'Courier New', monospace;
  font-size: 14px;
  padding: 60px;
  z-index: 999998;
  white-space: pre-wrap;
}
.bsod h2 { font-size: 18px; background: #fff; color: #0000aa; padding: 4px 12px; display: inline-block; margin-bottom: 18px; }

/* terminal */
.terminal {
  background: #000;
  color: #d4d4d4;
  font-family: 'Fixedsys', 'Courier New', monospace;
  font-size: 13px;
  padding: 8px 12px;
  flex: 1;
  overflow: auto;
  white-space: pre-wrap;
  margin: 2px;
  border: 2px solid;
  border-color: #404040 #FFFFFF #FFFFFF #404040;
}
.terminal .prompt { color: #5cd35c; white-space: nowrap; flex-shrink: 0; }
.terminal form {
  display: flex !important;
  align-items: baseline;
  gap: 0;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}
.terminal input {
  background: transparent; border: none; outline: none;
  color: #d4d4d4;
  font-family: 'Fixedsys', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.2;
  flex: 1;
  padding: 0;
  margin: 0;
  vertical-align: baseline;
}
.terminal > div { line-height: 1.2; }

/* Center desktop logo / watermark */
.desktop-logo {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0.85;
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,0.35));
}
.desktop-logo-mark { width: 180px; height: 180px; }
.desktop-logo-text {
  margin-top: 14px;
  font-family: 'MS Sans Serif', 'Tahoma', sans-serif;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 6px;
  color: #fff;
  text-shadow: 2px 2px 0 #000, 0 0 12px rgba(0,0,0,0.5);
}
.desktop-logo-text .dot { color: #FFD45A; }
.desktop-logo-sub {
  margin-top: 4px;
  font-family: 'MS Sans Serif', 'Tahoma', sans-serif;
  font-size: 11px;
  letter-spacing: 4px;
  color: #cfeaea;
  text-shadow: 1px 1px 0 #000;
}

/* tooltip */
.tip {
  position: absolute;
  background: #FFFFE0;
  border: 1px solid #000;
  padding: 2px 6px;
  font-size: 11px;
  z-index: 1000;
  pointer-events: none;
  white-space: nowrap;
}

/* welcome tip */
.tip-of-the-day { padding: 14px; display: flex; gap: 14px; }
.tip-of-the-day .icon {
  width: 64px; height: 64px;
  flex-shrink: 0;
  background: #FFFFCC;
  border: 2px solid;
  border-color: #FFFFFF #404040 #404040 #FFFFFF;
  display: grid; place-items: center;
  font-size: 32px;
}
.tip-of-the-day .text { font-size: 11px; line-height: 1.5; }
.tip-of-the-day h3 { font-size: 13px; font-weight: 700; margin-bottom: 6px; }

/* pdf viewer */
.pdf-viewer { flex: 1; display: flex; flex-direction: column; background: #696969; }
.pdf-toolbar {
  background: var(--w95-gray);
  border-bottom: 1px solid var(--w95-dark);
  padding: 4px;
  display: flex; gap: 4px;
}
.pdf-frame { flex: 1; background: #696969; padding: 12px; overflow: auto; }
.pdf-frame iframe { width: 100%; height: 100%; min-height: 600px; border: 1px solid #000; background: #fff; }

/* selection rectangle */
.selection-rect {
  position: absolute;
  border: 1px dotted #fff;
  background: rgba(0,0,128,0.2);
  pointer-events: none;
  z-index: 50;
}

/* matrix overlay */
.matrix-overlay {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  font-family: 'Fixedsys', 'Courier New', monospace;
  color: #5cd35c; font-size: 14px;
  overflow: hidden;
}

/* fireworks confetti container */
.fx-canvas {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
}

/* clock blink colon */
.tray .clock .blink {
  animation: blink 1.6s linear infinite;
}
@keyframes blink {
  50% { opacity: 0.3; }
}

/* hourglass cursor */
.busy { cursor: progress; }

a { color: var(--w95-navy); text-decoration: underline; }

::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: #fff; box-shadow: inset 1px 1px 0 #404040; }
::-webkit-scrollbar-thumb { background: var(--w95-gray); border: 1px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF; }
::-webkit-scrollbar-button {
  display: block; width: 16px; height: 16px;
  background: var(--w95-gray); border: 1px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF;
}
::-webkit-scrollbar-corner { background: var(--w95-gray); }


/* ============================================================
   BEVEL — corner mascot styles
============================================================ */
.bevel {
  position: fixed;
  z-index: 9000;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  outline: none;
  transition: left 0.9s cubic-bezier(.4,1.4,.5,1),
              top  0.9s cubic-bezier(.4,1.4,.5,1),
              right 0.9s cubic-bezier(.4,1.4,.5,1),
              bottom 0.9s cubic-bezier(.4,1.4,.5,1);
  animation: bevel-enter 0.9s ease-out 1;
}
@keyframes bevel-enter {
  from { opacity: 0; transform: translateY(20px) scale(0.6); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
.bevel:focus-visible .bevel-frame {
  outline: 2px dashed #FFFFE1;
  outline-offset: 4px;
}
.bevel-frame {
  position: relative;
  width: 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bevel-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* === Corner positions === */
.bevel-br { right: 24px; bottom: 56px; }
.bevel-bl { left: 24px;  bottom: 56px; }
.bevel-tr { right: 24px; top: 24px;    }
.bevel-tl { left: 24px;  top: 24px;    }

/* === Sprite base === */
.bevel-svg {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,0.18));
  transform-origin: center bottom;
}

/* === Breathing (always on, subtle, while not sleeping) === */
.bevel-pose-sit .bevel-svg {
  animation: bevel-breathe 3s ease-in-out infinite;
}
@keyframes bevel-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1px); }
}

/* === Sleep — slow swell, Z particles drift === */
.bevel-pose-sleep .bevel-svg {
  animation: bevel-sleep-breathe 4s ease-in-out infinite;
}
@keyframes bevel-sleep-breathe {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.02, 0.98); }
}
.bevel-zzz text {
  animation: bevel-zzz-drift 3.5s ease-in-out infinite;
}
.bevel-zzz text:nth-child(2) { animation-delay: 1.2s; }
.bevel-zzz text:nth-child(3) { animation-delay: 2.4s; }
@keyframes bevel-zzz-drift {
  0%   { opacity: 0; transform: translate(0, 4px); }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(2px, -6px); }
}

/* === Tail wag (default gentle) === */
.bevel-tail {
  transform-origin: 37px 27px;
  animation: bevel-tail-rest 4s ease-in-out infinite;
}
@keyframes bevel-tail-rest {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}
.bevel-act-wag .bevel-tail {
  animation: bevel-tail-wag 0.28s ease-in-out infinite alternate !important;
}
@keyframes bevel-tail-wag {
  from { transform: rotate(-22deg); }
  to   { transform: rotate(28deg); }
}
.bevel-pose-sleep .bevel-tail { animation: none; }

/* === Head tilt === */
.bevel-head {
  transition: transform 0.4s cubic-bezier(.4,1.6,.4,1);
}
.bevel-act-tilt-l .bevel-head { transform: rotate(-14deg); }
.bevel-act-tilt-r .bevel-head { transform: rotate(14deg);  }

/* === Jump (excited) === */
.bevel-act-jump .bevel-svg {
  animation: bevel-breathe 3s ease-in-out infinite, bevel-jump 1s cubic-bezier(.3,1.7,.5,1) 1;
}
@keyframes bevel-jump {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-22px); }
  55%  { transform: translateY(-22px) rotate(-3deg); }
  100% { transform: translateY(0); }
}

/* === Spin (easter egg) === */
.bevel-act-spin .bevel-svg {
  animation: bevel-breathe 3s ease-in-out infinite, bevel-spin 0.7s ease-in-out 1;
}
@keyframes bevel-spin {
  from { transform: rotate(0deg)   scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  to   { transform: rotate(360deg) scale(1); }
}

/* === Sway with music === */
.bevel-music .bevel-svg {
  animation: bevel-breathe 3s ease-in-out infinite, bevel-sway 1.05s ease-in-out infinite alternate;
}
@keyframes bevel-sway {
  from { transform: rotate(-5deg); }
  to   { transform: rotate(5deg); }
}

/* === Flop (belly rub mode) === */
.bevel-act-flop .bevel-svg {
  animation: bevel-flop 4s cubic-bezier(.4,1.6,.4,1) 1;
}
@keyframes bevel-flop {
  0%   { transform: rotate(0)   translateY(0); }
  15%  { transform: rotate(-90deg) translateY(8px); }
  85%  { transform: rotate(-90deg) translateY(8px); }
  100% { transform: rotate(0)   translateY(0); }
}

/* === Yawn (waking from sleep) === */
.bevel-act-yawn .bevel-svg {
  animation: bevel-yawn 1.2s ease-out 1;
}
@keyframes bevel-yawn {
  0%   { transform: scale(0.94); }
  30%  { transform: scale(1.06, 0.96); }
  100% { transform: scale(1); }
}

/* === SPEECH BUBBLE === */
.bevel-bubble {
  position: absolute;
  background: #FFFFE1;
  border: 1px solid #000;
  padding: 6px 10px 7px;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  font-size: 11px;
  line-height: 1.35;
  color: #000;
  max-width: 220px;
  white-space: normal;
  box-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0,0,0,0.12);
  pointer-events: none;
  animation: bevel-bubble-in 0.32s cubic-bezier(.4,1.7,.4,1) 1;
  z-index: 2;
}
.bevel-bubble i { font-style: italic; }
@keyframes bevel-bubble-in {
  from { opacity: 0; transform: translateY(6px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
/* Bubble position: above head for bottom corners, below head for top corners */
.bb-br, .bb-bl { bottom: calc(100% - 18px); }
.bb-tr, .bb-tl { top: calc(100% - 18px); }
.bb-br { right: 36px;  }
.bb-bl { left: 36px;   }
.bb-tr { right: 36px;  }
.bb-tl { left: 36px;   }

.bevel-bubble-tail {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #FFFFE1;
  border: 1px solid #000;
  border-top: none;
  border-left: none;
}
.bb-br .bevel-bubble-tail,
.bb-bl .bevel-bubble-tail {
  bottom: -5px;
  transform: rotate(45deg);
}
.bb-br .bevel-bubble-tail { right: 28px; }
.bb-bl .bevel-bubble-tail { left: 28px;  }
.bb-tr .bevel-bubble-tail,
.bb-tl .bevel-bubble-tail {
  top: -5px;
  transform: rotate(-135deg);
}
.bb-tr .bevel-bubble-tail { right: 28px; }
.bb-tl .bevel-bubble-tail { left: 28px;  }

/* Reduced motion — kill rotations, keep fades */
@media (prefers-reduced-motion: reduce) {
  .bevel,
  .bevel-svg,
  .bevel-tail,
  .bevel-head,
  .bevel-zzz text {
    animation: none !important;
    transition: opacity 0.3s !important;
  }
  .bevel-act-tilt-l .bevel-head,
  .bevel-act-tilt-r .bevel-head { transform: none; }
}

/* ============================================================
   MOBILE / TABLET RESPONSIVE — phones + portrait tablets
   Strategy: windows go full-screen, no drag/resize, single-app
   focus at a time. Taskbar becomes a touch-friendly app switcher.
============================================================ */
@media (max-width: 900px) {
  /* === Disable 3D scene transforms on mobile (perf + simpler layout) === */
  .stage3d { transform: none !important; }
  .scene::before { display: none; }

  /* === Windows: forced full-screen, no drag/resize/3D effects === */
  .win {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    border-width: 1px !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    transition: opacity 0.2s ease-out !important;
  }
  .win:not(.focused) { filter: none !important; }
  .win.dragging { transform: none !important; }
  .win-resize { display: none !important; }

  /* Title bar bigger and touch-friendly */
  .tbar {
    height: 32px;
    padding: 4px 4px 4px 8px;
    cursor: default !important;
    gap: 6px;
  }
  .tbar .ttl { font-size: 12px; }
  .tbar .ico { width: 18px; height: 18px; }
  .tctrls { gap: 4px; }
  .tctrl {
    width: 30px;
    height: 26px;
    font-size: 14px;
  }

  /* === Desktop & taskbar === */
  .desktop { bottom: 44px; }
  .desktop-logo-mark { width: 110px; height: 110px; }
  .desktop-logo-text { font-size: 28px; letter-spacing: 3px; margin-top: 10px; }
  .desktop-logo-sub { font-size: 10px; letter-spacing: 2px; }

  /* Desktop icons — touch-friendly grid */
  .dicons {
    top: 16px; left: 16px;
    grid-template-columns: repeat(2, 84px);
    gap: 14px 12px;
  }
  .dicon { width: 84px; padding: 6px 2px; }
  .dicon .ico { width: 40px; height: 40px; }
  .dicon .lbl { font-size: 11px; max-width: 84px; }

  /* === Taskbar — taller for touch === */
  .taskbar {
    height: 44px;
    padding: 4px;
    gap: 4px;
  }
  .startbtn {
    height: 36px;
    min-width: 76px;
    font-size: 14px;
    padding: 0 12px 0 10px;
    gap: 6px;
  }
  .startbtn .logo { width: 20px; height: 20px; }

  /* Task switcher — icon-only buttons, horizontal scroll */
  .tasks {
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .tasks::-webkit-scrollbar { display: none; }
  .taskitem {
    min-width: 38px;
    max-width: 38px;
    height: 34px;
    padding: 0;
    justify-content: center;
    flex-shrink: 0;
  }
  .taskitem .lbl { display: none; }
  .taskitem .ico16 { width: 22px; height: 22px; }

  /* Tray — keep clock + sound, hide rest */
  .tray { height: 34px; padding: 2px 6px; gap: 4px; }
  .tray-clock { font-size: 11px; }
  .tray-icon { width: 20px; height: 20px; }
  .tray-en, .tray-dot { display: none !important; }

  /* === Start menu becomes a bottom sheet with inline submenus === */
  .startmenu {
    left: 0 !important;
    right: 0 !important;
    bottom: 44px !important;
    width: 100% !important;
    max-height: 70vh;
    overflow-y: auto;
    border-bottom-width: 0 !important;
  }
  .startmenu .strip { width: 32px; font-size: 16px; padding: 8px 0; }
  .smitem {
    padding: 12px 14px;
    font-size: 13px;
    gap: 12px;
  }
  .smitem .ico { width: 28px; height: 28px; }
  /* Expand submenus inline — no hover on touch */
  .submenu {
    position: static !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    padding-left: 28px !important;
    border: none !important;
    box-shadow: none !important;
    background: rgba(0,0,128,0.04);
  }
  .submenu .submenu { padding-left: 24px !important; }
  .smitem .arrow { display: none; }
  .smitem.divider { margin: 4px 0; }

  /* === Hide ornamental things === */
  .np-widget,
  .bevel,
  .twk-panel,
  .twk-fab { display: none !important; }

  /* === Window body / buttons / inputs touch sizing === */
  .wbody { padding: 8px; font-size: 12px; }
  .btn {
    min-height: 34px;
    min-width: 80px;
    padding: 6px 14px;
    font-size: 12px;
  }
  .tbbtn {
    min-height: 30px;
    padding: 4px 10px;
    font-size: 12px;
  }
  input.w95-input, textarea.w95-input {
    font-size: 16px; /* prevents iOS auto-zoom on focus */
    padding: 6px 8px;
    min-height: 34px;
  }

  /* === Menubar — let it wrap if needed === */
  .menubar { flex-wrap: wrap; padding: 2px; }
  .menubar button { padding: 6px 10px; font-size: 12px; }

  /* === Status bar === */
  .statusbar { padding: 3px; }

  /* === About pane stacks vertically === */
  .about-tabs { flex-wrap: wrap; padding: 4px 4px 0 4px; }
  .about-tab { padding: 6px 12px; font-size: 12px; }
  .about-pane { padding: 10px; }
  .about-pane .row { flex-direction: column; gap: 10px; }
  .about-pane .photo { width: 96px; height: 96px; margin: 0 auto; }
  .about-pane .kv { grid-template-columns: 90px 1fr; font-size: 11px; }

  /* === Explorer — stack tree above content === */
  .explorer { flex-direction: column; }
  .exp-tree {
    width: 100%;
    max-height: 130px;
    margin: 0 0 4px 0;
  }
  .exp-content {
    margin-left: 0;
    margin-top: 0;
    padding: 6px;
  }
  .icogrid {
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 6px;
  }
  .icogrid .item { padding: 6px 2px; }
  .detailtable th, .detailtable td { padding: 4px 6px; font-size: 11px; }

  /* === Media player — vertical layout === */
  .mp-body { flex-direction: column; padding: 4px; }
  .mp-left {
    width: 100%;
    max-height: 180px;
  }
  .mp-right { width: 100%; }
  .mp-embed iframe { height: 220px; }
  .viz { height: 70px; }
  .transport { flex-wrap: wrap; gap: 4px; padding: 4px; }
  .tp-btn { width: 36px; height: 32px; }
  .marquee { width: 100%; flex-basis: 100%; height: 22px; }
  .vol {
    width: 100%;
    border-left: none;
    box-shadow: none;
    padding: 4px 0;
    justify-content: center;
  }
  .vol .w95-trackbar { width: 60%; }

  /* === Photos / photo viewer === */
  .photo-viewer { flex-direction: column; padding: 8px; gap: 8px; }
  .photo-viewer .full { width: 100%; }
  .photo-viewer .full .img { height: 240px; }
  .photo-viewer .meta { width: 100%; }
  .photogrid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    padding: 6px;
  }
  .photogrid .photo { width: auto; }
  .photogrid .photo .img { width: 100%; height: 90px; }

  /* === Awards === */
  .awards-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    padding: 10px;
  }
  .award-card .trophy { width: 56px; height: 56px; }
  .award-detail { padding: 10px; }
  .award-detail .photo-frame img { max-height: 220px; }

  /* === Skills === */
  .skill-row {
    grid-template-columns: 1fr 60px;
    grid-template-areas: "name pct" "bar bar";
    gap: 4px 8px;
    padding: 8px 6px;
    font-size: 12px;
  }
  .skill-row > :first-child { grid-area: name; }
  .skill-row .skill-bar { grid-area: bar; height: 14px; }
  .skill-row > :last-child { grid-area: pct; text-align: right; }
  .skills-cats { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }

  /* === Network === */
  .netgrid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    padding: 8px;
  }
  .netgrid .item .ico { width: 44px; height: 44px; }

  /* === Projects (Properties view) === */
  .proj-banner {
    height: auto;
    min-height: 70px;
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .proj-banner .pbtxt h2 { font-size: 16px; }
  .proj-banner .pbicon { width: 44px; height: 44px; }
  .proj-banner .pbmetric { position: static; margin-top: 4px; }
  .proj-tabs { flex-wrap: wrap; }
  .proj-tab { padding: 6px 10px; font-size: 12px; }
  .proj-pane { padding: 8px; }
  .proj-pane .meta {
    grid-template-columns: 90px 1fr;
    font-size: 11px;
  }
  .proj-pane .links { gap: 6px; }

  /* === Contact form — stack labels above inputs === */
  .run-dialog { padding: 12px; gap: 8px; }
  .run-dialog .row {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .run-dialog .row label { width: auto !important; padding-top: 0 !important; }
  .run-dialog input { flex: 1 1 auto; }

  /* === Date/Time dialog — fit screen === */
  .dt-dialog {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: 380px;
    margin: 0 auto;
  }
  .dt-body { flex-direction: column; gap: 8px; padding: 10px; }

  /* === Volume popup === */
  .vol-popup { right: 6px; bottom: 48px; width: 130px; }

  /* === Notepad / Terminal — readable on small screens === */
  .notepad-body {
    font-size: 14px;
    padding: 8px 10px;
  }
  .terminal { font-size: 13px; padding: 8px; }

  /* === PDF viewer === */
  .pdf-frame { padding: 6px; }
  .pdf-frame iframe { min-height: 380px; }

  /* === Tip of the day === */
  .tip-of-the-day { flex-direction: column; align-items: center; text-align: center; padding: 12px; }

  /* === Boot / splash / BSOD === */
  .boot { padding: 14px 18px; font-size: 12px; }
  .boot .skip { bottom: 14px; right: 14px; padding: 8px 14px; }
  .bsod { padding: 24px 18px; font-size: 12px; }
  .splash .logo { width: 72px; height: 80px; margin-bottom: 16px; }
  .splash .word { font-size: 28px; }
  .splash .pbar { width: 70%; max-width: 240px; }

  /* === Scrollbar slimmer on mobile === */
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-button { display: none; }

  /* === Touch input behavior === */
  html, body { touch-action: manipulation; }
  .wbody, .terminal, .notepad-body, .proj-pane, .about-pane,
  .exp-content, .mp-left, .photogrid, .awards-grid, .icogrid,
  textarea, input { touch-action: pan-y; }
}

/* ============================================================
   PHONE — very narrow (under 480px)
============================================================ */
@media (max-width: 480px) {
  .startbtn { min-width: 56px; padding: 0 8px; font-size: 12px; }
  .startbtn span:not(.logo) { display: none; }

  .tbar .ttl { font-size: 11px; }
  .tctrl { width: 28px; height: 24px; }

  .dicons {
    grid-template-columns: repeat(2, 78px);
    gap: 10px 8px;
  }
  .dicon { width: 78px; }
  .dicon .lbl { font-size: 10px; }

  .desktop-logo-mark { width: 80px; height: 80px; }
  .desktop-logo-text { font-size: 22px; letter-spacing: 2px; }

  .about-pane .kv { grid-template-columns: 80px 1fr; font-size: 10px; }
  .proj-pane .meta { grid-template-columns: 80px 1fr; }

  .photo-viewer .full .img { height: 180px; }
  .mp-embed iframe { height: 180px; }

  .splash .word { font-size: 22px; }
  .splash .micro { font-size: 10px; }
}

/* ============================================================
   LANDSCAPE PHONE — limited vertical space
============================================================ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .taskbar { height: 36px; }
  .desktop { bottom: 36px; }
  .startmenu { bottom: 36px !important; max-height: 65vh; }
  .startbtn { height: 30px; }
  .tbar { height: 28px; }
  .mp-embed iframe { height: 160px; }
  .photo-viewer .full .img { height: 160px; }
}