/* ---------- fonts ---------- */
@font-face{
  font-family:'TahomaCustom';
  src:url('fonts/Tahoma Regular font.ttf') format('truetype');
  font-weight:normal; font-style:normal; font-display:swap;
}

/* ---------- reset ---------- */
*{ box-sizing:border-box; }
html,body {
  height:100%; margin:0;
  background: url('img/background.png') center/cover no-repeat fixed #111;
  font-family: 'TahomaCustom', Tahoma, sans-serif;
  color:#111;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* блокируем скролл страницы */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;         /* <-- главное */
}

/* на iOS иногда нужен фикс, чтобы исключить "резиновый" скролл */
body {
  position: relative;
  width: 100%;
}


body{ font-family:'TahomaCustom', Tahoma, sans-serif; }

/* background behind the monitor (visible!) */
#page-bg{
  position:fixed; inset:0; z-index:0;
  background:url('img/background.png') center/cover no-repeat;
}

/* centered wrapper + monitor */
#xp-wrapper{ position:relative; z-index:1; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:20px; }
#xp-screen{
  width:1280px; height:720px; position:relative; overflow:visible;
  background:url('img/bliss.jpg') center/cover no-repeat;
  box-shadow:0 30px 80px rgba(0,0,0,0.7);
  display:flex; flex-direction:column;
}

/* layers */
.screen-layer{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.hidden{ display:none !important; }

/* login */
#login-screen{ background:rgba(0,0,0,0.45); flex-direction: column;    /* подсказка под кнопкой */
  gap: 8px;}
#enter-btn{ width:130px; height:auto; cursor:pointer; user-select:none; }

/* loading — XP green bar */
#loading-screen{ background:rgba(0,0,0,0.55); }
.loader-card{
  width:420px; background:rgba(255,255,255,0.88); border:1px solid #d9d9d9;
  border-radius:10px; padding:24px; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,0.4);
}
.loader-progress{ width:100%; height:18px; border:1px solid #2a7d2e; border-radius:4px; background:#eaf3ea; overflow:hidden; }
.loader-bar{
  height:100%; width:0%;
  background:linear-gradient(90deg,#1ca11c,#39bf39,#1ca11c);
  background-size:200% 100%; animation:stripe 2.2s linear infinite;
}
@keyframes stripe{ 0%{background-position:0 0} 100%{background-position:200% 0} }
.loader-sub{ margin-top:10px; font-size:12px; color:#333 }

/* desktop icons */
#desktop{ padding:24px; }
#icons{ position:absolute; left:24px; top:24px; display:flex; flex-direction:column; gap:18px; }
.icon{ width:96px; text-align:center; cursor:pointer; user-select:none; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.5); }
.icon img{ width:64px; height:64px; display:block; margin:0 auto 6px; pointer-events:none; }
.ic-label{ font-size:13px; }

:root{
  --win-header-h: 44px;  /* было 36px, делаем повыше */
}
@media (max-width: 820px){
  :root{ --win-header-h: 50px; }  /* на телефоне ещё больше hit-area */
}

/* windows */
.window{
  width:560px; height:360px; background:#f7f7f7; border:4px solid #8aa7d8; position:absolute;
  box-shadow:0 10px 30px rgba(0,0,0,0.4); z-index:10; overflow:hidden;
}
.window-header{
  height: var(--win-header-h);
  background:linear-gradient(#2b5fb0,#1e4aa2);
  color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 10px; cursor:move;
}
.window-body{
  padding:12px;
  height: calc(100% - var(--win-header-h));
  overflow:auto; background:#fff; color:#111;
}




/* About: растягиваем только изображение в BODY, не трогая иконку закрытия */
#about-window .window-body{
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
#about-window .window-body > img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* About window: квадратное и больше по умолчанию */
#about-window.window {
  width: 700px;   /* ширина */
  height: 700px;  /* высота */
}





/* reel 9:16 */
.reel-frame{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.reel-frame iframe{ width:100%; height:100%; }

/* forms / notes */
.small-note{ font-size:12px; color:#666; margin-top:8px; }
.btn{ background:#e9ecef; color:#111; border:1px solid #cfd4da; padding:8px 12px; border-radius:6px; cursor:pointer }
.btn:hover{ filter:brightness(0.96) }
.btn.primary{ background:#1877f2; color:#fff; border:0 }
.btn.primary:hover{ filter:brightness(0.95) }

/* Freepack IG gate */
.ig-gate{ background:#ffffffcc; border:1px solid #e0e0e0; padding:12px; border-radius:8px; margin-bottom:10px; color:#111; }
.ig-gate-title{ font-weight:700; margin:0 0 6px }
.ck-wrap{ position:relative }
.ck-wrap.is-locked{ filter:grayscale(1) opacity(0.6); pointer-events:none }
.ck-wrap.is-locked::after{
  content:"Step 2 will unlock after clicking Follow";
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#111; font-weight:700; background:rgba(255,255,255,0.6);
}
.pack-desc pre{
  background:#fff; color:#111; border:1px solid #ddd; border-radius:8px;
  padding:10px; margin-top:10px; white-space:pre-wrap; line-height:1.3;
}

/* gallery */
#gallery{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
#gallery img{ width:120px; height:80px; object-fit:cover; cursor:pointer; border:2px solid #ddd; }

/* projects */
.proj-topbar{ display:flex; gap:8px; margin-bottom:10px }
#proj-search{ flex:1; padding:8px; border:1px solid #ccc; }
#proj-filter{ padding:8px; border:1px solid #ccc; }
#admin-panel .admin-row{ display:flex; gap:8px; margin-bottom:8px }
#proj-title{ flex:1; padding:8px; border:1px solid #ccc; }
#proj-body{ width:100%; padding:8px; border:1px solid #ccc; }
#projects-list .project{ border:1px dashed #bbb; padding:8px; margin-bottom:8px; background:#fff; }
#projects-list .project .meta{ font-size:12px; color:#666; margin:4px 0 6px }

.reactions{ display:flex; gap:8px; margin-top:6px; }
.reactions .react{
  border:1px solid #cfd4da;
  background:#fff;
  border-radius:6px;
  padding:6px 10px;
  cursor:pointer;
  font-weight:700;
  user-select:none;
}
.reactions .react .cnt{ margin-left:4px; font-weight:700; }
.reactions .react:active{ transform: translateY(1px); }

.reactions .react[disabled]{
  opacity:.55;
  cursor:not-allowed;
}

.reactions .react.active{
  outline: 2px solid #1e4aa2;
  border-radius: 6px;
}


/* public board list inside Contact */
.public-scroll{
  max-height:220px; overflow:auto; padding-right:6px;
  background:#fafafa; border:1px solid #e8e8e8; border-radius:6px; padding:8px;
}
.pub-msg{ background:#fff; color:#111; border:1px solid #e2e2e2; border-radius:8px; padding:8px; margin:8px 0 }
.pub-msg .meta{ font-size:12px; color:#555; margin-bottom:4px }

/* taskbar */
#taskbar{
  position:absolute; left:0; right:0; bottom:0; height:46px;
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(180deg,#0b60d1,#2975e5);
  border-top:2px solid rgba(0,0,0,0.6); padding:6px 12px;
}
#taskbar-left{ display:flex; align-items:center; gap:8px; position:relative; }
#start-button { width:70px; height:30px; cursor:pointer; } /* шире на ~20% по горизонтали */
#start-menu{
  position:absolute; left:12px; bottom:52px; background:#fff; color:#111; padding:8px; border:1px solid #ccc;
  box-shadow:0 5px 20px rgba(0,0,0,0.3); min-width:200px; z-index:50;
}
.start-item{ display:block; padding:8px 10px; color:#111; text-decoration:none }
.start-item:hover{ background:#f0f0f0 }

/* center socials */
#taskbar-center{ display:flex; gap:12px; align-items:center; justify-content:center; flex:1 }
#taskbar-center .social img{ width:22px; height:22px; display:block; }

/* right time */
#taskbar-right{ display:flex; align-items:center; gap:12px; }
#taskbar-time{ color:#fff; font-weight:700; font-size:13px; }

/* yellow sticky — bigger, taped, like a real sticker, slightly rotated */
#ad-sticky{
  position:absolute;
  bottom:-6px;               /* чуть ниже нижней кромки монитора */
  right:20%;
  transform: translateY(16px) rotate(-2.5deg) scaleY(1.6); /* +60% по вертикали */
  background:#fffda6;
  color:#111;
  border:1px solid #e0d86a;
  border-radius:4px;
  padding:10px 14px;
  font-weight:700;
  font-size:12px;            /* текст уменьшен ~в 1.5 раза */
  line-height:1.15;
  box-shadow:0 8px 20px rgba(0,0,0,0.28);
  z-index:50;                /* поверх таскбара и окон */
}
#ad-sticky::before{
  content:"";
  position:absolute;
  top:-12px; left:18%;
  width:64px; height:18px;
  background:rgba(255,255,0,0.35);
  border:1px solid rgba(220,210,90,0.8);
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
  transform:rotate(4deg);
  border-radius:3px;
}

/* Contact window: размер под форму CK */
#contact-window.window { width: 720px; height: 520px; }
#contact-ck-wrap { padding-right: 4px; }

/* responsive scale */
@media (max-width:1300px){ #xp-screen{ transform:scale(0.9); transform-origin:center } }
@media (max-width:1100px){ #xp-screen{ transform:scale(0.75) } }

/* телефоны: чуть меньше внешних отступов "монитора" */
@media (max-width: 820px){
  #xp-wrapper{ padding:8px; }
  #xp-screen{ transform:scale(0.65); transform-origin:center top; }
  /* фикс, чтобы "Contact" не упирался вниз */
  #contact-window{ top:80px !important; }
}

/* очень узкие (старые iPhone/Android) */
@media (max-width: 430px){
  #xp-wrapper{ padding:4px; }
  #xp-screen{ transform:scale(0.55); }
  /* не даём окнам выходить за экран по высоте */
  .window{ max-height: calc(100vh - 80px); }
  .window .window-body{ max-height: calc(100vh - 36px - 80px); }
}

/* высокая "книжная" ориентация — поднять всё чуть выше */
@media (max-height: 680px){
  #xp-screen{ transform-origin:center top; }
  #contact-window{ top:70px !important; }
}

/* рилз: ограничение высоты, чтобы не ломал раскладку на телефонах */
@media (max-width: 820px){
  #reel-window{ width:300px !important; height:520px !important; top:50px !important; right:12px !important; }
}

/* --- Mobile (узкие экраны) — переопределяем инлайновые размеры окон --- */
@media (max-width: 820px){
  /* общий размер и позиция для всех окон */
  .window{
    width: 92vw !important;
    height: 72vh !important;
    left: 4vw !important;
    top: 10vh !important;
  }

/* make Instagram embed stretch to window size nicely */
.reel-frame { overflow:hidden; }
.reel-frame blockquote.instagram-media{
  margin:0!important;
  max-width:unset!important;
  width:100%!important;
}





  /* Reel: делаем чуть ниже по высоте */
  #reel-window{
    width: 92vw !important;
    height: 60vh !important;
    right: auto !important;  /* отключаем прижатие вправо */
  }

  /* Контакт — чтобы точно не уезжал вниз */
  #contact-window{
    top: 6vh !important;
  }

  /* Внутренности растягиваются на новую высоту */
  .window-body,
  .window-body iframe { height: 100% !important; }


  /* Сам экран без дополнительного масштабирования, пусть занимает весь вьюпорт */
  #xp-screen{
    transform: none !important;
    width: 100vw !important;
    height: 100vh !important;
  }
}

/* --- toast notifications --- */
#toast-container{
  position:absolute;       /* внутри #xp-screen */
  top:12px; right:12px;
  display:flex; flex-direction:column; gap:8px;
  z-index:9999;
  pointer-events:none;     /* клики не блокируем */
}
.toast{
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.96);
  border:1px solid #dcdcdc; border-radius:10px;
  padding:10px 12px; font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,0.28);
  animation:toastIn .18s ease-out;
  pointer-events:auto;     /* можно нажать/выделить текст */
}
.toast img{ width:20px; height:20px; display:block; }
@keyframes toastIn { from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)} }


/* hint под Enter */
#enter-hint{
  margin-top: 10px;
  color: #fff;
  font-weight: 700;
  letter-spacing: .4px;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  opacity: .9;
  animation: hintPulse 1.4s ease-in-out infinite;
}
@keyframes hintPulse{
  0%,100% { transform: translateY(0); opacity: .75; }
  50%     { transform: translateY(2px); opacity: 1; }
}


/* Крупный крестик по умолчанию на всех окнах */
.win-close{
  width: 22px;            /* «картинка-иконка» */
  height: 22px;
  flex: 0 0 auto;         /* не ужимать и не растягивать */
  cursor: pointer;

  
  
}

/* На мобильных — ещё крупнее + увеличим кликабельную зону за счёт паддинга */
@media (max-width: 820px){
  .win-close{
    width: 34px;          /* сам визуальный крестик */
    height: 34px;
    /* хит-зона больше */
  padding: 12px;  
  box-sizing: content-box; /* чтобы padding не уменьшал крестик */
  }
}

/* Убираем кнопку "Close" внутри окна Reels */
#reel-window .window-body button,
#reel-window .window-body .btn-close,
#reel-window .window-body input[type="button"][value="Close"] {
  display: none !important;
}

/* Beats: плеер на всю область окна */
#beat-window .window-body{
  padding: 0;           /* убираем внутренние отступы только в Beats */
  overflow: hidden;     /* без полос прокрутки вокруг iframe */
}
#beat-window .window-body iframe{
  display: block;       /* убирает возможный "просвет" как у inline-элемента */
  width: 100%;
  height: 100%;
  border: 0;
}

/* хедер всегда поверх body (важно для Android/iframe) */
.window-header{ position: relative; z-index: 2; }
.window-body{ position: relative; z-index: 1; }

/* большая прозрачная hit-area в правом верхнем углу хедера */
.win-close-hit{
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;   /* увеличенная зона тапа */
  height: 56px;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  touch-action: none;   /* не переводить тап в drag */
}

/* на телефонах — ещё больше */
@media (max-width: 820px){
  .win-close-hit{ width: 72px; height: 72px; }
}

/* Mobile-only tweaks for photo preview window */
@media (max-width: 820px){
  .window.photo-view{
    width: 92vw !important;
    height: 72vh !important;
    left: 4vw !important;
    top: 10vh !important;
  }
  #contact-window{ top: 6vh !important; }
  .window-body,
  .window-body iframe { height: 100% !important; }
  .window.photo-view .window-header{ position: relative; z-index: 3; }
  .window.photo-view .window-body{ position: relative; z-index: 1; padding-top: 12px; }
  .window.photo-view .window-body img{
    width: 100%; height: 100%; object-fit: contain; display: block;
    max-width: 100%; max-height: 100%;
  }
}

/* Размер окна Loops по умолчанию */
#loops-window.window { width: 420px; height: 480px; }

/* первая строка с двумя иконками в ряд */
#icons .icons-row{
  display:flex;
  gap:18px;           /* такой же, как между иконками по вертикали */
  margin-bottom:18px; /* чтобы следующий столбец не прилипал */
}

.project .proj-media{ margin:8px 0; }
.project .proj-media img{
  max-width:100%; height:auto; display:block;
  border:1px solid #e6e6e6; border-radius:8px;
}
.project .proj-media iframe, 
.project .proj-media video{
  width:100%; aspect-ratio:16/9; display:block; border:0;
  border-radius:8px;
}


.photo-item{
  position: relative;
  display: inline-block;
}
.photo-item img{
  width:120px; height:80px; object-fit:cover;
  cursor:pointer; border:2px solid #ddd;
}
.photo-item .photo-del{
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(0,0,0,0.6);
  color:#fff;
  border:0;
  border-radius:50%;
  width:22px; height:22px;
  cursor:pointer;
}


/* --- SEO footer --- */
#seo-footer{
  max-width: 1280px;
  margin: 18px auto 36px;
  padding: 0 12px;
  font-size: 14px;
  color: #222;
}
#seo-footer #seo-toggle{
  display:inline-block;
  padding:8px 12px;
  border:1px solid #d5d5d5;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  font-weight:700;
}
#seo-footer.collapsed #seo-body{ display:none; }
#seo-footer #seo-body{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:18px;
  background:#fff;
  border:1px solid #e7e7e7;
  border-radius:12px;
  padding:16px;
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
}
#seo-footer h1{ font-size:20px; margin:0 0 8px; }
#seo-footer h2{ font-size:16px; margin:0 0 6px; }
#seo-footer p{ margin:0 0 8px; line-height:1.45; }
#seo-footer ul{ margin:0; padding-left:18px; }
#seo-footer details{ margin-bottom:6px; }
@media (max-width: 900px){
  #seo-footer #seo-body{ grid-template-columns: 1fr; }
}

/* SEO-блок: не влияет на макет и не виден юзерам, но индексируется ботами */
.seo-only{
  position: absolute;
  left: -9999px;     /* уводим за край */
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

/* ==== Theme (Day/Night) ==== */
/* по умолчанию у тебя стоит дневной фон в #xp-screen; переопределим классами */
#xp-screen.theme-day{
  background-image: url('img/bliss.jpg') !important;
  filter: none;
}
#xp-screen.theme-night{
  /* если положишь ночную картинку — раскомментируй следующую строку: */
  background-image: url('img/bliss_night.png') !important; 
  /* fallback: слегка затемняем дневную */
  /* filter: brightness(0.78) saturate(0.95) contrast(1.02); */
}

/* немного меняем оттенок хедера окон и таскбара ночью */
#xp-screen.theme-night .window-header{
  background: linear-gradient(#1f3f7c,#17326a);
}
#xp-screen.theme-night #taskbar{
  background: linear-gradient(180deg,#0a4aa6,#1c62c7);
}



/* ==== Idle micro-motion для иконок ==== */
#xp-screen.idle #icons .icon{
  animation: iconFloat 5.5s ease-in-out infinite alternate;
}
#xp-screen.idle #icons .icon:nth-child(2){ animation-delay:.3s; }
#xp-screen.idle #icons .icon:nth-child(3){ animation-delay:.6s; }
#xp-screen.idle #icons .icon:nth-child(4){ animation-delay:.9s; }
#xp-screen.idle #icons .icon:nth-child(5){ animation-delay:1.2s; }
#xp-screen.idle #icons .icon:nth-child(6){ animation-delay:1.5s; }
#xp-screen.idle #icons .icon:nth-child(7){ animation-delay:1.8s; }

@keyframes iconFloat{
  0%   { transform: translateY(0px); }
  100% { transform: translateY(-2.5px); }
}


/* == MailerLite: общий вид и ширина в окнах == */
.window-body .ml-embedded { width: 100%; }

/* убираем серый бокс MailerLite, делаем как у тебя */
.ml-form-embedContainer .ml-form-embedWrapper{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* шрифт и кнопка — как у тебя на сайте */
.ml-embedded *{ font-family: inherit; }
.ml-form-embedContainer button[type="submit"],
.ml-form-embedContainer .ml-form-embedSubmit button{
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-weight: 700 !important;
}

/* чтобы форма не была “узкой” и расправлялась */
.ml-form-embedContainer .ml-form-embedWrapper.embedForm{
  max-width: 100% !important;
  width: 100% !important;
}

/* --- MailerLite: состояние после ресета формы --- */
.miqo-ml-reset .ml-form-successContainer,
.miqo-ml-reset .ml-form-successContent,
.miqo-ml-reset .ml-form-successBody,
.miqo-ml-reset .ml-form-successMessage{
  display: none !important;  /* всегда спрятать success, пока не снимем класс */
}

.miqo-ml-reset .ml-form-embedWrapper,
.miqo-ml-reset .ml-form-embedBody,
.miqo-ml-reset .ml-form-contentBody,
.miqo-ml-reset form.ml-block-form{
  display: block !important; /* форма видима */
}



/* ==== Draw / Gallery ==== */

/* тулбар компактный и ровный */
.draw-toolbar{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin-bottom:10px;
}
.draw-toolbar .tool{ display:flex; align-items:center; gap:6px; }
.draw-toolbar .tool span{ font-weight:700; }
.draw-toolbar .tool-range{ min-width:220px; }
.draw-toolbar .author{
  flex:1 1 220px; max-width:320px; padding:8px;
  border:1px solid #ccc; border-radius:6px;
}
.draw-toolbar .actions{ display:flex; gap:8px; margin-left:auto; }






/* грид галереи шире */
.draw-grid{
  display:grid; gap:10px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

#draw-gallery img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border:1px solid #e6e6e6; border-radius:10px; display:block;
}
/* Draw: круг-курсор поверх канваса */
#draw-canvas-wrap{ position: relative; }
#draw-canvas, #draw-canvas-wrap{ cursor: none; }
#brush-ghost{
  position: absolute;
  pointer-events: none;
  border: 2px solid rgba(0,0,0,.55);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  display: none;
}

/* Gallery: крестик удаления для админа */
#draw-gallery .card{ position:relative; background:#fff; border:1px solid #eee; border-radius:10px; padding:6px; }
#draw-gallery .card .card-del{
  position:absolute; top:6px; right:6px;
  background: rgba(0,0,0,.65); color:#fff; border:0;
  border-radius:50%; width:22px; height:22px; line-height:22px; text-align:center;
  font-weight:700; cursor:pointer;
}

#draw-gallery .meta{ font-size:12px; color:#666; margin-top:6px; text-align:center; }

/* кнопка удаления (только когда есть права — её покажет JS) */
#draw-gallery .thumb-wrap{ position:relative; }

#draw-gallery .card-del:hover{ background:rgba(0,0,0,.82); }

/* окна побольше по умолчанию: правила на всякий случай */
#draw-window.window { width: 980px; height: 700px; }
#gallery-window.window { width: 960px; height: 680px; }

/* мобильные — холст адаптивный */
@media (max-width: 820px){
  #draw-window.window, #gallery-window.window{
    width: 92vw !important;
    height: 80vh !important;
    left: 4vw !important; top: 8vh !important;
  }
  #draw-canvas{ width:100% !important; height:auto !important; }
}









/* clamp draw/gallery windows inside the monitor */
#draw-window, #gallery-window{
  max-width: calc(100% - 40px);
  max-height: calc(100% - 80px);
}
#draw-window .window-body, #gallery-window .window-body{
  max-height: calc(100% - var(--win-header-h));
}


#store-window .product[data-active="false"] { display:none !important; }



/* фикс размеров иконок, чтобы все были одинаковые */
.icon{ width:96px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.icon img{ width:64px; height:64px; object-fit:contain; display:block; margin:0 auto 6px; }

/* безопасный нижний отступ, чтобы иконки не наезжали на таскбар */
:root{ --taskbar-h: 44px; }
#desktop{ padding-bottom: calc(var(--taskbar-h) + 10px); }


/* Desktop icons: без видимого скролла, просто занимают колонку и не наезжают на таскбар */
#icons{
  position:absolute; left:24px; top:24px;
  display:flex; flex-direction:column; gap:12px;
  padding-bottom: calc(var(--taskbar-h) + 8px);
  overflow: visible;          /* <-- вместо auto */
  max-height: none;           /* <-- снимаем ограничение */
}


.ic-label{ font-size:13px; line-height:1.1; word-break:break-word; }


/* Projects: нормальное отображение длинного текста */
#projects-list .project .text {
  white-space: pre-wrap;      /* сохраняет переносы строк из текста */
  word-wrap: break-word;      /* старый синтаксис, для надёжности */
  overflow-wrap: anywhere;    /* ломает очень длинные "слова"/ссылки */
  max-width: 100%;
  box-sizing: border-box;
}

#projects-list .project {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Projects: чтобы Markdown-код-блоки не вылезали за рамки */
#projects-list .project pre {
  white-space: pre-wrap;      /* переносим строки внутри <pre> */
  word-wrap: break-word;
  overflow-wrap: anywhere;
  font-family: inherit;       /* убираем “консольный” шрифт, если не нужен */
  font-size: 14px;            /* можно подогнать под основной */
  margin: 8px 0;
}

#projects-list .project code {
  white-space: inherit;       /* чтобы одиночные `code` тоже не ломали вёрстку */
}