html,body{height:100%;overflow:hidden;background:#050507}
body{display:block;padding:0}

#wallpaper{position:fixed;inset:0;z-index:0;background:#050507}
#particles{z-index:1}

.desktop{
  position:fixed;
  top:30px;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  overflow:hidden;
  outline:none;
}
.desktop:focus-visible{box-shadow:inset 0 0 0 2px var(--blue)}
.desktop.dragging iframe{pointer-events:none}
.desktop.dragging{-webkit-user-select:none;user-select:none}

.desktop-hint{
  position:absolute;
  left:0;
  right:0;
  top:38%;
  text-align:center;
  pointer-events:none;
  transition:opacity 250ms var(--ease-out);
  padding:0 16px;
}
.desktop-hint.faded{opacity:0.25}
.desktop-hint-name{font-size:2rem;font-weight:500;color:var(--text-bright);letter-spacing:0.02em;text-shadow:0 2px 24px rgba(0,0,0,0.6)}
.desktop-hint-sub{margin-top:6px;font-size:0.85rem;color:var(--text);text-shadow:0 1px 12px rgba(0,0,0,0.6)}
.desktop-hint-tip{margin-top:18px;font-size:0.72rem;color:var(--text-dim);font-family:var(--chrome-font)}

.os-window{
  position:absolute;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  border:1px solid var(--border-strong);
  border-radius:10px;
  box-shadow:0 18px 60px rgba(0,0,0,0.55);
  overflow:hidden;
  outline:none;
  transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out),visibility 0s 0s;
}
.os-window[hidden]{display:none}
.os-window.opening{animation:os-pop 180ms var(--ease-out)}
@keyframes os-pop{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:none}}
.os-window.minimized{
  opacity:0;
  transform:scale(0.8) translateY(60px);
  visibility:hidden;
  pointer-events:none;
  transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out),visibility 0s 180ms;
}
.os-window.active{border-color:rgba(125,211,252,0.35);box-shadow:0 22px 70px rgba(0,0,0,0.65)}
.os-window.maximized{left:0!important;top:0!important;width:100%!important;height:calc(100% - 84px)!important;border-radius:0}

.os-titlebar{
  display:flex;
  align-items:center;
  height:34px;
  min-height:34px;
  padding:0 12px;
  gap:10px;
  background:var(--tabbar-bg);
  border-bottom:1px solid var(--border);
  -webkit-user-select:none;
  user-select:none;
  touch-action:none;
}
.os-lights{display:flex;gap:7px;width:60px}
.os-spacer{visibility:hidden}
.os-light{
  width:13px;
  height:13px;
  border-radius:50%;
  border:0;
  padding:0;
  cursor:pointer;
  opacity:0.85;
}
.os-close{background:var(--red)}
.os-min{background:var(--yellow)}
.os-max{background:var(--green)}
.os-light:hover{opacity:1}
.os-light:focus-visible,.os-title:focus-visible,.dock-item:focus-visible,.ctx-item:focus-visible,.about-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.os-title{
  flex:1;
  text-align:center;
  font-size:0.72rem;
  font-family:var(--chrome-font);
  color:var(--text-dim);
  cursor:grab;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:34px;
  border-radius:4px;
}
.os-window.active .os-title{color:var(--text-bright)}
.os-body{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;overflow:hidden}

.os-handle{position:absolute;z-index:5;touch-action:none}
.os-h-n{top:-3px;left:10px;right:10px;height:7px;cursor:ns-resize}
.os-h-s{bottom:-3px;left:10px;right:10px;height:7px;cursor:ns-resize}
.os-h-e{right:-3px;top:10px;bottom:10px;width:7px;cursor:ew-resize}
.os-h-w{left:-3px;top:10px;bottom:10px;width:7px;cursor:ew-resize}
.os-h-ne{top:-3px;right:-3px;width:14px;height:14px;cursor:nesw-resize}
.os-h-nw{top:-3px;left:-3px;width:14px;height:14px;cursor:nwse-resize}
.os-h-se{bottom:-3px;right:-3px;width:14px;height:14px;cursor:nwse-resize}
.os-h-sw{bottom:-3px;left:-3px;width:14px;height:14px;cursor:nesw-resize}
.os-window.maximized .os-handle{display:none}

#win-terminal .terminal-panel{height:100%!important;border-top:0;min-height:0;flex:1}
#win-terminal .terminal-body{display:block!important}
#win-projects .sidebar{width:200px;min-width:200px}
#win-projects .main-area{flex:1;min-height:0}

.blog-body iframe{flex:1;width:100%;border:0;background:var(--bg);color-scheme:dark}

.about-body{overflow-y:auto;padding:20px 22px;font-size:0.78rem;line-height:1.65;color:var(--text)}
.about-head{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.about-photo{width:84px;height:84px;border-radius:14px;object-fit:cover;border:1px solid var(--border-strong)}
.about-name{font-size:1.2rem;font-weight:500;color:var(--text-bright)}
.about-role{color:var(--green)}
.about-place{color:var(--text-dim)}
.about-body h2{margin:18px 0 6px;font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);font-family:var(--chrome-font);font-weight:600}
.about-skills{display:grid;grid-template-columns:auto 1fr;gap:4px 14px}
.about-skills dt{color:var(--blue)}
.about-links{list-style:none}
.about-links a{color:var(--link);text-decoration:none}
.about-links a:hover{text-decoration:underline}
.about-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.about-btn{
  background:var(--sidebar-active);
  border:1px solid var(--border-strong);
  color:var(--text);
  font:inherit;
  font-size:0.74rem;
  padding:7px 12px;
  border-radius:6px;
  cursor:pointer;
}
.about-btn:hover{background:var(--sidebar-hover);color:var(--text-bright)}

.dock{
  position:fixed;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  z-index:150;
  display:flex;
  align-items:flex-end;
  gap:10px;
  padding:8px 12px;
  background:rgba(30,31,37,0.55);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--border-strong);
  border-radius:18px;
  box-shadow:0 12px 40px rgba(0,0,0,0.5);
  max-width:calc(100vw - 16px);
}
.dock-item{
  position:relative;
  width:52px;
  height:52px;
  padding:0;
  border:1px solid var(--border);
  border-radius:12px;
  background:#1a1b20;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
  transition:transform 160ms var(--ease-out);
  transform-origin:50% 100%;
}
.dock-item img{width:100%;height:100%;object-fit:cover;border-radius:11px;display:block}
.dock-item[data-state="closed"] img{opacity:0.9}
.dock-item.is-active{border-color:rgba(125,211,252,0.6)}
.dock-menu{background:rgba(255,255,255,0.08)}
.dock-sep{width:1px;align-self:stretch;margin:4px 0;background:var(--border-strong)}
.dock-dot{
  position:absolute;
  bottom:-7px;
  left:50%;
  width:5px;
  height:5px;
  margin-left:-2.5px;
  border-radius:50%;
  background:var(--text);
  opacity:0;
}
.dock-item[data-state="open"] .dock-dot{opacity:1}
.dock-item[data-state="minimized"] .dock-dot{opacity:1;background:transparent;border:1px solid var(--yellow)}
.dock-item::after{
  content:attr(data-label);
  position:absolute;
  bottom:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%);
  background:rgba(20,21,27,0.92);
  border:1px solid var(--border-strong);
  color:var(--text-bright);
  font-family:var(--chrome-font);
  font-size:0.7rem;
  padding:3px 8px;
  border-radius:6px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity 120ms var(--ease-out);
}
.dock-item:focus-visible::after{opacity:1}
@media(hover:hover) and (pointer:fine){
  .dock-item:hover{transform:scale(1.22) translateY(-4px)}
  .dock-item:hover::after{opacity:1}
}

.ctx-menu{
  position:fixed;
  z-index:300;
  min-width:210px;
  padding:5px;
  background:rgba(26,27,32,0.96);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border:1px solid var(--border-strong);
  border-radius:8px;
  box-shadow:0 14px 44px rgba(0,0,0,0.6);
  font-family:var(--chrome-font);
}
.ctx-menu[hidden]{display:none}
.ctx-item{
  display:block;
  width:100%;
  background:none;
  border:0;
  color:var(--text);
  font:inherit;
  font-size:0.78rem;
  text-align:left;
  padding:6px 12px;
  border-radius:4px;
  cursor:pointer;
}
.ctx-item:hover:not(:disabled),.ctx-item:focus-visible{background:var(--statusbar-bg);color:#fff;outline:none}
.ctx-item:disabled{color:var(--text-faint);cursor:default;opacity:0.7}
.ctx-sep{height:1px;background:var(--border);margin:4px 8px}

.toast{
  position:fixed;
  left:50%;
  top:44px;
  transform:translate(-50%,-10px);
  z-index:310;
  background:rgba(26,27,32,0.95);
  border:1px solid var(--border-strong);
  color:var(--text-bright);
  font-family:var(--chrome-font);
  font-size:0.76rem;
  padding:6px 14px;
  border-radius:8px;
  opacity:0;
  pointer-events:none;
  transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:700px){
  .os-window,.os-window.maximized{
    left:0!important;
    top:0!important;
    width:100%!important;
    height:calc(100% - 84px)!important;
    border-radius:0;
    border-left:0;
    border-right:0;
  }
  .os-handle,.os-max{display:none}
  .os-title{cursor:default}
  .dock{gap:8px;padding:7px 9px;bottom:8px}
  .dock-item{width:46px;height:46px}
  #win-projects .main-area{flex-direction:column}
  #win-projects .sidebar{width:100%;min-width:0;max-height:38%;border-right:0;border-bottom:1px solid var(--border)}
  .desktop-hint-name{font-size:1.5rem}
}

@media(prefers-reduced-motion:reduce){
  .os-window,.os-window.minimized{transition:none}
  .os-window.opening{animation:none}
}

.dock-item.dock-photo{background:url('lkranz.png') center / 190% no-repeat;filter:brightness(1.7) saturate(1.3)}
.dock-photo img{opacity:0}
.dock-item{background:transparent;border:0;box-shadow:0 4px 10px rgba(0,0,0,0.4)}
.dock-item img{border-radius:12px}
.dock-item.is-active{box-shadow:0 0 0 2px rgba(125,211,252,0.7),0 4px 10px rgba(0,0,0,0.4)}
.dock-menu{background:rgba(255,255,255,0.1);border:1px solid var(--border-strong)}

.desk-icons{
  position:absolute;
  top:14px;
  right:18px;
  bottom:96px;
  display:flex;
  flex-direction:column;
  flex-wrap:wrap-reverse;
  align-content:flex-start;
  gap:14px 10px;
  z-index:1;
}
.desk-icon{
  width:96px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:6px 2px;
  background:none;
  border:1px solid transparent;
  border-radius:8px;
  color:var(--text-bright);
  font:inherit;
  font-size:0.68rem;
  text-decoration:none;
  cursor:default;
  text-shadow:0 1px 6px rgba(0,0,0,0.9);
  -webkit-user-select:none;
  user-select:none;
}
.desk-icon img{width:56px;height:56px;border-radius:13px;display:block;box-shadow:0 4px 12px rgba(0,0,0,0.45)}
.desk-photo{width:56px;height:56px;border-radius:13px;overflow:hidden;display:block;box-shadow:0 4px 12px rgba(0,0,0,0.45)}
.desk-photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.9);box-shadow:none;border-radius:0;filter:brightness(1.7) saturate(1.3)}
.desk-icon span:last-child{padding:1px 4px;border-radius:4px;text-align:center;word-break:break-word;line-height:1.3}
.desk-icon:hover{background:rgba(255,255,255,0.07)}
.desk-icon.selected{background:rgba(125,211,252,0.16);border-color:rgba(125,211,252,0.35)}
.desk-icon.selected span:last-child{background:var(--statusbar-bg)}
.desk-icon:focus-visible{outline:2px solid var(--blue);outline-offset:1px}

a.about-btn{text-decoration:none;display:inline-block}

@media(max-width:700px){
  .desk-icons{
    left:10px;
    right:10px;
    top:10px;
    bottom:auto;
    flex-direction:row;
    flex-wrap:wrap;
    gap:8px 4px;
  }
  .desk-icon{width:calc(25% - 4px)}
}

.resume-body{padding:0;background:#2a2b30;overflow:hidden}
.resume-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 12px;
  background:var(--tabbar-bg);
  border-bottom:1px solid var(--border);
}
.resume-file{font-size:0.72rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resume-download{
  display:inline-block;
  background:var(--green);
  color:#04210f;
  font-family:var(--chrome-font);
  font-size:0.76rem;
  font-weight:600;
  text-decoration:none;
  padding:6px 14px;
  border-radius:6px;
  white-space:nowrap;
}
.resume-download:hover{filter:brightness(1.1)}
.resume-download:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.resume-pdf{flex:1;width:100%;min-height:0;border:0;background:#2a2b30;display:block}
.resume-fallback{padding:30px 20px;text-align:center;color:var(--text);font-size:0.8rem}
.resume-fallback p{margin-bottom:14px}
.about-link{background:none;border:0;padding:0;font:inherit;color:var(--link);cursor:pointer}
.about-link:hover{text-decoration:underline}
@media(max-width:700px){.resume-body{padding:0}}

.lately-head{margin:10px 0 4px;font-size:0.7rem;font-weight:500;color:var(--blue)}
.lately-list{list-style:none;display:flex;flex-direction:column;gap:2px}
.lately-link{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  padding:5px 8px;
  border-radius:6px;
  color:var(--text);
  text-decoration:none;
}
.lately-link:hover{background:rgba(255,255,255,0.06);color:var(--text-bright)}
.lately-link:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.lately-title{min-width:0;overflow-wrap:anywhere}
.lately-meta{flex:none;font-size:0.68rem;color:var(--text-dim);white-space:nowrap}
.lately-msg{padding:5px 8px;color:var(--text-dim);font-size:0.74rem}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.activity-title{font-size:1.1rem;font-weight:500;color:var(--text-bright)}
.activity-sub{color:var(--text-dim);margin-bottom:8px}
@media(max-width:700px){
  .dock{gap:6px;padding:6px 8px}
  .dock-item{width:42px;height:42px}
}

@media(min-width:701px){
  .desk-icons{gap:6px 10px;bottom:92px}
  .desk-icon{padding:4px 2px;gap:4px}
  .desk-icon img,.desk-photo{width:48px;height:48px;border-radius:11px}
}

.menubar-search{
  margin-left:auto;
  background:none;
  border:0;
  color:var(--text);
  padding:0 10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  border-radius:4px;
}
.menubar-search:hover{background:rgba(255,255,255,0.12)}
.menubar-search:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.menubar-search + .menubar-clock{margin-left:0}

html[data-theme="glass"] .os-window{
  background:rgba(16,22,28,0.55);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  backdrop-filter:blur(22px) saturate(1.3);
}
html[data-theme="glass"] .os-titlebar,
html[data-theme="glass"] .sidebar,
html[data-theme="glass"] .tab-bar{background:rgba(255,255,255,0.05)}
html[data-theme="glass"] .editor-content,
html[data-theme="glass"] .terminal-body,
html[data-theme="glass"] .terminal-panel,
html[data-theme="glass"] .resume-body{background:transparent}
html[data-theme="glass"] .welcome-chip{background:rgba(255,255,255,0.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html[data-theme="glass"] .blog-body iframe{background:transparent}

html[data-theme="ghost"]{
  --bg:#f6f5f0;
  --sidebar-bg:#eceae2;
  --tabbar-bg:#e6e4db;
  --active-tab-bg:#f6f5f0;
  --inactive-tab-bg:#e6e4db;
  --border:rgba(0,0,0,0.1);
  --border-strong:rgba(0,0,0,0.2);
  --text:#2b2b2b;
  --text-bright:#0f0f0f;
  --text-dim:#5f5f5f;
  --text-faint:#767676;
  --green:#166534;
  --yellow:#92400e;
  --red:#b91c1c;
  --blue:#0b63b6;
  --cyan:#0e7490;
  --magenta:#6d28d9;
  --link:#0b63b6;
  --dir-color:#0b63b6;
  --file-color:#2b2b2b;
  --sidebar-hover:#e0ddd2;
  --sidebar-active:#d6d3c6;
  --prompt-user:#166534;
  --prompt-path:#0b63b6;
}
html[data-theme="ghost"] .os-window{box-shadow:0 18px 50px rgba(0,0,0,0.35)}
html[data-theme="ghost"] .menubar,
html[data-theme="ghost"] .dock,
html[data-theme="ghost"] .ctx-menu{color:#0f0f0f}
html[data-theme="ghost"] .menubar{background:rgba(246,245,240,0.8)}
html[data-theme="ghost"] .menu-dropdown,
html[data-theme="ghost"] .ctx-menu{background:rgba(246,245,240,0.97)}
html[data-theme="ghost"] .ctx-item,
html[data-theme="ghost"] .menu-item{color:#2b2b2b}
html[data-theme="ghost"] .menu-label,
html[data-theme="ghost"] .menubar-clock,
html[data-theme="ghost"] .menubar-search{color:#0f0f0f}
html[data-theme="ghost"] .blog-body iframe{color-scheme:light}
html[data-theme="ghost"] .resume-body{background:#cfcdc4}
html[data-theme="ghost"] .about-btn,
html[data-theme="ghost"] .welcome-chip{color:#2b2b2b}
html[data-theme="ghost"] .toast{background:rgba(246,245,240,0.97);color:#0f0f0f}

.desk-icon{color:#f0f0f0}
.desktop-hint-name{color:#f0f0f0}
.desktop-hint-sub{color:#d4d4d4}
.desktop-hint-tip{color:#a0a0a0}
.dock-item{color:#d4d4d4}
.dock-item::after{color:#f0f0f0}
html[data-theme="ghost"] .desk-icon{color:#f0f0f0}
.dock-dot{background:#f0f0f0}