.portfolio-window {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  width: min(760px, calc(100vw - 40px));
  max-width: none;
  height: min(490px, calc(100dvh - 64px));
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  color: #252525;
  background: transparent;
  overflow: hidden;
  z-index: 20;
  text-align: left;
  touch-action: auto;
  box-shadow: 0 20px 58px #0005, 0 3px 12px #0004;
}

.portfolio-window::backdrop {
  background: #15202c35;
}

.portfolio-window,
.portfolio-window * {
  box-sizing: border-box;
}

.portfolio-window__frame,
.portfolio-window__browser {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.portfolio-window__titlebar {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  height: 35px;
}

.portfolio-window__application {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.4;
}

.portfolio-window__controls {
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
  align-self: flex-start;
}

.portfolio-window__control {
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  touch-action: manipulation;
}

.portfolio-window__control:focus-visible {
  outline: 2px solid #154993;
  outline-offset: 3px;
  z-index: 1;
}

.portfolio-window__toolbar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 11px;
  height: 45px;
  padding: 7px 12px;
}

.portfolio-window__navigation {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  user-select: none;
}

.portfolio-window__navigation span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  font: 28px/1 Arial, sans-serif;
}

.portfolio-window__address {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  gap: 7px;
  height: 27px;
  padding: 0 8px;
  background: #fff;
  font-size: 12px;
}

.portfolio-window__site-icon,
.portfolio-window__refresh {
  flex-shrink: 0;
}

.portfolio-window__url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-window__protocol {
  color: #737373;
}

.portfolio-window__refresh {
  margin-left: auto;
  color: #747474;
  font: 18px/1 Arial, sans-serif;
}

.portfolio-window__tabstrip {
  display: flex;
  flex-shrink: 0;
  height: 30px;
  padding: 0 7px;
}

.portfolio-window__tab {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 190px;
  padding: 0 12px;
  font-size: 11px;
}

.portfolio-window__content {
  display: block;
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: #fff;
  padding: 25px 30px 28px;
  touch-action: pan-y;
}

.portfolio-window__page { width: 100%; }

.portfolio-window__page h2 {
  margin: 0 0 8px;
  color: #333;
  font: 400 27px/1.3 Georgia, 'Times New Roman', serif;
}

.portfolio-window__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.portfolio-window__entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 0;
  border-bottom: 1px solid #e7e7e7;
}

.portfolio-window__list--recognition .portfolio-window__entry { padding-top: 12px; padding-bottom: 12px; }

.portfolio-window__entry:last-child { border-bottom: 0; padding-bottom: 0; }
.portfolio-window__entry-body { min-width: 0; }

.portfolio-window__entry h3 {
  margin: 0;
  color: #333;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.portfolio-window__project-link { color: #245b9a; text-underline-offset: 3px; }
.portfolio-window__project-link:hover { color: #143f74; }
.portfolio-window__source { margin-left: 12px; color: #777; font-size: 10px; font-weight: 400; white-space: nowrap; }

.portfolio-window__entry-description {
  margin: 5px 0 0;
  color: #686868;
  font-size: 12px;
  line-height: 1.6;
}

.portfolio-window__entry-controls { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; gap: 12px; }
.portfolio-window__metric { color: #555; font-size: 11px; white-space: nowrap; }

@media (max-width: 540px) {
  .portfolio-window__content { padding: 21px 18px 24px; }
  .portfolio-window__entry { align-items: flex-start; gap: 10px; padding: 16px 0; }
  .portfolio-window__entry h3 { font-size: 13px; }
  .portfolio-window__entry-controls { padding-top: 2px; max-width: 85px; }
  .portfolio-window__metric { font-size: 10px; white-space: normal; text-align: right; }
  .portfolio-window__source { margin-left: 8px; }
}

.portfolio-window__status {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  height: 23px;
  padding: 0 6px;
  border-top: 1px solid #d9dce0;
  color: #5b626b;
  background: #f4f5f7;
  font-size: 10px;
}

.portfolio-window__grip {
  width: 10px;
  height: 10px;
  background: repeating-linear-gradient(135deg, transparent 0 2px, #91989f 2px 3px, transparent 3px 4px);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* Windows 7: translucent blue frame, glossy caption buttons, IE tab chrome. */
.portfolio-window--windows {
  height: min(530px, calc(100dvh - 64px));
  padding: 0 7px 7px;
  border: 1px solid #4c7092;
  border-radius: 7px;
  background: linear-gradient(125deg, #e9f7ffed 0%, #bbdcf5f5 21%, #8fb6d8f7 46%, #d4eaf9f0 66%, #9cc3e3fa 100%);
  box-shadow: inset 0 0 0 1px #ffffffbc, 0 20px 58px #0005, 0 3px 12px #0004;
  font-family: 'Segoe UI', Tahoma, sans-serif;
}

.portfolio-window--windows .portfolio-window__titlebar {
  gap: 7px;
}

.portfolio-window--windows .portfolio-window__application {
  color: #173044;
  text-shadow: 0 0 6px #fff, 0 0 3px #fff;
}

.portfolio-window--windows .portfolio-window__app-icon,
.portfolio-window--windows .portfolio-window__site-icon,
.portfolio-window--windows .portfolio-window__tab-icon {
  color: #2082c1;
  font: italic 700 20px/1 Georgia, serif;
  text-shadow: 0 1px #fff;
}

.portfolio-window--windows .portfolio-window__app-icon {
  margin-left: 2px;
}

.portfolio-window--windows .portfolio-window__controls {
  margin-right: -1px;
  margin-top: -1px;
  border: 1px solid #6383a0;
  border-top: 0;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 1px #ffffffa1;
}

.portfolio-window--windows .portfolio-window__control {
  width: 30px;
  height: 25px;
  border: 0;
  border-right: 1px solid #6485a2;
  background: linear-gradient(#e5f0f899 0 46%, #9bb9d499 47%, #bfdaed99);
  color: #163d5c;
  text-shadow: 0 1px #fff;
  box-shadow: inset 0 0 0 1px #ffffff80;
  font-size: 19px;
}

.portfolio-window--windows .portfolio-window__control--minimize {
  border-radius: 0 0 0 4px;
}

.portfolio-window--windows .portfolio-window__control--close {
  width: 46px;
  border-right: 0;
  border-radius: 0 0 4px;
  background: linear-gradient(#e9b0a1 0 46%, #c76852 47%, #be5039);
  color: #fff;
  text-shadow: 0 1px 2px #652b22;
  font-size: 23px;
}

.portfolio-window--windows .portfolio-window__control:hover {
  background: linear-gradient(#cdf2ff 0 46%, #45b9ec 47%, #1382bc);
  box-shadow: inset 0 0 0 1px #c7efff, 0 0 8px #3dceff;
}

.portfolio-window--windows .portfolio-window__control--close:hover {
  background: linear-gradient(#f2bfaf 0 46%, #e05d3d 47%, #c6341b);
  box-shadow: inset 0 0 0 1px #ffe8b7, 0 0 8px #ef7651;
}

.portfolio-window--windows .portfolio-window__browser {
  border: 1px solid #7598b8;
  background: #dfeaf4;
  box-shadow: 0 0 0 1px #ffffffa8;
}

.portfolio-window--windows .portfolio-window__toolbar {
  background: linear-gradient(#f5f8fc, #e6eef7);
}

.portfolio-window--windows .portfolio-window__navigation span {
  border: 1px solid #8faec6;
  border-radius: 50%;
  background: linear-gradient(#9ad2f6, #3d8cce 49%, #1b6eaf 50%, #73acd6);
  box-shadow: inset 0 0 0 1px #ffffff80, 0 1px 2px #718aa955;
  color: #fff;
}

.portfolio-window--windows .portfolio-window__navigation span + span {
  opacity: .45;
  width: 24px;
  height: 24px;
}

.portfolio-window--windows .portfolio-window__address {
  border: 1px solid #9cb3c9;
  box-shadow: inset 0 1px 2px #d3d8df;
}

.portfolio-window--windows .portfolio-window__tabstrip {
  border-bottom: 1px solid #a2b5c8;
  background: linear-gradient(#e4edf7, #d1e1f2);
}

.portfolio-window--windows .portfolio-window__tab {
  position: relative;
  top: 1px;
  border: 1px solid #9fb7ce;
  border-bottom: 1px solid #fff;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(#f9fcff, #fff);
}

.portfolio-window--windows .portfolio-window__tab-icon {
  font-size: 17px;
}

/* Classic Mac Safari: brushed silver, inset URL field, colored traffic lights. */
.portfolio-window--mac {
  height: min(570px, calc(100dvh - 64px));
  border: 1px solid #7d7d7d;
  border-radius: 8px;
  background: #dedede;
  font-family: 'Lucida Grande', 'Helvetica Neue', Arial, sans-serif;
}

.portfolio-window--mac .portfolio-window__titlebar {
  height: 31px;
  justify-content: center;
  border-top: 1px solid #ffffffdf;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(#f2f2f2, #d6d6d6);
}

.portfolio-window--mac .portfolio-window__application {
  max-width: calc(100% - 180px);
  font-size: 13px;
  text-shadow: 0 1px #fff;
}

.portfolio-window--mac .portfolio-window__app-icon {
  display: none;
}

.portfolio-window--mac .portfolio-window__controls {
  position: absolute;
  top: 0;
  left: 9px;
  height: 30px;
  align-items: center;
  gap: 2px;
}

.portfolio-window--mac .portfolio-window__control {
  position: relative;
  width: 23px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #4c3b23;
}

.portfolio-window--mac .portfolio-window__control::before {
  content: '';
  position: absolute;
  width: 13px;
  height: 13px;
  border: 1px solid #bd9132;
  border-radius: 50%;
  background: linear-gradient(#ffdf89, #f7bc38);
  box-shadow: inset 0 1px 1px #ffffffe5, 0 1px #ffffffa8;
}

.portfolio-window--mac .portfolio-window__control--close {
  order: -1;
  color: #5c211c;
}

.portfolio-window--mac .portfolio-window__control--close::before {
  border-color: #bb5b55;
  background: linear-gradient(#ff9c96, #ee665e);
}

.portfolio-window--mac .portfolio-window__control--maximize {
  color: #1c5526;
}

.portfolio-window--mac .portfolio-window__control--maximize::before {
  border-color: #569b45;
  background: linear-gradient(#b0e49a, #70bd52);
}

.portfolio-window--mac .portfolio-window__control span {
  position: relative;
  z-index: 1;
  opacity: 0;
  font: 700 12px/1 Arial, sans-serif;
}

.portfolio-window--mac .portfolio-window__controls:hover .portfolio-window__control span,
.portfolio-window--mac .portfolio-window__control:focus-visible span {
  opacity: 1;
}

.portfolio-window--mac .portfolio-window__toolbar {
  height: 40px;
  padding-top: 3px;
  background: linear-gradient(#d6d6d6, #c6c6c6);
}

.portfolio-window--mac .portfolio-window__navigation {
  gap: 0;
  border: 1px solid #929292;
  border-radius: 4px;
  background: linear-gradient(#fafafa, #d7d7d7);
  box-shadow: 0 1px #ffffff80;
}

.portfolio-window--mac .portfolio-window__navigation span {
  width: 27px;
  height: 24px;
  color: #929292;
  text-shadow: 0 1px #fff;
}

.portfolio-window--mac .portfolio-window__navigation span + span {
  border-left: 1px solid #aaa;
}

.portfolio-window--mac .portfolio-window__address {
  height: 26px;
  border: 1px solid #929292;
  border-radius: 5px;
  box-shadow: inset 0 1px 3px #0002, 0 1px #ffffff8c;
}

.portfolio-window--mac .portfolio-window__site-icon,
.portfolio-window--mac .portfolio-window__tab-icon {
  color: #5f88a7;
  font-size: 17px;
  line-height: 1;
}

.portfolio-window--mac .portfolio-window__tabstrip {
  height: 29px;
  padding: 0;
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #858585;
  background: linear-gradient(#bdbdbd, #cbcbcb);
}

.portfolio-window--mac .portfolio-window__tab {
  justify-content: center;
  width: 225px;
  border-right: 1px solid #999;
  background: linear-gradient(#f3f3f3, #dfdfdf);
  box-shadow: inset 0 1px #fff;
}

.portfolio-window--mac .portfolio-window__status {
  height: 21px;
  border-top: 1px solid #aaa;
  background: linear-gradient(#e0e0e0, #d1d1d1);
}

.portfolio-window--mac .portfolio-window__status > span:first-child {
  visibility: hidden;
}

.portfolio-window--maximized {
  width: calc(100vw - 24px);
  height: calc(100dvh - 24px);
}

@media (max-width: 540px) {
  .portfolio-window {
    width: calc(100vw - 20px);
    height: min(490px, calc(100dvh - 40px));
  }

  .portfolio-window__toolbar {
    gap: 8px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .portfolio-window__application {
    font-size: 11px;
  }

  .portfolio-window__address {
    gap: 5px;
    padding: 0 6px;
    font-size: 11px;
  }

  .portfolio-window__navigation span + span {
    display: none;
  }

  .portfolio-window--windows .portfolio-window__control {
    width: 30px;
    height: 29px;
  }

  .portfolio-window--windows .portfolio-window__control--close {
    width: 38px;
  }

  .portfolio-window--mac .portfolio-window__controls {
    left: 5px;
    gap: 0;
  }

  .portfolio-window--mac .portfolio-window__control {
    width: 29px;
    height: 30px;
  }

  .portfolio-window--maximized {
    width: calc(100vw - 8px);
    height: calc(100dvh - 8px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .portfolio-window[open] {
    animation: portfolio-window-appear 140ms ease-out;
  }

  @keyframes portfolio-window-appear {
    from { opacity: 0; transform: scale(.985) translateY(5px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }
}