@charset "UTF-8";
:root {
  color-scheme:dark;
  --bg:#10171f;
  --surface:#19222cf5;
  --panel:#141c25ed;
  --raised:#25303d;
  --text:#edf2f6;
  --muted:#a1acba;
  --faint:#748391;
  --accent:#79cbdf;
  --line:#ffffff12;
  --radius:14px;
  --top:42px;
  --bottom:110px;
  --font:Inter,"Segoe UI",Arial,sans-serif;
}

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

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

body {
  background:var(--bg);
  font-family:var(--font);
  color:var(--text);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

button,input {
  font:inherit;
}

button {
  color:inherit;
  cursor:pointer;
}

button {
  border:0;
  background:none;
}

button:disabled {
  opacity:.35;
  cursor:default;
}

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

button, a {
  touch-action:manipulation;
}

button:focus-visible,a:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px;
}

button:focus:not(:focus-visible),[tabindex]:focus:not(:focus-visible) {
  outline:none;
}

h1,h2,h3,h4,p {
  margin:0;
}

svg {
  display:block;
  width:100%;
  height:100%;
}

[hidden] {
  display:none!important;
}

.inline-icon {
  width:19px;
  height:19px;
  display:inline-flex;
  flex:none;
}

.skip-link {
  position:fixed;
  left:12px;
  top:-100px;
  z-index:1000;
  background:var(--raised);
  padding:10px 18px;
  border-radius:8px;
}

.skip-link:focus {
  top:52px;
}

#wallpaper {
  position:fixed;
  inset:0;
  background-position:center;
  background-size:cover;
  background-color:#172b3c;
  background-image:var(--wallpaper-image, none);
  pointer-events:none;
}

#wallpaper::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#08131c29,#07121c08 40%,#08101952),linear-gradient(0deg,#07101865,transparent 40%,#08121a20);
}

.system-bar {
  position:fixed;
  z-index:500;
  top:0;
  left:0;
  right:0;
  height:var(--top);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 22px;
  background:#0d141bee;
  backdrop-filter:blur(20px);
  border-bottom:1px solid #ffffff08;
  font-size:13px;
  user-select:none;
}

.panel-left,.panel-right,.system-icons {
  display:flex;
  align-items:center;
  gap:22px;
  height:100%;
}

.panel-left {
  gap:24px;
}

.panel-button {
  font-size:13px;
  padding:0;
  height:100%;
  color:#d4dce3;
  position:relative;
}

.panel-button:hover,.panel-button[aria-expanded=true] {
  color:white;
}

.clock {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  font-size:12px;
  font-weight:500;
  white-space:pre;
  letter-spacing:.2px;
}

.system-icons {
  gap:17px;
  color:#c3cfd7;
}

.system-icons .inline-icon {
  width:15px;
  height:15px;
}

.system-icons .inline-icon:last-child {
  width:20px;
}

#desktop {
  position:fixed;
  inset:var(--top) 0 0;
}

.desktop-icons {
  position:absolute;
  left:34px;
  top:36px;
  display:flex;
  flex-direction:column;
  gap:16px;
  z-index:1;
}

.desktop-icon {
  width:91px;
  min-height:99px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:9px;
  padding:10px 4px;
  border:1px solid transparent;
  border-radius:9px;
  font-size:12px;
  font-weight:500;
  text-shadow:0 1px 4px #0008;
  transition:background .16s,border-color .16s;
}

.desktop-icon:hover {
  background:#d6eaff09;
}

.desktop-icon.is-selected {
  border-color:#b5e5ff35;
  background:#83bdda20;
}

.desktop-icon .app-icon {
  order:-1;
}

.app-icon {
  width:51px;
  height:51px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#edf6fc;
  background:linear-gradient(145deg,#749ab9,#426681);
  border:1px solid #ffffff21;
  box-shadow:inset 0 1px 1px #ffffff25,0 5px 10px #020b1738;
  position:relative;
}

.app-icon svg {
  width:29px;
  height:29px;
  filter:drop-shadow(0 2px 1px #14253e22);
}

.icon-projects,.icon-files {
  background:linear-gradient(145deg,#6aafd6,#3778a8);
  color:#e3f5ff;
}

.icon-resume {
  background:linear-gradient(145deg,#eff3f5,#c0ccd7);
  color:#576c85;
}

.icon-about {
  background:linear-gradient(145deg,#aaa4e1,#7467ad);
}

.icon-contacts {
  background:linear-gradient(145deg,#86b9a8,#4c877b);
}

.icon-github {
  background:linear-gradient(145deg,#444e5b,#28313c);
}

.icon-browser {
  background:linear-gradient(145deg,#ecb66c,#c27369 65%,#8b5e92);
  color:#fff4de;
}

.icon-library {
  background:linear-gradient(145deg,#719ece,#426895);
}

.icon-stock {
  background:linear-gradient(145deg,#bdab83,#8a7657);
}

.icon-auth {
  background:linear-gradient(145deg,#9c91c7,#6b6393);
}

.icon-chip {
  background:linear-gradient(145deg,#71ad9f,#44786e);
}

.desktop-intro {
  position:absolute;
  right:8%;
  top:22%;
  width:clamp(360px,36vw,545px);
  text-shadow:0 2px 18px #07101e30;
  user-select:none;
}

.desktop-intro h1 {
  font-size:clamp(40px,4.2vw,68px);
  font-weight:650;
  letter-spacing:-2.5px;
  line-height:1.06;
  color:#ecf2f6;
}

.desktop-intro h1 span {
  display:block;
  text-transform:uppercase;
}

.intro-title {
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:3px;
  color:#a8c6d8;
  margin-top:23px;
}

.dock {
  position:fixed;
  bottom:max(22px,env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  height:79px;
  max-width:calc(100% - 24px);
  display:flex;
  gap:9px;
  align-items:center;
  padding:8px 12px 12px;
  z-index:500;
  border:1px solid #cfdeec22;
  border-radius:21px;
  background:#1b2530bb;
  backdrop-filter:blur(24px);
  box-shadow:0 14px 36px #0004,inset 0 1px #ffffff06;
}

.dock-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  width:55px;
  height:58px;
  padding:0;
  flex:none;
}

.dock-item .app-icon {
  width:47px;
  height:47px;
  border-radius:12px;
  transition:transform .18s ease;
}

.dock-item:hover .app-icon,.dock-item:focus-visible .app-icon {
  transform:translateY(-5px) scale(1.08);
}

.dock-tooltip {
  position:absolute;
  bottom:72px;
  left:50%;
  transform:translateX(-50%);
  background:#18222ff5;
  box-shadow:0 6px 20px #0004;
  border:1px solid var(--line);
  padding:5px 10px;
  border-radius:6px;
  font-size:12px;
  white-space:nowrap;
  max-width:280px;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s;
}

.dock-item:hover .dock-tooltip,.dock-item:focus-visible .dock-tooltip {
  opacity:1;
}

.running-dot {
  position:absolute;
  bottom:-5px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#b3c5d480;
  opacity:0;
}

.is-running .running-dot {
  opacity:1;
}

.is-active .running-dot {
  background:var(--accent);
}

.dock-divider {
  height:31px;
  width:1px;
  background:#c8ddef20;
  margin:0 4px;
}

.popup-menu {
  position:fixed;
  z-index:600;
  min-width:215px;
  max-width:calc(100vw - 16px);
  padding:7px;
  background:#1b2532f7;
  backdrop-filter:blur(22px);
  border:1px solid #c2d7e522;
  border-radius:10px;
  box-shadow:0 15px 50px #0006;
}

.menu-item {
  display:flex;
  align-items:center;
  gap:13px;
  width:100%;
  min-height:40px;
  padding:9px 12px;
  font-size:13px;
  text-align:left;
  border-radius:5px;
}

.menu-item:hover,.menu-item:focus-visible {
  background:#ffffff0d;
}

.menu-item .inline-icon {
  color:#a7bfcf;
  width:17px;
  height:17px;
}

.popup-menu hr {
  border:0;
  border-top:1px solid var(--line);
  margin:6px;
}

.notifications {
  position:fixed;
  right:24px;
  bottom:119px;
  z-index:650;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}

.notification {
  width:348px;
  max-width:calc(100vw - 32px);
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:17px 12px 17px 17px;
  background:#192430f0;
  border:1px solid #c6e1ef21;
  backdrop-filter:blur(20px);
  border-radius:12px;
  box-shadow:0 12px 38px #0004;
  pointer-events:auto;
  animation:notification-in .2s ease-out;
}

.notification .app-icon {
  width:35px;
  height:35px;
  border-radius:9px;
  flex:none;
}

.notification .app-icon svg {
  width:21px;
  height:21px;
}

.notification-text {
  flex:1;
}

.notification strong {
  display:block;
  font-weight:600;
  font-size:13px;
}

.notification p {
  font-size:12px;
  line-height:1.7;
  margin-top:5px;
  color:#a8bac9;
}

.notification .icon-button {
  width:26px;
  min-width:26px;
  height:26px;
}

.icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  width:34px;
  height:34px;
  border-radius:6px;
  padding:8px;
  color:#b5c2cf;
  flex:none;
}

.icon-button:hover:not(:disabled) {
  background:#ffffff0c;
  color:white;
}

.icon-button .inline-icon {
  width:16px;
  height:16px;
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  min-height:40px;
  padding:9px 15px;
  border:1px solid #c4d4e320;
  border-radius:7px;
  font-size:13px;
  background:#ffffff05;
  transition:background .16s;
}

.button:hover {
  background:#ffffff0c;
}

.button.primary {
  background:#79cbdf;
  color:#102e3a;
  border-color:#99dceb;
  font-weight:600;
}

.button.primary:hover {
  background:#9edcec;
}

.eyebrow {
  font-size:10px;
  letter-spacing:1.8px;
  color:#91a6b8;
  font-weight:500;
}

.noscript {
  position:fixed;
  inset:25%;
  padding:30px;
  background:var(--surface);
  border-radius:12px;
  z-index:900;
}

.noscript p {
  margin-top:15px;
}

@keyframes notification-in {
  from {
    opacity:0;
    transform:translateY(8px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

.wallpaper-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}