/* ============ 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: #3f86e0;
  overflow: hidden;
}
.splash-photo {
  position: absolute; inset: 0;
  background: url('assets/loading-splash.jpg') center/cover no-repeat;
}
/* Win95-style boot bar: full-width strip pinned to the very bottom */
.splash-bar {
  position: absolute;
  left: 0; bottom: 0; top: auto;
  width: 100%;
  height: 3.4%;
  background: #061230;
  box-sizing: border-box;
  overflow: hidden;
}
.splash-fill {
  height: 100%;
  background: linear-gradient(90deg, #001d8a 0%, #0a5adf 55%, #2ab6ff 100%);
  transition: width 0.15s linear;
}

/* ============ Volumetric scene ============ */
.scene {
  position: fixed; inset: 0;
  background: #008080; /* original Win95 desktop teal — no wallpaper image */
  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: 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;
}
button.tray-icon, button.tray-clock {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  appearance: none;
}
button.tray-icon:focus-visible, button.tray-clock:focus-visible {
  outline: 1px dotted #000;
}
.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 {
  /* Modern vertical range (slider-vertical is deprecated) */
  writing-mode: vertical-lr;
  direction: rtl;
  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: #020402;
  color: #33ff66;
  text-shadow: 0 0 4px rgba(51, 255, 102, 0.3);
  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: #041006; color: #33ff66; border: 1px solid #1d5c33;
  text-shadow: none;
  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; }
}

/* ============================================================
   Winamp skin — Media Player only (.mp-winamp scope)
============================================================ */
.mp-winamp .menubar {
  background: linear-gradient(180deg, #3f3f5a, #23233a);
  border-bottom: 1px solid #14141f;
}
.mp-winamp .menubar button { color: #cfcfe8; }
.mp-winamp .menubar button:hover { background: #4a4a6a; color: #fff; }
.mp-winamp .mp-body { background: #23233a; }
.mp-winamp .mp-left { background: #101020; border-right: 1px solid #3a3a55; }
.mp-winamp .mp-lh {
  background: linear-gradient(180deg, #3f3f5a, #23233a);
  color: #d5a94a; font-weight: 700; letter-spacing: 1px;
  border-bottom: 1px solid #14141f;
}
.mp-winamp .pl-item { color: #35e635; font-family: Fixedsys, Consolas, monospace; }
.mp-winamp .pl-item:hover { background: #1a1a35; }
.mp-winamp .pl-item.active { background: #0000C6; color: #fff; }
.mp-winamp .viz { background: #000; border: 1px solid #3a3a55; }
.mp-winamp .transport {
  background: linear-gradient(180deg, #3f3f5a, #23233a);
  border-top: 1px solid #14141f;
}
.mp-winamp .tp-btn {
  background: linear-gradient(180deg, #6a6a8a, #3a3a55);
  border-color: #8a8aaa #14141f #14141f #8a8aaa;
}
.mp-winamp .tp-btn:active { border-color: #14141f #8a8aaa #8a8aaa #14141f; }
.mp-winamp .tp-btn svg polygon, .mp-winamp .tp-btn svg rect { fill: #e8e8f5; }
.mp-winamp .marquee { background: #000; border: 1px solid #3a3a55; }
.mp-winamp .marquee-text { color: #35e635; font-family: Fixedsys, Consolas, monospace; }
.mp-winamp .statusbar { background: #23233a; }
.mp-winamp .statusbar .scell {
  border-color: #14141f #3a3a55 #3a3a55 #14141f;
  color: #35e635; font-family: Fixedsys, Consolas, monospace;
}
.mp-winamp .vol input.w95-trackbar { accent-color: #d5a94a; }

/* ============================================================
   ROVER — XP search pup renderer (engine reuses .bevel classes)
============================================================ */
.rover .bevel-frame { width: 160px; }
.rover-img {
  width: 150px;
  height: 150px;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(2px 5px 4px rgba(0,0,0,0.35));
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;   /* clicks land on the .bevel wrapper */
}
@media (max-width: 900px) {
  .rover .bevel-frame { width: 120px; }
  .rover-img { width: 110px; height: 110px; }
}

/* devarv AI reasoning-trace dots */
.rt-dots { animation: rtBlink 1s steps(3) infinite; }
@keyframes rtBlink { 0% { opacity: 0.3; } 50% { opacity: 1; } 100% { opacity: 0.3; } }

/* ============ CRT screen effect (awge.com-style TV treatment) ============
   Layered, GPU-cheap (opacity / background-position / transform only).
   Decoration above every phase (boot, splash, desktop) — the OS on a real,
   humming, slightly imperfect cathode-ray monitor.
   Toggle: Run box → "crt" (adds .no-crt on <html>, saved to localStorage).
   Diegetic power: the chin power button toggles .tv-off on <html> (crt-fx.js).

   Z-INDEX MAP — slot new layers deliberately:
     .crt           2000000   overlay stack INSIDE the tube (curves with it)
     .crt-power     2900000   power-on beam / power-off dot
     .tv-frame      3000000   chassis: shell + bezel + chin (crisp, outside barrel)
     .tv-spill      3050000   ambient room glow from the screen (light source)
     .tv-power-btn  3200000   the ONE interactive chassis element */
.crt {
  position: fixed; inset: 0;
  z-index: 2000000;
  pointer-events: none;
  overflow: hidden;
}
.crt > div { position: absolute; inset: 0; }

/* aperture-grille RGB stripes. Base opacity 0.55 leaves headroom for the
   degauss color-fringe pulse (opacity → 1 ≈ 1.8× fringe) at power-on. */
.crt-rgb {
  background: repeating-linear-gradient(90deg,
    rgba(255, 0, 60, 0.08) 0 1px,
    rgba(0, 255, 90, 0.062) 1px 2px,
    rgba(0, 80, 255, 0.08) 2px 3px);
  opacity: 0.55;
  animation: crtRgbDegauss 1.1s linear both;
}
@keyframes crtRgbDegauss {
  0%, 10% { opacity: 1; }      /* fringe pulse during the degauss wobble */
  14%, 100% { opacity: 0.55; }
}

/* horizontal scanlines, slowly crawling */
.crt-scan {
  background: repeating-linear-gradient(0deg,
    rgba(0, 0, 0, 0.16) 0 1px,
    transparent 1px 3px);
  animation: crtScan 8s linear infinite;
}
@keyframes crtScan { from { background-position: 0 0; } to { background-position: 0 96px; } }

/* TV static. Second (one-shot) animation: dim static during the degauss
   beat, then a pure-static burst right as the picture snaps open. */
.crt-noise {
  background: url('assets/crt-noise.png') repeat;
  background-size: 128px 128px;
  opacity: 0.16;
  animation: crtNoise 0.5s steps(1) infinite, crtNoiseSnap 1.1s linear both;
}
@keyframes crtNoise {
  0%   { background-position: 0 0; }
  17%  { background-position: -43px 19px; }
  33%  { background-position: 21px -37px; }
  50%  { background-position: -11px 51px; }
  67%  { background-position: 57px 7px; }
  83%  { background-position: -29px -58px; }
  100% { background-position: 13px 33px; }
}
@keyframes crtNoiseSnap {
  0%, 10%  { opacity: 0.34; }   /* faint glow-static while the tube warms */
  13%, 70% { opacity: 0.16; }
  73%, 78% { opacity: 0.5; }    /* white static as the picture snaps open */
  97%, 100%{ opacity: 0.16; }   /* ~400ms decay back to normal */
}

/* rolling brightness band drifting down the tube */
.crt-band {
  inset: auto 0;
  top: 0; height: 30vh;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.035) 45%,
    rgba(0, 0, 0, 0.05) 55%,
    transparent 100%);
  animation: crtBand 9s linear infinite;
}
@keyframes crtBand { from { transform: translateY(-35vh); } to { transform: translateY(135vh); } }

/* brightness flicker — brief, rare blips */
.crt-flicker { background: #fff; opacity: 0; animation: crtFlicker 5s steps(1) infinite; }
@keyframes crtFlicker {
  0%, 100% { opacity: 0; }
  7%   { opacity: 0.02; }
  7.6% { opacity: 0; }
  41%  { opacity: 0.028; }
  41.4%{ opacity: 0; }
  76%  { opacity: 0.015; }
  76.8%{ opacity: 0; }
}

/* phosphor bloom — soft white lift breathing on the flicker rhythm.
   Opacity-only; no blur/backdrop-filter. */
.crt-bloom {
  background: radial-gradient(90% 70% at 50% 42%, rgba(210, 235, 255, 0.05), transparent 74%);
  opacity: 0.7;
  animation: crtBloom 5s steps(1) infinite;
}
@keyframes crtBloom {
  0%, 100% { opacity: 0.7; }
  7%    { opacity: 1; }
  7.6%  { opacity: 0.7; }
  41%   { opacity: 1; }
  41.4% { opacity: 0.7; }
  76%   { opacity: 0.9; }
  76.8% { opacity: 0.7; }
}

/* channel-flip static overlay — idle until crt-fx.js adds .flip / .flip-micro.
   White tint + noise in one element so a single opacity ramp does both the
   brightness pop and the static. */
.crt-flip {
  background:
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)),
    url('assets/crt-noise.png') repeat;
  background-size: auto, 96px 96px;
  opacity: 0;
}
.crt.flip .crt-flip { animation: crtFlipAnim 0.26s steps(1) both; }
.crt.flip-micro .crt-flip { animation: crtFlipMicroAnim 0.12s steps(1) both; }
@keyframes crtFlipAnim {
  0%  { opacity: 0.85; background-position: 0 0, 0 0; }
  25% { opacity: 0.9;  background-position: 0 0, -37px 22px; }
  45% { opacity: 0.35; background-position: 0 0, 19px -41px; }
  65% { opacity: 0.12; background-position: 0 0, -8px 13px; }
  100%{ opacity: 0; }
}
@keyframes crtFlipMicroAnim {
  0%  { opacity: 0.45; background-position: 0 0, 0 0; }
  50% { opacity: 0.15; background-position: 0 0, -24px 17px; }
  100%{ opacity: 0; }
}

/* tube vignette */
.crt-vignette {
  background: radial-gradient(ellipse at 50% 50%,
    transparent 58%,
    rgba(0, 0, 0, 0.16) 86%,
    rgba(0, 0, 0, 0.4) 100%);
}
/* corner shadowing — real tubes fall off ~2× faster into corners */
.crt-corners {
  background:
    radial-gradient(28% 34% at 0% 0%,     rgba(0, 0, 0, 0.38), transparent 70%),
    radial-gradient(28% 34% at 100% 0%,   rgba(0, 0, 0, 0.38), transparent 70%),
    radial-gradient(28% 34% at 0% 100%,   rgba(0, 0, 0, 0.42), transparent 70%),
    radial-gradient(28% 34% at 100% 100%, rgba(0, 0, 0, 0.42), transparent 70%);
}
/* curved glass: rounded screen corners (black outside the radius) + a
   two-highlight glass model — top glare, a smaller off-center window
   streak, and a barely-there viewer reflection bottom-center. */
.crt-glass {
  border-radius: 1vmax;
  box-shadow: 0 0 0 100vmax #000;
  background:
    radial-gradient(120% 55% at 50% -14%, rgba(255, 255, 255, 0.045), transparent 60%),
    radial-gradient(26% 13% at 68% 22%,   rgba(255, 255, 255, 0.035), transparent 72%),
    radial-gradient(30% 16% at 50% 97%,   rgba(0, 0, 0, 0.02), transparent 70%);
}

/* ---- the curved tube: whole app barrel-distorted through the SVG filter ---- */
body { background: #000; }
#tv-screen {
  position: fixed;
  inset: 1.8vmax 1.8vmax 3.4vmax;
  border-radius: 0.8vmax;
  overflow: hidden;                /* dragged windows clip at the glass edge */
  filter: url(#crtBarrel);
  transform-origin: 50% 50%;
}
/* #tv-roll wraps the PICTURE only (not the glass), so power on/off can
   collapse the image while the dark tube keeps catching room light. Also
   the target for retrace rolls and channel-flip tears. */
#tv-roll {
  position: absolute; inset: 0;
  transform-origin: 50% 50%;
  animation: crtTubeOn 1.1s cubic-bezier(0.25, 0.7, 0.3, 1) both;
}
/* Power-on: degauss THUNK wobble → collapse to spark → beam draws the
   line → picture snaps open (blooming upward first) → v-hold retrace
   settle. Transform/opacity only. */
@keyframes crtTubeOn {
  0%   { transform: translateY(0) skewX(0.55deg)  scale(1.01, 1.012);  opacity: 0.16; }
  3%   { transform: translateY(0) skewX(-0.42deg) scale(1.006, 1.008); opacity: 0.2; }
  6%   { transform: translateY(0) skewX(0.18deg)  scale(1.002, 1.003); opacity: 0.16; }
  9%   { transform: translateY(0) skewX(-0.06deg) scale(1, 1);         opacity: 0.12; }
  11%  { transform: translateY(0) skewX(0deg)     scale(1, 1);         opacity: 0.1; }
  13%  { transform: translateY(0) skewX(0deg)     scale(0.05, 0.003);  opacity: 0.5; }
  22%  { transform: translateY(0) skewX(0deg)     scale(0.05, 0.003);  opacity: 0.7; }
  42%  { transform: translateY(0) skewX(0deg)     scale(1, 0.004);     opacity: 1; }
  58%  { transform: translateY(0) skewX(0deg)     scale(1, 0.004);     opacity: 1; }
  72%  { transform: translateY(-0.5%) skewX(0deg) scale(1, 1.045);     opacity: 1; }
  78%  { transform: translateY(0.1%) skewX(0deg)  scale(1, 0.992);     opacity: 1; }
  84%  { transform: translateY(0) skewX(0deg)     scale(1, 1);         opacity: 1; }
  88%  { transform: translateY(-6px) skewX(0deg)  scale(1, 1);         opacity: 1; }
  94%  { transform: translateY(2px) skewX(0deg)   scale(1, 1);         opacity: 1; }
  100% { transform: translateY(0) skewX(0deg)     scale(1, 1);         opacity: 1; }
}
/* the white-hot beam + bloom that sells the turn-on */
.crt-power {
  position: fixed;
  left: 1.8vmax; right: 1.8vmax; top: 50%;
  height: 2px; margin-top: -1px;
  background: #fff;
  border-radius: 2px;
  box-shadow:
    0 0 22px 6px rgba(255, 255, 255, 0.95),
    0 0 90px 24px rgba(170, 215, 255, 0.55);
  z-index: 2900000;
  pointer-events: none;
  transform-origin: 50% 50%;
  animation: crtPowerLine 1.1s ease-out both;
  opacity: 0;
}
@keyframes crtPowerLine {
  0%, 13% { transform: translateY(0) scale(0.02, 1);        opacity: 0; }
  15%  { transform: translateY(0) scale(0.02, 1);           opacity: 1; }    /* spark pops */
  42%  { transform: translateY(0) scale(1, 1);              opacity: 1; }    /* sweeps across */
  58%  { transform: translateY(0) scale(1, 1);              opacity: 0.95; }
  72%  { transform: translateY(-1.4vmax) scale(1, 260);     opacity: 0.22; } /* bloom — upward first */
  100% { transform: translateY(-0.7vmax) scale(1, 330);     opacity: 0; }
}

/* ---- first-visit power gate (.tv-boot-gate + .tv-off on <html>) ----
   The browser blocks audio until the first gesture, so on a fresh visit the
   monitor waits in standby and the visitor's first click IS the power-on —
   beam and buzz in sync. The gate skips the off-collapse animation (nothing
   to collapse yet) and shows a phosphor hint. */
.tv-boot-gate #tv-roll { animation: none !important; opacity: 0; visibility: hidden; }
.tv-boot-gate .crt-power { animation: none !important; opacity: 0; }
.tv-gate-hint {
  display: none;
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3000020;
  pointer-events: none;
  font-family: 'Fixedsys', 'Courier New', monospace;
  font-size: 15px;
  letter-spacing: 2px;
  color: #33ff66;
  text-shadow: 0 0 8px rgba(51, 255, 102, 0.5);
  animation: gatePulse 2.2s ease-in-out infinite;
}
html.tv-boot-gate .tv-gate-hint { display: block; }
@keyframes gatePulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ---- diegetic power-off (.tv-off on <html>, set by crt-fx.js) ----
   Picture → horizontal line (~120ms) → centered white dot lingers ~600ms
   → fades. App keeps running underneath; only the picture hides. */
.tv-off #tv-roll { animation: crtTubeOff 0.65s cubic-bezier(0.3, 0.7, 0.3, 1) both; }
@keyframes crtTubeOff {
  0%   { transform: scale(1, 1);         opacity: 1; }
  9%   { transform: scale(1, 0.004);     opacity: 1; }    /* collapse to line */
  32%  { transform: scale(0.012, 0.004); opacity: 0.9; }  /* line shrinks to dot */
  78%  { transform: scale(0.012, 0.004); opacity: 0.6; }  /* dot lingers */
  100% { transform: scale(0.012, 0.004); opacity: 0; }
}
.tv-off .crt-power { animation: crtPowerOffDot 0.65s ease-out both; }
@keyframes crtPowerOffDot {
  0%   { transform: scale(1, 1);       opacity: 0; }
  9%   { transform: scale(1, 1);       opacity: 0.9; }   /* collapse line flashes */
  32%  { transform: scale(0.012, 1.4); opacity: 1; }     /* the dot */
  78%  { transform: scale(0.012, 1.2); opacity: 0.9; }
  100% { transform: scale(0.012, 1);   opacity: 0; }
}
/* while off: dark glass (not pure black — glare highlights stay), and all
   picture animations frozen so an off monitor burns no GPU */
.tv-off #tv-screen { background: #050505; }
.tv-off .crt-rgb, .tv-off .crt-scan, .tv-off .crt-noise, .tv-off .crt-band,
.tv-off .crt-flicker, .tv-off .crt-bloom, .tv-off .crt-flip {
  animation: none; opacity: 0;
}
.tv-off .tv-spill { animation: none; opacity: 0; transition: opacity 0.6s; }

/* ---- monitor chassis: molded plastic OUTSIDE the distortion ---- */
.tv-frame {
  position: fixed; inset: 0;
  z-index: 3000000;
  pointer-events: none;
}
/* Outer shell: aged charcoal ABS, lit from above. The center hole is
   punched with a content-box mask (the black surround outside the shell
   is painted by .crt-glass's 100vmax shadow underneath). Seam hairlines
   ride as extra background layers. */
.tv-shell {
  position: absolute; inset: 0;
  border-radius: 3vmax;
  padding: 1.7vmax 1.7vmax 3.7vmax;
  background:
    linear-gradient(90deg, transparent calc(6vmax - 1px), rgba(0, 0, 0, 0.3) 6vmax, transparent calc(6vmax + 1px)) left bottom / 100% 3.7vmax no-repeat,
    linear-gradient(90deg, transparent calc(100% - 6vmax - 1px), rgba(0, 0, 0, 0.3) calc(100% - 6vmax), transparent calc(100% - 6vmax + 1px)) left bottom / 100% 3.7vmax no-repeat,
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)) left calc(100% - 3.7vmax) / 100% 2px no-repeat,
    linear-gradient(180deg, #3b3e46 0%, #2e3138 7%, #26282e 45%, #1c1e23 85%, #121317 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),   /* top-lit edge highlight */
    inset 0 -2px 4px rgba(0, 0, 0, 0.55),      /* bottom shadow */
    inset 1px 0 0 rgba(255, 255, 255, 0.05),
    inset -1px 0 0 rgba(0, 0, 0, 0.3);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
/* Bezel step-down: the two-step 45° chamfer recess between shell and glass
   — light/dark 1px lines + a darker gradient band. */
.tv-bezel {
  position: absolute; inset: 1.45vmax 1.45vmax 3.45vmax;
  border-radius: 0.9vmax;
  border: 0.28vmax solid rgba(0, 0, 0, 0.34);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.5),        /* top chamfer face in shadow */
    inset 0 -1px 0 rgba(255, 255, 255, 0.07),  /* bottom face catches light */
    0 -1px 0 rgba(0, 0, 0, 0.45),              /* dark outer lip line */
    0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Chin: badge (embossed), vent grille, power LED */
.tv-chin { position: absolute; left: 0; right: 0; bottom: 0; height: 3.7vmax; }
.tv-badge {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: Tahoma, 'Segoe UI', Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(9, 10, 12, 0.92);                        /* molded-in: dark text… */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);       /* …light lip below */
}
.tv-grille {
  position: absolute; left: 2.4vmax; top: 50%;
  transform: translateY(-50%);
  width: 7vmax; height: 1.1vmax;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.26) 0 2px, transparent 2px 5px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}
.tv-led {
  position: absolute; right: 2.2vmax; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  /* real LED lens: hot specular dot, lit die just off-center, dimmer
     epoxy rim — sitting in a dark drilled hole in the plastic */
  background:
    radial-gradient(45% 45% at 32% 28%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 60%),
    radial-gradient(70% 70% at 45% 45%, #7dffa1 0%, #2ee05a 45%, #14953a 75%, #0a5c24 100%);
  border: 1px solid rgba(0, 0, 0, 0.7);              /* the mounting hole */
  box-shadow:
    0 0 6px 1px rgba(46, 224, 90, 0.55),             /* tight glow */
    0 0 14px 3px rgba(46, 224, 90, 0.18),            /* soft falloff */
    0 1px 0 rgba(255, 255, 255, 0.07),               /* light lip below the hole */
    inset 0 -1px 1px rgba(0, 0, 0, 0.35);            /* lens rolls into shadow */
}
.tv-off .tv-led {
  background:
    radial-gradient(45% 45% at 32% 28%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 60%),
    radial-gradient(70% 70% at 45% 45%, #ffd98f 0%, #e8a125 45%, #a86a10 75%, #5e3a08 100%);
  box-shadow:
    0 0 5px 1px rgba(232, 161, 37, 0.45),
    0 0 12px 3px rgba(232, 161, 37, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 1px rgba(0, 0, 0, 0.35);
  animation: ledBreathe 3.2s ease-in-out infinite;
}
@keyframes ledBreathe { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }

/* ambient spill: the screen lights the room — breathes on the flicker rhythm */
.tv-spill {
  position: fixed; inset: 0;
  z-index: 3050000;
  pointer-events: none;
  background: radial-gradient(62% 58% at 50% 46%,
    transparent 55%,
    rgba(140, 180, 255, 0.05) 74%,
    rgba(140, 180, 255, 0.02) 86%,
    transparent 96%);
  animation: crtSpill 5s steps(1) infinite;
}
@keyframes crtSpill {
  0%, 100% { opacity: 0.8; }
  7%    { opacity: 1; }
  7.6%  { opacity: 0.8; }
  41%   { opacity: 1; }
  41.4% { opacity: 0.8; }
  76%   { opacity: 0.95; }
  76.8% { opacity: 0.8; }
}

/* working power button — the ONE interactive chassis element.
   Big red rocker switch: molded red plastic cap on a recessed dark well. */
.tv-power-btn {
  position: fixed; right: 3.4vmax; bottom: calc(1.85vmax - 11px);
  width: 34px; height: 22px;
  border-radius: 4px;
  z-index: 3200000;
  pointer-events: auto;
  cursor: pointer;
  padding: 0;
  border: 2px solid rgba(0, 0, 0, 0.65);            /* the recessed well */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, #e2372c 0%, #b81f16 55%, #7e120c 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08),              /* light lip under the well */
    0 0 10px rgba(226, 55, 44, 0.25),               /* faint red glow */
    inset 0 1px 0 rgba(255, 255, 255, 0.3),         /* top-lit cap edge */
    inset 0 -3px 4px rgba(0, 0, 0, 0.45),           /* cap rolls away below */
    inset 0 6px 6px -4px rgba(255, 255, 255, 0.25); /* rocker tilted out (on) */
}
.tv-power-btn:active {
  transform: translateY(1px);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0) 50%),
    linear-gradient(180deg, #9e1a12 0%, #b81f16 55%, #c9251b 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 2px 4px rgba(0, 0, 0, 0.6);             /* cap pressed into the well */
}
.tv-off .tv-power-btn {
  /* standby: rocker tilted the other way, glow off */
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 45%),
    linear-gradient(0deg, #c9251b 0%, #9e1a12 55%, #6e100a 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2),
    inset 0 3px 4px rgba(0, 0, 0, 0.45);
}
.tv-power-btn:focus-visible { outline: 1px dotted #8fd; outline-offset: 2px; }

/* channel-flip tear (desktop only — under the barrel filter the containing
   block is stable, so fixed children don't jump) */
#tv-roll.tear { animation: crtTear 0.26s steps(1, end) both; }
#tv-roll.tear-micro { animation: crtTearMicro 0.12s steps(1, end) both; }
@keyframes crtTear {
  0%   { transform: translateX(-8px) skewX(0.8deg); }
  30%  { transform: translateX(6px) skewX(-0.5deg); }
  60%  { transform: translateX(-3px) skewX(0.2deg); }
  100% { transform: none; }
}
@keyframes crtTearMicro {
  0%   { transform: translateX(-4px) skewX(0.4deg); }
  50%  { transform: translateX(3px) skewX(-0.2deg); }
  100% { transform: none; }
}

/* boot cursor — real DOS cadence: 530ms on / 530ms off */
.boot .cursor { animation: bootBlink 1.06s steps(1) infinite; }
@keyframes bootBlink { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .crt-scan, .crt-noise, .crt-band, .crt-flicker, .crt-bloom, .crt-rgb,
  .tv-spill, .tv-off .tv-led { animation: none; }
  .crt-noise { opacity: 0.08; }
  .crt-band { display: none; }
  .crt-power { display: none; }
  /* power on/off become simple fades; no degauss wobble, no retrace roll */
  #tv-roll { animation: crtFadeIn 0.8s ease-out both; }
  .tv-off #tv-roll { animation: crtFadeOut 0.5s ease-out both; }
  /* no tears (crt-fx.js also skips flips entirely under reduced motion) */
  #tv-roll.tear, #tv-roll.tear-micro { animation: none; }
  .crt.flip .crt-flip, .crt.flip-micro .crt-flip { animation: none; }
}
@keyframes crtFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes crtFadeOut { from { opacity: 1; } to { opacity: 0; } }

@media (max-width: 900px) {
  .crt-noise { opacity: 0.1; }
  .crt-glass { border-radius: 12px; }
  .crt-corners { display: none; }
  #tv-screen { filter: none; inset: 8px 8px 20px; border-radius: 8px; } /* skip heavy distortion */
  /* chassis degrades to the thin frame */
  .tv-shell { padding: 6px 6px 18px; border-radius: 14px; }
  .tv-bezel, .tv-grille, .tv-spill { display: none; }
  .tv-chin { height: 18px; }
  .tv-badge { font-size: 7px; letter-spacing: 2px; }
  .tv-led { right: 14px; width: 5px; height: 5px; }
  .tv-power-btn { right: 30px; bottom: 1px; width: 24px; height: 16px; border-width: 1px; }
  .crt-power { left: 8px; right: 8px; }
  /* no barrel filter → no stable containing block for fixed children:
     never transform #tv-roll here (crt-fx.js also skips tears on mobile) */
  #tv-roll.tear, #tv-roll.tear-micro { animation: none; }
}

/* .no-crt escape hatch (Run → "crt"): fully de-CRT, including chassis,
   power button, spill and (via crt-fx.js) all synth sounds. LAST so it
   wins over .tv-off state rules. */
.no-crt .crt { display: none; }
.no-crt #tv-screen { filter: none; animation: none; inset: 0; border-radius: 0; background: none; }
.no-crt #tv-roll, .no-crt.tv-off #tv-roll { animation: none; opacity: 1; }
.no-crt .tv-frame { display: none; }
.no-crt .crt-power { display: none; }
.no-crt .tv-spill { display: none; }
.no-crt .tv-power-btn { display: none; }